/*font-family: 'Great Vibes', cursive;
font-family: 'Arimo', sans-serif;*/
.centerContents{text-align:center}
#nav {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	width:610px;
	height:50px;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 1em;
}
#nav li {
  float:left;
}
#nav a:link, #nav a:visited{
  display:block;
  padding: 0.4em 1em 0.4em 1em; 
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
#nav a:hover {
  color: #FFF;
  background-color: #999965;
}
#nav ul li:hover >ul{
  display:block;
  padding-top:0;
  position:absolute;
}

#nav ul ul li:hover >ul{
  display:block;
  padding-top:0;
  position:absolute;
  top:0px;
  left:100%;
}

#nav ul ul li{
  float:none;
  position:relative;/*gets the next menu to position relative to here.*/
}
#nav ul ul{
  display:none;
  position:absolute;
}
#nav ul ul{
  float:left;
}

#nav ul ul li a:link, #nav ul ul li a:visited{
	background-color: #999965;
  /*background-color:#999;*/
}
#nav ul ul li a:hover{
  /*background-color:#CCC;*/
  background-color:#B9B995;
  color:#000;
}

/*background: #A19CC7;*/

h1,h2,h3,h4,h5,h6{font-family: 'Neuton', serif; margin: 0 0 15px 0;}
h1{font-size: 160%; color: #4B0D0D;}
h2{font-size: 160%; color: #003404;}
h3{font-size: 130%; color: #4B0D0D;}
h4{font-size: 120%; color: #4B0D0D;}
h5{font-size: 110%; color: #4B0D0D;}
h6{font-size: 110%; color: #003404;}
.clearAll{
    clear:both;
    width:100%;
}
p {
    font-family: 'Neuton', serif;
    font-size: 100%;
    line-height: 120%;
    margin: 0 0 10px 0;
    color: #4B0D0D;
}
body{
    font-family: 'Neuton', serif;
    font-size:100%;
    color: #000;
    font-size: 120%;
    margin:0;
    padding:0;
    background-color:#003300;

}
.header{
    width:1040px;
    height:160px;
    margin:0 auto 0 auto;
    background-color: #878853;
    position:relative;
}
.header img{
padding: 0;
margin: 0;
display:block;
}

.navigation{
    height: 45px;
    position: absolute;
    top: 110px;
    left: 0px;
    width: 1040px;
    z-index: 100;
    background-image:url('/images/townofconcordNavBkg.png');
}
.mainWrap{
width:770px;
margin:0 auto;
}
.sidebar{
float:left;
width:122px;
}
img{
    padding:0 10px 10px 10px;
}
.fbHeader{
    position:absolute;
    top:10px;
    right:10px;
}
.align-center{
    text-align: center;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.shadow{
    -webkit-box-shadow: 0px 2px 4px #000000;
    -moz-box-shadow: 0px 2px 4px #000000;
    box-shadow: 0px 70px 46px -31px #999;
    }
ul{padding:10px;margin:20px;list-style:square;}
li{padding:0;margin:0;}

figure.image {
    display: inline-block;
    border: none;
    margin: 0 2px 0 1px;
    background:none;
}
figure.align-left {
    float: left;
}

figure.align-right {
    float: right;
}

figure.image img {
    margin: 8px 2px 0 2px;
}

figure.image figcaption{
    clear:both;
    margin: 6px 1px 6px 1px;
    text-align: center;
}
.content img{
    padding:0 10px 10px 10px;
}
.editorbtn{
    border: solid 1px #333;
    color: #FFF;
    background-color: #006600;
    text-decoration: none;
    font-size: 14px;
    padding: 5px;
    margin: 2px 0 2px 0;
    border-radius: 6px;
    display: inline-block;
    cursor:pointer;
}
.clear{clear:both;}


.fourColumn{
        width:21%;
        border:none;
        float:left;
    }
    
.expander{
    color:#003404;
    font-size:160%;
    text-align: center;
    background-color:#feffcf;
    margin:45px 0 0 0;
    padding:5px 0 10px 0;
    cursor:pointer;
}


.hp_notice{
	width:auto;
	margin:10px auto 0 auto;
	padding:10px 20px 10px 20px;
	border:5px double #000;
	border-radius: 6px;
	text-align:center;
	display: inline-block;
}
.hp_notice p{
	color: #4B0D0D;
}
.hp_notice a{
text-decoration:none;
}
.hp_notice a:hover{
text-decoration:underline;
}
.double_box{
	width:auto;
	margin:10px auto 0 auto;
	padding:10px 20px 10px 20px;
	border:5px double #000;
	border-radius: 6px;
	display: inline-block;	
}



@media screen and (min-width:768px){
    /*desktops*/


.minutesAgenda table{
    width:100%;
    border:1px solid #feffcf;
     border-collapse: collapse;
     color:#4B0D0D;
}

.minutesAgenda td{
    padding:10px 0 10px 50px;
    }
.minutesAgenda td:nth-of-type(1){
	width:300px;
}
.minutesAgenda td:nth-of-type(2){
	width:300px;
}
.minutesAgenda td:nth-of-type(3){
	width:300px;
}
.minutesAgenda tr:hover{
    background-color: rgba(150,150,100,.9);
    }
.minutesAgenda tr:nth-child(odd):hover{
    background-color: rgba(150,150,100,.9);
}
.minutesAgenda tr:nth-child(odd){
    background-color:rgba(150,150,100,.7);
}






.documentWrap h2{
    font-size:140%;
    border-bottom: 1px solid black;
    text-align: center;
}

.documentWrap a:nth-of-type(1){
    display: table-cell;
      height: 100%;
      padding: 10px;
      width: 150px;
      font-size: 80%;
    
}
.documentWrap a:nth-of-type(2){

    display: table-cell;
      height: 100%;
      padding: 10px;
      width: 150px;
font-size: 80%;
    
}
.documentWrap a:nth-of-type(3){
    display: table-cell;
      height: 100%;
      padding: 10px;
      width: 150px;
      font-size: 80%;
  
}
.documentWrap p{
    padding:10px 0 10px 50px;
    }
.documentWrap p:hover{
    background-color: rgba(150,150,100,.9);
    }
.documentWrap p:nth-child(odd):hover{
    background-color: rgba(150,150,100,.9);
}
.documentWrap p:nth-child(odd){
    background-color:rgba(150,150,100,.7);
}







    .concordBuilding{
        position:absolute;
        top:0px;
        left:0px;
    }
    .contentWrap{
		max-width: 1040px;
		width: 100%;
		margin: 0px auto 10px auto;
		position: relative;
		padding:20px 0 20px 0;
        /*background-image: url('/images/townofconcordBkg.png');
		background-repeat:repeat-y;*/
		background-color:#878853;
    }
    .content{
		/* width: 100%; */
		width: 870px;
		overflow: hidden;
		position: relative;
		padding: 10px 25px 10px 25px;
		margin: 0px auto 10px auto;
        background-color: rgba(255, 255, 255, .3);
		/*border-radius: 15px;*/
		
    }
    
    .contentWrapForm{
        width:95%;
        max-width:900px;
        overflow:hidden;
        position:relative;
        padding:20px;
        margin:0px auto 0px auto;
        background-color:rgba(255,255,255,.5);
    }

    .floatRight{
        float:right;
    }
.chartboxLeft,.chartboxMiddle, .chartboxEnd{
    display: inline-block;
    border: 3px solid maroon;
    color:#4B0D0D;
    padding: 3px;
    text-align: center;
    vertical-align: top;
    float:left;
    font-size:80%;
    margin:0 1% 20px 0;
    height:111px;
}
.chartboxLeft{width:15%;clear:both;}
.chartboxMiddle{width:46%;}
.chartboxEnd{margin:0 0 20px 0;padding: 0px;width:285px;height:117px;background-color:#FFF;}
.chartboxEnd img{padding:0;margin:0;}

.slideshow{
    width:1100px;
    margin:0 auto;
}
.slideshow img{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
}

.galleryWrap{
    width:100%;
    
    overflow:hidden;
}
.posterImage{
    width:525px;
    height:490px;
    margin:0 20px 0 0;
    float:left;
}
.posterImage img{
    width:100%;
    height: auto;
}
.galleryThumbnails{
    width:530px;
    float:left;
    height:490px;
    overflow:scroll;
}
.imgBlock{
    width: 170px;
    height:auto;
    margin:0 2px 10px 0;
    float: left;
    /*-moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;*/
    transition: all 0.1s linear;
    border:0px solid black;
    outline: 0px solid #A19CC7;
    outline-offset: 0px;
}

.imgBlock:hover{
    outline: 7px solid #A19CC7;
    outline-offset: -7px;
}

.imgBlock img{
max-width:100%; 
  max-height:100%;
  padding:0;
  margin:0px;
  display:block;
    /*height:100%;*/
    /*object-fit: cover;
    object-position: 50% 50%;*/
}

.galleryHidden{
    display:none;
}

    /* templates USED in tinymce */
    .hideImage{
	width:1px;
	height:1px;
	float:left;
	padding:0;
	margin:0;
	/*position: absolute;*/
	top:0;
	left:0;
    }
    .hideImage:hover{
	display:none;
    }
    .twoColumn{
        width:48%;
        border:none;
        float:left;
    }
    .threeColumn{
        width:29%;
        border:none;
        float:left;
    }
    .threeColumn .hideImage{
    padding:0;
    margin:0;
    }
    .twoColumn .hideImage{
	padding:0;
	margin:0;
    }
    .fullWidth .hideImage{
	padding:0;
	margin:0;
    }
    .rightMargin{
	margin-right:1%;
    }
    .bElement{
	clear:both;
    overflow: hidden;
    }
    .bElement img{
	float:right;
    }
    .cElement{
	clear:both;
    overflow: hidden;
    }
    .cElement img{
	float:left;
    }
    .fullWidth{
	clear:both;
    }
    .fullWidth img{
	float:left;
	width:1px;
	height:1px;
    }
    /* end of tinymce columns */
    
    .logoWrap{
        width: 950px;
        height:184px;
        margin: 10px auto 10px auto;
        position: relative;
    }
    .logoWrap img{
	padding:0;
    }
    
    
    .footerWrap{
        width: 1040px;
        margin:0 auto;
        background-color: #868856;
        position: relative;
	overflow: hidden;
        
    }
    .footer{
        width: 870px;
        overflow: hidden;
        position: relative;
        padding: 10px 25px 10px 25px;
        margin:10px auto 10px auto;
	background-color: rgba(255, 255, 255,.3)
    }
    .footer p{
        color:#4B0D0D;

    }
    .footer a{
        color:#4B0D0D;
        text-decoration: none;
    }
    .footer a:hover{
        color:#fff;
        text-decoration: underline;
    }
}
@media screen and (max-width:768px){
    /* mobile devices*/
    img.concordBuilding{display:none;}

    .header{
        width:100%;
        background-color: #878853;
        height:130px;
        padding:0;
        margin:0;
}
.header img{
        width:80%;
        padding:0;
        margin:0 auto;
}
.header h1{
    font-size:60px;
    color:#fff;
    font-weight: normal;
    font-weight:400;
}


.navigation{
    height: 45px;
    position: absolute;
    top: 130px;
    left: 0px;
    width: 100%;
    z-index: 100;
    background-image:none;
    background-color:#999;
}    
    #menu_wrap{
        width:100%;
    }
     .logoWrap{
        margin: 0 auto;
	width:100%;
        
    }
    .logoWrap img{
	width:100%;
    }
    .chartboxLeft,.chartboxMiddle, .chartboxEnd{
    color:#4B0D0D;
    padding: 3px;
    text-align: center;
    font-size:90%;
    margin:0 0 5px 0;
    width:100%;
}

 .chartboxLeft{
    font-weight: bold;
 }
 .chartboxEnd{
    margin:0 0 35px 0;
    border-bottom:1px solid black;
 }
.chartboxEnd img{
    border:2px solid maroon;
    padding:0;
}

.contentWrap{
    background-color: #878853;
    width:100%;
    margin:50px 0 0 0;
}
.content{
    width:95%;
    overflow:hidden;
    padding:20px 10px 20px 10px;
    position:relative;
    margin: 0px auto 10px auto;
    background-color: rgba(255, 255, 255, .3);
}



.slideshow{
    width:100%;
    margin:0 auto;
}
.slideshow img{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
}

body{background:none;}
.twocolumn{
width:100%;
border:none;
font-family: 'Neuton', serif;
font-size: 100%;
color: #000;
margin: 0;
padding: 0;
background-color: #878853;


    }

    .threecolumn{
        width:100%;
        border:none;
        float:left;
    }
    .leftpad{
        margin-right:0%;
    }


.galleryWrap{
   width: 100%;
    overflow: hidden;
}
.posterImage{
    width: 70%;
    /* height: 490px; */
    margin: 0 13px 0 0;
    float: left;
}
.posterImage img{
    width:100%;
    height: auto;
}
.galleryThumbnails{
    width: 20%;
    float: left;
    height: 300px;
    overflow: scroll;
}
.imgBlock{
    width: 100%;
    height: auto;
    margin: 0 2px 10px 0;
    float: left;
    /*-moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;*/
    transition: all 0.1s linear;
    border: 0px solid black;
    outline: 0px solid #A19CC7;
    outline-offset: 0px;
}

.imgBlock:hover{
    outline: 7px solid #A19CC7;
    outline-offset: -7px;
}

.imgBlock img{
max-width:100%; 
  max-height:100%;
  padding:0;
  margin:0px;
  display:block;
    /*height:100%;*/
    /*object-fit: cover;
    object-position: 50% 50%;*/
}


}
/*end of media 768 max **/


a{
	color:#4B0D0D;
	text-decoration:none;
}
a:hover{	
	text-decoration:underline;
}

#container{	/* the main container div */
	width:890px;
	margin:20px auto;
}

#heading,#footer{	/* the header and the footer share some of their style rules */
	background-color:#2A2A2A;
	border:1px solid #444444;
	height:20px;
	padding:6px 0 25px 15px;
	margin-bottom:30px;
	overflow:hidden;
}

#footer{	/* ..but not all */
	height:10px;
	margin:20px 0 20px 0;
	padding:6px 0 11px 15px;
}

div.nomargin{	/* our special nomargin class */
	/*margin-right:0px;*/
}

.pic{	/* divs that hold all the pictures in the gallery */
	float:left;
	margin:0 10px 10px 0;
	border:5px solid white;
	width:220px;
	height:250px;
}

.pic a{	/* in every .pic container there is a hyperlink exactly the size of the container */
	width:220px;
	height:250px;
	text-indent:-99999px;
	display:block;	/* don't forget that widths and heights of hyperlinks are useless without display:block */
}