#nav_button {
    background:url("/imgs/nav/navbar-home.jpg") no-repeat;   /* the default images are jsut this background image  */
    width:284px;  /* Adjust this to the width of your whole navbar image  */
    height:32px;  /*  Adjust height of default images  */
    margin:0;
    padding:0;
    }

    #nav_button span {

	
   /* display: none;  /* this was the old method to hide the text in the span tag which might not be that good for search engiens */
    }

    #nav_button li, #nav_button a {
    height:32px;    /*  Adjust height of rollover  */
    display:block;
	 text-indent: -9999px  /* this is an alternate mothod to hide the text, people mentioned that is better for Search engines (Screen readers) */
    }

    #nav_button li {
    float:left;
    list-style:none;
    display:inline;
    }

	#nav_button a:active, #nav_button a:focus {

  outline:0;   /*  This removes the dotted border in FireFox and other browsers that do that  */
  }

    #nav_button-01 {width: 82px;}  /* Enter the width of the button  - (adjusts width of rollover) */
    #nav_button-02 {width: 82px;}   /* Enter the width of the button  - (adjusts width of rollover) */
    #nav_button-03 {width: 120px;}    /* Enter the width of the button  - (adjusts width of rollover) */
   

    #nav_button-01 a:hover {background:url("/imgs/nav/navbar-home.jpg") 0px -32px no-repeat; }      /*  Use 0 for first number  - the 2nd is your height */
    #nav_button-02 a:hover {background:url("/imgs/nav/navbar-home.jpg") -82px -32px no-repeat; }    /*  Use width from 1 for first number - the 2nd is your height */
    #nav_button-03 a:hover {background:url("/imgs/nav/navbar-home.jpg") -164px -32px no-repeat; }   /*  Add 1,2 numbers for first number - the 2nd is your height */