/* 

STYLE SHEET FOR The Beauty Workshop
Created by Webfooted Designs
www.webfooteddesigns.co.uk

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images

Notes

*/



/* --------- 1. defaults  --------- */

* {
		margin: 0;
		padding: 0;
		}

body {
		background: #fffbed url(../images/background.png) no-repeat;
		background-position: 50% 100%;
		}
		
/*  --------- 2. structure  --------- */

#wrapper {
		width: 776px;
		margin: 0 auto;
		background: #fffbed;
		-webkit-box-shadow: 0 0 5px 5px rgba(113, 101, 88, 0.5);
		-moz-box-shadow: 0 0 5px 5px rgba(113, 101, 88, 0.5);
		box-shadow: 0 0 5px 5px rgba(113, 101, 88, 0.5);
		}
		
#masthead {
		background: #fffbed;
		padding: 10px;
		position: relative;
		}
		
#masthead #headcontent {
		position: absolute;
		top: 20px;
		right: 30px;
		text-align: right;
		}
		
#logo {
		margin: 18px 28px 27px 28px;
		}
		
#content {
		position: relative;
		}
		
#contentmain {
		width: 365px;
		margin-left: 50px;
		margin-top: 45px;
		border-bottom: 1px solid #716558;
		}
		
#contentmainfull {
		margin: 25px 50px 25px 50px;
		}		
		
#specials {
		height: 248px;
		width: 194px;
		background: url(../images/greencircle.png) no-repeat;
		position: absolute;
		top: -65px;
		right: 0px;
		padding: 35px 50px 75px 50px;
		}
		

		
#testimonials {
		margin-left: 50px;
		margin-top: 10px;
		height: 243px;
		}	
		
#testimonials h2 {
		width: 285px;		
		}
		
#testimonials ul {
		list-style: none;
		}
		
#testimonials li {
		position: relative;
		}
		
#testimonials li div {
		width: 285px;
		height: 243px;
		}
		
#testimonials img {
		position: absolute;
		top: -118px;
		right: -441px;
		z-index: -100;
		}		
		

#social {
		background-color: #716558;
		width: 33px;
		position: absolute;
		top: -50px;
		right: 0;
		padding: 10px 5px 8px 5px;
		-webkit-border-radius: 5px 0 0 5px;
		-moz-border-radius: 5px 0 0 5px;
		border-radius: 5px 0 0 5px;
		}
		
.col {
		width: 330px;
		margin-right: 5px;
		float: left;
		padding-bottom: 25px;
		}
		
#contactdetails {
		float: left !important;
		width: 238px;
		margin-right: 10px;
		}
		
		
iframe {
		border: 1px solid #716558;
		}		

#footer {
		clear: left;
		background: #716558;
		padding: 35px 50px 10px 50px;
		position: relative;
		z-index: 100;
		}
		
		
#opening {
		float: left;
		width: 205px;
		margin-right: 20px;
		}
		
#address{
		float: left;
		width: 145px;
		padding: 0 20px;
		margin-top: 20px;
		border-right: 1px solid #fffaeb;
		border-left: 1px solid #fffaeb;
		}

#info {
		float: left;
		width: 230px;
		margin-left: 20px;
		margin-top: 20px;
		}	
		
#logos {
		clear: left;
		padding-top: 10px;
		}		
		
#logos img {
		margin-right: 81px;
		}
		
#logos img#lastlogo {
		margin-right: 0;
		}
		
		


/* ---------- 3. links and navigation ---------- */

a {
		color: #716558;
		text-decoration: none;
		}
		
a:hover {
		text-decoration: underline;
		}
		
p#pricelist a, #contentmainfull a {
		text-decoration: underline;
		}
		
p#pricelist a:hover, #contentmainfull a:hover {
		text-decoration: none;
		}		
		
#footer a {
		color: #fffaeb;
		}

#navigation {
		position: absolute;
		top: 139px;
		right: 30px;
		border-bottom: 1px solid #716558;
		padding: 3px 0;
		font-size: 0.8em;
		}

#navigation a {
		}

#navigation ul {
		list-style: none;
		}

#navigation li {
		display: inline;
		border-right: 1px solid #716558;
		padding-right: 13px;
		padding-left: 9px;
		}
		
#navigation li#last {
		border: none;
		}
		
.current  {
		text-decoration: underline;
		}
		
.current:hover  {
		text-decoration: none;
		}		
		
/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		}
		
#wrapper {
		font-size: 1.4em;
		color: #716558;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		}

h1, h2, h3, h4, p, ul {
		}

h1 {
		font-size: 1.4em;
		margin-bottom: 10px;
		font-weight: normal;
		}

h2 {
		}

h3 {
		}
		
h4 {
		}

p {
		margin-bottom: 10px;
		}

#contentmainfull ul {
		margin-left: 30px;
		}
		
li {
		margin-bottom: 10px;
		}
		
#headcontent  {
		font-size: 1.1em;
		}
		
#headcontent span  {
		font-size: 1.2em;
		}	

#contentmain p.highlight {
		font-size: 1.4em;
		padding: 10px 0;
		font-weight: normal;
		}
		
#testimonials h2 {
		font-size: 1.3em;
		padding: 5px 0 10px 0;
		font-weight: normal;
		}		
		
#specials {
		color: #fffaeb;
		text-align: right;
		font-size: 1.1em;
		}
		
#specials h2, .contact h2 {
		font-size: 1.2em;
		padding: 5px 0 10px 0;
		font-weight: normal;
		}	

.about h2 {
		font-size: 1.2em;
		margin: 20px 0 10px 0;
		padding-bottom: 5px;
		border-bottom: 1px solid #716558;
		font-weight: normal;
		width: 300px;
		clear: right;
		}
		
#specials p {
		font-size: 0.7em;
		}
		
#specials ul {
		list-style: none;
		margin-bottom: 10px;
		}
		
#footer {
		color: #fffaeb;
		font-size: 0.8em;
		clear: right;
		}

#footer h2 {
		font-size: 1em;
		height: 20px;
		}
		
#opening table {
		border-collapse: collapse;
		}
		
#opening th {
		text-align: left;
		}
		
#opening td {
		text-align: right;
		padding-left: 5px;
		}
		
#footer p#subnav {
		margin-top: 41px;
		}		
		
.productdiv {
		font-size: 0.9em;
	}		
	
p#pricelist	{
		clear: left;
		}
		
li#giftvouchers {
	margin-top: 15px;
	color: #716558;
	}		
		

/* ---------- 5. images ---------- */

a img {
		border: none;
		}
		
img.alignright {
		float: right;
		margin-left: 10px;
		}
		
.about img {
		
		margin-bottom: 20px;
		}

		

/* ---------- 6. tables ---------- */		

table.products {
		border-collapse: collapse;
		width: 100%;
		margin-bottom: 25px;
		}
		

.productpage h2 {
		font-size: 1.2em;
		color: #6E8C66;
		padding: 2px 0 2px 30px;
		font-weight: normal;
		margin-top: 1px;
		cursor: pointer;
		background: #FFFBED url(../images/arrow.png) no-repeat;
		background-position: 0 6px;
		}
		
table.products th {
		text-align: left;
		padding: 5px 5px 5px 0;
		font-weight: normal;
		vertical-align: top;
		}
		
table.products td {
		text-align: right;
		padding: 5px;
		vertical-align: top;
		}
		
table.products td.desc {
		text-align: left;
		}
		
/* ---------- 7. form ---------- */		

form {
		border: 1px solid #716558;
		padding: 10px;
		font-size: 0.9em;
		margin-bottom: 25px;
		}
		
#mandatory {
	text-align: right;
	font-size: 0.9em;
	margin-bottom: 15px;
	}		
	
form div {
		margin-bottom: 10px;
		}
	
label {
		display: block;
		float: left;
		width: 200px;
		}
		
input, textarea {
		padding: 5px;
		width: 300px;
		}
		
#submit {
	text-align: right;
	}		
		
#submit input {
		width: auto;
		}
		
.warning {
		font-weight: bold;
		}