CoffeeBreak

GeSHify has moved

2009-04-02T16:52:55Z

My syntax highlighting extension for ExpressionEngine has moved to a new home:

GeSHify update

2008-08-05T16:05:47Z

I updated my ExpressionEngine extension GeSHify. New features are a French translation (thanks to Fabien Amann) and a German translation (which I did myself). Packaged with GeSHify 0.3.6.1 are GeSHi 1.0.7.22 and GeSHi 1.1.2alpha4dev (both checked out from the release branches of GeSHi’s SourceForge.net Subversion repository).
Since I switched from getting the releases of GeSHi manually to using svn:externals definitions I no longer have to download the GeSHi releases manually — they will be pulled from the SourceForge Subversion servers on every update. Using this technique it is technically possible to automate building new GeSHify packages as soon as a new GeSHi version is released (and I will probably set this up soon).
Proceed to download.

I took it! And so should you

2008-07-29T15:14:57Z

A List Apart has published the 2008 survey for people who make websites. If you work in the web business, you should go ahead and take the survey as well.

Thunderbird IMAP push email

2008-07-12T10:18:49Z

RFC 2177 defines IDLE, an extension to the IMAP protocol allowing mail clients to change into an idle mode while keeping the TCP-connection open. This allows the servers to notify the clients of new mails on arrival (the so-called push e-mail).

Not all e-mail providers support IMAP IDLE, though – you should check whether your mail provider supports it by opening a telnet connection to the IMAP server (standard port for IMAP is 143) and sending 001 capability. If the answer contains „IDLE” your server supports IMAP IDLE.
GMail for example answers
* CAPABILITY IMAP4rev1 UNSELECT IDLE NAMESPACE QUOTA XLIST CHILDREN XYZZY 001 OK Thats all she wrote!

There's one thing to look out for, though – Thunderbird only sends the IDLE command (effectively enabling push e-mail) if you disable the „check for new mail every n^th minute”-option. I could not find any documentation on that feature – however using Help » Mozilla Thunderbird Help causes a 404 File Not Found error for me anyway (using the German version of Thunderbird).

Steve Jobs would say: „Exchange for the rest of us” – using GMail, IMAP and Thunderbird.

Probably the biggest RSS icon I have ever seen

2008-06-13T16:07:00Z

There’s a certain trend in so-called web 2.0 design to have ever bigger icons for RSS feeds ^{(What are RSS feeds?)}.
Now I recently saw an RSS icon that beats the pants of all other RSS icons I’ve ever seen before: ImageShack’s RSS icon (screenshot):

This icon is a whooping 403 per 336 pixels large - that’s 135,408 square pixels!

A rant on limited password fields

2008-05-27T19:58:00Z

Whenever I see a password field that’s limited in it’s length I loose some trust in the organization providing the form. Why? Because the only valid reason I see to limit the length of a password is unencrypted or reversible encrypted storage. This requires some insight knowledge on how data is stored in databases: when defining a text field you usually have to choose it’s maximum length - obviously you could just choose whatever maximum length was possible, but that’s not the point of a well designed database. It would take me too long to explain that here, but there are some reasons why you certainly wouldn’t want to define fields longer than needed.

Password encryption methods

There are several different approaches to password encryption; the first and probably worst method is no encryption. It’s advantages are that you will be able to mail the password out to the user in case he forgets it and that it doesn’t require a lot of storage (estimating the average password length at about 10 chars from personal experience here). However it’s downsides are huge: in case you have some security flaw in your application all passwords will be leaked.

The second way is to use some encryption algorithm, e.g. AES or DES (those two might be a bit overkill, but there’s others). Strings encrypted with such an encryption algorithm generally tend to use up a lot more storage than the unencrypted string. You still have the advantage of being able to send the password to the user and if your database is leaked, the passwords will still not be decryptable (as long as the encryption key isn’t leaked).

However, there’s a better solution: hashing the password will give you a fixed-length string (which is great if you’re working with databases) from a variable-length string (=password) and it’s non-reversible. Theoretically you’d be able to calculate a so-called “collision”. Because a hash function is mapping an endless amount of strings to a finite amount of hash values there’s multiple strings with the same hash value. However given a certain minimum length of the password (which can be enforced by padding the string with random data you also store, the so-called “salt”) the effort to calculate such a collision is that large that it’s virtually impossible to hit one while your site is online (assuming you to re-setup the system once in 100 years here). Maybe you’d ask how to compare passwords on login if they’re stored using a non-reversible encryption? Actually you wouldn’t. You would instead hash the password the user entered with the salt stored for the user and compare it to the stored encrypted password. That way the unencrypted password is never in the server RAM and not in any log files either.
And what if a user forgets his password? Well, instead of mailing him his password, you could just generate a new password, encrypt it, store it into the database and send the new password to the user.
Also the hashing method allows you to enter virtually every character regardless of things like the encoding the database uses internally. Because hashing functions work with binary data and usually return a string using 0-9 and a-f (which are always the same in any encoding relying on ANSI) there won’t be any problems with the database encoding to deal with either.

So, why is there still services not allowing long passwords and all characters in passwords?

9-slice scaling in HTML

2008-05-15T14:59:57Z

The Adobe Fireworks help has a good article explaining 9-slice scaling. Now imagine you’re designing a liquid width layout for a website - wouldn’t it just be great if it would scale as it was 9-sliced? Here’s how:

Slicing

First you need one image for each of the outer areas in the 9-slice grid. That’s top left, top center, top right, left center, right center, bottom left, bottom center and bottom right. We don’t need an image for the center, since it’s filled with one solid color in this example and we can use CSS for that. Note that all top and all bottom slices must share the same height. The top center and bottom center slices should be 1 pixel wide, since we’re not going to scale them, but repeat them (which is the difference of this technique compared to the original 9-slice scaling). Left and right center slices only need to be 1 pixel high for the reasons just mentioned.
After all, the slicing looks like this (forgive me the typo):

HTML code

Here’s the HTML you’ll need. Read the comments in the code for explanation.

<div class="content">
	
	<div class="content-top">
		
		<div class="content-top-left"></div>
		<div class="content-top-right"></div>
		
		<div class="content-top-repeat"></div>
	</div>
	<div class="content-repeat">
		
		<div class="content-repeat-left">
			<div class="content-repeat-right">
				
				<div class="content-repeat-center">
					
					<div class="content-repeat-clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="content-bottom">
		
		<div class="content-bottom-left"></div>
		<div class="content-bottom-right"></div>
		
		<div class="content-bottom-repeat"></div>
	</div>
</div>

CSS

And here’s where the magic comes in - this will actually combine the images and the HTML code and make it scale perfectly. Again, read the comments for explanation:

.content .content-top {
	/* No rules needed here, but for the sake of completeness */
}
.content .content-top .content-top-left {
	/* float this one left and .content-top-right right so they flow over .content-top-repeat, which is the top center slice */
	float: left;
	/* width and height are defined by the image */
	width: 83px;
	height: 49px;
	background: url('images/content_top_left.png') no-repeat;
}
.content .content-top .content-top-right {
	float: right;
	/* height needs to be the same across all top slices! */
	height: 49px;
	width: 99px;
	background: url('images/content_top_right.png') no-repeat;
}
.content .content-top .content-top-repeat {
	height: 49px;
	/* the margins are the width of the top left and top right slices - this is not always neccessary, but in my case I was using alpha-transparent PNG8, which broke the layout in IE6 then */
	margin-left: 83px;
	margin-right: 99px;
	/* note that we repeat-x the image here */
	background: url('images/content_top_repeat.png') repeat-x;
}
.content .content-repeat {
	/* No rules needed here, but for the sake of completeness */
}
.content .content-repeat .content-repeat-left {
	/* repeat-y the image - this div will automatically resize with the content */
	background: url('images/content_repeat_left.png') left repeat-y;
}
.content .content-repeat .content-repeat-left .content-repeat-right {
	/* same as center left slice */
	background: url('images/content_repeat_right.png') right repeat-y;
}
.content .content-repeat .content-repeat-left .content-repeat-right .content-repeat-center {
	/* Put your text formatting here */
	/* again, margins are the widths of the left and right center slice */
	margin-left: 3px;
	margin-right: 14px;
	/* and this is the solid background color */
	background: #fffbf2;
}
.content .content-repeat .content-repeat-clearfix {
	/* you better have this if you have floated stuff in your content */
	clear: right;
}
.content .content-bottom {
	/* No rules needed here, but for the sake of completeness */
}
.content .content-bottom .content-bottom-left {
	/* same technique as above when stying the top part */
	float: left;
	/* again, image size defines the size of this div */
	width: 12px;
	height: 46px;
	background: url('images/content_bottom_left.png') no-repeat;
}
.content .content-bottom .content-bottom-right {
	/* see above */
	float: right;
	width: 61px;
	/* note the height _must_ be euqal across all bottom slices */
	height: 46px;
	background: url('images/content_bottom_right.png') no-repeat;
}
.content .content-bottom .content-bottom-repeat {
	/* margins again defined by the width of the bottom left and right slices */
	margin-left: 12px;
	margin-right: 46px;
	/* and height is the same across all bottom slices */
	height: 46px;
	/* don't forget the repeat-x thingy */
	background: url('images/content_bottom_repeat.png') repeat-x;
}

Summary

Now that was a massive amount of code, wasn’t it? A little demo would be nice, right? Check this one: http://www.mgv-oberhaid.de/ - try changing your browser’s font size and watch the content div to see the effect.

Update: Obviously all the IDs in HTML should have been classes - the CSS excerpt did style classes, which is a better idea if you want to use multiple 9-slice boxes on a page. The demo URL was outdated, too.

Up or Out: employees in IT companies quitting

2008-04-30T19:14:00Z

I just read an article in Alex’ Soapbox on IT professionals and their motives to quit a job at a certain company. Having just finished a 6-month-internship at a local new media agency this article came right on time. I don’t want to judge neither the article nor the company I’ve been working at, but the theory mentioned in “Up or Out: Solving the IT turnover crisis” is absolutely worth reading if you haven’t already.
Personally I think Alex Papadimoulis’ findings are a bit too black-and-white (as he admits near the end of the article: “Obviously, this article has painted some incredibly broad strokes, the largest being the stark dichotomy between skilled and unskilled developers, and the lack of distinction between organizations.”), but they are true nonetheless.

The smaller the error the bigger the bug

2008-04-26T10:05:00Z

So we had that navigation tree at work consisting out of two category levels, for simplicity let’s call them Level-1-Category and Level-2-Category. Level-1-Categories could contain other Level-1-Categories and Level-2-Categories, while Level-2-Categories could only contain Level-2-Categories. The navigation was built, caching was implemented, everything seemed fine from a logic viewpoint, however it behaved weird where it would sometimes display the Level-2-Categories in a particular Level-1-Category and sometimes not or in different order.
When we finally found the bug (after hours of debugging) the scales fell off our eyes:

 $cacheID = md5($level1Cat->id.$level2Cat->id); ?>

Now imagine what happened when you had a $level1Cat with ID 1 and a $level2Cat with ID 12, that would write it’s cache to md5(‘112’); - and trying to open a $level1Cat with ID 11 and a $level2Cat with ID 2 it would read the cache md5(‘112’);. Unfortunately these classes did have the same interface, so no errors were thrown.
Changing the code to

 $cacheID = md5($level1Cat->id.'-'.$level2Cat->id); ?>

resolved the bug and finally fired the closing time-event for us.

I have a dream…

2008-03-31T21:16:00Z

Semantics is the reason why HTML exists: there are elements to tag headlines, tables, lists and countless other types of text to give the text a structure. I know ad providers wouldn’t even consider this, since it would make their ads easily blockable by ad-blockers like Adblock Plus for Firefox, but seeing German sites are required by law to mark advertisements and make them stick out of the text flow why isn’t there an element (or at least one on the to-do-list for HTML5) to make that tag machine-readable?
The only way to make ad providers use such an element would probably to require it by law - and given the expertise the German government has recently shown in laws concerning information technology and the Internet years will be passing by without an element *sigh*

Webmail done right

2008-02-22T17:25:39Z

I recently bought a (gs) shared hosting package at mediatemple.net. I’m not going to talk about their system now, but about their webmail client, which is provided by @Mail, their mail server. The @Mail web interface comes in 4 variations: Simple (which is plain HTML), Simple with AJAX (which is how most other webmail interfaces work today), Advanced for IE6+ (please, don’t ask me to comment on this one) and Advanced for Mozilla.
When I logged in using the Advanced for Mozilla interface I noticed something in the address bar: .webmail/parse.php?file=html/english/xul/xullogin.html&XUL=1. XUL? Wait… I’ve heard this before… A quick lookup at Wikipedia confirmed my thoughts: XUL is the XML User Interface Language, the Language the Firefox layout (i.e. XUL defines where the Home button is) is written in. But what does that mean for a webmail client? The answer is easy: It’s a hell lot faster than HTML + JavaScript, actually it’s running at the native speed of your browser, which is pretty amazing. The XUL interface also takes advantages of features your OS can do for you: The menus and lists are rendered by your OS and even sorting is done at native speed - awesome.
However, it’s still getting better: PGP built-in right into your webmail client! Unfortunately it seems you can’t upload your own key or download your private key after you generated a key using the webmail interface, but I’m sure we’ll see some improvements in the next version(s) of this software.

If you have a Firefox Browser at your hands, make sure to try the @Mail-Demo at http://demo.atmail.com/index.php

Jing

2008-02-03T15:36:00Z

Jing is a small application allowing you to create screenshots and screencasts up to 5 minutes - nothing revolutionary here. The new thing is, that Jing is capable of storing these files at either screencast.com, Flickr, a custom FTP server or your local hard drive (or network drive) and inserting a link to the file into your clipboard. This way you can share screenshots with your mates over IM or Email almost instantly.

After installation Jing docks to your screen edges and reveals it’s features on mouseover. Jing makes it super-easy to take screenshots and share them, once you’ve tried it, you’ll like it. Jing also comes with a screenshot/-cast history that allows you to delete old files to save some space. However, there are two downsides:

You’ll need to register with screencast.com on first startup even if you don’t intend to use it
You can’t create multiple FTP accounts (e.g. one for temporary files and another one for files you’d like to post in your blog and store permanently)

Jing is available for Mac and PC at http://www.jingproject.com/

Keeping yourself out of your Google Analytics statistics

2008-01-31T20:54:22Z

Based on Count me out on Analytics Talk I’m keeping myself out of my sites’ statistics. However Google released a new version of their tracking JavaScript in December and they’re no longer adding new features to the old urchin.js. So updating is a god idea, but I still want to keep my hits out of my site statistics.

A quick glance at the Google Analytics help center told me there was a way to set custom variables in the new JavaScript, too, so I modified my keep-me-out files:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>removing you from GoogleAnalytics...</title>
<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
	var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
	pageTracker._initData();
	pageTracker._trackPageview();
</script>
<script type="text/javascript">
function setSegment(next) {
	pageTracker._setVar('someSpecialTextYoullUseInACustomFilterInGoogleAnalytics');
	if (next.length > 0) {
		document.location.href =  next;
	} else {
		window.close();
	}
}
</script>
</head>
<body onload="setSegment('http://location.of/the.same.script.on.another.site.of.yours.to.redirect')">
</body>
</html>

So what is this doing? First, it loads the Google Analytics JavaScript (lines 5-8), then it initializes the tracking (lines 9-13) and last but not least the function (lines 14-23) that sets the custom value in the tracking class and redirects if you passed another URL to it (useful for chaining all your sites). Finally in line 25, the function gets called on page load.
Combined with “dom.allow_scripts_to_close_windows” in Firefox’ about:config you can add this page as a new start page tab and have it exclude you automagically every time you press the home button (and the window closes automatically after this, which keeps your tab bar clean).

GeSHify: a GeSHi syntax highlighting extension for Expression Engine

2008-01-30T19:51:51Z

Update: GeSHify has moved! Visit it's new home http://geshify.com/. This page is probably outdated!

So I figured out it would end as it always does (notice how I exaggerate here to keep the pathos of the text) - I had to do it my way. And here it is: GeSHify for Expression Engine.
GeSHify supports the following features:

Customizable intelligent caching (this one is very important, since GeSHi is not the fastest code highlighter out there)

Supports GeSHi 1.0 and GeSHi 1.1 (currently alpha) - and you can even switch between both using some clicks in the control panel

Customizable tag (in case you want to keep the original functionality of [ code ] instead of overwriting it, which is the default setting)

HTML-argument-style settings: you can pass something like lang=actionscript to the code tag

Default settings manageable using the control panel, so you don't have to pass all arguments each time you're pasting code

Want to see an example? Sure, no problem:


function activate_extension()
{
 global $DB;
 $DB->query($DB->insert_string('exp_extensions',
  array(
   'extension_id' => '',
   'class' => 'Geshify',
   'method' => 'pre_typography',
   'hook' => 'typography_parse_type_start',
   'settings' => serialize($this->settings_default),
   'priority' => 8,
   'version' => $DB->escape_str($this->version),
   'enabled' => 'y'
  )
 ));
 $DB->query($DB->insert_string('exp_extensions',
  array(
   'extension_id' => '',
   'class' => 'Geshify',
   'method' => 'post_typography',
   'hook' => 'typography_parse_type_end',
   'settings' => serialize($this->settings_default),
   'priority' => 8,
   'version' => $DB->escape_str($this->version),
   'enabled' => 'y'
  )
 ));
}
?>

If you know PHP and the Expression Engine API you might notice this is the place where the extension hooks into Expression Engine. If you don't you probably don't care either

Read on for Documentation and Download

Documentation

Please give me some feedback, whether you want me to include the original GeSHi package in the download and release a new version of GeSHify whenever GeSHi is updated or if you want to download GeSHi yourself, generating less updates to GeSHify where no GeSHify code actually changed.

This documentation expects your GeSHify tag name setting to be “code” and your delimiters to be “[” and “]”, which is the default. If you feel a need to do so, you can change these settings in your control panel by going to Admin » Utilities » Extensions Manager » GeSHify, where you will be provided a fancy settings manager.

code-tag syntax

To parse code with GeSHify, you need to wrap it in [code] and [/code]. You can optionally pass the following arguments

lang
lang=[identifier of the GeSHi language file you want to use for parsing this code block]
Default value can be changed in the control panel. Check the GeSHi website for possible values - note that these values might differ from GeSHi 1.0 to GeSHi 1.1 even for the same code-language
Example: [code lang=php][/code]
line
line=[none|fancy99|normal]
type of line numbering to use. Possible values are “none” for no line numbers, “normal” for standard line numbers and “fancy” followed by a number where each number^th line will be highlighted in a different color. The default value can be changed in the control panel.
Example: [code line=none][/code] for no line numbers, [code line=fancy5][/code] for each 5^th line number in a different color and [code line=normal][/code] for standard line numbers.
start
start=[number]
first line number to be used
Example: [code start=5][/code] will start line numbering at 5; very useful, if you're trying to split a file in multiple parts, but still have consistent line numbers.
strict
strict=[true|false|1|0]
whether to use strict mode, where you'll have to include the start and end tag in interpreted languages like e.g. PHP. Defaults to false on GeSHi 1.0 and true on GeSHi 1.1.
Example: [code strict=true][/code] or [code strict=1][/code] for strict handling, [code strict=false][/code] or [code start=0][/code] for non-strict handling.
keyword_links
keyword_links=[true|false|1|0]
whether to link special keywords with online documentation for the language used (e.g. PHP keywords will be linked to php.net when this is enabled). Default value can be changed in the control panel.
Example: [code keyword_links=true][/code] or [code keyword_links=1][/code] for linked keywords, [code keyword_links=0] or [code keyword_links=false] to disable keyword links.
overall_id
overall_id=[id string to use in the id attribute of the code container]
ID attribute to assign to the HTML element containing the source code after hightlighting. You can use this to apply custom CSS or JavaScript.
Example: [code overall_id=heapsort_in_php][/code]
overall_class
overall_class=[class name to add to the class attribute of the code container]
class name to add to the class list of the HTML element containing the source code after highlighting. You can use this to apply custom CSS or JavaScript.
Example: [code overall_class=sorting_algorithms_in_php][/code]

Caching

GeSHify will cache your highlighted source code until it is being modified or until there hasn't been any hit on the page containing it for 24h (you can change that value using the control panel). GeSHify will clear old cache files based on a 10% chance with each hit (random number generators ftw!). If you'd like to clear your cache manually delete the contents of your system/cache/geshify_cache directory (if you changed the cache directory setting in the GeSHify extension settings this directory will be located somewhere else)

License

GeSHify is released under the GPL.

Bugs and known limitations

Please report any bugs you encounter or and features you'd like to see by commenting on this post or by mailing to neverpanic@gmail.com

GeSHi 1.1 is alpha software - many code libraries are missing and neither line numbering nor disabling strict mode work with GeSHi 1.1 yet.

Download & Changelog

GeSHify has a new home at geshify.com. Please get it from there.

Forms with WuFoo

2007-12-20T20:08:16Z

I've been listening to Technikwürze Podcast, Episode 104 (a german podcast about design and webstandards) and they've been talking about WuFoo, an online service to create HTML forms. You can create forms using drag and drop on their site. If you want their server side validation, their statistics and their database power, you can purchase a paid subscription plan, but what I want to point out today is their XHTML/CSS export feature.

When you create a form, click the code-button and choose “XHTML/CSS code only” on the right they'll serve you the correct XHTML and CSS code for the form you designed ready somewhat ready to include it into your web site. I moved all their CSS rules into some kind of “namespace” so they wouldn't interfere with my site's CSS rules (particularly my CSS files require the form to be in an element with class “wf” assigned to it and the IDs being used in the form are prefixed with “wf_”). I added some jQuery JavaScript for the cool eye candy-effects and that's it. Now I can easily insert WuFoo-generated forms in my site (and oh boy, I will).

Note that you will have to take care of form validation yourself - you're not using the WuFoo guys' servers and I didn't include client-side validation in my JavaScript.

If you'd like to use my modified CSS file and my jQuery JavaScript code scroll down for a highlighted version or get it here: CSS and jQuery JavaScript. The CSS and XHTML code has been released under a CreativeCommons Attribution 2.5 license and I'm hereby releasing the jQuery code under the same license.

 
/* - - - - - - - - - - - - - - - - - - - - -
Title : Wufoo Form Structure
Author : Infinity Box Inc.
URL : http://wufoo.com
Last Updated : September 30, 2007
- - - - - - - - - - - - - - - - - - - - - */
.wf {
	margin:7px 0 15px 0;
	text-align:center;
	font-size:small;
	background:#fff3e8;
	font-family:Verdana,Geneva,Helvetica,sans-serif;}
.wf #wf_container {
	text-align:left;
	background:#fff3e8;}
.wf #wf_container, .wf #wf_top, .wf #wf_bottom, .wf #wf_footer {
	margin:0 auto;
	width:90%;
}
.wf #wf_top, .wf #wf_bottom {
	width:90%;
	height:10px !important;
	display:block !important;
}
.wf #wf_top {margin-top:10px;}
.wf form.wufoo {
	margin:20px auto 0 auto;
	padding:0 0 20px 0;
}
/* ----- LOGO ----- */
.wf h1 {
	margin:0;
	padding:0;
	min-height:0;
	background-color:#dedede;
	text-indent:-9000px;
	text-decoration:none;
}
.wf h1 a {
	height:100%;
	min-height:40px;
	display:block;
	/*background:url(/images/wflogo.png) no-repeat left top;*/
	overflow:hidden;
}
* html .wf h1 a {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/wflogo.png", sizingMethod="crop");
}
.wf img {
	/*behavior: url(/images/iepngfix.htc);*/
	border:none;
}
.wf .hide {
	display:none !important;
}
/* - - - - - - - - - - - - - - - - - - - - -
Title : Wufoo Form Foundation
Author : Infinity Box Inc.
URL : http://wufoo.com
Last Updated : November 13, 2007
- - - - - - - - - - - - - - - - - - - - - */
.wf .wufoo {font-family:Verdana,Geneva,Helvetica,sans-serif;
	font-size:small;
}
.wf .wufoo li {width:62%;}
.wf form ul {
	margin:0;
	padding:0;
	list-style-type:none;
	width:100%;
	font-size:100%;
}
.wf form li {
	margin:0;
	padding:4px 5px 2px 9px;
	position:relative;
	clear:both;
}
.wf form li.focused label {
	color: #fff3e8;}
.wf form input.focused,
.wf form textarea.focused,
.wf form select.focused {
	border-color: #f00;}
.wf form li:after, .wf .buttons:after {
	content:"."; 
	display:block;
	height:0; 
	clear:both; 
	visibility:hidden;
}
.wf form li, .wf .buttons {
	display: inline-block;
}
 
* html .wf form li, * html .wf .buttons {
	height: 1%;
}
.wf form li, .wf .buttons {
	display: block;
}
* html .wf form li div {display:inline-block;}
.wf form li div, .wf form li span {
	margin:0 4px 0 0;
	padding:0 0 8px 0;
	color:#444;
}
.wf form li span {float:left;}
.wf form li div.address {padding-bottom:0;}
.wf form li div.left {
	display:inline;
	float:left;
	width:47%;
}
.wf form li div.right {
	display:inline;
	float:right;
	width:47%;
}
.wf .clear {
	clear:both !important;
}
/* ----- INFO ----- */
.wf .info {
	display:inline-block; 
	clear:both;
	border-bottom:1px dotted #ccc;
	margin:0 0 1em 0;
}
.wf .info[class] {display:block;}
.wf .info h2 {
	font-weight:normal;
	font-size:160%;
	margin:0 0 3px 0;
	clear:left;
}
.wf .info p {
	font-size:95%;
	line-height:135%;
	margin:0 0 12px 0;
}
/* ----- SECTIONS ----- */
.wf form hr {display:none;}
.wf form li.section {
	border-top:1px dotted #ccc;
	margin-top:9px;
	padding-top:13px;
	padding-bottom:0px;
	padding-left:9px;
	width:97% !important;
}
.wf form ul li.first {
	border-top:none !important;
	margin-top:0px !important;
	padding-top:0px !important;
}
.wf form .section h3 {
	font-weight:normal;
	font-size:110%;
	line-height:135%;
	margin:0 0 2px 0;
}
.wf form .section p {
	font-size:85%;
	margin:0 0 10px 0;
}
/* ----- FIELDS AND LABELS ----- */
.wf label.desc {
	line-height:150%;
	padding:0 0 1px 0;
	border:none;
	color:#222;
	display:block;
	font-size:95%;
	font-weight:bold;
}
.wf label.choice {
	font-size:100%;
	display:block;
	line-height:1.4em;
	margin:-1.55em 0 0 25px;
	padding:4px 0 5px 0;
	color:#222;
	width:90%;
}
.wf form li div label, .wf form li span label {
	margin:0;
	padding-top:3px;
	clear:both;
	font-size:9px;
	line-height:9px;
	color:#444;
	display:block;
}
.wf input.text, .wf input.file, .wf textarea.textarea, .wf select.select {
	margin:0;
	font-size:100%;
	color:#333;
}
.wf input.text, .wf textarea.textarea, .wf .firefox select.select {
	border-top:1px solid #7c7c7c;
	border-left:1px solid #c3c3c3;
	border-right:1px solid #c3c3c3;
	border-bottom:1px solid #ddd;
	background:#fff3e8;
	/*url(/images/fieldbg.gif) repeat-x top*/;
}
.wf input.text, .wf input.file {
	padding:2px 0 2px 0;
}
.wf input.currency {text-align:right;}
.wf input.checkbox, .wf input.radio {
	display:block;
	line-height:1.4em;
	margin:6px 0 0 3px;
	width:13px;
	height:13px;
}
.wf textarea.textarea {font-family:Verdana,Geneva,Helvetica,sans-serif;}
.wf select.select {font-family:Verdana,Geneva,Helvetica,sans-serif;
	margin:1px 0;
	padding:1px 0 0 0;
}
.wf select.select[class] {
	margin:0;
	padding:1px 0 1px 0;
}
*:first-child+html .wf select.select[class] {
	margin:1px 0;
}
.wf .safari select.select {
	margin-bottom:1px;
	font-size:120% !important;
}
.wf span.symbol {
	font-size:115%;
	line-height:130%;
}
.wf form li .datepicker {
	float:left;
	margin:.1em 5px 0 0;
	padding:0;
	width: 16px;
	height: 16px;
	cursor:pointer !important;
}
/* ----- BUTTONS ----- */
.wf input.btTxt {
	padding:0 7px;
	width:auto;
	overflow:visible;
}
.wf .buttons {
	clear:both;
	margin-top:10px;
}
.wf .buttons input {
	font-size:120%;
	margin-right: 5px;
}
/* ----- TEXT DIRECTION ----- */
.wf .rtl .info h2,
.wf .rtl .info p,
.wf .rtl label.desc,
.wf .rtl label.choice,
.wf .rtl div label,
.wf .rtl span label,
.wf .rtl input.text,
.wf .rtl textarea.textarea,
.wf .rtl select.select,
.wf .rtl p.instruct,
.wf .rtl .section h3,
.wf .rtl .section p,
.wf .rtl input.btTxt {direction:rtl;}
/* ----- SIZES ----- */
.wf .third {
	width:32% !important;
}
.wf .half {
	width:48% !important;
}
.wf .full {
	width:100% !important;
}
.wf input.small, .wf select.small {width:25%;}
.wf input.medium, .wf select.medium {width:50%;}
.wf input.large, .wf select.large, .wf textarea.textarea {width:100%;}
.wf textarea.small {height:5.5em;}
.wf textarea.medium {height:10em;}
.wf textarea.large {height:20em;}
/* ----- ERRORS ----- */
.wf #wf_errorLi {
	width:99%;
	margin:0 auto;
	background:#933000;
	border:1px dotted red;
	margin-bottom:1em;
	text-align:center;
	padding-top:4px;
	padding-left:0px;
	padding-right:0px;
}
.wf #wf_errorMsgLbl {
	margin:7px 0 5px 0;
	padding:0;
	font-size:125%;
	color:#DF0000;
}
.wf #wf_errorMsg {
	margin:0 0 .8em 0;
	color:#000;
	font-size:100%;
}
.wf #wf_errorMsg strong {
	background-color: #FFDFDF;
	padding:2px 3px;
	color:red;
}
.wf form li.error {
	display:block !important;
	background-color: #FFDFDF !important;
	margin:3px 0;
}
.wf form li.error label {
	color:#DF0000 !important;
}
.wf form p.error {
	color:red;
	font-weight:bold;
	font-size:10px;
	margin:-2px 0 5px 0;
	clear:both;
}
.wf .leftLabel p.error, .wf .rightLabel p.error {
	margin-left:30%;
	padding-left:15px;
}
.wf .noI .leftLabel p.error, .wf .noI .rightLabel p.error {
	margin-left:35%;
	padding-left:15px;
}
/* ----- REQUIRED ----- */
.wf form .req {
	float:none;
	color:red !important;
	font-weight:bold;
	margin:0;
}
/* ----- INSTRUCTIONS ----- */
.wf form li.focused {
	background: #351008;
	color: #fff3e8;}
.wf form .instruct {
	position:absolute;
	top:0;
	left:100%;
	z-index:1000;
	width:42%;
	margin:0 0 0 8px;
	padding:8px 10px 9px 10px;
	border:1px solid #e6e6e6;
	background:#f5f5f5;
	line-height:130%;
	font-size:80%;
	color:#444;
	visibility:hidden;
}
.wf form .instruct small {font-size:105%;}
.wf form li.focused .instruct, .wf form li:hover .instruct {visibility:visible;}
/* ----- ALT INSTRUCTIONS ----- */
.wf li.altInstruct .instruct,
.wf li.leftHalf .instruct,
.wf li.rightHalf .instruct {
	visibility:visible;
	position:static;
	margin:-2px 0 0 0;
	padding:0 0 7px 0;
	background:none;
	border:none;
	width:100%;
	font-size:9px;
	clear:left;
}
/* ----- LABEL LAYOUT ----- */
.wf .leftLabel li,
.wf .rightLabel li,
.wf li.leftLabel,
.wf li.rightLabel {
	width:97% !important;
	padding-top:9px;
}
.wf .leftLabel .small,
.wf .rightLabel .small {width:17%;}
.wf .leftLabel .medium,
.wf .rightLabel .medium {width:35%;}
.wf .leftLabel .large,
.wf .leftLabel textarea.textarea,
.wf .rightLabel .large,
.wf .rightLabel textarea.textarea,
.wf .leftLabel .address,
.wf .rightLabel .address {width:64%;}
* html .wf .leftLabel .small,
* html .wf .rightLabel .small {width:23%;}
* html .wf .leftLabel .medium,
* html .wf .rightLabel .medium {width:55%;}
* html .wf .leftLabel .large,
* html .wf .leftLabel textarea.textarea,
* html .wf .rightLabel .large,
* html .wf .rightLabel textarea.textarea {width:97%;}
.wf .leftLabel label.desc,
.wf .rightLabel label.desc {
	float:left;
	width:30%;
	margin:2px 15px 0 0;
}
.wf .rightLabel label.desc {text-align:right;}
.wf .leftLabel .address,
.wf .rightLabel .address {float:left;}
.wf .leftLabel p.instruct,
.wf .rightLabel p.instruct {
	width:27%;
	margin-left:5px;
}
.wf .leftLabel .altInstruct .instruct,
.wf .rightLabel .altInstruct .instruct {
	margin-left:30% !important;
	padding-left:15px;
	width:65%;
}
.wf .leftLabel .buttons,
.wf .rightLabel .buttons {margin-left:15px;}
.wf .leftLabel .buttons input,
.wf .rightLabel .buttons input {margin-left:30%;}
/* ----- NO INSTRUCTIONS ----- */
.wf .noI .instruct {
	display:none !important;
}
.wf .noI form li,
.wf .noI form li.buttons {
	width:97% !important;
}
.wf .noI form li.section {
	padding-left:9px !important;
}
/* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
.wf .noI .leftLabel .large,
.wf .noI .leftLabel textarea.textarea,
.wf .noI .rightLabel .large,
.wf .noI .rightLabel textarea.textarea,
.wf .noI .leftLabel .address,
.wf .noI .rightLabel .address {width:60%;}
* html .wf .noI .leftLabel .small,
* html .wf .noI .rightLabel .small {width:23%;}
* html .wf .noI .leftLabel .medium,
* html .wf .noI .rightLabel .medium {width:55%;}
* html .wf .noI .leftLabel .large,
* html .wf .noI .leftLabel textarea.textarea,
* html .wf .noI .rightLabel .large,
* html .wf .noI .rightLabel textarea.textarea {width:97%;}
.wf .noI .leftLabel label.desc,
.wf .noI .rightLabel label.desc {width:35%;}
.wf .noI .leftLabel .buttons input,
.wf .noI .rightLabel .buttons input {margin-left:35%;}
/* ----- FIELD FLOATING ----- */
.wf form li.leftHalf,
.wf form li.rightHalf {
	width:46% !important;
}
.wf li.leftHalf {
	clear:left;
	float:left;
}
.wf li.rightHalf {
	clear:none;
	float:right;
}
.wf li.leftHalf .medium,
.wf li.rightHalf .medium,
.wf li.leftHalf .small,
.wf li.rightHalf .small {width:100%;}

$(function() {
	$('.wf input, .wf textarea, .wf select').each(function() {
		if (this.type != 'submit' && this.type != 'button' && this.type != 'hidden') {
			$(this).focus(function() {
				var parent = $(this).parent();
				while (!$(parent).is('li')) {
					parent = $(parent).parent();
				}
				$(parent).addClass('focused');
				$(this).addClass('focused');
			});
			$(this).blur(function() {
				var parent = $(this).parent();
				while(!$(parent).is('li')) {
					parent = $(parent).parent();
				}
				$(parent).removeClass('focused');
				$(this).removeClass('focused');
			});
		};
	});
});