/* 
(Very) Brief overview of Cascading Style Sheets, or CSS. For more info, search the web (http://www.w3schools.com/css/css_intro.asp is a good start), or ask me! 

Note that if you are unsure how to change the format of a particular element, a firefox plugin called 'firebug' can be extremely useful. I recommend you install it!

First of all, comments start with a '/ *' and end with a '* /' (without the spaces), so this is a comment.
Apart from comments, the document comprises a series of style specifications of the following form:

<selector>[,<selector>...] { <definition> }

The selector determines which HTML elements the style applies to; you can specify multiple selectors separated by commas. The selector usually has the following form:

[<htmlElement>][:<condition>][.<class>][#<id>]

(Note that additional complexities are possible, but this covers 95% of what is usually used and I want to keep things simple!)
Each of the sections in square brackets is optional. If specified, here are the meanings:

htmlElement: Indicates the type of html element the style will apply to. So, for example, 'h2 { font-weight: bold; }' would mean that in general the content between <h2>...</h2> tags would be rendered in bold.

condition: This is only really used in my experience with links, to specify different styles when the link is 'visited', 'hover' (i.e. mouse is over it) or 'normal'.

class: This provides a way of 'naming' a style. Then individual tags can indicate that they should be rendered in that style via the 'class' attribute. As an example, you might have a style '.big-red { font-size:31px; color: #ff0000}', then in your HTML you can indicate: '<div class="big-red">Some big red text!</div>'. Note that 'div's are very commonly used to apply a style to because by itself (i.e. without any other style information) a div does not affect the rendering of the contained elements. However divs do have other uses though, and actually any HTML element can have a class specified in this way. NB! Styles defined here will appear under the 'Styles' drop down in the online HTML editor.

id: This specifies that the style only applies to HTML elements with the specified id (e.g. '<div id="xyz">...</div>'). Generally ids would indicate a unique element on a page, so it is usually preferred to use classes rather than ids.
 
*/

/* <ul> defines the style for 'unordered lists', which are generally bullet points. */
/* <p> defines settings for all paragraphs. */
p {
	margin-top: 0px;
	margin-bottom: 0px;
	}

ul {
	margin-top: 13px;
	margin-bottom: 0px;
	margin-left: 39px;
	list-style-type: disc; 
	list-style-image: none; 
	list-style-position: outside;
	}

/* Using <strong> for bold and <em> for italic is preferred over <b> and <i> tags */
strong {
	font-weight: bold;
	}

em {
	font-style: italic;
	}

/* <td> is 'table data', so this applies to all tables unless overridden. */
td {
	font-size: 10pt;
	color: #880000;
	font-family: Verdana,Arial,Helvetica;
}

/* The overall style for the content (unless overridden by other styles, of course!) */
body {
	font-size: 10pt;
	color: #880000;
	font-family: Verdana,Arial,Helvetica;
}

/* Style applied to links (normal, when they have been visited and when they are hovered on */
A:link{color: #442200}
A:visited{color: #aa5555}
A:hover{color: #ff0000}

/* Various heading settings */
h2,h3,h4,h5 {
	font-weight: bold;
}
h2,h3,h5 {
	color: #880000;
	font-family: Helvetica,Times New Roman,Michaelmas,Verdana,Arial;
	line-height: .7;
	margin-top: 0;
}
h1 {
	font-size:31px;
	padding-top:0px;
	padding-bottom:18px;
	}
h2 {
	font-size: 18pt;
}
h3 {
	font-size: 13pt;
	margin-bottom: 0px;
}


h4 {
	font-size: 22pt;
	color: #bb0000;
	font-family: Times New Roman;
	font-style: italic;
	line-height: 22pt;
	margin-top: 20;
	margin-bottom: 10px;
}

h5 {
	font-size: 13pt;
	color: #bb0000;
	line-height: 13pt;
	margin-bottom: -12px;
}

/* Style for the piano links */
div.piano_links {
	float:left; 
	width:99; 
	height:450; 
        position:fixed; 
        z-index:1; 
        left:0px; 
        top:0px
}

/* Styles used in admin pages to indicate if a page has been previewed or overridden by a preview */
.link_unpreviewed, .link_unpreviewed a:link, .link_unpreviewed a:hover, .link_unpreviewed a:visited{
  color: #0000bb;
  display: inline;
}

.link_previewed, .link_previewed a:link, .link_previewed a:hover, .link_previewed a:visited{
  color: #00dd00;
  display: inline;
  font: bold;
}

.link_suppressed_by_preview, .link_suppressed_by_preview a:link, .link_suppressed_by_preview a:hover, .link_suppressed_by_preview a:visited{
  color: #dd2020;
  display: inline;
  font: italic;
}

/* The various 'flash' styles are applied to messages that can be 'flashed' to the user (like the one you see when you save
a content file, or when a user logs in either successfully or unsuccessfully). */
div.flashInfo,div.flashNotice,div.flashError,div.flashAlert {
   width: 100%;
   top: 0px;
   position: relative;
   text-align: center;
}
div.flashInfo {
   background-color: #55ee55;
}
div.flashNotice {
   background-color: #00ff00;
}
div.flashError {
   background-color: #ff0000;
}
div.flashAlert {
   background-color: #ff0000;
}


/* sampleLinks is used in the tables of images */
.sampleLinks {
	font-size: 8pt;
	color: #ffffff;
}

/* copyright is the style used by the copyright notice at the bottom of the page. */
.copyright {
	font-size: 7pt;
}

/* bottomLinks is used by the links to the pages that appear at the bottom of the page. */
.bottomLinks {
	font-size: 9pt;
}

/* L2 is the style being used for links within pages */
.L2:link {color: #442200; font: italic bold 10pt times new roman}
.L2:visited {color: #aa5555; font: italic bold 10pt times new roman}
.L2:hover {color: #ff0000; font: italic bold 10pt times new roman}

/* command for this in a script is <p class="margin"> */
p.margin {margin-left: 5px}

/* linkText is used for the piano links */
.linkText:link {color: #000000; text-decoration: none }
.linkText:visited {color: #000000; text-decoration: none }
.linkText:hover {color: #000000; text-decoration: none }

.linkText {
	font-size: 8pt;
	font-family: Times New Roman,Helvetica,Michaelmas,Verdana,Arial;
	color: Brown; 
	
	left: 0px; width: 75px; 
	
	text-align: right;

	padding-left: 0;
	float:left; 
	position:absolute; 
	z-index:2; 
	background-color:Transparent;
}

/* 'content' is applied to the div for the main content (so everything inside a HTML content file has these styles by default unless overridden elsewhere) */
.content {
	background-color:Transparent;
	margin-left: 78px;
	margin-right: 0px;
	padding: 1em;
	position: relative; 
	top: 0;
}

/* homeColumns is applied to the two columns of text in the home page */
.homeColumns {
	background-color:Transparent;
	color:Brown;
	margin-right: 0px;
	padding: 1em;
	margin-top: -10px;
}