/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable
{
	/* required settings */
	position: relative;
	overflow: hidden;
	width: 840px;
	height: 120px;
}

.scrollableSmall
{
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 450px;
	height:120px;
}

/*
	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 the width and height for the root element and
	not for this element.
*/
.scrollable .items, .scrollableSmall .items {
	/* this cannot be too large */
	width: 20000em;
	position: absolute;
	clear: both;
}

/* single scrollable item */
.scrollable .houseSlideBox, .scrollableSmall .houseSlideBox
{
	width: 120px;
	height: 115px;
	padding: 0px;
	float: left;
	cursor:pointer;
}
    .scrollable span, .scrollableSmall span
    {
    }
    /* active item */
    .scrollable .active, .scrollableSmall .active
    {
	    width: 120px;
	    height: 110px;
	    padding: 5px 0px 0px 0px;
	    z-index: 9999;
	    position: relative;
	    border: solid 1px #CCCCCC;
	    background-color: #FFFFFF;
    }
        .scrollable .active img, .scrollableSmall .active img
        {
            padding: 3px;
	        border: solid 1px #EA5E00;
	        background: transparent url('/assets/mijnmakelaar/images/bg_searchresults_thumb_active.png') no-repeat top left;
        }
        .scrollable .active span, .scrollableSmall .active span
        {
	        color: #FE861B!important;
        }

/* this makes it possible to add next button beside scrollable */
.scrollable, .scrollableSmall {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/assets/mijnmakelaar/images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* disabled navigational button */
a.disabled, a.disabled:hover, a.disabled:active 
{
    background:url(/assets/mijnmakelaar/images/hori_large_disabled.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	cursor:default;
	font-size:1px;
	/*visibility:hidden !important;*/
}