/* fancy box styles */ 
.fancybox { 
     
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
     
    /* styling */ 
    background-color:#333; 
    
    width:786px;     
    min-height:200px; 
    border:1px solid #666; 
    
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; 
    -webkit-box-shadow: 0 0 90px #000;     
} 
 
/* close button positioned on upper right corner */ 
.fancybox .close { 
    background-image:url(++resource++collective.blogging.static/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}

/* styling for elements inside overlay */ 

.fancydetails h3 { 
    color:white;
    font-weight:bold; 
    font-size:15px; 
    margin:0 0 -10px 0; 
}

.fancydetails p { 
    font-size:11px; 
    color:#AABBAA; 
} 


/* gallery styling for the image wrapper  */ 

#gallery-box div.imageTitle {
    background:#fff;
    border:1px solid #8CACBB;
    border-top:0 none;
    width:380px;
    margin:0 auto 5px auto;
    padding:5px 10px;
}

#gallery-box div.imageTitle a {
    color:#76797C;
    text-decoration:none;
}

#gallery-box div.imageTitle a:hover {
    color:#000;
}

#image_wrap { 
    /* dimensions */ 
    width:100%; 
    margin:15px 0 0 0; 
    padding:15px 0; 
 
    /* centered */ 
    text-align:center; 
 
    /* some "skinning" */ 
    background-color:#DEE7EC; 
    border:2px solid #fff; 
    outline:1px solid #8CACBB; 
    -moz-ouline-radius:4px; 
}

#image_wrap img {
    border:1px solid #8CACBB;
}

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 

    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width:100%; 
    height:130px;
    
    /* some "skinning" */ 
    background-color:#DEE7EC; 
    border:2px solid #fff; 
    outline:1px solid #8CACBB; 
    -moz-ouline-radius:4px;
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.galleryItems { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.galleryItems div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */
div.galleryItems img {
    border:2px solid #fff; 
    outline:1px solid #8CACBB;
}

div.galleryItems img.active { 
    border:2px solid #FFA500; 
    background-color:#fff; 
}

/* scrollable buttons */
#gallery-box a.browse {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(++resource++collective.blogging.static/hori_large.png) no-repeat scroll 0 0;
cursor:pointer;
display:block;
float:left;
font-size:1px;
height:30px;
margin:5px 10px;
width:30px;
}

#gallery-box a.right {
background-position:0 -30px;
clear:right;
float:right;
margin-right:0;
}

#gallery-box a.right:hover {
background-position:-30px -30px;
}

#gallery-box a.right:active {
background-position:-60px -30px;
}

#gallery-box a.left {
margin-left:0;
}

#gallery-box a.left:hover {
background-position:-30px 0;
}

#gallery-box a.left:active {
background-position:-60px 0;
}

#gallery-box a.disabled {
visibility:hidden !important;
}

/* events / maps */
td.entryMap div.googleMapLocation {
    width:100%;
}

/* various styles */
.helpTopLink {
    float:right;
}

.blogArchivePortlet div.archiveMonth {
    padding-left:1em;
}

.blogArchivePortlet span.archiveCount {
    font-weight:bold;
}
