/* Work in progress, created by Ben <dotbitgod@gmail.com>. */

body {
    background: #F7F7F7;
    background: #292e3c;
    font-size: 18px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    word-wrap: break-word;
}

body > header {
    background: #999;
}

.lead {
    font-size: 1.9em;
}

h2 {
    font-size: 1.2em;
    font-weight: bold;
    color: #495f7e;
}

body > footer {
    background: #292e3c url(/images/fancy.jpg) center bottom;
    /* Avoid tiling the background if the footer is too tall. */
    background-size: cover;
    /* This height makes the background fully cover the footer in Tor Browser
     * Desktop, even if zoomed in or out a few times, and doesn't tile the background.
     */
    height: 28em;

    /* Cover up the tagline from the top of the page. */
    position: relative;
    z-index: 0;
}

body > footer > .container, body > footer > .container-fluid {
    opacity: 0.6;
    padding-top: 33px;
}


body > footer a, body > footer a:hover {
    color: #FFF;
}

footer #social, footer #page-alternate, footer #funders, footer #disclaimer {
    float: left;
}

footer #page-source {
    float: right;
    margin-bottom: 10px;
}

footer #page-alternate {
    width: 100%;
}

footer #page-alternate, footer #funders, footer #disclaimer {
    text-align: center;
    padding-top: 0px;
    color: #FFF;
}

footer #funders .funder {
    padding-left: 10px;
    padding-right: 10px;
}

nav ul li {
    display: inline;
}

#fancy-graphic {
    height: 350px;
    background: #292e3c url(/images/fancy.jpg) center top fixed;
    padding-top: 125px;
}

#fancy-graphic p {
    font-size: 4em;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #FFF;
    margin: 0px 0px 0px 40px !important;
    line-height: 1;
    text-shadow: 1px 1px 1px #000;
    opacity: 0.6;
    position: fixed;
    z-index: 0;
}

@media (max-width: 549px) {
  #fancy-graphic {
    height: 262.5px;
    padding-top: 93.75px;
  }
  
  #fancy-graphic p {
    font-size: 3em;
  }
}

@media (max-width: 399px) {
  #fancy-graphic {
    height: 218.75px;
    padding-top: 78.125px;
  }
  
  #fancy-graphic p {
    font-size: 2.5em;
  }
}

#content {
    position: relative;
    z-index: 9;
    background: #F7F7F7;
    padding: 40px;
}

#content video, #content img {
    max-width: 100%;
}

table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid #999;
    padding: 0.5em;
}

/* Fix deeplinks to elements ("a" exception is for FAQ ToC) */
*:not(a)[id]:before {
    display: block;
    content: " ";
    margin-top: -51px;
    height: 51px;
    visibility: hidden;
}

/* Fix invisible hyperlink occlusion (e.g. on Downloads page) caused by above
 * deeplink workaround.  Does not break hyperlinks inside headings (e.g. home
 * page's News section) or top menu bar drop-downs. */
p {
    position: relative;
    z-index: 1;
}

/* TODO: refactor this */
@media (max-width: 1003px) and (min-width: 768px) {
    /* Fix deeplinks to elements (double-height menu bar) ("a" exception is for FAQ ToC) */
    *:not(a)[id]:before {
        display: block;
        content: " ";
        margin-top: -101px;
        height: 101px;
        visibility: hidden;
    }
}

/* Sponsored exchanges styling (only present on Exchanges page) */

.exchanges-gold {
    font-size: 130%;
}
.exchanges-silver {
    font-size: 115%;
}
.exchanges-bronze {
    font-size: 100%;
}
.exchanges-basic {
    font-size: 85%;
}

.exchange-logo {
    height: 4em;
}

/* The provided FreeBitcoins logo needs to be cropped to display properly; this CSS trick does so. */
.exchange-logo-altquick {
    width: 27em;
    object-fit: cover;
}

/* Begin nojs */

html.nojs .dropdown-toggle:focus + .dropdown-menu, html.nojs .dropdown-toggle:active + .dropdown-menu, html.nojs .dropdown-menu:focus, html.nojs .dropdown-menu:active, html.nojs .dropdown-menu:hover {
    display: block;
}

html.nojs .navbar-header {
    float: left;
}
@media (max-width: 767px) {
    html.nojs .navbar-toggle:focus + .collapse, html.nojs .navbar-toggle:active + .collapse, html.nojs .collapse:focus, html.nojs .collapse:active, html.nojs .collapse:hover {
        display: block;
    }
    
    html.nojs .collapse {
        padding-top: 2em;
        max-height: none;
    }
    
    html.nojs .dropdown-menu {
        float: none;
        position: static;
    }
}
@media (min-width: 768px) {
}

/* End nojs */