* {margin: 0em; padding: 0em; }

body
{
background-color: #fff;
font-family: trebuchet MS, arial, sans-serif;
color: #333399;
}/*Styling for body of page. Font, and colour of background/text*/

#main-container {
width: 955px; 
margin: 0.5em auto; 
background-image: url(images/headerBar.gif); 
background-repeat: no-repeat; 
background-position: top center; 
}/*Main container holding the header bar image and restricted width of page*/
	
#logoPrint {
display: none;
}/*Smaller logo for printing purposes only. Hidden from on screen display*/


/*Start logo*/
#header		{ height: 211px; }
#header img 	{ border: none; } 
/*End logo*/

#content-container {
background-image: url(images/navShadow.gif); 
background-repeat: repeat-y; 
}/*holds background image that sits behind navigation links*/

h1 {
font-size: 128%;
background-color: #e8ebf4;
padding: 2px 0 2px 0;
}

h3 { font-size: 90%; }

.eyesHandsFeet {
font-size: 115%;
margin-bottom: 5px;
}/*Eyes, Hands & Feet subheadings*/

.contentSubHeading {
font-size: 100%;
margin-top: 5px;
} /*Subheadings on main pages and text on venues page and contact page. Mainly h2 headings*/

a {
color: #333399;
font-weight: bold;
text-decoration: none;
}/*links CSS*/

a:visited { color: #006993;	} /*color of a link when visited */
a:hover { color: #697edf;	} /*color of a link when hovered over*/


/*START #NAV CSS - navigation links on left of page*/	
#nav {
width: 200px;
float: left;
margin-right: 17px;
color: #333399; /*color of #nav link when on that page...no <a> tag*/
}

#nav ul { margin-left: 80px; } /*move main navigation away from main container*/

#nav li {
list-style-type: none;
line-height: 200%;
font-size: 110%;
}/*style navigation list*/

#nav a {
color: #697edf; /*color of #nav link when not active*/
text-decoration: none;
font-weight: normal;
}/*style navigation  <a> links*/

#nav a:visited { color: #006993;	} /*color of #nav link when visited */
#nav a:hover { color: #333399; } /*color of #nav link when hovered over*/
/*END #nav CSS*/	

#content-outer {
width: 530px;
float: left;
border-left: 2px solid #c0cbe7;
border-right: 2px solid #c0cbe7;
}/*Borders create visual separation of the main site content from the left and right nav 'columns'*/

#content-inner {	margin: 0 15px 0 15px; } /*distance of text from the right and left borders*/

#content-inner p {
margin-bottom: 10px;
font-size: 80%;
line-height: 180%;
text-align: justify;
}/*Text properties of main content*/

/*START .yogaBeautyNav CSS - navigation links under headings on beauty and yoga pages.*/	
.yogaBeautyNav {
margin: 0 0 20px 0;
border: 1px solid #c0cbe7;
text-align: center;
} 
 
.yogaBeautyNav li {
list-style-type: none; 
display: inline;
font-size: 80%;
color: #697edf; 
padding: 0 2px 0 2px;
}/*Styling for the navigation*/
 
.yogaBeautyNav a {
text-decoration: none;
color: #697edf;
font-weight: bold;
}/*Styling for the <a> links*/

.yogaBeautyNav a:visited { color: #006993; }
.yogaBeautyNav a:hover{ color: #414e8a; }
/*END .yogaBeautyNav CSS*/	

.beautyImgLeft {
margin: 0 10px 0 0;
float: left;
}/*Picture of cottage on beauty.html*/

.facials {
list-style-type: none;
text-align: center;
margin-top: 40px;
}/*Styling for Environ/Dermaessentials list on facials.html*/

.facials li {
margin-bottom: 20px;
}/*Styling for Environ/Dermaessentials list on facials.html*/

.beautyImgLeft {
margin: 0 10px 0 0;
float: left;
}/*Styling for photo on facials.html*/


#yogaPicRight {
float: right;
margin: 30px 0 10px 10px;
}/*Picture of yoga class on yoga.html*/

#yogaPicLeft {
margin: 20px 10px 10px 0;
float: left;
}/*Picture of yoga class on yoga.html*/


.emphasis { background-color: #e8ebf4; }/* Pale blue background colour on keywords in main content text*/

.map {
border: solid #c0cbe7 1px;
margin: 10px 0 20px 0;
}/*Positioning and border on map thumbnails*/


.addresses {
width: 345px;
float: left;
margin-top: 5px;
font-size: 110%;
color: #006993;
}/* CSS properties of addresses in main content area (excluding address in footer nav)*/

#clearP{
clear:both;
margin-top: 40px;
} /*to push text below map thumbnail in contact.html*/ 

#qual {
font-size: 85%;
} /*shrink qualification text in contact.html*/


/*START RIGHT-COL CSS - Yoga Retreat / gift voucher text and images of products*/	
#right-col {
float: right;
}

#right-col table {
background-image: url(images/lotusShadow.jpg); 
background-repeat: no-repeat; 
background-position: bottom right;
height: 282px;
width: 199px;
}/*Table used to position text as problems were encountered due to the 3 floats in the div.*/

#right-col td {
vertical-align: bottom;
text-align: center;
} /*Aligns the table text to the bottom center of the background image.*/

#right-col h2	{ font-size: 130%; }
#right-col p		{ font-size: 80%; }

.right-colPics {
margin: 30px 0 90px 0;
padding: 10px
}/*pictures below table in right column (mainly found in product pages and on newsletter page)*/

/*END RIGHT-COL CSS*/

/*START FOOTER CSS*/
#footer {
clear: both;
background-image: url(images/footerBarApptTxt.gif); 
background-repeat: no-repeat; 
height: 87px;
color: #fff;
font-weight: bold;
font-size: 0.75em; 
}/*footer bar and dimensions. Text size of address and navigation*/

#footerText {
margin-top: 32px;
margin-left: 5px;
float: left;
}/*Footer address placement*/

#footerText p {
background-color: #5160ac;
}/*Background color used so that if the text is enlarged by the viewer the footer text doesn't disappear into the white background. Not ideal but the only way around it!*/

#footerNav {
padding-top: 68px;
margin-right: 5px;  
text-align: right;
}/*footer navigation placement*/

#footerNav ul {
background-color: #5160ac;
}/*Background color used so that if the text is enlarged by the viewer the footer text doesn't disappear into the white background. Not ideal but the only way around it!*/

#footerNav li {
display: inline;
list-style-type: none;
}/*navigation list styles*/

#footerNav a {
color: #fff;
}/*Colour of footer links text*/

#footerNav a:hover{ color: #414e8a; }

#updated {
margin-top: 10px;
text-align: center;
font-size: 0.75em;
}/*Styling for copyright note and last updated text*/	
/*END FOOTER CSS*/

/*START TREATMENT and PRODUCT TABLES CSS*/
#tableBorder {
margin-bottom: 20px;
}/*Extends the end of the table down so text isn't so close to the footer bar*/

#tableBorderYoga {
margin-bottom: 50px;
}/*Extends border down to uniform position*/

table, td	{
width: 500px;
color: #006993;
}/*table width/text color*/

.treatmentProduct {
border-bottom: dashed 1px #006699;
font-weight: bold;
font-size: 95%;
width: 900px;
}/*Styles for main treatment/product name columns*/

.bodyWrapArea {
border-bottom: dashed 1px #006699;
font-size: 80%;
}/*style for body wrap treatment area in bodyTreatments.html*/

.cost {
border-bottom: dashed 1px #006699;
font-weight: bold;
text-align: right;
}/*style for treatment cost column*/
	
.skinType {
font-size: 75%;
}/*Smaller text describing skin type/product type in products pages*/

.productTreatmentInfo {
font-size: 85%;
padding: 10px 0 10px 0;
}/*styling for descriptions of products/treatments*/


#bodyTreatmentNote {
font-size: 78%;
padding-bottom: 15px;
text-align: center;
}/*styling for small text under Body Treatment description*/

.noteText {
font-size: 78%;
margin-top: 20px;
color: #333399;
background-color: #e8ebf4;
}/*styling for  comment on prices*/	

.environProductRange {
font-size: 120%;
padding: 20px 0 5px 0;
font-weight: bold;
color: #333399;
}/*Styling for Environ Range headings*/

.dermaProductRange {
font-weight: bold;
font-size: 100%;
padding-top: 15px;
color: #333399;
}/*Styling for Dermaessentials Range headings*/
	
.yogaDay {
font-weight: bold;
font-size: 110%;
padding-top: 15px;
color: #333399;
}/*Styling for yoga class days of the week*/
	
.yogaLocation {
font-size: 85%;
font-weight: bold;
padding: 15px 0 0px 0;
}/*Styling for yoga class locations*/
	
.yogaClassType {
font-size: 85%;
border-bottom: dashed 1px #006699;
}/*Styling for yoga class level*/				
	
.yogaClassTime {
font-size: 85%;
border-bottom: dashed 1px #006699;
text-align: right;
}/*Styling for yoga class times*/

.retreatName{
font-size: 110%;
margin-bottom: 10px;
}/*Styling for yoga retreat name*/
 
#content-inner .retreatDate{
font-size: 100%;
margin-bottom: 10px;
}/*Styling for yoga retreat date text*/
.retreatDay {
font-weight: bold;
font-size: 110%;
padding-top: 10px;
color: #333399;
}/*Styling for yoga retreat day/date text*/
	
.retreatActivity {
font-size: 85%;
border-bottom: dashed 1px #006699;
width: 1000px;
}/*Styling for yoga retreat activity*/		
	
.retreatTime {
font-size: 85%;
border-bottom: dashed 1px #006699;
text-align: right;
}/*Styling for yoga retreat date times*/

#content-inner .retreatp {
font-size: 80%;
line-height: 1;
margin-top: 10px;
}/*Styling for yoga retreat footnotes*/
/*END TREATMENT and PRODUCT TABLES CSS*/