/* Pour affichage sur écran */
/* Directive à insérer : <link rel="stylesheet" type="text/css" href="styles/clapoty.css" media="screen"></link> */

@media screen {
 body {
     font-family: "Verdana", "Arial", "Tahoma", "Lucida", "Lucida Sans", "Helvetica", Sans-Serif;
     background: #a0a0f0 url("../images/ronds_dans_l_eau.jpg") no-repeat;
     background-attachment: fixed;
 }
 body#page_enjeux {
     background: #a0a0f0 url("../images/marche_cayenne.jpg") no-repeat;
     background-attachment: fixed;
 }
 body#page_objectifs {
     background: #a0a0f0 url("../images/pirogue_apagui.jpg") no-repeat;
     background-attachment: fixed;
 }
 body#page_donnees {
     background: #a0a0f0 url("../images/mexique_grand-meres_enfant.jpg") no-repeat;
     background-attachment: fixed;
 }
 body#page_outils {
     background: #a0a0f0 url("../images/taln.jpg") no-repeat;
     background-attachment: fixed;
 }
 body#page_outils #cadre-principal {
     filter: alpha(opacity=90);
     opacity: 0.9;
 }
 body#page_participants {
     background: #a0a0f0 url("../images/terre.jpg") no-repeat;
     background-attachment: fixed;
 }
 body#page_actualites {
     background: #a0a0f0 url("../images/ss_sol_cnrs.jpg") no-repeat;
     background-attachment: fixed;
 }
 h1 {
     position: fixed;
     left: 0px;
     top: 10px;
     width: 840px;
     margin-left: 12px;
     margin-right: 20px;
     border-style: ridge;
     text-align: center;
     font-weight: bold;
     background-color: #e0f0f0;
     color: #102030;
     filter: alpha(opacity=60);
     opacity: 0.6;
     font-size: 24pt;
 }

 #menu {
     background-color: #e0e0f0;
     position: fixed;
     left: 16px;
     top: 70px;
     width: 120px;
     height: 470px;
     filter: alpha(opacity=80);
     opacity: 0.8;
 }

 #menu ul li {
     margin: 0px;
     list-style: none;
 }

 #accueil {
     position: absolute;
     left: 10px;
     top: 20px;
     width: 100px;
     height: 40px;
     background: url("../images/accueil.png");
 }
 #accueil a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/accueil.png");
     z-index: 1;
 }
 #accueil a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/accueil.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #constats {
     position: absolute;
     left: 10px;
     top: 64px;
     width: 100px;
     height: 40px;
     background: url("../images/constats.png");
 }
 #constats a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/constats.png");
     z-index: 1;
 }
 #constats a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/constats.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #enjeux {
     position: absolute;
     left: 10px;
     top: 108px;
     width: 100px;
     height: 40px;
     background: url("../images/enjeux.png");
 }
 #enjeux a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/enjeux.png");
     z-index: 1;
 }
 #enjeux a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/enjeux.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #objectifs {
     position: absolute;
     left: 10px;
     top: 152px;
     width: 100px;
     height: 40px;
     background: url("../images/objectifs.png");
 }
 #objectifs a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/objectifs.png");
     z-index: 1;
 }
 #objectifs a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/objectifs.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #donnees {
     position: absolute;
     left: 10px;
     top: 196px;
     width: 100px;
     height: 40px;
     background: url("../images/donnees.png");
 }
 #donnees a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/donnees.png");
     z-index: 1;
 }
 #donnees a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/donnees.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #outils {
     position: absolute;
     left: 10px;
     top: 240px;
     width: 100px;
     height: 40px;
     background: url("../images/outils.png");
 }
 #outils a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/outils.png");
     z-index: 1;
 }
 #outils a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/outils.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #participants {
     position: absolute;
     left: 10px;
     top: 284px;
     width: 100px;
     height: 40px;
     background: url("../images/participants.png");
 }
 #participants a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/participants.png");
     z-index: 1;
 }
 #participants a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/participants.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #avancees {
     position: absolute;
     left: 10px;
     top: 328px;
     width: 100px;
     height: 40px;
     background: url("../images/avancees.png");
 }
 #avancees a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/avancees.png");
     z-index: 1;
 }
 #avancees a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/avancees.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }
 #actualites {
     position: absolute;
     left: 10px;
     top: 372px;
     width: 100px;
     height: 40px;
     background: url("../images/actualites.png");
 }
 #actualites a {
     display: block;
     width: 100px;
     height: 40px;
     background: url("../images/actualites.png");
     z-index: 1;
 }
 #actualites a:hover {
     display: block;
     width: 100px;
     height: 40px;
     background: transparent url("../images/actualites.png");
     filter: alpha(opacity=100);
     opacity: 1;
     z-index: 2;
 }

#contacts {
    position: absolute;
    left: 10px;
    top: 416px;
    width: 100px;
    height: 40px;
    background: url("../images/contacts.png");
}
#contacts a {
    display: block;
    width: 100px;
    height: 40px;
    background: url("../images/contacts.png");
    z-index: 1;
}
#contacts a:hover {
    display: block;
    width: 100px;
    height: 40px;
    background: transparent url("../images/contacts.png");
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 2;
}

/* ----------------------------------------------------------------------- */

 #cadre-principal {
     background-color: #e0e0f0;
     position: absolute;
     left: 140px;
     top: 70px;
     width: 716px;
     height: 470px;
     filter: alpha(opacity=80);
     opacity: 0.8;
 }

 #cadre-principal hr {
    margin: 5px 0px 5px 0px;
    width: 716px;
 }
 #cadre-principal h2, h3, h4, p, ul, table {
     background-color: #e0e0f0;
     color: black;
     width: 688px;
     margin-left: 10px;
     margin-right: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
     padding-left: 6px;
     padding-right: 6px;
 }
 #cadre-principal p.resserre {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 #cadre-principal ul {
     background-color: #e0e0f0;
     color: black;
     width: 656px;
     margin-left: 30px;
     margin-right: 20px;
 }
 #cadre-principal ul li {
     margin-top: 20px;
     margin-bottom: 10px;
 }
 #cadre-principal ul li.resserre {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 #cadre-principal h2 {
     text-align: center;
     background-color: #e0f0f0;
     color: #102030;
     font-size: 18pt;
     margin-top: 30px;
     margin-bottom: 30px;
 }
 #cadre-principal h2.resserre {
     margin-bottom: 20px;
 }
 #cadre-principal h3 {
     text-align: left;
     font-weight: bold;
     background-color: #e0f0f0;
     font-size: 16pt;
 }


 #cadre-principal table td.moitie-gauche {
     width: 340px;
     padding-left: 12px;
     padding-right: 2px;
 }
 #cadre-principal table td.moitie-droite {
     width: 340px;
     padding-left: 2px;
     padding-right: 12px;
 }
 #cadre-principal table td.toute_la_largeur {
     width: 694px;
     text-align: center;
     margin-left: auto;
     margin-right: auto;
     padding-left: 2px;
     padding-right: 12px;
 }

 #cadre-principal table.pas_de_marges {
     width: 80%;
     margin-left: auto;
     margin-right: auto;
     margin-top: 0px;
     margin-bottom: 0px;
     padding: 0px 0px 0px 0px;
     border-style: none;
 }
 #cadre-principal table.pas_de_marges tr td {
     text-align: center;
 }
 #cadre-principal table img.en_retrait {
     filter: alpha(opacity=32);
     opacity: 0.32;
 }

 #cadre-principal table img.moyen {
     filter: alpha(opacity=70);
     opacity: 0.7;
 }

 #cadre-principal table img.en_avant {
     filter: alpha(opacity=98);
     opacity: 0.98;
 }

 #cadre-principal p {
     text-align: justify;
 }
 #cadre-principal p.gauche {
     text-align: left;
 }
 #cadre-principal p.droite {
     text-align: right;
 }
 #cadre-principal p.centre {
     text-align: center;
 }
 #cadre-principal p.sous-titre {
     text-align: center;
     font-size: 16pt;
 }

 #cadre-principal .petit  {
     font-size: 10pt;
 }
 #cadre-principal .grand {
     font-size: 14pt;
 }
 #cadre-principal .grise {
     color: #000000;
     background-color: #b0b0b0;
 }
 #cadre-principal .pc {
     font-variant: small-caps;
 }

 #cadre-principal .petit_sans_serif {
     font-family: "Arial", "Verdana", "Lucida", "Lucida Sans", "Helvetica", Sans-Serif;
     font-size: 10pt;
 }

 table#cartouche {
     position: fixed;
     left: 0px;
     top: 550px;
     width: 840px;
     margin-left: 16px;
     margin-right: 16px;
     font-size: 8pt;
 }
 table#cartouche td.moitie-gauche {
     width: 420px;
     text-align: left;
 }
 table#cartouche tr td.moitie-droite {
     width: 420px;
     text-align: right;
 }

}

/* Pour impression */
/* Directive à insérer : <link rel="stylesheet" type="text/css" href="styles/clapoty.css" media="print"></link> */

@media print {
 body { font-size: 11pt; }
 h1   { font-size: 24pt; }
 h2   { font-size: 14pt; }
 h3   { font-size: 12pt; }
 p    { text-align: justify; }

 p.gauche { text-align: left }
 p.droite { text-align: right }
 p.centre { text-align: center }
}