/* ---------------------------------------------------------

Music for Penguins
musicforpenguins.com

Author(s): Matt Wetzler, thewmatt.com

Created: 05/2011

------------------------------------------------------------ */

* {
	margin: 0;
	padding: 0;
	}
html, body, div, h1, p, form, input, textarea, select {
	font: 100% Arial, Helvetica, sans-serif;
	color: #666;
	}
html {
	overflow-y: scroll;
	}
body {
	background: #ffffff;
	}
a {
	color: #444;
	font-weight: bold;
	text-decoration: none;
	}
a:hover {
	color: #000;
	}
img {
	border: none;
	}
.center {
	text-align: center;
	}
.clear {
	clear: both;
	}
.imgswap {
	display: block;
	text-decoration: none;
	text-indent: -29999px;
	outline: none;
	}
	/* hide from Mac IE 5 \*/
	.imgswap { overflow: hidden; }
	/* End Mac IE 5 hack */


/* BASIC STRUCTURE
------------------------------------------------------------------------------------------ */

#container {
	max-width: 51.25em;		/* 820px / 16px = 51.25 */
	margin: 36px auto;
	}

article {
	margin-bottom: 4em;
	}

#volumes {
	width: 100%;
	margin-bottom: 24px;
	}
	.volume {
		float: left;
		width: 21%;			/* 180px / 820px = 0.2195 */
		margin-right: 4%;
		}
	.volume_head {
		cursor: pointer;
		}
	.volume img {
		max-width: 180px;
		}

table {
	width: 100%;
	}

#colophon {
	padding-top: 9px;
	border-top: 2px dotted orange;
	}

/* TYPOGRAPHY
------------------------------------------------------------------------------------------ */

h1 {
	font-size: 7.375em;
	line-height: 1em;
	margin-bottom: 48px;
	}
	article h1 {
		font-size: 6em;
		line-height: 1em;
		font-weight: normal;
		margin-bottom: 36px;
		}	

h2 {
	font-size: 1.25em;
	line-height: 1.125em;
	padding-top: 186px;
	margin-bottom: 6px;
	color: orange;
	}

h3 {
	font-size: 3em;
	line-height: 1em;
	margin-bottom: 0.25em;
	}

p {
	font-family: georgia, "Times New Roman", Times, serif;
	font-size: 1.375em;
	line-height: 1.5em;
	margin-bottom: 1em;
	}
ol {
	margin-bottom: 12px;
	}
li {
	font-size: 0.6875em;
	line-height: 1.5em;
	margin-bottom: 6px;
	}

tr, td {
	font-size: 0.875em;
	line-height: 1em;
	padding: 0.5em;
	}


/* COLOPHON
------------------------------------------------------------------------------------------ */
#colophon-left {
	float: left;
	width: 21%;		/* 3850px / 820px = 0.4695 */
	margin-right: 4%;
	}

#merchandise {
	float: left;
	width: 21%;
	margin-right: 4%;
	}

#desktops {
	float: left;
	width: 46%;
	}
	#desktops ul {
		list-style: none;
		}


/* FOOTER
------------------------------------------------------------------------------------------ */
#footer p {
	font-family: arial, helvetica, sans-serif;
	font-size: 0.75em;
	line-height: 1.25em;
	margin:	24px 0 18px 0;
	}


/* 404
------------------------------------------------------------------------------------------ */
#four-oh-four h1 {
	font-size: 72px;
	line-height: 84px;
	font-weight: normal;
	margin-bottom: 48px;
	}

#four-oh-four p {
	font-size: 16px;
	line-height: 24px;
	margin:	24px 0 18px 0;
	}


/* MEDIA QUERIES
------------------------------------------------------------------------------------------ */
@media screen and (max-width: 860px) {
	#container {
		padding: 0 24px;
		}
}

@media screen and (max-width: 640px) {
	#container,
	#volumes,
	#colophon-left,
	#merchandise,
	#desktops {
		float: none;
		width: auto;
		margin-bottom: 24px;
	}
	
	.volume {
		float: none;
		width: auto;
		margin-bottom: 18px;
		}
		.volume img {
			display: none;
			}
		
	h1 {
		font-size: 4.25em;
		line-height: 1em;
		margin-bottom: 36px;
		}
	
	h2 {
		font-size: 1.5em;
		line-height: 1.25em;
		padding-top: 0;
		margin-bottom: 12px;
		border-bottom: 1px dotted orange;
		}
		h2.volone {
			background: none;
			}
		h2.voltwo {
			background: none;
			}
		h2.volthree {
			background: none;
			}
		h2.mfwwp {
			background: none;
			}
	
}