/** Website and all related materials created by and Copyright (C) Skyfaux LLC, 2015 (Unless otherwise noted)
    Skyfaux LLC owned and operated by Kate Greenseth since 2014 */

/* BODY/GLOBAL */
    body {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        margin: 0;
        padding-top: 55px;
        background-color: #FFFFFF;
        background-image: url('images/train_station.jpg');
        background-size: 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    
   
/* HEADER */
    header {
        width: 100%;
        position: fixed;
        top: 0;
    }
    
    .headerPrime {
        padding: 10px;
        background-color: #000000;
        overflow: auto;
    }
    
    .headerRibbon {
        width: 100%;
        height: 5px;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#168400+20,39bf00+21,39bf00+40,A5CE00+41,A5CE00+60,eff759+61,eff759+80,efcb00+81 */
        background: #168400; /* Old browsers */
        background: -moz-linear-gradient(left,  #168400 20%, #39bf00 21%, #39bf00 40%, #A5CE00 41%, #A5CE00 60%, #eff759 61%, #eff759 80%, #efcb00 81%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(20%,#168400), color-stop(21%,#39bf00), color-stop(40%,#39bf00), color-stop(41%,#A5CE00), color-stop(60%,#A5CE00), color-stop(61%,#eff759), color-stop(80%,#eff759), color-stop(81%,#efcb00)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  #168400 20%,#39bf00 21%,#39bf00 40%,#A5CE00 41%,#A5CE00 60%,#eff759 61%,#eff759 80%,#efcb00 81%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  #168400 20%,#39bf00 21%,#39bf00 40%,#A5CE00 41%,#A5CE00 60%,#eff759 61%,#eff759 80%,#efcb00 81%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  #168400 20%,#39bf00 21%,#39bf00 40%,#A5CE00 41%,#A5CE00 60%,#eff759 61%,#eff759 80%,#efcb00 81%); /* IE10+ */
        background: linear-gradient(to right,  #168400 20%,#39bf00 21%,#39bf00 40%,#A5CE00 41%,#A5CE00 60%,#eff759 61%,#eff759 80%,#efcb00 81%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#168400', endColorstr='#efcb00',GradientType=1 ); /* IE6-9 */
    }
    
    header h1 {
        font-size: 12px;
        padding: 5px;
        display: inline-block;
    }
    
    nav a {
        text-decoration: none;
        text-shadow: 1px 1px 1px black;
        font-size: 12px;
        margin: auto 5px;
        padding: 5px;
        color: white;
        display: inline-block;
        float: left;
        border-radius: 2px;
    }
    
    nav a:hover {background-color: #0066FF;}
    
/* TEXT */        
    /* general */
        h1, h2, h3 {
            color: white;
            text-shadow: 2px 2px 1px black;
            margin: 0;
            padding: 10px;
        }
        
        h2 {font-weight: normal;}
        
        p {
            margin: 0;
            padding: 10px 10px 0 10px;
        }
        
        p:last-child {padding-bottom: 10px;}
        
        .textCenter {text-align: center;}
        .strike {text-decoration: line-through;}
        .tall {line-height: 200%;}
        
        .me {
            color: white;
            text-align: center;
            text-shadow: 3px 3px 4px black;
            font-family: Courier, "Courier New", monospace;
            font-size: 70px;
            margin-top: 200px;
        }
    
    /* colors */
        .textWhite {color: white;}
        .textGray {color: gray;}
        
    /* sizes */ 
        .text18 {font-size: 18px;}
        .text14 {font-size: 14px;}

/* BLOCKS */
    .module {
        width: 90%;
        max-width: 800px;
        margin: 20px auto;
        overflow: auto;
    }
    
    .submodule {width: 60%;}
    
    .wide {
        width: 100%;
        margin-top: 150px;
        background-color: white;
    }
    
    .band {
        margin-top: 40px;
    }
    
    #announce {
        font-size: 12px;
        text-align: center;
        width: 100%;
        color: white;
    }
    
    .shaded {
        background-color: initial;
        background-image: url('images/shaded.png');
    }
    
    .marginZeroAuto {margin: 0 auto;}
    .paddingBottomExtra {padding-bottom: 100px;}
    
    .darkgreen {background-color: #168400;}
    .mediumgreen {background-color: #39bf00;}
    .lightgreen {background-color: #A5CE00;}
    .yellow {background-color: #eff759;}
    .gold {background-color: #efcb00;}
    .white {background-color: white;}
    .blue {background-color: #0066FF;}
    .orange  {background-color: orange;}
    .darkgray {background-color: darkgray;}
        
/* FLOATS */
    .floatLeft {float: left;}
    .floatRight {float: right;}
    .floatClear {clear: both;}

/* IMAGES + SPECIAL */
    .logo {
        height: 180px;
        margin-top: 20px;
    }
    
    .book {
        height: 210px;
        margin-top: 20px;
    }
    
    .skyfaux {
        height: 250px;
        margin-top: 10px;
    }

/* FOOTER */
    footer {
        width: 100%;
        margin-top: -20px;
        border-top: 2px solid black;
        background-color: gray;
    }
    
    footer h3 {margin-top: 20px;}
    
    footer em {
        color: white;
        text-shadow: 1px 1px 1px black;
        font-weight: bold;
        font-style: normal;
    }
    
    footer a {
        color: white;
    }
    
    .copyright {
        text-align: center;
        color: white;
    }
        
@media screen and (max-width: 800px) {

    img {
        display: block; 
        margin: auto;
    }

    .me {margin-top: 40px;}
    .wide {margin-top: 50px;}
    .submodule {width: 100%;}
    .floatLeft, .floatRight {float: none;}

}

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

    body {background-size: 600px 450px;}
    
    .me {
        font-size: 40px;
        margin-top: 40px;
    }

}

@media screen and (max-width: 500px) {
    
    nav {
        width: 100%;
        float: none;
    }
    
    nav a {
        font-size: 16px;
        margin: auto;
        border-radius: 0;
    }
    
    .me { margin-top: 60px;}
    .cloak {display: none;}
    
}


@media screen and (max-width: 400px) {
    
    .logo, .skyfaux, .book {max-width: 100%;}
    
}