* {margin:0; padding:0;} body {text-align:center;color:black;} table, div, input, body, textarea, select {font: 12px Arial, Helvetica, sans-serif;} a {text-decoration:none;} a img {border:none;} hr {display:none;} /* SOMMAIRE 1. Panneau de login 2. Structure 3. Page d'accueil 4. Page Type 5. Page Contact 6. Page Article TABLE DES COULEURS - Orange = #EF8400 - Gris foncé = #3F3E41 - Rose = #EFE7E4 - Gris = #F3F3F3 */ /*------------ 1. PANNEAU de LOGIN */ /* Name: Nice Login and Signup Panel using Mootools 1.2 Tutorial URI: http://web-kreation.com/demos/login_form_mootools_1.2/ Author: Jeremie Tisseau Author URI: http://web-kreation.com/ Date: August 2008 The CSS, XHTML and design is released under Creative Common License 2.5: http://creativecommons.org/licenses/by-sa/2.5/ */ /* Login Panel */ #top {padding:4px 0;width:985px;margin:0 auto;text-align:right;} /* toggle effect - show/hide login*/ #login {width: 100%;color: white;background:/*url(../images/fond-login.gif) no-repeat 65% bottom */#3F3E41;overflow: hidden;position: relative;z-index: 3;height: 0;} #login a {color: #EF8400;} #login a:hover {color:#fff;} #login .loginContent {width:985px;height:65px;margin:0 auto;padding-top:25px;text-align:right;} #login .loginContent .right {text-align:right;font-size: 0.8em;color:#CDCDCD;} #login .loginContent form {margin: 0 0 10px 0;height: 26px;} #login .loginContent input.field {border: 1px solid #6E6C72;background:#EFE7E4;margin:4px 5px 0 0;color:#3F3E41;height:16px;} #login .loginContent input:focus.field {background:#EF8400;color:#fff;} #login .loginContent input.button_login {width:58px;height:20px;cursor:pointer;border:none;background:url(../images/btValider.gif) no-repeat;} #login .loginClose {display:block;position:absolute;right:15px;top:10px;width:37px;font-size:0.8em;text-align:left;} #login .loginClose a {display:block;width:100%;height:10px;background:url(../images/puceBasOrange.gif) no-repeat right bottom;padding-right: 10px;} /*------------ 2. STRUCTURE */ #bando, #flash, #pied {margin:0 auto;width:985px;text-align:left;} #bando {background:url(../images/fond-bando.jpg) repeat-x #EFE7E4;height:115px;} #bando p {float:left;display:inline;} #bando dl {float:right;display:inline;width:132px;height:115px;border-left:1px solid #FFFFFF;border-right:1px solid #C8BFBC;} #bando dt a {display:block;width:90%;height:58px; background-repeat:no-repeat; background-position:15px 35px;text-indent:-5000px;} #bando #mn_ent dt a {background-image:url(../images/menu/menu-entreprise.gif);} #bando #mn_int dt a {background-image:url(../images/menu/menu-internet.gif);} #bando #mn_mod dt a {background-image:url(../images/menu/menu-modules.gif);} #bando #mn_con dt a {background-image:url(../images/menu/menu-contact.gif);} #bando dd {font-size:0.8em;color:#877E7B;padding:0 10px 0 15px;} #bando dd a {color:#877E7B} #bando dl:hover {background:url(../images/menu/menu-rollover.gif) no-repeat center bottom #EF8400;} #bando dl:hover dd a {color:#fff;} #bando #mn_ent:hover dt a {background-image:url(../images/menu/menu-entreprise_ON.gif);} #bando #mn_int:hover dt a {background-image:url(../images/menu/menu-internet_ON.gif);} #bando #mn_mod:hover dt a {background-image:url(../images/menu/menu-modules_ON.gif);} #bando #mn_con:hover dt a {background-image:url(../images/menu/menu-contact_ON.gif);} #bdEnt #mn_ent, #bdInt #mn_int, #bdApp #mn_mod, #bdCon #mn_con {background:url(../images/menu/menu-rollover.gif) no-repeat center bottom #EF8400;} #bdEnt #mn_ent dt a {background-image:url(../images/menu/menu-entreprise_ON.gif);} #bdInt #mn_int dt a {background-image:url(../images/menu/menu-internet_ON.gif);} #bdApp #mn_mod dt a {background-image:url(../images/menu/menu-modules_ON.gif);} #bdCon #mn_con dt a {background-image:url(../images/menu/menu-contact_ON.gif);} #bdEnt #mn_ent dd a, #bdInt #mn_int dd a, #bdApp #mn_mod dd a, #bdCon #mn_con dd a {color:#fff;} #flash {height:311px;background:#EFE7E4;text-align:center;} #contenu {margin:0 auto;width:945px;text-align:left;background:#EFE7E4;border-right:1px solid #C8BFBC;border-bottom:4px solid #E2D3CE;padding:0 20px 10px 20px;} #pied {padding:10px 0 0 0;font-size:0.9em;} #pied ul {list-style:none;margin:0 0 0 20px;} #pied li {display:inline;float:left;border-right:1px solid #877E7B;padding:0 5px 0 0;margin:0 5px 0 0;} #pied a {color:#877E7B;} #pied a:hover {color:#3E3E40;} #credits {float:right;margin:0 20px 0 0;} #credits a {cursor:help;} #cale {clear:both;font-size:0.1em;height:1px;} /*------------ 3. PAGE ACCUEIL */ #h1index h1{text-indent:-5000px;} #edito {width:441px;float:left;display:inline;margin:20px 0 0 0;} #edito h2 {text-indent:-5000px;background:url(../images/TITRE_edito.jpg) no-repeat;height:31px;font-size:0.5em;} #edito #editoTexte {background:#fff;border-left:2px solid #DAD0CC;border-right:2px solid #DAD0CC;padding:10px 20px;text-align:justify;} #edito #editoTexte p {margin:0 0 10px 0;} .lettrine {font-weight:bold;font-size:1.4em;} .citation {float:right;width:167px;background:url(../images/citationBas.gif) no-repeat left bottom #EFEFEF;margin:0 0 0 20px;} .citation p {background:url(../images/citationHaut.gif) no-repeat left top;padding:10px;font-weight:bold;color:#3F3E41;text-align:center;} #edito #editoTexte img {float:left;margin:0 10px 0 0;border:1px solid #000;} #edito #editoPied {background:url(../images/edito-pied.jpg) no-repeat;padding:12px 0 30px 20px;font-size:0.9em;} #references {float:left;display:inline;width:480px;margin:30px 0 0 15px;position:relative;height:250px;} #references h2 {background:url(../images/TITRE_references.gif) no-repeat;height:15px;font-size:0.8em;text-indent:-5000px;} #carrousel {position:absolute;z-index:100;top:-15px;left:0;} #cacheCarrousel {position:absolute;z-index:101;top:155px;left:0;background:#EFE7E4;width:31px;height:30px;} #articles {width:480px;margin:0 0 0 15px;float:left;} #articles h2 {background:url(../images/TITRE_articlesfond.gif) no-repeat;height:19px;font-size:0.8em;text-indent:-5000px;margin:0 0 8px 0;} #articles #lstArticles {border:1px solid #CFC1BD;height:192px;background:url(../images/fond-carrousel-article.jpg) repeat-x;} /* ----------------IMAGE SLIDER------------- */ #SlideItMoo_outer {display:block;position:relative;} /* create custom forward-backward buttons for this container */ #SlideItMoo_outer .SlideItMoo_forward {display:block;position:absolute;cursor:pointer;width:28px;height:192px;top:0;right:0;background:url(../images/fond-carrousel-droite.jpg) no-repeat center;} #SlideItMoo_outer .SlideItMoo_back {display:block;position:absolute;cursor:pointer;width:28px;height:192px;top:0;left:0;background:url(../images/fond-carrousel-gauche.jpg) no-repeat center;} /* the width is set to show the number of thumbnails that will be visible */ #SlideItMoo_inner{ position:relative;overflow:hidden;margin:0px auto 0px;padding:10px 0px 10px; width:480px ; /* set a display width to make the slider look good in case js is disabled */ } /* the thumbnails container; set a width on it so everything will be fine */ #SlideItMoo_items {display:block;position:relative;} /* single element design */ #SlideItMoo_items div.SlideItMoo_element {display:inline;font-size:0.9em;float:left;margin:0 10px;width:196px;background:url(../images/coin-BG-lstArticles.gif) no-repeat left bottom #3E3E41;} #SlideItMoo_items a {clear:both;display:block;height:172px;color:#fff;} #SlideItMoo_items a img {margin:0 0 8px 0;} #SlideItMoo_items a span {padding:0 10px;} #SlideItMoo_items a span.slideTitre {text-transform:uppercase;font-size:1em;font-weight:bold;} /*------------ 4. PAGE TYPE */ #colonneGauche {float:left;display:inline;} #encart {width:370px;background:url(../images/arrondi-HD_orange.gif) no-repeat top right #EF8400;padding:20px 20px 0 20px;margin:50px 0 0 0;color:#fff;text-align:justify;} #encart h2 {font-size:1.2em;font-weight:bold;background:url(../images/puce-h2_orange.gif) no-repeat left center;padding:0 0 0 12px;} #encart p {padding:0 0 15px 0;} #encart ul {margin:0 30px 15px 30px;} #piedEncart {width:410px;background:url(../images/arrondi-BG_orange.gif) no-repeat bottom left #EF8400;height:15px;} #colonneDroite {float:left;width:516px;display:inline;background:url(../images/arrondi-BG_blanc.gif) no-repeat bottom left #fff;padding:0 0 15px 0;} #blabla {padding:20px 30px 0 30px;background:url(../images/arrondi-HD_blanc.gif) no-repeat top right #fff;text-align:justify;} #blabla h1 {font-size:2.5em;font-weight:normal;color:#3E3E40;background:url(../images/puce-h1.gif) no-repeat left center;padding:0 0 0 20px;margin:0 0 10px 0;} #blabla h1 span {color:#EF8400;} #blabla h2{text-transform:uppercase;color:#EF8400;font-size:1.2em;font-weight:bold;margin:0 0 10px 0;background:url(../images/fond-h2.gif) no-repeat #fff;padding:5px 10px 0 24px;} #blabla h2 a, #blabla h2 a:hover {color:#EF8400; text-decoration:none;} #blabla h2 span {background:#fff;padding:0 10px 0 0;} /*#blabla h2 {font-size:1.2em;font-weight:bold;color:#3E3E40;background:url(../images/puce-h2_blanc.gif) no-repeat left center; border-width: 0 0 0 0;border-color:#EF8400;border-style:solid;margin:30px 0 7px 0; padding:0 0 0 10px;}*/ #blabla p {margin:0 0 15px 0;} #blabla p.lien {font-style:italic;font-weight:bold;} #blabla p.lien a {color:#3E3E40;} #blabla p.lien a:hover {color:#EF8400;} #blabla p.lien img {vertical-align:middle;margin:0 4px 0 0;} #blabla ul {list-style:none;background:#F3F3F3;margin:5px 10px 20px 10px;padding:10px;} #blabla ul li {background:url(../images/puce-liste.gif) no-repeat 0px 6px;padding:0 0 0 10px;} #blabla ul li strong {color:#EF8400;} /*------------ 5. PAGE CONTACT */ #blabla fieldset {border-width:1px 0 0 0;border-color:#EF8400;border-style:solid;margin:20px 0 0 0;} #blabla legend {text-transform:uppercase;color:#EF8400;font-size:1.2em;font-weight:bold;margin:0 0 10px 0;background:url(../images/puce-legend.gif) no-repeat #fff;padding:5px 10px 0 24px;} #blabla #voscoordonnees p {margin:0 0 5px 0;} #blabla #voscoordonnees label {display:inline;width:100px;border-bottom:1px dashed #C1A498;float:left;font-weight:bold;color:#3F3E41;padding:2px 0 2px 10px; background:url(../images/puce-liste.gif) no-repeat left center;} #blabla #voscoordonnees input[type=text] {border-width:0px 0px 1px 0px;border-style: solid;border-color:#C1A498;background:#EFE7E4;width:300px;padding:2px 5px;} #blabla #voscoordonnees input[type=text]:hover {background:#EF8400;color:#fff;} #blabla #voscoordonnees input[type=text].focus {background:url(../images/puce-input.gif) no-repeat left center #EF8400;color:#fff;padding:2px 5px 2px 15px;width:290px;} #blabla #votredemande label {margin:0 0 0 30px;} #blabla #votredemande p {margin:0 0 10px 0;} #blabla textarea {width:95%;overflow:auto;border:1px solid #C1A498;padding:10px;} #googleMap {position:relative;} #cacheGoogleMap {position:absolute;z-index:1000;top:0;left:405px;background:url(../images/cacheGoogleMapHD.gif) no-repeat;width:16px;height:17px;} #cacheGoogleMap2 {position:absolute;z-index:1000;top:297px;left:0;background:url(../images/cacheGoogleMapBG.gif) no-repeat;width:16px;height:17px;} /*------------ 6. PAGE ARTICLE */ #AutresArticles {width:410px;margin:50px 0 0 0;} #AutresArticles h1 {background:url(../images/TITRE_articlesfond.gif) no-repeat;height:15px;font-size:0.8em;text-indent:-5000px;margin:0 0 8px 0;} #AutresArticles h3 {font-size:1.1em;font-weight:bold;text-transform:uppercase;color:#3F3E41;padding:0 0 2px 0;} #AutresArticles div {padding:10px 0 10px 154px;border-bottom:1px solid #DAD0CC;font-size:0.9em; background-repeat:no-repeat; background-position:left center;} #AutresArticles div p {padding:0 0 5px 0;} /*------ Gestion de la liste des articles */ #ArtMaitrise {background-image:url(../photos/IMG_maitrise_mini.jpg);} #ArtMesure {background-image:url(../photos/IMG_mesure_mini.jpg);} #ArtPhp {background-image:url(../photos/IMG_php_mini.jpg);} #ArtReferencement {background-image:url(../photos/IMG_referencement_mini.jpg);} /*.bdMaitrise #ArtMaitrise, .bdMesure #ArtMesure, .bdPhp #ArtPhp, .bdReferencement #ArtReferencement {display:none;}*/ #bdArt #colonneDroite {background:url(../images/piedArticle.gif) no-repeat bottom left #fff;} #ArtSavoir {float:right;width:200px;text-align:left;background:url(../images/Ensavoirplus.gif) no-repeat left 12px;padding:8px 0 0 30px;font-size:0.9em;color:#3E3E40;} #ArtSavoir a {color:#3E3E40;} #ArtSavoir a:hover {color:#EF8400;} #ArtSignature {margin:0 0 0 30px;font-size:0.9em;padding:8px 0 0 0;color:#3E3E40;} #auteur {float:left;border:1px solid #000;margin:0 10px 0 0;} .textepied{ color:#999; font-size:10px; text-align:center;} .textepied a, .textepied a:hover{ color:#999; font-size:10px;} .textepied h2{font-size:10px; float:left;}