*{ margin: 0; padding: 0; } 
a { text-decoration: none;color: #00f;}
body { background-color: #d0f0d0; }
.new { color: #ff0000; }
#header {
  font-family: "Book Antiqua",Georgia,sans-serif;
  text-align: center;
  margin: 1em auto 0 auto;
  width: 50em;
}
#header h1 {
  font-size: 2em;
  margin: 1em 0;
}
#outer {
  width: 60em;
  margin: 1em auto;
}
#mcontent {
  width: 52em;
  margin: 0 auto;
}
#content {
  width: 60em;
  margin: 1em auto;
  font-family: Arial,sans-serif;
  font-size: 0.9em;
  position: relative;
  clear: both;
}
.ppal {
  clear: both;
  float: right;
}
.centered {
 text-align: center;
}
#distance {
 float: left;
 border-top: solid 1px #000;
 border-bottom: solid 1px #000;
 width: 55%;
 margin: 1em auto 1em auto;
 padding: 1em 0;
}
#startbox {
 margin: 1em 0;
 float: left;
 width: 24em;
 position: relative;
 text-align: left;
}
select {
 width: 20em;
}
#startbox input,#endbox input {
  color: #00f;
  font-size: 0.9em;
  border: none;
  background-color: #d0f0d0;
  padding: 0;
}
#startquick {
 clear: both;
 width: 4em;
 float: left;
 font-size: 0.7em;
}
#endbox {
 margin: 1em 0;
 float: right;
 width: 24em;
 position: relative;
 text-align: right;
}
#endquick {
 clear: both;
 width: 4em;
 float: right;
 font-size: 0.7em;
}
.boxlabel {
 float: left;
 font-weight: bold;
}
.mini {
 font-style: italic;
 font-size: 0.8em;
 float: right;
 margin: 0 2em 0 0;
}
#smallads {
 margin: 0 auto;
}
#ad1 {
 float: left;
 margin: 0 2em;
}
#ad2 {
 float: right;
 margin: 0 2em;
}
#footer {
 clear: both;
 text-align: center;
 font-size: 0.8em;
 position: relative;
 top: 2em;
}
.button {
 text-align: center;
 clear:both;
}
.postnote {
 clear: both;
 text-align: center;
 position: relative;
 top: 2em;
 font-size: 0.8em;
}
#footer a {
 margin: 0 2em;
}
.arrows {
 padding: 6em 0 0 0;
}
.arrow {
 margin: 0.2em auto;
 border-style:none;
 background-color:transparent;
 width: 1em;
 color: blue;
 padding: 0.1em 0 0.1em 0;
 font-size: 1.2em;
}
.action {
 clear: both;
 margin: 0.25em auto;
 display: block;
 border: solid 1px black;
 width: 6em;
 color: black;
 background-color: #c0c0c0;
 padding: 0.1em 0;
 text-align: center;
}
a:hover.action, input:hover.action {
 color: white;
 background-color: #60c060;
}
.error {
 color: red;
}
.locate {
 font-family: "Arial Narrow","Helsinki Text",serif;
 font-style: italic;
}
.mini {
 clear: right;
 font: 0.7em arial;
 padding-top: 1em;
}
#tagline {
 margin: 3em auto;
 width: 25em;
}
.dfct {
 color: red;
 text-decoration: line-through;
}
.cp {
 margin: 1em 0 1em 0;
}
.cpi {
 margin: 1em 0 1em 0;
 font-style: italic;
 font-weight: bold;
}
.hm {
 margin: 1em 0 1em 0;
 text-align: center;
 font-style: italic;
}
.hm p {
 font-weight: bold;
}
.hm a {
 float: right;
}
.sidebox {
 margin: 0 auto;
 width: 45em;
 display: block;
}
.leftside {
 float:left;
}
.rightside {
 float:right;
}
.smaller {
font-size: 0.9em;
}
.highlight {
color: red;
}
.instr {
margin-top: 1em;
font-size: 0.9em;
font-style: italic;
}
.dbtn {
width: 70%;
display: block;
min-height: 50px;
margin-left: 5em;
}
.dbtn .action {
float: left;
clear: none;
margin-left: 2em;
}
.bookmile {
    color: white;
    font-size: 0.85em;
    background-color: #35853d;
    padding: 0px 2px;
    font-weight: bold;
    border: 1px solid #808080;
}
.othert {
    margin: 0 auto;
    border: 1px solid #808080;
    width: 250px;
    display: block;
    height: 20px;
    position: relative;
    background-color: #B0D0B0;
}
.othert .plusbtn {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid #404040;
    height: 18px;
    width: 10px;
    background-color: #A0C0A0;
    color: #002000;
}
.othert .listOther {
    position: absolute;
    top: -1px;
    left: 12px;
    width: 237px;
    margin: 0 auto;
    border: 1px solid #404040;
    display: none;
    background-color: #B0D0B0;
    z-index: 5;
    text-align: left;
}
a:hover.plusbtn {
    background-color: #002000;
    color: #A0C0A0;
}
.othert .othertrailbtn {
    position: relative;
    left: 10px;
    color: #002000;
}
a:hover.othertrailbtn {
    color: #009000;
}
/* idBox */
#idbox {
    float: right;
}
#idbox .logboxbtn {
    text-decoration: none;
    padding-left: 10px;
    font-size: 0.8em;
}
.grayall {
 display: none;
 opacity: 0.5;
 background-color: #000;
 position: absolute;
 width: 100%;
 top: 0;
 left: 0;
 height: 100%;
 z-index: 1;
}
#loginpop {
    display: none;
    background-color: #c0ffc0;
    border: 5px solid #080;
    z-index: 2;
    position: fixed;
    inset: 0px;
    width: 600px;
    height: 500px;
    max-width: 100vw;
    max-height: 100dvh;
/*    margin: auto; */
    padding: 0;
    font-family: sans-serif;
}
#loginpop p {
    margin: 5px 40px 10px 10px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 0.9em;
    color: #606060;
}
#loginpop #logboxuid {
    margin: 5px 40px 5px 20px;
}
#loginpop #logboxpd {
    margin: 5px 40px 5px 20px;
}
#loginpop #cbhide {
    margin-left: 20px;
    margin-bottom: 10px;
}
#loginpop #submitbtn {
    margin-left: 100px;
    margin-top: 30px;
    padding: 4px 5px;
    font-weight: bold;
    font-size: 1.0em;
}
#loginpop #cancelbtn {
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 4px 5px;
    font-weight: bold;
    font-size: 1.0em;
}

#loginpop #loginid {
    margin-left: 30px;
    font-size: 0.9em;
}

#loginpop #uiderr {
    color: #ff0000;
}
#loginpop #pwderr {
    color: #ff0000;
}
#loginpop #emaerr {
    color: #ff0000;
}
#msgpopid {
    display: none;
    top: 0;
    position: absolute;
    background-color : #c0f0c0;
    border: 5px solid #080;
    z-index: 2;
    text-align: center;
    padding: 10px;
}
.green {
    color: green;
    font-style: italic;
    font-size: 0.9em;
}
.red {
    color: red;
    font-style: italic;
    font-size: 0.9em;
}
#loginpop .acctmenuitem {
    text-decoration: none;
    color: #080;
    display: block;
    padding: 3px 4px 4px 10px;
    border-bottom: 1px solid black;
}
#loginpop a.acctmenuitem:hover {
    background-color: #80FF80;
    color: #505050;
}
.acctinfo .c1 {
    width: 200px;
}
.acctinfo .c2 {
    width: 180px;
}
.acctinfo .c3 {
    width: 50px;
}
.acctinfo .c4 {
    width: 200px;
}
#createform {
    text-align: left;
}
#createform.createinfo .c1 {
    width: 300px;
}
#createform .createinfo .c2 {
    width: 200px;
}
#createform .createinfo .c3 {
    width: 70px;
}
#loginform {
    text-align: left;
}
#loginform .createinfo .c1 {
    width: 150px;
}
#loginform .createinfo .c2 {
    width: 150px;
}
#loginpop .admin {
    color: red;
}