/*----------------------------------------------------------------------------- 
Henley Allotments Screen Stylesheet 
version:   1.0 
date:      01/01/2010
author:    Graham, based on original design by John Brit.
email:     jgtjones@btinternet.com
-----------------------------------------------------------------------------*/
/* Remove margin, padding and border from all elements.
   this provides a known starting point for subsequent settings*/ 
* { 
  margin: 0; 
  padding: 0; 
  border: 0; 
}
/*Define the styles of the common html elements (h1 - h6, p, a)
  Note that the default size in modern browsers is 16pt.
  Setting the body font size again sets a base point for other sizes.
  The print based unit of 1 em is equivalent to the default 16pt.
  The content pages using the <p> tag will have a 12pt font size, the generally accepted standard.
  Browsers vary and it appears that font sizes specified in pixels are not consistently resized.
  Using a combination of % amd em we can get resizable fonts across a range of browsers
  allowing viewers with impaired eyesight to set a larger font size range when required.
  Setting a line height of 1.125em is equivalent to 18pt.
  With a paragraph font this gives a 50% spacing between lines.*/
body {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 100%; 
  line-height:1.125em;
  background-color:#E1F3DA;
}
h1{font-size :1.75em;}
h2{font-size :1.5em;}   /* 24pt */
h3{font-size :1.25em;}
p{font-size: .75em;}    /* 12pt */
li{font-size: .75em;}    /* 12pt */
ol {margin-left:2em;}
ul {margin-left:2em;}
li {padding:0.25em 0.5em 0 1.5em;}
a:link {color:#0000FF;}     /* blue */
a:visited {color:#800080;}  /* purple */
a:hover {color:#FFFF00;}    /* yellow */
a:active {color:#FF0000;}   /* red */
/*The following define the overall design of header, 3-column middle and footer layout*/
/*The wrapper contains all the divisions and inherits properties from body
  it will fill the browser window with a minmum width*/
#wrapper{
  width: 100%;
  margin-left : auto; 
  margin-right: auto;
  min-width: 400px;
  max-width: 980px;
  background-color: #FFFFFF;
  color: #000000; 
 }
/* Define the detail styles for the header division*/
#header {
  height:68px;
  background-color: #BEDFC4;
  z-index: 8;
}
#header h1 { font-family: Garamond, Georgia,'Times New Roman', Serif; 
  margin: 0 0 0 15px;}
#header h1 {font-weight: normal; line-height: 150%;}
#header p {font-weight: normal; margin: 0 0 8px 15px;}
/*The outer division includes an inner which includes the three divisions: 
  menu, content and content-right, which sit between header and footer.
  The broad left and right borders colour the backgrounds for the menu and content-right divisions*/
#outer {
  width: auto;
  border-left: solid 10em #BEDFC4;
  border-right: solid 14em #89CA9D;
  z-index: 6;
}
/*The inner division appears to be required by IE.*/
#inner {width: 100%;}
#footer {
  float: left;
  clear: both;
  width: 100%;
  background-color: #BEDFC4;
  text-align: center;
  z-index: 2;
}
#footer a {padding-left: 1em; padding-right: 1em;}
#footer a:hover {color: #008000;}
/*The following divisions are included within the outer division. 
  Note that they have an "id". Consequently they cannot be used more than once in a page. 
  Also, properties are not easily redefined.
  If a style is defined in a <div id ="..." it is not changed if a contained <div class ="..."
  has an incompatible style*/
/*The menu division is a vertical navigation menu. 
  The width and margin-left must match the width of the left border of outer.
  The negative margin-left ensures that it is displayed in the wide left margin of outer.*/
#menu {
  float: left;
  position: relative;
  width: 10em;
  margin-left: -10em;
  z-index:5;
}
#menu ul {list-style-type:none; width: 8em;margin: 1em;}
#menu ul li{background:#008531; margin-top: 0.5em; padding: 0.3em;font-size: 0.75em;}
#menu a{display: block; color:#FFFFFF; font-weight:bold; text-decoration:none;}
#menu a:hover{color:#C0FF01; text-decoration:underline;}
#menu a:active{color:#FF0000; text-decoration:underline;}
/* The content division includes the main content of each page */
#content {
  float: left;
  position: relative;
  width: 100%;
  min-width: 200px;
  z-index: 3; 
}
/* The content division is replaced by the content-minutes division for agm and committee minutes*/
#content-minutes {
  float : left;
  position: relative;
  width: 100%;
  min-width: 200px;
  z-index: 3; 
}
/* The right division includes information that 
  is ancilliary to the main content.
  The width and margin-right must match the right border of outer.
  The negative margin-right ensures that it is displayed in the wide right margin of outer.*/
#content-right {
  float: left;
  position: relative;
  width: 14em;
  margin-right: -14em;
  z-index: 4;
}
#newsflash {
 width: 12em;
 background-color: #f3efec;
 border-bottom: 3px solid #D4B7B3;
 color: #000099;
 float: right;
 margin-right: 1em;
 margin-bottom: 15px;
}
#newsflash a:hover {color: #008000;}
/* set attribute values for elements within these division*/
h4, h5, h6, p, table, form {margin: 8px 5px 0 10px;}
h4, h5, h6 {font-family: Georgia,'Times New Roman', Serif; font-weight: bold; line-height: 150%; }
h4 {font-size: 1.25em;}
h5 {font-size: 1.06em;}
h6 {font-size: 0.875em;}
#content h4, h5, h6 {color: #003F5B;}
#content-right h4, h5, h6 {color: #002B40;}
#content a:hover {color: #008000;}
#content tr {vertical-align:text-top;}
#content td {font-size: .75em; line-height: 1.06em; padding-left: 0.5em;}
#content ul li ul li {font-size: 1.0em;}
/*Set styles for minutes to suit the two different formats used over the years*/
#content-minutes h4, h5, h6{color: #003F3B}
#content-minutes li h6 {font-size: 1.17em; color: #003F5B;}
#content-minutes li p {font-size: 1em;}
#content-minutes a:hover {color: #008000;}
/*Define classes that will define the way images are located and text wraps around*/ 
.float-left {float: left; margin-right:10px; margin-top: 5px; margin-bottom: 5px;}
.float-right {float: right; margin-left:10px; margin-top: 5px; margin-bottom: 5px;}
.clear-both {clear:both;}
.centeredtxt {text-align: center; margin: 5px 0 5px 0; padding: 0;}
.centeredblock {display: block; margin-left: auto; margin-right: auto;}
/*Define styles for tabulsr display of
  contact :position name telephone
  sitemanager: site christianname telephone*/ 
.contact {display: block; margin: 0 0 0 20px; font-size: .75em;}
.position {display: inline-block; width: 15em;}
.email {display: inline-block; width: 5em;}
.name {display: inline-block; width: 10em;}      
.telephone {display: inline-block; width: 8em;}
.christianname {display: inline-block; width: 3em;}
.plot {display:inline-block; width: 8em}
/*Define specific styles for other division classes*/
.categories ul{margin-left:3em;}
.weather {float:right; padding-top:.5em; padding-right:1.5em;}
.photogalleryouter {width:auto; min-width:40em; border-left-style:solid; 
  border-left-width  :13em;border-left-color:#99FF66; background:#FFFFFF;}
.photogallery {float: left; width: 100%; position: relative; z-index: 12;padding-bottom:1em;}
ol.loweralpha {list-style-type: lower-alpha; padding: 5px;}
.styleul {text-decoration: underline;}
#emailform hr{border: 1px solid #000;}
#emailform input {background: #D1FFD1;}
#recipeform input {background: #D1FFD1;}
#recipeform textarea {background: #D1FFD1;}
#recipeform label {font-size: .75em;}