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

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

    /* Link styles */
    a:link, a:visited, a:active  { text-decoration: none }
    a.masthead:link, a.masthead:visited, a.masthead:active { color: black; }
    a.sidebar:link, a.sidebar:visited, a.sidebar:active  { color: #ffffff }
    a.stars { font-size: 80%; font-style: normal; color: #8D2A16; position: relative; top: -1pt; }

    /* 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, td.ogparkstar         { background: #00c070; } /* old growth park names */
    td.sgpark, td.sgparkstar         { background: #b0c0b0; } /* second growth park names */
    td.park, td.parkstar             { background: #d0d0d0; } /* non-redwood park names */
    td.ogstat, td.ogstars, td.ogname { background: #00f0b0; } /* old growth */
    td.sgstat, td.sgstars, td.sgname { background: #e0f0e0; } /* second growth */
    td.stat, td.stars, td.name       { background: #f8f8f8; } /* non-redwood */
    td.camp, td.campstars, td.cgname { background: #fafaa0; } /* campgrounds */
    td.cgparkstar, td.cgpark         { background: #e8e840; } /* park name rows for campground tables*/
    td.ogpark, td.sgpark, td.park, td.cgpark { text-align: left; padding: 3pt; font-weight: 300; }
    td.ogparkstar, td.sgparkstar, td.parkstar, td.cgparkstar, td.stars, td.ogstars, td.sgstars, td.campstars { text-align: center; padding: 3pt; color: #8D2A16; font-size: 60%; letter-spacing: 0.1em; }
    td.stat, td.ogstat, td.sgstat, td.camp { text-align: center }
    
    /* Body text */
    p             { font: normal 110%/150% 'EB Garamond', serif; margin: 6pt 12% 6pt 12%; color: black; } /* top right bottom left */
    p.multicolumn { font: normal 110%/150% 'EB Garamond', serif; margin: 6pt 2%; color: black; } 
    p.small { font: 300 80% 'Gill Sans', sans-serif; } /* only used for the copyright notice */
    p.caption, p.caption-nomargin { font: italic 100% 'EB Garamond', serif; text-align: center; color: black; margin: 6pt 2% 18pt 2% } 
    p.caption-nomargin { margin-bottom: 0 }
    p.sidebartitle { font: 600 100% 'Gill Sans', sans-serif; text-align: center; margin: 24pt 0% 9pt 0%; }
    p.sidebarcaption { font: 400 90% 'Gill Sans', sans-serif; text-align: center; text-shadow: 0px 0px 5px #000000; position: relative; bottom: 45px; margin: 0%; }
    p.mapcaption     { font: normal 70% 'Gill Sans', sans-serif; text-align: center; margin: 0pt 0pt 12pt 0pt; }
    p.sidebartitle, p.sidebarcaption, p.mapcaption { color: #c0c0c0; }
    ul { font: 110%/150% 'EB Garamond', serif; margin: 6pt 7% 6pt 7%; color: black }
    ul.multicolumn { margin: 6pt 2%; padding: 0% 4% }
    li { font: 100%/150% 'EB Garamond', serif; margin: 6pt 5% 6pt 5%; color: black }
    li.multicolumn { margin: 6pt 2%; }
    b { font-weight: 600; }

    /* 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% }
    h1.smallcaps { font: 400 220% 'Gill Sans', sans-serif; letter-spacing: 0.00em; word-spacing: -0.0em; margin: 6pt 2% 0% 2%; color: black; text-align: center; text-transform: none; font-variant-caps: small-caps; line-height: 120% }
    big         { font-size: 125%; } /* big tag is deprecated. Use span.big instead.  */
    span.big    { font-size: 125%; } /* font size is % of non-big size */
    span.small  { font-size:  84%; } /* font size is % of non-big size */
    h2          { font: 300 italic 100% 'Gill Sans', sans-serif; letter-spacing: 0.0em; word-spacing: -0.00em; line-height: 125%; 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: 600 normal 120% 'Gill Sans', sans-serif; color: black; margin: 36pt 12% 18pt 12%; text-align: center; padding-bottom: 6pt; border-bottom: 1.5pt solid #8D2A16; }
    h3.multicolumn { margin-left:2%; margin-right:2%; }
    h3.nomargin { margin-top: 0pt }
    /* h4          { font: 600 italic 100% 'Gill Sans', sans-serif; margin: 18pt 12% -6pt 12%; 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: 3pt 2% 3pt 2%; text-align: center }
    h5.multicolumn { text-align: center; font: italic 400 110% 'Gill Sans', sans-serif; margin: 18pt 2% 0pt 2%; color: black }

    /* Trail header for pages that have the park overview and hike description on the same page */
    span.stars { font-size: 80%; font-style: normal; color: #8D2A16; position: relative; top: -1pt; }
    span.trailname { padding-left: 1pt; }
    span.trailinfo { font-size: 90%; font-weight: 200; padding-left: 3pt; }

    /* "Trail closed" alerts */
    div.alert, div.alert-nomargin, div.alert-multicolumn { background-color: #efdfde; margin: 36pt 10% 24pt 10%; padding: 9pt 0%; border-radius: 9pt; }
    div.alert-multicolumn { margin: 0pt 0% 24pt 0%; }
    div.alert-nomargin { margin-top: 0pt; }
    h3.alert, h3.alert-multicolumn { font-weight: 600; font-style: normal; margin: 0pt 2.4% 6pt 2.4%; text-align: center; } 
    h3.alert-multicolumn { margin-left: 4%; margin-right: 4%; margin-bottom: 12pt; }
    /* p.alert, p.alert-multicolumn  { font: normal 200 100%/150% 'Gill Sans', sans-serif; } */
    p.alert { margin-left: 2.4%; margin-right: 2.4%; }
    p.alert-multicolumn { margin: 6pt 4%; }
    div.alert-leftcolumn { width: 47%; float: left; padding: 18px 1% 18px 2%; }
    div.alert-rightcolumn { width: 47%; float: right; padding: 0px 2% 0px 1%; }
    
    /* Page layout */
    figure, figure.map, figure.profile, figure.wideprofile, figure.scrollingmap { width: 100%; margin: 21pt 0% 21pt 0%; border: 0; overflow: auto; text-align: center } /* used on park and region pages only for clickable images */
    figure.map, figure.profile { margin: 0; }
    figure.wideprofile { margin: 18pt 0 0 0 } /* only used by draw.js to draw scrolling profiles below the trail map */
    figure.scrollingmap { margin-bottom: 0pt; }
    img { border: 0 }
    img.photo, img.scvphoto { width: 100%; margin: 21pt 0% 0pt 0%; }
    img.photo { aspect-ratio: 3/2; }
    img.scvphoto { aspect-ratio: 2/3; }
    img.profile { width: 50%; margin: 0; }
    img.photo-nomargin { width: 100%; margin: 12pt 0% 0pt 0%; filter: brightness(110%); } /* Only used by RNP/RedwoodCreek.html */
    img.sphoto, img.chart { width: 100%; margin: 21pt 0% 0pt 0%; border: 0; }  /* a horizontal photo that displays as a cropped, horizontally scrollable photo in the mobile layout */
    img.sphoto { aspect-ratio: 3/2; }
    img.bphoto { width: 100%; display: block; margin: auto } /* Only used by photo.html to display enlarged photos */
    img.map { width: 100% }
    img.vphoto { width: 60%; margin: 21pt 20% 0pt 20%; aspect-ratio: 2/3; } /* vertical photo */
    img.sidebarphoto { width: 100%; margin: 0; }
    img.mapicon { width: 50%; margin: 10pt 0% 9pt 0%; border: 0; }
    img.sidebarphoto:hover, img.mapicon:hover { opacity: 0.5; }
    #bigimg { margin: 0; height: 100vh; background: black; display: flex; align-items: center; } /* only used by Photo.html */
    #links        { width: 12%; float: right; padding: 1% 1%; opacity: 0; } /* top+bottom left+right */
    #links:hover  { opacity: 1; }
    #vbanner      { width: 12%; float: right; padding: 1%; text-align: center; }
    svg.vbanner   { opacity: 0; }
    svg.vbanner:hover { opacity: 1; }
    #center       { width: 72%; float: right; padding: 18pt 0% 2% 0%; margin: 0% 0% 2% 0% } 
    div.leftcolumn, div.leftcolumn-nomargin, div.leftcolumn-nobottommargin { width: 47%; float: left; padding: 35px 2% 30px 0%; }  /* For pages with two columns */
    div.leftcolumn-nomargin   { padding-top: 0px; }  
    div.leftcolumn-nobottommargin   { padding-bottom: 0px; }  
    div.rightcolumn, div.rightcolumn-nomargin, div.rightcolumn-nobottommargin { width: 47%; float: right; padding: 35px 0% 30px 2%; }
    div.rightcolumn-nomargin  { padding-top: 0px; }
    div.rightcolumn-nobottommargin  { padding-top:0px; padding-bottom: 0px; }
    div.endcolumns   { clear: both; }
    #stars        { font: 400 150% "Gill Sans, sans-serif"; letter-spacing: 0.1em; text-align: center; color: #8D2A16; line-height: 100%; }
    div.hscroll   { overflow-x: auto; overflow-y: hidden; display: block; margin: auto; } /* used to contain ", img." class images, e.g. images that scroll horizontally on mobile displays only */
    div.thumbnail { margin: 0; text-align: center; } /* the link photos */
    div.divider   { clear: both }
    div.minileft  { width:48%; float:left; padding-right: 2%; margin-bottom: 24pt } /* half-size photos */
    div.miniright { width:48%; float:right; padding-left: 2%; margin-bottom: 24pt}
    hr { margin-top: 2pt; border: 1px solid #8D2A16; }
    hr.divider { border: 1px solid #8D2A16; margin: 18pt 2% 18pt 2% } /* only used in TopTenHikes.html */

    /* 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; }
    div.logo { display: inline-block; text-align: center; vertical-align: middle; padding: 0px 10px; width: 80px; margin: auto; }

    /* Elevation profiles and scalebars in SVG maps */
    text.left  { text-anchor: start; }
    text.right  { text-anchor: end; }
    text.center  { text-anchor: middle; }
    text.scalebar-title { font: 600 italic 90% 'Gill Sans', sans-serif; }  /* paint-order: stroke; stroke: #dddddd; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; */     
    text.scalebar-subtitle { font: 400 normal 75% 'Gill Sans', sans-serif; }
    text.scalebar-length { font: 600 64% 'Gill Sans', sans-serif; }
    text.scalebar-scale { font: 200 50% 'Gill Sans', sans-serif; } 
    text.profile-title-center { font: 600 normal 80% 'Gill Sans', sans-serif; text-anchor: middle; }   
    text.region-title { font: 600 normal 70% 'Gill Sans', sans-serif; text-anchor: middle; }
    text.region-subtitle { font: 200 italic 55% 'Gill Sans', sans-serif; text-anchor: middle; }
    rect.region-outline { stroke:black; fill:none; stroke-width:1.25px; stroke-dasharray:1.25px; opacity: 1.0; }
    rect.region-title { fill:white; opacity:0.8; }

    /* Tags in SVG maps */   
    text.small-tag, text.tag, text.big-tag { font: 400 70% 'Gill Sans', sans-serif; } /* { font: 400 70% 'Gill Sans', sans-serif; stroke: #c9cec8; stroke-width: 4pt; stroke-linejoin: round; stroke-opacity: 50%; paint-order: stroke fill; } */
    text.small-tag { font-size: 60%; }
    text.big-tag   { font-size: 80%; }
    tspan.stars { font-size: 60%; font-style: normal; fill: #8D2A16; baseline-shift: 1pt; }
    tspan.bold { font-weight: 600; }
    tspan.light { font-weight: 200; }
    tspan.italic { font-weight: 200; font-style: italic; }
    tspan.bolditalic { font-weight: 600; font-style: italic; }
    rect.link { fill: white; opacity: 0.0 } /* SVG tag used to define clickable regions in old-style non-SVG park maps. Set to 0.5 for debugging; 0.0 for normal use. */
    rect.link:hover { opacity: 0.5 } /* Can be deleted when all images have been converted to Javascript tags. Note that Big Basin and Butano "pre fire" sites still use this style. */
    rect.title { fill: white; opacity: 1.0 } /* Can be deleted when all images have been converted to Javascript tags. */
    polygon.tag { fill: white; opacity: 1.0; } /* Can be deleted when all images have been converted to Javascript tags. */
    polygon.tagoverlay, rect.tagoverlay, polygon.ogtag, polygon.sgtag, polygon.cgtag { opacity: 0.0; } /* filter:blur(8px); doesn't work in Safari, so instead, addTag() adds filter="url(#blurmore)" to the SVG element */
    /* polygon.tagunderlay { fill: white; opacity: 0.3; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } // backdrop-filter doesn't work on SVG elements. */
    polygon.ogtag { fill: #e9ffe3;} /* d9ded8, e9efe3 */
    polygon.sgtag { fill: #ffffff; } /* e0eeee */
    polygon.cgtag { fill: #f6ea4f; } /* yellow infobox color is #f8f8c0 */
    polygon.tagoverlay, rect.tagoverlay { fill:white; }
    polygon.tagoverlay:hover, rect.tagoverlay:hover, polygon.ogtag:hover, polygon.sgtag:hover, polygon.cgtag:hover { opacity: 0.5; }

    /* Scalebars */
    image.desktop-profile { }
    div.mobile-profile, div.mobile-profile-nomargin { display: none; }
    div.profile { display: inline-block; margin: 18pt auto 0 auto; width: 50%; }

    /* Masthead */
    #masthead { background: #ffffff; width: auto%; float: none; padding: 1% 3%; margin: 0%; display: block; background-image: url('RNSPhbanner.jpg'); background-size: cover; position: relative; margin: 0%; }  /* position:relative used to be followed by bottom:24px, which raised the masthead */
    img.masthead { display: inline-block; vertical-align: middle; width: 3em; }
    div.mastheadtext   { display: inline-block; vertical-align: middle; width: 9em; margin: 0pt 0pt 0pt 0.5em; }
    div.mastheadtitle  { display: inline-block; vertical-align: middle; width: calc(100% - 25em); margin: 0pt; text-align: center; }
    div.masthead-inner { display: inline-block; vertical-align: middle; margin: 0pt; text-align: center; margin-left: 12pt; }
    h1.masthead                 { font: 400  80% 'Gill Sans', sans-serif; letter-spacing: 0.00em; word-spacing: -0.0em; margin: 0pt; color: black; text-align: left; text-transform: uppercase; line-height: 150% }
    h2.masthead, h2.rhmasthead  { font: 400 130% 'Gill Sans', sans-serif; letter-spacing: 0.00em; word-spacing: -0.0em; margin: 0pt 0pt 3pt 0pt; color: black; text-align: center; text-transform: uppercase; line-height: 150%; }
    h5.masthead          { font: normal 300  70% 'Gill Sans', sans-serif; color: black; margin: 3pt 0pt 0pt 0pt; text-align: left }
    h6.masthead          { font: normal 300  80% 'Gill Sans', sans-serif; color: black; margin: 3pt 0pt 0pt 0pt; text-align: center; display: none; }

    /* Masthead drop-down menus */
    #navbuttons { text-align: center; }
    div.dropmenu { position: relative; display: inline-block; text-align: center; } /* container div for a dropdown menu */
      div.dropmenu:hover .dropcontent { display:block; }
      div.dropmenu:hover .dropbutton { background-color: #f0f0f0; }
    button.dropbutton { background: none; border-left: 1pt solid #c0c0c0; border-right: 1pt solid #c0c0c0; border-top: 0pt; border-bottom: 0pt; padding: 1pt 5pt; margin: 0px -0.5px; font: 200 80% 'Gill Sans', sans-serif; color: black; text-align: center; line-height: 120%; }
    div.dropcontent { display: none; min-width: 100px; position: absolute; left: 50%; transform: translate(-50%, 0); background-color: #ffffff; z-index: 1; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
      div.dropcontent:hover a:hover { background-color: #f0f0f0; }
    div.leftmenu { }
    div.rightmenu { }
    a.droplink, a.droplink-separator, a.droplink-selected { background: #ffffff; margin: 0pt; font: 200 80% 'Gill Sans', sans-serif; color: black; text-align: center; line-height: 120%; display: block; padding: 3pt 3pt; border-top: 1pt solid #e0e0e0; }
    a.droplink-separator { background: #40e0a0; font-weight: 600; }
    a.droplink-selected { font-weight: 600; }

    /* Infoboxes: boxes with rounded corners that summarize individual parks or hikes */
    a.infobox, a.oginfobox, a.cginfobox { width: 92%; display: inline-block; border-radius: 9pt; padding: 2%; margin: 9pt 2%; }
      a.infobox { background-color: #e8f0f0; border-color: #e0e0e0 }
      a.infobox:hover { background-color: #d8e0e0; }
      a.infobox:active { background-color: #c0d0d0; }

      a.oginfobox { background-color: #d0f0e0; }
      a.oginfobox:hover { background-color: #c0e0d0; }
      a.oginfobox:active { background-color: #b0d0c0; }

      a.cginfobox { background-color: #f8f8c0; }
      a.cginfobox:hover { background-color: #f0f0b0; }
      a.cginfobox:active { background-color: #e0e0a0; }

    h1.infobox, h2.infobox, h3.infobox { font: normal 600 100% 'Gill Sans', sans-serif; letter-spacing: 0.00em; word-spacing: -0.0em; margin: 0pt 2%; color: black; text-align: center; line-height: 120%; text-transform: none; border-bottom: none; } /* main title */
    h2.infobox { font-weight: 300 } /* main title */
    h3.infobox { font-style: italic; margin-top: 3pt; margin-left: 2%; margin-right: 2%; } /* news alerts */
    h5.infobox { font: italic 300 90% 'Gill Sans', sans-serif; margin: 0pt 0%; color: black; text-align: center }      /* details */
    h6.infobox { font: 300 90% 'Gill Sans', sans-serif; letter-spacing: 0.1em; word-spacing: 0.00em; margin: 0pt 0%; color: #8D2A16; text-align: center; padding-top: 2pt; }   /* star rating */
    img.infobox { width: 33%; display: inline-block; vertical-align: middle; filter: brightness(110%); margin: 2%; }
    div.bignum  { width: 33%; display: inline-block; vertical-align: middle; }
    h1.bignum { margin: 0; font-size: 400%; }
    div.infobox { width: 61%; margin-bottom: 6pt; display: inline-block; vertical-align: middle; }
    p.infobox { font: normal 400 100% 'EB Garamond', serif; margin: 3pt 2% 2% 2%; color: black; } /* description */

    /* The main divs */
    #center { background: #ffffff; }

    /* Narrow desktop version */
    @media all and (max-width: 1140px) {
      /* Remove the logo on the left side of the masthead */
      img.masthead { display: none; }
      div.mastheadtext { display: none; text-align: left; }
      div.mastheadtitle { width: 100%; }        

      figure { margin-top: 12pt }
      img.photo, img.scvphoto { margin-top: 12pt }
      img.sphoto, img.chart { margin-top: 12pt }
      img.pbhoto { margin-top: 0pt }
      img.vphoto { margin-top: 12pt }
      img.mapicon { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
      #vbanner { display: none; }
      #masthead { width: auto; }
      #center { width: auto; margin: 0; float: none; padding: 18pt 0% 5% 0%; background: white; } /* top right bottom left */     /* margin is grey (outside the element), padding is white (inside the element) */
      #links { text-align: center; width: auto; margin: 0; float: none; padding: 0 0% 5% 0%; background: white; opacity: 1; }
      div.thumbnail { display: inline-block; vertical-align: top; width: 16.5%; margin: 0% 1.5%; }
      p.sidebartitle { color: black; margin-top: 0; }
      p.sidebarcaption { color: white; }
      p.mapcaption { color: black; font-size: 90%; }
      div.leftcolumn, div.leftcolumn-nomargin, div.leftcolumn-nobottommargin { padding-left: 2%; padding-right: 1%;; }  /* For pages with two columns */
      div.rightcolumn, div.rightcolumn-nomargin, div.rightcolumn-nobottommargin { padding-left: 1%; padding-right: 2%; }
      }

    @media all and (max-width: 1140px) and (orientation: landscape) {
      img.bphoto { height: 100vh; width: auto; margin-top: 0pt; position: relative; }
      }

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

    /* Mobile version */
    @media all and (max-width: 765px) and (orientation: portrait) {
      figure, figure.scrollingmap { width: 200%; margin-top: 6pt }
      figure.wideprofile { width: 200%; }
      img.photo, img.scvphoto { margin-top: 6pt; }
      img.sphoto, img.chart { width: 200%; margin-top: 6pt; position: relative; }
      img.bphoto { height: 100vh; width: auto; margin-top: 0pt; position: relative; }
      img.vphoto { width: 100%; margin-left: 0%; margin-right: 0%; margin-top: 6pt; }
      img.profile { width: 100%; }
      p, p.multicolumn, p.alert, p.alert-multicolumn { margin: 10pt 4%; line-height: 140%; font-size: 120%; }
      p.caption, p.caption-nomargin { font-size: 100%; }
      p.caption { margin-bottom: 15pt }
      p.small { font-size: 90% }
      ul { margin-left: 0%; margin-right: 4%; padding-left: 24pt }
      li { margin-left: 0%; margin-right: 0%; font-size: 110%; }
      h1 { font-size: 130%; }
      h1.smallcaps { font-size: 180%; }
      h2 { margin-left: 2%; margin-right: 2%; font-size: 90%}
      h3, h3.alert, h3.alert-multicolumn { font-size: 130%; line-height: 120%; margin: 18pt 4% 0pt 4%; }
      h3.alert, h3.alert-multicolumn { margin-top: 0pt }
      h3.nomargin { margin-top: 18pt }
      h3.multicolumn { margin-left: 4%; margin-right: 4%; }
      h4 { margin-left: 2% }
      h4.nomargin { margin-left: 2% }
      h5.nomargin { font-size: 100%; }
      td { font-size: 90% }
      #center { width: auto; margin: 0%; padding: 18pt 0% 2% 0% }
      #links { width: auto; margin: 0%; padding: 18pt 0% 36pt 0; }

      span.trailinfo { display: block; padding-left: 0; padding-top: 3pt; }

      h1.masthead  { font-size: 70%; }
      h2.masthead  { font-size: 120%; text-align: center; margin-top: 6pt; margin-bottom: 0pt; }
      h2.rhmasthead  { font-size: 100%; padding: 0%; text-align: center; position: relative; bottom: -3px; }
      h5.masthead { font-size: 50%; padding: 0% 0% 0% 2% }
      h6.masthead { display: block; font-size: 90%; padding: 0% 0% 0% 2%; margin-top: 6pt; margin-bottom: 0pt; }
      div.dropcontent { min-width: 150px; }
      button.dropbutton, a.droplink, a.droplink-separator, a.droplink-selected { font-size: 100%; }
      button.dropbutton { padding: 4pt 7pt; }
      a.droplink, a.droplink-separator, a.droplink-selected { padding: 4pt 3pt; }

      a.infobox, a.oginfobox, a.cginfobox { width: 88%; margin: 4%; }
      h1.infobox { font-size: 110%; }
      h2.infobox { font-size: 110%; }
      h5.infobox { font-size: 90%; }
      h6.infobox { font-size: 100%; }
      p.infobox { font-size: 110%; }

      /* make image width a constant 150px so that it doesn't get too small. */
      /* img.infobox { width: 150px; } */
      /* div.infobox { width: calc(94% - 150px); } */

      /* make image width halfway between 33% and 150px */
      img.infobox { width: calc(75px + 16.5%); }
      div.infobox { width: calc(94% - 75px - 16.5%); } 
      
      div.leftcolumn, div.rightcolumn, div.alert-leftcolumn, div.alert-rightcolumn, div.leftcolumn-nomargin, div.rightcolumn-nomargin, div.leftcolumn-nobottommargin, div.rightcolumn-nobottommargin, div.minileft, div.miniright { width:100%; float:none; }  
      div.leftcolumn,  div.leftcolumn-nomargin,  div.leftcolumn-nobottommargin  { padding: 15px 0% 0px 0%; }	
      div.rightcolumn, div.rightcolumn-nomargin, div.rightcolumn-nobottommargin { padding: 15px 0% 15px 0%; }
      div.alert-leftcolumn, div.alert-rightcolumn { padding: 15px 0% 0px 0%; }
      div.leftcolumn-nomargin   { padding-top: 0px; }	
      div.rightcolumn-nomargin  { padding-top: 0px; }
      div.rightcolumn-nobottommargin { padding-bottom: 0px; }
      div.minileft              { padding-right: 0%; margin-bottom: 0pt }
      div.miniright             { padding-left: 0%; margin-bottom: 0pt }
      div.thumbnail { width: 28%; margin: 0% 2% }

      div.alert, div.alert-nomargin, div.alert-multicolumn { margin-left: 4%; margin-right: 4%; }
      div.alert { margin-top: 18pt; margin-bottom: 12pt; }
      image.desktop-profile { display: none; }
      div.mobile-profile { display: inline-block; margin: 18pt 0 0 0; width: 100%; }
      div.mobile-profile-nomargin { display: inline-block; margin: 0; width: 100%; }
      div.profile { width: 100%; }
      }

    @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: 409px) {
      div.leftmenu  { position: absolute; left:   0%; transform: translate(-10%, 0); }
      div.rightmenu { position: absolute; left: 100%; transform: translate(-90%, 0); }
      }

    /* Shrink the masthead to fit narrow displays */
    @media all and (max-width: 380px) and (orientation: portrait) {
      h2.masthead { font-size: 110%; }
      button.dropbutton, a.droplink, a.droplink-separator, a.droplink-selected { font-size: 90%; }
      .dropcontent { min-width: 125px; }
      }

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