/* 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,aside,article {
 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:70em;
 padding:0 1em;
 margin:0 auto;
}

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

header,
footer {
 background:#541319;
 color:#FFF;
}

header {
 padding:0.5em 0;
 clear:both;
 overflow:hidden;
 box-shadow:0 0.125em 0.375em rgba(0,0,0,0.5);
}

footer {
 padding:1em 0;
 box-shadow: 
  0px 5px 5px 4px #000;
 box-shadow:0 -0.125em 0.375em rgba(0,0,0,0.5);
}

.backToTop {
 padding-top:0.25em;
}

h1 {
 float:left;
 font:bold 2em/1.5 tahoma,arial,helvetica,sans-serif;
 text-shadow:0 0 0.15em rgba(0,0,0,1);
 text-transform:uppercase;
}

h1 small {
 display:block;
 font:normal 0.55em/1em tahoma,arial,helvetica,sans-serif;
 text-transform:none;
 font-style:italic;
 text-align:right;
}

h1 small::before {
 content:"🌵";
}

h1 a span {
 display:none;
}

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

h1 a:hover {
 text-shadow:0 0 0.15em rgba(255,255,255,0.25);
 transition:all 0.25s ease-out;
}

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

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

h3 span,
h4 span {
 display:none;
}

h3 small,
h4 small {
 display:block;
}

p {
 padding-bottom:1em;
}

ul {
 margin-top:0;
}

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

dd {
 padding-bottom:0.5em;
}

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

#content {
 margin-right:15em;
}
 
.contentBox {
 background:#FFF;
 padding:1em;
 border-radius:0.75em;
 box-shadow:0 0.125em 0.5em rgba(0,0,0,0.125);
 clear:both;
 overflow:hidden;
}

#extras,
#extras .firstSection {
 position:relative;
}

#extras {
 float:left;
 width:15em;
 margin-left:-15em;
}

#extras,
#contentWrapper {
 padding:1em 0;
}

#content {
 padding-right:1em;
}


figcaption {
 padding-bottom:1em;
}

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

picture.miniPlate img,
picture.plate img {
 display:block;
 max-width:100%;
 height:auto;
 border-radius:0.5em;
 margin-bottom:0.75em;
}

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:40%;
}

picture.miniLeadingPlate,
picture.leadingPlate {
 float:left;
 padding: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 {
 font:normal 0.875em/1.5 tahoma,arial,helvetica,sans-serif;
 padding:0.5em;
 border-top:1px solid rgba(0,0,0,0.5);
}

.plantas {
 display:flex;
 flex-wrap:wrap;
 justify-concent:center;
 margin:0 auto 1em;
}

.plantas > article {
 display:flex;
 flex-direction:column;
 width:15em;
 padding:1em 1em 0 1em;
 text-decoration:none;
 color:#000;
 border:1px solid #DDD;
 border-radius:0.5em;
 margin:0.5em 0.5em 0 0;
}

.views {
 display:flex;
 flex-wrap:wrap;
 width:100%;
 padding-bottom:1em;
 margin-top:-0.5em; /* negative .views > article margin-top */
}

.views > article {
 flex:1 0 auto;
 margin:0.5em 0.5em 0 0;
 padding:1em;
 border:1px solid #DDD;
 border-radius:0.5em;
}

.plantas,
.plantas > article,
.views,
.views > article {
 flex:1 0 auto;
}

.views ul {
 padding-bottom:0;
}

.views ul ul {
 padding-top:0.25em;
}

.price {
 padding-bottom:1em;
}

.toc ul ul {
	padding-top:0.25em;
	padding-bottom:0;
}

.toc-title {
 padding-bottom:0.5em;
 display:block;
}

.toc {
 display:block;
}

#mainMenu {
 display:block;
 float:right;
 max-width:20em;
 text-align:right;
}

#mainMenu ul {
 list-style:none;
}

#mainMenu li {
 display:inline;
}

#mainMenu a {
 display:inline-block;
 font-family:arial,helvetica,sans-serif;
 font-size:0.75em;
 line-height:1.5em;
 font-weight:normal;
 width:10em;
 text-align:center;
 text-decoration:none;
 padding:0.5em 0;
 margin:0.25em 0;
 color:#F1F3E7;
 background:#7A252C;
 text-transform:uppercase;
 border-radius:10px;
 box-shadow:
  0 0.125em 0.5em rgba(0,0,0,0.75);
}

#mainMenu a:hover,
#mainMenu a:focus {
 background:#70101E;
}

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

a {
 color:#541319;
 color:#761B2C;
 transition:all 0.25s ease-out;
}

a:visited {
 color:#251714; 
}

main a:hover {
 text-shadow:0 0.125em 0.5em rgba(255,233,114,1);
}

h1 a:hover {
 color:#FFF;
}

.backToTop i::before {
 content: "^";
 color:#FFF;
}

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

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

main ul {
 padding:0 0 1em 1em;
}

.email {
 font:bold 0.95em/1.5 tahoma,arial,helvetica,sans-serif;
}

ul.tags {
 padding:0 0 0.5em 0;
 margin:0;
}
 
.tags li {
 width:8em;
 text-align:center;
 padding-right:0.5em;
 display:inline-block;
 text-decoration:none;
 background:#FFFFD6;
 border:1px solid #996600;
 border-radius:0.5em;
 color:#000;
 padding:0 0.375em;
 margin:0.375em 0.175em;
 margin:0 0.5em 0.5em 0;
 font:normal 90%/155% arial,helvetica,sans-serif;
 box-shadow:
  0 0.125em 0.5em rgba(0,0,0,0.25);
}
 
.tags li a {
 color:#000;
 text-decoration:none;
}
 
.tags a:hover {
 bacgkround:#FFFF94;
}

@media (max-width:52.5em) {
 h1,
 h1 small,
 #mainMenu {
  float:none;
  margin:0 auto;
  text-align:center;
 }
 h1 {
  padding-bottom:0.25em;
 }
 #content {
  margin-right:0;
 }
 #extras {
  float:none;
  clear:both;
  width:auto;
  margin:0;
  padding-top:0;
 }
 #extras .firstSection,
 #extras .secondSection {
  float:none;
  left:0;
  margin:0;
  width:auto;
 }
 #content {
  padding-right:0;
 }
 body {
	 background:#FFF;
 }
 .contentBox {
  box-shadow:none;
  padding:0 0 0 0;
 }
}

.pagination {
 list-style:none;
 text-align:center;
}

.pagination li {
 display:inline;
}

.pagination a,
.pagination span {
 display:inline-block;
 min-width:1em;
 padding:0.25em 0.5em;
 text-align:center;
 text-decoration:none;
 background:#004400:
 color:#FFF;
 -webkit-border-radius:0.5em;
 border-radius:0.5em;
 border:1px solid #CCC;
}

.pagination span {
 background:#7A252C;
 color:#FFF;
}

.pagination span.disabled {
 background:#FFF;
 color:#000;
}

.pagination a:active,
.pagination a:focus,
.pagination a:hover {
 background:#541319;
 color:#FFF;
 text-shadow:none;
}

ul.pagination {
 padding-bottom:0;
}

@media (max-width:40em) {
 .views > article,
 .plantas > article {
	width:100%;
 }
 .views,
 .views > article,
 .plantas,
 .plantas > article {
  display:block;
  max-width:100%;
 }
 .plantas > article,
 .views > article {
  padding-bottom:1em;
 }
}

@media (max-width:32.5em) {
 picture.leadingPlate,
 picture.miniLeadingPlate,
 picture.miniTrailingPlate,
 picture.trailingPlate {
  float:none;
  max-width:100%;
  padding:0;
  margin:0 1em 1em 1em;
 } 
 picture.trailingPlate,
 picture.leadingPlate,
 picture.miniTrailingPlate,
 picture.miniLeadingPlate {
  padding:0;
 }
 #contentWrapper,
 .contentBox,
 .price {
  padding-bottom:0;
 }
 .tags {
  margin:0 auto;
  text-align:center;
 }
 ul.pagination {
  padding-bottom:1em;
 }
}

@media (max-width:22em) {
 .backToTop {
  float:none;
  display:block;
  margin:0 auto;
  text-align:center;
 }
 footer {
  text-align:center;
 }
 .contentBox {
  padding:0;
  border:none;
 }
 body {
  background:#FFF; 
 }
}