/* 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 */ /* STYLE 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 { 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: #EEE8F4; background: #000000 url(images/header.jpg) repeat-x 0 0; } 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; } /* NAVIGATION ------------------------------------------- */ /* controls the navigation bar on left */ .navigation li { width: 280px; margin-bottom: 10px; font-size: 2em; line-height: 2; font-weight: bold; } .navigation li a { display: block; padding: 0 20px; } .navigation li a:link, .navigation li a:visited, .navigation li a:active { color: #4B0195; background:url(images/button.jpg) repeat-x; } .navigation li a:hover, .navigation li a:focus { color: #EEE8F4; text-shadow: 2px 3px 2px #1D0039; background:url(images/button_on.jpg) repeat-x; } .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: #4B0195; background: #000000; } /* MAIN ------------------------------------------------- */ /* controls the titles */ #main { font-size: 1.3em; line-height: 1.8462; } #main h1 { font-size: 1.8462em; line-height: 1.5; color: #000000; text-shadow: 1px 1px 2px #53267F;} #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; } #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 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; } /* CONTACT --------------------------------------------- */ .contact { } .contact p { margin-left: 30px; } .contactform { width: 330px; float: left; } .contactform p { margin-bottom: 5px; } .contactform input { width: 296px; padding: 5px 2px 8px 2px; font-size: 1em; } .contactform textarea { width: 298px; height: 12em; padding: 0 0 0 2px; line-height: 1.2371; font-size: 1em; overflow: auto; } .contactform .message { clear: both; } .contactform .spamtrap { float: left; display: inline; } .contactform .spamtrap label { display: inline; } .contactform .spamtrap input { width: 50px; } .contactform .submitMe { float: right; display: inline; text-align: right; } .contactform .submitMe button { height: 29px; font-size: 1.2308em; font-weight: bold; line-height: 26px; letter-spacing: -.05em; text-transform: uppercase; font-family: "Myriad Pro", Myriad, Geneva, Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif; border: 0; background: #1E003C; color: #EEE8F4; padding: 3px 5px; overflow: hidden; cursor: pointer; border-bottom: none; } .contactform .submitMe button span { display: block; padding: 2px 5px 0 5px; line-height: 29px; } /* DEFAULTS -------------------------------------------- */ h1, h2, h3, h4, h5, h6, .navigation, #callout, #siteinfo p { font-weight: bold; letter-spacing: -.02em; color: #EEE8F4; font-family: "Myriad Pro", Myriad, Geneva, Calibri, "Helvetica Neue", Helvetica, Arial, sans-serif; } a { text-decoration: none; } a:link { color: #a50b1f; } a:visited { color: #363636; } a:hover { color: #f73d27; } a:active { color: #a50b1f; } a:focus { color: #a50b1f; } 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 /* controls the contact input boxes */ { display: block; } input, textarea { background-color: #16002C; color: #FFFFFF; border: 0; font-family: "Lucida sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; } /* SOCIAL MEDIA ----------------------------------------- */ /* controls the social icon links in the contact area */ #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: #EEE8F4; } .contact .socialmedia a:hover, .contact .socialmedia a:focus { color: #4B0195; } /* Global Layout --------------------------------------- */ #wrap { width: 960px; margin: 0 auto; position: relative; } #header { width: 630px; height: 265px; margin-left: 330px; position: relative; } #siteinfo { width: 580px; position: absolute; left: 0; bottom: 70px; } #main { width: 660px; float: right; display: inline; } .article { width: 630px; margin-left: 30px; position: relative; } .short-articles, .portfolio, .contact { width: 660px; position: relative; } #sidebar { width: 300px; height: 100%; position: fixed; top: 0; } #myselfblock { width: 300px; } #callout { width: 280px; margin: -20px 10px 0; position: relative; z-index: 2; } #mainnavig { width: 280px; margin: 10px; background: transparent url(images/px1x1.png) no-repeat 0 0; } /* header ---------------------------------------------- */ /* 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); } /* copyright ---------------------------------------- */ .copyright { font-size: 1em; line-height: 2; color: #000000; position: absolute; right: 0; bottom: 0px; } /* sectionheading ----------------------------------- */ #main .sectionheading { width: 660px; height: 75px; margin-bottom: 20px; line-height: 75px; font-size: 3.6923em; background: transparent url(images/sectionheading.png) no-repeat 100% 0; clear: both; } #main .article .sectionheading { position: relative; left: -30px; margin-right: -30px; } #main .sectionheading span { padding-left: 30px; display: block; } /* 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 { margin-bottom: 95px; float: left; display: inline; } .portfolio { margin-bottom: 35px; } .portfolio .sectionheading { margin-bottom: 30px; } .portfolio h1 a:link, .portfolio h1 a:visited, .portfolio h1 a:active { color: #EEE8F4; } .portfolio h1 a:hover, .portfolio h1 a:focus { color: #4B0195; } /* short-articles ----------------------------------- */ .short-articles p { font-size: 1em; margin-left: 30px; } .short-articles .widget { width: 300px; float: left; margin-left: 30px; 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; } /* 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; } /* widget ------------------------------------------- */ .contact .widgetwrap { float: right; width: 300px; overflow: hidden; padding: 0; margin: 0; } .contact .widgetwrap .widget { width: 260px; padding: 10px 20px 20px 20px; margin-bottom: 20px; float: right; display: inline; background: transparent url(images/contact-widget.png) no-repeat 0 0; } .contact .widgetwrap .widget h2 { margin-bottom: 0; } .contact .widgetwrap .widget p { margin-left: 0; font-size: 100% } /* 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; } /* sidebar ------------------------------------------ */ #sidebar { text-shadow: 0 0 1px #0d0d0a; background: transparent url(images/sidebar.png) no-repeat 0 0; } /* 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; } /* myselfblock -------------------------------------- */ #myselfblock img { position: relative; z-index: 1; float: none; } /* 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: #4B0195; } /* WP default classes ------------------------------- */ #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; } /* 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; }