@font-face { font-family:'small'; src: url("../fonts/KerkisSmallCaps.otf");}
@font-face { font-family:'main'; src: url("../fonts/Athena.ttf");}
@font-face { font-family:'italic'; src: url("../fonts/AthenaI.ttf");}
@font-face { font-family:'bold'; src: url("../fonts/AthenaB.ttf");}
@font-face { font-family:'epmh'; src: url("../fonts/AthenaBI.ttf");}

* {padding:0;margin:0}
html {width:55%;min-width:760px;margin-left:20%;line-height:150%;font-size:17px;font-family:main;background:rgba(240, 240, 220, .25);}
h2, h3, h4 {margin-top:20px;margin-bottom:0px;font-family:'bold'}
a {text-decoration:none; color:darkblue}

b {font-family:'bold'}
i {font-family:'italic'}
emph {font-family:'emph'}

#home {fill:darkblue;stroke:darkblue;margin-bottom:-4px}
menu {margin-top:10px;font-family:small;margin-bottom:6px;font-size:16px}
menu li {cursor:pointer;color:darkblue;margin-right:8px;display:inline;}

#cal {font-family:'main';float:right;letter-spacing:initial;font-size:14px;margin-top:3px}
#where {display:inline-block;font-size:15px;font-style:italic;border-top:solid 1px lightgray;border-bottom:solid 1px lightgray;margin-top:10px;box-sizing:border-box;margin-left:0;padding-left:0;margin-bottom:0px}
#here {font-style:italic}

#container {width:100%;min-width:720px;font-size:14px;border-radius:5px 5px;background:rgba(220, 220, 250, .5);box-sizing:border-box;border:solid 1px lightgray}
table {padding:6px;}
td {padding-right:16px}
input[type=text] {width:50px;padding:3px}
#utc, #month {width:30px}
#area {width:120px}
#button {width:80px;padding:3px;}
#info {width:22px;margin-left:12px;cursor:pointer;margin-top:2px;position:absolute}
#info:hover {opacity:0.7}
#loading {display:none; text-align:center}
#loading img {position:absolute;width:60px;margin-top:37px; margin-left:-30px}
img#front {background:white;width:100%;aspect-ratio: 1 / 1.41;margin-top:10px;min-width:720px;box-sizing:border-box;border:solid 1px lightgray}

article {min-height:70vh;margin-top:20px;}
article p {margin-bottom:0px;margin-top:10px}
article li{margin-left:15px}

#instructions p{text-indent:30px}

form {width:100%;font-size:15px;float:left;margin-right:20px;display:inline-block;clear:both}
#results{clear:both}
textarea {width:100%; height:120px;box-sizing: border-box; padding:10px;border-radius:5px 5px;border:solid 1px gray;font-size:14px;resize:vertical}
form input[type=button]{width:100%;padding:6px;margin-bottom:20px}

#ips {font-weight:bold}
footer {width:100%;display:inline-block;box-sizing:border-box;font-size:15px;border-top:solid 1px lightgray;padding-top:10px;margin-top:40px;margin-bottom:30px}

@media only screen and (max-width: 960px) {
html {width:90%;margin-left:40px;margin-right:40px }
}

@-moz-document url-prefix() { input[type=submit]{padding:2px}}