/*
  SOUTH DAKOTA SECRETARY OF STATE
  DREAMWEAVER DESIGN VIEW STYLESHEET

  This file intentionally uses conservative CSS so Dreamweaver Design View
  remains editable. Modern browsers and Dreamweaver Live View also load
  sdsos-modern.css through Assets/js/load-modern-css.js.
*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #F3EFE5;
  color: #1E1B16;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
a { color: #1C2B45; }
a:hover { color: #7A2E2E; }
img { border: 0; max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 12px; color: #0F1826; font-family: Arial, Helvetica, sans-serif; }
p { margin: 0 0 15px; }
ul, ol { margin-top: 0; }
[hidden] { display: none; }
.skip-link, .sr-only, .visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Header */
.site-head { background: #0F1826; color: #FFFCF6; border-bottom: 1px solid #354258; }
.site-head-inner { display: table; width: 100%; max-width: 1160px; margin: 0 auto; padding: 16px 24px; }
.site-brand { display: table-cell; width: 57%; vertical-align: middle; color: #FFFCF6; text-decoration: none; }
.site-head-seal { display: table-cell; width: 64px; height: 64px; vertical-align: middle; background: url("../images/south-dakota-state-seal.png") center center no-repeat; background-size: 60px 60px; text-indent: -9999px; overflow: hidden; }
.site-head-text { display: table-cell; vertical-align: middle; padding-left: 15px; }
.site-head-eyebrow { display: block; color: #E0B86F; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.site-head-title { display: block; color: #FFFCF6; font-size: 28px; font-weight: bold; line-height: 1.1; }
.site-head-sub { display: block; color: #D7DAE0; font-size: 15px; margin-top: 4px; }
.site-head-tools { display: table-cell; width: 43%; vertical-align: middle; padding-left: 28px; }
.official-site { color: #E7E4DA; font-size: 12px; }
.official-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #C79A4C; border-radius: 8px; }
.site-utility-links { text-align: right; margin-bottom: 8px; }
.site-utility-links a { color: #F5E7C6; font-size: 13px; margin-left: 15px; text-decoration: none; }
.site-search-form { margin-top: 8px; }
.site-search-control { display: table; width: 100%; background: #FFFCF6; border: 1px solid #C79A4C; }
.site-search-control input { display: table-cell; width: 78%; padding: 12px; border: 0; font-size: 15px; }
.site-search-control button { display: table-cell; width: 22%; padding: 12px; border: 0; background: #C79A4C; color: #0F1826; font-weight: bold; }
.site-search-results { background: #FFFCF6; border: 1px solid #D3C8AE; padding: 10px; }

/* Primary navigation and services menu */
.primary-nav { background: #102038; border-bottom: 1px solid #253650; }
.primary-nav-inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.primary-nav a { display: inline-block; padding: 14px 22px; color: #FFFCF6; text-decoration: none; font-weight: bold; border-left: 1px solid #253650; }
.mega-wrap { background: #FFFCF6; border-bottom: 1px solid #D3C8AE; }
.mega-bar { max-width: 1160px; margin: 0 auto; padding: 10px 24px; text-align: right; }
.mega-toggle { padding: 11px 16px; border: 0; background: #0F1826; color: #FFFCF6; font-size: 14px; }
.mega-panel { background: #0F1826; color: #FFFCF6; }
.mega-inner { max-width: 1160px; margin: 0 auto; padding: 26px 24px; }
.mega-col { display: inline-block; width: 23%; margin-right: 1%; vertical-align: top; }
.mega-heading { color: #C79A4C; font-size: 13px; text-transform: uppercase; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0 0 7px; }
.mega-col a { color: #E7E4DA; text-decoration: none; }
.mega-note { clear: both; color: #C7CBD4; padding-top: 16px; }

/* General shells */
main { display: block; }
section { padding: 52px 24px; }
.section-inner { max-width: 1160px; margin: 0 auto; }
.section-head { max-width: 760px; margin: 0 0 30px; }
.section-head h2 { font-size: 28px; }
.eyebrow, .kicker, .tag, .status-label, .update-card-label, .office-update-label {
  color: #7A2E2E;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.alt { background: #FFFCF6; border-top: 1px solid #D3C8AE; border-bottom: 1px solid #D3C8AE; }
.btn { display: inline-block; margin: 0 10px 10px 0; padding: 12px 20px; border: 1px solid #0F1826; text-decoration: none; font-weight: bold; }
.btn-primary { background: #0F1826; color: #FFFCF6; }
.btn-ghost { background: transparent; color: #0F1826; }

/* Homepage task hero */
.task-hero { padding: 58px 24px; background: #F4EDDE; border-bottom: 1px solid #D3C8AE; }
.task-hero-inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.task-hero h1 { font-size: 46px; margin: 10px 0 14px; }
.task-hero-lede { max-width: 700px; margin: 0 auto 25px; color: #514C43; font-size: 18px; }
.task-search-form { max-width: 820px; margin: 0 auto 28px; text-align: left; }
.task-grid { text-align: left; font-size: 0; }
.task-card { display: inline-block; width: 31.5%; min-height: 115px; margin: 0 1.5% 16px 0; padding: 18px; vertical-align: top; background: #FFFCF6; border: 1px solid #D3C8AE; color: #0F1826; text-decoration: none; font-size: 16px; }
.task-card strong, .task-card small { display: block; }
.task-card small { margin-top: 5px; color: #5C574E; }
.task-icon { display: none; }

/* Secretary spotlight */
.spotlight { padding: 52px 24px; background: #F3EFE5; }
.spotlight-grid { display: table; width: 100%; max-width: 1160px; margin: 0 auto; }
.spotlight-grid > .sec-photo {
  display: table-cell;
  width: 230px;
  height: 290px;
  vertical-align: bottom;
  background: transparent url("../images/secretary-johnson.png") center bottom no-repeat;
  background-size: contain;
}
.spotlight-grid > div { display: table-cell; vertical-align: middle; padding-left: 44px; }
.secretary-name { font-size: 31px; }
.spotlight .title { color: #4A453C; font-size: 15px; }
.spotlight .lede { max-width: 680px; font-size: 17px; }

/* Current election strip */
.election-status { padding: 0; background: #0F1826; color: #FFFCF6; }
.election-status-inner { display: table; width: 100%; max-width: 1160px; margin: 0 auto; }
.election-status-inner > div { display: table-cell; width: 33.33%; padding: 24px 18px; vertical-align: top; border-right: 1px solid #354258; }
.election-status a { display: block; margin-top: 7px; color: #FFFCF6; font-weight: bold; text-decoration: none; }
.election-status .status-label { color: #F4C56F; }

/* Reusable cards */
.divisions, .cards, .about-sd-cards, .update-card-grid, .contact-grid, .nvra-resource-grid { font-size: 0; }
.division, .card, .about-sd-card, .update-card, .voting-card, .nvra-resource-card, .cf-form-card, .fis-search-card {
  display: inline-block;
  width: 31.5%;
  margin: 0 1.5% 18px 0;
  padding: 22px;
  vertical-align: top;
  background: #FFFCF6;
  border: 1px solid #D3C8AE;
  font-size: 16px;
}
.division h3, .card h3, .about-sd-card h3, .update-card strong { font-size: 20px; }
.update-card { color: #1E1B16; text-decoration: none; min-height: 180px; }
.update-card span, .update-card strong { display: block; }
.update-card-action { margin-top: 15px; color: #7A2E2E; font-weight: bold; }

/* Homepage election dates and office notices */
.carousel-wrap, .office-updates-carousel { max-width: 1160px; margin: 0 auto; }
.carousel, .office-update-card { background: #FFFCF6; border: 1px solid #D3C8AE; padding: 22px; }
.car-nav, .car-dots, .office-update-controls { display: none; }
.car-slide { display: table; width: 100%; }
.car-visual, .car-facts { display: table-cell; width: 50%; vertical-align: top; padding: 15px; }
.car-visual svg { display: none; }
.car-fact { padding: 12px 0; border-bottom: 1px solid #D3C8AE; }
.car-fact .label, .car-fact .value { display: block; }
.car-fact .value { font-weight: bold; }
.office-updates-section { background: #0F1826; color: #FFFCF6; }
.office-updates-section h2, .office-updates-section h3 { color: #FFFCF6; }
.office-update-card { background: #17243A; border-color: #354258; color: #FFFCF6; }
.office-update-action { color: #F4C56F; }

/* Interior page layout */
.page-layout { display: table; width: 100%; max-width: 1440px; margin: 0 auto; table-layout: fixed; }
.page-rail { display: table-cell; width: 280px; padding: 42px 20px 60px 24px; vertical-align: top; }
.page-body { display: table-cell; vertical-align: top; }
.page-rail-panel { background: #FFFCF6; border: 1px solid #D3C8AE; }
.page-rail-title { padding: 18px; background: #0F1826; color: #FFFCF6; font-size: 20px; font-weight: bold; }
.page-rail-heading { padding: 9px 15px; background: #7A2E2E; color: #FFFCF6; font-size: 12px; text-transform: uppercase; }
.page-toc a { display: block; padding: 12px 15px; border-bottom: 1px solid #D3C8AE; background: #FFFCF6; color: #0F1826; text-decoration: none; }
.page-title { max-width: 1160px; margin: 0 auto; padding: 42px 24px 0; }
.page-title h1 { font-size: 32px; }
.page-title .lede { max-width: 760px; font-size: 17px; color: #4A453C; }
.page-rail-toggle { display: none; }

/* Tables and forms */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px 12px; border: 1px solid #D3C8AE; text-align: left; vertical-align: top; }
th { background: #EAE3D2; color: #0F1826; }
input, select, textarea, button { font-family: Arial, Helvetica, sans-serif; font-size: 15px; }

/* Footer */
footer, .site-foot { padding: 28px 24px; background: #0F1826; color: #C7CBD4; text-align: center; }
footer a, .site-foot a { color: #F5E7C6; margin: 0 6px; }

@media screen and (max-width: 800px) {
  .site-head-inner, .site-brand, .site-head-tools, .spotlight-grid, .spotlight-grid > .sec-photo, .spotlight-grid > div, .page-layout, .page-rail, .page-body, .election-status-inner, .election-status-inner > div, .car-slide, .car-visual, .car-facts { display: block; width: auto; }
  .spotlight-grid > .sec-photo { width: 190px; height: 240px; margin: 0 auto; }
  .site-head-tools, .spotlight-grid > div { padding-left: 0; margin-top: 18px; }
  .task-card, .division, .card, .about-sd-card, .update-card, .voting-card, .nvra-resource-card, .cf-form-card, .fis-search-card, .mega-col { display: block; width: auto; margin-right: 0; }
  .task-hero h1 { font-size: 34px; }
  .page-rail { padding: 18px 24px 0; }
  .primary-nav a { display: block; border-bottom: 1px solid #253650; }
}