/********************************************************************************************** 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(global.css); @import url(menu2.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#000; background:#edf1f5 url(../images/body-bg.jpg) left top repeat-x; font-family: Arial, Helvetica, sans-serif; } a{color:#2e78b9;} /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:980px; margin:0 auto; min-width:980px;} /*---- Header ----*/ div#header{position:relative; z-index:5;} /*---- Dash Board ----*/ div#dashboard{ width:100%; overflow:hidden; margin-bottom:67px;} /*---- Write Up ----*/ div#writeup{ width:100%; overflow:hidden;} /*---- Services ----*/ div#services{ background:url(../images/services/services-bg.jpg) left top repeat-x; padding:17px 14px 25px;} /*---- Content ----*/ div#content{position:relative; z-index:10; padding:13px 0px 78px 0px; background:#fff; width:100%; overflow:hidden; margin-bottom:14px; position:relative;} div#content img.photo{position:absolute; left:0px; bottom:0px; z-index:5;} /*---- Main ----*/ div#main { float:right; width:702px; padding:0px 35px 22px 5px; position: relative; z-index: 21; } div#main div.inner-main{ float:left; padding-left:20px;} div#main div.inner-session{ width:464px; float:left; padding-left:20px;} div#main div.inner-sidebar{ width:207px; float:right;} /*---- Sidebar ----*/ div#sidebar { float:left; width:208px; padding:43px 5px 190px 25px; background:#f5f5ec url(../images/content/sidebar/sidebar-bg.jpg) left top no-repeat;} /*---- Footer ----*/ div#footer{border-top:1px solid #d4dde8; padding:28px 0px 104px 0px;} /*------------------------------------------ // 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#container.home div#header h1 a.logo{ position:relative; width:526px; height:158px; display:block; position:relative; margin-left:-56px;} div#container.home div#header h1 a.logo span { position: absolute; top: 0; left: 0; background:url(../images/header/logo.jpg) 0 0 no-repeat; width:526px; height:160px; display:block; } div#header h1 a.logo{ position:relative; width:526px; height:160px; display:block; position:relative; margin-left:-85px;} div#header h1 a.logo span { position: absolute; top: 0; left: 0; background:url(../images/header/logo.jpg) 0 0 no-repeat; width:526px; height:160px; display:block; } /*---- Content ----*/ /*---- Content - Table1 ----*/ div#main div.inner-main table.table1{ width:100%; border:none; margin-bottom:32px; line-height: 19px;} div#main div.inner-main table.table1 th{width:60px; background:#1d79c2; font-size:120%; color:#fff; text-align:left; padding:10px 5px; border-bottom:1px solid #fff;} div#main div.inner-main table.table1 td{ font-size:120%; color:#fff; text-align:left; background:#234666; padding:10px 5px; border-bottom:1px solid #fff; } div#main div.inner-main table.table1 td strong { font-weight:bold; } /*---- Content - Table2 ----*/ div#main div.inner-main table.table2{ width:100%; border:none;} div#main div.inner-main table.table2 th{ font-size:140%; color:#fff; text-align:left; background:#234666; line-height:19px; padding:16px 13px; border-bottom:1px solid #fff;} div#main div.inner-main table.table2 td{ font-size:120%; color:#fff; background:#1d79c2; line-height:19px; padding:10px 5px; border-bottom:1px solid #fff; font-weight:bold; width:140px;} div#main div.inner-main table.table2 td.arrow{width:30px; padding:0px; text-align:center;} /*---- Content - Table3 ----*/ div#main div.inner-main table.table3{width:100%; border-bottom:1px solid #dadac3; border-top:1px solid #dadac3; margin-bottom:16px;} div#main div.inner-main table.table3 td {font-size:120%; color:#1d79c2; padding:5px; vertical-align:middle;} div#main div.inner-main table.table3 th {font-size:120%; color:#757575; text-align:left; vertical-align:middle;} div#main div.inner-main table.table3 td img{ vertical-align:middle; margin-right:10px;} div#main div.inner-main table.table3 td div.author{background:url(../images/content/main/small-bg.jpg) left top no-repeat; width:33px; height:36px; padding:0px 2px; } /*---- Content - Box1 ----*/ div#content div#main div.box1{ background:#1d79c2; padding:18px 20px; margin-bottom:12px; position:relative; z-index:10;} div#content div#main div.box1 h2{color:#f4f4eb; font-size:170%; line-height:18px; margin-bottom:25px;} div#content div#main div.box1 p{font-size:130%; font-style:italic; color:#f4f4eb; margin-bottom:25px; font-weight:bold;} /*---- Main - Breadcrumbs ----*/ div#main div#breadcrumbs{margin-left: 20px; margin-top:5px; margin-bottom:50px;} div#main div#breadcrumbs p{ font-size:120%; line-height:23px; color:#a3a391;} div#main div#breadcrumbs span{ color:#1d79c2; margin-right:5px; } div#main div#breadcrumbs span a{ color:#a3a391; } /*---- Main - Inner - Main ----*/ div#main div.inner-main h1{font-size:240%; color:#234666; line-height:31px; margin-bottom:14px; } div#main div.inner-main h2{font-size:175%; color:#1d79c2; line-height:29px; margin-bottom:12px; } div#main div.inner-main h3{font-size:160%; color:#1d79c2; line-height:26px; margin-top: 12px; margin-bottom:10px;} div#main div.inner-main h4{font-size:130%; color:#6d6d6d; line-height:23px; margin-bottom:8px; } div#main div.inner-main p{font-size:120%; color:#6d6d6d; line-height:21px; margin-bottom:20px;} div#main div.inner-main ul{ margin:0px 0px 20px 20px;} div#main div.inner-main ul li{ font-size:120%; list-style-type:disc; color:#6d6d6d; line-height:19px; margin-bottom:9px;} div#main div.inner-main ol{ margin:0px 0px 20px 24px;} div#main div.inner-main ol li{ font-size:120%; color:#6d6d6d; line-height:19px; margin-bottom:9px; list-style-type:decimal;} div#main div.inner-main blockquote{ font-size:120%; color:#6d6d6d; line-height:23px; margin-bottom:30px; font-style:italic;} /*---- Main - Inner Sidebar - Widgets ----*/ div#main div.inner-sidebar div#widgets div.box{ background:url(../images/content/main/widget-middle.gif) left top repeat-y;} div#main div.inner-sidebar div#widgets div.box div.box-top{background:url(../images/content/main/widget-top.jpg) left top no-repeat;} div#main div.inner-sidebar div#widgets div.box div.box-top div.box-bottom{background:url(../images/content/main/widget-bottom.gif) left bottom no-repeat; padding:42px 18px 16px 26px; margin-bottom:55px;} div#main div.inner-sidebar div#widgets div.widget{border-bottom:1px solid #c5ced1; margin-bottom:18px;} div#main div.inner-sidebar div#widgets div.widget.last{border-bottom:none;} div#main div.inner-sidebar div#widgets div.widget h2{color:#1d79c2; font-size:150%; line-height:23px; margin:0px 0px 16px 0px; font-family:Arial, Helvetica, sans-serif; font-style:normal;} div#main div.inner-sidebar div#widgets div.widget p{ line-height:16px; font-size:130%; color:#707067; margin-bottom:15px;} div#main div.inner-sidebar div#widgets div.widget li{ list-style-type: none; line-height:16px; font-size:125%; color:#707067; margin-bottom:12px;} div#main div.inner-sidebar div#widgets div.widget ul.bulleted li{ list-style-type: disc;} div#main div.inner-sidebar div#widgets div.widget img{margin-bottom:10px;} div#main div.inner-sidebar div#widgets div.widget small{font-size:120%; color:#6c6e5f; margin-bottom:16px; display:block;} div#main div.inner-sidebar div#widgets h2, div#main div.inner-sidebar div.quote h2 { margin-left:15px; font-family:Georgia, "Times New Roman", Times, serif; font-size:270%; color:#1d79c2; line-height:36px; font-style:italic; font-weight:normal;} /*---- Sidebar ----*/ div#sidebar h2 {font-size:170%; color:#234666; line-height:22px; margin-bottom:25px;} div#sidebar h3, div.sidebar > ul.rmRootGroup > li > a {font-size:140%; font-weight: bolder; color:#234666; line-height:22px; margin-bottom:5px;} /*---- Sidebar - Navigation ----*/ div#sidebar > ul li{margin-bottom:14px; overflow-y:hidden;} div#sidebar > ul li h3{background:url(../images/content/sidebar/arrow.gif) right center no-repeat; cursor:pointer; padding:5px 5px 5px 6px; display:block; font-size:140%; color:#234666; line-height:23px; letter-spacing:-1px; position:relative;} div#sidebar > ul li h3.ui-state-active { background:#fff url(../images/content/sidebar/arrow.gif) right center no-repeat; } div#sidebar > ul li h3.no-child{ background:none;} div.sidebar ul li{margin-bottom:14px; overflow-y:hidden;} div.sidebar ul.rmRootGroup > li > a {background:url(../images/content/sidebar/arrow.gif) right center no-repeat; cursor:pointer; padding:5px 5px 5px 6px; display:block; font-size:140%; color:#234666; line-height:23px; letter-spacing:-1px; position:relative;} div.sidebar ul.rmRootGroup > li > a.active { background:#fff url(../images/content/sidebar/arrow.gif) right center no-repeat; } div.sidebar ul.rmRootGroup > li > a.no-child{ background:none;} /*div.sidebar ul.rmRootGroup li {background:url(../images/content/sidebar/arrow.gif) right center no-repeat; cursor:pointer; padding:5px 5px 5px 6px; display:block; font-size:140%; color:#234666; line-height:23px; letter-spacing:-1px; position:relative;}*/ /*---- Sidebar - Navigation - Drop Down ----*/ div#sidebar > ul li ul.child{margin-bottom:14px;} div#sidebar > ul li ul.child li{margin-bottom:1px;} div#sidebar > ul li ul.child li a{background:none; font-size:120%; color:#686868; font-weight:normal; padding:6px 5px 5px 5px; line-height:15px; display:block;} div#sidebar > ul li ul.child li a.active,div#sidebar ul li ul.child li a:hover{background:#dadac2; text-decoration:none;} div.sidebar ul li ul.rmGroup{margin-bottom:14px;} div.sidebar ul li ul.rmGroup li{margin-bottom:1px;} div.sidebar ul li ul.rmGroup li a{background:none; font-size:120%; color:#686868; font-weight:normal; padding:6px 5px 5px 5px; line-height:15px; display:block;} div.sidebar ul li ul.rmGroup li a.active, div.sidebar ul li ul.rmGroup li a:hover{background:#dadac2; text-decoration:none;} /*---- Footer ----*/ div#footer div.footnote{ width:100%; overflow:hidden;} div#footer div.footnote div.copyright{float:left; font-size:120%; color:#a3a3a2; line-height:29px;} div#footer div.footnote p.design a{float:right; line-height:29px; color:#b0c0cb; font-size:120%;} div#footer div.footnote p.design a:hover{text-decoration:none;} /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Flash ----*/ div.flash{width:980px; height:310px; position:relative; z-index:9; margin:0; padding:0;} /*---- Dash Board ----*/ div#dashboard div.section{ float:left; width:318px; height:134px; margin-right:13px; padding:28px 20px 0px 115px; width:183px; } div#dashboard div.section h1{font-size:190%; color:#3c576f; line-height:22px; font-weight:normal; margin-bottom:15px;} div#dashboard div.section p{font-size:130%; color:#747368; line-height:16px;} div#dashboard div#assessment.section{background:url(../images/dashboard/assessment.jpg) left top no-repeat; } div#dashboard div#performence.section{background:url(../images/dashboard/performence.jpg) left top no-repeat; } div#dashboard div#videos.section{background:url(../images/dashboard/videos.jpg) left top no-repeat; margin-right:0px;} /*---- Write Up ----*/ div#writeup div.left{ background:#496983 url(../images/writeup/box.jpg) left top no-repeat; float:left; position:relative; width:300px; padding:20px 20px 0px 0px;} div#writeup div.left img.new{ position:absolute; left:0px; top:0px;} div#writeup div.left img{float:left; margin-right:5px;} div#writeup div.left div.details{ float:right; width:178px;} div#writeup div.left div.details h1{ font-size:190%; font-weight:normal; color:#fff; line-height:18px; margin-bottom:16px;} div#writeup div.left div.details p{font-size:120%; color:#fff; line-height:18px; margin-bottom:10px;} div#writeup div.left div.details a{color:#68cfff;} div#writeup div.right{width:514px; float:right;} div#writeup div.right h1{color:#475563; font-size:190%; font-weight:normal; line-height:20px; margin-bottom:12px;} div#writeup div.right p{margin-bottom:18px; font-size:120%; color:#666666; line-height:18px;} /*---- Services ----*/ div#services h1{ font-size:190%; color:#67798b; line-height:24px; font-weight:normal; margin-bottom:16px;} div#services ul{width:100%; overflow:hidden;} div#services ul li{width:214px; float:left; margin:0px 26px 17px 0px; font-size:120%; color:#747368; line-height:18px;} div#services ul li.last{margin-right:0px;} /*------------------------------------------ // 5 INNER PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Main - Inner - Main ----*/ div#main div.inner-main div.photo{float:right; background:url(../images/content/main/photo-bg.jpg) left top no-repeat; width:242px; height:256px; padding:3px 9px; margin-left:10px;} /*------------------------------------------ // 6 INNER1 PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Main - Inner - Main ----*/ div#main div.inner-main p.next a{background:#1d79c2; padding:10px 20px; font-size:170%; color:#f4f4eb; line-height:16px; float:left; position:relative; z-index:12;} div#main div.inner-main p.next a:hover{text-decoration:none;} /*------------------------------------------ // 6 PAGE SPECIFIC STYLES //------------------------------------------*/ ul.buybooks { list-style-type: none; } ul.buybooks li { display: inline-block; text-align: center; } ul.buybooks img { display: block; text-align: center; } ul.buybooks span { display: block; text-align: center; } div.bookphoto { float: right; }