/****************************************************

Main CSS for the Epsom & Ewell CAB web site

****************************************************/

/* Viewport */
body {
 padding-top: 5px;
 background: #fff;
 color: #000;
 font-family: 'Segoe UI',Arial, Helvetica, sans-serif;
 font-size: 90%;
 }
h1, .Intro {
 font-size: 1.1em;
 font-weight: bold;
 }
h2, th {
 font-size: 1em;
 font-weight: bold;
 }
h3 {
 font-size: 1em;
 font-style: italic;
 }
thead 
{
 text-align: left;
}
a {
 text-decoration: none;
 }
a:hover {
 text-decoration: underline;
 }
.Hidden {
 display: none;
 } 

/* Whole page */
div#Page {
 width: 780px;
 margin: 0 auto;
 background: #fff;
 }
 
/* -------------------------------------------------------------
   Page heading - comprises header image followed by main page
   headings expressed as a list */
div#Heading {
 width: 780px;
 margin: 0;
 padding: 0;
 background-color: #0067B1;
 }
div#Heading ul {
 margin: 5px 0 0 0;
 padding: 0;
 background: #0067B1 url(HeadingTop.gif) no-repeat top left;
 }
div#Heading li {
 float: left;
 margin: 6px 6px 0 0;
 width: 120px;
 list-style: none;
 text-align: center;
 }
div#Heading li a { 
 font-size: 1em;
 font-weight: bold;
 text-decoration: none;
 color: #fff;
 }
div#Heading li a:visited, div#Heading li a:active { 
 color: #fff;
 }
div#Heading li a:hover { 
 color: #ff0;
 }
div#Heading img {
 margin: 0;
 padding: 0;
 border: none;
 }
div#Heading p {
 clear: both;
 margin: 0;
 padding: 0;
 }

/* -------------------------------------------------------------
   Menu shown at left hand side */
div#Menu {
 float: left;
 width: 192px;
 margin-top: 4px;
 background: url(Menu-Back.gif) no-repeat bottom left;
 }
div#Menu h1 {
 margin: 0;
 background: url(Menu-Top.gif) no-repeat top left;
 line-height: 6px;
 }
div#Menu ul {
 margin: 0 20px 10px 20px;
 padding: 0;
 }
div#Menu a {
 text-decoration: none;
 color: #f1ffcc;
 }
div#Menu ul ul {
 padding-left: 20px;
 margin-left: 0;
 margin-right: 0;
 margin-bottom: 0;
 background-color: #ab9978;
 }
div#Menu li {
 list-style: none;
 padding: 2px 0 2px 0;
 }
div#Menu li.WeAreHere {
 background-color: #666;
 }
div#Menu a:visited, div#Menu a:active {
 color: #f1ffcc;
 }
div#Menu a:hover {
 background-color: #f1ffcc;
 color: #666;
 }
 
/* -------------------------------------------------------------
   Page content shown to the right of the menu */
div#Content {
 width: 588px;
 float: left;
 margin-top: 4px;
 margin-bottom: 0;
 padding-bottom: 0;
 }
div.ContentBox {
 width: 588px;
 padding-bottom: 15px;
 margin-bottom: 4px;
 background: url(Content-Back.gif) no-repeat bottom left;
 }
div.ContentBox h1 
{
 margin: 0;
 padding: 18px 15px 5px 20px;
 background: url(Content-Top.gif) no-repeat top left;
 color: #0067B1;
 }
div.ContentBox h2, div#ContentBox h3 {
 margin: 0;
 padding: 18px 15px 5px 20px;
 color: #0067B1;
 }
div.ContentBox th {
 color: #0067B1;
 font-style: italic;
 font-weight: normal;
 }
div.ContentBox p {
 padding: 0 15px 0 20px;
 margin: 10px 0 0 0;
 }
div.ContentBox textarea {
 padding: 0;
 margin: 0 0 0 25px;
 }
div.ContentBox input {
 padding: 0;
 margin: 15px 0 0 25px;
 }
div.ContentBox ul, div.ContentBox ol {
 padding-bottom: 0;
 margin-bottom: 0;
 margin-top: 6px;
 }
div.ContentBox ul ul, div.ContentBox ul ol, div.ContentBox ol ul, div.ContentBox ol ol {
 margin-top: 0;
 }
div.ContentBox blockquote {
 padding-bottom: 0;
 margin-bottom: 0;
 }
div.ContentBox .Centre {
 text-align: center;
 }
div.ContentBox .Indent {
 margin-left: 30px;
 text-align: left;
 }
div.ContentBox img {
 margin-left: 50px;
 margin-top: 10px;
 }
div.ContentBox li {
 padding-right: 15px;
 }
/* -------------------------------------------------------------
   Footer shown at the bottom of the page */
div#Footer {
 clear: both;
 margin-left: 4px;
 color: #808080;
 font-size: 0.9em;
 }
div#Footer p {
 margin-top: 0;
 padding-top: 4px;
 }
div#Footer a, div#Footer a:visited, div#Footer a:active {
 color: #808080;
 font-size: 0.9em;
 }
 
/* -------------------------------------------------------------
   Home page elements */
div#Header {
 float: left;
 width: 780px;
 background: #fc3  no-repeat top left;
 margin-top: 4px;
 }
div#Header img {
 float: left;
 }
div#Header h1 {
 margin: 0 0 4px 10px;
 padding-top: 10px;
 /*background: #fc3 url(HeaderTopRight.gif) no-repeat top right;*/
 background-color: #fc3;
 }
div#Header p {
 margin: 10px 0 4px 10px;
 padding-bottom: 10px;
 }
div.HomePanel {
 float: left;
 width: 196px;
 margin-bottom: 4px;
 }
div.HomePanel h1 {
 margin: 0;
 padding: 10px 5px 5px 10px;
 }
div.HomePanel img {
 padding: 0 0 0 25px;
 }
div.HomePanel p {
 padding: 0 5px 0 10px;
 margin: 5px 0 5px 0;
 }
div.HomePanel p.Right {
 text-align: right;
 }
div#Advice {
 background: url(Advice-Back.gif) no-repeat bottom left
 }
div#Advice h1 {
 background: url(Advice-Top.gif) no-repeat top left 
 }
div#GetAdvice {
 background: url(GetAdvice-Back.gif) no-repeat bottom left
 }
div#GetAdvice h1 {
 background: url(GetAdvice-Top.gif) no-repeat top left 
 }
div#Donate {
 background: url(Volunteer-Back.gif) no-repeat bottom left
 }
div#Donate h1 {
 background: url(Volunteer-Top.gif) no-repeat top left 
 }
div#Volunteer {
 clear: both;
 width: 588px;
 background: url(Donate-Back.gif) no-repeat bottom left
 }
div#Volunteer p {
 padding: 5px 5px 5px 10px;
 margin: 0;
 background: url(Donate-Top.gif) no-repeat top left 
 }
div#keyboard {
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

img#BLF {
 margin-left: 5px;
 margin-right: 5px;
 border: 0;
 float: left;
}
img#BLF2 {
 margin-left: 5px;
 margin-right: 5px;
 border: 0;
 float: right;
}
a>img#BLF, a>img#BLF2 {
 margin-left: -160px;
 margin-right: -160px;
 border: 0;
 float: left;
}
img#CLS {
 margin-left: 5px;
 margin-right: 5px;
 border: 0;
 float: left;
}
img#CLS2 {
 margin-left: 5px;
 margin-right: 5px;
 border: 0;
 float: right;
}
a>img#CLS, a>img#CLS2 {
 margin-left: -80px;
 margin-right: -80px;
 border: 0;
 float: left;
}