/* GALLERY */
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
  /* required settings */
  position:relative;
	
  width: 620px;
  height: 180px;
	
  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;
  
  width:20000em;
  
  clear:both;
}

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

/* single scrollable item */
div.linkitem{
  margin-right: 20px;
  
  position: relative;
  
  height: 180px;
  width: 220px;
  
  display: block;
  
  float:left;
}

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

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

div.linkitem a:visited {
  border:10px solid #4a5657;
}

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

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

.wholescrollnavi  {
  margin: 0 auto;
  margin-top: 23px;
  margin-left: 160px;
  
  width: 300px;
  
  float: left;
}

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

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

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

/* right */

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


/* left */

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


/* disabled navigational button */
a.disabled {
	background-position: 0px -40px;		
} 

a.disabled:hover {
	background-position: 0px -40px;
	cursor:default;
}	


/* position and dimensions of the navigator */ 
.scrollnavi { 
    margin-left: 40px; 
	margin-right: 40px;
	
    height:17px; 
	
	float:left;
} 
 
 
/* items inside navigator */ 
.scrollnavi a { 
    margin:0px 5px;
    margin-top: 7px;
	
	width:10px; 
    height:10px; 
	
    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 -10px;       
} 
 
/* active state (current page state) */ 
.scrollnavi a.active { 
    background-position:0 -20px;      
}

a.fullsize, a.fullsize:link, a.fullsize:visited, a.fullsize:active {  
  width: 140px;
  height: 25px;
  
  margin-top: 20px; 
  
  display: block;
  
  float: right;
  
  background: url('../images/gallery_fullsize.png') no-repeat top center;
  
  font-size:0px;
  text-indent: -10000px;
}

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

#fancybox-close {
  width: 23px;
  height: 21px;
  top: -8px;
  right: -10px;
}

/* NO JS */

.nojs a.browse {
  display: none;
}

.nojs .scrollable {
  overflow: auto;
  height: 210px;
}