/* Table of Contents

	- Resets, Page Structure, etc.
	- Basic elements
	- Tables
		- Games
		- Channels
		- Antihack Badges
	- Font declarations
	- Media queries
	
*/


/*
Resets, Page Structure, etc.
---------------------------------------------------------------------------------------------------- */

	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}
	
	html,
	body {
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	body {
		font-family: 'Droid Serif', Georgia, 'Book Antiqua', 'Times New Roman', serif;
		font-size: 16px;
		background: url('img/cracks.png') top right no-repeat, #DFC179 url('img/bg.jpg') repeat;
		color: #333;
		margin: 0px;
		padding: 25px 50px;
	}

	
	#response {
		width: 105%;
		max-width: 900px;
		margin: 0 auto;
	}

	#count {
		padding-bottom: 5px;
	}
	#info {
		max-width: 1300px;
		margin: 0 auto;
	}
	

	
/*
Basic elements
---------------------------------------------------------------------------------------------------- */

	h1 {
		color: #99CC00;
		margin: 0px 0px 5px;
		padding: 0px 0px 3px;
		font: bold 18px 'Helvetica Neue', Helvetica, Verdana, Calibri, Arial, sans-serif;
		border-bottom: 1px dashed #E6E8ED;
	}
	
	h2, h3 {
		margin-top: 0;
	}
	
	p{
		margin: 0 0 30px;
	}
	li {
		padding: 5px 0;
	}

	a {
		color: #A30F0A;
		font-size: 16px;
	}
	a:hover {
		color: #D1342E;
	}
	
	.css-link {
		position: absolute;
		top: 5px;
		right: 5px;
		
		background: #A30F0A;
		color: white;
		font-size: 12px;
		padding: 2px 5px;
		text-decoration: none;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Calibri, sans-serif;
	}
	.css-link:hover {
		color: #fff;
		background: #D1342E;
	}
	
	.divider {
		margin: 40px 0;
		border-bottom: 1px solid #aa8937; 
	}

	
	
/*
Tables
---------------------------------------------------------------------------------------------------- */

	table {
		border: 0;
		width: 100%;
		border-bottom: 1px solid #aa8937; 
	}

	th {
		font-weight: bold;
	}
	
	th.unkn {
	    background: rgba(83, 143, 184, 0.9);
	    color: #567;
	}
	
	th, 
	td {
		border: 0;
		padding: 3px 8px; /* 12 fat column */
		text-align: left;
/*		vertical-align: center;
		align: center;
		text-align: center;
		justify-content: center;
		align-items: center;*/
		
		border: 1px solid #aa8937; 
		border-right: 0;
		border-bottom: 0;
		background-position: bottom;
/*		white-space: nowrap;*/
	}

	td:nth-of-type(6) {
		border-right: 1px solid #aa8937; 
	}

	tr.chan-or-game + tr td {
		border-top: 0;
	}
	tr.chan-or-game th {
		border-bottom: 1px solid #aa8937; 
	}

	tr,
	tr:first-of-type {
		background: rgba(0,0,0,.05);
	}
	tr:nth-of-type(odd) {
		background: rgba(255,255,255,.15);
	}
	
	span.TooWideScreen {
		color: rgba(163,15,10,.9);
	}
	span.v2021 {
		float: right;
		color: #666;
	}

/* Games
--------------------------------------------- */
	
	tr.chan-or-game {
		background: rgba(0,0,0,.2);
		background: rgba(255,255,255,.25);
		background: rgba(163,15,10,.25);
		/* color: #000; */
	}

	th.g-started {
		background: rgba(163,15,10,.9);
		color: #eee;
	}
	th.g-open {
/*		background: rgba(83, 143, 0, .9);*/
		background: rgba(0, 104, 0, 1);
		color: #eee;
	}
	th.g-full {
		background: rgba(0,60,120,1);
		/*background: #999;*/
		color: #eee;
	}
	th.g-foreign {
		background: rgba(96,48,0,1);
		/*background: #999;*/
		color: #eee;
	}
	th.g-unkn {
		background: #888;
		color: #eee;
	}
	
	th.game-name, 

	th.game-name.port-open {
		border: 0;	/* maybe remove */
		color: #eee;
/*		text-shadow: 1px 1px rgba(0,0,0,.5);*/
/*		background: #A30F0A;*/
/*		background: rgba(163, 15, 10, .9);*/
/*		background: rgba(0, 112, 0, .9); */
	}
		td.hp-status {
			text-align: center; /* players */
			padding: 2px 2px;
		}
		th.hp-status {
			text-align: center; /* mapsizes */
			padding: 0px 0px;
		}
		td.ah-status {
			text-align: center;
			padding: 4px 4px;
		}
		th.ladder {
			padding: 4px 4px;
		}
		th.plnum {
			text-align: center;
			padding: 4px 2px;
		}

	th.game-name.port-closed {
		background: #487;
		background: #555;
	}
	div.t-Forest {
		background-image: url('img/tiles_forest.PNG');
		float: right; /* справа, ближе к кол-ву игроков */
		margin: 1pt; /* tiles a bit more centered */
		margin-right:-4px;
		width:26px;
		height:16px;
	}
/*	div.t-Forest:hover::after {
		content:"forest tileset";
		background: transparent; /* #000;
		color: #fff; 
		margin: 5pt;
	}*/
	div.t-Wasteland {
		background-image: url('img/tiles_wasteland.PNG');
		float: right; /* справа, ближе к кол-ву игроков */
		margin: 1pt; /* tiles a bit more centered */
		margin-right:-4px;
		width:26px;
		height:16px;
	}
	div.t-Default {
		background-image: url('img/tiles_default.PNG');
		float: right; /* справа, ближе к кол-ву игроков */
		margin: 1pt; /* tiles a bit more centered */
		margin-right:-4px;
		width:0px;
	}
	div.t-Winter {
		background-image: url('img/tiles_winter.PNG');
		float: right; /* справа, ближе к кол-ву игроков */
		margin: 1pt; /* tiles a bit more centered */
		margin-right:-4px;
		width:26px;
		height:16px;
	}
	div.t-Swamp {
		background-image: url('img/tiles_swamp.PNG');
		float: right; /* справа, ближе к кол-ву игроков */
		margin: 1pt; /* tiles a bit more centered */
		margin-right:-4px;
		width:26px;
		height:16px;
	}
	div.t-Random {
		background-image: url('img/tiles_random.PNG');
		float: right; /* справа, ближе к кол-ву игроков */
		margin: 1pt; /* tiles a bit more centered */
		margin-right:-4px;
		width:26px;
		height:16px;
	}
	div.res-low {
		background-image: url('img/res_low.png');
		float: left;
		margin: 2pt -2pt;
		margin-right: 4px;
		width:14px;
		height:14px;
	}
	div.res-medium {
		background-image: url('img/res_medium.png');
		float: left;
		margin: 2pt -2pt;
		margin-right: 4px;
		width:24px;
		height:14px;
	}
	div.res-high {
		background-image: url('img/res_high.png');
		float: left;
		margin: 2pt -2pt;
		margin-right: 4px;
		width:34px;
		height:14px;
	}
	div.res-random {
		background-image: url('img/res_random.png');
		float: left;
		margin: 2pt -2pt;
		margin-right: 4px;
		width:26px;
		height:14px;
	}
	div.res-default {
		background-image: url('img/res_default.png');
		float: left;
		margin: 2pt -2pt;
		margin-right: 4px;
		width:0px;
		height:14px;
	}
	div.order-fixed {
		background-image: url('img/mapset_fixed.png');
		float: left;
		margin-left:-5px;
		margin-right:4px;
		width:18px;
		height:18px;
	}
	div.order-random {
		background-image: url('img/mapset_random.png');
		float: left;
		margin-left:-5px;
		margin-right:4px;
		width:18px;
		height:18px;
	}
	div.ironrnd {
		background-image: url('img/map_random.png');
		float: right;
		margin-right:-3px;
		width:20px;
		height:22px;
	}
	div.ladder {
		background-image: url('img/maptype_ladder.png');
		float: right;
		margin-left:-2px;
		margin-right:2px;
		width:28px;
		height:14px;
	}
	div.res-speed {
		float: left;
		margin: 1px;
		font-size: 95%;
		font-weight: normal;
		font-style: italic;
		color: #420
		}
	div.timeago {
		float: right;
		margin: 1px;
		margin-right:-4px;
		color: #740
/*		background: green;
		float: right;
		width: 100%;*/
	}

	span.rebalance {
/*		margin: 1px;*/
		float: right;
		color: rgba(163,15,10,.9);
	}
	span.ogre {
		background-image: url('img/ogreblet2.png');
		margin-right: -4px;
		float: right;
		color: rgba(163,15,10,.9);
		width:24px;
		height:24px;
	}
	
/* Channels
--------------------------------------------- */
	
	th.channel {
/*		background: #538F00;*/
		background: rgba(83, 143, 0, .9);
		
		color: #eee;
		border: 0;
		text-shadow: 1px 1px rgba(0,0,0,.5);
	}
	
		
		
/* Country
--------------------------------------------- */
	
	td.country {
		text-align: center;
	}
		
		
/* Antihack Badges
--------------------------------------------- */
	
	.ah {
		background: rgba(83, 143, 0, .9);
		padding: 0px 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		color: #78a800;
		font-family: Georgia, Arial, Helvetica, Calibri, 'Open Sans','Arial Black', 'Courier New';
		text-transform: uppercase;
		font-size: 12px;
		font-weight: bold;
		line-height: 1;
	}
	
	.ah.hack {
		color: #ff0;
		background: #f10;
	}
	
	.ah.none,
	.ah.elapsed,
	.ah.unknown {
		color: #eee; /* #ff0 for real ah */
		background: #999; /* #f60 for real ah */
	}
	
	.ah.error {
		background: #000;
	}
	
	.hp {
		background: #487;
		padding: 0px 2px; /* 1px 2px for text ; 0px 2px for HP circle  */
		-webkit-border-radius: 6px; /* 3px for text  ; 6px for HP circle */
		-moz-border-radius: 6px; /* 3px for text  ; 6px for HP circle */
		border-radius: 6px; /* 3px for text  ; 6px for HP circle */
		color: #eee;
		font-family: Arial, Helvetica, Calibri, sans-serif;
		text-transform: uppercase;
		font-size: 11px;
		font-weight: bold;
		line-height: 1;
		margin-left:2px; /* - for HP circle */
		margin-right:2px; /* - for HP circle */
	}
	.hp.elapsed {
		background: #555;
	}
	
	.hp.none,
	.hp.unknown {
		background: transparent;
	}
	


/*
Font declarations
---------------------------------------------------------------------------------------------------- */

	/*
	@font-face {
		font-family: 'FrizQuadrata';
		src: url('fonts/frizqt_.eot');
		src: url('fonts/frizqt_.eot') format('embedded-opentype'),
			 url('fonts/frizqt_.woff') format('woff'),
			 url('fonts/frizqt_.ttf') format('truetype'),
			 url('fonts/frizqt_.svg#FrizQuadrataTTRegular') format('svg');
		font-weight: normal;
		font-style: normal;
	} 
	*/
	
	@font-face {
		font-family: 'Droid Serif';
		src: url('fonts/droidserif-webfont.eot');
		src: url('fonts/droidserif-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/droidserif-webfont.woff') format('woff'),
			 url('fonts/droidserif-webfont.ttf') format('truetype'),
			 url('fonts/droidserif-webfont.svg#droid_serifregular') format('svg');
		font-weight: normal;
		font-style: normal;

	}

	@import url(https://fonts.googleapis.com/css?family=Open+Sans);


/*
Media queries
---------------------------------------------------------------------------------------------------- */


	/* iPad Landscape */
	@media only screen and (max-width: 1023px) {

	
	}
	
		
	/* iPad Portrait */
	@media only screen and (max-width: 767px) {
	
		body {
			-webkit-text-size-adjust: none; /* Fix automatic text scaling on mobile */
			background: #DFC179 url('img/bg.jpg') repeat;
			padding: 0;
		}
		
		th,
		td {
			font-size: 14px;
		}
		
		#response {
			max-width: none;
			width: 100%;
			margin: 0;
		}
		#count {
			padding: 5px;
		}
		#info {
			padding: 25px;
			padding-top: 0;
			margin: 0;
			max-width: none;
		}
		
		td {
			padding: 3px 8px;
		}
		td,
		th {
			padding: 5px 8px;
		}
		td.country,
		td.ah-status {
			text-align: center;
		}
		td.country img {
			display: block;
			margin: 0 auto;
		}
		
		a,
		#info {
			
		}
		
		.divider {
			
		}
	}
	
	
	/* iPhone 5 Landscape */
	@media only screen and (max-width: 568px) {	

		td.ah-status {
			font-size: 12px;
			min-width: 75px;
			padding: 3px 0;
		}
	}
	
	
	/* iPhone Portrait */
	@media only screen and (max-width: 468px) {	


	}