html, body{ 
 margin:0; 
 padding:0; 
 text-align:center; 
 background-color: #ffffff;
 font-family: Arial, Helvetica, sans-serif;
 font-size: small;
 color: #000000;
} 


a:link {color: #000000; text-decoration: underline; }
a:active {color: #000000; text-decoration: underline; }
a:visited {color: #000000; text-decoration: underline; }
a:hover {color: #000000; text-decoration: none; }

#pagewidth{ 
 width:1029px; 
 text-align:left;  
margin-left:auto; 
 margin-right:auto;  
 background-color: white;
} 


#canvas{
            position:relative; 
            height:609px;  
            width:1029px;
            background-image: url(images/bg.jpg);
            background-position: top center;
            background-repeat: no-repeat;
            bottom: 0px;
}

#examplethree{

position: absolute;
top: 163px;
left: 645px;
width: 190px;
height: 160px;

}

#exampletwo{
	position: absolute;
	top: 371px;
	left: 647px;
	width: 184px;
	height: 160px;
	background-color: #00ADEF;
    border: 2px
}

#exampleone{

position: absolute;
top: 482px;
left: 120px;
width: 142px;
height: 80px;

}


#examplefour{

position: absolute;
top: 482px;
left: 279px;
width: 142px;
height: 50px;

}



#examplefive{

position: absolute;
top: 482px;
left: 438px;
width: 142px;
height: 50px;

}

#exampleseven{

position: absolute;
top: 2px;
left: 130px;
width: 288px;
height: 30px;

}

#examplenine{

position: absolute;
top: 569px;
left: 327px;
width: 457px;
height: 30px;

}

#exampleten{

position: absolute;
top: 570px;
left: 713px;
width: 242px;
height: 30px;

}

#fonttype{
font-family: arial, verdana, Times, serif;
font-weight: 800;
font-size: 9pt;
color: #ed008c;
text-align: justify;
padding-left: 0px;
padding-right: 0px;
padding-top: 7px;
overflow: auto;
}


#fonttype1{
font-family: arial, verdana, Times, serif;
text-align: justify;
font-size: 9pt;
color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
overflow: auto;


}




#fonttype2{
font-family: arial, verdana, Times, serif;
text-align: justify;
font-size: 9pt;
font-weight: 800;
color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
overflow: auto;
}

#fonttype2a{
font-family: arial, verdana, Times, serif;
text-align: justify;
font-size: 9pt;
font-weight: 800;
color: #000000;
padding-left: 0px;
padding-right: 0px;
padding-top: 15px;
overflow: auto;
}

#fonttype7{
font-family: arial, verdana, Times, serif;
font-weight: 600;
text-align: justify;
font-size: 8pt;
color: #007cc2;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
overflow: auto;
}

#fonttype8{
font-family: arial, verdana, Times, serif;
font-weight: 400;
text-align: justify;
font-size: 8pt;
color: #007cc2;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
overflow: auto;
}

#fonttype9{
font-family: arial, verdana, Times, serif;
font-weight: 800;
text-align: justify;
font-size: 8pt;
color: #007cc2;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
overflow: auto;
}

#globe{

position: absolute;
width: 222px;
height: 223px;
top: 90px;
left: 407px;

}


#logo{

position: absolute;
width: 99px;
height: 102px;
top: 127px;
left: 204px;
background-image: url(images/logo.jpg)
}


#stamp{

position: absolute;
width: 83px;
height: 83px;
top: 207px;
left: 109px;
background-image: url(images/stamp.jpg)
}


#postit{

position: absolute;
width: 157px;
height: 131px;
top: 4px;
left: 745px;
background-image: url(images/postit.jpg)
}

#postit{

position: absolute;
width: 157px;
height: 131px;
top: 4px;
left: 745px;
background-image: url(images/postit.jpg)
}



#earthday{

position: absolute;
width: 144px;
height: 28px;
top: 128px;
left: 619px;
background-image: url(images/earthday.jpg)
}


#ourproducts{

position: absolute;
width: 114px;
height: 21px;
top: 363px;
left: 128px;
background-image: url(images/ourproducts.jpg)
}

#refill{

position: absolute;
width: 157px;
height: 23px;
top: 7px;
left: 270px;
background-image: url(images/refill.jpg)
}

#promotions{

position: absolute;
width: 104px;
height: 21px;
top: 363px;
left: 291px;
background-image: url(images/promotions.jpg)
}

#services{

position: absolute;
width: 82px;
height: 21px;
top: 363px;
left: 455px;
background-image: url(images/services.jpg)
}

#more1{
padding:10;
text-align: center;

}

#placeholder{

position: absolute;
width: 142px;
height: 98px;
top: 392px;
left: 120px;
background-image: url(images/placeholder.jpg)
}

#placeholder1{

position: absolute;
width: 142px;
height: 98px;
top: 392px;
left: 279px;
background-image: url(images/promotions1.jpg)
}



#placeholder2{

position: absolute;
width: 142px;
height: 98px;
top: 392px;
left: 438px;
background-image: url(images/services1.jpg)
}


#placeholder3{

position: absolute;
width: 184px;
height: 65px;
top: 350px;
left: 645px;
background-image: url(images/placeholder2.jpg)
}





































div.button { 
   width:594px; 
   height:32px; 
   top: 34px;
   left: 120px;
   position: absolute;
   margin-left: auto;
margin-right: auto;	
   }
   




a.roll  {
   width:113px; 			
   height:32px; 	
   display: block;				
   font: bold 1pt Verdana, Arial sans-serif;			
   text-align:center;
   line-height:32px;
   background-image: url(images/testimonals.jpg)			 
  /*NOTE: backgroud shorthand is equivilant of:				
  background-image: url("pics/buttons/picture1.gif"); 			
  background-position: 0px 0px; 			
  background-repeat: no-repeat; 			
  background-color: #000; */		
  }			


div.button a.roll:link {
   background-position: 0px 0px; 
   color: 0066CC; 
   text-decoration:none;
   font-size: 1px; text-transform: uppercase;
   font-family: Verdana, Arial Helvetica, sans-serif;
   float: left;
   }			


div.button a.roll:visited {
   background-position: 0px -32px; 
   color: 0066CC;
   text-decoration:none;
   font-size: 1px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll:hover {
   background-position: 0px -32px; 
   color: 0066CC;
   text-decoration:none;
   font-size: 1px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll:active {
   background-position: 0px 0px; 
   color:0066CC;
   text-decoration:none;
   font-size: 1px; text-transform: uppercase;
   float: left;
   }






a.roll2  {
   width:91px; 			
   height:32px; 	
   display: block;				
   font: bold 10pt Verdana, Arial sans-serif;			
   text-align:center;
   line-height:32px;
   background-image: url(images/about.jpg)			 
  /*NOTE: backgroud shorthand is equivilant of:				
  background-image: url("pics/buttons/picture2.gif"); 			
  background-position: 0px 0px; 			
  background-repeat: no-repeat; 			
  background-color: #000; */		
  }			


div.button a.roll2:link {
   background-position: 0px 0px; 
   color: white; 
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   font-family: Verdana, Arial Helvetica, sans-serif;
   float: left;
   }			


div.button a.roll2:visited {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll2:hover {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll2:active {
   background-position: 0px -0px; 
   color:white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }





a.roll3  {
   width:159px; 			
   height:32px; 	
   display: block;				
   font: bold 10pt Verdana, Arial sans-serif;			
   text-align:center;
   line-height:32px;
   background-image: url(images/green.jpg)		 
  /*NOTE: backgroud shorthand is equivilant of:				
  background-image: url("pics/buttons/picture2.gif"); 			
  background-position: 0px 0px; 			
  background-repeat: no-repeat; 			
  background-color: #000; */		
  }			


div.button a.roll3:link {
   background-position: 0px 0px; 
   color: white; 
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   font-family: Verdana, Arial Helvetica, sans-serif;
   float: left;
   }			


div.button a.roll3:visited {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll3:hover {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll3:active {
   background-position: 0px -0px; 
   color:white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }





a.roll4  {
   width:127px; 			
   height:32px; 	
   display: block;				
   font: bold 10pt Verdana, Arial sans-serif;			
   text-align:center;
   line-height:32px;
   background-image: url(images/offer.jpg)		 
  /*NOTE: backgroud shorthand is equivilant of:				
  background-image: url("pics/buttons/picture2.gif"); 			
  background-position: 0px 0px; 			
  background-repeat: no-repeat; 			
  background-color: #000; */		
  }			


div.button a.roll4:link {
   background-position: 0px 0px; 
   color: white; 
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   font-family: Verdana, Arial Helvetica, sans-serif;
   float: left;
   }			


div.button a.roll4:visited {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll4:hover {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll4:active {
   background-position: 0px -0px; 
   color:white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }




a.roll5  {
   width:104px; 			
   height:32px; 	
   display: block;				
   font: bold 10pt Verdana, Arial sans-serif;			
   text-align:center;
   line-height:32px;
   background-image: url(images/contact.jpg)		 
  /*NOTE: backgroud shorthand is equivilant of:				
  background-image: url("pics/buttons/picture2.gif"); 			
  background-position: 0px 0px; 			
  background-repeat: no-repeat; 			
  background-color: #000; */		
  }			


div.button a.roll5:link {
   background-position: 0px 0px; 
   color: white; 
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   font-family: Verdana, Arial Helvetica, sans-serif;
   float: left;
   }			


div.button a.roll5:visited {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll5:hover {
   background-position: 0px -32px; 
   color: white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }			


div.button a.roll5:active {
   background-position: 0px -0px; 
   color:white;
   text-decoration:none;
   font-size: 10px; text-transform: uppercase;
   float: left;
   }