@charset "UTF-8";
/* CSS Document */

/* Site Colors
    Service Ribbon Green:   #066C3C, rgb(6,108,60)
    Service Ribbon Yellow:  #F3E14F, rgb(243,225,79)
    Service Ribbon Red:     #D2330D, rgb(210,51,13)
*/


/* CONTENTS
There are several sections in this file:@charset

    1. Fonts
    2. Page Layout
    3. Left Navigation Bar
    4. Homepage: Right Sidebar
    5. Site Header/Banner
    6. Footer
    7. Pictures and Images
    8. Useful Classes

*/



/* 1. FONTS */
/* This section controls all the font appearances.  Other parts are styled later, but most font settings happen here. */

/* This lets browsers access the Google fonts. */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,400italic,600italic);
@import url(http://fonts.googleapis.com/css?family=Stardos+Stencil:400,700);


/* Sets the font for all of the body text on the site. */
body {
	font-family:'Open Sans Semibold', Verdana, Geneva, sans-serif;
	background-image:url(images/backgnd.jpg);
	background-repeat:repeat;
}

/* Sets the standard link style. */
a {
	color:rgb(6,108,60);
	/* I changed color from (6,108,60) */
	text-decoration:none;
	font-weight:700;
	}
	
a:hover {
	border-bottom:3px solid rgb(243,225,79); /* This is the color yellow. */
	}

/* Sets the style for the site title and subtitle in the banner. */        
#sitetitle {
	font-family:'Stardos Stencil', Bookshelf, serif;
	font-size:48px;
	font-weight:bold;
	text-align:center;
	text-shadow: 0 0 5px rgba(243,225,79, 0.8);
}
#sitesubtitle {
	font-family:'Open Sans Semibold', Verdana, Geneva, sans-serif;
	font-size: 36px;
	text-align:center;
	text-shadow: 0 0 5px rgba(243,225,79, 0.8);
	padding-top:10px;
}


/* Font for headings throughout the site. */
h1, h2, h3, h4 {font-family:'Stardos Stencil', Bookshelf, serif;}

/* Section header for the homepage and for regular pages throughout the site. */
div#homepagecontent div.section h2, div#pagecontent div.section h2 {
	background-color:rgb(6,108,60);
	color:rgb(243,225,79);
	text-shadow:2px 2px 2px #000;
	-moz-box-shadow: 0 0 5px 5px rgb(6,108,60);
        -ms-box-shadow: 0 0 5px 5px rgb(6,108,60);
        -o-box-shadow: 0 0 5px 5px rgb(6,108,60);
	-webkit-box-shadow: 0 0 5px 5px rgb(6,108,60);
	box-shadow: 0 0 5px 5px rgb(6,108,60);
	padding-left:0.25em;
	margin-top:2em;
	margin-bottom:0.5em;
	text-align:center;
	font-size: 1.5em;
	clear: both;
}

/* Sets the top margin for the heading in the first section on the page. */
div.section:first-child h2 {margin-top:7px;}

/* Styles the visible page title for pages that aren't the home page. */
div#pagecontent h1 {
        background-color:rgb(6,108,60);
	color:rgb(243,225,79);
	text-shadow:2px 2px 2px #000;
	-moz-box-shadow: 0 0 5px 5px rgb(6,108,60);
        -ms-box-shadow: 0 0 5px 5px rgb(6,108,60);
        -o-box-shadow: 0 0 5px 5px rgb(6,108,60);
	-webkit-box-shadow: 0 0 5px 5px rgb(6,108,60);
	box-shadow: 0 0 5px 5px rgb(6,108,60);
	padding-left:0.25em;
	margin-top:0em;
	margin-bottom:1.25em;
	text-align:center;
        font-size: 1.75em;
}

/* Not currently used.  This is the style for links on the home page that would take you to read more of the Recent Updates or News and Announcement entries. */
p.readmore {
	text-align:right;
	margin:1em 0.25em;
	display:block;
	}

/* Semi-bolds the Recent Update dates, plus any other Definition Terms (<dt>) throughout the site. */        
dt{
	font-weight:700;
	}

        
        
        
/* 2. PAGE LAYOUT */
/* Controls the page's layout.  Specific parts are styled later, but this is where to make changes to the column widths and other layout parts. */

div#page {
	width:960px;
	margin:0 auto;
	background-image:url(images/Service-Ribbon-Alpha.png);
	background-position:top;
	background-repeat:no-repeat;
}

div#pageheader {
	padding:auto 0px;
	color:black;
	
	}

div#maincontent {
	margin-top: 45px;
	overflow:hidden; /*This makes the columns go all the way to the page bottom.*/
	}

div#navbarwrapper, div#homepagecontent, div#pagecontent {
	float:left;
}

div#sidebarwrapper{
	float:right;
	}

div#homepagecontent {
	width:56%; 
	padding: 0 1em 0 1.5em;
	}

div#pagecontent {
	width:75%; 
	padding: 0.6em 1em 0 2em;
	}        
        
div#sidebarwrapper, div#navbarwrapper {
	background-image:url(images/Sandbags3.png);
	background-repeat: repeat;
	width:19%;
	border:#755417 solid 2px;
	padding-bottom:10000px; /*This makes the columns go all the way to the page bottom.*/
	margin-bottom: -9990px; /*This makes the columns go all the way to the page bottom.*/
	}

div#pagefooter {clear:both;} /* This makes the footer appear below the columns.  Rest of the footer code below. */

div.NameColumns {float:left; width:30%;}


/* 3. LEFT NAVIGATION BAR */

/* The entire navigation bar is a "Unorderd List," or <ul> element.  This removes the bullets and sets up margins. */
div#navigation ul {
	list-style-type:none;
	padding-left:0px;
	margin-top: -20px;
}

/* Controls the look of each option in the navigation bar. */
div#navigation>ul>li {
	/* The LIs that are menu options on the left side. The '>' means 'direct child.'*/
/*	background: -moz-linear-gradient(top, rgba(6,108,60,0.2), rgba(6,108,60,0)); */
	padding:1px 0px 3px 5px;
	position:relative;
	border-top:2px solid #755417;
	cursor:pointer;
	margin:1.5em 0em;
	font-size:0.85em;
	position:relative;	
}

div#navigation>ul>li:first-child {
    border-top: 0;
}

/* Turns the navigation bar links black. */
div#navigation>ul>li>a {
    color:black;
}

/* Changes the navigation bar links to green when the cursor hovers over them. */
div#navigation>ul>li>a:hover {
    font-weight:1100;
	color:rgb(6,108,60); /* I changed from green = (6,108,60)*/
}

/* Sets the style for whichever item on the navigation bar should be highlighted.  */
div#navigation>ul>li.active a {
    font-weight:1100;
    color:rgb(6,108,60); /* I changed from green = (6,108,60)*/
}

/* Defines the pop-up menu look but sets it to no visibility and no opacity. It is therefore invisible to screens but accessible to screen readers. */
div#navigation ul li ul {
	list-style-type:none;
	list-style-image:url(images/bullet-2.png);
	opacity:0;
	margin-top:0px;
	position:absolute;
	left:182px;
	visibility:hidden;
	overflow:hidden;
	width:200px;
	background-color:rgba(189, 216, 203, 0.95);
	top:-2px;
	border-top:2px solid rgb(6,108,60);	
	border-left:1px solid rgba(6,108,60,0.75);
	padding:0 0.5em 1em 75px;
	-moz-transition:visibility 0s linear 0.5s, opacity 0.5s ease;
	-webkit-transition:visibility 0s linear 0.5s, opacity 0.5s ease;
	-o-transition:visibility 0s linear 0.5s, opacity 0.5s ease;
	-ms-transition:visibility 0s linear 0.5s, opacity 0.5s ease;
	transition:visibility 0s linear 0.5s, opacity 0.5s ease;
	-webkit-box-shadow: 3px 3px 3px #444;
        -ms-box-shadow: 3px 3px 3px #444;
        -o-box-shadow: 3px 3px 3px #444;
	-moz-box-shadow: 3px 3px 3px #444;
	box-shadow: 3px 3px 3px #444;
}

/* Styles the individual links in the pop-up menus on the navbar. */
div#navigation>ul>li>ul>li {
	font-size:100%;
	margin: 1em 0em;
	padding-left:0px;
	border-bottom:1px solid rgba(6,108,60,0);
	}

/* Styles the individual links in the pop-up menus when the cursor hovers over them. */        
#navigation ul li ul li a:hover {
        border-bottom:0px;
        text-decoration:underline;
}

/* Turns the visibility and opacity on when the main menu item is hovered. The transition delay is for when you mouse out of the pop-up menu.  Without it there's a half-second delay before the fade-out happens. */
div#navigation ul li:hover ul {
	visibility:visible;
	opacity:0.95;
	-moz-transition-delay:0s;
	-webkit-transition-delay:0s;
	-o-transition-delay:0s;
	-ms-transition-delay:0s;
	transition-delay:0s;
}




/* 4. HOMEPAGE: RIGHT SIDEBAR */

/* Makes the font for the entire sidebar a little smaller. (85% of whatever the regular font size is.) */
div#sidebar div.section {
	font-size:1.0em;
	}

/* The green header for the sidebar.  If you want other sections later below Recent Updates, they'll look like this also. */        
div#sidebar div.section h3 {
	color:#066C3C;
	margin-top:2em;
	padding-left:0.25em;
	text-transform:uppercase;
	font-size:1.3em;
	}

/* Removes the top margin for the first section header so it lines up with the main page body. */
div#sidebar div.section h3:first-child {
	margin-top:1em;
	}

/* In Memoriam */
.section.memorial {
	padding: 0.5rem;
}

/* Styles the individual items in the Recent Updates section. */        
div#sidebar>div.section>dl {
	margin: 0 0.25em;
	}
	
div#sidebar>div.section>dl>dt {
	font-weight: bold;
	border-top: 2px #755417 solid;
	margin-top:1em;
	}
	
div#sidebar>div.section>dl>dd {
	margin-left:1.5em;
	}



        
/* 5. SITE HEADER/BANNER */

#pageheader img.dolphinpatch {
	height:150px;
	}
	
#pageheader img.sharkpatch {
	height: 100px;
	}

div#eaglebanner {
	/*background-image:url(eagle-banner.jpg);*/
	margin:0 auto 1em auto;
	}
	
div#eaglebanner img {
	width:100%;	
	}

        


/* 6. FOOTER */

/* Sets footer's width, alignment and top margin. */
div#pagefooter {
	text-align:center;
	width: 960px;
	margin-top:3em;
	}

/* Aligns the counter on the home page. */
div#counter {
	text-align:center;            
        }

/* Gives the footer its top line and margins. */
div#footer {
	border-top: rgb(6,108,60) solid 3px;
	margin:1em;
	padding: 1em;
	}

/* The next three items style the links in the footer. */        
#footerlinks {
	margin:0 auto;
	}
	
#footerlinks ul {
	list-style-type: none;
	margin:0 auto;
	}
	
#footerlinks ul li {
	display:inline;
	padding:0 3em;
	}

/* The next two items style the patches in the footer. */        
#footer img.dolphinpatch {
	width:100px;
	margin-top: -40px;
	}
	
#footer img.sharkpatch {
	width:100px;
	margin-top: -40px;
	}

        
        
        
/* 7. PICTURES AND IMAGES */

/* Sets a standard style for photos that appear in page content.  It centers them and sets the width to 500px.  Don't use if the picture is smaller than that.*/
.bodypic {
    width: 500px; 
    margin:2.5em auto 0;
}

/* Styles picture captions.  Right now they're similar to regular text, but this sets the width to match the picture and gives it a bottom border. */
.picturecaption {
    width: 500px;
    margin:0 0 2em 0;
    border-top: 1px solid rgb(6,108,60);
    border-bottom: 1px solid rgb(6,108,60);
}

/* Lets you show a picture as a thumbnail that is 200px wide. */
.thumbnail {
    /* This is for pictures that you want to show as a thumbnail.  It scales the picture to be 200px wide and does the height automatically. */
    width: 200px;
    margin: 1em;

}

/* For e-mails page mug shots */
.mugshots {
    float:left;
	margin-right:1em;
	margin-bottom:2em;
	clear:both;
}

/* For the audio page, or anywhere you want to put a list of audio files */
.audio-list dd {
	margin: 0 0 1.5em;
}





/* 8. USEFUL CLASSES */
/* You can use these throughout the site as needed.  They'll help with formatting. See the page template for descriptions. */

.floatleft {float:left;} 
.floatright {float:right;} 
.center {margin:inherit auto;} 

.bigtext {font-size:150%;}
.biggertext {font-size:200%;}
.biggesttext {font-size:300%;}
.allcaps {text-transform:uppercase;}
.titlecase {text-transform:capitalize;}
.underline {text-decoration: underline;}
.strikethrough {text-decoration: line-through;}
.bold {font-weight: bold;}

.redtext {color:rgb(210,51,13);}
.greentext {color:rgb(6,108,60);}
.yellowtext {color:rgb(243,225,79);}

.centertext {text-align: center;} /* Note: Center aligned text is harder to read that left aligned text. */
.righttext {text-align:right;} /* Note: Right aligned text is harder to read than left aligned text. */ 
.clear {clear:both;} /* Stops unusual wrapping with floated objects */