body {
    margin: 0;
    padding: 30px;

    background: #e8e8e8;
    background-image:
        linear-gradient(#f5f5f5, #aaa);
     color: #222;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/*
.edition {
  background: yellow;
  color: black;
}*/


.edition {
    display: inline-block;

    position: relative;

    margin-bottom: 24px;

    padding: 8px 16px;

    border: 1px solid #333;

    border-radius: 20px;

    background:
        linear-gradient(
            to bottom,
            #666,
            #222 45%,
            #000
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 4px rgba(0,0,0,.6),
        0 0 12px rgba(51,136,255,.4);

    overflow: hidden;
}

.edition::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -30px;
    width: 40px;
    height: 180%;
    background: rgba(255,255,255,.15);
    transform: rotate(20deg);
    pointer-events: none;
}


.edition-label {
    color: #ccff00;

    font-size: 10px;
    font-weight: bold;

    text-transform: uppercase;
    letter-spacing: 2px;

    text-shadow:
        0 0 5px #ccff00,
        0 0 12px rgba(204,255,0,.8);
}

#dateline {
    color: white;

    font-size: 13px;

    margin-left: 6px;

    text-shadow:
        0 1px 0 black,
        0 0 8px rgba(51,136,255,.25);
}

.edition-sep {
    color: #ff6600;

    margin: 0 8px;

    text-shadow:
        0 0 5px #ff6600;
}

.edition-note {
    color: #ddd;

    font-size: 10px;

    letter-spacing: 1px;

    text-transform: lowercase;
}



#page {
    max-width: 650px;
    margin: 0 auto;
}

#links {
    max-width: 800px;
}

h1 {
    display: inline-block;

    margin: 0 0 30px 0;
    padding: 10px 20px;

    border: 1px solid #442266;
    border-radius: 8px;

    background:
        linear-gradient(
            to bottom,
            #ffffff 0%,
            #d9c7ff 8%,
            #8833ee 45%,
            #5522aa 55%,
            #331166 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 -2px 4px rgba(0,0,0,.25),
        0 2px 0 #fff,
        0 4px 20px rgba(136,51,238,.45);

    text-shadow:
        0 1px 0 rgba(255,255,255,.3),
        0 -1px 2px rgba(0,0,0,.5);
}

h1 a,
h1 {
    color: white;

    font-family: Georgia, serif;
    font-size: 46px;
    font-weight: bold;

    letter-spacing: -2px;

    text-decoration: none;
}



.tagline {
    display: inline-block;
    position: relative;
    margin-left: 16px;
    padding: 6px 16px 5px 16px;
    background: linear-gradient(
        to bottom,
        #fffd77 0%,
        #fff040 100%
    );

    color: #111;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: rotate(-4deg);
    border-radius: 2px;
    box-shadow:
        0 2px 0 rgba(0,0,0,.3),
        3px 4px 8px rgba(0,0,0,.25);
    text-shadow:
        1px 1px 0 rgba(255,255,255,.4);
}

.tagline::before {
    content: "";

    position: absolute;
    top: 1px;
    left: 6px;
    right: 6px;
    height: 40%;
    background: rgba(255,255,255,.25);
    pointer-events: none;
}

.tagline::after {
    content: "";

    position: absolute;

    width: 22px;
    height: 12px;

    top: -4px;
    right: 12px;

    background: rgba(255,255,255,.35);

    border-left: 1px solid rgba(255,255,255,.5);
    border-right: 1px solid rgba(255,255,255,.15);

    transform: rotate(9deg);

    pointer-events: none;
}

.tagline {
    font-family:
        "Comic Sans MS",
        "Trebuchet MS",
        sans-serif;
}

h1::after {
    content: "";

    display: block;

    height: 4px;
    margin-top: 8px;

    background:
        linear-gradient(
            to right,
            #ff0066,
            #ff6600,
            #ccff00,
            #3388ff,
            #8833ee
        );

    border-radius: 2px;
}

article {
    margin-bottom: 20px;
    background: white;
    border: 1px solid #bbb;
    border-top: 4px solid #3388ff;
    padding: 25px;
    box-shadow:
        0 1px 0 #fff,
        0 1px 6px rgba(0,0,0,.15);
}

article:hover {
    border-top-color: #ff0066;
    box-shadow:
        0 1px 0 #fff,
        0 0 15px rgba(255,0,102,.25);
}

article h2 {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
}

article h2 a {
    color: #3388ff;
    text-decoration: none;
}

article h2 a:hover {
    color: #ff0066;
    text-decoration: underline;
}

.url {
    font-size: 11px;
    color: #777;
    font-family: 'Courier New', Courier, monospace;
}

.url a {
    color: #777;
}

small {
    display: block;
    margin-top: 6px; 
    color: #8833ee;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

p {
    margin-top: 10px;
}

hr {
    height: 1px;

    border: 0;

    background: linear-gradient(
        to right,
        #ff0066,
        #ff6600,
        #ccff00,
        #3388ff,
        #8833ee
    );

    margin-top: 15px;
}

.gist-button {
    display: inline-block;

    padding: 10px 18px;

    background:
        linear-gradient(
            to bottom,
            #ff6600,
            #cc3300
        );

    border: 2px solid #ffcc66;

    border-radius: 6px;

    color: white;

    font-weight: bold;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 2px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.6),
        0 2px 6px rgba(0,0,0,.3);

    text-shadow:
        0 -1px 0 rgba(0,0,0,.4);
}

.gist-button:hover {
    background:
        linear-gradient(
            to bottom,
            #ff8800,
            #ff0066
        );
}

div#posting {
    background: #eee;
    border: 1px solid #777;
    padding: 35px;
    margin: 25px;
    width: 500px;

}