*
{
	margin:		0;
	padding:	0;
	box-sizing: 	border-box;

	/* stops the ugly highlighting */
	-webkit-tap-highlight-color: transparent;
   	-webkit-user-select: none;
    	-moz-user-select: none;
    	-ms-user-select: none;
     	user-select: none;	
}

:root {
	--hoverzoomtime:	0.5s;
	--mapzoomtime: 		2s;
}

@font-face {
	font-family: "Fredoka One";
	src: url("fonts/FredokaOne-Regular.ttf");
}

body
{
	font-family: 		"Fredoka One", Arial, FreeSans, "Liberation Sans", "Nimbus Sans L", DroidSans, sans-serif;
	color:			white;
	background-color:	#333;
}

/* white with no underline that goes yellow under the mouse */
a
{
	color:			white;
	text-decoration: 	none;
}
a:hover
{
	color:			yellow;
	transition:		all var(--hoverzoomtime);
	-webkit-transition: 	all var(--hoverzoomtime);
	-moz-transition: 	all var(--hoverzoomtime);
	-o-transition: 		all var(--hoverzoomtime);
	-ms-transition: 	all var(--hoverzoomtime);
}


/* rounded rectangle button - black background that changes to green under the mouse  */
button
{
	min-width:		10%;
	border:			4px outset white; 
	border-radius:		32px;

	display:		inline;
	margin:			auto;
	padding:		4px; 
    	background-color:	black; 
	color: 			white;
	
	font-family: 		inherit;
	font-size: 		1em;

	transition:		all var(--hoverzoomtime);
	-webkit-transition: 	all var(--hoverzoomtime);
	-moz-transition: 	all var(--hoverzoomtime);
	-o-transition: 		all var(--hoverzoomtime);
	-ms-transition: 	all var(--hoverzoomtime);
}
button:disabled 
{
	color:			#555;
}
button:hover:enabled
{
	background-color:	green;
}
button:hover:disabled
{
	background-color:	#333;
}

/* rounded rectangle button - green background when enabled or black when disabled */
.expandingbutton
{
	min-width:		10%;
	border:			4px outset white; 
	border-radius:		32px;

	display:		inline;
	margin:			auto;
	padding:		4px; 
    	background-color:	green; 
	color: 			white;
	
	font-family: 		inherit;
	font-size: 		1.5em;

	transition:		all var(--hoverzoomtime);
	-webkit-transition: 	all var(--hoverzoomtime);
	-moz-transition: 	all var(--hoverzoomtime);
	-o-transition: 		all var(--hoverzoomtime);
	-ms-transition: 	all var(--hoverzoomtime);
}
.expandingbutton:disabled 
{
	color:			grey;
	background-color:	black; 
	
	border-radius:		16px;
	
	font-size:		1em;
}


input, select
{ 
	margin:			4px;
	padding:		4px; 
    	background-color:	black; 
	color: 			white;
	border:			4px outset white;
	border-radius:		16px;
	
	font-family: 		inherit;
	font-size: 		1.5em;
}
input:disabled
{
	color:			gray;
	border:			4px inset gray; 
	border-radius:		8px;
	font-size: 		1em;
	color: 			gray;
}

.statictextbox:disabled
{
	margin:			4px;
	padding:		4px; 
    	background-color:	black; 
	color: 			grey;
	border:			4px outset white;
	border-radius:		16px;
	
	font-family: 		inherit;
	font-size: 		1.5em;
}

input[type=submit]
{
	min-width:		40%;
	border:			4px outset white; 
	border-radius:		32px;
	margin:			10px;
	background-color:	black; 
	color: 			white;

	transition:		all var(--hoverzoomtime);
	-webkit-transition: 	all var(--hoverzoomtime);
	-moz-transition: 	all var(--hoverzoomtime);
	-o-transition: 		all var(--hoverzoomtime);
	-ms-transition: 	all var(--hoverzoomtime);
}
input[type=submit]:hover
{
	background-color:	green;
}

table
{
	text-align:		center;
	width:			100%;
	height:			100%;
	margin:			auto;
	border:			8px inset white; 
	border-radius: 		8px;
}
table th
{
	padding:		4px;
}
table th:hover
{
	background-color:	grey;
}
table tr:hover, table td:hover
{
	background-color:	DarkGreen;
}

li
{
	list-style-position: inside;
}

/* custom classes */
.selected
{
	background-color:	green;
}
.roundedborder
{
	text-align:		center;
	margin:			auto;
	border:			8px inset white; 
	border-radius: 		8px;
}
.paddedroundedborder
{
	text-align:		center;
	margin:			auto;
	padding:		0 16px;
	border:			8px inset white;
	border-radius: 		8px;
}
.imagezoomborder
{
	text-align:		center;
	width:			100%;	
	padding:		0px;
	margin:			0px;
	display: 		inline-grid;
	border:			4px solid white; 
	/*border-radius: 		8px;*/
	overflow: 		hidden;	
}
.accountborder
{
	text-align:		center;
	/*margin:			0px 16px;*/
	border:			8px inset white; 
	border-radius: 		8px;
	
	width:			80%;
	margin:			auto;
}

.controlgroup
{
	text-align:		center;
	margin:			auto;

	background-color:	black;

	padding:		8px;
	border:			8px inset white; 
	border-radius: 		8px;
}	
.controlgroup h1
{
	margin-bottom:		10px;
}
.tablesection
{
	clear:		both;
	width:		90%;
	margin:		auto;
}


/* unique objects */

#headerbar
{	
	height:			10vw;
	line-height:		10vw;
	background-color:	#444;
	
	background-image:	url("images/headerbanner.png");	
	background-position: 	right 16px center;
	background-size:	25% auto;
	background-repeat:	no-repeat;
	overflow:		hidden;
}

#headerlogo
{
	font-size:	7.5vw;
	margin-left:	16px;
	width:		auto;
}
#flat8gameslogo
{
	position:	absolute;
	
	top:		0%;
	bottom:		100%;
	left:		45%;
	right:		80%;
	
	width:		auto;
	margin: 	auto;

	font-size:	4vw;
}

#navbar 
{
	clear:		both;
	float:		right;
	padding:	10px;
	margin:		10px;
	
	font-size: 	1.25em;
}
#navbar li 
{
    	display: 	inline;
}
#navbar a
{
	padding:	10px;
}
#navbar a:hover
{
	color:		yellow;
}
#mainbody
{
	clear:		both;
	text-align:	center;
}



/* main screen */

#leftmapbar
{
	float:			left;
	width:			25%;
}
#rightmapbar
{
	float:			left;
	width:			25%;
}
#centralbar
{
	float:			left;
	width:			50%;
}

.demomapframe
{
	padding:		0px 10px;
	padding-bottom:		0.5em;
		
	text-align: 		center;

	transition:		all var(--hoverzoomtime);
	-webkit-transition: 	all var(--hoverzoomtime);
	-moz-transition: 	all var(--hoverzoomtime);
	-o-transition: 		all var(--hoverzoomtime);
	-ms-transition: 	all var(--hoverzoomtime);
}
.demomapframe:hover 
{
	padding:		0px;
	padding-bottom:		0.5em;
}
.demomapframe img
{
	width:			100%;
	height:			100%;
	
	transition:		all var(--mapzoomtime);
	-webkit-transition: 	all var(--mapzoomtime);
	-moz-transition: 	all var(--mapzoomtime);
	-o-transition: 		all var(--mapzoomtime);
	-ms-transition: 	all var(--mapzoomtime);

}
.demomapframe img:hover
{
	transform:		scale(1.5);
}


/* the slideshow - keyframes generated in php */
#slideshow
{
	position:		relative;
	min-height:		240px;	
	margin:			0px 10px; /* 20px; */
}

.slide
{
    	position: 		absolute;
	width:			100%;
	height:			100%;
	opacity:		0;

	background-repeat:	no-repeat;
	overflow:		hidden;
}
.slidetext
{
	position:		absolute; 
	bottom:			0;
	width:			70%;
	margin:			10px;
	padding:		10px;
}
.slidetext h1
{
	font-size:		2.5em;
}
.slidetext p
{
	font-size:		2em;
}
.slide:nth-child(odd)
{
	text-align:	left;
	background-position: 	right 10% center;	
}
.slide:nth-child(even)
{
	text-align:	right;
	background-position: 	right 10% center;

	/* flip */
	transform:scaleX(-1);
}
.slide:nth-child(even) h1, .slide:nth-child(even) p
{
	/* flip text back again */
	transform:scaleX(-1);
}

/* split the central control panel to have a wide column of buttons and a thinner necromancer button on the right */
#mainsplitcontainer
{
	width:			100%;
	height:			100%;
}
/* ccs sucks - force split main to resize as its children use float: left */
#mainsplitcontainer:after 
{
	  content: "";
	  display: block;
	  clear: both;
}


#necromancer
{
	position:		relative;
	width:			30%;
	float:			left;	
}
#necromancerbutton
{
	border:			solid white 4px;
	height:			510px;
	margin:			10px;
	padding:		10px;
	font-size:		0;
	
	transition:		all 0.5s;
	-webkit-transition: 	all 0.5s;
	-moz-transition: 	all 0.5s;
	-o-transition: 		all 0.5s;
	-ms-transition: 	all 0.5s;
}
#necromancerbutton:hover
{
    	background-color:		#884;
    	
    	height:				530px;
    	margin:				0px;
    	font-size:			2.5em;
    	
}
#necromancerimage
{	
	position:	absolute;
	width:		150%;
	right:		-25%;
	bottom:		0%;
	
	 z-index: 	1; 	/* always on top */
}


#navmain
{
	padding:		0px;	/* 20px; */
	width:			70%;	/* 100% */
	float:			left;
}

.navoption
{
	margin:			10px; 
	padding:		10px;
	height:			120px;

	text-align:		left;

	background-size:	auto 50%; /* 70%; */
	background-position: 	90%;
  	background-repeat: 	no-repeat;
  	
  	border:			4px solid white;  	

	overflow:		hidden;
	
	transition:		all var(--hoverzoomtime);
	-webkit-transition: 	all var(--hoverzoomtime);
	-moz-transition: 	all var(--hoverzoomtime);
	-o-transition: 		all var(--hoverzoomtime);
	-ms-transition: 	all var(--hoverzoomtime);
}
.navtext
{
	width:		 	70%;
}
.navoption h1
{
	font-size:		1.75em; /* 2em; */
}
.navoption p
{
	font-size:		1.25em; /* 1.5em; */
}
.navoption:hover 
{
	margin:			0px;
}
#viewstatsoption
{
	background-color:	purple;
}
#viewplayersoption
{
	background-color:	purple;
}
#galleryoption
{
	background-color:	orange;
	background-image:	url("images/navoption1.png");	
	
}
#playoption
{
	background-color:	green;
	background-image:	url("images/navoption2.png");	
}
#blueprintsoption
{
	background-color:	blue;
	background-image:	url("images/navoption3.png");	
}
#guideoption
{
	background-color:	FireBrick;
	background-image:	url("images/navoption4.png");	
}


#gallerypage
{
	color:		#ffdb58;
}
#playpage
{
	color:		#0f0;
}
#blueprintpage
{
	color:		#0ff;
}



/* account info boxes */

#accountinfo h1
{
	margin:		20px;
}
#accountfeatures li
{
	text-align:	left;
	width:		80%;
	margin:		auto;
}
#logoutbutton
{
	min-width:	40%;
	margin:		10px;
}

#specialoffer
{
	width:		80%;
	margin:		auto;
	padding:	10px;
}
#silverupgradebutton
{
	min-width:50%;
	margin:		0 auto;
}



#signinform ul
{ 
	list-style-type: 	none;
}
#signinform label
{ 
	width: 			120px;
	display: 		inline-block;
	text-align:		left;
}
#signinerror
{
	color:			red;
}

#registerform ul
{ 
	list-style-type: 	none;
}
#registerform label
{ 
	width: 			120px;
	display: 		inline-block;
	text-align:		left;
}
#registewrerror
{
	color:			red;
}

.accountbutton
{

}

/* footer */

#footerinfo
{
	clear:		both;
	width: 		100%;
	margin: 	auto;
	padding:	20px;
	text-align:	center;
}

/* guide page */

.guidetextblock
{
	width:		60%;
	margin:		auto;
	padding:	20px 0px;
	/*border:			4px outset red;*/
}
/*
.guidetextblock	h1, h2, h3
{
	margin:		10px;
}
*/
.guidetextbreak
{
	width:		60%;
	margin:		auto;
}
.guidelistbreak
{
	width:		40%;
	margin:		30px auto;
	/*border:			4px outset red;*/
}

.guiderule
{
	margin:		14px 0px;
	
	/*border:			4px outset red;*/
}
.guiderule h3
{
	margin:		6px 0px;
}


.guidebuttontext
{
	width:	80%;
	margin:		30px auto;
	/*border:		4px outset red;*/
}

#creditstext
{
	width:		60%;
	margin:		auto;
	margin-top:	40px;
	
}
#creditstext h1
{	
	margin:		20px;
}


/* news page */
.newstext
{
	width:		80%;
	margin:		20px auto;
	padding:	10px;
	font-size: 	1.5em;
}
.newstext h1, .newstext h3
{
	margin:		20px;
}
.newstext li
{
	text-align:	left;
	margin:		10px;
}



/* TODO - move into Necromancer folder at some point when the NewsPage moves */
#playdemoposition
{
	width:		100%;
	margin: 	auto;
}

#playdemobutton
{	
	max-width:	30%;
	margin:		auto;
	padding:	10px;

	font-size:	3.0vmin;
	
	background-color:	black;
	border:			solid white 1.0vmin;
	border-radius:		999px;

	transition:		all 0.5s;
	-webkit-transition: 	all 0.5s;
	-moz-transition: 	all 0.5s;
	-o-transition: 		all 0.5s;
	-ms-transition: 	all 0.5s;
}

#playdemobutton:hover
{
    	background-color:	#0A0;
   	//color:		red;
	//font-size:		3.5vmin;
	//border:		solid red 10px;
}