body{margin: 0; padding: 0; font-family:arial,sans-serif; font-size: 13px; text-align: left; color: #222; background-color: #FBFBFB; background-image: url('images/bg_trees_grey.jpg'); background-attachment: fixed;}

h3 {font-size: 1.4em; background-color: #047B3C; background-image: url('images/gradient_h3.png'); padding: 1px 0; border: 0; color: #FFF; width: 100%; text-align: center;  clear: both;} /* header in main content */
h4 {font-size: 1.1em; text-align: left; padding-left: 20px; color: #047B3C; background-color: #A8D3A9; clear: both;} /* sub-header in main content, dark green text on paler green background. */
h5 {font-size: 1em; text-align: left; padding-left: 30px; font-weight: bold; font-variant: normal; color: #047B3C;} /* sub-sub-header, main content */
h6 {font-size: 0.8em;} /* e.g. header of socials date section */

br.clearboth {clear: both;}

a.backlinkanchor {font-variant: small-caps; text-decoration: underline; color: white; font-weight: bold;}

div.wholecontainer {}

/* top header */
div.header {padding: 0 0 5px; height: 93px; background-image: url('images/SWG_banner_2009_plain_1.jpg'); background-color: #047B3C; background-repeat: no-repeat; margin: 0 0 0 30px; width: 900px; border: 0; position: fixed; left: 10px; top: 0px; z-index: 2;}
div.bannerbackground {float: left; width: 900px; height: 83px; font-family: "Verdana"; vertical-align: text-top; margin: 0; padding: 0; border: 0;}
div.logo {float: left; width: 260px; clear: none;  text-align: left; margin: 0; padding: 0; border: 0;}
img.logo {width: 260px; height: 82px;}
div.header h1 {text-align: left; color: white; font-size: 2.5em; font-weight: bold; padding: 0; margin: 10px 0 0 10px;} /* full title in header box */
div.header h2 {text-align: right; font-size: 1.4em; color: #D7DF01; font-weight: bold; font-style: italic; padding: 10px 0 0; margin: 0 5px; border: 0; vertical-align: text-bottom;} /* subtitle in header box */
div.navbar {float: left; clear: left; width: 100%; padding: 0; margin: 0; text-align: center; background-image: url('images/gradient_header.png'); }
ul.navlist {margin: 0; padding: 0; border: 0;}
li.navitem {display: inline; float: left; padding: 0; width: 125px; font-size: 1.2em;}
div.header a.backlinkanchor {text-decoration: none;}

/* left and right side-bars, for navigation and highlighted info */
div.leftsidebar {width: 150px; padding: 0; margin: 15px 15px 30px 30px; position: fixed; left: 10px; top: 110px; z-index: 2; }
div.rightsidebar {width: 150px; padding: 0; margin: 15px 15px 30px 30px; position: fixed; left: 760px; top: 110px; z-index: 2; }
/*sub-menu, LHS */
div.submenu {color: white; border: 1pt solid #047B3C; background-color: #554E69; background-image: url('images/bg_woodlanddark.jpg'); }
div.submenu h3 {border: 0; padding: 0; margin: 0; font-size: 1.3em;}
ul.subnavlist {list-style-type: none; padding: 0; margin: 5px 1px;}
li.subnavitem {margin: 0 2px 0; font-size: 1.2em; text-align: left; color: white; font-weight: bold; padding: 0; border: 0;}
li.submenuheading {margin: 0 2px 0 0; text-align: left; font-weight: bold; }

/* sidebar items; either left or right according to the page */
div.sidebaritem {width: 148px; border: 1px solid #047B3C; text-align: left; margin: 5px 0; color: white; background-color: #554E69; background-image: url('images/bg_woodlanddark.jpg');}
div.sidebaritem h5 {/*font-size: 1em; */text-align: center; border: 0; padding: 0; margin: 0; width: 100%; background-color: #047B3C; color: white;}
div.sidebaritem p {font-size: 0.8em; border: 0; padding: 0; margin: 8px 0; font-weight: bold;}
div.sidebaritem ul, div.sidebaritem li {border: 0; padding: 0; margin: 0; font-size: 0.8em; list-style-type: none;} /* e.g. social secs list */
div.sidebaritem img {max-width: 148px;} /* Formerly used for email address images */
div.sidebaritem a:link {color: #B1B5FF;}
div.sidebaritem a:visited {color: #F08CFF;}
div.sidebaritem a:hover {}
div.sidebaritem a:active {}

/* the main content; full-width apart from the side-bar(s) */
div.maincontent {/*width: 690px; */padding: 0 0 100px; margin: 15px 30px 100px; text-align: left; position: absolute; left: 210px; top: 110px; z-index: 1;}
div.maincontentwide {width: 690px;} /* for when there's no right side-bar */
div.maincontentnarrow {width: 510px;} /* for when there's a right side-bar. */
div.maincontentfull {width: 900px; position: absolute; left: 10px; top: 110px; z-index: 1;} /* for when there's no left or right side-bars */
div.intro {text-align: center; font-size: 0.9em;}

/* walks and stuff: */

div.walk, div.weekendaway {border: 1px solid #D8D8D8; margin: 4px 0; padding: 0; width: 100%;}
div.walk div, div.weekendaway div {padding: 3px;}
div.walkheader, div.weekendheader {font-weight: bold; font-size: 1.2em; height: 30px;}
div.walkheader div, div.weekendheader div {padding: 1px;}
div.walkdate, div.weekenddate {float: left; width: 250px;}
div.walktitle, div.weekendtitle {float: left; width: 370px;}
div.walkicon, div.weekendicon {float: left;}
div.walkicon img, div.weekendawy img {border: 0; margin: 0; padding: 0;}
div.walkdescription, div.weekenddescription {clear: left;}
div.walkstart {font-size: 0.85em;}
div.walktransport {font-size: 0.85em;}
div.walkleader{float: left; font-size: 0.85em;}
div.walkbackmarker {margin-left: 400px; font-size: 0.85em;}
div.weekendmoreinfo {font-size: 0.85em;}
div.weekendplaces {font-size: 0.85em;}
div.weekendcontact {font-size: 0.85em;}
div.weekendopen {font-size: 0.85em;}

.walksaturday {background-color: #F3FBF3;}
.walksunday {background-color: #F3F7FB;}
.walkmidweek {background-color: #FCF8F8;}
.weekendaway {background-color:#F8F9E7;}

div.walksaturdayheader {background-color: #def6de; background-image: url('images/gradient_saturdaywalk.png');}
div.walksundayheader {background-color: #dbedf6; background-image: url('images/gradient_sundaywalk.png');}
div.walkmidweekheader {background-color: #f5e7e8; background-image: url('images/gradient_midweekwalk.png');}
div.weekendheader {background-color: #f5f5d0;  background-image: url('images/gradient_weekendaway.png');}

th.walkicon {text-align: center;}
img {border: 0;}
img[src="images/dogs.png"] {width: 19px; height: 16px;}
img[src="images/challenge.png"] {width: 19px; height: 34px;}
img[src="images/speedy.png"] {width: 19px; height: 16px;}

dt.icondefinition, dd.icondefinition {margin: 0; padding: 0;	list-style-type: none; display: inline;}
dt.icondefinition {margin-left: 15px; margin-right: 5px;}

th, span.celltitle{font-weight: bold;}
.postscript{font-size: 0.8em; margin: 0; padding: 0; border: 0; text-align: center;} /* 'don't call during office hours */
.alteration{color: red; font-weight: bold;}
.reminder{color: #C0C0C0; /*font-size: x-small;*/} /* what is this intended for? */

div.protocolreminder {width: 100%; border: 0; margin: 0; padding: 0; text-align: center; font-style: italic;}
a.bookmark {position: relative; top: -120px; display: inline; font-size: xx-small; height: 1px; padding: 0; margin: 0; border: 0; max-height: 1px; visibility: hidden;}
a.reflexivelink:link {text-decoration: none; color: #222;}
a.reflexivelink:visited {text-decoration: none; color: #222;}
a.reflexivelink:hover {text-decoration: none; color: blue;}
a.reflexivelink:active {text-decoration: none; color: blue;}
div.bookinginfo {width: 90%; border: 1px dotted; padding: 0 5%;}
div.bookinginfo h5 {margin: 5px;}
div.bookinginfo ol {text-align: left;}
div.bringlist {width: 30%; float: left;}

table.maplist {border-collapse: collapse; table-layout: fixed; width: 100%; }
table.maplist td, table.maplist th {padding: 0 5px 0 10px; margin: 0; border: 1px solid #BBBBBB;}
table.maplist th {background-color: #CCCCCC;}

/* mostly socials stuff */
.odd, .odd div {background-color: #FBFBFB;} /* unused I think. What is that colour anyway? */
.even, .even div {background-color: #F9FFEB;} /* very pale green */

.event {width: 100%; overflow: hidden;} /* socials event */
.dateblock {width: 20%; margin: 0; padding: 0; border: 0; float: left;}
.detailsblock {width: 75%; font-size: 0.9em; margin: 0; padding: 0; border: 0; float: right;}

.bookings {font-size: 0.8em;} /* socials booking */
.bookings ul {border: 0; padding: 0 12px;}

p.description {border: 0; padding: 0; margin: 5px 0;} /* socials item description. */
img.clipart {float: right; max-height: 75px; margin: 1px;} /* socials images. */
p.map {} /* e.g. link to dev cat map. */
a.maplink {} /* again, link to dev cat map */

span.hide {display: none;} /*useful for obfuscating emails */

/* admin logon page: */
div.logininformation {text-align: right;}
#loginbox {margin: 0; border-width: 5px; border-color: #047B3C; border-style: solid; background-color: #A6CE38; padding: 20px; width: 300px; text-align: center; float: none; clear: none; position: fixed; left: 30%; top: 30%; right: 30%;}
#loginbox span.caption {float: left; clear: left; margin: 5px;}
#loginbox #login, #loginbox #password {float: right; clear: right; margin: 5px;}
#submit {margin: 5px 50px;}

/* Various admin pages with forms: */
div.formrow {float: left; clear: both; border: 0; margin: 0; padding: 3px 0; width: 685px; background-color: #F9FFF9; }
div.formrow span.caption {float: left; text-align: right; width: 200px;}
div.formrow span.formw {float: right; text-align: left; width: 475px;}
div.formrow span.optional {}
div.formrow span.mandatory {}
div.formrow span.wasempty {text-decoration: underline;}
span.mandatory input, span.mandatory textarea {background-color: #FFFFCC;}
span.wasempty input, span.wasempty textarea {background-color: #FFFF99;}
input, textarea {margin: 0; padding: 0;}
input.radio {display: inline; }
label {display: inline; }
input.submit {margin: 10px 0 0 20px; padding: 5px 10px; }

fieldset {width: 685px; margin: 10px; padding: 0; /*border-color: #EFE; border-width: 14px; border-style: solid; */}
legend {font-weight: bold;}

form {margin: 10px 0; width: 690px;}
form.formonebutton {width: auto; margin: 5px; padding: 0;}
form.formonebutton input.submit {margin: 0; padding: 0;}

div.fieldboth {clear: both; width: 690px; margin: 0 0 10px; border: 0; padding: 0;}
div.fielddesc {clear: none; float: left; width: 140px; margin: 0; border: 0; padding: 0; font-weight: bold; }
div.fieldcontent {clear: none; float: right; width: 470px; margin: 0; border: 0; padding: 0;}

fieldset table, fieldset tr, fieldset th, fieldset td {border-width: 1px; border-style: solid; table-layout: fixed; background-color: #F9FFF9;}

/* admin: showandupdateavailability.php */
table.datestable {border-width: 1px; border-style: solid; border-collapse: collapse;}
.datestable th {}
.datestable th, .datestable td {border-width: 1px; border-style: solid; margin: 5px; padding: 5px;}
.datestable tr.Saturday {background-color: #DDFFDD;}
.datestable tr.Sunday {background-color: #DDDDFF;}
.datestable tr.Monday, .datestable tr.Tuesday, .datestable tr.Wednesday, .datestable tr.Thursday, .datestable tr.Friday {background-color: #FFEEFF;}
.datestable tr.WeekendAway {background-color: #FFFFEE;}

/* admin: walks library */
table.walkstable {border-width: 1px; border-style: solid; border-collapse: collapse; background-color: #F9FFF9;}
.walkstable th {}
.walkstable th, .walkstable td {border-width: 1px; border-style: solid; margin: 5px; padding: 5px;}
.walkstable tr.walkheadersaturday {background-color: #DDFFDD;}
.walkstable tr.walkheadersunday {background-color: #DDDDFF;}
.walkstable tr.walkheadermidweek {background-color: #FFEEFF;}

/* admin: view walk */
table.seealsotable {border-width: 1px; border-style: solid; border-collapse: collapse; margin: 1px 100px;}
.seealsotable th {}
.seealsotable th, .seealsotable td {border-width: 1px; border-style: solid; margin: 0; padding: 0;}

/* admin: Table definitions (sql) */
.sqltable {border-width: 1px; border-style: solid; border-collapse: collapse;}
.sqltable th {}
.sqltable th, .sqltable td {border-width: 1px; border-style: solid; margin: 5px; padding: 5px;}

/* faq */
dl.faq dt {border: 0; margin: 0 0 0 20px; padding: 0; font-weight: bold;}
dl.faq dt:before {content: "Q: "}
dl.faq dd {border: 0; margin: 0 0 10px 40px; padding: 0;}
dl.faq dd:before {content: "A: "}

/* contact */
.snapshot {margin: 10px;}
.snapshotodd {float: left;}
.snapshoteven {float: right;}
.photocaption {vertical-align: bottom;}
.roledescription {text-align: left; margin: 30px 10px;}

/* several pages*/
.charityblurb {clear: both; font-size: smaller; margin: 20px 0;}

/* Image gallery */
div.yearbulletbar {margin: 0;}
ul.yearbulletlist {width: 900px;  margin: 0;  border: 0;  padding: 0;  float: left;}
li.yearbullet {display: inline;  font-size: 1.5em; text-align: center;}
li.yearbullet:before {content: " | "; /* I did try and put • here, but it was taken literally boo hiss. */}
li.yearbullet:first-child:before {content: "";}

div.calendarrow {margin: 0; clear: left;}
div.day {float: left; clear: none;  font-size: 0.8em; vertical-align: top;  width: 165px;  margin: 0 5px; text-align: center;}
div.freshlyupdated {color: red;}
img.thumbnail {height: 90px;  margin: 0;  padding: 5px; border: 2px solid;}
img.nophotos {height: 90px;  margin: 20px 0 0 0; border: 0; padding: 0;}
img.nospammers {height: 19px;  width: 294px; border: 0; padding: 0;}
span.emailaddress {font-style: italic;}
#footer {background-image: url(../buttons/footerbg.jpg);background-position: center left;background-repeat: repeat-x;}
div.footerrow1 {background-color: #A6CE38;  margin: 0;  height: 10px;}
div.footerrow2 {background-color: #00A54F;  color: white; /* font-size: small; */ margin: 0;  padding: 0;  border: 0;  height: 30px;}

/* walks library search results */
span.highlightsearchterm {background-color: #FFFF99;}

span.emphasisA {font-weight: bold;}
span.emphasisB {font-style: italic;}
td.currency {text-align: right;}

/* When printing, only include the main content */
@media print {
	div.header, div.leftsidebar, div.rightsidebar {display: none;}
	div.maincontent {/*width: 690px; */padding: 0 0 100px; margin: 15px 30px 100px; text-align: left; position: relative; left: 0; top: 0;}
	div.maincontentwide {width: 100%;} /* 100%, because side-bars not included in printout. */
	div.maincontentnarrow {width: 100%;} /* 100%, because side-bars not included in printout. */
	div.maincontentfull {width: 100%;}  /* 100%, because side-bars not included in printout. */
}