/* Style rules for main body */

html
{
font-size:100%;
}

body {
font-size:62.5%/100%; /* font-size set then ems used for size adjustments */
font-family:Verdana,"myriad web","Lucida Grande",tahoma,Arial,Helvetica,sans-serif;
background:#99aaff url(i/bodycss.gif) repeat-y top left;
padding:0;
margin:0;
line-height:1em;
}
h3
{
border-bottom:1px dashed #B2B2B2;
font-family:Georgia,Times,serif;
font-size:1.36em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0 0 0.5em 0;
padding-bottom:0;
text-align:left;
}

/* end of common styles */

#topbanner
{
position:absolute;
top:0;
left:0;
background:#99aaff url(i/headercss.jpg) no-repeat top left;
height:300px;
width:100%;
}

/* topbanner image above - main graphic */

#content1
{
position:absolute;
text-align:left;
color:#dddddd;
width:346px;
top:300px;
left:18px;
font-size:0.8em;
padding:1em 1em 0 1em;
z-index:2;
}

#content2
{
position:absolute;
top:310px;
left:424px;
padding:0 0 1em 0.1em;
color:#dddddd;
width:350px;
font-size:0.8em;
}

.dets
{
font-weight:bold;
display:none;
}
a#showAddy {
margin-bottom:0em;
}
.dets span.detsHeader {
color:#99FF00;
}

.snailmail
{
display:block;
color:#fff;
padding:0 0 4px 20px;
}

#addy
{
margin-top:0px;
}

#message
{
color:#ff9900;
font-weight:bold;
}

/***************************** H1 BG images ********************************/
#header1,#header2,#header3,#header4,#header5,#header6,#header7,#header8,#header9,#header10,#ospreyHeader,#photo,#photo2,#contact_header
{
clear:both;
color:#006E30;
font-size:1em;
height:20px;
margin:0 0 15px 0;
padding:0;
background: url(i/h1_header1.jpg) no-repeat top left;
}

#header2
{
background: url(i/h1_header2.jpg) no-repeat top left;
}

#header3
{
background: url(i/h1_header3.jpg) no-repeat top left;
}

#header4
{
background: url(i/h1_header4.jpg) no-repeat top left;
}

#header5
{
background: url(i/h1_header5.jpg) no-repeat top left;
}

#header6
{
height:30px;
background: url(i/h1_header6.jpg) no-repeat bottom left;
}

#header7
{
background: url(i/h1_header7.jpg) no-repeat top left;
}

#header8
{
background: url(i/h1_header8.jpg) no-repeat top left;
}

#header9
{
background: url(i/h1_header9.jpg) no-repeat top left;
}

#header10
{
background: url(i/h1_header10.jpg) no-repeat top left;
}

#ospreyHeader
{
background: url(i/osprey_header.jpg) no-repeat top left;
}

#photo
{
background: url(i/photo_header.jpg) no-repeat top left;
}

#photo2
{
background: url(i/photo_header2.jpg) no-repeat top left;
}

#contact_header
{
background: url(i/contact.jpg) no-repeat top left;
}

/******** Hide header Text  / visible in screen readers ***************/

.hideText
{
clear:both;
display:none;
}

/*** basic formatting ***/

p
{
padding:0px;
}

/************* Wee Thumbs **********/

.weepix
{
position:relative;
top:0.4em;
float:left;
padding:0.2em;
border:1px solid #fff;
margin:0 0.5em 0.2em 0;
}

#mid img
{
margin-left:4px;
}

/************* FOOTER **********/
#footer
{
clear:both;
text-align:center;
width:320px;
border-top:#999 dashed 1px;
margin:0 auto;
margin-top:15px;
padding:10px;
}

.footSpan2
{
margin-top:5px;
color:#ffffff;
display:block;
}

#footer img {
border:none;
background:none;
padding:0 0.4em 0 0;
}

#filler
{
text-indent:-1000px;
height:56px;
background: url(i/wee/filler.jpg) no-repeat 50% 50%;
}

/************* NAVIGATION **********/

#nav
{
list-style-type:none;
font-size:80%;
padding:0 0 0 2.7em;
width:98%;
margin:0 auto;
}

#nav:after { /* clears float in non IE browsers only */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#nav li
{
float:left;
margin-right:5px;
padding:3px 0;
}

#nav li a
{
text-decoration:none;
color:#ffffff;
font-weight:bold;
outline: none;
}

#nav li a:hover
{
color:#99ff00;
text-decoration:underline;
}

#nav #active a
{
text-decoration:none;
color:#99ff00;
}

#nav #active a:hover
{
text-decoration:none;
color:#99ff00;
}

/*********** Ordinary links ***************/

a
{
text-decoration:none;
font-weight:bold;
color:#ff9900;
}

a:hover
{
font-weight:bold;
color:#ffff00;
text-decoration:underline;
}

p a
{
text-decoration:none;
font-weight:bold;
color:#ff9900;
}

p a:hover
{
font-weight:bold;
color:#ffff00;
text-decoration:underline;
}

/*Cottage list */
.cottage,ul
{
list-style:disc;
padding:0px;
margin-left:60px;
}

#cottage li
{
color:#fff;
}

/********* THUMBS in unordered lists *****************/
.thumbimages,.thumbimages2
{
list-style: none;
cursor: default;
margin:0;
padding:0;
border-bottom:#445566 solid 1px;
}

.thumbimages a
{
cursor: default;
position: relative;
}

.thumb
{
padding:4px;
border:#fff 1px solid;
}

.thumb2
{
padding:2px;
border:#fff 1px solid;
width:74px;
height:50px;
}
.mainGall
{
padding:4px;
border:#fff 1px solid;
width:300px;
height:200px;
}
#imgHolder {
text-align:center;
}

.thumbimages a .preview,.thumbimages a .previewg
{
display: none;
}

.thumbimages a:hover .preview,.thumbimages a:hover .previewg
{
display: block;
position: absolute;
top: -310px;
left:0px;
}

.thumbimages a:hover .previewg
{
display: block;
position: absolute;
top: -210px;
left:40px;
}

.thumbimages .preview
{
border: #333 solid 1px;
width: 400px;
height: 300px;
padding:5px;
background:#ffb833;
}

.thumbimages .previewg
{
border: #333 solid 1px;
width: 300px;
height: 200px;
padding:5px;
background:#FFFD9E;
z-index:5;
}

.thumbimages li
{
position: static;
color: inherit;
display: inline;
position: relative;
float: left;
margin: 0 1px;
padding:2px;
}

.clearer
{
clear:both;
}

/****************** IE FIXES **************************/


.thumbimages a:hover
{
display: block;
font-size: 100%;
z-index: 5;
}

.thumbimages:after { /* clears float in non IE browsers only */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/***************************** Thumbs in mainpage *************************************/

/* MAIN PAGE IMAGES */

.mainthumbs
{
list-style: none;
cursor: default;
margin:0;
padding:0;
}

.mainthumbs a
{
cursor: default;
}

.mainimg
{
margin:0px 0 0 5px;
padding:2px;
border:#fff 1px solid;
width:60px;
height:40px;
}

.mainthumbs a .preview2
{
display: none;
}

.mainthumbs a:hover .preview2
{
display: block;
position: absolute;
top: -300px;
left:25px;
z-index: 1;
}

.mainthumbs .preview2,.mainthumbs .norm {
border: #000 solid 1px;
width: 400px;
height: 300px;
padding:5px;
background:#6B8BD4;
}
.mainthumbs .norm {
width:200px;
height:100px;
}

.mainthumbs li
{
color: inherit;
display: inline;
float: right;
margin: 3px 0 0 0;
padding: 0px;
position: relative;
}

/****************** FORM STYLES ****************************/

#myform
{
margin-top:1em;
margin-bottom:2em;
color:#fff;
font-family:verdana,sans serif;
font-size:0.9em;
}
#myform fieldset
{
border:1px dotted #99FF00;
padding:0.5em;
}
#myform legend
{
font-family:verdana;
letter-spacing:2px;
color:#1C222A;
padding:0 0.8em;
background:#99FF00;
}

#name,#email
{
border:1px solid #333;
width:22em;
}

#name:hover ,#email:hover
{
border:1px solid #000;
background-color:#C1FF62;
}

#comments
{
width:22.8em;
border:1px solid #333;
height:8em;
}
#comments:hover 
{
width:22.8em;
border:1px solid #000;
background-color:#C1FF62;
height:8em;
}

#myform label
{
font-family:verdana;
letter-spacing:2px;
font-weight:bold;
color:#D4F0F7;
}

#myform input,#myform textarea
{
margin-top:4px;
}

.warning
{
font-weight:bold;
font-variant:small-caps;
padding:5px;
color:#ffff00;
border:#999 dashed 1px;
font-size:1.2em
}

.formbutton {
background:#eee;
color:#262E39;
padding:0.1em 0.2em;
}
.formbutton:hover {
background:#262E39;
color:#eee;
}

/************ CSS Image Gallery **********************/

#gallery
{
cursor: default;
list-style-type: none;
}

#gallery a
{
cursor: default;
}

#gallery a .preview
{
display: none;
}

#gallery a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

#gallery img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 75px;
	height: 50px;
}

#gallery li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 2px;
	padding: 2px;
	position: relative;
}
.bargain {
color:#ffff00;
font-weight:bold;
font-size:0.9em;
}

/* Gallery Table */
table {
width:100%;
text-align:center;
}
#back {
width:50%;
}
#forward {
width:50%;
}
#back a,#forward a {
color:#ffff00;
}
#back a:hover,#forward a:hover {
color:#fff;
text-decoration:underline;
}