/*
Complimentary colors
base medium brown: #81530d	header bg, text 
dark blue: #001D34    menu bg? 
medium blue: #0D4E81  links?
golden orange: #CD8C29	borders?
dark brown: #342103		text?

Font families: 
header: 
body: helvetica, arial, sans-serif; 

*/

@font-face {
    font-family: 'CallunaRegular';
    src: url('fonts/Calluna-Regular-webfont.eot');
    src: url('fonts/Calluna-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Calluna-Regular-webfont.woff') format('woff'),
         url('fonts/Calluna-Regular-webfont.ttf') format('truetype'),
         url('fonts/Calluna-Regular-webfont.svg#CallunaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cardoregular';
    src: url('fonts/cardo104s-webfont.eot');
    src: url('fonts/cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cardo104s-webfont.woff') format('woff'),
         url('fonts/cardo104s-webfont.ttf') format('truetype'),
         url('fonts/cardo104s-webfont.svg#cardoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'cardobold';
    src: url('fonts/Cardo-Bold.ttf'); 
    font-weight: bold;
    font-style: bold;
}


body { margin:0; background: #999; /*font-size: 62.5%;*/ font-family: arial, helvetica, sans-serif; }

hr { background: #CCC; border: none; height: 1px; margin: 20px 0 0 0; }

#container { width: 100%; max-width: 960px; margin: 20px auto; padding: 0; box-shadow: 0 0 11px #666; border-radius: 5px; overflow: hidden; }

#headercontainer { width: 100%; background: #176AAB; margin: 0; padding: 0; }

#header { 
	width: 100%; 
	margin: 0 auto; 
	padding: 0; 
	color: #FFF; 
	background: #2884cc; /* Old browsers */
	background: -moz-linear-gradient(top,  #2884cc 0%, #004881 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #2884cc 0%,#004881 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #2884cc 0%,#004881 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2884cc', endColorstr='#004881',GradientType=0 ); /* IE6-9 */
	}

#header h1 { float: left; margin: 0; padding: 0; font-weight: normal; font-size: 220%; line-height: 100%; font-family: 'CallunaRegular'; letter-spacing: 1px; width: 80%; }
#header h1 a { margin: 0; padding: 20px 20px 18px 25px; color: #FFF; text-decoration: none; display: block; /*background: #CCC;*/ }
/*#header h1 a:hover { background: #034C85; /*text-decoration: underline; }*/

#donate { float: right; padding: 25px 15px 20px 0px; /*background: #CCC;*/ }

#header #logo { position: absolute; left: 0; top: 0; margin: 0; padding: 10px 12px; /*background: #999;*/ }

#header #subtitle { position: absolute; bottom: 10px; left: 0; color: #FFF; font-weight: normal; margin: 0; padding: 0px 20px 15px 30px; font-size: 30%; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 3px;  }
#header #subtitle a { color: #FFF; text-decoration: none; }
#header #subtitle a:hover { text-decoration: underline; }

/*#headerimagecontainer { width: 100%; background: #001D34; }*/

#headerimage { width: 100%; /*height: 260px;*/ padding-bottom: 27.083333333333%; margin: 0 auto; background: #666 url(images/headers/rotate.php) center center; }

/* RESPONSIVE HEADER IMAGES */

#headerimageNEW { width: 100%; padding: 0; margin: 0; background: #999; }
#headerimageNEW img { width: 100%; }
	
#headerimageNEW2 { width: 100%; padding: 0; margin: 0 auto; background: #999; visibility: hidden; height: 0; }
#headerimageNEW2 img { width: 100%; }


#nav { width: 100%; background: #999; margin: 0; padding: 0; }

#mainbodycontainer { width: 100%; margin: 0 auto; padding: 0; background: #DDD; font-family: 'cardoregular'; /*font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;*/ }

#mainbodycontainer strong { font-family: 'cardobold'; }
#mainbodycontainer b { font-family: 'cardobold'; }

#rightcolumn { float: right; width: 200px; padding: 5px 15px 15px 15px; color: #333; font-size: 90%; /*background: #222;*/ }
#rightcolumn hr { margin: 0 -15px 0 -15px; height: 2px; background: #FFF; border: none; }
#rightcolumn h3 { font-weight: normal; margin-top: 0; color: #333; padding: 15px 0 0 0; line-height: 130%; } 
#rightcolumn h3 a { color: #333; text-decoration: none; border-bottom: 1px dotted #333; } 
#rightcolumn h3 a:hover { border-bottom: 1px solid #333; } 
#rightcolumn p a { color: #333; text-decoration: none; border-bottom: 1px dotted #333;} 
#rightcolumn p a:hover { border-bottom: 1px solid #333;} 
#rightcolumn p a.button { color: #EEE; padding: 5px 11px 5px 11px; border-radius: 30px; margin: 12px 0 0 12px; background: #999; text-decoration: none; float: right; font-family:Arial, Helvetica, sans-serif;  }
#rightcolumn p a:hover.button { background: #777; color: #EEE; }
#rightcolumn img { margin: 0 0 15px 0; }
#rightcolumn .noborder { border: none; padding: 0; }

#rightcolumn p.right { text-align: right; }
#rightcolumn p a.morelink { font-size: 100%; text-decoration: none; border: none; }
#rightcolumn p a.morelink:after { content: ' \00BB'; } 
#rightcolumn p a.morelink:hover { border-bottom: 1px solid #333; }

#mainbody { float: left; width: calc(100% - 270px); background: #FFF; margin: 0 auto; padding: 20px 20px 20px 20px; min-height: 1300px; }
#mainbody img { box-shadow: 0px 0px 6px #CCC; border-radius: 3px; max-width: 100%; }
#mainbody h2 { font-weight: normal; color: #1669A9; margin-top: 0; line-height: 100%; font-size: 170%; }
#mainbody h3 { font-weight: normal; color: #1669A9; border-top: 1px solid #CCC; padding: 15px 0 0 0; font-size: 135%; }
#mainbody h3 a { color: #1669A9; border-bottom: 1px dotted #1669A9; text-decoration: none; }
#mainbody h3 a:hover { color: #1669A9; border-bottom: 1px solid #1669A9; }
#mainbody h3 a.button { color: #333; background: #EEE; font-family: Arial, Helvetica, sans-serif; padding: 10px 15px; text-decoration: none; border-radius: 30px; }
#mainbody h4 { font-weight: normal; color: #1669A9; padding: 0; margin: 0; font-size: 115%; margin-top: 0; }
#mainbody p { line-height: 150%; color: #444; }
#mainbody p.arrow { padding-left: 18px; background: url(images/arrow-right.png) 1px 7px no-repeat; }
#mainbody p.notes { font-size: 90%; }
#mainbody p a { color: #1669A9; text-decoration: none; border-bottom: 1px dotted #1669A9; text-decoration: none; }
#mainbody p a:hover { border-bottom: 1px solid #1669A9; }
#mainbody p a.morelink { font-size: 90%; text-decoration: none; border: none; }
#mainbody p a.morelink:after { content: ' \00BB'; } /* &#187 OR 00BB ?? */
#mainbody p a.morelink:hover { border-bottom: 1px solid #1669A9; }

#mainbody p.fieldtrip { background: #E9E9E9; padding: 12px 15px 15px 15px; margin: 0 0 20px 0; border-radius: 4px; }
#mainbody p.fieldtrip .title { color: #1669A9; font-size: 120%; line-height: 150%; }
#mainbody p.fieldtrip img { float: right; margin: 5px 0 10px 15px; border: none; border-radius: 4px; box-shadow: none; width: 50%; }

#mainbody ul li { line-height: 150%; }
#mainbody .noborder { border: none; padding: 0; }
#mainbody .nounderline { text-decoration: none;  }
#mainbody #homepageimg { float: right; margin: -40px 0 10px 20px; padding: 0; border: 0px solid #999; border-radius: 5px; box-shadow: 0 0 7px #999; }

#mainbody #bluearrow ul { list-style: none; background: #efefef; padding: 15px 15px 12px 17px; margin: 0; border-radius: 4px; color: #555; }

#mainbody #bluearrow ul li { 
	background-image: url('images/arrow-right.png');
	background-repeat: no-repeat;
	background-position: 0px 8px;
	padding-left: 15px; 
	line-height: 170%; 
	}

/*
#mainbody #bluearrow ul li { list-style-image: url('sqpurple.gif'); }
*/

#mainbody #homepagesections p { line-height: 170%; }


#mainbodywide { float: left; width: calc(100% - 40px); background: #FFF; margin: 0 auto; padding: 20px 20px 20px 20px; }
#mainbodywide img { box-shadow: 0px 0px 6px #CCC; border-radius: 3px; }
#mainbodywide h2 { font-weight: normal; color: #1669A9; margin-top: 0; line-height: 100%; }
#mainbodywide h3 { font-weight: normal; color: #1669A9; border-top: 2px solid #EEE; padding: 20px 0 0 0; }
#mainbodywide h3 a { color: #1669A9; border-bottom: 1px dotted #1669A9; text-decoration: none; }
#mainbodywide h3 a:hover { color: #1669A9; border-bottom: 1px solid #1669A9; }
#mainbodywide h3 a.button { color: #333; background: #EEE; font-family: Arial, Helvetica, sans-serif; padding: 10px 15px; text-decoration: none; border-radius: 30px; }
#mainbodywide p { line-height: 150%; color: #444; }
#mainbodywide p a { color: #1669A9; text-decoration: none; border-bottom: 1px dotted #1669A9; text-decoration: none; }
#mainbodywide p a:hover { border-bottom: 1px solid #1669A9; }
#mainbodywide p a.morelink { font-size: 90%; text-decoration: none; border: none; }
#mainbodywide p a.morelink:after { content: ' \00BB'; } /* &#187 OR 00BB ?? */
#mainbodywide p a.morelink:hover { border-bottom: 1px solid #1669A9; }
#mainbodywide ul li { line-height: 150%; }
#mainbodywide .noborder { border: none; padding: 0; }
#mainbodywide .nounderline { text-decoration: none;  }
#mainbodywide #homepageimg { float: right; margin: 20px 0 0 0; padding: 0; border: 0px solid #999; border-radius: 5px; box-shadow: 0 0 7px #999; }


/* IMAGE STYLES */
#mainbody img.noshadow { box-shadow: none; }

#rightcolumn a img { border: none; }

#mainbodywideimg { position: relative; float: right; margin: 0 2px 22px 18px; padding: 0px; }
#mainbodywideimg img { box-shadow: 0px 0px 10px #666; border-radius: 9px; }
#mainbodywide a img { border: none; }

#mainbodywide #imageright { float: right; padding: 0; margin: 0 0 10px 20px; }

#mainbodyimgcaption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0px; background: url(images/bg-60.png); color: #FFF; font-size: 90%; border-bottom-right-radius: 9px; border-bottom-left-radius: 9px; }

#mainbodywide #imagecaption p { margin: 0; padding: 6px 9px; }

#mainbodyimg { position: relative; float: right; margin: 0 2px 22px 18px; padding: 0px; }
#mainbodyimg img { box-shadow: 0px 0px 10px #666; border-radius: 9px; }
#mainbody a img { border: none; }

#mainbody #imagecaption p { margin: 0; padding: 6px 9px; }



#mainbody #imageright { float: right; margin: 5px 0 10px 20px; position: relative; }

/* DOES NOT WORK THE WAY I'D LIKE IT TO */
/*#mainbody #imageright:after { content: "<br clear=\"all\">"; }*/

#mainbody #imageright #caption { padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; }

#mainbody #imageright #caption p { padding: 5px 9px 5px 8px; margin: 0; background: url(images/bg-60.png); color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 90%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0px 0px 6px #666; }

#mainbody #imageright #caption p a { color: #FFF; }

#mainbody #imageright #captionsmall { padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; }

#mainbody #imageright #captionsmall p { padding: 2px 2px 2px 4px; margin: 0; background: url(images/bg-60.png); color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 60%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0px 0px 6px #666; }



#mainbody #imagerightcaptioned { float: right; padding: 0; margin: 0 0 10px 20px; position: relative; }
#mainbody #imagerightcaptioned img { border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; box-shadow: 0px 0px 6px #666; }
#mainbody #imagerightcaptioned p.caption { padding: 5px 0px 5px 0px; margin: 0; background: url(images/bg-60.png); color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 90%; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: 0px 0px 6px #666; position: absolute; bottom: 0; left: 0; width: 100%; }

/* psuedo classes work to put space in front of text but only for the first line of text */
/*
#mainbody #imagerightcaptioned p.caption:before { content: url(images/spacer-10.gif); }
#mainbody #imagerightcaptioned p.caption:after { content: url(images/spacer-10.gif); }
*/

#mainbody #imagecenter { padding: 0; margin: 0 auto 20px auto; position: relative; max-width: 100%; }

#mainbody #imagecenterfull { padding: 0; margin: 20px auto 20px auto; position: relative; width: 100%; }
#mainbody #imagecenterfull img { width: 100%; }
#mainbody #imagecenterfull #imagecaption { padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; }
#mainbody #imagecenterfull #imagecaption p { padding: 5px 8px 4px 9px; margin: 0; background: url(images/bg-60.png); color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 90%; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
#mainbody #imagecenterfull #imagecaption p a { color: #CCC; border-bottom: 1px dotted #CCC; }
#mainbody #imagecenterfull #imagecaption p a:hover { border-bottom: 1px solid #CCC; }



#mainbody #documenttable { border-radius: 5px; border: 0px solid #F11; width: auto; overflow: hidden; font-size: 80%; float: left; }
#mainbody #documenttable table tr.tableheader td { color: #FFF; background: #666; text-align: center; }
#mainbody #documenttable table td { background: #EEE; padding: 9px; margin: 0 1px 1px 0; }

#mainbody #carvedbirdpins { text-align: center; }
#mainbody #carvedbirdpins img { padding: 5px; margin: 10px; background: #FFF; box-shadow: 0 5px 9px #999; }

#mainbodywide #carvedbirdpins { text-align: center; }
#mainbodywide #carvedbirdpins img { padding: 5px; margin: 10px; background: #FFF; box-shadow: 0 5px 9px #999; }

#top { text-align: right; float: right; margin: 0 -20px -10px 0; padding: 10px; font-size: 80%; clear: both; }
#top a { color: #005b2d; text-decoration: none; padding: 10px; border-radius: 20px; }
#top a:hover { /*background: #EFEFEF;*/ text-decoration: underline; }

#clearboth { clear: both; height: 0; }


/* FOOTER */
#footer { 
font-family: 'CallunaRegular'; 
width: calc(100% - 40px); 
margin:0 auto; 
padding: 20px; 
color: #FFF; 
background: #2884cc; /* Old browsers */
background: -moz-linear-gradient(top,  #2884cc 0%, #004881 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #2884cc 0%,#004881 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #2884cc 0%,#004881 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2884cc', endColorstr='#004881',GradientType=0 ); /* IE6-9 */
}
			
#footer p { font-size: 100%; }
#footer p.footertitles { font-size: 140%; line-height: 100%; margin-top: 0; letter-spacing: 1px; }
#footer p.footertitles a { text-decoration: none; }
#footer p.footertitles a:hover { border-bottom: 1px solid #FFF; }
#footer p.footernav { margin: 0 0 0 -5px; font-family: Arial, Helvetica, sans-serif; font-size: 95%; line-height: 1.4; margin-top: 0; }
#footer p.footernav a { text-decoration: none; margin: 0 4px; padding: 0 1px; }
#footer p.footernav a:hover { border-bottom: 1px solid #FFF; }

#footer a { color: #FFF; }
#footerlinks { font-size: 90%; }

#copyright { margin: 25px 0 -10px 0; }
#copyright p { font-size: 75%; color: #EEE; font-family: Arial, Helvetica, sans-serif; }

#thumbs { text-align: center; }
#thumbs img { border-radius: 5px; margin: 10px; box-shadow: 0 0 7px #999; }

.small { font-size: 80%; }

#twocolumns { 
	-moz-column-count: 2; /* Firefox */
	-webkit-column-count: 2; /* Safari and Chrome */
	column-count: 2; 
	column-width: 350px;
	-moz-column-width: 340px; /* Firefox */
	-webkit-column-width: 340px; /* Safari and Chrome */
	-moz-column-gap: 10px; /* Firefox */
	-webkit-column-gap: 10px; /* Safari and Chrome */
	column-gap: 10px; 
	}

#fourcolumns { 
	background: #EEE; 
	-moz-column-count: 4; /* Firefox */
	-webkit-column-count: 4; /* Safari and Chrome */
	column-count: 4; 
	column-width: 170px;
	-moz-column-width: 170px; /* Firefox */
	-webkit-column-width: 170px; /* Safari and Chrome */
	-moz-column-gap: 10px; /* Firefox */
	-webkit-column-gap: 10px; /* Safari and Chrome */
	column-gap: 10px; 
	}

#errorblock { background: #EEE; padding: 10px 10px 5px 10px; margin: 0 0 10px 0; border-radius: 7px; border: 1px solid #CCC; }

img.noshadow { box-shadow: none; }


/* MAGNIFIC RESPONSIVE LIGHTBOX THUMBNAIL DISPLAY */

#gallery .popup-gallery { text-align: center; }

#gallery .popup-gallery #thumbnail { display: inline-block; margin: 0 10px 20px 10px; float: left; /*border: 1px solid #333;*/ /*height: 180px; width: 180px;*/ }

/*#gallery .popup-gallery #thumbnail img { padding: 2px; border: 1px solid #CCC; vertical-align: center; margin: 0 10px 20px 10px; }*/




/* RESPONSIVE BREAKPOINTS */

@media screen and (max-width: 960px) {
	
	#container { margin: 0 auto; box-shadow: none; border-radius: 0; }

}


@media screen and (max-width: 768px) {
	
	#mainbody { float: none; width: calc(100% - 40px); }
	
	#rightcolumn { float: none; width: calc(100% - 30px); }
	
	hr.disappearing { visibility: hidden; height: 0; }

}


@media screen and (max-width: 600px) {

	/* RESPONSIVE HEADER IMAGES */
	#headerimageNEW { visibility: hidden; height: 0; }
	#headerimageNEW2 { visibility: visible; height: auto; }
	
	#header h1 { float: none; font-size: 180%; width: 100%; }
	#header h1 a { margin: 0; padding: 20px 20px 10px 15px; color: #FFF; text-decoration: none; display: block; /*background: #CCC;*/ }
	#donate { float: none; padding: 5px 15px 15px 15px; width: calc(100% - 30px); /*background: #CCC;*/ text-align: right; }
	
	#mainbody #imageright { float: none; margin: 5px 0 10px 0; width: 100%; }
	#mainbody #imageright img { width: 100%; }

}

@media screen and (max-width: 400px) {
	
	#mainbody p.fieldtrip img { margin: 5px 0 10px 0; width: 100%; }

}