/*@import url("/stylesheets/forms.css"); */ /*============================================================================ [Screen Stylesheet] ============================================================================== Project: Inovo Version: 1.0 Last Modified: 10/08/2010 Assigned to: Meili Chen - 10/08/2010 Primary use: Page Layouts - one, two & three colum layouts ==============================================================================*/ /*============================================================================= [Table of Contents] =============================================================================== A. Global Reset B. Global Formatting C. Layout 1. Body 1.1. Skip to content / a#skip 2. Layout wrapper / div#wrapper 2.1. Header / div#header 2.1.1 Logo / h1 2.1.2 Global navigation / div#globalNav 2.2. Banner section / div#bannerWrapper (home page only) 2.3. Middle section / div#middle 2.3.1 Primary column / div#primeCol 2.3.1.1 Main content 2.3.1.1.1 page title / div#pageTitle 2.3.1.1.2 about inovo /div.aboutInovo panel (home) 2.3.1.1.3 subpage title /h3 2.3.1.1.4 contact us page div.addressInfo(address info) 2.3.1.1.5 our clients .clientsList 2.3.1.1.6 our team .teamList 2.3.2 Second column / div#secondCol 2.3.2.2 default sidebar item /div.sidebar 2.3.2.1 news list .newsEvents 2.3.2.3 approach .approcah 2.3.2.4 circle photos div.circlePhotos 2.3.2.5 blue box .blueBox 2.3.2.6 grey box /div.greyBox 2.3.2.7 light grey box /div.lightGreyBox 2.3.3 Third column / div#thirdCol 2.3.3.1 Clients Say /div.clientsSay (home page) 2.4 Footer / div#footer 2.4.1 Footer navigation / ul#footNav 2.4.2 Footer copyright / div.copyright ===============================================================================*/ /*============================================================================== [Color codes] ================================================================================ #fff white (body background) #000 black (body text) #006699 blue {default lin, glogal nav} #006633 blue {home panel title} #f06131 orange {default hover, global nav vover color} #ff6633 orange {news events date color} #666666 grey {team title } #7f7f7f home panel title border } ==================================================================================*/ /*================================================================================= A. GLOBAL RESET ===================================================================================*/ body {font: 62.5%/1.4 Arial, verdana, Helvetica,Jamrul,sans-serif; background: #fff; color: #000; margin: 0; padding: 0;} p, h1, h2, h3, h4, h5, h6, fieldset, form, label, input, textarea, legend, dl, dt, dd, table, caption, th, td, blockquote, cite { margin: 0; padding: 0; font-size: 1em;} ul, ol, li, ul *, ol * {font-size: 1em;} input, textarea {font-family: Arial,verdans,Helvetica,Jamrul,sans-serif;} textarea {overflow: auto;} table {border-collapse: collapse; margin-bottom: 2em;} td, th {padding: 0.1em 1em; border: 1px solid #999; } img {border: 0;} acronym, abbr {border-bottom: 1px dotted; cursor: help;} cite {font-style: normal;} :focus {outline: 0;} /*==================================================================================== B. GLOBAL FORMATTING =====================================================================================*/ .clear {clear: both; height: .001em; font-size: .001em;} .left {float: left; display: inline;} .right {float: right; display: inline;} .center {text-align: center;} .block {display: block;} .bld {font-weight: bold;} .dottedBorder {border-bottom: 1px dotted #3366cc;} /* dotted horizental line */ .imgRight {float: right; margin: 5px 0 8px 8px;} .imgLeft {float: left; margin: 5px 8px 8px 0;} .orangeTxt {color: #d7400d; font-weight: bold;} a {color: #006699; text-decoration: none;} a:hover {color: #f06131;} h1 {font-size: 1.2em;line-height: 120%;} h2 {font-size: 1.1em;line-height: 120%;} h3 {font-size: 1em; } h4 {font-size: 0.9em;} h5 {font-size: 0.8em;} h6 {font-size: 0.7em;} h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;} hr {border: none; margin: 15px 0; background: #d1d9da; padding: 0; height: 1px;} .nav, .nav ul {margin: 0; padding: 0; list-style: none;} ul.circle {list-style: none; margin: 10px 0; padding: 0;} ul.circle li {list-style: none; background: url(/images/background/arrow_blue.jpg) no-repeat 0 50%; margin: 0 0 7px 0; padding: 0 0 0px 15px; line-height: 120%;} ul.circle li:hover {background: url(/images/background/arrow_orange.jpg) no-repeat 0 50%;} ul.red {list-style: none; margin: 10px 0; padding: 0;} ul.red li {list-style: none; background: url(/images/background/red_dot.jpg) no-repeat 0 0.5em; margin: 0; padding: 0 0 7px 12px; line-height: 120%;} /*====================================================================================== C. LAYOUT * =======================================================================================*/ /*-------------------------------------------------------------------------------------------- 1. Body / body ----------------------------------------------------------------------------------------------*/ body {background: #266e9d url(/images/background/body_bg.jpg) repeat-x 0 0; } /* 1.1. Skip to content / a#skip */ #skip {position: absolute; top: -1000px;} /*------------------------------------------------------------------------------------------ 2. Layout Wrapper ---------------------------------------------------------------------------------------------*/ #wrapper {color: #000; font-size: 1.3em; margin: 20px auto; padding: 20px 30px; width: 932px; border: 1px solid #000; background: #fff;} #wrapper p {margin-bottom: 1em!important;} /*......................................................................... 2.1. Header / div#header ...........................................................................*/ #header {background: #fff; width: 100%; height: auto; margin: 0 0 5px 0; overflow: hidden;} /* 2.1.1 logo / #logo */ #logo {float: left; width: 250px; overflow: hidden; } #logo h1 {height: 64px; width: 214px; margin: 0; padding: 0; background: url(/images/background/client_logo.jpg) no-repeat; text-indent: -9000px; float: left; } #logo h1 a {display: block; height: 64px; width: 214px; background: url(/images/background/client_logo.jpg) no-repeat;} #logo h1 a:hover {border-bottom: none;} /* 2.1.2. Global navigation / div#globalNav */ #globalNav {width: 650px; font: 14px century Gothic, verdana, arial, sans-serif; margin: 15px 0 0 0; display: block; float: right; text-align: right;} #globalNav ul {float: right; padding: 10px 0; background: url(/images/navs/global_nav_bg.gif) repeat-x 0 100% !important;} #globalNav ul a {display: block; line-height: 100%;} #globalNav ul li {float: left; display: inline; /* otherwise there are gaps between each nav item */ margin-right: 3px;} #globalNav ul li a{font-weight: bold; padding: 5px 0px 5px 25px;} #globalNav ul li a:hover, #globalNav ul li.current a {color:#f06131;} /*.......................................................................................... 2.2. Banner section / div#banner ............................................................................................. */ #banner {background: url(/images/background/header_curvy_line.jpg) no-repeat 0 0; width: 932px; height: 46px;} #home #banner {width: 100%; position: relative; margin-bottom: 15px; height: 297px; background: #fff url(/images/background/banner_bg.jpg) no-repeat 0 0; padding: 0px; } #home #banner img {} /* do not remove this; otherwise there will be a gap on the bottom of the photo on the firefox */ #home #banner .link {width: 400px; position: absolute; bottom: 40px; left: 30px; } #home #banner .link h2 {height:51px; width: 392px; margin: 0; padding: 0; background: url(/images/background/banner_link_off.jpg) no-repeat 0 0; text-indent: -9000px; float: left; } #home #banner .link h2 a {display: block; height:51px; width: 392px; background: url(/images/background/banner_link_off.jpg) no-repeat 0 0;} #home #banner .link h2 a:hover {background: url(/images/background/banner_link_over.jpg) no-repeat 0 0;} /*................................................................................................ 2.3. Middle section / div#middleOuter, #middleInner ..................................................................................................*/ #middle {float: left; margin: 30px 0 25px 0; padding: 0 0 20px 0; overflow: hidden; width: 850px; background: url(/images/background/content_body_bg.jpg) repeat-x 0 0;} #home #middle {width: 935px; margin-top: 10px; padding-top: 0;background: url(/images/background/home_content_body_bg.jpg) repeat-y 0 10px; } /* 2.3.1 Primary column / div#primeCol */ #primeCol { float: left; display: inline; margin-left: 10px; width: 570px; overflow: hidden;} .oneCol #primeCol {width:100%; margin-left: 0;} .twoCol #primeCol {float: left; width: 570px;} .threeCol #primeCol { width: 570px;} #home #primeCol {width: 223px; margin-left: 0; margin-right: 2px; padding: 0 15px;} /* 2.3.1.1 Main content */ #primeCol #mainContent { margin: 30px 0 0 0; display: block; overflow: hidden; } #home #primeCol #mainContent {margin: 0; padding: 0px; } /* 2.3.1.1.1 Page Title / h1#pageTitle */ h1#pageTitle {color: #f06131; font-family: arial,verdana,sans-serif; font-size: 17px; margin: 20px 0px .2em 0px; padding: 4px 10px 5px 0px;} #mainContent ul li {margin-bottom: 8px;} #results h1#pageTitle, #about h1#pageTitle {margin-left: 280px;} /* 2.3.1.1.2 About Inovo (home page)*/ .aboutInovo {} .aboutInovo h2 {font: bold 17px Myriad Pro,verdana,arial,sans-serif; border-bottom: 1px dotted #7f7f7f; color: #2e7db1; margin: 0 0 15px 0; padding: 0 0 5px 0;} #home h2 {font: bold 17px Myriad Pro,verdana,arial,sans-serif; border-bottom: 1px dotted #7f7f7f; color: #2e7db1; margin: 0 0 15px 0; padding: 0 0 5px 0;} .aboutInovo ul.circle li a {color: #000;} .aboutInovo ul.circle li a {color: #000;} /* 2.3.1.1.3 sub title blue subtitle */ h3 {color: #0582c7;} /* 2.3.1.1.4 contact us page */ .addressInfo {margin-top: -20px; width: 260px; padding-top: 70px;padding-right: 120px; background: url(/images/content/contact_circle.jpg) no-repeat 0 0;} .email { padding: 5px 0 5px 30px; background: url(/images/background/mail_icon.jpg) no-repeat 0 0;} /* 2.3.1.1.5 Our Clients list */ ul.clientsList {list-style: none; margin: 30px; padding: 0; text-align: center; overflow: hidden;} ul.clientsList li {list-style: none; float: left; margin-bottom: 5px; vertical-align: middle; padding: 0; margin: 0; height: 70px; width: 160px;} ul.clientsList li img {margin: 0 auto;vertical-align: middle;} /* 2.3.1.1.6 Our Team */ .teamListContent {margin-left: 280px; margin-bottom: 30px;} .teamBio{clear: both; width: 100%; overflow: hidden; margin: 0px 0 15px 0; display: block; background: url(/images/background/result_case_bg.gif) repeat-x 0 0;} .teamBio h3 {margin-left: 280px;margin-top: 10px;} .teamBioContent {margin-left:280px; margin-top: 20px; } .teamPhoto {margin: 0px auto 0 auto; width: 280px; display: block; float: left;} .teamPhoto img {margin: -8px auto 20px 35px; text-align: center; } ul.teamList {list-style: none; margin: 20px 0 10px 0; padding: 0; overflow: hidden;} ul.teamList li {list-style: none; float: left; width: 220x; height: 110px;} ul.teamList li img {float: left; max-width: 70px; margin-right: 8px;} ul.teamList li:hover img {opacity:0.5;filter:alpha(opacity=50)} ul.teamList li .desc {float: left; margin-top: 10px; width: 117px;} ul.teamList li .desc .name {font-weight: bold;} ul.teamList li .desc .name a {color: #000; font-size: 12px;} ul.teamList li .desc .name a:hover {color: #f06131;} ul.teamList li .desc .title {font-style: oblique;} .backTeam {font-size: 11px; margin-bottom: 15px;font-weight: bold; } .teamTitle {font-style: oblique; color: #666;margin-bottom: 15px;} .emailTeam {width: 150px; float: right; margin-bottom: 15px;} .emailTeam span {padding-left: 20px; background: url(/images/background/mail_icon.gif) no-repeat 0 50%;} .emailLine {margin-bottom: 20px; overflow: hidden;} .backTop {text-align: right; clear: both; display: block;} /* Our results */ .resultContent {margin-left: 280px; margin-bottom: 30px;} .resultCase {clear: both; width: 100%; overflow: hidden; margin: 0px 0 15px 0; display: block; background: url(/images/background/result_case_bg.gif) repeat-x 0 0;} .resultCase h3 {margin-left: 280px;margin-top: 10px;} .caseContent {margin-left: 280px; margin-top: 20px; } .casePhoto {margin: 0px auto 0 auto; width: 270px; display: block; float: left;} .casePhoto img {margin: -8px auto 20px 35px; text-align: center; } /* 2.3.2 Second column / div#secondCol */ #secondCol {float: left; display: inline; width: 200px; padding: 0 35px; overflow: hidden; } .oneCol #secondCol {display: none;} .twoCol #secondCol {margin-left: 0;} .threeCol #secondCol {} #home #secondCol {width: 426px; margin-right: 25px; padding: 0;} #contact #secondCol, #clients #secondCol{padding-top: 30px;} /* 2.3.2.1.2 sidebar */ .sidebar {margin-bottom: 15px;} .sidebar h2 {margin: 0; padding: 0;} /* 2.3.2.1 news & events (home) */ .newsEvents {} .newsEvents h2 {font: bold 17px Myriad Pro,verdana,arial,sans-serif; border-bottom: 1px dotted #7f7f7f; color: #ff6633; margin: 0 0 15px 0; padding: 0 0 5px 0;} .newsEvents .photo {float: left; width: 110px;} .newsEvents .photo img {max-width: 85px;} .newsEvents .desc {float: left; width: 315px;} .newsEvents ul {margin: 0; padding: 0; list-style: none; clear: both; overflow: hidden; display: block;} .newsEvents ul li {list-style: none; margin: 0 0 25px 0;} .newsEvents .date {color: #ff6633; font-weight: bold;} /* 2.3.2.1.3 photo on approach sidebar */ .approach {margin-bottom: 15px;} .approach h2 {margin: 0; padding: 0;} .approach img {margin: 0 auto 15px auto; display: block; text-align: center; } /* 2.3.2.1.4 circle photos */ .circlePhotos {margin-bottom: 15px;} .circlePhotos h2 {margin: 0; padding: 0;} .circlePhotos img {margin: 0 auto 15px auto; display: block; text-align: center; } /* 2.3.2.1.5 blue box */ .blueBox {width: 179px; font-size: 1.03em; font-weight: bold; margin-bottom:20px; background: url(/images/background/blue_box_top.jpg) no-repeat 0 0; padding-top: 25px;} .blueBox h2 {margin: 0; padding: 0;} .blueBox .inner {color: #fff;padding: 0 12px 15px 12px; background: url(/images/background/blue_box_bottom.jpg) no-repeat 0 100%;} /* 2.3.2.1.6 grey box */ .greyBox {width: 179px; font-size: 1.03em; margin-bottom:20px; background: url(/images/background/grey_box_top.jpg) no-repeat 0 0; padding-top: 25px;} .greyBox h2 {margin: 0; padding: 0;} .greyBox .inner {padding: 0 12px 15px 12px; background: #d7d6d6 url(/images/background/grey_box_bottom.jpg) no-repeat 0 100%;} /* 2.3.2.1.7 light grey box */ .lightGreyBox {width: 179px; font-size: 1.03em; margin-bottom:20px; background: url(/images/background/light_grey_box_top.jpg) no-repeat 0 0; padding-top: 25px;} .lightGreyBox h2 {margin: 0; padding: 0;} .lightGreyBox .inner {padding: 0 12px 15px 12px; background: #e7e7e7 url(/images/background/light_grey_box_bottom.jpg) no-repeat 0 100%;} /* 2.3.3 Third column / div#thirdCol */ #thirdCol {width: 220px; overflow: hidden;} .oneCol #thirdCol {display: none;} .twoCol #thirdCol {display: none;} .threeCol #thirdCol {display: none;} #home .threeCol #thirdCol {display: block;} #home #thirdCol {width: 200px;padding-left: 25px; } #home .twoCol #thirdCol {display: none;} /* 2.3.3.1 home motivation */ .clientsSay {} .clientsSay h2 {font: bold 17px Myriad Pro,verdana,arial,sans-serif; border-bottom: 1px dotted #7f7f7f; color: #2e7db1; margin: 0 0 15px 0; padding: 0 0 5px 0;} .clientsSay .client {font-style: oblique;} .clientsSay ul.circle li a {color: #000;} /*.................................................................................. 2.4 Footer / div#footer .................................................................................*/ #footer {clear: both; color: #666; display: block; overflow: hidden; margin: 0 0 20px 0; padding: 15px 0px; border-top: 1px solid #969696; } /* 2.4.1 Footer navigation / ul#footNav */ #footNav {overflow: hidden; width: 640px; float: left; } #footNav ul {float: left; margin: 0; padding:0; background: url(/images/background/foot_nav_divider.gif) no-repeat 0% 50%;} #footNav ul li {display: inline; padding: 0px 15px; background: url(/images/background/foot_nav_divider.gif) no-repeat 100% 50%;} #footNav ul li a {font-size: 12px; color: #000; margin: 0;} #footNav ul li a:hover, #footNav ul li.current a {text-decoration: underline; font-weight: normal;} /* 2.4.2 Footer copyright / div.copyright */ #footer .copyright {color: #000; font-size: 11px; float: right; text-align: right; width: 280px; overflow: hidden;}