/*GENERAL NOTE ABOUT APPLYING CLASSES TO LINKS - don't try to do it alltogether. Highlight the text first and apply the class. Then leave it and come back to apply the link. For IMAGE LINKS set the border to zero in the property inspector.
*/
body {background-image:url(../images/pagebackground.jpg);margin-top:0px;}

/*This is the main box to contain all content.Setting the margin to auto centres it in the browser.*/

#maincontent {
	background-color:#FFFFFF;
	margin:auto;
	width:800px;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #333333;}
	
/*These control the header box image and text*/
#header {
	height:90px;
	margin-bottom:20px;
	background-image: url(../images/pearls.jpg);
	background-repeat:no-repeat;}
	
#footer {
	font-size:10px;
	font-weight:bold;
	text-align:center;
	padding-top:4px;
	height:170px;
	margin:auto;
	width:750px; clear:both;}
	
/*This puts a little space between the thmbnails and the footer which
is necessary for Firefox - otherwisw the line comes right under the thumbnails*/
	
#prefooter {
	border-bottom:1px solid #333333;
	padding-top:4px;
	height:2px;
	margin:auto;
	width:750px; clear:both;}
	
  	
h1 {margin-top:0px;font-family: Georgia, "Times New Roman", Times, serif;
	font-size:30px;font-weight:normal;color:#996600;padding-left:30px}

.style4 { font-family: Arial, Helvetica, sans-serif;font-style:italic;
	font-weight:bold;font-size:12px;color:#FF0000;}
	
.style5 { font-family: Arial, Helvetica, sans-serif;font-style:italic;
	font-weight:bold;font-size:12px;color: #000066;}
	
.style15 {font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;
	font-weight:normal;line-height:1.2em;color:#996600;padding-left:50px;}
	
.addtocartbutton { font-family: Arial, Helvetica, sans-serif;font-style:italic;
	font-weight:bold;font-size:12px;color:#FF0000;
	cursor: pointer}

/*This controls the spacing look and behaviour of links in the navbar*/
#navbar {width:auto;height:auto;margin-left:20px;}

.navbar a:link {color:#996600;text-decoration:underline;}

.navbar a:visited {color:#996600;text-decoration:underline;}

.navbar a:hover {color:#FF0000;}
/*End of navbar*/

/*The topleftbox goes inside the maincontent*/
.topleftbox {
	width:383px;
	height:310px;
	float:left;
	padding:4px 4px 4px 20px;
	margin-top:26px;
	margin-right:4px;
	margin-bottom:5px;}
	
/*The toprightbox goes inside the maincontent*/
.toprightbox {
	width:370px;
	height:160px;
	float:left;
	padding:4px 4px 4px 4px;
	margin:26px 0px 20px 0px;
	border-left:1px solid #666666;}
	
	/*The toprightboxvideo goes inside the maincontent and contains the video*/
.toprightboxvideo {
	width:370px;
	height:auto;
	float:left;
	padding:4px 4px 0px 4px;
	margin:26px 0px 5px 0px;
	border-left:1px solid #666666;}

/*This sits between the product description and the form*/	
.optionbox {
	width:370px;
	height:30px;
	float:left;
	padding:4px 4px 4px 4px;
	text-align:center;}
	
/*This sits between the product description and the form - for pages with video*/	
.optionboxvideo {
	width:370px;
	height:20px;
	float:left;
	padding:4px 4px 4px 4px;
	text-align:center;}

/*This form goes inside this box*/	
.formbox {
	width:370px;
	height:100px;
	float:left;
	padding:4px 4px 0px 4px;}
	
/*This form goes inside this box - for video product pages*/	
.formboxvideo {
	width:370px;
	height:90px;
	float:left;
	padding:0px 4px 0px 4px;}	

/*THIS IS FOR THE BOX ABOVE THE FOOTER ON THE PURCHASING PAGE*/
.deliveryandterms {
	width:750px;clear:both;
	margin:auto;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;font-size:12px;}
	
	
/*This is for normal text links. Apply the class before applying the link.For image links set the border in the propert inspector to zero*/
.textlink a:link {color:#996600;font-size:14px;text-decoration:underline;}

.textlink a:visited {color: #996600;font-size:14px;text-decoration:underline;}

.textlink a:hover {color: #FF0000;}

.navbar a:link {color:#996600;text-decoration:underline;}

.navbar a:visited {color:#996600;text-decoration:underline;}

.navbar a:hover {color:#FF0000;}

/*General Purpose*/

.floatleft {float:left; margin-right:4px;}

.floatright {float:right; margin-left:4px}