/* cross-fading_disjointed_image_rollover.css */

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

/* Disjointed image positioning (css-sprite) */
.top1 {background-position:0 0}
.top2 {background-position:0 -600px}
.top3 {background-position:0 -1200px}
.top4 {background-position:0 -1800px}
.top5 {background-position:0 -2400px}
.top6 {background-position:0 -3000px}
.top7 {background-position:0 -3600px}
.top8 {background-position:0 -4200px}
.top9 {background-position:0 -4800px}
.top10{background-position:0 -5400px}
/* Buttons layout */
#sectionTop ul {width:100px; height:600px; position:absolute; top:0; right:0}
#sectionTop a {background-image:url(/disjoint/buttons_patio.jpg); display:block; width:100px; height:60px; text-indent:-200em}

/* Button graphics positioning(css-sprite) */
a#top1 {background-position:0  0px} /* locked on as per brief */
a#top2 {background-position:0 -60px}
a#top3 {background-position:0 -120px}
a#top4 {background-position:0 -180px}
a#top5 {background-position:0 -240px} 
a#top6 {background-position:0 -300px}
a#top7 {background-position:0 -360px}
a#top8 {background-position:0 -420px}
a#top9 {background-position:0 -480px}
a#top10{background-position:0 -540px}
a#top1:hover,
a#top1:focus {background-position:100px 0}
a#top2:hover,
a#top2:focus {background-position:100px -60px}
a#top3:hover,
a#top3:focus {background-position:100px -120px}
a#top4:hover,
a#top4:focus {background-position:100px -180px}
a#top5:hover,
a#top5:focus {background-position:100px -240px}
a#top6:hover,
a#top6:focus {background-position:100px -300px}
a#top7:hover,
a#top7:focus {background-position:100px -360px}
a#top8:hover,
a#top8:focus {background-position:100px -420px}
a#top9:hover,
a#top9:focus {background-position:100px -480px}
a#top10:hover,
a#top10:focus {background-position:100px -540px}

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