/********************************************************* * * index.css - v1.0 * author : Guillaume Doutriaux * copyright : kamaji multimedia * contact : contact@kamaji-multimedia.com * ********************************************************/ /********************************************************* * * CSS style guide * ********************************************************* %= master %= reset %= global %= links %= background %= page %= header %= logo %= menu %= about %= title %= columns %= portfolio %= titre portfolio et bouton retour %= liste des references %= une %= contact %= titre contact et bouton retour %= footer ********************************************************/ /********************************************************* * * %= master * ********************************************************/ /* %= reset (from Eric Meyer) -------------------------------------------------------*/ html, body, div, span, button, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; margin:0; outline:0; padding:0; vertical-align:baseline;} :focus{outline:0;} body{background:white; color:black; line-height:1.0em;} ol, ul{list-style:none;} table{border-collapse:collapse; border-spacing:0;} caption, th, td{text-align:left; font-weight:normal;} blockquote:before, blockquote:after, q:before, q:after{content:"";} /* %= global -------------------------------------------------------*/ html, input, select, textarea{font-size:100%; font-family:inherit;} body{background:url(img/body_shadow_upper.jpg) repeat-x #4ab7e5; color:#666; font:0.625em/1em Arial, Helvetica, Verdana, sans-serif; text-align:center;} strong{font-weight:bold;} /* %= links -------------------------------------------------------*/ a img{border:0;} a:link,a:visited{color:#13729a; text-decoration:none;} a:hover{color:#13729a; text-decoration:underline;} a:active{color:#13729a;} /* %= titles -------------------------------------------------------*/ h2{color:#13729a; font-size:3.4em; font-weight:normal; letter-spacing:-1px; line-height:1.0em; margin:0 0 20px -20px; padding:0 0 0 20px; position:relative;} h3{color:#13729a; letter-spacing:-1px; line-height:1.0em;} /********************************************************* * * %= page * ********************************************************/ #page{background:#efede1; margin:100px auto 0 auto; padding:0 20px; width:710px; text-align:left;} /********************************************************* * * %= header * ********************************************************/ /* %= logo -------------------------------------------------------*/ #header{position:absolute;} #header h1{background:url(img/logo.jpg) no-repeat; height:200px; position:relative; margin:-82px 0 0 -10px; text-indent:-40000px; width:360px;} /* %= menu -------------------------------------------------------*/ #header ul{margin:-100px 0 0 342px; position:absolute; width:370px;} #header ul li{display:inline; font-size:1.3em; font-weight:bold;} #header ul li a{color:#fff; display:inline; float:left; height:26px; margin:0 0 0 16px; padding:10px 0 0 30px;} #header ul li a:hover{background-position:0 36px;} #header ul .menu01 a{background-image:url(img/menu_services.jpg); width:70px;} #header ul .menu02 a{background-image:url(img/menu_realisations.jpg); width:93px;} #header ul .menu03 a{background-image:url(img/menu_contact.jpg); width:67px;} /********************************************************* * * %= about * ********************************************************/ #about{padding:140px 0 0 0;} /* %= title -------------------------------------------------------*/ #about h2{background:url(img/puce_about.jpg) no-repeat 0 4px;} #about p{font-size:1.3em; line-height:1.4em;} /* %= columns -------------------------------------------------------*/ #about h3{font-size:2.4em; font-weight:normal; margin:40px 0 20px 0;} #about ul{font-size:1.3em; line-height:1.4em;} #about ul li{background:url(img/puce_liste_about.jpg) no-repeat 0 8px; padding:0 0 0 10px;} #about .col{float:left; margin:0 25px 0 0; width:220px;} #about .col p{margin:0 0 20px 0;} #about .col.services{margin:0;} /********************************************************* * * %= portfolio * ********************************************************/ #portfolio{clear:both; padding:30px 0 0 0;} /* %= titre portfolio et bouton retour -------------------------------------------------------*/ #portfolio h2{background:url(img/puce_portfolio.jpg) no-repeat 0 4px; width:600px;} #portfolio .back_to_menu{background:url(img/bg_back_to_menu.jpg) no-repeat; float:right; height:27px; width:108px;} #portfolio .back_to_menu a{color:#fff; display:block; font-size:1.3em; margin:11px 0 0 5px; font-weight:bold;} /* %= liste des references -------------------------------------------------------*/ #portfolio .wrapper_list{margin:0 0 0 -24px; position:relative; width:735px;} #portfolio .reference{display:inline; float:left; height:470px; margin:30px 0 0 25px; width:220px;} #portfolio .reference img{border:1px solid #efecde;} #portfolio .reference img.iphone{border:none;} #portfolio .reference .meta{background:url(img/bg_portfolio_meta.jpg) no-repeat 0 100% #fff; color:#bbb; margin:10px 0; padding:10px 10px 17px 10px;} #portfolio .reference .meta h3{font-size:1.8em; font-weight:bold; margin:0 0 2px 0;} #portfolio .reference .meta strong{color:#bbb; font-size:1.2em; line-height:1.0em;} #portfolio .reference p{font-size:1.3em; line-height:1.4em;} #portfolio .reference p a{background:url(img/picto_external_link.jpg) right no-repeat; color:#13729a; font-weight:bold; padding:0 15px 0 3px;} /* %= une -------------------------------------------------------*/ #portfolio .reference.fullsize{float:none; margin:0; width:auto;} #portfolio .reference.fullsize .overlay{width:710px;} #portfolio .reference.fullsize p{height:auto;} /********************************************************* * * %= contact * ********************************************************/ #contact{clear:both; height:600px; padding:50px 0 0 0;} /* %= titre contact et bouton retour -------------------------------------------------------*/ #contact h2{background:url(img/puce_portfolio.jpg) no-repeat 0 4px; width:600px;} #contact .back_to_menu{background:url(img/bg_back_to_menu.jpg) no-repeat; float:right; height:27px; width:108px;} #contact .back_to_menu a{color:#fff; display:block; font-size:1.3em; margin:11px 0 0 5px; font-weight:bold;} /* %= coordonnees -------------------------------------------------------*/ #contact .address{background:url(img/bg_portfolio_meta.jpg) no-repeat 0 100% #fff; margin:10px 0; padding:10px 10px 17px 10px; width:200px;} #contact .address ul{font-size:1.3em; line-height:1.2em;} #contact .address ul li strong{color:#000;} /* %= formulaire -------------------------------------------------------*/ #contact fieldset{font-size:1.3em;} #contact fieldset div{clear:left; margin:0 0 5px 0;} #contact fieldset div label{color:#aaa; display:block; float:left; line-height:1.4em; padding:0 10px 0 0; text-align:right; width:60px;} #contact fieldset div input, #contact fieldset div textarea{color:#666; border:0; margin:0;} #contact fieldset div img{margin:0 0 0 70px;} #contact fieldset div .error{background:url(img/picto_contact_error.jpg) no-repeat 25px 1px; color:#d76262; padding:0 0 0 40px;} #contact fieldset div .ok{background:url(img/picto_contact_ok.jpg) no-repeat 25px 1px; padding:0 0 0 40px;} #contact fieldset div .submit_button{margin:10px 0 30px 70px;} #lastname, #firstname, #phonenumber, #captcha{width:150px;} #captcha{color:#ccc; font-size:2.4em;} #email, #message{width:400px;} #contact fieldset .feedback{background:#fff; display:none; height:400px; position:absolute; width:710px;} #contact fieldset .feedback div{padding:180px 0 0 0; text-align:center;} #contact fieldset .feedback div p{margin:0 0 10px 0;} /********************************************************* * * %= footer * ********************************************************/ #footer{color:#fff; margin:10px auto 20px auto; width:710px;}