/* =Fonts. Most font rules here unless quite specific -------------------------*/

body {
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 160%;
}

#outer {font-size: 110%;}  

#intro p {
	font-size: 105%;   /* 110%  makes Arial go bold in ie6 without ClearType  */
}

/* =headings fonts ----------------- */

h1, h2, h3, h4, h5, h6, #footer {
	color: #0000A0;
}

h1 {font-size: 130%;					/* =h1, use for main page heading only (in #intro) ??? */
 	  font-weight: 100; 
}

h3 {font-size: 30px; font-weight: 100;				/*  =h3, use in logo only */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}        
 	 
h3 {font-size: 125%;
 	  font-weight: 500; 
}

h4 {font-size: 120%;         
 	  font-weight: 500; 
}   /* impossible to stop this resembling either h3 or h4 in weight when ClearType is off. Most combinations tried */

h5 {font-size: 110%;
 	  font-weight: 100; 
}

h6 {font-size: 90%;
 	  font-weight: 100; 
}

#intro h1, #intro h2 {text-align: center;}

/* =Margins ---------------------------------------*/

* {margin: 0; padding: 0;}   /* Remove padding and margin from all */

h1, h2, h3, h4, h5, h6 {				 
	margin: 10px 12px 5px;
}

p {
	margin: 5px 13px 10px;
}

#intro h1, #intro h2, #intro h3, #intro p {
	margin: 15px 20px;
} 

/* =GENERAL RULES ---------------------------------*/
strong {font-weight: bold;}

em {font-style: italic;}

body {
	min-width: 800px; /* MUST BE AT LEAST AS WIDE AS OUTER/CONTENT, to make Netscape 6 use horiz scroll bars, Budd p136 */
	text-align: center; /*to make IE centre wrap - Budd p135 */
}

#outer {	
	width: 800px;
	margin: 10px auto;
	text-align: left;     /* to cancel body "text-align: centre;" Budd p135 */
	border: 2px solid #B9C9E4; 	
	background: url(images/fade-left.gif) repeat-y;        /* outer exists to display this image */
	background-color: #fff;
}     

#inner {
	background: url(images/fade-right.gif) right top repeat-y;  /* inner exists to display this image */
}

/* =masthead ---------------------------------------*/ 

#masthead {
	background: #EEF3FF url(images/waves1.gif) repeat-x;
	text-align: left;     /* to cancel body "text-align: centre;" Budd p135 */
	width: 100%;         /* required to make it spread full width in ie6 */
}

#masthead h3 {
	position: relative;
	width: 400px;
}

#masthead h3 img {
	float: left;
	margin: 20px 20px 20px;
	border: 0;
} 

/*#masthead span {       /* For Telephone Number. */
/*	float: right;
	position: absolute;
	bottom: -60px;
	left: 40px;  
	font-size: 18px; 
	color: #0000A0;
	margin: 15px 20px 0px 0px;
} */

#masthead p {       /* For Telephone Number. */
	float: right;
	font-size: 18px; 
	color: #0000A0;
	margin: 15px 20px 0px 0px;
}

/* =mainNav ---------------------------------------*/

#mainNav {
	float: left; 
	display: inline;
	width: 100%;
	font-size: 16px;                       /* for fixed font size. Make smaller than maximum (17px) because the mainNav wraps sooner on Mac firefox or Safari than on windows. */
	color: #fff; 	
	background: #004080;
	list-style-type: none; 
}

#mainNav li {
	float: left; 
	list-style-type: none; 
}

#mainNav a {
	display: block; 
	float: left;
	padding: 3px 6px;              
	border-top: 0px solid #004080;        /* not in use */  
	border-bottom: 1px solid #6565A3;				
	border-left: 1px solid #EFF4FE;
	line-height: 1em;
	color: #fff; 	
	text-decoration: none;
}

#mainNav a:visited {
	background: #C0C0C0;
	color: #000099;
}

#mainNav a:hover, #mainNav a:active {
	text-decoration: underline;  
	color: #FFFF99;
}

#home #mainNav .home a,		/* styles for the current page's link */
#backpain #mainNav .backpain a,
#sitWell #mainNav .sitWell a,
#benefits #mainNav .benefits a,       
#uses #mainNav .uses a,
#height #mainNav .height a,
#buy #mainNav .buy a,
#testimonials #mainNav .testimonials a, 
#guarantee #mainNav .guarantee a,
#info #mainNav .info a,
#contact #mainNav .contact a {
	color: #000099; 
	background: #F9FBFF;
	cursor: default;
	text-decoration: none;
	font-weight: normal;
	border-bottom: 1px solid #F9FBFF;      /* to disguise bottom border. "none" & "hidden" doesn't work*/
}

/* =subNav  ----------------------------------- */
#subNav {
	float: left;
	list-style: none;
	margin: 10px 20px;
}
	
#subNav li {
	float: left;
}

#subNav a {
	display: block;
	float: left;
	padding: 5px;
	font-size: 17px;
	color: #0D45EC;
}

#subNav a:visited {
	color: #5353AC;   
}

#subNav a:hover, #subNav a:active {
	text-decoration: underline;  
/*	color: #7124FF; */
}

/* =Anchors -----------------------------------*/

.link {       /* go to top of page (masthead h1) */ 
	color: #0D45EC;
	padding: 2px;
}

.link:hover {      
	text-decoration: underline;  
	color: #0D45EC;
}

.backToTop, .nextPage, .goNextPage {
	float: left;
	border: 2px solid;
	border-color:   #CCCCCC #666666 #666666 #CCCCCC;
	padding: 3px 22px 3px 8px;
	margin-bottom: 60px; /* Not working, set to 10px when working and remove top margin from footer? */
	margin: 10px 0 20px;
	text-decoration: none;
	color:#FFFFFF;
	background: #004080 url(images/arrow-up.gif) no-repeat right ;
}

.backToTop:hover, .nextPage:hover, .nextPageTest:hover {
	border: 2px solid;
	border-color: #666666 #CCCCCC #CCCCCC #666666;
	font-weight: normal;
	background: #9EBAE0 url(images/arrow-up-blue.gif) no-repeat right center;
	color: #0000A0;
}

.nextPage {
	float: right;
	background: #004080 url(images/arrow-right.gif) no-repeat right ;
}

.nextPage:hover {
	background: #9EBAE0 url(images/arrow-right-blue.gif) no-repeat right ;
}
         
.goNextPage {       
	float: right;
	border-color: #F3F3F3 #CACACA #CACACA  #F3F3F3;
	background: #F1FED8 url(images/arrow-right-blue.gif) no-repeat right ;
	color: #000000;
}

.goNextPage:hover {
	background: #DAF9C8 url(images/arrow-right-blue.gif) no-repeat right ;
}

.nextPageIntro {
	float: right;
}
	
.std-button {
	float: right;
	padding: 0 4px;
	margin: 0 0 0 10px;
	border: 2px solid;
	border-color: #CCCCCC #333333 #333333 #CCCCCC;
	color: #000000;
	background-color:#CCCCCC;
	text-decoration: none;
}

.basket, a .std-button {
width: 150px;
margin: 15px;
display: inline;
}

/* =Lists --------------------------------------*/
ul {list-style: none;}

/* =CONTENT & Content Wraps ----------------------*/

#content {
	width: 720px;
	margin: 0 auto;
}

#intro {
	clear: both;
	background: #F9FBFF;
	border-bottom: 2px solid #DDE8FF;
	padding: 1px;        /* needed to prevent margin collapse on h2 */
}
	
/* =Tables --------------------------------*/

table {
	width: 600px;
	border: 0px solid #666;
	margin: 0 auto; 
}

th, td {
	padding: 10px 10px;
}

/* =Images --------------------------------*/

.imgCol {
	float: left; 
	display: inline;
	text-align: center;   /*to make IE centre everything - Budd p135 */
	width: 49%; 
	margin: 30px 0; 
}

.imgBox {									/* to contain image and caption overlay within same space */
	position: relative; 
	text-align: left;       /* to cancel "text-align: centre;" Budd p135 */
	width: 70%;             /* IF ALTERING THIS, MAY NEED TO RESIZE IMAGE TO SUIT */
	margin: 0 auto; 
}

.imgBox p {
	font-size: 130%;
	text-align: right;
	font-style: italic;
	margin: 0;
}

.fig {
	width: 100%; 
}

#home img {
	float: right;
	margin: 20px 30px 0px 0;	
}

/* =Columns ---------------------------------*/  
.colA, .colB {
	float: left; 
	clear: both;
	width: 49%; 
	position: relative;  /* to centre content containing cols in I.E.6 and bring floated boxes in front of background colour (display: inline; doesn't work) */
}

.colB {
	float: right; 
	clear: none;
}   


/* =teasers ----------------------------------*/
.teaser, .teaserA {
	border-top: #DDE8FF 2px solid;
	min-height: 1px;
}

.narrow {
	width: 50%;
	float: right;
}

.teaser h3, .teaserA h3, .teaser h5, .teaserA h5 { 
	margin: 20px 20px 0px; 
} 

.teaser p, .teaserA p {
	margin: 10px 20px 20px;  /* margin-bottom on p forces bigger margin below img on ie6, use padding instead? this adds to margins creating too much space */ 
}

.teaser img, .teaserA img {
	float: left; 
	display: inline;
	margin: 20px;	
}

.teaserA img {
	float: right;  
}

.top {      
	border: none; 	  /* to remove  border from top teaser so it doesn't make intro border too wide */
	padding-top: 1px; /* Firefox needs this or a top border to stop img being forced down lower than h3! */
}

 
/* =Boxes --------*/
.boxA, #box1, #box2, #box3, #box4, #box5 {
	margin: 15px 0;
	padding: 1px 0;      /* to prevent margin collapse on non-floated boxes */
}

/* =MISCELLANEOUS ---------------*/

.aside {
font-size: 90%;
text-align: left;
font-style: italic;
margin: 0px;
}

/* =Page specific rules, in page order ---------------------------------------------------*/

/* =HOME ---------------*/

#home #intro {text-align: center;}

.bigLink {
/*float: left;   FIX THIS. To clear floated contained img if used. <HR /> causes big bottom margins in fox */
	width: 210px;
	min-height: 70px; 
	margin: 25px 0 0 0px;
	padding: 5px 0 0 100px;
	border: 1px solid #F2F2F2;
	display: block;
	overflow: visible;
	background: #F3FAF3;
	color: #333333; 			/* or some link text turns blue! */
}

.bigLink:hover {
	border: 1px solid #999999;
	text-decoration: none;  
}

a h5 {
	margin: 0;
}

#home #A{
	background: url(images/link-backpain.jpg) no-repeat top left;
}

#home #B{
	background: url(images/link-sitwell.jpg) no-repeat top left;
}

#home #C{
	background: url(images/link-uses.jpg) no-repeat;
}

#home #D{
	background: url(images/link-buy.jpg) no-repeat;
}

#home #E {
	width: 200px;
	min-height: 0;
	margin: 0;
	padding: 5px 0 5px 5px;
/*	background: url(images/link-testimonial.jpg) no-repeat; */	
}

/* #home #A img, #home #B img, #home #C img, #home #D img, #home #E img {
	float: left;
	margin: 0px;
	padding: 0;
	border: none;
} 		not needed if using background images  */

#home .testimonial {	
	font-size: 17px;
	text-align: center;
}

#home .testimonial span {	
	font-weight: normal;
	font-size: 80%;
}


/* =BACKPAIN  --------*/
#backpain h3, #backpain h4, #backpain h5 {
	text-align: center;
}

#backpain #box1 {
	float: left; 
	clear: both;
	width: 57%; 
	border: 3px solid #DDE8FF;
}

#backpain #box1 h4, #backpain #box1 li {
	padding: 0 10px 10px 20px;
	margin: 0;
	background: #FEF9F1;
}

#backpain #box2 {
	float: right; 
	width: 37%; 
	background: #F6F6F6;
}

#backpain #box3 {
	background: #FEFDE9;
}

#backpain #box3 span {
	font-style: italic;
}

#backpain #box4 {
	float: left; 
	clear: both;
	width: 68%; 
	border: 3px solid #DDE8FF;
}

#backpain #box4 img {
	float: left;
	margin: 14px 7px 7px;
}

#backpain #box5 {
	float: right; 
	width: 27%; 
	background: #F5DFC9;
}

/* =SITWELL -----------------------------------*/

#sitWell h3, #sitWell h4, #sitWell h5 {  /* this could be merged with the similar #backpain rule */
	text-align: center;
}

#sitWell #box1 h3 {
	margin-top: 30px;
}

#sitWell #box1 img {
	float: left;
	margin: 20px 80px 0px 0px;
}

#sitWell .testimonial {
	width: 500px; 
	margin: 20px auto;
	font-size: 110%;
}

#sitWell .boxA {
	background: #F9FBFF;
}

.yellow {
	background: #FEFDE9; 
	padding: 5px 0;
}

.border {
	border: 2px solid #DDE8FF;
	position: relative;      /* prevents breaks in border alongside child divs */
}


/* =HEIGHT  ----------------------------------------------  */

#height h3, #height h, #height h5 {  /* this could be merged with the similar #backpain rule */
	text-align: center;
}

#height .teaser h5, #height .teaserA h5 {text-align: left;}

#height .colA img, #height .colB img {margin-left: 20px;}



/* =BUY  ----------------------------------------------  */

fieldset {
margin: 20px 0;
border: solid 0 transparent;
}

fieldset h4, fieldset p {
text-align: center;
font-style: italic;
}

#buy .col {
float: left;
width: 200px;
}

#buy .colC {
float: left;
width: 315px;
}

#buy .colB img {
float: right;
}


input {
margin: 14px 0 0 10px;
}

.fabric {
float: left;
width: 88px;  
margin: 20px 15px 0;
display: inline;        /*  needed to stop images wrapping in ie */
}

.fabric img {
width: 88px;
height: 88px;
margin: 0;
}

.fabric input {
margin: 0;
display: block;        
}

.fabric label {   /* won't respond to text-align:center; or margin:auto; to centre it. Keep radio left aligned till this can be fixed */
}


/* =SECURITY  ----------------------------------------------  */

.std-button {
float: none;
}


/* =TESTIMONIALS    Note: #testimonials page id is plural. .testimonial class is singular. (there is also a .testimonials class in mainNav li!) ---------------------------------*/

.testimonial {
	font-style: italic;
	color: #2C6D0C;
	margin: 20px;  
	min-height: 1px;
	font-family: Arial, Helvetica, sans-serif;
}         
                             
#testimonials h3 {
	font-size: 150%;
	text-align: center;
	padding-top: 20px;
	min-height: 1px;
}	

#testimonials #content p {     /* for the <p>'s that are not testimonials */
	margin: 20px 20px 0;  
}

#testimonials #footer p {margin: 0;} /* to tidy up */

#testimonials .alt {   
	background:  #F9FEF5;
	margin: 20px 0;  /* because top/bot margins don't work on "backToTop" button */
}											

.testimonial span {
	font-style: normal;
	text-align: right;
	display: block; 
	font-weight: bold; 
}

.testimonial img {
	float: left;
	margin: 0 10px 10px 0;
}

.testimonial .imgA{
	float: right;
	margin: 0 0 10px 10px;
}

#at-home {
	background: url(images/stool-claret2.jpg) no-repeat 50% 10%;
}   /* try to put these watermark pics into content instead? */

#music {
	margin-top: 20px;
	background: #F9FEF5 url(images/score.gif) no-repeat 50% 1.5%;
	margin: 20px 0;  /* because top/bot margins don't work on "backToTop" button */
}	

/* =FOOTER ------------------------------ */
#footer {
 	clear: both;
	background: url(images/fade-top.gif) repeat-x;
	padding: 15px;  
	margin-top: 20px; /* remove when backToTop button margins are sorted */
}

#footer p {
	margin: 0 auto;
	text-align: center;
	font-size: 90%;
}

/* =CLEARING -------------------------------------*/
hr {                  
	clear: both; 
	display: block; 
  visibility: hidden;
/*margin: -0.66em 0;  this line causes problems */
	}      /* from "Containing Floats" (Complex Spiral Consulting, E Meyer). if the <hr>
						 gives display problems go back to above article for a clearing <div> */
						 
						 
<!-- 456 Berea "new clearing for ie7" 21/3/06 updated on 22/3/06). doesn't fix our collapsing masthead with logo img inside H1. try it for our other clears

<!--     .clearfix:after {
<!--        content:"."; 
<!--        display:block; 
<!--        height:0; 
<!--        clear:both; 
<!--        visibility:hidden;
<!--    } -->
<!--    .clearfix {
<!--        display:inline-block; -->
<!--    }  -->
<!--    .clearfix {
<!--        display:block;
<!--    }
<!--    * html .clearfix {
<!--        height:1px;
<!--    }    -->