/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}


/* STRUCTURE */
html, body {
	background-color: rgb(30,30,30);
	font-family: 'Consolas', 'Inconsolata', 'Monaco', monospace;
	font-size: 16px;
	color: rgb(0, 248, 0);
}
#wrapper {
	width: 80%;
	min-width: 320px;
	max-width: 700px;
	margin: 20px auto 50px auto;
	padding: 30px;
}
header p, footer p {
	text-align: center;
	width: 75%;
	color: rgb(45, 178, 178);
}
footer ul {
	margin-top: 2em;
}


/* ASCII ART LOGO */
#logo {
	text-align: center;
	line-height: 1.3em;
	color: rgb(36, 237, 237);
}
#logoWrapper {
	text-align: center;
}
.logoDiv {
	display: inline-block;
}
.logoDiv:nth-of-type(2) {
	margin-left: -1em;
}
#tagline {
	margin-top: 1em;
	text-transform: uppercase;
}


/* LINKS */
a, a:link, a:visited {
	color: rgb(0, 248, 0);
	text-decoration: none;
}
a:active, a:hover {
	text-decoration: none;
	color: green;
}


/* TEXT */
h1 {
	font-weight: 700;
	margin: 50px 0 30px 0;
	padding: 0.35em 0 0.15em 0;
	background-color: rgb(0, 248, 0);
	color: black;
	text-align: center;
}
p {
	margin: 0 auto 0 auto;
	line-height: 1.5em;
	color: rgb(45, 178, 178);
}
pre {
	font-weight: 700;
}


/* LISTS */
ul {
	text-align: center;
	line-height: 1.8em;
	color: rgb(45, 178, 178);
}
.inlineList li {
	display: inline;
}
.inlineList li:not(:last-child) {
	margin-right: 2em;
}


/* TABLES */
table {
	width: 100%;
}
tr:hover {
	background-color: rgb(40,40,40);
}
th {
	text-transform: capitalize;
}
th:hover, td:hover {
	background-color: rgb(50,50,50);
}
th a {
	display: block !important;
	width: 100%;
	height: 100%;
}
th, td {
	padding: 0.3em 20px;
}

#loadingData {
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
	color: rgba(45, 178, 178, 0.8);
	line-height: 1.3em;
}

#setupTable td:nth-child(1) {
	color: rgb(0, 248, 0);
	width: 50%;
}
#setupTable td:nth-child(2) {
	color: rgb(36, 237, 237);
}

#metadataHeader {
	color: rgb(0, 248, 0);
}


/* TABLE CELLS */
.url {
	text-align: left;
}
a span.subdomain {
	color: rgba(45, 178, 178, 0.8);
}
a:hover span.subdomain {
	color: rgba(0,255,0,0.2);
}
a span.domain {
	color: rgb(36, 237, 237);
}
a:hover span.domain {
	color: green;
}

.count {
	min-width: 80px;
	color: rgb(36, 237, 237);
	text-align: center;
}

.metadata {
	text-align: center;
}
.whois {
	color: rgb(36, 237, 237);
}
.mapMarker {
	color: rgb(36, 237, 237);
}
.mapMarkerNoLocation {
	color: rgba(255,0,0, 0.5);
}
a:hover span.mapMarker, a:hover span.whois {
	color: green;
}


/* RESPONSIVE */
@media screen and (max-width:800px) {
	.logoDiv {
		width: 100%;
	}

	/* break addresses/count on smaller screens */
	td {		
		-ms-word-break: break-all;
		word-break: break-all;
		word-break: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
   		hyphens: auto;
	}
}

@media screen and (max-width:460px) {
	/* responsive ascii art */
	.logoDiv {
		font-size: 12px;
	}

	/* alternate row colors */
	tr:nth-child(even), th {
		background-color: rgb(40,40,40);
	}
}