/*------------------------------------------------------------------ [Screen Stylesheet] Project: Dart Appraisal Version: 1.0 Last change: 03/30/09 [navigation change] Assigned to: Karl Kasischke Primary use: Page 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.logo 2.1.2. Search box / form#searchbox 2.1.3. Tagline / p#tagline 2.2. Global navigation / #globalNav 2.3. Local subnavigation / ul#subNav 2.4. Middle section / div#middle 2.4.1. Primary column / div#primeCol 2.4.1.1. Main content / div#mainContent 2.4.1.1.1. Breadcrumbs / div#breadcrumbs 2.4.1.2. Secondary content / div#secondContent 2.4.1.2.1 Sidebars / div.sidebar 2.4.2. Second column / div#secondCol 2.4.2.1 Login form / form#login 2.4.2.2. Dart Tracker form / form#tracker 2.5. Footer / div#footer 2.5.1. Copyright information / p#copy 2.5.2. Footer navigation / ul#footNav -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Color codes] #fff white: (globalNav, subNav, h2, utility) #231f20 off-black: (page text) #e2e2e2 gray: (borders) #069 blue: (links, footer current link) #a30234 red: (hightlighted text) #b48b3d tan: (sidebar h2) #e4ca91 tan #2: (navigation hover) #d2af6d tan #3: (subnavigation background) #ffdb69 yellow: (subnavigation divider) -------------------------------------------------------------------*/ /*------------------------------------------------------------------ A. GLOBAL RESET -------------------------------------------------------------------*/ body {font: 62.5%/1.3 arial,verdana,geneva,lucida,sans-serif; background: #fff; color: #231f20; 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: arial,verdana,geneva,lucida,sans-serif; font-size: inherit;} 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;} #globalNav :focus, #subNav :focus, .logo :focus, .header :focus {outline: 0;} .nav, .nav ul, form ul, .rss_items {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;} .alpha {list-style: upper-alpha;} /*------------------------------------------------------------------ B. TYPOGRAPHY -------------------------------------------------------------------*/ strong, a, #footNav .current a {font-weight: bold;} .highlight {color: #a30234;} a, #breadcrumbs, #footNav .current a {color: #069; text-decoration: none;} a:hover, a:focus {text-decoration: underline;} #subNav a, #footNav a, #globalNav li a:hover, #globalNav li.current a, .rss_title a {color: #231f20;} #searchbox label, #globalNav a {color: #fff;} #globalNav a:hover, #globalNav a:focus, #subNav a:hover, #subNav a:focus {text-decoration: none;} #footNav a, #breadcrumbs a {font-weight: normal;} .sidebar h2 {color: #b48b3d;} h1 {font-size: 1.7em;} h2 {font-size: 1.5em;} h3, #mainContent, #secondContent {font-size: 1.3em;} h4 {font-size: 1.1em;} h5 {font-size: 1.0em;} h6 {font-size: 0.9em;} #globalNav {font-size: 1.3em;} #searchbox, #subNav, #secondCol, #footer {font-size: 1.2em;} #mainContent h2 {font-size: 1.231em;} #secondContent .sidebar h2 {font-size: 1.154em;} #secondCol h2 {font-size: 1.167em;} #breadcrumbs {font-size: 0.846em;} #secondContent {line-height: 1.1;} #secondCol {line-height: 1.25;} .rss_date {font-size: 0.85em; color: #666; font-style: italic;} /*------------------------------------------------------------------ C. LAYOUT -------------------------------------------------------------------*/ /* 1. Body */ body {background: #fff url(../images2009/body-bg.gif) repeat-x top;} /* 1.1. Skip to content / a#skip */ #skip {position: absolute; top: -1000px;} /* 2. Layout wrapper / div#wrapper */ #wrapper {margin: 0 auto; width: 950px;} /* 2.1. Header / div#header */ #header {height: 162px; position: relative; background: url(../images2009/masthead-bg.jpg) no-repeat 239px top;} /* 2.1.1. Logo / h1.logo */ h1 {width: 278px; height: 90px; background: url(../images2009/dart-logo.png) no-repeat; text-indent: -9000px; z-index:3; position: absolute; top: 23px; left: 16px;} h1 a {display: block; width: 278px; height: 90px;} * html h1 {background-image: url(../images2009/dart-logo.gif); top: 25px; left: 16px;} /* 2.1.2. Search box / form#searchbox */ #searchbox {position: absolute; right: 0; height: 50px; line-height: 50px; background: url(../images2009/search-left.png) no-repeat left; padding-left: 4px; width: 22em;} #searchbox div {background: #a30234 url(../images2009/search-bg.jpg) repeat-x; padding: 0 10px; height: 50px;} #searchbox #query {border: 0; background: #fff url(../images2009/search-input.gif) no-repeat 50%; width: 149px; padding: 0 6px; margin: 0 6px;} #searchbox .submit {vertical-align: middle;} * html #searchbox div {padding-top: 15px; height: 35px;} /* 2.1.3. Tagline / p#tagline */ #tagline {width: 448px; height: 47px; background: url(../images2009/tagline.png) no-repeat; text-indent: -9000px; z-index:1; position: absolute; top: 58px; left: 457px;} * html #tagline {background-image: url(../images2009/tagline.jpg); top: 60px; left: 460px;} #learnlink {width: 247px; height: 28px; background: url(../images2009/learn-more.png) no-repeat; text-indent: -9000px; z-index:1; position: absolute; top: 95px; left: 654px;} #learnlink a {display: block; width: 247px; height: 28px;} * html #learnlink {background-image: url(../images2009/learn-more.jpg);} #loginlink {width: 247px; height: 28px; background: url(../images2009/login-here.png) no-repeat; text-indent: -9000px; z-index:1; position: absolute; top: 123px; left: 654px;} #loginlink a {display: block; width: 247px; height: 28px;} * html #loginlink {background-image: url(../images2009/login-here.jpg);} /* 2.2. Global navigation / #globalNav */ #globalNav {z-index: 5; background: #000;} #globalNav ul {width: 950px; z-index: 5; overflow: hidden; margin-top: 3px;} #globalNav li {float: left; display: inline;} #globalNav li a {float: left; display: block; height: 25px; line-height: 25px; background: url(../images2009/navtab-r.gif) no-repeat right bottom;} #globalNav li a span {display: block; background: url(../images2009/navtab-l.gif) no-repeat left bottom; padding: 0 20px;} #globalNav li a:hover, #globalNav li.current a {background: #e4ca91 url(../images2009/navtab-r-over.gif) no-repeat right bottom;} #globalNav li a:hover span, #globalNav li.current a span {background: url(../images2009/navtab-l-over.gif) no-repeat left bottom;} /* 2.3. Local subnavigation / ul#subNav */ #subNav {z-index: 5; height: 43px; position: relative; } #subNav ul {width: 950px; z-index: 5; overflow: hidden;} #subNav li {float: left;} #subNav li a {float: left; display: block; height: 24px; line-height: 24px; margin-top: 12px; background: #d2af6d;} #subNav li a:hover, #subNav li.current a {background: #e4ca91;} #subNav li a span {border-right: 1px solid #ffdb69; padding: 0 8px;} #subNav li.last a span {border: 0;} /* 2.4. Middle section / div#middle */ #middle {overflow: hidden; width: 950px; clear: both; margin-top: 5px;} img.right {margin: 0 0 8px 10px;} img.left {margin: 0 10px 8px 0;} /* 2.4.1. Primary column / div#primeCol */ #primeCol {float: right; display: inline; width: 694px;} .oneCol #primeCol {float: none; width: 100%;} /* 2.4.1.1. Main content / div#mainContent */ #mainContent {float: left; display: inline; width: 428px; margin: 20px 0 25px;} #mainContent {padding: 0 20px; width: 388px;} #mainContent h2 {margin: 0 -20px 10px;; border-bottom: 2px solid #e2e2e2; padding: 0 20px 10px;} #mainContent p, #mainContent ul, #mainContent ol {margin-bottom: 1.5em;} #mainContent li {margin-bottom: 0.5em;} #mainContent ol ul {margin-top: 0; margin-bottom:0;} #mainContent .map ul, #mainContent .map li {margin-bottom: 0; margin-top: 0.5em;} * html #mainContent {width: 383px;} #mainContent .rss_title, .rss_item {margin-bottom: 0.5em;} p.rss_title {background: url(../images2009/arrow-box.gif) no-repeat left;} .rss_items, p.rss_item, p.rss_title {padding-left: 24px; } .story {margin: 1.5em 0; border-bottom: 1px solid #e2e2e2;} #mainContent dd {margin-top: 1.5em; margin-bottom: 1.5em; border-bottom: 1px solid #e2e2e2;} #mainContent fieldset {margin: 1em 0; padding: 1em;} #mainContent legend {font-weight: bold; color: #000;} #mainContent label {display: block; float: left; width: 110px;} #mainContent .titles {} #mainContent .titles p {overflow: hidden;} #mainContent .titles label {width: 5em;} #mainContent input, #mainContent textarea, #mainContent select {width: 225px;} #mainContent input.radio, #mainContent input.submit {width: auto;} #mainContent input.radio {float: left; margin-right: 1em;} #mainContent textarea {height: 100px; overflow: auto;} #mainContent input:focus, #mainContent textarea:focus, #mainContent select:focus {background: #ffc;} #mainContent input[type="text"], #mainContent textarea, #mainContent select {border: 2px solid #999; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;} #mainContent .required {font-size: 0.75em; color: #a30234;} #mainContent input.submit {margin-left: 135px;} /* 2.4.1.1.1. Breadcrumbs / div#breadcrumbs */ #breadcrumbs {margin: 5px 0 15px;} #home #breadcrumbs {display: none;} /* 2.4.1.2. Secondary content / div#secondContent */ #secondContent {float: right; display: inline; width: 250px; padding-left: 16px;} #home #secondContent {background: url(../images2009/sidebar-shadow.png) no-repeat top left;} /* 2.4.1.2.1 Sidebars / div.sidebar */ .sidebar {border-bottom: 1px solid #e2e2e2; margin-bottom: 10px; padding-left: 15px; background: url(../images2009/sidebar-arrow.gif) no-repeat 2px 7px; width: 235px; } .sidebar .inner {width: 235px; background: url(../images2009/sidebar-bg.jpg) repeat-y right;} .sidebar a {display: block;} .sidebar h2 {padding-top: 10px;} .sidebar h2, .sidebar p {margin: 0 10px; padding-bottom: 1em;} .sidebar li {margin-bottom: 0.5em;} #home .sidebar {margin-left: 10px; padding-left: 15px; background-position: left 10px; width: 225px;} #home .sidebar .inner {width: 225px;} #home .sidebar.chart {background: none; width: 245px; padding-left: 0; margin-left: 5px;} #home .sidebar.chart .inner {width: 245px;} #home .sidebar.chart h2 {margin: 0; padding-left: 25px; background: url(../images2009/sidebar-arrow.gif) no-repeat 5px 7px;} .sidebar.image {padding: 0; background: none;} #home .sidebar.chart #widgetbox_widget_parent_0 {width: 180px; margin: 10px auto; text-align: center;} /* 2.4.2. Second column / div#secondCol */ #secondCol {float: left; display: inline; width: 240px; margin-right: 16px;} .oneCol #secondCol {float: none; display: none;} #secondCol form {background: url(../images2009/title-bg.gif) repeat-x top; margin-bottom: 30px; padding: 8px;} #secondCol form div>* {margin-left: 10px;} #secondCol form h2 {margin: 0; padding: 10px; border-bottom: 2px solid #e2e2e2; margin-bottom: 10px;} #secondCol form label {margin-right: 4px;} #secondCol form li {margin-bottom: 6px;} #secondCol form p {margin-bottom: 1em; margin-right: 15px;} #secondCol form li.last {text-align: center;} /* 2.4.2.1 Login form / form#login */ #login input {width: 150px;} #login .submit {width: auto; position: relative; left: 30px;;} #login li {text-align: right;} #login p {float: right;} /* 2.4.2.2. Dart Tracker form / form#tracker */ #tracker input {width: 210px;} #tracker .submit {width: auto;} /* 2.5. Footer / div#footer */ #footer {width: 950px; background: #fff; overflow: hidden; padding: 20px 0; border-top: 2px solid #e2e2e2;} /* 2.5.1. Copyright information / p#copy */ #copy {float: left; display: inline; text-align: center; width: 240px;} /* 2.5.2. Footer navigation / ul#footNav */ #footNav {text-align: center;} #footNav li {display: inline; border-right: 1px solid #231f20;} #footNav li a {margin-right: 15px; padding-left: 15px;} #footNav li.last {border: 0;}