/* @group Layout */
	
	html {
		background: hsl(0, 0%, 100%) url('../images/background.jpg') repeat-x bottom center;
		min-height: 100%;
	}
	body {
		background: hsla(0, 0%, 100%, 0.4);
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		color: hsla(0, 0%, 0%, 0.8);
		cursor: default;
		font-family: 'lucida grande';
		font-size: 9pt;
		line-height: 21px;
		margin: 20px auto;
		padding: 20px 40px;
		text-shadow: 1px 1px 0 hsla(0, 0%, 100%, 0.8);
		width: 970px;
	}
	body > * {
		padding: 20px 0;
	}
	
	@media all and (max-width: 970px) {
		body {
			width: 660px;
		}
	}
	
	body > footer {
		border-top: 10px solid hsla(210, 25%, 50%, 0.05);
		clear: both;
	}
	
	/* @group List */
		
		body.list > header,
		body.list > article {
			float: left;
			margin: 0 20px;
			padding: 30px 0 20px 0;
			width: 270px;
		}
		
		/* @group Header */
			
			body.list > header {
				background: hsla(0, 0%, 100%, 0.4);
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				margin: 0 0 20px -20px;
				padding: 20px 20px 10px 20px;
				width: 310px;
			}
			body.list > header h1 {
				margin: 20px 0 15px 0;
			}
			body.list > header > nav {
				position: absolute;
				top: 10px;
			}
			
		/* @end */
		
		/* @group Article */
			
			body.list > article:nth-child(2),
			body.list > article:nth-child(3) {
				border-top: none;
				padding-top: 20px;
			}
			body.list > article:nth-child(3n) {
				margin-right: 0;
			}
			body.list > article:nth-child(3n-2) {
				border-top: 10px solid hsla(210, 25%, 50%, 0.05);
				clear: both;
				margin-left: 0;
				margin-right: -600px;
				padding-right: 620px;
				padding-top: 20px;
				width: 890px;
			}
			
			@media all and (max-width: 970px) {
				body.list > header {
					margin-bottom: 20px;
					width: 620px;
				}
				body.list > article:nth-child(2),
				body.list > article:nth-child(3) {
					border-top: none;
				}
				body.list > article:nth-child(3n) {
					margin-right: 20px;
				}
				body.list > article:nth-child(3n-2) {
					border-top: none;
					clear: none;
					margin-left: 20px;
					margin-right: 20px;
					padding-right: 20px;
					padding-top: 20px;
					width: 270px;
				}
				body.list > article:nth-child(2n-1) {
					margin-right: 0;
					padding-top: 30px;
				}
				body.list > article:nth-child(2n) {
					border-top: 10px solid hsla(210, 25%, 50%, 0.05);
					clear: both;
					margin-left: 0;
					margin-right: -290px;
					padding-right: 310px;
					padding-top: 20px;
					width: 580px;
				}
			}
			
			body.list article header h1 {
				font-size: 16.5pt;
				line-height: 28px;
			}
			body.list article header ~ p:last-child a:after {
				content: '\a0\00bb';
			}
			
		/* @end */
		
	/* @end */
	
	/* @group Read */
		
		/* @group Header */
			
			body.read > header {
				background: hsla(0, 0%, 100%, 0.4);
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				float: left;
				margin: 0 0 0 -20px;
				padding: 20px 20px 10px 20px;
				width: 310px;
			}
			body.read > header h1 {
				margin: 20px 0 15px 0;
			}
			body.read > header > nav {
				position: absolute;
				top: 10px;
			}
			
			@media all and (max-width: 970px) {
				body.read > header {
					background: red;
					padding: 0;
					width: 100%;
				}
				body.read > header > * {
					display: none;
				}
				body.read > header > nav {
					left: auto;
					display: block;
					right: 0;
					z-index: 1;
				}
			}
			
		/* @end */
		
		/* @group Aside */
			
			body.read > aside {
				border-top: 10px solid hsla(210, 25%, 50%, 0.05);
				float: left;
				width: 270px;
			}
			
			@media all and (max-width: 970px) {
				body.read > aside {
					display: none;
				}
			}
			
		/* @end */
		
		/* @group Article */
			
			body.read > article {
				float: right;
				position: relative;
				width: 580px;
			}
			
		/* @end */
		
	/* @end */
	
	/* @group Comments */
		
		section.comments {
			border-top: 10px solid hsla(210, 25%, 50%, 0.05);
			clear: both;
			padding: 0 0 0 310px;
		}
		@media all and (max-width: 970px) {
			section.comments {
				padding: 0;
			}
		}
		section.comments form,
		section.comments article {
			padding: 20px 0;
		}
		section.comments article + article {
			border-top: 10px solid hsla(210, 25%, 50%, 0.05);
		}
		
		section.comments form {
			float: left;
			margin: 0 0 0 -310px;
			width: 270px;
		}
		section.comments form h1 {
			font-size: 16.5pt;
			line-height: 28px;
			margin: 20px 0 15px 0;
		}
		
		@media all and (max-width: 970px) {
			section.comments form {
				border-bottom: 10px solid hsla(210, 25%, 50%, 0.05);
				float: none;
				margin: 0;
				width: auto;
			}
			section.comments form h1 {
				margin-top: 0;
			}
		}
		
		section.comments article {
			margin: 0 0 0 0;
		}
		
		section.comments article header h1 {
			font-size: 16.5pt;
			line-height: 28px;
		}
		
		@media all and (max-width: 970px) {
			section.comments article header h1 {
				margin-top: 0;
			}
		}
		
	/* @end */
	
/* @end */