/*

Theme Name: Earth Salon
Theme URI: http://earthsalon.ca
Description: Theme for the Earth Salon website, Febuary 28, 2010.
Version: 0.2
Author: Mash Tun Web Services
Author URI: http://mashtunweb.com/
Tags: earth, salon, earthsalon

*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#page {min-height: 100%;}

#page_content {overflow:auto;
	padding-bottom: 90px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -90px; /* negative value of footer height */
	height: 90px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/********************************************************/
html {
	background-image: url(http://earthsalon.ca/images/backgroun3.png);
	background-position: center;
}

body {
	font-family: "Avant Garde", "Century Gothic", "Geneva", "Tahoma",
		"Helvetica", "Arial", sans-serif;
	color: #6c5735;
	font-size: small;
	text-transform: lowercase;
}

a {
	color: #6c5735;
	text-decoration: none;
}


strong {
	font-weight: bold;
}

h1,h2,h3,h2 a, h1 a {
	color: #6c5735;
	margin-top: 5px;
	margin-bottom: 10px;
	font-weight: normal;
	font-size: medium;
	text-shadow: 0 1px 1px #999;
}
 
h4{
	color: #6c5735;
	margin-top: 8px;
	margin-bottom: 5px;
}
 
p a {
	color: black;
	text-decoration: none;
}

h2 {
	font-size: x-large;
}

h3 {
	font-size: small;
}

p {
	margin-bottom: 10px;
}

#page {
	margin-right: auto;
	margin-left: auto;
	position: relative;
	background-position: center;
}

#page_content {
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 0px;
}

/****************************************************/

/********************* Header ***********************/
#header { /*margin-top: 10px;*/
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	background-image: url(http://earthsalon.ca/images/header_background.png)
		;
	background-repeat: repeat-x;
	height: 155px;
	position: relative;
	top: 0px;
}

#headerimg {
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 11px;
}

#header_menu {
	position: relative;
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	text-align: right;
	color: #fffbcf;
	top: 15px;
}

#main_header_menus {
	color: #fffbcf;
}

#main_header_menus li {
	display: inline;
	color: #fffbcf;
	margin-left: 20px;
}

#main_header_menus li a {
	color: #fffbcf;
}

/****************************************************/

/********************* Footer ***********************/
#footer {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: small;
	width: 970px;
	margin-right: auto;
}

#footer table {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

/********************* End Footer ***********************/

/****************************************************/
#home_content {
	position: relative;
	width: 700px;
	left: 0px;
	margin-top: 20px;
}
#other_page_content {
	position: relative;
	width: 550px;
	left: 185px;
	margin-top: 20px;
}
#home_content h1 {
	margin-top: 20px;
	font-size: large;
}

.news_item h1 {
	margin-top: 0px;
	padding-top: 20px;
}

#salon_hours {
	margin-top: 30px;
}

#right_sidebar {
	position: absolute;
	width: 203px;
	right: 50px;
	top: 35px;
}
 
#salon_hours {
	position: relative;
	left: 30px;
}

.signature {
	text-align: right;
}

#home_content h3 {
	font-size: large;
}

#home_content p {
	font-size: medium;
}

#latest_news_archive_link {
	padding-top: 30px;
	margin-top: 10px;
}

.service-tab{
	margin-right: auto;
	margin-left: auto;
	width: 620px;
}

.clear_float{
	clear: both ;
}
/********************************************************/

/* Begin Images */
	/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left;
}

/* End Images */

/********************************************************/
.like_h2 {
	color: #6c5735;
	font-weight: normal;
	font-size: x-large;
	text-shadow: 0 1px 1px #999;
}

#services_tabs #tabs {
	position: relative;
	margin-top: 50px;
	text-align: center;
	list-style: none
}

#services_tabs #tabs li {
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
}

/********************************************************/
/* Begin Family Page */
#family_tabs ul {
	position: relative;
	margin-top: 50px;
	text-align: center;
	list-style: none
}

#family_tabs #tabs li {
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
}

.ui-tabs-selected {
	padding: 5px;
	border-bottom: medium solid #533019;
}

.spacer {
	margin-top: 20px;
	height: 10px;
	width: 550px;
	margin-left: 203px;
}

#family_page_title {
	width: 550px;
	margin: auto;
	text-align: center;
}

.thin_tab {
	width: 550px;
	margin-left: 203px;
}

#family_content {
	min-height: 400px;
}

#tab_panes div {
	position: absolute;
}
/* End Family Page */

/********************************************************/
#mission_page_content {
	text-align: left;
	margin-top: 30px;
	margin-left: 220px;
}

div iframe {
	padding-top: 30px;
}

#mission_page_content  p {
	font-size: medium;
	line-height: 25px;
	padding-top: 10px;
}

.ui-tabs .ui-tabs-hide {
	display: none;
}

#family_tabs p, #gallery_tabs p {
	margin-top: 20px;
	margin-bottom: 0px;
}
#family_tabs, #gallery_tabs{
	padding-top: 10px;
}

#gallery_tabs ul {
	position: relative;
	margin-bottom: 50px;
	list-style: none;
}

#family_tabs ul li, #gallery_tabs ul li {
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
}

small {
	margin-top: 10px;
	margin-bottom: 10px;
}