@import url("ClassFont.css");
@import url("FormStyle.css");



/* Universal Style */
body, div, p, h1, h2, ul, li, ol, form, input, textarea, select, option,  {
margin:0;
padding:0;
}

h1{
color:#CCC;
font-size:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:20px 70px 20px 20px;
}
h2{
color:#CCC;
font-size:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:20px 70px 20px 20px;
}
/* Layout Style */

body{
margin:0 auto;
background:url(../images/bg.jpg) repeat-x;
background-color:#787878;
}

#MasterBox{
width:822px;
margin:0 Auto;
padding:0;
}

#LogoTopNavBox{
width:822px;
height:136px;
}
/*--- Nav Style ---*/
	#TopNav{
	background:url(../images/LogoTopNav.jpg) no-repeat;
	height:136px;
	margin:0 auto;
	padding:0;
	}  		
		#TopNav li{
		float:left;
		list-style:none;		
		margin:0;
	  padding:0;
		}		
		#TopNav a{
		display:block;
		height:136px;
		}		
		#Logo, #TopNavHome, #TopNavProcedures, #TopNavGallery, #TopNavContact{
		height:136px;		
		}
		#Logo a:hover, #TopNavHome a:hover, #TopNavProcedures a:hover, #TopNavGallery a:hover, #TopNavCosts a:hover, #TopNavContact a:hover{
		background:url(../images/LogoTopNavSwap.jpg);
		}
		#Logo a{
    width:296px;
		}
		#Logo a:hover{
		background-position:0;
		}
		#TopNavHome a{
    width:92px;
		}
		#TopNavHome a:hover{
		background-position:-296px 0;
		}
		#TopNavProcedures a{
		width:101px;
		}
		#TopNavProcedures a:hover {
		background-position:-388px 0;
		}
		#TopNavGallery a{
		width:107px;
		}
		#TopNavGallery a:hover {
		background-position:-489px 0;
		}
		#TopNavCosts a{
		width:75px;
		}
		#TopNavCosts a:hover {
		background-position:-596px 0;
		}
		#TopNavContact a{
		width:151px;
		}
		#TopNavContact a:hover {
		background-position:-671px 0;
		}

#ProcNavHeroBox{
margin:0;
position:relative;
width:822px;
overflow:hidden;
}

	 #ProcNavLeft{	
	 background:url(../images/ProcNavLeft.gif); 
	 width:52px;
	 height:236px;
	 float:left;
	 }
	 #ProcNavHero{
	 background:url(../images/ProcNavHero.jpg);
	 width:721px;
	 float:left;	
	 height:236px;
	 }	 
	 		#ProcNav{			
			margin:20px 0 0 30px;
			padding:0;
			}
			#ProcNav a{
			display:block;
			width:200px;
			height:27px;
			}		
			#ProcNav li{
			list-style:none;		
			}		
			#ProcNav a:hover{
			background:url(../images/ProcNavHero_swap.jpg);
			}		
			#ProcNavFussHair a:hover{
			background-position:-30px -20px;
			}
			#ProcNavFueHair a:hover{
			background-position:-30px -47px;
			}
			#ProcNavDensityHair a:hover{
			background-position:-30px -74px;
			}
			#ProcNavHairLoss a:hover{
			background-position:-30px -101px;
			}
			#ProcNavArtisticHair a:hover{
			background-position:-30px -128px;
			}		
			#ProcNavCrownHair a:hover{
			background-position:-30px -155px;
			}		
			#ProcNavHairTrans a:hover{
			background-position:-30px -182px;
			}			 
	 #HeroRight{
	 background:url(../images/HeroRight.gif);
	 width:49px;
	 height:236px;
	 position:absolute;
	 top:0;
	 right:0;
	 }
	 
	 
#ContentBox{
background:url(../images/Content_bg.gif) repeat-y;
width:822px;
float:left;
display:table;
}

	#MiniContactBox{
	width:297px;
	float:left;
	}
	#MiniContactBox p{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#CCC;
	margin:0 10px 0 60px;
	}
	  #MiniContactForm{
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;		
		margin:0 0 0 75px;
		}
		  
	 	#MiniContactForm label{
		width:60px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:11px;
		color:#CCC;
		display:block;		
		float:left;
		}
		#MiniContactForm input{
		width:145px;
		background:#99cc00;
		height:16px;		
		margin:0 0 5px 0;
		border-style:hidden;
		border:1px solid white;
		}
		#MiniContactForm textarea{
		width:145px;
		background:#99cc00;
		height:70px;		
		margin:0 0 5px 0;
		border-style:hidden;
		border:1px solid white;
		}
		#MiniContactForm .SubmitButton{
		width:63px;
		height:16px;
		margin:5px 0 0 60px;
		}		
		
		#OfficePhoto{
		background:url(../images/Office.gif);
		width:190px;
		height:178px;
		margin:30px 0 10px 10px;
		}
	
	#Content{
	width:525px;
	float:left;
	}

/*-- Body Title --*/	
#Home #QuickContactPageTitle{
background:url(../images/QuickContactWelcomeTitle.gif);
width:822px;
height:58px;
float:left;
}

#Procedures #QuickContactPageTitle{
background:url(../images/QuickContactProceduresTitle.gif);
width:822px;
height:58px;
float:left;
}
#Gallery #QuickContactPageTitle{
background:url(../images/QuickContactGalleryTitle.gif);
width:822px;
height:58px;
float:left;
}
#Costs #QuickContactPageTitle{
background:url(../images/QuickContactCostsTitle.gif);
width:822px;
height:58px;
float:left;
}
#TitleBlank #QuickContactPageTitle{
background:url(../images/QuickContactBlankTitle.gif);
width:822px;
height:58px;
float:left;
}
#Contact #QuickContactPageTitle{
background:url(../images/QuickContactContactTitle.gif);
width:822px;
height:58px;
float:left;
}

/*------- Footer Style ----*/
#FooterHomeBox{
background:url(../images/Footer_bg.gif);
width:822px;
float:left;
}
		#FooterHomeTop{
		background:url(../images/FooterTop.gif) no-repeat;
		font-size:12px;
		height:20px;
		}
		#FooterHome{
		width:822px;
		display:table;
		float:left;
		}
				#FooterHome ul {
				padding:0 55px 10px 55px;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:10px;
				color:#CCC;				
				text-align:center;
				}
				#FooterHome li {
				padding:5px;
				display:inline;				
				}
				#FooterHome a {
				font:11px Verdana, Arial, Helvetica, sans-serif;
				color:#ccc;
				}
				#FooterHome a:hover {
				color:#99cc00;
				}
				#FooterHome p {
				color:#ccc;
				font:11px verdana, Arial, Helvetica, sans-serif;
				padding:0 55px 10px 55px;
				text-align:center;
				}
						
		#FooterHomeBottom{
		background:url(../images/FooterBottom.gif);
		height:57px;	
		width:822px;
		clear:both;
		}
		
#Empty{
margin:0 auto;
width:822px;
height:500px;
}		

/******class style *********/
.GalleryImg{
border:1px solid #fff;
margin:0 0 10px 25px;
}

#Parity{
display:none;
}