/* ------ DISPLAY ------ */
body{position:relative;min-width:1000px;margin-left:1.5em;}

article,aside,footer,header,nav,section{display:block;}

#container>header{float:right;margin:6em 5% 0 0;width:50%;}
#container>aside{float:left;margin-top:3em;width:45%;position:absolute;}
#animecontainer img:first-child{width:80%;}
#animecontainer img:last-child{max-height:550px;max-width:80%;}
#container>article{clear:both;padding:2em 0 5em 0;}
#container>article>section{clear:both;float:right;margin:0 5% 0 0;width:50%;}
#container>article>section header img{width:80%;}

#animecontainer{height:550px;width:100%;}

#container>article>section#presentation,
#container>article>section#le-cabinet-hypnose{margin:0;width:100%;}
#container>article>section#presentation>header,
#container>article>section#presentation article,
#container>article>section#le-cabinet-hypnose>header,
#container>article>section#le-cabinet-hypnose article{clear:both;float:right;margin:0 5% 0 0;width:50%;}
#container>article>section#presentation aside,
#container>article>section#le-cabinet-hypnose aside{float:left;width:45%;}
#container>article>section#presentation>div,
#container>article>section#le-cabinet-hypnose>div{clear:both;}
#container>article>section header>a{display:block;}

#videocontainer{width:450px;margin:0 auto;}
#videocontainer:after{content:"•";display:block;clear:both;height:0px;visibility:hidden;}
#videocontainer section{display:block;float:left;height:210px;overflow:hidden;position:relative;width:150px;}
#videocontainer section>div{height:100%;margin-left:-58px;}
#videocontainer section>div>video{height:100%;}

#videocontainer section>img.play{display:none;z-index:100;}
#videocontainer section>img.portrait,
#videocontainer section>img.play{display:block;position:absolute;top:0;height:100%;}

#videocontainer nav ul{margin:0;padding:0;}
#videocontainer nav li{display:block;}

.clear:after{
	clear: both;
	content: '.';
	display: block;
	height:0px;
	overflow:hidden;
	visibility:hidden;
	width:0px;
}

/* ------ PLAYER ------ */
.videocontainer .controls,
.videocontainer .playtoggle{bottom:0;height:100%;left:0;position:absolute;width:100%;}
.videocontainer .controls>*{display:block;}
.videocontainer .controls .playtoggle{background-size:100% auto;background:url('../img/play/play-0.png') no-repeat center;content:'';}
.videocontainer.playing .controls .playtoggle{background-image:url('../img/pause/pause-0.png');}
.videocontainer .controls .playtoggle.click{opacity:0;}
.videocontainer .controls .progressbar{background-color:rgba(255,255,255,.5);border-radius:5px;bottom:24px;height:5px;left:5%;position:absolute;width:65%;}
.videocontainer .controls .progressbar .loading{background-color:rgba(255,255,255,.9);border-radius:5px;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:0;}
.videocontainer .controls .progressbar .handle{background-color:rgb(255,255,255);border-radius:7px;border:1px solid #ccc;cursor:pointer;display:block;height:7px;left:0;margin-left:-3px;position:absolute;top:-2px;width:7px;}
.videocontainer .controls .timeleft{bottom:20px;color:rgb(255,255,255);font:bold .7em/1em Helvetica,sans-serif;margin:0;position:absolute;right:5px;text-align:center;}

.videocontainer .controls{opacity:0;}
.videocontainer:hover .controls{opacity:1;}

.videocontainer.playing .controls{
	transition: opacity .5s 1.5s;
	-moz-transition: opacity .5s 1.5s;
	-ms-transition: opacity .3s 1.7s;
	-o-transition: opacity .3s 1.7s;
	-webkit-transition: opacity .3s 1.7s;
}
.videocontainer .controls,
.videocontainer.playing:hover .controls{
	transition: opacity .1s 0s;
	-moz-transition: opacity .1s 0s;
	-ms-transition: opacity .1s 0s;
	-o-transition: opacity .1s 0s;
	-webkit-transition: opacity .1s 0s;
}

.videocontainer.init{ /*opacity:.3;*/ }
.videocontainer.init .controls{display:none;}
.videocontainer .load{background:rgba(0,0,0,.5) url('../img/loader.gif') no-repeat center;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1000;}



/* ------ STYLE ------ */
h2{cursor:pointer;}
p{font-size:1em;font-weight:normal;margin-bottom:1em;margin:0;text-align:left;}
a{color:#000;text-decoration:underline;}
a:hover{text-decoration:none;}

#container>article>section#presentation aside{background-color:#fff; margin-top:-100px;}

#videocontainer section{background-color:#000;}
#videocontainer section img.play{cursor:pointer;opacity:.5;}
#videocontainer section:hover img.play{opacity:1;}

#videocontainer section:nth-child(1)  .playtoggle{background-image:url('../img/play/play-0.png')}
#videocontainer section:nth-child(2)  .playtoggle{background-image:url('../img/play/play-1.png')}
#videocontainer section:nth-child(3)  .playtoggle{background-image:url('../img/play/play-2.png')}
#videocontainer section:nth-child(4)  .playtoggle{background-image:url('../img/play/play-3.png')}
#videocontainer section:nth-child(5)  .playtoggle{background-image:url('../img/play/play-4.png')}
#videocontainer section:nth-child(6)  .playtoggle{background-image:url('../img/play/play-5.png')}
#videocontainer section:nth-child(7)  .playtoggle{background-image:url('../img/play/play-6.png')}
#videocontainer section:nth-child(8)  .playtoggle{background-image:url('../img/play/play-7.png')}
#videocontainer section:nth-child(9)  .playtoggle{background-image:url('../img/play/play-8.png')}
#videocontainer section:nth-child(10) .playtoggle{background-image:url('../img/play/play-9.png')}
#videocontainer section:nth-child(11) .playtoggle{background-image:url('../img/play/play-10.png')}
#videocontainer section:nth-child(12) .playtoggle{background-image:url('../img/play/play-11.png')}
#videocontainer section:nth-child(1) .playing .playtoggle{background-image:url('../img/pause/pause-0.png')}
#videocontainer section:nth-child(2) .playing .playtoggle{background-image:url('../img/pause/pause-1.png')}
#videocontainer section:nth-child(3) .playing .playtoggle{background-image:url('../img/pause/pause-2.png')}
#videocontainer section:nth-child(4) .playing .playtoggle{background-image:url('../img/pause/pause-3.png')}
#videocontainer section:nth-child(5) .playing .playtoggle{background-image:url('../img/pause/pause-4.png')}
#videocontainer section:nth-child(6) .playing .playtoggle{background-image:url('../img/pause/pause-5.png')}
#videocontainer section:nth-child(7) .playing .playtoggle{background-image:url('../img/pause/pause-6.png')}
#videocontainer section:nth-child(8) .playing .playtoggle{background-image:url('../img/pause/pause-7.png')}
#videocontainer section:nth-child(9) .playing .playtoggle{background-image:url('../img/pause/pause-8.png')}
#videocontainer section:nth-child(10) .playing .playtoggle{background-image:url('../img/pause/pause-0.png')}
#videocontainer section:nth-child(11) .playing .playtoggle{background-image:url('../img/pause/pause-0.png')}

object:focus{outline:none;}

#container>article>section footer ul{margin:1em 0;padding:0;}
#container>article>section footer ul li{margin:0;padding:0;list-style:none;}
#container>article>section footer p{margin:1em 0;}
	
/* ------ TYPE ------ */
body{font:.9em/1.3em Courier,Monospace;}

#container>article>section footer{font-size:.8em;}