first pass revamped timeline component

* this is a breaking change *

the filter for aesop_timeline_scroll_container has chnage to article from 'entry-content'. this means the timeline component is now compatible with 99% of themes.

public/assets/less/components/base.less

@@ -44,4 +44,15 @@
     padding:    @caption-padding;
     background: @caption-bg;
     font-size: @font-size-small;
+}
+
+.clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
 }

public/assets/less/components/timeline.less

@@ -0,0 +1,33 @@
+@import 'base.less';
+
+.aesop-timeline {
+    position: fixed;
+    bottom:0;
+    left:0;
+    right:0;
+
+    ol {
+        margin:0;
+        padding:0;
+        .clearfix();
+        position:relative;
+        background:@baseContrast;
+        padding:5px 10px;
+
+        li {
+            display: inline-block;
+            margin-right:5px;
+
+            &:last-child {
+                margin-right:0;
+            }
+
+            a {
+                text-transform: uppercase;
+                font-size:12px;
+                color:inherit;
+                padding:2px 4px;
+            }
+        }
+    }
+}

public/assets/less/theme.less

@@ -228,6 +228,25 @@
     }
 }
 
+//timelnie
+.aesop-timeline {
+
+    ol {
+
+        &:after {
+            content:'';
+            background-image: url('../img/timeline-break.png');
+            background-repeat: repeat-x;
+            position: absolute;
+            height:10px;
+            width:100%;
+            left:0;
+            right:0;
+            bottom:-5px;
+        }
+    }
+}
+
 .aesop-error {
     background: #d9534f;
     color:white;

public/includes/components/component-timeline.php

@@ -55,35 +55,30 @@ function __construct(){
 		// add a body class if timeline is active
 		add_filter('body_class',		array($this,'body_class'));
 
-		// draw the timeline div, conditionally depending on version
-		if (AI_CORE_VERSION < '1.0.5') {
-			_deprecated_function( 'aesop_inside_body_top', '1.0.5', 'ase_theme_body_inside_top' );
-		} else {
-			add_action('ase_theme_body_inside_top', array($this,'draw_timeline')); // post 1.0.5
-		}
-
 	}
 
 	function aesop_timeline_loader(){
 
-		// maintain backwards compatibility
-		$offset = 0;
-
 		// allow theme developers to determine the offset amount
-		$timelineOffset = apply_filters('aesop_timeline_scroll_offset', $offset );
+		$timelineOffset = apply_filters('aesop_timeline_scroll_offset', 0 );
 
 		// filterable content class
-		$contentClass = apply_filters('aesop_timeline_scroll_container', '.aesop-entry-content');
+		$contentClass = apply_filters('aesop_timeline_scroll_container', 'article');
+
+		// filterable target class
+		$appendTo    = apply_filters('aesop_timeline_scroll_nav', '.aesop-timeline');
 
 		?>
 			<!-- Aesop Timeline -->
 			<script>
 			jQuery(document).ready(function(){
 
+				jQuery('body').append('<div class="aesop-timeline"></div>');
+
 				jQuery('<?php echo $contentClass;?>').scrollNav({
 				    sections: '.aesop-timeline-stop',
 				    arrowKeys: true,
-				    insertTarget: '.aesop-timeline',
+				    insertTarget: '<?php echo $appendTo;?>',
 				    insertLocation: 'appendTo',
 				    showTopLink: false,
 				    showHeadline: false,
@@ -102,11 +97,6 @@ function aesop_timeline_loader(){
 		<?php 
 	}
 
-	function draw_timeline(){
-
-		?><div class="aesop-timeline"></div><?php
-
-	}
 
 	function body_class($classes) {