/* Structure du site */ body { background:#000 url(/images/interface/body.jpg) no-repeat top center; } #global { position:relative; min-height:100%; height:auto !important; height:100%; width:100%; margin:auto; } #header { position:relative; z-index:100; width:1000px; height:160px; margin:auto; padding:0;} #nav { position:absolute; z-index:1; width:auto; height:40px; top:70px; right:0; } #center { width:1000px; height:auto !important; min-height:500px; height:500px; margin: auto; } #copy { width:270px; height:8px; padding:14px 0 0 30px; } #footer { clear: both; width: 1000px; height:auto !important; min-height: 60px; height: 60px; position: relative; margin: auto; } #footer #footerElements { width: 1000px; margin: auto; position: relative; } #logo { position:absolute; top:50px; left:0; } #logo-client { position:absolute; top:45px; right:30px; } #bloc-partage { position:absolute; top:0; right:0; background-color:#F06; width:185px; height:22px; padding:8px 0 0 15px; } #client #bloc-partage { display:none;} #bloc-partage h4 { width:110px; float:left; } #bloc-cv { position:absolute; top:0; right:0; background-color:#F06; width:170px; height:22px; padding:8px 15px 0 15px; } #bloc-cv h4 { text-align:center; } #bloc-partage ul { float:left; } #bloc-partage li { float:left; margin-right: 10px; padding-left:3px; } #bloc-partage li a { float:left; display:block; text-indent:-99999px; overflow:hidden; } #bloc-partage li.icon-facebook a { background: url(/images/interface/icon-facebook.jpg) no-repeat; width: 8px; } #bloc-partage li.icon-twitter a { background: url(/images/interface/icon-twitter.jpg) no-repeat; width: 9px; } #bloc-partage li.icon-e-mail a { background: url(/images/interface/icon-e-mail.jpg) no-repeat; width: 16px; } #bloc-partage li.icon-facebook a:hover, #bloc-partage li.icon-twitter a:hover, #bloc-partage li.icon-e-mail a:hover { opacity:0.5; } /* ACCUEIL ------------------------------------------------------------------------------*/ body#accueil { } #accueil #Col-Left { float: left; width:580px; } /* CAROUSEL */ #accueil #carousel { position:relative; width:580px; height:475px; } #accueil #mask { position:relative; width:550px; height:445px; overflow:hidden; margin-left:30px; background:#aeaeae url(/images/carousel/fond-carousel.jpg) no-repeat top center;} #accueil #wrapper { position:absolute; top:0; left:0; width:100%; width:2200px; height:475px; } #accueil #wrapper img { float:left; } #accueil #carousel ul { position: absolute; z-index:1; width:63px; height:23px; top:445px; right:0; padding-top:7px; padding-left:197px; display:block; background-color: #FFF;} #accueil #tabs li { display:block; float:left; margin-left:7px; } #accueil #tabs li a { display:block; background-image: url(/images/interface/carousel-interface/Tabs-off.jpg); width:7px; height:16px; } #accueil #tabs li a:hover, #accueil #tabs li.current a{ background-image: url(/images/interface/carousel-interface/Tabs-on.jpg); } #accueil #carousel #legende { position:absolute; width:280px; height:160px; background:#F06; padding:20px; left:0; top:275px; z-index:10;} #accueil .legende { display:none; } #accueil #legende .current { display:block;} #accueil .legende:hover { opacity:0.5; } #accueil #legende .trans img a { position:absolute; width:280px; height:160px; bottom:0; display:block; z-index:100; opacity:0.0; } #accueil #legende .trans img a:hover { opacity:0.5; } #accueil #Col-Left #actualites { width:508px; height:387px; max-height:387px; overflow:hidden; padding:29px 30px 41px 12px; background-color: #FFF; margin-left:30px; position:relative; } #accueil #Col-Left #actualites .date { float: left; width:62px; height:39px; border-right:1px solid #999; padding:5px 18px 10px 0; margin-bottom:32px; } #accueil #Col-Left #actualites .actu { float: left; width:407px; height:63px; padding:5px 0; margin-top:-9px; margin-left:20px; } #accueil #Col-Left #actualites .plus { position: absolute; right:30px; bottom:26px; } #accueil #Col-Left #actualites .formbutton { position: absolute; width:63px; height:18px; right:30px; bottom:22px; margin-bottom:8px; padding:6px 10px; background:#F06; border:none; color:#FFF; font-size: 1.2em; text-transform: uppercase; font-style:normal; cursor:pointer;} #accueil #Col-Right { float: left; width:420px; } #accueil #Col-Right #edito { width:360px; height:190px; padding:30px; background-color:#1a1819; } #accueil #Col-Right #prestations{ width:360px; height:225px; padding:30px; } #accueil #Col-Right #infos { width:330px; height:277px; padding:30px; background-color:#c7c6c8; } /* PRESTATIONS ------------------------------------------------------------------------------*/ body#webdesign, body#print, body#art { } #webdesign #Col-Left, #print #Col-Left, #art #Col-Left { float: left; width:672px; margin:0; padding:0; position:relative; } /* CAROUSEL */ #webdesign #carousel, #print #carousel ,#art #carousel { position:relative; width:672px; height:280px; background-color:#F06; } #webdesign #carousel .current, #print #carousel .current, #art #carousel .current, #webdesign #carousel a:hover, #print #carousel a:hover, #art #carousel a:hover { opacity:0.5; } #webdesign #mask, #print #mask, #art #mask { width:612px; height:200px; margin:30px 30px 18px 30px; float:left; position:relative; overflow:hidden; } #wrapper { position:absolute; top:0; left:0; width:100%; height:200px; } #webdesign #wrapper { width:4896px; } /* 612px X 8 slides = 4896px */ #print #wrapper { width:2448px; } /* 612px X 4 slides = 2448px */ #art #wrapper { width:612px; } /* 612px X 1 slide = 612px */ #webdesign .slide, #print .slide, #art .slide { width:612px; height:200px; float:left; } #webdesign .slide a, #print .slide a, #art .slide a { display:block; float:left; } .img-mosaic { width:100px; height:100px; margin:1px;} #webdesign #Col-Left #groupe-projet, #print #Col-Left #groupe-projet, #art #Col-Left #groupe-projet { display:none; } #webdesign #Col-Left #date, #print #Col-Left #date, #art #Col-Left #date { position:absolute; width:62px; height:45px; background-color:#F06; padding:14px 18px 14px 0; margin-right:20px; margin-left:-60px; } #webdesign #Col-Left #page-projet, #print #Col-Left #page-projet, #art #Col-Left #page-projet { width:582px; height:auto !important; min-height:793px; height:793px; background-color:#FFF; padding:30px 30px 20px 30px; margin-left:30px; } #webdesign #Col-Left #titre-projet, #print #Col-Left #titre-projet, #art #Col-Left #titre-projet { width:572px; position:relative; height:68px; padding-top:5px; margin-left:40px; margin-bottom:30px; } #webdesign #Col-Left #page-projet .img-page, #print #Col-Left #page-projet .img-page, #art #Col-Left #page-projet .img-page { width:auto; height:580px; border:1px solid #999; z-index:100; margin:0 auto;} #webdesign #Col-Left #page-projet .img-page-ss, #print #Col-Left #page-projet .img-page-ss, #art #Col-Left #page-projet .img-page-ss { width:auto; height:580px; border: none; z-index:100; margin:0 auto;} .apercu { text-align:center; } .coin { position: relative; display:inline-block; margin:auto; text-align:center; } .coin span { position:absolute; display:block; right:0; bottom:0; z-index:100; background: url(/images/interface/coin.png) no-repeat 0 0; width:100px; height:100px;} #webdesign #Col-Left #page-projet .actu-date, #print #Col-Left #page-projet .actu-date, #art #Col-Left #page-projet .actu-date { float:left; padding:10px 18px 10px 14px; margin-right: 20px; margin-left: -10px; margin-bottom:34px; width:50px; height:45px; } #webdesign #Col-Left #page-projet #projet, #print #Col-Left #page-projet #projet, #art #Col-Left #page-projet #projet { width:575px; margin-left:59px; } #webdesign #Col-Left #page-projet #col-txt1, #print #Col-Left #page-projet #col-txt1, #art #Col-Left #page-projet #col-txt1 { float: left; width:276px; margin-top:24px; } #webdesign #Col-Left #page-projet #col-txt2, #print #Col-Left #page-projet #col-txt2, #art #Col-Left #page-projet #col-txt2 { float: left; width:276px; margin-left:30px; margin-top:24px; } #webdesign #Col-Left #page-projet h4.share, #print #Col-Left #page-projet h4.share, #art #Col-Left #page-projet h4.share { margin-top:-4px; margin-bottom:0; } #webdesign #Col-Right, #print #Col-Right, #art #Col-Right { float: left; width:328px; margin:0; padding:0; } #webdesign #Col-Right #pres-rub, #print #Col-Right #pres-rub, #art #Col-Right #pres-rub { width:268px; height:190px; padding:30px; background:#1a1819 url(/images/interface/fleche.gif) no-repeat 0px 30px; } #webdesign #Col-Right #infos, #print #Col-Right #infos, #art #Col-Right #infos { width:238px; height:753px; padding:30px; background-color:#c7c6c8; } /**/ /* CONTACT ------------------------------------------------------------------------------*/ body#contact, body#oubli { } #contact #Col-Left, #oubli #Col-Left { float: left; width:672px; margin:0; padding:0; position:relative; } #contact #Col-Left #date, #oubli #Col-Left #date { position:absolute; width:62px; height:45px; background-color:#F06; padding:14px 18px 14px 0; margin-right:20px; margin-left:-60px; } #contact #Col-Left #page-projet, #oubli #Col-Left #page-projet { width:582px; height:auto !important; min-height:623px; height:623px; background-color:#FFF; padding:30px 30px 20px 30px; margin-left:30px; } #contact #Col-Left #titre-projet, #oubli #Col-Left #titre-projet { width:572px; position:relative; height:68px; padding-top:5px; margin-left:40px; margin-bottom:30px; } #contact #Col-Right, #oubli #Col-Right { float: left; width:328px; margin:0; padding:0; } #contact #Col-Right #pres-rub, #oubli #Col-Right #pres-rub { width:268px; height:190px; padding:30px; background:#1a1819 url(/images/carte-de-visite.jpg) no-repeat top center; } #contact #Col-Right #infos, #oubli #Col-Right #infos { width:268px; height:351px; padding:25px 0 0 30px; background-color:#c7c6c8; } /**/ /* ERREUR ------------------------------------------------------------------------------*/ body#erreur { } /**/ /* ACTUALITE ------------------------------------------------------------------------------*/ body#actualite { } #actualite #Col-Left { float: left; width:672px; margin:0; padding:0; position:relative; } #actualite #Col-Left #date { position:absolute; width:62px; height:45px; background-color:#F06; padding:14px 18px 14px 0; margin-right:20px; margin-left:-60px; } #actualite #Col-Left #page-projet { width:582px; height:auto !important; min-height:1686px; height:1686px; background-color:#FFF; padding:30px 30px 20px 30px; margin-left:30px; } #actualite #Col-Left #titre-projet { width:572px; position:relative; height:68px; padding-top:5px; margin-left:40px; margin-bottom:30px; } #actualite #Col-Left #page-projet h4.share { margin-top:-4px; margin-bottom:0; } #actualite #Col-Left #page-projet .img-article { float:left; width:250; height:188; margin:0 20px 18px 0; border:1px solid #CCC; } #actualite #Col-Right { float: left; width:328px; margin:0; padding:0; } #actualite #Col-Right #pres-rub { width:268px; height:190px; padding:30px; background:#1a1819; } #actualite #Col-Right #infos { width:268px; height:1396px; padding:30px 0 0 30px; background-color:#c7c6c8; } /**/ /* MENTIONS ------------------------------------------------------------------------------*/ body#mentions { } #mentions #Col-Left { float: left; width:672px; margin:0; padding:0; position:relative; } #mentions #Col-Left #date { position:absolute; width:62px; height:45px; background-color:#F06; padding:14px 18px 14px 0; margin-right:20px; margin-left:-60px; } #mentions #Col-Left #page-projet { width:582px; height:auto !important; min-height:623px; height:623px; background-color:#FFF; padding:30px 30px 20px 30px; margin-left:30px; } #mentions #Col-Left #titre-projet { width:572px; position:relative; height:68px; padding-top:5px; margin-left:40px; margin-bottom:30px; } #mentions #Col-Right { float: left; width:328px; margin:0; padding:0; } #mentions #Col-Right #pres-rub { width:268px; height:190px; padding:30px; background:#1a1819; } #mentions #Col-Right #infos { width:238px; height:409px; padding:30px; background-color:#c7c6c8; } /**/ /* ESPACE CLIENT ------------------------------------------------------------------------------*/ body#client { } #client #Col-Left { float: left; width:672px; margin:0; padding:0; position:relative; } #client #Col-Left #groupe-projet { display:none; } #client #Col-Left #date { position:absolute; width:62px; height:45px; background-color:#F06; padding:14px 18px 14px 0; margin-right:20px; margin-left:-60px; } #client #Col-Left #page-projet { width:582px; height:auto !important; min-height:683px; height:683px; background-color:#FFF; padding:30px 30px 20px 30px; margin-left:30px; } #client #Col-Left #titre-projet { width:572px; position:relative; height:68px; padding-top:5px; margin-left:40px; margin-bottom:30px; } #client #Col-Left #page-projet .img-page { width:582px; height:200px; border:1px solid #999; margin-bottom:24px; } #client #Col-Left #page-projet .actu-date { float:left; padding:10px 18px 10px 14px; margin-right: 20px; margin-left: -10px; margin-bottom:34px; width:50px; height:45px; } #client #Col-Left #page-projet .img-page { width:580px; height:526px; border:1px solid #999; margin-bottom:24px; } #client #Col-Left #page-projet #projet { width:575px; margin-left:59px; } #client #Col-Left #page-projet #col-txt1 { float: left; width:276px; } #client #Col-Left #page-projet #col-txt2 { float: left; width:276px; margin-left:30px; } #client #Col-Left #page-projet h4.share { margin-top:-4px; margin-bottom:0; } #client #Col-Right { float: left; width:328px; margin:0; padding:0; } #client #Col-Right #pres-rub { width:268px; height:190px; padding:30px; background:#1a1819; } #client #Col-Right #pres-rub .date-avance { float:right; font-style:italic; font-size: 0.9em;} #client #Col-Right #telechargement { width:238px; height:113px; padding:30px; background-color:#F06; } #client #Col-Right #infos { width:268px; height:265px; padding:30px; background-color:#c7c6c8; } /**/ /* CV ------------------------------------------------------------------------------*/ body#cv { } #cv #Col-Left { float: left; width:672px; margin:0; padding:0; position:relative; } #cv #Col-Left #groupe-projet { display:none; } #cv #Col-Left .date { position:absolute; width:71px; height:45px; background-color:#F06; padding:14px 9px 14px 0; margin-right:20px; margin-left:-60px; } #cv #Col-Left .logos-entreprises { position:absolute; width:151px; height:73px; background-color:#F06; right:30px; } #cv #Col-Left #page-projet { width:582px; height:auto !important; min-height:983px; height:983px; background-color:#FFF; padding:30px 30px 20px 30px; margin-left:30px; } #cv #Col-Left .titre-projet { width:572px; position:relative; height:68px; padding-top:5px; margin-left:40px; margin-bottom:30px; } #cv #Col-Left .titre-projet h3 { margin-bottom:-15px; } #cv #Col-Right { float: left; width:328px; margin:0; padding:0; } #cv #Col-Right #pres-rub { width:268px; height:190px; padding:30px; background:#1a1819; } #cv #Col-Right #pres-rub .date-avance { float:right; font-style:italic; font-size: 0.9em;} #cv #Col-Right #competences { width:238px; height:275px; padding:30px; background-color:#F06; } #cv #Col-Right #formations-diplomes { width:268px; height:287px; padding:30px; background-color:#c7c6c8; } #cv #Col-Right #interets { width:238px; height:225px; padding:30px; background:#1a1819; } #cv #Col-Right #telechargement { width:268px; height:70px; padding:30px; background-color:#F06; } /**/ /**/ /* Les différents éléments de #center #content { width:960px; padding:20px; height:auto !important; min-height:500px; height:500px; margin:auto; } */ /**/ /* Bouton de rappel et H1 #header #headerElements {} #header #headerElements #logoH1 {} #header #headerElements h1 a { text-indent:-9999px; overflow:hidden; display:block; } #header #headerElements h1 { position:relative; background:url() no-repeat; }*/ /**/ /*___________________________________________ NAVIGATION HEADER ___________________________________________*/ #nav ul { float:right; } #nav li { float: left; margin-right: 34px;} #nav li a { float:left; line-height: 40px; display:block; text-indent:-99999px; overflow:hidden; background-image: url(/images/interface/sprite-nav.png);} #nav li.accueil a { background-position:0px 0px; width: 66px; } #nav li.accueil a:hover { background-position:0px 40px; } #nav li.webdesign a { background-position:-66px 0px; width: 83px; } #nav li.webdesign a:hover { background-position:-66px 40px; } #nav li.print a { background-position:-149px 0px; width: 110px; } #nav li.print a:hover { background-position:-149px 40px; } #nav li.art a { background-position:-259px 0px; width: 96px; } #nav li.art a:hover { background-position:-259px 40px; } #nav li.contact a { background-position:-355px 0px; width: 72px; } #nav li.contact a:hover { background-position:-355px 40px; } /* BOUTONS ACTIFS ------------------------------------------------------------------------------*/ #accueil #nav li.accueil a { background-position:0px 40px; } #webdesign #nav li.webdesign a { background-position:-66px 40px; } #print #nav li.print a { background-position:-149px 40px; } #art #nav li.art a { background-position:-259px 40px; } #contact #nav li.contact a { background-position:-355px 40px; } /**/ /* Menu de navigation du footer */ #footer #footerElements ul { text-align: center; padding-top: 25px; } #footer #footerElements li { display: inline; padding-left: 20px; padding-right: 20px; border-right:1px solid #666;} #footer #footerElements li a { color: #999; font-size: 1em; text-decoration: none; text-transform: uppercase; } #footer #footerElements li a:hover { color: #F06; } #footer #footerElements li.contact { border:none;} /* Boutons actifs -------------------------------------------------------------------------------------------------------------*/ #accueil #footer li.accueil a, #contact #footer li.contact a, #mentions #footer li.mentions a { font-size: 0.9em; text-decoration : none; color: #FFF; } /* */ /* Elements du footer */ #footer #footerElements .vcard {} #footer #footerElements .vcard .type{ display:none; } #footer #footerElements .vcard .value, #footer #footerElements .vcard .org { font-weight: bold; } #footer #footerElements .vcard .sepAdr, #footer #footerElements .vcard .sepTel { display:block; height:1px; overflow:hidden; } /* Sep hcard : #footer #footerElements .vcard .sepAdr (avant Adresse) #footer #footerElements .vcard .sepCpV (avant Code postal + Ville) #footer #footerElements .vcard .sepTel (avant Téléphone Fix) #footer #footerElements .vcard .sepMob (avant Téléphone Mobile) #footer #footerElements .vcard .sepFax (avant Fax) #footer #footerElements .vcard .sepEma (avant E-mail) #footer #footerElements .vcard .sepSir (avant n° de Siret) */ #footer #footerElements #w3c { position:absolute; left:60px; top:0;} /* */ /* Autres elements */ /* Alignement des images (ne pas supprimer) */ .left { float:left; margin-right: 10px; } .right { float:right; margin-left: 10px; } .clear { cleat: both; } /* */