@charset "UTF-8";

/** FYI, I used icons from here: http://www.icojoy.com/lj/free/34al3/preview_full.jpg */

/** May want to switch this all over to "knob buttons toolbar icons by itweek" - also FOSS */

/************* HEADER - stuff at the top of the page ************/

#header {
	margin: 0 auto;
	margin-top: 10px;
	width: 775px;
}

	#header img {
		margin-top: 15px;
		float: left;
	}

	#header #status {
		float: right;
		width: 410px;	
	}
	
		#header #status #nomworth {
			height: 130px;
			width: 180px;
			margin: 20px;
			padding: 10px 0;
			background-color: #B4DC96;
			float: left;
			text-align: center;
		}
	
		#header #status #nomworth span {
			display: inline-block;
			font-size: 250%;
			font-weight: bold;
			margin: 25px 0;
		}
	
		#header #status #owing,
		#header #status #owed {
			height: 25px;
			width: 180px;
			float:right;
			text-align: center;
			padding: 20px 0;
		}
	
		#header #status #owing {
			background-color: #FF786E;
			margin: 20px 0;
		}
	
		#header #status #owed {
			background-color: #C8F0FF;
		}
	
/* Breadcrumb - top left */
div#breadcrumb { float: left; }

div#breadcrumb a {
    background: transparent url(/images/breadcrumb.gif) no-repeat center right;
    padding-right: 18px; /*adjust bullet image padding*/
}

/* Account Links - top right */
div#account_links {
    float:right;
}
 
/************* MAIN - the actual content ************/
body {
	color:	#4D4D4D;
	font-family: Arial,Verdana,sans-serif;
}

body.bordered {
	background: #E0F5FF url(/images/nomtracker_background.png) no-repeat fixed center top;
	background-attachment: fixed;
	width:	825px;
	margin: auto;
}

.content {
	margin: 0 20px;
}

	.content p {
		margin-left: 24px;
		margin-right: 24px;
	}

.rounded {
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;

	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius: 15px;
	border-bottom-right-radius: 15px;

	-moz-border-radius-topleft: 15px;
	-webkit-border-top-left-radius: 15px;
	border-top-left-radius: 15px;	

	-moz-border-radius-topright: 15px;
	-webkit-border-top-right-radius: 15px;
	border-top-right-radius: 15px;
}

div#main {
	clear: both;
	padding-top: 0.5em;
}

img {
	border: 0px;
	vertical-align: middle;
}

	/* Flash Messages */
	.informational, .success, .warning, .error {
		width: 750px;
		min-height: 20px;
		margin: 0 auto;
		color: #4D4D4D;
		text-align: center;
		padding: 15px;
	}
	
	.error {
		background-color: #FF786E;
	}
	
		.error ul {
			list-style: none;
		}
	
	.warning {
		background-color: #FFEBAA;
	}
	
	.informational {
		background-color: #C8F0FF;
	}
	
	.success {
		background-color: #B4DC96;
		
	}
	
	/* Links */
	a, a:visited {
		color: #3baef7;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}

	/* Headings */
	h1 {
		font-size: 18px;
		width: 735px;
		height: 20px;
		font-size: 18px;
		background-image: url('/images/header_background_full.png');
		margin-left: auto;
		margin-right: auto;
		border: 1px solid #B4B4B4;
		padding: 10px 20px;
	}
	
	h2 {
		padding-left: 20px;
	}
	
	#debts, .debt {
		background-color: #FF786E !important;
		color: #4D4D4D;
		font-weight: bold;
	}
	
	h1#debts {
		border: solid 1px #FF0000;
	}
	
	#credits, .credit {
		background-color: #B4DC96;
		color: #4D4D4D;
		font-weight: bold;
	}
	
	h1#credits {
		border: solid 1px #00652B;
	}
	
	/* Tables */
	table {
		font-size: 75%;
		margin-left: auto;
		margin-right: auto;
		width: 95%;
		border-spacing: 0px;
	}
	
	table, td, th {
		vertical-align: middle;
	}
	
	table tr th {
		border-bottom: solid 1px #000000;
		text-align: left;
		padding: .5em;
		background-color:#EFEFEF;
		text-transform: uppercase;
	}
	
	table tr td {
		border-bottom: solid 1px #CCCCCC;
		margin: 0px;
		padding: .5em;
	}
	
	table tr td.utility_links {
		border-left: solid 1px #CCCCCC;
		color: #4D4D4D;
		width: 20%;
	}
	
	/* The paginator */
	.paginator {
		background: transparent url(/images/breadcrumb.gif) no-repeat center left;
		padding-left: 16px;
		margin-left: 2.5em;
		margin-top: 5px;
		font-size: 75%;
	}
	
	.paginator a, .paginator a:visited {
		padding: 2px 4px;
		border: solid 1px #CCCCCC;
	}
	
	.paginator a:hover {
		background-color: #3baef7;
		color: white;
		text-decoration: none;
	}
	
	.paginator a:active {
		background-color: #0033FF;
		color: white;
	}
	
	.paginator .this_page {
		font-weight: bold;
		padding: 2px;
	}
	
	.paginator .more_text {
		font-style: italic;
		font-size: 90%;
	}
	
	/* FORMS */
	form {
		padding 0px;
		margin 0px;
	}
	
	input[type=text], input[type=password] {
		border: 1px solid #CCC;
		font-size: 1em;
		padding: 4px 6px 4px 6px;
		vertical-align: middle;
		width: 15em;
		margin-bottom: 5px;
	}
	
	input[readonly=readonly] {
		color: #969696;
	}
	
	input[type=button], input[type=submit] {
		color: #4D4D4D;
		border: 1px solid #64C8FF;
		background: #C8F0FF;
		width: 150px;
		height: 40px;
		
		-moz-border-radius-bottomleft: 20px;
		-webkit-border-bottom-left-radius: 20px;
		border-bottom-left-radius: 20px;

		-moz-border-radius-bottomright: 20px;
		-webkit-border-bottom-right-radius: 20px;
		border-bottom-right-radius: 20px;

		-moz-border-radius-topleft: 20px;
		-webkit-border-top-left-radius: 20px;
		border-top-left-radius: 20px;	

		-moz-border-radius-topright: 20px;
		-webkit-border-top-right-radius: 20px;
		border-top-right-radius: 20px;
		
		font-size: 18px;
		vertical-align: middle;
	}
	
		/* Specific to the Sign In form that appears in the top right */
		#sign_in_form form input[type=text], #sign_in_form form input[type=password] {
			width: 7em;
		}
		
		.signup_button {
			width: 200px;
		}
	
	/* misc. */
	#welcome_message {
		padding: .5em;
		border: solid 2px black;
		text-align: center;
		font-size: 140%;
		font-weight: bold;
	}
	
/************* FOOTER - everything at the bottom of the page ************/
div#footer {
	padding-top: 3em;
	font-size: 65%;
}

/*********** Transaction Autocomplete Form *************/
div.autocomplete {
  position:absolute;
  width:250px;
  background-color:white;
  border:1px solid #888;
  margin:0;
  padding:0;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  height:32px;
  cursor:pointer;
}

#add_new_transaction{
	margin-left: 25px;
	width: 460px;
	display: inline-block;
}

	#add_new_transaction .form_row {
		margin: 15px 0;
	}
	
	#add_new_transaction .form_row:first-child {
		margin-top: 25px;
	}
	
	#add_new_transaction input[type='radio'] {
		margin: 0;
	}
	
	input[type='text'],
	input[type='password'] {
		border: 1px solid #C8C8C8;
		height: 32px;
		line-height: 32px;
		color: #4D4D4D;
		
		-moz-border-radius-bottomleft: 8px;
		-webkit-border-bottom-left-radius: 8px;
		border-bottom-left-radius: 8px;

		-moz-border-radius-bottomright: 8px;
		-webkit-border-bottom-right-radius: 8px;
		border-bottom-right-radius: 8px;

		-moz-border-radius-topleft: 8px;
		-webkit-border-top-left-radius: 8px;
		border-top-left-radius: 8px;	

		-moz-border-radius-topright: 8px;
		-webkit-border-top-right-radius: 8px;
		border-top-right-radius: 8px;
	}
	
	#add_new_transaction input[type='submit'] {
		display: inline-block;
		width: 200px;
		margin-left: 125px;
		margin-bottom: 25px;
	}

.session {
	width: 875px; 
	margin: 0 auto;
}
	.session input[type='submit'] {
		border: 1px solid #64C8FF;		
		background: white;
		font-size: 16px;
		color: #FF6354;
	}

	.session .content_bubble {
		background-color: #C8F0FF;
		height: 300px;
		width: 420px;
		padding: 35px 0;
		float: left;
	
		-moz-border-radius-bottomleft: 20px;
		-webkit-border-bottom-left-radius: 20px;
		border-bottom-left-radius: 20px;

		-moz-border-radius-bottomright: 20px;
		-webkit-border-bottom-right-radius: 20px;
		border-bottom-right-radius: 20px;

		-moz-border-radius-topleft: 20px;
		-webkit-border-top-left-radius: 20px;
		border-top-left-radius: 20px;	

		-moz-border-radius-topright: 20px;
		-webkit-border-top-right-radius: 20px;
		border-top-right-radius: 20px;
	}
	
	.session .content_bubble p {
		padding: 0 20px;
	}
	
	.session #login_form {
		float: right;
	}
	
		.session .content_bubble .form_row {
			margin: 20px;
		}
		
		.session .content_bubble .form_row:first-child {
			margin-top: 35px;
		}

		.session .wide_content_bubble {
			width: 100%;
		}
	
	.overlap { 
		margin-top: -30px;
		position: relative;
		z-index: 1;
	}

.form_row .fieldWithErrors {
	display: inline;
	margin: 0;
	padding: 0;
}

#email_addresses {
	width: 735px;
}

#email_addresses ul {
	list-style: none;
	width: 100%;
}

#email_addresses li {
	border-top: 1px solid #4D4D4D;
	margin: 5px 0;
	padding: 5px;
}

#email_addresses li a.action {
	float: right;
}

#email_addresses li span,
#email_addresses li a {
	font-size: 12px;
}

#email_addresses li.verified span {
	color: #B4DC95;
}

#email_addresses li.unverified span {
	color: #FF786D;
}

#email_addresses ul li:first-child {
	border-top: none;
}