/* ==========================================================================
    Description: Bay Area Medical Center stylesheet 
    Author: John A
    Release date: 3/11/16
    Revision History: Revised By    Revised On:
                      Someone       00/00/00
   ========================================================================== */

html { background: #d4d4d4; color: #333; font-size: 62.5%; /*For rems*/ }
body { font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; font-size: 1.6rem; }
.center { width: 980px; margin: auto; }
.shim { clear: both; }
.hide { left: -999em; position: absolute; }
a { text-decoration: none; color: #007378; }
.ui-widget-overlay { height: 100%; width: 100%; top: 0; left: 0; position: fixed; background: #000; opacity: .6; }
.ui-dialog { position: absolute; left: 0; top: 0; background: #fff; box-shadow: 0 3px 10px #343232; padding: .2em; }
.ui-dialog-titlebar { float: right; position: relative; z-index: 110; }
.ui-dialog-title { display: none; }
.ui-front { z-index: 100; }
.ui-corner-all { border-radius: .5em; }

#top { position: absolute; z-index: 101; left: -999em; transition-duration: 0s; }
#top:focus { left: 45%; }


/* ==========================================================================
    Header and Navigation
   ========================================================================== */

header { position: absolute; z-index: 100; width: 100%; background: white; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2)}
.logo { float: left; margin: 20px 0; }
#mobileMenu, #menuBtn { float: right; margin-top: 20px; }
#mobileMenu a, #menuBtn a { text-decoration: none; color: #0051a1; display: block; }
#menuBtn a { color: #fff; }
#mobileMenu a:hover { background: #eee; }
#menuBtn a:hover { background: #003e7c; }
#mobileMenu a span, #menuBtn a span { display: block; height: 32px; padding: 10px 62px 10px 10px; background: url(icons.png) right 10px no-repeat; line-height: 32px; line-height: 3.2rem; font-weight: bold; text-transform: uppercase; }
#menuBtn a span { background-position: right -497px; }
#mobileSearch { display: none; }
#navOverlay { display: none; background: #0051a1; background: rgba(0,81,161,.95); position: absolute; top: 0; left: 0; width: 100%; height: 700px; }
nav { color: #fff; width: 100%; box-sizing: border-box; clear: both; position: relative; }
nav ul { list-style: none; padding: 0; margin: 0; }
nav li { position: relative; }
nav a { display: block; padding: 2px 12px; color: #fff; }
nav a[href="javascript:;"] { cursor: default; }
nav > ul > li { float: left; }
nav > ul > li.over > a { color: #fff; }
nav > ul > li > a { padding: 8px; font-weight: bold; color: #002d59; text-transform: uppercase; }
nav ul ul { display: none; position: absolute; width: 240px; }
nav ul .twoCol + ul { width: 500px; max-height: 500px; }
nav li.over > ul { display: block; }
nav ul .over > .services + ul { display: none; }
nav ul ul li { font-size: 16px; }
/*nav .twoCol + ul > li { width: 50%; display: inline-block; }*/
nav ul ul li.over { background: #004487; }
nav ul ul ul { width: 100%; display: block; position: static; }
nav ul ul ul li { font-size: 13px; }
nav ul ul ul li.over { background: #00376e; }
nav ul ul ul a { padding: 0 12px 0 20px; }
nav .multiCol { position: static; }
nav .multiCol > ul { width: 100%; left: 0; }
nav .multiCol .col { width: 30%; float: left; padding: 0 1.5%; }
nav .multiCol ul ul { position: static; display: block; background: transparent; }
nav .multiCol ul ul li { font-size: 13px; }
.searchContainer { float: left; margin: 40px 0 30px; }
.searchContainer a { padding: 16px; display: block; text-align: center; }
.searchContainer a:hover { background: #183d5e; }
#Query { background: #003e7c; color: #fff; padding: 12px; border: none; font-size: 16px; width: 256px; height: 23px; float: left; }
#QueryBtn { float: left; width: 22px; height: 27px; padding: 10px; background: #003e7c url(icons.png) no-repeat right -340px; }
#QueryBtn:hover { background-color: #003263; }
.findAPhys, header .billPay { float: left; color: #fff; font-weight: bold; text-transform: uppercase; padding: 12px 10px 13px 40px; margin: 40px 20px 20px; background: #003e7c url(icons.png) no-repeat left -617px; }
header .billPay { background-position: -7px -92px; margin-left: 0; }
.findAPhys:hover, header .billPay:hover { background-color: #003263; }


/* ==========================================================================
    Home
   ========================================================================== */

#overlay { display: block; width: 100%; height: 270px; position: absolute; top: 0; left: 0; background: url(overlay.png) no-repeat; z-index: 10; }
#promoContainer { position: relative; }
#promoContainer .promo { height: 700px; background-position: center top; background-repeat: no-repeat; background-size: 100% auto; width: 100%; position: absolute; }
#promo1, #promo2, #promo3 { background-image: url(homePromo1.jpg); }
#promoContainer .promo > a { position: absolute; top: 350px; }
#promoContainer .promo > .right { right: 25%; }
#promoContainer .promo > .left { left: 25%; }
#promoContainer h1 { color: #007378; font-size: 48px; font-size: 4.8rem; line-height: 48px; line-height: 4.8rem; padding: 0; margin: 0; text-transform: uppercase; }
#promoContainer h1 span { color: #919191; }
#promoContainer .cta { color: #919191; font-size: 18px; font-size: 1.8rem; text-transform: uppercase; margin: 0; font-weight: bold; }
#promoContainer .cta:hover { color: #555; }
.CS_cntrls { position: absolute; }
.CS_dots { text-align: center; bottom: 10px; width: 100%; }
.CS_dots a { display: inline-block; height: 11px; width: 11px; background: transparent; border-radius: 15px; border: 2px solid #fff; text-indent: -999em; margin: 0 5px; box-shadow: 0 0 5px rgba(0,0,0,.3); }
.CS_dots a:hover { background: #255f92; }
.CS_dots .CS_current, .CS_dots .CS_current:hover { background: #fff; }

#quickLinks { background: #0051a1; }
#quickLinks ul { list-style: none; padding: 0; text-align: center; display: flex; justify-content: space-between; }
#quickLinks li { display: inline-block; }
#quickLinks a { background: url(icons.png) no-repeat 0 -42px; color: #fff; font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 18px 20px 18px 50px; display: block; }
#quickLinks a:hover { background-color: #004487; }
#quickLinks .billPay a { background-position: 0 -85px; }
#quickLinks .careers a { background-position: 0 -129px; }
#quickLinks .donate a { background-position: 0 -174px; }
#quickLinks .contactUs a { background-position: 0 -221px; }

.oddStrip { background: #fff; padding: 50px 0; }
.evenStrip { background: #ededed; padding: 50px 0; }

.bigCol { width: 550px; float: left; margin-right: 100px; }
.bigCol.right { margin: 0 0 0 100px; }
.bigCol h2, .lilCol h2 { margin: 0; text-transform: uppercase; font-size: 24px; font-size: 2.4rem; color: #0051a1; }
.bigCol h3, .lilCol h3, .bigCol p { margin: 0; font-size: 14px; font-size: 1.4rem; }
.bigCol ul { list-style: none; margin: 0; padding: 0; }
.bigCol li { clear: both; margin: 10px 0 30px; }
.bigCol .crop { float: left; margin: 5px 18px 5px 0; width: 50px; height: 50px; overflow: hidden; }
.bigCol .crop img { height: 50px; min-width: 50px; }
.bigCol li a { padding-left: 6px; }
.bigCol a { color: #4c4c4c; display: block; }
.bigCol a:hover { background: #efefef; }
.evenStrip a:hover { background: #fefefe; }
.bigCol .viewAll { font-weight: bold; float: right; font-size: 14px; font-size: 1.4rem; }

.lilCol { width: 330px; float: left; }
.lilCol p { margin: 8px 0 16px; }
.lilCol .btn { font-size: 18px; font-size: 1.8rem; color: #fff; background: #007378; padding: 14px; text-align: center; display: block; }
.lilCol .btn:hover { background: #005b5e; }
.lilCol .btnDivider { display: block; height: 1px; background: #ccc; margin: 20px 0; }
.sideBox { background: #ededed; padding: 30px; }
.sideBox .dropdown { width: 100%; overflow: hidden; border: 1px solid #cecece; margin: 8px 0 10px; background: #fff url(icons.png) right -300px no-repeat; }
.sideBox select { background: transparent; border: none; font-size: 18px; font-size: 1.8rem; color: #808080; padding: 6px 7px; height: 38px; }
#provName, #email { background: #fff; border: 1px solid #cecece; color: #808080; padding: 6px 10px; font-size: 18px; font-size: 1.8rem; width: 100%; box-sizing: border-box; float: left; }
#physBtn, #emailBtn { width: 40px; height: 40px; border: none; margin-left: -40px; padding: 0; float: right; background: #007378 url(icons.png) right -345px no-repeat; text-indent: -999em; }
#physBtn:hover, #emailBtn:hover { background-color: #005b5e; }


/* ==========================================================================
   Main content 
   ========================================================================== */

#insideBanner { height: 450px; /*background-image: url(insideBanner1.jpg);*/ background-position: center 20%; background-repeat: no-repeat; background-size: 100% auto; }
#insideBanner .center { position: relative; height: 100%; }
#insideBanner h1 { font-size: 42px; font-size: 4.2rem; padding: 27px; margin: 0; color: #fff; text-transform: uppercase; background: #000; background: rgba(0,0,0,.6); position: absolute; bottom: 30px; line-height: 42px; line-height: 4.2rem; }

article { width: 550px; float: left; margin-right: 100px; }
article.oneCol { width: 100%; margin: 0; }
article h2, aside h2 { margin: 0; text-transform: uppercase; font-size: 24px; font-size: 2.4rem; color: #0051a1; }
article h3 { font-size: 18px; font-size: 1.8rem; text-transform: uppercase; color: #0051a1; margin-bottom: 0; }
article p, article ul, article ol { color: #4c4c4c; font-size: 18px; font-size: 1.8rem; margin-top: 0; }
article h2 + p { margin-top: 9px; }
article ul, article ol { padding-left: 20px; }

aside { width: 330px; float: left; }
aside ul { list-style: none; margin: 12px 0 55px; padding: 0; }
aside li { margin: 0 0 10px;/*16px*/ }
aside li a { color: #007378;/*4c4c4c*/ }
aside p { margin: 7px 0 17px; }
#emailBtn { background-position: right -561px; }

.contact p { line-height: 24px; line-height: 2.4rem; float: left; margin-top: 7px; }
.contact p span { font-weight: bold; }
.contact a { display: block; margin-top: 20px; color: #4c4c4c; font-weight: bold; }
.contact #map { float: right; border: 1px solid #d4d4d4; margin: 12px 0 0 20px; }

.ui-accordion { margin-bottom: 20px; }
.ui-accordion-header { display: block; cursor: pointer; }
.ui-accordion-header-icon { display: block; float: left; width: 15px; height: 24px; }
.ui-icon-triangle-1-e:before { content: "+" }
.ui-icon-triangle-1-s:before { content: "-" }

.leadership { list-style: none; padding: 0; }
.leadership li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1% 20px; line-height: 18px; line-height: 1.8rem; }
.leadership li img { margin-bottom: 4px; }


/* ==========================================================================
   One column
   ========================================================================== */

.oneCol article { width: 100%; }
.oneCol h1 { margin-top: 0; }
.oneCol ul { /*list-style: none; margin-top: 0; padding: 0;*/ margin: 0 0 18px 20px; }
.oneCol ul a { padding: .25em .5em; }
.serviceDirectory > ul, .sitemap { list-style: none; padding: 0; margin-top: 10px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; }
.serviceDirectory > ul > li, .sitemap > li { margin: 0 0 20px; }
.serviceDirectory > ul > li > a, .sitemap > li > a { text-decoration: none; padding: .25em .5em; background: #0051a1; color: #fff; display: block; font-size: 1.5em; }
.serviceDirectory > ul > li > a[href="javascript:;"], .sitemap > li > a[href="javascript:;"] { cursor: default; background: #777; }
.serviceDirectory > ul > li > a[href="javascript:;"]:hover, .sitemap > li > a[href="javascript:;"]:hover { background: #777; }
.serviceDirectory > ul > li > a:hover, .sitemap > li > a:hover { background: #004487; }
.serviceDirectory ul, .sitemap ul { list-style: none; padding: 0; margin: 0; }
.serviceDirectory ul a, .sitemap ul a { text-decoration: none; padding: .25em .5em; color: #0051a1; display: block; }
.serviceDirectory ul a:hover, .sitemap ul a:hover { background: #efefef; }
.serviceDirectory ul ul ul, .sitemap ul ul { padding-left: 1em; }
.serviceDirectory .level3 ul, .sitemap .level3 ul { margin-bottom: 0; }
.serviceDirectory .level3 li, .sitemap .level3 li, .serviceDirectory ul ul { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }


/* ==========================================================================
   Footer
   ========================================================================== */

.ko #backToTop { opacity: 1; }
#backToTop { outline: none; opacity: 0; position: fixed; overflow: hidden; bottom: 40px; right: 2.5%; display: block; background: url(arrows.svg) no-repeat scroll 23px -30px / 36px auto #d4d4d4; color: #fff; width: 80px; height: 80px; border-radius: 40px; text-decoration: none; z-index: 200; box-shadow: 0 0 2px rgba(0,0,0,.5); }
.lt-ie9 #backToTop { background: #d4d4d4; display: none; }
.lt-ie9 .ko #backToTop { display: block; }
#backToTop:hover { background-color: #bababa; }
#backToTop span { display: block; position: absolute; top: 28px; width: 100%; text-align: center; pointer-events: none; }
.svg #backToTop span { top: 100px; }
.svg #backToTop:hover { background-position: 23px -80px; }
.svg #backToTop:hover span { top: 28px; }

footer { color: #696969; font-size: 14px; font-size: 1.4rem; }
footer p { float: left; margin: 20px 8px; }
footer a { color: #696969; }
.social { list-style: none; margin: 17px 0; padding: 0; float: right; }
.social li { float: right; }
.social a { display: block; margin-left: 10px; font-weight: normal; width: 26px; height: 26px; background: url(icons.png) no-repeat; text-indent: -999em; }
.social .fb { background-position: right -449px; }
.social .tw { background-position: right -403px; }


/* ==========================================================================
   Transitions
   ========================================================================== */

header, nav ul, nav li, a, .logo, .logo img, #mobileMenu, #search, .cta, input, select, .fa, main, .dropdown, #featBoxContainer .box div, #backTop span, .ui-accordion-header, #backToTop span {
    -webkit-transition-duration: .5s;
       -moz-transition-duration: .5s;
        -ms-transition-duration: .5s;
         -o-transition-duration: .5s;
            transition-duration: .5s;
    }


/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

@media only screen and (min-width: 1024px) {
  header .center {  }
}

@media only screen and (max-width: 1600px) {
  #promoContainer .promo > .right { right: 10%; }
}

@media only screen and (max-width: 1140px) {
  #promoContainer .promo { height: 600px; }
  #promoContainer .promo > a { top: 300px; }
}

@media only screen and (max-width: 1024px) {
  .center { width: 95%; margin: auto 2.5%; }

  #navOverlay { height: auto; }
  nav > ul > li { float: none; border-bottom: 1px solid #00468c; }
  nav ul ul { position: static; width: 100%; }
  nav ul .twoCol + ul { width: 100%; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
  nav .multiCol .col { float: none; width: 100%; padding: 0; }
  nav > ul > .over > .parent:before { content: "-"; }
  nav > ul > li > .parent:before { content: "+"; float: right; }

  #promoContainer .promo { height: 500px; }
  #promoContainer .promo > a { top: 250px; }

  .bigCol, article { width: 56%; margin-right: 10%; }
  .bigCol.right { margin: 0 0 0 10%; }
  
  .lilCol, aside { width: 34%; }
  .sideBox select { width: 110%; }
}

@media only screen and (max-width: 1000px) {
  .contact #map { clear: both; width: 100%; margin: 10px 0 0; }
  .contact #map iframe { width: 100%; }
}

@media only screen and (max-width: 980px) {
  #insideBanner { height: 350px; }
}

@media only screen and (max-width: 930px) {
  #quickLinks ul { display: block; text-align: left; }
  #quickLinks li { display: block; }
}

@media only screen and (max-width: 870px) {
  .findAPhys { margin: 0 0 20px; clear: both; }
  header .billPay { margin: 0 0 20px 20px; }
}

@media only screen and (max-width: 820px) {
  header { position: relative; background: #fff; }
  #overlay { display: none; }

  #promoContainer .promo { height: 400px; background-size: cover; }
  #promoContainer .promo > a { top: 200px; }

  .svg #backToTop { width: 60px; height: 60px; bottom: 20px; background-size: 30px auto; background-position: 15px -30px; }
  .svg #backToTop:hover { background-position: 15px -80px; }
  .svg #backToTop:hover span { top: 18px; }
}

@media only screen and (max-width: 770px) {
  #insideBanner { height: 250px; background-size: cover; }
}

@media only screen and (max-width: 730px) {
  .bigCol, .lilCol, .bigCol.right, article, aside { width: 100%; margin: 0 0 40px; }
}

@media only screen and (max-width: 660px) {
  #promoContainer .promo { height: 300px; }
  #promoContainer .promo > a { top: 150px; }
  #promoContainer h1 { font-size: 2.8rem; line-height: 2.8rem; }

  .serviceDirectory > ul, .sitemap { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
  .logo img { width: 250px; }
  
  #mobileMenu, #menuBtn { margin-top: 10px; }
}

@media only screen and (max-width: 500px) {
  #menuBtn { margin-bottom: 10px; }
  .searchContainer { clear: both; float: none; }
  #Query { width: 100%; height: 47px; box-sizing: border-box; margin: 0 -42px 0 0; }
}

@media only screen and (max-width: 440px) {
  .logo img { width: 160px; }
  #mobileMenu { margin-top: 16px; }

  #promoContainer .promo { height: 250px; }
  #promoContainer .promo > a { top: 100px; }
}

@media only screen and (max-width: 380px) {
  header .billPay { margin-left: 0; clear: left; }
  .findAPhys, header .billPay { width: 100%; box-sizing: border-box; }
  .searchContainer, .findAPhys, header .billPay { margin-bottom: 10px; }

  #insideBanner h1 { line-height: 3.2rem; font-size: 3.2rem; }
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    header { position: absolute; }
    *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
    a, a:visited { text-decoration: underline; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}

/*
 ________
|   __|__| 
|  |__   | Coffey
|_____|  | Communications, Inc.
|__|_____|

*/