User:Cned-PA/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; } }

/*-- 	> 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 */ .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; }

/* 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-breadcrumb { font-size: .75em; margin-bottom: .8em; } .my-breadcrumb strong { color: #CF3B39; } .my-sb { max-width: 300px; } .my-main-content { border: #848484 solid 1px; padding: 1.5em 1em 1em; background-color: #F8F8F8; } .my-main-content-header { min-width: 260px; position: relative; border: #E1E1E2 solid 1px; padding: 1.5em 1.5em 0; }

.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; }   margin: 0 auto !important; }
 * 1) mwe_player_0 {

/* accordion */ .accordion { } .accordion .btn { display: block; cursor: pointer; } .collapsible h2 { position: relative; margin:1em 0 0 0; } .collapsible:first-child h2 { margin-top:0; } .collapsible a { display: block; position: relative; padding:.3em .6em; border-radius: .5em; background-color:#e5e5e5; color:#333; } .collapsible a:hover { background-color: #f1f1f1; transition: background-color .3s ease; } .collapsible.closed a:after { content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAjElEQVRYw+2OMQ5AQBAAp+It4gfCZxVa4lWipachkRMWt3eanWS73Z0BwzAM40wJZAH+5kAhLVXADAzKETkwApMU0QDLNloRu3z/W98tp0CvGOHKWyCRjrQiPsm1IrzkvhEq8q8RqvK3EUHkTyOCyqWIKPKrCHeCyqWIKPKriKhyN6L7Q36MSDEMw4MVZQha9M7YH/YAAAAASUVORK5CYII="); position: absolute; right:.6em; top:.35em; } .collapsible.open a:after { content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAiElEQVRYw+2OOwqAMBAF0+lNxBP4Oa+FteKVxFY8gG5hQBZiNNlNmjfwugczxgAA4ihpRU75QptzRFj5eW9KGcHlSSNc8iQRXL7SKlpN27QjXHKLaoRPrhrxVa4S8VcuGhEqF4mIlUdFSMmDI0ZBuStieDv3tENQziN2Wus7d8LyZ0RjAAAAMC5pKVr3RWqXewAAAABJRU5ErkJggg=="); position: absolute; right:.6em; top:.35em; }

.collapsible .exp-content { margin: 1.5em 1em; } /* on ne masque que ce qui est en aria-hidden, compatible dès ie8 */ .exp-content[aria-hidden] { display: none; }

/*-- 	specific > 1280px ---*/ @media only screen and (min-width:79.938em) { }

/*-- 	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; }

}

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

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

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