/*
#F7F9FB = pale: content background, body background, tab hover bg, current tab bg, inactive tab text
#EEEEEE = very light grey - background of textbox
#DDDDDD = quite light grey: header and footer bg  
#999999 = light gray: image border, textbox border 
#666666 = mid grey: link hover, inactive tab border,  footer text and links
#333333 = dark grey: body, paragraph, H, table header bot border, tab bot border, current tab border top-l-r, tab hover border, footer border
#DD3333 = red (actual is #d73936): links, inactive tab bg, current tab text, content left stripe, footer link hover
*/

body {
	margin: 0px;
	padding: 0px;
	background-color: #F7F9FB;
}

body, p {
	font-family:verdana, arial, sans-serif; 
	color: #333333;
}
/* a:link, a:visited  { */
a  {
	color: #DD3333;
	font-weight: bold;
	text-decoration: underline; 
	background-color: transparent;
}
a:hover {
	color: #666666;
	text-decoration: underline; /* only Opera loses the underline */
	background-color: #EEEEEE;
}
h2 {
	margin-top: 0.8em; /* only ie seems to need this */
/*	border: 1px solid #00DDDD; /* for debug */
}
h3 {
	margin-top: 1.8em;
	color: #DD3333;
/*	border: 1px solid #00DD33; /* for debug */
}
h4 {
	/* this is used in the product text boxes. The customer page redefines h4 margins and padding */
	margin-top: 0.6em; 
	margin-bottom: 0.4em;
}

#header   {
	background: url('images/icons/bg5.gif') repeat-x bottom; /* */
}

#header p, #header table  { /* table#header, */
	font-size: x-small;
	font-weight: bold;
	margin-top: 0px; 
	margin-bottom: 0px; 
}
#header table  { /* was table#header */ 
	margin: 0px; 
}

#header table tr td  {
	padding: 4px; 
	border: 0px;
}

#navigation h5, #footer_navigation h5 {
	/* extra text can be written in <h5> for non-graphic browsers */
	display: none;
}

div#navigation  {
	padding-top: 0px; 
	margin-top: 0px; 
	display: inline; 
}

#navigation ul {
	margin-left: 0; 
	padding: 4px 0 3px;   /* was 3px but this cut off the border ###### needs work, this adds padding beneath box */
	font-family: Verdana, sans-serif; 
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #333333; 
	display: inline; 
/*	border: 1px solid green; /* for debug */
}
.tabsize_800 {
	font-size: 13px; /* 13px is the max size for 800x600 screens */ 
}
.tabsize_1024 {
	font-size: medium; 
}
.tabsize_1280 {
	font-size: medium; 
}

#navigation ul li {
	list-style: none; 
	display: inline; /* must be inline */
	margin: 0; 
	padding: 1px; /* space between tabs */
}

#navigation ul li a {
	margin-left: 3px; 
	padding: 3px 0.5em;  /* table#header padding needs to be 1 larger than the top padding here */ 
	border: 1px solid #666666;
	border-bottom: none; 
	color: #F7F9FB;
	background: #DD3333; 
	text-decoration: none; 
}
#navigation ul li a:hover {
	color:  #DD3333; 
	background: #F7F9FB; 
}

#navigation ul li a#current {
	color: #DD3333;
	background: #F7F9FB; 
	border: 1px solid #333333; 
	border-bottom: 1px solid #F7F9FB; 
}

/* =============================================================== */

.central {
	text-align:center;
/*	border: 1px solid blue; /* for debug */
}
.margin_auto {
	width:560px; 
	margin-left: auto;
	margin-right: auto;
	text-align:left;
/*	border: 1px solid green; /* for debug */
}
.margin_auto p, .margin_auto h3 {
	padding-left: 4px;  /* to line up with image edge */
}

#content   {
	font-size: small;
	display:block;
	margin: 0px; 
	padding: 2px 3% 5px 116px; 
	background: url('images/icons/bg7.gif') repeat-y ; /* red-grey gradient image */
}

#customers ul h4 {
	margin-left: -40px;
	margin-top: 20px;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-bottom: 4px;
/*	border: 1px dotted #FF0044; /* for debug */
}

#customers ul li a#customer_cur {
	color: #666666;
	text-decoration: none; 
}
#customers ul li a:hover#customer_cur {
	background-color: transparent;;
}

/* =============================================================== */

#footer_navigation  {
	padding: 0px; 
	margin: 0px; 
	margin-top: 20px; 
	border: none;
	font-size: x-small;
	text-align: center;
}

#footer_navigation ul {
	margin: 0px;
	padding: 0px 1px; 
}

#footer_navigation ul li {
	list-style: none; 
	display: inline; /* must be inline */
	margin: 0px; 
	padding: 0px 5px; /* space between tabs */
}

#footer_navigation a {
	font-weight: normal;
	color: #dd3333; 
}

#footer_navigation a:hover {
	color: #666666;
}

#footer_navigation ul li a#footer_cur {
	color: #666666;
	text-decoration:none; 
}
#footer_navigation ul li a:hover#footer_cur {
	background-color: transparent;;
}

/* =============================================================== */

#footer {
	font-size: x-small;
	margin: 0px 0px 7px 0px;
	padding: 3px 10px; 
	color: #666666;
	border-top: 1px solid #333333; 
	border-bottom: 1px solid #333333; 
	background-color: #DDDDDD;
	text-align:center;
}

#footer a  {
	font-weight: normal;
	color: #666666;
}

#footer a:hover {
	color: #dd3333; 
	background-color: transparent;
}

/* =============================================================== */
/* div.img-box is the surrounding box with caption */
div.img-box {
	float:left;
	margin: 5px 27px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: none;
/*	border:1px dotted gray; /*for debug */
}
div.img-box p {
	text-align: left;
	margin:0px 0px 15px 4px;
	padding:5px 0px 0px 0px;
	border: none;
/*	border:1px dashed #FFCC00; /* */
}
.img-shadow {
	float:left; 
	background: url(images/icons/shadowalpha.png) no-repeat bottom right !important;
	background: url(images/icons/shadow.gif) no-repeat bottom right;
	margin: 10px 1px 0 10px !important;
	margin: 10px 1px 0 5px;
}
ul.textbox li div.img-box div.img-shadow {
	background: url(images/icons/shadowalpha.png) no-repeat bottom right !important;
	background: url(images/icons/shadow_grey.gif) no-repeat bottom right; /* shadow_grey is darker for use with #EEEEEE backgrounds */
/*	border: 1px solid purple; /* */
}

.img-shadow img {
	display: block;
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #999999;
	margin: -6px 6px 6px -6px;
	padding: 4px;
} 

/* =============================================================== */
/* from http://www.greywyvern.com/code/min-height-hack.html */ 
.prop {
	height:420px;
	float:right;
	width:1px;
/*	background-color: #000000; /* */
}

.propclear {
	clear:both;
	height:1px; /* 0 defaults to something larger in IE, therefore must use 1 */
	overflow:hidden;
/*	background-color: #000000; /* */
}
.propclearleft {
	clear:left;
	height:1px;
	overflow:hidden;
/*	background-color: #000000; /* */
}
.propclearright {
	clear:right;
	height:1px;
	overflow:hidden;
/*	background-color: #000000; /* */
}
/* =============================================================== */

div#textbox {
	margin:10px 4px;
	border:1px solid #999999;
	background-color:#EEEEEE;
	padding:5px;
	display:block;
}

ul.textbox {
	list-style-type:none;
	margin:10px 4px;
	padding:0px;
}
ul.textbox li {
	border:1px solid #999999;
	background-color:#EEEEEE;
	padding:5px;
	margin-bottom:10px;
}
ul.textbox li img {
	xfloat:left;
	xmargin-right:5px;
}
ul.textbox li p {
	width: 100%;
}
ul.textbox li ul li {
	border: none;
	margin: 0px;
	padding: 3px;
}
ul.textbox li div.img-box {
	margin-left: 11px; /* normally these are 5px and 27px but due to the textbox padding & margin it is reduced to get 4 pictures on one row */
	margin-right: 11px; 
/*	border:1px dotted gray; */
}
ul.textbox li h3 {
	margin-top: 0.4em;
}

/* =============================================================== */
ul.logo-bullet {
	list-style-type:disc; 
	list-style-image:url('images/icons/logo_16.gif');
	margin-left:0px; /* before border */
	padding-left:40px; /* before bullet */
	margin-bottom:5px; /* something larger is the default in ie5 */ 
/*	border: 1px solid #55FF44;  /* */
}
ul.logo-bullet li {
	margin-left:0px;
	padding-left:6px; /* after bullet */
	padding-top:0px; /* ?????between rows */
	padding-bottom:8px; /* between rows */
	text-indent: 0em;
/*	border: 1px solid blue; /* */
}

#circle {
	background-color: #999999; /* used in browser_info */ 
}

.leftcol {
	float:left;
/*	width:260px; /* */
	margin:0px;
	padding:0px;
	padding-right:20px;
/*	border: 1px solid blue; /* */
}

.rightcol {
	text-align:center;
	float:right;
/*	width:360px; */
/*	position:relative; */
	margin:0px;
	padding:0px;
/*	padding-left:50%; */
/*	border: 1px solid red; /* */
}