/* colors
base: #B5D1F7
lighter: #B5D1F7
darker: #2F495D
light beige: #E0CCA6
red: #9A0001
faded red: #B75755
very faded red: #F9C1BD
*/

#container { width: 800px; height: 100%;
border: 1px solid #000;
background: url(../../../../../updir/4646/main_bg.html);
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
}


#top {width: 800px; clear: both;  padding-top: 0px; padding-left: 0px; height: 105px;
background: url(../../../../../updir/4646/header.html) no-repeat 0% 0%;
}

#top img {display: none}
#top h4 {padding-top: 59px; margin: 0}
#top h4 a {color: #fff}
#lang {float: right; clear: none; padding-right:10px}

#nav {border-bottom: 1px dotted #3c3; margin: 0px 10px 5px 10px; padding-bottom: 5px;  }
#nav ul, #nav li {display: inline; font-size: 11px}
#nav li {border-left: 1px solid #3c3; margin-left: 3px; padding-left: 6px}
#nav ul {border-right: 1px solid #3c3; padding-right: 6px}

#left {width: 150px; margin-left: 0px; margin-top: 0px; float: left; background: url(../../../../../updir/4646/left_bg.html)}

#middle {padding: 0px; margin: 10px; width: 410px; float: left}

#middleright, #centreandrightcol  {
font-size: 13px; line-height: 20px;
padding: 10px;
border: 0px;
background: #fff;
color: #000;
float: left; width: 565px;
}

#right {width: 150px; float: right; margin-top: 0px; margin-right: 0px}


#breadcrumb {
background-color: #2F495D;
color: #fff; padding: 0px 3px 0px 3px; margin: 0;
font-size: 11px; font-weight: 900}

#breadcrumb p {margin: 0; padding: 0px; font-size: 11px;}


/* links within the site's breadcrumb need to behave differently */
#breadcrumb a:link  {color: #fff; font-weight: 600; text-decoration: none}
#breadcrumb a:visited  {color: #F5E9DA; font-weight: 600; border-bottom: 1px dotted #F5E9DA; text-decoration: none}
#breadcrumb a:active {text-decoration: none; font-weight: 600;}
#breadcrumb a:hover {background-color: #D1BCD8; text-decoration: none; font-weight: 600;}
/* here endeth the structural declarations */

/* General formatting declarations */

/* if no other rule applies to your document, the rule below will apply
because all of your page is in the body of the document */

body {font-family: verdana, "Lucida Grande", arial; background: #D4DBE1
/*url(/updir/4646/main_bg.gif)*/ left bottom repeat-x; margin: 0
text-align: center;}

/* these three define how links, active visited and moused-over links appear unless there
is a more specfic rule that says otherwise */

a:link { color:  #2F495D; outline: none; }
a:visited { color:  #9A0001; }
a:active {  }
a:hover {  }

h1 a, h2 a, h3 a, h4 a {text-decoration: none}

strong, b {font-weight: bold;}

p, .blurb, #middle li {
font-size: 12px;
line-height: 22px;
margin: 0px 0px 10px 0px;
}

/* how much indent to give unordered and ordered lists. the default is too much */
ul, ol { margin-left: 0; padding-left: 12px}

/* these two rules handle headlines. The first gives all headline <h*> tags some common
characteristics. The next ones give each <h*> tag its own font size */

h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", verdana, sans-serif; margin-top: 2%; margin-bottom: 0;}
h1 {font-size: 20px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}

/* this collection of rules handles specific situations that vary from the general rules */

/* what to do when you encounter an h3 tag within the left bar, right bar or spotlight box */
#left h3, #right h3, #spotlight h3 { background-color: #2F495D; color: #fff; margin: 0; padding: 5px}

/* how to handle unordered lists when they're in the right or left bars */
#left ul, #left li, #right ul, #right li {font-size: 11px;}

/*how to handle section headings */
#section-heading, #middle .box1 h3, #titlebar {background-color: #2F495D; color: #fff; padding: 3px; font-size: 12px; font-weight: bold;
margin-top: 12px}
#titlebar h2 {margin-top: 0; font-size: 16px}
.subSection0 h1, .subSection1 h1, .subSection2 h1, .subSectionHide h1 {font-size: 18px}

#section-heading {clear: both}

img {border: 0;}

/* ALAP form CSS stuff
needed to lay out admin interface
Best left alone unless you know what you're doing
For how this works, see:
http://www.alistapart.com/stories/practicalcss/
*/

div.formrow, .listrow, .listrow1, .listrow0, div.formrow-odd, .dlrow, .dlrow1, .dlrow0, .row1, .row2, .row {clear: both;  padding-top: 5px;  }

.frisbee { float: right; width: 100%}
div.formrow-odd { background-color: #ccc;}
div.formrow span.label, div.formrow-odd span.label{ float: left; width: 30%; text-align: right; font-size: 12px; }
div.formrow span.input, div.formrow-odd span.input { float: right; width: 62%; text-align: left; font-size: 12px;}
.box1 .formrow .input {width: 50%}
.formrow .input h4, .formrow-odd .input h4 {margin: 0; font-size: 12px}
.formrow .input select, .formrow-odd .input select {width: 30%; font-size: 12px}
.box1 .formrow, box2 .formrow {font-size: 11px}
textarea {font-family: arial, sans-serif}
.listitemshort, .listitemlong, .listitemmid {font-size: 11px}

.listitemlong, .listitemshort, .listitemmid, .listitemmidleft, .listitemtiny, .listitem100 {border-left: 1px solid black; padding-left: 5px; height: 40px;}
.listitemlong, .listheadinglong { width: 40%; float: left;}
.listitemtherest, .listheadingtherest {width: 80%; float: left}
.listitemshort, .listheadingshort  {  width: 10%; float: left;}
.listitem100, .listheading100  {  width: 110px; float: left;}
.listitemtiny, .listheadingtiny  {  width: 5%; float: left;}
.listitemmid, .listheadingmid {  width: 20%; float: right;}
.listitemmidleft, .listheadingmidleft { width: 20%; float: left}
.listheadinglong, .listheadingshort, .listheadingmid, .listheadingmidleft, .listheadingtherest, .listheadingtiny, .listheading100 { padding-left: 5px; border-left: 1px solid #fff;}
.listrow { height: 15px; font-weight: bold; background-color:#036; color: #fff; position: relative;}


/* end of ALAP form CSS stuff */


/* this layout treats box1 and box2, row1 and row2 classes equally, so you'll see a lot
of rules applied to both at the same time. */

/* text sizing for list rows */
.row0, .row1, .row2, .rowheader {  font-size: 11px; line-height: 13px; padding: 6px 6px 6px 0px; }

/* the shape of the side bar blocks: 100% of their surrounding element
in this case, it's either #left or #right */
.box1, .box2 { width: 99%; padding-bottom: 3px; margin: 0px 0px 6px 0px;    }

/* Common characteristics of headings within sidebar boxes, both
headings that are links and headings that aren't */
.box1 h3 a, .box2 h3 a, .box2 h3, .box1 h3  { font-size: 12px; line-height: 13px; color: #2F495D;
text-transform: uppercase; padding: 3px; margin: 0;text-decoration: none;}

/* how to handle link text in lists in the side bar boxes */

.box1 li.row0 a, .box2 li.row0 a,   .box2 li.row1 a, .box1 li.row1 a, .box1 li.row2 a, .box2 li.row2 a {  display: block; color: #000; padding: 0px 2px 2px 0.2em; text-decoration: none;  vertical-align: middle;  }

.box2 li.row0, .box1 li.row0, .box1 li.row1, .box2 li.row1, .box1 li.row2, .box2 li.row2  {  color: #000; font-size: 11px; font-weight: 600; text-align: center; height: 31px;}

/*  Handling indents in sidebar box unordered lists */
.box1 ul, .box2 ul { margin-left: 0; margin-top: 0;
margin-bottom: 0; padding-left: 0;  list-style: none; }
.box1 ol, .box2 ol  { margin-left:6px; margin-top: 3px;
margin-bottom: 0; padding-left: 6px; }
.box1 ol li, .box2 ol li { margin-left:9px; margin-top: 0;
margin-bottom: 0; padding-left: 0px; }

#middle .box1 ul, #middle .box1 li  {background-color: #fff; border-bottom: 1px dotted silver}
#middle ul a, #spotlight a  { color: #744E83;}
#middle ul a:visited, #spotlight a  { color: #91454D;}

/* And of course, because we want the spotlight to look different from the rest
of the page, we come up with a different set of rules specific to the #spotlight
division and things found within it. */

#spotlight {position: right: 0; width: 33%; float: right; margin: 10px 0px 10px 10px; border-left: 1px solid black; padding-left: 10px; }
#spotlight h1 {font-size: 14px}
#spotlight h3 { background-color: #2F495D; color: #fff;
padding: 5px; font-size: 12px; line-height: 13px;
text-transform: uppercase; padding: 3px;}
#spotlight p, #spotlight .blurb {line-height: 14px}

#centreandrightcol div.box2 h3 {display: none}
#centreandrightcol div.box2 ul, #centreandrightcol div.box2 li, #centreandrightcol div.box2 li a
{display: inline; background-color: #fff; padding: 1px; margin: 1px}

#centreandrightcol div.box2 li {border-left: 1px solid silver}
#centreandrightcol div.box2 ul {border-right: 1px solid silver}
/* these format the comments. you could just add these declarations to the p and .blurb,
but I think the text should look different for comments. Can't ever be too obvious on the web */

.commentbody, .comment_header, #commentfooter {font-size: 12px}
.commentbody {margin-top: 5px; border-bottom: 1px solid silver}

#article, #privdb {width: 98%; padding: 1%}

/* for making charts/tables */

.rowheader {background-color:#cbeca3; color: #000; font-weight: 600; padding-bottom: 16px }
div.row1 {border-top: 1px solid silver}
div.row2 {border-top: 1px solid silver}
.float {float: left; font-size: 9px; line-height: 10px; width: 31%}
.float2 {float: left; width: 2%;}
.float3 {float: left; width: 3%;}
.float6 {float: left; width: 6%;}
.float10 {float: left; width: 10%;}
.float15 {float: left; width: 15%;}
.float20 {float: left; width: 20%;}
.float25 {float: left; width: 25%;}
.float30 {float: left; width: 30%;}
.float35 {float: left; width: 35%;}
.float55 {float: left; width: 55%;}
.float60 {float: left; width: 60%;}
.spacer {clear: both; margin: 0; padding:0}

.subSectionHide {background: #eff url(../../../../../images/hidden.html) no-repeat top right}

.style2 {
font-size: x-small;
color: #000066;
}