/* -------------------------------------------------- BDSNatural.com GLOBAL STYLES Last revised 4 March 2008 -------------------------------------------------- */ /* -------------------------------------------------- Color palette: -------------------------------------------------- DarkGreen #006400 Green #008000 Olive #808000 OliveDrab #6b8e23 OliveDrab 70% #97b065 OliveDrab 33% #cedab6 OliveDrab 25% #dae3c8 Indigo #4b0082 MediumSlateBlue #7b68ee Medium dark grey #444 More dark grey #555 Dark grey #666 Dark medium grey #777 Light grey #ccc GhostWhite #f8f8ff */ /* -------------------------------------------------- GLOBAL RESET -------------------------------------------------- undohtml.css (CC) 2004 Tantek Celik. Some Rights Reserved. */ :link, :visited { text-decoration: none } ul, ol { list-style: none } h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em } body, html, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, img { margin: 0; padding: 0; } a img, :link img, :visited img { border: none } address { font-style: normal } /* -------------------------------------------------- DEFAULT HTML STYLES -------------------------------------------------- This section concerns generalizations and common elements */ body { color: #555; /* dark grey */ font-size: 87.5%; /* @14px -- use percent value to avoid bug in Win IE with em-unit declaration */ font-family: Arial, Verdana, sans-serif; text-align: center; /* horizontal centering in Win IE */ min-width: 800px; /* Win IE ignores this */ background: #fff; } /* Links */ a { color: #7b68ee; /* MediumSlateBlue */ text-decoration: none; } a:focus { outline: none; /* most browsers do not support yet support this property */ -moz-outline: none; /* remove focus outline in Mozilla browsers */ } a:hover { color: #4b0082; /* Indigo */ border-bottom: 1px dotted #4b0082; } a:active { color: #006400; /* DarkGreen */ border-bottom: 1px dotted #006400; } a[name] { color: #666; /* dark grey -- same as color */ border-bottom: none; } /* Headers */ h1, h2, h3, h4, h5, h6 { font-family: "Arial Narrow", Arial, sans-serif; } h1 { color: #97b065; /* OliveDrab 70% */ font: normal 2.5em "Arial Narrow", Arial, sans-serif; /* @35px */ margin: .6em auto .4em; } h2 { color: #808000; /* Olive */ font: 1.35em Georgia, serif; /* @19px */ margin: 1em auto .6em; } h3 { color: #666; /* dark grey */ font-size: 1.15em; /* @16px */ margin: 1em auto .5em; } h4 { color: #777; /* dark medium grey */ font-size: 1em; margin: 1em auto .5em; } h5 { color: #006400; /* DarkGreen */ font-size: 1em; text-transform: uppercase; margin: 1em auto .5em; } h6 { color: #008000; /* Green */ font-size: 1em; margin: .5em auto; } p { margin: 0 auto 1em; } blockquote { font-style: italic; padding: 0 2em .4em; } /* Lists */ ul ul, ol ol, ul ol { /* nested list indent */ margin-left: 1em; } /* -------------------------------------------------- PAGE STRUCTURE -------------------------------------------------- This section defines layout elements and respective environmental formatting */ #wrapper { text-align: left; /* reset Win IE workaround */ width: 800px; margin: 0 auto; /* standard CSS horizontal centering */ padding: 0; } #banner { /* identity + navigation */ width: 800px; position: relative; background: transparent; } #banner img#logo { padding: .5em 0; } /* Content areas */ #container { line-height: 1.5em; margin: 0; padding: 0; border-top: 1px solid #ccc; background: #cedab6 url(../images/utility/background.gif) repeat-y left; /* OliveDrab 33%, to match #sidebar background */ } #content { width: 489px; float: right; padding: 0 20px; border-right: 1px solid #ccc; background: transparent; } #content p { margin: 0 auto 1em; } #sidebar { color: #444; /* darker grey, to increase text contrast */ font: .93em/150% Arial, Verdana, sans-serif; /* @13px */ width: 270px; float: left; margin: 0; padding: 0; background: #cedab6; /* OliveDrab 33% */ } #sidebar .inset { width: 270px; margin: -1px 0 0; } #sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6 { color: #006400; /* DarkGreen */ margin: 1em auto .5em; } #sidebar h2 { color: #fff; font: italic 1.23em/2em "Times New Roman", Times, Georgia, serif; /* @16px */ text-align: center; margin: -.35em 0 0; background: #006400; /* DarkGreen */ } #sidebar div.subsection { margin-bottom: 1em; padding: 0 1.5em; border-bottom: 1px solid #dae3c8; /* OliveDrab 25% */ } #sidebar div.last-subsection { padding: 0 1.5em; } #sidebar ul li a.selected { color: #4b0082; /* Indigo */ font-weight: bold; } /* Main navigation */ #nav { font: .93em "Helvetica Neue", Helvetica, Arial, sans-serif; float: right; margin-top: -2.1em; padding: 0; list-style: none; } #nav li { line-height: 2em; float: left; border-top: 1px solid #ccc; /* light grey */ border-right: 1px solid #ccc; } #nav li.first { border-left: 1px solid #ccc; } #nav li.last { } #nav a { text-decoration: none; text-transform: lowercase; text-align: center; padding: 0 1em; border-bottom: none; display: block; } #nav a:link, #nav a:visited { color: #97b065; /* OliveDrab 70% */ /* originally #cedab6 -- changed per client request 11/13 */ background: #f8f8ff; /* GhostWhite */ } #nav a:hover { color: #006400; /* DarkGreen */ background: #cedab6; /* OliveDrab 33% */ } #nav a:active { color: #dae3c8; /* OliveDrab 25% */ background: #006400; /* DarkGreen */ } #nav li a.selected { color: #4b0082 !important; /* Indigo */ font-weight: bold; border-bottom: 1px solid #fff; background: #fff !important; /* rule overrides hover behavior */ } /* Footer */ #footer { color: #777; /* dark medium grey */ font: .86em "Helvetica Neue", Arial, sans-serif; /* 12px */ height: 1.8em; position: relative; padding-top: 1em; clear: both; list-style: none; } #footer li { padding: .5em; display: inline; background: url(../images/utility/pipe.gif) no-repeat right; } #footer li.first { padding-left: 0; } #footer li.last { background: none; } #footer li.right { position: absolute; right: 0; bottom: .15em; background: none; } #footer a, #footer a:link, #footer a:visited { color: #777; /* dark medium grey */ } #footer a:hover { color: #4b0082; /* Indigo */ border-bottom: 1px dotted #4b0082; } #footer a:active { color: #7b68ee; /* MediumSlateBlue */ border-bottom: 1px dotted #7b68ee; } .byline { /* used for Jub Jub credit */ font: .9em Arial, sans-serif; text-transform: uppercase; } /* Utility elements */ .hidden { /* completely removed */ display: none; } .invisible { /* does not display but remains in layout flow */ visibility: hidden; } .clearance { /* clears floats to allow faux column background also adds rounded bottom border graphic */ height: 21px; /* @1.5em */ clear: both; background: transparent url(../images/utility/bottom.gif) no-repeat bottom left; } .clear { clear: both; } /* FORMATTING STYLES */ /* Positioning elements */ .center { display: block; text-align: center; } .flush-right { text-align: right; } .justify { text-align: justify; } .inline { display: inline; } p.last { /* use for last paragraph in section */ margin-bottom: 0; } .floatLeft { float: left; } .floatRight { float: right; } .rightFlush { margin-right: -1.5em; } .leftFlush { margin-left: -1.5em; } .allPad { padding: 1.5em; } .leftPad { padding-left: 1.5em; } .rightPad { padding-right: 1.5em; } .bottomPad { padding-bottom: 1em; } /* Use to provide paragraph spacing in IE Win */ /* Fonts */ .italic { font-style: italic; } .bold { font-weight: bold; } .small { font-size: .86em; } .smaller { font-size: .8em; } .dropcap { color: #4b0082; font: 4em/.65em Georgia, Times, serif; /* @56px */ padding-right: .1em; float: left; } /* Lists */ .plain { list-style: none; } .square { margin-left: 1.1em; list-style: square; } /* Tables */ tr { line-height: 1.1em; } td { width: 15em; padding-right: .5em; } .gallery { width: 37em; } .gallery li { text-align: center; display: inline; width: 12.4em !important; /* modify this value to change cell width */ max-width: 165px; /* Win IE ignores this value */ margin-right: -.5em; } .gallery li img { width: 12.4em; /* modify this value to change cell width */ max-width: 165px; /* Win IE ignores this value */ } .table { } .table li { text-align: center; display: block; width: 8em; /* modify this value to change cell width */ float: left; padding: .5em 1em .5em 0; background: #fff; } /* with hover behavior in CSS-standards-compliant browsers -- not Win IE! */ .table img { border: 2px solid #fff; } .table img:hover { border: 2px solid #b0c4de; } .table img:active { border: 2px solid #4169e1; } .table a:hover, .table a:active { border-bottom: none; } a.img:hover, a.img:active { border-bottom: none; }