﻿/* Typographic scale
	ref. A More Modern Scale for Web Typography
	<http://typecast.com/blog/a-more-modern-scale-for-web-typography>
---------------------------------------------- */
/*.container > header h1, .h1 {
	max-width: 100%;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
	font-size-adjust: 0.52;
	letter-spacing: -0.0625em;
}*/

.container {
	font-size: 1em; /* equivalent to 16px */
	line-height: 1.25; /* equivalent to 20px */
}

h1, .h1 {
	font-size: 2em; /* 2x body copy size = 32px */
	letter-spacing: -1px; /* tighten up 'display type' headers on smaller displays */
	line-height: 1.25; /* 45px / 36px */
	margin-top: 0.9375em; /* (20px / 32px) * 1.5 */
	margin-bottom: 0.3125em; /* (20px / 32px) * 0.5 */
	text-shadow: 0 0.031em 0 rgba(255, 255, 255, 0.75);
}

h2, .h2 {
	font-size: 1.625em; /* 1.625x body copy size = 26px */
	line-height: 1.15384615; /* 30px / 26px */
	margin-top: 1.15384616em; /* (20px / 26px) * 1.5 */
	margin-bottom: 0.38461539em; /* (20px / 26px) * 0.5 */
	text-shadow: 0 0.038em 0 rgba(255, 255, 255, 0.75);
}

h3, .h3 {
	font-size: 1.375em; /* 1.375x body copy size = 22px */
	line-height: 1.13636364; /* 25px / 22px */
	margin-top: 1.36363637em; /* (20px / 22px) * 1.5 */
	margin-bottom: 0.45454546em; /* (20px / 22px) * 0.5 */
	text-shadow: 0 0.045em 0 rgba(255, 255, 255, 0.75);
}

h4, .h4 {
	/*font-family: "DIN Next Medium", Helvetica, Arial, sans-serif;*/
	font-size: 1.125em; /* 1.125x body copy size = 18px */
	/*font-weight: lighter;*/
	/*letter-spacing: 0.05em;*/ /* Add some letter space to make up for the reduced weight */
	line-height: 1.11111111;
	margin-top: 1.66666667em; /* (20px / 18px) * 1.5 */
	margin-bottom: 0.55555556em; /* (20px / 18px) * 0.5 */
	text-shadow: 0 0.056em 0 rgba(255, 255, 255, 0.75);
}

h5, .h5 {
	font-size: 1em; /* 1x body copy size = 16px */
	line-height: 1.11111111;
	margin-top: 1.875em; /* (20px / 16px) * 1.5 */
	margin-bottom: 0.625em; /* (20px / 16px) * 0.5 */
	text-shadow: 0 0.0625em 0 rgba(255, 255, 255, 0.75);
}

p {
	padding-top: 0;
	margin: 0 auto 1.375em;
}

@media (min-width: 43.75em) {
	.container {
		font-size: 1em; /* equivalent to 16px */
		line-height: 1.375; /* equivalent to 22px */
	}

	h1, .h1 {
		font-size: 2.5em; /* 2.5x body copy size = 40px */
		letter-spacing: normal;
		line-height: 1.125; /* 45px / 40px */
		margin-top: 0.73333334em; /* (22px / 45px) * 1.5 */
		margin-bottom: 0.24444445em; /* (22px / 45px) * 0.5 */
		/*max-width: 14.4em;*/
		margin-left: auto;
		margin-right: auto;
	}

	h2, .h2 {
		font-size: 2em; /* 2x body copy size = 32px */
		line-height: 1.25;
		margin-top: 1.03125em; /* (22px / 32px) * 1.5 */
		margin-bottom: 0.34375em; /* (22px / 32px) * 0.5 */
		/*max-width: 18em;*/
		margin-left: auto;
		margin-right: auto;
	}

	h3, .h3 {
		font-size: 1.5em; /* 1.5x body copy size = 24px */
		line-height: 1.25;
		margin-top: 1.37500001em; /* (22px / 24px) * 1.5 */
		margin-bottom: 0.45833334em; /* (22px / 24px) * 0.5 */
		/*max-width: 26.18182em;*/
		margin-left: auto;
		margin-right: auto;
	}

	h4, .h4 {
		line-height: 1.22222222; /* (22px / 18px */
		margin-top: 1.83333333em; /* (22px / 18px) * 1.5 */
		margin-bottom: 0.61111111em; /* (22px / 18px) * 0.5 */
		/*max-width: 32em;*/
		margin-left: auto;
		margin-right: auto;
	}

	p {
		/*max-width: 36em;*/
	}

	blockquote {
		font-size: 1.5em; /* 24px / 16px = */
		line-height: 1.45833333; /* 35px / 24px */
		width: 50%;
		/*max-width: 11.6666667em;*/ /* 17.5em (or half the max paragraph width) / 1.5 = 11.6666667 */
	}

	blockquote.left {
		float: left;
		margin-top: 0.68750001em; /* ((22px / 24px) * 1.5): 1.37500001 - ((22px / 24px) * .75): 0.6875 - compensate for no margin collapse */
		margin-bottom: 0.45833334em; /* (22px / 24px) * 0.5 */
		margin-right: 0.5em;
		margin-left: -1em;
		padding-left: 0.5em;
	}

	blockquote.right {
		float: right;
		margin-top: 0.68750001em; /* ((22px / 24px) * 1.5) / 2 - compensate for no margin collapse with paragraphy above */
		margin-bottom: 0.45833334em; /* (22px / 24px) * 0.5 */
		margin-left: 0.5em;
		margin-right: -1em;
		padding-right: 1em;
	}
}

@media (min-width: 56.25em) {
	h1, .h1 {
		font-size: 3em; /* 3x body copy size = 48px */
		letter-spacing: normal;
		line-height: 1.05; /* keep to a multiple of the 20px line height and something more appropriate for display headings */
		margin-top: 0.6875em; /* (22px / 48px) * 1.5 */
		margin-bottom: 0.22916667em; /* (22px / 48px) * 0.5 */
		/*max-width: 12.66667em;*/
		margin-left: auto;
		margin-right: auto;
	}

	h2, .h2 {
		font-size: 2.25em; /* 2.25x body copy size = 36px */
		line-height: 1.25;
		margin-top: 1.03125em; /* (22px / 32px) * 1.5 */
		margin-bottom: 0.34375em; /* (22px / 32px) * 0.5 */
		/*max-width: 16.88889em;*/
		margin-left: auto;
		margin-right: auto;
	}

	h3, .h3 {
		font-size: 1.75em; /* 1.75x body copy size = 28px */
		line-height: 1.25;
		margin-top: 1.37500001em; /* (22px / 24px) * 1.5 */
		margin-bottom: 0.45833334em; /* (22px / 24px) * 0.5 */
		/*max-width: 21.71429em;*/
		margin-left: auto;
		margin-right: auto;
	}

	h4, .h4 {
		/*max-width: 33.77778em;*/
	}

	p {
		/*max-width: 38em;*/
	}
}

/* Blockquote styles */ 
blockquote {
	width: 85%;
	margin-top: 1em; /* (20px / 20px) */
	margin-bottom: 1em; /* (20px / 20px) * 0.5 */
	margin-right: auto;
	margin-left: auto;
	font-size: 1.25em; /* 20px / 16px */
	line-height: 1.25; /* 25px / 20px */
	font-family: "PT Serif", Georgia, "Times New Roman";
	font-weight: 300;
	font-style: normal;
	position: relative;
}
