<?php
/*
    Footer styles..
    Many of these elements /appear/ higher up on the page, but are actually created in the footer.
    NOTE: This MUST be included, usually via @@module@@ statements. It is /not/ called directly.
*/
echo <<<CSS
.footer {
    position: relative;
    bottom: inherit;
    text-align: center;
    width: 100%;
    margin-top: 55px;
    font-size: 1rem;
    color: %%foot_color%%;
    z-index: 100;
    bottom: -1.66rem;
}
.footer:first-child {
@@semi-opaque(o=99)@@
}
#footer-left {
    position: relative;  /* lifts it up back in line with middle section */
    float: left;
    margin-left: .5rem;
    bottom: 1.98rem;
}

#valid-html, #valid-css {
    position: relative;
@@semi-opaque(o=50)@@
    bottom: -.5rem;
}
#valid-html:hover, #valid-css:hover {
@@opaque@@
}

#footer-right {
    position: relative;
    float: right;
    margin-right: .5rem;
    bottom: 1.98rem;
}

#footer-middle {}

#search {
    transition: all 200ms ease-out 0s;
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    background: url(%%butt-footer-search%%) no-repeat scroll center;
    background-size: contain;
@@semi-opaque(o=50)@@
}
#search:hover {
@@opaque@@
}


CSS;
if ($GLOBALS['site_config']['do_underfoot'] == true) { echo <<<CSS


.underfoot {
    position: relative;
    color: %%h2_color%%;
    background-color: %%footer_bg_color%%;
    padding: 0 2rem 2rem 2rem;
    font-size: smaller;
    display: block;
    z-index: 10;
}
.underfoot a:hover {
    color: %%h5_color%%;
}

#underfoot-buttons {
    float: left;
    width: 29%;
}
#underfoot-quicklinks {
    float: left;
    text-align: center;
    width: 29%;
    padding-left: 6.67%;
}
#underfoot-tools {
    float: right;
    text-align: right;
    margin-left: 3%;
    width: 29%;
}
.undertitle {
    text-transform: lowercase;
    font-weight: 900;
    font-size: 150%;
    color: %%h3_color%%;
    margin: .5rem 0 1rem 0;
}
.undertitle-translate {
    margin-bottom: .2rem;
/*    margin: 1rem 0;*/
}
.undertitle-quicklinks {
    margin-bottom: .5rem;
/*    margin: 1rem 0;*/
}

.flag {
    width: 20px;
}

.undertitle-colors {
    margin-bottom: 0;
}
.undertitle-tools {
    margin-bottom: .25rem;
}
.free-bitcoin {
    font-size: small;
    vertical-align: super;
}


.foot-gradient {
    position: relative;
    height: 2rem;
    clear: both;
    width: 100%;
@@gradient(start=%%bg_color%%,end=%%footer_bg_color%%)@@
}


/* promotions */

.promotion, #my-promotion {
    position: fixed;
    bottom: 2rem;
    z-index: 0;
}
.promotion {
    right: 1rem;
}

.promotion #ad-banner{
    width: 12.2rem;
}

.promotion #ad-skyscraper {
    margin-right: -.5rem;
    width: 16.2rem;
}


#my-promotion {
    left: 1.5rem;
}
.my-promo-plate {
    width: 14rem;
    height: 7.2rem;
    background-color: transparent;
    border: 1px solid %%butt_border%%;
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 7px;
    margin-top: 1rem;
    padding: .5rem .5rem .5rem .25rem;
@@semi-opaque(o=33)@@
}

.my-promo-plate:hover {
    transition: all .1s ease-out 0s;
    background-color: %%promo_background%%;
@@opaque@@
}

.promo-img {
    position: relative;
    float: left;
    margin: .25rem .25rem .5rem .25rem;
}

.my-ad-message {
    padding-top: .25rem;
    margin-right: .5rem;
    position: relative;
    display: block;
    float: right;
    width: 60px;
    text-align: center;
}

.dummy-ad {
    background-color: #fff;
    display: inline;
}



/* Site Notice */
.site-notice {
    font-size: 80%;
    color: %%site_notice%%;
    position: absolute;
    top: 3rem;
    width: 100%;
    text-align: center;
}
.notice-head {
    position: relative;
    font-weight: bold;
}




@media screen and (max-width: 1024px) {
    .promotion, #my-promotion {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
    }
    .promotion, .promotion #ad-banner, .promotion #ad-skyscraper {
        margin: .5rem auto 2rem;
        top: 1rem;
    }
    #my-promotion {
        top: 4rem;
        margin: 0 2rem;
        text-align: justify;
        font-size: 0;
    }
    #my-promotion::after {
        display: inline-block;
        width: 100%;
        content: "";
    }
    .my-promo-plate {
        display: inline-block;
        margin: 0;
    }
}


@media screen and (max-width: 920px) {
    .site-notice {
        font-size: 120%;
        position: relative;
        width: 100%;
        text-align: center;
        clear: both;
    }
    .notice-head {
        position: relative;
    }
    #footer-left, #footer-right  {
        display: none;
    }
    .footer {
        padding-bottom:  1.98rem;
    }
}


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

    .footer {
        padding-bottom:  2.33rem;
    }
    .foot-gradient, .trans-note {
        display: none;
    }
    .underfoot  {
        float: none;
        clear: both;
        margin: 0;
        padding-top: 1rem;
        font-size: 125%;
    }


    .undertitle-translate,  .undertitle-quicklinks, .undertitle-colors {
        margin-bottom: .3rem;
    }
    .undertitle-quicklinks, .undertitle-colors, .undertitle-tools  {
        margin-top: 2rem;
    }

    #underfoot-site-tools {
        padding-left: 1rem;
    }
    #underfoot-buttons, #underfoot-quicklinks, #underfoot-tools {
        width: 95%;
        margin: 0;
        float: none;
        padding: 0;
        text-align: justify;
    }

    #underfoot-buttons img {
        background-size: 100%;
        width: 39px;
    }
}


@media screen and (max-height: 320px) {
    .underfoot {
        display: none;
    }
}

CSS;
} ?>