<?php
/*
    bbcode (cbparser) styles..
    For pages that have comments, et al.

    This MUST be included, usually via @@module@@ statements. It is /not/ called directly.
*/
echo <<<CSS

#warning-message {
    color: %%h2_color%%;
    background: inherit;
    font-size: 125%;
}


#bbinfo {
    color: %%h5_color%%;
    background: inherit;
    padding-left: 1rem;
    margin-bottom: 6rem;
}

.cb-notice {
    font-weight: bold;
    text-decoration: none;
    font-size: 2.4rem;
    color: red;
    background: inherit;
}

.cbguide {
    padding: 0;
    margin: .2rem 0 0 0;
    color: %%alink%%;
    background: inherit;
    font-size: 90%;
    font-size: 80%;
    width: 100%;
    clear: both;
}

.cbguide a {
    color: %%h3_color%%;
}
.cbinfo {
    margin: 0;
    width: 100%;
    clear: both;
    text-align:  justify;
}
.cbinfo .headers {
    float: left;
    }

.cbinfo .smileys {
    text-align: right;
    float: right;
}
#js-buttons, #symbol-selecta {
    margin-top: .4rem;
    margin-bottom: .4rem;
}
 #symbol-selecta {
    float: right;
}


.cb-buttons {
    float: right;
    margin: 0 0 .5rem;
}
.cb-intro {
    vertical-align: bottom;
    float: left;
}
.editor {
    width: 100%;
    font-size: 80%;
}

/*blockquote { font-size: 95%; }*/

.dropcap1 {
    float: left;
    width: 4.75rem;
    font-size: 8rem;
    line-height: 7rem;
    padding-top: 0.1rem;
}

.dropcap2 {
    float: left;
    width: 5.75rem;
    font-size: 8rem;
    line-height: 7rem;
    padding-top: 0.1rem;
}

.dropcap3 {
    float: left;
    width: 6.75rem;
    font-size: 8rem;
    line-height: 7rem;
    padding-top: 0.1rem;
}

.dropcap4 {
    float: left;
    width: 7.75rem;
    font-size: 8rem;
    line-height: 7rem;
    padding-top: 0.1rem;
}

.dropcap5 {
    float: left;
    width: 8.75rem;
    font-size: 8rem;
    line-height: 7rem;
    padding-top: 0.1rem;
}

.cb-news {
    padding: .5rem;
    margin: .5rem 3rem .5rem;
    width: 12rem;
    float: right;
    color: %%h5_color%%;
    background: transparent;
    text-align: justify;
    font-weight: bold;
    font-size: 200%;
    line-height: 110%;
}
.cb-news::after {
    display: inline-block;
    width: 100%;
    content: "";
}

.teletype, tt {
    font-family: %%code_fonts%%;
    color: %%teletype_color%%;
}

/*    simple [code]code[/code] span */
.code {
    font-family: %%code_fonts%%;
    color: %%code_color%%;
}


/*    [coderz]code[/coderz]
    coderz to be deprecated in favour of code-block which is used site-wide */
.coderz, .code-block    {
    margin: 0.5rem 0 .7rem 0;
    max-width: 95%;
    font-size: 90%;
    font-family: %%code_fonts%%;
    color: %%code_color%%;
    background-color: %%codebox_color%%;
    border-radius: 0.25rem;
    box-shadow:
                0 0 4px 2px %%box_glow%%,
                0 0 10px 4px %%box_glow%%,
                0 0 20px 10px %%box_glow%%;
    padding: .7rem;
}

.cb-ccc {
    font-size: 90%;
    background-color: %%ccc_bg%%;
    padding: 1rem;
    max-width: 800px;
}

cite {
    margin: 0;
    width: 95%;
    font-family: %%font_family%%;
    font-size: 1.8rem;
    color: %%h5_color%%;
    background-color: %%bg_color%%;
    border: %%h5_color%%;
    border-style: dotted;
    border-left-width: 0;
    border-top-width: .1rem;
    border-right-width: 0;
    border-bottom-width: .1rem;
}

.quote {
    min-height: 6rem;
    padding: .5rem 0 0;
    margin: 2rem 4rem 0 2rem;
    font-size: 95%;
    text-align: justify;
    color: %%teletype_color%%;
    background: transparent url("%%quote_img%%") no-repeat 0 .6rem;
}

.quote::before{
    content: "\ ";
    float: left;
}
.quote::before{
    margin: 0 0 6rem 5.5rem; /* by the way, margin: 5rem 5rem 0 0 and others would also work! */
}



.cb-refs-title {
    font-size: 75%;
    vertical-align: super;
    font-weight: bolder;
}
.cb-ref {
    padding: 0;
    margin: 0 0 3rem 0;
    font-family: %%font_family_alt%%;
    color: %%h4_color%%;
}
.reftext {
    font-size: 80%;
    margin-top: 1rem;
    margin-bottom: -1rem;
}
.reftext li {
    padding-bottom: 1.44rem;
}

a.turl { /* no underlining, it is not a "real" link */
    text-decoration: none
}

.two-column {
    width: 100%;
}

.left-column {
/*    float: left;*/
/*    width: 45%;*/
/*    padding-right: 2%;*/
/*    text-align: justify;*/
}

.right-column {
/*    float: right;*/
/*    width: 45%;*/
/*    padding-left: 2%;*/
/*    text-align: justify;*/
}

.cb-table { /* tables with CSS! */
    width: 100%;
    clear: both;
    margin: 0 0 2rem 0;
}
.cb-table-b { /* bordered */
    width: 100%;
    clear: both;
    margin: 0 0 2rem 0;
    padding: .2rem;
}

.cb-table-s { /* spaced-out man */
    width: 100%;
    clear: both;
    margin: 0 0 2rem 0;
    padding: .4rem;
}

.cb-tablerow {
    width: 100%;
    clear: right;
    float: right;
}
.cb-table-b .cb-tablerow {
    /* border: solid .1rem; */
}

/* any combination adds up to 90% */

.cell1 { /* fills the whole row */
    width:100%;
    float: left;
}

.cell { /* regular two-column table cell */
    width:45%;
    float: left;
}

.cell3 { /* three column cell */
    width:30%;
    float: left;
}

.cell4 { /* 4, etc */
    width:22.5%;
    float: left;
}

.cell5 {
    width:18%;
    float: left;
}

.cb-table-b .cell, .cb-table-b .cell1, .cb-table-b .cell2, .cb-table-b .cell3, .cb-table-b .cell4, .cb-table-b .cell5 {
    border: solid .1rem;
    padding: .3rem;
}

.cb-table-s .cell, .cb-table-s .cell1, .cb-table-s .cell2, .cb-table-s .cell3, .cb-table-s .cell4, .cb-table-s .cell5 {
    padding: 1rem;
}

span.box {
    border: solid .1rem;
}

div.box {
    border: solid .1rem;
    vertical-align: middle;
    text-align: center;
    padding: .1rem;
}

.hidden {
    display: none;
}

.cb-hr-regular { /* [hrr] */
    height: .1rem;
    width: 333px;
}

.cb-hr { /* [hr] */
    height: .1rem;
    width: 100%;
    margin-left: 0;
    text-align: left;
}

.cb-hr2 { /* [hr2] */
    width: 5rem;
    text-align: left;
    margin-left: 0;
}

.cb-hr3 { /* [hr4] */
    width: 10rem;
    text-align: left;
    margin-left: 0;
}

.cb-hr4 { /* [hr4] */
    width: 150px;
    text-align: left;
    margin-left: 0;
}

.cb-img, .cb-img-left, .cb-img-right {
    padding: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.left, .cb-img-left {
    float: left;
    margin-right: 2rem;
}

.right, .cb-img-right {
    float: right;
    text-align: right;
    margin-left: 2rem;
}

.fill  {
     width: 100%;
}

/* for the demo */
.fill ul     {
     list-style: square outside url("%%uli_img%%");
}
.fill ul li     {
     padding-top: .4rem; padding-bottom: .4rem;
}
.fill ol li     {
     width: 80%; font-size: 95%; text-align: justify;
}

.cb-center {
    text-align: center;
}

.corz-reply {
    color: %%corz_reply_color%%;
}

.cbguide h4, .headers h4, .smileys h4 {
    margin-bottom: .2rem;
 }

.spoiler  {
     background-image:url("%%spoiler_img%%");
     border:1px solid %%h3_color%%;
}
.spoiler span, .spoiler div  {
     visibility: hidden;
}
.spoiler.hover  {
     background-image: none;
     border:none;
}
.spoiler.hover span, .spoiler.hover div  {
     visibility: visible;
}


.cbform {
    margin-right: 2rem;
}


#warning-message {
    color: %%message_color%%;
}


/*
    For smaller screens..
                                    */
@media screen and (max-width: 920px) {
     .cb-buttons {
        float: none;
    }
    .cbguide {
        font-size: 100%;
        text-align: justify;

    }

    .cb-ccc, code {
        font-size: 66.67%;
    }


}




CSS;
?>