/* 
    http://modularscale.com/scale/?px1=16&px2=360&ra1=1.618&ra2=0
    
    Ideas du jour:
    • 12pt Lato is 16px.
    • if there’s only one column, it doesn’t need to be very wide at all.
    • If base 360 was good enough for the Mayans at least some of the time, it’s good enough for me.
*/
/* Major block-level elements */
html {
    background: #19408C;

    color: #E6E6E6;
    font: 400 12pt/1.254 Lato, "Corbel", sans-serif; /* Corbel must be quoted for IE<9 */
    margin: 0;
    padding: 0; 
}

body {
    margin: 0;
    padding: 0;
}

nav[id=menu] {
	position: absolute;
	top:   1.25em;
	right: 1.25em;
	width: 4em;
	padding: 0;
	margin: 0;
	text-align: right;
}

nav a:hover {
	text-decoration: underline;
}

#googlies {
   display: none;
}

/* Less-important block-level elements */

h1, h2, h3, h4, h5, h6 {
	font-size: 24pt;
	margin: 0;
	padding: 0;
	line-height: 1;
}

header {
    background: black;
    color: white;
    
    text-align: center;
    padding: 1em 0;
}

header h1 {
    font-style: italic;
    font-weight: bold;
    font-size: 48pt;
    line-height: 1;
}

#tagline {
    font-weight: 300;
    font-style: italic;
}

h2 {
    font-size: 16pt;
}

h3 {
    font-size: 14pt;

}

h4, h5, h6 {
    font-size: 13pt;
}

#content h1, h2, h3, h4, h5, h6 {
    margin: .75em 0 .5em;
}

#content, header h1 {
    margin: 0 auto;
}

#content {
    max-width: 360pt;
    margin: 0 auto;
    padding: 0 10px;
}

p {
    margin: .5em 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    padding-left: 1.5em;
}

li {
    margin: 0;
    padding: 0;
}

code {
	font-family: Consolas, "Lucida Console", Monaco, monospace;
}

article, aside, dialog, figure, footer, header,
 hgroup, menu, nav, section {
    display: block;
}

/* Random other elements  */

a:link {
    color: #dd0;
}

a:visited {
    color: #990;
}

.hidden {
    display: none;
}


a img {
    border: none;
}


@media only screen { /* hide SVG googlies from IE < 9 */
    html {
    }
    
    header {
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#19408C));    
        background-image: -webkit-linear-gradient(bottom, #19408C 0%, #000000 100%);
        background-image: -moz-linear-gradient(bottom, #19408C 0%, #000000 100%);
        background-image: -ms-linear-gradient(bottom, #19408C 0%, #000000 100%);
        background-image: -o-linear-gradient(bottom, #19408C 0%, #000000 100%);
        background-image: linear-gradient(bottom, #19408C 0%, #000000 100%);
    }
    
    header h1 {
        max-width: 720px;
    }
    
    /* don't need this if you've got googlies! */
    nav#menu {
        display: none;
    }
    
    #googlies, #googlies a {
        display: block;
    }
    
    #googlies img {
        position: fixed;
        right: -50px;
        width: 100px;
        height: 100px;

        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    
        -webkit-transition: right .125s ease-in-out;
        -moz-transition: right .125s ease-in-out;
        -ms-transition: right .125s ease-in-out;
        -o-transition: right .125s ease-in-out;
        transition: right .125s ease-in-out;
    }
    
    #googlies img[src='/Images/googly-standard.svg'] {
        top: 0px;
    }
    
    #googlies img[src='/Images/googly-github.svg'] {
        top: 100px;
    }
    
    #googlies img[src='/Images/googly-tumblr.svg'] {
        top: 200px;
    }
    
    #googlies img:hover {
        right: -30px;
    }
}

@media screen and (max-width: 480px) {
    html {
        margin: 0;
        padding: 0 0 44px;    
    }

    body {
        padding: 0;
        margin: 0;
    }

    pre.super-wide {
        white-space: normal;
    }

    h1 {
        margin: .25em 0;
    }
    
    #content {
        margin: 0 .5em;
    }

    nav {
        position: absolute;
        top:     .5em;
        right:   .5em;
        padding: 0;
        margin:  0;
        text-align: right;
    }

    nav ul {
        margin: 0;
        padding: 0;
    }

    nav li {
        font-size: larger;
        list-style-type: none;
        border: 1px solid #35558e;
        -webkit-border-radius: .5em;
        margin: .25em 0;
        text-align: center; 
    }

    nav a:link, nav a:visited {
        text-decoration: none;
    }

    img[src="/Images/drink-colorizer-preview.png"] {
        width: 50%;
    }
    
    #googlies img {
        width: 50px;
        height: 50px;
        right: -25px;
    }
    
    #googlies img[src='/Images/googly-standard.svg'] {
        top: 0px;
    }
    
    #googlies img[src='/Images/googly-github.svg'] {
        top: 50px;
    }
    
    #googlies img[src='/Images/googly-tumblr.svg'] {
        top: 100px;
    }
    
    #googlies img:hover {
        right: -30px;
    }
}

@media print {
    html, body {
        background: white;
        color: black;

        margin: 0;
        padding: 0;
    }
    
    header {
        padding: 0;
        border-bottom: thin solid black;
    }
    
    #content {
        margin: 0;
        padding: 0;
    }

    nav {
        display: none;
    }

    a:link, a:visited {
        color: black;
    }
}