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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: auto;
	height:111px;

	/* custom decorations */
	border:1px solid #ccc;
	background:url("images2/h300.png") repeat-x;
}

/*
	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;
height: 111px;
top: 1px;
left: 0px;
}

.items div {
float:left;
width:auto;
}

/* single scrollable item */
.scrollable img {
margin: 0;
width: auto;
height: 100px;
float: left;
background-color: #fff;
padding: 2px;
border: 1px solid #ccc;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

/* active item */
.scrollable .active {
border: 2px solid #000;
z-index: 9999;
position: relative;
}





/*********** My scrollable navigator ***********/
/* position and dimensions of the navigator */
.navi {
width:auto;
height:20px;
float: left;
}

/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url("images2/navigator2.png") 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

/* end navigator */





/* prev, next, prevPage and nextPage buttons */
a.browse {
background:url("images2/hori_large2.png") no-repeat;
display:block;
width:18px;
height:18px;
float:left;
cursor:pointer;
font-size:1px;
}

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

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

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




/*****************************************/
/* overlays */
.simple_overlay
{
/* must be initially hidden */
display: none; /* place overlay on top of other elements */;
z-index: 10000; /* styling */;
background-color: #000000;
width: auto;
top: auto;
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 */
.simple_overlay .close
{
background-image: url('images2/close.png');
position: absolute;
right: -15px;
top: -15px;
cursor: pointer;
height: 35px;
width: 35px;
}

/* some styling for triggers */
#triggersLeft
{
float: left;
vertical-align: middle;
height: auto;
width: auto;
cursor: pointer;
}

#triggersRight
{
float: right;
text-align: center;
vertical-align: middle;
height: auto;
width: auto;
cursor: pointer;

}

#triggersCenter
{
margin-left: auto;
margin-right: auto;
float: none;
text-align: center;
vertical-align: middle;
height: auto;
width: auto;
cursor: pointer;
}

#triggers img
{
cursor: pointer;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

/* styling for elements inside overlay */
.details
{
font-size: 18px;
color: #fff;
width: auto;
text-align: center;
}

/* the large image. we use a gray border around it */
#img
{
border: 1px solid #666;
}


/* when there is no next or previous link available this class is added */
.disabled
{
visibility: hidden;
}

/* the "information box" */
.info
{
position: absolute;
bottom: 0;
left: 0;
padding: 0px 15px 0px 15px;
color: #fff;
font-size: 11px;
border-top: 1px solid #666;
}

.info strong
{
display: block;
}
/* end overlay */


/*****************************************/
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion
{
background: #EBEBEB 0 0;
width: auto;
border: 1px solid #333;
-background: #666;
}

/* accordion header */
#accordion h2
{
background: #ccc;
margin: 0;
padding: 4px 4px;
font-size: 10pt;
border: 1px solid #fff;
border-bottom: 1px solid #ddd;
cursor: pointer;
}

/* currently active header */
#accordion h2.current
{
cursor: default;
background-color: #33CC33;
}

/* accordion pane */
#accordion div.pane
{
border: 1px solid #fff;
border-width: 0 2px;
display: none;
height: auto;
padding: 4px;
color: #000000;
font-size: 10pt;
}

/* a title inside pane */
#accordion div.pane h3
{
font-weight: normal;
margin: 0 0 -5px 0;
font-size: 10pt;
color: #999;
}
/* end accordian */