*{
	margin:0;
	padding:0;
}

html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:transparent; text-align:left;}
body{background:#000;}
#background{position:absolute; z-index:-1; height:100%; top:0%; }

#fixed {position:absolute;  bottom:0; left:0px; width:100%; z-index:10; color:#fff; padding:30px 0; background:#000; opacity:0.4;}
h1{margin:0 30px;}

#shim {
	visibility: hidden;
	width: 100%;
	height: 50%;                                                                     /* Bump div#blueBox down half the height of the screen. */
	margin-top: -134px;                                                              /* Half the height of div#blueBox. */
	float: left;
}

#content {

	background: transparent url(letters.png) center top no-repeat;
	width: 480px;
	height: 268px;
	clear: both;
	z-index:100;
	margin:0 auto;
	position: relative;
	top: -134px;
	position: static;
	text-indent:-999px;
	overflow:hidden;

}

h1{width:0; height:0;}
p{width:0; height:0; position:relative;}

ul{
	list-style-type:none;
	position:relative;
	height:186px;
	
}

ul li a.writing, ul li a.reading, ul li a.photos{
	display:block;
	position:absolute;
	top:20px; left:20px;
	width:40px; height:40px;

}
ul li a.writing{left:187px; top:80px; width:91px; height:30px; }
ul li a.writing:hover{background:transparent url(letters.png) -185px -270px no-repeat;}
ul li a.reading{left:295px; top:80px; width:184px; height:30px; }
ul li a.reading:hover{background:transparent url(letters.png) -293px -270px no-repeat;}
ul li a.photos{left:2px; top:140px; width:132px; height:26px;}
ul li a.photos:hover{background:transparent url(letters.png) 0px -330px no-repeat;}

a.mail{
	position:absolute;
	display:block;
	width:248px;
	height:22px;
	top:60px;
	left:233px;
}
a.mail:hover{background:transparent url(letters.png) -230px -358px no-repeat;}