body {
   background:white;
   color:black;
   font-family:arial,helvetica,sans-serif;
}

#piccontain {
   float:left;
   position:relative;
   margin:20px;
   border:solid black 5px;
   padding:5px;
   overflow:hidden;
   width:400px;
   height:300px;
}

#picpad {
   position:absolute;
   top:0px;
   left:0px;
   width:400px;
   height:300px;
   border:solid white 5px;
   padding:0;
   z-index:15;
}

#picpad.drag {
   cursor:move;
}

img.sm {
   position:absolute;
}

img.sm {
   z-index:5;
   width:100px;
   height:100px;
}

img.sm {
   cursor:default;
}

#zoomselector {
   margin-left:380px;
}

#zoomselector li {
   list-style:none;
   text-align:center;
   font-size:1.5em;
   line-height:1.75em;
   height:1.75em;
   width:1.75em;
   border:solid black 1px;
   border-top:none;
}

#zoomselector li:first-child {
   border-top:solid black 1px;
}

#zoomselector li:hover {
   cursor:pointer;
}

#zoomselector li.selected, div.scrollcontrol.selected {
   background:#009900;
   z-index:5;
}

#instruct {
  clear:both;
}

#scrollcontrolcontain {
   position:relative;
   margin-left:480px;
   visibility:hidden;
}

div.scrollcontrol {
   z-index:10;
   position:absolute;
   width:40px;
   height:40px;
   border:solid black 1px;
   cursor:pointer;
}

div.scrollicon {
   z-index:5;
   position:absolute;
   width:0px;
   height:0px;
   border:solid transparent 15px;
}

div.scrollicon.click {
   z-index:15;
}

div.scrollcontrol.click {
   z-index:5;
}