.pencil-index {
width: 200px;
float: right;
clear: none;
margin-right: 20px;
margin-top: 23px;
background: url(pencilmenu/graphpaper.png) repeat;
}
.pencil-index a{
outline: none;
border: none;
text-decoration: none;
}
.tape{
width: 92px;
height: 60px;
position: relative;
float: left;
top: -30px;
left: 52px;
background: url(pencilmenu/tape.png) no-repeat;
}
.pencils{
width: 200px;
float: left;
}
.tops{
width: 40px;
overflow: hidden;
height: 206px;
}
.wood{
width: 40px;
overflow: hidden;
height: 490px;
}
.logo{
width: 40px;
height: 50px;
overflow: hidden;
margin-top: 200px;
}
.font{
width: 40px;
height: 200px;
overflow: hidden;
margin-top: 50px;
}
.pencil1, .pencil2, .pencil3, .pencil4, .pencil5{
width: 40px;
float: left;
clear: none;
position: relative;
bottom: -40px;
z-index:1;
}
.pencil1 .tops{
background: url(pencilmenu/penciltops.png) left top;
}
.pencil1 .wood{
background: url(pencilmenu/pencil-repeat-y.png) repeat-y left top;
}
.pencil2 .tops{
background: url(pencilmenu/penciltops.png) -40px top;
}
.pencil2 .wood{
background: url(pencilmenu/pencil-repeat-y.png) repeat-y -40px top;
}
.pencil3 .tops{
background: url(pencilmenu/penciltops.png) -80px top;
}
.pencil3 .wood{
background: url(pencilmenu/pencil-repeat-y.png) repeat-y -80px top;
}
.pencil4 .tops{
background: url(pencilmenu/penciltops.png) -120px top;
}
.pencil4 .wood{
background: url(pencilmenu/pencil-repeat-y.png) repeat-y -120px top;
}
.pencil5 .tops{
background: url(pencilmenu/penciltops.png) right top;
}
.pencil5 .wood{
background: url(pencilmenu/pencil-repeat-y.png) repeat-y right top;
}
.pencil1 .logo{
background: url(pencilmenu/logos-sprite.png) no-repeat left top;
}
.pencil2 .logo{
background: url(pencilmenu/logos-sprite.png) no-repeat -40px top;
}
.pencil3 .logo{
background: url(pencilmenu/logos-sprite.png) no-repeat -80px top;
}
.pencil4 .logo{
background: url(pencilmenu/logos-sprite.png) no-repeat -120px top;
}
.pencil5 .logo{
background: url(pencilmenu/logos-sprite.png) no-repeat right top;
}
.pencil1 .font{
background: url(pencilmenu/fonts-sprite.png) no-repeat left top;
}
.pencil2 .font{
background: url(pencilmenu/fonts-sprite.png) no-repeat -40px top;
}
.pencil3 .font{
background: url(pencilmenu/fonts-sprite.png) no-repeat -80px top;
}
.pencil4 .font{
background: url(pencilmenu/fonts-sprite.png) no-repeat -120px top;
}
.pencil5 .font{
background: url(pencilmenu/fonts-sprite.png) no-repeat right top;
}
.foot{
z-index:2;
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
background: #fffff8;
float: right;
}