body {background-color: white; font-family: Verdana, Arial; font-size: 12px; padding: 0px; margin: 0px;}

#header {padding: 3px; text-align: left; background-color: white; border-bottom: solid 3px navy; font-size: 40px; line-height: 40px; font-weight: bold;}

#main { background-color: navy;}

main {padding: 3px; text-align: left; background-color: white; min-height: 100px; max-width: 600px;}

main p a.button {display: block; width: 90%; background-color: navy; font-weight: bold; border: solid 1px black; padding: 10px; box-shadow: 10px 10px 5px gray; color: white; text-decoration: none;}

main p a.button:hover {box-shadow: 3px 3px 5px gray; }


input {display: block; width: 90%; height: 30px;}
select {display: block; width: 90%; height: 30px;}

#action {min-width: auto; width: 48%; max-width: 100%; float: left; min-height: 100px; padding: 10px;}

#status {min-width: 200px; width: 48%; float: left;}

div.notice {border: solid 2px navy; padding: 10px; background-color: lightblue; font-size: 16px; font-weight: bold;}

div.error {border: solid 2px red; padding: 10px; background-color: salmon; font-size: 16px; font-weight: bold;}

div.success {border: solid 2px green; padding: 10px; background-color: lightgreen; font-size: 16px; font-weight: bold;}

div.question {border: solid 2px gray; padding: 10px; background-color: lightgray;  font-size: 14px; line-height: 1.6em; font-weight: bold;}

div.clear {clear: both;}

footer {padding: 3px; text-align: left; background-color: white; border-top: solid 3px navy; font-size: 12px; line-height: 20px;}

footer ul {list-style-type: none;}
footer ul li {float: left;}
footer ul li a {color: black; margin: 5px; text-decoration: none;}


p.main {font-size: 18px; font-weight: bold; line-height: 1.4em;}

img.banner {width: 100%; max-width: 100%;}

h4 span {font-size: 24px;}

@media (max-width: 500px) {

#action {width: auto;}
}