.bodystyle {
   background-color: #000000;
   }

#titlebar {
    float: left;
    }

#indexbar {
    float: left;
    margin-left: 50px;
    margin-right: 50px;
    width: 540px;
    }

#indexbar P {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12pt;
    color: #FFFFFF;
    }

#indexbar P.subtext {
    font-size: 10pt;
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    border-color: #FFFFFF;
    }

#indexbar A:link, A:visited, A:active {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12pt;
    color: #ff0000;
    text-decoration: none;
    }

#indexbar A:hover {
    color: #ff6600;
    text-decoration: underline;
    }

#indexbar A.subtext {
    font-size: 10pt;
    }

#caption {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12pt;
    color: #FFFFFF;
    font-weight: bold;
    }

#menubar {
    float: left;
    }

#mainphoto {
    margin: 10px;
    border-style: solid;
    border-width: 5px;
    border-color: #FFFFFF;
    }

.gallery {
          margin:0; padding:0;
          overflow:hidden; /* Clears the floats */
          width:100%; /* IE and older Opera fix for clearing, they need a dimension */
          list-style:none;
        }
          .gallery li{
            float:left;
            display:inline; /* For IE so it doesn't double the 1% left margin */
            width:30%;
            margin:0 0 10px 1%; padding:10px 0;
            height:158px; /* Height of img (150) + 2 times 3px padding + 2 times 1px border = 158px */
            position:relative; /* This is the key */
            background:url(45degree.png);
          }
            .gallery a,
            .gallery img{
              display:block;
              width:100%;
            }
            a img{ border:none; } /* A small fix */
            .gallery a:link,
            .gallery a:visited,
            .gallery a:focus,
            .gallery a:hover,
            .gallery a:active{
              padding:3px;
              background:#eeefef;
              width:150px; height:150px;
              border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
              position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
              margin:-41px 0 0 -41px; /* Pull the image into position with negative margins (margins value is half of the width of the image) */
            }
            .gallery a:hover{
              border-color:#dfdfdf;
            }
            /* These are all optional, for decoration purpouses only */
            .gallery{
              border-bottom:2px solid #000;
              padding-bottom:10px;
              margin-top:10px;
            }