/* Theme Name: Stylozero Theme Theme URI: Description: Original Theme for Stylozero Website Author: Gianfranco Lanucara Author URI: http://www.stylozero.com Version: 1.0 */ /* 1.RESET (zero out all values for cross-browser consistency) ============================================================= */ html, body, div, span, img, h1, h2, h3, h4, h5, h6, a, p, blockquote, q, cite, pre, code, address, abbr, acronym, ul, ol, li, dl, dt, dd, form, fieldset, legend, label, input, textarea, button, table, caption, thead, tbody, tfoot, tr, th, td, applet, object, iframe { margin: 0; padding: 0; border: 0; outline: none; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } blockquote, q, cite, em, strong, address { font-weight: normal; font-style: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } abbr, acronym { } table { border-collapse: collapse; border-spacing: 0; }/* tables still need 'cellspacing="0"' in the markup */ caption, th { text-align: left; } th { font-weight: normal; } a img { border: 0; } /* 2.LAYOUT (structure blocks) ============================================================= */ body { background: url(images/bg.jpg) top repeat-x; } #wrapper { width: 950px; margin: 0 auto; background: url(images/header.jpg) top center no-repeat; overflow: hidden; } #header { height: 240px; position: relative; } #main { padding: 30px 0 70px; overflow: hidden; } #content { width: 630px; float: left; } #sidebar { width: 310px; float: right; } /* Action Page */ #action #content { width: 530px; border-right: 1px solid #ccc; padding-right: 20px; } #action #sidebar { width: 360px } /* Blog */ #blog #sidebar { width: 270px; padding-top: 20px; } #footer { height: 430px; background: url(images/footer-bg.jpg) bottom repeat-x; } #footer-block { width: 950px; height: 430px; margin: 0 auto; background: url(images/footer-block.jpg) bottom no-repeat; position: relative; } /* Search Block */ #search-block { padding: 35px 0 10px ; border-bottom: 1px solid #ddd; margin: 0 7px; } /* Footer Columns */ #footer-col-1, #footer-col-2, #footer-col-3 { float: left; margin-left: 20px; margin-top: 30px; height: 270px; } #footer-col-1, #footer-col-2 { border-right: 1px solid #ddd; padding-right: 20px; } #footer-col-1 { width: 240px; } #footer-col-2 { width: 280px; } #footer-col-3 { width: 310px } /* Site Info Block */ #site-info { clear: both; position: absolute; bottom: 8px; left: 20px; width: 910px; } #site-info ul li { } #site-info ul li#copyright { } /* Sticky Footer */ html, body { height: 100%; } #wrapper { min-height: 100%; margin-bottom: -430px; }/* bottom margin is the negative value of the footer's height */ #push { height: 430px; }/* height must be same as "#footer" */ /* 3.TYPOGRAPHY (fonts values only) ============================================================= */ /* FONTS FAMILY SUMMARY ------------------------------------------------------------- Helvetica, Arial, sans-serif; = Basic Set Up */ body { line-height: 1.3; font-family: Helvetica, Arial, sans-serif; font-size: 62.5%;/* sets 1.0em to 10px */ } /* Basic Body Texts */ strong { font-weight: bold; } #teaser { text-transform: uppercase; } #main p, #footer ul, #footer p, #main ul, #main dl, #main ol { font-size: 1.5em; } #wrapper .entry { font: 1.0em/2.3em Verdana, Geneva, sans-serif; } /* Normalize nested items */ #main ul p { font-size: 1em; } #main ul h3 { font-size: 1em; font-weight: bold; } #main ul ul { font-size: 1.0em; } #main ul.services-list { font-size: em; } /* Navigation */ ul#basic-nav { font-size: 2.0em; text-transform: uppercase; } ul#studio-nav, p#blog-nav { font-size: 1.5em; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: bold; } .page h2 { font-size: 3.0em; line-height: 1; } .page h2 em { font-weight: bold; } .page h2.page-list-title, .page h3 { font-size: 1.8em; font-weight: normal; } #footer h2, .page h4 { font-size: 1.8em; } .page #posts-col h4 { font-size: 1.2em; } #main .portfolio-item h3 { font-size: 2.3em; font-weight: bold; line-height: 1; } #contact h3, #contact h4 { font-size: 1.6em; font-weight: normal; margin-bottom: 10px; } form.jqtransform h2 { font-size: 1.4em; font-weight: normal; } form.jqtransform h3 { font-size: 1.2em; font-weight: bold; } /* Paragraphs */ #main #intro p { font-size: 1.7em; } #main .page-block p { font-size: 1.6em; } #footer blockquote { } #footer blockquote p { font-size: 2.2em; font-family: Palatino, Times, Times New Roman, serif; } #footer blockquote cite { font-size: 1.4em; } ul.page-list li { font-size: 1.1em; } table#bigsteps th[scope="row"] strong { font-size: 6.0em; font-weight: normal; } table#bigsteps th[scope="row"] small { font-size: 1.4em; } table#bigsteps th[scope="row"] big { font-size: 2.0em; } table#bigsteps th[scope="col"] { font-size: 2.0em; color: #444; } table#bigsteps td { font-size: 1.5em; } ul#smallsteps li a { font-weight: bold; font-size: 1.2em; } ul#smallsteps li ul { font-size: 1em; } #worksheet a { font-size: 1.3em; } /* 4.COLORS (main colors only - some may be styled elsewhere) ============================================================= */ /* USED COLORS (put here also colors that are styled elsewhere) ------------------------------------------------------------- Pastel = #ddeeee = background Turqoise = #0088ff = links Fucsia = #991177 = hover, active Green = #99cc00 = complementary Black = #444 = titles Grey = #666 = base color fot all texts Grey = #777 = Grey = #bbb = border lines Grey = #ddd = home & contact */ body { background-color: #ddeeee; color: #666; } /* Links */ a { color: #0088ff; }/* turquoise */ /* Hovers */ #wrapper a:hover, #footer a:hover { color: #991177; }/* !without #wrapper the hover state doesn't work: check why! */ #wrapper #header a:hover { color: #991177; } /* Active */ #wrapper #header li.active a { color: #991177; } ul#main-nav li#home-menu a, ul#main-nav li#contact-menu a { color: #ccc; } ul#main-nav li#about-menu a, ul#main-nav li#services-menu a, ul#main-nav li#process-menu a, ul#main-nav li#portfolio-menu a, ul#main-nav li#blog-menu a { color: #666; } /* Headings */ .page h2 em { color: #777; } form.jqtransform h3 { color: #991177; } #main h2.page-list-title, .page h3 { color: #991177; }/* fucsia */ #footer h2, .page h4, .page h2, form.jqtransform h2, #contact h3, #contact h4, ul#faq h3, .portfolio-item h3 { color: #444; }/* black */ /* About List */ dl#about-list dt { color: #99cc00; }/* green */ ul#services-sum-list li, ul#smallsteps li a { color: #444; }/* black */ table#bigsteps th[scope="row"] small { color: #99cc00; } table#bigsteps th[scope="row"] big { color: #777;} table#bigsteps th[scope="col"] { color: #444; }/* black */ /* Contact */ #contact p em { color: #991177; }/* fucsia */ /* 5.STYLES (all styles) ============================================================= */ /* GLOBAL STYLES ============================================================= */ /* Making Horizontal Lists */ #site-info ul li { display: inline; } /* Utilities */ .clear { clear: both; } .left { float: left; } .right { float: right; } .center { margin-left: auto; margin-right: auto; text-align: center; } .padder { padding: ; } .rule { border-bottom: 1px solid #ccc; padding-bottom: 5px; } /* Images */ .post img.left { float: left; margin: 0 20px 10px 0; }/* text wrap around a left image */ .post img.right { float: right; margin: 0 0 10px 20px; }/* text wrap around a right image */ .post img.center { margin-left: auto; margin-right: auto; display: block; margin-bottom: 20px; } img.frame { padding: 3px; border: 1px solid #d2d2d2; background-color: #fff; } /* HEADINGS ============================================================= */ /* FAQ */ ul#faq h3 { cursor: pointer; } /* Pages Headings */ .page h2 { margin-bottom: 12px; } #services h3, #services h3+p, #process h3, #process h3+p, #process h3+p+ul { margin-left: 20px; } /* Services Lists Headings */ h4#consultancy { background: url(images/icon-consultancy.png) no-repeat; padding: 10px 0 10px 55px; } h4#management { background: url(images/icon-management.png) no-repeat; padding: 10px 0 10px 55px; } h4#ia { background: url(images/icon-ia.png) no-repeat; padding: 10px 0 10px 55px; } h4#artdirection { background: url(images/icon-artdirection.png) no-repeat; padding: 10px 0 10px 55px; } h4#graphicdesign { background: url(images/icon-graphicdesign.png) no-repeat; padding: 10px 0 10px 55px; } h4#webdesign { background: url(images/icon-webdesign.png) no-repeat; padding: 10px 0 10px 55px; } /* Footer Headings */ #footer h2 { margin-bottom: 15px; } /* Blog Post */ .post h2 { text-transform: ; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-top: 20px; } .post h2 a { color: #444; } .post h3 { font-weight: bold; margin-bottom: 10px; border-top: 1px dashed #aaa; padding-top: 10px; margin-top: 40px;} .post h4 { font-size: 1.6em; } .post h5 { font-size: 1.5em; color: #99cc00; } /* Studio Lists Headings */ h2.studio-list { } .post h2, .page h2 { } .post h3, .page h3 { } .post h4, .page h4 { } .post h5, .page h5 { } .post h6, .page h6 { } /* LINKS ============================================================= */ a { text-decoration: none; } .widget.categories ul li.current-cat a { color: 991177 !important; } #footer-block #site-info a { color: #bbb; } #footer-block #site-info a:hover { text-decoration: underline; } #footer-block a { color: #666; } #wrapper a:hover, #footer a:hover { } /* LISTS ============================================================= */ /* Blog Posts */ .post ul { list-style-image: url(images/bullet-arrow.png); padding: 0px 0 0px 15px; margin-bottom: 1em; margin-left: 30px; margin-top: 1em; } .post ol { list-style-type: decimal; padding: 0px 0 0px 15px; margin-bottom: 1em; margin-left: 30px; margin-top: 1em; } /* Stay Tuned List (Footer) */ ul#staytuned { margin-left: 10px; } ul#staytuned li { margin-bottom: 20px; } ul#staytuned li#twitter a { background: url(images/icon-twitter.png) no-repeat; padding: 5px 0 5px 35px; } ul#staytuned li#rss a { background: url(images/icon-rss.png) no-repeat; padding: 5px 0 5px 35px; } ul#staytuned li#emailupdates a { background: url(images/icon-emailupdates.png) no-repeat; padding: 0 0 0 35px; } ul#staytuned li#newsletter a { background: url(images/icon-newsletter.png) no-repeat; padding: 5px 0 5px 35px; } ul#staytuned li#mailinglist a { background: url(images/icon-emailupdates.png) no-repeat; padding: 0 0 0 35px; } /* Selected Posts (Footer) */ ul#selctedposts li { } ul#selctedposts li a { margin-bottom: 5px; border-bottom: 1px solid #ddd; padding: 10px 0; display: block; } ul#selctedposts li a:hover { background-color: #f5fafa;} /* FAQ */ ul#faq li { margin-bottom: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; } ul#faq p { margin-top: 20px; display: none; } /* Big Pages Lists */ ul.page-list { margin: 0 0 20px 30px; } ul.page-list li { background: url(images/bullet-checkmark.png) no-repeat 0 2px; margin-bottom: 5px; padding-left: 30px; } div#process-sum { float: right; background: transparent url(images/vr.png) left repeat-y; padding-left: 40px; margin-top: 40px; } #process #page-head ul li { background: none; padding: 0; } /* About List */ dl#about-list { width: 350px; margin: 0 auto; } dl#about-list dt { } dl#about-list dd { margin-bottom: 30px; border-bottom: 1px solid #bbb; padding-bottom: 10px; } /* Services Summary (Blackboard) */ div#services-sum { background: url(images/blackboard.jpg) no-repeat; width: 390px; height: 290px; float: right; } ul#services-sum-list { margin: 50px 0 0 120px; } ul#services-sum-list li { background: url(images/bullet-blackboard-checkmark.png) no-repeat 0 4px; padding: 8px 0 0px 22px; margin-bottom: -5px;} ul#services-sum-list li#artdirection-li { margin-top: 35px; } /* Services Listings (Consultancy, Management, É) */ ul.services-list { margin-left: 60px; } ul.services-list li { background: url(images/bullet-arrow.png) no-repeat 0 6px; padding: 0px 0 0px 15px; margin-bottom: 10px; } /* Small Steps (Specifications, Mockup, Coding, É) */ ul#smallsteps { position: relative; height: 600px; width: 930px;/* this is to center it, if you delete width is still ok */ margin: 20px auto 0; } ul#smallsteps li { /*position: relative; */ /* display: table; */ } /* Is display: table; necessary? It does not make Firefox work properly with position: relative! */ ul#smallsteps li#one { position: absolute; top: 110px; left: 0px; } ul#smallsteps li#two { position: absolute; top: 80px; left: 150px; } ul#smallsteps li#three { position: absolute; top: 110px; left: 300px; } ul#smallsteps li#four { position: absolute; top: 80px; left: 450px; } ul#smallsteps li#five { position: absolute; top: 110px; left: 600px; } ul#smallsteps li#six { position: absolute; top: 80px; left: 750px; } ul#smallsteps li a { background: url(images/smallsteps.png) no-repeat top left; width: 181px; height: 92px; display: table-cell; vertical-align: middle; text-align: center; } /* Small Steps Hover List */ div.smallsteps-details { background: url(images/graphic-triangle.png) no-repeat top center; padding-top: 13px; /* height: 45px; */ position: absolute; top: 110px; left: 10px; z-index: 2; display: none; } div.smallsteps-details ul { width: 140px; background-color: #444; color: #aaa; padding: 10px 10px 30px; margin-left -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* Not working */ list-style-type: disc; list-style-position: inherit; } div.smallsteps-details ul li { margin-bottom: 10px; margin-left: 20px; } div.smallsteps-details ul li a:hover { color: #fff; } /*Not affected */ /* FORMS ============================================================= */ #wrapper input[type=text], #wrapper textarea { } #commentform button#submit { } textarea { width: 400px; } form.jqtransform label.align { width: 130px; display: inline-block; } form.jqtransformdone div.rowElem { position: relative; overflow: hidden; } #wrapper label.error { color: #ff0000; font-size: 12px; font-family: Georgia, Serif; font-style: italic; margin: 0; margin-bottom: 10px; } form.jqtransformdone div.rowElem.budget, form.jqtransformdone div.rowElem.languages { overflow: visible; } form.jqtransform .rowElem.sendaction { text-align: center; margin-top: 70px; } form.jqtransformdone label.align { width: 130px; } .jqTransformInputWrapper, .jqTransformInputInner { width: 230px; } .jqTransformInputInner div input { width: 220px; } .budget .jqTransformInputWrapper, .budget .jqTransformInputInner { width: 60px; } .budget .jqTransformInputInner div input { width: 50px; } .deadline .jqTransformInputWrapper .deadline .jqTransformInputInner { width: 160px; } .budget .jqTransformSelectWrapper { margin-left: 10px; } #wrapper.jqTransformInputInner div { position: relative; overflow: hidden; margin:0px 8px; } #wrapper .jqTransformInputInner div input { position: absolute; } #wrapper a.jqTransformCheckbox { background: transparent url(../js/jqtransformplugin/img/checkbox.png) no-repeat center top; padding-right: 10px; } #wrapper a.jqTransformChecked { background-position: center bottom; } #wrapper .jqTransformRadio { background: transparent url(../js/jqtransformplugin/img/radio.png) no-repeat center top; } #action form.jqtransform { font-size: 1.5em; margin-top: 20px; } form.jqtransform fieldset { background: url(images/fieldset.jpg) no-repeat top left; padding: 20px 0 20px 30px; margin-bottom: 15px; } form.jqtransform h2 { margin: -13px 0 30px -20px; } form.jqtransform h3 { clear: both; } form.jqtransform em { font-size: 1.2em; margin-left: 5px; color: #991177; } .select-service { margin: 20px 0 0; } #actionform .action-option-block { border-bottom: 1px solid #99cc00; padding-bottom: 10px; margin-bottom: 20px; clear: both; } #wrapper .action-option-block h3 { margin-bottom: 10px; color: #99cc00; } .action-option-block.deadline h3 { margin-bottom: 0; } .action-option-block .languages label, .action-option-block .contact-choice p { font-weight: bold; color: #99cc00; } .action-option-block .budget label.space { padding-left: 5px; } #action #actionform p { font-size: 1em; clear: both; } #action #actionform.budget p { padding-top: 10px; } #action #actionform p em { color: #991177; margin: 0; } #contactform em { font-size: 1.6em; } #contactform label, #mc-embedded-subscribe-form label { font-size: 1.5em; margin-bottom: 5px; width: 90px; } #mc-embedded-subscribe-form div.rowElem.options label { width: auto; } #mc-embedded-subscribe-form div.rowElem.options div { clear: both; } #contactform .budget label { width: 200px; } #mc-embedded-subscribe-form h3 { font-size: 1.8em; margin: 20px 0; padding-top: 10px; border-top: 1px solid #ccc; } #mc-embedded-subscribe-form em { font-size: 1.5em; } /* Newsletter Facebox */ #mc_signup_form input { background: ; border: 1px solid #555; padding: 5px; } /* Newsletter */ #mc_embed_signup fieldset { background: none; margin: 0; padding: 0;} #mc_embed_signup fieldset#emailfield { } #mc_embed_signup fieldset#optionsfield {} #mc_embed_signup #submittnewsletter { margin-top: 20px; border-top: 1px dotted #aaa; padding-top: 10px; } #mc_embed_signup .input-group-label { width: auto; margin-top: 30px;font-weight: bold; } /* SEARCH FORM ============================================================= */ #search { background: url(images/search.png) no-repeat; height: 27px; margin-left: 20px; position: relative; } #search input#search-input { height: 20px; width: 225px; margin-left: 15px; padding-top: 6px; color: #ccc; font-size: 1.3em; } #search input#searchsubmit { cursor: pointer; width: 14px; height: 14px; text-indent: -9999px; background: url(images/searchbutton.png) no-repeat; font-family: Arial, sans-seirf; position: absolute; top: 6px; } /* SEARCH RESULTS PAGE ============================================================= */ ol#search-results li { border-bottom: 1px dotted #aaa; margin-bottom: 20px; padding-bottom: 5px; font-size: 0.7em; } /* PARAGRAPHS ============================================================= */ #main p { margin-bottom: 1em; } /* PAGES HEADS ============================================================= */ /* Page Head */ #page-head { margin-bottom: 45px; padding-bottom: 5px; position: relative; background: transparent url(images/hr.png) bottom repeat-x; overflow: hidden; } #about #page-head { overflow: visible; padding-bottom: 15px; } #services #page-head, #process #page-head { background: none; padding-bottom: 0px; margin-bottom: 0px; } #action #page-head { margin-bottom: 20px; } /* PAGES BLOCKS ============================================================= */ div.page-block { background: url(images/page-block.jpg) top center no-repeat; margin-bottom: 20px; padding-top: 20px; overflow: hidden; clear: both; } /* INTRO BLOCKS (Pages) ============================================================= */ #about #intro { width: 630px; } #services #intro { width: 530px; float: left; } #process #intro { width: 630px; float: left; } #action #intro { width: 550px; float: left; } /* HOME ============================================================= */ /* Teaser */ #teaser { background: transparent url(images/hr.png) bottom repeat-x; margin-bottom: 45px; padding-bottom: 25px; } #teaser p { color: #666; font-size: 3.4em; font-weight: bold; line-height: 0.8; margin: 0; letter-spacing: -0.05em; margin-left: 40px; } #teaser p+p { margin-left: 160px; font-size: 5em; } #teaser p+p+p { margin-left: 105px; font-size: 3.4em; } #teaser p+p+p+p { margin-left: 0; font-size: 3.4em; } #teaser p+p+p+p+p { margin-left: 140px; font-size: 4em; } #teaser p+p+p+p+p+p { margin-left: 90px; font-size: 4.5em; } #teaser p+p+p+p+p+p+p { margin-left: 300px; font-size: 3.4em; margin-top: 30px; } #teaser p em { color: #444; font-weight: bold; } /* SITEMAP ============================================================= */ #pages-col { float: left; margin-right: 30px; } #posts-col { float: left; border-left: 1px solid #ccc; padding-left: 40px; margin-right: 30px; } #portfolio-col { float: left; border-left: 1px solid #ccc; padding-left: 40px; } #pages-col h3, #posts-col h3, #portfolio-col h3 { margin-bottom: 5px; } .page #posts-col h4 { margin-bottom: 10px; } .page #posts-col ul li ul { margin-bottom: 20px; } .page #posts-col ul li ul li { margin-bottom: 5px; border-bottom: 1px dotted #aaa; padding-bottom: 5px; } #sitemap-search { clear: both; padding-top: 30px; background: url(images/graphic-arrow-down.png) no-repeat 60px bottom; padding-bottom: 100px; } #sitemap-search p { margin: 3px; } .page #pages-col ul li, #portfolio-col ul li { margin-bottom: 10px; } .page #pages-col ul, #portfolio-col ul { margin-bottom: 30px; } /* ABOUT ============================================================= */ #page-head img { position: absolute; top: -20px; right: 50px; } /* CONTACT ============================================================= */ .contact-col { float: left; margin-right: 30px; border-right: 1px solid #ccc; padding-right: 40px; height: 500px; } .contact-col#contact-col-form { border: none; margin-right: 0; padding: 0; } #contact h3, #contact h4 { margin-bottom: 10px; } #contact #main p { margin-bottom: 10px; } #contact h3+p { margin-top: -10px; } #contact #main p#vcard { margin-top: 20px; border-bottom: 1px solid #ccc; padding-bottom: 5px; } #contact #main p#vcard a { padding-left: 33px; background: url(images/vcard.png) no-repeat; } .thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding:10px; } /* SERVICES ============================================================= */ .services-block { width: 280px; float: left; margin-right: 35px; margin-top: 45px; } /* PROCESS ============================================================= */ /* Big Steps Table */ table#bigsteps { width: 950px; height: 390px; background: url(images/bigsteps.jpg) no-repeat; margin-top: 70px; } th.col-steps { width: 170px; } th.col-example { width: 260px; } table#bigsteps tr.row-head { height: 95px; } table#bigsteps tr.row-body { height: 80px; } table#bigsteps tr.row-foot { height: 55px; } th, td { text-align: center; vertical-align: middle; } table#bigsteps th[scope="col"] { padding-top: 25px; } table#bigsteps th[scope="row"] { text-align: left; height: 80px; } table#bigsteps th[scope="row"] strong { float: left; margin-right: 10px; } table#bigsteps th[scope="row"] small { margin-top: 20px; display: block; } table#bigsteps th[scope="row"] big { display: block; } #process form.jqtransform { font-size: 1em; margin-left: 160px; margin-top: 30px;} ul#phases { font-size: 1.5em; } ul#phases li { overflow: hidden; height: 30px; line-height: 30px; } ul#phases span { float: left; } #process form.jqtransform p { margin-bottom: 0; } #process form.jqtransform label { margin-top: 0; } /* PORTFOLIO ============================================================= */ /* Portfolio Navigation */ ul#portfolio-nav { background: url(images/hr.png) bottom repeat-x; padding-bottom: 2px; overflow: hidden; margin-bottom: 30px;} ul#portfolio-nav li { float: left; border-left: 1px solid #ddd; border-right: 1px solid #ddd; margin-left: 1px; height: 50px; } ul#portfolio-nav li a { padding: 0 30px; line-height: 50px; height: 50px; display: block; color: #666; } ul#portfolio-nav li a:hover, ul#portfolio-nav li.active a { background: url(images/portfolio-menu.png) repeat-x; color: #991177; } ul#portfolio-nav li#featured a span { background: url(images/icon-featured.png) no-repeat; padding: 5px 0 5px 35px; } ul#portfolio-nav li#identity a span { background: url(images/icon-identity.png) no-repeat; padding: 5px 0 8px 33px; } ul#portfolio-nav li#print a span { background: url(images/icon-print.png) no-repeat; padding: 5px 0 6px 35px; } ul#portfolio-nav li#web a span { background: url(images/icon-web.png) no-repeat; padding: 5px 0 5px 35px; } ul#portfolio-nav li#newsletters a span { background: url(images/icon-newsletters.png) no-repeat; padding: 5px 0 5px 38px; } ul#portfolio-nav li#wireframes a span { background: url(images/icon-wireframes.png) no-repeat; padding: 5px 0 5px 45px; } /* Portfolio Items */ .portfolio-item { margin-bottom: 25px; padding-bottom: 10px; background: transparent url(images/hr.png) bottom repeat-x; overflow: hidden; } .portfolio-item ul { margin -top: 20px; } #wrapper .portfolio-item p.item-meta { margin: 0; padding: 0; } #wrapper .portfolio-item p.item-meta.openproject { background: url(images/icon-openproject.png) no-repeat; padding-left: 30px; height: 22px; margin-top: 15px; padding-bottom: 5px; } #wrapper .portfolio-item p.item-meta.visitwebsite { background: url(images/icon-visitwebsite.png) no-repeat; padding-left: 30px; height: 22px; margin-top: 5px; } .portfolio-preview-block { background: transparent url(images/portfolio-item.jpg) no-repeat; width: 640px; height: 270px; float: left; } .portfolio-preview-block img { margin: 10px; } .portfolio-meta-block { float: right; width: 300px; } .portfolio-meta-block strong { color: #991177; } #wrapper .portfolio-meta-block p { margin: 0 0 5px; } #wrapper .portfolio-meta-block h3 { margin-bottom: 5px; padding-bottom: 20px; } p.item-meta-descr, p.item-meta, .portfolio-meta-block h3 { border-bottom: 1px dotted #aaa; padding-bottom: 5px; } /* Featured Navigation */ #featured-nav { margin-bottom: 45px; padding-bottom: 15px; background: transparent url(images/hr.png) bottom repeat-x; margin-top: 10px; overflow: hidden; } #featured-nav-block { overflow: hidden; width: 155px; margin: 0 auto; position: relative; } #featured-nav span { float: left; } #featured-nav span#featured-prev a { text-indent: -9999px; width: 40px; height: 30px; display: block; background: url(images/featured-prev.png) no-repeat; } #featured-nav span#featured-slide { text-indent: -9999px; width: 55px; height: 30px; background: url(images/featured-slide.png) no-repeat; margin: 0 10px; } #featured-nav span#featured-next a { text-indent: -9999px; width: 40px; height: 30px; display: block; background: url(images/featured-next.png) no-repeat; } #references { float: left; width: 450px; } #portfolio-forword { float: right; width: 450px; } .screenshots img { display: none; } /* ACTION ============================================================= */ #worksheet { width: 307px; height: 109px; background: url(images/worksheet.jpg) no-repeat; float: right; position: relative; margin-top: 40px;} #worksheet p { color: #fff; position: absolute; top: 7px; left: 40px; } #worksheet a { position: absolute; top: 65px; left: 50px; background: url(images/icon-worksheet.png) no-repeat left; padding: 10px 0 10px 35px; } ul#faq { margin-top: 20px; border-top: 1px solid #99cc00; padding-top: 10px; } /* BLOG CATEGORY PAGE ============================================================= */ #content.blog-cat ul li { margin-bottom: 20px; border-bottom: 1px dotted #aaa; padding-bottom: 5px; overflow: hidden; } #content.blog-cat h3 { font-size: 2.0em; } #content.blog-cat h2 em { color: #991177; } #content.blog-cat span.post-date { color: #444; font-weight: bold; } #content.blog-cat span.post-comments { float: right; } /* SITEINFO PAGE ============================================================= */ ul#info-page li { margin-bottom: 20px; border-bottom: 1px dotted #aaa; padding-bottom: 20px; overflow: hidden; } ul#info-page p { margin: 0; } ul#info-page img { float: left; margin-bottom: 10px; } div.infoblock { float: right; width: 550px; min-height: 50px; border-left: 1px solid #aaa; padding-left: 15px;} /* POSTS ARCHIVES PAGE ============================================================= */ span.month-archive-link { display: none; } .year-list .current, .month-list .current { color:#991177; background: none; } /* BLOG ============================================================= */ .post-bg-top { background: url(images/post-bg-top.png) no-repeat top center; padding-top: 30px; } .post-bg-bottom { background: url(images/post-bg-bottom.png) no-repeat bottom center; padding-bottom: 40px; } .post .padder { padding: 0 30px 10px; } .post-body { background: url(images/post-bg.png) repeat-y; } .entry { } .wp-post-image { padding: 3px; border: 1px solid #aaa; float: left; margin-right: 15px; } p.more a { color: #fff; background-color: #0088ff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 3px 5px; } #wrapper p.more a:hover { color: #fff; background-color: #991177; } pre { background: #eee; padding: 10px; border: 1px solid #ccc; overflow: hidden; margin: 0 0 15px 0; width: 545px; font-family: Courier, Monospace; font-size: 1.6em; } /* Twitter Widget */ #twitter-wdg { background: transparent url(images/twitter-photo.png) no-repeat bottom 20px; padding-bottom: 75px; } #tweet { padding-bottom: 20px; background: url(images/arrow-down.png) no-repeat 50px 58px; } #tweet p { padding: 10px;background-color: #fff; } .post-meta { overflow: hidden; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; } .post-meta .post-date { font-size: 1.5em; font-weight: bold; width: 120px; height: 30px; display: block; float: left; background: url(images/post-meta-date.jpg) no-repeat; text-indent: 10px; line-height: 30px; } .post2 .post-meta .post-date { font-size: 1.3em; font-weight: bold; width: 80px; height: 30px; display: block; float: left; background: none; background-color: #444; text-indent: 0px; line-height: 30px; text-align: center; color: #ccc; margin-left: 10px;} .post2 .post-meta .post-category { font-size: 1.3em; padding-top: 0px; width: 80px; height: 30px; display: block; float: left; background: none; background-color: #ccc; text-indent: 0px; line-height: 30px; text-align: center; color: #ccc; margin-left: 5px; } .post2 .post-meta .post-category a { color: #fff; } .post-meta .post-category { font-size: 1.5em; padding: 0 20px 0 10px;display: block; float: left; line-height: 30px; height: 30px; background: url(images/post-meta-comments.jpg) no-repeat right #eee; } .post-meta .post-comments { font-size: 1.5em; padding-top: 10px; display: block; float: right; } /* Blog Sidebar*/ .widget { margin-bottom: 30px; } .widget h3 { font-weight: bold; font-size: 2.2em; color: #444; border-bottom: 1px solid #aaa; margin-bottom: 10px; } /* .widget.categories ul li { margin-bottom: 5px; } .widget.categories ul li a { display: block; background: url(images/category.jpg) no-repeat; height: 25px; padding-left: 25px; line-height: 24px; color: #666; } */ .widget.categories ul li { margin-bottom: 5px; font-size: 1.2em; border-bottom: 1px dashed #aaa;} .widget.categories ul li a { display: block; height: 25px; color: #666; } .widget.categories ul li.current-cat a { color: #991177; }/*current category */ .widget.archives { background: url(images/archives.jpg) no-repeat; width: 270px; height: 60px; } .widget.archives h3 { font-size: 1.7em; border: none; padding: 20px 0 0 70px; } .widget.archives h3 a { color: #444; } /* Comments*/ #comments { background-color: #f5fafa; width: 580px; margin: 0 auto; border: 1px solid #ccc; } #comments .padder { padding: 20px; } #comments h2 { margin-bottom: 20px; } #comments h2+p { margin-bottom: 30px; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .comment-author-block { float: left; width: 100px; overflow: hidden; } img.avatar { margin-bottom: 5px; } #comments .comment-author-block p { margin-bottom: 0; color: #991177; font-size: 0.8em; } #comments .comment-author-block p+p { margin-bottom: 0; color: #666; } .comment-entry { float: right; position: relative; width: 380px; min-height: 50px; background-color: #fff; border: 1px solid #ccc; padding: 10px 15px 10px; } .comment-entry-bubble { width: 30px; height: 30px; position: absolute; top: 30px; left: -30px; background: url(images/graphic-comments-bubble.png) no-repeat top; } li.comment, .ping-item { margin-bottom: 20px; overflow: hidden; } #comments textarea { background-color: #fff; border: 1px solid #ccc; } #comments p.reply { font-size: 0.8em; } #commentform label { font-size: 1.5em; margin-left: 10px; } #commentform label span { color: #aaa; } /* Nested Comments */ ul.children li.comment { background-color: #ddd; margin-top: 10px; width: 380px; padding: 10px; float: right; margin-right: 15px; position: relative; margin-bottom: 0px; } ul.children .comment-entry-bubble { display: none; } ul.children .comment-author-block { float: none; } ul.children .comment-entry { margin-left: 0px; padding: 0px; background-color: transparent; border: 1px solid #dedddd; clear: both; border: none; padding-bottom: 70px; } ul.children .comment-author-block { width: 150px; position: absolute; right: 20px; bottom: 10px; } ul.children .comment-author-block p {float: right; margin-right: 10px; } ul.children img.avatar { float: right; margin-bottom: 10px; width: 50px; height: 50px; } /* THE HEADER ============================================================= */ /* Logo & Tagline */ #logo { width: ; height: ; } h1, h1+p { text-indent: -9999px; display: none; } /* Main Navigation */ ul#main-nav { } ul#main-nav li { position: absolute; } ul#main-nav li#home-menu { top: 90px; left: 275px; } ul#main-nav li#contact-menu { top: 90px; left: 343px; } ul#main-nav li#about-menu { top: 124px; left: 290px; } ul#main-nav li#services-menu { top: 124px; left: 357px; } ul#main-nav li#process-menu { top: 124px; left: 444px; } ul#main-nav li#portfolio-menu { top: 124px; left: 527px; } ul#main-nav li#blog-menu { top: 70px; left: 705px; } ul#main-nav li#action-menu a { position: absolute; background: url(images/action.png) top no-repeat; width: 144px; height: 20px; text-indent: -9999px; top: 173px; left: 549px; } ul#main-nav li#action-menu a:hover, #wrapper ul#main-nav li#action-menu.active a { background-position: bottom; } ul#main-nav li#home-menu, ul#main-nav li#contact-menu { font-size: 2.0em; text-transform: uppercase; } ul#main-nav li#about-menu a, ul#main-nav li#services-menu a, ul#main-nav li#process-menu a, ul#main-nav li#portfolio-menu a, ul#main-nav li#blog-menu a { font-size: 1.5em; padding: 5px 12px; } /* THE FOOTER ============================================================= */ /* Design Quotes */ #footer blockquote { } #footer blockquote p { } #footer cite { margin-top: 10px; display: block; font-size: 1.5em; color: #aaa; font-weight: bold; float: right; } #footer cite:before { content: "- "; } #change-quote a { float: left; text-indent: -9999px; background: url(images/another-quote.jpg) no-repeat top; width: 84px; height: 24px; margin-top: 40px; } #change-quote a:hover { background-position: bottom; } #site-info p { float: left; } #site-info ul { float: right; }