TimelineJS/source/less/Core/Typography.less

/* Typography.less
 * Headings, body text, lists, etc
 * ---------------------------------------------------------------------------------------- */
 
.vco-storyjs {
	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;
	}
	.vco-navigation {
		p {
			color: @color-nav-description;
		}
	}
	.vco-feature {
		h3, h4, h5, h6 {
			margin-bottom: @base-space;
		}
		p {
			color: @color-feature-description;
		}
		blockquote, blockquote p {
			color:@color-feature-title;
		}
	}
	.date, .title {
		a {
			color: @color-nav-description;
		}
	}
	.hyphenate {
		.hyphens(auto);
		word-wrap:break-word;
	}

	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;
		font-size: 36px;
		line-height: 38px;
		
		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: 20px;
		line-height: 22px;
		//font-size: 16px;
		//line-height:18px;
		small {
			font-size: 12px;
		}
	}
	h5 {
		font-size: 16px;
		line-height:18px;
		
		//font-size: 14px;
		//line-height:16px;
	}
	h6 {
		font-size: 13px;
		line-height:14px;
		text-transform: uppercase;
	}
	strong {
		font-weight:bold;
		font-style:inherit;
	}
	em {
		font-style: italic;
		font-weight: inherit;
	}
	Q {
		quotes: '„' '“';
		font-style: italic;
	}
	
	/* BLOCKQUOTES
	================================================== */
	blockquote, blockquote p {
		font-size: @base-font-large;
		line-height: @base-line-large;
		text-align:left;
		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;
	}
	
	
}

/* Right to Left
 * ---------------------------------------------------------------------------------------- */
.vco-storyjs.vco-right-to-left {
	[dir=rtl] &, &[dir=rtl] {
		direction: ltr;
	}

	h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong,
	sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,   {
		direction: rtl;
	}
}