/* 

Selectivizr - by Keith Clark

http://www.keithclark.co.uk
http://twitter.com/keithclarkcouk

*/

/* reset
------------------------------------------------------------------------- */

body, ul, ol, li, h1, h2, h3 { margin:0; padding: 0 }
nav, section, header, footer { display: block }								/* html5 */

/* fonts
------------------------------------------------------------------------- */

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('fonts/Chunkfive-webfont.eot?') format('eot'), url('fonts/Chunkfive-webfont.woff') format('woff'), url('fonts/Chunkfive-webfont.ttf') format('truetype');
	/*src: url('fonts/Chunkfive-webfont.eot');
	src: local('?'),
		url('fonts/Chunkfive-webfont.woff') format('woff'),
		url('fonts/Chunkfive-webfont.ttf') format('truetype'),
		url('fonts/Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');*/
	font-weight: normal;
	font-style: normal;
}

/* award
------------------------------------------------------------------------- */

#net-award {
	position: absolute;
	z-index:100;
	left:50%;
	margin: -170px 0 0 235px;
	width:100px;
	height:100px;
	text-indent:-1000em;
	overflow: hidden;
	background:url("net-awards.png");
}


#net-award:hover  {
	background-position:-100px 0;

}

/* base elements
------------------------------------------------------------------------- */

body { 
	font: 85%/1.3 Arial, sans-serif;
	color:#bbb;
	min-width:980px;
	background:#111
}

h1 {
	text-align: center;
	padding-top:1.75em;
	padding-bottom:0.8em;
}

div {																		/* these are only used for layout */
	width: 920px;
	margin: 0 auto;
	padding:10px;
	overflow:hidden
}

a {
	color :#fff;
}

/* buttons */

a[href$=".zip"] { 
	display:block;
	padding:10px 10px 10px 65px;
	width:175px;
	background: #c0d000 no-repeat -764px 50% url(sprites2.png);
	background: url(sprites2.png) -764px 50% no-repeat, -moz-linear-gradient(#c0d000, #90a000);
	background: url(sprites2.png) -764px 50% no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #c0d000),color-stop(1, #90a000));
	border:4px solid #809000;
	text-decoration: none;
	font: bold 180%/1.2 Trebuchet, "Trebuchet MS", Arial, sans-serif;
	text-shadow: 0 0px 2px rgba(0,0,0,0.75); 
	-moz-border-radius:10px;
	-moz-box-shadow: 0 2px 5px #000;
	-webkit-border-radius:10px;
	-webkit-box-shadow: 0 2px 5px #000;
	border-radius:10px;
	box-shadow: 0 2px 5px #000;
	-webkit-transition: border-color 0.5s, -webkit-box-shadow 0.85s ;
	-moz-transition: border-color 0.5s, -moz-box-shadow 0.85s ;
}

a[href$=".zip"] sup {
	display:block;
	font-size:50%;
}

a[href$=".zip"]:hover,
a[href$=".zip"]:focus { 
	background: #c0d000 url(sprites2.png) -764px 50% no-repeat;
	border-color:#fff;
	-moz-box-shadow: 0 0px 10px #afd;
	-webkit-box-shadow: 0 0px 10px #afd;
	box-shadow: 0 0px 10px #afd;
}



/* nav
------------------------------------------------------------------------- */

nav {
	position: fixed;
	_position: absolute;
	top:0;
	border-bottom:1px solid #222;
	-moz-box-shadow:0 1px 12px #000;
	-webkit-box-shadow:0 1px 12px #000;
	box-shadow:0 1px 12px #000;
	width:100%;
	background: #424242;
	overflow:hidden;
	z-index:1000;
}

nav ul {
	font-family: Trebuchet, "Trebuchet MS", Arial, sans-serif;
	width:920px;
	overflow:hidden;
	margin: auto;
	list-style: none;
	padding:5px 0;
}

nav a {
	background: url("sprites2.png") 0 50% no-repeat;
	display:block;
	padding: 5px 0 5px 45px;
	color:#fff;
	text-decoration: none;
	text-shadow: 0 1px 2px #000;
	-webkit-transition: 0.25s ;
	-moz-transition: 0.25s;
	text-transform: lowercase;
}

nav em {
	font-style:normal;
	font-weight: bold;
	display:block;
	font-size:140%;
	text-transform: uppercase;
}

nav li { 
	float:left;
	margin-right:125px;
	font-size:83%;
	line-height:1.1;
	word-spacing:0.2em;
	text-align:center;
}

nav li:not(:last-child) a:not(:hover) {
	opacity: 0.7;
}

nav li:last-child {
	float:right;
	margin-right:0px;
}

nav li:nth-child(2) a {
	background-position: -520px 50%
}

nav li:nth-child(3) a {
	background-position: -1035px 50%
}

nav li:last-child a {
	background-position: -260px 50%; color: #fd3
}

/* headers
------------------------------------------------------------------------- */

header[role=banner] {
	padding: 60px 0;
	background: #111 url("ie-headergrad.png") 0 100% repeat-x;
	background-image: -moz-linear-gradient(#111,#333);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #111),color-stop(1, #333333));
}



header p {
	font-family: Trebuchet, "Trebuchet MS", Arial, sans-serif;;
	line-height:1.4;
	font-size:139%;
	color: #D2E10F;
	margin:0 0 2em 0;
	text-shadow:0 2px 4px #000;
	text-align: left;
}

header p:not(:last-child) {
	float: left;
	width: 600px
}


header h2 {
	position:absolute;
	left:50%;
	text-align: center;
	margin: -85px -20px 0 -480px;
	width:960px;
	color:#fff;
	font: 220%/1 ChunkFiveRegular, Arial, sans-serif;
	color: #fff;
	background: url(rule.png) 50% 50% no-repeat;
	text-shadow:0 3px 3px #000;
}

header code {
	font: bold 11px/1.5 "Courier New", Courier, monospace;
	width:555px;
	display:block;
	margin:0 0 3em 0;
	border:5px solid #888;
	padding:15px;
	background:#ccc;
	color:#000;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

/* sections
------------------------------------------------------------------------- */

section {
	padding:60px 0;
	overflow:hidden;
	width:100%;
	clear:both;
}

section h3 {
	font: 140%/1.5 Trebuchet, "Trebuchet MS", Arial, sans-serif;
	color: #49e;
	text-align: center
}

/* colours */
section:nth-of-type(1) {
	background-color: #333333;
}

section:nth-of-type(2) {
	background-color: #2e2e2e;
}

section:nth-of-type(3) {
	background-color: #292929;
}

section:nth-of-type(4) {
	background-color: #242424;
}


/* what does it do (section #1)
------------------------------------------------------------------------- */

#what img {
	border:5px solid #09c;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
#what a[href$=".zip"] { 
	float: right
}

/* how does it work (section #2)
------------------------------------------------------------------------- */

#how p {
	width:260px;
}

#how code {
	float:right;
}


/* who's using it (section #3)
------------------------------------------------------------------------- */

#who li {
	position:relative;
	border:5px solid #a00;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	height:140px;
	overflow:hidden;
	width:250px;
}

#who img {
	display: block;
	border:none;
}

#who img:last-child {
	position:relative;
	background-image: url(ie-hovergrad.png);
	background-image: -moz-linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.8));
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(0,0,0,0.65)),color-stop(1, rgba(0,0,0,0.8)));
	padding:38px 25px;
	-o-transition: margin 0.25s;
	-webkit-transition: margin 0.25s;
	-moz-transition: margin 0.25s;
}

#who li:hover img:last-child {
	margin-top:-140px;
}



/* Developer notes (section #4)
------------------------------------------------------------------------- */

#things li {
	padding-left:40px;
	background:url("sprites2.png") -1300px 0 no-repeat;
	width:220px
}


/* footer
------------------------------------------------------------------------- */

footer {
	background:#000;
	font-size:90%;
	color:#888
}

footer p:first-child {
	float:left
}

footer p:last-child {
	float:right
}

footer img {
	vertical-align:top;
	margin:-1px 0.25em;
	border:none;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;

}

footer img:not(:hover) {
	opacity:0.5
}

/* classes 
------------------------------------------------------------------------- */

.grid {
	list-style: none;
}

.grid li {
	float: left;
	width: 260px;
	margin:15px 0;
}

.grid li:nth-of-type(3n+2) {
	margin-left:70px;
	margin-right:70px;
}

.grid li:nth-of-type(3n+1) {
	clear: both;
}


/* tables 
------------------------------------------------------------------------- */

table { 
	border-collapse:collapse;
	caption-side:bottom;
	clear:both;
	border-spacing:0;
	width:100%
}

caption {
	padding:1.2em 0;
	font-size:90%;
	color:#888
}

td, th {                                                                    /* all cells */
	border: 0px solid;
}

td, th:not(:first-child) {													/* populated cells */
	/*background-color: #5a5;*/
	font-weight: normal;
	width: 100px;
	max-width: 100px;
	background-image: url("table-sprites2.png");
	background-repeat: repeat-y;
	padding: 2px
}



td:last-child, th:last-child {												/* right column padding */
	padding-right:16px
}

td span {																	/* support notes */
	position:absolute;
	margin-top:-58px;
	margin-left:-40px;
	text-align:center;
	width:150px;
	background:#ccc;
	color:#000;
	font-size:80%;
	padding:10px;
	border:3px solid #888;
	-moz-box-shadow:0 2px 10px #000;
	-webkit-box-shadow:0 2px 10px #000;
	box-shadow:0 2px 10px #000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	-moz-transition: opacity 0.75s, -moz-transform 0.5s;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
}



td:not(:hover) span {										/* hide notes until hovered */
	-moz-transition: opacity 0s, -moz-transform 0;
	-webkit-transition: opacity 0s, -moz-transform 0;
	-moz-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	opacity:0;
	margin-top:-1000em;
}

/* ----- header styles ----- */
thead th:not(:first-child) {												
	color: #fff;
	text-shadow:0 1px 1px #000;
	background-position: -720px 0
}

thead img {                                                                 /* library titles */
	display:block;
	margin:8px auto 0 auto;
}


/* ----- body styles ----- */

tbody td:not(.not-supported):not(.part-supported) {							/* fully-supported libraries */
	text-indent:-999em;
	overflow:hidden;
}

tbody tr:nth-child(odd) th {												
	background: #444444
}

tbody tr:nth-child(even) th {
	background: #3a3a3a
}

tbody tr:nth-child(odd) td {												/* supported icon */
	background-position: 0 50%
}

tbody tr:nth-child(even) td {												/* supported icon */
	background-position: -120px 50%
}

tbody tr:nth-child(odd) td.not-supported {									/* not-supported icon */
	background-position: -480px 50%
}

tbody tr:nth-child(even) td.not-supported {									/* not-supported icon */ 
	background-position: -600px 50%
}

tbody tr:nth-child(odd) td.part-supported {									/* part-supported icon */
	background-position: -240px 50%
}

tbody tr:nth-child(even) td.part-supported {								/* part-supported icon */ 
	background-position: -360px 50%
}

tbody tr:first-child th {
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius:10px;
}

tbody tr:first-child td:last-child {
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius:10px;
}

tbody tr:last-child th {
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius:10px
}

tbody tr:last-child td:last-child {
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius:10px
}

/* ----- footer styles ----- */

tfoot td {												
	background-position: -840px 100%;
	text-align: center;
	padding:18px 0 8px 0;

}

tfoot a {
	font-size:80%;
	text-decoration: none;
}

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