I need help with an artificial Civil War and Reconstruction Webpage for a college that is offering a series of online courses, one of which is The Civil War and Reconstruction. The content has already been developed and all it needs is text and color styles. However, my text appears kinda different than what its supposed to look like. My code is as follows:

Code:
<!DOCTYPE html>
   <html>
   <head>
   <!-- 
      New Perspectives on HTML and CSS
      Tutorial 3
      Case Problem 3

      Civil War History
      Author: 
      Date:  

      Filename:         civilwar.htm
      Supporting files: cw_layout.css, cw_styles.css, cwphoto.png,
                        modernizr-1.5.js, mwulogo.png, pcphoto.png
   -->

      <meta charset="UTF-8" />
      <title>Civil War History</title>
      <script src="modernizr-1.5.js"></script>
	  
	  <link href="cw_layout.css" rel="stylesheet" />
	  <link href="cw_styles.css" rel="stylesheet" />

   </head>

   <body>

      <header>
         <h1><img src="mwulogo.png" alt="Midwest University" /></h1>
      </header>

      <nav class="horizontal">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Terms of Use</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Help</a></li>
         </ul>
      </nav>

      <nav class="vertical">
         <h4>Course Outline</h4>
         <ol>
            <li><a href="#">The Road to War</a>
               <ol>
                  <li><a href="#">Planting the Seeds</a></li>
                  <li><a href="#">The First Crisis</a></li>
                  <li><a href="#">Compromise &amp; Failure</a></li>
                  <li><a href="#">Fault Lines</a></li>
               </ol>
            </li>            
            <li><a href="#">Politicians &amp; Generals</a>
               <ol>
                 <li><a href="#">Politicians</a></li>
                 <li><a href="#">Generals</a></li>
               </ol>
            </li>
            <li><a href="#">The Course of War</a>
               <ol>
                  <li><a href="#">1861-1862</a></li>
                  <li><a href="#">1863</a></li>
                  <li><a href="#">1864-1865</a></li>
               </ol>
            </li>
            <li><a href="#">Aftermath</a>
               <ol>
                  <li><a href="#">Lincoln Assassination</a></li>
                  <li><a href="#">Reconstruction</a></li>
                  <li><a href="#">A New Constitution</a></li>
                  <li><a href="#">The United States Is ...</a></li>
               </ol>
            </li>
         </ol>
      </nav>

      <section>
         <header>
            <h1>The Civil War and Reconstruction</h1>
            <img src="cwphoto.png" alt="photo" />
         </header>

         <article>
            <h2>About the Course</h2>
            <p>
               The Civil War and Reconstruction
               explores the causes and consequences of the American 
               Civil War, covering American history from 1840 through 1876 in
               great detail. My primary goal is to interpret the multiple 
               threads that run through this epic event and consider how these
               threads still engage the politics and culture of the 
               present day. In this course we will rely heavily on primary
               texts, interpreting the events of the day through the words of
               those men and women who experienced it. We'll examine four main
               points of interest:
            </p>
            <ul>
               <li>The crisis of disunion in a young nation</li>
               <li>The personality and motivations of the men and
                   women who responded to that crisis</li>
               <li>The events of the war which shaped the outcome</li>
               <li>The aftermath and the unresolved issues which
                   came out of the conflict</li>
            </ul>
   
            <h3>Course Structure</h3>
            <p>
               Lectures are provided through podcast or via direct
               download twice weekly with lecture notes available
               through e-mail or RSS feed. A detailed summary of the 
               lectures is provided in the links at the left.
            </p>
         </article>

         <aside>
            <h3>About Peter Craft</h3>
            <img src="pcphoto.png" alt="photo" />
            <p>
               Peter Craft is a professor of American and Military History and 
               the Director of the Taylor Institute for the Study of Military
               History at Midwest University. He is the author of numerous books, 
               including: <cite>Fault Lines: The Causes of the Civil War</cite>,
               <cite>Day at Cooper Union</cite> (for which he received the 
               Lincoln Prize), and <cite>Helen: A Memoir</cite>. He is also
               a frequent contributor to <cite>The News Hour</cite> 
               and the <cite>History Channel</cite>.
            </p>
         </aside>

      </section>

      <footer>
         <p>
            Midwest University 2014. Some rights reserved. Unless otherwise 
            indicated, all content on this web site is licensed under a 
            <a href="#">Creative Commons License.</a>
         </p>
      </footer>

   </body>
</html>

The layout.css file, which needs no editing because it already existed is as follow:

Code:
/*
   New Perspectives on HTML and CSS
   Tutorial 3
   Case Problem 3

   Civil War History Layout Style
   Author: 
   Date:   

   Filename:         cw_layout.css
   Supporting Files: none

*/

/* Layout styles */


body {
   margin: 0px;
   padding: 0px;
   width: 1000px;
}

body > header > h1 {
   height: 90px;
   margin: 0px;
   width: 100%;
}

p {
   margin: 0px 10px 10px 10px;
}

nav.horizontal ul {
   display: block;
   width: 950px;
   height: 20px;
}

nav.horizontal ul li {
   display: block;
   float: left;
   text-align: center;
   width: 150px;
}

nav.vertical {
   clear: left;
   float: left;
   margin-right: 0px;
   width: 300px;
}

section {
   float: left;
   width: 700px;
}

article {
   float: left;
   width: 400px;
}

aside {
   display: block;
   width: 300px;
   float: left;
}

aside img {
   display: block;
   width: 200px;
   margin: 0px auto 10px;
}

footer {
   clear: left;
   width: 1000px;
}
and the code for the styles.css which does need editing:

Code:
/*
   New Perspectives on HTML and CSS
   Tutorial 3
   Case Problem 3

   Civil War History Text and Color Style
   Author: 
   Date:   

   Filename:         cw_styles.css
   Supporting Files: cw_layout.css

*/

body {
	background-color: white;
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	}

section h1 {
		background-color: rgb( 212, 100%, 29% );
		color: (212, 0%, 0%), white;
		opacity: 0.4em;
		font: normal small-caps 0.8em/4em 'Trebuchet MS', Helvetica, sans-serif;
		letter-spacing: 5em;
		text-indent: 5 em;
	}
	
section h2 {
		color: (212, 0%, 0%), white;
		opacity: 0.4em;
		font-size: 32em;
		font: normal small-caps 0.8em/4em 'Trebuchet MS', Helvetica, Palatino, sans-serif;
		letter-spacing: 5em;
		text-indent: 5 em;
		background-color: rgb( 212, 95%, 90% );
	}

section h3 {
		color: (212, 0%, 0%), white;
		opacity: 0.4em;
		font: normal small-caps 0.8em/4em 'Trebuchet MS', Helvetica, Palatino, sans-serif;
		letter-spacing: 5em;
		text-indent: 5 em;
		background-color: rgb( 212, 95%, 90% );
	}
	
section h4 {
		color: (32. 0%. 0%), white;
		opacity: 0.5em;
		font-size: 18em;
		font: normal small-caps 0.8em/4em 'Trebuchet MS', Helvetica, Palatino, sans-serif;
		letter-spacing: 5em;
		text-indent: 15 em;
		background-color: rgb( 212, 95%, 90% );
	}
	
section h5 {
		color: (212, 0%, 0%), white;
		opacity: 0.4em;
		font: normal small-caps 0.8em/4em 'Trebuchet MS', Helvetica, Palatino, sans-serif;
		letter-spacing: 5em;
		text-indent: 5 em;
		background-color: rgb( 212, 95%, 90% );
	}
	
section h6 {
		color: (212, 0%, 0%), white;
		opacity: 0.4em;
		font: normal small-caps 0.8em/4em 'Trebuchet MS', Helvetica, Palatino, sans-serif;
		letter-spacing: 5em;
		text-indent: 5 em;
		background-color: rgb( 212, 95%, 90% );
	}
	
/* Navigation list styles */
	nav ul {
		list-style-type: none;
		padding-left: 0.0em;
		text-indent: 5em;
		font-weight: bold;
		color: ( 212, 95%, 90% ), white; 
		background-color: (32, 100%, 95%);
		text-transform: Roman numeral;
		line-height: 2em;
	}
	
nav ul li;hover {
		color: rgb(212, 100%, 29%);
		font: normal small-caps 0.8em/4em 'Century Gothhic MS', sans-serif;
		font-size: 14em;
		font-weight: bold;
		letter-spacing: 3em;
		color: yellow;
	}

nav ul li;first-of-type {
		text-transform: uppercase;
		line-height: 2em;
	}
	
footer address {
		font-size: 10em;
		line-height: 30em;
	}
Does anyone know what is wrong with my stylesheet and can they teach me the proper syntax.

The required pictures are as follows:

-cwphoto-jpg-mwulogo-png-pcphoto-jpg