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