html { font-size: 62.5%;}

body { font-size: 1em;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    max-width:1200px;
}

@media (max-width: 500px) {
    html { font-size: 70%;height:400px;}
}

@media (min-width: 500px) {
    html { font-size: 80%;height: 600px;}
}

@media (min-width: 700px) {
    html { font-size: 120%;height:800px;}
}

@media (min-width: 1200px) {
    html { font-size: 200%;height:800px;}
}


.header { 
    background-image: url(images/gradient.jpg); 
    background-repeat: repeat-x;
    clear:both; 
    margin-bottom:1px;
    position:relative;
    overflow:hidden; 
}

.description{
    position:absolute;
    top:5%;
    left:10%;
    background-color:transparent;
    color:white; 
}

img.left {
    width:100%;
    display: block;
    margin-left: 0;
    margin-right: auto;}

#container3 {
    height:100%;
    float:left;
    width:100%;
    overflow:hidden;
    position:relative;
}

#container2 { 
    height:100%;
    float:left;
    width:100%; 
    position:relative;
    right:30%;
}

#container1 { 
    height:100%;
    float:left;
    width:100%; 
    position:relative;
    right:55%;
    background-image: url(images/gradient.jpg);
    background-repeat: repeat;
}

#menu {
    float:left;
    width:15%;
    position:relative; 
    left:85%;
}

#middle {
    height:100%;
    float:left;
    width:51%; 
    position:relative;
    left:87%;
    overflow:hidden;
}

#middleright {
    height:100%;
    float:left;
    width:83%; 
    position:relative;
    left:87%;
    overflow:hidden;
}

#figureright {
    height:100%
    float:left;
    width:30%;
    position:relative;
    left:89%;
    overflow:hidden;
}

ul {
    list-style-type: none;
}

#menu ul, #menu li {
    margin: 0; padding: 0;
}
#menu ul{
    margin-top:10%;
}

#menu li a, #menu li a:visited { 
    display: block;
    height: 24px;
    border-top: 1px solid #99CCCC;
    border-bottom: 1px solid #3564D8;
    color: white;
    text-decoration: none;
    text-align:center;
}

#menu li a:hover {
    background-position: 0 -24px;
    color: blue;
}

#active a{
    display: block;
    background: #548BE7;
    cursor: default;
}

#figureright p {
    margin: 0;
    padding: 0 0 5px 0;
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
}

h1 {
    font-weight: bold;
    font-size:smaller;
}

img.scaled {
    width: 100%;
}


ul#gallery, ul#gallery li
{
    margin:0;
    padding:0;
    list-style:none;
}


ul#gallery
{
    float:left;
    position:relative;
}

ul#gallery li
{
    float:right;
    display:block;
}

ul#gallery  span
{
    display:none;
}

ul#gallery a:hover span
{
    position:absolute;
    max-width:50%;
    float:left;
    top:0px;
    left:0px;
    display:block;
}

ul#gallery a:focus span
{
    position:absolute;
    max-width:50%;
    float:left;
    top:0px;
    left:0;
    display:block;
}

img.small{
    border: 1px solid white;
    margin: 0 2px 2px 0;
    width:15%;
    float:right;
}

img.big{
    width:100%;
}


table {
    margin: 100px 20px 40px;
    border:2px solid black;
    border-collapse:collapse; 
    width:80%;
    empty-cells:hide;
}
th, td {
    border:1px dotted black;
    text-align:center;
    height:30px;
}
td {
    width:30%;
}
caption {
    font-weight:bold
}

#map-canvas {
    margin-top:10px;
    margin-left:5%;
    width: 90%;
    height: 300px;
    padding:0;
}