﻿/*SECTION DEFINES THE MAIN STRUCTURE OF THE MENU*/
.head {
    margin-top: 22px;
}

#wrapper-logo {
    float: left;
}
/*GENERAL STYLES*/

/* highlight blue*/
.highlight-blue {
    color: #4bacca;
    font-weight: bold;
}
/* last link in sub menu does not have border bottom*/
.lnk-sub-last {
    border-bottom: 0px solid #E2E2E2 !important;
}

/* remove default style from UL*/
.warpper-wa-menu ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
/* hide all child ul elements of the main ul, by default they are hidden*/

.warpper-wa-menu > ul > li > ul {
    position: absolute;
    display: none;
    /* IE7 issue dropdown position covers menu*/
    *top:98px;
}

/* align the top level li elements horizontal*/
.warpper-wa-menu > ul > li {
    display: inline-block;
    /*IE7 issues*/
    *display: inline;
    *zoom: 1;
}

.warpper-wa-menu > ul > li > span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    margin-left: 10px;
    background-position: 0 -71px;
}


/*add the dropdown indication arrows*/
.warpper-wa-menu > ul > li:hover > span {
    background-position: 0 -133px;
}

.arrow-down {
    background-position: 0 -71px !important;
}

.arrow-up {
    background-position: 0 -133px !important;
}

/*END SECTION DEFINES THE MAIN STRUCTURE OF THE MENU*/

#wrapper-welcom-cart {
    text-align: right;
    float: right;
      width:50%;
}

#wrapper-welcom-cart ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-right: 10px;
}

#wrapper-welcom-cart li {
    float: right;
    height: 20px;
    line-height: 20px;
    padding-right: 10px;
    margin-bottom: 10px;
}

#wrapper-welcom-cart li.last {
    padding-left: 10px;
    padding-right: 0px;
    border-left: 1px solid #DCDCDC;

}

#wrapper-welcom-cart li.last
{
     /*IE7 issue width 100% drops element left to new line*/
      *width:110px;
}

#wrapperwa-top-menu li.last {
    border-left: 0px;
}
 

/*WELCOME USER SECTION*/
#wrapper-welcome {
    text-align: right;
    /*width:100px;*/
    display:inline-block;
    float:left;
    width:auto;
    *width:200px;
}

#wrapper-welcome a {
    text-decoration: none;
    color: inherit;
}

#wrapper-welcome #spnUserName {
    font-weight: bold;
    clear: both;
    margin: auto;
    float: left;
    width: 100%;
    text-align: left;
}

/*CART SECTION*/
#wrapper-shoping-cart {
    float: right;
    text-align: right;
     white-space:nowrap;
}

#wrapper-shoping-cart .ShoppingCart_HasItems {
    cursor: pointer;
}

#wrapper-shoping-cart .ShoppingCart_NoItems {
    cursor: default;
}

#wrapper-shoping-cart #CartItemRow, #wrapper-shoping-cart .CartItemRowHasItems  {
    background-image: url("/UserControls/ProductPage/WAHeader/images/icon-shoppingcart.png");
    padding-left: 25px;
    background-position: left top;
    background-repeat: no-repeat;
}

/*TOP MENU SECTION*/
#wrapperwa-top-menu {
    float: right;
}

#wrapperwa-top-menu ul {
    float: right;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    margin-bottom: 8px;
}

#wrapperwa-top-menu ul li {
    list-style-type: none;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #dcdcdc;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

#wrapperwa-top-menu ul li.last, #wrapper-welcom-cart ul li.last {
    border-right: none;
}

#wrapperwa-top-menu ul li a {
    color: #4bacca;
    text-decoration: none;
}

#wrapperwa-top-menu ul li a:hover {
    text-decoration: underline;
}

.warpper-wa-menu > ul > li > span, #li-submenu-heading-home, #li-submenu-heading-bus, #li-submenu-heading-reseller, .warpper-wa-menu > ul > li > ul > li > ul > li > a, .arrow-down, .arrow-up, #LoggedinPerson span {
    background-image: url("/UserControls/ProductPage/WAHeader/images/sprite-menu-top.png");
}

/*SECTION STYLES THE MENU*/
.warpper-wa-menu {
    background-color: #424451;
    height: 40px;
    width: 100%;
    -webkit-border-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    border-radius: 4px;
    border-bottom-right-radius: 4px;
    float: left;
    
}

.warpper-wa-menu > ul > li {
    border-right: solid 1px #60626e;
    line-height: 40px;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    cursor: pointer;
     height:40px;
}

.warpper-wa-menu > ul > li > a {
    color: #e5e6eb;
    text-decoration: none;
    font-size: 16px;
         line-height:40px;
      display: inline-block;
       height:40px;
        margin-top:-2px;
}

/* hover state on the top li*/
.warpper-wa-menu > ul > li:hover {
    background-color: #1aa5e8;
    /*margin-top:-3px;
    padding-top:3px;*/
    border-right: 1px solid transparent !important;

}

/* first li on hover is round*/
.warpper-wa-menu > ul > li:first-child:hover {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.warpper-wa-menu > ul > li > ul {
  /* margin left this back to pull back inline with top ul, padding on li gives space*/
    width: 96%;
    border-top: 5px #1aa5e8 solid;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.34);
    -moz-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.34);
    -webkit-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.34);
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 20px;
    padding-bottom: 15px;
    -webkit-border-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: #FFFFFF;
    -moz-opacity: 0.97;
    -khtml-opacity: 0.97;
    opacity: 0.97;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=97);
}

/* Dropdown panels left 0 with class, login right 0*/
.dd-panel {
    left: 0px;
}

.warpper-wa-menu > ul > li > ul > li > ul {
    float: left;
    width: 45%;
    margin-right: 5%;
}

/* left side sub ul expanded*/
.warpper-wa-menu > ul > li > ul > li > ul:first-child {
    width: 45%;
    margin-right: 5%;
}
/* right side sub ul expanded*/
.warpper-wa-menu > ul > li > ul > li > ul:last-child {
    width: 48%;
    margin-left: 2%;
    margin-right: 0%;
}

/* sub ul styling, dropdown panel*/
.warpper-wa-menu > ul > li > ul li {
    width: auto;
    font-size: 14px;
}

/* sub heading styling*/
.li-submenu-heading {
    height: 40px;
    line-height: 40px;
    background-color: #aaaaaa;
    -webkit-border-radius: 5px;
    moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 18px !important;
    color: #FFFFFF;
    text-align: left;
    text-indent: 50px;
}


/* sub menu heading icons*/
#li-submenu-heading-home {
    background-repeat: no-repeat;
    background-position: 8px -396px;
}

#li-submenu-heading-bus {
    background-repeat: no-repeat;
    background-position: 12px -475px;
}

#li-submenu-heading-reseller {
    background-repeat: no-repeat;
    background-position: 12px -556px;
}

/* links under the sub header*/

.warpper-wa-menu > ul > li > ul > li > ul > li > a {
    color: #42454f;
    text-decoration: none;
    line-height: 18px !important;
    display: block;
    font-weight: bold;
    border-bottom: 1px solid #e2e2e2;
    padding-top: 14px;
    padding-bottom: 16px;
    background-repeat: no-repeat;
    background-position: 0 -247px;
    width: 88%;
    margin: auto;
    margin-left: 5%;
    padding-left: 7%;
}

.warpper-wa-menu > ul > li > ul > li > ul > li > a:hover {
    background-position: 0 -317px;
}

/* no border bottom on last a items in the list*/
.warpper-wa-menu > ul > li > ul > li > ul > li:last-child a {
    border-bottom: none !important;
}

.warpper-wa-menu > ul > li > ul li > a > span {
    display: block;
    font-weight: normal;
    color: #6e6f71;
}

/* simple menu, bottom sub menu*/

.warpper-wa-menu > ul > li > ul > li > ul > li > span , .warpper-wa-menu > ul > li > ul > li > ul > li > ul {
    padding-left: 5%;
}

.warpper-wa-menu > ul > li > ul > li > ul > li > ul {
    list-style-type: disc;
    list-style-position: inside;
    color: #4bacca;
}

/* the heading*/
.warpper-wa-menu > ul > li > ul > li > ul > li  > span {
    display: block;
    color: #42454f;
    font-weight: bold;
    line-height: 30px;
    line-height: 30px;
    margin-top: 15px;
}

.warpper-wa-menu > ul > li > ul > li > ul > li > ul > li {
    color: #4bacca;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    line-height: 16px;
}

/*the link*/
.warpper-wa-menu > ul > li > ul > li > ul > li > ul > li > a {
    color: #4bacca;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}

.warpper-wa-menu > ul > li > ul > li > ul > li > ul > li > a:hover {
    text-decoration: underline;
}

/*LOGIN DROPDOWN SECTION*/
#SignInAreaShow, #lnksMyAccount {
    float: right;
    border: none;
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    margin-right: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #1aa6e8;
 /* Old browsers */
    background: -moz-linear-gradient(top,  #1aa6e8 0%, #179bdf 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1aa6e8), color-stop(100%,#179bdf));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1aa6e8 0%,#179bdf 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1aa6e8 0%,#179bdf 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1aa6e8 0%,#179bdf 100%);
 /* IE10+ */
    background: linear-gradient(to bottom,  #1aa6e8 0%,#179bdf 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1aa6e8', endColorstr='#179bdf',GradientType=0 );
 /* IE6-9 */
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.13);
    border-right: none !important;
    margin-top: 5px;
    height: 30px;
    margin-top: 5px;
    line-height: 30px;
    color: #FFFFFF;
    font-size: 14px;
}

#SignInAreaShow:hover, #lnksMyAccount:hover {
    padding-top: 0px !important;
    background: #179bdf;
 /* Old browsers */
    background: -moz-linear-gradient(top,  #179bdf 0%, #1aa6e8 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#179bdf), color-stop(100%,#1aa6e8));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #179bdf 0%,#1aa6e8 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #179bdf 0%,#1aa6e8 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #179bdf 0%,#1aa6e8 100%);
 /* IE10+ */
    background: linear-gradient(to bottom,  #179bdf 0%,#1aa6e8 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#179bdf', endColorstr='#1aa6e8',GradientType=0 );
 /* IE6-9 */
}

/* login dropdown /my account dropdown*/
#lnksMyAccount > ul {
    margin-top: 5px !important;
    border-top: 0px !important;
    background-color: #555555;
    width: 220px;
    border: solid 1px #424240;
    box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.08);
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 5px !important;
    padding-bottom: 15px;
    -webkit-border-radius: 4px;
    -webkit-border-top-left-radius: 0 !important;
    -moz-border-radius: 4px;
    -moz-border-radius-topleft: 0 !important;
    border-radius: 4px;
    border-top-left-radius: 0 !important;
    right: 0px;
}

#SignInAreaShow > ul {
    margin-top: 5px !important;
    border-top: 0px !important;
    background-color: #555555;
    width: 220px;
    border: solid 1px #424240;
    box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 0px 6px 7px rgba(0, 0, 0, 0.08);
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 20px !important;
    padding-bottom: 0px;
    -webkit-border-radius: 4px;
    -webkit-border-top-left-radius: 0 !important;
    -moz-border-radius: 4px;
    -moz-border-radius-topleft: 0 !important;
    border-radius: 4px;
    border-top-left-radius: 0 !important;
    right: 0px;
    /* IE7 dropdown is lower than new browsers*/
    *margin-top:0px !important;
}


    
    /* MY ACCOUNT DROPDOWN*/
#lnksMyAccount ul {
    width: 160px;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px !important;
    padding-bottom: 0px;
}

#lnksMyAccount ul li {
    margin: 0;
    padding: 0 10px;
}

#lnksMyAccount ul li a {
    color: #FFFFFF;
    text-decoration: none;
    padding-left: 15px;
    background-image: url("/UserControls/ProductPage/WAHeader/images/arrow-icon.png");
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 14px;
}

#lnksMyAccount ul li a:hover {
    text-decoration: underline;
}

#lnksMyAccount ul #SignOutLink {
    border-top: solid 1px #717171;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

#lnksMyAccount ul #SignOutLink:hover {
    background: #1aa6e8;
 /* Old browsers */
    background: -moz-linear-gradient(top,  #1aa6e8 0%, #179bdf 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1aa6e8), color-stop(100%,#179bdf));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1aa6e8 0%,#179bdf 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1aa6e8 0%,#179bdf 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1aa6e8 0%,#179bdf 100%);
 /* IE10+ */
    background: linear-gradient(to bottom,  #1aa6e8 0%,#179bdf 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1aa6e8', endColorstr='#179bdf',GradientType=0 );
 /* IE6-9 */
    border-top: 1px solid transparent;
}

#lnksMyAccount ul #SignOutLink a {
    background-image: none;
    text-decoration: none !important;
}
    
    
    /*CONTENT INSIDE LOGIN DROPDOWN, MOVE THIS INTO IFRAME CSS*/ 
#login_ajaxloader {
    background-image: url("/UserControls/ProductPage/WAHeader/images/ajax-loader.gif");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 31px;
    margin-left: 129px;
    margin-top: -43px;
    position: absolute;
    width: 83px;
    font-weight: bold;
}

#login_errormsg {
    color: red;
    font-size: 12px;
    line-height: 16px;
    padding: 0px 0 5px;
    text-align: left;
}

#login_errormsg p {
    margin: 0px !important;
}

#login_errormsg span {
    color: #FFFFFF;
    background-image: none !important;
}

#login_errormsg span:hover {
    text-decoration: underline;
}

.LostSign a:hover {
    text-decoration: underline;
}

#SignButtondiv label {
    margin-bottom: 0px !important;
}

.LostSign {
}

.RememberMeWrapper {
    margin-bottom: 8px;
}

.LostSign a {
    font-size: 12px;
}

/* entity login dropdown*/
#personLoggedIn {
}

#CCSMenu {
    margin-top: 22px;
}

.CCSArea {
}

#personLoggedIn
{
     position:relative;
      background-color:Green;
 }

#ddlEntity {
    background-color: #FFFFFF;
    border-bottom: 1px solid #D2D2D2;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    min-width: 160px;
    position: absolute;
    text-align: left;
    position: absolute;
    padding: 5px !important;
    border-top: none;
    margin-left: -5px;
    z-index: 5000;
    display: none;
     left:0;
}

#ddlEntity li {
    margin-left: 10px;
    margin-right: 0 !important;
    display: block;
    clear: both;
    background: url("/Images/Global/sprite-wa-gen.gif") no-repeat scroll 0 -269px transparent;
    color: #0F6D8D;
    padding-left: 18px;
    float: left;
     height:auto;
     width:auto;
     white-space:nowrap;
       
}

#ddlEntity li:hover {
    background-position: 0 -208px;
    color: #4AABCB;
}

#ddlEntityLogin {
    list-style-type: none;
}

#ddlEntityLogin li {
    clear: both;
}

#ddlEntityLogin > li {
    float: left;
    display: block;
    background-color: Blue;
    height: auto !important;
    padding: 0px !important;
}

#ddlEntityLogin > li > a {
    background-color: #FFFFFF !IMPORTANT;
    display: block;
    float: left;
    width: auto;
    background-color: #FFFFFF;
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
    border: solid 1px #D2D2D2;
    border-bottom: 1px solid transparent;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#ddlEntityLogin > li > a > span {
    padding-right: 0px !important;
}

.MyAccountArea li {
    text-align: left;
    min-width: 180px;
}

.tab-white > a {
    display: block;
}


/* difrent loged in veiws*/
#clientCodeLoggedIn {
    float: right;
    margin-left: 5px;
}

#SignInAreaUserDetails {
    float: right;
    padding-right: 5px;

}

#wrapper-welcome > span {
    float: right;
}

#SignInAreaUserDetails span {
    margin-left: 5px;
    margin-top: 2px;
}

#LoggedinPerson {
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 5px;
}

#LoggedinPerson span {
    background-position: 0 -71px;
    background-repeat: no-repeat;
    display: inline-block;
    float: right;
    height: 12px;
    margin-left: 5px;
    margin-top: 3px;
    width: 12px;
    *display:none;
}


.tab-white .MyAccountArea {
    background-color: #FFFFFF !important;
}
/* network status*/
.lnkNStatusOk,.lnkNStatusRed, .lnkNStatusGrey {
    background-image: url("/Images/Global/sprite-wa-gen.gif");
    padding-right: 26px !important;
    padding-left: 0px !important;
    background-repeat: no-repeat;
}

.lnkNStatusOk {
    background-position: 91px -149px;
}

.lnkNStatusRed {
    background-position: 91px -116px;
}

.lnkNStatusGrey {
    background-position: 91px -82px;
}