Standard model

Need a login form? Just insert <form class="panel"> to get going. Child markup contains the usual <ul> with a 'Login' button (<input type="submit" value="Login" class="button pinkBtn />) sat outside the <ul>, but inside the <fieldset>.

All symbols sit inside:
<ul class="symbols">.

Each <li> contains an image, which has the necessary src link, alt tag and title tag. The title tag is necessary for the tool tip neatness to work.

To divide sets of symbols with a title, just insert a new list item: <li class="title">.

For acquisition dates, insert: <li class="date"> and the year between the tags.

Tool tips are enabled with tipTip.

Reasonably simple markup used throughout, but a few things to be aware of.

Attach classes short, medium or long to the list element of forms. Child elements (like <label>s and <input>s, will adapt.

Form elements use percent widths so our forms will always fill the available space. This helps with the form comparison feature we're implementing.

Be sure to wrap radio buttons in <ul class="radioButtons"> and the buttons themselves inside a <label>.

Some form elements, like the Handbook data's Exploring section, require a layout that is representative of how they look in the handbook.

Just wrap the standard <ul> inside a <div class="indent">. A <p class="title"> should be placed before the <ul> to explain the context of the unit.

Start these as normal, inside <ul class="double"> and for every child <li> add a vanilla <ul> with the necessary labels and such like.

Symbols in forms work by including all the relevant bits inside a <label>.

It's just a matter of including the correct classes, images and text for each symbol.

So as not to complicate things, we've simplified the approach to assets of an attraction. These symbols (and optional rename facility) should occupy individual <fieldset>s.

For comparison, put 'half' forms inside parent <div>s and apply any borders (to act as dividers) and padding, etc, to them – not the <form>s.

The form on the right needs the class comparison added to it, too.

Whether it be nobler in the mind... whoops... uh... whether it be an <a href="">, <input type="submit" /> or a <button>, just add the class button to make it look like those on the left.

Oh, and choose the appropriate colour and class for your purposes.

Assemble multiple buttons in a <ul class="workflow">.

<li>s can be filled with <a>s or <input>s or <button>s.

Lightbox is quite simple. Check source for correct markup.