/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~._. GENERAL ~'~._.~'~._.~'~._.~'~._. */
/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~.*/

*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
 
html {
  font: 100%/1.5 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width:640px)  { html { font-size:112%; } }
@media (min-width:1024px) { html { font-size:120%; } }

body {  background: #ffffff; color:#555; }

section { text-align:center; padding:32px 0; }
@media (min-width:640px) { section { padding:64px 0; } }

.container { margin:0 auto; max-width:848px; width:90%; }

a { color:#cc3399; text-decoration:none; }
a:hover { text-decoration:underline; }

::-moz-selection { background:#cc3399; color:#fff; text-shadow:none; }
-webkit-selection { background:#cc3399; color:#fff; text-shadow:none; }
::selection { background:#cc3399; color:#fff; text-shadow:none; }



/* ~'~._.~'~._.~'~._.~'~._.~'~ NFO POP UP MODAL ~'~._.~'~._.~'~._.~'~._. */
/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~.*/

#screen {
	position: fixed; z-index: 10;
	top: 0px; left: 0px;
	width:100%; height:100%;
	background: rgba(0,0,0,0.8);
	display: none;
}
#nfo {
	margin: 10% auto;
	width:60%;
	max-height: 75%;
	overflow-y: scroll;
	padding:20px;
	background: none repeat scroll 0% 0% #eee;
	border: 2px solid #fff;
	box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

/*! rwd column via http://www.adamkaplan.me/grid/ */

.column { margin-bottom: 1.5rem; }
@media (min-width: 640px) {
  .column {
    float: left;
    margin: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }
 
  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }
  .column.third { width: 33.3%; }
  .column.fourth { width: 24.95%; }
  .column.flow-opposite { float: right; }
}

/* ------------- Clearfix by Nicolas Gallagher ------------- */
.clearfix:before,
.clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }	 
.nfo-butterfly { 	
	max-width:100%;
	max-height:100%;
	margin: 0 auto;
	display: inline-block;
}
.nfo-mac {
	border-top: 2px solid rgb(204, 204, 204);
	padding-top: 15px; margin-top: -40px;
}
.nfo-mkr { padding-top: 2px; text-decoration: underline; cursor: pointer; }
.nfo-mkr:hover { color:#cc3399; }

.nfo-time {
	padding-top: 2px;
}

#nfo-right div { overflow: hidden; text-overflow: ellipsis; }

.knownNetwork, #network-count-button{ text-decoration: underline; cursor: pointer; }
.knownNetwork:hover, #network-count-button:hover { color:#cc3399; }


/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~. BUTTERFLY ~'~._.~'~._.~'~._.~'~._. */
/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~.*/


.butterfly {
	width:340px;
	height:300px;
	margin: 0 auto;
	display: inline-block;
 	position: absolute; top:0px; left:0px;
 	transition: all 0.5s ease;
 	cursor: pointer;
}

	.butterfly .top, .nfo-butterfly .top {  	
	 	/*display:block; */
	 	width: 90%; 
	 	height: 46%; 
	}
		.butterfly .top .left, .nfo-butterfly .top .left { 
			display:inline-block;
			float:left; 
			width: 44%;
			height: 100%; 
			background-color: green; 
			-webkit-border-radius: 0% 83% 10% 150%;
			-webkit-transform: rotate(160deg) rotateY(20deg);
			transform: rotate(160deg) rotateY(20deg);
			position: relative; left:2%;
			-webkit-animation : flap-lt 180ms ease-in 4 alternate;
			animation : flap-lt 180ms ease-in 4 alternate;
		}
		.butterfly .top .right, .nfo-butterfly .top .right { 
			display:inline-block; 
			float: right;
			width: 44%;
			height: 100%; 
			background-color: green; 
			-webkit-border-radius: 150% 10% 83% 0%; 
			-webkit-transform: rotate(20deg) rotateY(20deg);
			transform: rotate(20deg) rotateY(20deg);
			position: relative; left:-2%;
			-webkit-animation : flap-rt 180ms ease-in 4 alternate;
			animation : flap-rt 180ms ease-in 4 alternate;
		}

	.butterfly .bottom, .nfo-butterfly .bottom {  	
	 	/*display:block; */
	 	width: 90%; 
	 	height: 46%; 
	}
		.butterfly .bottom .left, .nfo-butterfly .bottom .left { 
			display: inline-block;
			width: 26.4%;
			height: 60%;
			background-color: #008000;
			-webkit-border-radius: 108% 10% 120% 40%;
			position: relative; left:24%; top:-21%;
			-webkit-animation : flap-lb 180ms ease-in 4 alternate;
			animation : flap-lb 180ms ease-in 4 alternate;
		}
		.butterfly .bottom .right, .nfo-butterfly .bottom .right { 
			display: inline-block;
			width: 26.4%;
			height: 60%;
			background-color: #008000;
			-webkit-border-radius: 10% 108% 40% 120%;
			position: relative; left:22%; top:-21%;
			-webkit-animation : flap-rb 180ms ease-in 4 alternate;
			animation : flap-rb 180ms ease-in 4 alternate;
			padding: 1px;
		}

@keyframes flap-lt {
  100% { transform  : rotate(160deg) rotateY(60deg); left:12%; }
}
@keyframes flap-lb {
  100% { transform  : rotateY(60deg); left:31%; }
}
@keyframes flap-rt {
  100% { transform  : rotate(20deg) rotateY(60deg); left:-12%; }
}
@keyframes flap-rb {
  100% { transform  : rotateY(60deg); left:16%; }
}

@-webkit-keyframes flap-lt {
  100% { 
  	-webkit-transform  : rotate(160deg) rotateY(60deg);
  	transform  : rotate(160deg) rotateY(60deg); 
  	left:12%; 
  }
}
@-webkit-keyframes flap-lb {
  100% { 
  	-webkit-transform  : rotateY(60deg);
  	transform  : rotateY(60deg); 
  	left:31%; 
  }
}
@-webkit-keyframes flap-rt {
  100% { 
  	-webkit-transform  : rotate(20deg) rotateY(60deg); 
  	transform  : rotate(20deg) rotateY(60deg); 
  	left:-12%; 
  }
}
@-webkit-keyframes flap-rb {
  100% { 
  	-webkit-transform  : rotateY(60deg);
  	transform  : rotateY(60deg); 
  	left:16%; 
  }
}



/* ~'~._.~'~._.~'~._.~'~._.~'~._.~' FILTER MENU ~'~._.~'~._.~'~._.~'~._. */
/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~.*/


#filtermenu {
	padding:20px;
	border: 3px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	position: fixed; z-index: 10;
	width:98.5%;
	background: rgba(255,255,255,0.8);
	display: none;
}
.filt-ntwrk {
	padding:5px;
	border:1px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	margin:5px;
}
.filt-x {color:#cc3399; font-size:15px; padding:5px; cursor:pointer; }


/* ~'~._.~'~._.~'~._.~'~._.~'~._.~' STATISTICS ~'~._.~'~._.~'~._.~'~._. */
/* ~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~._.~'~.*/

#statistics {
	position: fixed;
	left: 20px;
	bottom: 20px;
	padding: 5px 10px;
	background-color: rgba(255, 255, 255, 0.8);
	border: 2px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#filterInput {
	font: 400 100%/1.5 "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
	text-rendering: optimizelegibility;
	color: #555;
	padding:5px;
	border:1px solid #ccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	margin:5px;
	transition: border 250ms;
}
