Added files

Products/Scripts/swfobject_modified.js

@@ -0,0 +1,669 @@
+/*!	SWFObject v2.0 <http://code.google.com/p/swfobject/>
+	Copyright (c) 2007 Geoff Stearns, Michael Williams, and Bobby van der Sluis
+	This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
+*/
+
+var swfobject = function() {
+	
+	var UNDEF = "undefined",
+		OBJECT = "object",
+		SHOCKWAVE_FLASH = "Shockwave Flash",
+		SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
+		FLASH_MIME_TYPE = "application/x-shockwave-flash",
+		EXPRESS_INSTALL_ID = "SWFObjectExprInst",
+		
+		win = window,
+		doc = document,
+		nav = navigator,
+		
+		domLoadFnArr = [],
+		regObjArr = [],
+		timer = null,
+		storedAltContent = null,
+		storedAltContentId = null,
+		isDomLoaded = false,
+		isExpressInstallActive = false;
+	
+	/* Centralized function for browser feature detection
+		- Proprietary feature detection (conditional compiling) is used to detect Internet Explorer's features
+		- User agent string detection is only used when no alternative is possible
+		- Is executed directly for optimal performance
+	*/	
+	var ua = function() {
+		var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF && typeof doc.appendChild != UNDEF && typeof doc.replaceChild != UNDEF && typeof doc.removeChild != UNDEF && typeof doc.cloneNode != UNDEF,
+			playerVersion = [0,0,0],
+			d = null;
+		if (typeof nav.plugins != UNDEF && typeof nav.plugins[SHOCKWAVE_FLASH] == OBJECT) {
+			d = nav.plugins[SHOCKWAVE_FLASH].description;
+			if (d) {
+				d = d.replace(/^.*\s+(\S+\s+\S+$)/, "$1");
+				playerVersion[0] = parseInt(d.replace(/^(.*)\..*$/, "$1"), 10);
+				playerVersion[1] = parseInt(d.replace(/^.*\.(.*)\s.*$/, "$1"), 10);
+				playerVersion[2] = /r/.test(d) ? parseInt(d.replace(/^.*r(.*)$/, "$1"), 10) : 0;
+			}
+		}
+		else if (typeof win.ActiveXObject != UNDEF) {
+			var a = null, fp6Crash = false;
+			try {
+				a = new ActiveXObject(SHOCKWAVE_FLASH_AX + ".7");
+			}
+			catch(e) {
+				try { 
+					a = new ActiveXObject(SHOCKWAVE_FLASH_AX + ".6");
+					playerVersion = [6,0,21];
+					a.AllowScriptAccess = "always";  // Introduced in fp6.0.47
+				}
+				catch(e) {
+					if (playerVersion[0] == 6) {
+						fp6Crash = true;
+					}
+				}
+				if (!fp6Crash) {
+					try {
+						a = new ActiveXObject(SHOCKWAVE_FLASH_AX);
+					}
+					catch(e) {}
+				}
+			}
+			if (!fp6Crash && a) { // a will return null when ActiveX is disabled
+				try {
+					d = a.GetVariable("$version");  // Will crash fp6.0.21/23/29
+					if (d) {
+						d = d.split(" ")[1].split(",");
+						playerVersion = [parseInt(d[0], 10), parseInt(d[1], 10), parseInt(d[2], 10)];
+					}
+				}
+				catch(e) {}
+			}
+		}
+		var u = nav.userAgent.toLowerCase(),
+			p = nav.platform.toLowerCase(),
+			webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit
+			ie = false,
+			windows = p ? /win/.test(p) : /win/.test(u),
+			mac = p ? /mac/.test(p) : /mac/.test(u);
+		/*@cc_on
+			ie = true;
+			@if (@_win32)
+				windows = true;
+			@elif (@_mac)
+				mac = true;
+			@end
+		@*/
+		return { w3cdom:w3cdom, pv:playerVersion, webkit:webkit, ie:ie, win:windows, mac:mac };
+	}();
+
+	/* Cross-browser onDomLoad
+		- Based on Dean Edwards' solution: http://dean.edwards.name/weblog/2006/06/again/
+		- Will fire an event as soon as the DOM of a page is loaded (supported by Gecko based browsers - like Firefox -, IE, Opera9+, Safari)
+	*/ 
+	var onDomLoad = function() {
+		if (!ua.w3cdom) {
+			return;
+		}
+		addDomLoadEvent(main);
+		if (ua.ie && ua.win) {
+			try {  // Avoid a possible Operation Aborted error
+				doc.write("<scr" + "ipt id=__ie_ondomload defer=true src=//:></scr" + "ipt>"); // String is split into pieces to avoid Norton AV to add code that can cause errors 
+				var s = getElementById("__ie_ondomload");
+				if (s) {
+					s.onreadystatechange = function() {
+						if (this.readyState == "complete") {
+							this.parentNode.removeChild(this);
+							callDomLoadFunctions();
+						}
+					};
+				}
+			}
+			catch(e) {}
+		}
+		if (ua.webkit && typeof doc.readyState != UNDEF) {
+			timer = setInterval(function() { if (/loaded|complete/.test(doc.readyState)) { callDomLoadFunctions(); }}, 10);
+		}
+		if (typeof doc.addEventListener != UNDEF) {
+			doc.addEventListener("DOMContentLoaded", callDomLoadFunctions, null);
+		}
+		addLoadEvent(callDomLoadFunctions);
+	}();
+	
+	function callDomLoadFunctions() {
+		if (isDomLoaded) {
+			return;
+		}
+		if (ua.ie && ua.win) { // Test if we can really add elements to the DOM; we don't want to fire it too early
+			var s = createElement("span");
+			try { // Avoid a possible Operation Aborted error
+				var t = doc.getElementsByTagName("body")[0].appendChild(s);
+				t.parentNode.removeChild(t);
+			}
+			catch (e) {
+				return;
+			}
+		}
+		isDomLoaded = true;
+		if (timer) {
+			clearInterval(timer);
+			timer = null;
+		}
+		var dl = domLoadFnArr.length;
+		for (var i = 0; i < dl; i++) {
+			domLoadFnArr[i]();
+		}
+	}
+	
+	function addDomLoadEvent(fn) {
+		if (isDomLoaded) {
+			fn();
+		}
+		else { 
+			domLoadFnArr[domLoadFnArr.length] = fn; // Array.push() is only available in IE5.5+
+		}
+	}
+	
+	/* Cross-browser onload
+		- Based on James Edwards' solution: http://brothercake.com/site/resources/scripts/onload/
+		- Will fire an event as soon as a web page including all of its assets are loaded 
+	 */
+	function addLoadEvent(fn) {
+		if (typeof win.addEventListener != UNDEF) {
+			win.addEventListener("load", fn, false);
+		}
+		else if (typeof doc.addEventListener != UNDEF) {
+			doc.addEventListener("load", fn, false);
+		}
+		else if (typeof win.attachEvent != UNDEF) {
+			win.attachEvent("onload", fn);
+		}
+		else if (typeof win.onload == "function") {
+			var fnOld = win.onload;
+			win.onload = function() {
+				fnOld();
+				fn();
+			};
+		}
+		else {
+			win.onload = fn;
+		}
+	}
+	
+	/* Main function
+		- Will preferably execute onDomLoad, otherwise onload (as a fallback)
+	*/
+	function main() { // Static publishing only
+		var rl = regObjArr.length;
+		for (var i = 0; i < rl; i++) { // For each registered object element
+			var id = regObjArr[i].id;
+			if (ua.pv[0] > 0) {
+				var obj = getElementById(id);
+				if (obj) {
+					regObjArr[i].width = obj.getAttribute("width") ? obj.getAttribute("width") : "0";
+					regObjArr[i].height = obj.getAttribute("height") ? obj.getAttribute("height") : "0";
+					if (hasPlayerVersion(regObjArr[i].swfVersion)) { // Flash plug-in version >= Flash content version: Houston, we have a match!
+						if (ua.webkit && ua.webkit < 312) { // Older webkit engines ignore the object element's nested param elements
+							fixParams(obj);
+						}
+						setVisibility(id, true);
+					}
+					else if (regObjArr[i].expressInstall && !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac)) { // Show the Adobe Express Install dialog if set by the web page author and if supported (fp6.0.65+ on Win/Mac OS only)
+						showExpressInstall(regObjArr[i]);
+					}
+					else { // Flash plug-in and Flash content version mismatch: display alternative content instead of Flash content
+						displayAltContent(obj);
+					}
+				}
+			}
+			else {  // If no fp is installed, we let the object element do its job (show alternative content)
+				setVisibility(id, true);
+			}
+		}
+	}
+	
+	/* Fix nested param elements, which are ignored by older webkit engines
+		- This includes Safari up to and including version 1.2.2 on Mac OS 10.3
+		- Fall back to the proprietary embed element
+	*/
+	function fixParams(obj) {
+		var nestedObj = obj.getElementsByTagName(OBJECT)[0];
+		if (nestedObj) {
+			var e = createElement("embed"), a = nestedObj.attributes;
+			if (a) {
+				var al = a.length;
+				for (var i = 0; i < al; i++) {
+					if (a[i].nodeName.toLowerCase() == "data") {
+						e.setAttribute("src", a[i].nodeValue);
+					}
+					else {
+						e.setAttribute(a[i].nodeName, a[i].nodeValue);
+					}
+				}
+			}
+			var c = nestedObj.childNodes;
+			if (c) {
+				var cl = c.length;
+				for (var j = 0; j < cl; j++) {
+					if (c[j].nodeType == 1 && c[j].nodeName.toLowerCase() == "param") {
+						e.setAttribute(c[j].getAttribute("name"), c[j].getAttribute("value"));
+					}
+				}
+			}
+			obj.parentNode.replaceChild(e, obj);
+		}
+	}
+	
+	/* Fix hanging audio/video threads and force open sockets and NetConnections to disconnect
+		- Occurs when unloading a web page in IE using fp8+ and innerHTML/outerHTML
+		- Dynamic publishing only
+	*/
+	function fixObjectLeaks(id) {
+		if (ua.ie && ua.win && hasPlayerVersion("8.0.0")) {
+			win.attachEvent("onunload", function () {
+				var obj = getElementById(id);
+				if (obj) {
+					for (var i in obj) {
+						if (typeof obj[i] == "function") {
+							obj[i] = function() {};
+						}
+					}
+					obj.parentNode.removeChild(obj);
+				}
+			});
+		}
+	}
+	
+	/* Show the Adobe Express Install dialog
+		- Reference: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75
+	*/
+	function showExpressInstall(regObj) {
+		isExpressInstallActive = true;
+		var obj = getElementById(regObj.id);
+		if (obj) {
+			if (regObj.altContentId) {
+				var ac = getElementById(regObj.altContentId);
+				if (ac) {
+					storedAltContent = ac;
+					storedAltContentId = regObj.altContentId;
+				}
+			}
+			else {
+				storedAltContent = abstractAltContent(obj);
+			}
+			if (!(/%$/.test(regObj.width)) && parseInt(regObj.width, 10) < 310) {
+				regObj.width = "310";
+			}
+			if (!(/%$/.test(regObj.height)) && parseInt(regObj.height, 10) < 137) {
+				regObj.height = "137";
+			}
+			doc.title = doc.title.slice(0, 47) + " - Flash Player Installation";
+			var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn",
+				dt = doc.title,
+				fv = "MMredirectURL=" + win.location + "&MMplayerType=" + pt + "&MMdoctitle=" + dt,
+				replaceId = regObj.id;
+			// For IE when a SWF is loading (AND: not available in cache) wait for the onload event to fire to remove the original object element
+			// In IE you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+			if (ua.ie && ua.win && obj.readyState != 4) {
+				var newObj = createElement("div");
+				replaceId += "SWFObjectNew";
+				newObj.setAttribute("id", replaceId);
+				obj.parentNode.insertBefore(newObj, obj); // Insert placeholder div that will be replaced by the object element that loads expressinstall.swf
+				obj.style.display = "none";
+				win.attachEvent("onload", function() { obj.parentNode.removeChild(obj); });
+			}
+			createSWF({ data:regObj.expressInstall, id:EXPRESS_INSTALL_ID, width:regObj.width, height:regObj.height }, { flashvars:fv }, replaceId);
+		}
+	}
+	
+	/* Functions to abstract and display alternative content
+	*/
+	function displayAltContent(obj) {
+		if (ua.ie && ua.win && obj.readyState != 4) {
+			// For IE when a SWF is loading (AND: not available in cache) wait for the onload event to fire to remove the original object element
+			// In IE you cannot properly cancel a loading SWF file without breaking browser load references, also obj.onreadystatechange doesn't work
+			var el = createElement("div");
+			obj.parentNode.insertBefore(el, obj); // Insert placeholder div that will be replaced by the alternative content
+			el.parentNode.replaceChild(abstractAltContent(obj), el);
+			obj.style.display = "none";
+			win.attachEvent("onload", function() { obj.parentNode.removeChild(obj); });
+		}
+		else {
+			obj.parentNode.replaceChild(abstractAltContent(obj), obj);
+		}
+	}	
+
+	function abstractAltContent(obj) {
+		var ac = createElement("div");
+		if (ua.win && ua.ie) {
+			ac.innerHTML = obj.innerHTML;
+		}
+		else {
+			var nestedObj = obj.getElementsByTagName(OBJECT)[0];
+			if (nestedObj) {
+				var c = nestedObj.childNodes;
+				if (c) {
+					var cl = c.length;
+					for (var i = 0; i < cl; i++) {
+						if (!(c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param") && !(c[i].nodeType == 8)) {
+							ac.appendChild(c[i].cloneNode(true));
+						}
+					}
+				}
+			}
+		}
+		return ac;
+	}
+	
+	/* Cross-browser dynamic SWF creation
+	*/
+	function createSWF(attObj, parObj, id) {
+		var r, el = getElementById(id);
+		if (typeof attObj.id == UNDEF) { // if no 'id' is defined for the object element, it will inherit the 'id' from the alternative content
+			attObj.id = id;
+		}
+		if (ua.ie && ua.win) { // IE, the object element and W3C DOM methods do not combine: fall back to outerHTML
+			var att = "";
+			for (var i in attObj) {
+				if (attObj[i] != Object.prototype[i]) { // Filter out prototype additions from other potential libraries, like Object.prototype.toJSONString = function() {}
+					if (i == "data") {
+						parObj.movie = attObj[i];
+					}
+					else if (i.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+						att += ' class="' + attObj[i] + '"';
+					}
+					else if (i != "classid") {
+						att += ' ' + i + '="' + attObj[i] + '"';
+					}
+				}
+			}
+			var par = "";
+			for (var j in parObj) {
+				if (parObj[j] != Object.prototype[j]) { // Filter out prototype additions from other potential libraries
+					par += '<param name="' + j + '" value="' + parObj[j] + '" />';
+				}
+			}
+			el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';
+			fixObjectLeaks(attObj.id); // This bug affects dynamic publishing only
+			r = getElementById(attObj.id);	
+		}
+		else if (ua.webkit && ua.webkit < 312) { // Older webkit engines ignore the object element's nested param elements: fall back to the proprietary embed element
+			var e = createElement("embed");
+			e.setAttribute("type", FLASH_MIME_TYPE);
+			for (var k in attObj) {
+				if (attObj[k] != Object.prototype[k]) { // Filter out prototype additions from other potential libraries
+					if (k == "data") {
+						e.setAttribute("src", attObj[k]);
+					}
+					else if (k.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+						e.setAttribute("class", attObj[k]);
+					}
+					else if (k != "classid") { // Filter out IE specific attribute
+						e.setAttribute(k, attObj[k]);
+					}
+				}
+			}
+			for (var l in parObj) {
+				if (parObj[l] != Object.prototype[l]) { // Filter out prototype additions from other potential libraries
+					if (l != "movie") { // Filter out IE specific param element
+						e.setAttribute(l, parObj[l]);
+					}
+				}
+			}
+			el.parentNode.replaceChild(e, el);
+			r = e;
+		}
+		else { // Well-behaving browsers
+			var o = createElement(OBJECT);
+			o.setAttribute("type", FLASH_MIME_TYPE);
+			for (var m in attObj) {
+				if (attObj[m] != Object.prototype[m]) { // Filter out prototype additions from other potential libraries
+					if (m.toLowerCase() == "styleclass") { // 'class' is an ECMA4 reserved keyword
+						o.setAttribute("class", attObj[m]);
+					}
+					else if (m != "classid") { // Filter out IE specific attribute
+						o.setAttribute(m, attObj[m]);
+					}
+				}
+			}
+			for (var n in parObj) {
+				if (parObj[n] != Object.prototype[n] && n != "movie") { // Filter out prototype additions from other potential libraries and IE specific param element
+					createObjParam(o, n, parObj[n]);
+				}
+			}
+			el.parentNode.replaceChild(o, el);
+			r = o;
+		}
+		return r;
+	}
+	
+	function createObjParam(el, pName, pValue) {
+		var p = createElement("param");
+		p.setAttribute("name", pName);	
+		p.setAttribute("value", pValue);
+		el.appendChild(p);
+	}
+	
+	function getElementById(id) {
+		return doc.getElementById(id);
+	}
+	
+	function createElement(el) {
+		return doc.createElement(el);
+	}
+	
+	function hasPlayerVersion(rv) {
+		var pv = ua.pv, v = rv.split(".");
+		v[0] = parseInt(v[0], 10);
+		v[1] = parseInt(v[1], 10);
+		v[2] = parseInt(v[2], 10);
+		return (pv[0] > v[0] || (pv[0] == v[0] && pv[1] > v[1]) || (pv[0] == v[0] && pv[1] == v[1] && pv[2] >= v[2])) ? true : false;
+	}
+	
+	/* Cross-browser dynamic CSS creation
+		- Based on Bobby van der Sluis' solution: http://www.bobbyvandersluis.com/articles/dynamicCSS.php
+	*/	
+	function createCSS(sel, decl) {
+		if (ua.ie && ua.mac) {
+			return;
+		}
+		var h = doc.getElementsByTagName("head")[0], s = createElement("style");
+		s.setAttribute("type", "text/css");
+		s.setAttribute("media", "screen");
+		if (!(ua.ie && ua.win) && typeof doc.createTextNode != UNDEF) {
+			s.appendChild(doc.createTextNode(sel + " {" + decl + "}"));
+		}
+		h.appendChild(s);
+		if (ua.ie && ua.win && typeof doc.styleSheets != UNDEF && doc.styleSheets.length > 0) {
+			var ls = doc.styleSheets[doc.styleSheets.length - 1];
+			if (typeof ls.addRule == OBJECT) {
+				ls.addRule(sel, decl);
+			}
+		}
+	}
+	
+	function setVisibility(id, isVisible) {
+		var v = isVisible ? "inherit" : "hidden";
+		if (isDomLoaded) {
+			getElementById(id).style.visibility = v;
+		}
+		else {
+			createCSS("#" + id, "visibility:" + v);
+		}
+	}
+	
+	function getTargetVersion(obj) {
+	    if (!obj)
+	        return 0;
+		var c = obj.childNodes;
+		var cl = c.length;
+		for (var i = 0; i < cl; i++) {
+			if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "object") {
+			    c = c[i].childNodes;
+			    cl = c.length;
+			    i = 0;
+			}     
+			if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param" && c[i].getAttribute("name") == "swfversion") {
+			   return c[i].getAttribute("value"); 
+			}
+		}
+		return 0;
+	}
+    
+	function getExpressInstall(obj) {
+	    if (!obj)
+	        return "";
+		var c = obj.childNodes;
+		var cl = c.length;
+		for (var i = 0; i < cl; i++) {
+			if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "object") {
+			    c = c[i].childNodes;
+			    cl = c.length;
+			    i = 0;
+			}     
+			if (c[i].nodeType == 1 && c[i].nodeName.toLowerCase() == "param" && c[i].getAttribute("name") == "expressinstall") { 
+			    return c[i].getAttribute("value"); 
+			}	       
+		}
+		return "";
+	}
+    
+	return {
+		/* Public API
+			- Reference: http://code.google.com/p/swfobject/wiki/SWFObject_2_0_documentation
+		*/ 
+		registerObject: function(objectIdStr, swfVersionStr, xiSwfUrlStr) {
+			if (!ua.w3cdom || !objectIdStr) {
+				return;
+			}
+			var obj = document.getElementById(objectIdStr);
+			var xi = getExpressInstall(obj);
+			var regObj = {};
+			regObj.id = objectIdStr;
+			regObj.swfVersion = swfVersionStr ? swfVersionStr : getTargetVersion(obj);
+			regObj.expressInstall = xiSwfUrlStr ? xiSwfUrlStr : ((xi != "") ? xi : false);
+			regObjArr[regObjArr.length] = regObj;
+			setVisibility(objectIdStr, false);
+		},
+		
+		getObjectById: function(objectIdStr) {
+			var r = null;
+			if (ua.w3cdom && isDomLoaded) {
+				var o = getElementById(objectIdStr);
+				if (o) {
+					var n = o.getElementsByTagName(OBJECT)[0];
+					if (!n || (n && typeof o.SetVariable != UNDEF)) {
+				    	r = o;
+					}
+					else if (typeof n.SetVariable != UNDEF) {
+						r = n;
+					}
+				}
+			}
+			return r;
+		},
+		
+		embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj) {
+			if (!ua.w3cdom || !swfUrlStr || !replaceElemIdStr || !widthStr || !heightStr || !swfVersionStr) {
+				return;
+			}
+			widthStr += ""; // Auto-convert to string to make it idiot proof
+			heightStr += "";
+			if (hasPlayerVersion(swfVersionStr)) {
+				setVisibility(replaceElemIdStr, false);
+				var att = (typeof attObj == OBJECT) ? attObj : {};
+				att.data = swfUrlStr;
+				att.width = widthStr;
+				att.height = heightStr;
+				var par = (typeof parObj == OBJECT) ? parObj : {};
+				if (typeof flashvarsObj == OBJECT) {
+					for (var i in flashvarsObj) {
+						if (flashvarsObj[i] != Object.prototype[i]) { // Filter out prototype additions from other potential libraries
+							if (typeof par.flashvars != UNDEF) {
+								par.flashvars += "&" + i + "=" + flashvarsObj[i];
+							}
+							else {
+								par.flashvars = i + "=" + flashvarsObj[i];
+							}
+						}
+					}
+				}
+				addDomLoadEvent(function() {
+					createSWF(att, par, replaceElemIdStr);
+					if (att.id == replaceElemIdStr) {
+						setVisibility(replaceElemIdStr, true);
+					}
+				});
+			}
+			else if (xiSwfUrlStr && !isExpressInstallActive && hasPlayerVersion("6.0.65") && (ua.win || ua.mac)) {
+				setVisibility(replaceElemIdStr, false);
+				addDomLoadEvent(function() {
+					var regObj = {};
+					regObj.id = regObj.altContentId = replaceElemIdStr;
+					regObj.width = widthStr;
+					regObj.height = heightStr;
+					regObj.expressInstall = xiSwfUrlStr;
+					showExpressInstall(regObj);
+				});
+			}
+		},
+		
+		getFlashPlayerVersion: function() {
+			return { major:ua.pv[0], minor:ua.pv[1], release:ua.pv[2] };
+		},
+		
+		hasFlashPlayerVersion:hasPlayerVersion,
+		
+		createSWF: function(attObj, parObj, replaceElemIdStr) {
+			if (ua.w3cdom && isDomLoaded) {
+				return createSWF(attObj, parObj, replaceElemIdStr);
+			}
+			else {
+				return undefined;
+			}
+		},
+		
+		createCSS: function(sel, decl) {
+			if (ua.w3cdom) {
+				createCSS(sel, decl);
+			}
+		},
+		
+		addDomLoadEvent:addDomLoadEvent,
+		
+		addLoadEvent:addLoadEvent,
+		
+		getQueryParamValue: function(param) {
+			var q = doc.location.search || doc.location.hash;
+			if (param == null) {
+				return q;
+			}
+		 	if(q) {
+				var pairs = q.substring(1).split("&");
+				for (var i = 0; i < pairs.length; i++) {
+					if (pairs[i].substring(0, pairs[i].indexOf("=")) == param) {
+						return pairs[i].substring((pairs[i].indexOf("=") + 1));
+					}
+				}
+			}
+			return "";
+		},
+		
+		// For internal usage only
+		expressInstallCallback: function() {
+			if (isExpressInstallActive && storedAltContent) {
+				var obj = getElementById(EXPRESS_INSTALL_ID);
+				if (obj) {
+					obj.parentNode.replaceChild(storedAltContent, obj);
+					if (storedAltContentId) {
+						setVisibility(storedAltContentId, true);
+						if (ua.ie && ua.win) {
+							storedAltContent.style.display = "block";
+						}
+					}
+					storedAltContent = null;
+					storedAltContentId = null;
+					isExpressInstallActive = false;
+				}
+			} 
+		}
+		
+	};
+
+}();

Products/contact.html

@@ -0,0 +1,37 @@
+<html>
+<head>
+<script language="javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<title>Spellbound | Contact Us</title>
+<style>
+p {color: #ffffff;}
+a img { border: none; }
+img {class: center; border: none;}
+</style>
+<style type="text/css">
+@import url("Sansation_Light/stylesheet.css");
+body,td,th {
+	font-family: Verdana, Geneva, sans-serif;
+}
+</style>
+</head>
+<body bgcolor ="#000000" oncontextmenu="return false">
+<center>
+<img width="99%" src="./img/contact.png">
+</center>
+</body>
+<footer>
+<center>
+<a href="navigation.html"><img width="20%" src="./img/home.png"></a>
+<p>&copy; Spellbound LTD</p>
+</center>
+</footer>
+</html>

Products/css/style.css

@@ -0,0 +1,1230 @@
+@import url("Sansation_Light/stylesheet.css");
+body{
+	font-family: Verdana, Geneva, sans-serif;
+	font-size: 14px;
+}
+a img {border: none;}
+a embed {border: none;}
+h1{font-weight:lighter;padding-top:10px;}
+
+/* Purple button */
+.btn-purple {
+    background-color: #90298C; 
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	width: 100%;
+	height: auto;
+}
+.btn-purple a {
+	text-decoration: none;
+	color: white;
+	}
+.btn-purple:hover {
+    background-color: #5F1B5B;
+}
+
+/* Green button */
+.btn-green {
+    background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	width: 100%;
+	height: auto;
+}
+.btn-green a {
+	text-decoration: none;
+	color: white;
+	}
+.btn-green:hover {
+    background-color: #00cc00;
+}
+
+/* Blue button */
+.btn-blue {
+    background-color: #0099DB;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	width: 100%;
+	height: auto;
+}
+.btn-blue a {
+	text-decoration: none;
+	color: white;
+	}
+.btn-blue:hover {
+    background-color: #006b99;
+}
+
+/* Button */
+.btn {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 17px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn a p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn:hover a p {
+	visibility: hidden;
+}
+
+.btn:hover {
+	background-image: url(../../img/evidence/at2.png) ;
+}
+
+/* Buttons for Evidence Page */
+
+/* Button - Assets Table */
+.btn-at {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+	width: 100%;
+	height: 50px;
+}
+.btn-at p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-at:hover p {
+	color: black;
+}
+
+.btn-at:hover {
+	background-image: url(../../img/evidence/at.png);
+}
+
+/* Button - Demo Video Storyboard */
+.btn-dvs {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+	width: 100%;
+	height: 50px;
+}
+.btn-dvs p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-dvs:hover p {
+	color: black;
+}
+
+.btn-dvs:hover {
+	background-image: url(../../img/evidence/dvs.png);
+	color: black;
+}
+
+/* Button - End of Project Review */
+.btn-eop {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+	width: 100%;
+	height: 50px;
+}
+.btn-eop p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-eop:hover p {
+	color: black;
+}
+
+.btn-eop:hover {
+	background-image: url(../../img/evidence/eop.png);
+	color: black;
+}
+
+/* Button - Meet the Wizard Plan */
+.btn-mtwp {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+	width: 100%;
+	height: 50px;
+}
+.btn-mtwp p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-mtwp:hover p {
+	color: black;
+}
+
+.btn-mtwp:hover {
+	background-image: url(../../img/evidence/mtwpl.png);
+	color: black;
+}
+
+/* Button - Navigation Screen Plan */
+.btn-nsp {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+	width: 100%;
+	height: 50px;
+}
+.btn-nsp p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-nsp:hover p {
+	color: black;
+}
+
+.btn-nsp:hover {
+	background-image: url(../../img/evidence/nsp.png);
+	color: black;
+}
+
+/* Button - Proposal */
+.btn-ps {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 17px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 15px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-ps p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-ps:hover p {
+	color: black;
+}
+
+.btn-ps:hover {
+	background-image: url(../../img/evidence/ps.png);
+	color: black;
+}
+
+/* Button - Proposal */
+.btn-qp {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 17px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 15px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-qp p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-qp:hover p {
+	color: black;
+}
+
+.btn-qp:hover {
+	background-image: url(../../img/evidence/qp.png);
+	color: black;
+}
+
+/* Button - Wizard Plan */
+.btn-wp {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 17px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 15px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-wp p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-wp:hover p {
+	color: black;
+}
+
+.btn-wp:hover {
+	background-image: url(../../img/evidence/wp.png);
+	color: black;
+}
+
+
+/* Button - Meet the Wizard Script */
+.btn-mtws {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 9px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-mtws p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-mtws:hover p {
+	color: black;
+}
+
+.btn-mtws:hover {
+	background-image: url(../../img/evidence/mtws.png);
+	color: black;
+}
+
+/* Buttons for Products Page */
+/* Button - Navigation Screen */
+.btn-nav {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 9px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-nav p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-nav:hover p {
+	color: black;
+}
+
+.btn-nav:hover {
+	background-image: url(../../img/products/nav.png);
+	color: black;
+}
+
+/* Button - Contact Us */
+.btn-cu {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 18px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-cu p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-cu:hover p {
+	color: white;
+}
+
+.btn-cu:hover {
+	background-image: url(../../img/products/cu.png);
+	color: white;
+}
+
+/* Button - Splashscreen */
+.btn-ss {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 18px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-ss p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-ss:hover p {
+	color: white;
+}
+
+.btn-ss:hover {
+	background-image: url(../../img/products/ss.png);
+	color: white;
+}
+
+/* Button - Meet the Wizard */
+.btn-mtw {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 9px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-mtw p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-mtw:hover p {
+	color: black;
+}
+
+.btn-mtw:hover {
+	background-image: url(../../img/products/mtwp.png);
+	color: black;
+}
+
+/* Button - Quiz */
+.btn-qu {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 18px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-qu p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-qu:hover p {
+	color: white;
+}
+
+.btn-qu:hover {
+	background-image: url(../../img/products/qu.png);
+	color: white;
+}
+
+/* Button - Demo Vid */
+.btn-dv {
+	background-color: #00e600;
+    border: none;
+    color: white;
+    padding: 18px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin: 4px 2px;
+    cursor: pointer;
+    -webkit-transition-duration: 0.4s; 
+    transition-duration: 0.4s;
+	position: relative;
+}
+.btn-dv p{
+	visibility: visible;
+	color: white;
+	text-decoration: none;
+	}
+
+.btn-dv:hover p {
+	color: white;
+}
+
+.btn-dv:hover {
+	background-image: url(../../img/products/dv.png);
+	color: white;
+}
+
+.small {
+    height: 51px;
+    overflow:hidden;
+}
+.big {
+    height: 100px;
+}
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+  float: left;
+}
+.col-xs-12 {
+  width: 100%;
+}
+.col-xs-11 {
+  width: 91.66666667%;
+}
+.col-xs-10 {
+  width: 83.33333333%;
+}
+.col-xs-9 {
+  width: 75%;
+}
+.col-xs-8 {
+  width: 66.66666667%;
+}
+.col-xs-7 {
+  width: 58.33333333%;
+}
+.col-xs-6 {
+  width: 50%;
+}
+.col-xs-5 {
+  width: 41.66666667%;
+}
+.col-xs-4 {
+  width: 33.33333333%;
+}
+.col-xs-3 {
+  width: 25%;
+}
+.col-xs-2 {
+  width: 16.66666667%;
+}
+.col-xs-1 {
+  width: 8.33333333%;
+}
+.col-xs-pull-12 {
+  right: 100%;
+}
+.col-xs-pull-11 {
+  right: 91.66666667%;
+}
+.col-xs-pull-10 {
+  right: 83.33333333%;
+}
+.col-xs-pull-9 {
+  right: 75%;
+}
+.col-xs-pull-8 {
+  right: 66.66666667%;
+}
+.col-xs-pull-7 {
+  right: 58.33333333%;
+}
+.col-xs-pull-6 {
+  right: 50%;
+}
+.col-xs-pull-5 {
+  right: 41.66666667%;
+}
+.col-xs-pull-4 {
+  right: 33.33333333%;
+}
+.col-xs-pull-3 {
+  right: 25%;
+}
+.col-xs-pull-2 {
+  right: 16.66666667%;
+}
+.col-xs-pull-1 {
+  right: 8.33333333%;
+}
+.col-xs-pull-0 {
+  right: auto;
+}
+.col-xs-push-12 {
+  left: 100%;
+}
+.col-xs-push-11 {
+  left: 91.66666667%;
+}
+.col-xs-push-10 {
+  left: 83.33333333%;
+}
+.col-xs-push-9 {
+  left: 75%;
+}
+.col-xs-push-8 {
+  left: 66.66666667%;
+}
+.col-xs-push-7 {
+  left: 58.33333333%;
+}
+.col-xs-push-6 {
+  left: 50%;
+}
+.col-xs-push-5 {
+  left: 41.66666667%;
+}
+.col-xs-push-4 {
+  left: 33.33333333%;
+}
+.col-xs-push-3 {
+  left: 25%;
+}
+.col-xs-push-2 {
+  left: 16.66666667%;
+}
+.col-xs-push-1 {
+  left: 8.33333333%;
+}
+.col-xs-push-0 {
+  left: auto;
+}
+.col-xs-offset-12 {
+  margin-left: 100%;
+}
+.col-xs-offset-11 {
+  margin-left: 91.66666667%;
+}
+.col-xs-offset-10 {
+  margin-left: 83.33333333%;
+}
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+.col-xs-offset-8 {
+  margin-left: 66.66666667%;
+}
+.col-xs-offset-7 {
+  margin-left: 58.33333333%;
+}
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+.col-xs-offset-5 {
+  margin-left: 41.66666667%;
+}
+.col-xs-offset-4 {
+  margin-left: 33.33333333%;
+}
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+.col-xs-offset-2 {
+  margin-left: 16.66666667%;
+}
+.col-xs-offset-1 {
+  margin-left: 8.33333333%;
+}
+.col-xs-offset-0 {
+  margin-left: 0%;
+}
+@media (min-width: 768px) {
+  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+    float: left;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+  .col-sm-pull-12 {
+    right: 100%;
+  }
+  .col-sm-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-sm-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-sm-pull-9 {
+    right: 75%;
+  }
+  .col-sm-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-sm-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-sm-pull-6 {
+    right: 50%;
+  }
+  .col-sm-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-sm-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-sm-pull-3 {
+    right: 25%;
+  }
+  .col-sm-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-sm-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-sm-pull-0 {
+    right: auto;
+  }
+  .col-sm-push-12 {
+    left: 100%;
+  }
+  .col-sm-push-11 {
+    left: 91.66666667%;
+  }
+  .col-sm-push-10 {
+    left: 83.33333333%;
+  }
+  .col-sm-push-9 {
+    left: 75%;
+  }
+  .col-sm-push-8 {
+    left: 66.66666667%;
+  }
+  .col-sm-push-7 {
+    left: 58.33333333%;
+  }
+  .col-sm-push-6 {
+    left: 50%;
+  }
+  .col-sm-push-5 {
+    left: 41.66666667%;
+  }
+  .col-sm-push-4 {
+    left: 33.33333333%;
+  }
+  .col-sm-push-3 {
+    left: 25%;
+  }
+  .col-sm-push-2 {
+    left: 16.66666667%;
+  }
+  .col-sm-push-1 {
+    left: 8.33333333%;
+  }
+  .col-sm-push-0 {
+    left: auto;
+  }
+  .col-sm-offset-12 {
+    margin-left: 100%;
+  }
+  .col-sm-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-sm-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+  .col-sm-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-sm-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+  .col-sm-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-sm-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+  .col-sm-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-sm-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-sm-offset-0 {
+    margin-left: 0%;
+  }
+}
+@media (min-width: 992px) {
+  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: left;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+  .col-md-pull-12 {
+    right: 100%;
+  }
+  .col-md-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-md-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-md-pull-9 {
+    right: 75%;
+  }
+  .col-md-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-md-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-md-pull-6 {
+    right: 50%;
+  }
+  .col-md-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-md-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-md-pull-3 {
+    right: 25%;
+  }
+  .col-md-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-md-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-md-pull-0 {
+    right: auto;
+  }
+  .col-md-push-12 {
+    left: 100%;
+  }
+  .col-md-push-11 {
+    left: 91.66666667%;
+  }
+  .col-md-push-10 {
+    left: 83.33333333%;
+  }
+  .col-md-push-9 {
+    left: 75%;
+  }
+  .col-md-push-8 {
+    left: 66.66666667%;
+  }
+  .col-md-push-7 {
+    left: 58.33333333%;
+  }
+  .col-md-push-6 {
+    left: 50%;
+  }
+  .col-md-push-5 {
+    left: 41.66666667%;
+  }
+  .col-md-push-4 {
+    left: 33.33333333%;
+  }
+  .col-md-push-3 {
+    left: 25%;
+  }
+  .col-md-push-2 {
+    left: 16.66666667%;
+  }
+  .col-md-push-1 {
+    left: 8.33333333%;
+  }
+  .col-md-push-0 {
+    left: auto;
+  }
+  .col-md-offset-12 {
+    margin-left: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0%;
+  }
+}
+@media (min-width: 1200px) {
+  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+    float: left;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+  .col-lg-pull-12 {
+    right: 100%;
+  }
+  .col-lg-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-lg-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-lg-pull-9 {
+    right: 75%;
+  }
+  .col-lg-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-lg-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-lg-pull-6 {
+    right: 50%;
+  }
+  .col-lg-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-lg-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-lg-pull-3 {
+    right: 25%;
+  }
+  .col-lg-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-lg-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-lg-pull-0 {
+    right: auto;
+  }
+  .col-lg-push-12 {
+    left: 100%;
+  }
+  .col-lg-push-11 {
+    left: 91.66666667%;
+  }
+  .col-lg-push-10 {
+    left: 83.33333333%;
+  }
+  .col-lg-push-9 {
+    left: 75%;
+  }
+  .col-lg-push-8 {
+    left: 66.66666667%;
+  }
+  .col-lg-push-7 {
+    left: 58.33333333%;
+  }
+  .col-lg-push-6 {
+    left: 50%;
+  }
+  .col-lg-push-5 {
+    left: 41.66666667%;
+  }
+  .col-lg-push-4 {
+    left: 33.33333333%;
+  }
+  .col-lg-push-3 {
+    left: 25%;
+  }
+  .col-lg-push-2 {
+    left: 16.66666667%;
+  }
+  .col-lg-push-1 {
+    left: 8.33333333%;
+  }
+  .col-lg-push-0 {
+    left: auto;
+  }
+  .col-lg-offset-12 {
+    margin-left: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0%;
+  }
+}

Products/index.html

@@ -0,0 +1,43 @@
+<html>
+<head>
+<title>Spellbound | L</title>
+<script language="javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<script type="text/javascript">
+(function(){
+	var millis = 1000, 
+	titles = [ 
+           "Spellbound | L",
+		"Spellbound | Lo",
+           "Spellbound | Loa",
+		"Spellbound | Load",
+           "Spellbound | Loadi",
+		"Spellbound | Loadin",
+           "Spellbound | Loading",
+		"Spellbound | Loading.",
+		"Spellbound | Loading..",
+		"Spellbound | Loading..." 
+	], count = 0;
+	titles.push(document.title);
+	setInterval(function(){
+		document.title = titles[count % titles.length];
+		++count;
+	}, millis);
+})();
+</script>
+<style>
+a img {border: none}
+</style>
+<meta http-equiv="refresh" content="10;url=navigation.html" />
+</head>
+<body bgcolor ="#000000" oncontextmenu="return false">
+<img src="screen.gif" width="99%" align="middle">
+<bgsound src="Take a Chance.mp3" loop="infinite"> 

Products/meetthewizard.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<style>
+p {color: #ffffff;}
+</style>
+<link rel="stylesheet" type="text/css" href="./css/style.css">
+<script language="javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Spellbound | Meet The Wizard</title>
+<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
+</head>
+
+<body bgcolor="000000" oncontextmenu="return false">
+<bgsound src="mtwaudio.mp3" loop="infinite"> 
+<div align="center">
+  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="768" align="middle" id="FlashID" title="Meet The Wizard">
+    <param name="movie" value="img/mtw.swf" />
+    <param name="quality" value="high" />
+    <param name="wmode" value="opaque" />
+    <param name="swfversion" value="6.0.65.0" />
+    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
+    <param name="expressinstall" value="Scripts/expressInstall.swf" />
+    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
+    <!--[if !IE]>-->
+    <object data="img/mtw.swf" type="application/x-shockwave-flash" width="1037" height="778" align="middle">
+      <!--<![endif]-->
+      <param name="quality" value="high" />
+      <param name="wmode" value="opaque" />
+      <param name="swfversion" value="6.0.65.0" />
+      <param name="expressinstall" value="Scripts/expressInstall.swf" />
+      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
+      <div>
+        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
+        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
+      </div>
+      <!--[if !IE]>-->
+    </object>
+    <!--<![endif]-->
+  </object>
+</div>
+<script type="text/javascript">
+swfobject.registerObject("FlashID");
+</script>
+</body>
+<footer>
+<center>
+<a href="navigation.html"><img width="20%" src="./img/home.png"></a>
+</center>
+</footer>
+</html>

Products/navigation.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/js/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<link rel="stylesheet" type="text/css" href="./css/style.css">
+<script language="javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Spellbound Demo | Navigation</title>
+<style>
+img {class: center; }
+</style>
+<bgsound src="Clean Soul.mp3" />
+<script type="text/javascript">
+function MM_swapImgRestore() { //v3.0
+  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
+}
+function MM_preloadImages() { //v3.0
+  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
+    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
+    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
+}
+
+function MM_findObj(n, d) { //v4.01
+  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
+    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
+  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
+  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
+  if(!x && d.getElementById) x=d.getElementById(n); return x;
+}
+
+function MM_swapImage() { //v3.0
+  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
+   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
+}
+</script>
+<script type="text/javascript">
+function quiz() {
+var answer = confirm ("Please save the file then run it.")
+if (answer)
+window.location="\quiz.ppsx";
+}
+</script>
+</head>
+<center>
+<body onload="MM_preloadImages('img/nav/MeetTheWizard2.png')" oncontextmenu="return false">
+<p><a href="meetthewizard.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Meet The Wizard','','img/nav/MeetTheWizard2.png',1)"><img class="center" src="img/nav/MeetTheWizard1.png" alt="Meet The Wizard" width="327" height="221" id="Meet The Wizard" /> </a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ContactUs','','img/nav/ContactUs2.png',0)"><img class="center" src="img/nav/ContactUs1.png" alt="Contact Us" width="327" height="221" id="ContactUs" /></a></p>
+<p><a href="trailer.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Trailer','','img/nav/Trailer2.png',0)"><img src="img/nav/Trailer1.png" alt="Trailer" width="327" height="221" id="Trailer" /> </a><a href="javascript:quiz();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TrialQuiz','','img/nav/TrialQuiz2.png',0)"><img class="center" src="img/nav/TrialQuiz1.png" alt="Trial Quiz" name="TrialQuiz" width="327" height="221" id="TrialQuiz" /></a></p>
+</body>
+<footer>
+<p><font color="black">&copy; Spellbound LTD</font></p>
+</footer>
+</html>

Products/trailer.html

@@ -0,0 +1,19 @@
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="./css/style.css">
+<title>Spellbound | Trailer</title>
+<style>
+p {color: #ffffff;}
+</style>
+</head>
+<body bgcolor="000000">
+<div style"margin:0 auto;" align="center">
+<embed src="trailer.wmv" width="640" height="360" autoplay></embed>
+</div>
+</body>
+<footer>
+<center>
+<a href="navigation.html"><img width="20%" src="./img/home.png"></a>
+<p>&copy; Spellbound LTD</p>
+</center>
+</footer>

evidence.html

@@ -0,0 +1,163 @@
+<!doctype html>
+<html>
+<head>
+<script language="javascript" type="text/javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<style>
+h1{font-weight:lighter;padding-top:10px;}
+</style>
+<meta charset="utf-8">
+<meta name="description" content="Spellbound Evidence Page">
+<meta name="keywords" content="spellbound,evidence,owen,maple">
+<meta name="author" content="Owen Maple">
+<link rel="stylesheet" type="text/css" href="./Products/css/style.css">
+<script>
+function MM_swapImgRestore() { //v3.0
+  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
+}
+function MM_preloadImages() { //v3.0
+  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
+    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
+    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
+}
+
+function MM_findObj(n, d) { //v4.01
+  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
+    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
+  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
+  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
+  if(!x && d.getElementById) x=d.getElementById(n); return x;
+}
+
+function MM_swapImage() { //v3.0
+  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
+   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
+}
+</script>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Spellbound| E portfolio - Evidence</title>
+</head>
+<body onLoad="MM_preloadImages('img/evidence/at2.png','img/evidence/dvs2.png','img/evidence/eop2.png','img/evidence/mtw2.png','img/evidence/ps2.png','img/evidence/qp2.png','img/evidence/wp2.png')">
+<div align="center">
+<!--<table width="973" border="0">
+  <tr>
+    <td colspan="6"><img width="1010px" src="./img/eportheader.png"></td>
+  </tr>
+  <tr>
+    <td width="154" rowspan="3" align="center" valign="top">
+      <img src="Products/img/logots.png" style="width: 150px;">
+      <a href="./index.html"><div class="btn-purple">Home</div></a>
+      <a href="./evidence.html"><div class="btn-green">Evidence</div></a>
+      <a href="./products.html"><div class="btn-blue">Products</div>
+      </a></td>
+    <td style="display: inline-block;background-color: #B7FFFF; border: 3px solid #B7FFFF; font-size: 13px;" colspan="5">Candidate name: Owen Maple | Candidate number: 2077    |      Center name: Testwood Sports College | Center number: 58837</td>
+    </tr>
+  <tr>
+    <td height="51" colspan="5" align="center" valign="top"><h1>Evidence</h1>
+      <hr style="width:80%;"></td>
+    </tr>
+  <tr>
+    <td width="176" height="209" align="center" valign="top">
+    <p><a target="_blank" href="Evidence/Assets Table.pdf"><div class="btn-at"><p>Assets Table</p></div></a></p>
+    <p>When developing/sourcing assets I came to a number of barriers. For instance when sourcing pictures of galaxies for the splash screen many images were branded or you had to pay to use them, so I had to spend some time finding a suitable image to use. When it came to creating a logo for spellbound and Calm UK, I came  to some difficulty due to a creative block and the lack of 3D modeling programs on the school system, this meant that the final logos were not something I was 100% happy with. Audio was fairly easy to source as there are a number of copyright-free music websites on the ether.</p></td>
+    
+    <td width="165" align="center" valign="top">
+    <p><a target="_blank" href="Evidence/Demo video Storyboard.pdf"><div class="btn-dvs"><p>Demo Video Storyboard</p></div></a></p>
+    <p>The demo video was fairly simple to plan out as I had a clear image in my mind of what I wanted the end product to be, within reason unlike some of my other <span data-dobid="hdw">ambitious</span> projects. </p></td>
+    <td width="165" align="center" valign="top">
+    <p><a target="_blank" href="Evidence/Project Review.pdf"><div class="btn-eop"><p>Project Review</p></div></a></p>
+    <p>The end of project review was a challenge to compile as writing about my work isn't my strong point. Despite this it was a nice experience to be able to see all my previous works from the project and see how my skills have evolved over the course of a year and a half.</p></td>
+    <td width="165" align="center" valign="top">
+    <p><a target="_blank" href="Evidence/Meet the wizard plan.jpg"><div class="btn-mtwp"><p>Meet the Wizard Plan</p></div></a></p>
+      <p>The meet the wizard was fairly simple to plan as I knew exactly what I wanted. However the end result wasn't everything I wanted due to limitations of software, more animation would have been good to add.</p></td>
+    <td width="165" align="center" valign="top">
+    <p><a href="Evidence/Navigation Screen Plan.pdf" target="_blank"><div class="btn-nsp">Navigation Screen Plan</div></a></p>
+      <p>My navigation screen was based off of a commonly used asset known as bootstrap. Its a simplistic style but effective for its use however I did not add the logo as I originally intended, as I was dissatisfied with it.</p></td>
+  </tr>
+  <tr>
+    <td width="154">&nbsp;</td>
+    <td width="176" align="center" valign="top">
+    <a href="Evidence/Proposal Spellbound.pdf" target="_blank"><div class="btn-ps">Proposal</div></a>
+      <p>When creating the proposal I was very new to the project and didn't know what to expect from it. My plan was very much one of complication and I was unable to stick to what I had planned to due to limits with the schools hardware and software and my own ability to complete projects of a large scale in a short time frame.</p>
+      <p>&nbsp;</p></td>
+    <td width="165" align="center" valign="top">
+    <a href="Evidence/Quiz - How it works.pdf" target="_blank"><div class="btn-qp">Quiz Plan</div></a>
+      <p>The quiz plan was designed to guide me through each stage of the quiz and how it would work. The original plan was to have the quiz on web pages utilizing hyper links and buttons however this would have taken much longer than creating the quiz on PowerPoint, which is what I did in the end.</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p></p></td>
+    <td width="165" align="center" valign="top">
+    <a href="Evidence/Wizard Plan.pdf" target="_blank"><div class="btn-wp">Wizard Plan</div></a>
+      <p>Designing the wizard was a challenge as I am not a very creative person, however I did manage to create a simplistic design through the use of word. The wizard that is now in use was in fact the plan I made in word and I decided to use the wizard I made using the shapes feature in word as I started the course a few months late so I had to speed up the rate of which I worked.</p></td>
+    <td width="165" align="center" valign="top">
+    <a href="Evidence/Meet The Wizard Script.pdf" target="_blank"><div class="btn-mtws">Meet the Wizard Script</div></a>
+      <p>Compiling a script for the meet the wizard was some what of a challenging process for someone like myself who lacks the capability to creatively plan. I made the script to clearly state the key points of the Meet The Wizard in a tone that the younger audience would understand.</p></td>
+    <td width="165">&nbsp;</td>
+  </tr>
+</table>-->
+<div class="col-md-10 col-md-offset-1">
+<img width="100%" src="./img/eportheader.png">
+</div>
+<div class="col-md-1 col-md-offset-1">
+<a href="./index.html"><div class="btn-purple">Home</div></a>
+<a href="./evidence.html"><div class="btn-green">Evidence</div></a>
+<a href="./products.html"><div class="btn-blue">Products</div></a>
+</div>
+<div class="col-md-9" align="center" style="text-align: center;font-size:15px;">
+Candidate name: Owen Maple | Candidate number: 2077 | Center name: Testwood Sports College | Center number: 58837
+</div>
+<div class="col-md-7 col-md-offset-1" align="center" style="text-align: left;font-size:15px;">
+<h1>Evidence</h1>
+<hr style="width:80%;">
+<div class="col-md-3">
+<p><a target="_blank" href="Evidence/Assets Table.pdf"><div class="btn-at"><p>Assets Table</p></div></a></p>
+<p>When developing/sourcing assets I came to a number of barriers. For instance when sourcing pictures of galaxies for the splash screen many images were branded or you had to pay to use them, so I had to spend some time finding a suitable image to use. When it came to creating a logo for spellbound and Calm UK, I came  to some difficulty due to a creative block and the lack of 3D modeling programs on the school system, this meant that the final logos were not something I was 100% happy with. Audio was fairly easy to source as there are a number of copyright-free music websites on the ether.</p>
+</div>  
+<div class="col-md-3"> 
+<p><a target="_blank" href="Evidence/Demo video Storyboard.pdf"><div class="btn-dvs"><p>Demo Video Storyboard</p></div></a></p>
+<p>The demo video was fairly simple to plan out as I had a clear image in my mind of what I wanted the end product to be, within reason unlike some of my other <span data-dobid="hdw">ambitious</span> projects. </p>
+</div>
+<div class="col-md-3">
+<p><a target="_blank" href="Evidence/Project Review.pdf"><div class="btn-eop"><p>Project Review</p></div></a></p>
+<p>The end of project review was a challenge to compile as writing about my work isn't my strong point. Despite this it was a nice experience to be able to see all my previous works from the project and see how my skills have evolved over the course of a year and a half.</p>
+</div>
+<div class="col-md-3">
+<p><a target="_blank" href="Evidence/Meet the wizard plan.jpg"><div class="btn-mtwp"><p>Meet the Wizard Plan</p></div></a></p>
+<p>The meet the wizard was fairly simple to plan as I knew exactly what I wanted. However the end result wasn't everything I wanted due to limitations of software, more animation would have been good to add.</p>
+</div>
+<div class="col-md-3">
+<p><a href="Evidence/Navigation Screen Plan.pdf" target="_blank"><div class="btn-nsp">Navigation Screen Plan</div></a></p>
+<p>My navigation screen was based off of a commonly used asset known as bootstrap. Its a simplistic style but effective for its use however I did not add the logo as I originally intended, as I was dissatisfied with it.</p>
+</div>
+<div class="col-md-3">
+<p><a href="Evidence/Proposal Spellbound.pdf" target="_blank"><div class="btn-ps">Proposal</div></a></p>
+<p>When creating the proposal I was very new to the project and didn't know what to expect from it. My plan was very much one of complication and I was unable to stick to what I had planned to due to limits with the schools hardware and software and my own ability to complete projects of a large scale in a short time frame.</p>
+</div>
+    <td width="165" align="center" valign="top">
+    <a href="Evidence/Quiz - How it works.pdf" target="_blank"><div class="btn-qp">Quiz Plan</div></a>
+      <p>The quiz plan was designed to guide me through each stage of the quiz and how it would work. The original plan was to have the quiz on web pages utilizing hyper links and buttons however this would have taken much longer than creating the quiz on PowerPoint, which is what I did in the end.</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p></p></td>
+    <td width="165" align="center" valign="top">
+    <a href="Evidence/Wizard Plan.pdf" target="_blank"><div class="btn-wp">Wizard Plan</div></a>
+      <p>Designing the wizard was a challenge as I am not a very creative person, however I did manage to create a simplistic design through the use of word. The wizard that is now in use was in fact the plan I made in word and I decided to use the wizard I made using the shapes feature in word as I started the course a few months late so I had to speed up the rate of which I worked.</p></td>
+    <td width="165" align="center" valign="top">
+    <a href="Evidence/Meet The Wizard Script.pdf" target="_blank"><div class="btn-mtws">Meet the Wizard Script</div></a>
+      <p>Compiling a script for the meet the wizard was some what of a challenging process for someone like myself who lacks the capability to creatively plan. I made the script to clearly state the key points of the Meet The Wizard in a tone that the younger audience would understand.</p></td>
+    <td width="165">&nbsp;</td>
+  </tr>
+</div>
+</div>
+</body>
+</html>

index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+<head>
+<link rel="stylesheet" type="text/css" href="./Products/css/style.css">
+<script language="javascript" type="text/javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<script>
+function MM_preloadImages() { //v3.0
+  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
+    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
+    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
+}
+
+document.getElementById('logo').ondragstart = function() { return false; };
+</script>
+<meta charset="utf-8">
+<title>Spellbound  | E portfolio - Home</title>
+</head>
+<body>
+<div align="center">
+  <!--<table width="973" border="0">
+  <tr>
+    <td colspan="3"><img width="1010px" src="./img/eportheader.png"></td>
+  </tr>
+  <tr>
+    <td width="154" rowspan="3" align="center" valign="top">
+      <img src="Products/img/logots.png" style="width: 150px;">
+      <a href="./index.html"><div class="btn-purple">Home</div></a>
+      <a href="./evidence.html"><div class="btn-green">Evidence</div></a>
+      <a href="./products.html"><div class="btn-blue">Products</div></a></td>
+    <td style="display: inline-block;background-color: #B7FFFF; border: 3px solid #B7FFFF; font-size: 13px;" colspan="2">Candidate name: Owen Maple | Candidate number: 2077    |      Center name: Testwood Sports College | Center number: 58837</td>
+    </tr>
+  <tr>
+    <td width="666" height="209" align="left" valign="top"><p style="padding: 10px;">The project aim was to produce a high quality, user friendly trailer for younger children to assist them with spelling. It was aimed to be something that would interest teachers and parents for use on children within their care.</p>
+    <p>This site is optimized for Internet Explorer. If possible please switch to that web browser otherwise the site may not work. The optimal resolution for the site is 1024px X 768px</p></td>
+    <td width="182" align="center" valign="top"><p><img style="padding:10px;" src="img/wizard.png" width="182" height="351" alt="Wizard"></p></td>
+  </tr>
+</table>-->
+<div class="col-md-10 col-md-offset-1">
+<img width="100%" src="./img/eportheader.png">
+</div>
+<div class="col-md-1 col-md-offset-1">
+<a href="./index.html"><div class="btn-purple">Home</div></a>
+<a href="./evidence.html"><div class="btn-green">Evidence</div></a>
+<a href="./products.html"><div class="btn-blue">Products</div></a>
+</div>
+<div class="col-md-9" align="center" style="text-align: center;font-size:15px;">
+Candidate name: Owen Maple | Candidate number: 2077 | Center name: Testwood Sports College | Center number: 58837
+</div>
+<div class="col-md-7 col-md-offset-1" align="center" style="text-align: left;font-size:15px;">
+<p>The project aim was to produce a high quality, user friendly trailer for younger children to assist them with spelling. It was aimed to be something that would interest teachers and parents for use on children within their care.</p>
+<p>This site is optimized for Google Chrome. If possible please switch to that web browser otherwise the site may not work. The optimal resolution for the site is 1400px X 788px</p>
+</div>
+</div>
+</body></html>

products.html

@@ -0,0 +1,115 @@
+<!doctype html>
+<html>
+<head>
+<script language="javascript" type="text/javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<style>
+.fade img:hover{filter: alpha(opacity=80);}
+h1{font-weight:lighter;padding-top:10px;}
+</style>
+<link rel="stylesheet" type="text/css" href="./Products/css/style.css">
+<script type="text/javascript">
+function quiz() {
+var answer = confirm ("Please save the file then run it.")
+if (answer)
+window.location="Products/quiz.ppsx";
+}
+</script>
+<script language="javascript" type="text/javascript">
+document.onmousedown=disableclick;
+function disableclick(event)
+{
+  if(event.button==2)
+   {
+     return false;    
+   }
+}
+</script>
+<script>
+function MM_swapImgRestore() { //v3.0
+  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
+}
+function MM_preloadImages() { //v3.0
+  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
+    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
+    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
+}
+
+function MM_findObj(n, d) { //v4.01
+  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
+    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
+  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
+  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
+  if(!x && d.getElementById) x=d.getElementById(n); return x;
+}
+
+function MM_swapImage() { //v3.0
+  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
+   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
+}
+</script>
+
+<meta charset="utf-8">
+<title>Spellbound| Eportfolio - Products</title>
+</head>
+<body onLoad="MM_preloadImages('img/products/ss2.png','img/products/ns2.png','img/products/cu2.png')">
+<div align="center">
+<table width="973" border="0">
+  <tr>
+    <td colspan="6"><img width="1010px" src="./img/eportheader.png"></td>
+  </tr>
+  <tr>
+    <td width="154" rowspan="3" align="center" valign="top">
+      <img src="Products/img/logots.png" style="width: 150px;">
+      <a href="./index.html"><div class="btn-purple">Home</div></a>
+      <a href="./evidence.html"><div class="btn-green">Evidence</div></a>
+      <a href="./products.html"><div class="btn-blue">Products</div></a></td>
+    <td style="display: inline-block;background-color: #B7FFFF; border: 3px solid #B7FFFF; font-size: 13px;" colspan="5">Candidate name: Owen Maple | Candidate number: 2077    |      Center name: Testwood Sports College | Center number: 58837</td>
+    </tr>
+  <tr>
+    <td height="51" colspan="5" align="center" valign="top"><h1 style="padding:6px;">Products</h1><hr style="width:80%;"></td>
+    </tr>
+  <tr>
+    <td width="176" height="209" align="center" valign="top">&nbsp;</td>
+    <td width="165" align="center" valign="top">
+    <p><a href="Products/navigation.html" target="_blank"><div class="btn-nav">Navigation Screen</div></a></p>
+    <p>The navigation screen followed the simplistic themes found in css/js scripts such as bootstrap. The original plan was to have the spellbound logo in the center however the logo isn't amazing and it would ruin the simplistic design I was going for.</p></td>
+    <td width="165" align="center" valign="top">
+    <p><a href="Products/contact.html" target="_blank"><div class="btn-cu">Contact Us</div></a></p>
+    <p>The contact screen was fairly simple to throw together as the splashscreen was already in a position to be adapated for this use. It worked out by simply adding some extra text in a contrasting colour to make the information stand out.</p></td>
+    <td width="165" align="center" valign="top">
+    <p><a href="Products/index.html" target="_blank"><div class="btn-ss">Splashscreen</div></a></p>
+    <p>The splashscreen has be through 2 phases. The first had a bland background and text that could have easily been missed but now a gradient is used to allow text and images to stand out more.</p></td>
+    <td width="165" align="center" valign="top"><p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p></td>
+  </tr>
+  <tr>
+    <td width="154">&nbsp;</td>
+    <td width="176" align="center" valign="top">&nbsp;</td>
+    <td width="165" align="center" valign="top">
+    <p><a href="Products/meetthewizard.html" target="_blank"><div class="btn-mtw">Meet the Wizard</div></a></p>
+    <p>The meet the wizard was targeted originally to demonstrate the quiz without the use of sound, once completed it did feel as if it was missing something and so a voice over was added to make the character come to life allowing for a more immersive experience for the user.</p></td>
+    <td width="165" align="center" valign="top">
+    <p><a href="javascript:quiz();"><div class="btn-qu">Quiz</div></a></p>
+    <p>The quiz was where my functional side could really do its justice. I designed it to be easy to use for the younger children that the software is aimed at. I really enjoyed developing the quiz as it was simplistic yet methodical. The original idea for the quiz was to use a website instead of PowerPoint however due to the lack of software on the school machines I was unable to do it in this way.</p></td>
+    <td width="165" align="center" valign="top">
+    <p><a href="Products/trailer.html" target="_blank"><div class="btn-dv">Demo Video</div></a></p>
+    <p>The demo video was an exciting project to work on. I know how to video edit so that watching a video is not a bore. I think that the video is informative and enjoyable to watch even if the quality has to be lesser than appropriate due to the file size limits. </p></td>
+    <td width="165">
+    <p></p>
+    </td>
+  </tr>
+</table>
+</div>
+</body></html>

test.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Untitled Document</title>
+<!-- Compiled and minified CSS -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
+
+  <!-- Compiled and minified JavaScript -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+          
+
+</head>
+
+<body>
+<div class="container">
+  <div class="row">
+    <div class="col s12"><img width="100%" src="./img/eportheader.png"></div>
+    <div class="col s12 m4 l2"><a class="waves-effect waves-light btn-large purple">Home</a><a class="waves-effect waves-light btn-large green">Evidence</a><a class="waves-effect waves-light btn-large blue">Products</a></div>
+  </div>
+  <div class="row">
+    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
+    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
+    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
+    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
+  </div>
+</div>
+</body>
+</html>