/* Whitespace CSS Document */

body
{
margin				: 0px;
padding				: 0px;
font-family			: arial, sans-serif;
font-size 			: 100%;
background-color 	: #EEEEEE;
color				: #330066;
}

form
{
margin				: 0px;
}

a:link		{font-weight	: normal; color : #330066; text-decoration : none;}
a:visited	{font-weight	: normal; color : #330066; text-decoration : none;}
a:hover		{font-weight	: normal; color : #330066; text-decoration : underline;}

#hold/* new hold div 1/8/06 */
{
position			: relative;
width				: 770px;/*note padding - site is 800 wide because of 2 gutters.*/
margin				: 0px auto;
padding				: 0px;
margin-top			: 0px;
}

#hold h1.home, h2.home
{
display				: none;
}

#border
{
position			: relative;
width				: 760px;/*note padding - site is 800 wide because of 2 gutters.*/
background-color	: #330066;
padding				: 0px;
margin-top			: 0px;
border				: 5px solid #330066;
}

#top
{
position			: relative;
width				: 760px;
float				: left;
background-color	: #330066;
padding				: 5px 0px 10px 0px;
}

#logo
{
position			: relative;
float				: left;
}

#logo img
{
display				: block;
margin				: 10px 0px 0px 30px;
}

#search
{
position			: relative;
width				: 200px;
float				: right;
color				: #FFFFFF;
}

#search p
{
margin				: 25px 0px 0px 0px;
}

#search input.search
{
font-family			: arial;
width				: 120px;
font-size			: 70%;
padding				: 2px;
border				: 0px;
background-color	: #FFFFFF;
color				: #330066;
vertical-align		: middle;
}

#search input.button
{
font-family			: arial;
font-size			: 70%;
padding				: 5px;
background-color	: #330066;
border				: 0px;
color				: #FFFFFF;
font-weight			: bold;
vertical-align		: middle;
}

#search a
{
display				: inline;
vertical-align		: middle;
margin-left			: 8px;
}

#search a:link, #search a:visited
{
font-size			: 70%;
color				: #FFFFFF;
}

#search a:hover
{
text-decoration		: underline;
}

#topnav
{
position			: relative;
width				: 760px;
float				: left;
padding				: 0px 0px 0px 0px;
margin				: 0px 0px 0px 0px;/* 5 on bottom for border */
background-image	: url(img_common/bg_navoff.gif);
background-repeat	: repeat-x;
border-bottom		: 1px solid #FFFFFF;
}

ul.topnav
{
list-style-type		: none;
margin				: 0px;
padding				: 0px;
}

ul.topnav li
{
display				: inline;
float				: left;
padding				: 5px 0px 5px 0px;
border-right		: 1px solid #FFFFFF;
border-left			: 2px solid #5E397A;
}

ul.topnav li a:visited, ul.topnav li a:link
{
font-size			: 70%;
text-align			: center;
text-decoration		: none;
color				: #330066;
display				: block;
width				: 106px;
padding				: 3px 0px 3px 0px;
}

ul.topnav li a:hover
{
color				: #FFFFFF;
}

#end
{
width				: 103px;
}

#on a
{
color				: #FFFFFF;
}

#on
{
background-image	: url(img_common/bg_navon.gif);
}

#homeimage
{
position			: relative;
width				: 760px;
height				: 300px;
margin-top			: 5px;
}

#homeimage img
{
display				: inline;
}


#bottomwrapper
{
position			: relative;
width				: 760px;
padding				: 5px 0px 0px 0px;
background-color	: #330066;
}

#productnav
{
position			: relative;
float				: left;
background-color	: #FFFFFF;
width				: 210px;
height				: 155px;
padding				: 10px;
}

#productnav p.header
{
font-size			: 90%;
font-weight			: bold;
margin				: 0px 0px 5px 0px;
line-height			: 15px;
}

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

#productnav ul
{
list-style-type		: none;
margin				: 3px 0px 0px 0px;
padding				: 0px;
margin-bottom		: -20px;/*ie fix*/
}

#productnav ul li
{
background-color	: #DDDDDD;
font-size			: 70%;
line-height			: 16px;
padding				: 0px 0px 0px 10px;
margin				: 0px 0px 1px 0px;
float				: left;
}

#productnav ul li a
{
font-weight			: normal;
}

#productnav ul li img
{
display				: block;
float				: right;
border				: 0px;
}


#promo
{
position			: relative;
float				: left;
background-color	: #FFFFFF;
width				: 245px;/*note padding*/
height				: 155px;
margin				: 0px 0px 0px 5px;
padding				: 10px;
background-repeat	: no-repeat;}

#promo p.header
{
font-size			: 90%;
font-weight			: bold;
margin				: 0px 0px 5px 0px;
line-height			: 15px;
}

#promo p.subheader
{
font-size			: 90%;
font-weight			: normal;
margin				: 0px 0px 0px 0px;
line-height			: 15px;
}

#promo p.bulletpoints
{
margin				: 0px 0px 0px 0px;
}


#promo ul
{
margin				: 10px 0px 0px 20px;
padding				: 0px;
margin-bottom		: -20px;/*ie fix*/
}

#promo ul li
{
margin				: 0px;
padding				: 0px;
line-height			: 15px;
font-size			: 70%;
}


#twobox
{
position			: relative;
float				: left;
width				: 255px;
margin				: 0px 0px 0px 5px;
padding				: 0px;
}

#safetysheets
{
position			: relative;
float				: left;
background-color	: #FFFFFF;
width				: 235px;
height				: 65px;
margin				: 0px 0px 5px 0px;
padding				: 10px;
background-image	: url(img_common/bg_sheets.gif);
background-repeat	: no-repeat;
}

#safetysheets p.header
{
font-size			: 90%;
font-weight			: bold;
margin				: 0px 0px 5px 0px;
line-height			: 15px;
}

#safetysheets p
{
width				: 180px;
font-size			: 70%;
font-weight			: normal;
margin				: 0px 0px 0px 0px;
line-height			: 15px;
}

#news
{
position			: relative;
float				: left;
background-color	: #FFFFFF;
width				: 235px;
height				: 65px;
margin				: 0px 0px 0px 0px;
padding				: 10px;
background-image	: url(img_common/bg_news.gif);
background-repeat	: no-repeat;
}

#news p.header
{
font-size			: 70%;
font-weight			: normal;
margin				: 0px 0px 5px 0px;
line-height			: 15px;
}

#news p
{
font-size			: 70%;
font-weight			: normal;
margin				: 0px 0px 0px 0px;
line-height			: 15px;
}

#footer
{
position			: relative;
float				: right;
width				: 750px;
font-size			: 70%;
color				: #666666;
text-align			: right;
padding				: 10px 10px 0px 10px;

}

#footer p
{
color				: #666666;
margin				: 0px;
}

#footer span.space
{
display				: inline;
margin-left			: 335px;
}

#footer a:link		{font-weight	: normal; color : #666666; text-decoration : none;}
#footer a:visited	{font-weight	: normal; color : #666666; text-decoration : none;}
#footer a:hover		{font-weight	: normal; color : #666666; text-decoration : underline;}

/* ---------------- INTERNAL ------------------ */


#pageimage
{
position			: relative;
width				: 760px;
height				: 135px;
}

#pageimage img
{
display				: inline;
}

#copywrapper
{
position			: relative;
width				: 760px;
padding				: 0px 0px 0px 0px;
background-color	: #FFFFFF;
border-top			: 1px solid #330066;/* 5px for border*/
}

/* sub nav */

#subnav
{
position			: relative;
float				: right;
background-color	: #FFFFFF;
width				: 210px;
padding				: 10px;
}

#subnav p.browse
{
font-size			: 90%;
font-weight			: bold;
margin				: 0px 0px 0px 0px;
line-height			: 15px;
}

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

ul.subnav
{
list-style-type		: none;
margin				: 10px 0px 0px 0px;
padding				: 0px;
}

ul.subnav li
{
background-color	: #DDDDDD;
font-size			: 70%;
line-height			: 16px;
padding				: 0px 0px 0px 10px;
margin				: 0px 0px 1px 0px;
float				: left;
width				: 200px;
}

li.foodsub, li.glasssub, li.Beveragesub, li.waresub, li.laundrysub, li.kitchsub, li.chemsub, li.animalsub
{
width				: 190px;
float				: left;
display				: block;
padding				: 0px 0px 0px 20px;
}

ul.subnav li a:visited, ul.subnav li a:link
{
font-weight			: normal;
}

ul.subnav li img
{
display				: block;
float				: right;
border				: 0px;
}


/* COLOURS FOR ALL THE DIFFERENT PRODUCTS */

#subon a
{
font-weight			: bold;
}

ul.subnav li.food {background-color	: #FF5219; }
ul.subnav li.foodsub {background-color	: #FF9876; padding-left : 20px; width : 190px;}
ul.subnav li.food a, ul.subnav li.foodsub a {color : #FFFFFF;}

ul.subnav li.glass {background-color	: #FF0000;}
ul.subnav li.glasssub {background-color	: #FF6767; padding-left : 20px; width : 190px;}
ul.subnav li.glass a, ul.subnav li.glasssub a {color : #FFFFFF;}

ul.subnav li.Beverage {background-color	: #C5B120;}
ul.subnav li.Beveragesub {background-color	: #DCD17A; padding-left : 20px; width : 190px;}
ul.subnav li.Beverage a, ul.subnav li.Beveragesub a {color : #FFFFFF;}

ul.subnav li.ware {background-color	: #008E36;}
ul.subnav li.waresub {background-color	: #67BC87; padding-left : 20px; width : 190px;}
ul.subnav li.ware a, ul.subnav li.waresub a {color : #FFFFFF;}

ul.subnav li.laundry {background-color	: #0E2B7F;}
ul.subnav li.laundrysub {background-color	: #6F81B3; padding-left : 20px; width : 190px;}
ul.subnav li.laundry a, ul.subnav li.laundrysub a {color : #FFFFFF;}

ul.subnav li.kitch {background-color	: #878787;}
ul.subnav li.kitchsub {background-color	: #B7B7B7; padding-left : 20px; width : 190px;}
ul.subnav li.kitch a, ul.subnav li.kitchsub a {color : #FFFFFF;}

ul.subnav li.chem {background-color	: #262626;}
ul.subnav li.chemsub {background-color	: #7E7E7E; padding-left : 20px; width : 190px;}
ul.subnav li.chem a, ul.subnav li.chemsub a {color : #FFFFFF;}

ul.subnav li.animal {background-color	: #FEC506;}
ul.subnav li.animalsub {background-color	: #FEDC6B; padding-left : 20px; width : 190px;}
ul.subnav li.animal a, ul.subnav li.animalsub a {color : #FFFFFF;}



/* corp nav */

ul.corp
{
list-style-type		: none;
margin				: 0px 0px 10px 0px;
padding				: 0px 0px 10px 0px;
border-bottom		: 1px solid #330066;
}

ul.corp li
{
background-color	: #DDDDDD;
font-size			: 70%;
line-height			: 16px;
padding				: 0px 0px 0px 10px;
margin				: 0px 0px 1px 0px;
}

#corpon a
{
font-weight			: bold;
}

ul.corp li.header
{
background-color	: #330066;
color				: #FFFFFF;
font-size			: 70%;
font-weight			: bold;
line-height			: 16px;
padding				: 0px 0px 0px 10px;
margin				: 0px 0px 1px 0px;
}

ul.corp li a:visited, ul.corp li a:link
{
font-weight			: normal;
}

#navtop
{
color				: #FFFFFF;
font-weight			: bold;
}


/* PAGES STANDARD COPY */

div.copy
{
position			: relative;
float				: right;
background-color	: #FFFFFF;
width				: 469px;/* note padding and 1px border*/
padding				: 10px 30px 10px 20px;
border-left			: 1px solid #CCCCCC;
margin				: 10px 0px 10px 10px;
}

div.copy p.breadcrumbs
{
font-size			: 70%;
font-weight			: normal;
color				: #999999;
line-height			: 15px;
margin				: 0px 0px 15px 0px;
}

div.copy p.breadcrumbs a
{
font-weight			: normal;
color				: #999999;
}

div.copy h1
{
font-size			: 100%;
font-weight			: bold;
color				: #330066;
line-height			: 16px;
margin				: 0px 0px 15px 0px;
}

div.copy h2
{
font-size			: 100%;
font-weight			: bold;
color				: #330066;
line-height			: 16px;
margin				: 0px 0px 15px 0px;
}

div.copy h3
{
font-size			: 70%;
font-weight			: bold;
color				: #330066;
line-height			: 15px;
margin				: 0px 0px 15px 0px;
}

div.copy p
{
font-size			: 70%;
font-weight			: normal;
color				: #333333;
line-height			: 15px;
margin				: 0px 0px 15px 0px;
}

div.copy div.terms span {
	float: left;
	width: 30px;
	font-size: 70%;
	font-weight: bold;
	clear: left;
}
div.copy div.terms h3 {
	float: left;
	width: 435px;
}
div.copy div.terms p {
	float: left;
	width: 435px;
	
}


img.pageimage
{
float				: right;
display				: inline;
margin				: 0px 0px 20px 20px;
}

div.copy ul
{
margin				: 20px;
padding				: 0px;
}

div.copy ol
{
margin				: 20px;
padding				: 0px;
}

div.copy ul li, div.copy ol li
{
font-size			: 70%;
line-height			: 15px;
color				: #333333;
}

/* GENERIC FORM */

/* Contact Form CSS */

#genericcontactform
{
width		: 190px;
float		: left;
}

#genericcontactform p
{
margin-top		: 0px;
margin-bottom	: 0px;
}

input.form
{
font-family		: Arial;
width			: 170px;
margin-top		: 0px;
margin-bottom	: 10px;
font-size		: 100%;
border			: 1px solid #6E604A;
padding			: 2px;
}

#formred
{
background-color: #FFCCCC;
}

textarea.form
{
font-family		: Arial;
height			: 61px;
width			: 170px;
margin-top		: 0px;
margin-bottom	: 10px;
font-size		: 100%;
border			: 1px solid #6E604A;
padding			: 2px;
}

input.checkbox
{
border			: 0px solid #6E604A;
height			: 12px;
}

.button
{
font-size			: 100%;
padding 			: 0px 10px 0px 10px;
height				: 20px;
font-weight			: bold;
background-color	: #999999;
color				: #FFFFFF;
border				: 3px double #6E604A;
margin-top			: 5px;
}

.button2
{
font-size			: 100%;
padding 			: 0px 10px 0px 10px;
height				: 20px;
font-weight			: bold;
background-color	: #EEEEEE;
color				: #330066;
border				: 3px double #330066;
margin-top			: 5px;
}




div.clear/*this div make the parent DIV strench to the height of the child - fix for firefox. but the div is 1px high in IE*/
{
clear				: both;
height				: 0px;
line-height			: 0px;
margin-top			: -5px;
}

.productHeader p
{
font-size			: 70%;
font-weight			: bold;
color				: #330066;
line-height			: 15px;
margin				: 0px 0px 15px 0px;
}

/* --------------------- Login Page ---------------------------------*/

#loginwrapper
{
position				: relative;
float					: left;
width					: 460px;
background-color		: #330066;
}



span.space
{
height					: 5px;
line-height				: 5px;
}

span.title
{
font-size				: 120%;
display					: block;
margin					: 0px 0px 5px 0px;
}

span.light /* light purple */
{
font-size				: 120%;
color					: #BE8BB8;
}

span.orange
{
font-size				: 120%;
color					: #FF9900;
}

span.small
{
font-size				: 70%;
font-weight				: normal;
display					: block;
margin					: 5px 0px 0px 0px;
}

#signup a:link, #signup a:visited, #signup a:hover
{
display					: block;
width					: 530px;
background-color		: #FFFFFF;
text-decoration			: none;
padding					: 10px;
background-image		: url(../img_common/bg_login.gif);
background-repeat		: no-repeat;
}

#newcust
{
position				: relative;
float					: left;
width					: 212px;/* Note padd below */
padding					: 15px 0px 15px 18px;
background-color		: #330066;
}

#existingcust
{
position				: relative;
float					: left;
width					: 190px;/* Note padd below */
padding					: 15px 0px 15px 12px;
background-color		: #330066;
}

#newcust p, #existingcust p
{
color					: #FFFFFF;
font-weight				: bold;
line-height				: 15px;
margin					: 0px 0px 0px 0px;
}

#newcust_login
{
position				: relative;
float					: left;
height					: 205px;
width					: 185px;/* Note padd below + border*/
padding					: 15px 15px 0px 15px;
background-color		: #FFFFFF;
border-left				: 5px solid #330066;
border-bottom			: 5px solid #330066;
border-right			: 5px solid #330066;
}

#newcust_login p
{
font-size				: 70%;
color					: #333333;
font-weight				: normal;
line-height				: 15px;
margin					: 0px 0px 15px 0px;
}

#newcust_login img
{
border					: 0px;
margin					: 0px 10px 0px 10px;
}

#newcust_register
{
position				: relative;
float					: left;
height					: 205px;
width					: 520px;/* Note padd below + border*/
padding					: 15px 15px 0px 15px;
background-color		: #FFFFFF;
border-left				: 5px solid #330066;
border-bottom			: 5px solid #330066;
border-right			: 5px solid #330066;
}

#newcust_register p
{
font-size				: 70%;
color					: #333333;
font-weight				: normal;
line-height				: 15px;
margin					: 0px 0px 15px 0px;
}

#newcust_register img
{
border					: 0px;
margin					: 0px 10px 0px 10px;
}

#existingcust_login
{
position				: relative;
float					: left;
height					: 205px;
width					: 194px;/* Note padd below */
padding					: 10px 15px 0px 15px;
background-color		: #997FB2;
border					: 3px solid #FFFFFF;
}

#existingcust_login p
{
font-size				: 70%;
color					: #FFFFFF;
font-weight				: normal;
line-height				: 15px;
margin					: 0px 0px 15px 0px;
}

#existingcust_login p a
{
color					: #FFFFFF;
}

span.width
{
float					: left;
display					: inline;
width					: 65px;
}

#existingcust_login input.login
{
font-family				: arial;
font-size				: 100%;
width					: 115px;
height					: 1em;
padding					: 2px;
border					: 1px solid #330066
}

#existingcust_login img
{
border					: 0px;
}