/* define background image for the expose mask */
#mask {
    background:#123 url(/media/img/mask/mask_gradient_1800.png) no-repeat;
    background-position:50% -200px;
}

/* general settings for both scrollables */
.items {
    width:20000em;
    position:absolute;
    clear:both;
}

/* next/prev buttons */
.navi {
    background-image:url(images/hori_large.png);
    width:24px;
    height:130px;
    float:left;
    margin-top:0px;
}

.navi:hover  		{ background-position:-30px 0; }
.navi:active  		{ background-position:-60px 0; }
.next               { background-position: -5px 14px; clear:right; }
.next:hover 		{ background-position:-30px 14px; }
.next:active 		{ background-position:-60px 14px; }

.prev               { background-position: 0 134px; clear:left; }
.prev:hover         { background-position:-30px 134px; }
.prev:active        { background-position:-60px 134px; }

.navi.disabled {
    /*visibility:hidden;*/
}


/* the thumbnail scrollable */
#thumbnails {
    position:relative;
    overflow:hidden;
    float:left;
    width: 680px;
    height:130px;
    background:#666 url(images/h150.png) repeat-x;
    margin: 0 0 10px 0;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

#thumbnails .items div {
    margin-top: 8px;
    padding: 5px;
    float:left;
}


/* overlay styling */
#box {
    background-image:url(/media/img/overlay/black.png);
    width:656px;
    height:524px;
    position:absolute;
    display:none;
}

/*
  image is contained on the overlay background image.
  the closing button is thus just a transparent container.
  */
#box .close {
    position:absolute;
    left:8px;
    top:8px;
    cursor:pointer;
    height:35px;
    width:35px;
    text-decoration:none;
}

/* overlay scrollable */
#images {
    position:absolute;
    overflow:hidden;
    margin:50px;
    width:557px;
    height:400px;
}

/* single image */
#images .items div {
    float:left;
    width:557px;
    height:400px;
    margin-right:30px;
}

/* the tooltip */
#images .items .info {
    float:none;
    background:#333;
    color:#fff;
    font-size:13px;
    margin-top:-137px;
    padding:5px 75px;
    height:125px;
    display:none;
    width:490px;
}

#images .items .info h3 {
    color:#cde;
    margin-top:10px;
}

#thumbnails img:hover {
    /*-webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);*/
    -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
}

/* override button style on the overlay */
#box .navi {
    position:absolute;
    bottom:33px;
    left:50px;
}

#box .next {
    left:665px;
}