├── svg └── circle.svg ├── .gitignore ├── .htaccess ├── images ├── cat.png ├── dukes.gif ├── dukes.png ├── logo.png ├── valid.png ├── bg-bike.png ├── bg-form.png ├── bg-main.gif ├── invalid.png ├── logo-sp.gif ├── logo-sp.png ├── poster.jpg ├── required.png ├── bg-header.gif ├── bg-subhead.gif ├── bg-texture.png ├── html5-logo.png ├── thumbnail.jpg ├── controls-sprite.png ├── bg-formtitle-left.png ├── bg-formtitle-right.png ├── computer-mouse-pic.png ├── ford-plane-still.png ├── circle.svg ├── rectangle.svg ├── button-gradient.svg ├── gradient.svg ├── outliner.0.5.0.62.html ├── computer-mouse-pic.svg ├── spinnerBW.svg ├── spinner.svg └── spinnerBWfromFilter.svg ├── jwplayer ├── yt.swf ├── player.swf ├── video.mp4 ├── preview.jpg ├── JW Player Embedding and JavaScript Guide.pdf ├── license.txt ├── readme.html └── swfobject.js ├── canvas ├── demo1.html ├── demo2.html ├── demo3.html ├── demo4.html ├── demo5.html ├── demo6.html ├── demo7.html └── index.html ├── js ├── geolocation.js ├── dragDrop.js ├── rememberMe.js ├── zipcodeFinder.js ├── videoToBW.js ├── videoControls.js └── modernizr-1.7.min.js ├── fonts ├── League_Gothic-webfont.eot ├── League_Gothic-webfont.ttf ├── Acknowledgement-webfont.eot ├── Acknowledgement-webfont.ttf ├── Acknowledgement-webfont.woff ├── League_Gothic-webfont.woff ├── League_Gothic-webfont.svg └── Acknowledgement-webfont.svg ├── media ├── ford-plane-takes-off.mp4 └── ford-plane-takes-off.ogv ├── css ├── canvas.css ├── screen.css └── styles.css ├── README ├── offline.html ├── cache.manifest ├── register.html └── index.html /svg/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *~ -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | AddType text/cache-manifest .manifest -------------------------------------------------------------------------------- /images/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/cat.png -------------------------------------------------------------------------------- /images/dukes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/dukes.gif -------------------------------------------------------------------------------- /images/dukes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/dukes.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/valid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/valid.png -------------------------------------------------------------------------------- /jwplayer/yt.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/jwplayer/yt.swf -------------------------------------------------------------------------------- /canvas/demo1.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo1.html -------------------------------------------------------------------------------- /canvas/demo2.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo2.html -------------------------------------------------------------------------------- /canvas/demo3.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo3.html -------------------------------------------------------------------------------- /canvas/demo4.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo4.html -------------------------------------------------------------------------------- /canvas/demo5.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo5.html -------------------------------------------------------------------------------- /canvas/demo6.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo6.html -------------------------------------------------------------------------------- /canvas/demo7.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/canvas/demo7.html -------------------------------------------------------------------------------- /images/bg-bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-bike.png -------------------------------------------------------------------------------- /images/bg-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-form.png -------------------------------------------------------------------------------- /images/bg-main.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-main.gif -------------------------------------------------------------------------------- /images/invalid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/invalid.png -------------------------------------------------------------------------------- /images/logo-sp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/logo-sp.gif -------------------------------------------------------------------------------- /images/logo-sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/logo-sp.png -------------------------------------------------------------------------------- /images/poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/poster.jpg -------------------------------------------------------------------------------- /images/required.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/required.png -------------------------------------------------------------------------------- /js/geolocation.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/js/geolocation.js -------------------------------------------------------------------------------- /jwplayer/player.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/jwplayer/player.swf -------------------------------------------------------------------------------- /jwplayer/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/jwplayer/video.mp4 -------------------------------------------------------------------------------- /images/bg-header.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-header.gif -------------------------------------------------------------------------------- /images/bg-subhead.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-subhead.gif -------------------------------------------------------------------------------- /images/bg-texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-texture.png -------------------------------------------------------------------------------- /images/html5-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/html5-logo.png -------------------------------------------------------------------------------- /images/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/thumbnail.jpg -------------------------------------------------------------------------------- /jwplayer/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/jwplayer/preview.jpg -------------------------------------------------------------------------------- /images/controls-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/controls-sprite.png -------------------------------------------------------------------------------- /images/bg-formtitle-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-formtitle-left.png -------------------------------------------------------------------------------- /images/bg-formtitle-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/bg-formtitle-right.png -------------------------------------------------------------------------------- /images/computer-mouse-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/computer-mouse-pic.png -------------------------------------------------------------------------------- /images/ford-plane-still.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/images/ford-plane-still.png -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/fonts/League_Gothic-webfont.eot -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/fonts/League_Gothic-webfont.ttf -------------------------------------------------------------------------------- /media/ford-plane-takes-off.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/media/ford-plane-takes-off.mp4 -------------------------------------------------------------------------------- /media/ford-plane-takes-off.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/media/ford-plane-takes-off.ogv -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/fonts/Acknowledgement-webfont.eot -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/fonts/Acknowledgement-webfont.ttf -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/fonts/Acknowledgement-webfont.woff -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/fonts/League_Gothic-webfont.woff -------------------------------------------------------------------------------- /images/circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/canvas.css: -------------------------------------------------------------------------------- 1 | #myCanvas 2 | { 3 | border-width: 2px; 4 | border-style: dotted; 5 | border-color: black; 6 | margin: 0px 20px; 7 | } 8 | -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | A sample HTML5 and CSS3 website created for SitePoint's book "HTML5 and CSS3 for the Real World," by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. 2 | -------------------------------------------------------------------------------- /jwplayer/JW Player Embedding and JavaScript Guide.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spbooks/The-HTML5-Herald/HEAD/jwplayer/JW Player Embedding and JavaScript Guide.pdf -------------------------------------------------------------------------------- /images/rectangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Drawing a rectangle 4 | 5 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /jwplayer/license.txt: -------------------------------------------------------------------------------- 1 | This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. -------------------------------------------------------------------------------- /offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | We are offline! 6 | 7 | 8 | 9 |
10 |

Sorry, we are now offline!

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /images/button-gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Button Gradient 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Module Gradient 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /cache.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | #v0.5 3 | index.html 4 | register.html 5 | canvas/index.html 6 | canvas/demo1.html 7 | 8 | js/hyphenator.js 9 | js/modernizr-1.7.min.js 10 | js/videoControls.js 11 | js/dragDrop.js 12 | js/geolocation.js 13 | js/videoToBW.js 14 | css/screen.css 15 | css/styles.css 16 | css/canvas.css 17 | images/bg-bike.png 18 | images/bg-form.png 19 | images/bg-formtitle-left.png 20 | images/bg-formtitle-right.png 21 | images/bg-header.gif 22 | images/bg-main.gif 23 | images/bg-subhead.gif 24 | images/bg-texture.png 25 | images/cat.png 26 | images/dukes.gif 27 | images/dukes.png 28 | images/logo-sp.gif 29 | images/logo.png 30 | images/gradient.svg 31 | images/ford-plane-still.png 32 | images/spinnerBW.svg 33 | fonts/League_Gothic-webfont.eot 34 | fonts/League_Gothic-webfont.svg 35 | fonts/League_Gothic-webfont.ttf 36 | fonts/League_Gothic-webfont.woff 37 | fonts/Acknowledgement-webfont.eot 38 | fonts/Acknowledgement-webfont.svg 39 | fonts/Acknowledgement-webfont.ttf 40 | fonts/Acknowledgement-webfont.woff 41 | 42 | FALLBACK: 43 | media/ images/ford-plane-still.png 44 | / offline.html 45 | 46 | NETWORK: 47 | * 48 | 49 | -------------------------------------------------------------------------------- /js/dragDrop.js: -------------------------------------------------------------------------------- 1 | $('document').ready(function() { 2 | // bind the dragstart event on the mice 3 | $('#mouseContainer img').bind('dragstart', function(event) { 4 | event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id')); 5 | }); 6 | 7 | // bind the dragover event on the cat 8 | $('#cat').bind('dragover', function(event) { 9 | event.preventDefault(); 10 | }); 11 | 12 | // bind the drop event on the cat 13 | $('#cat').bind('drop', function(event) { 14 | var mouseHash = {}; 15 | mouseHash['mouse1'] = "NOMNOMNOM"; 16 | mouseHash['mouse2'] = "MEOW!"; 17 | mouseHash['mouse3'] = "Purr..."; 18 | 19 | var ch = document.getElementById('catHeading'); 20 | 21 | // change text of the header based on which mouse was dropped 22 | var item = event.originalEvent.dataTransfer.getData("text/plain"); 23 | ch.innerHTML = mouseHash[item]; 24 | 25 | // get the img element for the mouse, and then remove it 26 | var mousey = document.getElementById(item); 27 | mousey.parentNode.removeChild(mousey); 28 | 29 | event.preventDefault(); 30 | }); 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /js/rememberMe.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alexisgoldstein 3 | */ 4 | $('document').ready(function(){ 5 | loadStoredDetails(); 6 | $('#rememberme').change(saveData); 7 | }); 8 | 9 | function loadStoredDetails(){ 10 | if (Modernizr.localstorage) { 11 | var name = localStorage.getItem("name"); 12 | var email = localStorage.getItem("email"); 13 | var remember = localStorage.getItem("remember"); 14 | 15 | if (name) { 16 | $("#name").val(name); 17 | } 18 | 19 | if (email) { 20 | $("#email").val(email); 21 | } 22 | 23 | if (remember =="true") 24 | { 25 | $("#rememberme").attr("checked", "checked"); 26 | } 27 | } 28 | else { 29 | // no native support for HTML5 storage :( 30 | } 31 | 32 | } 33 | 34 | function saveData(){ 35 | if (Modernizr.localstorage) { 36 | // We need to check that the checkbox is ON, not just 37 | // that's it's been clicked (the change event is also fired for 38 | // UNchecking the box). 39 | if ($("#rememberme").attr("checked")) { 40 | var email = $("#email").val(); 41 | var name = $("#name").val(); 42 | 43 | localStorage.setItem("name", name); 44 | localStorage.setItem("email", email); 45 | localStorage.setItem("remember", "true"); 46 | } 47 | } 48 | else { 49 | // no native support for HTML5 storage :( 50 | } 51 | } -------------------------------------------------------------------------------- /js/zipcodeFinder.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alexisgoldstein 3 | */ 4 | function findLocation(){ 5 | if (Modernizr.geolocation) { 6 | navigator.geolocation.getCurrentPosition(findZipCode); 7 | } 8 | } 9 | 10 | function findZipCode(position){ 11 | var lat = position.coords.latitude; 12 | var lng = position.coords.longitude; 13 | 14 | var geocoder = new google.maps.Geocoder(); 15 | var latlng = new google.maps.LatLng(lat, lng); 16 | 17 | geocoder.geocode({ 18 | 'latLng': latlng 19 | }, function(results, status){ 20 | if (status == google.maps.GeocoderStatus.OK) { 21 | if (results) { 22 | var zipcode = findZipcodeInResults(results); 23 | $("#zipcode").val(zipcode); 24 | } 25 | } 26 | else { 27 | alert("Geocoder failed due to: " + status); 28 | } 29 | }); 30 | 31 | } 32 | 33 | function findZipcodeInResults(results){ 34 | for (var i = 0; i < results.length; i++) { 35 | for (var j = 0; j < results[i].address_components.length; j++) { 36 | for (var k = 0; k < results[i].address_components[j].types.length; k++) { 37 | if (results[i].address_components[j].types[k] == "postal_code") { 38 | return results[i].address_components[j].short_name; 39 | } 40 | } 41 | } 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The HTML5 Herald 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

The HTML5 Herald

16 |

Produced with That Good ol' Timey HTML5 & CSS3

17 |
18 | 24 |

Vol. MMXI

25 |

26 |
27 |
28 | 31 |
32 | 33 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /css/screen.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | #video-container { 4 | width: 373px; 5 | margin: 0 auto; 6 | position: relative; 7 | 8 | } 9 | 10 | #controls { 11 | position: absolute; 12 | bottom: 0px; 13 | opacity: .5; 14 | -webkit-transition: opacity .7s linear; 15 | -moz-transition: opacity .7s linear; 16 | -ms-transition: opacity .7s linear; 17 | -o-transition: opacity .7s linear; 18 | transition: opacity .7s linear; 19 | } 20 | 21 | .hidden { 22 | display: none; 23 | } 24 | 25 | #controls:hover { 26 | opacity: 1; 27 | } 28 | 29 | #playPause { 30 | width: 25px; 31 | height: 25px; 32 | float: left; 33 | text-indent: -9999em; 34 | border-right: solid 1px #000; 35 | } 36 | 37 | .paused { 38 | background: #ccc url(../images/controls-sprite.png) no-repeat 0 -75px; 39 | } 40 | 41 | .playing { 42 | background-position: 0 -50px; 43 | } 44 | 45 | #playPause:hover { 46 | cursor: pointer; 47 | } 48 | 49 | #timer { 50 | width: 321px; 51 | height: 25px; 52 | background: #ccc; 53 | float: left; 54 | text-align: center; 55 | line-height: 25px; 56 | overflow: hidden; 57 | } 58 | 59 | #muteUnmute { 60 | float: left; 61 | width: 25px; 62 | height: 25px; 63 | text-indent: -9999em; 64 | border-left: solid 1px #000; 65 | overflow: hidden; 66 | } 67 | 68 | .unmuted { 69 | background: #ccc url(../images/controls-sprite.png) no-repeat 0 -25px; 70 | } 71 | 72 | .muted { 73 | background-position: 0 0; 74 | } 75 | 76 | #muteUnmute:hover { 77 | cursor: pointer; 78 | } -------------------------------------------------------------------------------- /js/videoToBW.js: -------------------------------------------------------------------------------- 1 | $('document').ready(function(){ 2 | makeVideoOldTimey(); 3 | }); 4 | 5 | function makeVideoOldTimey () 6 | { 7 | var video = document.getElementById("video"); 8 | var canvas = document.getElementById("canvasOverlay"); 9 | var context = canvas.getContext("2d"); 10 | 11 | var still = document.getElementById("video-still"); 12 | 13 | // draw a black and white version of the video poster to display by default 14 | drawOneFrame(still,context,canvas); 15 | 16 | video.addEventListener("play", function(){ 17 | draw(video,context,canvas); 18 | },false); 19 | 20 | } 21 | 22 | function draw(video, context, canvas) { 23 | if (video.paused || video.ended) 24 | { 25 | return false; 26 | } 27 | 28 | var status = drawOneFrame(video, context, canvas); 29 | 30 | // if an exception was thrown, do not keep trying to 31 | // manipulate the video 32 | if (status == false) 33 | { 34 | return false; 35 | } 36 | // Start over! 37 | setTimeout(function(){ draw(video, context, canvas); }, 0); 38 | } 39 | 40 | function drawOneFrame(video, context, canvas){ 41 | // draw the video onto the canvas 42 | context.drawImage(video, 0, 0, canvas.width, canvas.height); 43 | 44 | // wrap the call to getImageData in a try/catch 45 | // if the page is viewed locally from the computer in Chrome 46 | // or Firefox, a Security exception will be thrown, and we'll skip 47 | // the canvas manipulation, simply playing the color video 48 | try { 49 | var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 50 | var pixelData = imageData.data; 51 | // Loop through the red, green and blue pixels, turning them grayscale 52 | for (var i = 0; i < pixelData.length; i += 4) { 53 | var red = pixelData[i]; 54 | var green = pixelData[i + 1]; 55 | var blue = pixelData[i + 2]; 56 | //we'll ignore the alpha value, which is in position i+3 57 | 58 | var greyscale = red * 0.3 + green * 0.59 + blue * 0.11; 59 | 60 | pixelData[i] = greyscale; 61 | pixelData[i + 1] = greyscale; 62 | pixelData[i + 2] = greyscale; 63 | } 64 | 65 | imageData.data = pixelData; 66 | 67 | context.putImageData(imageData, 0, 0); 68 | } 69 | catch (err) { 70 | 71 | // clear the canvas by resetting the width 72 | canvas.width = canvas.width; 73 | canvas.style.backgroundColor = "transparent"; 74 | //write an error message to the canvas 75 | context.fillStyle = "white"; 76 | context.textAlign = "left"; 77 | context.font = "18px LeagueGothic, Tahoma, Geneva, sans-serif"; 78 | context.fillText("There was an error rendering ", 10, 20); 79 | context.fillText("the video to the canvas.", 10, 40); 80 | context.fillText("Perhaps you are viewing this page from", 10, 70); 81 | context.fillText("a file on your computer?", 10, 90); 82 | context.fillText("Try viewing this page online instead.", 10, 130); 83 | 84 | return false; 85 | } 86 | } 87 | 88 | -------------------------------------------------------------------------------- /js/videoControls.js: -------------------------------------------------------------------------------- 1 | /*globals $ window document */ 2 | 3 | $(document).ready(function() { 4 | var videoEl = $('#video')[0], 5 | playPauseBtn = $('#playPause'), 6 | vidControls = $('#controls'), 7 | muteBtn = $('#muteUnmute'), 8 | timeHolder = $('#timer'); 9 | 10 | 11 | // Check to see if the video is already ready (if it's cached, for example) 12 | if (videoEl.readyState == 4) { 13 | videoEl.removeAttribute("controls"); 14 | vidControls.removeClass("hidden"); 15 | } 16 | 17 | videoEl.addEventListener('canplay', function () { 18 | console.log('canplaythrough'); 19 | videoEl.removeAttribute("controls"); 20 | vidControls.removeClass("hidden"); 21 | 22 | }, true); 23 | 24 | // click handler for play/pause btn 25 | playPauseBtn.bind('click', function () { 26 | 27 | if (videoEl.paused) { 28 | videoEl.play(); 29 | } else { 30 | videoEl.pause(); 31 | } 32 | }); 33 | 34 | // listening for 'play' events 35 | videoEl.addEventListener('play', function () { 36 | console.log('plAY'); 37 | playPauseBtn.addClass("playing"); 38 | playPauseBtn.title = "Pause"; 39 | }, false); 40 | 41 | // listening for 'pause' events 42 | videoEl.addEventListener('pause', function () { 43 | console.log('pause'); 44 | playPauseBtn.removeClass("playing"); 45 | playPauseBtn.title = "Play"; 46 | }, false); 47 | 48 | muteBtn.bind('click', function () { 49 | if (videoEl.muted) { 50 | videoEl.muted = false; 51 | } else { 52 | videoEl.muted = true; 53 | } 54 | }); 55 | 56 | // listening for 'volumechange' events 57 | videoEl.addEventListener('volumechange', function () { 58 | if (videoEl.muted) { 59 | muteBtn.addClass("muted"); 60 | } else { 61 | muteBtn.removeClass("muted"); 62 | } 63 | }, false); 64 | 65 | // listening for 'ended' events 66 | videoEl.addEventListener('ended', function () { 67 | videoEl.currentTime = 0; 68 | videoEl.pause(); 69 | }, false); 70 | 71 | // listening for 'timeupdate' events 72 | // Every time the time changes, the 'secondsToTime' function runs 73 | videoEl.addEventListener('timeupdate', function () { 74 | timeHolder[0].innerHTML = secondsToTime(videoEl.currentTime); 75 | }, false); 76 | 77 | }); 78 | 79 | // currentTime is in seconds; this function converts it to properly formatted time 80 | function secondsToTime(s) { 81 | var h = Math.floor(s / (60 * 60)), 82 | dm = s % (60 * 60), 83 | m = Math.floor(dm / 60), 84 | ds = dm % 60, 85 | secs = Math.ceil(ds); 86 | 87 | // this fixes the crossover from 59 seconds to 1 minute 88 | if (secs === 60) { 89 | secs = 0; 90 | m = m + 1; 91 | } 92 | 93 | if (secs < 10) { 94 | secs = "0" + secs; 95 | } 96 | 97 | // this fixes the crossover from 59 minutes to 1 hour 98 | if (m === 60) { 99 | m = 0; 100 | h = h + 1; 101 | } 102 | 103 | if (m < 10) { 104 | m = "0" + m; 105 | } 106 | 107 | if (h === 0) { 108 | fulltime = m + ":" + secs; 109 | } else { 110 | fulltime = h + ":" + m + ":" + secs; 111 | } 112 | 113 | return fulltime; 114 | } -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The HTML5 Herald 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

The HTML5 Herald

14 |

Produced with That Good ol' Timey HTML5 & CSS3

15 |
16 | 22 |

Vol. MMXI

23 |

24 |
25 | 26 |
27 |
28 |

Sign Me Up!

29 |

I would like to receive your fine publication.

30 |
31 | 32 | 33 | 72 | 73 |
74 | 78 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /images/outliner.0.5.0.62.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 Outliner bookmarklet (v0.5.0.62) 5 | 6 | 7 | 20 |

Drag this link to your favorites bar: H5O v0.5.0.62

28 | 29 |

Tested in:

30 | 34 |

However, it should work normally in other modern browsers. Please report a bug if it doesn't.

35 | 36 |

Internet Explorer is not supported

37 |

Except for an older version of the bookmarklet. For reasoning please see the ProblemsWithInternetExplorer wiki page.

38 | 39 | 40 | -------------------------------------------------------------------------------- /images/computer-mouse-pic.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | Part of the Flat Icon Collection (Wed Aug 25 23:31:03 2004) 9 | 10 | 11 | 12 | hash 13 | 14 | computer 15 | icons 16 | device 17 | theme 18 | 19 | 20 | 21 | 22 | Danny Allen 23 | 24 | 25 | 26 | 27 | Danny Allen 28 | 29 | 30 | 31 | 32 | Danny Allen 33 | 34 | 35 | 36 | image/svg+xml 37 | 38 | 39 | en 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /jwplayer/readme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | About the JW Player 5 6 | 7 | 13 | 14 | 15 | 16 | 17 |

About the JW Player 5

18 |

Thank you for downloading the JW Player, the leading open source video player for Flash and HTML5 on the Web. Not only is the JW Player the easiest way to put video on your website, but we offer a host of other products and services to assist in providing the best possible video experience for your users.

19 | 20 |

Quickstart

21 |

The quickest way to get started is to unzip the file you downloaded (you must have done that if you're reading this!) and copy the contents into a folder called 'jwplayer' at the root of your website. The end result should be:

22 |
    23 |
  1. {webroot}/jwplayer/player.swf
    2. 24 |
  2. {webroot}/jwplayer/jwplayer.js
    3. 25 |
  3. etc...
    4. 26 |
27 |

You can then view the source of this page and copy the code from the example below onto your webpage. That's it! You should see a player on your site.

28 | 29 |

An Example of the JW Player

30 |

Below you see a simple embedded example of the JW Player.

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 49 | 50 | 51 | 52 |

Support, Documentation and Source Code

53 | 54 |

If you need help, the LongTail Support Community contains a wealth of information, include a large library of documentation, a very active support forum, and a blog on the latest releases and tips on publishing video.

55 | 56 |

Some documents you might find useful are:

57 |
    58 |
  1. Supported file formats.
    2. 59 |
  2. Supported XML playlist formats.
    3. 60 |
  3. Complete list of configuration options (for customizing the player).
    4. 61 |
  4. Supported JavaScript API calls (for JavaScript interaction).
    5. 62 |
  5. Supported skinning elements (for creating your own graphics).
    6. 63 |
  6. Roadmap with full changelogs for each version.
    7. 64 |
65 |

Last, the source code of all different versions of the player can be found here. You can click a version and download the ZIP files (the links are at the bottom).

66 | 67 |

Licensing

68 |

The player is licensed under a Creative Commons License. It allows you to use, modify and redistribute the script, but only for non-commercial purposes.

69 |

Examples of commercial use include: 70 | 71 |

77 | 78 | If any of the above conditions apply to you, then please purchase a license for the player. If you are still unsure whether you need to purchase a license, please contact us.

79 | 80 |

Related Products

81 |

In addition to the JW Player, LongTail Video has a suite of products to help you publish video.

82 |

Learn more about them here:

83 | 84 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /jwplayer/swfobject.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/ 3 | * 4 | * SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License: 5 | * http://www.opensource.org/licenses/mit-license.php 6 | * 7 | */ 8 | if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="0){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="";_19+="";var _1d=this.getParams();for(var key in _1d){_19+="";}var _1f=this.getVariablePairs().join("&");if(_1f.length>0){_19+="";}_19+="";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var axo=1;var _26=3;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,0,0]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=null?parseInt(_29[0]):0;this.minor=_29[1]!=null?parseInt(_29[1]):0;this.rev=_29[2]!=null?parseInt(_29[2]):0;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.majorfv.major){return true;}if(this.minorfv.minor){return true;}if(this.rev=0;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(deconcept.SWFObject.doPrepUnload){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject; -------------------------------------------------------------------------------- /images/spinnerBW.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 28 | 35 | 44 | 46 | 50 | 54 | 55 | 64 | 73 | 82 | 91 | 100 | 109 | 110 | 130 | 134 | 135 | 137 | 138 | 140 | image/svg+xml 141 | 143 | 144 | 145 | 146 | 147 | 152 | 158 | 164 | 165 | 171 | 177 | 178 | 184 | 190 | 191 | 192 | 193 | -------------------------------------------------------------------------------- /images/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 28 | 35 | 44 | 47 | 51 | 55 | 56 | 65 | 74 | 83 | 92 | 101 | 110 | 111 | 131 | 135 | 136 | 138 | 139 | 141 | image/svg+xml 142 | 144 | 145 | 146 | 147 | 148 | 153 | 159 | 165 | 166 | 172 | 178 | 179 | 185 | 191 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /js/modernizr-1.7.min.js: -------------------------------------------------------------------------------- 1 | // Modernizr v1.7 www.modernizr.com 2 | window.Modernizr=function(a,b,c){function G(){e.input=function(a){for(var b=0,c=a.length;b7)},r.history=function(){return !!(a.history&&history.pushState)},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){return"WebSocket"in a},r.rgba=function(){A("background-color:rgba(150,255,150,.5)");return D(k.backgroundColor,"rgba")},r.hsla=function(){A("background-color:hsla(120,40%,100%,.5)");return D(k.backgroundColor,"rgba")||D(k.backgroundColor,"hsla")},r.multiplebgs=function(){A("background:url(//:),url(//:),red url(//:)");return(new RegExp("(url\\s*\\(.*?){3}")).test(k.background)},r.backgroundsize=function(){return F("backgroundSize")},r.borderimage=function(){return F("borderImage")},r.borderradius=function(){return F("borderRadius","",function(a){return D(a,"orderRadius")})},r.boxshadow=function(){return F("boxShadow")},r.textshadow=function(){return b.createElement("div").style.textShadow===""},r.opacity=function(){B("opacity:.55");return/^0.55$/.test(k.opacity)},r.cssanimations=function(){return F("animationName")},r.csscolumns=function(){return F("columnCount")},r.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";A((a+o.join(b+a)+o.join(c+a)).slice(0,-a.length));return D(k.backgroundImage,"gradient")},r.cssreflections=function(){return F("boxReflect")},r.csstransforms=function(){return!!E(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},r.csstransforms3d=function(){var a=!!E(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=w("@media ("+o.join("transform-3d),(")+"modernizr)"));return a},r.csstransitions=function(){return F("transitionProperty")},r.fontface=function(){var a,c,d=h||g,e=b.createElement("style"),f=b.implementation||{hasFeature:function(){return!1}};e.type="text/css",d.insertBefore(e,d.firstChild),a=e.sheet||e.styleSheet;var i=f.hasFeature("CSS2","")?function(b){if(!a||!b)return!1;var c=!1;try{a.insertRule(b,0),c=/src/i.test(a.cssRules[0].cssText),a.deleteRule(a.cssRules.length-1)}catch(d){}return c}:function(b){if(!a||!b)return!1;a.cssText=b;return a.cssText.length!==0&&/src/i.test(a.cssText)&&a.cssText.replace(/\r+|\n+/g,"").indexOf(b.split(" ")[0])===0};c=i('@font-face { font-family: "font"; src: url(data:,); }'),d.removeChild(e);return c},r.video=function(){var a=b.createElement("video"),c=!!a.canPlayType;if(c){c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"');var d='video/mp4; codecs="avc1.42E01E';c.h264=a.canPlayType(d+'"')||a.canPlayType(d+', mp4a.40.2"'),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return c},r.audio=function(){var a=b.createElement("audio"),c=!!a.canPlayType;c&&(c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"'),c.mp3=a.canPlayType("audio/mpeg;"),c.wav=a.canPlayType('audio/wav; codecs="1"'),c.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;"));return c},r.localstorage=function(){try{return!!localStorage.getItem}catch(a){return!1}},r.sessionstorage=function(){try{return!!sessionStorage.getItem}catch(a){return!1}},r.webWorkers=function(){return!!a.Worker},r.applicationcache=function(){return!!a.applicationCache},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect},r.inlinesvg=function(){var a=b.createElement("div");a.innerHTML="";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var H in r)z(r,H)&&(v=H.toLowerCase(),e[v]=r[H](),u.push((e[v]?"":"no-")+v));e.input||G(),e.crosswindowmessaging=e.postmessage,e.historymanagement=e.history,e.addTest=function(a,b){a=a.toLowerCase();if(!e[a]){b=!!b(),g.className+=" "+(b?"":"no-")+a,e[a]=b;return e}},A(""),j=l=null,f&&a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function p(a,b){var c=-1,d=a.length,e,f=[];while(++c 2 | 3 | 4 | 19 | 21 | 28 | 35 | 44 | 47 | 51 | 55 | 56 | 65 | 74 | 83 | 92 | 101 | 110 | 120 | 125 | 130 | 136 | 142 | 146 | 147 | 157 | 162 | 167 | 173 | 179 | 183 | 184 | 194 | 199 | 204 | 210 | 216 | 220 | 221 | 222 | 242 | 246 | 247 | 249 | 250 | 252 | image/svg+xml 253 | 255 | 256 | 257 | 258 | 259 | 264 | 270 | 276 | 277 | 283 | 289 | 290 | 296 | 302 | 303 | 304 | 305 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The HTML5 Herald 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

The HTML5 Herald

17 |

Produced with That Good ol' Timey HTML5 & CSS3

18 |
19 | 25 |

Vol. MMXI

26 |

27 |
28 |
29 |
30 |
31 |
32 | 47 | 48 | 53 | 54 |
55 | 56 |

Video is the final frontier, and now we have conquered it!

57 |
58 |

Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla.

59 |

In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.

60 |

Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

61 |

Neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

62 |
63 |
64 |
65 |

Great Things Are Possible with CSS Columns! Pip Pip Pip!

66 |
67 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

68 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.

69 |

Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

70 |

Neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

71 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.

72 |
73 |
74 |
75 |
76 |
77 |
78 |

Text Shadow is the New Black

79 |

How do we do it?

80 |
81 |
82 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

83 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.

84 |
85 |
86 | 87 |
88 |
89 |

Wai-Aria? HAHA!

90 |

Form Accessibility

91 |
92 | 93 | WAI-ARIA Cat 94 |
95 |

96 | mouse treat 97 | mouse treat 98 | mouse treat 99 |

100 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.

101 |

Nam vestibulum, arcu sodales feugiat.

102 |
103 |
104 | 105 |
106 |
107 |

Modernizr Times

108 |

A New Era

109 |
110 | 111 |
112 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.

113 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit.

114 |
115 |
116 |
117 | 118 |
119 | 151 |
152 |
153 |

CSS Transitions - The State of Play

154 |

The future?

155 |
156 | 157 |
158 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

159 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum.

160 |

Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

161 | 162 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.

163 |

Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

164 | 165 |

Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.

166 |
167 |
168 |
169 |
170 | 171 |
172 |
173 |

Alexis Goldstein

174 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

175 |
176 |

Louis Lazaris

177 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

178 |
179 |
180 |

Estelle Weyl

181 |

Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.

182 |
183 | 184 |
185 |
186 | © SitePoint 187 |

SitePoint

188 |
189 |
190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | 2 | body { font:13px serif; *font-size:small; *font:x-small; line-height:1.22; } 3 | html, body, body div, span, object, iframe, 4 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 5 | abbr, address, cite, code, 6 | del, dfn, em, img, ins, kbd, q, samp, 7 | small, strong, sub, sup, var, 8 | b, i, 9 | dl, dt, dd, ol, ul, li, 10 | fieldset, form, label, legend, 11 | table, caption, tbody, tfoot, thead, tr, th, td, 12 | article, aside, figure, footer, header, 13 | hgroup, menu, nav, section, 14 | time, mark, audio, video, a { 15 | margin:0; 16 | padding:0; 17 | border:0; 18 | outline:0; 19 | font-size:100%; 20 | vertical-align:baseline; 21 | background:transparent none no-repeat 0 0; 22 | color: #484848; 23 | font-weight: normal; 24 | } 25 | 26 | article, aside, figure, footer, header, hgroup, nav, section { display:block; } 27 | 28 | nav ul { list-style:none; } 29 | 30 | blockquote, q { quotes:none; } 31 | 32 | blockquote:before, blockquote:after, 33 | q:before, q:after { content:''; content:none; } 34 | ins { background-color:#ff9; color:#000; text-decoration:none; } 35 | 36 | del { text-decoration: line-through; } 37 | abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; } 38 | table { border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;} 39 | input, select { vertical-align:middle; font:99% sans-serif; color: #282828;} 40 | pre, code, kbd, samp { font-family: monospace, sans-serif; }/ 41 | h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; } 42 | html { -webkit-font-smoothing: antialiased; } 43 | 44 | /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ 45 | a:hover, a: active { outline: none; } 46 | a:focus { outline: 1px dotted #f3f3f3; } 47 | ul { margin-left:30px; } 48 | ol { margin-left:30px; list-style-type: decimal; } 49 | 50 | small { font-size:85%; } 51 | strong{ font-weight: bold; } 52 | sub { vertical-align: sub; font-size: smaller; } 53 | sup { vertical-align: super; font-size: smaller; } 54 | 55 | input[type="radio"] { vertical-align: text-bottom; } 56 | input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; } 57 | .ie6 input { vertical-align: text-bottom; } 58 | label, input[type=button], input[type=submit], button { cursor: pointer; } 59 | ::-moz-selection{ background: #484848; color:#fff; text-shadow: none; } 60 | ::selection { background:#484848; color:#fff; text-shadow: none; } 61 | a:link { -webkit-tap-highlight-color: #ccc; } 62 | html { overflow-y: scroll; } 63 | button { width: auto; overflow: visible; } 64 | .ie7 img { -ms-interpolation-mode: bicubic; } 65 | 66 | /* RESET STYLES END HERE */ 67 | 68 | /* @font-face code Generated by Font Squirrel (http://www.fontsquirrel.com) */ 69 | @font-face { 70 | font-family: 'LeagueGothic'; 71 | src: url('../fonts/League_Gothic-webfont.eot'); 72 | src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), 73 | url('../fonts/League_Gothic-webfont.woff') format('woff'), 74 | url('../fonts/League_Gothic-webfont.ttf') format('truetype'), 75 | url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); 76 | font-weight: bold; 77 | font-style: normal; 78 | } 79 | 80 | @font-face { 81 | font-family: 'AcknowledgementMedium'; 82 | src: url('../fonts/Acknowledgement-webfont.eot'); 83 | src: url('../fonts/Acknowledgement-webfont.eot?#iefix') format('eot'), 84 | url('../fonts/Acknowledgement-webfont.woff') format('woff'), 85 | url('../fonts/Acknowledgement-webfont.ttf') format('truetype'), 86 | url('../fonts/Acknowledgement-webfont.svg#webfontuCYqM11k') format('svg'); 87 | font-weight: normal; 88 | font-style: normal; 89 | } 90 | 91 | html { 92 | background: transparent url(../images/bg-main.gif) repeat 0 0; 93 | height: 100%; 94 | } 95 | 96 | body { 97 | width: 758px; 98 | margin: 6px auto 0 auto; 99 | border-top: solid 1px #8e8e8e; 100 | background: transparent url(../images/bg-texture.png) no-repeat top center; 101 | height: 100%; 102 | color: #666666; 103 | font-size: 13px; 104 | position: relative; 105 | font-family: Times, "Times New Roman", serif; 106 | } 107 | 108 | 109 | h1 { 110 | text-shadow: #fff 1px 1px; 111 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 112 | text-transform: uppercase; 113 | line-height: 1; 114 | } 115 | 116 | h2 { 117 | background-position: top center; 118 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 119 | padding: 7px 0 0 0; 120 | } 121 | article h2 { 122 | background-image: url(../images/bg-header.gif); 123 | } 124 | body > header h2 { 125 | text-transform: lowercase; 126 | background-image: none; 127 | font-size: 16px; 128 | letter-spacing: 2px; 129 | text-align: center; 130 | text-shadow: none; 131 | font-weight: normal; 132 | line-height: 2; 133 | } 134 | p { 135 | margin: 0 0 13px 0; 136 | text-align: justify; 137 | line-height: 1em; 138 | } 139 | 140 | 141 | /* HEADER */ 142 | body > header { 143 | border-top: solid 1px #8e8e8e; 144 | border-bottom: solid 1px #8e8e8e; 145 | margin: 1px auto; 146 | padding-top: 8px; 147 | overflow: hidden; 148 | position: relative; 149 | } 150 | 151 | header a { 152 | text-decoration: none; 153 | color: #484848; 154 | } 155 | header a img { 156 | position: relative; 157 | top: 8px; 158 | } 159 | 160 | header hgroup { 161 | text-align: center; 162 | margin-left: 30px; 163 | } 164 | 165 | header h1 { 166 | font-family: "Times New Roman", Times, serif; 167 | font-size: 60px; 168 | position: relative; 169 | } 170 | 171 | header h1 span { 172 | position: absolute; 173 | left: 40px; 174 | top: 40%; 175 | font-size: 30%; 176 | } 177 | 178 | header p { 179 | position: absolute; 180 | bottom: 0; 181 | line-height: 25px; 182 | font-size: 12px; 183 | margin: 0; 184 | } 185 | 186 | #issue { 187 | right: 0; 188 | text-align: right; 189 | } 190 | 191 | nav { 192 | border-top: double 3px #8e8e8e; 193 | height: 28px; 194 | } 195 | 196 | nav ul { 197 | margin: 1px auto; 198 | height: 28px; 199 | white-space: nowrap; 200 | text-align: center; 201 | width: 10.2em; 202 | 203 | } 204 | 205 | nav ul li { 206 | width: 5em; 207 | float: left; 208 | } 209 | 210 | nav ul li a{ 211 | color: #484848; 212 | text-transform: uppercase; 213 | font-size: 13px; 214 | display: block; 215 | line-height: 27px; 216 | text-decoration: none; 217 | } 218 | 219 | nav ul li a:hover, nav ul li a:active { 220 | text-decoration: underline; 221 | } 222 | 223 | #main { 224 | margin: 1px 0 0 0; 225 | border-top: solid 1px #8e8e8e; 226 | padding: 15px 0; 227 | clear: both; 228 | } 229 | #main > div { 230 | float: left; 231 | } 232 | #main > div:first-of-type, /* both selectors target the same element */ 233 | #primary { 234 | width: 375px; 235 | padding-right: 4px; 236 | } 237 | 238 | #primary { 239 | width: 375px; 240 | } 241 | 242 | #main > div:nth-of-type(2), /* both selectors target the same element */ 243 | #secondary { 244 | width: 130px; 245 | } 246 | 247 | #secondary { 248 | width: 130px; 249 | } 250 | 251 | #main > div:last-of-type, /* both selectors target the same element */ 252 | #tertiary, 253 | aside { 254 | width: 244px; 255 | margin-right:0; 256 | padding-left: 4px; 257 | } 258 | 259 | #tertiary, 260 | aside { 261 | width: 244px; 262 | margin-right:0; 263 | padding-left: 4px; 264 | } 265 | /* The first article */ 266 | 267 | #primary article .content { 268 | -webkit-columns: 3 9em; 269 | -webkit-column-gap: 10px; 270 | -moz-column-count: 3; 271 | -moz-column-width: 9em; 272 | -moz-column-gap: 10px; 273 | column-count: 3; 274 | column-width: 9em; 275 | column-gap: 10px; 276 | 277 | } 278 | 279 | #primary article .content h1 { 280 | -webkit-column-span: all; 281 | -moz-column-span: all; 282 | } 283 | 284 | #video { 285 | display: block; 286 | margin-bottom: 12px; 287 | } 288 | 289 | #video, 290 | #primary article h1 { 291 | -webkit-column-span: all; 292 | -moz-column-span: all; 293 | column-span: all; 294 | clear:both; 295 | } 296 | 297 | 298 | #canvasOverlay 299 | { 300 | position:absolute; 301 | top:0px; 302 | left:0px; 303 | /* to avoid seeing the video in color for a second before the JavaScript runs 304 | * show a black background instead*/ 305 | background-color: black; 306 | margin-bottom:25px; 307 | 308 | } 309 | 310 | #secondary article{ 311 | padding: 0 4px 0 4px; 312 | float: left; 313 | border-right: solid 1px #979797; 314 | border-left: solid 1px #979797; 315 | } 316 | 317 | 318 | img[alt~=cat] { 319 | margin: 0 auto 15px; 320 | display: block; 321 | } 322 | 323 | #main > div hgroup { 324 | padding: 0 0 10px 0; 325 | margin: 0 0 5px 0; 326 | background: transparent url(../images/bg-subhead.gif) no-repeat bottom center; 327 | } 328 | 329 | #main h1 { 330 | font-size: 22px; 331 | margin: 0 0 8px 0; 332 | } 333 | 334 | #main > div h2 { 335 | font-size: 14px; 336 | text-transform: none; 337 | font-family: "Times New Roman", Times, serif; 338 | font-weight: bold; 339 | text-shadow: none; 340 | text-align: center; 341 | } 342 | 343 | 344 | #main > div:first-of-type h1 { 345 | font-size: 33px; 346 | padding: 0 0 4px 0; 347 | letter-spacing: -1px; 348 | text-align: left; 349 | } 350 | 351 | #tertiary article .content { 352 | -webkit-column-count: 2; 353 | -webkit-column-width: 117px; 354 | -webkit-column-gap: 10px; 355 | -moz-column-count: 2; 356 | -moz-column-width: 117px; 357 | -moz-column-gap: 10px; 358 | column-count: 2; 359 | column-width: 117px; 360 | column-gap: 10px; 361 | } 362 | 363 | 364 | /* advertisements */ 365 | aside { 366 | float: left; 367 | width: 246px; 368 | } 369 | 370 | aside article { 371 | width: 236px; 372 | border: 1px solid #cccccc; 373 | margin-bottom: 5px; 374 | } 375 | 376 | 377 | #ad2 { 378 | height: 170px; 379 | background-image: 380 | url(../images/bg-bike.png), 381 | url(../images/gradient.svg); 382 | /* Mozilla gradient syntax */ 383 | background-image: 384 | url(../images/bg-bike.png), 385 | -moz-linear-gradient(0% 0% 270deg, 386 | rgba(0,0,0,0.4) 0, 387 | rgba(0,0,0,0) 37%, 388 | rgba(0,0,0,0) 83%, 389 | rgba(0,0,0,0.06) 92%, 390 | rgba(0,0,0,0) 98%); 391 | /* W3C gradient syntax for WebKit */ 392 | background-image: 393 | url(../images/bg-bike.png), 394 | -webkit-linear-gradient(top, 395 | rgba(0,0,0,0.4) 0, 396 | rgba(0,0,0,0) 37%, 397 | rgba(0,0,0,0) 83%, 398 | rgba(0,0,0,0.06) 92%, 399 | rgba(0,0,0,0) 98%); 400 | /* W3C gradient syntax for Opera */ 401 | background-image: 402 | url(../images/bg-bike.png), 403 | -o-linear-gradient(top, 404 | rgba(0,0,0,0.4) 0, 405 | rgba(0,0,0,0) 37%, 406 | rgba(0,0,0,0) 83%, 407 | rgba(0,0,0,0.06) 92%, 408 | rgba(0,0,0,0) 98%); 409 | /* Unprefixed W3C syntax */ 410 | background-image: 411 | url(../images/bg-bike.png), 412 | linear-gradient(top, 413 | rgba(0,0,0,0.4) 0, 414 | rgba(0,0,0,0) 37%, 415 | rgba(0,0,0,0) 83%, 416 | rgba(0,0,0,0.06) 92%, 417 | rgba(0,0,0,0) 98%); 418 | /* Old WebKit syntax */ 419 | background-image: 420 | url(../images/bg-bike.png), 421 | -webkit-gradient(linear, 422 | from(rgba(0,0,0,0.4)), 423 | color-stop(37%, rgba(0,0,0,0)), 424 | color-stop(83%, rgba(0,0,0,0)), 425 | color-stop(92%, rgba(0,0,0,0.16)), 426 | color-stop(98%, rgba(0,0,0,0))); 427 | 428 | background-position: 50% 88%, 0 0; 429 | -webkit-transition: background-position 1s linear 250ms; 430 | -moz-transition: background-position 1s linear 250ms; 431 | -o-transition: background-position 1s linear 250ms; 432 | transition: background-position 1s linear 250ms; 433 | } 434 | 435 | #ad2 h1 { 436 | color: #484848; 437 | text-align: center; 438 | text-transform: uppercase; 439 | text-shadow: 1px 1px #FFFFFF; 440 | font-family: LeagueGothic, Arial Narrow, Helvetica, sans-serif; 441 | font-size: 42px; 442 | letter-spacing:-1px; 443 | margin: 20px 5px; 444 | text-shadow: #fff 1px 1px; 445 | } 446 | 447 | #ad2 a { 448 | text-decoration: none; 449 | } 450 | 451 | .csstransitions #ad2:hover { 452 | background-position: 150% 88%, 0 0; 453 | } 454 | 455 | #ad3 { 456 | background-image:url(../images/dukes.png); 457 | background-position: bottom left; 458 | -webkit-transition: transform 2s linear 250ms; 459 | -moz-transition: transform 2s linear 250ms; 460 | -o-transition: transform 2s linear 250ms; 461 | transition: transform 2s linear 250ms; 462 | } 463 | 464 | #ad1 h1 { 465 | font-family: AcknowledgementMedium; 466 | letter-spacing: 0.1em; 467 | font-size: 36px; 468 | margin: 0 0 0 0; 469 | text-align: center; 470 | } 471 | 472 | #ad1 h1:first-letter { 473 | letter-spacing: -0.1em; 474 | } 475 | 476 | #ad1 p { 477 | margin: 0; 478 | font-family: AcknowledgementMedium; 479 | text-transform: uppercase; 480 | font-size: 14px; 481 | text-align: center; 482 | } 483 | 484 | aside p + a { display: block; text-decoration: none; border: 5px double; color: #ffffff; background-color: #484848; text-align: center; font-size: 28px; margin: 5px 5px 9px 5px; padding: 15px 0; position: relative; 485 | border-radius: 25px; 486 | -webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1); 487 | text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5); 488 | font-family: AcknowledgementMedium, sans-serif; 489 | } 490 | 491 | .draganddrop #mouseContainer 492 | { 493 | text-align:center; 494 | } 495 | 496 | .no-draganddrop #mouseContainer 497 | { 498 | visibility:hidden; 499 | height:0px; 500 | } 501 | 502 | #ad1 a.wanted:hover { 503 | -webkit-box-shadow: 4px 10px #484848; 504 | -moz-box-shadow: 4px 10px #484848; 505 | box-shadow: 4px 10px #484848; 506 | top: -5px; 507 | left: -2px; 508 | } 509 | 510 | #ad3 h1 { 511 | font-size: 20px; 512 | font-family: AcknowledgementMedium; 513 | padding: 0 30px 0 75px; 514 | line-height:1; 515 | color: #999; 516 | margin: 0 0 0 15px; 517 | } 518 | 519 | #ad3 h1 span { 520 | font-size: 30px; 521 | color: #999999; 522 | display:inline-block; 523 | -webkit-transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out; 524 | -moz-transition: color 0.2s ease-out, -moz-transform 0.2s ease-out; 525 | -o-transition: color 0.2s ease-out, -o-transform 0.2s ease-out; 526 | transition: color 0.2s ease-out, transform 0.2s ease-out; 527 | } 528 | 529 | #ac5 { 530 | clear: left; 531 | } 532 | 533 | .holding { 534 | /* Firefox */ 535 | -moz-transition: all 0.3s ease; 536 | /* WebKit */ 537 | -webkit-transition: all 0.3s ease; 538 | /* Opera */ 539 | -o-transition: all 0.3s ease; 540 | /* Standard */ 541 | transition: all 0.3s ease; 542 | } 543 | 544 | #ad3 h1:hover span { 545 | color: #484848; 546 | -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); 547 | -moz-transform:rotate(10deg) translateX(40px) scale(1.5); 548 | -ms-transform:rotate(10deg) translateX(40px) scale(1.5); 549 | -o-transform:rotate(10deg) translateX(40px) scale(1.5); 550 | transform:rotate(10deg) translateX(40px) scale(1.5); 551 | } 552 | 553 | #ad3 p { 554 | padding: 5px 3px 0 75px; 555 | font-size: 0.85em; 556 | } 557 | 558 | .no-geolocation #ad4 { 559 | display: none; 560 | } 561 | 562 | #ad4 h1 { 563 | font-size: 20px; 564 | font-family: AcknowledgementMedium; 565 | text-align:center; 566 | } 567 | 568 | #ad4 { 569 | height:140px; 570 | position:relative; 571 | } 572 | 573 | #mapDiv { 574 | height: 140px; 575 | width: 236px; 576 | } 577 | 578 | #spinner { 579 | position:absolute; 580 | top:8px; 581 | left:55px; 582 | } 583 | 584 | 585 | /* Forms */ 586 | form { 587 | border: solid 2px #888; 588 | border-width: 2px 0; 589 | clear: both; 590 | -moz-box-shadow: 591 | inset 1px 1px 84px rgba(0,0,0,0.24), 592 | inset -1px -1px 84px rgba(0,0,0,0.24); 593 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1'); /* IE6,IE7 */ 594 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1')"; /* IE8+ */ 595 | 596 | margin: 1px 0 1px 0; 597 | text-align: center; 598 | padding: 20px; 599 | min-height: 300px; 600 | background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat bottom center; 601 | } 602 | 603 | form#geoForm 604 | { 605 | padding: 0px; 606 | border:none; 607 | min-height:0px; 608 | background:none; 609 | filter: none; 610 | -ms-filter:none; 611 | -moz-box-shadow: none; 612 | } 613 | 614 | form ul { 615 | list-style-type: none; 616 | margin: 0; 617 | padding: 0; 618 | } 619 | form ul li { 620 | margin-bottom: 40px; 621 | } 622 | 623 | label { 624 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 625 | font-size: 26px; 626 | display:block; 627 | margin: auto; 628 | text-align:center; 629 | } 630 | form p { 631 | text-align: center; 632 | } 633 | input[type=text], input[type=email], input[type=password], input[type=url], textarea { 634 | background-color: transparent; 635 | border: dotted #484848; 636 | border-width: 0 0 1px 0; 637 | display:block; 638 | margin: 10px auto 10px; 639 | font-style:italic; 640 | font-family: Times, "Times New Roman", serif; 641 | padding: 5px 30px 5px 30px; 642 | width: 50%; 643 | } 644 | 645 | input#zipcode { 646 | width:25%; 647 | display:inline; 648 | margin-right: 25px; 649 | } 650 | input[type=number] { 651 | width: 3em; 652 | } 653 | 654 | input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]) { 655 | background: transparent no-repeat top right; 656 | } 657 | 658 | input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):required { 659 | background-image: url('../images/required.png'); 660 | } 661 | 662 | input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:invalid { 663 | background-image: url('../images/invalid.png'); 664 | } 665 | input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:valid { 666 | background-image: url('../images/valid.png'); 667 | } 668 | 669 | :invalid { 670 | box-shadow: none; 671 | } 672 | 673 | ::-webkit-input-placeholder { color:#333; } 674 | 675 | 676 | input { 677 | font-size: 20px; 678 | text-align: center; 679 | } 680 | 681 | input[type=submit], input[type=button] { 682 | border: none; 683 | -moz-border-radius: 10%; 684 | border-radius: 5px; 685 | background-color: #333; 686 | /* SVG for IE9 and Opera */ 687 | background-image: url(../images/button-gradient.svg); 688 | /* Old WebKit */ 689 | background-image: -webkit-gradient(radial, 30% 120%, 0, 30% 120%, 100, 690 | color-stop(0,rgba(144,144,144,1)), 691 | color-stop(1,rgba(72,72,72,1))); 692 | /* W3C for Mozilla */ 693 | background-image: -moz-radial-gradient(30% 120%, circle, 694 | rgba(144,144,144,1) 0%, 695 | rgba(72,72,72,1) 50%); 696 | /* W3C for new WebKit */ 697 | background-image: -webkit-radial-gradient(30% 120%, circle, 698 | rgba(144,144,144,1) 0%, 699 | rgba(72,72,72,1) 50%); 700 | /* W3C unprefixed */ 701 | background-image: radial-gradient(30% 120%, circle, 702 | rgba(144,144,144, 1) 0%, 703 | rgba(72,72,72,1) 50%); 704 | color: #fff; 705 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 706 | text-transform: uppercase; 707 | font-size: 28px; 708 | padding: 10px 30px; 709 | margin: 10px auto; 710 | opacity: 0.8; 711 | -webkit-transition: opacity .25s linear; 712 | -moz-transition: opacity .25s linear; 713 | 714 | } 715 | 716 | 717 | 718 | input[type=submit]:hover { 719 | opacity: 1; 720 | -webkit-transition: opacity .25s linear; 721 | -moz-transition: opacity .25s linear; 722 | } 723 | form h1 { 724 | margin: 0 auto; 725 | font-size: 50px; 726 | font-family: AcknowledgementMedium; 727 | text-align:center; 728 | white-space:nowrap; 729 | background: 730 | url(../images/bg-formtitle-left.png) left 13px no-repeat, 731 | url(../images/bg-formtitle-right.png) right 13px no-repeat; 732 | } 733 | form h2 { 734 | font-size: 20px; 735 | } 736 | 737 | form hgroup { 738 | padding-bottom: 50px; 739 | } 740 | 741 | /* Page Footer */ 742 | body > footer, 743 | #footer { 744 | clear: both; 745 | float: left; 746 | width: 758px; 747 | } 748 | 749 | body > footer small { 750 | font-family: LeagueGothic, Tahoma, Geneva, sans-serif; 751 | text-transform: uppercase; 752 | line-height: 32px; 753 | padding: 0 0 0 7px; 754 | letter-spacing: .08em; 755 | text-shadow: rgba(0,0,0,0.4) 1px 1px 4px; 756 | float: left; 757 | } 758 | 759 | body > footer p:last-of-type{ 760 | float: right; 761 | padding: 5px 0 0 0; 762 | } 763 | 764 | /* Same rules for IE7-8 */ 765 | body footer p { 766 | float: right; 767 | padding: 5px 0 0 0; 768 | } 769 | 770 | body > footer section { 771 | float: left; 772 | 773 | } 774 | 775 | body > footer h1 { 776 | font-size: 200%; 777 | } 778 | 779 | #authors { 780 | padding-top: 10px; 781 | padding-right: 20px; 782 | background: #d1d1d1; 783 | border-top: solid 1px #888; 784 | border-bottom: solid 1px #888; 785 | } 786 | 787 | #authors section { 788 | width: 226px; 789 | padding: 0 0 0 20px; 790 | } 791 | 792 | #footerinfo { 793 | clear: both; 794 | height: 30px; 795 | width: 100%; 796 | background: transparent; 797 | } 798 | 799 | 800 | 801 | /* PRINT STYLES */ 802 | @media print { 803 | * { background: transparent !important; color: #484848 !important; text-shadow: none; } 804 | a, a:visited { color: #484848 !important; text-decoration: underline; } 805 | a:after { content: " (" attr(href) ")"; } 806 | abbr:after { content: " (" attr(title) ")"; } 807 | .ir a:after { content: ""; } /* Don't show links for images */ 808 | pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } 809 | img { page-break-inside: avoid; } 810 | @page { margin: 0.5cm; } 811 | p, h2, h3 { orphans: 3; widows: 3; } 812 | h2, h3{ page-break-after: avoid; } 813 | } 814 | -------------------------------------------------------------------------------- /fonts/League_Gothic-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Generated in 2009 by FontLab Studio Copyright info pending 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /fonts/Acknowledgement-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Copyright 19992008 Ben Weiner Licensed under the Open Font License httpscriptssilorgOFL See accompanying license and FONTLOG 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | --------------------------------------------------------------------------------