/* Greenville Jumpstart */


body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, li, a, form, #header, .thumbnail-list-header, .thumbnail-list ul, .thumbnail-list li {
	margin: 0;		/* Set margin and padding to 0 to even out browser differences. */
	padding: 0;
}

body {
	background:  #D8E4E4  url(../../images/GreenBackground.jpg); 	/* background color and tiled image */
	color: #16511D;												/* font color is dark green */
	font: 95%/1.25 Arial, Helvetica, sans-serif;				/* font size is 80% of the browser default; line height is 1.25; font is set here too */
}

h1  {
	margin: 0.5em 0 0 11px;		/* add some space around the headings */
	color: #336633;					/* font color dark green */
}
h2  {
	margin: 0.5em 0 0 11px;		/* add some space around the headings */
	color: #336633;					/* font color dark green */
	 }

#content h2  {
	margin: 0.5em 0 0 11px;		/* add some space around the headings */
	font-family: Arial, Helvetica, sans-serif, lucida-sans;
	font-size: 22px ;
	/*color:#336633 ;*/
	font-weight:bold
}

#content h3 {
	margin: 0.5em 0 0.5em 11px;		/* add some space around the headings */
	font-family: Arial, Helvetica, sans-serif, lucida-sans;
	font-weight: bold;
	/*color:	 #336633 ;*/
	font-size: 18px;
}

#content h4 {
	margin: 0.5em 0 0.5em 11px;		/* add some space around the headings */
	font-family: Arial, Helvetica, sans-serif, lucida-sans;
	font-weight: bold;
	color:	 #336633 ;
	font-size: 16px;
}

/* #content .menu {  
	font-family: Arial, Helvetica, sans-serif, lucida-sans;
	font-size: 10px; 
	clip: rect(); 
	margin-top: 0px; 
	margin-left: 4px}

*/
#content .Tdwhybuy {
	padding: 15px 0 15px 0;
	}


/** container **/
/* This div contains all the real content on the page. It contains the header div, the column-wrapper div, and the footer div. */
#container {
	margin: 0 auto 0 auto; 	
	width: 955px;									/* Width is also needed for the centered layout. */
}

/** header **/
/* This div is just the header (banner) image across the top of the container div */
/* AlphaImageLoader used in the WinIE55 and WinIE6 stylesheets. */
#header { 	
	border: solid 1px #036;		/* The header has borders on three sides, but not the bottom. */
	border-bottom: none;
	height: 125px;				/* The header height corresponds to the height of the image displayed as the background image. */
	background: url(../../images/header.jpg) 0 0 no-repeat;	/* This is the background image. See the WinIE stylesheets for the IE-only solution to the problem of IE not supporting transparent pngs. See the MacIE comments at the bottom of this file to see the background-color alternative. */
}

#container #toplinks {
	float:right;
	height: 18px; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size:10px;
	margin:0px 0px 7px 0px;
}

#container #toplinks a {
	color:#009900;
}

#secondary-content #toplinks input {
	border: solid 1px #360;	/* Add a border and margin around the form elements. */
	margin: 1px;
}

/* AlphaImageLoader used in the WinIE55 and WinIE6 stylesheets. */
#secondary-content #toplinks .login-button {
	padding: 2px 1px;										/* Give the button a little more padding between the text on the button and the border around the button. */
	color: #060;											/* Color for the button text. */
	border: 1px solid #360;									/* Border around the button. */
	background-color: #FFF;
}


/** column-wrapper **/
/* wraps both columns (secondary-content and main-content) */
/* AlphaImageLoader used in the WinIE55 and WinIE6 stylesheets. */
#column-wrapper {
	border: solid 1px #036;		/* We have borders on three sides, but not the top (which is where the header is). */
	border-top: none;
	background: transparent url(../../images/StripedTransparentBG.png) 0 0 repeat-y;	/* This is the background image. See the WinIE stylesheets for the IE-only solution to the problem of IE not supporting transparent pngs. See the MacIE comments at the bottom of this file to see the background-color alternative. */
}


/** secondary-content **/
/* This column has the thumbnail lists. */
#secondary-content {
	border: solid 1px #036;		/* We have borders on the right sides only. */
	border-top:  none;
	border-left: none;
	border-bottom: none;
	float: left;	/* The side-by-side columns are achieved by floating the secondary-content column and */
	width: 190px;	/* giving the main-content column a left margin equal to the width of the secondary-content column. */
}

/* The .thumbnail-list-header class has the vertical green stripes in the background. */
/* AlphaImageLoader used in the WinIE55 and WinIE6 stylesheets. */
#secondary-content .thumbnail-list-header {
	background: url(../../images/GreenStripes.png) 0 0 repeat-y;	/* This is the background image. See the WinIE stylesheets for the IE-only solution to the problem of IE not supporting transparent pngs. See the MacIE comments at the bottom of this file to see the background-color alternative. */
	padding-top: 4px;
	padding-right: 0;
	padding-bottom: 4px;
	padding-left: 0;
}

#secondary-content .thumbnail-list-header h2 {
	font-size: 120%;	/* Set the size of the headers in the secondary-content column. */
	margin: 0.5em 0 0 0.4em;		/* add some space around the headings */
}


/* There are two unordered lists in this column. Both use the same styling. Each item in the list has an h3, image, and link. */ 
#secondary-content .thumbnail-list ul {
	list-style: none;	/* Don't use bullets for the lists. */
}

#secondary-content .thumbnail-list li{
	padding: 5px;		/* Add some padding all around the list item. */
	font-size: 90%;	/* Set the size of the text in the secondary-content column. */
}

#secondary-content .thumbnail-list h3 {
	float: right;			/* Float the header to the right */
	width: 120px;			/* Combined with the float, this value for the width puts a little space between the image and the h3. */
	font-weight: normal;	/* Don't bold the h3. */
	font-size: 1em; 		/* See Zoe's explanation in her article on thumbnail lists (included with the JumpStart). */
}

#secondary-content .thumbnail-list p {
	margin: 1em 0 1em 60px; /* This adds space above and below the paragraph and pushes the paragraph to the right so that it sits next to the image. */
	font-size: 80%;	/* Set the size of the text in the secondary-content column. */
}

#secondary-content .thumbnail-list .promo {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 80%;	/* Set the size of the text in the secondary-content column. */
	margin: 5px; /* This adds space above and below the paragraph and pushes the paragraph to the right so that it sits next to the image. */
	background-color:#D8E4E4
}


#secondary-content .thumbnail-list img {
	float: left;				/* The images are floated to the left. */
	border: solid 2px #039;		/* The images have a 2px blue border. */
}

#secondary-content .thumbnail-list img:hover {
	border: solid 2px #FFF;		/* Change the border to white on hover. Note that Win IE ignores this rule. The border remains blue on hover. */
}
 
#secondary-content  .thumbnail-list li a:link,
#secondary-content  .thumbnail-list li a:visited {
	color: #6C2718;				/* Link color. */
}

#secondary-content  .thumbnail-list li a:hover {
	color: #FFF;				/* Link color. */
	background-color: #FF9900;		/* Background color. */
}


/** main-content column **/
/* This column has the nav div and the main content div. */
#main-content {
	margin-left: 190px; 	/*The side-by-side columns are achieved by floating the secondary-content column and giving the main-content column a left margin equal to the width of the secondary-content column. */
}

/** table styling for body pages **/
table.Tproduct, table.Tquantity, table.Tingredients {
	font-family:Arial, Helvetica, sans-serif, Lucida-sans;
	font-size:10px;
	margin: 0 0 0 0.6em;
	border-style: none;
}

table.Tproduct {
}

table.Tproduct img {
	margin:14px 0 0 6px;
	}


table.Tquantity {
	width: 160px;
	border-collapse: separate;
	border-spacing: 0px;
	}
	
table.Tproduct td {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

table.Tingredients {
	margin: 0 0 0 0.6em;
	width: 95%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

table.Tbenefits {
	margin: 0 0 0 0.6em;
	width: 95%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

table.Tbenefits td {
	padding: 5px;
}


#content ul, ol, td {
	margin:0 0 0 0.5em;
	font: 12px "Arial";
}

#content p {
	margin:1em 0 1em 11px;
	font: 12px "Arial";
}


#content ul{
	margin: 0 0 0 27px;			/* Add a bit a white space around the lists. */
}

#content .fancy-text {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-style: italic;
	color: #0000FF;
}


#content a {
	color: #1B18AA;			/* Links in the main content area are blue and are not underlined. */
	text-decoration: underline;
}
#content a:visited {
	color: #6C2718;			/* Visited links remain the same blue color. */
}
#content a:hover { 
	color: #000;			/* On hover, the link color becomes black with a orange background. */
	background-color: #FF9900;
	text-decoration: underline;
}

#content a:hover img {
	background-color: #FFF;		/* Background color. */
	text-decoration: none!important;
	}


/* The nav div contains the unordered list of nav links */
#content #nav  {
	height: 32px;												/* Set an explicit height for the div. */
	background-color: #FFFFCC;
	width: 99%;
}

#content #nav ul {
	list-style: none;		/* The nav links are in an unordered list. Don't use bullets. */
	float: left;			/* This makes the nav links right aligned. */
	margin: 0 0 0 0;		/* add some space around the nav list */
	background-color: #FFFFCC;
}


#content .price {
	margin:0 0 0 0.6em;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px; 
	font-weight: bold; 
	color: #000000; 
}


/* AlphaImageLoader used in the WinIE55 and WinIE6 stylesheets. */
/* #content #nav  li {
	float: left;											/* This makes the nav links list out horizontally rather than vertically. */
/*	text-align: center;										/* Center the text within each bordered list item. */
/*	border: solid 1px #999;									/* Adds a gray border around each it. */
/*	width: 70px;											/* Needed by all browsers, which is convenient since the filter requires the div to have layout (and height gives it layout). */
/* 	background: url(../images/TinyWhite.png) 0 0 repeat;	/* The background of the list items uses this partially transparent white background. */
/*} */
 
#content #nav a {
	display: block;			/* Making the links block elements makes the whole list item clickable (rather than just the text itself). */
	color: #060;			/* The links in the nav area are green and are not underlined. */
	text-decoration: none;
}

#content #nav a:visited {
	color: #060;			/* Visited links remain the same green color. */
}
#content #nav a:hover { 
	color: #300;			/* On hover, the link text changes to this maroon color and the background becomes solid white. */
	background: #FFF;
}


#content .value {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 14px;
	font-weight:bold; 
	color: #FF0000;
}

/** footer **/
/* The footer is another unordered list. */
#container #footer {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 9px; 
	margin: 10px 0 10px 0;  			/* Adds a bit of space around the entire footer region. */
	text-align: center;				/* The footer list items are right aligned. */
	height:22px;
}
	
#footer .small_case {  
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 9px; 
	font-variant: small-caps; 
	text-decoration: underline;
}
	
#container #footer li {
	list-style: none;		/* Don't use bullets for the list items in the footer. */
	float: left; 			/* This makes the footer links list out horizontally rather than vertically. */
}

#container #footer a {
	padding: 4px;			/* Adds a bit of padding all around the link text. */
	color: #009900;			/* Link text is the same blue color as used in the secondary-content column's thumbnail list. */
	background: transparent;/* Allows the green textured background image to show through. */
	text-decoration: none;	/* Don't underline the links. */
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
}

#container #footer a:hover { 
	color: #FFF; 
	background: #01228D; 
}


@media screen {
	
	#container A.ico_external {
		background: transparent url(../../images/icons/ico_external_link.gif) no-repeat 2px center;
		padding-left: 22px; /* image width is 18px*/
	}
	#container A.ico_email {
		background: transparent url(../../images/icons/ico_mailto.gif) no-repeat 2px center;
		padding-left: 20px; /* image width is 14px*/
	}
	#container A.ico_pdf {
		background: transparent url(../../images/icons/ico_pdf_vsm.gif) no-repeat 2px center;
		padding-left: 18px; /* image width is 16px*/
	}

}

/** miscellaneous **/

.brclear { 				
     clear:both; 		/* Clearing element for a float: this fix uses a break in the markup as a clearing element, */
     height:0; 			/* but it ensures that the break does not disturb the layout by reducing its values to 0. */
     margin:0;			/* Add this class to breaks as needed to clear a float. */
     font-size: 1px;	/* Please note that the container of the break needs a dimension on it. */     	
}

.print-header {			/* This class is applied to the h1 and first h2 on the page. They are hidden in the screen stylesheet and you see the header banner image instead. */
	display: none;
	visibility: hidden;
}


.image-on-right {			
	float: right;		/* Floats images to the right side of the page. */
	margin-left: 10px;	/* Add some space on the left side of the image. */
}

#skiplinks {
	color: #666666;			/* Link color. */
	text-decoration: none;	/* The link is not underlined. */
	display: block;			/* Making the links block elements makes the whole list item clickable (rather than just the text itself). */
	text-align: center;		/* Centered text */
	margin: 0 auto 0 auto; 	
	visibility: hidden;
}

.green {
	color: #336633;
	font-weight:bold;
}


.tableh2 {
	font-family: "Lucida Sans", Verdana, Arial, Helvetica;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	background : #336633;
    text-indent: 3pt;
}


.social_bookmark
{
	padding:5px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.social_bookmark img:hover{
	text-decoration: none;
	background-color: #FFF;		/* Background color. */
	}

.social_img
{
	padding:1px;
	border:none;
}


/** IE MAC ONLY **/

/*\*//*/
#column-wrapper {
	background-color: #FFF;
}
#secondary-content,
#secondary-content .thumbnail-list {
	background-color: #EEE;
}
#secondary-content .thumbnail-list-header {
	background-color: #D3E8A8;
}
#secondary-content .thumbnail-list ul {
	margin: 0;
}
#secondary-content .thumbnail-list p {
	clear: both;
}
#secondary-content .login-form {
	padding: 0 4px 0 0;
}
#secondary-content form {
	margin: 0;
}
#footer li {
	margin: 0;  
	width: 140px;
	text-align: center;
}
/* */