/* @override http://192.168.1.100:8888/hart/css/main.css */

/*
Company:	HART Health Franchise
File:		main.css - This contains all the main styles for the website.

All the styles are separted into the following groups:
Global Browser Reset - this is handled by the reset-fonts.css file from YUI
HTML, Body - for the html and body tags
Layout - styles that define the layout of the site
Modules - styles for content modules
Common Text Styles - Styles for text
Default Headings - headings like h1, h2, etc
Default Lists - unordered and ordered lists
Nav - navigation bar
Forms - html forms
Default Links - links
Misc - anything that doesn't fit elsewhere
*/

/* @group HTML, Body */
html {
	background: url(../images/page-bkg.gif) repeat-x 0 0 #9dbecf;
}
body {
	padding: 25px 0 0 0;
}
/* @end */

/* @group Layout */
div.wrap {
	width: 986px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
/* Head */
div#hd {
	width: 966px;
	height: 112px;
	background: url(../images/hd-bkg.gif) no-repeat 0 0;
	margin-left: auto;
	margin-right: auto;
}

div#home-hd {
	width: 966px;
	height: 112px;
	background: url(../images/hd-bkg-home.gif) no-repeat 0 0;
	margin-left: auto;
	margin-right: auto;
}

/* Body */
div#bd {
	width: 966px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
}

/* Footer */
div#ft {
	width: 966px;
	padding: 0 10px;
	height: 83px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	background: url(../images/ft-bkg.png) no-repeat 0 0;
}
div#ft p.copyright {
	width: 400px;
	padding: 20px 0 0 14px;
	color: #9e9d9d;
	font-size: 85%;
	float: left;
	display: inline;
}

div#ft p.ftnav {
	width: 500px;
	text-align: right;
	padding: 5px 13px 0 0;
	color: #9e9d9d;
	margin: 0;
	float: right;
	display: inline;
}
div#ft p.ftnav img {
	vertical-align: middle;
	margin-left: 10px;
}
p.ftnav a:link, p.ftnav a:visited {
	color: #eb262d;
	font-size: 85%;
	text-decoration: none;
}
p.ftnav a:hover {
	text-decoration: underline;
}

/* @end */

/* @group Modules */
/* Logo */
div#logo {
	width: 400px;
	height: 80px;
	text-indent: -9000px;
	float: left;
	display: inline;
}
div#logo a {
	display: block;
	height: 100%;
}

div#home-logo {
	width: 340px;
	height: 58px;
	margin: 20px 0 0 30px;
	float: left;
	display: inline;
}

/* Phone */
p.phone {
	color: #178ed8;
	font-size: 138.5%;
	font-weight: bold;
	width: 350px;
	text-align: right;
	margin: 0;
	padding: 38px 45px 0 0;
	float: right;
	display: inline;
}
p.blog a{
display:block;
position:absolute;
top:20px;
left:50%;
margin-left:355px;
text-indent:-99999px;
background:url(http://harthealthfranchise.com/images/blog.png) no-repeat;
width:124px;
height:35px;
}

/* Home Feature Wrap */
div#home-feature-wrap {
	width: 966px;
	height: 396px;
	background: url(../images/home-splash.jpg) no-repeat 0 0; 
}

div.home-feature {
	padding: 30px 0 0 0;
	width: 460px;
	margin: 0 35px 0 0;
	float: right;
	display: inline;
	z-index: 100;
}

div.home-feature-wrap a.learn-more {
	display: block;
	width: 350px;
	height: 45px;
	margin: 333px 0 0 600px;
	position: absolute;
	z-index: 100;
	text-indent: -9000px;
}


/* Welcome */
div#welcome {

}
div#welcome div.pic {
	width: 966px;
	height: 396px;
}
div#welcome div.text {
	position: absolute;
	margin: 30px 0 0 475px;
	z-index: 100;
}
div#welcome div.text a.browse {
	display: block;
	width: 450px;
	height: 50px;
	margin: -3px 0 0 27px;
	position: absolute;
	z-index: 100;
	text-indent: -9000px;
	background: url(../images/home-clicktodownload.gif) no-repeat 0 0; 
}




/* Intro */
p.intro {
	color: #cd2128;
	font-size: 115%;
	margin: 10px 0;
	line-height: 110%;
}

/* Quick Facts */
p.quick-facts {
	color: #355680;
	font-size: 100%;
	font-weight: bold;
	margin: 10px 0 0 0;
}
ul.quick-facts {
	color: #355680;
	font-size: 100%;
	margin: 0 0 0 25px;
}

/* Steps */
div.steps {
	margin-bottom: 10px;
}
div.steps span.hd {
	display: block;
	height: 1px;
	overflow: hidden;
	text-indent: -9000px;
}
div.steps a:link, div.steps a:visited {
	color: #fff;
	text-decoration: none;
}
div.steps span.para {
	color: #ffffff;
	font-size: 100%;
	line-height: 120%;
}

a.step1 {
	display: block;
	width: 326px;
	height: 130px;
	background: url(../images/step1.gif) no-repeat 0 0;
	overflow: hidden;
	float: left;
	display: inline;
}
a.step1 span.para {
	display: block;
	width: 290px;
	padding: 60px 0 0 28px;
}
a.step1:hover, a.step1-active {
	background-position: 0 -130px;
}

a.step2 {
	display: block;
	width: 315px;
	height: 130px;
	background: url(../images/step2.gif) no-repeat 0 0;
	overflow: hidden;
	float: left;
	display: inline;
}
a.step2 span.para {
	display: block;
	width: 290px;
	padding: 60px 0 0 14px;
}
a.step2:hover, a.step2-active {
	background-position: 0 -130px;
}

a.step3 {
	display: block;
	width: 325px;
	height: 130px;
	background: url(../images/step3.gif) no-repeat 0 0;
	overflow: hidden;
	float: left;
	display: inline;
}
a.step3 span.para {
	display: block;
	width: 290px;
	padding: 60px 0 0 14px;
}
a.step3:hover, a.step3-active {
	background-position: 0 -130px;
}



/* Callouts */
div.callouts {
	padding: 10px 0 0 0;
	width: 939px;
	height: 204px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid #e2e2e2;
	background: url(../images/callouts.jpg) no-repeat 0 0;
}
div.callouts h3 {
	text-indent: -9000px;
}
div.callouts p {
	text-indent: -9000px;
}


/* Inside Content */
div.inside-content-wrap {
	width: 966px;
	background: url(../images/inside-content-bkg.jpg) no-repeat 0 100%;
	padding: 0 0 100px 0;
}
div.inside-content {
	padding: 30px 0 0 0;
	margin: 0 35px 0 0;
}
div.inside-content-wrap a.learn-more {
	display: block;
	width: 350px;
	height: 45px;
	margin: 35px 0 0 600px;
	position: absolute;
	z-index: 100;
	text-indent: -9000px;
}
div.inside-content-wrap div.sidepic {
	width: 300px;
	height: 379px;
	position: absolute;
	z-index: 50;
	margin: -357px 0 0 645px;
	
}

/* Main */
div.main {
	width: 470px;
	margin: 0 0 0 20px;
	float: left;
	display: inline;
}

/* Main Wide */
div.main-wide {
	width: 670px;
	margin: 0 0 0 20px;
	float: left;
	display: inline;
}

div.main-wide img {
	float: right;
	margin-right: -41px;
	z-index: 1;
}

div.main-wide div.nofloat img {
	float: right;
	margin-right: 0px;
	z-index: 1;
}

div.main-wide div.left img {
	float: left;
	padding: 10px;
	z-index: 1;
}

div.main-wide div.right img {
	float: right;
	padding: 10px;
	z-index: 1;
}


/* Media */
div.media {
	margin: 0 auto 15px auto;
	width: 939px;
	border-top: 1px solid #e2e2e2;
	padding: 10px 0 0 0;
}

/* Video */
div.video {
	width: 458px;
	float: left;
	display: inline;
}
div.video h3 {
	color: #eb262d;
	font-size: 153.9%;
	font-weight: bold;
	margin: 0 0 5px 0;
}

/* Carousel */
div.carousel {
	width: 458px;
	float: right;
	display: inline;
}
div.carousel h3 {
	color: #eb262d;
	font-size: 153.9%;
	font-weight: bold;
	margin: 0 0 5px 0;
}

/* Side */
div.side {
	width: 220px;
	margin: 0 0 0 15px;
	float: left;
	display: inline;
}


/* Main Callout */
div.main-callout-top {
	width: 383px;
	overflow: hidden;
	background: url(../images/main-callout-top.gif) no-repeat 0 0;
	padding: 15px 20px 1px 20px;
	z-index: 100;
}
div.main-callout {
	width: 423px;
	overflow: hidden;
	background: url(../images/main-callout-bkg.gif) repeat-y 0 0;
	z-index: 100;
}
div.main-callout-btm {
	width: 423px;
	height: 16px;
	background: url(../images/main-callout-btm.gif) no-repeat 0 0;
	overflow: hidden;
	z-index: 100;
}


/* Ordered List */

ol {
}
ol li{
	margin-bottom: 10px;
	list-style: none;
}

/* @end */

/* @group Common Text Styles */
div.main {
	color: #676767;
}
div.main p {
	font-size: 100%;
	line-height: 140%;
}

div.main-wide {
	color: #676767;
}
div.main-wide p {
	font-size: 100%;
	line-height: 140%;
}


div.side ul {
	margin: 0;
	padding: 0;
}
div.side ul li {
	list-style: none;
	margin: 0;
	padding: 6px 10px 6px 15px;
	border-bottom: 1px solid #e2e2e2;
}
div.side ul a {
	font-size: 108%;
	display: block;
	width: 99%;
}
div.side ul a:link, div.side ul a:visited {
	color: #676767;
	text-decoration: none;
}
div.side ul a:hover {
	text-decoration: underline;
}
div.side a.active {
	font-weight: bold;
}

div.side a.bold, div.side a:link.bold, div.side a:visited.bold {
	font-weight: bold;
	color: #355680;
}


div.main-callout h3 {
	color: #355680;
	font-size: 108%;
	font-weight: bold;
	margin: 0 0 3px 0;
}
div.main-callout p {
	color: #676767;
	font-size: 100%;
	margin: 0 0 5px 0;
	line-height: 120%;
}
/* @end */

/* @group Default Headings */
div.main h1 {
	color: #eb262d;
	font-size: 215%;
	font-weight: bold;
	letter-spacing: -1px;
	margin: 0 0 10px 0;
}
div.main h2 {
	color: #355680;
	font-size: 123.1%;
	font-weight: bold;
	margin: 0 0 4px 0;
}

div.main-wide h1 {
	color: #eb262d;
	font-size: 215%;
	font-weight: bold;
	letter-spacing: -1px;
	margin: 0 0 10px 0;
}
div.main-wide h2 {
	color: #355680;
	font-size: 123.1%;
	font-weight: bold;
	margin: 0 0 4px 0;
}

div.side h3 {
	color: #355680;
	font-size: 123.1%;
	font-weight: bold;
	margin: 0;
	padding: 6px 10px;
	border-bottom: 1px solid #e2e2e2;
}
/* @end */

/* @group Default Lists */
	
/* @end */

/* @group Nav */
div#nav {
	width: 947px;
	height: 46px;
	position: absolute;
	z-index: 100;
	margin: 87px 0 0 10px;
}
div#nav ul {
	margin: 0;
	padding: 0;
	width: 947px;
	height: 46px;
}
div#nav ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	display: inline;
}
div#nav ul li a {
	display: block;
	height: 46px;
	background: url(../images/nav.png) no-repeat 0 0;
	text-indent: -9000px;
}
div#nav ul li#n-home a {
	width: 92px;
	background-position: 0 0;
}
div#nav ul li#n-home a:hover, div#nav ul li#n-home a.active {
	background-position: 0 -46px;
}

div#nav ul li#n-aboutus a {
	width: 100px;
	background-position: -92px 0;
}
div#nav ul li#n-aboutus a:hover, div#nav ul li#n-aboutus a.active {
	background-position: -92px -46px;
}

div#nav ul li#n-investigation a {
	width: 213px;
	background-position: -192px 0;
}
div#nav ul li#n-investigation a:hover, div#nav ul li#n-investigation a.active {
	background-position: -192px -46px;
}

div#nav ul li#n-aboutyou a {
	width: 110px;
	background-position: -405px 0;
}
div#nav ul li#n-aboutyou a:hover, div#nav ul li#n-aboutyou a.active {
	background-position: -405px -46px;
}

div#nav ul li#n-products a {
	width: 127px;
	background-position: -515px 0;
}
div#nav ul li#n-products a:hover, div#nav ul li#n-products a.active {
	background-position: -515px -46px;
}

div#nav ul li#n-faq a {
	width: 62px;
	background-position: -642px 0;
}
div#nav ul li#n-faq a:hover, div#nav ul li#n-faq a.active {
	background-position: -642px -46px;
}

div#nav ul li#n-new a {
	width: 118px;
	background-position: -704px 0;
}
div#nav ul li#n-new a:hover, div#nav ul li#n-new a.active {
	background-position: -704px -46px;
}

div#nav ul li#n-contact a {
	width: 125px;
	background-position: -822px 0;
}
div#nav ul li#n-contact a:hover, div#nav ul li#n-contact a.active {
	background-position: -822px -46px;
}
/* @end */


/* @group Navh */
div#navh {
	width: 947px;
	height: 46px;
	position: absolute;
	z-index: 100;
	margin: 87px 0 0 10px;
}
div#navh ul {
	margin: 0;
	padding: 0;
	width: 947px;
	height: 46px;
}
div#navh ul li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	display: inline;
}
div#navh ul li a {
	display: block;
	height: 46px;
	background: url(../images/nav.png) no-repeat 0 0;
	text-indent: -9000px;
}
div#navh ul li#n-home a {
	width: 92px;
	background-position: 0 0;
}
div#navh ul li#n-home a:hover, div#navh ul li#n-home a.active {
	background-position: 0 -46px;
}

div#navh ul li#n-aboutus a {
	width: 100px;
	background-position: -92px 0;
}
div#navh ul li#n-aboutus a:hover, div#navh ul li#n-aboutus a.active {
	background-position: -92px -46px;
}

div#navh ul li#n-investigation a {
	width: 213px;
	background-position: -192px 0;
}
div#navh ul li#n-investigation a:hover, div#navh ul li#n-investigation a.active {
	background-position: -192px -46px;
}

div#navh ul li#n-aboutyou a {
	width: 110px;
	background-position: -405px 0;
}
div#navh ul li#n-aboutyou a:hover, div#navh ul li#n-aboutyou a.active {
	background-position: -405px -46px;
}

div#navh ul li#n-products a {
	width: 127px;
	background-position: -515px 0;
}
div#navh ul li#n-products a:hover, div#navh ul li#n-products a.active {
	background-position: -515px -46px;
}

div#navh ul li#n-faq a {
	width: 62px;
	background-position: -642px 0;
}
div#navh ul li#n-faq a:hover, div#navh ul li#n-faq a.active {
	background-position: -642px -46px;
}

div#navh ul li#n-new a {
	width: 118px;
	background-position: -704px 0;
}
div#navh ul li#n-new a:hover, div#navh ul li#n-new a.active {
	background-position: -704px -46px;
}

div#navh ul li#n-contact a {
	width: 125px;
	background-position: -822px 0;
}
div#navh ul li#n-contact a:hover, div#navh ul li#n-contact a.active {
	background-position: -822px -46px;
}
/* @end */






div#loader {
	position: absolute;
	float: left;
	margin: 80px 0 50px 280px;
	z-index: 1;
	height: 1950px;
}

div#form {
	position: absolute;
	width: 100%;
	width: 670px;
	z-index: 2;
}

div#seven-steps {
	width: 915px;
	padding: 0 15px 20px 35px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 20px;
}

img.headshot {
	float: right;
	padding: 0 20px 5px 15px;
}

/* @group Forms */
	
/* @end */

/* @group Default Links - link visited hover active */
a:link, a:visited {
	color: #355680;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
/* @end */

/* @group Misc */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */
