body { padding: 2em 5em 0 5em; max-width: 750px; margin: auto; font-size: 13pt; }
form { display: block; margin: 0 auto 2em auto; }
.dot { float: left; width: 1em; height: .25em; text-align: center; color: #CCC; }
ul { list-style: none; margin: 0; padding: 0; }
label span { float: left; width: 12em; text-align: right; padding: 0 .5em; margin-right: .5em; }
label span:after { content: ':'; }
input { width: 12em; padding: 0 .5em 0 .5em; border: solid; }
input:active { border-color: blue; }
.active { border-color: red; background-color: #FED; }
#houseinfo { position: relative; }
li li:hover span { background-color: #0E0; }
.explanation { position: absolute; left: 30em; top: 0; display: none; text-align: left; width: 20em; padding: .5em; }
.explanation:after { content: ''; }
li:hover > label > .explanation { display: block; }
input[type="reset"] { margin-left: 12em; }
input[type="reset"]:hover { background-color: #DEF; }
#mortgage div { padding: .25em 0 .25em 0; }
#mortgage div.selectable:hover { background-color: #EEE; }
#mortgage div.active.selectable { background-color: #BEB; }