body {
	max-width: 1350px;					/* $overall maximum page width */
}

html {
	background-image: none;			/* $overall page background image */
}

html, button, input, textarea, select, option {
	background-color: #fafafa;	/* $overall page background */
	color: #000000;							/* $overall standard text */
}

button, .submit, input[type='submit'], a.button, .button_a a {
	color: #444444;																			/* $overall button text */
	background: #e8e8e8; 																/* $overall button background */		/* Old browsers */
	background: linear-gradient(#ffffff, #e8e8e8);			/* $overall button background */
	border-color: #cccccc #aaaaaa #aaaaaa #cccccc;			/* $overall button border */
}

button:hover, .submit:hover, input[type='submit']:hover, a.button:hover, .button_a a:hover {
	color: #222222;																			/* $overall button text, hover */
	border-color: #aaaaaa #888888 #888888 #aaaaaa;			/* $overall button border, hover */
	background: linear-gradient(#ffffff, #e4e4e4);			/* $overall button background, hover */
}

button.default, input.default {
	background: linear-gradient(#eeeeff, #ccccdd);			/* $overall button background, default when multiple */
}

button.default:hover, input.default:hover {
	background: linear-gradient(#eeeeff, #ddddee);			/* $overall button background, default when multiple, hover */
}

button:active, .submit:active, input[type='submit']:active, a.button:active, .button_a a:active, button.default:active, input.default:active {
	border-color: #666666;															/* $overall button border, clicked */
	background: #cccccc;																/* $overall button background, clicked */	/* Old browsers */
	background: linear-gradient(#ffffff, #cccccc);			/* $overall button background, clicked */
}

header, footer {
	background-color: #d6dada;		/* $header header and footer background */
	color: #000000;								/* $header header and footer text */
}

header h1	{
	text-shadow: 9px 4px 5px rgba(0, 0, 0, 0.2);	/* $header standard text */
}

header a {
	color: #000000;								/* $header standard text */
}

header h3 {
	color: #000000;								/* $header standard text */
}

section, #form-menu, #form-menu a {
	background-color: #eeeeee;		/* $overall main background */
}

a, .link-colour {
	color: #3a76d6;								/* $overall hyperlink in body content */
}

section a:hover {
	color: #cc0000;								/* $overall hyperlink in body content, hover */
}

footer a {
	color: #2a56c6;								/* $header footer hyperlink text */
}

nav {
	border-color: #fafafa;				/* $overall page background */
}

nav, nav ul {
	background-color: #bcd3d4;		/* $header top menu background */
}

nav ul li {
	border-right: 1px solid rgba(0,0,0,0.3);	/* $header top menu, separator */
}

nav ul li.current {
/*	background-color: #a7dbd8; */
}

nav ul li:hover,
nav ul li:active {
	background-color: #acc1c2;								/* $header top menu, hyperlink hover background */
}

nav ul li a {
	color: #333333;														/* $header top menu, hyperlink text */
}

aside div {
	color: #000000;														/* $header side menu text */
}

aside div ul li {
	border-bottom: 1px solid rgba(0,0,0,0.1);	/* $header side menu, border bottom */
}

aside div ul li a {
	color: #333333;														/* $header side menu hyperlink */
}

aside div#stickylist ul li a.public {
	color: #ff0000;														/* $colour for unread public messages, best if a red */
}

aside div#stickylist ul li a.private {
	color: #0000ff;														/* $colour for unread private messages, best if a blue */
}

aside div#stickylist ul li a.public.private {
	color: #800080;														/* $colour for unread public and private messages, best if a purple */
}

div#idsidebar, div#idsidebar ul {
	background-color: #bcc7d4;								/* $header side menu 4, your account section background */ 
}

aside div:hover#idsidebar label.mobile-dropdown, aside div#idsidebar ul li:hover {
	background-color: #969faa;								/* $header side menu 4, your account section background, hover */ 
}

div#notifications, div#notifications ul, aside div:hover#notifications.nohlite label.mobile-dropdown, div#notifications.nohlite ul li:hover {
	background-color: #d4bdbc;			/* $header side menu 1, notification section background */ 
}

aside div:hover#notifications label.mobile-dropdown, div#notifications ul li:hover {
	background-color: #aa9796;			/* $header side menu 1, notification section background, hover */ 
}

div#pagenav, div#pagenav ul {
	background-color: #bcd4c9;			/* $header side menu 2, thread or main menu section background */
}

aside div:hover#pagenav label.mobile-dropdown, aside div#pagenav ul li:hover {
	background-color: #96aaa1;			/* $header side menu 2, thread or main menu section background, hover */
}

div#browsesearch, div#browsesearch ul,
div#gamenav, div#gamenav ul {
	background-color: #d4c9bc;			/* $header side menu 3, game naviation and search section background */
}

aside div:hover#browsesearch label.mobile-dropdown, aside div#browsesearch ul li:hover,
aside div:hover#gamenav label.mobile-dropdown, aside div#gamenav ul li:hover {
	background-color: #aaa196;			/* $header side menu 3, game naviation and search section background, hover */
}

div#stickylist ul li a:hover,
div#stickylist ul li a:active {
	background-color: #a4aba1;			/* $stickylist hover */
}

div#stickylist, div#stickylist ul {
	background-color: #93a08c;			/* $stickylist background */
}

hr {
	background-color: rgba(66,46,44,0.2);	/* $overall horizontal line */
	color: rgba(66,46,44,0.2);						/* $overall horizontal line */
}

.horizontal-list li:after {
    color: #836b59;											/* $message horizontal bar between links in message info */
}

.helptip:hover:before, .helphover:hover:before {
	border-color: #422e2c transparent;	/* $help background */
}

.helptip:hover:after, .helphover:hover:after {
	background: #422e2c;								/* $help background */
	background: rgba(66,46,44,0.9);			/* $help background */
	color: #ffffff;											/* $help text */
	box-shadow: 3px 3px 2px #c2b38f;		/* $help shadow */
}

.info_table	{
  border: 1px solid rgba(10,10,10,0.25);		/* $overall information boxes, border */
}

.info_box {
	border: 1px solid rgba(10,10,10,0.25);		/* $overall information boxes, border */
	background-color: #fafafa;								/* $overall information boxes, default background */
	color: #0a0a0a;														/* $overall information boxes, text */
}

.info_box.primary {
	background-color: #d7ecfa;								/* $overall information boxes, primary background */
	color: #0a0a0a;														/* $overall information boxes, text */
}

.info_box.secondary {
	background-color: #eaeaea;								/* $overall information boxes, secondary background */
	color: #0a0a0a;														/* $overall information boxes, text */
}

.info_box.success {
	background-color: #e1faea;								/* $overall information boxes, success background */
	color: #0a0a0a;														/* $overall information boxes, text */
}

.info_box.warning {
	background-color: #fff3d9;								/* $overall information boxes, warning background */
	color: #0a0a0a;														/* $overall information boxes, text */
}

.info_box.alert, .info_box .alert {
	background-color: #f7e4e1;								/* $overall information boxes, alert background */
	color: #0a0a0a;														/* $overall information boxes, text */
}

.info_box h1, .info_box h2, .info_box h3, .bb .td, .bb td, td.bb, .bb .th, .bb th, th.bb {
  border-bottom-color: rgba(50,50,50,0.25);		/* $overall information boxes, underline on headings (and row lines within pseudo-tables) */
}

.message a {
	/* color: #f38630;*/
}

.message + .message {
	border-top: 1px solid rgba(66,46,44,0.25);	/* $message divider between messages */
}

.messageauthor a {
    /* color: #836b59; */
}

.messagedetails a:hover,
.messagedetails a:active,
.messageheader a:hover,
.messageheader a:active {
    /* color: #ffffff;*/
}

h1.compose {
	border-color: rgba(66,46,44,0.25);	/* $message divider between messages */
}

.you a, .you {
	color: #ff0000;															/* $message your name in message information */
}

.systemmessage {
	border-top: dotted 1px rgba(66,46,44,0.25);	/* $message divider between messages */
}

@media only screen and (max-width: 960px) {

	nav, nav > input:checked ~ ul {
		border: solid 1px rgba(0,0,0,0.3);			/* $header collapsed all menus border */
	}

	nav ul li {
		border-right: none;
	}
	
	nav label.mobile-dropdown:hover, nav > input:checked + label.mobile-dropdown {
		background-color: #92d1cd;								/* $header collapsed top-left menu hover */
	}

	nav label.mobile-dropdown {
		background-image: url(/images/light/sitemenu.png);
	}

	nav > input:checked + label.mobile-dropdown {
		background-image: url(/images/rpol-checkmark.png);
	}

	aside {	/* this stops the page peeking through the gaps between each aside div */
		background-color: #fafafa;	/* $overall page background */
	}

	aside div {
		border: solid 1px rgba(0,0,0,0.3);			/* $header collapsed all menus border */
	}

	div.sidebar ul {
		border: solid 1px rgba(0,0,0,0.3);			/* $header collapsed all menus border */
		border-top-color: rgba(0,0,0,0.2);			/* $header collapsed all menus border */
	}

	/* theoreticall this c/should be different */
	div.sidebar ul:hover {
		border: solid 1px rgba(0,0,0,0.3);			/* $header collapsed all menus border */
		border-top-color: rgba(0,0,0,0.2);			/* $header collapsed all menus border */
	}
	
	aside div#notifications label.mobile-dropdown {
		background-image: url(/images/light/rmail.png);
	}

	aside div#pagenav label.mobile-dropdown {
		background-image: url(/images/light/subheads.png);
	}
	
	aside div#idsidebar label.mobile-dropdown {
		background-image: url(/images/light/account.png);
	}
	
	aside div#browsesearch label.mobile-dropdown {
		background-image: url(/images/light/search.png);
	}
	
	aside div#gamenav label.mobile-dropdown {
		background-image: url(/images/light/thisgame.png);
	}

	aside div#stickylist label.mobile-dropdown {
		background-image: url(/images/rpol-sticky.png);
	}
}

#mainsticky ul li:hover {
	background-color: #dddddd;			/* $main menu game list hover */
}

#mainsticky a:hover {
	/* color: #cc0000; */
}

#mainsticky h1, 
#mainsticky h2,
#mainsticky h3 {
	border-bottom: 1px solid rgba(0,0,0,0.15);/* $main menu underline for headings */
}

#mainsticky h3 {
/*	color: #ff0000; */
}

#mainsticky ul {
	color: #836b59;					/* $main menu game list text */
}

#mainsticky ul li {
	border-bottom: 1px solid rgba(255,255,255,0.5);		/* $main menu game list for the line under each game */
}

.topthreadnav,
.bottomthreadnav {
	background-color: #a7dbd8;	/* $message background for top and bottom page navigation bars */
}

.topthreadnav ul li a,
.bottomthreadnav ul li a {
	color: #422e2c;							/* $message text for top and bottom page navigation bars */
	}

li.heading div.threadstate,
li.heading div.threadinfo,
li.heading div.threadflag,
li.heading div.threaddetails {
	background-color: #aaaaba;	/* $thread title background */
	color: #222222;							/* $thread title text */
	font-weight: 600;
}

.gamemenu ul li {
	border: 1px solid rgba(131,107,89,0.2);		/* $thread thread list, border around each thread */
}

/* .gamemenu > ul > li:nth-child(2n+2),*/
.odd {
	background-color: #dddddd;								/* $thread thread list, row background (odd row numbers) */
}

/* .gamemenu > ul > li:nth-child(2n+3),*/
.even {	
	background-color: #eeeeee;								/* $thread thread list, row background (even row numbers) */
}

li.odd:hover, li.even:hover {
	background-color: #e8e4e4;								/* $thread thread list, row hover background */
}

#legend {
	background-color: #eeeef2;								/* $overall legend (at the bottom of pages) background */ /* #c2b38f; */
}

.messagedetails {
	/*background-color: inherit;*/
}

@media only screen and (max-width: 695px) {
	.messagedetails {
		background-color: #e5e5ec;							/* $message background for message details when collapsed */
	}
}

.messagecontent {
	background-color: #dddddd;								/* $message content background */
}

.messagebody .quote {
	background-color: #e4e4e4;								/* $message quote background */
	border: 1px solid #b8b8b8;								/* $message border for quotes and tables within messages */
	}

.message-divider > div {
	content: url("/images/divider-white.gif");
}

div#supportrpol {
	background-color: #ebede1;								/* $main menu, support RPoL section */
}

#supportrpol a {
	color: #422e2c;														/* $main menu, support RPoL section, hyperlink text */
}

.private {
	color: #c84000;														/* $message private lines within messages */
}

.hide, div.hide, span.hide, .hide * {
	color: #dddddd !important;								/* $message content background */
	background-color: #dddddd !important;			/* $message content background */
	border-color: #dddddd !important;					/* $message content background */
	}


/* Colouring within threads/messages/sheets etc */

.message_table th {
	background-color: #d6d6d6;		/* $message background for table headers within messages */
}

.message_table td, .message_table th {
	border: 1px solid #b8b8b8;								/* $message border for quotes and tables within messages */
}

/* DICE ROLLER DICE ROLLER DICE ROLLER */
/* DICE ROLLER DICE ROLLER DICE ROLLER */

fieldset.diceroller.step, fieldset.diceroller.step fieldset {
	border-color: #c2b38f;									/* $overall die roller borders */
}

/* Toggle buttons that replace radio */

.toggle_buttons label {
	border-color: #444444;										/* $overall on/off toggle button selections, border */
}

.toggle_buttons label:hover {
	background-color: #ddffdd;								/* $overall on/off toggle button selections, background on hover  */
}

.toggle_buttons label.off:hover {
	background-color: #d0d0d0;								/* $overall on/off toggle button selections, background on hover neutral */
}

.toggle_buttons label.neg:hover {
	background-color: #ffdddd;								/* $overall on/off toggle button selections, background on hover disable */
}

.toggle_buttons input[type=radio]:checked + label {
	background-color: #bbeebb;								/* $overall on/off toggle button selections, background on selected */
}

.toggle_buttons input[type=radio]:checked + label.off {
	background-color: #c8c8c8;								/* $overall on/off toggle button selections, background on selected neutral */
}

.toggle_buttons input[type=radio]:checked + label.neg {
	background-color: #ffbbbb;								/* $overall on/off toggle button selections, background on selected disable */
}