﻿* {
  margin: 0;
  padding:0
}

blockquote {
  margin: 10px 0 10px 25px;
}

body {
  font-family: Verdana, "Microsoft Sans Serif", "Lucida Sans Unicode";
  font-size: 11px;
  margin: 0;
  background-image: url('../images/bg.jpg');
  background-position: center top;
  background-repeat: repeat-y;
}

form {
  margin: 0;
}

h2, h3 {
  margin: 0 0 10px 0;
}

hr {
  color: #33CC33;
  height: 1px;
  margin: 10px 0 10px 0;
}

img {
  border: 0;
}

input {
  font-family: Verdana, "Microsoft Sans Serif", "Lucida Sans Unicode";
}

li {
  margin-left: 50px;
}

select {
  font-family: Verdana, "Microsoft Sans Serif", "Lucida Sans Unicode";
  font-size: 90%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

ol {
  margin: 10px 0 10px 0;
}

ul {
  margin: 10px 0 10px 0;
}

td {
  padding: 0;
}

textarea {
  font-family: Verdana, "Microsoft Sans Serif", "Lucida Sans Unicode";
}

p {
  margin-bottom: 10px;
}


/* -------------------------------------------------- STYLES */
#bbb {
  padding-top: 15px;
  text-align: center;
}

#contactForm {
  padding: 5px;
  border: 1px #33CC33 dashed;
  width: 500px;
  margin: 0 auto 0 auto;
}

#copyright {
  width: 45%;
  text-align: right;
  vertical-align: bottom;
  padding-bottom: 2px;
}

#features {
  padding: 2px;
  border: 1px #FF0000 dotted;
  margin-bottom: 10px;
}

#features ul {
  margin: 5px 0 5px 25px;
  padding: 0;
  font-size: 90%;
}

#featuresHead {
  background-color: #808080;
  text-align: center;
  color: #FFFFFF;
  padding: 2px;
}

#formError {
  padding: 5px 0 5px 0;
  color: #FF0000;
  font-weight: bold;
}

#loginError {
  color: #FF0000;
  font-weight: bold;
  font-size: 90%;
  text-align: center;
}

#loginForgot {
  margin-top: 5px;
  padding: 2px;
  background-color: #C0C0C0;
  text-align: center;
  font-size: 80%;
}

#logout {
  background-color: #FF0000;
  color: #FFFFFF;
  padding: 5px;
  font-size: 80%;
}

#pgNav {
  background-color: #C0C0C0;
}

#pgNav_bk {
  padding: 2px;
  text-align: left;
  width: 25%;
}

#pgNav_ctr {
  padding: 2px;
  text-align: center;
  width: 50%;
}

#pgNav_fw {
  padding: 2px;
  text-align: right;
  width: 25%;
}

#prodCat_select {
  width: 99%;
  float: left;
}

#prodMfr_select {
  width: 99%;
  float: right;
}

#quoteError {
  padding: 5px 0 5px 0;
  color: #FF0000;
  font-weight: bold;
  text-align: center;
}

#rds {
  width: 45%;
  vertical-align: bottom;
  padding-bottom: 2px;
}

#searchError {
  color: #FF0000;
  font-weight: bold;
  font-size: 90%;
  text-align: center;
}

#timeclock {
  font-family: Verdana, "Microsoft Sans Serif", "Lucida Sans Unicode";
  font-size: 10px;
  border: 0;
  background-color: transparent;
  color: #FFFFFF;
  width: 300px;
  text-align: center;
}

#topGreen {
  width: 50px;
  background-image: url('../images/grnFade.jpg');
}

#topLogo {
  width: 305px;
  padding-bottom: 2px;
}

#topOfPage {
  text-align: center;
  width: 10%;
  vertical-align: bottom;
  padding-bottom: 2px;
}

#twitter_1 {
  border: 2px #003366 ridge;
  vertical-align: top;
  background-image: url('../images/twitterBird.jpg');
  background-position: 2px 2px;
  background-repeat: no-repeat;
  padding: 2px;
}

#twitter_2 {
  text-align: right;
  padding: 15px 5px 0 0;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  color: #000080;
}

#twitter_3 {
  font-size: 10px;
  text-align: left;
  cursor: pointer;
  padding: 5px 0 0 15px;
  overflow: hidden;
  margin: 0;
}

#twitter_4 {
  text-align: center;
  padding-top: 10px;
}

#validateError {
  padding-bottom: 5px;
  color: #FF0000;
  font-weight: bold;
  text-align: center;
}

/* -------------------------------------------------- CLASSES */
.abortButton {
  font-size: 90%;
  margin-top: 5px;
  background-color: #808080;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #000000 solid;
  padding: 2px;
}

.abortButtonClick {
  font-size: 90%;
  margin-top: 5px;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #C0C0C0 solid;
  padding: 2px;
}

.abortButtonOver {
  font-size: 90%;
  margin-top: 5px;
  background-color: #C0C0C0;
  color: #000000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.alignRight {
  text-align: right; 
}

.bigRed {
  font-weight: bold;
  font-size: 14px;
  color: #FF0000;
}

.blueLine {
  height: 2px;
  background-color: #003366;
}

.bigBold {
  font-weight: bold;
  font-size: 125%;
}

.bold {
  font-weight: bold;
}

.boldGray {
  font-weight: bold;
  color: #808080;
}

.boldRed {
  font-weight: bold;
  color: #FF0000;
}

.boldStrike {
  font-weight: bold;
  text-decoration: line-through;
}

.cartButton {
  margin-left: 5px;
  font-size: 90%;
  background-color: #33CC33;
  color: #003366;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.cartButton_1 {
  margin-left: 5px;
  font-size: 90%;
  background-color: #33CC33;
  color: #003366;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.cartButtonClick {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.cartButtonClick_1 {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.cartButtonOver {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FFFFFF;
  color: #FF0000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.cartButtonOver_1 {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FFFFFF;
  color: #FF0000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.cartContainer_1 {
  width: 35%;
  text-align: right;
}

.cartContainer_2 {
  width: 65%;
  padding-left: 5px;
}

.catNav {
  float: right;
  width: 175px;
  border-left: 1px #C0C0C0 dotted;
  padding-left: 5px;
  margin-bottom: 5px;
}

.catNav_1 {
  float: left;
  margin-left: 10px;
}

.cCard {
  margin-left: 75px;
}

.center {
  text-align: center;
}

.contactContainer_1 {
  width: 35%;
  text-align: right;
}

.contactContainer_1a {
  width: 35%;
  text-align: right;
  padding: 2px 0 2px 0;
}

.contactContainer_1b {
  width: 35%;
  text-align: right;
  padding: 5px 0 2px 0;
  vertical-align: top;
}

.contactContainer_2 {
  width: 65%;
  padding-left: 5px;
}

.contactContainer_2a {
  width: 65%;
  padding: 2px 0 2px 5px;
}

.contactContainer_2b {
  width: 65%;
  padding: 5px 0 0 5px;
}

.container_1 {
  width: 900px;
  margin: 0 auto 0 auto;
  background-color: #FFFFFF;
}

.container_2 {
  width: 180px;
  vertical-align: top;
  padding: 5px;
}

.container_3 {
  height: 1000px;
  width: 720px;
  border-right: 2px #003366 solid;
  padding: 5px;
  vertical-align: top;
  background-image: url('../images/bgLogo.jpg');
  background-position: right bottom;
  background-repeat: no-repeat;
}

.container_4 {
  background-image: url('../images/bottomBG.jpg');
  background-position: center;
  background-repeat: no-repeat;
  font-size: 90%;
  color: #FFFFFF;
  height: 20px;
  width: 720px;
  margin: 0 auto 0 auto;
}

.featureLine {
  margin: 0;
}

.field_1 {
  font-size: 90%;
  width: 250px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.field_1Focus {
  font-size: 90%;
  width: 250px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.field_2 {
  font-size: 90%;
  width: 170px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.field_2Focus {
  font-size: 90%;
  width: 170px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.field_3 {
  font-size: 90%;
  width: 97px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.field_3Focus {
  font-size: 90%;
  width: 97px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.field_4 {
  font-size: 90%;
  width: 72px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.field_4Focus {
  font-size: 90%;
  width: 72px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.gray {
  color: #808080;
}

.halfContainer {
  width: 50%;
  vertical-align: top;
}

.lidField {
  font-size: 90%;
  width: 155px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.lidFieldFocus {
  font-size: 90%;
  width: 155px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.message_1 {
  font-size: 90%;
  width: 250px;
  height: 250px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.message_1Focus {
  font-size: 90%;
  width: 250px;
  height: 250px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.nav {
  text-align: center;
  height: 17px;
  background-color: #33CC33;
  border: 2px #003366 ridge;
}

.navBanner {
  background-color: #003366;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  font-size: 90%;
  padding-bottom: 2px;
}

.navBox {
  border: 2px #003366 ridge;
  vertical-align: top;
}

.navButton {
  width: 25px;
  margin-left: 5px;
  font-size: 90%;
  background-color: #33CC33;
  color: #003366;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.navButtonClick {
  width: 25px;
  margin-left: 5px;
  font-size: 90%;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.navButtonOver {
  width: 25px;
  margin-left: 5px;
  font-size: 90%;
  background-color: #FFFFFF;
  color: #FF0000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.navClick {
  text-align: center;
  height: 17px;
  background-color: #FF0000;
  border: 2px #FF0000 ridge;
  cursor: pointer;
}

.navContainer_1 {
  padding: 2px;
  font-size: 90%;
}

.navContainer_2 {
  padding: 2px 0 5px 0;
  font-size: 90%;
  text-align: center;
}

.navContainer_3 {
  font-size: 90%;
  text-align: center;
}

.navField {
  font-size: 90%;
  width: 125px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.navFieldFocus {
  font-size: 90%;
  width: 125px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.navOver {
  text-align: center;
  height: 17px;
  background-color: #FF0000;
  border: 2px #33CC33 ridge;
  cursor: pointer;
}

.noPic {
  color: #808080;
  font-weight: bold;
  font-size: 90%;
}

.padB5 {
  padding-bottom: 5px;
}

.padB10 {
  padding-bottom: 10px;
}

.padB25 {
  padding-bottom: 25px;
}

.padT5 {
  padding-top: 5px;
}

.padT10 {
  padding-top: 10px;
}

.padT15 {
  padding-top: 15px;
}

.productCell_1 {
  border-top: 1px #33CC33 solid;
  padding: 5px;
  width: 25%;
  text-align: center;
  vertical-align: top;
}

.productCell_2 {
  border-top: 1px #33CC33 solid;
  border-left: 1px #33CC33 dotted;
  padding: 5px;
  width: 75%;
  vertical-align: top;
}

.prodDisplayButton {
  margin-left: 5px;
  font-size: 90%;
  background-color: #33CC33;
  color: #003366;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.prodDisplayButtonClick {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.prodDisplayButtonOver {
  margin-left: 5px;
  font-size: 90%;
  background-color: #003366;
  color: #FF0000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.prodPic {
  border: 1px #000000 solid;
}

.qtyField {
  font-size: 90%;
  width: 50px;
  border: 1px #33CC33 solid;
  padding: 2px;
}

.qtyFieldFocus {
  font-size: 90%;
  width: 50px;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.quoteAnsr {
  padding-top: 5px;
  text-align: right;
}

.quoteButton {
  margin-left: 5px;
  font-size: 90%;
  background-color: #33CC33;
  color: #003366;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.quoteButtonClick {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.quoteButtonOver {
  margin-left: 5px;
  font-size: 90%;
  background-color: #FFFFFF;
  color: #FF0000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.quoteClear {
  margin-left: 5px;
  font-size: 90%;
  background-color: #C0C0C0;
  color: #000000;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.quoteClearClick {
  margin-left: 5px;
  font-size: 90%;
  background-color: #000000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.quoteClearOver {
  margin-left: 5px;
  font-size: 90%;
  background-color: #808080;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.quoteContainer_1 {
  width: 15%;
  text-align: right;
  padding-right: 5px;
}

.quoteContainer_1a {
  width: 15%;
  text-align: right;
  padding: 2px 5px 0 0;
}

.quoteContainer_2a {
  width: 35%;
  padding-top: 2px;
}

.quoteContainer_2 {
  width: 35%;
}

.quoteContainer_3 {
  width: 50%;
  padding: 2px 5px 5px 5px;
  border: 1px #33CC33 dashed;
  vertical-align: top;
}
.quoteContainer_4 {
  width: 50%;
  padding: 2px 5px 5px 5px;
  border: 1px #33CC33 dashed;
  vertical-align: top;
}

.quoteContainer_5 {
  width: 50%;
  text-align: right;
  padding: 10px 10px 0 0;
}

.quoteContainer_6 {
  width: 50%;
  padding: 10px 0 0 5px;
}

.red {
  color: #FF0000;
}

.right {
  float: right;
}

.small {
  font-size: 90%;
}

.space5 {
  height: 5px;
}

.space10 {
  height: 10px;
}

.specialCell_1 {
  border-bottom: 1px #33CC33 solid;
  padding: 5px;
  width: 25%;
  text-align: center;
  vertical-align: top;
}

.specialCell_2 {
  border-bottom: 1px #33CC33 solid;
  border-left: 1px #33CC33 dotted;
  padding: 5px;
  width: 75%;
  vertical-align: top;
}

.specialHead {
  padding: 2px;
  background-color: #33CC33;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
}

.submitButton {
  font-size: 90%;
  margin-top: 5px;
  background-color: #33CC33;
  color: #003366;
  font-weight: bold;
  border: 1px #003366 solid;
  padding: 2px;
}

.submitButtonClick {
  font-size: 90%;
  margin-top: 5px;
  background-color: #FF0000;
  color: #FFFFFF;
  font-weight: bold;
  border: 1px #FF0000 solid;
  padding: 2px;
}

.submitButtonOver {
  font-size: 90%;
  margin-top: 5px;
  background-color: #FFFFFF;
  color: #FF0000;
  font-weight: bold;
  border: 1px #FF0000 solid;
  cursor: pointer;
  padding: 2px;
}

.subtotal {
  font-size: 14px;
  width: 150px;
  border: 0;
  border-collapse: collapse;
  color: #FF0000;
  font-weight: bold;
}

.topBlue {
  width: 545px;
  background-color: #003366;
  background-image: url('../images/blFade.jpg');
  background-position: right center;
  background-repeat: no-repeat;
  vertical-align: top;
  text-align: center;
  font-size: 14px;
  color: #FFFFFF;
  font-weight: bold;
  font-style: italic;
}

.trOut {
  background-color: transparent;
}

.trOver {
  background-color: #E0E0E0;
}

.twitter_5 {
  margin: 0;
  padding-top: 5px;
}

.vTop {
  vertical-align: top;
}


/* -------------------------------------------------- LINKS */

/* ------------------------ CLASSES */
.container_3 a:link {text-decoration: none; color: #003366;}
.container_3 a:visited {text-decoration: none; color: #003366;}
.container_3 a:hover {text-decoration: none; color: #33CC33;}
.container_3 a:active {text-decoration: none; color: #003366;}

.nav a:link {text-decoration: none; color: #003366; font-weight: bold; font-size: 90%;}
.nav a:visited {text-decoration: none; color: #003366; font-weight: bold; font-size: 90%;}
.nav a:hover {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%;}
.nav a:active {text-decoration: none; color: #003366; font-weight: bold; font-size: 90%;}

.navOver a:link {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}
.navOver a:visited {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}
.navOver a:hover {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}
.navOver a:active {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}

.navClick a:link {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}
.navClick a:visited {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}
.navClick a:hover {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}
.navClick a:active {text-decoration: none; color: #FFFFFF; font-weight: bold; font-size: 90%; font-style: italic;}

/* ------------------------ STYLES */
#rds a:link {text-decoration: none; color: #003366; font-weight: bold; font-size: 90%;}
#rds a:visited {text-decoration: none; color: #003366; font-weight: bold; font-size: 90%;}
#rds a:hover {text-decoration: none; color: #FF0000; font-weight: bold; font-size: 90%;}
#rds a:active {text-decoration: none; color: #003366; font-weight: bold; font-size: 90%;}

#topOfPage a:link {text-decoration: none; color: #FFFF00; font-weight: bold; font-size: 90%;}
#topOfPage a:visited {text-decoration: none; color: #FFFF00; font-weight: bold; font-size: 90%;}
#topOfPage a:hover {text-decoration: none; color: #FF0000; font-weight: bold; font-size: 90%;}
#topOfPage a:active {text-decoration: none; color: #FFFF00; font-weight: bold; font-size: 90%;}

#loginForgot a:link {text-decoration: underline; color: #003366;}
#loginForgot a:visited {text-decoration: underline; color: #003366;}
#loginForgot a:hover {text-decoration: none; color: #FF0000;}
#loginForgot a:active {text-decoration: underline; color: #003366;}

#logout a:link {text-decoration: underline; color: #FFFFFF;}
#logout a:visited {text-decoration: underline; color: #FFFFFF;}
#logout a:hover {text-decoration: none; color: #FFFFFF;}
#logout a:active {text-decoration: underline; color: #FFFFFF;}




/* -------------------------------------------------- LIGHTBOX */
#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  line-height: 0;
}

#lightbox img {
  width: auto;
  height: auto;
}

#lightbox a img {
  border: none;
}

#outerImageContainer {
  position: relative;
  background-color: #ffffff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

#imageContainer {
  padding: 10px;
}

#loading {
  position: absolute;
  top: 10%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

#imageContainer, #hoverNav{
  left: 0;
}

#hoverNav a {
  outline: none;
}

#prevLink, #nextLink {
  width: 49%;
  height: 100%;
  background-image: url(data:image/gif;base64,AAAA);
  display: block;
}

#prevLink {
  left: 0px;
  float: left;
}

#nextLink {
  right: 0;
  float: right;
}

#prevLink:hover, #prevLink:visited:hover {
  background: url(images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover {
  background: url(images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer {
  font: Verdana, Georgia, Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  margin: 0 auto;
  line-height: 1.4em;
  overflow: auto;
  width: 100%;
}

#imageData {
  padding:0 10px;
  color: #000000;
}

#imageData #imageDetails {
  width: 70%;
  float: left;
  text-align: left;
}
	
#imageData #caption {
  font-weight: bold;
}

#imageData #numberDisplay {
  display: block;
  clear: left;
  padding-bottom: 1.0em;
}
			
#imageData #bottomNavClose {
  width: 66px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}	 	

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 500px;
  background-color: #000000;
}