@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin,latin-ext);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);

:root {
  --background: #eee;
  --boxes: white;
  --headings: black;
  --buttons: SeaGreen;
  --form-bg: #eef;
  --sym-font: FontAwesome;
  --mono-font: Courier New,monospace;
  --def-font: Roboto,Arial,Helvetica,sans-serif;
  --narrow-font: "Roboto Condensed","Arial Narrow",sans-serif;
}

BODY { background-color: var(--background);
      color: black; font-family: var(--def-font); }

TABLE.img, TABLE.img_s { border: solid 1px; background-color: var(--background);
            display: inline-block; margin: 0.5em;
            max-width: -webkit-min-content;
            max-width: -moz-min-content;
            max-width: min-content;}
TABLE.img TD, TABLE.img_s TD { text-align: center; }
TABLE.img CAPTION, TABLE.img_s CAPTION { caption-side: bottom;}
TABLE.img_s { font-size: 0.7em;}
TABLE.img_s IMG:hover { cursor: pointer;}
TABLE.img_s I.fa { display: none; }
TABLE.img_s:hover I.fa { display: inline; }
TABLE.img_s FIELDSET I.fa { display: inline; }

H1, H2, H3, HR {clear: left;}

TABLE.changelog { width: 100%; border: 0; font-size: 0.9em;}
TABLE.changelog TH, TABLE.changelog TD { background: transparent; border: 0;}
TABLE.changelog TH { white-space: nowrap; width: 8em; color: var(--headings); }
TABLE.changelog INPUT { width: 90%; }

A { text-decoration: none }
A:link, A:visited { color: Maroon; }
A:link:hover, A:visited:hover { color: var(--buttons); }

P.error,P.message { text-align: center; border: solid 1px; padding: 1em; margin: 1em;
                    font-weight: bold;}
P.error { color: white; background: OrangeRed; }
P.message { background: var(--buttons); color: white;  }
SPAN.notice { font-style: italic; }

P.footer { font-size: 0.8em; text-align: center; }

P.menu,
 P.narrowmenu {
          background: white;
          vertical-align: middle;
          padding: 0.3em 1em 2px 1em;
          color: black;
          border-bottom: 1px solid lightgray;
          margin: 0;
          font-family: var(--narrow-font);
          font-weight: bold;
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          user-select: none;
          }

P.menu A,
 P.narrowmenu A,
 P.menu SPAN { white-space: nowrap; }

@media screen and (max-width: 10in) {
  P.menu { font-size: 1.5em; }
}

P.menu { text-align: center; }
P.narrowmenu { text-align: left; display: inline-block;}
P.menu A:link, P.menu A:visited,
 P.narrowmenu A:link, P.narrowmenu A:visited,
 P.menu SPAN,
 P.searchbox SPAN { padding: 0.5em 0.5em 2px 0.5em;}
P.menu A:hover,
 P.narrowmenu A:hover,
 P.menu SPAN:hover,
 P.menu A.currentmenu,
 P.narrowmenu A.currentmenu { color: black; text-decoration: none; border-bottom: solid red 3px; padding-bottom: 0;}

P.menu SPAN,
 P.searchbox SPAN,
 P.menu A,
 P.narrowmenu A { text-decoration: none;
           color: black;
           cursor: pointer;}
           
DIV.menu {
  display: grid;
  grid-gap: 0.2em;
  grid-template-areas: "menuarea searchbox";
}
@media screen and (max-width: 10in) {
  DIV.menu {
    grid-template-areas: "menuarea" 
                         "searchbox";
  }
}
DIV#menuarea {
  grid-area: menuarea;
}
DIV#searchbox {
  grid-area: searchbox;
}

A.funclink { font-size: 0.8em; text-align: center; }
A.funclink:link, A.funclink:visited { text-decoration: none;
                  padding: 3px; }

A IMG { border: none; }

BODY.map { background: #f0f0f0; padding: 0px; margin: 0px; }

TABLE.findings { background: var(--boxes);
                 margin-top: 1em;
                 border: solid white 5px;
                 font-size: 0.9em;
                 box-shadow: 3px 3px 10px gray;
                 margin-bottom: 1em;
                 border-collapse: collapse;
                 }
TABLE.findings TR {  }                 
TABLE.findings TR.newfinding { background-color: #eef; }
TABLE.findings TR.breaker { border-top: 2px solid gray; }
TABLE.findings TD { vertical-align: top; color: black; padding: 0.25em; border-top: dotted 1px gray;}
TABLE.findings TR.second TD { border-top: 0;}
TABLE.findings TH { padding: 0.2em; vertical-align: top; text-align: left;
                    border-bottom: solid medium gray; }
TABLE.findings A:hover { text-decoration: none; }
EM.rl { color: #e04848; font-size: 0.8em; font-style: normal;}
.ref { font-size: 1em; font-variant: small-caps; font-style: normal; }
.species { font-style: italic;}
EM.species { white-space: nowrap; }

TABLE.legend,
 DIV.legend { font-size: 0.7em; background: #f0f0f0; margin: auto auto; }
DIV.legend SPAN { white-space: nowrap;} 
ABBR, ACRONYM { cursor: help; text-decoration: none; border-bottom: dotted thin;}

INPUT.searchbox { border: 1px solid lightgray; }
P.searchbox {vertical-align: middle; text-align: center;}

TABLE.adulttable { font-size: 0.8em; background: var(--boxes); border-collapse: collapse}
TABLE.adulttable TD {width: 3em; background: var(--boxes); padding: 3px; border: solid 1px #ddd; text-align: center;}
TABLE.adulttable TH {background: #ddd; border: solid 1px var(--boxes); padding: 0.2em;}
TABLE.adulttable TH.family { font-size: 1.25em; }
TABLE.adulttable TD.adult {background: black;}
TABLE.adulttable TD.nonadult {background: #a0a0a0;}
TABLE.adulttable TR.breaker { border-top: 2px solid gray; }

FIELDSET { background: var(--form-bg); border: 0;
           margin-top: 1em;
           box-shadow: 3px 3px 3px 0 gray, 0 0 3px 0 gray;
           display: inline-block;
           padding: 0.35em 0.625em 0.75em;}
FIELDSET FIELDSET { box-shadow: none; display: block;}
LEGEND { padding: 0 0.5em;
         background: var(--form-bg);
         width: 90%; font-weight: bold;
         float: left;
         clear: right;
         border-bottom: solid medium gray;
          }
LEGEND[onclick] {cursor: pointer; white-space: nowrap;}
LEGEND[onclick]:after {content: " \f044";
                       font-weight: normal;
                       font-family: var(--sym-font);}
LABEL { color: black; margin-right: 0.2em; }
LABEL[for] { display: inline-block; text-align: right; min-width: 8em; max-width: 8em;
                           hyphens: auto;
                           white-space: normal;}
INPUT,
 SELECT,
 TEXTAREA { border: thin solid lightgray; padding: 0.1em; background: white; }
SELECT[size],
 TEXTAREA {vertical-align: top;}
DIV.inputblock {  clear: both; padding: 0.2em; white-space: nowrap; }

INPUT[type=submit], 
 BUTTON, 
 A.funclink { padding: 2px; background: var(--buttons); color: white; cursor: pointer;
              border: 0;}
BUTTON:hover, 
 INPUT[type=submit]:hover, 
 A.funclink:hover { text-decoration: none;}
A.funclink:hover { color: white;}
BUTTON[disabled] { background: lightgrey; color: black;}
BUTTON[disabled]:hover { cursor: not-allowed;}
IMG.button { padding: 2px; background: #a16b30; color: white; border: solid 1px;}
IMG[onclick], 
 I[onclick] { cursor: pointer; }
I[onclick] { color: var(--buttons); }

TABLE.loglist,
 TABLE.loglist TD,
 TABLE.loglist TH { border: solid thin black;}

TABLE.loglist { font-size: 0.7em; background: var(--boxes); border-collapse: collapse;}
TABLE.loglist TD { white-space: nowrap; padding: 2px; margin: 2px;}
TABLE.loglist TH { background: lightgray; }

TABLE.reife {font-size: 0.8em; border-spacing: 1px; margin-left: auto; margin-right: auto;}
TABLE.reife TH {width: 1em; text-align: center; font-weight: normal;}
TABLE.reife TD {background: var(--background); padding-left: 2px; padding-right: 2px; }
TABLE.reife TD.reif {background: darkred; color: var(--boxes); }
TABLE.reife TD.reif1 {background-image: linear-gradient(to right, var(--background), darkred, darkred); }
TABLE.reife TD.reif2 {background-image: linear-gradient(to left, var(--background), darkred, darkred); }
TABLE.reife TD.reif3 {background-image: linear-gradient(to right, white, darkred, white); }

/*DIV.map { position: relative; padding: 0px;}*/
DIV#mapdiv { width: 700px; height: 640px;}

SELECT#species OPTGROUP {font-style: normal;}
SELECT#species OPTION {font-style: italic;}

DIV.specselect { background: var(--form-bg); border: solid 1px; overflow: auto; padding: 3px;}
DIV.specselect P { margin: 0.2em 0;}
DIV.specselect P.sel_lev11 { }

DIV.specselect P.sel_lev12 { font-weight: bold;}
DIV.specselect P.sel_lev22 { padding-left: 1em;}

DIV.specselect P.sel_lev13 { font-weight: bold; font-size: 1.2em;}
DIV.specselect P.sel_lev23 { padding-left: 1em; font-weight: bold;}
DIV.specselect P.sel_lev33 { padding-left: 2em;}

UL.bibref { font-size: 0.8em;}
/*UL LI { list-style-type: square; }*/
.gm-style LI { list-style: none; }

DIV#largepicbg { display: none; background: black;
               position: fixed; width: 100%; height: 100%;
               top: 0; left: 0;
               z-index: 1;
               opacity: 0.7;
               filter: alpha(opacity=70);}
DIV#largepic { display: none; 
               background: var(--boxes);
               text-align: center;
               position: absolute;
               z-index: 2;
               box-shadow: 0 0 10px white;
               }
DIV#largepic IMG { border: solid white 10px;}
DIV#largepic P { font-size: 0.8em; margin: 0;}
DIV#largepic IMG.largepicfunc {float: right;}

TABLE.profile,
 DIV.main,
 TABLE.findstats,
 TABLE.speclist,
 TABLE.redlist { background: var(--boxes);
                 margin-top: 1em;
                 border: solid var(--boxes) 5px;
                 box-shadow: 3px 3px 10px gray;
                 margin-bottom: 1em;}
TABLE.speciesinfo,
 TABLE.locinfo,
 TABLE.mtbinfo  {
  background: var(--boxes);
  border: solid var(--boxes) 5px;
  margin-bottom: 1em;
  width: 100%;
}                 
DIV.speciespage {
  background: var(--boxes);
  box-shadow: 3px 3px 10px gray;
  margin-top: 1em;
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "headingarea headingarea"
                       "speciesinfo speciesmap";
}                 
DIV#headingarea {
  grid-area: headingarea;
  padding: 0.5em;
}
DIV#speciesinfo {
  grid-area: speciesinfo;
}
DIV#speciesmap {
  grid-area: speciesmap;
  padding: 0.5em;
}
@media screen and (max-width: 10in) {
  DIV.speciespage {
    grid-template-columns: 1fr;
    grid-template-areas: "headingarea"
                         "speciesinfo" "speciesmap";
  }
}

DIV.locpage {
  background: var(--boxes);
  box-shadow: 3px 3px 10px gray;
  margin-top: 1em;
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "locinfo locmap";
}                 
DIV#locinfo {
  grid-area: locinfo;
}
DIV#locmap {
  grid-area: locmap;
  padding: 0.5em;
}
@media screen and (max-width: 10in) {
  DIV.locpage {
    grid-template-columns: 1fr;
    grid-template-areas: "locinfo" "locmap";
  }
}
                 
DIV.mtbpage {
  background: var(--boxes);
  box-shadow: 3px 3px 10px gray;
  margin-top: 1em;
  margin-bottom: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "mtbinfo mtbmap";
}                 
DIV#mtbinfo {
  grid-area: mtbinfo;
}
DIV#mtbmap {
  grid-area: mtbmap;
  padding: 0.5em;
}
@media screen and (max-width: 10in) {
  DIV.mtbpage {
    grid-template-columns: 1fr;
    grid-template-areas: "mtbinfo" "mtbmap";
  }
}
                 
TABLE.speclist { width: 100%; }                 
DIV.main {
	font-size: 0.9em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  grid-template-areas: "intro pic"
                       "spselect locs"
                       "recentf top"
                       "refs pubs"
                       "changelog changelog";
}
DIV.sectionhead {
  text-align: center;
  font-weight: bold;
  font-size: initial;
}
SECTION#changelog {
  /*grid-columns: 1 / 3;*/
  grid-area: changelog;
}
SECTION#recentfindings {
  grid-area: recentf;
}
SECTION#speciessel {
  grid-area: spselect;
}
SECTION#topfindings {
  grid-area: top;
}
SECTION#picture {
  grid-area: pic;
}
SECTION#intro {
  grid-area: intro;
}
SECTION#locations {
  grid-area: locs;
}
SECTION#references {
  grid-area: refs;
}
SECTION#pubs {
  grid-area: pubs;
}
@media screen and (max-width: 10in) {
  DIV.main {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: "intro" "pic" "spselect" "locs" "recentf" "top" "refs" "pubs" "changelog";
  }
  SECTION#picture IMG {
    width: 300px;
  }
}

TABLE.speciesinfo TD,
 TABLE.locinfo TD,
 TABLE.mtbinfo TD,
 TABLE.profile TD { vertical-align: top;}
TABLE.speciesinfo > TD,
 TABLE.locinfo > TD,
 TABLE.mtbinfo > TD,
 TABLE.profile TD  { vertical-align: top; padding: 0.3em;}
TABLE.findstats TD {text-align: center; padding: 0.5em; }
TABLE.speciesinfo TH.section,
 TABLE.locinfo TH.section,
 TABLE.mtbinfo TH.section,
 TABLE.profile TH.section,
 DIV.sectionhead,
 TABLE.findstats TH,
 TABLE.speclist TH,
 TABLE.redlist TH { padding: 0.1em 0.3em;
                    border-top: medium solid gray;
                    border-bottom: thin dashed lightgray;}
H2.trname {}
P.sppic { text-align: center;}
P.sppic BUTTON { display: none; }
P.sppic:hover BUTTON { display: inline; }
P.sppic IMG { border: solid var(--background) 10px;}
P.synonyms, P.famname { text-indent: -3em; margin-left: 3em;}
TABLE.rl { margin-left: auto; margin-right: auto;}
TABLE.rl TH, TABLE.redlist TH.cat { width: 2.5em; }
TABLE.rl TD, TABLE.redlist TD.cat { text-align: center; }

.picform { display: none;
              position: absolute;
              z-index: 1;
              text-align: left;
              margin-top: inherit;}
DIV.loginform { display: none;
              position: absolute;
              z-index: 1;
              font-size: 0.8em;}
DIV.loginform { right: 4px;}
DIV.loginform FIELDSET { margin: 0;}

TABLE.speclist TD { vertical-align: top; }

TABLE.mtbcross { border-spacing: 0; border-collapse: collapse; margin-left: auto; margin-right: auto;}
TABLE.mtbcross TD { text-align: center; vertical-align: middle; padding: 0; }
TABLE.mtbcross TD#top { vertical-align: bottom; text-align: center; }
TABLE.mtbcross TD#bottom { vertical-align: top; text-align: center; }
TABLE.mtbcross TD#left { vertical-align: middle; text-align: right; }
TABLE.mtbcross TD#right { vertical-align: middle; text-align: left; }
TABLE.mtbcross DIV#mapdiv { width: 700px; height: 700px;}

SPAN.spacer_top,
 SPAN.spacer_bottom { width: 498px; height: 20px;}
SPAN.spacer_left,
 SPAN.spacer_right {  width: 20px; height: 498px;}

TABLE.mtbcross TD#top IMG,
 TABLE.mtbcross TD#bottom IMG,
 TABLE.mtbcross TD#left IMG,
 TABLE.mtbcross TD#right IMG
 SPAN.spacer_top,
 SPAN.spacer_bottom,
  SPAN.spacer_left,
 SPAN.spacer_right { display: inline-block;}
TABLE.mtbcross TD#top IMG,
 SPAN.spacer_top {vertical-align: bottom; }
TABLE.mtbcross TD#bottom IMG,
 SPAN.spacer_bottom {vertical-align: top; }
@media screen and (max-width: 10in) {
  TABLE.mtbcross DIV#mapdiv { width: 500px; height: 500px;}
  TABLE.mtbcross TD#top IMG,
   TABLE.mtbcross TD#bottom IMG { width: 498px; height: 20px; }
  TABLE.mtbcross TD#left IMG,
   TABLE.mtbcross TD#right IMG { height: 498px; width: 20px;}
}
@media screen and (max-width: 7in) {
  TABLE.mtbcross DIV#mapdiv { width: 300px; height: 300px;}
  TABLE.mtbcross TD#top IMG,
   TABLE.mtbcross TD#bottom IMG,
   SPAN.spacer_top,
   SPAN.spacer_bottom { width: 298px; height: 20px; }
  TABLE.mtbcross TD#left IMG,
   TABLE.mtbcross TD#right IMG,
   SPAN.spacer_left,
   SPAN.spacer_right { height: 298px; width: 20px;}
}
DL.calendar DT {font-weight: bold; margin-top: 0.5em;}
SECTION.calendar { display: grid;
  grid-template-columns: repeat(3, 1fr);
                 box-shadow: 3px 3px 10px gray;
                 border: solid thin;}
SECTION.calendar DIV.sectionhead { background-color: var(--background);
                    border-top: medium solid gray;
                    border-bottom: thin dashed lightgray;
                    /*border-left: dashed thin;*/}
SECTION.calendar > DIV { 
	align-self: stretch; 
  background-color: var(--boxes);
  border-left: dashed thin;
}
DIV#calendar { margin-top: 1em; }

DIV.resultspopup { width: 100%; max-width: 100%; position: fixed; z-index: 2;
                   top: 0; left: 0;
                   opacity: 0;
                   -moz-transition-property: opacity;
                   transition-property: opacity;
                   -moz-transition-duration: 0.5s;
                   transition-duration: 0.5s;
                   -moz-transition-timing-function: ease-out;
                   transition-timing-function: ease-out;
                   }

SPAN.logo_rl_U,
 SPAN.logo_rl_G,
 SPAN.logo_rl_D,
 SPAN.logo_rl_V,
 SPAN.logo_rl_R,
 SPAN.logo_rl_N,
 SPAN.logo_rl_0,
 SPAN.logo_rl_1,
 SPAN.logo_rl_2,
 SPAN.logo_rl_3 {
    border-bottom: medium none;
    border-radius: 4px;
    color: white;
    display: inline-block;
    height: 26px;
    width: 26px;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    background-color: #9a0000;
    box-shadow: 2px 2px 4px 0 red inset,
               -2px -2px 4px 0 #200000 inset;
}

SPAN.logo_rl_U,
 SPAN.logo_rl_N {
    background-color: green;
    box-shadow: 2px 2px 4px 0 lightgreen inset,
               -2px -2px 4px 0 #002000 inset;
}

SPAN.logo_rl_U SPAN,
 SPAN.logo_rl_G SPAN,
 SPAN.logo_rl_D SPAN,
 SPAN.logo_rl_V SPAN,
 SPAN.logo_rl_R SPAN,
 SPAN.logo_rl_N SPAN,
 SPAN.logo_rl_0 SPAN,
 SPAN.logo_rl_1 SPAN,
 SPAN.logo_rl_2 SPAN,
 SPAN.logo_rl_3 SPAN { vertical-align: middle; }

DIV.rating {
  font-family: var(--sym-font);
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  color: gray;}
SPAN.rate:before { content: "\f006"; }
SPAN.rate-sel:before { content: "\f005"; color: gold;}
SPAN.unrated:before { content: "\f0e2";}

.multicol { columns: 3;
            column-gap: 2em;}
.multicol LI { white-space: nowrap; }             
             
@media screen and (max-width: 10in) {
  .multicol { columns: 2; }
}

@media screen and (max-width: 7in) {
  .multicol { columns: 1; }
}

.nonpublic { border: dashed thin gray; opacity: 0.5; }
.editable { border: 1px dotted transparent; cursor: pointer;}
.editable:hover { border: 1px dotted #b0b0b0; }
.editable:hover:after { content: " \f040";
                   color: #b0b0b0;
                   font-size: 12pt;
                   font-family: var(--sym-font);
                   font-style: normal;
                   vertical-align: top;}
DIV.editoverlay { position: absolute; }
.diagram { display: inline-block; border: solid thin black; }

UL#synlist BUTTON, UL.bibref BUTTON { display: none; }
UL#synlist LI:hover BUTTON, UL.bibref LI:hover BUTTON { display: inline; }

P.whois,
 P.whoiscomment {white-space: pre; font-family: var(--mono-font); font-size: 0.8em;
                 margin-top: 0.1em; margin-bottom: 0;}
P.whoiscomment {opacity: 0.6;}

DIV.mapsbuttonarea { margin: 10px; } 
.mapsbutton, 
  .mapsbutton-s { font-family: var(--def-font);
                  font-size: 18px;
                  color: rgb(86, 86, 86);
                  background-color: white;
                  border-bottom-right-radius: 2px;
                  border-top-right-radius: 2px;
                  box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
                  cursor: pointer;
                  text-align: center;
                  -moz-user-select: none;
                  -webkit-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                  display: inline-block;
                  position: relative;
                  padding: 11px 23px !important;
                  white-space: nowrap;}
.mapsbutton:hover,
  .mapsbutton-s:hover {background-color: #eaeaea;}
.mapsbutton-s { margin-right: 1em; vertical-align: top;}
.mapsbutton INPUT[type="range"]{ padding: 0; border: 0; width: 80%; }
DIV.mapsbuttonarea .mapsbutton:first-child,
  DIV.mapsbuttonarea .mapsbutton-s:first-child {
                  border-bottom-left-radius: 2px;
                  border-top-left-radius: 2px; }
INPUT:focus,
 TEXTAREA:focus { outline: thin solid; }
:invalid {border-color: red;}

INPUT#dyear,
 INPUT#fdyear { width: 4em; }