/******************************************************************/
/* Everything                                                     */
/******************************************************************/

	/* This sets the font for every page element - if "Arial" does not exist, the font is set to "Helvetica". If "Helvetica" does not exist, "sans-serif" is used */
	/* This is a kind of fall-back system as a user may not have "Arial" or "Helvetica" on their computer, but they will definetly have "sans-serif" */
		* {
			font-family: Arial, Helvetica, sans-serif;
		}

/******************************************************************/
/* Main page sections                                             */
/******************************************************************/

	/* This styles the table that contains a page */
		table#pagebody{
		/* Applys a 1 pixel black border */
			border: 1px #000 solid;
		/* Displays the site in the middle of the browser window */
			margin: 30px auto 30px auto;
		/* Width of the website area */
			width: 750px;
		}

	/* This styles the top banner area */
		td#topbanner{
		/* Applys a 1 pixel black border at the bottom of the banner area to sepereate it from the menu */
			border-bottom: 1px #000 solid;
		/* Sets the height of the banner area */
			height: 120px;
		/* This means that the banner takes up all available "width" space, as a value is not specifically set */
			display: block;
		/* Background image */
			background: transparent url(banner.png) left center no-repeat;
		}

	/* This styles the table that holds the menu - it is not the actual menu */
		table#menubar{
		/* Sets the height of the menu area */
			height: 30px;
		/* Sets the width of the menu area */
			width: 750px;
		/* Centres the menu horizontally */
			margin: 0 auto;
		/* This means that the banner takes up all available "width" space, as a value is not specifically set */
			display: block;
		}
		
	/* This styles the main content area */
		td#contentarea{
		/* Makes the height of the content area flexible */
			height: auto;
		/* Moves vertical alignment from the middle to the top */
			vertical-align: top;
		/* Displays a border at the bottom of the banner area - to sepereate it from the main content */
			border-bottom: 1px #000 solid;
		/* Makes the content not "hug" the edges */
			padding: 15px;
		/* Background colour */
			background-color: #EEE;
		}

	/* The footer area */
		td#footer{
		/* Sets the height of the footer area */
			height: 40px;
		/* Positions the text in the vertical centre */
			line-height: 40px;
		/* Positions the text in the horizontal centre */	
			text-align: center;
		/* Background color */
			background-color: #333; /* Colour is spelt wrong as you have to spell it the American way */
		/* Text colour */
			color: #FFF; /* Colour is spelt wrong as you have to spell it the American way */
		}

		
/******************************************************************/
/* Menu                                                           */
/******************************************************************/

	/* The table holding the menu items */
		tr#menu{
		/* Applys a 1 pixel black border at the bottom */	
			border-bottom: 1px #000 solid;
		/* Background colour */
			background-color: #BEB7EF;
		/* Sets the width of the menu */
			width: 750px;
		/* This means that the banner takes up all available "width" space, as a value is not specifically set */
			display: block;
		}

	/* Styles the menu item links */
		tr#menu td a{
		/* Sets the width of a menu item */
			width: 124px;
		/* Aligns text within each menu item in the horizontal centre */
			text-align: center;
		/* This means that it is displayed like a block - takes up all available room within set boundaries */
			display: block;
		/* Positions the text in the vertical centre */
			line-height: 30px;
		/* Makes the menu items sit horizontally next to each other */
			float: left;
		/* Remove the underline from the links */
			text-decoration: none;
		/* Makes the text black */
			color: #000;
		/* Apply a border to the right and bottom sides */
			border-right: 1px #000 solid;
			border-bottom: 2px #000 solid;
		}

	/* Styles the menu item links when hovered over*/
		tr#menu td a:hover{
		/* Background colour */
			background-color: #333;
		/* Text colour */
			color: #FFF;
		/* Changes the colour of the bottom border */
			border-bottom-color: #FFF;
		}

	/* Styles a menu item when it is marked as the section / page currently being viewed */
		tr#menu td a.selectedmenuitem{
		/* Apply a border to the bottom side */
			border-bottom-color: #FFF;
		/* Background colour */
			background-color: #000;
		/* Text colour */
			color: #FFF;
		}

	/* Styles a menu item when it is marked as the section / page currently being viewed, and hovered over */
		tr#menu td a.selectedmenuitem:hover{
		/* Background colour */
			background-color: #333;
		}

	/* Styles the laat menu item on the menu seperate from the others */
		tr#menu td a.lastmenuitem{
		/* Removes the right border - not needed as the menu holder has a border */
			border-right: none;
		/* Since the 1 pixel border has been removed, the width can be 1 pixel larger */
			width: 125px;
		}

	/* This is a little fix required because Internet Explorer screws up the menu - this fix makes it display correctly */
		.ie_fix {
		   display: none;
		}

/******************************************************************/
/* Common elements                                                */
/******************************************************************/
	
	/* A paragraph of text */
		p{
		/* Gap between paragraphs */
			margin-bottom: 20px;
		/* Font size of a paragraph of text */
			font-size: 16px;
		/* Line height - this is larger than the font size, resulting in a gap between lines - making text more readable */
			line-height: 24px;
		}

	/* A hyperlink */
		a{
		/* Sets the colour of links */
			color: #003399;
		}

	/* A hyperlink hovered over*/
		a:hover{
		/* Colour of a link when hovered over */
			color: #0099FF;
		}
		
	/* An un-ordered list - used to list poem names */
		ul{
		/* Applys a gap to left and top */
			margin-left: 20px;
			margin-top: 5px;
		/* Contained items are displayed with a "circle" bullet point */
			list-style: circle inside;
		}
		
	/* List items within a list */
		ul li{
		/* Applys spacing between items */
			margin-bottom: 5px;
		}


/******************************************************************/
/* Quotes                                                         */
/******************************************************************/
	
	/* The table that holds all of the elements that make up a quote */
		table.quoteholder{
		/* Sets a width */
			display: block;
			width: 430px;
		/* Allows for variable height */
			height: auto;
		/* This margin centres the quote and gives a little bit of vertical spacing */
			margin: 0 auto 20px auto;
		}
	
	/* Styles the table cell that holds the opening quote symbol */
		td.openingquote{
		/* Sets the width */
			width: 40px;
		/* Moves vertical alignment from the middle to the top */
			vertical-align: top;
		}

	/* The opening quote */
		td.openingquote span{
		/* Sets a large font size in a stylish font for the opening quote symbol */
			font: Bold 50px Georgia, serif;
		}
	
	/* The quote text table cell */
		td.quote{
		/* Sets a width */
			width: 350px;
		/* Sets a font size the same as standard text */
			font-size: 16px;
		}
	
	/* Styles the table cell that holds the closing quote symbol */
		td.closingquote{
		/* Sets a width */
			width: 40px;
		/* Moves vertical alignment from the middle to the bottom */ 
			vertical-align: bottom;
		}

	/* The closing quote */
		td.closingquote span{
		/* Sets a large font size in a stylish font for the closing quote symbol */
			font: Bold 50px Georgia, serif;
		/* This pushes the symbol down below the quote text */
			margin-bottom: -30px;
			display: block;
		}

	/* The table cell that holds the quotes source */
		td.source{
		/* Sets a width */
			width: 430px;
		/* Makes the text italics */
			font-style: italic;
		/* Font size - slightly smaller that the quote itself */
				font-size: 14px;
		/* Aligns text to the right hand side */
				text-align: right;
		/* Gives a little bit of spacing above the source */
				padding-top: 10px;
		}

/******************************************************************/
/* The poem topic list                                            */
/******************************************************************/

	/* The list table */
		table#poemlist{
		/* Sets a width */
			width: 600px;
		/* Applys a 1px black border */
			border: 1px #000 solid;
		/* Centres the table and gives a little vertical spacing */
			margin: 10px auto;
		}
	/* The table "heads" - the sections that contain the years */
		table#poemlist thead{
		/* Background colour */
			background-color: #333;
		/* Font colour */
			color: #fff;
		/* Sets a height */
			height: 50px;
		}

	/* This text within the table "heads" show the year e.g. "Year 1" */
		table#poemlist thead span.year{
		/* Sets the font size */
			font-size: 14px;
		}
	/* This text within the table "heads" show the yearse.g. "2007- '08" */
		table#poemlist thead span.yeartoyear{
		/* Sets the font size */
			font-size: 12px;
		}

	/* A row in the table */
		table#poemlist tr{
		/* Applys a bottom border */
			border-bottom: 1px #000 solid;
		}

	/* A cell holding a month name */
		td.month{
		/* Background colour */
			background-color: #CCC;
		/* Sets a width */
			width: 100px;
		/* Padding gives spacing around the text */
			padding: 5px;
		/* Aligns text in the horizontal center */
			text-align: center;
		/* Applys a border to the right hand side */
			border-right: 1px #000 solid;
		}
		
	/* A cell holding a topic name */
		td.topic{
		/* Background colour */
			background-color: #DDD;
		/* Padding gives spacing around the text */
			padding: 5px;
		/* Aligns text to the left */
			text-align: left;
		}
		
/******************************************************************/
/* Special types of text                                          */
/******************************************************************/

	/* This div holds the headings  */
		div#headingarea{
		/* This means that it is displayed like a block - takes up all available room within set boundaries */
			display: block;
		/* Adds a gap below the header area */
			margin-bottom: 10px;
		}
	
	/* A heading - held within the headerarea */
		span.heading{
		/* Large font size */
			font-size: 24px;
		/* This means that it is displayed like a block - takes up all available room within set boundaries */
			display: block;
		/* Applys a bottom border */
			border-bottom: 1px #000 solid;
		}
	
	/* A sub-heading - held within the headerarea */	
		span.subheadings{
		/* Medium font size */
			font-size: 18px;
		/* This means that it is displayed like a block - takes up all available room within set boundaries */
			display: block;
		}

	/* Underlined text */
		.underlined{
			text-decoration: underline;
		}
		
	/* Italic text */
		.italic{
			font-style: italic;
		}
		
	/* Bold text */
		.bold{
			font-weight: bold;
		}

	/* Holds a poem */
		p.poemarea{
		/* This means that it is displayed like a block - takes up all available room within set boundaries */
			display: block;
		/* Background colour */
			background-color: #D7D0BC;
		/* Makes the text not hug the edges */
			padding: 5px;
		/* Sets a width */
			width: 475px;
		}