#slideshow { width: 940px; height: 506px; /* height: 393px;*/ margin: 0px auto; padding: 10px 0px 0px 0px; /* padding: 57px 0px 0px 0px;*/ background: #161616 left top; /* background: #FFF left top;*/ /* background: url(images/img03.jpg) no-repeat left top;*/ } #foobar { position: relative; } #foobar .navigation { position: absolute; display: block; z-index: 100; color: #ffffff; bottom: 0px; right: 0px; margin: 10px; padding: 10px; background-color: #303030; opacity: 0.75; } #foobar .navigation a { color: #ffffff; text-decoration: none; outline: none; } #foobar .viewer { width: 726px; height: 486px; } #foobar .viewer .reel .slide { position: relative; width: 726px; height: 486px; } #foobar .viewer .reel .slide span { position: absolute; display: block; width: 726px; opacity: 0.50; /* opacity: 0.30;*/ padding: 15px; background-color: #000000; color: #FFFFFF; /* background-color: #FFFFFF; color: #000000;*/ bottom: 0px; left: 0px; font-size: 18px; } #foobar .viewer-wrapper { float: left; width: 726px; height: 486px; background: red; } .arrow-left { background: blue; width: 107px; float: left; } .arrow-right { background: green; width: 100px; float: right; } #col1 { width: 107px; float: left; } #col1 a { outline: none; display: block; width: 77px; height: 206px; background: url(images/img05.jpg) no-repeat 30px 130px; text-decoration: none; } #col2 { float: left; width: 733px; } #col3 a { float: right; outline: none; width: 87px; height: 206px; background: url(images/img06.jpg) no-repeat 10px 130px; text-decoration: none; }