Utilisatrice:Lydie Noria/common.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

/* do-css framework */

/* Bibloc (IE7+) layout for 1 fixed floated block on the left and flexible block (with a context formatting context) on the right 
HTML usage : div.bibloc>div+div or div.bibloc>img+div
mutable*/
.bibloc:before, .bibloc:after { content:""; display:table; } 
.bibloc:after { clear: both; }
.bibloc { *zoom: 1; position:relative; }
.bibloc>* { overflow: hidden; }
.bibloc.no-padding>* { padding-left:0; }
.bibloc>*:first-child { float: left; overflow:visible; padding-left:0; }
.bibloc>*:first-child img { display: block; }

/* Bicol (IE8+) layout for 2 fluids cols with no overflow issue on overlays 
HTML usage : div.bicol>div+div
mutable*/
.bicol { display:table; position:relative; width:100%; table-layout:auto; } 
.bicol>* { display: table-cell; vertical-align: top; width:auto; }
.bicol.right-media>*{ width:3%; padding-right:0; padding-bottom:0; }
.bicol.right-media>*:first-child{ width:auto; }
.bicol>*:first-child { padding-left:0; padding-bottom:0; width:3%; }
.bicol>*:first-child>img { vertical-align:top; }
.bicol.middle>*{ vertical-align:middle; }
.bicol.bottom>*{ vertical-align:bottom; }

/* Linebloc (IE8+) (IE7+ with span childs)
HTML usage : .linebloc>div+div+div or ul.linebloc>li+li+li
mutable*/
.linebloc>* { display: inline-block; vertical-align:baseline; }
.linebloc.top>* { display: inline-block; vertical-align:top; }
.linebloc.middle>*{ vertical-align:middle; }
.linebloc.bottom>*{ vertical-align:bottom; }
.linebloc.middle img, .linebloc.bottom img { display:block; }


/* Tribloc (IE7+)
HTML usage : .tribloc>span.left+div+span.right
mutable*/
.tribloc:before, .tribloc:after { content:""; display:table; } 
.tribloc:after { clear: both; }
.tribloc { *zoom: 1; position:relative; }
.tribloc>* { float:left; width:33%; text-align:center; }
.tribloc>.first { text-align:left;   }
.tribloc>.last { float:right; text-align:right; }

/* Bifloat (IE7+)
HTML usage : .bifloat>div+div
mutable*/
.bifloat:before, .bifloat:after { content:""; display:table; } 
.bifloat:after { clear: both; }
.bifloat { *zoom: 1; position:relative; }
.bifloat>* { float:right; text-align:right; }
.bifloat>*:first-child { float:left; text-align:left;   }

/* Row (IE8+)
HTML usage : div.row>div+div+div...
mutable*/
.row { display:table; table-layout:fixed; width:100%; }
.row>* { display: table-cell; vertical-align: top; }
.row.middle>*, .row>.middle { vertical-align: middle; }
.row.bottom>*, .row>.bottom { vertical-align: bottom; }


/* Tools */
/* use $('.hide-js).hide(); on the domready statement */
.hide-js {  }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden, .no-text span{display:none!important;visibility:hidden;}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden{border:0;clip:rect(0000);height:1px;overflow:hidden;position:absolute;width:1px;margin:-1px;padding:0;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;overflow:visible;position:static;width:auto;margin:0;} 
/* Hide visually and from screenreaders, but maintain layout */
.invisible{visibility:hidden;} 

/* Position, texts and links */
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.clearfix:before, .clearfix:after { content:""; display:table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
span .h1, span .h2, span .h3, span .h4 { display: inline; vertical-align: middle; }
.center { margin-left:auto; margin-right:auto; }
.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.link-right { display:block; text-align:right; }
.img-link { display:inline-block; }
.caps { text-transform:uppercase; }
.block { display:block; }

/* Automatic text cut to prevent text superposition : http://rocssti.nicolas-hoffmann.net/ */
.cut { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; }
.nocut { word-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none; }
/* add ... if too long text-line, must specify a width to this container */
.ellipsis { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis;  text-overflow: ellipsis; }

/* -----------------------------------------
   Dimensions tools
----------------------------------------- */

/* percent width
mutable */
.w-5  { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33.33333%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-67 { width: 66.66667%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }

/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
1,2,3,4,5,6,7,0 = xsmall, small, medium, large, xlarge and more or zero(0)
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
mutable
*/
.ma0 { margin: 0; }
.pa0 { padding: 0; }
.ma1 { margin: 5px; }
.ma2 { margin: 10px; }
.ma3 { margin: 15px; }
.ma4 { margin: 20px; }
.ma5 { margin: 30px; }
.ma6 { margin: 50px; }
.ma7 { margin: 80px; }
.pa1 { padding: 5px; }
.pa2 { padding: 10px; }
.pa3 { padding: 15px; }
.pa4 { padding: 20px; }
.pa5 { padding: 30px; }
.pa6 { padding: 50px; }
.pa7 { padding: 80px; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: 5px; }
.mt2 { margin-top: 10px; }
.mt3 { margin-top: 15px; }
.mt4 { margin-top: 20px; }
.mt5 { margin-top: 30px; }
.mt6 { margin-top: 50px; }
.mt7 { margin-top: 80px; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 5px; }
.mr2 { margin-right: 10px; }
.mr3 { margin-right: 15px; }
.mr4 { margin-right: 20px; }
.mr5 { margin-right: 30px; }
.mr6 { margin-right: 50px; }
.mr7 { margin-right: 80px; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: 5px; }
.mb2 { margin-bottom: 10px; }
.mb3 { margin-bottom: 15px; }
.mb4 { margin-bottom: 20px; }
.mb5 { margin-bottom: 30px; }
.mb6 { margin-bottom: 50px; }
.mb7 { margin-bottom: 80px; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 5px; }
.ml2 { margin-left: 10px; }
.ml3 { margin-left: 15px; }
.ml4 { margin-left: 20px; }
.ml5 { margin-left: 30px; }
.ml6 { margin-left: 50px; }
.ml7 { margin-left: 80px; }
.pt0 { padding-top: 0; }
.pt1 { padding-top: 5px; }
.pt2 { padding-top: 10px; }
.pt3 { padding-top: 15px; }
.pt4 { padding-top: 20px; }
.pt5 { padding-top: 30px; }
.pt6 { padding-top: 50px; }
.pt7 { padding-top: 80px; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 5px; }
.pr2 { padding-right: 10px; }
.pr3 { padding-right: 15px; }
.pr4 { padding-right: 20px; }
.pr5 { padding-right: 30px; }
.pr6 { padding-right: 50px; }
.pr7 { padding-right: 80px; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 5px; }
.pb2 { padding-bottom: 10px; }
.pb3 { padding-bottom: 15px; }
.pb4 { padding-bottom: 20px; }
.pb5 { padding-bottom: 30px; }
.pb6 { padding-bottom: 50px; }
.pb7 { padding-bottom: 80px; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 5px; }
.pl2 { padding-left: 10px; }
.pl3 { padding-left: 15px; }
.pl4 { padding-left: 20px; }
.pl5 { padding-left: 30px; }
.pl6 { padding-left: 50px; }
.pl7 { padding-left: 80px; }

/* Offset
mutable */
.offset-1 { margin-left: 8.33333%; }
.offset-2 { margin-left: 16.66667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.33333%; }
.offset-5 { margin-left: 41.66667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.33333%; }
.offset-8 { margin-left: 66.66667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.33333%; }
.offset-11 { margin-left: 91.66667%; }



/*------------------------------------------ 
	> 1280px
-------------------------------------------*/
@media only screen and (min-width:79.938em) {
	.hide-xl-gt { display:none; }
		
}


/*------------------------------------------ 
	lg devices <= 1279px
-------------------------------------------*/
@media only screen and (max-width:79.938em) {
	.hide-lg { display:none; }
	.hide-lg { display:none; }
	/* use .mutate-lg to linearise and reset spacing under lg width */
	.bicol.mutate-lg{display:block;}.bifloat.mutate-lg>*,.tribloc.mutate-lg>*,.tribloc.mutate-lg>.first,.tribloc.mutate-lg>.last{float:none;text-align:left;width:auto;}.bloc.mutate-lg>*,.bibloc.mutate-lg>*,.linebloc.mutate-lg>*{padding-left:0;float:none;display:block;overflow:visible;}.bloc.mutate-lg .left,.bloc.mutate-lg .right{width:100%;margin-left:0;margin-right:0;}.bicol.mutate-lg>*{width:100%;display:block;padding:0;text-align:left;vertical-align:top;}.bibloc.mutate-lg>img:first-child,.bicol.mutate-lg>*>img:first-child{width:100%;height:auto;}.grid.mutate-lg>*{float:none;width:auto;}.row.mutate-lg,.row.mutate-lg>*{display:block;width:auto;}.table.mutate-lg td{display:block;width:auto;}.ma1.mutate-lg,.ma2.mutate-lg,.ma3.mutate-lg,.ma4.mutate-lg,.ma5.mutate-lg,.ma6.mutate-lg,.ma7.mutate-lg{margin:0;}.pa1.mutate-lg,.pa2.mutate-lg,.pa3.mutate-lg,.pa4.mutate-lg,.pa5.mutate-lg,.pa6.mutate-lg,.pa7.mutate-lg{padding:0;}.mt1.mutate-lg,.mt2.mutate-lg,.mt3.mutate-lg,.mt4.mutate-lg,.mt5.mutate-lg,.mt6.mutate-lg,.mt7.mutate-lg{margin-top:0;}.mr1.mutate-lg,.mr2.mutate-lg,.mr3.mutate-lg,.mr4.mutate-lg,.mr5.mutate-lg,.mr6.mutate-lg,.mr7.mutate-lg{margin-right:0;}.mb1.mutate-lg,.mb2.mutate-lg,.mb3.mutate-lg,.mb4.mutate-lg,.mb5.mutate-lg,.mb6.mutate-lg,.mb7.mutate-lg{margin-bottom:0;}.ml1.mutate-lg,.ml2.mutate-lg,.ml3.mutate-lg,.ml4.mutate-lg,.ml5.mutate-lg,.ml6.mutate-lg,.ml7.mutate-lg{margin-left:0;}.pt1.mutate-lg,.pt2.mutate-lg,.pt3.mutate-lg,.pt4.mutate-lg,.pt5.mutate-lg,.pt6.mutate-lg,.pt7.mutate-lg{padding-top:0;}.pr1.mutate-lg,.pr2.mutate-lg,.pr3.mutate-lg,.pr4.mutate-lg,.pr5.mutate-lg,.pr6.mutate-lg,.pr7.mutate-lg{padding-right:0;}.pb1.mutate-lg,.pb2.mutate-lg,.pb3.mutate-lg,.pb4.mutate-lg,.pb5.mutate-lg,.pb6.mutate-lg,.pb7.mutate-lg{padding-bottom:0;}.pl1.mutate-lg,.pl2.mutate-lg,.pl3.mutate-lg,.pl4.mutate-lg,.pl5.mutate-lg,.pl6.mutate-lg,.pl7.mutate-lg{padding-left:0;}.w-5.mutate-lg,.w-10.mutate-lg,.w-15.mutate-lg,.w-20.mutate-lg,.w-25.mutate-lg,.w-30.mutate-lg,.w-33.mutate-lg,.w-35.mutate-lg,.w-40.mutate-lg,.w-45.mutate-lg,.w-50.mutate-lg,.w-55.mutate-lg,.w-60.mutate-lg,.w-65.mutate-lg,.w-67.mutate-lg,.w-70.mutate-lg,.w-75.mutate-lg,.w-80.mutate-lg,.w-85.mutate-lg,.w-90.mutate-lg,.w-95.mutate-lg,.w-100.mutate-lg{width:100%;}.offset-1.mutate-lg,.offset-2.mutate-lg,.offset-3.mutate-lg,.offset-4.mutate-lg,.offset-5.mutate-lg,.offset-6.mutate-lg,.offset-7.mutate-lg,.offset-8.mutate-lg,.offset-9.mutate-lg,.offset-10.mutate-lg,.offset-11.mutate-lg{margin-left:0;}
}

/*------------------------------------------ 
	> 1024px
-------------------------------------------*/
@media only screen and (min-width:63.938em) {
	.hide-md-gt { display:none; }
}

/*------------------------------------------ 
	md devices  <= 1023px
-------------------------------------------*/
@media only screen and (max-width:63.938em) {

	.hide-md { display:none; }
	/* use .mutate-md to linearise and reset spacing under md width */
	.bicol.mutate-md{display:block;}.bifloat.mutate-md>*,.tribloc.mutate-md>*,.tribloc.mutate-md>.first,.tribloc.mutate-md>.last{float:none;text-align:left;width:auto;}.bloc.mutate-md>*,.bibloc.mutate-md>*,.linebloc.mutate-md>*{padding-left:0;float:none;display:block;overflow:visible;}.bloc.mutate-md .left,.bloc.mutate-md .right{width:100%;margin-left:0;margin-right:0;}.bicol.mutate-md>*{width:100%;display:block;padding:0;text-align:left;vertical-align:top;}.bibloc.mutate-md>img:first-child,.bicol.mutate-md>*>img:first-child{width:100%;height:auto;}.grid.mutate-md>*{float:none;width:auto;}.row.mutate-md,.row.mutate-md>*{display:block;width:auto;}.table.mutate-md td{display:block;width:auto;}.ma1.mutate-md,.ma2.mutate-md,.ma3.mutate-md,.ma4.mutate-md,.ma5.mutate-md,.ma6.mutate-md,.ma7.mutate-md{margin:0;}.pa1.mutate-md,.pa2.mutate-md,.pa3.mutate-md,.pa4.mutate-md,.pa5.mutate-md,.pa6.mutate-md,.pa7.mutate-md{padding:0;}.mt1.mutate-md,.mt2.mutate-md,.mt3.mutate-md,.mt4.mutate-md,.mt5.mutate-md,.mt6.mutate-md,.mt7.mutate-md{margin-top:0;}.mr1.mutate-md,.mr2.mutate-md,.mr3.mutate-md,.mr4.mutate-md,.mr5.mutate-md,.mr6.mutate-md,.mr7.mutate-md{margin-right:0;}.mb1.mutate-md,.mb2.mutate-md,.mb3.mutate-md,.mb4.mutate-md,.mb5.mutate-md,.mb6.mutate-md,.mb7.mutate-md{margin-bottom:0;}.ml1.mutate-md,.ml2.mutate-md,.ml3.mutate-md,.ml4.mutate-md,.ml5.mutate-md,.ml6.mutate-md,.ml7.mutate-md{margin-left:0;}.pt1.mutate-md,.pt2.mutate-md,.pt3.mutate-md,.pt4.mutate-md,.pt5.mutate-md,.pt6.mutate-md,.pt7.mutate-md{padding-top:0;}.pr1.mutate-md,.pr2.mutate-md,.pr3.mutate-md,.pr4.mutate-md,.pr5.mutate-md,.pr6.mutate-md,.pr7.mutate-md{padding-right:0;}.pb1.mutate-md,.pb2.mutate-md,.pb3.mutate-md,.pb4.mutate-md,.pb5.mutate-md,.pb6.mutate-md,.pb7.mutate-md{padding-bottom:0;}.pl1.mutate-md,.pl2.mutate-md,.pl3.mutate-md,.pl4.mutate-md,.pl5.mutate-md,.pl6.mutate-md,.pl7.mutate-md{padding-left:0;}.w-5.mutate-md,.w-10.mutate-md,.w-15.mutate-md,.w-20.mutate-md,.w-25.mutate-md,.w-30.mutate-md,.w-33.mutate-md,.w-35.mutate-md,.w-40.mutate-md,.w-45.mutate-md,.w-50.mutate-md,.w-55.mutate-md,.w-60.mutate-md,.w-65.mutate-md,.w-67.mutate-md,.w-70.mutate-md,.w-75.mutate-md,.w-80.mutate-md,.w-85.mutate-md,.w-90.mutate-md,.w-95.mutate-md,.w-100.mutate-md{width:100%;}.offset-1.mutate-md,.offset-2.mutate-md,.offset-3.mutate-md,.offset-4.mutate-md,.offset-5.mutate-md,.offset-6.mutate-md,.offset-7.mutate-md,.offset-8.mutate-md,.offset-9.mutate-md,.offset-10.mutate-md,.offset-11.mutate-md{margin-left:0;}
	
	/* end do-css md devices */
	
}



/*------------------------------------------ 
	> 768px
-------------------------------------------*/ 
@media only screen and (min-width:47.938em) {
	.hide-sm-gt { display:none; }
}

/*------------------------------------------ 
	sm devices / mutate breakpoint <= 767px
-------------------------------------------*/ 
@media only screen and (max-width:47.938em) {
	.hide-sm { display:none; }
	/* main breakpoint : use .mutate to linearise and reset spacing under sm width */
	.bicol.mutate{display:block;}.bifloat.mutate>*,.tribloc.mutate>*,.tribloc.mutate>.first,.tribloc.mutate>.last{float:none;text-align:left;width:auto;}.bloc.mutate>*,.bibloc.mutate>*,.linebloc.mutate>*{padding-left:0;float:none;display:block;overflow:visible;}.bloc.mutate .left,.bloc.mutate .right{width:100%;margin-left:0;margin-right:0;}.bicol.mutate>*{width:100%;display:block;padding:0;text-align:left;vertical-align:top;}.bibloc.mutate>img:first-child,.bicol.mutate>*>img:first-child{width:100%;height:auto;}.grid.mutate>*{float:none;width:auto;}.row.mutate,.row.mutate>*{display:block;width:auto;}.table.mutate td{display:block;width:auto;}.ma1.mutate,.ma2.mutate,.ma3.mutate,.ma4.mutate,.ma5.mutate,.ma6.mutate,.ma7.mutate{margin:0;}.pa1.mutate,.pa2.mutate,.pa3.mutate,.pa4.mutate,.pa5.mutate,.pa6.mutate,.pa7.mutate{padding:0;}.mt1.mutate,.mt2.mutate,.mt3.mutate,.mt4.mutate,.mt5.mutate,.mt6.mutate,.mt7.mutate{margin-top:0;}.mr1.mutate,.mr2.mutate,.mr3.mutate,.mr4.mutate,.mr5.mutate,.mr6.mutate,.mr7.mutate{margin-right:0;}.mb1.mutate,.mb2.mutate,.mb3.mutate,.mb4.mutate,.mb5.mutate,.mb6.mutate,.mb7.mutate{margin-bottom:0;}.ml1.mutate,.ml2.mutate,.ml3.mutate,.ml4.mutate,.ml5.mutate,.ml6.mutate,.ml7.mutate{margin-left:0;}.pt1.mutate,.pt2.mutate,.pt3.mutate,.pt4.mutate,.pt5.mutate,.pt6.mutate,.pt7.mutate{padding-top:0;}.pr1.mutate,.pr2.mutate,.pr3.mutate,.pr4.mutate,.pr5.mutate,.pr6.mutate,.pr7.mutate{padding-right:0;}.pb1.mutate,.pb2.mutate,.pb3.mutate,.pb4.mutate,.pb5.mutate,.pb6.mutate,.pb7.mutate{padding-bottom:0;}.pl1.mutate,.pl2.mutate,.pl3.mutate,.pl4.mutate,.pl5.mutate,.pl6.mutate,.pl7.mutate{padding-left:0;}.w-5.mutate,.w-10.mutate,.w-15.mutate,.w-20.mutate,.w-25.mutate,.w-30.mutate,.w-33.mutate,.w-35.mutate,.w-40.mutate,.w-45.mutate,.w-50.mutate,.w-55.mutate,.w-60.mutate,.w-65.mutate,.w-67.mutate,.w-70.mutate,.w-75.mutate,.w-80.mutate,.w-85.mutate,.w-90.mutate,.w-95.mutate,.w-100.mutate{width:100%;}.offset-1.mutate,.offset-2.mutate,.offset-3.mutate,.offset-4.mutate,.offset-5.mutate,.offset-6.mutate,.offset-7.mutate,.offset-8.mutate,.offset-9.mutate,.offset-10.mutate,.offset-11.mutate{margin-left:0;}
	
	/* end do-css sm devices */

}

/* end do-css framework */


/* main sprite */
.btn-pic a:before,
.skip-links a:before,
.link-pic a:before,
.link-pic-after a:after,
.nav-item-lesson.bases a,
.nav-item-lesson.activity a,
.nav-item-lesson.evaluation a,
.nav-item-lesson.bases a:before,
.nav-item-lesson.activity a:before,
.nav-item-lesson.evaluation a:before,
.nav-item-lesson.bases strong,
.nav-item-lesson.activity strong,
.nav-item-lesson.evaluation strong,
.nav-item-lesson.bases strong:before,
.nav-item-lesson.activity strong:before,
.nav-item-lesson.evaluation strong:before,
.sprite {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/27/Pictogrammes_sprite_cours.png);
    background-repeat: no-repeat;
    -moz-background-size:400px 800px;
    -o-background-size:400px 800px;
    -webkit-background-size:400px 800px;
    background-size:400px 800px;
}

/* base button */
.btn {
    padding: 0;
    display: inline-block;
    margin: 0 1em 1em 0;
}
.btn-pic a {
    position: relative;
    display: block;
    padding: .6em 1.2em .6em 42px;
    border-radius: 2px;
    background-color: #0077BE;
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    line-height: 1.2;
    font-weight: bold;
}
.btn-pic a:focus,
.btn-pic a:hover {
    background-color: #022E78;
    border-radius: 2px;
}
.btn-pic a:before,
.link-pic a:before,
.link-pic-after a:after {
    content:' ';
    display: block;
    position: absolute;
    left: .9em;
    top: .8em;
    width: 32px;
    height: 32px;
}
.link-pic-after a:after {
    left: auto;
    right: .9em;
}

/* download buttons */
.btn-pic.pic-download {
    width: 12em;
}
.mw-body .btn-pic.pic-download a {
    color: #fff !important;
}
.btn-pic.pic-download a:before{
    background-position: 0 -150px;
}
.mw-body .btn-pic.pic-download .external {
    background-image: none;
}

/* info and community buttons */
.btn-pic.btn-pic-sb a {
    border: #585858 solid 1px;
    background-color: #fff;
    color: #585858;
    font-style: italic;
}
.btn-pic.btn-pic-sb a:focus,
.btn-pic.btn-pic-sb a:hover{
    background-color: #585858;
    border: #585858 solid 1px;
    color: #fff;
}
.btn-pic.btn-pic-sb a {
    padding-left: 65px;   
}
.btn-pic.btn-pic-sb a:before {
    width: 55px;
}
.btn-pic.pic-info a:before {
    background-position: 0 -250px;
}
.btn-pic.pic-contrib a:before {
    background-position: 0 -300px;
}
.btn-pic.pic-info a:hover:before {
    background-position: -100px -250px;
}
.btn-pic.pic-contrib a:hover:before {
    background-position: -100px -300px;
}

/* links effects */
.my-layout a,
.my-layout a:focus,
.my-layout a:hover,
input[type="submit"],
input[type="submit"]:hover {
    transition: all 0.35s ease;
}

/* video align */
.mediaContainer {
    margin: 0 auto !important;
}

/* paging nav */
.my-tools-2 { max-width: 210px; }
.my-nav-sep { 
    width: 1px;
    height: 54px; 
    background-color: #0076BC;   
}
.link-pic a,
.link-pic-after a{
    color: #0076BC;   
}
.link-pic-after,
.link-pic {
    position: relative;
    text-align: left;
    padding-left: 42px;
    font-size: 1em;
    text-decoration: none;
}
.link-pic-after.pic-prev a:after{
    background-position: -100px -150px;
}
.link-pic.pic-next a:before{
    background-position: -200px -150px;
}
.link-pic-after.pic-prev a:focus:after,
.link-pic-after.pic-prev a:hover:after{
    background-position: -150px -150px;
}
.link-pic.pic-next a:hover:before{
    background-position: -250px -150px;
}
.link-pic-after {
    text-align: right;
    padding-left:0;
    padding-right: 42px;
}
.link-pic a:before,
.link-pic-after a:after {
    top: 13px;
}
.link-pic a:before {
    left: 1.25em;
    width: 20px;  
}
.link-pic-after a:after {
    right: .8em;
    width: 20px; 
}
.link.pic-prev a:focus,
.link.pic-prev a:hover,
.link.pic-next a:focus,
.link.pic-next a:hover {
    color: #022E78;
    text-decoration: none;
}

/* fonts */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body-content  { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

/* headings */
.mw-body h1 a img { opacity: .65; }
.mw-body h1.firstHeading { 
    padding: .8em 1.2em 1em;
    margin-bottom: .5em;
    text-align: center;
    border: 1px solid #848484;
    color: #4E4E44;
    font-size: 1.5em;
}
.mw-body h1.secondHeading { 
    margin-top: 0;
    border: none;
    padding: 0;
    text-align: center;
    color: #898685;
    font-size: 2.25em;
}

/* layout */
.my-layout:before,
.my-layout:after { content:""; display:table; } 
.my-layout:after { clear: both; }
.my-layout { 
    *zoom: 1;
    position: relative;
    padding-top: 1em;
}
.my-layout > .my-sb {
    float: left;
}
.my-layout > .my-main {
    overflow: hidden;
}

.my-breadcrumb {
    font-size: .875em;
    margin-bottom: .8em;
}
.my-breadcrumb strong {
    color: #CF3B39;
}
.my-sb,
.my-sb-nav {
    width: 300px;
}
.my-main-content {
    border: #848484 solid 1px;
    padding: 1.5em 1em 0 1em;
    background-color: #F8F8F8;
}
.my-main-content-header {
    border: #E1E1E2 solid 1px;
    margin-bottom: 1em;
    padding: 1.5em 1.5em 0;
    min-width: 260px;
    position: relative;
}

.my-main-content-header .my-title-wrap {
    position: absolute;
    top: -1em;
    left:0;
    width: 100%;
    text-align: center;
}
.my-main-content-header h2 {  
    display: inline;
    background-color: #F8F8F8;
    padding: 0 2em;
    border: none !important;
    margin-top: -1.8em !important;
    text-transform: uppercase;
    color: #0077BE;
    font-size: 1.375em;
}

.pic-feature,
.my-feature { 
    display: inline-block;
    vertical-align: top;
    font-size: .75em;
}
.my-feature strong {
    font-style: italic;
    text-decoration: underline;
}
.my-feature {
    padding-bottom: 1.5em;
    padding-right: .8em;
}

.pic-feature {
    width: 58px;
    height: 50px;
}
.pic-feature.pic-prerequis {
    background-position: -100px 0;   
}
.pic-feature.pic-objectif {
    background-position: -175px 0;   
}
.pic-feature.pic-competence {
    background-position: -250px 0;   
}
.pic-feature.pic-duree {
    background-position: -325px 0;   
}
.my-lesson {
    margin-bottom: 1em;
    border: #E1E1E2 solid 1px;
    border-top: #898685 solid 1px;
    border-bottom: #898685 solid 1px;
    background-color: #fff;    
}
.mw-body .my-lesson-header h3 {
    margin: 0;
    padding: .5em .8em;
    font-size: 2em;
    text-transform: uppercase;
    color: #585858;
    border-bottom: #E1E1E2 solid 1px;  
}
.my-lesson-content {    
    padding: 1em 2em;
}
.my-lesson-content input[type="submit"] {
    background-color: #0077BE;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: .5em 2em;
    font-weight: bold;
    font-size: 1em;
}
.my-lesson-content input[type="submit"]:hover {
    background-color: #022E78;
}
/* mw video player */
#mwe_player_0 {
    margin: 0 auto !important;   
}

.my-main-more {
    margin: .5em 0 1.5em 1em;   
}
.external-links {
    min-width: 260px;   
}
.external-links strong {
   font-size: 1.2em;
}
.pic-more.sprite {
    margin-top: 5px;
    width: 36px;
    height: 32px;
    background-position: 0 -200px;
}


/* skip links, more links */
.skip-links {
    font-size: .875em;
}
.external-links {
    font-size: .875em;
}
.skip-links a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.skip-links a:before {
    content:' ';
    position: relative;
    display: inline-block;
    margin-left: 1em;
    width: 16px;
    height: 14px;
    background-position: -300px -160px;
}
.skip-links a:first-child:before {
    margin-left: 0;
}
.skip-links a:hover:before {
    background-position: -350px -160px;
}

/* accordion */
.my-sb-nav {
    border: 1px solid #848484;
}
.expandable {
    display: block;
    width: 36px;
    height: 45px;
}
.expandable > div{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* buttons +/- */
.closed > .nav-item .btn-closed,
.expandable[aria-expanded] > .btn-closed { display: block; }
.closed > .nav-item .btn-open,
.expandable[aria-expanded] >  .btn-open { display: none; }
.open > .nav-item .btn-closed { display: none; }
.open > .nav-item .btn-open { display: block; }

.expandable { 
    cursor: pointer;
}
.closed > .nav-item > .expandable { 
    background-position: -40px -332px;
}
.open > .nav-item > .expandable { 
    background-position: -40px -382px;  
}
.lesson.closed > .nav-item > .expandable { 
    background-position: 10px -332px;
}
.lesson.open > .nav-item > .expandable { 
    background-position: 10px -382px;
    
}
.closed > .nav-item-content { display: none; }
.nav-item.nav-item-header.active a,
.nav-item.nav-item-header.active strong {
    background-color: #D03C3A !important;
}
.nav-item { position: relative; }
.nav-item > a,
.nav-item > strong {
    border-top: 1px solid #848484;
    display: block;
    padding: .9em;
    font-weight: bold;
    text-decoration: none;
}
.folder > .nav-item > a,
.folder > .nav-item > strong {
    padding-right: 42px;
    background-color: #585858;
    color: #fff;
}
.folder:first-child > .nav-item > a,
.folder:first-child > .nav-item > strong {
    border-top: none;
}
.lesson > .nav-item > a,
.lesson > .nav-item > strong {
    padding-right: 42px;
    background-color: #A7A7A7;
    color: #323232;
}
.nav-item-lesson a,
.nav-item-lesson strong {
    position: relative;
    padding-left: 42px;
    color: #605F5E;
    background-color: #fff !important;
}
.nav-item-lesson.activity a,
.nav-item-lesson.activity strong {
    background-position: -105px -350px; 
}
.nav-item-lesson.bases a,
.nav-item-lesson.bases strong {
    background-position: -105px -470px; 
}
.nav-item-lesson.evaluation a,
.nav-item-lesson.evaluation strong {
    background-position: -105px -500px; 
}
.nav-item-lesson a:before,
.nav-item-lesson strong:before{
    content: ' ';
    display: block;
    position: absolute;
    top: 12.5px;
    left: 7px;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #fff;
    border: #595959 solid 1px;
}
.nav-item-lesson.bases a:before,
.nav-item-lesson.bases strong:before {
    background-position: 8px -44.5px;
}
.nav-item-lesson.activity a:before,
.nav-item-lesson.activity strong:before{
    background-position: 5px -71px;
}
.nav-item-lesson.evaluation a:before,
.nav-item-lesson.evaluation strong:before{
    background-position: 5.5px -95.5px;
}

.mw-body .nav-item-lesson.active a,
.mw-body .nav-item-lesson.active strong,
.mw-body .nav-item-lesson a:focus,
.mw-body .nav-item-lesson a:hover {
    background-color: #D03C3A !important;
    color: #fff !important;
}
.mw-body .nav-item-lesson.active a:before,
.mw-body .nav-item-lesson.active strong:before,
.mw-body .nav-item-lesson a:focus:before,
.mw-body .nav-item-lesson a:hover:before{
    border: #fff solid 1px;
}

.mw-body .nav-item-lesson.bases.active a:before,
.mw-body .nav-item-lesson.bases.active strong:before,
.mw-body .nav-item-lesson.bases a:focus:before,
.mw-body .nav-item-lesson.bases a:hover:before{
    background-position: -42px -44.5px;
}
.mw-body .nav-item-lesson.activity.active a:before,
.mw-body .nav-item-lesson.activity.active strong:before,
.mw-body .nav-item-lesson.activity a:focus:before,
.mw-body .nav-item-lesson.activity a:hover:before{
    background-position: -45px -71px;
}
.mw-body .nav-item-lesson.evaluation.active a:before,
.mw-body .nav-item-lesson.evaluation.active strong:before,
.mw-body .nav-item-lesson.evaluation a:focus:before,
.mw-body .nav-item-lesson.evaluation a:hover:before{
    background-position: -44.5px -95.5px;
}

.nav-item .expandable {
    position: absolute;
    right: 0;
    top: 0;
}

/* transcript container */


.transcript-container {    
    height: auto;
    margin: 0;
    overflow: visible;
    width: auto;
    margin-bottom: 1em;
    padding: 1.5em 1em;
    border: #848484 solid 1px;
    background-color: #fefefe;
    
}

.transcript-container.start {   
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
}

/*------------------------------------------ 
	specific xl devices > 1280px
-------------------------------------------*/
@media only screen and (min-width:79.938em) {
    
	.my-sb-nav {
        margin-bottom: 1em;
        /*border-right: none;*/
        /*margin-right: -1px;*/
    }	
}


/*------------------------------------------ 
	specific lg devices <= 1279px
-------------------------------------------*/
@media only screen and (max-width:79.938em) {

}


/*------------------------------------------ 
	specific md devices  >= 1024px
-------------------------------------------*/
@media only screen and (min-width:64em) {
    .my-layout {
        margin-top: 1em;
        min-width: 1185px;
    }
}

/*------------------------------------------ 
	specific md devices  <= 1023px
-------------------------------------------*/
@media only screen and (max-width:63.938em) {
    
    .mw-body h1.secondHeading {
        text-align: left;   
    }
    .my-feature {
        padding-bottom: 1.5em;
    }
    /* layout */
    
    .my-layout > .my-sb {
        float: none;
    }
    .my-layout > .my-main {
        overflow: visible;
    }
    .my-sb {
        width: auto;
        max-width: none;
    }
    .my-sb-nav {
        margin-bottom: 1em;   
    }
    .my-sb-nav,
    .my-sb-more {
        display: inline-block;
        vertical-align: top;
    }
    .my-sb-more {
        width: 300px;
        padding: 0 1em 1em;
        
    }
}

/*------------------------------------------ 
	specific mobile styles => 767px
-------------------------------------------*/ 
@media only screen and (min-width:47.938em) {
    .my-feature {
        min-width: 10em;
        max-width: 15em;
    }
    .my-feature.last {
        min-width: 7em;
    }
    
}

/*------------------------------------------ 
	specific mobile styles <= 767px
-------------------------------------------*/ 
@media only screen and (max-width:47.938em) {

    .my-main-content-header .my-title-wrap {
        position: relative;
        text-align: left;
    }
}