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

	xy.css
		0. reset css
		1. preset classes
		2. typography baseline
		3. typography
		4. inline elements
		5. sub-structure
		6. structural styles
		7. media queries
		8. media query transitions
		9. 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. preset classes */

.x01 {}
.x02 {}
.x03 {}

.y01 {}
.y01 {}
.y01 {}





/* 2. 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;
	 -webkit-text-size-adjust: 100%; /* disable text auto-adjust */
	}





/* 3. 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
*/
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

h1, h2, h3, h4, h5 {}

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





/* 4. inline elements */

em { font-style: italic;      line-height: 0; }
strong { font-weight: bold;   line-height: 0; } 
abbr, acronym { cursor: help; line-height: 0; }
small { font-size: 0.833em;   line-height: 0; }

/* selection highlights */

::-moz-selection 	{ background-color: rgba(255,0,0,0.5); color: #fff; text-shadow: none; /* light red #ff0000 */ }
::selection 	 	{ background-color: rgba(255,0,0,0.5); color: #fff; text-shadow: none; /* light red #ff0000 */ }
img::-moz-selection	{ background-color: transparent; -moz-box-shadow: none; }
img::selection 	{ background-color: transparent;      box-shadow: none; }



/* 5. sub-structure */

#content {
	/* set 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;
	}






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








/* 7. media queries
		+ based on: hardboiled css3 media queries - ver 0.9 
		@ http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_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) {

	
}

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



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



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