<?php
/*
	Base styles..
	NOTE: This MUST be included, usually via @@module@@ statements. It is /not/ called directly.
*/
echo <<<CSS
/* reset browser styles.. */
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, font, img, ins, kbd, q, s, samp, small,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: inherit;
	font-family: inherit;
	vertical-align: baseline;
	background: none;
}
html {
	width: 100% !important;
	height: 100% !important;
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* 1rem now= 10px, probably */
}
body {
	color: %%textcolor%%;
	background-color: %%bg_color%%;
	font-family: %%font_family%%;
	font-size: %%textsize%%;
	line-height: normal;
	-webkit-text-size-adjust: auto;
}

/* google ad units scheme test
#adunit {
	background-color: %%bg_color%% !important;
} */

/* HTML5ness for poor browsers.. */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
img {
	background-position: center;
}
abbr, acronym {
	border-bottom: .1rem dotted #000;
	cursor: help;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
	padding-right: .3rem;
}
blockquote::before, blockquote::after, q::before, q::after {
	content: "";
}
blockquote, q {
	font-size: %%textsize%%;
	quotes: "" "";
}
blockquote, ul, ol {
	margin: .75rem .75rem .75rem 1.5rem;
}

/* handy structural "blockquote" block */
.block-quote {
	margin: 0 12% 0 4%;
	text-align: justify;
}

ol, ul, dl {
	margin-left: 4rem;
}
ol li {
	list-style: decimal outside;
}
ul li {
	list-style: square outside url("%%uli_img%%");
}

.ul-header li {
	margin: .3rem 0;

}

p, fieldset, table {
	margin-top: %%textsize(+.1)%%;
	margin-bottom: 1rem;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}

:link {
	transition: all 100ms ease-out 0s;
	color: %%alink%%;
	text-decoration: none;
}
:visited {
	color: %%a_visited%%;
	text-decoration: none;
}
a:hover {
	color: %%a_hover%%;
	text-decoration: underline;
}
a:active {
	color: %%a_active%%;
	text-decoration: none;
}
:focus {
	outline: 0;
}


/* special cursors for special links */

/* new tab/window */
a[onclick^=window] {
	cursor: crosshair;
}
/* pop-up windoid */
a[onclick^=Open] {
	cursor: url("/img/cursor/Pop-Up_Cursor+arrow+windoid_32px.png") 21 20, move;
}
.js-link {
	cursor: move;
}


small {
	font-size: 75%;
}
big {
	font-size: 125%;
}

tt {
	font-family: %%code_fonts%%;
	color: %%teletype_color%%;
}
code {
	font-family: %%code_fonts%%;
	color: %%code_color%%;
}
pre, .pre {
	tab-size: 4 !important;
	-moz-tab-size: 4 !important;
	-o-tab-size: 4 !important;
	white-space: pre;
	font-family: %%code_fonts%%;
	color: %%pre_color%%;
	text-align: left;
}
.strike-through {
	color: %%textcolor%%;
	text-decoration:line-through;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { /* Opera! */
	background-color: inherit;
	font-family: %%font_family%%;
	font-weight: 800;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	display: block;
	margin: 2rem 0 1.5rem;
}

h1, .h1 {
	color: %%h1_color%%;
/*	font-size: 220%;*/
	font-size: %%textsize(*2.2)%%;
}
section h1 {
	color: %%h1_color%%;
/*	font-size: 175%;*/
	font-size: %%textsize(*1.75)%%
}
h2, .h2{
	color: %%h2_color%%;
/*	font-size: 175%;*/
	font-size: %%textsize(*1.75)%%;
}
h3, .h3 {
	color: %%h3_color%%;
/*	font-size: 150%;*/
	font-size: %%textsize(*1.5)%%;
}
h4, .h4 {
	color: %%h4_color%%;
/*	font-size: 133%;*/
	font-size: %%textsize(*1.33)%%;
}
h5, .h5 {
	color: %%h5_color%%;
/*	font-size: 125%;*/
	font-size: %%textsize(*1.25)%%;
}
h6, .h6 {
	color: %%h6_color%%;
/*	font-size: 120%;*/
	font-size: %%textsize(*1.2)%%;
}

/* main content block on all pages */
.content {
	position: relative;
	width: 67%;
	max-width: 1024px;
	margin: %%top_space%% auto 0;
	z-index: 10;
}

/* for content blocks */
.super-wide {
	margin-left: 2rem;
	margin-right: 2rem;
}

#tool {
	margin: 2rem auto 0;
}

sup, .sup {
	vertical-align: super;
}

/* handy for headers */
.top, h1:nth-child(1), .semi-sub {
	margin-top: 0;
}
/* for sub headers */
.sub {
	margin-top: -0.5rem;
}
.super-sub {
	margin-top: -1.5rem;
	margin-bottom: 3rem;
}
 /* for inside the head tag - only for SHORT phrases (wraps badly!) */
.small-sub {
	position: relative;
	top: -1rem;
	font-size: 66%;
}


/* for links that are only information, no HREF */
.info {
	color: %%textcolor%%;
}
.info:hover {
	color: %%a_visited%%;
}

.byline {
	padding: 0;
	margin: 0;
	color: %%alink%%;
	font-size: 80%;
}

.warning {
	color: %%warning_color%%;
	font-weight: bold;
}

/* for chunks of active text we want to look like regular text */
.bodytext {
	color: %%textcolor%%;
}


/* hover over images */

.dim, .bright:hover {
	transition: all 150ms ease-out 0s;
@@semi-opaque(o=90)@@
}
.dimmed {
	transition: all 150ms ease-out 0s;
@@semi-opaque(o=80)@@
}
.dimmer {
	transition: all 150ms ease-out 0s;
@@semi-opaque(o=63)@@
}
.dimmest {
	transition: all 150ms ease-out 0s;
@@semi-opaque(o=45)@@
}
.dim:hover, .dimmed:hover, .dimmer:hover, .dimmest:hover, .bright {
@@opaque@@
}

.active {
	cursor: move;
}

/* glows and shadows */

.shadowed {
	box-shadow: .5rem .5rem 1rem .1rem %%box_shadow%%;
}

.hidden {
	display: none;
}

.text-center {
	text-align: center;
}
.block-center {
	margin: 0 auto;
}
.centered {
	text-align: center;
	margin: 0 auto;
}

.content ul {
	list-style: square outside url("%%uli_img%%");
}

.breakable {
	word-wrap: break-word; /* or "normal" */
	overflow-wrap: break-word;
}
.indented { margin-left: 2rem; }
.extra-indented { margin-left: 4rem; }
.super-indented { margin-left: 6rem; }
.text-right { text-align: right; }


/* pulls title images way left, e.g. corzoogle pages */
.neg-indent {
	position: relative;
	left: -2rem;
}
.neg-indent-mega {
	position: relative;
	left: -6rem;
	bottom: -2rem;
}


/* pop-up title tips.. */
.tip {
	color: %%a_visited%%;
}

.js-link {
	cursor: move;
}


/*

	handy spacers
						*/


.space-big, .space-half, .space-quarter, .space-small, .space-tiny, .space-minute {
	overflow: hidden; /* prevent IE expanding the container */
	display: block;
}
.index-break, .clear, .clear-big, .clear-half, .clear-quarter, .clear-small, .clear-tiny, .clear-minute {
	overflow: hidden;
	margin: 0;
	clear: both;
	width: 100%;
	display: block;
}

.space-big { height: 20rem; }
.space-half { height: 10rem; }
.space-quarter { height: 5rem; }
.space-small { height: 2.5rem; }
.space-tiny { height: 1rem; }
.space-minute { height: .25rem; }

.clear-big { height: 20rem; }
.clear-half { height: 10rem; }
.clear-quarter { height: 5rem; }
.clear-small, .index-break { height: 2.5rem; }
.clear-tiny { height: 1rem; }
.clear-minute { height: .25rem; }
.clear { height: .001rem; font-size: 0;}

.clear-right {
	clear: right;
	height: 0;
}
.clear-left {
	clear: left;
	height: 0;
}


/* just handy */
.justify { text-align: justify; }
.smaller { font-size: smaller; }
.larger { font-size: larger; }
.bigger { font-size: larger; }
.small { font-size: small; }
.x-small { 	font-size: x-small; }
.big, .large, big { font-size: large; }
.huge { font-size: x-large; }
.massive { font-size: 10rem; }
.bold { font-weight: bold; }
.vbold { font-weight: 800; }
.bolder { font-weight: bolder; }
.red { color: #FF0000; }
.yellow { color: #FFFF00; }
.pink { color: #FF00FF; }
.green { color: #009900; }
.purple { color: #cc00ff; }
.grey { color: #B5B5B5; }
.black { color: #000000; }


.lo-fi {
	color: %%h1_color%%;
	background-color: transparent;
	position: absolute;
	top: 5rem;
	text-align: center;
	width: 100%;
	font-size: 150%;
}


/* for the first paragraph in many pages */
.intro-block {
	width: 75%;
}

.fill {
	width: 100%;
}
.block-narrow {
	width: 66%;
}
.block-thin {
	width: 50%;
}

.ul-narrow {
	width: 66%;
	font-size: 90%;
}
.ul-spaced li { margin-bottom: 2rem; }

.urltxt {
	font-family: %%font_family_alt%%;
	color: %%urltxt%%;

}


/*

	LEFT/RIGHT + COLUMNS
								*/


/* stackable half-width columns */
.half-size {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	outline: 0;
}


/* two-columns.. */
.two-column {
	width: 100%;
	clear: right;
}

/* for if you need the entire row to highlight on hover, use this.. */
.two-column-row {
	width: 100%;
	clear: right;
	padding: 0;
	float: right;
}
.two-column-row:hover {
	background-color: %%highlight%%;
}

.left, .left-column, .left-title {
	position: relative;
	float: left;
	padding: 0;
}
.left-column {
	padding: 0;
	width: 45%;
}
.right, .right-column, .right-title{
	position: relative;
	padding: 0;
	float: right;
}
.right-column {
	padding: 0;
	width: 45%;
}

.left-column, .right-column {
	text-align: justify;
}
.left-column {
	padding: .5rem 2rem .5rem .5rem;
}
.right-column {
	padding: .5rem .5rem .5rem 2rem;
}

.narrow-column {
	width: 22%;
}
.wide-column {
	width: 72%;
}

/*
	For larger "title" images that want more space around them.
	These images will also automatically scale down on smaller screens
*/

.left-img, .left-img-title, .left-title, .left-img-sub {
	float: left;
}
.left-img-title, .left-title {
	margin: 2rem 2rem .15rem 0;
}
.left-img	 {
	margin: .5rem 2rem .5rem 0;
}

.right-img, .right-img-title, .right-title, .right-img-sub  {
	float: right;
	text-align: right;
}
.right-img-title, .right-title	{
	margin: 2rem 0 .5rem 2rem;
}
.right-img	{
	margin: .5rem 0 .5rem 2rem;

}
.img-sub, .right-img-sub, .left-img-sub {
	color: %%h5_color%%;
	font-size: 70%;
}

.right-text {
	text-align: right;
}

.far-right {
	float: right
}

.thumbnail {
	margin: .5rem;
}

.fancy-thumb {
	outline: .2rem solid %%nav_grad_3%%;
	border: .6rem solid %%my_white%%;
	outline-offset: -.2rem;
}

.fancy-thumb:hover {
	outline: .2rem solid %%my_black%%;
}

.up-arrow, #top-of-page {
	transition: all 100ms ease-out 0s;
	display: inline-block;
	height: 4.8rem;
	width: 4.8rem;
	background-image: url("%%up-arrow-button%%");
	background-repeat: no-repeat;
@@semi-opaque(o=50)@@
}

.previous a:hover .up-arrow, .next a:hover .up-arrow, .up-arrow:hover {
@@opaque@@
}

.rotate-right {
@@rotate-right@@
	float: right;
	margin-left: .5rem;
}

.rotate-left {
	margin-right: .5rem;
@@rotate-left@@
}

#goto-previous, #goto-next  {
/*	display: block;*/
	margin: .5rem 2rem;
	clear: both;
}
#goto-next {
	display: block;
	text-align: right;
}


#top-of-page {
	display: none;
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 300;
}


/*

	Smaller Screens..
							*/

@media screen and (max-width: 920px) {
	.content {	/* move this to 800!*/
		margin-top: %%top_space_mobile%%;
		padding-right: 2rem;
		max-width: 80%;
	}
	.auth-container {
		margin: 0 auto;
	}
	.half-size {
		float: none;
		width: 100%;
	}
	footer {
		margin-top: 4rem;
	}

}


@media screen and (max-width: 800px) {
	body {
		font-size: %%textsize(+.5)%%;
	}
	.content {
		clear: both;
		margin-top: %%top_space_mobile%%;
		padding: 0;
		width: 98%;
	}
	.intro-block {
		width: 100%;
	}
	.content p {
		text-align: justify;
	}

	.narrow {
		max-width: 100%;
		margin-left: auto;
	}
	.two-column, .two-column-row, .left-column, .right-column, .right, .left, .narrow-column, .wide-column {
		width: 100%;
		clear: both;
		float: none;
		text-align: inherit;
		padding: 0;
		margin: 0;
	}
	.right-column {
		margin-top: 5rem;
	}
	.index-break {
		display: none;
	}
	.img-sub, .right-img-sub, .left-img-sub {
		font-size: 50%;
	}

	.neg-indent, .neg-indent-mega {
		left: 0;
		bottom: 0;
	}
	footer {
		margin-top: 8rem;
	}
	pre {
		font-size: small;
		white-space: pre-wrap ;
	}

	#top-of-page {
		width: 2.4rem;
		background-size: contain;
		top: .75rem;
		right: .5rem;
	}

}


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

	.left-img, .left-img-title, .right-img, .right-img-title, .left-title, .right-title {
		clear: both;
		float: none;
		text-align: inherit;
		padding: 0;
		margin: 2rem auto;
	}

	/* for images we want scaled to small screens */
	.scale, .right-img-title, .left-img-title {
		background-size: 100%;
		width: 94%;
	}
	.massive { font-size: 5rem; }

	.noscale {
		background-size: auto;
		width: auto;
	}
}


@@background-images@@
@@menu-text@@

@@toplinks@@
@@inputs@@
@@text-selections@@

@@scheme-controls@@

@@footer@@


.debug {
	width: 80rem;
	margin: 4rem auto;
}

CSS;
?>