<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-2/js/jquery-1.9.1.min.js"></script>
<script src="http://www.freetimelearning.com/plugins/responsive-menus/responsive-menu-2/js/modernizr.custom.js"></script>

<div id="wrapper">

<div id="main">
    <div class="container">
        <div id="nav-trigger">
            <span> F T L Menu</span>
        </div>
        <nav id="nav-main">
            <ul>
            	<li><a href="http://www.freetimelearning.com/">HOME</a></li>
                <li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
                <li><a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a></li>
                <li><a href="http://www.freetimelearning.com/javascript-tutorial.php">JAVASCRIPT</a></li>
                <li><a href="http://www.freetimelearning.com/jquery-tutorial.php">JQUERY</a></li>
                <li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">BOOTSTRAP</a></li>
                <li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">ANGULARJS</a></li>
				<li><a href="http://www.freetimelearning.com/java-tutorial.php">JAVA</a></li>
                <li><a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a></li>
                <li><a href="http://www.freetimelearning.com/python-tutorial.php">PYTHON</a></li>
            </ul>
        </nav>
        <nav id="nav-mobile"></nav>

    </div>
</div>

</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, font, 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 {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

body {
  line-height: 1; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; 
  }
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  color: #505050;
  font-family:Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8; 
  }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  font-weight: 300; }

a {
  text-decoration: none;
  color: #c80032; }

a:hover {
  color: #7c001f; }

/* Template */
#wrapper {
  width: 100%;
  margin: 0 auto; }

#main {
  background-color: #fff;
  padding: 10px 0px; 
  }

.container {
  width: 98%;
  margin: 0 auto;
  padding: 0 20px; }
.clearfix{clear:both}
.ftl{font-size:16px;font-style:italic;padding:100px 0;font-weight:700;margin:0 auto;text-align:center}
.ftl a{color:#900;text-decoration:none}
.ftl a:hover{color:#590000;}
/* Navbar */
#nav-trigger {
  display: none;
  text-align: center; }
  #nav-trigger span {
    display: inline-block;
    padding: 7px 15px;
    background-color: #900;
    color: white;
    cursor: pointer;
    text-transform: uppercase; }
    #nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 10px;
      content: "";
      border-left: solid 10px transparent;
      border-top: solid 10px #fff;
      border-right: solid 10px transparent; }
    #nav-trigger span:hover {
      background-color: #900; }
    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; }

nav {
  margin-bottom: 30px; }

nav#nav-main {
  background-color: #900;
  padding: 6px 0px;
  border-radius:3px;
  }
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  nav#nav-main li {
    display: inline-block;
    border-right: solid 1px #6C0000;
    padding: 0 5px; 
	}
    nav#nav-main li:last-child {
      border-right: none; }
  nav#nav-main a {
    display: block;
    color: white;
    padding: 7px 15px; }
    nav#nav-main a:hover {
      background-color:#600;
      color: #fff;
	  border-radius:3px;
	  }

nav#nav-mobile {
  position: relative;
  display: none; }
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #900; }
  nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #600; }
    nav#nav-mobile li:last-child {
      border-bottom: none; }
  nav#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px; }
    nav#nav-mobile a:hover {
      background-color: #6A0000;
      color: #fff; }

/* Sections */
section h1 {
  margin-bottom: 10px; }

section p {
  margin-bottom: 30px; }
  section p:last-child {
    margin-bottom: 0; }

/* Media Queries */
@media all and (max-width: 900px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; } }

$(document).ready(function(){
	$("#nav-mobile").html($("#nav-main").html());
	$("#nav-trigger span").click(function(){
		if ($("nav#nav-mobile ul").hasClass("expanded")) {
			$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
			$(this).removeClass("open");
		} else {
			$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
			$(this).addClass("open");
		}
	});
});