/*
------------------------------------------------------------
    Global Navigation - Responsive Web Design
    Added by: John Ryan Acoba
    Senior GUI Designer

    1. Global navigation style
    2. Global navigation style for Mobile Devices

    Change logs:
    08/29/2013 - Fix for two careers links in the pageslide menu. Fixes for about-us submenu.
------------------------------------------------------------
*/

/*
------------------------------
1. Global navigation style
------------------------------
*/

/* Eldie's CSS added */
body{margin: 0;
    padding: 0;
    width: 100%;}

#lawEU{ clear: both !important; }

#pageslide ul#globalnav{ margin: 0 !important; padding: 0 !important; }


#pageslide ul#globalnav li.submenu ul {
    margin: 0 !important;
    padding: 0 !important;
}
/* END of Eldie's CSS added */

#global-nav {background: #181817; min-width:1023px; height: 55px; margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetia, Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; line-height: 15px}

#global-nav:not(.non-responsive) {width: 100%; min-width: 0}

*+html #global-nav {min-width: 980px !important}
#global-nav {min-width: 980px\9; height: 55px\9; width:100%\9}
#global-nav ul#globalnav li.submenu ul li.tablet-only {display:none !important;}
/*#global-nav {min-width: 980px\9; height: 55px\9; overflow: hidden\9; width:100%\9;  }*/

#global-nav ul#globalnav {margin: 0 !important; padding: 0 !important; height: 55px !important;}
#global-nav ul#globalnav:after {display: block; clear: both; height: 0; visibility: hidden; content: "\0020"}
#global-nav ul#globalnav li {display: inline !important; list-style-type: none !important; float: left !important; padding: 0 1.2% !important}
#global-nav ul#globalnav li a {color: #969492 !important; text-decoration: none !important; float: left !important; padding: 20px 0 !important; font-size: 12px; font-weight: bold !important}
#global-nav ul#globalnav li a:hover {color: #fff !important}
#global-nav ul#globalnav li.submenu {height: 55px; position: relative}
#global-nav ul#globalnav li.submenu a {background: transparent url('../../images/global_nav/glonav_sprite.png') 60px -183px no-repeat !important; padding: 20px 21px 0 0 !important; height: auto !important; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none;}
#global-nav ul#globalnav li.submenu a:hover {background-position: 60px -242px !important; color: #fff; display:inline-block; overflow:hidden}
#global-nav ul#globalnav li.submenu ul {position: absolute !important; width: 200px !important; top: 4.6em !important; left: -999em !important; z-index: 999999999 !important; padding-left: 0; cursor:pointer; overflow: hidden !important; clear: both !important}
#global-nav ul#globalnav li.submenu ul li {display: block !important; list-style-type: none !important; float: none !important; clear: both !important; background: transparent url('../../images/global_nav/dropdown-back.png') 0 0 repeat !important; margin-bottom: 1px !important; padding: 0 !important; overflow: hidden !important; height: 40px}
#global-nav ul#globalnav li.submenu ul li a {background: none !important; padding: 15px 10px !important; float: left !important; width: 100% !important}
#global-nav ul#globalnav li.submenu:hover ul {left: auto !important}
#global-nav ul#globalnav li.location {background: transparent url(../../images/global_nav/glonav_sprite.png) 4px -354px no-repeat !important; float: right !important; padding: 0 !important; margin-right: 1.3% !important}
#global-nav ul#globalnav li.location:hover {background-position: 4px -428px !important}

#global-nav ul#globalnav li.location a {text-indent: 27px !important; display: inline}
#global-nav ul#globalnav > li:first-child > a {background: transparent url(../../images/global_nav/glonav_sprite.png) 0 -588px no-repeat !important; text-indent: -999em !important; width: 157px !important; height: 33px !important; margin: 12px 0 0 0 !important; padding: 0 !important; float: left !important}

#global-nav > .cuplogo {display: none; text-indent: -999em}
#global-nav > div > h1 {margin: 0; width: auto}

.content_scroller {position: fixed; cursor: default}


/*
---------------------------------------------------
2. Global navigation style for Mobile Devices
---------------------------------------------------
*/

#pageslide {overflow: auto;display: none; position: fixed !important; top: 0; z-index: 999999; background: #31302F; width: 280px; height: 100%; padding: 0; font-family: "Helvetica Neue", Helvetia, Arial, Helvetica, sans-serif !important; font-size: 13px !important; color: #fff !important}
#pageslide ul#globalnav li {padding: 0 !important}
#pageslide ul#globalnav > li:first-child {display: none !important}
#pageslide ul#globalnav li a {border-bottom: 1px solid #42403D !important; color: #fff !important; text-decoration: none !important; display: block !important; clear: both !important; padding: 14px 15px !important; overflow: hidden !important;}
#pageslide ul#globalnav li a:hover {color: #969492 !important}
#pageslide ul#globalnav li.submenu {border-bottom: none !important; padding: 0 !important}
#pageslide ul#globalnav li.submenu ul {display: block !important; clear: both !important}
#pageslide ul#globalnav li.submenu ul li a {background: #2A2927 !important; color: #969492 !important; text-indent: 20px !important;}

#global-nav a.open {display: none !important; background: transparent url(../../images/global_nav/glonav_sprite.png) 8px 11px no-repeat !important; width: 34px !important; height: 40px !important; float: left !important; text-indent: -999em !important}
#global-nav a.open:hover {background-position: 8px -60px !important}
#global-nav a.open.globalnav_close {background-position: 10px -131px !important}

#global-nav .location-for-smartphones {display: none; float: right; border-left: 1px solid #383838}
#global-nav .location-for-smartphones a {position: absolute; top: 0; right: 0; background: transparent url('../../images/global_nav/glonav_sprite.png') 10px -362px no-repeat !important; width: 43px !important; height: 55px !important; text-indent: -999em !important; float: left !important}
#global-nav .location-for-smartphones a:hover {background-position: 10px -436px !important;}

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}


@media only screen and (max-width: 1024px) {
    #global-nav:not(.non-responsive) {height: 55px}

    #global-nav:not(.non-responsive) ul#globalnav li.hide-for-mobile {display: none !important}

    #global-nav:not(.non-responsive) .location-for-smartphones {display: inline; border-left: none; width: 45px}
    #global-nav:not(.non-responsive) .location-for-smartphones a {background-position: 10px -356px !important; width: 43px !important}
    #global-nav:not(.non-responsive) .location-for-smartphones a:hover {background-position: 10px -430px !important}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #global-nav:not(.non-responsive) ul#globalnav li.submenu ul li.tablet-only {display: block !important;}
}

@media only screen and (max-width: 980px) {
    #global-nav:not(.non-responsive) ul#globalnav li {padding: 0 0.9% !important}
}

@media only screen and (max-width: 836px) {
    #global-nav:not(.non-responsive) ul#globalnav li.submenu:hover ul {left: -80px !important}
}

@media only screen and (max-width: 768px) {
    #global-nav:not(.non-responsive) ul#globalnav li {display: inline !important; float: left !important; list-style-type: none !important}

    #global-nav:not(.non-responsive) .location-for-smartphones a {border-left: 1px solid #5d5d5d; height: 45px !important}
}

@media only screen and (max-width: 767px) {
    #global-nav:not(.non-responsive) {height: 45px;}

    #global-nav:not(.non-responsive) ul#globalnav {display: none;}

    #pageslide ul#globalnav li a {font-weight: normal !important}

    #pageslide ul#globalnav li.submenu ul li.tablet-only {display: none !important}

    #global-nav:not(.non-responsive) > .cuplogo {display: inline}
    #global-nav:not(.non-responsive) > .cuplogo > a {background: transparent url(../../images/global_nav/glonav_sprite.png) 0 -518px no-repeat !important; width: 144px !important; height: 30px !important; margin: 8px 0 0 0 !important; float: left !important}

    #global-nav:not(.non-responsive) a.open {display: block !important;}

    #global-nav:not(.non-responsive) .location-for-smartphones {display: inline; border-left: 1px solid #383838}
    #global-nav:not(.non-responsive) .location-for-smartphones a {background-position: 10px -362px !important; background-color: #181817 !important;}
    #global-nav:not(.non-responsive) .location-for-smartphones a:hover {background-position: 10px -436px !important}

    #global-nav:not(.non-responsive) ul#globalnav li.submenu {
        padding: 0 0 0 7px !important;
        width: 80px;
    }
}



*+html #global-nav ul#globalnav li.submenu ul {
    margin-left: -5px;
}

*+html #global-nav ul#globalnav li.submenu ul li{
    margin-bottom: -2px !important;
}

*+html #global-nav {
    height: 55px;
}

/*.contentFixed {
    cursor: default;
    position: fixed;
    width: 100%;
}*/

/*@media only screen and (min-device-width: 768px) and (max-device-width:1024px){
    #global-nav ul#globalnav li {
    display: inline !important;
    float: left !important;
    list-style-type: none !important;
    padding: 0 0.9% !important;
    }

    #global-nav ul#globalnav li.about-hfm{
    display: none;
    }
}*/

/*@media (max-device-width: 768px) and (orientation: portrait) {
    #global-nav ul#globalnav li {
    display: inline !important;
    float: left !important;
    list-style-type: none !important;
    padding: 0 0.7% !important;
    }
}*/

/* IE 9 HACK */
#pageslide ul#globalnav li {
    padding: 0px !important;
    padding: 0px\9;
    /*margin-top:-15px\9;*/
}

/* S3 MEDIA QUERY */
@media only screen and (-webkit-device-pixel-ratio: 2) {
    #pageslide {
        background: none repeat scroll 0 0 #31302F;
        color: #FFFFFF !important;
        display: none;
        font-family: "Helvetica Neue",Helvetia,Arial,Helvetica,sans-serif !important;
        font-size: 13px !important;
        height: 100%;
        overflow: auto;
        padding: 0;
        position: fixed !important;
        top: 0;
        width: 280px;
        z-index: 999999;
    }
}

/* IPAD 4 */
/*@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    #global-nav ul#globalnav li {
    display: inline !important;
    float: left !important;
    list-style-type: none !important;
    padding: 0 0.6% !important;
}
} */

.clear{
    clear: both;
}

/*@media only screen and (max-device-width: 480px) and (orientation: landscape){
    #global-nav {
    height: 45px;
    }
}

@media only screen and (max-device-width: 320px) and (orientation: portrait){
    #global-nav {
    height: 45px;
    }
}*/

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){

    #global-nav:not(.non-responsive) {background: #181817; margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetia, Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: bold !important; line-height: 15px;width: 100%;height: 45px;}

    #global-nav:not(.non-responsive) ul#globalnav {display: none;}

    #global-nav:not(.non-responsive) a.open {display: block !important;}

    #global-nav:not(.non-responsive) .location-for-smartphones {display: inline; border-left: 1px solid #383838}
    #global-nav:not(.non-responsive) .location-for-smartphones a {background-position: 10px -362px !important; background-color: #181817 !important;}
    #global-nav:not(.non-responsive) .location-for-smartphones a:hover {background-position: 10px -436px !important}

    #global-nav:not(.non-responsive) ul#globalnav li a {
    color: #969492 !important;
    float: left !important;
    padding: 20px -25px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    }

    #global-nav:not(.non-responsive) ul#globalnav {
    float: left;
    width: 70%;
    visibility: visible;
    }

    #global-nav:not(.non-responsive) ul#globalnav li.submenu {
        padding: 0 0 0 7px !important;
        width: 80px;
    }

}

@media only screen and (min-device-width: 320px) and (max-device-width: 720px){
    #global-nav:not(.non-responsive) ul#globalnav li.submenu {
        display: none !important;
    }
}