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



/*  <!-- 1. Index Branding -->  */

div.branding {
	background:url('images/loading_red.gif') no-repeat 50% 50%;
		text-align:center;
}

div.branding h1, div.branding h2, div.branding h3, div.branding form {
	display:block;
}


div.content {
	height:0px;
	width:0px;
	text-indent:-9999px;
	overflow:hidden;
}

h2#piping {
	position:absolute;
	top:1px;
	left:136px;
	width:468px;
	height:568px;
	border-radius: 4em;
	-moz-border-radius:4em;
	-webkit-border-radius:4em;
	text-indent:-9999px;
	overflow:hidden; } /* hides branding h1 */
	
h2.piping_hide {
	background:url('images/p01.png') repeat-x;
	opacity:0;

}
	
h2.piping {
	-webkit-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
	background : url('images/p01.png');
	opacity:1;
}
	
@-webkit-keyframes piping {
	0% { background-position: 0% 0%; }
	50% { background-position: 0% 100%; }
	100% { background-position: 0% 0%; }
}

@-moz-keyframes piping {
	0% { background-position: 0% 0%; }
	50% { background-position: 0% 100%; }
	100% { background-position: 0% 0%; }
}

@keyframes piping {
	0% { background-position: 0% 0%; }
	50% { background-position: 0% 100%; }
	100% { background-position: 0% 0%; }
}


h2#piping {
     -webkit-animation: piping 20s infinite;
	 -moz-animation: piping 20s infinite;
	 animation: piping 20s infinite;
}

div.branding a {  /* creates link to index over logo */
	position:relative;
	display:block;
	text-indent:-9999px;
	background : url('images/m01.png') no-repeat ;
	left:135px;
	width:470px;
	height:570px;

}

form#rope legend {
	text-indent:-9999px;
	height:0px;
	overflow:hidden;
}

form#rope input {

	position:absolute;
	z-index:5000;
	cursor:pointer;
	top:-60px;
	left:40px;
	width:34px;
	height:310px;
	text-indent:-9999px;
	border:none;
	background:url('images/rope.png') no-repeat 0% 100%;
	-webkit-transition: height 0.2s ease-in-out;
	-moz-transition: height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;

}

form#rope input:hover, form#rope input:focus {
	height:330px;
	-webkit-transition: height 0.2s ease-in-out;
	-moz-transition: height 0.2s ease-in-out;
	transition: height 0.2s ease-in-out;
}

form#rope input:active {
	height:440px;
	-webkit-transition: height 0.01s ease-in-out;
	-moz-transition: height 0.01s ease-in-out;
	transition: height 0.01s ease-in-out;
}


div.branding h3 {
	background : url('images/Boutique_Hair_Salon.gif') no-repeat 50% 50%;
	position:absolute;
	top:596px;
	height:60px;
	width:740px;
	overflow:hidden;
	
}

div.branding h3 span {
	background : url('images/Boutique_Hair_Salon.png') no-repeat 50% 50%;
	position:absolute;
	left:0px;
	height:60px;
	width:740px;
	text-indent:-9999px;
}


div.content img#stamp {
	position:absolute;
	top:545px;
	margin-left:60px;

}

div.content img#map_pin {
	position:absolute;
	top:727px;
	margin-left:467px;

}