<link rel="stylesheet" href="/images/nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="/images/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/images/jquery.nivo.slider.js"></script>
<script type="text/javascript">
  $(window).load(function() {
  $('#slider').nivoSlider();
  });
</script>

<div id="wrapper">
  <div id="slider-wrapper">
  <div id="slider" class="nivoSlider">
  <img src="/images/banner1.jpg" alt="" />
  <img src="/images/banner2.jpg" alt="" />
  <img src="/images/banner3.jpg" alt="" />
  <img src="/images/banner4.jpg" alt="" />
  </div>
  </div>
</div>

#slider {
  position:relative;
  width:640px;
  height:200px;
  margin-top:6px;
  margin-left:5px;
  margin-bottom:10px;
  background:url('/images/load_blue2.gif') no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:20px;
  bottom:10px;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url('/images/bullets.png') no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url('/images/arrows.png') no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
  text-shadow:none;
  font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {  
  color:#efe9d1;
  text-decoration:underline;
}