/*  ---------------------------
/*  Mortgage Calculator
/*  See appropriate theme folder for other attributes
/*  --------------------------- */

/* mortgage calculator wrapper */
.wrapper_dti {
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	
	border: 1px solid #ccc;
	margin: 10px 0;
	color: #2e2e2e;
	text-shadow: none;
	padding: 15px;
	background-color: #fff;
	font-size: 14px;
}


.wrapper_dti table {
	width: 100%;
	border: none;
}

.wrapper_dti td, .wrapper_dti tr {
	border: none;
	text-align: center;
}

.wrapper_dti td {
	padding: 5px 0 0 0;
}

.wrapper_dti input {
	font-size: 14px;
	padding: 5px;
}

.wrapper_dti input:focus {
	background: #F9F7E0;
}

/* rounded corners */
.wrapper_dti .corners_dti {
	 -moz-border-radius: 5px;
	 -webkit-border-radius: 5px;
	 border-radius: 5px;
}

/* calculator title */
span.calcTitle_dti {
	font-size: 18px; 
}

/* ratio < 41% */
td.greatratio_dti {
	color: #2e2e2e;
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc !important;
	
	background: rgb(248,255,232); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(248,255,232,1) 0%, rgba(227,245,171,1) 33%, rgba(95,219,46,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,255,232,1)), color-stop(33%,rgba(227,245,171,1)), color-stop(100%,rgba(95,219,46,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(95,219,46,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(95,219,46,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(95,219,46,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(95,219,46,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#5fdb2e',GradientType=0 ); /* IE6-9 */
}

/* ratio < 43% */
td.goodratio_dti {
	color: #2e2e2e;
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc !important;
	
	background: rgb(248,255,232); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(248,255,232,1) 0%, rgba(227,245,171,1) 33%, rgba(183,223,45,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,255,232,1)), color-stop(33%,rgba(227,245,171,1)), color-stop(100%,rgba(183,223,45,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(248,255,232,1) 0%,rgba(227,245,171,1) 33%,rgba(183,223,45,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */

}

/* ratio < 45% */
td.averageratio_dti {
	color: #2e2e2e;
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc !important;
		
	background: rgb(254,252,234); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

}

/* ratio < 47% */
td.belowavgratio_dti {
	color: #2e2e2e;
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc !important;

	background: rgb(246,230,180); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */

}

/* ratio > 47% */
td.poorratio_dti {
	color: #fff;
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc !important;
	
	background: rgb(248,80,50); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,80,50,1)), color-stop(50%,rgba(241,111,92,1)), color-stop(51%,rgba(246,41,12,1)), color-stop(71%,rgba(240,47,23,1)), color-stop(100%,rgba(231,56,39,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */

}

/* description boxes */
td.description_dti {
	text-align: left;
	padding: 10px;
	border: 1px solid #ccc !important;
	background: #F9F7E0;
}

/* surrounds the summary / result */
.summarywrapper_dti {
	padding: 15px 0;
}

.summarywrapper_dti td.leftcol_dti {
	width: 50%;
	padding-right: 15px;
	text-align: right;
}

.summarywrapper_dti td.rightcol_dti {
	width: 50%;
	text-align: left;
}

.summarywrapper_dti td.leftcoldetail_dti {
	width: 75%;
	padding-right: 15px;
	text-align: right;
}

.summarywrapper_dti td.rightcoldetail_dti {
	width: 25%;
	text-align: left;
}

.summarywrapper_dti td.detailheader_dti {
	font-weight: bold;
	padding: 5px;
	border: 1px solid #ccc !important;
}

.wrapper_dti .firstrow_dti {
	padding-top: 20px;
}

.wrapper_dti .lastrow_dti {
	padding-bottom: 20px;
}

/* disclaimer container */
.wrapper_dti .tooltip_dti {
	float: right;
	width: auto; 
	height: auto;
}

.wrapper_dti .tip_wrap {
    background: #2e2e2e;
}

.wrapper_dti .tooltip_dti:hover {
	cursor: pointer
}

.wrapper_dti .tooltip_dti span {
	font-size: 10px;
	text-decoration: underline;
}

.wrapper_dti .credits_dti {
	width: 100% !important;
	text-align: center !important;
}

.wrapper_dti .credits_dti span {
	font-size: 10px;
	font-style: italic;
	color: #ccc;
}

.wrapper_dti .credits_dti a {
	color: #999;
}