Update demo page

Author: Dimitris Krestos

index.html

@@ -6,7 +6,7 @@
 	<meta name="description" content="Yet another plugin for tabs">
 
 	<!-- STYLES -->
-	<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" type="text/css" href="stylesheets/reset.css">
 	<link rel="stylesheet" type="text/css" href="stylesheets/typography.css">
 	<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
@@ -53,7 +53,6 @@ <h2>A jQuery plugin for tabs</h2>
 		<!-- <h3>About</h3> -->
 		<section id="body" role="main">
 			<article>
-				<h2><strong>Tabslet</strong></h2>
 				<h2>...is yet another jQuery plugin for tabs and more...</h2>
 				<h2>...is compatible with IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.10.1, 2.0.2.</h2>
 				<h2>...supports <a class="anchorLink" href="#custom_event">custom events</a>, <a class="anchorLink" href="#rotation">rotation</a> and <a class="anchorLink" href="#animation">animation</a></h2>
@@ -235,19 +234,5 @@ <h2>The attribute "data-toggle"</h2>
 	<script src="javascripts/initializers.js"></script>
 	<!-- JS ends -->
 
-	<!-- AddThis Smart Layers BEGIN -->
-	<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
-	<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52597abd7eca09ea"></script>
-	<script type="text/javascript">
-	  addthis.layers({
-	    'theme' : 'transparent',
-	    'share' : {
-	      'position' : 'right',
-	      'numPreferredServices' : 5
-	    }
-	  });
-	</script>
-	<!-- AddThis Smart Layers END -->
-
 </body>
 </html>

javascripts/vendor/jquery.tabslet.min.js

@@ -1 +1,25 @@
+/**
+ * Tabs plugin
+ *
+ * @copyright Copyright 2012, Dimitris Krestos
+ * @license   Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php)
+ * @link    http://vdw.staytuned.gr
+ * @version   v1.2.0
+ */
+
+  /* Sample html structure
+
+  <div class='tabs'>
+    <ul class='horizontal'>
+      <li><a href="#tab-1">Tab 1</a></li>
+      <li><a href="#tab-2">Tab 2</a></li>
+      <li><a href="#tab-3">Tab 3</a></li>
+    </ul>
+    <div id='tab-1'></div>
+    <div id='tab-2'></div>
+    <div id='tab-3'></div>
+  </div>
+
+  */
+
 (function($,window,undefined){"use strict";$.fn.tabslet=function(options){var defaults={mouseevent:"click",attribute:"href",animation:false,autorotate:false,delay:6e3,active:1};var options=$.extend(defaults,options);$(this).each(function(){function next(){i=++i%elements.length;options.mouseevent=="hover"?elements.eq(i).trigger("mouseover"):elements.eq(i).click();var e=setTimeout(next,options.delay);$this.mouseover(function(){clearTimeout(e)})}var $this=$(this);$this.find("> div").hide();$this.find("> div").eq(options.active-1).show();$this.find("> ul li").eq(options.active-1).addClass("active");var fn=eval(function(){$(this).trigger("_before");$this.find("> ul li").removeClass("active");$(this).addClass("active");$this.find("> div").hide();var e=$(this).find("a").attr(options.attribute);if(options.animation){$this.find(e).animate({opacity:"show"},"slow",function(){$(this).trigger("_after")})}else{$this.find(e).show();$(this).trigger("_after")}return false});var init=eval("$this.find('> ul li')."+options.mouseevent+"(fn)");init;var elements=$this.find("> ul li"),i=options.active-2;if(options.autorotate){setTimeout(next,0)}})};$(document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})})(jQuery)

stylesheets/styles.css

@@ -18,7 +18,7 @@
 BODY {
 
 	font-size: 13px; /* Override typography */
-	font-family: 'Lato', sans-serif;
+	font-family: "Open Sans", helvetica, arial, sans-serif;
 }
 
 #wrapper {
@@ -64,7 +64,6 @@ HEADER {
 HEADER H1 {
 	color: inherit;
 	font-size: 48px;
-	font-weight: 900;
 	line-height: 48px;
 	padding-top: 120px;
 	text-transform: uppercase;
@@ -105,15 +104,11 @@ SECTION#body {
 
 SECTION#body H2 {
 	color: white;
+	font-size: 18px;
+	font-weight: 100;
 	line-height: 25px;
 }
 
-SECTION#body H2 STRONG {
-	font-size: 20px;
-	font-weight: 400;
-	line-height: 1.5;
-}
-
 SECTION {
 	background: #F1F1F1;
 	/*margin-top: 80px;*/
@@ -127,7 +122,7 @@ SECTION {
 
 ARTICLE {
 	margin: 0 auto;
-	padding: 40px 0;
+	padding: 20px 0;
 	max-width: 940px;
 }
 
@@ -236,6 +231,8 @@ FOOTER {
 	color: white;
 	display: block;
 	float: left;
+	font-size: 14px;
+	font-weight: 500;
 	line-height: 48px;
 	margin-top: 20px;
 	text-decoration: none;