/*!
 *
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.

	.                                      '||            .
  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
		.. |      ||               ||
		 ''      ''''             ''''      A Typographic Starter Kit

  URL ........... http://typeplate.com
  VERSION ....... 1.1.2
  Github ........ https://github.com/typeplate/typeplate.github.io
  AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
  LICENSE ....... Creative Commmons Attribution 3.0
  LICENSE URL ... http://creativecommons.org/licenses/by/3.0

 .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 *
 */



// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Variables
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //


// $Variable $BaseType
// -------------------------------------//
//the serif boolean var can be redeclared from another stylesheet. However
//the var must be placed after your @import "typeplate.scss";
$serif-boolean: true !default;

$font-family: if($serif-boolean, serif, sans-serif) !default; // Non-font-face font-stack

$font-weight: normal !default;
$line-height: 1.65 !default;
$font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
$font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value
$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family
$measure: $font-base * $line-height;


// $Variable $Paragraphs
// -------------------------------------//

// Text Indentation Value
$indent-val: 1.5em !default;

// Paragraph Styling Boolean
// 'false' means no vertical whitespace
// between subsequent paragraphs.
$paragraph-vertical-whitespace: false !default;


// $Variable $Small-Print
// -------------------------------------//

$small-print-size: 65% !default;


// $Variable $Base-Color
// -------------------------------------//

$body-copy-color: #444 !default;
$heading-color: #222 !default;


// $Variable $Ampersand
// -------------------------------------//

$amp-fontface-name: Ampersand !default;
$amp-fontface-source: local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua') !default;
$amp-fontface-fallback: local('Georgia') !default;

// Allows for our ampersand element to have differing
// font-family from the ampersand unicode font-family.
$amp-font-family: Verdana, sans-serif !default;


// $Variable $Icon-Font-Helper
// -------------------------------------//
// ex.1) $icon-fonts: (icon-name);
// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
$icon-fonts: null !default;


// $Variable $Typescale
// -------------------------------------//

$tera: 117 !default; // 117 = 18 × 6.5
$giga: 90 !default; // 90 = 18 × 5
$mega: 72 !default; // 72 = 18 × 4
$alpha: 60 !default; // 60 = 18 × 3.3333
$beta: 48 !default; // 48 = 18 × 2.6667
$gamma: 36 !default; // 36 = 18 × 2
$delta: 24 !default; // 24 = 18 × 1.3333
$epsilon: 21 !default; // 21 = 18 × 1.1667
$zeta: 18 !default; // 18 = 18 × 1


// $Variable $Typescale-Unit
// -------------------------------------//

$type-scale-unit-value: rem !default;


// $Variable $Pull-Quotes
// -------------------------------------//

$pull-quote-fontsize: 4em !default;
$pull-quote-opacity: 0.5 !default;
$pull-quote-color: #dc976e !default;


// $Variable $Citation
// -------------------------------------//

$cite-display: block !default;
$cite-text-align: right !default;
$cite-font-size: inherit !default;


// $Variable $Small-Caps
// -------------------------------------//

$small-caps-color: gray !default;
$small-caps-weight: 600 !default;


// $Variable $DropCap
// -------------------------------------//

$dropcap-float-position: left !default;
$dropcap-font-size: 4em !default;
$dropcap-font-family: inherit !default;
$dropcap-txt-indent: 0 !default;
$dropcap-margin: inherit !default;
$dropcap-padding: inherit !default;
$dropcap-color: inherit !default;
$dropcap-line-height: 1 !default;
$dropcap-bg: transparent !default;


// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Fontfaces
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //


// $Fontface $Unicode-Range-Ampersand
// -------------------------------------//

@font-face {
	font-family: '#{$amp-fontface-name}';
	src: $amp-fontface-source;
	unicode-range: U+0026;
}

// Ampersand fallback font for unicode range
@font-face {
	font-family: '#{$amp-fontface-name}';
	src: $amp-fontface-fallback;
	unicode-range: U+270C;
}


// $Fontface $Icon-Font-Helper
// -------------------------------------//
// ICON FONT HELPER
// In order to use this hot rod you must have the following…
// 1. Compass.
// 2. Create a 'fonts' directory in the root of your project.
// 3. Specify within your 'config.rb' file the following line…
//
// fonts_dir = "name-of-your-fonts-directory" ( i.e. fonts_dir = "fonts" )
//
// Example usage:
// ex.1) $icon-fonts: (icon-name);
// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
//
// Additional Notes:
// @include font-face() is a Compass helper function
// based on this gist by Chris Van Patten
// https://gist.github.com/4469518

@if ($icon-fonts != null) {
	@each $font in $icon-fonts {
		@include font-face( $font,
			font-files(
				'#{$font}/#{$font}.woff',
				'#{$font}/#{$font}.ttf',
				'#{$font}/#{$font}.svg', svg
			),
			'#{$font}/#{$font}.eot'
			)
	}
}


// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Functions
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //


// $Function $Context Calculator
// -------------------------------------//
// divide a given font-size by base font-size & return a relative value

@function context-calc($scale, $base, $value) {
	$calc: $scale / $base;
	@return #{$calc}#{$value};
}


// $Function $Measure-Margin
// -------------------------------------//
// divide 1 unit of measure by given font-size & return a relative em value

@function measure-margin($scale, $measure, $value) {
	$calc: $measure / $scale;
	@return #{$calc}#{$value};
}


// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Mixins / $Placeholders
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //


// $Mixin $Type-Scale
// -------------------------------------//
// provides a pixel fallback if you decide
// to use 'rems' as a unit over ems.

@mixin type-scale($scale, $base, $value, $measure:"") {
	// If 'rem' is used as a $value then provide a px fallback.
	@if $value == rem {
		font-size: #{$scale}#{px};
	}
	font-size: context-calc($scale, $base, $value);
	@if $measure != "" {
		margin-bottom: measure-margin($scale, $measure, $value);
	}
}

// $Mixin $Hypens
// -------------------------------------//
//http://trentwalton.com/2011/09/07/css-hyphenation

@mixin css-hyphens($val) {
	// Accepted values: [ none | manual | auto ]
	-webkit-hyphens: $val; // Safari 5.1 thru 6, iOS 4.2 thru 6
	-moz-hyphens: $val; // Firefox 16 thru 20
	-ms-hyphens: $val; // IE10
	-o-hyphens: $val; // PRESTO...haha LOL
	hyphens: $val; // W3C standard
}


// $Mixin $Smallcaps
// -------------------------------------//
// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
// ISSUE #1 : https://github.com/typeplate/typeplate.github.com/issues/1

@mixin smallcaps($color, $font-weight) {
	// depends on the font family.
	// some font-families don't support small caps
	// or don't provide them with their web font.
	font-variant: small-caps;
	font-weight: $font-weight;
	text-transform: lowercase;
	color: $color;
}


// $Mixin $Fontsize-Adjust
// -------------------------------------//
// correct x-height for fallback fonts: requires secret formula
// yet to be discovered. This is still wacky for support. Use
// wisely grasshopper.

@mixin font-size-adjust($adjust-value) {
	// firefox 17+ only (as of Feb. 2013)
	font-size-adjust: $adjust-value;
}


// $Mixin $Ampersand
// -------------------------------------//

@mixin ampersand($amp-font-family...) {
	font-family: $amp-font-family;
}

%ampersand-placeholder {
	@include ampersand($amp-fontface-name, $amp-font-family);
}

// Call your ampersand on any element you wish from another stylesheet
// using this Sass extend we've provided. For exmaple:
//
// <h6 class="ampersand">Dewey Cheat 'em & Howe</h6>
//
// .ampersand { @extend %ampersand-placeholder; }


// $Mixin $Blockquote
// -------------------------------------//
// https://github.com/typeplate/typeplate.github.io/issues/95
//
// Use our pre-defined markup and add a class
// to your custom blockquote element.
// For example:
//
// .blockquote { @include blockquote("-"); }
//
// "-" is your citation flourish. For example:
//
// I always say important things because I'm so smart
//                           - Super Important Person

// Citation Mixin for Custom Styling
@mixin cite-style($display, $text-align, $font-size) {
	display: $display;
	font-size: $font-size;
	text-align: $text-align;
}

%cite {
	@include cite-style($cite-display, $cite-text-align, $cite-font-size);
}

@mixin blockquote($citation-flourish) {
	p {
		&:last-of-type {
			margin-bottom: -#{$line-height/2}em;
		}
	}
	+ figcaption {
		@extend %cite;
		&:before {
			content: $citation-flourish;
		}
	}
}


// $Mixin $Pull-Quotes
// -------------------------------------//

@mixin pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color) {
	position: relative;
	padding: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
	&:before,
	&:after {
		height: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
		opacity: $pull-quote-opacity;
		position: absolute;
		font-size: $pull-quote-fontsize;
		color: $pull-quote-color;
	}
	&:before {
		content: '“';
		top:  0;
		left: 0;
	}
	&:after {
		content: '”';
		bottom: 0;
		right: 0;
	}
}


// $Placeholder $Wordwrap
// -------------------------------------//
// Silent Sass Classes - A.K.A Placeholders
//
// normal: Indicates that lines may only break at normal word break points.
// break-word : Indicates that normally unbreakable words may be broken at
// arbitrary points if there are no otherwise acceptable break points in the line.

%breakword {
	word-wrap: break-word;
}

%normal-wrap {
	word-wrap: normal;
}

%inherit-wrap {
	word-wrap: auto;
}


// $Mixin $Dropcaps
// -------------------------------------//
/**
 * Dropcap Sass @include
 * Use the following Sass @include with any selector you feel necessary.
 *
	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
 *
 * Extend this object into your custom stylesheet. Let the variables do the work.
 *
 */

// Use @include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
// to pass the following arguments below. Feel free to pass in custom
// values for the variables we've provided.
//
// Make sure you add the class “drop-cap” to your markup in order to operate.
@mixin dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg) {
	&:first-letter {
		float: $dropcap-float-position;
		margin: $dropcap-margin;
		padding: $dropcap-padding;
		font-size: $dropcap-font-size;
		font-family: $dropcap-font-family;
		line-height: $dropcap-line-height;
		text-indent: $dropcap-txt-indent;
		background: $dropcap-bg;
		color: $dropcap-color;
	}
}


// $Mixin $Codeblocks
// -------------------------------------//

@mixin white-space($wrap-space) {
	@if $wrap-space == 'pre-wrap' {
		white-space: #{-moz-}$wrap-space; // Firefox 1.0-2.0
		white-space: $wrap-space;       // current browsers
	} @else {
		white-space: $wrap-space;
	}
}


// $Mixin $Definition-Lists
// -------------------------------------//
// lining
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
//
// dictionary-style
// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css

@mixin definition-list-style($style) {
	// lining style
	@if $style == lining {
		dt,
		dd {
			display: inline;
			margin: 0;
		}
		dt,
		dd {
			& + dt {
				&:before {
					content: "\A";
					white-space: pre;
				}
			}
		}
		dd {
			& + dd {
				&:before {
					content: ", ";
				}
			}
			&:before {
					content: ": ";
					margin-left: -0.2rem; //removes extra space between the dt and the colon
			}
		}
	}
	// dictionary-style
	@if $style == dictionary-style {
		dt {
			display: inline;
			counter-reset: definitions;
			& + dt {
				&:before {
					content: ", ";
					margin-left: -0.2rem; // removes extra space between the dt and the comma
				}
			}
		}
		dd {
			display: block;
			counter-increment: definitions;
			&:before {
				content: counter(definitions, decimal) ". ";
			}
		}
	}
}



// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
//
// $Typeplate Styles
//
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //


// $Styles $Globals
// -------------------------------------//

html {
	$_font_metrics: '#{$font-size}%/#{$line-height}';
	@if $custom-font-family {
		font: $font-weight unquote($_font_metrics) $custom-font-family, $font-family;
	} @else {
		font: $font-weight unquote($_font_metrics) $font-family;
	}
}

body {
	// Ala Trent Walton
	@include css-hyphens(auto);

	// normal: Indicates that lines may only break at normal word break points.
	// break-word : Indicates that normally unbreakable words may be broken at ...
	// arbitrary points if there are no otherwise acceptable break points in the line.
	@extend %breakword;
	color: $body-copy-color;
}

small {
	font-size: $small-print-size;
}


// $Styles $Headings
// -------------------------------------//

// Extend included classes on any element of your
// choosing for adjusting type based on the scale
// provided.

// For example:

// <h6 class="giga">Awesome Headline</h6>
// <p class="tera">a story about a dude</p>

// Our Type Scale is as follows with px fallbacks
// for IE 6-8 as they do not understand REM units.
//
// 18, 21, 24, 36, 48, 60, 72, 90, 117

// styles for all headings, in the style of @csswizardry
%hN {
	text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning
	line-height: 1; // this fixes huge spaces when a heading wraps onto two lines
	margin-top: 0;
}

// Multi-dimensional array, where:
// the first value is the name of the class
// and the second value is the variable for the size
$sizes: tera $tera, giga $giga, mega $mega, alpha $alpha, beta $beta, gamma $gamma, delta $delta, epsilon $epsilon, zeta $zeta;

// Sass loop to associate h1-h6 tags with their appropriate greek
// heading based on a modular scale.
// for each size in the scale, create a class
@each $size in $sizes {
	.#{nth($size, 1)} {
		// @debug #{$measure};
		// @debug #{nth($size, 2)};
		// @debug #{$measure / nth($size, 2)};
		@include type-scale(nth($size, 2), $font-base, '#{$type-scale-unit-value}', $measure);
	}
}

// associate h1-h6 tags with their appropriate greek heading
h1 {
	@extend .alpha;
	@extend %hN;
}

h2 {
	@extend .beta;
	@extend %hN;
}

h3 {
	@extend .gamma;
	@extend %hN;
}

h4 {
	@extend .delta;
	@extend %hN;
}

h5 {
	@extend .epsilon;
	@extend %hN;
}

h6 {
	@extend .zeta;
	@extend %hN;
}


// $Styles $Parargraphs
// -------------------------------------//

p {
	margin: auto auto $indent-val;

	// Conditonal Check For Paragraph Styling
	@if $paragraph-vertical-whitespace == false {
		& + p {
			//siblings indentation
			text-indent: $indent-val;
			margin-top: -$indent-val;
		}
	}
}


// $Styles $Hyphenation
// -------------------------------------//
// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation

abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
	@include css-hyphens(auto);
}


// $Styles $Codeblocks
// -------------------------------------//

pre code {
	@extend %normal-wrap;
	@include white-space(pre-wrap);
}

pre {
	@include white-space(pre);
}

code {
	@include white-space(pre);
	font-family: monospace;
}


// $Styles $Smallcaps
// -------------------------------------//
/**
 * Abbreviations Markup
 *
	<abbr title="hyper text markup language">HMTL</abbr>
 *
 * Extend this object into your markup.
 *
 */
abbr {
	@include smallcaps($small-caps-color, $small-caps-weight);
	&[title]:hover {
		cursor: help;
	}
}


// $Styles $Headings-Color
// -------------------------------------//

h1,
h2,
h3,
h4,
h5,
h6 {
	color: $heading-color;
}


// $Styles $Dropcap
// -------------------------------------//

// Combats our sibling paragraphs syling and indentation
// As not to ruin our beautiful drop caps.
p + .drop-cap {
	text-indent: 0;
	margin-top: 0;
}

.drop-cap {
	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
}


// $Styles $Definition-Lists
// -------------------------------------//
/**
 * Lining Definition Style Markup
 *
	<dl class="lining">
		<dt><b></b></dt>
		<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.lining {
	@include definition-list-style(lining);
}

/**
 * Dictionary Definition Style Markup
 *
	<dl class="dictionary-style">
		<dt><b></b></dt>
			<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.dictionary-style {
	@include definition-list-style(dictionary-style);
}


// $Styles $Blockquote-Markup
// -------------------------------------//
/**
 * Blockquote Markup
 *
		<figure>
			<blockquote cite="">
				<p></p>
			</blockquote>
			<figcaption>
				<cite>
					<small><a href=""></a></small>
				</cite>
			</figcaption>
		</figure>
 *
 * Extend this object into your markup.
 *
 */


// $Styles $Pull-Quotes
// -------------------------------------//
// http://24ways.org/2005/swooshy-curly-quotes-without-images
//
// http://todomvc.com - Thanks sindresorhus!
// https://github.com/typeplate/typeplate.github.io/issues/49

/**
 * Pull Quotes Markup
 *
	<aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	</aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */

.pull-quote {
	 @include pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color);
}


// $Styles $Figures
// -------------------------------------//
/**
 * Figures Markup
 *
	<figure>
		<figcaption>
			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
		</figcaption>
	</figure>
 *
 * Extend this object into your markup.
 *
 */


// $Styles $Footnotes
// -------------------------------------//
/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
	<article>
		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
		<footer>
			<ol class="foot-notes">
				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
			</ol>
		</footer>
	</article>
 *
 * Extend this object into your markup.
 *
 */