/* The body tag will control everything that happens in the entire page. */
body {font: normal 100% sans-serif; background-color: #000000;}

/* Outside controls the overall width of the stuff that you see. It also will place the content in the center of the page without having it jump to one side or the other depending on which browser is being used to look at it. */
#outside {margin: auto; width: 750px; border: solid 1px #ffffff; background-color: #333333;}

/* This section controls what the header will look like. You can change the colors, and font's for each header through this section.*/
#header {padding: 5px; text-align: center; border-bottom: solid 1px #ffffff; background-color: #4a5577; color: #add8e6;}
#header h1 {margin: 0; font-family: sans-serif;}
#header h3 {margin: 0; font-family: sans-serif;}

/* this is the left navigation area. You can change what they navigation title looks like, and the hyperlinks through here. Make sure that you do not alter the <ul>rules. The way that its set up right now will keep you from having a bulleted list. Copy and paste into a new page to see what it does with out the styles, and with the styles.*/
#left {float: left; padding: 10px; text-align: left;}
#left h3 {margin: 0; font-family: "sans-serif";}
#left hr {width: 80%;}
#left ul {margin: 0; padding: 0; list-style: none;}
#left a {color: #dddddd; text-decoration:underline;}
#left a:visited {color: #dddddd;}
#left a:active {color: #dddddd;}
#left a:hover {color: #ffffff;}

/* This is the content of your page. you can control the heading styles of each section of your content from here. */
#middle {margin-left: 22%; margin-bottom: 0; padding: 20px; padding-top: 15px; border-left: solid 1px #ffffff; background-color: #333366; text-align: left; color: #dddddd;}
#middle h3 {margin: 2px; color: #ccccff; font-family: "sans-serif";}
#middle hr {width: 100%;}
#middle ol {font-size: 80%;}
#middle a {color: #999999; text-decoration:underline;}
#middle a:visited {color: #999999;}
#middle a:active {color: #999999;}
#middle a:hover {color: #ffffff;}

/* Last, this is the footer style of your page. You can control what the copyright hyperlink looks like.*/
#footer {clear: both; margin-top: 0; padding: 5px; text-align: center; border-top: solid 1px #ffffff; background-color: #4a5577; color: #dddddd;}
#footer h5 {margin: 0; font-family: "sans-serif";}
#footer a {color: #dddddd;}
#footer a:hover {color: #ffffff;}