/* GALLERY */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
	
  width: 620px;
  height: 424px;
	
  overflow:hidden;
  
  margin: 0 auto;	
}

/*
	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 */
  position:absolute;
  
  margin-top: 20px;
  
  width:20000em;
  
  clear:both;
}

div.page {
  height: 202px;
  width: 480px;
  float: left;
}

/* single scrollable item */
div.linkitem{
  margin-left: 20px;
  padding-bottom: 22px;
  
  position: relative;
  
  height: 180px;
  width: 220px;
  
  display: block;
  
  background: url('../images/gallery_thumbs_shadow.png') no-repeat center bottom;
  
  float:left;
}

div.linkitem img {
  width: 200px;
  height: 160px;
  
  padding: 10px;
}

div.linkitem a, div.linkitem a:link, div.linkitem a:active {  
  width: 220px;
  height: 180px;
  
  position: absolute;
  left: 0px;
  top: 0px;
  
  display:block;
  
  background: url('../images/gallery_thumbs_hover_sprite.png') no-repeat;
  
  /*border:10px solid #000;*/
}

/*div.linkitem a:visited {
  border:10px solid #404040;
}*/

div.linkitem a:hover {
  background-position: 0px -360px;
}

div.linkitem a.demo:hover {
  background-position: 0px -180px;
}

div.linkitem a.demoseite {
  display: none;
}

/* active item */
.scrollable .active {
    position:relative;

	border:2px solid #000;
	
	z-index:9999;
}

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

div.gallright, div.gallleft {
  height: 424px;
  width: 45px;
  
  position: absolute;
  top: 45px;
}

/* right */
div.gallright {  
  right: 0px;
  
  background: url('../images/gallery_rand_rechts.png') repeat-y;
}

div.gallright a.browse {
  float:right;
}

a.right 				{ background: url('../images/gallery_left_right.png') no-repeat; background-position: -32px 0px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-32px -33px; }
a.right:active 	{ background-position:-32px -66px; } 


/* left */
div.gallleft {
  left: 0px;
  
  background: url('../images/gallery_rand_links.png') repeat-y top right;
}

a.left				{ background: url('../images/gallery_left_right.png') no-repeat; margin-left: 0px; } 
a.left:hover  		{ background-position: 0px -33px; }
a.left:active  	{ background-position: 0px -66px; }

/* up and down */
a.up, a.down		{ 
	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, a.disabled:hover, a.disabled:active {
  cursor:default;	
  left: 0px;
  top: 0px;
}

a.disabled.left, a.disabled.left:hover, a.disabled.left:active {
	background-position: left bottom;
} 

a.disabled.right, a.disabled.right:hover, a.disabled.right:active {
	background-position: right bottom;
}	


/* position and dimensions of the navigator */ 
.scrollnavi { 
    margin-left: 58px; 
	margin-bottom: 27px;
	
    height:17px; 
	width: 200px;
} 
 
 
/* items inside navigator */ 
.scrollnavi a { 
    margin:0px 5px;
    margin-top: 7px;
	
	width:11px; 
    height:11px; 
	
    float:left; 
    
    background:url('../images/gallery_navi_sprite.png') 0 0 no-repeat; 
	
    display:block;
    font-size:1px; 
	cursor:pointer;
} 
 
/* mouseover state */ 
.scrollnavi a:hover { 
    background-position:0 -11px;       
} 

/* down state */ 
.scrollnavi a:active { 
    background-position:0 -22px;       
} 
 
/* active state (current page state) */ 
.scrollnavi a.active { 
    background-position:0 -33px;      
}

/* Fullsize Button */

a.fullsize, a.fullsize:link, a.fullsize:visited, a.fullsize:active {
  position: absolute; 
  top: 0px;
  right: 44px;
  
  width: 122px;
  height: 28px;
  
  display: block;
  
  background: url('../images/gallery_fullsize.png') no-repeat top center;
  
  text-indent: -5000px;
  font-size: 0px;
}

a.fullsize:hover {
  background-position: 0px -28px;
}

a.fullsize:active {
  background-position: bottom center;
}

/* Lightbox */

#fancybox-close {
    width: 32px;
	height: 32px;
	background: url('../images/lb_close.png') top left no-repeat;
}

#fancybox-close:hover {
	background-position: 0px -32px;
}
#fancybox-close:active {
	background-position: left bottom;
}

#fancybox-left-ico, #fancybox-right-ico {
	width: 32px;
	height: 33px;
}

#fancybox-left-ico {
	background: transparent url('../images/gallery_left_right.png') no-repeat 0px -33px;
}

#fancybox-left-ico:active {
  background-position: 0px -66px;
}

#fancybox-right-ico {
	background: transparent url('../images/gallery_left_right.png') no-repeat -32px -33px;
}

#fancybox-right-ico:active {
  background-position: -32px -66px;
}

#fancybox-title-over {
  text-shadow: 1px 1px 1px #000;
}

a.demobutton, a.demobutton:link, a.demobutton:visited {
  width: 142px;
  height: 39px;
  background: url('../images/gallery_viewdemo.png') no-repeat top center;
}

a.demobutton:hover {
  background-position: 0px -39px;
}

a.demobutton:active {
  background-position: 0px -78px;
}

/* NO JS */

.nojs .scrollable {
  overflow: auto;
}

.nojs .scrollable .items {
  width: auto;
}

.nojs a.browse {
  display: none;
}