/* ======== */
/* = Page = */
/* ======== */

#page_outer {
    /* Content height */
    height: 600px;
    /* Content height divided by -2 */
/*    margin-top: -300px;*/
}


html, body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.centerVertical {
	margin: 0px;
	padding: 0px;
	border: none;
	width: 100%;
	height: 100%;
	vertical-align: middle;
/*border: solid red 1px;*/
}
.centerHorizontal {
	text-align: center;
}


/* Left Column (both must have the same value) */
#colLeft_outer { width: 390px }
#content_outer { margin-left: 390px; }
/* Right Column (both must have the same value) */
#colRight_outer { width: 0px }
#content_outer { margin-right: 0px; }

#page { text-align: center; }
#page_inner {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 775px;
	text-align: left;
/*	font-family: 'Lucida Grande','arial','sans-serif';*/
	font-family: 'Tahoma', 'Geneva', 'sans-serif';
	font-size: 9px;
	color: #414c4b;
}
a {
	color: #414c4b;
	text-decoration: none;
}
h1 { display: none; }
h2, h3 {
	margin: 0px;
	padding: 0px;
}
h2, h3,
.directions,
.policy_link,
#feature_copy,
.bio {
	/* fixes fading bug in IE */
	background-color: white;
}
h2, h3, #navMain li a, .employee_gallery .title {
	text-transform: uppercase;
	font-size: 17px;
	font-weight: normal;
/*	color: #414c4b;*/
}
.employee_gallery .title,
h2 .side, h3 .side {
	font-size: 12px;
}
a img {
	border: none;
}


/* ========== */
/* = header = */
/* ========== */

/* Example Configuration 1 */
/*#navMain { padding-left: 7px; }*/
#navMain ul, #navMain ul li, #navMain a { height:23px; }
#navMain ul {
	float: right;
	width: auto;
}
#navMain ul li a {
	text-indent: 0px;
	display: inline;
}
/*#navMain li { width:20px;}*/
/*#navMain li a:hover, #navMain li { background-position:center center; }
#navMain li#nav-brands { background-image:url(../images/plus_gray_small.gif); }
#navMain li#nav-design { background-image:url(../images/plus_blue_small.gif); }
#navMain li#nav-software { background-image:url(../images/plus_orange_small.gif); }
#navMain li#nav-realty { background-image:url(../images/plus_green_small.gif); }
*/

#navMain {
	position: absolute;
	top: 20px;
	right: 25px;
/*	left: 200px;*/
}
#navMain li a {
	padding: 0px;
	padding-left: 10px;
}
a:hover,
a.selected,
.page-about #nav-about a,
.page-services #nav-services a,
.page-products #nav-products a,
.page-gallery #nav-gallery a,
.page-team #nav-team a,
.page-location #nav-location a,
.employee_gallery .title,
h2 .side, h3 .side {
	color: rgb(240, 103, 166);
}

#logo {
	top: 520px;
}
#logo img {
	border: none;
}

#logo,
h2,
.copy,
.page-team #feature_img,
.page-location #map {
	position: absolute;
	left: 22px;
/*	width: 215px;*/
	width: 252px;
}
.page-location #map {
	height: 346px;
	overflow: hidden;
}


/* ============= */
/* = Galleries = */
/* ============= */
.employee_gallery {
	height: 432px;
}
.employee_gallery .employee_outer {
	padding-top: 8px;
	padding-bottom: 8px;
	position: relative;
}
.employee_gallery .employee {
	position: relative;
	width: 360px;
	height: 92px;
}
.employee_gallery h3,
.employee_gallery .bio {
	position: absolute;
	left: 100px;
}
.employee_gallery h3 {
	top: 7px;
}
.employee_gallery .title {
	position: absolute;
	top: 9px;
	left: 290px;
}
h2 .side, h3 .side {
	position: absolute;
/*	float: right;*/
/*	margin-top: -17px;*/
	top: 3px;
	left: 174px;
	background-color: white;
}
.employee_gallery .bio {
	top: 30px;
	height: 60px;
	overflow: hidden;
}
.employee_gallery .title_rows_2 .bio {
	top: 42px;
	height: 48px;
}
.employee_gallery .thumbnail {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100px;
/*	height: 100px;*/
	height: 108px;
	overflow: hidden;
}

.page-gallery .photo_gallery {
	height: 380px;
}


/* =============== */
/* = scrollVerts = */
/* =============== */
.scrollVert {
	/* This should be overflow: auto, but you can't remove scrollbars in Safari */
	overflow: hidden;
	overflow-y: auto;
	overflow-x: hidden;
	display: block;
	width: 100%;
}


/* ================= */
/* = Page Specific = */
/* ================= */

.page-about h2 { top: 205px; }
.page-about .copy { top: 230px; }
.page-about #content_inner {
	margin-left: -100px;
	height: 600px;
	background: url('../images/about.jpg') left 50px no-repeat;
}

.page-team #content_inner {
	margin-left: -8px;
}
.page-team h2 {
	top: 428px;
}
.page-team #feature_img { top: 43px; }
.page-team .copy {
	top: 450px;
	width: 266px;
	height: 61px;
	line-height: 12px;
}
.page-team h2 .side {
	left: 154px;
}
.page-team .gallery_outer {
	padding-top: 100px;
	width: 376px;
}
.page-team h3 .side {
	left: 154px;
	width: 104px;
	text-align: right;
}
.page-team h3 .stylist {
	left: 188px;
	width: 70px;
}

.page-services .overall,
.page-products .overall {
	position: absolute;
	top: 52px;
	left: 104px;
	width: 600px;
}
.page-services .overall h3,
.page-products .overall h3 {
	padding-bottom: 0px;
}
.page-services .overall p,
.page-products .overall p {
	margin-top: 6px;
}
.page-services h3,
.page-products h3 { padding-bottom: 7px; }
.page-services .service,
.page-products .product {
	padding-top: 12px;
	line-height: 12px;
}
.page-services .service p,
.page-services .spa p,
.page-products .product p,
.page-products .skin p {
	margin: 0px;
	margin-bottom: 12px;
}
.page-services .inline_price,
.page-products .inline_price {
	padding-left: 20px;
}
.page-services .price,
.page-products .price {
	position: absolute;
	left: 100px;
}
.page-services .scrollVert,
.page-products .scrollVert {
	position: relative;
}
.page-services #colLeft_inner,
.page-products #colLeft_inner {
	padding-right: 50px;
	padding-left: 102px;
}
.page-services #content,
.page-products #content {
	padding-right: 96px;
	padding-left: 52px;
}


.page-services #colLeft_inner,
.page-services #content {
	padding-top: 140px;
}
.page-services .scrollVert {
	height: 300px;
}
.page-services .desc { padding-top: 0px; }


.page-products #colLeft_inner,
.page-products #content {
	padding-top: 105px;
}
.page-products .scrollVert {
	height: 324px;
}
.page-products .desc { padding-top: 12px; }


.page-gallery h3 {
	position: relative;
	overflow: hidden;
	width: 256px;
	/* this height is overridden for IE because of it's broken box model */
	height: 20px;
	margin-top: 3px;
	padding-bottom: 3px;
}
.page-gallery h3 .side {
	left: 180px;
}
.page-gallery .galleries_outer {
	position: absolute;
/*	top: 345px;*/
	top: 475px;
	left: 11px;
}
.page-gallery .galleries {
	width: 275px;
/*	height: 156px;*/
	height: 26px;
}
.page-gallery .image_display {
	position: absolute;
	width: 400px;
	height: 400px;
	top: 55px;
	left: 0px;
	text-align: center;
}
.page-gallery #content { padding-top: 100px; }
.page-gallery .gallery {
	margin-left: auto;
	margin-right: auto;
}
.page-gallery .gallery_outer{
	position: relative;
	/* width should really be 285px but we need to leave space for the scroll bar, it is reset by scrollVert */
	width: 302px;
	margin-left: auto;
	margin-right: auto;
}
.page-gallery .gallery .img_holder {
	float: left;
/*	display: inline;*/
	margin: 10px;
	width: 75px;
	height: 75px;
	overflow: hidden;
	text-align: center;
/*	padding-left: 37.5px;*/
}
.scrollVert, .img_holder {
/*	border: solid red 1px;*/
}
/*.page-gallery .gallery .img_holder_inner {
	display: none;
}
*/
.page-gallery .gallery .img_holder img {
/*	margin-top: 10px;*/
/*	margin-left: -100%;*/
}
/*.page-gallery .gallery .mask {
	position: absolute;
	border: solid blue 10px;
	width: 55px;
	height: 55px;
	z-index: 2;
}
*/
.page-location #content_inner,
.page-gallery #content_inner {
	position: relative;
	left: -24px;
	text-align: center;
}

.page-location h2 { top: 375px; }
.page-location #map { top: 20px; }
.page-location #colLeft .copy { top: 400px; }
.page-location #content { padding-top: 140px; }
.page-location .policy {
	text-align: left;
	margin-top: 20px;
}
.page-location .policy h3 { font-size: 13px; }
.page-location .policy p { margin-top: 3px; }
.page-location #salon {
	position: absolute;
	top: 50px;
	left: 25px;
}
.page-location .directions,
.page-location .policy_link {
	padding-top: 10px;
	text-transform: uppercase;
	font-size: 1.4em;
}