/* 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; }