/* Style sheet for groundWork website */

/* Colours used:
background (wraptransparent): #e7e7e7
main screen text: #ff3333
pulldown menu background: #ff3333
pulldown menu hover: #3399cc
side menu background: #3399cc
side menu 1st flyout: #006699
side menu 2nd flyout: #0066cc
side menu 3rd flyout: #0099ff
side menu 4th flyout: #00ccff
*/

#wrap {background-color:#e7e7e7;}
body {margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px;
      padding:0px; width:1003px; top:0px;
      font-family:arial, sans-serif;
      color: black; background-color:#e7e7e7;}
h1, h2, h3, h4, h5, h6 {color: #003333;}



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

/* Navigation bar links */

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

a:link    {background-color:transparent; color:#3399cc;}
a:visited {background-color:transparent; color:#7b68ee;}
a:hover   {background-color:transparent; color:#66CCFF;}
a:active  {background-color:transparent; color:#0066cc;}
a:focus   {background-color:transparent; color:#00ccff;}
a:link, a:hover, a:active, a:focus, a:visited {text-decoration:none;}



/* 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;}
.bolditalic {font-style:italic; font-weight:bold;}
.message {background: #003333; font-size:1.5em;}

/* 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 */


#banner {height:120px; width:1003px; background-color:#e7e7e7; position:relative;
         top:0px; left:0px; padding:0; margin:0; text-align:center;}

#sidecol, #mainsect, #mainsect2, #whatsnew {display:inline; float:left;}
#leftsect, #rightsect {display:inline; float:left;}

#sidecol {position:relative; width:125px; margin:0 0 0 2px; }

#mainsect, #mainsect2 {position:relative; width:630px; text-align:justify;
            border-left: 1px solid #ff3333;
            border-right: 1px solid #ff3333;}
#mainsect  {width:630px;}
#mainsect2 {width:868px;}

#leftsect  {width:450px; text-align:center;}
#rightsect {width:450px; float:right;}

#whatsnew, #externalpubs {width:230px; float:right; position:relative;
            padding:0px; margin:0px; border:0; }

#bottom {position:relative; clear:both; padding:0.8em 0; text-align:center;
         height:120px; border: 1px solid #ff3333; border-top: 1px solid #ff3333;}


#projects, #publications, #foei {padding:5px; margin:0.5em 0.8em;
            border: 1px solid #ff3333;}

#srchfrm {position:relative; display:block; top:-30px; left:300px; color:#ffffff;}

#Form {position:relative; top:5px; left:325px; border:2px solid #003333; padding:10px;
       width:350px;}

.fieldsetbox {display:block; width:200px;}

.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;}
.imgflnopad {float:left; padding:0px; margin:10px;}
.imgfr {float:right;}
.imgflnb {float:left; border:none; text-decoration:none; padding-right:10px;}
.imgframe {border:3px solid #ff3333;}
.imglogo {position: absolute; top:10px; left:10px; float:left;}

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

.imgcntrb {text-align:center; border:1px solid #ff3333;}
.imgcntrnb {text-align:center; border:none; text-decoration:none;}
.imgwspace {margin-right: 30px;}

.sideblock {position:absolute; top:100px; left:-850px; width:250px; height:auto;
            padding:5px; border:2px solid #ff3333; z-index=-1;}


.smallerwriting {font-size:75%;}
.homeblock {position:absolute; top:7px; left:-780px; z-index=-1;}

.middleblock {position:absolute; top:40px; left:250px; width:500px; height:auto;
              padding:5px; border:2px solid #ff3333;}

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 #ff3333;
                    background-color:#FFCC99; color:#ff3333;
                    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 #ff3333;
                    background-color:#FFCC99; color:#ff3333;
                    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 #ff3333;
                    background-color:#FFCC99; color:#ff3333;
                    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 #ff3333;
                    background-color:#FFCC99; color:#ff3333;
                    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 #ff3333;
                    background-color:#FFCC99; color:#ff3333;
                    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 #ff3333;
                    background-color:#FFCC99; color:#ff3333;
                    padding:10px; overflow:scroll;}

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

/* class selectors for menu */

#pulldown,
#pulldown ul {padding:0 0 0 0; margin:28px 0 0 225px;
              list-style-type:none; font:15px verdana, sans-serif;
              border: 1px solid #000;
              border-color: #0033cc #99ccff #0033ff #99ccff ;
              border-width: 1px 2px 1px 2px;
              background: #ff3333; 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 #99ccff;
              border-color: #0033cc #99ccff #0033ff #99ccff;
              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: #3399cc ;}
#pulldown a:hover {position:relative; z-index:20;
                   text-decoration:none; color:#663300;}

#pulldown :hover ul {left:-220px; top:-5px;}
/* 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:-5px; margin-left:100%; top:-25px;}
/* 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;
           height:auto; position:relative; top:25px; left:2px; font-size:12px;
           margin:5px 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:#3399cc; color:#ff3333; border:1px solid #ff3333;
           width:110px; height:90px; padding:0; margin:0;}

/* while this line is used by IE7 */
.sidemenu ul {background-color:#3399cc; color:#ff3333; 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:#ff3333;
                   width:100px; 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:#006699; color:#e7e7e7;}

.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:#3399cc; line-height:15px;
                                 padding:5px 5px 5px 10px; height:auto;
                                 text-decoration:none; width:120px;}

.sidemenu ul li:hover ul li:hover a,
.sidemenu ul li a:hover {background-color:#0066cc; color:#e7e7e7;} /* 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;
                   background-color:#0099ff; 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:#ff3333; 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:#0099ff; 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;
                   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:#00ccff; 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;
                   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:#006699;}

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

#order {position:absolute; top:400px; left:20px;}




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

.ShowBook {position:absolute; z-index:1; width:900px; height:593px; text-align=left;
           margin:0;}
.ShowBook ul.page {padding:0; margin:0; list-style:none; width:950px;
           height:593px; overflow:visible;}


/* this displays the tabs along the side */
.ShowBook ul.page li {display:block; width:25px; height:148px;
                      position:relative; left:900px;}

/* this displays the front cover */
.ShowBook ul.page li img.cover {display:block; position:relative;
            width:419px; left:1305px; top:0px;}

.ShowBook ul.page li a ul,
.ShowBook ul.page li ul {display:none;}

/* this "books" the space and sets up the default block */
.ShowBook ul.page li.active ul {display:block;
          position:absolute; left:-893px; top:0px;
          width:839px;
          list-style:none; margin:0;}


/* this shows the other tabs as you move over them */
.ShowBook ul.page li a:hover ul,
.ShowBook ul.page li:hover ul {display:block; list-style:none; }


/* displays the pages */


.ShowBook ul.page li ul li {display:block; width:839px;
             position:absolute; left:-839px;}

img.cover  {position:absolute; left:-30px; top:-035px; border-left:5px solid gray; border-top:2px solid gray; border-bottom:1px solid gray;}
img.pgtab2 {position:absolute; left:-05px; top:-304px; border-left:5px solid gray; border-top:2px solid gray; border-bottom:1px solid gray;}
img.pgtab3 {position:absolute; left:-05px; top:-451px; border-left:5px solid gray; border-top:2px solid gray; border-bottom:1px solid gray;}
img.pgtab4 {position:absolute; left:414px; top:-598px; border-left:5px solid gray; border-top:2px solid gray; border-bottom:1px solid gray;}