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

.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 698px;
	height:120px;

	/* custom decorations */
border:1px solid #ddd;
	background:url(xx_images/h300.png) repeat-x;
	margin-bottom:10px;
}

/*
	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;
}

/* single scrollable item */
.scrollable .tesst {
	float:left;
	cursor:pointer;
	width:120px;
	height:100px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	text-align: center;	
}
.tesst img {
	
	margin-bottom:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border:1px solid #fd0;
	clear:both;
	margin-left:16px;
	margin-right:16px;
}

/* active item */
.scrollable .active {

}
.scrollable a:hover {
	text-decoration: none;
}
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	
	display:block;
	width:30px;
	height:20px;
	float:left;
	margin:0px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ 
background:url(xx_images/rightarrow.gif) no-repeat; 
clear:right; 
margin-right: 0px;}
a.right:hover 		{ background:url(xx_images/rightarrow.gif) no-repeat; }
a.right:active 	{ background:url(xx_images/rightarrow.gif) no-repeat; } 


/* left */
a.left				{ background:url(xx_images/leftarrow.gif) no-repeat;  } 
a.left:hover  		{ background:url(xx_images/leftarrow.gif) no-repeat;  }
a.left:active  	{ background:url(xx_images/leftarrow.gif) no-repeat;  }

/* up and down */
a.up, a.down		{ 
	background:url(xx_images/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;		
}
.navi {
	margin-left:5px;
	margin-top:6px;
	width:45px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(xx_images/navigator.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;     
}

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	background:#FFFFFF url(xx_images/h150.png) repeat scroll 0;
	height:50px;
	padding:10px 0 10px 20px;
	width:446px;
	border:1px solid #ddd;
	float:left;
	margin-bottom:10px;
}

/* accordion header */
#accordion img {
	float:left;
	margin-right:10px;
	cursor:pointer;
	opacity:0.5;
	filter: alpha(opacity=50);
}

/* currently active header */
#accordion img.current {
	cursor:default;
	opacity:1;
	filter: alpha(opacity=100);
}

/* 
	accordion pane. should initially have zero width and display:none.
	the first pane should override these with inline style
*/
#accordion div {
	width:0px;
	float:left;	
	display:none;		
	margin-right:10px;
}

/* content inside a pane should have fixed width */
#accordion div h3 {
	color:#444;
	margin:0 0 -10px 0;
	width:130px;
	font-size:15px;	
}
	
#accordion div p {	
	font-size:11px;
	width:130px;
}
/* Tooltip Start */
#dynatip {
	display:none;
	background:transparent url(xx_images/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}
#dyna img {
	border:0px;
	cursor:pointer;
	margin:0px;
}
#dynatip.bottom {
	background:url(xx_images/black_arrow_bottom.png);	
	padding-top:40px;
	height:55px;
}

#dynatip.bottom {
	background:url(xx_images/black_arrow_bottom.png);
}
/* Tooltip End */
/* Start gallery Start */
#nav {
	background:#ddd url(xx_images/gallerynavbg.gif);
	border:1px solid #CCC;
	height:59px;	
	width:685px;
	margin-top:0px;
	padding-top:7px;
	padding-bottom:7px;
	padding-left:13px;
}

#nav ul {	
	width:698px;
	margin:0px;
	padding:0px;
}

#nav li {	
	border:1px solid #ccc;
	float:left;
	width:89px;
	height:59px;
	list-style-type:none;
	text-align:center;
	margin-left:11px;
	margin-right:10px;
}

#nav a {
	display:block;
	position:relative;
	padding:2px;
	width:85px;
	height:55px;
}	

#nav a.current {
	background-image: url(xx_images/gallerynavactive.gif);
	background-repeat: no-repeat;
	margin-top:-16px;
	padding-top:18px;
		
}

#nav img {	
	display:block;
}


/* panes */
#panes {
	background:#fff url(xx_images/gallerybg.gif) repeat scroll 0 0;
	border-color:#ccc;
	border-style:solid;
	border-width:1px;
	width:698px;	
	height:290px;
	
	/* must be relative so the individual panes can be absolutely positioned */
	position:relative;
}

/* crossfading effect needs absolute positioning from the elements */
#panes div {
	display:none;		
	position:absolute;
	width:678px;
	padding:10px;
}

#panes img {
	float:left;
	margin-right:20px;		
}

#panes h3 {
	margin:0px;
	font-size:22px;
	font-weight:normal;
}
/* Start gallery Ends */