/* === START RESET === */

/* Copyright (c) 2007, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt version: 2.4.1 */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

/* === END RESET === */

/* === START GENERAL STYLES === */

.clear { clear: both; }
.line0 { line-height: 0; }
.line10 { line-height: 10px; }
.line20 { line-height: 20px; }
.line30 { line-height: 30px; }
.line60 { line-height: 60px; }
.left { float: left; }
.right { float: right; }
.none { display: none; }

a { color: #FF9; }
a:hover { text-decoration: none; }

html {
	background-color: #639300;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
}

body { background: transparent url('../img/global/body.bg.gif') top left repeat-x; }

#page {
	width: 780px;
	min-height: 500px;
	margin: 0 auto;
}

#side { width: 200px; }
.side_bottom {
	width: 200px; height: 16px; float: left;
	background: transparent url('../img/global/side_bottom.bg.gif') top center no-repeat;
}

h1 {
	width: 780px;
	height: 80px;
	background: #639300 url('../img/global/h1.bg.jpg') top center no-repeat;
}
	h1 span { display: none; }

em { color: #FFF; }
strong { font-weight: bold; }

.errorbox { padding: 5px 0; background-color: #600; border: 1px #F00 solid; color: #FF0 !important; font-weight: bold; text-align: center; }

/* === END GENERAL STYLES === */

/* === START CONTENT STYLES === */

#twothirds_bottom {
	width: 560px; height: 16px; float: left;
	background: transparent url('../img/global/twothirds_bottom.bg.gif') top left no-repeat;
}

/* === END CONTENT STYLES === */

/* === START DROP DOWN STYLES === */

/* Background and style */
#nav_holder {
	width: 780px;
	height: 87px;
	background: transparent url('../img/global/nav.bg.jpg') top center no-repeat;
}
#nav {
	width: 660px;
	position: absolute;
	left: 50%;
	margin-top: 22px;
	margin-left: -320px;
	z-index: 10;
}
#nav, #nav ul { list-style-type: none; }
/* Links backgrounds, colors, borders */
#nav li a { margin: 0 8px; }
#nav li a:hover { background-position: 0 -22px; }
	#nav li a span { display: none; }
#nav a, #nav a:visited {
	height: 22px;
	display: block;
	height: 22px;
	background-color: #040;
	color: #EE8;
	font-size: 11px;
	font-weight: bold;
	line-height: 22px;
	text-decoration: none;
}
#nav li li a { width: 90px; text-align: center; }
#nav_home { width: 58px; background: #8FD300 url('../img/global/nav_home.jpg') top center no-repeat; }
#nav_news { width: 53px; background: #8FD300 url('../img/global/nav_news.jpg') top center no-repeat; }
#nav_about { width: 65px; background: #8FD300 url('../img/global/nav_about.jpg') top center no-repeat; }
#nav_battle { width: 54px; background: #8FD300 url('../img/global/nav_battle.jpg') top center no-repeat; }
#nav_collection { width: 98px; background: #8FD300 url('../img/global/nav_collection.jpg') top center no-repeat; }
#nav_store { width: 52px; background: #8FD300 url('../img/global/nav_store.jpg') top center no-repeat; }
#nav_profile { width: 60px; background: #8FD300 url('../img/global/nav_profile.jpg') top center no-repeat; }
#nav_login { width: 57px; background: #8FD300 url('../img/global/nav_login.jpg') top center no-repeat; }
#nav_logout { width: 82px; background: #8FD300 url('../img/global/nav_logout.jpg') top center no-repeat; }
/* Set up the sub level borders */
#nav li ul li a, #nav li ul li a:visited { border:0; }
#nav li a.enclose, #nav li a.enclose:visited { border-width:1px;}
/* Set up the list items */
#nav li { float: left; }
#nav li li { float: none; }
/* For Non-IE browsers and IE7 */
#nav li:hover { position: relative; }
/* Make the hovered list color persist */
#nav ul li:hover > a { background: #060; color: #FFF; }
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#nav li ul { display: none; }
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#nav li:hover > ul { display: block; position: absolute; left: 85px; top: 5px; background: transparent url('../img/global/transparent.gif'); width: 130px;}
/* Position the first sub level beneath the top level liinks */
#nav > li:hover > ul {left: 10px; top: 21px;}
/* Ditch the table */
#nav table { position: absolute; border-collapse: collapse; top: 0; left: 0; z-index: 100; font-size: 1em;}
/* For accessibility of the top level menu when tabbing */
#nav li a:active, #nav li a:focus { background-position: 0 -22px; }
/* IE5.5/6 specific things to make submenus work */
/* Hovered links to relative pos and hover colors. Needed to show the sub levels */
* html #nav li a:hover { position: relative; background-color: #060; color: #FFF; }
/* change the drop down levels from display:none; to visibility:hidden; */
* html #nav li ul { padding: 10px; visibility: hidden; display: block; position: absolute; top: 0; left: 0; background: transparent url('../img/global/transparent.gif'); }
/* keep the third level+ hidden when you hover on first level link */
#nav li a:hover ul ul{ visibility:hidden; }
/* keep the fourth level+ hidden when you hover on second level link */
#nav li a:hover ul a:hover ul ul { visibility:hidden; }
/* keep the fifth level hidden when you hover on third level link */
#nav li a:hover ul a:hover ul a:hover ul ul { visibility:hidden; }
/* keep the sixth level hidden when you hover on fourth level link */
#nav li a:hover ul a:hover ul a:hover ul a:hover ul ul { visibility:hidden; }
/* make the second level visible when hover on first level link and position it */
#nav li a:hover ul { visibility: visible; left: -10px; top: 15px; lef\t: -10px; to\p: 15px; }
/* make the third level visible when you hover over second level link and position it and all further levels */
#nav li a:hover ul a:hover ul { visibility: visible; top: 0; left: 70px; }

/* === END DROP DOWN STYLES === */

/* === START FORM STYLES === */

/* General */
form { color: #FF9; }
input { width: 160px; padding: 2px 0 0 2px; font-size: 15px; }

/* Buttons */
button { width: auto; height: 23px; padding: 1px 2px 2px; background-color: #9C9; border: 1px outset #999; }

/* === END FORM	 STYLES === */

/* === START FOOTER STYLES === */

#footer {
	width: 780px;
	height: 180px;
	margin-top: 10px;
	background: transparent url('../img/global/footer.bg.jpg') top right no-repeat;
	color: #FFF;
	font-size: 11px;
}
	#footer a:hover { text-decoration: none; }
	#footer ul { float: left; }
		#footer li {
			clear: both;
			margin: 0 0 1px 15px;
		}
			#footer li h4 {
				margin-right: 5px;
				float: left;
			}
			#footer li a { color: #FF9; }
				#footer h4 a {
					width: 60px;
					display: block;
					color: #FFF;
					font-weight: bold;
					text-align: right;
				}
				#footer li li {
					clear: none;
					margin: 0 0 1px;
					padding: 0 10px;
					float: left;
					border-right: 1px #FFF dotted;
				}
					#footer li li:last-child { border: 0; }
	#footer_bogies_link {
		width: 195px;
		margin: 90px 13px 0 0;
		float: right;
		color: #FF9;
		text-align: right;
	}
		#footer_bogies_link a {
			font-weight: bold;
			color: #FF9;
		}
	
	#footer_copyright_link {
		width: 200px;
		margin: 24px 0 0 55px;
		float: left; 
		color: #000;
	}
	#footer_tandc_link {
		width: 200px;
		margin: 24px 13px 0 0;
		float: right; 
		color: #000;
		text-align: right;
	}

/* === END FOOTER STYLES === */