/*
 * Style sheet for RolePlay OnLine -- http://rpol.net
 *
 * CSS validated at "http://jigsaw.w3.org/css-validator/" - W3C's online validation service
 *
 * Use box-sizing: border-box at some stage?
 */

body {
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overflow-y: auto;
	}

body, div, p, th, td, dd {
	font-family: verdana, geneva, helvetica, arial, sans-serif;
	text-decoration: none;
	cursor: default;
	}

/*
	Start - Font sizes!
				*/

/* Theoretically let's IE get its resizing "bearings" */
html {
	font-size: 100%;
	}

/* Initial percentage value allows for better zoom scaling */
body {
	font-size: 78%;	/* 78.1, which http://riddle.pl/emcalc/ tells me is needed for 12.5px, doesn't work for FF */
	}

#header, #footer {
	font-size: 92%;
	}

div#header, div#footer, div#contents {
/*	width: 800px;
	max-width: 800px;
	width:expression(document.body.clientWidth > 800? "800px": "auto");*/
	}

/* Mainly for Internet Explorer on Windows*/
table {
	font-size:100%;
	}

/* Slightly larger form text (in Internet Explorer)
	doing just "textarea" makes Mozilla have really small text.  Yes, that smaller 108%... */
* html textarea, select {
	font-size: 108%;
	}

html>/**/body pre, html>/**/body tt {
	font-size:120%;
	font-size:100%\9;	/* IE Hack */
	}

/* And last; stop cascading sizes */
li li, li p, td p, blockquote p, .sm .sm, .med .med, .med .sm, .sm .med, html>body pre html>body pre, .serif .mono, .serif .cursive, .mono .serif, .mono .cursive, .cursive .serif, .cursive .mono,
tt tt, pre pre, tt pre, pre tt, html>/**/body tt tt, html>/**/body pre pre, html>/**/body tt pre, html>/**/body pre tt {
	font-size:100%;
	}

h1 {
	font-size: 133%;
	letter-spacing: 4px;
	}

h2 {
	font-size: 125%;
	letter-spacing: 3px;
	}

h3 {
	font-size: 116%;
	letter-spacing: 2px;
	}

h4 {
	font-size: 108%;
	letter-spacing: 2px;
	}

.med, td.quote {
	font-size: 92%;
	}

.sm {
	font-size: 83%;
	}

textarea {
	/* -- INSUFFICIENT END-USER TESTING -- font-family: WorkAroundWebKitAndMozilla,Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif; **/
	/* sans-serif added on the end (will never be used) to stop some browsers inheriting their 13px monospace size - http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ - http://en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
}

.message .large, .message_alt .large, .info_table .large {
	font-size: 110%;
}

.message .large .large, .message_alt .large .large, .info_table .large .large {
	font-size: 107.5%;
}

.message .large  .large .large .large, .message_alt .large .large .large .large, .info_table .large .large .large .large {	/* Stop compounding after 3 */
	font-size: 100%;
}

.smallcaps {
	font-variant: small-caps;
}

				/*
	End - Font sizes!
*/

td {
	text-align: left;
	}

th {
	text-align: center;
	}

p, div.para {
	margin: 15px 0 15px 0;
	}

div, .p0 p, p.p0 {
	margin: 0;
	}

sup, sub {
	font-size: 100%\9;	/* "\9" is an IE only hack, makes font size larger */
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}

sub {
	top: 0.4em; 
}

.centre, .centre td, .center, .center td {
	text-align: center;
	}

td.center, td.centre, th.center, th.centre {
	text-align: center !important;
	}

.center table {	/* centre align ff/cg tables */
	margin-left: auto;
	margin-right: auto;
	}

.left {
	text-align: left;
	}

td.left, th.left {
	text-align: left !important;
}

.right {
	text-align: right;
	}

td.right, th.right {
	text-align: right !important;
}

.middle, .middle * {
	vertical-align: middle;
	}

blockquote {
	margin: 0 10px 0 20px;
	}

form {
	margin: 0;
	}

optgroup {
	font-family: verdana, geneva, helvetica, arial, sans-serif;
	text-decoration: none;
	font-style: normal;
	}

ul, ol {
	margin-bottom: .5em;
	margin-top: .5em;
	margin-left: 3em;
	padding: 0;
	}

ul {
	list-style-type: square;
	}

ol li {
/*	list-style: upper-alpha;*/
	}

hr {
	border: none;
	height: 1px;
	width: auto;
	}

a, a:link, a:visited {
	text-decoration: none;
	background-color: transparent;
	}

a.help, a:link.help, a:visited.help {
	background-color: transparent;
	}

a.help {
	color: #f00 !important;
	}

.private, font.private {
	color: #e95000;
	}

/*.hl .highlight td, button, .submit, .submit-hover {*/
button, .submit, .submit-hover, .submit:hover, .submit:active {
	cursor: pointer;
	padding: 2px 8px 2px 8px;
	}

/* Separate to avoid old versions of IE not processing the entire thing */
input[type='submit'], input[type='button'] {
	cursor: pointer;
	padding: 2px 8px 2px 8px;
	}

input[type='checkbox'] {
	/* padding: 2px 2px 2px 2px !important; */
	vertical-align: middle;
	}

td.shadow {
	border-style: solid;
	border-width: 0 1px 1px 0;
	}

.message .fullbdr tr, .himessage .fullbdr tr {
	text-align: center;
	}

td.quote {
/*	font-size: 11px;*/
	border: 1px inset;
	border-radius: 3px 3px;
	}


/* Tables, borders, box areas etc */
html>/**/body .message_table th {	/* FireFox only */ 
	text-align: center;
	}

.message_table {		/* Things like character list, message boxes */
	padding: 1px;
	border-collapse: collapse !important;	/* Stop double borders */
	}

.message_table th {
	border-style: solid;
	border-width: 1px;
	}

.message_table td {
	border-style: solid;
	border-width: 1px;
	}

/* Messages, ie the stuff in threads */
td.message, td.message_alt {
	border-style: solid;
	border-width: 0 1px 1px 0;
	}
	
td.message, td.message_alt, .info_box td, info_table td {
	line-height: 1.17em;	/* 1.5 x the text height */
	}

.messsage_information {
	border-style: dashed;	/* A unique outline so people know it's geniune, not just some small coloured text */
	border-width: 1px 0 0 0;
	margin: 0.5em 0 0 0;	/* Gap before the section starts (vertical space before the border) */
	font-style: italic;
	}
	
table.info_table, table.info_box {
	margin: 0.5em 0 0.5em 0;
	}

.page_links td, .page_links th {
	border-style: solid;
	border-width: 0 1px 1px 1px;
	border-collapse: collapse !important;
	empty-cells: show;
	padding: 1px 2px 1px 2px;
	}
	
.selection_table {	/* The main table on the main menu and game/forum menu */
	padding: 1px;
	}

.selection_table th, .selection_table td {	/* The main table on the main menu and game/forum menu */
	padding: 1px 2px 2px 2px;
	}

.selection_table img {	/* The main table on the main menu and game/forum menu */
	vertical-align: top;
	padding-top: 2px;
	}

.info_table td, .info_table th, .info_box td, .info_box th {
	padding: 1px;
	}

.info_table th, .info_box th {
	text-align: center;
	}

.info_table td, .info_box td {
	text-align: left;
	}

.info_box {
	border-width: 1px;
	padding: 1px 4px 1px 4px;
	text-align: center;
	border-radius: 2px 2px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); 
	}

table.grid_separate {
	border-collapse: separate !important;
	}

.grid table {
	padding: 0;
	margin: 0;
	}

.grid tr
	{
	text-align: center;
	height: 26px;	/* td height plus border width */
	padding: 0;
	}
	
.grid th, .grid td
	{
	text-align: center;
	width: 25px;
	padding: 0;
	}

.grid1 tr
	{
	height: 16px;
	}
	
.grid1 th, .grid1 td
	{
	width: 15px;
	}

.grid3 tr
	{
	height: 36px;
	}
	
.grid3 th, .grid3 td
	{
	width: 35px;
	}

.grid4 tr
	{
	height: 46px;
	}
	
.grid4 th, .grid4 td
	{
	width: 45px;
	}

.grid5 tr
	{
	height: 56px;
	}
	
.grid5 th, .grid5 td
	{
	width: 55px;
	}

.smart_table td, .smart_table th {
	padding: 1px 5px 1px 5px;
	}

.smart_table th.noweight {
	text-align: left;
	}

/* Borders, o' so many borders */
.border {
	border-style: solid;
	border-width: 1px;
	}

.border_0000, .border_0000 th, .border_0000 td {
	border-width: 0 0 0 0;
	border-style: none;
	}
	
.border_0010 {
	border-width: 0 0 1px 0;
	}

.border_0011 {
	border-width: 0 0 1px 1px;
	}
	
.border_0100 {
	border-width: 0 1px 0 0;
	}

.border_0110 {
	border-width: 0 1px 1px 0;
	}

.border_0111, .border_0111 td {
	border-width: 0 1px 1px 1px;
	}

.border_1000 {
	border-width: 1px 0 0 0;
	}

.border_1001 {
	border-width: 1px 0 0 1px;
	}

.border_1010 {
	border-width: 1px 0;
	}

.border_1100 {
	border-width: 1px 1px 0 0;
	}

.border_0220 {
	border-width: 0 2px 2px 0;
	}

.border_2222 th, .border_2222 td {
	border-width: 2px 2px 2px 2px;
	}

.border_0330 {
	border-width: 0 3px 3px 0;
	}

.border_1331 {
	border-width: 1px 3px 3px 1px;
	}

.border_3113 {
	border-width: 3px 1px 1px 3px;
	}

.border_3333 th, .border_3333 td {
	border-width: 3px 3px 3px 3px;
	}

#stickylist {
	line-height: 130%;
	padding: 4px;
	}

div.stickyblock {
	padding: 2px;
	text-align: left;
	}

.footer th, th.navbar, .noweight {
	font-weight: normal;
	}

#footer {
	border-style: solid;
	border-width: 4px 0 4px 0;
	}
	
/* For IE and browsers that make logical sense. */
.header img {
	vertical-align: middle;
	}

/* For Firefox, horray for scrollbars when you use "middle" */
html>body #header img {
	vertical-align: top;
	}

.header, .footer {
	text-align: left;
	}

html>body .header img {
	padding-top: 1px;
	}

#quick_login {
	border-style: solid;
	border-width: 0 4px 4px 4px;
	padding-right: 5px;
	}


input.smc, .smc input {
	height: 15px;
	width: 15px;
	margin: 0;
	padding: 0;
	}

input[type='checkbox'] {
	height: 15px;
	width: 15px;
	margin: 0;
	padding: 0;
	}

.label_nowrap label {
	display: inline-block;
	}

vis {
	visibility: visible !important;
	}

invis {
	visibility: hidden !important;
	}

input.invis, .invis input {
	background-color: transparent !important;
	border-width: 0px !important;
	font-family: verdana, geneva, helvetica, arial, sans-serif;
	text-align: right;
	cursor: default;
	}

.transparent {
	background-color: transparent !important;
	}

.pad0 {
	padding: 0;
	}

.pad1313, .pad1313 td, .pad1313 th {
	padding: 1px 3px 1px 3px;
	}

.serif {
	font-family: georgia, serif;
	font-size: 109%;
	}

.mono {
	font-family: courier new, courier, monospace;
	font-size: 109%;
	}

.cursive {
	font-family: comic sans ms, chalkboard, 'URW Chancery L', cursive;
	font-size: 109%;
	}

div.inline {
	display: inline;
	}

.formatting_bar a, .formatting_bar a:link, .formatting_bar a:visited, .formatting_bar a:hover {
	padding-left: 4px;
	padding-right: 4px;
}

a.button_on {
	border: 0;
	border-radius: 5px;
}

/* Define nothing for this, just a holder so it can be manipulated.  For javascript. */
.js_collapse {
	}

.no_disp {
	display: inline-block;
	font-size: 0px;
	overflow: hidden;
	height: 0.1px;
	width: 0.02px;	/* any smaller and chrome doesn't include the text in a copy+paste */
	white-space: nowrap;
}

.AutoSuggest {
	margin-top: 0 !important;
	position: absolute;
	cursor: default;
	overflow: auto;
	overflow-x: hidden;
	text-align: left !important;
}

.AutoSuggest_item {
	padding: 1px;
	padding-left: 5px;
	width: 100%;
}

.AutoSuggest_item_highlighted {
	padding: 1px;
	padding-left: 5px;
	color: white;
	background-color: #3399ff;
}

a.tt span {
	display: none;
}

a.tt:hover span { 
	display: block; 
	position: absolute; 
/*	margin-top: 10px; 
	margin-left: -100%;
	width: auto;	*/
	padding: 5px; 
	z-index: 100; 
/*	text-align: left;	*/
	text-decoration: none;
	cursor: default;
}

.tooltip {
	border-bottom: 1px dotted #000000;
	cursor: help !important; 
	text-decoration: none;
	position: relative;
}

.tooltip span {
	margin-left: -999em;
	position: absolute;
}

.tooltip:hover span {
	padding: 0.8em 1em;
	border-radius: 5px 5px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); 
	position: absolute; 
	left: 1em; 
	top: 2em;
	z-index: 99;
	margin-left: 0; 
	width: 250px;
	filter:progid:DXImageTransform.Microsoft.Gradient(enabled='false') !important;	/* doesn't mix with rounded corners */
}

.tooltip:hover img {
	border: 0; 
	margin: -10px 0 0 -55px;
	float: left; 
	position: absolute;
}

.niftybox {
	border-radius: 15px 15px;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2); 
}

table.round5 {
	border-radius: 5px 5px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

table.round5 tr:first-child td:first-child, table.round5 tr:first-child th:first-child, table.selection_table tr:first-child td:first-child, table.selection_table tr:first-child th:first-child {
	border-top-left-radius:5px;
}

table.round5 tr:first-child td:last-child, table.round5 tr:first-child th:last-child, table.selection_table tr:first-child td:last-child, table.selection_table tr:first-child th:last-child {
	border-top-right-radius:5px;
}

table.round5 tr:last-child td:first-child, table.round5 tr:last-child th:first-child, table.selection_table tr:last-child td:first-child, table.selection_table tr:last-child th:first-child {
	border-bottom-left-radius:5px;
}

table.round5 tr:last-child td:last-child, table.round5 tr:last-child th:last-child, table.selection_table tr:last-child td:last-child, table.selection_table tr:last-child th:last-child {
	border-bottom-right-radius:5px;
}

table.round_top tr:last-child td:first-child, table.round_top tr:last-child th:first-child {
	border-bottom-left-radius: 0;
}

table.round_top tr:last-child td:last-child, table.round_top tr:last-child th:last-child {
	border-bottom-right-radius: 0;
}

table.round_bottom tr:last-child td:first-child, table.round_bottom tr:last-child th:first-child {
	border-top-left-radius: 0;
}

table.round_bottom tr:last-child td:last-child, table.round_bottom tr:last-child th:last-child {
	border-top-right-radius: 0;
}

.side-tab {
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2); 
}