April 30, 2010 by Ivo Bouwman

The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books

Debugging Tools That Make Life MUCH Easier:

Effectively debugging JavaScript applications is a royal pain in the derriere and to compile that, the available tools just don’t stand up to those used by managed code developers. Luckily, we do have a decent set of tools that lessens the pain substantially. Firebug is definitely a must have since it incorporates so much DOM & XHR introspection as well as the Web Developer Toolbar. Both are simply awesome. I also love Charles for HTTP sniffing and it’s saved my butt when Firebug couldn’t handle it.

IE8 Developer Tools – Microsoft’s browser debugger tools
Firebug – Mozilla’s browser debugger add-on
WebKit Web Inspector – Webkit’s browser debugger tools
Fiddler – HTTP Sniffer. Great for seeing Ajax requests.
Charles – HTTP Sniffer. Great for seeing Ajax requests. (my personal fav)
Service Capture – HTTP Sniffer. Great for seeing Ajax requests.
dynaTrace Ajax – HTTP performance analyzer
Web Developer’s Toolbar – All purpose Firefox toolbar to inspect everything on a page
YSlow – Analyzes page performance based on accepted industry best practices.
PageSpeed – Analyzes page performance based on accepted industry best practices.
DebugBar – An IE plugin that brings advanced debugging features to IE including JS, DOM & HTTP inspection

CSS Editors:

I prefer to write my CSS code by hand. Call me old-school but many swear by the following CSS editors. CSSEdit by MacRabbit (Mac only) is especially loved by many designers.

TopStyle
Rapid CSS
Xyle
Stylizer
CSSEdit

CSS Frameworks:

These frameworks have really taken off. Like their JavaScript brethren, they help to abstract much of the complexity of building consistent layouts in cross-browser fashion. They’re definitely something I need to look into more and from what I’ve read, 960 GS & Blueprint are the ones people are looking at.

960 Grid System
Blueprint CSS Framework
YAML
Yahoo YUI Grids CSS
Tripoli
Object-Oriented CSS

CSS Resets:

Want to minimize browser inconsistencies? Then use a CSS reset stylesheet to specify baseline CSS styles that make browser presentation defaults more consistent.

Meyer Reset by Eric Meyer
YUI2: Reset CSS
IECSS

JavaScript Libraries:

I definitely recommend everyone to learn JavaScript as you’ll need it to be a really effective client-side developer. With that said, a good JS library will go a long way to making your development faster and much more stable. These libraries are all very mature and dramatically help to abstract the complexities of cross-browser development. My personal favorite is jQuery, of which I’m a member of the project team.

jQuery
jQuery UI
Prototype
MooTools
Dojo
YUI
JavaScriptMVC
qooxdoo
Ext JS
Adobe Spry
Raphael.js – simplifies working with vector graphics on the web
LabJS Dynamic Script Loader – Allows execution and load management of JavaScript files
Lawnchair – A lightweight client-side JSON document store
Sessvars.js – Client-side session data management solution
Reactive Extensions For JS
PURE JS Templating Lib
Underscore.js – Utility lib for jQuery that provides a ton of extended functionality

and http://dhtmlx.com/ for professional Ajax components for advanced web UI
JavaScript Minifiers

Every byte counts when you’re sending files via HTTP and best practices dictate that on a production, you need to optimize all of your files to minimize page load times. Compressing JavaScript code is one of the easiest ways to do that and these tools will help. On the jQuery project, we’ve started using Google’s Closure compiler because it’s generated the best compression. Try all of them out to see which suits you best.

YUI compressor
Closure compiler
JSMIN
Dean Edward’s Packer
Microsoft Ajax Minifer
Dojo Shrinksafe

JavaScript Shells

There are times when you just want to test a snippet of code without actually going through the trouble of creating a full page. That’s where JavaScript shells shine. JSFiddle and JSBin both rock because apart from supporting plain ole JS, they also allow you to include a host of libraries including jQuery, MooTools, & Dojo.

jsfiddle.net
JSBin
mootools.net/shell
(MooTools-specific)

Color Management:

As a programmer, I’m insanely color scheme challenged. I’m inclined to mix yellow with mauve causing a concerted moan to occur across the design community. Luckily, these tools help you choose web safe color schemes that are not only consistent but won’t burn the eyeballs off your site visitors.

Colourlovers
Kuler

Editors and IDEs:

I work at Microsoft so you would expect me to be a Visual Studio whiz. Not so. Only recently starting at MS, I’ve only dipped my toe in the VS waters. What I’ve seen though has impressed me but I still have a long way to go before I understand it. If you’re on a Mac, though, I do highly recommend both TextMate and Coda. Both are truly awesome. I’ve used Coda a little more because I liked the UI of it a little better than TextMate’s but TM’s bundle system and ecosystem is amazing. You can get code-complete for just about anything via bundles. For Windows, Notepad++ has been just awesome. I wish it had built-in FTP support like UltraEdit.

Visual Studio
Expression
TextMate
Coda
UltraEdit
Komodo IDE
Notepad++
Notepad2
BBEdit
Aptana
Espresso
Sublime Text
WebStorm
VIM
Eclipse
Netbeans

Wireframing:

I know some of you are cowboys (or cowgirls) and you just want to start hacking. Well, for the truly impatient, these tools at least let you wireframe your pages quickly and easily. I’ve used Balsamiq and FlairBuilder and both rock. It seems that FlairBuilder is really cranking it up with some nice features. Both are Adobe AIR apps which means they’re cross-platform.

Omnigraffle
Balsamiq
FlairBuilder
Visio
Axure

Browser Testing:

I’ve been fortunate to have multiple OS versions over the years. My wife would definitely prefer for me to have a couple of less PCs sitting around but it’s let me test out my web apps on a variety of platforms, browsers and OSes. Shoot, I even have a version of IE6! For those with less hardware, these services should definitely help. Note that services like BrowserCam & Gomez are subscription-based but worth the cash if you can afford it.

BrowserCam
Adobe BrowserLab
Microsoft Expression Web SuperPreview for IE
Gomez
TredoSoft MultipleIE
CrossBrowserTesting
Multi-Safari
Browserscope
Cuzillion
IETester

Testing (based on the list by John Resig):

This was a list I snagged from John Resig. Obviously, he’s done a boatload of testing so I know this list rocks. JSLint is the old mainstay created by Douglas Crockford but other have really become increasingly essential to good testing. jQuery developers should definitely be looking at QUnit & jQuery-Lint. The most complete tool is Selenium but it does have a bit of a learning curve. If you’re into determining JS performance, checkout SunSpider, Dromaeo, Google’s V8 Benchmark and JSLitmus. These measure the performance of the JS engine, not your apps.

JSLint
jQuery Lint
JSUnit
Selenium Core
JSSpec (MooTools)
UnitTestJS (Prototype)
QUnit (jQuery)
DOH Unit Testing (Dojo)
YUITest 2
YUITest 3
Mochitest
ScrewUnit
JsUnitTest
jsUnity
JsTestDriver
Crosscheck
Env.js
FireUnit
W3C Markup Validation Service
W3C CSS Validation Service
SunSpider
V8 Benchmark
Dromaeo
JSLitmus
HTML Validator Firefox Add-on

Documentation:

Yahoo UI Docs
APIs – Most comprehensive list of APIs on the web
jQuery Docs
jQuery UI Docs
MooTools Docs
Prototype Docs
Dojo Docs
JSON Reference
JSONP

Server-Side JavaScript

Rhino
Node.js
Narwhal.js
CommonJS Standards Project
Persevere
Comet

Books

The books below are really a great selection. I have many in my own library and every so often re-read them I’m currently reading High Performance JavaScript by Nicholas Zakas. Another great book is Stoyan Stefanov’s Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries. I also highly recommend Steve Souders performance book at the bottom of the list. They’re basically the definitive sources for optimizing your web apps.

JavaScript/DOM:

JavaScript Libraries:

HTML & CSS:

Performance:

jQuery Still Amazes Me After 3 Years I have some downtime at the moment so I wanted…

July 8, 2009 by Ivo Bouwman

Calling Postcode webservice from www.webservices.nl using from JavaScript

See here my implementation for calling both the national address and the international postcode webservice from www.webservices.nl.

Create and include the JavaScript from #1 below. You can call the AddressWebservice function from the OnChange events in the forms.
You need these two files for the addresslist dialog, when the return of multiple addresses need to handled… addresslist.html from #2 below and Address.css from #3 below.

When multiple addresses need to be resolved, this is the dialog that should come up.

Webservice JavaScript

var CONTACT_ADDRESS_1 = 10;

var CONTACT_ADDRESS_2 = 11;

var CONTACT_ADDRESS_3 = 12;

var ACCOUNT_ADDRESS_1 = 20;

var ACCOUNT_ADDRESS_2 = 21;

var ACCOUNT_ADDRESS_3 = 22;

var ORGANISATION_NAME = “CRMORGANISATION”;

var SERVER_URL = “http://crm.dev.intra/”;

// —————————————–

// Validate Address with webservices.nl

// —————————————–

function AddressWebservice(i_Land, i_Postcode, i_Huisnummer, i_Toevoeging, i_Straat, i_Plaats, FORM_ADRES) {

Examples for calling the webservice

https://ws1.webservices.nl/rpc/get-simplexml/UTF-8/addressReeksFullParameterSearch/WebService_User/****************/////93//2991/KK//

https://ws1.webservices.nl/rpc/get-simplexml/UTF-8/internationalAddressSearchV2/WebService_User/***********************///unter%20den%20eichen/1//wiesbaden///de//

// Pre-checks

this._debug = false;

if (this._debug) {

debugger;

}

// For dutch addrress postocde and huisnummer is required.

// For international adresses al least 3 out of 4, when postcode is not filled

if (i_Land == ‘NETHERLANDS’ || _IsNull(i_Land)) {

if (_IsNull(i_Postcode) || _IsNull(i_Huisnummer)) { return true; }

}

else {

if ((_IsNull(i_Postcode)) && (_IsNull(i_Straat))) {

return true; }

else {

if ((_IsNull(i_Huisnummer)) && (_IsNull(i_Plaats))) {

return true;

}

// Set the credentials to successfully logon to the webservice

this._auth_username = ‘Webservice_User’;

this._auth_password = ‘*********************’;

Interface for addressReeksFullParameterSearch method

this._N6L_province = ”; // string

this._N6L_district = ”; // string

this._N6L_city = ”; //i_Plaats; // string

this._N6L_street = ”; //i_Straat; // string

this._N6L_houseNo = i_Huisnummer // int

this._N6L_houseNoAddition = i_Toevoeging; // string

this._N6L_nbcode = Left(i_Postcode.toUpperCase(),4); // string

this._N6L_lettercombination = Right(i_Postcode.toUpperCase(), 2); // string

this._N6L_addresstype = ”; // string

this._N6L_page = ”; // int

Interface for the internationalAddressSearchV2 method

this._I11L_organization = ”; // string

this._I11L_building = ”; // string

this._I11L_street = i_Straat; // string

this._I11L_housenr = i_Huisnummer + i_Toevoeging; // string

this._I11L_pobox = ”; // string

this._I11L_locality = i_Plaats; // string

this._I11L_postcode = i_Postcode.toUpperCase(); // string

this._I11L_province = ”; // string

this._I11L_country = i_Land // string

this._I11L_language = ‘NL’; // string

this._I11L_country_format = ‘iso_2’ // string

var _baseurl = ‘https://ws1.webservices.nl/rpc/get-simplexml/UTF-8’;

var _webmethod_international = ‘internationalAddressSearchV2’;

var _webmethod_national = ‘addressReeksFullParameterSearch’;

var _webservicecall = ”;

this.items = new Array();

// Check address for the Netherlands

if (i_Land == ‘NETHERLANDS’ || _IsNull(i_Land)) {

_webservicecall = _baseurl + ‘/’ + _webmethod_national + ‘/’ + this._auth_username + ‘/’ + this._auth_password + ‘/’ +

this._N6L_province + ‘/’ + this._N6L_district + ‘/’ + this._N6L_city + ‘/’ + this._N6L_street + ‘/’ + this._N6L_houseNo + ‘/’ +

this._N6L_houseNoAddition + ‘/’ + this._N6L_nbcode + ‘/’ + this._N6L_lettercombination + ‘/’ + this._N6L_addresstype + ‘/’ + this._N6L_page;

}

else {

_webservicecall = _baseurl + ‘/’ + _webmethod_international + ‘/’ + this._auth_username + ‘/’ + this._auth_password + ‘/’ +

this._I11L_organization + ‘/’ + this._I11L_building + ‘/’ + this._I11L_street + ‘/’ + this._I11L_housenr + ‘/’ +

this._I11L_pobox + ‘/’ + this._I11L_locality + ‘/’ + this._I11L_postcode + ‘/’ + this._I11L_province + ‘/’ +

this._I11L_country + ‘/’ + this._I11L_language + ‘/’ + this._I11L_country_format;

}

var xmlhttp = GetXmlHttp();

if (xmlhttp) {

xmlhttp.open(“POST”, _webservicecall, true);

xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

try

{

xmlhttp.send(_webservicecall);

}

catch(ex)

{

alert(ex);

//succesFullTransformation = false;

}

xmlhttp.onreadystatechange = function()

{

if(xmlhttp.readyState==4 && xmlhttp.responseXML)

{

var response = xmlhttp.responseXML;

//var errorCode = response.documentElement.selectSingleNode(“ErrorCode”);

//var errorMessage = response.documentElement.selectSingleNode(“ErrorMessage”);

if (this._debug) {

debugger;

}

if (response == null || response.documentElement == null) {

var _msg = “Fout bij het ophalen van de postcde.\nControleer of de volgende combinatie een juist adres kan opleveren: \n”;

_msg += ((_IsNull(i_Land))?””:”Land: ” + i_Land + “,\n”);

_msg += ((_IsNull(i_Postcode))?””:”Postcode: ” + i_Postcode + “,\n”);

_msg += ((_IsNull(i_Huisnummer))?””:”Huisnummer: ” + i_Huisnummer + “,\n”);

_msg += ((_IsNull(i_Toevoeging))?””:”Toevoeging: ” + i_Toevoeging + “,\n”);

_msg += ((_IsNull(i_Straat))?””:”Straat: ” + i_Straat + “,\n”);

_msg += ((_IsNull(i_Plaats))?””:”Plaats: ” + i_Plaats);

alert(_msg);

return null;

}

else {

if (i_Land == ‘NETHERLANDS’ || _IsNull(i_Land)) {

this.items = NationalAddresObject(response); }

else {

this.items = InternationalAddresObject(response); }

}

SetAddressFields(FORM_ADRES, this.items);

}

function InternationalAddresObject(xmlResponse) {

//alert(‘Under Construction’);

var _resultcount = xmlResponse.documentElement.selectSingleNode(“/response/result”).childNodes.length;

this.items = new Array();

// adresregel 1, huisnummer, toevoeging, adresregel 2, adresregel 3, plaats, postcode, provincie, land

switch(_resultcount)

{

case 0 :

alert(‘Ongeldig huisnummer en postcode combinatie voor een buitenlands adres. Voer een geldig huisnummer en postcode combinatie in.’ );

break;

case 1 :

this.items[0] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/street”).text;

this.items[1] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/housenr”).text;

this.items[2] = ”;

this.items[3] = ”;

this.items[4] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/province”).text;

this.items[5] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/locality”).text;

this.items[6] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/postcode”).text;

this.items[7] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/province”).text;

this.items[8] = xmlResponse.documentElement.selectSingleNode(“/response/result/entry/address/country”).text;

break;

default :

//if (_resultcount == 20) {

//alert(‘Er zijn 20 adressen of meer gevonden voor deze dit huisnummer en postcode combinatie.’);

var arrAddresses = new Array();

var _results = xmlResponse.selectNodes(‘/response/result/entry/address’);

for (i=0; i<_resultcount; i++)

{

arrAddresses[i] = _results[i].getElementsByTagName(‘street’)[0].text + ” ” +

_results[i].getElementsByTagName(‘housenr’)[0].text + ” ” +

_results[i].getElementsByTagName(‘countryspecific_locality’)[0].text + ” (” +

_results[i].getElementsByTagName(‘province’)[0].text + “) ” +

_results[i].getElementsByTagName(‘country’)[0].text

}

var props = ‘dialogHeight:400px;dialogWidth:730px;center:yes;resizable:no;status:no;scroll:no’;

retval = null;

retval = window.showModalDialog(‘/_static/_common/scripts/qnh/addresslist.html’, arrAddresses, props);

if (this._debug) {

debugger;

}

if (retval != null) {

this.items[0] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘street’)(0).text

this.items[1] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘housenr’)(0).text

this.items[2] = ”;

this.items[3] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘province’)(0).text;

this.items[4] = ”;

this.items[5] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘locality’)(0).text

this.items[6] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘postcode’)(0).text

this.items[7] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘province’)(0).text

this.items[8] = xmlResponse.getElementsByTagName(‘result’)(0).getElementsByTagName(‘entry’)(retval).getElementsByTagName(‘address’)(0).getElementsByTagName(‘country’)(0).text

}

break;

}

if (this._debug) {

debugger;

}

return this.items;

}

function NationalAddresObject(xmlResponse) {

//alert(xmlResponse.xml);

var _resultcount = xmlResponse.documentElement.selectSingleNode(“/response/results”).childNodes.length;

this.items = new Array();

switch(_resultcount)

{

case 0 :

alert(‘Ongeldig huisnummer en postcode combinatie voor een adres in Nederland. Voer een geldig huisnummer en postcode combinatie in.’ );

break;

case 1 :

this.items[0] = xmlResponse.documentElement.selectSingleNode(“/response/results/entry/straatnaam”).text;

this.items[1] = ”;

this.items[2] = ”;

this.items[3] = ”;

this.items[4] = ”;

this.items[5] = xmlResponse.documentElement.selectSingleNode(“/response/results/entry/plaatsnaam”).text;

this.items[6] = xmlResponse.documentElement.selectSingleNode(“/response/results/entry/wijkcode”).text +

xmlResponse.documentElement.selectSingleNode(“/response/results/entry/lettercombinatie”).text;

this.items[7] = xmlResponse.documentElement.selectSingleNode(“/response/results/entry/provincienaam”).text;

this.items[8] = ”;

break;

default :

alert(‘Er zijn meer adressen gevonden voor deze dit huisnummer en postcode combinatie’);

break;

}

return this.items;

}

function SetAddressFields(i_Address, arrAddress) {

// fill the form fields with

}

//——————–

// Common scripts

//——————–

function _IsNull( value ) {

return ( “undefined” == typeof( value ) || “unknown” == typeof( value ) || null == value || ”==value );

}

function xreplace(checkMe,toberep,repwith){

var temp = checkMe;

var i = temp.indexOf(toberep);

while(i > -1)

{

temp = temp.replace(toberep, repwith);

i = temp.indexOf(toberep, i + repwith.length + 1);

}

return temp;

}

function Left(str, n){

if (n <= 0)

return “”;

else if (n > String(str).length)

return str;

else

return String(str).substring(0,n);

}

function Right(str, n){

if (n <= 0)

return “”;

else if (n > String(str).length)

return str;

else {

var iLen = String(str).length;

return String(str).substring(iLen, iLen – n);

}

function GetXmlHttp() {

var x = null;

try

{

x = new ActiveXObject(“Msxml2.XMLHTTP”);

}

catch (e)

{

try

{

x = new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch (e)

{

x = null;

}

if (!x && typeof XMLHttpRequest != “undefined”)

{

x = new XMLHttpRequest();

}

return x;

}

2. AddressList.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<HTML>

<HEAD>

<title>Selecteer een adres</title>

</HEAD>

function init()

{

//debugger;

var arrList;

var i;

arrList = window.dialogArguments;

var lb = document.getElementById(‘AddressSelector’);

for (i=0;i<arrList.length;i++)

{

lb[lb.options.length] = new Option( arrList[i], 0);

}

function closeme(val)

{

var SelText;

var ret;

var arrTokens;

if (val == true)

{

var lb = document.getElementById(‘AddressSelector’);

if(lb.selectedIndex >= 0)

{

ret = lb.selectedIndex;

}

else

{

ret = null;

}

else

{

ret = null;

}

window.returnValue = ret;

window.close();

}

</script>

<TBODY>

<td>

<tr>

<td id=”tdTitle” class=”mnuTitle mnuRight” noWrap>Zoek een adres</td>

</tr>

</table>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<tr>

</tr>

<tr>

<td>

<asp:Label id=”Label1″ style=”Z-INDEX: 101; LEFT: 10px; POSITION: absolute; TOP: 9px” runat=”server”>Selecteer een adres:</asp:Label>

<SELECT id=”AddressSelector” style=”Z-INDEX: 104; LEFT: 11px; WIDTH: 688px; POSITION: absolute; TOP: 32px; HEIGHT: 168px”

size=”10″ ondblclick=”closeme(true)” class=”INPUT”>

</SELECT>

<INPUT style=”Z-INDEX: 102; LEFT: 528px; WIDTH: 68px; POSITION: absolute; TOP: 208px; HEIGHT: 24px”

type=”button” value=”OK” name=”btnOK” onclick=”closeme(true)”> <INPUT style=”Z-INDEX: 103; LEFT: 616px; WIDTH: 72px; POSITION: absolute; TOP: 208px; HEIGHT: 24px”

type=”button” value=”Cancel” name=”btnCancel” onclick=”closeme(false)”>

</div>

</td>

</tr>

</table>

</td>

</tr>

</tr>

</TBODY>

</table>

</form>

</body>

</HTML>

3.Address.css

formButton

{

background-color: #6699cc;

padding: 2px 4px 3px 4px;

color: #000000;

font-size: 8pt;

font-family: tahoma;

height: 17px;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr=#B4C5DF, EndColorStr=#91A9D0);

border-width: 0px;

}

TEXTAREA

{

font-size: 8pt;

font-family: tahoma;

width: 100%;

height: 100%;

border: 1px solid #7b9ebd;

}

.inputfields

{

font-size: 8pt;

font-family: tahoma;

width: 100%;

height: 19px;

border: 1px solid #7b9ebd;

}

INPUT.rad

{

width: 15px;

border: 0px;

cursor: hand;

}

DIV.tab

{

overflow-y: auto;

padding: 10px;

}

TD.sec

{

width: 100%;

color: #000000;

font-weight: bold;

padding-left: 0px;

padding-bottom: 2px;

text-overflow: ellipsis;

overflow: hidden;

}

{

font-size: 11pt;

font-family: tahoma;

}

TD.bar

{

border-bottom: 1px solid #000000;

}

TD.req

{

font-weight: bold;

color: #9F2409;

overflow: hidden;

text-overflow: ellipsis;

padding-top: 5px;

}

TD.statusBar

{

background-color: #63769B;

color: #ffffff;

padding-left: 5px;

height: 24px;

border-bottom: 1px solid #485673;

font-weight: bold;

}

LABEL

{

cursor: hand;

}

TD.radioLabel

{

padding-left: 2px;

padding-right: 10px;

}

TABLE.layout

{

table-layout: fixed;

width: 100%;

height: 100%;

}

div.tab

{

width: 100%;

height: 100%;

border: 1px solid #466094;

background-color: #EEF0F6;

display: none;

}

body

{

font-size: 11px;

margin: 0px;

border: 0px;

background-color: #acc0e9;

cursor: default;

}

{

font-size: 11px;

}

table

{

cursor: default;

}

{

color: #0000ff;

font-weight: bold;

}

span.menu

{

height: 100%;

padding: 2px;

padding-left: 5px;

padding-right: 5px;

border: 1px solid #7288AC;

}

table.mnuBar

{

color: #000000;

height: 22px;

width: 100%;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#DCDFE5, EndColorStr=#BDC2CB);

}

td.mnuTitle

{

font-size: 11px;

font-weight: bold;

letter-spacing: 1px;

cursor: default;

color: #000000;

}

td.mnuRight

{

width: 100%;

text-align: right;

padding-right: 5px;

}

INPUT

{

font-size: 8pt;

width: 100%;

height: 19px;

border: 1px solid #7b9ebd;

}