/* set up the font to be used for the page */
body {
  	font-family: tahoma; arial, sans-serif;
  	margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
	}

#Header {
	width:400px;
	margin:0px auto; /* Right and left margin widths set to "auto" */
	text-align:left; /* Counteract to IE5/Win Hack */
	padding:15px;
	}
#Content {
	width:400px;
	margin:0px auto; /* Right and left margin widths set to "auto" */
	text-align:left; /* Counteract to IE5/Win Hack */
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%
	}
#Content_Text {
	width:800px;
	margin:0px auto; /* Right and left margin widths set to "auto" */
	text-align:left; /* Counteract to IE5/Win Hack */
	padding:15px;
	border:1px dashed #333;
	background-color:#eee;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%
	
	}


/* set the size of the definition list <dl> and add the background image */
#imap {
  	display:block; 
  	width:400px; 
  	height:152px; 
  	background:url(images/matrix_transform.png) no-repeat; 
  	position:relative;
  	}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  	display:block; 
  	width:400px; 
  	height:0; 
  	padding-top:152px; 
 	overflow:hidden; 
  	position:absolute; 
  	left:0; 
  	top:0; 
  	background:transparent url(images/matrix_transform_hover.png) no-repeat 400px 400px; 
  	cursor:default;
  	}

/* the hack for IE pre IE6 */
* html #imap a#title {
  	height:240px;
  	he\ight:0;
  	}

/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  	background-position: 0 0; 
  	z-index:10;
  	}

/* place the <dd>s in the correct absolute position */
#imap dd {
  	position:absolute; 
  	padding:0; 
  	margin:0;
  	}

#imap #pica {
  	left:46px; 
  	top:32px; 
  	z-index:20;
  	}

#imap #picb {
  	left:119px; 
  	top:32px; 
  	z-index:20;
  	}

#imap #picc {
  	left:115px; 
  	top:83px; 
  	z-index:20;
  	}

#imap #picd {
  	left:209px; 
  	top:42px; 
  	z-index:20;
  	}

#imap #pice {
  	left:208px; 
  	top:91px; 
  	z-index:20;
  	}

#imap #picf {
  	left:42px; 
  	top:82px; 
  	z-index:20;
  	}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#resume {
  	display:block; 
  	width:66px; 
  	height:32px; 
  	background:transparent url(images/matrix_green_hover.png) -100px -100px no-repeat; 
  	text-decoration:none; 
  	z-index:20;
  	}

#imap a#Research {
  	display:block; 
  	width:59px; 
  	height:32px; 
  	background:transparent url(images/matrix_pink_hover.png) -100px -100px no-repeat; 
  	text-decoration:none; 
  	z-index:20;
  	}

#imap a#pubs {
  	display:block; 
  	width:69px; 
  	height:32px; 
  	background:transparent url(images/matrix_orange_hover.png) -100px -100px no-repeat; 
  	text-decoration:none; 
  	z-index:20;
  	}

#imap a#classes {
  	display:block; 
  	width:67px; 
  	height:30px; 
  	background:transparent url(images/matrix_purple_hover.png) -100px -100px no-repeat; 
  	text-decoration:none; 
  	z-index:20;
  	}

#imap a#about {
  	display:block; 
  	width:30px; 
  	height:27px; 
  	background:transparent url(images/matrix_springgreen_hover.png) -100px -100px no-repeat; 
  	text-decoration:none; 
  	z-index:20;
  	}

#imap a#contact {
  	display:block; 
  	width:30px; 
  	height:29px; 
  	background:transparent url(images/matrix_blue_hover.png) -100px -100px no-repeat; 
  	text-decoration:none; 
  	z-index:20;
  	}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }

/* move the link background image to position 0 0 when hovered */
#imap a#resume:hover, #imap a#Research:hover, #imap a#pubs:hover, #imap a#classes:hover, #imap a#about:hover, #imap a#contact:hover {
  	background-position:0 0;
  	}

/* define the common styling for the span text */
#imap a:hover span {
  	position:absolute;  
  	width:388px; 
  	display:block; 
  	font-family:arial; 
  	font-size:12px; 
  	background:#fff; 
  	color:#000; 
  	border:1px solid #000; 
  	padding:5px;
  	}
/* the hack for IE pre IE6 */
* html #imap a:hover span {
  	width:400px; w\idth:388px;
  	}

/* move the span text to a common position at the bottom of the image map */
#imap a#resume:hover span {
  	left:-45px; top:200px;
  	}

#imap a#Research:hover span {
  	left:-120px; top:200px;
  	}

#imap a#pubs:hover span {
  	left:-45px; top:150px;
  	}

#imap a#classes:hover span {
  	left:-120px; top:150px;
  	}

#imap a#about:hover span {
  	left:-215px; top:190px;
  	}

#imap a#contact:hover span {
  	left:-215px; top:140px;
  	}
	
/* add the style for the link span text - first line */
#imap a span:first-line {
  	font-weight:bold; 
  	font-style:italic;
  	}