/*
 * CSS for Overlay (popup)
 * includes "update" content, "newsletter" content, help docs, etc.
 */
 #countyResponse-electedOfficialsOuter .table-condensed{
   width: 420px;
 }
 #overlayButtons{
   width: 100%;
   float: right;
   margin: 0;
 }
 #overlayBackToMap {
   display: none;
 }
 #overlayButtons button{
   display: inline-block;
   background-color: rgb(0,173,220);
   padding: 5px 0;
   border: none;
   border-bottom: 10px solid white;
   width: 50%;
   height: 55px;
   font-size: 20px;
   font-weight: 400;
   color: white;
   text-align: center;
   transition: all 0.5s;
 }
 #overlayButtons button:focus{
   outline: none;
 }
 #overlayButtons button span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.5s;
 }

 #overlayButtons button span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 }

 #overlayButtons button:hover span {
   padding-right: 25px;
 }

 #overlayButtons button:hover span:after {
   opacity: 1;
   right: 0;
 }

#watermark {
  color: #d0d0d0;
  font-size: 4.5em;
  text-indent:-1em;
  padding-left:1em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  margin: 0;
  z-index: -1;
  left:10%;
  top:20%;
}
#instructions {
	position: absolute;
	text-align: left;
	width: 90%;
	max-width: 960px;
	top: 3%;
	z-index: 100;
	box-shadow: 0 0 .938em rgba(0, 0, 0, 0.5);
	moz-box-shadow: 0 0 .938em rgba(0, 0, 0, 0.5);
	webkit-box-shadow: 0 0 .938em rgba(0, 0, 0, 0.5);
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgba(255, 255, 255, .95);
	background-image: none;
	background-size: auto auto;
	padding: 1% 0% 2% 0%;
	overflow: auto;
}
#instruction-content {
	display: inline-block;
	position: absolute;
	top: 50px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: auto;
	padding-bottom: 20px;
	text-align: left;
	font-size: 1em;
	z-index: 4;
}

.panel-title h1{
	padding: 10px 0px 0px 35px;
	background-color: rgb(0,153,204);
	color: #fff;
	text-transform: uppercase;
	font-family: 'alternate-gothic-no-3-d', serif;
	font-weight: 700;
	font-size: 2.5em;
	margin-top: 0px;
}
.panel-headline h2 {
	text-transform: uppercase;
	margin:0 0 .3em 0;
}
.panel-content {
	padding: 5px 0px 0px 35px;
	max-width: 800px;
}


/* Update Content */
.update-column {
	padding: 0px;
}
.update-tile{
	background-color: rgb(0,153,204);
	color: #fff;
	height: 110px;
	width: 100%;
	margin-bottom: 10px;
	transition: 0.5s;
	cursor: pointer;
	display: table;
	font-family: 'alternate-gothic-no-3-d', serif;
}
.update-tile:hover {
	background: rgb(255,153,51);
	transition: 0.5;
}
.sub-tile{
    display: table-cell;
    width:100%;
    vertical-align: middle;
}
.sub-tile .h2{margin: 0;}
.sub-tile .h4{margin-bottom: 0;}

.update_tile_container {
    position: relative;
    width: 100%;
    background-color: black;
    height: 110px;
    max-height: 110px;
    overflow-y: hidden;
}

.update_tile_menu {
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.update_tile_back{
    font-weight: 500 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    background-color: rgba(0,0,0,0.5);
}

.update_tile_middle {
  color: #ffffff;
  font-weight: 400 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-size: 20px;
  font-family: 'museo-sans-condensed', sans-serif;
}

.update_tile_container:hover .update_tile_back {
  background-color: rgba(0,0,0,0.7);
}

#overlay-mail-icon {
	margin: 0;
}

/* for conference */
#hosuing-forum{display:block; width:100%}
#affordableHousingTile{
    background-color:#fae164;
    color:#000000;
}
#affordableHousingTile:hover{
    background-color:#ffc846;
}
#housingHeader{
    height:175px;
    background-image: url('/img/annual/cover.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
#housingFooter{
    height:250px;
    margin-top: 20px;
    background-image: url('/img/annual/footer.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
#housingHeader img{
    height: 130px;
    margin: 1px 0 0 10px;
}
#housingAd .h1{
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
}
#housingAd .lead{
    font-size: 22px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}
#adFooter{
    background-color: rgb(122,122,122);
}
#adFooter .lead{
    margin: 20px 0 20px 0;
    color: #ffffff
}
#adFooter a{
    color: #ffffff;
    font-weight: 300;
}
#adFooter a:hover{
    font-weight: 600;
    text-decoration: none;
}
/**********/



#start-benchmark-container h2 {margin-bottom: 10px;}
#update-help-button-container {
	color: rgb(0,153,204);
}
.update-help-button {
	background-color: rgb(0,153,204);
	border: none;
}
.updated-help-button:hover {
	background-color: rgb(255,153,51);
}


/* Content for Extraction Tool (Access More Data) */
.extraction-tool-header a {
	font-family: 'Merriweather', serif;
	color: rgb(255,153,51);
}
.extraction-tool-header a:hover {
	color: rgb(230,128,26);
}
.extraction-tool-content {
	text-align: left;
	display: inline-block;
	max-width: 600px;
	margin-top: 15px;
}
.extraction-tool-img {
	border: 1px solid #CCC;
	margin-top: 15px;
}


/* Help Content */
.help-link-container { padding-bottom: 5px; }
.help-link {
	cursor: pointer;
	text-decoration: underline;
}
.help-link:hover { color: #2a6496; }
.panel-bullet { margin-left: 20px; }
.panel-bullt li { color:tgb(255,153,51); }


/* Google Form */
mailing-form form { margin-top: 35px; }
mailing-form .email-input { width: 220px; }
mailing-form .ss-item { margin-top: 20px; }


/* County Facts */
#results-container { margin-top: 20px; }

/* More Info */
#more-info-container { padding:2em; }
#more-info-header {
	font-weight:bold;
	font-size:1.5em;
}

/* Overlay Components */
#close {
	position: relative;
	color: rgb(0, 64, 112);
	font-size: 1em;
	float: right;
	cursor: pointer;
	text-align: right;
	clear: right;
	margin: 0.5em 1em 0px 0.5px;
	z-index: 5;
}

#showOnMap, #print, #stateSearchToggle{
	position: relative;
	color: rgb(0, 64, 112);
	font-size: .9em;
	cursor: pointer;
	padding-left: 1em;
	display: inline-block;
}
#print { margin-left: 10px; }


/* Pagination */
.pagination-container {
	text-align: right;
	position: absolute;
	bottom: 0px;
	right: 20px;
}
.pagination a:hover { text-decoration: none; }
.pagination .active { color: white; }