/*-------------Portfolio-----------*/ *{margin: 0; padding: 0; zoom: 1;} .invisible{display: none;} img{border: none;} /*********************************************************************************************/ /******************************************HTML/BODY******************************************/ /*********************************************************************************************/ html{font: normal 11px/16px Lucida grande,Verdana,Arial, Helvetica, sans-serif;color: #fff;text-align: center;} body{background: url(../img/bg_main.jpg) top no-repeat #000;text-align:center;/*border-top:8px solid #2f2f2f;*/} h1{float:left;width:229px; height:76px;margin-top:15px;margin-left:20px;} /*********************************************************************************************/ /******************************************COLORS******************************************/ /*********************************************************************************************/ .vert{color:#c0cf23;} .bleu{color:#4595c9;} .orange{color:#e85421;} .prune{color:#af1047;} /*********************************************************************************************/ /******************************************BLOCS PRINCIPAUX******************************************/ /*********************************************************************************************/ #header{width:980px; margin:0;text-align:left;padding:0;} #container{position:relative;margin:0 auto;text-align: center;width:980px;} #corps{padding:10px 10px 0 10px; background:url(../img/bg_contenu.png) repeat-y center top;width:980px;position:relative;margin:0 auto;float:left;text-align:center;margin-top:20px;height:auto;} #corps p{color:#fff;margin:15px 20px 10px 20px;line-height:18px; text-align:left;} #corps a{color:#4595c9;text-decoration:none;font-weight:bold;} #corps a:hover{color:#4595c9;text-decoration:underline;font-weight:bold;} /*********************************************************************************************/ /******************************************NAVIGATION******************************************/ /*********************************************************************************************/ #menu{float:right; width:400px;} #nav{width:400px;} #nav li{list-style:none;float:left;} #nav li a{display:block;margin-left:0px;text-indent:-5000px;} #nav li a:hover{float:left;width:96px;height:59px;display:block;margin-left:0px;text-indent:-5000px;} /***************lien***********/ #nav_accueil a{background:url(../img/nav_accueil.png) no-repeat;width:96px;height:59px;display:block;color:transparent;} #nav_portfolio a{background:url(../img/nav_portfolio.png) no-repeat;width:96px;height:59px;display:block;color:transparent;} #nav_profil a{background:url(../img/nav_profil.png) no-repeat;width:96px;height:59px;display:block;color:transparent;} #nav_contact a{background:url(../img/nav_contact.png) no-repeat;width:96px;height:59px;display:block;color:transparent;} /***************hover***********/ #nav_accueil a:hover{background:url(../img/nav_accueil_hover.png) no-repeat;width:96px;height:59px;display:block;} #nav_portfolio a:hover{background:url(../img/nav_portfolio_hover.png) no-repeat;width:96px;height:59px;display:block;} #nav_profil a:hover{background:url(../img/nav_profil_hover.png) no-repeat;width:96px;height:59px;display:block;} #nav_contact a:hover{background:url(../img/nav_contact_hover.png) no-repeat;width:96px;height:59px;display:block;} /***************courant***********/ #nav_accueil_courant{background:url(../img/nav_accueil_hover.png) no-repeat;width:96px;height:59px;display:block;text-indent:-5000px;} #nav_portfolio_courant{background:url(../img/nav_portfolio_hover.png) no-repeat;width:96px;height:59px;display:block;text-indent:-5000px;} #nav_profil_courant{background:url(../img/nav_profil_hover.png) no-repeat;width:96px;height:59px;display:block;text-indent:-5000px;} #nav_contact_courant{background:url(../img/nav_contact_hover.png) no-repeat;width:96px;height:59px;display:block;text-indent:-5000px;} /*********************************************************************************************/ /******************************************HOME*****************************************/ /*********************************************************************************************/ #h2_crea{background:url(../img/h2_crea.png) no-repeat;width:584px; height:36px;margin:5px 0 10px 20px;text-indent:-5000px;text-align:left;} #colg{float:left;width:300px;margin-left:15px;text-align:left;border-right:1px solid #333;height:340px;} #colg h3{color:#af1047;font-size:1.5em;line-height:18px;background:url(../img/h3_prune.png) no-repeat left;padding-left:60px;margin-bottom:15px;} #colc{float:left;width:320px;margin-left:15px;text-align:left;border-right:1px solid #333;height:340px;} #colc h3{color:#c0cf23;font-size:1.5em;line-height:18px;background:url(../img/h3_vert.png) no-repeat left;padding-left:60px;margin-bottom:15px;} #cold{float:left;width:300px;margin-left:15px;text-align:left;height:320px;height:340px;margin-bottom:20px;} #cold h3{color:#4595c9;font-size:1.5em;line-height:18px;background:url(../img/h3_bleu.png) no-repeat center left;padding-left:60px;margin-bottom:15px;} #colg ul,#colc ul{margin-top:15px;margin:0 10px 0 10px;} #colg ul li,#colc ul li{list-style:none;background:url(../img/puce_bleu.png) no-repeat top left; padding-left:20px;line-height:20px;margin-top:8px;} #slider{background:url(../img/bg_slider.png) no-repeat #fff; width:862px; height:238px;text-align:center;margin:20px 0 70px 50px;} #bt_portfolio{position:absolute;right:100px; top:370px;} /*********************************************************************************************/ /******************************************PROFIL*****************************************/ /*********************************************************************************************/ #profil h2{color:#e85421;font-weight:bold;text-align:left;margin:10px 20px 10px 20px; text-transform:uppercase; font-size:1.1em; letter-spacing:2px; border-bottom:1px dotted #e85421; padding-bottom:5px;} #profil h3{color:#BACB1B;font-weight:bold;text-align:left;line-height:18px;margin:25px 0 10px 20px;} #coldesc{float:left; width:680px; margin-right:10px;} #colcomp{float:left;width:251px;text-align:left;background:url(../img/bg_comp.png) repeat;border-top:0.5px solid #1cacf9;border-bottom:0.5px solid #1cacf9;padding:10px 0 0 20px;} #colcomp table{text-align:left;margin-top:20px;margin-bottom:20px;font-size:1.1em; font-weight:bold;} #colcomp td{height:28px;} #colcomp h3 {color:#BACB1B;font-weight:bold;text-align:left;line-height:19px;margin:5px 0 0 0;width:251px;} .date{font-style:italic;color:#4595c9;width:170px;text-align:left;line-height:18px;} /*********************************************************************************************/ /******************************************PORTFOLIO*****************************************/ /*********************************************************************************************/ #portfolio {width:980px;display:inline;} #portfolio h2{color:#af1047;;font-weight:bold;text-align:left;margin:10px 20px 10px 20px; text-transform:uppercase; font-size:1.1em; letter-spacing:2px; border-bottom:1px dotted #af1047; padding-bottom:5px;} #portfolio h3{color:#BACB1B;font-weight:bold;text-align:left;line-height:18px;margin:25px 0 10px 20px;} .projet{width:950px;float:left;margin:15px 0 15px 0; border-bottom:1px solid #333;height:150px;padding-bottom:10px;} .vignette{float:left;width:505px;margin-left:15px;height:130px;text-align:center;} .vignette a{display:block;} /*.vignette a:hover{display:block;}*/ .vignette img{border:2px solid #555;background: transparent;} .vignette a:hover img{border:2px solid #3a3a3a;background: transparent;} .vignette2{float:left;width:505px;margin-left:15px;height:300px;text-align:center;} .vignette2 img{border:2px solid #555;background: transparent;} .vignette2 a:hover img{border:2px solid #3a3a3a;background: transparent;} .description{float:left;width:350px;text-align:left;margin-left:20px;color:#FFF;} .projet2{width:250px;float:left;margin:15px 30px 80px 30px;height:300px;padding-bottom:10px;} .vignette2{float:left;width:200px;margin-left:15px;height:300px;text-align:center;} .description2{float:left;width:250px;text-align:left;margin-left:0px;color:#FFF;height:50px;margin-bottom:10px;} .ancre{float:left;width:500px;text-align:left;} .fleft{float:left;} #bandeau{position:absolute; right:70px; top:116px;z-index:20;width:141px; height:82px;} /*********************************************************************************************/ /******************************************CONTACT*****************************************/ /*********************************************************************************************/ #contact{display:inline;width:980px;} #contact h2{color:#BACB1B;font-weight:bold;text-align:left;margin:10px 20px 10px 20px; text-transform:uppercase; font-size:1.1em; letter-spacing:2px; border-bottom:1px dotted #BACB1B; padding-bottom:5px;} #contact h3{color:#BACB1B;font-weight:bold;text-align:left;line-height:18px;margin:10px 0 10px 20px;} #contact p {margin:5px 0 10px 0;} #form{ text-align:left;margin-left:40px;width:400px;float:left;display:inline;} #formcontact{float:left;} #form ul {text-align:right;margin:0;} #form ul li{list-style:none;text-align:right;line-height:22px;margin-top:10px;} #form input {width:200px;} #form input ,textarea{background:url(../img/bg_contenu.png) repeat;color:#fff; border:1px solid #fff;} #form input:focus ,textarea:focus{background:url(../img/bg_contenu.png) repeat;color:#fff; border:1px solid #BACB1B;} #formdesc{float:left;width:450px;margin-left:60px;display:inline;} a.bt_submit {background:url(../img/submit.jpg) no-repeat;width:100px;height:18px;display:block;float:right;} a:hover.bt_submit{background:url(../img/submit_hover.jpg) no-repeat;width:100px;height:18px;} /*********************************************************************************************/ /******************************************FOOTER******************************************/ /*********************************************************************************************/ #footer{clear:both;margin-top:20px;font-size:0.9em;border-top:1px solid #333;float:left;width:980px;text-align:left;padding-top:10px;padding-bottom:10px;color:#CCC;} #footer a{text-decoration:none; color:#CCC;} #footer a:hover{text-decoration:underline; color:#CCC;}