/* NB: Størelsen af videoafspilleren defineres i div.videocontainer og input videoslider */
/* ----------------------------------------------------------------------------------------- */

div.videocontainer {
	position: relative;
	width: 360px; height: 204px; /* Bør have samme størrelse som videoen */
}

input.videoslider{ width: 120px; height: 5px; } /* width af begge sliders tilsammen skal være mimdst 180px mindre end videocontainer */
input.videosoundslider{ width: 60px; height: 5px; }


.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

div.videocover {
   position: absolute;
   top: 0 px;
   left: 0 px;
   width: 100%;
   height: 100%;
   opacity: 0.5;
}

div.videocontrols { 
	position: absolute;
	bottom: 0px; left: 0px;
   background: #625143;
   color:#D0D0F0;
   width: 100%; /* Skal have sammen bredde som videocontaineren */
   height: 40px; 
   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px;
   opacity: 0; 
   -webkit-transition: 1s;
   transition: opacity 1s;   
}
div.videocontrols:hover{opacity: 1;}

.videocontrols input {
vertical-align: middle;
}

input.video_togglebtn{
	background:url(video-play.png);
	border: none;
	margin-top: 0px; 
	width:40px;
	height:40px;
	cursor:pointer;
	opacity:0.5;
}
input.video_togglebtn:hover{ opacity:1; }

input.speekbtn{
	background:url(speaker.png);
	border: none;
	margin-top: 0px; 
	width:30px;
	height:40px;
	cursor:default;
	opacity:0.5;
}
input.speekbtn:hover{ opacity:1; }

/*-------------------------------------------------------------*/

/* Base slider styles */
.videoslider,
.videosoundslider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 100%; /* choose desired height */
margin-top: 0;
border-radius: 5px;
background: #dddddd; /* track color */
outline: none;
opacity: 0.7;
transition: opacity .2s, box-shadow .2s;
}
/* Hover effect */
.videoslider:hover,
.videosoundslider:hover {
opacity: 1;
}
/* Focus styles for accessibility */
.videoslider:focus,
.videosoundslider:focus {
opacity: 1;
box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.5); /* soft blue glow */
}
/* WebKit thumb */
.videoslider::-webkit-slider-thumb,
.videosoundslider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 20px;
border-radius: 50%;
background: #FFFFFF; /* thumb color */
cursor: pointer;
transition: background .2s;
}
/* Firefox thumb */
.videoslider::-moz-range-thumb,
.videosoundslider::-moz-range-thumb {
width: 15px;
height: 20px;
border-radius: 50%;
background: #FFFFFF;
cursor: pointer;
transition: background .2s;
}