/*
 * C21 Calculator Page Formatting
 * ==============================
 * Include CSS classes here that are used for the mortgage calculator section of C21.com
 *
 */

.calculatorheader {
   height:40px;
   background:#333333;
   border-bottom: 2px solid #EEB31D;
   padding:10px;
   position: relative;
}
.calculatorheader .label {
   font-family: arial, helvetica, sans-serif;
   color: #fccb1a;
   font-weight: bold;
   font-size: 1.1em;
}
#calculator_tabframe {
	width: 540px;
	line-height:normal;
	position: absolute;
	top: 42px;
	padding: 0px;
	margin: 0px;
	height: 18px;
	overflow: hidden;
}
.calculator_tab {
   float: left;
   margin-right:10px;
}
.calculator_tab a {
   padding-top: 20px;
}
.calculator_tab.active_tab a {
   background-position: 0 -18px !important;
}
.calculator_tab a:hover {
   background-position: 0 -18px !important;
}
.calculatorentrygroup {
   margin-top: 5px;
   font-weight: bold;
   font-size: 0.95em;
}
.calculatorquicktip {
   font-size:0.85em;
   font-weight: normal;
   font-style:italic;
}
#calculator_tab_affordability a {
   background:url("/images/calculator/affordabilitytab.gif?1280406166") top left transparent no-repeat;
   display: block;
   width: 90px;
   height: 18px;   
}
#calculator_tab_rentvsbuy a {
   background:url("/images/calculator/rentvsbuytab.gif?1280406166") top left transparent no-repeat;
   display: block;
   width: 125px;
   height: 18px;
}
#calculator_tab_mortgage a {
   background:url("/images/calculator/mortgagetab.gif?1280406166") top left transparent no-repeat;
   display: block;
   width: 73px;
   height: 18px;
}
#calculator_tab_amortization a {
   background:url("/images/calculator/amortizationtab.gif?1280406166") top left transparent no-repeat;
   display: block;
   width: 93px;
   height: 18px;
}
#calculator_tab_refinancing a {
   background:url("/images/calculator/refinancingtab.gif?1280406166") top left transparent no-repeat;
   display: block;
   width: 88px;
   height: 18px;
}
#calculator_sidebar {
   position: relative;
   left: 0;
   margin: 10px;
   width: 230px;
   float: left;
}
#calculator_resultarea {
   padding-top: 10px;
	margin-left: 260px;
   margin-right: 10px;
}
input.calcinput {
   font-family: arial, helvetica, sans-serif;
   background:#cecece url("/images/calculator/inputbg.gif") top left no-repeat;   
   border: 1px solid #7c7c7c;
   color: #000;
   padding-left: 4px;
   width: 145px;
   font-weight: bold;
}
select.calcinput {
   font-family: arial, helvetica, sans-serif;
   background-color:#cecece;   
   border: 1px solid #7c7c7c;
   color: #000;
   font-size:0.95em;
   font-weight: bold;
}
input.calcmoneyinput {
   font-family: arial, helvetica, sans-serif;
   background:#cecece url("/images/calculator/inputbg.gif") top left no-repeat;   
   border: 1px solid #7c7c7c;
   color: #000;
   padding-left: 14px;
   width: 145px;
   font-weight: bold;
}
.calculatoractionbutton {
   padding-right:15px;
   float: right;
}
.calcresultlabel {
   font-weight: bold;
}
.amortizationtablecontainer {
   width: 420px;
   height: 146px;
   padding-right:20px;
   overflow-y:scroll;
   overflow-x:hidden;
}
.amortizationtable {   
   border: 1px solid #dddddd;
}
.amortizationtable th {
   border: 1px solid white;
   text-align: left;
   background:#000;
}
.amortizationtable td {
   border: 1px solid #dddddd;
}

.amortizationlegendcontainer {
   position: relative;
   margin-top:10px;
}
.amortizationlegendentry {
   float: left;
   padding-right: 20px;
}

.amortizationlegendbalance {
   float: left;
   width:10px;
   height:10px;
   background: #EEB31D;
   margin:4px 5px 0 0;
}
.amortizationlegendprinciple {
   float: left;
   width:10px;
   height:10px;
   background: #FFFFFF;
   margin:4px 5px 0 0;
}
.amortizationlegendinterest {
   float: left;
   width:10px;
   height:10px;
   background: #000000;
   margin:4px 5px 0 0;
}
.amortizationlegenddivider {
}
.calcresultlabel.amortization {
   margin-top:40px;
}

.rentvsbuylegendcontainer {
   position: relative;
   margin-top:10px;
}
.rentvsbuylegendentry {
   float: left;
   padding-right: 20px;
}

.rentvsbuylegendbuy {
   float: left;
   width:10px;
   height:10px;
   background: #FFFB01;
   margin:4px 5px 0 0;
}
.rentvsbuylegendnetbuy {
   float: left;
   width:10px;
   height:10px;
   background: #FFFFFF;
   margin:4px 5px 0 0;
}
.rentvsbuylegendrent {
   float: left;
   width:10px;
   height:10px;
   background: #F9600F;
   margin:4px 5px 0 0;
}
.rentvsbuylegenddivider {
}
.calcresultlabel.rentvsbuy {
   margin-top:40px;
}