external_file/css/barousel.css

.barousel{
position:relative;
margin-bottom:0px;
width:500px;
height:401px;
border-top:3px solid #000;
}
.barousel_image{
position:absolute;
z-index:10;
width:100%;
height:100%;
}
.barousel_image img{
position:absolute;
display:none;
border:none;
}
.barousel_image img.default{
display:block;
}
.barousel_image img.current{
z-index:10;
}
.barousel_image img.previous{
z-index:5;
}
.transparent{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
.barousel_content{
position:absolute;
padding:0 0 0 18px;
/*z-index:50;*/
background-color: #4D4D4D;
color:#fff;
width:100%;
height:50px;
bottom:0px;
left:0px;
}
.barousel_content div{
display:none;
}
.barousel_content div.default{
display:block;
}
.barousel_content p{
font-size:13px;
font-weight:normal;
line-height:17px;
}

.barousel_content p.header{
font-size:18px;
font-weight:normal;
line-height:18px;
color:#fff;
}
.barousel_content a,
.barousel_content a:hover{
color:#fff55b;
background-color:transparent !important;
}
.barousel_nav{
position:absolute;
padding:3px 3px 0px 0;
height:100%;
bottom:0;
z-index:100;
width:100%;
}
.barousel_nav .counter{
font-size:18px;
color: white;
position: absolute;
right: 10px;
bottom: 10px;
}
.barousel_nav .nav_btn_icon, .turn_m a, .turn_m a span.icon, #btnShareImage{
background:transparent url("style-theme.png") no-repeat top left;
}
.barousel_nav .nav_btn{
background-color: #4D4D4D;
}
.barousel_nav .nav_btn:hover{
background-color: #B3B2B2;
}
.barousel_nav .nav_btn_icon a{
display:block;
width:100%;
height:100%;
font-size:0;
line-height:0;
text-decoration:none;
}
.barousel_nav .prev{
background-position: -320px -470px;
width: 40px;
height: 60px;
position: absolute;
left: 0;
top: 50%;
}
.barousel_nav .next{
background-position: -280px -470px;
width: 40px;
height: 60px;
position: absolute;
right: 0;
top: 50%;
}
.barousel_nav .close{
background-position: -440px -470px;
width: 40px;
height: 60px;
position: absolute;
left: 0;
top: 0;
}
.barousel_nav .play{
background-position: -280px -470px;
width: 40px;
height: 60px;
position: absolute;
left: 50%;
bottom: 0px;
}
.barousel_nav .pause{
background-position: -360px -470px;
width: 40px;
height: 60px;
position: absolute;
left: 50%;
bottom: 0px;
}
.barousel_exif_data{
z-index:90;
color:#FFFFFF;
position: absolute;
right:10px;
top:5px;
background-color:#282828;
padding: 8px;
font-size:14px;
filter:alpha(Opacity=80, Style=0);
-moz-opacity:0.8;
opacity: 0.8;
}
.image_exif_wrapper {
width: 250px;
height: 17px;
position: absolute;
right: 50px;
bottom: 20px;
font-size:12px;
color:#ffffff;
}
.image_exif_wrapper .turn_m a, div.turn_m.clone a {
float: left;
margin: 0;
padding: 7px 0 0;
margin-top: 1px;
height: 17px;
width: 52px;
color: #666;
position: relative;
text-decoration: none;
text-indent: -10000em;
background-position: -800px -311px;
transition: color .4s linear;
-o-transition: color .4s linear;
-moz-transition: color .4s linear;
-webkit-transition: color .4s linear;
transition: background-color .13s linear;
-o-transition: background-color .13s linear;
-moz-transition: background-color .13s linear;
-webkit-transition: background-color .13s linear;
}
.image_exif_wrapper .turn_m a span.icon {
background-position: -800px -295px;
width: 25px;
height: 14px;
display: block;
position: absolute;
top: 3px;
transition: left .2s linear;
-o-transition: left .2s linear;
-moz-transition: left .2s linear;
-webkit-transition: left .2s linear;
}
#btnShareImage{
bottom:8px;
right:350px;
position: absolute;
background-position: -560px -470px;
}