/* Style covering the main page */

/* Footer magic: (from http://mystrd.at/modern-clean-css-sticky-footer/ */
html {
    position: relative;
    min-height: 100%;
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 100%;

    font-size: 10px;
}

footer div {
    padding-left: 10px;
}

body {
    margin: 0 0 20px; /* bottom = footer height */
}
/* End footer magic */

/* Body Styles */
body {
    background-color: white;
    color: black;

    padding: 10px; /* Undo zero margins from footer magic*/
}

/* Header Information */
header {
    background-image: url('/static/img/mathtext.png');
    background-position: -20px -20px;
    webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

header div {
    background: -webkit-gradient(linear, left, right, from(white), to(transparent)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(left, white, transparent); /* Chrome 10+, Saf5.1+ */
    background:    -moz-linear-gradient(left, white, transparent); /* FF3.6+ */
    background:     -ms-linear-gradient(left, white, transparent); /* IE10 */
    background:      -o-linear-gradient(left, white, transparent); /* Opera 11.10+ */
    background:         linear-gradient(left, white, transparent); /* W3C */
    webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}

header img {
    margin-left: 10px;
}

/* Navigation and Button Styles */
nav {
    margin-bottom: 15px;
    font-size: 24px;
    font-family: 'Droid Serif', Georgia, Times, serif;
}

nav ul {
    margin-left: 0px;
    padding-left: 0px;
}

nav li {
    display: inline-flex;
    padding: 2px 0px 2px 0px;
}

nav a, .button {
    background-color: white;
    color: black;
    text-decoration: none;
    border: 1px solid black;
    padding-top: 0px;
    padding-bottom: 3px;
    padding-right: 3px;
    padding-left: 3px;
    webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    outline: none;
}

nav a:hover, .button:hover {
    color: white;
    background-color: black;
    cursor: pointer;
}

/* Inherit the font; otherwise browsers make it look stupid. */
input, button {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

/* Content Styles */
.content {
    margin-left: 15%;
    margin-right: 5%;
    margin-top: 50px;
    font-size: 20px;
    font-family: 'Oxygen', sans-serif;
    font-weight: 400;
}

/* Remove margins on mobile */
@media only screen and (max-width: 480px) {
    .content {
        margin-left: 1%;
        margin-right: 1%;
        font-size: 18px;
    }
}

img {
    max-width: 100%;
    height: auto;
}

/* Typography for essays and other content.
 * Note that this only applies to paragraphs, so that code doesn't get wrapped */
.content p, .content blockquote, .content ul, .content ol, .content figcaption {
    max-width: 40em;
    line-height: 1.4em;
}

.content h1 {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 36px;
    margin-bottom: -10px;
    color: black;
}

.content h1 a, .content h2 a { /* For blog post titles */
    text-decoration: none;
    color: black;
}

.content h2 {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 28px;
    margin-bottom: -10px;
    color: black;
}

.content h3 {
    font-family: 'Droid Serif', Georgia, Times, serif;
    font-size: 24px;
    margin-bottom: -10px;
    color: black;
}

.content a {
    color: black;
    outline: none;
}

#social-row {
    margin-top: 20px;
}

/* (show me more) buttons on the blog: */
.more-button {
    text-decoration: underline;
    font-size: 13px;
}

span.more-button:hover {
    cursor: pointer;
}

pre {
    word-wrap: break-word;
    margin: 0px;
    padding: 10px;
    color: white;
    margin-bottom: 20px;
    background-color: black;
    max-width: 50em;

    /* Make lines wrap in pre, from http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag */
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Make code *smaller* on mobile, so it doesn't wrap */
@media only screen and (max-width: 480px) {
    pre {
        font-size: 7px;
    }
}

pre, code {
    font-family: 'Monaco', courier, monospace;
}

figure {
    border: 1px solid black;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    padding: 0.5em;
    width: 600px;
}

figure img {
    width: 100%;
}

figcaption {
    font-size: 16px;
    font-style: italic;
}