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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 375px;
	height:270px;

	/* custom decorations */
	border:1px solid #666;
}

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

/* single scrollable item */
.scrollable a {
	cursor:pointer;
	width:375px;
	height:249px;
	display: inline;
	float: left;
	text-decoration: none;
	background-position: center top;
	background-repeat: no-repeat;
	
/*	-moz-border-radius:4px;
	-webkit-border-radius:4px;*/
}
div#chained {
	height: 249px;
}

div#chained div.items a div {
		display: block;
		background-image: url(/pics/gallery_photo_lines.png);
		background-repeat: repeat;
		width: 375px;
		height: 249px;
		position: relative; /* тупой осёл не понимает процентной высоты без этого :( */
		text-decoration: none;
}

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


.scrPlayers  {

	display: inline;
	float: left;
	text-align: center;
	
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 540px;
	height: 170px;
	
	/* custom decorations */
	margin-top: 90px;
}

/* single scrollable item */
.scrPlayers a {
	cursor:pointer;
	width:94px;
	height:170px;
	display: block;	
		margin-left: 7px;
		margin-right: 7px;
		padding: 0px;
		display: inline;
		float: left;
/*	-moz-border-radius:4px;
	-webkit-border-radius:4px;*/
		color: #fff;
		font-size: 8pt;
		font-weight: bold;
		text-decoration: none;
	}

.scrPlayers a:hover {
		color: #ffcc99;
	}
	
.scrPreviews  {

	display: inline;
	float: left;
	text-align: center;

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 700px;
	height: 80px;
	
	/* custom decorations */
	
}

.scrPreviews a {
	cursor:pointer;
	width:120px;
	height:80px;
		margin-left: 10px;
		margin-right: 10px;
		padding: 0px;
		display: inline;
		float: left;
/*	-moz-border-radius:4px;
	-webkit-border-radius:4px;*/
	background-color: #666;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	text-decoration: none;
	}
	
.scrPreviews a.current {
	opacity: 0.5;
	cursor: default;
}