/*------------------------------------------------------------------ [Screen Stylesheet] Project: Quantum Signal Version: 1.0 Last change: 08/21/08 [subnav] 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. Utility navigation / ul#utility 2.1.2.1. Search box / form #searchbox 2.1.3. Global navigation / ul#globalNav 2.2. Banner / div#banner 2.3. Middle section / div#middle 2.3.1. Primary column / div#primeCol 2.3.1.1. Breadcrumbs / div#breadcrumbs 2.3.1.2. Main content / div#mainContent 2.3.1.3. Secondary content / div#secondContent 2.3.2. Second column / div#secondCol 2.3.2.1 Local subnavigation / ul#subNav 2.3.2.2. Sidebar box / div.sidebar 2.3.3. Footer / div#footer 2.3.3.1. Copyright information / p#copy 2.3.3.2. Footer navigation / ul#footNav D. Custom Corners & Borders -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Color codes] #fff white: (wrapper background) #000 black: (page text) #333 gray #1: (header, banner, h2 backgrounds) #d6d6d6 gray #2: (page background) #e5e5e5 gray #3: (sidebar background) #666 gray #4: (searchbox input borders) #1c6a6a teal #1: (globalNav background) #059392 teal #2: (globalNav hover background, header bottom border) #084f4e teal #3: (subNav background) #008e8d teal #4: (subNav parent link backgrounds) #01c5c4 teal #5: (subNav hover and current backgrounds) #92d5d4 light blue #1: (sidebar h3 border) #9cf light blue #2: (banner link) #cff light blue #3: (banner h4, subNav links) #e0ebeb light blue #4: (breadcrumb background) #699 light blue #5: (banner h4 border) #771010 dark red: (footer background, header top border, home h2) #fc3 yellow: (utility hover, banner text) -------------------------------------------------------------------*/ /*------------------------------------------------------------------ A. GLOBAL RESET -------------------------------------------------------------------*/ body {font: 62.5%/1.4 arial,verdana,geneva,lucida,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,verdana,geneva,lucida,sans-serif;} textarea {overflow: auto;} /*fieldset {border: solid 0 transparent;}*/ table {border-collapse: collapse;} 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;} .left {float: left; display: inline; margin-right: 10px;} .right {float: right; display: inline; margin-left: 10px;} .center {text-align: center;} .block {display: block;} .no-bullet {list-style-type: none;} .gray_txt {color: #666;} .lt_gray {color: #AAA;} .red_txt {color: #771010;} .callout {background: #EEE; border: 1px solid #CCC; float: right; margin-left: 15px; padding: 9px; width: 220px;} /*------------------------------------------------------------------ B. TYPOGRAPHY -------------------------------------------------------------------*/ strong, #utility, #news .title, #searchbox .submit, #breadcrumbs, #footNav .current, blockquote {font-weight: bold;} a, #breadcrumbs {color: #0054a6; text-decoration: none;} a:hover {text-decoration: underline;} #banner a, #middle a, #utility, #news .title {font-weight: bold;} #banner a {color: #9cf;} h2, #banner h4 {font-weight: normal;} h2 {font-size: 1.9em;} #home h2, #mainContent h3, #mainContent h5 {color: #771010;} #mainContent .dividers h3 {clear: both; color: #084f4e; margin-top: 10px;} #mainContent .dividers h4 {clear: both; color: #333; margin-bottom: 5px;} #mainContent h3.plain {color: #000;} h3 {font-size: 1.7em; font-weight: bold; display: block;} #mainContent h3 {font-weight: normal; font-size: 1.462em;} #subNav h3 {font-size: 1.154em;} .sidebar h3 {font-size: 1.417em;} h4 {font-size: 1.3em;} #banner h4, #subNav a {font-size: 1em; color: #cff;} h5 {font-size: 1.2em;} #banner h5 {font-size: 1.154em; line-height: 1.1;} h6, #breadcrumbs, blockquote {font-size: 1.1em;} #utility, #banner, #mainContent, #subNav, #footer {font-size: 1.3em;} #banner {color: #fc3; line-height: 1.2;} #globalNav, .sidebar {font-size: 1.2em;} h2, #utility, #utility a, #globalNav a, #banner h5, #subNav h3, #subNav a:hover, #subNav .current a, #footer, #footer a {color: #fff;} #globalNav a:hover, #utility a:hover, #subNav a {text-decoration: none;} #utility a:hover, #utility .current a {color: #fc3;} cite {font-style: italic;} #container, #container1, #container2, #container3, #container4 {font-style: oblique;} #mainContent .callout h5 {margin: 0 0 8px 0;} /*------------------------------------------------------------------ C. LAYOUT -------------------------------------------------------------------*/ /* 1. Body / body */ body {background: #d6d6d6 url(../images/body_bg.jpg) repeat-x top;} /* 1.1. Skip to content / a#skip */ #skip {position: absolute; top: -1000px;} /* 2. Layout wrapper / div#wrapper */ #wrapper {position: relative; margin: 0 auto; width: 966px; background: url(../images/wrapper_bg.png) repeat-y top; padding-top: 10px;} * html #wrapper {} /* 2.1. Header / div#header */ #header {height: 113px; width: 926px; position: relative; margin: 0px 20px 6px; border-top: 12px solid #771010; border-bottom: 7px solid #008e8d; background: url(../images/header_bg.gif) repeat-x bottom; z-index: 10;} /* 2.1.1. Logo / h1 */ h1 {height: 78px; width: 202px; background: url(../images/logo.gif) no-repeat; text-indent: -9000px; z-index:3; position: absolute; left: 18px; top: 20px;} h1 a {display: block; height: 78px; width: 202px; background: url(../images/logo.gif) no-repeat;} /* 2.1.2. Utility navigation / ul#utility */ #utility {float: right; position: absolute; top: 24px; right: 16px;} #utility li {float: left; height: 25px; line-height: 25px;} #utility li a {padding-right: 20px; margin-right: 20px; border-right: 1px solid #fff;} /* 2.1.2.1. Search box / form #searchbox */ #searchbox label {padding-right: 40px;} #searchbox input {border: 1px solid #666; vertical-align: baseline;} #searchbox #query {width: 232px; margin-right: 4px; padding: 1px;} #searchbox .submit {background: #fc3; cursor: pointer; *position: relative; *top: 1px;} /* 2.1.3. Global navigation / ul#globalNav */ #globalNav {width: 682px; position: absolute; bottom: 0; right: 6px; 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: 36px; line-height: 36px; /*background: #1c6a6a;*/ width: 73px; margin-right: 4px; text-indent: -9000px;} /*#globalNav li:last-child a {margin: 0;}*/ /* #globalNav a:hover, #globalNav .current a {background: #059392;} #globalNav li:hover a, #globalNav li.sfhover a {background: #059392;} */ #globalNav .about_qs {background: url(../images/navigation/about_qs.gif) no-repeat top;} #globalNav .about_qs:hover, #globalNav .current .about_qs, #globalNav li:hover .about_qs, #globalNav li.sfhover .about_qs {background-position: bottom;} #globalNav .forensics_biometrics {width: 143px; background: url(../images/navigation/forensics_biometrics.gif) no-repeat top;} #globalNav .forensics_biometrics:hover, #globalNav .current .forensics_biometrics, #globalNav li:hover .forensics_biometrics, #globalNav li.sfhover .forensics_biometrics {background-position: bottom;} #globalNav .robotics {background: url(../images/navigation/robotics.gif) no-repeat top;} #globalNav .robotics:hover, #globalNav .current .robotics, #globalNav li:hover .robotics, #globalNav li.sfhover .robotics {background-position: bottom;} #globalNav .video_analytics {width: 94px; background: url(../images/navigation/video_analytics.gif) no-repeat top;} #globalNav .video_analytics:hover, #globalNav .current .video_analytics, #globalNav li:hover .video_analytics, #globalNav li.sfhover .video_analytics {background-position: bottom;} #globalNav .simulation {width: 82px; background: url(../images/navigation/simulation.gif) no-repeat top;} #globalNav .simulation:hover, #globalNav .current .simulation, #globalNav li:hover .simulation, #globalNav li.sfhover .simulation {background-position: bottom;} #globalNav .custom_solutions_consulting {width: 197px; background: url(../images/navigation/custom_solutions_consulting.gif) no-repeat top; margin: 0;} #globalNav .custom_solutions_consulting:hover, #globalNav .current .custom_solutions_consulting, #globalNav li:hover .custom_solutions_consulting, #globalNav li.sfhover .custom_solutions_consulting {background-position: bottom;} .dropdown {position: absolute; width: 200px; left: auto; background: #1c6a6a; filter:alpha(opacity=90); opacity: .90; -moz-opacity:.90; z-index: 100; margin-left: 4px; border-top: 1px solid #059392; display: none; } #globalNav .dropdown li {float: none; border-bottom: 1px solid #059392;} #globalNav .dropdown a {height: auto; width: 180px; line-height: 1.1; margin: 0; padding: 5px 10px; text-indent: 0;} #globalNav li:hover .dropdown, #globalNav li.sfhover .dropdown {left: auto; display: block;} #globalNav li:hover .dropdown a, #globalNav li.sfhover .dropdown a {background: #1c6a6a;} #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: #059392;} #globalNav li:hover, #globalNav li.hover {position: static;} /*fix for potential 'sticky' menu items in IE 7*/ /* 2.2. Banner / div#banner */ #banner {overflow: hidden; margin: 6px 20px 15px; position: relative; height: 269px; width: 926px; background: #333 url(../images/banner_bg.jpg) repeat-x top;} #banner .text {width: 180px; margin: 20px;} #banner img {margin: 8px;} #banner p, #banner ul {margin-top: 1.5em; margin-bottom: 1.5em;} #banner h4 {padding-bottom: 1em; border-bottom: 1px dotted #699; margin-bottom: 1em;} #banner h5 {padding-top: 1em;} #banner > div {width: 100%;} /* 2.3. Middle section / div#middle */ #middle {overflow: hidden; margin: 6px 20px; width: 926px;} /* 2.3.1. Primary column / div#primeCol */ #primeCol {float: right; display: inline; width: 688px;} .oneCol #primeCol {float: none; width: 100%;} .twoCol #primeCol {float: right; width: 688px;} .threeCol #primeCol {} .dividers {padding: 20px 0; clear: both;} .dividers > div {background: repeat-x; border-top: 2px solid #084f4e; margin-top: 2px; overflow: hidden; padding: 4px 8px;} .dividers .right {margin: 0 0 10px 10px;} h2 {height: 36px; background: #333 url(../images/h2_bg.gif) repeat-x top; line-height: 36px; padding-left: 25px;} #home h2 {height: auto; background: none; line-height: 1.4; padding: 0; margin: 15px 15px 0 25px;} /* 2.3.1.1. Breadcrumbs / div#breadcrumbs */ #breadcrumbs {height: 25px; line-height: 25px; background: #e0ebeb; padding-left: 25px; margin-top: 1px;} /* 2.3.1.2. Main content / div#mainContent */ #mainContent {margin: 25px 15px 0 25px;} .threeCol #mainContent {float: left; display: inline; width: 410px;} #mainContent p, #mainContent ul {margin-top: 1.2em; margin-bottom: 1.2em;} ul {margin-left: 20px; padding-left: 0;} #mainContent h4, #mainContent h5, #mainContent h6 {margin-top: 1.5em; margin-bottom: 1.2em;} #mainContent #photos {background: #EEE; border: 2px solid; border-color: #DDD #BBB #BBB #DDD; margin: 10px 0 10px 10px; padding: 8px; width: 250px;} #mainContent #photos h6 {margin: 0; text-align: center;} #mainContent .slide_btn {background: #CCC; border: 1px solid #084F4E; border-radius: 4px; cursor: pointer; font-size: .9em; font-weight: bold; -moz-border-radius: 4px; -webkit-border-radius: 4px; color: #084F4E; margin: 2px; padding: 2px 4px; text-decoration: none;} #mainContent .slide_btn.disabled {background: #DDD; border-color: #BBB; color: #BBB; cursor: default;} #mainContent li {margin-bottom: 0.5em;} #mainContent img.left {margin-right: 25px; margin-bottom: 10px;} #mainContent img.right {margin-left: 25px; margin-bottom: 10px;} #mainContent a.action {background: #008e8d; border: 1px solid #084f4e; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; clear: both; color: #fff; display: block; float: right; font-weight: bold; margin-left: 5px; padding: 3px 10px; text-decoration: none;} #mainContent .callout a.action { float: left; margin-left: 0; } #home #mainContent p {padding-left: 90px; height: 57px;} #home p.forensics {background: url(../images/content/home_forensics.jpg) no-repeat top left;} #home p.robotics {background: url(../images/content/home_robotics.jpg) no-repeat top left;} #home p.video {background: url(../images/content/home_video.jpg) no-repeat top left;} #home p.simulation {background: url(../images/content/home_simulation.jpg) no-repeat top left;} #home #mainContent .mission p {padding-left: 0; height: auto;} #container1, #container2, #container3, #container4 {width: 320px;} #container, #container1, #container2, #container3, #container4 {margin-bottom: 2em;} #mainContent #ProjectDisplay {background: #EEE; border: 1px solid #CCC; overflow: hidden; padding: 10px; text-align: center;} #mainContent #ProjectDisplay>div.left {width: 200px;} #mainContent #ProjectDisplay>div.left>img {border: 1px solid #333; float: left; margin: 0 0 10px 0; width: 200px;} #mainContent #ProjectInfo {float: right; width: 410px;} #mainContent #ProjectDisplay h3 {color: #333; font-size: 1.2em; font-weight: bold; padding: 0; text-align: left;} #mainContent #ProjectDisplay p {clear: both; color: #555; text-align: left;} /* 2.3.1.3. Secondary content / div#secondContent */ #secondContent {} .oneCol #secondContent {display: none;} .twoCol #secondContent {display: none;} .threeCol #secondContent {float: right; display: inline; width: 236px; margin-top: 15px;} #secondContent p, #secondContent ul {margin-top: 1.5em; margin-bottom: 1.5em;} /* 2.3.2. Second column / div#secondCol */ #secondCol {float: left; display: inline; width: 236px;} .oneCol #secondCol {display: none;} .twoCol #secondCol {} .threeCol #secondCol {} /* 2.3.2.1 Local subnavigation / ul#subNav */ #subNav {width: 230px; background: #084f4e; padding: 8px 1px 25px; margin-bottom: 2em; line-height: 1.1;} #subNav h3, #subNav a {padding: 5px 22px; display: block; margin-top: 1px;} #subNav li {} #subNav .child a {padding-left: 45px;} #subNav ul li a, #subNav .current .child a {background: #008e8d;} #subNav a:hover, #subNav .current a, #subNav .current .child a:hover, #subNav .child .current a {background: #01c5c4;} #subNav h3 a, #subNav h3 a:hover {background:#084f4e; color: #FFF; padding: 0;} #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.3.2.2. Sidebar box / div.sidebar */ .sidebar {background: #e5e5e5; margin: 2em auto; padding: 1em 15px;} .sidebar h3 {padding-bottom: 0.5em; border-bottom: 2px solid #92d5d4; margin-bottom: 1em;} .sidebar.image, .sidebar.image .i3 {padding: 0; background: #fff; text-align: center;} .sidebar p, .sidebar ul {margin-top: 1.5em; margin-bottom: 1.5em;} .sidebar a.cta {background: #771414 url(../images/red_gradient.png) repeat-x; border: 1px solid #771010; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; color: #FFF; display: block; font-size: 1.25em; line-height: 1.2em; margin: 5px; padding: 5px; text-decoration: none;} .sidebar a.cta img {float: left; position: relative; left: -8px; top: -7px;} .sidebar a.cta span.emailto {clear: both; display: block; font-size: .85em;} .sidebar p.or_phone {font-size: 1.4em; font-weight: bold; margin-top: 5px;} .sidebar p.or_phone span.gray_txt {display: block; font-size: .8em;} #news {margin-top: 0;} #news .date {margin-top: 0; font-style: italic;} #news .details {border: 0; margin-bottom: 1.5em; clear: both;} #news .sbSect {border-bottom: 1px dotted #000; padding-bottom: 1.5em; margin-bottom: 1.5em;} #news .sbSect:last-child {border: 0; margin: 0;} #news .details p {margin-top: 0.5em;} #news .sbSect>a {display: block; text-align: right;} /* 2.3.3. Footer / div#footer */ #footer {overflow: hidden; margin: 25px 20px 0px; border-bottom: 10px solid #fff; width: 926px; background: #771010; height: 65px; line-height: 65px;} /* 2.3.3.1. Copyright information / p#copy */ #copy {float: left; display: inline; width: 230px; text-indent: 30px;} /* 2.3.3.2. Footer navigation / ul#footNav */ #footNav {float: left; display: inline; width: 525px; margin-left: 150px;} #footNav li {display: inline; border-right: 1px solid #fff;} #footNav li a {margin-right: 25px; padding-left: 25px;} #footNav li:last-child {border: 0;} /*------------------------------------------------------------------ D. CUSTOM CORNERS & BORDERS -------------------------------------------------------------------*/ /* Basic styling, used when JavaScript is unsupported */ .cbb {} /* Normal styling */ .cb {padding: 0;} /* Top corners and border */ .bt { height:12px; margin:0 0 0 12px; background:url(../images/box.gif) no-repeat 100% 0; text-align:left; /*fix for IE when content is centered*/ } .bt div { position:relative; left:-12px; width:12px; height:12px; background:url(../images/box.gif) no-repeat 0 0; font-size:0; line-height:0; } /* Bottom corners and border */ .bb { height:12px; margin:0 0 0 12px; background:url(../images/box.gif) no-repeat 100% 100%; text-align:left; /*fix for IE when content is centered*/ } .bb div { position:relative; left:-12px; width:12px; height:12px; background:url(../images/box.gif) no-repeat 0 100%; font-size:0; line-height:0; } /* Left border */ .i1 { padding:0 0 0 14px; background:url(../images/borders.gif) repeat-y 0 0; } /* Right border */ .i2 { padding:0 14px 0 0; background:url(../images/borders.gif) repeat-y 100% 0; } /* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */ .i3 { display:block; margin:0; padding: 1em 15px; background:#e5e5e5; } /* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */ .i3:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .i3 {display:inline-block;} .i3 {display:block;}