@import "stylists.css";

body {
	background: url(../images/bkgd-gradient.png) repeat-x top;
	font-family: Calibri, Helvetica, Arial, sans-serif;
	overflow-x: hidden;
	max-height: 660px;
	margin: 0;
}
h1 {
	font-size: 1.2em;
}
h2 {
	font-size: 1.2em;
	font-style: normal;
	margin: 5px;
	text-align: center;
}
h3 {
	font-size: 1.1em;
	font-weight: strong;
	color: #000;
}
a:focus {
	outline: 0;
}
#wrap {
	position: relative;
	clear: both;
	width: 960px;
	height: 850px;
	top: -80px;
	left: -480px;
	margin: 0px 0px 0px 50%;
	padding: 0;
	overflow-x: visible;
}
ul.nav {
	width: 600px;
	position: absolute;
	top: 0px;
	left: 170px;
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 50;
}
	ul.nav li {
		display: inline;
		position: relative;
		float: left;
	}
	li#hometab {
		z-index:1;
	}
		#hometab a {
			display:block;
			position: absolute;
			width: 310px;
			height: 270px;
			left: -220px;
			top: 1px;
			margin: 0;
			padding: 0;
			z-index: 100;
			text-indent: -9999px;
			/*background-color: #CCC;
			opacity: .4;*/
		}
			#hometab-bkgd {
				display:block;
				position: absolute;
				width: 450px;
				height: 325px;
				left: -240px;
				top: 1px;
				margin: 0;
				padding: 0;
				background: url(../images/zzlogo-alt3.png) no-repeat top;
				z-index: 99;
			}
			#hometab-bkgd-bit {       /*not actually nested in ul.nav*/
				display:block;
				position: absolute;
				width: 450px;
				height: 325px;
				left: -70px;
				top: 1px;
				margin: 0;
				padding: 0;
				background: url(../images/zzlogo-alt3-bkgd.png) no-repeat top;
				z-index: 0;
			}
	li#servicestab {
		display:block;
		position: relative;
		width: 100px;
		height: 50px;
		top: 175px;
		left: 280px;
		z-index:2;
	}
		#servicestab a {
			display:block;
			position: relative;
			width: 100px;
			height: 50px;
			margin: 0;
			padding: 0;
			background: url(../images/tabs-master.png) no-repeat top left;
		}
	li#styliststab {
		display:block;
		position: relative;
		width: 100px;
		height: 50px;
		top: 175px;
		left: 325px;
		z-index:3;
	}
		#styliststab a {
			display:block;
			position: relative;
			width: 100px;
			height: 50px;
			margin: 0;
			padding: 0;
			background: url(../images/tabs-master.png) no-repeat top center;
		}
	li#contacttab {
		display:block;
		position: relative;
		width: 100px;
		height: 50px;
		top: 175px;
		left: 365px;
		z-index:4;
	}
		#contacttab a {
			display:block;
			position: relative;
			width: 100px;
			height: 50px;
			margin: 0;
			padding: 0;
			background: url(../images/tabs-master.png) no-repeat top right;
		}
		#servicestab .selected, #servicestab a:hover {
			background: url(../images/tabs-master.png) no-repeat bottom left;
		}
		#styliststab .selected, #styliststab a:hover {
			background: url(../images/tabs-master.png) no-repeat bottom center;
		}
		#contacttab .selected, #contacttab a:hover {
			background: url(../images/tabs-master.png) no-repeat bottom right;
		}
#header-right {
	display: block;
	position: absolute;
	top: 110px;
	right: 130px;
	width: 150px;
	height: 50px;
	z-index: 200;
	color: #999;
}
	#contact-brief {
		position: relative;
		float: right;
		font-size: 1em;
		font-weight: normal;
		line-height: .9em;
	}
		.address {
			/* float: right; */
			margin-bottom: 5px;
		}
		.address a {
			font-size: .9em;
			position: relative;
			font-style: normal;
			font-weight: bold;
			color: #777;
			text-decoration: none;
		}
			.address a:hover {
				color: #000;
				/*text-decoration: underline;*/
			}
.scroll {
	overflow-x: visible;
	overflow-y: visible;
	width: 1920px;
	height: 800px;
	left: -480px;
    position: relative;
    clear: left;
	margin: 0px 0px 0px 0px;
	top: 70px;
	z-index: 30;
}
	.scrollframe {
		width: 1920px;
		height: 800px;
		
	}
		.panel {
			background: url(../images/zz_frame-alt2.png) no-repeat top;
			width: 1920px;
			height: 800px;
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
		}
.pagewrap {
	display: block;
	position: relative;
	height: 360px;
	width: 650px;
	margin: 175px 0px 0px 600px;
	padding: 30px 35px 0px 35px;
	z-index: 300;
}
ul#homegal {
	height: 320px;
	width: 640px;
	margin: 0;
	margin-right:0;
	padding: 0px 0px 0px 0px;
	background: none;
}
	ul#homegal li {
		list-style: none;
		display: none;
		position: absolute;
		top: 41px;
		left: 40px;
		opacity: 1;
	}
	#homegal_select {
		position: absolute;
		cursor: none;
		top: 370px;
		left: 272px;
		display:inline;
		width: 19px;
		height: 19px;
		-webkit-border-radius: 9px;
		-khtml-border-radius: 9px;		
		-moz-border-radius: 9px;
		border: solid 1px #000;
	}
	ul.navigation {
		width: 450px;
		margin-left: 200px;
	}
		ul.navigation li {
		    display: inline;
			position: relative;
			float: left;
			width: 15px;
			height: 15px;
		    margin-right: 10px;
		}
			.navigation a {
				display:block;
				width:60%;
				height:60%;
				-webkit-border-radius: 4px;
				-khtml-border-radius: 4px;		
				-moz-border-radius: 4px;
				margin: 10px 0px 0px 3px; 
				background: #FF0074;
			}
				a.navigation .selected {
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 7px 0px 0px 0px;
					background: #FF0074;
				}
				.navigation a:hover {
					width: 100%;
					height: 100%;
					-webkit-border-radius: 7px;
					-khtml-border-radius: 7px;		
					-moz-border-radius: 7px;
					padding: 0;
					margin: 7px 0px 0px 0px;
					background: #FF0000;
				}
.style-profile {
	width: 520px;
	text-align: center;
	font-size: 15em;
	margin-top: 50px;
}
#pricing {
	font-weight: bold;
	font-style: italic;
	width: 520px;
	margin: 0 0 0 60px;
}	
	#servicesPage h2 {
		margin: 5px;
		padding: 0;
	}
	#servicesPage p {
		position: relative;
		float: left;
		width: 640px;
		font-size: .75em;
		font-weight: normal;
		font-style: normal;
		text-align: center;
		padding: 0;
		margin: 10px 0px 0px 0px;
	}
	.cuts {
		display: inline;
		list-style: none;
		float: left;
		width: 520px;
		height: 40px;
		padding: 0;
		margin: 0;
	}
		.cuts li {
			float: left;
			width: 90px;
			margin-right: 53px;
		}
	.services {
		list-style: none;
		float: left;
		width: 220px;
		height: 150px;
		padding: 0;
		margin: 0;
	}	
		.services li {
			margin-top: 10px;
		}
		.services span, .cuts span {
			float: right;
			font-weight: normal;
			font-style: italic;
		}		


#contact-left {
	position: relative;
	float: left;
	width: 220px;
}
	#storefront {
		display: block;
		position: relative;
		float: left;
		height: 340px;
		width: 220px;
		background: url(../images/salon/storefront.jpg) no-repeat top;
		padding: 0;
		margin: 0;
		border: 6px outset #ccc;
		-moz-border-radius: 22px;
		-webkit-border-radius: 22px;
	}
	#contact-right {
		position: relative;
		float: right;
		width: 400px;
	}
		#contact-body {
			width: 400px;
			position: relative;
			/* float: right; */
			font-size: .8em;
			text-align: center;
			padding: 0;
			margin: 0 0 10px 0;
		}
		#contact-body h3 {
			margin: 6px 0;
		}
			#contact-body h3 span {
				color: #7c7c7c;
			}
		#contact-body a {
			font-style: italic;
			font-size: 1.2em;
			font-weight: bold;
			color: #3c3c3c;
			text-decoration: none;
		}
			#contact-body a:hover {
				color: #000;
				text-decoration: underline;
			}
		
		#hours {
			position: relative;
			float: left;
			clear: both;
			width: 110px;
			height: 180px;
			font-size: .8em;
			color: #000;
			padding: 0;
			margin: 0 0 0 20px;
		}
			#days-list {
				list-style: none;
				width: 20px;
				heights: 170px;
				clear: both;
				float: left;
				padding: 0;
				margin: 0;
			}
				#days-list li {
					margin: 6px 0px 0px 0px;
				}
			#hours-list {
				list-style: none;
				width: 70px;
				heights: 170px;
				float: right;
				padding: 0;
				margin: 0;
			}
				#hours-list li {
					margin: 6px 0px 0px 0px;
					float: right;
				}
		#map a {
			display: block;
			position: relative;
			float: right;
			width: 220px;
			height: 180px;
			background: url(../images/zz-map.png) no-repeat top;
			padding: 0;
			/* margin: 8px 5px 5px 10px; */
			border: 5px outset #ccc;
			margin: 3px 0px 0px 5px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
		}
			#map a:hover {
				border: 5px outset #FF0074;
				margin: 3px 0px 0px 5px;
			}
#contact-info {
	position: relative;
	float: left;
	clear: both;
	width: 640px;
	height: 50px;
	list-style: none;
	margin: 1px 0px 0px 76px;
	padding: 0;
}
	#contact-info li {
		display: inline;
		margin: 0px 37px 0px 0px;
		padding: 0;
	}
	#contact-info a {
		font-size: .9em;
		font-weight: bold;
		color: #555;
		text-decoration: none;
	}
		#contact-info a:hover {
			color: #000;
		}

#footer {
	position: absolute;
	top: 710px;
	font-size: .8em;
	text-align: center;
	color: #888;
	width: 960px;
	z-index: 400;
	padding: 0;
	margin: 0;
}
	#footer a {
		color: #888;
		/* text-decoration: none; */
	}
		#footer a:hover {
			color: #000;
		}