/*
--------------------------------------------------------------------------------
ROBWEYCHERT.COM BASE SCREEN STYLES v5.0
--------------------------------------------------------------------------------
Copyright 2011 Rob Weychert.
All rights reserved.
--------------------------------------------------------------------------------

Hello! So you want to see what's going on under the hood of this design.
Excellent. I learned how CSS works mostly by picking apart other people's code, 
and I welcome you to learn what you can from mine. Just don't go copying and 
pasting wholesale and calling it your own, capisce? I made this site more for 
me than for you. But if you like the work I do and want some of it for yourself, 
you're in luck! I do this sort of thing for a living. Give me a shout at 
rob@robweychert.com.

Before we dive into the CSS, a quick note about the math that will guide much of 
it, followed by some ASCII layout diagrams.

This design's proportions are derived from a scale of sizes developed by 
European typographers in the 16th century that is still in common use today (the 
main type sizes offered in Photoshop, for example). The scale itself is derived 
from western music's diatonic scale (using a fifth's ratio of 2:3 and a fourth's 
ratio of 3:4) and looks like this:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

And here it is at work, defining my proportions:

Text:      18/24
Captions:  14/24
Columns:   36
Gutters:   36
Margins:   72

Below are diagrams that demonstrate the grid I'm using and the three flexible 
layouts it supports.

For narrow viewports (four columns):

                          ----------------------------
                          |           324            |
                          ----------------------------
                          |  |  |  |  |  |  |  |  |  |
                          |  |36|  |36|  |36|  |36|  |
                          |  |  |  |  |  |  |  |  |  |
                          ----------------------------
                          |  |        252         |  |
                          ----------------------------
                          |  |        All         |  |
                          |  |      Content       |  |
                          |  |    (4 Columns)     |  |
                          ----------------------------

For medium viewports (eight columns):

            --------------------------------------------------------
            |                         684                          |
            --------------------------------------------------------
            |    |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |    |
            | 72 |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36| 72 |
            |    |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |    |
            --------------------------------------------------------
            |    |                    540                     |    |
            --------------------------------------------------------
            |    |Main (.medium) & Oversized (.large) Content |    |
            |    |                (8 Columns)                 |    |
            |    |------------------                          |    |
            |    |     108      |  |                          |    |
            |    |------------------                          |    |
            |    |  Supporting  |  |                          |    |
            |    |   (.small)   |  |                          |    |
            |    |   Content    |  |                          |    |
            |    |  (3 Columns  |  |                          |    |
            |    |    Inset)    |  |                          |    |
            |    |------------------                          |    |
            --------------------------------------------------------

For wide viewports (twelve columns):

--------------------------------------------------------------------------------
|                                     972                                      |
--------------------------------------------------------------------------------
|    |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |    |
| 72 |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36|  |36| 72 |
|    |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |  |    |
--------------------------------------------------------------------------------
|    |        252         |  |                    540                     |    |
--------------------------------------------------------------------------------
|    |Supporting (.small) |  |               Main (.medium)               |    |
|    |      Content       |  |                  Content                   |    |
|    |    (4 Columns)     |  |                (8 Columns)                 |    |
--------------------------------------------------------------------------------
|    |                                828                                 |    |
--------------------------------------------------------------------------------
|    |                     Oversized (.large) Content                     |    |
|    |                           (12 Columns)                             |    |
--------------------------------------------------------------------------------

Hopefully these diagrams will help make the values specified in the CSS less 
abstract. Speaking of CSS, this is a .css file, right? I guess I  should put 
some of that in here too. Here goes.

First I'll invoke Eric Meyer's magic spell that resets the browser's default 
styles:

*/
@import "reset.css";
/*

Now the foundation styles for narrow viewports.

--------------------------------------------------------------------------------
CORE ELEMENTS
--------------------------------------------------------------------------------
*/
body {
	color: #303639;
	font: normal 100% minion-pro-1,minion-pro-2,"Times New Roman",Times,Georgia,serif; /* 16px */
	background: #303639 url(patterns/pinstripe.png) top center repeat fixed;
	}
p,
ul,
ol {
/*	margin: 1em 0; */
	}
p {
	text-indent: 2em;
	}
h1+p,
h2+p,
h3+p,
h4+p,
h1+figure+p,
h2+figure+p,
h1+figure+figure+p,
blockquote p:first-child,
p.continued {
	text-indent: 0;
	}
h1,
h2,
h3 {
	font-family: museo-slab-1,museo-slab-2,minion-pro-1,minion-pro-2,Georgia,"Times New Roman",Times,serif;
	font-weight: bold;
	font-weight: 700;
	}
h1 {
	font-size: 2em; /* 36/18 */
	font-weight: 900;
	line-height: 1em;
	text-align: center;
	padding-bottom: .25em; /* 9/36 */
	border-bottom: 8px solid #303639;
	margin-bottom: .666666666666667em; /* 24/36 */
	}
h1+figure {
	margin-top: 0;
	}
h2 {
	font-size: 1.333333333333333em; /* 24/18 */
	line-height: 1.25em; /* 30/24 */
	margin: 1em 0 0 0; /* 24 */
	}
h3 {
	margin-top: 1.333333333333333em; /* 24/28 */
	}
h6.reprint {
	font-style: italic;
	margin-top: 1.33333333333333em; /* 24/18 */
	}
ul,
ol,
blockquote {
	margin: 1.333333333333333em 0; /* 24/28 */
	}
h2+ol,
h2+ul,
h3+ol,
h3+ul {
	margin-top: 0;
	}
h4,
strong {
	font-weight: bold;
	}
em, cite {
	font-style: italic;
	}
/*
.photo {
	border: 4px solid #fff;
	margin-left: -4px;
	-moz-box-shadow: 0 0 8px rgba(48,54,57,.4);
	-webkit-box-shadow: 0 0 8px rgba(48,54,57,.4);
	box-shadow: 0 0 8px rgba(48,54,57,.4);
	}
*/
img,
table,
audio,
hr,
iframe {
	width: 100%;
	}
hr {
	height: 1.333333333333333em; /* 24/18 */
	padding: 0;
	margin: 0;
	border: none;
	}
hr+p {
	text-indent: 0;
	}
::-moz-selection {
	color: #fff;
	background: #c33;
	}
::selection {
	color: #fff;
	background: #c33;
	}
.clear {
	clear: both;
	margin: 0;
	}
/*
--------------------------------------------------------------------------------
NARROW VIEWPORT WIDTH LAYOUT + MISC CLASSES
--------------------------------------------------------------------------------
*/
#page {
	font-size: 1.125em; /* 18/16 */
	line-height: 1.333333333333333em; /* 24/18 */
	margin: 0 auto;
	}
header,
#content-wrap,
footer {
	padding: 0 11.1111111111111%; /* 36/324 (1gut/[4col+2gut]) */
	}
header,
footer {
	color: #fff;
/*	font-size: 0.777777777777778em;  14/18 */
/*	font-style: italic; */
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
	}
header {
	padding-bottom: .5em;
	}
footer {
	font-style: italic;
	}
#content-wrap {
	background: #fff; /* url(texture.gif) repeat */
	padding-top: 4em; /* 72/18 */
	padding-bottom: 4em; /* 72/18 */
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	position: relative;
	z-index: 2;
	}
nav.main,
#logo {
	display: block;
	position: relative;
	z-index: 3;
	}
#logo {
	width: 11.1111111111111%; /* 36/324 (1col/[4col+2gut])*/
	margin: 0  auto .5em auto ;
	}
nav.main {
	margin-bottom: .75em;
	}
nav.main ul {
	list-style: none;
	margin: 0;
	}
nav.main li {
	display: inline;
	}
nav.main li:after {
	content: "•";
	margin: 0 .5em;
	}
nav.main li:first-child:after,
nav.main li:last-child:after {
	content: "";
	margin: 0;
	}
.intro {
	text-transform: uppercase;
	letter-spacing: .1em; /* 1.8/18 */
	}
time,
.tags {
	font-style: italic;
	text-align: center;
	}
time {
	clear: both;
	display: block;
	padding-top: 1em;
	border-top: 2px solid #303639;
	margin-top: 2em; /* 36/18 */
	}
/*
.sequence li {
	list-style: none;
	display: inline;
	}
.prev:after {
	content: " | ";
	}
*/
.sequence {
	display: none;
	}
.gallery-entry {
	clear: both;
	}
.gallery-entry h2 {
	margin-bottom: 0;
	}
.gallery-entry h2+p {
	margin-top: 0;
	}
/*
--------------------------------------------------------------------------------
LINKS
--------------------------------------------------------------------------------
*/
a {
	color: #303639;
	}
a:link,
a:visited {	
	text-decoration: none;
	border-bottom: 1px solid #979a9c;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	}
a:hover,
a:focus {
	color: #c33;
	border-color: #c33;
	}
a:active {
	color: #000;
	border-color: #000;
	}
nav.main a {
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid rgba(255,255,255,0);
	}
nav.main a:hover,
nav.main a:focus {
	border-bottom: 2px solid rgba(255,255,255,1);
	}
nav.main a:active {
	}
nav.main .logo a {
	border-bottom: none;
	}
#about .about,
#writing .writing,
#design .design {
	font-style: italic;
	}
/*
--------------------------------------------------------------------------------
LISTS
--------------------------------------------------------------------------------
*/

dl { display: table; }
dt {
	font-weight: bold;
	}
ul,
dd {
	list-style: disc outside none;
	}
ul ul,
ol ul {
	list-style-type: circle;
	}
ol,
ul ol {
	list-style-position: outside;
	list-style-type: decimal;
	}
ol ol,
ul ol ol ol {
	list-style-type: lower-alpha;
	}
ol ol ol,
ul ol ol ol {
	list-style-type: lower-roman;
	}
ul ul,
ol ul,
ul ol,
ol ol,
ul ol ol ol,
ol ol ol,
ul ol ol ol {
	margin: 0 0 0 2em; padding: 0; /* 36 / 18 */
	}
/*
--------------------------------------------------------------------------------
BLOCKQUOTES
--------------------------------------------------------------------------------
*/
blockquote {
	font-style: italic; 
	border-left: 1px solid #303639; 
	padding-left: 7.1428571428571%; /* 18/252 (.5gut/4col) */
	margin-left: -7.1428571428571%; /* 18/252 (.5gut/4col) */
	}
blockquote ul,
blockquote ol {
	margin: 1em 0;
	}
/*
--------------------------------------------------------------------------------
FIGURES
--------------------------------------------------------------------------------
*/
figure,
nav.small {
	display: block;
	font-size: .777777777777778em; /* 14/18 */
	margin: 1.714285714285714em 0; /* 24/14 */
	}
figure h2 {
	font-size: 1.28571428571429em; /* 18/14 */
	}
figcaption {
	font-style: italic;
	margin: 1.714285714285714em 0; /* 24/14 */
	}
figcaption em,
figcaption cite {
	font-style: normal;
	}
figcaption:before {
	content: "Above: ";
	font-weight: bold;
	font-weight: 700;
	}
/*
--------------------------------------------------------------------------------
TABLES
--------------------------------------------------------------------------------
*/
table {
	border-bottom: 2px solid #303639;
	border-top: 2px solid #303639;
	}
th {
	font-weight: bold;
	}
td {
	border-top: 1px solid #303639;
	}
th,
td {
	text-align: left;
	padding: .5em 1em .5em 0;
	}
th:last-child,
td:last-child {
	padding-right: 0;
	}
/*
--------------------------------------------------------------------------------
CODE
--------------------------------------------------------------------------------
*/
pre {
	color: #fff;
	color: rgba(255,255,255,.6);
	font-family: Monaco,Courier,monospace;
	overflow: auto;
	padding: 6.6666666666667%; /* 36/540 (1col/8col) */
	margin: 1.714285714285714em 0; /* 24/14 */
	background: #303639;
	}
pre strong {
	font-weight: normal;
	color: #fff;
	background: #c33;
	}
/*
--------------------------------------------------------------------------------
COMMENTS
--------------------------------------------------------------------------------
*/
#comments {
	margin-top: 4em;
	}
#comments h2 {
	text-align: center;
	padding-bottom: .375em; /* 9/24 */
	border-bottom: 4px solid #303639;
	}
.commenter,
#comments .datestamp {
	display: inline;
	}
.commenter:after {
	content: " •";
	}
#comments .commenter {
	font-weight: bold;
	}
#comments .datestamp {
	font-style: italic;
	}
.comment {
	clear: both;
	border-bottom: 1px solid #303639;
	margin-bottom: 1em;
	}
/*
--------------------------------------------------------------------------------
MEDIUM VIEWPORT WIDTH MODIFICATIONS
--------------------------------------------------------------------------------
*/
@media screen and (min-width: 480px) {
	header {
		padding: 1.5em 0 .5em 0;
		}
	#logo {
		width: 8.8888888888889%; /* 48/540 (1.333col/8col) */
		}
	footer {
		padding: 1em 0 2em 0;
		}
	header,
	#content-wrap,
	footer {
		padding-left: 10.5263157894737%; /* 72/684 (1mar/[8col+2mar]) */
		padding-right: 10.5263157894737%; /* 72/684 (1mar/[8col+2mar]) */
		}
	#content-wrap {
		padding-top: 6em; /* 108/18 */
		padding-bottom: 6em; /* 108/18 */
		}
	h1 {
		font-size: 2.666666666666667em; /* 48/18 */
		}
	blockquote { 
		padding-left: 3.3333333333333%; /* 18/540 (.5gut/8col)*/
		margin-left: -3.3333333333333%; /* 18/540 (.5gut/8col)*/
		}
	.small,
	.medium figcaption,
	.large figcaption,
	.comment .info {
		width: 33.3333333333333%; /* 180/540 (3col/8col) */
		float: left;
		clear: left;
		margin: 1.714285714285714em 6.6666666666667% 1.714285714285714em 0; /* 24/14, 36/540 (1gut/8col) */
		}
	.small {
		margin-top: 0;
		}
	h1+figure.small {
		margin-top: 0;
		}
	nav.small {
		width: 100%;
		}
	.commenter,
	#comments .datestamp {
		display: block;
		}
	.commenter:after {
		content: none;
		}
	}
/*
--------------------------------------------------------------------------------
WIDE VIEWPORT WIDTH MODIFICATIONS
--------------------------------------------------------------------------------
*/
@media screen and (min-width: 800px) {
	body {
		padding: 0 2em;
		}
	#page {
		max-width: 54em; /* 972 / 18 */
		}
	header,
	#content-wrap,
	footer {
		padding-left: 37.037037037037%; /* 360/972 ([1mar+4col+1gut]/[2mar+12col])*/
		padding-right: 7.4074074074074%; /* 72/972 (1mar/[2mar+12col]) */
		}
	header {
		padding-left: 7.4074074074074%; /* 72/972 (1mar/[2mar+12col]) */
		}
	header,
	h1,
	footer,
	time,
	.tags {
		text-align: left;
		}
	#logo {
		width: 6.5217391304348%; /* 54/828 (1.5col/12col) */
		display: inline;
		margin: 0 16.304347826087% -.75em 11.9565217391304%; /* 135/828 ([1.75col+1gut]/12col), 99/828 (1.75col/12col) */
/*		margin-right: 28.9855072463768%; 240/828 (3.666col/12col) 
		margin-bottom: -.75em;
*/
		}
/*	h1 {
		padding-left: 53.3333333333333%;  288/540 ([4col+1gut]/8col)
		}
	h1,
*/	
	.small,
	.large,
	.medium figcaption,
	.medium nav,
	nav.small,
	#comments {
		margin-left: -53.3333333333333%; /* 288/540 ([4col+1gut]/8col)*/
		}
	.small,
	.medium figcaption,
	.medium nav,
	nav.small {
		width: 46.6666666666667%; /* 252/540 (4col/8col) */
		margin-top: 0;
		margin-bottom: 1.714285714285714em; /* 24/14 */
		}
	.medium img,
	.medium table {
		float: right; /* Lets the figcaption (which follows it in the markup) sit to the left. */
		margin-bottom: 1.714285714285714em; /* 24/14 */
		}
	.medium .photo {
		margin-right: -4px;
		}
	.large figcaption,
	.large nav,
	.medium figcaption,
	.medium nav {
		float: left;
		clear: left;
		}
	.large figcaption,
	.large nav {
		width: 30.4347826086957%; /* 252/828 (4col/12col) */
		margin-right: 4.3478260869565%; /* 36/828 (1gut/12col) */
		}
	.medium figcaption:before {
		content: "Right: ";
		}
	#comments h2,
	.comment .message {
		text-align: left;
		padding-left: 34.7826086956522%; /* 288/828 ([4col+1gut]/12col) */
		}
	.comment .info {
		width: 30.4347826086957%; /* 252/828 (4col/12col) */
		margin-right: 4.3478260869565%; /* 36/828 (1gut/12col) */
		}
	}