.preload
{
   display: none;
}

.photos
{
   position: relative;
   width: 100%;
   margin: auto;
   height: 309px;
   background-color: white;
}

.container1
{
   position: absolute;
   margin: auto;
   padding: 0px;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 3;
   background-image: url(rotatorimages/base.jpg);
   background-repeat: no-repeat;
   background-position: top center;
}

.container2
{
   position: absolute;
   margin: auto;
   padding: 0px;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 2;
   background-image: url(rotatorimages/base.jpg);
   background-repeat: no-repeat;
   background-position: top center;
}

.navContainer
{
   position: relative;
   margin: auto;
   padding: 0px;
   top: 6px;
   /*
   With 4 frames, width is actually 96px but is given 100 for when
   someone zooms out.
   */
   width: 125px;
   height: 30px;
}

.navBox
{
   position: relative;
   float: left;
   margin: 4px;
   padding: 0px;
   width: 14px;
   height: 14px;
   border-color: #71726d;
   border-style: solid;
   border-width: 1px;
   background-color: none;
}

.navBoxActive
{
   position: relative;
   float: left;
   margin: 4px;
   padding: 0px;
   width: 14px;
   height: 14px;
   border-color: #71726d;
   border-style: solid;
   border-width: 1px;
   background-color: #035e84;
}

.navBox:hover
{
   position: relative;
   float: left;
   margin: 4px;
   padding: 0px;
   width: 14px;
   height: 14px;
   border-color: #71726d;
   border-style: solid;
   border-width: 1px;
   background-color: #035e84;
}