remove retired locales (#699)

16 files changed, 0 insertions, 5214 deletions

diff --git a/files/nl/web/css/@namespace/index.html b/files/nl/web/css/@namespace/index.html
deleted file mode 100644
index 165221fb75..0000000000
--- a/files/nl/web/css/@namespace/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: '@namespace'
-slug: Web/CSS/@namespace
-tags:
-  - At-rule
-  - CSS
-  - Layout
-  - Reference
-  - Web
-translation_of: Web/CSS/@namespace
----
-<p>{{CSSRef}}</p>
-
-<h2 id="Samenvatting">Samenvatting</h2>
-
-<p><span class="seoSummary"><strong><code>@namespace</code></strong> is een <a href="/en-US/docs/Web/CSS/At-rule" title="CSS at-rules">at-rule</a> welke <a href="/en-US/docs/Namespaces">XML namespaces</a> definieert zodat deze gebruikt kunnen worden in een <a href="/en-US/docs/Glossary/CSS">CSS</a> <a href="/en-US/docs/Web/API/StyleSheet">style sheet</a>. De gedefinieerde namespaces kunnen gebruikt worden om de <a href="/en-US/docs/Web/CSS/Universal_selectors">universal</a>, <a href="/en-US/docs/Web/CSS/Type_selectors">type</a>, en <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute</a> <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">selectors</a> alleen elementen binnen de namespace te laten selecteren. De <code>@namespace</code> regel heeft in het algemeen alleen toegevoegde waarde wanneer deze toegepast wordt in documenten welke meerdere namespaces hebben—zoals HTML5 met inline SVG of MathML, of XML met meerdere gebruikte woordenlijsten.  </span></p>
-
-<p>Elke <code>@namespace</code> regel moet alle <a href="/en-US/docs/Web/CSS/%40charset">@charset</a> en <a href="/en-US/docs/Web/CSS/%40import">@import</a> regels volgen, en moet vóór alle andere at-rules en <a href="/en-US/docs/Web/API/CSSStyleDeclaration">style declarations</a> staan in een style sheet.</p>
-
-<p><code>@namespace</code> kan gebruikt worden om de <strong>standaard namespace</strong> vast te leggen voor een style sheet. Wanneer een standaard namespace is vastgelegd, gelden alle universele en type selectors (maar <strong>geen </strong>attribute selectors, zie de opmerking onderaan) alleen voor de elementen binnen de standaard namespace.</p>
-
-<p>De <code>@namespace</code> regel kan ook gebruikt worden om een <strong>namespace prefix</strong> vast te leggen. Wanneer een universele, type of attribute selector wordt voorafgegaan met een namespace, dan geldt deze selector alleen wanneer de namespace<em>en</em> de naam van het element of attribute matchen.</p>
-
-<p>In <a href="/en-US/docs/Glossary/HTML5">HTML5</a> worden namespaces automatisch toegepast op bekende <a href="https://html.spec.whatwg.org/#foreign-elements">foreign elements</a>. Dit zorgt ervoor dat HTML elementen zich gedragen alsof ze in de XHTML namespace zijn (<code>http://www.w3.org/1999/xhtml</code>), zelfs als er geen <code>xmlns</code> attribuut in het document staat, en de<a href="/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;</a> en <a href="/en-US/docs/Web/MathML/Element/math">&lt;math&gt;</a> elementen worden toegewezen aan hun bijbehorende namespaces (<code>http://www.w3.org/2000/svg</code> en <code>http://www.w3.org/1998/Math/MathML</code>).</p>
-
-<div class="note">
-<p><strong>Note:</strong> In XML heeft een attribuut <strong>geen </strong>namespace, behalve als er een prefix op een attribuut is vastgelegd (<em>bijv.</em>, <code>xlink:href</code>). In andere woorden, attributen nemen de namespace van het element waarop ze staan niet over. Om dit gedrag na te bootsen geldt de standaard namespace in CSS <strong>niet </strong>voor attribuut selectors.</p>
-</div>
-
-<h2 id="Syntaxis">Syntaxis</h2>
-
-<pre class="brush: css">/* Standaard namespace */
-@namespace url(<em>XML-namespace-URL</em>);
-@namespace "<em>XML-namespace-URL</em>";
-
-/* Prefixed namespace */
-@namespace <em>prefix</em> url(<em>XML-namespace-URL</em>);
-@namespace <em>prefix</em> "<em>XML-namespace-URL</em>";</pre>
-
-<h3 id="Formele_syntaxis">Formele syntaxis</h3>
-
-{{csssyntax}}
-
-<h2 id="Voorbeelden">Voorbeelden</h2>
-
-<pre class="brush: css">@namespace url(http://www.w3.org/1999/xhtml);
-@namespace svg url(http://www.w3.org/2000/svg);
-
-/* Dit selecteert alle XHTML &lt;a&gt; elementen, omdat XHTML de standaard non-prefixed namespace is */
-a {}
-
-/* Dit selecteert alle SVG &lt;a&gt; elementen */
-svg|a {}
-
-/* Dit selecteert zowel XHTML als SVG &lt;a&gt; elementen */
-*|a {}
-</pre>
-
-<h2 id="Specificaties">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificatie</th>
-   <th scope="col">Status</th>
-   <th scope="col">Opmerking</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
-   <td>{{Spec2('CSS3 Namespaces')}}</td>
-   <td>Eerste definitie</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{CompatChrome(1.0)}}</td>
-   <td>{{ CompatGeckoDesktop(1.0) }}</td>
-   <td>9.0</td>
-   <td>8.0</td>
-   <td>1.0</td>
-  </tr>
-  <tr>
-   <td>Namespace selector (|)</td>
-   <td>{{CompatChrome(1.0)}}</td>
-   <td>{{ CompatGeckoDesktop(1.0) }}</td>
-   <td>9.0</td>
-   <td>8.0</td>
-   <td>3.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome for Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/nl/web/css/_colon_only-of-type/index.html b/files/nl/web/css/_colon_only-of-type/index.html
deleted file mode 100644
index 3c65dd794f..0000000000
--- a/files/nl/web/css/_colon_only-of-type/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: ':only-of-type'
-slug: 'Web/CSS/:only-of-type'
-tags:
-  - CSS
-  - CSS Pseudo-class
-  - Layout
-  - Reference
-  - Web
-translation_of: 'Web/CSS/:only-of-type'
----
-<div>{{CSSRef}}</div>
-
-<h2 id="Beschrijving">Beschrijving</h2>
-
-<p>De :only-of-type CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> representeerd elk element dat geen elementen heeft van hetzelfde type op hetzelfde niveau.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="eval">element:only-of-type { <em>style properties</em> }
-</pre>
-
-<h2 id="Specificaties">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>Geen verandering.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>Initiële definitie.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
-   <td>9.0</td>
-   <td>9.5</td>
-   <td>3.2</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>2.1</td>
-   <td>{{CompatGeckoMobile("1.9.1")}}</td>
-   <td>9.0</td>
-   <td>10.0</td>
-   <td>3.2</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Bekijk_ook">Bekijk ook</h2>
-
-<ul>
- <li>{{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}</li>
-</ul>
diff --git a/files/nl/web/css/_colon_required/index.html b/files/nl/web/css/_colon_required/index.html
deleted file mode 100644
index 502554a662..0000000000
--- a/files/nl/web/css/_colon_required/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: ':required'
-slug: 'Web/CSS/:required'
-translation_of: 'Web/CSS/:required'
----
-<p>{{ CSSRef() }}</p>
-
-<h2 id="Summary">Summary</h2>
-
-<p>De <code>:required</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> staat voor elk {{ HTMLElement("input") }} element waar de  {{ htmlattrxref("required", "input") }} attribute op staat. Dit stelt formulieren in staat om gemakkelijk aan te tonen welke velden geldige data hebben voordat een formulier verzonden kan worden.</p>
-
-<p>De {{ cssxref(":optional") }} pseudo-class kan gebruikt worden voor uiterlijk van optionele formulier velden.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-{{csssyntax}}
-
-<h2 id="Voorbeeld">Voorbeeld</h2>
-
-<p>Bekijk {{ cssxref(":invalid") }} voor een voorbeeld.</p>
-
-<h2 id="Specificaties">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificatie</th>
-   <th scope="col">Status</th>
-   <th scope="col">commentaat</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td>Geen verandering.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
-   <td>{{ Spec2('HTML5 W3C') }}</td>
-   <td>Staat voor de semantiek van HTML en validatie.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
-   <td>{{ Spec2('CSS4 Selectors') }}</td>
-   <td>Geen verandering.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}</td>
-   <td>{{ Spec2('CSS3 Basic UI') }}</td>
-   <td>Staat voor de pseudo-class, maar niet voor de geassocieerde semantiek.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>10.0</td>
-   <td>{{ CompatGeckoDesktop("2") }}</td>
-   <td>10</td>
-   <td>10.0</td>
-   <td>5.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatGeckoMobile("2") }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>10.0</td>
-   <td>5.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Bekijk_ook">Bekijk ook</h2>
-
-<ul>
- <li>{{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
-</ul>
diff --git a/files/nl/web/css/animation-duration/index.html b/files/nl/web/css/animation-duration/index.html
deleted file mode 100644
index 012ba19b76..0000000000
--- a/files/nl/web/css/animation-duration/index.html
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: animation-duration
-slug: Web/CSS/animation-duration
-tags:
-  - CSS
-  - CSS Animaties
-  - CSS Eigenschap
-  - Experimenteel
-  - Referentie
-translation_of: Web/CSS/animation-duration
----
-<div>{{CSSRef}} {{ SeeCompatTable() }}</div>
-
-<h2 id="Samenvatting">Samenvatting</h2>
-
-<p>De <strong><code>animation-duration</code></strong> CSS-eigenschap specificeert hoelang één cyclus duurt in een animatie.</p>
-
-<p>Een waarde van <code>0s</code>, wat de standaardwaarde is, geeft aan dat er geen animatie moet plaatsvinden.</p>
-
-<p>Het is vaak handig om de eigenschap {{ cssxref("animation") }} te gebruiken om alle animatie-eigenschappen in een keer in te stellen.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntaxis">Syntaxis</h2>
-
-<pre class="brush:css">animation-duration: 6s;
-animation-duration: 120ms;
-animation-duration: 1s, 15s;
-animation-duration: 10s, 30s, 230ms;
-</pre>
-
-<h3 id="Waardes">Waardes</h3>
-
-<dl>
- <dt><code>&lt;time&gt;</code></dt>
- <dd>De tijdsduur om één cyclus te voltooien voor een animatie. Dit mag gespecificeerd worden in seconden (door s als eenheid te geven) of in milliseconden (door <code>ms</code> als eenheid te geven). Als je de eenheid niet specificeert, dan is de definiëring ongeldig.</dd>
-</dl>
-
-<div class="note"><strong>Opmerking:</strong> Negatieve waardes zijn ongeldig en zullen ervoor zorgen dat de definiëring genegeerd wordt. Sommige oude implementaties, met een voorvoegsel, kunnen hetzelfde worden beschouwd als <code>0s</code>.</div>
-
-<h3 id="Formele_syntaxis">Formele syntaxis</h3>
-
-{{csssyntax}}
-
-<h2 id="Voorbeelden">Voorbeelden</h2>
-
-<p>Zie <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> voor voorbeelden.</p>
-
-<h2 id="Specifications" name="Specifications">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificatie</th>
-   <th scope="col">Status</th>
-   <th scope="col">Opmerking</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}</td>
-   <td>{{ Spec2('CSS3 Animations') }}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibiliteit</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Kenmerk</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basisondersteuning</td>
-   <td>3.0{{ property_prefix("-webkit") }}<br>
-    {{CompatChrome(43.0)}}</td>
-   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
-    {{ CompatGeckoDesktop("16.0") }}</td>
-   <td>10</td>
-   <td>12{{ property_prefix("-o") }}<br>
-    12.10</td>
-   <td>4.0{{ property_prefix("-webkit") }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Kenmerk</th>
-   <th>Android</th>
-   <th>Chrome</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basisondersteuning</td>
-   <td>2.0{{ property_prefix("-webkit") }}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
-    {{ CompatGeckoMobile("16.0") }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>{{ CompatNo() }}</td>
-   <td>4.2{{ property_prefix("-webkit") }}</td>
-   <td>{{CompatChrome(43.0)}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Zie_ook">Zie ook:</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
- <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
-</ul>
diff --git a/files/nl/web/css/animation-iteration-count/index.html b/files/nl/web/css/animation-iteration-count/index.html
deleted file mode 100644
index 79554f556a..0000000000
--- a/files/nl/web/css/animation-iteration-count/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: animation-iteration-count
-slug: Web/CSS/animation-iteration-count
-tags:
-  - animatie
-translation_of: Web/CSS/animation-iteration-count
----
-<div>{{CSSRef}} {{ SeeCompatTable() }}</div>
-
-<h2 id="Summary">Summary</h2>
-
-<p>Met de <strong><code>animation-iteration-count</code></strong> <a href="/en/CSS" title="CSS">CSS</a> property beschrijf je het aantal keren dat een animatie speelt totdat de animatie stopt.</p>
-
-<p>Je kunt ook  de shorthand property te gebruiken om alle animatie-eigenschappen meteen in één regel in te stellen.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush:css">animation-iteration-count: infinite;
-animation-iteration-count: 3;
-animation-iteration-count: 2.3;
-
-animation-iteration-count: 2, 0, infinite;
-</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><code>infinite</code></dt>
- <dd>The animatie herhaalt zich non-stop.</dd>
- <dt><code>&lt;number&gt;</code></dt>
- <dd>Hoeveel keer een animatie zich herhaalt; <code>1</code> keer is default. Negatieve waarden zijn ongeldig. Je mag ook non-integer waarden declareren om een deel van de animatie af te spelen (bijvoorbeeld <code>0.5</code> zal de helft van de animatie-cyclus afspelen).</dd>
-</dl>
-
-<h3 id="Formal_syntax">Formal syntax</h3>
-
-{{csssyntax}}
-
-<h2 id="Examples">Examples</h2>
-
-<p>ZIe <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS animations</a> voor voorbeelden.</p>
-
-<h2 id="Specifications" name="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}</td>
-   <td>{{ Spec2('CSS3 Animations') }}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
-
-<p>{{ CompatibilityTable() }}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}<br>
-    {{CompatChrome(43.0)}}</td>
-   <td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
-    {{ CompatGeckoDesktop("16.0") }}</td>
-   <td>10 </td>
-   <td>12 {{ property_prefix("-o") }}<br>
-    12.10</td>
-   <td>4.0{{ property_prefix("-webkit") }}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Chrome</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-   <th>Chrome for Android</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
-   <td>{{CompatUnknown}}</td>
-   <td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
-    {{ CompatGeckoMobile("16.0") }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{ CompatUnknown() }}</td>
-   <td>{{CompatChrome(43.0)}}<br>
-     </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
- <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
-</ul>
diff --git a/files/nl/web/css/box-sizing/index.html b/files/nl/web/css/box-sizing/index.html
deleted file mode 100644
index 0ca846a303..0000000000
--- a/files/nl/web/css/box-sizing/index.html
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: box-sizing
-slug: Web/CSS/box-sizing
-tags:
-  - CSS
-  - CSS Attribuut
-  - Referenctie
-translation_of: Web/CSS/box-sizing
----
-<div> </div>
-
-<h2 id="Overzicht">Overzicht</h2>
-
-<p>Het <strong><code>box-sizing</code></strong> attribuut wordt gebruikt om het standaard <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a> aan te passen. Het is mogelijk om gedrag aan te passen van browsers die de CSS box model specificatie niet correct implementeren.</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush: css">/* Keyword waarden */
-box-sizing: content-box;
-box-sizing: border-box;
-
-/* Globale waarden */
-box-sizing: inherit;
-box-sizing: initial;
-box-sizing: unset;
-</pre>
-
-<h3 id="Waarden">Waarden</h3>
-
-<dl>
- <dt><code>content-box</code></dt>
- <dd>Dit is de initiële en standaard waarde, gespecificeerd door de CSS standaard. <code>De </code>{{Cssxref("width")}} en {{Cssxref("height")}} attributen worden berekend aan de hand van de inhoud, zonder rekening te houden met padding, border of margin. Opmerking: Padding, border en margin worden toegepast aan de buitenkant van het element. Voorbeeld:<code> .box {width: 350px;}</code> Daarna voeg  je <code>{border: 10px solid black;}</code> toe. Resultaat: (in browser) <code>.box {width:370px;}</code><br>
- <br>
- Kort samengevat worden de afmetingen van een element berekent als volgt: <em>width = breedte van de content</em> en <em>height = hoogte van de content</em>, exclusief borders of paddings.</dd>
-</dl>
-
-<dl>
- <dt><code>border-box</code></dt>
- <dd>De<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{Cssxref("width")}} en {{Cssxref("height")}} waarden bevatten ook de waarden van padding en border, maar niet van margin. Dit is het box model dat Internet Explorer implementeert wanneer het document in Quircks mode zit. Opmerking: Padding en border bevinden zich aan de binnenkant van het element. Voorbeeld: <code>.box {width: 350px; border: 10px solid black;}</code> resulteert in een gerenderd element met <code>width: 350px</code>. De inhoud kan nooit negatief zijn, wat het onmogelijk maakt om aan de hand van <code>border-box</code> een element de doen verdwijnen.</dd>
- <dd>De afmetingen worden berekend als volgt: <em>width = border + padding + breedte van de inhoud</em> en <em>height = border + padding + hoogte van de inhoud</em>.</dd>
-</dl>
-
-<h3 id="Formele_syntax">Formele syntax</h3>
-
-{{csssyntax}}
-
-<h2 id="Examples">Examples</h2>
-
-<pre class="brush:css">.example {
-  box-sizing: border-box;
-}</pre>
-
-<h2 id="Specificaties">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificatie</th>
-   <th scope="col">Status</th>
-   <th scope="col">Opmerking</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Initiele definitie</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Edge</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Standaard ondersteuning</td>
-   <td>1.0 {{property_prefix("-webkit")}}<sup>[1]</sup><br>
-    10.0</td>
-   <td>12.0</td>
-   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
-    {{CompatGeckoDesktop("29.0")}}</td>
-   <td>
-    <p>8.0<sup>[1]</sup></p>
-   </td>
-   <td>7.0</td>
-   <td>3.0 (522){{property_prefix("-webkit")}}<br>
-    5.1<sup>[2]</sup></td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Standaard ondersteuning</td>
-   <td>2.1{{property_prefix("-webkit")}}<sup>[1]</sup><br>
-    4.0</td>
-   <td>{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}} [1]<br>
-    {{CompatGeckoMobile("29.0")}}</td>
-   <td>9.0</td>
-   <td>
-    <p>7.0 {{property_prefix("-webkit")}}<br>
-     10.0</p>
-   </td>
-   <td>3.2 {{property_prefix("-webkit")}}<br>
-    4.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] <code>box-sizing </code>wordt niet gerespecteerd als de hoogte wordt berekend door {{domxref("window.getComputedStyle()")}}, in Internet Explorer (alle versies), Firefox versie 22 en lager en in Chrome. Edge heeft dit probleem niet. Opmerking: IE9 zijn eigen <code>currentStyle</code> attribuut geeft niet de juiste waarde voor <code>height</code> terug.</p>
-
-<p>[2] De vendor prefix <code>-webkit</code> is verwijderd sinds <a href="http://trac.webkit.org/changeset/71348">534.12</a>.</p>
-
-<h2 id="Zie_ook">Zie ook</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a></li>
-</ul>
diff --git a/files/nl/web/css/css_color/index.html b/files/nl/web/css/css_color/index.html
deleted file mode 100644
index 174edbd41e..0000000000
--- a/files/nl/web/css/css_color/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: CSS Colors
-slug: Web/CSS/CSS_Color
-tags:
-  - CSS
-  - CSS Colors
-  - NeedsTranslation
-  - Overview
-  - Reference
-  - TopicStub
-translation_of: Web/CSS/CSS_Color
-translation_of_original: Web/CSS/CSS_Colors
-original_slug: Web/CSS/CSS_Colors
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.</p>
-
-<h2 id="Reference">Reference</h2>
-
-<h3 id="Properties">Properties</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("opacity")}}</li>
-</ul>
-</div>
-
-<h3 id="CSS_Data_Types">CSS Data Types</h3>
-
-<p>{{cssxref("&lt;color&gt;")}}</p>
-
-<h2 id="Guides">Guides</h2>
-
-<p><em>None.</em></p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Colors')}}</td>
-   <td>{{Spec2('CSS3 Colors')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>{{CompatibilityTable}}</div>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoDesktop("1")}}</td>
-   <td>3.0</td>
-   <td>3.5</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Phone</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoMobile("1")}}</td>
-   <td>6.0</td>
-   <td>6.0</td>
-   <td>1.0</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>In CSS, gradients aren't colors but <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li>
-</ul>
diff --git a/files/nl/web/css/css_colors/color_picker_tool/index.html b/files/nl/web/css/css_colors/color_picker_tool/index.html
deleted file mode 100644
index 5c9074eeec..0000000000
--- a/files/nl/web/css/css_colors/color_picker_tool/index.html
+++ /dev/null
@@ -1,3221 +0,0 @@
----
-title: Kleurenkiezer-hulpprogramma
-slug: Web/CSS/CSS_Colors/Color_picker_tool
-tags:
-  - CSS
-  - Hulpmiddelen
-  - Tools
-translation_of: Web/CSS/CSS_Colors/Color_picker_tool
----
-<div class="hidden">
-<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">    &lt;div id="container"&gt;
-        &lt;div id="palette" class="block"&gt;
-            &lt;div id="color-palette"&gt;&lt;/div&gt;
-            &lt;div id="color-info"&gt;
-                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="picker" class="block"&gt;
-            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
-            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
-            &lt;div id="controls"&gt;
-                &lt;div id="delete"&gt;
-                    &lt;div id="trash-can"&gt;&lt;/div&gt;
-                &lt;/div&gt;
-                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-
-        &lt;div id="canvas" data-tutorial="drop"&gt;
-            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-
-</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] &gt; .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] &gt; input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] &gt; .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] &gt; input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider &gt; input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch &gt; * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 30%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property &gt; * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container &gt; * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls &gt; * {
-	float: left;
-}
-
-#color-palette .controls &gt; *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Drop colors here to compare";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: right;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "adjust, change or modify";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click to activate";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover &gt; * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-</pre>
-
-<h3 id="JavaScript_Content">JavaScript Content</h3>
-
-<pre class="brush: js">'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-			value &gt;= 0 &amp;&amp; value &lt;= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value &lt; 0 || value &gt; 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
-		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
-		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
-		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
-		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
-		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue &lt; 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r &lt; 16) r = '0' + r;
-		if (this.g &lt; 16) g = '0' + g;
-		if (this.b &lt; 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x &gt; size) x = size;
-		if (y &gt; size) y = size;
-		if (x &lt; 0) x = 0;
-		if (y &lt; 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x &lt; 0) x = 0;
-		if (x &gt; width) x = width;
-
-		// TODO 360 =&gt; 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x &lt; 0) x = 0;
-		if (x &gt; width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
-			value &gt;= 0 &amp;&amp; value &lt;= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision &gt;= 0 ? precision : 0;
-		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value &gt; slider.max) value = slider.max;
-		if (value &lt; slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value &gt; 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i &lt; size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action &gt;= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action &lt;= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue &lt; 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation &lt;= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness &lt;= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness &lt;= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha &lt;= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i &lt; size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Hue', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i &lt; 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i &lt; 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Lightness';
-					for(var i = 0; i &lt; 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Value';
-					for(var i = 0; i &lt; 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i &lt; 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i &lt; nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i&lt;16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-</pre>
-</div>
-
-<p>{{CSSRef}}</p>
-
-<p><span class="seoSummary">Dit hulpmiddel maakt het makkelijk om zelfgekozen kleuren voor het web te maken, aan te passen en hiermee te experimenteren.</span> Ook kunt u hiermee makkelijk naar verschillende soorten kleurindelingen converteren die door CSS worden ondersteund, waaronder HEXA-kleuren, RGB (Rood/Groen/Blauw) en HSL (Hue/Saturation/Lightness - Tint/Verzadiging/Helderheid). Beheer over het alpha-kanaal wordt ook ondersteund op de indelingen RGB (rgba) en HSL (hsla).</p>
-
-<p>Elke kleur wordt tijdens het aanpassen in alle drie de standaard CSS-indelingen voor het web aangeboden. Daarnaast wordt, gebaseerd op de huidige geselecteerde kleur, zowel een palet voor HSL en HSV als voor alpha gegenereerd. Het kleurenkiezerveld in ‘eyedropper’-stijl kan tussen HSL- en HSV-indeling worden omgeschakeld.</p>
-
-<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p>
-
-<p> </p>
diff --git a/files/nl/web/css/css_flexible_box_layout/index.html b/files/nl/web/css/css_flexible_box_layout/index.html
deleted file mode 100644
index 879bb404f6..0000000000
--- a/files/nl/web/css/css_flexible_box_layout/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: CSS Flexible Box Layout
-slug: Web/CSS/CSS_Flexible_Box_Layout
-tags:
-  - CSS
-  - CSS Flexible Box Layout
-  - Overzicht
-  - Referentie
-translation_of: Web/CSS/CSS_Flexible_Box_Layout
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS Flexible Box Layout</strong> is een <a href="/en-US/docs/Web/CSS">CSS</a> module die het box model van CSS verder optimaliseert. Flexbox is geoptimaliseerd voor user interface design en de lay-out van items. Onderliggende items van een flex container kunnen in elke richting worden geplaatst op een as. Afmetingen van items in een flex container zijn flexibel. Zo kunnen afmetingen groeien om de ongebruikte ruimte te vullen, of kunnen ze krimpen om binnen de grenzen van het ouder element te passen.</p>
-
-<p>
- </p><h2 id="Basis_voorbeeld">Basis voorbeeld</h2>
-
-
-<p>In het voorbeeld hieronder is een container ingesteld als <code>display: flex</code> waardoor de drie onderliggende elementen "flex elementen" worden. De waarde van <code>justify-content</code> is ingesteld op <code>space-between</code> om de items gelijkmatig op de hoofdas te plaatsen. Tussen elk item wordt een gelijke hoeveelheid ruimte geplaatst, waarbij de linker- en rechterartikelen gelijk liggen met de randen van de flex container. Op de dwarsas zijn de items uitgetrokken (stretched) tot gelijke hoogte. Dit komt omdat de default waarde voor <code>align-items</code> <code>stretch</code> is. De items strekken zich uit tot de hoogte van de flex container, waardoor ze elk even lang lijken als het langste item.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
-
-<h2 id="Referentie">Referentie</h2>
-
-<h3 id="CSS_Eigenschappen">CSS Eigenschappen</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("flex")}}</li>
- <li>{{cssxref("flex-basis")}}</li>
- <li>{{cssxref("flex-direction")}}</li>
- <li>{{cssxref("flex-flow")}}</li>
- <li>{{cssxref("flex-grow")}}</li>
- <li>{{cssxref("flex-shrink")}}</li>
- <li>{{cssxref("flex-wrap")}}</li>
- <li>{{cssxref("order")}}</li>
-</ul>
-</div>
-
-<h3 id="Alignment_Eigenschappen">Alignment Eigenschappen</h3>
-
-<p>De eigenschappen <code>align-content</code>, <code>align-self</code>, <code>align-items</code> en <code>justify-content</code> waren aanvankelijk onderdeel van de Flexbox-specificatie, maar worden nu gedefinieerd in Box Alignment-specificatie. De Flexbox-specificatie verwijst nu naar de Box Alignment-specificatie voor up-to-date definities. Alsook extra Alignment eigenschappen worden nu gedefinieerd in de Box Alignment-specificatie.</p>
-
-<div class="index">
-<ul>
- <li>{{cssxref("justify-content")}}</li>
- <li>{{cssxref("align-content")}}</li>
- <li>{{cssxref("align-items")}}</li>
- <li>{{cssxref("align-self")}}</li>
- <li>{{cssxref("place-content")}}</li>
- <li>{{cssxref("place-items")}}</li>
- <li>{{cssxref("row-gap")}}</li>
- <li>{{cssxref("column-gap")}}</li>
- <li>{{cssxref("gap")}}</li>
-</ul>
-</div>
-
-<h3 id="Woordenlijst_resultaten">Woordenlijst resultaten</h3>
-
-<div class="index">
-<ul>
- <li>{{Glossary("Flexbox", "", 1)}}</li>
- <li>{{Glossary("Flex Container", "", 1)}}</li>
- <li>{{Glossary("Flex Item", "", 1)}}</li>
- <li>{{Glossary("Main Axis", "", 1)}}</li>
- <li>{{Glossary("Cross Axis", "", 1)}}</li>
- <li>{{Glossary("Flex", "", 1)}}</li>
-</ul>
-</div>
-
-<h2 id="Gidsen">Gidsen</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basisconcepten van Flexbox</a></dt>
- <dd>Een overzicht van de eigenschappen van flexbox</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Verhouding Flexbox tot andere layout methodes</a></dt>
- <dd>Hoe flexbox zich verhoudt tot andere layout methodes, en tot andere CSS-specificaties</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Items uitlijnen in een flex container</a></dt>
- <dd>Hoe de Box Alignment-eigenschappen werken met flexbox.</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Flex items ordenen</a></dt>
- <dd>Hoe de volgorde en de richting van items te wijzigen, inclusief geldende aandachtspunten hierbij</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Ratios van flex items langs de hoofdas beheren </a></dt>
- <dd>Beschrijving van de eigenschappen <code>flex-grow</code>, <code>flex-shrink</code> en <code>flex-basis</code>.</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Wrapping van flex items</a></dt>
- <dd>Hoe flex containers creëren met meerdere lijnen, en de de weergave van de items in die lijnen instellen.</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typische Flexbox use cases</a></dt>
- <dd>Design pattersn voor typische use cases</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Achterwaartse compatibilteit van Flexbox </a></dt>
- <dd>Browser status van flexbox, interoperabiliteit en ondersteuning van oudere browsers, en een overzicht van de versies van de specificatie</dd>
-</dl>
-
-<h2 id="Specificaties">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificatie</th>
-   <th scope="col">Status</th>
-   <th scope="col">Opmerking</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Flexbox') }}</td>
-   <td>{{ Spec2('CSS3 Flexbox') }}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Zie_ook">Zie ook</h2>
-
-<dl>
- <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
- <dd>een door de community samengestelde lijst met Flexbox gerelateerde browser bugs en workarounds</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt>
- <dd>Een verzameling mixins om crossbrowser Flexbox functionaliteiten te voorzien in oudere browsers die de moderne Flexbox syntax niet ondersteunen</dd>
-</dl>
diff --git a/files/nl/web/css/css_images/index.html b/files/nl/web/css/css_images/index.html
deleted file mode 100644
index f6fb2c9289..0000000000
--- a/files/nl/web/css/css_images/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: CSS Images
-slug: Web/CSS/CSS_Images
-tags:
-  - CSS
-  - CSS Images
-  - CSS Reference
-  - NeedsTranslation
-  - Overview
-  - TopicStub
-translation_of: Web/CSS/CSS_Images
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS Images</strong> is a module of CSS that defines what types of images can be used (the {{cssxref("&lt;image&gt;")}} type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.</p>
-
-<h2 id="Reference">Reference</h2>
-
-<h3 id="Properties">Properties</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("image-orientation")}}</li>
- <li>{{cssxref("image-rendering")}}</li>
- <li>{{cssxref("object-fit")}}</li>
- <li>{{cssxref("object-position")}}</li>
-</ul>
-</div>
-
-<h3 id="Functions">Functions</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
- <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
- <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
- <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
- <li>{{cssxref("element", "element()")}}</li>
-</ul>
-</div>
-
-<h3 id="Data_types">Data types</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("&lt;image&gt;")}}</li>
- <li>{{cssxref("&lt;uri&gt;")}}</li>
-</ul>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></dt>
- <dd>Presents a specific type of CSS images, <em>gradients</em>, and how to create and use these.</dd>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">Implementing image sprites in CSS</a></dt>
- <dd>Describes the common technique grouping several images in one single document to save download requests and speed up the availability of a page.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Images')}}</td>
-   <td>{{Spec2('CSS4 Images')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Images')}}</td>
-   <td>{{Spec2('CSS3 Images')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>Standardizes the <code>-webkit</code> prefixed gradient value functions</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
-   <td>{{Spec2('CSS3 Values')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Chrome</th>
-   <th>Firefox (Gecko)</th>
-   <th>Internet Explorer</th>
-   <th>Opera</th>
-   <th>Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoDesktop("1")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Basic support</td>
-   <td>1.0</td>
-   <td>{{CompatGeckoMobile("1")}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
diff --git a/files/nl/web/css/css_positioning/index.html b/files/nl/web/css/css_positioning/index.html
deleted file mode 100644
index 61afa2e242..0000000000
--- a/files/nl/web/css/css_positioning/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: CSS Positioned Layout
-slug: Web/CSS/CSS_Positioning
-tags:
-  - CSS
-  - CSS Positioning
-  - NeedsTranslation
-  - Overview
-  - Reference
-  - TopicStub
-translation_of: Web/CSS/CSS_Positioning
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS Positioned Layout</strong> is a module of CSS that defines how to position elements on the page.</p>
-
-<h2 id="Reference">Reference</h2>
-
-<h3 id="CSS_properties">CSS properties</h3>
-
-<div class="index">
-<ul>
- <li>{{cssxref("bottom")}}</li>
- <li>{{cssxref("clear")}}</li>
- <li>{{cssxref("float")}}</li>
- <li>{{cssxref("left")}}</li>
- <li>{{cssxref("position")}}</li>
- <li>{{cssxref("right")}}</li>
- <li>{{cssxref("top")}}</li>
- <li>{{cssxref("z-index")}}</li>
-</ul>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
- <dd>Presents the notion of stacking context and explains how z-ordering works, with several examples.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Positioning') }}</td>
-   <td>{{ Spec2('CSS3 Positioning') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/index.html b/files/nl/web/css/css_positioning/understanding_z_index/index.html
deleted file mode 100644
index 554652f1b8..0000000000
--- a/files/nl/web/css/css_positioning/understanding_z_index/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Understanding CSS z-index
-slug: Web/CSS/CSS_Positioning/Understanding_z_index
-tags:
-  - Advanced
-  - CSS
-  - Guide
-  - NeedsTranslation
-  - Reference
-  - TopicStub
-  - Understanding_CSS_z-index
-  - z-index
-translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
----
-<div>{{cssref}}</div>
-
-<p>In the most basic cases, <a href="/en-US/docs/Web/HTML">HTML</a> pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p>
-
-<blockquote>
-<p><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p>
-</blockquote>
-
-<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
-
-<p>This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS <code>z-index</code> property.</p>
-
-<p>Using <code>z-index</code> appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when <code>z-index</code> is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p>
-
-<p>This article will try to explain those rules, with some simplification and several examples.</p>
-
-<ol>
- <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
- <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
- <li><a href="/en/CSS/Understanding_z-index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li>
- <li><a href="/en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
- <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li>
- <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li>
- <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li>
-</ol>
-
-<div class="originaldocinfo">
-<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
-
-<ul>
- <li>Author(s): Paolo Lombardi</li>
- <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
- <li>Last Updated Date: July 9, 2005</li>
-</ul>
-
-<p><small><em>Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.</em></small></p>
-</div>
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
deleted file mode 100644
index 923f5121b4..0000000000
--- a/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
+++ /dev/null
@@ -1,240 +0,0 @@
----
-title: Het stapelverband
-slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-tags:
-  - CSS
-  - Geavanceerd
-  - Gids
-  - Referentie
-  - Stapelverband
-  - z-index
-translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-original_slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext
----
-<div>{{cssref}}</div>
-
-<p>Het stapelverband <em>(stacking context) </em>is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.</p>
-
-<h2 id="Het_stapelverband">Het stapelverband</h2>
-
-<p>In het vorige deel van dit artikel, <a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index gebruiken</a>, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een <em>stapelverband</em> vormen.</p>
-
-<p>Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:</p>
-
-<ul>
- <li>Het root element van het document (<code>&lt;html&gt;</code>).</li>
- <li>Een element met een {{cssxref("position")}} waarde van <code>absolute</code> of <code>relative</code> en een {{cssxref("z-index")}} waarde anders dan <code>auto</code>.</li>
- <li>Een element met een {{cssxref("position")}} waarde van <code>fixed</code> of <code>sticky</code> (sticky voor alle mobiele browsers, maar niet voor die van een verouderde desktop).</li>
- <li>Een element dat een kind is van een flex ({{cssxref("flexbox")}}) container, met een {{cssxref("z-index")}} waarde anders dan <code>auto</code>.</li>
- <li>Een element dat een kind is van een grid ({{cssxref("grid")}}) container, met een {{cssxref("z-index")}} waarde anders dan <code>auto</code>.</li>
- <li>Een element met een {{cssxref("opacity")}} waarde anders dan <code>1</code> (Zie ook <a href="http://www.w3.org/TR/css3-color/#transparency">de specificatie voor opacity</a>).</li>
- <li>Een element met een {{cssxref("mix-blend-mode")}} waarde anders dan <code>normal</code>.</li>
- <li>Een element met een van de volgende eigenschappen anders dan <code>none</code>:
-  <ul>
-   <li>{{cssxref("transform")}}</li>
-   <li>{{cssxref("filter")}}</li>
-   <li>{{cssxref("perspective")}}</li>
-   <li>{{cssxref("clip-path")}}</li>
-   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
-  </ul>
- </li>
- <li>Een element met een {{cssxref("isolation")}} waarde van <code>isolate</code>.</li>
- <li>Een element met een {{cssxref("-webkit-overflow-scrolling")}} waarde van <code>touch</code>.</li>
- <li>Een element met een {{cssxref("will-change")}} waarde die een eigenschap specificeert die een stapelverband op een niet-initiële waarde creeërt (zie <a href="http://dev.opera.com/articles/css-will-change-property/">dit bericht</a>).</li>
- <li>Een element met een {{cssxref("contain")}} waarde van <code>layout</code>, of <code>paint</code>, of een samengestelde waarde die een van beide bevat (bijv. <code>contain: strict</code>, <code>contain: content</code>).</li>
-</ul>
-
-<p>Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.</p>
-
-<p>Samengevat:</p>
-
-<ul>
- <li>Stapelverbanden kunnen zich in andere stapelverbanden bevinden en samen een hiërarchie van stapelverbanden vormen.</li>
- <li>Elke stapelverband is volledig onafhankelijk van zijn broers en zussen: alleen kindelementen komen in aanmerking wanneer het stapelen wordt verwerkt.</li>
- <li>Elke stapelverband is op zichzelf staand: nadat de inhoud van het element is gestapeld, wordt het hele element bekeken in de stapelvolgorde van de bovenliggende stapelverband.</li>
-</ul>
-
-<div class="note"><strong>Opmerking:</strong> de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden <em>geassimileerd</em> door de ouders' stapelverband.</div>
-
-<h2 id="Het_voorbeeld"><strong>Het voorbeeld</strong></h2>
-
-<p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p>
-
-<p>In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun <code>position</code> en <code>z-index</code> waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:</p>
-
-<ul>
- <li>Root
-  <ul>
-   <li>DIV #1</li>
-   <li>DIV #2</li>
-   <li>DIV #3
-    <ul>
-     <li>DIV #4</li>
-     <li>DIV #5</li>
-     <li>DIV #6</li>
-    </ul>
-   </li>
-  </ul>
- </li>
-</ul>
-
-<p>Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <code>&lt;html&gt;</code>.</p>
-
-<div class="note">
-<p><strong>Notes:</strong></p>
-
-<ul>
- <li>DIV #4 wordt gerenderd onder DIV #1 omdat de z-index (5) van DIV #1 geldig is binnen de stapelverband van het rootelement, terwijl de z-index van DIV #4 (6) geldig is binnen de stapelverband van DIV #3 . DIV #4 staat dus onder DIV #1, omdat DIV #4 tot DIV #3 behoort, die een lagere Z-indexwaarde heeft.</li>
- <li>Om dezelfde reden wordt DIV #2 (z-index 2) gerenderd onder DIV #5 (z-index 1) omdat DIV #5 tot DIV #3 behoort, die een hogere Z-indexwaarde heeft.</li>
- <li>DIV #3's z-index is 4, maar deze waarde is onafhankelijk van de z-index van DIV #4, DIV #5 en DIV #6, omdat deze behoort tot een andere stapelverband.</li>
- <li>Een eenvoudige manier om de weergavevolgorde van gestapelde elementen langs de Z-as te achterhalen, is door het te beschouwen als een "versienummer" van soorten, waarbij onderliggende elementen onder de belangrijkste versienummers van hun bovenliggende niveau kleine versienummers zijn. Op deze manier kunnen we gemakkelijk zien hoe een element met een z-index van 1 (DIV #5) boven een element met een z-index van 2 (DIV #2) wordt gestapeld, en hoe een element met een z-index van 6 (DIV #4) is gestapeld onder een element met een z-index van 5 (DIV #1). In ons voorbeeld (gesorteerd op de uiteindelijke weergave volgorde):
-  <ul>
-   <li>Root</li>
-   <li>DIV #2 - z-index is 2</li>
-   <li>DIV #3 - z-index is 4
-    <ul>
-     <li>DIV #5 - z-index is 1, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4.1</li>
-     <li>DIV #6 - z-index is 3, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4,3</li>
-     <li>DIV #4 - z-index is 6, gestapeld onder een element met een z-index van 4, wat resulteert in een weergavevolgorde van 4,6</li>
-    </ul>
-   </li>
-   <li>DIV #1 - z-index is 5</li>
-  </ul>
- </li>
-</ul>
-</div>
-
-<h2 id="Voorbeeld"><strong>Voorbeeld</strong></h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="div1"&gt;
-  &lt;h1&gt;Division Element #1&lt;/h1&gt;
-  &lt;code&gt;position: relative;&lt;br/&gt;
-  z-index: 5;&lt;/code&gt;
-&lt;/div&gt;
-
-&lt;div id="div2"&gt;
-  &lt;h1&gt;Division Element #2&lt;/h1&gt;
-  &lt;code&gt;position: relative;&lt;br/&gt;
-  z-index: 2;&lt;/code&gt;
-&lt;/div&gt;
-
-&lt;div id="div3"&gt;
-  &lt;div id="div4"&gt;
-    &lt;h1&gt;Division Element #4&lt;/h1&gt;
-    &lt;code&gt;position: relative;&lt;br/&gt;
-    z-index: 6;&lt;/code&gt;
-  &lt;/div&gt;
-
-  &lt;h1&gt;Division Element #3&lt;/h1&gt;
-  &lt;code&gt;position: absolute;&lt;br/&gt;
-  z-index: 4;&lt;/code&gt;
-
-  &lt;div id="div5"&gt;
-    &lt;h1&gt;Division Element #5&lt;/h1&gt;
-    &lt;code&gt;position: relative;&lt;br/&gt;
-    z-index: 1;&lt;/code&gt;
-  &lt;/div&gt;
-
-  &lt;div id="div6"&gt;
-    &lt;h1&gt;Division Element #6&lt;/h1&gt;
-    &lt;code&gt;position: absolute;&lt;br/&gt;
-    z-index: 3;&lt;/code&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Division_Element_.231" name="Division_Element_.231">CSS</h3>
-
-<pre class="brush: css">* {
-  margin: 0;
-}
-html {
-  padding: 20px;
-  font: 12px/20px Arial, sans-serif;
-}
-div {
-  opacity: 0.7;
-  position: relative;
-}
-h1 {
-  font: inherit;
-  font-weight: bold;
-}
-#div1,
-#div2 {
-  border: 1px dashed #696;
-  padding: 10px;
-  background-color: #cfc;
-}
-#div1 {
-  z-index: 5;
-  margin-bottom: 190px;
-}
-#div2 {
-  z-index: 2;
-}
-#div3 {
-  z-index: 4;
-  opacity: 1;
-  position: absolute;
-  top: 40px;
-  left: 180px;
-  width: 330px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-  padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-  border: 1px dashed #996;
-  background-color: #ffc;
-}
-#div4 {
-  z-index: 6;
-  margin-bottom: 15px;
-  padding: 25px 10px 5px;
-}
-#div5 {
-  z-index: 1;
-  margin-top: 15px;
-  padding: 5px 10px;
-}
-#div6 {
-  z-index: 3;
-  position: absolute;
-  top: 20px;
-  left: 180px;
-  width: 150px;
-  height: 125px;
-  border: 1px dashed #009;
-  padding-top: 125px;
-  background-color: #ddf;
-  text-align: center;
-}</pre>
-
-<h3 id="Resultaat">Resultaat</h3>
-
-<p>{{ EmbedLiveSample('Example', '100%', '396') }}</p>
-
-<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>Zie ook</strong></span></font></p>
-
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index">Stapelen zonder de z-index eigenschap</a>: De stapelregels die gelden wanneer de z-index eigenschap niet is gedefinieerd.</li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float">Stapelen met floated blokken</a>: Hoe elementen met een <em>float </em>worden gestapeld.</li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index">z-index gebruiken</a>: How to use <code>z-index</code> to change default stacking.</li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1">Stapelverband voorbeeld 1</a>: 2-level HTML hiërarchie, <code>z-index</code> op het laatste level</li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2">Stapelverband voorbeeld 2</a>: 2-level HTML hiërarchie, <code>z-index</code> op alle levels</li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3">Stapelverband voorbeeld 3</a>: 3-level HTML hiërarchie, <code>z-index</code> op de tweede level </li>
-</ul>
-
-<div class="originaldocinfo">
-<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
-
-<ul>
- <li>Author(s): Paolo Lombardi</li>
- <li>This article is the English translation of an article I wrote in Italian for <a href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
- <li>Last Updated Date: July 9, 2005</li>
-</ul>
-</div>
diff --git a/files/nl/web/css/cursor/index.html b/files/nl/web/css/cursor/index.html
deleted file mode 100644
index da2aa4c9d4..0000000000
--- a/files/nl/web/css/cursor/index.html
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: cursor
-slug: Web/CSS/cursor
-tags:
-  - CSS
-  - CSS eigenschappen
-  - Cursor
-  - Custom Cursor
-  - Reference
-  - UI
-  - mouse
-  - pijl
-  - pointer
-translation_of: Web/CSS/cursor
----
-<div>{{CSSRef}}</div>
-
-<p>het <a href="/en-US/docs/Web/CSS">CSS</a>-eigenschap <strong><code>cursor</code></strong> geeft aan welke muiscursor moet worden weergegeven wanneer de muisaanwijzer zich boven een element bevindt.</p>
-
-<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
-
-<p class="hidden">De bron voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldenproject, kunt u het klonen van <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> en stuur ons een pull-aanvraag.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="brush: css no-line-numbers">/* Keyword value */
-cursor: pointer;
-cursor: auto;
-
-/* URL, with a keyword fallback */
-cursor: url(hand.cur), pointer;
-
-/* URL and coordinates, with a keyword fallback */
-cursor: url(cursor1.png) 4 12, auto;
-cursor: url(cursor2.png) 2 2, pointer;
-
-/* Global values */
-cursor: inherit;
-cursor: initial;
-cursor: unset;
-</pre>
-
-<p>De eigenschap <code>cursor</code> wordt opgegeven als geen of meer <code><a href="#&lt;url>">&lt;url&gt;</a></code> waarden, gescheiden door komma's, gevolgd door één verplichte <a href="#Keyword values">zoekwoordwaarde</a>. Elke <code>&lt;url&gt;</code> zou naar een afbeeldingsbestand moeten wijzen. De browser probeert de eerste opgegeven afbeelding te laden, terug te vallen naar de volgende als dit niet kan, en terug te vallen naar de sleutelwoordwaarde als er geen afbeeldingen kunnen worden geladen (of als geen enkele waarde is opgegeven).</p>
-
-<p>Elke <code>&lt;url&gt;</code> kan optioneel worden gevolgd door een paar spaties gescheiden nummers die de coördinaten  <code><a href="#&lt;x> &lt;y>">&lt;x&gt;&lt;y&gt;</a></code> representeren. Hiermee wordt de hotspot van de cursor ingesteld ten opzichte van de linkerbovenhoek van de afbeelding.</p>
-
-<p>Bijvoorbeeld , dit specifeerd twee afbeeldingen die gebruikmaken van <code>&lt;url&gt;</code> waarden, voorzien van <code>&lt;x&gt;&lt;y&gt;</code> coördinaten voor de tweede en terugvallen op de <code>progress</code> sleutelwoordwaarde als geen van beide afbeeldingen kunnen worden geladen:</p>
-
-<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
-
-<h3 id="Values">Values</h3>
-
-<dl>
- <dt><a id="&lt;url>" name="&lt;url>"><code>&lt;url&gt;</code></a></dt>
- <dd>Een <code>url(…)</code> of een door komma's gescheiden lijst <code>url(…), url(…), …</code>, wijzend naar een afbeeldingsbestand. Meer dan één {{cssxref ("&lt;url&gt;")}} kan als fallbacks worden aangeboden, voor het geval sommige cursorbeeldtypen niet worden ondersteund. Een niet-URL-fallback (een of meer sleutelwoorden) <em>moet </em>aan het einde van de fallback-lijst staan. Zie <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">URL-waarden gebruiken voor de cursoreigenschapsing </a>voor meer informatie.</dd>
- <dt><a name="&lt;x> &lt;y>"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> </a>{{experimental_inline}}</dt>
- <dd>Optionele x- en y-coördinaten. Twee niet-unitaire niet-negatieve getallen van minder dan 32.</dd>
- <dt><a id="Keyword values" name="Keyword values">Keyword values</a></dt>
- <dd>
- <p><em>Beweeg uw muis over waarden om hun live uiterlijk in uw browser te zien:</em></p>
-
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <th>Categorie</th>
-    <th style="width: 7.5em;">CSS value</th>
-    <th>Actual</th>
-    <th>Description</th>
-   </tr>
-   <tr style="cursor: auto;">
-    <td rowspan="3">Algemeen</td>
-    <td><code>auto</code></td>
-    <td></td>
-    <td>De browser bepaalt de cursor die moet worden weergegeven op basis van de context. bv, <code>text</code> bij zwevende tekst.</td>
-   </tr>
-   <tr style="cursor: default;">
-    <td><code>default</code></td>
-    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
-    <td>De platform afhankelijke basis cursor. Het is meestal een pijl.</td>
-   </tr>
-   <tr style="cursor: none;">
-    <td><code>none</code></td>
-    <td></td>
-    <td>Er wordt geen cursor weergegeven.</td>
-   </tr>
-   <tr style="cursor: context-menu;">
-    <td rowspan="5" style="cursor: auto;">Links &amp; status</td>
-    <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
-    <td>Een contextmenu is beschikbaar.</td>
-   </tr>
-   <tr style="cursor: help;">
-    <td><code>help</code></td>
-    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
-    <td>Help-informatie is beschikbaar.</td>
-   </tr>
-   <tr style="cursor: pointer;">
-    <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
-    <td>Het element kan worden geactiveerd door erop te klikken. Dit wordt bijvoorbeeld gebruikt, bij het zweven boven links. Typisch een afbeelding van een hand.</td>
-   </tr>
-   <tr style="cursor: progress;">
-    <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
-    <td>Het programma is bezig in de achtergrond, de gebruiker kan nog steeds een interactie aangaan met het interface (dit integenstelling met <code>wait</code>).</td>
-   </tr>
-   <tr style="cursor: wait;">
-    <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
-    <td>Het programma is bezig en de gebruiker kan geen interactie ondergaan met het interface (dit in tegenstelling met <code>progress</code>). Is soms een afbeelding van een zandloper of van een horloge.</td>
-   </tr>
-   <tr style="cursor: cell;">
-    <td rowspan="4" style="cursor: auto;">Selection</td>
-    <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
-    <td>
-     <p>De tabel cel kan geslecteerd worden.</p>
-    </td>
-   </tr>
-   <tr style="cursor: crosshair;">
-    <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
-    <td>
-     <p>Kruis cursor, vaak gebruikt om een selectie in een bitmap aan te duiden.</p>
-    </td>
-   </tr>
-   <tr style="cursor: text;">
-    <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
-    <td>De tekst kan worden geselecteerd. Meestal in de vorm van een I-balk.</td>
-   </tr>
-   <tr style="cursor: vertical-text;">
-    <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
-    <td>De verticale tekst kan worden geslecteerd. Meestal in de vorm van een zijdelingse I-beam.</td>
-   </tr>
-   <tr style="cursor: alias;">
-    <td rowspan="5" style="cursor: auto;">Drag &amp; drop</td>
-    <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
-    <td>Een alias of shortcut wordt gecreëerd.</td>
-   </tr>
-   <tr style="cursor: copy;">
-    <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
-    <td>Iets kan worden gekopieerd.</td>
-   </tr>
-   <tr style="cursor: move;">
-    <td><code>move</code></td>
-    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
-    <td>Iets kan worden verplaatst.</td>
-   </tr>
-   <tr style="cursor: no-drop;">
-    <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
-    <td>Een item mag niet op de huidige locatie worden geplaatst.<br>
-     {{bug("275173")}}: Op Windows en Mac OS X, <code>no-drop</code> is hetzelfde als <code>not-allowed</code>.</td>
-   </tr>
-   <tr style="cursor: not-allowed;">
-    <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
-    <td>Iets kan niet worden gedaan.</td>
-   </tr>
-   <tr style="cursor: all-scroll;">
-    <td rowspan="15" style="cursor: auto;">Resize &amp; scrolling</td>
-    <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
-    <td>Iets kan gescrold worden in elke richting (pannend).<br>
-     {{bug("275174")}}: Op Windows, <code>all-scroll</code> is hetzelfde als <code>move</code>.</td>
-   </tr>
-   <tr style="cursor: col-resize;">
-    <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
-    <td>De item/kolom groote kan verticaal worden aangepast. Vaak weergegeven als pijlen die links en rechts wijzen met een verticale balk tussen beide.</td>
-   </tr>
-   <tr style="cursor: row-resize;">
-    <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
-    <td>De item/kolom groote kan horizontaal worden aangepast. Vaak weergegeven als pijlen die boven en onder wijzen met een horizontale balk tussen beide.</td>
-   </tr>
-   <tr style="cursor: n-resize;">
-    <td><code>n-resize</code></td>
-    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
-    <td rowspan="8" style="cursor: auto;">
-     <p>Een rand kan bewogen worden. Bijvoorbeeld de  <code>se-resize</code> cursor wordt gebruikt waneer een beweging start van de <em>zuid-oost</em> hoek van een box.</p>
-
-     <p>In sommige omgevingen wordt een gelijk bi-directioneel rezise cursor weergegeven.Bijvoorbeeld, <code>n-resize</code> en<code>s-resize</code> zijn hetzelfde als <code>ns-resize</code>.</p>
-    </td>
-   </tr>
-   <tr style="cursor: e-resize;">
-    <td><code>e-resize</code></td>
-    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: s-resize;">
-    <td><code>s-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: w-resize;">
-    <td><code>w-resize</code></td>
-    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: ne-resize;">
-    <td><code>ne-resize</code></td>
-    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: nw-resize;">
-    <td><code>nw-resize</code></td>
-    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: se-resize;">
-    <td><code>se-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: sw-resize;">
-    <td><code>sw-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: ew-resize;">
-    <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
-    <td rowspan="4" style="cursor: auto;">Bi-directioneel resize cursor.</td>
-   </tr>
-   <tr style="cursor: ns-resize;">
-    <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: nesw-resize;">
-    <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
-   </tr>
-   <tr style="cursor: nwse-resize;">
-    <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
-   </tr>
-   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
-    <td rowspan="2">Zoom</td>
-    <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
-    <td rowspan="2" style="cursor: auto;">
-     <p>Iets kan worden in- of uitvergroot.</p>
-    </td>
-   </tr>
-   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
-    <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
-   </tr>
-   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
-    <td rowspan="2">Grab</td>
-    <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
-    <td rowspan="2" style="cursor: auto;">
-     <p>Iets kan worden vastgepakt. (Gesleept worden om te verplaatsen)</p>
-    </td>
-   </tr>
-   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
-    <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Formal_syntax">Formal syntax</h3>
-
-{{csssyntax}}
-
-<h2 id="Usage_notes">Usage notes</h2>
-
-<p>Hoewel de specificaties geen grootte limitaties defineerd voor <code>cursor</code>, kunnen individuele{{Glossary("user agent", "user agents")}} kiezen dit wel te doen. Cursor aanpassingen die gebruik maken van afbeeldingen die groter zijn dan de size range gesuporteerd door de browser worden in het algemeen genegeerd.</p>
-
-<p>Controleer de {{anch("Browser compatibility")}} tabel voor notities i.v.m. cursor grootte limieten.</p>
-
-<h2 id="Examples">Examples</h2>
-
-<pre class="brush:css">.foo {
-  cursor: crosshair;
-}
-
-.bar {
-  cursor: zoom-in;
-}
-
-/* A fallback keyword value is required when using a URL */
-.baz {
-  cursor: url("hyper.cur"), auto;
-}
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Toevoeging van verschillend sleutelwoorden and positionerings syntaxt voor <code>url()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Initiële definitie.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-
-
-<p>{{Compat("css.properties.cursor")}}</p>
-
-
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
- <li>{{cssxref("pointer-events")}}</li>
- <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
-</ul>
diff --git a/files/nl/web/css/index.html b/files/nl/web/css/index.html
deleted file mode 100644
index 1e924e4470..0000000000
--- a/files/nl/web/css/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: CSS
-slug: Web/CSS
-tags:
-  - CSS
-  - Design
-  - Layout
-  - Ontwerp
-  - Referentie
-  - Verdeling
-translation_of: Web/CSS
----
-<p><strong>CSS </strong>is één van de basistalen van het <em>open web</em> en heeft een gestandaardiseerde <a href="http://w3.org/Style/CSS/#specs">W3C-specificatie</a>. De taal is ontwikkeld in niveau's; CSS1 is nu verouderd, CSS2.1 is een aanbeveling en <a href="/en-US/docs/CSS/CSS3">CSS3</a>, nu opgesplitst in kleinere modules, is op weg naar de standaard.</p>
-
-<section id="sect1">
-<ul class="card-grid">
- <li><span>CSS referentie</span>
-
-  <p>Een <a href="/en-US/docs/Web/CSS/Reference">grondige referentie</a> voor doorgewinterde webdevelopers die elke eigenschap en elk concept van CSS beschrijft.</p>
- </li>
- <li><span>CSS tutorials</span>
-  <p>Een <a href="/nl/docs/Learn/CSS/Introduction_to_CSS" title="en-US/docs/CSS/Getting_Started">stap-voor-stap introductie</a> om volledige beginners te helpen starten. Het presenteert alle nodige fundamenten.</p>
- </li>
- <li><span>CSS3 demo's</span>
-  <p>Een <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collectie van demo's</a> die de laatste technologieën van CSS toont: een boost voor de creativiteit.</p>
- </li>
-</ul>
-
-<div class="row topicpage-table">
-
-
-<div class="section">
-<h2 class="Documentation" id="Documentation" name="Documentation">Documentatie en tutorials</h2>
-
-<dl>
- <dt>CSS sleutelbegrippen</dt>
- <dd>Beschrijft de <a href="/en-US/docs/CSS/Syntax">syntax en vormt de taal</a> en introduceert grondbeginselen zoals <a href="/en-US/docs/CSS/Specificity">specificity </a>en <a href="/en-US/docs/CSS/inheritance">inheritance</a>, het <a href="/en-US/docs/CSS/box_model">box model</a> en <a href="/en-US/docs/CSS/margin_collapsing">margin collapsing</a>, <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context">stacking</a> en <a href="/en-US/docs/CSS/block_formatting_context">block-formatting</a> contexten, of de <a href="/en-US/docs/CSS/initial_value">initiële</a>, <a href="/en-US/docs/CSS/computed_value">berekende</a>, <a href="/en-US/docs/CSS/used_value">gebruikte </a>en <a href="/nl/docs/">actuele </a>waarden. Entiteiten zoals <a href="/en-US/docs/CSS/Shorthand_properties">CSS shorthand properties</a> zijn ook beschreven.</dd>
- <dt><a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">CSS developer gids</a></dt>
- <dd>Artikelen die je helpen met alles leren over CSS. Van de basis van het stijlen van HTML met CSS tot verschillende CSS-technieken die je inhoud gaan doen sprankelen.</dd>
- <dt><a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Vaakgestelde CSS vragen</a></dt>
- <dd>Antwoorden op vaakgestelde <strong>CSS </strong>vragen.</dd>
-</dl>
-</div>
-
-<div class="section">
-<h2 class="Tools" id="Tools" name="Tools">Hulpmiddelen voor CSS-ontwikkeling</h2>
-
-<ul>
- <li>De <a href="http://jigsaw.w3.org/css-validator/">W3C CSS Validatie Service</a> kijkt of een gegeven CSS correct is. De service <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> doet hetzelfde. Beide zijn onschatbare hulpmiddelen.</li>
- <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> staat je toe om live de CSS van de webpagina te bekijken en aan te passen via de <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> en de <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li>
- <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extensie</a> voor Firefox, een populaire extensie staat je toe om live CSS aan te passen op bekeken websites. Dit is ideaal om aanpassingen te testen, al kan deze tool veel meer dan dat.</li>
- <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extensie</a> voor Firefox staat je ook toe om live CSS te bekijken en aan te passen op bekeken websites. Gemakkelijker dan Firebug, maar ook minder krachtig.</li>
- <li><a href="/en-US/docs/Web/CSS/Tools">CSS tools</a>.</li>
-</ul>
-</div>
-</div>
-</section>
-
-<h2 id="Zie_ook">Zie ook</h2>
-
-<ul>
- <li>Mozilla's <a href="/en-US/Learn/CSS">Leer CSS sectie</a></li>
- <li>Webtalen waarop CSS vaak wordt toegepast: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a> en <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
- <li>Mozilla technologieën die gebruik maken van CSS: <a href="/en-US/docs/Mozilla/Tech/XUL" title="en-US/docs/XUL">XUL</a>, <a href="/en-US/Firefox">Firefox</a>, en <a href="/en-US/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/en-US/docs/Extensions" title="en-US/docs/Extensions">extensies</a> en <a href="/en-US/Add-ons/Themes" title="en-US/docs/Themes">thema's</a>.</li>
-</ul>
diff --git a/files/nl/web/css/padding-bottom/index.html b/files/nl/web/css/padding-bottom/index.html
deleted file mode 100644
index c3525392d8..0000000000
--- a/files/nl/web/css/padding-bottom/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: padding-bottom
-slug: Web/CSS/padding-bottom
-tags:
-  - CSS
-  - CSS Padding
-  - CSS Property
-  - Reference
-translation_of: Web/CSS/padding-bottom
----
-<div>{{CSSRef}}</div>
-
-<p>De  <a href="/nl/CSS" title="CSS">CSS</a>-eigenschap <strong><code>padding-bottom</code></strong> stelt de hoogte in van de vulling aan de onderkant van een element. Voor padding is het, in tegenstelling tot margins, niet toegestaan om negatieve waarden te gebruiken. De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen.</p>
-
-<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
-padding-bottom: 0.5em;
-padding-bottom: 0;
-padding-bottom: 2cm;
-
-/* &lt;percentage&gt; value */
-padding-bottom: 10%;
-
-/* Global values */
-padding-bottom: inherit;
-padding-bottom: initial;
-padding-bottom: unset;
-</pre>
-
-<p>De <a href="/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">paddingruimte</a> is de ruimte tussen de inhoud en de rand van een element.</p>
-
-<p><img alt="The effect of the CSS padding-bottom property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntaxis">Syntaxis</h2>
-
-<h3 id="Waarden">Waarden</h3>
-
-<dl>
- <dt>{{cssxref("length")}}</dt>
- <dd>De grootte van de padding als vaste waarde. Mag niet negatief zijn.</dd>
- <dt>{{cssxref("percentage")}}</dt>
- <dd>De grootte van de padding als een percentage, relatief aan de <em>breedte</em> van het element waarin het betreffende element staat. Mag niet negatief zijn.</dd>
-</dl>
-
-<h3 id="Formele_syntaxis">Formele syntaxis</h3>
-
-{{csssyntax}}
-
-<h2 id="Voorbeelden">Voorbeelden</h2>
-
-<pre class="eval">.content { padding-bottom: 5%; }
-.sidebox { padding-bottom: 10px; }
-</pre>
-
-<h2 id="Specificaties">Specificaties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificatie</th>
-   <th scope="col">Status</th>
-   <th scope="col">Opmerking</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td>
-   <td>{{ Spec2('CSS3 Box') }}</td>
-   <td>Geen verandering ten opzichte van {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td>
-   <td>{{ Spec2('CSS3 Transitions') }}</td>
-   <td>Definieert <code>padding-bottom</code> als animeerbaar.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>Geen verandering ten opzichte van {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td>
-  </tr>
-  <tr>
-   <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td>
-   <td>{{ Spec2('CSS1') }}</td>
-   <td>Aanvankelijke definitie.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2>
-
-
-
-<p>{{Compat("css.properties.padding-bottom")}}</p>
-
-<h2 id="Zie_ook">Zie ook</h2>
-
-<ul>
- <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Boxmodel</a></li>
- <li>De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, <code>padding-bottom</code> en {{cssxref("padding-left")}}.</li>
-</ul>