body { 
	font-family: Arial, Helvetica, Verdana, sans-serif ;
	color: #474747; 
	background: #dedede;
	line-height: 1;
}
a  { 
	color: #474747; 
	text-decoration: none;
}
a:hover{
	text-decoration:underline;
}
caption, th, td {

	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
strong{
	font-weight:bold;
}
em{
	font-style:italic;
}
:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}

#pageContainer{
	position: absolute;
	align: center;
	text-align: center;
	width: 100%;
	height: 100%;
	margin: 0px;
	top: 0px;
	left: 0px;
    /*border: #390 2px solid;*/
}
#outlineContainer{
	position: relative;
	margin-top: 20px;
	margin-left: auto; 
	margin-right: auto;
	margin-bottom: 20px;
	width: 840px;
	height: 100%; 
	align: center;
	text-align: left;
	background: #FFFFFF;
	padding: 20px;
	border: black 2px solid;
}
#headerContainer{ 
	position: relative;
	margin: 0 auto; 
	width: 800px; 
	/*height: 160px;*/
	align: center;
	text-align: left;
	z-index: 1;
	background: #FFFFFF;
	/*border: red 2px solid;*/
 }
#logoHdr {
	align: left;
	text-align: left;
	height: 120px;
	margin: 0px;
	/*padding-bottom: 10px;*/
	/*border: red 2px solid;*/
 }
#headerLinks  { 
	height: 24px;
	align: left;
	text-align: left;
	width: 800px;
	/*margin: 0px;*/
} 
#contentContainer{
	position: relative;
	margin: 0 auto;
	align: center;
	text-align: center;
	width: 800px;
	height: 500px;
	border: #dedede 1px solid;
	background: #FFFFFF;
	border: gray 1px solid;
} 
#footerContainer{ 
 	position: relative;
	margin: 0px auto; 	
	color: #c90; 
	text-align: left; 
	align: center ;
	width: 800px; 
	height: 20px; 
	background: #FFFFFF;
	padding-top: 5px;
	padding-left: 10px;
} 
#productsDiv
{
	padding: 5px;
	width: 140px; 
	height: 200px;

 	position: relative; 
 	background: #e6e6e6; 
}
div.clickbutton { 
	background: url(mod/media/gradiant.jpg) repeat-x; 
	text-align: center; 
	cursor: pointer; 
	display: inline; 
	color: #e6e6e6;
	margin: 0; 
	padding: 0; 
	width: 80px; 
	height: 16px; 
	float: left; 
	border: solid 1px #cccccc; 
}
div.scrollable{
	width: 800px;
	height: 500px;
	margin: 0 auto;
	text-align: left;
	overflow-y: scroll;
}
/* index */
#homePgPics
{
	position: relative;
	margin: 0 auto;
    text-align: left;
	align: center;
	height: 100%;
	width: 700px;
}
#homePgStatement
{
	align: left;
	text-align: left;
	padding-left: 0px;
}
div.indexPicContainer
{
	position: relative;
	float: left;
	/*width: 33%;*/
	align: center;
	text-align: center;
	margin: 0px auto;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
	/*border-width: 1px;
	border-color: blue; 
	border-style: solid;*/
}
img.homePic
{
	/*margin: 10px;
	padding: 5px;*/
	border: #dedede 1px solid;
	margin: 0px;
	padding: 0px;
	z-index: -10;
	
}
img.homePgStatementPic
{
	width: 695px;
}
/* about */
#aboutUs{
	margin-left: 40px;
	text-align: left;
	padding: 10px 10px;
}
div.aboutPic{
	align: left;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 10px;
	float: left;
	width: 790px;
}
img.aboutUs
{
	width: 120px;
}
/* products */
div.productViewer
{
	/*position: relative;*/
	text-align: center;
	align: center;
	margin: 0 auto;
	width: 720px;
	height: 335px;
}
div.mainPhotoDiv { 
	float: left;
	text-align: center; 
	align: left;
	padding: 5px; 
	width: 310px; 
	height: 310px; 
	vertical-align: middle; 
	border: solid 1px #cccccc; 
	margin: 5px; 
}
div.selectPhotos { 
	text-align: center; 
	width: 70px; 
	height: 320px;
	float: left; 
	align: center; 
	border: solid 1px #cccccc;
	margin: 5px;
}
div.productInfo {
	float: left; 
	width: 260px;
	height: 310px;
	text-align: left; 
	
	margin: 5px; 
	padding: 5px;
	border: solid 1px #cccccc;
}
div.productInfoHeader{
	float: left;
	color: #474747;
	font-weight: 700;
	text-align: left;
	margin-right: 5px;
}
img.mainPhoto { 
	margin: auto; 
	float: middle; 
	vertical-align: middle; 
}
img.thumbnailPhoto { 
	cursor: pointer; 
	width: 50px ;
	border: solid 1px #CCCCCC;
	padding: 2px;
	margin: 5px;
}
div.header { 
	padding-top: 10px;
	text-align: left;
	font-size: 1.5em; 
	font-weight: 700px;
	margin: 5px;
}
div.productDims
{
	float: left;
	text-aling: left;
	margin-top: 40px;

}

/*accordion*/
#container{
	width:790px;
	margin:5px auto;
	display: none;
}
div.toggle{
	
	cursor:pointer;
	font-size:20px;
	padding:5px;
	/*background:#100;*/
	background:#e6e6e6;
	/*background: url(media/double_gradiant.jpg) repeat-x;*/
	border:1px solid #000000;
	color: inherit;
}
div.toggle:hover{
	background:#707070;
	border:1px solid #000000;
	color: #FFFFFF;
}
div.toggle.active{
	background:#474747;
	border:1px solid #000000;
	color: #FFFFFF;
}
div.element{
	border-left:1px solid #000;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
	float: left;
	background: #FFFFFF;
	height: 800px;
	width: 788px;
}
div.element p{
	padding:10px;
}
/*unknown garbage */
#changeProducts
{

}
#productSelections
{
	height: 200px;
	width: 120px;
	float: left;
	text-align: left;
	margin: 0 10px;
}
.vertBottom {
	vertical-align: bottom;
}
label.clickLabel
{
	cursor: pointer;
}



/*
stuff to keep for vertical and horizontally centering divs
.ht1 {display: table; #position: relative; overflow: hidden;width:100%;height:100%}
.ht2 {#position: absolute;  #top: 50%;display: table-cell; vertical-align: middle;text-align:center;}
.ht3 {#position: relative;  #top: -50%;margin:0 auto 0 auto;border:1px solid green;width:300px;height:200px}Update: To clear up some confusion - weve added the widths & heights as needed above.  We had left them out to allow you to customize your own layout, but this way everything is included, and you can change the widths & heights as needed for your installation.

2. Create 3 elements in your HTML
<div class="ht1">
    <div class="ht2">
        <div class="ht3"></div>
    </div>
</div>

*/