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

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

body { margin: 0; padding: 0; background: #EEE url(images/body-bg.png) center center repeat-y; font-family: 'optimaregular', sans-serif; color: #333; }
a { color: #5F78C3; }

strong { font-family: 'optimabold'; font-weight: normal; }

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

#wrapper { width: 924px; margin: 0px auto; padding: 0 20px 10px 20px; background: #FFF; }

#header { width: 100%; margin: 0px; padding: 0; background: #FFF; position: relative; }
#header h1 { margin: 0; padding: 0px; font-size: 300%; font-weight: normal; }
#header h1 a { text-decoration: none; color: #5F7893; margin: 0; padding: 20px 0 24px 0; display: block; background: #FFF; }

/*#header h1 a { text-decoration: none; color: #999; margin: 0; padding: 20px 0px 33px 20px; display: block; background: url(images/your-wetlands.jpg) 0px 0px no-repeat; text-indent: -9999px; }*/

#projectsfbjv { position: absolute; top: 66px; left: 8px; font-size: 90%; color: #444; padding: 2px 10px 2px 2px; z-index: 10; }
#projectsfbjv a { text-decoration: none; color: #5F7893; }
#projectsfbjv a:hover { border-bottom: 1px solid #7F98B3; }

#yourwetlandslogo { position: absolute; top: 20px; left: 318px; width: 62px; height: 62px; background: url(images/your-wetlands-logo-62.gif) center center no-repeat; }

#mission { position: absolute; top: 19px; right: 3px; font-style: italic; text-align: right; width: 420px; }
#mission p { font-style: italic; color: #555; font-size: 90%; line-height: 130%; text-align: right; width: 420px; }

#topmenu { width: 100%; margin: 0 0 2px 0; padding: 0; background: #5F7893 url(images/topmenu-bg.jpg) center center no-repeat; border-top-right-radius: 4px; border-top-left-radius: 4px; /*font-size: 90%; font-family: arial, sans-serif;*/ }

/* menu styles now contained in ddlevelsmenu */
/*#topmenu a { text-decoration: none; color: #FFF; padding: 11px 17px; margin: 0; border-right: 1px solid #7F98B3; }
#topmenu a:hover { background: #7F98B3; }
#topmenu a.home:hover { background: #7F98B3; border-top-left-radius: 4px; }*/

/*#topimagebar { border-bottom: 0px solid #5F7893; width: 924px; height: 150px; padding: 0; margin: 0 0 20px 0; background: #CCC url(images/topimagebar/rotate.php) center center no-repeat; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }*/

#topimage { position: relative; width: 924px; height: 280px; padding: 0; margin: 0 0 6px 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
#topimagecaption { position: absolute; bottom: 0; right: 0; margin:0; padding: 7px 10px 5px 10px; background: url(images/bg-44.png); font-size: 85%; color: #FFF; border-bottom-right-radius: 4px; border-top-left-radius: 4px; text-shadow: 1px 1px 2px #000; } 

#content { color: #333; padding: 0px 0px 10px 0px; }
#content a { color: #4F6883; }
#content h2 { color: #5F7893; font-weight: normal; padding: 0; margin-top: 30px; font-size: 180%; }
#content h3 { color: #5F7893; font-weight: normal; padding: 20px 0 0 0; margin-top: 20px; border-top: 1px solid #DDD; font-size: 140%; }
#content h3.notopborder { color: #5F7893; font-weight: normal; padding: 0px 0 0 0; margin-top: 0px; border-top: none; font-size: 140%; }
#content h4 { color: #4F6883; font-weight: normal; padding: 0px 0 0 0; margin-top: 20px; font-size: 110%; line-height: 140%; }
#content p { font-size: 95%; line-height: 140%; }
#content ul { font-size: 95%; line-height: 140%; margin: 0 0 20px 20px; padding: 0 0 0 0; }
#content ul li { margin: 0 0 5px 0; padding: 0 0 0 0; }
#content ol { font-size: 95%; line-height: 140%; margin: 0 0 20px 20px; padding: 0 0 0 0; }
#content ol li { margin: 0 0 5px 20px; padding: 0 0 0 0; }


#content p strong { font-family: 'optimabold'; font-size: 95%; line-height: 140%; color: #666; }
#content strong { font-family: 'optimabold'; color: #666; }
#content strong a { font-family: 'optimabold'; color: #4F6883; }
#content a strong { font-family: 'optimabold'; color: #4F6883; }

#content p strong { font-family: 'optimabold'; }


#content #width452 { float: left; width: 452px; /*background: #EFEFEF;*/ }

#twocolumns {
/*background: #EEE;*/
margin: 0 0 10px 0;
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:50px; /* Firefox */
-webkit-column-gap:50px; /* Safari and Chrome */
column-gap:50px;
/*-moz-column-rule:3px outset #ff00ff; /* Firefox */
/*-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
/*column-rule:3px outset #ff00ff;*/
} 

#twocolumns p { width: 350px; }

#fullwidthphoto { position: relative; margin: 20px 0; border-radius: 4px; background-color: #EEE; }
/*#fullwidthphotocaption { position: absolute; bottom: 13px; right: 15px; color: #EEE; font-size: 90%; }*/
#fullwidthphotocaption { display: block; width: 100%; position: absolute; bottom: 0px; right: 0px; margin: 0; padding: 7px 0px 5px 0; color: #EEE; font-size: 90%; background: url(images/bg-60.png); border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; text-align: left; }
#fullwidthphotocaption p { margin: 0; padding: 0 10px; font-size: 90%; }

#imageleft { float: left; padding: 7px; margin: 0 15px 10px 0; border: 1px solid #DDD; }
#imageright { float: right; padding: 7px; margin: 0 0px 10px 15px; border: 1px solid #DDD; }

#imagerightrounded { position: relative; float: right; margin: 0px 0px 10px 18px; }
#imagerightrounded img { border-radius: 4px; }
/*#imagerightrounded:after { content: ; } /* clear all */
#imagerightroundedphotocaption { display: block; width: 100%; position: absolute; bottom: 0px; right: 0px; margin: 0; padding: 8px 0px 6px 0; color: #EEE; font-size: 90%; background: url(images/bg-60.png); border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; text-align: left; }

#imagerightroundedphotocaption p { margin: 0; padding: 0 10px; font-size: 90%; }
#imagerightroundedphotocaption p a { color: #FFF; }



/* Audio feature element for Podcasts page */
#audiofeature { background: #EEE; padding: 15px 15px 10px 15px; margin: 0 0 20px 0; border-radius: 4px; width: auto; }
#audiofeature p { margin: 0 0 10px 0; }
#audiofeature p.title { font-size: 110%; color: #5F7893; font-family: 'optimabold', sans-serif; }
#audiofeature p strong { color: #5F7893; font-size: 100%; font-family: 'optimabold', sans-serif; }
#audiofeature img { float: right; margin: 0 0px 5px 20px; border-radius: 4px; /*box-shadow: 0px 1px 7px 1px #666;*/ } /* box-shadow: h-shadow v-shadow blur spread color inset; */



/* Audio feature element for Home page */
#audiofeaturehomepage { background: #EEE; padding: 15px 15px 0px 15px; margin: 0 0 10px 20px; border-radius: 4px; width: auto; width: 400px; float: right; }
#audiofeaturehomepage audio { width: 400px; }
#audiofeaturehomepage p { margin: 0 0 10px 0; line-height: 140%; }
#audiofeaturehomepage p.title { font-size: 105%; font-family: 'optimabold', sans-serif; }
#audiofeaturehomepage h3 { border: none; color: #3F5873; font-size: 145%; margin: 0 0 5px 0; padding: 0; }
#audiofeaturehomepage h3 a { text-decoration: none; }
#audiofeaturehomepage h3 a:hover { text-decoration: underline; }
#audiofeaturehomepage p strong { color: #5F7893; font-size: 100%; }
#audiofeaturehomepage p strong a { text-decoration: none; border-bottom: 1px dotted #4F6883; }
#audiofeaturehomepage p strong a:hover { text-decoration: none; border-bottom: 1px solid #4F6883; }
#audiofeaturehomepage img { margin: 5px 0px 5px 0px; border-radius: 4px; /*box-shadow: 0px 1px 7px 1px #666;*/ } /* box-shadow: h-shadow v-shadow blur spread color inset; */


#listenlearnleft { float: left; width: 423px; background: #efefef; padding: 15px; margin: 0 0 8px 0; border-radius: 4px; }
#listenlearnleft:hover { background: #e9e9e9;}
#listenlearnleft h3 { border: none; margin: 0 0 10px 0; padding: 0; }
#listenlearnleft h3 a { text-decoration: none; }
#listenlearnleft h3 a:hover { text-decoration: underline; }
#listenlearnleft #featuredimage { position: relative; }
#listenlearnleft #featuredimage img { border-radius: 4px; }
#listenlearnleft #featuredimage p.caption { position: absolute; bottom: 0; left: 0; color: #FFF; font-size: 90%; padding: 6px 10px 5px 10px; margin: 0; background: url(images/bg-44.png); border-bottom-left-radius: 4px; border-top-right-radius: 4px; }



#listenlearnright { float: right; width: 423px; background: #efefef; padding: 15px; margin: 0 0 8px 0; border-radius: 4px; }
#listenlearnright:hover { background: #e9e9e9;}
#listenlearnright h3 { border: none; margin: 0 0 10px 0; padding: 0; }
#listenlearnright h3 a { text-decoration: none; }
#listenlearnright h3 a:hover { text-decoration: underline; }
#listenlearnright #featuredimage { position: relative; }
#listenlearnright #featuredimage img { border-radius: 4px; }
#listenlearnright #featuredimage p.caption { position: absolute; bottom: 0; left: 0; color: #FFF; font-size: 90%; padding: 6px 10px 5px 10px; margin: 0; background: url(images/bg-44.png); border-bottom-left-radius: 4px; border-top-right-radius: 4px; }



#partnerlogo { float: left; padding: 5px; margin: 0 10px 20px 0; border: 1px solid #DDD; }
#partnerlogo:hover { border: 1px solid #AAA; }

#homebox { float: left; width: 278px; background: #FFF; padding: 0px; margin: 10px 55px 20px 0; height: 340px; }
#homebox.last { margin: 0; } 
#homebox img { width: 260px; height: 190px; padding: 5px; margin: 0 0 20px 0; border: 1px solid #CCC; background: #FFF; }
#homebox a { color: #333; }
#homebox h3 a { color: #333; text-decoration: none; border-bottom: 1px dotted #999; }
#homebox h3 a:hover { color: #333; border-bottom: 1px solid #666; }
#homebox p a { color: #333; text-decoration: none; border-bottom: 1px dotted #999; }
#homebox p a:hover { color: #333; text-decoration: none; border-bottom: 1px dotted #999; }

#footer { position: relative; width: 894px; height: 180px; padding: 15px 15px 40px 15px; background: #FFF url(images/footer-bg-shorebirds-desat3.jpg) center 0px no-repeat; color: #333; border-radius: 4px; }
#footer a { color: #333; }
#footer p { margin: 0; font-size: 90%; line-height: 150%; }
#footer #footerfb { position: absolute; top: 10px; right: 10px; }
#footer #contactinfo { position: absolute; top: 50px; left: 20px; text-align: right; font-size: 100%; color: #333; padding: 0px; z-index: 10; }
#footer #photocredit { position: absolute; left: 15px; bottom: 12px; font-size: 75%; color: #444; }

#footer2 { position: relative; width: 894px; /*height: 130px;*/ padding: 15px 15px 35px 15px; background: #FFF url(images/footer-bg-shorebirds-desat5.jpg) center -80px no-repeat; color: #333; border-radius: 4px; }
#footer2 h4 { margin: 0 0 10px 0; color: #4F6883; font-size: 125%; font-weight: normal; }
#footer2 p { color: #555; margin: 0; font-size: 95%; line-height: 170%; }
#footer2 a { color: #555; text-decoration: none; border-bottom: 0px dotted #333; }
#footer2 a:hover { color: #111; text-decoration: none; border-bottom: 1px solid #333; }
#footer2 #footerfb { margin: 0 0 15px 0; }
#footer2 #footerfb a img { border: none; } /* for IE */
#footer2 #footerfb a { border: none; }
#footer2 #address { float: left; width: 340px; margin: 0; padding: 0; font-weight: bold; }
#footer2 #contactus { float: left; width: 330px; margin: 0; padding: 0; font-weight: bold; }
#footer2 #followus { float: left; width: 200px; margin: 0; padding: 0; }
#footer2 #photocredit p { font-size: 80%; line-height: 130%; }

#clearboth { clear: both; height: 1px; }

h2 .small { font-size: 60%; color: #666; font-style: italic; margin: 0 0 0 10px; }

h3 .small { font-size: 80%; }

#content p.small { font-size: 80%; }


/* this fixes the bold */
strong { font-family: 'optimabold'; font-weight: normal; }


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

/*body { margin: 0; padding: 0; background: #FFF; }

#wrapper { width: 100%; margin: 0px; padding: 20px; background: #FFF; }*/

#content h2 { font-size: 200%; }
#content h3 { font-size: 150%; }
#content h3.notopborder { font-size: 150%; }
#content h4 { font-size: 130%; }
/*#content p strong { font-size: 110%; }
#content p { font-size: 110%; }*/

/*
#topimage { width: 480px; height: 280px; margin: 0; padding: 0; }
*/

#footer2 { position: relative; width: 100%; padding: 0px; margin: 0; background: #EEE; }

#footer2 #address { float: none; width: 90%; margin: 20px 10px; padding: 20px; font-weight: bold; border-bottom: 1px solid #666; }
#footer2 #contactus { float: none; width: 90%; margin: 20px 10px; padding: 20px; font-weight: bold; border-bottom: 1px solid #666; }
#footer2 #followus { float: none; width: 90%; margin: 20px 10px; padding: 20px; }
#footer2 #photocredit p { font-size: 80%; line-height: 130%; }

}

#aviandesign { width: 100%; margin: 10px auto 0px auto; text-align: center; font-size: 75%; font-family: Optima; }
#aviandesign a { color: #BBB; text-decoration: none; }
#aviandesign a:hover { color: #999; }