html {
	min-height: 100%; 
	margin-bottom: 1px;
	}
body {
	margin:0; 
	padding:0; 
	text-align:center; 
	font-family:Georgia,"Times New Roman",Times,serif; 
	color:#fff; 
	background-color:#000;
	}
#wrapper {
	width:696px; 
	margin:30px auto; 
	font-size:62.5%; 
	text-align:left; 
	overflow:hidden; 
	background-color:#333;
	}
#pencils {
	width:308px; 
	height:360px; 
	margin:10px auto 30px auto; 
	padding:20px; 
	background-color:#fff; 
	overflow:hidden;
	}

/* main heading style */
#wrapper h1 {margin: 10px 0; text-align:center; font-size:2.4em; color:#9cce31;}
	
/* list styles */
#pencils ul {margin:0; padding:0; list-style:none;}
#pencils li {
	margin:0; 0; 
	list-style:none; 
	height:360px; 
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; 
	font-size:1.2em;
	text-align:center;
	}

/* pencil numbering */
#pencils li em{display:block; padding-top:340px; font-weight:bold; font-style:normal;}

/* pre-load hover background images */
#pencils img {position:absolute; left:-5000px; top:-5000px}

/* background image styles */
#pencil-1 {float:left; background: url(../images/pencil-1g.png) no-repeat bottom left; width:25px;}
#pencil-2 {float:left; background: url(../images/pencil-2g.png) no-repeat bottom left; width:26px;}
#pencil-3 {float:left; background: url(../images/pencil-3g.png) no-repeat bottom left; width:25px;}
#pencil-4 {float:left; background: url(../images/pencil-4g.png) no-repeat bottom left; width:26px;}
#pencil-5 {float:left; background: url(../images/pencil-5g.png) no-repeat bottom left; width:26px;}
#pencil-6 {float:left; background: url(../images/pencil-6g.png) no-repeat bottom left; width:26px;}
#pencil-7 {float:left; background: url(../images/pencil-7g.png) no-repeat bottom left; width:26px;}
#pencil-8 {float:left; background: url(../images/pencil-8g.png) no-repeat bottom left; width:26px;}
#pencil-9 {float:left; background: url(../images/pencil-9g.png) no-repeat bottom left; width:26px;}
#pencil-10 {float:left; background: url(../images/pencil-10g.png) no-repeat bottom left; width:25px;}
#pencil-11 {float:left; background: url(../images/pencil-11g.png) no-repeat bottom left; width:26px;}
#pencil-12 {float:left; background: url(../images/pencil-12g.png) no-repeat bottom left; width:25px;}

/* hover styles - change and move background image */
#pencil-1:hover, #pencil-1.sfhover{background: url(../images/pencil-1.png) no-repeat top left;}
#pencil-2:hover, #pencil-2.sfhover {background: url(../images/pencil-2.png) no-repeat top left;}
#pencil-3:hover, #pencil-3.sfhover {background: url(../images/pencil-3.png) no-repeat top left;}
#pencil-4:hover, #pencil-4.sfhover {background: url(../images/pencil-4.png) no-repeat top left;}
#pencil-5:hover, #pencil-5.sfhover {background: url(../images/pencil-5.png) no-repeat top left;}
#pencil-6:hover, #pencil-6.sfhover {background: url(../images/pencil-6.png) no-repeat top left;}
#pencil-7:hover, #pencil-7.sfhover {background: url(../images/pencil-7.png) no-repeat top left;}
#pencil-8:hover, #pencil-8.sfhover {background: url(../images/pencil-8.png) no-repeat top left;}
#pencil-9:hover, #pencil-9.sfhover {background: url(../images/pencil-9.png) no-repeat top left;}
#pencil-10:hover, #pencil-10.sfhover {background: url(../images/pencil-10.png) no-repeat top left;}
#pencil-11:hover, #pencil-11.sfhover {background: url(../images/pencil-11.png) no-repeat top left;}
#pencil-12:hover, li #pencil-12.sfhover {background: url(../images/pencil-12.png) no-repeat top left;}