/* Body styles for background */
body {
 background-image:url("Background-blurred.jpg");
 background-color:#001145;
 background-attachment:fixed;
 background-repeat:no-repeat;
 color:black;font-size:100%;
 left:0px;top:0px;
}

body div { margin:0px;padding:0px; }
body a { margin:0px;padding:0px; }

/* next line seen only by IE -helps prevent horizontal scrollbar */
* html body { height:100%; }

/* DUNNO IF ANY OF SAFARI FIX BELOW IS TRUE 
 - some of my OSX10.2 machines (with Safari v1.0.3) show the bug, others don't (same version)... :-/ 
 Leave it all commented out for now... */

/* Next line of CSS code is not what it should be, but the way Safari < v1.2 wants it */
/* It is only recognised by Safari, OmniWeb and some versions of Gecko-based browsers */
/* body:last-child { background-position: 0% 100%; } */
/* Next line reverts position for several non-Safari browsers */
/* html:lang(en) body { background-position: 0% 0%; } */
/* Next line reverts position for Safari > v1.1 and (hopefully) remaining browsers */
/* @media All { body:last-child { background-position: 0% 0%; } } */
/* end of fix */

#pagebg {
 position:absolute;top:0px;left:0px;right:0px;
 padding:0px;margin:0px;
}
#maintextbox {
 color:white;font-size:115%;
 line-height:110%;text-align:justify;
 position:relative;
 top:0px;left:0px;
 padding:0px;margin:0px;
 padding-left:16.7em;padding-right:3.2em;
 overflow:hidden;
 min-height:93%;
 margin-top:3.5em;margin-bottom:2em;
}
/* SEE NOTES BELOW ABOUT textbg IN Windows IE6 */
#textbg {
 font-size:100%;color:white;
 position:absolute;
 top:2em;bottom:0.9em;left:16.3em;right:1.4em;
 padding:0px;margin:0px;
 background-attachment:fixed;
 background-position: 0px 0px;
 background-repeat:repeat;
 min-height:91%;
 overflow:hidden;
}
/* colour filters to go behind text -these are semi-transparent pictures */
#textbg.redbg { background-image:url('TextBG-newred.png'); }
#textbg.bluebg { background-image:url('TextBG-newblue.png'); }
#textbg.greenbg { background-image:url('TextBG-newgreen.png'); }
#textbg.greybg { background-image:url('TextBG-newgrey.png'); }
/* of course, IE can't deal with the translucent pictures above, so we
have to 'fix' it by using fake background images... 
This actually only fixes Mac IE5, since Windows IE6 makes a real mess
of the stuff below, so index-IE6.css sets textbg to display:none and sets
up some replacement IDs for each colour background. */
* html #textbg.redbg { background-image:url('TextBG-red.jpg');background-color:#511; }
* html #textbg.bluebg { background-image:url('TextBG-blue.jpg');background-color:#115; }
* html #textbg.greenbg { background-image:url('TextBG-green.jpg');background-color:#151; }
* html #textbg.greybg { background-image:url('TextBG-grey.jpg');background-color:#223; }
/* SO MAKE SURE ANY ADDED textbg STUFF IS ALSO FIXED IN index-IE6.css */

/* solid colours to go behind text */
#textbg.yellowbg { background-color:#ffffcc;color:#0000dd; }

/*#maintextbox {
 color:white;font-size:115%;
 padding:0.4em 1.2em 0.2em 1.4em;
 line-height:110%;text-align:justify;
}*/

#picboxright {
 font-size:85%;float:right;
 width:45%;max-width:343px;
 margin:0px;padding:5px 0px 5px 20px;
}

#picboxleft {
 font-size:85%;float:left;
 width:45%;max-width:343px;
 margin:0px;padding:5px 20px 5px 0px;
}

#picintxt {
 padding:0px;margin:0px;margin-bottom:0.2em;
 border:0px;width:100%;max-width:343px;
}

#tablesection { display:table;border:0px; }
#tabletext {
 border:0px;vertical-align:middle;display:table-cell;
}
#tablepicright {
 display:table-cell;vertical-align:middle;
 font-size:85%;width:50%;max-width:400px;
 margin:0px;padding:5px 0px 5px 20px;
}
#tablepicleft {
 display:table-cell;vertical-align:middle;
 font-size:85%;width:50%;max-width:400px;
 margin:0px;padding:5px 20px 5px 0px;
}
/* slightly improve IE's mess (following is only seen by IE) */
* html #tablesection { display:block; }
* html #tabletext { display:block; }
* html #tablepicright { display:block;float:right; }
* html #tablepicleft { display:block;float:left; }
/* end of only seen by IE */

#maintextbox a {
 padding:0px;margin:0px;color:#f75;
 font-size:90%; font-weight:bold;
 text-decoration:none;
}

#maintextbox table { color:white;font-size:100%; }

#maintextbox a:hover { text-decoration:underline; }

#maintextbox a.whitelink { text-decoration:none;color:#fda;font-weight:normal;font-size:100%; }
#maintextbox a:hover.whitelink { text-decoration:underline; }
#maintextbox a.bluelinkbold { text-decoration:none;color:#22d; font-size:100%; }
#maintextbox a:hover.bluelinkbold { text-decoration:underline; }
#maintextbox a.bluelink { text-decoration:none;color:#22d; font-size:100%;font-weight:normal; }
#maintextbox a:hover.bluelink { text-decoration:underline; }
/* only seen by IE */
* html a.nextlink { float:right;width:49%; }
* html a.lastlink { float:left;width:49%; }
/* end of only seen by IE */
a.nextlink { float:right;border:0px;text-align:right; }
a.lastlink { float:left;border:0px;text-align:left; }

#mainlinksbox {
 position:absolute;left:0px;top:0px;padding:0px;margin:0px;
 padding-left:11.6em;right:0.9em;
}
/* Links on the main page -probably useful on other pages too */
#mainlink {
 text-decoration:none;
 color:#F22;
 font-size:140%;
 font-style:bold;
}
#img90 { width:90%; }
#img56 { width:56%; }
#img80 { width:80%; }
#img83 { width:83%; }
#img78 { width:78%; }
#imglogo { padding:0px;margin:0px;width:14.5em;height:2.43em; }
#imgmotto { padding:0px;margin:0px;width:8.7em;height:1.08em;padding-top:0.5em;padding-left:2.1em; }

#mainlink a { text-decoration:none; color:#F22; }
#mainlink p { margin:0px;padding:0px;padding-top:5px; }
/* switch this off until we have some links...
#mainlink:hover { text-decoration:underline; } */
/* IE doesn't understand hover on anything but A, so add this to get underline for IE */
#mainlink a:hover { text-decoration:underline; }

/* CSS for menus */
/* We really want position:fixed so the main menu doesn't scroll */
/* Unfortunately, IE5 Mac is broken for hovering in position:fixed item */
/* so we use absolute here first, then use a hack so IE5 Mac can't see the fixed afterwards */
#mainmenucontainer {
 font-size:145%;
 position:absolute;top:0px;left:0px;
 margin:0px;padding:0px;padding-top:4em;
 height:95%;
}
/* This is hidden from IE5 Mac \*/
#mainmenucontainer { position:fixed; }
/* End of hidden */
#abovemainmenu { height:4.5em; }
#redbartop {
 line-height:5px;
 font-size:100%;
 height:8px;margin:0px; padding:0px;
 background-image: url("RedBarTop.gif");
 background-position: 0.46em 100%;
 background-repeat:no-repeat;
}
#redbarbot {
 line-height:5px;font-size:100%;
 height:15px;margin:0px; padding:0px;
 background-image: url("RedBarBot.gif");
 background-position: 0.46em 0px;
 background-repeat:no-repeat;
}
#mainmenu {
 background-image: url("RedBar.gif");
 background-position: 0.46em 0px;
 margin:0px;padding:1ex;padding-left:26px;padding-bottom:0px;
 line-height:95%; font-size:100%;
}
#mainmenu a {
 color:red;text-decoration:none;
 padding:0px;margin:0px;
}
#mainmenu #hoveritem {
 padding:0px;margin:0px;
 display:inline;  /* for IE5 Mac  -changed for other browsers below */
 color:red;
 z-index:99;
 font-weight: bold;
 /*font-variant: small-caps;*/
}
#mainmenu #hoveritem #capstext {
 font-size: 105%;
 font-variant: small-caps;
}
#mainmenu #hiddenmenu {
 top:0px;left:0px;margin:0px;padding:0px;
 display:none;font-size:85%;
 font-variant: normal;
 z-index:100;
}
#mainmenu #hoveritem #reddot {
 height:0.9em;width:0.9em;
 border:0px;padding:0px;margin:0px;
 padding-left:1px;
}
#mainmenu #hiddenmenu #blackdot {
 height:1em;width:1em;padding:0px;margin:0px;
 padding-right:0.5em;padding-top:0.1em;border:0px;
 padding-left:1px;
}

/* Hidden from IE5 Mac \*/
#mainmenu #hoveritem { display:block; }
#mainmenu #hoveritem #reddot { padding-left:0px; }
#mainmenu #hiddenmenu #blackdot { padding-left:0px; }
/* End of hidden */

/* First of all, sort out IE (before v7?), which doesn't allow hover on anything but A... */
/* We use a Javascript hack instead. */
#mainmenu #hoveritem.over span { font-weight:bold; }
/* Mac IE5 needs to use inline rather than block, so we do that first, then hide the block from it */
#mainmenu #hoveritem.over #hiddenmenu { display:inline; }
/* Hide from MacIE5 \*/
#mainmenu #hoveritem.over #hiddenmenu { display:block; }
/* End of hiding from Mac IE5, and end of IE hack that uses Javascript */

/* This is the magic that makes it work for other browsers */
#mainmenu #hoveritem:hover { font-weight:bold; }
#mainmenu #hoveritem:hover #hiddenmenu { display:block; }
#mainmenu #hoveritem #hiddenmenu:hover { display:block; }

/* show when the cursor is over a link (doesn't work for IE) */
#mainmenu a:hover span { font-weight:bold;text-decoration:underline; }
/* use a different way to make IE show hover over link... */
* html #mainmenu a:hover { font-weight:bold;text-decoration:underline; }
/* End of CSS menus */

/* Text on main page */
#answerstext {
  margin:0px;padding:0px;padding-right:1.5em;
  color:white; font-size:120%; font-style:italic;
}

/* CSS for the logo, motto, address & charity number (last two with shadow) */
/* We really want position:fixed, but we fixed the hover menus problem above on IE5 Mac by making the menu absolute, so we also make this absolute for IE5 Mac */
#logocontainer {
 font-size:100%;line-height:35%;
 position:absolute;left:15px;top:0px;width:14.5em;
 padding:0px;margin:0px;padding-top:1.2em;
}  
#addresstext {
  position:absolute;bottom:2.6em;left:2em;
  margin:0px;padding:0px; width:10em; padding-bottom:1px;
  color:white;
  font-size:100%;
}
#addressshadow {
  position:absolute;bottom:2.6em;left:2em;
  margin:0px;padding:0px;padding-left:2px; width:10em;
  color:black;
  font-size:100%;
}
#charitytext {
  font-size:80%;
  position:absolute;bottom:0.8em;
  margin:0px;padding:0px;left:1em; width:20em; padding-bottom:1px;
  color:white;
}
#charityshadow {
  font-size:80%;
  position:absolute;bottom:0.8em;
  margin:0px;padding:0px;padding-left:2px;left:1em; width:20em;
  color:black;
}
/* Make them fixed for browsers other than IE5 Mac \*/
#logocontainer { position:fixed; }
/* Trying out letting Mac IE5 see fixed for address & charity text 
#addresstext { position:fixed; }
#addressshadow { position:fixed; }
#charitytext { position:fixed; }
#charityshadow { position:fixed; }  */
/* End of IE5 Mac hidden */
/* End of CSS for logo, motto, address & charity number */