css styling for jcarouselLite

css styling for jcarouselLite

I've got a problem styling jCarouselLite and I cannot figure out how to
fix it. There is a jfiddle here:
jsfiddle
Basically I have a bunch of images that are 290w x 390h and I want 2 to
show at a time. When I do that, and use the css I have now, the next and
prev button get shoved up top. Simply increasing the width of #slider1
does not solve that.
Here is the relevant html:
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="http://tinyurl.com/pewde8e" /></li>
<li><img src="http://tinyurl.com/pewde8e" /></li>
<li><img src="http://tinyurl.com/pewde8e" /></li>
<li><img src="http://tinyurl.com/pewde8e" /></li>
<li><img src="http://tinyurl.com/pewde8e" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
and my css: (i used red and blue backgrounds so things would show up better)
#slider1 { height: 480px; overflow:hidden; width: 720px; background: red;
margin:auto; }
#slider1 .viewport { width: 680px; height: 480px; overflow: hidden;
position: relative; background: blue;}
#slider1 .buttons { background:url("../images/buttons.png") no-repeat
scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; }
#slider1 .next { margin: 30px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0;
margin: 0; left: 0; top: 0; width: 600px; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px;
height: 390px; border: 1px solid #dcdcdc; width: 290px;}
Can anyone offer help? This is a great small plugin, but not very much
documentation! Tx.