/*  Styles unique to content pages (load after style.css) */

.temporaryColorForOldWebsite { color:black}
/* FOOTER PROMOTIONS */

/* TRANSITION STYLES */

.p40 { margin: 40px 0 }
.p30 { margin: 30px 0 }
.p20 { margin: 20px 0 }

.accordion-title { font-weight:bold}

/* LAYOUT */

main, .main, .msdh { background-color:white; }
main img, .main img, #article img { max-width: 100% }
#nav { height: auto; margin-right: 10px; } /* to add white space for legibility, double the right margin .  Ordinarily, should be 10px */
#assetNow_homeMenu { display: none }
#assetNow_mobileMenu { display: none }
#assetNow_mobileMenuButton { display: none }
#assetNow_navMenuItems { display: block }
#pageContent { margin: 10px 10px 10px 10px; overflow: hidden; position: relative } /*  overflow:hidden or overflow:auto in pageContent prevents cleared floats within a page from breaking the outer navigation layout */
#footer { clear: left } /* prevents collision between footer and long navigation menues */
#article { margin: 0; } /* encloses all page content below the title/teaser. Left margin can be added for readability of text, even though it makes for a less consistent look. */
div.firstBox { margin-left: 10px; }
#azDropdown { top: 5px; } /* move up to visually join the gray header background */
h1 { padding: 0; margin: 0.75em 0 0.25em 0}
#article { margin-top: 1em }

/* COLORS */

body { color: black; }

/* a:focus { background-color: #ff6;} */

/* #nav ul { background-color: #e9f4de; } */
#nav div#assetNow_homeMenu ul, #nav div#assetNow_mobileMenu ul { background-color: #f0f0f0; }
#nav div#assetNow_homeMenu li:hover, #nav div#assetNow_mobileMenu li:hover { background-color: #f6f6f6; }
ul#assetNow_menuButton li, ul#assetNow_menuButton li:hover {background-color: #4d82a7; border-top:0}
ul#assetNow_menuButton a, ul#assetNow_menuButton a:visited, ul#assetNow_menuButton a:hover, #assetNow_mobileMenuButton a, #assetNow_mobileMenuButton a:visited, #assetNow_mobileMenuButton a:hover { color: #fff; }
ul#assetNow_homeButton li a, ul#assetNow_homeButton li a:visited { color: #367; } /* 839d68 */
#assetNow_mobileMenuButton li, #assetNow_mobileMenuButton li:hover { background-color: #4d82a7}
#nav ul.assetNow_groupChosenActive { background-color: #f8f8f8; }
/*#nav ul.categories { background-color: #eff6ee; }*/ /* #f0f0f0 e9f4de */
#nav ul.categories li { border-bottom: 1px solid #ddd; }
#nav ul.categories li a:focus { background-color:white }

#nav li.assetNow_categoryChosenActive { background-color: #fff; } /* e9f4de was darker e0edd0 */
#nav ul.categories li.assetNow_categoryChosenActive { border-bottom: none } /* e9f4de was darker e0edd0 */
#nav ul.assetNow_groupChosenActive a, #nav li.assetNow_categoryChosenActive a, #nav #subcategoryChosen a { color: black; }
#nav li.subcategory a { color: #333 }
#nav #subcategoryChosen { background-color: #fff; border-bottom: none }
#nav li:hover { background-image: none } /* the right-pointing arrow image leads to a menu on the home page, but not on inner pages, so drop it */
#article { background-color: White }

#pageContent a:hover { color: #00aacc; text-decoration: underline; }

#contact #requestUpdateLink:hover { color: #fff }
#contact #requestUpdateLink, #contact #requestUpdateLink:visited { color: #4d6 }


/* FONTS */

#nav ul.categories { font-size: 15px }
#nav li.subcategory { font-size: 14px; }
#nav ul.assetNow_groupChosen, ul.assetNow_groupChosenActive { font-size:18px; }
#nav li.assetNow_categoryChosenActive, #nav #subcategoryChosen { font-weight:500; font-size:15px; }

h1 { font-family: "Noto Serif", Georgia, Cambria, "Palatino Linotype", serif; font-size: 36px; font-weight:600; color: black; line-height:125%}
#pageContent { line-height: 145%; }

/* FINISHING TOUCHES */

#nav ul.categories a { padding-left: 0px; }
#nav li.subcategory a { padding-left: 10px; }
#article p a, #article li a { border-bottom: 1px dotted #ccc; }
#article ul.links a { border-bottom-width: 0}

#navFiller {
   margin-top: 10px; background-color: #f6f6f6; 
   font-family: "Noto Sans", "Open Sans", Verdana, "Helvetica Neue", Helvetica, Arial, "Trebuchet MS", Sans-Serif; font-size: 14px; 
  }
#navFiller p { color: #036 }
#navFiller ul.navListNotMenu { background-color: transparent; list-style-type: disc; margin-left: 1.5em; padding-bottom: 10px}
#navFiller ul.navListNotMenu li, #navFiller ul.navListNotMenu li:hover { font-size: 14px; margin-bottom: 1em; color: #510; background-color: transparent;  }
#navFiller ul.navListNotMenu a { display: inline; padding: 0; margin: 0; border: none; color: #057 }

.box { height: auto; margin: 0 0 10px 0; background-color: Transparent; line-height: normal; }
.box > p:first-child { color: #068; width: 90%; padding-bottom: 2px}
.box a.moreLink { color: #068 }

a.moreLink { font-style: italic; color: #068 }

#contact #requestUpdateLink { float: left }

abbr { border-bottom: 1px dotted #c9d4be }

.uppercase { font-size:90%; text-transform:uppercase}

#carousel {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.carouselFade { opacity: 0; }

/* EXISTING PAGE STYLES */

.leadImage { float: left; margin: 0.5em 1em 0.5em 0; border: none; } /* stops floating on small screens to make more room for text */
#article .leadImageFixed, main .leadImageFixed, .leadImageFixed { float: left; margin: 0.5em 1em 0.5em 0; border: none; max-width: 25% } /* Just like leadImage, but always floats -- assumed to be small enough (100 px or less) to fit well on small screens */
span.leadLetter { float: left; color: #369; font-size: 400%; line-height: 50%; padding: 10px 5px 5px 0; font-family: "Palatino Linotype", Palatino, Constantia, "Noto Serif", Georgia, Cambria, serif;}

p.leadParagraph {
	font-size: 20px;
   color: #555;
   line-height: 150%;
   /*background-color:#f6f6f6; */
/*   padding:0.75em; */
   margin-top: 0;
   margin-right:2em;
   padding-bottom: 0.5em;
   border-bottom: 1px solid #ebebeb;
   }

h2, h3, h4, .contactBox_header, p.boxHeading, p.specialBox, p.heading, p.headline, ul.menuBar a {
	font-family: "Noto Serif", Georgia, Cambria, "Palatino Linotype", Palatino, serif; 
	margin-bottom: 1em; margin-top: 2em;
	font-weight: 600;
      color: black;
      line-height: 120%;
   }

h2 { font-size: 28px; margin-bottom: 10px; padding: 0.75em 0 0 0; border-top: 6px solid #e8e8e8; margin-top: 2em }
h2:first-child, h2:first-child, .rightColumn h2:first-child, .leftColumn h2:first-child, .rightColumn h2:first-child { border-top: 0; padding-top: 0; margin-top: 1em }
.leftColumn h3:first-child, .rightColumn h3:first-child {  border-top: 0; padding-top: 0; margin-top: 0.5em }

.shadedBox h2:first-child, .shadedBox h3:first-child,
.shadedBlue h2:first-child, .shadedBlue h3:first-child,
.shaded h2:first-child, .shaded h3:first-child,
.accordion-content h2:first-child, .accordion-content h3:first-child
{ margin-top:0.5em; }

 h3, p.boxHeading, p.specialBox, p.heading, p.headline, ul.menuBar a {font-size: 22px; }
/* h4 { font-size: 16px; font-weight: normal; font-style: italic; margin-bottom: 0.5em; color: #555 } */
h4 { font-size: 18px; margin-bottom: 0.75em;}

.contactBox_header { color: #347034; } /* 4b7b4b 668b55 444 8faa74 006baa #dd6633 #007744 */

.column-secondary h2 { font-size: 17px; color: #444 }

.bright, h1.bright, h2.bright, h3.bright, h4.bright, p.bright, div.bright, .plainSidebar h3:first-child.bright, .plainSidebar .sidebar_header:first-child.bright, .sidebar h4.bright, li.bright, a.bright, strong.bright, span.bright { color: #dc6700; }

.sidebar h3:first-child.bright, .sidebar_header:first-child.bright { color: #dc6700}

.highlighted { background-color: #ffee99; padding: 2px 4px; }

.attention { border-left: 8px solid #6c6; padding: 1em 1em 1em 1.5em; background-color: #f0fff0; margin-top: 2em; margin-bottom: 2em;}
.attentionCaution { border-color: #fddd00; background-color: #fffce6}
.attentionLight { border-color: #bbb; background-color: #f8f8f8; border-top: 1px solid #e8e8e8}

div.highlighted > h3:first-child { margin-top: 1em }

.floatLeft { float: left; margin-right: 1em; margin-bottom: 1em }
.floatRight { float: right; margin-left: 1em; margin-bottom: 1em }

aside {
   padding: 1em;
   margin: 1em 5% 1em 5%;
   border: 2px solid #08a;
   border-radius: 12px;
  }
  
  .aside_solid {
   background-color: #f8f8f8;
   padding: 1em 1em 1em 1em;
   margin: 1em 5% 1em 5%;
   border: 1px solid #e8e8e8;
   border-bottom: 1px solid #ddd;
   border-radius: 8px 8px 8px 8px;
  }

.aside_shaded { background-color: #eef4fe; border-style:none }

aside p:first-child { margin-top: 0 }

.aside_header { color: #555; margin: 2em 0 0 0; font-weight: bold; font-size: 120% }


.sidebar {
    width: 32%;
    float: right;
    background-color: #f4f4f4;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #dddddd;
    padding: 0px 10px 10px 10px;
    margin: 0 0 1em 1.5em;
    font-size: 13px;
    line-height: 135%;
    overflow: hidden; }

.sidebar h2 { font-size: 18px; margin-top: 0.5em } /* A little smaller than main content size */
.sidebar h3 { font-size: 18px; margin-top: 0.5em }
.sidebar_header { font-size: 18px; }

/* .sidebar h3:first-child, .sidebar p.heading { background-color: #519fd7; padding: 7px; color: white; margin: 0 -10px 0 -10px; border: none} */
.sidebar h3:first-child, .sidebar p.heading, .sidebar_header { padding: 7px; margin: 0 -10px 0 -10px; border-bottom: 1px solid #ccc; color: #666 } 
.sidebar h4:first-child { margin-top: 10px }
.sidebar img:first-child { margin-top: 10px; } /* since sidebar lacks any top padding of its own, and images don't carry any themsleves */
.sidebar ul:last-child {margin-bottom: 0} /* since the padding in the sidebar itself is sufficient. */

.plainSidebar { background-color: #f8f8f8; padding-top: 10px }
.plainSidebar > p:first-child { margin-top: 0 }
.plainSidebar > h3:first-child, .plainSidebar .sidebar_heading { margin-top: 0; background-color: transparent }
.plainSidebar > h4:first-child { margin-top: 0 }

.shaded > h3:first-child, .shaded > h4:first-child,
.shadedBox > h3:first-child, .shadedBox > h4:first-child,
.shadedBlue > h3:first-child, .shadedBlue > h4:first-child { margin-top: 1em }

.contactBox { border-top: 6px solid #e8e8e8; padding: 0.5em; margin-top: 2em; background-color: #fafafa }
.contactBox_header, .aside_header { font-size: 120%; padding-top: 0; margin-top: 0 }

/*.leftColumn { float: left; width: 43%;  }
.rightColumn { float: right; width: 43%; }
*/
.leftColumn { float: left; width: 47%; box-sizing: border-box;}
.rightColumn { width: 47%; display:inline-block; margin-left:5%;margin-bottom:1em; box-sizing: border-box; }
.rightColumn.with-divider { margin-left:2%;padding-left:3%; border-left:1px solid #ddd; box-sizing: border-box;}
.leftColumnNarrow, .leftColumnWide { float: left; box-sizing: border-box;}
.rightColumnNarrow, .rightColumnWide { display:inline-block; margin-left:5%;margin-bottom:1em; box-sizing: border-box;  }
.leftColumnNarrow, .rightColumnNarrow { width: 33%; }
.rightColumnWide, .leftColumnWide { width: 61%; }


/* .rightColumn:before, .rightColumnWide:before, .rightColumnNarrow:before { content: ""; display: table; line-height: 0; } */
.rightColumn:after, .rightColumnWide:after, .rightColumnNarrow:after, .threeColumnRight:after  { content: ""; display: table; line-height: 0; clear: both; }
.rightColumn + p, .rightColumn + ul, .rightColumn + div, .rightColumn + img, .rightColumn + h2, .rightColumn + h3 { clear: both; } /* for browsers that don't support after? maybe */
.rightColumnWide + p, .rightColumnWide + ul, .rightColumnWide + div, .rightColumnWide + img, .rightColumnWide + h2, .rightColumnWide + h3 { clear: both }
.rightColumnNarrow+ p, .rightColumnNarrow+ ul, .rightColumnNarrow+ div, .rightColumnNarrow+ img, .rightColumnNarrow+ h2, .rightColumnNarrow+ h3 { clear: both }
.threeColumnRight + p, .threeColumnRight + ul, .threeColumnRight + div, .threeColumnRight + img, .threeColumnRight + h2, .threeColumnRight + h3 { clear: both }

.fullWidth { width: 100% } /* really for responsive card images, but useful in many places for screen responsiveness */

.card { width: 100%;  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 5px; background-color: #f9f9f9}
.card h3 { color: white; background-color: #2d6087; font-size: 20px; padding: 20px 20px 20px 20px; margin: 0 } /* background was 4d82a7 */
.card h3 a { color: white;  }
.card h3 a span::after { margin-left: 0.25em; color: orange; content: "\2192" } /* add an arrow after links in card titles   \279c  */
.card h3 a.noCardLinkArrow span::after { content: none } /* when it needs to be suppressed */
.card h3 span, .card h3 a span { color: #ccc; font-size: 14px; }
.cardHeader { color: white; background-color: #2d6087; font-size: 20px; padding: 20px 15px 20px 20px; margin: 0; font-family: "Noto Serif", Georgia, Cambria, "Palatino Linotype", Palatino, serif; } 
.cardHeader a { color: white;  }
.cardHeader a:hover, .cardHeader a:focus { color: #dee;  }
.cardHeader a span::after { margin-left: 0.25em; color: orange; content: "\2192" } /* add an arrow after links in card titles   \279c  */
.cardHeader a.noCardLinkArrow span::after { content: none } /* when it needs to be suppressed */
.cardHeader span, .card h3 a span { color: #ccc; font-size: 14px; }
.cardContent { margin: 10px; padding-bottom: 5px; }
.cardContent p { line-height: 150%}
.cardFooter { border-top: 1px solid #ccc; padding-top: 10px }
a.cardLink { text-transform: uppercase; font-weight: bold} /* was colored e80 */
a.cardLink2 { font-size:80%; float: right; text-align: right }

details { margin-bottom: 1em; margin-left:2em }
details summary { margin-left: -1.5em }
details[open] { color:black }
details:not([open]) { color:transparent }
details  { transition: color 0.5s }
summary { font-weight: 500; color: #006677; cursor: pointer; background-color: #f4f4f4; border: 0; padding: 8px  }
.details_longSummary summary {
   font-weight:normal;
   color:inherit;
   background-color:transparent;
}
.details_longSummary .readMore {
   font-weight: 500;
   color: #479;
   text-decoration:underline;
}
.details_longSummary[open] .readMore {
   color: transparent;
   text-decoration:none;
}

.findYourProgram { background-color:#1765b7; padding: 15px; color: #ebebeb} /* ffe062  */
.findYourProgram strong { font-size:110%; color:white }
.findYourProgram .asterisk { font-size: 80px; font-wight: bold; float:left; margin-right:20px; color:#ffd421; line-height:80px;} /* 057FFC */
.findYourProgram a { padding-left:10px; color:#CCFFFF }


.skip-link { background-color:yellow }

.show-on-focus {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important; }

.show-on-focus:active, .show-on-focus:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important; }

/* =========== accessible accordion ===============*/

/* .accordion { border-bottom: 1px solid #ccc; } */

.accordion-button {
   background-color: transparent;
   color: black;
   font-weight: 500; /* 500 for semi-bold */
   width: 100%;
   display: block;
   cursor: pointer;
   border: 0;
   border-top: 4px solid white;  
   margin: 0;
   padding: 16px 0 6px 0; 
   line-height:26px;
   text-align:left;
}

.accordion-button-right {
   background-color: transparent;
   color: black;
   font-weight: 500; /* semi-bold */
  width: 100%;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  cursor: pointer;
  border: 0;
  border-top: 1px solid #ccc;  
  margin: 0;
  padding: 1em 0 1em 0; 
/*  line-height:32px; */
  vertical-align:middle;
}

.accordion-icon {
  /* transition: transform 0.25s; */
 /*  font-weight:bold; */
/*  font-size: 28px; */
   float:left;
   margin-right:5px;
}

.accordion-icon svg { transition: transform 0.25s; }
.accordion-icon path {fill: #099; }
.accordion-button:focus .accordion-icon path {fill: #999; }

.accordion-button.is-active .accordion-icon svg {
transform: rotate(90deg);
}

/* this class is automatically inserted by a load-time script on the first element folowing an accordion button */
.accordion-content {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
  margin: 0 0 0 1em;
}

.accordion-content.is-active { margin-bottom: 1em; margin-top: 1em }

/* another automatically-inserted element: an h4 that wraps the accordion button and gets this class*/
.accordion-header { margin: 0; background-color:#f0f0f0;}

/* ============================= */


#feedbackBox { margin-top: 1em; border: 1px solid #ccc; padding:1em }
#feedbackBox ul { margin-bottom: 0 }

.formFieldsPadded input, .formFieldsPadded textarea, .formFieldsPadded select { margin-bottom: 1em }
.formLabelsPadded label { margin-top: 1em }

.modernStyleForm label { display: block; }
.modernStyleForm label.inline { display: inline; }
.modernStyleForm input, .modernStyleForm textarea, .modernStyleForm select { max-width: 75% }

.dynamicNote { color: #cc2e01; font-weight: bold}

#siteAlert { color: white; background-color: #a00; padding: 2px 5px 2px 5px; }

.footerPromotion { margin-top: 10px; border-top: 1px solid #ccc; width: 100% }
.footerPromotion img { width: 760px }


/* ======= NEW AssetNow styles ================= */

#assetNow_pageTitle { margin-top: 0px; margin-bottom: 0; padding: 9px 5px 8px 10px; background-color: #3172a0; } /* 4881a8 was light blue d8ebf8 or med blue ddeefb or dark blue 5991bf */  /* 4d82a7 */
#assetNow_fileViewers { border-top: 1px dotted #ccc; font-size: 13px; padding-top: 1em; color: #888 }
.assetNow_subcategoryList { list-style-type: none; margin-left:0; padding-left:0; margin-top:0; max-width:17em }
.assetNow_subcategoryList li { border-bottom: var(--border) 1px solid; padding: 8px 0 5px;  margin-bottom: 0; font-weight:bold}
#assetNow_subcategoryListHeading { clear:both; margin-bottom:1em; padding-top:2em}
#assetNow_subcategoryListHeading, #assetNow_additionalPagesListHeading, #assetNow_archiveSubcategoriesListHeading { font-style: italic; font-size:110% }
#assetNow_teaserTop { margin-top: 0.5em;}
#assetNow_pageSubtitle { font-size: 15px; font-style: italic; color: #666}
img.assetNow_fileViewerIcon {  }
div.assetNow_itemEditButton {  }

.assetNow_pageAndFileList li { margin-bottom: 0.75em; line-height:135%; padding-left:0.25em}
.assetNow_pageAndFileList a { font-weight:500; color: #039} /* trying a darker shade instead of going semi-bolder */
li.assetNow_appListing {  }
li.assetNow_pageListing {  list-style-image: url(/msdhsite/images/list_item_link.png); }
li.assetNow_fileListing { clear: right; margin-bottom: 0.5em; list-style-image: url(/msdhsite/images/list_item_document.png); }
.assetNow_fileListingDetails { float: right; width: 9em; font-size: 11px; vertical-align: middle; font-weight:bold; padding-left:1em }
.assetNow_fileSize { font-weight: normal; color: #666; padding-left: 4px }
.assetNow_listItemSubtitle { font-weight: normal; color: #777; width: 90%; font-size: 13px; margin-top: 0.2em; line-height: 100% }
.assetNow_listItemDescription { color: #777; font-size: 90%; font-weight:normal}
.assetNow_fileInfoLink {  }
.assetNow_pageAndFileLabel { font-weight:600; border-bottom: 1px solid #ddd; margin-top:2em }
.assetNow_listGroupDivider { color:transparent; font-size:8px; line-height:1; margin-top: 0; border-bottom: 1px solid #ddd}
.assetNow_procurement_heading { font-size: 18px; padding-top:0; margin-top: 2em; margin-bottom: 0.5em; border-top:0; }

/*#assetNow_pageOptions { background-color: #e0ecf2; font-size: 12px; clear: both;  padding-left: 10px; height: 2.5em; line-height:2.5em; margin-top: 10px; }*/
#assetNow_pageOptions { clear: both; border-top:6px solid #3172a0; font-size: 13px; color:#555; font-style:italic }
#assetNow_pageOptions #reviewDate { float: left;  }
#assetNow_pageOptionsButtons  { float: right; }
/*#assetNow_pageOptionsButtons a  { float: left; border-left: 10px solid white; color: white; background-color: #4d82a7;  padding: 0px 1.5em 0px 1.5em; height: 2.5em; } */
/*#assetNow_pageOptionsButtons a:hover  { background-color: #2c5389; color: white; text-decoration: none }*/

#assetNow_OptionsBar {padding: 15px 5px 0px 10px; background-color: #3172a0; height:25px; display:grid; template-columns: 20% 80%; column-gap: 10%;text-transform:uppercase; }
.printOption { grid-column-start: 1; box-sizing:border-box; font-size: 0.8rem; line-height: 1}
   
li.assetNow_recentFile { background-color: #eef4ff; padding: 3px; }
span.assetNow_requestFile { font-size: 12px; font-style: italic;  }
span.assetNow_untitled {  }

#google_translate_element { float:right; text-align: right;  display: none; clear: both; padding-top: 5px; }
#google_translator { float: right; margin: 0; }
#pageContent .translation-options a:hover, #pageContent .printOption a:hover { color:white }
.translation-options a, .printOption a { color:#ddd;  padding-left: 5px; padding-right: 5px}
.translation-options { line-height:1; margin-top: 0; grid-column-start: 2; box-sizing:border-box; text-align: right; font-size: 0.8rem;  text-transform: uppercase; color:#ddd; }

/* Page-specific styles */

.boilWaterIssuedDate { color: #b00; }

.newsRelease p:first-child {font-size: 120%; color: #888; line-height: 150%}

.leftColumnConnect {  float: left; width: 15%; }
.leftColumnConnect img { margin-top: 2em;  }
.rightColumnConnect { float: right;  width:83%; margin-left: 2%; }

table.MDHC thead td { background-color: #d8f1f1; border: 1px solid #999; font-weight: bold }
table.MDHC td { padding: 3px 10px; background-color: #edfaf7; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; vertical-align: middle; font-size: 85% }
table.MDHC td.location { background-color: #d8f1f1; font-weight: bold; border: 1px solid #999 }
table.MDHC tr.singleRow td { border-top: 1px solid #999; border-bottom: 1px solid #999 }
table.MDHC tr.firstRowInGroup td { border-top: 1px solid #999;}
table.MDHC tr.lastRow td { border-bottom: 1px solid #999;}

table.MDHC.municipalities thead td { border: 1px solid #999 }
table.MDHC.municipalities tbody tr>td:first-child { font-weight: bold; background-color: #d8f1f1; border: 1px solid #999 }
table.MDHC.municipalities tbody td { border: 1px solid #ddd;  }

table.topAlignedTable td { vertical-align: top; }

 .adminPage .indentOne { margin-left:1.5em;  }
 .adminPage .indentTwo { margin-left:3em;  }
 .adminPage .indentThree { margin-left:5em;  }
 .adminPage span { text-transform: uppercase; color: #666;  }

.boilWaterGraphicHeader { text-align: center }
.boilWaterGraphicHeader_released { display: none }

/* some generic table classes */

table.simpleTable td, table.simpleTable th { padding: 0.5em; border: 1px solid #ccc;  }
table.simpleTable thead td, table.simpleTable thead th { background-color: #f4f4f4; font-weight: bold }
table.simpleTableSmaller { font-size: 80% }
table.simpleTableSmaller td, table.simpleTableSmaller th { padding: 0.2em }

/* ========== Styles from the old site  (some may have become unused by now ================ */

h2 + h3, h3 + h4 { margin-top: 1.5em }
h3 + h4 { margin-top: 1em}
h2 + .sidebar { margin-top: 1em }

p.heading+p, h3+p, h4+p { margin-top: 0.5em }

div.ems { background-color: White }

div.narrow { width: 760px }

#WNV td.borderSides { border-right: 1px solid #ddd; border-left: 1px solid #ddd; }

tr.even { background-color: #f4f8fb }

td.neg {
    text-align: center;
    color: #bbbbbb; }

td.pos {
    text-align: center;
    font-weight: bold; }

td.formLabel {
    background-color: #ccddee;
    border-top: 1px solid #aabbcc;
    color: #555566; }

td.formSection {
    background-color: white;
    font-weight: bold;
    padding-top: 1em; }

ul.flushleft {
    margin-left: 0;
    padding-left: 0; }

ul.bulletleft {
    margin-left: 0;
    padding-left: 16px; }


#article li { margin-bottom: 0.5em }

ol.spaced li, ul.spaced li { margin-bottom: 0.5em; line-height: 140% }
ol.spacedWide li, ul.spacedWide li { margin-bottom: 0.75em }

ul.links { line-height: 140%; list-style-image: url(/msdhsite/images/ArrowGrayBullet.png); vertical-align: middle}
ul.links li, #article ul.links li  { padding-bottom: 0.5em;  background-image: none; }
ul.links li a { font-weight:500; }
/* ul.links li a:focus { background-color: #ddf8ff } */
/* .shadedBox ul.links li a:focus { background-color: white } */

ul.linksShaded { line-height: 140% }
ul.linksShaded { list-style-image: url(/msdhsite/images/ArrowGrayBullet.png) }
ul.linksShaded li { padding-bottom: 0.5em }

div.ems ul.linksShaded a { font-weight: bold }

ul.numbered { list-style: none; counter-reset: steps;   }
ul.numbered li { counter-increment: steps;  margin-bottom: 1em;  }
ul.numbered li::before {
  content: counter(steps);
  margin-right: 0.5rem;
  background: #ff6f00;
  color: white;
  font-weight: normal;
  font-size: 125%;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}

/* Table of contents (toc) list styles */
p.toc { color:#666; text-transform: uppercase; margin-bottom:0; margin-top:1.5em}
ul.toc li a, #article ul.toc li a { padding-bottom:0.5em; border-bottom: 1px solid #ccc }
ul.toc li:last-child a, #article ul.toc li:last-child a { padding-bottom:0; border-bottom: none}
ul.toc li { margin-top:0.35em }
ul.toc { list-style-image:none; list-style-type:none;  margin-left:1em; padding-left:0;margin-top:0; }

.centered { text-align: center }

.shaded, .shadedBox, .shadedBlue {
    background-color: #F3F3F3;
    padding: 1em 0.5em 1em 1em;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    overflow: hidden;
}

.shadedBox_dark { background-color: #006686; color:#f0f0f0}
.shadedBox_dark a { color:#cee}   .shadedBox_dark a { color:#aef}
.shadedBox_dark a.button { color:inherit}
.shadedBox_dark h2, .shadedBox_dark h3, .shadedBox_dark h4, .shadedBox_dark h5, .shadedBox_dark h6 { color:white}
.shadedBox_dark .caption, .shadedBox_dark .note  { color:#bbb}
.dark1 { background-color: #007c80 }
.dark2 { background-color: #800a00 }
.dark3 { background-color: #59064e }
.dark4 { background-color: #8A6200 }

.shadedBlue { background-color: #eef4fe } 

/* ----- mobile newsletter signup ----- */

#newsletterSignup { display: none; }

.summary { color: #606060 }

.sectionTitle, p.section {
    font-weight: bold;
    font-size: 120%;
    margin-top: 2em;
    padding-bottom: 0em;
    border-bottom: 1px solid #dddddd; }

.note {
    font-size: 11px;
    color: #888; }

.caption { display:block; font-size: 90%; color:#555; font-weight: normal }

.black { color: #000000 }

.indented { margin-left:1.5em }

.bold {
    font-weight: bold;
    color: #333; }

.semibold { font-weight: 500}

.grayBold {
    font-weight: bold;
    color: #666; }

.lightGrayBold {
    font-weight: bold;
    color: #888; }

.grayText { color: #666 }

.lightGrayText { color: #999999 }

/* a hidden link for quick access to the dynamic page from static ones */

#toDynamicPage { height: 4px; width: 4px; }
#toReviewer { height: 3px; width: 3px; float: right; }
[data-begins] { display:none }

/* STD-HIV Resource entries */

#HIVResourceForm label { display: block; color: #666;}
#HIVResourceForm input, #HIVResourceForm textarea, #HIVResourceForm select { background-color: #f4f4f4;  }
#HIVResourceForm div.formFieldsPadded input, #HIVResourceForm div.formFieldsPadded textarea, #HIVResourceForm div.formFieldsPadded select { margin-bottom: 1em }
#HIVResourceForm div.formLabelsPadded label { margin-top: 1em }
div.HIVResource { width: 660px }
div.HIVResource table { border-collapse: collapse;  }
div.HIVResource td { padding: 4px;  border: 1px solid #ccc}
div.HIVResource th { padding: 4px;  border: 1px solid #ccc; font-weight: normal }
div.HIVResource td.serviceType { font-weight: bold }
div.HIVResource p.serviceTableHeading { font-style: italic }

/* County Offices */

ul.wicDistributionCenters { font-size: 90%; line-height: 150% }
ul.wicDistributionCenters li:first-line { font-weight: bold; font-size: 110%; }
.wicDistributionCenters span { color: #e80 }

/* Topics A-Z */

.topicsPageLetterSection { background-color: White; padding: 5px; margin-bottom: 10px }
.topicsPageLetterSection a { line-height: 200% }
.topicsPagePopularSection a { font-weight: bold }

p.topicLetter {
    float: right;
    font-size: 36px;
    font-weight: bold;
    color: #ddd;
    margin: 0.5em 0.5em 0 0; }

.letterLinks { background-color: #ccc }
.letterLinks a { padding: 2px 2px }
.letterLinks a:hover { background-color: #f4f4f4 }
.letterLinks td { border: 1px solid #ccc; background-color: white; text-align: center }
.letterLinks td:hover {background-color: #f4f4f4;  }

.letterLinksLarge  { text-align: center; background-color: white; }
.letterLinksLarge a {
   background-color: white;
   font-weight: bold;
   font-size: 120%;
   width: 2em;
   height: 2em;
   border: 1px solid #ccc;
   float: left;
   padding-top: 0.5em
 }
.letterLinksLarge a:hover { background-color: #eee }

.searchTop { text-align: right; clear: both }

/* Admin page */

#AdminTable { border-width: 0; width: 100%; background-color: #f4f4f4 }
#AdminTable td { padding: 2px 1px 2px 1px; margin: 0 0 0 0; vertical-align: top }
#AdminTable td table { width: 100% }
#AdminTable td table td { padding: 0; margin: 0 }


/* ============= */

#menuSymbol {
   background-image: url(../theme/MenuIcon.png);
   width: 27px;
   height: 22px;
   display: block;
   float: right;
   margin-right: 5px;
}

#mobileMenuSymbol {
   background-image: url(../theme/mobileMenuIcon.png);
   width: 27px;
   height: 23px;
   display: block;
   float: right;
   margin-right: 5px;
}

/* ============= */


@media only screen and (min-width: 735px)
{
   a[href^="tel:"] { color:black } /* don't draw attention to telephone number links on desktop displays */
}

@media only screen and (max-width: 950px)
{
   div.narrowScreenBreak { clear: both; }
   iframe.flexibleFrame { max-width: 100% }
   img { max-width: 100% }
}

@media screen and (max-width: 735px)
{
   #assetNow_pageOptionsButtons { float:right; margin-top: 10px; }
   #asetNow_pageOptions #reviewDate { float: none; }

   .leftColumn, .leftColumnNarrow, .leftColumnWide, .rightColumn, .rightColumnNarrow, .rightColumnWide, div.infoDeskColumn, div.boxBody, .sidebar, input, textarea { float: none; width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 1em; padding:5px; border-left:none}
   .leftColumn .button, .leftColumnNarrow .button, .leftColumnWide .button, .rightColumn .button, .rightColumnNarrow .button, .rightColumnWide .button, .threeColumnLeft .button, .threeColumnCenter .button, .threeColumnRight .button { display:inline-block; height:auto; margin-bottom:0}
   .shaded, .shadedBox, .shadedBlue { padding-left:1em } /* in case a shaded item is within a column */
   
#article .leadImageFixed, main .leadImageFixed, .leadImageFixed { max-width: 30%}
   
   input[type=radio], input[type=checkbox] { width: auto; }
   .modernStyleForm input, .modernStyleForm textarea, .modernStyleForm select { background-color: #f4f4f4;  max-width: 90% }

   .translation-links { float:none; text-align:right; display:block}
   #assetNow_pageSubtitle { max-width:100% }
   }


/* Drop the side navigation in favor of mobile-style accordion on the top */
@media screen and (max-width: 680px)
{
    #nav { float: none; width: auto; margin-right: 10px; }
    #navFiller { display: none; }
    #assetNow_mobileMenu { display: block }
    #assetNow_navMenuItems { display: none }
    #assetNow_menuButton { display: none }
    #assetNow_mobileMenuButton { display: block }
    div.infoDeskColumn { padding-left: 0 }
    td.menuButton, td.menuButtonLeft { display: block; width: auto; margin-bottom: 1px; }

    div.PublicServices ul { margin-left: 1em; padding-left: 0 }
    div.PublicServices img { float: none; }

   textarea, input { max-width: 400px }

   .toolkitButton { float: none; margin: 0 0 0.5em 0; width: 35% }

    #popupBox p { color: white; font-size: 200%; line-height: 130% }
    #popupBox h3 { color: #CCFFCC; font-size: 250% }

   #scopedByScopedPolyfill_1 { display: none} /* DIV enclsoing GovDelivery slide-up newsletter prompt */

   #newsletterSignup {
      font-family: "Futura", "Avenir","Century Gothic", sans-serif;
      font-size: 22px;
      margin-left: 3%;
      margin-top: 10px;
      display: block;
    }

   #newsletterSignup p, #newsletterSignup span { color: #789b58; margin-top: 0; margin-bottom: 8px; line-height: 120%}
   #newsletterSignup .light { color: #777777; }
   #newsletterSignup .smaller { font-size: 18px }
   #newsletterSignup .colored { color: #789b58; }
   #newsletterSignup .emphasized { color: #a80; font-weight: 600 } /* #688b88;  */
   #newsletterSignup button  {  color: white;  background-color: #789b58;  font-weight: bold; border-style: none;  padding: 4px 7px 5px 7px; line-height : 18px; vertical-align: middle; margin-top: 4px}
   #newsletterSignup input { color: #888; border: solid 1px #ddd; font-size: 14px; width: 75%; }
   #newsletterSignup select { color: #888; font-size: 14px; border-color: #ddd; margin-bottom: 10px }

   #assetNow_pageSubtitle { clear: both }
   .assetNow_fileListingDetails { float:none; width:auto; text-align:left;}   
}

/* collapse columns and sidebars */
@media screen and (max-width: 550px)
{
	p.leadParagraph { font-size: 18px; margin-right: 0}
   .sidebar { margin-top: 10px }
   .disappearing { display: none }
   .floatRight { float: none; margin-left: 0 }
   h1 { font-size: 30px }
   h2 { font-size: 24px }
   h3 { font-size: 20px }   
   h4 { font-size: 16px }   
   aside { margin-left: 5% }
 }

@media screen and (max-width: 410px)
{
    .leadImage { float: none; margin-right: 0; }
    textarea, input { max-width: 300px }
   .toolkitButton { width: 75% }
   dl.horizontal dt,  dl.horizontal dd { float: none; display: block}
   table.simpleTableMobileSmaller { font-size: 80% }
}