/* Theme Name: SOFA bizMate Theme URI: http://rider.sofarider.com/ Description: Business WordPress Theme Version: 1.0rc Author: Dameer Author URI: http://rider.sofarider.com/ Tags: CMS, Blog & Portfolio Hybrid, Business */ /* -------------------------------------------------------------- MEDIA STYLES Created: 20.08.2009. Modified: 26.08.2009. -------------------------------------------------------------- */ /* =TOC -------------------------------------------------------------- 01. Style reset 02. Defaults 03. Global layout 04. Navigation 04.01 Global navigation 04.02 Footer navigation 04.03 Secondari navigation 05. Branding 05.01 Footer logo 05.02 Footer copyright 06. Site search 07. Promotion 07.01 promotion image 07.02 promotion browser 07.03 Coline 08. Content 08.01 Images 08.02 Main Content 08.03 Comments 08.04 Comment & Contact form 08.05 Social bookmarking 08.06 News page 08.07 Pagination 08.08 Portfolio 08.10 Widgets 08.11 Newslist 08.13 Twitter 09. Sidebar 10. Utility styles -------------------------------------------------------------- */ /* =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 Trebuchet, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; color: #636363; } 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; } /* =02. Defaults -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, label, legend, dt, th { font-family: Trebuchet, "Trebuchet MS", Tahoma, Arial, sans-serif; letter-spacing: -.05em; } input, textarea, button { font-family: Trebuchet, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; } input, textarea { border: 1px solid #d7d7d7; } input { margin: 0; padding: 3px 0; } textarea { overflow: auto; } a img { border: none; } a:link, a:visited, a:active { color: #ca0018; text-decoration: none; } a:hover, a:focus { color: #a0a0a0; } pre { font-family: "Courier New", Courier, monospace; font-size: 12px; margin: 10px 0; padding: 0 10px; background: #f0f0f0; line-height: 15px; overflow: auto; overflow-Y: hidden; } code { font-size:1.2em; color: #008099; } /* =03. Global layout -------------------------------------------------------------- */ html, body, #wrap { height: 100%; } body > #wrap { height: auto; min-height: 100%; } body#home { } #content-wrap { width: 100%; margin: 0 auto; padding-top: 30px; padding-bottom: 141px; background: #fff url(images/content_bgtile.jpg) repeat-x 0 0; } #header { width: 960px; margin: 0 auto; } #home #header { overflow: hidden; } #global-navi { height: 90px; overflow: hidden; float: right; display: inline; } #branding { width: 421px; height: 80px; overflow: hidden; float: left; display: inline; margin-top: 8px; } #promoted, #coline-wrap { width: 100%; clear: both; overflow: hidden; background: #fff url(header_images/promoted_bgtile.jpg) repeat 0 0; } #main-content { width: 620px; float: right; display: inline; } #sidebar { width: 300px; float: left; display: inline; /*padding-bottom: 30px;*/ } #footer { background: #f2f2f2; position: relative; margin-top: -141px; height: 141px; clear: both; overflow: hidden; } #searchform { width: 290px; position: absolute; right: 0; top: 30px; } /* =04. Navigation -------------------------------------------------------------- */ .navigation li { float: left; display: inline; } .navigation li a { display: block; } .navigation li a:link, .navigation li a:visited, .navigation li a:active { color: #363636; } .navigation li a:hover, .navigation li a:focus { color: #ca0018; } .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: #ca0018; } /* =04.01 Global navigation -------------------------------------------------------------- */ #global-navi li { /*width: 123px;*/ text-align: center; } #global-navi li a { font-weight: bold; font-size: 1.5em; padding: 32px 15px; line-height: 1; } #global-navi li a span { display: block; color: #888; font-weight: normal; font-size: 0.625em; text-transform: uppercase; padding-top: 5px; } #global-navi li.current_page_item a, #global-navi li.current-cat a, #global-navi li a:hover, #global-navi li a:focus { background: #f2f2f2; } /* =04.02 Footer navigation -------------------------------------------------------------- */ #footer .navigation { } #footer .navigation li { margin: 15px 10px 0 0; font-size: 1.4em; line-height: 2.15; display: inline; } #footer .navigation li a { padding: 15px 15px 15px 0; } /* =04.03 Secondari navigation -------------------------------------------------------------- */ #sidebar .sec-navigation { } #sidebar .sec-navigation li { font-size: 1.6em; background: transparent url(images/secnavibg.gif) no-repeat 0 .8em; } .sec-navigation li a { display: block; padding-left: 15px; color: #ca0018;} .sec-navigation .current-cat a:link, .sec-navigation .current-cat a:visited, .sec-navigation .current-cat a:hover, .sec-navigation .current-cat a:active, .sec-navigation .current_page_item a:link, .sec-navigation .current_page_item a:visited, .sec-navigation .current_page_item a:hover, .sec-navigation .current_page_item a:active { background-color: #ca0018; color: #ffffff; } /* =05. Branding -------------------------------------------------------------- */ #branding a { width: 421px; height: 80px; display: block; overflow: hidden; } /* =05.01 Footer logo -------------------------------------------------------------- */ .footer-logo { position: absolute; right: 0; bottom: 13px; } /* =05.02 Footer copyright -------------------------------------------------------------- */ .copyright { position: absolute; left: 0; bottom: 15px; } /* =06. Site search -------------------------------------------------------------- */ #searchform label { display: none; } #searchform input, #searchform button { padding: 3px 0; margin: 0; } #s { width: 208px; height: 17px; font-size: 1.2em; line-height: 1.4166; display: inline; float: left; } #searchsubmit { width: 70px; height: 24px; font-size: 1.2em; display: inline; float: right; border: 1px solid #a6deE7; background: #d6ecf9 url(images/searchbtn.png) no-repeat 0 0; text-transform: uppercase; line-height: 19px; } #searchsubmit span { display: block; } /* =07 Promotion -------------------------------------------------------------- */ #promoted .label { display: none; } #promoted .promotion { width: 960px; padding-top: 15px; background-color: transparent !important; float: left; display: inline; } .promotion h1 { margin: 0 0 15px 30px; font-size: 2.71em; line-height: 1; color: #002157; } .promotion h1 a:link, .promotion h1 a:visited, .promotion h1 a:active, .promotion a:link, .promotion a:visited, .promotion a:active { color: #FFFFFF; text-decoration: none; } .promotion h1 a:hover, .promotion h1 a:focus, .promotion a:hover, .promotion a:focus { color: #F1F1F1; } .promotion-text p { font-size: 1.45em; color: #e1e1e1; } /* =07.01 Promotion image -------------------------------------------------------------- */ .promotion-image { padding-right: 5px; padding-bottom: 5px; float: left; display: inline; background-color: #FFFFFF; overflow: hidden; } .promotion-image img { margin: 5px 0 0 5px; overflow: hidden; } .promotion-text { width: 600px; overflow: hidden; float: left; display: inline; padding-top: 20px; } .promotion-text p { padding-left: 30px; } /*=07.02 Promo browser -------------------------------------------------------------- */ #promoted .promo-browser { width: 28px; height: 28px; float: right; display: inline; position: relative; background: transparent url(images/next.png) no-repeat 0 0; } #promoted .promo-browser a { width: 28px; height: 28px; display: block; } * html #promoted .promo-browser { background: transparent url(images/next_8bit.png) no-repeat 0 0; } /* =07.03 Coline -------------------------------------------------------------- */ #coline { width: 960px; margin: 0 auto; overflow: hidden; background: transparent url(header_images/pages_bg.png) no-repeat 0 0; padding-top: 20px; padding-bottom: 20px; } #coline h2 { font-size: 1.8em; color: #ffffff; background: transparent url(images/1x1px_sifr_fix.png) no-repeat 0 0;} /* zoom: 1; */ /* =08. Content -------------------------------------------------------------- */ #content { overflow: hidden; margin-bottom: 25px; width: 960px; margin: 0 auto; } #content p, #content li, #content dd, #content th, #content td { font-size: 1.25em; line-height: 2; } #content li li { font-size: 100%; } /* =08.01 Images -------------------------------------------------------------- */ #content img { margin: 5px 10px 0 0; border: 5px solid #e7e7e7; float: left; } .size-thumbnail { } .size-medium { } #content .alignleft, #content .wp-caption.alignleft { float: left; margin: 5px 10px 0 0; } #content .alignright, #content .wp-caption.alignright { float: right; margin: 5px 0 0 10px; } #content .aligncenter, #content .wp-caption.aligncenter { float: none; margin: 5px auto 0 auto; display: block; clear: both; } /*.wp-caption { float: left; margin: 5px 10px 0 0; text-align: center; }*/ #content .wp-caption img { float: none; margin: 0; } /* =08.02 Main Content -------------------------------------------------------------- */ #main-content { padding: 0 0 30px 0; } #main-content h1 { font-size: 2.2em; line-height: 1.36; display: block; color: #333333; } #page #main-content h1, #contact #main-content h1, #news #main-content h1 { margin-bottom: 12px; } #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6 { font-size: 1.6em; margin-bottom: .7em; line-height: 1.36; display: block; color: #333333; } #main-content p, #main-content ul, #main-content ol, #main-content dl, #main-content table { margin-bottom: .9em; } #main-content ul, #main-content ol { margin-left: 15px; } #main-content ol ul, #main-content ul ul, #main-content ul ol, #main-content ol ol { margin-bottom: 0; margin-left: 0; } #main-content li { width: auto; padding-left: 15px; display: block; background: transparent url(images/secnavibg.gif) no-repeat 0 .7em; } #main-content blockquote { width: 290px; margin-left: 15px; float: right; display: inline; background: transparent url(images/blockquotebg.gif) no-repeat 0 0; } #main-content blockquote p { margin: 32px 0 0 0; font-size: 1.6em; line-height: 1.88; font-style: italic; } #main-content p object, #main-content p embed { width: 280px; height: 210px; float: left; } #main-content #article p object, #main-content #article p embed { width: 340px; height: 240px; float: left; margin-right: 10px; } #main-content #article a.configurator { float: left; padding: 0px 5px; background-color: #ca0018; color: #ffffff; } #main-content #article a.preturi { float: right; padding: 0px 5px; margin-left: 5px; background-color: #ca0018; color: #ffffff; } #main-content p object { margin: 5px 10px 0 0; border: 5px solid #e7e7e7; } #main-content #article p object { margin: 5px 0 0 0; } .postdata { font-size: 1.2em; margin: 5px 0 3px 0; overflow: hidden; } .edit-post { text-transform: uppercase; } #article { padding-top: 4px; overflow: hidden; } /* =08.03 Comments -------------------------------------------------------------- */ #comments { clear: both; } #comments h2 { font-size: 2.2em; line-height: 1.36; margin-bottom: .3em; } #comments .comment-list { width: 620px; overflow: hidden; margin: 0 0 24px 0; } #comments li { width: 600px; margin: 0 0 10px 0; padding: 5px 10px; float: left; display: inline; background-image: none; background-color: #f2f2f2; } #comments .comments-intro { margin-bottom: 1.5em; font-style: italic; } .comment-meta { display: block; } .postedby { font-size: 1.3333em; } .comment-text { display: block; line-height: 1.83; font-size: 0.795em; } .comment-meta, .comment-text { padding-left: 100px; } .gravatar { width: 90px; height: 90px; float: left; margin: 0 10px 10px 0; } .gravatar img { width: 80px; height: 80px; float: none; } /* =08.04 Comment & Contact form -------------------------------------------------------------- */ #commentform { border-top: 1px solid #e7e7e7; padding-top: 13px; } #contactform { padding-top: 13px; } #commentform p, #contactform p { width: 100%; margin-bottom: 8px; clear: both; float: left; display: inline; } #commentform label, #contactform label { display: block; line-height: 2; } #commentform input, #contactform input { width: 248px; height: 17px; font-size: 100%; line-height: 1.4166; display: inline; float: left; } #commentform textarea, #contactform textarea { width: 616px; font-size: 100%; } #commentform #submit, #contactform #submit { width: 70px; height: 24px; font-size: 100%; display: inline; float: right; border: 1px solid #a6deE7; background: #d6ecf9 url(images/searchbtn.png) no-repeat 0 0; text-transform: uppercase; } #commentform #submit span, #contactform #submit span { display: block; line-height: 20px; } #commentform #comment_post_ID { visibility: hidden; display: none; } #contactform input#spam { width: 30px; } /* =08.05 Social bookmarking -------------------------------------------------------------- */ .socialbookmarking { width: 620px; margin: 5px 0 32px 0; padding-bottom: 10px; float: left; display: inline; clear: both; background: #f2f2f2; overflow: hidden; } #main-content .socialbookmarking h3 { margin: 6px 0 10px 10px; font-size: 1.2em; font-weight: normal; font-style: italic; text-transform: uppercase; } #main-content .socialbookmarking ul { margin: 0 0 0 10px; } #main-content .socialbookmarking li { width: 22px; height: 28px; margin: 0 10px 0 0; padding: 0; float: left; display: inline; background: none; } /* zoom:1 */ .socialbookmarking li a { width: 25px; height: 28px; overflow: hidden; display: block; } #content .socialbookmarking li a img { width: 22px; height: 22px; overflow: hidden; display: block; border: 1px solid #ededed; } /* =08.06 News page -------------------------------------------------------------- */ #news #main-content ul { margin: 0; padding: 0; border-bottom: 1px solid #e7e7e7; } #news #main-content li { margin: 0 0 22px 0; padding: 0; background: none; } #news #main-content li h2 { margin-bottom: 8px; font-size: 1.35em; font-weight: normal; line-height: 1.88; letter-spacing: 0; } #news #main-content li h2 a:link, #news #main-content li h2 a:visited, #news #main-content li h2 a:active { color: #353535; } #news #main-content li h2 a:hover, #news #main-content li h2 a:focus { color: #a0a0a0; } #news #main-content li p { font-size: 1em; line-height: 2; } #news #main-content li .more_link { font-size: .9167em; line-height: 2.1824; } /* =08.07 Pagination -------------------------------------------------------------- */ #pagination { padding: 0 2px; float: right; display: inline; clear: both; background: #ededed; } #news #main-content #pagination .pages li { margin-bottom: 0; overflow: hidden; } #pagination .pages { float: left; display: inline; font-size: .85em; line-height: 1; text-transform: uppercase; } #pagination li, #pagination li.frot { display: inline; text-align: center; } #news #main-content #pagination li.frot { font-size: 1.45em; padding: 3px 20px; margin: 0; } #news #main-content #pagination .pages li a { padding: 4px 9px; } #pagination .first-page, #pagination .previous-page { } #pagination .next-page, #pagination .last-page { } #pagination .current-page span { padding: 4px 9px; color: #fff; background: #006699; overflow: hidden; } /* =08.08 Portfolio -------------------------------------------------------------- */ .portfolio-item { width: 100%; margin-bottom: 25px; float: left; display: inline; clear: both; overflow: hidden; } .portfolio-desc { margin: 5px 0; float: left; display: inline; overflow: hidden; } #main-content .portfolio-desc h3 { margin: 2px 0; font-size: 1.1em; font-weight: normal; text-transform: uppercase; letter-spacing: normal; } #main-content .portfolio-desc h2 { font-weight: normal; font-size: 1.75em; letter-spacing: 0; } #main-content .portfolio-desc h2 a:link, #main-content .portfolio-desc h2 a:visited, #main-content .portfolio-desc h2 a:active { color: #353535; } #main-content .portfolio-desc h2 a:hover, #main-content .portfolio-desc h2 a:focus { color: #a0a0a0; } /*.portfolio-item-image { width: 290px; float: right; display: inline; }*/ #main-content .portfolio-item-image img { margin: 0; } /* =08.10 Widgets -------------------------------------------------------------- */ .widget { width: 300px; margin-left: 0; margin-right: 20px; float: left; display: inline; padding-bottom: 30px; } .widget p { padding-top: 5px; } .widget h2 { padding-bottom: 10px; font-size: 2.2em; line-height: 1.36; letter-spacing: -.02em; display: block; color: #333333; border-bottom: 1px solid #ededed; } .widget h4 { padding-bottom: 5px; margin-bottom: 5px; font-size: 1.5em; line-height: 1.36; letter-spacing: -.02em; display: block; color: #333333; } .widget li { border-bottom: 1px solid #ededed; width: 100%; } /* =08.11 Newslist -------------------------------------------------------------- */ .widget .newslist { padding-top: 10px; } .newslist h3 { font-size: 1.25em; font-weight: normal; line-height: 1.5; letter-spacing: normal; } .newslist .date, .postdata .date { background: transparent url(images/date_bg.png) no-repeat 0 0; color: #393939; font-size: 0.83em; height: 20px; letter-spacing: 0.2em; padding-left: 5px; width: 100px; } .newslist .date.inline, .postdata .date.inline { float: left; display: inline; } .postdata .date.inline { padding-top: 2px; } .postdata .date.nobg { margin-top: 2px; } .newslist .date.nobg, .postdata .date.nobg { background: none; float: left; display: inline; width: 500px; padding: 0; padding-left: 10px; } .newslist .date.cleared { background: none; display: block; clear: both; padding: 0; } .newslist li { padding: 0 0 2px 0; margin-bottom: 4px; } /* =08.12 Contacts -------------------------------------------------------------- */ .contacts { } .contacts li { background-color: transparent; background-repeat: no-repeat; background-position: 0 0; padding: 10px 0; } .contacts li div, .contacts .linkedin a, .contacts .skype a { padding-left: 45px; } .contacts .tel { background-position: 0 10px; background-image: url(images/tel.png); border-bottom: none; } #content .contacts .tel { line-height: 2; padding-bottom: 0; } /* =08.13 Twitter -------------------------------------------------------------- */ .twitter { } .twitter li { padding: 2px 0 4px 0; } .twitter .follow { padding-bottom: 5px; padding-top: 4px; background-color: transparent; background-repeat: no-repeat; background-position: 0 center; background-image: url(images/twitbird.png); } .twitter .follow a { padding-left: 45px; font-size: 1.3em; } /* =10. Utility styles -------------------------------------------------------------- */ /* CLEAR FIX*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hides from IE-mac */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ .breakrule { width: 99%; height: 1px; clear: both; display: block; } .site-width { width: 960px; margin: 0 auto; position: relative; } #footer .site-width { height: 141px; } .more_link { text-transform: uppercase; } #slider { height: 285px; overflow: hidden; width: 960px; } #noslider { height: 285px; overflow: hidden; width: 960px; } #promoted .panel-content { overflow: hidden; width: 960px; margin: 0 auto; background: transparent url(header_images/jQuery_bg_2.jpg) no-repeat 0 0; } #promoted .panel-content h1 { margin: 0 0 15px 30px; font-size: 2.71em; line-height: 1; color: #002157; } /* Advertisement */ .widget ul.ads { margin-top: 0; margin-bottom: 0; } .widget .ads { float: left; margin: 0; display: inline; } #content .widget .ads img { width: 125px; height: 125px; margin: 10px 0 0 0; } .widget .ads a { float: left; display: inline; } .widget ul.ads li { width: 135px; height: 145px; float: left; padding-left: 10px; background-image: none; display: inline; border-bottom: none; } /* Latest Portfolio */ .widget ul.worklatest { margin-top: 0; margin-bottom: 0; } .widget .worklatest { float: left; padding: 10px 0 0 0; margin: 0; display: inline; } #content .widget .worklatest img { margin: 0; border: 1px solid #e7e7e7; } .widget .worklatest a { float: left; display: inline; } .widget ul.worklatest li { float: left; margin: 0 16px 16px 0; padding-left: 0; background-image: none; display: inline; border: none; } .widget ul.worklatest li.next { margin: 0 0 10px 0; } /* Flickr */ .widget.flick { overflow: hidden; } .widget.flick .imgwrap { padding-top: 10px; overflow: hidden; } #content .widget img.flickr { margin: 0 0 5px 10px; } /* Tag Cloud */ .widget.tagcloud { } #content .widget.tagcloud p { line-height: 1.5; padding-top: 10px; } /* Quick Contact */ .widget.qc { } /* social-media */ #content .widget.social-media img { border: none; margin-right: 17px; width: 28px; height: 28px; } .widget.social-media ul { margin: 15px 0 18px 0; } .widget.social-media ul li { width: 100%; margin-bottom: 8px; padding: 0 0 7px 0; overflow: hidden; border-bottom: 1px solid #EDEDED; background-image: none; } .widget.social-media li a { float: left; display: inline; } .widget.social-media li strong { font-size: 1.4em; float: left; display: inline; line-height: 1; padding: 4px 19px 0 0; font-weight: normal; } .widget.social-media li span { float: left; display: inline; width: 255px; font-size: 0.85em; text-transform: uppercase; } /* breadcrumbz */ #breadpitwrap { width: 100%; overflow: hidden; clear: both; padding: 10px 0; background-color: #ececec; } #breadpitcrumbz { width: 960px; overflow: hidden; margin: 0 auto; } #breadpitcrumbz ul { font-size: 11px; padding-left: 0; list-style-position: outside; } #breadpitcrumbz ul li { list-style: none; list-style-type: none; float: left; line-height: 1.1; padding-right: 5px; padding-top: 2px; }