.main {

    height: 87px;
    width: 1280px;
    margin: 0 auto;
}
#logo {
    position: absolute;
    left: 148px;
    top: 0;
    }
.navContainer {
     width: 763px;
    margin-left: 377px;
}
#sub .navContainer {
/*    margin-top: -14px;*/
}

div.noseBleed {
    height: 30px;
    width: 763px;
    margin-top: 10px;
    margin-bottom: 7px;
    background: url(../images/spriteNosebleed_background.png) no-repeat 0 0;
}
a.save {
    position: relative;
    display: block;
    cursor: pointer;
    top: -4px;
    width: 174px;
    height: 27px;
    margin-left: 578px;
    background: url(../images/save_background.png) no-repeat 0 0;
}
a.save:hover {background-position: 0 -27px;}


ul.mainNav {
    height: 40px;
    width: 763px;

}
ul.mainNav>li {
    float: left;
    height: 40px;
    color: #4f758b;
    cursor: pointer;
    text-indent: -90000px;
    overflow: hidden;
    background: url(../images/mainNavsprite.png) no-repeat 0 0;
}
ul.mainNav>li.navDiscover, ul.mainNav>li.navDiscoverHot { width: 197px;}
ul.mainNav>li.navStarted, ul.mainNav>li.navStartedHot { width: 187px; background-position: -376px 0;}
ul.mainNav>li.navTaking, ul.mainNav>li.navTakingHot { width: 179px; background-position: -197px 0;}
ul.mainNav>li.navSupport, ul.mainNav>li.navSupportHot { width: 200px; background-position: -563px 0;}

ul.mainNav>li.navDiscover:hover, ul.mainNav>li.navDiscoverHot:hover { background-position: 0 -80px;}
ul.mainNav>li.navStarted:hover, ul.mainNav>li.navStartedHot:hover { background-position: -376px -80px;}
ul.mainNav>li.navTaking:hover, ul.mainNav>li.navnavTakingHot:hover { background-position: -197px -80px;}
ul.mainNav>li.navSupport:hover, ul.mainNav>li.navSupportHot:hover { background-position: -563px -80px;}

ul.mainNav>li.navDiscoverHot {background-position: 0 -80px;}
ul.mainNav>li.navStartedHot {background-position: -376px -80px;}
ul.mainNav>li.navTakingHot {background-position: -197px -80px;}
ul.mainNav>li.navSupportHot {background-position: -563px -80px;}

ul.mainNav>li.navDiscoverOff {background-position: 0 -40px;}
ul.mainNav>li.navStartedOff {background-position: -376px -40px;}
ul.mainNav>li.navTakingOff {background-position: -197px -40px;}
ul.mainNav>li.navSupportOff {background-position: -563px -40px;}

a.notalink{
    cursor: pointer;
}


a.navDiscover {
    width: 201px;
    height: 40px;
    display: block;
}
a.navStarted {
    width: 201px;
    height: 187px;
    display: block;
}
a.navTaking {
    width: 178px;
    height: 187px;
    display: block;
}

ul.mainNav li.gap {
    display: none;
    width: 30px;
    padding: 0px;
    text-align: center;
    padding-top: 13px;
    color: #797979;
    font-size: 12px;
    font-weight: 200;
    background: none;
    text-indent: 0px;
}
ul.mainNav li a {
    color: #ebebeb;
    display: block;
    font-size: 12px;
    font-weight: 400;
    position: relative;
    height: 100%
}
ul.mainNav li.gap:hover {
    background-color:rgba(255,255,255,0.1);
    cursor: default;
    color: #4f758b;

}
.navContainer>ul>li.last {
    width: 10%;
    max-width: 20px;

}
ul.mainNav>li>ul {
    background-color: #3564b1;
    padding: 0;
    position: absolute;
    top: 87px;
    text-align: left;
    display: none;
    left: 150px;
    width: 1129px;
}

ul.mainNav>li>ul li, ul.subnav>li {
    float:left;
}
ul.mainNav>li>ul a, ul.subnav>li a {
    display: block;
    height: 60px;
    color: #ffffff;
    padding: 0px;
    text-indent: -90000px;
    overflow: hidden;
}
 ul.mainNav>li.mainDrop1>ul>li>a,  ul.subNav01>li a
     { background:url(../images/spriteSub_1.png) no-repeat 0 0;}
 ul.mainNav>li.mainDrop2>ul>li>a,  ul.subNav02>li a
     { background:url(../images/spriteSub_2.png) no-repeat 0 0;}
 ul.mainNav>li.mainDrop3>ul>li>a,  ul.subNav03>li a
     { background:url(../images/spriteSub_3.png) no-repeat 0 0;}
 ul.mainNav>li.mainDrop4>ul>li>a,  ul.subNav04>li a
     { background:url(../images/spriteSub_4.png) no-repeat 0 0;}


ul.subnav {
    margin-top: 0px;
    height: 60px;
    background-color: #3564b1;
}
ul.subNav01 li.first{
    padding-left: 150px;
}
ul.subNav02 li.first{
    padding-left: 600px;
}
ul.subNav03 li.first{
    padding-left: 415px;
}
ul.subNav04 li.first{
    padding-left: 854px;
}


/* Group 1*/
/* ------ */
ul.mainNav>li>ul>li.sDifference a, ul.subNav01>li.sDifference a
    { width: 213px; background-position: 0 0;}
ul.mainNav>li>ul>li.sResults a, ul.subNav01>li.sResults a
    { width: 203px; background-position: -213px 0;}
ul.mainNav>li>ul>li.sStories a, ul.subNav01>li.sStories a
    { width: 197px; background-position: -415px 0;}
ul.mainNav>li>ul>li.sSafety a, ul.subNav01>li.sSafety a
    { width: 190px; background-position: -611px 0;}
ul.mainNav>li>ul>li.sRequest a, ul.subNav01>li.sRequest a
    { width: 197px; background-position: -800px 0;}

ul.mainNav>li>ul>li.sDifference a:hover, ul.subNav01>li.sDifference a:hover
    { background-position: 0 -60px;}
ul.mainNav>li>ul>li.sResults a:hover, ul.subNav01>li.sResults a:hover
    {background-position: -213px -60px;}
ul.mainNav>li>ul>li.sStories a:hover, ul.subNav01>li.sStories a:hover
    {background-position: -415px -60px;}
ul.mainNav>li>ul>li.sSafety a:hover, ul.subNav01>li.sSafety a:hover
    {background-position: -611px -60px;}
ul.mainNav>li>ul>li.sRequest a:hover, ul.subNav01>li.sRequest a:hover
    {background-position: -800px -60px;}


ul.subNav01>li.sDifference a#hot
    {background-position: 0 -60px;}
ul.subNav01>li.sResults a#hot
    {background-position: -213px -60px;}
ul.subNav01>li.sStories a#hot
    {background-position: -415px -60px;}
ul.subNav01>li.sSafety a#hot
    {background-position: -599px -60px;}
ul.subNav01>li.sRequest a#hot
    {background-position: -800px -60px;}

/* --------- */
/*End Group 1*/


/* Group 2*/
/* ------ */
ul.mainNav>li>ul>li.sEmpty1 {width: 450px; height:60px;}
ul.mainNav>li>ul>li.sEnd2 {width: 23px; height:60px;}

ul.mainNav>li>ul>li.sStart a, ul.subNav02>li.sStart a
    { width: 288px; background-position: -558px 0;}
ul.mainNav>li>ul>li.sFind a, ul.subNav02>li.sFind a
    { width: 216px; background-position: -343px 0;}
ul.mainNav>li>ul>li.sGuide a, ul.subNav02>li.sGuide a
    { width: 288px; background-position: -558px 0;}
ul.mainNav>li>ul>li.sCopay a, ul.subNav02>li.sCopay a
    { width: 152px; background-position: -845px 0;}


ul.mainNav>li>ul>li.sStart a:hover, ul.subNav02>li.sStart a:hover
    {background-position: -558px -60px;}
ul.mainNav>li>ul>li.sFind a:hover, ul.subNav02>li.sFind a:hover
    {background-position: -343px -60px;}
ul.mainNav>li>ul>li.sGuide a:hover, ul.subNav02>li.sGuide a:hover
    {background-position: -558px -60px;}
ul.mainNav>li>ul>li.sCopay a:hover, ul.subNav02>li.sCopay a:hover
    {background-position: -845px -60px;}

ul.subNav02>li.sStart a#hot
    {background-position: -558px -60px;}


ul.subNav02 {
    left: 440px;
}

/* --------- */
/*End Group 2*/


/* Group 3*/
/* ------ */
ul.mainNav>li>ul>li.sEmpty2 {width: 265px; height:60px;}

ul.mainNav>li>ul>li.sTreat a, ul.subNav03>li.sTreat a
    { width: 233px; background-position: -537px 0;}
ul.mainNav>li>ul>li.sEffects a, ul.subNav03>li.sEffects a
    { width: 160px; background-position: -770px 0;}
ul.mainNav>li>ul>li.sFAQ1 a, ul.subNav03>li.sFAQ1 a
    { width: 67px; background-position: -929px 0;}

ul.mainNav>li>ul>li.sTreat a:hover, ul.subNav03>li.sTreat a:hover
    {background-position: -537px -60px;}
ul.mainNav>li>ul>li.sEffects a:hover, ul.subNav03>li.sEffects a:hover
    {background-position: -770px -60px;}
ul.mainNav>li>ul>li.sFAQ1 a:hover, ul.subNav03>li.sFAQ1 a:hover
    {background-position: -929px -60px;}

ul.subNav03>li.sTreat a#hot
    {background-position: -537px -60px;}
ul.subNav03>li.sEffects a#hot
    {background-position: -770px -60px;}


/* --------- */
/*End Group 3*/

/* Group 4*/
/* ------ */

ul.mainNav>li>ul>li.sEmpty4 {width: 704px; height:60px;}

ul.mainNav>li>ul>li.sSupport a, ul.subNav04>li.sSupport a
    { width: 135px; background-position: -713px 0;}
ul.mainNav>li>ul>li.sCopay a, ul.subNav04>li.sCopay a
    { width: 150px; background-position: -847px 0;}

ul.mainNav>li>ul>li.sSupport a:hover, ul.subNav04>li.sSupport a:hover
    {background-position: -713px -60px;}
ul.mainNav>li>ul>li.sCopay a:hover, ul.subNav04>li.sCopay a:hover
    {background-position: -847px -60px;}

ul.subNav04>li.sSupport a#hot
    {background-position: -713px -60px;}
ul.subNav04>li.sCopay a#hot
    {background-position: -847px -60px;}


/* --------- */
/*End Group 4*/




/* Media Queries */
/*
@media screen and (max-width: 1020px) {
    ul.mainNav{
       display: none;
    }
}
*/

/* Media Queries */
@media screen and (max-width: 1100px) {
/*
    ul.noseBleed {
    padding-left: 263px;
    padding-top: 17px;
    }
    ul.mainNav {
    padding-left: 253px;
    }
*/

}

@media only screen and (max-width: 959px) and (min-width: 768px){
    ul.mainNav {
        margin-top: 40px;
    }
    #topnav {
        height: 127px;
        -webkit-transition: max-height 0.8s;
       -moz-transition: max-height 0.8s;
       transition: max-height 0.8s;
}