body {margin:0; padding:0; font-family: arial, sans-serif; font-size: 14px;}

p {margin: 0 0 .75em 0; line-height: 1.5em;}
h1 {margin: 0 0 0.25em 0; color: #960;}
h2 {margin: 0 0 0.75em 0; color: #960; font-weight:normal;} 

a:link {color: #336600; font-size: 14px;}
a:visited {color: #336600;}
a:hover {color: #336600;}
a:active {color: #336600;}
a.fill-div {display: block; height: 100%; width: 100%; text-decoration: none;}

@media only screen and (min-width: 700px) {
#header {width: 100%; color:#ffffff; background-color: #006761;}
}
@media only screen and (max-width: 700px) {
#header {display: none;}
}

@media only screen and (max-width: 700px) {
#header-m {width: 100%; color:#ffffff; background-color: #006761; text-align:center;}
}
@media only screen and (min-width: 700px) {
#header-m {display: none;}
}

@media only screen and (min-width: 700px) {
#nav {width: 100%; padding:10px; text-align:center; font-size: 14px; color:#055b7e; background-color: #d4d4c0; word-spacing: 5px; margin-top:2px;}
#nav a:link {color: #055b7e; font-size: 16px; text-decoration:none; font-weight:bold;}
#nav a:visited {color: #055b7e; text-decoration:none;}
#nav a:hover {color: #336600; text-decoration:underline;}
#nav a:active {color: #336600;}
}
@media only screen and (max-width: 700px) {
#nav {display: none;}
}

@media only screen and (max-width: 700px) {
#nav-m {padding:0px; border-bottom:1px solid #a6abb3; background:#d4d4c0;}
#button { border-top:1px solid #a6abb3; }
#button a:link {padding:10px; color:#055b7e; font-size: 16px; text-decoration:none; font-weight:bold;}
#button a:visited {color:#058f9e; text-decoration:none; font-style:italic;}
#button a:hover {color:#058f9e; text-decoration:none; font-style:italic;}
#button a:active {color:#058f9e; text-decoration:none;}
}
@media only screen and (min-width: 700px) {
#nav-m {display: none;}
}


@media only screen and (min-width: 700px) {
#photos {margin-bottom:20px;}
}
@media only screen and (max-width: 700px) {
#photos {display: none;}
}

@media only screen and (max-width: 700px) {
#photos-m img {max-width: 100%; height: auto; margin-top:20px;}
}
@media only screen and (min-width: 700px) {
#photos-m {display: none;}
}


@media only screen and (min-width: 700px) {
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:700px; margin:20px auto; display:none; overflow:hidden;}
#wrapper * {margin:0; padding:0; overflow:hidden;}
#fullsize {position:relative; width:700px; height:400px; padding:2px; border:1px solid #ccc; background:#000;}
#information {position:absolute; bottom:0; width:700px; height:0; background:#000; color:#fff; overflow:hidden;}
#information h3 {padding:4px 8px 3px; font-size:14px;}
#information p {padding:0 8px 8px;}
#image {width:620px;}
#image img {position:absolute; z-index:25; width:620px; margin:0 40px 0 40px;}
.imgnav {position:absolute; width:25%; height:400px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(slideshow/left.gif) left center no-repeat}
#imgnext {right:0; background:url(slideshow/right.gif) right center no-repeat}
#imglink {position:absolute; height:400px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
#thumbnails {margin-top:5px;}
#slideleft {float:left; width:20px; height:100px; background:url(slideshow/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:100px; background:#222 url(slideshow/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:650px; margin-left:5px; height:100px; overflow:hidden}
#slider {position:absolute; left:0; height:100px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
}
@media only screen and (max-width: 700px) {
#slideshow {display: none;}
}

#content {width: 80%; max-width:700px; margin: 0px auto; margin-top:50px; border: 0px solid #ccc; clear:both;}
@media only screen and (max-width: 700px) {
#content {width: 95%; margin: 0px auto; margin-top:25px; border: 0px solid #ccc; clear:both;}
}
#map {width: 100%; text-align:center; margin-top:50px; border: 0px solid #ccc; clear:both;}
#contact {width: 100%; text-align:center; margin-top:50px; border: 0px solid #ccc; clear:both;}
#calendar {width: 80%; text-align:center; margin-top:50px; border: 0px solid #ccc; clear:both; margin: 50px auto; }
@media only screen and (max-width: 700px) {
#calendar {width: 96%; text-align:center; margin-top:25px; border: 0px solid #ccc; clear:both; margin: 50px auto; }
}
#rates {width: 60%; margin: 50px auto; margin-top:50px; border: 0px solid #ccc; clear:both;}
@media only screen and (max-width: 700px) {
#rates {width: 95%; margin: 5px auto; margin-top:25px; border: 0px solid #ccc; clear:both;}
}

@media only screen and (min-width: 700px) {
#footer {width: 100%; text-align:center; padding-top:10px; padding-bottom:50px; position:relative; color:#cccece; background-color: #3f4040; word-spacing: 5px;}
#footer a:link {color: #cccece; font-size: 14px; text-decoration:none;}
#footer a:visited {color: #cccece; text-decoration:none;}
#footer a:hover {color: #ffffff; text-decoration:underline;}
#footer a:active {color: #ffffff;}
}

@media only screen and (max-width: 700px) {
#footer {display: none;}
}

#copyright {font-size:12px; word-spacing: 0px; width: 100%; text-align:center; padding-top:10px; padding-bottom:100px; position:relative; bottom:0; color:#cccece; background-color: #3f4040;}