/*Begin Styles Needed for Full Google Map Setup*/

html, #main_content, #map-canvas {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font: 400 1em 'Kameron', Georgia, serif;
	background: #ffffff;
	color: #000;
}
	  
#map-canvas {
	width: 100%;
	height: 100%;
	min-height: 700px;
}

a.toggle-footer-btn {
    bottom: -5px;
    position: relative;
}

.ctrBtn { text-align: center; }

/*Side Nav Styling and toggle buttons*/

.navAccTitle {
	background-color: #31b0d5;
    border-color: #269abc;
	border-radius: 4px;
	color: #fff;
	margin-top: 10px;
	padding: 0px 5px;
}

#Directions ul li {
		line-height: 1.4em;
}

#AddInfo, #LiveTraffic, #StreetView {
		line-height: 1.4em;
}

#traffic-btn {font-size: 1.2em;}

#StreetView-btn {font-size: 1.2em;}

button {
  cursor: pointer;
}

/*Top Container for Animate Buttons and Checkboxes*/
/*Begin Map Legend Box Styling*/

#AnimateWB-btn { background: #ff0000; color: #ffffff; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 1.2em; padding: 2px 0px;}
#AnimateEB-btn { background: #0000ff; color: #ffffff; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 1.2em; padding: 2px 0px;}
#AnimateNB-btn { background: #0000ff; color: #ffffff; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 1.2em; padding: 2px 0px;}
#AnimateSB-btn { background: #ff0000; color: #ffffff; width: 100%; border: 1px solid #ccc; border-radius: 5px; font-size: 1.2em; padding: 2px 0px;}

#MapLegendContainer {
margin-bottom: 2px !important;	
}

button:active {
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
   outline: none;
}

.mapcheckbox {
width: 20px; height: 20px;
}

.WA, .EB, .WB, .NB, .SB {
	font-size: 1.3em;
	margin-bottom: 5px;
}