css for advanced fields not displaying correctly + how to make field title one

You have three distinct issues here.

For the label wrapping, your theme has set a width of 100px to all labels on line 315 of style.css:

[css]
/* Line 315 */
form label
{
  display: inline-block;
  width: 100px;
  margin-right: 10px;
}

You can override that by adding this to your theme's stylesheet:

[css]
body .gform_wrapper .top_label .gfield_label {
    width:100%;
}

For the datepicker, you have a couple JavaScript error on the page which is preventing the Gravity Forms jQuery from running properly:

Timestamp: 2/5/2013 7:18:00 AM
Error: TypeError: a is null
Source File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js
Line: 29

Timestamp: 2/5/2013 7:18:04 AM
Error: TypeError: Yf is null
Source File: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/19/main.js
Line: 46

It looks like you're loading a couple versions of the jQuery UI and datepicker on the page. Please use these troubleshooting steps to see if this is due to a plugin (AJAX Event Calendar?) or theme conflict http://rkt.gs/testing

For the advanced fields, your theme is adding padding and margin to all form inputs (see your theme's stylesheet at lines 134 and 316). You can override this as well, but the fields got really small at that point. You might have to do more with your original form stylesheet as just overriding the padding might not be what you need. I added this to your theme's stylesheet and got the result shown here: http://minus.com/lpWhi8N1naKaN

[css]
body .gform_wrapper input[type="text"], body .gform_wrapper input[type="url"],
body .gform_wrapper input[type="email"], body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"], body .gform_wrapper input[type="password"]{
  padding: 0px!important;
}