HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Barlow:400,600|Roboto:300,500" rel="stylesheet">
<title>creativetechweekhomepage</title>
</head>
<body>
<div id="maincontainer">
 <div id="navigation">
  <div id="navleft">
    <ul>
      <li id="logo"><img src="https://i.imgur.com/JSnl9Q3.png"/></li>
      <li><div class="horizontalrule"></div></li>
    </ul>

</div>
  <div id="menu">
    
     <ul class="sf-menu">
      <li><a href="#">Events</a>
     <ul>
        <li><a href="#">All Events</a></li>
        <li><a href="#">Arts Hub</a></li>
        <li><a href="#">Mixed Reality Party</a></li>
        <li><a href="#">The Conference</a>
          <ul>
            <li><a href="#">Experts &amp; Keynotes</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Apply</a>
      <ul>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Application</a></li>
      </ul>
    </li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Overview</a></li>
        <li><a href="#">History</a></li>
        <li><a href="#">Sponsors</a></li>
      </ul>
    </li>
    <li id="purple"><a href="#">Tickets</a>
    </li>
   </ul>
  </div>
   <div>
</div>
  
 </div>

<div id="homecontainer">
    <div id="banner" class="clearfloat gradient">
      <ul>
      <li>
        <div>
          <h4>Creative Tech Week 2018</h4>
          <h1>May 03-12</h1>
        </div>
      </li>
      <li><div class="button"> Aplly Now</div></li>
    </ul>
   </div> 
  
    <div id="video">
      <img src="https://i.imgur.com/bbGLQ35.png"/>
    </div>
  
    <div id="subscribe" class=" clearfloat center">
    <h4>Sign up to become a part of the Creative Tech Week Community</h4>
      <ul>
        <li><div class="gradient2 grey">Type in your email</div></li>
        <li><div class="solidbutton"> Subscribe</div></li>
      </ul>
    </div>

<div id="event" class="clearfloat">
      <div class="header">
        <ul>
          <li>Events</li>
          <li><div class="headerrule"></div></li>
        </ul>
      </div>
      <div id="eventswrapper" class="clearfloat">
        <div id="leftcolumn">
          <h2>Network &amp; Unwind</h2>
          <h2>Heighten your capabilities</h2>
          <h2>Discover &amp; learn</h2>
      </div>
        <div id="rightcolumn" >
          <p id="party"><span>Mixed Reality Party</span> provides you with opportunities to network with fellow attendees and get exposed to new ideas</p>
          <p id="hub"><span>Arts Hub</span> is a 2 day event with expert hosted keynotes, explore new ideas in creative technology.
</p>
          <p id="conference"><span>The Conference</span> offers art shows, performances and workshops that  give you a chance to dive into the latest and greatest in creative technology.
</p>
        </div>
    </div>
    </div>
   </div>
     
     <div id="pasttalks" class="clearfloat">
        <div class="header">
        <ul>
          <li>Past Talks</li>
          <li><div class="headerrule"></div></li>
        </ul>
        </div>
        <div id="talkswrapper" class=" itemswrapper clearfloat">
          <ul>
            <li><img src="https://i.imgur.com/R3zPcxj.png"><br>Name<br>description</li>
            <li><div class="videofloat"><img src="https://i.imgur.com/2dG66u8.png"><br>Name<br>description</div></li>
            <li><div class="videofloat"><img src="https://i.imgur.com/KsnUMao.png"><br>Name<br>description</div></li>
          </ul>
        </div>
     </div>
     
    <div id="speakers" class="clearfloat">
      <div class="header">
        <ul>
          <li>Speakers</li>
          <li><div class="headerrule"></div></li>
        </ul>
        </div>
        <div id="speakerswrapper" class=" itemswrapper clearfloat">
          <ul>
            <li><img src="https://i.imgur.com/EfktAGw.png"><br/>Name<br/>Job Title</li>
            <li><div class="imgfloat"><img src="https://i.imgur.com/YQxb7A6.png"><br/>Name<br/>Job Title</div></li>
            <li><div class="imgfloat"><img src="https://i.imgur.com/5Szlo5T.png"><br/>Name<br/>Job Title</div></li>
            <li><div class="imgfloat"><img src="https://i.imgur.com/HvYSONM.png"><br/>Name<br/>Job Title</div></li>
          </ul>
          
        </div>
    </div>
    
  <div id="sponsors" class="clearfloat">
     <div class="header">
        <ul>
          <li>Sponsors</li>
          <li><div class="headerrule"></div></li>
        </ul>
     </div>
    <div class="clearfloat">
      <img src="https://i.imgur.com/KiwYH5d.png"/>
    </div> 
  </div>

<div id="footer" class="clearfloat">
    <div id="footerwrapper">
        <div id="footerlinks">  
        <ul>
          <li><a href="#"></a>Contact</li>
          <li><a href="#"></a>FAQ</li>
          <li><a href="#"></a>Privacy Policy</li>
          <li><a href="#"></a>Code of Conduct</li>
       </ul>
       </div> 
         <div id="socialmediacontainer">
       <ul id="socialmedia">
          <li><a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a></li>
          <li><a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
</a></li>
          <li><a href="#"><i class="fa fa-youtube fa-2x"  aria-hidden="true"></i>
</a></li>
       </ul>
      
     </div>
  </div>
  </div>
  </div> 
</body>
</html>

#maincontainer{
  margin: 0 auto;
  width: 960px;
  background-color: black;
  color: white;}
#navigation{
  height: 140px;
  background-color: black; 
  font-family:'Barlow', sans-serif;
  font-weight: 400px;
  font-size: 16px;}
#logo img{
  width: 120px;}
.horizontalrule{
  margin-top: 55;
  width: 280px;
  margin-left: 10;
  border-top: 1px solid #5427D7;}
#navleft li{
  margin-top: 20;
  float: left;}

/* navigation css starts here

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {

margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	border-left: 1px solid #fff;
	border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(255,255,255,.5);
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: white;
}
.sf-menu li {
	background: #BDD2FF;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #AABDE6;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #CFDEFF;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {

}

/* Override style changes */

.sf-menu a {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 1px solid black;
  border-top: 1px solid black;
}
.sf-menu li{
  background-color: black;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: black;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;}
.sf-menu ul li {
	background: black;}
.sf-menu ul ul li {
  background: black;}
#purple{
  border: 2px solid #5427D7;}
#menu{
  float: right;
  margin-top: 50;
  margin-right: 30;}

/* where footer starts*/

#socialmediacontainer{
  clear: both;}
#footerlinks{
  clear: both;}
#footer{
  border-top: 1px solid #5427D7;
  width: 960px;
  height: 100px;
  background-color: black;
  color: grey;
  font-size: 13px;
  font-family: Roboto;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 300;}
ul{
  list-style: none;}
#footerlinks li{
  float: left;
  margin-left: 30px;}
#socialmedia li{
  float: left;
  margin-right: 30;}
.fa{
  color: white;}
#socialmediacontainer{
  float: right;
  margin-top: -30;
  width: 260px;}
#footerlinks{
  width: 700px;
  margin-top: 20px;
  float: left;}

.clearfloat{
  clear: both;
}

h4{
 font-family:'Barlow', sans-serif;
 color: white;
 text-transform: uppercase;
 font-size: 16px;
 letter-spacing: 4px;
 font-weight: 400px;
}
h1{
 font-family:'Barlow', sans-serif;
 color: white;
 text-transform: uppercase;
 font-size: 60px;
 letter-spacing: 5px;
 font-weight: 400px;
 margin-top: -25;
}
#banner{
  width: 870px;
  margin: auto;
}
.gradient {
  margin: 50px auto;
  width: 250px;
  height: 130px;
  border-left: 3px solid #3BC1E1;
  border-right: 3px solid #5427D7;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 0 100% ;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  background-size: 100% 3px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(left, #3BC1E1 0%, #5427D7 100%), -webkit-linear-gradient(left, #3BC1E1 0%, #5427D7 100%);
  background-image: -moz-linear-gradient(left, #3BC1E1 0%, #5427D7 100%), -moz-linear-gradient(left, #3BC1E1 0%, #5427D7 100%);
  background-image: -o-linear-gradient(left, #3BC1E1 0%, #5427D7 100%), -o-linear-gradient(left, #3BC1E1 0%, #5427D7 100%);
  background-image: linear-gradient(to right, #3BC1E1 0%, #5427D7 100%), linear-gradient(to right, #3BC1E1 0%, #5427D7 100%);
}

.button{
  border: 1.5px solid #5427D7;
  width: 140px;
  height: 30px;
  text-align: center;
  padding-top: 10;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: 330px;
  margin-top: 45;}
#banner li{
  float: left;}
#banner{
  margin-top: 40px;}

#video img{
  width: 872px;
  margin: auto;
  margin-top: 60px;}
#video{
  text-align: center;}
.center{
  text-align: center;
}
.solidbutton{
  background-color: #5427D7;
  width: 140px;
  height: 30px;
  text-align: center;
  padding-top: 10;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: 30;
  margin-top: 50;}

.gradient2 {
  margin: 50px auto;
  margin-left: 60;
  width: 550px;
  height: 43px;
  border-left: 3px solid #3BC1E1;
  border-right: 3px solid #5427D7;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 0 100% ;
  background-repeat: no-repeat;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  background-size: 100% 3px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(left, #3BC1E1 0%, #5427D7 100%), -webkit-linear-gradient(left, #3BC1E1 0%, #5427D7 100%);
  background-image: -moz-linear-gradient(left, #3BC1E1 0%, #5427D7 100%), -moz-linear-gradient(left, #3BC1E1 0%, #5427D7 100%);
  background-image: -o-linear-gradient(left, #3BC1E1 0%, #5427D7 100%), -o-linear-gradient(left, #3BC1E1 0%, #5427D7 100%);
  background-image: linear-gradient(to right, #3BC1E1 0%, #5427D7 100%), linear-gradient(to right, #3BC1E1 0%, #5427D7 100%);
}

#subscribe li{
  float: left;
}

#subscribe{
  margin-top: 60px;}
#subscribe ul{
  margin-top: -40px;}

.grey{
  color: grey;
  font-size: 18;
  font-family: roboto;
  font-weight: 300;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 1px;
  padding-top: 10px;
  padding-left: 20px;}

.header{
 font-family:'Barlow', sans-serif;
 color: white;
 text-transform: uppercase;
 font-size: 24px;
 letter-spacing: 4px;
 font-weight: 400px;
}
.headerrule{
  border-top: 1px solid #5427D7;
  width: 300;
  margin-left: 20;
  margin-top: 12;
}
.header li{
 float:left;
}

span{
 font-size: 18;
 font-family: roboto;
 font-weight: 500;
 color: #3BC1E1 ;
 text-transform: uppercase;
}

p{
  font-family: roboto;
  font-weight: 300;
  font-size: 16px ;
  letter-spacing: .5px;
}

#rightcolumn{
  text-align: left;
  width: 400;
  float: left;
  margin-top: 10;
  margin-bottom: 50;}
#leftcolumn{
  text-align: left;
  width: 500;
  float: left;
  }
h2{
 font-family:'Barlow', sans-serif;
 color: white;
 text-transform: uppercase;
 font-size: 28px;
 letter-spacing: 4px;
 font-weight: 400px;
 margin-bottom: 60px;
 margin-left: 50px;}
#hub{
  margin-top: 40px;}
#conference{
  margin-top: 80;}

.itemswrapper{
  font-family: roboto;
  font-size: 16;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;}
#talkswrapper li{
  float: left;
  margin-left: 20;
  margin-top: 30px;
  margin-bottom: 60px;}
#talkswrapper img{
  width: 220;}
.videofloat{
  margin-left: 60;}
#homecontainer{
  background-color: black;
}

#speakerswrapper li{
  float: left;
  margin-left: 20;
  margin-top: 30px;
  margin-bottom: 60px;}

#speakerswrapper img{
  width: 150px;
}
.imgfloat{
  margin-left: 60px;
}

#sponsors img{
  width: 500px;
  margin-left: 40px;
  padding-top: 20px;
  padding-bottom: 70px;}

/**
 * hoverIntent is similar to jQuery's built-in "hover" method except that
 * instead of firing the handlerIn function immediately, hoverIntent checks
 * to see if the user's mouse has slowed down (beneath the sensitivity
 * threshold) before firing the event. The handlerOut function is only
 * called after a matching handlerIn.
 *
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license. Basically that
 * means you are free to use hoverIntent as long as this header is left intact.
 * Copyright 2007, 2013 Brian Cherne
 *
 * // basic usage ... just like .hover()
 * .hoverIntent( handlerIn, handlerOut )
 * .hoverIntent( handlerInOut )
 *
 * // basic usage ... with event delegation!
 * .hoverIntent( handlerIn, handlerOut, selector )
 * .hoverIntent( handlerInOut, selector )
 *
 * // using a basic configuration object
 * .hoverIntent( config )
 *
 * @param  handlerIn   function OR configuration object
 * @param  handlerOut  function OR selector for delegation OR undefined
 * @param  selector    selector OR undefined
 * @author Brian Cherne <brian(at)cherne(dot)net>
 **/
(function($) {
    $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {

// default configuration values
        var cfg = {
            interval: 100,
            sensitivity: 7,
            timeout: 0
        };

if ( typeof handlerIn === "object" ) {
            cfg = $.extend(cfg, handlerIn );
        } else if ($.isFunction(handlerOut)) {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
        } else {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
        }

// instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;

// A private function for getting mouse position
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };

// A private function for comparing current and previous mouse position
        var compare = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            // compare mouse positions to see if they've crossed the threshold
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                $(ob).off("mousemove.hoverIntent",track);
                // set hoverIntent state to true (so mouseOut can be called)
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob,[ev]);
            } else {
                // set previous coordinates for next time
                pX = cX; pY = cY;
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
            }
        };

// A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

// A private function for handling mouse 'hovering'
        var handleHover = function(e) {
            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({},e);
            var ob = this;

// cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

// if e.type == "mouseenter"
            if (e.type == "mouseenter") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX; pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).on("mousemove.hoverIntent",track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

// else e.type == "mouseleave"
            } else {
                // unbind expensive mousemove event
                $(ob).off("mousemove.hoverIntent",track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
        };

// listen for mouseenter and mouseleave
        return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
    };
})(jQuery);

/*
 * jQuery Superfish Menu Plugin
 * Copyright (c) 2013 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *	http://www.opensource.org/licenses/mit-license.php
 *	http://www.gnu.org/licenses/gpl.html
 */

(function ($, w) {
	"use strict";

if (!this.parents('.' + o.hoverClass).length) {
					o.onIdle.call(getMenu(this));
					if (o.$path.length) {
						$.proxy(over, o.$path)();
					}
				}
			},
			out = function () {
				var $this = $(this),
					o = getOptions($this);
				if (ios) {
					$.proxy(close, $this, o)();
				}
				else {
					clearTimeout(o.sfTimer);
					o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
				}
			},
			touchHandler = function (e) {
				var $this = $(this),
					o = getOptions($this),
					$ul = $this.siblings(e.data.popUpSelector);

if (o.onHandleTouch.call($ul) === false) {
					return this;
				}

if ($ul.length > 0 && $ul.is(':hidden')) {
					$this.one('click.superfish', false);
					if (e.type === 'MSPointerDown' || e.type === 'pointerdown') {
						$this.trigger('focus');
					} else {
						$.proxy(over, $this.parent('li'))();
					}
				}
			},
			applyHandlers = function ($menu, o) {
				var targets = 'li:has(' + o.popUpSelector + ')';
				if ($.fn.hoverIntent && !o.disableHI) {
					$menu.hoverIntent(over, out, targets);
				}
				else {
					$menu
						.on('mouseenter.superfish', targets, over)
						.on('mouseleave.superfish', targets, out);
				}
				var touchevent = 'MSPointerDown.superfish';
				if (unprefixedPointerEvents) {
					touchevent = 'pointerdown.superfish';
				}
				if (!ios) {
					touchevent += ' touchend.superfish';
				}
				if (wp7) {
					touchevent += ' mousedown.superfish';
				}
				$menu
					.on('focusin.superfish', 'li', over)
					.on('focusout.superfish', 'li', out)
					.on(touchevent, 'a', o, touchHandler);
			};

return {
			// public methods
			hide: function (instant) {
				if (this.length) {
					var $this = this,
						o = getOptions($this);
					if (!o) {
						return this;
					}
					var not = (o.retainPath === true) ? o.$path : '',
						$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
						speed = o.speedOut;

if (instant) {
						$ul.show();
						speed = 0;
					}
					o.retainPath = false;

if (o.onBeforeHide.call($ul) === false) {
						return this;
					}

$ul.stop(true, true).animate(o.animationOut, speed, function () {
						var $this = $(this);
						o.onHide.call($this);
					});
				}
				return this;
			},
			show: function () {
				var o = getOptions(this);
				if (!o) {
					return this;
				}
				var $this = this.addClass(o.hoverClass),
					$ul = $this.children(o.popUpSelector);

if (o.onBeforeShow.call($ul) === false) {
					return this;
				}

$ul.stop(true, true).animate(o.animation, o.speed, function () {
					o.onShow.call($ul);
				});
				return this;
			},
			destroy: function () {
				return this.each(function () {
					var $this = $(this),
						o = $this.data('sfOptions'),
						$hasPopUp;
					if (!o) {
						return false;
					}
					$hasPopUp = $this.find(o.popUpSelector).parent('li');
					clearTimeout(o.sfTimer);
					toggleMenuClasses($this, o);
					toggleAnchorClass($hasPopUp);
					toggleTouchAction($this);
					// remove event handlers
					$this.off('.superfish').off('.hoverIntent');
					// clear animation's inline display style
					$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
						if (typeof style !== 'undefined') {
							return style.replace(/display[^;]+;?/g, '');
						}
					});
					// reset 'current' path classes
					o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
					$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
					o.onDestroy.call($this);
					$this.removeData('sfOptions');
				});
			},
			init: function (op) {
				return this.each(function () {
					var $this = $(this);
					if ($this.data('sfOptions')) {
						return false;
					}
					var o = $.extend({}, $.fn.superfish.defaults, op),
						$hasPopUp = $this.find(o.popUpSelector).parent('li');
					o.$path = setPathToCurrent($this, o);

$this.data('sfOptions', o);

toggleMenuClasses($this, o, true);
					toggleAnchorClass($hasPopUp, true);
					toggleTouchAction($this);
					applyHandlers($this, o);

$hasPopUp.not('.' + c.bcClass).superfish('hide', true);

o.onInit.call(this);
				});
			}
		};
	})();

$.fn.superfish = function (method, args) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method === 'object' || ! method) {
			return methods.init.apply(this, arguments);
		}
		else {
			return $.error('Method ' +  method + ' does not exist on jQuery.fn.superfish');
		}
	};

$.fn.superfish.defaults = {
		popUpSelector: 'ul,.sf-mega', // within menu context
		hoverClass: 'sfHover',
		pathClass: 'overrideThisToUse',
		pathLevels: 1,
		delay: 800,
		animation: {opacity: 'show'},
		animationOut: {opacity: 'hide'},
		speed: 'normal',
		speedOut: 'fast',
		cssArrows: true,
		disableHI: false,
		onInit: $.noop,
		onBeforeShow: $.noop,
		onShow: $.noop,
		onBeforeHide: $.noop,
		onHide: $.noop,
		onIdle: $.noop,
		onDestroy: $.noop,
		onHandleTouch: $.noop
	};

})(jQuery, window);

jQuery(document).ready(function(){
		jQuery('ul.sf-menu').superfish();
	});