/* 

TITLE: ICON DAY SPA
DATE: 17/06/08
CODE: TP

COLOURS:
GREEN: #a7d272
DARK GREY: #768388
LIGHT GREY: #bcc3c8
BORDER GREY: #eceeee

*/

/*------------------------ CSS RESET ------------------------*/

@import url("reset.css");

/*------------------------ IE6 PNG HACK ------------------------*/

@import url("pnghack.css");

/*------------------------ GLOBAL STYLES ------------------------*/

body {
	background:top center url(../images/page_flourish.gif) no-repeat;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #768388;
	line-height: 1.5em;
	}

h1, h2, h3 {
	font-size:32px;
	color: #a7d272;
	font-weight:normal;
	line-height:1.5em;
	}

h1 {
	font-size:34px;
	padding-bottom:10px;
	}
	
h2 {
	font-size:26px;
	border-bottom:dotted 1px #bcc3c8;
	padding-bottom:10px;
	}

h3 {
	font-size:20px;
	padding-top:12px;
	padding-bottom: 6px;
	}

a {
	color: #a7d272;
	}

a:hover {
	color:#768388;	
	}
	
/*------------------------ PAGE LAYOUT ------------------------*/

#shadow {
	margin:0 auto;
	background:url(../images/shadow.png) repeat-y;
	width:826px;	
	}

#container {
	width: 800px;
	margin: 0 auto;
	background-color:#FFFFFF;
	}

#home #container {
	background: #ffffff url(../images/content_flourish_bottom.gif) no-repeat 0% 73%;
	}

#flourish {
	background: #ffffff url(../images/content_flourish_bottom.gif) no-repeat;
	height: 200px;
	clear:both;
	}

/*------------------------ HEADER.SHTML ------------------------*/

#header {
	clear:both;
	text-align:center;
	background: #FFFFFF url(../images/header_flourish.gif) no-repeat top right;
	height:280px;
	}

#navigation {
	clear:both;
	margin-left:40px;
	padding-top:30px;
	text-align:left;
	}

#navigation ul {
	font-size:18px;
	color: #a7d272;
	text-transform:lowercase;
	line-height: 1.2em;
	border-left: 1px solid #eceeee;
	padding-left: 15px;
	}

#header  #navigation a {
	color: #a7d272;
	text-decoration: none;
	}

#header  #navigation a:hover {
	color: #bcc3c8;
	}

/*------------------------ GENERAL PAGE CONTENT ------------------------*/

#content {
	padding: 0 40px 0 40px;
	clear:both;
	}

#content p {
	padding-bottom:10px;
	}

#content .whitespace {
	height:10px;
	}

#content .border {
	border-bottom:dotted 1px #bcc3c8;
	}

/*------------------------ HOMEPAGE CONTENT ------------------------*/

#home #content #left  {
	float:left;
	width:360px;
	}

#home #content #right {
	float:right;
	width:360px;
	text-align:right;
	}

#home #content h1 {
	padding-bottom:0px;
	}
	
/*------------------------ MYBRANDS CONTENT ------------------------*/

#mybrands #content #left  {
	float:left;
	width:460px;
	}

#mybrands #content #right {
	float:right;
	width:260px;
	text-align:right;
	}

#mybrands #content li {
	list-style-type: disc;
	list-style-position: inside;
	}

#mybrands #content ul {
	padding-bottom:10px;
	}

/*------------------------ TREATMENTS CONTENT ------------------------*/

#treatments #content #left  {
	float:left;
	width:500px;
	}

#treatments #content #right {
	float:right;
	width:220px;
	height:292px;
	background:url(../images/treatments_links_bg.jpg) no-repeat;
	text-align:right;
	padding-top: 40px;
	}

#treatments #content #right h3 {
	text-transform:none;
	color:#FFFFFF;
	padding-right:40px;
	}

#treatments #content #right ul {
	font-size:16px;
	color: #a7d272;
	line-height: 1.2em;
	padding-right:40px;
	padding-top:10px;
	}

#treatments #content #right a {
	text-decoration: none;
	color:#FFFFFF;
	}

#treatments #content #right a:hover {
	color:#E5E5E5;
	}

#treatments #content #left #prices {
	width:90px;
	height:48px;
	float:right;
	background:url(../images/treatments_price_bg.gif) no-repeat center;
	margin:0;
	padding:0;
	font-size:14px;
	text-align:center;
	color:#FFFFFF;
	}

#treatments #content #left #prices p {
	padding-top:16px;
	}


	
/*------------------------ SPECIAL OFFERS CONTENT ------------------------*/

#offers #content #left  {
	float:left;
	width:480px;
	}

#offers #content #right {
	float:right;
	width:220px;
	}
	
/*------------------------ POLICIES CONTENT ------------------------*/

#policies #content #left {
	float:left;
	width:210px;
	padding-right:30px;
	}

#policies #content #middle {
	float:left;
	width:210px;
	padding-right:30px;
	}

#policies #content #right {
	float:right;
	width:240px;
	}

#policies #content h3 {
	border-bottom:dotted 1px #bcc3c8;
	padding-bottom:10px;
	}

/*------------------------ CONTACT CONTENT ------------------------*/

#contact #content #left h1  {
	padding-bottom:20px;
	}

#contact #content #left  {
	float:left;
	width:360px;
	}

#contact #content #right {
	float:right;
	width:360px;
	text-align:right;
	}

#contact #content #left label {
	color:#a7d272;
	text-transform:lowercase;
	font-size:16px;
	display:block;
	}

#contact #content textarea, #contact #content input {
	color: #999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	width:300px;
	padding:5px;
	margin:5px 0 15px 0;
	border:none;
	background-color:#eaeaea;
	}

#contact a {
	color: #a7d272;
	text-decoration: none;
	text-align:right;
	}

#contact a:hover {
	color:#bcc3c8;
	}
	
/*------------------------ FOOTER.SHTML ------------------------*/

#footer {
	clear:both;
	background-color:#a7d272;
	height:250px;
	padding-right:40px;
	}

#footer #left {
	float:left;
	width:500px;
	}

#footer #right {
	float:right;
	width:230px;
	padding-top:20px;
	}

#footer #navigation ul {
	border:none;
	padding:0;
	}

#footer #navigation a, #footer h1, #footer p, #footer a {
	color: #ffffff;
	text-decoration: none;
	}

#footer #navigation a:hover, #footer a:hover {
	color:#E5E5E5;
	}

#footer #right .sendit {
	font-size:22px;
	text-transform:lowercase;
	text-align:right;
	padding: 5px 20px 0 0;
	}

#footer h1  {
	font-size:30px;
	text-align:left;
	}

#footer textarea, #footer input {
	color: #a7d272;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	width:200px;
	padding:5px;
	margin:2px;
	border:none;
	}

#footer .copyright {
	text-align:center;
	padding-top: 10px;
	}

#bottom {
	width:808px;
	margin: 0 auto;
	clear:both;
	}

/*------------------------ USEFUL CLASSES ------------------------*/

.imgfloatleft {
	float:left;
	margin: 10px 10px 3px 0px;
	}

.imgfloatright {
	float:right;
	margin: 10px 0px 3px 10px;
	}