/* v1.0 | 20080212 | http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

/* MISC */
.clear { clear: both; }
	.clear hr { display: none; }
	hr.clear { visibility: hidden; }
	
.right { float: right; }
	img.right { margin: 0 0 10px 10px; }

.left { float: left; }
	img.left { margin: 0 10px 10px 0; }
	
.indent { margin-left: 10px; }
		
.byline {
	text-align: right;
	font-style: italic;
	border-top: 1px solid #8f8f8f;
	padding-top: 10px;
}

/* FORM ERROR STYLES */
#content #main div.error_notice {
	background-color: #f9f9f9;
	padding-bottom: 10px;
}

	#content #main div.error_notice p {
		background: #fbe3e4 url(images/exclamation.gif) 3px 50% no-repeat;
		padding: 5px 5px 5px 25px;
		color: #8a1f11;
		font-weight: bold;
		border: 1px solid #fbc2c4;
	}

	#content #main div.error_notice ul {margin-left: 25px;}
	
		#content #main div.error_notice ul li {
			background: url(images/bullet-red.gif) left 50% no-repeat;
			color: #8a1f11;
		}


/* BASE STYLES */
body {
	background: #11718e url(images/body-bg.png) top left repeat-x;
	font: 62.5% Arial, Helvetica, sans-serif;
}

p {
	font-size: 1.4em;
	line-height: 1.4em;
	color: #545454;
	margin-bottom: 15px;
}

ul { margin-bottom: 15px; }

	ul li {
		background: url(images/bullet-blue.png) 5px 5px no-repeat;
		padding-left: 16px;
		margin-bottom: 10px;
		font-size: 1.4em;
		color: #437381;
	}
	
	ul.noBullet li {
		background: none;
		padding-left: 0;
	}
	
		ul li ul {
			margin: 10px 0 20px;
			padding-left: 20px;
		}
	
			ul li ul li {
				font-size: 0.9em;
			}
	
	div#main.links ul li { color: #545454; }

a:link,
a:visited,
a:active {
	color: #e45e19;
	text-decoration: underline;
}

a:hover { text-decoration: none; }

#content {
	width: 850px;
	margin: 30px auto 0;
	padding: 35px 41px;
	position: relative;
}

	#content[id] {
		background: url(images/content-bg.png) top left repeat-y;
	}


/* HEADER STYLES */
	#content #header {
/*		background: url(images/hri-logo.png) 25px 10% no-repeat;	*/
		border-bottom: 9px solid #e45e19;
		height: 108px;
	}
	
		#content #header a#logo {
			float: left;
			margin-left: 18px;
		}
		
			#content #header a#logo img { border: none; }
	
		#content #header p#heading {
			background: url(images/header-h1.png) top left no-repeat;
			width: 620px;
			height: 28px;
			margin: 0 0 0 148px;
			overflow: hidden;
		}
		
			#content #header p#heading a {
				display: block;
				height: 28px;
				text-indent: -1000px;
			}
		
		#content #header p#sub_head {
			background: url(images/header-h2.png) top right no-repeat;
			font-size: 1.6em;
			font-weight: normal;
			text-transform: lowercase;
			color: #545454;
			width: 605px;
			height: 16px;
			overflow: hidden;
			text-indent: -1000px;
			margin: 3px 0 0 146px;
		}
		
		/* TOP-LEVEL NAVIGATION */
		#content #header ul {
			margin: 20px 0 0 0;
			padding: 0;
			float: right;
			height: 41px;
			width: 712px;
		}
		
			#content #header ul li {
				background: none;
				float: left;
				height: 41px;
				margin: 0 2px;
				padding: 0;
				position: relative;
			}
			
				#content #header ul li a {
					background-position: top left;
					background-repeat: no-repeat;
					display: block;
					height: 41px;
					width: 155px;
					padding: 0;
					overflow: hidden;
					text-indent: -1000px;
				}
			
			#content #header ul li a#home { width: 137px; }
			#content #header ul li a#submit { width: 87px; }
			
				#content #header ul li a#home { background-image: url(images/nav-home.png); }
				#content #header ul li a#hair_systems { background-image: url(images/nav-hair-systems.png); }
				#content #header ul li a#hair_transplants { background-image: url(images/nav-hair-transplants.png); }
				#content #header ul li a#topical { background-image: url(images/nav-topical.png); }
				#content #header ul li a#submit { background-image: url(images/nav-submit.png); }
				
				#content #header ul li:hover a#home,
				#content #header ul li a#home:hover,
				#content #header ul li:hover a#hair_systems,
				#content #header ul li a#hair_systems:hover,
				#content #header ul li:hover a#hair_transplants,
				#content #header ul li a#hair_transplants:hover,
				#content #header ul li:hover a#topical,
				#content #header ul li a#topical:hover,
				#content #header ul li:hover a#submit,
				#content #header ul li a#submit:hover { background-position: left -41px; }
				
				#content #header ul li a#home.current,
				#content #header ul li a#home.current:hover,
				#content #header ul li a#hair_systems.current,
				#content #header ul li a#hair_systems.current:hover,
				#content #header ul li a#hair_transplants.current,
				#content #header ul li a#hair_transplants.current:hover,
				#content #header ul li a#topical.current,
				#content #header ul li a#topical.current:hover,
				#content #header ul li a#submit.current,
				#content #header ul li a#submit.current:hover { background-position: left -82px; }
				
				
				/* SUB-NAVIGATION */
				#content #header ul li ul {
					border-top: 9px solid #e45e19;
					display: none;
					float: none;
					background-color: #235266;
					width: auto;
					height: auto;
					margin: 0;
					padding: 0;
					z-index: 99;
					position: relative;
				}
				
				#content #header ul li:hover ul {
					display: block;
					position: absolute;
					top: 41px;
					left: 0;
				}
				
					#content #header ul li ul li {
						height: 17px;
						width: auto;
						text-align: left;
						background: none;
						float: none;
						margin: 0;
						padding: 0;
						height: auto;
						border-bottom: 1px dashed #193d4d;
					}
					
						#content #header ul li:hover ul li a,
						#content #header ul li ul li a {
							font-size: 13px;
							font-weight: normal;
							background: none;
							height: auto;
							color: #fff;
							margin: 0;
							padding: 5px 15px;
							text-decoration: none;
							text-indent: 0;
						}
							
							#content #header ul li ul li a:hover {
								background-color: #193d4d;
							}
						

/* BREADCRUMBS STYLES */
	#content #breadcrumbs {
		height: 20px;
		padding-top: 5px;
		margin-bottom: 8px;
	}
	
		#content #breadcrumbs ul { margin: 0; }
		
			#content #breadcrumbs ul li {
				background: none;
				padding: 0;
				display: inline;
				color: #8f8f8f;
				font-size: 1.4em;
			}
			
				#content #breadcrumbs ul li.spacer {
					text-align: center;
					padding: 0 2px;
				}
			
				#content #breadcrumbs ul li a {
					color: #008db8;
					font-weight: bold;
					text-decoration: none;
				}
				
					#content #breadcrumbs ul li a:hover { color: #e45e19; }
	

/* MAIN STYLES */
	#content #main { }
	
		#content #main h1 {
			font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
			background-color: #e45e19;
			color: #e45e19;
			padding: 0 35px;
			margin-bottom: 23px;
		}
		
			#content #main h1 span {
				font-weight: bold;
				font-size: 3.3em;
				background-color: #fff;
				padding: 4px 10px;
			}
			
				#content #main h1 span.long {
					display: block;			
				}			
			
		#content #main h2 {
			font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
			color: #008db8;
			margin-bottom: 16px;
			margin-top: 20px;
		}
		
			#content #main h2 span {
				font-weight: bold;
				font-size: 2.4em;
				border-bottom: 6px solid #008db8;
			}
			
		#content #main h3 {
			font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 1.8em;
			color: #008db8;
			margin-bottom: 5px;
			margin-top: 20px;
			clear: both;
		}
		
		#content #main h4 {
			font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 1.4em;
			color: #008db8;
			float: left;
			margin-right: 10px;
		}
		
		#content #main div.surgery_info { width: 620px; }
	
	
		/* INDEX STYLES */
		#content #main #welcome {
			background: url(images/welcome-bg.jpg) top left no-repeat;
			height: 252px;
			width: 850px;
			padding-top: 1px;
			margin: 0 auto 25px;
			position: relative;
		}
		
			#content #main #welcome h1 {
				font-size: 4.8em;
				color: #e46828;
				background-color: transparent;
				width: 530px;
				margin: 14px 0 3px 327px;
				padding: 0;
				position: relative;
			}
			
			#content #main #welcome p {
				font-size: 1.4em;
				line-height: 1.2em;
				color: #fff;
				margin: 0 30px 0 330px;
			}
			
		#content #main #three_column_layout {
			width: 850px;
			margin: 0 auto;
		}
		
			#content #main #three_column_layout .three_column {
				width: 259px;
				float: left;
			}
			
			#content #main #three_column_layout #systems_column h2 { background: url(images/hair-systems-header.jpg) top left no-repeat; }
			
			#content #main #three_column_layout #transplants_column { margin: 0 36px; }			
				#content #main #three_column_layout #transplants_column h2 { background: url(images/hair-transplants-header.jpg) top left no-repeat; }
			
			#content #main #three_column_layout #topical_column h2 { background: url(images/topical-header.jpg) top left no-repeat; }
			
				#content #main #three_column_layout h2 {
					width: 259px;
					height: 167px;
					margin: 0 auto 25px;
					text-indent: -1000px;
					overflow: hidden;
				}
				
					#content #main #three_column_layout h2 a {
						display: block;
						height: 167px;
						text-indent: -1000px;
					}
				
				#content #main #three_column_layout p {
					padding: 0 5px;
				}
			
			
		/* BEFORE/AFTER PHOTO BOX STYLES */
		#content #main .photo_box {
			width: 404px;
			float: left;
			margin: 0 10px 35px;
		}
		
			#content #main .photo_box .image {
				float: left;
				width: 196px;
				height: 296px;
			}
			
				#content #main .photo_box .image[class] {
					margin: 0 3px 6px;
				}

			#content #main .photo_box .description {
				background-color: #d1eaf2;
				clear: both;
				margin: 0 2px;
				padding: 15px 12px;
			}
			
				#content #main .photo_box .description a:link,
				#content #main .photo_box .description a:visited,
				#content #main .photo_box .description a:active {
					font-weight: bold;
					color: #437381;
				}
				
				#content #main .photo_box .description a:hover {
					font-weight: bold;
					color: #545454;
				}
			
			
		/* TABLE STYLES */
		#content #main table {
			width: 100%;
			margin-bottom: 15px;
			color: #0f597f;
			font-size: 1.4em;
		}
		
			#content #main table tr th {
				background-color: #d2edf6;
				font-weight: bold;
				padding: 10px 0;
				border-bottom: 3px solid #008db8;
			}
			
			#content #main table tr td {
				text-align: center;
				padding: 5px 0;
			}
			
				#content #main table tr .first_row {
					border-right: 3px solid #008db8;
					font-weight: bold;
				}
			
			#content #main table tr.odd td { background-color: #d2edf6; }
			
			#content #main table tr.even td { background-color: #e9f6fb; }
			
			
		/* FORM STYLES */
		#content #main form {
			width: 80%;
			margin: 30px auto;
		}
		
			#content #main form .form_field {
				clear: both;
				margin-bottom: 15px;
			}
			
				#content #main form .form_field label {
					font-weight: bold;
					width: 270px;
					float: left;
					font-size: 1.8em;
					color: #008db8;
					margin-top: 3px;
				}
				
					#content #main form .form_field label span { font-size: 0.8em; }
				
				#content #main form .form_field input,
				#content #main form .form_field select {
					font-size: 1.4em;
					color: #008db8;
					background-color: #d2edf6;
					border: 1px solid #008db8;
					padding: 3px;
					width: 200px;
				}
					
					#content #main form .form_field input.radio {
						background: none;
						border: none;
					}
				
				#content #main form .form_field textarea {
					font-size: 1.8em;
					color: #008db8;
					background-color: #d2edf6;
					border: 1px solid #008db8;
					padding: 5px;
					width: 100%;
					height: 175px;
				}
				
				#content #main form .form_field.short_field { clear: none; }
				
					#content #main form .form_field.short_field label { width: 70px; }
					
					#content #main form .form_field.textarea label { width: 100%; margin-bottom: 3px; }
					
				#content #main form .form_field.attachment { clear: none; width: 40%; }
				
					#content #main form .form_field.attachment label { margin-bottom: 3px; }
					
					#content #main form .form_field.attachment input { margin-bottom: 10px; }
					
				#content #main form .form_field.preference { }
				
					#content #main form .form_field.preference label { width: 130px; }
					
					#content #main form .form_field.preference ul { margin: 0; padding-top: 6px;}
					
						#content #main form .form_field.preference ul li {
							background: none;
							padding: 3px 15px 0 0;
							display: inline;
						}
						
							#content #main form .form_field.preference ul li input { width: auto; height: auto; }
							
				#content #main form .form_field.buttons { margin-top: 25px; }
				
					#content #main form .form_field.buttons input {
						width: auto;
						font-weight: bold;
						background-color: #fff;
						cursor: pointer;
						margin-right: 10px;
					}
					
						#content #main form .form_field.buttons input:hover {
							color: #fff;
							background-color: #008db8;
						}
			

/* CONTENT FOOTER STYLES */
	#content #content_footer {
		border-top: 9px solid #e45e19;
		margin-top: 25px;
		padding-top: 25px;
		position: relative;
	}
	
		#content #content_footer .info_box {
			width: 739px;
			margin: 0 auto;
			padding: 10px 13px;
			background-color: #ebebeb;
			border: 1px solid #545454;
		}
		
			#content #content_footer .info_box h3#share_title {
				width: 586px;
				height: 48px;
				margin-bottom: 15px;
				padding-top: 5px;
			}
			
				#content #content_footer .info_box h3 a {
					background: url(images/share-h3.png) top left no-repeat;
					border-bottom: 2px solid #e45e19;
					display: block;
					width: 586px;
					height: 46px;
					padding-bottom: 2px;
					text-indent: -1000px;
					overflow: hidden;
				}
				
			#content #content_footer .info_box p#share_badge {
				height: 147px;
				width: 147px;
				float: right;
				text-indent: -1000px;
				overflow: hidden;
				z-index: 99;
			}
			
				#content #content_footer .info_box p#share_badge[id] {
					background: url(images/share-badge.png) top left no-repeat;
					margin: -100px -15px 0 0;
				}
	

/* PAGE FOOTER STYLES */
#footer {
	background: url(images/footer-bg.png) top left no-repeat;
	width: 920px;
	padding: 15px 6px 75px;
	margin: 0 auto;
}

	#footer p#copyright {
		font-size: 1.3em;
		color: #ececec;
		float: left;
	}
	
		#footer p#copyright span { float: left; }
	
		#footer p a#footer_logo {
			background: url(images/footer-logo.png) top left no-repeat;
			height: 16px;
			width: 310px;
			display: block;
			overflow: hidden;
			text-indent: -1000px;
			float: left;
			margin: 3px 0 0 5px;
		}
		
	#footer ul#footer_navigation {
		float: right;
		margin: 0;
	}
	
		#footer ul#footer_navigation li {
			background: none;
			font-size: 1.3em;
			display: inline;
			padding: 0 8px;
			border-right: 1px solid #fff;
		}
		
			#footer ul#footer_navigation li.last { border: none; }
		
			#footer ul#footer_navigation li a {
				color: #ececec;
				text-decoration: none;
				border-bottom: 2px solid #7fafbd;
			}
			
				#footer ul#footer_navigation li:hover a { border: none; }