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

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: justify;
background-color:#4d4d4d;
}

h1 {
display: none;
}

h2 {
font-size: 14pt;
color: #4d4d4d;
margin-top: 0px;
}

h3 {
font-size: 10pt;
color: #4d4d4d;
margin-bottom: 0px;
}

p {
margin-top: 0px;
}

A:link,A:visited,A:active,A:hover {font-weight: bold;}

A:link {text-decoration: none; color: #0276B2;}
A:visited {text-decoration: none; color:#0276B2;}
A:active {text-decoration: none;  color:#0276B2;}
A:hover {text-decoration: underline; color:#0276B2;}

/* This goes around everything and contains the page, centering it on a background. */

#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
background-image: url(images/PaperTexture.jpg);
position: relative;
}

#header {
background-image: url(images/Header.jpg);
height: 300px;
width: 800px;
margin-right: auto;
margin-left: auto;
clear-both;
}

/* This bit of code here causes the buttons to stay highlighted when on corresponding pages. Requires body id code to be set in each HTML page. */

#about #about-button {
background-position: 0 35px;
}

#programs #programs-button {
background-position: -85px 35px;
}

#credits #credits-button {
background-position: -210px 35px;
}

#press #press-button {
background-position: -300px 35px;
}

#contact #contact-button {
background-position: -390px 35px;
}

/* This is the navigation (made out of transprent PNGs) which hovers over the header */

#navigation {
position: absolute;
top: 238px;
left: 27px;
height: 35px;
width: 485px;
}

/* These are the animated graphic navigation buttons */

.navigation-button {
float: left;
background-image:url(images/Navigation.png);
}

.navigation-button span {
display: none;
}

#about-button {
width: 85px;
height: 35px;
background-position: 0px 0px;
}

#about-button:hover {
background-position: 0px 35px;
}

#programs-button {
width: 125px;
height: 35px;
background-position: -85px 0px;
}

#programs-button:hover {
background-position: -85px 35px;
}

#credits-button {
width: 90px;
height: 35px;
background-position: -210px 0px;
}

#credits-button:hover {
background-position: -210px 35px;
}

#press-button {
width: 90px;
height: 35px;
background-position: -300px 0px;
}

#press-button:hover {
background-position: -300px 35px;
}

#contact-button {
width: 95px;
height: 35px;
background-position: -390px 0px;
}

#contact-button:hover {
background-position: -390px 35px;
}

/* This hides the text links, which have been converted into images for the navigation */

#about-button span, #programs-button span, #credits-button span, #press-button span, #contact-button span {
display: none;
}

/* General page content goes in this ID */

#content {
width: 730px;
padding: 35px 35px 15px 35px;
}

#footer {
background-image: url(images/Footer.jpg);
height: 40px;
width: 800px;
margin-right: auto;
margin-left: auto;
clear: both;
}

.donna_photo {
float: left;
margin: 0 25px 15px 0;
}

.item {
width: 725px;
margin-right: 75px;
padding-top: 25px;
margin-bottom: 20px;
margin-top: 5px;
background-color: #ddd;
float: left;
}

.item_youtube {
height: 240px;
width: 320px;
float: right;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
}

.item_description {
width: 325px;
float: left;
padding-bottom: 5px;
margin-left: 25px;
margin-top: -15px;
}

/* This section adds the credits at the bottom of the page */

.legal {
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10px;
text-align: right;
padding-top: 5px;
background-color: #4d4d4d;
color: #FFFFFF;
}

.legal a:link, .legal a:visited {
color: #0276B2;
text-decoration: none;
}

.legal a:hover {
color: #0276B2;
text-decoration: underline;
}

.legal a:active {
color: #0276B2;
text-decoration: underline;
}