/*
====
==== Summary
====
*/

/*
These styles are used for
all but the site title.
*/

/*
====
==== Accessibility
====
*/

/*
Some things are vital to
those using screen readers,
but obstruct sighted users.
*/
.hidden
{
	position: absolute;
	left: 0px;
	top: -500px;
	width: 1px;
	height: 1px;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
	visibility: hidden;
}

/*
====
==== Page layout
====
*/

/*
The overall style is a menu bar
that appears on the left visually,
but the top for screen readers.
*/
body
{
	margin: 0px;
	border: 0px;
	padding: 0px;
	font-family: 'Arial', sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 10pt;
	text-align: left;
	background-position: 0 0;
	background-image: url("/images/navigation.png");
	background-repeat: repeat-y;
}

/*
Paragraphs should be
justified by default.
*/
p
{
	text-align: justify;
}

/*
Images generally look bad with
borders unless explicitly styled
with a more appropriate border.
*/
img
{
	border: none;
}

/*
For image captions meant to be
analogous to those of a table.
*/
span.imagecaption
{
	text-transform: uppercase;
	font-size: 80%;
	line-height: 150%;
}

/*
For image set choice menus.
*/
p.imagesetmenu
{
	border-width: 1px;
	border-style: solid;
	text-transform: uppercase;
	font-size: 80%;
	line-height: 80%;
	padding-top: 5px;
	padding-bottom: 5px;
}
p.imagesetmenu a
{
	padding: 0px;
	padding-left: 1px;
	padding-right: 1px;
	line-height: 150%;
}
p.imagesetmenu a:hover
{
	padding: 0px;
	text-decoration: none;
	border-width: 1px;
	border-style: solid;
}

/*
Extra spacing about paragraphs
*/
p.spaceabove
{
	padding-top: 6pt;
}
p.spacebelow
{
	padding-bottom: 6pt;
}

/*
====
==== Navigation menu bar
====
*/

/*
The navigation bar itself
*/
div.navigation
{
/*
	position: fixed;
	height: 100%;
	overflow: auto;
*/
	position: absolute;
	top: 0px;
	left: 0px;
	float: left;
	margin: 0px;
	border: 0px;
	padding: 0px;
	padding-bottom: 14px;
	width: 200px;
	color: white;
	background-color: teal;
}

/*
Images placed directly on the
navigation bar when used with
browsers mishandling z-order.
*/
img.navigation
{
	background-image: url("/images/navigation.png");
}

/*
Defaults for all elements
*/
div.navigationbuttons,
div.sectionbuttons,
div.compliance,
div.colorselect
{
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
}

/*
Default margins and padding for headings and buttons
*/
div.navigationbuttons p,
div.sectionbuttons p,
div.compliance p,
div.colorselect p,
div.navigationbuttons a,
div.sectionbuttons a,
div.compliance a,
div.colorselect a,
form.colorselect,
div.compliancelogos
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 11px;
	margin-bottom: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
}

/*
Compensate for form defaults
*/
form.colorselect
{
	padding-top: 1px;
	padding-bottom: 1px;
}

/*
Defaults for headings and buttons
*/
div.navigationbuttons p,
div.sectionbuttons p,
div.compliance p,
div.colorselect p,
div.navigationbuttons a,
div.sectionbuttons a,
div.compliance a,
div.colorselect a
{
	display: block;
	border-style: solid;
	border-width: 3px;
	width: 180px;
	text-decoration: none;
}

/*
Heading colors and format
*/
div.navigationbuttons p,
div.sectionbuttons p,
div.compliance p,
div.colorselect p
{
	text-align: center;
	border-color: rgb(72,0,0);
	color: yellow;
	background-color: maroon;
}

/*
Section button colours
*/
div.sectionbuttons a
{
	border-color: rgb(152,0,152) rgb(104,0,104) rgb(104,0,104) rgb(152,0,152);
}
div.sectionbuttons a:link
{
	color: lime;
	background-color: purple;
}
div.sectionbuttons a:visited
{
	color: lime;
	background-color: purple;
}
div.sectionbuttons a:active
{
	color: red;
	background-color: aqua;
}
div.sectionbuttons a:hover
{
	color: lime;
	background-color: aqua;
}

/*
Navigation button colours
*/
div.navigationbuttons a
{
	border-color: rgb(100,120,250) rgb(20,80,150) rgb(20,80,150) rgb(100,120,250);
}
div.navigationbuttons a:link
{
	color: yellow;
	background-color: blue;
}
div.navigationbuttons a:visited
{
	color: yellow;
	background-color: blue;
}
div.navigationbuttons a:active
{
	color: red;
	background-color: aqua;
}
div.navigationbuttons a:hover
{
	color: green;
	background-color: aqua;
}

/*
The W3C compliance logos.
-------------------------
These have to be handled
differently; fortunately,
there is transparancy for
centering with the ticks
and by chance, the width
is such that abutting two
together gives the visual
effect but still inline.
-------------------------
In five years it has not
been necessary to widen
the navigation bar; if it
ever is, hopefully CSS3
will then be widespread;
otherwise, the old trick
of CSS to fake tables is
then going to be needed.
*/
div.compliancelogos
{
	padding: 0;
	border: 0;
	width: 186px;
	font-size: 0px;
	line-height: 0px;
}
div.compliance a
{
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0px;
	line-height: 0px;
}

/*
====
==== Content area
====
*/

/*
The container to hold the
content area on the right.
This selects all but the
area of the navigation
bar and the actual content
area will be centered
within it, irrespective of
formatting applied within
the content area itself.
*/
div.container
{
	margin-left: 200px;
	margin-right: 0px;
	margin-top: 0px;
	border: 0px;
	padding: 0px;
}

/*
The actual content area, in
different widths to suit the
type of content it can hold.
----------------------------
CSS is not object-oriented,
but the following technique
gives a good approximation.
The idea is that generic,
contact, links, gallery and
guestdata are "subclasses"
of content, with specific
width values. Note that
content is a partly virtual
class that is only meant to
be used by subclassing it;
the nominal value of 80px
for the width is to avoid
problems with user agents
that mishandle zero width.
----------------------------
*/
div.content,
div.generic,
div.allofit
{
	margin-left: auto;
	margin-right: auto;
	width: 80px;
	margin-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 6pt;
}
div.generic {width: 450px;}
div.allofit
{
	margin-left: 10px;
	margin-right: 10px;
	width: inherit;
}

/*
====
==== Logo and icon related
====
*/

/*
Used to work around "image
false line height" problem.
*/
span.imageblock
{
	font-size: 0px;
	line-height: 0px;
}

/*
====
==== Headings
====
*/

/*
Page title
*/
h1
{
	font-family: 'Arial', sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 24pt;
	text-align: center;
}

/*
Section title
*/
h2
{
	font-family: 'Arial', sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 12pt;
	text-align: center;
}

/*
Item title
*/
h3
{
	font-family: 'Arial', sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 10pt;
	text-align: center;
}

/*
====
==== General formatting
====
*/

/*
Text styles
*/

.monospace {font-family: 'Courier New', 'Courier' , monospace;}
.comic {font-family: 'Comic Sans MS', 'Lucida Sans', sans-serif;}
.cursive {font-family: 'Lucida Handwriting', cursive;}
.sansserif {font-family: 'Lucida Sans', sans-serif;}
.serif {font-family: 'Times New Roman', serif;}
.italic {font-style: italic;}
.roman {font-style: normal;}
.bold {font-weight: bold;}

.tiny {font-size: 4pt;}
.small {font-size: 8pt;}
.smaller {font-size: 8pt;}
.average {font-size: 10pt;}
.larger {font-size: 12pt;}
.large {font-size: 14pt;}
.huge {font-size: 20pt;}
.left {text-align: left;}

.center {text-align: center;}
.right {text-align: right;}
.justify {text-align: justify;}

.underline {text-decoration: underline;}
.nowrap {white-space: nowrap;}

.comment {width: 80%;}
.central {margin-left: auto; margin-right: auto;}

/*
====
==== Table formatting
====
*/

/*
Table with thin border
*/
table.thinborder
{
	border: outset 1px;
	border-collapse: separate;
	border-spacing: 1px;
}
table.thinborder caption
{
	/*
	No idea why this should
	be needed, but Mozilla
	fails to center the
	caption if this isn't
	done; happens even if
	"text-align:center" is
	explicitly specified.
	*/
	margin-left: auto;
	margin-right: auto;
	/*****************/
	padding-top: 0px;
	padding-bottom: 8px;
}
table.thinborder th,
table.thinborder td
{
	border: inset 1px;
}

/*
Table with larger text and
no border; use for emphasis.
*/
table.standout
{
	padding: 15px;
	font-size: 12pt;
}
table.standout caption
{
	/*
	No idea why this should
	be needed, but Mozilla
	fails to center the
	caption if this isn't
	done; happens even if
	"text-align:center" is
	explicitly specified.
	*/
	margin-left: auto;
	margin-right: auto;
	/*****************/
	padding-top: 6px;
	padding-bottom: 8px;
	font-weight: bold;
}
table.standout th,
table.standout td
{
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: center;
}

/*
Table with simple border
*/
table.simpleborder
{
	border-collapse: collapse;
	border-width: 2px;
	border-style: ridge;
}
table.simpleborder caption
{
	/*
	No idea why this should
	be needed, but Mozilla
	fails to center the
	caption if this isn't
	done; happens even if
	"text-align:center" is
	explicitly specified.
	*/
	margin-left: auto;
	margin-right: auto;
	/*****************/
	padding-top: 0px;
	padding-bottom: 8px;
}
table.simpleborder th,
table.simpleborder td
{
	border-width: 2px;
	border-style: ridge;
	padding: 4px;
}

/*
====
==== Install/Download buttons
====
*/

/*
Container for the buttons
*/
div.installbuttons
{
	margin: 0px;
	border: 0px;
	padding: 0px;
}

/*
Defaults for the buttons
*/
div.installbuttons a
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 8px;
	border-style: solid;
	border-width: 3px;
	border-color: rgb(176,0,0) rgb(72,0,0) rgb(72,0,0) rgb(176,0,0);
	padding-left:11px;
	padding-top: 3px;
	padding-bottom: 3px;
	width: 128px;
	height: 32px;
	font-weight: bold;
	font-size: 14pt;
	text-align: left;
	text-decoration: none;
	color: fuchsia;
	background-color: maroon;
}

/*
Button colours
*/
div.installbuttons a:link
{
	color: fuchsia;
	background-color: maroon;
}
div.installbuttons a:visited
{
	color: fuchsia;
	background-color: maroon;
}
div.installbuttons a:active
{
	color: fuchsia;
	background-color: maroon;
}
div.installbuttons a:hover
{
	color: lime;
	background-color: maroon;
}