/* Giving up and using webfonts */
@font-face {
    font-family: 'smg';
    src: url('/static/fonts/GoudyStM-webfont.eot');
    src: url('/static/fonts/GoudyStM-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/GoudyStM-webfont.woff') format('woff'),
         url('/static/fonts/GoudyStM-webfont.ttf') format('truetype'),
         url('/static/fonts/GoudyStM-webfont.svg#sorts_mill_goudyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'smg';
    src: url('/static/fonts/GoudyStM-Italic-webfont.eot');
    src: url('/static/fonts/GoudyStM-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/static/fonts/GoudyStM-Italic-webfont.woff') format('woff'),
         url('/static/fonts/GoudyStM-Italic-webfont.ttf') format('truetype'),
         url('/static/fonts/GoudyStM-Italic-webfont.svg#sorts_mill_goudyitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

* { 
    margin: 0; 
    padding: 0;
}


html {
    position: relative;
    min-height: 100%;
    font-size: 18px;
}

body {
    color: #444;
    font-family: 'smg', 'Minion Pro', Palatino, Georgia, Times, 'Times New Roman', serif;
    background-color: white;
    padding: 0rem; 
    margin: 0 auto 150px 0;
}

#content {
    width: 100%;
    margin: 0 auto;
}

.content {
    padding-bottom: 30px;
}


h1, h2, h3, p, pre, blockquote, ul, ol, dl, li, video, iframe, table, div.postnav {
    width: 100%;
    max-width: 25rem;
    margin-left: auto;
    margin-right: auto;
}

header h1 {
	color: #888;
    line-height: 1.5rem; 
    font-size: 1rem;
	text-align: right;
	padding-right: 0.75rem;
}

h3.byline {
	width: 35rem;
	text-align: right;
    line-height: 1.5rem; 
    text-transform: lowercase;
	font-variant: small-caps;
    letter-spacing: 0.2rem;
    font-size: .75rem;
    margin: 0 auto;
}

pre {
    overflow: scroll;
    background-color: #ccc;
}

code {
    font-family: "Monaco", monospace;
    font-size: .65rem;
 }

blockquote {
    max-width: 23rem;
	padding-left: 2rem;
	border-left: solid 1px #eee;
}

ul, ol, li {
    overflow: visible;
}

ul, ol {
    padding-left: 10%;
    width: 90%;
    max-width: 25rem;
}



div.photo, img {
    max-width: 40rem;
    width: 100%;   
    height: auto;
    text-align: center;
    margin: 0 auto;
}

img.portrait {
    max-height: 500px;
    width: auto;
    max-width: 100%;
}


img.leftmarginalia {
	height: auto;
	width: 6rem;
	float: left;
}

img.pixels {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges; 
    image-rendering: -o-crisp-edges; 
    image-rendering: optimize-contrast;
    image-rendering: -webkit-optimize-contrast;
	-ms-interpolation-mode:nearest-neighbor;
}

img.exact {
    width: auto;
    height: auto;
    max-width: auto;
    max-height: auto;
}

img.shadow {
    box-shadow: #ccc 3px 3px 5px;
}

img.fixed {
    width: auto;
    height: auto;
}

a {
    color: #0000FF;
    text-decoration: none;
}


h1, h2, h3, h4, h5, h1 a {
    text-decoration: none;
}

p,li {
    line-height: 1.5rem;
    font-size: 1rem;
}

p {
	margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h1 {
    font-weight: normal;
    font-size: 2.25rem;
    line-height: 2rem;
    margin-top: 0px;
    padding-top: 2rem;
    margin-bottom: 1rem;
}


h2 {
    font-weight: normal;
    font-size: 3rem;
    font-variant: small-caps;

    letter-spacing: .3rem;
	line-height: 3rem;

	margin: 3rem auto 1.5rem auto;

    text-align: center;
    text-transform: lowercase;

    max-width: 40rem;

}

h3 {
    letter-spacing: .15rem;
    font-weight: normal;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-variant: small-caps;
    text-transform: lowercase;
    text-align: center;

	margin: 3rem auto;
}

ul,ol {
    padding-left: 3rem;
}

hr {  
    height:1px;
    border:none;
    color: blue;
    line-height: 22px;
    margin-top: 22px;
    margin-bottom: 22px;
}


dl.nav {
    margin: 1.5rem auto;
    line-height: 1.5rem;
    position: relative;
}

dl.nav a, dl.nav a:visited {
}

dl.nav dt {	
    text-align: right;
    width: 12.5rem;
}

dl.nav dd {
    display: block;
    padding-left: 12.6rem;
    margin-top: -1.5rem;
}

.segue {
    text-align: center;
}

.cta {
    text-align: center;
}

cite {
    text-align: right;
    display: block;
    font-style: normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

}

cite:before {
    content: "\2014\0020";
}


iframe.youtube {
    max-width: 100%;
}


@media screen and (min-device-width: 320px) and (max-device-width: 800px) and {
    body {	
	    width: 80%;
	    margin: 0 auto;
	    font-size: 24px;
    }
}



/* tiny screens and smartphones */
@media only screen and (max-width: 600px) {
    html {
		font-size: 16px;
	    width: 100%;
    }

    h1, h2, h3, p, blockquote, ul, ol, dl, li, div.postnav, iframe, table, video {
        max-width: 80%;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    h2 {
        font-size: 2rem;
        line-height: 2rem;
        width: 90%;
        max-width: 90%;
    }
}


.sidenav a, .postnav a, dl, dl a {
    color: #888;
}

h1 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.postnav, .archive p {
    color: #888;
    line-height: 1.5rem; 
    text-transform: lowercase;
	font-variant: small-caps;
    letter-spacing: 0.35rem;
    font-size: .75rem;
    text-align: center;
}

div.archive {
    padding-top: 3rem;
}

.archive h3 {
    margin: 0 auto 3rem auto;
}

.archive p {
    margin-top: 0;
    margin-bottom: 0;
}

.archive h2 {
    margin-bottom: 0;
}

footer, footer a {
}

iframe.soundcloud {
    max-width: 100% !important;
}


.document {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

 .document .frame {
    box-sizing: border-box;
    position: absolute;
    width: 40rem;
    height: 100%;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,1);
    z-index: -1;
}

#pixels {
    z-index: -2;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    cell-padding: 0;
    cell-spacing: 0;
    border-collapse: collapse;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    max-width: 100%;
}

#pixels td {
    width: 10px;
    min-width: 10px;
    min-height: 10px;
    padding: 0;
    margin: 0;     
	background-color: blue;
}

#pixels tr {
    min-height: 10px;
}

abbr {
    text-transform: lowercase;
	font-variant: small-caps;
}

.e {
    font-size: 200%;
    cursor: pointer;
}