/*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:20px;
	margin:auto;
	width:750px; clear:both;}
	
#sharefooter {
	border-bottom:1px solid #333333;
	padding-top:8px;
	padding-bottom:8px;
	height:30px;
	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:20px 0px 0px 30px;}
	
h2 {margin-top:0px;font-family:Georgia, "Times New Roman", Times, serif;
	font-size:20px; font-weight:normal;}
	
.style1 {font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;
	font-weight:normal;line-height:1.2em;padding-left:50px;}
	
.style2 {font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;
	font-weight:normal;line-height:1.2em;padding-left:20px;}
	
.style3 {font-family: Arial, Helvetica, sans-serif;font-style:italic;
	font-weight:bold;font-size:12px;}
	
.style4 {font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;
	font-weight:normal;line-height:1.2em; color:#CC0000;}
	
.style5 {font-family: Geneva, Arial, Helvetica, sans-serif;font-size:18px;
	font-weight:normal;line-height:1.2em;}
	
.style6 {font-family: Arial, Helvetica, sans-serif;font-style:italic;
	font-weight:bold;font-size:12px; color:#CC0000;}
	
.style7 {font-family: Geneva, Arial, Helvetica, sans-serif;font-size:14px;
	font-weight:normal;line-height:1.2em;color:#996600;}
	
.style8 {font-size:11px;font-weight:normal;line-height:1.2em}

.style9 { font-family: Arial, Helvetica, sans-serif;font-style:normal;
	font-weight:bold;font-size:12px;color: #000066;}

/*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*/

/*Same as 'navbar but removes the underline*/

.pearlguide a:link {color:#996600;text-decoration:none;}

.pearlguide a:visited {color:#996600;text-decoration:none;}

.pearlguide a:hover {color:#FF0000; text-decoration:none;}

/*The topleftbox goes inside the maincontent*/
.topleftbox {
	width:530px;
	height:140px;
	float:left;
	padding:4px 4px 4px 20px;
	margin:26px 4px 5px 0px;}
	

/*The toprightbox has a plain background*/
.toprightbox {
	width:210px;
	height:140px;
	float:left;
	padding:4px 10px 4px 10px;
	margin-top:26px;
	margin-bottom:5px;}
	
/*Same as the toprightbox but with the loose pearls background*/
	
.trbox {
	width:210px;
	height:140px;
	float:left;
	padding:4px 10px 4px 20px;
	margin-top:26px;
	margin-bottom:5px;
	background-image: url(../images/loose-pearls.jpg);
	background-position:center;
	background-repeat:no-repeat;}

/*The midleft and midright boxes goes inside the maincontent under the topleft and topright boxes*/
.midleftboxes {
	width:530px;
	height:auto;
	float:left;
	padding:4px 4px 4px 20px;
	margin:5px 4px 5px 0px;}
	
.midrightboxes {
	width:200px;
	height:350px;
	float:left;
	padding:10px 0px 10px 10px;
	border-left:solid 1px #999999;
	margin-left:30px;
	margin-top:10px;
	margin-bottom:5px;}
	
.morerightboxes {
	width:200px;
	height:auto;
	float:left;
	padding:4px 10px 4px 20px;
	margin-top:5px;
	margin-bottom:5px;}
	
.fullwidthbox {
	width:768px;
	height:auto;
	float:left;
	padding:4px;
	margin:4px 10px 4px 10px;}
	
/*Menu boxes is for small in page div's that usua;lly contain a small picture and a link*/
.menuboxes {
	margin:2px; width:auto;}
/*As above but gives a bit of variety on the page*/
.indentmenuboxes {
	margin:2px 2px 2px 100px}
/*A 250 pixel wide container*/
.container250 {
	width:250px; margin-right:10px; float:left;}

/*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;}

/*General Purpose*/

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

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

.formbutton {
	border:1pt solid #CCCCCC;
	padding:2px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	background-color: #CC0000;
	font-weight: bold;}