/* reset */

* {margin: 0; padding: 0;}

/* rebuild */

html {font-size:62.5%;}
body {background-color: #000011; color: #CCCFCF; font-size: 1.4em; font-family: verdana, sans-serif;}

a {color: #AA9955; text-decoration: none;}
a:focus, a:hover {color: #AA6622; text-decoration: underline;}

a img {border: none;}

h1 {color: #445533;}
h2 {}h2 {margin-bottom: 5px;margin-top: 8px;}
h3 {margin-top:8px}

p {line-height: 1.4em; padding-bottom: 0.4em;}

/* general */

#formlabel { width: 200px; margin: 25px 0; float: left; margin-right: 70px; position: relative; color: #AA6622;}
#formvalue{ width: 580px; margin: 25px 0; float: left; margin-right: 70px; position: relative; color: #FFFFFF;}

#formlayout ul { list-style-type : none;}
.container {width: 960px; margin: 0 auto; position: relative;}

	#loginbox {background: #111122 no-repeat scroll bottom left; width: 400px; position: absolute; overflow: hidden; height: 200px; right: 0; top: 0;}
		#loginbox #login {border-color: #001111;}

	#header {overflow: auto;}

		#logo {float: left; padding-right: 1em}

		#main-nav {list-style-type: none; float: left; padding-top: 1em;}
		
			#main-nav li {float: left; border-right: 1px solid #1A2929;}
			#main-nav li a {float: left; padding: 0 0.8em; display: block;}
			#main-nav li:last-child {border: none;}

			#main-nav .parent ul {display: none; background-color: #000022; border: 1px solid #485454; padding: 10px; list-style-type: none;}
			#main-nav .parent ul li {float: none; border: none; display: block;}
			#main-nav .parent ul a {padding: 5px; display: block;}
			#main-nav .parent ul a:hover {}
			#main-nav .parent ul a:hover .description {color: #AA6622;}
			#main-nav .parent:hover ul, #main-nav .parent a:hover ul {display: block; position: absolute; top: 30px; z-index: 99;}

		#hero-nav {list-style-type: none; float: right; width: 400px; background: #000022 no-repeat scroll bottom left;}
			#hero-nav li {float: left; width: 133px;}
			#hero-nav li a {float: left; width: 100px; padding: 1em 16px;}
			#hero-nav li a:hover {text-decoration: underline;}
			#hero-nav li a:hover .description {color: #AA6622;}
			#hero-nav li:last-child {border: none;}

		#hero-nav .description, #main-nav ul .description {color: #767F7F; display: block; font-size: 0.8em;}

		#login-status {float: right; clear: right; padding: 0.8em;}

	#main {clear: both; overflow: auto;}

		#content {padding: 1em;}

		#sidebar {}

	#footer {clear: both; overflow: auto;}
		#footer p {padding-top: 2em;}

/* common */

	/* success and error messages */
	.message {list-style-type: none;}
		.message li {padding: 1em;}
		.notice {background: #E6EFC2; color: #264409; border-color: #C6D880;}
		.error {background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;}
		.warning {background: #FFF6BF; color: #514721; border-color: #FFD324;}

	/* lists */
	#listlayout {width: 96%; margin-bottom: 18px; display: block; }
	#listlayout ul {display: block; list-style-type: none; }
	#listheading {padding: 2px; border: 1px solid #485454; border-left: none; line-height: 1.2em; display: block; float: left; background-color: #112222;}
	#listcolumn {padding: 2px; border-right: 1px solid #485454; border-bottom: 1px solid #485454; line-height: 1.2em; display: block; float: left; }
	#listcolumn a {text-decoration: none; color: rgb(106,236,16); }
	#listcolumn a:hover {color: rgb(106,16,236); }

/* homepage */

#hero-panels {}

	#hero-panels .panel {width: 240px; margin-right: 80px; float: left;}
	#hero-panels .panel h3 {background-color: #112222; padding: 0.5em 1em;}
	#hero-panels .panel ul {list-style-type: none; padding: 0.5em 1em;}
	#hero-panels .panel ul li {padding-bottom: 0.75em}
	#hero-panels .panel span {display: block;}
	#hero-panels .panel .author {color: #445533;}
	#hero-panels .panel .title {color: #AA6622;}

/* servers */

	/* server new and edit form */
	form > dl {font-size: 1.2em; padding-left: 1em;}
		form > dl label {padding: 0.2em 0; margin: 0.4em 0 0.1em 0; display: block;}
		form > dl input[type=text], form > dl input[type=password] {width: 300px; font-size: 1.2em;}
		form > dl input[type=submit] {font-size: 1.2em; margin: 0.7em 0.5em 0.7em 0; padding:5px 10px 5px 7px; border:1px solid #112222; background-color: transparent; line-height: 130%; text-decoration: none; font-weight: bold; color: #AA9955;}
		form > dl input[type=submit]:hover {color: #AA6622; border-color: #AA6622;}
		form > dl select {font-size: 1.2em;}
		.checkbox-description {padding: 0.4em 0 0.2em 0;}
			.checkbox-description label {display: inline; padding-left: 1em;}
		.checkbox-term, .submit-term {display: none;}

	/* server listing */
	.server {width: 400px; margin: 2em 0; float: left; margin-right: 80px;}
		.server a {color: #AA9955; text-decoration: none;}
		.server a:hover, .server a:focus {color: #AA6622; text-decoration: underline;}
		.server p {margin-left: 0;}
		.server h3 {position: relative; color: #AA6622;}
		.server .ip {}
		.server .playercount, .server .map {font-weight: bold;}
		.server .players {border-collapse:collapse; margin: 0.8em 0 0.6em 0; width: 100%; font-size: 0.8em;}
			.server .players caption {font-size: 1.2em; text-align: left; margin-top: 0.8em}
			.server .players thead td {font-weight: bold;}
			.server .players td {border: 2px solid #112222; padding: 0.2em 1em 0.2em 0.2em;}

/* news */
.news {margin-bottom: 2em;}
	.news .body, .news .link {margin-top: 0.5em;}
/* event news */
h2.eventnews { margin-bottom: -0.5ex }
p.newshead { padding-bottom: 0; padding-top: 1ex }
span.newsdate {  }
div.newscontent { margin-left: 1em }
div.newscontent p { padding-bottom: 0 }
p.newsinfo { margin-top: -1ex; font-size: 0.8em; font-style: italic }

/* tool tips */


a.info{
    position:relative; /*this is the key*/
    z-index:24; 
    text-decoration: underline}

a.info:hover{z-index:25; }

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
	padding: 10px;
    top:2em; left:2em; width:15em;
    border:1px solid #AA6622;
    background-color:#1A2929; color:#AA6622;
    text-align: center}

/* blah blah blah */

p.footnote {
	font-size: 0.8em;
	clear:both;}

div#main ul.indent {
	padding-left: 2em;
}

a.listcollike {
	text-decoration: none;
	color: rgb(106,236,16);
}

a.listcollike:hover {
	text-decoration: underline; 
	color: rgb(106,16,236);
}

.small { font-size: 0.7331em; vertical-align: middle }

/* brackets */

ul.brackets li {
	width: 16.67em;
	display: inline;
	float: left;
	white-space: nowrap;
}

ul.brackets ul li {
	margin-top: -1px;
	vertical-align: top;
}

ul.brackets ul li.first {
	margin-top: 0;
}

ul.brackets span.team {
	width: 13.37em;
	display: inline-block;
	line-height: 1.5em;
	border: 1px solid #fff;
	padding: 0;
	margin-right: 1px;
	padding-left: 2.3em;
}

ul.brackets span.score {
	margin-left: -15.67em;
	display: inline-block;
	width: 1.733em;
	line-height: 1.5em;
	border-right: 1px solid #fff;
	text-align: center;
}

ul.brackets a.winner {
	background: #021;
}

ul.brackets a.loser {
	background: #111;
}

ul.brackets span.gwinner {
	background: #342;
}

ul.brackets a {
	color: #fff;
	display: inline-block;
	line-height: 1.5em;
	width: 15.67em;
}

ul.brackets a:hover, ul.brackets a.hover {
	background: #033;
	text-decoration: none;
}

/* ----------- */