::selection{ background: #1155cc; color: #fff; }
::-moz-selection{ background: #1155cc; color: #fff; }
html {height: 100%;}
body {
    font: 14px/21px "Verdana", "Bitstream Vera Sans", sans-serif;
    width: 100%;
    height: 100%;
    min-width: 320px;
    background: #fff;
    background: -moz-radial-gradient(top center, ellipse cover, #ffffff 0%, #f3f3f3 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, top center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#f3f3f3)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(top center, ellipse cover, #ffffff 0%,#f3f3f3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 100%); /* Opera 11.10+ */
    background: -ms-radial-gradient(top center, ellipse cover, #ffffff 0%,#f3f3f3 100%); /* IE10+ */
    background: radial-gradient(top center, ellipse cover, #ffffff 0%,#f3f3f3 100%); /* W3C */
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}
.c { text-align: center; }
.red {color:red;}
.grey {color: #777;}
a {
    color: #1155cc;
    outline: none;
    text-decoration: underline;
}
a:hover {
    color: #d51007;
}
p, figure, ul, ol, .player-wrap {
    display: block;
    margin: 0 0 15px;
}
iframe {
    border: none;
}
img {
    display: block;
    border: none;
}
.wrap {
    width: 644px;
    margin: 0 auto;
}
h1 a {
    text-decoration: none;
    color: #1155cc;
}

.header {
    padding: 15px 0 5px;
    text-align:center;
}
.header h1 {
    font: 45px/55px "Courier New", "Courier", sans-serif;
    letter-spacing: -4px;
    text-shadow: 1px 1px 1px #000;
    margin: 0 0 20px;
}
.header h1 a:hover, .wrap h1 a:hover {
    color: #1155cc;
}
nav a {
    margin: 0 7px;
    padding: 6px;
}

.wrap h1 {
    margin: 5px 0 18px 0;
}
.wrap p, .wrap h1, .wrap h2 {
    text-indent: 25px;
}
.wrap h1 {
    font-size: 1.8em;
}
.archive li {
    list-style: none;
}
.story {
    margin: 5px 0 20px;
    padding: 15px 20px 0;
    border: solid 1px #ddd;
    box-shadow: 0px 0px 4px rgb(227, 229, 235);
    background: #fff;
}
.story h2 {
    font-size: 1.3em;
    margin: 5px 0 5px;
}
.story figure {
    color: #777;
    border: solid 1px #ddd;
    box-shadow: 0px 0px 4px rgb(227, 229, 235);
}
.story figure img {
    width: 100%;
    height: auto;
}
.story .player-wrap {
    padding-top: 56.25%;
    position: relative;
}
.story .player-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100vh;
}
.story figcaption {
    text-align: left;
    padding: 0 10px;
    font-size: 0.9em;
    overflow: hidden;
}
figcaption small {
    font-size: 0.8em;
    float: right;
}
.author {
    color: #555;
    text-indent: 25px;
    margin-bottom: 15px;
}
.prevnext {
    overflow: hidden;
}
.prevnext a {
    cursor: pointer;
    background: #fff;
    text-decoration: none;
}
.prevnext a:hover {
    box-shadow: 0px 0px 9px rgb(227, 229, 235);
}
.prevnext b {
    vertical-align: 1px;
    font-family: Arial;
}
.prev, .next {
    float: right;
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 20px;
}
.next {float: left;}
.prev {float: right;}

.footer {
    padding: 20px;
    text-align: center;
} 
.footer small {
    font-size: 0.9em;
}
.story ul {
    margin-left: 25px;
    padding: 0;
}
.story ul li {
    margin-bottom: 5px;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .wrap {
        width: 99%;
    }
}
@media only screen and (max-width : 660px) {
    .wrap {
        width: 99%;
    }
}