/*  Styles common to all pages; load these first */

/* FORWARD COMPATIBILITY */
:root {
	--primary:#111111;
	--secondary:#0090d3; /* was 0089eb */
	--link-color:#0179CB;
  --gold:#ec9600;
  --blue:#1C4A69;
  --dkblue:#2d6087;
  --iconblue:#005599;
  --red:#AD2525;
  --dkred:#6E1717;
  --grey:#F3F3F3;
  --dkgrey:#ccc;
  --border:#DDDDDF;
  --border-lt:#7FC1EC;
  --white:#ffffff;
  --black:#000000;
  --placeholder:#CDCDCD;
}

/* LAYOUT and borders */

body { margin: 0; }
#pageContainer { margin-left:auto; margin-right:auto; margin-top: 1px; max-width: 1040px; position: relative; box-shadow: 0 0 40px 0 #999}
#header { margin: 10px 10px 5px 10px; border-top: 10px solid white; background-image: url(../theme/LogoMSDH.gif);  background-repeat: no-repeat; height: 50px; line-height: 50px; overflow: hidden; position: relative}
#header:hover { background-image: url(../theme/LogoMSDH_over.gif); }
/* #header { margin: 10px 10px 5px 10px;  border-top: 10px solid white; } */
#header a { padding-right: 10px; padding-left: 10px; }
#header img { vertical-align: middle }
/* #nav { float: left; width: 225px; height: 290px; margin: 5px 5px 5px 10px; } */
#nav { float: left; width: 250px; height: 317px; margin: 5px 5px 5px 10px; }
.box { float: left; width: 245px; height:310px; margin: 5px; }
.firstBox { width:250px; margin-left: 10px; }
.clear { clear: both; display: block;  overflow: hidden;  visibility: hidden;  width: 0;  height: 0; font-size: 0; line-height:0}
#footer .box { height: auto; padding-bottom: 10px;}
#footer .lastBox { position: absolute; top: 645px; left: 710px }
#azDropdown { position: absolute; width: 225px; top: 0; right: 0; z-index: 10; }
#azDropdown a { display: block; float: left; width: 35px; height: 35px;  }
div#contact { padding: 8px 6px 4px 6px; }


.threeColumnLeft , .threeColumnCenter , .threeColumnRight { float: left; width: 31%;  box-sizing: border-box; font-size:16px }
.threeColumnCenter { margin-left: 3.5%; }
.threeColumnRight { float: right; }

.icon-features { text-align: center }
/*.icon-features svg { display:none } */
.icon-features h6 {font-weight: bold; font-size:16px; margin: 0 }
.icon-features h2 {font-size:22px; margin: 0; border-top:none }
.icon-features p { margin-top: 0.5em }
/* .icon-features a p::after { content: ' \2192'; color:#69b } */
.icon-features a, .icon-features a:visited { color:black }
.icon-features ul.links { margin-top:0.5em; margin-left:5px; margin-right:5px; } /* for readability, white space between columns of lists */
.icon-features .links a { color:var(--link-color) }
.icon-features ul.links, ul.links.feature-links { list-style-type: none; list-style-image: none; margin-left: 0; padding-left:0;}
/*.icon-features .icons-left .links { text-align:left } */
.icon-features .links li, .feature-links li { border-bottom: var(--border) 1px solid; padding: 8px 0 5px;  margin-bottom: 0; text-align:left}
.icon-features .links li a:first-child, .feature-links li a:first-child { font-weight: 500; }

.inline-icon { width:3rem;margin-right:1rem;box-sizing: content-box; vertical-align:middle}
.feature-icon { box-sizing: content-box}
.feature-icon img { width:3.5rem; box-sizing: content-box}
.icon-features a:focus .feature-icon { background-color: #ddf8ff }

.feature-svg { display: none }

.clearFloats { clear: both; height: 0; font-size: 0; line-height: 0; margin: 0; overflow: hidden;}

/* COLORS */

/* brighter BG color is #4c88b6; softer is #5084b0 */
body { background-color: #cbcbcb;  }
main, .main { background-color: white }
a, a:active, a:focus, a:hover, a:visited { color: #05b; text-decoration: none; }
#header a:hover { color: #0ad; }
#headerLinks { font-weight:500 }
#pageContainer { background-color: White; } /* box-shadow:  0px 0px 30px rgba(50, 50, 50, 0.25); */
#header { background-color: #f4f4f4; }
#nav ul { background-color: #f6f6f6; } /* e4f0f8 */
#nav li {border-bottom: 1px solid #ddd; }
#nav li:last-child {border-bottom: none;}
#nav li:hover, #nav li.clicked { background-color: white; }
#nav a, #nav a:visited { color: #555 }
#nav a:hover { color: #068 }
.box p:first-child, .box p:first-child a { color: #068; width: 90%; padding-bottom: 2px}
.box a, .box a:visited { color: #222; }
.box a:hover { color: #068; }
#footer { background-color: #275c80; clear:both } /* 366686 4c83a9 */
#footer .box { background-color: Transparent }
#footer, #footer li { color: #c4c8dd}
#footer .box > p:first-child { color: #eee; }
#footer a, #footer a:visited { color: #c4c8dd; }
#footer a:hover { color: #e8ebf8; border-bottom: 1px dotted #aab; background-color: transparent; }
div#contact { background-color: #366686; color: #abc; border-top: 1px solid #b0b0b0} /*  background was #407090; border was 10px #5086b4  // 1px dotted #789; */ /* b0b0b0 */
div#contact span { color: #79a; }
div#contact a { color: #8bd; font-weight: normal; }
div#contact a:hover { color: #4ad; }


/* FONTS */

body { font-family: "Noto Sans", "Open Sans", Calibri, "Helvetica Neue", Roboto, Arial, Sans-Serif; font-size: 17px; }
#header { font-size: 15px; text-align: right; }
.box { font-size: 14px; }
#nav, .box > p:first-child { font-family: "Noto Serif", Georgia, Cambria, "Palatino Linotype", serif; } 
#nav, .box>p:first-child { font-size: 17px; }
/*#footer .box>p:first-child { font-family: Cambria, Calibri,  "Helvetica Neue", Helvetica, Verdana, Arial, Sans-Serif; } */
#footer .box>p:first-child { font-size: 17px; font-weight: normal; }
div#contact { text-align: center; font-size: 14px; }
#footer .box a.moreLink { font-weight: normal; }
#footer .box { font-size: 15px; }

/* FINISHING TOUCHES */

article img { max-width: 100% }

ul { padding-left:1.5em }
ol { padding-left:2em } /* to allow space for two-digit numbers */

button, .button { 
   /*height:2.45rem;  */
   padding:0.75em 1.15em 0.6em 1.15em;
   margin-bottom:0.5rem;
   border:none; border-radius:5px;
   background-color:var(--secondary); color:var(--white);
   font-size:0.9rem; font-weight:700; text-transform:uppercase; text-decoration:none;
   display:inline-block;
}
.button:visited { color:white }
.button:hover, #pageContent .button:hover { background-color: var(--dkblue); color:white; text-decoration:none }

.btn-hollow { border:2px solid var(--blue); background-color:transparent; color:var(--blue) }
.btn-hollow:visited { color:var(--blue) }
.btn-action { background-color: var(--gold); }
.btn-action:hover, #pageContent .button.btn-action:hover { background-color: #7C4F00; }
.btn-more, .btn-lt-more { text-transform:uppercase; font-size:90% }

#google_translate_element { float:right; text-align: right;  display: none; clear: both; padding-top: 5px; }
#google_translator { float: right; margin: 0; }
.translation-links { float:right; text-align:right; font-size: 0.8rem; text-transform:uppercase; font-style:normal; color: var(--dkgrey); }
.translation-links a { text-decoration: none; padding-left:5px; padding-right:5px }
.translation-links a:focus { background-color: #ddf8ff }
#translationDisclaimer { display: none }
#translation-en { color:#bbb } /* subdue until needed */
.translated-ltr #translationDisclaimer, .translated-rtl #translationDisclaimer  { display:block; color: #dd0000; padding-top: 5px }
.translated-ltr #translation-es a, .translated-rtl #translation-es  a,
.translated-ltr #translation-vi a, .translated-rtl #translation-vi a { color:#bbb } /* discourage re-translating translated pages */
.translated-ltr #translation-en, .translated-rtl #translation-en { color:#0ef } 
.translated-ltr .box, .translated-rtl .box { height: auto } /* to accommodate translated text of unknown length */

#logoLink { display: block; position: absolute; width: 355px; height: 50px; top: 0; left: 0 }
#HeaderSearchLink { font-weight:bold }

#nav ul { list-style-type: none; margin: 0 ; padding: 0; }
#nav li.endNavList { border-bottom: none }

div#contact img { border: none; margin-left: 10px; vertical-align: middle}

#nav li:hover { background-image: url(../theme/menuArrowHover.png); background-position: right center; background-repeat: no-repeat; }
#nav a { margin-left: 10px; margin-right: 5px;  }
#nav a { display: block; padding: 10px 0 10px 0; }
.box a:hover { background-color: White; }

.box > p:first-child { margin: 10px 0 10px 10px; border-bottom: 1px dotted #aaa; }
#footer .box>p:first-child { border-color: #79b; }
.box ul { margin: 0 0 0 10px; padding: 0; list-style-type: none; }
.box li { margin: 6px 0 0 0; list-style-type: none; }
.menuSlide .box li { margin: 6px 10px 0 0; list-style-type: none; }
#footer .box li { margin: 3px 10px 5px 0; list-style-type: none; }

#connectIconsUpper { display: none; } /* turn on later only if there is room */

#signupBorder { clear: both; background-color: white; width: 100%; box-sizing: border-box; padding: 5px 10px 5px 10px}

#signup {
   clear: both;
   box-sizing: border-box;
   width: 100%;
   padding: 1em 1em 0.6em 1em;
   background-color : #eee; /* d7f1fa */
   border-bottom: 1px solid #e4e4e4;
   border-right: 1px solid #e4e4e4;
   text-align: right;
   font-size: 14px;
   margin-top:10px;
}

#signupEmail { color: #333; border: solid 1px #ddd; font-size: 14px; width:18em; max-width:75% }

#signupButton {
   color: white;
   background-color: #4da779;
   padding-top: 0.4em; padding-bottom:0.25em
}

/*
.cardButton
   {
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 5px;
      background-color: #f9f9f9;
      border:1px solid #eee;
      padding: 20px 10px 20px 15px; margin: 0;
      content: "";
      display: table;
      clear: both;
      width:100%;
      max-width:250px; 
      box-sizing:border-box;
   }

.cardButton_icon { float:left; margin-right: 0.3em; color: #0078cb; } 
.cardButton_label { float:left; font-size:17px; font-weight: bold; margin-top:0 }
.cardButton:hover { background-color: #f0f4f8  }
.cardButton_dark:hover { background-color: #079  }
.cardButton_content { clear:left; margin-bottom: 0; padding-top: 0.25em }

.cardButton_dark { background-color:#257; color:white }
.cardButton_dark .cardButton_content { color:#ccc }
*/


.mobileOnly { display: none}

@media screen and (min-width: 931px)
{
    #connectIconsUpper { display: inline; } /* move social links to the header */
}
@media screen and (max-width: 930px)
{
    #connectIconsUpper { display: none; } /* remove social links from the header */
}

@media screen and (max-width: 735px)
{
   body { font-size: 16px; }

   #header { background-image: url(../theme/LogoMSDH_short.gif); }
   #header:hover { background-image: url(../theme/LogoMSDH_short_over.gif); }
   #logoLink { display: block; position: absolute; width: 135px; height: 50px; top: 0; left: 0 } /* shorten the header's link back to the home page */
   #header img { display:none} /* remove the HealthTalkMS graphic */

   #footer { padding-top: 1px } /* compensating for top margin collapse on headings in the footer */
   #footer .box { font-size: 15px;}
   #footer .box { float:none; width: 100%; margin-left:10px; margin-right:5px }
   #footer .lastBox { display: block; position: static; }

   .threeColumnLeft , .threeColumnCenter , .threeColumnRight { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 1em; }

   #signup { text-align: left }

   .translation-links { float:none; text-align:right; display:block}
   .mobileOnly { display: block }
   .desktopOnly { display: none}
}


@media screen and (max-width: 525px)
{
    #headerLinks { display: none } /* trim away all header links except for Info and Search - they just fit into 320 pixels */
    .box { float: none;clear: both; height: auto; }
    #footer .box { font-size: 15px; }
    .box li { margin-top: 12px } /* add extra spacing for small screens */
}