/* cross-fading_disjointed_image_rollover.css */

/* Layout */
#sectionTop * {margin:0; padding:0; border:0 solid; list-style:none}
#sectionTop {background-image:url(top.jpg); background-repeat:no-repeat; position:relative; width:560px; height:200px; margin:1em auto; overflow:hidden}

/* Disjointed image positioning (css-sprite) */
.top1 {background-position:0 0}
.top2 {background-position:0 -200px}
.top3 {background-position:0 -400px}
.top4 {background-position:0 -600px}

/* Buttons layout */
#sectionTop ul {width:200px; height:200px; position:absolute; top:0; right:0}
#sectionTop a {background-image:url(buttons.jpg); display:block; width:200px; height:50px; text-indent:-200em}

/* Button graphics positioning(css-sprite) */
a#top1 {background-position:200px 0} /* locked on as per brief */
a#top2 {background-position:0 -50px}
a#top3 {background-position:0 -100px}
a#top4 {background-position:0 -150px}
a#top1:hover,
a#top1:focus {background-position:200px 0}
a#top2:hover,
a#top2:focus {background-position:200px -50px}
a#top3:hover,
a#top3:focus {background-position:200px -100px}
a#top4:hover,
a#top4:focus {background-position:200px -150px}

/* Overlay - Required by the JavaScript */
#overlay {position:absolute; width:360px; height:200px; top:0; left:0; cursor:pointer}