New Dark Theme

source/less/gfx-dark.less

@@ -0,0 +1,105 @@
+/* Icons.less
+ * Base64 Icons
+ * ----------------------------------------------------------------- */
+
+// Next and Back Icons
+.icon-previous() {
+  	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%;
+}
+
+.icon-next() {
+  	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%;
+}
+
+.icon-twitter() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -889px; width: 24px; height: 24px; 
+}
+
+.icon-vimeo() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -963px; width: 24px; height: 24px;
+}
+
+.icon-youtube() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -1111px; width: 24px; height: 24px; 
+}
+
+.icon-website() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -1037px; width: 24px; height: 24px;
+}
+
+.icon-soundcloud() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -659px; width: 24px; height: 24px;
+}
+
+.icon-map() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -514px; width: 26px; height: 21px;
+}
+
+.icon-map-pin() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -438px; width: 16px; height: 26px; 
+}
+
+.icon-zoom-in() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	//background-position: 0 -1433px; width: 24px; height: 24px; 
+	background-position: 0 -1507px; width: 16px; height: 16px; 
+}
+
+.icon-zoom-out() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	//background-position: 0 -1573px; width: 24px; height: 24px; 
+	background-position: 0 -1647px; width: 16px; height: 16px;
+}
+
+.icon-back-home() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -1303px; width: 16px; height: 12px;
+	//background-position: 0 -1365px; width: 24px; height: 18px;
+}
+
+.icon-microphone() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -585px; width: 12px; height: 24px; 
+}
+
+.time-flag() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 0; width: 153px; height: 60px;
+}
+
+.time-flag-active() {
+	background-image: url(timeline-dark.png);
+	background-repeat:no-repeat;
+	background-position: 0 -110px; width: 153px; height: 60px;
+}
+
+.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);
+	
+}
+

source/less/timeline-dark.less

@@ -0,0 +1,26 @@
+/* Timeline
+ * Dark
+ * Copyright 2012 Zach Wise
+ * Designed and built by Zach Wise digitalartwork.net
+ * ----------------------------------------------------- */
+
+
+// CSS Reset
+@import "reset.less";
+
+// Core variables and mixins
+@import "variables-dark.less";
+@import "mixins.less";
+@import "gfx-dark.less";
+
+// Grid system and page structure
+@import "structure.less";
+
+// Typography
+@import "type.less";
+
+// Elements
+@import "elements.less"; // UI Elements etc
+
+// Grid system and page structure
+@import "tooltip.less";

source/less/variables-dark.less

@@ -0,0 +1,100 @@
+/* Variables.less
+ * Variables to customize the look and feel
+ * ----------------------------------------------------- */
+
+
+/* Colors
+================================================== */
+@color-base:					#1A1A1A;
+@color-line: 					#333; //#414141;
+@color-line-hover: 				#666;
+
+@color-dark:					#FFF;
+@color-dark-second: 			#AAA;
+@color-dark-third: 				#AAA;
+@color-dark-fourth: 			#999;
+@color-dark-fifth: 				#E3E3E3;
+@color-dark-fifth: 				#E3E3E3;
+
+//262626
+/* COLOR SCHEME
+================================================== */
+
+@color-theme:					#0BD4E3;	//#FF3712; //#FF0000;
+@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;
+@color-background-dark:			#262626;
+
+@white:             			@color-base;
+
+
+/* CLEANUP IN PROGRESS
+================================================== */
+
+//	Navigation
+@color-nav-date: 				#AAA; // 33%
+@color-nav-description: 		@color-dark-fourth; // 40%
+@color-nav-title: 				@color-dark-fourth;
+
+//	Feature
+@color-feature-date: 			@color-dark-third;
+@color-feature-description: 	@color-dark-third;
+@color-feature-title: 			@color-dark;
+
+
+@color-caption:					@color-dark-third;
+@color-credit:					@color-dark-fourth;
+
+// Navigation
+@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;
+/* Sizes
+================================================== */
+
+// Baseline grid
+@base-font: 15px;
+@base-line: 20px;
+@base-space: 15px;
+@base-font-small: 11px;
+
+// Feature Element Sizes
+@feature-content-text: 200px;
+@feature-content-width: 720px;
+@feature-content-height: 400px;
+
+// Feature Navigation
+@feature-nav-width: 100px;
+@feature-nav-height: 200px;
+
+// Navigation
+@navigation-height: 200px;
+@navigation-time-height: 50px;
+@navigation-content-height: @navigation-height - @navigation-time-height;
+
+//	Marker
+@navigation-marker-height:6px;
+
+@font-sansserif: "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-serif: "Georgia", Times New Roman, Times, serif;
+