@charset "UTF-8";

/* 
	-:[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]:-

	xy.css : sub pages
	   design : monzilla media @ https://monzillamedia.com/
	   design : copyright xy.css : all rights reserved.

	-:[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]:-
*/

html { /* xy matrix */
	background-image: url(../img/grid.gif);
	background-attachment: fixed;
	}
body {
	height: 100%; position: relative; z-index: 0;
	}
	#content {
		position: relative; top: 162px; width: 65.853659%; max-width: 900px;
		margin: 0 auto 198px auto; padding: 2.25em 0; background-color: rgba(255,255,255,0.8);
		box-shadow: 0 0 7px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3);
		border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
		}
		header, article { 
			width: 81.481481%; margin: 0 auto; padding: 0.75em 0;
			}
		header h1 {
			position: fixed; z-index: -20; top: 72px; left: 120px; height: 0; width: 0;
			font-size: 5.0em; text-shadow: none !important;
			}
			header h1 a {
				background-color:    rgba(204,0,0,0.77);
				background-image:    url(../img/bg01.png), url(../img/bg02.png);
				background-position: center 11px, center 30px;
				background-repeat:   no-repeat, repeat-x;

				display: block; position: relative; z-index: 999; top: -216px; left: -216px; 
				height: 432px; width: 432px; line-height: 400px; font-weight: bold; text-align: center;
				border-radius: 216px; -moz-border-radius: 216px; -webkit-border-radius: 216px;
				}
				header h1 a span { /* @ xy.js : xycss_swap_text() */
					position: absolute; z-index: -999; top: 133px; left: 3%; 
					width: 94%; line-height: 48px; font-size: 48px; 
					}
		header h2 {
			position: fixed; z-index: -10; top: -116px; left: 17.073171%; height: 350px; width: 350px; line-height: 350px; 
			box-shadow: 0 0 7px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3);
			color: rgba(255,255,255,0.8); font-size: 5.0em; font-weight: bold; text-align: center; text-shadow: none !important;
			border-radius: 175px; -moz-border-radius: 175px; -webkit-border-radius: 175px;
			}
		header h3, 

		/*  article */

		article h3 {
			font-size: 2.000em; line-height: 1.125; margin: 0.750em 0; /* 24px */
			font-weight: bold; color: rgba(0,0,0,0.8);
			}
		article h4 {
			font-size: 1.500em; line-height: 1.000; margin: 1.000em 0; /* 18px */
			font-weight: bold; color: rgba(0,0,0,0.8);
			}
			article h4 a[href*="blog/"] {
				font-weight: bold;
				}
		article p, article ol, article ul {
			font-size: 1.167em; line-height: 1.929; margin-bottom: 1.286em; /* 14px */
			}
			article ol, article ul {
				margin-left: 3.0em; margin-bottom: 27px;
				}
				article li {
					margin-bottom: 9px;
					}
		article code {
			font: 0.917em/1 Monaco, 'MonacoRegular', 'Panic Sans', 'Lucida Console', 'Courier New', Courier, monospace; 
			color: rgba(0,0,0,0.8);
			}
		article pre {
			margin-bottom: 1.500em; padding: 1.5em;
			white-space: -moz-pre-wrap !important;
			white-space: -o-pre-wrap;
			white-space: pre-wrap;
			word-wrap: break-word;
			}
			article pre code,
			article .pre-faux {
				font: 1.0em/1.5 Monaco, 'MonacoRegular', 'Panic Sans', 'Lucida Console', 'Courier New', Courier, monospace; 
				text-shadow: 0 1px 0 #fff;
				}
			article div.scroll pre {
				overflow: auto; padding: 10px 1.5em 11px 1.5em; 
				white-space: pre !important;
				word-wrap: normal !important;
				}

		article a { font-weight: bold; line-height: 0; }
		article a:link, article a:visited { color: rgba(0,0,0,0.6); } 
		article a:hover, article a:active { color: rgba(0,0,0,0.9); }

		.page article a:link, .page article a:visited, 
		.single-post article a:link, .single-post article a:visited { border-bottom: 1px solid #999; }
		.page article a:hover, .page article a:active, 
		.single-post article a:hover, .single-post article a:active { border-bottom: 1px solid #333; }

		.page article aside a:link, .page article aside a:visited { border-bottom: 0; }
		.page article aside a:hover, .page article aside a:active { border-bottom: 1px solid #fff; }

		.page-id-98 article a:hover, .page-id-98 article a:hover,
		.page-id-98 article a:link, .page-id-98 article a:visited { border-bottom: 0; }

		article a[href*="tools/"], article a[href*="downloads"], article a[href*="demos/"], article a[href*="blog/"], article a[href*="docs.html"], #nav-posts a {
			padding: 3px 6px; color: rgba(255,255,255,1.0); text-shadow: 1px 1px 1px rgba(0,0,0,0.5); font-weight: 500;
			box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
			border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
			}
			article a[href*="docs.html"]:link, article a[href*="docs.html"]:visited { background-color: rgba(204,0,0,0.5); border-bottom: 0; }
			article a[href*="docs.html"]:hover, article a[href*="docs.html"]:active { background-color: rgba(204,0,0,0.8); border-bottom: 0; }

			article a[href*="tools/"]:link, article a[href*="tools/"]:visited { background-color: rgba(0,0,0,0.3); border-bottom: 0; }
			article a[href*="tools/"]:hover, article a[href*="tools/"]:active { background-color: rgba(0,0,0,0.5); border-bottom: 0; }
	
			article a[href*="downloads"]:link, article a[href*="downloads"]:visited { background-color: rgba(102,153,102,0.5); border-bottom: 0; }
			article a[href*="downloads"]:hover, article a[href*="downloads"]:active { background-color: rgba(102,153,102,0.8); border-bottom: 0; }

			article a[href*="demos/"]:link, article a[href*="demos/"]:visited { background-color: rgba(0,102,204,0.5); border-bottom: 0; }
			article a[href*="demos/"]:hover, article a[href*="demos/"]:active { background-color: rgba(0,102,204,0.8); border-bottom: 0; }

			article a[href*="blog/"]:link, article a[href*="blog/"]:visited,
			#nav-posts a:link, #nav-posts a:visited { background-color: rgba(255,204,0,0.5); border-bottom: 0; }
			article a[href*="blog/"]:hover, article a[href*="blog/"]:active,
			#nav-posts a:hover, #nav-posts a:active { background-color: rgba(255,204,0,0.8); border-bottom: 0; }
			
			article #feed a[href*="blog/feed.xml"]:link, article #feed a[href*="blog/feed.xml"]:visited, 
			article #feed a[href*="blog/feed.xml"]:hover, article #feed a[href*="blog/feed.xml"]:active {
				padding: 0; color: rgba(0,0,0,0.7); text-shadow: 1px 1px 1px #fff; 
				box-shadow: none; border-radius: 0; background-color: transparent;
				}
			
			.yellow { background-color: rgba(255,255,204,0.7); }
			.white  { background-color: rgba(255,255,255,0.7); }
			.green  { background-color: rgba(204,255,204,0.5); }
			.blue   { background-color: rgba(204,255,255,0.5); }
			.red    { background-color: rgba(255,0,0,0.3); }

		/* asides */

		aside p {
			font-size: 1.083em; line-height: 1.385; margin: 4.155em 2.0775em; /* 13px */
			color: rgba(255,255,255,0.9);
			}
		aside code { color: rgba(255,255,255,0.8); }
		aside pre { background: none; text-shadow: none; color: rgba(255,255,255,0.8); }
		
		article aside a[href*="/"]:link, article aside a[href*="/"]:visited, 
		article aside a[href*="/"]:hover, article aside a[href*="/"]:active {
			border: 0;
			}
		.line { /* @ xycss_design_elements() */
			position: absolute; z-index: 999; top: 89px; left: 100%; width: 24px; height: 2px;
			}

		/* navigation */

		.main {
			position: fixed; top: 162px; right: 0; 
			font-size: 1.333em; line-height: 1.125; margin-bottom: 1.125em; /* 16px */
			}
			.main ul { list-style-type: none; margin: 0 9px 0 0; }
			.main li { list-style-type: none; margin: 0 0 9px 0; }
			.main a {
				position: relative; display: block; width: 144px; height: 72px; line-height: 72px; text-align: center;
				box-shadow: 0 0 7px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3);
				border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
				}
				.main a:active  { top: 1px; }

			.docs a            { background-color: rgba(204,0,0,0.5);     /* #cc0000 */ }
			.docs a:hover      { background-color: rgba(204,0,0,0.8);     /* #cc0000 */ }

			.downloads a       { background-color: rgba(102,153,102,0.5); /* #669966 */ }
			.downloads a:hover { background-color: rgba(102,153,102,0.8); /* #669966 */ }

			.demos a           { background-color: rgba(0,102,204,0.5);   /* #0066cc */ }
			.demos a:hover     { background-color: rgba(0,102,204,0.8);   /* #0066cc */ }

			.tools a           { background-color: rgba(0,0,0,0.3);       /* #000 */ }
			.tools a:hover     { background-color: rgba(0,0,0,0.5);       /* #000 */ }

			.blog a:link, .blog a:visited { background-color: rgba(255,204,0,0.3); /* #ffcc00 */ color: rgba(0,0,0,0.4); }
			.blog a:hover, .blog a:active { background-color: rgba(255,204,0,0.5); /* #ffcc00 */ color: rgba(0,0,0,0.8); }

		/* footer */

		footer {
			position: fixed; z-index: -999; bottom: 0; margin: 0 auto;
			}
			footer p {
				color: rgba(0,0,0,0.3); font-size: 0.9167em; line-height: 1.6364; margin: 0.8182em; /* 11px */
				}
				footer a:link, footer a:visited { color: rgba(0,0,0,0.3); }
				footer a:hover, footer a:active { color: rgba(0,0,0,0.7); }

a {
	text-decoration: none; cursor: pointer;
	-webkit-transition-property: color; -moz-transition-property: color; transition-property: color; 
	-webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s;
	}
	a:link, a:visited { color: rgba(255,255,255,0.8); }
	a:hover, a:active,
	aside a:link, aside a:visited,
	aside a:hover, aside a:active { color: rgba(255,255,255,1.0); }

img { 
	display: inline-block; margin: 1.5em 0.75em;
	}



/* xy pages */
.xycss h2 {
	font-size: 3.0em; line-height: 348px; text-shadow: 0 1px 0 #fff;
	background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,0.7); border: 10px solid rgba(0,0,0,0.1);
	border-radius: 185px; -moz-border-radius: 185px; -webkit-border-radius: 185px;
	}
.xycss article h3 {
	margin: 1.5em 0;
	}
.xycss pre   { background-color: rgba(204,0,0,0.1); }
.xycss aside { background-color: rgba(204,0,0,0.5); }
.xycss .line { display: none; }

.xy-menu a[href*="demos/"]:hover, 
.xy-menu a[href*="demos/"]:active { background-color: rgba(0,102,204,0.5); }

.xy-menu a[href*="tools/"]:hover, 
.xy-menu a[href*="tools/"]:active { background-color: rgba(0,0,0,0.3); }



/* tools */
.parent-pageid-45 #content:before,
.parent-pageid-45 #content:after { content: ""; display: table; }
.parent-pageid-45 #content:after { clear: both; }

.page-id-45 #content:before,
.page-id-45 #content:after { content: ""; display: table; }
.page-id-45 #content:after { clear: both; }

.page-id-45 h2, .parent-pageid-45 h2 {
	font-size: 3.0em; line-height: 348px; text-shadow: 0 1px 0 #fff;
	background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,0.7); border: 10px solid rgba(0,0,0,0.1);
	border-radius: 185px; -moz-border-radius: 185px; -webkit-border-radius: 185px;
	}
.page-id-45 .s01, .parent-pageid-45 .s01 { 
	width: 48%; float: left; 
	}
.page-id-45 .s02, .parent-pageid-45 .s02 { 
	width: 48%; float: right; margin-top: 18px; padding: 18px 0; background-color: rgba(0,0,0,0.1);
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	}
	.page-id-45 .s02 p,  .parent-pageid-45 .s02 p  { padding-left: 18px; padding-right: 18px; margin-bottom: 9px; text-shadow: 0 1px 0 #fff; }
	.page-id-45 .s02 ul, .parent-pageid-45 .s02 ul { padding-left: 18px; padding-right: 18px; margin-bottom: 18px; margin-left: 24px; text-shadow: 0 1px 0 #fff; }
	.page-id-45 .s02 li, .parent-pageid-45 .s02 li { margin: 0; padding: 5px 0 4px 0; line-height: 18px; font-size: 12px; }

.page-id-45 .s03 { width: 48%; float: right; }

.page-id-45 article aside, .parent-pageid-45 article aside { 
	color: rgba(255,255,255,0.9); background-color: rgba(0,0,0,0.4); 
	}
.download-button { padding-left: 9px; border-left: 18px solid rgba(102,153,102,0.5); }
#download 	  { padding-left: 0;   border: none; }

/* about */
.page-id-150 #content:before,
.page-id-150 #content:after { content: ""; display: table; }
.page-id-150 #content:after { clear: both; }
.page-id-150 .s01 { width: 48%; float: left; }
.page-id-150 .s02 {
	width: 48%; float: right; padding: 18px 0; background-color: rgba(119,119,119,0.1); /* #777 */
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	}
	.page-id-150 .s02 p { padding-left: 18px; padding-right: 18px; margin-bottom: 9px; text-shadow: 0 1px 0 #fff; }
	.page-id-150 .s02 ul { padding-left: 18px; padding-right: 18px; margin-bottom: 18px; margin-left: 24px; text-shadow: 0 1px 0 #fff; }

.page-id-150 .s03 { width: 48%; float: right; margin-top: 18px; padding: 18px 0; }
.page-id-150 .s03 a:link, .page-id-150 .s03 a:visited,
.page-id-150 .s03 a:hover, .page-id-150 .s03 a:active { float: left; margin: 0 19px 19px 0; padding: 0; border: none; }
.page-id-150 .s03 img { float: left; margin: 0; padding: 0; }

/* demos */
.page-id-12 #content:before,
.page-id-12 #content:after { content: ""; display: table; }
.page-id-12 #content:after { clear: both; }

.page-id-12 .s01 { 
	width: 48%; float: left; 
	}
.page-id-12 .s02 {
	width: 48%; float: right; padding: 18px 0; background-color: rgba(0,102,204,0.1);
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	}
	.page-id-12 .s02 p,
	.page-id-12 .s02 ul {
		margin-bottom: 18px; padding-left: 18px; padding-right: 18px; text-shadow: 0 1px 0 #fff;
		}
.page-id-12 article h4 {
	margin-top: 2.000em;
	}
.page-id-12 article aside { 
	background-color: rgba(0,102,204,0.4); 
	}

/* downloads */
.page-id-13 #content:before,
.page-id-13 #content:after { content: ""; display: table; }
.page-id-13 #content:after { clear: both; }

.page-id-13 .s01 { 
	width: 48%; float: left; 
	}
.page-id-13 .s01 a {
	font-size: 2.0em; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); text-align: center; padding: 0;
	position: relative; display: block; width: 198px; height: 198px; margin: 0; line-height: 194px; 
	color: rgba(255,255,255,1.0); background-color: rgba(102,153,102,0.5); border: 9px solid rgba(0,0,0,0.1) !important;
	box-shadow: 0 0 7px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3);
	border-radius: 120px; -moz-border-radius: 120px; -webkit-border-radius: 120px;
	}
	.page-id-13 .s01 a:hover { background-color: rgba(102,153,102,0.6); }
	.page-id-13 .s01 a:active { top: 1px; }

.page-id-13 .s02 { 
	width: 48%; float: right; padding: 18px 0; background-color: rgba(102,153,102,0.1);
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	}
	.page-id-13 .s02 p,
	.page-id-13 .s02 ul { margin-bottom: 18px; padding-left: 18px; padding-right: 18px; text-shadow: 0 1px 0 #fff; }

.page-id-13 .s03 { 
	clear: both; float: left; margin: 27px 0; 
	}
	.page-id-13 .s03 p {
		color: rgba(0,0,0,0.5); font-style: italic; 
		font-size: 1.000em; line-height: 1.500; margin-bottom: 0;
		}
	.page-id-13 .s03 a {
		font-weight: normal; border-bottom: 1px solid rgba(0,0,0,0.2);
		}
.page-id-13 article aside { 
	background-color: rgba(102,153,102,0.4);
	}

/* contact form */
.page-id-58 #content:before,
.page-id-58 #content:after { content: ""; display: table; }
.page-id-58 #content:after { clear: both; }

#simple-contact-form { padding-top: 18px; }
#simple-contact-form fieldset { width: 100%; height: 45px; overflow: hidden; }
#simple-contact-form fieldset.scf-message { height: 162px; }
#simple-contact-form label { width: 20.45%; float: left; margin-top: 5px; }

#simple-contact-form fieldset input,
#simple-contact-form fieldset textarea { /* excludes submit button */
	width: 44.32%; float: left; font-size: 16px; line-height: 1.125; margin: 0; padding: 7px;
	color: rgba(0,0,0,0.5); font-style: italic; font-weight: lighter;
	}
#simple-contact-form fieldset textarea { width: 56.0%; }
#simple-contact-form div.scf-submit { height: 27px; margin: -2px 0 2px 0; } /* submit button */

#simple-contact-form input:focus,
#simple-contact-form textarea:focus { color: #333; color: rgba(0,0,0,0.8); font-style: normal; }

/* search */
#search-form { height: 45px; }
#search-form label { display: none; }
#s { 
	width: 44.32%; float: left; font-size: 16px; line-height: 1.125; margin: 0; padding: 7px;
	color: rgba(0,0,0,0.5); font-style: italic; font-weight: lighter; 
	}
#s:focus, #s:active { color: #333; color: rgba(0,0,0,0.8); font-style: normal; }

/* blog page (and archive.php) */
.page-id-98 h4 a:link, .page-id-98 h4 a:visited,
.archive h4 a:link, .archive h4 a:visited {
	position: relative;
	background-color: rgba(255,204,0,0.3); color: rgba(0,0,0,0.8); padding: 9px; text-shadow: 1px 1px 1px #fff; 
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	}
.page-id-98 h4 a:hover, .page-id-98 h4 a:active,
.archive h4 a:hover, .archive h4 a:active { 
	background-color: rgba(255,204,0,0.5); color: rgba(0,0,0,1.0); 
	}
.page-id-98 h4 a:active, .archive h4 a:active { top: 1px; }

.page-id-98 h4 + p { margin-bottom: 27px; }
.page-id-98 h2,
.search-results h2 {
	font-size: 3.0em; line-height: 348px; text-shadow: 0 1px 0 #fff;
	background-color: rgba(255,204,0,0.3); color: rgba(0,0,0,0.7); border: 10px solid rgba(0,0,0,0.1);
	border-radius: 185px; -moz-border-radius: 185px; -webkit-border-radius: 185px;
	}
#nav-posts { width: 100%; overflow: hidden; margin-bottom: 18px; padding: 9px 0; }
#nav-posts .prev { float: left; margin-left: 3px; }
#nav-posts .next { float: right; margin-right: 3px; }

#feed { padding-left: 36px; font-size: 14px; line-height: 27px; background: url(../img/feed.png) no-repeat 0 0; }

/* search results */
.search-results #content:before,
.search-results #content:after { content: ""; display: table; }
.search-results #content:after { clear: both; }

.search-results .s01 { 
	width: 48%; float: left; 
	}
.search-results .s02 {
	width: 48%; float: right; padding: 18px 0; background-color: rgba(255,204,0,0.3);
	border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
	}
	.search-results .s02 p,
	.search-results #search-form { padding-left: 18px; padding-right: 18px; text-shadow: 0 1px 0 #fff; }


/* liquid layout */
.sub.page-id-16 pre   { background-color: rgba(153,153,102,0.33); }
.sub.page-id-16 h2    { font-size: 4.0em; line-height: 358px; }
.sub.page-id-16 h2,
.sub.page-id-16 aside,
.sub.page-id-16 .line { background-color: rgba(153,153,102,0.77); }
.sub.page-id-16 .line {
	background-image: -webkit-gradient(linear, right top, left top, from(#ddddcd), to(#b0b089));
	background-image: -webkit-linear-gradient(right, #ddddcd, #b0b089);
	background-image:    -moz-linear-gradient(right, #ddddcd, #b0b089);
	background-image:     -ms-linear-gradient(right, #ddddcd, #b0b089);
	background-image:      -o-linear-gradient(right, #ddddcd, #b0b089);
	}

/* horizontal grid */
.sub.page-id-17 pre   { background-color: rgba(204,204,153,0.33); }
.sub.page-id-17 h2    { font-size: 3.0em; line-height: 368px; }
.sub.page-id-17 h2,
.sub.page-id-17 aside,
.sub.page-id-17 .line { background-color: rgba(204,204,153,0.77); }
.sub.page-id-17 .line {
	background-image: -webkit-gradient(linear, right top, left top, from(#eeeedd), to(#d2d2a5));
	background-image: -webkit-linear-gradient(right, #eeeedd, #d2d2a5);
	background-image:    -moz-linear-gradient(right, #eeeedd, #d2d2a5);
	background-image:     -ms-linear-gradient(right, #eeeedd, #d2d2a5);
	background-image:      -o-linear-gradient(right, #eeeedd, #d2d2a5);
	}
.sub.page-id-17 aside p,
.sub.page-id-17 aside code { color: rgba(0,0,0,0.8); text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }

/* vertical grid */
.sub.page-id-19 pre   { background-color: rgba(255,153,51,0.33); }
.sub.page-id-19 h2    { font-size: 3.0em; line-height: 368px; }
.sub.page-id-19 h2,
.sub.page-id-19 aside,
.sub.page-id-19 .line { background-color: rgba(255,153,51,0.77); }
.sub.page-id-19 .line {
	background-image: -webkit-gradient(linear, left top, right top, from(#ffb061), to(#ffddbc));
	background-image: -webkit-linear-gradient(left, #ffb061, #ffddbc);
	background-image:    -moz-linear-gradient(left, #ffb061, #ffddbc);
	background-image:     -ms-linear-gradient(left, #ffb061, #ffddbc);
	background-image:      -o-linear-gradient(left, #ffb061, #ffddbc);
	}

/* responsive design */
.sub.page-id-20 pre   { background-color: rgba(255,102,0,0.22); }
.sub.page-id-20 h2,
.sub.page-id-20 aside,
.sub.page-id-20 .line { background-color: rgba(255,102,0,0.77); }
.sub.page-id-20 .line {
	background-image: -webkit-gradient(linear, right top, left top, from(#ffcdab), to(#fe8839));
	background-image: -webkit-linear-gradient(right, #ffcdab, #fe8839);
	background-image:    -moz-linear-gradient(right, #ffcdab, #fe8839);
	background-image:     -ms-linear-gradient(right, #ffcdab, #fe8839);
	background-image:      -o-linear-gradient(right, #ffcdab, #fe8839);
	}

/* custom fonts */
.sub.page-id-21 pre   { background-color: rgba(204,153,51,0.33); }
.sub.page-id-21 h2    { font-size: 4.0em; line-height: 358px; }
.sub.page-id-21 h2,
.sub.page-id-21 aside,
.sub.page-id-21 .line { background-color: rgba(204,153,51,0.77); }
.sub.page-id-21 .line {
	background-image: -webkit-gradient(linear, left top, right top, from(#d2a54b), to(#eeddbc));
	background-image: -webkit-linear-gradient(left, #d2a54b, #eeddbc);
	background-image:    -moz-linear-gradient(left, #d2a54b, #eeddbc);
	background-image:     -ms-linear-gradient(left, #d2a54b, #eeddbc);
	background-image:      -o-linear-gradient(left, #d2a54b, #eeddbc);
	}

/* universal support */
.sub.page-id-22 pre   { background-color: rgba(255,204,51,0.33); }
.sub.page-id-22 h2    { font-size: 3.0em; line-height: 368px; }
.sub.page-id-22 h2,
.sub.page-id-22 aside,
.sub.page-id-22 .line { background-color: rgba(255,204,51,0.88); }
.sub.page-id-22 .line {
	background-image: -webkit-gradient(linear, right top, left top, from(#ffeebc), to(#ffd24b));
	background-image: -webkit-linear-gradient(right, #ffeebc, #ffd24b);
	background-image:    -moz-linear-gradient(right, #ffeebc, #ffd24b);
	background-image:     -ms-linear-gradient(right, #ffeebc, #ffd24b);
	background-image:      -o-linear-gradient(right, #ffeebc, #ffd24b);
	}
.sub.page-id-22 aside p,
.sub.page-id-22 aside code { color: rgba(0,0,0,0.8); text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }

/* progressive enhancement */
.sub.page-id-23 pre   { background-color: rgba(204,204,102,0.33); }
.sub.page-id-23 h2,
.sub.page-id-23 aside,
.sub.page-id-23 .line { background-color: rgba(204,204,102,0.77); }
.sub.page-id-23 .line {
	background-image: -webkit-gradient(linear, left top, right top, from(#d2d278), to(#eeeecd));
	background-image: -webkit-linear-gradient(left, #d2d278, #eeeecd);
	background-image:    -moz-linear-gradient(left, #d2d278, #eeeecd);
	background-image:     -ms-linear-gradient(left, #d2d278, #eeeecd);
	background-image:      -o-linear-gradient(left, #d2d278, #eeeecd);
	}
.sub.page-id-23 aside p,
.sub.page-id-23 aside code { color: rgba(0,0,0,0.8); text-shadow: 1px 1px 1px rgba(255,255,255,0.8); }

/* semantic markup */
.sub.page-id-24 pre   { background-color: rgba(204,153,102,0.33); }
.page-id-24 h2,
.sub.page-id-24 aside,
.sub.page-id-24 .line { background-color: rgba(204,153,102,0.77); }
.sub.page-id-24 .line {
	background-image: -webkit-gradient(linear, right top, left top, from(#eeddcd), to(#d8b089));
	background-image: -webkit-linear-gradient(right, #eeddcd, #d8b089);
	background-image:    -moz-linear-gradient(right, #eeddcd, #d8b089);
	background-image:     -ms-linear-gradient(right, #eeddcd, #d8b089);
	background-image:      -o-linear-gradient(right, #eeddcd, #d8b089);
	}




@media only screen and (min-width: 850px) {

	section { 
		position: relative;
		}
		aside {
			position: absolute; top: -9px; left: -204px; height: 180px; width: 180px; color: rgba(255,255,255,0.9);
			box-shadow: 0 0 7px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3);
			border-radius: 90px; -moz-border-radius: 90px; -webkit-border-radius: 90px;
			}
			.alt01 { top: -36px; }
			.alt02 { top: -54px; }
			.alt03 { top: -18px; }
			.alt04 { top: -27px; }
			.alt05 { top:  0; }
			.alt06 { top:  45px; }
			.alt07 { top:  171px; }
			.alt08 { top:  126px; }
			.alt09 { top:  536px; }
			.alt10 { top:  90px; }

		.xycss aside {
			left: -222px; height: 198px; width: 198px;
			border-radius: 99px; -moz-border-radius: 99px; -webkit-border-radius: 99px;
			}

}

@media only screen and (min-width: 600px) and (max-width: 849px) {

	#content { width: 90.244%; }

	.main    { top: 180px; right: -18px; }
	.main li { margin: 0 0 45px 0; }
	.main a  {
		width: 108px; font-size: 1.0em;
		-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);
		}
	aside p { padding: 1.385em; margin: 0 0 18px 0; }

	.xycss .s01, .xycss .s02, .xycss .s03 { width: 100%; margin: 0; }

	.page-id-13 .s03 { padding-top: 18px; }

	.line { display: none; }

}

@media only screen and (max-width: 599px) {

	#content { width: 95.122%; top: 198px; margin-bottom: 234px; }

	.main {
		position: absolute; top: -54px; left: 0; 
		font-size: 1.083em; line-height: 2.0775; margin: 0 0 1.385em 0;
		}
	.main ul { width: 100%; }
	.main li { width: 20%; float: left; margin: 0; }
	.main a  { width: 85%; height: 36px; line-height: 36px; margin: 0 auto; }

	aside p { padding: 1.385em; margin: 0 0 18px 0; }

	.xycss .s01, .xycss .s02, .xycss .s03 { width: 100%; margin: 0; }

	.page-id-13 .s03 { padding-top: 18px; }

	#simple-contact-form fieldset label { display: none; }
	#simple-contact-form fieldset input    { width: 91%; margin-left: 3px; }
	#simple-contact-form fieldset textarea { width: 92%; margin-left: 3px; }

	.line { display: none; }

}

@media only screen and (max-width: 480px) {

	.main,
	.main ul { margin: 0; }
	.main li { 
		width: 20%; float: left; clear: none;
		font-size: 1.000em; line-height: 1.500; margin: 0 0 1.500em 0;
		}
	.main a  { 
		width: 100%; height: 36px; line-height: 36px;
		border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0;
		}

}




/* all your code are belong to poetry */