* {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
}

input {
	-webkit-user-select: text;
}
input[type='text'] {
	text-align: right;
	border: 1px solid #ccc;
}
		
body {
	margin: 0px;
	padding: 38px 0px 0px 0px;
	font-family: Verdana, Helvetica;
	background: #eee;
	overflow-x: hidden;
}

.clear {
	clear: both;
}


#bar {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 38px;
	padding: 0px;
	margin: 0px;

	color: #fff;
	font-family: Arial, Helvetica;

	border-top: 1px solid rgba(255,255,255, 0.25);
	border-bottom: 1px solid rgba(0,0,0, 0.15);
	-webkit-box-shadow: inset 0 -24px 1px rgba(0,0,0, 0.1);
	-moz-box-shadow: inset 0 -24px 1px rgba(0,0,0, 0.1);

	background: #333;
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444));
	background: -moz-linear-gradient(top, #777, #444);
}
	#bar #center {
		width: 40%;
		float: left;
	}
		#bar #center h1 {
			padding: 10px 0px;
			text-align: center;
			font-size: 18px;
			line-height: 18px;
			text-shadow: -1px -1px 0px rgba(0,0,0, 1);
		}
	
	#bar #left {
		width: 29%;
	}
	#bar #right {
		width: 30%;
	}
	#bar #left div.inner {
		padding: 5px 5px;
	}
	#bar #right div.inner {
		padding: 5px 5px;
	}

	#bar input {
		display: block;
		height: 28px;
		padding: 0px 10px 0px 10px;

		font-size: 13px;
		font-weight: bold;
		line-height: 13px;

		color: #fff;
		
		border: 1px solid rgba(0,0,0, 0.35);
		border-radius: 5px;
		box-shadow: 0px 0px 1px rgba(0, 0, 0, 1) inset;
		text-shadow: -1px -1px 0px rgba(0,0,0, 1);
		
		background: #333;
		background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222));
		background: -moz-linear-gradient(top, #666, #222);
	 }
	 
	#bar #right {
		float: right;
		text-align: right;
	}
	#bar #right div.inner {
		float: right;
	}
	#bar #right input.right.start_over {
		height: 27px;

		border: 1px solid rgba(0,0,0, 0.5);
		box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35) inset;
		background: #0af;
		background: -webkit-gradient(linear, left top, left bottom, from(#0af), to(#0078B7));
		background: -moz-linear-gradient(top, #0af, #0078B7);
	 }
	#bar #right input.right.start_over:hover,
	#bar #right input.right.start_over:active {
		background: #0078B7;
		background: -webkit-gradient(linear, left top, left bottom, from(#0af), to(#006094));
		background: -moz-linear-gradient(top, #0af, #006094);
	}
	 
	#bar #right input.right {
		text-shadow: -1px -1px 0px rgba(0,100,0, 1);
		background: #379700;
		background: #379700 -webkit-gradient(linear, left top, left bottom, from(#77bb00), to(#027800));
		background: -moz-linear-gradient(top, #77bb00, #027800);
	}
	#bar #right input.right:hover,
	#bar #right input.right:active {
		background: #027800;
		background: -webkit-gradient(linear, left top, left bottom, from(#77bb00), to(#016000));
		background: -moz-linear-gradient(tio, #77bb00, #016000);
	}
	
	#bar #left {
		float: left;
	}
	#bar #left input.left {
		text-shadow: -1px -1px 0px rgba(0,0,0, 1);
		background: #333;
		background: #333 -webkit-gradient(linear, left top, left bottom, from(#666), to(#222));
		background: -moz-linear-gradient(top, #666, #222);
	}
	#bar #left input.left:hover,
	#bar #left input.left:active {
		background: #222;
		background: #222 -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
		background: -moz-linear-gradient(top, #444, #222);
	}
	



#container {
	width: 100%;
	position: relative;
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
	-webkit-transform-style: preserve-3d;
	-moz-transition: -moz-transform 0.5s ease-in-out;
	-moz-transform-style: preserve-3d;
}

	#container.flipped {
		-webkit-transform: rotateY( 180deg );
		-moz-transform: rotateY( 180deg );
	}

	#container .page {
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
/*		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
*/	}

	#container .page_a {
	}

	#container .page_b {
		-webkit-transform: rotateY( -180deg );
		-moz-transform: rotateY( -180deg );
	}
	
	#container div.image {
		text-align: center;
	}
	#container img {
		max-width: 100%;
		margin: 0 auto 10px auto;
	}
	

	#container .rounded_card {
		background: white;
		border: 1px solid #aaa;
		border-radius: 10px;
	}

	#container .page_container {
		left: 0;
		width: 90%;
		max-width: 450px;
		margin: 15px auto;
		padding-bottom: 20px;
		position: relative;
	}

		#container .page_container .description_text {
			text-align: center;
			margin-bottom: 10px;
			padding: 0 5px;
		}
		
		#container .page_container .legalese {
			text-align: center;
			margin-top: 10px;
			padding: 0 5px;
			font-style: italic;
		}

		#container .page_container .row {
			border-top: 1px solid #aaa;
			padding: 10px 10px 10px 10px;
		}

		#container .page_container .row:first-child {
			border-top: none;
		}
	
		#container .page_container .row.highlight {
			font-size: 1.05em !important;
			font-weight: bold;
			margin-top: -2px;
		}

			#container .page_container .row label, #container .page_container .row .name {
				width: 70%;
				display: inline-block;
				color: #606060;
				font-size: 0.9em;
				font-family: Helvetica, sans-serif;
				font-weight: bold;
			}
			
			#container .page_container .row .right {
				display: inline-block;
				float: right;
				text-align: right;
				width: 25%;
			}
			
			#container .page_container .row input,
			#container .page_container .row select,
			#container .page_container .row .value {
				margin-top: -3px;
				max-width: 80%;
			}
			
			#container .page_container .row .value {
				float: right;
			}

			#container .page_container .row select {
				width: 17%;
			}
			
			#container .page_container .row input,
			#container .page_container .row select {
				margin-right: 0px;
			}
			
			#container .page_container .row input {
				border: 1px solid #999;
				text-align: left;
				background: #fff;
			}

			#container .page_container .row input[type="number"],
			#container .page_container .row input[type="text"] {
				width: 75px;
			}
			
			#container .page_container .row label.country {
				width: 25% !important;
			}
			#container .page_container .row .right.country {
				width: 70%;
			}
			#container .page_container .row select {
				width: 100% !important;
			}
			
			#container .page_container .row label.idle_time, #container .page_container .row label.est_miles_per_day {
				width: 67% !important;
			}
			
			#container .page_container .row .right.idle_time, #container .page_container .row .right.est_miles_per_day {
				width: 30%;
			}
			

			#container .page_container .row label.fuel_cost {
				width: 30%;
			}
			
			#container .page_container .row .right.fuel_cost {
				width: 65%;
			}
				#container .page_container .row .right.fuel_cost input {
					margin-right: 2px;
				}
			
		
/* First Page */
#get_started {
	text-align: center;
}
	#get_started div.text {
		text-align: center;
		margin-bottom: 20px;
	}
	#get_started a {
		display: block;
		margin: 5px;
		padding: 0px 40px;
		height: 30px;

		color: #fff;
		font-weight: bold;
		font-size: 14px;
		line-height: 30px;
		letter-spacing: 1px;
		text-align: center;
		text-transform: uppercase;
		text-decoration: none;
		text-shadow: -1px -1px 0px rgba(0,0,0, 0.25);
	}


/* Results Page */
#container div.page_container.results div.row {
	overflow: auto;
}
#container div.page_container.results div.row span.name {
	float: left;
	text-align: left;
	width: 55%;
	white-space: nowrap;
}
#container div.page_container.results div.row span.value {
	float: right;
	text-align: right;
	width: 45%;
	white-space: nowrap;
	min-width: 150px;
}


#container .results .title {
	padding-bottom: 5px;
	text-align: center;
}
	#container .results .title .logo {
		padding-bottom: 5px;
	}
	#container .results .title h1 {
		display: inline-block;

		font-size: 15px;
		line-height: 17px;
		font-weight: bold;
		
		text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
	}

#disclaimer {
	font-size: 10px;
	text-align: center;
	margin: 10px 7px;
}

#contact {
	text-align: center;
	margin: 20px 0 0 0;
	padding-bottom: 20px;
}

#contact a {
	display: block;
	margin: 5px;
	padding: 0px 40px;
	height: 30px;
	
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: -1px -1px 0px rgba(0,0,0, 0.25);
}

.grad {
	border: 0px;
	border-radius: 5px;
}
.grad.blue {
	background: #0082cb;
	background: -webkit-gradient(linear, left top, right top, from(#0cf), to(#003C8D));
	background: -moz-linear-gradient(left, #0af, #003C8D);
}
.grad.blue:hover,
.grad.blue:active {
	background: #003C8D;
	background: -webkit-gradient(linear, left top, right top, from(#0cf), to(#002962));
	background: -moz-linear-gradient(left, #0af, #002962);
}
.grad.orange {
	background: #ff7012;
	background: -webkit-gradient(linear, left top, right top, from(#ff9822), to(#ff4500));
	background: -moz-linear-gradient(left, #ff9822, #ff4500);
}
.grad.orange:hover,
.grad.orange:active {
	background: #ff4500;
	background: -webkit-gradient(linear, left top, right top, from(#ff9822), to(#DD3C01));
	background: -moz-linear-gradient(left, #ff9822, #DD3C01);
}
.grad.green {
	background: #379700;
	background: #379700 -webkit-gradient(linear, left top, right top, from(#77bb00), to(#027800));
	background: -moz-linear-gradient(left, #77bb00, #027800);
}
.grad.green:hover,
.grad.green:active {
	background: #027800;
	background: -webkit-gradient(linear, left top, right top, from(#77bb00), to(#016000));
	background: -moz-linear-gradient(left, #77bb00, #016000);
}