/*------------------------------------------------*/
/*----------------- 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 { 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; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }


/*------------------------------------------------*/
/*----------------- Basic Styles -----------------*/
/*------------------------------------------------*/

body { background: #fff; text-align: left; line-height: 22px; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; color: #777; }

a { text-decoration: none; color: #999; }
a:hover { text-decoration: none; color: #333; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }

h1, h2 { padding-bottom: 5px; color: #75b4da; line-height: 120%; font-weight: 600; }
h3, h4, h5 { font-weight: 600; padding-bottom: 5px; color: #333; line-height: 24px; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #333; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }
p { padding-bottom: 0px; }
strong { font-weight: bold; color: #111; }
cite, em, i { font-style: italic; }
pre, code { font-family: 'Courier New', monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
blockquote p { padding-bottom: 0px; }

input[type=text], input[type=password], input[type=email], input.text, input.title, textarea {
	font-size: 11px;
	background-color: #fff;
	border-width: 1px;
	border-style: solid;
	border-collapse: separate;
	border-spacing: 0;
	border-color: #DDD;
	color: #7c7b7a;
	/*margin: 0 0 10px 0;*/
	margin: 0 0 10px 0;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	/*line-height: 24px;*/
	padding: 1px 6px;
	width: 94%;
}
input[type=text], input[type=password], input[type=email], input.text, input.title {
	height: 20px;
	line-height: 20px;
}

select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus, input[type=email]:focus { border-color:#7c7b7a; color: #333; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 6px; }


.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


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

#header {
	width: 960px;
	margin: 0 auto;
}
#menu {
	background: #ccc;
	display: block;
	height: 30px;
	padding: 16px 26px 0 40px;
}
#menu .mainLinks {
	float: left;
}
#menu .franchiseLinks {
	float: right;
}
#menu ul {
	display: inline;
}
#menu .mainLinks li {
	display: inline;
	padding-right: 20px;
	font-size: 14px;
	color: #333;
}
#menu .franchiseLinks li {
	display: inline;
	padding-left: 20px;
	font-size: 12px;
	color: #333;
}
#menu li a {
	color: #333;
}
#menu li a:hover {
	color: #999;
}
#branding {
	clear: both;
	height: 96px;
}
#branding img {
	float: left;
	padding-top: 16px;
	padding-left: 236px;
}
#branding h1 {
	position: absolute;
	left: -9999px;
}
#branding h2 {
	float: right;
	padding-top: 14px;
	padding-right: 18px;
	font-size: 28px;
	line-height: 120%;
}
#branding h2 span {
	font-size: 18px;
	color: #999;
}


/*------------------------------------------------*/
/*-------------------- Feature -------------------*/
/*------------------------------------------------*/

#featureWrap {
	background: #85c2e7;
	width: 100%;
	height: 350px;
	clear: both;
}
#featurePanel {
	position: relative;
	width: 960px;
	height: 350px;
	margin: 0 auto;
}
#featurePic {
	position: absolute;
	bottom: 0;
	left: -40px;
	height: 341px;
}
#featureMessage h2 {
	position: absolute;
	left: 358px;
	top: 128px;
	color: #fff;
	font-weight: 600;
	font-size: 26px;
	line-height: 32px;
	text-shadow: 1px 1px 2px #555;
	height: 103px;
	width: 272px;
}
#quoteform {
	float: right;
	width: 300px;
	margin: 15px 15px 0 0;
}
#quoteform p, #quoteform a {
	color: #000;
	font-size: 16px;
}
#quoteform input[type="text"] {
	width: 95%;
}
#quoteform input[type="submit"] {
	background: url(../images/button-up.png) no-repeat;
	color: #fff;
	border: none;
	cursor: pointer;
	display: block;
	float: right;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	line-height: normal;
	padding: 6px 0px;
	margin-top: 7px;
	text-align: center;
	text-shadow: 1px 1px 2px #333;
	width: 118px;
	height: 47px;
}
#quoteform input[type=submit]:hover {
	background: url(../images/button-down.png) no-repeat;
}
#quoteform #zohoWebToLead {
	margin-top: 10px;
}


/*------------------------------------------------*/
/*-------------------- Content -------------------*/
/*------------------------------------------------*/

.contentWrap {
	background: url(../images/content-bg.png) repeat-y;
	padding: 40px 27px 40px 40px;
	width: 893px;
	margin: 0 auto;
}


/*------------------------------------------------*/
/*------------------ leftContent -----------------*/
/*------------------------------------------------*/

#leftContent {
	float: left;
	width: 612px;
	margin-right: 40px;
}
#leftContent h1 {
	margin-bottom: 20px;
	text-shadow: 1px 1px 0 #fff;
}
#leftContent .headings, #leftContent .headings-479 {
	background: #ccc;
	padding: 10px;
	margin: -40px 0 30px -40px;
	text-align: center;
	width: 672px;
}
#leftContent .headings h2, #leftContent .headings-479 h2 {
	font-size: 16px;
	color: #333;
	margin: 0;
	text-shadow: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding-bottom: 0;
}
#leftContent .headings h2 span {
	margin: 0 20px;
	color: #eee;
}
#leftContent .headings-479 {
	display: none;
}
#leftContent h2 {
	font-size: 28px;
	line-height: 36px;
	margin-bottom: 30px;
	text-shadow: 1px 1px 0 #fff;
}
#leftContent .intro {
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 20px;
}
#leftContent .intro p+p {
	padding-top: 10px;
}
#leftContent .intro span {
	color: #333;
	font-weight: 600;
}
#leftContent .columns {
	float: left;
	width: 612px;
	margin-right: 40px;
}
#leftContent .leftCol {
	float: left;
	width: 190px;
}
#leftContent .middleCol, .rightCol {
	float: left;
	width: 190px;
	margin-left: 21px;
}
.contactDetails h3 {
	padding-bottom: 0;
}
.contactDetails h4 {
	padding: 15px 0 0 0;
	color: #555;
	font-size: 13px;
}
.contactDetails a {
	color: #777;
}
#leftContent .contactDetails .middleCol, 
#leftContent .contactDetails .rightCol, 
#leftContent .contactDetails .leftCol {
	width: 250px;
}


/*------------------------------------------------*/
/*-------------------- Sidebar -------------------*/
/*------------------------------------------------*/

#sidebar {
	float: right;
	width: 213px;
	min-height: 550px;
	margin-left: 25px;
	position: relative;
	margin-top: -20px;
}
#sidebar p {
	font-size: 13px;
	color: #ccc;
}
#rotate {
	margin-top: 30px;
	padding: 15px 0;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
}
#rotate p.testamonial {
	font-style: italic;
}
#rotate p.testamonial span {
	text-transform: uppercase;
	font-size: 70%;
	font-style: normal;
	letter-spacing: 0.2em;
}


/*------------------------------------------------*/
/*--------------------- Video --------------------*/
/*------------------------------------------------*/

#sidebar .videobutton {
	background: url(../images/video-button-sm.png) no-repeat;
	width: 232px;
	height: 93px;
	margin-bottom: 10px;
}
#sidebar .videobutton p {
	position: absolute;
	left: 81px;
	top: 32px;
	font-size: 14px;
	color: #fff;
	text-shadow: 1px 1px 2px #333;
}
#videoWrap {
	width: 238px;
	height: 178px;
	border: 4px solid #777;
	display: block;
	margin-left: -17px;
}
#videoWrap-767 {
	display: none;
}


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

#footer {
	width: 960px;
	margin: 0 auto 80px auto;
}
#socialpanel {
	background: url(../images/signature-bg.png) repeat-x;
	height: 85px;
	width: 960px;
	position: relative;
	margin-bottom: 20px;
}
#signaturelogo {
	float: left;
	padding-left: 40px;
	padding-top: 15px;
}
#positioningline {
	float: left;
	padding-left: 18px;
	padding-top: 34px;
}
#positioningline h3 {
	font-size: 26px;
	font-weight: 600;
	font-style: italic;
}
#social {
	float: right;
	padding: 24px 24px 0 0;
	width: 215px;
	height: 34px;
}
#social .socialtext {
	float: left;
	line-height: 14px;
	padding-top: 2px;
}
#social .socialbuttons {
	float: right;
}
#social .socialbuttons img {
	padding-left: 5px;
}
#otherAreas {
	margin: 20px 0;
}
#otherAreas p {
	font-size: 12px;
}
#bottom-nav a {
	padding-right: 15px;
}


/*------------------------------------------------*/
/*-------------- Responsive Styling --------------*/
/*------------------------------------------------*/

@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {

	#header, #featurePanel, #footer, #socialpanel {
		width: 768px;
	}
	#menu .mainLinks li {
		padding-right: 16px;
	}
	#menu .franchiseLinks li {
		padding-left: 16px;
	}
	.contentWrap {
		width: 701px;
		background: url(../images/content-bg-768.png) repeat-y;
	}
	#branding img {
		padding-left: 40px;
	}
	#featurePic {
		left: -29px;
		height: 262px;
	}
	#featurePic img {
		width: 420px;
	}
	#featureMessage h2 {
		left: 145px;
		top: 14px;
	}
	#featurePanel .videobutton {
		left: 137px;
		top: 196px;
	}
	#leftContent, #leftContent .columns {
		width: 420px;
	}
	#leftContent .leftCol, #leftContent .middleCol, #leftContent .rightCol {
		width: 420px;
		margin-left: 0;
	}
	#leftContent .middleCol h3, #leftContent .rightCol h3 {
		padding-top: 20px;
	}
	#leftContent .contactDetails h3 {
		padding-top: 0;
	}
	#social {
		position: absolute;
		top: -75px;
		left: 530px;
	}
	#sidebar {
		margin-bottom: 40px;
		margin-top: 50px;
	}
	#leftContent .headings {
		width: 748px;
	}
}
	
@media only screen and ( max-width: 767px ) {
	
	#header, #featurePanel, #footer, #socialpanel {
		width: 460px;
	}
	#menu {
		padding-right: 0;
		padding-left: 30px;
		height: 55px;
	}
	#menu .franchiseLinks {
		float: left;
	}
	#menu .franchiseLinks li {
		padding: 0 10px 0 0;
	}
	.contentWrap {
		width: 460px;
		padding: 40px 0 0 0;
		background: url(../images/checker.gif) repeat;
	}
	#branding img {
		padding-left: 30px;
	}
	#branding h2 {
		float: left;
		padding: 14px 0 20px 30px;
	}
	#featurePic, #featureMessage h2 {
		display: none;
	}
	#quoteform {
		float: right;
		width: 400px;
		margin: 15px 30px 0 30px;
	}
	#quoteform input[type="text"] {
		width: 96.5%;
	}
	#leftContent {
		padding: 0 27px 0 40px;
	}
	#leftContent, #leftContent .columns {
		width: 380px;
	}
	#leftContent .leftCol, #leftContent .middleCol, #leftContent .rightCol {
		width: 380px;
		margin-left: 0;
	}
	#leftContent .middleCol h3, #leftContent .rightCol h3 {
		padding-top: 20px;
	}
	#leftContent .contactDetails h3 {
		padding-top: 0;
	}
	#leftContent .intro p, #leftContent p {
		font-size: 16px;
		line-height: 22px;
	}
	#leftContent h3 {
		font-size: 16px;
		font-weight: 600;
	}
	#leftContent .headings {
		width: 440px;
	}
	#leftContent .headings h2 {
		font-size: 12px;
	}
	#leftContent .headings h2 span {
		margin: 0 12px;
	}
	#sidebar {
		float: left;
		width: 380px;
		margin: 20px 0 0 0;
		padding: 20px 40px;
		background: url(../images/checker-dark.gif) repeat;
		height: 500px;
	}
	#sidebar .videobutton {
		margin-left: -10px;
	}
	#sidebar .videobutton p {
		left: 110px;
		top: 52px;
	}
	#videoWrap {
		display: none;
	}
	#videoWrap-767 {
		display: block;
		text-align: center;
		border: 4px solid #777;
		height: 245px;
	}
	input[type="text"], input[type="password"], input[type="email"], input.text, input.title {
		height: 24px;
	}
	#social {
		position: absolute;
		top: 75px;
		left: 100px;
	}
	#signaturelogo {
		padding-top: 24px;
	}
	#signaturelogo img {
		width: 210px;
	}
	#positioningline h3 {
		font-size: 20px;
	}
	#otherAreas {
		margin: 65px 0 20px 0;
	}
}

@media only screen and ( max-width: 479px ) {

	#header, #featurePanel, #footer, #socialpanel {
		width: 300px;
	}
	#menu .mainLinks li {
		padding-right: 12px;
	}
	#branding img {
		width: 255px;
	}
	#branding h2 {
		font-size: 20px;
	}
	.contentWrap {
		width: 300px;
	}
	#quoteform {
		width: 240px;
	}
	#leftContent {
		padding: 0 30px;
	}
	#leftContent, #leftContent .columns {
		width: 240px;
	}
	#leftContent .headings-479 {
		display: block;
		width: 280px;
		margin-left: -30px;
	}
	#leftContent .headings-479 h2 {
		font-size: 12px;
	}
	#leftContent .headings h2 span, #leftContent .headings-479 h2 span {
		margin: 0 10px;
		color: #eee;
	}
	#leftContent .headings {
		display: none;
	}
	#leftContent h1 {
		font-size: 20px;
	}
	#leftContent .leftCol, #leftContent .middleCol, #leftContent .rightCol {
		width: 240px;
	}
	#sidebar {
		width: 240px;
		padding: 20px 30px;
	}
	#videoWrap-767 {
		display: none;
	}
	#videoWrap {
		display: block;
		margin: 0;
	}
	#sidebar .videobutton p {
		left: 100px;
	}
	#signaturelogo {
		padding-top: 24px;
		padding-left: 46px;
	}
	#signaturelogo img {
		width: 210px;
	}
	#positioningline {
		width: 300px;
		padding-left: 0;
	}
	#positioningline h3 {
		font-size: 20px;
		text-align: center;
	}
	#social {
		position: relative;
		top: 0;
		left: 0;
		float: left;
		padding: 24px 42px;
	}
	#otherAreas h3 {
		font-size: 14px;
	}
}