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

a:hover, a:active {
	text-decoration: none;
	background-color: transparent;
	cursor: pointer;
	}

a:hover.help, a:active.help {
	cursor: help;
	background-color: transparent;
	}

vis {
	visibility: visible !important;
	}

invis, soundspan {
	visibility: hidden !important;
	}

input.invis, .invis input {
	background-color: transparent !important;
	border-width: 0 !important;
	text-align: right;
	cursor: default;
	}

.pad0 {
	padding: 0;
	}

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

/* Renders nothing but enters in NS4 */
.header a, .footer a {
	background-color: transparent;
	padding: 1px 3px 1px 3px;
	}

.header a:hover, .header a:active, .footer a:hover, .footer a:active {
	border-width: 1px 0 1px 0;
	border-style: solid;
	padding: 0 3px 0 3px;
	}

.compress a {
	padding: 1px 0 1px 0;
	}

.compress a:hover, .compress a:active {
	padding: 0;
	}

form {
	display: inline;  /* Hides select lists in NS4 */
	}

option {
	border-width: 0 0 1px 0 !important; /* Causes 1 line per option in NS4*/
	border-style: dashed !important;
	}

input.form, .form input, .input, .password, textarea, select, option, button, .submit, .submit-hover {
	border-width: 1px;
	border-style: solid;
	border-radius: 3px 3px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	margin: 0;
	}

input[type='text'], input[type='password'] {
	border-width: 1px;
	border-style: solid;
	border-radius: 3px 3px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	margin: 0;
	}

/* Separate to avoid old versions of IE not processing the entire thing */
input[type='submit'], input[type='button'] {
	border-width: 1px;
	border-style: solid;
	border-radius: 3px 3px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	}

.submit, .submit-hover, .submit:hover, .submit:active {
	border-width: 1px 2px 2px 1px !important;
	}

/* Repeats (some) of above, but keeping the child selectors separate as it breaks older IE processing */
input[type='submit'], input[type='button'], input[type='submit']:hover, input[type='button']:hover {
	border-width: 1px 2px 2px 1px !important;
	cursor: pointer;
	}

fieldset {
	-moz-border-radius: 6pt;
	}



/* Verical fly-out menu */

#form-menu-container {
	padding: 0;
	border: none;
	position: relative;
	top: 0px;
	left: 0;
	}

#form-menu {
	padding: 0;
	border: none;
	/* width: 100%; */
	margin: 1px;
	}

#form-menu a {
	text-align: left;
	display: block;
	border-style: solid;
	border-width: 1px;
	white-space: nowrap;
	margin: 0;
	padding: 0px 1px 1px 4px;
	}

#form-menu a, #form-menu a:link, #form-menu a:visited {
	text-decoration:none;
	}

#form-menu ul {
	list-style-type: none;
	margin:0;
	padding:0;
	width: 145px;	/* default width */
	}

#form-menu li {
	position:relative;
	}

#form-menu ul ul {
	left: 0;
	top: 19px;
	position:absolute;
	z-index:200;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	width: auto;
	}

#form-menu ul ul ul {
	top:0;
	left:100%;
	}

div#form-menu li:hover {
	cursor:pointer;
	z-index:100;
	}

div#form-menu li:hover ul ul,
div#form-menu li li:hover ul ul,
div#form-menu li li li:hover ul ul,
div#form-menu li li li li:hover ul ul {
	display:none;
	}

div#form-menu li:hover ul,
div#form-menu li li:hover ul,
div#form-menu li li li:hover ul,
div#form-menu li li li li:hover ul {
	display:block;
	}

div#form-menu ul li ul li {
	width: 145px;
	}

div#form-menu ul li ul li ul li {
	width: auto;
	}

/* My scrolling technique */
#form-menu li.more ul {
	overflow: auto;
	max-height: 308px;	/* 17 x 18px */
	padding: 0;
	margin: 0;
	width: auto;
	}

@media screen { @media (min-width: 0px) {	/* Everything but IE and Safari, from browserhacks.com */
	/* For chrome and firefox to minimise the impact of the horizontal scrollbar */
	#form-menu li.more ul {
		padding-right: 17%;
		}

	#form-menu li.more ul li {
		width: 120%;
		}
	} }

/* End scrolling */

li.more:after {
	content:">";
	font-weight: bold;
	position: absolute;
	top: 1px;
	left: 132px;
	z-index:100;
	}

li.more:hover:after {
	z-index:100;
	}

/* end menu */



/* Previously in layout-adv.css */


@media screen {

html {
	padding: 0;
	margin: 0;
	}

div#wrapper {
	padding-top: 90px;	/* How far from the top of the page it all starts, scrolls flush with the header, but the difference is the initial 'padding' between the header and content */
	padding-bottom: 40px;	/* How far from the bottom we stop */
	}

#header {
	position:fixed;
	top:0;
	_position:absolute;
	_top:expression(eval(document.body.scrollTop));	/* So it works in IE6 */
	left:0;
	margin:0;
	padding:0;
	height:60px;
	width: 100%;
	text-align: center;
	z-index: 2;
	}

#contents {
	text-align: left;
	margin: 0 auto 0 auto;
	}

#footer {
	position:fixed;
	bottom:0;
	_position:absolute;
	_top:expression(document.body.scrollTop+(document.body.clientHeight-this.clientHeight)-4);	/* So it works in IE6 */
	left:0;
	margin:0;
	padding:0;
	height:20px;
	width: 100%;
	text-align: center;
	z-index: 2;
	}
}