/* this is the MESMAC microsite CSS template */

	/* this is the BODY - you can edit page colour and
	font style here: */

body {
	background-color: #fefdc5;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #B9271A;
	font-style: normal;
	font-weight: bold;
	line-height: normal;
}

	/* end of the BODY */

	/* these are the LINKS which appear in the body of the document
	(not the buttons). You can edit their colours */

a:link, a:visited {
	text-decoration: underline;
	color: #B9271A;
}
a:hover, a:active {
	text-decoration: underline;
	color: #CC3300;
}

	/* end of the LINKS */
	
	/* this is the HEADER, which is the logo which appears at the top
	of the page. You can replace the image with your microsite logo.
	Make sure the new logo is 746 pixels wide and 120 pixels high
	(if the logo is of a different height, you can alter the first
	number in "padding" to whatever the height is + 5 pixels (the
	extra 5 pixels is to leave a 5 pixel gap at the bottom))  */

#header {
	width: 746px;
	background-image: url(images/logo.gif);
	background-repeat: no-repeat;
	padding: 125px 0px 0px 0px;
}

	/* end of the HEADER */
	
	/* this is the SUBHEADING - you can edit the background colour of the bar
	and the font size and colour if you wish */

#subheading {
	display: block;
	width: 746px;
	margin-top: 5px;
	margin-left: 0px;
	background-color: #B9271A;
	color: #FFFFFF;
	padding: 4px 0px 4px 0px;
}

#subheading p {
	font-size: 0.7em;
	text-align: center;
}

#subheading a:link, #subheading a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

#subheading a:hover, #subheading a:active {
	text-decoration: underline;
	color: #FFFFFF;
}

	/* end of the SUBHEADING */
	
	/* These next blocks of CSS control the TOPMENU, that is the
	long menu of buttons which runs horizontally at the top under
	the header and subheading 
	You can edit the BACKGROUND-COLOUR (which is the colour of the
	background bar behind the buttons) in this first block:*/

#topmenu {
	display: block;
	width: 746;
	margin-top: 5px;
	background-color: #B9271A;
}

	/* Do NOT edit this next block, this simply removes bullets from
	the list and positions it nicely: */

#topmenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 4px;
	padding-bottom: 4px;
}

	/* Do NOT edit this next block either. This command makes list
	items appear next to each other horizontally instead of vertically: */

#topmenu li {
	display: inline;
}

	/* You can edit COLOUR (which is the font colour) and BACKGROUND-COLOUR
	(which is the background colour of the buttons) in this block: */

#topmenu a:link, #topmenu a:visited {
	padding: 3px 10px 3px 10px;
	color: #FFFFFF;
	background-color: #B9271A;
	text-decoration: none;
}

	/* You can edit this block. It controls the font colour and background
	of the buttons on rollover: */

#topmenu a:hover {
	colour: #FFFFFF;
	background-color: #CC3300;
}

	/* end of TOPMENU */
	
	/* These next blocks of CSS are the SIDEMENU, that is the buttons running down the
	lefthand side of the page. There is not much to edit in this first block unless
	you want to change the font: */
		
#sidemenu {
	width: 120px;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 5px;
	float: left;
	padding: 0 0 0 0;	
}

	/* Do NOT edit this next block (it simply removes the bullets from
	list items) */

#sidemenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

	/* This next block controls the line which appears at the bottom of each
	button. You can change the colour or make it fatter by increasing the
	pixels. Otherwise ignore it. */

#sidemenu li {
	border-bottom: 1px solid #FFFFFF;
}

	/* In this next block you can edit the COLOR (of the font) and the
	BACKGROUND-COLOUR of the buttons */

#sidemenu li a {
	display: block;
	padding: 25px 5px 25px 5px;
	width: 110px;
	color: #FFFFFF;
	background-color: #B9271A;
	text-decoration: none;
}

	/* You can change rollover colours here: */

#sidemenu li a:hover {
	color: #FFFFFF;
	background-color: #CC3300;
}

	/* Ignore this: */

#sidemenu img {
	padding-bottom: 5px;
}

	/* end of SIDEMENU */
	
	
	/* This is the end of all the main bits you'll need to edit for the page design. 
	There are some additional classes you can edit below, should you want to use them: */
	
	/* This is the SECTIONHEADING class. You may want to edit BACKGROUND-COLOUR */

.sectionheading {
	display: block;
	width: 580px;
	margin-top: 5px;
	margin-bottom: 2px;
	margin-left: auto;
	margin-right: auto;
	background-color: #B9271A;
	color: #FFFFFF;
	text-align: left;
	padding-left: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
}

	/* This is the ITEM class. Use it directly after the SECTIONHEADING class to avoid a
	large line break. It is also lighter than normal text. You can change that by changing
	FONT-WEIGHT to BOLD. */
	
.item {
	display: block;
	width: 580px;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	font-weight: normal;
}

	/* DO NOT EDIT ANYTHING BELOW THIS LINE */

p {
	text-align: left;
	margin-left: 15px;
	margin-right: 15px;
}

p.center {
	text-align: center;
}

li.left {
	text-align: left;
	}

#wrap {
	width: 746px;
	margin-left: auto;
	margin-right: auto;
}

#main {
	width: 610px;
	margin-top: 5px;
	float: right;
	background-position: 5px 5px;
	padding: 5px 5px 5px 5px;
}

#pdf {
	display: block;
	width: 580px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

#pdf img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

#pdf p {
	clear: both;
	text-align: left;
}

.clear {
	clear: both;
}

.title {
	font-size: 1.2em;
}