@charset "UTF-8";
/* CSS Document */

body {
	background: url(Images/BG4.PNG) #593e1a repeat-x top center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 0;
}

body, html {
	height: 100%;
}

a {
	text-decoration: none;
}

h1 {
	font-size: 4em;
	color: #FFF;
}

h2 {
	font-size: 2em;
	color: #CCC;
	padding: 0;
	margin: 20px 0 0 0;
	line-height: 1em;
	position: absolute;
	right: 0px;
	bottom: 0px;
	display: inline;
}

#container{
	width:768px;
	margin: auto;
	padding: 0 0 1.8em 0;
	position: relative;
}
	
#shadow {
	background: url(Images/shadow.png) center repeat-y;
	height: 50%;
	width: 800px;
	z-index: 0;
	margin: 0 auto;
	top: 175px;
	position:absolute;
	margin-left:-15px;
}

/* Header */
	
#header {
	width: 30%;
	height:75px;
	background: none;
	z-index: 1;
	top: 80px;
	float:left;
	}
	#header a {
		width: 239px;
		height: 85px;
		margin: 5px 0 0 -20px;
		display: block;
		text-indent: -99999px;
		background: url(Images/arturos.png) no-repeat;
	}

/* Navigation */

#navigation{
	width: 70%;
	height:75px;
	background: none;
	color:#000;
	float:right;
	position: relative;
}

#navigation ul {
	margin: 5px 0 0 0;
	padding: 0;
	list-style: none;
	position: absolute;
	bottom: 0;
	right: 0;
}

#navigation li {
	float: left;
}

#navigation li + li {
	border-left: 1px #FFF solid;
}

/*#navigation li a {
	padding: 2px 1em;
	display: block;
	color: #68abce;
	font-size: 14px;
	text-transform: uppercase;
}

#navigation li a:hover {
	color: #FFF;
}*/									/* it's always sad to see code go :'( */

#navigation li a {
	height:18px;					/* all pics in the nav are 18px tall, one day they will grow up and be 25px tall */
	margin: 0 12px;					
	display: block;					
	text-indent: -99999px;			/* text? what text? */
}

#navigation #nav-team a 			{ background: 0 0 url(Images/team.png) no-repeat; width:49px;}		/* only variable in this mess is each pic's width */
#navigation #nav-team a:hover 		{ background: 0 -18px url(Images/team.png) no-repeat;}				/* good ol' offset rollovers, good riddance 5 pages of javascript! */

#navigation #nav-services a 		{ background: 0 0 url(Images/services.png) no-repeat; width:88px;}
#navigation #nav-services a:hover 	{ background: 0 -18px url(Images/services.png) no-repeat;}

#navigation #nav-products a 		{ background: 0 0 url(Images/products.png) no-repeat; width:91px;}
#navigation #nav-products a:hover 	{ background: 0 -18px url(Images/products.png) no-repeat;}

#navigation #nav-photos a 			{ background: 0 0 url(Images/photos.png) no-repeat; width:69px;}
#navigation #nav-photos a:hover 	{ background: 0 -18px url(Images/photos.png) no-repeat;}

#navigation #nav-contact a 			{ background: 0 0 url(Images/contact.png) no-repeat; width:77px;}
#navigation #nav-contact a:hover 	{ background: 0 -18px url(Images/contact.png) no-repeat;}


/* Content */

#mainContent{
	width:748px;
	min-height:380px;
	background-color: #FFF;
	padding: 10px;
	z-index: 1;
	top: 155px;
	clear: both;
}

/* Biographies */

#biomain {
	width: 333px;
	min-height: 300px;
	float: right;
	background-color: #999;
	}
	.bio {
		width:400px;
		height:100px;
		background-color:#EFEFEF;
		margin: 5px 0;
		padding:4px;
		}
	.minibio{
		width:316px;
		height:16px;
		background-color:#68abce;
		color:#FFF;
		font-size: 14px;
		float:right;
		font-weight: bold;
		padding-left:4px
	}

/* Tagline */

#tagline {
	width:768px;
	height:40px;
	float:right;
	/* text-align:right; */
	}
	#tagline h2 {
		width: 215px;
		height: 23px;
		display: block;
		text-indent: -99999px;
		background: url(Images/hairdesigns.png) no-repeat;
	}

/* Slide Show */

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

/* Photo Gallery */

#photos p {
	margin: 0;
	/* padding: 7px 0 7px 0; */
}

#photos a {
	outline: none;	
}

#photos a img {
	border: 1px solid #BBB;
	padding: 2px;	
	margin: 2.9px; 				/* 3px breaks some browsers =( */
}

/* Services */

#basic-accordian{
	border:5px solid #EEE;
	padding:5px;
	width:350px;
	/* position:absolute;
	 left:50%;
	 top:50%;
	margin-left:-175px;
	z-index:2;
	margin-top:-100px; */
}

.accordion_headings{
	padding:5px;
	background:#68abce;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#287da8;
}

.accordion_child{
	padding:15px;
	background:#EEE;
}

.header_highlight{
	background:#5297bb;
}

.red .accordion_headings{
	background:#ff0000;
}

/* Products */

.productlogo {
	position: static;
	z-index: 5;
}

/* Footer */

* {
	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, #wrap {
	height: 100%;
}

body > #wrap {
	height: auto;
	min-height: 100%;
}

#main {
	padding-bottom: 30px;		/* must be same height as the footer */
}

#footer {
	position: relative;
	margin-top: -30px;			/* negative value of footer height */
	height: 30px;
	clear: both;
	text-align: center;
	color: #FFF;
} 

/* ClearFix */					/* this makes the footer sticky in Chrome and other browsers */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */