/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
#page-wrap { width: 640px; margin: 20px auto; position: relative; }
a { text-decoration: none; color: black; }

.image-link { display: block; width: 640px; height: 460px; position: absolute; top: 0; left: 0; }

#one { background: url(../images/1.jpg) no-repeat; z-index: 2; }
#two { background: url(../images/2.jpg) no-repeat; }
#three { background: url(../images/3.jpg) no-repeat; }
#four { background: url(../images/4.jpg) no-repeat; }
#five { background: url(../images/5.jpg) no-repeat; }
#six { background: url(../images/6.jpg) no-repeat; }
#seven { background: url(../images/7.jpg) no-repeat; }
#eight { background: url(../images/8.jpg) no-repeat; }
#nine { background: url(../images/9.jpg) no-repeat; }
#ten { background: url(../images/10.jpg) no-repeat; }
#eleven { background: url(../images/11.jpg) no-repeat; }
#twelve { background: url(../images/12.jpg) no-repeat; }
#thirteen { background: url(../images/13.jpg) no-repeat; }
#fourteen { background: url(../images/14.jpg) no-repeat; }
#fifteen { background: url(../images/15.jpg) no-repeat; }
#sixteen { background: url(../images/16.jpg) no-repeat; }


#one span { position: absolute; left: 0; bottom: -35px; }
#two span { position: absolute; left: 0; bottom: -65px; }
#three span { position: absolute; left: 120px; bottom: -35px; }
#four span { position: absolute; left: 120px; bottom: -65px; }
#five span { position: absolute; left: 0; bottom: -95px; }
#six span { position: absolute; left: 0; bottom: -125px; }
#seven span { position: absolute; left: 120px; bottom: -95px; }
#eight span { position: absolute; left: 120px; bottom: -125px; }
#nine span { position: absolute; left: 240px; bottom: -35px; }
#ten span { position: absolute; left: 240px; bottom: -65px; }
#eleven span { position: absolute; left: 360px; bottom: -35px; }
#twelve span { position: absolute; left: 240px; bottom: -95px; }
#thirteen span { position: absolute; left: 480px; bottom: -35px; }
#fourteen span { position: absolute; left: 480px; bottom: -65px; }
#fifteen span { position: absolute; left: 360px; bottom: -95px; }
#sixteen span { position: absolute; left: 360px; bottom: -65px; }


.image-link span { width: 109px; display: block; height: 19px; padding: 5px; background: #eee; border: 1px solid #ccc; }
.image-link:hover { z-index: 100; }
.image-link:hover span { background: #ccc; }