<div class="wrap">

<nav>
	<ul class="menu">
		<li><a href="#"><span class="iconic home"></span> Home</a></li>
		<li><a href="#"><span class="iconic plus-alt"></span> Bootstrap</a>
			<ul>
				<li><a href='http://www.freetimelearning.com/bootstrap-tutorial.php'><span>Bootstrap Tutorial</span></a></li>
				<li class='last'><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php"><span>Bootstrap Examples</span></a></li>
			</ul>
		</li>
		<li><a href="#"><span class="iconic plus-alt"></span> JavaScript</a>
			<ul>
				 <li><a href='http://www.freetimelearning.com/javascript-tutorial.php'><span>JavaScript Tutorial</span></a></li>
				 <li class='last'><a href="http://www.freetimelearning.com/javascript/javascript-examples.php"><span>JavaScript Examples</span></a></li>
			</ul>
		</li>
		<li><a href="#"><span class="iconic plus-alt"></span> jQuery</a>
			<ul>
				<li><a href='http://www.freetimelearning.com/jquery-tutorial.php'><span>jQuery Tutorial</span></a></li>
				<li class='last'><a href="http://www.freetimelearning.com/jquery/jquery-examples.php"><span>jQuery Examples</span></a></li>
			</ul>
		</li>
		<li><a href="#"><span class="iconic plus-alt"></span> AngularJS</a>
			<ul>
				 <li><a href='http://www.freetimelearning.com/angularjs-tutorial.php'><span>AngularJS Tutorial</span></a></li>
				 <li class='last'><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php"><span>AngularJS Examples</span></a></li>

			</ul>
		</li>
		<li><a href="#"><span class="iconic bolt"></span> Services</a>
			<ul>
				<li><a href="#">Java Applications</a></li>
				<li><a href="#">PHP Applications</a></li>
				<li><a href="#">Websites</a></li>
				<li><a href="#">Responsive Websites</a></li>
			</ul>
		</li>
		<li><a href="http://www.freetimelearning.com/contact-us.php"><span class="iconic mail"></span> Contact</a></li>
	</ul>
	<div class="clearfix"></div>
</nav>
</div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	font-family: 'Droid Sans', sans-serif;;
}

.clearfix {
	clear: both;
}

.wrap {
	width: 940px;
	margin: 4em auto;
}

nav {
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
	background-image: linear-gradient(#fff, #ccc);
	border-radius: 6px;
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
	padding: 0 10px;
	position: relative;
}

.menu li {
	float: left;
	position: relative;
}

.menu li a {
	color: #444;
	display: block;
	font-size: 14px;
	line-height: 20px;
	padding: 6px 12px;
	margin: 8px 8px;
	vertical-align: middle;
	text-decoration: none;
}

.menu li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

/* Dropdown styles */

.menu ul {
	position: absolute;
	left: -9999px;
	list-style: none;
	opacity: 0;
	transition: opacity 1s ease;
}

.menu ul li {
	float: none;
}

.menu ul a {
	white-space: nowrap;
}

.menu li:hover ul {
	background: rgba(255,255,255,0.7);
	border-radius: 0 0 6px 6px;
	box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
	left: 5px;
	opacity: 1;
}
.menu li:hover a {
	background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
	background-image: linear-gradient(#ccc, #ededed);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

.menu li:hover ul a {
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.menu li:hover ul li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
}
.clearfix{clear:both}
.ftl{font-size:16px;padding:150px 0 20px;margin:0 auto;font-style:italic;text-align:center;}
.ftl a{color:#09C;text-decoration:none !important;}
.ftl a:hover{color:#999}

@font-face {
  font-family: 'IconicStroke';
    src: url("fonts/iconic/iconic_stroke.eot");
    src: local('IconicStroke'),
       url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
	   url("fonts/iconic/iconic_stroke.otf") format('opentype');
}

.iconic {
	color:inherit;
	font-family: "IconicStroke";
	font-size: 38px;
	line-height: 20px;
	vertical-align: middle;
}

a.iconic:hover {
	color:inherit;
}

.iconic.home:before { content: '!'; }
.iconic.at:before { content: "@"; }
.iconic.quote:before { content: '"'; }
.iconic.quote-alt:before { content: "'"; }
.iconic.arrow-up:before { content: "3"; }
.iconic.arrow-right:before { content: "4"; }
.iconic.arrow-bottom:before { content: "5"; }
.iconic.arrow-left:before { content: "6"; }
.iconic.arrow-up-alt:before { content: "#"; }
.iconic.arrow-right-alt:before { content: "$"; }
.iconic.arrow-bottom-alt:before { content: "%"; }
.iconic.arrow-left-alt:before { content: "^"; }
.iconic.move:before { content: "9"; }
.iconic.move-vertical:before { content: "8"; }
.iconic.move-horizontal:before { content: "7"; }
.iconic.move-alt:before { content: "("; }
.iconic.move-vertical-alt:before { content: "*"; }
.iconic.move-horizontal-alt:before { content: "&"; }
.iconic.cursor:before { content: ")"; }
.iconic.plus:before { content: "+"; }
.iconic.plus-alt:before { content: "="; }
.iconic.minus:before { content: "-"; }
.iconic.minus-alt:before { content: "_"; }
.iconic.new-window:before { content: "1"; }
.iconic.dial:before { content: "2"; }
.iconic.lightbulb:before { content: "0"; }
.iconic.link:before { content: "/"; }
.iconic.image:before { content: "?"; }
.iconic.article:before { content: ">"; }
.iconic.read-more:before { content: "."; }
.iconic.headphones:before { content: ","; }
.iconic.equalizer:before { content: "<"; }
.iconic.fullscreen:before { content: ":"; }
.iconic.exit-fullscreen:before { content: ";"; }
.iconic.spin:before { content: "["; }
.iconic.spin-alt:before { content: "{"; }
.iconic.moon:before { content: "]"; }
.iconic.sun:before { content: "}"; }
.iconic.map-pin:before { content: "\\"; }
.iconic.pin:before { content: "|"; }
.iconic.eyedropper:before { content: "~"; }
.iconic.denied:before { content: "`"; }
.iconic.calendar:before { content: "a"; }
.iconic.calendar-alt:before { content: "A"; }
.iconic.bolt:before { content: "b"; }
.iconic.clock:before { content: "c"; }
.iconic.document:before { content: "d"; }
.iconic.book:before { content: "e"; }
.iconic.book-alt:before { content: "E"; }
.iconic.magnifying-glass:before { content: "f"; }
.iconic.tag:before { content: "g"; }
.iconic.heart:before { content: "h"; }
.iconic.info:before { content: "i"; }
.iconic.chat:before { content: "j"; }
.iconic.chat-alt:before { content: "J"; }
.iconic.key:before { content: "k"; }
.iconic.unlocked:before { content: "l"; }
.iconic.locked:before { content: "L"; }
.iconic.mail:before { content: "m"; }
.iconic.mail-alt:before { content: "M"; }
.iconic.phone:before { content: "n"; }
.iconic.box:before { content: "o"; }
.iconic.pencil:before { content: "p"; }
.iconic.pencil-alt:before { content: "P"; }
.iconic.comment:before { content: "q"; }
.iconic.comment-alt:before { content: "Q"; }
.iconic.rss:before { content: "r"; }
.iconic.star:before { content: "s"; }
.iconic.trash:before { content: "t"; }
.iconic.user:before { content: "u"; }
.iconic.volume:before { content: "v"; }
.iconic.mute:before { content: "V"; }
.iconic.cog:before { content: "w"; }
.iconic.cog-alt:before { content: "W"; }
.iconic.x:before { content: "x"; }
.iconic.x-alt:before { content: "X"; }
.iconic.check:before { content: "y"; }
.iconic.check-alt:before { content: "Y"; }
.iconic.beaker:before { content: "z"; }
.iconic.beaker-alt:before { content: "Z"; }

// StyleFix 1.0.1 & PrefixFree 1.0.4 / by Lea Verou / MIT license
(function() {
    function h(a, b) {
        return [].slice.call((b || document).querySelectorAll(a))
    }
    if (window.addEventListener) {
        var b = window.StyleFix = {
            link: function(a) {
                try {
                    if (!/\bstylesheet\b/i.test(a.rel) || !a.sheet.cssRules) return
                } catch (c) {
                    return
                }
                var d = a.href || a.getAttribute("data-href"),
                    f = d.replace(/[^\/]+$/, ""),
                    g = a.parentNode,
                    e = new XMLHttpRequest;
                e.open("GET", d);
                e.onreadystatechange = function() {
                    if (4 === e.readyState) {
                        var c = e.responseText;
                        if (c && a.parentNode) {
                            c = b.fix(c, !0, a);
                            f && (c = c.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi,
                                function(a, c) {
                                    return !/^([a-z]{3,10}:|\/|#)/i.test(c) ? 'url("' + f + c + '")' : a
                                }), c = c.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)" + f, "gi"), "$1"));
                            var d = document.createElement("style");
                            d.textContent = c;
                            d.media = a.media;
                            d.disabled = a.disabled;
                            d.setAttribute("data-href", a.getAttribute("href"));
                            g.insertBefore(d, a);
                            g.removeChild(a)
                        }
                    }
                };
                e.send(null);
                a.setAttribute("data-inprogress", "")
            },
            styleElement: function(a) {
                var c = a.disabled;
                a.textContent = b.fix(a.textContent, !0, a);
                a.disabled = c
            },
            styleAttribute: function(a) {
                var c =
                    a.getAttribute("style"),
                    c = b.fix(c, !1, a);
                a.setAttribute("style", c)
            },
            process: function() {
                h('link[rel~="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
                h("style").forEach(StyleFix.styleElement);
                h("[style]").forEach(StyleFix.styleAttribute)
            },
            register: function(a, c) {
                (b.fixers = b.fixers || []).splice(void 0 === c ? b.fixers.length : c, 0, a)
            },
            fix: function(a, c) {
                for (var d = 0; d < b.fixers.length; d++) a = b.fixers[d](a, c) || a;
                return a
            },
            camelCase: function(a) {
                return a.replace(/-([a-z])/g, function(a, b) {
                    return b.toUpperCase()
                }).replace("-",
                    "")
            },
            deCamelCase: function(a) {
                return a.replace(/[A-Z]/g, function(a) {
                    return "-" + a.toLowerCase()
                })
            }
        };
        (function() {
            setTimeout(function() {
                h('link[rel~="stylesheet"]').forEach(StyleFix.link)
            }, 10);
            document.addEventListener("DOMContentLoaded", StyleFix.process, !1)
        })()
    }
})();
(function(h) {
    if (window.StyleFix && window.getComputedStyle) {
        var b = window.PrefixFree = {
            prefixCSS: function(a, c) {
                function d(c, d, f, g) {
                    c = b[c];
                    c.length && (c = RegExp(d + "(" + c.join("|") + ")" + f, "gi"), a = a.replace(c, g))
                }
                var f = b.prefix;
                d("functions", "(\\s|:|,)", "\\s*\\(", "$1" + f + "$2(");
                d("keywords", "(\\s|:)", "(\\s|;|\\}|$)", "$1" + f + "$2$3");
                d("properties", "(^|\\{|\\s|;)", "\\s*:", "$1" + f + "$2:");
                if (b.properties.length) {
                    var g = RegExp("\\b(" + b.properties.join("|") + ")(?!:)", "gi");
                    d("valueProperties", "\\b", ":(.+?);", function(a) {
                        return a.replace(g,
                            f + "$1")
                    })
                }
                c && (d("selectors", "", "\\b", b.prefixSelector), d("atrules", "@", "\\b", "@" + f + "$1"));
                return a = a.replace(RegExp("-" + f, "g"), "-")
            },
            prefixSelector: function(a) {
                return a.replace(/^:{1,2}/, function(a) {
                    return a + b.prefix
                })
            },
            prefixProperty: function(a, c) {
                var d = b.prefix + a;
                return c ? StyleFix.camelCase(d) : d
            }
        };
        (function() {
            var a = {},
                c = [],
                d = getComputedStyle(document.documentElement, null),
                f = document.createElement("div").style,
                g = function(b) {
                    if ("-" === b.charAt(0)) {
                        c.push(b);
                        var b = b.split("-"),
                            d = b[1];
                        for (a[d] = ++a[d] ||
                            1; 3 < b.length;) b.pop(), d = b.join("-"), StyleFix.camelCase(d) in f && -1 === c.indexOf(d) && c.push(d)
                    }
                };
            if (0 < d.length)
                for (var e = 0; e < d.length; e++) g(d[e]);
            else
                for (var i in d) g(StyleFix.deCamelCase(i));
            var e = 0,
                j, h;
            for (h in a) d = a[h], e < d && (j = h, e = d);
            b.prefix = "-" + j + "-";
            b.Prefix = StyleFix.camelCase(b.prefix);
            b.properties = [];
            for (e = 0; e < c.length; e++) i = c[e], 0 === i.indexOf(b.prefix) && (j = i.slice(b.prefix.length), StyleFix.camelCase(j) in f || b.properties.push(j));
            "Ms" == b.Prefix && !("transform" in f) && !("MsTransform" in f) && "msTransform" in
                f && b.properties.push("transform", "transform-origin");
            b.properties.sort()
        })();
        (function() {
            function a(a, b) {
                f[b] = "";
                f[b] = a;
                return !!f[b]
            }
            var c = {
                "linear-gradient": {
                    property: "backgroundImage",
                    params: "red, teal"
                },
                calc: {
                    property: "width",
                    params: "1px + 5%"
                },
                element: {
                    property: "backgroundImage",
                    params: "#foo"
                }
            };
            c["repeating-linear-gradient"] = c["repeating-radial-gradient"] = c["radial-gradient"] = c["linear-gradient"];
            var d = {
                initial: "color",
                "zoom-in": "cursor",
                "zoom-out": "cursor",
                box: "display",
                flexbox: "display",
                "inline-flexbox": "display"
            };
            b.functions = [];
            b.keywords = [];
            var f = document.createElement("div").style,
                g;
            for (g in c) {
                var e = c[g],
                    i = e.property,
                    e = g + "(" + e.params + ")";
                !a(e, i) && a(b.prefix + e, i) && b.functions.push(g)
            }
            for (var h in d) i = d[h], !a(h, i) && a(b.prefix + h, i) && b.keywords.push(h)
        })();
        (function() {
            function a(a) {
                f.textContent = a + "{}";
                return !!f.sheet.cssRules.length
            }
            var c = {
                    ":read-only": null,
                    ":read-write": null,
                    ":any-link": null,
                    "::selection": null
                },
                d = {
                    keyframes: "name",
                    viewport: null,
                    document: 'regexp(".")'
                };
            b.selectors = [];
            b.atrules = [];
            var f = h.appendChild(document.createElement("style")),
                g;
            for (g in c) {
                var e = g + (c[g] ? "(" + c[g] + ")" : "");
                !a(e) && a(b.prefixSelector(e)) && b.selectors.push(g)
            }
            for (var i in d) e = i + " " + (d[i] || ""), !a("@" + e) && a("@" + b.prefix + e) && b.atrules.push(i);
            h.removeChild(f)
        })();
        b.valueProperties = ["transition", "transition-property"];
        h.className += " " + b.prefix;
        StyleFix.register(b.prefixCSS)
    }
})(document.documentElement);