fields stretching across the whole page

You can limit the size of your form by defining a set width for the wrapper div. You would add this to the end of your theme's style.css file.

[css]
body #gform_wrapper_1 {width:640px)

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

For the side-by-side fields, they're set to use 50% of the available width for the 2 column layout. You just want them side by side so you can replace the "gf_left_half" and "gf_right_half" ready class names with "gf_inline" for both. That will put them side by side, but not into equally spaced columns. That's more what you want here.

screenshot: http://grab.by/a5QD

Yes, examples of how to target/manipulate the inputs with CSS is in the documentation here.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Look for the section on "standard fields"

You would do something like this. It targets all of the normal input styles & selects (drop downs) so you can define a height and/or other properties. There is a separate rule that includes textareas (paragraph text) to declare the font style, color, etc.

[css]
/* reset the form wrapper width */

body #gform_wrapper_1 {width:640px}

/* define the heights on the inputs and selects */

body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password],
body #gform_wrapper_1 .gform_body .gform_fields .gfield select {
	height:24px;
}

/* change the font color and styles for the inputs, selects and textareas */

body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url],
body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password],
body #gform_wrapper_1 .gform_body .gform_fields .gfield select,
body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea {
	color:#f00;
	font-family:sans-serif;
	font-style:italic
}

Note: to change to a different style on fields that have been completed you'll need to add some kind of jQuery scripting to add a new class name and then define that new class in your CSS. It's not something you can do with just a CSS change itself.

@CG, My pleasure. Thanks for the update.

Not sure. I'm not familiar with that theme at all. You just want to put that at the end of whatever stylesheet gets loaded on the page. From what I see, it's the style.css file.

When I add it in my test (via the firebug inspector) it works just fine.

screenshot: http://grab.by/a5Vu

You can try adding the !important declaration, but you shouldn't need it from what I can tell.

[css]
body #gform_wrapper_1 {
    width: 640px!important
}

You don't need to add extra classes to change anything, you just need to target the textarea element for the "paragraph text"

In the previous example, I purposely omitted the textarea from the first rule because you probably didn't wan't a textarea to be defined as the same height as the other inputs. If you want to define specific properties for that, you could create a simple rule for that field.

[css]
/* reset the form wrapper width */

body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea {
	font-family: Arial, Helvetica, sans-serif;
        font-size: 1.1em;
        color: #8a8a8a
}

If that's not working, then it's probably inheriting some other rule from your theme. If you're targeting using the example above it should be fine. I don't see a URL to your form so I can't tell you for sure.