/*
 * There are so many buttons, especially roll-over ones
 * that they get their own file
 *
 * This technique avoids javascript so is universal
 *
 */

/*
 * MAIN MENU BUTTONS
 * *****************
 *
 * 'Default' is with no highlight, just a simple light text
 *           on the dark background - this is the non-roll image
 *
 * 'Here' is indicated with an oval wire frame
 *
 * 'Hover' is the solid oval which is also the background
 *
 *
 *
 */

/* locating the buttons within the menu bar */
#menubuttons
{
  position: absolute;
  top: 371px;
  left: 16px;
  height: 195px; 
  width: 140px;
/*border: 1px solid white;     */
}

/* 
 * The background image which will be seen during first hover image load 
 * (so we make its background the same as the hover image
 * so as to prevent 'flicker' when the user moves the mouse over the button) 
 */
#button1, #button2, #button3, #button4, #button5, #button6
{
  width: 135px;
  height: 30px;
  
  /* the hover background image is loaded now */
  background:  no-repeat 0 0;
/*border: 1px solid white;    */
}

/* the rest of the buttons only vary by their background image */
#button1 {background-image:url(../images/buttons/5_over.jpg);}
#button2 {background-image:url(../images/buttons/6_over.jpg);}
#button3 {background-image:url(../images/buttons/7_over.jpg);}
#button4 {background-image:url(../images/buttons/8_over.jpg);}
#button5 {background-image:url(../images/buttons/9_over.jpg);}
#button6 {background-image:url(../images/buttons/10_over.jpg);}

/* 
 * Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover)
 */
#svc1, #svc2, #svc3, #svc4,#svc5, #svc6
{
  display: block;
  width: 135px;
  height: 30px;
  background: no-repeat 0 0; 
/*border: 1px solid white;  */
}

#svc1 {background-image:url(../images/buttons/5_.jpg);}
#svc2 {background-image:url(../images/buttons/6_.jpg);}
#svc3 {background-image:url(../images/buttons/7_.jpg);}
#svc4 {background-image:url(../images/buttons/8_.jpg);}
#svc5 {background-image:url(../images/buttons/9_.jpg);}
#svc6 {background-image:url(../images/buttons/10_.jpg);}

/* 
 * Finally set the 'hover' image
 * As noted above, this is the same as the background
 * so as to prevent mouse-over flicker
 */
a#svc1:hover  {background-image: url(../images/buttons/5_over.jpg);}
a#svc2:hover  {background-image: url(../images/buttons/6_over.jpg);}
a#svc3:hover  {background-image: url(../images/buttons/7_over.jpg);}
a#svc4:hover  {background-image: url(../images/buttons/8_over.jpg);}
a#svc5:hover  {background-image: url(../images/buttons/9_over.jpg);}
a#svc6:hover  {background-image: url(../images/buttons/10_over.jpg);}


.alt { display: none; }

img.menuhere
{
  display: block;
  width: 135px;
  height: 30px;
}


/* the "leaf button" at top left of the home page */
/* The background image which will be seen during first hover image load */
#leafbutton
{
  position: absolute;
  top: 0;
  left: 0;
  background: transparent url(../images/buttons/1_f5.jpg) no-repeat 0 0;
} 

/* Then overlay the button divs with the main 'up' images
 * This is what the user sees most of the time (non-hover) */
#leaf_svc
{
  display: block;
  width: 140px;
  height: 225px;
  background: transparent url(../images/buttons/1_.jpg) no-repeat 0 0; 
}

/* Finally set the true 'hover' image */
a#leaf_svc:hover  {background-image: url(../images/buttons/1_f5.jpg);}