/*------------------------------------------------------------------ [Screen Stylesheet] Project: AeroStrategy Version: 1.2 Last change: 09/17/08 [sidebar adjustments for cms] Assigned to: Karl Kasischke Primary use: Page Layouts - one, two & three column layouts -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] A. Global Reset B. Typography 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 / ul#globalNav 2.1.3. Search box / form #searchbox 2.2. Middle section / div#middle 2.2.1. Primary column / div#primeCol 2.2.1.1. Banner / div#banner 2.2.1.2. Breadcrumbs / div#breadcrumbs 2.2.1.3. Main content / div#mainContent 2.2.1.4. Secondary content / div#secondContent 2.2.2. Second column / div#secondCol 2.2.2.1 Local subnavigation / ul#subNav 2.2.2.2. Sidebar box / div.sidebar 2.3. Footer / div#footer 2.3.1. Footer navigation / ul#footNav 2.3.2. Copyright information / p#copy 3. Interactive Chart / table#interactive -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Color codes] #fff white: (globalNav, subNav, h2, footer text) #000 black: (page text) #ccc gray #1: (h3 border) #e8efef gray #2: (sidebar background) #5a2a8a purple #1: (logo, footer, subNav .current backgrounds, h3, links) #947db8 purple #2: (home h2 background) #9ea1cb purple #3: (search background, main bottom border) #d8d9ea blue-gray: (select background) #366 green #1: (globalNav, suvNav h3 backgrounds, main top border) #658989 green #2: (subNav backgrounds) #039 blue #1: (breadcrumbs) #8b94be blue #2: (home h2 background) #b7e0e0 blue-green: (search submit button background) -------------------------------------------------------------------*/ /*------------------------------------------------------------------ A. GLOBAL RESET -------------------------------------------------------------------*/ body {font: 62.5%/1.3 verdana,arial,geneva,lucida,sans-serif; background: #fff; color: #000; margin: 0; padding: 0;} p, h1, h2, h3, h4, h5, h6, /*fieldset,*/ form, label, input, textarea, select /*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, select {font-family: verdana,arial,geneva,lucida,sans-serif; font-size: inherit;} textarea {overflow: auto;} /*fieldset {border: solid 0 transparent;}*/ table {border-collapse: collapse;} a img {border: 0;} acronym, abbr {border-bottom: 1px dotted; cursor: help;} cite {font-style: normal;} :focus {outline: 0;} .nav, .nav ul {margin: 0; padding: 0; list-style: none;} .clear {clear: both;} .clear-l {clear: left;} .clear-r {clear: right;} .left {float: left; display: inline;} .right {float: right; display: inline;} .center {text-align: center;} .block {display: block;} form input#subject {display:none;} /*------------------------------------------------------------------ B. TYPOGRAPHY -------------------------------------------------------------------*/ strong, #searchbox input, a, #footer .current a {font-weight: bold;} #searchbox, .select select, .sidebar, #breadcrumbs {font-size: 1.1em;} a, .sidebar h3, #home .blurb h5, .highlight {color: #5a2a8a; text-decoration: none;} #globalNav a:hover, #subNav a:hover {text-decoration: none;} a:hover {text-decoration: underline;} h1 {font-size: 1.9em;} h2 {font-size: 1.7em;} h3 {font-size: 1.2em;} h4 {font-size: 1.1em;} h5 {font-size: 1.0em;} h6 {font-size: 0.9em;} #subNav a, #globalNav a, #mainContent, #footer, #home .blurb {font-size: 1.2em;} #subNav a, h2, .dropdown a, #breadcrumbs a, #footer a {font-weight: normal;} #subNav a, #globalNav a, #subNav h3, h2, #footer, #footer a, #subNav a:hover .highlight {color: #fff;} #breadcrumbs, #breadcrumbs a {color: #039;} #mainContent .select {font-size: 0.8333em;} .sidebar.select {font-size: 0.9090em;} #mainContent {line-height: 1.5;} .sidebar.select h3 {color: #000;} #home #mainContent {font-size: 1.0em;} #contactMap h2 {background: none; margin-bottom: 1em; font-size: 1.1em; color: #5A2A8A; font-weight: bold;} /*------------------------------------------------------------------ C. LAYOUT -------------------------------------------------------------------*/ /* 1. Body / body */ body {} /* 1.1. Skip to content / a#skip */ #skip {position: absolute; top: -1000px;} /* 2. Layout wrapper / div#wrapper */ #wrapper {position: relative; left: 50%; margin-left: -459px; width: 918px; padding: 16px 0;} /* 2.1. Header / div#header */ #header {height: 117px; width: 918px; position: relative; margin-bottom: 9px; z-index: 10; background: url(/images/dots.gif) repeat-x bottom;} /* 2.1.1. Logo / h1 */ #top {height: 76px; width: 100%; background: #5a2a8a url(/images/top_bg.jpg) repeat-y;} h1 {height: 76px; width: 245px; background: url(/images/logo.gif) no-repeat; text-indent: -9000px; z-index:3; position: absolute;} h1 a {display: block; height: 76px; width: 245px; background: url(/images/logo.gif) no-repeat;} /* 2.1.2. Global navigation / ul#globalNav */ #globalNav {width: 681px; position: absolute; bottom: 1px; left: 0px; z-index: 5;} /* * html #globalNav {margin-bottom: -1px;} KLUDGE: fix spacing in IE 6*/ #globalNav ul {overflow: hidden;} #globalNav li {float: left;} #globalNav a {display: block; height: 34px; line-height: 34px; background: #366 url(/images/navtab_tl.gif) no-repeat top left; width: 107px; margin-right: 4px;} #globalNav a span {display: block; background: url(/images/navtab_tr.gif) no-repeat top right; text-align: center;} #globalNav .careers {margin: 0;} #globalNav a:hover, #globalNav .current a, #globalNav li:hover a, #globalNav li.sfhover a {background: #5a2a8a url(/images/navtab_tl_over.gif) no-repeat top left;} #globalNav a:hover span, #globalNav .current a span, #globalNav li:hover a span, #globalNav li.sfhover a span {background: url(/images/navtab_tr_over.gif) no-repeat top right;} #globalNav .about_aerostrategy , #globalNav .consulting_expertise {width: 155px;} #globalNav .our_thinking {width: 124px;} #globalNav .news_events {width: 124px;} .dropdown {position: absolute; width: 200px; left: -999em; background: #1c6a6a; filter:alpha(opacity=90); opacity: .90; -moz-opacity:.90; z-index: 99; margin-left: 4px; border-top: 1px dotted #fff; } #globalNav .dropdown li {float: none; border-bottom: 1px dotted #fff;} #globalNav .dropdown a {height: auto; width: 100%; line-height: 2; margin: 0; padding-left: 10px; text-indent: 0;} #globalNav li:hover .dropdown, #globalNav li.sfhover .dropdown {left: auto;} #globalNav li:hover .dropdown a, #globalNav li.sfhover .dropdown a {background: #366;} #globalNav li:hover .dropdown a:hover, #globalNav li:hover .dropdown .current a, #globalNav li.sfhover .dropdown a:hover, #globalNav li.sfhover .dropdown .current a {background: #5a2a8a;} #globalNav li:hover, #globalNav li.hover {position: static;} /*fix for potential 'sticky' menu items in IE 7*/ /* 2.1.3. Search box / form #searchbox */ #searchbox {width: 228px; height: 34px; line-height: 34px; position: absolute; bottom: 1px; right: 0; background: #9ea1cb url(/images/search_tl.gif) no-repeat top left;} #searchbox div {background: url(/images/search_tr.gif) no-repeat top right;} * html #searchbox div {padding-top: 8px;} #searchbox input {border: 1px solid #666; vertical-align: baseline;} #searchbox #query {width: 175px; margin: 0 5px 0 13px; padding: 1px;} #searchbox .submit {background: #b7e0e0; cursor: pointer; *position: relative; *top: 1px;} /* 2.2. Middle section / div#middle */ #middle {overflow: hidden; width: 918px; border-top: 3px solid #366; border-bottom: 4px solid #9ea1cb; padding: 4px 0 5px; margin: 9px 0 5px;} #home #middle {border-top: 0; padding-top: 0; position: relative; background: url(/images/dots_vert.gif) repeat-y 340px 220px;} /* 2.2.1. Primary column / div#primeCol */ #primeCol {float: right; display: inline; width: 731px;} .oneCol #primeCol {float: none; width: 100%;} .twoCol #primeCol {float: right; width: 731px;} .threeCol #primeCol {} #home #primeCol {float: left; display: inline; width: 681px;} h2 {height: 26px; background: #8b94be url(/images/h2_bg.gif) repeat-x top; line-height: 26px; padding-left: 10px;} #home #mainContent h2 {background: #947db8 url(/images/h2_bg_purple.gif) repeat-x top;} #home #mainContent, #home #secondContent {border-top: 3px solid #366; margin-top: 5px; padding-top: 5px;} #home #mainContent img, #home #secondContent img {margin: 16px 10px 10px;} #home .blurb {/*width: 214px;*/ margin: 16px 10px; } #home .blurb h5 {display: inline; /*border-bottom: 1px solid #ccc; padding-bottom: 1em;*/} #home .blurb h5 p {display: inline;} /* 2.2.1.1. Banner / div#banner */ #banner {overflow: hidden; margin: 0 0 5px 0; position: relative; height: 208px; width: 681px; background: #fff;} /*#banner > div {width: 100%;}*/ /* 2.2.1.2. Breadcrumbs / div#breadcrumbs */ #breadcrumbs {height: 26px; line-height: 26px; background: url(/images/dots.gif) repeat-x bottom; padding-left: 10px;} /* 2.2.1.3. Main content / div#mainContent */ #mainContent {margin: 15px 10px; overflow: hidden;} .threeCol #mainContent {float: left; display: inline; width: 450px;} #mainContent p, #mainContent ul, #mainContent ol {margin-top: 1.5em; margin-bottom: 1.5em;} #mainContent img.left {margin-right: 25px; margin-bottom: 10px;} #mainContent img.right {margin-left: 25px; margin-bottom: 10px;} #home #mainContent {float: left; display: inline; width: 335px; margin: 0 5px 30px 0;} #team_select {width: 250px; height: 60px; background: #d8d9ea; padding: 0 10px 10px; margin: 45px 0 0 20px;} #team_select h3 {padding: 8px 0;} .news_item {border-bottom: 1px dotted #333; margin: 1em 0;} .news_item span.right {margin: 5px 10px;} #mainContent .eventListing {margin: 1.5em 0;} #mainContent .eventListing p {margin-top: 0;} #mainContent label {display: block; float: left; width: 15em; text-align: right; margin-right: 1.5em; font-weight: bold;} #mainContent input {width: 200px;} #mainContent textarea {width: 300px; height: 100px;} #mainContent input:focus, #mainContent textarea:focus {background: #ffc;} #mainContent input[type="text"], textarea {border: 1px solid #999;} #mainContent input.submit {width: auto; margin-left: 16.5em;} .form-field label em, span.required, span.message {font-size: 0.75em; color: #900; font-weight: bold;} span.required {margin-left: 2.5em;} span.message {margin-left: 1em;} fieldset {background: #f4f4f4; padding-bottom: 1.5em; margin: 1.5em;} legend {background: #ddd; font-weight: bold;} .speeches li p, .commentaries li p {display: inline;} .speeches li {margin-bottom: 1em;} #mainContent .speeches {margin-top: 0;} #mainContent .commentaries {list-style: none;} #addressed_markets #mainContent {margin: 15px 0;} #addressed_markets #mainContent p {margin-left: 10px; margin-right: 10px;} form#contact {width: 440px; float: right; display: inline;} form#contact fieldset {margin: 1.5em 0;} #mainContent form#contact label {width: 5em;} #mainContent #addresses {float: left; width: 230px;} #mainContent #contactMap {float: right; width: 445px; padding-left: 25px;} #mainContent #contactMap img {margin-left: 0;} #sitemap ul ul a {font-weight: normal;} /* 2.2.1.4. Secondary content / div#secondContent */ #secondContent {} .oneCol #secondContent {display: none;} .twoCol #secondContent {display: none;} .threeCol #secondContent {float: right; display: inline; width: 236px; margin-top: 25px;} #secondContent p, #secondContent ul, #secondContent ol {margin-top: 1.5em; margin-bottom: 1.5em;} #home #secondContent {float: right; display: inline; width: 335px; margin: 0 0px 30px 5px;} /* 2.2.2. Second column / div#secondCol */ #secondCol {float: left; display: inline; width: 182px;} .oneCol #secondCol {display: none;} .twoCol #secondCol {} .threeCol #secondCol {} #home #secondCol {float: right; display: inline; width: 229px; margin-top: -5px; position: relative; top: 5px; right: 0;} #secondCol img.left {margin: 5px;} #secondCol img.right {margin-left: 25px; margin-bottom: 10px;} /* 2.2.2.1 Local subnavigation / ul#subNav */ #subNav {width: 182px; margin-bottom: 5px; line-height: 2.5;} #subNav h3, #subNav a {padding-left: 15px; display: block; margin-top: 1px; background: url(/images/dots.gif) repeat-x bottom;} #subNav h3 {background-color: #366;} #subNav .child li {line-height: 1.5;} #subNav .child a {padding-left: 30px;} #subNav ul li a {background-color: #658989; padding-top: 0.5em; padding-bottom: 0.5em;} #subNav .child.expanded li a {background-color: #99b2b2;} #subNav a:hover, #subNav .current a, #subNav .current .child a:hover, #subNav .child .current a, #subNav .child.expanded li a:hover, #subNav .child.expanded li.current a {background-color: #5a2a8a;} #subNav .child {display: none;} #subNav .expanded {display: block;} * html #subNav li a {height: 1%;} /* fix for list item spacing and clickable area IE 6*/ /* 2.2.2.2. Sidebar box / div.sidebar */ .sidebar {background: #e8efef url(/images/dots-gap.gif) repeat-x bottom; margin: 5px auto; padding: 1em 8px;} .sidebar:last-child {background-image: none;} .sidebar h3 {padding-bottom: 0.5em; border-bottom: 1px solid #ccc; margin-bottom: 0.5em;} .sidebar p, .sidebar ul, .sidebar ol {margin: 1em 0;} .sidebar.image {padding: 0; background-color: #fff;} .sidebar.select {background-color: #d8d9ea; padding-bottom: 20px; margin-top: 0;} .sidebar.select h3, .sidebar.image h3 {text-align: center; float: none; border: 0; margin-bottom: 0;} .sidebar.image h3 {display: none;} .select select {width: 100%;} .sidebar.select select {margin-top: 1em;} #home .white {background-color: #fff;} #home .sidebar h3.left {margin-left: -4px; min-width: 119px; width: 200px;} #home .sidebar.select h3 {text-align: left;} /* 2.3. Footer / div#footer */ #footer {overflow: hidden; margin-top: 5px; width: 918px; background: #5a2a8a url(/images/dots.gif) repeat-x top; height: 56px; line-height: 56px;} /* 2.3.1. Footer navigation / ul#footNav */ #footNav {float: left; display: inline; margin-left: 10px; width: 720px;} #footNav li {display: inline; border-right: 1px solid #fff;} #footNav li a {margin-right: 15px; padding-left: 15px;} #footNav li:last-child {border: 0;} /* 2.3.2. Copyright information / p#copy */ #copy {float: right; display: inline; text-align: right; margin-right: 25px; width: 150px;} /* 3. Interactive Chart / table#interactive */ #intellectual_capital #mainContent {padding-bottom: 30em; margin: 15px 0;} table#interactive {width: 725px; margin: 0px auto; border-collapse: collapse;} #interactive th {height: 41px; text-indent: -9999px;} #interactive .upstream {background: url(/images/upstream_business.gif) no-repeat left bottom;} #interactive .midstream {background: url(/images/midstream.gif) no-repeat left bottom;} #interactive .downstream {background: url(/images/downstream.gif) no-repeat left bottom;} #interactive .ops {background: url(/images/aircraft_ops.gif) no-repeat left bottom;} #interactive td {vertical-align: top; font-family: arial;} table#interactive a {display: block; width: 100%; height: 56px; color: #000; text-decoration: none; background: url(/images/all_states_bg.gif) no-repeat; text-indent:-9999px; position: relative; font-weight: normal;} table#interactive a ul {text-indent: 0px; margin-top: 0; padding: 5px 10px 10px 25px;} #interactive #one {width: 209px;} #interactive #two {width: 219px;} #interactive #three {width: 189px;} #interactive #four {width: 108px;} #interactive .info {background: #5a2a8a; color: #fff; width: 200px; font-size: 12px; padding-bottom: 5px;} #interactive .info li {margin-top: 3px; margin-bottom: 5px;} #interactive .hotspot {position: relative; height: 56px;} #interactive .hotspot ul {position: absolute; left: -9999px;} #interactive .hotspot a:hover ul {left: 0; top: 100%; width: 200px;} #interactive #four a:hover ul {left: -130px;} #interactive #one a {background-position: 0 0;} #interactive #one a:hover, #interactive #one a:focus {background-position: 0 -56px;} #interactive #two a {background-position: -209px 0;} #interactive #two a:hover, #interactive #one a:focus {background-position: -199px -112px; width: 229px; margin-left: -10px;} #interactive #three a {background-position: -428px 0;} #interactive #three a:hover, #interactive #one a:focus {background-position: -418px -168px; width: 199px; margin-left: -10px;} #interactive #four a {background-position: -617px 0;} #interactive #four a:hover, #interactive #one a:focus {background-position: -607px -224px; width: 118px; margin-left: -10px;} *:first-child+html #interactive .hotspot a:hover ul {left: -40px;} * html #interactive .hotspot a:hover ul {left: -40px;}