/* HOMEPAGE HEADER STYLES */
@import "/browse/static/ri/css/fontface.css";

.navbar {
    border: 0;
    margin-bottom: 0;
} 
.navbar-default {
    background-color: #fff;
    border-color: 0 none;
}
.navbar-header {
    float: none;
}
.top-nav {
    display: table;
    padding: 0px;
    text-align: right;
}
.top-nav ul.btn-links {
    float: right;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.top-nav .btn-links li {
    margin: 0 0 0 5px;
    float: left;
}
.top-nav .standard-links, .top-nav .btn-links {
    /* float: left; */
}
.top-nav .btn-links a {
    background-color: #00629b !important;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #fff;
    display: inline-block;
    padding: 13px 8px 6px;
    font-size: 0.75em;
    text-decoration: none;
}
.top-nav .search-link, .top-nav a.clickSearch {
    background: url("/browse/static/images/search-icon-white.png") no-repeat scroll center 15px;
    display: inline-block;
    font-size: 0.75em;
    height: 36px;
    text-decoration: none;
    width: 30px;
}
.top-nav .search-link-li {
    position: relative;
}
.top-nav .search input {
    border: none;
    border-radius: 2px;
    color: #666666;
    font-size: 0.75em;
    height: 37px;
    vertical-align: top;
    width: 0;
    transition: all ease-in 0.5s;
}
.top-nav .search.slide input {
    border: 1px solid #ccc;
    width: 120px;
}
.main-header {
    min-height: 70px;
}
.main-nav-wrapper {
    background: none repeat scroll 0 0 #52575d;
    color: #fff;
    min-height: 1px;
}
.main-nav-wrapper .container {
    position: relative;
}
.login.best-offer {
    background: #fbb12c url(/browse/static/HomePage_Jan-15/images/bg-top-login-offer.jpg) no-repeat left top;
    border-bottom: 0 none;
    border-top-right-radius: 8px;
    color: #fff;
    font: 14px/25px "Open Sans",arial,sans-serif;
    position: absolute;
    right: 0;
    text-align: center;
    top: -23px;
    width: 160px;
}
.login.best-offer p {
    margin: 0;
} 
.best-offer p, .alt-login.alt-login-title p {
    color: #fff;
    font-family: "Open Sans Bold",Arial,sans-serif;
    font-size: 1em;
    text-shadow: 0 0.11em 0.05em #404243;
}
.collapse.navbar-collapse.main-nav {
    float: left;
    padding: 0;
}
#customer-localization-form {
    background-color: #fdaa18 !important;
    float: right;
    height: 50px;
    max-width: 365px;
    padding-top: 10px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 110;
}
#customer-localization-form .error.bubble {
    padding: 2px 10px;
    font-weight: 700;
}
#customer-localization-form .no-gutters > div {
    padding: 0 3px;
}
#customer-localization-form input {
    border: 1px solid #7f888f;
    border-radius: 3px;
    color: #666666;
    font-size: 0.75em;
    padding: 5px 8px;
    border: none;
    width: 100%;
}
#customer-localization-form .col-xs-3 {
    max-width: 80px;
}
.alt-login .info-link, .login .info-link {
    background: url(/browse/static/HomePage_Jan-15/images/bg-info-link-header-login.jpg) no-repeat 0 0;
    color: #686f75;
    display: inline-block;
    font-family: "Open Sans Bold",Arial,sans-serif;
    font-size: 0.938em;
    font-weight: normal;
    height: 19px;
    margin: 10px 1px 0 0;
    padding: 0;
    position: relative;
    text-indent: -99999px;
    width: 19px;
}
.main-nav .login-btn, .main-nav .login-btn:hover {
    background: linear-gradient(to bottom, rgba(143, 187, 218, 1) 0%, rgba(30, 120, 182, 1) 1%, rgba(35, 134, 189, 1) 29%, rgba(45, 164, 205, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
}
#error-msg-box  {
    background: none repeat scroll 0 0 #fdaa18;
    top: 50px;
    color: red;
    display: block;
    position: absolute;
    text-align: left;
    width: 100%;
    z-index: 120;
}
.main-nav li {
    background: none repeat scroll 0 0 #52565c;
    border-right: 1px solid #fff;
    color: #fff;
}
.header-content li {
    float: left;
}
.main-nav span {
    padding-bottom: 13px;
    padding-top: 17px;
}
.main-nav .main-links li:first-child a {
    background: none !important;
}
.main-nav a, .main-nav button {
    font-family: "Open Sans Bold",Arial,sans-serif;
    font-weight: normal;
    color: #fff;
}
.navbar-nav {
    margin: 0 0 0 -10px;
}
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:visited {
    color: #fff;
    text-decoration: none;
    text-align: center;
}
.main-nav li:hover, .main-nav li:active {
    background: #0b7ac0;
}
.spectrum-banner img {
    width: 100%;
    max-width: 388px;
    text-align: center;
}
.navbar-brand {
    padding: 10px 0 0 10px;
}
.tt-dropdown {
    background: #fff !important;
    color: #000;
}
.tt-click {
    font-size: 24px;
    line-height: 26px;
    padding-left: 5px;
    text-decoration: none;
}
li.contus-link {
    position: relative;
}
li.contus-link .contus-popup {
    background: #fff;
    border: 1px solid #b7b7b7;
    font-size: 0.8em;
    font-weight: bold;
    left: -30px;
    display: none;
    padding: 10px;
    position: absolute;
    transition: opacity 0.5s ease-in;
    text-align: left;
    top: 45px;
    width: 160px;
    z-index: 2147483647;
}
li.contus-link .contus-popup a {
    background: none !important;
    color: #0e6fa1;
    font-size: 0.9em;
    margin-bottom: 10px;
    padding: 0 !important;
    text-decoration: underline;
}
.contus-popup:after, .contus-popup:before {
    border: medium solid transparent;
    bottom: 100%;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 0;
}
.contus-popup:after {
    border-color: transparent transparent #fff;
    border-width: 8px;
    margin-left: -8px;
}
.contus-popup:before {
    border-color: transparent transparent #b7b7b7;
    border-width: 9px;
    margin-left: -9px;
}
.contus-popup span {
    background: #c0c0c0;
    border-radius: 13px;
    cursor: pointer;
    float: right;
    line-height: 14px;
    padding: 0 0 0 2px;
    width: 13px;
}
li.contus-link .contus-popup.open {
    display: block;
}
.spectrum-banner {
    margin: 13px -15px 0 10px;
    text-align: center;
}
.tt-dropdown {
    width: 1200%;
    font-size: 12px;
    margin: 0;
}
.top-nav li.geo-zip a {
    height: 36px;
    width: 25px;
    position: relative;
    transition: all ease-in 0.25s; 
}
.top-nav li.geo-zip.zip-found a {
    width: 65px;
}
.top-nav li.geo-zip .glyphicon-map-marker {
    left: 7px;
    position: absolute;
    top: 15px;
}
.chartBlue {
    color: #00629b !important
}
.red {
    color: red !important;
}
.zip-form {
    font-size: 13px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}
.zip-form i {
    display: block;
    float: left;
    margin-top: 5px;
    width: 20px;
}
.zip-form p {
    float: left;
    text-align: left;
    width: calc(100% - 20px);
}
.zip-form form {
    text-align: left;
}
.zip-form .close {
    background: #000;
    border: 2px solid #000;
    border-radius: 10px;
    color: #fff;
    font-size: 10px;
    height: 15px;
    opacity: 0.8;
    position: absolute;
    right: 20px;
    text-align: center;
    top: -5px;
    width: 15px;
}
.blue-button {
    background-color: #3779b3;
    background-image: -moz-linear-gradient(center top , #3779b3, #02447e);
    border: 0 none;
    box-shadow: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: open_sans_extrabold;
    font-size: 13px;
    height: 25px;
    line-height: 25px;
    max-width: 70px;
    text-align: center;
    text-decoration: none;
    width: 90%;
}
.blue-button:hover {
    background-color: #265a83;
    background-image: -moz-linear-gradient(center top , #265a83, #1b405e);
}
.geo-zip-m {
    display: none;
}
form.zip-form .bubble.userzip .pointer {
    left: 130px;
    top: 24px;
    transform: rotate(180deg);
}


/* BHN MEGA MENU Desktop only */
.megadropbox {
    background: linear-gradient(to bottom, #fff 80%, #dfe5e5 100%) repeat 0 0;
    display: none;
    height: 300px;
    margin: 0;
    padding: 10px;
    position: absolute;
    right: -180px;
    text-align: left;
    top: auto;
    width: 880px;
    z-index: 150;
    -webkit-box-shadow: 0px 4px 5px -1px #333;
    -moz-box-shadow: 0px 4px 5px -1px #333;
    box-shadow: 0px 4px 5px -1px #333;
}
.down-arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #00629b;
    bottom: -5px;
    display: none;
    height: 0;
    left: 45%;
    position: absolute;
    width: 0;
    z-index: 1111;
} 
.megadropdown a:link h4, .megadropdown a:visited h4 {
    font-weight: bold;
}
.mega-column-first, .mega-column {
    border-left: 1px solid #ccc;
    float: left;
    height: 250px;
    padding-left: 15px;
}
.mega-column-first {
    border-left: 0;
}
.top-nav .btn-links div.megadropbox ul {
    padding: 0 0 0 10px;
}
.top-nav .btn-links div.megadropbox li {
    list-style: none;
    width: 100%;
}
.top-nav .btn-links div.megadropbox li a {
    background-color: transparent !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #333;
    display: block;
    font-size: 0.75em;
    padding: 5px;
    text-decoration: none;
    width: 100%;
}
.top-nav .btn-links .megadropbox a:hover {
    color: #333;
    text-decoration: underline;
}
li#bhnServices, li#bhnSupport {
    position: relative;
} 
li#bhnServices:hover div#megadropdown-myservices, li#bhnServices:active #megadropdown-myservices, li#bhnServices:hover .down-arrow, li#bhnServices:active .down-arrow {
    display: block !important;
}
li#bhnSupport:hover div#megadropdown-support, li#bhnSupport:active #megadropdown-support, li#bhnSupport:hover .down-arrow, li#bhnSupport:active .down-arrow {
    display: block !important;
}       

/* MEDIA QUERIES */
@media only screen and (max-width: 991px) {
    .container {
        width: 100%;
    }
    #customer-localization-form, .user-nav {
        position: relative;
        text-align: center;
    }
    .top-nav .standard-links, .top-nav .btn-links {
        display: inline-block;
        float: none;
    }
    .top-nav ul.btn-links {
        margin: 0 -15px 0 0;
    }
    .top-nav .btn-links a {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .top-nav {
        text-align: center;
    }
    .spectrum-banner {
        margin: 13px 0 0;
        text-align: center;
    }
    .top-nav li.geo-zip .glyphicon-map-marker {
        left: 3px;
    }
    li#bhnServices:hover div#megadropdown-myservices, li#bhnServices:active #megadropdown-myservices, li#bhnServices:hover .down-arrow, li#bhnServices:active .down-arrow {
        display: none !important;
    }
    li#bhnSupport:hover div#megadropdown-support, li#bhnSupport:active #megadropdown-support, li#bhnSupport:hover .down-arrow, li#bhnSupport:active .down-arrow {
        display: none !important;
    } 
}

/* SHOW FORM ON LPs */
@media (max-width: 920px) {
    #customer-localization-form { 
        width: 100%; 
        max-width: 100%; 
    }
    .login.best-offer { 
        display: none; 
    }
    #customer-localization-form .no-gutters > div { 
        padding: 0px 1px; 
    }
    .main-nav a, .main-nav button { 
        padding: 2px; 
    }
    .top-nav { 
        padding: 0px; 
    }
    .top-nav .btn-links li { 
        margin: 0px 0px 0px 1px; 
    }
}

@media only screen and (min-width : 780px) and (max-width : 991px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 14px;
    }
}

@media (max-width:767px) {
    .collapse.navbar-collapse.main-nav.in {
        display: block;
        float: none;
    }
    .navbar-nav {
        margin: 0;
    }
    .zip-form form {
        display: block;
        text-align: center;
    }
    .geo-zip-m {
        cursor: pointer;
        display: block;
        float: right;
        padding: 20px;
    }
    .zip-form i {
        display: none;
    }
    .error.bubble.userzip {
        margin: 0 auto;
        max-width: 250px;
    }
}


@media (max-width: 770px) {

    .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:visited {
        border-bottom: 1px solid #fff;
    }
    .customer-localization-form, .main-nav-wrapper .container.main-nav {
        padding: 0 !important;
    }
    #customer-module-body {
        margin: 0 auto;
        padding: 2px 0 0 13px;
    }
}

@media only screen and (max-width: 460px) {
    .main-nav a, .main-nav button {
        padding: 2px 15px;
    }
}


@media only screen and (max-width: 450px) {
    #customer-localization-form .no-gutters > div {
        margin-left: -2px;
        padding: 0 1px;
    }
    #customer-localization-form input {
        width: 95%;
    }
    .main-nav a, .main-nav button {
        padding: 2px 3px;
    }



}