#middle {width:100%; height:80%;}
#left {width:0; display: none;}
#main {width:100%; margin-bottom:0; height:100%;}
#content{height:100%;}

#map_canvas {
	width:100%;
	height:100%;
	min-height:655px;
}
@media (max-width: 769px) {  #map_canvas {min-height:506px;}  }


#map_container { position:relative; height:100%; text-align: left; margin: 0;}

#map_index, #MapFilter {
	display:inline-block;
	position:absolute;
	background:white;
	font-size:11pt;
}

#map_index {
	width:220px;
	left:15px;
	top:15px;
	border-radius:4px;
	padding:0;
	border: 2px solid #777;
}

#map_index h3 {
	padding:10px;
}

#MapFilter {
	width:150px;
	right:15px;
	top:15px;
	border: 1px solid #777;	
	text-align: left;
}

#map-legend {
	position: absolute;
	background-image: url(/img_new/googleMapMarkers/legend_new_.png?v=1);
	width: 192px;height: 105px;
	right: 53px;
	bottom: 23px;
	text-align: left;
}

ul#MapProjectList {
	margin:0;
	padding:0;
	list-style: none;
}

#MapProjectList li {
	margin:0;
	padding:5px 15px;
	cursor: pointer;
}

#MapProjectList li.Selected {
	background-color: #e3e3e3;
}

#MapProjectList li:hover {
	background-color: #f1f1f1;
}

#MapProjectList img,
#MapProjectList span  {
	vertical-align: top;
}
#MapProjectList span { 
	margin-left: 5px;
	display: inline-block;
	width: 130px;	
}

#ProjInfoT {
	background-color: #FFFFFF;
}

.MapProjInfo { //max-width: 100%; }
.SubmissionInfo { //max-width:100%;}

.ProjInfo h3 { margin:5px; font-size:1.3em; }

.SubmissionInfo h3 { margin:5px 0; font-size:1.2em; }

.ProjType {
	font-size: 1.2em;
	margin: 4px;
	font-weight: bold;
}
.ProjName {
	font-size: 1.2em;
	margin: 4px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

.ProjStat {
	display:inline-block;
	width:51%;
	text-align:left;	
	margin:4px;
}

.ProjAward {
	display:inline-block;
	float:right;
	font-size:15pt;
	text-align: right;
	color: #7cb33b;
}

.SubAward {
	font-weight: bold;
	font-size:1.1em;
	color: #7cb33b;
}

#map_canvas .TopImgDiv img {
	//max-width:100%;
	//max-height:100px;
}

.TopImgDiv {
	width:100%;
	height: 170px;
}


.TopImg {
	border: 1px solid #777;
	padding: 1px;
}

.AwardedUsers {
	display:inline-block;
	//max-width:65%;
	font-size:9pt;
	margin-left:7px;
	vertical-align: middle;
}

.DesDetails {
	display:inline-block;
	//width:100%;
	margin-left:7px;
	vertical-align: middle;
	white-space: nowrap;
}

.AwardedUsers p {
	margin: 4px 0;
}

/*#map_container a:link,
#map_container a:visited,
#map_container a:hover {
	color: #e455a5;
}*/


.ProjLink {
	width: 100%;
	margin-top:10px;
	padding:4px;
	//background-color:#45c2e2;
	text-align: center;
}

#map_container .ProjLink a:link,
#map_container .ProjLink a:visited,
#map_container .ProjLink a:hover,
#map_container .ProjLink a:active {
	color: white;
	font-weight: bold;
	text-decoration: underline;
}


#ProjectPages {
	margin: 12px 0;
	text-align: center;
	position:relative;
}

.ActivePage, 
.PageButton {
	display:inline-block;
	margin: 0 3px;
	font-size:11pt;
}

.PageButton {
	cursor:pointer;
	color:#e455a5;
	text-decoration: underline;	
}

.PageButton.pushed {
	color: #333;
	text-decoration: none;
}

.ListAwardImg {
	width:50px;
	height:36px;
}

.BusySpin {
	display:inline-block;
	width:16px;
	height: 16px;
	background-image: url(/img/busy.gif);
	position:absolute;
	left:15px;
	top:0;
}

#MapFilter .FilterHeader {
	text-align: center;
	padding:4px 0;
	width:100%;
	margin:0;
	font-size:1.1em;
	background-color: #f1f1f1;
	cursor:pointer;
}

.CollapseIndic {
	float:right;
	margin-right:7px;
	font-size:.8em;
	color:#555;
}

.FilterOptions {
	margin-top:4px;
}

.ToggledBox {
	border: 1px solid #777;
	border-radius: 0px;
	display:inline-block;
	width:16px;
	height:16px;
	text-align:center;
	font-size: 12px;
	margin: 0 5px;	 
	vertical-align: middle;
}

.all .ToggledBox { background-color: white; }
.remodel .ToggledBox { background-color: #fdaa34; }
.landscape .ToggledBox { background-color: #7eb32f; }
.interior .ToggledBox { background-color: #e455a5; }
.newres .ToggledBox { background-color: #45c2e2; }
.nonres .ToggledBox { background-color: #f61111; }
.pub .ToggledBox { background-color: #424242; }
.active .ToggledBox { background-color: white; }

.FilterOption {
	cursor:pointer;
}

.FilterOption {
	width:100%;
	padding:4px 0;
	margin: 2px 0;
	background-color: #f1f1f1;
}

.Collapsed .FilterOptions {
	display: none;
}

.FilterOption:last-child { margin-bottom:0; } 

.CheckMark {
	visibility: hidden;
}
.On .CheckMark {
	visibility: visible;
	color:#fff;
}

.FilterOption:hover .CheckMark {
	visibility: visible;
	color: #f5f5f5;
}

.all .CheckMark, .active .CheckMark { color: #000; }
.all:hover .CheckMark, .active:hover .CheckMark { color:#222; }


#MapBusy {
	position:absolute;
	top:42%;
	width:100%;
	text-align: center;
}

#circleG{
width:149.33333333333334px;
display: inline-block;
}

.circleG{
background-color:rgba(0,0,0,0);
float:left;
height:32px;
margin-left:17px;
width:32px;
-moz-animation-name:bounce_circleG;
-moz-animation-duration:1.9500000000000002s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-border-radius:21px;
-webkit-animation-name:bounce_circleG;
-webkit-animation-duration:1.9500000000000002s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-border-radius:21px;
-ms-animation-name:bounce_circleG;
-ms-animation-duration:1.9500000000000002s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-border-radius:21px;
-o-animation-name:bounce_circleG;
-o-animation-duration:1.9500000000000002s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-border-radius:21px;
animation-name:bounce_circleG;
animation-duration:1.9500000000000002s;
animation-iteration-count:infinite;
animation-direction:linear;
border-radius:21px;
}

#circleG_1{
-moz-animation-delay:0.39s;
-webkit-animation-delay:0.39s;
-ms-animation-delay:0.39s;
-o-animation-delay:0.39s;
animation-delay:0.39s;
}

#circleG_2{
-moz-animation-delay:0.9099999999999999s;
-webkit-animation-delay:0.9099999999999999s;
-ms-animation-delay:0.9099999999999999s;
-o-animation-delay:0.9099999999999999s;
animation-delay:0.9099999999999999s;
}

#circleG_3{
-moz-animation-delay:1.1700000000000002s;
-webkit-animation-delay:1.1700000000000002s;
-ms-animation-delay:1.1700000000000002s;
-o-animation-delay:1.1700000000000002s;
animation-delay:1.1700000000000002s;
}

@-moz-keyframes bounce_circleG{
0% { }
50% { background-color:rgba(0,0,0,1) }
100% { }
}

@-webkit-keyframes bounce_circleG{
0% { }
50% {background-color:rgba(0,0,0,1)}
100% { }
}

@-ms-keyframes bounce_circleG{
0% {}

50% { background-color:rgba(0,0,0,1)}
100% {}
}

@-o-keyframes bounce_circleG{
0%{}
50%{background-color:rgba(0,0,0,1)}
100%{}
}

@keyframes bounce_circleG{
0%{}
50%{background-color:rgba(0,0,0,1)}
100%{}
}