/**********************************************************************************************

	CSS on Sails
	Title: Assista
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: May 2009

***********************************************************************************************
		
	1. BASE
			1.1 Reset
			1.2 Accessibility Navigation & Hide
			1.3 Clearfix
			1.4 Default Styles
	
  2. LAYOUT
			2.1 Clearfix
			2.2 Columns
			
			
	3. HEADER
	
  4. NAVIGATION
  
  5. CONTENT
	    5.1 Headers
	    5.2 Body
	    5.3 Pages
	    5.4 Forms

***********************************************************************************************/


/* 1. =BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

/* 1.1 Reset
-----------------------------------------------------------------------------------------------*/	

html, body, div, span,  object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
  background: transparent; 
  border: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

body { 
  line-height: 1; 
}

p{
  text-align:justify;
}

ol, ul { 
  list-style: none; 
}

blockquote, q { 
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after { 
  content: ''; 
  content: none; 
}

a, ins, del { 
  text-decoration: none; 
}

button, input, textarea, select, option, optgroup {
  font: inherit;
  margin: 0;
}

/* 1.2 Accessibility Navigation & Hide
-----------------------------------------------------------------------------------------------*/	

ol#accessibility-nav,
.hide { 
  height: 1px;
  left: -999em;
  position: absolute;
  top: -999em;
  width: 1px;
}

/* 1.3 Default Styles
-----------------------------------------------------------------------------------------------*/

body { 
  background: #fff url("../images/bg_body.png") repeat-x;
  color: #666;
  font: normal 62.5% Verdana, Tahoma, Arial, sans-serif; /* 10px */
}

del { 
  text-decoration: line-through; 
}

table { 
  border-collapse: collapse;
  border-spacing: 0;
}

address { 
  font-style: normal;
}

abbr, acronym { 
  border-bottom: 1px dotted #999;
  cursor: help;
}

a {
  color: #0096ca;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* 1.4 Combined Styles
-----------------------------------------------------------------------------------------------*/

#header,
#navigation,
#content,
#content-2nd,
#footer {
  font-size: 1.3em;
}

#header,
.role-main,
.overlay .appendix,
.overlay fieldset h2,
span.calculate {
  font-family: Times, "Times New Roman", Georgia, serif;
}

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

#header,
#navigation,
#footer,
#content-2nd,
.wrapper {
  width: 943px;
  margin: 0 auto;
}

#header,
#navigation {
  padding: 0 9px;
  width: 925px;
}

/* 2.1 Clearfix
-----------------------------------------------------------------------------------------------*/

#header:after,
#navigation:after,
.overlay fieldset div:after,
.overlay fieldset .group:after,
#footer .seals:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

/* 2.2 Columns
-----------------------------------------------------------------------------------------------*/

.columns {
  padding-bottom: 26px;
  background: url("../images/bg_columns.png") repeat-y;
}

.columns.alone {
  background: none;
}

.columns:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: left;
}

.columns .primary,
.columns .secondary {
  float: left;
}

.columns .primary {
  width: 266px;
  padding: 0 22px 0 30px;
}

.columns.image {
  padding-bottom: 0;
}

.columns.image .primary {
  padding-left: 9px;
}

.columns.image img {
  display: block;
}

.columns .secondary {
  width: 206px;
  padding: 0 22px 0 20px;
}

.columns .tertiary {
  width: 266px; 
  padding: 0 30px 0 79px;
  float: right;
}

/* 3. =HEADER
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#header {
  padding: 67px 0 39px;
}

/* 1px padding left to fix strange behavior (1px of text visible) */

.company-name {
  display: block;
  position: relative; 
}

.company-name span {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
}

#header .company-name {
  float: left;
  margin-top: 12px;
  width: 265px;
  height: 58px;
  padding-left: 1px;
}

#header .company-name span {
  background-image: url("../images/logo_assista.png");
}

#header p {
  text-align: right;
  width: 649px;
  padding-left: 10px;
  line-height: 1.026em; /* 39px → 40px */
  float: right;
  color: #f8901b;
  font-size: 3em; /* 13px → 39px */
  text-shadow: #c3dde5 2px 2px 3px;
}

#header p strong {
  display: block;
  font-size: 1.103em; /* 39px → 43px */
  line-height: 0.93em; /* 43px → 40px */
  font-weight: normal;
  color: #0198cd;
}

/* 4. =NAVIGATION
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#navigation li {
  float: left;
  padding-right: 1px;
}

#navigation a {
  display: block;
  width: 184px;
  height: 74px;
  position: relative;
  text-align: center;
  color: #000;
  line-height: 46px;
  font-size: 1.154em; /* 13px → 15px */
}

#navigation a span {
  background-image: url("../images/bg_navigation.png");
  background-repeat: no-repeat;
	height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.nav-home      a span { background-position: 0 0; }
.nav-request      a span { background-position: -185px 0; }
.nav-work      a span { background-position: -370px 0; }
.nav-resources a span { background-position: -555px 0; }
.nav-questions a span { background-position: -740px 0; }

/*#nav-home .nav-home a span,*/
.nav-home a:hover span,
.nav-home a:focus  span { background-position: 0 -74px; }

#nav-request .nav-request a span,
.nav-request a:hover span,
.nav-request a:focus  span { background-position: -185px -74px; }

#nav-work .nav-work a span,
.nav-work a:hover span,
.nav-work a:focus  span { background-position: -370px -74px; }

#nav-resources .nav-resources a span,
.nav-resources a:hover span,
.nav-resources a:focus span { background-position: -555px -74px; }

#nav-questions .nav-questions a span,
.nav-questions a:hover span,
.nav-questions a:focus span { background-position: -740px -74px; }


/* 5. =CONTENT
-----------------------------------------------------------------------------------------------
===============================================================================================*/

#content {
  background: #e1f7fe url("../images/bg_content.png") repeat-x;
}

#content-2nd div {
  margin-right: 625px;
  margin-left: 30px;
}

/* 5.1 Promo
-----------------------------------------------------------------------------------------------*/

.promo {
  background: url("../images/border_promo.png") no-repeat;
}

.promo .inner {
  background: url("../images/border_promo_bottom.png") no-repeat 0 100%;
  padding-bottom: 11px;
}

.promo.paged .inner {
  background-position: -943px 100%;
}

.promo .photo {
  background: url("../../_media/images/pic_family_home.jpg") no-repeat 244px 100%; 
  padding-bottom: 10px; 
  min-height: 230px;
}

.promo .empty .photo {
  height: 230px;
  background-image: url("../../_media/images/pic_home.jpg");
  background-position: 11px 100%;
}

#nav-request .promo .photo,
#nav-questions .promo .photo {
  background-image: url("../../_media/images/pic_home_crop.jpg");
}

#nav-request .promo .pages,
#nav-questions .promo .pages {
  background-position: -235px 0;
}

#nav-request .promo .inner,
#nav-questions .promo .inner {
  background-position: -1886px 100%;
}

/* 5.2 Headers
-----------------------------------------------------------------------------------------------*/

.role-main {
  font-weight: normal;
  font-size: 2em; /* 13px → 26px */
  line-height: 0.846em; /* 26px → 22px */
  color: #0a5a9e;
}

/* 5.3 Body
-----------------------------------------------------------------------------------------------*/

.body {
  line-height: 1.462em; /* 13px → 19px */
}

.body p {
 margin-top: 5px
}

.body .role-main {
  margin-top: 11px;
}

.body li {
  background: url("../images/bullet_list.png") no-repeat 0 0.231em; /* 13px → 3px */
  padding-left: 27px;
  margin-top: 13px;
  font-style: italic;
}

.body em {
  text-transform: uppercase;
  font-style: normal;
}

/* notes */

.notes {
  font-size: 0.846em; /* 13px → 11px */
  color: #666;
}

.notes .role-main {
  font-size: 1.455em; /* 11px → 16px */
  line-height: 1.375em; /* 16px → 22px */
}

.notes ul {
  margin-bottom: 14px;
}

.notes li {
  background-image: url("../images/bullet_notes.png");
  background-position: 0 0.818em; /* 11px → 9px */
  font-style: normal;
  margin-top: 0;
  padding-left: 5px;
  color: #323232;
}

/* info */

.info .role-main {
  font-size: 1.538em; /* 13px → 20px */
  line-height: 1.1em; /* 20px → 22px */
  font-style: italic;
}

.info ul {
  line-height: 1.615em; /* 13px → 21px */
  margin-bottom: 28px;
}

.info li {
  display: inline;
  background: none;
  padding: 0;
  color: #666;
  font-style: normal;
}

/* calculate button */

span.calculate,
span.calculate * {
  display: block;
}

span.calculate {
  background: url("../images/ico_calculator.png") no-repeat 100% 0;
  padding-right: 55px;
  font-size: 1.615em; /* 13px → 21px */
  margin-bottom: 5px;
}

span.calculate a {
  color: #fff;
}

span.calculate a,
span.calculate strong {
  background: url("../images/bg_button.png") no-repeat; 
}

span.calculate strong {
  background-position: 100% -52px;
  padding: 5px 15px;
  line-height: 42px;
  font-weight: normal;
  text-align: center;
}

.info span.calculate {
  margin-top: 10px;
}

span.calculate.alt a {
  background-position: 0 -104px;
}

span.calculate.alt strong {
  background-position: 100% -156px;
}


.debt-details {
	overflow: hidden;
	font-size: .733em;
	margin: 0 0 3em;
}

.debt-details fieldset {
	width: 250px;
	float: left;
	font-style: normal;
}

.debt-details fieldset.key {
	float: right;
	text-align: right;
}

.debt-details .legend {
	color: #0a5a9e;
	display: block;
	border-bottom: 1px solid #b2dfef;
	text-align: center;
	margin: 0 0 .5em;
	font: italic bold 1.5em "Times New Roman", Times, serif;
}

.debt-details fieldset li {
	font-style: normal;
	background: none;
	color: #0a5a9e;
	margin: 0;
	padding: 0 0 5px;
	overflow: hidden;
}

.debt-details fieldset input,
.debt-details fieldset select {
	width: 96px;
	float: right;
	padding: 2px;
}

.debt-details fieldset select {
	width: 102px;
}

.debt-details fieldset li label,
.debt-details fieldset dt {
	float: left;
	width: 135px;
	clear: left;
	text-align: right;
}

.debt-details fieldset dt {
	width: 170px;
	padding: 0 30px 5px 0;
	color: #0a5a9e;
	float: left;
	clear: left;
}

.debt-details fieldset dd {
	float: left;
	width: 12px;
	height: 12px;
	margin: 5px 0 0;
	background: #3b5c97;
	text-align: left;
	text-indent: -9999em;
}

.debt-details .counselling {
	background: #7d9ed1;
}

.debt-details .minimum {
	background: #b9c0c8;
}

.debt-details .assista {
	background: #f8901b;
}

.debt-details .calculate {
	float: left;
	display: inline;
	clear: both;
	margin: .8em 0 0 190px;
	color: #fff;
	font: 1.3em/37px "Times New Roman", Times, serif;
	background: url(../images/bg_button2.png) no-repeat 100% 0%;
	padding: 0 16px 0 0;
}

.debt-details .calculate strong {
	float: left;
	font-weight: normal;
	background: #ef7f18 url(../images/bg_button2.png) no-repeat 0 0;
	padding: 0 6px 0 18px;
}

.debt-calculator .calculator {
	font-size: .667em;
	text-align: center;
	line-height: 1.4;
	width: 100%;
	border: 1px solid #b2dfef;
	background: url(../images/bg_calculator_th.png) no-repeat 0 60px;
	border-width: 1px 0;
}

.debt-calculator .calculator th,
.debt-calculator .calculator td {
	padding: 17px 5px;
	border-top: 1px solid #b2dfef;
	width: 90px;
}

.debt-calculator .calculator thead th {
	background: url(../images/bg_calculator_thead.png) repeat-x;
	color: #0a5a9e;
	padding: 15px 5px;
	font-weight: normal;
 	border: 1px solid #fff;
	border-width: 1px 0;
}

.debt-calculator .calculator thead .assista {
	vertical-align: middle;
	padding: 0 5px;
}

.debt-calculator .calculator thead th.loan {
	padding-left: 125px;
}

.debt-calculator .calculator tbody {
	border-top: 1px solid #b2dfef;
}
.debt-calculator .calculator tbody th { 
	width: 108px;
	color: #0a5a9e;
	font-weight: normal;
	text-align: left;
}

.debt-calculator .calculator tbody td.even {
	background: #eff0f1;
}

.debt-calculator .calculator tbody td.special {
	background: #feeedb;
}

.debt-calculator .calculator tbody td.special b {
	font-weight: normal;
}


.debt-calculator .graphs {
	margin: 4em 0 0;
	font-size: .667em;
}

.graphs {
	vertical-align: top;
}

#max_monthly_mark, #min_monthly_mark, #max_totcost {
	/*position: absolute;
	left: 0;
	top: 0;*/
}
.graphs th {
	text-align: left;
	font-weight: normal;
	color: #0a5a9e;
}

.graphscontainer {
	padding: 8px 0 5px 0;
	background: #ecedef;
}

.graphscontainer table {
	padding: 10px 0 10px 0;
	width: 90px;
	float: right;
	height: 160px;
}

.graphscontainer table table {
	padding: 0;
}

.graphscontainer table td {
	vertical-align: bottom;
}

.graphscontainer img { 
	margin-right: 4px; 
}

.graphscontainer .labels {
	float: left;
	line-height: 1.6;
	display: inline;
	background: url(../images/scale.gif) no-repeat 100% 0%;
	padding-right: 10px;
	padding: 0 10px 0 0;
	margin: 13px 10px -30px 0;
	width: 60px;
}

.graphscontainer span {
	display: block;
	height: 60px;
	margin-right: 4px;
	text-align: right;
	color: #0a5a9e;
}
	

/* 5.4 Pages
-----------------------------------------------------------------------------------------------*/

.pages {
  margin: 0 699px 0 9px;
  padding: 11px 0 0 2px;
  background: url("../images/bg_pages.png") no-repeat;
}

.pages .role-main {
  color: #f8901b;
  text-align: center;
  padding: 10px 5px 5px;
}

.pages.simple .role-main {
  padding-top: 21px;
  padding-bottom: 16px;
}

.pages ul {
  font-size: 1.231em; /* 13px → 16px */
}

.pages li {
  margin-top: 2px; 
}

.pages li:hover {
  background: url("../images/bg_pages_item.png") repeat-y;
}

.pages li a {
  display: block;
  background-image: url("../images/icon_pages.png");
  background-repeat: no-repeat;
  padding: 5px 0 4px 67px;
  color: #323232;
}

.pages.simple li a {
  background-image: url("../images/bullet_list.png");
  background-position: 39px 50%;
}

.pages li.page-cards       a { background-position: 23px -28px; }
.pages li.page-bills       a { background-position: 23px -113px; }
.pages li.page-loans       a { background-position: 23px -198px; }
.pages li.page-collections a { background-position: 23px -286px; }
.pages li.page-autos       a { background-position: 23px -373px; }

.pages.list li a {
  background: none;
}

/* 5.5 Overlay
-----------------------------------------------------------------------------------------------*/

.overlay {
  float: right;
  width: 581px;
  margin: 11px 30px 0 0;
}

.overlay.compact {
  width: 347px;
  padding-top: 4px;
}

.overlay.copy {
  width: 524px;
  margin-top: 35px;
  margin-right: 29px;
  background: url("../images/bg_copy.png") no-repeat;
  padding: 20px 30px 0;
  font-size: 1.154em; /* 13px → 15px */
  line-height: 1.6em; /* 15px → 24px */
}

.overlay.copy p {
  margin-bottom: 30px;
}

.overlay.copy .role-main {
  font-size: 1.733em; /* 15px → 26px */
}

/* 5.6 Form
-----------------------------------------------------------------------------------------------*/

.overlay .consultation,
.overlay .consultation fieldset {
  background: url("../images/bg_form.png") no-repeat;
}

.overlay .consultation {
  background-position: 0 0;
}

.overlay .consultation fieldset {
  background-position: -928px 100%;
  padding: 22px 35px 16px;
  color: #fff;
  font-size: 1.077em; /* 13px → 14px */
}

.overlay .consultation h2 {
  text-align: center;
  font-size: 2.143em; /* 14px → 30px */
  text-shadow: #ef751b 0 2px 2px;
}

.overlay .consultation p {
  text-align: center;
  font-size: 0.857em; /* 14px → 12px */
  padding-bottom: 5px;
}

.overlay .consultation div {
  margin-top: 24px;
  padding-right: 20px;
}

.overlay .consultation div.submit {
  margin-top: 30px;
  margin-bottom: 30px;
}

.overlay .consultation div label {
  width: 230px;
  padding-right: 50px;
  float: left;
  text-align: right;
}

.overlay .consultation div label span.note {
  display: block;
  font-size: 0.786em; /* 14px → 11px */
}

.overlay .consultation input.text,
.overlay .consultation select,
.overlay .consultation .group {
  float: left;
}

.overlay .consultation input.text,
.overlay .consultation select {
  color: #323232;
  border-width: 1px;
  border-style: solid;
  border-color: #9098a0 #9098a0 #c6cbd0 #9098a0;
}

.overlay .consultation input.text {
  width: 205px;
  padding: 0;
  background-color: #fff;
  padding: 0 2px;
}

.overlay .consultation select {
  width: 165px;
  background-color: #dedede;
}

.overlay .consultation input.text.part {
  float: left;
  width: 57px;
  margin-left: 10px;
}

.overlay .consultation input.text.part.first {
  margin-left: 0;
}

.overlay button {
  height: 53px;
  width: 217px;
  margin: 0 auto;
  display: block;
  border: 0;
  padding: 0;
  background: url("../images/bg_submit.png") no-repeat 50% 0;
  text-indent: -1000em;
  cursor: pointer;
}

.overlay button.short {
  width: 78px;
  height: 56px;
  background-image: url("../images/bg_submit_compact.png");
}


.overlay .appendix {
  margin: 12px 32px 0 54px;
  padding: 0 5px;
  text-align: center;
  background: url("../images/bg_appendix.png") no-repeat 0 0;
  color: #f8901b;
  font-weight: bold;
  font-size: 2em; /* 13px → 26px */
  line-height: 1.04em;
}

.overlay .appendix strong {
  display: block;
  padding: 15px 50px 5px;
}

/* 5.7 Form (Compact)
-----------------------------------------------------------------------------------------------*/

.overlay.compact .appendix {
  margin: 0 24px 0 20px;
  background-image: url("../images/bg_appendix_compact.png");
  font-size: 1.308em; /* 13px → 17px */
}

.overlay.compact .appendix strong {
  padding: 10px 10px 3px;
  background: url("../images/bg_appendix_bottom.png") repeat-x 0 100%;
}

.overlay.compact form {
  background-position: -581px 0;
}

.overlay.compact fieldset {
  background-position: -1509px 100%;
  padding: 15px 10px 16px;
}

.overlay.compact fieldset div {
  margin-top: 7px;
  padding-right: 10px;
}

.overlay.compact fieldset label {
padding-right:20px;
width:70px;
text-align:right;
}

.overlay.compact input.text {
  width: 211px;
}

.overlay.compact input.text.part {
  width: 59px;
  margin-left: 11px;
}

.overlay.compact .submit {
  margin: 20px 0 9px;
}

/* 6. FOOTER
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

#footer {
  clear: both;
  font-size: 1.1em; /* 10px → 11px */
  padding: 30px 0 15px;
}

#footer img {
  margin-bottom: 5px;
}

#footer img,
#footer li span {
  display: block;
}

#footer li {
  display: inline;
  padding-left: 2ex;
}

#footer ul li.first {
  padding-left: 0;
}

#footer ul,
#footer address {
  text-align: center;
}

#footer .seals {
  text-align: left;
  color: #0b0909;
  font-size: 0.818em; /* 11px → 9px */
  padding-bottom: 30px;
}

#footer .seals li {  
  float: left;
  width: 250px;
  padding-left: 7px;
}

#footer .seals.triple {
	width: 765px;
	margin: 0 0 0 140px;
}

#footer address {
  color: #ccc; 
}

#footer .company-name {
  font-size: 0.455em; /* 11px → 5px */
  margin: 10px auto;
  width: 103px;
  height: 22px;
}

#footer .company-name span {
  background-image: url("../images/logo_assista_footer.png");
}