/* Calculator Styles */
input[type="text"], input[type="number"], textarea { padding: 5px; border: 1px solid #666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 2px #CCCCCC; -webkit-box-shadow: 0 0 2px #CCCCCC; box-shadow: 0 0 2px #CCCCCC; }
input[type="text"]:hover, input[type="number"]:hover { border:1px solid #000; }
input[type="text"]:focus, input[type="number"]:focus { box-shadow:0 0 2px #FFFE00; }

form label, form input.calculatorInput, form input.calculatorShortInput, form input.calculatorMedInput, form select, .curr, .spacer { float:left; display:block; }
form label, form input.calculatorInput, form input.calculatorShortInput, form input.calculatorMedInput { margin-bottom:10px; }
form label { width:50%; font-size:1em; line-height:24px; margin-right: 10px; padding-right:10px; min-height:24px; text-align:right; color:#fff; font-family:'Raleway', "Trebuchet MS", Arial, sans-serif; font-weight:600; text-transform:uppercase; }

form label.doubleline { line-height:1.3em; }
form label a { color:#000; }
form input.calculatorInput, form input.calculatorShortInput, form input.calculatorMedInput, form input.curr, form select { font-size:20px; height:30px; line-height:26px; margin-bottom:10px; position:relative; bottom:3px; padding:2px; color:#333; }
form input.calculatorInput { width:10em; padding:2px; }
form input.calculatorMedInput { width:6em; padding:2px; }
form input.calculatorShortInput { width:4em; padding:2px; }
form input.curr { width:21px; color:#fff; padding:2px; }
form input.calculatorButton { font-size:16px; color: #225a89; margin-left:0px; margin-right:5px; }
form input.calculatorButton:hover { color: #000; }
form input.calculatorReset { font-size:16px; color: #aaa; }
form input.calculatorReset:hover { color: #000; }
form select { font-size:16px; border:1px solid #666; }
form select.select_inline { margin-left:5px; }
.no_border { border: 0px !important; -moz-border-radius: none !important; -webkit-border-radius: none !important; border-radius: none !important;  -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; }
.spacer { width:21px; }
.additional { width:30px; font-size:15px; color:#fff; margin-left:3px; margin-bottom:12px; }
.additional a { color:#fff; text-decoration:none; }
.additional a:hover { color:#fff; text-decoration:underline; }

.boxLeft .additional, .boxRight .additional { width:auto; position:relative !important; float:left !important; margin-left:5px; margin-right:10px; }
.tinyInput { width:3em !important; }

/* Field highlighting */
div.single-field { position:relative; clear:both; }
div.multi-tile { clear:none; }

div.single-field label { border:1px solid transparent; }
.curFocus { 
	background: #ff9933; border:1px solid #fcbd7e !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 
	-moz-box-shadow: 0 0 2px #CCCCCC; -webkit-box-shadow: 0 0 2px #CCCCCC; box-shadow: 0 0 2px #CCCCCC; 
	-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; 
}
.curFocusDiv { }
.submitButtons .curFocus { background: transparent !important; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-box-shadow: 0 0 0px #CCCCCC; -webkit-box-shadow: 0 0 0px #CCCCCC; box-shadow: 0 0 0px #CCCCCC;}


input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* Main calculator form CSS */
.calculator_form { clear:both; background:#cc6102; background: -moz-linear-gradient(top, #cc6102, #f0942d); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cc6102), to(#f0942d)); padding: 20px 20px 20px 20px; }
.calculator_form, .calculator_results, .converter_results {  -webkit-border-radius:10px; border-radius:10px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; }
.calculator_form .curr { background-color: transparent; border:none !important; }
.calculator_form h2 { margin-top:0px !important; padding-top:0px !important; margin-bottom:1.8em !important; width:90%; text-align:center; color:#f6d2ab !important; }
.calculator_results h2 { text-align:left; margin-top:12px !important; margin-bottom:1.4em !important; color: #cc6102; }
h2.interest_results { margin-left:20% !important; }

.calculator_form h3 { font-size:20px; line-height:21px; margin-bottom:15px; color:#f6d2ab !important; }
.credit-card h2, .savings-goal h2 { font-size:20px !important; color:#f6d2ab !important; text-align:left; margin-top:20px !important; margin-bottom:1.2em !important; }

.calculator_form a { color:#fff; text-decoration:underline; }
.calculator_form a:hover { color:#fff; text-decoration:underline; }

/* Calculator 'processing' interim message (image from http://preloaders.net) */
#loading_msg { text-align:center;}
#loading_msg img { margin-top:10px; margin-bottom:30px; }
#loading_msg {display:none;}

/* Calculation results area */
.calculator_results, .converter_results { clear:both; background-color: #fff; border: 1px solid #bbb; padding: 15px; margin: 10px 0px 0px 0px; text-align:left; }
.calculator_results input { background-color: #fff; border: none; }
.calculator_results textarea { width:570px; font-size:1.1em; }
.calculator_results .curr { background-color: #fff; border:none !important; color:#fff !important; }
.resultText, .resultInfo { width:48%; position:relative; float:left; font-size:14px; line-height:24px; }
.calculator_results td { font-size:13px; line-height:17px; }
.amendLink { clear:both; width:200px; font-size:14px; margin-top:5px; position:relative; float:right; text-align:right; font-size:14px; }
.calculator_results label { font-family:arial; color:#555; }
.calculator_results .curr { color:#aaa !important; }
.compoundTable { font-size:14px; line-height:22px; }

/* Used in interest rate calculator for nominal interest rate */
#resultDisplay { display:none; }

.resultInfoRight { width:40%; position:relative; float:right; text-align:right; }
.resultInfoLeft { width:30%; position:relative; float:left; }

/* Graphs */
#chart_div { width:580px; height:350px; }
#chart_div2  { width:580px; height:350px; margin-top:20px; }

/* These are the headers for the reports (used in compound interest calculator, etc, in finance_func.php */
.reporthead { background-color:#544a48;; color:#fff; }
.timeperiod-year-head { background-color:#f0942d; color:#fff; }
.timeperiod-month-head { background-color:#f0942d; color:#fff; }
.timeperiod-year-row { background-color:#ffc; font-weight:bold; }
.timeperiod-month-row { background-color:#ffc; font-weight:bold; }
.reportdata td { padding-left:10px; border-bottom:1px solid #ddd; }



/* Calculation results table element highlights */
.subtotal { background-color:#eee; }
.total, .total2 { font-weight:bold; background-color:#ffc; }
.total_withdrawal { background-color:#ffecdc; }
.withdrawal { color:#f00; }

.calctypeText { width:200px; position:relative; float:right; text-align:center; font-size:19px; line-height:28px; background-color: #eee; border:1px solid #ccc; }
.calctypeWithdrawal { background-color: #ffecdc; }
.calctypeDeposit { background-color: #ffc; }

/* For elements that arent required fields (IE: balloon payment boxes, etc) */
.notrequired { color:#f6d2ab; }



.calculator { width:150px; height:170px; position:relative; float:right; border:1px transparent; border-left:1px solid #bbb; background-color:#eee; -webkit-border-radius: 10px; border-radius: 10px; }
.results1 { width:450px; height:160px; float:left; }
.results_power { height:180px; }
.resultsTall { height:210px; width:450px; }
.results2 { height:170px; width:603px; }
.converter_results { padding:0; height:170px; }
.tall { height:220px; }
.rounding { width:30%; position:relative; float:right; }
.rounding label { width:30%; }
.grouping { position:relative; float:right; margin-right:10px; color:#fff; }
.roman { width:350px; }
.substances select { float:none; display:inline; }
.substancesList { background:#ac5201; padding:4px; }

.substancesList select { margin-top:5px; width:250px; }

/* .substanceLeft select, .substanceRight select { width:220px; height:160px; } */
.single select { width:220px; height:26px !important; }
.substances .rounding { width:240px; float:left; }
.substances .grouping { position:relative; float:left; margin:0; color:#fff; }
form input.density { font-size:14px; margin-right:10px; }
.noTop { padding-top:0 !important; padding-left:0 !important; }
.substancesInner { padding-left:20px; padding-top:15px; }
/*.calcnote { color:#fff; font-size:11px; margin-bottom:15px; padding:0 25px 10px 25px;  }*/
.calcnote { clear:both; color:#fff; font-size:12px;  width:53%; float:right; margin:0px 0px 15px 0px; padding:0 25px 10px 25px; padding-left:44%; border-bottom:1px dotted #fff; }
.calcnote_bmi { clear:both; color:#fff; font-size:12px;  width:60%; float:right; margin:10px 0px 5px 0px; padding:0 25px 10px 25px; padding-left:44%; }
.noline { border-bottom:none; margin-bottom:0; }

/* Individual forms */
#compoundForm1 label, #compoundForm2 label { width:42%; }
#compoundForm1 { padding-top:30px; }
.car-loan .interest { background-color:#ddffdd; }
.car-loan label { width:42%; }
.interest-rate-calc label { width:40%; }
.interest-rate-calc2 label { width:43%; }
.credit-card label { width:42%; }
.credit-card p, .interest-rate-calc p, .savings-goal p { color:#fff; }
.loan-calculator .interest { background-color:#ddffdd; }
.loan-calculator label { width:42%; }
.savings-goal label { width:45%; }
.currency label { width:38%; }
.currency SELECT.currency { width:250px; font-size:92%; }
#savingsForm1 label, #savingsForm2 label { width:42%; }
#savingsForm1 { padding-top:30px; }
#retirementForm label { width:35%; }
#mortgageRefinanceForm label { width:48%; }
#feedbackForm label { width:40%; }

#mortgageRefinanceForm TEXTAREA { border-color:#eee; }

.substances label { width:40%; }

.retirement .general, .retirement .note, .retirement .error, .retirement .warning, .retirement .input, .retirement .inputoutput, .retirement .resultheader, .retirement .npv, .retirement .age1, .retirement .age2 { font-family:Tahoma, Verdana, Arial; font-size:12px; }
/*.retirement .inputoutput, .retirement .output, .retirement .resultheader, .retirement .npv, .retirement .age1, .retirement .age2 { border:#999999 1px solid; }
.retirement input.curr { border:0px; width:12px; }
.retirement .error { color:red; }
.retirement .warning { color:red; }
.retirement .inputoutput { border-collapse:collapse; padding-left:3px; }
.retirement .output { background-color:#E2F0D2; border-collapse:collapse; }
.retirement .resultheader { background-color:black; color:white; }
.retirement .npv { background-color:#666666; color:white; }
.retirement .age1 { background-color:#E0E0E0; color:black; }
.retirement .age2 { background-color:white; color:black; }*/

/*.title { font-size:24px; color:#3366FF; font-weight:bold; }
.general { font-size:12px; }*/
.note { font-size:12px; line-height:13px; }
.error { font-size:10px; color:red; }
.warning { font-size:12px; color:red; }
.input { font-size:12px; border: 1px solid #999999; background-color:#fff; border-collapse:collapse; }
.inputoutput { font-family:Tahoma, Verdana, Arial; font-size:12px; border:#999999 1px solid; border-collapse:collapse; padding-left:3px; }
.output { border: 1px solid #999999; background-color:#fff; border-collapse:collapse; }
.resultheader { background-color:#cc6102; color:white; font-size:12px !important; border: 1px solid #8a480c; }
.npv { background-color:#f0942d; color:white; font-size:12px; line-height:14px; border: 1px solid #cc6102; }
.age1 { background-color:#ffecdc; color:#333; font-size:12px; border: 1px solid #fff; }
.age2 { background-color:white; color:#333; font-size:12px; border: 1px solid #fff; }
/*.calculator_results TD { font-size:0.8em; }*/
.retirement-table2 { width:50%; position:relative; float:left; }
.retirePad { padding:0 !important;}
.orange a { color:#f0942d; text-decoration:none; padding-right:10px; margin-bottom:10px; }
.orange a:hover, .orange a:focus { color:#f0942d; text-decoration:underline; }

.substancetitle { background-color:#9999ff; font-weight:bold; }
.substancelisttitle { font-weight:bold; padding:10px 10px 10px 0px; }
.conversions label { width:22%; }

.bmi-calc, .bmi-calc2 { padding-top:30px; }
.bmi-calc label { width:45%; margin-bottom:15px; }
.bmi-calc2 label { width:34%; }
.bmi-calc2 label.tile { margin-left:15px; width:70px; }

.bmr-calc, .bmr-calc2 { padding-top:30px; }
.bmr-calc label { width:40%; }
.bmr-calc2 label { width:33%; }
.bmr-calc2 label.tile { margin-left:15px; width:70px; }

.bmi_measure { color:#aaa; }
.bmiBottom { margin-top:15px; }

.rightpanel
{	
	width:90px; position:relative; float:right; margin: 0px 0px 10px 10px; padding:100px 10px 0px 10px; border:1px solid #ddd; border-right:0px; border-top:0px;
}

.bmiResults { width:37%; position:relative; float:left; padding:5px; padding-top:0px; margin-right:10px; }
.bmiLights { width:57%; position:relative; float:right; padding:5px; padding-top:0px; }
.bmiLights2 { width:75px; position: relative; float:right; }
.bmiValue { width:100px; position:relative; float:left; padding:5px; }
.bmiRating { width:120px; position:relative; float:left; padding:5px; }
.bmiOrange { background-color:#fc0; }
.bmiGreen { background-color:#9f0; }
.bmiRed { background-color:#f63; }
.bmiExtratext { border-top:1px solid #ccc; border-left:0px; border-right:0px; margin:10px 0px; padding:5px; }

/* ===================================== */

/* ==== Mobile Landscape size from 480px up to 767px (i.e. just below tablet)  - incorporates portrait as well ==== */
@media
only screen and (max-width: 767px),
only screen and (max-device-width: 767px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 767px) {

	.heading { line-height:1.5em !important; margin-bottom:10px; }
	
	form input.calculatorInput, form input.calculatorShortInput, form input.calculatorMedInput { font-size:24px; height:32px; line-height:28px; margin-bottom:10px; position:relative; bottom:3px; padding:2px; color:#333; }
	form input.calculatorInput { width:6.5em; padding:2px; }
	form input.calculatorMedInput { width:5.5em; padding:2px; }
	form input.calculatorShortInput { width:4em; padding:2px; }
	
	form label { width:45%; font-size:13px; }
	
	form select { font-size:13px; }
	.substancesList select { width:200px; }
	
	.results1, .results2, .resultsTall { width:100%; padding-bottom:10px; }
	
	.loan-calculator label { width:38%; }
	.bmi-calc2 label, .bmr-calc2 label { width:20%; }
	.bmi-calc2 .heading, .bmr-calc2 .heading { width:30%; }
	
	#mortgageRefinanceForm label { width:48%; }
	
	.substances label { width:35%; }
	
	calcnote { clear:both; color:#fff; font-size:10px;  width:80%; padding-left:14%; border-bottom:1px dotted #fff; }
	.calcnote_bmi { clear:both; color:#fff; font-size:10px;  width:80%; padding-left:14%; }
	
	.rounding { width:auto; position:relative; float:none; }
	.rounding label { width:22%; }
	.grouping { clear:both; float:none; margin-right:0; margin-left:120px; margin-bottom:20px; }
	.conversions .heading { clear:both; }
	.boxRight { clear:both; float:none !important; }
	
	.loan-calculator .additional { font-size:11px; line-height:1.2em; }

	/* Hide calculator and right panel */
	.calculator, .rightpanel { display:none; }
	
	/* BMI Stuff */

	.bmiResults { width:auto; float:none; padding:5px; border-bottom:1px solid #ccc; }
	.bmiLights { width:auto; float:none; border: none; padding:5px; }
	.bmiLights2 { display:none; }
	.bmiBottom { margin-top:5px; }
	.bmiExtratext { margin-bottom:0px; }
	
	/* Graphs */
	#chart_div { width:430px; height:170px; }
	#chart_div2  { width:430px; height:170px; margin-top:20px; }

}


/* ==== Mobile Portrait Only for standard 320px - portrait on an iPhone, but not landscape ==== */
@media
only screen and (max-width: 479px) {

	.calculator_form h2, .calculator_results h2 { margin-bottom:18px !important; width:100%; text-align:left; }
	.heading { text-align:left !important; margin-right:0; margin-top:10px; min-height: inherit; font-size:1.2em; width:100% !important; }
	.bmi-calc label, .bmi-calc2 label, .bmi-calc2 label.tile, .bmr-calc label, .bmr-calc2 label, .bmr-calc2 label.tile { width:35%; text-align:right;  }
	.bmi-calc2 label.tile, .bmr-calc2 label.tile { margin-left:0px;}
	.calculator, .rightpanel { display:none; }
	.results2 { height:360px; }
	.calculator_form h3, .credit-card h2, .savings-goal h2 { margin-bottom:10px; }
	
	.calculator_form h3.first_h3 { margin-top:40px; }
	.calculator_form h3.second_h3 { margin-top:30px; }

	.bmiFrame { height:370px; }

	.grouping { position:relative; float:none; margin:0; }

	.substances .grouping { margin:5px 0 15px 0; }

	/*.substanceLeft select, .substanceRight select { width:220px; height: inherit; } */

	.roman { width:250px; }

	.output { font-size:9px;}
	.retirement-table2 { width:100%; }
	.resultheader { font-size:10px !important; }
	.note { font-size:10px; line-height:12px; }
	.retirePad td { padding:4px 2px !important; font-size:8px !important; line-height:11px !important; }
	.calcnote { font-size:11px; }
	.calcnote_bmi { font-size:11px; }

	.resultText, .resultInfo { font-size:12px; line-height:19px; }
	.resultText { width:190px; }
	.resultInfo { width:70px; }
	.resultInfoRight { width:100%; position:relative; float:none; text-align:left; border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:10px;}
	.resultInfoLeft { width:60%; }
	.amendLink { width:280px; }
	.calculator_results, .converter_results { padding:10px;}
	.calculator_results label { font-size:11px; line-height:13px; width:100px; margin-right: 10px; }
	.calculator_results td { font-size:11px; line-height:13px; }
	.calculator_results .reportdata td { font-size:10px; line-height:12px; padding-left:3px; }
	form .calculator_results input.calculatorInput { width:130px; padding:2px; }
	.calculator_results textarea { width:270px !important; border:none; }
	.compoundTable .reportdata td { font-size:60% !important; }
	.calctypeText { position:relative; float:none; width:auto; font-size:13px; line-height:15px; text-align:left; padding:3px; padding-left:0px; }

	h2.interest_results { margin-left:0 !important; }

	/* .calctypeText { width:200px; position:relative; float:right; text-align:center; font-size:19px; line-height:28px; background-color: #ffecdc; } */

	form input.curr { width:18px !important; }
	.spacer { width:18px; }

	.submitButtons { text-align:left; }
	.submitButtons label { width:0 !important; margin-left:-5px; }
	.submitButtons .spacer { clear:both; }

	.converterButton { width:130px; }

	/* Change the lengths of the fields for the mortgage refinancing calculator */

	#mortgageRefinanceForm .calculator_results label { width:120px !important; }
	#mortgageRefinanceForm .calculator_results input.calculatorInput { width:114px !important; }

	/* Graphs */
	#chart_div { width:270px; height:170px; }
	#chart_div2  { width:270px; height:170px; margin-top:20px; }

	/* Field highlighting (we highlight the whole div on mobile platforms, not just the label) */
	div.single-field { height:80px; border:1px solid transparent; padding-left:5px; }
	#bmiForm1 .single-field, #bmiForm2 .single-field, #bmrForm1 .single-field, #bmrForm2 .single-field { height:auto; min-height:40px; padding-top:10px; }

	.curFocus { 
		background:transparent !important; border:1px solid transparent !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 
		-moz-box-shadow: 0 0 2px transparent -webkit-box-shadow: 0 0 2px transparent; box-shadow: 0 0 2px transparent; height:auto;
	}
	.curFocusDiv { 
		background: #ff9933; border:1px solid #fcbd7e !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 
		-moz-box-shadow: 0 0 2px #CCCCCC; -webkit-box-shadow: 0 0 2px #CCCCCC; box-shadow: 0 0 2px #CCCCCC; 
		-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.3s ease; 
	}

}