@charset "utf-8";
/* CSS Document */

/* styling for the image wrapper  */
#image_wrap {
	/* dimensions */
	width:100%;
	margin:42px 1px 10px 1px;
	padding:10px 0px;

	/* centered */
	text-align:center;

	/* some "skinning" */
	background: -moz-linear-gradient(top, #fff, #CCC);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ccc));
	background-color:#efefef;
	border:2px solid #fff;
	outline:1px solid #999;
	-moz-outline-radius:4px;
}

#image_caption {
	background: url(../images/transpblk.png);
	background-repeat: repeat;
	position: absolute;
	float: right;
	z-index: 10;
	width: -webkit-calc(100% - 4px);	width: calc(100% - 4px);
	height: 38px;
	font-family: 'Trebuchet MS', Tahoma, Geneva, sans-serif;		
	font-style: normal;
	font-size: .9em;
	margin: -28px 0px 0px 0px;
	padding: 10px 10px 7px 10px;	
	text-align: justify;
	color: #fff;
	text-shadow: none;
}

* html #image_caption {position:relative;filter:alpha(opacity=90);padding:10px 12px 7px 10px;margin:0px 0px 0px 0px;}
*+html #image_caption {position: relative;filter:alpha(opacity=80);padding:10px 12px 7px 10px;margin:0px 0px 0px 0px;}

#image_caption span {float: right;}

.scrollable-wrapper {
  display: block;
  width: 97%;
  max-width:550px;
  text-align: center;
  position: relative;
  margin: 0 auto;
}
/* root element for the scrollable. when scrolling occurs this element stays still. */
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 90%;	max-width:470px;
	height:105px;
	margin:0 auto 10px auto;
	display:inline-block;

	/* custom decorations */
	border:2px solid #fff;
	outline:1px solid #999;
	-moz-outline-radius:4px;
	background-color:#efefef;
	background: -moz-linear-gradient(top, #fff, #CCC);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#ccc));
}

/*
	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 {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
}

/* single scrollable item */
.scrollable img {
	margin:10px 6px 10px 7px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #0C0;
	position:relative;
	cursor:default;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../images/scrollable_buttons.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	position:absolute;
	top:0;
	margin:37px 8px;
	cursor:pointer;
	font-size:1px;
}

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


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

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

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

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


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	


@media only screen and (max-width:768px) {
#image_wrap {margin-top:20px;}
#image_wrap img {max-width: 95%;height: auto;}
#image_caption {height:48px;margin-top:-38px;}
.scrollable {width:-webkit-calc(100% - 66px);width:calc(100% - 66px);height:70px;}
.scrollable img {width:55px;height:auto;margin:10px 5px 10px 0;}
a.browse {margin:20px 0 0 3px;}
a.browse.left {margin:20px 3px 0 0;}
#image_caption strong {display:block;}
#image_caption span {float: none;}
}
body.mobile #image_wrap {margin-top:20px;}
body.mobile #image_wrap img {max-width: 95%;height: auto;}
body.mobile #image_caption {height:48px;margin-top:-38px;}
body.mobile .scrollable {width:-webkit-calc(100% - 66px);width:calc(100% - 66px);height:70px;}
body.mobile .scrollable img {width:55px;height:auto;margin:10px 5px 10px 0;}
body.mobile a.browse {margin:20px 0 0 3px;}
body.mobile a.browse.left {margin:20px 3px 0 0;}
body.mobile #image_caption strong {display:block;}
body.mobile #image_caption span {float: none;}