@charset "utf-8";
/* CSS Document */

body {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	background-color: #606;
	margin: 0px;

/* width: auto; extends the wrapper the full width of the page */
}
#wrapper {
	width: auto;
}

/* margin: auto; positions the header in the centre width of the wrapper */
#header {
	color: #FFF;
	width: 950px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: auto;
}

/* content is like an inner wrapper in the layout that contains the the three following divs. This is the white area of the page */
#content {
	width: auto;
	color: #666;
	font-size: 16px;
	line-height: 26px;
	background-color: #FFF;
	margin: auto;
}

/* This div is used 3 times - once for each example on the page, like rows. Each one contains 2 content_box divs  */
.content_box_wrapper {
	width: 950px;
	margin-top: 15px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

/* There are 2 of these in each content_box_wrapper. Effectively, they create the columns within the content */
.content_box {
	width: 475px;
	float: left;
}

/* This is used to extend the content div downward to create the white background */
#content_footer {
	clear: both;
	height: 0px;
	width: auto;
}

/* This extends the wrapper down and around all content */
#footer {
	clear: both;
	width: 950px;
	color: #FFF;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: auto;
}

/* A compound selector to make the link text white */
#footer p a {
	color: #FFF;
}


h2 {
	font-size: 18px;
}
h1 {
	font-size: 36px;
}

/* List styling for the right hand column */
ul {
	list-style-type: none;
	margin-top: 56px;
}