html, body, head
{
    padding:0px;
    margin:0px;
    background: rgb(32,0,0);
    font-size: 1.1em;
    font-family: sans-serif;
    color:white;
}
div.body
{
    padding-top:75px;
    position:absolute;
    top:0px;
    left:0px;
    background:url("/img/tile.png");
    z-index:10;
    line-height: 0px;
    width:100%;
}
div.floatinghead
{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:20;
    background: rgb(0,0,0);
    height:75px;
    padding:25px;
    transition: height 0.2s ease-out;
}
div.linktray
{
    position:absolute;
    left:0px;
    top:0px;
    display:block;
    width:100%;
    height:100px;
    text-align: center;
    line-height: 125px;
    transition: height 0.2s ease-out;
}
div.linktray a,div.linktray a:active{
    display:inline-block;
    font-size:2em;
    color:white;
    text-decoration: none;
    width:200px;
    height:100px;
    text-align: center;
}
div.linktray a:hover
{
    color:#F6A;
}
img.banner
{
    width:100%;
}
img.logo
{
    height:75px;
    float:left;
}
img.logosmall {
    width:90%;
    height:auto;
    display:none;
}
div.content
{
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    position: relative;
    display:block;
    background: rgba(0,0,0,.8);
    padding:2em;
    line-height: initial;
}
div.innerdiv
{
    width:100%;
}
div.foot
{
    background: rgb(32,0,0);
    color:#FFF;
    line-height: initial;
}
card.legal
{
    display:block;
    width:1024px;
    padding:2em;
    margin-left:auto;
    margin-right:auto;
}
/*
inner components
*/
div.content h1 {
    color:#fa0070;
    margin-bottom:5px;
}
div.content h2 {
    color:#ff80f7;
    margin-bottom:5px;
}
div.content button{
    border: 2px solid red;
    background:#F66;
    border-radius:15px;
    padding:15px;
    margin:15px;
    font-size:1em;
    color:white;
}
div.content button:hover{
    background:#F00;
}
div.content button:active{
    background:#FAA;
}
div.content card{
    width:256px;
    height:300px;
    padding:10px;
    display:inline-block;
    vertical-align:top;
    color:white;
    border:1px solid red;
    border-radius: 10px;
}
div.content a,div.content a:active{
    display:inline-block;
    color:#AAF;
    text-decoration: none;
    text-align: center;
}
div.content a:hover
{
    color:#F6A;
}
/*
Social
*/
div.content card.social
{
    width:325px;
    height:325px;
}
div.social
{
    width:100%;
    text-align: center;
    padding-top:100px;
}
div.content card.volunteer{
    display: inline-block;
    margin: 15px;
    width: 700px;
    height: initial;
    padding: 30px;
    vertical-align: top;
    background:rgba(48,48,48,.6);
    text-align: left;
}
div.content div.center{
    text-align: center;
}
@media only screen and (max-width: 1000px) {
    div.floatinghead
    {
        height:320px;
    }
    div.content
    {
        width: auto;
    }
    card.legal
    {
        width: auto;
    }
    html, body, head
    {
        font-size: 1.5em;
    }
    div.body
    {
        padding-top: 370px;
    }
    img.logo
    {
        display: none;
    }
    img.logosmall {
        width:90%;
        height: auto;
        display: block;
    }
    div.linktray
    {
        display: none;
        position: relative;
        left: -25px;
        width: auto;
        text-align: center;
    }
    img.logo
    {
        float:none;
    }
    div.linktray a, div.linktray a:active
    {
        display:block;
        margin-left: auto;
        margin-right: auto;
    }
}
b{
    color:red;
}