@charset "utf-8";
body
{
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #999999;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
}
.main #container
{
    width: 850px;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #F8E9C7;
}
.main #header
{
    background-color: #F4DEAD;
    padding: 0;
}
.main #menu
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    height: 40px;
    text-transform: uppercase;
    font-size: small;
    background: transparent url("images/menu-bg.jpg") repeat-x top left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: auto;
}
.main #menu li
{
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    border-right: 1px solid #F8E9C7;
}
.main #menu li a
{
    display: block;
    float: left;
    color: #FFFFFF;
    padding: 12px 20px 0 20px;
    text-decoration: none;
    height: 28px;
}
.main #menu li a:hover
{
    background:transparent url("images/menu-hover.jpg") repeat-x top left;
}
.main #mainContent
{
    margin: 0;
    padding: 20px 20px;
    min-height: 400px;
}
.main #mainContent h2
{
    text-align: center;
}
.main #intro p
{
    text-align: center;
    width: 500px;
    margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
}
.main #counter
{
    text-align: center;
    vertical-align: middle;
}
.main #thumbnails
{
    width: 680px;
    margin: 0 auto;
    padding: 0;
}
.main #nav-index
{
    width: 30%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
.main #nav-index a
{
    text-decoration: none;
}
.main #nav-prev
{
    float: left;
    width: 30%;
    margin: 0;
    padding: 0;
    text-align: left;
}
.main #nav-prev a
{
    text-decoration: none;
}
.main #nav-next
{
    float: right;
    width: 30%;
    margin: 0;
    padding: 0;
    text-align: right;
}
.main #nav-next a
{
    text-decoration: none;
}
.main #footer
{
    padding: 0 20px 0 20px;
    background-color: #EFCF85;
    border-top: 1px solid #999999;
}
.main #footer p
{
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 5px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-size: small;
}
.main #copyright
{
    float: right;
    text-align: right;
    width: 40%;
}
.main #email
{
    width: 50%;
}
.center
{
    display: block;
    margin: 0 auto;
    padding: 0;
}
.floatright
{ /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.floatleft
{ /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
}
.clearfloat
{ /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}