@import url(formulaires.css);
@import url(pages.css);
body{margin:0 0 -30px; padding:0; font-family:trebuchet ms; background:#507184 url(../img/decors/motif2.jpg) top left repeat-x; min-height:100%}

#page{position:relative; width:100%}

/* HAUT DE PAGE (Header, menu, compte etc...)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
#haut{width:854px; height:257px; margin:0 auto}

/* TITRE, SLOGAN ET BANNIERE */
.gauche{float:left; width:497px; height:257px; margin:0 0 0 0; padding:0; background:bottom left no-repeat}
.gauche.soldes{ background-image:url(../img/decors/gauche2.png)}
.gauche.nosoldes{ background-image:url(../img/decors/gauche3.png)}

/* ANCIEN #gauche #titre{display:block; text-indent:-9999px; margin:175px 0 -9px 0px; padding:0; width:249px; height:59px; background:url(../img/decors/titre.png) top left no-repeat}*/
.gauche #titre{display:block; text-indent:-9999px; margin:183px 0 7px 0px; padding:0; width:267px; height:34px; background:url(../img/decors/titre2.png) top left no-repeat}
.gauche p{color:#afb2b4; font-family:verdana; font-size:14px; margin-left:20px; padding:0}

#droite{float:right; width:357px; height:256px; margin:0 0 0 0; padding:0; background:url(../img/decors/droite.png) bottom left no-repeat}
/* BARRE IDENTIFICATION */
#ident{width:345px; height:26px; padding:0; margin:49px 0 6px 0; background:url(../img/decors/ident.png) top left no-repeat}
#ident p{margin:0; padding:4px 0 0 5px; font-size:14px; color:#678fa6}
#ident p span{color:#c1d9e6}
#ident p a#deco{margin:-22px 0 0 185px; padding:5px 0px 0 20px; width:155px; display:block; font-size:14px; color:#a25b5d; text-decoration:none; background:url(../img/decors/reflet-ident.png) top left no-repeat}
#ident p a#co{margin:-22px 0 0 185px; padding:5px 0px 0 20px; width:155px; display:block; font-size:14px; color:#649F4F; text-decoration:none; background:url(../img/decors/reflet-ident.png) top left no-repeat}
#ident p a:hover#deco,  #ident p a:hover#co{background:url(../img/decors/reflet-ident2.png) top left no-repeat; color:#fff}
#ident p #deco img,  #ident p #co img{border:none; vertical-align:middle; margin-top:-3px}

/* GESTION MENU 3 BOUTONS */
#gestion{margin:0 0 0 25px; padding:0; width:380px; height:19px; position:relative}
#gestion ul, #prelude #profil ul{margin:0; padding:10px 10px 0 0; list-style:none}
#gestion li, #prelude #profil li{display:inline; margin:0 10px 0 5px; padding:0; line-height:17px; height:17px}
#gestion li a{background:url(../img/decors/menu-compte1.png) no-repeat left top; text-decoration:none; float:left; margin:0 5px 0 5px; padding:0 0 0 5px}
#gestion li a span{background:url(../img/decors/menu-compte2.png) no-repeat right top; color:#fff; float:left; display:block; padding:1px 12px 3px 6px; color:#c7d3d9; font-weight:normal; font-family:arial; font-size:15px}
#gestion li strong{visibility:hidden; margin:0; padding:0}
#gestion li a:hover, #prelude #profil li a:hover{background-position:0% -21px}
#gestion li a:hover span{color:#446b81; background-position:100% -21px}

/* PANNEL COMPTE INFOS */
#pannel{height:113px; width:327px; margin:25px 0 10px 8px; padding:0 0 0 0; float:left; background:url(../img/decors/fond-compte.jpg) top left repeat-x; border:1px solid #3f5e6f}
#pannel h3{position:relative; margin:-20px 0 0 4px; font-weight:normal; color:#678fa6; font-size:17px}
#pannel #avatar{margin:5px 6px 0 6px; padding:0; float:left}
#pannel ul{float:left; margin:3px 0 0 0; padding:0}
#pannel ul li{list-style:none; color:#4c85a5; font-size:15px; line-height:16px; text-align:left}
#pannel ul li#pseudo{color:#c3dbe9; font-size:17px; text-transform:uppercase}
#pannel ul li#prix{color:#fff; font-size:15px; background:#3a602c; padding:0 0 2px 5px; margin:5px 0 0 -5px; line-height:20px; width:216px}
#pannel ul li#prix span{color:#68bc7c}
#pannel ul li#prix span, #pannel ul li#vip span{font-weight:bold}
#pannel ul li#prix span img, #pannel ul li#vip span img{vertical-align:middle; margin-top:-5px}
#pannel ul li#vip{color:#ffb2b2; background:#692d36; padding:1px 0 1px 5px; margin:0 0 0 -5px; line-height:20px; width:216px}
#pannel ul li#vip span{color:#e01e1e}
#pannel ul li#vip #help{color:#fff; font-size:12px; text-decoration:none; margin:0; padding:0}

#pannel p{margin:5px; padding:0; color:#cbdbe4; font-size:13px}

/* MENU ICONES JUSTE EN DESSOUS */
#menu #infos{margin:-40px -12px 0 20px; float:right; padding:0; width:370px; clear:both; text-align:center}
#menu #infos li{display:inline; margin:0 25px 0 0; padding:0 0 0 0; line-height:25px}
#menu #infos li a{text-decoration:none; color:#cbdbe4; font-size:17px}
#menu #infos li a:hover{color:#9BB2BF}
#menu #infos li a img{border:none; vertical-align:middle; margin:-2px 0 0 0; padding:0}

/* MENU BARRE BLEU
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
#menu{width:100%; height:44px; margin:-14px 0 0 0; padding:0; background:url(../img/decors/menu.png) top left repeat-x; position:relative}
#menu div{width:854px; margin:0 auto}
#menu ul#navigation{height:44px; float:left; margin:-8px 0 0 1px; padding:0; background:url(../img/decors/menu.jpg) top left no-repeat}
#menu ul#navigation li{float:left; list-style:none; margin:0 0 0 0; padding:0 2px 0 0; height:44px; line-height:32px; background:url(../img/decors/menu-sepa.jpg) right top no-repeat}
#menu ul#navigation li a{color:#245978; text-decoration:none; text-transform:uppercase; font-weight:500; font-size:16px; padding:5px 11px; margin:0 0 0 0}
#menu ul#navigation li a:hover{background:url(../img/decors/menu-hover.jpg) left top repeat-x; color:#fff}

/* CONTENU
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
#contenu{width:100%; margin:0; padding:0 0 30px 0; clear:both}

#principal .retour, #prelude .retour, p a, table#evenements td.msg a, #principal ul#aide li a{color:#8EB6CF; font-size:14px; text-decoration:none; margin-top:15px}
#principal .retour:hover, #prelude .retour:hover, p a:hover, table#evenements td.msg a:hover, #principal ul#aide li a:hover{color:#A7CADF}
#principal #abs.retour, #prelude #abs.retour{position:absolute; margin:-10px 0 0 0; padding:0}

/* BLOC PRINCIPAL TEXTE */
#principal{clear:both; width:832px; margin:15px auto 0 auto; padding:0; background:#416479}
#principal p{color:#102d3f; font-size:14px; margin:0; padding:5px 15px}
#principal h3{color:#7eafcc; font-size:18px; margin:0 0 10px 0; padding:15px 0 0 15px; background:url(../img/decors/arrondi-contenu.png) top left no-repeat; width:848px; text-align:left}
#principal h5, #prelude h5, #principal #fiche h4{margin:30px 0 20px 0; padding:0 0 0 20px; color:#d8d8d8; font-size:14px; border-bottom:1px solid #777; background:url(../img/decors/h5-inscr.png) bottom left repeat-x; height:20px}
#contenu div.barrondi{margin:0; padding:0 0 0 15px; background:url(../img/decors/arrondi-contenu2.png) bottom left no-repeat; width:848px; clear:both; height:14px}

#principal p#soldedates strong { font-size:17px }

/* SALONS */
#principal #infos-salons input#submit{width:378px; height:31px; background:none; border:none; opacity:.80; margin:35px 0 -14px 230px; position:relative; z-index:999}
#principal #infos-salons input#submit:hover{background:none; border:none; opacity:1}

/* CHANGER INFOS */
#prelude .forms input#submit2{width:378px; height:31px; background:none; border:none; opacity:.80; margin:35px 0 -35px 230px; position:relative; z-index:999; clear:both}
#prelude .forms input#submit2:hover{background:none; border:none; opacity:1}

/* PIED DE PAGE
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
#pied{width:100%; height:69px; background:url(../img/decors/pied.png) top left repeat-x; clear:both; margin:0; padding:0}
#pied p{text-align:center; color:#9ebdce; font-size:13px; padding:27px 0 0; margin:0}
#pied p a{text-align:center; color:#cddfea; text-transform:uppercase; text-decoration:none; font-size:15px}
#pied p a:hover{text-align:center; color:#6fabce; text-decoration:none}