:root {	
	--linkhovertime:	0.25s;	
	--buttonhovertime:	0.5s;	
	
}


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


/* links will be white but transition to yellow */
a
{
	color:			white;
	text-decoration: 	none;
}
a:hover
{
	color:			yellow;
	transition:		all var(--linkhovertime);
	-webkit-transition: 	all var(--linkhovertime);
	-moz-transition: 	all var(--linkhovertime);
	-o-transition: 		all var(--linkhovertime);
	-ms-transition: 	all var(--linkhovertime);
}

/* some defines for the intro page - set fonts, size and colour */ 
.introtext
{
	width:			90%;
	margin:			auto;
	font-size: 		2.5em;
	border:			8px inset white; 
	border-radius: 		8px;
	padding:		0.5em;
}
.introtexttext
{
	margin:			0.5em;
}
.
#introplayposition
{
	width:			auto;
	margin: 		auto;
	font-size:		2.5em;
}
#introplaybutton
{	
	margin:			auto;
	
	font-size:		1.0em;
	
	background-color:	black;
	border:			solid white 0.2em;
	border-radius:		1.0em;

	transition:		all var(--buttonhovertime);
	-webkit-transition: 	all var(--buttonhovertime);
	-moz-transition: 	all var(--buttonhovertime);
	-o-transition: 		all var(--buttonhovertime);
	-ms-transition: 	all var(--buttonhovertime);
}
#introplaybutton:hover
{
	font-size:		1.25em;
    	background-color:	#0A0;
}


#newsposition
{
	position:		absolute;
	top: 			8px;
	left: 			50%;
	-webkit-transform: 	translateX(-50%);
	transform: 		translateX(-50%)
}

#newsbutton
{
	padding:		8px 16px;
	
	font-size:		1.5em;
	
	color:			rgb(255, 255, 255);
	
	background-color:	black;
	border:			solid white 0.2em;
	border-radius: 		999px;
	
	transition:		all var(--buttonhovertime);
	-webkit-transition: 	all var(--buttonhovertime);
	-moz-transition: 	all var(--buttonhovertime);
	-o-transition: 		all var(--buttonhovertime);
	-ms-transition: 	all var(--buttonhovertime);
}
#newsbutton:hover
{
	font-size:		2.5em;
    	background-color:	#0A0;
    
    	color:			rgb(255, 255, 0);
}

/* set up the hero window animation page and frame */
.animatedherobannerframe
{
	position: 		relative;
	width:			auto;
	height:			20.0em;
	/*border:			thick solid yellow;*/
}
.animatedhordebannerframe
{
	position: 		relative;
	width:			auto;
	height:			22.50em;
	/*border:			thick solid yellow;*/
}
.animatedbannerwindow
{
	/* force to be drawn along the top - will be resized to fix the parent frame in js */
	position:		absolute;	
	top: 50%;
	left: 50%;
	transform: 		translate(-50%, -50%);
	/*border:			thick solid red;*/
}


/* defines for different text colours - run mode and test mode */
#testdungeonpage
{
	color:		#ff0;
	
	background:		linear-gradient(#886, #000);
}
#rundungeonpage
{
	color:		#0f0;
	
	background:		linear-gradient(#886, #000);
}	

body
{
	font-family: 		Arial, FreeSans, "Liberation Sans", "Nimbus Sans L", DroidSans, sans-serif;
	color:			white;
	background-color:	#000;
	
	text-align:		center;
	
	overflow-x:		hidden;
}

/* make all buttons expand and colour when enabled */
button
{
	min-width:		10%;

	border:			0.2em outset white;
	border-radius:		1.0em;
	
	display:		inline;
	margin:			auto;
	padding:		0.2em; 	
		
    	background-color:	green; 
    	color:			white;
   
	font-family: 		inherit;
	font-size: 		2.0em;

	transition:		all var(--buttonhovertime);
	-webkit-transition: 	all var(--buttonhovertime);
	-moz-transition: 	all var(--buttonhovertime);
	-o-transition: 		all var(--buttonhovertime);
	-ms-transition: 	all var(--buttonhovertime);
}
button:disabled
{
	border:			0.16em outset white;
	border-radius:		0.8;
	background-color:	black; 
	color:			grey;
	font-size:		1.6em;
}
button:hover:enabled
{
	background-color:	rgb(0, 255, 0);
	color:			yellow;
}

.widerbutton
{
	min-width:		20%;	
}

/* drop down boxes and read only edit fields should be chunkier */
input, select
{ 
	margin:			4px;
	padding:		4px; 
    	background-color:	black; 
	color: 			white; /*inherit;*/
	border:			4px outset white;
	font-family: 		inherit;
	font-size: 		1.5em;
}

/* highlight select table lines */
.selected-coloured
{
	background-color:	green;
}

/* div around table scales the width */
.tablesection
{
	clear:		both;
	width:		90%;
	margin:		auto;
}

/* div around table controls - buttons and inputs */
.table-controls-bordered
{
	text-align:		center;
	margin:			auto;
	background-color:	black;
	border:			8px inset white; 
	border-radius: 		8px;
}
/* tweak for the table banners */
.table-controls-bordered h1
{
	margin:		8px;
}

/* shiny round white border */ 
table
{
	font-size: 		1.25em;
	text-align:		center;
	width:			100%;
	height:			100%;
	margin:			auto;
	border:			8px inset white; 
	border-radius: 		8px;
}

/* highlight current row beneath mouse */
table tr:hover, table td:hover
{
	background-color:	DarkGreen;
}