/*

Title:		Home Health Depot Master Screen Styles
Author:		joshua@inthesaucepan.com
Copyright:	2010, Saucepan Creative, LLC. All rights reserved (please don't re-use without permission).

*/

body {
	color: #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #d9d2b2 url(../media/background.png) repeat-x;
	}

#page {
	width: 980px;
	height: auto;
	margin: 0 auto;
	}

/* Header 
--------------------------------------------- */

#header {
	position: relative;
	width: 980px;
	height: 200px;
	background: url(../media/family-of-companies.png) top right no-repeat;
	z-index: 500;
	}

	/* Logo */

	h1 {
		position: absolute;
		top: 0;
		left: 0;
		text-indent: -9999px;
		}

		h1 a {
			display: block;
			width: 320px;
			height: 120px;
			background: url(/images/logo.jpg);
			}

	/* Navigation */

	#navigation {
		position: absolute;
		bottom: 20px;
		left: 0;
		width: 980px;
		height: 45px;
		padding: 0;
		z-index: 600;
		}

		#navigation li {
			float: left;
			display: inline;
			font-size: 11px;
			font-weight: bold;
			}

			#navigation li a {
				display: block;
				width: auto;
				height: 27px;
				padding: 15px 10px 0 10px;
				color: rgb(255, 255, 255);
				text-decoration: none;
				border-bottom: 3px solid rgb(234, 136, 49);
				}

			.subcategory { float: left; display: inline; }

			#navigation li a:hover {}

				/* Submenu */
			
				/* First Level */
			
				#navigation a:active {} /* Sets color on click. */

				#navigation li:last-child a { border-right: none; } /* Doesn't work in IE */
				
				#navigation li.hover,
				#navigation li:hover {
					position: relative;
					background: rgba(0, 0, 0, .15);
					}

					#navigation li ul li.hover,
					#navigation li ul li:hover {
						background: rgb(255, 255, 255);
						}
			
				/* Second Level */

				#navigation ul {
					visibility: hidden;
					position: absolute;
					top: 42px;
					width: 200px;
					z-index: 700;
					background: rgb(255, 255, 255);
					}

				#navigation li#wheelchairs .submenu {
					width: 400px;
					}

					#navigation li#wheelchairs .submenu .subcategory {
						float: left;
						display: inline;
						width: 200px;
						}

					#navigation li#wheelchairs .submenu .subcategory a.title {
						font-weight: bold;
						}

						#navigation li#wheelchairs .submenu .subcategory .sub-subcategory {
							display: block;
							}

							#navigation li#wheelchairs .submenu .subcategory .sub-subcategory li {
								display: block;
								}

								#navigation li#wheelchairs .submenu .subcategory .sub-subcategory li a {
									display: block;
									width: 176px;
									}

				#navigation ul li {
					float: none;
					display: block;
					font-weight: normal;
					background: rgb(255, 255, 255);
					}

					#navigation ul li a {
						display: block;
						height: auto;
						padding: 7px 12px 7px 12px;
						color: rgb(102, 102, 102);
						border: none;
						border-bottom: 1px solid rgb(255, 255, 255);
						}

					#navigation ul li a:hover {
						color: rgb(246, 154, 41);
						background: rgb(245, 245, 245);
						border-bottom: 1px solid rgb(235, 235, 235);
						}

				/* IE 6 & 7 Needs Inline Block */
			
				#navigation li ul.submenu li a {
					border-right: none;
					display: block;
					text-shadow: none;
					text-transform: none;
					text-align: left;
					}

				#navigation li ul.submenu li a:hover {}

				ul.submenu {
					box-shadow: 0 1px 7px rgba(0, 0, 0, .75);
					-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, .75);
					-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, .75);
					}

	/* Utilities */

	#utilities {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
		font-size: 12px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-bottom-left-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		border-bottom-right-radius: 5px;
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
		}

		#utilities li {
			float: left;
			display: inline;
			}

			#utilities li a {
				display: block;
				padding: 1px 7px 3px 7px;
				color: rgb(255, 255, 255);
				background: rgb(250, 168, 63) url(../media/learn-more-overlay.png) 0 50%;
				text-decoration: none;
				border-left: 1px solid rgb(255, 192, 95);
				border-right: 1px solid rgb(243, 109, 31);
				text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
				}

			#utilities li.first a {
				-webkit-border-bottom-left-radius: 5px;
				-moz-border-radius-bottomleft: 5px;
				border-bottom-left-radius: 5px;
				border-left: none;
				}

			#utilities li.last a {
				-webkit-border-bottom-right-radius: 5px;
				-moz-border-radius-bottomright: 5px;
				border-bottom-right-radius: 5px;
				border-right: none;
				}

			#utilities li a:hover {
				text-decoration: underline;
				}

/* Body 
--------------------------------------------- */

#body {
	width: 980px;
	height: auto;
	background: rgb(255, 255, 255);
	}

.index #body {
	width: 970px;
	height: 495px;
	border: 5px solid rgb(255, 255, 255);
	}

#body:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

	.column {
		float: left;
		display: inline;
		height: auto;
		}

	.index .column {
		float: left;
		display: inline;
		height: 495px;
		}

	#left {
		width: 730px;
		}

	.index #left {
		width: 200px;
		background: url(/images/left-column-background.png) no-repeat;
		font-family: Helvetica, Arial, sans-serif;
		}

	.locations #left {
		width: 480px;
		margin: 10px 5px 25px 0;
		text-align: center;
		background: none;
		}

		h2 {
			width: 100%;
			height: 50px;
			padding: 20px 0px 0px 20px;
			color: rgb(255, 255, 255);
			background: url(http://hhdepot.com/images/header-bk.gif) repeat-x;
			font-family: 'Times New Roman', Times, serif;
			font-size: 24px;
			font-weight: bold;
			text-align: left;
			}

		.index h2 {
			position: relative;
			left: -11px;
			width: 186px;
			height: 35px;
			margin: 5px 0 -3px 0;
			padding: 8px 0 0 20px;
			color: rgb(255, 255, 255);
			background: url(../media/grand-opening-banner.png) no-repeat;
			font-size: 16px;
			text-transform: uppercase;
			font-weight: bold;
			font-style: italic;
			font-family: Georgia, Times, 'Times New Roman', serif;
			}

		#locations {
			color: rgb(0, 95, 174);
			font-size: 12px;
			margin: 0;
			}

			.location {
				position: relative;
				height: 105px;
				margin: 0 0 5px 0;
				border-radius: 3px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				}

			.location:hover {}

				.location p {
					display: block;
					font-size: 12px;
					line-height: 14px;
					}

					.location p b {
						font-size: 12px;
						line-height: 14px;
						color: rgb(0, 95, 174);
						text-transform: uppercase;
						}

					.location p a {
						display: block;
						width: 180px;
						height: 95px;
						padding: 10px 10px 0 10px;
						color: rgb(0, 95, 174);
						text-decoration: none;
						background: url(../media/location-hover.png);
						}

					.location p a:hover {
						background: rgb(219, 218, 174) url(../media/location-hover.png);
						}

			#locations i.action {
				position: relative;
				bottom: -3px;
				left: -10px;
				margin: 15px 0 0 0;
				text-transform: uppercase;
				text-align: center;
				font-size: 10px;
				line-height: 12px;
				font-style: normal;
				}

				#locations i.action {
					display: block;
					width: 100%;
					height: auto;
					padding: 3px 10px 4px 10px;
					color: rgb(255, 255, 255);
					border-top: 1px solid rgb(84, 121, 25);
					background: rgb(125, 171, 34) url(../media/learn-more-overlay.png) 0 50%;
					text-decoration: none;
					text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
					}

				#locations .location p a:hover i.action {
					background: rgb(110, 140, 39) url(../media/learn-more-overlay.png) 0 50%;
					}

		#promotional {
			display: block;
			background: green;
			width: 200px;
			height: 120px;
			}

			#promotional img {
				width: 200px;
				height: 120px;
				}

			#promotional a img {
				display: block;
				width: 200px;
				height: 120px;
				}

			#promotional a:hover img { outline: 5px solid rgb(136, 228, 0); }

	#middle {
		width: 560px;
		margin: 0 5px 0 5px;
		overflow: hidden;
		}

		#slideshow {
			position: relative;
			width: 560px;
			height: 370px;
			}

			#pager {
				position: absolute;
				bottom: 20px;
				right: 20px;
				z-index: 100;
				}

				#pager a {
					float: left;
					display: inline;
					width: 22px;
					height: 19px;
					margin: 0 0 0 20px;
					padding: 3px 0 0 0;
					font-size: 14px;
					font-family: Helvetica, Arial, sans-serif;
					color: rgb(155, 155, 155);
					background: rgb(255, 255, 255);
					background: rgba(255, 255, 255, .5);
					text-decoration: none;
					text-align: center;
					background: url(/media/pager-background.png) no-repeat;
					}
		
					#pager a:hover,
					#pager a.activeSlide {
						color: rgb(255, 255, 255);
						font-weight: bold;
						background: url(/media/pager-background.png) bottom left no-repeat;
						}

			#promotions {
				width: 560px;
				height: 370px;
				}

				.promotion {
					width: 560px;
					height: 370px;
					}

		#middle-footer {
			position: relative;
			width: 570px;
			height: 124px;
			border-top: 1px solid rgb(255, 255, 255);
			background: url(../media/middle-footer-background.png) repeat-x;
			}

			#social-media {
				position: absolute;
				top: 20px;
				right: 25px;
				}
		
				#social-media li#twitter {
					text-indent: -9999px;
					margin: 0 0 20px 0;
					}
		
					#social-media li#twitter a {
						display: block;
						width: 160px;
						height: 27px;
						background: url(../images/follow_us-a.png);
						}
		
				#social-media li#facebook {
					text-indent: -9999px;
					}
		
					#social-media li#facebook a {
						display: block;
						width: 160px;
						height: 27px;
						background: url(../images/facebook.png);
						}
		
			#newsletter {
				float: left;
				margin: 25px 0 0 20px;
				font-family: Georgia, Times, 'Times New Roman', serif;
				}
		
				#newsletter legend {
					font-style: italic;
					margin: 0 0 5px 0;
					color: rgb(255, 255, 255);
					text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
					}
		
				#newsletter ol {
					float: left;
					display: inline;
					margin: 5px 0 0 0;
					list-style-type: none;
					}
		
					#newsletter ol li {
						border: none;
						margin: 0 0 0 0;
						padding: 0;
						}
		
						#newsletter ol li label {
							display: none;
							}
		
						#newsletter ol li input {
							width: 240px;
							}
		
				#newsletter input#submit {
					float: left;
					display: inline;
					margin: 7px 0 0 5px;
					}

	#right { width: 250px; }

	.index #right {
		width: 200px;
		font-family: Georgia, Times, 'Times New Roman', serif;
		}

	.locations #right {
		width: 480px;
		margin: 10px 0 25px 5px;
		}

		#videos {
			position: relative;
			height: 495px;
			}

			.video {
				position: relative;
				width: 200px;
				height: 120px;
				margin: 5px 0 5px 0;
				}

			.video.first,
			.video.fourth {
				margin: 0;
				}

				.video img {
					width: 200px;
					height: 120px;
					}

				.video p {
					position: absolute;
					top: 0;
					left: 0;
					text-align: center;
					}

					.video p a {
						display: block;
						width: 200px;
						height: 31px;
						padding: 89px 0 0 0;
						font-size: 13px;
						font-style: italic;
						color: rgb(255, 255, 255);
						font-weight: normal;
						background: url(/images/video/video-background.png);
						text-decoration: none;
						}

					.video.fourth a {
						display: block;
						width: 200px;
						height: 120px;
						}

					.video.fourth a:hover { outline: 5px solid rgb(136, 228, 0); }

						.video p a strong {
							font-weight: normal;
							text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
							}

						.video p a em {
							display: block;
							font-size: 11px;
							font-style: normal;
							text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
							}

					#promotional .video p a {
						height: 120px;
						padding: 0;
						text-indent: -9999px;
						background: none;
						}

					.video p a:hover {
						outline: 5px solid rgb(136, 228, 0);
						background-position: bottom left;
						z-index: 100;
						}

			#video-controls {
				display: none; /* These can display when more than four videos are available. */
				list-style-type: none;
				}

				#video-controls li {
					text-align: center;
					width: 200px;
					height: 20px;
					margin: 0;
					padding: 0;
					text-indent: -9999px;
					}

				#video-controls li.previous {
					position: absolute;
					top: -20px;
					left: 0;
					}

				#video-controls li.next {
					position: absolute;
					bottom: -20px;
					left: 0;
					}

					#video-controls li.previous a {
						color: rgb(255, 255, 255);
						text-decoration: none;
						display: block;
						width: 100%;
						height: 100%;
						background: url(../media/previous-video.png);
						}

					#video-controls li.next a {
						color: rgb(255, 255, 255);
						text-decoration: none;
						display: block;
						width: 100%;
						height: 100%;
						background: url(../media/next-video.png);
						}

/* Footer 
--------------------------------------------- */

#footer {
	width: 980px;
	height: 140px;
	margin: 0 auto;
	padding: 30px 0 0 0;
	color: rgb(255, 255, 255);
	background: url(/images/bottombackground.gif) repeat-x;
	}

	#associations {
		width: 455px;
		background: rgb(255, 255, 255);
		height: 85px;
		margin: 0 auto 0 auto;
		padding: 0;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		}

		#associations li {
			float: left;
			display: inline;
			text-indent: -9999px;
			}

			#associations li a {
				display: block;
				height: 85px;
				}

			#associations li.achc a {
				width: 63px;
				background: url(../media/associations/achc.png);
				}

			#associations li.bbb a {
				width: 53px;
				background: url(../media/associations/bbb.png);
				}

			#associations li.company a {
				width: 65px;
				background: url(../media/associations/company.png);
				}

			#associations li.us-rehab a {
				width: 91px;
				background: url(../media/associations/us-rehab.png);
				}

			#associations li.mdff a {
				width: 75px;
				background: url(../media/associations/mdff.png);
				}

			#associations li.atp a {
				width: 108px;
				background: url(../media/associations/atp.png);
				}

	p#copyright {
		position: relative;
		top: 7px;
		clear: both;
		margin: 15px 0 0 0;
		text-align: center;
		font-size: 12px;
		}
		
.toll-free-number {color:#fff; position:absolute;right:430px;top:40px;font-size:18px;display:none;}