/********************************************************************************************** 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:#333333; background:#f0f0f0; font-family:Tahoma, Geneva, sans-serif;} /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:750px; margin:0 auto; padding-top:6px; } div#container div.top{background:url(../images/container/top-middle.gif) left top repeat-x;} div#container div.top div.top-left{background:url(../images/container/top-left.gif) left top no-repeat;} div#container div.top div.top-left div.top-right{background:url(../images/container/top-right.gif) right top no-repeat; height:18px; line-height:18px;} div#container div.wrapper { background:#f0f0f0 url(../images/content/content-bg.gif) left top repeat-x; padding-bottom:1px; margin-bottom:20px;} div#container div.middle{background:#fff; } div#container div.middle-left{background:url(../images/container/middle-left.gif) left top repeat-y;} div#container div.middle-left div.middle-right{background:url(../images/container/middle-right.gif) right top repeat-y; width:710px; padding:5px 20px;} div#container div.bottom{background:url(../images/container/bottom-middle.gif) left bottom repeat-x;} div#container div.bottom div.bottom-left{background:url(../images/container/bottom-left.gif) left bottom no-repeat;} div#container div.bottom div.bottom-left div.bottom-right{background:url(../images/container/bottom-right.gif) right bottom no-repeat; height:18px; line-height:18px;} /*---- Header ----*/ div#header{background:url(../images/header/header-bg.gif) left top repeat-x; height:36px; padding:16px 22px 0px; margin-bottom:10px;} /*---- Categories ----*/ div#categories{ background:url(../images/category/category-bg.gif) left top repeat-x; height:33px; border:1px solid #d5d5d5; line-height:33px;} /*---- Content ----*/ div#container.home div#content{border-bottom:3px solid #333; width:100%; overflow:hidden; padding:0; background:url(../images/content/content-wrapper-bg.jpg) left top repeat-y; border-top:1px solid #D5D5D5;} div#content{width:100%; overflow:hidden; padding-bottom:30px;} /*---- Main ----*/ div#container.home div#main { width:463px; overflow:hidden; padding-right:0px;} div#main{ width:520px; overflow:hidden; float:right; padding-right:6px;} div#main div.inner-main{ float:left; width:284px;} div#main div.inner-sidebar{width:204px; float:right; } /*---- Sidebar ----*/ div#container.home div#sidebar { width:220px; padding:10px 8px 10px 10px; } div#sidebar{width:150px; float:left;} /*------------------------------------------ // 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 h1 a.logo{ position:relative; width:368px; height:22px; display:block; float:left;} div#header h1 a.logo span { position: absolute; top: 0; left: 0; background:url(../images/header/logo.jpg) 0 0 no-repeat; width:368px; height:22px; display:block; } /*---- Header - Punchline ----*/ div#header div.punchline{ float:right; background:url(../images/header/punchline.jpg) left top no-repeat; height:32px; width:197px;} /*---- Categories ----*/ div#categories{font-size:140%; margin-bottom:10px;} div#categories p{ width:203px; font-weight:bold; padding:0px 20px; float:left; text-align:right;} div#categories ul {width:464px; float:right;} div#categories ul li{border-left:1px solid #cccccc; width:153px; text-align:center; text-transform:uppercase; font-weight:bold; float:left; } div#categories ul li:hover { background:#999999; } div#categories ul li a{color:#333;} div#categories ul li:hover a { color:#FFF; } div#categories ul li a:hover{ text-decoration:none; } /*---- Main ----*/ div#container.home div#main img{ width:154px; float:left; display:none; } div#container.home div#main img.on { display:block; } div#container.home div#main img.off{ display:none; } /*---- Sidebar ----*/ div#sidebar img{margin-bottom:15px;} div#sidebar p{margin-bottom:20px; font-size:110%; line-height:14px;} /*---- Footer - Company Info ----*/ div#footer div.company-info { font-size:110%; padding:0px 20px; margin-bottom:10px;} /*---- Footer - Company Info - Copyright ----*/ div#footer div.company-info div.copyright{float:left; line-height:14px; width:270px; text-align:left; } /*---- Footer - Company Info - Contact Details ----*/ div#footer div.company-info div.contact-details{float:right; line-height:14px; } div#footer div.company-info div.contact-details span.email-address{ margin-right:20px;} div#footer div.company-info div.contact-details span.phone{margin-right:20px;} div#footer div.company-info div.contact-details span.email-address a{ color:#b23f3f;} /*---- Footer - Newsletter Form ----*/ div#footer div.newsletter-form{ text-align:center; font-size:110%; line-height:1.2em; clear:both;} div#footer div.newsletter-form input.textbox{border:#343434 1px solid; padding:2px 5px; margin-right:10px;} div#footer div.newsletter-form input.button{ background:#cc0033; padding:1px 5px; border:none; color:#fff;} /*------------------------------------------ // 4.1 INNER PAGE SPECIFIC STYLES //------------------------------------------*/ div#main h1{font-size:140%; color:#990000; font-family:Arial, Helvetica, sans-serif; line-height:20px; margin-bottom:12px; text-transform:uppercase;} div#main h2{font-size:130%; color:#990000; font-family:Arial, Helvetica, sans-serif; line-height:20px; margin-bottom:12px; text-transform:uppercase;} div#main h3{font-size:120%; color:#990000; font-family:Arial, Helvetica, sans-serif; line-height:20px; margin-bottom:12px; text-transform:uppercase;} div#main h6 { margin:10px 0; font-size:120%; line-height:16px; } div#main p{ font:12px/16px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; background-color: #fff; color: #333; margin-bottom:12px; } div#main ul{ margin-bottom:12px; margin-left:18px;} div#main ul li{ list-style:disc; font-size:120%; color:#666; line-height:1.2em; font:12px/16px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; background-color: #fff; color: #333; margin-bottom:12px; } div#main ol{ margin-bottom:12px; margin-left:24px;} div#main ol li{ list-style:decimal; font-size:120%; color:#666; line-height:1.2em; font:12px/16px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; background-color: #fff; color: #333; margin-bottom:12px;} div#main a{ color:#666;} div#main div.inner-sidebar img{vertical-align:top;} /*---- Sidebar ----*/ div#sidebar ul li{ margin-bottom:8px; line-height:33px;} div#sidebar ul li a{font-size:120%; color:#333; font-weight:bold; background:url(../images/category/category-bg.gif) left top repeat-x; border:1px solid #d5d5d5; display:block; padding:0px 18px; font-family:Arial, Helvetica, sans-serif;} div#sidebar ul li a:hover{text-decoration:none;} div#sidebar ul li ul.child{margin-bottom:15px;} div#sidebar ul li ul.child li {margin-bottom:0px; border-bottom:1px solid #ccc;} div#sidebar ul li ul.child li.last1{ border-bottom:1px solid #ccc; line-height:15px; padding-top:5px;} div#sidebar ul li ul.child li.last{ border:none; line-height:15px; padding-top:5px;} div#sidebar ul li ul.child li a{ background:url(../images/content/arrow.gif) right center no-repeat; border:0; font-size:100%; } div#sidebar ul li ul.child li a:hover , div#sidebar ul li ul li a.active{ color:#990000;} div#sidebar ul li ul.child li ul.subchild{margin:0px 0px 10px 10px;} div#sidebar ul li ul.child li ul.subchild li{line-height:16px; margin-bottom:0px; border:none;} div#sidebar ul li ul.child li ul.subchild li a{ background:none;} div#sidebar ul li ul.child li.active ul.subchild{display:block;} div#sidebar li ul { display:none; } div#sidebar li.active ul.child { display:block; } div#sidebar li.active ul.child li.active ul { display:block; }