@charset "utf-8";
	/* Curtis' Google Mapz Route Calculator Stylesheetz codez */


	body {
		margin: 0px;
		background-color: #223230;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #ffffff;
	}
	
	#directionsFinderOuterContainer {
		position: relative;
		width: 1025px;
		height: 100%;
		text-align:center;
		margin: auto;
	}
	
	input[type='text'] {
		position: absolute;
		left: 60px;
		width: 400px;
		height: 20px;
		font-size: 14px;
	}
	
	input[type='button'] {
		-webkit-appearance: button;
		height: 30px;
		font-size: 14px;
	}
	
	label {
		font-size: 14px;
	}
	
	#titleArea {
		position: absolute;
		height: 100px;
		display: table-cell;
    	vertical-align: middle;	
		padding-top: 30px;	
		padding-left: 130px;
		font-size: 30px;
	}

	a.position:link { color: #b3ddd8; text-decoration: none; }
	a.position:visited { color: #69948c; text-decoration: none; }
	a.position:hover { color: #ffffff; text-decoration: underline; }
	a.position:active { color: #394f4b; text-decoration: underline; }
	a.position { display: inline; font-size:14px; }
	
	#map {
		position: absolute;
		top: 100px;
		left: 10px;
		width: 600px;
		height: 450px;
		border: 1px solid #ffffff;
	}

	#outerControlsContainer{
		position: absolute;
		top: 580px;
		left: 10px;
		height: 390px;
		width: 602px;
	}

	#controlsContainer {
		background-color: #435f5a;
		border: 1px solid #ffffff;
		height: 350px;
		width: 600px;
	}
	
	#controlsTitle {
		position: relative;
		top: 20px;
		left: 20px;
		width: 250px;
		font-size: 20px;
	}
	
	#textBoxesContainer {
		position: relative;
		top: 40px;
		left: 50px;
		width: 500px;
	}
	
	#lblFrom {
		position: absolute;
		top: 5px;
		left: 10px;
	}
	
	#toLabelAndTextBoxHolder {
		position: absolute;
		top: 70px;
	}
	
	#lblTo {
		position: absolute;
		top: 5px;
		left: 27px;
	}

	#fromLink {
		position: absolute;
		top: 25px;
		left: 70px;
	}
	
	#toLink {
		position: absolute;
		top: 95px;
		left: 70px;
	}
	
	.linkAsText {
		font-size:14px;
	}
	
	#buttonsHolder {
		position: absolute;
		top: 210px;
		left: 60px;
	}
	
	#btnReset {
		position: absolute;
		top: 70px;
		left: 40px;
	}
	
	#btnSubmit {
		width: 145px;
	}
	
	#btnDisplacement {
		width: 145px;
		margin-left: 5px;
	}
	
	#btnFullSizeMap {
		width: 145px;
		margin-left: 5px;
	}

	#panel {
		position: absolute;
		top: 850px;
		left: 235px;
		width: 280px;
/*		margin-left: -180px;
*/		z-index: 5;
		background-color: #ffffff;
		padding: 5px;
		border: 1px solid #999999;
	}

	.routeRestrictions {
		color: #000000;
	}

	.linksAsText {
		color: #808080;	
	}

	.sidenote {
		font-size: 12px;
	}
	
	#outerDirectionsContainer {
		position: absolute;
		top: 100px;
		left: 640px;
		width: 385px;
		padding-bottom: 10px;
/*		margin-bottom: 40px; */
	}
	
	#directionsTitle {
		text-align: center;
		font-size: 20px;
	}

	#instructionsOutput {
		width: 330px;
		padding: 10px 25px 10px 15px;
		background-color: #435f5a;
		border: 1px solid #ffffff;
		text-align: left;
	}
	
	#statsPlaceholder {
		text-align: left;
	}
	
	#coordinatesPlaceholder {
		text-align: left;
	}
	
	ul {
		margin-left: 25px;
		margin-right: 5px;
	}
	
	table {
		font-size: 12px;
	}
	
	tr {
		vertical-align: top;
	}
	
	.imageCell {
		width: 20px;
	}
	
	.numberCell {
		width: 15px;
		text-align: right;
	}
	
	.liForRouteDirections {
		padding-left: 10px;
		padding-bottom: 15px;
	}
	
	.maneuverIcon {
		float: left;
	}
	
	#outputDataContainer {
		position: relative;
		width: 370px;
		padding-top: 10px;
		padding-bottom: 20px;
		top: 30px;
		background-color: #435f5a;
		border: 1px solid #ffffff;
	}
	
	#coordinatesOutput {
		position: relative;
		width: 370px;
	/*	margin-top: 30px; */
		padding-top: 10px;
		padding-bottom: 20px;
		top: 60px;
		background-color: #435f5a;
		border: 1px solid #ffffff;
	}
	
	#coordinatesEndOutput {
		position: relative;
		width: 370px;
	/*	margin-top: 30px; */
		padding-top: 10px;
		padding-bottom: 20px;
		top: 90px;
	/*	background-color: #435f5a; */
		border: 1px solid #ffffff;
	}
	
/*	#locationFrom {
	
	}
*/	
	.outputText {
		position: relative;
		padding-left: 20px;
		height: 30px;
		line-height: 40px;
		font-size: 14px;
	}
		
	#spacer {
		position: relative;
		margin-top: 20px;
		margin-bottom: 20px;
		height: 40px;
	}

	ol, ul {
		padding-left: 8px;
		font-size: 12px;
	}

	li {
		margin: 16px 0px;
		padding-left: 10px;
	}
	
	
		/* ------------ styles for map info windows -------------- */
		
	#placeFromSmallIcon, #placeToSmallIcon {
		float: left;
		padding-top: 2px;
	}

	#fromContainer .title, #toContainer .title {
		padding-top: 2px;
		padding-left: 25px;
		padding-bottom: 8px;
		font-weight: bold;
	}

	#startLongAddress, #endLongAddress {
		padding-left: 5px;
	}
	
	#fromContainer, #toContainer {
		display: none;
	}

	#map #fromContainer, #map #toContainer {
		display: inline;
		color: black;
	}

	/* ----------------------------------------------------------- */
	
	@media screen and (max-width: 980px) and (orientation: portrait) {
		#directionsFinderOuterContainer {
			position: relative;
			top: 0;
			width: 96%;
			height: 100%;
		}
		
		#titleArea {
			position: relative;
			display: block;
			height: 0px;
			padding-top: 30px;
	/*		padding-bottom: 40px; */
			padding-left: 0;	
			margin-left: auto;
			margin-right: auto;
			font-size: 30px;
			line-height: 40px;
		}
		
		#map {
			position: relative;
			top: 30px;
			left: 0;
			width: 96%;
			height: 450px;
			margin-right: auto;
			margin-left: auto;
		}
		
		#outerControlsContainer{
			position: relative;
			margin-top: 20px;
			top: 35px;
			left: 0;
			height: 390px;
			width: 96%;
			margin-right: auto;
			margin-left: auto;
		}
		
		#controlsContainer {
			position: relative;
			margin-right: auto;
			margin-left: auto;
			width: 100%;
		}
		
		#textBoxesContainer {
			position: relative;
			top: 40px;
			left: 0px;
			width: 500px;
			margin-right: auto;
			margin-left: auto;
		}
		
		#buttonsHolder {
			position: relative;
			top: 180px;
			left: -10px;
			margin-right: auto;
			margin-left: auto;
		}
		
		#btnReset {
			position: absolute;
			top: 70px;
			left: 20%;
		}
		
		#panel {
			position: relative;
			top: 835px;
			width: 280px;
			left: 40%;
/*			margin-left: -180px;
*/			z-index: 5;
			background-color: #ffffff;
			padding: 5px;
			border: 1px solid #999999;
		}
		
		#outerDirectionsContainer {
			position: relative;
			top: 25px;
			left: 0;
			margin-right: auto;
			margin-left: auto;
			width: 100%;
			padding-bottom: 10px;
/*			margin-bottom: 40px; */
		}
		
		#instructionsOutput {
			position: relative;
			width: 96%;
		/*	padding: 10px 25px 10px 15px; */
			padding: 0;
			padding-bottom: 20px;
			margin-right: auto;
			margin-left: auto;
			background-color: #435f5a;
			border: 1px solid #ffffff;
			text-align: left;
		}
		
		ol, ul {
			padding-left: 15px;
			padding-right: 25px;
			font-size: 12px;
		}
		
		table {
			margin-left: 30px;
			margin-right: 30px;
			font-size: 14px;
		}
		
		#outputDataContainer {
			position: relative;
			width: 96%;
		/*	padding: 10px 30px 20px 30px; */
			padding-top: 10px;
			padding-bottom: 20px;
			top: 30px;
			margin-right: auto;
			margin-left: auto;
			background-color: #435f5a;
			border: 1px solid #ffffff;
		}
		
		#durationOutput {
			padding-left: 20px;
		}
		
		#distanceOutput {
			padding-left: 20px;
		}
		
		#displacementOutput {
			padding-left: 20px;
		}
		
		#locationFrom {
			padding-left: 20px;
		}
		
		#locationFrom > div.outputText:nth-child(2) { /* From address */
			padding-left: 40px;
		}
		
		#locationFrom > div.outputText:nth-child(3) > div:nth-child(1) { /* From word latitude */
			padding-left: 40px;
		}
		
		#locationFrom > div.outputText:nth-child(3) > div:nth-child(2) { /* From latitude coordinates */
			padding-left: 40px;
		}
		
		#locationFrom > div.outputText:nth-child(4) > div:nth-child(1) {  /* From word longitude */
			padding-left: 40px;
		}
		
		#locationFrom > div.outputText:nth-child(4) > div:nth-child(2) { /* From longitude coordinates */
			padding-left: 40px;
		}
		
		#locationTo {
			padding-left: 20px;
		}
		
		#locationTo > div.outputText:nth-child(1) { /* To address */
			padding-left: 40px;
		}
		
		#locationTo > div.outputText:nth-child(2) > div:nth-child(1) { /* To word latitude */
			padding-left: 40px;
		}
		
		#locationTo > div.outputText:nth-child(2) > div:nth-child(2) { /* To latitude coordinates */
			padding-left: 40px;
		}
		
		#locationTo > div.outputText:nth-child(3) > div:nth-child(1) {  /* To word longitude */
			padding-left: 40px;
		}
		
		#locationTo > div.outputText:nth-child(3) > div:nth-child(2) { /* To longitude coordinates */
			padding-left: 40px;
		}
		
		#coordinatesOutput {
			position: relative;
			width: 96%;
			padding-top: 10px;
			padding-bottom: 20px;
			top: 60px;
			margin-right: auto;
			margin-left: auto;
			background-color: #435f5a;
			border: 1px solid #ffffff;
		}
	
	}