/* Ramblers colour scheme
TEXT
  #663333 (dark brown): text, thin borders
  #808000 (olive): site heading, page heading
  #cc6600 (not quite orange): labels in contact table, grades table, sample walks table & poetry frame
  #000000 (black): photo captions

BACKGROUNDS
  #ffffff (white): most of site
  #cccc99 (pale green): header and footer
*/


.clearboth { 
	clear: both; 
	}

.centred {
	text-align: center;
	}

.indented {
	margin: 0 0 0 2em;
	}

/* main text colour is dark brown */
body {
	color: #663333;	
	background-color: #ffffff;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-family: arial, helvetica, sans-serif; 
  	text-align: left;
	line-height: 1.2em;
	font-size: 1em; 
	}

/* links are same colour as text, underlined, and turn red when hovered over */
a:link {
	color: #663333;
	text-decoration: underline;
	}

a:visited {
	color: #663333;
	text-decoration: underline;
	}

a:active {
 	color: #663333;
	text-decoration: underline;
	}

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


#siteheader {
	margin: 0 0 0 10px;
	padding: 0.5em 0.2em 0.2em 0.2em;
	color: #808000;
	background-color: #cccc99;
  	text-align: center;
	line-height: 1.1em;
	font-family: "times new roman", times, serif;
	font-weight: bold;
	font-style: italic;
	font-size: 3em;
	border-bottom-style: solid;
	border-bottom-color: #663333;
	border-bottom-width: 1px;
	}

/* Pageheader div will include picture of boots which is 100px high, and page heading */
#pageheader {
	margin: 0 0 0 0;
	padding: 0 0 0.2em 0;
	color: #808000;
	text-align: center;
	line-height: 1.1em;
	font-family: arial, helvetica, sans-serif; 
	font-weight: bold;
	font-size: 2em;
	}
/* Picture of walking boots */
#pageheaderpic {	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	height: 100px;
	width: 133px;
	}

#menu {
	clear: both;
	float: left; 
	display: inline;
	width: 12em;
	padding: 0 0 1em 0;
	margin: 120px 0 1em 10px; 
		/* 200px top marging ensures top of menu is below bottom of hiking boot picture which is 100px tall */
	font-family: arial, helvetica, sans-serif;
	background-color: #cccc99; 
	overflow: visible;
	font-size: 1em;
	font-weight: bold;
	border-right-style: solid;
	border-right-color: #663333;
	border-right-width: 1px;
	}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}
		
#menu li {
	border-bottom: 1px solid #ffffcc;
	margin: 0;
	}

#menu li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #cccc99; 
	border-right: 10px solid #333300; 
	background-color: #666600;
	color: #cccc99;
	text-decoration: none;
	width: 100%;
	}

/* this is used for menu buttons that need to stand out: text is more yellow */
#menu li a.important {
	color: #ffff66;
	}

/* "display: block" is used to make the links active for the full width of the DIV. This does not work in IE/Windows. "width: 100%" is necessary in IE/Windows, however this creates problems with IE5/Mac and Netscape/Mozilla. So child selector ">" is used to redefine the width to auto. Since IE/Windows doesn’t understand child selectors, it ignores the rule. IE5/Mac, Opera and Netscape/Mozilla follow the rule. */

html>body #menu li a {
		width: auto;
		}

#menu li a:hover {
	border-left: 10px solid #ccff66; 
	border-right: 10px solid #666633; 
	background-color: #66cc00;
	color: #ffffcc;
	}


#maincolumn {
	float: left;
	width: 70%;
	margin: 0 0 0 0;
	padding: 0.5em 0.5em 1em 2em;
	}

#footer {
	clear: both;
	height: 100px;
	margin: 10px 0 0 10px;
	padding: 0 0 0 0;
	background-color: #cccc99;
	border-top-style: solid;
	border-top-color: #663333;
	border-top-width: 1px;
	background-image: url(pics/gumleaf.gif);
	background-repeat: repeat-x;
	}

/* styles for table with contact details */
td.contactlabel {
	color: #cc6600;
	font-family: arial, helvetica, sans-serif; 
	font-size: 1em;
	font-weight: bold;
	line-height: 1.2em;
	text-align: right;
	text-transform: uppercase;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

td.contactname {
	color: #663333;
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

td.contactdetails {
	color: #663333;
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

/* styles for table of walking grades */
td.gradelabel {
	color: #cc6600;
	font-family: arial, helvetica, sans-serif; 
	font-size: 1em;
	font-weight: bold;
	line-height: 1.2em;
	text-align: right;
	text-transform: uppercase;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

td.gradedef {
	color: #663333;
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

/* styles for table of sample walks */
td.walklabel {
	color: #cc6600;
	font-family: arial, helvetica, sans-serif; 
	font-size: 1em;
	font-weight: bold;
	line-height: 1.2em;
	text-align: right;
	text-transform: uppercase;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

td.walk {
	color: #663333;
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

.walkheading {
	font-weight: bold;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	}

.walkdescription {
	padding: 0 0 0.4em 0;
	margin: 0 0 0 0;
	}

/* styles for table of links */
td.linklabel {
	font-family: arial, helvetica, sans-serif; 
	font-size: 1em;
	color: #663333;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}

td.linkdetail {
	font-family: arial, helvetica, sans-serif; 
	font-size: 1em;
	line-height: 1.2em;
	color: #663333;
	text-align: left;
	vertical-align: top;
	padding: 0.2em 0.5em 0.2em 0.5em;
	}


.heading1 {
	padding: 0.1em 0.2em 0.1em 0.2em;
	margin: 0 0 0 0;
	color: #cc6600;
	font-family: arial, helvetica, sans-serif;
	font-size: 1.6em;
	line-height: 1.2em;
	font-weight: bold;
	}

.heading2 {
	padding: 0.1em 0.2em 0.1em 0.2em;
	margin: 0 0 0 0;
	color: #cc6600;
	font-family: arial, helvetica, sans-serif;
	font-size: 1.4em;
	line-height: 1.2em;
	font-weight: bold;
	}

.heading3 {
	padding: 0.1em 0.2em 0.1em 0.2em;
	margin: 0 0 0 0;
	color: #cc6600;
	font-family: arial, helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: bold;
	}

/* STYLES FOR POETRY BOX ON CLUB HISTORY PAGE */
#poetrybox {
	border-color: #cc6600;
	border-style: outset;
	border-width: thick;
	}

#poetrybox td {
	padding: 0.5em 0.5em 0.2em 1em;
   	text-align: left;		
	}


/* Gallery photos and thumbnails have pale green borders */
img.photo {
	border-style: solid;
	border-color: #cccc99;
	border-width: 1px;
	}

td.photoframe {
	padding: 1em 1em 1em 1em;
   	text-align: left;		
	}

img.thumbnail {
	border-style: solid;
	border-color: #cccc99;
	border-width: 1px;
	}

td.thumbnailframe {
	padding: 1em 1em 1em 1em;
	text-align: left;
	vertical-align: bottom;
	}

/* Homepage photo has border in default text colour */
img.homephoto {
	border-color: #663333;
	border-style: solid;
	border-width: 1px;
	}

.phototitle {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 1em;
	font-weight: bold;
	color: #000000;
	}

.photographer {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 0.8em;
	color: #000000;
	}

.photodetails {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	font-size: 0.8em;
	color: #000000;
	}

/* Link images (used for Acrobat logos) have no outlines */
.linkimage {
	border-style: none;
}