Probem displaying accordion

Probem displaying accordion

Hello,
 
I'm new to web programming and am trying to get an accordion up and running. Everything seems to work great however when I apply a theme the accordion is not displaying like I'd hope.
 
After applying UI Lightness the Accordion headers appear on a separate line below the triangle icon that indicates the expanded pane (like below):
 
->
Change location
 
If I go to the jQuery site and view the UI Lightness theme the triangle icon appears inline with the text (like below). This is what I want.:
 
-> Change Location
 
 
Boilerplate code is below ... any thoughts much appreciated.
 
Jess
 
 
 
<html>
<head>
  <link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
  <script text="text/javascript">
   $(document).ready(function() {
  $("#accordion").accordion()  
   });
  </script>
</head>
<body style="font-size:62.5%;">
 
<div id="accordion">
 <h3><a href="#">Find Location</a></h3>
 <div>
  <p>
   Lets you search by plat or address.
  </p>
 </div>
 <h3><a href="#">Change Map</a></h3>
 <div>
  <p>
  Add or remove data. Change look of pipe.
  </p>
 </div> 
</div>
</body>
</html>