/*The first item sets the global styles that are used throughout the website.*/
body {
background-color: #000080;
background-image:url(media/bgtile2.gif);
color: #000080;
font-family: tahoma, verdana, arial, sans-serif;
font-size:75%;
text-align:center;
border:0;
margin:0;
padding:0;
}

p{
margin:0 0 10px 0;
border-style: none;
border-width: 0;
}

h1{
font-size:200%;
font-weight:normal;
}

h2{
font-size: 160%;
font-weight: normal;
margin:0 0 5px 0;
padding:0 0 5px 0;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #CCCCFF;
}

h3{
font-size: 140%;
font-weight: normal;
margin:0 0 5px 0;
padding:0 0 5px 0;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #CCCCFF;
}

h4{
font-size: 120%;
font-weight: bold;
margin:0 0 5px 0;
padding: 0 0 5px 0;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #CCCCFF;
}

h5{
font-size: 100%;
font-weight: bold;
margin:0 0 5px 0;
padding: 0;
border-style: none;
}

h6{
font-size: 90%;
font-weight: bold;
margin:0 0 5px 0;
padding: 0;
border-style: none;
}
ul{
margin:0 0 5px 20px;
}
li{
margin:0 0 5px 0;
}
a:link {color: #009;}
a:visited {color: #009;}
a:active {color: #F03;}
a:hover {color: #f03;}
/*A piece of nonsense so that a containing float will stretch down to include
all of the float which is in it. Not needed in IE but needed in standards compliant 
browsers.*/
div:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} 

div.container{
width:640px;
border-style:solid;
border-color:#999;
border-width:5px;
margin:10px auto;
padding:0;
background-color:#fff;
text-align:left;
}

div.topbar{
height:80px;
background-color:#e6e6fa;
background-image:url(media/topback.gif);
background-repeat:no-repeat;
margin:0;
padding:0;
border:0;
}

div.topbar h1{
color: #000080;
margin:0 0 0 110px;
border-style:none;
padding: 0;
font-family:georgia,times,times new roman,serif;
font-weight:normal;
font-size:250%;
letter-spacing:0.2em;
}
div.topbar p{
margin:0 0 0 320px;
border-style:none;
padding:10px 0;
font-family:georgia,times,times new roman,serif;
font-weight: normal;
font-size:120%;
letter-spacing:0.5em;
}
div.blackbar{
background-color:#000;
color:#fff;
margin:0;
padding:0;
border:0
}
div.blackbar p{
padding:5px 0 5px 0;
margin:0 0 0 8px;
}

div.blackbar a:link {color: #fff;}
div.blackbar a:visited {color: #fff;}
div.blackbar a:active {color: #fff;}
div.blackbar a:hover {color: #e6e6fa;}

div.subcontainer{
padding:0;
border:0;
margin:0;
}
div.subcontainer h1{
display:block;
color:#fff;
font-family:georgia,times,times new roman,serif;
font-size:220%;
background-color:#b22222;
margin:0 0 10px 0;
padding:10px 0 10px 20px;
border-style:solid;
border-width:0;
border-color:#999;
}

div.legenda {
float:left;
width:410px;
background-color: #fff;
padding:0 0 10px 15px;
margin:0;
border-style:none;
}

div.sidebar {
float:right;
clear:right;
background-color:#e6e6fa;
width:170px;
margin:-10px 0 0 20px;
padding:5px;
border-style:none;
}
div.rightbar{
float:right;
clear:right;
width:170px;
background-color:#fff;
margin:0 0 0 20px;
padding:10px 5px;
border-style:dashed;
border-width:0 0 0 1px;
}
div.pes{
color:#fff;
text-align:center;
margin:0;
padding:5px;
}

div.pes a:link {color: #fff;}
div.pes a:visited {color: #fff;}
div.pes a:active {color: #fff;}
div.pes a:hover {color: #e6e6fa;}

/*The sidebar menu has the links in a list. The list is set to have no bullets. 
The main style is is in the <A> element. By use of coloured background and borders, 
the hover list that changes colour is achieved.*/
div.menu{
margin:0;
padding:0;
}
div.menu ul{
margin:0;
padding:0;
}

div.menu li{
margin:0;
padding:0;
border:0;
text-align:right;
list-style-type: none;
width:140px;
display:inline;
}

div.menu a{
display:block;
width:170px;
color:#339;
font-size:100%;
text-decoration:none;
text-indent:-1.1em;
text-align:right;
margin:0;
padding:2px 0 2px 0;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #336 #336 #663 #663;
}
/*This sets the behaviour when the mouse goes over a link. By a change of 
border colors, the button appears to be depressed.*/
div.menu a:active {color: #f03;}
div.menu a:hover {color: #339;}
div.menu a:hover {
background-color: #b0c4de;
border-color: #333 #333 #fff #fff;
}