html, body {
  font-family:Verdana, Geneva, sans-serif;
  /*font-family:Arial, Verdana, Helvetica, sans-serif;*/
  margin:0;
  background-color: #FFF;
  font-size:small;
}

img {
border:0;
max-width:100%;
height:auto;
}

#content img, .district-galleries img{
  width:100%;
  height:auto;
}

@media (min-width: 450px){
  #content img, .district-galleries img {
    width:initial;
    height: initial;
  }
}

ul {
list-style-type:none;
}
/* banner style */
#header{
   padding:0.5em;
   background-color: #cccfc0;
}

#header h1, #header h2 {
    font-family: 'Crimson Text', serif;
    text-transform: uppercase;
    font-weight: 300;
    color: #1e1e1e;
    display: inline-block;
    padding-bottom: 0;
    padding-left:15px; 
}
#header h1 {
    font-size: 250%;
}

#header h2 {
    font-size: 140%;
}

@media (min-width: 450px){
  #header{

  }

  #header h1, #header h2 {
    display: inline-block;   
  }
}

#search-bar{
  background-color: #CCCFC0;
  color: #ffffcc;
  border:0;
  height: auto;
  margin:0;
  padding:1em;
  text-align:center;
  font-size:110%;
}
#search-bar a {
  color:#fff;
}
#search-bar a:hover {
  color:#000;
}
/* SITE SEARCH */
div#search-box, div.search-box{
  text-align:right;
  padding:0;
  border:0;
  margin:10px 10px 0 0;
  font-size:80%;
}
/* end of banner style*/


* html div#footer {
float:left;
}
#footer {
padding-top:1em;
}
#footer p{
text-align:center;
font-size:70%;
}
#footer a{
color:#ffffcc;
}
#footer a:hover{
color:#000;
}
#right-footer{
color:#ffffcc;
background-color: #cccfc0;
padding:2px;
font-size:80%;
width : 100%;
text-align: right;
}
#right-footer ul{
list-style-type:none;
margin:0;
padding:5px;
}
#right-footer li{
display:inline;

}

#left-footer{
background-color: #ffffff;
}
#left-footer ul{
list-style-type:none;
margin:0;
padding:0;
}

#left-footer li{
float:left;
margin:0;
padding:1em;
width:100px;
height:75px;
}

#left-footer li img{
width:100%;
}

#wrapper{
width: 1024px;
margin-left:auto;
margin-right:auto;
background-color: #FFF;
}
p{
text-align: justify;
line-height:1.5em;
margin-top:0px;
margin-bottom:8px;
font-family:Verdana, Geneva, sans-serif;
}
a{
color:#369;
text-decoration:none;
}
a:hover{
color:#909;
text-decoration:none;
}
a img{
text-decoration:none;
border:0;
}
a:hover img{
text-decoration:none;
border:0;
}

#breadcrumb{
margin-top:-3px;
padding-left:16px;
padding-top:6px;
padding-bottom:3px;
padding-right: 3px;
}
#breadcrumb a{
font-size:80%;
}
h1, h2, h3, h4, h5, h6{
    font-family:Arial, Verdana, Helvetica, sans-serif;
    margin:0;
    padding-top: 1.0em;
    padding-bottom: 0.2em;
}
#content h1{    /*Used for page name*/
    font-family: 'Crimson Text', serif;
    font-size: 180%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-weight:bold;
}
h2 {  
    font-size: 116%;
}
h3 {
    font-size: 105%;
}
h4{
    font-size: 95%;
}
li{
    margin-bottom: 0.5em;
}
.clr {
clear: both;
}
.clear-right{
clear:right;
}
.clear-left{
clear:left;
}

/*left navigation*/
#left{
width:150px;
float:left;
font-family:Arial, Verdana, Helvetica, sans-serif;
}
#left h2 {
font-size:100%;
color: #666;
}
#left ul{
 list-style-type:none;
 padding:0;
 margin:0 0 0 0.2em;
}
#left ul li {
font-size:90%;
margin-bottom:0.2em;
}
#left ul li a{
display:block;
font-size:90%;
padding:2px;
}
#left ul li a:hover{
color:#000;
background-color:#CCCFC0;
}
ul#sub-nav{
margin:0px;
padding:0px;
}
.menu-bkg{
margin-left:5px;
padding:0px;
}
#content
{
margin-left:160px;
margin-right:0;
padding: 15px;
}

/*Prevent 3px slip of content text after float in IE*/
* html div#content{
    height: 1%;
}

/*
div#content div div div{
width:99%;
float:left;
}
*/

div.left-image, img.left-image{
padding:1em 1em 1em 0;
border:0;
margin:0;
}

div.left-image{
float:left;
font-size:80%;
text-align:left;
width:auto;
}

.left-image p {
clear:left;
}
div.right-image, img.right-image{
padding:1em 0 1em 1em;
width: 100%;
height:auto;
}
div.right-image {
width:100%;
float:right;
}
.right-image p {
  text-align: center;
}
@media (min-width:450px) {
  div.right-image{
    font-size:80%;
    width:120px;
    float:right;
  }
}
.small-image  {
font-size:80%;
padding:1em;
text-align:center;
vertical-align:middle;
margin: 0 auto;
}
form{
padding:0px;
margin:0px;
vertical-align:top;
}
/* style for lists at borough level */ 

.map-nav {
display:none;
}
@media (min-width: 568px){
  .map-nav{
    display:block;
  }
}
@media (min-width: 450px){
  .district-list ul{
    list-style-type:none;
    display:inline;
    padding:0;
    margin:0;
    border:0;
  }

  .district-list ul li{
    text-align:center;
    float:left;
    padding:1em;
    margin:0;
    border:0;
  }
}

@media (min-width: 450px){
  .four-cols li{
    width:48%;
  }
}
@media (min-width: 992px){
  .four-cols li{
    width:24%;
  }
}
.district-list h3{
clear:left;
}

.right-text{
font-weight:bold;
text-align:right;
float:right;
padding:0.3em;
margin:0.3em;
clear:both;
}
.right-text ul{
clear:both;
}
.right-text ul li{
display:block;
}
/* nested content on district pages */ 
.district-galleries {
border-top:1px solid #999;
clear:both;
}
.district-galleries ul {
list-style-type:none;
display:inline;
}
.district-galleries ul li {
width:100%;
}
.district-galleries h3 {
color: #666;
}
.district-articles {
border-top:1px solid #999;
clear:both;
}
.district-articles ul {
list-style-type:none;
font-size: 90%;
display:block;
}
.district-articles ul li {
padding:0.5em;
}
.district-articles h3 {
color: #666;
}
@media (min-width: 450px){
  .district-galleries ul {
    font-size: 80%;
  }
  .district-galleries ul li {
    float:left;
    padding:1em;
    width:180px;
    text-align:center;
  }
}


.contribute-link  {
clear:both;
border-top: 1px solid #999;
padding:1em 0; 
font-weight:bold;
}
.credit {
padding:1em 1em 0.5em 1em;
border:2px dashed #CCCFC0;
font-weight:bold;
margin:0.3em 0;
text-align:center;
}
/* end of nested content on district pages */ 

/* navigation between gallery pages of thumbnails at district level*/
.page-links {
text-align:right;
font-size:80%;
padding-bottom:1em;
}
.next-page-links {
text-align:right;
font-size:80%;
padding:1.5em 0;
clear:both;
}
.right-column {
border:1px solid #999;
padding:0 2px;
font-size:90%;
}
.right-column h3 {
text-align:center;
}
.main-content {
padding-right:0.5em;
}
.edit-format {
font-weight:bold;
font-style:italic;
}

.no-mobile {
 display:none;
}

/***** RESPONSIVE *****/
@media(min-width:1024px)
{
  .main-content {
    width:649px;
    float:left;
  }
  .right-column {
    padding:0 2px;
    float:right;
    width:200px;
  }

}

@media(max-width:1024px)
{
  #wrapper {
    width:100%;
  }
  #content {
    margin-left:0;
  }

}

@media(min-width:568px)
{
  .no-mobile {
   display:initial;
  }
  .mobile-only {
   display:none;
  }
}