﻿/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/**//**/
a
{
    color: #000;
}
a:visited
{
    color: #111;
}
a:active
{
    color: #222;
}
a:hover
{
    text-decoration: none;
}
.photo
{
	padding: 5px;
    position: relative;
    height: 360px;
}
.photo ul, .photo ul ul
{
    padding: 0;
    margin: 0;
    border: 0;
    list-style: none;
    width: 215px;
}
.photo ul ul
{
    margin-left: -9999px;
    height: 0;
    overflow: hidden;
}
.photo ul li
{
    width: 215px;
    background: #ddd;
    float: left;
    background: #fff url(../img/gallery_button_background_2.gif) no-repeat;
}
.photo ul li a.set
{
    display: block;
    text-align: center;
    width: 215px;
    line-height: 30px;
    background: #fff url(../img/gallery_button_background_0.gif) no-repeat;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    text-decoration: none;
}
.photo ul li table
{
    margin: 0;
    padding: 5px;
    display: none;
}
.photo img
{
    border: 0;
	width: expression((document.body.clientWidth > 479) ? "480px" : "auto");	
}
.photo ul li a.set:hover
{
    background: #fff url(../img/gallery_button_background_1.gif) no-repeat;
}
.photo ul li a.set:active
{
    white-space: normal;
    background: #fff url(../img/gallery_button_background_2.gif) no-repeat;
}
.photo ul li a.set:focus
{
    outline: 0;
    background: #fff url(../img/gallery_button_background_2.gif) no-repeat;
}
.photo ul li a.set:active i, .photo ul li a.set:focus i
{
    display: block;
    width: 480px;
    height: 360px;
    position: absolute;
    left: 250px;
    top: 0;
    border: 1px solid #fff;
    background: #fff;
    top: 5px;		
}
.photo ul li a.set:active table, .photo ul li a.set:focus table
{
    padding: 0 0 10px 0;
    margin-top: -2px;
    margin-bottom: 2px;
    display: block;
    border: 1px solid #888;
    border-width: 0 1px 1px;
}
.photo ul a.set:active ul, .photo ul a.set:focus ul
{
    margin: 0;
    width: 207px;
    height: auto;
    overflow: visible;
    background: transparent;
    padding-bottom: 10px;
}
.photo ul a.set:active ul li, .photo ul a.set:focus ul li
{
    float: left;
    display: inline;
    width: 56px;
    margin: 4px 6px;
    background: transparent;
}
.photo ul a.set:active ul li a, .photo ul a.set:focus ul li
{
    background: transparent;
    line-height: 1.3em;
}
.photo ul a.set:active ul li a img, .photo ul a.set:focus ul li img
/*  This is the bit the affects how the 'mini' pictures appear */
{
    display: block;
    border: 0px solid #fff;
    cursor: default;
    margin: 0 auto;
	width: 55px;
}
.photo ul a.set:active ul li a em, .photo ul a.set:focus ul li em
{
    position: absolute;
    left: -9999px;
    width: 480px;
}
.photo ul a.set:active ul li a:hover, .photo ul a.set:focus ul li:hover
{
	    background: #fff;
}
.photo ul a.set:active ul li a:hover em, .photo ul a.set:focus ul li:hover em
{
    left: 250px;
	width: 480px;
    z-index: 0;
    top: 5px;
}
.photo ul a.set:active ul li a:hover img, .photo ul a.set:focus ul li:hover img
{
    border: 3px solid #fc0;
    cursor: default;
}
.photo ul a.set:active ul li a:hover em img, .photo ul a.set:focus ul li:hover em img
{
    padding: 1px;
    border: 1px solid #888;
    margin-bottom: 10px;
	max-width:480px;
/*	width: expression((document.body.clientWidth > 479) ? "480px" : auto); */
	width: 480px; 
    top: 5px;		
}
.photo ul a.set:active b, .photo ul a.set:focus b
{
    font-weight: normal;
    font-style: normal;
    background: #fff;
}
.photo .default
{
    width: 480px;
    height: 360px;
    position: absolute;
    left: 250px;
    top: 5px;
    border: 1px solid #888;
}
.photo ul.topic p{
    position: absolute;
    left: -9999px;
	font-size: 2em;
}
.photo ul.topic:active p{
    position: absolute;
    left: 250px;
	font-size: 2em;
}