<?php

	header("Content-type: text/css");

?>
/*
 * *************
 * MapApp styles
 * *************
 */




/* ******************
 * Styling guidelines
 * ******************
 * CSS properties are ordered by utility (not alphabetically) as follows:
 *     1. Overflow and positioning
 *     2. Display and box-model
 *     3. Typography and colours
 *     4. Other
 *
 * Vertical rhythm is multiples of 13px. Line-height is generally 1 x 13px.
 * A line-height of 20px (approx 1.5 x 13px) is used for chunks of body text.
 *
 * Where possible use single-direction margin declarations on margin-bottom
 * (to push items down the page) and margin-right (to push across the page).
 *
 * The styles assume a minimum viewport width of 320px. */




/* ****************************
 * Reset default browser styles
 * ****************************/


	html, body, div, span,
	h1, h2, h3, h4, h5, h6, p, a, em,
	small, strong, sub, sup,
	ol, ul, li, label,
	table, tr, td,
	img, canvas, audio, video
	{
		margin: 0;
		border: 0;
		padding: 0;
		font-size: 13px;
		font: inherit;
		vertical-align: baseline;
	}


	body
	{
		line-height: 1;
	}


	ol, ul
	{
		list-style: none;
	}


	table
	{
		border-collapse: collapse;
		border-spacing: 0;
	}








/* *************
 * MapApp Styles
 * *************/


	html, body
	{
		overflow: hidden;
		width: 100%;
		height: 100%;
		color: rgb( 95, 158, 160 );
		font-family: 'Roboto', sans-serif;
	}


	input, select, button
	{
		display: block;
		box-sizing: content-box;    /* Default box model. Padding and border are excluded from the element's overall height and width measurement. */
		border: 2px solid rgb( 95, 158, 160 );
		padding: 2px 4px;
		color:rgb( 95, 158, 160 );
		background-color:rgba( 255, 255, 255, 0.9);
		font-family:'Roboto Condensed', sans-serif;
		font-style: italic;
		text-transform: uppercase;
		border-radius: 6.5px;
	}

	/* Style placeholder text */
		::-webkit-input-placeholder { color:rgb( 95, 158, 160 ); opacity: 0.9; }
		:-moz-placeholder           { color:rgb( 95, 158, 160 ); opacity: 0.9; }
		::-moz-placeholder          { color:rgb( 95, 158, 160 ); opacity: 0.9; }
		:-ms-input-placeholder      { color:rgb( 95, 158, 160 ); opacity: 0.9; }


	button
	{
		padding: 0;
		background-color: rgb( 255, 255, 255 );
		opacity: 0.9;
		text-align: center;
		cursor: pointer;
	}

		/* Remove additional padding from Firefox */
		button::-moz-focus-inner { padding: 0; border: 0; }


	h2
	{
		margin-top: 13px;
		font-size: 16px;
		font-weight: 400;
		font-family:'Roboto Condensed', sans-serif;
		font-style: italic;
		text-transform: uppercase;
		text-align: center;
	}




	/* Styles for all smallButtons - 31px x 31px including a 2px border */
	.smallButton
	{
		width: 27px;
		height: 27px;
	}

		.smallButton img
		{
			padding: 2px;
			width: 23px;
			height: 23px;
		}




	/* Styles for all largeButtons - 78px x 78px including a 2px border    *NOT CURRENTLY IN USE*    */
	.largeButton
	{
		display: inline-block;
		width: 74px;
		height: 74px;
		margin: 26px 0px 13px 6.5px;
	}

		.largeButton img
		{
			padding: 2px;
			width: 70px;
			height: 70px;
		}




	/* Google map canvas */
	#mapCanvas
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}




	/* Display mouseover and click position information */
	#positionData
	{
		position: absolute;
		bottom: 68px;
		left: 13px;
		margin-right: 50.5px;    /* Provides space for the map controls on smaller viewports */
		color: rgb( 211, 236, 236 );
		font-family: 'Roboto Condensed', sans-serif;
		font-style: italic;
		background-image: linear-gradient( to right, rgba( 0, 0, 0, 0) 0px, rgba( 50, 119, 113, 0.6) 78px, rgba( 0, 0, 0, 0) 156px );
		text-shadow: -1px -1px 0 rgb( 0, 0, 0 ), 1px -1px 0 rgb( 0, 0, 0 ), -1px 1px 0 rgb( 0, 0, 0 ), 1px 1px 0 rgb( 0, 0, 0 ), 1px 1px 3px rgb( 0, 0, 0 );
		pointer-events: none;
	}

		#positionData p
		{
			margin: 0px;
			font-size: 26px;
		}

		#positionData small
		{
			display: block;
			font-size: 16px;
		}




	/* Google places search, user entered coordinates and geolocate button */
	#recentreMapControls
	{
		position: absolute;
		top: 13px;
		left: 13px;
	}

		.mapappInput, .mapappSelect
		{
			margin-bottom: 6.5px;
			width: 282px;    /* Width = 282px = 320px - ( 2 x 13px margin ) - ( 2 x 2px border ) - ( 2 x 4px padding ) */
			height: 23px;    /* To match small buttons */
			font-size: 16px;
		}

			#googlePlacesSearch, #userEnteredCoords
			{
				display: inline-block;
				width: 192px;    /* Width = 282px - ( 6.5px margin ) - ( 31px geolocation button ) */
			}


				.pac-container
				{
					width: 230px;
				}


			#customViewsSelectOne, #customViewsInputOne, #customViewsSelectTwo, #customViewsInputTwo
			{
				width: 230px;
				border-color: rgb( 94, 129, 173 );
				color: rgb( 94, 129, 173 );
			}


		#mySites, #geolocate
		{
			display: inline-block;
			vertical-align: top;
			margin-left: 6.5px;
		}




	/* Drawing controls */
	#drawingControls
	{
		position: absolute;
		bottom: 32px;
		left: 13px;
	}

		#drawingControls button
		{
			display: inline-block;
			margin-right: 6.5px;
		}

			.drawingModeButtonPressed
			{
				border: 2px solid rgb( 57, 95, 96 );
				background-color: rgb( 242, 224, 133 );
				opacity: 1;
			}




	/* Drawing Options Panel */
	#drawingOptionsPanel
	{
		display: none;
		position: absolute;
		bottom: 70px;
		left: 13px;
		border: 2px solid rgb( 95, 158, 160 );
		padding: 0px 0px 13px;
		width: 252px;
		background-color: rgba( 255, 255, 255, 0.9 );
		border-radius: 6.5px;
		text-transform: uppercase;
	}

		/* Down arrow pointing to the drawing options button */
		#drawingOptionsPanel:after
		{
			display: block;
			position: absolute;
			bottom: -15px;
			left: 150px;
			border-style: solid;
			border-width: 13px 13px 0px;
			border-color: rgb( 95, 158, 160 ) transparent;
			content: '';
		}

		#drawingOptionsPanel label, #bufferSize, #waypointDistance, #rulerMode
		{
			display: inline-block;
			margin: 13px 0px 0px 13px;
			width: 100px;
			font-size: 13px;
			text-align: left;
		}

			#bufferSize, #waypointDistance, #rulerMode
			{
				height: 23px;
			}




	/* Map controls */
	#mapControls
	{
		position: absolute;
		bottom: 32px;
		right: 13px;
	}

		#mapControls button
		{
			margin-top: 6.5px;
		}

			#toggleBaseMap img
			{
				height: 27px !important;
				width: 27px !important;
				padding: 0 !important;
			}




	/* Hide #positionData and #mapControls when viewport shrinks */
	@media only screen and (max-height: 260px)
	{
		#positionData, #mapControls
		{
			display: none;
		}
	}




	/* Info window */
	#infoWindow
	{
		display: none;
		overflow-y: scroll;    /* Force vertical scrollbar */
		z-index: 0;            /* Required for working around Chrome mobile bug re: handling overflows */
		position: relative;
		margin: 13px auto;
		border: 2px solid rgb(95,158,160);
		padding: 0px 6.5px 13px;
		width: 277px;    /* Width = 277px = 320px - ( 2 x 13px margin ) - ( 2 x 2px border ) - ( 2 x 6.5px padding ) */
		max-height: 90%;
		background-color: rgba( 255, 255, 255, 0.9 );
		border-radius: 6.5px;
		text-transform: uppercase;
	}

		#closeInfoWindow
		{
			position: absolute;
			top: 0px;
			right: 0px;
			margin: 6.5px;
		}


		#goToMyAccount, #deleteUserDrawnMarker
		{
			position: absolute;
			top: 0px;
			left: 0px;
			margin: 6.5px;
		}


		#infoWindow table
		{
			position: relative;
			margin: 13px auto 0px;
			font-size: 13px;
			line-height: 20px;    /* 1.5 * FONT-SIZE */
		}

			.geometryTitles, .titles
			{
				padding-right: 13px;
				text-align: right;
			}

			.titles
			{
				min-width: 100px;
			}


		.intersectCheckbox
		{
			display: inline-block;
			margin-left: 13px;
		}

			.intersectLabel
			{
				margin-left: 6.5px;
				font-size: 13px;
				line-height: 20px;
				text-transform: none;
			}




	.mapMarkerLabel
	{
		position: absolute;
		padding-left: 6px;
		padding-right: 6px;
		font-size: 14px;
		font-family: 'Roboto Condensed', sans-serif;
		font-style: italic;
		font-weight: bold;
		color: rgb( 65, 108, 109 );
		background-color: rgba( 211, 236, 236, 0.7 );
		border-radius: 6.5px;
	}




	/* Preloader */
	#preloader
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		padding-top: 130px;
		text-align: center;
		background-color: rgba( 255, 255, 255, 0.9 );
	}

		#closePreLoader
		{
			position: absolute;
			top: 13px;
			right: 13px;
		}