body {
	width: 100%;
	margin:	0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	background-color: #FFF;
}

	#events {
		background-color: #ffffff;
		font-size:1em;
		width:110px;
		margin-left: 1.0em;
		margin-top: 1em;
		/*float: left;*/
	}
	#events p {
		padding-top: 1em;
	}
	#events a {
		color: #000000;
	}
	#events a:hover {
		color: blue;
	}

	img {
		padding: 0;
		margin: 0;
		border:	none;
	}
	h1, h2, h3, p, ul, li, ol, blockquote {
		padding: 0;
		margin:	0;
	}
	a {
		color: #1E82B9;
	}
	a:hover {
		color: #EA581A
	}


/* 	The header styles the header text and image at the top of the layout */
#header {
	background-color: #333333;
}
	#heading {
		font-size:2.5em;
		font-weight:bold;
		color:#FFFFFF;
		padding-left:.5em;
		padding-top:.5em;
		padding-bottom:2px;
		background-color:#cA181A;
	}
	.sub_heading {
		color:#fff0a0;
		font-size:.7em;
	}
	#header #header_image {
		width:100%;
		height:120px;
		margin: 0 auto;
		background-attachment: scroll;
		background-image: url(../images/streetcar.jpg);
		background-repeat: no-repeat;
		background-position: left bottom;
		background-color:#ffffff;
	}

	
/*	The content wrapper holds the faded underground map image and sets the width of the content */
#content_wrapper {
	width:100%;
	height:233px;
	margin:0 auto;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: center top;
}

	/* The content div sets up the main content of the page, paragraphs, headings etc... */
	#content {
		margin-top: 0em;
		display: block;
		float:left;
		width:80%;
		padding-left: 1em;
		min-height:300px;
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-position: right top;
	}
		#content p {
			margin-top:1.5em;
			margin-left:0em;
			margin-right: 20px;
			color: #333333;
			font-size: 1em;
			line-height: 1.3em;
		}
		#content h1, h2, h3 {
			margin-top:1.5em;
		}
		#content ul {
			margin-top:1.5em;
			margin-left: 40px;
			list-style-type: disc;
			list-style-image: url(../images/list_10x10.gif);
		}
		#content ol {
			margin-top:1.5em;
			margin-left: 40px;
		}
		#content li {
			line-height:1.5em;
		}
		/* 	The blockquote styling is here, this includes a class called readmore, this allows a link to be placed
			at the bottom right of the blockquote */
		#content blockquote {
			float:left;
			width:500px;
			background-color: #CCCCCC;
			border-left-width: 4px;
			border-left-style: solid;
			border-left-color: #1E81B9;
			padding-bottom: 2px;
			padding-top: 2px;
			margin-left:20px;
			margin-top:1em;
			margin-bottom:1em;
		}
			#content blockquote .readmore {
				float:right;
				font-size:.8em;
				text-transform:uppercase;
				padding-top:1em;
				padding-right:10px;
			}
		
		/* 	The clases below controls the 2 column layout within the main content. */
		.column {
			width:280px;
			float:left;
		}
		.right {
			margin-left:20px;
			/* Use this space to individually style the right column */
		}
		.left {
			/* Use this space to individually style the left column */
		}


	/* The navigation is styled here */
	#navigation {
		display: block;
		float:left;
		clear:left;
		width:150px;
		min-height:300px; /* Minimum height is set to stop the shadow being cut off if not enough content is entered */
		border-right-width: 2px;
		border-right-style: none;
		border-right-color: #1E81B9;
		background-attachment: scroll;
		background-repeat: no-repeat;
		background-position: left top;
	}
		/* The menu is styled using an unordered list */
		#navigation ul {
			float:right;
			margin-bottom:2em;
			width:150px;
		}
		#navigation li {
			font-weight: bold;
			font-variant: normal;
			text-transform: uppercase;
			line-height:1.4em;
			list-style-type: none;
			text-align: center;
			margin-top:1.0em;
			padding-right:10px;
			background-attachment: scroll;
			background-repeat: no-repeat;
			background-position: right center;
		}
		#navigation li a {
			text-decoration:none;
			color: #000000;
		}
			/* 	The active class is to allow the 'current' link to be distinguished from other links This is set in the HTML by adding 'class="active"' to the link */
			#navigation li a:hover, #navigation li .active {
				text-decoration:underline;
				color: #EA581A;
			}
			
		/* Extra content boxes that can be placed in the navigation column can be styled here */
		#navigation .extra_content {
			background-image: _url(../images/CN-Tower.jpg);
			background-color: #ffffff;
			border-left-width: 0px;
			border-left-style: solid;
			border-left-color: #1E81B9;
			margin-bottom:1em;
			margin-left:10px;
			padding-right:10px;
			padding-top:3px;
			padding-bottom:3px;
			font-size:1em;
			width:145px;
			clear:both;
			float:right;
		}
			#navigation .extra_content h1 {
				display:block;
				text-align:center;
				text-transform:uppercase;
				font-size:1.2em;
				margin:0;
				background-color: white;
				line-height: 1.5em;
			}
			#navigation .extra_content p {
				padding:5px;
				margin-top:1.2em;
				margin-left:0px;
				margin-right:0px;
				margin-bottom:.2em;
				text-align:left-justify;
				border: dotted 1px #303030;
				background-color: #ffffff;
				color: #000000;
				-moz-opacity: 0.80;
				opacity: 0.80;
			}



	/* The footer is styled here */
	#footer {
		display: block;
		position: relative;
		clear:both;
		float:left;
		margin-top:2em;
		width:100%;
		line-height:1em;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #333333;
		padding-top:1.5em;
	}
		#footer p {
			line-height:2em;
			padding:0;
			margin:0;
			text-align:center;
		}
		#footer a {
			color:#000000;
		}
			#footer a:hover {
				color:#EA581A;
			}