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

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 780px;
    height:120px;
    float: left;
    margin: 0 0 20px 0;
}

/*
    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.items {
    /* 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.items div {
    float:left;
    margin: 0 0 0 6px;
    position: relative;
    width: 150px;
    height: 100px;
}
div.scrollable div.items div a {
    width: 150px;
    height: 100px;
    overflow: hidden;
    display: block;
}

.gallery-desc
{
	position: absolute !important;
	bottom: 0;
	left: 0;
	background: #e9e9e9;
	width: 140px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 5px 5px;
	opacity:0.75;
	filter:alpha(opacity=75);
	font-weight: bold;
	color: #373737 !important;
	font-size: 10px;
	overflow: hidden;
}

/* you may want to setup some decorations to active the item */
div.items div.active {
    border:0px inset #ccc !important;
    background-color:#fff;
}

.nextPage
{
	background: url(../images/icon-arrow-right.gif) no-repeat;
	display: block;
	float: left;
	width: 13px;
	height: 13px;
	margin: 40px 0 0 10px;
}

.prevPage
{
	background: url(../images/icon-arrow-left.gif) no-repeat;
	display: block;
	float: left;
	width: 13px;
	height: 13px;
	margin: 40px 10px 0 0;
}

a.disabled {
	visibility:hidden !important;
}

.gallery-title
{
	color: #265DA0;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 0;
}