/* General definitions ========================================== */
:root {
    --trql-green        :   rgba( 130,186,0,1 );
    --trql-blue         :   rgba( 9,161,222,1 );
    --trql-red          :   rgba( 200,0,0,1 );
    --trql-shadow       :   0 20px 15px -15px rgba(0,0,0,.5);
    --trql-whiteBorder  :   1px solid #fff;
}

html { width : 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0;
    margin:0;
    /* background: linear-gradient(to bottom, #96021a 0%,#f81b0d 31%,#f81b0d 100%); */
    background: linear-gradient(to bottom, #96021a 0%,#f81b0d 100%);
}
html * { box-sizing: border-box;
}
html body { padding: 0;
    margin:0;
    color: #fff !important;
    font-family : "Arial Narrow","Lucida Grande","Trebuchet MS",Arial,Helvetica,sans-serif;
    font-family: 'Roboto',arial,sans-serif;
    font-family: 'Open Sans Condensed', sans-serif;
    background: transparent url(/images/cowboy.png) fixed center 70% no-repeat;
    background-size: 60%;
    line-height: 1.7em;
    font-size: 115%;
}

.emphasis,
.emphasis.green {   color: var( --trql-green ); }
.emphasis.blue {    color: var( --trql-blue  ); }

#wrapper { padding:1em 1em 5em 1em; }

.shadow {
    box-shadow: var(--trql-shadow );
}

.constrained { max-width: 100%; height: auto; }

.thanks {
    background: black;
    padding: 1.5em;
    margin-bottom: 2em;
    border-bottom-right-radius: 1em;
}

.warning {
    color: tomato;
}

#logo { width: 100%; border-bottom: 5px solid #500;background: #700 url(/images/TopLogo.png) no-repeat center center; background-size: 100px; height: 5em; position: fixed; top:0; opacity: 0.95;z-index:auto; }
.desktop #logo { background-size: 125px; }

nav { position: fixed;
    top: 1em;
    right: 1em;
}
nav span { text-align:center; verticial-align:middle;padding: 0; margin: 0; line-height:50px; display: block; width: 50px; height: 50px; cursor: pointer; }

#mobileMenu {
    position: fixed;
    top: 92px;
    right: -300px;
    background: #700 !important;
    background-size: cover;
    height: 640px;
    width: 230px;
    height: 430px;
    width: 150px;
    -webkit-transition: right 0.2s ease-out;
    -moz-transition: right 0.2s ease-out;
    transition: right 0.2s ease-out;
    z-index: 300;
}
#mobileMenu ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#mobileMenu ol li {
    color: #fff !important;
    font-size: 100%;
    line-height: 2em;
}

#mobileMenu ol li:hover { background: #f00; }

#mobileMenu ol li.title {
    text-transform: uppercase;
    font-size: 150%;
    font-weight: bold;
    text-shadow: 2px 2px 8px black;
}

#mobileMenu ol li a, #mobileMenu ol li a:link, #mobileMenu ol li a:hover, #mobileMenu ol li a:visited, #mobileMenu ol li a:active {
    display:block;
    margin:auto;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    /* text-shadow: 2px 2px 8px black; */
    font-family: 'Roboto',arial,sans-serif;
    /* font-weight: bold; */
    text-transform: uppercase;
    text-align: center;
    font-size: 80%;
    /* margin-left: 1em; */
}
#mobileMenu ol li a img { display:block;height: auto;width: 30%;margin-left: auto;margin-right: auto; }
#mobileMenuHandle {
    font-family : "Arial Narrow","Lucida Grande","Trebuchet MS",Arial,Helvetica,sans-serif;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    height: 50px;
    width: 50px;
    line-height: 50px;
    right: 1em;
    transform: rotate(90deg);
    background: #d00a11;
    color: #fff;
    top: middle;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0;
    cursor: pointer;
    z-index: 300;
}

#mobileMenuHandle div { text-align: center; margin: 0; vertical-align: middle; line-height:50px;}

lllllllllllfooter { background: #666; color: #eee; position: relative; bottom: 0; height: 12em; width: 100%; font-size:80%; padding: .3em; }
footer { display: flex; flex-direction: column; height: auto; background: #222; font-size: 70%; padding:.5em; }
.desktop footer { display: flex; flex-direction: row; padding:1em; }
footer div.silo { width: 100%; }
.desktop footer div.silo { width: 33%; }
footer div.silo ol { list-style-type: none; margin: 0; padding: 0; width:15em; width:100%; }

footer div.silo ol li a,
footer div.silo ol li a:link,
footer div.silo ol li a:hover,
footer div.silo ol li a:visited,
footer div.silo ol li a:active { text-decoration: none; color:#fff; border-bottom:1px dotted #fff; }

.desktop footer div.silo ol li { display: block; width:98%; }
.desktop footer div.silo ol li a,
.desktop footer div.silo ol li a:link,
.desktop footer div.silo ol li a:hover,
.desktop footer div.silo ol li a:visited,
.desktop footer div.silo ol li a:active { display: inline-block; text-decoration: none; color:#fff; border-bottom:1px dotted #fff; width:100%; }
.desktop footer div.silo ol li a:hover { background: #666; }