/* remove browser default padding */
html, body, h1, p, img {
	padding: 0;
	margin: 0;
}

/* use a reversed color style with arial fonts */
body {
	background: #000;
	padding: 24px;
	font-family: arial, sans-serif;
	color: #ddd;
}

h1 {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 1em;
}

/* put the text in a box */
p {
	border: solid 1px #555;
	background: #333;
	padding: 1.5em;
	margin-bottom: 1.5em;
}

/*================= rules for the imageLinks section ==================*/
/*
 now that we have the images wraped in a div with the "imageLinks" id
 we can easily style just the elements within.
*/

#imageLinks a {
	/*
	 "a" is an "inline" element (treated like text) by default and images 
	 are "block" element so for proper rendering of images as links we tell
	 the a to be like an image, not text, this also solves some rendering 
	 oddities but we also have to float the images left so they line up
	 like before rather than stack on top of each other in a single column.
	*/
	display: block; 
	float: left;

	/*
	 moved the margin here to the a instead of the img becasue the margins on
	 the img became clickable which was odd.
	*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

#imageLinks img {
	border: solid 1px #333;
}