diff --git a/1-js/06-advanced-functions/01-recursion/head.html b/1-js/06-advanced-functions/01-recursion/head.html
index c2ac3e8c..bb7fe877 100644
--- a/1-js/06-advanced-functions/01-recursion/head.html
+++ b/1-js/06-advanced-functions/01-recursion/head.html
@@ -7,7 +7,7 @@
 
 .function-execution-context {
   border: 1px solid black;
-  font-family: "Consolas", monospace;
+  font-family: 'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', monospace;
   padding: 4px 6px;
   margin: 0 4px;
 }
@@ -23,4 +23,4 @@
 .function-execution-context-list li:first-child {
   font-weight: bold;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css
index a82c7d9c..aa47c046 100755
--- a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css
+++ b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
 }
 
 blockquote {
@@ -25,4 +25,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
\ No newline at end of file
+}
diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css
index a82c7d9c..aa47c046 100755
--- a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css
+++ b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
 }
 
 blockquote {
@@ -25,4 +25,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
\ No newline at end of file
+}
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css
index 700bd8c2..c4dd2616 100644
--- a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css
+++ b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
 }
 
 blockquote {
@@ -25,4 +25,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
\ No newline at end of file
+}
diff --git a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css
index d2493f6e..f2b2cca8 100644
--- a/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css
+++ b/2-ui/1-document/11-coordinates/4-position-inside-absolute/solution.view/index.css
@@ -5,7 +5,7 @@
   border: 1px solid black;
   background: white;
   text-align: center;
-  font: italic 14px Georgia;
+  font: italic 14px serif;
   opacity: .8;
 }
 
@@ -26,4 +26,4 @@ blockquote:before {
   line-height: .1em;
   margin-right: .25em;
   vertical-align: -.4em;
-}
\ No newline at end of file
+}
diff --git a/3-animation/1-bezier-curve/demo.svg b/3-animation/1-bezier-curve/demo.svg
index d9236b9a..fbf8e87d 100644
--- a/3-animation/1-bezier-curve/demo.svg
+++ b/3-animation/1-bezier-curve/demo.svg
@@ -1 +1 @@
-<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
<!--+ no-optimize -->
<!--
@see
http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
http://apike.ca/prog_svg_paths.html
http://www.the-art-of-web.com/css/css-animation/
http://srufaculty.sru.edu/david.dailey/svg/curve.svg
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
-->
<defs>
<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>


<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>


<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>


<path fill="none" id="control-path" stroke="#E8C48E"/>
<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>

<path d="" fill="none" id="t-path-template"/>

<svg x="0" y="0" id="p-template">
<circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
</svg>

<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>

<svg>
<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
<text x="38" y="27" style="font-size:18px;font-family:Consolas, Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
</svg>

<script><![CDATA[
	let xmlns = "http://www.w3.org/2000/svg";
	let xlinkns  = "http://www.w3.org/1999/xlink";

	let box = {left:20, top: 50, right: 320, bottom: 350 };

	if (location.search.match('small=1')) {
	  box = {left:20, top: 50, right: 120, bottom: 150 };
	}

	document.documentElement.ondragstart = function() {
	  return false;
	};

	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];

	// don't show a piece of control path between P2 and P3
	let hideMiddleControlPath = location.search.match('nocpath=1');

	pointsIn = pointsIn.split(',');

	let points = [];

	// read points from ?p=...
	for(let i=0; i<pointsIn.length; i++) {
	  let x = box.left + (box.right - box.left)*pointsIn[i];
	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
	  points.push({x: x, y: y});
	}

	let bezierPath = document.getElementById("bezier-path");
	let controlPath = document.getElementById("control-path");
	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';

	let runButton = document.getElementById("run-button");
	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';



	let tPathTemplate = document.getElementById("t-path-template");
	tPathTemplate.parentNode.removeChild(tPathTemplate);

	function drawPath() {
	  let letter;
	  switch (points.length) {
	  case 4:
	    letter = 'C';
	    break;
	  case 3:
	    letter = 'Q';
	    break;
	  default:
	    letter = 'L';
	  }
	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';

	  for(let i = 1; i < points.length; i++) {
	    bezierPathD += points[i].x + ',' + points[i].y + ' ';
	    controlPathD += points[i].x + ',' + points[i].y + ' ';
	  }
	  bezierPath.setAttribute('d', bezierPathD);
	  controlPath.setAttribute('d', controlPathD);

	  function dist(a,b) {
	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
	  }

	  if (hideMiddleControlPath) {
	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
	  }

	}

	// draw control points
	function drawPoints(points) {
	  let p = document.getElementById('p-template');
	  p.removeAttribute('id');
	  p.parentNode.removeChild(p);

	  for(let i=0; i<points.length; i++) {
	    let point = p.cloneNode(true);
	    point.getElementsByTagName('text')[0].firstChild.data = i+1;
	    setPointCoords(point, i);
	    setPointHandler(point, i);
	    document.documentElement.appendChild(point);
	  }

	}

	// control points coords are shifted from Left-Upper corner a bit
	// to give them space to render
	function setPointCoords(point, i) {
	  point.setAttribute('x', points[i].x-20);
	  point.setAttribute('y', points[i].y-20);
	}

	function setPointHandler(point, i) {
	  let circle = point.getElementsByTagName('circle')[0];
	  circle.onmousedown = function() {
	    document.onmousemove = function(e) {
	      let x = e.pageX, y = e.pageY;

	      // constrain withing the box
	      if (x < box.left) x = box.left;
	      if (x > box.right) x = box.right;
	      if (y > box.bottom) y = box.bottom;
	      if (y < box.top) y = box.top;

	      points[i].x = x;
	      points[i].y = y;
	      setPointCoords(point, i);
	      drawPath();
	    }
	    document.onmouseup = function() {
	      document.onmousemove = document.onmouseup = null;
	    }
	    return false;
	  }
	}

	// draw point connectors which form the curve
	function drawT(points, t) {
	  let path = document.getElementById('t-'+points.length);

	  if (!path) {
	    path = tPathTemplate.cloneNode(true);
	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
	    path.setAttribute('id', 't-'+points.length);
	    document.documentElement.appendChild(path);
	  }

	  let subPoints = [];
	  let x = points[0].x + (points[1].x - points[0].x)*t;
	  let y = points[0].y + (points[1].y - points[0].y)*t;

	  let tPathD = "M" + x + ',' + y + ' L';
	  subPoints.push({x, y});

	  for(let i=1; i<points.length-1; i++) {
	    let x = points[i].x + (points[i+1].x - points[i].x)*t;
	    let y = points[i].y + (points[i+1].y - points[i].y)*t;
	    subPoints.push({x: x, y: y});

	    tPathD += x + ',' + y + ' ';
	  }

	  if (points.length <= 3) {
	    let m = document.getElementById('marker');
	    let mx, my;
	    if (t == 1) {
	      mx = -10, my = -10;
	    } else {
	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;
	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;
	    }
	    m.setAttribute('cx', mx);
	    m.setAttribute('cy', my);
	    path.setAttribute('stroke-width', 2);
	  }
	  if (points.length == 2) {
	    // only 2 points provided, special case
	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
	  }

	  path.setAttribute('d', tPathD);

	  if (subPoints.length > 2){
	    drawT(subPoints, t);
	  }
	}

	let t = 0;
	let timer;


	// animate the curve
	function animate(complete) {

	  timer = setInterval(function() {
	    if (t>1) {
	      t = 1;
	    }
	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
	    drawT(points, t);

	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
	/*
	    if (t >= 0.5) {
	      clearInterval(timer);
	      runButton.parentNode.style.display = 'none';
	      return;
	    }
	*/
	    if (t == 1) {
	      clearInterval(timer);
	      timer = 0;
	      complete && complete();
	      return;
	    }

	    t += 0.005;
	  }, 30);
	}

	function animationDone() {
	  for(let i=1; i<=points.length; i++) {
	    let path = document.getElementById('t-'+i);
	    path && document.documentElement.removeChild(path);
	  }
	  t = 0;
	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	}

	runButton.onclick = onAnimate;

	function onAnimate() {
	  if (timer) {
	    // animation in action
	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	    clearInterval(timer);
	    timer = 0;
	    return;
	  }

	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
	  animate(animationDone)
	}

	drawPath();
	drawPoints(points);


//]]></script>

</svg>
\ No newline at end of file
+<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink" width="340" height="360">
<!--+ no-optimize -->
<!--
@see
http://www.learnsvg.com/books/learnsvg/html/bitmap/chapter04/page04-1.php
http://apike.ca/prog_svg_paths.html
http://www.the-art-of-web.com/css/css-animation/
http://srufaculty.sru.edu/david.dailey/svg/curve.svg
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#path_C
-->
<defs>
<pattern id="Pat01" width="10" height="10" patternUnits="userSpaceOnUse">
	<rect width="10" height="10" fill="#FFFFFF" stroke="#000000" stroke-width="0.1"/>
</pattern>
</defs>


<rect x="20" y="50" width="300" height="300" fill="url(#Pat01)"/>


<path d="M20,50 H320 V350 H20 Z" fill="none" stroke="none" stroke-width="0.5" stroke-dasharray="2 2"/>


<path fill="none" id="control-path" stroke="#E8C48E"/>
<path stroke="red" fill="none" id="bezier-path" stroke-width="1.2"/>

<path d="" fill="none" id="t-path-template"/>

<svg x="0" y="0" id="p-template">
<circle r="4" fill="white" stroke="#E8C48E" stroke-width="1" cx="20" cy="20" style="cursor: pointer"/>
<text x="12" y="12" style="font-size:16px;font-weight:bold">1</text>
</svg>

<circle r="4" fill="red" stroke="red" id="marker" stroke-width="1" cx="-10" cy="-10"/>

<svg>
<image xlink:href="play.png" x="5" y="5" style="cursor:pointer" width="30" height="30" id="run-button"/>
<text x="38" y="27" style="font-size:18px;font-family:'DejaVu Sans Mono', 'Lucida Console', 'Menlo', 'Monaco', Lucida Console, sans-serif">t:<tspan id="t-value">1</tspan></text>
</svg>

<script><![CDATA[
	let xmlns = "http://www.w3.org/2000/svg";
	let xlinkns  = "http://www.w3.org/1999/xlink";

	let box = {left:20, top: 50, right: 320, bottom: 350 };

	if (location.search.match('small=1')) {
	  box = {left:20, top: 50, right: 120, bottom: 150 };
	}

	document.documentElement.ondragstart = function() {
	  return false;
	};

	let pointsIn = location.search.match(/p=(.*?)($|&)/)[1];

	// don't show a piece of control path between P2 and P3
	let hideMiddleControlPath = location.search.match('nocpath=1');

	pointsIn = pointsIn.split(',');

	let points = [];

	// read points from ?p=...
	for(let i=0; i<pointsIn.length; i++) {
	  let x = box.left + (box.right - box.left)*pointsIn[i];
	  let y = box.bottom + (box.top - box.bottom)*pointsIn[++i];
	  points.push({x: x, y: y});
	}

	let bezierPath = document.getElementById("bezier-path");
	let controlPath = document.getElementById("control-path");
	//controlPath.style.display = location.search.match('nocpath=1') ? 'none' : 'block';

	let runButton = document.getElementById("run-button");
	runButton.parentNode.style.display = location.search.match('animate=1') ? 'block' : 'none';



	let tPathTemplate = document.getElementById("t-path-template");
	tPathTemplate.parentNode.removeChild(tPathTemplate);

	function drawPath() {
	  let letter;
	  switch (points.length) {
	  case 4:
	    letter = 'C';
	    break;
	  case 3:
	    letter = 'Q';
	    break;
	  default:
	    letter = 'L';
	  }
	  let bezierPathD = "M" + points[0].x + ',' + points[0].y + ' '+letter;
	  let controlPathD = "M" + points[0].x + ',' + points[0].y + ' L';

	  for(let i = 1; i < points.length; i++) {
	    bezierPathD += points[i].x + ',' + points[i].y + ' ';
	    controlPathD += points[i].x + ',' + points[i].y + ' ';
	  }
	  bezierPath.setAttribute('d', bezierPathD);
	  controlPath.setAttribute('d', controlPathD);

	  function dist(a,b) {
	    return Math.round(Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y)));
	  }

	  if (hideMiddleControlPath) {
	    controlPath.setAttribute('stroke-dasharray', dist(points[0],points[1])+' '+dist(points[1],points[2])+' 9999 9999');
	  }

	}

	// draw control points
	function drawPoints(points) {
	  let p = document.getElementById('p-template');
	  p.removeAttribute('id');
	  p.parentNode.removeChild(p);

	  for(let i=0; i<points.length; i++) {
	    let point = p.cloneNode(true);
	    point.getElementsByTagName('text')[0].firstChild.data = i+1;
	    setPointCoords(point, i);
	    setPointHandler(point, i);
	    document.documentElement.appendChild(point);
	  }

	}

	// control points coords are shifted from Left-Upper corner a bit
	// to give them space to render
	function setPointCoords(point, i) {
	  point.setAttribute('x', points[i].x-20);
	  point.setAttribute('y', points[i].y-20);
	}

	function setPointHandler(point, i) {
	  let circle = point.getElementsByTagName('circle')[0];
	  circle.onmousedown = function() {
	    document.onmousemove = function(e) {
	      let x = e.pageX, y = e.pageY;

	      // constrain withing the box
	      if (x < box.left) x = box.left;
	      if (x > box.right) x = box.right;
	      if (y > box.bottom) y = box.bottom;
	      if (y < box.top) y = box.top;

	      points[i].x = x;
	      points[i].y = y;
	      setPointCoords(point, i);
	      drawPath();
	    }
	    document.onmouseup = function() {
	      document.onmousemove = document.onmouseup = null;
	    }
	    return false;
	  }
	}

	// draw point connectors which form the curve
	function drawT(points, t) {
	  let path = document.getElementById('t-'+points.length);

	  if (!path) {
	    path = tPathTemplate.cloneNode(true);
	    path.setAttribute('stroke', ["blue","#0a0","red"][points.length % 3]);
	    path.setAttribute('id', 't-'+points.length);
	    document.documentElement.appendChild(path);
	  }

	  let subPoints = [];
	  let x = points[0].x + (points[1].x - points[0].x)*t;
	  let y = points[0].y + (points[1].y - points[0].y)*t;

	  let tPathD = "M" + x + ',' + y + ' L';
	  subPoints.push({x, y});

	  for(let i=1; i<points.length-1; i++) {
	    let x = points[i].x + (points[i+1].x - points[i].x)*t;
	    let y = points[i].y + (points[i+1].y - points[i].y)*t;
	    subPoints.push({x: x, y: y});

	    tPathD += x + ',' + y + ' ';
	  }

	  if (points.length <= 3) {
	    let m = document.getElementById('marker');
	    let mx, my;
	    if (t == 1) {
	      mx = -10, my = -10;
	    } else {
	      mx = subPoints[0].x + (subPoints[1].x-subPoints[0].x)*t;
	      my = subPoints[0].y + (subPoints[1].y-subPoints[0].y)*t;
	    }
	    m.setAttribute('cx', mx);
	    m.setAttribute('cy', my);
	    path.setAttribute('stroke-width', 2);
	  }
	  if (points.length == 2) {
	    // only 2 points provided, special case
	    tPathD = "M"+points[0].x+","+points[0].y+" L"+x+","+y;
	  }

	  path.setAttribute('d', tPathD);

	  if (subPoints.length > 2){
	    drawT(subPoints, t);
	  }
	}

	let t = 0;
	let timer;


	// animate the curve
	function animate(complete) {

	  timer = setInterval(function() {
	    if (t>1) {
	      t = 1;
	    }
	    //bezierPath.setAttribute('stroke-dasharray', t*bezierPath.getTotalLength()+' '+bezierPath.getTotalLength());
	    drawT(points, t);

	    document.getElementById('t-value').firstChild.nodeValue = t==0 ? 0 : t == 1 ? 1 : t.toFixed(3);
	/*
	    if (t >= 0.5) {
	      clearInterval(timer);
	      runButton.parentNode.style.display = 'none';
	      return;
	    }
	*/
	    if (t == 1) {
	      clearInterval(timer);
	      timer = 0;
	      complete && complete();
	      return;
	    }

	    t += 0.005;
	  }, 30);
	}

	function animationDone() {
	  for(let i=1; i<=points.length; i++) {
	    let path = document.getElementById('t-'+i);
	    path && document.documentElement.removeChild(path);
	  }
	  t = 0;
	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	}

	runButton.onclick = onAnimate;

	function onAnimate() {
	  if (timer) {
	    // animation in action
	    runButton.setAttributeNS(xlinkns, 'xlink:href', 'play.png');
	    clearInterval(timer);
	    timer = 0;
	    return;
	  }

	  runButton.setAttributeNS(xlinkns, 'xlink:href', 'pause.png');
	  animate(animationDone)
	}

	drawPath();
	drawPoints(points);


//]]></script>

</svg>