/*
  Set up the default format for the entire Body tag.
  Font Family is serif, letting the user's computer load the best serifed font for the job (probably Times New Roman).
       Changing this to sans-serif will load Helvetica or Arial, depending on the computer being used to view the site.
  The left and top margins are placing the top-left corner of the white box relative to the top-left corner of the browser window
*/
body {
     background: #114479;
     font-family:serif;
     margin-top:20px;
     }

/*
  Set the type of bullet used for Unordered Lists
*/ 
ul {
	list-style: square;
}

/*
  This defines how bullet points are formatted.  The margin-bottom is how much space is added after a bullet point section.  
*/
li {
    margin-bottom:10px;
   }

li p {
   font-size:small;
   }
/*
  These set up the colors for links across the site
*/
a {
    color: #276DDD;
    text-decoration: none;
}

/*
  This sets the hover color for all non-navigation links
*/
a:hover {
	color: #339999;
}

/*
  This further idents any <a> tags within the block and gives the uniform spacing between links that's in the nav area.
  Changing the margin will change how much space there is between links.
*/   
p.nav a {
     margin-left:10px;
     }

/*
  This defines the font size for your name.  The negative bottom margin accounts for extra space the font inserts as part of the line itself.
  If the line-height is removed, this block will inherit the line-height from #contact.
*/
h1 {
     font-size:20px;
     margin-bottom:-10px;
     line-height:normal;
     }

/*
  Unbold the course names
*/
h4 {
   font-weight:normal;
   }

/*

*/
h5 {
   font-size: 13px; font-weight: bold;
   }

/*
  These define now text in a <p> tag with a class of "nav" display.
  The left margin indents the entire line (where the horizontal line image begins).
*/
p.nav {
     font-size:16px;
     }

/*
  This offsets the line image to display a bit further from the link text.
*/
p.nav img {
     margin-top:10px;
     }

/*
  This creates the nearly white box that most of your content is located with in.  The width is fixed, but the height will change to fit the amount of text inside it.
*/
#container {
     background: #FFF9F5;
     width:775px;
     text-align:left;
     margin:0px auto;
     padding: 10px 10px 10px 10px;
     }
/*
  This defines the spacing of content within the whitebox relative to the edges of the white box.
*/
#content {
     margin-left:30px;
     margin-right:50px;
     }
     
/*
  This places your image relative to your name in the contact information.
  Change the right margin to move it left to right (increase means it moves left).
  Change the top margin to move it up and down (increase means it moves down).
  The padding creates the border around the image and the background defines the color of the border (currently matching the background of the page).padding 10 
*/
#portrait {
     float:right;
     margin-right:70px;
     margin-top:20px;
     background: #114479;
     padding:6px;
     }

/*
  This places the block of text that is your contact information.  It adds padding to the bottom to add space underneath it.
  The line height will change the spacing between lines EXCEPT after your name and in the table.
*/
#contact {
     padding-left:50px;
     padding-bottom:50px;
     font-size:15px;
     line-height:10%;
     }

/*
  This adds space above the table and reverts line height to normal for the INDEX PAGE ONLY
  If the line-height is removed, this block will inherit the line-height from #contact.
*/     
#index_contact_table {
     padding-top:25px;
     line-height:normal;
     }

/*
  This adds space above the table and reverts line height to normal for the COURSES PAGE ONLY
  If the line-height is removed, this block will inherit the line-height from #contact.
*/     
#courses_contact_table {
     line-height:normal;
     }

/*
  This creates the left column and causes the right column to float off to the right.  See the HTML code for how to add/remove rows.
*/
.leftcol {
     float:left;
     clear:left;
     text-align:left;
     }

/*
  This defines the amount of space between the two columns on the Index Page.
*/
#index_contact_table .rightcol {
     margin-left:75px;
     }

/*
  This defines the amount of space between the two columns on the Courses Page.
*/
#courses_contact_table .rightcol {
     margin-left:100px;
     }

/*
  This defines the look of the quote itself including centering the text and increase the side margins to squeeze it in a bit.
  The negative bottom margin pulls up whatever is beneath the quote closer to the quote text (normally the byline).
*/     
.quote {
     font-style:italic;
     font-size:12px;
     text-align:center;
     margin-bottom:-10px;
     margin-left:45px;
     margin-right:45px;
     }

/*
  This formats the byline with a slightly larger font-size.
*/
.quotename {
     font-size:13px;
     text-align:center;
     }

/*
  This can be used to center anything on the site, but is mainly being use to center the line image above the quote.
*/
.centerimage {
     text-align:center;
     margin-bottom:-5px;
     }
     
/*
  Makes a smaller font and reduces the top margin
*/
.smallfont {
     font-size:small;
     margin-top:-20px;
     }