/********************************************************************************************** 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:#011b36; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container{min-width:980px;} /*---- Wrapper ----*/ div#container.layout1 div#content div.wrapper{ width:995px; padding:0px;} div.wrapper { width:940px; margin:0 auto; padding:0px 20px; } /*---- Header ----*/ div#header{background:#1aa946 url(../images/header/header-bg.jpg) left bottom repeat-x; border-top:1px solid #18a449; margin-bottom:17px;} div#header div.inner-header{ background:url(../images/header/header-image.jpg) 50% top no-repeat;} div#header div.inner-header div.wrapper{padding:29px 20px 23px; overflow:hidden;} /*---- Navigation ----*/ div#navigation{ background:url(../images/navigation/navigation-bg.jpg) left top repeat-x; height:46px;} /*---- Content ----*/ div#content{ padding:50px 0px;} div#container.home div#content div.wrapper{ width:940px;} div#container div#content div.wrapper{width:950px;} /*---- Banner ----*/ div#banner{background:url(../images/content/home-bg.jpg) center top no-repeat;} div#container.home div#banner div.flash{height:232px; width:1389px; margin:0 auto;} div#banner div.wrapper{ padding:32px 20px; width:940px; overflow:hidden;} /*---- Brief ----*/ div.brief#services{background:url(../images/content/services-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} div.brief#intractive{background:url(../images/content/intractive-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} div.brief#about{background:url(../images/content/about-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} div.brief#news{background:url(../images/content/news-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} div.brief#sales{background:url(../images/content/sales-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} div.brief#contact{background:url(../images/content/contact-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} div.brief#login{background:url(../images/content/login-bg.jpg) center top no-repeat; height:182px; padding-top:50px;} /*---- Main ----*/ div#main { float:right; width:650px; } /*---- Sidebar ----*/ div#sidebar { float:left; width:290px; } div#container.layout1 div#sidebar{width:355px;} /*---- Footer ----*/ div#footer{background:url(../images/footer/footer-bg.png) 50% bottom no-repeat; margin-top:-102px; position:relative; z-index:12; padding:220px 0px 11px 0px; clear:both;} div#footer div.inner-footer{border-top:1px solid #294453; margin-top:-105px; position:relative;} /*------------------------------------------ // 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;} div#header div.logo h1 a{ width:275px; height:75px; display:block; background:url(../images/header/logo.png) left top no-repeat; } /*---- Header - Tagline ----*/ div#header div#tagline{float:right; margin-top:50px; background:url(../../assets/images/texts/tagline.png) left top no-repeat; height:24px; width:285px;} /*---- Navigation ----*/ div#navigation ul {width:100%; overflow:hidden;} div#navigation ul li{float:left; line-height:46px;} div#navigation ul li.pipe{ background:url(../images/navigation/pipe.gif) left top no-repeat; height:46px; width:2px;} div#navigation ul li a{ color:#47bc17; font-size:150%; padding:0px 14px 0px 8px; float:left; display:block;} div#navigation ul li a:hover , div#navigation ul li a.active{background:url(../images/navigation/hover-bg.gif) left top repeat-x; text-decoration:none; color:#fff;} /*---- Banner ----*/ div#banner h1{ font-size:300%; color:#fff; font-weight:normal; line-height:38px; margin-left:12px;} /*---- Brief ----*/ div.brief p{ font-size:160%; color:#fff; line-height:23px;} /*---- Content - Box1 ----*/ div.box1{width:224px; float:left; margin-right:14px; position:relative; } div.box1 div.top{ background:#1f374f url(../images/content/box1-top.jpg) left top no-repeat} div.box1 div.top div.bottom{ background: url(../images/content/box1-bottom.jpg) left bottom no-repeat; padding:6px 11px; height:214px;} /*---- Content - Box2 ----*/ div.box2{ background:url(../images/content/box2-middle.jpg) left top repeat-y;} div.box2 div.top{ background:url(../images/content/box2-top.jpg) left top no-repeat} div.box2 div.top div.bottom{ background: url(../images/content/box2-bottom.jpg) left bottom no-repeat; padding:17px 17px 11px 17px; width:193px;} /*---- Content - Box3 ----*/ div.box3{ background:#e6f3fc;} div.box3 div.box3-top{ background:url(../images/content/box3-top.gif) left top no-repeat;} div.box3 div.box3-top div.box3-bottom{ background:url(../images/content/box3-bottom.gif) left bottom no-repeat; padding:14px 0px 5px 0px;} /*---- Content - Box4 ----*/ div.box4 div.box4-top-left{background:url(../images/content/box4-top-left.gif) left top no-repeat; height:9px; line-height:9px; padding-left:9px;} div.box4 div.box4-top-left div.box4-top-right{background:url(../images/content/box4-top-right.gif) right top no-repeat; height:9px; line-height:9px;} div.box4 div.box4-middle{ background:#f2f9fd; padding:32px 27px;} div.box4 div.box4-bottom-left{background:url(../images/content/box4-bottom-left.gif) left bottom no-repeat; height:9px; line-height:9px; padding-left:9px;} div.box4 div.box4-bottom-left div.box4-bottom-right{background:url(../images/content/box4-bottom-right.gif) right bottom no-repeat; height:9px; line-height:9px;} div.box4 div.box4-middle a{font-size:130%;} /*---- Content - Box4 ----*/ div.box5 div.box5-top-left{background:url(../images/content/box5-top-left.gif) left top no-repeat; height:9px; line-height:9px; padding-left:9px;} div.box5 div.box5-top-left div.box5-top-right{background:url(../images/content/box5-top-right.gif) right top no-repeat; height:9px; line-height:9px;} div.box5 div.box5-middle{ background:#fff; padding:32px 27px;} div.box5 div.box5-bottom-left{background:url(../images/content/box5-bottom-left.gif) left bottom no-repeat; height:9px; line-height:9px; padding-left:9px;} div.box5 div.box5-bottom-left div.box5-bottom-right{background:url(../images/content/box5-bottom-right.gif) right bottom no-repeat; height:9px; line-height:9px;} /*---- Main ----*/ div#main h1{ color:#031e39; font-size:180%; line-height:24px; margin-bottom:24px;} div#main h2{color:#031e39; font-size:150%; line-height:19px; margin-bottom:24px;} div#main h3{color:#031e39; font-size:130%; line-height:19px; margin-bottom:24px;} div#main h4{color:#031e39; font-size:120%; line-height:19px; margin-bottom:24px;} div#main p{font-size:130%; color:#3f444a; line-height:19px; margin-bottom:24px;} div#main p span{color:#2cb133; } div#main a{color:#339100; text-decoration:underline;} div#main a:hover{text-decoration:none;} div#main blockquote{font-style:italic;} div#main ul{margin-bottom:14px;} div#main ul li{ list-style-type:disc; line-height:14px; font-size:130%; margin-bottom:3px; list-style-position:inside;} div#main ol{margin-bottom:14px;} div#main ol li{ list-style-type:decimal; line-height:14px; font-size:130%; margin-bottom:3px; list-style-position:inside;} /*---- Images section ----*/ div#content p img.aligncenter{ display:block; margin-left:auto; margin-right:auto;} div#content p img.alignright{display:inline; margin:0 0 2px 7px; padding:4px;} .alignright{float:right;} div#content p img{max-width:100%; padding:0;} div#content p img.alignright{display:inline; margin:0 7px 2px 0; padding:4px;} .alignleft{float:left;} div#main p.adr span{color:#3f444a; font-size:100%; margin-bottom:0px; display:inline;} div#main p a{font-size:100%;} /*---- Main - Form Common Content ----*/ div#main div.form div.section h2{ border-bottom:1px solid #aabecb; font-size:220%; color:#3ba535; line-height:40px; padding-left:5px;} div#main div.form div.section table {width:100%;} div#main div.form div.section table td{ font-size:130%; color:#30363c; padding-bottom:15px; vertical-align:top;} div#main div.form div.section table td label{margin:3px 10px 2px 0; font-weight:normal; vertical-align:top; display:block;} div#main div.form div.section input.textbox{width:342px;} div#main div.form div.section input.textbox.small{width:100px;} div#main div.form div.section table td input.radio{margin:6px 0px 0px 0px;} div#main div.form div.section table th{ text-align:right; font-size:130%; color:#30363c; line-height:16px; width:190px; padding-right:30px;} div#main div.form div.section select{width:104px; padding:1px;} div#main div.form div.section select.large{ width:242px;} div#main div.form div.section input.checkbox{margin:0px 10px 0px 0px; vertical-align:middle;} div#main div.form div.section textarea{width:340px; display:block; margin:16px 0px;} div#main div.form div.section input.button{cursor:pointer; } div#main div.form div.section#equipment-details th{ width:100px;} div#main div.form div.section th.quantity{text-align:left;} /*---- Sidebar ----*/ div#sidebar h2{font-size:140%; color:#f2f9fd; line-height:19px; margin:0px 0px 5px 22px;} div#sidebar h2 a{ color:#fff;} div#sidebar h2 a:hover{ text-decoration:none;} div#sidebar ul li{ border-top:1px solid #031e39; } div#sidebar ul li a{color:#031e39; font-size:130%; line-height:19px; padding:12px 22px; display:block; background:url(../images/content/arrow.gif) right center no-repeat;} div#sidebar ul li a:hover , div#sidebar ul li a.active{ background:#fff url(../images/content/arrow.gif) right center no-repeat; text-decoration:none;} /*---- Footer ----*/ div#footer div.wrapper{overflow:hidden; padding:22px 0px 0px 10px ; width:930px; color:#EFEFEF;} div#footer div.inner-footer div.column1{ float:left;} div#footer div.inner-footer div.column1 ul.foot-nav{margin-bottom:9px;} div#footer div.inner-footer div.column1 ul.foot-nav li{display:inline; margin-right:23px; line-height:1.2em;} div#footer div.inner-footer div.column1 ul.foot-nav li a{ font-size:120%; color:#fff; line-height: 2em;} div#footer div.inner-footer div.column1 p{ font-size:120%; color:#fff;} div#footer div.inner-footer div.column2{ float:right;} div#footer div.inner-footer div.column2 p{margin-bottom:13px;} div#footer div.inner-footer div.column2 img{margin-top:-6px; position:relative;} div#footer div.inner-footer div.column2 a{color:#505e6c; font-size:120%; line-height:22px;} /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Content - Services ----*/ div#content div#services{width:100%; overflow:hidden; margin-bottom:15px;} div#content div#services h2{font-size:180%; color:#b3b6bd; font-weight:normal; line-height:26px; margin-bottom:10px;} /*---- Content - Services - Box1 ----*/ div#content div#services div.box1 h2{ color:#21ac3e; margin-bottom:7px; } div#content div#services div.box1 p{color:#96b493; font-size:130%; line-height:19px;} div#content div#services div.box1 a.more-link{color:#6ecf64; position:absolute; bottom:12px; left:12px; font-size:130%; line-height:19px;} /*---- Content - Services - Intractive Box1 ----*/ div#content div#services div.box1#intractive{margin-right:0px;} /*---- Content - Dashboard ----*/ div#content div#dashboard { overflow:hidden; width:100%; position:relative; z-index:25;} div#content div#dashboard h2{font-size:170%; color:#49b534; font-weight:normal; line-height:19px; margin-bottom:16px;} div#content div#dashboard p{font-size:120%; line-height:15px; color:#a7b8aa;} div#content div#dashboard a{color:#a7b8aa;} div#content div#dashboard p img.quote{margin:0px 0px 3px 0px;} div#content div#dashboard p img{margin-right:10px; vertical-align:middle;} div#content div#dashboard p a.contact{background:url(../images/content/email-icon.gif) left top no-repeat; padding-left:30px; line-height:23px; display:block;} /*---- Content - Dashboard - Process ----*/ div#process{background:url(../images/content/process-box.jpg) left top no-repeat; width:442px; height:249px; float:left; margin-right:12px; padding:16px 11px;} div#process p{color:#b3bdba; margin-bottom:6px;} div#process img{margin:0px 0px 0px 12px;} /*---- Content - Dashboard - Box2 ----*/ div#dashboard div.box2 h2{ margin-bottom:10px;} /*---- Content - Dashboard - Quote Box2 ----*/ div#dashboard div.box2#quote{margin:0px 8px 13px 0px;} /*---- Content - Dashboard - Contact Box2 ----*/ div#contact.box2 div.top div.bottom{ padding:21px 17px 14px 15px; width:195px;} div#dashboard div.box2#contact{margin-right:8px;} div#dashboard div.box2#contact h2{margin-bottom:20px;} div#dashboard div.box2#contact p{margin-bottom:13px;} /*---- Content - Dashboard - News Box2 ----*/ div#dashboard div.box2#news div.top div.bottom{ padding:17px 17px 26px 17px; width:193px;} div#dashboard div.box2#news h2{margin-bottom:11px;} div#dashboard div.box2#news p{margin-bottom:15px;} div#dashboard div.box2#news p a{color:#a7b8aa; font-size:100%;} div#dashboard div.box2#news p span{color:#6ecd6d; font-size:92%;} div#dashboard div.box2#news a{color:#2eb131; font-size:120%;} div#dashboard div.box2#news p img{margin:0px;} /*------------------------------------------ // 5 SALES PAGE SPECIFIC STYLES //------------------------------------------*/ div#container.sales div#main {width:924px; margin:0 auto; float:none; } div#container.sales div#main div.box5-middle{background:#fff url(../images/content/sales-content-bg.gif) left top no-repeat; padding:40px 58px;} /*------------------------------------------ // 6 SERVICES PAGE SPECIFIC STYLES //------------------------------------------*/ div#main div#equipment-decommissioning-content.box4-middle , div#main div#secure-data-erasure-content.box4-middle , div#main div#remarketing-services-content.box4-middle , div#main div#equipment-redeployment-content.box4-middle , div#main div#equipment-desposal-content.box4-middle , div#white-paper-content.box4{ display:none;} /*------------------------------------------ // 6 INTRACTIVE PAGE SPECIFIC STYLES //------------------------------------------*/ div#container.layout1 div#main{width:640px;} div#container.layout1 div#sidebar img{margin-left:0px;} div#sidebar img{margin-left:15px;} /*------------------------------------------ // 8 CONTACT PAGE SPECIFIC STYLES //------------------------------------------*/ div#container.contact div#main div.box4-middle{ background:#f2f9fd url(../images/content/contact-content-bg.jpg) left top no-repeat; padding:32px 48px;} div#container.contact div#main p{ color:#031e39; border-bottom:1px solid #cfdde7; width:100%; overflow:hidden; padding-bottom:10px; margin-bottom:12px;} div#container.contact div#main p.noborder{border-bottom:none;} div#container.contact div#main p label{width:100px; display:block; float:left; margin-right:30px;} div#container.contact div#main p label.large{width:276px; float:none; text-align:left;} div#container.contact div#main p span{display:block; color:#031e39;}