/* Fonts */

*
	{ line-height: 1.25; font-size: 100%; font-family: "dejavu sans", "bitstream vera sans", verdana, sans-serif; }

PRE, CODE, TEXTAREA, *.monospace, *.filename
	{ font-family: "courier 10 pitch", "courierps", "courier new", monospace; }

/* Basic formatting... */

BODY	{ margin: 0em; border: 0em; padding: 0em; }

H1		{ font-size: 1.72em; margin-top: 0.87em; margin-bottom: 0.44em; font-weight: bold; }
H2		{ font-size: 1.44em; margin-top: 1.04em; margin-bottom: 0.52em; font-weight: bold; }
H3		{ font-size: 1.20em; margin-top: 1.25em; margin-bottom: 0.63em; font-weight: bold; }
H4		{ font-size: 1.00em; margin-top: 1.50em; margin-bottom: 0.75em; font-weight: bold; }
H5		{ font-size: 1.00em; margin-top: 1.50em; margin-bottom: 0.75em; font-weight: bold; }
H6		{ font-size: 1.00em; margin-top: 1.50em; margin-bottom: 0.75em; font-weight: bold; }

H1				{ text-align: center; }
H1.small		{ font-size: 1.00em; margin-top: 1.50em; margin-bottom: 0.75em; }

P				{ margin: 0.75em 0em; }
PRE				{ margin: 0.75em 1.5em; }

UL, OL, DL		{ margin: 0.75em 0em 0.75em 1.5em; padding: 0em; }
LI UL, LI OL	{ margin-top: 0.5em; margin-bottom: 0.5em; }
LI				{ margin: 0.25em 0em; }
UL				{ list-style-type: disc; }
UL UL			{ list-style-type: circle; }
DT				{ margin: 0.75em 0em 0.25em 0em; font-weight: bold; }
DD				{ margin: 0.25em 0em 0.25em 1.5em; }
DD UL, DD OL	{ margin-top: 0.5em; margin-bottom: 0.75em; }

IMG				{ margin: 0px; padding: 0px; border: 0px; }

HR				{ width: 100%; margin: 1em 0em; }

/* Class specific layout... */

P.small				{ font-size: 0.8em; margin-top: 0.9375em; margin-bottom: 0.9375em; }
P.subtitle			{ font-size: 0.8em; margin-top: -0.625em; margin-bottom: 0.9375em; text-align: center; }
P.illustration		{ margin-left: 1.5em; margin-right: 1.5em; } 
P.illustration IMG	{ vertical-align: text-bottom; }

/* For forms... */

FORM DIV			{ margin: 0.75em 1.5em; }
INPUT, TEXTAREA		{ margin: 0.25em 0em; }
*.input-text		{ width: 100%; }

/* Layout */

DIV#header,
DIV#content,
DIV#footer		{ margin-left: 139px; }
DIV#skip,
DIV#menu		{ width: 120px; float: left; clear: right; }
DIV#content		{ padding-left: 19px; border-left: 2px solid #e0e0e0; }
DIV#content-end	{ clear: both; }
DIV#footer		{ clear: both; padding-top: 0.75em; }
DIV#header		{ margin-bottom: 1.5em; }

H1 SPAN#title2	{ margin-left: 0.5em; }

DIV#menu UL		{ list-style-type: none; margin: 0em; padding: 0em; line-height: 1; position: relative; left: 0px; }
DIV#menu LI		{ margin: 0.75em 0em; }

DIV#footer		{ text-align: center; font-size: 0.8em; }

DIV.title-with-switcher,
DIV.section-title,
DIV.item-title		{ margin-top: 1.50em; margin-bottom: 0.75em; }
DIV.section-title *,
DIV.item-title *	{ margin-top: 0em; margin-bottom: 0em; display: inline-block; }
DIV.section-title P,
DIV.item-title P	{ margin-left: 0.75em; }

DIV.thumbnails		{ width: 100%; float: right; font-size: 0.86em; }
DIV.thumbnail		{ width: 180px; margin: 0.75em 0em; text-align: center; display: inline-block; vertical-align: top; }
DIV.thumbnail		{ float: left; }
DIV.thumbnail P		{ margin-left: 0.75em; margin-right: 0.75em; }
DIV.description		{ width: 100%; clear: right; }

A SPAN.popup-image,
A SPAN.popup-text	{ display: none; }

P.tagline			{ text-align: center; font-style: italic; }

DIV.page-switcher	{ height: 1.25em; margin: 0.25em 0em; }
P.next				{ width: 42%; float: right; text-align: left; margin: 0em; }
P.prev				{ width: 42%; float: left; text-align: right; margin: 0em; }
P.up				{ width: 14%; text-align: center; margin: 0em auto; }
P.next A:after		{ content: url(graphics/right-arrow.png); margin-left: 0.25em; vertical-align: text-top; }
P.prev A:before		{ content: url(graphics/left-arrow.png); margin-right: 0.25em; vertical-align: text-top; }

DIV.title-with-switcher DIV.item-title,
DIV.title-with-switcher DIV.section-title	{ width: 71%; margin: 0em; }
DIV.title-with-switcher DIV.page-switcher	{ width: 21.5%; height: auto; float: right; margin: 0em; margin-right: 4.5%; }
DIV.title-with-switcher P.next				{ width: auto; }
DIV.title-with-switcher P.prev				{ width: auto; }

DIV.portrait-pic	DIV.main-pic		{ width: 516px; float: left; }
DIV.landscape-pic						{ width: 708px; } /* Should be 704 but IceWeasel printing doesn't manege to fit 4 small-pic in this */
DIV.main-pic,
DIV.small-pic		{ vertical-align: top; font-size: 0.86em; }
DIV.main-pic IMG,
DIV.small-pic IMG	{ vertical-align: bottom; }
DIV.small-pics P	{ max-width: 160px; }

DIV.portrait-pic DIV.small-pics		{ float: left; }
DIV.landscape-pic DIV.small-pics	{ width: 100%; float: right; }
DIV.portrait-pic DIV.small-pic		{ margin: 12px; margin-top: 0px; margin-right: 0px; float: left; clear: left; text-align: left; }
DIV.landscape-pic DIV.small-pic		{ margin: 12px; margin-left: 0px; margin-bottom: 0px; float: left; text-align: center; }

DIV.portrait-pic DIV.small-pic 
					{ position: relative; left: 0px; }
DIV.portrait-pic DIV.small-pic A:hover SPAN.popup-image
					{ display: block; position: absolute; right: 100%; top: -160px; text-align: center; }
DIV.portrait-pic SPAN.popup-image
					{ margin-right: 0px; }
DIV.landscape-pic DIV.small-pic
					{ position: relative; left: 0px; }
DIV.landscape-pic DIV.small-pic A:hover SPAN.popup-image
					{ display: block; position: absolute; left: -200px; bottom: 100%; }
DIV.landscape-pic SPAN.popup-image
					{ margin-bottom: 0px; }

IMG.illustration-right	{ width: auto; float: right; margin: 0em 0em 0em 0.75em; }
IMG.illustration-left	{ width: auto; float: left; margin: 0em 0.75em 0em 0em; }

A						{ text-decoration: none; }
A:link:hover			{ text-decoration: underline; }
A:visited:hover			{ text-decoration: underline; }
A SPAN.popup			{ text-decoration: none; }

/* Colours... */

*					{ background: transparent; }
HTML				{ background: white; color: #404040; }
H1, H2, H3,
A:link, A:visited	{ color: #c04080; }
H1 SPAN#title2,
DIV.main-pic,
DIV.small-pic,
A SPAN.popup,
*.thumbnails		{ color: #808080; }

A:hover IMG			{ border: 1px solid #c04080; }
A IMG				{ padding: 1px; border: 1px solid transparent; }
SPAN.popup-text		{ background: #ffffc0; padding: 0.5em; border: 1px solid black; }
SPAN.popup-image	{ background: #e0e0e0; padding: 12px; }

FORM, TABLE TD			{ border: 1px solid #c0c0c0; }
FORM					{ width: 718px; } /* Should be 720px but IE has a broken box model */
INPUT.button			{ background: #f0f0f0; border: 2px outset #c0c0c0; }

PRE						{ padding: 0.5em; }
PRE,
*.input-text			{ background: #f0f0f0; border: 1px solid #c0c0c0; }

DIV#skip A:link,
DIV#skip A:visited		{ font-size: 80%; color: white; }
DIV#skip A:active,
DIV#skip A:focus		{ font-size: 80%; color: #c04080; ; }

/* Media specific layout... */

@media screen
	{
	BODY		{ width: 880px; margin: 0em auto; padding: 0px 20px; }
	HTML		{ overflow-y: scroll; font-size: 0.86em; }
	/* Use max-width instead on browsers which support CSS2... */
	HTML>BODY	{ width: auto; max-width: 880px; min-width: 340px; }
	}

@media print
	{
	BODY		{ max-width: 720px; margin: 0em auto; }
	HTML		{ font-size: 0.86em; }
	DIV#skip,
	DIV#menu	{ display: none; }
	DIV#header,
	DIV#content,
	DIV#footer	{ margin-left: 0px; }
	DIV#content	{ padding-left: 0px; border-left: none; }
	H1			{ margin-top: 0em; }
	A:link, A:visited	{ background: inherit; color: inherit; }
	}

@media handheld
	{
	BODY { min-width: 340px; margin: 0em; padding: 0px 4px; }
	* { line-height: 1.1; }
	}