/* ***************************************** *** */ /* CSS DOCUMENT style.css */ /* PROJET : Site Iprestige */ /* DATE DEBUT : JUIN 2011 */ /* A. Mortreuil www.audreymortreuil.com */ /******************************************************** STRUCTURE ***********************************************************************/ * { margin:0; padding:0;} html { font-size:100%; margin:0; padding:0; } body { margin:0; padding:0; background:#000000 url(img/fond-degrade.png) repeat-x; height:650px; line-height:35px; font:.9em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; } #global { margin:20px auto; width:980px; } #header { background:url(img/entete-carbon.png) 0 0 no-repeat; width:980px; height:202px;} .logo { float:left; width:223px; height:199px; margin:0; padding:0; } .compteurs { float:right; background:url(img/compteurs.gif) 0 0 no-repeat; width:270px; height:202px;} h1 { font:1.2em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;} A { color:#ff000b; } H3 { color:#525252; margin:10px 0 0 0; font:1em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; } P { font:.9em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; } IMG { border:0; } UL { margin:0; padding:0; } UL LI { list-style-type:none; margin:0; padding:0; } FORM { margin:0; padding:0; } INPUT { text-align:left; font-size:1em; } SELECT { font-size:1em; } INPUT.btRadio { vertical-align:-2px;} HR { clear:both; height:1px; border-top:1px solid #dcdcdc; border-bottom:0; margin:10px 0;} .clear { clear:both; height:0px; border:0; margin:0; padding:0; font-size:0px; } .center { text-align:center; } .centre { text-align:center; } .floatLeft { float:left; } .floatRight { float:right; } .imgLeft IMG { float:left; margin:0 10px 10px 0; } .imgRight IMG { float:right; margin:0 0 10px 10px; } EM.normal { font-style:normal; } H2.black { color:#000000; } H3.black { color:#000000;} .bold { font-weight:bold; } .red { color:#ff000b;} .fontsize2em { font-size:2em;line-height:11px;} .justify { text-align:justify;} .colLeft { float:left; width:440px; margin:0 25px 0 0; } .colRight { float:left; width:440px; } /* ********************************************** MENU ************************************************************* */ .menu { list-style-type:none; display:block; text-align:center; width:980px; background-color:#000000; } .menu UL { padding:0; margin:0; list-style-type:none; text-shadow:2px 0 0 #000000; background-color:#000000;} .menu UL LI { background-color:#000000; float:left; width:196px; color:#ffffff; text-align:center; } .menu UL LI A { color:#ffffff; text-decoration:none; list-style-type:none; text-align:center; } .menu UL LI.on A { color:#ff000b; text-decoration:none; text-align:center; } .menu LI.flag A { width:25px; text-decoration:none; } .menu UL LI A:hover { color:#ff000b; } .alubrosse { background:url(img/alu-brosse.png) 0px 0px no-repeat; margin:0; width:980px; height:30px;} .alubrosse P { text-align:center; color:#ffffff; padding:2px; text-shadow:2px 0 0 #525252; font-size:18px; } /* ********************************************** CONTENU INDEX ********************************************************* */ #content { position:relative; background-color:#ffffff; padding:0px; border:1px solid #ffffff; } #content P { padding:0px; font:.9em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height:20px;} #content UL LI { text-align:justify; margin-left:20px; /* padding:10px; */ line-height:22px; } .logosbas { position:absolute; bottom:0; margin-left:10px; float:left; background:#ffffff url(img/logos-bas.png) 0px 0px no-repeat; width:397px; height:50px; } .iprestige { float:right; background:#ffffff url(img/logo-gris.png) 0px 0px no-repeat; width:99px; height:65px;} .accueilTexte P { margin:0px 30px 0 50px; width:650px; float:left; text-align:justify;} .colrightAccueil { float:left; margin:0px 0 0 0; width:210px;} .btaccueil A { display:block; text-align:center; color:#ffffff; text-decoration:none; font-size:0.73em; width:149px; height:32px; margin:10px 10px 10px 20px; padding:13px 10px 10px 33px; background:transparent url(img/btaccueil.gif) 0px 0px no-repeat; } .btaccueil A:hover { font-size:0.75em; color:red; width:149px; height:32px; margin:10px 10px 10px 20px; padding:13px 10px 10px 33px; text-decoration:none; } .boutonsRight { margin:10px 0 0 30px; width:167px; } .boutonsRight A { padding-top:20px; } /* *********** animation accueil************ */ #slider { width:210px; height:142px; position:relative; overflow:hidden; } #sliderContent { width:410px; position:absolute; top:0; margin-left:0; } .sliderImage { float:left; position:relative; display:none; } .sliderImage span { position:absolute; font:10px/15px Arial, Helvetica, sans-serif; padding:5px; width:210px; background-color: #000; filter: alpha(opacity=70); -moz-opacity: 0.7;-khtml-opacity: 0.7; opacity: 0.7; color: #fff; display: none; } .clear { clear:both; } .sliderImage span strong { font-size:14px; } .top { top: 0; left:0; } .bottom { bottom: 0; left:0; } ul { list-style-type:none;} /* ********************************************** CONTENU SHOWROOM ****************************************************************************** */ .encart { _height:1%; float:left; margin:20px 0px 20px 20px; padding:0px; background:transparent url(img/encart.gif) 0px 0px no-repeat; width:213px; height:160px; } .encartV { _height:1%; float:left; margin:20px 0px 20px 20px; padding:0px; background:transparent url(img/encart-vendu.gif) 0px 0px no-repeat; width:213px; height:160px; } .encart h2 { font-size:13px; color:#525252; text-align:center; margin:8px 0 0 0; padding:0px; } .encartV h2 { font-size:13px; color:#6c6c6c; text-align:center; margin:8px 0 0 0; padding:0px; } .encart h3 { font-size:11px; color:#525252; text-align:center; margin:0 0 0 0; padding:0px; } .encartV h3 { font-size:11px; color:#6c6c6c; text-align:center; margin:0 0 0 0; padding:0px; } .encart IMG { display:block; margin:0px auto; border:1px solid #cccccc; width:130px; height:85px; } .encartV IMG { display:block; margin:0px auto; border:1px solid #cccccc; width:130px; height:85px; } .encart P { text-align:center; } .encartV P { text-align:center; } H2.soustitre { width:141px; height:45px; margin-left:50px; } a.adecouvrir { display:block; text-align:center; font-size:0.8em; color:#000000; text-decoration:none;} a.adecouvrir:hover { display:block; text-align:center; font-size:0.8em; color:#c30009; text-decoration:none;} /* ********************************************** CONTENU SHOW-MASERATI + SHOW MERCEDES****************************************************************************** */ .show-content { width:920px; margin:0 auto;} .bt-retour { margin:0px auto; padding:0px; } .bt-retour A { display:block; font-size:0.9em; margin:20px 0 20px 0; padding:18px 0 0 20px; background:transparent url(img/bouton-retour-hover.gif) 0px 0px no-repeat; width:228px; height:35px; text-align:center; color:#ffffff; text-decoration:none;} .bt-retour A:hover { font-size:0.9em; color:#ffffff; margin:20px 0 20px 0; padding:18px 0 0 20px; background:transparent url(img/bouton-retour.gif) 0px 0px no-repeat; width:228px; height:35px; text-decoration:none; } h1.avendre { background:transparent url(img/avendre.gif) 0px 0px no-repeat; width:917px; height:65px; } h1.vendues { background:transparent url(img/vendues.gif) 0px 0px no-repeat; width:917px; height:65px; } .description { /* padding:10px; */} UL.bloc { font-size:0.85em; width:290px; float:left; padding:0; margin:20px 10px 0 0; font-style:normal; } UL.bloc LI { padding:2px; margin:0;} .bloc H3 { background-color:#e9e9e9;padding:2px; text-align:center;} .amonavis { margin-top:20px; font-size:0.9em; text-align:justify; font-style:italic; line-height:20px; width:900px; } .amonavis H3 { background-color:#e9e9e9; margin:5px; text-align:center; width:890px; font-size:18px;} .amonavis .colLeft { float:left; width:430px; margin:0 20px 0 0; padding:5px; } .amonavis .colRight { float:left; width:430px; padding:5px;} /* *********** GALERIE Jquery *********/ #gallery { margin:20px auto; width:920px; } #gallery ul { list-style:none; } #gallery ul li { display:inline; float:left; margin:0 28px 10px 0;} #gallery ul img { border:3px solid #cccccc; box-shadow:1px 1px 3px #555; } #gallery ul a:hover img { border:3px solid #525252; box-shadow:1px 1px 3px #555; } #jquery-overlay { position:absolute; top: 0; left: 0; z-index:90; width:100%; height:500px; } #jquery-lightbox { position:absolute; top:0; left: 0; width: 100%; z-index: 100; text-align:center; line-height:0; } #jquery-lightbox a img { border:none; } #lightbox-container-image-box { position:relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #lightbox-container-image { padding:10px; } #lightbox-loading { position:absolute; top:40%; left:0%; height:25%; width: 100%; text-align:center; line-height:0;} #lightbox-nav { position:absolute; top:0; left:0; height:100%; width:100%; z-index:10; } #lightbox-container-image-box > #lightbox-nav { left:0; } #lightbox-nav a { outline:none;} #lightbox-nav-btnPrev, #lightbox-nav-btnNext { width:49%; height:100%; zoom: 1; display: block; } #lightbox-nav-btnPrev { left:0; float:left; } #lightbox-nav-btnNext { right:0; float:right;} #lightbox-container-image-data-box { font:10px 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; background-color: #fff; margin:0 auto; line-height:1.4em; overflow:auto; width: 100%; padding: 0 10px 0; } #lightbox-container-image-data { padding:0 10px; color: #666; } #lightbox-container-image-data #lightbox-image-details { width:70%; float: left; text-align: left; } #lightbox-image-details-caption { font-weight:bold; } #lightbox-image-details-currentNumber { display:block; clear:left; padding-bottom: 1em;} #lightbox-secNav-btnClose { width:66px; float:right; padding-bottom: 0.7em; } /* ********************************************** CONTENU RESEAUX ****************************************************************************** */ .facebook { float:left; width:280px; min-height:180px; padding:15px; } .facebook H2 { text-align:center; } .facebook P { text-align:center;} .facebook A.boutonFace { display:block; margin-left:35px; background:transparent url(img/bouton-face.png) 0px 0px no-repeat; width:200px; height:50px; } .facebook A.boutonFace:hover { display:block; margin-left:35px; background:transparent url(img/bouton-face-hover.png) 0px 0px no-repeat; width:200px; height:50px; } .youtube { float:left; width:280px; min-height:180px; padding:15px; } .youtube H2 { text-align:center; } .youtube P { text-align:center;} .youtube A.boutonYou { display:block; margin-left:35px; background:transparent url(img/bouton-you.png) 0px 0px no-repeat; width:200px; height:50px; } .youtube A.boutonYou:hover { display:block; margin-left:35px; background:transparent url(img/bouton-you-hover.png) 0px 0px no-repeat; width:200px; height:50px; } .twitter { float:left; width:280px; min-height:180px; padding:15px;} .twitter H2 { text-align:center; } .twitter P { text-align:center; width:310px; } .twitter A.boutonTwitter { display:block; margin-left:35px; background:transparent url(img/bouton-twitter.png) 0px 0px no-repeat; width:200px; height:50px; } .twitter A.boutonTwitter:hover { display:block; margin-left:35px; background:transparent url(img/bouton-twitter-hover.png) 0px 0px no-repeat; width:200px; height:50px; } /* ********************************************** LIVRE D OR ****************************************************************************** */ .commentaire { text-align:justify; margin:10px 30px 20px 10px; } .commentaire IMG { float:left; margin:0px 10px 0px 0; } .commentaire EM { line-height:20px; font-size:13px; } /* ******************************* CONTACT ************************/ #Formulaire { border:1px solid #cccccc; width:920px; margin:0 0 20px 20px; padding:5px; background:#e9e9e9 url(img/enveloppe.png) right 50px no-repeat; } #Formulaire label { width:150px; padding:10px; display:block; float:left; } #Formulaire select { width:80px; margin:5px 0 0 5px; display:block; float:left; } #Formulaire input[type=text] { width:250px; padding:5px; display:block; float:left; margin:5px; } #Formulaire textarea { font:0.9em 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; width:650px; padding:5px; display:block; float:left; margin:5px; } .contentPara { width:820px; margin:10px 0 10px 30px; line-height:23px; } .contentPara .liste UL LI { margin:0; line-height:23px; } .contentPara .colLeft { float:left; width:350px; margin-right:30px; } .contentPara .colRight { float:left; width:350px; } /* .btenvoyer { margin:10px auto; display:block; background:transparent url(img/envoyer.png) 0px 0px no-repeat; width:155px; height:36px; } .btenvoyer:hover { margin:10px auto; display:block; background:transparent url(img/envoyer-hover.png) 0px 0px no-repeat; width:155px; height:36px; } */ #Formulaire input.btenvoyer { width:248px; float:none; margin:20px 0 30px 200px; } .btenvoyer, .btenvoyer:hover { display:block; border:0; color:#fff; } .btenvoyer { width:248px; height:55px; background:transparent url(img/envoyer.gif) 0px 0px no-repeat; } .btenvoyer:hover { width:248px; height:55px; background:transparent url(img/envoyer-hover.gif) 0px 0px no-repeat; } #message_erreur { color:red; } #Formulaire input.checkbox { width:30px;} /* ********************************************************************************MENTIONS *************************************************************************/ .mentions { padding:40px; font-size:13px; } /* ********************************************************************************FOOTER *************************************************************************/ #footer {background:url(img/fond-footer.png) 0 0; color:#ffffff; height:47px; width:980px; font-size:.8em;} DIV.copyright { float:left; color:#ffffff; padding-top:15px; margin:0 0 0 5px; width:30%;} DIV.menubas UL { float:right; color:#ffffff; padding-top:10px; margin:0 0 0 5px; } .menubas { list-style-type:none; display:block ; } .menubas UL { padding:0; margin:0; list-style-type:none; } .menubas UL LI { float:left; padding:5px; color:#ffffff; text-decoration:none; text-align:center; } .menubas UL LI A { color:#ffffff; text-decoration:none; text-align:center; } .menubas UL LI A:hover { color:#ff000b; }