html { height: 100% }
		body {	height: 100%;
				margin: 0;
				padding: 0;
		}
		* {	-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box; 
			box-sizing: border-box;			
		}

		button { border-radius: 5px;}
		
		#container {width:100%;}
		
		#header {	width: 100%;
					height: 20%;}
		
		#spacer {width: 100%;
				height: 20%}
				
		#navarea {	width: 100%;
					height: 80%;				
		}
		#navarea-left{	width:15%;
						height: 100%;
						float:left;
						padding-left: 4%;
		}
		#navarea-center{width:70%;
						height: 100%;
						float:left;
		}
		#navarea-center button {padding: 2px 0 3px;/*button default 2 6 3 */
		}
		#navarea-right{	width:15%;
						height: 100%;
						float:left;
		}
		
		/**/
		.nav {	border:solid;						
				width:30%;			
				height:100%;
				font-size:1.2em;
				font-weight:bold;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
		}				
		
		.navcenter {
					
		}
		.navleft {		
			
		}
		.navright {
			
		}
		
		#hamburger-icon {cursor: pointer;}
		
		#drop-menu{	display:none;
					position: fixed;
					z-index: 2;
					width: 75%;
					height: 250px;
					margin-top: 20px;
					text-align: left;
					padding: 20px 0 0 5.34%;
		}
		.drop-title {	font-weight: bold;
		}
		#drop-menu a {	display: block;
						/*width:90px;*/
						height: 30px;
						padding: 2px 6px 2px 10px;
						font-size:0.8em;
						text-decoration:none;
		}
		.contact	{	padding-left: 10px;
						font-size:0.8em;
		}

		#home { width: 100%;
				text-align:center;
				font-size:1.0em;
		}
		
		
		.action {
			border:solid;
			-moz-border-radius: 15px;
			border-radius: 15px;
			width:75%;
			font-size: 1.2em;
			font-weight:bold;
			height: 10%;						
		}
		button.action:disabled { opacity: 0.3;}
		
		.regselect {
			border:solid;
			border-radius: 5px;
			width:60%;
			font-size:1.2em;
			font-weight:bold;			
		}
		.sub-regions { 
			margin-top: 5px;		
		}
		select:disabled { color: gray ;}	
		
		#homespcr1 {	width:100%;
						height:3%;
		}
		
		#homemessage { margin-bottom: 1%;
						font-size: 1.5em;
						width: 100%;						
		}
		/* WORLD only */
		#country {	font-size: 1.2em;
					font-weight: bold;
					padding-top: 2.0%;
					width: 100%;
					height: 7%;
		}		
				
		#formarea {	height:25%;
					width: 100%;
					margin-top: 3%;
					margin-bottom: 5%;
		}
		
		/*#regionsform { height:100%}*/
		
		#bspcr1,#bspcr2,#bspcr3,#bspcr4 {	height:1%;
											width: 100%;
		}
		
		#sightspacer{ 	height: 1%;
						width: 100%;
		}
		
		#sightingsmessage{ 	height: 10%;
							width: 100%;
							text-align: center;
		}
		#sightmsg1 {height: 40%;
					width: 100%;
		}
		#sightmsg2 {height: 60%;
					width: 100%;
		}

		#sightingsspace{ 	height: 89%;
							width:94%;
							padding-left:4%;
							padding-right:2%;
							text-align:left;
							overflow:scroll;
		}
		
		#mapspacer{ height:1%;
					width: 100%;}
					
		.mapmsg { 	height: 6%;
					width: 100%;
					font-size: 1.2em;
		}
		
		#specieslist { height:100%;}
		
		.specselect { 	border:solid;
						border-radius: 5px;
						width:60%;						
						font-size:0.8em;}
						
		.pintxt { height: 0.9em;}
		
		#map_canvas{ 	height: 81%;
						width: 100%;
		}
		/* alert and message used in getChecklistsbyDate() */
		.alert {color: #ff9933;
		}
		
		.message {	width: 100%;
					height: 25px;
					text-align: center;
		}
		
		.locspeciesbutton {					
			background-color: transparent;		
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			font-size:100%; }
			
		.boldbutton {	
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			border:solid;
			font-size:100%;
			cursor: pointer; }
			
		.widebutton { 	width: 100%;
						font-size: 1.0rem;}
			
		.locspeciesbutton {
			width: 100%;
			font-size: 1.3rem;
			text-align: left;					
			background-color: transparent;		
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px; }
			
		.semiboldbutton {
			-webkit-transition-duration: 0.4s; /* Safari */
    		transition-duration: 0.4s;
			outline-style: none;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			padding: 2px 6px 3px;
			border:solid;
			border-width: 2px;
			font-size:0.7em;
			cursor: pointer;
		}
		
		.semiboldbutton:active { background-color: blue;}	
		
		.location-name {font-weight:bold;
						cursor: pointer;
		}
		a.eBird-link{	text-decoration: none;
						color: #40718f;}
		a.eBird-link:visited {color: #40718f;}
		
		/* this is for essentially all iPhones */		
		@media screen and (max-width:400px) {
			#homemessage {font-size: 1.2em;}
			.action {font-size: 1.0em;}
			.regselect {font-size:0.9em;}
			.nav{font-size:1.0em;}
			.mapmsg { font-size: 1.0em;}						
		}
		/* iPod Touch */
		@media screen and (max-width:350px){
			#homemessage {	font-size: 1.0em;
							color:green;}
			.regselect {font-size:0.8em;}
			#formarea {	margin-top: 1%;
						margin-bottom: 8%;}
		}