/********************************************************************************************** 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 : 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(interface/css/base.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#000; background:#c6c6c6 url(interface/images/body-bg.gif) left top repeat-x; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } /*------------------------------------------ // 2.LAYOUT // Define the basic : header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:770px; margin:0 auto; padding-top:23px; } /*---- Header ----*/ div#header{margin-bottom:7px; padding:0px 8px;} /*---- Navigation ----*/ div#navigation{ height:22px; padding:0px 1px; clear:both; width:547px; float:right; } /*---- Main ----*/ div#main { width:483px; margin-top:-48px; position:relative; padding-top:30px; min-height:30em;} div.box2 div#main{ width:525px; padding:10px 10px; } /*---- Sidebar ----*/ div#sidebar { width:218px; margin-top:-48px; position:relative; background:#fff url(interface/images/content/sidebar-bg.jpg) left top no-repeat; padding:10px 12px;} div.box2 div#sidebar { width:196px; background:none ; padding:10px 7px;} /*---- Footer ----*/ div#footer{background:url(interface/images/footer/footer-bg.png) left top repeat-y; padding:40px 13px 6px 7px; width:750px; clear:both; text-align:right; } /*------------------------------------------ // 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{float:left; margin-top:20px;} div#header div.logo h1 a{ position:relative; width:184px; height:66px; display:block;} div#header div.logo h1 a span { position: absolute; top: 0; left: 0; background:url(interface/images/header/logo.gif) 0 0 no-repeat; width:184px; height:66px; display:block; } div#header div.logo h1 a:hover , div#header div.logo h1 a:hover span{text-decoration:none;} /*---- Header - Global Navigation ----*/ div#header div.right {float:right; width:550px;} div#header div.right div.global_navigation { width:258px; text-align:right; float:right; margin-bottom:32px;} div#header div.right div.global_navigation ul{margin-top:4px; } div#header div.right div.global_navigation ul li { float:left; margin-right:6px; } /*---- Header - Global Navigation - Search Form ----*/ div.search-form{ float:right; } div.search-form img{ margin-right:10px;} div.search-form p{float:left;} div.search-form p input.textbox{width:110px; margin-right:5px; font-size:100%; vertical-align:top;} div.search-form p input.button{ font-size:100%; vertical-align:top; margin-top:-2px; position:relative;} /*---- Header Navigation ----*/ div#navigation ul li { display:block; float:left; background:url(interface/images/header/navigation/navigation.gif) repeat-x left -22px; float:left; display:block;} div#navigation ul li a { color:#3c3c3c; font-size:110%; text-decoration:none; line-height:1.2em; display:block; float:left; padding:5px 25px; background:url(interface/images/header/navigation/pipe.gif) right no-repeat; } div#navigation ul li:hover , div#navigation ul li.active{ background:url(interface/images/header/navigation/navigation.gif) repeat-x left top;} div#navigation ul li.first { background:url(interface/images/header/navigation/first.gif) left top no-repeat;} div#navigation ul li.first:hover { background:url(interface/images/header/navigation/navigation.gif) left top repeat-x;} div#navigation ul li.last { background:url(interface/images/header/navigation/last.gif) right top no-repeat;} div#navigation ul li.last a{ background:none; padding:5px 20px 5px 19px; } div#navigation ul li.last:hover { background:url(interface/images/header/navigation/navigation.gif) right top repeat-x;} div#navigation ul li.first-active{ background:url(interface/images/header/navigation/navigation.gif) left top repeat-x;} div#navigation ul li.last-active{ background:url(interface/images/header/navigation/navigation.gif) left top repeat-x; } /*---- Content - Box ----*/ div.box-top{background:url(interface/images/content/box-top.png) left top no-repeat; height:27px; line-height:27px; } div.box-bottom{background:url(interface/images/content/box-bg.png) left top repeat-y; padding:10px 5px 10px 17px; } /*---- Content - Box1 ----*/ div.box1-top{background:url(interface/images/content/box1-top.png) left top no-repeat; height:48px; line-height:48px; } div.box1-bottom{background:url(interface/images/content/box1-bg.png) left top repeat-y; padding:0px 5px 10px 17px;} /*---- Content - Box2 ----*/ div.box2-top{background:url(interface/images/content/box2-top.png) left top no-repeat; height:48px; line-height:48px; } div.box2-bottom{background:url(interface/images/content/box2-bg.png) left top repeat-y; padding:0px 5px 10px 7px;} /*---- Content - Box2 ----*/ div.box3-top{background:url(interface/images/content/box3-top.png) left top no-repeat; height:51px; line-height:51px; } div.box3-bottom{background:url(interface/images/content/box3-bottom.png) left top repeat-y; padding:0px 5px 10px 18px;} /*---- Content - Post ----*/ div#content h1{ font-size:180%; line-height:18px; margin-bottom:16px;} div#content div.post h1{width:410px; color:#FF6600;} div#content div.post h2{ font-size:130%; line-height:16px; margin-bottom:10px; color:#FF6600;} div#content div.post h3{ font-size:140%; line-height:14px; margin-bottom:16px;} div#content div.post h4{ font-size:130%; line-height:12px; margin-bottom:16px;} div#content div.post h1 a , div#content div.post div.entry h2 a , div#content div.post div.entry h3 a , div#content div.post div.entry h4 a{ text-decoration:none; color:#FF6600;} div#content div.post h1 a:hover , div#content div.post div.entry h2 a:hover , div#content div.post div.entry h3 a:hover , div#content div.post div.entry h4 a:hover{ text-decoration:none; } div#content div.post div.datestamp{ color:#4f2e01; font-size:120%; line-height:12px;} div#content div.post div.entry p{ font-size:130%; line-height:18px; margin-bottom:16px; color:#000000;} div#content div.post div.entry ul{margin-bottom:16px;} div#content div.post div.entry ul li{ background:url(interface/images/content/square.gif) left 6px no-repeat; color:#111111; font-size:130%; line-height:18px; margin-bottom:4px; padding-left:12px;} div#content div.post div.entry ol{margin-bottom:16px;} div#content div.post div.entry ol li{ list-style-type:decimal; font-size:110%; line-height:12px; margin-bottom:4px; color:#111111; list-style-position:inside;} div#content div.post div.entry blockquote{ font-style:italic; margin-bottom:16px;} div#content div.post div.entry a{ color:#FF6600; text-decoration:underline;} div#content div.post div.entry a:hover{ text-decoration:none;} div#content div.post div.post-header{ border-bottom:2px solid #ffa160; margin-bottom:13px; padding-bottom:3px;} div#content div.post div.post-header div.tweet{margin-top:-20px; position:relative;} div#content div.post div.post-header div.tweet span.left{background:url(interface/images/content/tweet-left.gif) left top no-repeat; padding-left:11px; height:39px; display:block; margin-left:-5px; position:relative;} div#content div.post div.post-header div.tweet span.right{background:url(interface/images/content/tweet-right.gif) right top no-repeat; float:left; padding:5px 6px 0px 0px; display:block; height:36px; color:#9f9f9f;} div#content div.post div.post-header div.tweet span.right a{background:none; color:#9f9f9f; text-decoration:none; padding:0px; text-align:center; font-size:120%; line-height:7px;} div#content div.post div.post-header div.tweet span.right a:hover{text-decoration:none;} div#content div.post div.post-header div.tweet span.right span.number{font-size:150%; background:none; padding:0; height:auto; display:block; line-height:9px;} div#content div.post div.post-header div.tweet a{ background:#95cd3c; font-size:130%; color:#fff; display:block; clear:both; padding:3px 5px; text-decoration:none; margin-right:2px; letter-spacing:1px; float:left;} div#content div.post div.post-header div.tweet span.right span a{text-align:center; display:block;} /*---- Images in post section ----*/ div#content div.post div.entry p img.aligncenter{ display:block; margin-left:auto; margin-right:auto;} div#content div.post div.entry p img.alignright{display:inline; margin:0 0 2px 7px; padding:4px;} .alignright{float:right;} div#content div.post div.entry p img{max-width:100%; padding:0;} div#content div.post div.entry p img.alignright{display:inline; margin:0 7px 2px 0; padding:4px;} .alignleft{float:left;} div#content div#main div.post p.page_top_image img{width:100%; margin-bottom:10px;} /*---- Content - Post - Post Footer ----*/ div#content div.post div.post-footer{ padding-bottom:17px; margin-bottom:76px; background:url(interface/images/content/border.gif) left bottom repeat-x;} div#content div.post div.post-footer p{ font-size:120%; margin-bottom:10px; line-height:1.2em;} div#content div.post div.post-footer p span{color:#907318;} div#content div.post div.post-footer p span a{color:#907318;} div#content div.post div.post-footer span.links , div#content div.post div.post-footer span.author , div#content div.post div.post-footer span.timestamp{color:#000;} div#content div.post div.post-footer span.links a{color:#000; margin-left:15px;} /*---- Main ----*/ /*---- Content - Comment Box ----*/ div#comment-box{clear:both;} div#comment-box h1{ margin-bottom:16px;} div#comment-box a{color:#9E9E9E;} div#comment-box a:hover{text-decoration:none;} /*---- Content - Comment Box - Comments ----*/ div#comment-box div.comments ul li{ background-color:#dcdcdc; padding:8px; width:468px; overflow:hidden; margin-bottom:14px;} div#comment-box div.comments ul li div.entry { float:left; width:400px;} div#comment-box div.comments ul li div.photo{ float:left; height:56px; width:56px; margin:0px 10px 0px 0px;} div#comment-box div.comments ul li div.entry p{font-size:120%; line-height:16px; color:#9E9E9E;} div#comment-box div.comments ul li div.entry div.author { margin-bottom:5px; font-weight:bold; } div#comment-box div.comments ul li div.entry div.author span { font-size:120%; color:#9E9E9E; } div#comment-box div.comments ul li div.entry div.author cite{ font-size:120%; color:#9E9E9E; line-height:20px; margin-right:5px;} div#comment-box div.comments ul li div.entry div.datestamp{ font-size:110%; color:#9E9E9E; margin-bottom:5px; } /*---- Content - Comment Box - Comment Form ----*/ div#comment-box div.comment-form{ background-color:#dcdcdc; padding: 15px 8px 8px; width:468px;} div#comment-box div.comment-form p{margin-bottom:10px;} div#comment-box div.comment-form p label{ font-size:110%; color:#9E9E9E; margin-bottom:5px;} div#comment-box div.comment-form p input.textbox{width:220px; padding:2px 5px; margin-right:10px;} div#comment-box div.comment-form p textarea{width:452px; padding:2px 5px;} /*---- Sidebar - Widget ----*/ div#sidebar div.widget h2{ font-size:140%; color:#4e4e4e; line-height:1.2em; margin:0px 0px 10px 6px;} div#sidebar div.widget { background:#fff; border:1px solid #dedddd; padding:10px 6px 6px 4px; margin-bottom:22px;} div#sidebar div.widget ul{ padding:0px 0px 5px 10px;} div#sidebar div.widget ul li{ color:#4e4e4e; font-size:115%; line-height:14px; margin-bottom:10px; background:url(interface/images/content/square.gif) left 4px no-repeat; padding-left:12px;} div#sidebar div.widget ul li a{ color:#000;} div#sidebar div.widget ul li span{color:#a6a6a6; display:block; font-size:82%;} /*---- Sidebar - Widget - Recent Post ----*/ div#sidebar div.widget#recent-posts ul{background:url(interface/images/content/border1.gif) left bottom repeat-x; margin-bottom:4px;} div#sidebar div.widget a.rss{background:url(interface/images/content/rss-icon.gif) left center no-repeat; padding-left:25px; line-height:14px; color:#4e4e4e; font-size:100%; text-transform:uppercase; text-decoration:underline; display:block; margin-right:5px;} div#sidebar div.widget a.rss:hover{text-decoration:none;} /*---- Sidebar - Widget - Search Form ----*/ div#sidebar div.widget.search-form{ border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; padding:10px 0px; background:none; border-left:none; border-right:none; float:none; margin-bottom:22px;} div#sidebar div.widget.search-form input.textbox{width:130px;} div.widget_search form#searchform input#s {width:130px;} /*---- Sidebar - Widget - Social Sites ----*/ div#sidebar div.widget#social-sites p{ background:url(interface/images/content/border1.gif) left bottom repeat-x; padding:0px 0px 9px 10px; margin-bottom:7px;} div#sidebar div.widget#social-sites p.last{background:none; margin-bottom:0px;} div#sidebar div.widget#social-sites a{ font-size:130%; color:#4e4e4e; text-decoration:underline;} div#sidebar div.widget#social-sites a:hover{text-decoration:none;} div#sidebar div.widget#social-sites a.rss{ text-transform:none; background:url(interface/images/content/large-rss.gif) left top no-repeat; padding-left:35px; line-height:25px; } div#sidebar div.widget#social-sites a.contact{ display:block; background:url(interface/images/content/contact.gif) left top no-repeat; padding-left:35px; line-height:30px; } div#sidebar div.widget#social-sites a.twitter{ display:block; background:url(interface/images/content/twitter.gif) left top no-repeat; padding-left:35px; line-height:25px;} /*---- Sidebar - Widget - Categories ----*/ div#sidebar div.widget#blog-categories ul{padding-left:10px;} div#sidebar div.widget#blog-categories ul li{ background:none; width:98px; float:left;} div#sidebar div.widget#blog-categories ul li a{text-decoration:underline;} div#sidebar div.widget#blog-categories ul li a:hover{text-decoration:none;} /*---- Sidebar - Widget - Tagcloud ----*/ div#sidebar div.widget#tagcloud ol li{display:inline; line-height:22px; margin-right:1px;} div#sidebar div.widget#tagcloud ol li a.size22{ color:#0a6bb2; font-size:220%; } div#sidebar div.widget#tagcloud ol li a.size18{ color:#56a8e7; font-size:180%;} div#sidebar div.widget#tagcloud ol li a.size24{ color:#004377; font-size:240%;} div#sidebar div.widget#tagcloud ol li a.size11{ font-size:110%; color:#8ebfe4; vertical-align:top;} div#sidebar div.widget#tagcloud ol li a.color11{ color:#0a6db8; font-size:110%; vertical-align:top;} div#sidebar div.widget#tagcloud ol li a.size26{ color:#1f9eff; font-size:260%; vertical-align:bottom;} div#sidebar div.widget#tagcloud ol li a.color22{ color:#7a8084; font-size:220%; letter-spacing:-2px;} div#sidebar div.widget#tagcloud ol li a.color18{ color:#0660a4; font-size:180%;} div#sidebar div.widget#tagcloud ol li a.color22 span{ color:#8dceff;} /*---- Sidebar - Widget - Blog Roll ----*/ div#sidebar div.widget#blog-roll ul li{ background:none; font-size:120%; color:#2f2f2f;} div#sidebar div.widget#blog-roll ul li a{ color:#2f2f2f;} /*---- Footer ----*/ div#footer span{ color:#a5a3a3;} div#footer a{ color:#a5a3a3;} /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ div#container.home div.box3{margin-bottom:10px;} div#container.home div#main { padding-top:10px; width:494px;} div#container.home div#main div.banner{margin-bottom:10px;} div#container.home div.box1-bottom {padding-bottom:0px;} div#container.home div#sidebar{ background:none;} div#container.home div.box-shadow{background:url(interface/images/content/index-bottom.png) left top no-repeat; height:8px;} /*-----------Main - Services------------*/ div#container.home div.box-bottom{padding:0px 5px 0px 10px;} div#container.home div.services div.post{margin-top:0px;} div#container.home div.services div.service { width:170px; padding:0px 8px; border-right:1px solid #eaeaea; margin-top:-15px; position:relative; } div#container.home div.services div.service h3 {background:url(interface/images/content/arrow.gif) left center no-repeat; padding:0px 0px 5px 22px; overflow:hidden; width:150px; border-bottom:#70706f 1px dotted; color:#595a3c; } div#container.home div.services div.service h3 span { margin-top:14px; color:#595a3c;} div#container.home div.services div.service h3 img { float:right; } div#container.home div.services div.service.last { border-right:none;} div#featured div.sociable { display:none; } div#content div.sociable div.sociable_tagline { color:#000000; font-size:130%; line-height:18px; margin-bottom:10px; } div#content div.sociable ul li { background:none !important; } /*------------------------------------------ // 5 SERVICES PAGE SPECIFIC STYLES //------------------------------------------*/ div.box2 div#sidebar h2 { color:#FFF; font-size:130%; padding:0px 0px 0px 15px; line-height:20px; background:#fd7313 } ul.sub-nav { padding:0px 0px 12px 0px; margin-bottom:20px;} ul.sub-nav li { padding:0px 15px 0px 15px; display:block; font-size:120%; background:none; margin-top:0; border-bottom:#b9b9b9 1px dotted; } ul.sub-nav li a { color:#92918f; font-size:100%; padding:7px 0px 7px 12px; background:url(interface/images/content/list-bg.gif) left center no-repeat; display:block; text-decoration:none;} ul.sub-nav li:hover {background-color:#f4ecd7;} ul.sub-nav li.active {background-color:#f4ecd7;} ul.sub-nav li.active a{background:url(interface/images/content/list-hover-bg.gif) left center no-repeat;} ul.sub-nav li:hover a { background:url(interface/images/content/list-hover-bg.gif) left center no-repeat; text-decoration:none; } div.box2 div#sidebar div.post p{ font-size:120%; line-height:14px; color:#747474; margin-bottom:10px;} /*------------------------------------------ // 6 APPROACHES PAGE SPECIFIC STYLES //------------------------------------------*/ /*------------------------------------------ // 7 CONTACT PAGE SPECIFIC STYLES //------------------------------------------*/ div.box div.post{ margin-top:-27px; position:relative;} /*------------------------------------------ // 8 ABOUT PAGE SPECIFIC STYLES //------------------------------------------*/ div#sidebar div.post h2#about{background:none; color:#000; padding:0px;} /*------------------------------------------ // 9 Twitter Feeds widget SPECIFIC STYLES //------------------------------------------*/ .twitter_title_link{margin: 0pt 0pt 10px 6px; color: rgb(78, 78, 78); line-height: 1.2em;} .twitter-item{color:#4E4E4E;} /*------------------------------------------ // 10 Search Button form //------------------------------------------*/ .screen-reader-text{display:none;} .box-bottom h1.pagetitle{margin-bottom:30px; color: #3C3C3C;} #main h1.pagetitle{margin-bottom:30px; color: #3C3C3C;} /*------------------------------------------ // 11 Pagination //------------------------------------------*/ div#pagination{margin-bottom:14px; overflow:hidden; width:100%;} div#pagination a{color:#907318; font-size:140%; line-height:1.2em;} /*------------------------------------------ // 10 Some Page Specific styles are here //------------------------------------------*/ div#container div#News div.entry p strong{color:#747474;} div#container div#News div.entry p a{color:#FF6600;} div.home div#sidebar div#text-3{border-top:none; margin-bottom:0px;}div.home div#sidebar div#text-3 div.textwidget{}div.home div#sidebar div#recent-posts-3{border-bottom:none; margin-bottom:0px;}div.home div#sidebar div.sociable{margin:0px 10px 10px 15px}