@charset "utf-8";
/* CSS Document */

/**** navigation rollovers ****/

#navigation {
	/* Set the background for the entire navigation. */
        background-image: url(/media/images/nav.jpg);
	/* Keep it to the width of the image. */
        width: 342px;
		height: 252px;
	/* Remove margin and padding. */
        margin: 0;
	padding: 0;
	/* Make sure the floats (see <a>) don't screw up the layout. */
        overflow: hidden;
	zoom: 1;
	position: relative;
		    }

    #navigation li {
        /* Display all the <li>'s on one line. */
        display: inline;
    }

    #navigation li.first a {
	/* Set the width and height of the link. This can be the same for all
           links, or specific to each one if they vary in size. */
	    width: 344px;
	    height: 54px;
	/* Hide the link text. */
        text-indent: -999999px;
		text-align: -999999px;
	/* Need it to be a block element to set the size. */
        display: block;
	/* Float it so it being a block doesn't put each one on a separate line again. */
        float: left;
    }
	
   #navigation li.second a {
	/* Set the width and height of the link. This can be the same for all
           links, or specific to each one if they vary in size. */
	   width: 344px;
	    height: 47px;
	/* Hide the link text. */
        text-indent: -9999px;
	/* Need it to be a block element to set the size. */
        display: block;
	/* Float it so it being a block doesn't put each one on a separate line again. */
        float: left;
    }
	
	   #navigation li.third a {
	/* Set the width and height of the link. This can be the same for all
           links, or specific to each one if they vary in size. */
	      width: 344px;
	    height: 46px;
	/* Hide the link text. */
        text-indent: -9999px;
	/* Need it to be a block element to set the size. */
        display: block;
	/* Float it so it being a block doesn't put each one on a separate line again. */
        float: left;
    }
	
		   #navigation li.fourth a {
	/* Set the width and height of the link. This can be the same for all
           links, or specific to each one if they vary in size. */
	      width: 344px;
	    height: 47px;
	/* Hide the link text. */
        text-indent: -9999px;
	/* Need it to be a block element to set the size. */
        display: block;
	/* Float it so it being a block doesn't put each one on a separate line again. */
        float: left;
    }
	
		   #navigation li.fifth a {
	/* Set the width and height of the link. This can be the same for all
           links, or specific to each one if they vary in size. */
	      width: 344px;
	    height: 52px;
	/* Hide the link text. */
        text-indent: -9999px;
	/* Need it to be a block element to set the size. */
        display: block;
	/* Float it so it being a block doesn't put each one on a separate line again. */
        float: left;
    }

    #navigation li a:hover {
        /* When hovering the link now needs the background so we can position it over
           the navigations. */
        background-image: url(/media/images/nav.jpg);

		    }

    #navigation li.first a:hover {
	/* Move the background up 25px to reveal the red hover state for First. */
        background-position: 341px 0px;
		width: 344px;
    }

    #navigation li.second a:hover {
       /* Move the background up 25px and to the left 125px to reveal the red hover state for First.*/ 
         background-position: 341px -54px;
		 width: 344px;
    }

    #navigation li.third a:hover {
        /* Move the background up 25px and to the left 250px to reveal the red hover state for First.*/ 
         background-position: 341px -101px;
		 width: 344px;
    }
	
	   #navigation li.fourth a:hover {
        /* Move the background up 25px and to the left 250px to reveal the red hover state for First.*/ 
         background-position: 341px -147px;
		 width: 344px;
    }
	
	   #navigation li.fifth a:hover {
        /* Move the background up 25px and to the left 250px to reveal the red hover state for First.*/ 
         background-position: 341px -194px;
		 width: 344px;
    }