/*MasterStyles.css --- This is the collection of commonly used styles for the NCJUA-NCIUA Website*/


/**************------   Bootstrap Override   ------***************/



/* HEADER AND NAVIGATION BAR STYLING */

#bootstrapOverride .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #162B43;
}

#bootstrapOverride .navbar-fixed-top {
    border-bottom-width: 0px !important;
}
   
/* white bar above links */
.linksBar {
    border-top: solid 1px #eee;
}

/* removes the CARET and spacing when a LINK does not have a dropdown */
#bootstrapOverride .noCarret > a:after {
    content: "";
}

#bootstrapOverride .noCarret .header .dropdown > a:after,
.header .dropdown-submenu > a:after {
    content: "";
}

#ncjuaImageLink {
    max-width: 500px;
}



/* MOBILE --- NAVIGATION BAR STYLING */
#bootstrapOverride .header .navbar-toggle {
    border-color: transparent;
}

#bootstrapOverride .header .navbar-toggle, .header .navbar-toggle:hover, .header .navbar-toggle:focus {
    background: transparent;
}

    #bootstrapOverride .header .navbar-toggle:hover {
        background: transparent !important;
    }




/* SITE-WIDE NAVIGATION DROP SHADOW */
#bootstrapOverride .navBar_dropShaddow {
    box-shadow: 0px -54px 23px 58px rgba(0,0,0,0.54);
}




/* GRAY TEXT STYLING IN THE FOOTER OF WEBSITE */
#bootstrapOverride .footer p {
    /*color: #aeb1b2;*/
    color: #7c8082;
}

/* GRAY TEXT STYLING */
.mediumGray {
    color: #999;
}

.lightGray {
    color: #C0C0C0;
}


/* OTHER FOOTER STYLING */
#bootstrapOverride p.footerHeading {
    color: #162B43;
    font-size: 14px;
    /* font-weight: bold; */
    text-transform: uppercase;
    margin-left: 6px;
    padding-top: 4px;
}




/* BLOCK ELEMENT OVERRIDES */
#bootstrapOverride .content-md {
    padding-top: 20px;
}




/* TEXT COLOR CHANGE FROM INHERITED TO #000000 (WHITE) */
#bootstrapOverride span .label .label-blue {
    color: #fff;
}

#bootstrapOverride span.label-dark-blue, span.badge-dark-blue, .list-group-item.active > .badge.badge-dark-blue {
    color: #fff;
}

#bootstrapOverride span.label-blue, span.badge-blue, .list-group-item.active > .badge {
    color: #fff;
}

#bootstrapOverride .label-default {
    color: #fff;
}




/* SITE-WIDE TEXT COLOR CHANGE FROM #555 TO #000000 */


/* 'AARON BLUE' COLOR CHANGE FOR HEADINGS AND OTHER ELEMENTS */
.AaronBlue {
    color: #2C73AE;
}




/*----------- LINK BUTTON STYLE FOR NEWS PAGE (MOVE THIS TO NewsStyles.css -----------*/
a.myclass:link {
    color: white;
    background: #4765a0;
}

#bootstrapOverride .s-results .down-ul li a {
    color: #4765a0;
}
/* styles the line underneath the NEWS ARCHIVES */
#bootstrapOverride .tab-v1 .nav-tabs {
    border-bottom: solid 1px rgb(240, 240, 240);
    padding-bottom: 15px;
}



/*----------- SPACERS -----------*/
.spacer-1px {
    padding-top: 1px;
}

.spacer-2px {
    padding-top: 2px;
}

.spacer-3px {
    padding-top: 3px;
}

.spacer-4px {
    padding-top: 4px;
}

.spacer-5px {
    padding-top: 5px;
}

.spacer-6px {
    padding-top: 6px;
}

.spacer-7px {
    padding-top: 7px;
}

.spacer-8px {
    padding-top: 8px;
}

.spacer-9px {
    padding-top: 9px;
}

.spacer-10px {
    padding-top: 10px;
}

.spacer-15px {
    padding-top: 15px;
}

.spacer-20px {
    padding-top: 20px;
}

.spacer-25px {
    padding-top: 25px;
}

.spacer-30px {
    padding-top: 30px;
}

.spacer-35px {
    padding-top: 35px;
}

.spacer-40px {
    padding-top: 40px;
}

.spacer-45px {
    padding-top: 45px;
}

.spacer-50px {
    padding-top: 50px;
}

.spacer-55px {
    padding-top: 55px;
}

.spacer-60px {
    padding-top: 60px;
}

.spacer-65px {
    padding-top: 65px;
}

.spacer-70px {
    padding-top: 70px;
}

.spacer-75px {
    padding-top: 75px;
}

.spacer-80px {
    padding-top: 80px;
}

.spacer-85px {
    padding-top: 85px;
}

.spacer-90px {
    padding-top: 90px;
}

/*---------END----------*/



/*----------- LOGO SWAP FOR DESKTOP/MOBILE -----------*/
/*  desktop mode - hides small logo ----  mobile mode - hides big logo + shows small logo  */

#smallLogo {
    display: none;
    float: left;
}




/*----------- BODY MARGIN TOP - PUSHES SLIDER DOWN -----------*/
body {
    padding-top: 110px;
}




/*----------- HORIZONTAL GREY LINE -----------*/
.greyLine {
    border-bottom: solid 1px #f0f0f0;
    margin: 10px, 0px, 0px, 0px; /* top, right, bottom, left */
}




/*----------- SLIDER TEXT COLOR -----------*/
#bootstrapOverride .da-slide h2 i {
    background-color: #2C73AE; /* was: rgba(71, 101, 160, 0.8) */
}




/*----------- MAIN LINKS -----------*/

/* BORDER COLOR */
#bootstrapOverride .service-block-v1 {
    /* color: #555;   */
    border: 1px solid #D3D3D3;
    /* #BDBDBD - still too dark --- #555 - is too dark  */
}


    /* CIRCLE SURROUNDING ICON COLOR */
    #bootstrapOverride .service-block-v1 i {
        background: #2C73AE; /* Aaron blue */
    }


/* LINK COLORS */
a.masterMainLink {
    color: #555;
    font-size: 20px;
    line-height: 27px;
    text-transform: uppercase;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
}

    a.masterMainLink:hover {
        color: #868686;
        text-decoration: none;
    }

span.masterMainLink {
    color: #555;
    font-size: 20px;
    line-height: 27px;
    text-transform: uppercase;
    text-shadow: none;
    font-weight: normal;
    font-family: "Open Sans", Arial, sans-serif;
}

    span.masterMainLink:hover {
        color: #868686;
        text-decoration: none;
    }




/*----------- FOOTER - HIDES 5 EXTRA PIXELS OF WHITE AT THE BOTTOM -----------*/
#bootstrapOverride .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 305px;
}




/*----------- UNORDERED LIST WITH FONT AWESOME -----------*/
ul.ulWithFontAwesome {
    list-style: none;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    padding-left: 10px; /* this is what you override for pushing second line inwards */
}

li.liWithFontAwesome:before {
    font-family: 'FontAwesome';
    content: '\f192';
    color: #295578;
    margin-left: 5px;
    padding-right: 4px;
}




/*----------- LABEL COLOR CHANGES TO 'AARON BLUE' -----------*/
#bootstrapOverride span.label-u {
    background: #2C73AE;
    color: #fff;
    padding: 2px 7px;
}




/*----------- SHOW/HIDE '2014 ACTIVITY AND ANNOUNCEMENTS' -----------*/
#textarea2014 {
    display: none;
}

    #textarea2014:target {
        display: block;
    }

    #textarea2014 + ul.controls {
        list-style-type: none;
    }

        #textarea2014 + ul.controls .hide2,
        #textarea2014:target + ul.controls .show2 {
            display: none;
        }

        #textarea2014:target + ul.controls .hide2,
        #textarea2014 + ul.controls .show2 {
            display: inline-block;
        }




/*----------- SHOW/HIDE '2013 ACTIVITY AND ANNOUNCEMENTS' -----------*/
#textarea2013 {
    display: none;
}

    #textarea2013:target {
        display: block;
    }

    #textarea2013 + ul.controls {
        list-style-type: none;
    }

        #textarea2013 + ul.controls .hide3,
        #textarea2013:target + ul.controls .show3 {
            display: none;
        }

        #textarea2013:target + ul.controls .hide3,
        #textarea2013 + ul.controls .show3 {
            display: inline-block;
        }




/*----------- POLICYHOLDERS, PRODUCERS, AND MEMBER INSURER LINKS -----------*/
.linkLeftSelected {
    color: #2C73AE;
    padding: 2px 12px 2px 13px;
    border: solid #2C73AE 1px;
    text-decoration: none;
}
/* this deals with the 'div' around the linkLeftSelected above */
.divlinkLeftNotSelected {
    margin: 5px 5px 5px 14px;
}




/*----------- LINK STYLES - REMOVES THE UNDERLINE -----------*/
#bootstrapOverride a {
    text-decoration: none;
}


/*----------- HURRICANE DAMAGE CHART -----------*/
#HurricaneOverride #damageTitle, #HurricaneOverride .damageHeaders, #HurricaneOverride .damageTypesHeader, #HurricaneOverride .damageCategories {
    color: #fff;
}

#HurricaneOverride .damageCategories {
    text-align: center;
    vertical-align: middle;
}

    #HurricaneOverride .damageCategories > span {
        text-align: center;
        vertical-align: middle;
        margin-top: auto;
    }

#HurricaneOverride .damageCategoriesDescription p {
    text-align: left;
    color: white;
    padding-right: 34px;
}

#HurricaneOverride .damageHeaders {
    font-weight: 700;
    text-align: center;
}

#HurricaneOverride .damageTypesHeader {
    font-weight: 700;
    text-align: left;
}

#HurricaneOverride {
    background-color: rgba(0,0,0,0.5);
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColors#000000000, endColorstr=#00000000);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    z-index: 10;
    padding: 10px;
    -moz-box-shadow: 0px 0px 7px #000000;
    -webkit-box-shadow: 0px 0px 7px #000000;
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,.5);*/
    /*-webkit-border-radius: 10px;*/
}

#hurricaneDamageContainer {
    padding-left: 54px;
    padding-bottom: 24px;
    padding-top: 24px;
}

.u-label {
    display: inline-block;
    padding: .35rem .58rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

#HurricaneOverride .label {
    padding: 1px 2px 1px 2px;
    color: #fff;
    background: rgba(236,240,241, 0.3);
}

#HurricaneOverride .badge-u {
    background: transparent;
    border: 1px solid #fff;
    padding: 10px;
}

.g-rounded-3 {
    border-radius: 3px !important;
}

.g-bg-cat1 {
    color: #000;
    background-color: #FFFF99;
    width: 100%;
}

.g-bg-cat2 {
    color: #000;
    background-color: #F2C77C;
    width: 100%;
}

.g-bg-cat3 {
    color: #000;
    background-color: #E59060;
    width: 100%;
}

.g-bg-cat4 {
    color: #000;
    background-color: #D85843;
    width: 100%;
}

.g-bg-cat5 {
    color: #000;
    background-color: #cb2026;
    width: 100%;
}


.u-btn-cat1 {
    color: #000;
    background-color: #ffffcc;
    width: 100%;
}

.u-btn-cat2 {
    color: #000;
    background-color: #ffe775;
    width: 100%;
}

.u-btn-cat3 {
    color: #000;
    background-color: #ffc140;
    width: 100%;
}

.u-btn-cat4 {
    color: #000;
    background-color: #ff8f20;
    width: 100%;
}

.u-btn-cat5 {
    color: #000;
    background-color: #ff6060;
    width: 100%;
}

/*----------- BOARD MEMBERS -----------*/
.boardParent {
    position: relative;
}

.boardLeftOne {
    position: absolute;
    margin-left: 20px;
}

.boardLeftTwo {
    position: absolute;
    margin-left: 190px;
}

.boardSubtitles {
    color:#4765a0;
    border-bottom: 1px solid #f0f0f0;
    margin-left: 12px;
    margin-bottom: 20px;
}




/*----------- STICKY DIVISIONS -----------*/
.stuckHeader {
    position: fixed;
    top: 200px;
    /*left:100px;
        right:100px;
        height:200px;*/
    background-color: white;
    width: 1155px; /* 1141px matches the links header line */
    z-index: 3;
}

.stuckNavigation {
    position: fixed;
    top: 284px;
    /*left:100px;
        right:100px;
        height:200px;*/
    background-color: white;
}

.stuckAboveHeader {
    position: fixed;
    top: 120px;
    height: 150px;
    background-color: white;
    width: 1155px;
    z-index: 2;
}


/*----------- BOARD MEETINGS -----------*/

/* laying out the TOP dates side by side */
#divBoardMeetingParentTop {
    position: relative;
    display: inline;
}

#divBoardMeetingDateTop {
    position: absolute;
    display: inline;
    margin-left: 3px;
    width: 160px;
    /*background-color: lightgray;*/
}


.divBoardMeetingEventMobile {
    position: relative;
    display: inline;
}

.divMeetingInfo {
    display: block;
    margin-left: 3px;
    margin-top: 15px;
    width: 160px;
    clear: both;
}




#divBoardMeetingTimeTop {
    position: absolute;
    display: inline;
    margin-left: 180px;
    width: 140px;
    /*background-color: lightgray;*/
}

#divBoardMeetingPurposeTop {
    position: absolute;
    display: inline;
    margin-left: 360px;
    width: 300px;
    /*background-color: lightgray;*/
}

/* laying out the BOTTOM dates side by side */
#divBoardMeetingParentBottom {
    position: relative;
    display: inline;
}

#divBoardMeetingDateBottom {
    position: absolute;
    display: inline;
    margin-left: 3px;
    width: 160px;
    /*background-color: lightgray;*/
}

#divBoardMeetingTimeBottom {
    position: absolute;
    display: inline;
    margin-left: 180px;
    width: 140px;
    /*background-color: lightgray;*/
}

#divBoardMeetingPurposeBottom {
    position: absolute;
    display: inline;
    margin-left: 360px;
    width: 300px;
    /*background-color: lightgray;*/
}




/*----------- CONTACT US -----------*/
.sky-form .label {
    margin-bottom: 3px;
}

.tierOneheaderBox {
    /* box rules */
    background-color: #295578;
    opacity: .85;
    padding-left: 8px;
    padding-top: 2px;
    padding-bottom: 2px;
    /* text rules */
    font-size: 20px;
    color: white;
    /*text-transform: uppercase;*/ /* Aaron wants this like this */
}

.tierTwo_threeLinesAboveText {
    background-image: url('../Images/ContactUs_tier_ThreeLinesAboveText.png');
    background-repeat: no-repeat;
    display: block;
    text-transform: uppercase;
    padding-left: 0px;
    padding-top: 3px;
    font-size: 14px;
    color: #295578;
}

.contactSection {
    padding-left: 20px;
}



.contact .row .contactForm {
    padding-left: 16px;
}

#bootstrapOverride, #SubjectDDL .sky-form .select i {
    background: transparent;
}

#loader {
    border-top: 16px solid blue;
    border-right: 16px solid green;
    border-bottom: 16px solid red;
    border-left: 16px solid pink;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#errorCaptcha {
    clear: both;
    float: right;
    padding-right: 15px;
}

 #bootstrapOverride .sectionSubtitle {
    font-size: 12px;
    font-weight: 600;
}


/*----------- LEARN ABOUT US (MISSION STATEMENT) -----------*/
.missionBlock img {
    padding-left: 25px;
}




/*----------- WHO WE ARE -----------*/
.whoWeAre p {
    padding-left: 20px;
}

.whoWeAre #labelBeach {
    float: left;
    text-align: left;
    padding-right: 1.5em;
}

.whoWeAre #labelFair {
    float: left;
    text-align: left;
    padding-right: 1.5em;
}

#bootstrapOverride span.label {
    font-size: 12px;
}




/*----------- WHAT WE OFFER -----------*/
.whatWeOffer p {
    padding-left: 20px;
}

.whatWeOffer #labelBeach {
    float: left;
    text-align: left;
    padding-right: 1.5em;
}

.whatWeOffer #labelFair {
    float: left;
    text-align: left;
    padding-right: 1.5em;
}

.whatWeOffer .ulWithFontAwesome {
    padding-left: 50px;
}




/*----------- CAREER OPPORTUNITIES -----------*/
.career .ulWithFontAwesome {
    padding-left: 50px;
}






/**************------   MEDIA QUIRIES - DEVICE BASED RESPONSIVE DESIGN  ------***************/




@media (max-width: 767px) {

    /* HEADER AND NAVIGATION BAR - RESPONSIVE DESIGN */

    #bigLogo {
        float: left;
    }

    /* BODY - RESPONSIVE DESIGN --- the header gets smaller on mobile - 
    this reduces the body padding to accomodate for the extra space */
    body {
        padding-top: 102px;
    }

    /* getting rid of space between '4 Main Links' and 'Mission' on mobile */
    #spacer60HideOnMobile .spacer-60px {
        display: none;
        clear: both;
        display: none;
        visibility: hidden;
    }

    /* hiding 'Proudly Serving' text on mobile */

}

/*---------END----------*/




/* DEVICES SMALLER THAN 501 PIXELS IN WIDTH */

@media only screen and (max-width: 500px) {

    /* HEADER AND NAVIGATION BAR - RESPONSIVE DESIGN */

    #bigLogo {
        display: none;
    }

    #smallLogo {
        display: block;
    }

    #mobileNavigationContainer {
        position: fixed;
    }

    #ncjuaImageLink {
        max-width: 100px;
    }

    /*Hides the Top Bar on Mobile Menu*/
    #bootstrapOverride .linksBar {
        border-top: solid 0px transparent;
    }

    #bootstrapOverride #navBarContainer .container {
        padding-bottom: 15px;
    }

    #bootstrapOverride .navBar_dropShaddow {
        box-shadow: none;
    }

    #proudlyServing .col-md-12 {
        display: none;
        clear: both;
        visibility: hidden;
    }


    /* FOOTER - RESPONSIVE DESIGN */

    #bootstrapOverride .footer {
        left: 0;
        right: 0;
        bottom: 0;
        height: unset;
    }


    /* POLICY CENTER PAGE - RESPONSIVE DESIGN */

    #bootstrapOverride .padding80LeftAndRight {
        padding-left: 10px;
        padding-right: 10px;
    }

    #bootstrapOverride .col-md-15 {
        padding-right: 40px;
        padding-left: 40px;
    }

    #bootstrapOverride .verticalLine {
        border-left: 0px solid transparent;
    }


    /* MISSION STATEMENT PAGE - RESPONSIVE DESIGN */

    #bootstrapOverride .missionBlock > .col-md-6 {
        padding: 0px 0px 0px 0px;
    }

    #bootstrapOverride .missionBlock > .service-block-v8 {
        padding: 0px 0px 0px 0px;
    }

    .missionBlock img {
        padding-left: 0px;
    }


    /* WHO WE ARE PAGE - RESPONSIVE DESIGN */

    .whoWeAre .col-md-10 {
        clear: both;
        padding-top: 15px;
    }

    .whoWeAre .verticalLineGrey {
        border-left: 0px solid transparent;
    }

    .whoWeAre p {
        padding-left: 0px;
    }

    .whoWeAre #labelBeach {
        float: left;
        text-align: left;
    }

    .whoWeAre #labelFair {
        float: left;
        text-align: left;
    }


    /* WHAT WE OFFER PAGE - RESPONSIVE DESIGN */

    .whatWeOffer .col-md-10 {
        clear: both;
        padding-top: 15px;
    }

    .whatWeOffer .verticalLineGrey {
        border-left: 0px solid transparent;
    }

    .whatWeOffer p {
        padding-left: 0px;
    }

    .whatWeOffer #labelBeach {
        float: left;
        text-align: left;
    }

    .whatWeOffer #labelFair {
        float: left;
        text-align: left;
    }

    .whatWeOffer .ulWithFontAwesome {
        padding-left: 10px;
    }

        .whatWeOffer .ulWithFontAwesome > li {
            padding-top: 5px;
        }


    /* GREY VERTICAL LINE - RESPONSIVE DESIGN */

    #bootstrapOverride .verticalLineGrey {
        border-left: 0px solid transparent;
    }


    /* CONTACT US PAGE - RESPONSIVE DESIGN */

    #bootstrapOverride .row .contactForm {
        padding-left: 0px;
    }

    #bootstrapOverride .contactForm > input {
        clear: both;
        margin-left: 0px;
    }

    .contact .labelLeftPlacement {
        position: unset;
    }

    .contactForm .divEmailInputsLeft {
        margin-left: 0px;
    }

    .contactSection {
        padding-left: 20px;
        padding-right: 20px;
    }

    #bootstrapOverride .divDepartmentInputsRight {
        margin-left: 0px;
    }

    #errorCaptcha {
        float: right;
        padding-right: 0px;
    }

    /* STICKY HEADERS (MADE HIDDEN) - RESPONSIVE DESIGN */

    .stuckAboveHeader, .stuckHeader {
        display: none;
        clear: both;
        display: none;
        visibility: hidden;
    }

    /* BOARD MEETINGS - RESPONSIVE DESIGN */

    div#additionalInfo {
        display: block;
        float: left;
        clear: left;
    }

    /* BOARD MEMBERS - RESPONSIVE DESIGN */

    .boardLeftOne {
        margin-left: 10px;
    }

    .boardLeftTwo {
        margin-left: 30px;
        clear: left;
    }

    #divMemberInsurerContent .spacer-20px {
        margin-bottom: 40px;
    }

    /* CAREER OPPORTUNITIES - RESPONSIVE DESIGN */

    .career .ulWithFontAwesome {
        padding-left: 10px;
    }
}

/*---------END----------*/



/* ------------------ VISIBILITY STYLES ------------------ */


/* DESKTOP VISIBILITY */

@media only screen and (min-width: 501px) {

    /* HIDDEN ON DESKTOP */

    .hideOnDesktop {
        visibility: hidden;
        clear: both;
        display: none;
    }
}





/* MOBILE VISIBILITY */

@media only screen and (max-width: 500px) {


    /* HIDDEN ON MOBILE */

    .hideOnMobile {
        visibility: hidden;
        clear: both;
        display: none;
    }


    /* VISIBLE ON MOBILE */

    .showOnMobile {
        visibility: visible;
        display: block;
    }
}

/* TABLET VISIBILITY */

@media only screen and (max-width: 991px) {


    /* HIDDEN ON TABLET */

    .hideOnTablet {
        visibility: hidden;
        clear: both;
        display: none;
    }


    /* VISIBLE ON MOBILE */

    .showOnTablet {
        visibility: visible;
        display: block;
    }
}


/* BOOTSTRAP NAVS */
#bootstrapOverride .nav-tabs a {
    color: #666666;
    background-color: #ebf3fa;
    border-color: #2C73AE;
    transition-duration: 0.4s;
}

#bootstrapOverride .nav-tabs a:hover {
    color: #2C73AE;
    background-color: #ffffff;
    border-color: #2C73AE;
    transition-duration: 0.4s;
}
*
#bootstrapOverride .nav-tabs >  li.active > a {
    color: #2C73AE;
    background-color: #ffffff;
    border-color: #2C73AE;
    border-bottom-color:transparent;
    font-weight:bold;
    
}