@charset "utf-8";
/* CSS Document */

html, body {
	height: 100%;
	vertical-align: top;
	padding: 0;
	margin: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #242424;
}

#supercontainer {
	vertical-align: top;
	margin: 0;
	padding: 0;
	display: block;
}

#container {
	width: 960px;
	margin: 0 auto 0 auto;
	display: block;
	position: relative;
}

#shadowLeft {
	background: url(../images/shadow_left.jpg) left top repeat-y;
	width: 30px;
}

#shadowRight {
	background: url(../images/shadow_right.jpg) left top repeat-y;
	width: 30px;
}

#shadowBL {
	background: url(../images/shadow_bl.gif) right top no-repeat;
	width: 30px;
}

#shadowB {
	background: url(../images/shadow_b.gif) right top repeat-x;	
}

#shadowBR {
	background: url(../images/shadow_br.gif) left top no-repeat;	
}

#mainBody {
	width: 900px;
}

#bannerArea {
	width: 900px;
	height: 89px;
	background: url(../images/banner_bg.jpg) left top repeat-x;
}

#logoMain {
	width: 267px;
	height: 89px;
	text-indent: -5000px;
	overflow: hidden;
	background: url(../images/logo01.jpg) left top no-repeat;
}

#signInArea {
	position: absolute;
	top: 0;
	left: 563px;
	width: 357px;
	height: 40px;
	background: url(../images/sign_in_bg.jpg) left top no-repeat;
}

#passwordWatermark {
	color: #888888;	
}

#password {
	color: #000000;
}

#username {
	color: #888888;	
}

#bannerText {
	color: #000;
	font-size: 11px;
	margin: 12px 0 0 55px;
}

#bannerText a {
	color: #000;
}

#bannerText a:hover {
	text-decoration: underline;	
}

.inputBox {
	width: 111px;
	height: 15px;
	font-size: 11px;
	color: #CCC;
	margin: 5px 0 0 0;
	padding: 0;
}

#username {
	margin-left: 72px;	
}

#goButton {
	position: absolute;
	right: 0;
	top: 0;
	width: 43px;
	height: 40px;
	cursor: pointer;
	text-indent: -5000px;
	overflow: hidden;
}

#goButton:hover {
	background: url(../images/button_go.jpg) left top no-repeat;	
}

#menuArea {
	width: 900px;
	height: 29px;
	background: url(../images/menu_bar_bg.gif) left top repeat-x;
}

#menuButtons {
	margin-left: 40px;	
}

.menuButton {
	height: 29px;
	background-position: 0;
	margin: 0 5px 0 5px;
	text-indent: -5000px;
	overflow: hidden;
	display: block;
	float: left;
}

#buttonHome:hover,
#buttonCompany:hover,
#buttonServices:hover,
#buttonTestimonials:hover,
#buttonDemo:hover,
#buttonContact:hover,
#buttonPricing:hover {
	background-position: bottom;	
}

#buttonHome {
	background: url(../images/button_home.gif) left top no-repeat;
	width: 61px;
}

#buttonCompany {
	background: url(../images/button_company.gif) left top no-repeat;
	width: 82px;
}

#buttonServices {
	background: url(../images/button_services.gif) left top no-repeat;
	width: 85px;
}

#buttonTestimonials {
	background: url(../images/button_testimonials.gif) left top no-repeat;
	width: 111px;
}

#buttonDemo {
	background: url(../images/button_demo.gif) left top no-repeat;
	width: 60px;
}

#buttonContact {
	background: url(../images/button_contact.gif) left top no-repeat;
	width: 79px;
}

#buttonPricing {
	background: url(../images/button_pricing.gif) left top no-repeat;
	width: 72px;
}

#buttonHomeActive {
	background: url(../images/button_home.gif) left top no-repeat;
	width: 61px;
	background-position: bottom;
}

#buttonCompanyActive {
	background: url(../images/button_company.gif) left top no-repeat;
	width: 82px;
	background-position: bottom;
}

#buttonServicesActive {
	background: url(../images/button_services.gif) left top no-repeat;
	width: 85px;
	background-position: bottom;
}

#buttonTestimonialsActive {
	background: url(../images/button_testimonials.gif) left top no-repeat;
	width: 111px;
	background-position: bottom;
}

#buttonDemoActive {
	background: url(../images/button_demo.gif) left top no-repeat;
	width: 60px;
	background-position: bottom;
}

#buttonContactActive {
	background: url(../images/button_contact.gif) left top no-repeat;
	width: 79px;
	background-position: bottom;
}

#buttonPricingActive {
	background: url(../images/button_pricing.gif) left top no-repeat;
	width: 72px;
	background-position: bottom;
}

#contentContainer {
	width: 900px;
	background: url(../images/content_bg_01.gif) left top repeat-x;
	display: block;
	float: left;
	position: relative;
}

#contentContainerRight {
	background: url(../images/bg_swirls.jpg) right top repeat-y;
	width: 900px;
	display: block;
	float: left;
	position: relative;
}

#submenuArea {
	width: 687px;
	height: 27px;
	margin: 23px 0 0px 19px;
	position: relative;
	z-index: 11;
}

.button {
	height: 27px;
	text-indent: -5000px;
	overflow: hidden;
	display: block;
	float: left;
}

#howRefPayWorks {
	background: url(../images/how_refpay_works.gif) left top no-repeat;
	width: 133px;
	height: 13px;
	text-indent: -5000px;
	overflow: hidden;
	margin: 9px 10px 0 13px;
	float: left;
}

#buttonOfficials {
	width: 114px;
	height: 27px;
	background: url(../images/button_officials_off.gif) left top no-repeat;
}

#buttonOfficials:hover {
	background: url(../images/button_officials_on.gif) left top no-repeat;
}

#buttonOfficialsActive {
	width: 114px;
	height: 27px;
	background: url(../images/button_officials_on.gif) left top no-repeat;
}

#buttonSchools {
	width: 69px;
	height: 27px;
	background: url(../images/button_schools_off.gif) left top no-repeat;
}

#buttonSchools:hover {
	background: url(../images/button_schools_on.gif) left top no-repeat;
}

#buttonSchoolsActive {
	width: 69px;
	height: 27px;
	background: url(../images/button_schools_on.gif) left top no-repeat;
}

#buttonAssociations {
	width: 95px;
	height: 27px;
	background: url(../images/button_associations_off.gif) left top no-repeat;
}

#buttonAssociations:hover {
	background: url(../images/button_associations_on.gif) left top no-repeat;
}

#buttonAssociationsActive {
	width: 95px;
	height: 27px;
	background: url(../images/button_associations_on.gif) left top no-repeat;
}

#buttonMunicipalities {
	width: 105px;
	height: 27px;
	background: url(../images/button_municipalities_off.gif) left top no-repeat;
}

#buttonMunicipalities:hover {
	background: url(../images/button_municipalities_on.gif) left top no-repeat;
}

#buttonMunicipalitiesActive {
	width: 105px;
	height: 27px;
	background: url(../images/button_municipalities_on.gif) left top no-repeat;
}

#buttonPaymasters {
	width: 95px;
	height: 27px;
	background: url(../images/button_paymasters_off.gif) left top no-repeat;
}

#buttonPaymasters:hover {
	background: url(../images/button_paymasters_on.gif) left top no-repeat;
}

#buttonPaymastersActive {
	width: 95px;
	height: 27px;
	background: url(../images/button_paymasters_on.gif) left top no-repeat;
}

#contentArea {
	width: 687px;
	position: relative;
	left: 19px;
	top: -1px;
	z-index: 10;
	margin: 0 0 20px 0;
}

#contentAreaNoSubmenu {
	width: 687px;
	position: relative;
	left: 19px;
	top: -1px;
	z-index: 10;
	margin: 23px 0 20px 0;
}

#contentTL {
	width: 16px;
	height: 15px;
	background: url(../images/content_tl.gif) left top no-repeat;
	float: left;
}

#contentTLSubmenu {
	width: 16px;
	height: 15px;
	background: url(../images/content_tl_submenu.gif) left top no-repeat;
	float: left;
}

#contentT {
	width: 655px;
	height: 15px;
	background: url(../images/content_t.gif) left top repeat-x;
	float: left;
}

#contentTR {
	width: 16px;
	height: 15px;
	background: url(../images/content_tr.gif) left top no-repeat;
	float: left;
}

#contentTRSubmenu {
	width: 16px;
	height: 15px;
	background: url(../images/content_tr_submenu.gif) left top no-repeat;
	float: left;
}

#contentM {
	background: url(../images/content_m.gif) left top repeat-y;
	width: 687px;
	float: left;
	display: block;
}

#content {
	padding: 0 15px 0 15px;
}

#contentBL {
	width: 16px;
	height: 15px;
	background: url(../images/content_bl.gif) left top no-repeat;
	float: left;
}

#contentB {
	width: 655px;
	height: 15px;
	background: url(../images/content_b.gif) left top repeat-x;
	float: left;
	margin: 0 0 20px 0;
}

#contentBR {
	width: 16px;
	height: 15px;
	background: url(../images/content_br.gif) left top no-repeat;
	float: left;
}

#imageArea {
	width: 176px;
	font-size: 26px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	float: right;
	padding: 0 0 10px 0;
}

#securityBar {
	border-top: solid 1px #444;	
	padding: 10px 0 0 0;
	margin: 20px 0 0 0;
}

#securityBar .cell {
	font-size: 13px;
	font-weight: bold;
	float: left;
	margin: 0 20px 0 0;
	vertical-align: bottom;
}

#securityBar .cell2 {
	float: left;
	margin: 0 15px 0 0;
	vertical-align: bottom;
	height: 55px;
	background-color: #fff;
	border: solid 1px #333;
	padding: 5px;
}

#footerArea {
	width: 900px;
	height: 29px;
	background: url(../images/menu_bar_bg.gif) left top repeat-x;
	font-size: 10px;
	color: #FFF;
}

#copyright {
	margin: 10px 0 0 10px;
	float: left;
}

#footerArea a {
	color: #fff;
	text-decoration: none;
}

#bottomMenu {
	margin: 10px 10px 0 0;
	float: right;
}

#bottomMenu a {
	color: #fff;
	text-decoration: none;
}

#bottomMenu a:hover {
	text-decoration: underline;	
}

.imageRight {
	float: right;
	margin: 0 0 0 15px;
}

.imageLeft {
	float: left;
	margin: 0 15px 0 0;
}

.whiteBox {
	background-color: #fff;
}

.columnHalf {
	width: 288px;
	margin: 10px 20px 0 20px;
	float: left;
}

.posting {
	margin-bottom: 20px;
	border-bottom: dotted 1px #888;
	padding: 0 0 20px 0;
}

.posting p {
	font-style: italic;
	color: #666;
	font-size: 12px;
}

.postedBy {
	font-weight: bold;	
}

.postSignature {
	float: right;
}

.columnThird {
	width: 208px;
	float: left;
	margin: 10px 5px 0 5px;
}

.columnQuarter {
	width: 148px;
	float: left;
	margin: 10px 5px 0 5px;
	padding: 0 5px 0 0;
	font-size: 11px;
}

.homeTable {
	font-size: 11px;
	background: url(../images/table_top_border.gif) left top no-repeat;
}

.borderRight {
	border-right: dotted 1px #333;	
}

.columnLeft {
	width: 208px;
	float: left;
	margin: 0 20px 0 0;
	border-right: solid 1px #333;
	padding: 0 10px 0 0;
}

.columnLeft2 {
	width: 190px;
	float: left;
	margin: 0 10px 0 0;
}

.columnLeft3 {
	width: 190px;
	float: left;
	margin: 0 10px 0 0;
	border-right: solid 1px #333;
	border-left: solid 1px #333;
	padding: 0 10px 0 10px;
}

.headerButton {
	width: 150px;
	height: 21px;
	text-indent: -5000px;
	overflow: hidden;
	display: block;
	margin: 0 auto 8px auto;
}

#headerOfficials {
	background: url(../images/tab_refoff_off_small.gif) left top no-repeat;	
}

#headerOfficials:hover {
	background: url(../images/tab_refoff_on_small.gif) left top no-repeat;	
}

#headerAdministrators {
	background: url(../images/tab_payingadmin_off_small.gif) left top no-repeat;	
}

#headerAdministrators:hover {
	background: url(../images/tab_payingadmin_on_small.gif) left top no-repeat;	
}

#headerAssociations {
	background: url(../images/tab_offassoc_off_small.gif) left top no-repeat;	
}

#headerAssociations:hover {
	background: url(../images/tab_offassoc_on_small.gif) left top no-repeat;	
}

.pageTitle {
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 10px 0;
	border-bottom: solid 1px #000;
}

.subTitle {
	font-size: 16px;
	font-weight: bold;
}

.verticalSpacer {
	height: 15px;	
}

.header1 {
	display: block;
	font-weight: bold;
	font-size: 14px;
	background-color: #777;
	padding: 2px 0 2px 8px;
	color: #ececec;
}

#buttonSignup {
	width: 150px;
	height: 58px;
	background: url(../images/button_signup.png) left top no-repeat;
	display: block;
	text-indent: -5000px;
	overflow: hidden;
	margin: 0 auto 0 auto;
}

#buttonSignup:hover {
	background: url(../images/button_signup_over.png) left top no-repeat;	
}

#buttonChanges {
	width: 150px;
	height: 58px;
	background: url(../images/button_changes.png) left top no-repeat;
	display: block;
	text-indent: -5000px;
	overflow: hidden;
	margin: 0 auto 0 auto;
}

#buttonChanges:hover {
	background: url(../images/button_changes_over.png) left top no-repeat;	
}

.buttonHowWorksOfficials {
	border: none;
	color: #000;
	width: 121px;
	height: 152px;
	background: url(../images/howworks_officials_off.jpg) center bottom no-repeat;
	display: block;
	border: solid 1px #000;
	background-color: #fff;
	padding: 5px 0 0 0;
}

.buttonHowWorksSchools {
	border: none;
	color: #000;
	width: 121px;
	height: 152px;
	background: url(../images/howworks_schools_off.jpg) center bottom no-repeat;
	display: block;
	border: solid 1px #000;
	background-color: #fff;
	padding: 5px 0 0 0;
}

.buttonHowWorksAdmins {
	border: none;
	color: #000;
	width: 121px;
	height: 152px;
	background: url(../images/howworks_admin_off.jpg) center bottom no-repeat;
	display: block;
	border: solid 1px #000;
	background-color: #fff;
	padding: 5px 0 0 0;
}

.buttonHowWorksAuditors {
	border: none;
	color: #000;
	width: 121px;
	height: 152px;
	background: url(../images/howworks_auditor_off.jpg) center bottom no-repeat;
	display: block;
	border: solid 1px #000;
	background-color: #fff;
	padding: 5px 0 0 0;
}

.buttonHowWorksOfficials:hover {
	background-image: url(../images/howworks_officials_on.jpg);
}

.buttonHowWorksSchools:hover {
	background-image: url(../images/howworks_schools_on.jpg);
}

.buttonHowWorksAdmins:hover {
	background-image: url(../images/howworks_admin_on.jpg);
}

.buttonHowWorksAuditors:hover {
	background-image: url(../images/howworks_auditor_on.jpg);
}

.blackLink {
	color: #000;	
	text-decoration: none;
}

#enterDemoButton {
	width: 190px;
	height: 27px;
	background: url(../images/button_enter_demo_off.gif) left top no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	display: block;
}

#enterDemoButton:hover {
	background: url(../images/button_enter_demo_on.gif) left top no-repeat;
}

.contactFormBox {
	width: 300px;
}

.success {
	font-weight: bold;
	color: #360;
	font-size: 16px;
}

.warning {
	font-weight: bold;
	color: #900;
	font-size: 16px;
}

.supportBlock {
	padding: 0 0 0 55px;
	background-position: left top;
	background-repeat: no-repeat;
	height: 60px;
}

#supportFaq {
	background-image: url(../images/icon_faq.gif);
}

#supportForms {
	background-image: url(../images/icon_form.gif);
}

#supportSupport {
	background-image: url(../images/icon_email.gif);
}

#supportCosts {
	background-image: url(../images/icon_cost.gif);
}

#supportPhone {
	background-image: url(../images/icon_phone.gif);
}

#supportMail {
	background-image: url(../images/icon_snailmail.gif);
}

.footnote, .footnote a {
	font-size: 10px;
	color: #666;
}

.formItem {
	height: 30px;
	background: url(../images/icon_form2.gif) left top no-repeat;
	padding: 0 0 0 20px;
}

.feeTable {
	font-size:10px;
}

.feeTableTitle {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	background:url(../images/table_titlebg.gif) repeat-x;
	padding: 3px 0 3px 15px;
}

.feeTableTitleTiny {
	font-size: 9px;
	color: #fff;
	font-weight: bold;
}

.border {
	border: solid 1px #333;
}

.gMap {
	border: solid 1px #000;
	width: 400px;
	height: 200px;
	float: left;
	margin: 0 0 20px 0;
}

.chartTitle {
	background-color: #4b5273;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	border-bottom: solid 2px #eaeaea;
	border-top: solid 4px #333;
	background: url(../images/table_titlebg2.gif) left bottom repeat-x;
}

.chartHeading1 {
	background-color: #9d9d9d;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border-bottom: solid 2px #eaeaea;
	border-right: solid 1px #eaeaea;
	background: url(../images/table_header_bg.gif) left bottom repeat-x;
}

.chartHeading2 {
	background-color: #9d9d9d;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	border-bottom: solid 2px #eaeaea;
	border-left: solid 1px #eaeaea;
	background: url(../images/table_header_bg.gif) left bottom repeat-x;
}

.chartContent1 {
	background-color: #a2b4a0;
	color: #333;
	border-right: solid 1px #eaeaea;
	border-bottom: solid 4px #333;
	padding: 10px;
	font-weight: bold;
	background: url(../images/table_cell_bg.gif) left top repeat-x;
	line-height: 24px;
}

.chartContent2 {
	background-color: #a2b4a0;
	color: #333;
	padding: 10px;
	border-bottom: solid 4px #333;
	border-left: solid 1px #eaeaea;
	font-weight: bold;
	background: url(../images/table_cell_bg.gif) left top repeat-x;
	line-height: 24px;
}

.buttonMore {
	width: 53px;
	height: 14px;
	background: url(../images/button_more_off.gif) left top no-repeat;
	text-indent: -5000px;
	overflow: hidden;
	display: block;
	position: relative;
	bottom: 0;
	left: 0;
}

.buttonMore:hover {
	background: url(../images/button_more_on.gif) left top no-repeat;	
}

.contactBlock {
	display: block;
	width: 100%;
	float: left;
	clear: both;
}

.faqTitle {
	font-size: 20px;
	font-weight: bold;
	background: #333;
	color: #ececec;
	padding: 3px 0 3px 5px;
	border-bottom: solid 3px #363;
}

.indent1 {
	padding: 0 10px 0 15px;	
}

.buttonFAQ {
	text-indent: -5000px;
	overflow: hidden;
	width: 185px;
	height: 24px;
	background: url(../images/button_faq_off.gif) left top no-repeat;
	display: block;
}

.buttonFAQ:hover {
	background: url(../images/button_faq_on.gif) left top no-repeat;	
}

.buttonWhitePaper {
	text-indent: -5000px;
	overflow: hidden;
	width: 185px;
	height: 24px;
	background: url(../images/button_whitepaper_off.gif) left top no-repeat;
	display: block;
}

.buttonWhitePaper:hover {
	background: url(../images/button_whitepaper_on.gif) left top no-repeat;	
}

.buttonSignUp2 {
	text-indent: -5000px;
	overflow: hidden;
	width: 185px;
	height: 24px;
	background: url(../images/button_signup_off.gif) left top no-repeat;
	display: block;
}

.buttonSignUp2:hover {
	background: url(../images/button_signup_on.gif) left top no-repeat;	
}

.break {
	clear: both;	
}

.dottedBottom {
	background: url(../images/dottedline.gif) right bottom repeat-x;
}

