body {
	margin: 0;
	padding: 0;
	background-color: #b9d3ee;	
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	border-top: 2px solid #2A4F6F;
} 

a:link { color: #9e0b0e; text-decoration: none }
a:visited { color: #9e0b0e; text-decoration: none }
a:hover { color: #b9d3ee;	background: #9e0b0e; }	
 

/* This is the Header, ie. this is your banner jpg that has your name and the upper part of the bar. This allows its hight top to bottom. Tells it how far in and from the top to start. */
#header {
	height: 10em;
}
#header .strapline {
	float: right;
	margin-right: 2em;
	margin-top: 0.5em;
}
#header .logo {
	float: left;
	margin-left: 3em;
	margin-top: 0.5em;
}  
 
/* This is the side bar image. This positions it.*/

#side {
	position: absolute;
	Top: 4.12em;
	left: 56.20em;
	width: 10em;
 } 
 
 
 /* This is the navigation bar that is up above the blue line. This not only positions it, but also provides the look of the links.  */
#nav {
	position: absolute;
	top: 2.5em;
	left: 30em;
	width: 30em;
}
#nav ul {
	list-style: none;
	margin-left: 1em;
	padding-left: 0;
}
#nav li {
	font-size: 80%;
	border-bottom: 1px dotted #B2BCC6;
	margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
	text-decoration:none;
	color: #9e0b0e;
	background-color: transparent;
}
#nav a:hover {
	color: #b9d3ee;	background: #9e0b0e;
}
#nav h2 {
	font: 110% Georgia, "Times New Roman", Times, serif;
	color: ffffff;
	background-color: transparent;
	border-bottom: 1px dotted #cccccc;
}
 


/* Mark, here is the agent that controls the comedy and drama pages. You do not need to change anything here to make additions or changes to you demo pages. */
#albumlist {
	list-style-type: none;
	width: 800px;
	
}
#albumlist li {
	Float: left;
	margin-left: 60px;
	margin-bottom: 10px;
	font: bold 0.8em Georgia, "Times New Roman", Times, serif;
	color: #333333;
}
#albumlist img {
	display: block;
	border: 1px solid #333300;
}


/* Box1 is the main text box on the index page. This is the box that has all the stuff you will want to update. */
#box1 {
	position: absolute;
	top: 10em;
	left: 3em;
	width: 475px;
	background-color: #b9d3ee;
	}

#box1 h2 {
	font: 130% "Times New Roman", Times, serif; color: black; 	
 }
 
 /* Box2 is your number 1 picture. The big one. This positions it, and also limits it. The width of the box is 300px, which is why your picture is 300px wide. */
 #box2 {
	position: absolute;
	top: 5em;
	left: 35em;
	width: 300px;
	background-color: #b9d3ee;
	}

/* Box3 is the smaller picture on the index page. */
 #box3 {
	position: absolute;
	top: 37em;
	left: 38em;
	width: 200px;
	background-color: #b9d3ee;
	}
  
/* Box 4 is your text box for your resume page. */ 
#box4 {
	position: absolute;
	top: 7em;
	left: 3em;
	width: 800px;
	background-color: #b9d3ee; 
	/*border: 2px solid #000000;*/
	}

#box4 {
	font: 100% "Times New Roman", Times, serif; color: Black; 	  
   }
/* Box5 is the little box on the resume page that hold the information for your reps. */ 
#box5 {
	position: absolute;
	top: -2em;
	left: 25em;
	width: 400px;
	background-color: #b9d3ee; 
	/*border: 2px solid #000000; */
	}

#box5 {
	font: 100% "Times New Roman", Times, serif; color: Black; 	 
		}
#box6 {
	position: absolute;
	top: 7em;
	left: 10em;
	width: 638px;
	background-color: #b9d3ee; 
	/*border: 2px solid #000000; */
	}

#box6 {
	font: 100% "Times New Roman", Times, serif; color: Black; 	 
		}
		
#box7 {
	position: absolute;
	top: 7em;
	left: 08em;
	width: 174px;
	background-color: #b9d3ee; 
	/*border: 2px solid #000000; */
	}

#box7 {
	font: 100% "Times New Roman", Times, serif; color: #9e0b0e; 	 
		}	  

#box8 {
	position: absolute;
	top: 7em;
	left: 37em;
	width: 174px;
	background-color: #b9d3ee; 
	/*border: 2px solid #000000; */
	}

#box8 {
	font: 100% "Times New Roman", Times, serif; color: #9e0b0e; 	 
		}
		
#box9 {
	position: absolute;
	top: 14em;
	left: 365px;
	width: 174px;
	background-color: #b9d3ee; 
	/*border: 2px solid #000000; */
	}

#box9 {
	font: 100% "Times New Roman", Times, serif; color: #9e0b0e; 	 
		}
		
		
		
/* These are the boxes for the pics page. Box10 is the large image. All others are the smaller thumbnail images. */
#box10 {
	position: absolute;
	top: 10em;
	left: 2em;
	width: 300px;
	background-color: #b9d3ee;
	}
#box11 {
	position: absolute;
	top: 7em;
	left: 23em;
	width: 300px;
	background-color: #b9d3ee;
	}
#box12 {
	position: absolute;
	top: 9em;
	left: 34em;
	width: 150px;
	background-color: #b9d3ee;
	}

#box13 {
	position: absolute;
	top: 7em;
	left: 45em;
	width: 150px;
	background-color: #b9d3ee;
	}

#box14 {
	position: absolute;
	top: 25em;
	left: 23em;
	width: 150px;
	background-color: #b9d3ee;
	}

#box15 {
	position: absolute;
	top: 23em;
	left: 34em;
	width: 150px;
	background-color: #b9d3ee;
	}

#box16 {
	position: absolute;
	top: 25em;
	left: 45em;
	width: 150px;
	background-color: #b9d3ee;
	}