body { font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif }

h1,h2,h4,div { padding-left: 10px; }
h2,h3,p { clear: both; }
div { margin-bottom: 15px; }
div div { padding: 0; }

ul { clear: left; float: left; }
ul li { font-size: 0.8em; }

div#transects { float: left; clear: left; }

form label { clear: left; display: block; font-weight: bold; float: left; width: 150px; padding-right: 20px;  }

form div { float: left; clear: left;}
form input,form select,form textarea { font-size: 16px; font-family: "Courier New";  float: left;  }
form input.submit { font-family: verdana,arial,sans-serif; width: auto!important; }
form div div { float: left; clear: none; width: 800px; }
form div div label { clear: none; font-size: 0.9em; width: auto; margin-right: 1em; }
form div div input,form div div select { margin-right: 1em; }

form.transectForm { padding-top: 20px; }

div div div.recorder { width: 100%; padding-bottom: 10px; }

div.weatherObservations div.weatherVariable { width: 200px; float: left; }
div.weatherObservations div.weatherVariable div.radioContainer { width: auto; clear: left;  }
div.weatherObservations div.weatherVariable div.radioContainer label { clear: both; font-weight: normal; }
div.weatherObservations div.weatherVariable input.temperature { clear: left; width: 2em; }

div div div.metData { width: 100%; padding-bottom: 10px; }

div.transectTimes div.transectTime { width: 220px; float: left; }
div.transectTimes div.transectTime label { clear: both;  }
div.transectTimes div.transectTime input { clear: left; width: 5em; }

div.vertebratesRow div.vertebrates { width: 300px; float: left; }
div.vertebratesRow div.vertebrates label { clear: both;  }
div.vertebratesRow div.vertebrates input { clear: left; }

div.lightsRow div.lights { width: 180px; float: left; }
div.lightsRow div.lights label { clear: both;  }
div.lightsRow div.lights input { clear: left; width: 2em; }

table.observations { width: 100%; padding: 0; margin: 0;}
table.observations tr { padding: 0; margin: 0;}
table.observations tr td { padding: 0; margin: 0; width: 100px; padding: 5px; }
table.observations th { font-size: .8em; text-align: left; padding: 5px; margin: 0;}
table.observations td input.time { width: 4em; }
table.observations td input { width: 1em; }
table.observations tr.error { background-color: #fcc; }
table.observations tr.error td { border-top: 1px red solid; }
table.observations tr.error td.time { border-left: 1px red solid; }
table.observations tr.error td.action { border-right: 1px red solid; }
table.observations tr.errorText { background-color: #fcc; }
table.observations tr.errorText td { border: 1px red solid; border-top: none; font-color: red; }


span.note { display: block; color: #aaa; font-weight: normal; clear: left; }
div.error { border: 1px red solid; background-color: #fcc; padding: 10px; }
div.error span.note { display: block; color: #f00; font-weight: normal; margin-top: 5px; float: left; clear: left; }

form#select-data-for-download ol li { margin-bottom: 20px; }
form#select-data-for-download ol li span {display: block; float: left; margin-right: 50px; }
form#select-data-for-download  label { width: auto; }

table#spreadsheetExample {
    border: 1px black solid;
    width: 100%;
}

table#spreadsheetExample th,
table#spreadsheetExample td {
    border: 1px black solid;
}

table#spreadsheetExample th {
    text-align: left;
}