/* ==========================================================================
   Handgunlaw.us
   Single stylesheet for index.html and updates.htm.

   The shared layout rules previously supplied by emx_nav_left.css are included
   here. Page-specific rules are scoped with body.home / body.updates so the
   two pages cannot override one another.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base elements
   -------------------------------------------------------------------------- */

body {
    font-family: Arial, sans-serif;
    color: #333333;
    line-height: 1.166;
    margin: 0;
    padding: 0;
    background: #cccccc url("bg_grad.jpg") fixed;
    font-weight: bold;
}

a:link,
a:visited {
    color: #005FA9;
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    font: bold 120% Arial, sans-serif;
    color: #334d55;
    margin: 0;
    padding: 0;
}

h2 {
    font: bold 114% Arial, sans-serif;
    color: #006699;
    margin: 0;
    padding: 0;
}

h3 {
    font: bold 100% Arial, sans-serif;
    color: #334d55;
    margin: 0;
    padding: 0;
}

h4 {
    font: 100% Arial, sans-serif;
    color: #333333;
    margin: 0;
    padding: 0;
}

h5 {
    font: 100% Arial, sans-serif;
    color: #334d55;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: square;
}

ul ul {
    list-style-type: disc;
}

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

form {
    margin: 0;
    padding: 0;
}

label {
    font: bold 1em Arial, sans-serif;
    color: #334d55;
}

input {
    font-family: Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Page layout
   -------------------------------------------------------------------------- */

#pagecell1 {
    position: absolute;
    top: 110px;
    left: 23px;
    right: 2%;
    width: 95.6%;
    background-color: #ffffff;
}

#tl {
    position: absolute;
    top: -1px;
    left: -1px;
    margin: 0;
    padding: 0;
    z-index: 100;
}

#tr {
    position: absolute;
    top: -1px;
    right: -1px;
    margin: 0;
    padding: 0;
    z-index: 100;
}

#masthead {
    position: absolute;
    top: 0;
    left: 2%;
    right: 2%;
    width: 95.6%;
}

#pageNav {
    float: left;
    width: 180px;
    padding: 0;
    background-color: #F5f7f7;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    font: small Verdana, sans-serif;
}

#content {
    padding: 0 10px 0 0;
    margin: 0 0 0 180px;
    border-left: 1px solid #ccd2d2;
}

/* --------------------------------------------------------------------------
   3. Header and site name
   -------------------------------------------------------------------------- */

#siteName {
    margin: 0;
    padding: 16px 0 8px 0;
    color: #ffffff;
    font-weight: normal;
}

/* Date line on index.html (was an <h1>) */
p#siteName {
    font: normal 120% Arial, sans-serif;
    line-height: normal;
}

#utility {
    font: 75% Verdana, sans-serif;
    position: absolute;
    top: 16px;
    right: 0;
    color: #919999;
}

#utility a {
    color: #ffffff;
}

#utility a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Page name
   -------------------------------------------------------------------------- */

#pageName {
    padding: 0 0 14px 10px;
    margin: 0;
    border-bottom: 1px solid #ccd2d2;
}

#pageName h1 {
    font: bold 175% Arial, sans-serif;
    color: #000;
    margin: 0;
    padding: 0;
}

#pageName h2 {
    font: bold 175% Arial, sans-serif;
    color: #000000;
    margin: 0;
    padding: 0;
}

#pageName img {
    position: absolute;
    top: 0;
    right: 6px;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Global navigation
   -------------------------------------------------------------------------- */

#globalNav {
    position: relative;
    width: 100%;
    min-width: 640px;
    height: 32px;
    color: #cccccc;
    padding: 0;
    margin: 0;
    background-image: url("glbnav_background.gif");
}

#globalNav img {
    margin-bottom: -4px;
}

#gnl {
    position: absolute;
    top: 0;
    left: 0;
}

#gnr {
    position: absolute;
    top: 0;
    right: 0;
}

#globalLink {
    position: absolute;
    top: 6px;
    height: 22px;
    min-width: 640px;
    padding: 0;
    margin: 0;
    left: 10px;
    z-index: 100;
}

/* Legacy link-style top-level items (updates.htm) */
a.glink,
a.glink:visited {
    font-size: small;
    color: #000000;
    font-weight: bold;
    margin: 0;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
}

a.glink:hover {
    background-image: url("glblnav_selected.gif");
    text-decoration: none;
}

/* Button-style top-level items (index.html) */
button.glink {
    display: inline-block;
    appearance: none;
    background: none;
    border: 0;
    border-right: 1px solid #8FB8BC;
    border-radius: 0;
    margin: 0;
    padding: 2px 5px 4px;
    font: bold small Arial, sans-serif;
    line-height: 1.166;
    color: #000;
    cursor: pointer;
}

button.glink:hover,
button.glink[aria-expanded="true"] {
    background: url("glblnav_selected.gif");
}

button.glink:focus-visible {
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   6. Sub-navigation
   -------------------------------------------------------------------------- */

/* Compact dark strip shared by both pages */
.subglobalNav {
    position: absolute;
    top: 82px;
    left: 0;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: 3px 12px;
    border-radius: 4px;
    background: rgba(30, 48, 58, .85);
    visibility: hidden;
    color: #ffffff;
}

.subglobalNav.is-open {
    visibility: visible;
}

.subglobalNav a:link,
.subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
}

.subglobalNav a:hover {
    color: #cccccc;
}

.subglobalNav a:focus-visible {
    outline-color: #fff;
}

/* --------------------------------------------------------------------------
   7. Search, breadcrumbs and accessibility
   -------------------------------------------------------------------------- */

#search {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 101;
}

#search input {
    font-size: 70%;
    margin: 0 0 0 10px;
}

#search a:link,
#search a:visited {
    font-size: 80%;
    font-weight: bold;
}

#search a:hover {
    margin: 0;
}

#breadCrumb {
    padding: 5px 0 5px 10px;
    font: small Verdana, sans-serif;
    color: #AAAAAA;
}

#breadCrumb a {
    color: #AAAAAA;
}

#breadCrumb a:hover {
    color: #005FA9;
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid #0b57d0;
    outline-offset: 2px;
}

/* Skip links stay hidden on the legacy page */
.skipLinks {
    display: none;
}

/* Skip links: hidden until a keyboard user tabs to them (index.html) */
body.home .skipLinks {
    display: block;
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: #fff;
    color: #000;
    padding: 6px 10px;
}

body.home .skipLinks:focus-within {
    left: 8px;
    top: 8px;
    border: 2px solid #0b57d0;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   8. Feature and story
   -------------------------------------------------------------------------- */

.feature {
    padding: 0 0 10px 10px;
    font-size: 80%;
    min-height: 200px;
    height: 200px;
}

html > body .feature {
    height: auto;
}

.feature h3 {
    font: bold 175% Arial, sans-serif;
    color: #000000;
    padding: 30px 0 5px 0;
}

.feature img {
    float: left;
    padding: 0 10px 0 0;
}

/* index.html and updates.htm arrange the map and state pages side by side */
.feature {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 44px;
    align-items: start;
}

@media (max-width: 900px) {
    .feature {
        grid-template-columns: 1fr;
    }
}

.story {
    padding: 10px 0 0 10px;
    font-size: 80%;
}

.story h3 {
    font: bold 125% Arial, sans-serif;
    color: #000000;
}

.story p {
    padding: 0 0 10px 0;
    font-weight: normal;
    
}

.story a.capsule {
    font: bold 1em Arial, sans-serif;
    color: #005FA9;
    display: block;
    padding-bottom: 5px;
}

.story a.capsule:hover {
    text-decoration: underline;
}

td.storyLeft {
    padding-right: 12px;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

#siteInfo {
    clear: both;
    border-top: 1px solid #cccccc;
    font-size: small;
    color: #cccccc;
    padding: 10px;
    margin-top: 0;
}

#siteInfo img {
    padding: 4px 4px 4px 0;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. Sidebar navigation and adverts
   -------------------------------------------------------------------------- */

#sectionLinks {
    margin: 0;
    padding: 0;
}

#sectionLinks h3 {
    padding: 10px 0 2px 10px;
    border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link,
#sectionLinks a:visited {
    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image: url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0 3px 10px;
    color: #21536A;
}

#sectionLinks a:hover {
    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}

.relatedLinks {
    margin: 0;
    padding: 0 0 10px 10px;
    border-bottom: 1px solid #cccccc;
}

.relatedLinks h3 {
    padding: 10px 0 2px 0;
}

.relatedLinks a {
    display: block;
}

#advert {
    padding: 10px;
}

#advert img {
    display: block;
}

/* --------------------------------------------------------------------------
   11. Shared text helpers
   -------------------------------------------------------------------------- */

.style1 {
    color: #FF0000;
}

.style2 {
    color: #0000FF;
}

.style7 {
    font-weight: bold;
}

.style10 {
    font-size: small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.style11 {
    color: #FF0000;
    font-weight: bold;
}

.style12 {
    font-size: medium;
}

.text-center {
    text-align: center;
}

.ExtraLarge {
    font-family: "Times New Roman", Times, serif;
    font-size: x-large;
    font-style: normal;
    line-height: normal;
}

#pagecell1 #content .story .style11 .style12 .ExtraLarge strong {
    color: #F00;
}

/* --------------------------------------------------------------------------
   12. Interactive US map (index.html)
   -------------------------------------------------------------------------- */

/* "Why have this site" sits under "US State Pages" in the right-hand column */
.state-pages .story {
    font-size: 100%;
    padding: 0;
    margin-top: 24px;
}

/* .feature is already 80% */
.state-pages .story img {
    float: none;
    padding: 0;
    max-width: 100%;
    height: auto;
}

/* undo .feature img { float: left } */

/* Map column hugs the map, "US State Pages" text fills the rest */
.map-column,
.state-pages {
    min-width: 0;
}

.map-column {
    padding: 24px 0 0 24px;
}

/* .us-map {
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid #b9c3c3;
    border-radius: 6px;
    background: #fff;
    width: 400px;
} */
.us-map svg {
    display: block;
    height: auto;
    width: 500px;
}

.us-map a {
    cursor: pointer;
    outline: none;
}

.us-map a:hover {
    text-decoration: none;
}

/* Issuance colors (same values as issuance_map.svg) */
.issue-shall {
    --issue-fill: #c2c2ff;
    --issue-hover: #9d9dff;
}

.issue-may {
    --issue-fill: #ffcc99;
    --issue-hover: #ffb066;
}

.issue-none {
    --issue-fill: #ff0000;
    --issue-hover: #cc0000;
}

.us-map .map-area {
    fill: var(--issue-fill);
    stroke: #000;
    stroke-width: 1.25;
    transition: fill .15s;
}

/* Labels stay black on hover/focus so the PR and VI labels (which sit outside
   their islands) never vanish. */
.us-map .map-label {
    font: 21px "Trebuchet MS", Helvetica, sans-serif;
    fill: #000;
    font-weight: bold;
}

.us-map .map-label-sm {
    font-size: 20px;
    text-anchor: middle;
}

.us-map .map-leaders path {
    fill: none;
    stroke: #b9b9b9;
    stroke-width: 1.25;
}

/* Outlines around Alaska, Hawaii and the territories
   (same colors/widths as issuance_map.svg) */
.us-map .map-separators {
    pointer-events: none;
}

.us-map .map-separators path {
    fill: none;
}

.us-map .map-sep1 {
    stroke: #b0b0b0;
    stroke-width: 2;
}

/* around AK, HI and territories */
.us-map .map-sep2 {
    stroke: #d0d0d0;
    stroke-width: 1;
}

/* between islands of the same territory */
.us-map a:hover .map-area,
.us-map a:focus-visible .map-area {
    fill: var(--issue-hover);
    stroke: #666;
    stroke-width: 1.25;
}

.us-map a:focus-visible .map-area {
    stroke: #000;
    stroke-width: 2.5;
}

.map-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    margin-bottom: 0;
}

.map-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
}

.map-links {
    margin: 8px 0 0;
    text-align: center;
}

.map-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: bold;
}

.map-legend .swatch {
    width: 16px;
    height: 16px;
    border: 1px solid #888;
    border-radius: 3px;
    background: var(--issue-fill);
}

/* --------------------------------------------------------------------------
   13. updates.htm
   -------------------------------------------------------------------------- */

/* Keep the update history inset from the content edge like the live page */
body.updates .story-inset {
    padding: 0 80px;
}

/* Center the Visualping "Notify Me" widget (rendered as a block child) */
body.updates #visualping_widget > div {
    margin-left: auto;
    margin-right: auto;
}

body.updates .style5 {
    font-weight: bold;
}

body.updates .style6 {
    font-size: small;
}

body.updates #pagecell1 #content .story div blockquote blockquote .style10 {
    color: #000;
}

body.updates #pagecell1 #content .story div blockquote blockquote .style10 strong {
    color: #F00;
}

body.updates #pagecell1 #content .story div blockquote blockquote .style10 .style10 {
    color: #F00;
}

body.updates #pagecell1 #content .story div blockquote blockquote div h1 a em {
    color: #F00;
}

body.updates red {
    color: #F00;
}

body.updates .red {
    color: #F00;
}

body.updates .style12 {
    color: #FF0000;
    font-weight: bold;
    font-size: 100%;
}

body.updates .style45 {
    font-weight: bold;
    font-size: 18px;
    color: #FF0000;
}

body.updates .style101 {
    font-size: small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

body.updates .donate-box {
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
}