body { font-family: Verdana, Helvetica, Arial, sans-serif; }

h1 { font-size: 1.75em; }

/* tables on the definition pages */
table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
table td { 
  padding-right: 1em; 
  padding: 0.4em 1em; 
  vertical-align: top; 
}
table.info td { 
  background-color: #dcc;
  border: 1px solid #fff;
  font-size: 0.9em;
}
table.info td:nth-child(1) { text-align: right; white-space: nowrap; width: 25%; }
table.reference td:nth-child(1) { text-align: right; white-space: nowrap; }
table.reference td {
  background-color: #e9e6e2;
  border: 1px solid #fff; 
  font-size: 0.9em;
  width: 50%;
}
.info, .reference { text-shadow: none; }

/* figures on the definition pages */
figure { width: 96%; margin: 2em auto; }
figcaption { text-align: center; font-size: 0.9em; font-style: italic; margin-top: 0.4em; }
figure div { text-align: center; text-shadow: none; }
div.center { text-align: center; text-shadow: none; }
p.caption { text-align: center; padding-bottom: 1em; }
/*.diamond { vertical-align: center;  } */
.diamond div { display: inline-block; vertical-align: center; height: 130px; 
  margin-left: 8px; margin-right: 8px;
}

/* home page - spaced out buttons */
ul#pageList li { margin: 2em 1em; }
ul#pageList li { opacity: 0.85; } 
ul#pageList a { border: 2px solid maroon; }
ul#pageList a span { font-weight: normal; }

#cederlink, #tamlink, #mixedlink { font-weight: normal; text-decoration: none; text-align: center; }

div[data-role="footer"] h2 { font-weight: normal; color: #cbb; font-size: 0.75em !important; }

#homepage, #browse, #search, #glossary, #about, .boots {
  /* background-image: url(images/thar.jpg); */
  background-image: url(images/tanboots.svg);
  /* background-position: 50% 50%; */
  background-position: center;
  background-size: cover; 
  min-height: 100%;
  min-width: 100%;
  /* this still does not work, probably due to it being SVG */
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tanboots.svg',sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tanboots.svg', sizingMethod='scale');
}
#homepage div[data-role="content"] {
  background-color: transparent !important;
}

#homepage #pageList li a { border-radius: 4px; }

#browse > div > a.ui-btn, #search > div > a.ui-btn, #about > div > a.ui-btn, 
  #glossary > div > a.ui-btn, #callspage > div > a.ui-btn, #callheader > a.ui-btn
{ 
  margin-left: 0.5em;
}

@media screen and (max-height: 700px) {
  #homepage ul#pageList li  {
    margin-bottom: 0.75em;
    margin-top: 0.75em; 
  }
  div[data-role="footer"], div[data-role="footer"] h2 {
    padding-top: 0.125em ! important; padding-bottom: 0.125em ! important;
  }
}

.ui-header .ui-title {
  margin-left: 15%;
  margin-right: 15%;
}
#about p { text-align: center; margin-top: 0.3em; padding-top: 0; margin-bottom: 0; padding-bottom: 0; font-size: 0.9em; }
#about h2 { text-align: center; font-size: 1.4em; }
#about h3 { text-align: center; padding-bottom: 1.5em; font-size: 1.15em; }
#about p#more, #about p#jqm { padding-top: 1.5em; }
#about { background-color: #fff0e0; }
#about div[data-role="content"] { padding-bottom: 3em; background-color: rgba(255,240,224,0.75); }
#glossary, #glossary div[data-role="content"] { background-color: #fff0e0; }

#callList li img { margin-bottom: 2px; margin-top: -2px; }

#callname { font-weight: bold; color: #2020c0; }

.ui-icon-fav:after { background-image: url(images/redstar.svg); }

#draw_h2 { 
  text-align: center; 
  color: maroon; 
  font-size: 1.4em; 
  margin: 0; 
  padding: 0 0 0.4em 0; 
  width: 100%;
}

#mynavbar3 img { 
  height: 14px; 
  margin-top: 1px;  
  margin-bottom: -1px; 
  padding-left: 4px; 
  padding-right: 4px; 
}

p#legend {
    text-align: center;
    margin: 0;
    vertical-align: middle;
}
p#legend img {
    margin-top: 1px;
    margin-bottom: -1px;
} 
p#legend img:nth-child(2) { padding-left: 3em; }

#definition .ui-mini { padding: 0.25em 0.5em; }
#definition svg { margin: 0 2px; }

div.mono b { font-family: "Lucida Console", "Courier New", Courier, monospace; font-size: 1.1em; }
#glossary li { margin-bottom: 0.5em; }
#about #subtitle { font-size: 1.2em; font-weight: normal; margin-bottom: 0; padding-bottom: 0em; }
#about p img { width: 20px; margin: 8px 0; }
#permalink a { font-weight: normal; text-decoration: none; }
#buttonnav { text-align: center; }
/* #buttonnav a { font-size: 0.875em; margin-right: 0; padding: 2.5em 0.25em 0.5em; font-weight: normal; } */
#buttonnav a { font-size: 0.8em; margin-right: 0; font-weight: normal; }
br.wide { display: none; }

@media screen and (max-height: 700px) {
  br.wide { display: inline !important; }
}

/* -------------- TEXT NAV and FOOTER --------------- */
#textnav { text-align: center; margin: 2em -4.75%; }
#textnav a {
  display: inline-block;
  width: 20%;
  background-color: #a09080; 
  font-size: 0.8em;
  font-weight: normal;
  text-shadow: none; 
  padding: 0.35em;
  margin: 0.3em 1.2%;
  color: #e0dcd8; /* #70381c;*/ /* #fff0e0; */
  border: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: 1px solid #807060;  
  /* box-shadow: 1px 1px 3px #706050;*/
  /* border-radius: 4px; */
}

/* -------------- RESPONSIVE --------------- */
@media screen and (max-width: 800px) {
  .wide { display: none; }
}

@media screen and (max-width: 600px) {
  .wider { display: none; }
}

@media screen and (max-width: 500px) {
  #textnav a { width: 42%; }
}