/*********************************************
 *                                           *
 * Author: Bob Johnson                       *
 * Copyright (c) 2009 Renegade Labs Inc      *
 *                                           *
 * This is the stylesheet for 'style 2'      *
 * for screen browsers.                      *
 *********************************************/

/* --- MAIN BODY --- */

html, body {
  font-family: arial, sans-serif;
  font-size: 0.9em;
  background-color: #ebf5fc;
}

/* --- COMMON CLASSES --- */

.fullscreen {
  /* Uncomment for small displays. */
  /* display: none; */
}

.clear {
  clear: both;
  display: block;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.navhide {
  display: none;
}

.u {
  text-decoration: underline;
}

img.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* --- MicroFormats --- */

.geo, .vcard {
  display: none;
}

/* --- SITE LAYOUT --- */

div#site-main {
  margin-left: 25px;
  margin-right: 25px;
}

div#site-header {
  clear: both;
  margin-top: 25px;
  background: #cccccc url(images/bghdr.gif);
  font-style: italic;
  font-size: 175%;
  color: black;
}

div#site-header img {
  padding-left: 30px;
}

div#site-footer {
  clear: both;
  background: #cccccc url(images/bg.gif);
  font-style: italic;
  text-align: center;
  font-size: 75%;
  color: black;
}

/* --- NAVIGATION --- */

div#top-nav {
  clear: both;
  float: left;
  background: #cccccc url(images/bg.gif);
  padding-top: 10px;
  width: 100%;
}

#top-nav ul {
  list-style: none;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
}

#top-nav li {
  float: left;
  display: block;
  white-space: nowrap;
}

#top-nav li a {
  margin: 0px;
  padding: 0px 10px 0px 10px;
  border-right: solid 1px rgb(255,255,255); 
  text-decoration: none; 
  font-size: 130%;
  color: navy;
}

#top-nav a:hover {
  color: rgb(50,50,50); 
  text-decoration: none;
}

#top-nav a.selected {
  color: rgb(110,110,110); 
  text-decoration: none;
  cursor: default;
}

/* --- CONTENT --- */

div#content-left {
  width: 30px;
  float: left;
  display: inline;
}

div#content-main {
  clear: none;
  margin-right: 270px;
  margin-left: 30px;
  padding-bottom: 1em;
}

div#content-main h1 {
  clear: left;
  font-weight: bold;
  font-size: 150%;
  border-bottom: 2px solid navy;
  padding-top: 1em;
}

div#content-main h2 {
  font-size: 125%;
  color: navy;
}

div#content-right {
  float: right;
  display: inline;
  padding-right: 30px;
  width: 220px;
}

/* --- COLUMN TRICKINESS --- */

div#column1 {
  margin: 0;
  padding: 0;
  background: url(images/bgside.gif) top right repeat-y;
  width: 100%;
}

div#column2 {
  margin: 0;
  padding: 0;
  background: white url(images/bgside.gif) left repeat-y;
  width: 100%;
}

/* --- PRODUCT TIE-IN --- */

div.productmain img {
  margin-left: 1em;
  margin-right: 1em;
  float: left;
}

div.productmain a img {
  border: none;
}

div.productmain a:link img {
  border: none;
}

div.productmain a:visited img {
  border: none;
}

div.productmain p {
  margin-left: 220px;
  margin-right: 1em;
}

div#productsub {
  margin-left: 3%;
  margin-right: 3%;
}

.productsubleft {
  float: left;
}

.productsubleft a img {
  display: block;
  border: none;
}

.productsubleft a:link img {
  display: block;
  border: none;
}

.productsubleft a:visited img {
  display: block;
  border: none;
}

.productsubright {
  float: right;
}

.productsubright a img {
  display: block;
  border: none;
}

.productsubright a:link img {
  display: block;
  border: none;
}

.productsubright a:visited img {
  display: block;
  border: none;
}

.productsubcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.productsubcenter a img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

.productsubcenter a:link img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

.productsubcenter a:visited img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
}

.productsublist {
  margin-top: 0.5em;
  margin-bottom: 0;
}

div.testimonial {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
  border: 1px solid navy;
  background: #eeeeee;
}

div.testimonial p {
  margin-top: 0px;
  margin-bottom: 5px;
  font-style: italic;
  font-size: small;
}

div.testimonial dl dd {
  font-style: italic;
  font-size: small;
}

div#features table {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  font-size: small;
  width: 98%;   /* Don't set to 100 or IE6 will gag. */
  border: 1px solid black;
}

div#features table td {
  padding-right: 5px;
}

div#features table dt {
  font-weight: bold;
  margin-top: 5px;
  margin-left: 10px;
}

.featurehighlight {
  font-weight: bold;
}

.featuredetail {
}

.m3gxt {
  background: url(images/BlueGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
  margin-top: 1em;
}

.m3gxt h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.m3gxt h3 {
  background: url(images/BlueGradient.png);
  background-repeat: repeat-x;
  text-align: center;
  color: black;
}

.m3g {
  background: url(images/GrayGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
  margin-top: 1em;
}

.m3g h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.m3g h3 {
  background: silver;
  background-repeat: repeat-x;
  text-align: center;
  color: black;
}

.blue328 {
  background: url(images/BlueGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
  margin-top: 1em;
}

.blue328 h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.blue328 h3 {
  background: url(images/BlueGradient.png);
  background-repeat: repeat-x;
  text-align: center;
  color: black;
}

.m16 {
  background: url(images/GrayGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
  margin-top: 1em;
}

.m16 h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.m16 h3 {
  background: silver;
  background-repeat: repeat-x;
  text-align: center;
  color: black;
}

.gray328 {
  background: url(images/GrayGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
  margin-top: 1em;
}

.gray328 h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.gray328 h3 {
  background: silver;
  background-repeat: repeat-x;
  text-align: center;
  color: black;
}

.mxe {
  background: url(images/MXEGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
}

.mxe h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.mxe h3 {
  background: url(images/MXEGradient.png);
  background-repeat: repeat-x;
  text-align: center;
  color: black;
}

.options {
  background: url(images/OptionGradient.png);
  background-repeat: repeat-x;
  vertical-align: top;
}

.options h1 {
  margin-left: 3%;
  margin-right: 3%;
}

.options h3 {
  background: url(images/OptionGradient.png);
  background-repeat: repeat-x;
  text-align: center;
  color: black;
  clear: left;
  height: 1.2em; /* IE won't behave without this. */
}

div.optionsitem {
  width: 45%;
  min-width: 250px; /* Ignored by IE. */
  float: left;
  margin: 15px;
}

div.optionsitem p {
  font-size: small;
  font-weight: normal;
  margin: 5px;
}

div.optionsitem img {
  float: left;
  margin: 5px;
}

div.optionsitem table {
  clear: left;
  border: 1px dashed aqua;
  width: 100%;
  font-size: small;
}

/* Invalid CSS, but required by IE. */
col.optionsspecitem {
  text-align: right;
  font-weight: bold;
  padding-right: 5px;
}

col.optionsspecvalue {
  text-align: left;
  font-weight: normal;
}

/* And this is the valid CSS. Child selector format has to be used 
   because IE6 can't grok it. Using descendant format IE6 has render bugs. */
div.optionsitem table>tbody>tr>td {
  text-align: right;
  font-weight: bold;
  padding-right: 5px;
}

div.optionsitem table>tbody>tr>td+td {
  text-align: left;
  font-weight: normal;
}

.optionordernum {
  font-weight: bold;
  color: gray;
}

.optionheading {
  font-weight: bold;
  font-size: 125%;
}

/* --- FORMS --- */

input {
  background-color: #ffffff;
  color: #999999;
  border: 1px solid #2763a5;
  padding: 3px;
}

.searchbutton {
  padding: 2px;
  background-color: navy;
  color: #ffffff;
  border: 1px solid #2763a5;
}

/* --- BREADCRUMBS --- */

div#crumb {
  font-size: x-small;
}

/* --- SIDEBAR BOXES --- */

div.sidebox {
  margin-top: 1em;
  margin-bottom: 1em;
  border: solid 1px navy;
}

.sidebox img {
  text-align: center;
}

.sideboxtitle {
  margin: 4px;
  background: navy;
  color: white;
  text-align: center;
  font-size: large;
}

/* --- SIDEBOX CONTENT --- */

.sideboxcontent {
  margin-right: 4px;
  margin-left: 4px;
}

.sideboxcontent p {
  font-size: small;
}

.sideboxnews dl {
  text-align: left;
  font-size: small;
  margin-left: 4px;
}

.sideboxnews dt {
  font-style: italic;
  margin-top: 4px;
}

.sideboxnews dd {
  margin-left: 15px;
  margin-right: 4px;
}

.sideboxnews a:link {
  color: black;
  text-decoration: none;
}

.sideboxnews a:visited {
  color: gray;
  text-decoration: none;
}

.sideboxnews a:focus {
  color: blue;
  text-decoration: none;
}

.sideboxnews a:hover {
  color: blue;
  text-decoration: none;
}

.sideboxevent {
  margin-right: 4px;
  margin-left: 4px;
  text-align: center;
}

.sideboxevent a:link {
  text-decoration: none;
}

.sideboxevent a:visited {
  text-decoration: none;
}

.sideboxcenter {
  margin-right: 4px;
  margin-left: 4px;
  text-align: center;
}

.sideboxmail {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1em;
  text-align: center;
  font-size: x-small;
}

.sideboxform {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  background-color: #f0f0f0;
}

.sideboxform textarea {
  width: 200px;
}

.sideboxform button {
  background-color: #ebf5fc;
}

.sideboxfeed {
  margin-right: 4px;
  margin-left: 4px;
  font-size: small;
}

.sideboxfeed img {
  float: right;
}

.sideboxpdf p {
  margin-left: 26px;
}

.sideboxpdf img {
  float: left;
  margin-top: 5px;
  margin-left: -21px;
  border: none;
}

.salesform {
  color: navy;
}

/* --- NEWS --- */

div.events {
  margin: 0;
}

.events p {
  font-style: italic;
  font-size: 125%;
  margin-top: 1em;
}

.events ul {
  list-style: none;
}

.events ul p {
  font-style: normal;
  font-size: 100%;
}

.events hr {
  width: 50%;
}

.reviews dt {
  margin-top: 1em;
}

.reviews a {
  font-weight: bold;
}

div.awards {
  margin: 0;
}

.awards p {
  float: left;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 150px;
  overflow: auto;
}

.press-releases h3 {
  font-style: italic;
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.press-releases h4 {
  font-weight: bold;
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
  margin-left: 2em;
}

div#press-release-body h1 {
  font-variant: small-caps;
  font-size: 150%;
  text-decoration: underline;
  font-weight: normal;
  border: none;
}

div#press-release-body h2 {
  color: black;
  font-size: 150%;
  font-weight: bold;
}

/* --- SALES --- */

.dealermap {
  border: none;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.dealerblock {
  float: left;
}

#usdealerwindow {
  height: 240px;
  width: 400px;
  overflow: auto;
}

#canadadealerwindow {
  height: 250px;
  width: 400px;
  overflow: auto;
}

#intldealerwindow {
  height: 175px;
  width: 400px;
  overflow: auto;
}

.dealertablehead {
  width: 400px;
  text-align: left;
  background-color: #f0f0f0;
}

.dealertable {
}

.dealertable th {
  text-align: left;
}

.dealertable td {
  text-align: left;
  padding-right: 2em;
  padding-left: 2px;
}

.dealertable tr {
  background-color: #f0f0f0;
}

/* --- SECONDARY NAVIGATION --- */

div.moreinfo {
  text-align: center;
  margin-bottom: 1em;
  clear: left;
}

div.back {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  clear: both;
}

.navbycar {
  list-style-image: url(images/CarIcon.png);
}


/* --- FAQs --- */

.faqlist {
  list-style-image: url(images/redarrow.gif);
}

.faq-answer {
}

.faqA {
  font-weight: bold;
}

/* --- SITEMAP --- */

div.sitemap {
  margin-top: 1em;
  margin-bottom: 1em;
  border: solid 1px navy;
}

.sitemaptitle {
  margin: 4px;
  background: navy;
  color: white;
  text-align: center;
  font-size: large;
}

.sitemap h1 {
  padding: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 1em;
  color: navy;
  font-weight: bold;
  font-size: small;
}

.sitemap h2 {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 2em;
  color: navy;
  font-weight: normal;
  font-size: small;
}

.sitemap .selected {
  font-style: italic;
  color: gray;
}

.sitemap a:hover {
  font-style: italic;
}

.sitemap a:link {
  text-decoration: none;
  color: navy;
}

.sitemap a:visited {
  text-decoration: none;
  color: navy;
}

.sitemap h1.selected a:link, h2.selected a:link {
  color: gray;
}

.sitemap h1.selected a:visited, h2.selected a:visited {
  color: gray;
}

.sitemap ul ul li {
  font-weight: normal;
}

/* --- DOWNLOADS --- */

.downloads {
}

.downloads img {
  border: none;
}

.dlindex {
  text-align: center;
}

.dlindex p {
  position: relative;
  float: left;
  margin-top: 5px;
  margin-bottom: 25px;
  margin-left: 10px;
  margin-right: 10px;
  width: 150px;
  height: 200px;
  border: 1px solid #c0c0c0;
}

.dlindex p>img {
  position: absolute; top: 0px; left: 15px;
}

.downloads a:link {
  text-decoration: none;
}

.downloads a:visited {
  text-decoration: none;
}

.downloads .dl2 {
  position: relative;
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  width: 300px;
}

.downloads .dl2 p {
  margin-left: 100px;
  height: 112px;
  font-weight: normal;
  color: navy;
}

.downloads .dl2 img {
  position: absolute; top: 0px;
}

.downloads .dl3 {
  position: relative;
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  width: 300px;
}

.downloads .dl3 p {
  margin-left: 75px;
  height: 80px;
  font-weight: normal;
  font-size: 125%;
  color: navy;
}

.downloads .dl3 img {
  position: absolute; top: 5px;
}

.downloads .dl4 {
  position: relative;
  font-weight: bold;
  font-size: medium;
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  width: 400px;
}

.downloads .dl4 p {
  margin-left: 185px;
  height: 125px;
  font-weight: normal;
  color: navy;
}

.downloads .dl4 img {
  position: absolute; top: 5px;
}

.downloads .dl5 {
  padding-top: 5px;
  font-weight: normal;
  font-size: medium;
  color: navy;
}

.downloads .dl6 {
  position: relative;
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  width: 100%;
}

.downloads .dl6 p {
  margin-left: 95px;
  font-weight: normal;
  font-size: 125%;
  color: navy;
}

.downloads .dl6 img {
  position: absolute; top: 5px;
}

.downloadextra {
  font-size: 75%;
  color: black;
}

/* --- REVISION HISTORY --- */

div.revhistory table {
  border-spacing: 10px;
}

.revhistory table caption {
  color: navy;
  font-size: large;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
}

.revhistory table tbody tr {
  background-color: #f0f0f0;
}

.revhistory table tbody tr ul {
  padding-left: 1em;
  margin-left: 1em;
}

/* The next three are invalid CSS but required for IE6. */
col.revrelease {
  text-align: center;
}

col.revdate {
  text-align: center;
}

col.revdescription {
  text-align: left;
}

/* And this is the valid CSS. Child selector format has to be used 
   because IE6 can't grok it. Using descendant format IE6 has render bugs. */
.revhistory table>thead>tr>th,table>tbody>tr>td {
  text-align: center;
}

.revhistory table>thead>tr>th+th,table>tbody>tr>td+td {
  text-align: center;
}

.revhistory table>thead>tr>th+th+th,table>tbody>tr>td+td+td {
  text-align: left;
}

/* --- (About) RENEGADES --- */

div#renegades h3 {
  clear: left;
  margin-left: 10px;
  margin-bottom: 5px;
}

div#renegades p {
  padding-bottom: 2em;
}

div#renegades img {
  margin-right: 10px;
  margin-left: 10px;
  padding-bottom: 2em;
  float: left;
}

/* --- ENVIRONMENT --- */

div#environment {
  background-image: url(images/EarthLight.gif);
  background-repeat: no-repeat;
  background-position: center center;
  color: black;
}

/* --- NOTES --- */

.importantnote {
  border: thin dotted red;
  padding: 5px;
}

/* It's tempting to use a :before rule with a content parameter for
   displaying the important note image, but IE6 is clueless about 
   such things... */

/* --- SOFTWARE UPGRADE --- */

.softwareupgrade {
}

/* --- DOWNLOAD INFO REQUEST FORM --- */

#downloadform {
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 2em;
  background-color: #f0f0f0;
  width: 50%;
  border: 1px solid navy;
}

#downloadform .dlftext {
  width: 90%;
}

/* --- SITE ERROR PAGES --- */

.siteerror {
  font-size: 150%;
}