/* Global reset for most stuff */
* {
	margin: 0px;
	padding: 0px;
	border: none;
	border-collapse: collapse;
	list-style-type: none;
}
/* main body styles sets the page fonts etc */
body {
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #184C9A;
}
/* puts the overall page content inside a box, allows for more customisation */
#maincontainer {
	margin: 10px;
	padding: 0px;
	background: url(../../images/header_bg.jpg) repeat-x left top;
	border: 1px solid #7FCAF1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	min-width: 920px;	
}
/* page header stuff */
#maincontainer #header {
	color: #036;
	background: url(../../images/header_logo.jpg) no-repeat 99% top;
}
/* to add an image to the header replace this with an img url and then set the text indent to a silly high number */
#maincontainer #header h1 {
	padding: 10px;
	font: italic normal 250% "Arial Black", Gadget, sans-serif;
}
#maincontainer #header ul {
	display: block;
	background: #29b0ed url(../../images/menu_bg.jpg) repeat-x center top;
	border-top: 1px solid #29b0ed;
}
#maincontainer #header ul li {
	display: inline;
}
#maincontainer #header ul li a {
	display: inline-block;
	padding: 10px 20px;
	color: #174E9A;
	text-decoration: none;
	border-right: 1px solid #29b0ed;
}
#maincontainer #header ul li a:hover {
	background: #FFF;
	color: #18519D;
}
/* left column, usually for adverts or whatever */
#maincontainer #leftSide {
	display: block;
	margin: 10px 10px 10px 0px;
	padding: 5px;
	float: left;
	width: 120px;
}
/* right side column again can be used for adverts */
#maincontainer #rightSide {
	margin: 10px 0px 10px 10px;
	padding: 5px;
	width: 120px;
	float: right;
}
/* main page content box, I use the table definition so that it doesnt wrap around the left or right hand adverts but instead flows downwards */
#maincontainer #PageContent {
	display: table;
	margin: 0px;
	padding: 10px;
	background: url(../../images/content_bg.jpg) repeat-x left bottom;
	border-right: 1px dotted #CCC;
	border-left: 1px dotted #CCC;
}
/* general page content elements */
#maincontainer #PageContent p {
	font-size: 80%;
	line-height: 160%;
	margin: 10px;
}
#maincontainer #PageContent a {
	color: #9B1200;
	text-decoration: underline;
}
#maincontainer #PageContent h1 {
	font-size: 160%;
	color: #508DBC;
	margin-bottom: 10px;
}
#maincontainer #PageContent h2 {
	font-size: 140%;
	color: #4E84B0;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
#maincontainer #PageContent h3 {
	font-size: 120%;
	color: #4889CD;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 0px;
}
#maincontainer #PageContent ul {
	margin: 10px;
	font-size: 80%;
	line-height: 160%;
	padding: 10px;
}
#maincontainer #PageContent li {
	list-style: square;
}
/*the page footer styles, this element also works to ensure that the maincontainer clears the entire page content, which it wouldnt normally do with floats (a container div has no idea about the heights of any floats - although it really should) */
#maincontainer #footer {
	font-size: 80%;
	display: block;
	clear: both;
	color: #036;
	background: #DEF0FC;
}
#maincontainer #footer strong {
	display: block;
	padding: 20px;
	font-size: 140%;
	font-style: italic;
}
#maincontainer #footer em {
	padding: 5px 20px;
	display: block;
}

/* RSS feed listing styles */

#maincontainer #PageContent #rssFeed {
	margin-top: 10px;
	border-top: 1px dotted #CCC;
	padding-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
#maincontainer #PageContent #rssFeed .rssfeedItems {
	font-size: 70%;
	padding: 10px 0px;
	clear: both;
	line-height: 160%;
}
#maincontainer #PageContent #rssFeed .rssfeedItems img {
	float: left;
	margin: 0px 20px 20px 0px;
}
#maincontainer #PageContent #rssFeed .rssfeedItems a {
	color: #000;
	text-decoration: none;
}
#maincontainer #PageContent #rssFeed .rssfeedItems .rsstitles {
	font-size: 130%;
	color: #164992;
	display: block;
	margin-bottom: 10px;
}
#maincontainer #PageContent #rssFeed .rssfeedItems .rsstitles em {
	font-size: 80%;
	color: #000;
}