body {
margin: 0;
padding: 0;
text-align: center;
background: #663300;
color: #444;
}

#container {
text-align: left;
margin: 0 auto;
width: 950px;
background: #dcd7b9;
}

h1 {
margin: 0;
padding: 0;
}

h1 img {
display: block;
border: 0;
}

ul#topnav {
margin: 0;
padding: 5px 10px;
list-style-type: none;
background: #000066;
}

ul#topnav li {
display:inline;
background: url(images/listImg.gif) no-repeat 0 50%;
padding: 0 10px 0 10px;
}

ul#topnav li a:link, ul#topnav li a:visited {
text-decoration: none;
color: #fff;
font-weight: bold;
}

ul#topnav li a:hover, ul#topnav a:active {
color: #000;
background: #b7a241;
}

#leftcol {
float: left;
width: 315px;
margin-left: 0px;
padding: 10px;
background-color: #b7a241;
color: #6d071d;
}

#leftcol a:link, #leftcol a:visited {
text-decoration: none;
}

/*tooltip for when hover over language flags, 'font-size 100% is so works in IE 5.x*/
a.tooltip {
position: relative;
}

a.tooltip span {
display: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 1em;
left: 2em;
padding: 0.2em 0.6em;
border: 1px solid #000;
background-color: #d9c487;
color: #000;
}

a.tooltip:hover {
font-size: 100%;
}

#rightcol {
float: left;
width: 475px;
margin-left: 10px;
padding: 15px 0;
}

h3 {
color: #6d071d;
}

#footer {
clear: both;
padding: 5px 10;
background-color: #b7a241;
color: #fff;
}

table#bckgrnd  {
background-color: #c8c8c8;
}

tr.ltrcolor {
color: navy;
}

p.bckgrnd {
background-color: #b7a241;
font-weight: bold;
padding: 10px;
}
/*
font color not changing to black on the hover and active, but is set: "color: #000;"
why won't "h3#rightcol" affect only the right col where I want red headings?
*/