/* 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: 50px; /* height of container div */
	width: 650px; /* width of container div - add all contents to get this value*/
	margin-left: auto; /* auto centre */
	margin-right: auto; /* auto centre */
	overflow: hidden;
}

/* All links within the topmenu container */
#topmenu a
{
	width: 130px;
	height: 50px;
	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 /* 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/mi01.png');
	background-repeat: no-repeat;
}

#topmenu a.mi02
{
	background-image: url('../images/mi02.png');
	background-repeat: no-repeat;
}

#topmenu a.mi03
{
	background-image: url('../images/mi03.png');
	background-repeat: no-repeat;
}

#topmenu a.mi04
{
	background-image: url('../images/mi04.png');
	background-repeat: no-repeat;
}

#topmenu a.mi05
{
	background-image: url('../images/mi05.png');
	background-repeat: no-repeat;
}

#topmenu a.mi01:hover, #topmenu a.mi02:hover, #topmenu a.mi03:hover, #topmenu a.mi04:hover, #topmenu a.mi05:hover
{
	background-position: 0px -50px;
}