/**
 * W3C Pro - CSSWG Front Page
 * design and coding by Divya Manian
 * CSS aggressively edited by fantasai
 */

@media screen and (min-width: 600px) and (min-width: 40em) {
	/* News sidebar is floated at 41.5% */
	.content {
		width: 56%;
		float: left;
		margin-right: 1.5%;
	}
}

@media screen and (min-width: 600px) and (min-width: 45em) {
	/* Wrap banner around intro and spec links */

	#intro {
		float: right;
		width: 56%;
		margin: 0 2%;
		color: #fff;
		text-shadow: 0 1px 1px #000;
	}
	#intro p {
		color: #eee;
	}
	#intro a[href] {
		color: #85C3FF;
	}

	/* clearfix */
	.banner { zoom: 1; }
	.banner:after {
		clear: both;
		content: "\0020"; display: block;
		height: 0; visibility: hidden;
	}
	.banner {
		margin: 0 -1em;
		background-color: #1F436D; /* hsl(212, 72, 43) */
		background-image:
			-moz-radial-gradient(55% 5%, circle closest-corner,
			                     hsla(8, 52%, 68%, 0) 0%,
			                     hsla(8, 52%, 68%, 0.15) 20%,
			                     transparent 20%),
			-moz-radial-gradient(55% 105%, circle closest-corner,
			                     hsla(8, 52%, 68%, 0) 0%,
			                     hsla(8, 52%, 68%, 0.15) 20%,
			                     transparent 20%),
			-moz-radial-gradient(30% 30%, circle closest-corner,
			                     hsla(340, 30%, 24%, 0) 0%,
			                     hsla(340, 10%, 44%, 0.4) 40%,
			                     transparent 40%),
			-moz-radial-gradient(130% 30%, circle closest-corner,
			                     hsla(340, 30%, 24%, 0) 0%,
			                     hsla(340, 10%, 44%, 0.4) 40%,
			                     transparent 40%),
			-moz-radial-gradient(-10% 50%, circle closest-corner,
			                     hsla(205, 97%, 31%, 0) 0%,
			                     hsla(205, 97%, 31%, 0.15) 80%,
			                     transparent 80%),
			-moz-radial-gradient(90% 50%, circle closest-corner,
			                     hsla(205, 97%, 31%, 0) 0%,
			                     hsla(205, 97%, 31%, 0.15) 80%,
			                     transparent 80%),
			-moz-radial-gradient(50% 65%, circle closest-corner,
			                     hsla(225, 63%, 27%, 0) 0%,
			                     hsla(225, 63%, 27%, 0.15) 40%,
			                     transparent 40%);
		background-image:
			-o-radial-gradient(55% 5%, circle closest-corner,
			                   hsla(8, 52%, 68%, 0) 0%,
			                   hsla(8, 52%, 68%, 0.15) 20%,
			                   transparent 20%),
			-o-radial-gradient(55% 105%, circle closest-corner,
			                   hsla(8, 52%, 68%, 0) 0%,
			                   hsla(8, 52%, 68%, 0.15) 20%,
			                   transparent 20%),
			-o-radial-gradient(30% 30%, circle closest-corner,
			                   hsla(340, 30%, 24%, 0) 0%,
			                   hsla(340, 10%, 44%, 0.4) 40%,
			                   transparent 40%),
			-o-radial-gradient(130% 30%, circle closest-corner,
			                   hsla(340, 30%, 24%, 0) 0%,
			                   hsla(340, 10%, 44%, 0.4) 40%,
			                   transparent 40%),
			-o-radial-gradient(-10% 50%, circle closest-corner,
			                   hsla(205, 97%, 31%, 0) 0%,
			                   hsla(205, 97%, 31%, 0.15) 80%,
			                   transparent 80%),
			-o-radial-gradient(90% 50%, circle closest-corner,
			                   hsla(205, 97%, 31%, 0) 0%,
			                   hsla(205, 97%, 31%, 0.15) 80%,
			                   transparent 80%),
			-o-radial-gradient(50% 65%, circle closest-corner,
			                   hsla(225, 63%, 27%, 0) 0%,
			                   hsla(225, 63%, 27%, 0.15) 40%,
			                   transparent 40%);
		background-image:
			-ms-radial-gradient(55% 5%, circle closest-corner,
			                   hsla(8, 52%, 68%, 0) 0%,
			                   hsla(8, 52%, 68%, 0.15) 20%,
			                   transparent 20%),
			-ms-radial-gradient(55% 105%, circle closest-corner,
			                   hsla(8, 52%, 68%, 0) 0%,
			                   hsla(8, 52%, 68%, 0.15) 20%,
			                   transparent 20%),
			-ms-radial-gradient(30% 30%, circle closest-corner,
			                   hsla(340, 30%, 24%, 0) 0%,
			                   hsla(340, 10%, 44%, 0.4) 40%,
			                   transparent 40%),
			-ms-radial-gradient(130% 30%, circle closest-corner,
			                   hsla(340, 30%, 24%, 0) 0%,
			                   hsla(340, 10%, 44%, 0.4) 40%,
			                   transparent 40%),
			-ms-radial-gradient(-10% 50%, circle closest-corner,
			                   hsla(205, 97%, 31%, 0) 0%,
			                   hsla(205, 97%, 31%, 0.15) 80%,
			                   transparent 80%),
			-ms-radial-gradient(90% 50%, circle closest-corner,
			                   hsla(205, 97%, 31%, 0) 0%,
			                   hsla(205, 97%, 31%, 0.15) 80%,
			                   transparent 80%),
			-ms-radial-gradient(50% 65%, circle closest-corner,
			                   hsla(225, 63%, 27%, 0) 0%,
			                   hsla(225, 63%, 27%, 0.15) 40%,
			                   transparent 40%);
		background-image:
			-webkit-gradient(radial, 55% 5%, 5, 55% 5%, 40,
			                 from(hsla(8, 52%, 68%, 0)),
			                 color-stop(0.8, hsla(8, 52%, 68%, 0.15)),
			                 color-stop(0.8, transparent),
			                 to(transparent)),
			-webkit-gradient(radial, 55% 105%, 5, 55% 105%, 40,
			                 from(hsla(8, 52%, 68%, 0)),
			                 color-stop(0.8, hsla(8, 52%, 68%, 0.15)),
			                 color-stop(0.8, transparent),
			                 to(transparent)),
			-webkit-gradient(radial, 30% 30%, 1, 30% 30%, 50,
			                 from(hsla(340, 30%, 24%, 0)),
			                 color-stop(0.9, hsla(340, 10%, 44%, 0.2)),
			                 color-stop(0.9, transparent),
			                 to(transparent)),
			-webkit-gradient(radial, 130% 30%, 1, 130% 30%, 50,
			                 from(hsla(340, 30%, 24%, 0)),
			                 color-stop(0.9, hsla(340, 10%, 44%, 0.2)),
			                 color-stop(0.9, transparent),
			                 to(transparent)),
			-webkit-gradient(radial, -10% 50%, 5, -10% 50%, 120,
			                 from(hsla(205, 97%, 31%, 0)),
			                 color-stop(0.8, hsla(205, 97%, 31%, 0.15)),
			                 color-stop(0.8, transparent),
			                 to(transparent)),
			-webkit-gradient(radial, 90% 50%, 5, 90% 50%, 120,
			                 from(hsla(205, 97%, 31%, 0)),
			                 color-stop(0.8, hsla(205, 97%, 31%, 0.15)),
			                 color-stop(0.8, transparent),
			                 to(transparent)),
			-webkit-gradient(radial, 50% 65%, 5, 50% 65%, 80,
			                 from(hsla(225, 63%, 27%, 0)),
			                 color-stop(0.8, hsla(225, 63%, 27%, 0.15)),
			                 color-stop(0.8, transparent),
			                 to(transparent));
		background-image:
			-webkit-radial-gradient(55% 5%, circle closest-corner,
			                 hsla(8, 52%, 68%, 0) 0%,
			                 hsla(8, 52%, 68%, 0.15) 20%,
			                 transparent 20%),
			-webkit-radial-gradient(55% 105%, circle closest-corner,
			                 hsla(8, 52%, 68%, 0) 0%,
			                 hsla(8, 52%, 68%, 0.15) 20%,
			                 transparent 20%),
			-webkit-radial-gradient(30% 30%, circle closest-corner,
			                 hsla(340, 30%, 24%, 0) 0%,
			                 hsla(340, 10%, 44%, 0.4) 40%,
			                 transparent 40%),
			-webkit-radial-gradient(130% 30%, circle closest-corner,
			                 hsla(340, 30%, 24%, 0) 0%,
			                 hsla(340, 10%, 44%, 0.4) 40%,
			                 transparent 40%),
			-webkit-radial-gradient(-10% 50%, circle closest-corner,
			                 hsla(205, 97%, 31%, 0) 0%,
			                 hsla(205, 97%, 31%, 0.15) 80%,
			                 transparent 80%),
			-webkit-radial-gradient(90% 50%, circle closest-corner,
			                 hsla(205, 97%, 31%, 0) 0%,
			                 hsla(205, 97%, 31%, 0.15) 80%,
			                 transparent 80%),
			-webkit-radial-gradient(50% 65%, circle closest-corner,
			                 hsla(225, 63%, 27%, 0) 0%,
			                 hsla(225, 63%, 27%, 0.15) 40%,
			                 transparent 40%);
		background-size: 20em 14em;
		background-repeat: repeat;
		border-top: 1px solid #2F4054; /* hsl(212, 44%, 33%) */
		border-bottom: 1px solid hsl(212, 64%, 8%);
		padding-top: 1.5em;
		margin-bottom: 1.5em;
		box-shadow: inset 0 -0.5em 2em #0F2238; /* hsl(212, 72%, 22%) */
	}
}

@media screen and (min-width: 900px) and (min-width: 60em) {

	/* 3 column layout */
	#intro {
		width: 66%;
	}
	#specs {
		width: 30%;
	}

	/* News sidebar is floated at 31.5% */

	.content  {
		width: 63%;
	}
	.content section,
	.content .section {
		float: left;
		width: 45.5%;
		margin: 0 3% 0 0;
	}
	#discuss {
		clear: left;
	}
	#test, #contribute {
		margin-right: 0;
		width: 49.5%;
	}
}

/* News Styling */

	#news h1:after {
		content: " " url('feed.png'), " [Feed]";
	}

	#news > p {
		margin-top: 1.5em;
		margin-bottom: 1.5em;
	}

	#news > article,
	#news > .article {
		margin: 0 5%;
		padding: 1.5em 3%;
		border-bottom: 1px dotted #4C6787; /* hsl(212, 44%, 53%) */
	}

	#news article > time i,
	#news .article > time i {
		font-style: normal;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1em;
	}

	#news article > time,
	#news .article > time {
		float: right;
		display: table; /* prevent overflow */
		width: 3em;
		display: block;
		line-height: 1.2;
		text-align: center;
		background: #025a9a;
		background-image: -moz-linear-gradient(#025A9A, #3079AF);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #025A9A),color-stop(1, #3079AF));
		background-image: -o-linear-gradient(#025A9A, #3079AF);		
		background-image: -ms-linear-gradient(#025A9A, #3079AF);		
		background-image: -webkit-linear-gradient(#025A9A, #3079AF);		
		background-image: linear-gradient(#025A9A, #3079AF);		
		border: 3px double #aaa;
		color: #fff;
		text-shadow: 0 1px 1px #333;
		padding: 0.2em 0 0.5em 0;
		margin: -0.2em 0 0 1em;
	}

	/* clearfix */
	#news article, #news .article { zoom: 1; }
	#news > article:after,
	#news > .article:after {
		clear: both;
		content: "\0020"; display: block;
		height: 0; visibility: hidden;
	}