/* 
    Document   : menu
    Created on : Jun 8, 2012, 10:41:57 AM
    Author     : will.blackburn
    Description:
        Provides the layout and behavoir of the "menu" navbar system
*/

#nav_bar {
    height: 38px;
    margin: 60px 0 10px 0;
    padding: 7px 0 3px 0;
    
    border: solid 2px #007439;
    
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    
    background-color: #CCCCCC;
    background-color: rgba(200, 200 , 200, 0.3);
}

ul#menu, ul#menu ul{
    margin:0;
    list-style:none;
    padding:0;
    
    background-color: rgba(200, 200, 200, 0.3);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(rgba(255, 255, 255 , 0.35)), to(rgba(255, 255, 255, 0.15)));
    background-repeat: repeat;
    
    border: none;
    
    /*
    border-width: 0px;
    border-style: solid;
    border-color: #343434;    
    border-radius: 28px;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
    */
}

ul#menu ul{
    display: none;
    position: absolute;
    left: 0px;
    top: 100%;
    padding: 0px;
    
    box-shadow: 1.5px 1.5px 2px #B1B1B1;
    -moz-box-shadow: 1.5px 1.5px 2px #B1B1B1;
    -webkit-box-shadow: 1.5px 1.5px 2px #B1B1B1;
    
    background-color: #202020;
    background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(linear, 50% 0%, 50%, 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0)));
    
    border-color: #000000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

ul#menu li:hover>*{
	display: block;
}

ul#menu li{
	position: relative;
        display: block;
        white-space: nowrap;
        font-size: 0;
        float: left;
}

ul#menu li:hover{
	z-index: 1;
}

ul#menu{
        font-size: 0;
        z-index: 500;
        position: relative;
        display: inline-block;
}

ul#menu > li{
	margin:0 0 0 6px;
}

* html ul#menu li a{
	display:inline-block;
}

ul#menu ul > li{
	margin:6px 0 0;
}

ul#menu a:active, ul#menu a:focus{
	outline-style:none;
}

ul#menu a{
	display:block;
        vertical-align:middle;
        text-align:center;
        text-decoration:none;
        font:12px Arial;
        color:#E7E5E5;
        cursor:pointer;
        padding:8px 20px;
        
        background-color: #000000;
        background-repeat:repeat;
        border-width:0;
        border-style:solid;
        border-color:transparent;
}

ul#menu ul li{
	float:none;
        margin:0;
}

ul#menu ul a{
	text-align:center;
}

ul#menu li:hover > a,ul#menu a.pressed{
    	background-color:#fa9e0a;
        border-color:#F8F8F8;
        border-style:solid;
        color:#333;
        text-decoration:none;
        /*
        background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
        background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
        background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));
        background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
        filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00);
        */
}

ul#menu img{
	border:none;
        vertical-align:middle;
        margin-right:8px;
}

ul#menu img.over{
	display:none;
}

ul#menu li:hover > a img.def{
	display:none;
}

ul#menu li:hover > a img.over{
	display:inline;
}

ul#menu li a.pressed img.over{
	display:inline;
}

ul#menu li a.pressed img.def{
	display:none;
}

ul#menu li:hover > a,ul#menu li > a.pressed{
    
	    background-color:#fa9e0a;
        background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
        background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
        background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));
        background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
    
        
        border-style:solid;
        border-color:#F8F8F8;
        color:#333;
        text-decoration:none;
        filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00);
}

ul#menu li.topmenu > a{	
        background-color:#003300;
        background-image:-o-linear-gradient(-90deg,rgba(0, 51, 0, 1),rgba(85,170,0,0.7));
        background-image:-moz-linear-gradient(-90deg,rgba(0, 51, 0, 1),rgba(85,170,0,0.7));
        background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(0, 51, 0, 1)),to(rgba(85,170,0,0.7)));
        background-image:-webkit-linear-gradient(-90deg,rgba(0, 51, 0, 1),rgba(85,170,0,0.7));
        border-width:1px 0 0 0;
        border-style:solid;
        
        border-radius:16px;
        -moz-border-radius:16px;
        -webkit-border-radius:16px;
        
        font:bold 13px Verdana;
        color:#E7E5E5;
        text-decoration:none;
        text-shadow:0 1px 1px #000000;
}

ul#menu li.topmenu:hover > a,ul#menu li.topmenu > a.pressed{
    /*
	    background-color:#fa9e0a;
        background-image:-o-linear-gradient(-90deg,rgba(0, 102, 0, 1),rgba(85,170,0,0.7));
        background-image:-moz-linear-gradient(-90deg,rgba(0, 102, 0, 1),rgba(85,170,0,0.7));
        background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));
        background-image:-webkit-linear-gradient(-90deg,rgba(0, 102, 0, 1),rgba(85,170,0,0.7));
    */
        border-style:solid;
        border-color:#F8F8F8;
        color:#FFFFFF;
        text-decoration:none;
        text-shadow:0 1px 0 #000000;
        filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00);
}

ul#menu li.subfirst > a{
	    border-radius:9px 9px 0 0;
        -moz-border-radius:9px 9px 0 0;
        -webkit-border-radius:9px;
        -webkit-border-bottom-right-radius:0;
        -webkit-border-bottom-left-radius:0;
}

ul#menu li.sublast > a{
	    border-radius:0 0 9px 9px;
        -moz-border-radius:0 0 9px 9px;
        -webkit-border-radius:0;
        -webkit-border-bottom-right-radius:9px;
        -webkit-border-bottom-left-radius:9px;
}