/* ****************************************************************************************************** */
/* ***  IF UPDATED, CONSIDER ALSO UPDATING /var/www/html/BLOG/wp-content/themes/isola-jack/style.css  *** */
/* ***  PUT EXAMPLES IN https://bigsurtrailmap.net/HTML/EXAMPLES/example-basic.html                   *** */
/* ****************************************************************************************************** */

/* HTML4->HTML5 => depreciated tags|attributes: <center>,<font>,<tt>,<u>|target=,width= [https://www.tutorialspoint.com/html5/html5_deprecated_tags.htm] */

/* ---  FOR HTML5 - MY GLOBAL DEFAULTS  (over-ride some css defaults)  --- */
table { margin-left:auto; margin-right:auto; text-align:center;  /* for default centered tables - replacing align="center" */
        border-collapse:combine; border-spacing:0; }             /* combine cell borders */
body
{
  background-color: #fefdfc; /* off-white - 7aug2024 */
  border-width: 1px;
}

/* --- VARIABLES (Custom property names) --- */
:root {
  --bg-color-yellow0: rgb(255,255,238);   /* usage: background-color:var(--bg-color-yellow0); */  /* #FFFFEE = rgb(100%,100%,93%) */
  --bg-color-yellow1: rgb(255,255,208);   /* usage: background-color:var(--bg-color-yellow1); */  /* #FFFFD0 = rgb(100%,100%,82%) */
  --bg-color-yellow2: rgb(255,255,153);   /* usage: background-color:var(--bg-color-yellow2); */  /* #FFFF99 = rgb(100%,100%,60%) */
}

/* --- REPLACEMENTS FOR DEPRECIATED TAGS/ATTRIBUTES --- */
  .center           { margin-left:auto; margin-right:auto; text-align:center; }  /* to replace div align="center" */
  .left             { margin-left:auto; margin-right:auto; text-align:left; }  /* to replace div align="left" */
  .right            { margin-left:auto; margin-right:auto; text-align:right; }  /* to replace div align="right" */
  .flex-center      { display:flex; align-items:center; justify-content:center; }
  /* vertical:align - in many cases can see no difference between baseline, texttop, middle */
  .valign-top       { vertical-align:top; }     /* to replace img align="top" */
  .valign-texttop   { vertical-align:text-top; }
  .valign-middle    { vertical-align:middle; }  /* to replace img align="middle" */
  .valign-baseline  { vertical-align:baseline; }
  .valign-bottom    { vertical-align:bottom; }  /* to replace img align="bottom" */
  .tt               { font-family:monospace; }  /* alternative tags: <code> / <kbd> (seems ala <code>) / <var> (italic, larger) / <samp> (slightly smaller) */
  .nowrap           { white-space:nowrap }     /* for no line break between _elements_ (vice _words_) */
  .nobr             { white-space:nowrap }     /* " */
  .unselectable     { user-select:none; }      /* replace ms lement attribute "unselectable='on/off'" (default=on) */

/* --- TAGS CONSIDERED PRESENTATIONAL: /https://wiki.whatwg.org/wiki/Presentational_elements_and_attributes --- */
  .block           { display: block; }
  .inline-block    { display: inline-block; }
  .inline          { display: inline; }
  .flex            { display: flex; }
  .hidden          { display: none; }
  .limitedwidth    { max-width: 750px; margin-left: auto; margin-right: auto; }  /* eg: <DIV class="limitedwidth"> - with bkg, HTML/EXAMPLES/limited_width.html */
  .align-right     { text-align: right; }
  .absolute-right  { position: absolute; right: 0; }  /* position:absolute removes from flow, allows overlap */
  .font-color-red  { color: #cc0000 ; }   /* but usually use .red instead */
  .narrowfont      { font-family: 'Liberation Narrow','Arial Narrow','Archivo Narrow', sans-serif; }   /* but must download font: <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet"> */
  .smallcaps       { font-variant: small-caps ; }
  /* note: html5 <SMALL> reduces font-size but NOT distance between lines with "line-spacing:normal" (essentially same as "font-size:smaller"=0.833) */
  /*        (? because line-height cannot be smaller than parent div/container - see fix according to https://blog.worldanvil.com/worldanvil/tutorials/pro-tips/css-fixing-smalls-line-height-text-mods-month/) */
  /*        (? because of inline 'half-leading' - see fix according to https://stackoverflow.com/questions/27338972/how-can-html-small-tag-affect-the-css-line-height-property) */
  /* but below .small classes also reduce distance between lines - so use for multi-line small text */
  .small3          { font-size: max( 58%,  8px ); }  /* =0.833*0.833*0.833 */
  .small2          { font-size: max( 69%, 10px ); }  /* =0.833*0.833 */
  .small1          { font-size: max( 83%, 12px ); }
  .small           { font-size: max( 83%, 12px ); }
   /* OLD=sansMax .small  { font-size:  83% ; } */ /* note HTML5 <SMALL> reduces font-size but NOT distance between lines with "line-spacing:normal" */ /* essentially same as "font-size:smaller"=0.833 */
   /*OLD .font-size-3     { font-size:  58% ; } */ /* .578=0.833*0.833*0.833 */
   /*OLD .font-size-2     { font-size:  69% ; } */ /* .694=0.833*0.833 */
   /*OLD .font-size-1     { font-size:  83% ; } */ /* ala "font-size:smaller"=0.833 */
  .font-size-3     { font-size: max( 58%,  8px );}   /* .578=0.833*0.833*0.833 */
  .font-size-2     { font-size: max( 69%, 10px ); }  /* .694=0.833*0.833 */
  .font-size-1     { font-size: max( 83%, 12px ); }  /* ala "font-size:smaller"=0.833 */
  .font-bigchar    { font-size: 110% ; }  /* for simple enlargement of character(s) */
  .font-size1      { font-size: 120% ; }
  .font-size2      { font-size: 150% ; }
  .font-size3      { font-size: 200% ; }
  .font-size4      { font-size: 250% ; }
  .font-size5      { font-size: 300% ; }
  .large           { font-size: 120% ; }
  .large1          { font-size: 120% ; }
  .large2          { font-size: 150% ; }
  .large3          { font-size: 200% ; }
  /* old .u               { text-decoration: underline; } */
  /* utility .full-width breaks image out of parent container (currently unused) */
  .full-width {
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      max-width: 100vw;
      position: relative;
      right: 50%;
      width: 100vw;
  }

/* ---  MOBILE DIV ADJUSTMENTS  --- */
  /* --- general styling for small screens --- */
  @media only screen and (max-width: 480px) { /* for iphone4, displays in neither portrait or landscape */
    .smallscreen-linebreak { display:block; }
    .mobile_verticalspacing { display:block !important; margin-top:5px !important; margin-bottom:5px !important; } /* increase vertical space between single-line adjacent buttons */
    .mobile_textexpansion { font-size:120% !important; line-height:120% !important; }                              /* use with above for non-button text links */
    .tooltip-button { font-size: 16px !important; }
    /* unused: .mobile_widthexpansion { width:120% !important; } */
  }
  /* - do not display on large-screen - */
  @media only screen and (min-width: 480px) {    /* for screens >480px width */
    /* only display on small screen - eg: small-screen-only linebreak = <BR class="mobilephonedisplay"> */
    .mobilephonedisplay { display: none; }
    .smallscreen-show   { display: none; }
    .largescreen-hide   { display: none; }
    .largescreen-floatleft  { float: left;  margin-right: 10px; } /* order sensitive - if .center follows, margin-right inoperative */
    .largescreen-floatright { float: right; margin-left:  10px; } /* order sensitive - if .center follows, margin-left inoperative */
  }
  /* - display only on large-screen (negation of above) - */
  @media only screen and (max-width: 480px) {   /* for screens <480px width */
    /* do not display on small screen - eg: large-screen-only linebreak = <BR class="nonmobilephonedisplay"> */
    .nonmobilephonedisplay { display:none; }
    .smallscreen-linebreak { display:inline; }  /* unsure about usage, only used once in html webpage */
    .largescreen-show      { display:none; }
    .smallscreen-hide      { display:none; }
  }
/* ---  WEBSITE ELEMENT ADJUSTMENTS  --- */
  body
  {
    margin-left: 5%; margin-right: 5%;
    font-family:  arial, verdana, helvetica, sans-serif;  /* ala old div, p, td */
    /* 4roboto : font-family:  roboto, arial, verdana, helvetica, sans-serif; */ /* ala old div, p, td */
    /* OLD font-family:  verdana, liberation, arial, helvetica, sans-serif; */  /* but Liberation Sans used in Chrome & FF */
    /* off-white not possible for most webpages since 'Big Sur Trailmap' logo backgrounds are white */
  }
  @media only screen and (max-width: 480px) {
    body { margin-left: 2.5%; margin-right: 2.5%; }
  }
  td { font-family: arial, helvetica, sans-serif }  /* for tables use narrower font than Verdana */
  /* OLD div, p, td { font-family: arial, verdana, helvetica, sans-serif } */
  h2,h3,h4,h5,h6 { margin-left: 3% } /* moves sub-heads to right */
  pre { color: black; font-weight: bold; white-space: pre; font-family: monospace; }
  tt { color: black }
  em { font-style: italic; font-weight: bold }
  strong { font-weight: bold }
  /* old td { font-family: sans-serif; font-size: 0.8rem } */
  td.shaded { background: rgb(255, 255, 153) }   /* must use with TD */
  th.shaded { background: rgb(204, 204, 153) }   /* must use with TH */
  a:hover  {color: #CC0000}
  a:active {color: #CC0000}
  /* old=orangish a:hover  {color: #FF6600} */
  /* old=orangish a:active {color: #FF6600} */
  .navbar { text-align: center }
  /* old: defeat Chrome user-agent-stylesheet desire to add extra space above+below a list */
  /* old: ul,ol { -webkit-margin-before:0px; -webkit-margin-after:0px; } */

/* --- DIV/P ALTERATIONS --- */
  div.box { display:inline-block; border: solid; border-width: thin; padding: 0.2em; }  /* must use with DIV */
  div.yellowbackground { background-color: var(--bg-color-yellow1); padding: 0.5em; border: none; } /* must use with DIV */
  div.jackbackground { background-color: var(--bg-color-yellow0); border: none; margin-left: 0%; margin-right: 0%; text-align: left; } /* must use with DIV */
  p.changed { padding-left: 0.2em; border-left: solid; border-top: none; border-bottom: none; border-right: none; border-left-width: thin; border-color: red; }  /* must use with P */

/* --- TEXT ADJUSTMENTS --- */
  .verdana            { font-family: verdana, sans-serif }
  .italic             { font-style: italic; }
  .bold               { font-weight:bold; }
  .underline          { text-decoration-line: underline; text-decoration-thickness: 1px; }
  .boldunderline      { font-weight:bold; text-decoration-line: underline; text-decoration-thickness: 1px; }
  .boldunderline2     { font-weight:bold; text-decoration-line: underline; text-decoration-thickness: 2px; }
  /* ?? */
  pre.bad { color: rgb(192, 101, 101) }  /* must use with PRE */
  /* simple character enlargement (if larger than 120% get char run-together at end of class) */
  .bigchar { font-size:120% ; padding-right:0.02em; } /* old:  padding-right:0.05em; */
  /* simple character enlarge+bold  */
  .upchar {
      font-size: 120%;  /* old 150% */
      font-weight: bold;
      padding-right:0.1em;
  }
  /* for non-pullquote first character enlargement within <p> tags - but padding-right does not work */
  .upchar.p p:first-letter {
      font-size: 120%;  /* old 150% */
      font-weight: bold;
  }
  /* for enlarged & hilited & altered font text */
  .dropcap { font: bold 1.4em "Times New Roman", serif; color: rgb(51, 0, 102); background: rgb(255, 255, 153); }
  /* OLD=float=>lowersBaseline!? .dropcap { float: left; font: bold 1.4em "Times New Roman", serif; color: rgb(51, 0, 102); background: rgb(255, 255, 153); } */
  blockquote { margin: 0; } /* remove default blockquote margin */
  /* scaled-character - eg use for curly-bracket ala  <div class="scaled-chararacter">}</div> <div>text</div> */
  /*                    per https://stackoverflow.com/questions/47079433/bracket-line-with-css */
  /*                    is for large horiz.paren - alter style on element for other cases */
  /*                    eg: <div> bracketed text<br><div class="scaled-rotated-character" style="top:-40px;left:40px;">}</div></div> */
  /*                    BUT: () VERY thick if large () much white space below after rotation */
  .scaled-rotated-character {
    display: inline-block;
    position: relative;
    font-weight: 100;
    font-size: 96px;
    text-align: left;
    transform: rotate(90deg) scale(0.75);
  }

/* --- LINKS --- */
  /* alink class used for <A> sans HREF - eg onclick="record_outbound('lostvalleytrailopening_click');return false;" */
  .alink { color: blue; text-decoration: underline; cursor: pointer; }
  .alink:hover { color: red; }

/* --- SPACING --- */
  /* vertical half space - use ala <div class="halfline"></div> */
  .halfline { height:7px; }
  /* to backspace ~1/2 character - use with <span> to remove whitespace at end of ssi include */
  .right-halfbackspace { margin-right:-0.6em }

/* --- CENTERING --- */
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* vertical centering - but must be put inside container div with "position: relative" */
  /* seems to work only for one-line div - if have divs to side, they move together */
  .vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

/* ---  BRACKETS  --- */
  /* multiline-brackets - may optionally specify width ala: <DIV class="multiline-brackets" style="width:120px"> */
  /*                   per 'Muhammed Usman' https://stackoverflow.com/questions/41790586/draw-square-brackets-around-multi-line-text/41802427#41802427 */
  /*                   looks unnatural, made more naturat by reducing width - if line broken by small-screen, brackets are at edges with inner whitespace */
  .multiline-brackets {
    display: inline-block;
    background-image: linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444);
    background-repeat: no-repeat;
    background-size: 4px 2px;  /* controls horiz.length & ? */
    /* original: background-size: 8px 3px; */
    background-position: top left, top right, bottom left, bottom right;
    border: 2px solid #444444;
    border-width: 0 2px;
    /* original: border-width: 0 3px; */
    vertical-align: top;
    padding: 1px 4px;  /* control vertial & horiz space around text - note order counter-intuitive ! */
    /* original: padding: 1px 1px; */
  }
  .multiline-brackets-small {  /* note: requires <br> at end of each line - else brackets appear at page width */
    font-size: 83%;
    line-height: 100%;  /* strange - without this line-height too big, ala what would be without font-size change */
    display: inline-block;
    background-image: linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000);
    background-repeat: no-repeat;
    background-size: 4px 1px;  /* controls horiz.length & ? */
    background-position: top left, top right, bottom left, bottom right;
    border: 1px solid #000000;
    border-width: 0 1px;
    vertical-align: top;
    padding: 1px 4px;  /* control vertial & horiz space around text - note order counter-intuitive ! */
  }
  .multiline-brackets-bold {  /* note: requires <br> at end of each line - else brackets appear at page width */
    font-weight: bold;
    display: inline-block;
    background-image: linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444);
    background-repeat: no-repeat;
    background-size: 4px 3px;  /* controls horiz.length & ? */
    background-position: top left, top right, bottom left, bottom right;
    border: 3px solid #444444;
    border-width: 0 3px;
    vertical-align: top;
    padding: 1px 4px;  /* control vertial & horiz space around text - note order counter-intuitive ! */
  }

/* ---  INDENTS  --- */
  /* hanging indent only works for block elements (eg <p>,<div> not <span>) - <P> => adds blank line after <P>s - if extra space appears, replace un-closed <p> with <br><br> */
  .hangingindent {
     padding-left: 15px ;
     text-indent: -15px ;
  }
  /* ala above but removes blank lines after <P>s */
  /* can instead use .hangingindent with <DIV>s */
  .hangingindent-compressed {
     margin: 0; /* to remove extra blank line when using with <P> tag  */
     padding-left: 15px ;
     text-indent: -15px ;
  }
  .hangingindent-4bullet {   /* for smaller indent */
     margin: 0; /* to remove extra blank line when using with <P> tag  */
     padding-left: 5px ;
     text-indent: -5px ;
  }
  .indent {
     padding-left: 15px ;
  }
  .indent-doublesize {
     padding-left: 30px ;
  }
  .symmetricindent {
     padding-left: 30px ;
     padding-right: 30px ;
  }
  .symmetricindent-doublesize {
     padding-left: 60px ;
     padding-right: 60px ;
  }
  .symmetricindent-triplesize {
     padding-left: 80px ;
     padding-right: 80px ;
  }

/* ---  FONTS  --- */
  .miasma1 { unicode-bidi: bidi-override; direction: rtl; }
  .miasma2 { display: none; }
  .verdana { font-family:  verdana, arial, helvetica, sans-serif; }
  .tahoma { font-family:  tahoma,  arial, helvetica, sans-serif; }

/* ---  MY NAMED ELEMENTS  --- */
  .last_map_update { font-size:10px; font-family:monospace; white-space:nowrap }
  /* id=SSS-DIV - make high enough to contain social sharing icons so page does not have to be redrawn after async scripts loaded - may2016: highest icon = 17.6px */
  #sss-div { height:18px ; }
  /* google _outline_ font effect : text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000; */
  /*   (ala Baloo outlined font class, so can have both plain and outline Baloo fonts at same time) */
  .font-effect-outline {
     text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
     color: #fff;
  }
  /* for lightly shadowed title */
  .title-font
  {
    /* center */
    margin-left: auto; margin-right: auto;
    /*  note: Baloo font needs further line-height+letter-spacing adjustments */
    font-size:300%;
    /* OLD=preeb2023 font-size:250%; */
    /* for shadowed text, use lighter red */
    color:#ee0000;line-height:90%;letter-spacing:1px; font-family:'Baloo',Verdana,Arial,sans-serif; margin: 0 auto;
    /* for outlined text, use lighter red with outline effect: font-size:250%;color:#ee0000;line-height:90%;letter-spacing:1px; font-family:'Baloo',Verdana,Arial,sans-serif; margin: 0 auto; */
    /* original google outlined text : text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000; */
    /* gray outline + shadow : text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 -1px 1px rgba(0,0,0,0.6), 1px 0 1px rgba(0,0,0,0.6), -1px 0 1px rgba(0,0,0,0.6), 2px 2px 1px rgba(0,0,0,0.6); */
    /* gray outline (decided that shadow=3D-effect is too much, instead use simple outline - so only logo has 3D-effect : text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 -1px 1px rgba(0,0,0,0.6), 1px 0 1px rgba(0,0,0,0.6), -1px 0 1px rgba(0,0,0,0.6); */
    /* lightly shadowed text = blurred dark gray */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
    /* 2px shadow effect (shadow noticeably offset) =  horizontal-offset vertical-offset blur color(R,G,B,opacity) [https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/] */
    /* OLD=2px text-shadow: 2px 2px 0px rgba(0,0,0,0.7);  */
  }
  .subtitle-font
  {
    /* center */
    margin-left: auto; margin-right: auto;
    /*  ala title-font but smaller */
    font-size:150%;color:#ee0000;line-height:100%;letter-spacing:1px; font-family:Verdana,Arial,sans-serif; margin: 0 auto;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
  }
  .subsubtitle-font
  {
    /* center */
    margin-left: auto; margin-right: auto;
    /*  ala subtitle-font but smaller */
    font-size:100%;color:#ee0000;line-height:90%;letter-spacing:1px; font-family:Verdana,Arial,sans-serif; margin: 0 auto;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
  }
  .baloosubtitle
  {
   font-family:'Baloo',Verdana,Arial,sans-serif;
   font-size:32px;
   line-height:85%;
   color:#cc0000;
  }
  @media only screen and (max-width: 480px) {   /* for screens <480px width */
    .title-font       { font-size:200%; }  /* default 300% is too wide on small screen (earlier used 150% = too small) */
    .subtitle-font    { font-size:100%; }  /* default 150% is too wide on small screen - untested */
    .subsubtitle-font { font-size:75%;  }  /* default 100% is too wide on small screen - untested  */
    .baloosubtitle { font-size:40px; }  /* INCREASE px size for small screen */
  }
  /* block highlight with pale yellow background - use with SPAN (similar to Washington Post - WP original: padding: 3.5px 5px; background-color: rgba(235,224,140,0.6); border-bottom: solid 1px #b2b2b2 */
  /* overflow:hidden keeps from extending into float */
  /* ? display:inline-block required to prevent line division appearing */
  .blockhilite { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; }
  /* ala the above but with lite gray background */
  .blockdehilite { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: rgb(250,250,250); border: solid 1px #b2b2b2; border-radius:4px; }
  /* ala the above but with gray background - in chrome big change in darkness from 250 to 248 !?  */
  .blockdehilite2 { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: rgb(244,244,244); border: solid 1px #b2b2b2; border-radius:4px; }
  /* ala the above but with light pink/rose background */
  .blockredhilite { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: #ffeeee; border: solid 1px #ff3333; border-radius:4px; }
  /* ala the above but with darker pink/rose background */
  .blockredhilite2 { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: #ffdddd; border: solid 1px #ff3333; border-radius:4px; }
  /* old=color=dirtyYellow .blockhilite { padding: 2px 8px; background-color: rgba(235,224,140,0.4); border-bottom: solid 1px #b2b2b2 } */
  /* centered highlight - use with DIV */
  .hilitebox { display:inline-block; margin:auto; padding:10px;background-color:var(--bg-color-yellow1); }
  /* to clear float after enclosing div, eg when floated image larger than associated text - see https://www.w3schools.com/Css/css_float.asp  */
  /*    note: multiple effects (eg clears _both_ floats, uses "table" display) => can give strange results */
  .clear { clear:both; }
  .clear-0px { clear:both;height:0px; }
  /* dashed box */
  .dashedbox { display:inline-block; margin:auto; padding: 2px 6px; border: 1px dashed black; border-radius:4px; }
  /* dotted box */
  .dottedbox { display:inline-block; margin:auto; padding: 2px 6px; border: 1px dotted black; border-radius:4px; }
  /* dotted box */
  .graybox { display:inline-block; margin:auto; padding: 2px 6px; border: 1px dotted gray; border-radius:4px; }
  /* TO DRAW BOX WITH BOLD FONT - eg for 'OR' usage */
  .charbox { font-weight:bold; font-size:75%;position:relative;bottom:2px; display:inline-block; padding: 1px 2px; border: solid 1px #b2b2b2; border-radius:4px; }
  /* TO DRAW BOX WITH BKG HILITE - eg for 'OR' usage */
  .charhilitebox { background-color: rgb(255,255,208); font-size:75%;position:relative;bottom:2px; display:inline-block; padding: 1px 2px; border: solid 1px #b2b2b2; border-radius:4px; }
  /* FOR ALERT BOX eg in news box */
  .fireregs_alertbox { display:inline-block; margin: 4px 0 0 0; padding: 6px 8px 6px 8px; border: 2px solid black;   text-align: center; margin-left:auto; margin-right:auto; }
  .newsbox_alertbox { display:inline-block; margin: 4px 0 0 0;padding: 6px 8px 6px 8px; border: 2px solid black; font-size:13px;  text-align: center; margin-left:auto; margin-right:auto; }  /* with space above border - used for newsbox_fireworks-ssi.php - usually use inside surrouing 'block' for box centering */
  .Alertbox { display:inline-block; padding: 6px 8px 6px 8px; border: 2px solid #cc0000; text-align: center; margin-left:auto; margin-right:auto; }
  /* vertically divided box - top=pale yellow background, bottom=inherited background  (based on .blockhilite */
  .dividedbox-top    { display:block; overflow:hidden; padding: 2px 6px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; border-bottom-left-radius:0;border-bottom-right-radius:0; }
  .dividedbox-bottom { display:block; overflow:hidden; padding: 2px 6px; background-color: inherit;          border: solid 1px #b2b2b2; border-radius:4px; border-top:0;border-top-left-radius:0;border-top-right-radius:0; }
  /*  clear column float */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  /*  for simple pullquote - based on http://htmldog.com/examples/pullquotes2/, more complex example also there */
  .pullquote {
      float: left;
      width: 100px;
      background-color: rgb(255,255,208);
      font-weight: bold;
      padding: 10px;
      margin: 0 13px 0 0;
      text-align: center;
      border: 1px solid black;
      border-radius: 10px;
  }
  /* for pullquote first character enlargement within <p> tags */
  .pullquote p:first-letter {
      font-size: 150%;
      font-weight: bold;
  }
  /* for box around 'OR' or 'or' - eg <SPAN class="orhilite">OR</SPAN> */
  .orhilite { font-size:70%;position:relative;bottom:2px; display:inline-block; font-weight:bold; padding: 1px 3px; border: solid 1px #b2b2b2; border-radius:4px; } /* old=withYellowBkg .orhilite { font-size:70%; display:inline-block; padding: 1px 1px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; } */
  /* for white OR in black box */
  .orreverse { background-color:#666666;color:white; font-size:60%;position:relative;bottom:3px; padding: 0 2px; font-weight:bold; display:inline; border-radius:4px; }

 font-weight:bold; font-size:70%; display:inline-block; padding: 1px 3px; border: solid 1px #b2b2b2; border-radius:4px; } /* old=withYellowBkg .orhilite { font-size:70%; display:inline-block; padding: 1px 1px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; } */
  /* disable transition to remove flickering when mouseover/mouseout changes click region */
  .disable-transition {
    transition: none !important;
  }

  /* EXTEND LINE TO SIDES FROM LEFT/CENTER TEXT */
  /* *NB* MUST SPECIFY CHANGES ala color & background-color & height IN LOCAL _NON-INLINE_ STYLESHEET TO ALTER' */
  .extend-line-right {
    color: #cc0000;      /* set text color */
    margin-top: 4px;     /* set top space */
    margin-bottom: 4px;  /* set bottom space */
    clear: both;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
  }
  .extend-line-right:after {
    background-color: #cc0000; /* set line color */
    height: 3px;               /* set line thickness */
    margin: 0 20px;            /* set text-to-line space */
    content: '';
    flex: 1;               /* might change this ? */
  }
  .extend-line-center {
    color: #cc0000;      /* set text color */
    margin-top: 4px;     /* set top space */
    margin-bottom: 4px;  /* set bottom space */
    clear: both;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .extend-line-center:before {
    background-color: #cc0000; /* set line color */
    height: 3px;               /* set line thickness */
    margin: 0 20px;            /* set text-to-line space */
    content: '';
    flex: 1;               /* might change this ? */
  }
  .extend-line-center:after {
    background-color: #cc0000; /* set line color */
    height: 3px;               /* set line thickness */
    margin: 0 20px;
    content: '';
    flex: 1;               /* might change this ? */
  }

/* --- BUTTONS --- */
  /* NO FONT-SIZE */
  /* from http://css3gen.com/button-generator/ ? */
    .nofont-button {
      cursor: pointer;
      /* ORIGINAL padding: 5px; */
      padding: 0px 16px 0px 16px;
      /* padding: 4px 8px 8px 8px; */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: rgb(233, 240, 235);
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    /* SMALL font,padding,radius,shadow */
    /* used in whereisit.html */
    .basic-button-small
    {
      display:inline-block;
      font-size: 10px;
      font-weight: bold;
      padding: 1px 8px;
      color: #0000DD ; /* blue ala tooltip */
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%);  /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
    }
    /* ala index news buttons */
    /* used in newsbox-ssi.html & whereisit.html */
    .basic-button-large
    {
      display:inline-block;
      font-size: 13px;
      font-weight: bold;
      padding: 5px 10px;
      color: #0000DD;   /* blue ala tooltip */
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 9px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%); /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .basic-button-small:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
      .basic-button-large:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
    }
  /* variation of index.html gobutton + nofont-button */
  /* large block single/multi-line label - for inline-block, see .atag-linkbutton  */
  /* use with 'onClock' ala: <button class="center linkbutton" onClick="click_404('?');window.open('https://?');"> */
  /* used in route_metrics.html & trailconditions.html & finding_mtdefiance.html & sea-to-sky_route.html & sea-to-summit_route.html & flagginghikehistory.googlemaps_display_overlay.html */
  /* may want to surround with <DIV style="display:inline-block"> */
  .linkbutton {
    display:block;
    font-size: 14px;
    /* FOR EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: */
    padding: 4px 16px;
    /* FOR NO EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: padding: 4px; */
    /* FOR THIN BUTTONS: padding: 0px 16px; */
    /* old=gives_larger_size~16px font-size: 100%; */
    color: #0000DD;   /* blue ala tooltip */
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
    border: 1px solid #000000;
    border-radius: 6px;
    background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
    /* old background: rgb(233, 240, 235); */
    box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
  }
  .linkbutton:active{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
  @media (hover:hover) {
    .linkbutton:hover{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
    /* OLD=noSizeIncrease .linkbutton:hover { background-image: none; background-color: rgb(255,255,208); color: #cc0000;  background: linear-gradient(0deg, #ffff77 30%, #ffffbb 70%); } */
  }
  /* unused - changes color during held click - must be after hover : button.active { background-color: #ffffcc; } */

/* --- A TAGS "ala BUTTON" --- */
/* --- ORDERED BY FONT-SIZE --- */
    /* UNUSED to */
    /* use <A> tag as button, add this class (so dont need js to click on "button" */
    /*   but for unknown reason on hover background has gradient, yellow at bottom but white at top !? cannot see any reason in chrome debugger */
    /*   also does not work in FF - so is unusable but kept for reference */
    .atag-button{
      appearance: button;
      color: #0000DD;  /* blue ala tooltip */
      text-decoration: none;
    }
  /* NO FONT-SIZE */
    /* ala nofont-button above but for A tag */
    /* used in index.html expandablesbuttonbox-ssi.html */
    .atag-nofont-button {
      /* for A tag */
      display:inline-block;
      color: #0000DD;  /* blue ala tooltip */
      text-decoration: none;
      /* ala nofont-button above */
      cursor: pointer;
      /* ORIGINAL padding: 5px; */
      padding: 0px 16px 0px 16px;
      /* padding: 4px 8px 8px 8px; */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: rgb(233, 240, 235);
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    /* for small index news buttons */
    /* 12px bold */
    .atag-basic-button-small
    {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size: 12px;
      font-weight: bold;
      padding: 1px 8px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%);  /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .atag-basic-button-small:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
    }
    /*  increase size for small screens */
    @media only screen and (max-width: 480px) {   /* for screens <480px width */
      .atag-basic-button-small { font-size:16px; line-height:150%; }
    }
    /*  but less for 320px screens */
    @media only screen and (max-width: 350px) {   /* for screens <480px width */
      .atag-basic-button-small { font-size:14px; line-height:140%; }
    }
    /* HEIGHT ~ LINEHEIGHT - display:block */
    /* small for mobile screen, try to offset buttons so not right above/below each other on adjacent lines */
    /* now increasing text size & vertical spacing for mobile screen */
    /* used in backpack-suggestions.html & wilderness-places-to-visit.html */
    /* 12px */
    .atag-small-button {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size:12px;
      padding: 0px 6px 0px 6px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      cursor: pointer;
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* old background: rgb(233, 240, 235); */
      text-indent: 0  /* needed for IE to prevent cutoff text */
      /* sans-hover: color: #000000 !important; */
      /* unused
        text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
        box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
      */
    }
    /*  increase size for small screens */
    @media only screen and (max-width: 480px) {   /* for screens <480px width */
      .atag-small-button { font-size:16px; line-height:150%; }
    }
    /* HEIGHT ~ LINEHEIGHT - display:block */
    /* 14px (vice 'small'=12px & 'large'=16px) */
    /* used in ROUTES/NOTES webpages */
    .atag-medium-button {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size:14x;
      padding: 0px 6px 0px 6px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      cursor: pointer;
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* old background: rgb(233, 240, 235); */
      text-indent: 0  /* needed for IE to prevent cutoff text */
      /* sans-hover: color: #000000 !important; */
      /* unused
        text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
        box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
      */
    }

    /* for large index news buttons */
    /* not used */
    .atag-basic-button-large
    {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size: 13px;
      font-weight: bold;
      padding: 5px 10px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 9px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%); /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .atag-basic-button-large:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
    }
    /* VARIATION OF INDEX.HTML GOBUTTON + BASICBUTTON */
    /* large inline-block single/multi-line label - for block, see .linkbutton  */
    /* use with A tag ala: <A class="atag-linkbutton" HREF= */
    /* used in GE_overlays.html & trailconditions.html & finding_mtdefiance.html & sea-to-sky_route.html & sea-to-summit_route.html & flagginghikehistory.googlemaps_display_overlay.html */
    .atag-linkbutton {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display: inline-block;
      font-size: 14px;
      /* alt black color: #000000; */
      /* FOR EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: */
      padding: 4px 16px;
      /* FOR NO EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: padding: 4px; */
      /* FOR THIN BUTTONS: padding: 0px 16px; */
      /* old=gives_larger_size~16px font-size: 100%; */
      cursor: pointer;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* old  background: rgb(233, 240, 235); */
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    .atag-linkbutton:active{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
    @media (hover:hover) {
      .atag-linkbutton:hover{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
      /* OLD=noSizeIncrease .linkbutton:hover { background-image: none; background-color: rgb(255,255,208); color: #cc0000;  background: linear-gradient(0deg, #ffff77 30%, #ffffbb 70%); } */
    }
    /* LARGE BUTTON FOR ISOLATED USE - display:block */
    /* used in geopdfpicker.html */
    /* 16 px */
    .atag-large-button {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      font-size:16px;
      padding: 0px 16px 0px 16px;
      font-family: Verdana, Arial, sans-serif;
      cursor: pointer;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      /* old: padding: 4px 8px 8px 8px; */
      /* original: padding: 5px; */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* background: rgb(233, 240, 235); */
      text-indent: 0;  /* needed for IE to prevent cutoff text */
      box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .atag-large-button:hover{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
    }
    .tooltip-button {
      cursor: pointer;
    }

/* ----------------------  HEADER LOGO IMAGE STYLE  -------------------------------------------*/
  #header_logo_maxwidth   { max-width:60%; width:auto; height:auto; cursor:pointer }   /* usually used for static (non-animated-background) logo (old) */
  .header_logo_autosizing { max-width:60%; width:auto; height:auto; cursor:pointer }   /* usually used for static (non-animated-background) logo (new) */
  #header_logo_image { max-width:max(60%,600px); width:auto; height:auto; cursor:pointer }       /* usually used for static (non-animated-background) logo (old) */
  @media only screen and (max-width: 480px) { #header_logo_image { max-width:80%; height:auto; } }    /* for screens <480px width */
  /*  ---------  FOR INITIALLY LARGE TITLE ---------  */
  /* due to initial delay, must set div style with matching initial transform, use "forwards" to retain final animated value */
    .titleZoomPanDiv {
              transform: scale(1.25,1.25);         transform-origin: 50% 0%;         animation: titleZoomPan 1s 1 linear 1s;         animation-fill-mode: forwards;
    }
    @keyframes titleZoomPan {
        0% { transform: scale(1.25,1.25); transform-origin: 50% 0%; }
      100% { transform: scale(1.0,1.0); transform-origin: 50% 50%; }
    }
    /*  ---------  FOR INITIALLY LARGE LOGO - 1 LINE ---------  */
    .logoZoomPanDiv { animation: logoZoomPan 1s 1 linear; }
    @keyframes logoZoomPan {
      /* OLD from { transform: scale(1.5,1.5); transform-origin: 50% -150%; } */
      from { transform: scale(1.25,1.25); transform-origin: 50% 0%; }
        to { transform: scale(1.0,1.0);   transform-origin: 50% 50%; }
    }
  /*  ---------  START OF ANIMATED TRANSLATED-BACKGROUND-DIV LOGO - 1 LINE ---------  */
  /*  (using translate3d since traslateX not hardware accelerated)  */
    @keyframes translatedBackground {
        0% { transform: translate3d( 0, 0, 0 ) }
      100% { transform: translate3d( -33.333333%, 0, 0 ) }
    }
    #animated-1line-logo{
      overflow:hidden;
      cursor: pointer;
      /* width: 883px; */
      /* height: 99px; */
      max-width: 883px;
      /* from default.css for header_logo_image */
      width:60%; height:auto;
      /* line-height: 0 ; * alternative for preventing background protruding below */
    }
    #animated-1line-logo-image {
      width: 100%;
      height: 100%;
      display:block /* to prevent background protruding below - ala https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image */
    }
    #animated-1line-logo-background-container {
      position: relative;
    }
    /* FOR PINE RIDGE TRAIL BACKGROUND  */
      #animated-1line-logo-background {
        z-index: -1;
        position: absolute;
        width: 3417px;    /* 3x background image width  */
        height: 239px;    /* background image height */
        right: -1300px;  /* Sykes Camp starts at left edge */
        top: -90px;      /* to show both Sykes Camp icon+text */
        background-image: url("https://bigsurtrailmap.net/lib/images/Trailmap-PineRidgeTrail-healedtiles.1139x239.quality75.jpg");
        background-size: 1139px 239px;
        background-repeat: repeat-x;
        animation-name: translatedBackground;
        animation-duration: 150s;   /* larger=slower */
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
      }
    /* FOR MARBLE PEAK TRAIL BACKGROUND
      #animated-1line-logo-background {
        z-index: -1;
        position: absolute;
        width: 3828px;
        height: 99px;
        right: -1276px;
        background-image: url("https://bigsurtrailmap.net/lib/images/Trailmap-MarblePeakTrail-tiles.1276x99.optimized_quality85.jpg");
        background-size: 1276px 99px;
        background-repeat: repeat-x;
        animation-name: translatedBackground;
        animation-duration: 150s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
      }
    */
    /* for smallscreen, use smaller logo & stop animation */
    @media only screen and (max-width: 480px) {   /* for screens <480px width */
      #animated-1line-logo{
        width: 294px;
        height: 33px;
        max-width:100%;
      }
      #animated-1line-logo-background {
        animation: none;
      }
    }
  /*  ---------  END OF ANIMATED TRANSLATED-BACKGROUND-DIV LOGO - 1 LINE ---------  */

  /*  HASHOVER USAGE NOTES - see HASHOVER-NEXT//hashover-next.info */
  .hashover-main-title { font-weight: bold; }
  .hashover-count-link { text-decoration:none;color:black; }  /* make comment count api appear as non-link */

/* --- PRINTING --- */
@media print { .page, .page-break { break-after: page; } }  /* eg: DIV=PAGE: <div class="page">...</div>  PAGE-BREAK: <div class="page-break"></div> */

/* --- COPYRIGHT --- */
  #copyright-license  { color: #000000; } /* with license.html link */
  #copyright-cc       { color: #000000; } /* creative-commons */
  #copyright-1line    { display:none; }   /* copyright statement added above </body> via sed - aug2024 */
  /* FOR-NON-HIDDEN #copyright-1line    { display:block; font-size:max(83%,12px); padding: 10px 0 20px 0; margin-left:auto; margin-right:auto; text-align:center; } */ /* bottom-most copyright statement added above </body> via sed - aug2024 */

/* --- TESTING -- */
    /* FOR INTERACTIVE MAP SMALL BUTTONS */
    .atag-interactivemap
    {
    /* ala .atag-basic-button-small + */
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size: 12px;
      font-weight: bold;
      padding: 1px 8px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%);  /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
    }
    /* ala .mobile_verticalspacing */
    @media only screen and (max-width: 480px) { .atag-interactivemap { display:block !important; margin-top:5px !important; margin-bottom:5px !important; } }


/* --- PUT 'RED' CLASSES HERE AT END OF FILE - so if bad css line above, should be obvious since my reds will disappear ! --- */
  .black { color: #000000; }
  .red { color: #cc0000; }
  .myred { color: #cc0000; }
  .boldred { color: #cc0000; font-weight: bold; }

/* ****************************************************************************************************** */
/* ***  IF UPDATED, CONSIDER ALSO UPDATING /var/www/html/BLOG/wp-content/themes/isola-jack/style.css  *** */
/* ***  PUT EXAMPLES IN https://bigsurtrailmap.net/HTML/EXAMPLES/example-basic.html                   *** */
/* ****************************************************************************************************** */

/* HTML4->HTML5 => depreciated tags|attributes: <center>,<font>,<tt>,<u>|target=,width= [https://www.tutorialspoint.com/html5/html5_deprecated_tags.htm] */

/* ---  FOR HTML5 - MY GLOBAL DEFAULTS  (over-ride some css defaults)  --- */
table { margin-left:auto; margin-right:auto; text-align:center;  /* for default centered tables - replacing align="center" */
        border-collapse:combine; border-spacing:0; }             /* combine cell borders */
body
{
  background-color: #fefdfc; /* off-white - 7aug2024 */
  border-width: 1px;
}

/* --- VARIABLES (Custom property names) --- */
:root {
  --bg-color-yellow0: rgb(255,255,238);   /* usage: background-color:var(--bg-color-yellow0); */  /* #FFFFEE = rgb(100%,100%,93%) */
  --bg-color-yellow1: rgb(255,255,208);   /* usage: background-color:var(--bg-color-yellow1); */  /* #FFFFD0 = rgb(100%,100%,82%) */
  --bg-color-yellow2: rgb(255,255,153);   /* usage: background-color:var(--bg-color-yellow2); */  /* #FFFF99 = rgb(100%,100%,60%) */
}

/* --- REPLACEMENTS FOR DEPRECIATED TAGS/ATTRIBUTES --- */
  .center           { margin-left:auto; margin-right:auto; text-align:center; }  /* to replace div align="center" */
  .left             { margin-left:auto; margin-right:auto; text-align:left; }  /* to replace div align="left" */
  .right            { margin-left:auto; margin-right:auto; text-align:right; }  /* to replace div align="right" */
  .flex-center      { display:flex; align-items:center; justify-content:center; }
  /* vertical:align - in many cases can see no difference between baseline, texttop, middle */
  .valign-top       { vertical-align:top; }     /* to replace img align="top" */
  .valign-texttop   { vertical-align:text-top; }
  .valign-middle    { vertical-align:middle; }  /* to replace img align="middle" */
  .valign-baseline  { vertical-align:baseline; }
  .valign-bottom    { vertical-align:bottom; }  /* to replace img align="bottom" */
  .tt               { font-family:monospace; }  /* alternative tags: <code> / <kbd> (seems ala <code>) / <var> (italic, larger) / <samp> (slightly smaller) */
  .nowrap           { white-space:nowrap }     /* for no line break between _elements_ (vice _words_) */
  .nobr             { white-space:nowrap }     /* " */
  .unselectable     { user-select:none; }      /* replace ms lement attribute "unselectable='on/off'" (default=on) */

/* --- TAGS CONSIDERED PRESENTATIONAL: /https://wiki.whatwg.org/wiki/Presentational_elements_and_attributes --- */
  .block           { display: block; }
  .inline-block    { display: inline-block; }
  .inline          { display: inline; }
  .flex            { display: flex; }
  .hidden          { display: none; }
  .limitedwidth    { max-width: 750px; margin-left: auto; margin-right: auto; }  /* eg: <DIV class="limitedwidth"> - with bkg, HTML/EXAMPLES/limited_width.html */
  .align-right     { text-align: right; }
  .absolute-right  { position: absolute; right: 0; }  /* position:absolute removes from flow, allows overlap */
  .font-color-red  { color: #cc0000 ; }   /* but usually use .red instead */
  .narrowfont      { font-family: 'Liberation Narrow','Arial Narrow','Archivo Narrow', sans-serif; }   /* but must download font: <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet"> */
  .smallcaps       { font-variant: small-caps ; }
  /* note: html5 <SMALL> reduces font-size but NOT distance between lines with "line-spacing:normal" (essentially same as "font-size:smaller"=0.833) */
  /*        (? because line-height cannot be smaller than parent div/container - see fix according to https://blog.worldanvil.com/worldanvil/tutorials/pro-tips/css-fixing-smalls-line-height-text-mods-month/) */
  /*        (? because of inline 'half-leading' - see fix according to https://stackoverflow.com/questions/27338972/how-can-html-small-tag-affect-the-css-line-height-property) */
  /* but below .small classes also reduce distance between lines - so use for multi-line small text */
  .small3          { font-size: max( 58%,  8px ); }  /* =0.833*0.833*0.833 */
  .small2          { font-size: max( 69%, 10px ); }  /* =0.833*0.833 */
  .small1          { font-size: max( 83%, 12px ); }
  .small           { font-size: max( 83%, 12px ); }
   /* OLD=sansMax .small  { font-size:  83% ; } */ /* note HTML5 <SMALL> reduces font-size but NOT distance between lines with "line-spacing:normal" */ /* essentially same as "font-size:smaller"=0.833 */
   /*OLD .font-size-3     { font-size:  58% ; } */ /* .578=0.833*0.833*0.833 */
   /*OLD .font-size-2     { font-size:  69% ; } */ /* .694=0.833*0.833 */
   /*OLD .font-size-1     { font-size:  83% ; } */ /* ala "font-size:smaller"=0.833 */
  .font-size-3     { font-size: max( 58%,  8px );}   /* .578=0.833*0.833*0.833 */
  .font-size-2     { font-size: max( 69%, 10px ); }  /* .694=0.833*0.833 */
  .font-size-1     { font-size: max( 83%, 12px ); }  /* ala "font-size:smaller"=0.833 */
  .font-bigchar    { font-size: 110% ; }  /* for simple enlargement of character(s) */
  .font-size1      { font-size: 120% ; }
  .font-size2      { font-size: 150% ; }
  .font-size3      { font-size: 200% ; }
  .font-size4      { font-size: 250% ; }
  .font-size5      { font-size: 300% ; }
  .large           { font-size: 120% ; }
  .large1          { font-size: 120% ; }
  .large2          { font-size: 150% ; }
  .large3          { font-size: 200% ; }
  /* old .u               { text-decoration: underline; } */
  /* utility .full-width breaks image out of parent container (currently unused) */
  .full-width {
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      max-width: 100vw;
      position: relative;
      right: 50%;
      width: 100vw;
  }

/* ---  MOBILE DIV ADJUSTMENTS  --- */
  /* --- general styling for small screens --- */
  @media only screen and (max-width: 480px) { /* for iphone4, displays in neither portrait or landscape */
    .smallscreen-linebreak { display:block; }
    .mobile_verticalspacing { display:block !important; margin-top:5px !important; margin-bottom:5px !important; } /* increase vertical space between single-line adjacent buttons */
    .mobile_textexpansion { font-size:120% !important; line-height:120% !important; }                              /* use with above for non-button text links */
    .tooltip-button { font-size: 16px !important; }
    /* unused: .mobile_widthexpansion { width:120% !important; } */
  }
  /* - do not display on large-screen - */
  @media only screen and (min-width: 480px) {    /* for screens >480px width */
    /* only display on small screen - eg: small-screen-only linebreak = <BR class="mobilephonedisplay"> */
    .mobilephonedisplay { display: none; }
    .smallscreen-show   { display: none; }
    .largescreen-hide   { display: none; }
    .largescreen-floatleft  { float: left;  margin-right: 10px; } /* order sensitive - if .center follows, margin-right inoperative */
    .largescreen-floatright { float: right; margin-left:  10px; } /* order sensitive - if .center follows, margin-left inoperative */
  }
  /* - display only on large-screen (negation of above) - */
  @media only screen and (max-width: 480px) {   /* for screens <480px width */
    /* do not display on small screen - eg: large-screen-only linebreak = <BR class="nonmobilephonedisplay"> */
    .nonmobilephonedisplay { display:none; }
    .smallscreen-linebreak { display:inline; }  /* unsure about usage, only used once in html webpage */
    .largescreen-show      { display:none; }
    .smallscreen-hide      { display:none; }
  }
/* ---  WEBSITE ELEMENT ADJUSTMENTS  --- */
  body
  {
    margin-left: 5%; margin-right: 5%;
    font-family:  arial, verdana, helvetica, sans-serif;  /* ala old div, p, td */
    /* 4roboto : font-family:  roboto, arial, verdana, helvetica, sans-serif; */ /* ala old div, p, td */
    /* OLD font-family:  verdana, liberation, arial, helvetica, sans-serif; */  /* but Liberation Sans used in Chrome & FF */
    /* off-white not possible for most webpages since 'Big Sur Trailmap' logo backgrounds are white */
  }
  @media only screen and (max-width: 480px) {
    body { margin-left: 2.5%; margin-right: 2.5%; }
  }
  td { font-family: arial, helvetica, sans-serif }  /* for tables use narrower font than Verdana */
  /* OLD div, p, td { font-family: arial, verdana, helvetica, sans-serif } */
  h2,h3,h4,h5,h6 { margin-left: 3% } /* moves sub-heads to right */
  pre { color: black; font-weight: bold; white-space: pre; font-family: monospace; }
  tt { color: black }
  em { font-style: italic; font-weight: bold }
  strong { font-weight: bold }
  /* old td { font-family: sans-serif; font-size: 0.8rem } */
  td.shaded { background: rgb(255, 255, 153) }   /* must use with TD */
  th.shaded { background: rgb(204, 204, 153) }   /* must use with TH */
  a:hover  {color: #CC0000}
  a:active {color: #CC0000}
  /* old=orangish a:hover  {color: #FF6600} */
  /* old=orangish a:active {color: #FF6600} */
  .navbar { text-align: center }
  /* old: defeat Chrome user-agent-stylesheet desire to add extra space above+below a list */
  /* old: ul,ol { -webkit-margin-before:0px; -webkit-margin-after:0px; } */

/* --- DIV/P ALTERATIONS --- */
  div.box { display:inline-block; border: solid; border-width: thin; padding: 0.2em; }  /* must use with DIV */
  div.yellowbackground { background-color: var(--bg-color-yellow1); padding: 0.5em; border: none; } /* must use with DIV */
  div.jackbackground { background-color: var(--bg-color-yellow0); border: none; margin-left: 0%; margin-right: 0%; text-align: left; } /* must use with DIV */
  p.changed { padding-left: 0.2em; border-left: solid; border-top: none; border-bottom: none; border-right: none; border-left-width: thin; border-color: red; }  /* must use with P */

/* --- TEXT ADJUSTMENTS --- */
  .verdana            { font-family: verdana, sans-serif }
  .italic             { font-style: italic; }
  .bold               { font-weight:bold; }
  .underline          { text-decoration-line: underline; text-decoration-thickness: 1px; }
  .boldunderline      { font-weight:bold; text-decoration-line: underline; text-decoration-thickness: 1px; }
  .boldunderline2     { font-weight:bold; text-decoration-line: underline; text-decoration-thickness: 2px; }
  /* ?? */
  pre.bad { color: rgb(192, 101, 101) }  /* must use with PRE */
  /* simple character enlargement (if larger than 120% get char run-together at end of class) */
  .bigchar { font-size:120% ; padding-right:0.02em; } /* old:  padding-right:0.05em; */
  /* simple character enlarge+bold  */
  .upchar {
      font-size: 120%;  /* old 150% */
      font-weight: bold;
      padding-right:0.1em;
  }
  /* for non-pullquote first character enlargement within <p> tags - but padding-right does not work */
  .upchar.p p:first-letter {
      font-size: 120%;  /* old 150% */
      font-weight: bold;
  }
  /* for enlarged & hilited & altered font text */
  .dropcap { font: bold 1.4em "Times New Roman", serif; color: rgb(51, 0, 102); background: rgb(255, 255, 153); }
  /* OLD=float=>lowersBaseline!? .dropcap { float: left; font: bold 1.4em "Times New Roman", serif; color: rgb(51, 0, 102); background: rgb(255, 255, 153); } */
  blockquote { margin: 0; } /* remove default blockquote margin */
  /* scaled-character - eg use for curly-bracket ala  <div class="scaled-chararacter">}</div> <div>text</div> */
  /*                    per https://stackoverflow.com/questions/47079433/bracket-line-with-css */
  /*                    is for large horiz.paren - alter style on element for other cases */
  /*                    eg: <div> bracketed text<br><div class="scaled-rotated-character" style="top:-40px;left:40px;">}</div></div> */
  /*                    BUT: () VERY thick if large () much white space below after rotation */
  .scaled-rotated-character {
    display: inline-block;
    position: relative;
    font-weight: 100;
    font-size: 96px;
    text-align: left;
    transform: rotate(90deg) scale(0.75);
  }

/* --- LINKS --- */
  /* alink class used for <A> sans HREF - eg onclick="record_outbound('lostvalleytrailopening_click');return false;" */
  .alink { color: blue; text-decoration: underline; cursor: pointer; }
  .alink:hover { color: red; }

/* --- SPACING --- */
  /* vertical half space - use ala <div class="halfline"></div> */
  .halfline { height:7px; }
  /* to backspace ~1/2 character - use with <span> to remove whitespace at end of ssi include */
  .right-halfbackspace { margin-right:-0.6em }

/* --- CENTERING --- */
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* vertical centering - but must be put inside container div with "position: relative" */
  /* seems to work only for one-line div - if have divs to side, they move together */
  .vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

/* ---  BRACKETS  --- */
  /* multiline-brackets - may optionally specify width ala: <DIV class="multiline-brackets" style="width:120px"> */
  /*                   per 'Muhammed Usman' https://stackoverflow.com/questions/41790586/draw-square-brackets-around-multi-line-text/41802427#41802427 */
  /*                   looks unnatural, made more naturat by reducing width - if line broken by small-screen, brackets are at edges with inner whitespace */
  .multiline-brackets {
    display: inline-block;
    background-image: linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444);
    background-repeat: no-repeat;
    background-size: 4px 2px;  /* controls horiz.length & ? */
    /* original: background-size: 8px 3px; */
    background-position: top left, top right, bottom left, bottom right;
    border: 2px solid #444444;
    border-width: 0 2px;
    /* original: border-width: 0 3px; */
    vertical-align: top;
    padding: 1px 4px;  /* control vertial & horiz space around text - note order counter-intuitive ! */
    /* original: padding: 1px 1px; */
  }
  .multiline-brackets-small {  /* note: requires <br> at end of each line - else brackets appear at page width */
    font-size: 83%;
    line-height: 100%;  /* strange - without this line-height too big, ala what would be without font-size change */
    display: inline-block;
    background-image: linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000),
                      linear-gradient(#000000, #000000);
    background-repeat: no-repeat;
    background-size: 4px 1px;  /* controls horiz.length & ? */
    background-position: top left, top right, bottom left, bottom right;
    border: 1px solid #000000;
    border-width: 0 1px;
    vertical-align: top;
    padding: 1px 4px;  /* control vertial & horiz space around text - note order counter-intuitive ! */
  }
  .multiline-brackets-bold {  /* note: requires <br> at end of each line - else brackets appear at page width */
    font-weight: bold;
    display: inline-block;
    background-image: linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444),
                      linear-gradient(#444444, #444444);
    background-repeat: no-repeat;
    background-size: 4px 3px;  /* controls horiz.length & ? */
    background-position: top left, top right, bottom left, bottom right;
    border: 3px solid #444444;
    border-width: 0 3px;
    vertical-align: top;
    padding: 1px 4px;  /* control vertial & horiz space around text - note order counter-intuitive ! */
  }

/* ---  INDENTS  --- */
  /* hanging indent only works for block elements (eg <p>,<div> not <span>) - <P> => adds blank line after <P>s - if extra space appears, replace un-closed <p> with <br><br> */
  .hangingindent {
     padding-left: 15px ;
     text-indent: -15px ;
  }
  /* ala above but removes blank lines after <P>s */
  /* can instead use .hangingindent with <DIV>s */
  .hangingindent-compressed {
     margin: 0; /* to remove extra blank line when using with <P> tag  */
     padding-left: 15px ;
     text-indent: -15px ;
  }
  .hangingindent-4bullet {   /* for smaller indent */
     margin: 0; /* to remove extra blank line when using with <P> tag  */
     padding-left: 5px ;
     text-indent: -5px ;
  }
  .indent {
     padding-left: 15px ;
  }
  .indent-doublesize {
     padding-left: 30px ;
  }
  .symmetricindent {
     padding-left: 30px ;
     padding-right: 30px ;
  }
  .symmetricindent-doublesize {
     padding-left: 60px ;
     padding-right: 60px ;
  }
  .symmetricindent-triplesize {
     padding-left: 80px ;
     padding-right: 80px ;
  }

/* ---  FONTS  --- */
  .miasma1 { unicode-bidi: bidi-override; direction: rtl; }
  .miasma2 { display: none; }
  .verdana { font-family:  verdana, arial, helvetica, sans-serif; }
  .tahoma { font-family:  tahoma,  arial, helvetica, sans-serif; }

/* ---  MY NAMED ELEMENTS  --- */
  .last_map_update { font-size:10px; font-family:monospace; white-space:nowrap }
  /* id=SSS-DIV - make high enough to contain social sharing icons so page does not have to be redrawn after async scripts loaded - may2016: highest icon = 17.6px */
  #sss-div { height:18px ; }
  /* google _outline_ font effect : text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000; */
  /*   (ala Baloo outlined font class, so can have both plain and outline Baloo fonts at same time) */
  .font-effect-outline {
     text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;
     color: #fff;
  }
  /* for lightly shadowed title */
  .title-font
  {
    /* center */
    margin-left: auto; margin-right: auto;
    /*  note: Baloo font needs further line-height+letter-spacing adjustments */
    font-size:300%;
    /* OLD=preeb2023 font-size:250%; */
    /* for shadowed text, use lighter red */
    color:#ee0000;line-height:90%;letter-spacing:1px; font-family:'Baloo',Verdana,Arial,sans-serif; margin: 0 auto;
    /* for outlined text, use lighter red with outline effect: font-size:250%;color:#ee0000;line-height:90%;letter-spacing:1px; font-family:'Baloo',Verdana,Arial,sans-serif; margin: 0 auto; */
    /* original google outlined text : text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000; */
    /* gray outline + shadow : text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 -1px 1px rgba(0,0,0,0.6), 1px 0 1px rgba(0,0,0,0.6), -1px 0 1px rgba(0,0,0,0.6), 2px 2px 1px rgba(0,0,0,0.6); */
    /* gray outline (decided that shadow=3D-effect is too much, instead use simple outline - so only logo has 3D-effect : text-shadow: 0 1px 1px rgba(0,0,0,0.6), 0 -1px 1px rgba(0,0,0,0.6), 1px 0 1px rgba(0,0,0,0.6), -1px 0 1px rgba(0,0,0,0.6); */
    /* lightly shadowed text = blurred dark gray */
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
    /* 2px shadow effect (shadow noticeably offset) =  horizontal-offset vertical-offset blur color(R,G,B,opacity) [https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/] */
    /* OLD=2px text-shadow: 2px 2px 0px rgba(0,0,0,0.7);  */
  }
  .subtitle-font
  {
    /* center */
    margin-left: auto; margin-right: auto;
    /*  ala title-font but smaller */
    font-size:150%;color:#ee0000;line-height:100%;letter-spacing:1px; font-family:Verdana,Arial,sans-serif; margin: 0 auto;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
  }
  .subsubtitle-font
  {
    /* center */
    margin-left: auto; margin-right: auto;
    /*  ala subtitle-font but smaller */
    font-size:100%;color:#ee0000;line-height:90%;letter-spacing:1px; font-family:Verdana,Arial,sans-serif; margin: 0 auto;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
  }
  .baloosubtitle
  {
   font-family:'Baloo',Verdana,Arial,sans-serif;
   font-size:32px;
   line-height:85%;
   color:#cc0000;
  }
  @media only screen and (max-width: 480px) {   /* for screens <480px width */
    .title-font       { font-size:200%; }  /* default 300% is too wide on small screen (earlier used 150% = too small) */
    .subtitle-font    { font-size:100%; }  /* default 150% is too wide on small screen - untested */
    .subsubtitle-font { font-size:75%;  }  /* default 100% is too wide on small screen - untested  */
    .baloosubtitle { font-size:40px; }  /* INCREASE px size for small screen */
  }
  /* block highlight with pale yellow background - use with SPAN (similar to Washington Post - WP original: padding: 3.5px 5px; background-color: rgba(235,224,140,0.6); border-bottom: solid 1px #b2b2b2 */
  /* overflow:hidden keeps from extending into float */
  /* ? display:inline-block required to prevent line division appearing */
  .blockhilite { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; }
  /* ala the above but with lite gray background */
  .blockdehilite { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: rgb(250,250,250); border: solid 1px #b2b2b2; border-radius:4px; }
  /* ala the above but with gray background - in chrome big change in darkness from 250 to 248 !?  */
  .blockdehilite2 { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: rgb(244,244,244); border: solid 1px #b2b2b2; border-radius:4px; }
  /* ala the above but with light pink/rose background */
  .blockredhilite { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: #ffeeee; border: solid 1px #ff3333; border-radius:4px; }
  /* ala the above but with darker pink/rose background */
  .blockredhilite2 { display:inline-block; overflow:hidden; padding: 2px 6px; background-color: #ffdddd; border: solid 1px #ff3333; border-radius:4px; }
  /* old=color=dirtyYellow .blockhilite { padding: 2px 8px; background-color: rgba(235,224,140,0.4); border-bottom: solid 1px #b2b2b2 } */
  /* centered highlight - use with DIV */
  .hilitebox { display:inline-block; margin:auto; padding:10px;background-color:var(--bg-color-yellow1); }
  /* to clear float after enclosing div, eg when floated image larger than associated text - see https://www.w3schools.com/Css/css_float.asp  */
  /*    note: multiple effects (eg clears _both_ floats, uses "table" display) => can give strange results */
  .clear { clear:both; }
  .clear-0px { clear:both;height:0px; }
  /* dashed box */
  .dashedbox { display:inline-block; margin:auto; padding: 2px 6px; border: 1px dashed black; border-radius:4px; }
  /* dotted box */
  .dottedbox { display:inline-block; margin:auto; padding: 2px 6px; border: 1px dotted black; border-radius:4px; }
  /* dotted box */
  .graybox { display:inline-block; margin:auto; padding: 2px 6px; border: 1px dotted gray; border-radius:4px; }
  /* TO DRAW BOX WITH BOLD FONT - eg for 'OR' usage */
  .charbox { font-weight:bold; font-size:75%;position:relative;bottom:2px; display:inline-block; padding: 1px 2px; border: solid 1px #b2b2b2; border-radius:4px; }
  /* TO DRAW BOX WITH BKG HILITE - eg for 'OR' usage */
  .charhilitebox { background-color: rgb(255,255,208); font-size:75%;position:relative;bottom:2px; display:inline-block; padding: 1px 2px; border: solid 1px #b2b2b2; border-radius:4px; }
  /* FOR ALERT BOX eg in news box */
  .fireregs_alertbox { display:inline-block; margin: 4px 0 0 0; padding: 6px 8px 6px 8px; border: 2px solid black;   text-align: center; margin-left:auto; margin-right:auto; }
  .newsbox_alertbox { display:inline-block; margin: 4px 0 0 0;padding: 6px 8px 6px 8px; border: 2px solid black; font-size:13px;  text-align: center; margin-left:auto; margin-right:auto; }  /* with space above border - used for newsbox_fireworks-ssi.php - usually use inside surrouing 'block' for box centering */
  .Alertbox { display:inline-block; padding: 6px 8px 6px 8px; border: 2px solid #cc0000; text-align: center; margin-left:auto; margin-right:auto; }
  /* vertically divided box - top=pale yellow background, bottom=inherited background  (based on .blockhilite */
  .dividedbox-top    { display:block; overflow:hidden; padding: 2px 6px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; border-bottom-left-radius:0;border-bottom-right-radius:0; }
  .dividedbox-bottom { display:block; overflow:hidden; padding: 2px 6px; background-color: inherit;          border: solid 1px #b2b2b2; border-radius:4px; border-top:0;border-top-left-radius:0;border-top-right-radius:0; }
  /*  clear column float */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  /*  for simple pullquote - based on http://htmldog.com/examples/pullquotes2/, more complex example also there */
  .pullquote {
      float: left;
      width: 100px;
      background-color: rgb(255,255,208);
      font-weight: bold;
      padding: 10px;
      margin: 0 13px 0 0;
      text-align: center;
      border: 1px solid black;
      border-radius: 10px;
  }
  /* for pullquote first character enlargement within <p> tags */
  .pullquote p:first-letter {
      font-size: 150%;
      font-weight: bold;
  }
  /* for box around 'OR' or 'or' - eg <SPAN class="orhilite">OR</SPAN> */
  .orhilite { font-size:70%;position:relative;bottom:2px; display:inline-block; font-weight:bold; padding: 1px 3px; border: solid 1px #b2b2b2; border-radius:4px; } /* old=withYellowBkg .orhilite { font-size:70%; display:inline-block; padding: 1px 1px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; } */
  /* for white OR in black box */
  .orreverse { background-color:#666666;color:white; font-size:60%;position:relative;bottom:3px; padding: 0 2px; font-weight:bold; display:inline; border-radius:4px; }

 font-weight:bold; font-size:70%; display:inline-block; padding: 1px 3px; border: solid 1px #b2b2b2; border-radius:4px; } /* old=withYellowBkg .orhilite { font-size:70%; display:inline-block; padding: 1px 1px; background-color: rgb(255,255,208); border: solid 1px #b2b2b2; border-radius:4px; } */
  /* disable transition to remove flickering when mouseover/mouseout changes click region */
  .disable-transition {
    transition: none !important;
  }

  /* EXTEND LINE TO SIDES FROM LEFT/CENTER TEXT */
  /* *NB* MUST SPECIFY CHANGES ala color & background-color & height IN LOCAL _NON-INLINE_ STYLESHEET TO ALTER' */
  .extend-line-right {
    color: #cc0000;      /* set text color */
    margin-top: 4px;     /* set top space */
    margin-bottom: 4px;  /* set bottom space */
    clear: both;
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
  }
  .extend-line-right:after {
    background-color: #cc0000; /* set line color */
    height: 3px;               /* set line thickness */
    margin: 0 20px;            /* set text-to-line space */
    content: '';
    flex: 1;               /* might change this ? */
  }
  .extend-line-center {
    color: #cc0000;      /* set text color */
    margin-top: 4px;     /* set top space */
    margin-bottom: 4px;  /* set bottom space */
    clear: both;
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .extend-line-center:before {
    background-color: #cc0000; /* set line color */
    height: 3px;               /* set line thickness */
    margin: 0 20px;            /* set text-to-line space */
    content: '';
    flex: 1;               /* might change this ? */
  }
  .extend-line-center:after {
    background-color: #cc0000; /* set line color */
    height: 3px;               /* set line thickness */
    margin: 0 20px;
    content: '';
    flex: 1;               /* might change this ? */
  }

/* --- BUTTONS --- */
  /* NO FONT-SIZE */
  /* from http://css3gen.com/button-generator/ ? */
    .nofont-button {
      cursor: pointer;
      /* ORIGINAL padding: 5px; */
      padding: 0px 16px 0px 16px;
      /* padding: 4px 8px 8px 8px; */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: rgb(233, 240, 235);
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    /* SMALL font,padding,radius,shadow */
    /* used in whereisit.html */
    .basic-button-small
    {
      display:inline-block;
      font-size: 10px;
      font-weight: bold;
      padding: 1px 8px;
      color: #0000DD ; /* blue ala tooltip */
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%);  /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
    }
    /* ala index news buttons */
    /* used in newsbox-ssi.html & whereisit.html */
    .basic-button-large
    {
      display:inline-block;
      font-size: 13px;
      font-weight: bold;
      padding: 5px 10px;
      color: #0000DD;   /* blue ala tooltip */
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 9px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%); /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .basic-button-small:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
      .basic-button-large:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
    }
  /* variation of index.html gobutton + nofont-button */
  /* large block single/multi-line label - for inline-block, see .atag-linkbutton  */
  /* use with 'onClock' ala: <button class="center linkbutton" onClick="click_404('?');window.open('https://?');"> */
  /* used in route_metrics.html & trailconditions.html & finding_mtdefiance.html & sea-to-sky_route.html & sea-to-summit_route.html & flagginghikehistory.googlemaps_display_overlay.html */
  /* may want to surround with <DIV style="display:inline-block"> */
  .linkbutton {
    display:block;
    font-size: 14px;
    /* FOR EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: */
    padding: 4px 16px;
    /* FOR NO EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: padding: 4px; */
    /* FOR THIN BUTTONS: padding: 0px 16px; */
    /* old=gives_larger_size~16px font-size: 100%; */
    color: #0000DD;   /* blue ala tooltip */
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
    border: 1px solid #000000;
    border-radius: 6px;
    background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
    /* old background: rgb(233, 240, 235); */
    box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
  }
  .linkbutton:active{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
  @media (hover:hover) {
    .linkbutton:hover{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
    /* OLD=noSizeIncrease .linkbutton:hover { background-image: none; background-color: rgb(255,255,208); color: #cc0000;  background: linear-gradient(0deg, #ffff77 30%, #ffffbb 70%); } */
  }
  /* unused - changes color during held click - must be after hover : button.active { background-color: #ffffcc; } */

/* --- A TAGS "ala BUTTON" --- */
/* --- ORDERED BY FONT-SIZE --- */
    /* UNUSED to */
    /* use <A> tag as button, add this class (so dont need js to click on "button" */
    /*   but for unknown reason on hover background has gradient, yellow at bottom but white at top !? cannot see any reason in chrome debugger */
    /*   also does not work in FF - so is unusable but kept for reference */
    .atag-button{
      appearance: button;
      color: #0000DD;  /* blue ala tooltip */
      text-decoration: none;
    }
  /* NO FONT-SIZE */
    /* ala nofont-button above but for A tag */
    /* used in index.html expandablesbuttonbox-ssi.html */
    .atag-nofont-button {
      /* for A tag */
      display:inline-block;
      color: #0000DD;  /* blue ala tooltip */
      text-decoration: none;
      /* ala nofont-button above */
      cursor: pointer;
      /* ORIGINAL padding: 5px; */
      padding: 0px 16px 0px 16px;
      /* padding: 4px 8px 8px 8px; */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: rgb(233, 240, 235);
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    /* for small index news buttons */
    /* 12px bold */
    .atag-basic-button-small
    {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size: 12px;
      font-weight: bold;
      padding: 1px 8px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%);  /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .atag-basic-button-small:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
    }
    /*  increase size for small screens */
    @media only screen and (max-width: 480px) {   /* for screens <480px width */
      .atag-basic-button-small { font-size:16px; line-height:150%; }
    }
    /*  but less for 320px screens */
    @media only screen and (max-width: 350px) {   /* for screens <480px width */
      .atag-basic-button-small { font-size:14px; line-height:140%; }
    }
    /* HEIGHT ~ LINEHEIGHT - display:block */
    /* small for mobile screen, try to offset buttons so not right above/below each other on adjacent lines */
    /* now increasing text size & vertical spacing for mobile screen */
    /* used in backpack-suggestions.html & wilderness-places-to-visit.html */
    /* 12px */
    .atag-small-button {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size:12px;
      padding: 0px 6px 0px 6px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      cursor: pointer;
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* old background: rgb(233, 240, 235); */
      text-indent: 0  /* needed for IE to prevent cutoff text */
      /* sans-hover: color: #000000 !important; */
      /* unused
        text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
        box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
      */
    }
    /*  increase size for small screens */
    @media only screen and (max-width: 480px) {   /* for screens <480px width */
      .atag-small-button { font-size:16px; line-height:150%; }
    }
    /* HEIGHT ~ LINEHEIGHT - display:block */
    /* 14px (vice 'small'=12px & 'large'=16px) */
    /* used in ROUTES/NOTES webpages */
    .atag-medium-button {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size:14x;
      padding: 0px 6px 0px 6px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      cursor: pointer;
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* old background: rgb(233, 240, 235); */
      text-indent: 0  /* needed for IE to prevent cutoff text */
      /* sans-hover: color: #000000 !important; */
      /* unused
        text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
        box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
      */
    }

    /* for large index news buttons */
    /* not used */
    .atag-basic-button-large
    {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size: 13px;
      font-weight: bold;
      padding: 5px 10px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 9px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%); /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .atag-basic-button-large:hover { transform: scale(1.2, 1.2); transition: all 200ms ease-in-out; background: rgb(255,255,208); }
    }
    /* VARIATION OF INDEX.HTML GOBUTTON + BASICBUTTON */
    /* large inline-block single/multi-line label - for block, see .linkbutton  */
    /* use with A tag ala: <A class="atag-linkbutton" HREF= */
    /* used in GE_overlays.html & trailconditions.html & finding_mtdefiance.html & sea-to-sky_route.html & sea-to-summit_route.html & flagginghikehistory.googlemaps_display_overlay.html */
    .atag-linkbutton {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display: inline-block;
      font-size: 14px;
      /* alt black color: #000000; */
      /* FOR EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: */
      padding: 4px 16px;
      /* FOR NO EXTRA WHITE-SPACE AT FRONT/BACK OF TEXT: padding: 4px; */
      /* FOR THIN BUTTONS: padding: 0px 16px; */
      /* old=gives_larger_size~16px font-size: 100%; */
      cursor: pointer;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* old  background: rgb(233, 240, 235); */
      box-shadow:         2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    .atag-linkbutton:active{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
    @media (hover:hover) {
      .atag-linkbutton:hover{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
      /* OLD=noSizeIncrease .linkbutton:hover { background-image: none; background-color: rgb(255,255,208); color: #cc0000;  background: linear-gradient(0deg, #ffff77 30%, #ffffbb 70%); } */
    }
    /* LARGE BUTTON FOR ISOLATED USE - display:block */
    /* used in geopdfpicker.html */
    /* 16 px */
    .atag-large-button {
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      font-size:16px;
      padding: 0px 16px 0px 16px;
      font-family: Verdana, Arial, sans-serif;
      cursor: pointer;
      text-align: center;
      text-indent: 0;  /* for use inside divs with hanging indent */
      /* old: padding: 4px 8px 8px 8px; */
      /* original: padding: 5px; */
      text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8);
      border: 1px solid #000000;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 30%, rgb(255, 255, 255) 70%);
      /* background: rgb(233, 240, 235); */
      text-indent: 0;  /* needed for IE to prevent cutoff text */
      box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.75);
    }
    @media (hover:hover) {
      .atag-large-button:hover{ color:#cc0000; background: rgb(255,255,208); transform: scale(1.3, 1.3); transition: all 300ms ease-in-out; }
    }
    .tooltip-button {
      cursor: pointer;
    }

/* ----------------------  HEADER LOGO IMAGE STYLE  -------------------------------------------*/
  #header_logo_maxwidth   { max-width:60%; width:auto; height:auto; cursor:pointer }   /* usually used for static (non-animated-background) logo (old) */
  .header_logo_autosizing { max-width:60%; width:auto; height:auto; cursor:pointer }   /* usually used for static (non-animated-background) logo (new) */
  #header_logo_image { max-width:max(60%,600px); width:auto; height:auto; cursor:pointer }       /* usually used for static (non-animated-background) logo (old) */
  @media only screen and (max-width: 480px) { #header_logo_image { max-width:80%; height:auto; } }    /* for screens <480px width */
  /*  ---------  FOR INITIALLY LARGE TITLE ---------  */
  /* due to initial delay, must set div style with matching initial transform, use "forwards" to retain final animated value */
    .titleZoomPanDiv {
              transform: scale(1.25,1.25);         transform-origin: 50% 0%;         animation: titleZoomPan 1s 1 linear 1s;         animation-fill-mode: forwards;
    }
    @keyframes titleZoomPan {
        0% { transform: scale(1.25,1.25); transform-origin: 50% 0%; }
      100% { transform: scale(1.0,1.0); transform-origin: 50% 50%; }
    }
    /*  ---------  FOR INITIALLY LARGE LOGO - 1 LINE ---------  */
    .logoZoomPanDiv { animation: logoZoomPan 1s 1 linear; }
    @keyframes logoZoomPan {
      /* OLD from { transform: scale(1.5,1.5); transform-origin: 50% -150%; } */
      from { transform: scale(1.25,1.25); transform-origin: 50% 0%; }
        to { transform: scale(1.0,1.0);   transform-origin: 50% 50%; }
    }
  /*  ---------  START OF ANIMATED TRANSLATED-BACKGROUND-DIV LOGO - 1 LINE ---------  */
  /*  (using translate3d since traslateX not hardware accelerated)  */
    @keyframes translatedBackground {
        0% { transform: translate3d( 0, 0, 0 ) }
      100% { transform: translate3d( -33.333333%, 0, 0 ) }
    }
    #animated-1line-logo{
      overflow:hidden;
      cursor: pointer;
      /* width: 883px; */
      /* height: 99px; */
      max-width: 883px;
      /* from default.css for header_logo_image */
      width:60%; height:auto;
      /* line-height: 0 ; * alternative for preventing background protruding below */
    }
    #animated-1line-logo-image {
      width: 100%;
      height: 100%;
      display:block /* to prevent background protruding below - ala https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image */
    }
    #animated-1line-logo-background-container {
      position: relative;
    }
    /* FOR PINE RIDGE TRAIL BACKGROUND  */
      #animated-1line-logo-background {
        z-index: -1;
        position: absolute;
        width: 3417px;    /* 3x background image width  */
        height: 239px;    /* background image height */
        right: -1300px;  /* Sykes Camp starts at left edge */
        top: -90px;      /* to show both Sykes Camp icon+text */
        background-image: url("https://bigsurtrailmap.net/lib/images/Trailmap-PineRidgeTrail-healedtiles.1139x239.quality75.jpg");
        background-size: 1139px 239px;
        background-repeat: repeat-x;
        animation-name: translatedBackground;
        animation-duration: 150s;   /* larger=slower */
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
      }
    /* FOR MARBLE PEAK TRAIL BACKGROUND
      #animated-1line-logo-background {
        z-index: -1;
        position: absolute;
        width: 3828px;
        height: 99px;
        right: -1276px;
        background-image: url("https://bigsurtrailmap.net/lib/images/Trailmap-MarblePeakTrail-tiles.1276x99.optimized_quality85.jpg");
        background-size: 1276px 99px;
        background-repeat: repeat-x;
        animation-name: translatedBackground;
        animation-duration: 150s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
      }
    */
    /* for smallscreen, use smaller logo & stop animation */
    @media only screen and (max-width: 480px) {   /* for screens <480px width */
      #animated-1line-logo{
        width: 294px;
        height: 33px;
        max-width:100%;
      }
      #animated-1line-logo-background {
        animation: none;
      }
    }
  /*  ---------  END OF ANIMATED TRANSLATED-BACKGROUND-DIV LOGO - 1 LINE ---------  */

  /*  HASHOVER USAGE NOTES - see HASHOVER-NEXT//hashover-next.info */
  .hashover-main-title { font-weight: bold; }
  .hashover-count-link { text-decoration:none;color:black; }  /* make comment count api appear as non-link */

/* --- PRINTING --- */
@media print { .page, .page-break { break-after: page; } }  /* eg: DIV=PAGE: <div class="page">...</div>  PAGE-BREAK: <div class="page-break"></div> */

/* --- COPYRIGHT --- */
  #copyright-license  { color: #000000; } /* with license.html link */
  #copyright-cc       { color: #000000; } /* creative-commons */
  #copyright-1line    { display:none; }   /* copyright statement added above </body> via sed - aug2024 */
  /* FOR-NON-HIDDEN #copyright-1line    { display:block; font-size:max(83%,12px); padding: 10px 0 20px 0; margin-left:auto; margin-right:auto; text-align:center; } */ /* bottom-most copyright statement added above </body> via sed - aug2024 */

/* --- TESTING -- */
    /* FOR INTERACTIVE MAP SMALL BUTTONS */
    .atag-interactivemap
    {
    /* ala .atag-basic-button-small + */
      /* add for A tag */
      text-decoration: none;
      color: #0000DD;  /* blue ala tooltip */
      /* below ala button style */
      display:inline-block;
      font-size: 12px;
      font-weight: bold;
      padding: 1px 8px;
      font-family: Verdana, Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      border: 1px solid black;
      border-radius: 6px;
      background: linear-gradient(0deg, rgb(233, 240, 235) 20%, rgb(255, 255, 255) 60%);  /* use gradient shifted towards bottom (ie more white space above) than nofont-button gradient) */
      box-shadow:         1px 1px 2px rgba(50, 50, 50, 0.75);
    }
    /* ala .mobile_verticalspacing */
    @media only screen and (max-width: 480px) { .atag-interactivemap { display:block !important; margin-top:5px !important; margin-bottom:5px !important; } }


/* --- PUT 'RED' CLASSES HERE AT END OF FILE - so if bad css line above, should be obvious since my reds will disappear ! --- */
  .black { color: #000000; }
  .red { color: #cc0000; }
  .myred { color: #cc0000; }
  .boldred { color: #cc0000; font-weight: bold; }