* {margin-top: 0px; margin-bottom: 0px;}
* {margin:0px; padding: 0; border: 0;}
table {border-collapse: collapse;}/*Remove spaces from all tables by default*/
img {display: block;} /*to fix extra spaces after images in Firefox*/

.hiddenImages img {visibility:hidden;position:absolute;}

a {text-decoration: none;}

.normalText {font-size:12pt;}
.smallText {font-size:10pt;}
.tinyText {font-size:8pt;}

.rightcontent a:link, .content a:link, a.buyButton:link{font-weight:bold; color: #ffb400; }

.rightcontent a:visited, .content a:visited, a.buyButton:visited, .coloredText {font-weight:bold; color: #ff9900; }

.rightcontent a:hover, .content a:hover, a.buyButton:hover {
	/*color: #7ec1ff;*//*#0084ff;/*blue*/
	/*background-color: #f6f2ec;*//*light tan*/
	color: #ffcc99;/*#0084ff;/*blue*/
	background-color: transparent;
	text-decoration: none;
	font-weight: bold;	}

.rightcontent a:active,	
.content a:active { 
	color: #ff9900;
	text-decoration: none;
	font-weight: bold;
	}
.box a{ 
	color: black;
	text-decoration: none;
	font-weight: normal;
	}
 table.bordered {text-align:center;font-weight:bold;}
 table.bordered td{border:1px solid gray;}
 
 body {text-align:center; /*for IE5 workaround*/
	background-image: url(images/orangeGreenFlowerTexture.jpg);
	/*background-image: url(images/yellowFlowerTexture.jpg);*/
	/*background-attachment:fixed;*/
	margin: 0px auto;
	padding: 0px;
	/*overflow: auto;/*To hopefully make buggy IE6 apply fixed background*/
	overflow: visible;/*To make sure that no scroll bars around the main box appear in mozilla */
	line-height: 150%;
	/*font-family: Arial, sans-serif;*/
	font-family: "Trebuchet MS", Verdana, Times, serif;
	font-size: 13pt;
	}

  div.container1, div.container2, div.container3, div.container4
  {
	/*overflow: visible;*/
	position: relative;
	border: 1px solid gray;
	/*border-width:  2px  1px  1px  2px; /* top, right, bottom, left */
    width: 806px;
    padding: 0px;
    }
  div.container1
  { 
	border-color:#0F0F0F;
	text-align: left;/*to cancel IE5 workaround in body*/
	/*overflow:auto;/*To hopefully make buggy IE6 apply fixed background*/
	/*overflow: visible;*/
	/*background-image: url(images/black1pxbackground.jpg);*/
	/*background-image: url(images/summer_landscape1pxbackground.jpg);*/
	/*background-image: url(images/HorizontalGradient.gif);*/
	/*background-color: #e3f5ff;*//*Nice Blue - slight green-blue hint*/
	/*background-color: #e4f2ff;*//*Nice Blue - slight violet hint*/
	background-color: #e7f4fd;
	background-position: top center;
	background-repeat: repeat-y;
	/*background-attachment:fixed;*/
	margin: 0px auto;
  }
  * html div.container1 {/* This is the Tan Hack that only affects IE*/
	width: 808px;/*This should only affect IE5win*/
	w\idth: 806px;/*This is seen by IE6win*/
	}
  div.container2
  {
	width: 804px;
	/*width: 100%;*/
	
  }
  * html div.container2 {/* This is the Tan Hack that only affects IE*/
	width: 806px;/*This should only affect IE5win*/
	w\idth: 804px;/*This is seen by IE6win*/
	}
  div.container3
  {
	border-color:#F7F7F7;
   	/*width: 100%;*/
   	width: 802px;
  }
  * html div.container3 {/* This is the Tan Hack that only affects IE*/
	width: 804px;/*This should only affect IE5win*/
	w\idth: 802px;/*This is seen by IE6win*/
	}
  div.container4
  {
	border-color:#0f0f0f;
	background-image: url(images/Sun_Rays_Flipped175px.jpg);/*Header*/
	background-repeat: no-repeat;
	background-position: top center;
	width: 800px;
  }
  * html div.container4 {/* This is the Tan Hack that only affects IE*/
	width: 802px;/*This should only affect IE5win*/
	w\idth: 800px;/*This is seen by IE6win*/
	}
	
  div.header {position:relative;
	margin: 0px 0px 0px 0px;/* top, right, bottom, left */
	text-align: center;
	font-size: 50pt;
	line-height:2em;
	color: black;
	height: 160px;/*This is the value that determines the vertical placement of the menu and content fields*/
	border: 0px;
	/*visibility: hidden;/*To allow Marine Phytoplankton Title in header without showing over banner*/
    }

  div.footer { padding: 0px 0px 0px 0px;
    height: 200px;
    color: #f6f2ec;
		text-align: center;
		font-size:11px;
		line-height:1em;
		font-weight:bold;
    background-color: transparent;
	  background-image: url(images/GrassTransparentWithBackgroundLayer800x180px.jpg);
	  /*background-image: url(images/GrassOnlyRepeatXTransparent.png);*/
		background-repeat: repeat-x;
		background-position: bottom left ;/* 0px 0px; /* hor vert */
    clear: both;
    }
	div.footer div{position:absolute; left:0px; bottom: 0px; width:100%;}/*This keeps the footer text at the bottom while allowing teh text to have relative positioning to keep it centered*/

  div.left { margin: 0px;
	/*border: 0px solid black;*/
	overflow: visible;/*To try to fix the intermittent menu wrapping bug*/
    margin: 0px 0px 0px 0px;/* top, right, bottom, left */
	width: 194px;
    float: left;
    display: inline;
  }
  
  div.spacer{
	clear: both;/*used at end of menu to make left column content sit below menu*/
  }

/*#035db1;/*darker blue*/
/*#99CCFF;/*grey blue*/
/*#7ec1ff;/*#0084ff;/*blue*/
/*#f6f2ec;/*light tan*/

  .navmenu a,
  .submenu a,
  td.navmenu .submenu a,/*makes sure that the buttons stay the same height in the pulldown menu during hover*/
  .productTitle p{ 
	display: block;
	text-decoration: none;
	color: black;
	text-align:	center;
	font-size: 13pt;
	font-weight: bold;
	white-space:  nowrap;/*keep	text from wrapping*/
	padding: 0px 0px 0px 0px;/*	top, right,	bottom,	left */
	height:	30px;
  }

  div.navmenu, div.productTitle	{ width:	100%; background-image:	url(images/MetalVerticalGradientStrip_1x30.gif); background-position: top left;background-repeat: repeat-x;}
  td.navmenu {width: 160px;}
  td.navmenu div{display: block; visibility: hidden; background-image: url(images/MetalVerticalGradientStrip_1x30_Reversed.gif);background-position: top left;background-repeat: repeat-x;}
  td.navmenu div a{border-right: solid 1px gray; visibility: visible;}
  td.navmenu div a:hover{text-indent: 3px; padding: 2px 0px 0px 0px; height: 28px;}/* top, right, bottom, left */
  /*.navmenu a:hover { color: #0099ff;}/*powder blue */

  .navmenu2 td.navmenu{width: 134px;}
	.navmenu2 div.navmenu{background-image:	url(images/LightMetalVerticalGradientStrip_1x30.gif);}
  .navmenu2 td.navmenu div{background-image: url(images/LightMetalVerticalGradientStrip_1x30_Reversed.gif);}
  

  .navmenu table.submenu{z-index: 1000; position:absolute;}/*Keep the submenu floating over the top of whatever comes below the navmenu*/
  td.navmenu .submenu a{visibility:inherit;}/*undoes the submenu part of the visibility: visible that gets applied to all a within the navmenu above*/
  .submenu a, td.navmenu .submenu td a, td.navmenu .submenu td a:hover { /* define general characteristics of the "navbar" buttons */
	padding: 0px 0px 0px 0px;/*	top, right,	bottom,	left *//*Needed to undo the padding on the .navmenu a hover state*/
	width: 157px;
	height: 25px; 
	border-style: solid;
	visibility: inherit;
  }
  
  .left .submenu a{	width: 187px;}
  .left div.submenu{ margin: 50px 0px 60px 5px;}/* top, right, bottom, left */
  
  .submenu a, td.navmenu .submenu td a { /* borders and colors for the non-hover state */
	border-width:  1px  2px  2px  1px; /* top, right, bottom, left */
	border-color: #fcfcfc #c5c5c5 #c5c5c5 #fcfcfc; /* top, right, bottom, left */
	background-color: #f6f6f6;
	color: #111;
  }
  
  .submenu a:hover, td.navmenu .submenu td a:hover { /* borders and colors for the a:hover state */
	border-width:  2px  1px  1px  2px; /* top, right, bottom, left */
	border-color: #c5c5c5 #fcfcfc #fcfcfc #c5c5c5; /* top, right, bottom, left */
	background-color: #eeeeee; /* darker background (button face) */
	color: #000; /* darker text */
	/*color: #0099ff;/*powder blue */
  }
  
  a.buyButton:hover {font-weight:bold; color: #ffb400; }

  div.rightcontent, div.content {	padding: 0px 10px 0px 10px;/* top, right, bottom, left */}
  
	div.content { width: 775px; float: left; }
    
* html div.content {/* This is the Tan Hack that only affects IE*/
	width: 795px;/*This should only affect IE5win*/
	w\idth: 775px;/*This is seen by IE6win*/
	}
	
  div.rightcontent { width: 580px; float: right; }
  
* html div.rightcontent {/* This is the Tan Hack that only affects IE*/
	width: 600px;/*This should only affect IE5win*/
	w\idth: 580px;/*This is seen by IE6win*/
	}
	
  div.box, div.leftImage, div.rightImage, div.centerImageSm, div.centerImageMd, div.centerImageLg, div.tiledImage, div.productListing, div.productSummary{
	background-color: #f6f6f6;/*light gray*/
	padding: 4px;
	border: 2px solid white;
	font-size: 12pt;
  }

  div.leftImage, div.rightImage, div.centerImageSm, div.centerImageMd, div.centerImageLg, div.tiledImage{
	float: left;
	display: inline;/*fixes IE6 double margin bug*/
	margin: 8px 10px 10px 10px;/*	top, right,	bottom,	left *//*Top Margin 8px to line up better with paragraph text*/
	}
	.right{float: right;display: inline;/*fixes IE6 double margin bug*/}
	.left{float: left;display: inline;/*fixes IE6 double margin bug*/}
  div.rightImage, div.productListing{
    float: right;
    margin-right: 0px;
    margin-bottom: 0px;
	}
  div.leftImage{
    margin-left: 0px;
    margin-bottom: 0px;
	}
	
	div.centerImageSm{margin-left: 215px;}
	div.centerImageMd{margin-left: 165px;}
	div.centerImageLg{margin-left: 110px;}
	
	div.centerImageSm img{ width: 150px;}
	div.centerImageMd img{ width: 250px;}
	div.centerImageLg img{ width: 360px;}
	
	div.storeItem {width: 170px;text-align:center; float:left; display: inline; margin:8px; }/*display is ignored normally, but also happens to fix IE6 double margin!/*keep item divs floating within productListing bos and center things within each item div*/
	
	div.storeItem img{
		width: 100%;/*takes on the width of the storeItem div*/
		height: 170px;
		margin-top: 0px;/*To keep multiple rows of images from being spaced too close vertically*/
	}
	div.storeItem p, div.productListing p{font-size: 14pt; font-weight: bold; text-align: center;}
	div.storeItem p.itemName{}
	div.storeItem p.itemDescription{font-size: 12pt;font-weight:normal;}
	div.storeItem p.itemPrice{}
	
	a img{border: solid 1px white;}
	a:hover img{border: solid 1px black;}

	div.tiledImage, div.productListing{
		margin-bottom: 0px;/*IE doesn't respect the margin, so remove it for consistency*/
		margin-top: 20px;/*To keep multiple rows of images from being spaced too close vertically*/
	}
	
	div.productListing{
		border-top: 0px;
	}

	div.tiledImage img{
		width: 226px;
	}
		
  div.leftImage p, div.rightImage p, div.centerImageSm p, div.centerImageMd p, div.centerImageLg p, div.tiledImage p{
		text-align:center;
	  font-size: 16pt;
	  line-spacing: 100%;
	}
  div.leftImage img, div.rightImage img, div.centerImageSm img, div.centerImageMd img, div.centerImageLg img, div.tiledImage img, div.productListing img{
    margin-bottom: 3px;
	}
  div.lastImage img{
    margin-bottom: 0px;
	}
	div.adjacentImages img{
		margin:0px;/* top, right, bottom, left */
		float:left;
		height:108px;/*127px to fit 6 images across*/
		width:108px;
	}
	.rightcontent .RowOf3 img{width:174px;}
	.content .RowOf3 img{width:174px;}
	.rightcontent .last, .content .last{margin-right:0px;}
	
	div.adjacentImages,div.adjacentImages a{height:110px; width:110px;float:left;}
	div.adjacentImages a div{display:block;position:relative;}
	div.adjacentImages a p{visibility:hidden;text-align:center;}
	div.adjacentImages a:hover p{visibility:visible;color: black;}

	div.halfWidth{width: 379px; margin:  0px 12px 0px 0px;}
	div.productSummary{width: 367px;font-weight:bold;text-align:center; line-height: 110%;margin: 10px 0px 0px 5px;/* top, right, bottom, left */}
	div.productSummary ul li{text-align:left; font-size: 10pt;margin: 0px 0px 10px 25px;/* top, right, bottom, left */}
	div.productSummary h2{margin: 15px 0px 0px 0px;/* top, right, bottom, left */}
	div.productSummary p{font-size: 13pt; margin: 15px 0px 0px 0px;/* top, right, bottom, left */}	
	div.productSummary div.column2{width: 182px; padding: 0px;}
	div.productSummary a img{border-width:4px; float:left; width: 70px;	height: 70px;	margin: 10px 0px 10px 10px;/* top, right, bottom, left */}
	/*div.productSummary a:hover img{border-color: gray;}*/
	
	div.content div.box {
	width: 763px;/*Content width=775px - 2 x 4px padding - 2 x 2px border */
	margin: 10px 0 10px 0;
	}
* html div.content div.box {/* This is the Tan Hack that only affects IE*/
	width: 775px;/*This should only affect IE5win Add 12px = 2x4px padding + 2x2px border*/
	w\idth: 763px;/*This is seen by IE6win*/
	}  
	
  div.rightcontent div.box,
  div.rightcontent div.productListing,
  div.rightcontent div.navmenu{
	width: 568px;/*Content width=580px - 2 x 4px padding - 2 x 2px border */
	margin: 10px 0 10px 0;/* top, right, bottom, left */
	}
	div.rightcontent div.productListing{ margin: 0px 0px 20px 0px;/* top, right, bottom, left */}
	div.rightcontent div.navmenu{	margin: 0px; }
	
* html div.rightcontent div.box,
  div.rightcontent div.productListing,
  div.rightcontent div.navmenu{/* This is the Tan Hack that only affects IE*/
	width: 580px;/*This should only affect IE5win Add 12px = 2x4px padding + 2x2px border*/
	w\idth: 568px;/*This is seen by IE6win*/
	}  
  div.left div.box{
	width: 178px;/*left column width=200px - 2x4px padding - 2x2px border -2x5px margin*/
	margin: 5px;
	}
* html div.left div.box{/* This is the Tan Hack that only affects IE*/
	width: 190px;/*This should only affect IE5win Add 12px = 2x4px padding + 2x2px border*/
	w\idth: 178px;/*This is seen by IE6win*/
	}	
	
  div.column1, div.column2{ 
	background-color: transparent;
	padding: 0px 10px;/*0 [top and bottom],[left and right];*/ 
	font-size: 12pt;
	text-align: left;
	float: left;
	width: 264px;
  }	
  div.column1{ 
	text-align: right;
  }	 	 	
  .content div.column1{width:365px;}
  .content div.column2{width:264px;}
    
	#ViewCart {margin:	10px 0px 0px 38px;}/* top, right, bottom, left */
  #PhytoplanktonPowder, div.left div.box img {
  margin: 10px 10px 10px 14px;/* (178-150)/2 */
  width: 150px;
  }
  * html #PhytoplanktonPowder {/* This is the Tan Hack that only affects IE*/
  margin: 10px 10px 10px 14px;/*This should only affect IE5win*/
  margin: 10px 10px 10px 14px;/*This is seen by IE6win*/
  }

 /* marquee{height:200px;}*/

  h1{
	margin-top: 20px;
	text-align: center;
	line-height: 125%;
	font-size: 25pt;
  }

  h2{
	margin-top: 20px;
	text-align: center;
	line-height: 120%;
	font-size: 18pt;
  }
  div.box h2{
	margin-top: 0px;
  }
  h3{
	/*margin-top: 20px;*/
	text-align: left;
	line-height: 120%;
	font-size: 15pt;
  }
  div.SubmenuTitle{
		text-align: center;
		font-size: 22pt;
		font-weight:bold;
		/*background-image:	url(images/LightMetalVerticalGradientStrip_1x30.gif);
		background-repeat: repeat-x;*/
		background-color: White;
		height: 50px;
  }
  .SubmenuTitle p{padding-top: 12px;}
  
  p.Q{
	line-height: 120%;
	font-size: 14pt;
  }
  p.A{
	line-height: 120%;
	font-size: 13pt;
  }
  .productTitle p{text-align: center; font-size: 14pt; height: 30px;}
  
.rightcontent ul li, 
.content ul li
{ 
	margin: 10px 0px 10px 30px;/* top, right, bottom, left */
/*list-style-image: url(images/bullet1.gif);*/
list-style-type: disc; color: #000000;
}

.rightcontent ul li li, 
.content ul li li
{ 
/*list-style-image: url(images/bullet2.gif);*/
list-style-type: none; color: #000000; 
}

.rightcontent ul li li li, 
.content ul li li li
{ 
list-style-image: url(images/bullet3.gif);
list-style-type: square; color: #000000; 
} 

ol li
{
	margin: 10px 0px 10px 30px;/* top, right, bottom, left */
}