/*
Modifications by Benjamin Gayle (19 April 2011)
      Updated 20 February 2018 for CSS3 changes
      Updated 28 January 2021 for n1np changes
      Updated 31 July 2022 to change default background color to match forum
*/

/* main style for the big screen */
    body {
      background-color: #efefef; 
      font: 84% Tahoma,Verdana,sans-serif; 
      line-height: 1.6em;      
    }
    
    p {
      margin: 0 0 20px 0;      
    }
    
    p.slogan {
      font-size: 1.4em; 
      padding: 15px 0 15px 40px;      
    }
    
    a {
      color: #467aa7; 
      text-decoration: none;      
    }
    
    a:hover {
      color: #333; 
      text-decoration: none;      
    }
    
    p.slogan,h1,h2,h3,#sidebar li a {
      font-family: Geneva, Tahoma, sans-serif; 
      font-weight:400; 
      text-shadow:1px 1px 4px #bbb;      
    }
    
    h1 {
      font-size: 4em; 
      padding: 30px 0 0 0; 
      margin: 0;      
    }
    
    h2 {
      font-size: 2.4em; 
      margin: 0 0 20px 0;      
    }
    
    h3 {
      font-size: 1.8em;      
    }
    
    img.alignleft {
      display: inline; 
      float: left; 
      margin: 5px 25px 5px 0;      
    }
    
    img.alignright {
      float: right; 
      margin: 5px 0 5px 25px;      
    }
    
    img.aligncenter {
      display: block; 
      margin: 10px auto;      
    }
    
    img {
      display: inline;
      /* float: none; */
      margin-left: 12px;
      margin-right: 12px;
      margin-top: 12px;
      margin-bottom: 12px;
    }
    
    #selected_book img {
      float: left;
      margin-left: 8px;
      margin-right: 12px;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    #author img {
      float: left;
    }
    
    hr {
      margin-left: auto;
      margin-right: auto;
    }
    
    .copyright {
      text-align: center; 
      color: #bbb; 
      font-size: 0.8em;      
    }

    #wrap {
      width: 90%; 
      margin: 20px auto; 
      padding: 0;
    }
    
    #header {
      width: 80%; 
      margin: 0 0 30px 20px; 
      height: 120px; 
      padding-left: 200px; 
      background: transparent url(images/logo.jpg) top left no-repeat;
    }
    
    #fake_tabs {
      width: 80%; 
      margin-left: 20%;
    }
    
    #fake_tabs img {
      display: inline;
      /* float: none; */
      margin-left: 8px;
      margin-right: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    selected_tab img {
    border: 2px solid #000;
    }
    
    #content {
      width: 80%; 
      margin-left: 20%;
    }
    
    #content p {
      text-indent: 2em;
    }
    
    #content p:first-letter {
      font-size: 1.8em; 
      font-weight: bold;
    }

    #sidebar {
      padding: 0; 
      float: left; 
      width: 20%;
    }
    
    #sidebar ul {
      margin: 0 0 20px 0; 
      padding: 0;
    }
    
    #sidebar li {
      list-style: none; 
      padding: 0; 
      margin: 0;
    }    
    #sidebar li a {
      display: block; 
      padding: 10px 20px; 
      text-decoration: none; 
      font-family: Geneva, Tahoma, sans-serif; 
      font-size: 1.4em; 
      font-variant: small-caps;
    }
    
    #sidebar li a.current {
      color: #333;
    }
    #sidebar li a:hover {
      color: #333;
    }

    #donate {
      width: 80%; 
      clear: both; 
      margin-left: 20%;
    }
    #donate p, img {
      display: block;
      text-align: center;
      float: none;
    }

    #footnote {
      width: 80%; 
      clear: both; 
      margin-left: 20%; 
      color: #222; 
      font-size: 0.8em;
    }

    #footer {
      width: 80%; 
      clear: both; 
      margin-left: 20%; 
      color: #333; 
      font-size: 0.8em;
    }
    #footer p {
    margin: 0; 
    padding: 0;
    }

/* expand-collapse navigation*/    
    
    input {
    display: none;
    }
    label {
      display: block;    
      padding: 0;
      margin: 0 0 1px 0;
      cursor: pointer;
      background: #efefef;
      border-radius: 3px;
      color: #000;
      transition: ease .5s;
    }
    label:hover {
      background: #f6f4d0;
    }

    .appreciation {
      background: #efefef;
      padding: 10px;
      border: 0;
      margin: 0 0 1px 0;
      border-radius: 3px;
    }
    input + label + .appreciation {
      display: none;
    }
    input:checked + label + .appreciation {
      display: block;
    }
    
    .code {
      background: #efefef;
      padding: 0px;
      border: 0;
      margin: 0 0 1px 0;
      border-radius: 3px;
    }
    input + label + .code {
      display: none;
    }
    input:checked + label + .code {
      display: block;
    }
       
    .homebrew {
      background: #efefef;
      padding: 0;
      border: 0;
      margin: 0 0 1px 0;
      border-radius: 3px;
    }
    input + label + .homebrew {
      display: none;
    }
    input:checked + label + .homebrew {
      display: block;
    }    
    
    .chronology {
      background: #efefef;
      padding: 0;
      border: 0;
      margin: 0 0 1px 0;
      border-radius: 3px;
    }
    input + label + .chronology {
      display: none;
    }
    input:checked + label + .chronology {
      display: block;
    }   
    

    
/* media query */
@media only screen and (max-device-width: 500px){
    * {float: none;}

    html, body {
      font: 12px/15px sans-serif; 
      background: #fff; 
      padding: 3px; 
      color: #000; 
      margin: 0;
    }
    
    h1, h2 {
      font-weight: bold;
    }
    
    h3, h4, h5, h6 {
      font-weight: normal;
    }
    
    #wrap {
    width: 95%; 
    padding: 0;
    }
    
    #header {
      display: block; 
      width:90%; 
      margin: 0; 
      height: auto; 
      padding-left: 5%; 
      background: transparent;
    } 
    
    #header img {
      display: none;
    }
    
    #sidebar {
      display: block;
      float: none;
    }

    #fake_tabs {
      width: 90%; 
      margin-left: 5%;
    }
    
    #fake_tabs img {
      max-width: 50px;
      display: inline;
      margin-left: 3px;
      margin-right: 3px;
      margin-top:3px;
      margin-bottom: 3px;
    }
    
    #content {
      width: 85%; 
      margin-left: 5%;
    }
    
    #content img {
      max-width: 20%;
    }

    #cover_art {
     display: none; 
    }
    
   #donate {
      width: 85%; 
      clear:both; 
      margin-left:5%;
    }
    
    #donate p, img {
      display: block;
      float: none;
    }
    
    #footnote {
      width: 85%; 
      clear: both; 
      margin-left: 5%; 
      color: #222;
    }
    
    #footer {
      width: 85%; 
      clear: both; 
      margin-left: 5%; 
      color: #333;
    }
    
    #footer p {
      margin: 0; 
      padding: 0;
    }

    .center {
      width: 100% !important; 
      text-align: center;
    }
    
    a:link, a:visited {
      text-decoration: underline; 
      color: #0000CC;
    }
    
    a:hover, a:active {
      text-decoration: underline; 
      color: #660066;
    }
    
}