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

English Language Centre: Navigation Elements CSS

version: 1.0
date: July 2011
----------------------------------------------------------------------- */

ul#topnav {

padding: 0;
margin: 0px; 
float: left;
width: 960px;
height: 40px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
background: url(../images/main/back_menu.png) top left no-repeat;
font-family: 'Cabin', sans-serif;
font-size: 15px;
color: #fff;
font-weight: 400;
z-index: 1;
}

ul#topnav li {

margin: 0px; 
padding: 0;
float: left;
border-right: 1px solid #555;
}

ul#topnav li a {

padding: 10px 15px;
display: block;
height: 20px;
color: #f0f0f0;
text-decoration: none;
}

ul#topnav li:hover { 

background-color: #e2001a; 
height: 40px;
}
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

ul#topnav li#home:hover { 

background: #e2001a url(../images/main/menu_home.png) top left no-repeat; 
}

ul#topnav li span {

float: left;
padding: 8px 0px 8px 0px;
position: absolute;
left: 0; top:35px;
display: none; /*--Hide by default--*/
width: 960px;
background: #e2001a;
color: #fff;
}

ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

ul#topnav li a.active {

color: #39a9dc;
}

ul#topnav li a.active:hover {

color: #fff;
}


/* Subnav Main Pages
-------------------------------------------------------------------- */

ul#subnav {

margin: 40px 0px 30px 0px;
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #cc0033;
font-size: 16px;
line-height: 24px;
font-weight: 700;
}

ul#subnav li {list-style: none;}

ul#subnav li a {

padding-left: 30px;
color: #cc0033;
background: url(../images/main/arrow_off.png) left center no-repeat; 
}

ul#subnav li a:hover, ul#subnav li a#current {

color: #999;
background: url(../images/main/arrow_on.png) left center no-repeat; 
}