/* common */

body {
	color: #222;
	font-family: "Lucida Grande", sans-serif;
	font-size: 10pt;
	margin:0px 0px 50px 65px;
	padding:0px;
	text-align: center;
	}

h1 {
	color: black;
	font-size: 18px;
	margin: 0;
	text-align: left;
	}

h2 {
	font-size: 12pt;
	margin-top: 32px;
	color: black;
	font-weight: bold;
	}

h3, .tableHeader {
	color: #808080;
	font-size: 10pt;
	font-weight: normal;
	margin-bottom: 4px;
	text-align: left;
	}

h4 {
	color: #808080;
	font-size: 10pt;
	font-weight: normal;
	margin-bottom: 9px;
	margin-top: 18px;
	text-align: left;
	}

a:link {
	color: #0000FF;
	text-decoration: none;
	}

a:hover {
	color: #FF8000;
	text-decoration: underline;
	}

a:visited {
	color: #0080FF;
	text-decoration: none;
	}

a:link.disabled, a:visited.disabled {
	color: gray;
	text-decoration: none;
	cursor: default;
	}

p { margin-bottom: 18px; }

ul { }

ul li { }

ol { }

ol li { }

table { }

th {
	padding: 3px 2em 3px 0;
	font-size: 10pt;
	font-weight: normal;
	}

tr { vertical-align: top; }

td, th { vertical-align: top; }

td {
	font-size: 10pt;
	padding: 3px 2em 3px 0;
	text-align: left;
	}

a.settingsButton {
    float: right;
    position: relative;
	font-family: HelveticaNeue,"Helvetica Neue", Helvetica, Arial, sans-serif;
	width: auto;
	margin: 0;
	padding: 5px 10px 5px 10px;	
	color: #404040; 
	text-decoration: none; 
	font-size: 13px; 	
	line-height: 13px;
	text-align: center;
	border:1px solid #ddd;
	text-shadow: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius:4px;
	background-image: -moz-linear-gradient(top, #ffffff, #eee);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eee));
	background-image: -webkit-linear-gradient(top, #ffffff, #eee);
	background-image: -o-linear-gradient(top, #ffffff, #eee);
	background-image: linear-gradient(to bottom, #ffffff, #eee);
}

a.settingsButton:hover {
    background-image:none;
    background-color:#eee;
}
a.settingsButton:active {
    background-image:none;	
    background-color:#e5e5e5;
}

a.settingsButton.disabled {
    color: #ccc;
}

.currencyID {
	text-align: left;
	color: #808080;
	font-size: 9pt;
	margin-top: 3px;
	margin-left: -50px;
	line-height: 13px;
    width:auto;
    clear:both;
	float: left;
    top:10px;
	}

.currencyLabel {
    text-align: left;
    color: #808080;
    font-size: 9pt;
    margin-top: 3px;
    margin-left: -50px;
    line-height: 13px;
    width:auto;
    clear:both;
    float: left;
    top:10px;
    }

.secondary { opacity: .5; }

#content {
	min-width:760px;
	max-width:940px;
	margin-right: 12px;
	position: relative;
	text-align: left;
	}

#summary {
	text-align: right;
	position: right;
	margin-top: 20px;
	margin-right: 60px;
	}

#summary .header {
	color: black;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 18px;
	text-align: right;
	}

.header {
	color: black;
	font-size: 16px;
	font-weight: bold;
	margin: 0;
	margin-bottom: 18px;
	text-align: left;
	}

.subHeader {
	font-size: 10pt;
	color: gray;
	}

#contentBody {
	margin-top: 28px;
	}

.tableHeader {
	margin-top: 25px;
	margin-bottom: 10px;
	}

.disabled {
	color: #888;
	}

.white {
	color: #FFF;
	}


/* financial */

.financial h2 {
	margin-top: 42pt;;
	text-align: left;
	}

.financial h4 {
	margin-left: 3px;
	}

.financial table {
	table-layout: fixed;
	width: 540pt;
	margin-left: 15px;
	border: 1px solid #888;
	}

.financial td {
	padding: 2px 4px 2px 4px;
	}

.financial td.accountHeader,
.financial td.checkNumberHeader,
.financial td.payeeHeader,
.financial td.tagsHeader,
.financial td.transferHeader {
		text-align: left;
		color: #808080;
		}

.financial td.amountHeader,
.financial td.balanceHeader,
.financial td.creditHeader,
.financial td.dateHeader,
.financial td.debitHeader {
		text-align: right;
		color: #808080;
		}

.financial td.account,
.financial td.checkNumber,
.financial td.payee,
.financial td.tags,
.financial td.transfer {
		text-align: left;
		}

.financial span.amount,
.financial td.amount,
.financial td.amountNegative,
.financial td.balance,
.financial td.balanceNegative,
.financial td.credit,
.financial td.date,
.financial td.debit {
		text-align: right;
		}

.financial span.amountNegative,
.financial td.amountNegative,
.financial td.balanceNegative,
.financial td.debit {
		color: red;
		}

.financial div.total {
	color: #808080;
	font-size: 10pt;
	font-weight: normal;
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: 3px;
	margin-right: 10px;
	text-align: left;
	}



/* placeholder */

.placeholder {
	margin-top: 16px;
	border-top: 4px #C0C0C0 solid;
	border-right: none;
	border-bottom: 1px #D6D6D6 solid;
	border-left: none;
	text-align: left;
	width: 70%;
	}

.placeholder h2 {
	margin-top: 4px;
	margin-top: 12px;
	}



/* tag cloud */

.tagCloud {
	margin-left: -65px;
	}

.tagCloud table {
	width: 100%;
	}

.tagCloud ul {
	-webkit-border-radius: 10px;
	border: 1px solid #ccc;
	font-size: 14pt;
	font-weight: bold;
	margin: 0px 0px 0px 20px;
	padding: 20px;
	text-align: center;
	}

.tagCloud li {
	display: inline-block;
	-webkit-border-radius: 8px;
	background-color: rgba(0,0,0,0.06);
	border: 1px solid rgb(200,200,200);
	padding: 3px;
	margin: 4px;
	vertical-align: middle;
	}

.tagCloud li:hover {background-color: rgba(0,0,0,0.1);}

.tagCloud .group1 {
	font-size: 1.0em;
	font-weight: 100;
	}

.tagCloud .group2 {
	font-size: 1.3em;
	font-weight: 200;
	}

.tagCloud .group3 {
	font-size: 1.6em;
	font-weight: 300;
	}

.tagCloud .group4 {
	font-size: 1.9em;
	font-weight: 400;
	}

.tagCloud .group5 {
	font-size: 2.2em;
	font-weight: 500;
	}

.tagCloud .group6 {
	font-size: 2.5em;
	font-weight: 600;
	}

.tagCloud .group1 a { opacity: 0.5;	}
.tagCloud .group2 a { opacity: 0.6;	}
.tagCloud .group3 a { opacity: 0.7;	}
.tagCloud .group4 a { opacity: 0.8;	}
.tagCloud .group5 a { opacity: 0.9;	}
.tagCloud .group6 a { opacity: 1.0;	}

.tagCloud .info {
	opacity: 0.5;
	text-align: center;
	}



/* overview */

#overview body,
#overview h2,
#overview h3,
#overview p {
	color: #d5d5d5;
	}

#overview #content {
	width: 100%;
	}

#overview h2 {
	font-size: 14pt;
	font-weight: normal;
	}

#overview {
	background: -webkit-gradient(linear, left top, left bottom, from(#5c5c5c), to(#252525));
	background-attachment: fixed;
	margin: 35px 30px;
	}

.part {
	-webkit-border-radius: 12px;
	padding: 10px 20px;
	margin-bottom: 30pt;
	background: -webkit-gradient(linear, left top, left bottom, from(black), to(#454545));
	color: white;
	-webkit-box-shadow: 0 0 30px white	;
	width: 350px;
	}

.part h2 {
	margin-top: 4px;
	margin-top: 12px;
	}

.upcomingTransactionsPart {
	float: left;
	}

.spendingTrendsPart {
	float: right;
	}

.spendingTrendsPart img {
	width: 100%;
	}

.spendingVSIncomePart {
	clear: both;
	float: left;
	}

.spendingVSIncomePart img {
	width: 100%;
	}

.creditTrendsPart {
	float: right;
	}

.creditTrendsPart img {
	width: 100%;
	}

.assetsPart {
	clear: both;
	float: left;
	}

.liabilitiesPart {
	float: right;
	}

.part td.amount,
.part td.balance,
.part td.balanceNegative,
.part td.date {
		text-align: right;
		}

.part td.status {
		width: 5%;
		}

.part td.amount,
.part td.date {
		width: 20%;
		}

.part td.payee {
		}

.part table {
	width: 100%;
	}

.part td.balanceNegative {
		color: red;
		}

.subtitle {
	opacity: .6;
	}

.legend {
	opacity: .5;
	text-align: center;
	}

.overdue {
	color: #800000;
	font-weight: bold;
	}

.due {
	color: #FF8000;
	font-weight: bold;
	}

.upcoming {
	color: #008000;
	font-weight: bold;
	}

/* all accounts */

table.allAccounts {
}

table.allAccounts a:link,
table.allAccounts a:hover,
table.allAccounts a:visited {
	color: #0000FF;
	}

table.allAccounts a:hover {
	text-decoration: underline;
	}


table.allAccounts td, th {
	padding: 3px 1em 3px 0;
	}

.allAccounts .balanceHeader,
.allAccounts .dateHeader,
.netWorth .balanceHeader {
	text-align: right;
	}

.allAccounts .balanceHeader {	width: 7em;		}

.hidden {
	color: #aaa;
}

.never {
	color: red;
}

.hidden.never {
	color: #faa;
}

table.allAccounts .hidden a {
	color: #aaf;
}

table.allAccounts .negative,
table.netWorth .negative {
	color: red;
	}

table.allAccounts .hidden.negative {
	color: #faa;
	}

table.allAccounts .accountTitle .normalAppearance:link,
table.allAccounts .accountTitle .normalAppearance:hover,
table.allAccounts .accountTitle .normalAppearance:visited {
	color: black;
	}

table.allAccounts .toggleVisibility .normalAppearance:link,
table.allAccounts .toggleVisibility .normalAppearance:hover,
table.allAccounts .toggleVisibility .normalAppearance:visited,
table.allAccounts .markReviewed .normalAppearance:link,
table.allAccounts .markReviewed .normalAppearance:hover,
table.allAccounts .markReviewed .normalAppearance:visited {
	display: none;
	}

.netWorth .plots {
	float: left;
	margin-right: 60px;
	}

table.netWorth td.total {
	font-weight: bold;
	}


/* transaction detail */

#transactionDetail #content, #categoryDetail #content {
	min-width: inherit;
	max-width: inherit;
}
#transactionDetail, #categoryDetail {
	margin: 0;
}
#transactionDetail #content, #categoryDetail #content {
	width: 100%;
}
#transactionDetail #contentBody, ##categoryDetail #contentBody {
	margin-top: 10px;
	}
.transactionDetail {
	width: 100%;
	}
.transactionDetail th,
.transactionDetail td {
	font-size: 0.9em;
	padding: 0 0.5em 0 0.5em;
	}
.transactionDetail th {
	color: black;
	font-weight: bold;
	padding-bottom: 1px;
	border-bottom: 1px solid #9E9E9E;
	}

.transactionDetail ul {
	list-style-type: none;
	display: relative;
	overflow: none;
	margin: 0;
	padding: 0;
	}

.transactionDetail li {
	display: inline;
	}

.transactionDetail li:after {
	content: ', ';
	}

.transactionDetail li:last-child:after {
	content: '';
	}

.transactionDetail .negative,
.tagTotal .negative {
	color: red;
	}

.transactionDetail .expanded {
	background-color: #fafafa;
	}

.transactionDetail th.dateHeader 		{	width: 3em;		}
.transactionDetail th.checkNumberHeader {	width: 3em;		}
.transactionDetail th.payeeHeader		{	width: 15em;	}
.transactionDetail th.tagsHeader		{	width: 15em;	}
.transactionDetail th.amountHeader		{	width: 7em;		}

.transactionDetail th.dateHeader,
.transactionDetail th.checkNumberHeader,
.transactionDetail th.amountHeader {
	text-align: right;
	}

.transactionDetail td.date,
.transactionDetail td.checkNumber,
.transactionDetail td.amount {
	text-align: right;
	}

.transactionDetail td.total {
	text-align: right;
	font-weight: bold;
	}

.quickzoom {
	background-color: rgba(200,226,242,1);
	cursor:pointer;
}

/* category detail */

#categoryDetail .currency {
	text-align: right;
	font-size: larger;
	font-weight: bold;
	margin-bottom: 1em;
	}
#categoryDetail .hierarchy {
	border-bottom: 1px solid black;
	margin-bottom: 2em;
	}
#categoryDetail .hierarchy .header {
	font-size: 1.1em;
	font-weight: bold;
	border-bottom: 1px solid black;
	}

/* category summary */

#categorySummary #content {
	width: 98%;
	}
#categorySummary .settingsButton {
	top: 6px;
	right: 5px;
	margin-left: 12px;
	}
#categorySummary .treeCollection {
	list-style-type: none;
	padding: 0px 8px 1px 0px;
	}
#categorySummary .tag {
	clear: both;
	padding: 0px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.02)), to(rgba(0,0,0,0.01)));
	-webkit-box-shadow: 4px 4px 15px #bbb;
	-webkit-border-radius: 6px;
	}
#categorySummary .tag + .tag {
	margin-top: 20px;
	}
#categorySummary .tagHeader {
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	padding: 4px 8px;
	font-size: 1.05em;
	background: rgb(5,90,160);
	color: white;
	text-shadow: 1px 1px #555;
	}
#categorySummary .tagName {}
#categorySummary .tagTotal {	float: right;	}
#categorySummary .transactionEntry {	display: block; padding: 8px 4px 4px 4px;	}
#categorySummary .transactionEntry th {	border: 0;	}
#categorySummary .transactionEntry .sortasc,
#categorySummary .transactionEntry .sortdesc {	color: #555;	}
#categorySummary .transactionEntry td {	padding: 1px 6px;	}
#categorySummary .tagHeader > .treeCollection {	margin-top: 20px;	}
#categorySummary .treeCollection .treeCollection {	padding: 14px 18px 22px 30px;	}
#categorySummary #viewAs {
	text-align: right;
	padding: 3px 3px 3px 0px;
	margin-bottom: -28px;
	-webkit-border-radius: 8px;
	background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(5,90,160,0.3)));
	}