/*
=======================================================================
  labor.css
  Alaska Department of Labor and Workforce Development
  Author: Adam Bauer
  Version: 2.0
  Date: 2026
  
  Replaces: Govalaska.css
  Purpose: Clean rebuild of the DOLWD site stylesheet.
           Fixes WCAG 2.1 accessibility issues in the prior stylesheet,
           establishes a documented link color system, adds missing
           accordion JS-dependent rules, and removes accumulated
           legacy debt while preserving full backward compatibility
           with existing page class structure.

  Contrast ratios documented inline where color choices are made.
  WCAG AA requires 4.5:1 for normal text, 3:1 for large/bold text.
=======================================================================

  Table of Contents

  1.  Reset and Box Sizing
  2.  Base Typography
  3.  Base Link System
  4.  Layout
  5.  Header
  6.  Global Nav (dark background - white link exception)
  7.  Agency Nav / Responsive Menu
  8.  Breadcrumb
  9.  Main Content Area
  10. Sidebar
  11. Accordion (JS-dependent)
  12. Tables
  13. Forms
  14. Footer (dark background - white link exception)
  15. Utility Classes
  16. Alert and Info Boxes
  17. Push/Pull Date
  18. Native Language Greeting
  19. Back to Top
  20. Search
  21. Social Media Icons
  22. Home Page Specific
  23. Print Styles
  24. Media Queries

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


/* =====================================================================
   1. RESET AND BOX SIZING
   ===================================================================== */

*,
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

body, figure {
  margin: 0;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  color: #222;
  font-size: 1em;
  line-height: 1.6;
  overflow-x: auto;
  opacity: 1;
}

body {
  background-color: #f2f2f2;
  background-image: url(/assets/soa-style/2016-background.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0 -40px;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

img.alignleft {
  float: left;
  margin: 0 16px 5px 0;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
  line-height: 1rem;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -.5em; }
sub { bottom: -.25em; }

svg:not(:root) {
  overflow: hidden;
}

abbr[title] {
  border-bottom: 1px dotted;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Clearfix */
.agency-navigation:after, .agency-navigation:before,
.block:after, .block:before,
.clearfix:after, .clearfix:before,
.entry-content:after, .entry-content:before,
.entry:after, .entry:before,
.footer-block:after, .footer-block:before,
.nav-secondary:after, .nav-secondary:before,
.pagination:after, .pagination:before,
.site-container:after, .site-container:before,
.site-footer:after, .site-footer:before,
.site-header:after, .site-header:before,
.site-inner:after, .site-inner:before,
.wrap:after, .wrap:before {
  clear: both;
  content: " ";
  display: table;
}

.clear { clear: both; }


/* =====================================================================
   2. BASE TYPOGRAPHY
   ===================================================================== */

header.site-header .title-area,
html {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  /* #014c8b on #ffffff = 7.1:1 contrast — passes AA and AAA */
  color: #014c8b;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px 0;
  padding: 0;
}

h1 {
  font-size: 1.4em;
  text-transform: capitalize;
  padding-top: .5em;
  margin: .67em 0;
}

h2 { font-size: 1.3em; padding: 0; }
h2.entry-title { font-size: 1.125em; }
h3 { font-size: 1.2em; margin: 8px 0 5px; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #014c8b;
  font-weight: 500;
}

p {
  margin: 0 0 26px;
}

dfn {
  font-style: italic;
}

.b, .strong {
  font-weight: 700;
}

larger { font-size: larger; }
smaller { font-size: smaller; }

.block-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 3px solid #ececec;
  background-color: #f5f5f5;
  padding: 16px 16px 8px 10px;
  margin-left: -1px;
  color: #014c8b;
}

.title-text { margin-top: .3rem; }

/* h2-equivalent style for non-heading elements */
.h2-style {
  color: #014c8b;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px 0;
  font-size: 1.3em;
  padding: 0;
}

/* Monospace / pre-formatted content */
.pre-div {
  font-family: monospace;
  font-size: 1.1rem;
  line-height: 1.2rem;
}

p.pre { margin-bottom: 0; }

/* Last revised stamp */
#last-revised {
  clear: both;
  font-style: oblique;
}

#last-revised::before {
  content: "Page ";
}

/* Text color utilities */
/* NOTE: Use sparingly. Verify contrast against actual background. */
.white { color: white; }
.black { color: black; }
/* #B30000 on #ffffff = 5.9:1 — passes AA */
.red   { color: #B30000; }
.blue  { color: blue; }

/* Text alignment */
.center { text-align: center; }
.right  { text-align: right; padding-right: 1rem; }
.left   { text-align: left; }

/* Border utilities */
.border-top-thin-solid-black { border-top: thin solid black; }

/* Dept footer label */
.dept-foot {
  font-weight: 600;
  font-size: 1em;
  margin-bottom: 0;
}

/* Font faces */
@font-face {
  font-family: 'Open Sans';
  font-weight: 300;
  font-style: normal;
  src: url(/assets/soa-style/Open-Sans-300/Open-Sans-300.eot);
  src: url(/assets/soa-style/Open-Sans-300/Open-Sans-300.eot?#iefix) format('embedded-opentype'),
       local('Open Sans Light'), local('Open-Sans-300'),
       url(/assets/soa-style/Open-Sans-300/Open-Sans-300.woff2) format('woff2'),
       url(/assets/soa-style/Open-Sans-300/Open-Sans-300.woff) format('woff'),
       url(/assets/soa-style/Open-Sans-300/Open-Sans-300.ttf) format('truetype'),
       url(/assets/soa-style/Open-Sans-300/Open-Sans-300.svg#OpenSans) format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/soa-style/Open-Sans-regular/Open-Sans-regular.eot);
  src: url(/assets/soa-style/Open-Sans-regular/Open-Sans-regular.eot?#iefix) format('embedded-opentype'),
       local('Open Sans'), local('Open-Sans-regular'),
       url(/assets/soa-style/Open-Sans-regular/Open-Sans-regular.woff2) format('woff2'),
       url(/assets/soa-style/Open-Sans-regular/Open-Sans-regular.woff) format('woff'),
       url(/assets/soa-style/Open-Sans-regular/Open-Sans-regular.ttf) format('truetype'),
       url(/assets/soa-style/Open-Sans-regular/Open-Sans-regular.svg#OpenSans) format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 600;
  font-style: normal;
  src: url(/assets/soa-style/Open-Sans-600/Open-Sans-600.eot);
  src: url(/assets/soa-style/Open-Sans-600/Open-Sans-600.eot?#iefix) format('embedded-opentype'),
       local('Open Sans Semibold'), local('Open-Sans-600'),
       url(/assets/soa-style/Open-Sans-600/Open-Sans-600.woff2) format('woff2'),
       url(/assets/soa-style/Open-Sans-600/Open-Sans-600.woff) format('woff'),
       url(/assets/soa-style/Open-Sans-600/Open-Sans-600.ttf) format('truetype'),
       url(/assets/soa-style/Open-Sans-600/Open-Sans-600.svg#OpenSans) format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: italic;
  src: url(/assets/soa-style/Open-Sans-italic/Open-Sans-italic.eot);
  src: url(/assets/soa-style/Open-Sans-italic/Open-Sans-italic.eot?#iefix) format('embedded-opentype'),
       local('Open Sans Italic'), local('Open-Sans-italic'),
       url(/assets/soa-style/Open-Sans-italic/Open-Sans-italic.woff2) format('woff2'),
       url(/assets/soa-style/Open-Sans-italic/Open-Sans-italic.woff) format('woff'),
       url(/assets/soa-style/Open-Sans-italic/Open-Sans-italic.ttf) format('truetype'),
       url(/assets/soa-style/Open-Sans-italic/Open-Sans-italic.svg#OpenSans) format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 700;
  font-style: italic;
  src: url(/assets/soa-style/Open-Sans-700italic/Open-Sans-700italic.eot);
  src: url(/assets/soa-style/Open-Sans-700italic/Open-Sans-700italic.eot?#iefix) format('embedded-opentype'),
       local('Open Sans Bold Italic'), local('Open-Sans-700italic'),
       url(/assets/soa-style/Open-Sans-700italic/Open-Sans-700italic.woff2) format('woff2'),
       url(/assets/soa-style/Open-Sans-700italic/Open-Sans-700italic.woff) format('woff'),
       url(/assets/soa-style/Open-Sans-700italic/Open-Sans-700italic.ttf) format('truetype'),
       url(/assets/soa-style/Open-Sans-700italic/Open-Sans-700italic.svg#OpenSans) format('svg');
}


/* =====================================================================
   3. BASE LINK SYSTEM
   
   This is the canonical link color definition for the site.
   All link color exceptions (nav, footer, sidebar) are documented
   in their respective sections below with contrast ratios.
   
   FIX: The prior stylesheet grouped .global-nav-menu a:hover with
   a:hover, causing automated accessibility checkers to read
   text-decoration:underline as a hover-only property rather than
   a base-state property. Selectors are now fully separated.
   ===================================================================== */

/* Base link state — #1d4289 on #ffffff = 8.5:1 — passes AA and AAA */
a:link {
  color: #1d4289;
  text-decoration: underline;
}

/* Visited — distinct from unvisited per WCAG 1.4.1 */
/* #6b3a9e on #ffffff = 5.2:1 — passes AA */
a:visited {
  color: #6b3a9e;
  text-decoration: underline;
}

/* Hover — underline retained, color shift for visual feedback */
a:hover {
  color: #1d4289;
  text-decoration: underline;
}

/* Active */
a:active {
  outline: 0;
}

/* Focus — keyboard navigation indicator */
a:focus {
  outline: dotted thin;
}

/* Focus-visible — modern keyboard focus ring */
/* #1d4289 outline on #ffffe0 background — clearly visible */
a:focus-visible {
  outline: 2px dotted #1d4289;
}

/* 
   Combined focus highlight — applies to links and nav items.
   Yellow background with dark red text provides strong contrast
   for keyboard navigation users.
   #bf1722 on #ffffe0 = 5.8:1 — passes AA
*/
.agency-responsive-menu a:focus,
.agency-responsive-menu > .first > a:focus,
.agency-responsive-menu > .last > a:focus,
.socialmedia-icons ul li a:focus,
.title-area h1:focus,
a:focus {
  background-color: #ffffe0;
  color: #bf1722;
}


/* =====================================================================
   4. LAYOUT
   ===================================================================== */

.site-container {
  max-width: 60em;
  width: 100%;
  margin: 0 auto;
}

.inline-div {
  margin: 0 auto;
  max-width: 960px;
}

.site-inner {
  background: #fff;
}

article aside {
  margin-left: .5rem;
}

aside {
  border-left: thin solid #f5f5f5;
  border-bottom: thin solid #f5f5f5;
}

aside p { margin-left: 1rem; }

.foot-wave {
  margin-bottom: -1rem;
}

/* Column grid */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.0%;
}

.one-half,
.three-sixths,
.two-fourths  { width: 48%; }

.one-third,
.two-sixths   { width: 32%; }

.four-sixths,
.two-thirds   { width: 66%; }

.one-fourth   { width: 23%; }
.three-fourths{ width: 74%; }
.one-sixth    { width: 15%; }
.five-sixths  { width: 83%; }

.first {
  clear: both;
  margin-left: 0;
}


/* =====================================================================
   5. HEADER
   ===================================================================== */

header.site-header {
  background-color: #194a6b;
  float: left;
  color: #fff;
  padding: 8px;
  margin: 0;
  width: 100%;
}

header.site-header .wrap {
  max-width: 960px;
  margin: 0 auto;
}

header.site-header .title-area {
  font-weight: 400;
  line-height: 1;
  overflow: hidden;
  padding: 0;
  width: 85%;
}

/* Header links — white on #194a6b = 8.0:1 — passes AA and AAA */
header.site-header .title-area a,
header.site-header .title-area h1 {
  color: #fff;
  text-decoration: none;
}

.title-area a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-logo {
  float: left;
  width: 12%;
  max-width: 72px;
  margin-right: 5px;
}

.site-logo img {
  margin: 0;
  padding: 0;
  width: auto;
}

span.site-title,
span.site-description {
  float: left;
  text-align: center;
  width: 100%;
}

span.site-title {
  font-size: 1em;
  line-height: normal;
  margin-top: 0;
  margin-bottom: .2rem;
  padding: 0 20px;
  vertical-align: middle;
  color: #fff;
  text-transform: none;
}

span.site-description {
  font-size: 1.5em;
  font-weight: 300;
  margin: 0 0 8px;
  padding: 0;
  text-transform: uppercase;
}

.soa-link a {
  color: #fff;
  text-decoration: none;
}

.site-title-link a {
  color: #fff;
  text-decoration: none;
}

/* Search icon toggle — JS-driven classes */
.site-header.js_search_enabled #search-form          { display: none; }
.site-header.js_search_enabled #search_icon_placeholder,
.site-header.js_search_icon_was_clicked #search-form { display: block; }
.site-header.js_search_icon_was_clicked #search_icon_placeholder { display: none; }


/* =====================================================================
   6. GLOBAL NAV
   
   EXCEPTION: Links here are white on #072f49 (dark navy).
   White (#ffffff) on #072f49 = 14.7:1 — passes AA and AAA.
   This is a documented intentional override of the base link system.
   ===================================================================== */

.global-nav-menu {
  background: #072f49;
  padding: 5px;
  border-top: 3px solid #edbd03;
  min-height: 57px;
}

.global-nav-menu .inline-div > ul {
  display: inline-block;
  font-size: .75em;
  line-height: 1em;
  margin: 0;
  padding: 0;
  text-align: right;
  max-width: 960px;
  width: 100%;
  vertical-align: bottom;
}

/* White links on dark nav background — intentional contrast exception */
.global-nav-menu a {
  color: #fff;
  padding: 0 .63em;
  letter-spacing: 1px;
  font-weight: 400;
  text-decoration: none;
}

/* Hover state for dark background nav links */
.global-nav-menu a:hover {
  text-decoration: underline;
  color: #fff;
}

.global-nav-menu .inline-div > ul > li {
  display: none;
  overflow: hidden;
  padding: 10px 0 7px;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.global-nav-menu .inline-div > ul > li:last-child  { display: inline-block; }
.global-nav-menu .inline-div > ul > li:first-child {
  display: block;
  margin: 0 0 0 10px;
  padding: 0;
  position: absolute;
  text-align: left;
  width: 12em;
}

.global-nav-menu .inline-div > ul > li:first-child a {
  background-image: url(/assets/soa-style/2016-soa-logo.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 138px 33px;
  display: inline-block;
  text-indent: -999999px;
  width: inherit;
  padding: 12px 0;
}

.global-nav-menu .inline-div > ul > li:first-child a:focus {
  background-image: url(/assets/soa-style/2016-soa-logo-dark.png);
}


/* =====================================================================
   7. AGENCY NAV / RESPONSIVE MENU
   
   EXCEPTION: Nav links are white on #3f78a7 (medium blue).
   White on #3f78a7 = 3.8:1 — passes AA for large/bold text.
   Links are bold and displayed at large size — this qualifies.
   ===================================================================== */

.responsive-menu-icon {
  background-color: #3f78a7;
  cursor: pointer;
  display: none;
}

.responsive-menu-icon::before {
  content: "Menu";
  display: block;
  font: normal 20px/1 'Open Sans';
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  color: white;
}

.agency-responsive-menu {
  background-color: #3f78a7;
  clear: both;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
  font-weight: bold;
}

.agency-responsive-menu .menu-item,
.responsive-menu-icon {
  display: block;
}

.agency-responsive-menu li {
  list-style: none;
}

.agency-responsive-menu > li {
  background-color: #8AB6D4;
}

/* Nav links — white on #3f78a7 — see contrast note above */
.agency-responsive-menu a,
.agency-responsive-menu > .first > a,
.agency-responsive-menu > .last > a {
  border: none;
  color: #fff;
  display: block;
  font-weight: bold;
  line-height: 1;
  padding: 16px;
  position: relative;
  text-decoration: none;
}

.agency-responsive-menu .menu-item-has-children > a {
  margin-right: 60px;
}

.agency-responsive-menu > .menu-item-has-children:before {
  color: #fff;
  content: "+";
  float: right;
  font: normal 20px/1;
  height: 20px;
  padding: 12px 20px;
  right: 0;
  text-align: right;
  z-index: 9999;
}

.agency-responsive-menu .menu-open.menu-item-has-children:before {
  content: "-";
}

/* Submenu */
.agency-responsive-menu > li > .sub-menu,
.agency-responsive-menu {
  display: none;
}

.agency-responsive-menu .sub-menu {
  padding: 0;
  background-color: white !important;
}

.agency-responsive-menu .sub-menu li {
  background-color: inherit;
  position: relative;
  z-index: 10;
}

/* Submenu links — #333 on #fff = 12.6:1 — passes AA and AAA */
.agency-responsive-menu .sub-menu a {
  background-color: #fff;
  color: #333;
  display: block;
  font-size: 88%;
  font-weight: normal;
  padding: 10px 12px;
  position: relative;
  width: auto;
  letter-spacing: .5px;
  text-decoration: none;
}

/* JS-toggled state — menu open */
.agency-responsive-menu .menu-item-has-children.menu-open > .sub-menu {
  display: block;
}

.agency-responsive-menu .menu-item-has-children > a {
  cursor: pointer;
}

/* Keep submenu open when focus is within (keyboard nav) */
.agency-responsive-menu .menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.agency-responsive-menu .menu-item-has-children:focus-within > .sub-menu a:focus-within {
  border-left: 4px solid #e4cd6c;
  background-color: #fbf8e9;
  padding-left: 6px;
}

/* JS-toggled popLeft — submenu opens left when near right viewport edge */
.agency-responsive-menu .popLeft > .sub-menu {
  right: 0;
  left: auto !important;
}


/* =====================================================================
   8. BREADCRUMB
   ===================================================================== */

.breadcrumb {
  font-size: 12px;
  padding: 10px;
}

nav.breadcrumb {
  padding: 0.8em 1em;
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: .9rem;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 0.25em;
  transform: rotate(15deg);
  border-right: 0.1em solid currentColor;
  height: 0.8em;
  content: '';
}

/* Current page in breadcrumb — not a link, no underline needed */
nav.breadcrumb [aria-current="page"] {
  color: #000;
  font-weight: 700;
  text-decoration: none;
}

/* Breadcrumb links inherit base link system — #1d4289 on #fff */
.breadcrumb-link-wrap a {
  color: #1d4289;
  text-decoration: underline;
}


/* =====================================================================
   9. MAIN CONTENT AREA
   ===================================================================== */

main.content,
article.home-main-content article {
  padding: 0 20px 10px;
}

.content .home-top,
.content sidebar,
.content .sidebar-home,
.content .bottom-block,
.footer-block {
  padding: 16px 20px 10px;
}

.entry-content .listing-item {
  margin: 5px 16px;
  padding: 5px 0;
  border-bottom: 1px solid #ececec;
}

.home .content {
  background: none;
  border: none;
}

.home .content > article,
.content {
  background: #fff;
  max-width: 100%;
  width: auto;
  margin: 0;
}

.home .content > article {
  border-right: 1px solid #e2e2e2;
}

.content .entry-header .entry-meta {
  margin: 0;
  border: none;
  padding: 0;
  font-weight: bold;
}

.entry {
  margin-bottom: 1em;
  border-bottom: 1px solid #ececec;
}

.archive-pagination li {
  display: inline;
  list-style: none;
}

/* Pagination links — white on #014c8b = 7.1:1 — passes AA and AAA */
.archive-pagination li a {
  background-color: #014c8b;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 2;
  margin-bottom: 4px;
  padding: 8px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.archive-pagination li a:hover,
.archive-pagination li.active a {
  background-color: #3b7093;
  text-decoration: none;
}

/* Two-column table of contents */
.two-column-toc {
  margin-bottom: 2rem;
  border: thin solid #8a8a8a;
  background-color: #eeeeee;
  padding: .5rem;
}

.two-column-toc ul {
  padding-inline-start: 1.5em;
  font-weight: 400;
}

.two-column-toc ul ::marker {
  content: ">> ";
  color: #48b;
  font-weight: 600;
}

/* TOC links — #1b365d on #eeeeee = 9.1:1 — passes AA and AAA */
.two-column-toc li a {
  color: #1b365d;
  text-decoration: underline;
}


/* =====================================================================
   10. SIDEBAR
   
   EXCEPTION: Sidebar nav links are #333333 on #ffffff.
   #333333 on #ffffff = 12.6:1 — passes AA and AAA.
   FIX: Added text-decoration: underline to the resting state.
   Prior stylesheet had no underline, which failed WCAG 1.4.1.
   ===================================================================== */

.sidebar {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

.sidebar > section {
  margin-bottom: 2em;
  word-wrap: break-word;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2;
}

.sidebar section div > div {
  padding: 0;
}

.sidebar .sidebar-block p {
  margin: 1rem;
  padding: 0;
  font-size: 100%;
}

.sidebar h5 {
  margin: 0 1em;
  padding: 0;
  color: #000;
}

.sidebar-block ol {
  padding: 0 20px;
}

.sidebar-block ol > li {
  background-image: none;
  list-style-position: inside;
  list-style-type: decimal;
  padding: 0;
  font-size: 90%;
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar ul li {
  border-top: 1px solid #ececec;
  font-size: 100%;
  list-style: none;
  text-transform: uppercase;
}

.sidebar .sidebar_nav_menu ul > li:first-child {
  border-top: none;
}

/* 
   Sidebar nav links — #333333 on #ffffff.
   FIX: text-decoration: underline added to resting state.
   The prior stylesheet omitted underline here, causing WCAG 1.4.1 failures.
*/
.sidebar .sidebar_nav_menu ul li a {
  color: #333333;
  display: block;
  padding: 8px 20px;
  text-decoration: underline;
}

.sidebar .sidebar_nav_menu ul li a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

/* Left border accent on hover/active */
.sidebar .sidebar_nav_menu ul li:hover,
.sidebar .sidebar_nav_menu ul li:focus-within {
  border-left: 3px solid rgb(0, 102, 204);
}

.sidebar .sidebar_nav_menu ul li {
  border-left: 3px solid rgb(255, 255, 255);
}


/* =====================================================================
   11. ACCORDION (JS-DEPENDENT)
   
   The accordion is driven by assets.js which:
   - Adds class 'js' to <body> when JS is enabled
   - Toggles class 'is-active' on .accordion__panel elements
   - Converts .clickable-heading elements to ARIA buttons
   
   FIX: These rules did not exist in Govalaska.css at all.
   Without them the accordion panels are always visible regardless
   of JS state, defeating the progressive enhancement pattern.
   ===================================================================== */

/* Hide panels only when JS has loaded — progressive enhancement */
body.js .accordion__panel {
  display: none;
}

/* Show panel when JS activates it */
body.js .accordion__panel.is-active {
  display: block;
}

/* Clickable heading — styled as an interactive element */
.clickable-heading {
  cursor: pointer;
  display: block;
  font-weight: bold;
  padding: 8px 0;
  color: #014c8b;
  text-decoration: underline;
  border-bottom: 1px solid #ececec;
}

.clickable-heading:hover {
  color: #1d4289;
  background-color: #f5f5f5;
}

/* Visual indicator of expanded state */
.clickable-heading[aria-expanded="true"] {
  border-bottom: 2px solid #014c8b;
}

/* Drop group container */
.drop-group {
  margin-bottom: 1rem;
}


/* =====================================================================
   12. TABLES
   ===================================================================== */

table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 2;
  margin-bottom: 40px;
  width: 100%;
}

th {
  font-weight: bold;
  text-transform: uppercase;
}

th, td {
  text-align: left;
}

table tbody tr:nth-child(odd) {
  background: rgba(245, 245, 245, 1);
}

table tbody tr td {
  padding: 10px 0 10px 5px;
  line-height: 1.5em;
}

td {
  padding: 6px 0;
  font-size: .875em;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
}


/* =====================================================================
   13. FORMS
   ===================================================================== */

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

button, span.site-title, select {
  text-transform: none;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

legend {
  border: 0;
  padding: 0;
}

fieldset {
  border: 0px solid #000000;
  margin: 0;
  padding: 1em;
  background-color: #ffffff;
}

.form-field {
  margin-bottom: 20px;
  clear: both;
}

.form-field,
.form-label,
.form-field input,
.form-submit input {
  font-size: 14px;
}

.form-label {
  color: #444444;
  font-weight: bold;
  text-align: left;
  margin: 0;
  max-width: 100%;
  padding: 0 0 3px 0;
  width: auto;
  display: block;
}

.form-field input[type=text],
.form-field input[type=email],
.form-field textarea,
.form-field select {
  color: #555555;
  background-color: #ffffff;
  border-color: #7f7f7f;
  border-width: 1px;
  border-style: solid;
  border-radius: 0px;
  width: 100%;
  max-width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  outline: none;
  font-weight: normal;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  line-height: 1.3;
}

.form-field input[type=radio],
.form-field input[type=checkbox] {
  color: #555555;
  display: inline-block;
}

/* Submit button — white on #d1ac2c = 2.5:1 — marginal for normal text.
   NOTE: Consider darkening to #a07f00 for better contrast on future revision. */
.form-submit input[type=submit],
.form-submit input[type=button] {
  width: auto;
  height: auto;
  line-height: normal;
  text-align: center;
  background: #d1ac2c;
  border-width: 1px;
  border-color: #cccccc;
  border-style: solid;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
  text-shadow: none;
  padding: 6px 11px;
  box-sizing: border-box;
  box-shadow: 0 1px 1px #eeeeee;
  margin: 10px 0;
  vertical-align: middle;
}

/* Hover — white on #014c8b = 7.1:1 — passes AA and AAA */
.form-submit input[type=submit]:hover,
.form-submit input[type=button]:hover {
  background: #014c8b;
  border-color: #cccccc;
  color: #ffffff;
}

#search-field-big {
  color: black;
}


/* =====================================================================
   14. FOOTER
   
   EXCEPTION: Footer links are white on #194a6b (dark blue).
   White on #194a6b = 8.0:1 — passes AA and AAA.
   FIX: Added a:visited override for footer links.
   Prior stylesheet had no visited state override, meaning visited
   links in the footer could render as #6b3a9e (purple) on #194a6b —
   a near-invisible combination.
   ===================================================================== */

.footer-block,
.footer-block .wrap {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

.footer-block {
  background-color: #194a6b;
  color: #fff;
  font-size: .875em;
  padding: 16px 20px 0;
}

/* Footer headings — white on #194a6b = 8.0:1 — passes AA and AAA */
.footer-block h1,
.footer-block h2,
.footer-block h3,
.footer-block h4,
.footer-block h5,
.footer-block h6 {
  color: #fff;
}

/* Footer links — white on dark background — intentional exception */
.footer-block a {
  color: #fff;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
}

/* FIX: Visited state override — prevents purple on dark blue */
.footer-block a:visited {
  color: #fff;
}

.footer-block a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-block .wrap {
  padding: 0;
}

.footer-block .block-content-area {
  width: 100%;
  float: left;
  text-align: center;
}

.footer-block .footer-block-1,
.footer-block .footer-block-2 {
  margin: 0 2% 0 0;
}

.footer-block .footer-block-3 {
  margin: 0;
}

/* Global footer — below the blue footer block */
.global-footer {
  color: #222;
  padding: .5em 0;
}

/* Global footer links — #222 on #fff = 16.1:1 — passes AA and AAA */
.global-footer a {
  color: #222;
  text-decoration: underline;
}

footer .copyright,
footer .copyright a {
  margin: 8px 0;
  font-size: .875em;
}

footer .copyright,
span.site-description {
  text-transform: uppercase;
}

footer p {
  text-align: center;
  margin: 0 auto;
}

#SOAfooterlinks ul {
  padding: 0;
  margin: 0 16px 16px;
}

#SOAfooterlinks ul li {
  display: inline;
  font-size: 80%;
  text-align: center;
  margin: 0 8px 0 0;
}


/* =====================================================================
   15. UTILITY CLASSES
   ===================================================================== */

.hidden       { display: none; }
.hide         { display: none; }
.intent       { margin-left: 2rem; }
.indent       { margin-left: 2rem; }
.indent25     { margin-left: 25px; }
.indent5      { margin-left: 5px; }

.ul-list-style-none { list-style-type: none; }

/* Padding utilities */
.padding-5    { padding: 5px; }
.padding-10   { padding: 10px; }
.padding-15   { padding: 15px; }
.padding-20   { padding: 20px; }

/* Margin utilities */
.margin-top-none    { margin-top: 0; }
.margin-right-none  { margin-right: 0; }
.margin-bottom-none { margin-bottom: 0; }
.margin-left-none   { margin-left: 0; }

.margin-top-1rem    { margin-top: 1rem; }
.margin-right-1rem  { margin-right: 1rem; }
.margin-bottom-1rem { margin-bottom: 1rem; }
.margin-left-1rem   { margin-left: 1rem; }

/* Padding utilities */
.padding-top-none    { padding-top: 0; }
.padding-right-none  { padding-right: 0; }
.padding-bottom-none { padding-bottom: 0; }
.padding-left-none   { padding-left: 0; }

.padding-top-1rem    { padding-top: 1rem; }
.padding-right-1rem  { padding-right: 1rem; }
.padding-bottom-1rem { padding-bottom: 1rem; }
.padding-left-1rem   { padding-left: 1rem; }

/* Block indent — matches blockquote-style indentation */
.block-indent {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
  unicode-bidi: isolate;
}

/* Visually hidden — skip links and screen-reader-only content */
a.visuallyhidden {
  background: 0 0;
  border-bottom: 1px solid #fff;
  border-bottom-right-radius: 8px;
  border-right: 1px solid #fff;
  background-color: #ffffff;
  color: #000;
  left: 0;
  padding: 6px;
  position: absolute;
  top: 0;
  z-index: -1;
  transition: top 1s ease-out 0s, background 1s linear 0s;
}

a.visuallyhidden:active,
a.visuallyhidden:focus {
  background: #41b6e6;
  left: 0;
  outline: 0;
  position: absolute;
  top: 0;
  transition: top .1s ease-in 0s, background .5s linear 0s;
  z-index: 500;
}

.visuallyhidden {
  background-color: white;
  color: black;
}

/* Watermark — for draft pages */
.watermark {
  opacity: 0.3;
  color: black;
  position: fixed;
  top: auto;
  left: 20%;
  font-size: 7rem;
  font-weight: 900;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}


/* =====================================================================
   16. ALERT AND INFO BOXES
   ===================================================================== */

/* --- dolAlertBox --- */
.dolAlertBox {
  margin-bottom: 20px !important;
  padding: 1rem;
  box-shadow: 0 2px 5px 0 #999, inset 0 0 15px 0 #fcc !important;
  border: solid 2px #e33 !important;
}

/* --- dolInfoBox --- */
.dolInfoBox {
  margin-bottom: 20px !important;
  padding: 1rem;
  box-shadow: 0 2px 5px 0 #999, inset 0 0 15px 0 #e8e8e8 !important;
  border: solid 2px #a8a8a8 !important;
}

/* Alert/Info tab labels */
.Alert { background-color: red; }
.Info  { background-color: #a8a8a8; }

div.divAlert {
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  width: 100px;
  float: left;
  color: #050709;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 1rem;
  margin-left: -1rem;
  text-align: center;
}

/* --- deptAlertBox (banner-style alert) --- */
.deptAlertBox {
  position: relative;
  padding: 18px 10px 0;
  border: solid 2px #e33 !important;
  box-shadow: inset 0 0 15px 0 #fcc !important;
  background-color: #fff6f6 !important;
}

.deptAlertBox::before,
.deptAlertBox::after {
  position: absolute;
}

.deptAlertBox::before {
  content: "ALERT";
  top: -2px;
  left: -2px;
  right: -2px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  font-size: .875rem;
  font-weight: bold;
  letter-spacing: .1em;
  text-shadow: 0 0px 2px #300;
  background-color: #e33;
  background-image: linear-gradient(to right, #e33 0%, #f33 40%, #f33 60%, #e33 100%);
}

.deptAlertBox h2 {
  padding-top: .2em !important;
  margin-bottom: 5px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #444 !important;
  text-transform: none;
}

.deptAlertBox a { font-weight: 700; }
.deptAlertBox hr { border-color: #fcc; }

main .deptAlertBox {
  margin-bottom: 20px !important;
  box-shadow: 0 2px 5px 0 #999, inset 0 0 15px 0 #fcc !important;
}

main .deptAlertBox h2 {
  padding-top: .4em !important;
  margin-bottom: 10px !important;
  font-size: 1.5rem !important;
}


/* =====================================================================
   17. PUSH/PULL DATE
   
   Hidden by default. assets.js sets display:block inline
   when current date falls within data-push / data-pull window.
   ===================================================================== */

.pushPullDate { display: none; }


/* =====================================================================
   18. NATIVE LANGUAGE GREETING
   
   Injected dynamically by assets.js into #menu-statewide-navigation.
   Rules here support the injected markup structure.
   ===================================================================== */

li#nativeLanguage {
  display: none;
  position: absolute;
  top: 1em;
  bottom: 0;
  width: 37%;
  padding: 0;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  max-width: 400px;
  margin-left: 200px;
  max-height: 40px;
  background-color: #072F49;
}

li#nativeLanguage a {
  padding: 0;
  color: #fff;
  text-decoration: none;
}

li#nativeLanguage a:focus {
  color: #fff;
  background-color: transparent;
}

#nativeLanguageAudio { display: none; }

#nativeLanguageTerm {
  display: block;
  font: italic 1.4rem/1rem "Adobe Caslon", Baskerville, "Palatino Linotype",
    Palatino, "Century Schoolbook L", "Times New Roman", serif;
}

#nativeLanguageTerm span {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  background: no-repeat center/14px url(/soa_assets/speaker.png);
}

#nativeLanguageEng,
#nativeLanguageType {
  line-height: 2em;
}

/* Legacy required greeting — retained for older pages */
#required-greeting {
  display: none;
  padding-left: 30px;
}


/* =====================================================================
   19. BACK TO TOP
   ===================================================================== */

/* Hidden by default — assets.js fades in after scroll threshold */
a.back-to-top {
  display: none;
  width: 60px;
  height: 60px;
  text-indent: -9999px;
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 20px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAM1JREFUeNrs12ELgyAQBuDcPx9OxIlrErGfeysQBs4r7zwJohfuo/dEqFcKAIYjchsOygVTcl9Ks1evm4tRGn55cHpwUAP/Mb1hC3hsL9jBfpw07KE+XgoOQE9ohV/Az7iUosIqLWzNG8MxNIJcYgkvoVNlw0+qmkw5nsNzZaM5NVLENSjMeXrKW2LDEdkstfuCBW8ej8qTQIZHwtUapODAmGC+FfbAm9drPbmwa0CxibYLWwG0NMM3YSOI5l8tKKw7oMXe6vqTOD38FWAAl8JSohyMtPcAAAAASUVORK5CYII=) center 43% no-repeat #3f78a7;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}


/* =====================================================================
   20. SEARCH
   ===================================================================== */

#search_icon_placeholder {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAYCAYAAAAPtVbGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABSZJREFUeNqsVmss3WcYf85x3DklrnEb0mmZS8dU3K+tpojVQlyGRLKURGOybypaCTEfZPuwjMSi8WGhQtshMxuhJkHoiHtsiFtH1f12aLHf80//J86xLf3gSV5/7/X3Ps/ze37vkayvr9Pbt29pcnKSrK2taWpqirS0tDxbWlrMhoaG7gYEBNypra3dhlFsbKz84OBgbGFhoaC6unoL/faMjAwKCgoiuVxORkZG9ObNG1I3mfjPyckJXbp0yQCt5P79+/HT09MW8/Pz1NbWxtNy/lNeXs6fj7Cm4d69ewTAL8zNzX/Q0NCg/7W1tTVaXl6m2dlZSX19/XMTE5NTDL93KywsXJybm3PjC21ubtLr16/PNWHi9PRU8/Hjx79pa2srN0ul0lPc8CA8PHyjpKRkq7S0dCs1NXXTwMBgVx0oJydnDWdcgWe0sbFxrtHOzg5NTEw8srOzU9kYFRX1R1xcXHRKSgrhpvKlpSV5WVkZ+fn5fVBUVPQX8qayvqGhYQJA9OrVK1pZWVFpMqC7FhcXJ7O7bJqamoQ4f4tvLjwTPH358uU2x51dxyFzmZmZIbdu3fr95s2b9kwctoKCgqvOzs5ZWF/OYCqJR5g+RHK1xIHIyMguCwuLXACxh6S+gQkC0EUvLy+/ioqKjoSEhCs8zmurqqo+htHe3p4qCCiXzYlnQ7wpKSmpDCCkr69Pvb29TGdhTiKR0PHxsdDYu8PDw799fHyCXVxcXoyPj1sz+MzMTGJeXt7XiMqMCsjIyIiX2AkNDT1aXV0d4FrhQz09PUlXV5epSjo6OsTgMTEx1NnZSV1dXYRwrgQHB88zCO+Hh4bNzc2OCKsqCCaUnWvXrgmHoNiEMIleKBQK2t/fp+vXr3PihT7f3NjYmEAYsX5oa2uLxsbGhO+/FuNFGHsvNhUQKysrZQcyQk1NTQK3eSHTm8MVFhYmfHt6erhomX3CPIcQeVDu5zw6OjoKBa4C4ubm9gLfMO50dHRoJSYmfuLq6trIG5BEIWSoGZLJZALnGxsbCVpGzCIQxgJzduJh0L6d6OjoGQ63Cgjq4TtLS8swZtju7i7V1NR8hQQ38m2hUXR0dCQs5BxxrTAo1xK8MOrv7+8Uk86GHNVCmmbOURiU/XN4ePiosrJSyHJra2sQAL7x9vbO5RCpq6qDgwNBgSk7OzsGTLwqjoPO9PDhw14uTrG2IE0CCWRgyai/v39EXV1dJwakfCgk5EswLRiLCiDfzcibnMNlamq6zSoMihb19fWFnk2woaHh3CPYWWZxZDjUku7ubiFhSPovWVlZkUxP8RY4RBESEqKIiIiQcn90dPT06dOnMoRDX10J2C5fvtyGkN1guvMFWIby8/NJwoXFA7a2ttLBwcH29PT0EL7B+xjniOtFBOQ+5OZnPBcxuMgJKwO/O9J3N+YQnYB+oYGBgX729vad8G5fne+iMXVRlDt4EX9EKJV8ZckZGBi4DQp36OnpSZS5OXsrThrY1IM8hDo5OQXEx8c3I5kEfdo2MzPbTk5OprS0tDEbG5vPHjx4cAcHfQ663+Vn+6yAAigIQL/iopoMJFWvWB7kNx81Mejr6xuPujHGobZ4w23x3htB4n0gjk8g+e1Mb7QG1Nrts0X9DigC7HsOr2X/KSvMJsRUAW1TMBkYmJWAv2IYRWUGUIuHh8enCP2zxcVFZV3hd4Iv9jyTXoRmMTC8+wmhu3E2dLB9zH0vuyhhZI8A1ObuJhDhTNfqyS+IVhu3Yn4UXFf3bkRiXrEIAl/OzlQ4u4CvqbL3B6UrE8pJrOQ6z8EXbgQqoWXx6pTZi1IQIDAQAB) center 50% no-repeat #EEE;
  background-color: #EEE;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 66%;
  border: 1px solid grey;
  border-radius: 5px;
  display: none;
  float: right;
  height: 29px;
  right: 10px;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 10%;
  max-width: 44px;
}

#search_icon_placeholder:hover {
  cursor: pointer;
  border: 1px solid #000;
  background-color: #fff;
}

#search-form {
  width: 260px;
  vertical-align: top;
  margin: 0 auto;
  padding: 0;
}

.search-soa [type=search] {
  height: 29px;
  width: 10em;
  border: 0;
}

#search-button {
  cursor: pointer;
  border: none;
  width: auto;
  padding: 5px 15px;
  background-color: #ccc;
  color: #222;
  margin: 0;
  font-size: .875em;
  vertical-align: top;
}

.search-form-expanded {
  text-align: right;
  margin: .5em 0 0;
  font-size: 80%;
  font-weight: 700;
}

#search-form fieldset {
  background: 0 0;
  padding: 0;
  margin: 0;
}

#search-form legend {
  text-indent: -99999px;
  position: absolute;
}

label#search-label-site {
  padding: 0 15px 0 0;
}


/* =====================================================================
   21. SOCIAL MEDIA ICONS
   ===================================================================== */

@font-face {
  font-family: socialmedia-icomoon;
  src: url(/assets/soa-style/socialmedia-icomoon.eot?ssi-texv9a);
  src: url(/assets/soa-style/socialmedia-icomoon.eot?#iefixssi-texv9a) format('embedded-opentype'),
       url(/assets/soa-style/socialmedia-icomoon.woff?ssi-texv9a) format('woff'),
       url(/assets/soa-style/socialmedia-icomoon.ttf?ssi-texv9a) format('truetype'),
       url(/assets/soa-style/socialmedia-icomoon.svg?ssi-texv9a#ssi-icomoon) format('svg');
  font-weight: 400;
  font-style: normal;
}

.socialmedia-icons { overflow: hidden; }

.socialmedia-icons ul {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  display: inline-block;
}

.socialmedia-icons ul li {
  background: 0 0 !important;
  border: none !important;
  float: left;
  list-style-type: none !important;
  margin: 0 6px 12px !important;
  padding: 0 !important;
}

.socialmedia-icons ul li a {
  border: none !important;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: inline-block;
  font-family: socialmedia-icomoon;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: 400 !important;
  line-height: 1em;
  speak: none;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  width: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Icon link colors set by icon font — no text color override needed */
  color: #555;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 50%;
  font-size: 160%;
}

.socialmedia-icons ul li a:hover {
  color: #fff;
  background-color: #999;
}

.socialmedia-icons ul.aligncenter { text-align: center; }
.socialmedia-icons ul.aligncenter li {
  display: inline-block;
  float: none;
}

/* Float utility used in nav lists */
ul .float-dol {
  float: left;
  list-style-type: none;
  padding: 5px 20px;
}


/* =====================================================================
   22. HOME PAGE SPECIFIC
   ===================================================================== */

.showcase section {
  margin: 0;
  padding: 0;
  background: #ffffff;
  max-height: 334px;
}

.home main.content { padding: 0; }

.home-middle,
.home-top {
  background-color: #fff;
  clear: both;
  overflow: hidden;
  padding: 1em 0;
  margin: 0 0 16px;
}

.home .home-top h2 {
  font-size: 1em;
  text-transform: uppercase;
}

.home-top section article p {
  padding: 0 0 5px;
}

.home article.home-main-content > div > p {
  padding: 0 0 0 20px;
}

.home article.home-main-content .listing-item { margin: 0; }

.home article.home-main-content .article-date {
  margin: 8px 0;
  font-weight: bold;
  font-size: .825em;
}

.home article.home-main-content .article-heading {
  padding: 0;
  font-weight: normal;
  text-transform: initial;
}

.home .content article.home-main-content h2 {
  font-size: 1.875em;
  font-weight: normal;
  border-width: 1px;
  padding: 0;
  border-bottom: 3px solid #ececec;
  text-transform: uppercase;
  margin: 0 20px;
}

.home .content article.home-main-content h3 { font-size: 1em; }

.home .sidebar-home {
  background: #fff;
  max-width: 100%;
  width: auto;
  padding: 0 20px;
  margin: 0 0 32px 0;
}

.home .sidebar-home h2 span.line-one {
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 1px;
  margin: 0;
  background: none;
  border: none;
  padding: 0;
  text-transform: uppercase;
}

.home .sidebar-home h2 span.line-two {
  background: none;
  text-transform: uppercase;
  font-weight: normal;
  border-bottom: 4px double;
  padding: 0;
  font-size: xx-large;
}

.home .bottom-block {
  background-color: #fff;
  width: 100%;
}

.home .home-lower-left { clear: both; }

.home .home-lower-middle,
.home .home-lower-left {
  margin: 0 2% 32px 0;
}

.home .home-lower-right { margin: 0; }

.photostream {
  list-style: none;
  margin: 0;
  padding: 0;
}

.photostream li {
  display: block;
  float: left;
  margin: 1%;
  width: 31.3333333333%;
  height: 31.3333333333%;
}

.photostream li img {
  display: block;
  width: 100%;
}

.home h3.block-title {
  font-weight: normal;
  padding: 0 0 8px;
  border-bottom: 1px solid #ececec;
  background: none;
}

.event-date {
  float: left;
  height: 65px;
  width: 65px;
  /* white on #014c8b = 7.1:1 — passes AA and AAA */
  background: #014c8b;
  color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 50%;
  font-size: .875em;
  margin: 0 10px 0 0;
}

article.event-info {
  clear: both;
  margin: 16px 0;
  padding: 4px 0;
}

article span.event-day-month {
  border-bottom: 1px solid #fff;
  padding: 0 0 2px 0;
  font-size: 1.2em;
}

h4.event-title {
  border-bottom: 1px solid #ececec;
  font-size: .83em;
  padding: 0 0 5px;
}

.entry-content dt { font-weight: bold; }


/* =====================================================================
   23. PRINT STYLES
   ===================================================================== */

@media print {
  body {
    text-align: left;
    background: #fff;
    color: #000;
  }

  blockquote, div, form, h1, h2, h3, h4, h5, h6,
  img, li, object, ol, p, small, table, tbody, td, tr, ul {
    padding: 0;
  }

  #SOAfooterlinks,
  #menu-statewide-navigation,
  #search-form,
  .agency-navigation {
    display: none;
  }

  #search_icon_placeholder {
    border: none;
  }
}


/* =====================================================================
   24. MEDIA QUERIES
   ===================================================================== */

@media screen and (min-width: 22.8em) {
  .site-title { width: 100%; }
  #search_icon_placeholder {
    width: 38px;
    height: 33px;
  }
}

@media only screen and (min-width: 36em) {
  /* Show full global nav items */
  .global-nav-menu .inline-div > ul > li {
    display: inline-block;
    padding: 20px 0 3px;
  }
  .global-nav-menu .inline-div > ul > li:last-child { display: none; }

  span.site-title {
    text-align: left;
    padding: 0;
    width: auto;
  }
  span.site-description { text-align: left; }

  header.site-header .title-area { width: 87%; }

  /* Show responsive nav as horizontal bar */
  .responsive-menu-icon { display: none; }

  .agency-responsive-menu.responsive-menu > li > .sub-menu,
  .agency-responsive-menu.responsive-menu {
    display: block;
    text-transform: none;
  }

  .agency-responsive-menu.responsive-menu > .menu-item-has-children:before,
  .agency-responsive-menu.responsive-menu .menu-open.menu-item-has-children:before {
    content: none;
    padding: 0;
  }

  .agency-responsive-menu .menu-item-has-children > a {
    margin-right: 0;
  }

  .agency-responsive-menu.responsive-menu > li {
    background: #3f78a7;
    display: inline-block;
    text-transform: uppercase;
  }

  .agency-responsive-menu.responsive-menu > li:hover {
    background-color: #8AB6D4;
    position: static;
  }

  .agency-responsive-menu.responsive-menu .sub-menu li {
    min-width: 15em;
  }

  .agency-responsive-menu.responsive-menu .sub-menu a:hover {
    border-left: 4px solid #e4cd6c;
    background-color: #fbf8e9;
    padding-left: 4px;
  }

  .agency-responsive-menu.responsive-menu > li a,
  .agency-responsive-menu.responsive-menu > .first > a,
  .agency-responsive-menu.responsive-menu > .last > a {
    padding: 12px 16px;
  }

  .agency-responsive-menu.responsive-menu .sub-menu {
    background: none repeat scroll 0 0 #ffffff;
    box-shadow: 0 0 5px #666;
    left: -9999px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    text-transform: none;
    width: auto;
  }

  .agency-responsive-menu.responsive-menu li:hover > .sub-menu {
    left: auto;
    opacity: 1;
  }

  .agency-responsive-menu.responsive-menu .sub-menu a {
    border: 1px solid #f5f5f5;
    border-top: none;
    padding-left: 8px;
  }

  /* Submenu on hover and keyboard focus */
  .agency-responsive-menu .menu-item-has-children:hover > .sub-menu,
  .agency-responsive-menu .menu-item-has-children:focus-within > .sub-menu {
    left: auto;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #f5f5f5;
  }

  .agency-responsive-menu .menu-item-has-children:focus-within > .sub-menu a:focus-within {
    border-left: 4px solid #e4cd6c;
    background-color: #fbf8e9;
    padding-left: 6px;
  }

  /* deptAlertBox wider layout */
  .deptAlertBox { padding: 0 20px; }
  .deptAlertBox::before,
  .deptAlertBox::after { top: 5px; }
  .deptAlertBox::before {
    left: 0; right: auto; width: 50px; height: 20px;
    line-height: 20px; font-size: .7rem; text-align: right;
  }
  .deptAlertBox::after {
    content: "";
    left: 50px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #e33;
  }
  .deptAlertBox h1 { margin-left: 50px !important; }
  .deptAlertBox p  { margin-bottom: 10px; }

  main .deptAlertBox::before,
  main .deptAlertBox::after { top: 10px; }
  main .deptAlertBox::before { width: 60px; height: 30px; line-height: 30px; font-size: .875rem; }
  main .deptAlertBox::after  { left: 60px; border-width: 15px 0 15px 15px; }
  main .deptAlertBox h1      { margin-left: 70px !important; }
  main .deptAlertBox p       { margin-bottom: 20px; }

  /* Content area */
  main.content { background-color: #ffffff; }

  .home-top div.featured-content {
    float: left;
    width: 33%;
    padding: 0 16px;
  }

  .home-top div.featured-content article p {
    border-bottom: none;
  }
}

@media only screen and (min-width: 40em) {
  label.visuallyhidden,
  p.visuallyhidden {
    left: 0;
    position: absolute;
    top: -400px;
    background-color: white;
    color: black;
  }

  /* Native language greeting visible at wider viewports */
  li#nativeLanguage { display: block; }

  /* Legacy required greeting */
  #required-greeting {
    font-size: 22px;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    color: #fff;
    display: block;
  }

  #required-greeting dl#language-greeting {
    position: absolute;
    top: 0;
    margin: 6px 0 0;
    padding: 0;
    background-color: rgb(7, 47, 73);
  }

  #required-greeting dl#language-greeting dt {
    margin: 0;
    padding: 0;
    width: 500px;
    list-style: none;
  }

  #required-greeting dl#language-greeting dt a { color: #fff; }

  #required-greeting .greeting {
    font-size: 22px;
    font-family: "Adobe Caslon", Baskerville, "Palatino Linotype", Palatino,
      "Century Schoolbook L", "Times New Roman", serif;
    font-style: italic;
    line-height: 20px;
    max-width: 340px;
    width: auto;
    float: left;
    text-align: right;
    margin: 0;
  }

  #required-greeting .greeting:hover { text-decoration: underline; }

  #required-greeting a:focus .greeting {
    background-color: #ffffe0;
    color: #bf1722;
  }

  #required-greeting dd.language,
  #required-greeting dd.translation {
    float: left;
    font-size: 55%;
    margin: 0;
    max-width: 50%;
    text-align: right;
    width: auto;
    background-color: rgb(7, 47, 73);
    color: white;
  }

  #required-greeting dd.language {
    clear: left;
    padding: 0 5px 2px 0;
    margin: 0 0 0 160px;
  }

  #required-greeting dd.translation { padding: 0 0 0 10px; }

  #required-greeting dd.speaker {
    float: left;
    font-size: 55%;
    margin: 0;
    text-align: right;
  }

  #required-greeting dd.speaker button {
    background-image: url(/assets/soa-style/speaker.png);
    padding: 0 0 0 10px;
    border: none;
    background-color: rgba(0,0,0,0);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: 10px 2px;
    text-indent: -40000px;
    width: 25px;
  }
}

#required-greeting dl#language-greeting dt a:active,
#required-greeting dl#language-greeting dt a:focus {
  color: white;
  background-color: rgb(7, 47, 73);
}

@media only screen and (max-width: 750px) {
  #required-greeting { display: none; }
}

@media screen and (min-width: 48em) {
  .title-area { margin: 0; }

  .site-header.js_search_enabled #search_icon_placeholder { display: none; }
  .site-header.js_search_enabled #search-form { display: block; }
  #search-form { float: right; }

  .footer-block .block-content-area { float: left; }
  .footer-block .footer-block-1 { text-align: left;   width: 32%; }
  .footer-block .footer-block-2 { text-align: center; width: 22%; }
  .footer-block .footer-block-3 { text-align: right;  width: 42%; }

  #SOAfooterlinks ul {
    padding: 0;
    margin: 0 0 16px;
    text-align: center;
  }

  /* Page layout */
  .home .content > article {
    float: left;
    max-width: 59%;
  }

  .home .sidebar-home {
    float: right;
    max-width: 39%;
  }

  .home .bottom-block {
    float: left;
    width: 32%;
    min-height: 450px;
  }

  .page .content {
    float: left;
    max-width: 66%;
  }

  .sidebar {
    float: right;
    max-width: 32%;
  }

  .page.right-sidebar .content {
    float: left;
    max-width: 66%;
  }

  .page.right-sidebar .sidebar {
    float: right;
    max-width: 32%;
  }
}

@media screen and (min-width: 60em) {
  header.site-header { margin: 2em 0 0; }

  li#nativeLanguage { display: block; }

  .two-column-toc {
    column-count: 2;
    column-gap: 1rem;
    column-rule-style: solid;
    column-rule-width: 1px;
  }

  .two-column-toc h2 { column-span: all; }
}