/* CSS File for 'Hera Beauty Clinic' - website made by Robert Prior of R and P Design, www.randpdesign.co.uk */


body { 
	font-family: Arial, Helvetica, sans-serif; 
	background: #070a0f url(../images/background_tile.jpg) repeat;
}

#main {
	height: auto;	
}

#logo {
	width: 154px;
	height:  155px;
	float: left;	
	background-image: url(../images/logo.png);
	left: 20px;
	top: -10px;
	position: relative;
}


.container {
	width: 974px;
	margin: 0 auto;
}

#header {
	height: 575px;
	background: url(../images/top_area.jpg);
}

#top_content {
	width: 660px;
	margin-left: 75px;
	padding: 15px;
	height: 320px;
	float: left;
	position: absolute;
	margin-top: 181px;
}

#top_content_treatments {
	width: 640px;
	margin-left: 75px;
	height: auto;
	float: left;
	position: absolute;
	margin-top: 181px;
}

#top_content_treatments a img
{
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;
}

#top_content_treatments a img:hover
{
	border-color: #7c5a41;
	opacity: 0.9;
	
}

.slideshow {
	width: 640px;
	margin-left: 75px;
	height: 319px;
	float: left;
	position: absolute;
	margin-top: 181px;
	clear: both;
	background: none;
}

.slide {
	float: left;
	clear: both;
	background: none;
}

.slideshow ul {
	margin-top: 5px;
}

.slideshow li {
	font-size: 12px;
	color: #433f40;
	list-style-type: disc;
	list-style-position: inside;
	line-height: 1.5;
	text-transform: uppercase;
}

#nav {
	position: absolute;
	float: left;
	margin-top: 523px;
	margin-left: 80px;
	width: 200px;
	height: 50px;
}

#nav a {
	float: left;
	text-indent: -9999px;
	height: 15px;
	width: 15px;
	display: block;
	background: #BAC7CD;
	margin-right: 10px;
}

#nav a:hover {
	background: #abb8bc;
}

#nav a:focus { outline: none; }

#nav a.activeSlide {
	background: #475A68;
}

#call {
	position: absolute;
	width: 888px;
	text-align: right;
	margin-top: 509px;
	margin-left: 24px;
	padding: 12px 30px 12px 10px;
	background-color: #fefefe;
	opacity: 0.65;
}

.photo {
	float: left;
	height: 319px;
	width: 245px;
}

.treatments_nav {
	float: left;
	padding-left: 20px;
	padding-right: 10px;
	padding-top: 20px;
	height: 319px;
	width: 245px;
	overflow: hidden;
}

.contact_left {
	float: left;
	width: 290px;
	height: 320px;
}

.contact_right {
	float: right;
	width: 320px;
	height: 320px;
}

.details {
	height: 277px;
	width: 348px;
	padding: 20px;
	margin-left: 265px;
	background: none;
}

.details p {
	line-height: 18px;
}

.details a {
	margin-top: 8px;
	color: #433F40;
    font-size: 12px;
    font-weight: bold;
    float: left;
}

#content {
	width: 974px;
	background: url(../images/ribbon_repeat.jpg) repeat-y;

}

#main_content {
	width: 974px;
}

.main_content_box_left {
	float: left;
	width: 258px;
	padding-left: 38px;
	padding-right: 30px;
}

.main_content_box_middle {
	float: left;
	width: 257px;
	padding-left: 30px;
	padding-right: 30px;
}

.main_content_box_left a img
{
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;
}

.main_content_box_left a img:hover
{
	border-color: #7c5a41;
	opacity: 0.9;
	
}

.main_content_box_right {
	float: right;
	width: 257px;
	padding-left: 30px;	
	padding-right: 38px;
}

.main_content_box_right a img
{
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;
}

.main_content_box_right a img:hover
{
	border-color: #7c5a41;
	opacity: 0.9;
	
}

#footer {
	width: 974px;
	height: 230px ;
	background-image: url(../images/bottom_area.jpg);
	padding-top: 18px;
}

.footer_content_left {
	float: left;
	width: 200px;
	height: 114px;
	padding-left: 65px;
	padding-top: 50px;
}

.footer_content_middle {
	float: left;
	width: 438px;
	height: 114px;
	text-align: center;
	padding-top: 50px;
}

.footer_content_middle p {
	margin-bottom: 10px;
}

.footer_content_right {
	float: right;
	width: 200px;
	height: 114px;
	padding-right: 65px;
	padding-top: 50px;
	text-align: right;
}

#footer_details {
	width: 974px;
	height: 125px;
	overflow: hidden;
	float: left;
}

#map_canvas {
	width: 250px;
	height: 270px;
	overflow: hidden;
	border: 1px solid #5e5e5e;
}

.lightbox {
	background: url(../images/click_image.jpg) 0 bottom no-repeat;
}

.babtac {
	margin-top: -11px;
	height: 40px;
	width: 40px;
	vertical-align: top;
	padding-right: 7px;
}

.button {
	width: auto;
	padding: 8px 15px;
	background: #433f40;
	font-size: 12px;
	color: #FFFFFF;
	cursor: pointer;
	float: right;
	text-decoration: none;
	margin-bottom: 5px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
	
.button:hover {
	
	background: #1d1a1b;
}

/* @group Feature List */

.vpllogo  {
	margin-top: 155px;
}

div.feature_list {
	padding-left: 20px;
	padding-right: 10px;
	width: 593px;
	height: 319px;
	overflow: hidden;
}

div.feature_list ul {
	position: absolute;
	list-style: none;	
	padding: 0;
	margin: 0;
}

ul.tabs {
	left: 0;
	top: 60;
	z-index: 2;
	width: 245px;
	font-family: "Arial", Helvetica, Geneva, sans-serif;
	font-size: 12px;
	position: absolute;
}

ul.tabs li {
	margin-left: -5px;
	padding-bottom: 5px;
	padding-left: 20px;
}


ul.tabs li a {
	border-bottom: 1px dotted #b6a484;
	text-decoration: none;
	display: block;
	color: #656061;
	padding: 5px;
}

ul.tabs li a:hover {
	color: #433f40;
	padding: 5px;
	background-color: #bcaf9e;
}

ul.tabs li a.current {
	font-weight: bold;
	background: #433f40;
	color: #FFF;
}

ul.tabs li a.current:hover {
	text-decoration: none;
	cursor: default;
}

ul.output {
	top: 0;
	width: 348px;
	position: relative;
	left: 265px;
}

ul.output li {
	position: absolute;
	padding: 20px;
	width: 348px;
	height: 277px;
	color: #433f40;
}

ul.output li a {
	font-size: 12px;
	color: #433f40;
	font-weight: bold;
}

ul.output li a:hover {
	color: black;
	font-weight: bold;
}

ul.output li a img {
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;	
}

ul.output li a img:hover {
	border-color: #7c5a41;
	opacity: 0.9;
}


/* @end */

/* @group Feature List 2 */

div.feature_list2 {
	padding-left: 20px;
	padding-right: 10px;
	width: 593px;
	height: 319px;
	overflow: hidden;
}

div.feature_list2 ul {
	position: absolute;
	list-style: none;	
	padding: 0;
	margin: 0;
}

ul.tabs2 {
	left: 0;
	top: 60;
	z-index: 2;
	width: 245px;
	font-family: "Arial", Helvetica, Geneva, sans-serif;
	font-size: 12px;
	position: absolute;
}

ul.tabs2 li {
	margin-left: -5px;
	padding-bottom: 5px;
	padding-left: 20px;
}


ul.tabs2 li a {
	border-bottom: 1px dotted #b6a484;
	text-decoration: none;
	display: block;
	color: #656061;
	padding: 5px;
}

ul.tabs2 li a:hover {
	color: #433f40;
	padding: 5px;
	background-color: #bcaf9e;
}

ul.tabs2 li a.current {
	font-weight: bold;
	background: #433f40;
	color: #FFF;
}

ul.tabs2 li a.current:hover {
	text-decoration: none;
	cursor: default;
}

ul.output2 {
	top: 0;
	width: 348px;
	position: relative;
	left: 265px;
}

ul.output2 li {
	position: absolute;
	padding: 20px;
	width: 348px;
	height: 277px;
	color: #433f40;
}

ul.output2 li a {
	font-size: 12px;
	color: #433f40;
	font-weight: bold;
}

ul.output2 li a:hover {
	color: black;
	font-weight: bold;
}

ul.output2 li a img {
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;	
}

ul.output2 li a img:hover {
	border-color: #7c5a41;
	opacity: 0.9;
}


/* @end */

/* @group Feature List 3 */

div.feature_list3 {
	padding-left: 20px;
	padding-right: 10px;
	width: 593px;
	height: 319px;
	overflow: hidden;
}

div.feature_list3 ul {
	position: absolute;
	list-style: none;	
	padding: 0;
	margin: 0;
}

ul.tabs3 {
	left: 0;
	top: 60;
	z-index: 2;
	width: 245px;
	font-family: "Arial", Helvetica, Geneva, sans-serif;
	font-size: 12px;
	position: absolute;
}

ul.tabs3 li {
	margin-left: -5px;
	padding-bottom: 5px;
	padding-left: 20px;
}


ul.tabs3 li a {
	border-bottom: 1px dotted #b6a484;
	text-decoration: none;
	display: block;
	color: #656061;
	padding: 5px;
}

ul.tabs3 li a:hover {
	color: #433f40;
	padding: 5px;
	background-color: #bcaf9e;
}

ul.tabs3 li a.current {
	font-weight: bold;
	background: #433f40;
	color: #FFF;
}

ul.tabs3 li a.current:hover {
	text-decoration: none;
	cursor: default;
}

ul.output3 {
	top: 0;
	width: 348px;
	position: relative;
	left: 265px;
}

ul.output3 li {
	position: absolute;
	padding: 20px;
	width: 348px;
	height: 277px;
	color: #433f40;
}

ul.output3 li a {
	font-size: 12px;
	color: #433f40;
	font-weight: bold;
}

ul.output3 li a:hover {
	color: black;
	font-weight: bold;
}

ul.output3 li a img {
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;	
}

ul.output3 li a img:hover {
	border-color: #7c5a41;
	opacity: 0.9;
}


/* @end */

/* @group Feature List 4 */

div.feature_list4 {
	padding-left: 20px;
	padding-right: 10px;
	width: 593px;
	height: 319px;
	overflow: hidden;
}

div.feature_list4 ul {
	position: absolute;
	list-style: none;	
	padding: 0;
	margin: 0;
}

ul.tabs4 {
	left: 0;
	top: 60;
	z-index: 2;
	width: 245px;
	font-family: "Arial", Helvetica, Geneva, sans-serif;
	font-size: 12px;
	position: absolute;
}

ul.tabs4 li {
	margin-left: -5px;
	padding-bottom: 5px;
	padding-left: 20px;
}


ul.tabs4 li a {
	border-bottom: 1px dotted #b6a484;
	text-decoration: none;
	display: block;
	color: #656061;
	padding: 5px;
}

ul.tabs4 li a:hover {
	color: #433f40;
	padding: 5px;
	background-color: #bcaf9e;
}

ul.tabs4 li a.current {
	font-weight: bold;
	background: #433f40;
	color: #FFF;
}

ul.tabs4 li a.current:hover {
	text-decoration: none;
	cursor: default;
}

ul.output4 {
	top: 0;
	width: 348px;
	position: relative;
	left: 265px;
}

ul.output4 li {
	position: absolute;
	padding: 20px;
	width: 348px;
	height: 277px;
	color: #433f40;
}

ul.output4 li a {
	font-size: 12px;
	color: #433f40;
	font-weight: bold;
}

ul.output4 li a:hover {
	color: black;
	font-weight: bold;
}

ul.output4 li a img {
	padding: 3px;
	border: 1px solid #7e7e7e;
	background-color: #f7f7f7;
	margin-right: 9px;
	opacity: 0.75;
	margin-bottom: 9px;	
}

ul.output4 li a img:hover {
	border-color: #7c5a41;
	opacity: 0.9;
}


/* @end */

/* @group FAQ Divs */

#hair_removal_faq {
	width: 800px;
	height: auto;
	padding: 20px;
}

#skin_rejuvenation_faq {
	width: 800px;
	height: auto;
	padding: 20px;
}



#eyelash {
	width: 800px;
	height: auto;
	padding: 20px;
}

#dermaroller_facts {
	width: 800px;
	height: auto;
	padding: 20px;
}

#dermaroller_facts ul {
	margin-left: 10px;
	margin-bottom: 18px;
}

#dermaroller_facts li {
	list-style-type: square;
	list-style-position: inside;
	color: #433F40;
    font-size: 12px;
    margin-bottom: 5px;
}

/* @end */

/* @group Top Navigation */ 

ul.topnav {  
    list-style: none;  
    margin-top: 41px;
    margin-right: 40px;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding: 13px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 6px;  
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 6px;  
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 6px;  
    -moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #f8f8f8), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #f8f8f8 1px, #FFFFFF 25px);
	border: 1px solid  #c5c5c5;
	float: right;
	text-transform: uppercase;
	
}

ul.topnav li.current a {
	border-bottom: 1px solid black;
	color: black;
}

ul.topnav li:last-child {
	border-right: none;
}

ul.topnav li {  
    float: left; 
    padding-left: 25px;
    padding-right: 25px;
	border-right: 1px dashed #c8a784;
}  

ul.topnav li a {  
    font-size: 13px; 
    color: #505050;  
    text-decoration: none;
}  

ul.topnav a:hover {
	color: black;

}

#new {
	display: block;
	width: 90px;
	height: 40px;
	overflow: hidden;
	position: absolute;
	margin-left: 450px;
	top: 2px;
	background: url(../images/new.jpg) no-repeat;
	z-index: 9999;
}

/* @end */

/* @group Headings */

p {
	font-size: 12px;
	line-height: 1.3;
	color: #433f40;
}

h1 {
	text-indent: -9999px;
	font: bold 24px Georgia, "Times New Roman", Times, serif;
}

h2 {
	font-size: 16px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #433f40;
}



h3 {
	font-size: 15px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #433f40;
	padding-bottom: 3px;
}

h4 {
	font-size: 13px;
	font-weight: bold;
	color: #433f40;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
	text-transform: capitalize;
}

h5 {
	color: black;
	font-size: 12px;
}

.indiba {
	color: #a7c55b;
	font-weight: bold;
}

.impact {
	color: white;
	background-color: #634923;
	
	margin-left: 5px;
	
	padding: 3px 5px;
	font-size: 14px;
}

.new {
	color: white;
	background-color: #ab1826;
	
	margin-left: 5px;
	
	padding: 3px 5px;
	font-size: 14px;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}



.underline {
	text-decoration: underline;
}

.small {
	font-size: 10px;
	font-style: italic;
}

.question {
	font-weight: bold;
	padding-bottom: 5px;
}

.price {
	font-weight: bold;
	padding-right: 45pxpx;
	float: right;
}

ul.times {
	list-style-image: none;
	font-size: 12px;
	line-height: 1.6;
	color: #433f40;
	font-weight: bold;
}

ul.address {
	list-style-image: none;
	font-size: 12px;
	line-height: 1.6;
	color: #433f40;
	text-align: right;
	float: right;
}


.right {
	float: right;
	font-weight: normal;
}

.email a {
	font-size: 12px;
	text-decoration: none;
	color: #433f40;
	font-weight: bold;
}

.email a:hover {
	color: black;
}

.link a {
	font-size: 12px;
	text-decoration: none;
	color: #5e595a;
	font-weight: bold;
}

.link a:hover {
	color: black;
}

/* @end */

/* @group Footer Links */

a#twitter {
	background: url("../images/twitter-btn.png");
    display: block;
    float: right;
    height: 18px;
    margin-right: 10px;
    text-indent: -9999px;
    width: 18px;
}

a#twitter:hover {
	background-position: 0 -18px;
}

a#twitter:active {
	background-position: 0 -36px;
}

a#facebook {
	background: url("../images/facebook-btn.png");
    display: block;
    float: right;
    height: 18px;
    margin-right: 150px;
    text-indent: -9999px;
    width: 18px;
}

a#facebook:hover {
	background-position: 0 -18px;
}

a#facebook:active {
	background-position: 0 -36px;
}

.fb_edge_widget_with_comment {
    left: 300px;
    position: relative;
    top: -27px;
}

#randp {
	height: 25px;
	overflow: hidden;
	width: 79px;
	padding-top: 40px;
	padding-left: 44px;
	float: left;
	text-indent: -9999px;
	z-index: 50px;
}

#randp a {
  display:block;
  color: gray;
}

#randp a:hover {
  display:block;
  color: maroon;
}

.rollover a {
height: 30px;
width: 79px;
background: url(../images/site_link.png) 0 -25px no-repeat;
}

.rollover a:hover { 
background-position: 0 0px;
}

/* @end */

/* @group fading content */

#content-slider {
	width: 640px;
	overflow: hidden;
	height: 319px;
	float: left;
}

#content-slider-inside {
	list-style: none;
	height: 340px;
	overflow: hidden;
	overflow-y: hidden;
}
	
.navigation {
	font-family: "Arial", Helvetica, Geneva, sans-serif;
	font-size: 12px;
}

.navigation li {
	margin-left: -5px;
	padding-bottom: 5px;
}

.navigation li a {
	border-bottom: 1px dotted #b6a484;
}

.navigation li a, .navigation li a:link, .navigation li a:visited {
	text-decoration: none;
	display: block;
	color: #656061;
	padding: 5px;
}

.navigation li a.selected, .navigation li a.selected:link, .navigation li a.selected:visited {
	color: white;
	padding: 5px;
	font-weight: bold;
	background: #958B7D url(../images/up_arrow.png) 99% 50% no-repeat;
}

.navigation li a:hover, .navigation li a:focus {
	color: #433f40;
	padding: 5px;
	background-color: #bcaf9e;
}

.navigation li a:active {
	background-color: #958B7D;
	color: #433f40;
	padding: 5px;
}

.navigation li.current {
	font-weight: bold;
	color: black;
}



/* @end */

/* @group twitter */

.query {
  	font-size: 12px;
  	line-height: 1.5;
	color: #433f40;
  	text-align: left;
}

.query .tweet_list {
	list-style-type: none;
    margin: 0;
    padding: 0;
}

.query .tweet_list li {
    overflow: auto;
    margin-bottom: 10px;
    border-bottom: 1px solid #CEC4AE;
    padding-bottom: 10px;
}

.query .tweet_list li a {
 	color: #433F40; 
 	font-weight: bold;
 	display: block;
 	margin-bottom: 5px;
 }
 
 .query .tweet_list li a:hover {
	color: black;
}

.query .tweet_list .tweet_avatar {
    padding-right: 15px;
    padding-bottom: 10px;
    float: left; 
}

.query .tweet_list .tweet_avatar img {
    vertical-align: middle;
	border: 1px solid black;
}

/* @end */

/* @group Contact Form */

input, textarea { 
	padding: 5px 9px 5px 9px;
	border: 1px solid #d5d5d5;
	outline: 0;
	font: normal 12px "Arial", Helvetica, Geneva, sans-serif;
	width: 200px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #f8f8f8), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #f8f8f8 1px, #FFFFFF 25px);
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: #433f40;
	margin-bottom: 10px;
	text-shadow: #f8f8f8 0 0 0;
}

textarea { 
	width: 300px;
	max-width: 300px;
	height: 128px;
	max-height: 148px;
	line-height: 150%;
	margin-bottom: 13px;
	margin-top: 2px;
	}

input:hover, textarea:hover,
input:focus, textarea:focus { 
	border-color: #c5c5c5; 
	 box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;  
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;  
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;  
	}

.form label { 
	margin-left: 10px; 
	color: #433f40; 
	font: bold 12px "Arial", Helvetica, Geneva, sans-serif;
	}

.submit input {
	width: auto;
	padding: 9px 15px;
	background: #433f40;
	border: 0;
	font-size: 12px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor: pointer;
	float: right;
	margin-right: 30px;
	}
	
.submit input:hover {

	background: #383435;

	}

/* @end */