/********************************************************************/
/******************* Zero-Grade Styles ******************************/
/********************************************************************/
html {
  height: 100%;
}
body {
  height: 100%;
  padding: 0;
  margin: auto;
  text-align: center;
  background-image: url(img/bkgd-gradient-top.gif);
  background-repeat: repeat-x;
  background-position: left top;
}
#stage {
  xxwidth: 980px; /* IE don't like it; Safari centers */
  margin: 0;
  padding: 0;
  background-image: url(img/bkgd-gradient-bottom.gif);
  background-repeat: repeat-x;
  background-position: left bottom;
}
table, div {
  color: #000;
  font-size: 10pt;
  font-weight: normal;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  text-align: center;
}
small {
  font-weight: normal;
  font-size: 7pt;
}
img {
  border: 0;
  outline: none;
}
#bodyframe {
  padding: 0;
  width: 980px;
  background-image: url(img/bkgd-edge.gif);
  background-repeat: repeat-y;
  background-position: left top;
  overflow: auto;
  height: 70%;
}
#bodyframe tr {
  vertical-align: top;
}
#bodyframe td {
  vertical-align: top;
}
#main {
  width: 740px;
  padding-top: 10px;
  padding-right: 12px;
  text-align: center;
}
#logo {
  position: absolute;
  top: 40px;
  left: 30%;
  z-index: -1;
}
h1, h2, h3, h4, h5, h6       { line-height: 1.2em; }
h3                           { margin: 0; font-size: 14pt; }
h4                           { margin: 0; font-size: 12pt; }
h5                           { margin: 0; font-size: 10pt; }
h3.red, h4.red, h5.red       { color: red; }
h3.green, h4.green, h5.green { color: green; }
h3.blue, h4.blue, h5.blue    { color: blue; }

/********************************************************************/
/************************* Menu Styles ******************************/
/********************************************************************/
#menu {
  padding: 0 14px 0 14px;
  width: 200px;
  text-align: left;
  float: left; /* must for IE */
}
#menu ul {
  padding: 0;
  margin: 0;
}
#menu li {
  list-style: none;
  display: block;
  line-height: 48px;
}
#menu li a {
  height: 48px;
  width: 200px;
  color: #fff;
  text-decoration: none;
  background: #2DA6C0;
  background-image: url(img/btn_back.gif);
  background-repeat: no-repeat;
  display: block; /* must for Safari */
}
#menu li a:hover {
  text-decoration: underline;
  background-image: url(img/btn_back_over.gif);
  background-repeat: no-repeat;
}
#menu li a img {
  margin: 8px;
  float: left;
}
#menu #compatible {
  display: block;
}

/********************************************************************/
/*********************** Header Styles ******************************/
/********************************************************************/
#headerlinks {
  height: 160px;
  background-image: url(img/header.gif);
  background-repeat: no-repeat;
  width: 980px;
  text-align: right;
  padding: 0;
}
#headerlinks ul {
  padding-right: 12px;
  padding-top: 15px;
}
#headerlinks li {
  list-style: none;
  display: inline;
}
#headerlinks li a {
  text-decoration: none;
  color: #ddd;
  font-size: 8pt;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
}
#headerlinks li a:hover {
  text-decoration: underline;
}
#headerlinks ul li a.divider {
  border-right: solid 1px #fff;
  padding: 0 6px 0 6px;
}
/********************************************************************/
/******************** Styles for footer *****************************/
/********************************************************************/
#footerlinks {
  font-size: 8pt;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  width: 980px;
  height: 120px;
  background: #458524;
  background-image: url(img/footer.gif);
  background-repeat: no-repeat;
  background-position: bottom center;
}
#footerlinks ul {
  padding: 0;
  margin: 0;
  padding-top: 20px;
}
#footerlinks li {
  display: inline;
  list-style: none;
  padding: 0 8px 0 8px;
}
#footerlinks li a {
  color: #fff;
  text-decoration: none;
  font-size: 8pt;
  font-weight: bold;
}
#footerlinks li a:hover   { color: #fff; text-decoration: underline; }
#footerlinks li a:visited { color: #fff; text-decoration: none; }
#footerlinks li.divider   { border-right: solid 1px #fff; }

/********************************************************************/
#searchBar {
  padding: 0;
  text-align: right;
  width: 980px;
  height: 34px;
  background-image: url(img/bkgd-searchbar.gif);
  background-position: center;
  background-repeat: no-repeat;
}
#searchBar label {
  color: #fff;
  font: bold 9pt Arial, Helvetica, sans-serif;
  margin-right: 8px;
}
#searchBar form {
  padding-right: 24px;
  padding-top: 4px;
  margin: 0;
}
.searchTextbox {
  width: 450px;
}

/* ======================================================================== */
/*                LINKS                                                     */
/* ======================================================================== */
a {
  font-weight: bold;
  font-size: 10pt;
  font-family: Arial, verdana, sans-serif;
  color: #1070A0;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.iconMoreInfo {
  padding: 3px 0px 3px 24px;
  background-image: url(img/btn-small-more.gif);
  background-repeat: no-repeat;
  background-position: center left;
  line-height: 24px;
}
a.iconMoreInfo:hover {
  background-image: url(img/btn-small-more-over.gif);
  text-decoration: underline;
}
a.iconDownload {
  padding: 3px 0px 3px 24px;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url(img/btn-small-download.gif);
  line-height: 24px;
}
a.iconDownload:hover {
  background-image: url(img/btn-small-download-over.gif);
  text-decoration: underline;
}
a.iconBuyNow {
  padding: 3px 0px 3px 24px;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url(img/btn-small-buy.gif);
  line-height: 24px;
}
a.iconBuyNow:hover {
  background-image: url(img/btn-small-buy-over.gif);
  text-decoration: underline;
}
a.buttonDownload {
  display: inline-block;
  width: 120px;
  height: 32px;
  background-image: url(img/btn-download.gif);
  background-repeat: no-repeat;
}
a.buttonDownload:hover {
  background-image: url(img/btn-download-over.gif);
}
a.buttonBuyNow {
  display: inline-block;
  width: 120px;
  height: 32px; 
  background-image: url(img/btn-buynow.gif);
  background-repeat: no-repeat;
}
a.buttonBuyNow:hover {
  background-image: url(img/btn-buynow-over.gif);
}
a.buttonMoreInfo {
  display: inline-block;
  width: 120px;
  height: 32px;
  background-image: url(img/btn-moreinfo.gif);
  background-repeat: no-repeat;
}
a.buttonMoreInfo:hover {
  background-image: url(img/btn-moreinfo-over.gif);
}


/* ************** Action: Buy-Ship Options ************** */
.action {
  float: left;
  background: #eee;
  background-image: url(img/actions.gif);
  background-repeat: no-repeat;
  background-position: top;
  height: 280px;
  width: 220px;
}
.actionContent {
  overflow: hidden;
  padding: 4px;
  text-align: justify;
  font: 8pt Arial, Helvetica, sans-serif;
}
.action img {
  float: left;
  padding: 2px;
}
.action h4 {
  font-size: 12pt;
  line-height: 14pt;
  border-bottom: solid 1px #000;
  padding-top: 10px;
  margin-bottom: 4px;
}
.action hr {
  clear: both;
  height: 1px;
  border: 0; 
  border-top: 1px solid #000;
}
.actionBlue {
  background: #eef;
  background-image: url(img/actions-blue.gif);
  background-repeat: no-repeat;
  background-position: top;
  height: 280px;
  width: 220px;
}

/* ****************** Homepage Editorial ******************* */
.hmedit {
  width: 710px;
  height: 320px;
  background: #eee;
  background-image:url(img/hmedit.gif);
  background-repeat: no-repeat;
}
.hmedit .title {
  padding-top: 8px;
  text-align: center;
  border-bottom: 1px dotted black;
}
.hmedit .text h4 {
  padding-top: 10px;
}
.hmedit hr {
  clear: both;
  height: 1px;
  border: 0; 
  border-top: 1px dotted black;
}
.hmedit .box {
  float: left;
  width: 170px;
  text-align: center;
  top: 10px;
  position: relative;
}
.hmedit .text {
  float: left;
  width: 400px;
  padding: 4px;
  text-align: justify;
}
.hmedit .text ul {
  xdisplay: list-item;
  list-style: disc outside;
  margin-top: 4px;
}
.hmedit .pictures {
  float: right;
  padding: 4px;
  width: 120px;
}
.hmedit .pictures img {
  padding: 4px;
}

/* ****************** List Window with Title ******************* */
.list {
  width: 194px;
  background: white;
  clear: both;
}
.list h3.orange {
  background: orange;
  background-image: url(img/hdr_mod_orn.gif);
  background-repeat: no-repeat;
  height: 24px;
  font-size: 13px;
  color: #FFF;
  padding-top: 5px;
  width: 194px;
  margin: 0;
}
.list h3.black {
  background: black;
  background-image: url(img/hdr_mod_slate.gif);
  background-repeat: no-repeat;
  height: 24px;
  font-size: 13px;
  color: #FFF;
  padding-top: 5px;
  width: 194px;
  margin: 0;
}
.list h3.teal {
  background: teal;
  background-image: url(img/hdr_mod_teal.gif);
  background-repeat: no-repeat;
  height: 24px;
  font-size: 13px;
  color: #FFF;
  padding-top: 5px;
  width: 194px;
  margin: 0;
}
.list h3.green {
  background: green;
  background-image: url(img/hdr_mod_grn.gif);
  background-repeat: no-repeat;
  height: 24px;
  font-size: 13px;
  color: #FFF;
  padding-top: 5px;
  width: 194px;
  margin: 0;
}
.list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  border: 1px solid #ccc;
  border-bottom: 0;
  padding: 2px 0 2px 5px;
}
.list .bottom {
  border-bottom: 1px solid #ccc;
}
.list .frame {
  border: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 2px 0 2px 5px;
}

/* ****************** Category Wide Window ******************* */
.cat {
  clear: both;
  width: 710px;
}
.cat .text {
  border: 1px solid #888;
  border-bottom: 1px solid #888;
  padding: 2px 10px 2px 10px;
  text-align: justify;
}
.cat hr {
  clear: both;
  height: 1px;
  border: 0; 
  border-top: 1px solid #000;
}
.cat h3.teal{ 
  background: teal;
  background-image: url(img/main-top-teal.gif);
  background-repeat:no-repeat;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  font-family: arial;
  color: #FFFFFF;
  padding: 5px 0 0 15px;
  margin: 0px;
}
.cat h3.orange{
  background: orange;
  background-image: url(img/main-top-orange.gif);
  background-repeat:no-repeat;
  height:24px;
  line-height: 24px;
  font-size:13px;
  font-family:arial;
  color:#FFF;
  padding:5px 0 0 15px;
  margin:0px;
}
.cat h3.black{ 
  background: black;
  background-image: url(img/main-top-black.gif);
  background-repeat:no-repeat;
  height:24px;
  line-height: 24px;
  font-size:13px;
  font-family:arial;
  color:#FFFFFF;
  padding:5px 0 0 15px;
  margin:0px;
}
.cat h3.green{ 
  background: green;
  background-image: url(img/main-top-green.gif);
  background-repeat:no-repeat;
  height:24px;
  line-height: 24px;
  font-size:13px;
  font-family:arial;
  color:#FFFFFF;
  padding:5px 0 0 15px;
  margin:0px;
}

/* ************** SUPPORT FORM ************** */
#support{
  text-align: left;
  margin: 0px 10px;
}
#support label{
  display: block;
  color: #000;
  font-weight: bold;
}
#support form{
  padding: 0px;
  margin: 0px;
}
#support form input{
  display: block;
  width: 600px;
}
#support form textarea{
  display: block;
  width: 600px;
}
#support small{
  font: 8pt;
}

/* ************** PRODUCT PAGE ************** */
.product {
  text-align: justify;
  font-weight: normal;
  color: #000;
  padding: 8px;
  xxmargin: 4px;
}
.product ul {
  margin: 6px auto;
}
.product h5{
  margin: 8pt 0 2pt;
  font-weight: bold;
}
.product .leftimg {
  float: left;
  margin: 4px;
}
.product hr {
  height: 1px;
  color: #ccc;
}
/* ************** TABLE 3D ************** */
.table3d{
  font-size: 10pt;
  width: 708px;
  border: 1px solid #000;
  margin: 0;
  padding: 0;
  text-align: left;
}
.table3d th{
  background: silver;
  font-weight: bold;
  border-right: 1px solid #000;
  border-bottom: 1px outset #000;
}
.table3d td{
  padding: 2px;
  border: 0;
  border-right: 1px outset #ccc;
  border-bottom: 1px outset #ccc;
}
/* ************** SPACE ( ) ************** */
.space {
  display: inline;
  float: left;
  padding: 10px;
}