/*-------------------------------------------------- ---------------------------------------------------- http://www.guillaumebizet.fr/ Auteur: Guillaume BIZET contact: GuillaumeBizet /@/ GMail.com ---------------------------------------------------- Screnn CSS for my vcard ---------------------------------------------------- ---------------------------------------------------*/ /* ----------------------------------------------------------------- 0. RESET : BASE ON ERIC MEYER'S RESET ------------------------------------------------------------------ */ html, body, div, span, 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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block;} /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;} /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;} html {-webkit-text-size-adjust:none} /* ----------------------------------------------------------------- 1. STRUCTURE ------------------------------------------------------------------ */ @font-face { font-family: 'JellykaNathanielaMysteryRg'; src: url('fonts/nathaniel-webfont.eot'); src: url('fonts/nathaniel-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/nathaniel-webfont.woff') format('woff'), url('fonts/nathaniel-webfont.ttf') format('truetype'), url('fonts/nathaniel-webfont.svg#JellykaNathanielaMysteryRg') format('svg'); font-weight: normal; font-style: normal; } body{ background: url(img/struct/bg_body.png) repeat top left; font-family:'Droid Sans',Arial,Verdana,sans-serif; line-height: 20px; font-size: 13px; color: #555; } #html5rub { position:absolute; height:196px;width:50px; background:url(img/struct/rub_html5.png) top no-repeat; top:0px; right:20px; z-index:100} #content { background: #FFF; padding: 15px 0; } section { width: 600px; margin: 0 auto; padding: 0px 0; position: relative; clear: both; } footer { width: 600px; margin: 0 auto; padding: 15px; } /* ----------------------------------------------------------------- 2. BALISES HTML PAR DEFAUT - STYLES COURANTS ------------------------------------------------------------------ */ a, a:visited, a:hover { color: #555; text-decoration: none;} h2 {margin: 5px 0 10px 0; padding: 5px 0; background: url(img/struct/bg_h2.png) repeat-x bottom left; font: 16px "Century Gothic", "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif; font-weight: bold;} bold {font-weight: bold;} /* ----------------------------------------------------------------- 3. MENU RESEAU ------------------------------------------------------------------ */ nav#reseaugb { height: 30px; padding-top: 7px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555555), to(#383838)); background-image: -moz-linear-gradient(270deg, #555555, #383838); } nav#reseaugb ul {list-style-type: none; } nav#reseaugb ul li { display: block; float: left; height: 30px; margin: 0 10px; } nav#reseaugb ul li a.res_blog { padding: 0 0 0 20px; background: transparent url(img/about/ico_res_gbblog.png) no-repeat 0 50%;} nav#reseaugb ul li a.res_cv { padding: 0 0 0 20px; background: transparent url(img/about/ico_res_gbcv.png) no-repeat 0 50%;} nav#reseaugb ul li a.res_sitesmobile { padding: 0 0 0 20px; background: transparent url(img/about/ico_res_sitesmobile.png) no-repeat 0 50%;} nav .currentgb {background: url(img/struct/currentgb.png) no-repeat 50% 100%;} nav#reseaugb ul li a, nav#reseaugb ul li a:visited { color:#fff; text-decoration:none; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} nav#reseaugb ul li a:hover, nav#reseaugb ul li a:focus { color:#fff; text-decoration:none; outline:none; text-shadow:0 0 7px #fff; } /* ----------------------------------------------------------------- 3. HEADER ------------------------------------------------------------------ */ header h1 {height: 50px; width: 600px; margin: 45px auto 15px auto; color: #fff; font-family: 'JellykaNathanielaMysteryRg'; font-size: 55px; text-shadow:0 0 5px #fff; /*-moz-transform: rotate(-4deg); -webkit-transform: rotate(-4deg);*/} h1 a, h1 a:visited { color:#FFF; text-decoration:none; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } h1 a:hover, h1 a:focus { color:#fff; text-decoration:none; outline:none; text-shadow:0 0 15px #fff; } /* ----- Menu Header -----*/ header nav { width: 600px; margin: 0 auto; font-size: 14px; } header ul {text-align: right; } header li {display: inline-block; height: 30px;} header nav a, header nav a:active, header nav a:visited { padding: 5px 10px; color: #fff; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5); text-decoration: none; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } header nav a:hover { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-decoration: none; text-shadow:0 0 7px #fff; } header nav .active {background: url(img/struct/active.png) no-repeat 50% 100%; -moz-transition: background 0.1s ease; -webkit-transition: background 0.1s ease; transition: background 0.1s ease;} /* ----------------------------------------------------------------- 3. FOOTER ------------------------------------------------------------------ */ footer { text-align: center; color: #fff; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5); } footer a, footer a:active, footer a:visited { color: #fff; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5); text-decoration: underline; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } footer a:hover { color: #fff; text-decoration: none; text-shadow:0 0 7px #fff; } /* ----------------------------------------------------------------- 3. PAGE ABOUT ------------------------------------------------------------------ */ #about {height: auto;} #about p {margin: 7px 0;} #about li p, #about li li { font: 12px/18px "Century Gothic", "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif; } #about li li { padding: 5px 20px 0 65px; } #about hr {border: none;} #photo-id { float: left; width: 110px; height: 110px; padding: 5px 10px 5px 0px;} #about h3 { height: 60px; font-weight: normal; } #about h3 a { display: block; height: 45px; padding: 10px 0 5px; text-decoration: none; -webkit-transition: background-color 0.25s linear; -moz-transition: background-color 0.25s linear; } #about h3 a:hover, #about h3 a:focus { background: rgba(164, 173, 183, .25); border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; } #about h3 a img { float: left; margin: 5px 10px 0 15px; -webkit-transition: margin-left 0.25s linear; -moz-transition: margin-left 0.25s linear; } #about h3 a:hover img { margin-left: 10px; } #about h3 a strong { font: 18px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; padding-top: 2px; } #about h3 a span { font: 12px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;} #about h3 a small { margin-top: 10px; float: right; line-height: 20px; padding: 0 10px 1px 20px; font-weight: bold; text-transform: uppercase; background: rgba(164, 173, 183, .25); border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; text-shadow: 0px 1px 1px #fff;} /* ----------------------------------------------------------------- 4. PAGE RESEAUX ------------------------------------------------------------------ */ #reseaux { height: auto; } #reseaux li { width: 300px; height: 60px; float: left; } #reseaux li a { display: block; width: 300px; height: 45px; padding: 10px 0 5px; text-decoration: none; color:#555; font: 12px/14px "Century Gothic", "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif; -webkit-transition: background-color 0.25s linear; -moz-transition: background-color 0.25s linear; } #reseaux li a:hover, #reseaux li a:focus { background: rgba(164, 173, 183, .25);} #reseaux li a img { float: left; margin: 5px 10px 0 15px; -webkit-transition: margin-left 0.25s linear; -moz-transition: margin-left 0.3s linear; } #reseaux li a:hover img { margin-left: 10px; } #reseaux li a strong { font: 18px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; padding-top: 2px; } /* ----------------------------------------------------------------- 5. REALISATIONS SLIDE ------------------------------------------------------------------ */ #realisations {height: 650px;} ul#portfolio-filter{ margin: 0; padding: 0; height: 34px; line-height: 34px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-align: center; } ul#portfolio-filter li { display: inline; margin: 0;} ul#portfolio-filter a { margin-right: 8px; padding: 5px; text-decoration: none; color: #fff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.5);} ul#portfolio-filter a.current{ font-weight: bold; /*text-decoration: underline;*/ font-size: 15px; } ul#portfolio-list{ margin: 15px 0 0 0; padding: 0; list-style: none; } ul#portfolio-list li{ width: 150px; height: 150px; display: block; float: left; padding: 0px; /*border: 1px solid red;*/} ul#portfolio-list li img {width: 125px; height: 125px; margin: 5px 0 0 5px; border: 5px solid #fff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; box-shadow: 1px 1px 6px #555; -webkit-box-shadow:1px 1px 6px #555;-moz-box-shadow:1px 1px 6px #555;} ul#portfolio-list li a{ display: block; overflow: hidden; } ul#portfolio-list li p{ font-size: 11px; color: #ccc; margin: 0; padding: 0; } ul#portfolio-list li p a.sous-titre { text-decoration: none; color: #ccc;} .green { color: #e8f0de; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); background: -moz-linear-gradient(top, #7db72f, #4e7d0e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e'); } .green:hover { background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#7dd842), to(#7db72f)); background: -moz-linear-gradient(top, #7dd842, #7db72f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7dd842', endColorstr='#7db72f'); } .orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .red { color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); } .blue { color: #d9eef7; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5'); } .rosy { border: solid 1px #b73948; background: #da5867; background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f)); background: -moz-linear-gradient(top, #f16c7c, #bf404f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f'); } .pink { color: #feeef5; border: solid 1px #d2729e; background: #f895c2; background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#e42e80)); background: -moz-linear-gradient(top, #f171ab, #e42e80); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#e42e80'); } .pink:hover { color: #feeef5; border: solid 1px #d2729e; background: #f895c2; background: -webkit-gradient(linear, left top, left bottom, from(#e42e80), to(#b22665)); background: -moz-linear-gradient(top, #e42e80, #b22665); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e42e80', endColorstr='#b22665'); } .pink2 { color: #feeef5; border: solid 1px #d2729e; background: #f895c2; background: -webkit-gradient(linear, left top, left bottom, from(#bd8793), to(#bd7689)); background: -moz-linear-gradient(top, #bd8793, #bd7689); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bd8793', endColorstr='#bd7689'); } .gray { color: #e9e9e9; border: solid 1px #555; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top, #888, #575757); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');} /* ---- CAPTION ---- */ .item {position:relative;} .item .caption { width: 115px; padding: 2px 5px; background:#000; color:#fff; font-weight: bold; font-size: 9px; line-height: 14px; /* fix it at the bottom */ position:absolute; bottom:20px; left: 5px; /* hide it by default */ display:none; /* opacity setting */ filter:alpha(opacity=70); /* ie */ -moz-opacity:0.7; /* old mozilla browser like netscape */ -khtml-opacity: 0.7; /* for really really old safari */ opacity: 0.7; /* css standard, currently it works in most modern browsers like firefox, */ } .item .caption a, .item .caption a:visited, .item .caption a:hover { color:#fff; font-size: 8px;} .item .caption span {text-decoration: underline; font-style: italic;} /* ----------------------------------------------------------------- 6. PAGE CONTACT ------------------------------------------------------------------ */ #contact {height: auto;} #contact-perso, #contact-pro { width: 298px; float: left; padding: 0 0 10px 0;} #contact ul { margin: 15px 0 0 0;} #contact ul li {margin-right: 10px;} #contact li a { display: block; padding: 4px 0 4px 28px; background-position: 6px 6px; background-repeat: no-repeat; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #contact li a:hover, #contact li a:focus { padding: 4px 0 4px 26px; background: rgba(164, 173, 183, .25); background-repeat: no-repeat; background-position: 4px 6px; color: #555;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #contact li.org { font-size: 12px; font-weight: bold;} #contact li.detail-org { font-style: italic; font-size: 11px; margin-bottom: 10px;} #contact li.email a { background-image: url(img/contact/ico_mail.png) } #contact li.adr a { background-image: url(img/contact/ico_address.png); } #contact li.tel a { background-image: url(img/contact/ico_tel.png); } #contact li.fax a { background-image: url(img/contact/ico_fax.png); } #contact li.url a { background-image: url(img/contact/ico_website.png); } #contact li.skype a { background-image: url(img/contact/ico_skype.png); } #contact li.gtalk a { background-image: url(img/contact/ico_gtalk.png); } #contact li.msn a { background-image: url(img/contact/ico_msn.png); } .myvcard { margin: 20px 20px 10px 0; border: solid 1px #bbb; background: #e9ebed; background: -webkit-gradient(linear, left top, left bottom, from(#e9ebed), to(#dddddd)); background: -moz-linear-gradient(top, #e9ebed, #dddddd); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .myvcard:hover { border: solid 1px #aaa; background: #dddddd; background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#cccccc)); background: -moz-linear-gradient(top, #dddddd, #cccccc);} a.vcard { display: block; padding: 4px 0 4px 28px; background-position: 6px 6px; background-repeat: no-repeat; background-image: url(img/contact/ico_vcard.png); font-weight: bold;}