/* General page colors and fonts. */
body
{
    font-family:      arial, helvetica, sans-serif;
    font-size:        15px;
    background-color: #d9d8ba;
    color:            #004000;
    margin:           10px;
    background-image: url('/images/site/wallpaper.jpg');
}

/* All link types are the same color and boldness, but while hovering over the link,
 * the link text will be underlined. */
a:link    { background: inherit; color: #004000; text-decoration: none;      font-weight: bold; }
a:visited { background: inherit; color: #004000; text-decoration: none;      font-weight: bold; }
a:active  { background: inherit; color: #004000; text-decoration: none;      font-weight: bold; }
a:hover   { background: inherit; color: #004000; text-decoration: underline; font-weight: bold; }

/* Make sure that images never have a border unless we specifically give them one. */
img 
{
    border: none;
}

/* This is used to display image captions and other text on the page. It takes
 * up all of the possible space of it's parent container and has a thick border
 * on it. Used for image captions and also text on other pages. */
div.textbox
{
    background-color: #fafad9;
    color:            #004000;
    border:           2px solid black;
    margin:           5px;
    padding:          20px;
    font-size:        100%;
    text-align:       justify;
}

/* Style H1 headers in a textbox div to underline themselves, lose the upper margin
 * and gain a lower margin instead. */
div.textbox h1
{
    font-size:       150%;
    text-decoration: underline;
    margin-top:      0;
    margin-bottom:   20px;
}

/* Used to style a "signature" on the contact page. */
div.signature
{
    font-size:   110%;
    font-weight: bold;
    font-style:  italic;
}

/* Use for menu headers on most pages. We force everything to the right and make
 * sure that whatever is below us is properly spaced away. */
div.topmenubar
{
    text-align:    right;
    margin-bottom: 10px;
}

/* As above, but used for bottom menu headers. The margin is on the top instead
 * of the bottom to space us from what's above us, and we make sure that nothing
 * can float near us, so that we always go below the content of the page. */
div.bottommenubar
{
    text-align: right;
    margin-top: 10px;
    clear:      both;
}

/* Used for item images on an item page in cases where there are alternate views
 * of the item. This floats to the left so that the thumbnails can appear in a 
 * list to the right of the item. */
div.itemimage
{
    width:        640px;
    height:       100%;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
    float: left;
}

/* As above, but this div doesn't float. This is used for images that don't have
 * any alternate views, so that the image appears centered. */
div.itemimagenofloat
{
    width:        640px;
    height:       auto;
    text-align:   center;
    margin-left:  auto;
    margin-right: auto;
}


/* This div wraps an entire image thumbnail, including it's caption. */
div.thumb
{
    margin: 5px;
    float:  left;
}

/* This div wraps the image tag in a thumbnail and forces horizontal center
 * alignment. The image tag needs to be given a special class (see below) if it
 * needs any vertical alignment to center it. */
div.thumb div.imgthumb
{
    width:      150px;
    height:     150px;
    text-align: center;
    margin:     0px;
}

/* This div wraps the caption text attached to a thumbnail. It's styled somewhat
 * like the textbox, but is constrained in size and has a thinner border on it. */
div.thumb div.tcaption
{
    background-color: #fafad9;
    width:            150px;
    margin-top:       5px;
    padding:          2px;
    text-align:       center;
    font-weight:      bold;
    border:           1px solid black;
}

/* These classes are used to center thumbnail images vertically inside the 150x150
 * thumbnail div, based on their height. */
div.imgthumb img.h100 { margin-top: 25px; }
div.imgthumb img.h112 { margin-top: 19px; }
div.imgthumb img.h113 { margin-top: 18px; }
div.imgthumb img.h114 { margin-top: 18px; }
div.imgthumb img.h150 { margin-top: 0px;  }

/* This special kind of div has a float parameter so that items following it will
 * flow nicely, and it has a maximized size.*/
div.catimage
{
    float:        left;
    width:        400px;
    margin-left:  10px;
    margin-right: 10px;
    text-align:   center;
}