/* Theme Name: SOFA One Page Folio Theme URI: http://opf.presswordthemes.com/ Description: One page WordPress Theme Version: 1.0 Author: Dameer Author URI: http://rider.sofarider.com/ Tags: CMS, Portfolio */ /* -------------------------------------------------------------- SITE MEDIA STYLES Created: 25.10.2009. Modified: 16.11.2009. -------------------------------------------------------------- */ /* =TOC -------------------------------------------------------------- 01. Style reset 02. Defaults 03. Global layout 04. Navigation 05. Header 05.01 siteinfo 05.02 copyright 05.03 rssfeed 06. main 06.01 sectionheading 06.02 cvdownload 06.03 short-articles 06.04 portfolio 06.05 contact 06.05.01 widget 06.05.02 socialmedia 06.05.03 vcard 07. sidebar 07.01 widget 07.02 myselfblock 07.02.01 callout 08. WP default clases 08.01 wp-caption -------------------------------------------------------------- */ /* =01. Style reset -------------------------------------------------------------- */ /* 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 { font: 62.5%/1.5 "Lucida sans unicode", "Lucida sans", sans-serif; color: #333; background: #fff url(images/bg.jpg) no-repeat 50% -10px fixed; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; } ::-moz-selection { background: #336C26; color: #fff; } ::selection { background: #336C26; color: #fff; } /* =02. Defaults -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .navigation, #callout, #siteinfo p { font-weight: bold; letter-spacing: -.02em; color: #20401a; font-family: "Myriad Pro", Myriad, Geneva, Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif; } a { text-decoration: none; } a:link { color: #336C26; } a:visited { color: #336C26; } a:hover { color: #244A1A; } a:active { color: #244A1A; } a:focus { color: #244A1A; } blockquote { width: 300px; margin-left: 10px; float: right; display: inline; background-color: #181816; color: #afa995; } blockquote p { font-size: 1.2307em; line-height: 1.5; padding: .9375em 1.25em; text-shadow: 0 0 1px #181816; } img { float: left; } label { display: block; } input, textarea { color: #20401a; border: 0; font-family: "Lucida sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; } /* =03. Global layout -------------------------------------------------------------- */ #wrap { width: 942px; margin: 0 auto; position: relative; margin-top: -10px;} #header { width: 942px; height: 167px; position: fixed; background: transparent url(images/header.jpg) center top no-repeat; z-index: 99;z-index: 200;} #logo { width: 350px; height: 140px; display: block; position: absolute; left: 0; top: 15px; } #siteinfo { width: 580px; position: absolute; left: 0; bottom: -20px; } #main { width: 942px; position: relative; float: right; display: inline; margin-top: 157px; background: url(images/main_bg.png) 50% 157px no-repeat fixed; } #content { width: 802px; position: relative; float: right; padding: 10px 0 0 130px; } #mask_top { width: 680px; position: fixed; top: 157px; height: 29px; margin-left: 100px; background: url(images/fader.png) center top no-repeat; z-index: 120;} #stag { position: fixed; bottom: 0; height: 90px; width: 69px; z-index: 150; background: url(images/stag.png) no-repeat; } .short-articles, .portfolio, .contact { width: 660px; position: relative; margin-left: 120px; z-index: 110; } .article { width: 650px; position: relative; margin-left: 120px; padding-top: 10px; z-index: 110; } #sidebar { width: 200px; height: 100%; position: fixed; top: 0; margin-left: 32px; z-index: 100;} #myselfblock { width: 200px; } #callout { width: 200px; margin: -20px 10px 0; position: relative; z-index: 2; } #mainnavig { width: 180px; margin: 10px; background: transparent; position: relative; top: 165px; z-index: 150; } #footer { display: inline !important; width: 100%; position: fixed; bottom: 0px; height: 135px; background: url(images/forest.png) bottom center repeat-x; z-index: 100;} #overlay { width: 942px; height: 135px; margin: 0 auto; background: url(images/content_bg.png) no-repeat bottom right; } #mask_bottom { width: 800px; height: 115px; background: url(images/footer_mask.png) no-repeat right bottom; position: fixed; bottom: 0; z-index: 111;} /* =04. Navigation -------------------------------------------------------------- */ .navigation { } .navigation li { width: 180px; margin-bottom: 2px; font-size: 26px; font-weight: bold; } .navigation li a { display: block; padding: 0 0 7px 15px; text-shadow: 1px 1px 1px #20401a; } .navigation li a:link, .navigation li a:visited, .navigation li a:active { color: #fff; } .navigation li a:hover, .navigation li a:focus { color: #20401a; text-shadow: 1px 1px 1px #fff; } .navigation li.current-cat a:link, .navigation li.current-cat a:visited, .navigation li.current-cat a:hover, .navigation li.current-cat a:active, .navigation li.current_page_item a:link, .navigation li.current_page_item a:visited, .navigation li.current_page_item a:hover, .navigation li.current_page_item a:active { color: ; background: ; } .top { width: 100%; border-top: 1px dotted #B6CFAE; margin-top: 30px; padding-top: 10px; } .top a { float: right; font-size: 11px; font-variant: small-caps; margin-right: 10px; font-weight: normal !important; letter-spacing: .3px; text-shadow: 1px 1px 1px #ffffff !important; } /* =05. header -------------------------------------------------------------- */ /* =05.01 siteinfo -------------------------------------------------------------- */ #siteinfo h1 { margin-bottom: .25em; font-size: 4em; font-weight: bold; line-height: .75; color: #faefca; text-shadow: 0 0 10px rgba(0,0,0,.75); } #siteinfo p { font-size: 2.5em; font-weight: bold; letter-spacing: -.05em; line-height: 1.2; color: #fdfbec; text-shadow: 0 0 5px rgba(0,0,0,.75); } /* =05.02 copyright -------------------------------------------------------------- */ .copyright { color: #20401a; text-shadow: 1px 1px 1px #336C26; font-size: 10px; position: absolute; right: 0; top: 15px; } .copyright a { color: #ffffff; text-shadow: 1px 1px 1px #20401a; } .copyright a:hover { color: #336C26; text-shadow: 1px 1px 1px #ffffff; position: relative; top: 1px; left: 1px; } /* =05.03 rssfeed -------------------------------------------------------------- */ #rssfeed { width: 37px; height: 27px; display: block; position: absolute; right: 0; bottom: 45px; background: transparent url(images/rss.png) no-repeat 50% 50%; } #rssfeed a { width: 37px; height: 27px; display: block; text-indent: -99999em; } /* =06. main -------------------------------------------------------------- */ #main { font-size: 1.2em; line-height: 1.8462; } #main h1 { font-size: 1.8462em; line-height: 1.5; color: #20401a; text-shadow: 1px 1px 1px #fff;} #main h2 { font-size: 1.6154em; line-height: 1.7143; } #main h3, #main h4, #main h5, #main h6 { font-size: 1.3846em; line-height: 2; } #main p, #main ol, #main ul, #main dl, #main table { margin-bottom: .923em; text-shadow: 0 0 .5px #333;} #main strong { text-shadow: none;} #main li ul, #main li ol, #main blockquote p { margin-bottom: 0; margin-left: 0; } #main li li { font-size: 100%; } #main ol, #main ul { margin-left: .923em; } #main img { margin: 0 10px 10px 0; display: inline; } #main a { text-shadow: none; font-weight: bold; } #main a:active { position: relative; top: 1px; } #main object, #main embed { width: 290px; height: 215px; float: left; overflow: hidden; padding: 0; margin: 5px 10px 5px 0; } #main object embed { padding: 0; margin: 0; } .article img, .portfolio img, #main object, #main embed { } .article li, .portfolio li { padding-left: .923em; background: transparent url(images/bullet.png) no-repeat 0 .85em; } /* =06.01 sectionheading -------------------------------------------------------------- */ #main .sectionheading { margin: 10px 0; font-size: 48px; clear: both; } #main .article .sectionheading { position: relative; } #main .sectionheading span { display: block; } /* =06.02 cvdownload -------------------------------------------------------------- */ .cvdownload { height: 36px; float: left; display: inline; padding-left: 30px; background: transparent url(images/dl-icon.png) no-repeat center left; overflow: hidden; } .cvdownload a { float: left; display: inline; padding: 0 15px 0 0; font-size: 1.0769em; text-transform: uppercase; font-weight: bold; letter-spacing: -.05em; line-height: 36px; font-family: "Myriad Pro", Myriad, Geneva, Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; background: transparent url(images/dl-bar.png) no-repeat center right; } .cvdownload a:link, .cvdownload a:active, .cvdownload a:visited { color: #bbb59f; } .cvdownload a:hover, .cvdownload a:focus { color: #a50b1f; } .article, .short-articles, .portfolio, .contact { float: left; display: inline; } .article, .short-articles, .contact { padding-top: 170px; float: left; display: inline; } .article#page_2 { padding-top: 10px !important; } .article#page_56 p { margin-bottom: 0px; } .article#page_56 .testimonial { margin: 10px; padding: 20px 40px 0; background:url(images/quote.png) top left no-repeat; } .portfolio { margin-bottom: 35px; } .portfolio .sectionheading { margin-bottom: 30px; } .portfolio h1 a:link, .portfolio h1 a:visited, .portfolio h1 a:active { color: #bbb59f; } .portfolio h1 a:hover, .portfolio h1 a:focus { color: #f73d27; } /* =06.03 short-articles -------------------------------------------------------------- */ .short-articles p { font-size: 1em; margin-left: 10px; line-height: 1.6; } .short-articles .widget { width: 310px; float: left; margin: 0 10px; display: inline; } .short-articles .widget p { margin-left: 0; font-size: 100%; } .short-articles .widget img { /*float: left; */ margin: 10px 20px 0 0; border: 0; position: relative; left: -4px; margin-right: 0; } /* =06.04 portfolio -------------------------------------------------------------- */ .portfolio p { margin-left: 30px; } .project { width: 630px; margin: 0 0 60px 30px; overflow: hidden; clear: both; } .project p { margin-left: 0; } .project-images { width: 310px; float: left; display: inline; } .project-description { width: 300px; float: right; display: inline; } #main .project li { padding-left: 1.6154em; background-image: url(images/check-bullet.png); background-position: 0 .6em; } /* =06.05 contact -------------------------------------------------------------- */ .contact { margin-bottom: 150px; z-index: 115; } .contact p { margin-left: 5px; text-indent: 0 !important;} .contactform { width: 335px; float: left; } .contactform2 { width: 335px; margin: 75px auto 100px; } .contactform p { width: 330px; height: 30px; margin-bottom: 5px; background: url(images/input.png) no-repeat; text-indent: 0 !important; } .contactform p.message, .contactform p.spamtrap, .contactform p.submitMe { background: none; height: auto; } .contactform input { color: #336C26; padding: 7px 10px 7px 35px; height: 16px; font-size: 11px; text-shadow: 0px 1px 0px #fff; } .contactform input#yourname { background: url(images/icon_name.png) no-repeat; background-position: 12px 7px !important;} .contactform input#email { background: url(images/icon_mail.png) no-repeat; background-position: 11px 7px !important;} .contactform input#entrysocial { background: url(images/icon_phone.png) no-repeat; background-position: 10px 8px !important;} .contactform textarea { color: #336C26; width: 310px; text-shadow: 1px 1px 1px #ffffff; background: url(images/message.png) no-repeat left; height: 120px; padding: 10px; line-height: 1.2371; font-size: 11px; overflow: auto; } .contactform .message { clear: both; } .contactform .spamtrap { width: 180px; float: left; display: inline; background: url(images/pass.png) no-repeat !important; } .contactform .spamtrap label { color: #336C26; display: inline; padding-left: 20px; font-size: 11px; text-shadow: 0px 1px 0px #fff; } .contactform .spamtrap input { width: 85px; padding-left: 0px; background: transparent; } .contactform .submitMe { width: 75px; float: right; display: inline; text-align: right; } .contactform .submitMe button { width: 75px; height: 30px; font-size: 10px; font-weight: bold; color: #336C26; letter-spacing: .2px; text-transform: uppercase; border: 0; padding: 3px 5px 6px; overflow: hidden; cursor: pointer; border-bottom: none; background: url(images/submit.png) no-repeat; text-shadow: 1px 1px 1px #ffffff; } .contactform .submitMe button span { display: block; padding: 2px 5px 0 5px; line-height: 29px; } /* =06.05.01 widget -------------------------------------------------------------- */ .contact .widgetwrap { float: right; width: 300px; overflow: hidden; padding: 0; margin: 0; } .contact .widgetwrap .widget { width: 260px; padding: 0px 10px 20px 10px; margin: -10px 20px 20px 0; float: right; display: inline; } .contact .widgetwrap .widget h2 { margin-bottom: 0; } .contact .widgetwrap .widget p { margin-left: 0; font-size: 100% } /* =06.05.02 socialmedia -------------------------------------------------------------- */ #main .socialmedia { margin: 10px 0 0 0; padding: 0; } .contact .socialmedia li { width: 100%; overflow: hidden; clear: both; padding-left: 0; margin-bottom: 10px; background: none; font-size: 1em; } .socialmedia strong { display: block; font-size: 1.0769em; line-height: 1; } .socialmedia span { display: block; font-size: .7692em; line-height: 2; text-transform: uppercase; } .contact .socialmedia img { border: 0; } .contact .socialmedia a:link, .contact .socialmedia a:visited, .contact .socialmedia a:active { color: #bbb59f; } .contact .socialmedia a:hover, .contact .socialmedia a:focus { color: #f73d27; } /* =06.05.03 vcard -------------------------------------------------------------- */ .vcard { } .adr { margin-bottom: 1em; } .postal-code, .locality { display: inline; } .contact .vcard a:link, .contact .vcard a:active, .contact .vcard a:visited { color: #626262; } .contact .vcard a:hover { color: #626262; } /* =07. sidebar -------------------------------------------------------------- */ #sidebar { background: transparent url(images/nav_bg.png) no-repeat 0 155px; } /* =07.01 widget -------------------------------------------------------------- */ #sidebar .widget { width: 280px; margin: 10px; background: transparent url(images/px1x1.png) no-repeat 0 0; } .widget h2 { margin-bottom: 10px; font-size: 2.4em; line-height: 1.5; font-weight: bold; } .widget p, .widget li { font-size: 1.14em; /*line-height: 1.54;*/ } .twitter { } .twitter li { margin-bottom: .5em; } /* =07.02 myselfblock -------------------------------------------------------------- */ #myselfblock img { position: relative; z-index: 1; float: none; } /* =07.02.01 callout ---------------------------------------------------------- */ #callout { background: transparent url(images/callout-bottom.png) no-repeat 50% 100%; padding-bottom: 5px; } #callout .inner { background: transparent url(images/callout-top.png) no-repeat 50% 0; padding-top: 17px; } #callout p { padding: 2px 10px 0 10px; font-size: 1.4em; line-height: 1.3; font-weight: bold; text-transform: uppercase; text-align: center; background-color: #500014; color: #fdfaeb; } #callout strong { color: #f73d27; } /* =08. WP default clases -------------------------------------------------------------- */ #main .alignleft, #main .alignnone { float: left; margin: 0 10px 0 0; } #main .alignright { float: right; margin: 0 0 0 10px; } #main .aligncenter { float: none; margin: 5px auto 0 auto; display: block; clear: both; } #main .size-large { margin-right: 0; } /* =08.01 wp-caption -------------------------------------------------------------- */ #main .wp-caption { text-align: center; } #main .wp-caption img { float: none; margin: 0; } #main .wp-caption-text { margin-bottom: 0; } /* warnings */ #main .warning-title { font-size: 1.2em; padding-bottom: 0; margin-bottom: 0; font-weight: bolder; color: red; }