/* The CSS in this file should follow the layout of the HTML from top to bottom. */

/* The rules below control the formatting of the text -- the face, size, and spacing.  Change this to suit. The line-height is the space between the lines of text.  If you change the font-size, you'll probably want to change the line-height in the same direction. */
body
{
font-family: "trebuchet ms, verdana";
font-size: 13px;
line-height: 20px;
}

table {
font-family: "trebuchet ms, verdana";
font-size: 13px;
line-height: 20px;
}

/* The only H1 in the HTML should be the name of the organization in the header.  It exists for search engine optimization -- a search engine bot will parse and weight the H1 in the HTML, but we suppress that text and replace it with the graphic for humans to view.  */
h1
{
display: none;
}

body
{
background: rgb(194, 137, 8);
margin-top: 20px;
}

/* Since we need to have a centered content area, we have to center everything with a CENTER tag in the HTML, then override that by left-aligning all the DIV tags.  The end result of this is that only the main outer DIV gets centered. (This is an IE problem.  If IE obeyed "margin: auto;" then we wouldn't have to do this.) */
div
{
text-align: left;
}

/* These two rules are for the two containers.  The outer one is the white box, and the inner one starts with the gold header and ends with the gray footer. */
#outer_container
{
width: 875px;
background-color: white;
padding-top: 20px;
padding-bottom: 20px;
}
#inner_container
{
width: 835px;
}

#header
{
padding-top: 83px; /* Since the menu needs to run along the bottom of the header, you just need to pad from the top down to "push" the UL tag to the bottom.  Since the UL is formatted as horizontal (see below), it should lie flat along the bottom of the header DIV. */
background: url(../images/header_bg.jpg) no-repeat;
border-bottom: solid 1px rgb(199, 145, 10); /* This is a bit of a hack here.  Sometimes odd things happen with heights and by putting a border on the bottom of a DIV you "remind" it of how tall it needs to be. In this case, I color the border to match the background color of the menu, so you shouldn't be able to tell there's a border there. */
}

#header ul
{
text-align: left;
padding: 2px 0 2px 0;
width: 100%;
list-style: none;
padding: 0;
margin-bottom: 3px;
}

/* This takes the bulleted list and turns it into a horizontal menu. The default display for lists is "list," and below we change it to "inline." */
#header li
{
display: inline;
text-align: center;
padding: 0 6px 0 6px;
font-size: 11px;
}

/* This is something you have to do when you columns without tables if you want the the columns to appear to be the same height.  The problem is that the content_left DIV is much shorter than the content_right DIV once you get a bunch of text in there.  This means that the content_left DIV will stop partially down the page.  To make it look like it's full height, you tile this background vertically along the entire width of the content DIV, so that when the content_left stops short, this background just keeps going down.  Take a look at content_bg.jpg and it will make more sense (and rename the file temporarily if you want to see what happens if you don't do this). This is one of those rare cases where it's much easier to do columns in tables.  */



/* Same as above for the athletic pages. See general header comments for all information */
#athheader
{
padding-top: 83px; 
background: url(../images/header_bg.jpg) no-repeat;
border-bottom: solid 1px rgb(199, 145, 10); 
}

#athheader ul
{
text-align: left;
padding: 2px 0 2px 0;
width: 100%;
list-style: none;
padding: 0;
margin-bottom: 3px;
}

#athheader li
{
display: inline;
text-align: center;
padding: 0 6px 0 6px;
font-size: 11px;
}





#content
{
background: url(../images/content_bg.jpg);
}

/* Here's how you get the two columns to line up alongside each other -- you float them both to the left.  If they both have widths specified, and the combination of those widths doesn't exceed the width of their containing DIV, they "stack up" against the left border of the container. Note that you get a "hanging float" problem unless you include an element in the content DIV that clears the margins at the bottom (see the HTML for more on this). 

In a general sense, this is how to emulate table cells with DIVs.  You put one div after another:

<div id="one">
</div>
<div id="two">
</div>

Then (1) float them to the left, and (2) set a width on each that does not exceed the width of their container.

#one, #two
{
float: left;
width: 49%;
}
*/
#content_left, #content_right
{
float: left;
}

/* The sum of the widths of these two elements needs to be less than the width of their container.  In this case the content DIV is the same width as the inner_container DIV, which is 835px.  If these two DIVs add up to more than their container, the content_right DIV will drop down to below the content_left DIV.  This can be a problem because the width of the content_right DIV is dependent on what's inside it -- it will expand to fit what's inside.  So if someone inserts a table in Ektron, and hardcodes the width of that table to, say, 750px, then problems will cascade up.  That table will make the content_right DIV wider, the sum of the widths of content_right and content_left will be larger than the inner_container DIV, so content_right will drop down under the content_left DIV in an attempt to find the room to render horizontally. */
#content_left
{
width: 180px;
}
#content_right
{
width: 655px;
}

#content_right a
{
color: rgb(156, 62, 28);
text-decoration: none;
border: none;
}

HR
{
color: rgb(156, 62, 28);
}

/* These rules are for the submenus and headers in the left menu. */
#content_left div
{
padding: 2px;
}
#content_left h2
{
margin: 0; /* An H2 has margins by default, so you need to explicitly shut them off. */
padding: 4px;
color: white;
font-weight: normal; /* Since an H2 is bold by default, you have to explicitly shut it off. */
font-size: 14px;
background-color: rgb(174, 111, 6);
}
div.dark
{
background-color: rgb(182, 123, 7);
}
div.light
{
background-color: rgb(193, 138, 11);
}

.inner_text
{
margin-right: 15px;
margin-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
background-color: transparent;
}

/* This should be the headline of the actual page content. */
#content_right h2
{
margin: 0;
color: rgb(153, 63, 29);
font-size: 28px;
font-weight: normal;
letter-spacing: 2px;
}

/* This should be the headline of the actual page content. */
#content_right h4
{
margin: 0;
color: rgb(153, 63, 29);
font-size: 18px;
font-style:italic;
font-weight: normal;
letter-spacing: 2px;
}

#footer
{
background: url(../images/footer_bg.jpg);
background-repeat: no-repeat;
color: white;
font-size: 11px;
text-align: center;
height: 32px;
padding-top: 5px;
}

a
{
color:#FFFFFF;
text-decoration: none;
border: none;
}

a:hover 
{
text-decoration: underline; 
}


/* The styles below are for items specific to the home page. */
body.home #content_right
{
background-color: rgb(156, 62, 28);
}

#home_image
{
float: left;
width: 356px;
}

#home_message
{
width: 290px;
float: left;
color: white;
line-height: 29.5px; /* If you change the size of the text block on the home page, increase this number to make less text fill a larger space, or vice-versa. */
/* background: url(../images/home/text_bg.jpg); */
}

#home_message .inner_text
{
margin: 10px;
}

#home_caption
{
background-color: black;
color: white;
}

#home_caption .inner_text
{
margin: 5px;
}

#home_lower_content
{
background: url(../images/content_bg.jpg);
}

.white_on_maroon
{
background-color: rgb(156, 62, 28);
color: white;
}

.left_menu
{
padding-top: .3em;
padding-bottom: .5em;
}

.left_menu, .left_menu ul
{
margin: 0;
padding-left: 1em;
color: white;
font-size: 12px;
}

.left_menu li
{
list-style: none;
padding-bottom: 0.3em;
}

.left_news
{
font-size: 11px;
color: white;
padding-left: 1em;
}

.left_news li
{
margin-bottom: 0.5em;
list-style: none;
line-height: 17px;
}

div.profiles
{
float: left; 
width: 295px; 
text-align: 
center; 13px;
}