/* ============================

Glass v1.5
Core Concepts (Buyog.com 4.0 interface)
(c) 2014 Rye Corradini
Free to use if you really want to -- there's nothing here that's all that amazing

============================ */

.no-js .warning { display: block; }
.js .warning { display: none; }

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    font: 18px 'tendernessregular', Times, serif;
    margin: 0; padding: 0;
    text-align: center;
    background-color: #F7F7F7;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#E7E7E7)); 
}

/* header/nav styles */

header, section, article, aside, nav, footer { display: block; }
header {
    overflow: visible;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 27px;
    text-align: center;
    z-index: 901;
    background-color: steelblue;
}
.no-boxshadow header  {
    border-bottom: 2px inset #777777;
}

header .masthead {
    border-radius: 0 0 100% 100%;
    display: inline-block;
    width: 320px;
    background-color: steelblue;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #11029C),
        color-stop(1, #1C73BA)
    );
    background-image: -o-linear-gradient(bottom, #11029C 0%, #1C73BA 100%);
    background-image: -moz-linear-gradient(bottom, #11029C 0%, #1C73BA 100%);
    background-image: -webkit-linear-gradient(bottom, #11029C 0%, #1C73BA 100%);
    background-image: -ms-linear-gradient(bottom, #11029C 0%, #1C73BA 100%);
    background-image: linear-gradient(to bottom, #11029C 0%, #1C73BA 100%);
    z-index: 902;
}

nav a { text-decoration: none; }
nav a img { border: none; }

header .logo {
    color: white;
    display: inline-block;
    font-family: 'MEgalopolisExtraRegular', sans-serif;
    font-size: 24px;
    padding: 10px 0;
}
.logo {
    text-decoration: none;
}
header .links {
    float: right;
    line-height: 3em;
    margin-right: 10px
}
.links a {
    text-decoration: none;
    color: #AAB;
}
.links a:hover {
    color: #CCF;
}
header h1 { display: inline; margin-left: 10px; color: whitesmoke; }
header h1:before { content: "\bb  "; font-family: arial; font-size: 24px }

/* content/article styles */

.content {
    position: absolute;
    top: 0; 
    bottom: 0;
    left: 0; 
    right: 0;
    max-width: 320px;
    margin: 25px auto 25px;
    padding: 10px;
    border-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* footer styles */

footer {
    clear: both;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    margin: 0; 
    padding: 0.5em 0;
    text-align: center;
    overflow: hidden;

    background-color: steelblue;
    color: #9CBDD8;

           -moz-box-shadow: 0 0 -10px #777777;
        -webkit-box-shadow: 0 0 -10px #777777;
                box-shadow: 0 0 -10px #777777;
}

.no-boxshadow footer  {
    /*border-top: 2px groove #AAA;*/
    border-top: 2px inset #777777;
}

footer .copyright {
    margin-bottom: 10px;
}

footer .badge {
    text-decoration: none;
}
.badge img {
    border: none;
}

}
footer  {
    /*border-top: 2px groove #AAA;*/
    border-top: 2px inset #777777;
}

footer .copyright {
    margin-bottom: 10px;
}

footer .badge {
    text-decoration: none;
}
.badge img {
    border: none;
}

@media all and (max-width: 441px) {
  .content { max-width: 230px; }
}

@media all and (min-width: 442px) and (max-width: 651px) {
  .content { max-width: 442px; }
}

@media all and (min-width: 652px) and (max-width: 819px) {
  .content { max-width: 652px; }
}

@media all and (min-width: 820px) {
  .content { max-width: 100%; }
}