body { 
  background-color: #f8ffff;  
  background-image: url('../images/squares2.php');
  background-size: auto auto; 
  background-attachment: fixed;
  background-position: center center;
  font-family: "Work Sans", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
}
#content { width: 90%; max-width: 800px; margin: 0 auto 4em; padding: 2em 0; 
  background-color: rgba(248,255,255,0.875);
}
#proverb { width: 75%; max-width: 600px; margin: 0 auto; text-align: center; 
  line-height: 1.4em;
}
h1, h2 { 
  font-family: "Work Sans", Arial, Helvetica, Verdana, sans-serif;
  color: #204080;
  padding: 0;
}
h1 {
  font-size: 1.5em; font-weight: 600;
  border-bottom: 1px solid #204080; 
  margin: 1.5em 0 0; 
}
h2 {
  font-size: 1.2em; font-weight: 500; 
  margin: 1.25em 0 0; 
}
.center { text-align: center; }
a { color: #603018; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,0); }
p { line-height: 1.5em; }
a:hover { border-bottom: 1px dotted #804020; }
.columns3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; 
  list-style: none; padding: 0; margin-bottom: 1em;}
ul { margin-top: 0.5em; }
li { margin-bottom: 0.3em; }
li.no { list-style: none; }

.column { margin: 0; float: left;  }
.column:nth-of-type(1) { width: 55%; }
.column:nth-of-type(2) { width: 42%; }

/* ----------------- FIGURES --------------- */
/* (mostly home page, re-used on other pages */
/* ----------------------------------------- */
figure { display: inline-block; margin: 1em 2em; }
figure.mybrown img, a.mybrown img, img.mybrown { background-color: #a05028; }
figure.maroon img, a.maroon img, img.maroon { background-color: maroon; }
figure.brown img, a.brown img, img.brown { background-color: brown; }
figure.chocolate img, a.chocolate img, img.chocolate { background-color: chocolate; }
figure figcaption { font-family: "Work Sans", Helvetica, Arial, Verdana, sans-serif; font-size: 0.9em; margin-top: 2px; }
figure a { color: #603018; }
a figure figcaption { color: #603018; }

figure.deepskyblue img, a.deepskyblue img, img.deepskyblue { background-color: deepskyblue; }
figure.myblue img, a.myblue img, img.myblue { background-color: #3060c0; }
figure.steelblue img, a.steelblue img, img.steelblue { background-color: steelblue; }

/* -------------- LINKS --------------- */
div.links figure { margin: 0 1em 0 0; padding: 0; text-align: center; }
div.links figure img { width: 72px; height: 72px; }
div.links a:hover { border-bottom: none; }

/* -------------- TABLES --------------- */
table { border-collapse: collapse; margin-top: 1em; width: 100%; }
table th, table td { padding: 0.25em 1em; border: 1px solid #e0d0c0; vertical-align: top; }
th { background-color: #804020; color: beige; }
table.blue th, table.blue td { border: 1px solid #c0d0e0; background-color: #f8ffff; }
table.blue th { background-color: #204080; color: azure; }

/* -------------- TEXT NAV and FOOTER --------------- */
#textnav { text-align: center; margin: 3em -4.75%; }
#textnav { clear: both; padding-top: 2em; }
#textnav a {
  display: inline-block;
  width: 21%;
  background-color: #e0d0c0; 
  font-size: 0.9em;
  padding: 0.5em;
  margin: 0.3em 1.2%;
  color: #70381c; /* #fff0e0; */
  border: 0;
  box-sizing: border-box;
}
#textnav a:hover { border-bottom: 0; }
#footer { background-color: #804020; color: #c06030; 
  color: #d0c0b0;
  text-align: center;
  font-size: 0.7em; 
  padding: 0.75em;
  width: 100%;
  position: fixed;
  bottom: 0;
}

/* -------------- BANNER --------------- */
#banner { background-color: #804020; 
  font-weight: bold;
  padding: 0.25em;
  margin: 0;
  position: fixed;
  top: 0;
  width: 100%;
  /* box-shadow: 0 2px 2px #ccc; */
}
#bannerinner {
  width: 90%; max-width: 800px; margin: 0 auto; 
}
#banner * { vertical-align: middle; }
#banner a { color: #804020; }
#banner a#home { font-family: Unkempt, sans-serif; font-size: 1.65em; color: #f0e0d0; 
  letter-spacing: 0.1em;
}


/* -------------- MENUS --------------- */
#menu { width: 36px; margin-right: 18px; cursor: pointer; }

#menus { display: none; position: fixed; background-color: #f0e0d0; margin: 0.25em 0 0 -0.5em;
  font-family: "Work Sans", Helvetica, Arial, Verdana, sans-serif;
  font-weight: normal;
  font-size: 1.1em; 
  box-shadow: 2px 2px 5px #aaa;
}
#menus a { padding: 0.25em 1em; border-bottom: 1px solid #b0a090; border-top: 1px solid #fff0e0; display: block; }
#menus a:nth-of-type(1) { border-top: 0 !important; }
#menus a:nth-last-of-type(1) { border-bottom: 0 !important; }
#menus img { width: 42px; height: 42px; margin-right: 0.5em; }
#menus a:hover { background-color: #fffcf8; }

#banner, #menu, #menus, #menus a { z-index: 10 !important; }

/* -------------- MORE --------------- */

input[type=text] { width: 50%; padding: 0.5em 0.5em; margin-right: 1em; }

input[type=submit], input[type=button], select { 
  color: black;
  background-color: #ccc; 
  background: linear-gradient(#fff, #ddd);
  border: 1px solid #888; 
  border-radius: 4px; 
  padding: 0.6em 1.2em; 
  margin: 0.25em 0 0;
}

/* -------------- TABS --------------- */
#tabs { margin: 3em 0 0 0.5em; padding: 0; font-size: 0.9em; }
#tabs p { display: inline-block; margin: 0 0.125em 0; border-radius: 8px 8px 0 0; 
  background-color: #b0c0d0; color: #405090; padding: 0.25em 0.75em; cursor: pointer; 
}

/* -------------- LINKS --------------- */
#links { text-align: center;  border-radius: 3px; margin: 2em 0; }
#links figure { margin: 1em 1em; border: 0 solid green; }
#links img { width: 48px; height: 48px; }
#links a:hover { border-bottom: none; }
#links p { text-align: center; margin-left: 2em; margin-top: -0.8em; 
  width: 4em; padding: 0 0.5em;  margin-bottom: -0.3em; 
}

/* -------------- FORMS --------------- */
#forms { 
  padding: 2em 5%;
  margin: 0 0 1em;
} 
#forms img { 
  width: 30px; height: 30px;
  float: right; 
  margin-left: 1em; 
  border-radius: 4px; 
}
#forms .adv { margin-bottom: 3em; margin-top: -3em; }

/* -------------- HELP --------------- */
#help { display: none; }
#help { margin: 0; padding: 1em 2em; background-color: #e8e0d8; 
  box-shadow: 2px 2px 2px gray; border-radius: 8px; position: absolute;
  width: 70%; max-width: 640px; color: #303060;
}
#helpclose { float: right; }
#helptrigger { cursor: pointer; float: right; }

/* -------------- TOOLTIPS --------------- */
/* http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip */

.tooltip {
    /* position: relative; */
    /* border-bottom: 1px dotted black; */
    /* cursor: pointer; */
}

.tooltip .tooltiptext {
    display: inline-block;
    visibility: hidden;
    width: 120px;
    background-color: #804020;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    left: 50%;
    margin-left: -60px;
    /*
    left: 0em;
    bottom: 1.25em;
    */

    /* Position the tooltip */
    /* position: absolute; */
    position: relative; 
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* -------------- RESPONSIVE --------------- */
/*
*/
@media screen and (max-width: 800px) {
  .columns3 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
  .wide { display: none; }
}

@media screen and (max-width: 600px) {
  figure img { width: 144px; height: 144px; }
  figure.small { margin: 1em 0.85em; }
  figure.small img { width: 64px; height: 64px; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
  .wider { display: none; }
  .column {  width: 100% !important; }
}

@media screen and (max-width: 500px) {
  #content { width: 95%;  } 
  .columns3 { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
  #textnav a { width: 42%; }
  img[src="mixedup.svg"] { width: 128px; float: right; margin: 0 0 1em 1em; }
  input[type=text] { width: 50%; padding: 0.125em 0.25em; }
}

@media screen and (max-width: 450px) {
  body { font-size: 0.9em; }
  figure { margin: 0.5em 1em; }
  figure img { width: 108px; height: 108px; }
  figure.small { margin: 1em 0.45em; }
  figure.small img { width: 48px; height: 48px; }
  h1 { font-size: 1.25em; }
  h2 { font-size: 1.1em; }
  #banner a#home { font-size: 1.35em; }
}

@media screen and (max-height: 400px) {
  #footer { position: relative; }
  #banner { position: relative; }
  #menus { position: absolute; }
}