@import url("layout.css");
/* Model
body.popup
input, select,textarea
ul ul
.container
.prodAllCont td.sponsoredShade = apply style to a td of class sponsoredShade
 that is inside any tag of class prodAllCont
table.prodAllCont th.sortable = apply style to a th of class sortable that
 is a descendant of a table of class prodAllCont

*/

/**********/
/* Basics */
/**********/
/*
Format of a style or rule:
selector {declaration block};
selector {declaration...};
selector {property:value;...}

** For broadest styling **
Use a tag selector:
h1 {color:red; padding: 5px;};
 means "Style every h1 tag on the page this way."

** For narrowest styling **
Use a class selector:
.special {color:green; font-family: "Monotype Corsiva";};
 means "Style class="special" items this way."
 Ex: <p class="special">Hi mom!</p>
 Ex: <p>I love my <span class="special">Lexus</span></p>
 
** For use only once on a page **
Use an ID selector:
#banner {background:white; height:300px; width: 700px;};
 means "Style #banner items this way."
 Ex: <div id="banner"> ... </div>
 Ex: <p id="copyright">Copyright 2009</p>
 Notes:
 (1) ID selectors have priority over class selectors.
 (2) ID selectors have specific use in JavaScript-based pages,
     e.g., in validating elements within a form.
 (3) Create #A {};, #B {}; etc. as CSS. On the Web page, put
     id=A, id=B, et. in the page. These can be used as HTML
     destinations, e.g, http://www.riggsca.com/mydocs.htm#C.
     
---------------------------------------------------------------

** For styling tags within tags **
Use a descendant selector:
(Note: An HTML tag may have a parent, child, and/or sibling.)
h1 strong {color: red;};
 means: "Style any strong tag within an h1 tag this way."
li a {font-family: Arial;};
 means "Style the a tag within a li [bulleted] tag this way."
To target a specific tag within a hierarchy, you may do this:
 ul li a {...;};
 body li a {...;};
 html body ul li a {...;};

Use a descendant selector that targets a:
p.intro a {color: yellow;};
 means "Apply this style to every (a) tag that is a descendant of a 
        paragraph (p) that is styled with the intro class."

The following CSS examples differ from the above:
p .intro a {color: yellow;};
 means "Apply this style to every (a) tag that is inside any tag
        styled with class="intro", that is itself a descendant of a
        paragraph (p)."
.intro a {color: yellow;};
 means "Apply this style to any (a) tag this is inside of any tag
        that has the intro class applied to it."       
*/

/********/
/* body */
/********/
body {
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 90%; /* font-size: small; */
  color: #2f4f4f; /* deep deep green */
  background-color: #369; /* deep blue */
}
/********************************/
/* divs: non-positioning styles */
/********************************/
#container { /* entire document */
  border: 6px solid #e36c0a; /* orange */
  border-top: 0;
  background-color: #fff; /* white */
}
#masthead { /* common header */
  background-image: url('../images/masthead_image.jpg');
  background-repeat: no-repeat;
}
#navigation { /* navigation links at top of page */
  border-top: 1px solid #808080; /* light brown */
  border-bottom: 1px solid #808080; /* light brown */
  background-color: #fea; /* yellowish */
}
/* This causes the navigation background to entend to the right margin.*/
html>body #navigation {
  overflow: hidden;
}
#column_l { /* large left column */
  width: 455px;
  padding: 10px;
  background-color: #fff;
}
/* See Box Model Hack: www.tantek.com/CSS/Examples/boxmodelhack.html */
/* This rule may be invisible to IE. */
html>body #column_l {
  width: 455px;
  padding: 10px;
  background-color: #fff;
}
#column_r { /* narrow right column */
  width: 260px;
  padding: 10px;
  background-color: #fff;
  border: 1px #ffbb6e solid; /* orange */
}
/* See Box Model Hack: www.tantek.com/CSS/Examples/boxmodelhack.html */
html>body #column_r {
  width: 260px;
  padding: 10px;
  background-color: #fff;
  border: 1px #ffbb6e solid; /* orange */
}
#full_width { /* full width column */
  width: 750px;
  padding: 10px;
  background-color: #fff;
}
/* See Box Model Hack: www.tantek.com/CSS/Examples/boxmodelhack.html */
html>body #full_width { /* full width column */
  width: 750px;
  padding: 10px;
  background-color: #fff;
}
/* With the following, IE has 40mm (16px) above and 28mm (11px) below.
   Firefox and Opera put 100mm (40px) above and 50mm (20px) below.
   Ideal would be 25mm/13mm (10px/5px). */
#footer {
  text-align: center;
  padding: 10px 5px;
}
/* The following has no effect, provided it matches the above.
   Originally, the two statements differed: padding-bottom: 10px v. 0.
   Perhaps what's below compensates for some browser anomaly. */
html>body #footer {
  text-align: center;
  padding: 10px 5px;
}
#footer_inside { /* I have no clue why both of the following are needed */
  float: right;
  padding-right: 20px;
}
html>body #footer_inside {
  float: right;
  padding-right: 20px;
}
/************/
/* masthead */
/************/
#masthead h1 {
  text-align: right;
  color: #fff;
  margin: 25px 25px 30px 0; /* position text; add vertical margins */
}
#masthead h2 {
  text-align: right;
  color: #fff;
  font-style: italic;
  margin: 25px 25px 35px 0; /* position text; add vertical margins */
}
/*********/
/* Links */
/*********/
a {
  text-decoration: none;
  border-bottom-style: 1px dotted;
  color: #008080; /* blue-green */
}
a:hover {
  background-color: #edd6d7 ; /* pink */
  color: #f00; /* red */
}
a:active { /* click button is down AND not visited */
  color: #008080; /* blue-green */
}
a:visited {
  color: #008080; /* blue-green */
}
td.image_included a { /* no border when image is a link */
  text-decoration: none; 
  background-color: white;
  border: none; /* Optional: removes blue border in some browsers */
}
*/
a img {
  text-decoration: none;
  border-bottom-style: none;
  border: none; /* Optional: removes blue border in some browsers */
}

/*********************************/
/* Navigation bar at top of page */
/*********************************/
#navigation a {
  text-decoration: none;
  border: 1px solid #fea; /* yellowish */
  background-color: #fea; /* yellowish */
  color: #0c87b0; /* blueish */
  font-weight: bold;
  display: block;
  padding: 5px;
}
#navigation a:hover {
  text-decoration: none;
  border: 1px solid #0c87b0; /* blueish */
  background-color: #0c87b0; /* blueish */
  color: #fea;
  font-weight: bold;
}
#navigation ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
#navigation li {
  float: left;
  font-size: 85%;
}
/**********/
/* footer */
/**********/
#footer a { /* color stays same always */
  color: #8b0000; /* maroon */
}
#footer p {
  font-size: x-small;
  color: #8b0000; /* maroon */
}
/*******************/
/* Format key tags */
/*******************/
h1, h2, h3, h4, h5, h6 {
  color: #00a0e1; /* was blueish #0c87b0 */
  margin-top: 5px;
  margin-bottom: 5px;
}
h1 {
  font-size: 240%; /* same as xx-large */
  text-align: center;
}
h2 {
  font-size: 180%; /* same as x-large */
  text-align: center;
}
h3 {
  font-size: 135%; /* same as large */
}
h4 {
  font-size: 115%; /* medium = 120% */
}
h5 {
  font-size: 100%; /* same as small */
}
h6 {
  font-size: 75%; /* same as x-small */
}
p {
  margin-top: 0;
  margin-bottom: 15px;
}

ul li, ol li, p {
  line-height: 1.4;
}

.red { /* Emphasize text to get the reader's attention */
  color: #c00000;
  font-weight: bold;
}
.attention { /* Emphasize text to get the reader's attention */
  color: #c00000; /* dark red */
  font-weight: bold;
}
hr {
  margin-left: auto; /* center the line */
  margin-right: auto;
  color: #ffbb6e; /* orange-ish */
  background-color: #ffbb6e; /* for some browsers */
  height: 2px;
  width: 50%;
  border: 0; /* for some browsers */
}
/****************/
/* Form styling */
/****************/
fieldset {
  background-color: #f0f0f0;
  margin-bottom: 10px; /* Put white space at bottom of blocks */
}
legend {
  font-weight: bold;
  color: #c00000;
}
input, textarea {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /* color: black; */
  background-color: #c6d9f1;
}
label {
  display: inline-block;
  line-height: 1.8; /* Must be tall enough so 2-line data in 2nd col does not fold over to left side of page */
  vertical-align: top;
  float: left;
  width: 17em;
}
fieldset ol {
  margin: 0;
  padding: 0;
}
fieldset li {
  list-style: none;
  margin: 0;
  padding: 3px;
}
fieldset fieldset label { /* embedded fieldset's label */
  width: auto; /* override default label width */
}
fieldset table {
  border-collapse:collapse;
}
fieldset table td {
  line-height: 1.8;
  vertical-align: top;	
  padding: 2px;
}
input.makevisible {
  color: #c00000;
  font-weight: bold;
  background-color: inherit;
}
label em {
  font-weight: bold;
  color: #c00000;
}

#full_width ul li { /* Use image for unordered list items */
  list-style-image: url('../images/bullet_blue.png');
  padding-left: 5px;
} 
#column_r ul li { /* Use image for unordered list items */
  list-style-image: url('../images/bullet_blue.png');
  padding-left: 5px;
} 
#column_l ul li { /* Use image for unordered list items */
  list-style-image: url('../images/bullet_blue.png');
  padding-left: 5px;
} 
acronym {
  cursor: help;
}
acronym {
  border-top: 1px solid #cc0; /* sick yellow */
  border-bottom: 1px solid #cc0; /* sick yellow */
}
/**********************************/
/* Format styles for various tags */
/**********************************/
.b0a0 { /* Set margin to 0px before and 0px after */
  margin-top: 0;
  margin-bottom: 0;
}
.b0a10 { /* Set margin to 0px before and 10px after */
  margin-top: 0;
  margin-bottom: 10px;
}
.b0a15 { /* Set margin to 0px before and 15px after */
  margin-top: 0px;
  margin-bottom: 15px;
}
.b10a0 { /* Set margin to 10px before and 0px after */
  margin-top: 10px;
  margin-bottom: 0;
}
.b10a10 { /* Set margin to 10px before and 10px after */
  margin-top: 10px;
  margin-bottom: 10px;
}
.b15a0 { /* Set margin to 15px before and 0px after */
  margin-top: 15px;
  margin-bottom: 0px;
}
.b15a15 { /* Set margin to 15px before and 15px after */
  margin-top: 15px;
  margin-bottom: 15px;
}
.l60 { /* Set left margin to 60px */
  margin-left: 60px;
}
.box {
  background: #f0fafa;
  border: 1px solid #e36c0a; /* orange */
  margin-left: 20px;
  margin-right: 20px;
  padding-left: 5px; /* pad slightly left and right */
  padding-right: 5px;
}
.box1 {
  background: #f0fafa;
  border: 1px solid #e36c0a; /* orange */
  padding-left: 5px; /* pad slightly left and right */
  padding-right: 5px;
}
.byline {
  color: #73afb7;
  font-size: .75em;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-variant: small-caps;
  text-indent: 0;
}
/**********/
/* tables */
/**********/
/* Model follows:
  <table class="min_tbl" width="75%" cellspacing="0" 
   summary="Pool counts">
    <caption>Pool counts</caption> <-- omit if not desired
    <colgroup> <-- Omit if no col tags specified
      <col class="cen" width="20%" /><col />
    </colgroup>
    <thead>
      <tr> <-- scope is for non-visual browsers
        <th scope="col">street</th>
        <th scope="col" class="cen">home count</th>
        <th scope="col" class="cen">pool count</th>
      </tr>
    </thead>
    <tr>
      <td>Calle Mira Monte</td>
      <td>22</td>
      <td>11</td>
    </tr>
    <tr class="odd">
      <td>Calle Mira Monte</td>
      <td>22</td>
      <td>11</td>
    </tr>
  </table>
*/
/* Table caption */    
caption { /* Opera and Firefox demand both caption and .cap_style */ 
  padding: 5px 0;
  font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  text-align: right;
}
.cap_style {
  padding: 5px 0;
  text-align: right;
  font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
.min_tbl th { /* Table heading row */
  text-align: left; /* you may override by using style of .cen */
  font: bold medium "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #369; /* deep blue */
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid #92c0e8; /* muted blue */
  padding: 2px;
  background: #c9e8eb; /* light blue */
}
.min_tbl td {
  color: #4f6b72; /* dark gray */
  vertical-align: top;
  border-top: 1px solid #c1dad7;
  border-bottom: 1px solid #c1dad7;
}
.indent { /* Indent text */
  margin-left: 60px;
}
/* Borderless table */
.nobord_tbl td {
  border: 0;
}
th.cen { /* apply to div or col or th or cell */
  text-align: center;
}
.cen { /* apply to h3 or div or col or th or cell */
  text-align: center;
}
.cen_table table { /* center table */
  margin-left: auto;
  margin-right: auto;
}
.min_tbl td.cen_4way { /* apply to specific cell */
  text-align: center;
  vertical-align: middle;
}
tr.odd td { /* shade odd rows in table */
  background: #f0fafa; /* light light blue */
  color: #797268; /* light brown font */
}
tr.tall_row td { /* Use for paint colors */
  height: 60px;
  text-align: center;
  vertical-align: middle;
}
tr.very_tall_row td { /* Use for paint colors */
  height: 425px;
  text-align: center;
  vertical-align: middle;
}
tr.double td { /* paint color caption cell */
  border-bottom: 2px black double;
  font-weight: bold;
  text-align: center;
}
/* Image and caption model follows:
  <table class="nobord_tbl" cellspacing="0">
  <colgroup>
    <col class="cen" />
  </colgroup>
    <tr>
      <td><img class="img_border" src="images/sol_2006-07.jpg" 
      alt="Oakridge Gazette Paper Route" 
      title="Oakridge Gazette Paper Route" width="200" height="241" /></td>
    </tr>
    <tr>
      <td class="caption">Oakridge Gazette Paper Route</td>
    </tr>
  </table>
*/

img { /* remove default 2px border from images in IE */
  border: 0;
}
.caption { /* caption an image */
  font-weight: bold;
  color: navy;
  margin: 5px 0px 0px;
  border: 0;
  text-align: center;
}
tr td.caption { /* caption an image */
  font-weight: bold;
  color: navy;
  margin: 5px 0px 0px;
  border: 0;
  text-align: center;
}
.img_border { /* Put a border around an image */
  border: 2px solid #369; /* deep blue */
}
.img_border_r { /* Put a border around an image, floated right */
  float: right;
  margin: 5px;
  border: 2px solid #369; /* deep blue */
}
#wc table { /* center weather channel display */
  margin-left: auto;
  margin-right: auto;
}
#wc td { /* override styles above that inhibit weather channel display */
  border: none;
  background: none;
  padding: 0;
}
.cour { /* Use courier for word find */
  font-family: "Courier New", Courier, monospace;
}
.cour_red { /* Reverse one word in word find */
  font-family: "Courier New", Courier, monospace;
  color: white;
  background-color: maroon;
}
/****************************/
/* Styles for popup windows */
/****************************/
#popup {
  background-color: white;
  padding: 10px;
}
#popup_close a {
  text-decoration: none;
  border: 0;
  color: white;
  background-color: white;
}
#popup td {
  font-weight: bold;
  text-align: center;
}
/***********************************************/
/* Paint color attributes: Dunn-Edwards colors */
/***********************************************/
.color_admiral_blue {
  background-color: #50647f; /* Admiral Blue: 80-100-127 */
}
.color_antique_linen {
  background-color: #faeedb; /* Antique Linen: 250-238-219 */
}
.color_apache_tan {
  background-color: #d5bfa5; /* Apache Tan: 213-191-165 */
}
.color_bay_view {
  background-color: #6a819e; /* Bay View: 106-129-158 */
}
.color_black_walnut {
  background-color: #5e4f46; /* Black Walnut: 94-79-70 */
}
.color_cedar_chest {
  background-color: #8f684b; /* Cedar Chest: 143-104-75 */
}
.color_center_ridge {
  background-color: #817a69; /* Center Ridge: 129-122-105 */
}
.color_cliff_brown {
  background-color: #d0ab8c; /* Cliff Brown: 208-171-140 */
}
.color_coral_clay {
  background-color: #c2b1a1; /* Coral Clay: 194-177-161 */
}
.color_dark_chocolate {
  background-color: #5f4947; /* Dark Chocolate: 95-73-71 */
}
.color_deep_crimson {
  background-color: #8f423d; /* Deep Crimson: 143-66-61 */
}
.color_doves_wing {
  background-color: #f4f2ea; /* Doves Wing: 244-242-234 */
}
.color_drifting {
  background-color: #beb4a8; /* Drifting: 190-180-168 */
}
.color_greenland {
  background-color: #737d6a; /* Greenland: 115-125-106 */
}
.color_hickory {
  background-color: #b7a28e; /* Hickory: 183-162-142 */
}
.color_inside_passage {
  background-color: #e0cfb5; /* Inside Passage: 224-207-181 */
}
.color_jakarta {
  background-color: #efddc3; /* Jakarta: 239-221-195 */
}
.color_magnolia {
  background-color: #fff9e4; /* Magnolia: 255-249-228 */
}
.color_milk_mustache {
  background-color: #faf3e6; /* Milk Mustache: 250-243-230 */
}
.color_roxy_brown {
  background-color: #7a5546; /* Roxy Brown: 122-85-70 */
}
.color_shaker_gray {
  background-color: #6c6556; /* Shaker Gray: 108-101-86 */
}
.color_slopes {
  background-color: #d2b698; /* Slopes: 210-182-152 */
}
.color_smores {
  background-color: #a87f5f; /* Smores: 168-127-95 */
}
.color_sunken_ship {
  background-color: #6b443d; /* Sunken Ship: 107-68-61 */
}
.color_white_beach {
  background-color: #fff6d9; /* White Beach: 255-246-217 */
}
.color_white_fever {
  background-color: #fbf4e8; /* White Fever: 251-244-232 */
}
/*********************************************/
/* Paint color attributes: old Frazee colors */
/*********************************************/
.color_apple_peel {
  background-color: #efe8da; /* Apple Peel: 239-232-218 */
}
.color_beethoven_blue {
  background-color: #415568; /* Beethoven Blue: 65,85,104 */
}
.color_best_burgundy {
  background-color: #5b4443; /* Best Burgundy: 91,68,67 */
}
.color_black_finish {
  background-color: #403f3d;; /* Black Finish: 64,63,61 */
}
.color_brick_shadow {
  background-color: #6c4b41; /* Brick Shadow: 108,75,65 */
}
.color_copper_springs {
  background-color: #bb906d; /* Copper Springs: 187,144,109 */
}
.color_cornico_beige {
  background-color: #b4a497; /* Cornico Beige: 180,164,151 */
}
.color_crisp_khaki {
  background-color: #c7af94; /* Crisp Khaki: 199,175,148 */
}
.color_daplin {
  background-color: #bda183; /* Daplin: 189,161,131 */
}
.color_dauphin_gray {
  background-color: #a9a49c; /* Dauphin Gray: 169,164,156 */
}
.color_floral_white {
  background-color: #f1ecdd; /* Floral White: 241,236,221 */
}
.color_gristmill {
  background-color: #7c7463; /* Gristmill: 124,116,99 */
}
.color_jacaranda_brown {
  background-color: #74665f; /* Jacaranda Brown: 116,102,95 */
}
.color_jamocha {
  background-color: #a1775c; /* Jamocha: 161,119,92 */
}
.color_light_showers {
  background-color: #b7bcba; /* Light Showers: 183,188,186 */
}
.color_lulled_beige {
  background-color: #d5c3aa; /* Lulled Beige: 213,195,170 */
}
.color_manganese {
  background-color: #594c45; /* Manganese: 89,76,69 */
}
.color_napoleon {
  background-color: #58768e; /* Napoleon: 88,118,142 */
}
.color_orange_peel {
  background-color: #f0e5d2; /* Orange Peel: 240,229,210 */
}
.color_orange_whip {
  background-color: #efe1cd; /* Orange Whip: 239,225,205 */
}
.color_peppercorn {
  background-color: #707a6a; /* Peppercorn: 112,122,106 */
}
.color_pottery_blue {
  background-color: #7f99a5; /* Pottery Blue: 127,153,165 */
}
.color_potting_shed {
  background-color: #595245; /* Potting Shed: 89,82,69 */
}
.color_queensland_walnut {
  background-color: #815a3e; /* Queensland Walnut: 129,90,62 */
}
.color_roasted_pepper {
  background-color: #843b39; /* Roasted Pepper: 132,59,57 */
}
.color_robust_red {
  background-color: #633c3a; /* Robust Red: 99,60,58 */
}
.color_sensitive_white {
  background-color: #f0e8d3; /* Sensitive White: 240,232,211 */
}
.color_soft_gold {
  background-color: #f8e8cd; /* Soft Gold: 248,232,205 */
}
.color_solo_white {
  background-color: #e7e6dd; /* Solo White: 231,230,221 */
}
.color_tenderfoot {
  background-color: #e3cbb2; /* Tenderfoot: 227,203,178 */
}
.color_wildcat {
  background-color: #a59786; /* Wildcat: 165,151,134 */
}
/*********************************************/
/* Paint color attributes: really old colors */
/*********************************************/
.color_chinchilla_white {
  background-color: #b5aea6; /* Chinchila White: 181,174,166 */
}
.color_cinnamon_glaze {
  background-color: #a5836b; /* Cinnamon Glaze: 165,131,107 */
}
.color_cornerstone {
  background-color: #bcc2c1; /* Cornerstone: 188,194,193 */
}
.color_council_bluff {
  background-color: #b8a495; /* Council Bluff: 184,164,149 */
}
.color_crystal {
  background-color: #e6e7e4; /* Crystal: 230,231,228 */
}
.color_essex_blue {
  background-color: #849eac; /* Essex Blue: 132,158,172 */
}
.color_fortress_stone {
  background-color: #c6ac93; /* Fortress Stone: 198,172,147 */
}
.color_light_navajo {
  background-color: #ebdec7; /* Light Navajo: 235,222,199 */
}
.color_little_rock {
  background-color: #7f8685; /* Little Rock: 127,134,133 */
}
.color_main_street_usa {
  background-color: #898f7c; /* Main Street USA: 137,143,124 */
}
.color_manilla_tan {
  background-color: #dac6af; /* Manilla Tan: 218,198,175 */
}
.color_stonewashed {
  background-color: #a1a0a1; /* Stonewashed: 161,160,161 */
}
.color_swiss_coffee {
  background-color: #eee7d8; /* Swiss Coffee: 238,231,216 */
}
.color_wright_stone {
  background-color: #9a8979; /* Wright Stone: 154,137,121 */
}