/* CSS Document */
/* Copyright (c) 2005-2007 Huisware Web Technologies Inc */
/* Huisware Web Technologies Inc */

body
{    
	font-family: Verdana;
	font-size: 62.5%;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 17px;				      
    background: #666633;    
    margin: 10px 0 0 0;
    padding: 0;
}

/* main */
#container
{   
    display:block;
    margin:0px auto;
    width:1000px;
    height:500px;     
    padding-bottom: 0px;
}

/* wrapper */
#header_wrapper
{
    padding: 0px 0px 0px 0px;
    height: 324px;
        
}

#page_wrapper
{   
    width:1000px; 
    margin:0;
    padding:0 0 50px 0;
    border:0;
}

#subnav
{
    width:1000px; 
}

img{border:0}

h1, h2, h5 /* There is only one h1 element by convention - the header...on top of the page.*/
{
text-indent:-9999px; /* hides h1 text way off screen - CSS incapable browsers will display h1 in place.*/
margin:0;
padding:0;
border:0;
}

h1
{
display:block;
width:1000px;
height:324px;
background: #FFFFFF url(../i/logo_header_2011.gif) top center no-repeat;
margin:0;
padding:0;
border:0;
text-decoration:none;
}

h4
{
    margin-bottom: 0px;
    color: #ccccff;
	font-size: 150%;
	font-weight: bold;
	line-height: 17px;    
}

p
{
    margin: 0px 0px 0px 0px;
}

.final
{
    margin: 0px 0px 15px 0px;
}
	
/* Column layout */
#column_1
{
    width: 275px;
    padding: 0px 5px 0px 0px;
    float: left;    
}

#column_2
{
    width: 725px;
    margin: 0px 0px 0px 5px;
    padding: 0px 0px 0px 0px;
    text-align: left;
    float: left;          
}

#footer
{
    clear: both;
    border: 5px solid #ccccff;
    background-color: #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    text-align:left;
    position: relative;
    top: 0px;
    left: 0px;    
}

#credit
{
    clear: both;
    background-position: center center;    
    background-color:Transparent;    
    margin: -10px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    position: relative;
    top: 15px;
    left: 0px;
    height: 0px;
}

#credit p
{
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding: 0px 0px0px 0px;    
}

a:link
{
    font-weight: normal;    
    color: #ccccff;
}

a:visited, a:visited:hover
{
    font-weight: normal;    
    color: #ccccff;
}

a:hover, a:active
{
    font-weight: normal;
    text-decoration: underline;
    color: #ccccff;
}


#credit a:link
{
    font-weight: normal;
    text-decoration: none;
    color: #ccccff;
}

#credit a:visited, #credit a:visited:hover
{
    font-weight: normal;
    text-decoration: none;
    color: #ccccff;
}

#credit a:hover, #credit a:active
{
    font-weight: normal;
    text-decoration: underline;
    color: #ccccff;
}

.hidden
{
	text-indent:-9999px;	
	display:none; 
}

.headlineHolder
{
	width: 725px;
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	text-align: left;
}
.headline
{
    background: #666633 url(../i/cups_1_2011.gif) center left no-repeat;      
	padding-left: 35px;
	font-family: Verdana;
	font-size: 180%;
	color: #ffffcc;
	font-weight: bold;		
	line-height: 35px;
}

.headlineHolderSide
{
	width: 275px;
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	text-align: left;
}
.headlineSide
{
	padding-left: 0px;	
	font-family: Verdana;
	font-size: 180%;
	color: #ffffcc;
	font-style:italic;
	font-weight: bold;
}

.headlineReverse
{
	padding-left: 10px;
	font-family: Verdana;
	font-size: 180%;
	color: #ccccff;
	font-weight: bold;
}

.hcTable
{	
	padding-top: 0px;
	padding-left:12px;
	padding-right: 5px;
	font-family: Verdana;
	font-size: 120%;
	color: #ffffcc;
	font-weight: normal;
	line-height: 17px;
	width: 665px;
}

td
{
    padding: 0px 6px 6px 5px;
}

.copy, .copyQuote, .copyFinal
{	
	padding-top: 0px;
	padding-left:12px;
	padding-right: 5px;
	font-family: Verdana;
	font-size: 120%;
	color: #ffffcc;
	font-weight: normal;
	line-height: 17px;
	width: 675px;
}
.copy-bold
{
	padding-top: 0px;
	padding-left: 12px;
	padding-right: 5px;
	font-family: Verdana;
	font-size: 120%;
	color: #ffffcc;
	font-weight: bold;
	line-height: 17px;
	width: 675px;
}

.copyQuote
{
    
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #6666ff;
}

.copyFinal
{
    padding-bottom: 20px;
}

#labelNaturalQuality
{
    background: url( "../i/label_natural_quality2.gif" ) no-repeat left;
    width: 550px;
    height:53px;
    margin-left: 12px;
}

#labelCleaningStyle
{
    background: url( "../i/label_cleaning_style.gif" ) no-repeat left;
    width: 500px;
    height:42px;
    margin-left: 12px;
}

#labelEcoProducts
{
    background: url( "../i/label_eco_products.gif" ) no-repeat left;
    width: 500px;
    height:42px;
    margin-left: 12px;
}

#labelFiltration
{
    background: url( "../i/label_filtration.gif" ) no-repeat left;
    width: 525px;
    height:42px;
    margin-left: 12px;
}

#labelContact
{
    background: url( "../i/label_contact.gif" ) no-repeat left;
    width: 500px;
    height:42px;
    margin-left: 12px;
}

#labelOrigins
{
    background: url( "../i/label_origins.gif" ) no-repeat left;
    width: 525px;
    height:42px;
    margin-left: 12px;
}

.centerDiv
{
    text-align:center;
}

ul
{
    margin-top: 0px;    
	font-family: Verdana;
	font-size: 120%;
	color: #ffffcc;
	font-weight: normal;
	line-height: 17px;    
}

#column_2 ul
{
    padding-right: 30px;
}

#column_2 ul li
{
     
    
}

dl
{
    margin-top: 10px;
    margin-left: 10px;
	font-family: Verdana;
	font-size: 120%;
	color: #ffffcc;
	font-weight: normal;
	line-height: 17px;
	width: 675px;    
}

dl dt {
	padding: 3px 5px 0px 20px;
	line-height:1em;
	color:#cc9933;
	font-weight:bold;
}

dl dd {
	padding: 3px 5px 10px 40px;
	border:0;
	margin:0;
	line-height:1.5em;
}

strong
{
    color: #999900;
}

#extra_links ul
{    
    position:relative;
    margin: 0 0 0 5px;
    padding: 0 0 25px 0;
    border:0;
}

#extra_links ul li
{
    padding:0;
    margin:0;
    border:0;  
}
	
#extra_links ul li a 
{
	color: #ccccff;
	text-decoration: none;
}

#extra_links ul li a:hover 
{
	color: #000000;
	text-decoration: none;
}

.copy a 
{
	color: #ccccff;	
}

.copy a:hover 
{
	color: #000000;
	text-decoration: none;
}

/*  MENU BAR */
.menuBar,
.menuBar a.menuButton, .menuBar a.menuButtonStrong,
.menuBar span.menuLabel,
.menuBar p.menuLabelRight,
.menu,
.menu a.menuItem {
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: bold;
  color: #ffffcc;
}

.menuBar {
  background-color: #333333;
  border: 2px solid #000000;
  padding: 4px 2px 4px 2px;
  text-align: left;
}

.menuBar a.menuButton, .menuBar a.menuButtonStrong {
  background-color: transparent;
  border: 1px solid #333333;
  color: #ffffcc;
  cursor: default;
  left: 0px;
  margin: 1px;
  padding: 2px 6px 2px 6px;
  position: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;
}

.menuBar a.menuButtonStrong {
  background-color: #6666ff;
  color: #ffffcc;
  border: 1px solid #FFFFCC;
}

.menuBar span.menuLabel {
  background-color: transparent;
  border: 1px solid #333333;
  color: #ffffcc;
  margin: -1px;
  padding: 0px 6px 0px 6px;
  float:right;
  clear: right;
  text-decoration: none;
  top: 0px;
  z-index: 103;
}

.menuBar p.menuLabelRight {
  background-color: transparent;
  border: 1px solid #333333;
  color: #ffffcc;
  cursor: default;
  margin: -1px;
  padding: 0px 6px 0px 6px;
  position: relative;
  text-decoration: none;
  text-align:right;
  z-index: 104;
}

.menuBar a.menuButton:hover, .menuBar a.menuButtonStrong:hover {
  background-color: transparent;
  border: 1px outset #333333;
  color: #ffffcc;
}

.menuBar a.menuButtonActive,
.menuBar a.menuButtonActive:hover {
  background-color: #ccccff;
  border: 1px inset #333333;
  color: #222222;
  left: 1px;
  top: 1px;
}

.menu {
  background-color: #333333;
  border: 2px outset #333333;
  left: 0px;
  padding: 0px 1px 1px 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 101;
}

.menu a.menuItem {
  color: #ffffcc;
  cursor: default;
  display: block;
  padding: 3px 1em;
  text-decoration: none;
  white-space: nowrap;
}

.menu a.menuItem:hover, .menu a.menuItemHighlight {
  background-color: #ccccff;
  color: #222222;
}

.menu a.menuItem span.menuItemText {}

.menu a.menuItem span.menuItemArrow {
  margin-right: -.75em;
}

.menu .menuItemSep {
  border: 1px inset #333333;
  margin: 4px 2px;
}