@charset "utf-8";
/* 
	xy.css @ https://perishablepress.com/xycss/
	xy.css : ver 1.1 @ 2011.11.11
	license: GNU General Public License
	jeff starr @ https://perishablepress.com/

	xy.css
		0. reset css
		1. typography baseline
		2. typography
		3. inline elements
		4. structural styles
		5. media queries
		6. media query transitions
		7. print media

	Columns: 60px
	Gutters: 24px

	1     2     3     4     5     6     7     8     9     10     11     12     13     14     15     16     17     18     19     20     21     22     23     24     25     26     27     28     29     30     31     32     33     34     35     36
	60    144   228   312   396   480   564   648   732   816    900    984    1068   1152   1236   1320   1404   1488   1572   1656   1740   1824   1908   1992   2076   2160   2244   2328   2412   2496   2580   2664   2748   2832   2916   3000   
*/



/* 0. reset css - meyer v2.0 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }



/* 1. typography baseline */

body {
	/* set baseline (1em = 12px)

		a. default font-size   = 12px [1em / 16px x 12px = 0.750em]
		b. default line-height = 18px [18 / 12 = 1.5]
	*/
	font: 0.75em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* inner wrap (sets outer margins)

		a. choose columns/width from grid: 12 columns = 984px
		b. subtract margins from width:    984 - 2 x 24 = 936
		c. divide by original width:       936 / 984 = 95.122%
	*/
	width: 95.122%;

	/* use multiple of line-height for vertical margins & padding */
	margin: 1.5em auto;
	padding: 1.5em 0;
	 -webkit-text-size-adjust: 100%; /* disable text auto-adjust */
	}



/* 2. typography

	a. to get font-size in ems, divide desired font-size by default font-size: 16/12 = 1.333em
	b. to get unitless line-height, divide default line-height by desired font-size: 18/16 = 1.125
	c. set margin-bottom to some multiple of line-height in ems

	+ copy/paste typographic reference chart @ https://perishablepress.com/xycss/tools/typography.html
*/

/* font set 1 (default styles) */
h1, h2, h3, h4, h5 {
	font-family: "Lobster", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
h1 { font-size: 4.000em; line-height: 0.750; margin: 0.375em 0;      /* 48px (2 x line-height) */ }
h2 { font-size: 3.000em; line-height: 1.000; margin-bottom: 0.500em; /* 36px (2 x line-height) */ }
h3 { font-size: 2.000em; line-height: 1.500; margin-bottom: 0.750em; /* 24px (2 x line-height) */ }
h4 {}
h5 {}
h6 {}

p, ul, ol, dl, dt, dd, blockquote, pre, td, th {
	font-family: "Amaranth", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.000em; line-height: 1.500; margin-bottom: 1.500em; /* 12px */
	}
	ul, ol, dl {
		margin-left: 2.0em; /* = 24px x (1.5em/18px) */
		}
		ul { list-style: square outside; }
		ol { list-style-type: decimal; }
	pre { 
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		white-space: -moz-pre-wrap !important;
		white-space: -o-pre-wrap;
		white-space: pre-wrap;
		word-wrap: break-word;
		}

/* font set 2 */
body article:nth-child(3) h2, 
body article:nth-child(3) h3 {
	font-family: "Crushed", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
body article:nth-child(3) p {
	font-family: "Didact Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

/* font set 3 */
body article:nth-child(4) h2, 
body article:nth-child(4) h3 {
	font-family: "Abril Fatface", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
body article:nth-child(4) p {
	font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}



/* 3. inline elements */

em { font-style: italic;      line-height: 0; } /* line-height fix for webkit & IE */
strong { font-weight: bold;   line-height: 0; } 
abbr, acronym { cursor: help; line-height: 0; }
small { font-size: 0.833em;   line-height: 0; }


/* 4. structural styles
	 create/customize your grid-based layout structure

	 notes

	 - to convert a width from pixels to percent, divide by the parent width
	 - if you must use left/right padding, pad the children, not the parents
	 - use width and float to avoid extraneous use of the margin property
	 - only define a property if you're sure it is not being inherited
	 - use increments of the default line-height for anything vertical
	 - actual image height should be some increment of line-height

	 + more info @ https://perishablepress.com/xycss/docs.html
*/

header, article, footer { 
	width: 100%;
	overflow: hidden; /* clear floats */
	}
section { width: 66.6667%; float: left; }
aside { width: 30.769231%; float: right; }

header, article, section, aside { 
	margin-bottom: 1.5em;
	}



/* 5. hardboiled css3 media queries - ver 0.9 
	@ http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
	(so customized xy.css redux version with revised media queries)
*/

/* small screens (portrait and landscape) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), only screen and (min-width: 320px) and (max-width: 480px) {}

/* small screens (landscape) */
@media only screen and (min-width: 321px) {}

/* small screens (portrait) */
@media only screen and (max-width: 320px) {}

/* medium small screens */
@media only screen and (max-width: 480px) {

	article, aside, header, footer {
		width: 100%; margin-bottom: 1.5em;
		float: none; clear: none;
		}
}

/* medium screens (excludes iPad & iPhone) */
@media only screen and (min-width: 481px) and (max-width: 767px) {


}

/* ipads (portrait and landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

/* ipads (landscape) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}

/* ipads (portrait) */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}

/* medium large screens */
@media only screen and (min-width: 1444px) and (max-width: 1824px) {



}

/* large screens */
@media only screen and (min-width: 1824px) and (max-width: 2224px) {


}

/* extra large screens */
@media only screen and (min-width: 2224px) {}

/* iphone 4 and high pixel ratio (1.5+) devices */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}

/* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {}



/* 6. media query transitions */

h1, h2, h3, h4, h5, h6, p, ul, ol { 
	-webkit-transition-property: font-size; -moz-transition-property: font-size; transition-property: font-size; 
	-webkit-transition-property: width; -moz-transition-property: width; transition-property: width; 
	-webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;
	}



/* 7. print media */

@media print {

	* {
		color: black            !important;
		background: transparent !important;
		text-shadow: none       !important;
		box-shadow: none        !important;
		-ms-filter: none        !important;
		filter: none            !important;
		border: none            !important;
		float: none             !important;
		clear: none             !important;
		}
	html, body, article, header, section, footer, aside, div { 
		width: 100% !important;
		}
	a, a:link, a:visited, a:hover, a:active, abbr, acronym {
		text-decoration: none;
		border-bottom: 0 none;
		}
	h1, h2, h3, h4, h5, h6, p, li {
		page-break-inside: avoid;
		orphans: 3; widows: 3;
		}
	h1, h2, h3, h4, h5, h6 { 
		page-break-after: avoid;
		}
	thead   { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	nav     { display: none; }

}



/* all your code are belong to poetry */