/**
 * Uliza Google Cast Sender Controller
 * @copyright (c) 2015 SkillUp Video Technologies.
 */

/* base styles */
.uliza-video-player {}
.uliza-video-play, .uliza-volume-button {
	cursor: pointer;
}
.uliza-video-timer {
	cursor: default;
}

/* Start of simpledark default theme */
.uliza-video-player.simpledark {
	float: left;
	position: relative;
	padding: 0px;

	font-family: Arial, Helvetica, sans-serif;

	-webkit-border-radius: 5px; 
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.9)));
	box-shadow: inset 0 15px 35px #535353;

	width: 100%;
	height: 100%;
}

.uliza-video-player.simpledark .uliza-video-controls {
	position: absolute;
	padding-top: 5px;
	float: left;
	clear: both;
	width: 100%;
	height :22px;
	bottom: 5px;
}

.uliza-video-player.simpledark .uliza-video-play, .uliza-video-player.simpledark .uliza-video-stop, .uliza-video-player.simpledark .uliza-video-seek, .uliza-video-player.simpledark .uliza-volume-box, .uliza-video-player.simpledark ,.uliza-video-stop-box, .uliza-video-player.simpledark .uliza-thirty-sec, .uliza-video-timer {
	float: left;
}

/* play, pause */
.uliza-video-player.simpledark .uliza-video-play {
	display: block;
	width: 22px;
	height: 22px;
	margin-right: 2px;
	margin-left: 15px;
	background: url(images/usc.google.cast.sender.play.play.png) no-repeat;

	opacity: 0.7;

	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.uliza-video-player.simpledark .uliza-paused-button {
	background: url(images/usc.google.cast.sender.play.pause.png) no-repeat;
}

.uliza-video-player.simpledark video {
	float: left;
}

.uliza-video-player.simpledark .uliza-video-play:hover {
    opacity: 1;
}

.uliza-video-player.simpledark .uliza-video-stop-box {
        position: relative;
        width: 18px;
        height: 18px;
        margin-top: 1px;
        margin-right: 5px;
        margin-left: 10px;
}

.uliza-video-player.simpledark .uliza-video-stop {
        display: block;
        width: 20px;
        height: 20px;
        margin-top: 1px;
        margin-right: 5px;
        background: url(images/usc.google.cast.sender.play.stop.png) no-repeat;

        opacity: 0.7;
        
        cursor: pointer;

        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
}

.uliza-video-player.simpledark .uliza-video-stop-disable {
	background: url(none) no-repeat;
}

.uliza-video-player.simpledark .uliza-video-stop:hover {
    opacity: 1;
}

/* seek */
.uliza-video-player.simpledark .uliza-video-seek {
	position:relative;
	width : -webkit-calc(100% - 210px) ;
	width : calc(100% - 210px) ;
	height: 3px;
	margin-top: 8px;
	margin-left: 8px;
	border: 1px solid #494949;

	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;

	background: #535353;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
	background-image: -moz-linear-gradient(top, #535353, #333333);
	background-image: linear-gradient(#535353, #333333);

	box-shadow: inset 0 -3px 3px #333333;
}

.uliza-video-player.simpledark .uliza-video-seek .ui-slider-handle {
	width: 15px;
	height: 15px;
	border: 1px solid #333;
	top: -6px;

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	background: #e6e6e6;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
	background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
	background-image: linear-gradient(#e6e6e6, #d5d5d5);

	box-shadow: inset 0 -3px 3px #d5d5d5;
}

.uliza-video-player.simpledark .uliza-video-seek .ui-slider-handle.ui-state-hover {
	background: #fff;
}

.uliza-video-player.simpledark .uliza-video-seek .ui-slider-range {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;

	background: #4cbae8;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
	background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
	background-image: linear-gradient(#4cbae8, #39a2ce);

	box-shadow: inset 0 -3px 3px #39a2ce;
}

/* timer */
.uliza-video-player.simpledark .uliza-video-timer {
	margin-top: 5px;
	margin-left: 10px;
	color: #999;
	font-size: 0.7em;
	font-weight: bold;
}

/* volume */
.uliza-video-player.simpledark .uliza-volume-box {
	position: absolute;
	bottom: 0px;
	right: 15px;
	overflow: hidden;
	width: 22px;
	height: 30px;
	color: #fff;

	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

.uliza-video-player.simpledark .uliza-volume-box:hover {
	height: 135px;
	padding-top: 5px;
}

.uliza-video-player.simpledark .uliza-volume-box:hover .uliza-volume-slider {
	position: relative;
	visibility: visible;
	opacity: 1;
}

.uliza-video-player.simpledark .uliza-volume-slider {
	position: relative;
	height: 100px;
	width: 7px;
	left: 4px;
	
	z-index: 1;

	visiblity: hidden;
	opacity: 0;

	border: 1px solid #444;

	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;

	background: #535353;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #535353),color-stop(1, #333333));
	background-image: -moz-linear-gradient(top, #535353, #333333);
	background-image: linear-gradient(#535353, #333333);

	box-shadow: inset 0 3px 3px #333333;

	-webkit-transition: all 0.1s ease-in-out; 
	transition: all 0.1s ease-in-out;
}

.uliza-video-player.simpledark .uliza-volume-slider .ui-slider-handle {
	width: 12px;
	height: 12px;
	left: -4px;
	margin-bottom:-0.6em;
	margin-left:0;
	border: 1px solid #333;

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	background: #e6e6e6;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
	background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
	background-image: linear-gradient(#e6e6e6, #d5d5d5);

	box-shadow: inset 0 3px 3px #d5d5d5;
}

.uliza-video-player.simpledark .uliza-volume-slider .ui-slider-handle.ui-state-hover {
	background: #fff;
}

.uliza-video-player.simpledark .uliza-volume-slider .ui-slider-range {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;

	background: #e6e6e6;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
	background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
	background-image: linear-gradient(#e6e6e6, #d5d5d5);

	box-shadow: inset 0 3px 3px #d5d5d5;
}

/* volume button */
.uliza-video-player.simpledark .uliza-volume-button {
	position: absolute;
	bottom: 0px;
	display: block;
	width: 22px;
	height: 22px;
	background: url(images/usc.google.cast.sender.volume.full.png) no-repeat;
	text-indent: -9999px;

	opacity: 0.8;
}

.uliza-video-player.simpledark .uliza-volume-button:hover {
	opacity: 1;
}

.uliza-video-player.simpledark .uliza-volume-mute {
	background: url(images/usc.google.cast.sender.volume.mute.png) no-repeat;
}

.uliza-video-player.simpledark .uliza-thirty-sec {
        position: relative;
        width: 22px;
        height: 22px;
        margin-right: 5px;
        margin-left: 8px;
        background: url(images/usc.google.cast.sender.play.goback.png) no-repeat;
        background-size: 22px;

        opacity: 0.7;
        
        cursor: pointer;

        -webkit-transition: all 0.2s ease-in-out; 
        transition: all 0.2s ease-in-out;
}

.uliza-video-player.simpledark .uliza-thirty-sec:hover {
	opacity: 1;
}


/* Start of smalldark child theme */
.uliza-video-player.smalldark {
	padding: 0px;
}

.uliza-video-player.smalldark video:hover + .uliza-video-controls {
	visibility: visible;
	opacity: 0.7;
}

.uliza-video-player.smalldark .uliza-video-controls:hover {
	visibility: visible;
	opacity: 0.7;
}

.uliza-video-player.smalldark .uliza-video-controls {
	position: absolute;
	top: 150px;
	left: 80px;
	width: 320px;
	padding: 10px;

	border: 1px solid #2E2E2E;

	-webkit-border-radius: 5px; 

	background: #000000;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */
	background-image: linear-gradient(#313131, #000000);

	opacity: 0;
	visibility: hidden;

	box-shadow: inset 0 15px 35px #535353;

	-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
	transition: all 0.1s ease-in-out;
}

.uliza-video-player.smalldark .uliza-video-seek {
	width: 200px;
}

.uliza-video-player.smalldark .uliza-volume-box {
	bottom: 10px;
}

.uliza-video-player.smalldark .uliza-volume-box:hover {
	height: 85px;
}

.uliza-video-player.smalldark .uliza-volume-slider {
	height: 50px;
}

.ui-slider-handle {
	position: absolute;
	z-index: 3;
	display: block;
	margin-left:-0.6em;
	cursor: default;
	outline: none;
}

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

#uliza_player_container {

}

#uliza-cast-stop {
     position:absolute;
     bottom:53px;
     right:8px;
     width: 45px;
     height: 45px;
     background: url('images/cast_button.png') no-repeat;
     background-position: 0px -45px;
     opacity: 0.7;
}

#uliza-cast-stop:hover {
     position:absolute;
     bottom:53px;
     right:8px;
     width: 45px;
     height: 45px;
     background: url('images/cast_button.png') no-repeat;
     background-position: -46px -45px;
     opacity: 0.7;
}
/**
#uliza-cast-load {
     position:absolute;
     top:140px;
     left:290px;
     width: 50px;
     height: 50px;
     background: url('images/usc.google.cast.sender.loadinfo.gif') no-repeat;
     background-size: 50px;
}
*/
#uliza-cast-play {
     position:absolute;
     width: 100%;
     height: 100%;
     background: url('images/usc.google.cast.sender.load.png') no-repeat center;
     background-size: 205px;
     opacity: 0.7;
}

#uliza-cast-play-low {
     position:absolute;
     top:90px;
     left:120px;
     width: 100px;
     height: 100px;
     background: url('images/usc.google.cast.sender.load.low.png') no-repeat;
     background-size: 100px;
     opacity: 0.7;
}

#uliza-cast-play-mid {
     position:absolute;
     top:90px;
     left:260px;
     width: 100px;
     height: 100px;
     background: url('images/usc.google.cast.sender.load.middle.png') no-repeat;
     background-size: 100px;
     opacity: 0.7;
}

#uliza-cast-play-high {
     position:absolute;
     top:90px;
     left:400px;
     width: 100px;
     height: 100px;
     background: url('images/usc.google.cast.sender.load.high.png') no-repeat;
     background-size: 100px;
     opacity: 0.7;
}

.uliza-cast-debug {
     position:absolute;
     top:260px;
     left:550px;
     width: 50px;
     height: 50px;
     background: url('images/usc.google.cast.sender.debug.on.png') no-repeat;
     background-size: 50px;
     opacity: 0.7;
}
.uliza-cast-nodebug {
     background: url('images/usc.google.cast.sender.debug.off.png') no-repeat;
     background-size: 50px;
}

#uliza-cast-play:hover, #uliza-cast-play-low:hover, #uliza-cast-play-mid:hover, #uliza-cast-play-high:hover, #uliza-cast-stop:hover, .uliza-cast-debug:hover { opacity: 1; }

#uliza_cast_controller {
    position:absolute;
    top: 0px;
}

/* load icon */
#uliza-cast-load{
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width:60px;
	height:75px;
}

.blockG{
	position:absolute;
	background-color:rgb(255,255,255);
	width:10px;
	height:23px;
	border-radius:8px 8px 0 0;
		-o-border-radius:8px 8px 0 0;
		-ms-border-radius:8px 8px 0 0;
		-webkit-border-radius:8px 8px 0 0;
		-moz-border-radius:8px 8px 0 0;
	transform:scale(0.4);
		-o-transform:scale(0.4);
		-ms-transform:scale(0.4);
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
	animation-name:fadeG;
		-o-animation-name:fadeG;
		-ms-animation-name:fadeG;
		-webkit-animation-name:fadeG;
		-moz-animation-name:fadeG;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#rotateG_01{
	left:0;
	top:27px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
	transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
}

#rotateG_02{
	left:8px;
	top:10px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
	transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
}

#rotateG_03{
	left:25px;
	top:3px;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
	transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
}

#rotateG_04{
	right:8px;
	top:10px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
	transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
}

#rotateG_05{
	right:0;
	top:27px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
	transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
}

#rotateG_06{
	right:8px;
	bottom:7px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
	transform:rotate(135deg);
		-o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
}

#rotateG_07{
	bottom:0;
	left:25px;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
	transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
}

#rotateG_08{
	left:8px;
	bottom:7px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
	transform:rotate(-135deg);
		-o-transform:rotate(-135deg);
		-ms-transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
		-moz-transform:rotate(-135deg);
}



@keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}