@import './sanitize.css';

body
{
    background-color:#fdfdfd;
    font-family: 'PT Serif', serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6em;
    color: #000;
}

div.container
{
    margin:50px auto;
}

div.header {
    max-width:800px;
    margin: 0px auto 40px auto;
}

div.header div.logo
{
    background-position: center;
    /* background:transparent url( '/assets/img/type.png' ) no-repeat; */
    font-family: 'PT Sans', sans-serif;
    font-size: 36px;
    font-weight: 900;
    height:19px;
    margin: -20px auto;
}

div.header div.nav
{
    height:19px;
    margin: -23px auto 0px auto;
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #000;
    letter-spacing: 1.27px;
    text-transform: uppercase;
    text-align: right;
}

div.nav li {
    display: inline;
    padding: 0px 4px 0px 8px;
    border-right:1px solid #232323;
}

div.nav li.last {
    border-right:none;
}

div.topimage {
    position: relative;
    height: 500px;
    background-size: cover;
    background-position: center;
}

div.topimage div.fade {
    height: 100px;
    opacity: 0.5;
    width: 100%;
}

div.topimage div.in {
    background-image: linear-gradient(0deg, transparent 0%, #232323 100%);
    top: 0px;
}

div.topimage div.out {
    position: absolute;
    background-image: linear-gradient(-180deg, transparent 0%, #232323 100%);
    top: auto;
    bottom: 0px;
}

div.topimage p.imgcredit {
    color: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0px 20px 10px 20px;
    margin: 0px;
    font-size: 10px;
    font-family: 'PT Sans', sans-serif;
    display: block;
}

div.intro {
    font-family: 'Zilla Slab', sans-serif;
    font-style: italic;
    background: #232323;
    color: #eee;
    text-align: center;
    padding: 30px 0px 50px 0px;
}

h1 {
    font-size: 38px;
    margin-bottom: 0.7 em;
}

div.intro p.subhead {
    opacity: 0.8;
    border-bottom: 1px dotted #eee;
    font-family: 'PT Sans';
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    /* color: #de5e5e; */
    letter-spacing: 1.67px;
    line-height: 22px;
    text-transform: uppercase;
    width: 320px;
    margin: -10px auto 40px auto;
}

div.intro p.subhead em {
    display: block;
    margin-bottom: -11px;
}

div.intro p.subhead em span{
    background: #232323;
    padding: 0 5px 0 7px;
    white-space: nowrap;
}

div.introtext
{
    max-width:570px;
    padding: 0 10px 0 10px;
    margin:0px auto;
}

div.content
{
    max-width:820px;
    min-height:500px;
    padding: 0 10px 0 10px;
    margin:50px auto 100px auto;
}

div.content h1 {
    line-height: 48px;
}

div.content h2 {
    font-family: 'Zilla Slab', sans-serif;
    font-style: italic;
    font-size: 24px;
    margin: 50px 0px 0px 0px;
}

div.content div.table {
    max-width: 820px;
}

div.content div.table div.row {
    width: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px dotted;
}

div.content div.table div.row p {
    float: left;
    width: 620px;
    font-size: 16px;
    line-height: 1.6em;
    padding: 10px 0px 0px 0px;
    margin-bottom: 10px;
}


div.content div.table div.row p.label {
    width: 200px;
}

div.content a.post {
    display: block;
    font-family: 'Zilla Slab', sans-serif;
    font-style: italic;
    font-size: 30px;
    margin: 50px 0px 0px 0px;
    color: #232323;
}

div.content p.postdetail {
    font-size: 12px;
    margin: 10px 0px 20px 0px;
    color: #232323;
}


div.footer {
    border-top: 1px solid #eee;
    font-family: 'PT Sans';
    font-size: 12px;
    font-weight: 400;
    color: #232323;
    letter-spacing: 1.27px;
    line-height: 22px;
    text-transform: uppercase;
    margin: 0px auto 10px auto;
    text-align: center;
    clear:all;
}

div.footer div {
    width: 50%;
    height: 60px;
    margin: 0px auto 10px auto;
    color: #fff;
    display:flex;
    align-items: center;
    justify-content: center;
}

div.footer div.left {
    float: left;
    background: #424242;
}

div.footer div.right {
    float: right;
    background: #232323;
}

div.footer div.left p, div.footer div.right p {
    white-space: nowrap;
    margin:0px;
}

ul li {
    color: #232323;
    margin-bottom: 1em;
}

ul li span {
    color: #000;
}

ul li span img
{
    margin-bottom:3px;
}

p
{
    margin-bottom:25px;
}

a {
    color: #de5e5e;
}

a:link, a:visited {
    text-decoration: underline;
}

a:hover, a:active {
    text-decoration: none;
}

a.current {
    color: #000;
    text-decoration: none;
}

code {
    font-family: 'Cutive Mono', monospace;
    font-size: 20px;
    border-radius: 3px;
    background: #fe8e8e;
    padding: 3px 5px 2px 5px;
}

pre code {
    font-family: 'Cutive Mono', monospace !important;
    font-size: 16px;
    line-height:1.1em;
    border-radius: 0px;
    padding: 0px;
}