
#banner {
	background: url('nav/khrome-trac-header.jpg') no-repeat 0 0; 
	height: 240px; 
	position: relative; 
}

#mainnav {
	margin-top: 0; 
}

a#logo {
	position: absolute; 
	left: 50px; 
	top: 65px; 
}

#banner #header {
	position: relative; 
}

#banner #header #main-nav {
    position: absolute; right: 200px; top: 0; 
    padding: 0 10px 0 70px; 
    background: url('nav/background-on-right.png') no-repeat 0 0; 
}

#banner #metanav {
    position: absolute; left: 0; top: 0; 
    margin-left: -300px; 
    padding: 0 70px 0 310px; 
    background: url('nav/background-on-left.png') no-repeat 100% 0; 
}
#banner #metanav ul {
	color: #fff; 
}
#banner #metanav li {
	padding-right: 13px;
}
#banner #metanav li a {
	font: bold 12px "Arial Narrow"; 
	line-height: 20px; 
	border: none; 
}

#banner .nav {
    margin-top: 10px; 
    list-style: none; 
    font: 10px Arial, sans-serif; 
    line-height: 21px; 
    height: 21px;
	overflow: hidden; 
}

#banner .nav ul {
	overflow: hidden; 
	padding-left: 0; 
}
#banner .nav li {
    float: left; 
	border: none; 
	padding: 0; 
	margin: 0; 
    padding-right: 4px; 
}

#banner .nav li a {
    display: block; 
    overflow: hidden; 
    color: #EEEEEC; 
    text-indent: -1000px; 
    text-decoration: none; 
    text-transform: uppercase; 
    background: none no-repeat 0 0; 
}
#banner #metanav.nav li a {
	text-indent: 0;
}
#banner .nav li a:hover {
    background-position: 0 -21px; 
	color: #EEEE78; 
}

#banner .nav li.news-and-events a {
    width: 75px; 
    background-image: url('nav/news-and-events.png'); 
}
#banner .nav li.gameplay a {
    width: 51px; 
    background-image: url('nav/gameplay.png'); 
}
#banner .nav li.community a {
    width: 60px; 
    background-image: url('nav/community.png'); 
}
#banner .nav li.development a {
    width: 69px; 
    background-image: url('nav/development.png'); 
}
#banner .nav li.team a {
    width: 32px; 
    background-image: url('nav/team.png'); 
}
#banner .nav li.login a {
    width: 33px; 
    background-image: url('nav/login.png'); 
}
#banner .nav li.register a {
    width: 48px; 
    background-image: url('nav/register.png'); 
}
#banner .nav li.dashboard a {
    width: 61px; 
    background-image: url('nav/dashboard.png'); 
}
#banner .nav li.logout a {
    width: 41px; 
    background-image: url('nav/logout.png'); 
}


#search-div {
  overflow: hidden; 
  position: absolute; 
  right: 4px; 
  top: 5px; 
  background: url('nav/search-0-background.png') 0 0 no-repeat;
}
#search-div form {
  background: url('nav/search-1-background.png') 0 100% no-repeat;
  margin-top: 5px;  
  padding: 0 5px 5px; 
  margin: 5px 0 0; 
}
#search form div {
  margin: 3px; 
  color: #968f8e; 
}
#search-div input[type=text] {
  width: 129px; 
}
#search-div input[type=submit] {
  width: 46px; 
}
#search-div form input[type=password], 
#search-div form input[type=text] {
    border: 1px solid #555;
    border-style: solid none none solid;  
	margin: 0; 
    padding: 2px 3px 4px; 
    background: url('form/input-bottom-right.png') 100% 100%; 
    color: #e0dad9; 
    font: 12px Verdana, sans-serif; 
	vertical-align: baseline; 
}
#search-div form input[type=button],  
#search-div form input[type=submit] {
    overflow: visible; 
    border: 1px solid #555;
	border-style: solid none none solid;  
    background: #999 url('form/button-bottom-right.png') 100% 100%;
	margin: 0; 
    padding: 2px 3px 3px; 
    text-decoration: none; 
    color: #fff; 
    cursor: pointer; 
	vertical-align: baseline; 
} 
#search-div form input[type=text] + input[type=submit] {
    font-size: 8px;
    position: relative; top: -2px; 
    padding: 4px 3px 5px; 
    text-transform: uppercase; 
}
