/* THIS SETS UP THE BODY, PARA AND HEADING STYLES */

html, body
{
padding: 0; 
border: 0;
margin: 0; 
}
/* must set all of these to 0 or items will be positioned incorrectly */

body 
{
font-size: small;
font-family: verdana, arial, sans-serif;
}

p
{
margin-top: 0;
margin-bottom: 1em;
}
/* allows h3 to have no space between it and the following text */

p.space
{ 
margin-top: 3em;
margin-bottom: 1em;
}

p.nospace
{ 
margin-top: 0;
margin-bottom: 0;
}

p.top
{ 
margin-top: 2em;
margin-bottom: 0.5em;
}

p.quote
{ 
text-align: right;
font-weight: bold;
}

p.updated
{
margin-top: 0;
margin-bottom: 2em;
text-align: right;
font-style: italic;
}

h1 
{ 
font-size: 100%;
background-color: aqua;
padding: 0.2em;
margin-top: 2em;
margin-bottom: 2em;
}

h1.nospace
{
margin-top: 0em;
}

h1.updated
{
margin-top: 0em;
margin-bottom: 0em;
}

h2
{ 
font-size: 100%;
background-color: white;
color: #D2691E;
padding: 0 0 0.4em 0; /*top right bottom left*/
border-bottom: 3px solid #808080;
margin-top: 2em;
margin-bottom: 1em;
}

h2.nospace
{ 
margin-top: 0em;
}

h2.filled
{ 
font-size: 100%;
background-color: white;
color: #D2691E;
padding: 0.4em; 
border: 1px solid #808080;
margin-top: 0em;
}

h2.comment
{ 
background-color: navy;
margin-top: 0em;
color: white;
padding: 0.4em; 
border: 1px solid navy;
}

h3 
{ 
font-size: 100%;
margin-bottom: 0;
}

h3.space
{ 
margin-bottom: 1em;
}

h4
{
font-size: 150%;
margin-top: 0em;
margin-bottom: 1em;
}

h4.nospace
{
margin-bottom: 0em;
}

table
{
margin-top: 1em;
margin-bottom: 1em;
border: 1px solid silver;
}

td
{
padding: 0.4em;
border: 1px solid silver;
}

th
{
padding: 0.4em;
border: 1px solid silver;
text-align: left;
}

td.centred
{
text-align: center;
}

th.centred
{
text-align: center;
}

table.noborder
{
border: 0;
}

table.noborder td
{
border: 0;
padding: 0.4em 0.8em 0.4em 0; /* top right bottom left */
}

table.noborder th
{
border: 0;
padding: 0.4em 0.8em 0.4em 0; /* top right bottom left */
}

table.header
{
border: 0;
padding: 0;
margin: 0;
}

table.header td
{
border: 0;
padding: 0;
margin: 0;
}

table.photo_credits
{
border-collapse: collapse;
border: 1px solid silver;
}

table.photo_credits td
{
border: 1px solid silver;
padding: 10px;
}

.linkpic a:link, .linkpic a:visited, .linkpic a:hover, linkpic a:active
{
color: black;
}

.linkpic img
{
border-color: black;
}

/* THIS SETS UP THE HEADER */

#header
{
height: 90px;
background-image: url(images/header_background.gif);
background-repeat: repeat-x;
margin: auto;
}

#header_image
{
height: 90px;
width: 760px;
background-image: url(images/header_image.gif);
background-repeat: no-repeat;
}

#header_link
{
position: absolute;
left: 493px;
top: 36px; 
width: 159px;
height: 19px;
}
/* link over email address in header image */

#header_link i
{
visibility: hidden;
}
/* makes text in link invisible */

#header_link:focus  
{ 
outline: none;
}
/* stops dotted box persisiting around link once it has been clicked */

#header a:link, #header a:visited
{
text-decoration: none;
}
/* turns off link underlining. Necessary to make link invisible in Firefox */

/* THIS SETS UP THE THREE COLUMNS */

#outer_wrap
{
width: 1002px;
margin: auto;
background-image: url(images/left_background.gif);
background-repeat: repeat-y;
}

#left
{
position: relative;
float: left;
width: 197px;
}

#column_wrap 
{
float: right;
width: 805px;
}

#centre
{
float: left;
width: 563px;
padding-top: 22px;
}

#right
{
float: right;
width: 200px;
padding: 22px 10px 0px 32px; /* top right bottom left */
overflow-x: hidden;
}

/* THIS SETS UP THE IMAGE ABOVE THE NAVIGATION AREA */

#nav_above
{
width: 182px;
height: 51px;
background-image: url(images/nav_above.gif);
background-repeat: no-repeat;
}

#nav_below
{
width: 182px;
height: 174px;
background-image: url(images/nav_below.gif);
background-repeat: no-repeat;
}

/* THIS SETS UP THE NAVIGATION */

#nav ul, li
{
padding: 0; 
border: 0;
margin: 0; 
}
/* must set all of these to 0 or menu items will be positioned incorrectly */

#nav ul
{
width: 150px;
background-color: gray; 
color: white;
font-weight: bold;
font-size: 11px;
border-top: 1px solid black;
margin-left: 7px;
}
/* this code is for all the uls in the menu and also sets the top border */

#nav li 
{
position: relative;
list-style: none; 
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding: 4px;
}
/* this code is for all the lis in the menu. It removes the default list bullets and sets the borders of the lis */

#nav ul li:hover
{
background-color: silver;
}
/* when mouse is hovering over an option its background goes silver */

#nav li.current:hover
{
background-color: #00ffff;
}
/* when mouse is hovering over current page background remains blue */

#nav li.current
{
background-color: #00ffff;
color: black;
}
/* gives the current page's li a blue background with black text */

#nav a:link, #nav a:visited, #nav li.current li a:link, #nav li.current li a:visited
{
color: white;
text-decoration: none;
}
/* removes default styling from all non-current menu links and makes them white */

#nav li.current li.current a:link, #nav li.current li.current a:visited, #nav li.current a:link, #nav li.current a:visited
{
color: black;
}
/* makes current menu link(s) black */

/* THIS SETS UP CONTENT BOXES */

.border_box
{
padding: 1em 1em 0em 1em; /* top right bottom left */
border: 1px solid gray;
margin-bottom: 10px;
}

.filled_box
{
background-color: silver;
padding: 1em 1em 0em 1em; /* top right bottom left */
border: 1px solid gray;
margin-bottom: 10px;
}

.image_right
{
float: right;
text-align: center;
font-style: italic;
padding: 0em 0em 0em 1em; /* top right bottom left */
}

.image_left
{
float: left;
text-align: center;
font-style: italic;
padding: 0em 1em 0em 0em; /* top right bottom left */
}

.image_center
{
text-align: center;
font-style: italic;
padding: 0em 1em 0em 0em; /* top right bottom left */
}

.right_panel
{
width:46%;
float: right;
border: 1px solid silver;
padding: 1% 1% 1% 1%; /* top right bottom left */
margin-bottom: 1em;
}

.left_panel
{
width:46%;
float: left;
border: 1px solid silver;
padding: 1% 1% 1% 1%; /* top right bottom left */
margin-bottom: 1em;
}

.full_panel
{
border: 1px solid silver;
padding: 1% 1% 1% 1%; /* top right bottom left */
margin-bottom: 1em;
}

.right_comments
{
width:40%;
float: right;
border: 3px solid #808080;
margin: 1em 0em 1em 1em; /* top right bottom left */
padding: 1em 1em 0em 1em; /* top right bottom left */
}

.comments
{
border: 1px solid #808080;
padding: 1em 1em 0em 1em; /* top right bottom left */
margin: 0em 0em 1em 0em; /* top right bottom left */
}

.clear
{
clear: both;
}

/* THIS SETS UP THE FOOTER */

#footer
{
clear: both;
background-image: url(images/left_background.gif);
background-repeat: repeat-y;
margin: auto;
}
/* Clear both forces footer onto a new line, below any floated items. */

#footer_text p
{
font-size: 10px;
margin-bottom: 0.5em;
}

#footer_text p.space
{
margin-top: 3em;
}
