* {margin: 0;
padding: 0;}

body {width: 100%;
margin: auto;
min-width: 320px;
font: 1em/1.4 "Helvetica Neue", Helvetica;
color: #4c4b4b;
background-color: #fdfdfd;}

#corps {width: 100%;
margin: auto;
margin-bottom: 3em;}

#chemin {width: 90%;
padding: 0.5em 0.7em 0.5em 1em;
margin: auto;
margin-top: 6em;
margin-bottom: 4em;
text-align: left;
font: 1em, Helvetica;
font-weight: 100;
color:#2e2e2e;
background-repeat: repeat-x;
border: 1px solid #dddddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

#chemin a {color: #237b9a;}

.hr {width: 85%;
margin-left: 4.5em;
border: 0 none #c7c2c2;
border-top: 1px solid #ddd;
clear: both;
margin-bottom: 1em;}

.separation
{margin:auto;
margin-top:3.75em;
margin-bottom: 3.75em;
border: 0 none #c7c2c2;
border-top: 1px solid #ddd;
clear: both;
width:300px;}

.separations
{margin:1.9em 2.5em 1.9em 0.6em;
width:200px;
color:#c7c2c2;
float: left;}

/* Menu */

header {margin-top: 0;}

nav {overflow: auto;
background: black;}

#menu ul, #menu li {list-style-type:none;
height: 2.9em;}

#menu li {float:left;
width:14.2%;
text-align:center;}

#menu a {display:block;
text-decoration: none;
font-family: "Helvetica Neue";
font-size: 1.2em;
color:#ffffff;
font-weight: 90;
line-height:200%;
padding-top:0.2em;}

#menu #en-cours {color: #cfcccc;}
	
#menu a:hover {color: #dcd9d9;}

.loupe {width: 16px;
height: 16px;
margin-top: 0.62em;}

#recherche h2 {font: 195%/100% "Helvetica Neue", Helvetica;
text-align: center;
font-size: 1.5em;
margin: 1em 0 1.5em 0;
color: #464646;}

#recherche {width: 85%;
padding-top: 4em;
padding-bottom: 3em;
margin: auto;}

/* Fin menu */

/* Texte */

h1 {font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
margin-top: 2em;
margin-left: 1.8em;
margin-right: 1.8em;
margin-bottom: 1em;
color: #6d6b6b;
font-size: 2.5em;}

h2 {font: 195%/100% "Lucida Grande","Helvetica Neue", Helvetica;
position: relative;
font-size: 1.8em;
margin: 2.8em 1.9em 0.8em 2.4em;
color: #797878;}

h3 {margin: 2.4em 1.8em 1em 3.2em;
color: #b5b1b1;
font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.4em;}

h4, h5 {margin: 1.8em 0 0.9em 3.6em;
color: #3d3c3c;
font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2em;}

p {font: 1.1em/1.4 Helvetica;
text-align: justify;
padding: 0.8em 4em 0 4em;
font-size: 1.1em;
font-weight: 100;
color: #4c4b4b;}

.p-haut {font: 1.1em/1.4 Helvetica;
text-align: justify;
padding: 0.8em 4em 0 4em;
margin-top: 2.5em;
font-size: 1.1em;
font-weight: 100;
color: #4c4b4b;}

.p-centre {text-align: center;
padding: 0.6em 6em 0.6em 6.2em;
font-size: 1.1em;
font-weight: 100;
color: #4c4b4b;}

.p-bas {text-align: justify;
padding: 0.8em 4em 0 4em;
font-size: 1.1em;
font-weight: 100;
color: #4c4b4b;
margin-bottom: 3.5em;}

.p-liens {text-align: justify;
padding: 0 6em 0 5.5em;
font-size: 1.1em;
color: #4c4b4b;
margin-top: 3em;
margin-bottom: 4em;}

#intro {text-align: justify;
padding: 1.25em 4em 4em 4em;
color: #1a7f9d;}

.lettrine {padding-right: 0.1em;
padding-top: 0.15em;
line-height: 0.7em;
color: #a6a2a2;
font-size: 6em;
font-weight: 100;
float: left;
margin-right: 0.1em;
margin-bottom: 0.1em;}

.cadre-milieu {width: 60em;
height: 20em;
margin: auto;
float: center;
font-size: 0.8em;
overflow:scroll;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-top: 4.1em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre-milieu p {text-align: justify;
padding: 0.8em 1em 0.8em 1em;
font-size: 1.1em;
font-weight: 90;
color: #4c4b4b;}

.cadre-dr-lg {width: 25em;
float: right;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 2em;
margin-right: 5.7em;
margin-top: 3.1em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre-dr-lg p {text-align: justify;
padding: 0.8em 1em 0.8em 1em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre-g-lg {width: 25em;
float: left;
overflow:scroll;
height:auto;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 5.5em;
margin-right: 2em;
margin-top: 2.1em;
margin-bottom: 2em;
color: #4c4b4b;}

.cadre-g-lg p {text-align: justify;
padding: 0.8em 1em 0.8em 1em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre-dr {width: 13em;
float: right;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 2em;
margin-right: 5.7em;
margin-top: 1.5em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre-dr p {text-align: justify;
padding: 0.6em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre {width: 15em;
float: left;
overflow:scroll;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: left;
padding: 0.8em 1em 0.8em 1em;
margin-left: 5.5em;
margin-right: 2em;
margin-top: 1.5em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre p {text-align: justify;
padding: 0.6em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre .liste {margin-top: 1em;
margin-left: 2em;
margin-right: 1em;}

.suite {padding: 0 6.2em 0 6.2em;
margin-top: 6.2em;}

.img-suite {width: 6.2em;
height: 2.6em;}

.consigne {text-align: justify;
padding: 0 6.2em 0 6.2em;
font: 0.9em/1.4 Trebuchet, Arial;
color: #4c4b4b;}

#liste {margin-top: 1em;
margin-left: 6.2em;
margin-right: 5em;
font: 1.1em/1.4 Helvetica;
font-weight: 100;
color: #4c4b4b;}

.liste-mots {width: 35em;
margin-left: 7em;
margin-top: 2em;
-moz-column-width: 15em;
-webkit-column-width: 15em;
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;}

.piqures {width: 780px;;
margin: auto;}

.gros {font: bold 1.1em/1.4 Helvetica;
color: #4c4b4b;}

.indent {text-indent: 1.2em;}

.intro, .exemple {margin-left:0.5em;
font-style: italic;}

.exemple {margin:1.9em;
font-style: italic;}

.alinea {margin-left:1.9em;}

.consignes {font-family: "Helvetica Neue", Helvetica;
font-size: 0.9em;
text-align: justify;
margin: 2em 3.1em 2em 3.1em;}

.citation {padding-left: 7em;
margin: 2.5em;
font: 1em/1.4 Helvetica;}

.bordure_2 {width: 85%;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0.3em;
margin: 1.9em 4em 1.9em 4em;
text-align: left;}

.encadre {border: solid;
border-width: 1px;
padding: 0.3em;
margin: 1.9em 5em 1.9em 5em;
text-align: justify;}

.rouge {color: rgb(255, 12, 24);}

.vert {color: rgb(11, 126, 7);}

.bleu {color: #1b79b4;}

.italic {font-style:italic;}

.italicr {color: rgb(255, 12, 24);
font-style:italic;}

.gras {font-weight: bold;}

.souligne {text-decoration: underline;}

.notes {margin-top:3.1em;
margin-left: 1.1em;
font-size:0.9em;}

.point {font-size:0.8em;}

.notes-bas-page {font-size:0.9em;
margin-bottom: 1em;
margin-left: 1.1em;
margin-right: 1.1em;}

.classe {text-align:center;
margin-top:10em;
margin-bottom: 10em;
font-size:0.9em;}

ol {padding: 0 6.25em 0 8.1em;}

.table-matiere ul {padding: 0 5em 0 5em;
list-style:none;}

.table-matiere li {margin-top: 0.4em;
margin-bottom: 0.4em;
list-style:none;}

.table-matiere h2 {margin: 2.1em 3.75em 0.8em 3.7em;
color: #3d3c3c;
font-family:"Helvetica Neue", Helvetica;
font-size: 1.2em;}

#tables-sequences {padding: 0 5em 0 6.5em;}

#tables-sequences li {margin-bottom: 0.6em;}

#tables-sequences ul {margin-bottom: 1.9em;}

.dictee {margin: 1.9em 5.6em 5.6em 6.25em}

.conjugaison {border-collapse: collapse;
margin-top: 1.9em;
margin-bottom: 1.3em;
margin-left: 10em;
width: 43em;}

.conjugaison td, tr {border-collapse: collapse;
text-align: left;
line-height:1.5em;}

.conjugaison th {border-collapse: collapse;
text-align: left;
line-height:1.5em;}

.verbe {border-collapse: collapse; 
font-family: "Helvetica Neue", Helvetica;
width:48em;
margin-top: 6em;
margin-left: 7em}

.verbe td, th {border: 1px solid black;
padding: 0.4em;
text-align: center;}

.numero {width: 0.9em;}

#colonne {
width: 700px;
margin-left: 7em;
-moz-column-width: 20.6em;
-webkit-column-width: 13.1em;
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:0.5em;
-webkit-column-gap:0.5em;
-o-column-gap:0.5em;
column-gap:0.5em;}

.cadrechiffres {margin: 3.1em;
text-align: left;
float: left;
width: 120px;
height: 150px;}

/* Fin texte */

/* Citation */

blockquote {text-align: center;
margin: 2em 7em 2em 7em;
font-size: 1.6em;
font-weight: 100;
line-height: 1.6em;
color: #1a7f9d;
font-family: "Helvetica Neue", Arial, sans-serif;}

.has-pullquote:before {
/* Reset metrics. */
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: right;
width: 14em;
margin: 0.7em 0em 1.8em 2.2em;
/* Baseline correction */
position: relative;
top: 0.3em;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 1.5em;
line-height: 1.6em;
color: #1a7f9d;}

.pullquote-left:before {float: left;
margin: 12px 31px 24px -102px;
width: 14em;}

.pullquote-adelle:before {font-family: "Helvetica Neue", "adelle-1", "adelle-2";
font-weight: 100;
top: 0.62em !important;}

.pullquote-helvetica:before {font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 0.438em !important;}

.pullquote-facit:before {font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 0.438em !important;}

/* Fin citation */

/* Tableau avec trait */

.tabletrait {border-collapse: collapse; 
margin-top: 1.5em;
margin: auto;
width:44em;
margin-top: 2em;
margin-bottom: 2em;}

/* Tableau plus petit que le précédent */
.tabletraitpt {border-collapse: collapse; 
margin-top: 1.5em;
margin: auto;
width:34em;
margin-top: 2em;
margin-bottom: 2em;}

.tabletrait #center
{text-align: center;
font-weight: bold;}

.tabletrait #verb
{font-size: 0.8em;}

.tabletrait td, th
{border: 1px solid black;
padding: 0.4em;}

.tabletraitpt td, th
{border: 1px solid black;
text-align: center;
padding: 0.4em;}

.tabledieu {border-collapse: collapse;
margin: auto;
width:45em;
margin-top: 2em;
margin-bottom: 2em;}

.tabledieu td, th
{border: 1px solid black;
padding: 0.4em;}

.table1 {border-collapse: collapse;
width: 600px;
margin: auto;}

.table2 {border-collapse: collapse;
width: 730px;
margin: auto;
padding: 7px;
line-height: 20px;
text-align: justify;}

/* Fin tableau avec trait*/

/* Menu Dictées */

.ringMenu ul , li {
  margin: 0;
  padding: 0;
}

.ringMenu {
  width: 100px;
  margin: 150px auto;
}

.ringMenu:hover {}

.ringMenu ul {
  list-style: none;
  position: relative;
  width: 100px;
  color: white;
}
.ringMenu ul a {
  color: white;
}
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(97, 95, 95, 0.7);
  text-align: center;
  line-height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.ringMenu ul li a:hover {
  background: #008cb4;
}

.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -102px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -102px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -102px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -102px;
}

/* Fin menu Dictées */

/* Liens */

a {color: #2582a3;
text-decoration: none;
outline: none;}

a:hover, a:active {text-decoration: underline;}

/*Fin liens*/

/* Images */

.ill-droite {float:right;
margin:0.35em 0 0.3em 1em;
border-style: none;}

.illustration {float:left;
margin: 0.4em 0.9em 0 0;
border-style: none;}

.chevalier {float:right;
margin:4em 5em 0.3em 2em;
border-style: solid;
border-width:1.3px;}

.tableaux {text-align: center;
margin-top: 3.3em;
margin-bottom: 2.5em;}

img {border-style: none;}

#image-legende {float: left; width: 50em; margin-left: 20em; margin-top: 1.2em; margin-bottom: 3.9em;}

#legende-image {float: right; margin-right: 25em;}

#legende-image-1 {float: right; margin-right: 18.7em;}

#titre-legende-image{margin-left: 0em;}

.cahier-txt {margin-bottom:1.2em;
margin-top:0.3em;
margin-left:0.6em;}

.alexandria {float:right;
margin:0 4.8em 0.9em 0;}

.imprimer {margin: 3.1em 0.9em -0.9em 0;
width:3.1em;}

.paypal, .skype {margin:3.1em 105px;}

.imgvalid {margin:0 0.3em -0.6em 0;}

.amazon {width:234px;
margin:auto;}

.google {padding: 0 2.5em 0 0.6em;}

.niveau {border-style: none;
margin:0 0.6em -0.3em 0;}

.attention {margin-right:0.6em;}

.liens {float:left;
margin:38px 13px 0.6em 4.4em;}

.note-alexandria {margin-top: 4.4em;
margin-bottom: 5em;}

.nath {text-align: center;}

.bonneannee {margin:auto;width: 800px;height: 400px;margin-bottom: 8em;}

/* Fin images */

/* Images avec légende */
.ill-legende {float:right;
margin-top: 1em;
margin-left: 0.6em;
margin-right: 6em;
border-style: none;}

/* l'image réduite doit être de 250px */
.legende-image {float:right;
width: 18em;
text-align: center;
font-size: 0.8em;
margin-right: -24em;
margin-left: 0.6em;
margin-top: 30em;}

/* l'image doit être placée dans <section> Possibilité d'ajouter une légende. */
.legende-left {float:left;
text-align: center;
font-size: 0.9em;
margin-right: 2.5em;
margin-left: 6em;
margin-top: 1em;
margin-bottom: 2em;}

/* l'image doit être placée dans <section> Possibilité d'ajouter une légende. */
.legende-right {float:right;
text-align: center;
font-size: 0.8em;
margin-right: 7em;
margin-left: 2em;
margin-top: 1.5em;
margin-bottom: 2em;}

/* Images des acteurs du Médecin volant */
.portraitcadre {width: 80%;
min-width: 860px;
margin: auto;
margin-top: 3em;}

.portraitcadre2 {width: 80%;
min-width: 860px;
margin: auto;
margin-top: 5em;
margin-bottom: 55em;}

.portraitcadre3 {width: 80%;
min-width: 860px;
margin: auto;
margin-bottom: 80em;}

.portrait {float: left;
margin-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 1em;}

.legende-medecin {font-size: 0.8em;
text-align: center;}

/* Fin images des acteurs du Médecin volant */

/* Images Commedi dell'arte */

.perso-commedia
{width: 95%;
min-width: 860px;
margin-left: 0em;
-moz-column-width: 6em;
-webkit-column-width: 6em;
-moz-column-count:4;
-webkit-column-count:4;
-o-column-count:4;
column-count:4;
-moz-column-gap:0em;
-webkit-column-gap:0em;
-o-column-gap:0em;
column-gap:0em;}

.perso-commedia-suite
{width: 60%;
margin-left: 0em;
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;
-moz-column-gap:0em;
-webkit-column-gap:0em;
-o-column-gap:0em;
column-gap:0em;}

.perso-commedia-legende
 {font-size: 0.8em;
margin-left: 4em;
text-align: center;}
 
/* Fin images Commedi dell'arte */

/* Fin images */

/* Vidéos */

.video-1280 {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
width:1280px;}

.video-960 {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
width:960px;}

.video-980 {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
width:980px;}

.video-930 {margin:auto;
margin-top: 5em;
margin-bottom: 2.5em;
width:930px;}

.video-853 {margin:auto;
margin-top: 5em;
margin-bottom: 3em;
width:853px;}

.video-manuel {width: 853px;
margin-left: 4.6em;
margin-top: 2.9em;
margin-bottom: 5em;}

.video-640 {margin:auto;
margin-top: 3em;
margin-bottom: 3.5em;
width:640px;}

.video-560 {margin-top:2.5em;
margin:auto;
width:560px;}

.video-480 {margin:auto;
margin-top: 2.5em;
margin-bottom: 2.5em;
width:480px;}

.video-460 {margin:auto;
margin-top: 2.5em;
margin-bottom: 2.5em;
width:460px;}

.video-425 {margin-top: 2.5em;
margin:auto;
width:425px;}

.video-420 {margin-top: 2.5em;
margin-bottom: 2.5em;
margin:auto;
width:420px;}

.video-320 {margin-top: 5em;
margin:auto;
width:320px;}

.video-metaphore {margin-top: 5em;
margin-bottom: 5em;
margin-left: 20em;}

/* Fin vidéos */


/* Audio */

audio {padding-left: 6em;
padding-top: 1.2em;
padding-bottom: 3em;}

.soundclound {padding-left: 6em;
padding-top: 1.2em;
padding-bottom: 3em;}

.audio-cadre {width: 14em;
float: left;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 6.5em;
margin-right: 2em;
margin-top: 1.5em;
margin-bottom: 1em;
color: #4c4b4b;}

/* Fin audio */

/* Dictée*/

#expand {background-color: #EDEDEC;
display: none;
width: 700px;
margin-left: 6.8em;}

#expand div {
padding: 0.6em;
width: 700px;
margin-left: 0.2em;}
                
.expandInfo {background-color: #EDEDEC;
margin: 0;
padding: 0.6em;
width: 680px;
margin-left: 6.2em;
margin-top: 3.75em;}
        
#expand a {color: #2367A1;
text-decoration: none;}
        
/* Fin dictée */


/* Plan du site */

#plan {width: 50em;
margin-left: 7em;
margin-top: 4em;
-moz-column-width: 15.6em;
-webkit-column-width: 15.6em;
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:0.6em;
-webkit-column-gap:0.6em;
-o-column-gap:0.6em;
column-gap:0.6em;}

#plan > h2:first-of-type {font-family: "Helvetica Neue", Helvetica;
text-align: left;
font-size: 1.1em;
margin-left: 0em;
margin-top: 0;
margin-bottom: 0.9em;}

#plan h2 {font-family: "Helvetica Neue", Helvetica;
text-align: left;
font-size: 1.1em;
margin-left: 0em;
margin-bottom: 0.9em;}

#plan li {list-style:none;}

#plan ul {height: 15.6em;}

#plan-hr {width: 45em;
margin-left: 7em;
border: 0 none #c7c2c2;
border-top: 1px solid #c7c2c2;
clear: both;
margin-top: 3em;
margin-bottom: 3em;}

/* Plan du site */

/* Liens */
ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 1em; 'Helvetica';
    padding: 0;
    margin-bottom: 4em;
    margin-top: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    width: 70%;
    margin-left: 5.5em;
}

ol ol {margin: 0; /* Add some left margin for inner lists */}

.rounded-list a{position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #626060;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;}

.rounded-list a:hover{background: #eee;}

.rounded-list a:hover:before{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);}

.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;	
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #49aace;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;}

/* Fin liens */

/* Page consacrée aux manuels */

.illustration-manuel {float:left;
margin-left: 5em;
margin-right: 1em;
border-style: none;}

.sub-font-manuel {font-size:1em; color:#aaa8a8; margin-left: 0.5em;}

.manuel-banniere {margin: auto;
margin-top: 6em;
margin-bottom: 3em;
width:700px;
height:510px;
background-color: #f4f4f4;
-webkit-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.27), 0 0 3.75em rgba(0, 0, 0, 0.1);
-moz-box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.27), 0 0 2.5em rgba(0, 0, 0, 0.06);
box-shadow: 3px 4px 5px rgba(0, 0, 0, 0.27), 0 0 3.75em rgba(0, 0, 0, 0.06);}

.video-manuel-bis {width: 320px;
margin-top: 5em;
margin-bottom: 4em;
margin-left: 6em;}

#sixieme {width: 900px;
min-width: 700px;
margin-bottom: 18em;}

.traduire {color:#aaa8a8;
font-size: 1.1em;
width: 350px;
margin-left: 3em;
float: right;}

.cadre-livres {width: 330px;
float: left;
font:1.2em "Helvetica Neue", Helvetica, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
text-align: left;
padding: 0.7em;
margin-left: 5.5em;
margin-top: 2.3em;
color: #4c4b4b;}

.cadre-manuel p {text-align: left;
padding: 0.6em 0 0 0;
color: #4c4b4b;}

.plan-manuel {width: 50em;
font-size:1em; color:#888686;
margin-top: 3em;
margin-bottom: 5em;
margin-left: 7em;
-moz-column-width: 10em;
-webkit-column-width: 10em;
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:3em;
-webkit-column-gap:3em;
-o-column-gap:3em;
column-gap:3em;}

.liste-manuel {color:#aaa8a8;
margin-top: 1em;
margin-left: 5em;}

.plan-manuel h3 {margin: 1.8em 1.3em 1em -1em;
color: #3d3c3c;
font-family: "Helvetica Neue", Helvetica;
font-size: 1.1em;}

.manuels-droite-gauche {width: 56.250em;
min-width: 320px;
height: 300px;
margin: auto;
margin-top: 0.5em;
margin-bottom: 4em;}

.manuels-droite-gauche p {font:1.2em "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}

.manuels-droite-gauche h3 {font:1.2em "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}

.manuel-gauche {float: left;
width: 410px;
font-size:1em; color:#aaa8a8; margin-left: 0.5em;}

.manuel-droite {float: right;
width: 410px;
font-size:1em; color:#aaa8a8; margin-left: 0.5em;}

.choix-manuels #liste {margin-top: 0;
margin-left: 6.2em;
margin-right: 5em;
font-size: 1.1em;}

.choix-manuels h3 {text-align: left;
	margin-left: 3.2em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-size: 1.4em;}

/* Fin page consacrée aux manuels */

/* Publicité & bannières */

.publicite {text-align:center;
margin:auto;
padding-top: 6em;
padding-bottom: 6em;
margin-top: 6em;}

.publicite1 {text-align:center;
margin:auto;}

.publicite2 {text-align:center;
margin:auto;
margin-top: 2em;
margin-bottom: 3em;}

.banniere {text-align:center;
margin:auto;
margin-top: 5em;
margin-bottom: 2em;}

.publicite-amazon{margin:auto;
width:728px;
margin-top: 140px;
margin-bottom: 140px;}

/* Fin publicité & bannières */

/* Bas de page */

#tweets {width: 55em;
margin-top: 3em;
margin-bottom: 2em;
padding: 0 0 0 4.4em;}

.partager {width: 25%;
float: left;
text-align: left;
padding-top: 1em;
padding-bottom: 1.5em;
margin-top: 5em;
margin-bottom: 4em;
margin-left: 14%;
border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;}

.partager ul {margin-left: 1em;}

.partager li {list-style: none;
margin-left: 1em;
margin-bottom: 0.6em;}

.partager h2 {font: 195%/100% "Helvetica Neue", Helvetica;
position: relative;
font-size: 1.5em;
margin: 0.5em 0 1em 1.3em;
color: #4f4e4e;}

.egalement h2 {font: 195%/100% "Helvetica Neue", Helvetica;
position: relative;
font-size: 1.5em;
margin: 1em 0 1em 1em;
color: #4f4e4e;}

.egalement {border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
width: 45%;
font-size: 1.1em;
text-align: left;
margin-left: 2em;
margin-top: 4.5em;
margin-bottom: 4em;
float: left;}
 
.egalement ul {padding-right: 0.8em;
padding-left: 0.9em;
padding-bottom: 0.8em}

.egalement li {margin: 0.4em 0 0.4em 1.8em;
color: #4c4b4b;
font-family: "Helvetica Neue", Helvetica;
font-size: 0.9em;}

.contact {margin-left: 4em;
margin-bottom: 3em;}

/* Manuel */

#manuel {width:40%;
padding: 0.8em;
margin-top: 5em;
margin-bottom: 4em;
margin-left: 1.8em;
float: left;
text-align: left;
font: 1em/1.2 "Helvetica Neue", Helvetica;
border: 1px solid #ddd;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow: hidden;}

#manuel h2 {font: 195%/100% "Helvetica Neue", Helvetica;
position: relative;
font-size: 1.5em;
margin: 0.5em 0 0.5em 0;
color: #464646;}

#manuel .illustration {float:left;
margin: 0.2em 0.9em 0 0;
border-style: none;}

#manuel p {text-align: justify;
color: #4c4b4b;}

#ibook {margin-top: 1.2em;
margin-bottom: 2.5em;}

.legende {font: 0.8em/1.4 "Helvetica Neue", Helvetica;margin-top: 2em;}

/* Fin manuel */

/* Fin de bas de page */

/* Comments disqus */

#disqus {width: 60%;
padding-left: 6.3em;
padding-top: 10em;
margin-bottom: 6em;}

#disqus h1 {margin: 9.6em 3.8em 2.2em 0;
color: #4f4e4e;
font-family: "Helvetica Neue", Helvetica;
font-size: 2em;}

/* Fin comments disqus */

/* footer */

footer {width: 80%;
font-size: 0.8em;
margin-bottom: 5em;
margin-left: 2em;}

/* Fin du footer */

/* Page exercice Pendu */

#header {margin-top: 4em;
margin-bottom: 1em;}

#nav {list-style: none;
overflow: hidden;
width: 90%;
min-width: 320px;
max-width: 1100px;
background: -webkit-linear-gradient( #555, #686767);
background: -moz-linear-gradient( #555, #686767);
background: -ms-linear-gradient( #555, #686767);
background: -o-linear-gradient( #555, #686767);
background: linear-gradient( #555, #686767);
margin: auto;
margin-bottom: 5em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#footer {width: 80%;
font-size: 0.8em;
margin-bottom: 5em;
margin-left: 5.7em;}

#footer p {padding: 1em 1em 2em 0;}

/* Fin page exercice Pendu */

/* Media queries */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	
	.tableaux img {margin: auto;
	width: 80%;}
	
	.ill-droite {width:40%;}
	
	.illustration {width:40%;}
	
	 .video-manuel iframe {width: 70%;}

	.video-853 iframe {width: 80%;}
    
    .video-640 iframe {width: 85%;margin-left: 2em;}

	.expandInfo {width: 579px;margin-left: 4em;}
	
	#expand {width: 600px;margin-left: 4.4em;}
	
	#expand div {width: 600px;margin-left: 4.4em;}

}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {

	.video-853 iframe {width: 60%;
	margin-left:4em;
	margin-top: 3em;
	margin-bottom: 3em;
    float: left;}

    .video-640 iframe {width: 45%;margin-left: 2em;}
    
    
    .tableaux img {margin: auto;
	width: 70%;}

}


@media screen and (max-width: 640px)
{
	
	#corps {margin-bottom: 1em;}
	
	#menu a {display:block;}

	#menu li {float:none;
	width:100%;}
	
	#menu {clear:both;
	width:100%;
	height: 45px;
	margin-bottom: 0em;}
			
	#chemin {width: 80%;
	margin: auto;
	font-size: 1em;
	padding-right: 0.5em;
	margin-bottom: 3em;
	margin-top: 1em;}
		
	h1 {font-size: 1.9em;
	text-align: left;
	margin-left: 0.9em;
	margin-top: 0.4em;
	margin-bottom: 1.5em;}
	
	h2 {font-size: 1.5em;
	text-align: left;
	margin-left: 1.4em;
	margin-top: 2.1em;
	margin-bottom: 0.8em;}
	
	h3 {text-align: left;
	margin-left: 1.6em;
	margin-top: 1em;
	margin-bottom: 0;
	font-size: 1.4em;}

	.partager {width:65%;
	margin: auto;
	margin-top: 2em;
	margin-left: 4em;
	margin-bottom: 1em;}
	
	.partager h2 {font-size: 1.5em;
	margin: 0.5em 0 1em 1.3em;}
	
	.egalement {width:65%;
	margin-top: 2em;
	margin-left: 3.6em;
	margin-bottom: 2em;}
	
	#manuel h2 {margin: 0.5em 0 0.5em 0;}

	#manuel {width:60%;
	margin: auto;
	margin-top: 2em;
	margin-left: 4em;
	margin-bottom: 2em;}
	
	#ibook {padding-top: 2em;
	padding-left: 0;}
	
	.hr {width: 85%;margin: auto;}
	
	footer {width: 100%;
	margin: auto;
	font-size: 1em;
	margin-bottom: 5em;}
	
	.tableaux img {margin: auto;
	width: 70%;}
	
	.ill-droite {float: none;
	margin: auto;
	margin-top:2em;
	margin-bottom: 3em;
	display: block;
	width:60%;}
	
	.illustration {float: none;
	margin: auto;
	margin-top:2em;
	margin-bottom: 3em;
	display: block;
	width:40%;}
	
	.ill-legende {float:left;
	display: block;
	width: 60%;
	margin-top: 1em;
	margin-left: 2.4em;
	margin-right: 4em;}
	
	.legende-image {float:left;
	width: 60%;
	font-size: 0.8em;
	margin-right: 3em;
	margin-left: 0.9em;
	margin-bottom: 2em;
	margin-top: 2em;}
	
	.tabledieu {width:10em;margin: auto;}
	
	.tabletrait {width:auto;margin: auto; margin-top: 1.5em;margin-left: 3em;margin-right: 2em;}
	
	.tabletrait td, th, tr {font-size: 0.6em;}
	
	.tabletraitpt {width:20em;margin: auto;margin-top: 2em;}
	
	.table1 {width:20em;margin-left: 5em;}
	
	.table2 {width:30em;margin-left: 5em;}
	
	.conjugaison {width:30em;margin-left: 5em;}
	
	.verbe {width:30em;margin-left: 5em;}
	
	.expandInfo {width: 299px;
	margin-left: 2.7em;}
	
	#expand {width: 320px;
	margin-left: 3em;}
	
	#expand div {width: 320px;
	margin-left: 3em;}
	
	#expand p {margin-left: -4em;
	margin-right: 1em;}
    
    .video-1280 iframe {width: 30%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-960 iframe {width: 30%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
     .video-930 iframe {width: 30%;
	margin-left:2.4em;
	margin-top: 0.5em;
	margin-bottom: 3em;
    float: left;}
    
    .video-853 iframe {width: 35%;
	margin-left:2.5em;
	margin-top: 3em;
	margin-bottom: 3em;
    float: left;}
    
    .video-640 iframe {width: 50%;
	margin-left:2em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-560 iframe {width: 70%;
	margin-left:5em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-480 iframe {width: 80%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-460 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-425 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-420 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-320 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-manuel iframe {width: 28%;
	margin-left:0em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-metaphore {float: left;margin-left: 4.7em;width: 60%;}
    
    .cadre-milieu {width: 60em;
	height: 20em;}

	.cadre-dr-lg {width: 20em;margin-bottom: 2em;float: left;margin-left: 3.2em;}

	.cadre-g-lg {width: 20em;margin-left: 3.2em;}

	.cadre-dr {width: 17em;float:left;margin-left: 5em; margin-bottom: 2.2em;margin-top: 2em;margin-right: 2em;}

	.cadre {width: 17em;float: left;margin-left: 3em;margin-bottom: 2em;}
	
	.has-pullquote:before {
	float: left;
	width: 10em;
	margin: 0.7em 0em 1.8em 0.8em;}
	
	blockquote {margin: 2em;}

	.bordure_2 {width: 80%;margin-left: 2em; margin-top: 1em;margin-bottom: 1em;}

	p {padding: 0.8em 2em 0 2em;}

	.p-haut {padding: 0.8em 2em 0 2em;margin-top: 2.5em;}

	.p-centre {padding: 0.6em 4em 0.6em 4.2em;}

	.p-bas {padding: 0.8em 2em 0 2em;
	margin-bottom: 3.5em;}

	.p-liens {padding: 0 4em 0 3.5em;
	margin-top: 3em;
	margin-bottom: 4em;}

	#intro {padding: 1.25em 2.5em 4em 2.5em;}

	.citation {padding-left: 3em;}

	.point {font-size:0.6em;}

	iframe {max-width: 100%;}
    
	.manuels-droite-gauche {width: 100%;}

	.manuel-gauche {float: left;width: 70%;}

	.manuel-droite {float: left;width: 70%;margin-bottom: 6em;}
	
	.liste-manuel {
	margin-top: 0.9em;
	margin-left: 4em;}

	#plan {width: 80%;margin: auto;margin-left: 5em;margin-right: 5em;margin-top: 0em;}

	#plan h2 {margin-top: 0;}

	.manuel-banniere {display: none;}
	
	.publicite {display: none;}

	#disqus h1 {margin: 1em 0em 2.2em -0.25em;}

	#disqus {width: 70%;
	padding-left: 2.5em;}

	.audio-cadre {margin-left: 3.4em;}

	.table-matiere ul {padding: 0 2.5em 0 3.1em;}

	.table-matiere li {margin-top: 0.4em;
	margin-bottom: 0.4em;
	list-style:none;}

	.table-matiere h2 {margin: 2.1em 0.5em 0.8em 1.8em;
	font-size: 1.1em;}

	ol {width: 80%;
    margin: auto;}

	#liste {margin-left: 4em;}

	#tweets {width: 15em;}
	
	audio {padding-left: 4em;}

	.soundclound {padding-left: 4em;}

}