﻿
/************************
	HTML ELEMENTS
************************/
.calculator-container h1::after, .calculator-container .h1::after, .calculator-container h2::after, .calculator-container .h2::after, h3::after, .calculator-container .h3::after, .calculator-container h4::after, .calculator-container .h4::after, .calculator-container h5::after, .calculator-container .h5::after, .calculator-container h6::after, .calculator-container .h6::after {
 
  display: none;
 
}

#calculator-container h2::after{display: none;}







#calculator-container .header h2 { text-decoration:none; color:white; border-bottom: none; font-size: 2em; font-weight: bold; padding: 0; margin: 0; float:left; }
#calculator-container .header h2 span { font-size: 0.5em; display: block; line-height: 0.7em; font-weight:normal; }

/* CALCULATOR FOOTER */
#calculator-container .footer { background-color: #e7e7e7; webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; behavior: url(/scripts/PIE.htc); position: relative; padding:15px;}
#calculator-container .footer div.progress-dots { display:block; width:100px; margin-left:auto; margin-right:auto; margin-top:15px }
#calculator-container .footer div.progress-dots div { float:left; background-color:#ccc; width:10px; height:10px; margin:0 5px; border-radius: 15px;-moz-border-radius: 15px; behavior: url(/scripts/PIE.htc); position: relative; }
#calculator-container .footer div.progress-dots div.active { background-color:#336699; }
#calculator-container div.footer { height:30px; }
#calculator-container div.footer a.button { width:37px; height:37px; text-indent:-9999em; background: url(images/sprite-calculator.png) top left no-repeat; padding: 0; }
#calculator-container div.footer a.previous { background-position: -6px -106px; float:left; }
#calculator-container div.footer a.previous:hover { background-position: -57px -106px; }
#calculator-container div.footer a.next { background-position: -106px -106px; float:right; }
#calculator-container div.footer a.next:hover { background-position: -156px -106px; }

/* CALCULATOR INSIDE */
#calculator-container .inner { background-color: #e7e7e7; padding: 15px; webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }
#calculator-container  h3 { color:#333; padding:10px 0; }
#calculator-container .inner label, #calculator-container .inner legend { display:block; font-weight:bold; color: #333333; padding: 0 0 6px 0 }
#calculator-container .inner hr {width:100%; border-bottom: 1px dotted #ccc; margin-bottom: 10px; margin-top: 10px; color: transparent; background-color: transparent; }
#calculator-container .inner .result-box { width:100%; background-color:white; webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(/scripts/PIE.htc); position: relative; border: 1px solid #ccc; min-height:330px; }
#calculator-container .inner .result-box p { padding:10px; }
#calculator-container .inner .explore { background-color:#336699; webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(/scripts/PIE.htc); position: relative; width:100%; border:solid 1px #336699; }
#calculator-container .inner .explore h4 { padding:10px; color:white; border-bottom: 1px dotted #e7e7e7; cursor: pointer; }
#calculator-container .inner .explore h4 a{ color:white; text-decoration:none; }
#calculator-container .inner .explore h4.last { border-bottom:none; }
#calculator-container .inner .explore h4 span{ float: right; font-size: 0.8em; margin-right: 15px; }
#calculator-container .inner .explore h4 span.icon{ width: 16px; height: 16px; background: url(images/sprite-calculator.png) top left no-repeat; background-position: -206px -5px; }
#calculator-container .inner .explore h4.open span.icon { background-position: -106px -5px; }
#calculator-container .inner .explore div.last { webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; behavior: url(/scripts/PIE.htc); position: relative; }
#calculator-container .inner .explore div { padding:40px; margin: 0 0; background-color:#e7e7e7; overflow:hidden; }
#calculator-container .error{ color: #d00000; font-weight: bold; display: block; padding-left: 0; height: auto; padding-top: 0; border: none; padding: 0; margin: 0; background-color: transparent; margin-top:-5px; }
#calculator-container .error .icon { width:23px; height:23px; background: url(images/sprite-calculator.png) top left no-repeat; display: block; float: left; margin-right:5px; background-position: -351px -26px; margin-top:-5px; }

/* CALCULATOR TOOLTIP */
  #calculator-container .tip { margin-left:5px; width:19px; height:19px; text-indent:-9999em; background: url(images/sprite-calculator.png) top left no-repeat; background-position: -3px -4px; display:inline-block; }
#calculator-container .tip:hover { background-position: -28px -4px; }
#tooltip { color: #000; background: white; position: absolute; z-index: 100; padding: 15px; border:solid 2px #336699; webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url(/scripts/PIE.htc); }
#tooltip:after { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #336699; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px;} /* triangle decoration */
#tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #6B8E06; top: -20px; bottom: auto;}
#tooltip.left:after { left: 10px; margin: 0; }
#tooltip.right:after { right: 10px; left: auto; margin: 0; }

/*  CALCULATOR FORM ELEMENTS */
#calculator-container input[type="text"] { color: #336699; background-color:white; border: 1px solid #ccc; -moz-border-radius: 10px; border-radius: 10px; position: relative; behavior: url(/scripts/PIE.htc); /*padding: 0.5em 10px 0.5em 10px;*/ height:29px; line-height:29px; padding-left:10px;  width:160px; margin-right:15px; }
#calculator-container select { color: #336699; background-color: white; border: 1px solid #ccc; -moz-border-radius: 10px; border-radius: 10px; position: relative; behavior: url(/scripts/PIE.htc); padding: 0.5em 10px; width:160px; }
#calculator-container input:focus, #calculator-container select:focus { border:1px solid #6e9934; outline: none; }
#calculator-container .inner  fieldset label { display:inline; }



/* MORTGAGE CALCULATOR SPECIFICS */
#calculator-container .inner { background-color: #999; padding-top: 5px;}
#calculator-container .inner hr { margin-top:0;height:1px; }
#calculator-container input:focus { border:1px solid #6e9934; }
#calculator-container .inner, #calculator-container .footer { border:solid 3px #999; padding: 5px; }
#calculator-container .inner { padding: 0; border-bottom:none; }
#calculator-container .footer { border-top:none; clear:both; }
/*#calculator-container .inner .wrapper, #calculator-container .footer { position:relative; top:-30px; }*/
#calculator-container .inner { /*height:630px*/ }
#calculator-container .inner label, #calculator-container .inner legend { display:block; font-weight:bold; color: #333333; padding:0 0 6px 0;}
#calculator-container .inner label span { font-weight:normal }
#calculator-container .inner .tabs h2 {
display: block;
width: 310px;
height: 30px;
float: left;
background-color: #336699;
color: white;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
text-align: center;
webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
behavior: url(/scripts/PIE.htc);
position: relative;
line-height:30px;
border-bottom: none;
font-size: 1em;
padding: 0;
margin: 0;
clear: none;
cursor:hand;cursor:pointer;
font-weight:bold;
}
#calculator-container .inner .tabs h2.last { width:312px }
#calculator-container .inner .tabs h2 a { text-decoration:none; color:#fff; }
#calculator-container .inner .tabs h2.active, #calculator-container .inner .tabs h2:hover { background-color: #e7e7e7; }
#calculator-container .inner .tabs h2.active a, #calculator-container .inner .tabs h2:hover a { color: #336699; }
#calculator-container .inner .panes > div {
clear: both;
background-color: #e7e7e7;
border-top: none;
min-height:100px;
display:none;
}

#calculator-container .inner .panes #repayments-pane { display:block; }

#calculator-container .inner .panes .input { /*margin:15px; float:left; padding-bottom:15px; width:375px;*/ width:50%; float:left; }
#calculator-container .inner .panes .chart {background-color:#fff; width:100%; padding:10px 0; }
#calculator-container .inner .panes .chart .first { position:relative; left:95px; font-weight:bold; }
#calculator-container .inner .panes .chart .whatif { position:relative; left:209px; font-weight:bold; }
/*#calculator-container .inner .panes .result p { font-weight: bold;margin: 0; padding: 0; text-align:center; }*/

#calculator-container .inner .input p { width:100%; margin-top:6px; float:left; } 
#calculator-container .inner .input .inline-result { border-top: dotted 2px #ccc; border-bottom: dotted 2px #ccc; width:375px; font-weight:bold; padding:10px 0; width:95%}
#calculator-container .inner .inline-result span { font-size:1.8em; color:#6b8e06; }
/*#calculator-container #repay-freq1, #calculator-container  #repay-freq1-explore { margin-left:0 }*/

#calculator-container .inner .panes .pane { /*position:relative;*/ overflow:hidden; padding: 10px 15px; }
#calculator-container .inner .panes .result { /*float:none; position:relative;float:right;margin:15px;width:485px;*/ float:left; width:50%; }
#calculator-container .inner .panes .explore { clear:both; }

#calculator-container .inner .explore div { padding: 5px 15px; height:75px; border-radius: 0 0 10px 10px; }
#calculator-container .inner .explore .freqSelect { background-color: #fff; height: 22px; top: 36px; left: 421px; }
#calculator-container .inner #howlong-pane .explore .freqSelect {left: 645px;}
#calculator-container .inner .explore p { float:left; /*width:33%;*/  }
#calculator-container div.footer {height:5px;}

#calculator-container input[type="text"].empty { border-color:#d00000; } 