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

	xy.css
		0. meyer reset css
		1. media query transitions
		2. xy.css grid
		3. typography baseline
		4. inner wrap
		5. custom grid layout
		6. typography
		7. inline elements
		8. media queries
		9. print media
*/


/* 0. meyer reset css - ver 2.0 @ http://meyerweb.com/eric/tools/css/reset/ */

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. 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;
		   }


/* 2. xy.css grid

	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   
*/



/* 3. typography baseline: 1em = 12px

	a. default font-size   = 12px [1em / 16px x 12px = 0.750em]
	b. default line-height = 18px [18 / 12 = 1.5]
*/
body {
	font: 0.75em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%; /* disable text auto-adjust */
	}



/* 4. 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%
*/
#wrap {
	width: 95.122%;
	margin: 1.5em auto;
	padding: 1.5em 0;
	overflow: hidden;
	}



/* 5. custom grid layout.. (warning: basic math required)
	 this is where you create/customize 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
*/

/* basic full-width box */
header, section, footer {
	width: 100%; 
	clear: both; 
	overflow: hidden; 
	margin-bottom: 1.5em; 
	}
	header img {
		float: left;
		height: 198px;       /* = 11 x default line-height */
		margin-right: 2.0em; /* = 24px x (1.5em / 18px) */
		margin-bottom: 1.5em; 
		}
	nav ul { text-align: right; }
	nav li {
		display: inline-block;
		margin-right: 3.333%;
		}

/* any specific-width box */
article {
	float: left;
	width: 66.6667%; /* = (8 grid units - gutter) / (parent width) = (648px - 24px) / 936px */
	margin-bottom: 1.5em;
	}
aside {
	float: right;
	width: 30.769231%; /* = (4 grid columns - gutter)/ (parent width) = (312px - 24px) / 936px */
	margin-bottom: 1.5em;
	}
	aside ul, aside ol {
		margin-left: 2.5em; /* = 30px x (1.5em/18px) */
		}

/* three equal-width boxes
	a. subtract two margin widths from the parent width: 624px - (2 x 24px) = 576px
	b. divide that number by three to determine column width: 576px / 3 = 192px
	c. divide column width by parent width to get percentage: 192px / 624px = 30.769%
*/
section div {
	float: left;
	width: 30.769231%;
	margin-right: 3.8461538%; /* = (gutter width) / (parent width) / 2 = (2 x 24px) / (624px) / 2 */
	margin-bottom: 1.5em;
	}
	section div:nth-child(3) {
		margin-right: 0;
		float: right;
		}

/* two equal-width boxes */
section:nth-child(4) div {
	float: left;
	width: 48.0769231%; /* = (100% - 3.8461538% ) / 2 */
	}
	section:nth-child(4) div:nth-child(3) {
		margin-right: 0;
		float: right;
		}

/* equal columns using CSS3 */
.home section:nth-child(2) p, 
.home section:nth-child(3) p {
	-moz-column-count: 3; column-count: 3; /* create columns (breaks grid in webkit) */
	-moz-column-gap: 2em; column-gap: 2em; /* define gutter: 24px x (1.5em / 18px) */
	}

/* aesthetics */
footer { margin-bottom: 0; }



/* 6. typography

	a. pick font size in pixels, say: 16px
	b. to get font-size in ems: divide by default pixel height: 16/12 = 1.333em
	c. to get unitless line-height: divide default line-height by font-size: 18/16 = 1.125
	d. set margin-bottom to line-height value in ems

	+ copy/paste typographic reference chart @ https://perishablepress.com/xycss/tools/typography.html
*/
h1 { font-size: 2.667em; line-height: 1.126; margin-bottom: 0.563em; /* 32px (2 x line-height) */ }
h2 { font-size: 2.333em; line-height: 1.286; margin-bottom: 0.643em; /* 28px (2 x line-height) */ }
h3 { font-size: 2.000em; line-height: 1.500; margin-bottom: 0.750em; /* 24px (2 x line-height) */ }
h4 { font-size: 1.667em; line-height: 1.800; margin-bottom: 0.900em; /* 20px */ }
h5 { font-size: 1.333em; line-height: 1.125; margin-bottom: 1.125em; /* 16px */ }
h6 { font-size: 1.000em; line-height: 1.500; margin-bottom: 1.500em; /* 12px */ }

h1, h2, h3, h4, h5 { font-weight: bold; }

p, ul, ol, dl, dt, dd, blockquote, pre, td, th {
	margin: 0 0 1.5em 0;
	}
	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;
		}


/* 7. 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; }



/* 8. 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) {

	article, aside, #wrap section div, 
	header, .demos header, .downloads header, 
	section, .demos section, .downloads section {
		width: 100%; margin-bottom: 1.5em;
		float: none; clear: none;
		}
	h1, h2, h3, h4, h5, h6, p, ol, ul { 
		clear: both;
		}
		h1         { font-size: 2.000em; line-height: 0.750; margin-bottom: 0.750em; /* 24px */ }
		h2, h3, h4 { font-size: 1.500em; line-height: 1.000; margin-bottom: 1.000em; /* 18px */ }
		h6         { font-size: 0.833em; line-height: 1.800; margin-bottom: 1.800em; /* 10px */ }
	
	header img {
		height: 288px; /* 16 x line-height */
		float: none; display: block;
		margin: 0 auto 1.5em auto;
		}
	.docs header h1, .docs header p, .docs aside, 
	.downloads header h1, .downloads header p, .downloads aside, 
	.demos header h1, .demos header p, .demos aside { display: none; }
	#browser-size { display: none; /* js drop-in link */ }

}

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

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

	h1     { font-size: 1.667em; line-height: 0.900; margin-bottom: 0.900em; /* 20px */ }
	h2, h4 { font-size: 1.333em; line-height: 1.125; margin-bottom: 1.125em; /* 16px */ }
	h3     { font-size: 1.167em; line-height: 1.286; margin-bottom: 1.286em; /* 14px */ }

}

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

	/* move sidebar */
	article, aside { float: left; clear: both; width: 100%; }
		    aside div { float: left; width: 48.0769231%; /* = (100% - 3.8461538% ) / 2 */ }
		    aside div:nth-child(2) { float: right; }
 
 	/* css columns */
	.home section:nth-child(2) p {
		-moz-column-count: 2; -webkit-column-count: 2; column-count: 2; /* create columns (ok for mobile webkit) */
		-moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; /* define gutter: 24px x (1.5em / 18px) */
		}
	.home section:nth-child(3) p {
		-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; /* create columns (ok for mobile webkit) */
		-moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; /* define gutter: 24px x (1.5em / 18px) */
		}

	/* full-width divs */
	section:nth-child(4) div, 
	section:nth-child(5) div {
		float: left; clear: none; 
		width: 100%; margin-right: 0;
		}

	h2     { font-size: 2.000em;      line-height: 1.500;      margin-bottom: 0.750em;      /* 24px (2 x line-height) */ }
	h3, h4 { font-size: 1.83333333em; line-height: 0.81818182; margin-bottom: 0.81818182em; /* 22px */ }
	h6     { font-size: 0.833em;      line-height: 1.800;      margin-bottom: 1.800em;      /* 10px */ }

}

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

	/* css columns */
	header p:nth-child(3), 
	.home section:nth-child(2) p {
		-moz-column-count: 2; -webkit-column-count: 2; column-count: 2; /* create columns (ok for mobile webkit) */
		-moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; /* define gutter: 24px x (1.5em / 18px) */
		}
	.home section:nth-child(3) p {
		-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; /* create columns (ok for mobile webkit) */
		-moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; /* define gutter: 24px x (1.5em / 18px) */
		}

}

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

	/* two equal-width columns */
	section:nth-child(4),
	section:nth-child(5) {
		float: left; clear: none; 
		width: 48.0769231%; /* = (100% - 3.8461538% ) / 2 */
		}
	section:nth-child(4) { float: right; }

	/* full-width divs */
	section:nth-child(4) div, 
	section:nth-child(5) div {
		float: left; clear: none; 
		width: 100%; margin-right: 0;
		}

	h3 { font-size: 1.667em; line-height: 1.800; margin-bottom: 0.900em; /* 20px */ }

}

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

	article, aside { float: left; clear: both; width: 100%; }
		    aside div { float: left; width: 48.0769231%; /* = (100% - 3.8461538% ) / 2 */ }
		    aside div:nth-child(2) { float: right; }

	.demos aside, .downloads aside { display: none; }

}

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

	header img {
		height: 216px;       /* = 12 x line-height */
		margin-right: 2.5em; /* = 30px x (1.5em/18px) */
		}

	h1 { font-size: 3.000em; line-height: 1.000; margin-bottom: 0.500em; /* 36px (2 x line-height) */ }
	h2 { font-size: 2.500em; line-height: 1.200; margin-bottom: 0.600em; /* 30px (2 x line-height) */ }
	h3 { font-size: 2.000em; line-height: 1.500; margin-bottom: 0.750em; /* 24px (2 x line-height) */ }
	h4 { font-size: 1.667em; line-height: 1.800; margin-bottom: 0.900em; /* 20px (2 x line-height) */ }
	h5 { font-size: 1.500em; line-height: 2.000; margin-bottom: 1.000em; /* 18px (2 x line-height) */ }
	h6 { font-size: 1.167em; line-height: 2.572; margin-bottom: 1.286em; /* 14px (2 x line-height) */ }

	p, ul, ol, dl, dt, dd, blockquote, pre, td, th {
		font-size: 1.167em; line-height: 1.929; margin-bottom: 1.286em; /* 14px (1.5 x line-height) */
		}

}

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

	header img {
		height: 234px;       /* = 13 x line-height */
		margin-right: 3.0em; /* = 36px x (1.5em / 18px) */
		}
	section { margin-bottom: 2.25em; /* = 1.5 x line-height */ }

	h1 { font-size: 3.500em; line-height: 0.858; margin-bottom: 0.429em; /* 42px (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.500em; line-height: 1.200; margin-bottom: 0.600em; /* 30px (2 x line-height) */ }
	h4 { font-size: 2.000em; line-height: 1.500; margin-bottom: 0.750em; /* 24px (2 x line-height) */ }
	h5 { font-size: 1.667em; line-height: 1.800; margin-bottom: 0.900em; /* 20px (2 x line-height) */ }
	h6 { font-size: 1.333em; line-height: 2.250; margin-bottom: 1.125em; /* 16px (2 x line-height) */ }

	p, ul, ol, dl, dt, dd, blockquote, pre, td, th {
		font-size: 1.333em; line-height: 1.6875; margin-bottom: 1.125em; /* 16px (with 1.5 x line-height) */
		}

}

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

	header img {
		height: 252px;       /* = 14 x line-height */
		margin-right: 4.0em; /* = 48px x (1.5em / 18px) */
		}
	section { margin-bottom: 3.0em; /* = 2 x line-height */ }

	h1 { font-size: 4.000em; line-height: 0.750; margin-bottom: 0.375em; /* 48px (with 2 x line-height) */ }
	h2 { font-size: 3.500em; line-height: 0.858; margin-bottom: 0.429em; /* 42px (with 2 x line-height) */ }
	h3 { font-size: 3.000em; line-height: 1.000; margin-bottom: 0.500em; /* 36px (with 2 x line-height) */ }
	h4 { font-size: 2.500em; line-height: 1.200; margin-bottom: 0.600em; /* 30px (with 2 x line-height) */ }
	h5 { font-size: 2.000em; line-height: 1.500; margin-bottom: 0.750em; /* 24px (with 2 x line-height) */ }
	h6 { font-size: 1.500em; line-height: 2.000; margin-bottom: 1.000em; /* 18px (with 2 x line-height) */ }

	p, ul, ol, dl, dt, dd, blockquote, pre, td, th {
		font-size: 1.50em; line-height: 2.0; margin-bottom: 1.0em; /* 18px (with 2 x line-height) */
		}
	body:after { position: absolute; left: 0; top: 0; background-color: red; content: '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) {}



/* 9. print media */

@media print {

	* {
		color: black            !important;
		background: transparent !important;
		text-shadow: none       !important;
		box-shadow: none        !important;
		-ms-filter: none        !important;
		border: none            !important;
		filter: 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 */