
div#calculator_wrapper h1 {color: #6492c9; font-size: 22px; margin-bottom: 18px;}
div#calculator_wrapper h2 {color: #6492c9; font-size: 18px; margin-bottom: 18px;}
div#calculator_wrapper h3 {color: #6492c9; font-size: 16px; margin-bottom: 10px;}
div#calculator_wrapper p { line-height: 20px; margin-bottom: 15px;}

/* ------------- "wrapper" styles */
div#calculator_wrapper {
	margin:auto;
    width: 100%;
}
div#calc_header {
	position: relative;
	width: 100%;
	height: 50px;
	background: url(../images/step_1.png) no-repeat #ddedf4;
	background-position: 10px 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	}
	
	div#calc_header h2 {
		float: left;
		padding-top: 10px;
		margin-left: 70px;
		color: #3883ab;
		font-weight: normal;
		}
			
/* ------------- "wrapper" styles */
div#male_calculator {
	clear: both;
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 200px;
	background: url(../images/step_2.png) no-repeat #ddedf4;
	background-position: 10px 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 15px;
	margin-bottom: 15px;
	}
	
	div#male_calculator h2.calc_title {
		position: absolute;
		top: 10px;
		left: 60px;
		color: #3883ab;
		font-weight: normal;
		}
		
div#female_calculator {
	clear: both;
	position: relative;
	width: 100%;
	overflow: hidden;
	min-height: 200px;
	background: url(../images/step_2.png) no-repeat #ddedf4;
	background-position: 10px 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	margin-top: 15px;
	margin-bottom: 15px;
	}
	
	div#female_calculator h2.calc_title {
		position: absolute;
		top: 10px;
		left: 60px;
		color: #3883ab;
		font-weight: normal;
		}	
		
	div#select_gender {
		padding-top: 10px;
		margin-left: 10px;
		float: left;
		}	
		
	div#select_gender a {
		opacity: 0.6;
		height: 25px;
		width: 100px;
		display: block;
		margin-left: 15px;
		float: left;
		background: url(../images/btn_bg.png);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		color: #fff;
		font-size: 16px;
		text-decoration: none;
		text-align: center;
		padding-top: 5px;
		cursor: pointer;
		}	
		
		div#select_gender a.selected {opacity: 1;}
		
		
@media only screen
	and (max-width : 900px) {
		div#calc_header h2 {display: none;}
		div#select_gender {margin-left: 50px;}
		}
		
@media only screen
	and (max-width : 350px) {	
		div#select_gender a {font-size: 14px; width: 70px;}
		div#female_calculator h2.calc_title {font-size: 14px;}
		div#male_calculator h2.calc_title {font-size: 14px;}
	}			
		
/* ------------- "calculator_information" styles */		

		
div#calculator_information {
	margin: 60px 20px 20px 20px;
	padding: 20px;
	display: none;
	height:auto;
	background: #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	}
	
div.calculator_menu {
	height:auto;
	padding-right: 15px;
	display: block;
	padding-top: 60px;
	padding-left: 15px;
	overflow: hidden;
	}	
	
		div#main_content li.calc {
			margin: 0px;
			padding: 0px;
			list-style-type: none;
			}
		
		li.calc a {
			width: 150px;
			height: auto;
			float: left;
			margin-right: 10px;
			text-align: center;
			font-size: 16px;
			text-decoration: none;
			color: #fff;
			margin-bottom: 20px;
			cursor: pointer;
			}
	
@media only screen
	and (max-width : 950px) {
		li.calc a {
			width: 22%;
			margin-right: 3%;
			}
		li.calc a img {
			width: 100%;
			height: auto;
			}
		}				
			
@media only screen
	and (max-width : 800px) {
		li.calc a {
			width: 30%;
			margin-right: 3%;
			}
		li.calc a img {
			width: 100%;
			height: auto;
			}
		}	
		
			
@media only screen
	and (max-width : 450px) {	
	li.calc a {
		width: 45%;
		margin-right: 5%;
			}
	li.calc a img {
		width: 100%;
		height: auto;
		}
	}				
		
		
a.reselect {
	color: #3883AB;
	cursor: pointer;
	}
		
/* ------------- "calc_form" styles */	
	
div#calc_form {
	position: relative;
	width: 100%;
	background: url(../images/step_3.png) no-repeat #ddedf4;
	background-position: 10px 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 20px;
	}
	
	div#calc_form h2 {
		margin-left: 60px;
		margin-top: 15px;
		margin-bottom: 10px;
		color: #3883ab;
		font-weight: normal;
		}
		
	div#calc_form p {
		display: block;
		margin-left: 20px;
		margin-top: 15px;
		margin-bottom: 5px;
		padding-right: 20px;
		float: left;
		line-height: 18px;
		font-size: 14px;
		}
		
		
form#calculator	{
	display: block;
	width: 88%;
	padding: 3%;
	background: #fff;
	margin: 3%;
	float: left;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	}
	
	form#calculator input {
		background: #edece8;
		height: 35px;
		line-height: 35px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		border: 0px;
		text-indent: 10px;
		width: 48%;
		margin-right: 2%;
		margin-bottom: 10px;
		float: left;
		}
		
		form#calculator input#submit {
			width: 48%;
			margin-right: 2%;
			height: 35px;
			cursor: pointer;
			color: #fff;
			background: url(../images/sign_up.png) repeat-x;
			font-family: 'vag_bold';
			font-size: 20px;
			}
			
			form#calculator input#submit:hover {
				background: url(../images/sign_up.png) repeat-x;
				background-position: 0px -60px;
				}
				
				
@media only screen
	and (max-width : 800px) {	
	form#calculator input {
		width: 100%;
		margin-right: 0;
		}
	form#calculator input#submit {
		width: 100%;
		margin-right: 0;
		}	
	}	
	
@media only screen
	and (max-width : 400px) {
		div#calc_form p {font-size: 12px;}
		form#calculator	{width: 80%; padding: 5%; margin: 5%;}
		}					
						
				
				
				
				
				
				
				
