BODY, HTML { margin: 0; padding: 0; width: 100%; height: 100%; position: relative; }

#videocccc *:focus { outline: 0; }
#videocccc.center { position: absolute; top: 20px; left: 50%; font-family: Arial; overflow: hidden; background: #000; }

#videocccc > .intro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background: #E9E9EA; }
#videocccc > .intro .top { position: absolute; top: 30%; width: 100%; }
#videocccc > .intro .center { position: relative; max-width: 770px; text-align: center; margin: auto; }
#videocccc > .intro .title { color: #F5451D; z-index: 2; position: absolute; bottom: -70px; left: 0; font-size: 42px; font-weight: bold; padding: 10px 20px; background: #FFF; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; }
#videocccc > .intro .button { cursor: pointer; z-index: 1; position: absolute; top: 55px; right: 0; color: #FFF; text-transform: uppercase; font-size: 26px; padding: 20px 10px 5px 10px; border: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
    background: #f9cd2c;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZX");
    background: -moz-linear-gradient(top, #f9cd2c 0%, #f7ab27 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9cd2c), color-stop(100%,#f7ab27));
    background: -webkit-linear-gradient(top, #f9cd2c 0%,#f7ab27 100%);
    background: -o-linear-gradient(top, #f9cd2c 0%,#f7ab27 100%);
    background: -ms-linear-gradient(top, #f9cd2c 0%,#f7ab27 100%);
    background: linear-gradient(to bottom, #f9cd2c 0%,#f7ab27 100%);
}
#videocccc > .intro .button .chevron { display: inline-block; background: url(../images/chevron.png) no-repeat center; width: 14px; height: 19px; margin-right: 7px; }
#videocccc > .intro .button:hover { padding-right: 12px; }
#videocccc > .intro .button:hover .chevron { margin-left: 3px; margin-right: 2px; }
#videocccc > .intro .logo { position: absolute; bottom: 20px; left: 50%; margin-left: -50px; }

#videocccc > video { position: absolute; top: 0; left: 0; }

#videocccc > .title { position: absolute; top: 0; left: 0; background: rgba(48, 48, 48, 0.3); color: #FFF; padding: 5px 20px; font-size: 26px; text-transform: uppercase; }

#videocccc > .chapters { position: absolute; z-index: 10; width: 235px; background: #FFF; padding: 10px 20px 20px 10px; bottom: -56px; left: 14px; -webkit-border-top-left-radius: 12px; -webkit-border-top-right-radius: 12px; -moz-border-radius-topleft: 12px; -moz-border-radius-topright: 12px; border-top-left-radius: 12px; border-top-right-radius: 12px; }
#videocccc > .chapters > .title { color: #DF5239; font-weight: bold; font-size: 18px; text-transform: uppercase; margin-bottom: 5px; }
#videocccc > .chapters > ul,
#videocccc > .chapters > ul li { list-style: none; margin: 0; padding: 0; }
#videocccc > .chapters > ul li { border-top: 1px solid #CCCCCC; font-size: 12px; font-weight: bold; }
#videocccc > .chapters > ul li:first-child { border: 0; }
#videocccc > .chapters > ul li button { border: 0; background: none; font-size: 12px; font-weight: bold; width: 100%; text-align: left; color: #666666; padding: 5px 0; cursor: pointer; }
#videocccc > .chapters > ul li:hover button { text-indent: 1px; color: #DF5239; }

#videocccc > .mask { display: none; z-index: 5; background: rgba(255, 255, 255, 0.6); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#videocccc > .mask .glossaire { display: none; padding: 20px; background: #FFF; position: absolute; top: 50%; left: 50%; width: 680px; height: 360px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 0px 0px 10px 0px #656565; -webkit-box-shadow: 0px 0px 10px 0px #656565; -o-box-shadow: 0px 0px 10px 0px #656565; box-shadow: 0px 0px 10px 0px #656565; }
#videocccc > .mask .glossaire > .title { color: #DF5239; font-weight: bold; font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
#videocccc > .mask .glossaire > ul { list-style: none; width: 32%; margin: 0 20px 0 0; padding: 0; float: left; }
#videocccc > .mask .glossaire > ul > li { list-style: none; margin: 0; padding: 3px 0; text-align: right; color: #CCC; font-weight: bold; font-size: 14px; cursor: pointer; }
#videocccc > .mask .glossaire > ul > li.selected { color: #000; }
#videocccc > .mask .glossaire > .content { }
#videocccc > .mask .glossaire h2 { color: #DF5239; font-weight: bold; font-size: 20px; margin: 0 0 5px 0; }
#videocccc > .mask .glossaire .text { color: #999; font-size: 17px; }
#videocccc > .mask .glossaire .close { position: absolute; top: 10px; right: 10px; height: 17px; width: 17px; cursor: pointer; background: url(../images/bt-close.png) no-repeat center; }
#videocccc > .mask .glossaire .close:hover { background: url(../images/bt-close-hover.png) no-repeat center; }

#videocccc > .mask .credits { display: none; padding: 20px; background: #FFF; position: absolute; top: 50%; left: 50%; width: 570px; height: 226px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 0px 0px 10px 0px #656565; -webkit-box-shadow: 0px 0px 10px 0px #656565; -o-box-shadow: 0px 0px 10px 0px #656565; box-shadow: 0px 0px 10px 0px #656565; }
#videocccc > .mask .credits > .title { color: #DF5239; font-weight: bold; font-size: 18px; text-transform: uppercase; margin-bottom: 10px; }
#videocccc > .mask .credits > .left { color: #4D4D4C; font-size: 16px; float: left; margin-left: 30px; margin-top: 20px; }
#videocccc > .mask .credits > .left img { margin-top: 10px; }
#videocccc > .mask .credits > .cea { margin-left: 0; }
#videocccc > .mask .credits > .cccc { border-right: 1px solid #CCCCCC; padding-right: 30px; }
#videocccc > .mask .credits .close { position: absolute; top: 10px; right: 10px; height: 17px; width: 17px; cursor: pointer; background: url(../images/bt-close.png) no-repeat center; }
#videocccc > .mask .credits .close:hover { background: url(../images/bt-close-hover.png) no-repeat center; }

#videocccc .controls { position: absolute; bottom: 0; left: 0; width: 100%; height: 36px; background: #FFF; }
#videocccc .controls button { border: 0; background: #FFF; height: 28px; border: 0; cursor: pointer; }
#videocccc .controls .bar { position: absolute; bottom: 30px; left: 0; width: 100%; height: 6px; cursor: pointer; background: #E6E6E6; }
#videocccc .controls .bar .buffer { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #CCCCCC; }
#videocccc .controls .bar .progress { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #F5451D; }
#videocccc .controls .bar .separator { position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #FFF; }
#videocccc .controls .control { z-index: 2; position: absolute; bottom: 0; padding: 0; width: 37px; border-left: 1px solid #AEADAE; text-indent: -999px; overflow: hidden; }
#videocccc .controls .control.prev { right: 74px; background: url(../images/prev.png) no-repeat center; border-right: 1px solid #AEADAE; }
#videocccc .controls .control.prev:hover { background: url(../images/prev-hover.png) no-repeat center; }
#videocccc .controls .control.play-pause { right: 37px; border-left: 0; }
#videocccc .controls .control.play-pause.play { background: url(../images/pause.png) no-repeat center; }
#videocccc .controls .control.play-pause.play:hover { background: url(../images/pause-hover.png) no-repeat center; }
#videocccc .controls .control.play-pause.pause { background: url(../images/play.png) no-repeat center; }
#videocccc .controls .control.play-pause.pause:hover { background: url(../images/play-hover.png) no-repeat center; }
#videocccc .controls .control.next { right: 0; background: url(../images/next.png) no-repeat center; }
#videocccc .controls .control.next:hover { background: url(../images/next-hover.png) no-repeat center; }
#videocccc .controls .control.rewind { right: 0; background: url(../images/rewind.png) no-repeat center; display: none; }
#videocccc .controls .control.rewind:hover { background: url(../images/rewind-hover.png) no-repeat center; }

#videocccc .controls .chapters { z-index: 2; color: #DF5239; font-weight: bold; font-size: 18px; padding: 0 10px; text-transform: uppercase; position: absolute; bottom: 0; left: 10px; }
#videocccc .controls .middle { z-index: 1; text-align: center; width: 100%; position: absolute; bottom: 0; left: 0; height: 28px; }
#videocccc .controls .middle > button { border-left: 1px solid #AEADAE; color: #9F9F9F; font-size: 12px; padding: 0 10px; text-transform: uppercase; font-weight: bold; }
#videocccc .controls .middle > button:hover { color: #666666; margin-bottom: 1px; height: 27px; }
#videocccc .controls .middle > button.glossaire { border: 0; }

#videocccc .floating { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#videocccc .floating > div { display: none; position: absolute; /*border: 1px solid #000;*/ cursor: pointer; }

#videocccc .subtitles { display: none; position: absolute; bottom: 45px; left: 0; width: 100%; text-align: center; }
#videocccc .subtitles .text { display: inline-block; color: #000; font-weight: bold; font-size: 16px; max-width: 94%; }
#videocccc .subtitles .text > div { display: none; background: rgba(255, 255, 255, 0.68); padding: 5px 10px; }
#videocccc .subtitles .text .glossary { cursor: pointer; text-decoration: underline; padding-right: 12px; background: url(../images/link-glossary.png) no-repeat center right; }
#videocccc .subtitles .text sub { line-height: 0; }
#videocccc .subtitles .text sup { line-height: 0; font-size: 11px; bottom: -2px; position: relative; }