<div class="container">
    <h1>Big Nav</h1>
    <div class="navbar">
        <ul>
            <li><a href="#">About<div class="hover">About</div></a>
            </li>
            <li><a href="#">Products<div class="hover">Products</div></a>
            </li>
            <li><a href="#">News<div class="hover">News</div></a>
            </li>
            <li><a href="#">Contact<div class="hover">Contact</div></a>
            </li>
        </ul>
    </div>
    <br>
    <br>
    <h1>Small Nav</h1>
    <div class="navbar small">
        <ul>
            <li><a href="#">About<div class="hover">About</div></a>
            </li>
            <li><a href="#">Products<div class="hover">Products</div></a>
            </li>
            <li><a href="#">News<div class="hover">News</div></a>
            </li>
            <li><a href="#">Contact<div class="hover">Contact</div></a>
            </li>
        </ul>
    </div>
    <br>
    <br>
    <h1>Toolbar Nav</h1>
    <div class="navbar small">
        <ul class="toolbar">
            <li><a href="#"><i class="icon-user"></i><div class="hover">About Us</div></a>
            </li>
            <li><a href="#"><i class="icon-picture"></i><div class="hover">Photos</div></a>
            </li>
            <li><a href="#"><i class="icon-link"></i><div class="hover">Links</div></a>
            </li>
            <li><a href="#"><i class="icon-envelope-alt"></i><div class="hover">Contact</div></a>
            </li>
        </ul>
    </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Oswald);

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;


// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

// Links
// -------------------------
@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);


// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;

@baseFontSize:          13px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        18px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor


// Navbar
// -------------------------
@navbarHeight:                    50px; 
@navlist-width:                   125px;
@navbarBackground:                @grayDarker;
@navbarBackgroundHighlight:       @grayDark;

@navbarText:                      @grayLight;
@navbarLinkColor:                 @grayLight;
@navbarLinkColorHover:            @white;
@navbarLinkColorActive:           @navbarLinkColorHover;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      @navbarBackground;

@navbarSearchBackground:          lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus:     @white;
@navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor:    #ccc;
@navbarBrandColor:                @navbarLinkColor;


// Mixins
// --------------------------------------------------

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}


body{
	background: @grayDarker;
	text-align: center;
	font-family: @sansFontFamily;
	width: 100%;
	margin: 0;
}

.container{
	margin: 80px 0;
	text-align: center;
	width: 100%;
}
.navbar{
	width: 500px;
	height: @navbarHeight;
	//background-color: @navbarBackground;
	background: #3a3a3a; /* Old browsers */
	background: -moz-linear-gradient(top,  #3a3a3a 0%, #3a3a3a 50%, #2b2b2b 51%, #2b2b2b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(50%,#3a3a3a), color-stop(51%,#2b2b2b), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #3a3a3a 0%,#3a3a3a 50%,#2b2b2b 51%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #3a3a3a 0%,#3a3a3a 50%,#2b2b2b 51%,#2b2b2b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #3a3a3a 0%,#3a3a3a 50%,#2b2b2b 51%,#2b2b2b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #3a3a3a 0%,#3a3a3a 50%,#2b2b2b 51%,#2b2b2b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */

	margin: 20px auto 40px;
	.border-radius(5px);
	.box-shadow(2px 2px 5px rgba(0, 0, 0, .4));
	border-top: 1px solid darken(@gray, 12%);
	border-left: 1px solid  darken(@gray, 12%);
	border-bottom: 1px solid  @black;
	border-right: 1px solid  @black;
	ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
		li{
			display: inline;
			float: left;
			width: @navlist-width;
			height: @navbarHeight;
			-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
			color: @grayLight;
			line-height: @navbarHeight;
			border-right: 1px solid darken(@gray, 12%);
			border-left: 1px solid @black;
			overflow: hidden;
			margin: 0;
			padding: 0;
			//outline: 1px solid red;
			a{
				width: @navlist-width;
				height: @navbarHeight * 2;
				display: inline-block;
			}
		}
		li:first-child{
			border-left: none;
			.border-radius(4px 0 0 4px);
		}
		li:last-child{
			border-right: none;
			.border-radius(0 4px 4px 0);
		}
	}
	.hover{
		background: #7DCBE0;
		color: @grayDark;
		display: block;
	}
	&.small{
		height: @navbarHeight / 1.5;
		ul{
			li{
				height: @navbarHeight / 1.5;
				line-height: @navbarHeight / 1.5;
			}
		}
	}
	&.toolbar{
		width: 180px;
		height: @navbarHeight / 1.5;
		ul{
			li{
				height: @navbarHeight / 1.5;
				line-height: @navbarHeight / 1.5;
			}
		}
	}
	
}

// GENERAL
// ---------------------------------------------------
a{
	color: @grayLight;
	text-decoration: none;
	&:hover{
		color: @grayLight;
	}
}

h1{
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	font-size: 25px;
	color: #909090;
	text-shadow: 1px 1px 1px #000;
	text-decoration: uppercase !important;
}

$(document).ready(function() {        
    $('.navbar li a').hover(
        function(e) {
            $(this).stop().animate({ marginTop: -50}, 100);
        },
        function(e) {
            $(this).stop().animate({ marginTop: 0}, 100);
        }
    );
});