P.alignleft
{
    float: left;
}

HR
{
    border: 1px dashed #ddd;
}

TABLE
{
    border-collapse: collapse;
}

TD, TH
{
    vertical-align: top;
}

PRE, DIV.code, P.code
{
    font-family: monospace;
    border-width: 0 1px;
    border-style: solid;
    border-color: #888;
    background: #f8f8f8;
}
PRE, DIV.code, .code
{
    padding: 0 1ex;
}

A[href]
{
    color: #1b5282;
    font-weight: bold;
    text-decoration: underline;
}
A[href]:visited { color: #2268a5; }
A[href]:hover { color: #0b2135; }
A[href] SUP, A[href] SUB
{
    text-decoration: none;
}

ABBR
{
    cursor: help;
}

IMG
{
    border: none;
}

DT
{
    font-weight: bold;
    font-size: 115%;
}
DD
{
    text-align: justify;
}

DIV.stats
{
    clear: right;
    float: right;
    border: 1px solid #9898aa;
    max-width: 23ex;
    background: #f3f3f3;
    padding: 0;
    margin: 0 .5em .5em .5em;
    color: #555;
}
DIV.stats DL
{
    margin: .25em;
}
DIV.stats DT
{
    margin-top: .25em;
}
DIV.stats DD
{
    margin: 0.25em 0.5em 0.25em 1.5em;
}

/* Prevent tags from affecting header colour */
H1 A[name], H2 A[name], H3 A[name] { color: inherit; }
H1
{
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 130%;
    padding-left: 1em;
    border-bottom: 1px solid #777;
}
H2
{
    margin-bottom: 0;
    font-size: 110%;
    padding-left: 1em;
    border-bottom: 1px solid #999;
}
H3
{
    margin-bottom: 0;
    font-size: 100%;
    padding-left: 1em;
    border-bottom: 1px solid #bbb;
}

P
{
    margin-top: 1em;
    margin-bottom: 0;
}

BODY
{
    color: white;
    background: #999;
    background-image: url(../images/shadow-444-999-large.png);
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
}

BODY, DIV, SPAN, TABLE, TD, TH, INPUT, TEXTAREA, SELECT
{
    font-family: sans-serif, sans, arial;
}

DIV.primary
{
    color: black;
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    background: #ddd;
    background-repeat: repeat-x;
    margin: 0.5em 1em 0.5em 1em;
    padding: 0 0 1em 0;
    overflow: hidden;
}
DIV.primary h1, DIV.primary h2, DIV.primary h3
{
    background: #eee;
    color: #222;
    border: none;
    border-left: 10px solid #5ecd9d;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}
DIV.primary OL, DIV.primary UL, DIV.primary DL
{
    padding: 0 3ex;
}
DIV.primary P, DIV.primary LI
{
	text-align: justify;
}

DIV.secondary
{
    color: #333;
    border-color: #888;
    border-style: solid;
    border-width: 1px;
    background: #bbb;
    background-image: url(../images/shadow-b.png);
    background-repeat: repeat-x;
    margin: 0.5em 1em 0.5em 1em;
    padding: .5em;
}
DIV.secondary h1, DIV.secondary h2, DIV.secondary h3
{
    background: #f8f8f8;
}
DIV.secondary > P, DIV.secondary > DIV, DIV.secondary > UL
{
    max-width: 100%;
    font-size: 85%;
    margin: 0.25em 0;
}
DIV.secondary A
{
    color: #2a3354;
}
DIV.secondary A:hover
{
    color: #000;
}

DIV.footer
{
    padding: 0 0.5em;
    margin-top: 0;
    text-align: center;
    color: #333;
}



DIV.thumbnail, IMG.thumbnail
{
    padding: 0px;
    margin: 20px auto;
    font-size: medium;
    font-weight: normal;
    font-style: normal;
}
DIV.thumbnail DIV.imageBorder
{
    background: #333;
    background-image: url(../images/shadow-000-333-med.png);
    background-repeat: repeat-x;
    color: white;
}
DIV.thumbnail DIV.art
{
    margin: 0;
    padding: 16px;
}
DIV.thumbnail DIV.art A
{
    padding: 0;
    margin: 0;
}
DIV.thumbnail DIV.art IMG
{
    display: block;
    margin: 0 auto;
    padding: 0;
}
DIV.thumbnail DIV.caption
{
    font-size: 90%;
    font-style: italic;
    margin: 0;
    background: #333;
    color: white;
    text-align: center;
    padding: 16px;
    padding-top: 0;
    border-bottom: 1px solid #f8f8f8;
}

/*
 * A floating element (in either direction). This is used to apply extra styles
 * to all floating elements. This was created to allow a workaround for an IE
 * bug. It's a hack, but isn't it elegant? :)
 */
DIV.columnedElement
{
}

DIV.floatingThumb, IMG.floatingThumb
{
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}
DIV.fixedHeight, IMG.fixedHeight
{
    overflow: hidden;
}
DIV.fixedHeight:hover
{
    overflow: visible;
}
DIV.fixedHeight DIV.caption
{
    /* Float caption above other content (e.g. other captions). */
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

/*
 * These override some settings defined under .thumbnail.
 * Notice that PADDING is used instead of a border.
 */
IMG.art, DIV.primary DIV.art A IMG, DIV.primary DIV.art A:hover IMG, DIV.primary DIV.art A:visited IMG
{
    border: none;
}

/*
 * Icons sit over the image in a thumbnail.
 */
DIV.thumbnail DIV.art A
{
    position: relative;
    display: block;
}
DIV.thumbnail DIV.art A IMG.icon
{
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    margin: 0;
    padding: 0;
    /* opacity: konqueror 4 forces a white background. (Is that a problem?) */
    opacity: 0.3;
}
DIV.thumbnail DIV.art A:hover IMG.icon
{
    opacity: 1;
}

.plaque {
	background: white;
	color: black;
	width: 50ex;
	text-align: justify;
	font-size: 90%;
	padding: 20px 0;
	margin: 1.5em 0 3em;
	border-style: none solid solid none;
	border-color: #bbb;
	border-width: 1px;
}
DIV.plaque H2 {
	padding: 0;
	margin-top: 0;
	background: transparent;
	border-color: black;
	border-style: none none solid;
	border-width: 1px;
}
.plaque .date {
	margin-top: 0;
	color: gray;
	float: right;
}
.plaque .medium {
	margin-top: 0;
	color: gray;
}


A.animation:after
{
    content: url(../images/icon10x10_anim.png);
    padding-right: 0.25em;
    padding-left: 0.25em;
}

DIV.clear, P.clear, UL.clear, OL.clear, DL.clear, H1.clear, H2.clear, H3.clear
{
    clear: both;
}

DIV.warn
{
    border: solid red 1px;
    margin: -1px; /* Make border sit over parent box's */
    background: #fbb;
    color: black;
    padding: 0;
}
DIV.warn P
{
    text-align: center;
    margin: 20px;
}

P.note:before
{
    content: "!";
    color: #ffa500;
    font-weight: bold;
    padding-left: 1ex;
    padding-right: 1ex;
    margin-right: 1ex;
    background: #eee;
}
P.note
{
    font-size: 90%;
    color: #555;
}

P.minor, SPAN.minor
{
    font-size: 80%;
    color: #555;
}

P.licence
{
	margin-top: 2em;
    font-size: 70%;
    color: #555;
    clear: left;
    text-align: left !important;
}

P.licence IMG
{
    vertical-align: top;
    float: left;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

P.licence A
{
	font-weight: normal;
}

/*
 * Force the container to envelope the floats.
 */
DIV.floatcontainer:after, P.licence:after
{
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

DIV.primary P, DIV.primary OL, DIV.primary UL, DIV.primary DL, DIV.primary H1, DIV.primary H2, DIV.primary h3, DIV.primary PRE, DIV.primary FORM
{
    margin-left: 20px;
    margin-right: 20px;
}

/*
 * HEADER STYLES
 */

DIV.head, DIV.head2
{
    color: black;
    vertical-align: baseline;
    border-color: #333;
    border-style: solid;
    padding-right: 1em;
    background: #eee;
    background-image: url(../images/shadow-e-plastic.png);
    background-repeat: repeat-x;
}

/*
 * This header is always at the top of the window (not affected by scroll).
 */
DIV.mainHeader
{
    position: fixed;
    top: 0;
    width: 100%;
    opacity: 0.9;

    /* Prevent pop-ups like image captions from obscuring header */
    z-index: 90;
}
/*
 * This header sits deeper than the first to displace main content.
 */
DIV.shadowHeader
{
    position: static;
    visibility: hidden;
}

DIV.head
{
    font-size: 120%;
    border-width: 0.6em 0 0.1em 0;
    padding-left: 1em;
}
DIV.head2
{
    border-width: 0 0.1em 0.1em 0.1em;
    margin-left: 1em;
    margin-right: 1em;
}

DIV.head SPAN.title, DIV.head SPAN.menu, DIV.head2 SPAN.menu
{
    padding: 0;
    border-width: 0 1px 0 0;
    border-style: solid;
    border-color: #888;
}

DIV.head SPAN.title
{
    font-weight: bold;
    padding-left: 1ex;
    padding-right: 1em;
}

DIV.head SPAN.menu, DIV.head2 SPAN.menu
{
    color: black;
    background: #f8f8f8;
    background-image: url(../images/shadow-f8-plastic.png);
    background-repeat: repeat-x;
}

SPAN.menu A
{
    text-decoration: none;
    font-weight: normal;
    padding: 0 0.5em;
}
SPAN.menu A:visited
{
    color: #888;
}
SPAN.menu A:link
{
    color: #1b5282;
}
SPAN.menu A:hover
{
    color: #333;
}

SPAN.menu A.active
{
    font-weight: bold;
    background: #fff;
    background-image: url(../images/shadow-ff-plastic.png);
    background-repeat: repeat-x;
    border-left: 10px solid #5ecd9d;
}
SPAN.menu A.active:link
{
    color: #777;
}
SPAN.menu A.active:visited
{
    color: #777;
}
SPAN.menu A.active:hover
{
    color: #333;
}

/*
 * FORM STYLES
 */

INPUT[type=submit], INPUT[type=button], INPUT[type=text], TEXTAREA, SELECT
{
    border: none;
    outline: 1px solid #65656e;
}

INPUT[type=text], TEXTAREA
{
    background: #f8f8f8;
    color: black;
}

INPUT[type=text]:focus, TEXTAREA:focus
{
    background: white;
    color: black;
}

INPUT:hover, TEXTAREA:hover, SELECT:hover
{
    outline-color: black;
}

INPUT[type=submit], INPUT[type=button]
{
    font-weight: bold;
}