diff --git a/source/less/GFX.less b/source/less/GFX.less
new file mode 100644
index 0000000..edd4e41
--- /dev/null
+++ b/source/less/GFX.less
@@ -0,0 +1,148 @@
+/*
+	GFX
+	Icons etc
+----------------------------------------------------------------- */
+
+/*	Feature Navigation
+----------------------------------------------------------------- */
+.icon-previous() {
+	height:24px;
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -160px 0; width: 24px; height: 24px;
+	overflow:hidden;
+}
+
+.icon-next() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -184px 0; width: 24px; height: 24px;
+	height:24px;
+	overflow:hidden;
+	
+}
+/*	TimeNav Navigation
+----------------------------------------------------------------- */
+.icon-zoom-in() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -256px 0; width: 24px; height: 24px;
+}
+.icon-zoom-out() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -280px 0; width: 24px; height: 24px;
+}
+.icon-back-home() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -328px 0; width: 24px; height: 24px;
+}
+
+/*	Time Flag
+----------------------------------------------------------------- */
+.time-flag() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: 0 0; width:153px; height: 53px;
+}
+.time-flag-active() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: 0 -53px; width:153px; height: 53px;
+}
+
+/*	Thumbnail Icons
+----------------------------------------------------------------- */
+.icon-map() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -208px -24px;
+}
+.icon-mappin() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -208px -48px;
+}
+.icon-website() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -232px -24px; 
+}
+.icon-document() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -256px -48px;
+}
+.icon-quote() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -232px -48px;
+}
+.icon-plaintext() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -280px -48px;
+}
+.icon-twitter() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -256px -24px;
+}
+.icon-video() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -328px -24px;
+}
+.icon-audio() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -304px -24px;
+}
+.icon-photo() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -280px -24px; 
+}
+.icon-wikipedia() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -184px -48px; 
+}
+
+/*	Thumbnail Icons (Extra)
+----------------------------------------------------------------- */
+.icon-vimeo() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -328px -48px;
+}
+.icon-youtube() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -328px -72px; 
+}
+
+/*	Current Time Indicator
+----------------------------------------------------------------- */
+.icon-currenttime() {
+	.base-sprite();
+	background-repeat:no-repeat;
+	background-position: -160px -48px;
+	width:24px;
+	height:8px;
+}
+
+/*	Time Tics
+----------------------------------------------------------------- */
+.background-time-tic() {
+  	background: @color-background url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAMAAAA8JaR5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBrwkQIABAAHIABkHeR3aAAAAAElFTkSuQmCC);
+}
+
+.background-time-interval() {
+	//background: @color-base url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);
+	//background-repeat: no-repeat;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);
+	
+}
+
diff --git a/source/less/Mixins.less b/source/less/Mixins.less
new file mode 100644
index 0000000..0aa40c3
--- /dev/null
+++ b/source/less/Mixins.less
@@ -0,0 +1,212 @@
+/* Mixins.less
+ * Snippets of reusable CSS to develop faster and keep code readable
+ * ----------------------------------------------------------------- */
+
+
+// Clearfix for clearing floats like a boss h5bp.com/q
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    zoom: 1;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Center-align a block level element
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Sizing shortcuts
+.size(@height: 5px, @width: 5px) {
+  height: @height;
+  width: @width;
+}
+.square(@size: 5px) {
+  .size(@size, @size);
+}
+
+// Input placeholder text
+.placeholder(@color: @grayLight) {
+  :-moz-placeholder {
+    color: @color;
+  }
+  ::-webkit-input-placeholder {
+    color: @color;
+  }
+}
+
+// Font Stacks
+#font {
+	.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+		font-size: @size;
+		font-weight: @weight;
+		line-height: @lineHeight;
+	}
+	.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+		font-family: @font-sansserif;
+		font-size: @size;
+		font-weight: @weight;
+		line-height: @lineHeight;
+	}
+	.font-body(@weight: normal, @size: 14px, @lineHeight: 20px) {
+		font-family: @fontBody, Helvetica, Arial, sans-serif;
+		font-size: @size;
+		font-weight: @weight;
+ 		line-height: @lineHeight;
+	}
+	.font-header(@weight: normal, @size: 14px, @lineHeight: 20px) {
+		font-family: @fontHeader;
+		font-size: @size;
+		font-weight: @weight;
+		line-height: @lineHeight;
+	}
+	.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+		font-family: @font-serif;
+		font-size: @size;
+		font-weight: @weight;
+		line-height: @lineHeight;
+	}
+	.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
+		font-family: "Monaco", Courier New, monospace;
+		font-size: @size;
+		font-weight: @weight;
+		line-height: @lineHeight;
+	}
+
+	.navigation(@weight: normal, @size: 14px, @lineHeight: 20px) {
+		font-family: @font-sansserif;
+	    font-size: @size;
+	    font-weight: @weight;
+	    line-height: @lineHeight;
+	  }
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+  -webkit-border-radius: @radius;
+     -moz-border-radius: @radius;
+          border-radius: @radius;
+}
+
+// Drop shadows
+
+
+// Transitions
+.transition(@transition) {
+     -webkit-transition: @transition;
+        -moz-transition: @transition;
+         -ms-transition: @transition;
+          -o-transition: @transition;
+             transition: @transition;
+}
+
+// Background clipping
+.background-clip(@clip) {
+  -webkit-background-clip: @clip;
+     -moz-background-clip: @clip;
+          background-clip: @clip;
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: 20px) {
+  -webkit-column-count: @columnCount;
+     -moz-column-count: @columnCount;
+          column-count: @columnCount;
+  -webkit-column-gap: @columnGap;
+     -moz-column-gap: @columnGap;
+          column-gap: @columnGap;
+}
+
+// Make any element resizable for prototyping
+.resizable(@direction: both) {
+  resize: @direction; // Options are horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
+// Add an alphatransparency value to any background or border color (via Elyse Holladay)
+#translucent {
+  .background(@color: @white, @alpha: 1) {
+    background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+  }
+  .border(@color: @white, @alpha: 1) {
+    border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+    background-clip: padding-box;
+  }
+}
+
+// Gradient Bar Colors for buttons and allerts
+.gradientBar(@primaryColor, @secondaryColor) {
+  #gradient > .vertical(@primaryColor, @secondaryColor);
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
+  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
+// Gradients
+#gradient {
+  .horizontal (@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
+  }
+  .vertical (@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+    background-image: linear-gradient(top, @startColor, @endColor); // The standard
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+  }
+  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+    background-color: @endColor;
+    background-repeat: repeat-x;
+    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
+    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
+    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
+    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
+  }
+  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
+    background-color: @endColor;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
+    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+}
+
+// Reset filters for IE
+.reset-filter() {
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+  filter: e(%("alpha(opacity=%d)", @opacity));
+  -khtml-opacity: @opacity / 100;
+    -moz-opacity: @opacity / 100;
+         opacity: @opacity / 100;
+}
\ No newline at end of file
diff --git a/source/less/Typography.less b/source/less/Typography.less
new file mode 100644
index 0000000..78eaa4e
--- /dev/null
+++ b/source/less/Typography.less
@@ -0,0 +1,170 @@
+/* Typography.less
+ * Headings, body text, lists, etc
+ * ---------------------------------------------------------------------------------------- */
+
+.vmm-timeline {
+	font-size: @base-font;
+	font-weight: normal;
+	line-height: @base-line;
+	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+	-webkit-text-size-adjust: 100%;
+	
+	p {
+		font-size: @base-font;
+		font-weight: normal;
+		line-height: @base-line;
+		margin-bottom: @base-line;
+		color: @color-feature-description;
+		
+		small {
+			font-size: @base-font - 3;
+			line-height: @base-line - 3;
+		}
+	}
+	p:first-child { 
+		margin-top:@base-line;
+	}
+	.navigation {
+		p {
+			color: @color-nav-description;
+		}
+	}
+	.feature {
+		h3, h4, h5, h6 {
+			margin-bottom: @base-space;
+		}
+		p {
+			color: @color-feature-description;
+		}
+	}
+	.date, .title {
+		a {
+			color: @color-nav-description;
+		}
+
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-weight: normal;
+		color: @color-feature-title;
+		text-transform: none;
+		a {
+			color: @color-nav-description;
+		}
+		small {
+			color: @color-nav-title;
+		}
+	}
+	h1.date, h2.date, h3.date, h4.date, h5.date, h6.date {
+		font-weight: bold;
+	}
+	h2.start {
+		font-size: 42px;
+		line-height: 44px;
+		margin-bottom: @base-space;
+	}
+	h1 {
+		margin-bottom: @base-space;
+		font-size: 32px;
+		line-height: 34px;
+		small {
+			font-size: 18px;
+		}
+	}
+	h2 {
+		margin-bottom: @base-space;
+		font-size: 28px;
+		line-height: 30px;
+
+		small {
+			font-size: 14px;
+			line-height: 16px;
+			
+			//margin-left:5px;
+		}
+	}
+	h2.date {
+		font-size: 16px;
+		line-height:18px;
+		margin-bottom: @base-space/4;
+		color:@color-feature-date;
+		
+		//margin-bottom: @base-space;
+	}
+	h3, h4, h5, h6 {
+		line-height: @base-line * 2;
+		.active {
+			color: @color-theme;
+		}
+	}
+	h3 {
+		font-size: 28px;
+		line-height: 30px;
+		//font-size: 24px;
+		//line-height:26px;
+		small {
+			font-size: 14px;
+		}
+	}
+	h4 {
+		font-size: 16px;
+		line-height:18px;
+		small {
+			font-size: 12px;
+		}
+	}
+	h5 {
+		font-size: 14px;
+		line-height:16px;
+	}
+	h6 {
+		font-size: 13px;
+		line-height:14px;
+		text-transform: uppercase;
+	}
+	strong {
+		font-weight:bold;
+	}
+	
+	
+	Q {
+		quotes: '„' '“';
+		font-style: italic;
+	}
+	
+	/* BLOCKQUOTES
+	================================================== */
+	
+	blockquote {
+		font-size: 28px;
+		text-align:left;
+		line-height: 36px;
+		margin-bottom: 6px;
+		padding-top: 10px;
+		background-color:@white;
+		color:@color-feature-title;
+	}
+	
+	/* Caption and Credits
+	================================================== */
+	
+	.credit {
+		color: @color-credit;
+		text-align: right;
+		font-size: 10px;
+		line-height: 10px;
+		display: block;
+		margin: 0 auto;
+		clear:both;
+	}
+	.caption {
+		text-align:left;
+		margin-top:5px;
+		color: @color-caption;
+		font-size: 11px;
+		line-height: 14px;
+		clear:both;
+	}
+	
+	
+}
\ No newline at end of file
diff --git a/source/less/Variables.less b/source/less/Variables.less
new file mode 100644
index 0000000..24d6949
--- /dev/null
+++ b/source/less/Variables.less
@@ -0,0 +1,89 @@
+/*	VARIABLES
+----------------------------------------------------- */
+
+/* COLOR SCHEME
+================================================== */
+@color-theme-dark:				darken(@color-theme, 15);
+@color-theme-complement:		spin(@color-theme, 180);
+@color-theme-complement-dark:	darken(@color-theme-complement, 15);
+
+@color-theme-split1:			spin(@color-theme, -158);
+@color-theme-split2:			spin(@color-theme, 158);
+
+@color-theme-triad1:			spin(@color-theme, -135);
+@color-theme-triad2:			spin(@color-theme, 135);
+
+@color-theme-tetra1:			spin(@color-theme, -90);
+@color-theme-tetra2:			spin(@color-theme, 90);
+
+@color-theme-analog1:			spin(@color-theme, -22);
+@color-theme-analog2:			spin(@color-theme, 22);
+
+@color-background:				@color-base;
+
+@white:             			@color-base;
+
+/* NAVIGATION COLORS
+================================================== */
+@color-nav-date: 				#AAA; // 33%
+@color-nav-description: 		@color-dark-fourth; // 40%
+@color-nav-title: 				@color-dark-fourth;
+
+@color-navigation-time: 		@color-dark-third; // 60%
+@color-navigation-major-time: 	@color-dark-second; // 80%
+@color-navigation-time-strong: 	@color-dark; // 100%
+
+@era-background: 				#E2E2E2; //#E3E3E3; // 11%
+@era-line:						@color-line;
+@era-text:						@color-feature-date;
+
+/* FEATURE COLORS
+================================================== */
+@color-feature-date: 			@color-dark-fourth;
+@color-feature-description: 	@color-dark-third;
+@color-feature-title: 			@color-dark;
+
+
+@color-caption:					@color-dark-third;
+@color-credit:					@color-dark-fourth;
+
+/* BASE SIZES
+================================================== */
+@base-font: 					15px;
+@base-line: 					20px;
+@base-space: 					15px;
+@base-font-small: 				11px;
+@base-thumb: 					24px;
+
+/* FEATURE SIZES
+================================================== */
+@feature-content-text: 			200px;
+@feature-content-width: 		720px;
+@feature-content-height: 		400px;
+@feature-nav-width: 			100px;
+@feature-nav-height: 			200px;
+@feature-nav-icon-wh: 			24px;
+
+/* NAVIGATION SIZES
+================================================== */
+@navigation-height: 			200px;
+@navigation-time-height: 		50px;
+@navigation-content-height: 	@navigation-height - @navigation-time-height;
+@navigation-marker-height:		6px;
+
+/* MIXINS
+================================================== */
+.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) {
+  -webkit-box-shadow: @shadow;
+     -moz-box-shadow: @shadow;
+          box-shadow: @shadow;
+}
+.media-shadow(@shadow: 0 1px 3px 0px rgba(0,0,0,0.35)) {
+	-webkit-box-shadow: @shadow;
+	   -moz-box-shadow: @shadow;
+	        box-shadow: @shadow;
+	border: 1px solid;
+	border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line;
+	//border-color: @color-line @color-line-hover @color-line-hover @color-line;
+}
+