/*To be valid CSS, rules in which a text color is specified must have a background-
color specified, and vice-versa. */

/* Pseudo-class rules provide default styles for text hyperlinks. These rules
need to be in the order Link, Visited, Hover, Active to work properly.*/
a:link {
	background : #FFFFFF;
	color : #000066;
	text-decoration : underline;
}

a:visited {
	background : #FFFFFF;
	color : #000066;
	text-decoration : underline;
}

a:hover {
	background : #C6DCE7;
	color : #010066;
	text-decoration : none;
	
	
}

a:active {
	background : #FFFFFF;
	color : #000066;
	text-decoration : underline;
}

.active {
	background : #010066;
	color : #FFFFFF;
	text-decoration : none;
	
	
}

/* In the body tag we set a background color, text color, size, and font-family 
which apply to everything inside the body. The margin setting removes the
default body margins in modern browsers. */
body {
	background-color : #FFFFFF;
	color : #000000;
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 12px;
	margin : 0px;
}

/* Headings include a background color, again, because validation
requires it. */
h1 {
	background : #FFFFFF;
	color : #000066;
	font-size : 16px;
	font-weight : bold;
	letter-spacing : 2px;
	border-left: 1px solid #000066;
	border-bottom: 1px solid #000066;
	width: 580px;
	padding-left: 0.5em;
	margin-top: 10px;
}

h2 {
	background : #FFFFFF;
	color : #000066;
	font-size : 14px;
	font-weight : bold;
	letter-spacing : 2px;
	border-left: 1px solid #000066;
	border-bottom: 1px solid #000066;
	width: 580px;
	padding-left: 0.5em;
	margin-top: 10px;
}

h3 {
	background-color : #C6DCE7;
	border : 1px solid #000000;
	padding: 3px;
	color : #010066;
	font-size : 13px;
	width: 45em;
	
}
h4 {
	border-bottom: 1px solid #000066;
	width: 580px;
}

/* Certain browsers will "forget" to inherit these styles into a <td>, so they need
to be stated explicitly */
td {
	font-family : Verdana, Arial, Helvetica, sans-serif;
	font-size : 12px;
}

/* td#maincontent  p gives any paragraph text within a table cell which
has the id #maincontent the following styles. */
td#maincontent  p {
	line-height : 18px;
	padding-left : 20px;
	padding-right : 20px;
}

/* The "stripes" table at the very top of the page needs a bottom border. */
.borderbottom {
	border-bottom : 1px solid #000000;
}

/* .smallertext and .smallesttext can be applied to an element in which
you would like the text size to be set to these pixel dimensions. .smallesttext
is currently used for the bottom navigation text links. .smallertext isn't yet used,
but is included here in case it's needed. */
.smallertext {
	font-size : 11px;
	line-height : normal;
}

.smallesttext {
	font-size : 10px;
	line-height : normal;
}

/* Stripes each have only a border-top, because in both locations the bottom
borders are supplied by other elements. */
.stripe1 {
	background-color : #6582CE;
	border-top : 1px solid #000000;
	color : #000000;
}

.stripe2 {
	background-color : #8DA4E8;
	border-top : 1px solid #000000;
	color : #000000;
}

/* Formulas for figuring widths on "buttons". */
/*
In navbar link rules:
Width + 
Left padding +
Right padding +
2 for the left and right border = 
Total width of buttons*/
/* In ".navbar", formula for width property:
Width in navbar link rules +
Left-padding in navbar link rules +
Right-padding in navbar link rules 
MINUS 2 for the left and right border
 */
/* .topnav should be applied to each <td> comprising a navigation button */ 
.topnav {
	background-color : #E8CCC6;
	border : 1px solid #000000;
	color : #000000;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 11px;
	letter-spacing : 1px;
	text-align : center;
	width : 100px;
}

.topnavactive {
	background-color : #010066;
	border : 1px solid #010066;
	color : #FFFFFF;
	font-size : 11px;
	letter-spacing : 1px;
	text-align : center;
	width : 100px;
}

/* These 4 pseudo-class descendent selectors' styles will be applied to link
text inside any <td> with the class attribute .topnav  */
.topnav a {
	display : block;
	padding : 1px 1px 1px 1px;
	text-decoration : none;
	width : 100px;
}

.topnavactive a {
	display : block;
	padding : 1px 1px 1px 1px;
	text-decoration : none;
	width : 100px;
}

.topnav a:link {
	background-color : #C6DCE7;
	color : #000066;
	text-decoration : none;
	font-weight: bold;
}

.topnavactive a:link {
	background-color : #010066;
	color : #FFFFFF;
	text-decoration : none;
	font-weight: bold;
}

.topnav a:visited {
	background-color : #C6DCE7;
	color : #000066;
	text-decoration : none;
	font-weight: bold;
}

.topnavactive a:visited {
	background-color : #C6DCE7;
	color : #000066;
	text-decoration : none;
	font-weight: bold;
}

.topnav a:hover {
	background-color : #000066;
	color : #FFFFFF;
	text-decoration : none;
}


/* #footer IDs the <td> with the copyright (and/or other) footer info. */
#footer {
	background : #C6DCE7;
	border-top : 1px #000000 solid;
	color : #000000;
	font-size : 10px;
}

#footer a:active {
	background : #000066;
	color : #FF0000;
}

#footer a:hover {
	background : #FFF5D9;
	color : #FF0000;
}

/* These 4 pseudo-class descendent selectors' styles will be applied to link text
inside a <td> ID'd with the ID selector #footer.  */
#footer a:link {
	background : #000066;
	color : #FF0000;
}

#footer a:visited {
	background : #000066;
	color : #FF0000;
}

/* #header provides background image for header table. */
#header {
	background-image : url(images/header_bkgd.gif);
}

/* #header-left specifies the text color for any text which might be placed
in the header's left-hand cell. */
#header-left {
	background : transparent;
	color : #990000;
}

/* Styles the text in the right-hand header <td> */
#header-right {
	background : transparent;
	color : #000066;
	font-size : 11px;
	padding-right : 20px;
}

/* Provides padding for the main content cell, and IDs the cell so that 
td#maincontent p styles will be applied to paragraph text there.  */
#maincontent {
	padding : 15px 30px;
}

/* #tagline styles the text and the <td> it is applied to. */
#tagline {
	background-color : #C6DCE7;
	border-bottom : 1px solid #000000;
	border-top : 1px solid #000000;
	color : #000000;
}
.listen {
padding-bottom: 10px;
	
	
}
