* {margin:0; padding:0;} body {text-align:center;color:#595959;background:url(../images/fond-body.gif) repeat-x #a6a6a6;} table, div, input, body, textarea, select, kbd {font: 12px Arial, Helvetica, sans-serif;} a {text-decoration:none;} a img {border:none;} hr {display:none;} /* SOMMAIRE 1. Structure 2. Généralités 3. Accueil 4. Livre d'Or 5. Liste tutoriaux 6. Tutorial 7. Contact 8. Inscription TABLE DES COULEURS - gris de fond : #A6A6A6 - gris clair : #E2E2E2 - gris foncé : #7C7C7C - vert flashouille : #B7F01E */ /*______________________________________________________________________________*/ /* PROPRIETES CSS 3.0 */ .blocTuto h2, #tuto h1, #tuto h2, .accBloc h2, #quitext h1, #quiForm h1, #quiForm legend {text-shadow:0px 1px 1px #000;} kbd {border-radius:0.4em;} #tuto .tutoNav {text-shadow:none;} /*______________________________________________________________________________*/ /*------------ 1. STRUCTURE */ #menu, #contenu, #pied {margin:0 auto;width:970px;text-align:left;} #menu {height:164px;} #contenu {min-height:300px; height:auto !important; height:300px;} #contenu a {color:#7C7C7C;} #contenu a:hover {color:#7D377E;} #contenu dl {margin:10px 0 0 0;} #contenu dt {text-transform:uppercase;color:#B7F01E;font-weight:bold;font-size:14px;} #contenu dd {margin:0 0 20px 0;padding:10px;background:#ADADAD;border:1px solid #C0C0C0;} #contenu dd p {margin:0 0 5px 0;} .cale {clear:both;height:15px;} #pied {border-top:1px solid #9B9B9B;padding:5px 0 0 0;font-size:11px;clear:both;} #pied #credits {display:inline;float:right;} #pied a {color:#595959;} #pied a:hover {color:#7D377E;} #pied ul {list-style:none;} #pied li {display:inline;border-left:1px solid #828282;padding:0 8px;} /*------------ 2. GENERALITES */ .nivFacile, .nivMoyen , .nivDifficile {width:122px;height:8px;margin:5px 0 0 0;display:block;} .nivFacile {background:url(../images/niveaux.png) no-repeat;} .nivMoyen {background:url(../images/niveaux.png) no-repeat 0 -10px;} .nivDifficile {background:url(../images/niveaux.png) no-repeat 0 -20px;} .notation span {width:65px;height:12px;display:block;} .notation .note0 {background:url(../images/notation.png) no-repeat;} .notation .note1 {background:url(../images/notation.png) no-repeat 0 -12px;} .notation .note2 {background:url(../images/notation.png) no-repeat 0 -24px;} .notation .note3 {background:url(../images/notation.png) no-repeat 0 -36px;} .notation .note4 {background:url(../images/notation.png) no-repeat 0 -48px;} .notation .note5 {background:url(../images/notation.png) no-repeat 0 -60px;} .notation .note6 {background:url(../images/notation.png) no-repeat 0 -72px;} .notation .note7 {background:url(../images/notation.png) no-repeat 0 -84px;} .notation .note8 {background:url(../images/notation.png) no-repeat 0 -96px;} .notation .note9 {background:url(../images/notation.png) no-repeat 0 -108px;} .notation .note10 {background:url(../images/notation.png) no-repeat 0 -120px;} .blocTuto {background:url(../images/fond-lstTuto.gif) no-repeat;width:224px;height:197px;float:left;display:inline;margin:0 5px 8px 0;color:#E2E2E2;padding:6px;position:relative;} .blocTuto h2 {font-size:16px;color:#fff;text-transform:uppercase;margin:5px 0 0 0;} .blocTuto .ruban {position:absolute;z-index:100;left:6px;top:6px;margin:0;width:224px;height:142px;background:url(../images/tutoCoins.png) no-repeat;} .blocTuto a {display:block;background:url(../images/lien-LireNoir.png) no-repeat center center #ADADAD;border-top:1px solid #575757;border-left:1px solid #575757;width:78px;height:29px; position:absolute;z-index:102;right:6px;top:118px;} .blocTuto a:hover {background:url(../images/lien-LireNoir_on.png) no-repeat center center #ADADAD;} .blocTuto .infos {float:right;display:inline;width:125px;} #rechercher {width:267px;height:48px;background:url(../images/fond-rechercher.png) no-repeat;padding:14px 0 0 210px;} #rechercher input#rec {border:1px solid #C2C2C2;width:170px;margin:2px 0 0 0;padding:0 0 0 20px;} #rechercher input[type=text]:focus, #tutoRechercher input[type=text]:focus {background:url(../images/chevrons-vert.png) no-repeat 5px center #fff;} #rechercher input#go {float:right;display:inline;margin:-5px 0 0 0;} #identification {width:158px;height:100px;background:url(../images/fond-identification.gif) no-repeat;padding:34px 10px 0 10px;color:#7C7C7C;} #identification p {margin:0 0 5px 0;} #identification a {color:#7C7C7C;} #identification a:hover {color:#fff;} #identification input[type=text], #identification input[type=password] {border:1px solid #D3FF4E;width:150px;padding:1px 0 1px 5px;font-size:10px;color:#7C7C7C;} #identification #valide {float:right;display:inline;margin:17px 0 0 0;} /*------------ 3. ACCUEIL */ #accNew {background:url(../images/mappeIndex.jpg) no-repeat;margin:0 15px 0 0;} #accNew h2 {background:#6F6F6F;} #accNew .ruban {background:url(../images/bando-News.png) no-repeat;} #accJour {background:url(../images/mappeIndex.jpg) no-repeat left bottom;} #accJour h2 {background:#ADADAD;} #accJour .ruban {background:url(../images/bando-Jour.png) no-repeat;} .accBloc {float:left;display:inline;position:relative;width:477px;height:258px;color:#E2E2E2;} .accBloc .ruban {position:absolute;z-index:100;left:0;top:0;margin:0;width:472px;height:219px;} .accBloc p {margin:6px 6px 0 6px;} .accBloc h2 {font:normal 22px Arial Black, Arial, sans-serif;color:#fff;text-transform:uppercase;position:absolute;z-index:101;right:1px;bottom:35px; width:360px;padding:8px 0 0 18px;} .accBloc .notation {width:64px;margin:5px 0 0 20px;} .accBloc .infos {float:right;display:inline;width:352px;padding:5px 0 0 0;} .accBloc .nivFacile, .accBloc .nivMoyen , .accBloc .nivDifficile {float:right;} .accBloc a {display:block;background:url(../images/lien-LireBlanc.png) no-repeat;width:51px;height:12px;position:absolute;z-index:102;left:30px;bottom:47px;} .accBloc a:hover {background:url(../images/lien-LireBlanc_on.png) no-repeat;} #accTutos {float:left;display:inline;margin:0 10px 0 0;width:482px;} #accTutos #rechercher {clear:both;} #accTextesDroite {float:right;display:inline;width:178px;} #pub {width:178px;height:135px;background:url(../images/mappeIndex.jpg) no-repeat -485px -284px;margin:8px 0 0 0;} #accIntro {float:left;display:inline;width:262px;height:265px;background:url(../images/mappeIndex.jpg) no-repeat -485px -0px;padding:12px 12px 0 12px;} #accIntro h1 {font-size:16px;color:#A4C73D;margin:0 0 10px 0;} #accIntro h1 span {color:#A6A6A6;} #accIntro p {margin:0 0 5px 0;} /*------------ 4. LIVRE D'OR */ #livreForm {width:160px;height:486px;background:url(../images/fond-livre.png) no-repeat;padding:40px 10px 0 10px;float:right;display:inline;} #livreForm p {margin:5px 0 5px 0;} #livreForm label {background:url(../images/puceDroite.gif) no-repeat left center;padding:2px 0 2px 12px;text-transform:uppercase;font-weight:bold;font-size:12px;} #livreForm input[type=text] {border:1px solid #D9D9D9;width:137px;background:url(../images/fond-input.gif) repeat-x left bottom #fff;padding:0 0 0 20px;} #livreForm input[type=text]:focus {background:url(../images/chevrons-gris.png) no-repeat 5px center #fff;} #livreForm textarea {border:1px solid #D9D9D9;width:137px;overflow:auto;height:67px;background:url(../images/fond-textareaLivre.jpg) no-repeat;padding:25px 10px;font-size:11px;} #livreForm #antibot {border:1px solid #A6A6A6;width:157px;text-align:center;background:#CCCCCC;padding:10px 0;} blockquote {width:695px;background:url(../images/fond-hautMessage.gif) no-repeat 6px 6px #ADADAD;border-width:1px 1px 0 1px;border-style:solid;border-color:#C0C0C0;padding:30px 40px 0 40px;} .messageInfo {background:url(../images/fond-basMessage.gif) no-repeat;width:777px;padding:34px 0 0 0;font-size:14px;margin:0 0 10px 0;} .messageInfo img {vertical-align:middle;} .messageDate {color:#B7F01E;} .messageHeure {color:#56D5FF;} .messageQui {color:#fff;font-weight:bold;background:url(../images/pointeBulle.png) no-repeat right top;padding:15px 30px 0 0;} #messagePages {text-align:center;width:777px;} /*------------ 5. LISTE TURORIAUX */ #fitres {width:463px;height:32px;background:url(../images/fond-filtre.png) no-repeat;float:right;display:inline;padding:30px 0 0 15px;} #fitres a {margin:0 20px 0 0;color:#A4A4A4;} #fitres a:hover {color:#B7F01E;} #fitres #filtreNiveau {float:right;display:inline;margin:0 10px 0 0;} #filtreNiveau label {color:#A4A4A4;} #filtreNiveau select {width:100px;background:#E2E2E2;} /*------------ 6. TURORIAL */ #tuto {width:765px;background:#ADADAD;border-style:solid;border-color:#C0C0C0;border-width:0 1px;padding:5px 6px;position:relative;} #tutoNotation {position:absolute;z-index:120;left:-7px;top:-6px;width:151px;height:151px;} #tutoNotation.note0 {background:url(../images/note0.png) no-repeat;} #tutoNotation.note1 {background:url(../images/note1.png) no-repeat;} #tutoNotation.note2 {background:url(../images/note2.png) no-repeat;} #tutoNotation.note3 {background:url(../images/note3.png) no-repeat;} #tutoNotation.note4 {background:url(../images/note4.png) no-repeat;} #tutoNotation.note5 {background:url(../images/note5.png) no-repeat;} #tutoNotation.note6 {background:url(../images/note6.png) no-repeat;} #tutoNotation.note7 {background:url(../images/note7.png) no-repeat;} #tutoNotation.note8 {background:url(../images/note8.png) no-repeat;} #tutoNotation.note9 {background:url(../images/note9.png) no-repeat;} #tutoNotation.note10 {background:url(../images/note10.png) no-repeat;} #tutoCache {position:absolute;z-index:100;left:-1px;top:0;width:779px;height:318px;background:url(../images/tutoCache.png) no-repeat;} #tuto h1, #tuto .infos {position:absolute;background:#ADADAD;width:405px;right:6px;border-left:1px solid #575757;} #tuto h1, #tuto h2 {text-transform:uppercase;color:#fff;} #tuto h1 {font:normal 26px Arial Black, Arial, sans-serif;z-index:101;top:253px;padding:8px 0 0 20px;border-top:1px solid #575757;} #tuto h2 {width:755px;height:25px;background:url(../images/fond-etape.png) no-repeat;font-size:16px;padding:5px 0 0 10px;margin:10px 0 10px 0;} #tuto p {margin:0 0 10px 0;} #tuto p ~ h2 {margin:50px 0 10px 0;} #tuto .cale {clear:left;} #tuto .infos {z-index:102;top:297px;padding:4px 0 0 20px;color:#E2E2E2;} #tuto .nivFacile, #tuto .nivMoyen , #tuto .nivDifficile {float:right;margin:4px 30px 0 0;} #tuto #zoom {display:block;width:123px;height:53px;background:url(../images/bt_Agrandir.png) no-repeat;text-indent:-5000px;position:absolute;z-index:105;left:15px;top:255px;} #tuto #zoom:hover {background:url(../images/bt_Agrandir.png) no-repeat left bottom;} #tuto .tutoNav {float:right;display:inline;margin:2px 10px 0 0;font-size:11px;text-transform:none;color:#ADADAD;width:95px;font-weight:normal;} .tutoNav .btNext, .tutoNav .btPrev {float:right;display:inline;width:15px;height:15px;margin:0 0 0 4px;} .tutoNav .btNext {background:url(../images/bt_Next.png) no-repeat;} .tutoNav .btPrev {background:url(../images/bt_Prev.png) no-repeat;} .aa_infos, .aa_fusion, .aa_outil, .aa_filtres {padding:0 4px;font-weight:bold;} .aa_infos {background:#BAA8C0;color:#9754AC;} .aa_fusion {background:#B2B9A2;color:#61801E;} .aa_outil {background:#A4B6BE;color:#217CA1;} .aa_filtres {background:#BDB39F;color:#A65C00;} kbd {margin:0 1px 0 0;padding:0 4px;border:1px solid #6f6f6f;background:#C0C0C0;font-weight: bold;-moz-border-radius:0.4em;} kbd.pomme {background:url(../images/icone_mac.png) no-repeat center center #C0C0C0;padding:0 6px;} .aa_parenthese {color:#6B6B6B;font-style:italic;} #tuto blockquote {background:url(../images/fond-astuce.png) no-repeat #8F7F94;width:300px;padding:10px 10px 10px 50px;border:none;color:#E2E2E2;margin:0 0 10px 200px;} #tuto blockquote kbd {color:#7C7C7C;} #tuto blockquote a {color:#B7F01E;} .tutoImgGauche {float:left;display:inline;margin:0 10px 0 0;} .tutoImgGauche img {border:1px solid #000;} #tutoPied {background:url(../images/fond-tutoPied.gif) no-repeat;width:779px;height:19px;clear:both;} #tutoPied p {float:right;margin:-87px -190px 0 0;display:inline;} #tutoPrint {display:inline;float:left;background:url(../images/bt_Imprimer.png) no-repeat left bottom;width:84px;height:107px;margin:0 10px 0 0;} #tutoPDF {display:inline;float:left;background:url(../images/bt_PDF.png) no-repeat right bottom;width:84px;height:107px;} #tutoDroite {float:right;width:178px;} #tutoRetour {display:block;background:url(../images/bt_Retour.png) no-repeat;width:178px;height:23px;margin:0 0 10px 0;} #tutoRetour:hover {background:url(../images/bt_Retour.png) no-repeat left bottom;} #traduction {background:url(../images/fond-traduction.gif) no-repeat;width:166px;height:43px;padding:5px 0 0 12px;margin:0 0 10px 0;color:#fff;line-height:20px;} #traduction a {margin:0 5px 0 0;} #traduction a img {border:1px solid #5E5E5E;} #tutoRechercher {background:url(../images/fond-tutoRecherche.gif) no-repeat;width:166px;height:56px;padding:30px 0 0 12px;margin:0 0 10px 0;} #tutoRechercher input[type=text] {border:1px solid #C2C2C2;width:145px;padding:2px 0 2px 5px;font-size:11px;} #tutoRechercher input[type=text]:focus {padding:2px 0 2px 20px;width:130px;} #tutoRechercher input#go {float:right;display:inline;margin:18px 10px 0 0;} #notez {background:url(../images/fond-notez.gif) no-repeat;width:168px;height:74px;padding:30px 0 0 10px;margin:0 0 10px 0;} #notez select {width:155px;margin:5px 0 0 0;} #commentaires h3 {text-transform:uppercase;font:normal 14px Arial Black, Arial, sans-serif;margin:0 0 0 9px;} #commentaires p {font-size:11px;margin:0 0 0 9px;} #commentaires blockquote {width:164px;background:url(../images/fond-commentaires.gif) no-repeat #ADADAD;border-width:0 0 1px 0;border-style:solid;border-color:#C0C0C0;padding:24px 5px 5px 8px;margin:0 0 10px 0; font-style:italic;} #commentaires form {margin:3px 0 10px 0;} #commentaires form p {margin:0;} #commentaires form label {color:#B7F01E;font-weight:bold;font-size:12px;} #commentaires form textarea {width:163px;background:#ADADAD;border:1px solid #B7F01E;padding:5px 5px 5px 8px;overflow:auto;margin:0 0 5px 0;} #commentaires #plusdecom {margin:10px 0 20px 0;} #license {text-align:center;border-top:1px solid #7C7C7C;padding:5px 0 0 0;} /*------------ 7. CONTACT */ #quitext {width:465px;height:322px;background:url(../images/fond-qui.jpg) no-repeat;color:#fff;padding:199px 6px 0 6px;display:inline;float:left;margin:0 12px 0 0;} #quitext h1 {text-transform:uppercase;font:normal 26px Arial Black, Arial, sans-serif;background:#505D6D;margin:0 0 10px 200px;padding:6px 0 6px 15px;} #quitext p {margin:0 6px 10px 6px;text-align:justify;} #quitext a {color:#B7F01E;} #quitext a:hover {color:#fff;} #quiForm {width:459px;height:513px;background:url(../images/fond-quiForm.gif) no-repeat;display:inline;float:left;padding:10px 10px 0 10px;position:relative;} #quiForm h1 {text-transform:uppercase;font:normal 18px Arial Black, Arial, sans-serif;color:#fff;margin:0 0 5px 0;} #quiForm p {margin:0 0 5px 0;} #quiForm label {float:left;display:inline;width:100px;text-transform:uppercase;font-weight:bold;background:url(../images/puceDroite.gif) no-repeat left center;padding:0 0 0 12px;} #quiForm input[type=text], #quiForm input[type=password] {width:326px;border:1px solid #D9D9D9;padding:2px 5px;} #quiForm input[type=text]:focus, #quiForm input[type=password]:focus {background:url(../images/chevrons-gris.png) no-repeat 5px center #fff;padding:2px 5px 2px 20px;width:311px;} #quiForm select {width:338px;padding:2px 5px;} #quiForm textarea {border:1px solid #D9D9D9;width:390px;height:88px;background:url(../images/fond-contact.gif) no-repeat;overflow:auto;padding:40px 30px;margin:0 0 14px 0;} #quiForm #bt_envoyer {position:absolute;z-index:102;right:0;bottom:0;} #quiForm #code {width:140px;} #quiForm #code:focus {width:125px;} #quiForm #antibot {border:1px solid #A6A6A6;width:157px;text-align:center;background:#CCCCCC;padding:10px 0;width:285px;padding:23px 0;float:left;display:inline;margin:0 10px 0 0;} #quiForm fieldset {border:none;} #quiForm legend {text-transform:uppercase;font:normal 16px Arial Black, Arial, sans-serif;color:#fff;margin:0 0 5px 0;} /*------------ 8. INSCRIPTION */ #inscritext {width:459px;height:513px;display:inline;float:left;padding:10px 10px 0 10px;position:relative;} #inscritext h2 {margin:0 0 5px 0;color:#B7F01E;} #inscritext p {margin:0 6px 10px 0;text-align:justify;}