/* Gould Stainless Sept, 2006 revised Oct 2007 form */

* {margin: 0; padding: 0}

body {
	background: #FFF url("images/bg_dot.gif"); /* background color white, tiled image is 34k png */
	color: #333; 
	font: 101% Verdana, Arial, Helvetica, sans-serif;  /* font size is 101% of browser default, line height is 1.2 */
	}
	
h2 {
	font-size: .9em;
	margin: 5px 0 5px 10px;
	}
	
h2 a {
	font-weight: normal;
	color: #039; /*text dark blue */
	}
	
h3 {
	font-size: .8em;
	font-weight: normal;
	margin-left: 10px;
	}
	
h4 {
	font-size: .8em;
	color: #039; /*text dark blue */
	margin: 5px 0 5px 10px;
	}
	
h5 {font-size: 1em;
	font-style: italic;
	color: #960;
	text-align: right;
	margin-top: 10px;
	margin-right: 30px;
	}
	
p {
	font-size: .8em;
	}

	
/** 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 {
	background: #FFF;
	margin: 0 auto 0 auto; /* centered layout */
	width: 770px; /* width also needed for centered layout */
	border: solid 1px #00F; /* blue border around entire design */
	}
	
/** header **/
/* This div is just the header (banner) across the top of the container div */
#header {
	margin-bottom: -2px;
	}	 

/** navigation **/
#nav {
	height: 28px;   /* set explicit height for vertical stripes */
	border-bottom: solid 1px #960;
	background: url(images/verticalstripes.gif) 0 0 repeat-y;
	}
	
/* the nav div contains the unordered list of nav links */
#nav #nav-links {
	/* height: 75 px;  set an explicit height for the div that includes flower b.g. */
	font-size: .8em;
	}
#nav #nav-links ul {
	list-style: none; /*no bullets */
	float: right; /*right-aligned */
	padding: 0 30px 0 0;  /* move toward center */
	}


/* AlphaImageLoader used in the WinIE55 and WinIE6 stylesheets. */
#nav #nav-links  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. */
	color: #c90;  /* this shows the lighter text yellow color on the CURRENT page (no link) */
}

#nav #nav-links a {
	display: block;		/* Making them block elements makes the whole list item clickable (rather than just the text itself) */
	color: #960;		/* The links in the nav area are dark yellow and are not underlined. */
	text-decoration: none;
}

#nav #nav-links a:visited {
	color: #960;			/* Visited links remain the same dark yellow color. */
}
#nav #nav-links a:hover { 
	color: #C90;			/* On hover, the link text changes to lighter yellow, b.g. becomes solid white. */
	background: #FFF;
}

	
/** column-wrapper **/
/* wraps both columns (secondary-content and main-content) necessary for print */ 
#column-wrapper {
	} 
	
/** secondary-content **/
/* This column has contact info and supplier links */
#secondary-content {
	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. */
	background: #CCC; /*gray bg in left column */
	border-right: solid 1px #000; /* thin black rule between left column and main content */
	padding: 8px 0 8px 0;  /* content-info div eliminated */
	}

#secondary-content .contact-info img {
	margin-left: 10px;
	}
 
#secondary-content .whisker {
	background: #ccc url("images/whisker24fade.png") no-repeat;
	margin: 10px;
	height: 11px; /* whisker is colored, sized, faded and anti-aliased in Illustrator and saved as a 32 color transparent PNG-24 matted to the BG color.  PNG8 with alpha transparency will appear in IE but loses anti-alias smoothing.  The whisker doesn't print. */
	}
	
#secondary-content .email { /*email doesn't print */
	font-weight: normal;
	}

 
/* SUPPLIERS */
#secondary-content .suppliers ul {
	list-style: none; /* don't use bullets for this list */
	}

#secondary-content .suppliers ul ul {
	list-style: none; /* won't indent in compliant browsers without this*/
	margin: 5px 0 0 10px;
	}
	
#secondary-content .suppliers li {
	padding: 5px 0 5px 10px; /* add some padding all around the list item */
	color: #006; /* navy blue text color */
	width: 145px; /* column width is 190 float breaks in IE6 if wider than 145*/
	font-weight: bold; 
	font-size: .8em;
	}
	
#secondary-content .suppliers a {
	color: #006;		/* The supplier links are navy blue and are not underlined. */
	text-decoration: none;
}

#secondary-content .suppliers a:visited {
	color: #006;			/* Visited links remain the same navy blue color. */
}
#secondary-content .suppliers a:hover { 
	color: #00F;			/* On hover, the link text changes to bright blue. */
}
/* end secondary content /

	
/** main-content column **/
/* main content */
#main-content {
	background: #FFF;
	margin-left: 190px; /* equals the width of the secondary-content column which is floated left ************************/
	}
	
#content h4 {
	font-size: 1em;
	color: #039; /*dark blue */
	margin: 10px 5px 0 10px; /* margin around main content headlines */
	}
	
#content p {
	margin: .5em 1em;  /* a bit of whitespace around the paragraphs */
	}
	
.em {
	font-style: normal;
	text-decoration: underline;
	}

#content a{
	color: #039; /*links in the main content area are blue */
	text-decoration: none; /* and not underlined */
	}
#content a:visited {
	color: #039; /* visited links remain the same blue color */
		}
		
#content a:hover {
	color: #FFF; /* on hover, the link color becomes white with a blue bg */
	background-color: #039;
	}
	
#content ul {
	margin: 10px 10px 0 60px;
	font-size: .8em;
	}
	
#content li {
	padding: 2px;
	}	


/** testimonial **/


#testimonial p {
	font-size: .8em;
	text-align: right;
	color: #000;
	margin-top: 10px;
	font-style: italic;
	padding: 10px 25px 0 30px;
	border-top: 1px #333 dashed;
	}
	
#testimonial-source {
	font-size: .8em;
	text-align: right;
	font-weight: bold;
	padding: 10px 25px 15px 60px;
	}
	
#testimonial-source a:visited {
	color: #006;
	}			/* Visited links remain the same navy blue color. */
	
/** footer **/
/* The footer is another unordered list. */

#footer {
	font-size: .6em;
	white-space: nowrap;	/* Footer items are not allowed to wrap. */ 
	float: right;			/* The footer list items are right aligned. */
	margin-top: 10px;  	/* Adds a bit of space at the top. */
	margin-right: 40px;  /* moves the links under the main content */
}

#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. */
}

#footer a {
	display: block;			/* Making the links block elements makes the whole list item clickable (rather than just the text itself). */
	padding: 4px;			/* Adds a bit of padding all around the link text. */
	color: #039;			/* 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-weight: bold;		/* Make the links bold. */
	border: solid 1px #FFF;	/* Adds a border around each list item. */
}

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

#copyright {
	text-align: right;
	font-size: .8em;
	margin: 10px 220px 5px 10px; /* from 220px right margin */
	
	}


/** miscellaneous **/
	
.brclear { 				/* Snippets > Community MX > CMX CSS Collection > Productivity > Clearing Element for Floats */
     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. */     	
}	
	
.image-on-right {			
	float: right;		/* Floats images to the right side of the page. */
	margin: 0 10px 0 10px;	/* Add some space on the right and left side of the image and right margin. */
}

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

.image-border {
	float: left;
	border: solid 1px #000;
}

.image-wide {
	margin: 10px 0 5px 0;
}

.underline {
	text-decoration:underline;
}

/********  FORM ********/

#formcontainer {
	width: 500px; 
	margin: 10px 5px 20px 45px;
	}
	
#formcontainer p {
	margin-left: 0;
	}
	
/* #formcontainer textarea {  makes the text light gray
	color:#999;
	background: inherit;
	}  */
	
	
.required {
	padding: 0 0 0 20px;
	color:#960;  /* dark yellow navigation */
	font-size: .7em;
	background: inherit;
	}
	
label {
	font-size:.8em;
	}