/********************************************************************************************** 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:helvetica,"microsoft sans serif",arial,sans-serif; background:#424a52; } h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; } a { color:#547e59; text-decoration:underline; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:920px; margin:0 auto; padding:88px 0px; } div#page{ background:#000; position:relative; } div.top-flower { position:absolute; right:-75px; top:-88px; width:300px; height:228px; text-align:center; } div.top-flower a { position:relative; top:-12px; font-size:14px; text-transform:uppercase; color:#fff; background:url(../images/nav-points.gif) left center no-repeat; padding-left:8px; } img.bottom-flower { position:absolute; left:-46px; bottom:-73px; } /*---- Header ----*/ div#header { margin-bottom:20px; } /*---- Main Navigation ----*/ div#main-navigation { float:left; margin-top:130px; position:relative; z-index:20; width:550px; float:left; } /*---- Content ----*/ div#content { } /*---- Main ----*/ div#main { float:left; width:510px; border:1px solid #cccccc; background:#424a52; padding:20px 13px;} /*---- Sidebar ----*/ div#sidebar-left { float:left; width:180px; background:url(../images/left-side-bg.jpg) left bottom no-repeat; padding-bottom:480px; margin-right:5px; } div#sidebar-right { float:right; width:176px; background:url(../images/right-side-bg.jpg) left top no-repeat; padding-top:350px; text-align:center; } /*---- Footer ----*/ div#footer { position:relative; height:50px; } /*------------------------------------------ // 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; width:199px; } div#header div.logo h1 a{ background:url(../images/logo.gif) 0 0 no-repeat; width:199px; height:0; padding-top:161px; display:block; overflow:hidden; } /*---- Header - Countries ----*/ div#countries { position:absolute; top:10px; left:356px; } div#countries ul { background:url(../images/arrow.gif) left center no-repeat; padding-left:10px; } div#countries ul li { float:left; margin:0px 5px; } /*---- Main Navigation ----*/ div#main-navigation ul li{ float:left; background:url(../images/nav-points.gif) left center no-repeat; padding-left:8px; margin-right:14px; } div#main-navigation ul li a { float:left; text-decoration:none; font-size:12px; color:#fff } /*---- Footer - Navigation ---*/ div#footer div#footer-navigation { text-align:center; margin:5px 0 10px; } div#footer div#footer-navigation ul li{ display:inline-block; background:url(../images/nav-points.gif) left center no-repeat; padding-left:8px; margin-right:14px; } div#footer div#footer-navigation ul li a { display:inline-block; text-decoration:none; font-size:12px; color:#fff } /*---- Header - Countries ----*/ div#footer div.countries { position:absolute; top:30px; left:356px; } div#footer div.countries ul { background:url(../images/arrow.gif) left center no-repeat; padding-left:10px; } div#footer div.countries ul li { float:left; margin:0px 5px; } /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ div#sidebar-left ul li { line-height:30px; border-bottom:1px solid #666666; font-size:12px; text-transform:uppercase; padding:0px 8px; } div#sidebar-left ul li a { color:#fff; } div#sidebar-left ul li a:hover{ text-decoration:none; } div#sidebar-right div.ad{ background:#ff0000; border:1px solid #fff; padding:0px 10px; width:134px; margin-bottom:12px; } div#sidebar-right div.ad div.offer{ border-bottom:1px solid #fff; padding-bottom:20px; margin-bottom:18px; } div#sidebar-right div.ad div.offer h4 { font-size:16px; color:#fff; margin-bottom:14px; line-height:24px; } div#sidebar-right div.ad p{ font-size:13px; color:#fff; line-height:20px; margin-bottom:12px; } div#sidebar-right div.ad p a { color:#597e59; text-decoration:underline; } div#sidebar-right div.ad div.bottom { border-bottom:1px solid #fff; padding-bottom:20px; margin-bottom:10px; } div#sidebar-right div.advisor{ background:url(../images/advisor.jpg) left top no-repeat; width:150px; padding-top:62px; } div#sidebar-right div.advisor a{ color:#000; font-size:13px; line-height:24px; } div#main h1{ text-transform:uppercase; font-size:16px; color:#fff; line-height:24px; margin-bottom:14px; } div#main h2{ font-size:14px; color:#ccc; line-height:20px; margin-bottom:14px; } div#main p, div#main span { font-size:12px; line-height:20px; color:#cccccc; margin-bottom:15px; } div#main a { text-decoration:underline; } div.left-column{ width:300px; float:left; } div.left-column p span { color:#ffffff; } div.left-column p a { color:#547e56; text-decoration:underline; } div.right-column{ width:200px; float:right; } div.right-column p { margin-bottom:10px; } div#slideshow { margin-bottom:30px; } div#slideshow p { color:#fff; }