﻿/*parts of this are from: http://carroll.org.uk/sandbox/suckerfish/bones2.html*/

/* ----[ Tool Tips ]----*/
.menuTips-tip {
    color: black;
    z-index: 13000;
    background: white;
}

.menuTips-title {
    display: none;
}

.menuTips-text {
    font-size: 10px;
    padding: 4px 8px;
    border: 1px solid black;
}

/* ----[ LINKS ]----*/

/* all menu links */
#nav a, #subMenusContainer a {
    /*text-decoration: none;
    display: block;
    font: 13px Verdana bold;
    /*padding:4px 17px 4px 8px;*
    color: black;
    /*background-color:#A8B7FF;*
    padding: 4px 0px 4px 8px;
    background-color: #fff;
    height: 25px;*/

    background-color: #fff;
    border: 1px #4e667d solid;
    display: block;
    line-height: 1.35em;
    margin: 0 0 0 1px;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    color: black;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a {
    /*font-weight: normal;
    text-decoration: none;
    /*font-size: 17px;*/
    /*padding:21px;*/
    /*padding:10px 16px 10px 10px;*
    display: block;
    position: relative;
    padding: 4px 20px;
    background-color: #fff;
    height: 25px;
    border: 1px #4e667d solid;
    line-height: 1.35em;*/


    background-color: #fff;
    border: 1px #4e667d solid;
    display: block;
    line-height: 1.35em;
    margin: 0 0 0 1px;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    color: black;
}

/* Just sub menu links */
#subMenusContainer a, #nav ol a, #nav ul a {
}

#nav a.current {
    background-color: #76391C;
    color: #CEC8C2;
}

/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused {
    background-color: #778EFF;
    color: #fff;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused {
    background-color: #778EFF;
    color: #fff;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn {
    background: url(../images/right_arrow.gif) right center no-repeat;
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused {
    background: url(../images/right_arrow_over.gif) right center no-repeat;
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn {
    background: url(../images/right_arrow_main.gif) right center no-repeat;
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused {
    background: url(../images/right_arrow_main_over.gif) right center no-repeat;
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* main menu ul or ol elment */
ul#nav {
    display: block;
    /*position: absolute;*/
    list-style: none;
    padding: 0 2px 0 0;
    margin: 0 0 0 0;
    z-index: 5;
    top: 0px;
    right: 0px;
    text-align: center;
    display: block;
    /*background: url(../images/divider.gif) no-repeat right top;*/
}

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW {
    display: none;
    position: absolute;
    overflow: hidden;
    /*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
    padding: 0 0 px;
}

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
    /*border around submenu goes here*/
    border: 1px solid #778EFF;
}

/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1em;
}

    /* List items in main menu --[for non-javascript users this applies to submenus as well]  */
    #nav li {
        /*great place to use a divider image as a background*/
        float: left;
        list-style: none;
        position: relative;
        padding: 0 0 0 0;
        /*border: solid 0px #778EFF;*/
        border: .5px solid #333;
        /*border-top-width: 2px;
        border-bottom-width: 2px;
        border-right-width: 2px;*/
    }

    /* --------------------------[ The below is just for non-javscript users ]--------------------------*/

    #nav ul a, #nav ol a { /* Just submenu links*/
        border: none;
        width: 11em;
    }

    #nav li ul { /* second-level lists */
        position: absolute;
        width: 10em;
        margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #nav li ul { /* second-level lists */
        position: absolute;
        width: 10em;
        margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

        #nav li ul ul { /* third-and-above-level lists */
            margin: -1em 0 0 -1000em;
        }

    #nav li:hover ul ul, #nav li.sfhover ul ul {
        margin-left: -1000em;
    }

    #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
        margin-left: 0;
    }

    #nav li li:hover ul, #nav li li.sfhover ul {
        margin-left: 10em;
    }

    /* extra positioning rules for limited noscript keyboard accessibility */
    #nav li a:focus + ul {
        margin-left: 0;
    }

    #nav li li a:focus + ul {
        margin-left: 1010em;
    }

    #nav li li a:focus {
        margin-left: 1000em;
        width: 10em;
    }

    #nav li li li a:focus {
        margin-left: 2010em;
        width: 10em;
    }

    #nav li:hover a:focus, #nav li.sfhover a.sffocus {
        margin-left: 0;
    }

    #nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul {
        margin-left: 10em;
    }
