/* ================================================================
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.cssplay.co.uk/menu/lightbox.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.
=================================================================== */

/* slides styling */
.photo {
    width       : 635px;
    text-align  : left;
    position    : relative;
    margin      : 0 auto;
}

.photo ul.topic {
    padding     : 0;
    margin      : 0;
    list-style  : none;
    width       : 635px;
    height      : auto;
    position    : relative;
    z-index     : 10;
}

.photo ul.topic li {
    display     : block;
    width       : 125px;
    height      : 31px;
    float       : left;
}
.photo ul.topic li a.set {
    display     : block;
    font-size   : 11px;
    width       : 124px;
    height      : 30px;
    text-align  : center;
    line-height : 30px;
    color       : #000;
    text-decoration : none;
    border      : 1px solid #fff;
    border-width : 1px 1px 0 0;
    background  : #ccc;
    font-family : verdana, arial, sans-serif;
}

.photo ul.topic li a ul,
.photo ul.topic li ul {
    display     : none;
}

.photo ul.topic li.active a {
    color       : #000;
    background  : #bbb;
}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a {
    color       : #fff;
    background  : #aaa;
}

.photo ul.topic li.active ul {
    display     : block;
    position    : absolute;
    left        : 0;
    top         : 31px;
    list-style  : none;
    padding     : 0;
    margin      : 0;
    height      : 900px;
    background  : #E2E6F2;
    width       : 500px;
    padding     : 40px 60px;
    border      : 20px solid #A8B6D0;
    z-index     : 1;
}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul {
    display     : block;
    position    : absolute;
    left        : 0;
    top         : 31px;
    list-style  : none;
    padding     : 0;
    margin      : 0;
    height      : 900px;
    background  : #E2E6F2;
    width       : 500px;
    padding     : 40px 60px;
    border      : 20px solid #A8B6D0;
    z-index     : 100;
}

.photo ul.topic li ul li {
    display     : inline;
    width       : 112px;
    height      : 87px;
    float       : left;
    border      : 1px solid #fff;
    margin      : 1px;
}

.photo ul.topic li ul li a
{
    display     : block;
    width       : 110px;
    height      : 85px;
    cursor      : default;
    float       : left;
    text-decoration : none;
    background  : #444;
    border      : 1px solid #888;
}

.photo ul.topic li ul li a img {
    display     : block;
    width       : 100px;
    height      : 75px;
    border      : 5px solid #eee;
}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover {
    white-space : normal;
    position    : relative;
}

.photo ul.topic li a:hover ul li a:hover img.horz,
.photo ul.topic li:hover ul li a:hover img.horz {
    position    : absolute;
    left        : -50px;
    top         : -32px;
    width       : 200px;
    height      : 150px;
    border-color : #fff;
}

.photo ul.topic li a:hover ul li a:hover img.vert,
.photo ul.topic li:hover ul li a:hover img.vert {
    position    : absolute;
    left        : -50px;
    top         : -32px;
    width       : 150px;
    height      : 200px;
    border-color : #fff;
}