/* Style sheet for Green Network website */

/* Colours used:
background: #F0FCF4
main screen text: #003333
pulldown menu background: #158C3F
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:red; border-bottom:0px; margin-bottom:0px; padding:0px;}


body {margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px;
      padding:0px; width:1008px; top:0px; 
      font-family:arial, verdana, helvetica, 
      sans-serif; font-size:0.8em; font-weight:normal; color: #003333; background-color:#F0FCF4;}
/* background-color:#F0FCF4; */

h1, h2, h3, h4, h5, h6 {color: #158C3F;} 

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

/* main links */

a:link    {background-color:transparent; color:#158c3f;} 
a:visited {background-color:transparent; color:#339933;} 
a:hover   {background-color:transparent; color:#00cc33;}
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 */

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;  }
h2 {padding-top:1em;}
h1, h2, h3, h4, h5, h6 {font-family:arial; text-align:center; font-weight:bold;} 
p {text-align:justify; }
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;}

ol, ul {text-align:left;}
ul.char {list-style: none;
         margin-left: 0em;
         padding-left: 1em;
         text-indent: -1em;
        }

table {margin:1em 0.8em;}


/* id selectors */



#banner {position:fixed; height:135px; width:1008px; background-color:#f0fcf4; padding:none; 
         z-index:1;}

#sidecol {position:fixed; padding:8px; width:160px; z-index:1;}

#mainsect {position:relative; top:145px; display:inline; float:left;  
           width:580px; text-align:justify; left:160px; 
           padding-left:15px; padding-right:15px; background-color:#F0FCF4; min-height:600px;}

#rightpanel {position:fixed; display:inline; float:right; height:1000px; width:250px;                   
             border:none; padding-left:758px; padding-top:140px;
             background-image: url('images/rightpanel.jpg'); background-repeat:repeat;
             text-align:center;}
/* background-image: url('images/rightpanel.jpg'); background-repeat:repeat-y;  */
 
#footer {position:absolute; top:532px;left:177px; clear:both; padding:0px; 
         margin:0px; height:35px; border: none;}

#srchfrm {z-index:200; position: absolute; top:420px; left:12px;
          display:block; background-color:#158c3f; color:#00cc33;
          padding:5px; }

#Contact table {border:none; margin-left:20px; padding:0; width:500px; text-align:left;}
#Contact th, #Contact td {border:none;}
#Contact td {vertical-align:top; padding-right:2px;} 

#ContactForm {position:relative; margin-top:0px; margin-left:50px; 
              border:2px solid #003366; padding:10px;
              width:450px; top:0; left:0;}
#ContactForm label{width: 100px;
                   float: left;
                   text-align: right;
                   margin-right: 3px;
                   display: block;
                  }

.button {border:none; background:url("images/unpressed.png") no-repeat top left;
         padding:2px 7px; margin:5px 0px 0px 25px;}
.button:hover {border:none; background:url("images/pressed.png") no-repeat top left;
         padding:2px 7px; margin:5px 0px 0px 25px;}

.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;}


.imgfl, .imgfr {padding: 0 1em;}
.imgflnopad {float:left; padding:0px; margin:10px;}
.imgflnopadnomarg {float:left; pading:0px; margin:0px; }
.imgnopadcntr {padding:0px; display: block; 
                 margin-left:auto; margin-right:auto; }
.imgpadcntr {padding: 0px 0px 5px 0px; display:block;
                 margin-left:auto; margin-right:auto; }
.imgfr {float:right;}
.imgflnb {float:left; border:none; text-decoration:none; }
.imgframe {border:3px solid #158C3F;}
.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 #158C3F;}
.imgcntrnb {text-align:center; border:none; text-decoration:none;}

.sidepos1 {position: relative; top:20px; left:10px;}
.sidepos2 {position: relative; top:20px; left:60px;}

.blurb {text-align:justify; }

/*-------------------  Picture Block --------------------------------------*/

.pictureblock1, .pictureblock2, .pictureblock3
               {display:block; position:relative; display:block; left:33px; 
               border: 1px solid; top:0px;}
.pictureblock1  { width: 196px; height: 83px; }
.pictureblock2  { width: 196px; height: 165px; }
.pictureblock3  { width: 196px; height: 248px; }

.pictureblock ul {position:absolute: top:0px; left:0px; padding:0; margin:0; 
                  list-style:none;}

.pictureblock ul li {display:inline; float:left; margin: 2px 2px 2px 2px;}
                     

.pictureblock ul li .bigpic {position:absolute; top:0px; left:-500px; visibility:hidden;}
.pictureblock ul li a:hover .bigpic {visibility:visible; z-index:100;} 

.pictureblock ul li .story {display:block; 
                            visibility:hidden; border: 1px solid;
                            background:#f0fcf4; padding:3px 3px 3px 3px; color:#003333;}
.pictureblock ul li a:hover .story {visibility:visible; z-index:100;}

.one {position:absolute; top:120px; left:10px; }
.two {position:absolute; top:200px; left:10px; }
.three {position:absolute; top:280px; left:10px;}

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

.smalltext {text-align:center; font-size:0.7em;}

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

/* class selectors for menu */



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

#pulldown {height:25px; padding:0; z-index:2;} 

#pulldown, 
#pulldown ul {padding:0 0 0 0; margin:114px 0 0 360px;
              position:fixed;
              list-style-type:none; font:16px arial, sans-serif;
              font-weight: bold;} 

#pulldown li {float:left; padding:2px 10px 0 10px; 
              border-style:inset;
              border-color: #66cc99 #ccffcc #006633 #ccffcc;
              background:#158C3F;
              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;
                padding-right:5px;
                text-decoration:none; white-space:nowrap;}

#pulldown li li a {height:25px; line-height:25px; float:none;}

/* the background colour here defines the overlay color as you move down the menu */
#pulldown li:hover {position:relative; background:#339966 ;} 
#pulldown a:hover {position:relative; text-decoration:none;}

#pulldown :hover ul {left:-270px; top:-100px; z-index:20;}
/* 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:-10px; 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: #00cc33;
                       } /* 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:fixed; top:170px; font-size:15px;
           font-weight:bold; 
           z-index:200; 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:transparent; color:#158C3F; 
           height:auto; padding:0; margin:0;}

/* while this line is used by IE7 */
.sidemenu ul {color:#158C3F; width:158px; 
              height:auto; padding:0; margin:0;}

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

.sidemenu ul li a, 
.sidemenu ul li a {display:block; float:left; 
                   text-decoration:none; color:#158C3F;
                   width:145px;  
                   padding-left:15px; padding-bottom:5px;}

/* what happens in base menu when we move to flyout box */
.sidemenu ul li:hover a,
.sidemenu ul li a:hover {color:#158C3F; background:transparent;} 


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

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

.sidemenu ul li:hover ul li:hover a,
.sidemenu ul li a:hover {color:#158C3F;} /* what happens in flyout box */


.sidemenu ul li:hover ul li:hover ul li:hover a,
.sidemenu ul li a:hover {color:#00cc33;}

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