body {background: #b9d166 ; margin: 0; padding: 0}
#contener {background:  #D5EB88;margin-left: auto; margin-right: auto; font-size: 75%; color: #2B2C2C; width: 83em; padding-top: 1.5em; border: solid #9cb056; border-width: 1px 1px 1px 1px; border-top-color: #D5EB88}
#gauche {float: left; width: 14.5em; padding-left: 0.5em;}
#droit {margin-left: 15.5em; width: 67em;}

#logo {margin-left: 3em}
#nav_gauche {margin-top: 1em; height: 36em}
#nav_gauche img {margin-top: 1px; border: 0}


#droit h1 {width: 363px; margin: 2em 0 2em 0em; padding-top: 1.8em; font-size: 100%;}
#droit p#nav_haut {float: right; margin: 0; width: 349px; height: 27px; padding: 7px 0 0 40px; margin-right: -7px; background: url(img/bg_nav_haut.jpg) no-repeat right top; border-right: 1px solid #b9d166}
#nav_haut a, #nav_haut span {text-decoration: none; font-family: "Trebuchet MS", sans-serif; font-size: 120%; font-weight: bold; display: block; float: left; padding-left: 1.2em;  margin-right: 1em; background: url(img/puce_nav_haut.gif) no-repeat 0 50%}
#nav_haut a#accueil {color: #81218C}
#nav_haut a#accueil:hover {color: #AA47B5}
#nav_haut span.accueil {color: #AA47B5}
#nav_haut a#portrait {color: #4D64ED}
#nav_haut a#portrait:hover {color: #6A7EF0}
#nav_haut span.portrait {color: #6A7EF0}
#nav_haut a#contact {color: #D9162D}
#nav_haut a#contact:hover {color: #EB3D51}
#nav_haut span.contact {color: #EB3D51}
#nav_haut a#achat {color: #23B431}
#nav_haut a#achat:hover {color: #43C64F}
#nav_haut span.achat {color: #43C64F}

h2 {margin: 5.4em 0 0 0; font-size: 100%}
h2#animaux{margin-left: 10em}
h2#personnages, h2#recipients, h2#accueil {margin-left: 9.4em}
h2#porte {margin-left: 8em}
h2#miroirs, h2#tour {margin-left: 8em}
h2#miroirs, h2#autres {margin-left: 11em}


#contenu {float: left; width: 340px; margin: 1.5em 0; padding: 1em; border-style: double ; font-size: 110%; font-family:  arial, verdana,sans-serif; text-align: justify}
div.accueil {border-color: #81218C}
div.portrait {border-color: #4D64ED}
div.portrait h3 {color: #4D64ED; margin: 0 0 1em 0; font-size: 100%}
div.portrait ul {padding-left: 1em}
div.portrait li {color: #4D64ED}
div.portrait li span {color: #2B2C2C}
div.contact {border-color: #D9162D}
div.contact a {color: #2B2C2C}
div.contact a:hover {color: #D9162D}
div.achat {border-color: #23B431}
div.achat h3 {color: #23B431; margin: 0 0 1em 0; font-size: 100%}
div.achat ul {padding-left: 1em}
div.achat li {color: #23B431}
div.achat li span {color: #2B2C2C}
div.achat a {color: #2B2C2C}
div.achat a:hover {color: #23B431}
div.porte {border-color: #FF8933; margin: 0}

#vignettes_animaux {float: left; display: inline; text-align: center; width: 380px; margin : 1em 0;}
#vignettes_personnages {float: left; display: inline; text-align: left; width: 340px; margin : 1em 0 1em 2em;}
#vignettes_porte{float: left;text-align: left; width: 370px; margin : 1em 0 1em 0.5em;}
#vignettes_recipients {float: left;text-align: center; width: 359px; margin : 1em 0;}
#vignettes_miroirs {float: left; text-align: left; width: 340px; margin : 1em 0 1em 2em;}
#vignettes_autres {float: left; text-align: center; width: 310px; margin : 1em 0 1em 2em;}

p.gauche {float: left; text-align: left; margin: 0}
p.droit {float: right; margin: 0}
p.recip108 {width: 108px; text-align: center}
p.recip133 {width:133px; margin: 0; padding: 0 0 0.5em 0; text-align: center}
p.recip359 {width: 359px; text-align: left; padding-left: 0.3em}
p.recip359 img.centre {margin: 0 1.2em}

p.porte74 {width:74px;margin-bottom: 0.2em}
p.porte133 {width:133px; margin: 0 0.5em; padding-top: 0.8em}

#vignettes_animaux img, #vignettes_personnages img, #vignettes_porte img, #vignettes_miroirs img, #vignettes_recipients img, #vignettes_autres img,   
#agrandi img, #agrandi_animaux img, #agrandi_personnages img, #agrandi_porte img, #agrandi_miroirs img, #agrandi_recipients img, #agrandi_autres img
{border: 1px solid #212222}
#vignettes_recipients img.rect {margin-top: 1.2em}


#agrandi, #agrandi_animaux, #agrandi_personnages, #agrandi_porte, #agrandi_miroirs, #agrandi_recipients, #agrandi_autres {width: 400px; text-align: center; float: right}
#agrandi {margin-top: 1.6em;}
#agrandi_animaux {margin-top: 1em;}
#agrandi_personnages {margin-top : 1em}
#agrandi_porte {margin-top : 1em}
#agrandi_recipients {margin-top: 1em;}
#agrandi_autres {margin-top: 1em;}
p#legendes {width: 100%; text-align: center; font-size: 110%}