/* CSS Document */
<style type="text/css" media="screen">

* {
	padding : 0;
	margin : 0;
	border : 0;
	}

body {
	color:#333;
	background-color:#D81010;
	margin:20px;
	padding:0px;
	font:11px verdana, arial, helvetica, sans-serif;
	}

/* This define the style of a main header (uses the <h1> tag) */
h1 {
	margin:0px 0px 5px 0px;
	padding:0px;
	font-size:28px;
	font-weight:900;
	color:#ffffff;
	font:bold 28px/32px Verdana, Arial, Helvetica, sans-serif;
	}

/* This define the style of a secondary header (uses the <h2> tag) */
h2 {
	font:bold 22px/24px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 5px 0px;
	padding:0px;
	color: #000000;
	}

/* This defines the style of the body text (uses the <p> tag) */
p {
	font:12px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
	color: #ffffff;
	}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

/* This defines the styles for hyperlinks */
a {
	color: #f5f5f5;
	font: 14px/22px verdana, arial, helvetica, sans-serif;
	font-weight:600;
	}
a:link {color:#f5f5f5;}
a:visited {color:#c9c9c9;}
a:hover {background-color:#000000;}

/* This is the outer white dotted border */
#outer {
	position: relative;
	width: 80%;
	Height: auto;
	background-image: url(Images/Checkerboard.png);
	padding: 10px;
	margin: 10px auto 10px auto;
	}

/* This is the inner black dashed border */
#inner {
	position: relative;
	height: auto;
	background: #D81010;
	padding: 10px;
	}

/* This is the class used for all three center boxes.
I did not define a border, because then I can define a different style for different boxes on the page instead */
.content {
	position: relative;
	padding: 10px;
	}
	
/* This is for images that I want to "float" to the left of a content box.
FLoat means the text will wrap around the image. */
.image {
	float: left;
	}
	
/* These are for future development purposes */
#checkertop {
	}
	
#checkerbottom {
	}
	
#checkerleft {
	}
	
#checkerright {
	}