/* ============ Global Styles ============ */
body {background: #0079c1; font-size: 12px; font-family:Arial, Helvetica, sans-serif; line-height:1.2em; color: #333;}
:focus {outline: 0;}
p { margin: 10px 0; }
.clear { clear: both;}
.legal { font-size: 10px; color: #777; }
a img {border: none; }
a { color: #0079c1; text-decoration: none; }
table { border-collapse: collapse; font-size: 12px;}
strong { font-weight: bold; }
/* ============ Structure ============ */
#container {
	width: 922px;
	margin: 0 auto;
}
#content {
	padding: 21px 78px 10px 80px;
	background: url(../../../images/calculators/hmcia/backgrounds/contentBG_en.gif) repeat-y;
}
#header {
	width: 782px; height: 66px;
	margin: 20px 0 0 0;
	padding: 0 70px;
	background: url(../../../images/calculators/hmcia/header_en.gif);
}
#header a{
	display: block;
	float: right;
	width: 45px; height: 13px;
	background: url(../../../images/calculators/hmcia/close_en.gif);
	text-indent: -300000px;
}
ul#topLinks {
	list-style: inside none;
	float: right;
	margin: 10px 0 0 0;
}
ul#topLinks li {float: left; margin-left: 10px; background: url(../../../images/calculators/hmcia/altarrow_en.gif) center left no-repeat; padding-left: 10px;}
#footer {
	width: 782px;
	padding: 20px 70px;
	background: url(../../../images/calculators/hmcia/footer_en.gif) top left no-repeat;
	font-size: 10px;
	color: #ccddee;
}
#footer p{ margin: 0; }
#legal, #legal a {
	margin: 0 auto 15px auto;
	width: 922px;
	color: #fff;
	font-size: 11px;
}
.inforow {
	width: 332px; /*height: 63px;*/
	background: url(../../../images/calculators/hmcia/backgrounds/fieldbg_en.gif) top left no-repeat;
	padding: 7px 0 7px 18px;
}
#downpayment {height: 132px;}
.inforow input {
	width: 53px; height: 28px;
	background: url(../../../images/calculators/hmcia/backgrounds/inputbg_en.gif) top left no-repeat;
	border: none;
	position: relative;
	top: -25px;
	left: 188px;
	padding: 0 0 0 12px;
	padding: 6px 0 0 12px\0/;
}
#income.inforow input { top: 0px; left: 47px; }
#payments.inforow input { top: 0px; left: -52px; }
#downpayment.inforow input { background: url(../../../images/calculators/hmcia/backgrounds/dpinputbg_en.gif) top left no-repeat; width: 69px; }
#formcontainer{background: url(../../../images/calculators/hmcia/backgrounds/contbg_en.gif) top left repeat-y;}
#info { width: 301px; float: left; }
#results {
	background: url(../../../images/calculators/hmcia/backgrounds/resultsbg_en.gif) bottom right no-repeat;
	float: left;
	width: 393px;
	padding: 0 10px 0 50px;
	min-height: 459px;
}
#top{
	width: 754px; height: 20px;
	background: url(../../../images/calculators/hmcia/top_en.gif) top left no-repeat;
	margin-top: 16px;
}
#bottom{
	width: 754px; height: 15px;
	background: url(../../../images/calculators/hmcia/bottom_en.gif) top left no-repeat;
	margin-bottom: 16px;
}
.resultsdesc {
	padding: 10px 0 10px 31px;
	background:  url(../../../images/calculators/hmcia/borrowicon_en.gif) top left no-repeat;
	margin: 2px 0;
	float: left;
}
#payment {background:  url(../../../images/calculators/hmcia/paymenticon_en.gif) top left no-repeat;}
#price {background:  url(../../../images/calculators/hmcia/priceicon_en.gif) top left no-repeat;}
.resultfield {
	display: inline-block;
	width: 136px; height: 24px;
	background: url(../../../images/calculators/hmcia/backgrounds/resultsfieldbg_en.gif) top left no-repeat;
	float: right;
	color: #0079c1;
	font-size: 18px;
	padding: 9px 9px 0 9px;
	margin: 4px 40px 0 0;
}
#resultstable {
	width: 392px;
	font-size: 11px;
}
#resultstablecont {
	background: #fff url(../../../images/calculators/hmcia/backgrounds/resultstabelbg_en.gif) bottom left no-repeat;
	padding: 0 6px 8px 6px;
	width: 392px;
	margin-left: -11px;
}
#resultstable tr th{
	height: 31px;
	background: url(../../../images/calculators/hmcia/backgrounds/trbg_en.gif) top left repeat-x;
	border: 1px solid #dadada;
	color: #fff;
	text-align: left;
	padding: 5px 8px;
}
#resultstable td{
	border: 1px solid #dadada;
	padding-left: 8px;
	height: 20px;
}
#principalop1 { width: 70px; }
#resultstable td.first {padding-left: 17px;}
#resultstable th:first-child {text-align: right;}
.higlightrow {
	font-weight: bold;
	background: #edfcff;
}
#resultstable .blankrow { height: 8px; }
#resultstable tr.dprow td, #resultstable tr .higlightrow, #resultstable .blankrow { border-top: none; border-bottom: none; }
#resultstable .redBold { font-weight: bold; color: red; }
#maxrow, #totalrow { font-weight: bold; }
#findoutbtn { display: inline-block; width: 80px; height: 31px; background: url(../../../images/calculators/hmcia/findoutbtn_en.gif) top left no-repeat; text-indent: -30000px; margin-top: -10px;}
#tips {
	float: left;
}
#tools { width: 225px; float: right;}
#tools ul { margin: 10px 0 0 10px; padding: 0; }
#tools ul li { list-style: none; background: url(../../../images/calculators/hmcia/redarrow_en.gif) center left no-repeat; padding-left: 10px; }
#tools ul li a { font-weight: bold; }
.infodot {
	display: block;
	width: 15px; height: 15px;
	background: url(../../../images/calculators/hmcia/infodot_en.gif);
	float:left;
	margin: 3px 0 0 5px;
}
.infodot:hover, .didyouknow:hover {cursor: pointer;}
#income .infodot { 
	margin: 0; padding:0;
	position: relative; 
	top: 15px;
	right: 94px;
}
#payments .infodot {
    margin: 0;
    padding: 0;
    position: relative;
    right: 77px;
    top: 15px;
}
.infodotinfo, .DYKinfo, infodotinfobottom {display: none;}
#incomeinfodot:hover .infodotinfo, 
#paymentsinfodot:hover .infodotinfo, 
#taxesinfodot:hover .infodotinfo, 
#heatinginfodot:hover .infodotinfo, 
#condoinfodot:hover .infodotinfo, 
#downpaymentinfodot:hover .infodotinfo,
#paymentsDYK:hover .DYKinfo, 
#downpaymentDYK:hover .DYKinfo {
	display: block;
	position: relative;
	top: -30px;
	left: 20px;
	width: 330px;
	min-height: 40px;
	z-index: 100;
	padding: 10px;
	text-indent: 0px;
	background: url(../../../images/calculators/hmcia/popbg_en.gif) top left no-repeat;
	padding: 10px 20px 0 20px;
}
#incomeinfodot:hover .infodotinfobottom,
#paymentsinfodot:hover .infodotinfobottom, 
#taxesinfodot:hover .infodotinfobottom, 
#heatinginfodot:hover .infodotinfobottom, 
#condoinfodot:hover .infodotinfobottom, 
#downpaymentinfodot:hover .infodotinfobottom,
#paymentsDYK:hover .DYKinfobottom, 
#downpaymentDYK:hover .DYKinfobottom {
	display: block;
	background: url(../../../images/calculators/hmcia/popbg_en.gif) bottom left no-repeat;
	width: 360px; height: 10px;
	padding: 0; margin: 0;
	min-height: 0;
}
.didyouknow {
	display: block;
	width: 78px; height: 15px;
	background: url(../../../images/calculators/hmcia/didyouknow_en.gif);
	float:left;
	margin: 3px 0 0 5px;
}
#payments .didyouknow {
  margin: 0;
  padding: 0;
  position: relative;
  right: 72px;
  top: 15px;
}
#paymentsDYK:hover .DYKinfo, 
#downpaymentDYK:hover .DYKinfo {
	top: -29px;
	left: 84px;
}
/* ============ Titles ============ */
.title {
	display: block;
	text-indent: -30000px;
	margin: 0;
	padding: 0;
}
label.title {float: left;}
#mainTitle {
	width: 350px; height: 26px;
	background: url(../../../images/calculators/hmcia/titles/mainTitle_en.gif) top left no-repeat;
	margin: 0 10px 10px 0;
}
#preappmsg {
	display: block;
	width: 258px; height: 61px;
	float: right;
	background: url(../../../images/calculators/hmcia/preappmsg_en.gif) top left no-repeat;
	}
#info h2 { width: 334px; height: 26px; background: url(../../../images/calculators/hmcia/titles/yourinfo_en.gif) top left no-repeat; }
#results h2 { width: 334px; height: 26px; background: url(../../../images/calculators/hmcia/titles/yourresults_en.gif) top left no-repeat; }
#income label { width: 146px; height: 28px; background: url(../../../images/calculators/hmcia/titles/income_en.gif) center left no-repeat;}
#payments label { width: 167px; height: 31px; background: url(../../../images/calculators/hmcia/titles/payments_en.gif) center left no-repeat;}
#taxes label { width: 137px; height: 20px; background: url(../../../images/calculators/hmcia/titles/taxes_en.gif) center left no-repeat; }
#heating label { width: 129px; height: 20px; background: url(../../../images/calculators/hmcia/titles/heating_en.gif) center left no-repeat; }
#condo label { width: 115px; height: 20px; background: url(../../../images/calculators/hmcia/titles/condo_en.gif) center left no-repeat; }
#downpayment label {
  background: url("../../../images/calculators/hmcia/titles/downpayment_en.gif") no-repeat scroll left center transparent;
  height: 20px;
  width: 94px;
}
#ctatitle { display: inline-block; width: 203px; height: 32px; background: url(../../../images/calculators/hmcia/titles/ctatitle_en.gif) center left no-repeat; margin-top: 10px;}
#toolstitle { width: 222px; height: 26px; background: url(../../../images/calculators/hmcia/titles/toolstitle_en.gif) center left no-repeat;}
#tipstitle { width: 262px; height: 26px; background: url(../../../images/calculators/hmcia/titles/tipstitle_en.gif) center left no-repeat;}
/* ============ Sliders ============ */
.fd-slider {
	position:relative;
	height:20px;
	text-align:center;
	border:0 none;
	text-decoration:none;
	display:block;
	-moz-user-select:none;
	-khtml-user-select:none;
	cursor:pointer;
	width: 100%;
	float:right; 
}
.fd-slider-handle {
	position:absolute;
	display:block;
	padding:0;
	border:0 none;
	margin:0;
	z-index:3;
	top:0;
	left:0;
	width:23px;
	height:20px;
	outline:0px none;
	background:transparent url(../../../images/calculators/hmcia/slider_en.gif) no-repeat 0px 0px;
	cursor:W-resize;  
	line-height:20px;
	font-size:20px;       
	-webkit-user-select: none;
	-moz-user-select:none;
	-moz-user-focus:none;
	-moz-outline:0px none;               
}
.fd-slider-handle:focus {
	outline:0px none;
	border:0 none;
	-moz-user-focus:normal;
}
#rentslider, #rateslider, #savingsslider {width: 107px;}
.slidercontainer {
	margin-top: 5px;
	padding: 0 20px; 
	background: transparent url(../../../images/calculators/hmcia/sliderbg_en.gif) no-repeat 0px 0px;
	width: 155px;
	height:20px;
	clear: both;
}
/* ============ Overlay/Error content ============ */
.errorMsg { color: #EE3224; background: url(../../../images/calculators/hmcia/redarrow_en.gif) center left no-repeat; padding-left: 13px;}
#overlay {
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	height: 1030px;
	z-index:1001;
	background: #000;
	filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
#overlayContent {
	position: absolute;
	z-index:1002;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 1030px;
}
div.errorbox, div#paymentbox {
	width: 575px;
	margin: 200px auto 0;
	background: #fff;
	border: 1px solid #93bdde;
	z-index:1002;
	padding: 10px 25px 25px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
div#paymentbox {width: 400px; height: 280px; }
#overlayContent h3 {color:#0079c1; margin: 20px 0;}
#close {
	float: right;
	font-size: 10px;
	color: #0079c1;
	text-decoration: underline;
	margin-bottom: 5px;
}