/********************************************************************************************** Main Sections in CSS: 1. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 2. LAYOUT Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site 3. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 4. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /* import core styles */ @import url(base.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#000; font-family: Arial, Helvetica, sans-serif; background:#fff url(../images/body-bg.jpg) 0 0 repeat-x;} h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; } .ui-tabs-hide { display:none; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:805px; margin:0 auto; } /*---- Header ----*/ div#header { padding:18px 0 17px 20px;} /*---- Main Navigation ----*/ div#main-navigation { width:470px; float:right; margin-bottom:25px; } /*---- Content ----*/ div#content {background:url(../images/content/main-bg.jpg) 0 0 repeat-y; } /*---- Main ----*/ div.main { float:left; width:590px; background:#FFF; } /*---- Sidebar ----*/ div.sidebar { float:right; width:214px; } /*---- Footer ----*/ div#footer { padding:5px 0px 10px;} /*------------------------------------------ // 3. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Header - Logo ----*/ div#header div.logo{width:164px; height:96px; float:left;} div#header div.logo h1 a {width:164px; height:96px; display:block; } /*---- Main Navigation ----*/ div#main-navigation ul li{ float:left; font-size:125%;} div#main-navigation ul li a { float:left; text-decoration:none; color:#bfbbba; } div#main-navigation ul li.divider{background:#fff url(../images/header/pipe.jpg) 0 2px repeat-x; width:3px; height:13px; margin:0 18px;} div#main-navigation ul li a:hover, div#main-navigation ul li a.active{ color:#873259;} /*---- Header - contact ----*/ div#header div#contact{ float:right;} div#header div#contact p{ font-size:210%; color:#58595b; font-family:Georgia, "Times New Roman", Times, serif;} div#header div#contact p a{color:#58595b; font-size:60%;} div#header div#strapline { float:left; top-margin:-10px;} /*---- main----*/ div.main div.box1{ width:545px; } /*---- banner----*/ div#banner{ background:url(../images/content/banner.jpg) 0 0 no-repeat; height:280px; margin-bottom:10px; padding:20px 20px; } div#banner p{ font-size:290%; color:#fff; line-height:40px; padding:80px 35px 0px;} /*---- featured----*/ div#featured { clear:both; margin-bottom:10px; position:relative; padding-left:23px;} div#featured h2{ font-size:170%; color:#5c5c5e; font-family:Georgia, "Times New Roman", Times, serif; margin-bottom:15px; font-weight:normal;} div#featured a.previous, div#featured a.next{ width:22px; height:143px; margin-right:2px; display:block; float:left;} div#featured a.previous{background:url(../images/content/previous.gif) 0 0 no-repeat; position:absolute; left:-2px; } div#featured a.next{background:url(../images/content/next.gif) 0 0 no-repeat; position:absolute; right:0; } div#featured ul{ float:left;} div#featured ul li{ background:#bfbbba; float:left; padding:4px 4px 10px; margin-right:3px; width:179px;} div#featured ul li img{ margin-bottom:5px;} div#featured ul li h3{ font-size:125%; color:#59595c; font-weight:normal;} div#featured ul li h3 a { display:block; color:#59595c; text-decoration:none; } /*---- sidebar----*/ div.sidebar div#links h2{ border:#bfbbba 2px solid; background:#5e0030; line-height:30px; font-size:140%; margin-bottom:1px; font-weight:normal; } div.sidebar div#links h2.selected { background:#8eb91a; } div.sidebar div#links h2 a{ color:#fff; display:block; text-decoration:none; padding:0 10px;} div.sidebar div#links div.content{ padding:0 5px; } div.sidebar div#links div.mailing{ height:130px !important; } /*---- sidebar-accordion---*/ div#services h2{ background:url(../images/content/h2-frame.png) 0 0 no-repeat; height:34px; padding:5px 0 0 7px; cursor:pointer;} div#services h2 span{ display:block; height:28px;} div#services h2.print-design span{ background:url(../../assets/images/headings/print-design.jpg) 0 0 no-repeat;} div#services h2.website-design span{ background:url(../../assets/images/headings/website-design.jpg) 0 0 no-repeat;} div#services h2.branding span{ background:url(../../assets/images/headings/branding.jpg) 0 0 no-repeat;} div#services h2.marketing span{ background:url(../../assets/images/headings/marketing.jpg) 0 0 no-repeat;} div#services h2.green-design span{ background:url(../../assets/images/headings/green-design.jpg) 0 0 no-repeat;} div#services div.content{ margin:0 0 0px 2px; width:208px; height:120px; } div#services div.content img{ border-color:#bfbbba; border-style:solid; border-width:6px 6px 6px 5px; vertical-align:bottom;} /*---- Post ---*/ div.post h1 { font-size:210%; margin-bottom:15px; font-family:Georgia, "Times New Roman", Times, serif; color:#5e0030; font-weight:normal; } div.post h2 { font-size:180%; margin-bottom:10px; font-family:Georgia, "Times New Roman", Times, serif; color:#5e0030; font-weight:normal; } div.post h3 { font-size:150%; margin-bottom:10px; font-family:Georgia, "Times New Roman", Times, serif; color:#5e0030; font-weight:normal; } div.post h4 { font-size:120%; margin-bottom:10px; font-family:Georgia, "Times New Roman", Times, serif; color:#5e0030; font-weight:normal; } div.post p { color:#595a5d; line-height:1.2em; font-size:125%; margin-bottom:15px; line-height:18px;} div.post p:after { content: "."; display: block; font-size:0; height: 0; clear: both; visibility: hidden;} div.post p a { color:#595a5d; } div.post blockquote { margin-bottom:20px; } div.post blockquote p{ margin-bottom:5px; font-style:italic;} div.post blockquote p cite{ font-weight:bold; text-align:right; display:block;} div.post img { max-width:100%; } div.post img.alignleft{ float:left; margin:0 10px 10px 0; display: inline;} div.post img.alignright{ float:right; margin:0 0px 10px 10px; display: inline;} div.post img.aligncenter{ display:block; margin-left:auto; margin-right:auto; margin-bottom:10px;} div.post ul { margin:0 0 20px 14px; list-style:disc; } div.post ol { margin:0 0 20px 18px; list-style:decimal; } div.post li { color:#595a5d; line-height:1.2em; font-size:125%; } div.post li ul, div.post li ol { margin-bottom:0px; padding:3px 0; } div.post li li, div.post li p { color:#595a5d; line-height:1.2em; font-size:100%; } /*---- Post - Custom Lists ---*/ div.post ul.list1 { margin:0; padding:0; } div.post ul.list1 li { margin:0; padding:0; } div.post ol.list2 { margin:0; padding:0; } div.post ol.list2 li { margin:0; padding:0; } /*---- Footer ---*/ div#footer p{ font-size:110%; color:#595a5d; line-height:18px; margin-bottom:5px;} /*---- Footer - Navigation ---*/ div#footer ul li {font-size:120%; float:left; color:#595a5d; font-size:110%; } div#footer ul li a{ color:#595a5d;} div#footer ul li.divider { margin:0 10px; } /*---- Common Boxes & Containers ----*/ /*---- box1---*/ div.box1{ border:#bfbbba 5px solid; padding:10px 15px; height:auto;} /*---- box2---*/ div.box2 { background:url(../images/content/box2-middle.jpg) repeat-y top left; } div.box2 div.top{ background:url(../images/content/box2-top.jpg) no-repeat top left; padding-top:8px; } div.box2 div.bottom { background:url(../images/content/box2-bottom.jpg) no-repeat bottom left; padding:14px 15px 30px 10px; } /*---- box3---*/ div.box3 { background:url(../images/content/box3-middle.jpg) repeat-y top left; height:auto !important; } div.box3 div.top{ background:url(../images/content/box3-top.jpg) no-repeat top left; padding-top:8px; } div.box3 div.bottom { background:url(../images/content/box3-bottom.jpg) no-repeat bottom left; padding:8px 15px 15px 10px; } /*---- Table1 ----*/ table.table1 { width:582px; } table.table1 tr.top td { border-top:#bfbbba solid 6px; } table.table1 tr td.first { border-left:#bfbbba solid 6px; } table.table1 tr td { border-bottom:#bfbbba solid 6px; border-right:#bfbbba solid 6px; vertical-align:middle; width:187px; height:114px; text-align:center; } table.table1 tr td img { vertical-align:middle; } /*---- Tabs ----*/ div.tabs ul#tabs-strip { margin:0; list-style:none; } div.tabs ul#tabs-strip li { float:left; display:block; border-left:1px solid #fff; background:#BFBBBA; padding:5px 5px 0; } div.tabs ul#tabs-strip li a { font-size:140%; padding:5px 30px 5px 7px; float:left; display:block; background:url(../images/content/tab-strip.gif) repeat-x top left; line-height:14px; color:#fff; text-decoration:none; } div.tabs ul#tabs-strip li.ui-state-active a { background:none; color:#5E0030;} div.tabs div.box1 { margin-left:1px; } /*------------------------------------------ // 4.1 GO GREEN PAGE SPECIFIC STYLES //------------------------------------------*/ div#content.gogreen div.main h2.heading { background:url(../images/content/h2-green-bg.gif) repeat-x 0 0 ; border:#bfbbba 3px solid; font-size:180%; margin-bottom:10px; font-family:Georgia, "Times New Roman", Times, serif; color:#5e0030; font-weight:normal; line-height:27px; padding-left:10px; width:567px; } div#content.gogreen div.main h2.heading a { color:#FFF; display:block; text-decoration:none; } div#content.gogreen div.main h2.selected { display:none; } div#content.gogreen div#banner { background:url(../images/content/banner_green.jpg) 0 0 no-repeat; } div#content.gogreen div#banner p { margin-top:50px; } /*------------------------------------------ // 4.2 CONTACT PAGE SPECIFIC STYLES //------------------------------------------*/ div#content div.main div.address { width:250px; } div#content div.main div.contact-form { width:290px; } div#content div.main div.contact-form p label { width:70px; display:block; float:left; } div#content div.main div.contact-form p label span { color:#73103e; } div#content div.main div.contact-form p input.textbox { border:#b2b2b2 1px solid; background:#cbc7c6; width:212px; } div#content div.main div.contact-form p textarea { border:#b2b2b2 1px solid; background:#cbc7c6; width:212px; } /*------------------------------------------ // 4.2 PORTFOLIO PAGE SPECIFIC STYLES //------------------------------------------*/ div#portfolio div.clients { float:left; width:120px; } div#portfolio div.clients ul li { border-bottom:#fff 1px solid; margin-bottom:15px; padding-bottom:10px; } div#portfolio div.clients ul li.last { border-bottom:none; } div#portfolio div.clients ul li a { color:#fff; font-size:140%; line-height:1.2em; padding-left:4px; text-decoration:none; display:block; } div#portfolio div.gallery { float:right; position:relative; width:645px; } div#portfolio div.gallery a.prev{ display:block; position:absolute; top:160px; left:0px; background:url(../images/content/previous-button.gif) no-repeat top left; width:22px; height:45px; z-index:10; text-decoration:none; } div#portfolio div.gallery a.next{ display:block; position:absolute; top:160px; right:0px; background:url(../images/content/next-button.gif) top left no-repeat;width:23px; height:45px; z-index:10; text-decoration:none; } div#portfolio div.gallery ul { float:left; } div#portfolio div.gallery ul li { width:643px; height:378px; float:left; } #strap { float: left; }