/* null margins and padding to give good cross-browser baseline */
html,body,div,p,
h1,h2,h3,h4,
ul,ol,li,
dl,dt,dd,
picture,figure,figcaption,
main,section,footer,header,nav {
 margin:0;
 padding:0;
}

*, *:after, *:before {
 box-sizing:border-box;
}

@media (max-width:480px) {
 /* Fix for pre "viewport <meta>" mobile browsers */
 * {
  -webkit-text-size-adjust:none;
  -ms-text-size-adjust:none;
 }
}

hr {
 /*
  HR in my code are for semantic breaks in topic/section, NOT
  style/presenation, so hide them from screen.css users
 */
 display:none;
}

html, 
body {
 width:100%;
 height:100%;
}

body {
 display:flex;
 flex-direction:column;
 font:normal 1em/1.5 tahoma,arial,helvetica,sans-serif;
 background:#F1F3E7;
}

.widthWrapper {
 max-width:62.5em;
 padding:0 1em;
 margin:0 auto;
}

.heightWrapper {
 flex:1 0 auto;
 clear:both;
 overflow:hidden;
}

footer {
 background-color:#50712A;
 background: linear-gradient(25deg,rgba(80, 113, 42, 1) 0%, rgba(56, 74, 36, 1) 100%);
 color:#FFF;
 box-shadow:0 -0.125em 0.5em rgba(0,0,0,0.375);
 padding:1em;
 text-shadow:1px 1px 1px #000;
}

.backToTop {
 padding-top:0.25em;
}

header {
 padding-top:0.25em;
}

h1 {
 float:left;
 font:bold 1.75em/1.5 tahoma,arial,helvetica,sans-serif;
 text-shadow: 1px 1px 1px #FFF;
 text-transform:uppercase;
 padding-top:0.25em;
}

h1 small {
 display:block;
 font:normal 0.8em/1em tahoma,arial,helvetica,sans-serif;
 text-transform:none;
}

h1 a span {
 display:none;
}

h1 a,
h1 a:visited {
 color:#000; 
 text-decoration:none;
}	

h2 {
 font:bold 1.375em/1.25 tahoma,arial,helvetica,sans-serif;
 padding-bottom:0.5em;
}

h3 {
 font:bold 1.15em/1.25 tahoma,arial,helvetica,sans-serif;
 padding-bottom:0.5em;
}	

h4 {
 font:bold 1em/1.25 tahoma,arial,helvetica,sans-serif;
 padding-bottom:0.75em;
}	

p {
 padding-bottom:1em;
}

a,
a:visited {
 color:#000;
}

ul {
 margin-top:0;
}

dl {
 margin-top:0;
}
		 
dt {
 font-weight:bold;
}

dd {
 padding-bottom:0.5em;
}

#contentWrapper {
 float:left;
 width:100%;
}

.contentBox {
 display:flex;
 background:#FDFDFB;
 padding:1em;
 border-radius:1em;
 box-shadow:0 0.125em 0.5em rgba(0,0,0,0.375);
}

#contentWrapper {
 padding:1em 0;
}

figcaption {
 padding-bottom:1em;
}

picture.miniPlate,
picture.plate {
 margin:0 auto;
}

picture.miniPlate img,
picture.plate img {
 display:block;
 max-width:100%;
 height:auto;
 padding-bottom:1em;
}

picture.miniLeadingPlate,
picture.miniTrailingPlate,
picture.leadingPlate,
picture.trailingPlate {
 float:right;
 display:block;
 max-width:50%;
 margin:0 0 1em 1em;
 box-shadow:0 0.075em 0.5em rgba(0,0,0,0.375);
 border-radius:0.5em;
}

picture.miniLeadingPlate,
picture.miniTrailingPlate {
 max-width:35%;
}

picture.miniLeadingPlate,
picture.leadingPlate {
 float:left;
 padding:0 0 1em 0;
 margin:0 1em 1em 0;
}

picture.miniLeadingPlate img,
picture.miniTrailingPlate img,
picture.leadingPlate img,
picture.trailingPlate img {
 display:block;
 max-width:100%;
 height:auto;
 border-radius:0.5em 0.5em 0 0;
}

picture p {
 padding:0.5em;
 font:normal 0.875em/1.5 tahoma,arial,helvetica,sans-serif;
}

.toc {
 display:block;                                                        
}

.toc p {
 padding-bottom:0.5em;
}

ul li {
 margin-left:1.25em;
}

ul {
 padding-bottom:1em;
}

#mainMenu {
 float:right;
 max-width:35em;
 text-align:right;
}

#mainMenu ul {
 list-style:none;
 padding-top:0.5em;
 padding-bottom:0;
}

#mainMenu li {
 display:inline;
 margin:0;
}

#mainMenu a {
 font:normal 0.725em/1.5 tahoma,arial,helvetica,sans-serif;
 display:inline-block;
 width:15em;
 text-align:center;
 text-decoration:none;
 padding:0.5em 0;
 margin:0.25em 0;
 color:#F1F3E7;
 background:#384A24;
 background:#50712A;
 text-transform:uppercase;
 border-radius:10px;
 box-shadow:0 0.125em 0.5em rgba(0,0,0,0.375);
}

#mainMenu a:hover,
#mainMenu a:focus {
 box-shadow:0 0.125em 0.5em rgba(0,0,0,0.25);
}

#mainMenu ul strong a {
 font-weight:normal;
 color:#FFE972;
}

a {
 color:#50712A;
}

a:visited {
 color:#344700; 
}

a:focus,
a:hover {
 color:#50712A;
}

.backToTop i::before {
 content: "^";
}

.backToTop {
 float:right;
 font:bold 175%/150% arial,helvetica,sans-serif;
 text-decoration:none;
}

.backToTop span {
 position:absolute;
 top:-999em;
 left:-999em;  
}

.backToTop i::before {
 color:#FFF;
}

@media (max-width:59.125em) {
 h1,
 #mainMenu {
  float:none;
  margin:0 auto;
  text-align:center;
 }
 #mainMenu ul {
  padding-top:0.75em;
 }
}

@media (max-width:32.5em) {
 picture.leadingPlate,
 picture.miniLeadingPlate,
 picture.miniTrailingPlate,
 picture.trailingPlate {
  float:none;
  max-width:100%;
  padding:0;
  margin:0 0 1em 0;
 }
 .backToTop {
  float:none;
  display:block;
  margin:0 auto;
  text-align:center;
 }
 footer {
  text-align:center;
 }
}

@media (max-width:25em) {
 .contentBox {
  margin:0;
  border:0;
  padding:0;
  box-shadow:none;
 }
 body { 
  background:#FFF;
 }
}