@charset "utf-8";
/* CSS Document */

/*The following was needed to prevent shifting to the left if the content of the page 
was longer than about 600 px*/

html, body { min-height:101%; margin-bottom:1px; }


/*NOTE:For IE 5 (& 6?), it won't accept the horizontal centering method below w/out
the "text-align:center" attribute.  (This is actually a shortcoming of the browser.
See bluerobot.com/web/css/center1.html for an example.)
*/

	
body{
	text-align:center;
	font-size:1em;
	font-family:arial,verdana,helvetica;
	background-color: #6C6972;
	margin-top:0px;
	margin-bottom:0px;

}

#wrapper{
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	margin-bottom:0px;
	width:760px;
	text-align:left;
	height: auto;
	background-image:url(../images/bg.jpg);
	background-repeat:repeat-y;
}

a{
	color:#CE0B1C;
	text-decoration:underline;
}
a:hover {
	color:#CE0B1C;
	text-decoration:none;
	}
	
a img{
	border:none;
}
	
h1{
	padding:0px;
	margin:0;
	font-size:1.5em;
	color:#CE0B1C;
	padding-left:15px;
	padding-top:5px;
	padding-bottom:5px;
	text-align:left;}

	
h2{
	padding:0px;
	font-size:1.3em;
}
	
h3{
	margin:0;
	padding:0;
	text-align:center;
	border:1px solid black;
	font-size:.8em;
	background-color:#D2835A;
}

h4{
	margin:5px 0px 5px 10px;
	padding:0;
	text-align:center;
	border:1px solid black;
	font-size:.8em;
	background-color:#D2835A;
}

h5{
	padding:0px 0px 0px 15px;
	font-size:.8em;
	text-align:left;
	margin-top:0px;
	margin-bottom:0px;
}	
p{
	padding:0px 0px 0px 15px;
	font-size:.75em;
	margin-top:3px;
	margin-right:5px;
	margin-bottom:10px;
	text-align:left;}

	
ul{
	font-size:.75em;
	margin:0;
	padding:0;
	margin-bottom:5px;
	display:block;
	}
li{

	text-align:left;
	padding-top:2px;
	margin-left:35px;
	line-height:1.1em;
}

/*NOTE: I had to set a 1px border set to the color of the background because for some reason,
Firefox has a hard time interpreting the header height without it.
*/

#header {
	background-image:url(../images/Header.jpg);
	background-repeat:no-repeat;
	height:115px;
	position:relative;
	width:746px;
	margin-left:7px;
	background-color:#000000;
	border-top: 2px solid #333333;
}

	
#headerLogo {
	position:absolute;
	float:left;
	width:453px;
	height:67px;
	left: 14px;
	top: 17px;
	}
	
#headerLogo a{width:100%;height:100%;display:block;}		

#headerContact {
	position:absolute;
	float:right;
	width:150px;
	height:29px;
	right: 47px;
	top: 49px;
	}

/*NOTE:Firefox will not render the bottom border of the twoCols div if you don't do one of the
following: a)set the height of the div, (making it static), or b) setting overflow:auto .  
*/

#twoCols{
	position:relative;
	padding:0;
	padding-bottom:0px;
	width:746px;
	margin:0 0 0 7px;/*use for gray margins*/
}
#homeSideNav{
	position:relative;
	width:284px;
	clear:none;
	float:left;
	}
#homeSideNav img{
	float:left;
	margin:0px 8px 10px 0px;
	border:1px solid black;
	}	

#homeSideNav a{
	color:black;
	text-decoration:none;
	}
#homeSideNav a:hover{
	color:#CE0B1C;
	text-decoration:underline;}
			
#homeSideNav p{
	text-align:left;
	font-size:12px;
	margin:25px 0px 10px 0px;
	font-weight:bold;
	}

#link1, #link2, #link3, #link4, #link5, #link6 {
	float:left;
	width:100%;
	padding:10px 0px 0px 0px;
	margin:0px 0px 0px 10px;
	}

#bulletBox{
	float:left;
	width:274px;
	padding:5px 0px 5px 0px;
	margin:20px 0px 0px 10px;
	border:1px solid #C25628;
	background-color:#F2D2A1;
	}	

#bulletBox h4{
	margin:5px 0px 5px 5px;
	padding:0;
	text-align:left;
	border:0px solid black;
	font-size:.9em;
	background-color:#F2D2A1;
}

#bulletBox li{
    padding-top:5px;
	font-size:1em;
}

#bulletBox a{
	color:#CE0B1C;
	text-decoration:underline;
}
#bulletBox a:hover {
	color:#CE0B1C;
	text-decoration:none;
	}

#sideNav{
	position:relative;
	float:left;
	width:184px;
	margin-top:10px;
	padding-bottom:0px;
	margin-left:0px
	}

.navLinks{
	width:100%;
	margin:0px 5px 0px 5px;
	padding:0px;
	float:left;
	clear:left;
	}

#sideNav h3{
	margin:0;
	padding:0;
	text-align:center;
	border:1px solid black;
	font-size:.8em;
	background-color:#FCE8AB;
}

#sideNav ul{
	padding:0;
	float:left;
	margin:0px 0px 25px 5px;
	list-style-type:none;
	font-size:.8em;
	width:100%;
}

#sideNav li{
	padding: 7px 0 7px 5px;
	margin-left:0;
	border-bottom: 1px solid #CCCCCC;
}
	
#sideNav a{
	text-decoration:none;
	color:#333333;
}
	
#sideNav li a:hover{
	color:#CE0B1C;
	text-decoration:underline;}


/*NOTE: In order for the dynamic className change to work in JavaScript, the link must be pointed to very 
specifically, as it is below.
*/
#sideNav li.highlighted{
	border-bottom: 1px solid #CCCCCC;
}

#sideNav li.highlighted a{
	font-weight:bold;
	text-decoration:none;
	color:#CE0B1C;
}
	
#sideNav li.highlighted a:hover{
	text-decoration:none;
	color:#CE0B1C;}

#topNav li.highlighted{
	border:none;
}

#topNav li.highlighted a{
	font-weight:bold; 
	text-decoration:none;
}

#topNav{
	position:absolute;
	width:440px;
	height:21px;
	right: 0px;
	bottom: 0px;
	color:white;
	text-align:right;


}
	
#ulTopNav{
	margin:0;
	padding:0;
	}
	
#ulTopNav li{
	margin:0;
	padding:0px 5px 0px 0px;
	display:inline;
	font-size:12px;
}
	
#ulTopNav a{
	color:white;}
	
#ulTopNav a:hover{
	text-decoration:none;
	color:#CE0B1C;}

/* '!important' is used by all browsers as the default css property except for IE6.  It is used to work
around formating issues that IE6 has.  IE6 does not reckognize !important, so it proceeds to the property
below it, while all other browsers use !important.*/

#mainContent{
	float:right;
	margin:0;
	background-color:white;
	width:560px;
	margin-bottom:3px;

}


#mainContent img{
	float:right;
	margin-right:10px;
	margin-left:7px;

}
	
	
/*NOTE: Because of differences in IE and Firefox, first set the margin to 0, and
then position the ul using padding.  (For example, as below, "padding-left:45px".)
*/

#mainContent ol{
	font-size:.8em;
	line-height:1.5;
}

#homeMainContent{
	float:right;
	margin:0;
	background-color:white;
	width:460px;
	position:relative;
}
#homeContentText{
	width:420px;
	margin-left:20px;
	}
#content{
	width:530px;
	float:right;
	min-height:400px;
	position:relative;
	}	
#content img{
	margin-top:-2px;
	margin-bottom:10px;
}
#homeLink{
	position:absolute;
	float:left;
	width:225px;
	height:55px;
	right: 159px;
	top: 71px;
}
#homeLink a{width:100%;height:100%;display:block;}

.bullets{

	width:225px;
	margin:5px;
	margin-left:15px;
	margin-top:0px;
	padding:0px;
	float:left;
	clear:left;
	}
.bullets h3{

	}	
.bullets p{
	border-bottom:1px solid #000000;
	background-color:#00CC99;
	margin:0px;
	}	



.contactButton{
	text-align:center;
	}

#rightSection{
	text-align:center;
	width:550px;
	float:right;
	clear:right;
	background-image:url(../images/contentBG.jpg);
	background-repeat:repeat-y;
	
}
#trialButton img{
	float:left;
	margin:0;
	margin-left:200px;
	}

#rightSectionHome{
	text-align:center;
	width:450px;
	float:right;
	background-image:url(../images/contentBGHome.jpg);
	background-repeat:repeat-y;
	
	
}
#rightSectionHome img{
	border:none;
	margin: 5px 0px 5px 0px;
}

#homeContentBottom{
	float:right;
	margin:0px;
	margin-top:0px;

	}
	
#contentBottom img{
	float:right;
	margin-right:0px;
}
		
#contactUs {float:right;margin:0px 15px 10px 0px;display:inline;}
#contactForm{}
#contactForm fieldset{margin:0;padding:0px 10px 0px 20px;width:315px;border:1px solid gray;}
#contactForm legend{margin:0;padding:0;color:black;font-weight:bold;margin-left:60px;
			font-size:.72em;}
#contactForm label{display:block;font-size:.71em;}
#contactForm div.buttonContainer input{font-size:.8em;}
#contactForm input, textarea{border:1px solid gray;font-size:.71em;
				font-family:arial,verdana,helvetica;}
#contactForm textarea{width:295px;}
#contactInfo{}
#contactInfo .directions{}
#contactInfo .contactName{}

.left{float:left;}
.right{float:right;margin-right:30px;display:inline;}
.buttonContainer{clear:both;padding:15px 0px 15px 0px;text-align:center;}
.textName{width:130px;}
.contactTitle{font-weight:bold;}

.button{
	margin:0px 25px 0px 75px;
}

.emailLink a{
	}
	
.emailLink a:hover{
	text-decoration:none;}
		
#footer{
	background-color:#FFF7B3;
	clear:both;
	color:black;
	text-align:center;
	border-top: 1px solid #000000;
	border-bottom: 2px solid #333333;
	width:746px;
	margin-left:7px;
	margin-top:5px;
}
	
#ulFooter{
	margin:0;
	padding:0;
	padding-bottom:8px;
	padding-top:8px;
	font-size:.7em;}
	
#ulFooter li{
	display:inline;
	margin-left:0;}
	
#ulFooter a{
	}
	
#ulFooter a:hover{
	text-decoration:none;
	color:#CE0B1C;}

.paddingDiv {
	height:150px;}

/*NOTE:Because the element with the "copyright" class is outside of the main "wrapper", it must
be styled as such.  (For example, the margin must be set as the wrapper is to center it.)  
*/
.copyright {
	width:740px;
	margin:0 auto;
	padding:2px;
	font-size:.65em;
	text-align:left;
	border-bottom:none;}
	
.copyright a{
	color:#FFFFFF;
	font-weight:normal;}
	
.copyright a:hover{
	text-decoration:none;
	color:#000000;}

  #sc_shoppingCartArea {float:left;clear:left;width:525px;margin-left:5px;text-align:center;border-top:1px solid #CC3300;}
  #sc_shoppingCartArea  p{
	margin:0;
	padding:0;
	}
  #sc_shoppingCartArea p.sc_contentInfo {font-size:1.5em;}
  #sc_shoppingCartArea a{color:#CC3300;text-decoration:underline;}
  #sc_shoppingCartArea a:visited{color:gray;}
  #sc_shoppingCartArea a:hover{text-decoration:none;color:gray;}
  #sc_shoppingCartArea img{margin:0px;}
   .sc_displayArea {margin:0;padding:0;width:525px;border-bottom:1px solid #CC3300;
		min-height:95px;margin:0px 0px 5px 0px;padding-top:10px;clear:both;}
 .sc_imageDisplay {float:left;margin:0;padding:0;width:80px;text-align:center;
		padding:2px 0px 5px 5px;clear:left;}
  .sc_imageDisplay img{margin:0;padding:0;margin-left:10px;border:1px solid gray;height:75px; width:75px;}  /*PG: REV20090310: added height and width attributes here for thumbnail photos*/
  .sc_detailsDisplay {margin:0;padding:0;margin-left:100px;margin-right:130px;margin-top:0px;}

/*NOTE:There was an issue with the bullets of the unordered list not showing up in internet explorer.  
This was due to the fact that it was overridden by another div style in this css*/


  
   
  .sc_itemName {margin:0;padding:0;font-weight:bold;margin-bottom:5px;font-size:.9em;
		list-style-type:none;}

  .sc_priceDisplay {float:right;width:130px;}
  #sc_shoppingCartArea .sc_priceDisplay p{margin:0;padding:0;margin-left:10px;}
  .sc_lblPrice {font-weight:bold;margin:0;padding:0;}
  
.orderButton{
	margin-top:20px;
	margin-right:20px;
	}