/* Interactive Compound Interest Formula Styles */
/* Copyright: Alastair Hazell 2014 */

#compound_formula {
  border:1px solid #ccc;
  padding:10px;
  margin:20px 0px;
}

#compound_formula form {
	margin-bottom:0px;
	padding-bottom:0px;
}

.labelhead {
    float: left;
	width:35%;
	padding-top:5px;
}
.datafield {
    float: left;
    font-size:20px !important; 
    height:30px; 
    line-height:26px;
    max-width:100px;
    padding:0px 5px;
    border:1px solid #ccc !important;
}

#ratetype {
    float: left;
    font-size:15px !important; 
    height:40px; 
    line-height:26px;
    width:120px;
    margin-left:10px;
}

#formulalayout input {
   width:30px;
   font-size:20px; 
   height:30px; 
   line-height:26px;
}

#formula_image {
   clear:both;
   max-width:600px;
   height:100px;
   margin-top:25px;
   border:1px solid #ccc;
   margin-bottom:20px;
   padding-left:10px;
   padding-bottom:5px;
}

.formulatext {
	font-size:25px;
	padding:5px;
}

/* Formula numbers */
#formula_p {
	position:relative;
	float:left;
	top:30px;
}

/* Left bracket */
#formula_lb {
	position:relative;
	float:left;
	font-size:70px;
}

#formula_1plus {
	position:relative;
	float:left;
	top:30px;
	padding-right:10px;
}

#formula_r {
	position:relative;
	float:left;
	width:50px;
	text-align:center;
	font-size:160%;
	border-bottom: 2px solid #aaa;
}

#formula_n {
	position:relative;
	float:left;
	top:50px;
	right:50px;
	width:30px;
	font-size:160%;
	text-align:center;
}

/* Right bracket */
#formula_rb {
	position:relative;
	float:left;
	right:30px;
	font-size:70px;
}

#formula_power {
	position:relative;
	float:left;
	right:30px;
}

#formula_n2 {
	position:relative;
	float:left;
	right:30px;
}

/* Left bracket 2 */
#formula_lb2, #formula_lb3 {
	position:relative;
	float:left;
	right:30px;
	padding-left:0px; padding-right:0px;
}

#formula_t {
	position:relative;
	float:left;
	right:30px;
}

/* Right bracket 2 */
#formula_rb2 {
	position:relative;
	float:left;
	right:30px;
	padding-left:0px; padding-right:0px;
}

#formula_equals {
	position:relative;
	float:left;
	font-size:50px;
	right:20px;
	top:10px;
}

#formula_result {
	position:relative;
	float:left;
	top:20px;
	border:1px solid #aaa;
	background-color:#eee;
	padding:10px;
}

.submitbtn {
    height: 40px;
    color:#666;
    background-color:#ddd;
    border: solid #666 1px;
    min-width:120px;
    margin-left:10px;
}

/* ==== 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) {

}


/* Mobile sizes */
@media
only screen and (max-width: 479px) {

	#formula_equals {
		clear:left;
		margin-left:50px;
		font-size:40px !important;
		top:50px;
	}
	
	#formula_result {
		top:50px !important;
	}
	
	#formula_image {
		height:170px;
	}


	.formulatext {
		font-size:23px !important;
	}
	
	.labelhead {
		width:100% !important;
		padding-top:0px;
		margin-top:3px;
	}
	
	.formulatext {
		font-size:15px;
		padding:5px;
	}
		
	/* Left bracket, Right bracket */
	#formula_lb, #formula_rb {
		font-size:50px;
		top:30px;
	}

	#formula_r {
		width:25px;
		font-size:100% !important;
	}
	#formula_n {
		width:25px;
		font-size:110%;
		top:45px;
		right:35px;
	}
	
	#formula_result {
		top:10px;
	}

}