html
{
    height: 100%;
}

body
{
    color: #848484;

    font: 85% "Trebuchet MS", "Segoe UI", trebuchet, helvetica, arial, geneva, sans-serif;

    background: #D5E36A repeat-x url( '../images/gradient_bg.gif' ); /* clean this up */

    margin: 0; padding: 0;

    height: 100%;
}

/* container */

#container
{
    width: 763px;
    min-height: 100%;
    background-color: #ffffff;

    text-align: left;

    /* margin: 20px; */

    margin: 19px;

    border-top: 1px solid #B1C935;
    border-right: 1px solid #B1C935;
    border-left: 1px solid #B1C935;
}

* html #container { height: 100%; } /* annoying ie6 hack */

/* side bar */

#container #sidebar
{
    line-height: 22px;
    padding: 24px 0 0 40px;
    width: 140px;

    float: left;
}

#container #sidebar a
{
    padding: 4px;
    margin-bottom: -22px;
    color: #F64E5D;
    text-decoration: none;

    display: block;
    width: 110px;
}

#container #sidebar a:hover
{
    color: #848484;
    padding: 4px;

    background-color: #FCE9EB;
}

/* right-hand side ( gallery ) */

#container #gallery, #container #right
{
    margin: 0 0 0 180px;
    padding-top: 20px;

    width: 550px; /* determines width of gallery */
}

#container #right
{
    padding-top: 31px;
    padding-bottom: 40px;

    width: 485px;
}

#container #right table td
{
    padding: 6px;
    /* background-color: #FCE9EB; */

    border: 1px solid #FCDBDF;
}

#container #right table
{
    width: 500px;
    margin-bottom: 25px;
}

#container #right a, #lightboxCaption .umbra_text a
{
    color: #F64E5D;
}

#container #right a:hover, #lightboxCaption .umbra_text a:hover
{
    text-decoration: none;
}

/* font styles */

#container #right p
{
    line-height: 20px;

    padding-left: 20px;
    margin-bottom: 25px;

    border-left: 2px dotted #e4ee95;
}

#container #right h1
{
    font-size: 18px;

    color: #f17c86;
}

#container #right h3
{
    margin: 0 0 20px 0;
    padding: 0;

    color: #f17c86;
    font-size: 24px;
}

/* gallery images */

#container #gallery a img
{
    border: 0;
}

#container #gallery a
{
    margin: 1px;
    padding: 3px;

    display: block;
    float: left;
    
    width: 100px;
    height: 100px;
}

#container #gallery a:hover
{
    padding: 3px;
    background-color: #fc6b7b;
}

/* logo */

#container #logo
{
    padding: 40px 0 24px 40px;

    margin: 0;
}

#container #logo img
{
    border: none;
}

#container .logo_break
{
    padding: 0;
    margin: 0 40px 0 40px;

    border: 0;

    border-top: 1px dotted #ff8c99;
    border-bottom: 1px solid white;

    border-left: 0;
    border-right: 0;

    width: 683px;
}

/* this doesn't appear to be working properly in safari */

#loadingImage 
{
    color: #fc6b7b;
    text-align: center;

    padding: 7px;
    background-color: #fff;

    width: 65px;
    height: 20px;
}

#right .table
{
    display: table;
}

#right .table div
{
    display: table-cell;
    padding-right: 15px;
}

/* lightbox */

#lightbox
{
	background-color: #eee;
	padding: 10px;
}

#lightboxDetails
{
	font-size: 0.8em;
	padding-top: 0.4em;
}	

#lightboxCaption
{
    font-size: 13px;
    float: left;
}

#lightboxCaption .title
{
    font-size: 15px;
    font-weight: bold;

    color: #F74E61;
}

#lightboxCaption .umbra_text
{
    font-size: 11px;
    font-style: italic;
}

#keyboardMsg
{
    float: right;
    
    padding: 0 4px 0 4px;

    color: #848484;
}

#closeButton
{
    top: 5px; right: 5px;
}

#lightbox img
{
    border: none; clear: both;
} 

#overlay img
{
    border: none;
}

#overlay
{
    background-image: url( ../images/overlay.png );
}

* html #overlay /* ie6 hack */
{
    background-color: #333;
    background-color: transparent;
    background-image: url( ../images/blank.gif );
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");
}