/* Variables.less
 * Variables to customize the look and feel
 * ----------------------------------------------------- */


/* Colors
================================================== */

@color-line: #CCC;
@color-line-hover: #666;

@color-dark:#000;
@color-dark-second: #333;
@color-dark-third: #666;
@color-dark-fourth: #999;
@color-dark-fifth: #E3E3E3;
@color-dark-fifth: #E3E3E3;


/* COLOR SCHEME
================================================== */

@color-theme:					#08C;	//#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:				#FFF;
@color-background-dark:			#E9E9E9;

@white:             			#FFF;


/* CLEANUP IN PROGRESS
================================================== */

//	Navigation
@color-nav-date: #AAA; // 33%
@color-nav-description: #999; // 40%
@color-nav-title: #999;

//	Feature
@color-feature-date: #666;
@color-feature-description: #666;
@color-feature-title: #000;


@color-caption:#666;
@color-credit:#999;

// Navigation
@color-navigation-time: #666; // 60%
@color-navigation-major-time: #333; // 80%
@color-navigation-time-strong: #000; // 100%


@era-background: #E2E2E2; //#E3E3E3; // 11%
@era-line:@color-line;
@era-text:@color-feature-date;
/* Sizes
================================================== */

// Baseline grid
@base-font: 14px;
@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;