/*
 * ACT MediaPlayer - jQuery plugin 1.0.0
 *
 * Copyright (c) 2011 Agile Contents
 *
 * act-player.css
 * Styles for the ACT MediaPlayer
 *
 */

/* base styles */
.act-video-player {
    /*border: 1px solid #4c4f4b;*/
}
.act-video-play, .act-volume-button, .act-video-fullscreen {
	cursor: pointer;
}
.act-video-timer {
	cursor: default;
}


/* Start of simpledark default theme */
.act-video-player.simpledark {
	float: left;
	position: relative;
	top: 0px;
    left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	background: #000000;
    z-index: 1;
}

.act-video-player.simpledark .act-video-title {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 30px;
    background-color: rgba(255,255,255,.7);
    font-family: 'Trebutchet MS';
    font-weight: bold;
    padding-left: 2%;
}

.act-video-player.simpledark .act-video-poster {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    z-index: -10;
}
.act-video-player.simpledark .act-video-poster img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.act-video-player.simpledark .act-video-controls {
	height: 30px;
	width: 100%;
	background:  #4c4f4b url(img/control_bg.png) repeat-x;
}

.act-video-player.simpledark .act-video-controls.bottom {
	position: relative;
	top: -4px;
}

.act-video-player.simpledark .act-video-controls.overlay {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

.act-video-player.simpledark .act-video-overlay{
	position: absolute;
	top: 50%;
	left: 50%;
}

.act-video-player.simpledark .act-video-overlay .act-button-play{
	position: absolute;
	width: 70px;
	height: 70px;
	top: -35px;
	left: -35px;
	background-image: url(img/play.png);
	cursor: pointer;
}

.act-video-player.simpledark .act-video-overlay .act-button-play:hover{
	background-image: url(img/play_over.png);
}


/* buttons divider */
.act-video-player.simpledark .act-video-divider-right,
.act-video-player.simpledark .act-video-divider-volume{
	float: right;
	width: 2px;
	height: 30px;
	background: url(img/button_divider.png) no-repeat;
}

.act-video-player.simpledark .act-video-divider-left{
	float: left;
	width: 2px;
	height: 30px;
	background: url(img/button_divider.png) no-repeat;
}



/* play, pause */
.act-video-player.simpledark .act-video-play {
	float: left;
	display: block;
	width: 29px;
	height: 30px;
	background: url(img/button_play.png) no-repeat;
}

.act-video-player.simpledark .act-paused-button {
	float: left;
	display: block;
	width: 29px;
	height: 30px;
	background: url(img/button_pause.png) no-repeat;
}

.act-video-player.simpledark .act-video-play:hover {	
   background: url(img/button_play_over.png) no-repeat;
}

.act-video-player.simpledark .act-paused-button:hover {
    background: url(img/button_pause_over.png) no-repeat;
}

/* seek */
.act-video-player.simpledark .act-video-seek {
	position: relative;
	top: 11px;
	height: 6px;
	margin-left: 8px;
	float: right;
	display: block;
	background-color: #313331;
	border: 1px solid #2c2e2c;
}

/*TODO: fix opera,ie: border */
.act-video-player.simpledark .act-video-seek .ui-slider-handle {
	cursor: pointer;
	width: 10px;
	height: 10px;
	border: 1px solid #333;
	top: -3px;
	margin-left: -5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;	
	
	background: #e6e6e6;
	background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
	
	/*box-shadow: inset 0 -3px 3px #d5d5d5;*/
}

.act-video-player.simpledark .act-video-seek .ui-slider-range {
	background: #8dd500 url(img/seek_pattern.png) repeat-x 0px 1px;
}


/* timer */
.act-video-player.simpledark .act-video-timer {	
	float: right;
	margin-top: 8px;
	width: 80px;
	text-align: center;
	color: #CCC;
	font-size: 11px;
    font-family: Arial;
	/*font-weight: bold;*/
}

/* volume */
.act-video-player.simpledark .act-volume-box {
	float: right;
	width: 28px;
	height: 30px;
}

.act-video-player.simpledark .act-volume-slider-box{
	position: relative;
	height: 0px;
	width: 28px;
	bottom: 0px;
	background-color: #4c4f4b;
	/*background-color: rgba(76,79,75,.85);*/
	visibility: hidden;
	opacity: 0;

	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;	
	
	-moz-transition: all 0.5s ease-in-out; /* Firefox */
	/*-webkit-transition: opacity 0.5s ease-in-out;*/ /* Safari and Chrome */
    -webkit-transition: opacity 0.5s ease-in-out, bottom 0.5s ease-in-out, height 0.5s ease-in-out; /* Safari and Chrome */
	-o-transition: all 0.5s ease-in-out;  /* Opera */
	transition: all 0.5s ease-in-out; 
}

.act-video-player.simpledark .act-volume-box:hover .act-volume-slider-box
{
	height: 60px;
	bottom: 60px;
	visibility: visible;
	opacity: 1;
}

.act-video-player.simpledark .act-volume-slider {	
	position: relative;
	height: 42px;
	width: 6px;
	left: 10px;
	top: 12px;
	
	border: 1px solid #2c2e2c;
	background-color: #313331;
}

.act-video-player.simpledark .act-volume-slider .ui-slider-handle {
	width: 10px;
	height: 6px;
	left: -2px;
	background: url(img/volume_slider.png) no-repeat;
	cursor: pointer;
}

.act-video-player.simpledark .act-volume-slider .ui-slider-range {
	background: #8dd500 url(img/volume_pattern.png) repeat-y 0px 0px;
	left: 0px;

}

/* volume button */
.act-video-player.simpledark .act-volume-button {
	position: absolute;
	bottom: 0px;
	width: 28px;
	height: 30px;
	background: url(img/button_volume.png) no-repeat;
}

.act-video-player.simpledark .act-volume-button:hover {
	background: url(img/button_volume_over.png) no-repeat;
}

.act-video-player.simpledark .act-volume-mute {
	position: absolute;
	bottom: 0px;
	width: 28px;
	height: 30px;
	background: url(img/button_volume.png) no-repeat;
}

/* fullscreen button */
.act-video-player.simpledark .act-video-fullscreen {
	float: right;
	display: block;
	width: 29px;
	height: 30px;
	background: url(img/button_fullscreen.png) no-repeat;
}

.act-video-player.simpledark .act-video-fullscreen:hover {
	background: url(img/button_fullscreen_over.png) no-repeat;
}


/* needed jquery ui styles
 * using these, we don't depend on jQuery UI's stylsheet
 */
.ui-slider-handle {
	position: absolute;
	z-index: 2;
	display: block;
	cursor: default;
	outline: none;
}

.ui-slider-range {
	display:block;
	width:100%;	
	height:100%;
	left:0;
	bottom: 0;
	border:0 none;
	position:absolute;
	z-index:1;
}

video:-webkit-full-screen     { max-height: 100%; }
video:-moz-full-screen        { max-height: 100%; }