@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,600,400italic');

  <style><!--

    /* * { margin: 0px; padding: 0px; } */
    html      { border: 0px; margin: 0px; padding: 0px; }
    body      { border: 0px; margin: 0; padding: 0; background: #606062; font-size: 100% }

    /* Link styles */
    a:link    { text-decoration: none }
    a:visited { text-decoration: none }
    a:active  { text-decoration: none }
    a.sidebar:link    { color: #ffffff }
    a.sidebar:visited { color: #ffffff }
    a.sidebar:active  { color: #ffffff }

    /* Lists of trails */
    table          { background: #ffffff; padding: 0px; font-size: 90% }
    td             { font: 400 90% 'Gill Sans', sans-serif; color: black; background: #ffffff; padding: 2pt }  
    td.superregion { text-align: center; padding-top: 24pt; padding-bottom: 0pt }
    td.region      { text-align: center; padding-top: 18pt; padding-bottom: 6pt }
    td.ogpark      { font-weight: 300; background: #40e0a0; text-align: left; padding: 3pt }
    td.ogparkstar  { background: #40e0a0; text-align: center; padding: 3pt }
    td.park        { background: #e0e0e0; text-align: left; padding: 3pt }
    td.parkstar    { background: #e0e0e0; text-align: center; padding: 3pt }
    td.ogstat      { background: #b0ffd0; text-align: center }
    td.ogname      { background: #b0ffd0 }
    td.stat        { background: #f8f8f8; text-align: center }
    td.camp        { background: #fafaa0; text-align: center }
    td.campstar    { background: #e8e840; text-align: center; padding: 3pt }
    td.camppark    { background: #e8e840; text-align: left; padding: 3pt }
    td.name        { background: #f8f8f8 }
    td.cgname      { background: #fafaa0 }
    td.comment     { background: #ffffff; text-align: center; padding-bottom: 6pt }  /* Only used for the Bay Area section */
    
    /* Body text */
    p { font: normal 110%/150% 'EB Garamond', serif; margin: 6pt 10% 6pt 10%; color: black; } /* top right bottom left */
    p.small { font: 300 80% 'Gill Sans', sans-serif; } /* only used for the copyright notice */
    p.caption { font: italic 100% 'EB Garamond', serif; text-align: center; color: black; margin: 6pt 0% 18pt 0% } 
    p.indent { margin-top: 9pt } /* Only used for park blurbs on regional pages */
    p.sidebarfirsttitle { font: 600 80% 'Gill Sans', sans-serif; text-align: center; color: white; margin: 0pt 0% 8pt 0%; }
    p.sidebartitle { font: 600 80% 'Gill Sans', sans-serif; text-align: center; color: white; margin: 24pt 0% 9pt 0%; }
    p.sidebarcaption { font: normal 70% 'Gill Sans', sans-serif; text-align: center; color: white; text-shadow: 0px 0px 5px #000000; } /* margin defined below */
    ul { font: 110%/150% 'EB Garamond', serif; margin: 6pt 5% 6pt 5%; color: black }
    li { font: 100%/150% 'EB Garamond', serif; margin: 6pt 5% 6pt 5%; color: black }
    b { font-weight: 600; }

    rect { fill: #ffffff; opacity: 0.0 } /* SVG tag used to define cickable regions in park maps. Set to 0.5 for debugging; 0.0 for normal use. */
    rect:hover { opacity: 0.5 }

    /* Headers */
    h1          { font: 400 160% 'Gill Sans', sans-serif; letter-spacing: 0.00em; word-spacing: -0.0em; margin: 6pt 2% 0% 2%; color: black; text-align: center; text-transform: uppercase; line-height: 150% }
    big         { font: 400 125% 'Gill Sans', sans-serif; letter-spacing: 0.00em } /* font size is % of non-big size */
    h2          { font: 300 italic 100% 'Gill Sans', sans-serif; letter-spacing: 0.0em; word-spacing: -0.00em; margin: 3pt 0% 6pt 0%; color: black; text-align: center }
    h2.left     { font: italic 100% 'Gill Sans', sans-serif; letter-spacing: 0.0em; word-spacing: -0.00em; margin-top: 3pt; margin-bottom: 0pt; color: black; text-align: left }
    h3          { font: italic 120%/50% 'Gill Sans', sans-serif; color: black; margin-top: 36pt; }
    h3.notbold  { font-style: italic }
    h3.nomargin { margin-top: 0pt }
    h4          { font: 600 italic 100% 'Gill Sans', sans-serif; margin: 18pt 10% -6pt 10%; color: black }
    h4.nomargin { font-style: italic; margin-top: 12pt }
    h5          { font: italic 300 90% 'Gill Sans', sans-serif; margin-bottom: 0pt; color: black }
    h5.nomargin { font-style: normal; margin-top: 3pt; margin-bottom: 3pt; text-align: center }

    /* Page layout */
    figure { width: 100%; margin: 21pt 0% 21pt 0%; border: 0; overflow: auto } /* used on park and region pages only for clickable images */
    img { border: 0 }
    img.photo { width: 100%; margin: 21pt 0% 0pt 0% }
    img.sphoto { width: 100%; margin: 21pt 0% 0pt 0% }  /* a horizontal photo that displays as a cropped, horizontally scrollable photo in the mobile layout */
    img.vphoto { width: 60%; margin: 21pt 20% 0pt 20% } /* vertical photo */
    img.sidebarphoto { width: 100%; margin: 0 }
    img.sidebarphoto:hover { opacity: 0.5 }
    img.banner { width: 100%; border: 0; background: #ffffff; }
    img.banner:hover { opacity: 0.5 }
    img.mapicon { width: 50%; margin: 10pt 0% 9pt 0%; border: 0; }
    img.mapicon:hover { opacity: 0.5 }
    #pagewrap { width: 100%; float: none; padding: 0px; margin: 1% auto; } /* auto left+right margin centers the div */
    #hbanner, #mbanner { width: 72%; float: none; padding: 0%; margin: 1% 0% 1% 1%; } 
    #links        { width: 12%; float: right; padding: 0% 1%; } /* top+bottom left+right */
    #vbanner      { width: 12%; float: right; padding: 0% 1%; }
    #center       { width: 68%; float: right; padding: 18pt 2% 2% 2%; margin: 0% 0% 2% 0% } 
    #comments     { display: none; width: 68%; float: none; padding: 2%; margin: 2% auto; clear: both; } /* Disqus comments are disabled */
    div.hscroll   { overflow: auto; } /* used to contain "sphoto" class images, e.g. images that scroll horizontally on mobile displays */
    div.thumbnail { margin: 0 } /* the link photos */
    div.divider   { clear: both }

    p.sidebarcaption { position: relative; bottom: 32px; margin: 0%; }

    /* Title block: only used on home page */
    #titleblock { margin: auto; text-align: center }
    #title { display: inline-block; vertical-align: middle; padding: 0px 10px; margin: auto; }
    #logo { display: inline-block; text-align: center; vertical-align: middle; padding: 0px 10px; width: 80px; margin: auto; }
 
    /* The main divs */
    #center, #comments, #footer { background: #ffffff; }
    header, #hbanner, #mbanner  { background: #606062; display: none; }
    #vbanner { text-align: center; }

    /* Styles for inline SVG banners */
    text { font: 400 225% 'Gill Sans', sans-serif; text-anchor: middle; }
    .regular-ad-text { fill: #ffff00; font-variant: small-caps } 
    .small-ad-text   { font-size: 150%; fill: #ccff00; } 

    /* Narrow desktop version */
    @media all and (max-width: 1140px) {
      figure { margin-top: 12pt }
      img.photo { margin-top: 12pt }
      img.sphoto { margin-top: 12pt }
      img.vphoto { margin-top: 12pt }
      #pagewrap { width: 100%; margin: 0% }
      #vbanner, #mbanner { display: none; }
      #hbanner { width: auto; display: block; margin: 2%; }
      #center, #comments, #links { width: auto; margin: 2%; float: none; padding: 18pt 2% 5% 2%; background: white; } /* top right bottom left */     /* margin is outside the element, padding is inside */
      #links { text-align: center; padding-bottom: 0; }
      div.thumbnail { display: inline-block; vertical-align: top; width: 16.5%; margin: 0% 1.5%; }
      p.sidebartitle { color: black; }
      p.sidebarfirsttitle { color: black; }
      }

    @media all and (max-width: 950px) {
      div.thumbnail { width: 21.6%; }
      }

    /* Mobile version */
    @media all and (max-width: 765px) and (orientation: portrait) {
      figure { width: 200%; margin-top: 6pt }
      img.photo { margin-top: 6pt; }
      img.sphoto { width: 200%; margin-top: 6pt; position: relative; }
      img.vphoto { width: 100%; margin-left: 0%; margin-right: 0%; margin-top: 6pt; }
      p { margin: 10pt 2% 10pt 2% }
      p.caption { margin-bottom: 15pt }
      p.small { font-size: 80% }
      ul { margin-left: 0%; margin-right: 0%; padding-left: 24pt }
      li { margin-left: 0%; margin-right: 0%; }
      h1 { font-size: 120%; }
      h2 { margin-left: 2%; margin-right: 2%; font-size: 80%}
      h3 { font-size: 110%; line-height: 120%; margin: 18pt 2% 0pt 2%; }
      h3.nomargin { margin-top: 18pt }
      h4 { margin-left: 2% }
      h4.nomargin { margin-left: 2% }
      h5.nomargin { font-size: 80% }
      td { font-size: 90% }
      #pagewrap { margin: 0% }
      #center, #comments, #links { width: auto; margin: 0% }
      #hbanner { display: none; }
      #mbanner { width: auto; display: block; margin: 0% 0% 3% 0%; }
      div.thumbnail { width: 28%; margin: 0% 2% }
      }

    @media all and (max-width: 500px) {
      div.thumbnail { width: 45%; }
      p { line-height: 140%; }
      ul { line-height: 140%; }
      li { line-height: 140%; }
      }

    @media all and (max-width: 319px) {
      #links { display: none; }
      }

    /* #pagewrap, #center, #middle, #links, #hbanner, #vbanner, #comments { border: solid 1px #ffff00; } */
    }
       
  --></style>