/* html and body are styled here to help with the differences between different browser renderings of margin and padding */
html,body{
margin:5px 0px 5px 0px;
padding:0;
} 
/* the catch-all is styled to help with the differences between different browser renderings of margin and padding */
* { 
margin: 0; 
padding: 0; 
}
/* img tag is styled to help with the differences between different browser rendering of images
as well, this prevents linked images from having a border */
img{
border:0;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

/* the font for the site is set here*/
body{
font-family:Arial, Geneva, Helvetica, sans-serif;
}

/* the clearBoth class of the br tag is used to help with the div-based layout */
br.clearBoth{
clear:both;
}

/* this div centers the content and everything else is positioned inside of it, it is needed for layout purposes, do not alter or remove */
div#container{
position:relative;
width:935px;
margin:0px auto;
padding:0px 0px 0px 0px;
}

/* this div is used for background color, an edge-border and padding from the border,  
it is needed for layout purposes, do not alter or remove margin, padding, or width */
div#mainContent{
width:933px;
margin:0px 1px 0px 1px;
padding:10px 0px;
/* this sets the content area background color */
background-color:#FFFFFF;
/* this border can be changed or eliminated with out breaking the template */
border:3px solid #cccccc;
}

/* this creates a boxtop that is used on top of a leftNavBoxBottom or rightContentBoxBottom div for a heading
it can be set to have rounded corners in the jscript for niftycorners */
h3.boxTop{
background-color:#444444; 
color:#FFFFFF;
margin:0px;
padding: 5px 0 3px;
text-align:center;
font-size:14px;
}

/* leftNav styles the left column , it is needed for layout purposes, do not alter or remove */
div#leftNav{
display:inline;
float:left;
width: 200px;
padding:0px;
margin:0px 10px 10px 10px;
}

/* this sets the border for the bottom of a 'topped' box in the leftNav div */
.leftNavBoxBottom{
border:1px solid #999999;
margin-bottom:5px;
background-color:#f2f2f2;
}

 /* this styles h4 elements in the leftNav */
div#leftNav h4{
text-align:center;
margin:5px 0px 5px 0px;
padding:0;
color:#000033;
}

/* this controls the hr tag used within the leftNav boxes */
div#leftNav hr{
color:#dcdcba;
width:90%;
margin:0px auto;
text-align:center;
}

/* this styles p tags used within the leftNav boxes */
div#leftNav p{
text-align:center;
margin:5px 0 10px;
padding: 0 10px;
}

/* this styles form tags used within the leftNav boxes */
div#leftNav form{
margin:0;
padding:0;
}

/* this styles input tags used within the leftNav boxes */
div#leftNav input{
margin:8px 0px 8px 0px;
padding:0
}

/* this styles the lists of links that are used in the left column, do not alter or remove */
ul.linkList{
list-style-type:none;
margin:0px 0px 0px 0px;
padding:5px 0px 5px 0px;
z-index:100;
background-color:#f2f2f2;
}
/* this styles the lists of links that are used in the left column, do not alter or remove */
ul.linkList li{
margin-bottom:5px;
}

/* these styles control the color and hover properties of the actual links in the left column */
.linkList a{
text-decoration: none; 
color:#000033;
padding-left:14px;
}

.linkList a:visited {
text-decoration: none; 
color:#000033;
}

.linkList a:active {
text-decoration: none; 
color: #000033;
}

.linkList a:hover {
text-decoration: underline; 
color:#FF0000;
}

/* rightContentContainer holds  everything to the right of the logo and left navigation bar,
it is needed for layout purposes, do not alter or remove */ 
#rightContentContainer{
display:inline;
float:right;
margin:0 10px 10px 0;
padding:0;
width:700px;
color:#000000;
}

/* to change font or background color of the rightContentContainer adjust these styles */
#rightContentContainer{
background-color:#ffffff;
}

/* this will create a center-aligned p tag within rightContentContainer div, used for the banner near top in this case */
#rightContentContainer p.centered{
text-align:center;
}

/* this styles p elements in the rightContentContainer */
#rightContentContainer p{
margin:5px 0 10px;
padding: 0 10px;
}

/* this styles h1 elements in the rightContentContainer */
#rightContentContainer h1{
font-size:16px;
margin-bottom:10px;
color:#444444;
}

/* this creates a backgound box that product boxes can be placed inside
border and background color can be manipulated */
.rightContentBoxBackground{
border:1px solid #999999;
padding:0px 0px 5px 5px;
margin:0px 0px 10px 0px;
background-color:#444444;
}
/* this inherits color from rightContentBoxBackground */
.rightContentBoxBackground h3{
text-align:center;
padding:5px 0px 0px 0px;
color:#ffffff;
}

/* this creates and bordered box for use in right rightContentContainer */
.rightContentBoxBottom{
border:1px solid #999999;
background-color:#ffffff;
}

/* this creates a box that stretches all the way across and MUST be placed within a rightContentBoxBackground div */
.oneWideBox{
width:677px;
margin:5px 0px 0px 0px;
padding:5px;
background-color:#ffffff;
}

/* this is the product image inside the oneWideBox */
.oneWideBoxImg{
float:left;
padding:0px 5px 5px 0px;
}

/* is the price and links part of product description */
.oneWideBoxPrice{
 text-align:center;
 float:right;
 width:50%;
}

/* this h2 is the product name in oneWideBox */
.oneWideBox h2{
font-size:16px;
color:#444444;
}

/* this creates a box that stretches all the way across and 
must be placed within a rightContentBoxBackground div */
.twoWideBox{
width:331px;
margin:5px 5px 0px 0px;
padding:5px;
background-color:#ffffff;
float:left;
}

/* this is the product image inside the twoWideBox */
.twoWideBoxImg{
float:left;
padding:0px 5px 5px 0px;
height:130px;
width:130px;
}

/* this is the product image inside the twoWideBox */
.PJtwoWideBoxImg{
float:left;
padding:0px 5px 5px 0px;
height:132px;
width:75px;
}

/* is the price and links part of product description */
.twoWideBoxPrice{
text-align:center;
width:100%;
}

/* this h2 is the product name in twoWideBox */
.twoWideBox h2{
font-size:16px;
color:#444444;
}

/* this creates a boxes that span 4 across and  MUST be placed within a rightContentBoxBackground or  rightContentBoxBotttom div */
.fourWideBox{
text-align:center;
float:left;
width:156px;
margin:5px 7px 0px 0px;
padding:5px;
background-color:#ffffff;
color:#444444;
}

/* is the 'your price' part of product description */
.boldGray{
color:#999999;
font-weight:bold;
}
/* is the price part of product description */
.boldRedPrice{
color:#FF0000;
font-size:16px;
font-weight:bold;
}



/*  this aligns the image and links in the footer */
div#footer{
text-align:center;
}

/* this styles the links in the footer */
div#footer a:link {
text-decoration: none; 
color:#444444;
background-color: #ffffff;
}

div#footer a:visited {
text-decoration: none;
color:#444444;
background-color: #ffffff;
}

div#footer a:active {
text-decoration: none;
color:#0033CC;
background-color: #ffffff;
}

div#footer a:hover {
text-decoration: underline;
color:#FF0000;
background-color: #ffffff;
}

/* these link styles create a 'normal' blue underlined link */
a.plainLink:link {
text-decoration: underline; 
color:blue;
}

a.plainLink:visited {
text-decoration: none;
color:blue;
}

a.plainLink:active {
text-decoration: none;
color:blue;
}

a.plainLink:hover {
text-decoration: underline;
color:blue;
}