<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-family:Verdana, Geneva, sans-serif;
  line-height:130%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
  font-family:Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 1.1em;	
	background: #ffffff;
	font-size:0.9em;
	background-color: #290a58;
	
  margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: center; /* Centers the page content container in IE 5 browsers. */
}




.lteal ul li{
color:#66FFFF;
}
p,ol,ul,h1,h2,h3,h4,h5,h5,h6 {
	margin:0 0 1em 0;
	padding:0;
	}
blockquote{
margin:0;
padding:0;
font-size:92%;
font-style:italic;
}

blockquote p{
margin:0;
padding:0;
}
.italic{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-style:italic;
font-weight:normal;
color:#003366;
}
.hlite{
color:#6633CC;
}

.rd{
	color:#33CCFF;
	float:right;
	}
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#7B7B6C;
font-weight:normal;
padding:0px 0px 10px 0px;
margin:0;
}
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#2912A5;
font-weight:normal;
padding:0px 0px 20px 0px;
margin:0;
text-align:left;
}

h2{
font-size:1.1em;
color:#8331F5;
font-weight:normal;
padding:0px 0px 10px 0px;
margin:0;
}
h3{
font-size:1em;
color:#007FDD;
font-weight:400;
padding:10px 0px 5px 0px ;
margin:0;
}

.righth3{
font-size:1em;
color:#ffffff;
font-weight:bold;
padding:10px 0px 5px 0px ;
margin:0;
text-align:center;
background-color:#336;
}

h3.center{
text-align:center;
}

h4{

color:#2912A5;
font-weight:300;
padding:10px 0px 5px 0px ;
margin:0;
}

h5{

color:#007FDD;
font-weight:300;
padding:10px 0px 5px 0px ;
margin:0;
}
ul{
	margin:0;
	padding:0;
	color:#827957;
	list-style-type:none;
	padding-left:20px;
	font-size:11px;
	}

ul.productfeaturelist{
	margin:5px 0 5px 0;
	padding:5px 5px 5px 10px;
	color:#827957;
	list-style-type:none;
	
	font-size:11px;
	text-align:left;
	background:#f2f2f2;
	}


ul.bullet{
	margin:0;
	padding:0;
	color:#666666;
	list-style-type: none;
	padding-left:30px;
	list-style-image: url(images/list.jpg);
	
	}
	
ul.bulletin{
	margin:0;
	padding:0;
	color:#827957;
	list-style-type: none;
	padding-left:30px;
	list-style-image: url(images/list.jpg);
	list-style-position:inside;
	}
	

li{
padding-bottom:5px;
}	
.italic{
	font-style:italic;
	font-weight:normal;
	color: #6633CC;
}

#outerWrapper {
  background-color: #fff;
  margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: left; /* Redefines the text alignment defined by the body element. */
  width: 900px;
}
#outerWrapper #header {
	background-image:url(../images/headcent.jpg);
	background-repeat:repeat-x;
	margin: 0px;
	padding: 0px;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	width:900px;
	margin-top:10px;
  
}


.icon{
text-align:right;
margin-top:-25px;
margin-bottom:5px;
}
.right{
text-align:right;
font-size:66%;
margin-bottom:20px;
}

.rimage{
float:right;
margin:5px;
padding:5px;

}
.words h1 {
	color: #FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif
	font-size: 1.1em;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	}
.words h2 {
	font-size: 1em;
	color:#AFD5D8;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 10px 0px 0px;
	font-weight: normal;
	}
.words {
	position:relative;
	top:30px;
	left:60px;
	}

.mandala {
	float: right;
	margin: 0px;
	padding: 0px;
	display:block;
	}

.clear2{
	clear:both;
	}

.floatleft{
	float:left;
	padding-right:20px;
	}

.floatright{
	float:right;
	padding-left:20px;
	}
.center{
	text-align:center;
	margin-left:20px;
	}
	
.checkout{
	float:right;
	margin-top:-30px;
	border:none;
	
	}
	
.checkout2{
	float:right;
	margin-top:10px;
	border:none;
	}
/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color:#1880FA;
	text-decoration: none;
	}
	

a:hover{
	text-decoration: none;
	color:#9735E9;
	}

#wave{
	position: absolute;
	top:20px;
	left:0;
	margin:0;
	padding:0;
	width:1400px;
	text-align:center;
}	
/*content wrap*/


#outerWrapper #contentWrapper {
	background-color:#ffffff;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	min-height:500px;

}


#outerWrapper #contentWrapper #contentright{ 
background-color:#F3F3FE;
  background-image:url(../images/wgrad.jpg);
	background-repeat:repeat-x;
 margin:0px;
  float: right;
  padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  width: 200px;
}


#outerWrapper #contentWrapper #contentright2{ 
background-color:#F3F3FE;
margin:0px;
float: right;
padding: 20px 20px 0px 20px;  /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 160px;
}

#outerWrapper #contentWrapper #contentwide{ 
padding:30px;
margin:0px;
position:relative;
background-color:#ffffff;
}


	
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #contentleft {
  margin: 0 200px 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  padding: 20px 20px 20px 20px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
  text-align:justify;
  background-color:#ffffff;
  
  
}






	
#contentleft .rd a:link, #contentleft .rd a:visited{
	color:#0000FF;
	text-decoration: none;
	font-size:76%;
	text-align:right;
	
}

#contentleft .rd a:hover{
	text-decoration: none;
	color:#7606CC;
	font-size:76%;
	text-align:right;
	}
/*wrap for left content area*/	

#contentleft p{
	color:#827957;
	font-size:11px;
	}
	
#contentleft p.price{
	color:#F00;
}

/*right content area*/	

#contentright p{
	margin:0;
	font-size:11px;
	color:#666666;
	padding:10px;
	}
#contentright p.quote{
	margin:0;
	padding:0;
	
	color:#666666;
	padding:0px 10px 0px 0px;
	text-align:right;
	}
#contentright .lpurple{
	padding:10px 20px 10px 20px;
	margin:0;
	background-image:url(images/pgrad.jpg);
	background-repeat:repeat;
	}
#contentright .lpurple p{
	color:#ffffff;
	
	}
#contentright .lteal{
	padding:10px;
	background-color:#45155f;
	margin:0;
	background-image:url(images/tgrad.jpg);
	background-repeat:repeat-x;
	
	
	}
	#contentright .lteal h3{
	padding:5px;
	color:#66CCFF;
	text-align:left;
	}
	
	#contentright .lteal img{
	padding:0px;
	margin: 10px 0px 10px 10px;
	}
	
	
#contentright .lteal p{
	color:#ffffff;
	font-size:11px;
	}
	
#contentright .lteal p.indent{
margin:0px;
padding:0px;

padding-left:40px;
}

#contentright .lteal p.indent2{
margin:0px;
padding:0px;

padding-left:20px;
}

#contentright img{
	
}

#contentright .lteal p.fright{
margin:0px;
padding:0px;

margin-left:75px;
}

.lteal a:link{
	color:#99CCFF;
	text-decoration: none;
	font-size:11px;
}
.lteal a:hover{
	color:#ffffFF;
	text-decoration: none;
	font-size:11px;
}
.lteal a:visited{
	color:#99CCFF;
	text-decoration: none;
	font-size:11px;
}

.lteal h1{
color:#ffffff;
text-align:center;}

.lteal h2{color:#ffffff;
text-align:center;}

.lteal h3{
text-align:center;}

.lpurple a:link{
	color:#99CCFF;
	text-decoration: none;
	
}
.lpurple a:hover{
	color:#ffffFF;
	text-decoration: none;
	
}
.lpurple a:visited{
	color:#99CCFF;
	text-decoration: none;
	
}

.lpurple h1{
color:#ffffff;
text-align:center;}

.lpurple h2{color:#ffffff;
padding-left:10px;
text-align:left
}

.lpurple h3{
text-align:center;
color:#660099;}

#footer a:hover, #footer2 a:hover{
	text-decoration: none;
	color: #ffffff;
	font-size:11px;
}
#contentright .lblue{
	padding:0;
	margin:0;
	background-image:url(images/bgrad.jpg);
	background-repeat:repeat;
	
	}
#contentright .lblue p{
	color:#003366;
	}
#contentright .lblue p.sright{
	font-size:76%;
	text-align:right;
	}

#bottomcurve{
	margin: 0px;
	padding: 0px;
	margin-left:auto;
	margin-right:auto;
	width:900px;
	margin-top:-20px;
	
	}
/************** footer siteInfo styles ****************/
#footer, #footer2{
	clear:both;
	margin-left:auto;
	margin-right:auto;
	width:900px;
	color:#999999;
	padding-top:10px;
	background-color:#290a58;
}


#footer a:link, #footer a:visited, #footer2 a:link, #footer2 a:visited{
	color:#99CCFF;
	text-decoration: none;
	font-size:11px;
}

#footer a:hover, #footer2 a:hover{
	text-decoration: none;
	color: #ffffff;
	font-size:11px;
}

/************* #footer2 styles ***************/
/*updated, copyright and design footer*/

#footer2 ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
	border-top:1px solid #666666;
}

#footer2 li{
	display: inline;
	padding-right: 200px;
	font-size:92%;
	}

#webdev{
	color:#666666;
	float:right;
	font-size:72%;
	margin-top:-18px;
	}
	
#contentright label{
	font-size:10px;
	color:#ffffff;
	padding:5px 5px 5px 0px;
	margin:10px 0px 0px 0px;
	}
	
hr{
	width:80%
	}
	
table.product{
width:100%;	
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

th{
color:#FFFFFF;
background-color:#003366;
text-align:center;
font-weight:normal;
}
td.product{
width:20%;
color:#003399;
background-color:#EEEEEE;
padding:5px;
text-align:left;
}
td.desc{
width:55%;
color:#666666;
background-color:#EEEEEE;
padding:5px;
}

td.price{
width:10%;
color:#FF0000;
text-align:center;
padding-right:10px;
background-color:#EEEEEE;
padding:5px;
} 

td.qty{
width:5%;
color:#FF0000;
text-align:right;
padding-right:10px;
background-color:#EEEEEE;
padding:5px;

} 

td.cart{
width:10%;
color:#FF0000;
text-align:right;
background-color:#EEEEEE;
height:50px;
padding:5px;

} 
table.contact{
width: 50%;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:76%;
}
td.ref{
font-size:130%;
}

td.form{
font-size:12px;
color:#666666;
}
/********************* end **********************/
/********************* navigation style - horizontal with vertical drop - one level**********************/

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* outerdiv*/

#outerWrapper #topNavigation {
  background-color: #F2F4F7;
  margin: 0px;
  height: 26px;
  padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}


/* Add a margin - and a relative position with a high z-index to make it appear over any element below */
#menu_container {margin:0px 0px 0px 0px; position:relative; top:0px;width:900px; height:26px; z-index:100;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none; padding-left:8px; }

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:110px; font-size:11px; color:#4C4C87; height:25px; line-height:24px; text-decoration:none; text-indent:5px; border-width:1px 0 1px 1px;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;width:150px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px; width:150px;}

/* Set up the list items - drop list */
#pmenu li {
float:left; 
padding:0px 0px 0px 0px; 
background-color:#F2F4F7;
}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}

/* Make the hovered list color persist */
#pmenu li:hover > a {background:#336699; color:#ffffff;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute;  top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:120px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#336699; color:#ffffff;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {color:#ffffff;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {}
#pmenu li.drop {

}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}

/********************* end navigation list **********************/
#list1{
margin-left:200px;
}
.white{
color:#ffffff;
text-align:centre;
}

.leftimage{
	float:left;
	margin:20px 20px 20px 0px;
	padding:2px;
	border: 1px solid #333;
}

.leftdiv{
	float:left;
	margin:20px 20px 20px 0px;
	padding:0px;
	color:pink;
	
	}
	
.productimage{
	float:left;
	margin:20px 20px 20px 0px;
	padding:0px;
	width:300px;
	color:blue;
	
	}
	

.description{
	float:left;
	margin:20px 20px 20px 0px;
	padding:0px;
	width:250px;
}


.date{
	color:#900;
	font-size:11px;
	margin:0px;
	padding:8px 0px 8px 0px;
}

.catalogueItemNotFound {
	display:none;}
	
	.productTextInput {
		width:30px;
	}
	
	/*li.productItem {
		text-align:center;
	}*/
	
	#TwitterCounter{
		margin:20px;
		padding:0px;
	}
	
#breadcrumbs{
	margin:-10px 0px 10px 0px; 
	padding:0px;
	width:650px;
	text-align:right;
	font-size:11px;
	
}

.announcement-list h2{
	padding-left:10px;
}

.centerimage{
	margin:10px auto 10px auto;
}

.form-container1 {
	background: #f9f9f9;
	border: 1px solid #eee;
	padding: 5px;
}

.cartsummary{
	margin:5px 0px 5px 0px;
	padding:5px;
	height:50px;
}

.smallproductimage{
	
	margin:10px auto 10px auto;
	width:150px;
}

#contentmargin{
	margin:20px;
}