/* CSS issu des tutoriels css.alsacreations.com */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.65em; color:#666666; margin:0; padding:0; } #conteneur { position: relative; width: 998px; margin: 0 auto; background: url('images/maquette/back_conteneur.jpg') top left repeat #ffffff; } #header {height:185px; background: url('images/maquette/back_header.jpg') top left no-repeat #ffffff;} #header .logo {position:absolute; top:30px; left:83px;} #header .icone {position:absolute; top:180px; left:83px; } #motscle {height:15px; margin:0 0 0 230px; font-size:0.85em; text-align:center; color:#CCCCCC;} .vert{color:#98c10f;} .bleu{color:#0d70b4;} .orange{color:#f39c0f;} .rouge{color:#ea4f1f;} .grisclair{color:#666666;} .griscorps{color:#333333;} .vertg{color:#98c10f; font-weight:bold;} .bleug{color:#0d70b4; font-weight:bold;} .orangeg{color:#f39c0f; font-weight:bold;} .rougeg{color:#ea4f1f; font-weight:bold;} .grisclairg{color:#666666; font-weight:bold;} .griscorpsg{color:#333333; font-weight:bold;} a{color:#666666; text-decoration:none;} a:hover{ text-decoration:underline;} ul{ margin:5px; margin-left:22px; list-style-position:inside; padding:0;} li{ line-height:1.2; margin:0;} .dec{ position:absolute; right:10px; bottom:9px; width:120px;} .img01{ float:right; margin: 0 10px 5px 5px;} .img02{ float:right; margin: 35px 0 0 10px;} .img03{ margin:5px; display: block; margin-left: auto; margin-right: auto} /* COLONNE GAUCHE */ #gauche { position: absolute; left:0; width:196px; /*largeur total 285px*/ padding-left:82px; padding-right:7px; padding-top:30px; background: url('images/maquette/back_gauche.jpg') top left no-repeat; } #gauche h1{ font-size:1em; margin:0; margin-bottom:5px; margin-left:15px;} #gauche ul{ margin:0; margin-left:15px; list-style-position:inside; padding:0;} #gauche li{ line-height:1.2; margin:0;} #gauche a{ text-decoration:none; color:#999999;} #gauche a:hover{ text-decoration:underline; color:#666666;} #gauche form{ height:128px; width:188px; background:url('images/maquette/icone_nl.gif') top left no-repeat; margin:auto;} #gauche input.nl01{ height:15px; width:155px; margin:70px 0 0 15px; color:#999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; border:0;} #gauche button { background:0; height:25px; width:32px; border:0; float:right; margin: 10px 15px 0 0;} #gauche p { margin: 15px 0 0 15px; font-size:0.9em; color:#999999;} /* PADTITRE */ #padtitre { height:190px; margin:0; margin-left:285px; margin-bottom:10px; width:647px; padding-right:66px; /*largeur total 713px*/ background: url('images/maquette/back_padtitre.jpg') right bottom no-repeat; } #padtitre h1{ font-size:1em; height:22px; margin: 5px 0 0 5px; padding-top:10px; padding-left:17px;} #padtitre h1.bleu{ color:#0d70b4; background: url('images/maquette/icone_fleurb.gif') top left no-repeat;} #padtitre h1.vert{ color:#98c10f; background: url('images/maquette/icone_fleurv.gif') top left no-repeat;} #padtitre h1.orange{ color:#f39c0f; background: url('images/maquette/icone_fleuro.gif') top left no-repeat;} #padtitre h1.rouge{ color:#ea4f1f; background: url('images/maquette/icone_fleurr.gif') top left no-repeat;} #padtitre p{ margin:0 300px 10px 5px; padding:0; padding-left:17px;} /* GALERIE PHOTO "alsacréations"*/ div#galerie {width:250px; margin: 0 0 0 22px;} ul#galerie_mini {margin: 0; padding: 0; list-style-type: none;} ul#galerie_mini li {float: left;} ul#galerie_mini li a img {margin: 2px 8px 2px 0; border:1px solid #999999;} dl#photo {clear: both; margin: 0 auto;} dl#photo dt {font-size: 1.3em; font-weight:bold; font-style:italic; margin: 0 0 10px 0; } dl#photo dd {margin: 0;} dl#photo img {border:0; border:1px solid #999999;} /* COLONNE DROITE */ #droite { position: absolute; right:0; width:317px; padding-right:56px; margin-left:10px; /*largeur total 383px*/ } #droite .pads{ position:relative; /* pad page index colonne de droite */ height:153px; width:314px; margin:0; margin-bottom:10px; background: url('images/maquette/back_pads.jpg') top left no-repeat; } #droite h1.bleu{font-size:1em; height:22px; margin:5px 0 0 5px; padding: 10px 0 0 17px; color:#0d70b4; background: url('images/maquette/icone_fleurb.gif') top left no-repeat;} #droite h1.vert{font-size:1em; height:22px; margin:5px 0 0 5px; padding: 10px 0 0 17px; color:#98c10f; background: url('images/maquette/icone_fleurv.gif') top left no-repeat;} #droite h1.orange{font-size:1em; height:22px; margin:5px 0 0 5px; padding: 10px 0 0 17px; color:#f39c0f; background: url('images/maquette/icone_fleuro.gif') top left no-repeat;} #droite h1.rouge{font-size:1em; height:22px; margin:5px 0 0 5px; padding: 10px 0 0 17px; color:#ea4f1f; background: url('images/maquette/icone_fleurr.gif') top left no-repeat;} #droite h1.animb{font-size:1em; height:22px; margin:0; padding: 10px 0 0 17px; color:#0d70b4; background: url('images/maquette/back_padb_dr01.jpg') top left no-repeat;} #droite h1.animv{font-size:1em; height:22px; margin:0; padding: 10px 0 0 17px; color:#98c10f; background: url('images/maquette/back_padv_dr01.jpg') top left no-repeat;} #droite h1.animo{font-size:1em; height:22px; margin:0; padding: 10px 0 0 17px; color:#f39c0f; background: url('images/maquette/back_pado_dr01.jpg') top left no-repeat;} #droite h1.animr{font-size:1em; height:22px; margin:0; padding: 10px 0 0 17px; color:#ea4f1f; background: url('images/maquette/back_padr_dr01.jpg') top left no-repeat;} #droite .diapbleu{font-size:1em; height:26px; margin:0; padding:12px 0 0 30px; color:#0d70b4; font-weight:bold; background: url('images/maquette/back_diapb_dr01.jpg') top left no-repeat;} #droite .diapvert{font-size:1em; height:26px; margin:0; padding:12px 0 0 30px; color:#98c10f; font-weight:bold; background: url('images/maquette/back_diapv_dr01.jpg') top left no-repeat;} #droite .diaporange{font-size:1em; height:26px; margin:0; padding:12px 0 0 30px;; color:#f39c0f; font-weight:bold; background: url('images/maquette/back_diapo_dr01.jpg') top left no-repeat;} #droite .diaprouge{font-size:1em; height:26px; margin:0; padding:12px 0 0 30px; color:#ea4f1f; font-weight:bold; background: url('images/maquette/back_diapr_dr01.jpg') top left no-repeat;} #droite h2{font-size:1em; font-weight:normal; margin:0; margin-left:15px;} #droite p{ margin:0; margin-left:5px; padding:0; padding-left:10px;} #droite p.diap{ margin:10px 0 0 0; padding:0; } #droite .anime{margin:0; padding:10px 10px 0 0; background: url('images/maquette/back_pad_dr02.jpg') bottom left no-repeat;} #droite .backdiap{height:54px; width:314px; background: url('images/maquette/back_diap_dr02.jpg') top left no-repeat; vertical-align:middle;} #droite img.diap{ float:right; margin:0; margin-top:5px; margin-right:10px; border:0;} /* CORPS */ #corps { height:auto !important; height:400px; min-height:400px; margin-left: 285px; margin-right:383px; padding-bottom:5px; } /* PADS HOMEPAGE */ #corps .pads{ position:relative; height:153px; width:324px; margin:0; margin-bottom:10px; background: url('images/maquette/back_pads.jpg') top left no-repeat; } #corps h1.bleu{ font-size:1em; height:22px; margin: 5px 0 0 5px; padding-top:10px; padding-left:17px; color:#0d70b4; background: url('images/maquette/icone_fleurb.gif') top left no-repeat;} #corps h1.vert{ font-size:1em; height:22px; margin: 5px 0 0 5px; padding-top:10px; padding-left:17px; color:#98c10f; background: url('images/maquette/icone_fleurv.gif') top left no-repeat;} #corps h1.orange{ font-size:1em; height:22px; margin: 5px 0 0 5px; padding-top:10px; padding-left:17px; color:#f39c0f; background: url('images/maquette/icone_fleuro.gif') top left no-repeat;} #corps h1.rouge{ font-size:1em; height:22px; margin: 5px 0 0 5px; padding-top:10px; padding-left:17px; color:#ea4f1f; background: url('images/maquette/icone_fleurr.gif') top left no-repeat;} #corps h1.bleu2{height:16px; font-size:1em; margin: 10px 10px 10px 22px; color:#0d70b4; border-bottom:1px solid #b5d4e8;} #corps h1.vert2{height:16px; font-size:1em; margin: 10px 10px 10px 22px; color:#98c10f; border-bottom:1px solid #dfecb6;} #corps h1.orange2{ height:16px; font-size:1em; margin: 10px 10px 10px 22px; color:#f39c0f; border-bottom:1px solid #fbdfb2;} #corps h1.rouge2{ height:16px; font-size:1em; margin: 10px 10px 10px 22px; color:#ea4f1f; border-bottom:1px solid #f7c8b8;} #corps h2{font-size:1em; font-weight:normal; margin:0; margin-left:22px;} #corps a.bleu{color:#0d70b4; text-decoration:none;} #corps a.vert{color:#98c10f; text-decoration:none;} #corps a.orange{color:#f39c0f; text-decoration:none;} #corps a.rouge{color:#ea4f1f; text-decoration:none;} #corps a:hover{text-decoration:underline;} #corps p{ margin:0 10px 0 22px; padding:0;} #corps .icon{ height:28; width:28; vertical-align:middle;} #corps table{ margin:0 10px 0 22px; padding:0; font-size:1em;} #corps td.text{ padding:0 0 0 10px; text-align:left;} #corps input, textarea{ font: normal 1em Verdana, Arial, Helvetica, sans-serif; background:#fff; color:#333333; border:1px solid #f7c8b8;} #corps th, td { margin:0; padding:0; text-align:center; line-height:1.5;} /* FOOTER */ #footer1 { height: 135px; background: url('images/maquette/back_footer.jpg') top right no-repeat;} #footer1 .bf1{ float:right; margin-right:22px; margin-top:15px; width:185px; height:105px;} #footer1 .bf2{ float:right; margin-right:24px; margin-top:15px; width:185px; height:105px;} #footer1 .bf3{ float:right; margin-right:83px; margin-top:15px; width:180px; height:105px;} #footer1 h1{ font-size:1em; margin:0 0 5px 5px;} #footer1 p { margin:0; margin-left:5px;} #footer1 ul{ margin:0; margin-left:5px; list-style-position:inside; padding:0;} #footer1 li{ line-height:1.2; margin:0;} #footer2 { height:30px; padding-right:56px; text-align:right;} #footer2 p{ margin:0; padding:0 0 0 200px;}