/*********** resets************/
*{ margin:0;padding:0; border:none;}

/*********** text styling **********/
  a {font:12px 'Georgia',Arial, sans-serif;letter-spacing:0;margin: 0;text-decoration:none; color: #000;}
  a:hover{text-decoration: underline; color: #000;}
	h1 {font: 60px 'Georgia', Arial, sans-serif;letter-spacing: 0;margin:0px 0;}
	h2 {font: 14px 'Georgia', Arial, sans-serif;letter-spacing: 0;margin:0px 0; text-transform: uppercase;}
	h3 {font: 18px 'Georgia', Arial, sans-serif;letter-spacing: 0;margin:5px 0;}
	p {font: 12px 'Georgia', Arial, sans-serif; }
	ul {font: 18px 'Georgia', Arial, sans-serif;letter-spacing: 0;margin:5px 0;}
	.bold{ text-transform: uppercase;}
	ul{ list-style: none;}
	
/* ********* positioning **********/
html{
	background-color: black;
}

body {
	width: 100%;
	bottom:0px;
}

div#background{
	/*
	height: 1069px;*
	height: 948px;
/*	overflow:hidden; */
/*	height:948px;*/
	position: absolute;
	height:950px;
	width:1700px;
	background: #e4e4e4 url('../images/floor.jpg') repeat-x scroll bottom center;
	top:0px;
}

.content img{
	position: absolute;
	bottom: 0;
}

/* ********* Nav ************** */
#nav{
	height: 166px;
	width: 910px;
	margin: 10px auto 0;
	background: #e4e4e4 url('../images/nav_frame.png') no-repeat scroll top right;
	position: relative;
	z-index:50;
}

#nav #menu_items{
	width: 342px;
	height: 40px;
	margin: 0;
	padding: 0;
	float: left;
  	position: relative;
	top: 46px;
	left: 286px;
	background-color: black;
}

.nav_button{
	height: 40px;
	float: left;
	cursor: pointer;
}

/* home button */
#nav li#sign{
	cursor: pointer;
	position: absolute;
	left: -268px;
	top: -11px;
	height: 118px;
	width: 140px;
	background-image: url('../images/sign.png');
	background-position: 0px 0px;
}

#nav li#sign:hover{
	background-position: 0px -118px;
	cursor: pointer;
}

/* sprite sheet navs */
li#services_button{
		width: 108px;
		height: 40px;
		background-image: url('../images/nav_sprites.jpg');
		background-position: 0px 0px;
}

li#products_button{
		width: 128px;
		height: 40px;
		background-image: url('../images/nav_sprites.jpg');
		background-position: -109px 0px;
}

li#gallery_button{
		width: 105px;
		height: 40px;
		background-image: url('../images/nav_sprites.jpg');
		background-position: -237px 0px;
}
/* Hover effects for buttons */
li#services_button:hover, li#services_button.active:hover{	background-position: 0px -40px; }
li#products_button:hover, li#products_button.active:hover{	background-position: -109px -40px; }
li#gallery_button:hover, li#gallery_button.active:hover{	background-position: -237px -40px; }
/* active */
li#services_button.active{	background-position: 0px -80px; }
li#products_button.active{	background-position: -109px -80px; }
li#gallery_button.active{	background-position: -237px -80px; }

#nav a#sign{
	float: left;
}

#nav div#menu_items{
	width: 343px;
	height: 40px;
	margin: 0;
	padding: 0;
	float: left;
  position: relative;
	top: 44px;
	left: 115px;
}

#menu_items a.nav_button{
	height: 40px;
	float: left;
	position: relative;

}

/* **** specific pages ******** */

.inner_page{
	width: 900px;
	height: 550px;
}

/* dohickys */
.dohicky{
	margin: 5px auto 5px;
	position: relative;
	display: block;
}

/* page 1 home */
#home_page div.copy{
	width: 400px;
	margin: 10px 250px;
	position: absolute;
	padding-top: 5px;
}

#home_page div.inner_page{
	background: url('../images/home_bg.png') no-repeat scroll top left;
}

#left_home_pic{
	position: absolute;
	left: 50px;
	top: 65px;
	cursor: pointer;
}

#right_home_pic{
	position: absolute;
	left: 764px;
	top: 65px;
	cursor: pointer;
}

/* Services */

#services1, #services2{
	position:absolute;
	width: 256px;
	top: 10px;
}
#services1 li, #services2 li{
	list-style:none; 
	font: 12px 'Georgia', Arial, sans-serif;
	line-height: 1;
}

#services1{
	left: 0px;
}
#services1 li, #services1 h2{ 
	text-align: right;
}

#services2{
	left: 657px;
}
#services2 li{ 
	text-align: left;
}

/* page 3 - Products */

#products_page div.copy{
	width: 400px;
	margin: 0px 250px;
	position: absolute;
}


#services_page div.inner_page{
	background: url('../images/services_bg.png') no-repeat scroll top left;
}

#products_page div.inner_page{
	background: url('../images/products_bg.png') no-repeat scroll top left;
}

/* Services */
/*.salon{
	float: left;
	width: 200px;
	margin: 50px 0px 0 150px;
}

.spa{
	float: right;
	width:200px;
	margin: 50px 150px 0 0px;
}*/
.sandbox{ margin: 15px; float: right;}

/* ********** overlay  ********** */
.simple_overlay{
	position: relative;
	height: auto;
	display: none;
	z-index: 1000;
	background-color: black;
	width: auto;
	border: 3px solid black;
/*	-moz-box-shadow: 0px 0px 50px #000;
	-webkit-box-shadow: 0 0 90px #000;*/
}
.simple_overlay img{
	cursor: pointer;
}

.simple_overlay div.credits{
	background-color: black;
	width: 100%;
	height: 60px;
}

.simple_overlay div.credits p{
	color: #aaa;
	font: 12px 'Georgia', Arial, sans-serif;
}

#thumbs img{
	cursor: pointer;
	float: left;
	margin: 5px 11px;
/*	padding: 4px;
*/	background-color: black;
	border: 4px solid black;
	/* css3 features */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow: -2px 2px 3px #666;
	-webkit-box-shadow: -2px 2px 3px #666;
	box-shadow: -2px 2px 3px #666;
	
}

/********* SCROLLABLE *********/
div.scrollable{
	position: relative;
	/* required*/
	overflow:hidden;
	width:1700px;
	height: 550px;
	top: 176px;
/*	left:0px;*/
}

/* needs to be huge and fixed. holds the content */
div.scrollable div.frame{
	width: 20000em;
	position: absolute;
	height: 550px;
}

/* single item , must bve floated for horiz. scrolling*/
div.frame div.page{
	float:left;
	width: 1700px;
	height: 550px;
	margin: 0;
}

div.page div.inner_page{
	width:900px;
	height:550px;
	margin: 0 400px;
	position: relative;
}