body {
	width: 600px;
	height: 600px;
	margin: 0;
}

#containeur {
	width: 600px;
	height: 600px;
	margin: auto;
	background: url('back.jpg') no-repeat top left;
	position: relative;
}

#logoLVT {
	position: absolute;
	top: 17px;
	left: 12px;
	width: 97px;
	height: 75px;
	cursor: pointer;
}

#logoKolok {
	position: absolute;
	top: 17px;
	left: 211px;
	width: 174px;
	height: 110px;
	cursor: pointer;
}

#coverVideo {
	position: absolute;
	top: 157px;
	left: 27px;
	width: 553px;
	height: 313px;
	z-index: 5;
	background: url('cover.jpg') no-repeat top left;
}

#endVideo {
	position: absolute;
	top: 170px;
	left: 27px;
	width: 553px;
	height: 287px;
	z-index: 3;
	cursor: pointer;
	display: none;
	background: url('continue.png') no-repeat center;
}

#play {
	position: absolute;
	top: 293px;
	left: 272px;
	width: 66px;
	height: 64px;
	z-index: 10;
	cursor: pointer;
}

#video {
	position: absolute;
	top: 158px;
	left: 25px;
	width: 552px;
	height: 322px;
	z-index: 0;
}

#cacheMisere {
	position: absolute;
	top: 465px;
	left: 25px;
	width: 552px;
	height: 12px;
	background: black;
}

#partenaires {
	position: absolute;
	top: 552px;
	left: 0px;
	width: 600px;
	height: 47px;
	background: black;
}

#vidcontrols {
	position: absolute;
	top: 466px;
	left: 28px;
	width: 540px;
	height: 20px;
}

#vidcontrols div {
  cursor: pointer;
}

#playpause {
  width: 16px;
  height: 17px;
  background : url('html5-vid-ctrl-pause.png') top left black;
  float: left;
  margin-right: 10px;
}

#progressbar {
  width: 452px;
  height: 17px;
  /*background : url('../images/html5-vid-ctrl-play.png') top left black;*/
  float: left;
  margin-right: 10px;
}
 
/* make sure the horizontal slider is positioned relative */
#progressbar > .ui-slider-horizontal {
  position: relative;
  height: 6px;
  width: 100%;
  background: #333333;
  margin-top: 6px;
}
 
/* the handle must be positioned absolute, in respects to the horizontal slider */
#progressbar > .ui-slider-horizontal .ui-slider-handle {
  position: absolute;
  height: 8px;
  width: 3px;
  background: #ADA59C;
  z-index: 1;
  margin-top: -1px;
}
 


#son {
  width: 50px;
  height: 25px;
  background : url('html5-vid-ctrl-sound-on.png') top left transparent no-repeat;
  float: left;
  -moz-transition: all 2s ease-in-out; 
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out; 
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

#son:hover > .ui-slider-horizontal, #son .ui-slider-horizontal:hover, #son:hover .ui-slider-horizontal:hover {
  opacity: 1;
}

#son > .ui-slider-horizontal {
  -moz-transition: all 3s ease-in-out; 
  -ms-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out; 
  -webkit-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
  opacity: 0;
  position: relative;
  height: 4px;
  width: 100%;
  background: #333333;
  margin-top: 8px;
  margin-left: 17px;
}
 
#son > .ui-slider-horizontal .ui-slider-handle {
  position: absolute;
  height: 10px;
  width: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 4px;
  background: #ADA59C;
  z-index: 1;
  margin-top: -3px;
}

#son > .ui-slider-horizontal .ui-slider-handle:active {
  border: 0px solid transparent;
}