/* ########################## RESET ALL MARGINS ############################## */
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, html, body, pre, p, div, input, table, td, tr, form, img
	{
	margin:0px;
	padding:0px;
	}

html
	{ /* prevent weird text zooming on mobile */
	text-size-adjust:100%;
	/* the following 3 may need removing when fully supported */
	-moz-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	}

body
	{
	background-color:#555;
	overflow-y: scroll;
	}

/* ############### UP SCROLL BUTTON ######################## */

#scrolly	{
	background-color:#191919;
	border:solid #ccc;
	border-bottom-left-radius:4px;
	border-width:0px 1px 1px 1px;
	color:#ccc;
	display:none;
	opacity:0.75;
	padding:20px 25px;
	position:fixed;
	right:0px;
	text-align:center;
	top:0px;
	z-index:10;
	}

#scrolly:hover	{
	background-color:#333;
	cursor:pointer;
	opacity:1;
	}

#scrolly:active	{
	background-color:#666;
	}



/* #################### MAIN CONTENT ################ */

#header
	{
	background-color:#113;
	box-shadow: 0px 3px 3px #333;
	padding:5px 5px 7px 5px;
	}

#header h1
	{
	font-size:1.2em;
	margin-bottom:2px;
	}

#header h1, #header h1 a
	{
	color:#AAA;
	text-decoration:none;
	}

#header h1 a:hover
	{
	color:#CCC;
	}

#header h1 a:active
	{
	color:#FFF;
	}

#header p
	{
	color:#AAA;
	font-size:0.8em;
	}

#header p a
	{
	background-color:#191919;
	border: 1px solid #AAA;
	border-radius:5px;
	color:#AAA;
	display:inline-block;
	line-height:1.25em;
	padding:0.5em;
	text-decoration:none;
	}

#header p a:hover, .entry p a:hover, .stebutton:hover
	{
	opacity:0.7;
/*	background-color:#113;
	color:#CCC;*/
	}

#header p a:active, .entry p a:active, .stebutton:active
	{
	opacity:0.5;
	/*background-color:#335;
	color:#FFF;*/
	}

#header .filterbutton
	{
		float:right;
	}

.entry
	{
	box-shadow: 0px 3px 3px #333;
	text-align:center;
	}

.padder
	{
	background-color:#113;
	padding: 5px 10px 8px 10px;
	}

.entry h1 /* entry main title */
	{
	background-color:#CCC;
	border-style:solid;
/*	border-top-left-radius:10px;
	border-top-right-radius:10px;*/
	border-width:1px 0px 0px 0px;
	color:#191919;
	font-size:1.1em;
	margin:0px /*1px*/;
	padding:6px 9px 3px 9px;
	text-align:left;
	}

.datey
	{
	color:#555;
/*
	background-color:#555;
	border-radius:3px;
	color:#CCC;
	padding:2px 2px 1px 2px;
*/
	}

.entry h2 /* underlined subtitle on tabletop game list page */
	{
	background-color:#224;
	border-style:solid;
	border-width:0px 0px 1px 0px;
	color:#AAA;
	font-size:1.1em;
	margin:10px -10px;
	padding:5px 10px 3px 10px;
	text-align:left;
	}

.entry h2.alt /* alternate colours for h2 - currently only on RTW old stuff entry + epic-s debugs */
	{
	background-color:#222;
	/*border-color:#666;*/
	border-width: 1px 0px;
	color:#C96;
	}

.entry h4 /* same as h5 but with lighter border */
	{
	background-color:#224;
	border:solid #666;
	border-width:1px 0px;
	color:#AAA;
	font-size:1em;
	font-weight:normal;
	margin:15px -10px 5px -10px;
	padding:4px 10px 3px 10px;
	text-align:left;
	}

.entry h5 /* dark blue subtitles on epic battles page */
	{
	background-color:#224;
	border:solid #070717;
	border-width:1px 0px;
	color:#AAA;
	font-size:1em;
	font-weight:normal;
	margin:15px -10px 5px -10px;
	padding:4px 10px 3px 10px;
	text-align:left;
	}

.entry .h7 /* centered titles on story chapters */
	{
	background-image: linear-gradient(to bottom, #224, #113);
	border-top: 1px solid #666;
	color:#AAA;
	font-size:1.1em;
	font-weight:normal;
	line-height:1.5em;
	margin:15px -10px 5px -10px;
	padding:5px;
	text-align:center;
	}


.entry p
	{
	color:#AAA;
	font-size:1em;
	line-height:125%;
	margin:6px 0px 10px 0px;
/*	overflow:auto;*/ /* this keep each paragraph tag in line when they wrap around a float */
	text-align:left;
	}

.entry p a, .stebutton
	{
	background-color:#191919;
	border: 1px solid #AAA;
	border-radius:5px;
	color:#AAA;
	cursor: pointer;
	display:inline-block;
	font-size:0.9em;
	line-height:1em;
	margin:2px 0px;
	padding:0.35em 0.3em 0.3em 0.3em;
	text-decoration:none;
	}

.entry li a /* links within lists */
	{
	background-color:#333;
	color:#AAA;
	text-decoration:none;
	}

.entry li a:hover
	{
	background-color:#113;
	opacity:0.7;
	}

.entry li a:active
	{
	background-color:#113;
	opacity:0.5;
	}

.entry .p-links /* for game list on filter page */
	{
	border: 1px solid #99D;
	border-radius:5px;
	color:#99D;
	display:inline-block;
	font-size:0.8em;
	line-height:0.9em;
	margin:2px 0px;
	padding:0.4em 0.35em 0.35em 0.35em;
	text-decoration:none;
	}

.entry ul, .entry ol
	{
	margin:0px 0px 10px 25px;
	text-align:left;
	}

.entry dd ul /* used for nested uls inside dls - mainly on 40k helper page */
	{
		margin-bottom:0px;
	}

.entry li
	{
	color:#AAA;
	margin:2px;
	}

.entry dl
	{
	margin:6px 0px;
	}

.entry dt
	{
	color:#AAA;
	font-weight:bold;
	text-align:left;
	}

.entry dd
	{
	color:#AAA;
	margin-left: 25px;
	text-align:left;
	}

.entry hr
	{
		background-image: linear-gradient(to right, rgba(102,102,102, 0), rgba(102,102,102, 1), rgba(102,102,102, 0));
		border: 0px;
		height: 2px;
		margin: 15px 0px;
	}

.entry pre
	{
	color:#AAA;
	font-size:1.1em;
	line-height:125%;
	margin:0px 0px 15px 0px;
	text-align:left;
	white-space: pre-wrap;
	}


.entry .piccon
	{
	display:inline-block;
	font-size:0.75em;
	vertical-align:top;
	}

.entry .piccon p
	{
	margin-top:0px;
	text-align:center;
	}


.entry img
	{
	border:1px solid #ccc;
	box-sizing:border-box; /* includes border in max-width; */
	margin:1px 0px;
	max-width:100%;
	}

.entry a img:hover
	{
		opacity:0.7;
	}

.entry a img:active
	{
		opacity:0.5;
	}

h2 .nobor
	{
	border:none;
	margin:0px;
	}

/* ###################### GENERAL DIVS #################################*/

.separator
	{
	height:10px;
	}

.clearer
	{
	clear:both;
	}







/* ###################### COLOURED FONTS #################################*/

.entry .orange
	{
		color:#F72;
	}

.entry .skye
	{
		color:#6AF;
	}

.entry .yellow
	{
		color:#FF0;
	}

.entry .green	{
	color: #0C0;
	}

.entry .red	{
	color: #F33;
	}

.entry .purple	{
	color: #C6F;
	}

.entry .white	{
	color: #FFF;
	}

.entry .grey
	{
		color:#666;
	}

.entry .old
	{
	background-color:#CCC;
	border: 1px solid #A00;
	border-radius:4px;
	color:#A00;
	float:right;
	font-size:1.25em;
	letter-spacing:0.25px;
	margin-left:5px;
	padding:4px 7px;
	}


@supports (text-shadow: 1px 1px 0px #000)
{
/* for old stuff title */
.entry .old
	{
	background-color:#555;
	border-color:#F72;
	color:#F72;
	text-shadow: 2px 0px 1px #000, -2px 0px 1px #000, 0px -2px 1px #000, 0px 2px 1px #000, -1px -1px 0px #000, 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000;
	}
}

/* #####################   Forward and back buttons  ###################### */

.buttonsection
	{
	padding:0px 5px;
	text-align:center;
	}

.buttondown
	{
	float:left;
	}

.buttonup
	{
	float:right;
	}

.yesclick, .noclick
	{
	background-color:#191919;
	border: 1px solid #AAA;
	border-radius:5px;
	color:#AAA;
	display:inline-block;
	font-size:0.8em;
	line-height:1.25em;
	padding:0.5em;
	text-decoration:none;
	}

.yesclick:hover
	{
	opacity:0.7;
/*	background-color:#113;
	color:#CCC;*/
	}

.yesclick:active
	{
	opacity:0.5;
/*	background-color:#335;
	color:#FFF;*/
	}

.noclick
	{
	opacity:0.25;
	}

/* ################# FLOATS ################## */


.floatleft
	{
	float: left;
	margin:1px 5px 3px 0px;
	}

.floatright
	{
	float: right;
	margin:1px 0px 3px 5px;
	}


/* #####################   SIZES ###################### */

.mxw100
	{
	max-width:72px;
	}

.mxw120
	{
	max-width:122px;
	}

.mxw150
	{
	max-width:152px;
	}

.mxw300
	{
	max-width:202px;
	}

.mxw400
	{
	max-width:402px;
	}

.mxw600
	{
	max-width:602px;
	}

.mxh188
	{
	max-height:189px;
	}

.cover300
	{
	height:126px;
	object-fit:cover;
	width:202px;
	}

.cover150
	{
	height:189px;
	object-fit:cover;
	width:152px;
	}

.h190
	{
	height:189px;
	}

@media only screen and (min-width: 650px)
{
/* for screens wider than my tablet */


#scrolly	{
	padding:10px 12px;
	}

.mxw100
	{
	max-width:102px;
	}

.mxw300
	{
	max-width:302px;
	}

.cover300
	{
	height:189px;
	object-fit:cover;
	width:302px;
	}
}


/* ################################# Completed Games Columns ########################### */

.gamecolumn
	{
	column-gap:15px;
	column-width:18em;
	margin:10px 0px 20px 0px;
	}

.gamecolumn ul
	{
	font-size:0.8em;
	margin:0px 0px 0px 15px;
	}



/* ####################################### Old RTW reports ############################################################################### */

.rtw-block
	{
	/*background-color:pink;*/
	display:inline-block;
	text-align:center;
	vertical-align:top;
	}

#rtw-season1, #rtw-season2
	{
	text-align:left;
	}




#rtw-stats table
	{
	border-collapse:collapse;
	margin-bottom:6px;
	/*min-width:75%;*/
	}

#rtw-stats td
	{
	border-style: solid;
	border-width: 1px;
	border-color: #666;
	color:#AAA;
	font-size:0.75em;
	padding:5px 3px 3px 3px;
	text-align: center;
	min-width:4em;
	}


.name-block /* ################################################# FOR CHARACTER / STORY ENTRY ########################################### */
	{
	/*background-color:pink;*/
	display:inline-block;
	text-align:center;
	vertical-align:top;
	}

.name-block .name-title
	{
	background-color:#222;
	border: solid #AAA;
	border-width: 1px 0px;
	color:#AAA;
	margin:0px -10px 5px -10px;
	padding:3px 10px;
	text-align:left;
	}

















/* ####################### SUDOKU ##################################### */


#sudokutable	{
	border-collapse:collapse;
	float:left;
	margin:0px 10px 10px 0px;
	}

#sudokutable td	{
	height:2em;
	text-align:center;
	width:2em;
	max-width:2em;
	}

#sudokutable input {
	background-color:transparent;
	border:0px;
	font-size:1em;
	padding:0px;
	text-align:center;
	width:100%;
	}


#sudokuoption
	{
	/*background-color:darkred;*/
	/*display:inline-block;*/
	}

#sudokuoption button	{
	margin-bottom:5px;
	width:240px;
	}


#g1, #g2, #g3, #g4, #g5, #g6, #g7, #g8, #g9, #g10, #g11, #g12, #g13, #g14, #g15, #g16, #g17, #g18, #g19, #g20, #g21, #g22, #g23, #g24, #g25, #g26, #g27, #g28,#g29, #g30, #g31, #g32, #g33, #g34, #g35, #g36, #g37, #g38, #g39, #g40, #g41, #g42, #g43, #g44, #g45, #g46, #g47, #g48, #g49, #g50, #g51, #g52, #g53, #g54, #g55, #g56, #g57, #g58, #g59, #g60, #g61, #g62, #g63, #g64, #g65, #g66, #g67, #g68, #g69, #g70, #g71, #g72, #g73, #g74, #g75, #g76, #g77, #g78, #g79, #g80, #g81	{
	border: solid 1px #666;
	}

#g3, #g12, #g21, #g30, #g39, #g48, #g57, #g66, #g75, #g6, #g15, #g24, #g33, #g42, #g51, #g60, #g69, #g78, #g9, #g18, #g27, #g36, #g45, #g54, #g63, #g72, #g81	{
	border-right-color: #AAA;
	border-right-width: 2px;
	}

#g1, #g10, #g19, #g28, #g37, #g46, #g55, #g64, #g73	{
	border-left-color: #AAA;
	border-left-width: 2px;
	}

#g1, #g2, #g3, #g4, #g5, #g6, #g7, #g8, #g9, #g28, #g29, #g30, #g31, #g32, #g33, #g34, #g35, #g36, #g55, #g56, #g57, #g58, #g59, #g60, #g61, #g62, #g63	{
	border-top-color: #AAA;
	border-top-width: 2px;
	}

#g73, #g74, #g75, #g76, #g77, #g78, #g79, #g80, #g81	{
	border-bottom-color: #AAA;
	border-bottom-width: 2px;
	}

.sudprovided	{
	font-weight:bold;
	color: #666;
	}

.sudneeded	{
	color: #CCC;;
	}

.suderrorprov	{
	font-weight:bold;
	color: #F72;
	}

.suderrorneed	{
	color: #F72;
	}
























@media only screen and (min-width: 650px)
{
/* for screens wider than my tablet */
.rtw-block
	{
	box-sizing:border-box;
	min-height:250px;
	max-width:calc(50% - 6px);
	margin:3px;
	}

.rtw-block-pad
	{
	background-image:linear-gradient(to bottom,
		rgba(50,50,50,1) 0px,
		rgba(50,50,50,0.75) 20px,
		rgba(50,50,50,0.5) 60px,
		rgba(50,50,50,0.25) 120px,
		rgba(50,50,50,0) 200px
		);
	min-height:200px;
	padding:5px;
	}

.rtw-block h4
	{
	border-width:1px;
	margin:0px;
	padding:4px 5px 3px 5px;
	}
}



@media only screen and (min-width: 800px) /* separate because 650 isn't wide enough for 2 boxes on character page */
{
.name-block
	{
	box-sizing:border-box;
	min-height:250px;
	max-width:calc(50% - 6px);
	margin:3px;
	}

.name-block .name-title
	{
	border-radius:8px 8px 0px 0px;
	border-width: 1px;
	margin:0px;
	padding:3px;
	text-align:center;
	}

.name-block .name-pad
	{
	background-image:linear-gradient(to bottom,
		rgba(50,50,50,1) 0px,
		rgba(50,50,50,0.75) 20px,
		rgba(50,50,50,0.5) 60px,
		rgba(50,50,50,0.25) 120px,
		rgba(50,50,50,0) 200px
		);
	border: solid;
	border-width:0px 1px;
	border-image:linear-gradient(to bottom, 
		#AAA,
		rgba(0, 0, 0, 0)
		)1 100%;
	min-height:200px;
	padding:5px;
	}

}


@media only screen and (min-width: 1200px)
{
.rtw-block, .name-block
	{
	max-width:calc(33.3% - 6px);
	}
}

@media only screen and (min-width: 2000px)
{
.rtw-block, .name-block
	{
	max-width:calc(25% - 6px);
	}
}
@media only screen and (min-width: 2800px)
{
.rtw-block, .name-block
	{
	max-width:calc(20% - 6px);
	}
}