/* Primary layout */

body    {
    margin: 0;
    padding: 0;
    border: 0;
    color: #000000;
    background: #ffffff;
    }

#main    {
    width: 35em;
    position: absolute;
    left: 12em;
    top: 320px;
    padding: 0 0 0.5em 0;
    }

#main p {
    line-height: 150%;
    margin-top: 1ex;
    margin-bottom: 1ex;
    font-family: verdana, helvetica, arial, sans-serif;
    }

#sidenav    {
    margin: 0;
    padding: 0;
    border: 0;
    width: 10em;
    position: absolute;
    left: 20px;
    top: 320px;
    text-align: left;
    }

#sidenav p {
    line-height: 150%;
    color: #3f3f3f;
    margin-top: 1em;
    margin-bottom: 1ex;
    font-family: verdana, helvetica, arial, sans-serif;
    }
 
img        {
    border: 0;
    }

img.logo    {
    position: absolute;
    border: 0;
    left: 50px;
    top: 20px;
    width: 450px;
    height: 290px;
    }

img.stars    {
    position: absolute;
    border: 0;
    left: 550px;
    top: 65px;
    width: 141px;
    height: 200px;
    }

img.w3c_icon {
    border:0;
    width:88px;
    height:32px
    }

/* Tables */

table {
    margin: 1em auto;
    border: medium double #556;
    border-collapse: collapse;
	border-spacing: 0;
}

thead {
    background:  #ff9d34;
}

th {
    padding: 0 1em;
    margin: 0;
    border: thin solid #334;
}

td {
    padding: 0.5ex 1ex;
    margin: 0;
    border: thin solid #334;
}

caption {
    margin: 0;
    padding: 0;
    font: oblique medium serif;
}

/* Forms */

fieldset {
    padding: 0.5em 1em;
    margin: 0.5em 1em;
}

legend {
 font: oblique medium serif;
}

.required {
    color: #900;
}

label {
    text-align: left;
    display: inline;
    width: 100%;
    padding: 1em 0;
    clear: both;
}

label.vertical {
    display: block;
    float: left;
    text-align: right;
    width: 10em;
    padding: 0.5ex 1em;
    clear: both;
}

input {
    text-align: left;
    display: inline;
    width: auto;
}

input.vertical {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.centred {
    text-align: center
    }

.photo_frame {
    text-align: center;
    vertical-align: middle;
    padding: 2em;
    }

.key {
    width: 40%;
    }

.data {
    width: 60%;
    }

    /* Links */

a:link {
    font-weight : bold;
    text-decoration : none;
    color: #3366cc;
    background: transparent;
    }

a:visited {
    font-weight : bold;
    text-decoration : none;
    color: #333333;
    background: transparent;
    }

a:hover {
    font-weight : bold;
    text-decoration : none;
    color: #000000;
    }

a:active {
    font-weight : bold;
    text-decoration : none;
    color: #ff0000;
    }
    
a.orange:hover {
	 background: #ff9d34;
    }  

a.rose:hover {
	 background: #e59595;
    }
    
a.lavender:hover {
	 background: #ae95e5;
    }
    
a.blue:hover {
	 background: #96a8e5;
    }
    
a.green:hover {
	 background: #afe595;
    }  
    
a.yellow:hover {
	 background: #ffdb34;
    }      

.nav {
    font: bold small sans-serif;
}

span.akey {
    text-decoration: underline
    } 
           
    /* Typography */

h2, h3, h4, h5 {
    margin: 1ex 0 0 0;
    padding: 0;
    font-style: italic;
    font-family: georgia, times, serif;
    clear: both;
    }

blockquote {
    font: oblique medium serif;
    background: #334;
    border: thin solid #003;
    padding: 0 1em;
}

q {
    font: oblique medium serif;
}

dfn {
    font-weight: bolder;
}

samp {
    color: #090;
}

kbd {
    color: #090;
    font-weight: bold;
}

ul {
    list-style:  url("/images/list.png") circle outside;
}

ul li {
    line-height: 160%;
    margin: 0.5em 0;
    }

dt {
    font-weight: bold;
    font-size: larger;
}
   
.intro    {
    padding: 0 0 1em 0;
    font-size: smaller;
    font-style: normal;
    color: #000000;
    }

.subhead    {
    font-weight: bold;
    font-style: italic;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #000000;
    }
    
.caption    {
    padding: 0 0 1em 0;
    font-size: smaller;
    font-style: normal;
    color: #000000;
    }   

.warning {
    font-weight: bolder;
    font-size: larger;
    border: thin solid #600;
    background: #a23;
    padding: 0.5ex 1em;
    color: #ddd;
    } 
  
.footer    {
    padding: 5em 0 2em 0;
    font-size: small;
    color: #666666;
    }

    /* Page Colour Styles */

thead.orange {
    background: #ff9d34
    }

body.orange {
    background: url(images/graphics/gradient-orange.jpg) repeat-y;
    }

h2.orange {
    color:#ff9d34
    }
  
thead.rose {
    background: #e59595
    }

body.rose {
    background: url(images/graphics/gradient-rose.jpg) repeat-y;
    }

h2.rose {
    color:#cc7777
    }

thead.lavender {
    background: #ae95e5
    }

body.lavender {
    background: url(images/graphics/gradient-lavender.jpg) repeat-y;
    }

h2.lavender {
    color:#8877cc
    }

thead.blue {
    background: #96a8e5
    }

body.blue {
  background: url(images/graphics/gradient-blue.jpg) repeat-y;
  }

h2.blue {
    color:#7788cc
    }

thead.green {
    background: #afe595
    }

body.green {
    background: url(images/graphics/gradient-green.jpg) repeat-y;
    }

h2.green {
    color:#88cc77
    }

thead.yellow {
    background: #ffdb34
    }

body.yellow {
  background: url(images/graphics/gradient-yellow.jpg) repeat-y;
  }

h2.yellow {
    color:#ffcc00
    }