/*********************************************************** 
* Artesia - Primary Navigation Stylesheet
*
* Website Development and Design: Areeba Solutions Pty Ltd
* http://www.areeba.com.au    mailto:enquiries@areeba.com.au 
************************************************************/

/*****************************************************************************************
 *            Primary Navigation generic dropdown behaviour
 ****************************************************************************************/
/* hide submenus (ul's inside a li) by default.
        This is done by setting the position to absolute and moving the left
        edge of the item offscreen to play nice with assistive technologies 
        (screen readers).  Alternatives such as display: none / 
        display: block also hide content from screen readers.
*/
#primary-navigation li ul {
    position: absolute;
    left: -999em;
}
@media all { /* not mac ie for now, gotta find the issue with it */
    /* while we are showing the direct submenu, hide lower level menus */
    #primary-navigation li:hover ul ul, #primary-navigation li:hover ul ul ul, #primary-navigation li.arb-hover ul ul, #primary-navigation li.arb-hover ul ul ul {
        left: -999em;
    }
    
    /* when we hover over a menu item, show it's submenus (ul's) */
    #primary-navigation li:hover ul, #primary-navigation li li:hover ul, #primary-navigation li li li:hover ul, #primary-navigation li.arb-hover ul, #primary-navigation li li.arb-hover ul, #primary-navigation li li li.arb-hover ul {
        left: 0;
    }
}


/*****************************************************************************************
 *            Primary Navigation element  styling
 ****************************************************************************************/
#primary-navigation {
    background: url(../images/bg_combined_mosys.png) #08202f left top no-repeat;
}

/*****************************************************************************************
 *             Menu (ul) layout / styling
 ****************************************************************************************/
 
/************************
 * top level (and below) menus
 ************************/
 
#primary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/************************
 * secondary level (and below) menus
 ************************/
 
#page #primary-navigation ul ul {
    width: 190px;  /* set submenu width */
    top: 30px; /* site directly below the primary links */
    margin: 0; /* under margin change for parent item */
    border-bottom: 3px solid #231F20;
}

/************************
 * tertiary (and below) menus 
 ************************/
 
#primary-navigation ul ul ul {
    margin-left: 174px; /* width of parent menu item above to sit directly next to it */
    top: 0; /* ul's are positioned absolute and the enclosing li is position: relative, this makes the top equal to the top of the enclosing menu item (li).  If there's a border, this may need to change to -1px */
}


/*****************************************************************************************
 *             Menu item (li) layout / styling
 ****************************************************************************************/
 
/************************
 * top level (and below) menu items  
 ************************/
 
#primary-navigation ul li {
    float: left; /* line them up in a line, side by side */
    display: inline;
    line-height: 1em;
    position: relative; /* position relative so that we can adjust the submenu positions relative to this menu item */
    margin: 0;
    padding: 0;
    _height: 0;
}

/************************
 * secondary (and below) menu items 
 ************************/
 
#primary-navigation ul li ul li {
    clear: left; /* make the menu items line up vertically */
}

/*****************************************************************************************
 *             Menu item link (a) layout / styling
 ****************************************************************************************/
/************************
 * top level (and below) links  
 ************************/
 
#primary-navigation ul li a {
    display: block;
    color: white;
    margin: 0;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    background-color: #1C2429;
    text-decoration:none;
}

/************************
 * style the link rollover 
 ************************/
 
#primary-navigation ul li.arb-hover li a,
#primary-navigation ul li:hover li a,
#primary-navigation ul li li.arb-hover li a,
#primary-navigation ul li li:hover li a,
#primary-navigation ul li li li.arb-hover li a,
#primary-navigation ul li li li:hover li a,
#primary-navigation ul li li li li.arb-hover li a,
#primary-navigation ul li li li li:hover li a {
    color: #FFF;
    background-color: #263238;
}
#primary-navigation ul li.arb-hover a,
#primary-navigation ul li:hover a {
    color: #3E3C3D;
}
#primary-navigation ul li.arb-hover a,
#primary-navigation ul li:hover a,
#primary-navigation ul li li.arb-hover a,
#primary-navigation ul li li:hover a,
#primary-navigation ul li li li.arb-hover a,
#primary-navigation ul li li li:hover a,
#primary-navigation ul li li li li.arb-hover a,
#primary-navigation ul li li li li:hover a {
    background-color: #0073AE;
}

/************************
 * secondary level (and below) links
 ************************/
/* make the link fill the enclosing li */
#page #primary-navigation ul li ul li a {
    float: none;
    height: auto;
    display: block;
    margin: 0;
    padding: 3px 15px;
    text-decoration: none;
    overflow: visible;
    width: 160px;
    line-height: 1.5em;
    background-image: url(../images/bg_nav-dropdown-repeat.png); /* Border 1px dotted does not work in IE6 */
    background-repeat: repeat-x;
}
#page #primary-navigation ul li ul li.first a {
    background-image: none;
    padding-top: 10px;
}


/*****************************************************************************************
 *            Link image replacement
 ****************************************************************************************/
/* all the links share the same background image */
#primary-navigation a span {
    background-image: url(../images/bg_combined_mosys.png);
}

/* solutions link */
#primary-navigation li#link-solutions a {
    width: 89px;
}
#primary-navigation li#link-solutions a span {
    background-position: -199px 0;
}
#page #primary-navigation li#link-solutions:hover a span,
body #page #primary-navigation li.solutions-section-link-hover a span /* For IE6 */ {
    background-position: -199px -30px;
}
body.solutions-section #primary-navigation li#link-solutions a span {
    background-position: -199px -60px;
}



/* support and services link */
#primary-navigation li#link-services a {
    width: 148px;
}
#primary-navigation li#link-services a span {
    background-position: -200px -861px;
}
#page #primary-navigation li#link-services:hover a span,
body #page #primary-navigation li.services-section-link-hover a span /* For IE6 */ {
    background-position: -200px -891px;
}
body.services-section #primary-navigation li#link-services a span {
    background-position: -200px -921px;
}

/* products link */
#primary-navigation li#link-products a {
    width: 89px;
}
#primary-navigation li#link-products a span {
    background-position: -640px 0;
}
#page #primary-navigation li#link-products:hover a span,
body #page #primary-navigation li.products-section-link-hover a span /* For IE6 */ {
    background-position: -640px -30px;
}
body.products-section #primary-navigation li#link-products a span {
    background-position: -640px  -60px;
}

/* case studies (clients) link */
#primary-navigation ul li#link-clients ul {
    margin-left: -119px;
}
#primary-navigation li#link-clients a {
    width: 74px;
}
#primary-navigation li#link-clients a span {
    background-position: -288px 0;
}
#page #primary-navigation li#link-clients:hover a span,
body #page #primary-navigation li.clients-section-link-hover a span /* For IE6 */ {
    background-position: -288px -30px;
}
body.clients-section #primary-navigation li#link-clients a span {
    background-position: -288px -60px;
}

/* case studies link */
#primary-navigation ul li#link-casestudies ul {
    margin-left: -119px;
}
#primary-navigation li#link-casestudies a {
    width: 117px;
}
#primary-navigation li#link-casestudies a span {
    background-position: -729px  0;
}
#page #primary-navigation li#link-casestudies:hover a span,
body #page #primary-navigation li.casestudies-section-link-hover a span /* For IE6 */ {
    background-position: -729px -30px;
}
body.casestudies-section #primary-navigation li#link-casestudies  a span {
    background-position: -729px -60px;
}

/* about us link */
#primary-navigation ul li#link-aboutus ul {
    margin-left: -119px;
}
#primary-navigation li#link-aboutus a {
    width: 71px;
}
#primary-navigation li#link-aboutus a span {
    background-position: -568px -861px;
}
#page #primary-navigation li#link-aboutus:hover a span,
body #page #primary-navigation li.aboutus-section-link-hover a span /* For IE6 */ {
    background-position: -568px -891px;
}
body.aboutus-section #primary-navigation li#link-aboutus a span{
    background-position: -568px -921px;
}







/* partners link */
#primary-navigation li#link-partners a {
    width: 83px;
}
#primary-navigation li#link-partners a span {
    background-position: -361px 0;
}
#page #primary-navigation li#link-partners:hover a span,
body #page #primary-navigation li.partners-section-link-hover a span /* For IE6 */ {
    background-position: -361px -30px;
}
body.partners-section #primary-navigation li#link-partners a span {
    background-position: -361px -60px;
}

/* govt link */
#primary-navigation ul li#link-government ul {
    margin-left: -85px;
}
#primary-navigation li#link-government a {
    width: 106px;
}
#primary-navigation li#link-government a span {
    background-position: -6px 0;
}
#page #primary-navigation li#link-government:hover a span,
body #page #primary-navigation li.government-section-link-hover a span /* For IE6 */ {
    background-position: -6px -30px;
}
body.government-section #primary-navigation li#link-government a span {
    background-position: -6px -60px;
}

/* contact link */
#primary-navigation ul li#link-contact ul {
    margin-left: -109px;
}
#primary-navigation li#link-contact a {
    width: 81px;
}
#primary-navigation li#link-contact a span {
    background-position: -558px 0;
}
#page #primary-navigation li#link-contact:hover a span,
body #page #primary-navigation li.contact-section-link-hover a span /* For IE6 */ {
    background-position: -558px -30px;
}
body.contact-section #primary-navigation li#link-contact a span {
    background-position: -558px -60px;
}
 
/************************
 * secondary level (and below) links
 ************************/
/* make the link fill the enclosing li */
#page #primary-navigation ul li ul li a {
    float: none;
    height: auto;
    display: block;
    margin: 0;
    padding: 3px 15px;
    text-decoration: none;
    overflow: visible;
    width: 160px;
    line-height: 1.5em;
    background-image: url(../images/bg_nav-dropdown-repeat.png); /* Border 1px dotted does not work in IE6 */
    background-repeat: repeat-x;
}
#page #primary-navigation ul li ul li a:hover {
    color: #FFF;
    background-color: #0073AE;
}
#page #primary-navigation ul li ul li.first a {
    background-image: none;
    padding-top: 10px;
}


/* OVERIDES */
.solutions-section li#link-solutions a span {
    background-position: -199px -60px !important;
}
.services-section li#link-services a span {
    background-position: -200px -921px !important;
}
.products-section li#link-products a span {
    background-position: -640px -60px !important;
}
.clients-section li#link-clients a span{
    background-position: -288px -60px !important;
}

.casestudies-section li#link-casestudies a span{
    background-position: -729px -60px !important;
}

.aboutus-section li#link-aboutus a span{
    background-position: -568px -921px !important;
}


.partners-section li#link-partners a span{
    background-position: -361px -60px !important;
}
.government-section li#link-government a span{
    background-position: -6px -60px !important;
}
.contact-section li#link-contact a span{
    background-position: -558px -60px !important;
}