/********** Themes Buttonified ****************/

.theme-buttons {
   padding-top: 5px;
}


#.theme-buttons .WaterandSanitation {
#  background-color: #A3D6D7;
#}

#.theme-buttons .GlobalHealth {
#  background-color: #B46012;
#}

#.theme-buttons .Energy {
#  background-color: #FFD100;
#}

#.theme-buttons .Education {
#  background-color: #29A592;
#}

#.theme-buttons .FoodSecurity {
#  background-color: #849E2A;
#}

#.theme-buttons .HumanitarianResponse {
#  background-color: #BAA892;
#}

#.theme-buttons .LaborSavingInnovations {
#  background-color: #5B6870;
#}

#.theme-buttons .Awards {
#  background-color: #C28E0E;
#}

/****************** FILTERS ******************/

#canopy {
  background      : rgba(255, 255, 255, 0.01);
  display         : none;
  height          : 100%;
  left            : 0;
  position        : absolute;
  top             : 0;
  width           : 100%;
  z-index         : 10000;
}
.dropdown-button-XTRA {
  background      : #EEE;
  border-radius   : 3px;
  border          : 1px solid #EEE;
  box-shadow      : inset 0 -5px 0 0 rgba(0, 0, 0, 0.15);
  color           : #000;
  cursor          : pointer;
  font-weight     : bold;
  font-size       : 16px;
  line-height     : 20px;
  margin          : 3px;
  margin-top      : 12px;
  max-width       : 210px;
  padding         : 5px 15px;
  text-align      : center;
  width           : 210px;
}
.dropdown-button-XTRA:hover, .dropdown-button-XTRA:focus {
  background      : #FFF;
}

#search-A {
  background      : #FFF;
  border-radius   : 3px;
  border          : 1px solid #EEE;
  font-weight     : bold;
  font-size       : 16px;
  line-height     : 20px;
  margin          : 3px;
  margin-top      : 12px;
  max-width       : 210px;
  padding         : 5px 15px;
  text-align      : left;
  width           : 210px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-A-content,
.dropdown-B-content,
.dropdown-C-content {
  box-shadow      : 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-top      : 3px solid #EEE;
  display         : none;
  background      : #FFF;
  font-size       : 14px;
  min-width       : 215px;
  position        : absolute;
  z-index         : 10001;
}

/* Links inside the dropdown */
.dropdown-A-content a,
.dropdown-B-content a,
.dropdown-C-content a {
  color           : #000;
  display         : block;
  padding         : 12px 16px;
  text-decoration : none;
}

/* Change color of dropdown links on hover */
.dropdown-A-content a:hover,
.dropdown-B-content a:hover,
.dropdown-C-content a:hover { background-color: #ddd; }


.filter-tag.tagD {
  float: none;
}

.filter-tag.tagA::before,
.filter-tag.tagB::before,
.filter-tag.tagC::before,
.dropdown-button-XTRA.dropA::before,
.dropdown-button-XTRA.dropB::before,
.dropdown-button-XTRA.dropC::before {
  color           : #555;
  display         : block;
  font-size       : 12px;
  font-weight     : bold;
  left            : 2px;
  top             : 2px;
}
.dropdown-button-XTRA.dropA::before {
  content         : 'Filter by Theme';
}
.dropdown-button-XTRA.dropB::before {
  content         : 'Filter by Region';
}
.dropdown-button-XTRA.dropC::before {
  content         : 'Sort Deadline';
}
.filter-tag.tagA::before { 
  content         : 'Citizenship';
}
.filter-tag.tagB::before { 
  content         : 'Deadline';
}
.filter-tag.tagC::before { 
  content         : 'Award';
}
.filter-tag {
  border-radius   : 3px;
  border          : 1px solid #EEE;
  float           : right;
  font-weight     : bold;
  font-size       : 16px;
  line-height     : 20px;
  padding         : 5px 15px;
  text-align      : center;
  width           : 210px;
  max-width       : 210px;
  margin          : 3px;
  z-index         : 10001;
}

.filter-container {
  border          : 1px solid #EEE;
  border-left     : 9px solid #EEE;
  margin-bottom   : 15px;
  margin-top      : 15px;
  padding         : 0;
  z-index         : 10000;
}
.filter-info {
  padding:        5px;
  padding-top:    0;
}
.filter-info p {
  font-size:      16px;
}
.filter-title {
  font-size:      20px;
  margin:         0;
  padding:        5px;
  padding-bottom: 0;
}
.filter-intro ul li {
  font-size:      16px;
  margin-top:     10px;
}
.filter-arrow {
  width:          0;
  height:         0;
  border-top:     10px solid transparent;
  border-bottom:  10px solid transparent;
  border-left:    10px solid #EEE;
  left:           0;
  position:       absolute;
  top:            8px;
}