/*
#E36018; - rgb(243,0,28);      - cork red
#eeeff0; - rgb(238,239,239);   - background lightgrey
#686f72; - rgb(104,111,114);   - extrainfo darkgrey text
#7b8287; - rgb(123,130,135);   - main darkgrey text
#888e95; - rgb(136,142,149);   - options darkgrey text
#a6acb2; - rgb(166,172,178);   - footer grey text
*/

#header {
/*  margin-top: 4px;
  border-bottom: 4px solid #ffffff; */
}

#header h1 {
  padding-top: 10px;
  /* padding-left: 12px; */
  padding-bottom: 5px; 
  color: #ffffff;
  /* background: #E36018 url("../img/fullwidthheaderroundedcorners.gif") no-repeat top left;*/
  font-family: Times New Roman, Bitstream Vera Serif, serif; /* Have the alt of the logo look to have a slightly similar font with images disabled */
  font-style: italic;
  font-size: 30px;
}

#header img {
  border: 0;
  display: block;
}

#header :link, #header :visited {
  color: #ffffff;
  background-color: inherit;
  text-decoration: none;
}

#nav {
  border-bottom: 5px solid #ffffff;
  padding-left: 8px;
  height: 20px; /* Border/height on the same element here is okay despite IE 5.x's box model problems because the links (with carefully calculated padding) stretch this to the desired height. */
  color: #ffffff;
  background: #E36018 url("../img/fullwidthbarroundedcorners.gif") no-repeat top left;
  font-size: 11px;
}

#nav :link, #nav :visited, #nav span  {
  display: block;
  float: left;
  margin: 0 3px;
  padding: 3px 3px 4px 2px;
  color: #ffffff;
  background-color: inherit;
  text-decoration: none;
}

/* Mac IE specific hack to make the space work out. \*//*/
* html #nav :link, * html #nav :visited {
  margin: 0 2px 0 3px;
}
/* */

#nav :link:hover, #nav :visited:hover {
  text-decoration: underline;
}

#nav :link img, #nav :visited img { 
  width: 9px;
  height: 6px;
  padding-right: 0; /* *blinks* Why is safari suddenly messing things up here?? */
  padding-left: 8px;
  margin-right: 0;
  margin-left: 0;
}

#main {
  /* \*/
  clear: left;
  /*  */
  width: 764px;
  height: 318px;
}

#main .content { /* The highest level block inside #main which is guaranteed not to contain #manualcontent will have .content */
  font-size: 11px;
  color: #7b8287;
  background-color: inherit;
}

#main .content h2, #main .content h3 {
  margin: 0 5px 10px 0;
  padding-bottom: 6px;
  color: #E36018;
  /* background: transparent url("../img/hdottedline.gif") repeat-x bottom; */ /* Can't get the desired dotted effect with border-style unfortunately. */
  font-family: Arial, Bitstream Vera Sans, sans-serif;
  font-size-adjust: 0.53;
  font-size: 15px;
  text-transform: uppercase;  
}

#main .content h2 {
  padding-top: 11px;
}

#main .content h3 {
  padding-top: 5px;
}

#main .content :link, #main .content :visited {
  color: #E36018;
  background-color: inherit;
  text-decoration: none;
}

#main .content :link:hover, #main .content :visited:hover {
  text-decoration: underline;
}

#main #crumbs h2 {
  margin-top: 0;
  padding-top: 15px;
  font-size: 12px;
}

#main #crumbs :link, #main #crumbs :visited {
  color: #E36018;
  background-color: inherit;
  text-decoration: none;
}

#main #crumbs :link:hover, #main #crumbs :visited:hover {
  text-decoration: underline;
}

#main #options
{
	background-color: #ffffff;
	float: left;
	width: 183px;
	height: 318px;
	font-family: Arial, Bitstream Vera Sans, sans-serif;
	background-image: url(../img/left_nav_bg.jpg);
	background-repeat: no-repeat;
	font-size-adjust: 0.53;
}

#main #options h3 {
  margin: 0 15px 5px 11px;
  padding-top: 15px; /* <= Mozilla 1.0 branch (N6.x/N7.0) workaround */
}

#main #options #cat_bot
{
 display: none;
} 

#main #options ul
{
	margin-top: 5px;
	margin-bottom: 10px;
	margin-right: 5px;
}

#main #options ul li
{
	font-weight: normal;
	margin-bottom: 2px;
	margin-left: 12px;
	list-style-type: none;
}

#main #options ul ul {
  margin: 0;
}

#main #options ul ul li
{
	margin-top: 0px;
	font-weight: normal;
	list-style-image: none;
	margin-left: 26px;
	list-style-type: none;
}

*html #main #options ul ul li
{
	margin-top: 0px;
	font-weight: normal;
	list-style-image: none;
	margin-left: 10px;
	list-style-type: none;
}

#main #options :link, #main #options :visited {
  color: #E36018;
  background-color: inherit;
  text-decoration: none;
}

#main #options :link:hover, #main #options :visited:hover {
  color: #E36018;
  background-color: inherit;
  text-decoration: none;
}

#main #maincontent {
  float: left;
  width: 574px;
  height: 318px;
  margin-left: 7px;
}

#main #extrainfo {
   background-color: #EEEFF1;
	float: right;
	width: 183px;
	height: 100%;
	font-family: Arial, Bitstream Vera Sans, sans-serif;
	font-size: 11px;
	background-image: url(../img/optionsbg.gif);
	background-repeat: repeat-y;
	font-size-adjust: 0.53;
}

#main #extrainfo h3 {
  margin: 0 15px 5px 11px;
}

#main #actualcontent
{
	overflow: auto;
	width: 574px;
	height: 100%;
	padding: 0;
	margin: 0;
}

#main #content, #main #manualcontent {
  margin-right: 3px;
}

#main #manualcontent, #popuppage #manualcontent { /* #manualcontent has mostly the same styling as regular .content, but this is accidental, so these rules shouldn't be merged. */
  color: #7b8287;
  background-color: #ffffff;
  font-size: 11px;
  padding-bottom: 10px;
}

#main #manualcontent :link, #main #manualcontent :visited, #popuppage #manualcontent :link, #popuppage #manualcontent :visited {
  color: #E36018;
  background-color: inherit;
  text-decoration: none;
}

#main #manualcontent :link:hover, #main #manualcontent :visited:hover, #popuppage #manualcontent :link:hover, #popuppage #manualcontent :visited:hover {
  text-decoration: underline;
}

#main #manualcontent p, #popuppage #manualcontent p, #main #manualcontent ul, #popuppage #manualcontent ul, #main #manualcontent ol, #popuppage #manualcontent ol, #main #manualcontent li, #popuppage #manualcontent li {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#main #manualcontent img, #popuppage #manualcontent img {
  margin: 3px;
}

#main #manualcontent td, #popuppage #manualcontent td { /* IE 5.x doesn't inherit this into tables. *sighs deeply* */
  /* This _crashes_ for IE on the Mac!! \*/
  vertical-align: top;
  /* */
  font-size: 11px;
  color: #7b8287;
  background-color: inherit;
}

#main #manualcontent td[align="middle"], #popuppage #manualcontent td[align="middle"] { /* Make real browsers deal with the horribly broken code for centering text spit out by the rich text editor. I actually assume gecko has a rule in quirks.css for this, but of course we're in standards compliance mode. Le Sigh. */
  text-align: center;
}

#main #manualcontent .header, #popuppage #manualcontent .header {
  display: block;
  margin: 0 5px 10px 0;
  padding-bottom: 6px;
  color: #E36018;
  /* background-image: url("../img/hdottedline.gif");
  background-repeat: repeat-x;
  background-position: bottom; */
  font-family: Arial, Bitstream Vera Sans, sans-serif;
  font-size-adjust: 0.53;
  font-size: 16px;
  font-weight: bold;
}

#main #manualcontent .header img, #popuppage #manualcontent .header img {
  display: block;
  font-size: 14px;
}

#main img.headertext, #popuppage img.headertext {
  display: block;
  font-size: 14px; /* Make the alt text fit when images are disabled. */
}

#main #manualcontent .subheader, #popuppage #manualcontent .subheader {
  color: #888e95;
  background-color: inherit;
  font-weight: bold;
}

#footer, #popupfooter {
  /* \*/
  clear: both;
  /*  */
  margin: 0 0 10px 0;
  padding-top: 5px;
  font-size: 9px;
}

#footer {
  color: #a6acb2;
  background-color: inherit;
 /* text-align: left !important; */
}

 #footer .bar 
 {
  border-bottom: 0px solid #ffffff;
  color: inherit;
  height: 21px;
  vertical-align: middle;  
  background: #ffffff url("../img/learnmore-bar.gif") no-repeat top left;
} 

#footer .footerbar 
 {
  border-bottom: 5px solid #ffffff;
  color: inherit;
  height: 21px;
  vertical-align: middle;  
  background: #ffffff url("../img/nav-bar.gif") no-repeat top left;
} 

#footer img.brandimg {
  /* width: 188px;
  height: 61px; */
  margin: 2px 2px 2px 2px;
  border: 0;
}

#footer img.last {
  margin-right: 0;
}

#footer .big 
{
 font-size:11px;
 color: #ffffff;
 font-weight: bold; 
 font-family: Arial;
}

#footer .small
{
	font-size: 10px;
	color: #ffffff;
	font-family: Arial;
}

#footer A 
{
	font-size: 10px;
	color: #ffffff;
	font-family: Arial;	
}

#footer A:hover 
{
	font-size: 10px;
	color: #ffffff;
	font-family: Arial;	
	text-decoration: none; 
}


#footer p {
  clear: left;
  padding-top: 22px;
}

#footer p :link, #footer p :visited {
  color: #a6acb2;
  background-color: inherit;
  text-decoration: none;
}

#popupfooter p :link, #popupfooter p :visited {
  color: #496660;
  background-color: inherit;
  text-decoration: none;
}

#footer p :link:hover, #footer p :visited:hover, #popupfooter p :link:hover, #popupfooter p :visited:hover {
  color: #E36018;
  background-color: inherit;
}

#popupfooter {
  color: #a6acb2;
  background-color: inherit;
  text-align: right !important;
  padding-right: 10px;
}

/* We hatesss it.... Yesss my precioussss, we hatesss Mac IE! (Though Tantek is still cool.)
   Thus we use a dummy clear element (set serverside; yes, we do sucky useragent sniffing) to clear. */
.stupidclearhack {
  clear: left;
}

/* Forgive me, for I am sinning... \*/
* html #main #actualcontent {
  scrollbar-face-color: #eeeff0;
  scrollbar-track-color: #f9f9fa;
  scrollbar-darkshadow-color: #e3e3e6;
  scrollbar-highlight-color: #f3f3f6;
  scrollbar-shadow-color: #eaeaec;
  scrollbar-3dlight-color: #f3f3f6;
}
/* */

#cat_top
{
 padding-left: 10px;
 padding-bottom: 5px;
 padding-top: 5px;
}

#madeby{width:82px;height:136px;display:block;margin: 0 auto;top:10px}
#madeby a{border:0;width:82px;height:68px;background: url(../img/websiteby_Off.gif) no-repeat 0 0;display:block}
#madeby a:hover{border:0;width:82px;height:68px;background: url(../img/websiteby_On.gif) no-repeat 0 0;display:block}