/* 

STYLE SHEET FOR "http://www.staithes.co.uk"
Created by David Mann for MannMadeMedia.co.uk
www.davidmann.info
www.mannmademedia.co.uk

ToC

	1. defaults
			body,
		
	2. structure
			a. wrapper
			b. header
			   splash
			c. content
				inner
			d. footer
			
			e.primary content
			f. secondary content
		
	3. links and navigation
		a. menu
			ul linklist
		e. tabs
	4. fonts
		a. header
		b. general
		c. misc
	5. images
	6. tables
	7. forms
	8. Misc
			a. #date
	
Notes

*/



/* 1.  ---------  defaults  --------- */

* {
		margin: 0;
		padding: 0;
		}

body {
		background: #F9F9F7 url(../images/a1.gif) repeat-x;
		font-size: 14px;
		font-family: "trebuchet ms", helvetica, sans-serif;
		/* color: #8C8C73; */
		color: #6a6a50;
		line-height: 18px;
		}
		
/*****  2.  *******/
/*---------  structure  --------- */

/*  2 a. --- wrapper --- */
#wrapper {
		position: relative;
		width: 747px;
		margin: 0 auto;
		background: #fff url(../images/abg.gif) repeat-y;
		}

#container {
		}
		
/*  2 b. --- header --- */


#header {
		position: absolute;
		background: #FF7800 url(../images/a8.gif) repeat-x;
		width: 202px;
		height: 92px;
		color: #fff;
		padding-left: 20px;
		}

#header span {
		font-weight: normal;
		}

#masthead {
		}
		
#logo {
		}
		
#navContainer {
		}
		
#splash {
		position: absolute;
		right: 30px;
		background: #EAEAE2 url(../images/a10.jpg) no-repeat;
		width: 458px;
		height: 92px;
		background-image: url(images/a_classic_winterjpg.jpg);
		}
		
		
/*  2 c. --- content --- */

#content {
		}
		
#inner {
		position: relative;
		padding: 13px 30px 13px 30px;
		z-index: 2;
		}


/*  2 d. --- footer --- */	

#footer {
		position: relative;
		clear: both;
		height: 66px;
		text-align: center;
		line-height: 66px;
		background-image: url(../images/a50.gif);
		/* color: #A8A88D; */
		color: #666666;
		}
		
#footer a {
		color: #8C8C73;
		}





.separator {
		clear: both;
		}

.separatorInvisible {
		clear: both;
		height: 1px;
		}

.clearFix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
		}
		
/* 2e - primary content -*/
#primarycontent {
		position: relative;
		width: 480px;
		float: left;
		}

#widecontent {
		position: relative;
		width: 685px;
		float: left;
		}
		

#primarycontent h3, #widecontent h3 {
		position: relative;
		top: 4px;
		font-size: 18px;
		line-height: 25px;
		/* color: #656551; */
		color: #666666;
		letter-spacing: -1px;
		background: url(../images/a22.gif) bottom repeat-x;
		padding: 0px 0px 10px 15px;
		margin-bottom: 20px;
		}
		
#primarycontent .content, #widecontent .content {
		padding: 0px 15px 0px 15px;
		margin-bottom: 20px;
		font-size: 14px;
		}

#primarycontent .post, #widecontent .post {
		margin-bottom: 30px;
		text-align: justify;
		}

#primarycontent .post .header, #widecontent .post .header {
		position: relative;
		text-align: justify;
		}

#primarycontent .post .date {
		position: absolute;
		right: 15px;
		top: 0px;
		line-height: 35px;
		color: #AFAFA4;
		font-weight: bold;
		}

#primarycontent .post .content {
		margin-bottom: 0px;
		}

#primarycontent .post .footer {
		position: relative;
		top: -10px;
		background: url(../images/a33.gif) repeat-x;
		height: 64px;
		}

#primarycontent .post .footer ul {
		list-style: none;
		position: absolute;
		right: 15px;
		bottom: 15px;
		}

#primarycontent .post .footer ul li {
		display: inline;
		line-height: 14px;
		padding-left: 17px;
		margin-left: 25px;
		background-repeat: no-repeat;
		background-position: 0px 2px;
		}

#primarycontent .post .footer ul li.printerfriendly {
		background-image: url(../images/a41.gif);
		}

#primarycontent .post .footer ul li.comments {
		background-image: url(../images/a36.gif);
		}

#primarycontent .post .footer ul li.readmore {
		background-image: url(../images/a38.gif);
		}


/* 2f - secondary content -*/
#secondarycontent {
		position: relative;
		width: 180px;
		float: right;
		}

#secondarycontent h3 {
		position: relative;
		top: 4px;
		font-size: 20px;
		line-height: 25px;
		color: #656551;
		letter-spacing: -1px;
		background: url(../images/a22.gif) bottom repeat-x;
		padding: 0px 0px 10px 10px;
		margin-bottom: 20px;
		}

#secondarycontent .content {
		padding: 0px 10px 0px 10px;
		margin-bottom: 20px;
		font-size: 13px;
		text-align: left;
		}
		

/* ---------- 3. links and navigation ---------- */

a {
		color: #FF7800;
		text-decoration: underline;
		}
		
a:hover {
		text-decoration: underline;
		color:#000066;
		}

#navigation {
		}

#navigation ul {
		}

#navigation li {
		}

#navigation a {
		}

#navigation a:hover {
		}

/* 3a - menu */
#menu {
		position: relative;
		background: #46461F url(../images/a16.gif) repeat-x;
		height: 67px;
		padding: 0px 20px 0px 5px;
		margin: 98px 0px 20px 0px;
		}

#menu ul {
		}

#menu ul li {
		display: inline;
		line-height: 52px;
		padding-left: 3px;
		}

#menu ul li.first {
		border-left: 0px;
		}

#menu ul li.active {
		background: #fff url(../images/a18.gif) repeat-x top;
		color: #4A4A24;
		text-decoration: underline;
		}

#menu ul li a {
		background-color: transparent;
		background-repeat: repeat-x;
		padding: 8px 12px 8px 12px;
		font-size: 12px;
		color: #fff;
		font-weight: bold;
		}

#menu ul li a:hover {
		background: #fff url(../images/a18.gif) repeat-x top;
		color: #4A4A24;
		text-decoration: underline;
		}
		
/* /menu */

ul.linklist {
	list-style: none;
	}

ul.linklist li {
		border-top: solid 1px #EEEEEE;
		padding-top: 5px;
		margin: 5px 0px 0px 0px;
		}

ul.linklist li.first {
		border-top: 0px;
		margin-top: 0px;
		padding-top: 0px;
		}



/* 3e - tabs. For the links section */
/* tabs.css */

ul#tabnav { /* general settings */
	text-align: center; /* set to left, right or center */
	margin: 1em 0 1em 0; /* set margins as desired */
	font: bold 11px verdana, arial, sans-serif; /* set font as desired */
	border-bottom: 1px solid #333; /* set border COLOR as desired */
	list-style-type: none;
	padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
	background: url(../images/z1shrunk3.gif) bottom repeat-x;
}

ul#tabnav li { /* do not change */
	display: inline;
}

#tab1 li.tab1, #tab2 li.tab2, #tab3 li.tab3, #tab4 li.tab4, #tab5 li.tab5, #tab6 li.tab6 { /* settings for selected tab */
	border-bottom: 1px solid #fff; /* set border color to page background color */
	background-color: #fff; /* set background color to match above border color */
}

#tab1 li.tab1 a, #tab2 li.tab2 a, #tab3 li.tab3 a, #tab4 li.tab4 a, #tab5 li.tab5 a, #tab6 li.tab6 a, #tab7 li.tab7 a { /* settings for selected tab link */
	background-color: #fff; /* set selected tab background color as desired */
	color: #333; /* set selected tab link color as desired */
	position: relative;
	top: 1px;
	padding-top: 4px; /* must change with respect to padding (X) above and below */
	text-decoration: none;
	font-weight:bold;
}

ul#tabnav li a { /* settings for all tab links */
	padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
	border: 1px solid #333; /* set border COLOR as desired; usually matches border color specified in #tabnav */
	background-color: #666; /* set unselected tab background color as desired */
	color: #fff; /* set unselected tab link color as desired */
	margin-right: 0px; /* set additional spacing between tabs as desired */
	text-decoration: none;
	border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
	background: #fff; /* set desired hover color */
	color: #666;
}

/* end css tabs *




/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
		font-size: 62.5%;
		}

h1, h2, h3, h4, p, ul {
		}

h1 {
		}

h2 {
		}

h3 {
		}
		
h4 {
		}

p {
		}

ul {
		}

blockquote {
		}

/* 4a header fonts */
#header h1 {
		position: absolute;
		font-size: 23px;
		letter-spacing: -1px;
		top: 30px;
		height: 92px;
		}

#header h2 {
		position: absolute;
		font-size: 10px;
		font-weight: normal;
		color: #FCE2CA;
		top: 51px;
		}

#header sup {
		color: #FCE2CA;
		}
		
/* 4b - general */
sup
{
font-size: 0.5em;
}

p
{
margin-bottom: 14px;
/*text-align: justify;*/
}

p .left {
text-align: left;
}

/*4c misc -*/


/* ---------- 5. images ---------- */

#topbg {
		position: absolute;
		top: 0px;
		left: 0px;
		background: #fff url(../images/upbg.gif) no-repeat;
		width: 747px;
		height: 264px;
		z-index: 1;
		}

a img {
		border: 0;
		}
		
img.picA {
	position: relative;
	top: -2px;
	background: url(../images/a47.gif) no-repeat;
	width: 76px;
	height: 74px;
	padding: 8px;
	background-image: url(../images/a47.gif);
		}

img.picB {
		position: relative;
		top: -2px;
		background: url(../images/a26.gif) no-repeat;
		width: 146px;
		height: 75px;
		padding: 7px;
		}

img.floatleft
{
float: left;
margin: 0px 14px 3px 0px;
}
		
/* ---------- 6. tables ---------- */

table {
		}
		
caption {
		}
		
tr {
		}

th, td {
		}
		
th {
		}
		
td {
		}

/* ---------- 7. forms ---------- */	
		
form {
		}

/* ------------- 8. Misc --------*/
#date {
		position: absolute;
		top: 0px;
		line-height: 52px;
		color: #BDBDA2;
		right: 30px;
		font-weight: bold;
		font-size: 12px;
		letter-spacing: -1px;
		}