/* Fullscreen mode */
/*

.wrapperEl{
	width: 100%;
	height: 100%;
}

body {
	overflow: hidden;
}
*/

/* Standart mode */
.wrapperEl{
	overflow: hidden;
	width: 330px;
	height: 330px;
	position: relative;
}

.tambour {
	width:24px;
	height:24px;
	background:red;
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	background: url(img/tambour.gif) no-repeat;
}

.contentEl{
	overflow:hidden;
	/*position:absolute;*/
	zoom:1;
}

.greyEl {
	background: #fff;
	position: absolute;
	visibility: visible;
	opacity: 0.7;
	filter:alpha(opacity = 70);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
	width: 100%;
	height: 100%;
}



.scrollVertical{
	font-size:0px; /* for IE6 */
	display:block;
	position: absolute;
	top:0;
	right:0;
	height:100%;
	width:24px;
}

.topBtn{
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:24px;
	height:24px;
	background: url(img/topBtn.gif) no-repeat 0 -48px;
	cursor:pointer;
}

.topBtn-Highlighted{
	background: url(img/topBtn.gif) no-repeat 0 -24px;
}

.topBtn-Active{
	background: url(img/topBtn.gif) no-repeat 0 0;
}

.downBtn{
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	width:24px;
	height:24px;
	background: url(img/downBtn.gif) no-repeat 0 -48px;
	cursor:pointer;
}

.downBtn-Highlighted{
	background: url(img/downBtn.gif) no-repeat 0 -24px;
}

.downBtn-Active{
	background: url(img/downBtn.gif) no-repeat 0 0;
}

.scrollBarVertical{
	display:block;
	position: absolute;
	top:24px;
	right:0;
	bottom:24px;
	width:24px;
	background: url(img/scrollBarVertical.gif) repeat-y center top;
	padding:0;
}

.scrollHandleVertical{
	cursor: pointer;
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:24px;
	cursor: pointer;
	
}

.scrollBarVertical-Active .scrollHandleVertical {
	opacity:0.85;
	filter:alpha(opacity = 50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=85)";
}

.scrollHandleBGVertical {
	background:transparent url(img/scrollHandleBGVertical.gif) repeat-y scroll 0 0;
	display:block;
	position:relative;
	width:24px;
	top:0;
	bottom:0;
}
.scrollBarVertical-Highlighted .scrollHandleBGVertical {
	background:transparent url(img/scrollHandleBGVertical.gif) repeat-y scroll -24px 0;
}
.scrollBarVertical-Active .scrollHandleBGVertical {
	background:transparent url(img/scrollHandleBGVertical.gif) repeat-y scroll -48px 0;
}

.scrollHandleMiddleVertical{
	display:block;
	position: absolute;
	width:24px;
	height:13px;
	background: url(img/scrollHandleMiddleVertical.gif) no-repeat 0 0  ;
	top:50%;
	margin:-7px 0 0 0;
}

.scrollBarVertical-Highlighted .scrollHandleMiddleVertical{
	background: url(img/scrollHandleMiddleVertical.gif) repeat-y -48px 0;
}

.scrollBarVertical-Active .scrollHandleMiddleVertical{
	background: url(img/scrollHandleMiddleVertical.gif) repeat-y -24px 0;
}

.scrollHandleTop{
	display:block;
	position:relative;
	width:24px;
	height:11px;
	background: url(img/scrollHandleTop.gif) no-repeat 0 0;
}

.scrollBarVertical-Highlighted .scrollHandleTop{
	background: url(img/scrollHandleTop.gif) no-repeat -24px 0;
}

.scrollBarVertical-Active .scrollHandleTop{
	background: url(img/scrollHandleTop.gif) no-repeat -48px 0;
}

.scrollHandleDown{
	display:block;
	position:relative;
	width:24px;
	height:11px;
	background: url(img/scrollHandleDown.gif) no-repeat  0 0;
}

.scrollBarVertical-Highlighted .scrollHandleDown{
	background: url(img/scrollHandleDown.gif) no-repeat -24px 0;
}

.scrollBarVertical-Active .scrollHandleDown{
	background: url(img/scrollHandleDown.gif) no-repeat -48px 0;
}



.scrollHorizontal{
	font-size:0px; /* for IE6 */
	display:block;
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:24px;
}

.leftBtn{
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:24px;
	height:24px;
	background: url(img/leftBtn.gif) no-repeat 0 -48px;
	cursor:pointer;
}

.leftBtn-Highlighted{
	background: url(img/leftBtn.gif) no-repeat 0 -24px;
}

.leftBtn-Active{
	background: url(img/leftBtn.gif) no-repeat 0 0;
}

.rightBtn{
	display:block;
	position:absolute;
	bottom:0;
	right:0;
	width:24px;
	height:24px;
	background: url(img/rightBtn.gif) no-repeat 0 -48px;
	cursor:pointer;
}

.rightBtn-Highlighted{
	background: url(img/rightBtn.gif) no-repeat 0 -24px;
}

.rightBtn-Active{
	background: url(img/rightBtn.gif) no-repeat 0 0;
}

.scrollBarHorizontal{
	display:block;
	position: absolute;
	left:24px;
	bottom:0;
	rigth:24px;
	height:24px;
	background: url(img/scrollBarHorizontal.gif) repeat-x center center;
	padding:0;
}

.scrollHandleHorizontal{
	cursor: pointer;
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	height:24px;
	cursor: pointer;
	zoom:1;
}

.scrollBarHorizontal-Active .scrollHandleHorizontal {
	opacity:0.85;
	filter:alpha(opacity = 50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=85)";
}

.scrollHandleBGHorizontal {
	background:transparent url(img/scrollHandleBGHorizontal.gif) repeat-x scroll 0 -48px;
	display:block;
	position:relative;
	height:24px;
	left:0;
	right:0;
	float:left;
}
.scrollBarHorizontal-Highlighted .scrollHandleBGHorizontal {
	background:transparent url(img/scrollHandleBGHorizontal.gif) repeat-x scroll 0 -24px;
}
.scrollBarHorizontal-Active .scrollHandleBGHorizontal {
	background:transparent url(img/scrollHandleBGHorizontal.gif) repeat-x scroll 0 0;
}

.scrollHandleMiddleHorizontal{
	display:block;
	position: absolute;
	height:24px;
	width:13px;
	background: url(img/scrollHandleMiddleHorizontal.gif) no-repeat 0 0  ;
	left:50%;
	margin:0 -7px 0;
}

.scrollBarHorizontal-Highlighted .scrollHandleMiddleHorizontal{
	background: url(img/scrollHandleMiddleHorizontal.gif) repeat-x 13px 0;
}

.scrollBarHorizontal-Active .scrollHandleMiddleHorizontal{
	background: url(img/scrollHandleMiddleHorizontal.gif) repeat-x 26px 0;
}

.scrollHandleLeft{
	display:block;
	position:relative;
	height:24px;
	width:11px;
	background: url(img/scrollHandleLeft.gif) no-repeat 0 0;
	float:left;
}

.scrollBarHorizontal-Highlighted .scrollHandleLeft{
	background: url(img/scrollHandleLeft.gif) no-repeat -11px 0;
}

.scrollBarHorizontal-Active .scrollHandleLeft{
	background: url(img/scrollHandleLeft.gif) no-repeat -22px 0;
}

.scrollHandleRight{
	display:block;
	position:relative;
	height:24px;
	width:11px;
	background: url(img/scrollHandleRight.gif) no-repeat  0 0;
	float:left;
}

.scrollBarHorizontal-Highlighted .scrollHandleRight{
	background: url(img/scrollHandleRight.gif) no-repeat -11px 0;
}

.scrollBarHorizontal-Active .scrollHandleRight{
	background: url(img/scrollHandleRight.gif) no-repeat -22px 0;
}
