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

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

/* next/prev buttons */
div.navi {
    background-image:url(../img/scrollable/arrow/hori_large.png);
    width:30px;
    height:30px;
    float:left;
    margin-top:55px;
}

div.navi:hover          { background-position:-30px 0; }
div.navi:active         { background-position:-60px 0; }
div.nextPage            { background-position: 0 -30px; /*clear:right;*/ }
div.nextPage:hover  { background-position:-30px -30px; }
div.nextPage:active     { background-position:-60px -30px; } 


div.navi.disabled {
    visibility:hidden;      
}


/* the thumbnail scrollable */
#thumbnails {
    position:relative;
    overflow:hidden;        
    float:left; 
    width: 602px;   
    height:200px;
/*    background:#222 url(../img/gradient/h150.png) repeat-x;*/
    margin:15px;
    border:2px solid #fff;
    outline:1px solid #ccc;
    -moz-outline-radius:4px;
}

#thumbnails div.items div {
    padding:5px;
    float:left;     
}


/* box styling */
#box {
/*    background-image:url(../img/overlay/black.png);*/
    background-image:url(../img/overlay/white_close.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 div.close, #box a.close {
    background:none;
    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 div.items div {
    float:left;
    width:557px;
    height:400px;
    margin-right:30px;
}

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

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

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

#box div.nextPage {
    left:580px;
}