/*
   ASHWeb: the rules the old pages got from the ASP.NET Menu control and from inline styles, plus the additions made
   for WCAG 2.1 AA. ASH_CSS.css (the old theme) is unchanged and loads first.
*/

/* ------------------------------------------------------------------ menu (old ASHMenu.ascx) */

/* The old menu's generated classes: _2 (bar), _4 (static item), _1/_3 (static link), _6 (drop-down item),
   _5 (drop-down link), _8/_9/_10 (hover). */
table.am-bar { background-color:#F4DB74; font-family:Arial; font-size:large; }
table.am-item { background-color:#F4DB74; }
.am-link { font-family:Arial; font-size:large; text-decoration:none; color:Black; font-weight:bold; }
.am-root { display:inline; }
.am-dyn { font-weight:normal; }
table.am-dyn-item { background-color:Cornsilk; border-color:Black; border-width:1px; border-style:Solid; padding:0px 3px 0px 3px; }

/* The Data, Literature, Maps and Data Codes buttons look like the old menu's links. */
button.am-link { background:transparent; border:0; padding:0; margin-top:0; margin-right:0; margin-bottom:0; cursor:pointer; line-height:normal; }
button.am-link:hover { background-color:rgb(255,243,204); }

/* Hover and open item: orange, bold. */
/* Hover (and keyboard focus) on a menu item: orange, as the old menu's hover styles; a drop-down item's text turns bold. */
td.am-static > table.am-item:hover, td.am-static > table.am-item:focus-within { background-color:#FF9933; }
tr.am-dynamic > td > table.am-dyn-item:hover, tr.am-dynamic > td > table.am-dyn-item:focus-within { background-color:#FF9933; }
tr.am-dynamic > td > table.am-dyn-item:hover .am-dyn, tr.am-dynamic > td > table.am-dyn-item:focus-within .am-dyn { color:Black; font-weight:bold; }

/* The drop-down lists: below a menu item, Data Codes' list to its right. */
/* The lists hang from a zero-height box under the menu item; the item itself is not positioned, so the shadows of the
   buttons above the menu still fall across it, as on the old page. */
.am-anchor { position:relative; height:0px; }
tr.am-dynamic > td { position:relative; }
.am-drop { display:none; position:absolute; left:0px; top:0px; z-index:100; background-color:white; }
.am-drop.am-side { left:100%; top:0px; }
.am-drop table { border-collapse:separate; }
/* Without JavaScript the lists open on hover and on keyboard focus; with it (class am-js) ashweb.js opens them. */
html:not(.am-js) td.am-static:hover > .am-anchor > .am-drop, html:not(.am-js) td.am-static:focus-within > .am-anchor > .am-drop,
html:not(.am-js) tr.am-dynamic:hover > td > .am-drop, html:not(.am-js) tr.am-dynamic:focus-within > td > .am-drop,
.am-drop.am-shown { display:block; }

/* ------------------------------------------------------------------ added for WCAG 2.1 AA */

.skiplink { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skiplink:focus { left:5px; top:5px; width:auto; height:auto; padding:4px 8px; background-color:#ffffff; color:#0000EE; border:2px solid #000000; z-index:200; font-family:Arial,Helvetica,sans-serif; }
.visuallyhidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* The old master page's form: in quirks mode a form keeps 1em of space below it. */
.ash-page { margin-bottom:1em; }
/* The forms added on the search and list pages take no space of their own. */
form.ash-form { margin:0; padding:0; display:inline; }
form.ash-block { margin:0; padding:0; }

/* Labels and page titles that were plain text (asp:Label rendered as span) look the way the spans did: the theme
   gives span, h1 and h2 the same font, so only the label needs it. */
table.searchtable label { font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif; }
.ash-pagetitle { display:inline; margin:0; padding:0; font-weight:normal; }

/* The slideshow's Pause / Play button sits in the row of slide numbers without making it taller. */
.ash-pause { font-family:Arial,Helvetica,sans-serif; font-size:12px; line-height:12px; padding:0px 4px; margin-left:6px; vertical-align:top; }

/* Red text was #ff0000, which is below 4.5:1 on the pages' light backgrounds. Inside the blue search box (#ACD7E6)
   messages use a darker red (#b00000, 4.8:1). */
.ash-red { color:#d40000; }
.ash-problem { color:#b00000; font-weight:bold; }

/* Text in the boxed area at the foot of the home page: the theme's brown (179,94,37) is 4.17:1 on the box color
   (255,243,204); 5% darker reaches 4.5:1. Headings in the same brown are large text and already pass. */
div.ash_style { color:#aa5923; }

/* After a link whose page no longer exists (checked over http and https, November 2026); the address is kept. */
.linkgone { font-style:italic; font-weight:normal; }

/* Buttons that only work with JavaScript (Check All Files, Uncheck All Files, the slideshow's Pause) start hidden. */
.ash-js-only[hidden] { display:none; }

/* WCAG 2.1 1.4.10 Reflow: at 600 pixels and narrower (400% zoom of a 1280-pixel window is 320 pixels) the layout and
   content tables become one column, the search form puts each label above its field, and the results tables (class
   ash-grid) scroll inside their own box. Wider windows are not affected, so the pages look as they always have. */
@media (max-width: 600px) {
    body { padding-left:5px; padding-right:5px; margin-left:5px; margin-right:5px; }
    h1.ash_style { font-size:200%; }
    .bk a.button { height:auto !important; }
    table.am-bar td { white-space:normal !important; }
    #main table:not(.ash-grid):not(.ash-pager), #main table:not(.ash-grid):not(.ash-pager) > tbody,
    #main table:not(.ash-grid):not(.ash-pager) > tbody > tr, #main table:not(.ash-grid):not(.ash-pager) > tbody > tr > td,
    #main table:not(.ash-grid):not(.ash-pager) > tbody > tr > th { display:block; width:auto !important; height:auto !important; }
    #main table:not(.ash-grid):not(.ash-pager) { border-spacing:0; margin-left:0 !important; margin-right:0 !important; }
    #main table:not(.ash-grid):not(.ash-pager) > tbody > tr > td { margin:0 0 6px 0; }
    #main .tbl_labeltd { text-align:left !important; }
    #main div[style*="width:50%"] { width:auto !important; }
    #main div[style*="float:left"] { float:none !important; }
    #main div[style*="margin-left:100px"] { margin-left:0 !important; }
    #main div[style*="padding-left:30px"] { padding-left:5px !important; padding-right:5px !important; }
    #slider { width:100% !important; }
    .gridwrap { overflow-x:auto; max-width:calc(100vw - 30px); }
    img { max-width:100%; height:auto; }
    select, input[type=text] { max-width:100%; }
    #main p, #main li, #main a, #main h1, #main h2 { overflow-wrap:anywhere; }
}