/* Theme Name: AFD Folio Theme URI: http://all-for-design.com/portfolio Description: This is the portfolio WP theme of AurŽlien Foutoyet, Webdesigner from France. Version: 1.0 Author: Aurélien Foutoyet Author URI: http://all-for-design.com/portfolio Tags: four-columns, fixed-width, beige, onepage folio, textured, Garamond, portfolio AFD Folio v1.0 This theme was designed and built by Aurélien Foutoyet aka Auré Please, don't steal my work :) */ /*--------------------------------------------------------------------*/ /*---- AFD FOLIO MAIN STYLESHEET /*--------------------------------------------------------------------*/ /* ------------------------------------------ LEVEL1 */ /* -------------------------- LEVEL2 */ /* -------- LEVEL3 */ /* -- LEVEL4*/ /* ------------------------------------------ GENERAL RESET BY E.MEYER */ /* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ 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 {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;} :focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;} /* ------------------------------------------ GENERAL ELEMENTS */ html {-webkit-font-smoothing: antialiased;} body {background: url(img/texture.gif) 0 0 repeat;color:#756359;font-size:18px;line-height:22px;font-family:Garamond, Baskerville,"Times New Roman",serif;margin:0;padding:0;} body#windows{font-family:Garamond, Baskerville,"Times New Roman", Cambria, Constatia, serif;} body#mac{font-family: Garamond, Baskerville, "Apple LiSung", "Times New Roman", serif;} body#linux{font-family:Garamond, Baskerville, "Times New Roman", "Liberation Serif", serif;} a{cursor:pointer;color:#715242;text-decoration: none;border-bottom:1px dotted;padding-bottom:0;} a:hover{color:#8E542B;text-decoration: none;border-bottom:1px solid #8E542B;padding-bottom:0;} p{margin-bottom:22px;} em{font-style:normal;} /* -------------------------- GENERIC CLASSES */ .italic{font-style: italic;font-family:Baskerville, "Baskerville Old Face", Georgia, "Times new Roman", serif;} .small-caps{font-variant: small-caps;} .bold{font-weight:bold;} .highlight-color{color:#8E542B;} .block{display:block;} .wrap{overflow:hidden;} .grid{} .viewgrid{background: url(img/baseline-22.gif) 0 0 repeat;width:100%;height:100%} #grid-btn{cursor:pointer;color:#715242;text-decoration: none;border-bottom:1px dotted;padding-bottom:0;} #grid-btn:hover{cursor:pointer;color:#8E542B;text-decoration: none;border-bottom:1px solid #8E542B;padding-bottom:0;} h1,h2,h3,h4,h5,h6{font-weight:normal;text-shadow:0 1px 1px #F5F2EB;} .singlepage h2, .singlepage h3{color:#9f644b;} /* -------- Special Opera browser warning */ .warning{display:none;} .opera p.warning {display:block;position:absolute;top:200px;right:120px;width:300px;font-family:georgia,serif;font-style:italic;font-size:14px;color:#8E542B;} /* -------- Top button fixed */ #top-btn{position:fixed;top:200px;right:6%;width:24px;height:23px;text-indent:-9999px;} #top-btn a{display:block;width:24px;height:23px;background:url(img/top-btn.png) top center no-repeat;overflow:hidden;border:none;} #top-btn a:hover{display:block;width:24px;height:23px;background:url(img/top-btn.png) bottom center no-repeat;overflow:hidden;border:none;} /* ------------------------------------------ HEADER */ #header{margin-bottom:22px;} /* -------------------------- TOP BAR */ #topbar{background: url(img/topbar.gif) 0 0 repeat-x;height:60px;width:100%;margin-bottom:28px;} #topbar .content{width:940px;margin:0 auto;padding:0 10px;padding-top:13px;overflow:hidden;} /* -------- INTRO TXT */ .intro{font-style: italic;font-size: 13px;font-family:Georgia;letter-spacing: 0.01em;width:760px;float:left;display:inline;} /* -------- TWITTER LINK */ .twitter{width:160px;float:left;display:inline;text-align:right;} .twitter a{background: url(img/twitter-bird.gif) 0 -2px no-repeat;padding-left:50px;text-decoration: none;border:none;} .twitter a:hover{background: url(img/twitter-bird.gif) 0 0 no-repeat;padding-left:50px;text-decoration: none;;border:none;} .twitter a span{font-variant: small-caps;border-bottom:1px dotted;padding-bottom:0;font-size:16px;} .twitter a:hover span{font-variant: small-caps;border-bottom:1px solid;padding-bottom:0;font-size:16px;} /* -------------------------- MAIN TITLE */ #main-title{background: url(img/bgimg.gif) 40% top no-repeat;} #main-title .content{background: url(img/bg-title-3.gif) center top no-repeat;height:220px;width:940px;display:block;margin:0 auto;text-align:center;overflow:hidden;} #main-title h1{margin:57px auto 48px auto;width:220px;text-indent:-9999px;} #main-title a {background: url(img/titles/main-title.gif) center top no-repeat;width:181px;height:52px;text-decoration:none;border:none;font-family: Tungsten;font-size:72px;font-weight:600;text-indent:-9999px;display:block;margin:0 auto;} #main-title h2{background: url(img/titles/main-title-baseline.gif) center top no-repeat;font-family: Garamond;font-style:italic;letter-spacing: 0.02em;font-size:24px;font-weight:normal;text-indent:-99999px;height:25px;} /* -------------------------- NAVIGATION */ #navigation{width:820px;margin:0 auto 70px auto;} #navigation .content{background: url(img/shadow-menu.png) bottom center no-repeat;overflow:hidden;height:71px;} /* -------- LIST */ #navigation ul{list-style:none;background:#f7f6f4;text-indent:-9999px;padding:19px 32px 13px 32px;overflow:hidden;-webkit-border-radius:5px;-moz-border-radius: 5px;border-radius:5px;overflow:hidden;_zoom:1;} #navigation li{float:left;display:inline;height:33px;} /* -------- LINKS */ #navigation a{display:block;overflow:hidden;height:33px;border:none;} /* -------- BG-IMAGE (SPRITES) */ #navigation .about, #navigation .projects, #navigation .blog, #navigation .inspiration, #navigation .contact {background-image: url(img/menu-sprite.png);background-repeat:no-repeat;} #navigation .about, #navigation .projects, #navigation .blog, #navigation .inspiration{margin-right:26px;} /* -- ABOUT */ #navigation .about{background-position: 0 0;width:125px;} #navigation .about:hover{background-position: 0 -33px;width:125px;} /* -- PROJECTS */ #navigation .projects{background-position: -151px 0;width:142px;} #navigation .projects:hover{background-position: -151px -33px;width:142px;} /* -- INSPIRATION */ #navigation .inspiration{background-position: -452px 0;width:178px;} #navigation .inspiration:hover{background-position: -452px -33px;width:178px;} /* -- BLOG */ #navigation .blog{background-position: -320px 0;width:105px;} #navigation .blog:hover{background-position: -320px -33px;width:105px;} /* -- CONTACT */ #navigation .contact{background-position: -656px 0;width:94px;} #navigation .contact:hover{background-position: -656px -33px;width:94px;} /* ------------------------------------------ CONTENT */ /* -------------------------- TITLES */ /* -------- SECTION CONTAINER */ .title-section{background: url(img/titles/section-title-background.png) center 7px no-repeat;_background: url(img/titles/section-title-background.gif) center 7px no-repeat;height:100px;width:100%;text-align:center;overflow:hidden;margin-bottom:28px;} /* -------- TITLE CONTAINER */ .general-title{background: url(img/bg-title-small.png) top center no-repeat;height:70px;width:100%;text-align:center;overflow:hidden;color:#88756a;font-family: Tungsten;font-size:48px;line-height:70px;font-weight:normal;padding-top:6px;margin-bottom:30px;} /* -------- MAIN */ .title-section h1{text-indent:-9999px;margin:22px auto 0 auto;height:40px;} /* -------- BASELINE */ .title-section h2{text-indent:-9999px;margin:8px auto 0 auto;height:11px;} /* -------- ABOUT */ .about h1{background: url(img/titles/about.gif) top center no-repeat;width:214px;} .about h2{background: url(img/titles/about-baseline.gif) top center no-repeat;width:208px;} /* -------- PROJECTS */ .projects h1{background: url(img/titles/projects-m.gif) top center no-repeat;width:196px;} .projects h2{background: url(img/titles/projects-baseline.gif) top center no-repeat;width:193px;} /* -------- PROJECTS ALL */ .projects-all h1{background: url(img/titles/projects-all.gif) top center no-repeat;width:225px;} .projects-all h2{background: url(img/titles/projects-all-baseline.gif) top center no-repeat;width:232px;} /* -------- PROJECT DETAILS */ .projects-details h1{background: url(img/titles/projects-details.gif) top center no-repeat;width:190px;} .projects-details h2{background: url(img/titles/projects-details-baseline.gif) top center no-repeat;width:194px;} /* -------- INSPIRATION */ .inspiration h1{background: url(img/titles/inspiration.gif) top center no-repeat;width:224px;} .inspiration h2{background: url(img/titles/inspiration-baseline.gif) top center no-repeat;width:224px;} /* -------- CONTACT */ .contact h1{background: url(img/titles/contact.gif) top center no-repeat;width:229px;} .contact h2{background: url(img/titles/contact-baseline.gif) top center no-repeat;width:214px;} /* -------- CONSTRUCTION */ .construction h1{background: url(img/titles/construction.gif) top center no-repeat;width:227px;} .construction h2{background: url(img/titles/construction-baseline.gif) top center no-repeat;width:213px;} /* -------- ARCHIVE */ .container .archive h1{background: url(img/titles/archive.gif) top center no-repeat;width:224px;} .container .archive h2{background: url(img/titles/archive-baseline.gif) top center no-repeat;width:208px;} /* ------------------------------------------ STRUCURE & LAYOUT */ /* -------------------------- CONTAINER */ .container{overflow:hidden;margin-bottom:48px;} /* -------------------------- CONTENT 1-COL */ .container .content{width:960px;margin:0 auto;overflow:hidden;} /* -------------------------- CONTENT 2-COLS */ .two-cols{overflow:hidden;} .two-cols .col{float:left;display:inline;margin:0 10px;width:460px;} /* -------------------------- CONTENT 4-COLS */ .four-cols .col{float:left;display:inline;width:220px;margin:0 10px;} /* ------------------------------------------ WAITING PAGE */ .theme-thumbs{padding:10px;background:#f4f3ee;border:1px solid #e3e0d8;-webkit-shadow:inset 1px 1px 1px 1px #fff;-moz-box-shadow:inset 1px 1px 1px 1px #fff;box-shadow:inset 1px 1px 1px 1px #fff;display:inline-block;margin:0 10px 22px 0;} /* ------------------------------------------ ABOUT SECTION */ p.first{background:url("img/aldine-separate.png") no-repeat scroll bottom center transparent;padding-bottom:33px;margin-bottom:11px;} .photo{float:right;margin-top:-97px;} /* ------------------------------------------ LAST PROJECTS SECTION */ /* -------------------------- PREVIEWS */ .thumb{margin:16px auto 13px auto;} /* -------- LINKS */ .thumb a{display:block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px solid #bab9b2;padding:5px;} .thumb a:hover{display:block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px dashed #88756a;padding:5px;background:url(img/thumb-details-bgimg.png) center center no-repeat transparent;} .thumb a:hover img{opacity:0.4;} /* -------- THUMBNAIL IMG */ .thumb img{display:block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} /* -------------------------- TAGS DISPLAY */ .categories{font-variant: small-caps;font-family:Tahoma;font-size:14px;color:#9d8b81;letter-spacing: 0.05em;} .categories span{padding:0 8px;} .categories span:nth-child(2n) {border-left:1px solid #bab9b2;border-right:1px solid #bab9b2;} .categories span:first-child{padding-left:0;} .categories span:last-child{padding-right:0;border-right:none;} /* -------------------------- TITLE */ .col h2{font-size:20px;font-weight:bold;padding:0;} /* -------------------------- DESCRIPTION */ .col .descr{margin-bottom:15px;} /* -------------------------- MPROJECT LINK */ .proj-link{border-top:1px dashed #bab9b2;padding-top:5px;} .proj-link span{color:#9f644b;font-weight:bold;margin-right:5px;} /* ------------------------------------------ SINGLE PAGE PROJECT THUMBNAILS */ /* -------------------------- PREVIEWS */ .gallery .thumb{overflow:hidden;padding-left:20px;} /* -------- LINKS */ .gallery .thumb a{width:100px;float:left;display:inline;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px solid #bab9b2;padding:5px;margin:0 22px 11px 0;} .gallery .thumb a:hover{width:100px;float:left;display:inline;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px dashed #88756a;padding:5px;margin:0 22px 11px 0;} /* -------- THUMBNAIL IMG */ .gallery .thumb img{display:block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} /* ------------------------------------------ BLOC INFORMATION */ .informations{background:url("img/aldine-separate.gif") no-repeat top center transparent;padding-top:44px;margin-top:22px;overflow:hidden;margin-bottom:0;} .informations p{width:100%;text-align:center;font-size:21px;} .informations em.larger{font-size:24px;font-variant:small-caps;} /* ------------------------------------------ INSPIRATION */ /* -------------------------- CONTAINER */ .library{background:url("img/etagere.gif") no-repeat bottom center transparent;overflow:hidden;position:relative;width:100%;height:264px;} /* -------- BOOKS */ .books{position:absolute;bottom:22px;left:50px;margin:0;} .books a{display:block;border:none;} .books a:hover{display:block;border:none;} /* -- First book*/ .books .first{position:absolute;bottom:-6px;left:15px;} /* -- Second book*/ .books .second{position:absolute;bottom:0;left:165px;} /* -------- WEBSITES LIST */ ul.websites{position:absolute;bottom:11px;left:360px;background:url("img/list-container-square.png") no-repeat top center transparent;padding:7px 9px 10px 34px;margin:0;overflow:hidden;width:280px;height:206px;} ul.websites li{background:url("img/inset-border.gif") repeat-x bottom left transparent;height:42px;line-height:42px;overflow:hidden;width:245px;} ul.websites li a{text-decoration:none;display:block;padding-left:10px;} ul.websites li a:hover{text-decoration:none;display:block;padding-left:10px;background:#f4f3ef;} ul.websites li a:hover span{color:#9f644b;padding-bottom:0;border-bottom:1px solid #9f644b;} /* -------- ARTICLES LIST */ .articles{background:url("img/list-container-rounded-corners.png") no-repeat top center transparent;position:absolute;bottom:20px;left:616px;margin:0;width:280px;height:206px;} .articles p{position:absolute;top:0;right:13px;width:81px;height:47px;z-index:999;text-indent:-9999px;background:url("img/articles-corner-banner.png") no-repeat top right;} .articles ul{padding:7px 9px 10px 14px;overflow:hidden;} .articles li{background:url("img/inset-border.gif") repeat-x bottom left transparent;overflow:hidden;width:245px;} .articles li a{text-decoration:none;border:none;display:block;padding:10px;} .articles li a:hover{text-decoration:none;display:block;padding:10px;background:#f4f3ef;} .articles .website-name{font-variant:small-caps;color:#9f644b;display:block;} .articles .article-name{display:block;} .articles li a:hover span.article-name{color:#9f644b;font-style:italic;letter-spacing: 0.035em;} .websites li a img{margin-right:10px;} /* ------------------------------------------ CONTACT FORM */ /* -------------------------- STRUCTURE */ #contact-form{margin-top:-5px;} #contact-form fieldset{margin:0;padding:0;border:none;} /* -------------------------- PARAGRAPHS */ #contact-form p{padding-bottom:11px;border-bottom:1px dashed #cecbc3;overflow:hidden;} #contact-form p.textmess{border:none;} /* -------------------------- LABELS */ #contact-form form label{float:left;display:inline;width:90px;padding:4px 0 0 0;font-variant:small-caps;letter-spacing: 0.045em;color:#88756a;} /* -------------------------- SEND BTN */ /* -------- Containers */ #contact-form .info-validation{float:left;display:inline;width:100%;margin-top:-22px;padding:0;overflow:hidden;} #contact-form p.submition{float:right;display:inline;width:200px;text-align:right;border:none;margin:0;padding:0;} /* -------- Normal */ #contact-form p .button, #contact-form form input[type="submit"] {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background:#f7f6f2;border:1px solid #c0bdaf;text-align:center;cursor:pointer;padding:5px;font-variant:small-caps;letter-spacing: 0.045em;font-family:Garamond;font-size:17px;color:#88756a;width:100px;} /* -------- Hover */ #contact-form p .button:hover, #contact-form form input[type="submit"]:hover {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background:#f0eee8;border:1px solid #a9a29e;text-align:center;cursor:pointer;padding:5px;font-variant:small-caps;letter-spacing: 0.045em;font-family:Garamond;font-size:17px;text-shadow:0 1px 1px #fff;color:#88756a;} /* -------------------------- FIELDS */ /* -------- Normal */ #contact-form form input[type="text"], #contact-form form textarea, #contact-form form select {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background:#f7f6f2;border:1px solid #c0bdaf;font-size:16px;letter-spacing: 0.07em;padding:5px;width:358px;margin:0;color:#88756a;font-family:Helvetica Neue;} /* -------- Hover */ #contact-form form input:hover[type="text"], #contact-form form textarea:hover, #contact-form form select:hover, #contact-form form .button:hover {border:1px solid #bab9b2;background:#faf9f6;} /* -------- Active */ #contact-form form input:active[type="text"], #contact-form form textarea:active, #contact-form form select:active, #contact-form form .button:active {border:1px solid #bab9b2;background:#faf9f6;} /* -------- Focus */ #contact-form form input:focus[type="text"], #contact-form form textarea:focus, #contact-form form select:focus, #contact-form form .button:focus {border:1px solid #bab9b2;background:#faf9f6;} /* -------------------------- CONTACT FORM PLUGIN : ERROR MSG */ /* -------- Error message under each field */ .wpcf7-not-valid-tip-no-ajax{color:#9f644b;margin-top:5px;font-style:italic;font-family:georgia;font-size:13px;width:100%;float: left;text-align:center;} /* -------- Response message container at the end of the form*/ .wpcf7-display-none{display:none;} .wpcf7-response-output{font-variant: small-caps;margin-top:22px;padding:11px;text-align:center;} /* -- Error message*/ .wpcf7-validation-errors{border:1px dashed #9f644b;color:#9f644b;} /* -- Confirmation message*/ .wpcf7-mail-sent-ok{border:1px dashed #667c32;color:#667c32;} /* ------------------------------------------ SOCIAL NETWORK AND PLANNING */ /* -------------------------- CONTAINER WITH SHADOWS */ .shadow-right{background:url(img/shadow-calendar.png) 14px 109px no-repeat;width:100%;height:550px;} /* -------------------------- CONTAINER WITH "PLI" */ .topsection{overflow:hidden;background:url(img/pli.gif) center 145px repeat-x;padding-bottom:45px;width:420px;} /* -------------------------- CALENDAR */ .calendar{background: url(img/agraf.gif) no-repeat center 6px #f5f3eF;width:420px;padding-top:5px;margin-right:10px;float:right;display:inline;-webkit-shadow:0 0 5px rgba(136,117,106,0.3);-moz-box-shadow:0 0 5px rgba(136,117,106,0.3);box-shadow:0 0 5px rgba(136,117,106,0.3);} /* -------- Title */ .left-col .title{margin-top:20px;} /* -------- Columns display */ .calendar .left-col{float:left;display:inline;width:160px;padding-left:20px;} .calendar .right-col{float:left;display:inline;width:225px;padding-top:5px;} /* -------- Table display */ .calendar table th{width:45px;font-size:14px;line-height:17px;} .calendar table td.month-name{width:58px;height:20px;font-family:Georgia, Baskerville, "Times new roman", serif;font-size:14px;font-style:italic;text-align:right;padding-right:10px; } /* -------- FULL / AVAILABLE COLOR BLOC */ .full{background:url(img/color-red-full.gif) left 13px repeat-x;height:20px;line-height:20px;text-indent:-9999px;font-size:0;width:41px;float:left;display:inline;} .ready{background:url(img/color-green-ready.gif) left 13px repeat-x;height:20px;line-height:20px;text-indent:-9999px;font-size:0;width:41px;float:left;display:inline;} /* -------- Title */ .calendar .title{margin:28px 0 18px 0;font-variant: small-caps;font-size:16px;} .calendar .small{font-size:16px} .calendar .large{font-size:21px;} /* -------- Legend */ .legend table td {vertical-align: baseline;} .calendar .legend{padding-top:8px;border-top:1px dashed #cecbc3;width:130px;} .available-legend {padding-left:10px;font-family:Georgia, Baskerville, "Times new roman",serif;font-size:14px;font-style:italic;} .full-legend .full{display:inline-block;width:20px;height:7px;background-color:#e56600;margin-right:5px;} /* -------------------------- SOCIAL ICONS */ /* -------- Container */ .social-container{background:#f5f3ef;width:420px;float:right;display:inline;} /* -------- Title */ .social-container .title{height:28px;line-height:28px;text-align:center;width:100%;font-family:Tungsten,Impact,sans-serif;margin:2px 0 12px 0;} .social-container .title h3{background:#f3f1ec;height:38px;width:390px;margin:0 auto;} .social-container .title h3 span{background:url(img/title-social-large.png) 0 0 no-repeat;height:23px;width:364px;font-family:Tungsten,Impact,sans-serif;font-size: 30px;font-weight: normal;text-indent: -9999px;margin:0 auto;display:block;} /* -------- List */ .social-container ul{list-style: none;overflow:hidden;width:100%;} .social-container li{display:inline;float:left;width:209px;border-top:1px dashed #bab9b2;} .social-container li:hover{display:inline;float:left;width:208px;border-top:1px dashed #bab9b2;background:#edeae4;} .social-container li:nth-child(2n){border-left:1px dashed #bab9b2;} .social-container li:nth-last-of-type(-n+2){border-bottom:1px dashed #bab9b2;} /* -------- List links */ .social-container li a span.thum{background-image:url(img/social-icons-2.png);background-repeat:no-repeat;display:inline-block;text-indent:-9999px;font-size:0;width:32px;height:32px;margin :0 5px 0 10px;overflow:hidden;float:left;} .social-container li a span.txt{display:inline-block;height:32px;line-height: 32px;overflow:hidden;text-shadow: 0 1px 0 #fff;float:left;} .social-container li:hover a span.txt{display:inline-block;height:32px;line-height: 32px;overflow:hidden;text-shadow: 0 1px 0 #fff;color:#9f644b;} .social-container li a{font-variant: small-caps;font-family: Verdana;font-size: 14px;padding:10px 0;text-decoration:none;border:none;width:100%;height:100%;display:block;float:left;border:none;} .social-container li a:hover{font-variant: small-caps;font-family: Verdana;font-size: 14px;padding:10px 0;text-decoration:none;border:none;width:100%;height:100%;display:block;float:left;border:none;} /* -------- Icons */ .social-container .twit{background-position: -31px 0;} .social-container li:hover .twit{background-position: -31px -33px;} .social-container .behance{background-position: -124px 0;} .social-container li:hover .behance{background-position: -124px -33px;} .social-container .afd{background-position: -186px 0;} .social-container li:hover .afd{background-position: -186px -33px;} .social-container .su{background-position: -62px 0;} .social-container li:hover .su{background-position: -62px -33px;} .social-container .typographe{background-position: -217px 0;} .social-container li:hover .typographe{background-position: -217px -33px;} .social-container .flickr{background-position: -155px 0;} .social-container li:hover .flickr{background-position: -155px -33px;} .social-container .bbb{background-position: 0 0;} .social-container li:hover .bbb{background-position: 0 -33px;} .social-container .skype{background-position: -93px 0;} .social-container li:hover .skype{background-position: -93px -33px;} /* ------------------------------------------ CATEGORY TEMPLATE PAGE */ /* ------------------------------------------ Menu list */ .submenu{width:940px;margin:11px auto 2px auto;overflow:hidden;background:url(img/inset-border.gif) bottom left repeat-x;padding-bottom:19px;overflow:hidden;float:left;display:inline;} .submenu p{float:left;display:inline;width:220px;padding:0 10px;overflow:hidden;text-align:center;font-size:18px;margin:10px auto 0 auto;} #portfolio-list{overflow:hidden;clear:left;padding:0 0 0 15px;} #portfolio-filter {width:700px;float:left;display:inline;overflow:hidden;} #portfolio-filter li{float:left;overflow:hidden;} #portfolio-filter a{display:block;height:28px;overflow:hidden;cursor:pointer;text-indent:-9999px;margin:0 25px 0 0;border:none;} /* ------------------------------------------ Menu links */ #portfolio-filter a:link{background-position:center top;} #portfolio-filter a:hover{background-position:center center;} #portfolio-filter a:active{background-position:center bottom;} #portfolio-filter a:visited{opacity:0.9} #portfolio-filter a:focus{background-position:center bottom;} #portfolio-filter a.current{background-position:center bottom;} /* ------------------------------------------ Menu title image */ .categ-all{background: url(img/titles/title-categories-all.gif) 0 0 no-repeat;width:66px;} .categ-webdesign{background: url(img/titles/title-categories-webdesign.gif) 0 0 no-repeat;width:146px;} .categ-graphic{background: url(img/titles/title-categories-graphicdes.gif) 0 0 no-repeat;width:192px;} .categ-other{background: url(img/titles/title-categories-other.gif) center top no-repeat;width:94px;} /* ------------------------------------------ Content item (li)*/ #portfolio-list li{float:left;display:inline;overflow:hidden;width:220px;margin:0 10px 21px 0;height:177px;} #portfolio-list h2{font-size:18px;background:none;} /* ------------------------------------------ SINGLE POST PAGE : PROJECT DETAILS */ /* ------------------------------------------ Top bar : title - navigation */ /* -------------------------- Container */ .toptitlebar{width:960px;margin:8px auto 26px auto;overflow:hidden;background:url(img/inset-border.gif) bottom left repeat-x;padding-bottom:15px;} /* -------------------------- Title */ .toptitlebar h2{width:460px;margin:0 10px;float:left;display:inline;font-size:30px;font-style:italic;font-family:Georgia, Baskerville, "Times New Roman", Cambria, Constatia, serif;line-height:1.3;} /* -------------------------- Links container */ .toptitlebar .projects-nav{width:460px;margin:13px 10px 0 10px;float:left;display:inline;overflow:hidden;text-align:right;} /* -------- Links */ .toptitlebar p.projects-nav a{padding-bottom:0;line-height:1.3;} .toptitlebar p.projects-nav a:hover{padding-bottom:0;line-height:1.3;} .toptitlebar p.projects-nav a:first-child{margin-right:70px;font-variant: small-caps;} .toptitlebar p.projects-nav a:nth-child(2n){margin-right:30px;} .toptitlebar p.projects-nav a:last-child{margin-right:0;} /* -------- Next / Prev proj links */ .toptitlebar .projects-nav .next-proj{float:right;display:inline;} .toptitlebar .projects-nav .prev-proj{float:left;display:inline;} /* ------------------------------------------ Column display */ .singlepage .col {overflow:hidden;} .singlepage .col h3{width:100%;font-size:24px;margin:0 auto 22px auto;border-bottom:1px dashed;padding-bottom:3px;} /* ------------------------------------------ Project information bloc */ .proj-general-info{background:rgba(255,255,255,0.2);-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;overflow:hidden;padding:28px 22px;border:1px dashed #C7B5A9;-webkit-shadow:inset 1px 1px 0 #ffffee;-moz-box-shadow:inset 1px 1px 0 #ffffee;box-shadow:inset 1px 1px 0 #ffffee;} /* ------------------------------------------ Project information bloc for Internet Explorer */ .ie .proj-general-info{background:#f9f9f8;overflow:hidden;padding:28px 22px;border:1px dashed #C7B5A9;} /* -------------------------- Container */ .proj-general-info div{overflow:hidden;border-bottom:1px dashed #d4d3cf;margin-bottom:16px;padding-bottom:5px;} .proj-general-info div:last-of-type{border:none;margin-bottom:0;} /* -------------------------- Label */ .proj-general-info .label{width:100px;float:left;display:inline;margin:0 10px 0 0;font-style:italic;font-family:Georgia;font-size:15px;opacity:0.9;} .proj-general-info .label img{margin-right:10px;} /* -------------------------- Values */ .proj-general-info .value{width:280px;float:left;display:inline;margin:0 0 0 10px;} /* ------------------------------------------ DESCRIPTION TEXT */ .singlepage .project-description{margin-top:31px;overflow:hidden;} /* -------------------------- Lists display in project description */ .long-descr ul{margin-bottom:22px;overflow:hidden;} .postid-21 .long-descr ul{margin-bottom:33px;} .proj-general-info li, .long-descr li{margin-bottom:11px;background:url(img/bullet-1.gif) left center no-repeat;padding-left:20px;} .proj-general-info li:hover, .long-descr li:hover{margin-bottom:11px;background:url(img/bullet-1-hover.gif) left center no-repeat;padding-left:20px;margin-bottom:11px;} /* -------------------------- Screenshot browser preview */ .browser-preview{width:460px;} /* -------------------------- Description text titles */ .singlepage h3.info{width:100%;font-size:24px;margin:0 auto 31px auto;height:24px;} .singlepage h3.about{width:100%;font-size:24px;margin:0 auto 16px auto;height:24px;} .singlepage h3.gallery{width:100%;font-size:24px;margin:0 auto 16px auto;height:24px;} /* -------------------------- Description text h4 titles */ .long-descr h4{font-size:18px;font-weight:bold;margin-bottom:22px;} /* -------------------------- Information bloc */ .long-descr .info{font-family:Georgia,Baskerville,serif;font-size:15px;font-style:italic;border:1px dotted #667c32;color:#667c32;padding:10px;} /* ------------------------------------------ ARCHIVE PAGE */ /* -------------------------- Searched term */ .archive-word{background:url(img/bg-quote.gif) left center no-repeat;display:block;font-size:60px;line-height:85px;margin:22px 0 24px 10px;letter-spacing:-0.01em;padding-left:10px;} .archive-word:first-letter{color:#9f644b;} .separate-grunge-bg{background:url(img/grunge-border.gif) center right repeat-y;} /* -------------------------- Column display */ .leftcol-archive{float:left;display:inline;width:470px;margin:0 10px;} .rightcol-archive{float:left;display:inline;width:450px;margin:0 10px;} /* -------------------------- project list display */ .archive-results #portfolio-list li{float:left;display:inline;overflow:hidden;width:220px;margin:0 10px 22px 0;height:177px;} /* -------------------------- Info : nb of projects etc. */ .informations-archive{background:url("img/ornament-bg.gif") center 5px no-repeat transparent;padding-top:43px;margin-top:22px;overflow:hidden;margin-bottom:1px;} .informations-archive p{width:100%;text-align:center;font-size:20px;} /* ------------------------------------------ FOOTER */ #footer{margin-bottom:0;} #bottom-bar{background: url(img/bottom-bar.gif) 0 0 repeat-x;height:60px;width:100%;margin-bottom:0;} #bottom-bar .content{width:940px;margin:0 auto;padding:0 10px;padding-top:26px;text-align:center;} #bottom-bar p{margin-bottom:0;} .ampers{background: url(img/ampersand.png) 0 0 no-repeat;_background: url(img/ampersand.gif) 0 0 no-repeat;text-indent: -9999px;font-size:0;height:12px;line-height:22px;_line-height:12px;width:13px;margin:0 2px;display:inline-block;overflow:hidden;} /* ------------------------------------------ CLEAR FLOATED ELEMENTS */ /* http://sonspring.com/journal/clearing-floats */ html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear{background:none;border:0;clear: both;display: block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow: hidden;visibility: hidden;width:0;height:0;} /* http://www.positioniseverything.net/easyclearing.html */ .clearfix:after{clear: both; content: '.'; display: block; visibility: hidden; height: 0;} .clearfix{display:inline-block;} .clearfix{display: block;} /* ------------------------------------------ LETTRINES */ .lettrine{float:left;font-size:71px;line-height:71px;text-align:center;margin-bottom:-5px;width:60px;height:71px;} .l-a{background:url("img/lettrines/a.gif") no-repeat 0 5px transparent;} .l-b{background:url("img/lettrines/b.gif") no-repeat 0 0 transparent;} .l-c{background:url("img/lettrines/c.gif") no-repeat 8px 6px transparent;} .l-d{background:url("img/lettrines/d.gif") no-repeat 0 0 transparent;} .l-e{background:url("img/lettrines/e.gif") no-repeat 0 5px transparent;} .l-f{background:url("img/lettrines/f.gif") no-repeat 3px 0 transparent;} .l-g{background:url("img/lettrines/g.gif") no-repeat 0 0 transparent;} .l-h{background:url("img/lettrines/h.gif") no-repeat 0 0 transparent;} .l-i{background:url("img/lettrines/i.gif") no-repeat 0 0 transparent;width:44px;} .l-j{background:url("img/lettrines/j.gif") no-repeat 9px 0 transparent;} .l-k{background:url("img/lettrines/k.gif") no-repeat 0 5px transparent;} .l-l{background:url("img/lettrines/l.gif") no-repeat 0 8px transparent;} .l-m{background:url("img/lettrines/m.gif") no-repeat -10px 0 transparent;} .l-n{background:url("img/lettrines/n.gif") no-repeat 0 4px transparent;} .l-o{background:url("img/lettrines/o.gif") no-repeat -1px 7px transparent;} .l-p{background:url("img/lettrines/p.gif") no-repeat 0 0 transparent;} .l-q{background:url("img/lettrines/q.gif") no-repeat -1px 3px transparent;} .l-r{background:url("img/lettrines/r.gif") no-repeat 0 0 transparent;} .l-s{background:url("img/lettrines/s.gif") no-repeat 5px 5px transparent;} .l-t{background:url("img/lettrines/t.gif") no-repeat 5px 5px transparent;} .l-u{background:url("img/lettrines/u.gif") no-repeat 4px 5px transparent;} .l-v{background:url("img/lettrines/v.gif") no-repeat 0 -1px transparent;} .l-w{background:url("img/lettrines/w.gif") no-repeat 0 0 transparent;} .l-x{background:url("img/lettrines/x.gif") no-repeat 0 0 transparent;} .l-y{background:url("img/lettrines/y.gif") no-repeat 0 0 transparent;} .l-z{background:url("img/lettrines/z.gif") no-repeat 0 0 transparent;}