/* font-face */
/*************/

@font-face {
    font-family: 'antoniolight';
    src: url('../fonts/antonio-light-webfont.eot');
    src: url('../fonts/antonio-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/antonio-light-webfont.woff') format('woff'),
         url('../fonts/antonio-light-webfont.ttf') format('truetype'),
         url('../fonts/antonio-light-webfont.svg#antoniolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'antonioregular';
    src: url('../fonts/antonio-regular-webfont.eot');
    src: url('../fonts/antonio-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/antonio-regular-webfont.woff') format('woff'),
         url('../fonts/antonio-regular-webfont.ttf') format('truetype'),
         url('../fonts/antonio-regular-webfont.svg#antonioregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* font-sizing */
/***************/

/* base font-size corresponds to 10px and is adapted to rem unit */
html {
	font-size: 62.5%;
}
body {
	background-color: #363434;
	color: #bcb2b2;
	font-family: "Helvetica Neue", helvetica, arial, sans-serif;
	font-size: 1.4em; /* equiv 14px */
	line-height: 1.5; /* adapt to your design */
}

/* font-sizing for content */
/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
textarea,
caption,
details, 
figure {
	font-size: 1em; /* equiv 14px */
	font-weight: normal;
	line-height: 1.5;
	margin: 1.5em 0;
}
label { margin: 0;}
h1, .h1-like{
    font-size:  1.7143em; /* equiv 24px */
    line-height: 1.75em;
    margin: .875em 0 0 0;
}
h2, .h2-like{
    font-size:  1.5714em; /* equiv 22px */
    line-height: 1.909em;
    margin: .9545em 0 0 0;
}
h3, .h3-like{
    font-size:  1.4286em; /* equiv 20px */
    line-height:  1.05em;
    margin:  1.05em 0 0 0;
}
h4, .h4-like{
    font-size:  1.2857em; /* equiv 18px */
    line-height:  1.1667em;
    margin:  1.1667em 0 0 0;
}
h5, .h5-like{
    font-size:  1.1429em; /* equiv 16px */
    line-height:  1.3125em;
    margin:  1.3125em 0 0 0;
}
h6, .h6-like{
    font-size:  1em; /* equiv 14px */
    line-height:  1.5em;
    margin:  1.5em 0 0 0;
}

/* alternate font-sizing in rem */
.smaller {
	font-size: 10px; /* for IE8 */
    font-size: 1rem; /* equiv 10px */
    line-height:  2.1rem;
}
.small {
	font-size: 12px; /* for IE8 */
    font-size: 1.2rem; /* equiv 11px */
    line-height:  1.75rem;
}
.regular {
	font-size: 14px; /* for IE8 */
	font-size: 1.4rem; /* equiv 12px */
}

.big{
	font-size: 16px; /* for IE8 */
    font-size:  1.6rem; /* equiv 14px */
    line-height:  1.3125rem;
}
.bigger{
	font-size: 18px; /* for IE8 */
    font-size:  1.8rem; /* equiv 16px */
    line-height:  1.1667rem;
}
.biggest{
	font-size: 20px; /* for IE8 */
    font-size:  2rem; /* equiv 18px */
    line-height:  1.05rem;
}

/** videos associees **/
.relatedVideoDescription {
	font-size: 0.75em;
	line-height: 1.2em;
}

/* layout */
/**********/

:focus {
outline: none;
}

/*** structure principale ***/
#header > .inner,
#page,
#footer {
	clear: both;
	margin: 0 auto;
	position: relative;
	width: 960px;
}

#header {
	height: 3em;
	position: fixed; top: 0;
	left: 0; right: 0;
	/*width: 100%;*/
	z-index: 1000;
	
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
		  	transition: all .2s;
}

#page {
	padding-top: 4em; /* #header height + margin */
}

#footer { padding-top: 1px; } /* prevent margin-collapse */
#footer > .inner {
	border-top: 1px solid;
	margin-top: 2em;
	padding: 1px 0 1em;
}

/*** classes recurrentes ***/
.bouton,
.boutonPrincipal {
	border: 1px solid;
	display: inline-block;
	height: 2em;
	line-height: 2em;
	min-width: 120px;
	padding: 0 10px;
	text-align: center;
	text-decoration: none;
}

.inlineList > * {
	float: left;
}

.inlineList > * + *:before {
	content: '\2022';
	padding: 0 5px;
}

/*** header ***/
#header {
	border-bottom: 3px solid;
}

.headerNavSection {
	float: right;
	line-height: 3em;
	margin-right: 1em;
}
.right .headerNavSection {
	float: left;
	line-height: 3em;
	margin-right: 0;
	margin-left: 1em;
}

.headerNavLink {
	display: block;
}

/*** page ***/
/** Navigation interne **/
.pageNav {
	margin-left: -110px; /* pageNav width + marge */
	position: fixed; top: 10em;
	width: 100px;
}

.pageNavSection {
	margin-bottom: 0.25em;
}

.pageNavLink {
	display: block;
	padding: 3px 6px 3px 0;
	text-decoration: none;
}

/** Video principale **/
.mainVideoBox {
	margin-bottom: 2em;
	overflow: hidden;
}
.mainVideoBox#section1 {
	overflow: inherit;
}
#section2 {
	margin-bottom: 2em;
	background: #fff;
	padding: 20px 30px;
	color: #222;
}

.mainVideoRating {
	clear: both;
}

.mainVideoComment {
	margin-bottom: 2em;
}

/** commentaires **/
.commentContent {
	padding: 10px;
}

.commentInfo {
	margin-top: .5em;
}

/** Videos associees **/
.ongletsSidebarBox {
	border-bottom: 2px solid;
	margin-bottom: 0;
}

.ongletSidebarSection {
	float: left;
	margin-right: 0.5em;
}

.ongletSidebarLink {
	border: 1px solid;
	border-width: 1px 1px 0 1px;
	display: block;
	padding: 3px 8px;
}

.videoFullWidth #v20 {
	width: 960px;
	height: 666px;
}
.relatedVideosBox {
	position: absolute; right: 0; top: 4em; overflow: hidden;
	z-index: 10;
}
.videoFullWidth .relatedVideosBox {
	position: static; right: 0; top: 0;
	float: right;
	z-index: 10;
}

.relatedVideosList {
	margin-top: 0;
}

.relatedVideo {
	border-bottom: 1px dashed;
	clear: both;
	overflow: hidden;
}

.relatedVideoLink {
	display: block;
	overflow: hidden;
	padding: 10px 0;
	text-decoration: none;
}

.relatedVideoName,
.relatedVideoDescription {
	margin-left: 90px;
	display: block;
}

.relatedVideoImg {
	float: left;
}

#historiqueVideos {
	display: none;
}

.relatedVideosBox {
    -webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
		  	transition: all .2s;
}

.mainVideo { width: 639px; height: 443px; }

.videoFullWidth .mainVideo { width: 960px; height: 680px; }
.videoFullWidth #section1 {	width: 960px; }

.mainVideo,
.videoFullWidth .mainVideo,
#section1,
.videoFullWidth #section1 {
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
	     -o-transition: all .2s;
	        transition: all .2s;
}


/*** sidebar ***/
/***************/

.slidingPanelBox {
    display: block;
    height: 100%;
    overflow-y: auto;
    padding: 20px 30px 10px 20px;
    position: fixed;
    left: -300px;
    top: 0;
    width: 300px;
    z-index: 0;
    -webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
		  	transition: all .2s;	
}
.slidingPanelBox_displayed {
	left: 0;
    -webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
		  	transition: all .2s;	
}

.slidingPanelBox h2 {
	line-height: 1.25em;
}

.slidingPanelBox h3 {
	margin-top: 0.5em;
}

#page_wrapper {
	background-color: #363434;
	overflow: hidden;
    -webkit-transition: all .2s;
	   -moz-transition: all .2s;
		-ms-transition: all .2s;
		 -o-transition: all .2s;
		  	transition: all .2s;
}

/*
#page_wrapper.side-menu { 
 	-webkit-transform: translate3d(-300px, 0, 0); 
 	   -moz-transform: translate3d(-300px, 0, 0); 
 	   	-ms-transform: translate3d(-300px, 0, 0); 
 	   	 -o-transform: translate3d(-300px, 0, 0);
 	   	    transform: translate3d(-300px, 0, 0); 
}
*/
/*
#page_wrapper.side-menu { 
	-webkit-transform: translate(-300px,0); 
	   -moz-transform: translate(-300px,0);
	 	 -o-transform: translate(-300px,0);
		    transform: translate(-300px,0);
}
*/
#page_wrapper.side-menu {
	margin-left: 300px;
}
#page_wrapper.side-menu #header { 
	left: 300px;
}


.sidebar_btn {position: absolute; right: -150px; top: 5em; }

.blocListBox {
	border-top: 1px solid;
	margin-top: 5px;
}

.blocListSection {
	border-bottom: 1px solid;
}
.blocListLink {
	display: block;
	padding: 5px 0;
}

/*** styles ***/
/**************/
a { color: #1e75c6;}
a:hover { color: #1087f7;}

h1, .h1-like,
h2, .h2-like,
h3, .h3-like,
.relatedVideoName,
.ongletSidebarLink {
	font-family: 'antoniolight', 'helvetica', 'arial', sans-serif;
}

h1, .h1-like,
h2, .h2-like,
.ongletSidebarLink {
	text-transform: uppercase;
}

h1,
h3 {
	color: #eb9c2b;
}

h2 {
	color: #eb852b;
}

input[type=text],
textarea {
	background: #e4dfdf;
}

#header {
	background: #000;
	border-color: #706969;
}

.bouton, .bouton:hover,
.boutonPrincipal, .boutonPrincipal:hover {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.bouton, .bouton:hover {
	color: #fff;
}

.boutonPrincipal, .boutonPrincipal:hover {
	background: #17c1fb; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3YzFmYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwODRmZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #17c1fb 0%, #084ff3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17c1fb), color-stop(100%,#084ff3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #17c1fb 0%,#084ff3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #17c1fb 0%,#084ff3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #17c1fb 0%,#084ff3 100%); /* IE10+ */
background: linear-gradient(to bottom,  #17c1fb 0%,#084ff3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17c1fb', endColorstr='#084ff3',GradientType=0 ); /* IE6-8 */
	border-color: #e7e6e6;
	color: #272525;
}

.ongletsSidebarBox {
	border-color: #1e75c6;
}

.ongletSidebarLink {
	border-color: #1e75c6;
	text-decoration: none;
}

.bouton, .bouton:hover,
.ongletSidebarSection.ui-state-active .ongletSidebarLink,
.pageNavSection.active .pageNavLink {
	background: #1e75c6;
	color: #e4dfdf;
}


.inlineList > * + *:before {
	color: #645d5d;
}

.commentContent {
	background: #4a4545;
}

#footer > .inner,
.relatedVideosBox,
.relatedVideo { border-color: #645d5d;}

.relatedVideoDescription {
	color: #bcb2b2;
}

.slidingPanelBox {
	background-color: #cdcbcb;
	border-left: 1px solid #959494;
	/*
	-webkit-box-shadow: inset 5px 0px 8px 0px rgba(60, 60, 60, 0.6);
	box-shadow: inset 5px 0px 8px 0px rgba(60, 60, 60, 0.6);
	*/
	-webkit-box-shadow: inset -15px 0 18px 0 rgba(60, 60, 60, 0.6);
	box-shadow: inset -15px 0 18px 0 rgba(60, 60, 60, 0.6);
	color: #373434;
}

.blocListBox,
.blocListSection { border-color: #b0afaf;}

.blocListLink { text-decoration: none;}


.categ_princ {}
.categ_princ .relatedVideosList,
.search_results .relatedVideosList {
	overflow: hidden;
}
.categ_princ .relatedVideo,
.search_results .relatedVideo {
	clear: none;
}
.categ_princ .relatedVideoLink,
.search_results .relatedVideoLink {
	height: 80px;
}




/******* (Historique)Affichage des rectangles vert ou rouge en fonction des partie vu d'un tuto *******/
.depublish {
	text-decoration:line-through;
}

.debut_fin_vid {
	margin: 1px;
	width: 6px;
	height: 14px;
	display: inline-block;
}

.rect_milieu {
	margin: 1px;
	width: 12px;
	height: 8px; 
	display: inline-block;
}

.part_non_vu {
	background-color: red; 
}

.first_time {
	background-color: #98fb98;
}

.second_time {
	background-color: #3cb371; 
}

.third_time {
	background-color: #2e8b57;
}

.percent {
	margin-left: 10%;
}


/** 03/09/2019 Fomg : mise ç jour des styles **/
.boutonPrincipal, button, input, select {
    font-family: "Helvetica Neue", helvetica, arial, sans-serif; 
}

.boutonPrincipal {
    background: #1e75c6; color: #e4dfdf;
}
.bouton, .bouton:hover, .boutonPrincipal, .boutonPrincipal:hover {
    border-radius: 0; border: none; 
}

#header { background-color: #363434; }
#page_wrapper {
    background-color:#f1f1f1; 
}

.slidingPanelBox {
    background-color:#F1F1F1; 
}
.slidingPanelBox .inner h2 { margin-bottom: 30px; }
.slidingPanelBox .inner h3 { margin-bottom: 5px; }
.slidingPanelBox .inner h3 + ul { margin : 0 0 20px; }
.blocListBox li {
    margin: 0 0 5px 20px; line-height: 1.3;
}
.blocListBox, .blocListSection {
    border: none; 
}

#videosAssociees {
    background:#FFF; 
}

#videosAssociees .relatedVideo {
    padding-left: 10px; 
}