/* CSS Document */

/*  Simple CSS Hover Menu by Christian Benci
    ----------------------------------------
    HTML Example:
        <div id="topmenu">
            <a href="#" class="mi01"><span>Your Menu Item</span></a>
            <a href="#" class="mi02"><span>Your Menu Item</span></a>
            <a href="#" class="mi03"><span>Your Menu Item</span></a>
            <a href="#" class="mi04"><span>Your Menu Item</span></a>
            <a href="#" class="mi05"><span>Your Menu Item</span></a>
            <a href="#" class="mi06"><span>Your Menu Item</span></a>
        </div>

*/

/* Container of the menu */


#topmenu
{
	height: 60px; /* height of container div */
	width: 950px; /* set margin to auto for left and right for auto centre */
	overflow: hidden;
	margin-right: auto;
	margin-left: auto;
}

/* All links within the topmenu container */
#topmenu a
{
	width: 95px;
	height: 60px;
	display: block;
	float: left;
	text-decoration: none;
}

/* Controls the text within each links span - Use this to position, hide, etc text with each link
   It's a good idea to include text links even if it is a purely image driven menu. Simply hide the links.
   This gives search engines more information to search and categorise.
*/
#topmenu a.mi01 span, #topmenu a.mi02 span, #topmenu a.mi03 span, #topmenu a.mi04 span, #topmenu a.mi05 span, #topmenu a.mi06 span, #topmenu a.mi07 span, #topmenu a.mi08 span, #topmenu a.mi09 span, #topmenu a.mi10 span /* All links within the topmenu container */
{
	visibility: hidden;
}

/* Each button's images
   It is best to move a background image rather than have two images.
   This way, the browser loads one image for both normal and hover images - meaning no waiting for hover image on first load.
   It also reduces the amount of code needed.

*/
#topmenu a.mi01
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#topmenu a.mi02
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -95px 0px;
}

#topmenu a.mi03
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -190px 0px;
}

#topmenu a.mi04
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -285px 0px;
}

#topmenu a.mi05
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -380px 0px;
}

#topmenu a.mi06
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -475px 0px;
}

#topmenu a.mi07
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -570px 0px;
}

#topmenu a.mi08
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -665px 0px;
}

#topmenu a.mi09
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -760px 0px;
}

#topmenu a.mi10
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -855px 0px;
}

/* Hover states for each button */

#topmenu a.mi01:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: 0px -60px;
}

#topmenu a.mi02:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -95px -60px;
}

#topmenu a.mi03:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -190px -60px;
}

#topmenu a.mi04:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -285px -60px;
}

#topmenu a.mi05:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -380px -60px;
}

#topmenu a.mi06:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -475px -60px;
}

#topmenu a.mi07:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -570px -60px;
}

#topmenu a.mi08:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -665px -60px;
}

#topmenu a.mi09:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -760px -60px;
}

#topmenu a.mi10:hover
{
	background-image: url(../images/topmenu_images.png);
	background-repeat: no-repeat;
	background-position: -855px -60px;
}







/* #topmenu a.mi01:hover, #topmenu a.mi02:hover, #topmenu a.mi03:hover, #topmenu a.mi04:hover, #topmenu a.mi05:hover, #topmenu a.mi06:hover, #topmenu a.mi07:hover, #topmenu a.mi08:hover, #topmenu a.mi09:hover, #topmenu a.mi10:hover
{
	background-position: 0px -30px;

} */