/*
 * ***********
 * Website CSS
 * ***********
 */
 
 


.sectionContent
{
	padding: 24px;
	margin: auto;
	max-width: 1328px;    /* 320px x 4 = 1280 ( border-box calculated so includes 2 x 24px padding ) */
	color:  rgb(   0,   0,   0       );
}


	/* CSS for placeholders */
	::-webkit-input-placeholder { color:  rgb( 180, 180, 180       ); }
	::-moz-placeholder          { color:  rgb( 180, 180, 180       ); }
	:-ms-input-placeholder      { color:  rgb( 180, 180, 180       ); }
	:-moz-placeholder           { color:  rgb( 180, 180, 180       ); }
	::placeholder               { color:  rgb( 180, 180, 180       ); }








/* *************
 * header styles
 * *************/


#header
{
	text-align: center;
	padding-bottom: 12px;    /* Reduced to account for 12px margin on mainNav links. */
}


	#logoImage
	{
		box-sizing: content-box;    /* Image height is most important to ensure vertical rhythm */
		padding: 12px;
		width: 190px;
		height: 96px;
		background-color: rgba( 245, 255, 250, 0.66 );
		border-radius: 6px;
	}


	#mainNav a
	{
		display: inline-block;
		vertical-align: top;
		margin: 12px;
		padding: 6px;
		width: 96px;
		height: 60px;
		line-height: 24px;
		color:  rgb( 245, 255, 250       );
		background-color: rgba(  50, 119, 113, 0.66 );
		border-radius: 6px;
		text-decoration: none;
		transition: background-color 0.3s ease;
		transition: box-shadow 0.3s ease;
	}

		#mainNav a:hover
		{
			background-color:  rgb(  50, 119, 113       );
			box-shadow: 2px 2px 12px  rgb(  60,  60,  60       );
		}
		

		@media only screen and (max-width: 1150px)
		{
			#mainNav
			{
				max-width: 700px;
				margin-left: auto;
				margin-right: auto;
			}
		}

			@media only screen and (max-width: 670px)
			{
				#mainNav
				{
					max-width: 470px;
				}
			}


	#siteSearchInput
	{
		margin-top: 12px;
		border: none;
		padding: 6px;
		width: 216px;
		height: 36px;
		font-size: 16px;
		line-height: 1;
		text-align: center;
		color:  rgb( 120, 120, 120       );
		background-color:  rgb( 245, 255, 250       );
		border-radius: 6px;
	}

	

		.Nav_onClick:hover
		{
			color: rgb( 255,255,255);
			background-color: #374269;		
		}

	.Nav_hasSubMenu
	{
		position: relative;
		vertical-align: middle;
		width: 170px;
		height: 35px;
		border: 0;
		border-right-style:solid;
		font-size: 20px;
		font: inherit;
		color: #374269;
		background-color: rgb(255,255,255 );
		transition:all 0.3s ease;

		cursor: pointer;

		
	}

		
		.Nav_hasSubMenu:hover
		{
			color: rgb( 255,255,255);
			background-color: #374269;		
		}


		.Nav_hasSubMenu ul
		{
			display: none;
			position: absolute;    /* Required so that this element stays fixed below the parent */
			top: 40px;             /* Vertical offset from the top of the parent */
			left: 0px;             /* Horizontal offset from the left of parent */
			z-index: 100000;       /* Display on top of everything else */

			width: 170px;           /* Match the width of the parent (optional) */
			
			background-color: rgb( 255,255,255);
			color: rgb( 0,0,0 );
			padding: 0px;			
			text-align: left;
			border-bottom-width:5px;
			border-bottom-style: solid;
			border-bottom-color: #374269;
			
			
		}

		.Nav_hasSubMenu ul li

		{ 	padding: 5px;
						

		}
		
			.Nav_hasSubMenu ul li:hover
			{
				
				color: rgb( 128,165,9 );
				border-left-style:solid;
				border-left-width: 5px
						
			}

		




/* ******************************************
 * mainPageContent and commentsContent styles
 * ******************************************/

h2, h3, h4, h5, h6
{
	color:  rgb(  50, 119, 113       );
}


#mainPageContent a, #commentsContent a
{
	color:  rgb(   0,   0,   0       );
	font-weight: 700;
}


#mainPageContent ul, #commentsContent ul
{
	margin-left: 24px;
	list-style: circle;
	
}


#mainPageContent ol, #commentsContent ol
{
	margin-left: 24px;
	list-style-type: lower-alpha;
}


#mainPageContent label, #commentsContent label
{
	display: inline-block;
	font-weight: 700;
	color:  rgb(   0,   0,   0       );
}



#mainPageContent input, #mainPageContent textarea, #mainPageContent select, #mainPageContent button,
#commentsContent input, #commentsContent textarea, #commentsContent select, #commentsContent button
{
	display: block;
	margin-bottom: 24px;
	border: 1px solid  rgb( 180, 180, 180       );
	padding: 6px;
	width: 100%;
	height: 36px;
	font-size: 12px;
	line-height: 1;
	color: black;
	border-radius: 6px;
	text-align: left;
}

	#mainPageContent textarea, #commentsContent textarea
	{
		padding: 12px 6px;
		height: 84px;
		color: black;
	}

#mainPageContent button, #commentsContent button
	{
		width: 100%;
		color:  rgb( 245, 255, 250       );
		background-color:  rgb(  29,  69,  66       );
		font-weight: 300;
		text-align: center;
		text-transform: uppercase;
		box-shadow: 2px 2px 6px  rgb(   0,   0,   0       );
	}
	
#mainPageContent button:active, #commentsContent button:active
		{
			background-color:  rgb(  55, 119, 171       );
			box-shadow: inset 2px 2px 6px  rgb(  60,  60,  60       );
		}	
	
			

		#mainPageContent .stickyButton, #mainPageContent .helpButton
		{
			display: inline-block;
			margin: 0 3px 0;
			border: none;
			padding: 0;
			height: 16px;
			width: 16px;
			background-color: white;
			box-shadow: none;
		}

			#mainPageContent .stickyButton img, #mainPageContent .helpButton img
			{
				height: 16px;
				width: 16px;
			}

				#mainPageContent .helpButton
				{
					margin-left: 24px;
				}


	.mandatoryField
	{
		color:  rgb( 209, 109, 197       );
	}


	.inputValid
	{
		border: 1px solid  rgb(  82, 196, 187       ) !important;
		box-shadow: 0 0 2px 2px  rgb(  82, 196, 187       );
	}


	.inputHelpWrapper
	{
		position: relative;
	}

		.inputHelp
		{
			position: absolute;
			display: none;
			border: 2px solid rgb( 255, 203, 140 );
			padding: 6px;
			padding-top: 12px;
			max-height: 216px;
			border-radius: 2px;
			box-shadow: 1px 1px 2px rgb( 60, 60, 60 );
			background-color: #ffeed9;
			overflow-y: auto;
		}


.radioBlock
{
	margin-bottom: 24px;
	padding: 6px;
	background-color: whitesmoke;
	border-radius: 6px;
}

	#mainPageContent .radioLabel
	{
		display: inline-block;
		font-weight: 400;
	}

	#mainPageContent input[type=radio]
	{
		display: inline-block;
		vertical-align: top;
		margin: 0px;
		margin-left: 3px;
		margin-right: 3px;
		width: 20px;
		height: 20px;
	}



table
{
	width: 100%;
}

	/* Zebra striping */
	tr:nth-of-type(odd)
	{
		background: #fafafa;
	}

		th
		{
			background-color: #f0f0f0;
			font-weight: 700;
		}

		th
		{
			padding: 6px ;
			border-radius: 6px;
			text-align: left;
		}


	#mainPageContent table input
	{
		margin-bottom: 0;
	}


	#mainPageContent table button
	{
		display: inline-block;
		vertical-align: bottom;
		margin: 6px 0 0;
		border: none;
		padding: 0;
		width: 24px;
		height: 24px;
		background-color: white;
		box-shadow: none;
	}

		#mainPageContent table button img
		{
			width: 24px;
			height: 24px;
		}



	/*************************
	 * Responsive image styles
	 *************************/

	.mainPageContentLeftImage, .mainPageContentRightImage
	{
		margin-bottom: 24px;
		width: 40%;
		height: auto;
		min-width: 254px;
	}

		.mainPageContentLeftImage
		{
			float: left;
			margin-right: 24px;
		}

		.mainPageContentRightImage
		{
			float: right;
			margin-left: 24px;
		}

			@media only screen and (max-width: 960px)
			{
				.mainPageContentRightImage, .mainPageContentLeftImage
				{
					width: 60%;
				}
			}

				@media only screen and (max-width: 640px)
				{
					.mainPageContentRightImage, .mainPageContentLeftImage
					{
						float: none;
						margin: 0 0 24px;
						width: 100%;
					}
				}




	/******************************************
	 * 25%, 33%, 50% & 100% column width styles
	 ******************************************/

	.column25Percent, .column33Percent, .column50Percent, .column100Percent
	{
		float: left;
		padding-right: 24px;
		min-width: 254px;
	}
	
		.column25Percent
		{
			width: 25%;
		}
		
		.column33Percent
		{
			width: 33%;
		}

		.column50Percent
		{
			width: 50%;
		}

		.column100Percent
		{
			width: 100%;
		}

			@media only screen and (max-width: 1080px)
			{
				.column25Percent, .column33Percent
				{
					width: 50%;
				}
			}

				@media only screen and (max-width: 624px)
				{
					.column25Percent, .column33Percent, .column50Percent, .column100Percent
					{
						width: 100%;
						padding-right: 0;
					}
				}




	/***************************************************************
	 * jQuery UI autocomplete styles
	 *
	 * .gmwildAutocomplete is here for support of legacy GMLRC forms
	 ***************************************************************/

	.swiftAutocomplete, .gmwildAutocomplete
	{
		width: 100%;    /* Required to fix bug with jQuery autocomplete menu width. */
	}

	.swiftAutocomplete li, .gmwildAutocomplete li
	{
		border-bottom: 1px solid  rgb( 180, 180, 180       );
		padding: 3px 6px 2px;
		font-size: 12px;
		line-height: 18px;
		font-family: 'Montserrat', sans-serif;
		color:  rgb( 133,  69, 125       );
	}

		.swiftAutocomplete li:last-child, .gmwildAutocomplete li:last-child
		{
			border-bottom: none;
		}

		.swiftAutocomplete li .ui-state-active, .gmwildAutocomplete li .ui-state-active
		{
			border: none;
			font-size: 14px;
			color:  rgb(  50, 119, 113       ) !important;
		}


	/* Loading class to add spinner to jQueryUI autocomplete elements. */
	.ui-autocomplete-loading
	{
		background: url('../media/icons/ajax_loader.gif') no-repeat right center;
	}

	.ui-effects-transfer
	{
		border: 1px dotted  rgb( 120, 120, 120       );
		background-color: rgba(  29,  69,  66, 0.8  );
		border-radius: 6px;
	}




	/****************
	 * Paper effect
	 ****************/

	.paperEffect
	{
		position: relative;
	}

		.paperEffect:before, .paperEffect:after
		{
			z-index: -1;
			position: absolute;
			content: "";
			bottom: 12px;
			left: 10px;
			width: 50%;
			top: 80%;
			max-width:300px;
			background: #333;
			-webkit-box-shadow: 0 12px 10px #333;
			-moz-box-shadow: 0 12px 10px #333;
			box-shadow: 0 12px 10px #333;
			-webkit-transform: rotate(-3deg);
			-moz-transform: rotate(-3deg);
			-o-transform: rotate(-3deg);
			-ms-transform: rotate(-3deg);
			transform: rotate(-3deg);
		}

			.paperEffect:after
			{
				-webkit-transform: rotate(3deg);
				-moz-transform: rotate(3deg);
				-o-transform: rotate(3deg);
				-ms-transform: rotate(3deg);
				transform: rotate(3deg);
				right: 10px;
				left: auto;
			}




	/*****************************************
	 * Inferior device MapApp fullscreen class
	 *****************************************/

	#mainPageContent .fullscreenHack
	{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100000000;
		width: 100%;
		height: 100%;
	}




/* *************
 * footer styles
 * *************/


#footerWrapper
{
	background-color:  rgb(  50, 119, 113       );
}

	#footerWrapper .sectionContent
	{
		color:  rgb( 245, 255, 250       );
	}

	#footerContent a
	{
		color: white;
		font-weight: 700;
	}

	.footerSocialMedia
	{
		display: inline-block;
		margin-right: 24px;
		margin-bottom: 24px;
		width: 48px;
		height: 48px;
	}

		.footerSocialMedia img
		{
			width: 48px;
			height: 48px;
		}


	#partnerLinks img
	{
		display: inline-block;
		margin: 0px 24px 18px 0px;
		width: auto;
		height: 48px;
	}

	#footerContent textarea, #footerContent input, #footerContent button
	{
		display: block;
		margin-bottom: 12px;
		border: 0px;
		padding: 6px;
		width: 254px;    /* 254px = 320px - ( 2 x 24px margin ) - 18px scroll bar */
		height: 36px;
		font-size: 12px;
		color:  rgb( 120, 120, 120       );
		border-radius: 6px;
		text-align: left;
	}

		#footerContent textarea
		{
			height: 84px;
		}

		#footerContent button
		{
			width: 170px;    /* http://www.modularscale.com/?254&px&1.5 */
			color:  rgb( 245, 255, 250       );
			background-color:  rgb(  29,  69,  66       );
			font-weight: 300;
			text-align: center;
			text-transform: uppercase;
			box-shadow: 2px 2px 6px  rgb(   0,   0,   0       );
		}

			#footerContent button:active
			{
				background-color:  rgb(  55, 119, 171       );
				box-shadow: inset 2px 2px 6px  rgb(  60,  60,  60       );
			}




/* ********************
 * User controls styles
 * ********************/

#toggleUserControlsPanelButton
{
	position: absolute;
	top: 24px;
	right: 24px;
	box-sizing: content-box;    /* For vertical rhythm. */
	border: 0;
	padding: 6px;
	border-radius: 2px;
	background-color: rgba(51,51,51, 0.7);
	color: #ffffff;	
	z-index: 99999;    /* Only the notification panel appears above this button. */
}

	#toggleUserControlsPanelButton img
	{
		height: 36px;
		width: 36px;
	}


#userControlsPanel
{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 24px;
	width: 278px;    /* 320 - 24 left margin - 18px scroll-bar */
	color:  rgb( 245, 255, 250       );
	background-color: rgba(  29,  69,  66, 0.8  );
	box-shadow: -6px 0px 12px  rgb(  60,  60,  60       );
	border-bottom-left-radius: 6px;

	
}

	#userControlsPanel input, #userControlsPanel button
	{
		display: block;
		margin-bottom: 12px;
		padding: 6px;
		border: 0px;
		width: 168px;
		height: 36px;
		font-size: 12px;
		line-height: 1;
		color:  rgb( 120, 120, 120       );
		border-radius: 2px;	
		text-align: left;
		box-shadow: 5px 5px 5px #4d4d4e;
	}

		#userControlsPanel button
		{
			display: inline-block;
			vertical-align: top;
			margin-right: 12px;
			width: 78px;
			color:  rgb( 245, 255, 250       );
			background-color:  rgb(  29,  69,  66       );
			font-weight: 500;
			text-align: center;
			box-shadow: 5px 5px 5px #4d4d4e;
			
		}

			#userControlsPanel button:active
			{
				background-color:  rgb(  55, 119, 171       );
				box-shadow: inset 2px 2px 6px  rgb(  60,  60,  60       );
			}




/* *******************
 * Notification styles
 * *******************/

#notificationWrapper
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: rgba (144,187,39, 0.5);
	z-index: 100000;
}

	.notificationError
	{
		background-color: rgba( 171,  59,  55, 0.8  ) !important;
	}

	#notificationMessage
	{
		margin-right: 48px;
		color:  rgb( 245, 255, 250       );
	}

	#closeNotificationButton
	{
		position: absolute;
		top: 24px;
		right: 24px;
		box-sizing: content-box;
		border: 0;
		padding: 0;
		background-color: transparent;
	}

		#closeNotificationButton img
		{
			height: 24px;
			width: 24px;
		}

	#cropped_loader_image
	{
		display: block;
		box-sizing: content-box;
		margin: 0 auto;
		height: 24px;
		width: 106px;
	}