﻿html {
    background-color: #131518;
}

body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 21px;
    background: url("../img/My_Tartan_Tile.png?v=1");
    margin: 0px;
}

h1 {
    font-size: 1.7em;
    color: #eee;
}

h2 {
    font-size: 1.25em;
    color: #eee;
}

h3 {
    font-size: 1.25em;
    color: #333;
}

h4 {
    font-size: 1.125em;
    color: #333;
}

h1, h2, h3, h4 {
    max-width: 95%;
    padding: 0px 0px 0px 4px;
    margin: 0px auto 0.75em auto;
}

p, a {
    font-size: 1em;
    max-width: 90%;
    padding: 0px 0px 8px 0px;
    margin: 0px auto 0.75em auto;
}

a {
    /*color:#ADBDFF;*/
    color: rgba(41,137,216,1);
}

    a:hover {
        text-decoration: none;
    }

ul {
    font-size: 0.9em;
    max-width: 75%;
    padding: 0px 0px 8px 0px;
    margin: 0px auto 0.75em auto;
    list-style: circle;
}

li {
    margin:0px 0px 12px 0px;
}

.timestamp {
    font-size:0.7em;
}

.story {
    min-height:400px;
}

.image {
    float:left;
    width:300px;
    margin:0px 0px 0px 1em;
}

.image>img {
    width:272px;
}

.clear {
    clear: both;
}

/* Font Trickery */
.smallCaps, h3, h4 {
    text-transform: uppercase;
}

    .smallCaps:first-letter,
    h3:first-letter,
    h4:first-letter {
        font-size: 1.25em;
    }

.alert {
    color: #FFEB00;
}

/* PRIMARY LAYOUT */

.whitespace {
    margin:0px;
    user-select:none;
}

.whitespace-bottom {
    margin: 0px 0px 2em 0px;
    user-select: none;
}

.centerAllContent {
    margin: 0px auto;
}

.centerBody {
    margin: 0px 0px;
    background: #131518 url("../img/hexgrid.png") repeat scroll;
    -webkit-box-shadow: 0px 0px 16px 4px #202429;
    box-shadow: 0px 0px 16px 4px #202429;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
}

.centered {
    max-width: 75%;
    text-align: center;
    font-size: 0.9em;
    background-color: rgba(255,255,255,0.1);
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

header {
    padding: 24px;
    margin: 0px auto;
    max-width: 272px;
}

    header img {
        width: 100%;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
    }

main {
    padding: 4px 0px;
    color: #eeeeee;
}

    main > p {
        padding: 0 8px 12px;
    }

footer.legal {
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
    background-color: #131518;
}

.legal > div {
    color: #eeeeee;
    clear: both;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* -- MEDIA QUERIES -- */

@media screen and ( min-width: 1600px ) {
    .centerAllContent {
        width: 1572px;
    }
}

@media screen and ( max-width: 1599px ) {
    .centerAllContent {
        width: 1256px;
    }
}

@media screen and ( max-width: 1279px ) {
    .centerAllContent {
        width: 1000px;
    }
}

@media screen and ( max-width: 1023px ) {
    .centerAllContent {
        width: 740px;
    }
}

@media screen and (max-width: 767px ) {
    .centerAllContent {
        width: 540px;
    }
}

@media screen and ( max-width: 567px ) {
    .centerAllContent {
        width: 320px;
    }
}