@charset "utf-8";
/* CSS Document */
body {
background-color:#e2e3e3;
margin:0px 0px 0px 0px;
width:100%;
}
.bouton {
font:bold 18px Verdana;
width: 122px;
border: solid 1px;
border-color:#969696;
border-radius:12px 0 12px 0;
background: #fff;
color:#000;
padding:5px 10px 5px 10px;
box-shadow:1px 1px 3px #999;
-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;
}
.bouton:hover {
cursor: pointer;
font:bold 18px Verdana;
width: 122px;
border: solid 1px;
border-color:#323232;
border-radius:12px 0 12px 0;
background: #95c7d1;
color:#000;
padding:5px 10px 5px 10px;
box-shadow:1px 1px 3px #999;
}
h1 {
font-family:verdana, sans-serif;
font-size:125%;
font-weight:bolder;
color:#AE0000;
border-bottom:0px solid transparent;
background-color:transparent;
margin-bottom:6px;
text-align:left;
}
h2 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
}
h3 {
font-family:verdana, sans-serif;
font-size:140%;
color:black;
background-color:transparent;
text-align:left;
}
h4 {
font-family:verdana, sans-serif;
font-size:125%;
font-weight:bolder;
color:#999999;
background-color:transparent;
text-align:left;
}
h4.puces {
font-size:100%;
display: list-item;
list-style-image: url(ico-valider-p.png);
list-style-position: inside;
}
h5 {
font-family:verdana, sans-serif;
font-size:13pt;
font-weight:bold;
color:#5f939e;
border-bottom:0px solid transparent;
background-color:transparent;
margin-top:0px;
margin-bottom:5px;
text-align:left;
}
/*
@-webkit-keyframes h6 {
    from {background-color: #cdedca;}
    to {background-color: #8f0d13;}
	from {color: #000000;}
	to {color:#ffffff;} 
}
@keyframes h6 {
    from {background-color: #cdedca;}
    to {background-color: #8f0d13;}
	from {color: #000000;}
	to {color:#ffffff;}
}
h6 { 
animation-name: h6;
-webkit-animation-name: h6;
-moz-animation-name: h6;
-o-animation-name: h6;
animation-duration: 2.2s;
-webkit-animation-duration: 2.2s;
-moz-animation-duration: 2.2s;
-o-animation-duration: 2.2s;
animation-iteration-count: 5;
-webkit-animation-iteration-count: 5;
-moz-animation-iteration-count: 5;
-o-animation-iteration-count: 5;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
height: inherit;
line-height: 1.5em;
font-family:verdana, sans-serif;
font-size:16pt;
font-weight:bold;
color:black;
border-bottom:0px solid transparent;
border-radius: 8px;
background-color: #cdedca;
padding: 15px;
background-position: inherit;
margin-top:0px;
margin-bottom: 5px;
text-align: justify;
}
*/
/*The animation code*/ 
@-webkit-keyframes h6 {
    from {background-color: #cdedca;}
    to {background-color: #8f0d13;}
	from {color: #000000;}
	to {color:#ffffff;} 
}
@-moz-keyframes h6 {
    from {background-color: #cdedca;}
    to {background-color: #8f0d13;}
	from {color: #000000;}
	to {color:#ffffff;} 
}
@-o-keyframes h6 {
    from {background-color: #cdedca;}
    to {background-color: #8f0d13;}
	from {color: #000000;}
	to {color:#ffffff;} 
}
@keyframes h6 {
    from {background-color: #cdedca;}
    to {background-color: #8f0d13;}
	from {color: #000000;}
	to {color:#ffffff;}
}
/***********************************/
@-webkit-keyframes td {
    from {background-color: transparent;}
    to {background-color: #bcbcbc;}
	from {color: #000000;}
	to {color:#000000;} 
}
@-moz-keyframes td {
    from {background-color: transparent;}
    to {background-color: #bcbcbc;}
	from {color: #000000;}
	to {color:#000000;} 
}
@-o-keyframes td {
    from {background-color: transparent;}
    to {background-color: #bcbcbc;}
	from {color: #000000;}
	to {color:#000000;} 
}
@keyframes td {
    from {background-color: transparent;}
    to {background-color: #bcbcbc;}
	from {color: #000000;}
	to {color:#000000;}
}
h6 { 
animation-name: h6;
-webkit-animation-name: h6;
-moz-animation-name: h6;
-o-animation-name: h6;
animation-duration: 2.2s;
-webkit-animation-duration: 2.2s;
-moz-animation-duration: 2.2s;
-o-animation-duration: 2.2s;
animation-iteration-count: 5;
-webkit-animation-iteration-count: 5;
-moz-animation-iteration-count: 5;
-o-animation-iteration-count: 5;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
height: inherit;
line-height: 1.5em;
font-family:verdana, sans-serif;
font-size:16pt;
font-weight:bold;
color:black;
border-bottom:0px solid transparent;
border-radius: 8px;
background-color: #cdedca;
padding: 15px;
background-position: inherit;
margin-top:0px;
margin-bottom: 5px;
text-align: justify;
}
.fb-page.fb_iframe_widget{box-shadow: 0px 0px 5px rgba(0,0,0,.5); border-radius:5px}
.fb-page.fb_iframe_widget iframe{border-radius:5px
}
div.outer {
background: url(fond_header.png);
}
div.header {
position: inherit;
margin: 0 auto;
width: 924px; 
height:124px;
background: url(logo_macorrection.png);
background-repeat: no-repeat;
}
div.blocgauche {
    float: left;
    width: 225px;
	margin-left: 5px; 
    margin-right: 5px;
	margin-bottom: 25px;
	padding-left: 8px;
	padding-bottom: 10px;
    background: white;
	}
div.titregauche {
    float: left;
    width: 225px;
	margin-left: 5px; 
    margin-right: 5px;
	padding-left: 8px;
    background: #BEB2B2;
	}
div.blocdroit {
    float: right;
    width: 225px;
	margin-left:  5px;
	margin-right: 5px;
	margin-bottom: 25px;
	padding-left: 8px;
	padding-bottom: 10px;
    background: white;
	}
div.titredroit {
    float: right;
    width: 225px;
	margin-left: 5px; 
    margin-right: 5px;
	padding-left: 8px;
    background: #BEB2B2;
	}
p {
font-family:verdana, sans-serif;
font-size:80%;
color:black;
background-color:transparent;
margin-left:0px;
margin-right:0px;
line-height:18px
}
p.space_bottom {
font-family:verdana, sans-serif;
font-size:80%;
color:black;
background-color:transparent;
margin-left:0px;
margin-right:0px;
margin-bottom:20px;
line-height:18px
}
p.separations {
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
text-align:justify;
line-height:22px;
border-bottom:1px solid black;
font-family:verdana, sans-serif;
font-size:125%;
font-weight:bold;
background-color:white;
}
p.encarts {
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
text-align:justify;
color:#666666;
line-height: 28px;
font-family:verdana, sans-serif;
font-size:100%;
font-weight:normal;
background-color:#dfdfdf;
}
p.soustitre { 
font-size: 14px;
color: #000000;
padding-top:0px;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
text-align:justify;
font-family:verdana, sans-serif;
background-color: transparent;
}
.retrait {
margin-left:200px;
}
li.titres {
font-family:verdana, sans-serif;
font-size:80%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:none;
}
a:visited {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:none;
}
a:hover {
font-family:verdana, sans-serif;
font-size:100%;
color:red;
background-color:transparent;
text-decoration:underline;
}
/*a.accueil {
background:url('bouton_accueil_hover.png') no-repeat;
width: 72px;
height: 31px;
display:block;
}*/
a.accueilcn {
background:url('bouton_accueil_hover_cn.png') no-repeat;
width: 72px;
height: 31px;
display:block;
}
/*a.tarification {
background:url('bouton_tarification_hover.png') no-repeat;
width: 113px;
height: 31px;
display:block;
}*/
a.tarificationcn {
background:url('bouton_tarification_hover_cn.png') no-repeat;
width: 113px;
height: 31px;
display:block;
}
/*a.commande {
background:url('bouton_commande_hover.png') no-repeat;
width: 155px;
height: 31px;
display:block;
}*/
a.commandecn {
background:url('bouton_commande_hover_cn.png') no-repeat;
width: 155px;
height: 31px;
display:block;
}
a.fr {
background:url('traduction-francais-hoover.png') no-repeat;
width: 22px;
height: 16px;
display:block;
}
a.cn {
background:url('traduction-chinois-hoover.png') no-repeat;
width: 22px;
height: 16px;
display:block;
}
a.fb {
background:url('reseaux_sociaux_facebook_hover.png') no-repeat;
width: 35px;
height: 34px;
display:block;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
}
a.twitter {
background:url('reseaux_sociaux_twitter_hover.png') no-repeat;
width: 35px;
height: 34px;
display:block;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
}
/*a.accueil:hover {
background-position: bottom center;
}*/
a.accueilcn:hover {
background-position: bottom center;
}
/*a.tarification:hover {
background-position: bottom center;
}*/
a.tarificationcn:hover {
background-position: bottom center;
}
/*a.commande:hover {
background-position: bottom center;
}*/
a.commandecn:hover {
background-position: bottom center;
}
/*a.commande:hover {
background-position: bottom center;
}*/
a.fr:hover {
background-position: bottom center;
}
a.cn:hover {
background-position: bottom center;
}
a.fb:hover {
background-position: bottom center;
}
a.twitter:hover {
background-position: bottom center;
}
td {
font-family:verdana, sans-serif;
font-size:98%;
line-height:22px;
color:black;
widht: XXpx; 
}
td.corps-texte {
font-family:verdana, sans-serif;
font-size:100%;
line-height: 26px;
color:black;
widht: XXpx; 
text-align:justify;
}
td.stylo {
font-family:verdana, sans-serif;
font-size:90%;
line-height: 16px;
color:black;
widht: XXpx; 
background-image : url("fond-stylo.png");
background-repeat: no-repeat;
}
td.drapeaux {
font-family:verdana, sans-serif;
font-size:90%;
line-height: 16px;
color:black;
widht: XXpx; 
background-image : url("fond-drapeaux.png");
background-repeat: no-repeat;
}

td.focus {
animation-name: td;
-webkit-animation-name: td;
-moz-animation-name: td;
-o-animation-name: td;
animation-duration: 2.2s;
-webkit-animation-duration: 2.2s;
-moz-animation-duration: 2.2s;
-o-animation-duration: 2.2s;
animation-iteration-count: 5;
-webkit-animation-iteration-count: 5;
-moz-animation-iteration-count: 5;
-o-animation-iteration-count: 5;
animation-direction: alternate;
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
}

td.reecriture {
font-family:verdana, sans-serif;
font-size:90%;
line-height: 16px;
color:black;
widht: XXpx; 
background-image : url("fond-reecriture.png");
background-repeat: no-repeat;
}
td.saisie {
font-family:verdana, sans-serif;
font-size:90%;
line-height: 16px;
color:black;
widht: XXpx; 
background-image : url("fond-saisie.png");
background-repeat: no-repeat;
}
td.impression {
font-family:verdana, sans-serif;
font-size:90%;
line-height: 16px;
color:black;
widht: XXpx; 
background-image : url("fond-impression.png");
background-repeat: no-repeat;
}
td.conjugaisons {
width:500px;
text-align:justify;
font-weight:bold;
padding-top:15px;
}
td.separations {
width:500px;
text-align:justify;
border-bottom:2px solid white;
}
input.focus, textarea.focus, select.focus, option.focus {
 border-width: 3px 3px 3px 3px;
 border-style:dashed;
 border-top-color: #73D15C;
 border-bottom-color: #73D15C;
 border-left-color: #73D15C;
 border-right-color: #73D15C;
 background-color:#CDEDCA;
 transition-property: background-color; /* Active la transition sur background-color */
 transition-timing-function: ease;
 transition-duration: 1.5s;
}
input.focus:hover, textarea.focus:hover, select.focus:hover, option.focus:hover {
 border-width: 1px 1px 1px 1px;
 border-style:dashed;
 border-top-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
 border-right-color: #000000;
 background-color: #FFFFFF;
}
ul.puces {
list-style-image: url(ico-valider-p.png);
font-size:130%;
}
ul.puceunique {
list-style-image: url(ico-valider-p.png);
font-size:100%;
}
ul.puceplanete {
list-style-image: url(ico-valider-planete.png);
font-size:100%;
}
ul.conjugaisons {
list-style-type:none; 
margin:0; padding:0;
}
.terminaisons {
font-weight: bold;
color: #AF2A2C;
}
img.space.top{
margin-left:0px;
margin-right:0px;
margin-top:3px;
}
#floatMenu {  
position:absolute;
top:350px;
right:51%;
margin-right:170px;
width:200px;
}  
#floatMenu ul {  
margin-bottom:20px;  
list-style-type:none;
}  
#floatMenu ul li a {  
display:block;  
border:1px solid #999;  
background-color:#222;  
border-left:6px solid #999;  
text-decoration:none;  
color:#ccc;  
padding:5px 5px 5px 25px;  
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}  
#floatMenu ul.menu1 li a:hover {  
border-color:#09f; 
}  
#floatMenu ul.menu2 li a:hover {  
border-color:#9f0; 
}  
#floatMenu ul.menu3 li a:hover {  
border-color:#f09;  
} 
#fl_menu{position:absolute; top:350px; right:50%; margin-right:170px; z-index:9999; width:160px; height:50px;}
#fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}
#fl_menu .menu{display:none;}
#fl_menu .menu .menu_item, .liennoir {display:block; width:110px; background:#000!important; color:#fff!important; border-top:1px solid #333; padding:10px 20px; font-family:Verdana, Helvetica, sans-serif; font-size:12px; text-decoration:none; text-align:left; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out;}
#fl_menu .menu a.menu_item:hover, .liennoir:hover{background:#333!important; color:#fff; text-decoration:none}
.content{width:520px; margin:50px auto;
}
#nav, ul#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position: relative;
     line-height:1.5em;
	 white-space:nowrap;
}
ul#nav li {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:justify;
	white-space:nowrap;
}
ul#nav li ul {
	list-style-type:none;
	margin:6px 0 0 0;
	padding:0;
	border-top:none;
	white-space:nowrap;
}
#nav a:link, #nav a:active, #nav a:visited{	
    display:block;
    border:0px solid #333;
    color:#000000;
    text-decoration:none;
    background-color:#FFFFFF;
}
ul#nav li a {
	padding:3px 4px 3px 4px;
	white-space:nowrap;
}
ul#nav li a ul {
	margin:0;
	white-space:nowrap;
}
#nav a:hover{
    background-color:#000000;
    color:#FFFFFF;
}
#nav li{
    float:left;
    position:relative;
	white-space:nowrap;
}
#nav ul {
    position:absolute;
    width:27em;
    top:1.5em;
    display:none;
	white-space:nowrap;
}
#nav li ul a{
    width:23.5em;
    float:left;
	white-space:nowrap;
}
#nav ul ul{
	top:auto;
	white-space:nowrap;
}
#nav li ul ul {
    right:21em;
    margin:0px 0 0 8px;
	top: -2.5em;
	white-space:nowrap;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
	white-space:nowrap;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
	white-space:nowrap;
}

/*NOUVEAU MENU CSS*/
/* partie positionnement et déco */
#menu a { 
	display:block; 
	color: #fff; 
	text-decoration:none;
}
#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
	width: 110px;
	padding: 6px 15px;
	background-color: #777;
	background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
	border-right: 1px solid #777;
	border-radius: 8px 0 0 8px;
}
#menu > li + li {
	border-left: 1px solid #aaa;
	border-right: 1px solid #777;
}
#menu > li:last-child {
	border-right: 0;
	border-left: 1px solid #aaa;
	border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
	background-color: #999;
	background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
	position: absolute;
	display: inline;
	top: 2em; left: 0;
	max-height:0em;	
	max-width: 300px;
	margin: 0; padding: 0;
	background-color: #ddd;
	background-image: linear-gradient(#fff,#ddd);
	overflow: hidden;
	transition: 1s max-height 0.3s;
	border-radius: 0 0 8px 8px;
}
#menu > li ul {
/*j'ajoute 25px car la transition demeure quand on clique (hover) et il faut que le margin top reste bien sous les ongles du menu*/
	display: list-item;
	text-align: left;
	margin-top: 25px; 
	margin-left: -158px;
	width:300px;

}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
/* à adapter, le minimum est le meilleur mais voyez large 😉 */
	max-height: 100em;
/*j'ajoute 25px car il faut que le margin top reste bien sous les ongles du menu quand le hover est actif*/
	margin-top: 25px;
	margin-left: -158px;
 	display:inline-block;
	width:300px;
}
.top_link { display: none; position: fixed; right: 8px; bottom: 8px; color: rgb(51, 102, 153); background-image: url("ui-totop.png"); background-repeat: no-repeat; width: 31px; height: 31px; 
}