/*------------------------------------------------*/
/*----------------- 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: 21px; font-family: 'Source Sans Pro', sans-serif; font-size: 13px; font-style: normal; font-weight: 400; color: #999; }

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: #7dc242; line-height: 1em; font-weight: 600; }
h3, h4, h5 { font-weight: 400; padding-bottom: 5px; color: #333; line-height: 21px; }
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: 26px;
	padding-right: 80px;
	font-size: 28px;
	line-height: 22px;
}
#branding h2 span {
	font-size: 18px;
	color: #999;
}


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

#featureWrap, #featureWrapVoucher {
	background: #7dc242; 
	width: 100%; 
	height: 300px;
	clear: both;
}
#featurePanel {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
#featurePic {
	position: absolute;
	bottom: -277px;
	height: 322px;
}
#featurePicVoucher {
	position: absolute;
}
#featurePicVoucher img {
	width: 495px;
	height: 300px;
}
#voucher {
	position: absolute;
	right: 10px;
	width: 496px;
	height: 300px;
}
#voucher img {
	width: 496px;
	height: 300px;
}
#featureMessage h2 {
	position: absolute;
	left: 232px;
	top: 19px;
	color: #fff;
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	text-shadow: 1px 1px 2px #555;
	height: 103px;
	width: 272px;
}
#featureMessageVoucher h2 {
	position: absolute;
	left: 50px;
	top: 165px;
	color: #fff;
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	text-shadow: 1px 1px 2px #555;
}


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

#featurePanel .videobutton {
	background: url(../images/video-button.png) no-repeat;
	width: 232px;
	height: 93px;
	position: absolute;
	left: 256px;
	top: 160px;
}
#featurePanel .videobutton p {
	position: absolute;
	left: 86px;
	top: 32px;
	font-size: 16px;
	color: #fff;
	text-shadow: 1px 1px 2px #333;
}
#videoWrap {
	width:410px;
	height: 250px;
	position: absolute;
	top:20px;
	right: 20px;
	border: 4px solid #fff;
}
#videoWrapSmall {
	display: none;
}

/*------------------------------------------------*/
/*-------------------- 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 .voucher-small {
	color: #333;
	font-size: 26px;
}
#leftContent h1 .voucher-big {
	color: #7dc242 !important;
	font-size: 36px;
	line-height: 120%;
}
#leftContent h2 {
	font-size: 28px;
	line-height: 36px;
	text-shadow: 1px 1px 0 #fff;
	margin-bottom: 30px;
}
#leftContent .intro {
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 20px;
	text-shadow: 1px 1px 0 #fff;
}
#leftContent .intro p+p {
	padding-top: 10px;
}
#leftContent .intro span {
	color: #333;
}
#leftContent .columns {
	float: left;
	width: 612px;
	margin-right: 40px;
}
#leftContent .columns p {
	text-shadow: 1px 1px 0 #fff;
}
#leftContent .leftCol {
	float: left;
	width: 190px;
}
#leftContent .middleCol, .rightCol {
	float: left;
	width: 190px;
	margin-left: 21px;
}

#leftContent #zohoWebToLead {
	width: 300px;
}
#voucherBody {
	display: none;
}

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

#sidebar {
	float: right;
	width: 213px;
	margin-left: 25px;
}
#sidebar p {
	font-size: 13px;
	color: #ccc;
}
#sidebar h2 {
	font-size: 30px;
	text-shadow: 1px 1px 2px #000;
}
#zohoWebToLead 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: 20px;
	text-align: center;
	text-shadow: 1px 1px 2px #333;
	width: 118px;
	height: 47px;
}
#sidebar input[type=submit]:hover {
	background: url(../images/button-down.png) no-repeat;
}
#sidebar #zohoWebToLead {
	margin-top: 10px;
}


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

#footer {
	width: 960px;
	margin: 0 auto 80px auto;
}
#socialpanel {
	background: url(../images/signature-bg.png) repeat-x;
	height: 85px;
	width: 960px;
	position: relative;
}
#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 {
		display: none;
	}
	#voucher {
		top: 40px;
		width: 350px;
		height: 212px;
	}
	#voucher img {
		width: 350px;
		height: 212px;
	}
	#featureMessage h2 {
		left: 40px;
	}
	#featurePanel .videobutton {
		left: 30px;
	}
	#leftContent, #leftContent .columns {
		width: 420px;
	}
	#leftContent .leftCol, #leftContent .middleCol, #leftContent .rightCol {
		width: 420px;
		margin-left: 0;
	}
	#leftContent .middleCol h3, #leftContent .rightCol h3 {
		padding-top: 10px;
	}
	#social {
		position: absolute;
		top: -75px;
		left: 530px;
	}
	#sidebar {
		margin-bottom: 40px;
	}
}
	
@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;
	}
	#featureWrap {
		height: 400px;
	}
	#featureWrapVoucher {
		height: 279px;
	}	
	#featurePic {
		display: none;
	}
	#featurePicVoucher, #featurePicVoucher img {
		width: 460px;
		height: 279px;
	}
	#voucher {
		display: none !important;
	}
	#voucherBody {
		display: block;
		width: 300px;
		height: 182px;
		position: relative;
		top: -40px;
	}	
	#featureMessage h2 {
		left: 30px;
		top: 15px;
		line-height: 28px;
		font-size: 22px
	}
	#featurePanel .videobutton {
		background: url(../images/video-button-sm.png) no-repeat;
		left: 245px;
		top: 15px;
		width: 194px;
	}
	#featurePanel .videobutton p {
		left: 76px;
		top: 32px;
	}
	#videoWrap {
		top: 120px;
		width: 410px;
	}
	#leftContent {
		padding: 0 27px 0 40px;
	}
	#leftContent, #leftContent .columns {
		width: 380px;
	}
	#leftContent h2 {
		font-size: 22px;
	}
	#leftContent .leftCol, #leftContent .middleCol, #leftContent .rightCol {
		width: 380px;
		margin-left: 0;
	}
	#leftContent .middleCol h3, #leftContent .rightCol h3 {
		padding-top: 10px;
	}
	#sidebar {
		float: left;
		width: 380px;
		margin: 20px 0 0 0;
		padding: 20px 40px;
		background: url(../images/checker-dark.gif) repeat;
	}
	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 {
		height: 78px;
	}
	#menu .mainLinks li {
		padding-right: 12px;
	}
	#branding img {
		width: 255px;
	}
	#branding h2 {
		font-size: 20px;
	}
	.contentWrap {
		width: 300px;
	}
	#featureWrap {
		height: 450px;
	}
	#featureWrapVoucher {
		height: 182px;
	}
	#featurePicVoucher, #featurePicVoucher img {
		width: 300px;
		height: 182px;
	}
	#featureMessage h2 {
		left: 30px;
		top: 15px;
		line-height: 28px;
		font-size: 22px;
	}
	#featureMessageVoucher h2 {
		left: 20px;
		top: 90px;
		font-size: 20px;
	}
	#featurePanel .videobutton {
		left: 20px;
		top: 110px;
	}
	#videoWrapSmall {
		display: inherit;
		width:280px;
		height: 210px;
		position: absolute;
		top:212px;
		left: 10px;
		border: 4px solid #fff;
	}
	#videoWrap {
		display: none;
	}
	#leftContent {
		padding: 0 30px;
	}
	#leftContent, #leftContent .columns {
		width: 240px;
	}
	#leftContent h2 {
		font-size: 16px;
		line-height: 25px;
		margin-bottom: 18px;
	}
	#leftContent .intro span.voucher-small {
		font-size: 20px;
	}
	#leftContent .intro span.voucher-big {
		font-size: 26px;
	}
	#leftContent .intro span {
		font-size: 14px;
	}
	#leftContent .intro p {
		font-size: 13px;
		line-height: 21px;
	}
	#leftContent h3 {
		font-size: 14px;
	}
	#leftContent .leftCol, #leftContent .middleCol, #leftContent .rightCol {
		width: 240px;
	}
	#leftContent #zohoWebToLead {
		width: 240px;
	}
	#voucherBody {
		top: -20px;
	}
	#voucherBody, #voucherBody img {
		width: 240px;
		height: 145px;
	}
	#sidebar {
		width: 220px;
	}
	#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;
	}

}