Implement new design to contact view screen

Implement new Contact Summary interface according to following mockup:

http://sandbox.civicrm.org/sites/sandbox.civicrm.org/modules/civicrm/mockups/contact/contactView3.html
Also check http://civicrm.org/node/567

Guidelines:

• Please note the structure of HTML in the mockup. Basic idea is to keep following structure in place:

<div id="contactView">
<div class="fieldgroup">
<table>
[...]
</table>
</div>
<div class="fieldgroup">
<table>
[...]
</table>
</div>
<div class="fieldgroup-horizontal-separator"></div>
</div>

#contactView div is used to separate CSS properties for contact view from the rest of the user interface, since it's - for now - significantly different.

.fieldgroup class contains single table.

.fieldgroup-horizontal-separator class is used to prevent fieldgroup divs from overflowing on each other vertically. It's supposed to have clear: both CSS property set.

• Please test the screen on 1024x768 resolution. The easiest way to do it is to put following JS call in browser's address input: javascript:resizeTo(1024,768). It should result in resizing browser window to above size. If everything is made properly, even with a lot of information, browser shouldn't render horizontal scroll bar at the bottom of the window.

• Please note that custom field of type "textarea" (or "note") has label displayed in a different way. This is done on purpose, so that fileds of this type don't take too much vertical space.

• Even though the mockup has some CSS properties set in the HTML file, please avoid it.

Additional comments (from dgg)
=========================

• I've pointed contactView3.html to the "live" version of jquery-ui.css and marked the section of views3_Files/civicrm.css which has the styles used for this mockup (starts line 887)

• Display properties (iike "label", "email-on-hold", etc.) should use classes as in mockup example. You can determine where to apply class - span or div or? based on what makes sense in coding. Use title= attribute on containers (e.g. span or div) or links to explain the styling - eg <span class="do-not-phone" title="Privacy flag: Do not Phone">. NOTE: The contact type icon (left of display name) should be changed to use a class to set the image - as I've done with the email-hold and do-not-phone properties.

• <td> widths should also be specified via classes in stylesheet (I fixed most/all of the label cells, but the value cells still need to be corrected).

• Do NOT use upper case for HTML tabs in HTML or in CSS declarations (not valid HTML)

• The stop-icon.png needs to get a transparent background

• Current markup has repeats of same id (example id="contact_panel"). This not valid HTML and will need to be fixed (with corresponding fixes in the css styles).

• Maintain the "hcard markup" that we have in the current implementation (e.g. <div class="vcard"><span class="adr"><br/><span class="street-address">N 510P Dowlen Ln E</span> etc....)