/* - - - - - - - - - - - - - - - - - - - - */
/* Therapeaceful Website                   */
/* Design, Development & Maintenance       */
/* Eskymo New Media Design                 */
/* http://www.my-igloo.net                 */
/* - - - - - - - - - - - - - - - - - - - - */

/* COLOURS
BLUE			#3257C2
YELLOW		#ECD559
BROWN		#755707
LIGHT BROWN	#BAAB83

*/

/* RESET */
/* -------------------------------------------------------------------------------------------*/
* 			{ margin:0; padding:0 }
body 		{ font-size: small; font-family: Georgia, "Times New Roman", Times, serif; color: #20377D; text-align:center; background:url(assets/bgrpt_pageblueband.jpg) repeat-x; }

* html body { font-size: x-small; /* for IE5/Win */ f\ont-size: small; /* for other IE versions */ }

/* The below restores some sensible defaults */
strong 	{ font-weight: bold }
em 		{ font-style: italic }
a		{ text-decoration: none; }
a img 	{ border:none } /* Gets rid of IE's blue borders */


/* TEXT LINKS TO BE BROWN WITHIN THE COPY */
/* -------------------------------------------------------------------------------------------*/
a:link, a:visited { color: #755707; text-decoration: underline; }
a:hover, a:active { color: #755707; text-decoration: none; }


/* FLOATED ELEMENTS */
/* -------------------------------------------------------------------------------------------*/
.left { float: left; }
.right { float: right;}

.clearleft { clear: left; }
.clearright { clear: right; }
.clearboth { clear: both; }


/* TYPOGRAPHY */
/* -------------------------------------------------------------------------------------------*/
h1, h3 { /* The H1 on each page with be orange - apart from the homepage where it has be be grey */
	font-size: 170%;
	font-weight:normal;
	color: #3257C2;
}

h2, h4 { /* Small headings underneath the H1 */
	font-size: 120%;
	font-weight: bold;
	color: #755707;
}

.blue {
	color: #3257C2;
}

.spacingbottom { margin: 0px 0px 20px 0px;} /* Use on the H2 that sits underneath the H1 */

p {
	line-height: 1.5em;
	margin: 10px 0px 10px 0px;
	font-size: 90%;
}


/* TESTIMONIALS */
/* ------------------------------------------------------------------------------------------ */
blockquote{
	color: #20377D;
}

cite{
	color: #3257C2;
	font-weight: bold;
	padding-top: 5px;
	display:block;
}

cite em{
	color: #755707;
	font-weight: bold;
	display:block;
}


/* HORIZONTAL RULES */
/* ------------------------------------------------------------------------------------------ */
div.hr {
  height: 21px;
  background: #ffffff url(assets/bgrpt_hr.jpg) no-repeat scroll center;
  margin: 0px 0px 10px 0px;
}
div.hr hr {
  display: none;
}


/* WRAPPER IS 1040PX WIDE AND CONTAINS THE GRADIENT BACKGROUND THAT GOES DOWN THE SIDES OF THE PAGE */
/* -------------------------------------------------------------------------------------------*/
#wrapper {
	width: 1040px;
	margin: 0 auto;
	padding: 0px;
	background: url(assets/bgrpt_mainpage.jpg) repeat-y top center;
}


/* HEADER SITS WITHIN WRAPPER AND IS 1040PX WIDE */
/* -------------------------------------------------------------------------------------------*/
#header {
	width: 1040px;
	margin: 0 auto;
	padding: 0px;
	background: url(assets/bgrpt_blueheader.jpg) repeat-y top center;
}


/* NAVIGATION SITS WITHIN WRAPPER AND IS 1040PX WIDE */
/* -------------------------------------------------------------------------------------------*/
#navigation {
	width: 1040px;
	height: 35px;
	margin: 0 auto;
	padding: 0px;
	background: url(assets/bgrpt_navbarband.jpg) no-repeat;
}

#nav {
	float: left;
	width: 485px;
	height: 35px;
	background: url(assets/bgrpt_navigation.jpg) no-repeat;
	margin: 0px;
	padding: 0px;
	position: relative;
}

#nav li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
	position: absolute;
	text-indent: -3000px;
}

#nav a {
	display: block;
	height: 35px;
	text-decoration: none;
}

/* POSITION OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#home {			left:102px; top:0; width:49px; height:35px;}
#therapies {		left:174px; top:0; width:79px; height:35px;}
#prices {			left:276px; top:0; width:48px; height:35px;}
#qualifications {	left:346px; top:0; width:110px; height:35px;}

#home a, #therapies a, #prices a, #qualifications a {height:35px;}


/* HOVER AND ACTIVE STATES OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#home a:hover, #home .active {					background:url(assets/bgrpt_navigation.jpg) -102px -35px no-repeat; width:49px; height:35px;}
#therapies a:hover, #therapies .active {			background:url(assets/bgrpt_navigation.jpg) -174px -35px no-repeat; width:79px; height:35px;}
#prices a:hover, #prices .active {					background:url(assets/bgrpt_navigation.jpg) -276px -35px no-repeat; width:48px; height:35px;}
#qualifications a:hover, #qualifications .active {	background:url(assets/bgrpt_navigation.jpg) -346px -35px no-repeat; width:110px; height:35px;}


/* CONTACT INFO THAT SITS ON THE RIGHT HAND SIDE OF THE NAV */
/* -------------------------------------------------------------------------------------------*/
#contact {
	float: right;
	width: 361px;
}


/* CONTENT IS FOR ALL THE STUFF THAT SITS BELOW THE NAVBAR */
/* -------------------------------------------------------------------------------------------*/
#content {
	width: 840px;
	margin: 0 auto;
	padding: 30px 0px;
}

#content .left {
	width: 575px;
	text-align: left;
}

#content .right {
	width: 245px;
	text-align: left;
}

.contentlist {
	margin: 10px;
	padding: 10px;
	font-size: 90%;
}

#contentlistsub {
	margin: 5px;
	padding: 5px;
}

#pricelist a:link, #pricelist a:visited { color: #3257C2; text-decoration: none; }
#pricelist a:hover, #pricelist a:active { color: #3257C2; text-decoration: underline; }


/* FULLWIDTH IS IMAGE NAVIGATION ON THE HOMEPAGE AND THERAPIES PAGE */
#fullwidth {
	width: 840px;
	text-align: left;
}

/* THERAPIESBOX + NAV IS THE IMAGE BASED NAV ON THE HOMEPAGE AND THERAPIES PAGE */
#therapiesbox {
	width: 840px;
	margin: 0 auto;
	padding: 0px;
}

#therapiesnav1 {
	float: left;
	width: 840px;
	height: 161px;
	background: url(assets/therapies_toprow.jpg) no-repeat;
	margin: 0px 0px 15px 0px;
	padding: 0px;
	position: relative;
}

#therapiesnav1 li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
	position: absolute;
	text-indent: -3000px;
}

#therapiesnav1 a {
	display: block;
	height: 161px;
	text-decoration: none;
}


/* POSITION OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#reflexology {			left:0px; top:0; width:270px; height:161px;}
#thaireflexology {		left:285px; top:0; width:270px; height:161px;}
#maternityreflexology {	left:570px; top:0; width:270px; height:161px;}

#reflexology a, #thaireflexology a, #maternityreflexology a {height:161px;}


/* HOVER AND ACTIVE STATES OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#reflexology a:hover, #reflexology .active {				background:url(assets/therapies_toprow.jpg) -0px -161px no-repeat; width:270px; height:161px;}
#thaireflexology a:hover, #thaireflexology .active {		background:url(assets/therapies_toprow.jpg) -285px -161px no-repeat; width:270px; height:161px;}
#maternityreflexology a:hover, #maternityreflexology .active {		background:url(assets/therapies_toprow.jpg) -570px -161px no-repeat; width:270px; height:161px;}

#therapiesnav2 {
	float: left;
	width: 840px;
	height: 161px;
	background: url(assets/therapies_bottomrow.jpg) no-repeat;
	margin: 0px 0px 15px 0px;
	padding: 0px;
	position: relative;
}

#therapiesnav2 li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
	position: absolute;
	text-indent: -3000px;
}

#therapiesnav2 a {
	display: block;
	height: 161px;
	text-decoration: none;
}


/* POSITION OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#hotstonereflexology {	left:0px; top:0; width:270px; height:161px;}
#indianheadmassage {	left:285px; top:0; width:270px; height:161px;}
#hopiearcandles {		left:570px; top:0; width:270px; height:161px;}

#hotstonereflexology a, #indianheadmassage a, #hopiearcandles a {height:161px;}


/* HOVER AND ACTIVE STATES OF THE NAVIGATION BUTTONS
---------------------------------------------------------------------------------------------------------------*/
#hotstonereflexology a:hover, #hotstonereflexology .active {background:url(assets/therapies_bottomrow.jpg) -0px -161px no-repeat; width:270px; height:161px;}
#indianheadmassage a:hover, #indianheadmassage .active {	background:url(assets/therapies_bottomrow.jpg) -285px -161px no-repeat; width:270px; height:161px;}
#hopiearcandles a:hover, #hopiearcandles .active {		background:url(assets/therapies_bottomrow.jpg) -570px -161px no-repeat; width:270px; height:161px;}


/* SUBNAV STYLING FOR THE THERAPIES SECTION
----------------------------------------------------------------------------------------------------------------------*/
#subnavlist {
	padding: 0px 0px 8px 0px;
	margin: 0px;
	width: 245px;
	font-size: 90%;
	font-weight: bold;
}

#subnavlist ul {
	padding: 0px;
	margin: 0px;
}

#subnavlist li {
	list-style: none;
	margin: 0;
	padding: 5px 0px;
}

#subnavlist li a {
	text-decoration: none;
	color: #3257C2;
}

#subnavlist a:link, #subnavlist  a:visited {
	color: #3257C2;
	text-decoration: none;
}

#subnavlist a:hover, #subnavlist a:active {
	color: #755707;
	text-decoration: none;
}

body#subone #subnavlist li #one, body#subtwo #subnavlist li #two, body#subthree #subnavlist li #three, body#subfour #subnavlist li #four, body#subfive #subnavlist li #five, body#subsix #subnavlist li #six, body#subseven #subnavlist li #seven, body#subeight #subnavlist li #eight, body#subnine #subnavlist li #nine, bodysubten #subnavlist li #ten { 
    color: #755707;
    text-decoration: none;
}


/* FOOTER CONTENT
---------------------------------------------------------------------------------------------------------------*/
#footer {
	color: #BAAB83;
	font-size: 95%;
}

#footer {
	margin: 0px;	
}

#footer .right {
	text-align: right;
}

#footer a:link, #footer a:visited { color: #BAAB83; text-decoration: none; }
#footer a:hover, #footer a:active { color: #BAAB83; text-decoration: underline; }

#footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0px 0px 5px 0px;
	font-size: 90%;
}
#footer ul li {
	display: inline;
}