/* Mayers Beauty - 2008. Written by Simon Hume.  */

body {
	margin: 0px;

	background-color:#EEEEEE;
	font-family:Arial, Helvetica, sans-serif;
}

html, body {
	height:100%;
}

#super {
	min-height:750px;
	width:100%;
}

#mastercontainer {
width:750px;
min-height:750px;
background-color:#FFFFFF;
margin:auto;

}
#maincontainer {
width:750px;

background-color:#FFFFFF;
margin:auto;

}
#maincontent, #indexcontainer, #indexleft {
height:100%;
}
#footer {
width:750px;
padding: 5px 0;
margin:auto;
background-color:#00b6eb;
font-size:12px;
color:#FFFFFF;
}
#footer p{
margin:0;
}
#footer a{
color:#fff;
}
#footer a:hover{
 text-decoration:none;
}
#footerinner {
margin:0px 0px 0px 8px;
padding:1px;
}
#topbar {
width:750px;
height:20px;
margin:0px 0px 1px 0px;
background-color:#00b6eb;
font-size:12px;
color:#FFFFFF;
}
#topbarleft {
float:left;
width:300px;
height:17px;
margin:3px 0px 0px 0px;
padding:0px;
}
#topbarleft img {
margin: 0px 7px 5px 6px;
float:left;
}
#topbarright {
float:right;
width:225px;
margin:3px 0px 0px 0px;
padding:0px 3px 0px 0px;
height:17px;
text-align:right;

}
.toplinks {
text-decoration:none;
color:#FFFFFF;
}
.toplinks:hover {
text-decoration:underline;
}
#headerarea {
width:750px;
height:96px;
margin:0px;
}
#menuwrapper {
width:750px;
background-color:#00b6eb;
}
#menu {
width:750px;
height:19px;
margin:1px 0px 0px 0px;
background-color:#00b6eb;
padding: 5px 0px 5px 0px;

}
#indexleft a {
color:#00b6eb;
text-decoration:underline;
}

#maincontent {
padding:15px 0px 15px 12px;
background-color:#FFFFFF;
height:95%;
}
#sectiondescription, #treatmentheader, #facemappingintro {
margin:3px 0px 20px 0px;
width:730px;
float:left;
color:#000000;
font-size:12px;
}
#sectionwrapper, productscontainer {
width:700px;
background-color:#FFFFFF;
}
.sectionrepeat {
width:210px;
float:left;
margin: 0px 20px 15px 0px;
}
#sectiontrigger {
font-weight:bold;
color:#00b6eb;
font-size:12px;
margin:5px 0px 0px 0px;
}
#sectionbutton, #detailbutton {
margin: 10px 0px 0px 0px;
}
.sectionimage, .indexpromoproduct {
width: 120px;
height: 120px;
border: 1px solid #a9d3df;
margin:0px 0px 0px 0px;
padding:0px;
}
.sectionimage:hover {
border: 1px solid #CCCCCC;
}
.detailheader {
color:#00b6eb;
font-size:24px;
}
.treatmentheader, .pricing {
color:#777777;
font-size:18px;
}
.treatmenttitle {
color:#00b6eb;
font-size:16px;
font-weight:bold;

}
.table-price {
padding:10px;

}

#detailpurchase {
float:left;
}
#detailbutton {
margin:0px;
padding:0px;

}
#detailbutton input {
margin:15px 0px 10px 0px;
}
#detailcontent {
width:700px;
color:#000000;
font-size:12px;
text-align:justify;
margin:7px 0px 20px 0px;
}
.detailimage {
float:right;
padding:0px 0px 15px 15px;
}
#treatmentcontent {
width:700px;
color:#000000;
font-size:12px;
text-align:justify;
margin:7px 0px 20px 0px;
}

/*#treatment-ellipse img, #treatment-derm img {
float:right;
margin:0px 0px 10px 10px;
}*/

#loginform, #registerform {
font-size:12px;
height:500px;
margin-bottom:20px;
}
#registerform ul li{
display:block;
list-style:none;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#loginform ul li{
display:block;
list-style:none;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#productsrepeat {
width:120px;
float:left;
margin: 0px 20px 15px 0px;
}
.productsimage {
width: 100px;
height: 100px;
border: 1px solid #FFFFFF;
margin:0px 0px 0px 0px;
padding:0px;
}
.productsimage:hover {
border: 1px solid #CCCCCC;
}
#productstrigger {
height:25px;
font-weight:bold;
color:#00b6eb;
font-size:10px;
margin:5px 0px 0px 0px;
}


#termscontent, #sitehelpcontent, #acccontent, #aboutcontent {
width:700px;
color:#000000;
font-size:12px;
text-align:justify;
margin:7px 0px 20px 0px;
}

#aboutcontent img{
float:right;
margin: 0px 20px 0px 20px;
}

#contactcontent {
width:400px;
color:#000000;
font-size:12px;
text-align:justify;
margin:7px 0px 20px 0px;
float:left;
}
#contactform {
width:290px;
color:#000000;
font-size:12px;
text-align:justify;
margin:7px 20px 20px 10px;
float:right;
}
#contactform ul li {
display:block;
list-style:none;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
left:-25px;
position:relative;
}

.contactformtextboxes, .contactformtextarea {
margin: 5px 0px 10px 0px;
width:250px;
color:#00b6eb;
border:1px solid #00b6eb;
font-size:10px;
}
.registercountry {
margin: 5px 0px 10px 0px;
width:250px;
color:#00b6eb;
font-size:10px;
}

h1 {
color:#00b6eb;
font-size:14px;
}

h2 {
color:#00b6eb;
font-size:24px;
}

#indexleft {
width:485px;
color:#000000;
font-size:12px;
text-align:justify;
float:left;
}

#indexright {
width:188px;
color:#000000;
font-size:12px;
text-align:justify;
float:right;
}

#indexproducts {
margin: 10px 0px 0px 0px;
}

#specialofferpromo {
width:182px;
margin:0px 0px 1px 0px;
}


#specialofferpromoblue {
width:182px;
background-color:#00b6eb;
color:#FFFFFF;
padding:3px;
margin-bottom:10px;

}

#basketcontent {
width:550px;
float:left;
}

#basketintro {
margin:3px 0px 20px 0px;
width:730px;
color:#000000;
font-size:12px;
}

#basketintro a{
color:#00b6eb;
text-decoration:underline;
}


#basketrow {
width:550px;
height:20px;
color:#FFFFFF;
font-size:12px;
background-color:#00b6eb;
padding:3px;
margin-bottom:2px;
}
#basket3content {
width:100%;
font-size:12px;
}

#paypalbadge {
float:right;
margin-right:10px;
}

/* Face Mapping  */

#facemapping img {
float:left;
}

#fmap1, #fmap2, #fmap3, #fmap4, #fmap5, #fmap6, #fmap7, #fmap8, #fmap9, #Layer1, #Layer2, #Layer3, #Layer4, #Layer5, #Layer6, #Layer7, #Layer8, #Layer9 {
height:170px;
width:225px;
float:right;
font-size:12px;
background-color:#00b6eb;
color:#FFFFFF;
padding:5px;
margin-right:8px;
z-index:1;
float:right;
margin-left:400px;
margin-top:200px;
}

#facemappingform {
width:180px;
color:#000000;
font-size:12px;
text-align:justify;
}

#facemappingdiagram {
width:100%;
float:left;
}

#facemappingform ul li {

list-style:none;
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

}
.fmformtextboxes {
margin: 5px 0px 10px 0px;
width:180px;
color:#00b6eb;
border:1px solid #00b6eb;
font-size:10px;
}
#table7 {
background-image:url(../images/facemapping/speedmap.jpg);
background-repeat:no-repeat;
}

/* Menu Navigation */

#topNav {
margin:0px 0px 0px 8px;

}

#topNav ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
display:inline;
width:550px;
height:27px;


}

#topNav li{
display:inline;
list-style:none;

}

#topNav li a {
display: block;
text-decoration:none;
font-size:12px;
color:#FFFFFF;
text-decoration:none;
}


/* Fix IE. Hide from IE Mac \*/

#topNav ul li { float: left; }

#topNav ul li a { height: 1%; }

/* End */


#topNav li.home a {
width: 50px;
height: 17px;
background-color: transparent;
background: url(../images/menu_home.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li.about a {
width: 90px;
height: 17px;
background-color: transparent;
background: url(../images/menu_contact.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li.facemapping a {
width: 90px;
height: 17px;
background-color: transparent;
background: url(../images/menu_contact.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li.contact a {
width: 60px;
height: 17px;
background-color: transparent;
background: url(../images/menu_whatwe.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li.treatments a {
width: 75px;
height: 17px;
background-color: transparent;
background: url(../images/menu_auctions.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li.testimonials a {
width: 88px;
height: 17px;
background-color: transparent;
background: url(../images/testimonials.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li.products a {
width: 80px;
height: 17px;
background-color: transparent;
background: url(../images/menu_policy.gif) left top no-repeat;
background-attachment: scroll;

}

#topNav li a:hover {
background-position:0 -17px;

}

/* end Menu Navigation */




#basketcontent td{
font-size:12px;
padding:5px;
}

#basketcontent td.table-item{
width:550px;
}
#basketcontent td.table-price{
width:95px;
}
#basketcontent td.table-total{
width:75px;
text-align:right;
}

#basketcontent td.table-quantity{
width:75px;
}
#basketcontent tr.table-postage{
border-bottom: 1px solid #00b6eb;
}
.quantitybox {
width:20px;
border: 1px solid #00b6eb;
font-size:12px;
}
div#popup {
background:#FFFFFF;
margin:0px;
padding:7px;
width:200px;
}
#basketformarea {
background-color:#00b6eb;
font-size:12px;
color: #FFFFFF;
padding:5px;
}

/* http://www.webtoolkit.info/css-clearfix.html */
.group:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.group { display: inline-block; }
html[xmlns] .group { display: block; }
* html .group { height: 1%; }

/* basic contact form */
.basic { width:300px; margin: 0 auto; padding-top:20px;}
.basic li {width: 100%;}
.basic ul, .basic li { margin:0; padding:0; }
.basic fieldset { border: 1px solid #00B6EB; margin-left:20px; background-color: #fcfcfc; padding: 20px;}
.basic fieldset legend { font-size: 1.2em; color: #333; font-weight:bold; padding:0 10px;}
.basic ul { list-style:none;}
.basic li { position: relative; padding: 5px 0; }
.basic input, .basic textarea, .basic select { margin: 0; display: block; width: 200px; background-color: #fff; padding: 4px; border: 1px solid #ddd; font-size: 1em; }
.basic .hidden { display: none;}
.basic select, .basic input[type="checkbox"] { width: auto; }
.basic label { font-size: 1em; }
.basic label.over { position: absolute; top: 11px; left: 6px; line-height: 1em; margin: 0; }
.basic input.button { width: auto; padding: 4px 10px; font-weight: bold; }
.basic input.button:hover { background-color: #bbb; color: #fff; }

.validation {width:100%; display:block; margin-top:5px;}
.validation span {float:left; padding-top:5px; padding-right:5px;}
/*TESTIMONIALS*/


blockquote { background: url(../images/quote-open.png) 0 0 no-repeat; padding-left: 30px; margin-bottom:2em;}
blockquote p { background: url(../images/quote-close.png) 100% 100% no-repeat; padding-right: 30px; display:block; font-style: italic; color:#333;}
blockquote p span { display:block; width: 98%; text-align:right; font-weight: bold; padding-right:2%; font-style: normal;}

