/* 
	Ampersand:
	
	16/12/2008
	Tony Milne(Inlight Media)
*/


/* CONTAINERS -----------------------------------------------------*/

body
{	
	background: url(../images/background_wallpaper_repeat.jpg) repeat 0 0;
	text-align: center;		
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	color: #fff;
}

#wallpaper
{
	background: url(../images/background_wallpaper.jpg) repeat-x 0 top;
}

#page
{	
	width: 900px;
	margin: 0 auto;		
	text-align: left;	
}

#main
{
	margin: -15px 10px 20px 10px;

	/* http://www.dustindiaz.com/min-height-fast-hack/ */
	min-height:520px;
	height:auto !important;
	height:520px;

	background-repeat: no-repeat;
	background-position: top center;
}

body.home #main 	{ background-image: url(../images/background_home.png); }
body.standard #main	{ background-image: url(../images/background_standard_top.png); }
body.contact #main	{ background-image: url(../images/background_contact.png); }


/* HEADER ---------------------------------------------------------*/

#featuredAppointments
{
	margin-left: 20px;
}

#featuredAppointments a
{
	display: block;	
	width: 230px;
	height: 45px;	
	background: url(../images/btn_featured.png) no-repeat 0 0;
}

#featuredAppointments a:hover
{
	background-position: 0 -45px;	
}

#featuredAppointments a span
{
	display: none;
}

#header
{	
	margin: 50px 0 0 55px;	
	width: 780px;
}

body.home #header     { height: 380px; }
body.standard #header { height: 125px; }

#intro
{
	height: 270px;
	margin-top: 25px;
	margin-left: 15px;	
}

#intro p
{
	text-align: justify;
}

#header #intro h1 
{
	color: #ffffff;
	font-size: 140%;
	/* margin-top: 25px; */
	margin-bottom: 25px;
}

#header p
{
	width: 440px;
	margin-bottom: 1em;
}

#logo
{
	float: right;
	margin-right: 10px;	
}

body.home #logo 	{ margin-top: 10px; }
body.standard #logo	{ margin-top: 45px; }
body.contact #logo	{ margin-top: -80px; margin-right: 40px; }


/* MENU -----------------------------------------------------------*/

#menu
{	
	margin-top: 5px;
	margin-left: 55px;
	width: 780px;
	height: 40px;
	margin-bottom: 31px;
}

#menu ul
{
	display: block;	
	width: 780px;	
}

#menu ul li
{
	display: block;
	float: left;
	padding: 10px 0;
	margin-right: 20px;
}

#menu ul li a
{		
	display: block;
	float: left;
	background: url(../images/btn_icon.jpg) no-repeat 0 0;
	color: #666;
	padding-left: 15px;	
	height: 20px;
	line-height: 20px;
	
	text-decoration: none;
	text-transform: uppercase;
}

#menu ul li a.selected,
#menu ul li a:hover
{
	background-position: 0 -20px;
	color: #000;
}

a#contactLink
{
	position: relative;
	left: -15px;
	
	float: right;
	display: block;	
	width: 70px;
	height: 25px;	
	background: url(../images/btn_contact.png) no-repeat;
}

body.home a#contactLink		{ top: -420px; }
body.standard a#contactLink	{ top: -165px; }

a#contactLink:hover
{
	background-position: 0 -25px;
}

a#contactLink span
{
	display: none;
}


/* FOOTER ---------------------------------------------------------*/

#footer
{
	margin: 0 10px 70px 10px;
	color: #808080;
	text-align: center;
}

#footer p
{
	margin-bottom: 1em;
}

#footer a
{
	margin-left: 10px;
	margin-right: 10px;
	color: #808080;
}

#footer a:hover
{
	text-decoration: underline;
	color: #fff;
}

#footer a.inlight
{		
	margin: 0;	
	text-decoration: none;
}

#footer a.inlight:hover
{
	text-decoration: underline;
}


/* HOME -----------------------------------------------------------*/

a.findOutMore
{
	display: block;	
	color: #fff;
	padding-top: 20px;

}

a.findOutMore:hover
{
	background-position: 0 -20px;	
}

a.findOutMore span
{
	display: none;
}

#snapshots
{	
	background: url(../images/background_three_features.png) no-repeat top center;
	width: 900px;
	height: 335px;
}

#snapshots div
{
	width: 220px;
	
	float: left;
	
	margin-top: 48px;
	margin-left: 60px;
}

#snapshots div.first {}
#snapshots div.last {}

#snapshots div a
{
	display: block;
	margin-left: 10px;
	text-decoration: none;		
}

#snapshots div h2
{
	margin-bottom: 5px;	
	color: #cc0564;
	font-weight: normal;
	text-transform: uppercase;
	color: #555;
	font-weight: bold;
}

#snapshots div img
{
	margin-bottom: 10px;
}

#snapshots div p 
{
	margin-left: 10px;
	margin-right: 10px;
	color: #808080;
	font-size: 90%;

}


/* CONTENT --------------------------------------------------------*/

#content
{
	background: url(../images/backgroundStandard_middle.png) repeat-y top center;
}

#contentTop
{		
	background: url(../images/backgroundStandard_gradient.png) no-repeat top;
	width: 900px;
	min-height: 300px;
}

#contentBody
{	
	padding-top: 10px;
	margin-left: 75px;
	width: 500px;	
	text-align: justify;
}

#content h1
{
	float: left;
	font-size: 120%;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #A40046;
	width: 100%;
}

#content h2
{	
	margin-bottom: 0.5em;
	color: #A40046;
}

#content h3
{	
	margin-bottom: 0.5em;
	font-weight: normal; 
	color: #222222;
}

#content p
{
	margin-bottom: 1em;
	color: #4D4D4D;
	line-height: 1.3em;
}

#content a
{
	color: #4D4D4D;
}

#content a:hover
{
	color: #A40046;
}

#content ul
{
	margin: 0 0 1em 40px;
	list-style-image: url(../images/bullet.png);
	color: #4D4D4D;
}

#content ul li
{
	margin-bottom: 1em;
}

#content ol
{
	margin: 0 0 1em 40px;
	list-style-type: lower-roman;
	color: #4D4D4D;
}

#content ol li
{
	margin-bottom: 1em;
}

#contentBottom
{
	margin-bottom: 10px;
	background: url(../images/backgroundStandard_bottom.png) no-repeat center;	
	width: 880px;
	height: 100px;
}

#content img.clippedImage
{
	float: right;
	
	position: relative;
	z-index: 10;
	left: -10px; 
	
	width: 270px;
	height: 260px;
}

/* ABOUT US -------------------------------------------------------*/

#quickLinks a
{
	margin-left: 10px;
	margin-right: 10px;
}

#quickLinks a.first
{
	margin-left: 0;
}


/* STAFF PROFILES -------------------------------------------------*/


#staffLinks
{		
	display: block;
}

#staffLinks a
{
	margin-top: .5em;
	margin-bottom: .5em;
	float: left;
	display: block;
	background: url(../images/btn_icon.jpg) no-repeat 0 0;
	padding-left: 15px;
	height: 20px;
	line-height: 20px;
	width: 450px;	
}

#staffLinks a span
{
	text-decoration: none;
	color: #999;
}


#staffLinks a:hover
{
	background-position: 0 -20px;
}

#staffLinks a:hover span
{
	color: #a40046;
}

#staffProfiles 
{
	margin-top: 20px;
}

.staffProfile
{
	margin-top: 30px;
	clear: both;
}

#staffProfiles div
{
	width: 700px;
}

#staffProfiles p
{
	margin-left: 220px;
}

#staffProfiles h2
{
	margin-left: 220px;
}

img.portrait
{
	position: relative;
	display: block;
	float: left;
	margin-right: -20px;
	margin-bottom: 20px;
}


/* CONTACT FORM ---------------------------------------------------*/

#contact
{
	height: 350px;
	
	margin-top: 100px;
	margin-left: 70px;
}

#contact h1
{
	font-size: 140%;
	color: #fff;
	margin-bottom: 30px;
}

#contact #contactForm, #contact #thankyouMessage
{
	margin-left: 10px;
	float: left;
	width: 350px;
}

#contact #thankyouMessage p
{
	width: 390px;
}

#contact #contactDetails
{
	float: left;
	width: 380px;
	line-height: 150%;
}

#contact #contactDetails div.office {
	float: left;
	width: 150px;
	margin-right: 30px;
}

#contact #contactDetails a
{
	float: left;
	color: #fff;
	margin-top: 20px;
}

#contact #contactDetails a:hover
{
	color: #eee;
}

#contact #contactDetails p.email {
	float: left;
	margin-top: 20px;
	padding-right: 5px;
	font-weight: bold;
}


#contact label
{	
	width: 700px; 	
	margin-top: 10px;
	display: block;
	float: left;
	clear: both;	
}

#contact label.error
{	
	width: 270px;			
	margin-top: 0;
	display: inline;
	float: right;
	clear: right;
	color: #cccccc;
}

#contact span.labelText
{
	position: relative;	
	float: left;
	width: 100px;	
}

#contact input.text
{
	display: inline;
	float: left;
	width: 210px;
}

#contact textarea
{			
	display: inline;
	float: left;
	width: 210px;
	height: 85px;	
}

#contact input.submit
{	
	width: 90px;
	height: 30px;
	margin-top: 10px;
	margin-left: 98px;
	float: left;
	border: none;
	background: transparent url(../images/btn_submit.png) 0 0 no-repeat;
	color: #fff;
	cursor: pointer;	
}

#contact input.submit:hover
{
	background-position: 0 -30px;
}

#thankyouMessage
{	
	margin-top: 10px;
	margin-left: 10px;
	
	display: none; /* this is displayed by javascript on form submit */
}

#thankyouMessage p
{
	margin-bottom: 1em;
}


/* UTILITY CLASSES ------------------------------------------------*/

.hidden
{
	position: absolute;
	left: -9999px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}

.clearer
{
	clear: both;
	height: 1px;
	overflow: hidden;
	margin-top: -1px;
	font-size: 1px;
	line-height: 1px;
}