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

	xy.css
		0. reset css
		1. preset classes
		2. structural styles
		3. typography styles
		4. inline elements
		5. special effects
		6. media queries
		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 - eric 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 */

/* horizontal grid */
.x0,  .x00, 
.x01, .x02, .x03, .x04, .x05, .x06, .x07, .x08, .x09, .x10, .x11, .x12, 
.x13, .x14, .x15, .x16, .x17, .x18, .x19, .x20, .x21, .x22, .x23, .x24,
.x25, .x26, .x27, .x28, .x29, .x30, .x31, .x32, .x33, .x34, .x35, .x36 { 
	float: left;
	display: inline;
	overflow: hidden;
	}
	.x0  { width: 0.600%; margin-right: 0.600%; } /* 18px */
	.x00 { width: 0.800%; margin-right: 0.800%; } /* 24px */

.x01 { width: 2.000%; }
.x02 { width: 4.800%; }
.x03 { width: 7.600%; }
.x04 { width: 10.40%; }
.x05 { width: 13.20%; }
.x06 { width: 16.00%; }
.x07 { width: 18.80%; }
.x08 { width: 21.60%; }
.x09 { width: 24.40%; }
.x10 { width: 27.20%; }
.x11 { width: 30.00%; }
.x12 { width: 32.80%; }
.x13 { width: 35.60%; }
.x14 { width: 38.40%; }
.x15 { width: 41.20%; }
.x16 { width: 44.00%; }
.x17 { width: 46.80%; }
.x18 { width: 49.60%; }
.x19 { width: 52.40%; }
.x20 { width: 55.20%; }
.x21 { width: 58.00%; }
.x22 { width: 60.80%; }
.x23 { width: 63.60%; }
.x24 { width: 66.40%; }
.x25 { width: 69.20%; }
.x26 { width: 72.00%; }
.x27 { width: 74.80%; }
.x28 { width: 77.60%; }
.x29 { width: 80.40%; }
.x30 { width: 83.20%; }
.x31 { width: 86.00%; }
.x32 { width: 88.80%; }
.x33 { width: 91.60%; }
.x34 { width: 94.40%; }
.x35 { width: 97.20%; }
.x36 { width: 100.0%; }

/* vertical grid */
.y0,  .y00, 
.y01, .y02, .y03, .y04, .y05, .y06, .y07, .y08, .y09, .y10, .y11, .y12, 
.y13, .y14, .y15, .y16, .y17, .y18, .y19, .y20, .y21, .y22, .y23, .y24,
.y25, .y26, .y27, .y28, .y29, .y30, .y31, .y32, .y33, .y34, .y35, .y36 {}

.y00 { height: 18px; margin-bottom: 18px; }
.y01 { height: 18px; }
.y02 { height: 36px; }
.y03 { height: 54px; }
.y04 { height: 72px; }

/* more preset classes @ https://perishablepress.com/xycss/tools/css.html */







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

	 + stylesheets used for this design:

		xy.css    - this file
		grid.css  - visual grid
		home.css  - home page
		subs.css  - sub pages
		ie.css    - ie styles

*/

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

#scripts { display: none; /* prevent <script> elements from breaking the grid */ }







/* 3. typography styles

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

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

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







/* 5. special effects */

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

/* selection highlights */
::-moz-selection 	{ background-color: rgba(99,61,31,0.7); color: #fff; text-shadow: none; } /* #633d1f */
::selection 	 	{ background-color: rgba(99,61,31,0.7); color: #fff; text-shadow: none; }
img::-moz-selection	{ background-color: transparent; -moz-box-shadow: none; }
img::selection 	{ background-color: transparent;      box-shadow: none; }







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







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

}







/* @end */