#customheader{
	height:128px;
	width:100%;
	margin-top:0px;
    display:block;
background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/SpriteSheetBG.png");
    font-family:Verdana,Helvetica,sans-serif;
	z-index:300;
}
/*
Element:  toparea
Parent:  header
Description:  This push downs the bottom navi, gives top navi room.
*/
#customheader #toparea{
	    padding:0px;
	width:1010px;
    display:block;

    margin: 0 auto;
}


/*
Element: topnavi
Parent:  toparea
Description:  This holds the chat, gallery, resources, and social networking links.
*/
#customheader #toparea #topnavi{
	margin-right:0px;
    width:auto;
	float:right;
    z-index:302;


}
#customheader #toparea #banner{
margin:0px 16px 0px 15px;
	width:367px;
	height:73px;
	display:block;
	float:left;
	background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/SpriteSheet.png");
	background-position:0px 72px;
    }
    
#customheader #toparea #topnavi br{
clear:both;
}
    
#customheader #toparea #topnavi ul{
	padding:0px;
	margin-top:10px;
	display:inline;
    z-index:303;
}
#customheader #toparea #topnavi ul li{
	list-style:none;
	display:block;
    float:left;
    background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/SpriteSheet.png");
    z-index:304;
	margin-right:10px;
   
    height:27px;
	cursor:pointer;	
}
#customheader #toparea #topnavi ul li a{
	width: 100%;
    height: 100%;
    display:block;
}
#customheader #toparea #topnavi ul li img{
	border:0px;
	margin:0px;
}
/*
Elements:  news (class), gallery (class), resources (class), forums (class)
Parent:  topnavi
Description:  These are the various classes that are in the topnavi.  
Notes:  resources, and gallery have sub navigations, thus they get some extra css.
*/
#customheader #toparea #topnavi .news{
	width: 69px;
	background-position:480px 54px;
}
#customheader #toparea #topnavi .news:hover{
	background-position:480px 27px;
}
#customheader #toparea #topnavi .gallery{
	width: 82px;
	background-position:411px 54px;
}
#customheader #toparea #topnavi .gallery:hover{
	background-position:411px 27px;
}
#customheader #toparea #topnavi .media{
	width: 72px;
	background-position:329px 54px;
}
#customheader #toparea #topnavi .media:hover{
	background-position:329px 27px;
}
#customheader #toparea #topnavi .resources{
	width: 93px;
	background-position:257px 54px;
}
#customheader #toparea #topnavi .resources:hover{
	background-position:257px 27px;
}
#customheader #toparea #topnavi .chat{
	width: 66px;
	background-position:164px 54px;
}
#customheader #toparea #topnavi .chat:hover{
	background-position:164px 27px;
}
#customheader #toparea #topnavi .forums{
	width: 79px;
	background-position:98px 54px;
}
#customheader #toparea #topnavi .forums:hover{
	background-position:98px 27px;
}

#customheader #toparea #topnavi ul .socialnets{
	background:none;

}
#customheader #toparea #topnavi ul .socialnets a{
	float:left;
    display:block;
    width: 17px;
    height:17px;
    background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/SpriteSheet.png");
    margin-right:3px;
	margin-top:4px;
}
/*
Elements:  Social Network Mini-Links
Parent:  topnavi
Description:  This is the area for the minature links in the top navi.
*/
#customheader #toparea #topnavi ul .socialnets .twitter{
	background-position: 18px 72px;
}
#customheader #toparea #topnavi ul .socialnets .fb{
	background-position: 18px 54px;
}
#customheader #toparea #topnavi ul .socialnets .rss{
	background-position: 18px 36px;

}
#customheader #toparea #topnavi ul .socialnets .youtube{
	background-position: 18px 18px;

}
/*
Element:  sub navigation (system of css)
Parent:  topnavi
Description:  This is the CSS coding for the sub navigaiton for the link.s
*/
#customheader #toparea #topnavi li div{
    display:none;
    height:38px;
    width: 600px;
    margin-left:-210px;
    background: none;
    padding:2px 10px 2px 10px;
	z-index:305;
    color: #FFF;
}
#customheader #toparea #topnavi li div ul{
    padding: 0px;
    margin: 0px;
    display:block;
}
#customheader #toparea #topnavi li div ul li{
    display: inline;
    margin-right:5px;
    width: 120px;
     margin-top:3px;
    background-image: none;
    background-color: #123955;
    font-size: 14px;
    height:15px;
    list-style:none;
    padding-bottom:3px;
    text-align: center;
}
#customheader #toparea #topnavi li div ul li:hover{
	color:  #d97523;
    background-color: #004677;
}
#customheader #toparea #topnavi li:hover div{
	display: block;
}
#customheader #toparea #topnavi li a{
    color:#e5e9ec;
    font-size: 13px;
    text-decoration: none;
	font-family:Lucida,Helvetica,sans-serif;
}
#customheader #toparea #topnavi li a:hover{
	color:#df873f;
}




/*
Elements:  bottomnavi
Parent:  header
Description:  This is the bottom navigation.  The navigation that contains the icons and links to walkthroughs.  

*/
#customheader #bottomnavi{
	display: block;
	margin: 0px auto;
	height:54px;
    width:1000px;
	color:#fff;
	text-align:left;
    z-index:304;
}
#customheader #bottomnavi ul{
	padding:0px;
	margin:0px;
	height:54px;
	display:inline;
    z-index:305;
}
#customheader #bottomnavi ul li{

	list-style:none;
	float:left;
    margin-right:17px;
	display:block;
    width:54px;
    height:54px;
    background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/SpriteSheet.png");
    z-index:306;
}
#customheader #bottomnavi ul li a{
 	display:block;
  	height:54px;
	width:54px;

}
#customheader #bottomnavi ul li img{
	position:relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}


/*
Elements:  Navigation buttons/icons
Description:  These image backgrounds, width/height (all the same).
*/
#customheader #bottomnavi .loz{
	background-position:0px 0px;
}
#customheader #bottomnavi .loz:hover{
	background-position:0px 126px;
}
#customheader #bottomnavi .aol{
	background-position:810px 0px;
}
#customheader #bottomnavi .aol:hover{
	background-position:810px 126px;
}
#customheader #bottomnavi .alttp{
	background-position:756px 0px;
}
#customheader #bottomnavi .alttp:hover{
	background-position:756px 126px;
}
#customheader #bottomnavi .la{
	background-position:702px 0px;
}
#customheader #bottomnavi .la:hover{
	background-position:702px 126px;
}
#customheader #bottomnavi .oot{
	background-position:648px 0px;
}
#customheader #bottomnavi .oot:hover{
	background-position:648px 126px;
}
#customheader #bottomnavi .mm{
	background-position:594px 0px;
}
#customheader #bottomnavi .mm:hover{
	background-position:594px 126px;
}
#customheader #bottomnavi .oos{
	background-position:540px 0px;
}
#customheader #bottomnavi .oos:hover{
	background-position:540px 126px;
}
#customheader #bottomnavi .ooa{
	background-position:486px 0px;
}
#customheader #bottomnavi .ooa:hover{
	background-position:486px 126px;
}
#customheader #bottomnavi .ww{
	background-position:432px 0px;
}
#customheader #bottomnavi .ww:hover{
	background-position:432px 126px;
}
#customheader #bottomnavi .mc{
	background-position:378px 0px;
}
#customheader #bottomnavi .mc:hover{
	background-position:378px 126px;
}
#customheader #bottomnavi .tp{
	background-position:324px 0px;
}
#customheader #bottomnavi .tp:hover{
	background-position:324px 126px;
}
#customheader #bottomnavi .ph{
	background-position:270px 0px;
}
#customheader #bottomnavi .ph:hover{
	background-position:270px 126px;
}
#customheader #bottomnavi .st{
	background-position:216px 0px;
}
#customheader #bottomnavi .st:hover{
	background-position:216px 126px;
}
#customheader #bottomnavi .wii{
	background-position:162px 0px;
}
#customheader #bottomnavi .wii:hover{
	background-position:162px 126px;
}
/*
Element:  sub navigation (system of css)
Parent:  bottomnavi
Description:  This is the CSS coding for the sub navigaiton for the links.
*/
#customheader #bottomnavi ul li div
{
		font-family:Verdana;
	font-size:13px;
	display:none;
	position:absolute;
	cursor:pointer;
	z-index:101;
	height:auto;
	color:#000;
}
#customheader #bottomnavi ul li div a{
	color:#fff;
    text-decoration: none;
}
#customheader #bottomnavi ul li:hover div{
	display:block;
    z-index:308;

}

#customheader #bottomnavi ul li:hover div ul li div{
	display:none;
    z-index:308;


}
#customheader #bottomnavi ul li div ul{
	pading:0px;
    margin:0px;
    display:block;
    height:auto;
    z-index:309;
}
#customheader #bottomnavi ul li div span a{
	
    display:inline;
}
#customheader #bottomnavi ul li div ul li{
    list-style:none;
    display:block;
    float:none;
    height:20px;
    padding:2px;
    background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/MenuArrow.gif");
    background-color:#99bdec;
	background-repeat:no-repeat;
	background-position:center right;
    width:165px;
    border:solid #000;
	border-top-width:0px;
	border-left-width:1px;
	border-bottom-width:1px;
	border-right-width:1px;
}
#customheader #bottomnavi ul li .rightSub{

     margin: 0px 0px 0px -118px;

}
#customheader #bottomnavi ul li .rightSub ul li{
padding:2px;
	    background-image:url("http://zeldadungeon.net/wp-content/themes/default/images/MenuArrow2.gif");
    background-color:#99bdec;
	background-repeat:no-repeat;
	background-position:center left;
    z-index:102;
}
#customheader #bottomnavi ul li .rightSub ul li span{
	margin-left:10px;
	
}
#customheader #bottomnavi ul li .rightSub ul li span a{
	display:inline;
}
#customheader #bottomnavi ul li .rightSub ul li div{
	display:none;
    margin: -19px 0px 0px -184px;
}
#customheader #bottomnavi ul li .rightSub ul li div ul li{
	width:176px;
	background-image:none;

}
#customheader #bottomnavi ul li div ul li div{
		display:none;
margin: -19px 0px 0px 167px;
}
#customheader #bottomnavi ul li div ul .rightSub{
	display:none;
	margin: -20px 0px 0px 167px;
}
#customheader #bottomnavi ul li div ul .rightSub ul li{
	width:176px;
	background-image:none;
}
#customheader #bottomnavi ul li div ul li:hover div{
	display:block;
}
#customheader #bottomnavi ul li div ul li:hover{
	background-color:#c6deff;
}
#customheader #bottomnavi ul li div ul li a{
	color: #000;
    width:100%;
    height:20px;
}
#customheader #bottomnavi ul li div ul li ul li{
	background-image:none;
    
}