/* position and dimensions of the navigator */
.navi {
	position:relative;
    width:200px;
    height:6px;
	padding-left: 5px;
}

/* items inside navigator */
.navi a {
    width:20px;
    height:20px;
    float:left;
    margin:3px;
    display:block;
	background: #606060;
	background: -moz-radial-gradient(#606060 0%, #181818 100%);
	background: -webkit-gradient(radial, left top, left bottom, color-stop(0%, #606060), color-stop(100%, #181818));
	background: -webkit-radial-gradient(#606060 0%, #181818 100%);
	background: radial-gradient(circle, #606060 0%, #282828  100%);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* mouseover state */
.navi a:hover {
    background:radial-gradient(circle, #202020 0%, #080808  100%);
}

/* active state (current page state) */
.navi a.active {
    background:radial-gradient(circle, #202020 0%, #080808  100%);
}