/* Positioning and Layout */

* {
padding: 0;
margin: 0;
}

html {
visibility: visible;
background: url('./graphics/tarn.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

.right {
float: right;
padding: 10px 0px 10px 10px;
}

.left {
float: left;
padding: 10px 10px 10px 0px;
}

p {
padding: 5px 0px;
}

body {
margin: 0 auto;
padding-bottom: 50px;
width: 1000px;
font-family: 'Comic Sans MS', Comic Sans, 'Trebuchet MS', Trebuchet, Tahoma, Verdana, Arial, Helvetica, sans serif;
line-height: 1.6em;
color: #333333;
}

div.header {
width: 850px;
height: 100px;
margin: 0 auto;
padding: 0px 5px;
z-index: 1;
}

div.postcard {
background: url('./graphics/postcard.png');
background-repeat: no-repeat;
background-position: center -90px;
display: block;
position: absolute;
top: 90px;
margin: 0 auto;
width: 1000px;
height: 800px;
z-index: 2;
}

div.main_panel {
width: 405px;
height: 430px;
margin: 160px 0px 10px 85px;
padding: 5px;
overflow: auto;
right: 50%;
}

div.clear {
clear: both;
height: 1px;
line-height: 1px;
}

div.footer {
display: block;
position: absolute;
top: 695px;
width: 1000px;
margin: 0 auto;
text-align: center;
color: #ffffff;
font-size: 0.75em;
z-index: 99;
}

div#pen {
display: block;
position: absolute;
top: 100px;
left: 50%;
margin-left: -750px;
width: 380px;
height: 700px;
background: url('./graphics/pen.png');
background-repeat: no-repeat;
background-position: top center;
z-index: 97;
}

div#photos {
display: block;
position: absolute;
top: 250px;
left: 50%;
width: 50%;
overflow: hidden;
z-index: 98;
}

div#map {
display: block;
position: absolute;
top: 250px;
left: 50%;
width: 405px;
margin: 0px 10px;
z-index: 96;
}

/* Styling */

p.introduction:first-letter {
font-size: 300%;
font-weight: bold;
color: #230076;
float: left;
margin: 10px 10px 0px 0px;
}

b {
color: #230076;
}

h1 {
color: #230076;
}

a:link, a:visited {
color: #230076;
text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}

div.footer a:link, div.footer a:visited {
text-decoration: none;
color: #ffffff;
}

div.footer a:active, div.footer a:hover {
text-decoration: underline;
}

/* Menu */

ul#menu {
display: block;
float: left;
width: 840px;
height: 100px;
margin: 0;
padding: 0px 5px;
list-style: none;
font-size: 1.3em;
}

ul#menu li {
display: block;
float: left;
height: 100px;
width: 140px;
margin: 0px;
padding: 0px;
text-align: center;
}

ul#menu li a:link, ul#menu li a:visited {
display: block;
height: 40px;
width: 140px;
background: url('./graphics/menu.png');
background-position: top center;
background-repeat: no-repeat;
padding-top: 60px;
}

ul#menu li a:hover, ul#menu li a:active, ul#menu li a.current {
background-position: bottom center;
color: #ffffff;
height: 50px;
padding-top: 50px;
text-decoration: none;
}