<!DOCTYPE html>
<html>
<head>
<title>Annotator Tool</title>
<style type="text/css">
.dropbtn {
background-color: white;
color: #4CAF50;
color: whitr
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown_0{
position: absolute;
top: 10px;
right: 160px;
display: inline-block;
}
.dropdown_1{
position: absolute;
top: 35px;
right: 160px;
display: inline-block;
}
.dropdown_2{
position: absolute;
top: 60px;
right: 160px;
display: inline-block;
}
.dropdown_3{
position: absolute;
top: 85px;
right: 160px;
display: inline-block;
}
.dropdown_4{
position: absolute;
top: 110px;
right: 160px;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: white}
.dropdown_0:hover .dropdown-content {
display: block;
}
.dropdown_0:hover .dropbtn {
background-color: white;
}
.dropdown_1:hover .dropdown-content {
display: block;
}
.dropdown_1:hover .dropbtn {
background-color: white;
}
.dropdown_2:hover .dropdown-content {
display: block;
}
.dropdown_2:hover .dropbtn {
background-color: white;
}
.dropdown_3:hover .dropdown-content {
display: block;
}
.dropdown_3:hover .dropbtn {
background-color: white;
}
.dropdown_4:hover .dropdown-content {
display: block;
}
.dropdown_4:hover .dropbtn {
background-color: white;
}
#bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 5px;
border-top: 3px solid blue;
background-color: #cccccc;
padding-bottom: 2em;
}
.tb5 {
position: absolute;
color: #4CAF50;
top: 410px;
font-size: 14pt;
right: 80px;
display: inline-block;
height: 197px
border-color: 3px #4CAF50;
}
.percent {
position: absolute;
color: #4CAF50;
top: 140px;
font-size: 14pt;
right: 80px;
display: inline-block;
height: 197px
border-color: 3px #4CAF50;
}
input[type=submit] {
position: absolute;
top: 700px;
right: 20px;
border: 1px solid #f44c0e;
color: #fff;
background: tomato;
padding: 10px 20px;
border-radius: 3px;
}
input[type=submit]:hover {
background: #f44c0e;
}
</style>
</head>
<body>
<IMG SRC="/net/home2/ceb/bmcclint/data/brendan.jpg" WIDTH=850 HEIGHT=1
+000>
<!--
<div style="position: absolute;
top: 13;
right: 10px;
width: 20px;
height: 600px;
border:1px solid #000;"
</div>
-->
<div class="dropdown_0">
<button class="dropbtn" type="button">Assignment</button>
<div class="dropdown-content">
<FORM ACTION = "a.pl" METHOD = "get">
<select name="assignment" >
<option value="Cruise_1">cruise_1</option>
<option value="Cruise_2">cruise_2</option>
<option value="Cruise_3">cruise_3</option>
<option selected="selected" value="cruise">Cruise 1</option>
</select>
</div>
</div>
<div class="dropdown_1">
<button class="dropbtn" type="button">Biotic</button>
<div class="dropdown-content">
<select name="Biotic" >
<!-- constructed options -->
<br><br><label><input type="checkbox" name="biotic" value="Anemone
+_colonial">Anemone_colonial</label>
<br><label><input type="checkbox" name="biotic" value="Anemone_solitar
+y">Anemone_solitary</label>
<br><label><input type="checkbox" name="biotic" value="BlackSeaBass">B
+lackSeaBass</label>
<br><label><input type="checkbox" name="biotic" value="BlueCrab">BlueC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="BrittleStar">Br
+ittleStar</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoa">Bryozo
+a</label>
<br><label><input type="checkbox" name="biotic" value="Bryozoan">Bryoz
+oan</label>
<br><label><input type="checkbox" name="biotic" value="Clams">Clams</l
+abel>
<br><label><input type="checkbox" name="biotic" value="Crab_unident">C
+rab_unident</label>
<br><label><input type="checkbox" name="biotic" value="Ctenophores">Ct
+enophores</label>
<br><label><input type="checkbox" name="biotic" value="Dogfish">Dogfis
+h</label>
<br><label><input type="checkbox" name="biotic" value="Echinoderm">Ech
+inoderm</label>
<br><label><input type="checkbox" name="biotic" value="Eel">Eel</label
+>
<br><label><input type="checkbox" name="biotic" value="Fish_unident">F
+ish_unident</label>
<br><label><input type="checkbox" name="biotic" value="Flounder">Floun
+der</label>
<br><label><input type="checkbox" name="biotic" value="HermitCrab">Her
+mitCrab</label>
<br><label><input type="checkbox" name="biotic" value="Jellyfish">Jell
+yfish</label>
<br><label><input type="checkbox" name="biotic" value="JonahCrab">Jona
+hCrab</label>
<br><label><input type="checkbox" name="biotic" value="Lobster">Lobste
+r</label>
<br><label><input type="checkbox" name="biotic" value="Mussels">Mussel
+s</label>
<br><label><input type="checkbox" name="biotic" value="OceanPout">Ocea
+nPout</label>
<br><label><input type="checkbox" name="biotic" value="RockCrab">RockC
+rab</label>
<br><label><input type="checkbox" name="biotic" value="SandDollar">San
+dDollar</label>
<br><label><input type="checkbox" name="biotic" value="SeaRobin">SeaRo
+bin</label>
<br><label><input type="checkbox" name="biotic" value="SeaStar">SeaSta
+r</label>
<br><label><input type="checkbox" name="biotic" value="Skate">Skate</l
+abel>
<br><label><input type="checkbox" name="biotic" value="SkateEggCase">S
+kateEggCase</label>
<br><label><input type="checkbox" name="biotic" value="Sponge">Sponge<
+/label>
<br><label><input type="checkbox" name="biotic" value="Urchin_green">U
+rchin_green</label>
<br><label><input type="checkbox" name="biotic" value="Urchin_purple">
+Urchin_purple</label>
<br><label><input type="checkbox" name="biotic" value="WormHoles">Worm
+Holes</label>
<option selected="selected" value="None"></option>
</select>
</div>
</div>
<div class="dropdown_2">
<button class="dropbtn" type="button">Bottom Type</button>
<div class="dropdown-content">
<select name="bottom_type" >
<!-- constructed options -->
<br><br><label><input type="checkbox" name="bottom_type" value="Bo
+ulder">Boulder</label>
<br><label><input type="checkbox" name="bottom_type" value="Cobble">Co
+bble</label>
<br><label><input type="checkbox" name="bottom_type" value="Gravel">Gr
+avel</label>
<br><label><input type="checkbox" name="bottom_type" value="Mudstone">
+Mudstone</label>
<br><label><input type="checkbox" name="bottom_type" value="Sand">Sand
+</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHash"
+>ShellHash</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashC
+ourse">ShellHashCourse</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashF
+ine">ShellHashFine</label>
<br><label><input type="checkbox" name="bottom_type" value="ShellHashM
+edium">ShellHashMedium</label>
<br><label><input type="checkbox" name="bottom_type" value="Silt">Silt
+</label>
<br><label><input type="checkbox" name="bottom_type" value="SiltySand"
+>SiltySand</label>
<option selected="selected" value="Sand"></option>
</select>
</div>
</div>
<div class="dropdown_3">
<button class="dropbtn" type="button">Sediment</button>
<div class="dropdown-content">
<select name="sediment" >
<!-- constructed options -->
<br><br><label><input type="checkbox" name="sediment" value="coars
+e">coarse</label>
<br><label><input type="checkbox" name="sediment" value="fine">fine</l
+abel>
<br><label><input type="checkbox" name="sediment" value="medium">mediu
+m</label>
<br><label><input type="checkbox" name="sediment" value="none">none</l
+abel>
<option selected="selected" value="None">None</option>
</select>
</div>
</div>
<div class="tb5">
Notes:
<input type="text" name="image_notes" value="."/>
</div>
<!--
<div class="percent
<label for="percent">Cobble Percent: </label><input id="percent"
+type="number" name="cobble_percent" min="5" max="100" step="10" value
+ ="5"/>
<br>
<label for="percent">Sand Percent   : </label><input
+id="percent" type="number" name="sand_percent" min="5" max="100" step
+="10" value ="5"/>
<br>
<label for="percent">Coarse Shells  : </label><input id="
+percent" type="number" name="coarse_shells_percent" min="5" max="100"
+ step="10" value ="5"/>
</div>
-->
<input type="submit" value="Submit"/>
</form>
<div id="bottom">
<strong>--/net/home2/ceb/bmcclint/data/brendan.jpg-- Brendan at Sussex
+</strong>
</div>
</body>
</html>