/* Eléments HTML généraux ------------------------ */
html
{
    margin: 0;
    padding: 0;
    font-size: 100%; /* Correspond à 16px pour les navigateurs */
    font-family: Arial, sans-serif;
}
body
{
    margin: 0;
    padding: 0;
    background: #81afd1 url(../images/fond.jpg) top left repeat-x;
    font-size: 0.75em;
    font-family: Arial, sans-serif;
}
#global
{
    padding: 0;
    margin: 0 auto;
    position: relative;
    width: 964px;
    border: 0;
}
p
{
    margin-top: 0.5em;
}
.annulfloat
{
    clear: both;
    visibility: hidden;
    padding: 0;
    margin: 0;
}

/*////////////////////////// Menu //////////////////////////*/
#bandeau
{
    width: 964px;
    height: 136px;
    background: #fff url(../images/fd-bandeau.jpg);
}
.LogoEssilor
{
    float: left;
    margin: 60px 0 0 33px;
    padding: 0;
}
.baseline
{
    float: left;
    margin: 55px 0 0 28px;
    padding: 0;
}
#menu-annexe
{
    float: right;
    width: 180px;
}
#menu-annexe ul
{
    list-style-type: none;
    margin: 74px 0 0 0;
    padding: 0;
}
#menu-annexe ul li
{
    margin: 0;
    padding: 0 0 0 12px;
    font-size: 1em;
    color: #cc0000;
}
#menu-annexe ul li a
{
    color: #cc0000;
    text-decoration: none;
}
#menu-annexe ul li a:hover
{
    color: #cc0000;
    text-decoration: underline;
}
#menu-annexe ul li.aide
{
    background: url(../images/pict-aide.gif) no-repeat 0px 5px;
}
#menu-annexe ul li.glossaire
{
    background: url(../images/pict-aide.gif) no-repeat 0px 5px;
}
div#nav
{
    width: 964px;
    height: 39px;    
    background-color: #fff;
}
#nav ul, #nav ul li
{
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav ul
{
    width: 944px;    
    margin-left: 10px;
    margin-right: 10px;
}
#nav ul li
{
    position: relative;
    float: left;
}
#nav ul li a
{
    float: left;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: block;
}
#nav ul li a span
{
    position: absolute;
    top: 0px;
    left: 0px;
}
#nav ul li, #nav ul li a, #nav ul li a span
{    
    height: 39px;
}
.physician, .physician a, .physician a span
{    
    width: 146px;
}
.physician a span
{
    background: transparent url(../images/bout-visite-medicale.png) top left no-repeat;
}
.eyeschool, .eyeschool a, .eyeschool a span
{   
    width: 122px;
}
.eyeschool a span
{
    background: transparent url(../images/bout-ecole-des-yeux.png) top left no-repeat;
}
.inthestreet, .inthestreet a, .inthestreet a span
{
    width: 117px;
}
.inthestreet a span
{
    background: transparent url(../images/bout-dans-la-rue.png) top left no-repeat;
}
.museumofcolours, .museumofcolours a, .museumofcolours a span
{    
    width: 213px;
}
.museumofcolours a span
{
    background: transparent url(../images/bout-jardin-des-couleurs.png) top left no-repeat;
}
.athome, .athome a, .athome a span
{
    width: 89px;    
}
.athome a span
{
    background: transparent url(../images/bout-a-la-maison.png) top left no-repeat;
}
.attheopticians, .attheopticians a, .attheopticians a span
{
    width: 137px;   
}
.attheopticians a span
{
    background: transparent url(../images/bout-chez-l-opticien.png) top left no-repeat;
}
.atthestadium, .atthestadium a, .atthestadium a span
{
    width: 118px;
}
.atthestadium a span
{
    background: transparent url(../images/bout-au-stade.png) top left no-repeat;
}
.defaultsection, .defaultsection a, .defaultsection a span
{
    width: 118px;    
}
.defaultsection a span
{
    background: transparent url(../images/bout-au-stade.png) top left no-repeat;
}
#nav ul li.selected a, #nav ul li a:hover span
{
    background-position: 0 -39px;
}
/*********************** Menu For IE6   **************************/
* html .physician a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-visite-medicale.png) top left no-repeat;
    width: 146px;
}
* html .eyeschool a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-ecole-des-yeux.png) top left no-repeat;
    width: 122px;
}
* html .inthestreet a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-dans-la-rue.png) top left no-repeat;
    width: 117px;
}
* html .museumofcolours a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-jardin-des-couleurs.png) top left no-repeat;
    width: 213px;
}
* html .athome a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-a-la-maison.png) top left no-repeat;
    width: 89px;
}
* html .attheopticians a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-chez-l-opticien.png) top left no-repeat;
    width: 137px;
}
* html .atthestadium a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-au-stade.png) top left no-repeat;
    width: 118px;
}
* html .defaultsection a span
{
    background: transparent url(/_layouts/EssilorJunior/IE6/images/en-US/bout-au-stade.png) top left no-repeat;
    width: 118px;
}

/*////////////////////////// Menu //////////////////////////*/


/*////////////////////////// Contenu : css global //////////////////////////*/
h1.physician, h1.inthestreet, h1.athome, h1.attheopticians, h1.atthestadium
{
    padding: 0;
    margin: 0 0 0 154px;
}

h1.eyeschool
{
    padding: 0;
    margin: 0 0 0 220px;
}
h1.museumofcolours
{
    padding: 0;
    margin: 0 0 0 170px;
}
.info
{
    float: left;
    width: 420px;
    height: 210px;
    padding: 22px 0 0 30px;
}
* html .info
{
    padding: 14px 0 0 30px;
}
.info h2
{
    padding: 0;
    margin: 0 0 0 165px;
}
.info h3
{
    padding: 0;
    margin: 6px 0 0 0;
}
.info ul
{
    list-style-type: none;
    margin: 0;
    padding: 2px 0 0 0;
}
.info ul li
{
    margin: 0;
    padding: 0 0 0 15px;
    font-size: 1em;
    color: #000;
    background: url(../images/pict-bleu.gif) no-repeat 0px 5px;
}
.info ul li a
{
    color: #008ac9;
    text-decoration: underline;
}
.info ul li a:hover
{
    color: #cc0000;
    text-decoration: none;
}
.conseil
{
    float: left;
    width: 208px;
    height: 210px;
    margin: 28px 0 0 32px; *margin:18px0032px;
}
.conseil h2
{
    padding: 0;
    margin: 0 0 0 0;
}
.conseil a
{
    color: #008ac9;
    text-decoration: underline;
}
.conseil a:hover
{
    color: #cc0000;
    text-decoration: none;
}
.jeu
{
    float: left;
    width: 210px;
    height: 210px;
    color: #008ac9;
    font-weight: bold;
    margin: 28px 0 0 28px;    
}
*+html .jeu
{
    margin: 21px 0 0 28px;
}
* html .jeu
{
    margin: 21px 0 0 28px;
}
.jeu h2
{
    padding: 0;
    margin: 0 0 0 6px;
}
.jeu-text
{
    margin: 10px 0 0 0;
}
* html .superprince
{
    font-size: 13px;
    color: #cc0000;
    font-weight: bold;
    letter-spacing: -0.11em;
}
* + html .superprince
{
    font-size: 13px;
    color: #cc0000;
    font-weight: bold;
    letter-spacing: -0.11em;
}
html > body .superprince
{
    font-size: 13px;
    color: #cc0000;
    font-weight: bold;
    letter-spacing: -0.08em;
}
#parents
{
    width: 964px;
    background-color: #fff;
}
#Asavoir
{
    float: left;
    width: 313px;
    margin: 0 0 0 13px;
    background: url(../images/fd-asavoir-int.jpg) repeat;
}
#Asavoir-ht
{
    background: url(../images/fd-asavoir-ht.jpg) top left no-repeat;
    height: 90px;
    font-weight: bold;
    padding: 0 20px;
}
#Asavoir-ht img.illus
{
    float: left;
    padding: 20px 20px 20px 0;
}
#Asavoir-ht h2
{
    padding: 20px 0 0 0;
    margin: 0;
}
#Asavoir-int
{
    padding: 0 20px;
}
#Asavoir-int ul
{
    list-style-type: none;
    margin: 10px 0 0 0;
    padding: 0;
}
#Asavoir-int ul li
{
    margin: 0;
    padding: 0 0 10px 18px;
    font-size: 1em;
    color: #000;
    background: url(../images/pict-ro.gif) no-repeat 0px 1px;
}
#Asavoir-int a, #Asavoir-int ul li a
{
    color: #008ac9;
    text-decoration: underline;
}
#Asavoir-int a:hover, #Asavoir-int ul li a:hover
{
    color: #cc0000;
    text-decoration: none;
}
#Asavoir-bs
{
    background: url(../images/fd-asavoir-bs.jpg) bottom left no-repeat;
    padding: 0 20px;
    height: 114px;
}
#Asavoir-bs h3
{
    padding: 0;
    margin: 0;
}
#Asavoir-bs ul
{
    list-style-type: none;
    margin: 0;
    padding: 10px 0 15px 0;
}
#Asavoir-bs ul li
{
    margin: 0;
    padding: 0 0 5px 18px;
    font-size: 1em;
    color: #000;
    font-weight: bold;
    background: url(../images/pict-esp.gif) no-repeat 0px 1px;
}
#Asavoir-bs ul li a
{
    color: #000;
    text-decoration: none;
}
#Asavoir-bs ul li a:hover
{
    color: #cc0000;
    text-decoration: none;
}
#RegleOr
{
    float: left;
    width: 600px;
    padding: 0 0 0 24px; /*border:1px solid #000;*/
}
#RegleOr h2
{
    padding: 0;
    margin: 0;
}
#RegleOr h3
{
    margin: 15px 0 2px 0;
    padding: 0 0 0 15px;
    font-size: 1em;
    color: #008ac9;
    font-weight: bold;
    background: url(../images/pict-bleu.gif) no-repeat 0px 5px;
}
#RegleOr p
{
    margin: 0;
    padding: 10px 0;
}
#RegleOr img.right
{
    float: right;
    margin: 0 10px;
}
#RegleOr ul
{
    list-style-type: none;
    margin: 0 0 0 10px;
    padding: 10px 0 15px 0;
}
#RegleOr ul li
{
    margin: 0;
    padding: 0 0 5px 18px;
    font-size: 1em;
    color: #000;
    background: url(../images/pict-ro.gif) no-repeat 0px 1px;
}
#RegleOr a, #RegleOr ul li a
{
    color: #008ac9;
    text-decoration: underline;
}
#RegleOr a:hover, #RegleOr ul li a:hover
{
    color: #cc0000;
    text-decoration: none;
}
#ESP
{
    float: left;
    width: 942px;
    padding: 0 0 0 13px;
    background: url(../images/fd-ensavoirp-int.jpg) 13px 0 repeat-y;
}
#ESP-ht
{
    height: 60px;
    background: url(../images/fd-ensavoirp-ht.jpg) top left no-repeat;
    padding: 0 20px;
    margin: 0;
}
#ESP-ht h2
{
    font-size: 2em;
    color: #cc0000;
    font-weight: bold;
    margin: 0;
    padding: 20px 0 0 0;
}
#ESP-int
{
    padding: 0 20px;
}
#ESP-int h3
{
    font-size: 1.2em;
    color: #cc0000;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#ESP-int h3.legal
{
    font-size: 1em;
    color: #cc0000;
    font-weight: bold;
    margin: 8px 20px 0 134px;
    padding: 0;
}
#ESP-int img.left
{
    float: left;
    padding: 0 20px 5px 0;
}
#ESP-int img.centre
{
    float: left;
    padding: 10px 0;
}
#ESP-int ul
{
    list-style-type: none;
    margin: 0;
    padding: 10px 0 15px 134px;
}
#ESP-int ul li
{
    margin: 0;
    font-size: 1em;
    color: #000;
    font-weight: normal;
    padding: 0 0 5px 18px;
    background: url(../images/pict-esp.gif) no-repeat 0px 1px;
}
#ESP-int ul li.plus
{
    padding: 0 0 5px 25px;
    background: url(../images/+.png) no-repeat 0px 1px;
}
#ESP-int ul li.moins
{
    padding: 0 0 5px 25px;
    background: url(../images/-.png) no-repeat 0px 1px;
}
#ESP-int ul li.glossary
{
    margin: 6px 0 0 0;
    padding: 0 0 5px 0;
    font-size: 1em;
    color: #000;
    font-weight: normal;
    background: #fff;
}
#ESP-int ul li a, #ESP-int p a
{
    color: #008ac9;
    text-decoration: underline;
}
#ESP-int ul li a:hover, #ESP-int p a:hover
{
    color: #cc0000;
    text-decoration: none;
}
#ESP-int p
{
    clear: both;
    padding: 0;
    margin: 8px 20px 0 134px; /*border:1px solid #000;*/
}
#ESP-int .right
{
    float: right;
    margin-left: 10px;
}
#ESP-int ul li.espaceTop
{
    margin-top: 10px;
}
#ESP-bs
{
    height: 60px;
    background: url(../images/fd-ensavoirp-bs.jpg) bottom left no-repeat;
    padding: 0 20px;
}
#ESP-bs p
{
    padding: 0;
    margin: 10px 0;
    color: #cc0000;
}
#ESP-bs p a
{
    color: #008ac9;
    text-decoration: underline;
    background: url(../images/pict-retour.gif) no-repeat 0px 1px;
    padding: 0 0 0 20px;
}
#ESP-bs p a:hover
{
    color: #cc0000;
    text-decoration: none;
}
 #footerEssilor
{
    width: 964px;
    height: 67px;
    font-size: 1em;
    color: #fff;
    background: #fff url(../images/fd-footer.jpg);
}
#footerEssilor ul
{
    list-style-type: none;
    margin: 0 0 0 300px;
    padding: 30px 0 0 0;
}
#footerEssilor ul li
{
    margin: 0;
    padding: 0 5px;
    color: #fff;
    display: inline;
}
#footerEssilor ul li a
{
    color: #fff;
    text-decoration: none;
}
#footerEssilor ul li a:hover
{
    color: #cc0000;
    text-decoration: none;
}

/*////////////////////////// Class TYPOGRAPHIQUES //////////////////////////*/
.bleu
{
    color: #008ac9;
    font-weight: bold;
}

/*////////////////////////// ACCUEIL //////////////////////////*/
#panorama
{
    width: 964px;
    height: 420px;
    background: #fff url(../images/prince.jpg) no-repeat; /*padding:10px 0 0 12px; 	border:1px solid #000;*/
}
#panorama p
{
    padding: 10px 0 0 64px;
    margin: 0;
}

/*////////////////////////// Visite medicale //////////////////////////*/
#Enf-visite-med
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-visite-med.jpg) 0 10px no-repeat;
}

/*////////////////////////// A l'école //////////////////////////*/
#Enf-ecole
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-ecole.jpg) 0 10px no-repeat;
}
#Enf-ecole aera
{
    cursor: pointer;
}
#Newborn, #Toddler, #Sixyears
{
    position: absolute;
    left: 440px;
    top: 454px;
    width: 334px;
    height: 453px;
    margin: 0 0 0 13px;
}
#Newborn
{
    background: #fff url(../images/fd-carnet.jpg) no-repeat;
    z-index: 1;
    visibility: visible;
}
#Toddler
{
    background: #fff url(../images/fd-carnet.jpg) no-repeat;
    z-index: 2;
    visibility: hidden;
}
#TestVision
{
    position: absolute;
    left: 550px;
    top: 629px;
    width: 500px;
    height: 284px; 
    background: #fff url(../images/test-Ishihara.gif) no-repeat;
    z-index: 2;   
}
#ResultTestVision
{
    position: absolute;
    left: 550px;
    top: 629px;
    width: 500px;
    height: 284px;
    background: #fff url(../images/test-Ishihara-on.gif) no-repeat;
    z-index: 1;   
}
#Sixyears
{
    background: #fff url(../images/fd-carnet.jpg) no-repeat;
    z-index: 3;
    visibility: hidden;
}
* html #Newborn, * html #Toddler, * html #Sixyears
{
    background: #fff url(/_layouts/EssilorJunior/IE6/images/en-US/fd-carnet.jpg) no-repeat;
}
#Sixyears ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#Sixyears ul li
{
    margin: 0;
    padding: 0 0 5px 13px;
    font-size: 1em;
    color: #000;
    background: url(../images/pict-livre.jpg) no-repeat 0px 8px;
}
#LivreTxt
{
    position: relative;
    width: 236px;
    height: 330px;
    padding: 21px 0 0 74px;
}
#LivreTxt p
{
    margin: 0;
    padding: 4px 0;
}

/*////////////////////////// Dans la rue //////////////////////////*/
#Enf-rue
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-rue.jpg) 0 10px no-repeat;
}

/*////////////////////////// Au musée des couleurs //////////////////////////*/
#Enf-couleurs
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-couleurs.jpg) 0 10px no-repeat;
}

/*////////////////////////// A la maison //////////////////////////*/
#Enf-home
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-home.jpg) 0 10px no-repeat;
}

/*////////////////////////// Chez l'opticien //////////////////////////*/
#Enf-opticien
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-opticien.jpg) 0 10px no-repeat;
}
#col1
{
    width: 320px;
    float: left;
    padding: 10px 0 0 135px;
}
#col2
{
    width: 320px;
    float: left;
    padding: 10px 0 0 60px;
}
#col1 ul, #col2 ul
{
    margin: 10px 0 0 0;
    padding: 0;
}

/*////////////////////////// Au stade //////////////////////////*/
#Enf-stade
{
    width: 964px;
    height: 300px;
    padding: 10px 0;
    background: #fff url(../images/fd-Enf-stade.jpg) 0 10px no-repeat;
}
/*////////////////////// SP: 3-parts layout header /////////////*/
#contenu-enfant
{
    width: 964px;
    padding: 10px 0 0;
}