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

/* Stylinzing CSS for cool menu effects */		

.fancyNav{
	/* Affects the UL element */
	overflow: hidden;
	display: inline-block;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
	-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
.fancyNav ul {
	/* [disabled]width: 100%; */
	margin-top: 20px;
}

.fancyNav li{
	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */
	width: 16.586%;
	background-color: #f0f0f0;
	background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
	background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	border-right: 1px solid rgba(9, 9, 9, 0.125);
	/* Adding a 1px inset highlight for a more polished efect: */

	box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
	-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
	-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
	position: relative;
	float: left;
	list-style: none;
	width: 16.586%;
	/* [disabled]vertical-align: middle; */
	margin-bottom: px;
	/* [disabled]height: 50px; */
}



/*The next step is to use the :after pseudo element to create the dark shadows, displayed when you hover over a menu item:*/
.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */	

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
/*The :after declaration creates a real styleable element. It has a smooth horizontal gradient that darkens the menu item when hovered upon. As it is invisible by default (opacity is set to 0), we are using CSS3 transitions to animate it between zero and full opacity, triggered on hover. Unfortunately only Firefox supports animating pseudo elements at this moment, but other browsers are expected to soon introduce this feature.  */



/*Next we will be using the :first-child and :last-child pseudo selectors to target the first and last menu items.*/
/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
	border-radius: 4px 0 0 4px;
	padding-bottom: 0px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}

/*Applying different styles to the first and last items is necessary, as we don’t want to display ugly borders that span outside the menu. We also round the appropriate corners of these elements.*/

/*After this we need to apply a fix to the menu. It is to hide the currently selected element when we hover on the menu again:*/
.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}