/* 

TEMP STYLESHEET
Temporary index for jontangerine.com
(c) Jon Tan 2015

Basic CSS
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } table {border-collapse: collapse; border-spacing: 0; }

/*
Type
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@font-face {
font-family: 'Pitch-';
src: url('../t/PitchWeb-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('../t/PitchWeb-Regular.ttf') format('truetype') /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */ ;
}

body{
font-size: 1em;
line-height: 1;
font-family: 'Pitch-', 'Courier New', Courier, monospace;
text-align: left;
color: #3C3131;
background: #f2f2ef;
padding: 0;
}

p{
}

/* [1]
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 19em) {

    body{
    font-size: 1em;
    }
    p,
    ul{
    font-size: 0.9375em;
    line-height: 1.3333333333; 
    }
    a{
    text-decoration: none;
    }

    nav a:link,
    nav a:visited{
    color: rgba(60,65,65,0.66);
    }
    nav a:focus,
    nav a:hover,
    nav a:active{
    color: #3c4141;
    }

    section a{
    /*font-family: "pm", courier;*/
    }
    section a:link,
    section a:visited,
    footer a:link,
    footer a:visited{
    color: #2c3131;
    color: #3C3131;
    text-decoration: underline;
    text-decoration-color: #acb1b1;
    -webkit-text-decoration-color: #acb1b1;
    text-decoration-skip: ink;
    /*border-bottom: 1px solid #acb1b1;*/
    }
    section a:focus,
    section a:hover,
    section a:active,
    footer a:focus,
    footer a:hover,
    footer a:active{
    /*color: #d50;*/
    text-decoration-color: #fa0;
    -webkit-text-decoration-color: #fa0;
    color: #3C3131;
    /*border-bottom: 1px solid #2c3131;*/
    }
    .wordmark .home:link,
    .wordmark .home:visited{
    color: rgba(255, 255, 255, 0.77);
    }
    .wordmark .home:focus,
    .wordmark .home:hover,
    .wordmark .home:active{
    color: #fff;
    }
    section a,
    footer a,
    .wordmark .home{
    transition: 0.5s ease;
    }

    .site-header{
    text-align: center;
    height: 2.5em;
    width: 92%;
    padding: 0 4%;
    background: #2c3131;
    position: relative;
    }
    .wordmark,
    .temp h2{
    font-size: 0.875em;
    letter-spacing: 0.26666666667em;
    text-transform: uppercase;
    }
    .wordmark{
    line-height: 1em;
    color: #fff;
    height: 2.6666666667em;
    margin: 0 auto;
    }
    .wordmark .home{
    padding: 0.8333333333em 2em;
    display: inline-block;/*
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: greyscale;*/
    }

    .site-header{ margin-bottom: 1.6666666667em; }

    /* .index temp */

    .temp section{
    width: 87%;
    max-width: 87%;
    margin: 0 6% 0 7%;
    padding: 0 0 2.6666666667em;
    }
    .temp .briefly p{
    display: inline;
    -webkit-hyphens: auto;
    hyphens: auto;
    }
    .temp .briefly a,
    .temp .briefly i{
    -webkit-hyphens: none;
    hyphens: none;
    }
    .temp .briefly .preface:after,
    .temp .briefly .status:after,
    .temp .briefly .public:after,
    .temp .briefly .formerly:after{
    content: " ¶ ";
    }

    .photograph{
    max-width: 38em;
    margin: 0 auto;
    }
    .photograph img{
    vertical-align: bottom;
    width: 100%;
    }
    .poster{
    max-width: 38em;
    margin-top: 2.6666666667em;
    }
    .poster img{
    vertical-align: bottom;
    width: 100%;
    margin-bottom: 0.6666666667em;
    }
    .poster figcaption{
    font-size: 0.75em;
    line-height: 1.25;
    }

    footer{
    font-size: 0.75em;
    padding: 5.3333333333em 7% 2.6666666667em;
    text-align: center;
    background: transparent url(/i/p/yourstruly.svg) no-repeat center 0;
    background-size: 3.3333333333em;
    }
    footer a:link,
    footer a:visited{
    line-height: 1;
    text-transform: none;
    }
    footer p{
    font-size: 1em;
    line-height: 1.5;
    max-width: 24em;
    margin: 0 auto;
    }
    footer div{
    font-size: 1em;
    }
    footer address{
    display: inline;
    line-height: 1.5;
    }



}

/* [1a]
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 30em) {

    body{
    font-size: 1.0625em;
    }
    p{
    font-size: 1em;
    line-height: 1.5;
    }
    .site-header{ 
    margin-bottom: 5.3333333333em; 
    }
    .temp{
    text-align: center;
    }
    .wordmark{
    font-size: 0.8333333333em;
    }
    .temp section{
    width: 29em;
    text-align: left;
    padding: 0 0 5.3333333333em;
    margin: 0 auto;
    }
    .temp .briefly p{
    -webkit-hyphens: none;
    hyphens: none;
    }
    footer{
    padding-bottom: 5.3333333333em;
    }
    footer p{
    max-width: 33em;
    }

}

/* [2]
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 60em) {

    body{
    font-size: 1.125em;
    }
    nav{
    overflow: visible; 
    }
    nav .label{
    line-height: 22px;
    letter-spacing: 1px;
    }

}

/* [3]
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (min-width: 19em) and (orientation:landscape) {
    body{ -webkit-text-size-adjust: 100%; }
    .site-header{ margin-bottom: 2.6666666667em; }
    .temp section{ padding: 0 0 2.6666666667em !important; }
}

@media screen and (min-width: 60em) and (orientation:landscape) {
    body{ -webkit-text-size-adjust: 100%; }
    .site-header{ margin-bottom: 5.3333333333em; }
    .temp section{ padding: 0 0 5.3333333333em !important; }
}