/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video {
  display: block;
}
a img { border: 0; }
	
@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/Orbitron-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DigitaldreamRegular';
    src: url('../fonts/DIGITALDREAM-webfont.eot');
    src: url('../fonts/DIGITALDREAM-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DIGITALDREAM-webfont.woff') format('woff'),
         url('../fonts/DIGITALDREAM-webfont.ttf') format('truetype'),
         url('../fonts/DIGITALDREAM-webfont.svg#DigitaldreamFatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ponderosa';
    src: url('../fonts/ponderosa.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Fira+Mono');

html
{
    height:100%;
}

body
{
	background-color: #FFFFFF;
	font-family: Verdana, Arial;
	margin: 0px;
	padding: 0px;	
	text-align:center;	
	
    background: #ffffff; /* Old browsers */
    /*
    background: -moz-linear-gradient(top, #ffffff 1%, #f4f4f4 100%); 
    background: -webkit-linear-gradient(top, #ffffff 1%,#f4f4f4 100%);
    background: linear-gradient(to bottom, #ffffff 1%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
    */

	height:100%;
}

#root
{
    min-height:100%;
	position:relative;
}

input
{
	font-family: Verdana, Arial;
	font-size: 1em;
}

img
{
	border:0px;
	vertical-align:middle;
}

p
{
    margin:0em;
    padding-bottom:0.5em;
}

h1
{
    font-size:1.3em;
}

h2
{
    font-size:1.2em;
}

form
{
    font-size:1.2em;   
}

h1
{
	/*
	background-color: #333;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
	color: transparent;
  text-shadow: rgba(255,255,255,0.5) 2px 3px 6px;
  */
  color:gray;
  /*text-shadow: 1px 1px 1px white, -1px -1px 1px black;*/
  
  
  border-top:1px solid #cccccc;
  padding:0.5em;
  margin:0.3em;
}

div
{
    margin:0em;
    padding:0em;
}

.js_required
{
	display:none;
}

.js_reccomended
{
	display:inline-block;
	border:1px solid red;
	padding:10px;
	margin:10px;
	text-align:center;	
	color:red;
}

.nowrap
{
	white-space:nowrap;
}

.notes
{
	color:gray;
	font-size:0.7em;
}

.blockinline
{
	border:1px solid #cccccc;
	padding:0.5em;
	margin:0.5em;
	display:inline-block;
	vertical-align: middle;
}

img.status
{
	height:1em;
	margin-right:0.5em;
	vertical-align: baseline;
}

table.properties
{		
	width:90%;    
}

table.properties td,
table.properties th
{	
	text-align:left;
	padding:5px;
	padding-left:10px;
    word-wrap: break-word;
}

table.properties tr
{	
	/*background-color: #fafafa;*/
	/*background-color: #aaffaa;*/
	
	transition: background-color 0.5s;
	-moz-transition: background-color 0.5s; 
	-webkit-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	
}

table.properties tr:nth-child(2n) {
	background-color: rgb(240,240,250);
	/*background-color:rgba(255,255,255,0.6);	*/	
}

table.properties tr:nth-child(2n+1) {
	background-color: rgb(250,250,250);
	/*background-color:rgba(255,255,255,0.1);*/
}


table.properties tr:nth-child(2n):hover, 
table.properties tr:nth-child(2n+1):hover {
	background-color:white;
}

table.properties tr > td:first-child {
	/*background-color: #eeeeee;*/

	/*white-space: nowrap;*/
	text-align:right;	
	vertical-align:top;
}	

table.properties img
{
	vertical-align: middle;		
}

.icon_16
{
	width: 16px;	
	vertical-align:middle;
}

div#tooltip {
	display:none;
  position: absolute;
  z-index: 10;
  padding:1em;
  font-size:0.9em;
  max-width: 30em;
  
  color: black;
  box-shadow: 0.2em 0.2em 1em gray;
    border-radius: 1em;			
	
	background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

}

.ipv4_box, .ipv6_box
{	
	display:inline-block;    
	width:26em;
	/*height: 100px;*/
	/*border:1px solid red;*/
	padding:0.3em;
	text-align:center;
	margin:0.6em;
	
	
    background-color:white;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.06+50,0.11+51,0.05+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.11) 51%, rgba(0,0,0,0.05) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 50%,rgba(0,0,0,0.11) 51%,rgba(0,0,0,0.05) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 50%,rgba(0,0,0,0.11) 51%,rgba(0,0,0,0.05) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0d000000',GradientType=0 ); /* IE6-9 */



	box-shadow: 0px 0px 0.5em #888;
	border-radius: 0.5em;			

    transition: box-shadow 0.5s;
}

.ipv4_box:hover, .ipv6_box:hover
{
    box-shadow: 0px 0px 0.5em #888;
}

.ipv4_box .flag, .ipv6_box .flag
{
    height:2.3em;
}

.ipv6_box .ip
{
    font-size:1em;
}

.ip_reserved
{
    background-color:#BCE9FF;
    /*opacity:0.8;*/
}

.box
{
	display:inline-block;
	margin:1em;
	padding:0.5em;
	/*border:1px solid blue;	*/
	
	overflow:auto;
    max-width: 100vw;
    height: 250px;
	width: 500px;
    
	box-shadow: 0px 0px 5px #888;
	border-radius: 1em;			
    background-color: rgba(0,0,0,0.05);

}

.ip_box img
{		
}

.dns_box
{
	/*display:inline-block;*/
}

.center_box
{
	/*margin:auto;*/
}

.title
{
	padding:2px;
	font-size:1.4em;
}

.description
{	
	padding:2px;
	color: gray;
	font-size:0.9em;
}

.wait
{	
	display:inline-block;
	width:32px;
	height:32px;
	background-image:url("../images/misc/wait.gif");
	background-repeat:no-repeat;
	background-position:50% 50%;
    margin:1em;
}

#dnsdetection_title
{
    display:block;

  color:gray;
  
  border-top:1px solid #cccccc;

  position: absolute;
  padding:0px;
  margin:0px;
  padding-top:0.2em;
  padding-bottom:0.2em;
  width:100%;

  font-size: 1.4em;    
  font-weight: bold;
  z-index:1000;
  text-shadow: 0px 0px 2px white;
}

#dnsplaceholder_waits
{
    position: relative;    
    min-height:1.8em;

    font-size:1.4em;
}
.wait2
{
    display:inline-block;
    margin:0px;
    padding:0px;
    background-color:#84B5EF;    
    height:1.8em;
    transition:opacity 1s;
}



#logo
{	
	float:left;		
}

#logo img
{    
    /*
        width:20em;
        margin:0.5em;
    */
    position: absolute;
    top:0.5em;
    left:0.5em;
    height:3em;
    

    
}

#adv
{
	float:right;
	box-shadow:0px 0px 10px black;
	margin:1em;
}

#tabs
{
	position:absolute;
	left: 450px;
	top:20px;
	height:30px;	
}

#tabs form
{
	display:inline-block;
	margin-left:3em;
}

.tab
{
	display:inline-block;
	height:30px;
	background-color:#a3a3a3;	
	opacity: 0.5;
	line-height:30px;
	padding-left:1em;
	padding-right:1em;
	text-decoration:none;
	color:black;
}

.tab:hover
{
	display:inline-block;
	height:30px;
	background-color:#d3d3d3;	
	opacity: 1;
	transition: opacity 0.5s, background-color 0.5s;
}

.tabSelected
{
	background-color:#d3d3d3;
	opacity: 1;
}

#query
{
	width: 30vw;
}

#content
{
	clear:both;
	/*width:1000px;*/
	margin-left: auto;
	margin-right: auto;
	/*border:1px solid yellow;*/
	text-align:center;	
}

#header, #footer
{		
	display:block;    
    font-size:0.8em;
	text-align:center;

    padding:1em;
	
	color:#888888;
	background-color:#eeeeee;
    z-index:2000;
     
}

#header
{
    /*
    position:fixed;
    top:0px;
    margin:0px;
    padding-left:1%;
    padding-right:1%;
    width:98%;
    */

    text-align:left;

    -moz-box-shadow: inset 0 -10px 10px -10px #000000;
    -webkit-box-shadow: inset 0 -10px 10px -10px #000000;
    box-shadow: inset 0 -10px 10px -10px #000000;
}

form
{
    display:inline-block;
}

#logo-img
{
    width:12em;
}

#footer
{
    position:absolute;
    bottom:0px;
    padding-left:0px;
    padding-right:0px;
    width:100%;    
    -moz-box-shadow: inset 0 10px 10px -10px #000000;
    -webkit-box-shadow: inset 0 10px 10px -10px #000000;
    box-shadow: inset 0 10px 10px -10px #000000;        
    font-size:0.7em;
}

.docs_center
{
	text-align:center;
	padding:10px;
	color:gray;
}

.docs_verbose
{
	font-size:0.8em;
	color:gray;
}

#docs
{
	margin:10px;
	margin-top:50px;
	text-align:left;
}

.activate_button
{
	padding:0.2em;
    padding-left:2em;
    padding-right:2em;
	margin:0.5em;
    width: 30em;
    line-height:3em;
	text-align:center;
	background-color:#eeeeee;
	box-shadow:0em 0em 0.2em gray;
	
	-webkit-transition: background-color 1s;
  transition: background-color 1s;
  text-decoration: none;
  color: black;
}

.activate_button:hover
{
	background-color: white;
}


.ip, .digital
{
    font: 1em 'Orbitron', Arial, sans-serif;
    /*font-family: 'Fira Mono', monospace;*/
    /*font-family: 'Ponderosa', monospace;*/
    background-color:#002B37;
    color: #00ED64;

    text-shadow: 0px 0px 5px #27AE60;
	text-decoration:none;
}

.digital 
{
    padding:0.2em;
	margin:0.2em;	
	box-shadow:0em 0em 0.2em black;
}

span.digital 
{
	line-height: 1.8em;	
}

.ip
{	
	display:block;	
	padding:0.3em;	
    margin-bottom:0.3em;	
	
	border: 1px inset gray;
    border-radius: 0.3em;			
}

.location
{
	white-space:nowrap;
    overflow:hidden;
	font-size: 1em;
    color:#444444;
}

.isp
{
	white-space:nowrap;
    overflow:hidden;
	font-size: 0.8em;
    color:#888888;
}

.details
{
	margin-left:auto; 
  margin-right:auto;
  /*
  width:70%;
  */
}

.separator
{
	border-top: 2px solid #cccccc !important;
	padding:0px !important; 
	margin:0px !important;	
}

.confidence
{
	border:1px solid green;	
	width:10em;
	display:inline;
	float:right;
	padding-left:20px;
	font-size: 0.8em;
	color:green;
}

#map
{
	width:100%;
	height:500px;
	border:0px;
}

#torrentdetection
{		
	padding:5px;
	margin:5px;
	text-align:center;
}

#rtc_placeholder>div
{
    display:inline-block;
}
#dnsplaceholder_results>div
{
    display:inline-block;
}

table.data
{
	/*width:99%;*/
	border-collapse: collapse;
	border:1px solid #dddddd;
}

.data td
{
	border:1px solid #f0f0f0;
	/*background-color:white;*/
	padding:3px;
	text-align:center;			
}

.data td,
.data th
{
	vertical-align:middle;	
	
	/*
	border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	-webkit-border-radius: 0.4em;	
	*/
	
	margin: 0px; 	
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle;	
	
	/*border:1px solid red;*/
}

.data th
{
	border:1px solid #3586FF;
	white-space: nowrap;		
}

.data td img
{
	vertical-align:middle;	
}

.data tr
{
	/*border:1px solid #cccccc;*/
	background-color: #fafafa;
}

.data th
{
	padding: 5px;
	text-align:left;
	background-color: #66A3FF;	
	text-align:center;
	color:white;
	text-shadow: #4488DD 0px 0px 2px;  
}

.data th a
{
	color:white;
	text-decoration:underline;
}

/*
table.data tr:nth-child(2n) td:nth-child(2n) {
	background-color: rgba(0,0,0,0.05);
}

table.data tr:nth-child(2n) td:nth-child(2n+1) {
	background-color: rgba(0,0,0,0.08);
}

table.data tr:nth-child(2n+1) td:nth-child(2n) {
	background-color: rgba(0,0,0,0);
}

table.data tr:nth-child(2n+1) td:nth-child(2n+1) {
	background-color: rgba(0,0,0,0.02);
}
*/

table.data tr:nth-child(2n) {
	background-color: rgba(0,0,0,0.08);
}

table.data tr:nth-child(2n+1) {
	background-color: rgba(0,0,0,0);
}

@media screen and (max-width: 680px) {
    body
    {
        /*background:yellow;*/
        font-size:0.8em;
    }

    /*
    #query
    {
        width: 60vw;
    }
    */
    myipv4_placeholder>div,
    myipv6_placeholder>div,
    #rtc_placeholder>div,
    #dnsplaceholder_results>div
    {
        display:block;
    }
    
    .ipv4_box, .ipv6_box
    {
        /*width:90vw;*/
    }

    .box
    {
        display:block;
        width:auto;      
        height:auto;
    }

    
}