/* ----- The Checkbook page layout ---------------------------- */

/* The table containing the entire checkbook, including all 3 of its tabs. */
.checkbook
{
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 13px;
}

/* The table containing all the header info on the checkbook page. */
.checkbook .header
{
	font-size: 13px;
}

.checkbook .header .title
{
	font-size: 14px;
	background-color: #aaF;
	font-weight: bold;
	padding: 3px 5px 2px 5px;
}

.checkbook .header .bankName
{
	/*
	font-size: 12px;
	background-color: #aaF;
	font-style: italic;
	font-weight: bold;
	padding: 2px 5px 1px 5px;
	*/
	font-weight: normal;
}

.checkbook .header .message
{
	background-color: #DDD;
	padding: 4px 5px 3px 5px;
}

.checkbook .header .balance {
	font-weight: bold;
	background-color: #aaF;
	padding: 2px 5px 3px 5px;
}

.checkbook .footer
{
	background-color: #ccF;
	padding: 4px 7px 4px 6px;
}

.checkbook .footer a { text-decoration: none; }


/* ----- The Main Application page layout ---------------------------- */

.main
{
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 13px;
}

.main .header
{
	font-size: 13px;
}

.main .header .title
{
	font-size: 15px;
	background-color: #aaF;
	font-weight: bold;
	padding: 5px 7px 4px 7px;
}

.main .header .title a {
	text-decoration: none;
}

.main .footer
{
	background-color: #ccF;
	padding: 2px 5px 3px 5px;
	font-size: 13px;
}

.main .footer a { text-decoration: none; }

.main h1
{
	margin-top: 30px;
	font-size: 20px;
}

.main h2
{
	margin-top:  30px;
	font-size: 17px;
	/*
	background-color: #DDF;
	border-top: 1px solid #aaf;
	border-bottom: 1px solid #aaf;
	padding: 3px 7px 2px 7px;
	margin-top:  40px;
	margin-bottom: 13px;
	*/
}


/* ----- Formats that are true across all screens ------------------------------------ */

.helpError {
	color: red;
	font-size: 90%;
	padding-bottom: 3px;
}

.helpNote {
	color: black;
	font-size: 90%;
	padding-bottom: 3px;
}


/* ----- The Checkbook Tabs ------------------------------------ */

.checkbook .tabs {}

.checkbook .tabs td {
	/* Applies to all other tabs, below. */
	padding: 3px 5px 3px 5px;
	border-left: 1px solid #999;
	text-align: center;
	border-bottom: 1px solid #999;
	white-space: nowrap;
	border-top: 1px solid #999;
	background-color: #dedede;
}

.checkbook .tabs a { text-decoration: none; }

.checkbook .tabs .selected {
	background-color: #fff;		/* yellow = #ffa; */
	border-bottom-style: none;
}

.checkbook .tabs .normal {
}

.checkbook .tabs #leftTab {
	border-left: 1px none #999;
}


/* ----- The Main App Tabs ------------------------------------ */

.main .tabs {
}

.main .tabs td {
	/* Applies to all other tabs, below. */
	text-align: center;
	border-left: 1px solid #999;
	padding: 5px 10px 5px 10px;
	white-space: nowrap;
	background-color: #dedede;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

.main .tabs .selected {
	background-color: #fff;		/* yellow = #ffa; */
	border-bottom-style: none;
}

.main .tabs .normal {
}

.main .tabs #leftTab {
	border-left: 1px none #999;
}

.main .tabs .filler {
	width: 100%;
	text-align: right;
	color: #666;
}

.main .tabs a { text-decoration: none; }


/* ----- The Main Content cell ------------------------------ */

/* Note:  this can conflict with the settings for the top-level
   table, which has either the class "main" or "checkbook". */
.content {
	font-family: Arial, "MS Trebuchet", sans-serif;
	font-size: 14px;
}

.main .content {
	padding: 0px 15px 0px 15px;
}


/* ----- The "Pay" page ------------------------------------- */

/* The table surrounding the "pay" content. */
.pay {
	padding: 5px;
}

.pay .label {
	width: 30%;
	padding: 3px 7px 2px 0px;
	text-align: right;
}

.pay .input {
	width: 70%;
	padding: 3px 4px 2px 0px;
	text-align: left;
}

.pay .inputWithExample {
	width: 70%;
	padding: 3px 4px 0px 0px;
	text-align: left;
}

.pay .example {
	color: #555;
	padding: 0px 0px 2px 0px;
	font-size: 90%;
}

.pay .button {
	padding: 6px 0px 0px 0px;
	text-align: center;
}


/* ----- The "Ledger" (the History page) ------------------ */

/* Remember this is a completely unrelated page to the
   checkbook; it's in an iFrame. */

.checkbook iframe
{
	border: 0px solid #999;
}

.ledger {
	font-size: 13px;
	font-family: Arial, "MS Trebuchet", sans-serif;
	margin: 0px;
	padding: 0px;
}

.ledger .date
{
	text-align: left;
	padding: 3px 7px 1px 3px;
}

.ledger .toOrFrom
{
	text-align: right;
	border-left: 1px solid #999;
	padding: 3px 0px 1px 4px;
}

.ledger .person
{
	width: 100%;
	border-left: 1px solid #999;
	text-align: left;
	padding: 3px 0px 1px 4px;
}

.ledger .amount
{
	text-align: left;
	border-left: 1px solid #999;
	padding: 3px 7px 1px 5px;
	font-weight: bold;
}

.ledger .memo
{
	text-align: left;
	border-bottom: 1px solid #999;
	padding: 2px 0px 6px 3px;
	color: #888;
}


/* ----- The Account Info page ------------------------------------- */

/* The table surrounding the "account" content. */
.account {
	padding: 5px;
}

.account .label {
	padding: 3px 7px 2px 0px;
	text-align: right;
}

.account .input {
	padding: 3px 4px 2px 0px;
	text-align: left;
}

.account .button {
	padding: 6px 0px 0px 0px;
	text-align: center;
}


/* ----- The Signup screens ------------------------------------ */

.signup p {
	margin-left: 20px;
}


/* ----- The FAQ ------------------------------------------------ */

.faq {}

.faq h1 {
	background-color: #DDF;
	border-top: 1px solid #aaf;
	border-bottom: 1px solid #aaf;
	font-size: 20px;
	padding: 3px 7px 2px 7px;
	margin-top:  30px;
	margin-bottom: 13px;
}

#theFaqs a {
	text-decoration: none;
}

.faq .backToTop {
	font-weight: normal;
	float: right;
	font-size: 60%;
	padding-top: 5px;
	margin-left: 8px;
	white-space: nowrap;
}


/* ----- The (mild) site map ------------------------------------ */

.map {
	
}

.map .label {
	padding-left: 10px;
	white-space: nowrap;
	text-align: left;
}

.map .destination {
	
}

.map .header {
	font-weight: bold;
	padding-top: 15px;
	border-bottom: 1px solid #999;
}