/*

Logo tree (blue): #1c597e 
Logo company name (aubergine): #779e9d
Logo company name (grey): #9e9e9e 

*/

body
{
	font: 0.8125em Verdana, sans-serif; 
	line-height: 1;
	/*font-size: 0.9em;*/
	margin: 0; 
	/*background: #779e9d;*/ /*background: #9e9e9e;*/ /*background: #1c597e;
background: #CCCCCC;
background: #FFFFFF;
background: #eeeeee;*/
	background-color: #FFFFFF;
}


#leftcontainer {
margin: auto;
width: 790px;
padding: 0px 0px 0px 10px;
background: url('../images/site/leftshadow.gif') top left repeat-y;
}
#rightcontainer {
width: 790px;
padding: 0px 10px 0px 0px; /* This would ideally be 0px 12px 0px 0px but IE shows a white gap. */
background: url('../images/site/rightshadow.gif') top right repeat-y;
}

#container {
width: 790px;
background: #FFFFFF;
border: 1px solid #999999;
}

#accessibility {
display: none;
}

#header {
margin: 0;
border-bottom: 1px solid #9e9e9e;
}
#header img {
display: block; /* Necessary to remove gap below logo. */
border: 0;
}

.header-index {
background: #FFFFFF url('../images/site/bannerfade.gif') right no-repeat;
}


#sitemenu {
padding: 0;
border-bottom: 1px solid #9e9e9e;
}
#sitemenu h2 {
display: none;
}
#sitemenu ul {
margin: 0;
padding: 0;
height: 2em;
line-height: 2em; /* Necessary to make the list height the same as the item anchor height. */
list-style: none;
}
#sitemenu li {
display: inline;
}
#sitemenu li a {
float: left; /* Necessary to prevent gaps in between the items. */
padding: 0em 0.4em 0em 0.4em;
text-decoration: none;
white-space: nowrap;
color: #1c597e;
border-right: 1px solid #CCCCCC;
background: #FFFFFF url('../images/site/tab.gif') bottom repeat-x;
}
#sitemenu li.active a {
color: #000000;
background: #FFFFFF;
/*border-bottom: 1px solid #FFFFFF;*/
}
#sitemenu li a:hover {
color: #000000;
background: #FFFFFF url('../images/site/tab-hover.gif') top repeat-x;
}

#banner {
height: 150px;
border-bottom: 1px solid #9e9e9e;
}
.banner-home { /* Would ideally do .banner-home, but IE6 doesn't understand it. */
background: url('../images/site/banners/banner-home.jpg') no-repeat;
}
.banner-index {
	background: url('../images/site/Beach.jpg') no-repeat;
}
.banner-hawton {
background: url('../images/site/banners/banner-generic.jpg') no-repeat;
}
.banner-coeden-afal {
background: url('../images/site/banners/banner-generic.jpg') no-repeat;
}


#page {
text-align: justify;
padding: 0.9em 1.3em 0.9em 1.3em;
margin: 0;
}

#page h1 {
font-size: 1.2em;
color: #1c597e;
margin: 0;
}
#page h2 {
font-size: 1em;
/*border-bottom: 1px dotted #CCCCCC;*/
margin-bottom: 0em;
}
#page h3 {
font-size: 1em;
}

#content {
}
/* For anchor images, IE6 ignores anchor styling at bottom of stylesheet, so have to set it explicitly here. */
#content a img {
border: 1px solid #1c597e;
}
#content a:visited img {
border: 1px solid #666666;
}
#content a:hover img {
border: 1px solid #77929d;
}
#content a:active img {
border: 1px solid #779e9d;
}
/** Begin home page styling **/
#content #intro {
float: left;
padding: 2em 1em 2em 1em;
width: 36em;
}
#content #intro p {
margin: 0;
padding: 0em 1em 1em 1em;
}
#content #cottages {
float: right;
margin: 0;
padding: 2em 2em 1.5em 0em;
}
#content #cottages p {
margin: 0;
}
#content #camping {
float: right;
margin: 0;
padding: 0em 2em 1.5em 0em;
}
#content #camping p {
margin: 0;
}
/** End home page styling **/
#content #pagepic1 {
height: 200px;
width: 250px;
float: right;
margin: 0em 0em 1.3em 1.3em;
/*border: 1px solid #9e9e9e;*/
background-color: #779e9d;
}
#content #bay {
clear: right;
}

#content #pagepic2 {
height: 200px;
width: 250px;
float: right;
margin: 0em 0em 1.3em 1.3em;
/*border: 1px solid #9e9e9e;*/
background-color: #779e9d;
}

#content #ivy {
clear: right;
}
#content #fern {
clear: right;
}
#content #rowan {
clear: right;
}

#content #pagepic3 {
height: 200px;
width: 250px;
float: right;
margin: 0em 0em 1.3em 1.3em;
/*border: 1px solid #9e9e9e;*/
background-color: #779e9d;
}
#content #pagepic4 {
height: 200px;
width: 250px;
float: right;
margin: 0em 0em 1.3em 1.3em;
/*border: 1px solid #9e9e9e;*/
background-color: #779e9d;
}
#content #pagepic6 {
height: 200px;
width: 250px;
float: right;
margin: 0em 0em 1.3em 1.3em;
/*border: 1px solid #9e9e9e;*/
background-color: #779e9d;
}
#content .cottagepic {
padding: 0em 1em 0em 1em;
}
#content #weather {
border: none;
}

#footer {
font-size: 0.7em;
margin: 0;
padding: 0;
line-height: 2em;
border-top: 1px solid #9e9e9e;
}
#footer p {
margin: 0;
padding-left: 0.5em;
padding-right: 0.5em;
}
#footer #copyright {
float: left;
}
#footer #brighternet {
float: right;
}
#footer div.clear {
line-height: 0; /* Necessary in IE to reduce height of empty div below footer text. */
}

.clear { /* Necessary to stretch content to below floated content. */
clear: both;
height: 0;
line-height: 0; /* Necessary for IE because it seems to ignore height. */
}

a {
color: #1c597e;
}
a:visited {
color: #666666;
}
a:hover {
color: #77929d;
}
a:active {
color: #779e9d;
}
hr {
/* Have the following styling in the print/handheld CSS.
border: 0;
margin: 0;
height: 1px;
color: #9e9e9e;
background-color: #9e9e9e;
*/
display: none;
}