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

/* LAYOUT and borders */

body { margin: 0; }
#pageContainer { margin-left:auto; margin-right:auto; margin-top: 1px; max-width: 950px; position: relative; }
#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; }
.box { float: left; width: 225px; height:255px; margin: 5px; }
.firstBox { margin-left: 10px; }
div.clear { clear: both; display: block;  overflow: hidden;  visibility: hidden;  width: 0;  height: 0; font-size: 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; } 

/* COLORS */

/* brighter BG color is #4c88b6; softer is #5084b0 */
body { background-color: #5086b4; background-image: url(../theme/TextureGrain.gif) }  

a, a:active, a:focus, a:hover, a:visited { color: #069; text-decoration: none; }
#header a:hover { color: #0ad; }
#pageContainer { background-color: White; } /* box-shadow:  0px 0px 30px rgba(50, 50, 50, 0.25); */
#header { background-color: #f0f0f0; }
#nav ul { background-color: #e0ecf2; }
#nav li { border-top: 1px solid white; border-bottom: 1px solid #d0d2dc; }
#nav li:hover, #nav li.clicked { background-color: #f4f0fb; }
#nav a, #nav a:visited { color: #005 }
#nav a:hover { color: #068 }
.box { background-color: #f4f4f4; color: #333 }
.box p:first-child, .box p:first-child a { color: #068; width: 90%; padding-bottom: 2px}
.box a, .box a:visited { color: #333; }
.box a:hover { color: #068; }
/* #footer { background-color: #4f7da1; } */
#footer { background-color: #479; border-top: 10px solid #5086b4; }
#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 dotted #789; } /*  background was #407090; border was 10px #5086b4 */
div#contact span { color: #79a; }
div#contact a { color: #8bd; font-weight: normal; }
div#contact a:hover { color: #4ad; }
#azDropdown { background-color: #f0f0f0 }
#azDropdown a:hover { background-color: #fff }

/* FONTS */

body { font-family: "Noto Sans", "Source Sans Pro", "Open Sans", Verdana, "Helvetica Neue", Arial, "Trebuchet MS", Sans-Serif; font-size: 14px; }
#header { font-size: 13px; text-align: right; }
.box { font-size: 13px; }
#nav, .box > p:first-child { font-family: Georgia, Constantia, 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: 13px; font-weight: bold; }
div#contact { text-align: center; font-size: 14px; }
#footer .box a.moreLink { font-weight: normal; }
#footer .box { font-size: 13px; }

/* FINISHING TOUCHES */


#translationDisclaimer { display: none }
.translated-ltr #translationDisclaimer, .translated-rtl #translationDisclaimer  { display:block; color: #dd0000; padding-top: 5px }
.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 { background-color: #e4e4e4; padding-top: 5px; padding-bottom: 5px }

#azDropdown { display: none; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; }
#azDropdown a { border: 1px solid #f8f8f8; text-align: center; padding-top: 10px; font-weight: bold}
#azDropdown #azClose { font-size: 12px;  font-weight: normal; width: auto; border: none; padding-top: 15px; margin-left: 95px; color: #888}
#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 { margin-left: 10px; margin-right: 10px; border-bottom: 1px solid white; }
#nav a:hover { background-image: url(../theme/menuArrowHover.gif); background-position: right center; background-repeat: no-repeat;  }
*/
#nav li:hover { background-image: url(../theme/menuArrowHover.gif); background-position: right center; background-repeat: no-repeat; }
#nav a { margin-left: 10px; margin-right: 10px;  }
#nav a { display: block; padding: 10px 0 10px 0; }
.box a:hover { background-color: White; }
.box.covidDark a:hover { background-color: #368; }

.box > p:first-child { margin: 10px 0 0px 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: 4px 10px 0 0; list-style-type: none; }
.menuSlide .box li { margin: 3px 10px 0 0; list-style-type: none; }
#footer .box li { margin: 3px 10px 0 0; list-style-type: none; }

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

#sidebarSubscriptionForm { text-align: center; padding-top: 1em; margin-left: 10px; margin-right: 10px }
#sidebarSubscriptionForm input { text-align: center; font-size: 14px; width: 100%; color: #999 }
#sidebarSubscriptionForm select { font-size: 12px;background-color : #fafafa; color: #777 }
#sidebarSubscriptionForm button { font-size: 14px; background-color : #002f5f; color: white; padding: 4px 8px 4px 8px;  }
#sidebarSubscriptionForm button img { vertical-align: middle; margin-top: -1px}

#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: 5px 10px 5px 10px;
   color: #666;
   background-color : #eee;
   border-bottom: 1px solid #e4e4e4;
   border-right: 1px solid #e4e4e4;
   text-align: right; 
   font-family: Georgia; 
   font-size: 16px; 
   line-height: 16px;
}

#signupEmail { color: #aaa; border: solid 1px #ddd; font-size: 14px }

#signupButton {
   color: white;
   background-color: #7b9;
   border: 1px solid #ccc;
   font-weight: bold;
}


/* Just doing Microsoft a favor */

canvas { -ms-touch-action: double-tap-zoom; }


@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: 780px)
{
   body { font-size: 15px; }

   #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 */
   #footer .lastBox { float: left; display: block; position: static; }

   #signup { text-align: left }

} 

@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 */
    #footer .box { font-size: 15px; float: none }
    #footer .box li { margin-bottom: 0.75em }
}