/* sample stylesheet */

/*leave this #content styling alone! */
#content{
float:left;
width:700px;
margin:0px 15px 0 15px;
padding: 0 15px 10px 15px;
display:inline; /*to fix IE/Win double margin bug */
}

/* alter what you like below this line...
be sure to start any styles with #main to avoid clashing with the other sheets

AVOID inline styles on the page 
The idea is to keep the styling information in here so that content and presentation rules are kept separate
*/


/*text formats - using header tags - 
expressing font sizes as percentages
a base font size is set in global.css and all other font-sizes are percentages of this
If a visually impaired person ups the font size then everything scales up proportionally
IE does not always allow the viewer to up the font if it has been explicitly set - 
bad news for accessibility*/
#main h3{font-size:140%;}
#main h2{font-size:180%; color:#0000FF; font-weight:bold;
margin-top:15px;
margin-bottom:15px;}
#main h4{font-size:125%; color:#000000; font-weight:bold;}
#main h1{font-size:150%;}

/*style the unordered list that displays the course contents */
#main ul {font-size:90%; margin:15px 0 15px 0;}
#main ul li {margin: 5px 15px;}

/*red text in paragraph apply html em tag and then style here*/
#main em{color:#FF0000; font-style:normal; }

/*justify all of the p tags and space them out with margins */
#main p {margin-top:5px; margin-bottom:10px; text-align:justify;}

/* centre anything that has been wrapped in a <div class="centre"></div> tag */
#main .centre{text-align:center;}
/* p tag in centre class has to be re-aligned to center to override the #main p instruction above */
#main .centre p{text-align:center;}