/*
COLORS!

dark green - original release: 
D A E 7 D B
tested but not used: 
8 5 A 1 4 C
9 4 A B 7 B
C 0 D 5 A 8
A 2 C B B 4
C B E 0 B 2
A 2 C B B 4
7 D A F 7 D
8 F D A 8 F
A 6 B 7 8 3
7 4 A 3 A 3  blue
8 9 C 4 C 4  blue 
9 7 D B D B     blue
D F F 9 A C
9 D B 6 6 A     green
4 F 8 9 8 9           blue
current test:
96C4C4           blue



dark brown + owl color - original 
#773939;

On 8/7/2014 I took a pic of the banner and developed it. The color is close to:
	#80B3C4
So I am doing a global change from 
    96C4C4
to
	80B3C4

*/


body { 
  	font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
			/* #F2F2F2 is a light grey almost white */
  	color: black;
}

h3 {
  font-weight: 100;
  line-height: none !important;
  margin-bottom: none !important;
  text-align:center;
  font-weight:bold;
}
.green-box { border: 1px solid green; border-radius: 5px; padding: 5px; }
.grey-box { font-size: inherit; border: 1px solid #80B3C4; border-radius: 5px; padding: 10px; background-color: #inherit;}
ul { margin-left: 2em; }
.small-grey-box { text-align: center; border: 2px solid grey; border-radius: 5px; padding: 5px; margin: 0 1em;}
.boardmember-name { display: block; }
.boardmember-position { display: block; }
.boardmember-position {
	font-size: small; 
	font-weight: bold; 
	color: #660000;  
}

fieldset.fieldset-container { border: 1px solid #96C4C4; 
                             padding: 10px; 
							 border-radius: 5px; }

legend.fieldset-legend { padding: 0 5px 0 5px; 
                    font-size: larger; 
					font-weight: bold; }

.small-image img { width: 100%; }
@media all and (min-width: 999px) {
	.small-image img { width: 300px; }
}
.small-image { width: 50%; }

hr {border: 1px solid #80B3C4;}


.section-heading {
	border: 1px solid lightgrey; 
	border-radius: 5px; 
	margin: 0 0 5px 0; 
	color: white;  
	font-size: inherit; 
	text-align: center; 
	background-color: #80B3C4;
}

.news-box {
	float: none; 
	width: 100%;
	margin: 10px 10px 0 0px;
}

div.inthenews-header {
	text-align: center; 
	font-weight: bold; 
	font-size: larger; 
	padding: 5px 0 10px 0; 
}

.one-image-in-set {
	 display: none; 
}
.one-image-in-set img {
	
	max-width: 100%;
	width: auto; 
	max-height: 350px;
	
}

.one-image-in-set:first-of-type {
	display: inline;
}

.one-caption-in-set { width: 100%; }

.prev-image-in-set { float: left; }
.prev-image-in-set { margin-left: 0em; }

.fullscreen-image-in-set,
.next-image-in-set { float:right; }

.fullscreen-image-in-set,
.next-image-in-set { top: 0; }
.fullscreen-image-in-set,
.next-image-in-set { right: 0; }

.caption-image-in-set {  float: left; }
.caption-image-in-set {  width: auto; }	
.caption-image-in-set {  max-width: 24em; }
.caption-image-in-set {	color: grey;  }
.caption-image-in-set { font-size:smaller; }
.caption-image-in-set { margin-left: 5px; }
.imageBoxSmall {
	float: right; 
	width: 55%; 
	padding: 5px 0 5px 5px;
	text-align: center;
}
@media all and (max-width: 501px) {
}
.image-manual-cycle {
	border: 1px solid #80B3C4; 
	border-radius: 5px;
	padding: 5px 10px 10px 10px;
}

.image-manual-cycle img {
	border-radius: 5px;
}

/********************/
/* A LINKS  */
/********************/
a { font-weight: normal;}
a, a[href^=tel] { color:#F60;} 
/* a, a[href^=tel] { 	color: #660000; } */
a, a[href^=tel] { 	text-decoration: none; }
a, a[href^=tel] { 	border-bottom: none; }
a:hover, a:hover[href^=tel] { color: black; }


a.external {
	display:inline-block;
	line-height:18px;  /* check your icon height */
	background:url(png/external_link.png)  center right no-repeat;   /* directory is below css */
	padding-right: 15px;
	color: #F60;
} 



p.hanging{
    padding-left: 2em; 
} 

p.hanging:first-letter {
     margin-left: -2em;
}




.sitelogo-wrapper .logo-image-right {
	display: none;
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 501px) {
}


/********************/
/* BACKGROUND COLORS */
/********************/
.footer-container {background-color: inherit;}
.content-container { background-color: none; }
.content-container, .content-wrapper { background-color: white ; }
.section-nav { 	background-color: inherit;}
.section-one, .section-two {	background-color: inherit;}
.left-nav-bar { background-color: #80B3C4; }
.section-nav a:hover, .header-wrapper a:hover, .footer-wrapper a:hover { 
	background-color: #773939; }


.menu {background-color: #F3F8F4; }
.menuCurrent {background-color: #773939; color: white; /* white; */ }



/* PC: header-container is background color, hidden */
.header-container { background-color: inherit; }
/* Tablet and mobil: header is darker, same color as nav bar */ 
@media all and (min-width: 501px) and (max-width: 768px) {
}
/* PC + Tablet */
/* body { background-color: # E9F1EA; the original light green } */
body { background-color: #80B3C4; }
.content-container { background-color:#80B3C4; }
.content-wrapper { background-color: white; }
/* Mobil */
@media all and (max-width: 768px) {
}
/* MENU TEXT CONTAINER DIV */
/* PC : hover flips background of DIV */
.menu:hover { background-color: #773939; }
.menuCurrent:hover { background-color: #773939; }
/* Tablet + Mobil : do not flip color of div, the text is what flips */
@media all and (max-width: 768px) {
}

.green-background { background-color: #80B3C4; } 

.debugbox { background-color: yellow; }


/********************/
/* COLORS for TEXT  */
/********************/
.header-container, .footer-container {	color:black;}
.footer-title { color: black; }
.header-menu-icon, .footer-menu-icon,
.section-nav a, 
.header-wrapper a, 
.footer-wrapper a { color:#F60; /* #993300; */}
.section-nav a:hover, 
.header-wrapper a:hover, 
.footer-wrapper a:hover { 
	color: white; }
.goal-stats,
p.date { color:darkgrey;}
.header-page { color: black; }
.image-cycle-caption  { color:darkgrey;}




/********************/
/* BORDERS */
/********************/
.section-nav { border: none; }
.left-nav-bar { border: 1px solid lightgrey; }
div#image-cycle img { border: 1px solid black; }

.header-container { border: none; }
@media all and (max-width: 768px) and (min-width: 501px){
}
@media all and (max-width: 501px) {
}

.footer-container { border-top: none; }
@media all and (max-width: 768px) {
}
.content-wrapper { border: 1px solid white; }
@media all and (max-width: 768px) {
}
.very-small-image img,
.small-image img { border: 1px solid grey; }


.section-one {	border: none; }
.section-two {	border: none; }
.section-three { border: none; }
.grey-border { border: 1px solid lightgrey; } 
.green-border { border: 2px solid #80B3C4; } 

.debugbox { border: 1px solid grey; }



/********************/
/* BORDER RADIUS */
/********************/
.green-border,
.grey-border,
.very-small-image img,
.small-image img,
.left-nav-bar, 
.content-wrapper, 
div#image-cycle img { border-radius: 5px; }

@media all and (max-width: 768px) and (min-width: 501px){
}


/********************/
/* CLEARS */
/********************/


.boardmember-wrapper { clear: both; }



/********************/
/* DISPLAY */
/********************/

.debugbox { display: none; }
.section-two .islandmap { display: none; }
.section-one .sitelogo { display: none; }
@media all and (max-width: 768px) {
}

.pc-only { display: block; }
@media all and (max-width: 768px) {
}

.no-mobil { display: block; }
@media all and (max-width: 501px) {
}

/********************/
/* FLOATS */
/********************/
.very-small-image,
.small-image { float: right; }


/********************/
/* FONT  FAMILY */
/********************/
/* font-family: 'Oleo Script Swash Caps', cursive;
   font-family: 'IM Fell Great Primer', serif;
   font-family: 'Faster One', cursive;
   font-family: 'Clicker Script', cursive;
   font-family: 'Sue Ellen Francisco', cursive;
*/
.page-title-fancy { font-family:  'Clicker Script', cursive; }

/********************/
/* FONT SIZE */
/********************/
.page-title-small, 
.page-title-fancy { font-size: 18px;}
.header-wrapper { 	font-size: smaller; }
.header-nav { 	font-size: normal; }
.footer-wrapper { font-size: smaller;}
.boardmember-name { font-size: 22px; }
.boardmember-position { font-size: smaller;}

.page-title { font-size: 28px; }
.image-cycle-caption  { font-size: smaller;}
.readMore{ 	font-size: normal; }

@media all and (max-width: 600px) and (min-width: 501px){
	.menu { font-size: smaller; }
}
.bold-text { 	font-size: larger; }
.subtitle{ 	font-size: large; }
.emphasis { font-size: larger; }

/********************/
/* FONT STYLE */
/********************/

.italic { font-style: italic; }

/********************/
/* FONT WEIGHT */
/********************/

.subtitle,
.bold-text,
.boardmember-name,
.page-title,
.header-title,
.footer-title, 
.header-page { font-weight: bold; }

.emphasis { font-weight: bold; }
.emphasis { font-style: italic; }


/********************/
/* MARGINS */
/********************/
.footer-wrapper { 	margin: 0 0 10px 0;}
.section-nav { 	margin: 0px; }
.page-title { margin-bottom: 10px; }
.goal-stats { margin-bottom: 10px; }
p.date { margin-top: -15px; }
.page-title-small { margin-top: 0px; }
.left-nav-bar{ 	margin: 0 0 0 10px;} 

.content-wrapper { margin: 0 10px 0 10px; }
@media all and (max-width: 768px) {
}

@media all and (max-width: 768px) and (min-width: 501px){
}
.very-small-image,
.small-image { margin: 0 0 0 2em;}

.boardmember-wrapper { margin-bottom: 2em; }
.boardmember-position { margin-bottom: 10px; }

p.subtitle { margin: 5px 0 5px 0; }

/********************/
/* OVERFLOW - the collapsing div problem */
/********************/
.header-container { overflow: hidden; }
.content-wrapper { overflow: hidden; }

/********************/
/* PADDING */
/********************/
.header-container { padding: 10px 0 10px 10px; }
.footer-container { padding: 0px 20px 0px 10px;}
.orderedlist { padding-left: 2em; }
.footer-wrapper { padding: 5px 20px 10px 10px; }
.section-nav {	padding: 30px 0 0 0px; }
.header-menu-icon, .footer-menu-icon { padding: 0 1em 0 0; }
p.date { padding-left: 0px; }
.left-nav-bar { padding: 10px 10px 10px 10px;}

.content-wrapper { padding: 0px 0px 10px 0px; }
@media all and (max-width: 768px) {
}

.section-one { padding: 2em 0px 10px 20px; }
.section-two {	padding: 2em 20px 10px 0px; }
.section-three { padding: 2em 20px 10px 20px; }

@media all and (max-width: 768px) {
}
.small-padding { padding: 10px 10px; }
p.indent { padding: 0 0 0 2em; }
p.subtitle { padding: 0; }

/********************/
/* TEXT DECORATION */
/********************/
.section-nav a, .header-wrapper a, .footer-wrapper a { 
text-decoration: none; }
.header-menu-icon, .footer-menu-icon { text-decoration: none; }

span.emphasize { font-weight: bold; text-decoration: underline;}

/********************/
/* TEXT ALIGN */
/********************/
.page-title { text-align: center; }
.goal-stats  { text-align: center; }
.image-cycle-caption  { text-align: center; }
@media all and (max-width: 768px) and (min-width: 501px){
}
.very-small-image,
.small-image {text-align: right; }
.section-two-img { 	text-align: right;}
@media all and (max-width: 501px) {
}

.center-text { text-align: center; }

.subtitle { text-align: center; }

/********************/
/* VERTICAL ALIGN */
/********************/
span.superscript {vertical-align:top;} 

/********************/
/* WIDTH */
/********************/
.very-small-image { width: 25%; }
.small-image { width: 40%; }

/********************/
/* Clean up needed */
/********************/

/* pc:  */
.menu, .menuCurrent {
	text-align: center; 
	margin: 10px 0;
	padding: 20px;
	border: 1px solid lightgrey;
	border-radius: 3px;
}

	/* tablet:   */
@media all and (max-width: 768px) {
}
@media all and (max-width: 501px) {
	  /* mobil:  */
}


/********************/
/* Clean up needed */
/********************/

/********************/
/* Clean up needed */
/********************/
.section-two img {	width: 100%;}
.section-two img { border-radius: 5px; }
.section-two img { border: 1px solid black; }

/* SECTIONS: add bottom padding to trigger scroll bar on tablet and PC views  */
/* mobil:  */
/* tablet:   */
.section-one, .section-two { padding-bottom: 2em;}
.section-one, .section-two { margin-bottom: 0;}
/* pc:  */
@media all and (max-width: 501px) {
}


/********************/
/* Modernizr Boxshadow */
/********************/
@media all and (min-width: 768px){
}
@media all and (max-width: 768px) and (min-width: 501px){
}

div .content-container, div .content-wrapper { border:none;}