@charset "UTF-8";
/* CSS Document */

/*///////////////////////////////
// CONTENT AREA
///////////////////////////////*/
.contentBorderHolder{
	background: #fff url("../images/content_bgV2.gif") repeat-x top;
	width: 912px;
	padding-left: 18px;
}

#contentHolder{
	width: 912px;
	margin: 0 0 15px 0;
}

/* homepage */
#homepage{}
	
	#homepage #contentHolder{
		margin: 0;
	}
	
	#homepage #leftCol{
		background: #fff url("../images/home_leftCol_bg.gif") repeat-x top;
		width: 490px;}
	
	#homepage #intro{
		padding: 16px 0 0 0;
		height: 260px;
	}
	
	#homepage #intro p.lrg{
		font-size: 13px;
		line-height: 18px;
	}
	
	#homepage #callToAction{
		/*width: 454px;*/
	}
	
	#homepage #leftLink a.bigWhite{
		width: 100px;
	}
	
	#homepage #leftLink{
		float: left;
		width: 210px;
	}
	
	#homepage #leftLink h1, #homepage #leftLink h3, #homepage #rightLink h1, #homepage #rightLink h3{
		color: #fff;
	}
	
	#homePhones	{
		float: left;
		width: 237px;
		height: 231px;	
	}
	
	#homepage #benefitsTop{
		width: 394px;
		height: 282px;
		background: #f9d43a url("../images/home_rightCol_bg.gif") no-repeat top;
	}
	
	#homepage #benefitsBottom{
		width: 394px;
		height: 225px;
		background: #ffffff url("../images/home_rightCol_bg_bottom.jpg") no-repeat top;
	}
	
	#homepage #benefitsBottom #rightLink a.bigWhite{
		width: 180px;
	}
	
	#homepage #benefitsBottom .clockPic{
		float: left;
		padding: 0 15px 0 10px;	
		width: 140px;
	}
	
	#homepage #benefitsBottom #rightLink{
		float: left;
		width: 225px;	
	}
	
	#home_itunesLink{
		width: 225px;
	}
	
	#home_itunesLink a{
		float: right;
	}

    #home_xero_logo{
		width: 191px;
		position: absolute;
		top: 430px;
		left: 20px;
	}

	#home_xero_logo a{
		/*float: left;*/
	}
	
		/*
	#homepage #benefitsTop .hex{
		text-align: center;
		width: 100px;
		position: relative;
	}
	
	#hexOnline{
		top: 300px;
		left: 42px;
	}
	
	#hexMobee{
		top: 160px;
		left: 147px;
	}
	
	#hexJob2Txt{
		top: 155px;
		left: 252px;
	}
	
	*/
	#homepage #flashVideo{
		position: absolute;
		width: 370px;
		height: 209px;
		top: 52px;
		left: 50%;
		margin: 0 0 0 57px;
	}
	
	#homepage #benefitsTop a.button{
		background-image: url(../images/btn_smlBlue_right.gif);
		width: 90px;
		margin: 0 auto;
	}
	
	#homepage #benefitsTop .divider{
		margin: 0 0 2px -6px;
	}
	
	#homepage #benefitsTop a.button span{
		background-image: url(../images/btn_smlBlueArrow_left.gif);
		width: 70px;
		height: 18px;
		padding: 4px 0 0 20px;
		text-align: left;
	}

	
/*	Benefits */
#benefitsMainPanel{
		width: 570px;
	}
	
	#benefitsNav{
		background: #dde7eb url("../images/benefits_dividerWide.gif") no-repeat bottom center;
		padding: 5px 10px 5px 10px;
	}
	
	#benefitsNav a{
		float: left;
		text-align: left;
		margin-right: 1px;
	}
	
	#benefitsNav a span{
		height: 25px;
		padding: 15px 0 0 25px;
	}
	
	#benefitsNav #onlineLinks a			 { background-image: url(../images/benefits_btnBlue_right.gif); }
	#benefitsNav #onlineLinks a span	 { background-image: url(../images/benefits_btnBlue_left.gif); }
	#benefitsNav #onlineLinks a.btnYellow, #benefitsNav #mobeeLinks a			 { background-color: #f9d43a; background-image: url(../images/benefits_btnYellow_right.gif); }
	#benefitsNav #onlineLinks a.btnYellow span, #benefitsNav #mobeeLinks a span		 { background-image: url(../images/benefits_btnYellow_left.gif); color: #333 }
	#benefitsNav #onlineLinks a.btnYellow:hover, #benefitsNav #mobeeLinks a:hover 	 { background-color: #076797; }
	#benefitsNav #onlineLinks a.btnYellow:hover span, #benefitsNav #mobeeLinks a:hover span{ color: #151515 }
	/*
	#benefitsNav #onlineLinks a.btnYellow			 { background-color: #3199cd; background-image: url(../images/benefits_btnLightBlue_right.gif); }
	#benefitsNav #onlineLinks a.btnYellow span		 { background-image: url(../images/benefits_btnLightBlue_left.gif); }
	#benefitsNav #onlineLinks a.btnYellow			 { background-color: #666; background-image: url(../images/benefits_btnGrey_right.gif); }
	#benefitsNav #onlineLinks a.btnYellow span		 { background-image: url(../images/benefits_btnGrey_left.gif); }
	*/
	#benefitsNav #testDrive{
		position: relative;
		top: 398px;
		left: 290px;
	}
	
	#benefitsNav .videoHolder{
		width: 552px;
		height: 395px;
	}
	
	#benefitsNav p.sml{}
	
	#benefits #mainPanelImage{
		height: 355px;
		line-height: 0;
		font-size: 0px;
		padding: 40px 10px 0 10px;
		background: url("../images/benefits_mainPanel_bg.gif") repeat-x bottom;
	}
	
	#benefitsInfo{
		width: 300px;
	}
	
	#benefitsInfo #infoHeader{
		text-align: left;
		height: 20px;
		padding: 10px 15px 10px 15px;
		background: #dde7eb url("../images/benefits_dividerWide.gif") no-repeat bottom center;
	}
	
	#benefitsInfo #infoContent{
		text-align: left;
		padding: 10px 15px 0 15px;
		height: 435px;
		background: url(../images/benefits_rightPanel_bg.gif) no-repeat bottom center;
	}
	
	#benefitsInfo #infoContent p{
		margin: 0 0 8px 0;
		line-height: 16px;
	}
	
	#benefitsInfo #infoContent p.sml{
		margin: 0 0 8px 0;
		line-height: 12px;
	}
	
	#benefitsInfo table.infoTable{
		width: 270px;
		text-align: left;
	}
	
	#benefitsInfo table.infoTable th{
		font-size: 14px;
		line-height: 14px;
		font-weight: bold;
		background: url(../images/benefitsDivider.gif) no-repeat top center;
		padding: 12px 0 4px 0;
	}
	
	#benefitsInfo table.infoTable td{
		font-size: 12px;
		line-height: 14px;
		background: url(../images/benefitsDividerRight.gif) no-repeat bottom left;
		padding: 5px 0 5px 0;
	}
	
	#benefitsInfo table.infoTable td.noBG{
		background-image: none;
	}
	
	#benefitsInfo table.infoTable td.bullet{
		width: 30px;
	}
	
/* Test Drive */
	#testdrive #mainPanel .tableContent, .tableContent #testDriveMainPanel{
		background: url(../images/testDrive_bg_top.jpg) repeat-x top center;
		padding: 25px;
	}
	
	#testDriveMainPanel{
		height: 220px;
	}
	
	#freeJobs{
		position: relative;
		top: 40px;
		left: 73px;
	}
	#freeTexts{
		position: relative;
		top: 40px;
		left: 232px;
	}
	
	/* Signup Form */
	#signUpFormTable td{
		font-size: 11px;
	}
	
	#signUpFormTable .checkboxes input{
		width: 25px;
	}
	
	#signUpFormTable .alignRight{
		width: 110px;
	}
	
	#signUpFormTable .boldBlue{
		font-weight: bold;
		color: #076797;
	}
	
	#signUpFormTable .blue a{
		text-decoration: underline;
		font-size: 11px;
	}
	
	#signUpFormTable #btnSubmit{
		width: 183px;
	}
	
	
/* Pricing */
#pricing{}

	#pricing #intro{
		width: 570px;
		height: 420px;
		background: #e3eaee url("../images/pricing_bg.gif") no-repeat top left;
	}
	
	#pricing #intro #introText{
		padding: 30px;
	}
	
	#pricing #intro #jobs{
		position: relative;
		top: 15px;
		left: 108px;
	}
	
	#pricing #intro #sms{
		position: relative;
		top: 15px;
		left: 242px;
	}
	
	#pricing #intro a.bigWhite{
		width: 185px;
		position: relative;
		top: 143px;
		left: 182px;
	}
	
	#pricing #intro a.bigWhite span{
		font-size: 17px;
	}

	/* pricing table */
	#pricing #pricingTable{}
	
	#pricing #pricingTable td{
		background-color: #fff;
	}
	
	#pricing #pricingTable table td, #pricing #pricingTable table th{
		background: #ecf3f5;
		border-bottom: 1px solid #aaa;
		border-right: 1px solid #aaa;
		font-size: 12px;
		line-height: 14px;
		padding: 12px 24px 12px 24px;
		text-align: center;
	}
	
	#pricing #pricingTable th{
		font-weight: bold;
	}
	
	#pricing #pricingTable table td.bgDark, #pricing #pricingTable table th.bgDark{
		background-color: #d9e6eb;
	}
	
	#pricing #pricingTable .bgBorderTop 	{ height: 5px; background: #fff; }
	#pricing #pricingTable .bgBorderRight 	{ width: 7px; background: #fff url(../images/pricing_table_R.gif) repeat-y right; }
	#pricing #pricingTable .bgBorderBottom 	{ height: 7px; background: #fff url(../images/pricing_table_B.gif) repeat-x bottom; }
	#pricing #pricingTable .bgBorderLeft 	{ width: 7px; background: #fff url(../images/pricing_table_L.gif) repeat-y left; }

	#pricing #pricingTable table .BoldRightBorder	{ border-right-color: #666; }
	#pricing #pricingTable table .BoldBottomBorder	{ border-bottom-color: #666; }
	#pricing #pricingTable table .noRightBorder		{ border-right: none; }
	#pricing #pricingTable table .noBottomBorder	{ border-bottom: none; }

	#pricing #withGeop{
		background: #c4d3da;
		margin-bottom: 10px;
	}
	
	#pricing #platforms{
		background: #f9d43a;	
	}
	
/* Xero Integration */
#xero p{
		font-size: 11px;
		line-height: 15px;
		color: #777;
	}
	
	
	#xero p.lrg{
		line-height: 19px;
		font-size: 14px;
		color: #555;
	}
	
	#xero #intro{
		width: 570px;
		background:  url("../images/bg_xero-leftCol.gif") no-repeat top left;
	}
	
	#xero #intro #introText{
		padding: 15px 30px 15px 30px;
	}
	
	#xero #intro h1, #xero #xeroBenefits h2{
		font-weight: normal;
		margin: 12px 0 15px 0;
	}
	   
	#xero #integrationFlow{
		background: url("../images/bg_xero-integration-flow.gif") no-repeat top left;
		padding: 12px 30px 15px 30px;
		height: 202px;
	}
	
	#xero #xeroBenefits{
		padding: 12px 30px 15px 30px;
	}
	
/* FreshBooks Integration */
#freshbooks p{
		font-size: 11px;
		line-height: 15px;
		color: #777;
	}
	
	
	#freshbooks p.lrg{
		line-height: 19px;
		font-size: 14px;
		color: #555;
	}
	
	#freshbooks #intro{
		width: 570px;
		background:  url("../images/bg_xero-leftCol.gif") no-repeat top left;
	}
	
	#freshbooks #intro #introText{
		padding: 15px 30px 15px 30px;
	}
	
	#freshbooks #intro h1, #freshbooks #xeroBenefits h2{
		font-weight: normal;
		margin: 12px 0 15px 0;
	}
	   
	#freshbooks #integrationFlow{
		background: url("../images/bg_xero-integration-flow.gif") no-repeat top left;
		padding: 12px 30px 15px 30px;
		height: 202px;
	}
	
	#freshbooks #xeroBenefits{
		padding: 12px 30px 15px 30px;
	}
	
.nonUglyBox{
	font-size:12px;
	padding: 15px;
	background: #eee;
}

.nonUglyBox h2{
	width: 100%;
	margin: 0 0 7px 0;
}

.nonUglyBox p{
	margin: 0 0 7px 0;
}
	
/* Resellers */
#resellers p{
		font-size: 11px;
		line-height: 15px;
		color: #777;
	}
	
	#resellers p.lrg{
		line-height: 19px;
		font-size: 14px;
		color: #555;
	}
	
	#resellers #intro {
		width: 570px;
		background: #fff url("../images/resellersBG.gif") no-repeat top left;
	}
	
	#resellers #intro #introText{
		padding: 30px;
	}
	
	
	
/* Contact */
	#mainPanel{
		width: 580px;
	}
	
	#mainPanel td{
		vertical-align: top;
	}
	
	#contact #mainPanel .tableContent,.tableContent{
		/*background: url(../images/boder_3pxfade.gif) repeat-x top;*/
		background-color:#ffffff;
		padding: 25px;
	}
	
	#contactFormTable{
		margin: 20px 0 0 0;
	}
	
	 .tableContent{
		text-align: left;
	}
	
	 .tableContent .darkerBlue{
		background: #d7e2e6;
		border-top: 1px solid #aaa;
		border-bottom: 1px solid #aaa;		
	}
	
	 .contactDetailsHolder{
		font-size: 12px;
		line-height: 16px;
		padding: 10px;
	}
	
	 .boldBlue{
		width: 100px;
		font-size: 14px;
		line-height: 14px;
		font-weight: bold;
		color: #076797;
	}
	
	#contactBottomPanel .tableContent{
		background: #d7e2e6 url(../images/contact_bg_callCenterGirl.jpg) no-repeat bottom center;
		padding: 10px 15px 10px 15px;
		height: 270px;
		vertical-align: top;
	}
	
	#contactBottomPanel .tableContent h3{
		line-height: 20px;
		font-size: 18px;
	}
	
	#contactBottomPanel .tableContent p{
		line-height: 16px;
		margin: 0 0 8px 0;
	}
	
	#contactBottomPanel .tableContent p.lrg{
		line-height: 18px;
	}

	#contactBottomPanel a.button{
		margin-top: 10px;
		float: left;
		background-color: #fff;
		background-image: url("../images/btn_lightBlueSml_right.gif"); 
	}
	#contactBottomPanel a.button span{ 
		height: 18px; 
		width: 70px;
		padding: 5px 0 0 23px;
		background-image: url("../images/btn_lightBlueSml_left.gif"); 
		color: #076797;
		font-size: 11px;
	}
	#contactBottomPanel a.button:hover span{ 
		color: #333;
	}
/* OVERVIEW */

.overview{
	background: url(../images/overview_bg.jpg) no-repeat top;
	height: 687px
}

#appStoreBadge{
	position: absolute;
	left: 240px;
	top: 240px;

	width: 122px;
	height: 40px;
}

#innerContainer.overview h2{
	font-weight: bold;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

#innerContainer.overview p{
	line-height: 1.2;
	color: #666;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

#innerContainer.overview #holder1{
	width: 240px;


	position: absolute;
	top: 115px;
	left: 485px;
}

#innerContainer.overview #holder2{
	width: 265px;


	position: absolute;
	top: 390px;
	left: 50px;
}

#innerContainer.overview #holder3{
	width: 235px;


	position: absolute;
	top: 390px;
	left: 740px;
}
    /* FEATURES */
#featuresTable{
  font-size: 12px;
  line-height: 14px;
}

#mobilequickaddTable{
  font-size: 12px;
  line-height: 14px;
}