@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; text-decoration:none; }
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%; margin-left: auto; margin-right: auto;}
a.table        { text-decoration:none; }
th, 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: #20e0a0; } /* 00c070 #20e0a0 old growth park names */
td.sgpark, td.sgparkstar         { background: #d0d0d0; } /* b0b0b0 #d0d0d0 second growth park names */
td.park, td.parkstar             { background: #d0d0d0; } /* d0d0d0 #d0d0d0 non-redwood park names */
td.ogstat, td.ogstars, td.ogname { background: #b0f0d0; } /* 00f0b0 #b0f0d0 old growth */
td.sgstat, td.sgstars, td.sgname { background: #e0f4e8; } /* e0f0e0 #e0f4e8 second growth */
th.stat, td.stat, td.stars, td.name       { background: #fafafa; } /* f8f8f8 #fafafa non-redwood */
th.camp, 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 }
p.tableheader { font: 300 italic 90% 'Gill Sans', sans-serif; margin: 3pt 2% 6pt 2%; text-align: center; color: black }
div.th, div.td { height:100%; width:100%; }
a.th, a.td { text-decoration:none; }

/* 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 */
figcaption, 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.singlecolumn, ul.multicolumn { font: 110%/150% 'EB Garamond', serif; margin: 6pt 7% 6pt 7%; color: black }
ul.multicolumn  { margin: 6pt 2%; padding: 0% 4%; }
li.singlecolumn, li.multicolumn { 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% }
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: 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; }
h2.multicolumn { margin-left:2%; margin-right:2%; }
h2.nomargin { margin-top: 0pt }

/* Subheadings under the main page header */
p.subtitle  { 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 }
p.statsline, ul.statsline { font: 300 normal 90% 'Gill Sans', sans-serif; margin: 3pt 2% 3pt 2%; text-align: center; color: black }
ul.statsline { list-style-type: none; padding: 0; margin:0; text-align:center; }
li.statsline, li.statsline-last { display: inline-block; padding:0 2pt; }
li.statsline::after { content:" >"; }

/* 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; }
h2.alert, h2.alert-multicolumn { font-weight: 600; font-style: normal; margin: 0pt 2.4% 6pt 2.4%; text-align: center; } 
h2.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 { margin:0; }
figure.map, figure.profile, figure.wideprofile, figure.scrollingmap, figure.nonscrollingmap { 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.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; }
#links:focus-within { opacity: 1; }
#vbanner      { width: 12%; float: right; padding: 1%; text-align: center; }
svg.vbanner   { opacity: 0; }
svg.vbanner:hover { opacity: 1; }
svg.vbanner:focus-within { 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-top: 0px; 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; }
circle.profileDot { fill:#0000ff;stroke-width:1;stroke:white;opacity:0.8; }
text.profile-text { font: 400 normal 60% 'Gill Sans', sans-serif; }
text.callout-text { font: 400 italic 60% 'Gill Sans', sans-serif; }
text.slope-labels { font: 400 normal 54% 'Gill Sans', sans-serif; }

/* 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.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 */
div.mobile-profile, div.mobile-profile-nomargin { display: none; }
div.profile { display: inline-block; margin: 18pt auto 0 auto; width: 50%; }
div.center { text-align:center; }

/* 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 */
ul.masthead, ul.menu-subsection { list-style-type: none; padding: 0; margin:0; }
div.masthead1 { display: inline-block; } /* the Redwood Hikes logo, name, and tagline at the left-hand side of the banner */
  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.masthead2 { display: inline-block; vertical-align: middle; width: calc(100% - 25em); margin: 0pt; text-align: center; } /* Masthead title + navigation bar */
div.masthead3 { 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%; } /* Main masthead title */
div.masthead4 { 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%; }
div.masthead5 { font: normal 300  70% 'Gill Sans', sans-serif; color: black; margin: 3pt 0pt 0pt 0pt; text-align: left }

/* Masthead drop-down menus */
ul.navbuttons { list-style-type: none; text-align: center; margin:0; padding:0 }
li.navbuttons { display:block; }
li.dropmenu { position: relative; display: inline-block; text-align: center;      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; line-height: 120%; cursor: pointer;} /* container div for a dropdown menu */
  /* li.dropmenu:focus-within .dropcontent { display:block; } */
  li.dropmenu:hover { background-color: #f0f0f0; }
ul.dropcontent { list-style-type: none; padding: 0; margin: 0; display: none; min-width: 100px; position: absolute; left: 50%; top:120%; transform: translate(-50%, 0); background-color: #ffffff; z-index: 1; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
  ul.dropcontent:hover a:hover { background-color: #f0f0f0; }
  ul.centermenu { }
  ul.leftmenu { }
  ul.rightmenu { }
a.droplink, div.droplink-separator, a.droplink-selected { background: #ffffff; margin: 0pt; font: 200 100% 'Gill Sans', sans-serif; text-decoration: none; color: black; text-align: center; line-height: 120%; display: block; padding: 3pt 3pt; border-top: 1pt solid #e0e0e0;  }
div.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%; text-decoration: none }
  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; }

h3.infobox, h3.infobox-light, p.infobox-alert { font: normal 600 100% 'Gill Sans', sans-serif; letter-spacing: 0.00em; word-spacing: -0.0em; margin: 2pt 2%; color: black; text-align: center; line-height: 120%; text-transform: none; border-bottom: none; } /* main title */
h3.infobox-light { font-weight: 300 }
p.infobox { font: normal 400 100% 'EB Garamond', serif; margin: 3pt 2% 2% 2%; color: black; } /* description */
p.infobox-alert { font-style: italic; margin-top: 3pt; margin-left: 2%; margin-right: 2%; } /* news alerts, formerly h3.infobox */
p.infobox-stats { font: italic 300 90% 'Gill Sans', sans-serif; margin: 0pt 0%; color: black; text-align: center }      /* details */
p.infobox-stars { 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 */
p.bignum {  font: 400 400% 'Gill Sans', sans-serif; margin: 0; color: black; text-align: center; }
div.bignum  { width: 33%; display: inline-block; vertical-align: middle; }
img.infobox { width: 33%; display: inline-block; vertical-align: middle; filter: brightness(110%); margin: 2%; }
header.infobox { width: 61%; margin-bottom: 6pt; display: inline-block; vertical-align: middle; }

/* 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 */
  div.masthead1 { display: none; }
  div.masthead2 { width: 100%; }        

  figure.map, figure.profile, figure.wideprofile, figure.scrollingmap, figure.nonscrollingmap { 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.nonscrollingmap, 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%; }
  figcaption, p.caption { margin-bottom: 15pt }
  p.small { font-size: 90% }
  ul.singlecolumn, ul.multicolumn { margin-left: 0%; margin-right: 4%; padding-left: 24pt }
  li.singlecolumn, li.multicolumn { margin-left: 0%; margin-right: 0%; font-size: 110%; }
  h1 { font-size: 130%; }
  h1.smallcaps { font-size: 180%; }
  p.subtitle { margin-left: 2%; margin-right: 2%; font-size: 90%}
  h2, h2.alert, h2.alert-multicolumn { font-size: 130%; line-height: 120%; margin: 18pt 4% 0pt 4%; }
  h2.alert, h2.alert-multicolumn { margin-top: 0pt }
  h2.nomargin { margin-top: 18pt }
  h2.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; }

  div.masthead2  { font-size: 120%; text-align: center; margin-top: 6pt; margin-bottom: 0pt; }
  div.masthead4  { font-size: 70%; }
  div.masthead5 { font-size: 50%; padding: 0% 0% 0% 2% }
  ul.dropcontent { min-width: 150px; }
  .dropmenu, a.droplink, div.droplink-separator, a.droplink-selected { font-size: 100%; }
  .dropmenu { padding: 4pt 7pt; }
  a.droplink, div.droplink-separator, a.droplink-selected { padding: 4pt 3pt; }

  a.infobox, a.oginfobox, a.cginfobox { width: 88%; margin: 4%; }
  h3.infobox, h3.infobox-light { font-size: 110%; }
  p.infobox-stats { font-size: 90%; }
  p.infobox-stars { font-size: 100%; }
  p.infobox { font-size: 110%; }

  /* make image width halfway between 33% and 150px */
  img.infobox { width: calc(75px + 16.5%); }
  header.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; }
  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.singlecolumn, ul.multicolumn { line-height: 140%; }
  li.singlecolumn, li.multicolumn { line-height: 140%; }
  }

@media all and (max-width: 409px) {
  ul.leftmenu  { position: absolute; left:   0%; transform: translate(-10%, 0); }
  ul.rightmenu { position: absolute; left: 100%; transform: translate(-90%, 0); }
  ul.centermenu { }
  }

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

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