/* Style sheet for groundWork website */

#wrap {background-color:#fffaf0;}
body {color: #330000; background-color:/*#e4d6d6*/#fffaf0; width:800px;
      cursor:url("cursors/grass.cur"); }
h1, h2, h3, h4, h5, h6 {color: #993300;} 

.shadeOne   {background-color:#FFCC99;}
.shadeTwo   {background-color:#993300;}
.shadeThree {background-color:#cc6633;}
.shadeFour  {background-color:#FF9933;}
.shadeFive  {background-color:#FFCC66;}

#bottom {border-top: 1px solid #993300;}
#wrap, #mainsect, #mainsect2 {border-left: 1px solid #993300; border-right: 1px solid #993300;}

.hr {border-top:1px solid #993300; margin:0.7em 0.8em 0.5em;}
.hrsect {border-top:3px double #993300; margin:0.7em 0.8em 0.5em;}
.hrdash {border-top:1px dashed #993300; margin:0.7em 10.8em 0.5em;}

/* Navigation bar links */

#pulldownmenu a:link, #pulldownmenu a:visited {text-decoration:none; 
                      color: #ffffff /* #993300 */;} /* colour for menu writing */
/* main links */

a:link    {background-color:transparent; color:#993300;} 
a:visited {background-color:transparent; color:#660099;} 
a:hover   {background-color:transparent; color:#CC6633;}
a:active  {background-color:transparent; color:#0000FF;}
a:focus   {background-color:transparent; color:#FFFF00;}
a:link, a:hover, a:active, a:focus, a:visited {text-decoration:none; cursor:url("cursors/GreenHand.cur")}


/*--------------------------- Round Menu -----------------------------------*/

.roundmenu {display:block; width:536px; height:440px; 
      background:url(Menu Images/backview.jpg) no-repeat 0 0; position:relative;
      top:-10px;
      /*margin:0 auto 2em auto;*//* border:4px solid #993300;*/}

a#MenuAQ {display:block; width:139px; height:195px; padding-top:0px;
          overflow:hidden; position:absolute; left:51px; top:26px;}
a#MenuAQ:hover {background:transparent url(Menu Images/menuAQ.gif) no-repeat 0 0;
                overflow:visible;}

a#MenuWaste {display:block; width:139px; height:195px; padding-top:0px;
          overflow:hidden; position:absolute; left:51px; top:219px;}
a#MenuWaste:hover {background:transparent url(Menu Images/menuWaste.gif) no-repeat 0 0;
                overflow:visible;}

a#MenuCA {display:block; width:139px; height:195px; padding-top:0px;
          overflow:hidden; position:absolute; left:346px; top:26px;}
a#MenuCA:hover {background:transparent url(Menu Images/menuCA.gif) no-repeat 0 0;
                overflow:visible;}

a#MenuPub {display:block; width:139px; height:195px; padding-top:0px;
          overflow:hidden; position:absolute; left:346px; top:220px;}
a#MenuPub:hover {background:transparent url(Menu Images/menuPub.gif) no-repeat 0 0;
                overflow:visible;}

a#hver img {visibility:hidden;}
a#hver:hover img {visibility:visible; border:0; position:absolute; top:11px;
                  left:91px;}
a#hver:active img, a.click:focus img {visibility:visible; border:0;
                   position:absolute; top:11px; left:91px;}

/*--------------------------------------------------------------------------*/


/* type selectors */

body {margin:0 auto; width:1003px; font-family:arial, verdana, helvetica, 
      sans-serif; font-size:0.8em;}

h1 {font-size:1.7em;}
h2 {font-size:1.5em;}
h3 {font-size:1.3em;}
h4 {font-size:1.2em;}
h5 {font-size:1.1em;}
h6 {font-size: 1em;}
h1, h2, h3, h4, h5, h6, p {margin:0 0.8em; padding:0.3em 0; text-align:center;} 
hr {display:none;}
.bold {font-weight:bold;}
.boldc {font-weight:bold; text-align:center;}
.bigbold {font-size:1.2em; font-weight:bold; }
.italic {font-style:italic;}

/* li {list-style:square inside;} */
/* li {list-style: none;} */


/* ol, ul {padding:0; margin:0.5em 0.8em; text-align:left;} */
ol, ul {text-align:left;}
table {margin:1em 0.8em;}

/* id selectors */

#sidecol, #mainsect, #mainsect2, #whatsnew {display:inline; float:left; 
                                            padding: 1em 0;}
#sidecol {width:120px; margin:0 0 0 10px;}
#mainsect {width:630px; text-align:center;}
#mainsect2 {width:868px; text-align:center;}
#whatsnew, #externalpubs {float:right; width:230px;}
#bottom {clear:both; padding:0.8em 0; text-align:center; 
         height:120px; border: 1px solid #993300;}
#banner {height:120px; background-color:#993300; }
#projects, #publications, #foei {padding:5px; margin:0.5em 0.8em; 
            border: 1px solid #993300;}

#srchfrmonly {height:25px; padding:0 0 0 0; margin:0 0 0 0;
              list-style-type:none; font:15px verdana, sans-serif; 
              border: 1px solid #000;
              border-color: #eca #ffffff #a86 #ffffff ; 
              border-width: 1px 2px 1px 2px; 
              background: #993300; /*position:relative;*/} /* background colour of menu bar */
#srchfrm {position:absolute; top:117px; left:650px; z-index:200; 
          visibility:visible;}

.LeftAlign {text-align:left;}
.RightAlign {text-align:right;}
.centre {text-align:center;}
.indented {padding-left: 50px; padding-right: 50px; text-align:left;}


.UpdateLine {text-align:right; font-size: 75%; padding-top:20px;}
.small {font-size:75%;}
.numberedlist ul li {list-style:decimal inside;}

.imgproject {display:inline; border: 1px solid #fffaf0 ;
           border-width: 0px 20px 0px 10px;}
.imgpublication {display:inline; border: 1px solid #fffaf0;
           border-width: 0px 20px 0px 10px;}
.imgfl, .imgfr {padding: 0 1em;}
.imgfl {float:left;}
.imgfr {float:right;}
.imgflnb {float:left; border:none; text-decoration:none; padding-right:10px;}
.imgframe {border:3px solid #993300;}
/* .imgcntr {text-align:center;} */

img.imgcntr {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.imgcntrb {text-align:center; border:1px solid #993300;}
.imgcntrnb {text-align:center; border:none; text-decoration:none;}


a.block {position:relative;}
a.block span{display: none; position:relative;}
a.block:hover span {display:block; position:absolute; top:0px; left:10px;
                    width:225px; border:1px solid #993300; 
                    background-color:#FFCC99; color:#993300;
                    padding:10px;}

a.blockthin {position:relative;}
a.blockthin span{display: none; position:relative;}
a.blockthin:hover span {display:block; position:absolute; top:0px; left:5px;
                    width:110px; border:1px solid #993300; 
                    background-color:#FFCC99; color:#993300;
                    padding:10px; z-index=100;}

a.blockmid {position:relative;}
a.blockmid span{display:none;}
a.blockmid:hover span {display:block; position:absolute; top:0px; left:10px;
                    width:350px; border:1px solid #993300; 
                    background-color:#FFCC99; color:#993300;
                    padding:10px; text-align:left;}

/* for Opera only, because it won't display anything with
   position absolute, or without inline-block */
@media all and (min-width: 0) {
a.blockmid:hover span {display:inline-block; position:relative; width:250px;}}


a.blockwide {position:relative;}
/* for Opera only, because otherwise the display is way off */
@media all and (min-width:0) {
a.blockwide {position:absolute;}}

a.blockwide span{display:none;}
a.blockwide:hover span {display:block; position:absolute; top:0px; left:10px;
                    width:450px; border:1px solid #993300; 
                    background-color:#FFCC99; color:#993300;
                    padding:10px; text-align:left;}

/*a.blockscroll {position:relative;}
a.blockscroll span{display: none; postion:relative;}
a.blockscroll:hover span {display:block; position:absolute; top:0px; left:10px;
                    width:450px; height:400px; border:1px solid #993300; 
                    background-color:#FFCC99; color:#993300;
                    padding:10px; overflow:scroll;}*/

a.blockscroll {position:relative;}
/* for Opera only */
@media all and (min-width:0) {
a.blockscroll {position:absolute;}}

a.blockscroll span {display: none;}
a.blockscroll:hover span {display:block; position:absolute; top:0px; left:10px;
                    width:450px; height:400px; border:1px solid #993300; 
                    background-color:#FFCC99; color:#993300;
                    padding:10px; overflow:scroll;}

/* Newsletter blowups */

.NLgallery {width:630px; height:600px; text-align:left; position:relative; 
            margin:0 auto; padding:15px;}

.NLgallery ul.volume {padding:0; margin:0; list-style:none; width:630px; 
                      height:auto; position:relative;}
/* This displays the tabs along the top */
.NLgallery ul.volume li {display:block; width:50px; height:61px; float:left;}
.NLgallery ul.volume li a.group {display:block; font-size:11px; 
                         width:50px; height:40px; text-align:center;
                         background:#FFCC66;
                         line-height:1.5; color:#000000; text-decoration:none; 
                         border:1px solid #993300; 
                         font-family:verdana, arial, sans-serif;}

.NLgallery ul.volume li a ul, 
.NLgallery ul.volume li ul {display:none;}

/* this stops the content sections from being displayed */
.NLgallery ul.volume li .content1 {visibility:hidden;}
.NLgallery ul.volume li .content2 {visibility:hidden;}
.NLgallery ul.volume li .content3 {visibility:hidden;}
.NLgallery ul.volume li .content4 {visibility:hidden;}


/* highlights which tab you're on */
.NLgallery ul.volume li.active a {color:#000; background:#FFcc66;}
.NLgallery ul.volume li a:hover,
.NLgallery ul.volume li:hover a {color:#fff; background:#FF9933;}


/* This "books" the space and sets up the default block */
.NLgallery ul.volume li.active ul {display:block; position:absolute; 
                     left:0; top:41px; list-style:none; padding:10px; 
                     margin:0; height:470px; background:#fffaf0; width:500px; 
                     border:1px solid #993300;}

/* This shows the other tabs as you move to them */
.NLgallery ul.volume li a:hover ul, 
.NLgallery ul.volume li:hover ul {display:block; position:absolute; 
      left:0; top:41px; list-style:none; margin:0; 
      height:470px; background:#fffaf0; width:500px; padding:10px; 
      border:1px solid #993300;}

/* displays the newsletter front covers */
.NLgallery ul.volume li ul li {display:inline; width:175px; height:222px; 
              float:left; border:2px solid #fff; margin:0px 0px 15px 45px;}

.NLgallery ul.volume li ul li a {display:block; width:110px; height:85px; 
              cursor:default; float:left; text-decoration:none; 
              background:transparent; }

/* this makes a fancy border round the picture */
.NLgallery ul.volume li ul li a img {display:block; width:170px; 
                                height:222px; border:5px solid #eee;} 

.NLgallery ul.volume li a:hover ul li a:hover, 
.NLgallery ul.volume li:hover ul li a:hover {white-space:normal; 
                                            position:relative;}

/*  This controls the display of the contents page */
.NLgallery ul.volume li a:hover ul li a:hover img, 
.NLgallery ul.volume li:hover ul li a:hover .content1 {visibility:visible; 
         position:absolute; width:auto; height:auto; border-color:#000;
         left:-200px; top:12px;}
.NLgallery ul.volume li:hover ul li a:hover .content2 {visibility:visible; 
         position:absolute; width:auto; height:auto; border-color:#000;
         left:150px; top:12px;}
.NLgallery ul.volume li:hover ul li a:hover .content3 {visibility:visible; 
         position:absolute; width:auto; height:auto; border-color:#000;
         left:-200px; top:-250px;}
.NLgallery ul.volume li:hover ul li a:hover .content4 {visibility:visible; 
         position:absolute; width:auto; height:auto; border-color:#000;
         left:150px; top:-250px;}

/* ------------------------------------------------------------------------ */

/* groundWork reports display and lookup */

.DisplayRep {width:600px; height:360px; position:relative;padding:5px 0; 
             background:#fffaf0; border:1px solid #993300;}

.DisplayRep em {display:block; width:300px; height:352px;background:blue; 
                position:absolute; top:0; right:0; border:3px solid #008000;}

/* makes scroll window with small pictures */
.DisplayRep .smallrep {display:block; width:130px; height:352px; 
                        overflow:auto; float:right; margin-top:0px; 
                        border:1px solid #993300; border-width:1px 1px 1px 1px; 
                        padding:2px;}

.DisplayRep .smallrep .sect p.blurb {visibility:hidden;}

/* makes the containers for the small pictures */
.DisplayRep .smallrep .sect {display:block; float:left; margin:0 20px 10px 0; 
                          background:#f8f8ff; width:100px; height:140px; 
                          border:1px solid #000;}

/* set up size of the small pictures */
.DisplayRep .smallrep .sect img {width:100px; height:140px; border:0;}


/* clears small picture being hovered over */
.DisplayRep .smallrep .sect:hover {border:1px dotted #ccc; 
                                background:orange;}

.DisplayRep .smallrep .sect:active, 
.DisplayRep .smallrep .sect:focus {border:1px solid #fff; background:#008000; 
                                   outline:0;}

.DisplayRep .smallrep .sect:hover img.blurb {display:block; position:absolute; 
                                   z-index:500;}

.DisplayRep .smallrep .sect:hover p.blurb {position:absolute; color:#330000; 
                               visibility:visible; background:#ffffff;
                               width:450px; height:350px;
                               left:0px; top:5px; border:1px solid #993300;
                               text-align:left; overflow:scroll;
                               padding:5px;}


.DisplayRep .smallrep .sect:active img, 
.DisplayRep .smallrep .sect:active p.blurb {display:block; position:absolute; 
                                   z-index:100;}

.DisplayRep .smallrep .sect:focus img,
.DisplayRep .smallrep .sect:focus p.blurb {position:absolute; width:298px; height:350px; 
                          left:0px; top:7px; border:1px solid #333;
background:#008000;}

/*------------------------------------------------------------------------ */
/* Display for toxic tour */

.Toxic {display:inline; float:left; margin:0px 10px 10px 32px;
              background:#f8f8ff; width:105px; height:150px;
              border:2px solid #993300; padding-top:5px;}
.Toxic img {width:95; height:100; border:0;}
.Toxic:hover {border:2px dotted #993300; }
.Toxic:active, 
.Toxic:focus {border:1px solid #fff; background:#008000; outline:0;}


/* ----------------------------------------------------------------------- */
/* Horizontal display for booklets */

.HorizScroll {width:600px; height:550px; position:relative; padding:5px 0;
              background:#fffaf0; border:1px solid #993300;}

.HorizScroll .scrollrep {overflow:auto;
              width:460px; height:500px;
              float:left; margin-top:0px;
              border:1px solid #993300; border-width:2px 2px 2px 2px;
              padding:10px; position:absolute; left:50px;}

.HorizScroll .scrollrep .sect {display:inline; float:left; margin:0 10px 10px 0;
              background:#f8f8ff; width:200px; height:286px;
              border:2px solid #993300;}

/* set up size of the small pictures */
.HorizScroll .scrollrep .sect img {width:200px; height:286px; border:0;}


.HorizScroll .scrollrep .sect:hover {border:2px dotted #993300; }
.HorizScroll .scrollrep .sect:active, 
.HorizScroll .scrollrep .sect:focus {border:1px solid #fff; background:#008000; outline:0;}


/* ----------------------------------------------------------------------- */

/* Horizontal display for fact sheets */

.DisplayHoriz {width:600px; height:525px; position:relative;padding:5px 0; 
             background:#fffaf0; border:1px solid #993300;}

.DisplayHoriz em {display:block; width:300px; height:352px;background:blue; 
                position:absolute; top:0; right:0; border:3px solid #008000;}

/* makes scroll window with small pictures */
.DisplayHoriz .scrollrep {display:inline; width:594px; height:90px; 
                        overflow:auto; float:left; margin-top:0px; 
                        border:1px solid #993300; border-width:1px 1px 1px 1px; 
                        padding:2px; white-space:nowrap;}

.DisplayHoriz .scrollrep .sect img {width:200px; height:286px; border:0;}
.DisplayHoriz .scrollrep .sect .blurb {visibility:hidden;}
.DisplayHoriz .scrollrep .sect .house {visibility:hidden;}
/* .DisplayHoriz .scrollrep .sect .house dd {visibility:hidden;} */

/* makes the containers for the small pictures */
.DisplayHoriz .scrollrep .sect {display:inline; float:left; margin:0 10px 10px 0; 
                          background:#f8f8ff; width:50px; height:70px; 
                          border:1px solid #000;}

/* set up size of the small pictures */
.DisplayHoriz .scrollrep .sect img {width:50px; height:70px; border:0;}


/* clears small picture being hovered over */
.DisplayHoriz .scrollrep .sect:hover {border:1px dotted #ccc; 
                                background:orange;}

.DisplayHoriz .scrollrep .sect:active, 
.DisplayHoriz .scrollrep .sect:focus {border:1px solid #fff; background:#008000; outline:0;}

.DisplayHoriz .scrollrep .sect:hover img.blurb {display:block; position:absolute; 
                                   z-index:500;}
.DisplayHoriz .scrollrep .sect:hover img.blurb {position:absolute; color:#330000; 
                               visibility:visible; background:#ffffff;
                               width:698px; height:440px;
                               left:0px; top:104px; border:1px solid #993300;
                               white-space:normal;}

.DisplayHoriz .scrollrep .sect:hover dl.house {visibility:visible;
                               width:698px; height:440px; top:75px;
                               background:url(ToxicTour/dollshouseb.jpg) no-repeat 0 0;}

/*.DisplayHoriz .scrollrep .sect:active img,
.DisplayHoriz .scrollrep .sect:focus dl.house {visibility:visible; 
                               display:block; position:absolute; 
                               z-index:100; background:blue;} */

.DisplayHoriz .scrollrep .sect:active img, 
.DisplayHoriz .scrollrep .sect:focus p.blurb {display:block; position:absolute; 
                                   z-index:100;}
.DisplayHoriz .scrollrep .sect:hover p.blurb {position:absolute; color:#330000; 
                               visibility:visible; background:#ffffff;
                               width:698px; height:440px;white-space:normal;
                               left:0px; top:75px; border:1px solid #993300;
                               overflow:auto; text-align:left;
                               margin:10px; padding:10px;}

/* toxic tour house */

.DisplayHoriz .scrollrep .sect dl.house {display:block; position:absolute; 
       width:698px; height:550px; 
       left:0px; top:0px; text-decoration:none;
       color:#000; font-family:arial, sans-serif; font-size:1.2em;
       font-weight:bold; text-transform:uppercase;}

#Kitchen {display:block; width:50px; height:50px; position:absolute;
           left:375px; top:325px; z-index:999; overflow:visible;}
#Kitchen a:hover {background:red; color:#ffffff;}

#Kitchen a:active,
#kitchen a:active p {position:absolute; color:pink; overflow:visible;
                               visibility:visible; background:#ffffff;
                               width:698px; height:440px;white-space:normal;
                               left:-300px; top:-300px; border:1px solid #993300;
                               overflow:auto; text-align:left;
                               margin:10px; padding:10px;}

a#Bathroom {display:block; width:50px; height:50px; position:absolute;
           left:375px; top:200px;}
a#Bathroom:hover {background:transparent; color:#ffffff;}
a#Livingroom {display:block; width:50px; height:50px; position:absolute;
           left:175px; top:325px;}
a#Livingroom:hover {background:transparent; color:#ffffff;}



/* class selectors for menu */

#pulldown, 
#pulldown ul {padding:0 0 0 0; margin:0 0 0 0;
              list-style-type:none; font:15px verdana, sans-serif; 
              border: 1px solid #000;
              border-color: #eca #ffffff #a86 #ffffff ; 
              border-width: 1px 2px 1px 2px; 
              background: #993300; position:relative; z-index:10;} /* background colour of menu bar */

#pulldown {height:25px; padding:0; }

#pulldown li {float:left; padding:0px 20px 0 10px; border: 1px solid #ffffff;
              border-color: #eca #ffffff #a86 #ffffff;
              list-style-type:none;}


#pulldown li li {float:none;}

/* a hack for IE5.x and IE6 */
#pulldown li a li {float:left;}

/* the height & line-height cause the first column to be collapsed in Opera/Mozzila */
#pulldown li a {display:block; float:left;
                height:24px;  padding-right:5px; line-height:24px;
                text-decoration:none; white-space:nowrap;}

#pulldown li li a {height:25px; line-height:20px; float:none;}
/* the colour here defines the overlay color as you moved down the menu */
#pulldown li:hover {position:relative; z-index:20; background: #CC6633 ;} 
#pulldown a:hover {position:relative; z-index:20;
                   text-decoration:none; color:#663300;}

#pulldown :hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
#pulldown a:hover ul {left:-10px;}

#pulldown ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#pulldown li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#pulldown li:hover > ul ul {position:absolute; left:-9999px; top:-9999px;
                            width:auto;}
/* show path followed */
#pulldown li:hover > a {text-decoration:none; color: #663300;
                       } /* the color that the text turns when hovered over */
 
/* but IE5.x and IE6 need this lot to style the flyouts */
/* show next level */
#pulldown a:hover a:hover ul,
#pulldown a:hover a:hover a:hover ul,
#pulldown a:hover a:hover a:hover a:hover ul,
#pulldown a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:-1px;}

/* keep further levels hidden */
#pulldown a:hover ul ul,
#pulldown a:hover a:hover ul ul,
#pulldown a:hover a:hover a:hover ul ul,
#pulldown a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}


/*------------ Side menu ---------------------*/

.sidemenu {font-family: arial, sans-serif; 
           width:100px; height:auto; 
           position:fixed; top: 150px; left:5px; font-size:12px; 
           margin:10px 0; z-index:100; list-style-type:none;} 
                         /* this z-index is VERY IMPORTANT */

.sidemenu li {list-style: none;}

/* next line appears tautologous, but is needed for Opera & Firefox */
.sidemenu {background-color:#FFCC99; color:#330000; border:1px solid #993300;
           width:100px; height:auto; padding:0; margin:0;}

/* while this line is used by IE7 */
.sidemenu ul {background-color:#FFCC99; color:#330000; width:100px; 
              height:auto; padding:0; margin:0;}

.sidemenu ul li ul {visibility:hidden; position:absolute; 
                    height:0; overflow:hidden; top:0; left:100px;} 

.sidemenu ul li {float:left;}

/* ---------- base menu ------------------------------------ */

.sidemenu ul li a, 
.sidemenu ul li a {display:block; float:left; 
                   text-decoration:none; color:#330000;
                   width:91px; height:26px; line-height:25px; 
                   font-size:11px; padding-left:10px;}

/* what happens in base menu when we move to flyout box */
.sidemenu ul li:hover a,
/* oddly, the background color here sets the color of the flyout box and
   the background of the main menu item when you move to the flyout box */
.sidemenu ul li a:hover {background-color:#993300; color:#ffffff;} 

.sidemenu ul li:hover {position:relative;}

/* ------------------ 1st Fly-out ---------------------- */

.sidemenu ul li:hover ul,
.sidemenu ul li a:hover ul {visibility:visible; position:absolute; 
                            height:auto; overflow:visible;}

.sidemenu ul li:hover ul li a,
.sidemenu ul li a:hover ul li a {display:block; color:#330000; line-height:15px; 
                                 padding:5px 5px 5px 10px; height:auto; 
                                 text-decoration:none;}

.sidemenu ul li:hover ul li:hover a,
.sidemenu ul li a:hover {background-color:#CC6633; color:#ffffff;} /* what happens in flyout box */

.sidemenu ul li:hover ul li ul,
.sidemenu ul li a:hover ul li a ul {visibility:hidden; position:absolute; 
                   height:0; overflow:hidden;}

.sidemenu ul li:hover ul li:hover ul,
.sidemenu ul li a:hover ul {visibility:visible; position:absolute;
                   height:auto; border:1px solid #CC6633;
                   background-color:#CC6633; overflow:visible;}


/* ---------------------- 2nd flyout color --------------------------- */

.sidemenu ul li:hover ul li:hover ul li a,
.sidemenu ul li a:hover ul li a{display:block; color:#330000; line-height:15px; 
                                padding:5px 5px 5px 10px; height:auto;}

.sidemenu ul li:hover ul li:hover ul li:hover a,
.sidemenu ul li a:hover {background:#FF9933; color:#ffffff;}

.sidemenu ul li:hover ul li:hover ul li ul,
.sidemenu ul li a:hover ul li a ul {visibility:hidden; position:absolute; 
                    height:0; overflow:hidden;}

.sidemenu ul li:hover ul li:hover ul li:hover ul,
.sidemenu ul li a:hover ul {visibility:visible; 
                   position:absolute; height:auto; padding:0; 
                   border:1px solid #FF9933; background:#FF9933; color:#008000;}

/* --------------------- 3rd level flyout -------------------------- */

.sidemenu ul li:hover ul li:hover ul li:hover ul li a,
.sidemenu ul li a:hover ul li a{display:block; color:#330000; line-height:15px; 
                                padding:5px 5px 5px 10px; height:auto;}

.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover a,
.sidemenu ul li a:hover {background:#FFCC66; color:#ffffff;}

.sidemenu ul li:hover ul li:hover ul li:hover ul li ul,
.sidemenu ul li a:hover ul li a ul {visibility:hidden; position:absolute; 
                    height:0; overflow:hidden;}

.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover ul,
.sidemenu ul li a:hover ul {visibility:visible; 
                   position:absolute; height:auto; padding:0; 
                   border:1px solid #FF9933; background:red; color:#008000;}

/* --------------------- 4th level flyout -------------------------- */

.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover ul li a,
.sidemenu ul li a:hover ul li a{display:block; color:#330000; line-height:15px; 
                                padding:5px 5px 5px 10px; height:auto;}

.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a,
.sidemenu ul li a:hover {background:green; color:#ffffff;}

.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover ul li ul,
.sidemenu ul li a:hover ul li a ul {visibility:hidden; position:absolute; 
                    height:0; overflow:hidden;}

.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul,
.sidemenu ul li a:hover ul {visibility:visible; 
                   position:absolute; height:auto; padding:0; 
                   border:1px solid #FF9933; background:blue; color:#008000;}


/* for some unknown reason this sets the base menu hover color! */
.sidemenu ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover a,
.sidemenu ul li a:hover {background:#993300;}

/*--------------------------------------------------------------------------*/


/* Map of South Africa */


.map {display:block; width:517px; height:448px; 
      background:url(Menu Images/mapSA.jpg) no-repeat 0 0; position:relative; 
      margin:0 auto 2em auto;}
.map a {color:#000; font-family:arial, sans-serif; font-size:1.2em; 
      font-weight:bold; text-transform:uppercase;}

/* a#title2, a#title2:visited {display:block; width:517px; height:0; 
      padding-top:448px; position:absolute; left:0; top:0; 
      cursor:default; text-decoration:none;}
* html a#title2 {height:426px; he\ight:0;}
.map a#title2:hover {background:transparent url(Menu Images/mapSA.jpg) no-repeat 0 0; overflow:visible; color:#c00;}

*/

a#WCape {display:block; width:194px; height:0; padding-top:163px; 
          overflow:hidden; position:absolute; left:49px; top:285px;}
* html a#WCape {height:50px; he\ight:0;}
a#WCape:hover {background:transparent url(Menu Images/mapWCape.jpg) no-repeat 0 0;
                overflow:visible;}
a#WCape:focus {background-color:#008000; color:#66cccc;}

a#ECape {display:block; width:223px; height:0; padding-top:144px; 
          overflow:hidden; position:absolute; left:195px; top:275px;}
* html a#EcAPE {height:50px; he\ight:0;}
a#ECape:hover {background:transparent url(Menu Images/mapECape.jpg) no-repeat 0 0;
                overflow:visible;}

a#KZN {display:block; width:137px; height:0; padding-top:141px; 
          overflow:hidden; position:absolute; left:370px; top:176px;}
* html a#KZN {height:50px; he\ight:0;}
a#KZN:hover {background:transparent url(Menu Images/mapKZN.jpg) no-repeat 0 0;
                overflow:visible;}

a#Mpuma {display:block; width:130px; height:0; padding-top:120px; 
          overflow:hidden; position:absolute; left:361px; top:80px;}
* html a#Mpuma {height:50px; he\ight:0;}
a#Mpuma:hover {background:transparent url(Menu Images/mapMpuma.jpg) no-repeat 0 0;
                overflow:visible;}

a#NProv {display:block; width:181px; height:0; padding-top:120px; 
          overflow:hidden; position:absolute; left:302px; top:8px;}
* html a#NProv {height:50px; he\ight:0;}
a#NProv:hover {background:transparent url(Menu Images/mapNProv.jpg) no-repeat 0 0;
                overflow:visible;}

a#Gauteng {display:block; width:64px; height:0; padding-top:120px; 
          overflow:hidden; position:absolute; left:328px; top:112px;}
* html a#Gauteng {height:100px; he\ight:0;}
a#Gauteng:hover {background:transparent url(Menu Images/mapGauteng.jpg) no-repeat 0 0;
                overflow:visible;}

a#NWProv {display:block; width:185px; height:0; padding-top:123px; 
          overflow:hidden; position:absolute; left:190px; top:90px;}
* html a#NWProv {height:50px; he\ight:0;}
a#NWProv:hover {background:transparent url(Menu Images/mapNWProv.jpg) no-repeat 0 0;
                overflow:visible;}

a#FState {display:block; width:182px; height:0; padding-top:144px; 
          overflow:hidden; position:absolute; left:237px; top:160px;}
* html a#FState {height:50px; he\ight:0;}
a#FState:hover {background:transparent url(Menu Images/mapFState.jpg) no-repeat 0 0;
                overflow:visible;}

a#NCape {display:block; width:283px; height:0; padding-top:272px; 
          overflow:hidden; position:absolute; left:0px; top:91px;}
* html a#FState {height:50px; he\ight:0;}
a#NCape:hover {background:transparent url(Menu Images/mapNCape.jpg) no-repeat 0 0;
                overflow:visible;}

/* --------------------------------------------------------------------------*/