Previously the overflow rule was together with font-size:79.8%,
but that was only applied to Tablet examples.

Wrap all icons in index pages inside div. For touch examples, add
extra touch-examples-ui class to examples index page and adjust the
styling a little in CSS.

Modified origin commit by Nick Poulden by wrapping ExtJS welcome
page inside <div id="extjs-welcome"> similarly to Touch welcome
page inside <div id="touch-welcome">.  This way they're both
nicely wrapped and ExtJS welcome page doesn't get screwed up.

Previously we relied on builtin maxHeight of container, but that
also limited the height of the live preview which we wanted to be
larger.  Not doing our own bounds-checking.

The happened when the welcome page was first loaded and then one
switched to API tab. It happened because the class tree was activated
while it was hidden, so height calculations couldn't be performed
correctly. Fixed by adding an empty item to trees container that's
activated first instead of the class tree.

Previusly only the guides tree was expanded, which looked strange (like
a bug) compared to others.

The default 'landscape' now default to a view where the phone is in
portrait orientation, but because the screen is cut in half, the
resolution is actually a landscape.

Most importantly it allows us to simply write @example miniphone,
instead of having to write @example miniphone portrait - the default
landscape orientation is now the thing that one needs 99% of time.

Only `@example preview` will now switch automatically to preview mode.
The default is code-editor mode.  This also means the Touch examples
aren't switched to preview mode by default.

Because code-editor mode can now be startup mode for Touch examples,
fix the initial height calculation on that case.  Overall recalculate
the example height when switching between modes.

Also document the options object.

Miniphone is rendered as half of iPhone.

So one would typically use:

    @example miniphone portrait

The landscape mode is probably useless, but it's there for
completeness's sake.

Also allow more then one dot (".") in the name of an alias.

The height of the whole editor collapsed to 0px.

The leaf property happened to have three possible values: true, false, undefined.
But it was assumed there's only two. Eliminated the undefined case.

For now I'm just turning it on for Touch 2.  But I'm thinking of making
it the default overall.

The device widths are all calculated now in one place.

50% size was right off - this way tablet examples would be smaller than phone
examples, plus the text became too small to read.

75% was also tried, but it seemed just a little bit too big, so I went
with 70%.

Also removed the duplicted iPad image files.

All words added after @example tag are converted into CSS classes.
The classes are detected in frontend and appropriate styling is applied.

The default is: phone landscape.