body { 
font-size: 100%;	
color: #000000;
background-color: grey;
padding: 0;
margin: 0;
background-image: url("darkgreycanvas80.jpg");
-webkit-text-size-adjust: 100%; }

#main { 
max-width: 880px;
margin-left: auto;
margin-right: auto;
padding: 0;
border: 1px solid #366;
color: #000000;
background-color: #fffffa;
text-align: left; }
 
#banner {
border-bottom: 1px solid #366;
padding-left: 10%;
padding-right: 10%;
padding-top: 0;
padding-bottom: 0;
/*background-color: #e7e1cb; current */
/*background-color: #ececec; original grey*/
background-color: #d5e1e1;
}

#banner img {
border: 0px;
border-collapse: separate;
margin-left:auto;
margin-right:auto;
margin-bottom: 0;
margin-top: 3px;
padding: 0; }

#maininner {
border: 0;
padding-top: 0;
padding-left: 10%;
padding-right: 10%;
/*min-height: 725px; */ }

#footer {
border: 0;
border-top: 1px solid gray;
padding-left: 10%;
padding-right: 10%;
padding-top: 0;
padding-bottom: 0;
background-color: #d5e1e1; }


#footer img {
margin: 3px 0 0 0; }

.navhome {
margin: 0.1em 0 0 0;
border: 0;
padding: 0;
background-color:#2f8181; /*navy #069*/
height: 2.2em;
}

.newnav {
width: 100%;
margin: 0;
}

#rightmain {
float: right;
width: 200px;
border: 1px solid grey;
background-color: #faf9ef;
padding: 0px 6px 3px 6px;
margin: 6px 0px 6px 4px;
border-collapse: separate;
 }

#rightmain p {
margin-top: .2em;
line-height: 1.1;
margin-bottom: .2em;
font-size: 0.85em;
font-family: verdana, sans-serif;
font-weight: normal;
 }
 
h1 {
margin: 0.8em 0em 0.5em 0em;
color: #365d96;
font-family: verdana, sans-serif;
font-size: 18px;
font-weight: normal;
border-bottom: 1px solid #365d96; }

/*h2 { margin-top: .5em;
margin-bottom: .0em;
margin-left: 0;
margin-right: 0;
color: #365d96;
font-family: verdana, sans-serif;
font-size: 1.1em;
font-weight: normal; }*/

h2 { margin-top: .5em;
margin-bottom: .0em;
margin-left: 0;
margin-right: 0;
color: #365d96;
font-family: verdana, sans-serif;
font-size: 15px;
font-weight: bold; }

#rightmain h2 {
font-size: 0.90em;
margin-top: .4em;
margin-bottom: .2em;
font-weight: bold; }


h3 { margin-top: .4em;
margin-bottom: .0em;
color: #365d96;
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 0.8em; }

.pubs {
font-size: 90%; }

.pubs img {
float: right;
margin: 3px 0 5px 5px; }


p {
line-height: 1.40em;
margin-top: .2em;
margin-bottom: .6em;
font-size: 0.95em;
font-family: arvo, georgia, "Times New Roman", Times, serif;
font-weight: normal; }

p.caption {
line-height: 1.2em;
margin-top: .2em;
margin-bottom: .6em;
font-size: 0.85em;
font-family: arvo, georgia, "Times New Roman", Times, serif;
font-weight: normal; }

p.noh1 {margin-top: 1.2em; }

p.monos { 
line-height: 1.0;
margin: 0.3em 0em 0.1em 0em;
font-size: 0.9em;
font-family: verdana, sans-serif;
font-weight: normal; }

ul, ol { 
font-family: verdana, sans-serif;
font-weight: normal;
margin: 0.4em 0em 0.6em 0em;
padding: 0px 0px 0px 1.0em;
vertical-align: top; } 


li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0.4em 0px;
font-size: 0.85em;
line-height: 1.2; }

ul ul {
margin: 2px 0px 0px 5px; }
	
	
li li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0.2em 0px;
font-size: 1.0em;
line-height: 1.2; }

em {
/*background-color: #c3ee85;*/
background-color: yellow;
color: black;
font-style: normal;
font-weight: normal; }

img {
max-width: 100%; }

.fotocapcombo {
float: right;
width: 65%;
max-width: 370px;
border: 0;
background-color: #f1f1f1;
padding: 0;
margin: 6px 0px 6px 4px;
text-align: center; }

.fotocapcombo img {
border: 0px;
margin: 0px 0px 0px 0px;
border-collapse: separate;
-moz-box-shadow: 2px 2px 4px hsla(0,0%,0%,.6);
-webkit-box-shadow: 2px 2px 4px hsla(0,0%,0%,.6);
box-shadow: 2px 2px 4px hsla(0,0%,0%,.6); } 

.fotocapcombo p {
border: 0;
margin: 0 0 0.2em 0;
padding: 0.2em;
line-height: 1.0;
text-align: justify;
font-size: 0.75em;
font-family: verdana, sans-serif;
font-weight: normal; }

.fotocapcombowide {
width: 100%;
border: 0px solid silver;
padding: 0px 0px 0px 0px;
color: #000000;
background-color: #fffffa;
margin-left: auto ;
margin-right: auto ;
margin-top: 10px;
margin-bottom: 6px;
text-align: center;  }

.fotocapcombowide img {
border: 0px;
margin-top: 3px;
margin-bottom: 1px;
border-collapse: separate;
-moz-box-shadow: 2px 2px 4px hsla(0,0%,0%,.6);
-webkit-box-shadow: 2px 2px 4px hsla(0,0%,0%,.6);
box-shadow: 2px 2px 4px hsla(0,0%,0%,.6); } 

.fotocapcombowide p {
margin: 0.1em 0.6em 0.4em 0.6em;
line-height: 1.0;
text-align: center;
font-size: 0.75em;
font-family: verdana, sans-serif;
font-weight: normal; }

a[title^='opens']:after {
   font-family: FontAwesome;
   content: "\f08e"; 
   display: inline-block;
   padding-left: 4px;}

a[href$='.pdf']:after {
   font-family: FontAwesome;
   color: crimson;
   content: "\f1c1"; 
   display: inline-block;
   padding-left: 4px;}

a[href$='.kmz'] {
background-image: url("gearthicon.png");
background-repeat: no-repeat;
background-position: center right;
padding-right: 20px; }

A:link, A:visited { 
text-decoration: none;
color: blue;
font-weight: normal; }

A:hover { 
color: white;
background-color: #87a7ba;
font-weight: normal;
text-decoration: none; } 

/* ------------------ start responsive columns-----------------*/

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0% 0 0% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
	border-bottom: 1px solid grey;
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 { width: 100%; }
.span_1_of_2 { width: 49.2%; }

/*  GRID OF THREE  */
.span_3_of_3 { 	width: 100%; }
.span_2_of_3 { 	width: 66.1%; }
.span_1_of_3 { 	width: 32.2%; }

/* ------------------ end responsive columns-----------------*/
 
/* ----------drop down menus--------------*/

li.selflink {
color: white;
font-weight: bold; }

/* ----------start new navigation--------------*/

/*Strip the ul of padding and list styling*/
.newnav ul {
	list-style-type:none;
	margin: 2px 0 0 0;
	padding:0;
	position: absolute;
}

.newnav ul > :first-child{
	min-width: 40px; }

.newnav ul > :nth-child(2){
	min-width: 90px; }
	
.newnav ul > :nth-child(3){
	min-width: 68px; }
	
.newnav ul > :nth-child(4){
	min-width: 90px; }

.newnav ul > :nth-child(5){
	min-width: 68px; }
	
.newnav ul > :last-child{
	min-width: 40px; }

/*Create a horizontal list with spacing*/
.newnav li {
	display:inline-block;
	float: left;
	margin-right: 0px;
	background-color:#2f8181; /*teal */
	/*background-color:#069;  /*navy */
	font-size: 1.0em; 
	font-family: verdana, sans-serif;
	padding: 0;
}

/*Style for menu links*/
.newnav li a {
	display:block;
	width: 100%;
	height: 32px;
	text-align: center;
	line-height: 30px;
	font-family: verdana, sans-serif;
	color: #fff;
	/*background: #2f3036;*/
	text-decoration: none; }
	
/*Hover state for top level links*/
.newnav li:hover a {
	background-color:#1f9b9b; /*goes with teale*/
	/*background-color:#0d88c6; goes with navy */
	border: 0px;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
		background:#2f8181;
	text-align: center;
	padding: 10px 0 10px 10px;
	display: none;
	background-image: url("mobimenu.png");
	background-repeat: no-repeat;
	background-position: 10%;
	margin: 2px 0 0 0;
	border: 1px solid grey;
	border-collapse: separate;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/


@media screen and (max-width: 510px){
	/*Make dropdown links appear inline*/
	.newnav ul {
		position: static;
		display: none;
		}
	/*Create vertical spacing*/
	li {
		margin-top: 0px;
		margin-bottom: 0px;
		border-bottom: 1px solid #ccc;
		}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
		}
	/*Display 'show menu' link*/
	.show-menu {
		display:block; }
		
	/*Hover state for top level links*/
	.newnav li:hover a {
	border-radius: 0; }
	
	.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
	-webkit-animation-iteration-count: 0;
  	animation-iteration-count: 0;
}	
	
	h1 { margin-top: 0.8em; }
	
	#rightmain, .fotocapcombo {
		float: none;
		margin-left: auto;
		margin-right: auto;}
	
#banner, #maininner, #footer {
padding-left: 4%;
padding-right: 4%; }
	
}

@media only screen and (max-width: 550px) {
	.col { margin: 0% 0 0% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.span_2_of_2, .span_1_of_2  { width: 100%; }
	.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4  { width: 100%; }
}