/* Theme Name: JonasDebraekeleer Theme URI: http://www.jonasdebraekeleer.com Description: Theme for my website Version: 2.0 Author: Jonas Debraekeleer Author URI: http://www.jonasdebraekeleer.com Tags: clean, simple */ /* Colors Baby Blue: #77bfe5 White: #ffffff Dark Gray: #89898a */ /* Reset */ html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; } :focus { outline: 0; } /* remember to define focus styles! */ body { background: white; line-height: 1; color: black; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } /* tables still need cellspacing="0" in the markup */ caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* remove possible quote marks (") from &
*/ /* Tools */ .clear { clear: both; } .button { background: #89898a; color: #ffffff; padding: 3px 6px; border: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-transform: uppercase; font-size: 11px; font-family: "Arial Black", Gadget, sans-serif; } .button:hover { background: #77bfe5; color: #ffffff; } /* All */ #wrapper { width: 940px; margin: 0 auto; padding: 0 20px; } p { margin: 0 0 16px 0; } blockquote { margin: 0 10px 0 20px; padding: 0 0 0 5px; border-left: 2px solid #bbbbbb; } cite { margin: 0 40px; } h1, h2, h3, h4, h5, h6 { margin: 0 0 16px 0; } label { margin: 0 0 0 6px; } /* Header */ #header { height: 180px; } #header h1#title { float: left; width: 350px; height: 72px; margin: 50px 0 0 0; background: url(images/design/buttons.png) no-repeat; text-indent: -9999px; } #header h1#title:hover { background-position: 0 -72px; } #header ul { margin: 60px 0 0 0; } #header ul#menu { float: right; width: 195px; margin: 60px 20px 0 0;} #header ul#portfolio-menu { float: right; width: 260px; } #header li { display: inline; float: left; margin: 0 0 0 10px; } #header li a { display: block; width: 55px; height: 55px; text-indent: -9999px; } #header li a#blog { background: url(images/design/buttons.png) no-repeat 0 -144px; } #header li a#blog:hover { background-position: 0 -199px; } #header li a#gallery-button { background: url(images/design/buttons.png) no-repeat -55px -144px; } #header li a#gallery-button:hover { background-position: -55px -199px; } #header li a#me { background: url(images/design/buttons.png) no-repeat -110px -144px; } #header li a#me:hover { background-position: -110px -199px; } #header li a#projects { background: url(images/design/buttons.png) no-repeat -165px -144px; } #header li a#projects:hover { background-position: -165px -199px; } #header li a#photography { background: url(images/design/buttons.png) no-repeat -220px -144px; } #header li a#photography:hover { background-position: -220px -199px; } #header li a#graphic-design { background: url(images/design/buttons.png) no-repeat -275px -144px; } #header li a#graphic-design:hover { background-position: -275px -199px; } #header li a#writing { background: url(images/design/buttons.png) no-repeat -330px -144px; } #header li a#writing:hover { background-position: -330px -199px; } /* Content */ #content { float: left; width: 560px; min-height: 500px; } .head { margin: 0 0 10px 0; } .head h1 { margin: 0; } .error { margin: 6px 0 0 0; } #content ul, #content ol { margin: 0 0 16px 30px; } #content li { padding: 0 0 0 3px; } .post { margin: 0 0 30px 0; } .meta { margin: 2px 0 0 0; } .post-date { float: left; margin: 0 5px 0 0; } .post-category { float: left; padding: 1px 0 0 0; margin: 0; } .post-category a { margin: 0 5px 0 0; } .post-image { width: 230px; height: 230px; margin: 0 16px 0 0; float: left; } .post-tags { margin: 20px 0 30px 0; } /*Overview*/ .teaser { float: left; width: 314px; } .update { overflow: auto; } #previous-page-navigation a { display: block; width: 110px; height: 26px; text-indent: -9999px; margin: 3px auto 30px; background: url(images/design/buttons.png) no-repeat -350px 0px; } #previous-page-navigation a:hover { background-position: -350px -52px; } #previous-page-navigation a:active { margin: 0 auto 33px;} #next-page-navigation a { display: block; width: 110px; height: 26px; text-indent: -9999px; margin: 0 auto; background: url(images/design/buttons.png) no-repeat -350px -26px; } #next-page-navigation a:hover { background-position: -350px -78px; } #next-page-navigation a:active { position: relative; top: 2px; } /*Single*/ .story .ngg-singlepic { max-width: 560px; max-height: 560px; margin: 0 auto; display: block; } .story .intro { height: 230px; font-weight: bold; } .story .intro a { font-style: italic; } .caption { width: 373px; text-align: center; margin: 6px auto 0; display: block; } .update { margin: 16px 0; } /*Post-gallery*/ .ngg-post-galleryoverview img { width: 89px; height: 89px; } .ngg-post-gallery-thumbnail { float: left; padding: 1px 2px; } /*Comments*/ #comments-template h2 { margin: 0 0 6px 0; } #comments-template ul { margin: 0 0 30px 0; } #comments-template li { padding: 0; } .comment { min-height: 76px; margin: 0; } .gravatar { width: 60px; margin: 0 10px 12px 0; float: left; } .comment-meta, .comment-text { width: 490px; float: right; } .comment-meta { margin: 0 0 6px 0; } .comment-date { margin: 0 0 0 3px; } .highlight { background: #89898a; overflow: auto; margin: 0 0 16px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .highlight .comment-wrap { margin: 12px 12px 0 12px; } .highlight .comment-meta, .highlight .comment-text { width: 460px; float: right; } /*Archive*/ #archive .post-date, #archive .post-category { float: none; } #archive .head { font-weight: bold; } #archive .head p { margin: 0; } #archive .post-title { margin: 0 3px 0 0; } #archive .post-date { margin: 0 3px 0 0; } #archive .post-category { max-height: 14px; } #archive .post-image { width: 100px; height: 100px; } #archive .teaser { width: 434px; } #archive .teaser p, #archive .update p { margin: 0 0 6px 0; } #archive .post { margin: 0 0 16px 0; } /*Search*/ #search-head { margin: 0 0 24px 0; } #search-head h1, #search-head p { margin: 0; } /* Sidebar */ #sidebar { float: right; width: 270px; padding: 3px 0 0 0; } #sidebar li.widget { margin: 0 0 20px 0; } #sidebar li.widget li { margin: 0 0 3px 15px; } #sidebar li.widget h2 { margin: 0 0 5px 0; } /*Search field*/ #sidebar li.widget_search { padding: 0 0 20px 0; margin: 0; } #s { float: left; height: 18px; width: 190px; } #searchsubmit { float: right; } /*Next GEN Gallery widget*/ .ngg-widget img { padding: 1px; } /*Twitter widget*/ .widget_twitter div { min-height: 120px; background: url(images/design/twitter-widget-birds.png) no-repeat 70px bottom; overflow: auto; } #sidebar ul li.widget_twitter li { margin: 15px 0 20px 15px } .entry-content { display: block; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.8); } .entry-meta { background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.8); } .wpTwitterWidgetError { background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.8); } /* Blog-page */ /* Clean-Page */ #clean-page #content { float: none; width: 100%; } /*Me*/ #me-content { float: left; width: 560px; } #about .intro { font-weight: bold; } #me-sidebar { float: right; width: 270px; padding: 3px 0 0 0; } #me-sidebar li { padding: 0; } #me-sidebar ul { margin: 0; } #me-sidebar li.section { margin: 0 0 50px 0; } #me-sidebar li.section ul { margin: 12px 0 50px 25px; } #me-sidebar li.field { margin: 0 0 36px; } #me-sidebar li.field ul { margin: 9px 0 0 30px; } #me-sidebar li.style { margin: 0 0 16px; } #me-sidebar li.style ul { margin: -12px 0 0 100px; } #me-sidebar li.subject { margin: 0 0 3px; } #me-sidebar li.text { margin: 0 0 16px; } #me-sidebar li.link { margin: 0 0 9px; } /* Gallery */ #gallery #content { float: none; width: 100%; } .ngg-gallery-button { width: 172px; margin: 0 20px 0 0; float: left; } .ngg-gallery-button:hover a { color: #77bfe5; } .ngg-gallery-button h2 { display: block; position: relative; bottom: 50px; width: 160px; padding: 6px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.8); } /*Sub-gallery*/ #nav-bar { padding: 0 0 50px; } #breadcrumbs { float: left; } .separator { margin: 0 6px 0; } ul#gallery-nav { float: right; margin: 0; } ul#gallery-nav li { float: left; display: inline; margin: 0; } #ngg-galleryoverview { width: 760px; margin: 20px auto; } .ngg-gallery-thumbnail { width: 128px; margin: 0 12px 24px; float: left; } .ngg-gallery-thumbnail img { width: 128px; height: 128px; } /*Imagebrowser*/ #viewer { padding: 20px 0 50px 0; } #viewer a { float: left; display: block; width: 26px; height: 110px; text-indent: -9999px; background: url(images/design/buttons.png) no-repeat; } #viewer a#left-nav { margin: 245px 0 0 54px; background-position: -460px 0; } #viewer a#left-nav:hover { background-position: -460px -110px; } #viewer a#left-nav:active { position: relative; top: 0; right: 2px; } #viewer a#right-nav { margin: 245px 0 0 0; background-position: -486px 0; } #viewer a#right-nav:hover { background-position: -486px -110px; } #viewer a#right-nav:active { position: relative; top: 0; left: 2px; } #viewer #ngg-picture-box { float: left; width: 780px; height: 600px; } #viewer #ngg-picture-box img { display: block; margin: 0 auto; } #viewer #ngg-picture-box img.landscape { margin: 100px auto 0; } #viewer #ngg-picture-box img.S90 { margin: 75px auto 0; } #info { margin: 0 auto; width: 700px; } p#picture-description { margin: 0 0 30px 0; } #meta div { margin: 0 0 16px 0; } #camera-settings { float: left; width: 300px; } #equipment, #post-processing { float: right; width: 380px } #meta h3 { margin: 0 0 10px 0; } #meta table { margin: 0 0 12px 0; } #meta th { width: 150px; } /* Photography */ .category { margin: 0 0 20px; } .photography-button { width: 465px; margin: 0 0 -145px 0; float: left; } .photography-button:hover a { color: #77bfe5; } .right { float: right; } .photography-text { display: block; position: relative; left: 250px; bottom: 157px; width: 150px; height: 156px; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.8);} .photography-text span { float: left; } #commercial #bmx .photography-title { margin: 45px 0 0 15px; } #editorial #bmx .photography-title { margin: 45px 0 0 15px; } #editorial #concerts .photography-title { margin: 65px 0 0 15px; } #editorial #parties .photography-title { margin: 60px 0 0 15px; } #editorial #surf .photography-title { margin: 50px 0 0 15px; } #commercial #bmx .photography-style { margin: -3px 0 0 17px; } #editorial #bmx .photography-style { margin: -3px 0 0 17px; } #editorial #concerts .photography-style { margin: -1px 0 0 17px; } #editorial #parties .photography-style { margin: -2px 0 0 16px; } #editorial #surf .photography-style { margin: -2px 0 0 17px; } /* Don't disturbe */ #dont-disturbe { background: url(images/design/dont-disturb-sign.png) no-repeat 100px 40px; } #dont-disturbe #content { float: right; margin: 160px 120px 160px 0; width: 300px; min-height: 200px; } /* Footer */ #footer { margin: 60px 0 40px 0; min-height: 80px; } #footer p { width: 600px; margin: 0 0 6px 0; } #footer h1 { margin: 0 0 3px 0; } #footer #rss { display: none } #footer #newsletter { display: none } #footer .notion { display: block; margin: 6px 0 0 6px; } #footer ul#footer-menu { float: right; } #footer li { display: inline; float: left; margin: 0 0 0 5px; } #footer li a { display: block; width: 22px; height: 22px; text-indent: -9999px; padding: 0; } #footer li a#copyright-button { background: url(images/design/buttons.png) no-repeat -416px -104px; } #footer li a#copyright-button:hover { background-position: -438px -104px; } #footer li a#rss-button { background: url(images/design/buttons.png) no-repeat -416px -126px; } #footer li a#rss-button:hover { background-position: -438px -126px; } #footer li a#newsletter-button { background: url(images/design/buttons.png) no-repeat -416px -148px; } #footer li a#newsletter-button:hover { background-position: -438px -148px; } /* Typography */ body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #89898a; } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; } h1, h2, h3 { font-family: "Arial Black", Gadget, sans-serif; } h1 { font-size: 22px; } h2 { font-size: 14px; } h4 { letter-spacing: 1px; } h6 { font-style: italic; } a { text-decoration: none; color: #89898a; } a:hover { color: #77bfe5; } blockquote { font-style: italic; } cite { font-style: italic; font-weight: bold; font-size: 18px; display: block; text-align: center; } .italic { font-style: italic; } .bold { font-weight: bold; } .notion { font-style: italic; font-size: 11px; } /*Header*/ #header h1 { font-size: 36px; } /*Content*/ #content p { line-height: 1.2; } #content ul li { list-style: disc; } #content ol li { list-style: decimal; } /*Overview*/ .meta p { font-weight: bold; line-height: 1; } .post-category { font-size: 11px; text-transform: uppercase; } .teaser a, .teaser a:hover { font-weight: bold; } .update a, .update a:hover { font-weight: bold; } a.more-link, a.more-link:hover { font-family: "Arial Black", Gadget, sans-serif; text-decoration: none; margin: 10px 0 0 0; text-transform: uppercase; } /*Single*/ .story a, .story a:hover, .post-tags a, .post-tags a:hover { font-weight: bold; } .caption { font-style: italic; font-size: 11px; } /*Comments*/ #comments-template ul li { list-style: none; } #comments-template a, #comments-template a:hover { font-weight: bold; } .comment-author { font-size: 12px; font-weight: bold; text-transform: uppercase; } .comment-date { font-size: 10px; } .highlight { color: #ffffff; } .highlight a { color: #ffffff; } .highlight a:hover { color: #77bfe5; } #comments-form .label { font-weight: bold; } /*Archive*/ #archive .post-title { font-family: "Arial Black", Gadget, sans-serif; text-transform: uppercase; font-size: 16px; } #archive .post-date, #archive .teaser, #archive .update { font-size: 11px; } /*Search*/ #search-head p { font-size: 14px; font-weight: bold; text-transform: uppercase; } /*Clean Page*/ /*Me*/ #me-sidebar ul li { list-style: none; } #me-sidebar ul li a, #me-sidebar ul li a:hover { font-weight: bold; } #me-sidebar li.section { font-family: "Arial Black", Gadget, sans-serif; text-transform: uppercase; font-size: 11px; } #me-sidebar li.field { font-size: 12px; } #me-sidebar li.style { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-transform: none; } #me-sidebar li.subject { font-weight: normal; } #me-sidebar li.text { font-family: Arial, Helvetica, sans-serif; text-transform: none; font-size: 12px; line-height: 1.2;} #me-sidebar li.link { font-family: Arial, Helvetica, sans-serif; text-transform: none; font-size: 12px; line-height: 1.2;} /*Gallery*/ .ngg-gallery-button { text-align: center; } #breadcrumbs { font-weight: bold; } /*Imagebrowser*/ #meta table { line-height: 1.2; } #meta th { font-weight: bold; } #meta td { font-style: italic; } /*Photography*/ .photography-text { text-transform: uppercase; font-family: "Arial Black", Gadget, sans-serif; } #commercial #bmx .photography-title { font-size: 48px; } #editorial #bmx .photography-title { font-size: 48px; } #editorial #concerts .photography-title { font-size: 20px; } #editorial #parties .photography-title { font-size: 24px; } #editorial #surf .photography-title { font-size: 40px; } .photography-style { font-size: 9px; } /*Sidebar*/ #sidebar li.widget li { text-transform: uppercase; font-size: 10px; } #sidebar h2 { font-size: 12px; } /*Twitter Widget*/ .entry-content { font-weight: bold; text-transform: none; font-size: 14px; } .entry-meta { font-size: 8px; } .from-meta { text-transform: none; } .from-meta a { text-transform: uppercase; } #sidebar li.widget li.wpTwitterWidgetError { font-weight: bold; text-transform: none; font-size: 14px; } /*Footer*/ #footer p { font-size: 10px; line-height: 1.2; } #footer h1 { font-size: 12px; } #footer a, #footer a:hover { font-weight: bold; } #footer .notion { font-size: 9px; line-height: 1.2; }