diff --git a/README.md b/README.md
index 802ca6e73a9..28a3412145a 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 Welcome to Brackets! [![Build Status](https://travis-ci.org/adobe/brackets.svg?branch=master)](https://travis-ci.org/adobe/brackets)
 -------------------
 
-This is an early version of Brackets, a code editor for HTML, CSS
+Brackets is a modern open-source code editor for HTML, CSS
 and JavaScript that's *built* in HTML, CSS and JavaScript. 
 
 What makes Brackets different from other web code editors?
@@ -15,19 +15,17 @@ back and forth between your real source code and the browser view.
 * **Do it yourself.** Because Brackets is open source, and built with HTML, CSS
 and JavaScript, you can [help build](https://github.com/adobe/brackets/blob/master/CONTRIBUTING.md) the best code editor for the web.
 
+Brackets is at 1.0 and we're not stopping there. We have many feature ideas on our
+[trello board](http://bit.ly/BracketsTrelloBoard) that we're anxious to add and other
+innovative web development workflows that we're planning to build into Brackets. 
+So take Brackets out for a spin and let us know how we can make it your favorite editor. 
+
 You can see some 
 [screenshots of Brackets](https://github.com/adobe/brackets/wiki/Brackets-Screenshots)
 on the wiki, [intro videos](http://www.youtube.com/user/CodeBrackets) on YouTube, and news on the [Brackets blog](http://blog.brackets.io/).
 
-
 How to install and run Brackets
 -------------------------------
-
-
-#### Brackets is getting close to 1.0
-
-Together with your contributions, we're getting close to our first release candidate.  What's there is reasonably stable, and the Brackets team even uses Brackets to develop Brackets full time. So feel free to give it a spin and let us know what's missing! Being built on JavaScript, it's easy to make your own changes, and we give priority to integrating your pull requests back into Brackets!
-
 #### Download
 
 Installers for the latest stable build for Mac, Windows and Linux (Debian/Ubuntu) can be [downloaded here](http://brackets.io/).
diff --git a/package.json b/package.json
index 78e3b7c32c8..7275be0ee2b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "Brackets",
-    "version": "0.45.0-0",
-    "apiVersion": "0.45.0",
+    "version": "1.1.0-0",
+    "apiVersion": "1.1.0",
     "homepage": "http://brackets.io",
     "issues": {
         "url": "http://github.com/adobe/brackets/issues"
@@ -17,7 +17,7 @@
         "jasmine-node": "1.11.0",
         "grunt-jasmine-node": "0.1.0",
         "grunt-cli": "0.1.9",
-        "phantomjs": "1.9.0-1",
+        "phantomjs": "1.9.11",
         "grunt-lib-phantomjs": "0.3.0",
         "grunt-contrib-jshint": "0.6.0",
         "grunt-contrib-watch": "0.4.3",
@@ -35,6 +35,7 @@
         "grunt-usemin": "0.1.11",
         "load-grunt-tasks": "0.2.0",
         "q": "0.9.2",
+        "semver": "^4.1.0",
         "jshint": "2.1.4",
         "xmldoc": "^0.1.2"
     },
diff --git a/samples/da/Kom godt i gang/screenshots/quick-edit.png b/samples/da/Kom godt i gang/screenshots/quick-edit.png
index b72a6bf496f..911d70c8266 100644
Binary files a/samples/da/Kom godt i gang/screenshots/quick-edit.png and b/samples/da/Kom godt i gang/screenshots/quick-edit.png differ
diff --git a/samples/de/Erste Schritte/index.html b/samples/de/Erste Schritte/index.html
index 67d533ed38d..f80c7e2fc15 100644
--- a/samples/de/Erste Schritte/index.html	
+++ b/samples/de/Erste Schritte/index.html	
@@ -18,10 +18,9 @@ <h2>Dies ist Ihre Anleitung!</h2>
         -->
 
         <p>
-            Willkommen zu einer frühen Vorschau von Brackets, einem neuen Open-Source-Editor für die
-            nächste Generation des Webs. Wir sind große Fans von Standards und wollen bessere Tools für
-            JavaScript, HTML und CSS sowie verwandte offene Web-Technologien bauen. Dies ist erst
-            der Anfang von dem, was wir noch vorhaben.
+            Willkommen zu Brackets, einem modernen, quelloffenen Code-Editor, der Webdesign versteht. Es ist ein
+            einfacher, aber dennoch leistungsfähiger Editor, der Ihnen immer die richtigen Tools einblendet, sodass
+            Sie die genau richtige Menge an Hilfestellung haben, wann immer Sie diese brauchen.
         </p>
 
         <!--
@@ -29,17 +28,34 @@ <h2>Dies ist Ihre Anleitung!</h2>
         -->
         <p>
             <em>Brackets ist eine andere Art Editor.</em>
-            Ein entscheidender Unterschied ist, dass dieser Editor in JavaScript, HTML und CSS geschrieben ist.
-            Das heißt, dass die meisten von euch Brackets-Nutzern die nötigen Fähigkeiten haben, Brackets selbst
-            zu verändern und erweitern.
-            Tatsächlich benutzen wir Brackets täglich, um Brackets zu verbessern.
-            Es hat außerdem einige einzigartige Funktionen wie Schnelles Bearbeiten, die Live-Vorschau und andere,
-            die sie wahrscheinlich nicht in anderen Editoren finden werden.
-            Lesen Sie weiter, um zu erfahren, wie sie diese Funktionen nutzen können.
+            Brackets hat ein paar einzigartige Features wie Schnelles Bearbeiten, Live-Vorschau und zahlreiche
+            weitere, die Sie in anderen Editoren vergeblich suchen werden. Zudem ist Brackets in JavaScript, HTML
+            und CSS geschrieben. Das heißt, dass die meisten Brackets-Nutzer dazu in der Lage sind, den Editor
+            selbst zu verändern und erweitern. Tatsächlich nutzen wir Brackets täglich, um Brackets zu verbessern.
+            Lesen Sie weiter, um mehr über die Nutzung der Hauptfeatures zu erfahren.
+            
         </p>
+        
+        <!--
+            BEGINNEN SIE, IHRE EIGENEN DATEIEN ZU NUTZEN
+        -->
 
-
-        <h2>Wir probieren ein paar neue Dinge aus</h2>
+        <h3>Projekte in Brackets</h3>
+        <p>
+            Um Ihren eigenen Code in Brackets zu bearbeiten, können Sie einfach den Ordner öffnen, der Ihre
+            Dateien enthält.
+            Brackets sieht den geöffneten Ordner als "Projekt"; Features wie Code-Vervollständigung, Live-Vorschau
+            und Schnelles Bearbeiten nutzen nur Dateien im aktuell geöffneten Ordner.
+        </p>
+        
+        <samp>
+            Sobald Sie bereit sind, dieses Beispielprojekt zu verlassen und Ihren eigenen Code zu editieren, können
+            Sie die Drop-Down-Liste auf der linken Seite nutzen, um einen Ordner auszuwählen. Die Drop-Down-Liste
+            heißt zurzeit "Erste Schritte" - das ist der Ordner, der die aktuell geöffnete Datei enthält. Klicken
+            Sie darauf und wählen Sie daraufhin "Ordner öffnen…", um Ihren eigenen Ordner zu öffnen.
+            Sie können auf diese Weise auch später wieder zu zuvor geöffneten Ordnern, wie diesem Beispielprojekt,
+            zurückkehren.
+        </samp>
 
         <!--
             DIE BEZIEHUNG VON HTML, CSS UND JAVASCRIPT
@@ -49,16 +65,17 @@ <h3>Schnelles Bearbeiten von CSS und JavaScript</h3>
             Kein Wechsel zwischen Dokumenten mehr - so verlieren Sie nie den Überblick. Wenn Sie HTML editieren,
             können Sie die Tastenkombination <kbd>Cmd/Strg + E</kbd> verwenden, um einen Inline-Editor anzuzeigen,
             der Ihnen alle relevanten CSS-Regeln zum Schnellen Bearbeiten anzeigt.
-            Ändern Sie etwas in dem CSS, drücken Sie <kbd>ESC</kbd> und schon sind Sie zurück im HTML-Code. Oder
-            lassen Sie die CSS-Regeln einfach offen und sie werden Teil ihres HTML-Editors. Sobald Sie <kbd>ESC</kbd>
-            außerhalb eines solchen Editors drücken, schließen sich all diese.
+            Ändern Sie etwas im CSS, drücken Sie <kbd>ESC</kbd> und schon sind Sie zurück im HTML-Code. Oder lassen
+            Sie die CSS-Regeln einfach offen und sie werden Teil ihres HTML-Editors. Sobald Sie <kbd>ESC</kbd>
+            außerhalb eines solchen Editors drücken, schließen sich alle zusammen. Ein Inline-Editor zeigt Ihnen
+            auch Regeln in LESS- und SCSS-Dateien, inklusive geschachtelter Regeln.
         </p>
 
         <samp>
             Sie wollen das in Aktion sehen? Setzen Sie Ihren Cursor auf den <!-- <samp> -->-Tag oben und drücken
             Sie <kbd>Cmd/Strg + E</kbd>. Sie sollten einen Editor zum Schnellen Bearbeiten von CSS erscheinen sehen,
             der die geltenden CSS-Regeln anzeigt. Das Schnelle Bearbeiten funktioniert genauso in Klassen- und 
-            ID-Attributen.
+            ID-Attributen. Sie können es zudem in LESS- und SCSS-Dateien nutzen.
             
             Sie können auf die selbe Weise neue Regeln erstellen. Klicken Sie in einen der <!-- <p> -->-Tags weiter
             oben und drücken Sie <kbd>Cmd/Strg + E</kbd>. Es gibt noch keine Regeln dafür, aber Sie können den
@@ -72,6 +89,8 @@ <h3>Schnelles Bearbeiten von CSS und JavaScript</h3>
         <p>
             Sie können die selbe Tastenkombination nutzen, um andere Dinge auf die selbe Weise zu bearbeiten - wie
             JavaScript-Funktionen, Farben und Animations-Timing-Funktionen - und wir fügen ständig mehr hinzu.
+        </p>
+        <p>
             Im Augenblick können solche Editoren allerdings nicht verschachtelt werden. Sie können das
             Schnelle Bearbeiten also nur nutzen, während der Cursor sich im Haupteditor befindet.
         </p>
@@ -145,7 +164,7 @@ <h3>Schnelle Farbansicht</h3>
         <h3>Sie benötigen etwas anderes? Probieren Sie es mit einer Erweiterung!</h3>
         <p>
             Zusätzlich zu all dem, was in Brackets eingebaut ist, hat unsere große und wachsende Community der
-            Erweiterungs-Entwickler über hundert Erweiterungen erstellt, die nützliche Funktionen bringen. Wenn
+            Erweiterungs-Entwickler hunderte Erweiterungen erstellt, die nützliche Funktionen bringen. Wenn
             Sie etwas brauchen, was es nicht in Brackets gibt, ist es sehr wahrscheinlich, dass bereits jemand
             eine Erweiterung dafür geschrieben hat. Um die Liste der verfügbaren Erweiterungen zu durchstöbern
             oder zu durchsuchen nutzen Sie <strong>Datei &gt; Erweiterungs-Verwaltung</strong> und klicken auf
@@ -153,23 +172,6 @@ <h3>Sie benötigen etwas anderes? Probieren Sie es mit einer Erweiterung!</h3>
             auf den "Installieren"-Button daneben.
         </p>
 
-        <h3>Projekte in Brackets</h3>
-        <p>
-            Um Ihren eigenen Code in Brackets zu bearbeiten, können Sie einfach den Ordner öffnen, der Ihre
-            Dateien enthält.
-            Brackets sieht den geöffneten Ordner als "Projekt"; Features wie Code-Vervollständigung, Live-Vorschau
-            und Schnelles Bearbeiten nutzen nur Dateien im aktuell geöffneten Ordner.
-        </p>
-        
-        <samp>
-            Sobald Sie bereit sind, dieses Beispielprojekt zu verlassen und Ihren eigenen Code zu editieren, können
-            Sie die Drop-Down-Liste auf der linken Seite nutzen, um einen Ordner auszuwählen. Die Drop-Down-Liste
-            heißt zurzeit "Erste Schritte" - das ist der Ordner, der die aktuell geöffnete Datei enthält. Klicken
-            Sie darauf und wählen Sie daraufhin "Ordner öffnen…", um Ihren eigenen Ordner zu öffnen.
-            Sie können auf diese Weise auch später wieder zu zuvor geöffneten Ordnern, wie diesem Beispielprojekt,
-            zurückkehren.
-        </samp>
-
         <!--
             LASSEN SIE UNS WISSEN, WAS SIE DENKEN
         -->
@@ -188,7 +190,7 @@ <h2>Machen Sie mit</h2>
             <li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
             <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets Developer-Mailingliste</a></li>
             <li><a href="https://twitter.com/brackets">@brackets auf Twitter</a></li>
-            <li>Mit Brackets-Entwicklern per IRC in <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets auf Freenode</a> chatten</li>
+            <li>Mit Brackets-Entwicklern via IRC in <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets auf Freenode</a> chatten</li>
         </ul>
 
     </body>
diff --git a/samples/es/Primeros Pasos/index.html b/samples/es/Primeros Pasos/index.html
index 2225bfd8bf6..416e6365155 100644
--- a/samples/es/Primeros Pasos/index.html	
+++ b/samples/es/Primeros Pasos/index.html	
@@ -18,10 +18,9 @@ <h2>¡Ésta es tu guía!</h2>
         -->
 
         <p>
-            Bienvenido a una versión preliminar de Brackets, un nuevo editor de código abierto para la nueva
-            generación de Internet. Somos unos apasionados de los estándares y queremos construir mejores
-            herramientas para JavaScript, HTML, CSS y el resto de tecnologías web. Éste es nuestro humilde
-            comienzo.
+            Bienvenido a Brackets, un nuevo editor de código abierto que entiende el diseño web. Es un editor de
+            código liviano y potente al mismo tiempo que incluye herramientas visuales dentro del mismo para
+            que puedas obtener la ayuda que necesites cuando la necesites.
         </p>
 
         <!--
@@ -29,13 +28,34 @@ <h2>¡Ésta es tu guía!</h2>
         -->
         <p>
             <em>Brackets es un editor diferente.</em>
-            La gran diferencia es que está escrito en JavaScript, HTML y CSS. Esto significa que la mayoría de quienes
-            usan Brackets tiene las habilidades necesarias para modificar y extender el editor. De hecho, nosotros
-            lo usamos todos los días para desarrollar Brackets. También tiene algunas características únicas como
-            Edición Rápida, Desarrollo en Vivo y más que no encontrarás en otros editores.
-            Sigue leyendo para saber más sobre cómo sacar provecho de estas características
+            Brackets tiene varias características únicas como la Edición rápida y la Vista previa dinámica y muchas
+            más que no vas a encontrar en otros editores. Además, Brackets está escrito en JavaScript, HTML y CSS.
+            Esto significa que la mayoría de quienes usan Brackets tienen las habilidades necesarias para modificar y
+            extender el editor. De hecho, nosotros usamos Brackets todos los días para desarrollar Brackets. Para
+            saber más sobre cómo utilizar estas características únicas, continua leyendo.
         </p>
         
+        <!--
+            EMPIEZA CON TUS PROPIOS ARCHIVOS
+        -->
+        
+        <h3>Proyectos en Brackets</h3>
+        <p>
+            Para poder editar tu propio código en Brackets, puedes simplemente abrir la carpeta que contiene los
+            archivos. Brackets considera a la carpeta abierta como el "proyecto"; características como las Sugerencias
+            de código, la Vista previa dinámica y la Edición rápida solo utilizan los archivos contenidos dentro de
+            la carpeta actualmente abierta.
+        </p>
+        
+        <samp>
+            Una vez que estés listo para salir del proyecto de ejemplo y editar tu propio código, puedes usar el menú
+            despegable en la barra de la izquierda para cambiar de carpeta. En estos momentos, el menú despegable dice
+            "Primeros Pasos" - la cual es la carpeta que contiene el archivo que estás viendo en estos momentos. Haz
+            clic en el menú despegable y selecciona "Abrir carpeta…" para abrir tu carpeta.
+            También puedes usar el menú despegable para abrir las carpetas que abriste recientemente, incluyendo este
+            proyecto de ejemplo.
+        </samp>
+        
         <h2>Estamos intentando algunas cosas nuevas</h2>
         
         <!--
@@ -45,18 +65,20 @@ <h3>Edición rápida de CSS y JavaScript</h3>
         <p>
             Se acabó el estar saltando de documento en documento perdiendo de vista lo que estás haciendo. Mientras
             estás escribiendo HTML, usa el atajo de teclado <kbd>Cmd/Ctrl + E</kbd> para abrir un editor rápido en
-            línea con todo el contenido CSS relacionado. Ajusta tu CSS y oprime <kbd>ESC</kbd> para volver a tu HTML, o simplemente
-            mantén las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si pulsas <kbd>ESC</kbd>
-            fuera de un editor rápido, todos se cerrarán a la vez.
+            línea con todo el contenido CSS relacionado. Ajusta tu CSS y oprime <kbd>ESC</kbd> para volver a tu HTML,
+            o simplemente mantenga las reglas CSS abiertas para que pasen a formar parte de tu editor de HTML. Si
+            pulsas <kbd>ESC</kbd> fuera de un editor rápido, todos se cerrarán a la vez. La edición rápida también
+            funciona con archivos LESS y SCSS files, incluyendo las reglas anidadas.
         </p>
 
         <samp>
-            ¿Quieres verlo funcionando? Coloca tu cursor sobe la etiqueta <!-- <samp> --> y oprime <kbd>Cmd/Ctrl + E</kbd>.
-            Deberías ver aparecer un editor rápido de CSS más arriba, mostrando la regla CSS que le afecta. La edición rápida
-            funciona también en atributos de de tipo clase e id.
+            ¿Quieres verlo funcionando? Coloca tu cursor sobre la etiqueta <!-- <samp> --> y oprime
+            <kbd>Cmd/Ctrl + E</kbd>. Deberías ver aparecer un editor rápido de CSS más arriba, mostrando la regla de
+            CSS que le afecta. La edición rápida funciona también en atributos de de tipo clase e id. También puedes
+            utilizarlo en tus archivos LESS o SCSS.
             
-            Puedes crear nuevas reglas de la misma manera. Haz click en una de las etiquetas <!-- <p> --> de más arriba y
-            oprime <kbd>Cmd/Ctrl + E</kbd>. Todavía no hay reglas para ese elemento, pero puedes hacer click en el 
+            Puedes crear nuevas reglas de la misma manera. Haz clic en una de las etiquetas <!-- <p> --> de más arriba
+            y oprime <kbd>Cmd/Ctrl + E</kbd>. Todavía no hay reglas para ese elemento, pero puedes hacer clic en el 
             botón Nueva Regla para añadir una nueva regla a las etiquetas <!-- <p> -->.
         </samp>
         
@@ -65,9 +87,12 @@ <h3>Edición rápida de CSS y JavaScript</h3>
         </a>
         
         <p>
-            También puedes usar el mismo atajo para editar otras cosas--como funciones en JavaScript, colores y funciones de
-            temporización de animaciones--y estamos añadiendo más y más continuamente. Por ahora, no se pueden anidar editores 
-            en línea, por lo que sólo puedes usar la característica de Edición Rápida cuando el cursor está en un editor "completo".
+            También puedes usar el mismo atajo para editar otras cosas--como funciones en JavaScript, colores y
+            funciones de temporización de animaciones--y estamos añadiendo más y más continuamente.
+        </p>
+        <p>
+            Por ahora, no se pueden anidar editores en línea, por lo que sólo puedes usar la característica de
+            Edición Rápida cuando el cursor está en un editor "completo".
         </p>
 
         <!--
@@ -76,91 +101,72 @@ <h3>Edición rápida de CSS y JavaScript</h3>
         <h3>Visualiza cambios en archivos HTML y CSS en vivo en el navegador</h3>
         <p>
             ¿Conoces ese baile de "guardar/recargar" que llevamos años haciendo? ¿Ése en el que haces cambios en tu
-            editor, oprimes guardar, cambias al navegador y recargas para por fin poder ver el  resultado? Con Brackets,
-            ya no tienes que hacerlo.
+            editor, oprimes guardar, cambias al navegador y recargas para por fin poder ver el  resultado? Con
+            Brackets, ya no tienes que hacerlo.
         </p>
         <p>
             ¡Brackets abrirá una <em>conexión en vivo</em> con tu navegador local y le enviará los cambios en el
-            archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de desarrollo
-            del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu editor.
-            ¡Tu código se ejecuta en el navegador, pero vive en tu editor!
+            archivo HTML y CSS conforme escribas! Puede que ya estés haciendo algo parecido con las herramientas de
+            desarrollo del navegador, pero con Brackets ya no necesitas copiar y pegar el código final de vuelta a tu
+            editor. ¡Tu código se ejecuta en el navegador, pero vive en tu editor!
         </p>
         
         <h3>Resaltado en vivo de elementos HTML y reglas CSS</h3>
         <p>
             Brackets te ayuda a ver cómo los cambios en HTML y CSS afectan a tu página. Cuando tu cursor se encuentre
             sobre una regla de CSS, Brackets resaltará todos los elementos afectados en el navegador. Del mismo modo,
-            cuando estés editando un archivo HTML, Brackets también resaltará los elementos correspondientes en tu
-            navegador.
+            cuando estés editando un archivo HTML, Brackets también resaltará los elementos correspondientes en tu navegador.
         </p>
 
         <samp>
-            Si tienes instalado Google Chrome, puedes probarlo tú mismo. Haz click sobre el icono del rayo de la
-            esquina superior derecha o presiona <kbd>Cmd/Ctrl + Alt + P</kbd>. Cuando Desarrollo en Vivo está
-            funcionando en un documento HTML, todos los documentos CSS relacionados se pueden editar en
-            tiempo real. El icono pasará de gris a dorado cuando Brackets consiga establecer una conexión
-            con tu navegador.
+            Si tienes instalado Google Chrome, puedes probarlo tú mismo. Haz clic sobre el icono del rayo de la
+            esquina superior derecha o presiona <kbd>Cmd/Ctrl + Alt + P</kbd>. Cuando la Vista previa dinámica está
+            funcionando en un documento HTML, todos los documentos CSS relacionados se pueden editar en tiempo real.
+            El icono pasará de gris a dorado cuando Brackets consiga establecer una conexión con tu navegador.
             
             Ahora, coloca el cursor sobre la etiqueta <!-- <img> --> que se encuentra un poco más arriba. Observa
             cómo aparece el resaltado azul alrededor de la imagen en Chrome. Luego, utiliza <kbd>Cmd/Ctrl + E</kbd>
-            para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde de 10 a 20 píxeles o el color
-            del fondo de "transparent" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás los
-            cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad?
+            para abrir las reglas de CSS existentes. Intenta cambiar el tamaño del borde de 10px a 20px o el color
+            del fondo de "transparent" a "hotpink". Si Brackets y tu navegador están funcionando en paralelo, verás
+            los cambios reflejados de manera instantánea en tu navegador. Genial, ¿verdad?
         </samp>
         
         <p class="note">
-            Actualmente, Brackets sólo soporta Desarrollo en Vivo para HTML y CSS. Aún así, en la versión actual, los cambios
-            en ficheros JavaScript son detectados y recargados automáticamente en el navegador cuando guardas. En
-            estos momentos estamos trabajando en añadir soporte para Desarrollo en Vivo para JavaScript. Además, las
-            actualizaciones automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar próximamente
-            esta funcionalidad a todos los grandes navegadores.
+            Actualmente, Brackets sólo soporta Vista previa dinámica para HTML y CSS. Aún así, en la versión actual,
+            los cambios en archivos JavaScript son recargados automáticamente en el navegador cuando guardas. En estos
+            momentos estamos trabajando en el soporte de Vista previa dinámica para JavaScript. Las actualizaciones
+            automáticas sólo son posibles en Google Chrome, pero esperamos poder trasladar esta funcionalidad a todos
+            los grandes navegadores.
         </p>
         
         <h3>Vista Rápida</h3>
         <p>
-            Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite ver
-            exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente mueve el
-            cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del mismo de manera
-            automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección de una imagen en Brackets,
-            y éste mostrará una vista en miniatura de la misma.
+            Para aquellos que todavía no han memorizado las equivalencias de color entre Hex y RGB, Brackets permite
+            ver exactamente qué color se está utilizando rápida y fácilmente. Tanto en CSS como en HTML, simplemente
+            mueve el cursor sobre cualquier valor de color o gradiente y Brackets mostrará una previsualización del
+            mismo de manera automática. Lo mismo sirve para imágenes: simplemente pasa el cursor sobre la dirección
+            de una imagen en Brackets, y éste mostrará una vista en miniatura de la misma.
         </p>
         
         <samp>
-            Para probar la previsualización tú mismo, coloca el cursor en la etiqueta <!-- <body> --> al principio de este
-            documento y oprime <kbd>Cmd/Ctrl + E</kbd> para abrir un editor CSS. Ahora, simplemente mueve el ratón sobre
-            cualquiera de los colores dentro del CSS. También puedes verlo funcionando en gradientes abriendo un editor
-            de CSS en la etiqueta <!-- <html> --> pasando el cursor por cualquiera de los valores para las imágenes de fondo.
-            Para probar la vista previa de imágenes, coloca el cursor sobre la imagen con la captura de pantalla incluida
-            antes en este documento.
+            Para probar la previsualización tú mismo, coloca el cursor en la etiqueta <!-- <body> --> al principio de
+            este documento y oprime <kbd>Cmd/Ctrl + E</kbd> para abrir un editor CSS. Ahora, simplemente mueve el
+            cursor sobre cualquiera de los colores dentro del CSS. También puedes verlo funcionando en gradientes
+            abriendo un editor de CSS en la etiqueta <!-- <html> --> y pasando el cursor por cualquiera de los valores
+            para las imágenes de fondo. Para probar la vista previa de imágenes, coloca el cursor sobre la imagen
+            incluida antes en éste documento.
         </samp>
         
         <h3>¿Necesitas algo más? ¡Prueba una extensión!</h3>
         <p>
-            Además de todas las bondades naturales de Brackets, nuestra amplia y creciente comunidad de
-            desarrolladores de extensiones ha creado más de un centenar de extensiones que añaden útiles
-            funcionalidades. Si hay algo que necesitas que Brackets no soporte, es bastante probable que
-            alguien haya construido una extensión para ello. Para navegar o buscar en la lista de extensiones
-            disponibles, selecciona <strong>Archivo &gt; Gestionar extensiones...</strong> y haz click en la
-            pestaña "Disponibles". Cuando encuentres una que quieras, simplemente presiona el botón "Instalar"
-            a su derecha.
-        </p>
-        
-        <h3>Proyectos en Brackets</h3> 
-        <p>
-            Para poder editar tu propio código en Brackets, puedes simplemente abrir la carpeta que contiene los archivos.
-            Brackets considera a la carpeta abierta como el "proyecto"; características como las Sugerencias de Código,
-            la Vista Previa y la Edición Rápida solo usan los archivos dentro de la carpeta abierta actualmente.
+            Además de todas las bondades naturales de Brackets, nuestra amplia y creciente comunidad de desarrolladores
+            de extensiones ha creado cientos de extensiones que añaden útiles funcionalidades. Si hay algo que
+            necesitas que Brackets no soporte, es bastante probable que alguien haya construido una extensión para
+            ello. Para navegar o buscar en la lista de extensiones disponibles, selecciona <strong>Archivo &gt;
+            Gestionar extensiones...</strong> y haz clic en la pestaña "Disponibles". Cuando encuentres una que
+            quieras, simplemente presiona el botón "Instalar" a su derecha.
         </p>
         
-        <samp>
-            Una vez que estés listo para salir del proyecto de ejemplo y editar tu propio código, puedes usar el menú
-            despegable en la barra de la izquierda para cambiar carpetas. En estos momentos, el menú despegable dice
-            "Primeros Pasos" - la cual es la carpeta que contiene el archivo que estás viendo en estos momentos. Haz
-            click en el menú despegable y selecciona "Abrir carpeta…" para abrir tu carpeta.
-            También puedes usar el menú despegable para abrir las carpetas que abriste recientemente, incluyendo este
-            proyecto de ejemplo.
-        </samp>
-        
         <!--
             HAZNOS SABER LO QUE PIENSAS
         -->
diff --git a/samples/fi/Aloitus/index.html b/samples/fi/Aloitus/index.html
index 31b0a1aaa8f..c5c60a17797 100644
--- a/samples/fi/Aloitus/index.html
+++ b/samples/fi/Aloitus/index.html
@@ -18,56 +18,78 @@ <h2>Tämä on oppaasi!</h2>
         -->
         
         <p>
-            Tervetuloa Bracketsin varhaiseen esiversioon, uuteen avoimen lähdekoodin editoriin seuraavalle web-sukupolvelle.
-            Olemme suuria standardien faneja ja haluamme rakentaa paremmat työkalut JavaScriptille, HTML:lle ja CSS:lle sekä
-            niihin liittyville, avoimille web-tekniikoille. Tämä on vaatimaton alkumme.
+            Tervetuloa käyttämään Bracketsia, nykyaikaista, avoimen lähdekoodin koodieditoria, joka ymmärtää
+            web-suunnittelun. Se on kevyt mutta silti tehokas: koodieditori, joka sulauttaa visuaaliset työkalut suoraan
+            editoriin, niin että saat oikean määrän apua silloin, kun haluat sitä.
         </p>
         
         <!--
-            MIKÄ BRACKETS?
+            MIKÄ BRACKETS ON?
         -->
         <p>
             <em>Brackets on erityyppinen editori.</em>
-            Yksi huomattava ero on se, että tämä editori on kirjoitettu JavaScriptillä, HTML:llä ja CSS:llä. Se tarkoittaa, että
-            useilla teistä Bracketsin käyttäjistä on tarvittavat taidot editorin muokkaamiseen ja laajentamiseen. Itse asiassa
-            käytämme Bracketsia joka päivä sen itsensä kehittämiseen. Bracketsissa on joitakin ainutlaatuisia ominaisuuksia,
-            kuten pikamuokkaus, reaaliaikainen esikatselu ja muita, joita et voi löytää muista editoreista. Oppiaksesi lisää,
-            kuinka käyttää näitä ominaisuuksia, jatka lukemista.
+            Bracketsissa on joitakin ainutlaatuisia ominaisuuksia, kuten pikamuokkaus, reaaliaikainen esikatselu ja
+            muita, joita et voi löytää muista editoreista. Lisäksi Brackets on kirjoitettu JavaSciptillä, HTML:llä ja
+            CSS:llä. Se tarkoittaa, että useimmilla Bracketsin käyttäjistä on riittävät taidot muokata ja laajentaa
+            editoria. Itse asiassa käytämme Bracketsia joka päivä sen itsensä kehitykseen. Oppiaksesi lisää siitä,
+            kuinka käyttää avainominaisuuksia, jatka lukemista.
         </p>
         
+        <!--
+            ALOITUS OMIEN TIEDOSTOJESI KANSSA
+        -->
         
-        <h2>Kokeilemme muutamia uusia asioita</h2>
+        <h3>Projektit Bracketsissa</h3>
+        <p>
+            Muokataksesi omaa koodiasi Bracketsia käyttäen voit vain avata tiedostosi sisältävän kansion. Brackets pitää
+            nykyistä avointa kansiota ”projektina”; ominaisuudet, kuten koodivihjeet, esikatselu ja pikamuokkaus,
+            käyttävät vain parhaillaan avoinna olevan kansion tiedostoja.
+        </p>
+        
+        <samp>
+            Heti kun olet valmis luopumaan tästä näyteprojektista ja muokkaamaan omaa koodiasi, voit käyttää vasemman
+            sivupalkin pudotusvalikkoa kansioiden vaihtamiseen. Juuri nyt pudotusvalikossa lukee ”Aloitus”. Tämä on
+            kansio, joka sisältää tiedoston, jota tarkastelet juuri nyt. Avaa oma kansiosi napsauttamalla
+            pudotusvalikkoa ja valitsemalla ”Avaa kansio…”.
+            Voit käyttää pudotusvalikkoa myös myöhemmin vaihtaaksesi takaisin kansioihin, jotka olet avannut aiemmin,
+            sisältäen tämän näyteprojektin.
+        </samp>
         
         <!--
-            HTML:N, CSS:N JA JAVASCRIPTIN SUHDE
+            YHTEYS HTML:N, CSS:N JA JAVASCRIPTIN VÄLILLÄ
         -->
         <h3>Pikamuokkaus CSS:lle ja JavaScriptille</h3>
         <p>
             Ei lisää dokumenttien välillä vaihtamista tai asiayhteyden hukkaamista. Muokatessasi HTML:ää käytä
-            <kbd>Cmd/Ctrl + E</kbd> -näppäinyhdistelmää avataksesi upotetun pikaeditorin, joka näyttää kaiken tiedostoon
-            liittyvän CSS:n. Muokkaa CSS:ääsi, paina <kbd>ESC</kbd>-näppäintä ja olet takaisin editoimassa HTML:ää, tai jätä
-            CSS-säännöt auki ja ne tulevat osaksi HTML-editoriasi. Jos painat <kbd>ESC</kbd>-näppäintä pikaeditorin ulkopuolella,
-            ne kaikki sulkeutuvat.
+            näppäinyhdistelmää <kbd>Cmd/Ctrl + E</kbd> avataksesi upotetun pikaeditorin, joka näyttää kaiken tiedostoon
+            liittyvän CSS:n. Muokkaa CSS:ääsi, paina <kbd>ESC</kbd>-näppäintä ja olet taas muokkaamassa HTML:ää, tai
+            yksinkertaisesti jätä CSS-säännöt auki, ja niistä tulee osa HTML-editoriasi. Jos painat
+            <kbd>ESC</kbd>-näppäintä pikaeditorin ulkopuolella, ne kaikki sulkeutuvat. Pikaeditori löytää myös LESS- ja
+            SCSS-tiedostoissa määritellyt säännöt, sisältäen sisäkkäiset sellaiset.
         </p>
         
         <samp>
-            Haluatko nähdä sen toiminnassa? Aseta osoitin alla olevan <!-- <samp> --> -tagin päälle ja paina
-            <kbd>Cmd/Ctrl + E</kbd>. Sinun pitäisi nähdä CSS-pikaeditorin ilmestyvän alapuolelle näyttäen CSS-säännön, joka
-            kuuluu sille. Pikamuokkaus toimii niin class- kuin id-attribuuttien kanssa.
+            Haluatko nähdä sen toiminnassa? Aseta kohdistin alla olevaan <!-- <samp> --> -tägiin ja paina
+            <kbd>Cmd/Ctrl + E</kbd>. Sinun pitäisi nähdä, kun CSS-pikaeditori ilmestyy alapuolelle näyttäen CSS-säännön,
+            joka pätee siihen. Pikamuokkaus toimii toki myös class- ja id-attribuuttien kanssa. Voit käyttää sitä myös
+            LESS- ja SCSS-tiedostojesi kanssa.
             
-            Voit luoda uusia sääntöjä samalla tavalla. Napsauta jotakin alaosan <!-- <p> --> -tageista ja paina
-            <kbd>Cmd/Ctrl + E</kbd>. Sille ei ole sääntöjä juuri nyt, mutta voit napsauttaa Uusi sääntö -painiketta lisätäksesi
-            uuden säännön <!-- <p> --> -tageille.
+            Voit luoda uusia sääntöjä samalla tavalla. Napsauta yhtä alaosan <!-- <p> --> -tägeistä ja paina
+            <kbd>Cmd/Ctrl + E</kbd>. Sille ei ole sääntöjä juuri nyt, mutta voit napsauttaa Uusi sääntö -painiketta
+            lisätäksesi uuden säännön <!-- <p> --> -tägeille.
         </samp>
         
         <a href="screenshots/quick-edit.png">
-            <img alt="Kuvankaappaus näyttää CSS:n pikamuokkauksen" src="screenshots/quick-edit.png" />
+            <img alt="Kuvankaappaus, jossa näkyy CSS:n pikamuokkaus" src="screenshots/quick-edit.png" />
         </a>
         
         <p>
-            Voit käyttää samaa näppäinyhdistelmää muokataksesi myös muita asioita, kuten funktioita JavaScriptissä, värejä ja
-            animaatioiden ajoitusfunktioita, ja lisäämme koko ajan yhä enemmän ominaisuuksia. Toistaiseksi sisäeditorit eivät voi
-            olla sisäkkäin, joten voit käyttää pikamuokkausta vain, kun osoitin on täyskokoisessa editorissa.
+            Voit käyttää samaa näppäinyhdistelmää muokataksesi myös muita asioita - kuten JavaScriptin funktioita,
+            värejä ja animaatioiden ajoitusfunktioita - ja me lisäämme koko ajan yhä enemmän ominaisuuksia.
+        </p>
+        <p>
+            Toistaiseksi sisäeditorit eivät voi olla sisäkkäin, joten voit käyttää pikamuokkausta vain silloin, kun
+            kohdistin on täyskokoisessa editorissa.
         </p>
         
         <!--
@@ -75,91 +97,78 @@ <h3>Pikamuokkaus CSS:lle ja JavaScriptille</h3>
         -->
         <h3>Esikatsele HTML:n ja CSS:n muutoksia reaaliaikaisesti selaimessa</h3>
         <p>
-            Tiedäthän sen ”tallenna/päivitä-tanssin”, jota olemme tehneet vuosia? Se, jossa tehdään muutoksia editorissa,
-            tallennetaan, vaihdetaan selaimeen ja sitten päivitetään tuloksen näkemiseksi viimein? Bracketsissa sinun ei
-            tarvitse harrastaa tätä tanssia.
+            Tiedäthän sen ”tallenna ja päivitä -tanssin”, jota olemme harrastaneet vuosia? Se, jossa tehdään muutoksia
+            editorissa, painetaan tallenna, vaihdetaan selaimeen ja sitten päivitetään, jotta tulos tulee viimein
+            näkyville? Bracketsissa sinun ei tarvitse harrastaa tätä tanssia.
         </p>
         <p>
-            Brackets avaa <em>reaaliaikaisen yhteyden</em> paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset samalla kun
-            kirjoitat! Saatat jo olla tehnyt jotain tämän kaltaista selainpohjaisilla työkaluilla, mutta Bracketsin kanssa ei
-            tarvitse kopioida ja liittää lopullista koodia takaisin editoriin. Koodisi suoritetaan selaimessasi, mutta se
-            sijaitsee editorissasi!
+            Brackets avaa <em>reaaliaikaisen yhteyden</em> paikalliseen selaimeesi ja vie HTML:n CSS:n päivitykset
+            samalla kun kirjoitat! Saatat olla jo tehnyt jotakin tämän kaltaista selainpohjaisilla työkaluilla, mutta
+            Bracketsin kanssa ei tarvitse kopioida ja liittää lopullista koodia takaisin editoriin. Koodisi suoritetaan
+            selaimessasi, mutta se sijaitsee editorissasi!
         </p>
         
         <h3>Korosta HTML-elementtejä ja CSS-sääntöjä reaaliaikaisesti</h3>
         <p>
-            Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun osoittimesi on
-            CSS-säännön päällä, Brackets korostaa kaikki sääntöön liittyvät elementit selaimessa. Samoin muokatessa
-            HTML-tiedostoa, Brackets korostaa vastaavat HTML-elementit selaimessa.
+            Brackets tekee helpoksi nähdä, kuinka muutoksesi HTML:ssä ja CSS:ssä vaikuttavat sivuun. Kun kohdistin on
+            CSS-säännöllä, Brackets korostaa kaikki siihen liittyvät elementit selaimessa. Samalla tavoin muokattaessa
+            HTML-tiedostoa Brackets korostaa vastaavat HTML-elementit selaimessa.
         </p>
         
         <samp>
-            Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta salama-kuvaketta Brackets-ikkunan
-            oikeassa yläkulmassa tai paina <kbd>Cmd/Ctrl + Alt + P</kbd>. Kun esikatselu on käytössä HTML-dokumentissa, kaikkia
-            linkitettyjä CSS-dokumentteja voidaan muokata reaaliajassa. Kuvake muuttuu harmaasta kultaiseksi, kun Brackets
-            muodostaa yhteyden selaimeesi.
+            Jos sinulla on Google Chrome asennettuna, voit kokeilla tätä itse. Napsauta Brackets-ikkunan oikeassa
+            yläkulmassa sijaitsevaa salamakuvaketta tai paina <kbd>Cmd/Ctrl + Alt + P</kbd>. Kun esikatselu on käytössä
+            HTML-dokumentissa, kaikkia linkitettyjä CSS-dokumentteja voi muokata reaaliajassa. Kuvake muuttuu harmaasta
+            kultaiseksi, kun Brackets muodostaa yhteyden selaimeesi.
             
-            Aseta osoittimesi nyt yläpuolella olevan <!-- <img> --> -tagin päälle. Huomaa sininen korostus, joka ilmestyy kuvan
+            Aseta kohdistin nyt yläpuolella olevaan <!-- <img> --> -tägiin. Huomaa sininen korostus, joka ilmestyy kuvan
             ympärille Chromessa. Käytä seuraavaksi <kbd>Cmd/Ctrl + E</kbd> -näppäinyhdistelmää avataksesi määritellyt
-            CSS-säännöt. Yritä muuttaa reunaviivan kokoa arvosta 10px arvoon 20px tai vaihtaa taustaväriä arvosta ”transparent”
-            arvoon ”hotpink”. Jos Brackets ja selaimesi ovat näytöllä vierekkäin, näet muutosten heijastuvan välittömästi
-            selaimeesi. Siistiä, eikö?
+            CSS-säännöt. Yritä muuttaa reunaviivan kokoa arvosta 10px arvoon 20px tai vaihtaa taustaväriä arvosta
+            ”transparent” arvoon ”hotpink”. Jos Brackets ja selain ovat näytölläsi vierekkäin, näet muutosten
+            heijastuvan välittömästi selaimeesi. Siistiä, eikö?
         </samp>
         
         <p class="note">
-            Tällä hetkellä Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin jo nykyisessä versiossa muutokset
-            JavaScript-tiedostoihin päivitetään automaattisesti tallentaessasi tiedoston. Työskentelemme tällä hetkellä
-            esikatselun tuomiseksi JavaScriptille. Esikatselu on myös mahdollista vain Google Chromella, mutta toivomme
-            pystyvämme tuomaan tämän toiminnon kaikille merkittäville selaimille tulevaisuudessa.
+            Nykyisellään Brackets tukee esikatselua vain HTML:lle ja CSS:lle. Kuitenkin jo nykyisessä versiossa
+            muutokset JavaScript-tiedostoihin päivitetään automaattisesti tallentaessasi tiedoston. Työskentelemme
+            parhaillaan esikatselun tuomiseksi JavaScriptille. Esikatselu on myös mahdollista vain Google Chromella,
+            mutta toivomme pystyvämme tuomaan tämän toiminnon kaikille pääselaimille tulevaisuudessa.
         </p>
         
         <h3>Pikanäkymä</h3>
         <p>
-            Niille meistä, joilla ei ole vielä muistissa värien vastineita HEX- tai RGB-arvoille, Brackets tekee nopeaksi ja
-            helpoksi nähdä täsmälleen, mitä väriä ollaan käyttämässä. Sekä CSS:ssä että HTML:ssä osoita yksinkertaisesti mitä
-            tahansa väriarvoa tai liukuväriä ja Brackets näyttää esikatselun tästä (liuku)väristä automaattisesti. Sama pätee
-            kuviin: yksinkertaisesti osoita kuvalinkkiä Brackets-editorissa ja se näyttää pikkukuvaesikatselun tästä kuvasta.
+            Niille meistä, jotka eivät vielä osaa ulkoa värien vastineita HEX- tai RGB-arvoille, Brackets tekee nopeaksi
+            ja helpoksi nähdä täsmälleen, mitä väriä on käyttämässä. Kerta kaikkiaan osoita mitä tahansa väriarvoa tai
+            liukuväriä joko CSS:ssä tai HTML:ssä, ja Brackets näyttää esikatselun tästä väristä tai liukuväristä
+            automaattisesti. Sama tulee kuviin: osoita yksinkertaisesti kuvalinkkiä Brackets-editorissa ja se näyttää
+            pienen esikatselukuvan tästä kuvasta.
         </p>
         
         <samp>
-            Kokeillaksesi pikanäkymää itse aseta osoittimesi tämän dokumentin yläosassa olevan <!-- <body> --> -tagin päälle ja
-            paina <kbd>Cmd/Ctrl + E</kbd> avataksesi CSS-pikaeditorin. Nyt yksinkertaisesti osoita mitä tahansa väriarvoista
-            CSS:n yhteydessä. Voit myös nähdä sen toiminnassa liukuvärin kohdalla avaamalla CSS-pikaeditorin <!-- <html> -->
-            -tagille ja osoittamalla mitä tahansa taustakuvan arvoista. Kokeillaksesi kuvan esikatselua aseta osoittimesi tässä
-            dokumentissa aiemmin esiintyneen kuvankaappauskuvan päälle.
+            Kokeile pikanäkymää itse asettamalla kohdistimesi tämän dokumentin yläosassa sijaitsevaan <!-- <body> -->
+            -tägiin ja painalla <kbd>Cmd/Ctrl + E</kbd> avataksesi CSS-pikaeditorin. Nyt yksinkertaisesti osoita mitä
+            tahansa CSS:n väriarvoista. Voit myös nähdä sen toiminnassa liukuväreissä avaamalla CSS-pikaeditorin
+            <!-- <html> --> -tägille ja osoittamalla mitä tahansa taustakuva-arvoista. Kokeile kuvan esikatselua
+            asettamalla osoittimesi tässä dokumentissa aiemmin esiintyneen kuvankaappauskuvan päälle.
         </samp>
         
         <h3>Tarvitsetko jotakin muuta? Kokeile laajennusta!</h3>
         <p>
-            Sen kaiken hyvän lisäksi, mitä Bracketsiin on rakennettu, suuri ja kasvava laajennuskehittäjien yhteisömme on tehnyt
-            yli sata laajennusta, jotka lisäävät hyödyllisiä toimintoja. Jos on jotakin, mitä tarvitset ja jota Brackets ei
-            tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selataksesi tai hakeaksesi saatavilla
-            olevien laajennusten luetteloa valitse <strong>Tiedosto &gt; Laajennusten hallinta</strong> ja napsauta ”Saatavilla”-
-            välilehteä. Kun löydät haluamasi laajennuksen, napsauta vain ”Asenna”-painiketta sen vierestä.
-        </p>
-        
-        <h3>Projektit Bracketsissa</h3>
-        <p>
-            Muokataksesi omaa koodiasi Bracketsia käyttäen voit vain avata tiedostosi sisältävän kansion. Brackets pitää nykyistä
-            avointa kansiota ”projektina”; Ominaisuudet, kuten koodivihjeet, esikatselu ja pikamuokkaus käyttävät vain tällä
-            hetkellä avoinna olevan kansion tiedostoja.
+            Sen kaiken hyvän lisäksi, jota Bracketsiin on rakennettu, on suuri ja kasvava laajennuskehittäjien
+            yhteisömme tehnyt satoja laajennuksia, jotka lisäävät hyödyllisiä toimintoja. Jos on jotakin, jota tarvitset
+            ja jota Brackets ei tarjoa, enemmän kuin todennäköisesti joku on tehnyt laajennuksen siihen. Selaa
+            saatavilla olevien laajennusten luetteloa tai hae siitä valitsemalla <strong>Tiedosto &gt; Laajennusten
+            hallinta</strong> ja napsauttamalla ”Saatavilla”-välilehteä. Kun löydät haluamasi laajennuksen, napsauta
+            vain ”Asenna”-painiketta sen vierestä.
         </p>
         
-        <samp>
-            Heti kun olet valmis luopumaan tästä näyteprojektista ja muokkaamaan omaa koodiasi, voit käyttää vasemman sivupalkin
-            pudotusvalikkoa kansioiden vaihtamiseen. Juuri nyt pudotusvalikossa lukee ”Aloitus”. Tämä on tiedoston, jota katsot
-            juuri nyt, sisältävä kansio. Napsauta pudotusvalikkoa ja valitse ”Avaa kansio…” avataksesi oman kansiosi. Voit
-            käyttää pudotusvalikkoa myös myöhemmin vaihtaaksesi takaisin kansioihin, jotka olet avannut aiemmin, sisältäen tämän
-            näyteprojektin.
-        </samp>
-        
         <!--
-            ANNA MEIDÄN TIETÄÄ, MITÄ AJATTELET
+            KERRO MEILLE, MITÄ AJATTELET
         -->
         <h2>Lähde mukaan</h2>
         <p>
             Brackets on avoimen lähdekoodin projekti. Web-kehittäjät ympäri maailmaa osallistuvat paremman koodieditorin
-            kehittämiseen. Paljon enemmän rakennetaan laajennuksia, jotka laajentavat Bracketsin kykyjä. Anna meidän tietää,
+            kehittämiseen. Vieläkin enemmän kehitetään laajennuksia, jotka laajentavat Bracketsin kykyjä. Kerro meille,
             mitä ajattelet. Jaa ideasi tai osallistu suoraan projektiin.
         </p>
         <ul>
@@ -167,10 +176,10 @@ <h2>Lähde mukaan</h2>
             <li><a href="http://blog.brackets.io">Brackets-tiimin blogi</a></li>
             <li><a href="https://github.com/adobe/brackets">Brackets GitHubissa</a></li>
             <li><a href="https://brackets-registry.aboutweb.com">Brackets-laajennusten rekisteri</a></li>
-            <li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
+            <li><a href="https://github.com/adobe/brackets/wiki">Brackets-wiki</a></li>
             <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets-kehittäjien postituslista</a></li>
             <li><a href="https://twitter.com/brackets">@brackets Twitterissä</a></li>
-            <li>Chattaa Brackets-kehittäjien kanssa IRC:ssä: <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets Freenode-palvelussa</a></li>
+            <li>Rupattele Brackets-kehittäjien kanssa IRC:ssä: <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets Freenodessa</a></li>
         </ul>
         
     </body>
diff --git a/samples/fr/Premiers pas/index.html b/samples/fr/Premiers pas/index.html
index 287b2ff2a88..fac3d38fd36 100644
--- a/samples/fr/Premiers pas/index.html	
+++ b/samples/fr/Premiers pas/index.html	
@@ -18,7 +18,7 @@ <h2>Suivez le guide !</h2>
         -->
         
         <p>
-            Bienvenue dans cette version préliminaire de Brackets, le nouvel éditeur open source adapté au Web de demain. Nous attachons une grande importance aux normes et cherchons à créer des outils plus adaptés aux langages JavaScript, HTML et CSS ainsi qu’aux autres technologies du Web ouvert. Il s’agit là de notre modeste première contribution.
+            Bienvenue dans Brackets, un éditeur de code open source qui comprend et facilite la conception de sites web. Il s’agit d’un éditeur à la fois léger et puissant qui intègre des outils visuels directement dans son interface, de sorte que chaque opération peut devenir un véritable jeu d’enfant.
         </p>
         
         <!--
@@ -26,14 +26,24 @@ <h2>Suivez le guide !</h2>
         -->
         <p>
             <em>Brackets se distingue des éditeurs traditionnels,</em>
-            notamment par son écriture en JavaScript, HTML et CSS.
-            Autrement dit, la plupart des utilisateurs de Brackets disposent des capacités nécessaires pour modifier et étendre l’éditeur.
-            En fait, nous utilisons Brackets tous les jours pour son propre développement. Brackets propose aussi des fonctionnalités uniques, comme l’Edition rapide ou l’Aperçu en direct, que vous ne trouverez pas forcément dans d’autres éditeurs.
-            Pour en savoir plus sur l’utilisation de ces fonctionnalités, poursuivez votre lecture.
+            notamment par ses fonctionnalités uniques, comme l’Edition rapide ou l’Aperçu en direct, que vous ne trouverez pas forcément dans d’autres éditeurs. Cerise sur le gâteau, Brackets est écrit en JavaScript, en HTML et en CSS. Autrement dit, la grande majorité des utilisateurs de Brackets est capable de modifier et d’étendre l’éditeur. En fait, nous utilisons Brackets tous les jours pour son propre développement. Pour en savoir plus sur l’utilisation de ses fonctionnalités centrales, poursuivez votre lecture.
+            
         </p>
         
+        <!--
+            GET STARTED WITH YOUR OWN FILES
+        -->
+        
+        <h3>Projets Brackets</h3>
+        <p>
+            Pour éditer votre propre code à l’aide de l’application Brackets, il vous suffit d’ouvrir le dossier contenant vos fichiers.
+            Brackets traite le dossier ouvert en tant que « projet » ; ainsi, les fonctionnalités Indicateurs de code, Aperçu en direct ou encore Edition rapide s’appliquent uniquement aux fichiers du dossier ouvert.
+        </p>
         
-        <h2>Nous testons actuellement quelques nouveautés.</h2>
+        <samp>
+            Si vous vous sentez prêt à franchir le cap et à éditer votre propre code, fermez cet exemple de projet et utilisez la liste déroulante de la barre latérale de gauche pour changer de dossier. Pour le moment, la liste déroulante s’intitule « Prise en main », ce qui correspond au dossier dans lequel se trouve le fichier fictif sur lequel vous vous exercez actuellement. Cliquez sur la liste déroulante et sélectionnez « Ouvrir un dossier… » pour accéder à votre propre dossier.
+            Par la suite, vous pourrez tout à fait revenir aux dossiers précédemment ouverts, y compris cet exemple de projet, grâce à cette même liste déroulante.
+        </samp>
         
         <!--
             THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
@@ -41,13 +51,13 @@ <h2>Nous testons actuellement quelques nouveautés.</h2>
         <h3>Edition rapide des codes CSS et JavaScript</h3>
         <p>
             Vous ne risquez plus de perdre de vue le contexte en passant d’un document à un autre. Lorsque vous modifiez un fichier HTML, utilisez le raccourci <kbd>Cmd/Ctrl + E</kbd> pour ouvrir un éditeur rapide intégré qui affiche l’ensemble du code CSS associé.
-            Peaufinez votre CSS, puis appuyez sur <kbd>Echap</kbd> pour revenir au format HTML, ou laissez simplement les règles CSS ouvertes afin qu’elles deviennent partie intégrante de l’éditeur HTML. Si vous appuyez sur <kbd>Echap</kbd> en dehors d’un éditeur intégré rapide, tous les éditeurs sont réduits.
+            Peaufinez votre CSS, puis appuyez sur <kbd>Echap</kbd> pour revenir au format HTML, ou laissez simplement les règles CSS ouvertes afin qu’elles deviennent partie intégrante de l’éditeur HTML. Si vous appuyez sur <kbd>Echap</kbd> en dehors d’un éditeur intégré rapide, tous les éditeurs sont réduits. La fonction Edition rapide détecte également les règles définies dans les fichiers LESS et SCSS, y compris les règles imbriquées.
         </p>
-        
+
         <samp>
-            Une petite démonstration ? Placez le curseur de la souris sur la balise <!-- <samp> --> et tapez <kbd>Cmd/Ctrl + E</kbd>. Un éditeur rapide CSS apparaît en superposition, avec la règle CSS applicable. La fonction Edition rapide est également utilisable pour les attributs de classe et d’ID.
+            Une petite démonstration ? Placez le curseur de la souris sur la balise <!-- <samp> --> et tapez <kbd>Cmd/Ctrl + E</kbd>. Un éditeur rapide CSS apparaît en superposition, avec la règle CSS applicable. La fonction Edition rapide est également utilisable pour les attributs de classe et d’ID. Vous pouvez aussi vous en servir sur vos fichiers LESS et SCSS.
             
-            Vous pouvez créer de nouvelles règles en procédant de la même manière. Cliquez sur l’une des balises <!-- <p> --> en haut du document et appuyez sur <kbd>Cmd/Ctrl + E</kbd>. Il n’existe aucune règle associée pour le moment, mais vous pouvez cliquer sur le bouton Nouvelle règle afin d’ajouter une règle pour <!-- <p> -->.
+            Vous pouvez créer de nouvelles règles en procédant de la même manière. Cliquez sur l’une des balises <!-- <p> --> en haut du document et appuyez sur <kbd>Cmd/Ctrl + E&lt;/kbd>. Il n’existe aucune règle associée pour le moment, mais vous pouvez cliquer sur le bouton Nouvelle règle afin d’ajouter une règle pour <!-- <p> -->.
         </samp>
         
         <a href="screenshots/quick-edit.png">
@@ -55,7 +65,9 @@ <h3>Edition rapide des codes CSS et JavaScript</h3>
         </a>
         
         <p>
-            Vous pouvez utiliser le même raccourci pour éditer d’autres éléments, comme les fonctions dans JavaScript, les couleurs ou les fonctions de temporisation d’animation ; nous ajoutons sans cesse des nouveautés.
+            Vous pouvez utiliser le même raccourci pour éditer d’autres éléments, comme les fonctions dans JavaScript, les couleurs ou les fonctions de temporisation d’animation ; nous ajoutons sans cesse des nouveautés. 
+        </p>
+        <p>
             Les éditeurs intégrés ne peuvent pas encore être imbriqués. Vous ne pouvez donc utiliser la fonction Edition rapide que lorsque le curseur se trouve dans un éditeur « plein écran ».
         </p>
         
@@ -80,7 +92,7 @@ <h3>Mise en surbrillance en direct des éléments HTML et règles CSS</h3>
             Si vous avez installé Google Chrome, vous pouvez dès maintenant tester cette fonctionnalité. Cliquez sur l’icône représentant un éclair en haut à droite de la fenêtre Brackets ou utilisez la combinaison <kbd>Cmd/Ctrl + Alt + P</kbd>. Lorsque le module Aperçu en direct est activé sur un document HTML, tous les documents CSS associés peuvent être modifiés en temps réel.
             L’icône passe du gris au doré une fois que Brackets a établi la connexion à votre navigateur.
             
-            Placez maintenant le curseur de la souris sur la balise <!-- <img> -->. Vous constatez qu’une surbrillance bleue apparaît tout autour de l’image dans Chrome. Utilisez ensuite la combinaison <kbd>Cmd/Ctrl + E</kbd> pour ouvrir les règles CSS définies.
+            Placez maintenant le curseur sur la balise <!-- <img> -->. Vous constatez qu’une surbrillance bleue apparaît tout autour de l’image dans Chrome. Utilisez ensuite la combinaison <kbd>Cmd/Ctrl + E</kbd> pour ouvrir les règles CSS définies.
             Essayez de faire passer l’épaisseur de la bordure de 10 px à 20 px, ou de remplacer la couleur d’arrière-plan « transparent » par « hotpink ». Si Brackets et votre navigateur s’exécutent côte à côte, ce dernier affiche immédiatement les modifications. Plutôt sympathique, non ?
         </samp>
         
@@ -99,19 +111,9 @@ <h3>Affichage rapide</h3>
         
         <h3>Vous en voulez plus ? Jetez un œil du côté des extensions !</h3>
         <p>
-            En plus de tous les atouts déjà intégrés à Brackets, notre communauté de développeurs, qui ne cesse de s’agrandir, a mis au point plus d’une centaine d’extensions qui offrent des fonctionnalités très pratiques. Si vous avez besoin d’une fonction qui ne se trouve pas dans Brackets, il est fort probable qu’un utilisateur ait créé l’extension qu’il vous faut. Pour parcourir la liste des extensions disponibles ou en rechercher une en particulier, cliquez sur <strong>Fichier &gt; Extension Manager</strong>, puis ouvrez l’onglet « Disponible ». Lorsque vous trouvez l’extension qui vous convient, il vous suffit de cliquer sur le bouton Installer correspondant.
-        </p>
-        
-        <h3>Projets Brackets</h3>
-        <p>
-            Pour éditer votre propre code à l’aide de l’application Brackets, il vous suffit d’ouvrir le dossier contenant vos fichiers. Brackets traite le dossier ouvert en tant que « projet » ; ainsi, les fonctionnalités Indicateurs de code, Aperçu en direct ou encore Edition rapide s’appliquent uniquement aux fichiers du dossier ouvert.
+            En plus de tous les atouts déjà intégrés à Brackets, notre communauté de développeurs, qui ne cesse de s’agrandir, a mis au point des centaines d’extensions qui offrent des fonctionnalités très pratiques. Si vous avez besoin d’une fonction qui ne se trouve pas dans Brackets, il est fort probable qu’un utilisateur ait créé l’extension qu’il vous faut. Pour parcourir la liste des extensions disponibles ou en rechercher une en particulier, cliquez sur <strong>Fichier &gt; Extension Manager</strong>, puis ouvrez l’onglet « Disponible ». Lorsque vous trouvez l’extension qui vous convient, il vous suffit de cliquer sur le bouton Installer correspondant.
         </p>
         
-        <samp>
-            Si vous vous sentez prêt à franchir le cap et à éditer votre propre code, fermez cet exemple de projet et utilisez la liste déroulante de la barre latérale de gauche pour changer de dossier. Pour le moment, la liste déroulante s’intitule « Prise en main », ce qui correspond au dossier dans lequel se trouve le fichier fictif sur lequel vous vous exercez actuellement. Cliquez sur la liste déroulante et sélectionnez « Ouvrir un dossier… » pour accéder à votre propre dossier.
-            Par la suite, vous pourrez tout à fait revenir aux dossiers précédemment ouverts, y compris cet exemple de projet, grâce à cette même liste déroulante.
-        </samp>
-        
         <!--
             LET US KNOW WHAT YOU THINK
         -->
@@ -127,8 +129,8 @@ <h2>Participer</h2>
             <li><a href="https://brackets-registry.aboutweb.com">Registre des extensions Brackets</a></li>
             <li><a href="https://github.com/adobe/brackets/wiki">Wiki Brackets</a></li>
             <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Liste de diffusion des développeurs Brackets</a></li>
-            <li><a href="https://twitter.com/brackets">@brackets sur Twitter</a></li>
-            <li>Discutez avec les développeurs de Brackets via IRC sur le canal <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets du réseau Freenode</a>.</li>
+            <li><a href="https://twitter.com/brackets">@brackets on Twitter</a></li>
+            <li>Discutez avec les développeurs de Brackets via IRC sur <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets on Freenode</a></li>
         </ul>
         
     </body>
diff --git a/samples/ja/Getting Started/index.html b/samples/ja/Getting Started/index.html
index bfb99d8930c..a00dc9ee238 100644
--- a/samples/ja/Getting Started/index.html	
+++ b/samples/ja/Getting Started/index.html	
@@ -18,7 +18,7 @@ <h2>まずはこのガイドからスタート</h2>
         -->
         
         <p>
-            プレビュー版 Brackets に関心をお持ちいただきまして、誠にありがとうございます。Brackets は次世代の Web に向けて新開発されたオープンソースのエディターです。アドビでは標準規格を重視しており、JavaScript、HTML、CSS 用の優れたツールや、それに関連するオープンな Web テクノロジーの構築を目指しています。このプレビュー版 Brackets は、それに向けてのささやかな第一歩といえます。
+            Web デザインを認識する最新のオープンソースエディター、Brackets をご利用いただき、ありがとうございます。軽量でありながらパワフルなコードエディターでのビジュアルツールとエディターとの融合により、必要なときに必要なだけのサポートを利用することができます。
         </p>
         
         <!--
@@ -26,28 +26,38 @@ <h2>まずはこのガイドからスタート</h2>
         -->
         <p>
             <em>Brackets は、新しいタイプのエディターです。</em>
-            これまでのエディターと大きく異なる点は、JavaScript、HTML、CSS で記述されているということです。
-            つまり、ほとんどの Brackets ユーザーは、習得済みのスキルを使って、このエディターそのものを変更したり拡張したりできるということになります。
-            実際、アドビ社内の開発チームも、毎日 Brackets を使用して Brackets の構築を進めています。また、Brackets にはクイック編集やライブプレビューなど、他のエディターにはないユニークな機能が備わっています。
-            こうした機能の使用方法について、下記で詳しくご説明します。
+            Brackets にはクイック編集やライブプレビューなど、他のエディターにはないユニークな機能が備わっています。Brackets は JavaScript、HTML および CSS で記述されています。つまり、ほとんどの Brackets ユーザーは、習得済みのスキルを使って、このエディターそのものを変更したり拡張したりできるということになります。実際、アドビ社内の開発チームも、毎日 Brackets を使用して Brackets の構築を進めています。主要機能の使用方法について、下記で詳しくご説明します。
+            
         </p>
         
+        <!--
+            GET STARTED WITH YOUR OWN FILES
+        -->
+        
+        <h3>Brackets のプロジェクト</h3>
+        <p>
+            Brackets を使用して独自のコードを記述するには、自分のファイルを格納したフォルダーを開きます。
+            現時点で開いているフォルダーが Brackets によって「プロジェクト」として処理され、そのフォルダー内のファイルのみがコードヒント、ライブプレビュー、クイック編集などの機能で使用されます。
+        </p>
         
-        <h2>新しいアイデアを実装</h2>
+        <samp>
+            このサンプルプロジェクトを終了し、コードを編集する準備ができたら、左側のサイドバーのドロップダウンを使用してフォルダーを切り替えます。この時点で、ドロップダウンには「はじめに」が表示され、現在表示されているファイルが格納されたフォルダーが選択されています。ドロップダウンで「フォルダーを開く...」を選択して、使用するフォルダーを開きます。
+            ドロップダウンを使用して、このサンプルプロジェクトが含まれるフォルダーなど、以前に開いたフォルダーに切り替えることもできます。
+        </samp>
         
         <!--
             THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
         -->
         <h3>CSS と JavaScript のクイック編集</h3>
         <p>
-            いくつものドキュメントを行ったり来たりして、コードの文脈を見失うようなことはもうありません。HTML ファイルの編集中にショートカットの <kbd>Command + E キーまたは Ctrl + E キー</kbd>を使用すると、クイック編集用のインラインエディターが開き、関連する CSS がすべて表示されます。
-            ここで CSS を調整して <kbd>Esc キー</kbd>を押せば、HTML の編集に戻ることができます。また、CSS ルールを開いたままにしておけば、HTML エディターの一部として使用できます。カーソルがクイック編集用インラインエディターの外にあるときに <kbd>Esc キー</kbd>を押すと、CSS ルールはすべて折りたたまれます。
+            いくつものドキュメントを行ったり来たりして、コードの文脈を見失うようなことはもうありません。HTML ファイルの編集中にショートカットの <kbd>Command+E キーまたは Ctrl+E キー</kbd>を使用すると、クイック編集用のインラインエディターが開き、関連する CSS がすべて表示されます。
+            ここで CSS を調整して <kbd>Esc キー</kbd>を押せば、HTML の編集に戻ることができます。また、CSS ルールを開いたままにしておけば、HTML エディターの一部として使用できます。カーソルがクイック編集用インラインエディターの外にあるときに <kbd>Esc キー</kbd>を押すと、CSS ルールはすべて折りたたまれます。また、クイック編集には、ネストされたルールなど、LESS および SCSS ファイルで定義されたルールも備わっています。
         </p>
-        
+
         <samp>
-            この機能を実際に使用するには、上部の <!-- <samp> --> タグにカーソルを合わせた状態で <kbd>Command + E キーまたは Ctrl + E キー</kbd>を押します。すると、上部に CSS クイック編集エディターが開き、適用する CSS ルールが表示されます。クイック編集は、クラスおよび id 属性にも使用できます。
+            この機能を実際に使用するには、上部の <!-- <samp> --> タグにカーソルを合わせた状態で <kbd>Command+E キーまたは Ctrl+E キー</kbd>を押します。すると、上部に CSS クイック編集エディターが開き、適用する CSS ルールが表示されます。クイック編集は、クラスおよび id 属性にも使用できます。また、クイック編集は LESS および SCSS ファイルでも使用できます。
             
-            新規ルールも同じように作成できます。上部の <!-- <p> --> タグのいずれかをクリックし、<kbd>Command + E キーまたは Ctrl + E キー</kbd>を押します。そのとき既存のルールがなければ、「新規ルール」ボタンをクリックして <!-- <p> --> に新規ルールを追加できます。
+            新規ルールも同じように作成できます。上部の <!-- <p> --> タグのいずれかをクリックし、<kbd>Command+E キーまたは Ctrl+E キー&lt;/kbd>を押します。そのとき既存のルールがなければ、「新規ルール」ボタンをクリックして <!-- <p> --> に新規ルールを追加できます。
         </samp>
         
         <a href="screenshots/quick-edit.png">
@@ -56,6 +66,8 @@ <h3>CSS と JavaScript のクイック編集</h3>
         
         <p>
             同じショートカットを使用して、JavaScript の関数、カラー、アニメーションタイミング機能など、他のエレメントも編集できます。アドビでは、この機能を継続して強化していきます。
+        </p>
+        <p>
             現時点ではインラインエディターをネストすることはできませんので、クイック編集を使用できるのは、カーソルが「フルサイズ」のエディター内にある場合に限られています。
         </p>
         
@@ -77,10 +89,10 @@ <h3>HTML エレメントと CSS ルールのライブハイライト</h3>
         </p>
         
         <samp>
-            お使いのコンピューターに Google Chrome がインストールされていれば、これを実際にお試しいただくことができます。Brackets ウィンドウの右上にある稲妻アイコンをクリックするか、<kbd>Command + Alt + P キーまたは Ctrl + Alt + P キー</kbd>を押します。HTML ドキュメントでライブプレビューが有効になっていれば、リンクされている CSS ドキュメントはすべてリアルタイムで編集可能です。
+            お使いのコンピューターに Google Chrome がインストールされていれば、これを実際にお試しいただくことができます。Brackets ウィンドウの右上にある稲妻アイコンをクリックするか、<kbd>Command+Alt+P キーまたは Ctrl+Alt+P キー</kbd>を押します。HTML ドキュメントでライブプレビューが有効になっていれば、リンクされている CSS ドキュメントはすべてリアルタイムで編集可能です。
             Brackets でローカルブラウザーとの接続が確立されると、アイコンがグレーから金色に変わります。
             
-            この状態で、上部の <!-- <img> --> タグにカーソルを合わせます。すると、Chrome 上で画像の周囲が青くハイライト表示されます。次に、<kbd>Command + E キーまたは Ctrl + E キー</kbd>を押して、定義済みの CSS ルールを開きます。
+            この状態で、上部の <!-- <img> --> タグにカーソルを合わせます。すると、Chrome 上で画像の周囲が青くハイライト表示されます。次に、<kbd>Command+E キーまたは Ctrl+E キー</kbd>を押して、定義済みの CSS ルールを開きます。
             枠のサイズを 10 ピクセルから 20 ピクセルに変更するか、背景色を「透明」から「ホットピンク」に変更してみてください。Brackets とブラウザーが同時に動作していれば、この変更内容が瞬時にブラウザーの表示に反映されるのを確認できます。
         </samp>
         
@@ -94,30 +106,20 @@ <h3>クイックビュー</h3>
         </p>
         
         <samp>
-            クイックビューを実際に使ってみるには、このドキュメントの上部にある <!-- <body> --> タグにカーソルを合わせます。その状態で <kbd>Command + E キーまたは Ctrl + E キー</kbd>を押すと、CSS クイック編集エディターが開きます。あとは、CSS 内でカラー値のどれかにカーソルを重ねるだけです。また、グラデーションに対してこの機能を使ってみるには、<!-- <html> --> タグで CSS クイック編集エディターを開き、背景画像の値にカーソルを重ねます。画像のプレビューを試す場合は、このドキュメントの前半に掲載されているスクリーンショット画像にカーソルを重ねてみてください。
+            クイックビューを実際に使ってみるには、このドキュメントの上部にある <!-- <body> --> タグにカーソルを合わせます。その状態で <kbd>Command+E キーまたは Ctrl+E キー</kbd>を押すと、CSS クイック編集エディターが開きます。あとは、CSS 内でカラー値のどれかにカーソルを重ねるだけです。また、グラデーションに対してこの機能を使ってみるには、<!-- <html> --> タグで CSS クイック編集エディターを開き、背景画像の値にカーソルを重ねます。画像のプレビューを試す場合は、このドキュメントの前半に掲載されているスクリーンショット画像にカーソルを重ねてみてください。
         </samp>
         
         <h3>拡張機能でさらに補強</h3>
         <p>
-            Brackets に組み込まれた優れた機能に加え、拡大を続ける大規模なコミュニティで、デベロッパーらが 100 種類以上の便利な拡張機能を構築しています。Brackets にない機能を必要としたとき、ほぼ確実に構築済みの拡張機能が見つかります。使用可能な拡張機能の一覧を参照または検索するには、<strong>ファイル／Extension Manager</strong> を選択し、「入手可能」タブをクリックします。使用する拡張機能が見つかったら、その横の「インストール」ボタンをクリックします。
-        </p>
-        
-        <h3>Brackets のプロジェクト</h3>
-        <p>
-            Brackets を使用して独自のコードを記述するには、自分のファイルを格納したフォルダーを開きます。現時点で開いているフォルダーが Brackets によって「プロジェクト」として処理され、そのフォルダー内のファイルのみがコードヒント、ライブプレビュー、クイック編集などの機能で使用されます。
+            Brackets に組み込まれた優れた機能に加え、拡大を続ける大規模なコミュニティで、デベロッパーらが何百もの便利な拡張機能を構築しています。Brackets にない機能を必要としたとき、ほぼ確実に構築済みの拡張機能が見つかります。使用可能な拡張機能の一覧を参照または検索するには、<strong>ファイル／Extension Manager</strong> を選択し、「入手可能」タブをクリックします。使用する拡張機能が見つかったら、その横の「インストール」ボタンをクリックします。
         </p>
         
-        <samp>
-            このサンプルプロジェクトを終了し、コードを編集する準備ができたら、左側のサイドバーのドロップダウンを使用してフォルダーを切り替えます。この時点で、ドロップダウンには「はじめに」が表示され、現在表示されているファイルが格納されたフォルダーが選択されています。ドロップダウンで「フォルダーを開く...」を選択して、使用するフォルダーを開きます。
-            ドロップダウンを使用して、このサンプルプロジェクトが含まれるフォルダーなど、以前に開いたフォルダーに切り替えることもできます。
-        </samp>
-        
         <!--
             LET US KNOW WHAT YOU THINK
         -->
         <h2>Brackets プロジェクトに参加</h2>
         <p>
-            Brackets はオープンソースのプロジェクトです。世界中の Web デベロッパーが、優れたコードエディターの構築に貢献しています。さらに多くの人々が、Brackets の拡張機能の構築に携わっています。
+            Brackets はオープンソースのプロジェクトです。世界中の Web 開発者が、優れたコードエディターの構築に貢献しています。さらに多くの人々が、Brackets の拡張機能の構築に携わっています。
             ぜひ、このプロジェクトについてご意見・アイデアをお寄せください。プロジェクトへの直接的なご参加もお待ちしております。
         </p>
         <ul>
@@ -127,8 +129,8 @@ <h2>Brackets プロジェクトに参加</h2>
             <li><a href="https://brackets-registry.aboutweb.com">Brackets 拡張機能レジストリ</a></li>
             <li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
             <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets デベロッパーのメーリングリスト</a></li>
-            <li><a href="https://twitter.com/brackets">Twitter @brackets</a></li>
-            <li><a href="http://webchat.freenode.net/?channels=brackets&uio=d4">Freenode の IRC</a> で、Brackets 開発者と #brackets についてチャット</li>
+            <li><a href="https://twitter.com/brackets">@brackets on Twitter</a></li>
+            <li>以下の IRC で、Brackets デベロッパーと Brackets についてチャット：<a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets on Freenode</a></li>
         </ul>
         
     </body>
diff --git a/samples/root/Getting Started/index.html b/samples/root/Getting Started/index.html
index b8bb45fc4ba..f77776d55cb 100644
--- a/samples/root/Getting Started/index.html	
+++ b/samples/root/Getting Started/index.html	
@@ -18,9 +18,9 @@ <h2>This is your guide!</h2>
         -->
         
         <p>
-            Welcome to an early preview of Brackets, a new open-source editor for the next generation of
-            the web. We're big fans of standards and want to build better tooling for JavaScript, HTML and CSS 
-            and related open web technologies. This is our humble beginning.
+            Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight, 
+            yet powerful, code editor that blends visual tools into the editor so you get the right amount of help 
+            when you want it.
         </p>
         
         <!--
@@ -28,15 +28,32 @@ <h2>This is your guide!</h2>
         -->
         <p>
             <em>Brackets is a different type of editor.</em>
-            One notable difference is that this editor is written in JavaScript, HTML and CSS.
-            This means that most of you using Brackets have the skills necessary to modify and extend the editor.
-            In fact, we use Brackets every day to build Brackets. It also has some unique features like Quick Edit,
-            Live Preview and others that you may not find in other editors.
-            To learn more about how to use those features, read on.
+            Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other 
+            editors. And Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets 
+            have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build 
+            Brackets. To learn more about how to use the key features, read on.
+            
         </p>
         
+        <!--
+            GET STARTED WITH YOUR OWN FILES
+        -->
         
-        <h2>We're trying out a few new things</h2>
+        <h3>Projects in Brackets</h3>
+        <p>
+            In order to edit your own code using Brackets, you can just open the folder containing your files.
+            Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
+            Quick Edit only use files within the currently open folder.
+        </p>
+        
+        <samp>
+            Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
+            in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
+            folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…"
+            to open your own folder.
+            You can also use the dropdown later to switch back to folders you've opened previously, including this
+            sample project.
+        </samp>
         
         <!--
             THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
@@ -54,7 +71,8 @@ <h3>Quick Edit for CSS and JavaScript</h3>
         <samp>
             Want to see it in action? Place your cursor on the <!-- <samp> --> tag above and press
             <kbd>Cmd/Ctrl + E</kbd>. You should see a CSS quick editor appear above, showing the CSS rule that
-            applies to it. Quick Edit works in class and id attributes as well.
+            applies to it. Quick Edit works in class and id attributes as well. You can use it with your
+            LESS and SCSS files also.
             
             You can create new rules the same way. Click in one of the <!-- <p> --> tags above and press
             <kbd>Cmd/Ctrl + E</kbd>. There are no rules for it right now, but you can click the New Rule
@@ -137,29 +155,13 @@ <h3>Quick View</h3>
         <h3>Need something else? Try an extension!</h3>
         <p>
             In addition to all the goodness that's built into Brackets, our large and growing community of
-            extension developers has built over a hundred extensions that add useful functionality. If there's
+            extension developers has built hundreds of extensions that add useful functionality. If there's
             something you need that Brackets doesn't offer, more than likely someone has built an extension for
             it. To browse or search the list of available extensions, choose <strong>File &gt; Extension
             Manager</strong> and click on the "Available" tab. When you find an extension you want, just click
             the "Install" button next to it.
         </p>
         
-        <h3>Projects in Brackets</h3>
-        <p>
-            In order to edit your own code using Brackets, you can just open the folder containing your files.
-            Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
-            Quick Edit only use files within the currently open folder.
-        </p>
-        
-        <samp>
-            Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
-            in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
-            folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…"
-            to open your own folder.
-            You can also use the dropdown later to switch back to folders you've opened previously, including this
-            sample project.
-        </samp>
-        
         <!--
             LET US KNOW WHAT YOU THINK
         -->
diff --git a/src/LiveDevelopment/Agents/CSSAgent.js b/src/LiveDevelopment/Agents/CSSAgent.js
index e369eab3c89..eb5dd98a94a 100644
--- a/src/LiveDevelopment/Agents/CSSAgent.js
+++ b/src/LiveDevelopment/Agents/CSSAgent.js
@@ -91,19 +91,6 @@ define(function CSSAgent(require, exports, module) {
         return styles;
     }
 
-    /**
-     * Use styleSheetAdded and styleSheetRemoved events.
-     * Get a list of all loaded stylesheet files by URL.
-     * @deprecated
-     */
-    function getStylesheetURLs() {
-        var styleSheetId, urls = [];
-        for (styleSheetId in _styleSheetDetails) {
-            urls[_styleSheetDetails[styleSheetId].canonicalizedURL] = true;
-        }
-        return _.keys(urls);
-    }
-
     /**
      * Reload a CSS style sheet from a document
      * @param {Document} document
@@ -242,7 +229,6 @@ define(function CSSAgent(require, exports, module) {
     // Export public functions
     exports.enable = enable;
     exports.styleForURL = styleForURL;
-    exports.getStylesheetURLs = getStylesheetURLs;
     exports.reloadCSSForDocument = reloadCSSForDocument;
     exports.clearCSSForDocument = clearCSSForDocument;
     exports.load = load;
diff --git a/src/LiveDevelopment/Agents/GotoAgent.js b/src/LiveDevelopment/Agents/GotoAgent.js
index e5eac3a1347..9107a86d279 100644
--- a/src/LiveDevelopment/Agents/GotoAgent.js
+++ b/src/LiveDevelopment/Agents/GotoAgent.js
@@ -33,14 +33,14 @@ define(function GotoAgent(require, exports, module) {
 
     require("utils/Global");
 
-    var Inspector = require("LiveDevelopment/Inspector/Inspector");
-    var DOMAgent = require("LiveDevelopment/Agents/DOMAgent");
-    var ScriptAgent = require("LiveDevelopment/Agents/ScriptAgent");
-    var RemoteAgent = require("LiveDevelopment/Agents/RemoteAgent");
-
-    var DocumentManager = require("document/DocumentManager");
-    var EditorManager = require("editor/EditorManager");
-    var MainViewManager = require("view/MainViewManager");
+    var Inspector = require("LiveDevelopment/Inspector/Inspector"),
+        DOMAgent = require("LiveDevelopment/Agents/DOMAgent"),
+        ScriptAgent = require("LiveDevelopment/Agents/ScriptAgent"),
+        RemoteAgent = require("LiveDevelopment/Agents/RemoteAgent"),
+        EditorManager = require("editor/EditorManager"),
+        CommandManager = require("command/CommandManager"),
+        Commands = require("command/Commands");
+    
 
     /** Return the URL without the query string
      * @param {string} URL
@@ -168,9 +168,8 @@ define(function GotoAgent(require, exports, module) {
         var path = url.slice(brackets.platform === "win" ? 8 : 7);
         // URL-decode the path ('%20' => ' ')
         path = decodeURI(path);
-        var promise = DocumentManager.getDocumentForPath(path);
+        var promise = CommandManager.execute(Commands.FILE_OPEN, {fullPath: path});
         promise.done(function onDone(doc) {
-            MainViewManager._edit(MainViewManager.ACTIVE_PANE, doc);
             if (location) {
                 openLocation(location, noFlash);
             }
diff --git a/src/LiveDevelopment/Documents/CSSDocument.js b/src/LiveDevelopment/Documents/CSSDocument.js
index 13df847e5ed..86a1ca6095b 100644
--- a/src/LiveDevelopment/Documents/CSSDocument.js
+++ b/src/LiveDevelopment/Documents/CSSDocument.js
@@ -93,16 +93,6 @@ define(function CSSDocumentModule(require, exports, module) {
         return CSSAgent.styleForURL(this.doc.url);
     };
 
-    /**
-     * CSSStyleSheetBody was removed in protocol 1.1. This method is unused in Brackets 36.
-     * Get the browser version of the StyleSheet object
-     * @deprecated
-     * @return {jQuery.promise}
-     */
-    CSSDocument.prototype.getStyleSheetFromBrowser = function getStyleSheetFromBrowser() {
-        return new $.Deferred().reject().promise();
-    };
-
     /**
      * Get the browser version of the source
      * @return {jQuery.promise} Promise resolved with the text content of this CSS document
diff --git a/src/base-config/keyboard.json b/src/base-config/keyboard.json
index 891d30e61d4..eed48add7cc 100644
--- a/src/base-config/keyboard.json
+++ b/src/base-config/keyboard.json
@@ -1,4 +1,4 @@
-{
+{
     "file.newDoc":  [
         "Ctrl-N"
     ],
@@ -161,7 +161,7 @@
             "key": "Ctrl-Shift-H"
         },
         {
-            "key": "Cmd-Alt-Shift-F",
+            "key": "Cmd-Opt-Shift-F",
             "platform": "mac"
         }
     ],
@@ -207,7 +207,7 @@
             "key": "Ctrl-H"
         },
         {
-            "key": "Cmd-Alt-F",
+            "key": "Cmd-Opt-F",
             "platform": "mac"
         }
     ],
@@ -223,17 +223,16 @@
     "view.increaseFontSize":  [
         {
             "key": "Ctrl-=",
-            "displayKey": "Cmd-+"
+            "displayKey": "Ctrl-+"
         },
         {
-            "key": "Ctrl-+",
-            "displayKey": "Cmd-+"
+            "key": "Ctrl-+"
         }
     ],
     "view.decreaseFontSize":  [
         {
             "key": "Ctrl--",
-            "displayKey": "Cmd-−"
+            "displayKey": "Ctrl-−"
         }
     ],
     "view.restoreFontSize":  [
@@ -245,8 +244,8 @@
             "displayKey": "Ctrl-\u2191"
         },
         {
-            "key": "Ctrl-Alt-Up",
-            "displayKey": "Ctrl-Alt-\u2191",
+            "key": "Ctrl-Opt-Up",
+            "displayKey": "Ctrl-Opt-\u2191",
             "platform": "mac"
         }
     ],
@@ -256,8 +255,8 @@
             "displayKey": "Ctrl-\u2193"
         },
         {
-            "key": "Ctrl-Alt-Down",
-            "displayKey": "Ctrl-Alt-\u2193",
+            "key": "Ctrl-Opt-Down",
+            "displayKey": "Ctrl-Opt-\u2193",
             "platform": "mac"
         }
     ],
@@ -333,7 +332,7 @@
         }
     ],
     "navigate.newRule":  [
-        "Cmd-Alt-N"
+        "Ctrl-Alt-N"
     ],
     "file.rename":  [
         "F2"
diff --git a/src/brackets.js b/src/brackets.js
index 094e3902f94..e0d5e728334 100644
--- a/src/brackets.js
+++ b/src/brackets.js
@@ -135,8 +135,6 @@ define(function (require, exports, module) {
     require("extensibility/ExtensionManagerDialog");
     require("editor/ImageViewer");
     
-    // Deprecated modules loaded just so extensions can still use them for now
-    require("utils/CollectionUtils");
     // Compatibility shims for filesystem API migration
     require("project/FileIndexManager");
     require("file/NativeFileSystem");
diff --git a/src/command/Commands.js b/src/command/Commands.js
index 82035ea82a7..87d0466caec 100644
--- a/src/command/Commands.js
+++ b/src/command/Commands.js
@@ -1,16 +1,16 @@
 /*
  * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
- *  
+ *
  * Permission is hereby granted, free of charge, to any person obtaining a
  * copy of this software and associated documentation files (the "Software"), 
  * to deal in the Software without restriction, including without limitation 
  * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
  * and/or sell copies of the Software, and to permit persons to whom the 
  * Software is furnished to do so, subject to the following conditions:
- *  
+ *
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
- *  
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
@@ -18,7 +18,7 @@
  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
  * DEALINGS IN THE SOFTWARE.
- * 
+ *
  */
 
 
@@ -56,6 +56,7 @@ define(function (require, exports, module) {
     exports.FILE_EXTENSION_MANAGER      = "file.extensionManager";      // ExtensionManagerDialog.js    _showDialog()
     exports.FILE_REFRESH                = "file.refresh";               // ProjectManager.js            refreshFileTree()
     exports.FILE_OPEN_PREFERENCES       = "file.openPreferences";       // PreferencesManager.js        _handleOpenPreferences()
+    exports.FILE_OPEN_KEYMAP            = "file.openKeyMap";            // KeyBindingManager.js         _openUserKeyMap()
     
     // File shell callbacks - string must MATCH string in native code (appshell/command_callbacks.h)
     exports.FILE_CLOSE_WINDOW           = "file.close_window";          // DocumentCommandHandlers.js   handleFileCloseWindow()
@@ -175,16 +176,5 @@ define(function (require, exports, module) {
     DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_BY_NAME",    "CMD_WORKINGSET_SORT_BY_NAME");
     DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_BY_TYPE",    "CMD_WORKINGSET_SORT_BY_TYPE");
     DeprecationWarning.deprecateConstant(exports, "SORT_WORKINGSET_AUTO",       "CMD_WORKING_SORT_TOGGLE_AUTO");
-              
-    // DEPRECATED: Edit commands that were moved from the Edit Menu to the Find Menu
-    DeprecationWarning.deprecateConstant(exports, "EDIT_FIND",                  "CMD_FIND");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_FIND_IN_SELECTED",      "CMD_FIND_IN_SELECTED");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_FIND_IN_SUBTREE",       "CMD_FIND_IN_SUBTREE");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_FIND_NEXT",             "CMD_FIND_NEXT");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_FIND_PREVIOUS",         "CMD_FIND_PREVIOUS");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_FIND_ALL_AND_SELECT",   "CMD_FIND_ALL_AND_SELECT");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_ADD_NEXT_MATCH",        "CMD_ADD_NEXT_MATCH");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_SKIP_CURRENT_MATCH",    "CMD_SKIP_CURRENT_MATCH");
-    DeprecationWarning.deprecateConstant(exports, "EDIT_REPLACE",               "CMD_REPLACE");
 });
 
diff --git a/src/command/KeyBindingManager.js b/src/command/KeyBindingManager.js
index d55a81e4d4c..caebbd39c4f 100644
--- a/src/command/KeyBindingManager.js
+++ b/src/command/KeyBindingManager.js
@@ -34,26 +34,81 @@ define(function (require, exports, module) {
 
     require("utils/Global");
 
-    var AppInit        = require("utils/AppInit"),
-        CommandManager = require("command/CommandManager"),
-        KeyEvent       = require("utils/KeyEvent"),
-        Strings        = require("strings");
+    var AppInit             = require("utils/AppInit"),
+        Commands            = require("command/Commands"),
+        CommandManager      = require("command/CommandManager"),
+        DefaultDialogs      = require("widgets/DefaultDialogs"),
+        FileSystem          = require("filesystem/FileSystem"),
+        FileSystemError     = require("filesystem/FileSystemError"),
+        FileUtils           = require("file/FileUtils"),
+        KeyEvent            = require("utils/KeyEvent"),
+        Strings             = require("strings"),
+        StringUtils         = require("utils/StringUtils"),
+        UrlParams           = require("utils/UrlParams").UrlParams,
+        _                   = require("thirdparty/lodash");
 
-    var KeyboardPrefs = JSON.parse(require("text!base-config/keyboard.json"));
+    var KeyboardPrefs       = JSON.parse(require("text!base-config/keyboard.json"));
     
+    var KEYMAP_FILENAME     = "keymap.json",
+        _userKeyMapFilePath = brackets.app.getApplicationSupportDirectory() + "/" + KEYMAP_FILENAME;
+
     /**
      * @private
      * Maps normalized shortcut descriptor to key binding info.
      * @type {!Object.<string, {commandID: string, key: string, displayKey: string}>}
      */
-    var _keyMap = {};
+    var _keyMap            = {},    // For the actual key bindings including user specified ones
+        // For the default factory key bindings, cloned from _keyMap after all extensions are loaded.
+        _defaultKeyMap     = {};
 
+    /**
+     * @typedef {{shortcut: !string,
+     *            commandID: ?string}} UserKeyBinding
+     */
+    
+    /**
+     * @private
+     * Maps shortcut descriptor to a command id.
+     * @type {UserKeyBinding}
+     */
+    var _customKeyMap      = {},
+        _customKeyMapCache = {};
+    
     /**
      * @private
      * Maps commandID to the list of shortcuts that are bound to it.
      * @type {!Object.<string, Array.<{key: string, displayKey: string}>>}
      */
-    var _commandMap = {};
+    var _commandMap  = {},
+        _allCommands = [];
+    
+    /**
+     * @private
+     * Maps key names to the corresponding unicode symols
+     * @type {{key: string, displayKey: string}}
+     */
+    var _displayKeyMap      = { "up":    "\u2191",
+                                "down":  "\u2193",
+                                "left":  "\u2190",
+                                "right": "\u2192",
+                                "-":     "\u2212" };
+
+    var _specialCommands = [Commands.EDIT_UNDO, Commands.EDIT_REDO, Commands.EDIT_SELECT_ALL,
+                            Commands.EDIT_CUT, Commands.EDIT_COPY, Commands.EDIT_PASTE],
+        _reservedShortcuts = ["Ctrl-Z", "Ctrl-Y", "Ctrl-A", "Ctrl-X", "Ctrl-C", "Ctrl-V"],
+        _macReservedShortcuts = ["Cmd-,", "Cmd-H", "Cmd-Alt-H", "Cmd-M", "Cmd-Shift-Z", "Cmd-Q"],
+        _keyNames = ["Up", "Down", "Left", "Right", "Backspace", "Enter", "Space", "Tab"];
+
+    /**
+     * @private
+     * Flag to show key binding errors in the key map file. Default is true and 
+     * it will be set to false when reloading without extensions. This flag is not 
+     * used to suppress errors in loading or parsing the key map file. So if the key 
+     * map file is corrupt, then the error dialog still shows up.
+     *
+     * @type {boolean}
+     */
+    var _showErrors = true;
 
     /**
      * @private
@@ -74,8 +129,12 @@ define(function (require, exports, module) {
      */
     function _reset() {
         _keyMap = {};
+        _defaultKeyMap = {};
+        _customKeyMap = {};
+        _customKeyMapCache = {};
         _commandMap = {};
         _globalKeydownHooks = [];
+        _userKeyMapFilePath = brackets.app.getApplicationSupportDirectory() + "/" + KEYMAP_FILENAME;
     }
 
     /**
@@ -152,11 +211,19 @@ define(function (require, exports, module) {
                     hasCtrl = true;
                 }
             } else if (_compareModifierString("cmd", ele)) {
-                hasCtrl = true;
+                if (brackets.platform === "mac") {
+                    hasCtrl = true;
+                } else {
+                    error = true;
+                }
             } else if (_compareModifierString("alt", ele)) {
                 hasAlt = true;
             } else if (_compareModifierString("opt", ele)) {
-                hasAlt = true;
+                if (brackets.platform === "mac") {
+                    hasAlt = true;
+                } else {
+                    error = true;
+                }
             } else if (_compareModifierString("shift", ele)) {
                 hasShift = true;
             } else if (key.length > 0) {
@@ -183,6 +250,21 @@ define(function (require, exports, module) {
             return null;
         }
         
+        // Ensure that the first letter of the key name is in upper case.
+        // i.e. 'a' => 'A' and 'up' => 'Up'
+        if (/^[a-z]/.test(key)) {
+            key = key.toLowerCase().replace(/(^[a-z])/, function (match, p1) {
+                return p1.toUpperCase();
+            });
+        }
+        
+        // No restriction on single character key yet, but other key names are restricted to either 
+        // Function keys or those listed in _keyNames array.
+        if (key.length > 1 && !/F\d+/.test(key) &&
+                _keyNames.indexOf(key) === -1) {
+            return null;
+        }
+        
         return _buildKeyDescriptor(hasMacCtrl, hasCtrl, hasAlt, hasShift, key);
     }
     
@@ -268,6 +350,8 @@ define(function (require, exports, module) {
             key = "Tab";
         } else if (key === " ") {
             key = "Space";
+        } else if (key === "\b") {
+            key = "Backspace";
         } else {
             key = _mapKeycodeToKey(event.keyCode, key);
         }
@@ -374,6 +458,12 @@ define(function (require, exports, module) {
             targetPlatform = brackets.platform;
         }
         
+        
+        // Skip if the key binding is not for this platform.
+        if (explicitPlatform === "mac" && brackets.platform !== "mac") {
+            return null;
+        }
+
         // if the request does not specify an explicit platform, and we're
         // currently on a mac, then replace Ctrl with Cmd.
         key = (keyBinding.key) || keyBinding;
@@ -383,6 +473,7 @@ define(function (require, exports, module) {
                 keyBinding.displayKey = keyBinding.displayKey.replace("Ctrl", "Cmd");
             }
         }
+        
         normalized = normalizeKeyDescriptorString(key);
         
         // skip if the key binding is invalid 
@@ -504,11 +595,14 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Returns a copy of the keymap
+     * Returns a copy of the current key map. If the optional 'defaults' parameter is true,
+     * then a copy of the default key map is returned.
+     * @param {boolean=} defaults true if the caller wants a copy of the default key map.
+     *                            Otherwise, the current active key map is returned.
      * @return {!Object.<string, {commandID: string, key: string, displayKey: string}>}
      */
-    function getKeymap() {
-        return $.extend({}, _keyMap);
+    function getKeymap(defaults) {
+        return $.extend({}, defaults ? _defaultKeyMap : _keyMap);
     }
 
     /**
@@ -568,7 +662,7 @@ define(function (require, exports, module) {
      *     Returns record(s) for valid key binding(s)
      */
     function addBinding(command, keyBindings, platform) {
-        var commandID           = "",
+        var commandID = "",
             results;
         
         if (!command) {
@@ -719,10 +813,443 @@ define(function (require, exports, module) {
             (brackets.platform !== "win");
     });
     
+    /**
+     * @private
+     * Displays an error dialog and also opens the user key map file for editing only if 
+     * the error is not the loading file error.
+     *
+     * @param {?string} err Error type returned from JSON parser or open file operation
+     * @param {string=} message Error message to be displayed in the dialog
+     */
+    function _showErrorsAndOpenKeyMap(err, message) {
+        // Asynchronously loading Dialogs module to avoid the circular dependency
+        require(["widgets/Dialogs"], function (Dialogs) {
+            var errorMessage = Strings.ERROR_KEYMAP_CORRUPT;
+            
+            if (err === FileSystemError.UNSUPPORTED_ENCODING) {
+                errorMessage = Strings.ERROR_LOADING_KEYMAP;
+            } else if (message) {
+                errorMessage = message;
+            }
+            
+            Dialogs.showModalDialog(
+                DefaultDialogs.DIALOG_ID_ERROR,
+                Strings.ERROR_KEYMAP_TITLE,
+                errorMessage
+            )
+                .done(function () {
+                    if (err !== FileSystemError.UNSUPPORTED_ENCODING) {
+                        CommandManager.execute(Commands.FILE_OPEN_KEYMAP);
+                    }
+                });
+        });
+    }
+    
+    /**
+     * @private
+     *
+     * Checks whether the given command ID is a special command that the user can't bind 
+     * to another shortcut.
+     * @param {!string} commandID A string referring to a specific command
+     * @return {boolean} true if normalizedKey is a special command, false otherwise.
+     */
+    function _isSpecialCommand(commandID) {
+        if (brackets.platform === "mac" && commandID === "file.quit") {
+            return true;
+        }
+        
+        return (_specialCommands.indexOf(commandID) > -1);
+    }
+    
+    /**
+     * @private
+     *
+     * Checks whether the given key combination is a shortcut of a special command
+     * or a Mac system command that the user can't reassign to another command.
+     * @param {!string} normalizedKey A key combination string used for a keyboard shortcut
+     * @return {boolean} true if normalizedKey is a restricted shortcut, false otherwise.
+     */
+    function _isReservedShortcuts(normalizedKey) {
+        if (!normalizedKey) {
+            return false;
+        }
+        
+        if (_reservedShortcuts.indexOf(normalizedKey) > -1 ||
+                _reservedShortcuts.indexOf(normalizedKey.replace("Cmd", "Ctrl")) > -1) {
+            return true;
+        }
+        
+        if (brackets.platform === "mac" && _macReservedShortcuts.indexOf(normalizedKey) > -1) {
+            return true;
+        }
+        
+        return false;
+    }
+    
+    /**
+     * @private
+     *
+     * Creates a bullet list item for any item in the given list.
+     * @param {Array.<string>} list An array of strings to be converted into a 
+     * message string with a bullet list.
+     * @return {string} the html text version of the list
+     */
+    function _getBulletList(list) {
+        var message = "<ul class='dialog-list'>";
+        list.forEach(function (info) {
+            message += "<li>" + info + "</li>";
+        });
+        message += "</ul>";
+        return message;
+    }
+    
+    /**
+     * @private
+     *
+     * Gets the corresponding unicode symbol of an arrow key for display in the menu.
+     * @param {string} key The non-modifier key used in the shortcut. It does not need to be normalized.
+     * @return {string} An empty string if key is not one of those we want to show with the unicode symbol. 
+     *                  Otherwise, the corresponding unicode symbol is returned.
+     */
+    function _getDisplayKey(key) {
+        var displayKey = "",
+            match = key ? key.match(/(Up|Down|Left|Right|\-)$/i) : null;
+        if (match) {
+            displayKey = key.substr(0, match.index) + _displayKeyMap[match[0].toLowerCase()];
+        }
+        return displayKey;
+    }
+    
+    /**
+     * @private
+     *
+     * Applies each user key binding to all the affected commands and updates _keyMap. 
+     * Shows errors in a dialog and then opens the user key map file if any of the following 
+     * is detected while applying the user key bindings.
+     *     - A key binding is attempting to modify a special command.
+     *     - A key binding is attempting to assign a shortcut of a special command to another one.
+     *     - Multiple key bindings are specified for the same command ID.
+     *     - The same key combination is listed for multiple key bindings.
+     *     - A key binding has any invalid key syntax.
+     *     - A key binding is referring to a non-existent command ID.
+     */
+    function _applyUserKeyBindings() {
+        var remappedCommands   = [],
+            remappedKeys       = [],
+            restrictedCommands = [],
+            restrictedKeys     = [],
+            invalidKeys        = [],
+            invalidCommands    = [],
+            multipleKeys       = [],
+            duplicateBindings  = [],
+            errorMessage       = "";
+        
+        _.forEach(_customKeyMap, function (commandID, key) {
+            var normalizedKey    = normalizeKeyDescriptorString(key),
+                existingBindings = _commandMap[commandID] || [];
+
+            // Skip this since we don't allow user to update key binding of a special 
+            // command like cut, copy, paste, undo, redo and select all.
+            if (_isSpecialCommand(commandID)) {
+                restrictedCommands.push(commandID);
+                return;
+            }
+
+            // Skip this since we don't allow user to update a shortcut used in 
+            // a special command or any Mac system command.
+            if (_isReservedShortcuts(normalizedKey)) {
+                restrictedKeys.push(key);
+                return;
+            }
+
+            // Skip this if the key is invalid.
+            if (!normalizedKey) {
+                invalidKeys.push(key);
+                return;
+            }
+            
+            if (_isKeyAssigned(normalizedKey)) {
+                if (remappedKeys.indexOf(normalizedKey) !== -1) {
+                    // JSON parser already removed all the duplicates that have the exact
+                    // same case or order in their keys. So we're only detecting duplicate 
+                    // bindings that have different orders or different cases used in the key.
+                    duplicateBindings.push(key);
+                    return;
+                }
+                // The same key binding already exists, so skip this.
+                if (_keyMap[normalizedKey].commandID === commandID) {
+                    // Still need to add it to the remappedCommands so that
+                    // we can detect any duplicate later on.
+                    remappedCommands.push(commandID);
+                    return;
+                }
+                removeBinding(normalizedKey);
+            }
+
+            if (remappedKeys.indexOf(normalizedKey) === -1) {
+                remappedKeys.push(normalizedKey);
+            }
+
+            // Remove another key binding if the new key binding is for a command
+            // that has a different key binding. e.g. "Ctrl-W": "edit.selectLine"
+            // requires us to remove "Ctrl-W" from "file.close" command, but we
+            // also need to remove "Ctrl-L" from "edit.selectLine".
+            if (existingBindings.length) {
+                existingBindings.forEach(function (binding) {
+                    removeBinding(binding.key);
+                });
+            }
+
+            if (commandID) {
+                if (_allCommands.indexOf(commandID) !== -1) {
+                    if (remappedCommands.indexOf(commandID) === -1) {
+                        var keybinding = { key: normalizedKey };
+
+                        keybinding.displayKey = _getDisplayKey(normalizedKey);
+                        addBinding(commandID, keybinding.displayKey ? keybinding : normalizedKey, brackets.platform);
+                        remappedCommands.push(commandID);
+                    } else {
+                        multipleKeys.push(commandID);
+                    }
+                } else {
+                    invalidCommands.push(commandID);
+                }
+            }
+        });
+
+        if (restrictedCommands.length) {
+            errorMessage = StringUtils.format(Strings.ERROR_RESTRICTED_COMMANDS, _getBulletList(restrictedCommands));
+        }
+
+        if (restrictedKeys.length) {
+            errorMessage += StringUtils.format(Strings.ERROR_RESTRICTED_SHORTCUTS, _getBulletList(restrictedKeys));
+        }
+
+        if (multipleKeys.length) {
+            errorMessage += StringUtils.format(Strings.ERROR_MULTIPLE_SHORTCUTS, _getBulletList(multipleKeys));
+        }
+
+        if (duplicateBindings.length) {
+            errorMessage += StringUtils.format(Strings.ERROR_DUPLICATE_SHORTCUTS, _getBulletList(duplicateBindings));
+        }
+
+        if (invalidKeys.length) {
+            errorMessage += StringUtils.format(Strings.ERROR_INVALID_SHORTCUTS, _getBulletList(invalidKeys));
+        }
+
+        if (invalidCommands.length) {
+            errorMessage += StringUtils.format(Strings.ERROR_NONEXISTENT_COMMANDS, _getBulletList(invalidCommands));
+        }
+
+        if (_showErrors && errorMessage) {
+            _showErrorsAndOpenKeyMap("", errorMessage);
+        }
+    }
+    
+    /**
+     * @private
+     *
+     * Restores the default key bindings for all the commands that are modified by each key binding
+     * specified in _customKeyMapCache (old version) but no longer specified in _customKeyMap (new version).
+     */
+    function _undoPriorUserKeyBindings() {
+        _.forEach(_customKeyMapCache, function (commandID, key) {
+            var normalizedKey  = normalizeKeyDescriptorString(key),
+                defaults       = _.find(_.toArray(_defaultKeyMap), { "commandID": commandID }),
+                defaultCommand = _defaultKeyMap[normalizedKey];
+
+            // We didn't modified this before, so skip it.
+            if (_isSpecialCommand(commandID) ||
+                    _isReservedShortcuts(normalizedKey)) {
+                return;
+            }
+
+            if (_isKeyAssigned(normalizedKey) &&
+                    _customKeyMap[key] !== commandID && _customKeyMap[normalizedKey] !== commandID) {
+                // Unassign the key from any command. e.g. "Cmd-W": "file.open" in _customKeyMapCache
+                // will require us to remove Cmd-W shortcut from file.open command.
+                removeBinding(normalizedKey);
+                
+                // Reassign the default key binding. e.g. "Cmd-W": "file.open" in _customKeyMapCache
+                // will require us to reassign Cmd-O shortcut to file.open command.
+                if (defaults) {
+                    addBinding(commandID, defaults, brackets.platform);
+                }
+
+                // Reassign the default key binding of the previously modified command. 
+                // e.g. "Cmd-W": "file.open" in _customKeyMapCache will require us to reassign Cmd-W
+                // shortcut to file.close command.
+                if (defaultCommand && defaultCommand.key) {
+                    addBinding(defaultCommand.commandID, defaultCommand.key, brackets.platform);
+                }
+            }
+        });
+    }
+    
+    /**
+     * @private
+     *
+     * Gets the full file path to the user key map file. In testing environment
+     * a different file path is returned so that running integration tests won't
+     * pop up the error dialog showing the errors from the actual user key map file.
+     *
+     * @return {string} full file path to the user key map file.
+     */
+    function _getUserKeyMapFilePath() {
+        if (window.isBracketsTestWindow) {
+            return brackets.app.getApplicationSupportDirectory() + "/_test_/" + KEYMAP_FILENAME;
+        }
+        return _userKeyMapFilePath;
+    }
+
+    /**
+     * @private
+     *
+     * Reads in the user key map file and parses its content into JSON.
+     * Returns the user key bindings if JSON has "overrides".
+     * Otherwise, returns an empty object or an error if the file 
+     * cannot be parsed or loaded.
+     *
+     * @return {$.Promise} a jQuery promise that will be resolved with the JSON
+     * object if the user key map file has "overrides" property or an empty JSON.
+     * If the key map file cannot be read or cannot be parsed by the JSON parser,
+     * then the promise is rejected with an error.
+     */
+    function _readUserKeyMap() {
+        var file   = FileSystem.getFileForPath(_getUserKeyMapFilePath()),
+            result = new $.Deferred();
+       
+        file.exists(function (err, doesExist) {
+            if (doesExist) {
+                FileUtils.readAsText(file)
+                    .done(function (text) {
+                        var keyMap = {};
+                        try {
+                            if (text) {
+                                var json = JSON.parse(text);
+                                // If no overrides, return an empty key map.
+                                result.resolve((json && json.overrides) || keyMap);
+                            } else {
+                                // The file is empty, so return an empty key map.
+                                result.resolve(keyMap);
+                            }
+                        } catch (err) {
+                            // Cannot parse the text read from the key map file.
+                            result.reject(err);
+                        }
+                    })
+                    .fail(function (err) {
+                        // Key map file cannot be loaded.
+                        result.reject(err);
+                    });
+            } else {
+                // Just resolve if no user key map file
+                result.resolve();
+            }
+        });
+        return result.promise();
+    }
+
+    /**
+     * @private
+     *
+     * Reads in the user key bindings and updates the key map with each user key
+     * binding by removing the existing one assigned to each key and adding 
+     * new one for the specified command id. Shows errors and opens the user 
+     * key map file if it cannot be parsed.
+     */
+    function _loadUserKeyMap() {
+        _readUserKeyMap()
+            .then(function (keyMap) {
+                _customKeyMapCache = _.cloneDeep(_customKeyMap);
+                _customKeyMap = keyMap;
+                _undoPriorUserKeyBindings();
+                _applyUserKeyBindings();
+            }, function (err) {
+                _showErrorsAndOpenKeyMap(err);
+            });
+    }
+        
+    /**
+     * @private
+     *
+     * Opens the existing key map file or creates a new one with default content 
+     * if it does not exist.
+     */
+    function _openUserKeyMap() {
+        var userKeyMapPath = _getUserKeyMapFilePath(),
+            file = FileSystem.getFileForPath(userKeyMapPath);
+        file.exists(function (err, doesExist) {
+            if (doesExist) {
+                CommandManager.execute(Commands.FILE_OPEN, { fullPath: userKeyMapPath });
+            } else {
+                var defaultContent = "{\n    \"documentation\": \"https://github.com/adobe/brackets/wiki/User-Key-Bindings\"," +
+                                     "\n    \"overrides\": {" +
+                                     "\n        \n    }\n}\n";
+                
+                FileUtils.writeText(file, defaultContent, true)
+                    .done(function () {
+                        CommandManager.execute(Commands.FILE_OPEN, { fullPath: userKeyMapPath });
+                    });
+            }
+        });
+    }
+    
     $(CommandManager).on("commandRegistered", _handleCommandRegistered);
+    CommandManager.register(Strings.CMD_OPEN_KEYMAP, Commands.FILE_OPEN_KEYMAP, _openUserKeyMap);
+
+    // Asynchronously loading DocumentManager to avoid the circular dependency
+    require(["document/DocumentManager"], function (DocumentManager) {
+        $(DocumentManager).on("documentSaved", function checkKeyMapUpdates(e, doc) {
+            if (doc && doc.file.fullPath === _userKeyMapFilePath) {
+                _loadUserKeyMap();
+            }
+        });
+    });
+    
+    /**
+     * @private
+     *
+     * Initializes _allCommands array and _defaultKeyMap so that we can use them for
+     * detecting non-existent commands and restoring the original key binding.
+     *
+     * @param {string} fullPath file path to the user key map file.
+     */
+    function _initCommandAndKeyMaps() {
+        _allCommands = CommandManager.getAll();
+        // Keep a copy of the default key bindings before loading user key bindings.
+        _defaultKeyMap = _.cloneDeep(_keyMap);
+    }
+    
+    /**
+     * @private
+     *
+     * Sets the full file path to the user key map file. Only used by unit tests 
+     * to load a test file instead of the actual user key map file.
+     *
+     * @param {string} fullPath file path to the user key map file.
+     */
+    function _setUserKeyMapFilePath(fullPath) {
+        _userKeyMapFilePath = fullPath;
+    }
+    
+    AppInit.extensionsLoaded(function () {
+        var params  = new UrlParams();
+        params.parse();
+        if (params.get("reloadWithoutUserExts") === "true") {
+            _showErrors = false;
+        }
+        
+        _initCommandAndKeyMaps();
+        _loadUserKeyMap();
+    });
 
     // unit test only
     exports._reset = _reset;
+    exports._setUserKeyMapFilePath = _setUserKeyMapFilePath;
+    exports._getDisplayKey = _getDisplayKey;
+    exports._loadUserKeyMap = _loadUserKeyMap;
+    exports._initCommandAndKeyMaps = _initCommandAndKeyMaps;
 
     // Define public API
     exports.getKeymap = getKeymap;
diff --git a/src/command/Menus.js b/src/command/Menus.js
index 7fdfd7097fd..019aada3db5 100644
--- a/src/command/Menus.js
+++ b/src/command/Menus.js
@@ -94,10 +94,6 @@ define(function (require, exports, module) {
         EDIT_CODE_HINTS_COMMANDS:           {sectionMarker: Commands.SHOW_CODE_HINTS},
         EDIT_TOGGLE_OPTIONS:                {sectionMarker: Commands.TOGGLE_CLOSE_BRACKETS},
         
-        // DEPRECATED: Old Edit menu sections redirected to existing Edit menu section
-        EDIT_FIND_COMMANDS:                 {sectionMarker: Commands.TOGGLE_CLOSE_BRACKETS},
-        EDIT_REPLACE_COMMANDS:              {sectionMarker: Commands.TOGGLE_CLOSE_BRACKETS},
-        
         FIND_FIND_COMMANDS:                 {sectionMarker: Commands.CMD_FIND},
         FIND_FIND_IN_COMMANDS:              {sectionMarker: Commands.CMD_FIND_IN_FILES},
         FIND_REPLACE_COMMANDS:              {sectionMarker: Commands.CMD_REPLACE},
@@ -558,14 +554,6 @@ define(function (require, exports, module) {
             name,
             commandID;
         
-        if (relativeID === MenuSection.EDIT_FIND_COMMANDS) {
-            DeprecationWarning.deprecationWarning("Add " + command + " Command to the Find Menu instead of the Edit Menu.", true);
-            DeprecationWarning.deprecationWarning("Use MenuSection.FIND_FIND_COMMANDS instead of MenuSection.EDIT_FIND_COMMANDS.", true);
-        } else if (relativeID === MenuSection.EDIT_REPLACE_COMMANDS) {
-            DeprecationWarning.deprecationWarning("Add " + command + " Command to the Find Menu instead of the Edit Menu.", true);
-            DeprecationWarning.deprecationWarning("Use MenuSection.FIND_REPLACE_COMMANDS instead of MenuSection.EDIT_REPLACE_COMMANDS.", true);
-        }
-        
         if (!command) {
             console.error("addMenuItem(): missing required parameters: command");
             return null;
diff --git a/src/config.json b/src/config.json
index 04f71689b8a..4a59a4887c2 100644
--- a/src/config.json
+++ b/src/config.json
@@ -22,8 +22,8 @@
         "build_timestamp": ""
     },
     "name": "Brackets",
-    "version": "0.45.0-0",
-    "apiVersion": "0.45.0",
+    "version": "1.1.0-0",
+    "apiVersion": "1.1.0",
     "homepage": "http://brackets.io",
     "issues": {
         "url": "http://github.com/adobe/brackets/issues"
@@ -39,7 +39,7 @@
         "jasmine-node": "1.11.0",
         "grunt-jasmine-node": "0.1.0",
         "grunt-cli": "0.1.9",
-        "phantomjs": "1.9.0-1",
+        "phantomjs": "1.9.11",
         "grunt-lib-phantomjs": "0.3.0",
         "grunt-contrib-jshint": "0.6.0",
         "grunt-contrib-watch": "0.4.3",
@@ -57,6 +57,7 @@
         "grunt-usemin": "0.1.11",
         "load-grunt-tasks": "0.2.0",
         "q": "0.9.2",
+        "semver": "^4.1.0",
         "jshint": "2.1.4",
         "xmldoc": "^0.1.2"
     },
diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js
index 0432e47359d..25f1fff634f 100644
--- a/src/document/DocumentCommandHandlers.js
+++ b/src/document/DocumentCommandHandlers.js
@@ -873,7 +873,7 @@ define(function (require, exports, module) {
             // explictly allow "blind" writes to the filesystem in this case,
             // ignoring warnings about the contents being modified outside of
             // the editor.
-            FileUtils.writeText(newFile, doc.getText(), true)
+            FileUtils.writeText(newFile, doc.getText(true), true)
                 .done(function () {
                     // If there were unsaved changes before Save As, they don't stay with the old
                     // file anymore - so must revert the old doc to match disk content.
diff --git a/src/document/DocumentManager.js b/src/document/DocumentManager.js
index c5409022737..c95290196df 100644
--- a/src/document/DocumentManager.js
+++ b/src/document/DocumentManager.js
@@ -115,7 +115,7 @@ define(function (require, exports, module) {
     /**
      * Returns the existing open Document for the given file, or null if the file is not open ('open'
      * means referenced by the UI somewhere). If you will hang onto the Document, you must addRef()
-     * it; see {@link getDocumentForPath()} for details.
+     * it; see {@link #getDocumentForPath} for details.
      * @param {!string} fullPath
      * @return {?Document}
      */
@@ -586,6 +586,24 @@ define(function (require, exports, module) {
             $(exports).triggerHandler("dirtyFlagChange", doc);
             if (doc.isDirty) {
                 MainViewManager.addToWorkingSet(MainViewManager.ACTIVE_PANE, doc.file);
+                
+                // We just dirtied a doc and added it to the active working set
+                //  this may have come from an internal dirtying so if it was
+                //  added to a working set that had no active document then
+                //  open the document 
+                //
+                // See: https://github.com/adobe/brackets/issues/9569 
+                //
+                // NOTE: Adding a file to the active working set may not actually add
+                //       it to the active working set (e.g. the document was already 
+                //       opened to the inactive working set.)
+                //
+                //       Check that it was actually added to the active working set
+                
+                if (!MainViewManager.getCurrentlyViewedFile() &&
+                        MainViewManager.findInWorkingSet(MainViewManager.ACTIVE_PANE, doc.file.fullPath) !== -1) {
+                    CommandManager.execute(Commands.FILE_OPEN, {fullPath: doc.file.fullPath});
+                }
             }
         })
         .on("_documentSaved", function (event, doc) {
diff --git a/src/editor/CSSInlineEditor.js b/src/editor/CSSInlineEditor.js
index 18524091f20..6e568972a34 100644
--- a/src/editor/CSSInlineEditor.js
+++ b/src/editor/CSSInlineEditor.js
@@ -36,7 +36,9 @@ define(function (require, exports, module) {
         DocumentManager         = require("document/DocumentManager"),
         EditorManager           = require("editor/EditorManager"),
         Editor                  = require("editor/Editor").Editor,
+        LanguageManager         = require("language/LanguageManager"),
         ProjectManager          = require("project/ProjectManager"),
+        FileUtils               = require("file/FileUtils"),
         HTMLUtils               = require("language/HTMLUtils"),
         MultiRangeInlineEditor  = require("editor/MultiRangeInlineEditor"),
         Strings                 = require("strings"),
@@ -146,7 +148,7 @@ define(function (require, exports, module) {
     /** Item renderer for stylesheet-picker dropdown */
     function _stylesheetListRenderer(item) {
         var html = "<span class='stylesheet-name'>" + _.escape(item.name);
-        if (item.subDirStr.length) {
+        if (item.subDirStr) {
             html += "<span class='stylesheet-dir'> — " + _.escape(item.subDirStr) + "</span>";
         }
         html += "</span>";
@@ -240,65 +242,52 @@ define(function (require, exports, module) {
         
         /**
          * @private
-         * Sort fileInfo objects by name then sub-directory
+         * Sort files with LESS/SCSS above CSS, and then within each grouping sort by path & filename
+         * (the same order we use for Find in Files)
+         * @param {!File} a, b
+         * @return {number}
          */
-        function _sortFileInfos(a, b) {
-            var nameComparison = a.name.localeCompare(b.name);
-            if (nameComparison !== 0) {
-                return nameComparison;
+        function _fileComparator(a, b) {
+            var aIsCSS = LanguageManager.getLanguageForPath(a.fullPath).getId() === "css",
+                bIsCSS = LanguageManager.getLanguageForPath(b.fullPath).getId() === "css";
+            if (aIsCSS && !bIsCSS) {
+                return 1;
+            } else if (!aIsCSS && bIsCSS) {
+                return -1;
+            } else {
+                return FileUtils.comparePaths(a.fullPath, b.fullPath);
             }
-            return a.subDirStr.localeCompare(b.subDirStr);
         }
         
         /**
          * @private
          * Prepare file list for display
          */
-        function _prepFileList(fileInfos) {
-            var i, j, firstDupeIndex,
-                displayPaths = [],
-                dupeList = [];
+        function _prepFileList(files) {
+            // First, sort list (the same ordering we use for the results list)
+            files.sort(_fileComparator);
             
-            // Add subdir field to each entry
-            fileInfos.forEach(function (fileInfo) {
-                fileInfo.subDirStr = "";
-            });
-
-            // Add directory path to files with the same name so they can be
-            // distinguished in list. Start with list sorted by name.
-            fileInfos.sort(_sortFileInfos);
-
-            // For identical names, add a subdir
-            for (i = 1; i < fileInfos.length; i++) {
-                if (_sortFileInfos(fileInfos[i - 1], fileInfos[i]) === 0) {
-                    // Duplicates found
-                    firstDupeIndex = i - 1;
-                    dupeList.push(fileInfos[i - 1]);
-                    dupeList.push(fileInfos[i]);
-
-                    // Lookahead for more dupes
-                    while (++i < fileInfos.length &&
-                            _sortFileInfos(dupeList[0], fileInfos[i]) === 0) {
-                        dupeList.push(fileInfos[i]);
-                    }
-
-                    // Get minimum subdir to make each unique
-                    displayPaths = ViewUtils.getDirNamesForDuplicateFiles(dupeList);
-
-                    // Add a subdir to each dupe entry
-                    for (j = 0; j < displayPaths.length; j++) {
-                        fileInfos[firstDupeIndex + j].subDirStr = displayPaths[j];
-                    }
-
-                    // Release memory
-                    dupeList = [];
+            // Find any files that share the same name (with different path)
+            var fileNames = {};
+            files.forEach(function (file) {
+                if (!fileNames[file.name]) {
+                    fileNames[file.name] = [];
                 }
-            }
+                fileNames[file.name].push(file);
+            });
             
-            // Sort by name again, so paths are sorted
-            fileInfos.sort(_sortFileInfos);
+            // For any duplicate filenames, set subDirStr to a path snippet the helps
+            // the user distinguish each file in the list.
+            _.forEach(fileNames, function (files) {
+                if (files.length > 1) {
+                    var displayPaths = ViewUtils.getDirNamesForDuplicateFiles(files);
+                    files.forEach(function (file, i) {
+                        file.subDirStr = displayPaths[i];
+                    });
+                }
+            });
 
-            return fileInfos;
+            return files;
         }
         
         function _onHostEditorScroll() {
@@ -309,7 +298,8 @@ define(function (require, exports, module) {
             .done(function (rules) {
                 var inlineEditorDeferred = new $.Deferred();
                 cssInlineEditor = new MultiRangeInlineEditor.MultiRangeInlineEditor(CSSUtils.consolidateRules(rules),
-                                                                                    _getNoRulesMsg, CSSUtils.getRangeSelectors);
+                                                                                    _getNoRulesMsg, CSSUtils.getRangeSelectors,
+                                                                                    _fileComparator);
                 cssInlineEditor.load(hostEditor);
                 cssInlineEditor.$htmlContent
                     .on("focusin", _updateCommands)
diff --git a/src/editor/Editor.js b/src/editor/Editor.js
index c426ed7b450..9d7c98dea14 100644
--- a/src/editor/Editor.js
+++ b/src/editor/Editor.js
@@ -1248,7 +1248,7 @@ define(function (require, exports, module) {
      * @param {boolean} center true to center the viewport
      * @param {number} centerOptions Option value, or 0 for no options; one of the BOUNDARY_* constants above.
      * @param {?string} origin An optional string that describes what other selection or edit operations this
-     *      should be merged with for the purposes of undo. See Document.replaceRange() for more details.
+     *      should be merged with for the purposes of undo. See {@link Document#replaceRange} for more details.
      */
     Editor.prototype.setSelection = function (start, end, center, centerOptions, origin) {
         this.setSelections([{start: start, end: end || start}], center, centerOptions, origin);
@@ -1267,7 +1267,7 @@ define(function (require, exports, module) {
      * @param {boolean} center true to center the viewport around the primary selection.
      * @param {number} centerOptions Option value, or 0 for no options; one of the BOUNDARY_* constants above.
      * @param {?string} origin An optional string that describes what other selection or edit operations this
-     *      should be merged with for the purposes of undo. See Document.replaceRange() for more details.
+     *      should be merged with for the purposes of undo. See {@link Document#replaceRange} for more details.
      */
     Editor.prototype.setSelections = function (selections, center, centerOptions, origin) {
         var primIndex = selections.length - 1, options;
@@ -1793,7 +1793,7 @@ define(function (require, exports, module) {
      * Sets the height of an inline widget in this editor.
      * @param {!InlineWidget} inlineWidget The widget whose height should be set.
      * @param {!number} height The height of the widget.
-     * @param {boolean} ensureVisible Whether to scroll the entire widget into view.
+     * @param {boolean=} ensureVisible Whether to scroll the entire widget into view. Default false.
      */
     Editor.prototype.setInlineWidgetHeight = function (inlineWidget, height, ensureVisible) {
         var self = this,
@@ -2002,7 +2002,7 @@ define(function (require, exports, module) {
      *     the start and end.
      * @return {?(Object|string)} Name of syntax-highlighting mode, or object containing a "name" property
      *     naming the mode along with configuration options required by the mode.
-     * @see {@link LanguageManager#getLanguageForPath()} and {@link Language#getMode()}.
+     * @see {@link LanguageManager::#getLanguageForPath} and {@link LanguageManager::Language#getMode}.
      */
     Editor.prototype.getModeForRange = function (start, end, knownMixed) {
         var outerMode = this._codeMirror.getMode(),
@@ -2028,7 +2028,7 @@ define(function (require, exports, module) {
      *
      * @return {?(Object|string)} Name of syntax-highlighting mode, or object containing a "name" property
      *     naming the mode along with configuration options required by the mode.
-     * @see {@link LanguageManager#getLanguageForPath()} and {@link Language#getMode()}.
+     * @see {@link LanguageManager::#getLanguageForPath} and {@link LanguageManager::Language#getMode}.
      */
     Editor.prototype.getModeForSelection = function () {
         // Check for mixed mode info
@@ -2081,7 +2081,8 @@ define(function (require, exports, module) {
     /**
      * Gets the syntax-highlighting mode for the document.
      *
-     * @return {Object|String} Object or Name of syntax-highlighting mode; see {@link LanguageManager#getLanguageForPath()} and {@link Language#getMode()}.
+     * @return {Object|String} Object or Name of syntax-highlighting mode
+     * @see {@link LanguageManager::#getLanguageForPath|LanguageManager.getLanguageForPath} and {@link LanguageManager::Language#getMode|Language.getMode}.
      */
     Editor.prototype.getModeForDocument = function () {
         return this._codeMirror.getOption("mode");
diff --git a/src/editor/EditorManager.js b/src/editor/EditorManager.js
index f1d575cd4a1..5667c0d6f00 100644
--- a/src/editor/EditorManager.js
+++ b/src/editor/EditorManager.js
@@ -81,7 +81,7 @@ define(function (require, exports, module) {
     
     /**
      * Registered inline-editor widget providers sorted descending by priority. 
-     * @see {@link #registerInlineEditProvider()}.
+     * @see {@link #registerInlineEditProvider}.
      * @type {Array.<{priority:number, provider:function(...)}>}
      * @private
      */
@@ -89,7 +89,7 @@ define(function (require, exports, module) {
     
     /**
      * Registered inline documentation widget providers sorted descending by priority.
-     * @see {@link #registerInlineDocsProvider()}.
+     * @see {@link #registerInlineDocsProvider}.
      * @type {Array.<{priority:number, provider:function(...)}>}
      * @private
      */
@@ -97,7 +97,7 @@ define(function (require, exports, module) {
     
     /**
      * Registered jump-to-definition providers. 
-     * @see {@link #registerJumpToDefProvider()}.
+     * @see {@link #registerJumpToDefProvider}.
      * @private
      * @type {Array.<function(...)>}
      */
@@ -598,7 +598,7 @@ define(function (require, exports, module) {
     
     /**
      * @deprecated Register a View Factory instead  
-     * @see MainViewManager.registerViewFactory()
+     * @see MainViewFactory::#registerViewFactory
      */
     function registerCustomViewer() {
         throw new Error("EditorManager.registerCustomViewer() has been removed.");
@@ -685,7 +685,7 @@ define(function (require, exports, module) {
      * Returns the current active editor (full-sized OR inline editor). This editor may not 
      * have focus at the moment, but it is visible and was the last editor that was given 
      * focus. Returns null if no editors are active.
-     * @see getFocusedEditor()
+     * @see #getFocusedEditor
      * @return {?Editor}
      */
     function getActiveEditor() {
diff --git a/src/editor/InlineTextEditor.js b/src/editor/InlineTextEditor.js
index 66e5f2fa696..e3f3b2b4739 100644
--- a/src/editor/InlineTextEditor.js
+++ b/src/editor/InlineTextEditor.js
@@ -141,9 +141,8 @@ define(function (require, exports, module) {
     /**
      * Update the inline editor's height when the number of lines change. The
      * base implementation of this method does nothing.
-     * @param {boolean} force the editor to resize
      */
-    InlineTextEditor.prototype.sizeInlineWidgetToContents = function (force) {
+    InlineTextEditor.prototype.sizeInlineWidgetToContents = function () {
         // brackets_codemirror_overrides.css adds height:auto to CodeMirror
         // Inline editors themselves do not need to be sized, but layouts like
         // the one used in CSSInlineEditor do need some manual layout.
@@ -265,7 +264,7 @@ define(function (require, exports, module) {
         // Always update the widget height when an inline editor completes a
         // display update
         $(this.editor).on("update.InlineTextEditor", function (event, editor) {
-            self.sizeInlineWidgetToContents(true);
+            self.sizeInlineWidgetToContents();
         });
 
         // Size editor to content whenever text changes (via edits here or any
@@ -273,7 +272,7 @@ define(function (require, exports, module) {
         // changes, regardless of origin)
         $(this.editor).on("change.InlineTextEditor", function (event, editor) {
             if (self.hostEditor.isFullyVisible()) {
-                self.sizeInlineWidgetToContents(true);
+                self.sizeInlineWidgetToContents();
                 self._updateLineRange(editor);
             }
         });
@@ -326,7 +325,7 @@ define(function (require, exports, module) {
         }
 
         // We need to call this explicitly whenever the host editor is reshown
-        this.sizeInlineWidgetToContents(true);
+        this.sizeInlineWidgetToContents();
     };
         
     /**
diff --git a/src/editor/MultiRangeInlineEditor.js b/src/editor/MultiRangeInlineEditor.js
index 9356faebc27..aecb3289a42 100644
--- a/src/editor/MultiRangeInlineEditor.js
+++ b/src/editor/MultiRangeInlineEditor.js
@@ -44,6 +44,9 @@ define(function (require, exports, module) {
     var TextRange           = require("document/TextRange").TextRange,
         InlineTextEditor    = require("editor/InlineTextEditor").InlineTextEditor,
         EditorManager       = require("editor/EditorManager"),
+        FileUtils           = require("file/FileUtils"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
+        ProjectManager      = require("project/ProjectManager"),
         Commands            = require("command/Commands"),
         Strings             = require("strings"),
         CommandManager      = require("command/CommandManager");
@@ -60,6 +63,12 @@ define(function (require, exports, module) {
         return parseInt($target.css(styleName), 10);
     }
     
+    /** Returns a 'context' object for getting/setting project-specific preferences */
+    function _getPrefsContext() {
+        var projectRoot = ProjectManager.getProjectRoot();  // note: null during unit tests!
+        return { location : { scope: "user", layer: "project", layerID: projectRoot && projectRoot.fullPath } };
+    }
+    
     
     /**
      * Stores one search result: its source file, line range, etc. plus the DOM node representing it
@@ -79,21 +88,26 @@ define(function (require, exports, module) {
         if (labelCB) {
             range.name = labelCB(range.textRange);
         }
-        var text = _.escape(range.name) + " <span class='related-file'>— " + _.escape(range.textRange.document.file.name) + " : " + (range.textRange.startLine + 1) + "</span>";
+        var text = _.escape(range.name) + " <span class='related-file'>:" + (range.textRange.startLine + 1) + "</span>";
         listItem.html(text);
         listItem.attr("title", listItem.text());
     }
     
+    
     /**
      * @constructor
-     * @param {Array.<{name:String,document:Document,lineStart:number,lineEnd:number}>} ranges The text ranges to display.
-     * @param {function(): $.Promise} messageCB An optional callback that returns a promise that will be resolved with a message to show
-     *      when no matches are available.
-     * @param {function(range): string} labelCB An optional callback that returns an updated label string for the given range. Called
-     *      when we detect that the content of one of the ranges has changed.
+     * @param {Array.<{name:String,document:Document,lineStart:number,lineEnd:number}>} ranges The text
+     *      ranges to display. Results within the same file are expected to be contiguous in this array.
+     * @param {?function(): $.Promise} messageCB Optional; returns a promise resolved with a message to
+     *      show when no matches are available. The message should be already-escaped HTML.
+     * @param {?function(range): string} labelCB Optional; returns an updated label string for the given
+     *      range. Called when we detect that the content of a range has changed. The label is plain
+     *      text, not HTML.
+     * @param {?function(!File, !File):number} fileComparator Optional comparison function for sorting
+     *      the results list (based on range.document.file). Defaults to FileUtils.comparePaths().
      * @extends {InlineTextEditor}
      */
-    function MultiRangeInlineEditor(ranges, messageCB, labelCB) {
+    function MultiRangeInlineEditor(ranges, messageCB, labelCB, fileComparator) {
         InlineTextEditor.call(this);
         
         // Store the results to show in the range list. This creates TextRanges bound to the Document,
@@ -105,6 +119,15 @@ define(function (require, exports, module) {
         this._labelCB = labelCB;
         
         this._selectedRangeIndex = -1;
+        this._collapsedFiles = {};
+        
+        // Set up list sort order
+        this._fileComparator = fileComparator || function defaultComparator(file1, file2) {
+            return FileUtils.comparePaths(file1.fullPath, file2.fullPath);
+        };
+        this._ranges.sort(function (result1, result2) {
+            return this._fileComparator(result1.textRange.document.file, result2.textRange.document.file);
+        }.bind(this));
     }
     MultiRangeInlineEditor.prototype = Object.create(InlineTextEditor.prototype);
     MultiRangeInlineEditor.prototype.constructor = MultiRangeInlineEditor;
@@ -114,33 +137,48 @@ define(function (require, exports, module) {
     MultiRangeInlineEditor.prototype.$relatedContainer = null;
     MultiRangeInlineEditor.prototype.$related = null;
     MultiRangeInlineEditor.prototype.$selectedMarker = null;
+    
+    /** Includes all the _ranges[i].$listItem items, as well as section headers */
     MultiRangeInlineEditor.prototype.$rangeList = null;
     
     /**
-     * List of search results
-     * @type {Array.<SearchResultItem>}
+     * List of search results. Section headers are not represented in this list (they are implied before each group of
+     * of consecutive results from the same Document).
+     * @type {!Array.<SearchResultItem>}
      */
     MultiRangeInlineEditor.prototype._ranges = null;
+    
+    /** Index into this._ranges - indices do not include section headers */
     MultiRangeInlineEditor.prototype._selectedRangeIndex = null;
+    
+    /**
+     * Map from fullPath to true if collapsed. May not agree with preferences, in cases where multiple inline editors make
+     * concurrent changes.
+     * @type {!Object.<string, boolean>}
+     */
+    MultiRangeInlineEditor.prototype._collapsedFiles = null;
+    
     MultiRangeInlineEditor.prototype._messageCB = null;
     MultiRangeInlineEditor.prototype._labelCB = null;
+    MultiRangeInlineEditor.prototype._fileComparator = null;
+    
+    /** @type {!Object.<string, jQueryObject>} Map from fullPath to section header DOM node */
+    MultiRangeInlineEditor.prototype._$headers = null;
+    
     
     /**
      * @private
-     * Add a new range to the range list UI.
+     * Add a new result item <li> to the range list UI ($rangeList) and saves it in range.$listItem
      * @param {SearchResultItem} range The range to add.
-     * @param {number=} index Where to add the range in the list. Defaults to the end.
      */
-    MultiRangeInlineEditor.prototype._createListItem = function (range, index) {
+    MultiRangeInlineEditor.prototype._createListItem = function (range) {
         var self = this,
-            $rangeItem = $("<li/>"),
-            $rangeListChildren = this.$rangeList.children();
+            $rangeItem = $("<li/>");
         
-        if (index === undefined || index === $rangeListChildren.length) {
-            $rangeItem.appendTo(this.$rangeList);
-        } else {
-            $rangeItem.insertBefore($rangeListChildren.get(index));
-        }
+        // Attach filename for unit test use
+        $rangeItem.data("filename", range.textRange.document.file.name);
+        
+        $rangeItem.appendTo(this.$rangeList);
         
         _updateRangeLabel($rangeItem, range);
         $rangeItem.mousedown(function () {
@@ -148,20 +186,97 @@ define(function (require, exports, module) {
         });
 
         range.$listItem = $rangeItem;
+    };
+    
+    /** Collapses/expands a file section in the range list UI */
+    MultiRangeInlineEditor.prototype._toggleSection = function (fullPath, duringInit) {
+        var $headerItem = this._$headers[fullPath];
+        var $disclosureIcon = $headerItem.find(".disclosure-triangle");
+        var isCollapsing = $disclosureIcon.hasClass("expanded");
+        $disclosureIcon.toggleClass("expanded");
+        $headerItem.nextUntil(".section-header").toggle(!isCollapsing);  // explicit visibility arg, since during load() jQ doesn't think nodes are visible
+
+        // Update instance-specific state...
+        this._collapsedFiles[fullPath] = isCollapsing;
+        // ...AND persist as per-project view state
+        if (!duringInit) {
+            var setting = PreferencesManager.getViewState("inlineEditor.collapsedFiles", _getPrefsContext()) || {};
+            if (isCollapsing) {
+                setting[fullPath] = true;
+            } else {
+                delete setting[fullPath];
+            }
+            PreferencesManager.setViewState("inlineEditor.collapsedFiles", setting, _getPrefsContext());
+        }
+
+        // Show/hide selection indicator if selection was in collapsed section
+        this._updateSelectedMarker(false);
         
-        // Update list item as TextRange changes
-        $(range.textRange).on("change", function () {
-            _updateRangeLabel($rangeItem, range);
-        }).on("contentChange", function () {
-            _updateRangeLabel($rangeItem, range, self._labelCB);
-        });
+        // Changing height of rule list may change ht of overall editor
+        this._ruleListHeightChanged();
         
-        // If TextRange lost sync, remove it from the list (and close the widget if no other ranges are left)
-        $(range.textRange).on("lostSync", function () {
-            self._removeRange(range);
-        });
+        // If user expands collapsed section and nothing selected yet, select first result in this section
+        if (this._selectedRangeIndex === -1 && !isCollapsing && !duringInit) {
+            var index = _.findIndex(this._ranges, function (resultItem) {
+                return resultItem.textRange.document.file.fullPath === fullPath;
+            });
+            this.setSelectedIndex(index);
+        }
     };
-
+    
+    /** Adds a file section header <li> to the range list UI ($rangeList) and adds it to the this._$headers map */
+    MultiRangeInlineEditor.prototype._createHeaderItem = function (doc) {
+        var $headerItem = $("<li class='section-header'><span class='disclosure-triangle expanded'/><span class='filename'>" + _.escape(doc.file.name) + "</span></li>")
+            .attr("title", ProjectManager.makeProjectRelativeIfPossible(doc.file.fullPath))
+            .appendTo(this.$rangeList);
+        
+        $headerItem.click(function () {
+            this._toggleSection(doc.file.fullPath);
+        }.bind(this));
+        
+        this._$headers[doc.file.fullPath] = $headerItem;
+    };
+    
+    /** Refresh the contents of $rangeList */
+    MultiRangeInlineEditor.prototype._renderList = function () {
+        this.$rangeList.empty();
+        this._$headers = {};
+        
+        var self = this,
+            lastSectionDoc,
+            numItemsInSection = 0;
+        
+        // After seeing all results for a given file, update its header with total # of results
+        function finalizeSection() {
+            if (lastSectionDoc) {
+                self._$headers[lastSectionDoc.file.fullPath].append(" (" + numItemsInSection + ")");
+                if (self._collapsedFiles[lastSectionDoc.file.fullPath]) {
+                    self._toggleSection(lastSectionDoc.file.fullPath, true);
+                }
+            }
+        }
+        
+        this._ranges.forEach(function (resultItem) {
+            if (lastSectionDoc !== resultItem.textRange.document) {
+                // Finalize previous section
+                finalizeSection();
+                
+                // Initialize new section
+                lastSectionDoc = resultItem.textRange.document;
+                numItemsInSection = 0;
+                
+                // Create filename header for new section
+                this._createHeaderItem(lastSectionDoc);
+            }
+            numItemsInSection++;
+            this._createListItem(resultItem);
+        }, this);
+        
+        // Finalize last section
+        finalizeSection();
+    };
+    
+    
     /** 
      * @override
      * @param {!Editor} hostEditor  Outer Editor instance that inline editor will sit within.
@@ -191,16 +306,48 @@ define(function (require, exports, module) {
         // Range list
         this.$rangeList = $("<ul/>").appendTo(this.$related);
         
-        // create range list & add listeners for range textrange changes
-        this._ranges.forEach(this._createListItem, this);
+        // Determine which sections are initially collapsed (the actual collapsing happens after onAdded(),
+        // because jQuery.hide() requires the computed value of 'display' to work properly)
+        var toCollapse = PreferencesManager.getViewState("inlineEditor.collapsedFiles", _getPrefsContext()) || {};
+        Object.keys(toCollapse).forEach(function (fullPath) {
+            this._collapsedFiles[fullPath] = true;
+        }.bind(this));
+        
+        // Render list & section headers (matching collapsed state set above)
+        this._renderList();
         
         if (this._ranges.length > 1) {      // attach to main container
             this.$wrapper.before(this.$relatedContainer);
         }
                 
-        if (this._ranges.length) {
-            // select the first range
-            this.setSelectedIndex(0);
+        // Add TextRange listeners to update UI as text changes
+        var self = this;
+        this._ranges.forEach(function (range, index) {
+            // Update list item as TextRange changes
+            $(range.textRange).on("change", function () {
+                _updateRangeLabel(range.$listItem, range);
+            }).on("contentChange", function () {
+                _updateRangeLabel(range.$listItem, range, self._labelCB);
+            });
+            
+            // If TextRange lost sync, remove it from the list (and close the widget if no other ranges are left)
+            $(range.textRange).on("lostSync", function () {
+                self._removeRange(range);
+            });
+        });
+        
+        // Initial selection is the first non-collapsed result item
+        var indexToSelect = _.findIndex(this._ranges, function (range) {
+            return !this._collapsedFiles[range.textRange.document.file.fullPath];
+        }.bind(this));
+        if (this._ranges.length === 1 && indexToSelect === -1) {
+            // If no right-hand rule list shown, select the one result even if it's in a collapsed file (since no way to expand)
+            indexToSelect = 0;
+        }
+        
+        if (indexToSelect !== -1) {
+            // select the first visible range
+            this.setSelectedIndex(indexToSelect);
         } else {
             // force the message div to show
             this.setSelectedIndex(-1);
@@ -232,22 +379,14 @@ define(function (require, exports, module) {
      * @override
      */
     MultiRangeInlineEditor.prototype.onAdded = function () {
-        // Before setting the inline widget height, force a height on the
-        // floating related-container in order for CodeMirror to layout and
-        // compute scrollbars
-        this.$relatedContainer.height(this.$related.height());
-
         // Set the initial position of the selected marker now that we're laid out.
         this._updateSelectedMarker(false);
 
         // Call super
         MultiRangeInlineEditor.prototype.parentClass.onAdded.apply(this, arguments);
 
-        // Editor must be at least as tall as the related list
-        this._updateEditorMinHeight();
-        
-        // Set the initial inline widget height
-        this.sizeInlineWidgetToContents(true, false);
+        // Initially size the inline widget (calls sizeInlineWidgetToContents())
+        this._ruleListHeightChanged();
         
         this._updateCommands();
     };
@@ -255,7 +394,8 @@ define(function (require, exports, module) {
     /**
      * Specify the range that is shown in the editor.
      *
-     * @param {!number} index The index of the range to select, or -1 to deselect all.
+     * @param {!number} index The index of the range to select, or -1 to deselect all. Index into this._ranges,
+     *      so section headers are not included in the sequence.
      * @param {boolean} force Whether to re-select the item even if we think it's already selected
      *     (used if the range list has changed).
      */
@@ -283,15 +423,18 @@ define(function (require, exports, module) {
         if (newIndex === -1) {
             // show the message div
             this.setInlineContent(null);
-            if (this._messageCB) {
-                this._messageCB().done(function (msg) {
+            var hasHiddenMatches = this._ranges.length > 0;
+            if (hasHiddenMatches) {
+                this.$messageDiv.text(Strings.INLINE_EDITOR_HIDDEN_MATCHES);
+            } else if (this._messageCB) {
+                this._messageCB(hasHiddenMatches).done(function (msg) {
                     self.$messageDiv.html(msg);
                 });
             } else {
                 this.$messageDiv.text(Strings.INLINE_EDITOR_NO_MATCHES);
             }
             this.$htmlContent.append(this.$messageDiv);
-            this.sizeInlineWidgetToContents(true, false);
+            this.sizeInlineWidgetToContents();
         } else {
             this.$messageDiv.remove();
             
@@ -309,7 +452,7 @@ define(function (require, exports, module) {
             $(this.editor).on("cursorActivity.MultiRangeInlineEditor", this._ensureCursorVisible.bind(this));
             
             // ensureVisibility is set to false because we don't want to scroll the main editor when the user selects a view
-            this.sizeInlineWidgetToContents(true, false);
+            this.sizeInlineWidgetToContents();
     
             this._updateSelectedMarker(true);
         }
@@ -344,14 +487,23 @@ define(function (require, exports, module) {
         $(this.editor.getScrollerElement())
             .css("min-height", (ruleListNaturalHeight - headerHeight) + "px");
     };
+    
+    /** Update inline widget height to reflect changed rule-list height */
+    MultiRangeInlineEditor.prototype._ruleListHeightChanged = function () {
+        // Editor's min height depends on rule list height
+        this._updateEditorMinHeight();
+        
+        // Overall widget height may have changed too
+        this.sizeInlineWidgetToContents();
+    };
 
     MultiRangeInlineEditor.prototype._removeRange = function (range) {
         // If this is the last range, just close the whole widget
         if (this._ranges.length <= 1) {
             this.close();
-            return;
+            return;  // note: the dispose() that would normally happen below is covered by close()
         }
-
+        
         // Now we know there is at least one other range -> found out which one this is
         var index = this._ranges.indexOf(range);
         
@@ -366,11 +518,13 @@ define(function (require, exports, module) {
         }
 
         // Now we can remove this range
-        range.$listItem.remove();
         range.textRange.dispose();
         this._ranges.splice(index, 1);
+        
+        // Re-render list & section headers
+        this._renderList();
 
-        // If the selected range is below, we need to update the index
+        // Move selection highlight if deletion affected its position
         if (index < this._selectedRangeIndex) {
             this._selectedRangeIndex--;
             this._updateSelectedMarker(true);
@@ -409,72 +563,67 @@ define(function (require, exports, module) {
         
         // Insert the new range after the last range from the same doc, or at the
         // end of the list.
-        for (i = this._ranges.length - 1; i >= 0; i--) {
-            if (this._ranges[i].textRange.document === doc) {
+        for (i = 0; i < this._ranges.length; i++) {
+            if (this._fileComparator(this._ranges[i].textRange.document.file, doc.file) > 0) {
                 break;
             }
         }
-        if (i === -1) {
-            i = this._ranges.length;
-        } else {
-            i++;
-        }
         this._ranges.splice(i, 0, newRange);
         
-        // Add the new range to the UI and select it. This should load the associated range
-        // into the editor.
-        this._createListItem(newRange, i);
-        this.setSelectedIndex(i, true);
-
-        // Ensure that the rule list becomes visible if it wasn't already and we have
-        // more than one rule.
+        // Update rule list display
+        this._renderList();
+        
+        // Ensure rule list is visible if there are now multiple results
         if (this._ranges.length > 1 && !this.$relatedContainer.parent().length) {
             this.$wrapper.before(this.$relatedContainer);
         }
+        
+        // If added rule is in a collapsed item, expand it for clarity
+        if (this._collapsedFiles[doc.file.fullPath]) {
+            this._toggleSection(doc.file.fullPath);
+        }
+        
+        // Select new range, showing it in the editor
+        this.setSelectedIndex(i, true);  // force, since i might be same as before
 
         this._updateCommands();
     };
 
     MultiRangeInlineEditor.prototype._updateSelectedMarker = function (animate) {
-        if (this._selectedRangeIndex < 0) {
-            return new $.Deferred().resolve().promise();
+        // If no selection or selection is in a collapsed section, just hide the marker
+        if (this._selectedRangeIndex < 0 || this._collapsedFiles[this._getSelectedRange().textRange.document.file.fullPath]) {
+            this.$selectedMarker.hide();
+            return;
         }
         
-        var result = new $.Deferred(),
-            $rangeItem = this._ranges[this._selectedRangeIndex].$listItem;
+        var $rangeItem = this._ranges[this._selectedRangeIndex].$listItem;
         
-        // scroll the selection to the rangeItem, use setTimeout to wait for DOM updates
-        var self = this;
-        window.setTimeout(function () {
-            var containerHeight = self.$relatedContainer.height(),
-                itemTop = $rangeItem.position().top,
-                scrollTop = self.$relatedContainer.scrollTop();
-            
-            self.$selectedMarker
-                .toggleClass("animate", animate)
-                .css("top", itemTop)
-                .height($rangeItem.outerHeight());
-            
-            if (containerHeight <= 0) {
-                return;
-            }
-            
-            var paddingTop = _parseStyleSize($rangeItem.parent(), "paddingTop");
-            
-            if ((itemTop - paddingTop) < scrollTop) {
-                self.$relatedContainer.scrollTop(itemTop - paddingTop);
-            } else {
-                var itemBottom = itemTop + $rangeItem.height() + _parseStyleSize($rangeItem.parent(), "paddingBottom");
-                
-                if (itemBottom > (scrollTop + containerHeight)) {
-                    self.$relatedContainer.scrollTop(itemBottom - containerHeight);
-                }
+        // scroll the selection to the rangeItem
+        var containerHeight = this.$relatedContainer.height(),
+            itemTop = $rangeItem.position().top,
+            scrollTop = this.$relatedContainer.scrollTop();
+
+        this.$selectedMarker
+            .show()
+            .toggleClass("animate", animate)
+            .css("top", itemTop)
+            .height($rangeItem.outerHeight());
+
+        if (containerHeight <= 0) {
+            return;
+        }
+
+        var paddingTop = _parseStyleSize($rangeItem.parent(), "paddingTop");
+
+        if ((itemTop - paddingTop) < scrollTop) {
+            this.$relatedContainer.scrollTop(itemTop - paddingTop);
+        } else {
+            var itemBottom = itemTop + $rangeItem.height() + _parseStyleSize($rangeItem.parent(), "paddingBottom");
+
+            if (itemBottom > (scrollTop + containerHeight)) {
+                this.$relatedContainer.scrollTop(itemBottom - containerHeight);
             }
-            
-            result.resolve();
-        }, 0);
-        
-        return result.promise();
+        }
     };
 
     /**
@@ -509,7 +658,7 @@ define(function (require, exports, module) {
             editorPos = $(editorRoot).offset();
         
         function containsClick($parent) {
-            return $parent.find(event.target) > 0 || $parent[0] === event.target;
+            return $parent.find(event.target).length > 0 || $parent[0] === event.target;
         }
         
         // Ignore clicks in editor and clicks on filename link
@@ -578,34 +727,57 @@ define(function (require, exports, module) {
         return this._selectedRangeIndex >= 0 ? this._ranges[this._selectedRangeIndex] : null;
     };
 
+    /**
+     * Move the selection up or down, skipping any collapsed groups. If selection is currently IN a
+     * collapsed group, we expand it first so that other items in the same file are eligible.
+     */
+    MultiRangeInlineEditor.prototype._selectNextPrev = function (dir) {
+        if (this._selectedRangeIndex === -1) {
+            return;
+        }
+        
+        // Traverse up or down the list until we find an item eligible for selection
+        var origDoc = this._ranges[this._selectedRangeIndex].textRange.document,
+            i;
+        for (i = this._selectedRangeIndex + dir; i >= 0 && i < this._ranges.length; i += dir) {
+            var doc = this._ranges[i].textRange.document;
+            
+            // If first candidate is in same collapsed group as current selection, expand it
+            if (doc === origDoc && this._collapsedFiles[doc.file.fullPath]) {
+                this._toggleSection(doc.file.fullPath);
+            }
+                
+            // Only consider expanded groups now
+            if (!this._collapsedFiles[doc.file.fullPath]) {
+                this.setSelectedIndex(i);
+                return;
+            }
+        }
+        // If we got here, we couldn't find any eligible item - so do nothing. Happens if selection is
+        // already the first/last item, or if all remaining items above/below the selection are collapsed.
+    };
+    
     /**
      * Display the next range in the range list
      */
     MultiRangeInlineEditor.prototype._selectNextRange = function () {
-        if (this._selectedRangeIndex < this._ranges.length - 1) {
-            this.setSelectedIndex(this._selectedRangeIndex + 1);
-        }
+        this._selectNextPrev(1);
     };
     
     /**
      *  Display the previous range in the range list
      */
     MultiRangeInlineEditor.prototype._selectPreviousRange = function () {
-        if (this._selectedRangeIndex > 0) {
-            this.setSelectedIndex(this._selectedRangeIndex - 1);
-        }
+        this._selectNextPrev(-1);
     };
 
     /**
      * Sizes the inline widget height to be the maximum between the range list height and the editor height
      * @override 
-     * @param {boolean} force the editor to resize
-     * @param {boolean} ensureVisibility makes the parent editor scroll to display the inline editor. Default true.
      */
-    MultiRangeInlineEditor.prototype.sizeInlineWidgetToContents = function (force, ensureVisibility) {
+    MultiRangeInlineEditor.prototype.sizeInlineWidgetToContents = function () {
         // Size the code mirror editors height to the editor content
-        // We use "call" rather than "apply" here since ensureVisibility was an argument added just for this override.
-        MultiRangeInlineEditor.prototype.parentClass.sizeInlineWidgetToContents.call(this, force);
+        MultiRangeInlineEditor.prototype.parentClass.sizeInlineWidgetToContents.call(this);
         
         // Size the widget height to the max between the editor/message content and the related ranges list
         var widgetHeight = Math.max(this.$related.height(),
@@ -613,7 +785,7 @@ define(function (require, exports, module) {
                                         (this._selectedRangeIndex === -1 ? this.$messageDiv.outerHeight() : this.$editorHolder.height()));
 
         if (widgetHeight) {
-            this.hostEditor.setInlineWidgetHeight(this, widgetHeight, ensureVisibility);
+            this.hostEditor.setInlineWidgetHeight(this, widgetHeight, false);
         }
     };
     
@@ -632,7 +804,7 @@ define(function (require, exports, module) {
      */
     MultiRangeInlineEditor.prototype.refresh = function () {
         MultiRangeInlineEditor.prototype.parentClass.refresh.apply(this, arguments);
-        this.sizeInlineWidgetToContents(true);
+        this.sizeInlineWidgetToContents();
         if (this.editor) {
             this.editor.refresh();
         }
diff --git a/src/extensibility/ExtensionManager.js b/src/extensibility/ExtensionManager.js
index dc5c1c6a2ea..6fff5a11435 100644
--- a/src/extensibility/ExtensionManager.js
+++ b/src/extensibility/ExtensionManager.js
@@ -610,46 +610,48 @@ define(function (require, exports, module) {
         }, []);
     }
 
-    function _autoInstallBundles() {
-        // Get list of extension bundles
-        var validatePromise,
-            dirPath     = FileUtils.getDirectoryPath(FileUtils.getNativeBracketsDirectoryPath()) + FOLDER_AUTOINSTALL + "/",
-            bundles     = [],
+    /**
+     * @private
+     * Find valid extensions in specified path
+     * @param {string} dirPath Directory with extensions
+     * @param {Object} autoExtensions Object that maps names of previously auto-installed
+     *      extensions {string} to installed version {string}.
+     * @return {$.Promise} Promise that resolves with arrays for extensions to update and install
+     */
+    function _getAutoInstallFiles(dirPath, autoExtensions) {
+        var zipFiles    = [],
             installZips = [],
             updateZips  = [],
             deferred    = new $.Deferred();
 
         FileSystem.getDirectoryForPath(dirPath).getContents(function (err, contents) {
-            var autoExtensions = PreferencesManager.getViewState(FOLDER_AUTOINSTALL) || {},
-                autoExtDirty   = false;
-
             if (!err) {
-                bundles = contents.filter(function (dirItem) {
+                zipFiles = contents.filter(function (dirItem) {
                     return (dirItem.isFile && FileUtils.getFileExtension(dirItem.fullPath) === "zip");
                 });
             }
 
             // Parse zip files and separate new installs vs. updates
-            validatePromise = Async.doInParallel(bundles, function (file) {
-                var result = new $.Deferred();
+            Async.doInParallel_aggregateErrors(zipFiles, function (file) {
+                var zipFilePromise = new $.Deferred();
 
                 // Call validate() so that we open the local zip file and parse the
                 // package.json. We need the name to detect if this zip will be a
                 // new install or an update.
                 Package.validate(file.fullPath, { requirePackageJSON: true }).done(function (info) {
                     if (info.errors.length) {
-                        result.reject(Package.formatError(info.errors));
+                        zipFilePromise.reject(Package.formatError(info.errors));
                         return;
                     }
 
-                    var extensionInfo, installedVersion,
+                    var extensionInfo, installedVersion, zipArray, existingItem,
                         extensionName   = info.metadata.name,
-                        autoExtVersion  = autoExtensions && autoExtensions[extensionName];
+                        autoExtVersion  = autoExtensions[extensionName];
 
                     // Verify extension has not already been auto-installed/updated
                     if (autoExtVersion && semver.lte(info.metadata.version, autoExtVersion)) {
-                        // Have already installed/updated version >= version of this extension
-                        result.reject();
+                        // Have already auto installed/updated version >= version of this extension
+                        zipFilePromise.reject();
                         return;
                     }
 
@@ -657,49 +659,93 @@ define(function (require, exports, module) {
                     extensionInfo = extensions[extensionName];
                     installedVersion = extensionInfo && extensionInfo.installInfo && extensionInfo.installInfo.metadata.version;
                     if (installedVersion && semver.lte(info.metadata.version, installedVersion)) {
-                        // Have already installed/updated version >= version of this extension
-                        result.reject();
+                        // Have already manually installed/updated version >= version of this extension
+                        zipFilePromise.reject();
                         return;
                     }
 
-                    // Keep track of auto-installed extensions so we only install an extension once
-                    autoExtensions[extensionName] = info.metadata.version;
-                    autoExtDirty = true;
-
-                    if (installedVersion) {
-                        updateZips.push(file);
+                    // Update appropriate zip array. There could be multiple zip files for an
+                    // extension, so make sure only the latest is stored
+                    zipArray = (installedVersion) ? updateZips : installZips;
+                    zipArray.some(function (zip) {
+                        if (zip.info.metadata.name === extensionName) {
+                            existingItem = zip;
+                            return true;
+                        }
+                        return false;
+                    });
+                    if (existingItem) {
+                        if (semver.lt(existingItem.info.metadata.version, info.metadata.version)) {
+                            existingItem.file = file;
+                            existingItem.info = info;
+                        }
                     } else {
-                        installZips.push(file);
+                        zipArray.push({ file: file, info: info });
                     }
 
-                    result.resolve();
+                    zipFilePromise.resolve();
                 }).fail(function (err) {
-                    result.reject(Package.formatError(err));
+                    zipFilePromise.reject(Package.formatError(err));
                 });
 
-                return result.promise();
+                return zipFilePromise.promise();
+            }).fail(function (errorArray) {
+                // Async.doInParallel() fails if some are successful, so write errors
+                // to console and always resolve
+                errorArray.forEach(function (errorObj) {
+                    if (errorObj.error) {
+                        if (errorObj.error.forEach) {
+                            console.error("Errors for", errorObj.item);
+                            errorObj.error.forEach(function (error) {
+                                console.error(Package.formatError(error));
+                            });
+                        } else {
+                            console.error("Error for", errorObj.item, errorObj);
+                        }
+                    }
+                });
+            }).always(function () {
+                deferred.resolve({
+                    installZips: installZips,
+                    updateZips:  updateZips
+                });
             });
+        });
 
-            validatePromise.done(function () {
-                var installPromise = Async.doSequentially(installZips, function (file) {
-                    return Package.installFromPath(file.fullPath);
-                });
+        return deferred.promise();
+    }
 
-                var updatePromise = installPromise.always(function () {
-                    return Async.doSequentially(updateZips, function (file) {
-                        return Package.installUpdate(file.fullPath);
-                    });
+    /**
+     * @private
+     * Auto-install extensions bundled with installer
+     * @return {$.Promise} Promise that resolves when finished
+     */
+    function _autoInstallExtensions() {
+        var dirPath        = FileUtils.getDirectoryPath(FileUtils.getNativeBracketsDirectoryPath()) + FOLDER_AUTOINSTALL + "/",
+            autoExtensions = PreferencesManager.getViewState(FOLDER_AUTOINSTALL) || {},
+            deferred       = new $.Deferred();
+
+        _getAutoInstallFiles(dirPath, autoExtensions).done(function (result) {
+            var installPromise = Async.doSequentially(result.installZips, function (zip) {
+                autoExtensions[zip.info.metadata.name] = zip.info.metadata.version;
+                return Package.installFromPath(zip.file.fullPath);
+            });
+
+            var updatePromise = installPromise.always(function () {
+                return Async.doSequentially(result.updateZips, function (zip) {
+                    autoExtensions[zip.info.metadata.name] = zip.info.metadata.version;
+                    return Package.installUpdate(zip.file.fullPath);
                 });
+            });
 
-                // Always resolve the outer promise
-                updatePromise.always(deferred.resolve);
-            }).fail(function (errorArray) {
-                deferred.reject(errorArray);
-            }).always(function () {
-                if (autoExtDirty) {
-                    // Store info in prefs
+            // Always resolve the outer promise
+            updatePromise.always(function () {
+                if (result.installZips.length > 0 || result.updateZips.length > 0) {
+                    // Keep track of auto-installed extensions so we only install an extension once
                     PreferencesManager.setViewState(FOLDER_AUTOINSTALL, autoExtensions);
                 }
+
+                deferred.resolve();
             });
         });
 
@@ -708,7 +754,7 @@ define(function (require, exports, module) {
 
     AppInit.appReady(function () {
         Package._getNodeConnectionDeferred().done(function () {
-            _autoInstallBundles();
+            _autoInstallExtensions();
         });
     });
 
@@ -746,6 +792,7 @@ define(function (require, exports, module) {
     exports.LOCATION_UNKNOWN  = LOCATION_UNKNOWN;
 
     // For unit testing only
-    exports._reset          = _reset;
-    exports._setExtensions  = _setExtensions;
+    exports._getAutoInstallFiles    = _getAutoInstallFiles;
+    exports._reset                  = _reset;
+    exports._setExtensions          = _setExtensions;
 });
diff --git a/src/extensions/default/DarkTheme/main.less b/src/extensions/default/DarkTheme/main.less
index b40225671e1..71425ba2661 100644
--- a/src/extensions/default/DarkTheme/main.less
+++ b/src/extensions/default/DarkTheme/main.less
@@ -49,7 +49,7 @@
     background: #2f2f2f;
 }
 
-&.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
+.show-line-padding .CodeMirror-focused .CodeMirror-activeline-background {
     box-shadow: inset 15px 0 0 0 #000;
 }
 
diff --git a/src/extensions/default/DebugCommands/keyboard.json b/src/extensions/default/DebugCommands/keyboard.json
index 5d12208df29..75ea3efd07d 100644
--- a/src/extensions/default/DebugCommands/keyboard.json
+++ b/src/extensions/default/DebugCommands/keyboard.json
@@ -20,6 +20,10 @@
     "reloadWithoutUserExts":  [
         {
             "key": "Shift-F5"
+        },
+        {
+            "key": "Cmd-Ctrl-R",
+            "platform": "mac"
         }
     ]
 }
\ No newline at end of file
diff --git a/src/extensions/default/DebugCommands/main.js b/src/extensions/default/DebugCommands/main.js
index 894a20a129d..6928dff75f3 100644
--- a/src/extensions/default/DebugCommands/main.js
+++ b/src/extensions/default/DebugCommands/main.js
@@ -315,6 +315,7 @@ define(function (require, exports, module) {
     menu.addMenuItem(DEBUG_RESTART_NODE);
     menu.addMenuItem(DEBUG_SHOW_ERRORS_IN_STATUS_BAR);
     menu.addMenuItem(Commands.FILE_OPEN_PREFERENCES); // this command is defined in core, but exposed only in Debug menu for now
+    menu.addMenuItem(Commands.FILE_OPEN_KEYMAP);      // this command is defined in core, but exposed only in Debug menu for now
     
     // exposed for convenience, but not official API
     exports._runUnitTests = _runUnitTests;
diff --git a/src/extensions/default/QuickOpenCSS/main.js b/src/extensions/default/QuickOpenCSS/main.js
index ef7f68481f0..5f30a515969 100644
--- a/src/extensions/default/QuickOpenCSS/main.js
+++ b/src/extensions/default/QuickOpenCSS/main.js
@@ -32,7 +32,8 @@ define(function (require, exports, module) {
     var EditorManager       = brackets.getModule("editor/EditorManager"),
         QuickOpen           = brackets.getModule("search/QuickOpen"),
         CSSUtils            = brackets.getModule("language/CSSUtils"),
-        DocumentManager     = brackets.getModule("document/DocumentManager");
+        DocumentManager     = brackets.getModule("document/DocumentManager"),
+        StringMatch         = brackets.getModule("utils/StringMatch");
 
 
     /**
@@ -73,7 +74,7 @@ define(function (require, exports, module) {
         });
         
         // Sort based on ranking & basic alphabetical order
-        QuickOpen.basicMatchSort(filteredList);
+        StringMatch.basicMatchSort(filteredList);
 
         return filteredList;
     }
diff --git a/src/extensions/default/QuickOpenHTML/main.js b/src/extensions/default/QuickOpenHTML/main.js
index 033946901ae..11225187ed2 100644
--- a/src/extensions/default/QuickOpenHTML/main.js
+++ b/src/extensions/default/QuickOpenHTML/main.js
@@ -31,7 +31,8 @@ define(function (require, exports, module) {
 
     var EditorManager       = brackets.getModule("editor/EditorManager"),
         QuickOpen           = brackets.getModule("search/QuickOpen"),
-        DocumentManager     = brackets.getModule("document/DocumentManager");
+        DocumentManager     = brackets.getModule("document/DocumentManager"),
+        StringMatch         = brackets.getModule("utils/StringMatch");
 
 
    /** 
@@ -107,7 +108,7 @@ define(function (require, exports, module) {
         });
         
         // Sort based on ranking & basic alphabetical order
-        QuickOpen.basicMatchSort(filteredList);
+        StringMatch.basicMatchSort(filteredList);
 
         return filteredList;
     }
diff --git a/src/extensions/default/QuickOpenJavaScript/main.js b/src/extensions/default/QuickOpenJavaScript/main.js
index bcc246aecc8..6b9019461f4 100644
--- a/src/extensions/default/QuickOpenJavaScript/main.js
+++ b/src/extensions/default/QuickOpenJavaScript/main.js
@@ -32,7 +32,8 @@ define(function (require, exports, module) {
     var EditorManager       = brackets.getModule("editor/EditorManager"),
         QuickOpen           = brackets.getModule("search/QuickOpen"),
         JSUtils             = brackets.getModule("language/JSUtils"),
-        DocumentManager     = brackets.getModule("document/DocumentManager");
+        DocumentManager     = brackets.getModule("document/DocumentManager"),
+        StringMatch         = brackets.getModule("utils/StringMatch");
 
 
    /** 
@@ -100,7 +101,7 @@ define(function (require, exports, module) {
         });
         
         // Sort based on ranking & basic alphabetical order
-        QuickOpen.basicMatchSort(filteredList);
+        StringMatch.basicMatchSort(filteredList);
 
         return filteredList;
     }
diff --git a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.html b/src/extensions/default/WebPlatformDocs/InlineDocsViewer.html
index d2d3b15d219..27fe5a1661f 100644
--- a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.html
+++ b/src/extensions/default/WebPlatformDocs/InlineDocsViewer.html
@@ -10,7 +10,7 @@ <h1>{{propName}}</h1>
         <div class="scroller" tabIndex="0"> <!-- tabIndex needed: otherwise can't be focused on open or via click -->
             <dl>
                 {{#propValues}}
-                <dt>{{value}}</dt>
+                <dt>{{{value}}}</dt>
                 <dd>{{{description}}}</dd>
                 {{/propValues}}
             </dl>
diff --git a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.js b/src/extensions/default/WebPlatformDocs/InlineDocsViewer.js
index 56d95c69703..ac3b988c5b5 100644
--- a/src/extensions/default/WebPlatformDocs/InlineDocsViewer.js
+++ b/src/extensions/default/WebPlatformDocs/InlineDocsViewer.js
@@ -49,19 +49,15 @@ define(function (require, exports, module) {
     
     /**
      * @param {!string} cssPropName
-     * @param {!{SUMMARY:string, URL:string, VALUES:Array.<{TITLE:string, DESCRIPTION:string}>}} cssPropDetails
+     * @param {!{SUMMARY:string, URL:string, VALUES:?Array.<{value:string, description:string}>}} cssPropDetails
      */
     function InlineDocsViewer(cssPropName, cssPropDetails) {
         InlineWidget.call(this);
         
-        var propValues = cssPropDetails.VALUES.map(function (valueInfo) {
-            return { value: valueInfo.TITLE, description: valueInfo.DESCRIPTION };
-        });
-        
         var templateVars = {
             propName    : cssPropName,
             summary     : cssPropDetails.SUMMARY,
-            propValues  : propValues,
+            propValues  : cssPropDetails.VALUES || [],
             url         : cssPropDetails.URL,
             Strings     : Strings
         };
@@ -75,9 +71,14 @@ define(function (require, exports, module) {
         this.$wrapperDiv.find("a").each(function (index, elem) {
             var $elem = $(elem);
             var url = $elem.attr("href");
-            if (url && url.substr(0, 4) !== "http") {
-                // URLs in JSON data are relative
-                url = "http://docs.webplatform.org" + (url.charAt(0) !== "/" ? "/" : "") + url;
+            if (url) {
+                if (url.charAt(0) === "#") {
+                    // Anchors in JSON data are relative to page URL
+                    url = templateVars.url + url;
+                } else if (url.substr(0, 4) !== "http") {
+                    // URLs in JSON data are relative
+                    url = "http://docs.webplatform.org" + (url.charAt(0) !== "/" ? "/" : "") + url;
+                }
                 $elem.attr("href", url);
             }
             $elem.attr("title", url);
diff --git a/src/extensions/default/WebPlatformDocs/README.md b/src/extensions/default/WebPlatformDocs/README.md
new file mode 100644
index 00000000000..12ce7e5dc90
--- /dev/null
+++ b/src/extensions/default/WebPlatformDocs/README.md
@@ -0,0 +1,5 @@
+# Updating the Docs
+Use the Node script [update-wpd-docs](https://github.com/MarcelGerber/update-wpd-docs) to update the `css.json` contents:
+```
+[sudo] node update-wpd-docs --exclude-vendor-prefixed --output <bracketsRepo>/src/extensions/default/WebPlatformDocs/css.json
+```
diff --git a/src/extensions/default/WebPlatformDocs/WebPlatformDocs.less b/src/extensions/default/WebPlatformDocs/WebPlatformDocs.less
index 153986d6ec0..d5401dc3d2c 100644
--- a/src/extensions/default/WebPlatformDocs/WebPlatformDocs.less
+++ b/src/extensions/default/WebPlatformDocs/WebPlatformDocs.less
@@ -57,6 +57,15 @@
     b {
         font-weight: @font-weight-semibold;
     }
+
+    table {
+        width: 100%;
+        margin-bottom: 1em;
+        th, td {
+            border: 1px solid lighten(@bc-text-thin-quiet, 20%);
+            padding: 0 .15em;
+        }
+    }
 }
 
 /* Left-hand column */
@@ -207,5 +216,11 @@ a.more-info {
             color: @dark-bc-text;
             text-shadow: 0 1px 0 @dark-bc-highlight;
         }
+
+        table {
+            th, td {
+                border-color: darken(@dark-bc-text-thin-quiet, 35%);
+            }
+        }
     }
 }
diff --git a/src/extensions/default/WebPlatformDocs/css.json b/src/extensions/default/WebPlatformDocs/css.json
index dda8003f9cf..c1091c11744 100644
--- a/src/extensions/default/WebPlatformDocs/css.json
+++ b/src/extensions/default/WebPlatformDocs/css.json
@@ -1 +1 @@
-{"HASH":"497A85B8CC8FF3874748396CA4F3A437F400F281","PROPERTIES":{"css\/properties\/widows":{"SUMMARY":"<p>Defines the minimum number of lines that can appear in the beginning of a new page. In typography, a widow is the last line of a paragraph appearing alone at the top of a page, which is considered to look awkward. Setting the widows property to an integer higher than 1 prevents this.\n<\/p><p>On a non-paged media, like screen, the widows CSS property has no effect.\nIt can have a number value or it can inherit the values from the parent element.\n<\/p>","INITIALVALUE":2,"ID":"css\/properties\/widows","ANIMATABLE":false,"COMPUTEDVALUE":"As specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/widows","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Denotes the minimum amount of lines that can stay alone on the top of a new page. If the value is not positive, the declaration is invalid.\n<\/p>","TITLE":"integer"}]},"css\/properties\/text-kashida-space":{"SUMMARY":"","INITIALVALUE":"0%","ID":"css\/properties\/text-kashida-space","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-kashida-space","STATUS":"","VALUES":[{"DESCRIPTION":"<p>An integer, followed by a&#160;%. The value is the ratio of kashida expansion to white space expansion. 100% specifies kashida expansion only, and 0% specifies white space expansion only\n<\/p>","TITLE":"percentage"}]},"css\/properties\/outline-color":{"SUMMARY":"<p>The outline-color property sets the color of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline\" title=\"css\/properties\/outline\">outline<\/a> of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\n<\/p>","INITIALVALUE":"invert","ID":"css\/properties\/outline-color","ANIMATABLE":true,"COMPUTEDVALUE":"The computed value for ‘invert’ is ‘invert’. For &lt;color&gt; values, the computed value is as defined for the ‘color’ property.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-color","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>This is expected to perform a color inversion on the pixels on the screen.\n<\/p>","TITLE":"invert"},{"DESCRIPTION":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Specify the color to use on all outlines. This can be anywhere from one to four values representing the top, right, bottom, and left outline respectively.\n<\/p>","TITLE":"<color>"}]},"css\/properties\/left":{"SUMMARY":"<p>Sets the left edge of an element\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/left","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/left","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Default. Default position, according to the regular HTML layout of the page.\n<\/p>","TITLE":"auto"}]},"css\/properties\/mask-position":{"SUMMARY":"<p>The \"mask-position\" property sets the initial position of a mask image. Position can be specified in terms of percentages of the distance from upper left corner (original point) or using the keywords top, left, center, right, or bottom.\n<\/p>","INITIALVALUE":"0% 0%","ID":"css\/properties\/mask-position","ANIMATABLE":true,"COMPUTEDVALUE":"A list, each item consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a &lt;length&gt;), otherwise as a percentage.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-position","STATUS":"","VALUES":[{"DESCRIPTION":"<p>the first number represents the percentage of distance away from the left side of the page, the second number represents the percentage of distance away from the upper side of the page. With a initial value pair of 0% 0%, the mask image is be placed at the upper left corner of the page. . With a value pair of 30% 70%, the mask image is be placed at the point 30% across and 70% down the page.\n<\/p>","TITLE":"<percentage>"},{"DESCRIPTION":"<p>equivalent to 100% for second ( vertical ) number\n<\/p>","TITLE":"bottom"},{"DESCRIPTION":"<p>the first number represents the distance away from the left side of the page, the second number represents the distance away from the upper side of the page.\n<\/p>","TITLE":"<length>"},{"DESCRIPTION":"<p>equivalent to 50% 50%\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>equivalent to 100% for first ( horizontal ) number\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>equivalent to 0% for second ( vertical ) number\n<\/p>","TITLE":"top"},{"DESCRIPTION":"<p>equivalent to 0% for first ( horizontal ) number\n<\/p>","TITLE":"left"}]},"css\/properties\/ms-scroll-limit-yMax":{"SUMMARY":"","INITIALVALUE":0,"ID":"css\/properties\/ms-scroll-limit-yMax","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-yMax","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The maximum value for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollTop\" title=\"dom\/properties\/scrollTop\"><b>scrollTop<\/b><\/a> property.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The maximum value for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollTop\" title=\"dom\/properties\/scrollTop\"><b>scrollTop<\/b><\/a> property is equal to <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollHeight\" title=\"dom\/properties\/scrollHeight\"><b>scrollHeight<\/b><\/a>.\n<\/p>","TITLE":"auto"}]},"css\/properties\/flex-flow":{"SUMMARY":"<p>The <b>flex-flow<\/b> CSS property defines the flex container's main and cross axis. It is a shorthand property for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-direction\" title=\"css\/properties\/flex-direction\">flex-direction<\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-wrap\" title=\"css\/properties\/flex-wrap\">flex-wrap<\/a> properties.\n<\/p>","INITIALVALUE":"See individual properties.","ID":"css\/properties\/flex-flow","ANIMATABLE":false,"COMPUTEDVALUE":"See individual properties.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-flow","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The shorthand value includes the values of the following properties: \n<\/p>\n<ul><li> <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-direction\" title=\"css\/properties\/flex-direction\">flex-direction<\/a>\n<\/li><li> <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-wrap\" title=\"css\/properties\/flex-wrap\">flex-wrap<\/a>\n<\/li><\/ul>\n","TITLE":"<flex-direction> <flex-wrap>"}]},"css\/properties\/writing-mode":{"SUMMARY":"<p><code>writing-mode<\/code> specifies if lines of text are laid out horizontally or vertically, and the direction which lines of text and blocks progress.\n<\/p>","INITIALVALUE":"horizontal-tb","ID":"css\/properties\/writing-mode","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Lines of text are laid out vertically, and progress from the right to the left of the page. Asian languages, such as Chinese or Japanese traditionally used this writing mode.\n<\/p>","TITLE":"vertical-rl"},{"DESCRIPTION":"<p>Lines of text are laid out vertically, and progress from the left to the right of the page. Mongolian-based writing systems typically use this writing mode.\n<\/p>","TITLE":"vertical-lr"},{"DESCRIPTION":"<p>Lines of text are laid out horizontally, and progress from the top to the bottom of the page. This is the writing mode used in many writing systems, such as Latin, Greek, Cyrillic, Arabic, Hebrew, etc.\n<\/p>","TITLE":"horizontal-tb"}]},"css\/properties\/overflow-style":{"SUMMARY":"<p>Specifies the preferred scrolling methods for elements that overflow.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/overflow-style","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow-style","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all the available content of the element and the smaller one the visible part. The smaller rectangle can be moved around by the user to move the content of the element accordingly.\n<\/p>","TITLE":"panner"},{"DESCRIPTION":"<p>Indicates the element does not display any scrolling mechanism, even when its content overflows. \n<\/p><p>Unlike <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow\" title=\"css\/properties\/overflow\"><b>overflow<\/b><\/a>: <b>hidden<\/b>, elements with <b>overflow-style<\/b>: <b>none<\/b> can still be scrolled via touch panning, keyboard, or mouse wheel.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Initial value. Indicates no preference.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Indicates the element displays a classic scrollbar-type control when its content overflows.  \n<\/p><p>Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear.\n<\/p>","TITLE":"scrollbar"},{"DESCRIPTION":"<p>The value ‘move’ refers to a method where the user can move the content of the element directly (rather than indirectly by moving a scrollbar or a panner). Typically, the mouse pointer changes into a hand or a cross of four arrows to indicate that the user can drag the content around with the mouse. Sometimes the user needs to explicitly activate the move mode and in that case he often can use both dragging (with the mouse) and key events to move the content.\n<\/p>","TITLE":"move"},{"DESCRIPTION":"<p>The marquee effect (value ‘marquee’) consists of the content moving autonomously, without any user events to control it. A user who waits long enough will eventually see all the content that overflows.\n<\/p>","TITLE":"marquee"}]},"css\/properties\/text-indent":{"SUMMARY":"<p>Specifies the amount of space horizontally that should be left on the first line of the text of an element. This horizontal spacing is at the beginning of the first line and is in respect to the left edge of the containing block box.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/text-indent","ANIMATABLE":false,"COMPUTEDVALUE":"percentage or absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-indent","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>This value can only be used in conjunction with a length or percentage value (<code>text-indent: 7px each-line;<\/code>). It indents all lines in the element, not just the first line.\n<\/p><p>Currently an experimental feature.\n<\/p>","TITLE":"<length\/percentage> each-line"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). This value is a percentage of the width of the parent object.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>This value can only be used in conjunction with a length or percentage value (<code>text-indent: 7px each-line;<\/code>). It will affect not only the first line of the block container but also any line that is after a forced line break. This does not have affect on soft wrap break.\n<\/p><p>Currently experimental in CSS Text Level 3\n<\/p>","TITLE":"<length\/percentage> each-line"},{"DESCRIPTION":"<p>This value can only be used in conjunction with a length or percentage value (<code>text-indent: 7px hanging;<\/code>). It inverts which lines are indented so that everything but the first formatted line is indented. \n<\/p><p>Currently an experimental feature.\n<\/p>","TITLE":"<length\/percentage> hanging"},{"DESCRIPTION":"<p>Inherits the value from the cascade.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/marquee-style":{"SUMMARY":"<p>The 'marquee-style' property determines a marquee's scrolling behavior.\n<\/p>","INITIALVALUE":"scroll","ID":"css\/properties\/marquee-style","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/marquee-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Bounce back and forth.\n<\/p>","TITLE":"alternate"},{"DESCRIPTION":"<p>Start completely off one side, scroll all the way across and completely off.\n<\/p>","TITLE":"scroll"},{"DESCRIPTION":"<p>Start completely off one side, scroll in, and stop as soon as no more content is off that side.\n<\/p>","TITLE":"slide"}]},"css\/properties\/kerning-mode":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/kerning-mode","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/kerning-mode","STATUS":"","VALUES":[]},"css\/properties\/mask-box-image":{"SUMMARY":"<p>This is a shorthand property for setting ‘mask-box-image-source’, ‘mask-box-image-slice’, ‘mask-box-image-width’, ‘mask-box-image-outset’ and ‘mask-box-image-repeat’. Omitted values are set to their initial values.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-box-image","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-box-image","STATUS":"","VALUES":[]},"css\/properties\/mask":{"SUMMARY":"<p>Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define sections of the mask. The default state of a mask is fully transparent which is the opposite of clipping plane. The graphics in a mask sets how opaque portions of the mask are.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/mask","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask","STATUS":"","VALUES":[]},"css\/properties\/grid-auto-flow":{"SUMMARY":"<p>The ‘grid-auto-flow’ property controls the direction to place content in unoccupied spaces: either by rows, or by columns, or without specification of rows or columns, in other words based on the next available space in order.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/grid-auto-flow","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-auto-flow","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Causes items to be placed by filling each row in turn, adding new rows as necessary.\n<\/p>","TITLE":"rows"},{"DESCRIPTION":"<p>Causes items to be placed at the next available space that provides sufficient span. The slot selected will have its before and start edges at the first grid line in the relevant dimension, and its after and end edges to the amount of span specified on the grid item. (If no span is specified, the default span is 1.)\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Causes items to be placed by filling each column in turn, adding new columns as necessary.\n<\/p>","TITLE":"columns"}]},"css\/properties\/overflow-wrap":{"SUMMARY":"<p>This property specifies whether or not particularly long words will be 'broken' (separated into multiple lines) if necessary in order to fit in within its container.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/overflow-wrap","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow-wrap","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.)\n<\/p><p>This is the default option.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Lines can be broken at any point if necessary to preverse the limits of the container element -- for example, \"hamburger\" can be broken into \"ham\" and \"burger\" across separate lines.\n<\/p>","TITLE":"break-word"}]},"css\/properties\/alignment-adjust":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/alignment-adjust","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/alignment-adjust","STATUS":"","VALUES":[]},"css\/properties\/border-left-color":{"SUMMARY":"<p>The CSS border-left-color property sets the color of an element's left border. This page explains the border-left-color value, but often you will find it more convenient to fix the border's left color as part of a shorthand set, either <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left\" title=\"css\/properties\/border-left\">border-left<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/color\" title=\"css\/data types\/color\">Colors<\/a> can be defined several ways. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-color#Usage\" title=\"css\/properties\/border-left-color\">Usage<\/a>.\n<\/p>","INITIALVALUE":"color - The value of the 'color' property","ID":"css\/properties\/border-left-color","ANIMATABLE":true,"COMPUTEDVALUE":"when taken from the 'color' property, the computed value of 'color'; otherwise, as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-color","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-color#Usage\" title=\"css\/properties\/border-left-color\">Usage<\/a>.\n<\/p>","TITLE":"<color>"},{"DESCRIPTION":"<p>The same as ‘color: inherit’, the color value inherited from parent object.\n<\/p>","TITLE":"currentColor"},{"DESCRIPTION":"<p>currentColor, the color value inherited from parent object.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.\n<\/p>","TITLE":"transparent"}]},"css\/properties\/border-width":{"SUMMARY":"<p>Sets the width of an element's four borders. This property can have from one to four values. This is a shorthand property for setting values simultaneously for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width\" title=\"css\/properties\/border-top-width\">border-top-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width\" title=\"css\/properties\/border-right-width\">border-right-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width\" title=\"css\/properties\/border-bottom-width\">border-bottom-width<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width\" title=\"css\/properties\/border-left-width\">border-left-width<\/a>.\n<\/p>","INITIALVALUE":"medium, for all 4 values","ID":"css\/properties\/border-width","ANIMATABLE":true,"COMPUTEDVALUE":"An absolute length, for all 4 values; 0 if the border style is 'none' or 'hidden'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Greater than the default width.\n<\/p>","TITLE":"thick"},{"DESCRIPTION":"<p>Less than the default width.\n<\/p>","TITLE":"thin"},{"DESCRIPTION":"<p>Shorthand syntax. See notes below.\n<\/p>","TITLE":"<border-top-width> <border-right-width> <border-bottom-width> <border-left-width>"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"<width>"},{"DESCRIPTION":"<p>Default.  \n<\/p>","TITLE":"medium"}]},"css\/properties\/text-height":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/text-height","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-height","STATUS":"","VALUES":[]},"css\/properties\/font-size-adjust":{"SUMMARY":"<p>The <code>font-size-adjust<\/code> property adjusts the font-size of the fallback fonts defined with <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-family\" title=\"css\/properties\/font-family\">font-family<\/a>, so that the <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=x-height&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"x-height (page does not exist)\">x-height<\/a> is the same no matter what font is used. This preserves the readability of the text when fallback happens.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/font-size-adjust","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-size-adjust","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Only use the font-size value to determine the size of the font.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The aspect value is calculated by the browser for the first font in the font-family list, and used for every font in that list.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The value used in calculating the size of the fallback fonts. For the adjusted font size calculation, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-size-adjust#Notes\" title=\"css\/properties\/font-size-adjust\">Notes<\/a>.\n<\/p>","TITLE":"number"}]},"css\/properties\/grid-auto-rows":{"SUMMARY":"<p>The size of rows when row size has not been explicitly sized by ‘grid-definition-row’.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/grid-auto-rows","ANIMATABLE":false,"COMPUTEDVALUE":"Relative to the height of the grid container. If the extent of the grid container is an indefinite size, &lt;percentage&gt; values relative to that size are treated as ‘auto’.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-auto-rows","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The size range of the track. Greater than or equal to min and less than or equal to max. If max less than min, then max is ignored and ‘minmax(min,max)’ is treated as min.\n<\/p>","TITLE":"<track-minmax>"}]},"css\/properties\/column-gap":{"SUMMARY":"<p>The <code>column-gap<\/code> property controls the width of the gap between columns in multi-column elements.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/column-gap","ANIMATABLE":true,"COMPUTEDVALUE":"absolute length or ‘normal’","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-gap","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>A floating-point number, followed by either an absolute units designator\n(<code>cm<\/code>,\n<code>mm<\/code>,\n<code>in<\/code>,\n<code>pt<\/code>,\nor <code>pc<\/code>)\nor a relative units designator\n(<code>em<\/code>,\n<code>ex<\/code>,\nor <code>px<\/code>), that indicates the width of the gap between columns.\nFor more information about the supported length units,\nsee CSS Length Units Reference.\n<\/p><p><br \/>\nNegative values are not valid.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Default. The width of the <code>normal<\/code> value is user-agent specific, but <code>1em<\/code> is suggested.\n<\/p>","TITLE":"normal"}]},"css\/properties\/margin-top":{"SUMMARY":"<p><code>margin-top<\/code> sets the top margin of an element.\n<\/p>","INITIALVALUE":"Depends on the particular element. Different elements have different default margins.","ID":"css\/properties\/margin-top","ANIMATABLE":true,"COMPUTEDVALUE":"As specified, but with relative lengths converted into absolute pixel values.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin-top","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a fixed length, using any standard  <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/docs.webplatform.org\/wiki\/css\/units\/length\">CSS length units<\/a> . Negative Values are allowed.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.)\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Inherits the parent element's specified <code>margin-top<\/code> width.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>The browser calculates a bottom margin dependent on the space available.\n<\/p>","TITLE":"auto"}]},"css\/properties\/all-space-treatment":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/all-space-treatment","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/all-space-treatment","STATUS":"","VALUES":[]},"css\/properties\/width":{"SUMMARY":"<p>Specifies the width of the content area of an element. The content area of the element width does not include the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding\" title=\"css\/properties\/padding\">padding<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border\" title=\"css\/properties\/border\">border<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin\" title=\"css\/properties\/margin\">margin<\/a> of the element.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/width","ANIMATABLE":true,"COMPUTEDVALUE":"percentage or absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/width","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The containing block width minus horizontal margin, border, and padding\n<\/p>","TITLE":"available"},{"DESCRIPTION":"<p>If border-box is used, the length or percentage defined will be applied to the element's border box.\n<\/p>","TITLE":"border-box"},{"DESCRIPTION":"<p>The intrinsic minimum width\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>The intrinsic preferred width\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>This will be either the large of the minimum width or the smaller of the preferred width and the available width\n<\/p>","TITLE":"fit-content"},{"DESCRIPTION":"<p>If content-box is used, the length or percentage defined will be applied to the element's content-box.\n<\/p>","TITLE":"content-box"},{"DESCRIPTION":"<p>Will take a number that is immediately followed by a length unit such as px, em, in,  etc.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>If auto is set for the elements width, the browser will determine the width for the element.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Integer, followed by a&#160;%. The value is a percentage of the width of the parent object, whether or not it is specified explicitly.  Negative values are not allowed.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/float":{"SUMMARY":"<p>Elements which have the style <code>float<\/code>  are floated horizontally.  These elements can move as far to the <code> left<\/code> or <code>right<\/code>  of the containing element.  All elements after the floating element will flow around it, but elements before the floating element are not impacted.  If several floating elements are placed after each other, they will float next to each other as long as there is room.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/float","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/float","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>left<\/code> value indicates that the element must float to the far left side of its containing block.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>The <code>right<\/code> value indicates that the element must float to the far right side of its containing block.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p><code>none<\/code> indicates that the element does not contain any float at all. This is the initial value of the <code>float<\/code> property.\n<\/p>","TITLE":"none"}]},"css\/properties\/caption-side":{"SUMMARY":"<p>Specifies the placement of a table caption.\n<\/p>","INITIALVALUE":"top","ID":"css\/properties\/caption-side","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/caption-side","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Positions the caption box above the table box.\n<\/p>","TITLE":"top"},{"DESCRIPTION":"<p>Positions the caption box below the table box.\n<\/p>","TITLE":"bottom"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/font-stretch":{"SUMMARY":"<p>Allows you to expand or condense the widths for a normal, condensed, or expanded font face.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/font-stretch","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-stretch","STATUS":"","VALUES":[{"DESCRIPTION":"<p>This is the least expanded setting.\n<\/p>","TITLE":"semi-expanded"},{"DESCRIPTION":"<p>This is the second most condensed setting.\n<\/p>","TITLE":"extra-condensed"},{"DESCRIPTION":"<p>This is the most condensed setting.\n<\/p>","TITLE":"ultra-condensed"},{"DESCRIPTION":"<p>This is the default setting.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>This expands the font face in Internet Explorer only.\n<\/p>","TITLE":"wider (Internet Explorer only)"},{"DESCRIPTION":"<p>This is the second most expanded setting.\n<\/p>","TITLE":"extra-expanded"},{"DESCRIPTION":"<p>Some font faces incorporate a condensed option, this is the equivalent of that setting.\n<\/p>","TITLE":"condensed"},{"DESCRIPTION":"<p>This condenses the font face in Internet Explorer only.\n<\/p>","TITLE":"narrower (Internet Explorer only)"},{"DESCRIPTION":"<p>This is the least condensed setting.\n<\/p>","TITLE":"semi-condensed"},{"DESCRIPTION":"<p>Some font faces incorporate an expanded option, this is the equivalent of that setting.\n<\/p>","TITLE":"expanded"},{"DESCRIPTION":"<p>This is the most expanded setting.\n<\/p>","TITLE":"ultra-expanded"}]},"css\/properties\/backface-visibility":{"SUMMARY":"<p>Determines whether or not the “back” side of a transformed element is visible when facing the viewer.\n<\/p>","INITIALVALUE":"visible","ID":"css\/properties\/backface-visibility","ANIMATABLE":true,"COMPUTEDVALUE":"Same as specified value.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/backface-visibility","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The back face of an element is a transparent background, displaying a mirror image of the front face when the back face is observable.\n<\/p>","TITLE":"visible"},{"DESCRIPTION":"<p>There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side). In this case, the property should be set to hidden to make the back face of the element opaque.\n<\/p>","TITLE":"hidden"}]},"css\/properties\/hyphenate-limit-lines":{"SUMMARY":"<p>Indicates the maximum number of successive hyphenated lines in an element. The ‘no-limit’ value means that there is no limit.\n<\/p>","INITIALVALUE":"no-limit","ID":"css\/properties\/hyphenate-limit-lines","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/hyphenate-limit-lines","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>Indicates the maximum number of successive hyphenated lines.\n<\/p><p>For instance, if <code>2<\/code>, then no more than 2 successive lines may end with a hyphenated word. If <code>0<\/code> then no lines may end with a hyphenated word. (Hyphenation is effectively disabled.)\n<\/p><p>Negative values are not allowed.\n<\/p>","TITLE":"[[css\/data_types\/integer|integer]]"},{"DESCRIPTION":"<p>Indicates that hyphenation is not limited based on the number of consecutive hyphenated lines. In the flow above the consecutive hyphenated lines limit would be an infinitely large positive number.\n<\/p>","TITLE":"no-limit"}]},"css\/properties\/font-feature-settings":{"SUMMARY":"<p>The <code>font-feature-settings<\/code> property gets or sets one or more values that specify glyph substitution and positioning in fonts that include OpenType layout features.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/font-feature-settings","ANIMATABLE":false,"COMPUTEDVALUE":"As specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-feature-settings","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Default. No change in glyph substitution or positioning occurs.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>This property can take up to two separate parts in its value. The options are as follows:\n<\/p>\n<ul><li> <b>OpenType feature tag<\/b>: Comma-separated list of one or more OpenType layout feature tags (each with an optional toggle). See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-feature-settings#Notes\" title=\"css\/properties\/font-feature-settings\">Notes<\/a> for examples of correct syntax, plus a table of the most common feature tags and their definitions.\n<\/li><li> <b>Indicator<\/b>: 0 indicates that the feature is disabled. For boolean features, 1 indicates that feature is enabled. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. For non-boolean features, 1 or greater indicates the feature selection index.\n<\/li><\/ul>\n","TITLE":"\"OpenType feature tag\" Indicator"}]},"css\/properties\/page-break-before":{"SUMMARY":"<p>The page-break-before property sets the page-breaking behavior before an element.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/page-break-before","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/page-break-before","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Insert page breaks before the element until it reaches a blank right page.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>Insert a page break before the element.\n<\/p>","TITLE":"always"},{"DESCRIPTION":"<p>Specifies that the value of the page-break-before property should be inherited from the parent element\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Insert page breaks before the element until it reaches a blank left page.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Avoid inserting a page break before the element.\n<\/p>","TITLE":"avoid"},{"DESCRIPTION":"<p>Behaves the same as <b>auto<\/b>.\n<\/p>","TITLE":"empty string"},{"DESCRIPTION":"<p>Default. Insert a page break before the element if necessary.\n<\/p>","TITLE":"auto"}]},"css\/properties\/animation-delay":{"SUMMARY":"<p>Defines the length of time that must elapse before an animation starts\n<\/p>","INITIALVALUE":"0s","ID":"css\/properties\/animation-delay","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-delay","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>This value defines the initial delay for two animations. Like durations, delays can be specified in seconds or milliseconds.\n<\/p>","TITLE":".25s, 100ms"},{"DESCRIPTION":"<p>The initial value of 0s means the animation will start executing as soon as it is applied through the [css\/properties\/animation-name\n<\/p>","TITLE":"0s"},{"DESCRIPTION":"<p>If the value for <b>animation-delay<\/b> is negative then the animation will execute the moment it is applied but will begin execution at the specified offset. That is, the animation appears to begin part-way through its play cycle.\n<\/p>","TITLE":"-1.5s"}]},"css\/properties\/padding-bottom":{"SUMMARY":"<p>The <code>padding-bottom<\/code> is an optional CSS property of an element that sets the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding\" title=\"css\/properties\/padding\">padding<\/a> space required below an element.  The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted. The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased.  Negative values are not permitted.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/padding-bottom","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage as specified or a absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-bottom","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a positive fixed distance. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for details.  Can not be a negative number.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Calculated using the dimensions of the containing block or element.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/animation-timing-function":{"SUMMARY":"<p>Defines how the intermediate property values used during an animation are calculated\n<\/p>","INITIALVALUE":"ease","ID":"css\/properties\/animation-timing-function","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-timing-function","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Default. The animation begins and ends gradually; this value is equivalent to <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\">cubic-bezier(0.25,0.1,0.25,1)<\/a><\/code>.\n<\/p>","TITLE":"ease"},{"DESCRIPTION":"<p>Equivalent to steps(1,start).\n<\/p>","TITLE":"step-start"},{"DESCRIPTION":"<p>Specifies a stepping function using two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0. The second optional is either the value <code>start<\/code> or <code>end<\/code> and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value <code>end<\/code>.\n<\/p>","TITLE":"steps(3, end)"},{"DESCRIPTION":"<p>Specifies a cubic bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range. This function is used to specify custom timing functions.\n<\/p>","TITLE":"cubic-bezier(0,0,1,1)"},{"DESCRIPTION":"<p>The animation begins at a steady rate then gradually ends; this value is equivalent to <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\">cubic-bezier(0,0,0.58,1)<\/a><\/code>.\n<\/p>","TITLE":"ease-out"},{"DESCRIPTION":"<p>Equivalent to steps(1,end).\n<\/p>","TITLE":"step-end"},{"DESCRIPTION":"<p>The animation begins and ends gradually; equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0.42,0,0.58,1)<\/b><\/a>. Note that this timing function is similar to <code>ease<\/code> thought the latter starts faster than it ends.\n<\/p>","TITLE":"ease-in-out"},{"DESCRIPTION":"<p>The animation begins and progresses at a constant rate over the specified duration; this value is equivalent to <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0,0,1,1)<\/b><\/a><\/code>\n<\/p>","TITLE":"linear"},{"DESCRIPTION":"<p>The animation begins gradually and progresses at a steady rate; this value is equivalent to <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\">cubic-bezier(0.42,0,1,1)<\/a><\/code>.\n<\/p>","TITLE":"ease-in"}]},"css\/properties\/text-decoration-line":{"SUMMARY":"<p>The text-decoration-line CSS property sets what kind of line decorations are added to an element.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-decoration-line","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-line","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Each line of text has a line above it.\n<\/p>","TITLE":"overline"},{"DESCRIPTION":"<p>Each line of text is underlined.\n<\/p>","TITLE":"underline"},{"DESCRIPTION":"<p>Each line of text has a line through the middle.\n<\/p>","TITLE":"line-through"},{"DESCRIPTION":"<p>Produces no text decoration.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Mozilla CSS Extension, not suitable for web content.\n<\/p>","TITLE":"-moz-anchor-decoration"}]},"css\/properties\/border-bottom-color":{"SUMMARY":"<p>Sets the color of the bottom border. This page explains the border-bottom-color value, but often you will find it more convenient to fix the border's bottom color as part of a shorthand set, either <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom\" title=\"css\/properties\/border-bottom\">border-bottom<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/color\" title=\"css\/data types\/color\">Colors<\/a> can be defined several ways. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-color#Usage\" title=\"css\/properties\/border-bottom-color\">Usage<\/a>.\n<\/p>","INITIALVALUE":"color - The value of the 'color' property","ID":"css\/properties\/border-bottom-color","ANIMATABLE":true,"COMPUTEDVALUE":"when taken from the 'color' property, the computed value of 'color'; otherwise, as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-color","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.\n<\/p>","TITLE":"transparent"},{"DESCRIPTION":"<p>currentColor, the color value inherited from parent object.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>The same as ‘color: inherit’, the color value inherited from parent object.\n<\/p>","TITLE":"currentColor"},{"DESCRIPTION":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-color#Usage\" title=\"css\/properties\/border-bottom-color\">Usage<\/a>.\n<\/p>","TITLE":"<color>"}]},"css\/properties\/color":{"SUMMARY":"<p>The color property sets the color of an element's foreground content (usually text), accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a).\n<\/p>","INITIALVALUE":"black, except in a few cases (see notes)","ID":"css\/properties\/color","ANIMATABLE":true,"COMPUTEDVALUE":"For a non-translucent color, an hexadecimal equivalent is used. Otherwise it is the RGBa equivalent","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/color","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/color\" title=\"css\/color\">CSS color value<\/a>\n<\/p>","TITLE":"color"}]},"css\/properties\/box-decoration-break":{"SUMMARY":"<p>Breaks a box into fragments creating new borders, padding and repeating backgrounds or lets it stay as a continuous box on a page break, column break, or, for inline elements, at a line break.\n<\/p>","INITIALVALUE":"slice","ID":"css\/properties\/box-decoration-break","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-decoration-break","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Each box fragment is independently wrapped with the border and padding. The <code>border-radius<\/code> and <code>border-image<\/code> and <code>box-shadow<\/code>, if any, are applied to each fragment independently. The background is drawn independently in each fragment of the element. A no-repeat background image will thus be rendered once in each fragment of the element.\n<\/p>","TITLE":"clone"},{"DESCRIPTION":"<p>No border and no padding are inserted at a break. No box-shadow is drawn at a broken edge; <code>border-radius<\/code> does not apply to its corners; and the <code>border-image<\/code> is rendered for the whole box as if it were unbroken. The effect is as though the element were rendered with no breaks present, and then sliced by the breaks afterward. Backgrounds are drawn as if, after the element has been laid out (including any justification, reordering, page breaks, etc.), all the element's box fragments were taken and put one after the other in visual order. The background is applied to the bounding box of this composite box and then the fragments are put back, with each with its share of the background.\n<\/p>","TITLE":"slice"}]},"css\/properties\/font-family":{"SUMMARY":"<p>The <code>font-family<\/code> property allows one or more font family names and\/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character.\n<\/p>","INITIALVALUE":"depends on user agent","ID":"css\/properties\/font-family","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-family","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>You can specify a comma-separated list of multiple font family names and\/or generic family names, although it rarely makes sense to specify more than one generic family. This list is called a <b>font-stack<\/b>. The browser goes down the list and uses the first available font that it can find available on the system. Generic font families are used as a fallback when none of the fonts specified in the stack are available. It is always the last alternative in the list of font family names.\n<\/p>","TITLE":"family-name, family-name, generic-family"},{"DESCRIPTION":"<p>The name of a font family, such as <code>courier<\/code> or <code>arial<\/code>. You can reference fonts available on the user's system, or external fonts imported using <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/atrules\/@font-face\" title=\"css\/atrules\/@font-face\">@font-face<\/a>. When the family name contains more than one word, it should be enclosed in quotes, for example <code>'Comic Sans'<\/code>.\n<\/p>","TITLE":"family-name"},{"DESCRIPTION":"<p>generic families are not specific fonts, but a reference to fallback fonts of a general type that can be used when specific fonts are not available. The actual fonts used for each fallback type may differ between operating systems. The following generic family keywords are defined: <code>serif<\/code>, <code>sans-serif<\/code>, <code>cursive<\/code>, <code>fantasy<\/code> and <code>monospace<\/code>.\n<\/p>","TITLE":"generic-family"}]},"css\/properties\/shape-padding":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/shape-padding","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/shape-padding","STATUS":"","VALUES":[]},"css\/properties\/grid-span":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/grid-span","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-span","STATUS":"","VALUES":[]},"css\/properties\/padding-right":{"SUMMARY":"<p>The <code>padding-right<\/code> CSS property of an element sets the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding\" title=\"css\/properties\/padding\">padding<\/a> space required on the right side of an element.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/padding-right","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage as specified or the absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-right","STATUS":"","VALUES":[{"DESCRIPTION":"<p>A percentage with respect to the width of the containing block.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Specifies a positive fixed width. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for details.\n<\/p>","TITLE":"length"}]},"css\/properties\/box-pack":{"SUMMARY":"<p>Do not use. This property has been replaced by <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=flex-pack&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"flex-pack (page does not exist)\">flex-pack<\/a>.\n<\/p>","INITIALVALUE":"start","ID":"css\/properties\/box-pack","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-pack","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements.\n<\/p>","TITLE":"justify"},{"DESCRIPTION":"<p>The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis.\n<\/p>","TITLE":"start"},{"DESCRIPTION":"<p>All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element.\n<\/p>","TITLE":"center"}]},"css\/properties\/mask-box-image-outset":{"SUMMARY":"<p>The values specify the amount of the image area of the mask box that extends beyond the border box. If there are four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top. \n<\/p><p>As with ‘mask-box-image-width’, a &lt;number&gt; represents a multiple of the corresponding ‘border-width’. Negative values are not allowed for any of the ‘mask-box-image-outset’ values.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-box-image-outset","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-box-image-outset","STATUS":"","VALUES":[{"DESCRIPTION":"","TITLE":"length"},{"DESCRIPTION":"","TITLE":"number"}]},"css\/properties\/ms-scroll-snap-type":{"SUMMARY":"","INITIALVALUE":"none","ID":"css\/properties\/ms-scroll-snap-type","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-type","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Initial value. Panning and scrolling are unaffected by any defined snap-points.  Touch flicks will result in normal inertia.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Inertia is adjusted to ensure content always lands on a snap point.\n<\/p>","TITLE":"mandatory"},{"DESCRIPTION":"<p>When normal inertia would leave content near a snap point, inertia is adjusted to land exactly on the snap point.  However, it is still possible to land between snap points.\n<\/p>","TITLE":"proximity"}]},"css\/properties\/text-overline":{"SUMMARY":"<p>The <b>text-overline<\/b> property is the shorthand for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-style\" title=\"css\/properties\/text-overline-style\">text-overline-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-width\" title=\"css\/properties\/text-overline-width\">text-overline-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-color\" title=\"css\/properties\/text-overline-color\">text-overline-color<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-mode\" title=\"css\/properties\/text-overline-mode\">text-overline-mode<\/a> properties.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-overline","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline","STATUS":"","VALUES":[]},"css\/properties\/text-align-last":{"SUMMARY":"<p>The <code>text-align-last<\/code> CSS property describes how the last line of a block element or a line before line break is aligned in its parent block element.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/text-align-last","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-align-last","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Text is justified if ‘text-justify’ is ‘distribute’,  and the same as <code>start<\/code> value if otherwise.\n<\/p>","TITLE":"justify"},{"DESCRIPTION":"<p>The same as <code>right<\/code> if direction is left-to-right and <code>left<\/code> if direction is right-to-left.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>Text is aligned to the right.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>The same as <code>left<\/code> if direction is left-to-right and <code>right<\/code> if direction is right-to-left.\n<\/p>","TITLE":"start"},{"DESCRIPTION":"<p>The text is centered within the line box.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Text is aligned to the left.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Default. Text is aligned like the other lines in the object, using the value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-align\" title=\"css\/properties\/text-align\"><b>text-align<\/b><\/a> property.\n<\/p>","TITLE":"auto"}]},"css\/properties\/text-overline-mode":{"SUMMARY":"<p>Sets the mode for the overline text decoration, determining whether the text decoration affects the space characters or not.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-overline-mode","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-mode","STATUS":"W3C Candidate Recommendation","VALUES":[]},"css\/properties\/text-underline-style":{"SUMMARY":"<p>After review this should be replaced by text-decoration should it not?\n<\/p><p>This property will set the underline style for text with a line value for underline, overline, and line-through.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-underline-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value - except for initial and inherit","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-underline-style","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>This will produce no line.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>This will produce a wavy line.\n<\/p>","TITLE":"wave"},{"DESCRIPTION":"<p>This will produce a line that has a repeating pattern of a dot followed by a dash.\n<\/p>","TITLE":"dot-dash"},{"DESCRIPTION":"<p>This will produce a dashed line\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>This will produce a line that has a repeating pattern of two dots followed by a dash.\n<\/p>","TITLE":"dot-dot-dash"},{"DESCRIPTION":"<p>This will produce a dotted line.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>This will produce a double line.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>This will produce a solid line.\n<\/p>","TITLE":"solid"}]},"css\/properties\/text-overline-width":{"SUMMARY":"<p>Specifies the line width for the overline text decoration.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-overline-width","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-width","STATUS":"W3C Candidate Recommendation","VALUES":[]},"css\/properties\/mask-source-type":{"SUMMARY":"<p>The ‘mask-source-type’ property indicates whether the &lt;mask-reference&gt; is treated as a luminescence mask or a alpha mask.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/mask-source-type","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-source-type","STATUS":"","VALUES":[{"DESCRIPTION":"<p>\"source type\" has following values:\n\"alpha\"\n<\/p>","TITLE":"<source-type>"}]},"css\/properties\/flex-grow":{"SUMMARY":"<p>The <b>flex-grow<\/b> CSS property specifies how much a flex item will enlarge with respect to the other items in the flex container to fill an expanded container.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/flex-grow","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-grow","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The flex grow factor, which describes the proportion by which the flex item will grow relative to the other flex items in the container. Negative numbers are invalid.\n<\/p>","TITLE":"number"}]},"css\/properties\/ms-scroll-snap-points-x":{"SUMMARY":"","INITIALVALUE":"snapInterval(0px, 100%);","ID":"css\/properties\/ms-scroll-snap-points-x","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-points-x","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Specifies the position of individual snap-points.  \n<\/p>\n<ul>\n<li>If the value specified in <b>&lt;start lengths&gt;<\/b> is less than <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMin\" title=\"css\/properties\/ms-scroll-limit-xMin\"><b>-ms-scroll-limit-x-min<\/b><\/a> the value of <b>-ms-scroll-limit-x-min<\/b> is used.<\/li>\n<li>If the value specified in <b>&lt;list lengths&gt;<\/b> is greater that <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMax\" title=\"css\/properties\/ms-scroll-limit-xMax\"><b>-ms-scroll-limit-x-max<\/b><\/a>, the value of <b>-ms-scroll-limit-x-max<\/b> is used.<\/li>\n<\/ul>\n","TITLE":"snapList(<list lengths>)"},{"DESCRIPTION":"<p>Specifies where the snap-points will be placed. \n<\/p>\n<ul>\n<li><b>&lt;start length&gt;<\/b> specifies where the first snap-point will be placed.<\/li>\n<li><b>&lt;step length&gt;<\/b> specifies the distance between subsequent snap-points both to the left and the right of the initial snap-point.<\/li>\n<\/ul>\n","TITLE":"snapInterval(<start length>, <step length>)"}]},"css\/properties\/ms-scroll-snap-points-y":{"SUMMARY":"","INITIALVALUE":"snapInterval(0px, 100%);","ID":"css\/properties\/ms-scroll-snap-points-y","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-points-y","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Specifies where the snap-points will be placed. \n<\/p>\n<ul>\n<li><b>&lt;start length&gt;<\/b> specifies where the first snap-point will be placed.<\/li>\n<li><b>&lt;step length&gt;<\/b> specifies the distance between subsequent snap-points both to the left and the right of the initial snap-point.<\/li>\n<\/ul>\n","TITLE":"snapInterval(<start length>, <step length>)"},{"DESCRIPTION":"<p>Specifies the position of individual snap-points.  \n<\/p>\n<ul>\n<li>If the value specified in <b>&lt;list lengths&gt;<\/b> is less than <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMin\" title=\"css\/properties\/ms-scroll-limit-xMin\"><b>-ms-scroll-limit-x-min<\/b><\/a> the value of <b>-ms-scroll-limit-x-min<\/b> is used.<\/li>\n<li>If the value specified in <b>&lt;list lengths&gt;<\/b> is greater that <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMax\" title=\"css\/properties\/ms-scroll-limit-xMax\"><b>-ms-scroll-limit-x-max<\/b><\/a>, the value of <b>-ms-scroll-limit-x-max<\/b> is used.<\/li>\n<\/ul>\n","TITLE":"snapList(<list lengths>)"}]},"css\/properties\/text-line-through-mode":{"SUMMARY":"<p>Sets the mode for the line-through text decoration, determining whether the text decoration affects the space characters or not.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-line-through-mode","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-line-through-mode","STATUS":"","VALUES":[]},"css\/properties\/height":{"SUMMARY":"<p>Sets the height of an element. The content area of the element height does not include the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding\" title=\"css\/properties\/padding\">padding<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border\" title=\"css\/properties\/border\">border<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin\" title=\"css\/properties\/margin\">margin<\/a> of the element.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/height","ANIMATABLE":false,"COMPUTEDVALUE":"percentage or absolute height","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>If content-box is used, the height or percentage defined will be applied to the element's content-box.\n<\/p>","TITLE":"content-box"},{"DESCRIPTION":"<p>The intrinsic minimum height\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>This will be either the large of the minimum height or the smaller of the preferred height and the available height\n<\/p>","TITLE":"fit-content"},{"DESCRIPTION":"<p>Will take a number that is immediately followed by a length unit such as px, em, in,  etc.\n<\/p>","TITLE":"height"},{"DESCRIPTION":"<p>If auto is set for the elements height, the browser will determine the height for the element.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The intrinsic preferred height\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>If border-box is used, the height or percentage defined will be applied to the element's border box.\n<\/p>","TITLE":"border-box"},{"DESCRIPTION":"<p>The containing block height minus horizontal margin, border, and padding\n<\/p>","TITLE":"available"},{"DESCRIPTION":"<p>Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly.  Negative values are not allowed.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/border-bottom-left-radius":{"SUMMARY":"<p>Defines the shape of the border of the bottom-left corner.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/border-bottom-left-radius","ANIMATABLE":true,"COMPUTEDVALUE":"two absolute &lt;length&gt; or percentages","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-left-radius","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">CSS &lt;length&gt; data types<\/a>. Negative values are invalid.\n<\/p>","TITLE":"length"}]},"css\/properties\/box-orient":{"SUMMARY":"<p>Deprecated\n<\/p>","INITIALVALUE":"inline-axis","ID":"css\/properties\/box-orient","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-orient","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Child elements are displayed in a vertical stack from top to bottom.\n<\/p>","TITLE":"vertical"},{"DESCRIPTION":"<p>Default. \nChild elements are displayed along the inline axis.\n<\/p>","TITLE":"inline-axis"},{"DESCRIPTION":"<p>Child elements are displayed in a horizontal line from left to right.\n<\/p>","TITLE":"horizontal"},{"DESCRIPTION":"<p>Child elements are displayed along the block axis.\n<\/p>","TITLE":"block-axis"},{"DESCRIPTION":"<p>Child elements are displayed in the same orientation as the computed value of this property for the parent element.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/order":{"SUMMARY":"<p>The <b>order<\/b> property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/order","ANIMATABLE":true,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/order","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The ordinal group for this flex item.\n<\/p>","TITLE":"<integer>"}]},"css\/properties\/text-line-through-style":{"SUMMARY":"<p>Specifies the line style for line-through text decoration.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-line-through-style","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-line-through-style","STATUS":"W3C Working Draft","VALUES":[]},"css\/properties\/ms-grid-row-align":{"SUMMARY":"","INITIALVALUE":"stretch","ID":"css\/properties\/ms-grid-row-align","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-grid-row-align","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The object is centered within the row.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Default. The object is placed at the top of the row.\n<\/p>","TITLE":"start"},{"DESCRIPTION":"<p>The object is placed at the bottom of the row.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>The object is stretched to completely fill the height that is available in the row.\n<\/p>","TITLE":"stretch"}]},"css\/properties\/white-space":{"SUMMARY":"<p>The white-space property controls if a white-space character within an element can wrap or if it must be preserved.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/white-space","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/white-space","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Sequences of line breaks are preserved.\n<\/p>","TITLE":"pre-line"},{"DESCRIPTION":"<p>Lines of text break automatically. Content wraps to the next line if it exceeds the width of the object.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Line breaks are suppressed. Content does not wrap to the next line.\n<\/p>","TITLE":"nowrap"},{"DESCRIPTION":"<p>Line breaks and other whitespace are preserved. This possible value is supported starting in Internet Explorer 6 when the <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/elements\/!DOCTYPE\" title=\"html\/elements\/!DOCTYPE\">!DOCTYPE<\/a> declaration specifies standards-compliant mode. When the&#160;!DOCTYPE declaration does not specify standards-compliant mode, you can retrieve this value, but it does not affect rendering—it functions like the <b>normal<\/b> value.\n<\/p>","TITLE":"pre"},{"DESCRIPTION":"<p>Sequences of line breaks are collapsed.\n<\/p>","TITLE":"pre-wrap"}]},"css\/properties\/ime-mode":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/ime-mode","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ime-mode","STATUS":"","VALUES":[{"DESCRIPTION":"<p>All characters are entered through the IME. Users can still deactivate the IME.\n<\/p>","TITLE":"active"},{"DESCRIPTION":"<p>Default. IME is not affected. This is the same as not specifying the <b>-ms-ime-mode<\/b> attribute.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>All characters are entered without IME. Users can still activate the IME.\n<\/p>","TITLE":"inactive"},{"DESCRIPTION":"<p>IME is completely disabled. Users cannot activate the IME if the control has focus.\n<\/p>","TITLE":"disabled"}]},"css\/properties\/border-left-style":{"SUMMARY":"<p>Sets the style of an element's left border. To set all four borders, use the shorthand property,  <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\">border-style<\/a>. Otherwise, you can set the borders individually with <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style\" title=\"css\/properties\/border-top-style\">border-top-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style\" title=\"css\/properties\/border-right-style\">border-right-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style\" title=\"css\/properties\/border-bottom-style\">border-bottom-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style\" title=\"css\/properties\/border-left-style\">border-left-style<\/a>.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-left-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>A series of round or square dots.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.)\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> value. The border width must be at least 3 pixels wide to draw a double border.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image\" title=\"css\/properties\/background-image\">background-image<\/a>.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>A single line segment.\n<\/p>","TITLE":"solid"},{"DESCRIPTION":"<p>A series of square-ended dashes.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is coming out of the canvas.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>Same as <code>none<\/code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden<\/code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is sunken into the canvas.\n<\/p>","TITLE":"inset"},{"DESCRIPTION":"<p>Looks as if it were coming out of the canvas.\n<\/p>","TITLE":"ridge"}]},"css\/properties\/margin-right":{"SUMMARY":"<p><code>margin-right<\/code> sets the right margin of an element.\n<\/p>","INITIALVALUE":"Depends on the particular element. Different elements have different default margins.","ID":"css\/properties\/margin-right","ANIMATABLE":false,"COMPUTEDVALUE":"As specified, but with relative lengths converted into absolute pixel values.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin-right","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a fixed length, using any standard  <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/docs.webplatform.org\/wiki\/css\/units\/length\">CSS length units<\/a> . Negative Values are allowed.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The browser calculates a right margin dependent on the space available.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Inherits the parent element's specified <code>margin-right<\/code> width.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.)\n<\/p>","TITLE":"percentage"}]},"css\/properties\/overflow":{"SUMMARY":"<p>The overflow property controls how extra text  exceeding the bounding box of an element is rendered. The overflow property can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/overflow","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.\n<\/p>","TITLE":"scroll"},{"DESCRIPTION":"<p>Content is clipped and scrolling is added only when necessary.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Default. Content is not clipped and scroll bars are not added.\n<\/p>","TITLE":"visible"},{"DESCRIPTION":"<p>Content that exceeds the dimensions of the object is not shown.\n<\/p>","TITLE":"hidden"}]},"css\/properties\/ms-scroll-snap-y":{"SUMMARY":"","INITIALVALUE":"none","ID":"css\/properties\/ms-scroll-snap-y","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-y","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-type\" title=\"css\/properties\/ms-scroll-snap-type\"><b>-ms-scroll-snap-type<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-snap-type"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-points-y\" title=\"css\/properties\/ms-scroll-snap-points-y\"><b>-ms-scroll-snap-points-y<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-snap-points-y"}]},"css\/properties\/ms-scroll-snap-x":{"SUMMARY":"","INITIALVALUE":"none","ID":"css\/properties\/ms-scroll-snap-x","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-x","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-type\" title=\"css\/properties\/ms-scroll-snap-type\"><b>-ms-scroll-snap-type<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-snap-type"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-snap-points-x\" title=\"css\/properties\/ms-scroll-snap-points-x\"><b>-ms-scroll-snap-points-x<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-snap-points-x"}]},"css\/properties\/margin-bottom":{"SUMMARY":"<p><code>margin-bottom<\/code> sets the bottom margin of an element.\n<\/p>","INITIALVALUE":"Depends on the particular element. Different elements have different default margins.","ID":"css\/properties\/margin-bottom","ANIMATABLE":true,"COMPUTEDVALUE":"As specified, but with relative lengths converted into absolute pixel values.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin-bottom","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a fixed length, using any standard  <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/docs.webplatform.org\/wiki\/css\/units\/length\">CSS length units<\/a> . Negative Values are allowed.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The browser calculates a bottom margin dependent on the space available\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Inherits the parent element's specified <code>margin-bottom<\/code> width.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-bottom, the browser will take the percentage from the width, not the height of the containing block.)\n<\/p>","TITLE":"percentage"}]},"css\/properties\/page-break-after":{"SUMMARY":"<p>The page-break-after property is supported in all major browsers.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/page-break-after","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/page-break-after","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Specifies that the value of the page-break-after property should be inherited from the parent element\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Behaves the same as <b>auto<\/b>.\n<\/p>","TITLE":"empty string"},{"DESCRIPTION":"<p>Default. Insert a page break after the element if necessary\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Insert page breaks after the element until it reaches a blank left page\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Insert a page break after the element\n<\/p>","TITLE":"always"},{"DESCRIPTION":"<p>Avoid inserting a page break after the element\n<\/p>","TITLE":"avoid"},{"DESCRIPTION":"<p>Insert page breaks after the element until it reaches a blank right page\n<\/p>","TITLE":"right"}]},"css\/properties\/mask-box-image-slice":{"SUMMARY":"<p>This property specifies inward offsets from the top, right, bottom, and left edges of the mask image, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded and treated as fully transparent black unless the ‘fill’ keyword is present. \n<\/p><p>When four values are specified, they set the offsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-box-image-slice","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-box-image-slice","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Numbers represent multiples of the corresponding computed ‘border-width’.\n<\/p>","TITLE":"number"},{"DESCRIPTION":"<p>Percentages refer to the size of the mask box image area: the width of the area for horizontal offsets, the height for vertical offsets.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>The ‘fill’ keyword, if present, causes the middle part of the mask image to be preserved. (By default it is discarded, i.e., treated as transparent black.)\n<\/p>","TITLE":"fill"},{"DESCRIPTION":"<p>All &lt;length&gt;s made absolute, otherwise as specified\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>If ‘auto’ is specified then the mask box image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see ‘mask-box-image-slice’). If the image does not have the required intrinsic dimension then the corresponding ‘border-width’ is used instead.\n<\/p>","TITLE":"auto"}]},"css\/properties\/mask-size":{"SUMMARY":"<p>Specifies the size of the mask images. Follow the 'background-size' property. Allow user to interacts with other comma-separated mask properties from each mask image layer.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/mask-size","ANIMATABLE":false,"COMPUTEDVALUE":"for &lt;length&gt; the absolute value, otherwise a percentage.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-size","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>Default. See text.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.\n<\/p>","TITLE":"contain"},{"DESCRIPTION":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.\n<\/p>","TITLE":"cover"},{"DESCRIPTION":"<p>An integer, followed by a percent (%). A percentage value is relative to the background positioning area.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/text-decoration":{"SUMMARY":"<p>The <b>text-decoration<\/b> CSS property is used to set the text formatting to <b>underline<\/b>, <b>overline<\/b>, <b>line-through<\/b> or <b>blink<\/b>. <br \/>\n<b>underline<\/b> and <b>overline<\/b> decorations are positioned under the text, <b>line-through<\/b> over it.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-decoration","ANIMATABLE":false,"COMPUTEDVALUE":"As specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Each line of text has a line through the middle.\n<\/p>","TITLE":"line-through"},{"DESCRIPTION":"<p>Produces no text decoration.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Each line of text is underlined.\n<\/p>","TITLE":"underline"},{"DESCRIPTION":"<p>Each line of text has a line above it.\n<\/p>","TITLE":"overline"},{"DESCRIPTION":"<p>Text blinks.\n<\/p>","TITLE":"blink"}]},"css\/properties\/outline-width":{"SUMMARY":"<p>The outline-width property sets the width of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline\" title=\"css\/properties\/outline\">outline<\/a> of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/outline-width","ANIMATABLE":true,"COMPUTEDVALUE":"absolute length; ‘0’ if the outline style is ‘none’.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-width","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Default.  \n<\/p>","TITLE":"medium"},{"DESCRIPTION":"<p>Greater than the default width.\n<\/p>","TITLE":"thick"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"<width>"},{"DESCRIPTION":"<p>Less than the default width.\n<\/p>","TITLE":"thin"},{"DESCRIPTION":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/ms-scroll-limit-xMax":{"SUMMARY":"","INITIALVALUE":"none","ID":"css\/properties\/ms-scroll-limit-xMax","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMax","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The maximum value for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollLeft\" title=\"dom\/properties\/scrollLeft\"><b>scrollLeft<\/b><\/a> property.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The maximum value for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollLeft\" title=\"dom\/properties\/scrollLeft\"><b>scrollLeft<\/b><\/a> property is equal to <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollWidth\" title=\"dom\/properties\/scrollWidth\"><b>scrollWidth<\/b><\/a>.\n<\/p>","TITLE":"auto"}]},"css\/properties\/background":{"SUMMARY":"<p>This background property is a shorthand property for setting the color, position, size, repeat, clip, origin, attachment, and image of the element.\n<\/p><p>The background- properties provide fundamental styles to an element, such as color, image, and position. CSS3 adds more properties for handling backgrounds, including properties that improve the mobile web experience. Many CSS background- properties can be set, at the same time, with this background property.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/background","ANIMATABLE":false,"COMPUTEDVALUE":"see individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-attachment\" title=\"css\/properties\/background-attachment\"><b>background-attachment<\/b><\/a> property. The default value is <tt>scroll<\/tt>.\n<\/p>","TITLE":"<attachment>"},{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image\" title=\"css\/properties\/background-image\"><b>background-image<\/b><\/a> property. The default value is <tt>none<\/tt>.\n<\/p>","TITLE":"<bg-image>"},{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-position\" title=\"css\/properties\/background-position\"><b>background-position<\/b><\/a> property. Otherwise, it is set to its initial value.\n<\/p>","TITLE":"<position> [ \/ <bg-size> ]?"},{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-color\" title=\"css\/properties\/background-color\"><b>background-color<\/b><\/a> property. The default value is <tt>transparent<\/tt>.\n<\/p>","TITLE":"<color>"},{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-repeat\" title=\"css\/properties\/background-repeat\"><b>background-repeat<\/b><\/a> property. The default value is <tt>repeat<\/tt>.\n<\/p>","TITLE":"<repeat-style>"},{"DESCRIPTION":"<p>If one &lt;box&gt; value is present then it sets both <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-origin\" title=\"css\/properties\/background-origin\"><b>background-origin<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-clip\" title=\"css\/properties\/background-clip\"><b>background-clip<\/b><\/a> to that value. If two values are present, then the first sets <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-origin\" title=\"css\/properties\/background-origin\"><b>background-origin<\/b><\/a> and the second <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-clip\" title=\"css\/properties\/background-clip\"><b>background-clip<\/b><\/a>.\n<\/p><p>For background-clip, valid values are those available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-clip\" title=\"css\/properties\/background-clip\"><b>background-clip<\/b><\/a> property. The default value is <tt>border-box<\/tt>.\nFor background-origin, valid values are those  available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-origin\" title=\"css\/properties\/background-origin\"><b>background-origin<\/b><\/a> property. The default value is <tt>padding-box<\/tt>.\n<\/p>","TITLE":"<box>{1,2}"}]},"css\/properties\/text-underline-width":{"SUMMARY":"<p>This defines the line width for underline, overline, or line-through of text decorations\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/text-underline-width","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-underline-width","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"","TITLE":"medium"},{"DESCRIPTION":"","TITLE":"auto"},{"DESCRIPTION":"","TITLE":"<number>"},{"DESCRIPTION":"","TITLE":"thin"},{"DESCRIPTION":"","TITLE":"normal"},{"DESCRIPTION":"","TITLE":"<percentage>"},{"DESCRIPTION":"","TITLE":"<length>"},{"DESCRIPTION":"","TITLE":"thick"}]},"css\/properties\/margin":{"SUMMARY":"<p>The <code>margin<\/code> property is shorthand to allow you to set all four margins of an element at once. Its equivalent longhand properties are <code>margin-top<\/code>, <code>margin-right<\/code>, <code>margin-bottom<\/code> and <code>margin-left<\/code>. Negative values are also allowed.\n<\/p>","INITIALVALUE":"Depends on the particular element. Different elements have different default margins.","ID":"css\/properties\/margin","ANIMATABLE":true,"COMPUTEDVALUE":"As specified, but with relative lengths converted into absolute pixel values.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p><code>auto<\/code> is replaced by some suitable value by the browser. For example, it can be used for centering of blocks.\n<\/p><p><code>div { width:50%;  margin:0 auto; }<\/code> centers the <code>&lt;div&gt;<\/code> container horizontally.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>A percentage relative to the width of the containing block. Negative values are allowed.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Specifies a fixed length, using any standard  <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/docs.webplatform.org\/wiki\/css\/units\/length\">CSS length units<\/a> . Negative Values are allowed.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Causes the element it is applied to to take on the same margin values as its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/border-top-left-radius":{"SUMMARY":"<p>Defines the shape of the border of the top-left corner.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/border-top-left-radius","ANIMATABLE":true,"COMPUTEDVALUE":"two absolute &lt;length&gt; or percentages","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-left-radius","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">CSS &lt;length&gt; data types<\/a>. Negative values are invalid.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/flow-into":{"SUMMARY":"<p>Diverts the selected element's content into a <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/named_flow\" title=\"css\/concepts\/named flow\">named flow<\/a>, used to thread content through different layout <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\">regions<\/a> specified by  <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flow-from\" title=\"css\/properties\/flow-from\"><b>flow-from<\/b><\/a>.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/flow-into","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flow-into","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>The element's content remains unchanged, and is not diverted to a flow unless an ancestor element specifies it.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>String identifier that specifies a <i>named flow<\/i> into which to divert the element's content. Common keyword values such as <b>none<\/b>, <b>inherit<\/b>, <b>default<\/b>, <b>auto<\/b>, and <b>initial<\/b> are invalid flow names, as are <b>element<\/b> and <b>content<\/b>:\n<\/p>\n<ul><li><b>&lt;ident&gt; element<\/b>: The <b>element<\/b> keyword explicitly specifies the entire element diverts to the named flow, not just its contents. (This is the default behavior without the keyword.)\n<\/li><\/ul>\n<ul><li> <b>&lt;ident&gt; content<\/b>: Adding the <b>content<\/b> keyword overrides the default behavior described above, diverting only the element's nested content to the named flow.\n<\/li><\/ul>\n","TITLE":"<ident>"}]},"css\/properties\/animation-duration":{"SUMMARY":"<p>Defines the length of time an animation will take to complete one cycle\n<\/p>","INITIALVALUE":"0s","ID":"css\/properties\/animation-duration","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-duration","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The specified animation will run for one second.\n<\/p>","TITLE":"1s"},{"DESCRIPTION":"<p>The initial value of 0s means the animation takes no time. When the duration is 0s (or 0ms) <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-fill-mode\" title=\"css\/properties\/animation-fill-mode\">animation-fill-mode<\/a> still applies i.e. an animation filling backwards will show the value of the 0% <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/atrules\/@keyframes\" title=\"css\/atrules\/@keyframes\">keyframe<\/a> during any <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-delay\" title=\"css\/properties\/animation-delay\">delay<\/a> period, while an animation filling forwards will retain the value specified at the 100% <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/atrules\/@keyframes\" title=\"css\/atrules\/@keyframes\">keyframe<\/a>, even if the animation was instantaneous. Also, animation events are still fired.\n<\/p>","TITLE":"0s"},{"DESCRIPTION":"<p><code>animation-duration<\/code> can specify a comma-separated list of durations; each duration is applied to the corresponding value of <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-name\" title=\"css\/properties\/animation-name\">animation-name<\/a><\/code>.\n<\/p>","TITLE":".25s, .5s"},{"DESCRIPTION":"<p>Animation duration can also be specified in milliseconds.\n<\/p>","TITLE":"150ms"}]},"css\/properties\/mask-origin":{"SUMMARY":"<p>For elements rendered as a single box, specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes ‘box-decoration-break’ operates on to determine the mask positioning area(s).\n<\/p>","INITIALVALUE":"padding-box","ID":"css\/properties\/mask-origin","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-origin","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Positioning relatively to the content box respectively object bounding box for objects without associated layout box.\n<\/p>","TITLE":"content-box"},{"DESCRIPTION":"<p>Positioning relatively to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge; ‘100% 100%’ is the lower right corner.)\n<\/p>","TITLE":"padding-box"},{"DESCRIPTION":"<p>Positioning relatively to the border box respectively painting box for objects without associated layout box.\n<\/p>","TITLE":"border-box"}]},"css\/properties\/page-break-inside":{"SUMMARY":"<p>Sets the page-breaking behavior inside an element.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/page-break-inside","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/page-break-inside","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Behaves the same as <b>auto<\/b>.\n<\/p>","TITLE":"empty string"},{"DESCRIPTION":"<p>Default. \nNeither force nor forbid a page break inside the object.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Inherit the value of the same property for the object's parent.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Forbid a page break inside the object, if possible.\n<\/p>","TITLE":"avoid"}]},"css\/properties\/text-justify":{"SUMMARY":"<p>The <code>text-justify<\/code> CSS property offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/text-justify","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-justify","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Justifies lines of ideographic text, and increases or decreases both inter-ideograph and inter-word spacing. This value is typically used for CJK languages.\n<\/p>","TITLE":"inter-ideograph"},{"DESCRIPTION":"<p>Default. Allows the browser to determine which justification algorithm to apply.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Justifies lines of text by elongating characters at chosen points.  This form of justification is intended for Arabic script languages.\n<\/p>","TITLE":"kashida"},{"DESCRIPTION":"<p>Aligns text by increasing the space between words. This value's spacing behavior is the fastest way to make all lines of text equal in length. Its justification behavior does not affect the last line of the paragraph. This value is typically used for languages that separate words using spaces, like English or Korean.\n<\/p>","TITLE":"inter-word"},{"DESCRIPTION":"<p>Aligns text by increasing the space between both of words and characters. This value is sometimes used in e.g. Japanese.\n<\/p>","TITLE":"distribute"},{"DESCRIPTION":"<p>Justifies lines of text that contain no inter-word spacing. This value is typically used for Southeast Asian scripts such as Thai.\n<\/p>","TITLE":"inter-cluster"},{"DESCRIPTION":"<p>Justification is disabled.\n<\/p>","TITLE":"none"}]},"css\/properties\/empty-cells":{"SUMMARY":"<p>Sets whether or not to display borders and background on empty cells in a table.\n<\/p>","INITIALVALUE":"show","ID":"css\/properties\/empty-cells","ANIMATABLE":false,"COMPUTEDVALUE":"Same as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/empty-cells","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Renders empty cells with inherited borders and styles\n<\/p>","TITLE":"show"},{"DESCRIPTION":"<p>Does not render the cell\n<\/p>","TITLE":"hide"}]},"css\/properties\/animation-fill-mode":{"SUMMARY":"<p>Controls the state of animated properties before and after an animation\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/animation-fill-mode","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-fill-mode","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>One of the following values: <code>none<\/code> (default), <code>forwards, backwards, both<\/code>\n<\/p>\n<dl><dt><code>none<\/code>\n<\/dt><dd>Property values do not change before the animation starts, and they return to their original state when the animation ends.\n<\/dd><dt><code>forwards<\/code>\n<\/dt><dd>When the animation ends, properties retain the values set by the final keyframe.\n<\/dd><dt><code>backwards<\/code>\n<\/dt><dd>If the animation is delayed by <code>animation-delay<\/code>, properties assume values set by the first keyframe while waiting for the animation to start. When the animation ends, properties revert to their original state.\n<\/dd><dt><code>both<\/code>\n<\/dt><dd>Values set by the first and last keyframes are applied before and after the animation.\n<\/dd><\/dl>\n<dl><dd>The animation-fill-mode property can be specified on its own, or as a property of the animation element. (See <a rel=\"nofollow\" class=\"external free\" href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation\/animation\">http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation\/animation<\/a> )\n<\/dd><\/dl>\n","TITLE":"single-animation-fill-mode"}]},"css\/properties\/column-rule-style":{"SUMMARY":"<p>Specifies the style of the rule between columns. The column-rule-style values are the same as for border-style.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/column-rule-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. No column rule is drawn, regardless of any specified <code>column-rule-width<\/code>. The computed value is set to 0.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Column rule is a solid line.\n<\/p>","TITLE":"solid"},{"DESCRIPTION":"<p>3-D groove is drawn in colors slightly lighter and darker than the value.\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Column rule is a dashed line.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>3-D ridge is drawn in colors based on the value.\n<\/p>","TITLE":"ridge"},{"DESCRIPTION":"<p>Same as <code>none<\/code>.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>3-D outset is drawn in colors based on the value.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>Column rule is a dotted line.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Column rule is two parallel solid lines with a space between. The sum of the two single lines and the space between equals the <code>column-rule-width<\/code> value. The column rule width must be at least 3 pixels wide to draw a double rule.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>3-D inset is drawn in colors based on the value.\n<\/p>","TITLE":"inset"}]},"css\/properties\/border-right-width":{"SUMMARY":"<p>Sets the width of an element's right border. To set all four borders, use the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> shorthand property which sets the values simultaneously for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width\" title=\"css\/properties\/border-top-width\">border-top-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width\" title=\"css\/properties\/border-right-width\">border-right-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width\" title=\"css\/properties\/border-bottom-width\">border-bottom-width<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width\" title=\"css\/properties\/border-left-width\">border-left-width<\/a>.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/border-right-width","ANIMATABLE":false,"COMPUTEDVALUE":"An absolute length; 0 if the border style is 'none' or 'hidden'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Less than the default width.\n<\/p>","TITLE":"thin"},{"DESCRIPTION":"<p>Default.  \n<\/p>","TITLE":"medium"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"<width>"},{"DESCRIPTION":"<p>Greater than the default width.\n<\/p>","TITLE":"thick"}]},"css\/properties\/hanging-punctuation":{"SUMMARY":"<p>If a punctuation mark is present, this property determines if the punctuation mark hangs and whether it can be placed outside the line box and the start or at the end of a line of text.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/hanging-punctuation","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/hanging-punctuation","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.\n<\/p>","TITLE":"allow-end"},{"DESCRIPTION":"<p>A stop or comma at the end of a line hangs\n<\/p>","TITLE":"force-end"},{"DESCRIPTION":"<p>This is a closing bracket or quote of an element at the end of the last formatted line. The element hangs and this applies to any characters in the Unicode categories Pe, Pf, and Pi.\n<\/p>","TITLE":"last"},{"DESCRIPTION":"<p>No character hangs\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>This is an opening bracket or quote that is at the start of the first formatted line of an element that hangs. Any characters in the Unicode categories Ps, Pf, Pi are applied.\n<\/p>","TITLE":"first"}]},"css\/properties\/filter":{"SUMMARY":"<p>Applies various image processing effects.  This property is largely unsupported.  See <a href=\"#Compatibility\">Compatibility<\/a> section for more information.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/filter","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/filter","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Any combination of built-in filter functions: <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/blur\" title=\"css\/functions\/blur\"><b>blur()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/brightness\" title=\"css\/functions\/brightness\"><b>brightness()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/contrast\" title=\"css\/functions\/contrast\"><b>contrast()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/custom\" title=\"css\/functions\/custom\"><b>custom()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/drop-shadow\" title=\"css\/functions\/drop-shadow\"><b>drop-shadow()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/grayscale\" title=\"css\/functions\/grayscale\"><b>grayscale()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/hue-rotate\" title=\"css\/functions\/hue-rotate\"><b>hue-rotate()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/invert\" title=\"css\/functions\/invert\"><b>invert()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/opacity\" title=\"css\/functions\/opacity\"><b>opacity()<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/saturate\" title=\"css\/functions\/saturate\"><b>saturate()<\/b><\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/sepia\" title=\"css\/functions\/sepia\"><b>sepia()<\/b><\/a>\n<\/p>","TITLE":"<function>"},{"DESCRIPTION":"<p>A reference to an <a href=\"http:\/\/docs.webplatform.org\/wiki\/svg\/elements\/filter\" title=\"svg\/elements\/filter\">SVG &lt;filter&gt; element<\/a>\n<\/p>","TITLE":"url(path\/to\/filter.svg#filterID)"}]},"css\/properties\/border-image":{"SUMMARY":"<p>Shorthand property that defines an image to be displayed and its positioning, instead of a solid color, for 'border' property. It can be used to set <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-source\" title=\"css\/properties\/border-image-source\"><b>border-image-source<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-slice\" title=\"css\/properties\/border-image-slice\"><b>border-image-slice<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-width\" title=\"css\/properties\/border-image-width\"><b>border-image-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-outset\" title=\"css\/properties\/border-image-outset\"><b>border-image-outset<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-repeat\" title=\"css\/properties\/border-image-repeat\"><b>border-image-repeat<\/b><\/a>, or a subset of these.\n<\/p>","INITIALVALUE":"based on individual properties","ID":"css\/properties\/border-image","ANIMATABLE":false,"COMPUTEDVALUE":"based on individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>border-image<\/code> property can contain up to five components:\n<\/p>\n<ul><li> <code>border-image-source<\/code>: This can take a valid <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/url()\" title=\"css\/functions\/url()\">\"CSS images: url()\"<\/a> as its value.\n<\/li><li> <code>border-image-slice<\/code>: This takes any of the values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-slice\" title=\"css\/properties\/border-image-slice\"><b>border-image-slice<\/b><\/a> property, which includes &lt;number&gt;, &lt;percentage&gt; and <code>fill<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-slice\" title=\"css\/properties\/border-image-slice\"><b>border-image-slice<\/b><\/a> page.\n<\/li><li> <code>border-image-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-image-outset<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-image-repeat<\/code>: This takes any of the type of values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-repeat\" title=\"css\/properties\/border-image-repeat\"><b>border-image-repeat <\/b><\/a> property, which includes <code>stretch<\/code>, <code>repeat<\/code>, <code>round<\/code> and <code>space<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-repeat\" title=\"css\/properties\/border-image-repeat\"><b>border-image-repeat<\/b><\/a> page.\n<\/li><\/ul>\n","TITLE":"border-image-source border-image-slice border-image-width border-image-outset border-image-repeat"}]},"css\/properties\/column-count":{"SUMMARY":"<p>Specifies the number of columns an element should be divided into.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/column-count","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-count","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>An integer value that specifies the number of columns in the multi-column element. Values must be greater than 0. When <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-width\" title=\"css\/properties\/column-width\"><b>column-width<\/b><\/a> is specified with <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-count\" title=\"css\/properties\/column-count\"><b>column-count<\/b><\/a> and both have non-auto values, the integer value defines the maximum number of columns.\n<\/p>","TITLE":"count"},{"DESCRIPTION":"<p>The number of columns is determined by the values of other property values of the multi-column element, such as <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-width\" title=\"css\/properties\/column-width\"><b>column-width<\/b><\/a>.\n<\/p>","TITLE":"auto"}]},"css\/properties\/ms-scroll-chaining":{"SUMMARY":"<p>Specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/ms-scroll-chaining","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-chaining","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Initial value. A bounce effect is shown when the user hits a scroll limit during a manipulation.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The nearest scrollable parent element begins scrolling when the user hits a scroll limit during a manipulation.  No bounce effect is shown.\n<\/p>","TITLE":"chained"}]},"css\/properties\/text-overline-style":{"SUMMARY":"<p>Specifies the line style for overline text decoration.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-overline-style","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-style","STATUS":"W3C Candidate Recommendation","VALUES":[]},"css\/properties\/background-image":{"SUMMARY":"<p>Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/background-image","ANIMATABLE":true,"COMPUTEDVALUE":"As specified, but with URIs made absolute","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>You can apply multiple background images to a single element (image files, gradients, or a mixture) by including all the image references in the property value, with each one separated by a comma. Images referenced earlier in the property value appear in front of images referenced later.\n<\/p>","TITLE":"<image>, <image>, …"},{"DESCRIPTION":"<p>Default. Color of the next parent through which the background is visible.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Any valid CSS image value, including image files through <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/url()\" title=\"css\/functions\/url()\">CSS images: url()<\/a> or CSS gradients.\n<\/p>","TITLE":"<image>"}]},"css\/properties\/mask-box-image-width":{"SUMMARY":"<p>The mask image is drawn inside an area called the mask box image area. This is an area whose boundaries by default correspond to the mask box, see ‘mask-box-image-outset’. \n<\/p><p>The four values of ‘mask-box-image-width’ specify offsets that are used to divide the mask box image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. If the left width is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-box-image-width","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-box-image-width","STATUS":"","VALUES":[{"DESCRIPTION":"","TITLE":"length"},{"DESCRIPTION":"<p>If ‘auto’ is specified then the mask box image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see ‘mask-box-image-slice’). If the image does not have the required intrinsic dimension then the corresponding ‘border-width’ is used instead.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Numbers represent multiples of the corresponding computed ‘border-width’.\n<\/p>","TITLE":"number"},{"DESCRIPTION":"<p>Percentages refer to the size of the mask box image area: the width of the area for horizontal offsets, the height for vertical offsets.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/white-space-treatment":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/white-space-treatment","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/white-space-treatment","STATUS":"","VALUES":[]},"css\/properties\/border-image-outset":{"SUMMARY":"<p>The <code>border-image-outset<\/code> property describes, by which amount the border image area extends beyond the border box.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/border-image-outset","ANIMATABLE":false,"COMPUTEDVALUE":"all length made absolute, otherwise as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-outset","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length). This length must not be negative.\n<\/p>","TITLE":"<length>"}]},"css\/properties\/border-right":{"SUMMARY":"<p>Shorthand property that defines the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\"><b>border-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\"><b>border-color<\/b><\/a> of an element's right border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the right border — <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width\" title=\"css\/properties\/border-right-width\"><b>border-right-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style\" title=\"css\/properties\/border-right-style\"><b>border-right-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-color\" title=\"css\/properties\/border-right-color\"><b>border-right-color<\/b><\/a>.\n<\/p>","INITIALVALUE":"For style values, the initial value is none. For color values, the initial value is currentColor.  For width values, the initial value is medium, which is computed as about 3px in most browsers.","ID":"css\/properties\/border-right","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>border-right<\/code> property can contain up to three components:\n<\/p>\n<ul><li> <code>border-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-style<\/code>: This takes any of the range of style values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> property, which includes <code>none<\/code>, <code>hidden<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>, <code>outset<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> page.\n<\/li><li> <code>color<\/code>: This can take any valid CSS color as its value.\n<\/li><\/ul>\n","TITLE":"border-width border-style color"},{"DESCRIPTION":"<p>When we set the value to <code>inherit<\/code>, the element will inherit the border values set on its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/perspective-origin":{"SUMMARY":"<p>defines where a 3D element is based in the x- and the y-axis.\n<\/p>","INITIALVALUE":"50% 50%","ID":"css\/properties\/perspective-origin","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/perspective-origin","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Second value only. Equal to 100% or the full box height.\n<\/p>","TITLE":"bottom"},{"DESCRIPTION":"<p>An integer, followed by a&#160;%. The value is a percentage of the total box length (for the first value) or the total box height (for the second value, if specified).\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>First value only. Equal to 100% or the full box length.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>First value only. Equal to 50% or half the length of the box.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>First value only. Equal to 0% or a zero length.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Second value only. Equal to 50% or a half the height of the box.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Second value only. Equal to 0% or a zero height.\n<\/p>","TITLE":"top"},{"DESCRIPTION":"<p>A floating-point number, followed by either an absolute units designator\n(<code>cm<\/code>,\n<code>mm<\/code>,\n<code>in<\/code>,\n<code>pt<\/code>,\nor <code>pc<\/code>)\nor a relative units designator\n(<code>em<\/code>,\n<code>ex<\/code>,\nor <code>px<\/code>), that indicates the origin of transformation.\nFor more information about the supported length units,\nsee CSS Values and Units.\n<\/p>","TITLE":"length"}]},"css\/properties\/ruby-align":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/ruby-align","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ruby-align","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Ruby text is evenly distributed across the width of the base if the width of the ruby text is smaller than the width of the base. White space precedes the first and follows the last character in the ruby text, equal to half the kerning of the ruby text. If the width of the ruby text is at least the width of the base, the ruby text is centered.\n<\/p>","TITLE":"distribute-space"},{"DESCRIPTION":"<p>Ruby text is evenly distributed across the width of the base if the width of the ruby text is smaller than the width of the base. If the width of the ruby text is at least the width of the base, the ruby text is center-aligned.\n<\/p>","TITLE":"distribute-letter"},{"DESCRIPTION":"<p>Ruby text is centered if it is not adjacent to a line edge. If it is adjacent to a line edge, the side of the ruby text lines up with the side of the base text.\n<\/p>","TITLE":"line-edge"},{"DESCRIPTION":"<p>Ruby text is right-aligned with the base.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>Default. Browser determines how the ruby text is aligned. The recommended behavior for an ideographic (Asian character) ruby is to be aligned in the <code>distribute-space<\/code> mode. The recommended behavior for a Latin character ruby is to be aligned in the <code>center<\/code> mode.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Ruby text is left-aligned with the base.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Ruby text is centered within the width of the base. If the length of the base is smaller than the length of the ruby text, the base is centered within the width of the ruby text.\n<\/p>","TITLE":"center"}]},"css\/properties\/min-height":{"SUMMARY":"<p>Sets the minimum <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> for an element. It prevents the height of the element to exceed the specified value.\nIt overrides both the height &amp; the max-height property if any them is specified below the min-height value.\n<\/p>","INITIALVALUE":"auto (0 for non-flex elements)","ID":"css\/properties\/min-height","ANIMATABLE":true,"COMPUTEDVALUE":"The percentage as specified or the absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-height","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space\/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fit-content"},{"DESCRIPTION":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fill-available"},{"DESCRIPTION":"<p>Default. Behaves as 0 for non-flexbox elements. On <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/flexbox\" title=\"css\/flexbox\">flexbox<\/a>  acts as min-content.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/calc\" title=\"css\/functions\/calc\">css calc function<\/a> for mode details.\n<\/p>","TITLE":"calc"},{"DESCRIPTION":"<p>Specifies a fixed height. Negative values are not allowed. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for possible units.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"},{"DESCRIPTION":"<p>A &lt;percentage&gt; relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as 0. Negative values are not allowed\n<\/p>","TITLE":"percentage"}]},"css\/properties\/counter-reset":{"SUMMARY":"<p>The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer (otherwise, the integer defaults to 0.)  Each time the given element is invoked, the counters specified by the property are set to the given integer.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/counter-reset","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/counter-reset","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The value to which the counter is set when the element is invoked. The default value is 0.\n<\/p>","TITLE":"integer"},{"DESCRIPTION":"<p>The name of the counter, optionally followed by an integer.\n<\/p>","TITLE":"identifier"}]},"css\/properties\/border-top-style":{"SUMMARY":"<p>Sets the style of an element's top border. To set all four borders, use the shorthand property,  <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\">border-style<\/a>. Otherwise, you can set the borders individually with <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style\" title=\"css\/properties\/border-top-style\">border-top-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style\" title=\"css\/properties\/border-right-style\">border-right-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style\" title=\"css\/properties\/border-bottom-style\">border-bottom-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style\" title=\"css\/properties\/border-left-style\">border-left-style<\/a>.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-top-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.)\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is coming out of the canvas.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>A single line segment.\n<\/p>","TITLE":"solid"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is sunken into the canvas.\n<\/p>","TITLE":"inset"},{"DESCRIPTION":"<p>A series of square-ended dashes.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image\" title=\"css\/properties\/background-image\">background-image<\/a>.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>A series of round or square dots.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> value. The border width must be at least 3 pixels wide to draw a double border.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>Looks as if it were coming out of the canvas.\n<\/p>","TITLE":"ridge"},{"DESCRIPTION":"<p>Same as <code>none<\/code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden<\/code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.\n<\/p>","TITLE":"hidden"}]},"css\/properties\/layout-grid-mode":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/layout-grid-mode","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-mode","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Only a character grid is used. This is recommended for use with block-level elements, such as a <b>blockquote<\/b>, where the line grid is intended to be disabled.\n<\/p>","TITLE":"char"},{"DESCRIPTION":"<p>Only a line grid is used. This is recommended for use with inline elements, such as a <b>span<\/b>, to disable the horizontal grid on runs of text that act as a single entity in the grid layout.\n<\/p>","TITLE":"line"},{"DESCRIPTION":"<p>No grid is used.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Default. Both the <b>char<\/b> and <b>line<\/b> grid modes are enabled. This setting is necessary to fully enable the layout grid on an element.\n<\/p>","TITLE":"both"}]},"css\/properties\/letter-spacing":{"SUMMARY":"<p>The <code>letter-spacing<\/code> CSS property specifies the spacing behavior between text characters.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/letter-spacing","ANIMATABLE":false,"COMPUTEDVALUE":"normal or absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/letter-spacing","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The spacing is the normal spacing for the current font.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Indicates inter-character space in addition to the default space between characters, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Values may be negative, but there may be implementation-specific limits.\n<\/p>","TITLE":"length"}]},"css\/properties\/column-width":{"SUMMARY":"<p>Specifies the width of columns in multi-column elements.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/column-width","ANIMATABLE":true,"COMPUTEDVALUE":"the absolute length, zero or larger","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>A floating-point number, followed by either an absolute units designator\n(<code>cm<\/code>,\n<code>mm<\/code>,\n<code>in<\/code>,\n<code>pt<\/code>,\nor <code>pc<\/code>)\nor a relative units designator\n(<code>em<\/code>,\n<code>ex<\/code>,\nor <code>px<\/code>), that indicates the optimal width.\nFor more information about the supported length units,\nsee CSS Length Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Default. The optimal column width is determined through other property values of the multi-column element, such as <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-count\" title=\"css\/properties\/column-count\"><b>columnCount<\/b><\/a>.\n<\/p>","TITLE":"auto"}]},"css\/properties\/ms-grid-rows":{"SUMMARY":"","INITIALVALUE":"auto","ID":"css\/properties\/ms-grid-rows","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-grid-rows","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The object has no rows.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The height of each row specified as one of the following values:\n<\/p>\n<ul>\n<li>A  length consisting of an integer number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). <\/li>\n<li>A percentage of the object height.<\/li>\n<li>A weighted proportion of the  object height consisting of an integer number, followed by a fractional designator (<code>fr<\/code>). For example, if <code>1fr 2fr<\/code> is specified, the first row is allocated 1\/3 of the object height and the second column is allocated 2\/3 of the object height.<\/li>\n<\/ul>\n","TITLE":"height"},{"DESCRIPTION":"<p>The maximum height  of any child elements is used as the height of the row.\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>The minimum height  of any child elements is used as the height of the row.\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>Initial value. The height of a row is computed based on the tallest child element in that column. This keyword is equivalent to <b>minmax(min-content, max-content)<\/b>.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The height of the row is between <i>min<\/i> and <i>max<\/i>, as available space allows. The <i>min<\/i> and <i>max<\/i> parameters can be any other value of the <b>-ms-grid-rows<\/b> property, except for <b>auto<\/b>.\n<\/p>","TITLE":"minmax(min, max)"}]},"css\/properties\/wrap-option":{"SUMMARY":"<p>Obsolete and unsupported. Do not use.\n<\/p><p>This CSS property controls the text when it reaches the end of the block in which it is enclosed.\n<\/p>","INITIALVALUE":"wrap","ID":"css\/properties\/wrap-option","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/wrap-option","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The text is wrapped after the last character which can fit before the ending-edge of the line and where explicitly specified by preserved line feed characters. No line-breaking algorithm is invoked. The intended usage is the rendering of a character terminal emulation.\n<\/p>","TITLE":"soft-wrap"},{"DESCRIPTION":"<p>The text is wrapped like for the 'wrap' case, except that the line-breaking algorithm will allow as a last resort option a text wrap after the last character which can fit before the ending edge of the line box, independently of 'line-break', 'word-break-cjk' and 'word-break-inside' properties. For example, this addresses the situation of very long words constrained in a fixed-width container with no scrolling allowed.\n<\/p>","TITLE":"emergency"},{"DESCRIPTION":"<p>The text is only wrapped where explicitly specified by preserved line feed characters. In the case when lines are longer than the available block width, the overflow will be treated in accordance with the 'overflow' property specified in the element.\n<\/p>","TITLE":"no-wrap"},{"DESCRIPTION":"<p>The text is wrapped at the best line-breaking opportunity (if required) within the available block inline-progression dimension\n<\/p>","TITLE":"wrap"}]},"css\/properties\/text-underline":{"SUMMARY":"<p>The 'text-underline' property is the shorthand for 'text-underline-style', 'text-underline-width', 'text-underline-color', 'text-underline-mode' and 'text-underline-position'.\n<\/p>","INITIALVALUE":"not defined for shorthand properties","ID":"css\/properties\/text-underline","ANIMATABLE":false,"COMPUTEDVALUE":"specified value (except for initial and inherit)","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-underline","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>This property specifies the line color for the underline.\n<\/p>","TITLE":"text-underline-color"},{"DESCRIPTION":"<p>This property set the mode for the underline determining whether the text decoration affects the space characters or not. 'Space characters' are all characters classified by the Unicode Standard [UNICODE] as category 'Zs', in addition to the white space characters.\nPossible values:  continuous\/skip-white-space\n<\/p>","TITLE":"text-underline-mode"},{"DESCRIPTION":"<p>This property sets the position of the underline. It can appear either 'before' (above in an horizontal flow) or after (below in an horizontal flow) the run of text in relation to its baseline orientation. This property is typically used in vertical writing context where it may be desired to have the underline appear 'before' the run of text. This results in having the underline appearing on the right side of the vertical writing column.\nPossible values: auto\/before-edge\/alphabetic\/after-edge\n<\/p>","TITLE":"text-underline-position"},{"DESCRIPTION":"<p>This property specify the line style for underline.\nPossible values: none\/solid\/double\/dotted\/dashed\/dot-dash\/dot-dot-dash\/wave\n<\/p>","TITLE":"text-underline-style"}]},"css\/properties\/ms-scroll-translation":{"SUMMARY":"","INITIALVALUE":"inherit","ID":"css\/properties\/ms-scroll-translation","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-translation","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>No scroll wheel translation takes place.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Vertical to horizontal translation, as described in Remarks, will take place when appropriate.\n<\/p>","TITLE":"vertical-to-horizontal"},{"DESCRIPTION":"<p>Initial value. Value is inherited from the element's parent element.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/text-decoration-color":{"SUMMARY":"<p>CSS property that sets the color that is used for line-through, underline, overline, or strike-through that is specified by the text-decoration-line. Avoiding using other HTML elements is preferred to the use of this property when coloring the text-decoration-line values.\n<\/p>","INITIALVALUE":"currentColor","ID":"css\/properties\/text-decoration-color","ANIMATABLE":false,"COMPUTEDVALUE":"The computer color","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-color","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Accepts variations of keywords and numeric notations.\n<\/p>","TITLE":"color"}]},"css\/properties\/border-right-style":{"SUMMARY":"<p>Sets the style of an element's right border. To set all four borders, use the shorthand property,  <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\">border-style<\/a>. Otherwise, you can set the borders individually with <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style\" title=\"css\/properties\/border-top-style\">border-top-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style\" title=\"css\/properties\/border-right-style\">border-right-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style\" title=\"css\/properties\/border-bottom-style\">border-bottom-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style\" title=\"css\/properties\/border-left-style\">border-left-style<\/a>.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-right-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image\" title=\"css\/properties\/background-image\">background-image<\/a>.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>A series of square-ended dashes.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>A series of round or square dots.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> value. The border width must be at least 3 pixels wide to draw a double border.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.)\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Same as <code>none<\/code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden<\/code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is sunken into the canvas.\n<\/p>","TITLE":"inset"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is coming out of the canvas.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>Looks as if it were coming out of the canvas.\n<\/p>","TITLE":"ridge"},{"DESCRIPTION":"<p>A single line segment.\n<\/p>","TITLE":"solid"}]},"css\/properties\/grid-column-span":{"SUMMARY":"<p>See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-column\" title=\"css\/properties\/grid-column\">css\/properties\/grid-column<\/a>. This property has been removed from the specification.\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/grid-column-span","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-column-span","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Integer value that specifies the number of columns to span.\n<\/p>","TITLE":"integer"}]},"css\/properties\/text-emphasis":{"SUMMARY":"<p>The text-emphasis property will apply special emphasis marks to the elements text. Slightly similar to the text-decoration property only that this property can have affect on the line-height. It also is noted that this is shorthand for text-emphasis-style and for text-emphasis-color.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-emphasis","ANIMATABLE":false,"COMPUTEDVALUE":"none","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-emphasis","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>There are no emphasis marks\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Display the given string as marks. Authors should not specify more than one character in &lt;string&gt;. The UA may truncate or ignore strings consisting of more than one grapheme cluster.\n<\/p>","TITLE":"<string>"},{"DESCRIPTION":"<p>Displays large circles as marks\n<\/p>","TITLE":"circle"},{"DESCRIPTION":"<p>Displays small circles as marks\n<\/p>","TITLE":"dot"},{"DESCRIPTION":"<p>Displays double circles as marks\n<\/p>","TITLE":"double-circle"},{"DESCRIPTION":"<p>It is filled with a solid color\n<\/p>","TITLE":"filled"},{"DESCRIPTION":"<p>The shape has an empty space\n<\/p>","TITLE":"open"},{"DESCRIPTION":"<p>Displays sesames as marks\n<\/p>","TITLE":"sesame"},{"DESCRIPTION":"<p>Displays triangles as marks\n<\/p>","TITLE":"triangle"}]},"css\/properties\/text-decoration-blink":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/text-decoration-blink","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-blink","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration\" title=\"css\/properties\/text-decoration\"><b>textDecoration<\/b><\/a> property is not set to \"blink.\"\n<\/p>","TITLE":false},{"DESCRIPTION":"<p>The <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration\" title=\"css\/properties\/text-decoration\"><b>textDecoration<\/b><\/a> property is set to \"blink.\"\n<\/p>","TITLE":true}]},"css\/properties\/punctuation-trim":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/punctuation-trim","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/punctuation-trim","STATUS":"","VALUES":[]},"css\/properties\/background-size":{"SUMMARY":"<p>Specifies the size of the background images.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/background-size","ANIMATABLE":true,"COMPUTEDVALUE":"for &lt;length&gt; the absolute value, otherwise a percentage","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-size","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. See Remarks.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.\n<\/p>","TITLE":"contain"},{"DESCRIPTION":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.\n<\/p>","TITLE":"cover"},{"DESCRIPTION":"<p>A floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). \nFor more information about the supported length units, see the CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>An integer, followed by a percent (%). A percentage value is relative to the background positioning area.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/flex-wrap":{"SUMMARY":"<p>The <b>flex-wrap<\/b> property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction in which new lines are stacked.\n<\/p>","INITIALVALUE":"nowrap","ID":"css\/properties\/flex-wrap","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-wrap","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The flex container is single-line. The cross-start direction is equivalent to either the start or before\/head direction of the current <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\">writing mode<\/a>, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.\n<\/p>","TITLE":"nowrap"},{"DESCRIPTION":"<p>Same as <b>wrap<\/b>, except the cross-start and cross-end directions are swapped.\n<\/p>","TITLE":"wrap-reverse"},{"DESCRIPTION":"<p>The flex container is multi-line. The cross-start direction is equivalent to either the start or before\/head direction of the current <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\">writing mode<\/a>, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start.\n<\/p>","TITLE":"wrap"}]},"css\/properties\/layout-grid-char":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/layout-grid-char","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-char","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. No character grid is set.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Largest character in the font of the element is used to set the character grid.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage derived from the dimensions of the parent object.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/ms-grid-row":{"SUMMARY":"","INITIALVALUE":1,"ID":"css\/properties\/ms-grid-row","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-grid-row","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Integer value that identifies the specified row.\n<\/p>","TITLE":"integer"}]},"css\/properties\/ms-grid-columns":{"SUMMARY":"","INITIALVALUE":"auto","ID":"css\/properties\/ms-grid-columns","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-grid-columns","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The object has no columns.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Initial value. The width of a column is computed based on the widest child element in that column. This keyword is equivalent to <b>minmax(min-content, max-content)<\/b>.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The maximum width  of any child elements is used as the width of the column.\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>The minimum width  of any child elements is used as the width of the column.\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>The width of the row is between <i>min<\/i> and <i>max<\/i>, as available space allows. The <i>min<\/i> and <i>max<\/i> parameters can be any other value of the <b>-ms-grid-columns<\/b> property, except for <b>auto<\/b>.\n<\/p>","TITLE":"minmax(min, max)"},{"DESCRIPTION":"<p>The width of each column specified as one of the following values:\n<\/p>\n<ul>\n<li>A  length consisting of an integer number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). <\/li>\n<li>A percentage of the object width.<\/li>\n<li>A weighted proportion of the  object width consisting of an integer number, followed by a fractional designator (<code>fr<\/code>). For example, if <code>1fr 2fr<\/code> is specified, the first column is allocated 1\/3 of the object width and the second column is allocated 2\/3 of the object width.<\/li>\n<\/ul>\n","TITLE":"width"}]},"css\/properties\/box-shadow":{"SUMMARY":"<p>The <code>box-shadow<\/code> property programmatically creates one or more shadows on the inside or outside of a block level element.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/box-shadow","ANIMATABLE":true,"COMPUTEDVALUE":"any length made absolute; any specified color computed; otherwise as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-shadow","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The third length is a blur radius, which can be a number of any length unit. The larger this value, the bigger the blur, meaning the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it defaults to 0 (the shadow's edge is sharp).\n<\/p>","TITLE":"blur-radius (optional)"},{"DESCRIPTION":"<p>If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the <code>inset<\/code> keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content.\n<\/p>","TITLE":"inset (optional)"},{"DESCRIPTION":"<p>The first length is the horizontal offset of the shadow — offset-x specifies the horizontal offset of the shadow, which can be a number of any length unit. Positive values place the shadow to the right of the element, and negative values to the left. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.\n<\/p>","TITLE":"offset-x (optional)"},{"DESCRIPTION":"<p>To apply multiple shadows to one element, write the <code>box-shadow<\/code> values out one after another, separated by commas.\n<\/p>","TITLE":"offset-x offset-y blur-radius color, offset-x offset-y blur-radius color"},{"DESCRIPTION":"<p>The second length is the vertical offset of the shadow — offset-y specifies the vertical offset of the shadow, which can be a number of any length unit. Positive values place the shadow below the element, and negative values above. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element.\n<\/p>","TITLE":"offset-y (optional)"},{"DESCRIPTION":"<p>The fourth length is a spread distance, which again can be a number of any unit. Positive values cause the shadow to expand and grow bigger, negative values cause the shadow to shrink. If not specified, it defaults to 0 (the shadow is the same size as the element). Note that setting the size of an outer shadow to 0 causes it to disappear, whereas a 0-sized inner shadow covers the entire padding-box. For inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow's perimeter shape.\n<\/p>","TITLE":"spread-distance (optional)"}]},"css\/properties\/column-rule-width":{"SUMMARY":"<p>Specifies the width of the rule between columns.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/column-rule-width","ANIMATABLE":true,"COMPUTEDVALUE":"absolute length; ‘0’ if the column rule style is ‘none’ or ‘hidden’","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. A medium width border.\n<\/p>","TITLE":"medium"},{"DESCRIPTION":"<p>Width greater than the default.\n<\/p>","TITLE":"thick"},{"DESCRIPTION":"<p>Width less than the default.\n<\/p>","TITLE":"thin"},{"DESCRIPTION":"<p>Width consisting of a floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>)\n<\/p>","TITLE":"width"}]},"css\/properties\/border-spacing":{"SUMMARY":"<p>Sets the distance between the borders of adjacent cells.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/border-spacing","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-spacing","STATUS":"","VALUES":[{"DESCRIPTION":"<p>A floating-point number, followed by either an absolute units designator\n(<code>cm<\/code>,\n<code>mm<\/code>,\n<code>in<\/code>,\n<code>pt<\/code>,\nor <code>pc<\/code>)\nor a relative units designator\n(<code>em<\/code>,\n<code>ex<\/code>,\nor <code>px<\/code>).\nFor more information about the supported length units,\nsee CSS Values and Units Reference.\n<\/p>","TITLE":"length"}]},"css\/properties\/outline-offset":{"SUMMARY":"<p>The outline-offset property offsets the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline\" title=\"css\/properties\/outline\">outline<\/a> and draw it beyond the border edge.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/outline-offset","ANIMATABLE":true,"COMPUTEDVALUE":"&lt;length&gt; value in absolute units (px or physical).","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-offset","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length). \n<\/p>","TITLE":"<length>"},{"DESCRIPTION":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/text-decoration-overline":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/text-decoration-overline","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-overline","STATUS":"","VALUES":[{"DESCRIPTION":"<p>A line is not drawn over the text.\n<\/p>","TITLE":"VARIANT_FALSE"},{"DESCRIPTION":"<p>A line is drawn over the text.\n<\/p>","TITLE":"VARIANT_TRUE"}]},"css\/properties\/border-right-color":{"SUMMARY":"<p>Sets the color of an element's right border. This page explains the border-right-color value, but often you will find it more convenient to fix the border's right color as part of a shorthand set, either <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right\" title=\"css\/properties\/border-right\">border-right<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/color\" title=\"css\/data types\/color\">Colors<\/a> can be defined several ways. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-color#Usage\" title=\"css\/properties\/border-right-color\">Usage<\/a>.\n<\/p>","INITIALVALUE":"color - The value of the 'color' property","ID":"css\/properties\/border-right-color","ANIMATABLE":true,"COMPUTEDVALUE":"when taken from the 'color' property, the computed value of 'color'; otherwise, as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-color","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-color#Usage\" title=\"css\/properties\/border-right-color\">Usage<\/a>.\n<\/p>","TITLE":"<color>"},{"DESCRIPTION":"<p>The same as ‘color: inherit’, the color value inherited from parent object.\n<\/p>","TITLE":"currentColor"},{"DESCRIPTION":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.\n<\/p>","TITLE":"transparent"},{"DESCRIPTION":"<p>currentColor, the color value inherited from parent object.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/visibility":{"SUMMARY":"<p>The visibility property specifies whether the boxes generated by an element are rendered.\n<\/p>","INITIALVALUE":"visible","ID":"css\/properties\/visibility","ANIMATABLE":true,"COMPUTEDVALUE":"As specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/visibility","STATUS":"","VALUES":[{"DESCRIPTION":"<p>This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.\n<\/p>","TITLE":"collapse"},{"DESCRIPTION":"<p>Object is hidden. The box is invisible (fully transparent, nothing is drawn), but still affects layout.  Descendants of the element will be visible if they have visibility:visible.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>The element is visible.\n<\/p>","TITLE":"visible"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/box-lines":{"SUMMARY":"<p>Do not use. This property has been replaced by the <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=flex-wrap&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"flex-wrap (page does not exist)\">flex-wrap<\/a> property.\n<\/p><p>Gets or sets a value that specifies whether child elements wrap onto multiple lines or columns based on the space available in the object.\n<\/p>","INITIALVALUE":"single","ID":"css\/properties\/box-lines","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-lines","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Child elements are wrapped and displayed in successive, parallel rows or columns. The object expands in height or width, perpendicular to the axis defined by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-box-orient\" title=\"css\/properties\/ms-box-orient\" class=\"mw-redirect\"><b>-ms-box-orient<\/b><\/a> property, to accommodate the additional rows or columns.\n<\/p>","TITLE":"multiple"},{"DESCRIPTION":"<p>Default. \nAll child elements are displayed in a single row or column. The <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow\" title=\"css\/properties\/overflow\"><b>overflow<\/b><\/a> property of the object determines whether the child elements are hidden, clipped, or scrollable.\n<\/p>","TITLE":"single"}]},"css\/properties\/text-transform":{"SUMMARY":"<p>The text-transform property controls capitalization effects of an element's text.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-transform","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-transform","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Text is not transformed.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Transforms the first character of each word to uppercase.\n<\/p>","TITLE":"capitalize"},{"DESCRIPTION":"<p>Transforms all the characters to lowercase.\n<\/p>","TITLE":"lowercase"},{"DESCRIPTION":"<p>Transforms all the characters to uppercase.\n<\/p>","TITLE":"uppercase"}]},"css\/properties\/border-image-repeat":{"SUMMARY":"<p>The <code>border-image-repeat<\/code> CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.\n<\/p>","INITIALVALUE":"stretch","ID":"css\/properties\/border-image-repeat","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-repeat","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Is a keyword indicating that the image will be repeated until it fit the gap between the borders\n<\/p>","TITLE":"repeat"},{"DESCRIPTION":"<p>Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn't fit after having being repeated an integer number of times, it is rescaled to do so.\n<\/p>","TITLE":"round"},{"DESCRIPTION":"<p>Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn't fit after having being repeated a whole number of times, the white space is distributed around the tiles.\n<\/p>","TITLE":"space"},{"DESCRIPTION":"<p>Is a keyword indicating that the image will be stretched to fit the gap between the borders.\n<\/p>","TITLE":"stretch"},{"DESCRIPTION":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/text-underline-position":{"SUMMARY":"<p>This property will add a underline position value to the element that has an underline defined.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/text-underline-position","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-underline-position","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The underline is positioned relative to the alphabetic baseline. In this case the underline is likely to cross some descenders. Decoration appears below the text.\n<\/p>","TITLE":"alphabetic"},{"DESCRIPTION":"<p>Decoration appears above the text.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>In vertical writing modes, the underline is aligned as for ‘under’, except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the \"over\" side of the text, then an overline also switches sides and is drawn on the \"under\" side.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>In vertical writing modes, the underline is aligned as for ‘under’, except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the \"over\" side of the text, then an overline also switches sides and is drawn on the \"under\" side.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>The underline is positioned under the element's text content. In this case the underline usually does not cross the descenders. (This is sometimes called \"accounting\" underline.) This value can be combined with ‘left’ or ‘right’ if a particular side is preferred in vertical writing modes.\n<\/p>","TITLE":"under"}]},"css\/properties\/right":{"SUMMARY":"<p>Specifies the position an element in relation to the right side of the containing element.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/right","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/right","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Position is determined by the regular HTML layout of the page.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/direction":{"SUMMARY":"<p>The <code>direction<\/code> CSS property specifies the text direction\/writing direction. The <code>rtl<\/code> is used for Hebrew or Arabic text, the <code>ltr<\/code> is for other languages.\n<\/p>","INITIALVALUE":"ltr","ID":"css\/properties\/direction","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/direction","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Content flows left to right.\n<\/p>","TITLE":"ltr"},{"DESCRIPTION":"<p>Content flows right to left.\n<\/p>","TITLE":"rtl"}]},"css\/properties\/border-image-width":{"SUMMARY":"<p>The <code>border-image-width<\/code> CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-image-width","ANIMATABLE":false,"COMPUTEDVALUE":"all length made absolute, or as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative.\n<\/p>","TITLE":"<length>"},{"DESCRIPTION":"<p>Represents a multiple of the computed value of the element's <code>border-width<\/code> property to be used as the image slice size. The number must not be negative.\n<\/p>","TITLE":"<number>"},{"DESCRIPTION":"<p>Represents the percentage of the image slice relative to the height, or width, of the border image area. The percentage must not be negative.\n<\/p>","TITLE":"<percentage>"},{"DESCRIPTION":"<p>Indicates that the width, or height, of the image size must be the intrinsic size of that dimension.\n<\/p>","TITLE":"auto"}]},"css\/properties\/background-repeat":{"SUMMARY":"<p>Background-repeat defines if and how background images will be repeated after they have been sized and positioned\n<\/p>","INITIALVALUE":"repeat","ID":"css\/properties\/background-repeat","ANIMATABLE":false,"COMPUTEDVALUE":"A list, each item consisting of two keywords, one per dimension","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-repeat","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Keyword(s) indicating the repeat pattern.\n<\/p>\n<dl><dt><code>repeat<\/code>\n<\/dt><dd>Default. In CSS2.1, the image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.\n<\/dd><dt><code>no-repeat<\/code>\n<\/dt><dd>The image is not repeated.\n<\/dd><dt><code>repeat-x<\/code>\n<\/dt><dd>The image is repeated along the horizontal axis.\n<\/dd><dt><code>repeat-y<\/code>\n<\/dt><dd>The image is repeated along the vertical axis.\n<\/dd><dt><code>round<\/code>\n<\/dt><dd>The image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. <b>(CSS3)<\/b>\n<\/dd><dt><code>space<\/code>\n<\/dt><dd>The image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. <b>(CSS3)<\/b>\n<\/dd><\/dl>\n","TITLE":"<repeat-style>"}]},"css\/properties\/shape-margin":{"SUMMARY":"<p>Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape's margin.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/shape-margin","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/shape-margin","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The value that is used to offset the inner wrap shape from other shapes.\n<\/p>","TITLE":"<length>"}]},"css\/properties\/break-inside":{"SUMMARY":"<p>Control page\/column\/region breaks that fall within a block of content\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/break-inside","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/break-inside","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. A page\/column\/region break is determined  by the flow of content.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>A column break is not allowed within the content block.\n<\/p>","TITLE":"avoid-column"},{"DESCRIPTION":"<p>A page break is not allowed within the content block.\n<\/p>","TITLE":"avoid-page"},{"DESCRIPTION":"<p>A <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\">region<\/a> break is not allowed within the content block.\n<\/p>","TITLE":"avoid-region"},{"DESCRIPTION":"<p>A page\/column\/region break is not allowed within the content block.\n<\/p>","TITLE":"avoid"}]},"css\/properties\/animation-play-state":{"SUMMARY":"<p>Controls whether an animation is running or paused\n<\/p>","INITIALVALUE":"running","ID":"css\/properties\/animation-play-state","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-play-state","STATUS":"","VALUES":[{"DESCRIPTION":"<p><code>running<\/code> (default) or <code>paused<\/code>\n<\/p>\n<dl><dt><code>running<\/code>\n<\/dt><dd>Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) property value.\n<\/dd><dt><code>paused<\/code>\n<\/dt><dd>Pauses the animation. The object is displayed with the current property value until <code>animation-play-state<\/code> is set to <code>running<\/code> and the animation resumes.\n<\/dd><\/dl>\n","TITLE":"single-animation-play-state"}]},"css\/properties\/perspective":{"SUMMARY":"<p>Defines how far an element is placed from the view on the z-axis.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/perspective","ANIMATABLE":false,"COMPUTEDVALUE":"Absolute length or \"none\"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/perspective","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Default.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The distance the element is places on the z-axis. Lengths must be positive\n<\/p>","TITLE":"[[css\/data_types\/length|<length>]]"}]},"css\/properties\/layout-flow":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/layout-flow","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-flow","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Content in the object flows from left to right, and the next horizontal line is positioned underneath the previous line.  This layout is used in most Roman-based documents.\n<\/p>","TITLE":"horizontal"},{"DESCRIPTION":"<p>Content in the object flows from top to bottom, and the next vertical line appears to the left of the previous one.  This layout is used in East Asian typography.\n<\/p>","TITLE":"vertical-ideographic"}]},"css\/properties\/text-align":{"SUMMARY":"<p>The <code>text-align<\/code> CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.\n<\/p>","INITIALVALUE":"start, or a nameless value that acts as left if direction is ltr, right if direction is rtl, if start is not supported by the browser.","ID":"css\/properties\/text-align","ANIMATABLE":false,"COMPUTEDVALUE":"as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-align","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance.\n<\/p>","TITLE":"<string>"},{"DESCRIPTION":"<p>The inline contents are centered within the line box.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>The same as <i><code>right<\/code><\/i> if direction is left-to-right and <i><code>left<\/code><\/i> if direction is right-to-left.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.\n<\/p>","TITLE":"justify"},{"DESCRIPTION":"<p>The inline contents are aligned to the left edge of the line box.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Similar to inherit with the difference that the value <i><code>start<\/code><\/i> and <i><code>end<\/code><\/i> are calculated according the parent's direction and are replaced by the adequate <i><code>left<\/code><\/i> or <i><code>right<\/code><\/i> value.\n<\/p>","TITLE":"match-parent"},{"DESCRIPTION":"<p>The inline contents are aligned to the right edge of the line box.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>Specifies <i><code>start<\/code><\/i> alignment of the first line and any line immediately after a forced line break; and <i><code>end<\/code><\/i> alignment of any remaining lines not affected by <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-align-last\" title=\"css\/properties\/text-align-last\"><b>text-align-last<\/b><\/a>.\n<\/p>","TITLE":"start end"},{"DESCRIPTION":"<p>The same as <i><code>left<\/code><\/i> if direction is left-to-right and <i><code>right<\/code><\/i> if direction is right-to-left.\n<\/p>","TITLE":"start"}]},"css\/properties\/columns":{"SUMMARY":"<p>This property is a shorthand property for setting column-width or column-count. Omitted values are set to their initial value of <tt>auto<\/tt>.\n<\/p>","INITIALVALUE":"Auto","ID":"css\/properties\/columns","ANIMATABLE":false,"COMPUTEDVALUE":"The absolute length, zero or larger","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/columns","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-count\" title=\"css\/properties\/column-count\"><b>column-count<\/b><\/a> property. The default value is <tt>auto<\/tt>.\n<\/p>","TITLE":"column-count"},{"DESCRIPTION":"<p>Any of the values available to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-width\" title=\"css\/properties\/column-width\"><b>column-width<\/b><\/a> property. The default value is <tt>auto<\/tt>.\n<\/p>","TITLE":"column-width"}]},"css\/properties\/border-corner-shape":{"SUMMARY":"<p>Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). Works along with border-radius to specify the size of each corner effect.\n<\/p>","INITIALVALUE":"curve","ID":"css\/properties\/border-corner-shape","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-corner-shape","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Border radii define a diagonal slice at the corner.\n<\/p>","TITLE":"bevel"},{"DESCRIPTION":"<p>Border radii define a convex curve at the corner (default behavior of border-radius).\n<\/p>","TITLE":"curve"},{"DESCRIPTION":"<p>Border radii define a concave rectangular notch at the corner.\n<\/p>","TITLE":"notch"},{"DESCRIPTION":"<p>Border radii define a concave curve at the corner (informally called \"negative border-radius\")\n<\/p>","TITLE":"scoop"}]},"css\/properties\/top":{"SUMMARY":"<p>This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/top","ANIMATABLE":false,"COMPUTEDVALUE":"If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/top","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details. For replaced elements, the effect of this value depends only on the intrinsic dimensions of the replaced content. See the sections on the width and height of absolutely positioned, replaced elements for details\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The offset is a fixed distance from the reference edge. Negative values are allowed. For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). Negative values are allowed.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/animation-name":{"SUMMARY":"<p>Defines the list of animations that apply to the element\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/animation-name","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-name","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>No animation applies to the element. This is the initial value of the property.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>One or more comma-separated animation names. Each name is used to select the <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/atrules\/@keyframes\" title=\"css\/atrules\/@keyframes\"><b>@keyframes<\/b><\/a><\/code> rule that defines the animation. If the specified name does not match any <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/atrules\/@keyframes\" title=\"css\/atrules\/@keyframes\"><b>@keyframes<\/b><\/a><\/code> rule then no animation will be run for this name. In addition, when multiple animations update the same property the animation closest to the end of the list wins.\n<\/p>","TITLE":"<single-animation-name> [, <single-animation-name>]*"}]},"css\/properties\/transition-duration":{"SUMMARY":"<p>The 'transition-duration' property specifies the length of time a transition animation takes to complete.\n<\/p>","INITIALVALUE":"0s","ID":"css\/properties\/transition-duration","ANIMATABLE":false,"COMPUTEDVALUE":"Same as specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-duration","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by a time units designator (<code>ms<\/code> or <code>s<\/code>). For more information about the supported time units, see <b>CSS Values and Units Reference<\/b>.\n<\/p>","TITLE":"time"}]},"css\/properties\/list-style-type":{"SUMMARY":"<p>Specifies the type of list-item marker in a list.\n<\/p>","INITIALVALUE":"disc","ID":"css\/properties\/list-style-type","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-type","STATUS":"","VALUES":[{"DESCRIPTION":"<p>No marker is shown\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The marker is traditional Armenian numbering\n<\/p>","TITLE":"armenian"},{"DESCRIPTION":"<p>circle\n<\/p>","TITLE":"circle"},{"DESCRIPTION":"<p>number with leading zeros (01, 02, 03, etc.)\n<\/p>","TITLE":"decimal-leading-zero"},{"DESCRIPTION":"<p>number. This is default for &lt;ol&gt;\n<\/p>","TITLE":"decimal"},{"DESCRIPTION":"<p>filled circle. This is default for &lt;ul&gt;\n<\/p>","TITLE":"disc"},{"DESCRIPTION":"<p>traditional Georgian numbering\n<\/p>","TITLE":"georgian"},{"DESCRIPTION":"<p>lower-alpha (a, b, c, d, e, etc.)\n<\/p>","TITLE":"lower-alpha"},{"DESCRIPTION":"<p>lower-greek\n<\/p>","TITLE":"lower-greek"},{"DESCRIPTION":"<p>lower-latin (a, b, c, d, e, etc.)\n<\/p>","TITLE":"lower-latin"},{"DESCRIPTION":"<p>lower-roman (i, ii, iii, iv, v, etc.)\n<\/p>","TITLE":"lower-roman"},{"DESCRIPTION":"<p>square\n<\/p>","TITLE":"square"},{"DESCRIPTION":"<p>upper-alpha (A, B, C, D, E, etc.)\n<\/p>","TITLE":"upper-alpha"},{"DESCRIPTION":"<p>upper-latin (A, B, C, D, E, etc.)\n<\/p>","TITLE":"upper-latin"},{"DESCRIPTION":"<p>upper-roman (I, II, III, IV, V, etc.)\n<\/p>","TITLE":"upper-roman"},{"DESCRIPTION":"<p>The value of the listStyleType property is inherited from parent element\n<\/p>","TITLE":"inherit"}]},"css\/properties\/margin-left":{"SUMMARY":"<p><code>margin-left<\/code> sets the left margin of an element.\n<\/p>","INITIALVALUE":"Depends on the particular element. Different elements have different default margins.","ID":"css\/properties\/margin-left","ANIMATABLE":false,"COMPUTEDVALUE":"As specified, but with relative lengths converted into absolute pixel values.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin-left","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The browser calculates a left margin dependent on the space available.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Specifies a fixed length, using any standard  <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/docs.webplatform.org\/wiki\/css\/units\/length\">CSS length units<\/a> . Negative Values are allowed.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.)\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Inherits the parent element's specified <code>margin-left<\/code> width.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/grid-column":{"SUMMARY":"<p>Grid column provides a shorthand for \"grid-column-start\" and \"grid-column-end.\" \nIt sets an item's column positioning on a grid defined by \"display: grid;\"\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/grid-column","ANIMATABLE":false,"COMPUTEDVALUE":"Specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-column","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>Integer or string value that identifies the specified column.\n<\/p>","TITLE":"<integer> || <string>"},{"DESCRIPTION":"<p>Automatically places an item using the auto-placement algorithm.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Places an item with contiguous space available to the &lt;integer&gt; value. Using the &lt;string&gt; value only considers lines with that name.\n<\/p>","TITLE":"span && <integer> || <string>"}]},"css\/properties\/ruby-overhang":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/ruby-overhang","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ruby-overhang","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Ruby text overhangs only text adjacent to its base.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Default. Ruby text overhangs any other text adjacent to the base text.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Ruby text overhangs only white-space characters.\n<\/p>","TITLE":"whitespace"}]},"css\/properties\/list-style-image":{"SUMMARY":"<p>Replaces the list-item marker with an image.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/list-style-image","ANIMATABLE":false,"COMPUTEDVALUE":"absolute URI or 'none'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-image","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. No image is specified.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Location of the image, where path\/to\/image.png is an absolute or relative URL.  More details can be found at the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/url()\" title=\"css\/functions\/url()\">css\/functions\/url()<\/a> section.\n<\/p>","TITLE":"url(path\/to\/image.png)"}]},"css\/properties\/grid-row-span":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/grid-row-span","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-row-span","STATUS":"","VALUES":[]},"css\/properties\/background-attachment":{"SUMMARY":"<p>Defines if a background image scrolls with the content or stays fixed.\n<\/p>","INITIALVALUE":"scroll","ID":"css\/properties\/background-attachment","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-attachment","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Background image stays fixed within the viewport and does not move when the element or the page is scrolled.\n<\/p>","TITLE":"fixed"},{"DESCRIPTION":"<p>Background image stays fixed with regard to the element’s contents and scrolls as the element is scrolled.\n<\/p>","TITLE":"local"},{"DESCRIPTION":"<p>Default. Background image scrolls with the object as the document is scrolled.\n<\/p>","TITLE":"scroll"}]},"css\/properties\/animation":{"SUMMARY":"<p>Shorthand to define a CSS animation, setting all parameters at once.\n<\/p>","INITIALVALUE":"(see individual properties)","ID":"css\/properties\/animation","ANIMATABLE":false,"COMPUTEDVALUE":"Same as specified value.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A space-separated list of values for each of the individual animation properties. The animation name and duration are required. All other values are optional.\n<\/p>\n<dl><dt><code>&lt;single-animation-name&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-name\" title=\"css\/properties\/animation-name\"><b>animation-name<\/b><\/a> property.\n<\/dd><dt><code>&lt;single-animation-duration&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-duration\" title=\"css\/properties\/animation-duration\"><b>animation-duration<\/b><\/a> property.\n<\/dd><dt><code>&lt;single-animation-timing-function&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-timing-function\" title=\"css\/properties\/animation-timing-function\"><b>animation-timing-function<\/b><\/a> property.\n<\/dd><dt><code>&lt;single-animation-delay&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-delay\" title=\"css\/properties\/animation-delay\"><b>animation-delay<\/b><\/a> property.\n<\/dd><dt><code>&lt;single-animation-iteration-count&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-iteration-count\" title=\"css\/properties\/animation-iteration-count\"><b>animation-iteration-count<\/b><\/a> property.\n<\/dd><dt><code>&lt;single-animation-direction&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-direction\" title=\"css\/properties\/animation-direction\"><b>animation-direction<\/b><\/a> property.\n<\/dd><dt><code>&lt;single-animation-fill-mode&gt;<\/code>\n<\/dt><dd>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-fill-mode\" title=\"css\/properties\/animation-fill-mode\"><b>animation-fill-mode<\/b><\/a> property.\n<\/dd><\/dl>\n<p><b>Note<\/b> The first <code>&lt;time&gt;<\/code> value is assigned to the <b>animation-duration<\/b>. The second <code>&lt;time&gt;<\/code> value is assigned to the <b>animation-delay<\/b>.\n<\/p>","TITLE":"single-animation"}]},"css\/properties\/region-fragment":{"SUMMARY":"<p>Controls whether the last <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\"><i>region<\/i><\/a> in a <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region_chain\" title=\"css\/concepts\/region chain\">chain<\/a> displays additional 'overset' content according its default <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow\" title=\"css\/properties\/overflow\"><b>overflow<\/b><\/a> property, or\tif it displays a <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/fragment\" title=\"css\/concepts\/fragment\">fragment<\/a> of content as if it were flowing into a subsequent region.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/region-fragment","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/region-fragment","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>Region element displays <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/overset\" title=\"css\/concepts\/overset\">overset<\/a> content according to its <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow\" title=\"css\/properties\/overflow\"><b>overflow<\/b><\/a> property.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Region element overrides <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow\" title=\"css\/properties\/overflow\"><b>overflow<\/b><\/a> property, displaying whatever fragment of <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/overset\" title=\"css\/concepts\/overset\">overset<\/a> content can fit within the region.\n<\/p>","TITLE":"break"}]},"css\/properties\/box-line-progression":{"SUMMARY":"<p>Do not use. This property has been replaced by the <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=flex-wrap&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"flex-wrap (page does not exist)\">flex-wrap<\/a> property. \n<\/p><p>Gets or sets a value that specifies the direction to add successive rows or columns when the value of <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=box-lines&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"box-lines (page does not exist)\">box-lines<\/a> is set to multiple.\n<\/p>","INITIALVALUE":"single","ID":"css\/properties\/box-line-progression","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-line-progression","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Default. \nSuccessive rows or columns of child elements flow in the direction specified by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\"><b>writing-mode<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-box-lines\" title=\"css\/properties\/ms-box-lines\" class=\"mw-redirect\"><b>-ms-box-lines<\/b><\/a> properties.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Successive rows or columns of child elements flow in the reverse direction specified by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\"><b>writing-mode<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-lines\" title=\"css\/properties\/box-lines\"><b>box-lines<\/b><\/a> properties.\n<\/p>","TITLE":"reverse"}]},"css\/properties\/break-before":{"SUMMARY":"<p>Control page\/column\/region breaks that fall above a block of content\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/break-before","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/break-before","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A page break is inserted (forced) before the content block.\n<\/p>","TITLE":"always"},{"DESCRIPTION":"<p>Default. A page break or column break is determined  by the flow of content.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>A column break is not allowed before the content block.\n<\/p>","TITLE":"avoid-column"},{"DESCRIPTION":"<p>A page break is not allowed before the content block.\n<\/p>","TITLE":"avoid-page"},{"DESCRIPTION":"<p>A <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\">region<\/a> break is not allowed before the content block.\n<\/p>","TITLE":"avoid-region"},{"DESCRIPTION":"<p>A page\/column\/region break is not allowed before the content block.\n<\/p>","TITLE":"avoid"},{"DESCRIPTION":"<p>A column break is inserted (forced) before the content block.\n<\/p>","TITLE":"column"},{"DESCRIPTION":"<p>A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the \"left\" page that immediately follows the current page (according to the paging format of the document).\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the page that immediately follows the current page (according to the paging format of the document).\n<\/p>","TITLE":"page"},{"DESCRIPTION":"<p>A <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\">region<\/a> break is inserted (forced) before the content block.\n<\/p>","TITLE":"region"},{"DESCRIPTION":"<p>A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the \"right\" page that immediately follows the current page (according to the paging format of the document).\n<\/p>","TITLE":"right"}]},"css\/properties\/flow-from":{"SUMMARY":"<p>Flows content from a <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/named_flow\" title=\"css\/concepts\/named flow\">named flow<\/a> (specified by a corresponding <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flow-into\" title=\"css\/properties\/flow-into\"><b>flow-into<\/b><\/a>) through selected elements to form a dynamic <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region_chain\" title=\"css\/concepts\/region chain\">chain<\/a> of layout <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\"><i>regions<\/i><\/a>.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/flow-from","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flow-from","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>This container is not a region. Keeps element as is, and does not transform it into a region and replace its content.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Identifier that replaces content from specified named flow, flowing it from one <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\"><i>region<\/i><\/a> element to another.\n<\/p>","TITLE":"<ident>"}]},"css\/properties\/ms-scroll-limit-yMin":{"SUMMARY":"","INITIALVALUE":"none","ID":"css\/properties\/ms-scroll-limit-yMin","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-yMin","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The minimum value for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollTop\" title=\"dom\/properties\/scrollTop\"><b>scrollTop<\/b><\/a> property.  If the value is negative, then zero is used.\n<\/p>","TITLE":"length"}]},"css\/properties\/background-position-x":{"SUMMARY":"<p>Sets the horizontal position of a background image.\n<\/p>","INITIALVALUE":"0%","ID":"css\/properties\/background-position-x","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-position-x","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Horizontal alignment value (e.g. \"left\", \"right\", or \"center\").\n<\/p>","TITLE":"hAlignment"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/background-position-y":{"SUMMARY":"<p>Sets vertical starting position of a background image.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/background-position-y","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-position-y","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Vertical alignment value.\n<\/p>","TITLE":"vAlignment"}]},"css\/properties\/display":{"SUMMARY":"<p>Specifies the type of rendering box used for an element.\n<\/p>","INITIALVALUE":"inline","ID":"css\/properties\/display","ANIMATABLE":false,"COMPUTEDVALUE":"As specified, except for root element, floated elements, and absolutely positioned elements (see below).","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/display","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Turns off the display of an element so that the element has no effect on layout; all descendant elements also have their display turned off. The element is removed from the document, and the document is rendered as though the element does not exist, though it may still be in the HTML. \n<\/p>\n<dl><dd>To render an element box's dimensions, yet have its contents be invisible, set the <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/visibility\" title=\"css\/properties\/visibility\">visibility<\/a><\/code> property to <code>hidden<\/code>.\n<\/dd><\/dl>\n","TITLE":"none"},{"DESCRIPTION":"<p>Generates a block element box. This is a basic value in CSS 1.\n<\/p>","TITLE":"block"},{"DESCRIPTION":"<p>Behaves like an block element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex\" title=\"css\/properties\/flex\">flex<\/a>.\n<\/p>","TITLE":"flex"},{"DESCRIPTION":"<p>Behaves like a block element for laying out content in the grid model.\n<\/p>\n<dl><dd> Note: At the time of this writing, most modern browsers do not support this property. This is a grid box model value (an experimental tag in CSS 3.0). See <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=css\/properties\/grid&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"css\/properties\/grid (page does not exist)\">grid<\/a>.\n<\/dd><\/dl>\n","TITLE":"grid"},{"DESCRIPTION":"<p>The element generates a block element box that flows with surrounding content as if it were a single inline box--and behaves like a replaced element. This is a basic value in CSS 2.1.\n<\/p>","TITLE":"inline-block"},{"DESCRIPTION":"<p>Behaves like an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex\" title=\"css\/properties\/flex\">flex<\/a>.\n<\/p>","TITLE":"inline-flex"},{"DESCRIPTION":"<p>Behaves like an inline element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0). See <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=css\/properties\/grid&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"css\/properties\/grid (page does not exist)\">grid<\/a>.\n<\/p>","TITLE":"inline-grid"},{"DESCRIPTION":"<p>The inline-table value does not have a direct mapping in HTML. It behaves like a <code>&#60;table&#62;<\/code> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"inline-table"},{"DESCRIPTION":"<p>An element set to inline generates one or more inline element boxes.\n<\/p>","TITLE":"inline"},{"DESCRIPTION":"<p>Generates a block box for the content and a separate list-item. This is a basic value in CSS 1.\n<\/p>","TITLE":"list-item"},{"DESCRIPTION":"<p>The behavior depends on the following conditions:\n<\/p>\n<dl><dd><ul><li> If the run-in box contains a block box, same as block.\n<\/li><li> If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.\n<\/li><li> If an inline box follows, the run-in box becomes a block box.\n<\/li><\/ul>\n<\/dd><\/dl>\n","TITLE":"run-in"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;caption&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-caption"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;td&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-cell"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;colgroup&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-column-group"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;col&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-column"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;tfoot&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-footer-group"},{"DESCRIPTION":"<p>Behaves like the corresponding <code>&#60;thead&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-header-group"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;tbody&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-row-group"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;tr&#62;<\/code> HTML element. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table-row"},{"DESCRIPTION":"<p>Behaves like the <code>&#60;table&#62;<\/code> HTML element. It defines a block-level box. This is a table model value in CSS 2.1.\n<\/p>","TITLE":"table"},{"DESCRIPTION":"<p>By default, the CSS display property is not inherited (\"Inherited: no\"). However, when the inherited property has been specified on an element (\"Inherited: Yes\"), the element uses the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/mask-repeat":{"SUMMARY":"<p>The \"mask-repeat property\" specifies whether a mask image is repeated (tiled), and how is repeated (round, space etc.).\n<\/p>","INITIALVALUE":"repeat","ID":"css\/properties\/mask-repeat","ANIMATABLE":false,"COMPUTEDVALUE":"A list, each item consisting of: two keywords, one per dimension","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-repeat","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The repeating behavior of the mask.\nSingle values for &lt;repeat-style&gt; are listed as follows:\n‘repeat-x’&#160;: the tiling of the mask object will occur in x direction.\n‘repeat-y’: the tiling of the mask object will occur in y direction.\n‘repeat’: the tiling of the mask object will occur as often as needed to cover the background area.\n‘space’: \n‘round’\n‘no-repeat’\n<\/p>","TITLE":"<repeat-style>"}]},"css\/properties\/text-overline-color":{"SUMMARY":"<p>Specifies the line color for the overline text decoration.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-overline-color","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overline-color","STATUS":"W3C Candidate Recommendation","VALUES":[]},"css\/properties\/box-ordinal-group":{"SUMMARY":"<p>Do not use. This property has been replaced by <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=flex-order&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"flex-order (page does not exist)\">flex-order<\/a>.\n<\/p><p>Specifies the ordinal group that a child element of the object belongs to. This ordinal value identifies the display order (along the axis defined by the <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=box-orient&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"box-orient (page does not exist)\">box-orient<\/a> property) for the group.\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/box-ordinal-group","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-ordinal-group","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Integer value that identifies the group that a child element belongs to.\n<\/p>","TITLE":"integer"}]},"css\/properties\/text-decoration-none":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/text-decoration-none","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-none","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Property is not set to <b>none<\/b>.\n<\/p>","TITLE":"VARIANT_FALSE"},{"DESCRIPTION":"<p>Property is set to <b>none<\/b>.\n<\/p>","TITLE":"VARIANT_TRUE"}]},"css\/properties\/transition":{"SUMMARY":"<p>The transition CSS property is a shorthand property for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-property\" title=\"css\/properties\/transition-property\">transition-property<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-duration\" title=\"css\/properties\/transition-duration\">transition-duration<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-timing-function\" title=\"css\/properties\/transition-timing-function\">transition-timing-function<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-delay\" title=\"css\/properties\/transition-delay\">transition-delay<\/a>. It allows to define the transition between two states of an element.\n<\/p>","INITIALVALUE":"see individual properties","ID":"css\/properties\/transition","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-delay\" title=\"css\/properties\/animation-delay\"><b>transition-delay<\/b><\/a> property.\n<\/p>","TITLE":"transition-delay"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-duration\" title=\"css\/properties\/animation-duration\"><b>transition-duration<\/b><\/a> property.\n<\/p>","TITLE":"transition-duration"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-property\" title=\"css\/properties\/transition-property\"><b>transition-property<\/b><\/a> property.\n<\/p>","TITLE":"transition-property"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-timing-function\" title=\"css\/properties\/animation-timing-function\"><b>transition-timing-function<\/b><\/a> property.\n<\/p>","TITLE":"transition-timing-function"}]},"css\/properties\/outline":{"SUMMARY":"<p>The CSS <code>outline<\/code> property is a shorthand property for setting one or more of the individual outline properties <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-style\" title=\"css\/properties\/outline-style\">outline-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-width\" title=\"css\/properties\/outline-width\">outline-width<\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-color\" title=\"css\/properties\/outline-color\">outline-color<\/a> in a single rule. In most cases the use of this shortcut is preferable and more convenient.\n<\/p><p>Outlines differ from <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border\" title=\"css\/properties\/border\">borders<\/a> in the following ways:\n<\/p>\n<ul><li> Outlines do not take up space, they are drawn above the content.\n<\/li><li> Outlines may be non-rectangular. They are rectangular in Gecko\/Firefox. Internet Explorer attempts to place the smallest contiguous outline around all elements or shapes that are indicated to have an outline. Opera draws a non-rectangular shape around a construct.\n<\/li><\/ul>\n","INITIALVALUE":"see individual properties","ID":"css\/properties\/outline","ANIMATABLE":true,"COMPUTEDVALUE":"see individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The <code>outline<\/code> property can contain up to three components:\n<\/p>\n<ul><li> <code>outline-color<\/code>: This can take any valid CSS color as its value.\n<\/li><li> <code>outline-style<\/code>: This takes any of the range of style values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-style\" title=\"css\/properties\/outline-style\"><b>outline-style<\/b><\/a> property, which includes <code>none<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>, <code>outset<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-style\" title=\"css\/properties\/outline-style\"><b>outline-style<\/b><\/a> page.\n<\/li><li> <code>outline-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><\/ul>\n","TITLE":"outline-color outline-style outline-width"},{"DESCRIPTION":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/grid-definition-columns":{"SUMMARY":"<p>This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the column, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the column.\n<\/p><p>As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as 'first' and 'header'.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/grid-definition-columns","ANIMATABLE":false,"COMPUTEDVALUE":"As specified, except for ‘auto’ (see prose)","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-definition-columns","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>No initial grid; any columns are implicitly generated with their size determined by the ‘grid-auto-columns’ property.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The track-list syntax is:\n<\/p><p>&lt;track-list&gt;    = &#91; &lt;string&gt;* &#91; &lt;track-size&gt; &#124; &lt;repeat-function&gt; &#93; &#93;+ &lt;string&gt;*\n<\/p><p>&lt;track-size&gt;    = minmax( &lt;track-breadth&gt; , &lt;track-breadth&gt; ) &#124; auto &#124; &lt;track-breadth&gt;\n<\/p><p>&lt;track-breadth&gt; = &lt;length&gt; &#124; &lt;percentage&gt; &#124; &lt;flex&gt; &#124; min-content &#124; max-content\n<\/p><p>Where the values are described as:\n<\/p>\n<ul><li> &lt;length&gt;\n<\/li><li> &lt;percentage&gt;: Percentage values are relative to the grid container width in grid column tracks. If the grid container measure is an indefinite size, &lt;percentage&gt; values relative to that size are treated as ‘auto’.\n<\/li><li> &lt;flex&gt;: A non-negative dimension with the unit \"fr\". Each &lt;flex&gt; value takes a share of the remaining space in proportion to its value. See Flexible Lengths for more details.\n<\/li><li> max-content: Largest max size contribution of the grid items occupying the grid track.\n<\/li><li> min-content: Largest min size contribution of the grid items occupying the grid track.\n<\/li><li> minmax(min, max): Defines a size range greater than or equal to min and less than or equal to max. If max &lt; min, then max is ignored and ‘minmax(min,max)’ is treated as min.\n<\/li><li> auto: Computes to ‘minmax(min-content, max-content)’.\n<\/li><\/ul>\n","TITLE":"<track-list>"}]},"css\/properties\/font-variant":{"SUMMARY":"<p>The <code>font-variant<\/code> property enables you to select the small-caps font within a font family.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/font-variant","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-variant","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Selects a font that is not a 'small-caps' font, usually the available 'normal' font.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Selects a 'small-caps' font. If not small caps variant is available, the browser generates a small caps approximation.\n<\/p>","TITLE":"small-caps"},{"DESCRIPTION":"<p>Inherits the font-variant setting from its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/outline-style":{"SUMMARY":"<p>The outline-style property sets the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/outline-style","ANIMATABLE":false,"COMPUTEDVALUE":"Specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-style","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Default. Outline is not drawn, color and width are ignored.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>A series of square-ended dashes.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>A series of round or square dots.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Outline is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-width\" title=\"css\/properties\/outline-width\">outline-width<\/a> value. The border width must be at least 3 pixels wide to draw a double outline.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/outline-color\" title=\"css\/properties\/outline-color\">outline-color<\/a>.)\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the outline is sunken into the canvas.\n<\/p>","TITLE":"inset"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the outline is coming out of the canvas.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>Looks as if it were coming out of the canvas.\n<\/p>","TITLE":"ridge"},{"DESCRIPTION":"<p>A single line segment.\n<\/p>","TITLE":"solid"},{"DESCRIPTION":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/transform-style":{"SUMMARY":"","INITIALVALUE":"flat","ID":"css\/properties\/transform-style","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transform-style","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Default. \nChild elements are flattened using orthographic projection into the 2-D plane of the object.\n<\/p>","TITLE":"flat"}]},"css\/properties\/flex-shrink":{"SUMMARY":"<p>The <b>flex-shrink<\/b> CSS property specifies how much a flex item will be reduced with respect to the other items in the flex container to fit within a reduced container.\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/flex-shrink","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-shrink","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The flex shrink factor, which describes the proportion by which the flex item will shrink relative to the other flex items in the container. Negative numbers are invalid.\n<\/p>","TITLE":"number"}]},"css\/properties\/text-overflow-ellipsis":{"SUMMARY":"<p>The text-overflow-ellipsis CSS property controls how the hint on overflowed content that is not displayed is signaled to the users. The presence of the hint is controlled with CSS property <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow-mode\" title=\"css\/properties\/text-overflow-mode\">text-overflow-mode<\/a>. Shorthand property is <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow\" title=\"css\/properties\/text-overflow\">text-overflow<\/a>.\n<\/p>","INITIALVALUE":"U+2026","ID":"css\/properties\/text-overflow-ellipsis","ANIMATABLE":false,"COMPUTEDVALUE":"specified value (except for initial and inherit)","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow-ellipsis","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The value is defined either as a string like the default UTF-8 character 'U+2026' or a URI and represents the ellipsis of text-overflow-mode property. If the value is defined as a URI it displays the image behind the URL. You can also set both values which then means they determine the overflow visual hint at the end and the hint after the element box. The latter visual hint is only displayed if there is clipped content because of the dimension limitation on the element block.\n<\/p>","TITLE":"string"}]},"css\/properties\/ruby-position":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/ruby-position","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ruby-position","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Ruby text is positioned above the base text.\n<\/p>","TITLE":"above"},{"DESCRIPTION":"<p>Ruby text is positioned inline with the base text.\n<\/p>","TITLE":"inline"}]},"css\/properties\/border-left":{"SUMMARY":"<p>Shorthand property that defines the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\"><b>border-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\"><b>border-color<\/b><\/a> of an element's left border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the left border — <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width\" title=\"css\/properties\/border-left-width\"><b>border-left-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style\" title=\"css\/properties\/border-left-style\"><b>border-left-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-color\" title=\"css\/properties\/border-left-color\"><b>border-left-color<\/b><\/a>.\n<\/p>","INITIALVALUE":"For style values, the initial value is none. For color values, the initial value is currentColor.  For width values, the initial value is medium, which is computed as about 3px in most browsers.","ID":"css\/properties\/border-left","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>border-left<\/code> property can contain up to three components:\n<\/p>\n<ul><li> <code>border-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-style<\/code>: This takes any of the range of style values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> property, which includes <code>none<\/code>, <code>hidden<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>, <code>outset<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> page.\n<\/li><li> <code>color<\/code>: This can take any valid CSS color as its value.\n<\/li><\/ul>\n","TITLE":"border-width border-style color"},{"DESCRIPTION":"<p>When we set the value to <code>inherit<\/code>, the element will inherit the border values set on its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/border-bottom-width":{"SUMMARY":"<p>Sets the width of an element's bottom border. To set all four borders, use the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> shorthand property which sets the values simultaneously for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width\" title=\"css\/properties\/border-top-width\">border-top-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width\" title=\"css\/properties\/border-right-width\">border-right-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width\" title=\"css\/properties\/border-bottom-width\">border-bottom-width<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width\" title=\"css\/properties\/border-left-width\">border-left-width<\/a>.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/border-bottom-width","ANIMATABLE":false,"COMPUTEDVALUE":"An absolute length; 0 if the border style is 'none' or 'hidden'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"<width>"},{"DESCRIPTION":"<p>Default.  \n<\/p>","TITLE":"medium"},{"DESCRIPTION":"<p>Greater than the default width.\n<\/p>","TITLE":"thick"},{"DESCRIPTION":"<p>Less than the default width.\n<\/p>","TITLE":"thin"}]},"css\/properties\/text-overflow-mode":{"SUMMARY":"<p>The text-overflow-mode CSS property controls the presence and position of the hint on overflowed content that is not displayed is signaled to the users. The constitution of the hint is controlled with CSS property <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow-ellipsis\" title=\"css\/properties\/text-overflow-ellipsis\">text-overflow-ellipsis<\/a>. Shorthand property is <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow\" title=\"css\/properties\/text-overflow\">text-overflow<\/a>.\n<\/p>","INITIALVALUE":"clip","ID":"css\/properties\/text-overflow-mode","ANIMATABLE":false,"COMPUTEDVALUE":"specified value (except for initial and inherit)","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow-mode","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Default. Simply clips the content and does not display ellipsis for text-overflow.\n<\/p>","TITLE":"clip"},{"DESCRIPTION":"<p>Display ellipsis (...) for text overflow after the last word that entirely fits into a line.\n<\/p>","TITLE":"ellipsis-word"},{"DESCRIPTION":"<p>Display ellipsis (...) for text overflow after the last letter that entirely fits into a line.\n<\/p>","TITLE":"ellipsis"}]},"css\/properties\/layout-grid-line":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/layout-grid-line","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-line","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Default. No grid line is set.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Largest character in the font of the element is used to set the character grid.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage derived from the dimensions of the parent object.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/word-wrap":{"SUMMARY":"<p>Defines whether to break words when the content exceeds the boundaries of its container. The <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/word-wrap\" title=\"css\/properties\/word-wrap\">css\/properties\/word-wrap<\/a> property is an alternate name for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow-wrap\" title=\"css\/properties\/overflow-wrap\">css\/properties\/overflow-wrap<\/a> property.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/word-wrap","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/word-wrap","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Content wraps to next line, and a word-break occurs when necessary.\n<\/p>","TITLE":"break-word"},{"DESCRIPTION":"<p>Default. Content exceeds the boundaries of its container.\n<\/p>","TITLE":"normal"}]},"css\/properties\/block-progression":{"SUMMARY":"<p>Sets or retrieves the block progression and layout orientation..\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/block-progression","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/block-progression","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Bottom-to-top block flow. Layout is horizontal.\n<\/p>","TITLE":"bt"},{"DESCRIPTION":"<p>Left-to-right block flow. Layout is vertical.\n<\/p>","TITLE":"lr"},{"DESCRIPTION":"<p>Right-to-left block flow. Layout is vertical.\n<\/p>","TITLE":"rl"},{"DESCRIPTION":"<p>Default. Top-to-bottom block flow. Layout is horizontal.\n<\/p>","TITLE":"tb"}]},"css\/properties\/max-height":{"SUMMARY":"<p>Sets the maximum <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> for an element. It prevents the height of the element to exceed the specified value. If <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-height\" title=\"css\/properties\/min-height\">min-height<\/a> is specified and is greater than max-height, max-height is overridden.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/max-height","ANIMATABLE":true,"COMPUTEDVALUE":"The percentage as specified or the absolute length or 'none'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-height","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Clears the max-height value. The height property can have any value.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/calc\" title=\"css\/functions\/calc\">css calc function<\/a> for mode details.\n<\/p>","TITLE":"calc()"},{"DESCRIPTION":"<p>Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fill-available"},{"DESCRIPTION":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fit-content"},{"DESCRIPTION":"<p>Specifies a fixed height. Negative values are not allowed. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for possible units.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space\/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>A &lt;percentage&gt; relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as none. Negative values are not allowed.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/unicode-bidi":{"SUMMARY":"<p>The <code>unicode-bidi<\/code> CSS property specifies the level of embedding with respect to the bidirectional algorithm.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/unicode-bidi","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/unicode-bidi","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Same as the <code>embed<\/code> value, except that, inside the element, reordering is strictly in sequence according to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/direction\" title=\"css\/properties\/direction\"><b>direction<\/b><\/a> property. This value overrides the implicit bidirectional algorithm.\n<\/p>","TITLE":"bidi-override"},{"DESCRIPTION":"<p>Element opens an additional level of embedding. The value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/direction\" title=\"css\/properties\/direction\"><b>direction<\/b><\/a> property specifies the embedding level. Reordering is implicit inside the element.\n<\/p>","TITLE":"embed"},{"DESCRIPTION":"<p>Default. Element does not open an additional level of embedding. For inline elements, implicit reordering works across element boundaries.\n<\/p>","TITLE":"normal"}]},"css\/properties\/column-span":{"SUMMARY":"<p>The <code>column-span<\/code> CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/column-span","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-span","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. The content block does not span multiple columns.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The content block spans all columns on a page. All content that is declared before the content block is shown before the content block.\n<\/p>","TITLE":"all"}]},"css\/properties\/border-image-source":{"SUMMARY":"<p>The property <code>border-image-source<\/code> is used to set the image to be used instead of the border style. If this is set to <code>none<\/code> the <code>border-style<\/code> is used instead.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-image-source","ANIMATABLE":false,"COMPUTEDVALUE":"‘none’ or the image with its URI made absolute","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-source","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. <code>border-style<\/code> is used instead.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/url()\" title=\"css\/functions\/url()\">\"CSS images: url()\"<\/a>.\n<\/p>","TITLE":"url(path\/to\/image.png)"}]},"css\/properties\/user-focus":{"SUMMARY":"<p>This is for all the high level UX stuff.\n<\/p>","INITIALVALUE":"all","ID":"css\/properties\/user-focus","ANIMATABLE":false,"COMPUTEDVALUE":"Specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/user-focus","STATUS":"","VALUES":[{"DESCRIPTION":"<p>None of the descendants of the element can be brought under consideration or focus, neither text nor images.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Default.  Every single thing is under focus.\n<\/p>","TITLE":"all"},{"DESCRIPTION":"<p>Only text of the element and its descendants can be focused or brought under consideration..\n<\/p>","TITLE":"text"}]},"css\/properties\/appearance":{"SUMMARY":"<p>Allows changing the style of any element to platform-based interface elements or vice versa.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/appearance","ANIMATABLE":false,"COMPUTEDVALUE":"specific value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/appearance","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>No special styling is applied. For Firefox note <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=649849\">bug 649849<\/a> and <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=605985\">bug 605985<\/a>\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"button-arrow-down"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"button-arrow-next"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"button-arrow-previous"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"button-arrow-up"},{"DESCRIPTION":"<p>Use button bevel theme for rendering the object. Seems to work only in mozilla based browsers\n<\/p>","TITLE":"button-bevel"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"button-focus"},{"DESCRIPTION":"<p>The element is drawn like a button\n<\/p>","TITLE":"button"},{"DESCRIPTION":"<p>No clear visual effect.\n<\/p>","TITLE":"caret"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"checkbox-container"},{"DESCRIPTION":"<p>Firefox specific - but no effect in latest version\n<\/p>","TITLE":"checkbox-small"},{"DESCRIPTION":"<p>The element is drawn like a checkbox, including only the actual \"checkbox\" portion.\n<\/p>","TITLE":"checkbox"},{"DESCRIPTION":"","TITLE":"dialog"},{"DESCRIPTION":"","TITLE":"listbox"}]},"css\/properties\/border-left-width":{"SUMMARY":"<p>Sets the width of an element's left border. To set all four borders, use the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> shorthand property which sets the values simultaneously for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width\" title=\"css\/properties\/border-top-width\">border-top-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width\" title=\"css\/properties\/border-right-width\">border-right-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width\" title=\"css\/properties\/border-bottom-width\">border-bottom-width<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width\" title=\"css\/properties\/border-left-width\">border-left-width<\/a>.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/border-left-width","ANIMATABLE":false,"COMPUTEDVALUE":"An absolute length; 0 if the border style is 'none' or 'hidden'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"<width>"},{"DESCRIPTION":"<p>Default.  \n<\/p>","TITLE":"medium"},{"DESCRIPTION":"<p>Greater than the default width.\n<\/p>","TITLE":"thick"},{"DESCRIPTION":"<p>Less than the default width.\n<\/p>","TITLE":"thin"}]},"css\/properties\/hyphenate-limit-zone":{"SUMMARY":"<p>Specifies the maximum amount of trailing whitespace (before justification) that may be left in a line before hyphenation is triggered to pull part of a word from the next line back up into the current one.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/hyphenate-limit-zone","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/hyphenate-limit-zone","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>Indicates the width of the hyphenation zone. Lengths set in font-relative units (em, ex, ch) tend to be more useful here. Negative values are not allowed.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Specifies the width of the hyphenation zone, relative to the total line length. Negative values are not allowed.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/mask-box-image-source":{"SUMMARY":"<p>Specifies an image to be used as mask. If the value is \"none\", the image cannot be displayed, or the property doesn't apply, the content will not be masked.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-box-image-source","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-box-image-source","STATUS":"","VALUES":[]},"css\/properties\/border-top":{"SUMMARY":"<p>Shorthand property that defines the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\"><b>border-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\"><b>border-color<\/b><\/a> of an element's top border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the top border — <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width\" title=\"css\/properties\/border-top-width\"><b>border-top-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style\" title=\"css\/properties\/border-top-style\"><b>border-top-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-color\" title=\"css\/properties\/border-top-color\"><b>border-top-color<\/b><\/a>.\n<\/p>","INITIALVALUE":"For style values, the initial value is none. For color values, the initial value is currentColor.  For width values, the initial value is medium, which is computed as about 3px in most browsers..","ID":"css\/properties\/border-top","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>border-top<\/code> property can contain up to three components:\n<\/p>\n<ul><li> <code>border-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-style<\/code>: This takes any of the range of style values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> property, which includes <code>none<\/code>, <code>hidden<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>, <code>outset<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> page.\n<\/li><li> <code>color<\/code>: This can take any valid CSS color as its value.\n<\/li><\/ul>\n","TITLE":"border-width border-style color"},{"DESCRIPTION":"<p>When we set the value to <code>inherit<\/code>, the element will inherit the border values set on its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/border-radius":{"SUMMARY":"<p>The border-radius CSS property allows authors to round the corners of an element. The rounding can be different per-corner, and it could have different horizontal and vertical radii, to produce elliptical curves.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/border-radius","ANIMATABLE":true,"COMPUTEDVALUE":"As specified by individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-radius","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifying two sets of length values separated by a forward slash equates to specifying separate lengths for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have different lengths. Each set can consist of one, two, three or four values.\n<\/p>","TITLE":"length \/ length"},{"DESCRIPTION":"<p>Denotes the size of the circle radius or the horizontal and vertical radii, for elliptical curves. It can be expressed in any unit allowed in <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">CSS &lt;length&gt; data types<\/a>. em units are useful for controls that scale proportionally with the font-size. Viewport-relative units (vw, vh, vmin, vmax) can be useful for controls that scale with the viewport size. Negative values are invalid. You can specify a single length for all four corners, or two, three or four lengths to specify different lengths for different corners: see the syntax section for more details.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Specifying two sets of percentage values separated by a forward slash equates to specifying separate percentages for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have percentages resulting in different computed values (depending on the width and height of the element, different percentages might result in the same computed values; see the remarks section for more). Each set can consist of one, two, three or four values.\n<\/p>","TITLE":"percentage \/ percentage"},{"DESCRIPTION":"<p>Denotes the size of the corner radius, in percentages of the box’s border-box dimensions. Specifically, percentages for the horizontal axis refer to the width of the border-box, percentages for the vertical axis refer to the height of the border-box. Negative values are invalid. You can specify a single percentage for all four corners, or two, three or four percentages to specify different percentages for different corners: see the syntax section for more details.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/orphans":{"SUMMARY":"<p>In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the old page. This property is normally used to control how page breaks occur. This property only affects paged media such as print.\nFor example, if a paragraph can't fit on one page in its entirety it is split wherever it is possible. In this way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted, so many word processors require at least two lines to be left on an old page, instead of one. You can give it either a positive number (where 2 is the default) or inherit.\n<\/p><p>Note that the orphan property does not generally affect non-paged media such as screen. However, browsers supporting both orphans and columns will apply the intended functionality to columns as well. Also, the property only affects block-level elements.\n<\/p>","INITIALVALUE":2,"ID":"css\/properties\/orphans","ANIMATABLE":false,"COMPUTEDVALUE":"As specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/orphans","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Only positive values are allowed.\nA <b>String<\/b> that specifies or receives the minimum number of lines to print at the bottom of a page.\n<\/p>","TITLE":"integer"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/shape-image-threshold":{"SUMMARY":"<p>Defines the alpha channel threshold used to extract a shape from an image.\n<\/p>","INITIALVALUE":0.5,"ID":"css\/properties\/shape-image-threshold","ANIMATABLE":true,"COMPUTEDVALUE":"As specified, clamped to a 0.0-1.0 range","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/shape-image-threshold","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A &lt;number&gt; value used to set the threshold used for extracting a shape from an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.\n<\/p>","TITLE":"<alphavalue>"}]},"css\/properties\/grid-template":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/grid-template","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-template","STATUS":"","VALUES":[]},"css\/properties\/wrap-through":{"SUMMARY":"<p>Specifies whether an element respects its parent's wrapping context (which is defined by the use of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/wrap-flow\" title=\"css\/properties\/wrap-flow\">wrap-flow<\/a> property).\n<\/p>","INITIALVALUE":"wrap","ID":"css\/properties\/wrap-through","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/wrap-through","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>This element's inline content ignores its parent's wrapping context. Content will only wrap around exclusions defined inside this element\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>This element's inline content respects its parent's wrapping context. Content will wrap around exclusions defined outside this element and inside this element\n<\/p>","TITLE":"wrap"}]},"css\/properties\/clip":{"SUMMARY":"<p>Lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/clip","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/clip","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Clip to expose entire object.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Top, right, bottom, and left specify length values, any of which can be replaced by <b>auto<\/b>, leaving that side not clipped. The value of top specifies that everything above this value on the Y axis (with 0 at the top) is clipped. The value of right specifies that everything above this value on the X axis (with 0 at the left) is clipped. The value of bottom specifies that everything below this value on the Y axis (with 0 at the top) is clipped. The value of left specifies that everything to the left of this value on the X axis (with 0 at the left) is clipped.\n<\/p>","TITLE":"rect(top, right, bottom, left)"}]},"css\/properties\/font-weight":{"SUMMARY":"<p>The <code>font-weight<\/code> property specifies the weight or boldness of the font (their degree of blackness or stroke thickness). Note that some fonts are not available in all weights; some are available only on <b>normal<\/b> and <b>bold<\/b>.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/font-weight","ANIMATABLE":true,"COMPUTEDVALUE":"The keyword or the numerical value as specified, with bolder and lighter transformed to the real value.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-weight","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used.\n<\/p>","TITLE":"100, 200, 300, 400, 500, 600, 700, 800, 900"},{"DESCRIPTION":"<p>Bold font weight. Same as <b>700<\/b>.\n<\/p>","TITLE":"bold"},{"DESCRIPTION":"<p>One font weight darker than the parent element (among the available weights of the font).\n<\/p>","TITLE":"bolder"},{"DESCRIPTION":"<p>One font weight lighter than the parent element (among the available weights of the font).\n<\/p>","TITLE":"lighter"},{"DESCRIPTION":"<p>Normal font weight. Same as <b>400<\/b>.\n<\/p>","TITLE":"normal"}]},"css\/properties\/region-overflow":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/region-overflow","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/region-overflow","STATUS":"","VALUES":[]},"css\/properties\/flex-basis":{"SUMMARY":"<p>The <b>flex-basis<\/b> CSS property describes the initial main size of the flex item before any free space is distributed according to the flex factors described in the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex\" title=\"css\/properties\/flex\">flex<\/a> property (<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-grow\" title=\"css\/properties\/flex-grow\">flex-grow<\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-shrink\" title=\"css\/properties\/flex-shrink\">flex-shrink<\/a>).\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/flex-basis","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-basis","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The flex item's initial main size is determined by either the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/width\" title=\"css\/properties\/width\">width<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> property, whichever is in the main dimension, as determined by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-flow\" title=\"css\/properties\/flex-flow\">flex-direction<\/a> property. Note that the value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/width\" title=\"css\/properties\/width\">width<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> property itself may be <b>auto<\/b>, in which case the size is determined by the flex item's contents.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>In a vertical writing mode; percentage values of <b>flex-basis<\/b> are resolved against the flex item's flex container, and if that containing block's size is indefinite, the result is undefined.\n<\/p>","TITLE":"height"},{"DESCRIPTION":"<p>In a horizontal writing mode; percentage values of <b>flex-basis<\/b> are resolved against the flex item's flex container, and if that containing block's size is indefinite, the result is undefined.\n<\/p>","TITLE":"width"}]},"css\/properties\/animation-iteration-count":{"SUMMARY":"<p>Specifies how many times an animation cycle should play\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/animation-iteration-count","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-iteration-count","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p><code>&lt;number&gt;<\/code> or <code>infinite<\/code>.\n<\/p>\n<dl><dt><code>&lt;number&gt;<\/code>\n<\/dt><dd>The default value is <code>1<\/code>, which plays the animation once, from beginning to end. Numbers other than <code>1<\/code> cause the animation to play the specified number of times. Non-integer numbers cause the animation to end part-way through a cycle.\n<\/dd><dt><code>infinite<\/code>\n<\/dt><dd>The animation repeats forever.\n<\/dd><\/dl>\n","TITLE":"single-animation-iteration-count"}]},"css\/properties\/background-color":{"SUMMARY":"<p>Sets a color to fill up the background of an element it is applied to and accepts any valid CSS color.\n<\/p>","INITIALVALUE":"transparent","ID":"css\/properties\/background-color","ANIMATABLE":true,"COMPUTEDVALUE":"the computed color","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-color","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p><code>background-color<\/code> accepts a single color as its value, which can be a keyword, hex, RGB, RGBa, HSL or HSLa color value. See the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/color\" title=\"css\/color\">CSS color values<\/a> page for more details.\n<\/p>","TITLE":"color"},{"DESCRIPTION":"<p>The default value; you will be able to see the elements behind the element in question showing through it.\n<\/p>","TITLE":"transparent"},{"DESCRIPTION":"<p>The element's background-color is inherited from its parent element.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/bottom":{"SUMMARY":"<p>Sets the position of the bottom edge of an element.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/bottom","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/bottom","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Default position, according to the regular HTML layout of the page.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/max-font-size":{"SUMMARY":"<p>This property is only used when the text-align-last property is set to size. It controls allowed adjustments of font-size to fit line content.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/max-font-size","ANIMATABLE":false,"COMPUTEDVALUE":"font-size","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-font-size","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The rendering agent determines the minium font size.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The font size of the last line of an element is restricted to being less than either the computed font-size or this number, whichever is larger.\n<\/p>","TITLE":"font-size"}]},"css\/properties\/text-decoration-underline":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/text-decoration-underline","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-underline","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Prevent the underline.\n<\/p>","TITLE":"VARIANT_FALSE"},{"DESCRIPTION":"<p>Apply the underline.\n<\/p>","TITLE":"VARIANT_TRUE"}]},"css\/properties\/shape-inside":{"SUMMARY":"<p>A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element. See Editor's Draft &lt;<a rel=\"nofollow\" class=\"external free\" href=\"http:\/\/dev.w3.org\/csswg\/css-shapes\/\">http:\/\/dev.w3.org\/csswg\/css-shapes\/<\/a>&gt; and CSSWG wiki page on next-level plans &lt;<a rel=\"nofollow\" class=\"external free\" href=\"http:\/\/wiki.csswg.org\/spec\/css-shapes\">http:\/\/wiki.csswg.org\/spec\/css-shapes<\/a>&gt;\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/shape-inside","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/shape-inside","STATUS":"Experimental","VALUES":[]},"css\/properties\/knock-out":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/knock-out","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/knock-out","STATUS":"","VALUES":[]},"css\/properties\/opacity":{"SUMMARY":"<p>The opacity property controls transparency and opacity of an element. Its values range from 0 to 1. Assuming defaults at parent level, an element with an opacity of 1 is completely opaque, whereas and element with an opacity of 0 is completely transparent. The opacity used when rendering an element is the product of its opacity and the opacity of its ancestors.\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/opacity","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/opacity","STATUS":"","VALUES":[{"DESCRIPTION":"<p>A <b>floating-point<\/b> value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range.\n<\/p>","TITLE":"alpha-value"},{"DESCRIPTION":"<p>Indicates that the property takes the same computed value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/background-position":{"SUMMARY":"<p><code>background-position<\/code> allows you to set the placement of a <code>background-image<\/code> on the element it is applied to. <code>background-position<\/code> generally takes two values, which set the horizontal and vertical position of the background image inside the element.\n<\/p>","INITIALVALUE":"0% 0%","ID":"css\/properties\/background-position","ANIMATABLE":true,"COMPUTEDVALUE":"A list, each item consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a &lt;length&gt;), otherwise as a percentage.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-position","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>If you have applied multiple background images to an element, you can give each background image a different position by specifying multiple background position values delimited by commas. The values supplied will cycle so that all images are given a <code>background-position<\/code>, for example if four background images are specified and only two position values, position 1 will be applied to images 1 and 3, and position 2 to images 2 and 4.\n<\/p>","TITLE":"30% 15%, 40% 80%, 10px 10px"},{"DESCRIPTION":"<p>Any standard CSS units are acceptable as <code>background-position<\/code> values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the background image is away from the top left corner of the element. For more details on these units, read <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">Length units<\/a>.\n<\/p>","TITLE":"[[css\/data_types\/length|length]] [[css\/data_types\/length|length]]"},{"DESCRIPTION":"<p>Percentages are acceptable for <code>background-position<\/code> values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the background image is away from the top left corner of the element.\n<\/p>","TITLE":"[[css\/data_types\/percentage|percentage]] [[css\/data_types\/percentage|percentage]]"},{"DESCRIPTION":"<p>If only a single value is included, that is taken as the horizontal value, and the vertical value is set as <code>center<\/code>.\n<\/p>","TITLE":"[[css\/data_types\/percentage|percentage]]"},{"DESCRIPTION":"<p>CSS3 includes the new four value <code>background-position<\/code> syntax, which allows you to choose which sides of the element you are positioning the background image relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the background image 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0.\n<\/p>","TITLE":"bottom [[css\/data_types\/length|length]] right [[css\/data_types\/length|length]]"},{"DESCRIPTION":"<p><code>background-position<\/code> can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the background image, but rather the overall position of the background image inside the element. So for example, a value of <code>right top<\/code> will make the background image site flush to the top and right sides of the element it is applied to; the top left corner <i>won't<\/i> be positioned at the top right of the element!\n<\/p>","TITLE":"left top"}]},"css\/properties\/touch-action":{"SUMMARY":"<p>Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/touch-action","ANIMATABLE":false,"COMPUTEDVALUE":"Same as specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/touch-action","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Touches that begin on the element do not trigger default touch behaviors.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The user agent determines the permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The property takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/transform":{"SUMMARY":"<p>CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.\n<\/p><p>The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.\n<\/p><p>If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/transform","ANIMATABLE":true,"COMPUTEDVALUE":"As specified, but with relative lengths converted into absolute lengths.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transform","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Specifies that no transform should be applied.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix [a b c d tx ty].\n<\/p>","TITLE":"matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)"},{"DESCRIPTION":"<p>Rotates the element clockwise around its origin (as specified by the transform-origin property) by the specified <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/angle\" title=\"css\/data types\/angle\">angle<\/a>.\n<\/p>","TITLE":"rotate(20deg)"},{"DESCRIPTION":"<p>Specifies a 3D rotation of the element around the X axis at its origin (as specified by the transform-origin property) by the specified <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/angle\" title=\"css\/data types\/angle\">angle<\/a>.\n<\/p>","TITLE":"rotateX(20deg)"},{"DESCRIPTION":"<p>Specifies a 3D rotation of the element around the Y axis at its origin (as specified by the transform-origin property) by the specified <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/angle\" title=\"css\/data types\/angle\">angle<\/a>.\n<\/p>","TITLE":"rotateY(20deg)"},{"DESCRIPTION":"<p>Specifies a 3D rotation of the element around the Z axis at its origin (as specified by the transform-origin property) by the specified <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/angle\" title=\"css\/data types\/angle\">angle<\/a>.\n<\/p>","TITLE":"rotateZ(20deg)"},{"DESCRIPTION":"<p>Specifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.\n<\/p>","TITLE":"scale(2, 0.5)"},{"DESCRIPTION":"<p>Specifies a scale operation using the vector [sx, 1].\n<\/p>","TITLE":"scaleX(3)"},{"DESCRIPTION":"<p>Specifies a scale operation using the vector [1, sy].\n<\/p>","TITLE":"scaleY(0.5)"},{"DESCRIPTION":"<p>Specifies a 2D skew transformation along the X axis by the given <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/angle\" title=\"css\/data types\/angle\">angle<\/a>.\n<\/p>","TITLE":"skewX(40deg)"},{"DESCRIPTION":"<p>Specifies a 2D skew transformation along the Y axis by the given <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/angle\" title=\"css\/data types\/angle\">angle<\/a>.\n<\/p>","TITLE":"skewY(0.25turn)"},{"DESCRIPTION":"<p>Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.\n<\/p>","TITLE":"translate(12px, 50%)"},{"DESCRIPTION":"<p>Translates the element by the given amount along the X axis.\n<\/p>","TITLE":"translateX(2em)"},{"DESCRIPTION":"<p>Translates the element by the given amount along the Y axis.\n<\/p>","TITLE":"translateY(50px)"}]},"css\/properties\/pointer-events":{"SUMMARY":"<p>The pointer-events property  allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/pointer-events","ANIMATABLE":false,"COMPUTEDVALUE":"the specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/pointer-events","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have the <code>pointer-events<\/code> set to some other value.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element.\n<\/p>","TITLE":"all"},{"DESCRIPTION":"<p>In HTML\/XML content, this value and the value all have the same effect. In SVG content, this value and the value visiblePainted have the same effect.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element.\n<\/p>","TITLE":"fill"},{"DESCRIPTION":"<p>For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the <code>fill<\/code>, <code>stroke<\/code> property is set to a value other than none.\n<\/p>","TITLE":"painted"},{"DESCRIPTION":"<p>For SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element.\n<\/p>","TITLE":"stroke"},{"DESCRIPTION":"<p>The element may be the target of pointer events when the <code>visibility<\/code> property is set to visible, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element).\n<\/p>","TITLE":"visible"},{"DESCRIPTION":"<p>For SVG only. The element can only be the target of a pointer event when the <code>visibility<\/code> property is set to visible and when the pointer is over the interior (i.e., fill) of the element.\n<\/p>","TITLE":"visibleFill"},{"DESCRIPTION":"<p>For SVG only. The element can only be the target of a pointer event when the <code>visibility<\/code> property is set to <span class=\"value\">visible<\/span> and when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the <code>fill<\/code>, <code>stroke<\/code> property is set to a value other than none.\n<\/p>","TITLE":"visiblePainted"},{"DESCRIPTION":"<p>For SVG only. The element can only be the target of a pointer event when the <code>visibility<\/code> property is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element.\n<\/p>","TITLE":"visibleStroke"}]},"css\/properties\/hyphenate-limit-chars":{"SUMMARY":"<p>Specifies the minimum number of characters in a hyphenated word\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/hyphenate-limit-chars","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/hyphenate-limit-chars","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"<p>One to three integer values, corresponding to the word limit, the minimum number of characters required before a hyphenation break, and the minimum number of characters required following a hyphenation break, respectively.\n<\/p><p>If the third value is missing it is equal to the second.\n<\/p><p>If the second and third values are missing they are given a value of <b>auto<\/b>.\n<\/p><p>Negative values are not allowed.\n<\/p>","TITLE":"[[css\/data_types\/integer|integer]]"},{"DESCRIPTION":"<p>Corresponds to a value of <code>5 2 2<\/code>, indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break.\n<\/p>","TITLE":"auto"}]},"css\/properties\/column-rule":{"SUMMARY":"<p>Sets the width, style, and color of the rule between columns.\n<\/p>","INITIALVALUE":"see individual properties","ID":"css\/properties\/column-rule","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule-color\" title=\"css\/properties\/column-rule-color\"><b>column-rule-color<\/b><\/a> property.\n<\/p>","TITLE":"column-rule-color"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule-style\" title=\"css\/properties\/column-rule-style\"><b>column-rule-style<\/b><\/a> property.\n<\/p>","TITLE":"column-rule-style"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule-width\" title=\"css\/properties\/column-rule-width\"><b>column-rule-width<\/b><\/a> property.\n<\/p>","TITLE":"column-rule-width"},{"DESCRIPTION":"<p>Indicates rule is transparent.\n<\/p>","TITLE":"transparent"}]},"css\/properties\/text-emphasis-style":{"SUMMARY":"<p>The <code>text-emphasis-style<\/code> property applies special emphasis marks to an element's text.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-emphasis-style","ANIMATABLE":false,"COMPUTEDVALUE":"‘none’, a pair of keywords representing the shape and fill, or a string","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-emphasis-style","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>No emphasis marks.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Display the given string as marks. Authors should not specify more than one character in &lt;string&gt;. The UA may truncate or ignore strings consisting of more than one grapheme cluster.\n<\/p>","TITLE":"<string>"},{"DESCRIPTION":"<p>Display large circles as marks. The filled circle is U+25CF ‘●’, and the open circle is U+25CB ‘○’.\n<\/p>","TITLE":"circle"},{"DESCRIPTION":"<p>Display small circles as marks. The filled dot is U+2022 ‘•’, and the open dot is U+25E6 ‘◦’.\n<\/p>","TITLE":"dot"},{"DESCRIPTION":"<p>Display double circles as marks. The filled double-circle is U+25C9 ‘◉’, and the open double-circle is U+25CE ‘◎’.\n<\/p>","TITLE":"double-circle"},{"DESCRIPTION":"<p>The shape is filled with solid color.\n<\/p>","TITLE":"filled"},{"DESCRIPTION":"<p>The shape is hollow.\n<\/p>","TITLE":"open"},{"DESCRIPTION":"<p>Display sesames as marks. The filled sesame is U+FE45 ‘﹅’, and the open sesame is U+FE46 ‘﹆’.\n<\/p>","TITLE":"sesame"},{"DESCRIPTION":"<p>Display triangles as marks. The filled triangle is U+25B2 ‘▲’, and the open triangle is U+25B3 ‘△’.\n<\/p>","TITLE":"triangle"}]},"css\/properties\/text-rendering":{"SUMMARY":"<p>The text-rendering CSS property provides information to the browser about how to optimize when rendering text. Options are: legibility, speed or geometric precision.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/text-rendering","ANIMATABLE":true,"COMPUTEDVALUE":"auto","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-rendering","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Indicates that the browser should choose the most appropriate method between speed, legibility and geometric precision, but favors legibility over speed and geometric precision.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Indicates that the browser should favor geometric precision over rendering speed and legibility. Usually, this option causes the browser to not use hinting. Instead glyph outlines are drawn with comparable geometric precision to the rendering of path data.\nThis setting can be helpful when using kerning, which does often not scale linearly and can make text using such fonts look good.\n<\/p>","TITLE":"geometricPrecision"},{"DESCRIPTION":"<p>Indicates that the browser should favor legibility over rendering speed and geometric precision. Browsers usually apply anti-aliasing or font hinting to display the most legible text.\n<\/p>","TITLE":"optimizeLegibility"},{"DESCRIPTION":"<p>Indicates that the browser should favor rendering speed over legibility and geometric precision. Browsers usually disable kerning and ligatures and sometimes turn off anti-aliasing.\n<\/p>","TITLE":"optimizeSpeed"}]},"css\/properties\/border-bottom-right-radius":{"SUMMARY":"<p>Defines the shape of the border of the bottom-right corner.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/border-bottom-right-radius","ANIMATABLE":true,"COMPUTEDVALUE":"two absolute &lt;length&gt; or percentages","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-right-radius","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">CSS &lt;length&gt; data types<\/a>. Negative values are invalid.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/content":{"SUMMARY":"<p>The content property is used with the pseudo-elements&#160;::before and&#160;::after.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/content","ANIMATABLE":true,"COMPUTEDVALUE":"On elements, always computers to normal.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/content","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Pseudo element is not generated.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Sets the content to be the appropriate string from the quotes property.\n<\/p>","TITLE":"close-quote"},{"DESCRIPTION":"<p>Counters may be specified with two different functions: 'counter()' or 'counters()'.  'counter()' has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default).  'counters()'  also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. \n<\/p><p>The counters are rendered in the indicated style ('decimal' by default). The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.\n<\/p>","TITLE":"counter"},{"DESCRIPTION":"<p>If set, removes the closing quote from the content.\n<\/p>","TITLE":"no-close-quote"},{"DESCRIPTION":"<p>If set, removes the opening quote from the content.\n<\/p>","TITLE":"no-open-quote"},{"DESCRIPTION":"<p>Equivalent to \"none\" for&#160;:before and&#160;:after pseudo-elements, which are the only places the content property currently applies.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Sets the content to be the appropriate string from the quotes property.\n<\/p>","TITLE":"open-quote"},{"DESCRIPTION":"<p>Text content, in either double quotation marks (\") or single quotation marks (').\n<\/p>","TITLE":"string"},{"DESCRIPTION":"<p>URI designates an external resource, such as an image. If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.<a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=Template:cn&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"Template:cn (page does not exist)\">Template:cn<\/a>\n<\/p>","TITLE":"uri"}]},"css\/properties\/text-overflow":{"SUMMARY":"<p>The text-overflow shorthand CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow-mode\" title=\"css\/properties\/text-overflow-mode\">text-overflow-mode<\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow-ellipsis\" title=\"css\/properties\/text-overflow-ellipsis\">text-overflow-ellipsis<\/a>\n<\/p>","INITIALVALUE":"not defined for shorthand properties","ID":"css\/properties\/text-overflow","ANIMATABLE":false,"COMPUTEDVALUE":"see individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-overflow","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Simply clips the content and does not display ellipsis for text-overflow.\n<\/p>","TITLE":"clip"},{"DESCRIPTION":"<p>Display ellipsis (...) for text overflow after the last word that entirely fits into a line.\n<\/p>","TITLE":"ellipsis-word"},{"DESCRIPTION":"<p>Display ellipsis (...) for text overflow after the last letter that entirely fits into a line.\n<\/p>","TITLE":"ellipsis"}]},"css\/properties\/ms-scroll-limit":{"SUMMARY":"","INITIALVALUE":0,"ID":"css\/properties\/ms-scroll-limit","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMax\" title=\"css\/properties\/ms-scroll-limit-xMax\"><b>-ms-scroll-limit-x-max<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-limit-x-max"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMin\" title=\"css\/properties\/ms-scroll-limit-xMin\"><b>-ms-scroll-limit-x-min<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-limit-x-min"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-yMax\" title=\"css\/properties\/ms-scroll-limit-yMax\"><b>-ms-scroll-limit-y-max<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-limit-y-max"},{"DESCRIPTION":"<p>Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-yMin\" title=\"css\/properties\/ms-scroll-limit-yMin\"><b>-ms-scroll-limit-y-min<\/b><\/a> property.\n<\/p>","TITLE":"-ms-scroll-limit-y-min"}]},"css\/properties\/wrap-margin":{"SUMMARY":"<p>Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape's margin.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/wrap-margin","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/wrap-margin","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The value that is used to offset the inner wrap shape from other shapes.\n<\/p>","TITLE":"<length>"}]},"css\/properties\/word-spacing":{"SUMMARY":"<p>The <code>word-spacing<\/code> CSS property specifies the spacing behavior between \"words\".\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/word-spacing","ANIMATABLE":false,"COMPUTEDVALUE":"an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword ‘normal’","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/word-spacing","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Indicates inter-word space in addition to the default space between words, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Values may be negative, but there may be implementation-specific limits.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The spacing is the normal spacing for the current font.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Specifies the additional spacing as a percentage of the affected word's advance measure.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/grid-auto-columns":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/grid-auto-columns","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-auto-columns","STATUS":"","VALUES":[]},"css\/properties\/mask-clip":{"SUMMARY":"<p>Determines the mask painting area, which determines the area that is affected by the mask. The painted content of an element may be restricted to this area.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-clip","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-clip","STATUS":"","VALUES":[]},"css\/properties\/layout-grid-type":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/layout-grid-type","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-type","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Grid used for monospaced layout. The layout rules are as follows:  All noncursive characters are treated as equal; every character is centered within a single grid space by default.  Runs of cursive characters are treated as strips the same as in a <b>strict<\/b> grid.  Justification or any other character-width changing behaviors are disabled.\n<\/p>","TITLE":"fixed"},{"DESCRIPTION":"<p>Default. Grid used for Japanese and Korean characters. In this mode, a constant width increment is applied to characters as follows: Wide characters and narrow kana characters are incremented to obtain an exact grid fit, as specified by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-char\" title=\"css\/properties\/layout-grid-char\"><b>-ms-layout-grid-char<\/b><\/a> property.  Other narrow characters, except connected and cursive characters, are incremented by half of the increment amount applied to wide characters.  Other characters, including connected and  cursive characters, are not incremented, and behave as if no character grid is set.\n<\/p>","TITLE":"loose"},{"DESCRIPTION":"<p>Grid used for Chinese, as well as Japanese (Genko) and Korean characters. Only the ideographs, kanas, and wide characters are snapped to the grid. Other characters are rendered as usual, as though the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-mode\" title=\"css\/properties\/layout-grid-mode\"><b>-ms-layout-grid-mode<\/b><\/a> attribute is set to <b>none<\/b> or <b>line<\/b> for text spans containing these characters. This mode also disables special text justification and character width adjustments normally applied to the element. Finally, if there is no line-break opportunity in a text span that exceeds the line boundary, the text is pushed to the next line and the last part of the previous line is left blank.\n<\/p>","TITLE":"strict"}]},"css\/properties\/tab-size":{"SUMMARY":"<p>The tab-size CSS property is used to customise the width of a tab (U+0009) character.\n<\/p>","INITIALVALUE":8,"ID":"css\/properties\/tab-size","ANIMATABLE":false,"COMPUTEDVALUE":"the specified integer or an absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/tab-size","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The number of spaces in a tab. Must be positive.\n<\/p>","TITLE":"<integer>"},{"DESCRIPTION":"<p>Inherits from the parent element.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/text-line-through-width":{"SUMMARY":"<p>Specifies the line width for the line-through text decoration.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-line-through-width","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-line-through-width","STATUS":"","VALUES":[]},"css\/properties\/grid-row":{"SUMMARY":"<p>Shorthand for grid-before\/after and grid-start\/end.\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/grid-row","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-row","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Integer value or String that identifies the specified row.\n<\/p>","TITLE":"<integer> || <string>"},{"DESCRIPTION":"<p>Automatically places an item using the auto-placement algorithm.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Places an item with contiguous space available to the &lt;integer&gt; value. Using the &lt;string&gt; value only considers lines with that name.\n<\/p>","TITLE":"span && <integer> || <string>"}]},"css\/properties\/text-decoration-line-through":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/text-decoration-line-through","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-line-through","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Prevent the line-through.\n<\/p>","TITLE":"VARIANT_FALSE"},{"DESCRIPTION":"<p>Apply the line-through.\n<\/p>","TITLE":"VARIANT_TRUE"}]},"css\/properties\/word-break":{"SUMMARY":"<p>word-break is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/word-break","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/word-break","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Behaves as\n<b>normal<\/b>\nfor CJK text, yet allows the line to break arbitrarily\nfor non-CJK text. This value is suited to CJK text\nthat contains small amounts of non-CJK text.\n<\/p>","TITLE":"break-all"},{"DESCRIPTION":"<p>Behaves as\n<b>normal<\/b>\nfor non-CJK text, but disallows word breaking for\nCJK text. This value is suited to\nnon-CJK text that includes small amounts of CJK text.\n<\/p>","TITLE":"keep-all"},{"DESCRIPTION":"<p>Default.\nAllows line breaking within words.\n<\/p>","TITLE":"normal"}]},"css\/properties\/mask-box-image-repeat":{"SUMMARY":"<p>This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. The first keyword applies to the horizontal sides, the second one applies to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-box-image-repeat","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-box-image-repeat","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The image is tiled (repeated) to fill the area.\n<\/p>","TITLE":"repeat"},{"DESCRIPTION":"<p>The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does.\n<\/p>","TITLE":"round"},{"DESCRIPTION":"<p>The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.\n<\/p>","TITLE":"space"},{"DESCRIPTION":"<p>The image is stretched to fill the area.\n<\/p>","TITLE":"stretch"}]},"css\/properties\/line-height":{"SUMMARY":"<p>The line-height property specifies the height of an inline block level element. The value of the line-height property cannot be negative.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/line-height","ANIMATABLE":true,"COMPUTEDVALUE":"for &lt;length&gt; and &lt;percentage&gt; the absolute value; otherwise as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/line-height","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>This value has no effect on the rendering of the element and for block inline elements it is equivalent to 'normal.'\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The specified length is used in the calculation of the line box height: a number immediately followed by a length unit - <code>px<\/code>, <code>em<\/code>, <code>pc<\/code>, <code>in<\/code>, <code>mm<\/code>. Negative values cannot be used.\n<\/p>","TITLE":"<length>"},{"DESCRIPTION":"<p>The used value of the property is this number multiplied by the element's font size. Negative values cannot be used.\n<\/p>","TITLE":"<number>"},{"DESCRIPTION":"<p>The value of this property is determined by multiplying this number by the element's font size. Negative values cannot be used.\n<\/p>","TITLE":"<percentage>"},{"DESCRIPTION":"<p>Take the height fixed by the default css of the user browser. \nIn most cases, it multiplies the height of the font by 1.2.\n<\/p>","TITLE":"normal"}]},"css\/properties\/grid-column-position":{"SUMMARY":"<p>Specifies a column position to place Grid items on the Grid based on integer location, string value, or column size.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/grid-column-position","ANIMATABLE":false,"COMPUTEDVALUE":"see text","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-column-position","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Refers to a named Grid area and computes to a Grid line with the starting edge of the Grid area.\n<\/p>","TITLE":"<identifier>"},{"DESCRIPTION":"<p>A value that specifies a grid line in the grid.\n<\/p>","TITLE":"<integer>"},{"DESCRIPTION":"<p>A name value that specifies a named grid line.\n<\/p>","TITLE":"<string>"},{"DESCRIPTION":"<p>Places a Grid item based on an automatic placement algorithm.\n<\/p>","TITLE":"auto"}]},"css\/properties\/mask-image":{"SUMMARY":"<p>This property sets the mask image or the mask source of an element. Images are drawn such that the first one specified is on top (closest to the user) and each subsequent image is behind the previous one.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/mask-image","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/mask-image","STATUS":"","VALUES":[]},"css\/properties\/border-collapse":{"SUMMARY":"<p>Border-collapse can be used for collapsing the borders between table cells.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/border-collapse","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-collapse","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Borders are collapsed, where adjacent, into a single border.\n<\/p>","TITLE":"collapse"},{"DESCRIPTION":"<p>Default. Borders are detached (standard HTML).\n<\/p>","TITLE":"separate"}]},"css\/properties\/border-bottom-style":{"SUMMARY":"<p>Sets the style of an element's bottom border. To set all four borders, use the shorthand property,  <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\">border-style<\/a>. Otherwise, you can set the borders individually with <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style\" title=\"css\/properties\/border-top-style\">border-top-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style\" title=\"css\/properties\/border-right-style\">border-right-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style\" title=\"css\/properties\/border-bottom-style\">border-bottom-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style\" title=\"css\/properties\/border-left-style\">border-left-style<\/a>.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-bottom-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image\" title=\"css\/properties\/background-image\">background-image<\/a>.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>A series of square-ended dashes.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>A series of round or square dots.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> value. The border width must be at least 3 pixels wide to draw a double border.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.)\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Same as <code>none<\/code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden<\/code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is sunken into the canvas.\n<\/p>","TITLE":"inset"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is coming out of the canvas.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>Looks as if it were coming out of the canvas.\n<\/p>","TITLE":"ridge"},{"DESCRIPTION":"<p>A single line segment.\n<\/p>","TITLE":"solid"}]},"css\/properties\/max-width":{"SUMMARY":"<p>Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/max-width","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage as specified or the absolute length or 'none'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-width","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Clears the max-width value. The width property can have any value.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/calc\" title=\"css\/functions\/calc\">css calc function<\/a> for mode details.\n<\/p>","TITLE":"calc()"},{"DESCRIPTION":"<p>Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fill-available"},{"DESCRIPTION":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fit-content"},{"DESCRIPTION":"<p>Specifies a fixed width. Negative values are not allowed. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for possible units.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space\/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>A &lt;percentage&gt; relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/word-break-inside":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/word-break-inside","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/word-break-inside","STATUS":"","VALUES":[]},"css\/properties\/list-style":{"SUMMARY":"<p>Shorthand property that sets the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-type\" title=\"css\/properties\/list-style-type\"><b>list-style-type<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-position\" title=\"css\/properties\/list-style-position\"><b>list-style-position<\/b><\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-image\" title=\"css\/properties\/list-style-image\"><b>list-style-image<\/b><\/a> properties in one declaration.\n<\/p>","INITIALVALUE":"disc outside none","ID":"css\/properties\/list-style","ANIMATABLE":false,"COMPUTEDVALUE":"see individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Any of the range of image values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-image\" title=\"css\/properties\/list-style-image\"><b>list-style-image<\/b><\/a> property.\n<\/p>","TITLE":"image"},{"DESCRIPTION":"<p>Any of the range of position values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-position\" title=\"css\/properties\/list-style-position\"><b>list-style-position<\/b><\/a> property.\n<\/p>","TITLE":"position"},{"DESCRIPTION":"<p>Any of the range of type values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-type\" title=\"css\/properties\/list-style-type\"><b>list-style-type<\/b><\/a> property.\n<\/p>","TITLE":"type"}]},"css\/properties\/border-color":{"SUMMARY":"<p>The CSS border-color property sets the color of an element's four borders. This property can have from one to four values, made up of the elementary properties: \n<\/p>\n<ul><li> <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-color\" title=\"css\/properties\/border-top-color\">border-top-color<\/a>\n<\/li><li> <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-color\" title=\"css\/properties\/border-right-color\">border-right-color<\/a>\n<\/li><li> <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-color\" title=\"css\/properties\/border-bottom-color\">border-bottom-color<\/a>\n<\/li><li> <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-color\" title=\"css\/properties\/border-left-color\">border-left-color<\/a>\n<\/li><\/ul>\n<p>The default color is the currentColor of each of these values.\n<\/p><p>If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, respectively. Providing three values sets the top, vertical, and bottom values, in that order. Four values set all for sides: top, right, bottom, and left, in that order.\n<\/p>","INITIALVALUE":"color: The value of the 'color' property for each of the border sides border-top-color, border-right-color, border-bottom-color, and border-left-color.","ID":"css\/properties\/border-color","ANIMATABLE":true,"COMPUTEDVALUE":"See individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Specify the color to use on all borders. This can be anywhere from one to four values representing the top, right, bottom, and left border respectively.\n<\/p>","TITLE":"<color>"},{"DESCRIPTION":"<p>The same as ‘color: inherit’, the color value inherited from parent object.\n<\/p>","TITLE":"currentColor"},{"DESCRIPTION":"<p>This will apply a border that is not visible but it can have a width applied.\n<\/p>","TITLE":"transparent"},{"DESCRIPTION":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/clip-path":{"SUMMARY":"<p>The clip-path property prevents portion of elements from drawing by a defined clipping region.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/clip-path","ANIMATABLE":true,"COMPUTEDVALUE":"as specified, but with &lt;url&gt; values made absolute","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/clip-path","STATUS":"W3C Editor's Draft","VALUES":[{"DESCRIPTION":"","TITLE":"none"},{"DESCRIPTION":"<p>The following basic shapes can be used to define a clipping region:\n<\/p>\n<ul><li> <code>rectangle(&lt;x&gt;, &lt;y&gt;, &lt;width&gt;, &lt;height&gt; [, &lt;rx&gt;, &lt;ry&gt;])<\/code> defines a rectangle with an origin and a size. The optional arguments <b>rx<\/b> and <b>ry<\/b> define the \"rounded corners\" in the horizontal and vertical direction.\n<\/li><li> <code>inset-rectangle(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt; [, &lt;rx&gt;, &lt;ry&gt;])<\/code> defines a rectangle by top, right, bottom and left insets. The optional arguments <b>rx<\/b> and <b>ry<\/b> define the \"rounded corners\" in the horizontal and vertical direction.\n<\/li><li> <code>circle(&lt;cx, &lt;cy&gt;, &lt;r&gt;)<\/code> defines a circle with a center point and a radius.\n<\/li><li> <code>ellipse(&lt;cx, &lt;cy&gt;, &lt;rx&gt;, &lt;ry&gt;)<\/code> defines a circle with a center point and a radii for the horizontal and vertical directions.\n<\/li><li> <code>polygon(&lt;x1&gt; &lt;y1&gt;, &lt;x2&gt; &lt;y2&gt;, ..., &lt;xn&gt; &lt;yn&gt;)<\/code> defines a polygon based on a list of points\n<\/li><\/ul>\n","TITLE":"<shape>"},{"DESCRIPTION":"<p>URL reference to a &lt;clipPath&gt; element.\n<\/p>","TITLE":"<url>"}]},"css\/properties\/line-break":{"SUMMARY":"<p>Deprecated. Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/line-break","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/line-break","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Normal line-breaking mode is applied.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Stricter line-breaking rules are enforced.\n<\/p>","TITLE":"strict"}]},"css\/properties\/layout-grid":{"SUMMARY":"","INITIALVALUE":"both loose none none","ID":"css\/properties\/layout-grid","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Any of the range of character values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-char\" title=\"css\/properties\/layout-grid-char\"><b>-ms-layout-grid-char<\/b><\/a> property.\n<\/p>","TITLE":"char"},{"DESCRIPTION":"<p>Any of the range of line values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-line\" title=\"css\/properties\/layout-grid-line\"><b>-ms-layout-grid-line<\/b><\/a> property.\n<\/p>","TITLE":"line"},{"DESCRIPTION":"<p>Any of the range of mode values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-mode\" title=\"css\/properties\/layout-grid-mode\"><b>-ms-layout-grid-mode<\/b><\/a> property.\n<\/p>","TITLE":"mode"},{"DESCRIPTION":"<p>Any of the range of type values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-grid-type\" title=\"css\/properties\/layout-grid-type\"><b>-ms-layout-grid-type<\/b><\/a> property.\n<\/p>","TITLE":"type"}]},"css\/properties\/ms-scroll-rails":{"SUMMARY":"","INITIALVALUE":"railed","ID":"css\/properties\/ms-scroll-rails","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-rails","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Content moves exactly with the user's finger.  This value allows free-form panning.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Panning locks to the primary axis of motion.\n<\/p>","TITLE":"railed"}]},"css\/properties\/ms-touch-select":{"SUMMARY":"","INITIALVALUE":"grippers","ID":"css\/properties\/ms-touch-select","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-touch-select","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Grippers are always off.\n<\/p><p>In addition to hiding the grippers, Internet Explorer does not provide default touch selection functionality to the user.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Grippers are always on. In addition, selection will start even if an <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/events\/click\" title=\"dom\/events\/click\"><b>onclick<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/events\/msgesturetap\" title=\"dom\/events\/msgesturetap\"><b>onmsgesturetap<\/b><\/a>, or <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/events\/mouseup\" title=\"dom\/events\/mouseup\"><b>onmouseup<\/b><\/a> handler is present.\n<\/p>","TITLE":"grippers"}]},"css\/properties\/text-decoration-skip":{"SUMMARY":"<p>This property will specify what parts of content that must be skipped over that has text-decoration specified.\n<\/p>","INITIALVALUE":"objects","ID":"css\/properties\/text-decoration-skip","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-skip","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Will not skip anything and the text-decoration will be drawn for all text content\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Will skip over the box's margin, border, and padding areas.\n<\/p><p>Note: It is not known yet if this is a needed value\n<\/p>","TITLE":"box-decoration"},{"DESCRIPTION":"<p>Will skip an object such as image if it is an inline replacement\n<\/p>","TITLE":"images"},{"DESCRIPTION":"<p>Will skip over where any glyphs are drawn. Such is the case where it will interrupt the decoration line so that the text can show through where otherwise the text decoration would cross over. \n<\/p><p>Note: The UA also may skip over small distances on the right or the left side of the glyph outline\n<\/p>","TITLE":"ink"},{"DESCRIPTION":"<p>Will skip white space that can include:\n<\/p>\n<ul><li> regular spaces - U+0020\n<\/li><li> tabs - U+0009\n<\/li><li> nbsp - U+00A0\n<\/li><li> ideographic space - U+3000\n<\/li><li> all fixed width spaces - examples: U+2000 to U+200A, U+202F and U+205F\n<\/li><li> any adjacent letter-spacing or word-spacing\n<\/li><\/ul>\n","TITLE":"spaces"}]},"css\/properties\/font":{"SUMMARY":"<p>The <code>font<\/code> property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting.\n<\/p>","INITIALVALUE":"normal for font-style, font-variant and font-weight. medium for font-size. normal for line-height. font-family initial value differs depending on the user agent.","ID":"css\/properties\/font","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p><code>font<\/code> can take up to six separate parts in its value, which set six different longhand property values. The options are as follows:\n<\/p>\n<ul><li> <code>font-weight<\/code>: Sets boldness of font; can take values of <code>normal<\/code> (default), <code>bold<\/code> (standard bold weight), <code>lighter<\/code> or <code>bolder<\/code> (supposed to be a slightly lighter or bolder weight that standard <code>bold<\/code>), inherit, or various numerical values to indicate different degrees of boldness: <code>100<\/code>, <code>200<\/code>, <code>300<\/code>, <code>400<\/code>, <code>500<\/code>, <code>600<\/code>, <code>700<\/code>, <code>800<\/code>, or <code>900<\/code>.\n<\/li><li> <code>font-style<\/code>: Allows an italic or oblique font face to be applied; values options are <code>normal<\/code> (default), italic, oblique, or inherit.\n<\/li><li> <code>font-variant<\/code>: Allows a small caps font variant to be set. Value options are <code>normal<\/code> (default), <code>small-caps<\/code>, or <code>inherit<\/code>.\n<\/li><li> <code>font-size\/<\/code>: Sets a size for the font. Options are absolute size keywords (<code>xx-small<\/code>, <code>x-small<\/code>, <code>small<\/code>, <code>medium<\/code> (the default value), <code>large<\/code>, <code>x-large<\/code> or <code>xx-large<\/code>), relative size keywords (<code>smaller<\/code> or <code>larger<\/code>, which indicate a keyword size smaller or larger than the parent element's font size), length values (for example <code>12px<\/code>, or <code>5rem<\/code>), percentage values (for example <code>80%<\/code>), or <code>inherit<\/code>.\n<\/li><li> <code>line-height<\/code>: Sets the height of the line the font is sat on. Value options include <code>normal<\/code> (the default), unitless values (for example <code>1.7<\/code>), length values (for example <code>20px<\/code> or <code>3.5rem<\/code>), percentage values (for example <code>120%<\/code>), or <code>inherit<\/code>.\n<\/li><li> <code>font-family<\/code>: Allows one or more font family names and\/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character.\n<\/li><\/ul>\n","TITLE":"font-weight font-style font-variant font-size\/line-height font-family"},{"DESCRIPTION":"<p>Alternatively, you can set the value to be a single keyword that corresponds to a system font used to style a certain feature of the system the browser is running on (some browsers offer more, proprietary options. For more, see the links at the bottom of the document): \n<\/p>\n<ul><li> <code>caption<\/code>: User-preference font used in objects that have captions—buttons, labels, and so on.\n<\/li><li> <code>icon<\/code>: User-preference font used in icon labels.\n<\/li><li> <code>menu<\/code>: User-preference font used in menus.\n<\/li><li> <code>message-box<\/code>: User-preference font used in dialog boxes.\n<\/li><li> <code>small-caption<\/code>: User-preference font used in small controls.\n<\/li><li> <code>status-bar<\/code>: User-preference font used in small controls.\n<\/li><\/ul>\n","TITLE":"system font"}]},"css\/properties\/clear":{"SUMMARY":"<p>The <b>clear<\/b> CSS property specifies if an element can be positioned next to or must be positioned below the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/float\" title=\"css\/properties\/float\">floating<\/a> elements that precede it in the markup.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/clear","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/clear","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>May have adjacent floats on both the left and right sides.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Floated elements that precede the cleared element are not allowed to be adjacent to the cleared element. The cleared element must move below the floated elements.\n<\/p>","TITLE":"both"},{"DESCRIPTION":"<p>Floated elements that precede the cleared element are not allowed to the left of the cleared element. The cleared element must move below the floated element.\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>Floated elements that precede the cleared element are not allowed to the right of the cleared element. The cleared element must move below the floated element.\n<\/p>","TITLE":"right"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/border-top-color":{"SUMMARY":"<p>Sets the color of an element's top border. This page explains the border-top-color value, but often you will find it more convenient to fix the border's top color as part of a shorthand set, either <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top\" title=\"css\/properties\/border-top\">border-top<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/color\" title=\"css\/data types\/color\">Colors<\/a> can be defined several ways. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-color#Usage\" title=\"css\/properties\/border-top-color\">Usage<\/a>.\n<\/p>","INITIALVALUE":"color - The value of the 'color' property","ID":"css\/properties\/border-top-color","ANIMATABLE":true,"COMPUTEDVALUE":"when taken from the 'color' property, the computed value of 'color'; otherwise, as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-color","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-color#Usage\" title=\"css\/properties\/border-top-color\">Usage<\/a>.\n<\/p>","TITLE":"<color>"},{"DESCRIPTION":"<p>The same as ‘color: inherit’, the color value inherited from parent object.\n<\/p>","TITLE":"currentColor"},{"DESCRIPTION":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.\n<\/p>","TITLE":"transparent"},{"DESCRIPTION":"<p>currentColor, the color value inherited from parent object.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/behavior":{"SUMMARY":"<p>Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/behavior","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/behavior","STATUS":"","VALUES":[]},"css\/properties\/font-size":{"SUMMARY":"<p><code>font-size<\/code> sets the font size of the text inside the element to which it is applied, and that of its descendants. You can size text using absolute measurements, or measurements relative to the affected element's parent or root elements. <a href=\"http:\/\/docs.webplatform.org\/wiki\/guides\/css_text_styling_fundamentals\" title=\"guides\/css text styling fundamentals\">CSS Text Styling Fundamentals<\/a> provides an overview.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/font-size","ANIMATABLE":true,"COMPUTEDVALUE":"as specified, but with relative lengths converted into absolute pixel values.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-size","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are <b>xx-small<\/b>, <b>x-small<\/b>, <b>small<\/b>, <b>medium<\/b>, <b>large<\/b>, <b>x-large<\/b>, and <b>xx-large<\/b>.\n<\/p>","TITLE":"absolute keywords"},{"DESCRIPTION":"<p>An absolute unit value: any of the standard <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">css length units<\/a> are allowed. Negative lengths are illegal.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>A percentage value specifies an absolute font size relative to the parent element's  <b>font-size<\/b>.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>A set of keywords interpreted relative to the parent element's <b>font-size<\/b> — either <b>smaller<\/b> or <b>larger<\/b>.\n<\/p>","TITLE":"relative keywords"},{"DESCRIPTION":"<p>The <code>inherit<\/code> keyword causes the element to adopt its parent element's font size.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/min-font-size":{"SUMMARY":"<p>This property is only used when the text-align-last property is set to size.  It controls allowed adjustments of font-size to fit line content.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/min-font-size","ANIMATABLE":false,"COMPUTEDVALUE":"font-size","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-font-size","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The rendering agent determines the minium font size.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The font size of the last line of an element is restricted to being greater than either the computed font-size or this number, whichever is smaller.\n<\/p>","TITLE":"font-size"}]},"css\/properties\/position":{"SUMMARY":"<p>The position property controls the type of positioning used by an element within its parent elements. The effect of the position property depends on a lot of factors, for example the position property of parent elements.\n<\/p>","INITIALVALUE":"static","ID":"css\/properties\/position","ANIMATABLE":false,"COMPUTEDVALUE":"As specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/position","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Object is positioned relative to nearest positioned ancestor—or to the initial containing block if no positioned ancestor exists—using the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/top\" title=\"css\/properties\/top\"><b>top<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/left\" title=\"css\/properties\/left\"><b>left<\/b><\/a> properties.\n<\/p>","TITLE":"absolute"},{"DESCRIPTION":"<p>Object is positioned relative to the viewport containing the content. Object stays in the viewport when scrolling. Usually used for navigation on mobile devices. Limited support.\n<\/p>","TITLE":"fixed"},{"DESCRIPTION":"<p>Object is positioned according to the normal flow, and then offset by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/top\" title=\"css\/properties\/top\"><b>top<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/left\" title=\"css\/properties\/left\"><b>left<\/b><\/a> properties.\n<\/p>","TITLE":"relative"},{"DESCRIPTION":"<p>Default. Object has no special positioning; it follows the layout rules of HTML. Values of <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/top\" title=\"css\/properties\/top\">top<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/bottom\" title=\"css\/properties\/bottom\">bottom<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/left\" title=\"css\/properties\/left\">left<\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/right\" title=\"css\/properties\/right\">right<\/a> have no impact.\n<\/p>","TITLE":"static"},{"DESCRIPTION":"<p>Inherits the value of the parent element.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/align-content":{"SUMMARY":"<p>Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/justify-content\" title=\"css\/properties\/justify-content\">justify-content<\/a> aligns individual items within the main-axis.\n<\/p>","INITIALVALUE":"stretch","ID":"css\/properties\/align-content","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/align-content","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of empty space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Lines are evenly distributed in the flexbox, with half-size spaces on either end. If the leftover free space is negative or there is only a single line in the flexbox, this value is identical to [#center center]. Otherwise, the lines in the flexbox are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flexbox are half the size of the other empty spaces.\n<\/p>","TITLE":"distribute"},{"DESCRIPTION":"<p>The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.\n<\/p>","TITLE":"flex-end"},{"DESCRIPTION":"<p>Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.\n<\/p>","TITLE":"flex-start"},{"DESCRIPTION":"<p>The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements.\n<\/p>","TITLE":"justify"},{"DESCRIPTION":"<p>Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to <b>center<\/b>. Otherwise, the lines in the flex container are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flex container are half the size of the other empty spaces.\n<\/p>","TITLE":"space-around"},{"DESCRIPTION":"<p>Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to <b>flex-start<\/b>. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the empty space between any two adjacent lines is the same.\n<\/p>","TITLE":"space-between"},{"DESCRIPTION":"<p>The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis.\n<\/p>","TITLE":"start"},{"DESCRIPTION":"<p>Lines stretch to take up the remaining space. If the leftover free space is negative, this value is identical to [#start start]. Otherwise, the free space is split equally between all of the lines, increasing their cross size.\n<\/p>","TITLE":"stretch"},{"DESCRIPTION":"<p>Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to <b>flex-start<\/b>. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.\n<\/p>","TITLE":"stretch"}]},"css\/properties\/border-top-right-radius":{"SUMMARY":"<p>Defines the shape of the border of the top-right corner.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/border-top-right-radius","ANIMATABLE":true,"COMPUTEDVALUE":"two absolute &lt;length&gt; or percentages","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-right-radius","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">CSS &lt;length&gt; data types<\/a>. Negative values are invalid.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/overflow-y":{"SUMMARY":"<p>The overflow-y property is a specific case of the generic overflow property. It controls how extra text exceeding the y axys of the bounding box of an element is rendered.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/overflow-y","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow-y","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Content is clipped and scrolling is added only when necessary.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Content that exceeds the dimensions of the object is not shown.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.\n<\/p>","TITLE":"scroll"},{"DESCRIPTION":"<p>Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.\n<\/p>","TITLE":"visible"}]},"css\/properties\/text-line-through":{"SUMMARY":"<p>The <b>text-overline<\/b> property is the shorthand for <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=css%5Cproperties%5Ctext-overline-style&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"css\\properties\\text-overline-style (page does not exist)\">text-overline-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=css%5Cproperties%5Ctext-overline-width&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"css\\properties\\text-overline-width (page does not exist)\">text-overline-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=css%5Cproperties%5Ctext-overline-color&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"css\\properties\\text-overline-color (page does not exist)\">text-overline-color<\/a> and <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=css%5Cproperties%5Ctext-overline-mode&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"css\\properties\\text-overline-mode (page does not exist)\">text-overline-mode<\/a>.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-line-through","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-line-through","STATUS":"Non-Standard","VALUES":[]},"css\/properties\/background-clip":{"SUMMARY":"<p>Specifies how an element’s background is clipped.\n<\/p>","INITIALVALUE":"border-box","ID":"css\/properties\/background-clip","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-clip","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. The background extends underneath the element’s borders, which can be seen with semi-transparent or dotted or dashed border-styles.\n<\/p>","TITLE":"border-box"},{"DESCRIPTION":"<p>The background is clipped the element’s content box, so the paddings and borders have no background. This is mainly useful with multiple backgrounds with different background-clip values.\n<\/p>","TITLE":"content-box"},{"DESCRIPTION":"<p>The background is clipped to the padding-box, i.e. it cannot be seen under the element’s borders.\n<\/p>","TITLE":"padding-box"}]},"css\/properties\/overflow-x":{"SUMMARY":"<p>The overflow-x property is a specific case of the generic overflow property. It controls how extra text exceeding the x axys of the bounding box of an element is rendered.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/overflow-x","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/overflow-x","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Content is clipped and scrolling is added only when necessary.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Content that exceeds the dimensions of the object is not shown.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.\n<\/p>","TITLE":"scroll"},{"DESCRIPTION":"<p>Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame.\n<\/p>","TITLE":"visible"}]},"css\/properties\/text-line-through-color":{"SUMMARY":"<p>Specifies the line colors for the line-through text decoration.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/text-line-through-color","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-line-through-color","STATUS":"","VALUES":[]},"css\/properties\/user-modify":{"SUMMARY":"<p>Needs content\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/user-modify","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/user-modify","STATUS":"","VALUES":[]},"css\/properties\/grid-row-position":{"SUMMARY":"<p>Specifices a row position based on integer location, string value, or desired row size. [grid-row] is used as short-hand.\n<\/p>","INITIALVALUE":1,"ID":"css\/properties\/grid-row-position","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-row-position","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Integer value or String that identifies the specified row.\n<\/p>","TITLE":"<integer> || <string>"},{"DESCRIPTION":"<p>Automatically places an item using the auto-placement algorithm.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Places an item with contiguous space available to the &lt;integer&gt; value. Using the &lt;string&gt; value only considers lines with that name.\n<\/p>","TITLE":"span && <integer> || <string>"}]},"css\/properties\/align-self":{"SUMMARY":"<p>Allows the default alignment to be overridden for individual flex items.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/align-self","ANIMATABLE":false,"COMPUTEDVALUE":"'''auto''' computes to parent's '''align-items''', or '''stretch''' if the element has no parent; otherwise as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/align-self","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Computes to the value of <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/align-items\" title=\"css\/properties\/align-items\">align-items<\/a> on the element's parent, or <b>stretch<\/b> if the element has no parent.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Initial value. Indicates that the value of the flexbox item's <b>-ms-flex-item-align<\/b> property is equivalent  to that of the parent flexbox element's <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-flex-align\" title=\"css\/properties\/ms-flex-align\" class=\"mw-redirect\"><b>-ms-flex-align<\/b><\/a> property.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>The baselines (leading edge or trailing edge depending on the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-flex-direction\" title=\"css\/properties\/ms-flex-direction\" class=\"mw-redirect\"><b>-ms-flex-direction<\/b><\/a> property)  of all child elements are aligned with each other. \n<\/p><p>The child element that occupies the most space, perpendicular to the layout axis, follows the <code>start<\/code> rule; the baselines of all remaining elements are then aligned with the baseline of this element.\n<\/p>","TITLE":"baseline"},{"DESCRIPTION":"<p>If the flex item's inline axis is the same as the cross axis, this value is identical to <b>flex-start<\/b>.\n<\/p><p>Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.\n<\/p>","TITLE":"baseline"},{"DESCRIPTION":"<p>The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-flex-direction\" title=\"css\/properties\/ms-flex-direction\" class=\"mw-redirect\"><b>-ms-flex-direction<\/b><\/a> of <code>row<\/code> or <code>column<\/code>, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.\n<\/p><p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-flex-direction\" title=\"css\/properties\/ms-flex-direction\" class=\"mw-redirect\"><b>-ms-flex-direction<\/b><\/a> of <code>row-reverse<\/code> or <code>column-reverse<\/code>, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.\n<\/p>","TITLE":"flex-end"},{"DESCRIPTION":"<p>The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.\n<\/p>","TITLE":"flext-start"},{"DESCRIPTION":"<p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-flex-direction\" title=\"css\/properties\/ms-flex-direction\" class=\"mw-redirect\"><b>-ms-flex-direction<\/b><\/a> of <code>row<\/code> or <code>column<\/code>, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element.\n<\/p><p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-flex-direction\" title=\"css\/properties\/ms-flex-direction\" class=\"mw-redirect\"><b>-ms-flex-direction<\/b><\/a> of <code>row-reverse<\/code> or <code>column-reverse<\/code>, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element.\n<\/p>","TITLE":"start"},{"DESCRIPTION":"<p>If the cross size property of the flex item is <b>auto<\/b>, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-height\" title=\"css\/properties\/min-height\">min-height<\/a>\/<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-width\" title=\"css\/properties\/min-width\">min-width<\/a>\/<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-height\" title=\"css\/properties\/max-height\">max-height<\/a>\/<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-width\" title=\"css\/properties\/max-width\">max-width<\/a>. Note: that if the flex container's height is constrained the stretch value may cause the contents of the flex item to overflow the item.\n<\/p>","TITLE":"stretch"},{"DESCRIPTION":"<p>Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-width\" title=\"css\/properties\/max-width\"><b>max-width<\/b><\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-height\" title=\"css\/properties\/max-height\"><b>max-height<\/b><\/a> property for a child element takes precedence and layout follows the  <code>start<\/code> rule.\n<\/p>","TITLE":"stretch"}]},"css\/properties\/transform-origin-z":{"SUMMARY":"<p>This property allows you to define the relative position of the origin of the transformation grid along the z-axis.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/transform-origin-z","ANIMATABLE":true,"COMPUTEDVALUE":"The relative position is calculated from screen depth. As the value increases, the origin is more distant from the user; as the value decreases, the origin moves out toward or behind the user.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transform-origin-z","STATUS":"","VALUES":[{"DESCRIPTION":"<p>A floating-point number, followed by a unit of measurement.\nUnits of measurement may be absolute (<code>cm<\/code>,\n<code>mm<\/code>,\n<code>in<\/code>,\n<code>pt<\/code>,\nor <code>pc<\/code>)\nor relative\n(<code>em<\/code>,\n<code>ex<\/code>,\nor <code>px<\/code>).\nFor more information about the supported length units,\nsee CSS Values and Units.\n<\/p>","TITLE":"length"}]},"css\/properties\/kerning-pair-threshold":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/kerning-pair-threshold","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/kerning-pair-threshold","STATUS":"","VALUES":[]},"css\/properties\/ms-scroll-limit-xMin":{"SUMMARY":"","INITIALVALUE":0,"ID":"css\/properties\/ms-scroll-limit-xMin","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-scroll-limit-xMin","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>The minimum value for the <a href=\"http:\/\/docs.webplatform.org\/wiki\/dom\/properties\/scrollLeft\" title=\"dom\/properties\/scrollLeft\"><b>scrollLeft<\/b><\/a> property.  If the value is negative, then zero is used.\n<\/p>","TITLE":"length"}]},"css\/properties\/box-direction":{"SUMMARY":"<p>Deprecated\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/box-direction","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-direction","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Default. \nChild elements are displayed in the same order that they are declared in the source document. \n<\/p><p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-box-orient\" title=\"css\/properties\/ms-box-orient\" class=\"mw-redirect\"><b>-ms-box-orient<\/b><\/a> of <code>horizontal<\/code>, the child elements are displayed from left to right. \n<\/p><p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-box-orient\" title=\"css\/properties\/ms-box-orient\" class=\"mw-redirect\"><b>-ms-box-orient<\/b><\/a> of <code>vertical<\/code>, the child elements are displayed from top to bottom.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Child elements are displayed in the reverse order that they are declared in the source document. \n<\/p><p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-box-orient\" title=\"css\/properties\/ms-box-orient\" class=\"mw-redirect\"><b>-ms-box-orient<\/b><\/a> of <code>horizontal<\/code>, the child elements are displayed from right to left. \n<\/p><p>If the parent element has a computed value for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-box-orient\" title=\"css\/properties\/ms-box-orient\" class=\"mw-redirect\"><b>-ms-box-orient<\/b><\/a> of <code>vertical<\/code>, the child elements are displayed from bottom to top.\n<\/p>","TITLE":"reverse"},{"DESCRIPTION":"<p>Child elements are displayed in the same order as the computed value of this property for the parent element.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/z-index":{"SUMMARY":"<p>The z-index controls the stacking order of an element. Elements with a higher z-index appear closer to the viewer, whereas those with a lower z-index appear further away. Different browsers have different interpretations of the z-index ordering, so beware.\n<\/p>","INITIALVALUE":"Auto","ID":"css\/properties\/z-index","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/z-index","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. String that specifies the stacking order of the positioned objects based on the order in which the objects appear in the HTML source.\n<\/p>","TITLE":"Auto"},{"DESCRIPTION":"<p>Integer that specifies the position of the object in the stacking order.\n<\/p>","TITLE":"Integer"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"Inherit"}]},"css\/properties\/list-style-position":{"SUMMARY":"<p>Specifies if the list-item markers should appear inside or outside the content flow.\n<\/p>","INITIALVALUE":"outside","ID":"css\/properties\/list-style-position","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/list-style-position","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Marker is placed inside the text, and any wrapping text is aligned under the marker.\n<\/p>","TITLE":"inside"},{"DESCRIPTION":"<p>Default. Marker is placed outside the list item, and any wrapping text is not aligned under the marker.\n<\/p>","TITLE":"outside"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.  (Acts similarly to other uses of inherit in CSS.)\n<\/p>","TITLE":"inherit"}]},"css\/properties\/text-decoration-style":{"SUMMARY":"<p>This property specifies the style of the text decoration line drawn on the specified element. The intended meaning for the values are the same as those of the border-style-properties.\n<\/p>","INITIALVALUE":"solid","ID":"css\/properties\/text-decoration-style","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-decoration-style","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A series of square-ended dashes\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>A series of round dots\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Two solid lines that are parallel with some space between them\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>A single line segment\n<\/p>","TITLE":"solid"},{"DESCRIPTION":"<p>Indicates a wavy line\n<\/p>","TITLE":"wavy"}]},"css\/properties\/transform-origin":{"SUMMARY":"<p>This property allows you to define the origin of the transformation axes relative to the element on which the transformation is applied.\n<\/p>","INITIALVALUE":"50% 50% 0","ID":"css\/properties\/transform-origin","ANIMATABLE":true,"COMPUTEDVALUE":"The transformation origin is always calculated relative to the top-left corner of the transformed element. Named positions are converted to the equivalent percentage values. Percentage values are based on the relevant axis of the element's bounding box.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transform-origin","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>A floating-point number, followed by a unit of measurement.\nUnits of measurement may be absolute (<code>cm<\/code>,\n<code>mm<\/code>,\n<code>in<\/code>,\n<code>pt<\/code>,\nor <code>pc<\/code>)\nor relative\n(<code>em<\/code>,\n<code>ex<\/code>,\nor <code>px<\/code>).\nFor more information about the supported length units,\nsee CSS Values and Units.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>A named position along the specified axis, each of which has a percentage equivalent.\nThe values <code>left<\/code>, <code>center<\/code>, and <code>right<\/code> are valid for the x-axis and are equivalent to 0%, 50%, and 100% respectively. The values <code>top<\/code>, <code>center<\/code>, and <code>bottom<\/code> are valid for the y-axis and are equivalent to 0%, 50%, and 100% respectively. There are no named positions along the z-axis.\n<\/p>","TITLE":"named-position"},{"DESCRIPTION":"<p>A number, followed by a&#160;%.\nThe value is a percentage of the bounding box width (for the x-axis) or the bounding box height (for the y-axis, if specified). A percentage cannot be applied to the z-axis.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/unicode-range":{"SUMMARY":"","INITIALVALUE":"","ID":"css\/properties\/unicode-range","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/unicode-range","STATUS":"","VALUES":[]},"css\/properties\/shape-outside":{"SUMMARY":"<p>Wrap text around a given shape using floats.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/shape-outside","ANIMATABLE":true,"COMPUTEDVALUE":"computed lengths for &lt;basic-shape&gt;, the absolute URI for &lt;uri&gt;, otherwise as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/shape-outside","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The shape is computed based on the values of one of ‘rectangle’, ‘inset-rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’.\n<\/p>\n<ul><li> <code>rectangle(&lt;x&gt;, &lt;y&gt;, &lt;width&gt;, &lt;height&gt; [, &lt;rx&gt;, &lt;ry&gt;])<\/code> defines a rectangle with an origin and a size. The optional arguments <b>rx<\/b> and <b>ry<\/b> define the \"rounded corners\" in the horizontal and vertical direction.\n<\/li><li> <code>inset-rectangle(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt; [, &lt;rx&gt;, &lt;ry&gt;])<\/code> defines a rectangle by top, right, bottom and left insets. The optional arguments <b>rx<\/b> and <b>ry<\/b> define the \"rounded corners\" in the horizontal and vertical direction.\n<\/li><li> <code>circle(&lt;cx, &lt;cy&gt;, &lt;r&gt;)<\/code> defines a circle with a center point and a radius.\n<\/li><li> <code>ellipse(&lt;cx, &lt;cy&gt;, &lt;rx&gt;, &lt;ry&gt;)<\/code> defines a circle with a center point and a radii for the horizontal and vertical directions.\n<\/li><li> <code>polygon(&lt;x1&gt; &lt;y1&gt;, &lt;x2&gt; &lt;y2&gt;, ..., &lt;xn&gt; &lt;yn&gt;)<\/code> defines a polygon based on a list of points\n<\/li><\/ul>\n","TITLE":"<basic-shape>"},{"DESCRIPTION":"<p>If the &lt;uri&gt; references an image, which is CORS-same-origin, the shape is extracted and computed based on the alpha channel of the specified image. If the &lt;uri&gt; does not reference an image or if it references an image which is not CORS-same-origin, the effect is as if the value ‘auto’ had been specified.\n<\/p>","TITLE":"<uri>"},{"DESCRIPTION":"<p>The float area uses the margin box as normal.\n<\/p>","TITLE":"auto"}]},"css\/properties\/justify-content":{"SUMMARY":"<p>The <b>justify-content<\/b> property aligns flex items along the main axis of the current line of the flex container, similarly to how <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/align-items\" title=\"css\/properties\/align-items\">align-items<\/a> aligns items in the cross axis.\n<\/p>","INITIALVALUE":"flex-start","ID":"css\/properties\/justify-content","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/justify-content","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Flexbox items are packed toward the center of the line. All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>Flexbox items are packed toward the end of the line. The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis.\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.\n<\/p>","TITLE":"flex-end"},{"DESCRIPTION":"<p>Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.\n<\/p>","TITLE":"flex-start"},{"DESCRIPTION":"<p>Flexbox items are evenly distributed in the line. The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements.\n<\/p>","TITLE":"justify"},{"DESCRIPTION":"<p>Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘center’. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first\/last flex items and the flex container edges is half the size of the spacing between flex items.\n<\/p>","TITLE":"space-around"},{"DESCRIPTION":"<p>Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘flex-start’. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same.\n<\/p>","TITLE":"space-between"},{"DESCRIPTION":"<p>Initial value. Flexbox items are packed toward the start of the line. The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis.\n<\/p>","TITLE":"start"}]},"css\/properties\/object-fit":{"SUMMARY":"<p>The <i>object-fit<\/i> property defines how content of a replaced element (e.g. a video or an image) is made to fit the dimensions of its containing box\n<\/p>","INITIALVALUE":"fill","ID":"css\/properties\/object-fit","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/object-fit","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The replaced content is not resized to fit inside the element's content box\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The replaced content is sized to to maintain its aspect ratio while fitting within the element's content box\n<\/p>","TITLE":"contain"},{"DESCRIPTION":"<p>The replaced content is sized to maintain its aspect ratio while filling the element's entire content box\n<\/p>","TITLE":"cover"},{"DESCRIPTION":"<p>The replaced content is sized to fill the element's box\n<\/p>","TITLE":"fill"},{"DESCRIPTION":"<p>Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size\n<\/p>","TITLE":"scale-down"}]},"css\/properties\/counter-increment":{"SUMMARY":"<p>The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer which specifies the value by which the counter should be incremented (e.g. if the value is 2, the counter increases by 2 each time it is invoked).\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/counter-increment","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/counter-increment","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The name of the counter.  The counter can then be invoked by using <b>counter(&lt;identifier&gt;)<\/b>.\n<\/p>","TITLE":"identifier"},{"DESCRIPTION":"<p>An integer that indicates by how much the counter is\nincremented for every occurrence of the element.\nZero and negative integers are allowed.  If no value is specified, the value defaults to 1.\n<\/p>","TITLE":"integer"}]},"css\/properties\/cursor":{"SUMMARY":"<p>The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/cursor","ANIMATABLE":false,"COMPUTEDVALUE":"as specified (if a keyword), URLs are converted to absolute","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/cursor","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>There are many standard cursors available:\n<\/p>\n<ul><li> <code>auto<\/code>\n<\/li><li> <code>default<\/code>\n<\/li><li> <code>none<\/code>\n<\/li><li> <code>context-menu<\/code>\n<\/li><li> <code>help<\/code>\n<\/li><li> <code>pointer<\/code>\n<\/li><li> <code>progress<\/code>\n<\/li><li> <code>wait<\/code>\n<\/li><li> <code>cell<\/code>\n<\/li><li> <code>crosshair<\/code>\n<\/li><li> <code>text<\/code>\n<\/li><li> <code>vertical-text<\/code>\n<\/li><li> <code>alias<\/code>\n<\/li><li> <code>copy<\/code>\n<\/li><li> <code>move<\/code>\n<\/li><li> <code>no-drop<\/code>\n<\/li><li> <code>not-allowed<\/code>\n<\/li><li> <code>e-resize<\/code>\n<\/li><li> <code>n-resize<\/code>\n<\/li><li> <code>ne-resize<\/code>\n<\/li><li> <code>nw-resize<\/code>\n<\/li><li> <code>s-resize<\/code>\n<\/li><li> <code>se-resize<\/code>\n<\/li><li> <code>sw-resize<\/code>\n<\/li><li> <code>w-resize<\/code>\n<\/li><li> <code>ew-resize<\/code>\n<\/li><li> <code>ns-resize<\/code>\n<\/li><li> <code>nesw-resize<\/code>\n<\/li><li> <code>nwse-resize<\/code>\n<\/li><li> <code>col-resize<\/code>\n<\/li><li> <code>row-resize<\/code>\n<\/li><li> <code>all-scroll<\/code>\n<\/li><li> <code>zoom-in<\/code>\n<\/li><li> <code>zoom-out<\/code>\n<\/li><\/ul>\n<p>These have varying support across different browsers — see the support section. The examples below feature different boxes with different cursor values set on them, so you can get an idea of what the different ones look like.\n<\/p>","TITLE":"standard values"},{"DESCRIPTION":"<p>CSS3 allows you to specify a custom cusor image along with an X and Y number values for the pointer hotspot, for example <code>cursor:  url(cursor2.png) 2 2, auto;<\/code>. If not specified, the hotspot position defaults to the top left corner of the cursor image, or may be read from the meta data inside the image file, in the case of CUR and XBM format files.\n<\/p>","TITLE":"url() hotspot-x hotspot-y, keyword;"},{"DESCRIPTION":"<p>Instead of specifying a standard pointer type, you can specify a <code>url()<\/code> function pointing to a custom graphic to use as a cursor, which must be followed by a fallback keyword to use as a pointer if the image is not available (this can be <code>auto<\/code> or a standard keyword value). For example, <code>cursor: url(), auto;<\/code>\n<\/p><p>You can supply multiple <code>url()<\/code> functions separated by commas (<code>url(), url(), auto<\/code> for example), and the browser will use the earliest appropriate image it can find. Limitations include:\n<\/p>\n<ul><li> Cursor size: if the cursor image is over a certain size it will be ignored (in Gecko for example the limit is 128×128px). You should limit yourself about 32×32px anyway, for maximum compatibility with operating systems and platforms.\n<\/li><li> Browser: In Opera, the custom cursors are just ignored, and the keywords are used instead.\n<\/li><li> Transparency: Translucent cursors are not supported on Windows releases earlier than XP. This is a limitation of the operating system. Transparency works on all platforms.\n<\/li><li> Image format: Most browsers support a wide variety of image formats, but you should stick to something common and web-optimizable for the most part, such as JPG or PNG. You'll also need to include a CUR format image, as they are required by IE. Animateds PNGs and GIFs will only produce static cursors.\n<\/li><\/ul>\n","TITLE":"url(), keyword"}]},"css\/properties\/box-sizing":{"SUMMARY":"<p>The <code>box-sizing<\/code> property alters the CSS box model used to calculate widths and heights of elements, so that they can be equal to the width and height of the content-, padding- or border-box.\n<\/p>","INITIALVALUE":"content-box","ID":"css\/properties\/box-sizing","ANIMATABLE":true,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-sizing","STATUS":"","VALUES":[{"DESCRIPTION":"<p>The <code>width<\/code> and <code>height<\/code> (also including <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code> and <code>max-height<\/code> properties) of an element are calculated as the width\/height of the content plus the <code>padding<\/code> and <code>border<\/code>.\nThe dimensions of the content alone are thus calculated by subtracting the padding and border widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.\n<\/p>","TITLE":"border-box"},{"DESCRIPTION":"<p>The <code>width<\/code> and <code>height<\/code> properties (also including <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code> and <code>max-height<\/code> properties) are calculated as the width\/height of the content, but not the border, margin, or padding. This is the traditional behaviour of width and height as specified by CSS2.1.\n<\/p>","TITLE":"content-box"},{"DESCRIPTION":"<p>The <code>width<\/code> and <code>height<\/code> (also including <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code> and <code>max-height<\/code> properties) of an element are calculated as the width\/height of the content plus the <code>padding<\/code>. The dimensions of the content alone are thus calculated by subtracting the padding widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0.\n<\/p>","TITLE":"padding-box"}]},"css\/properties\/user-input":{"SUMMARY":"<p>For inputing user content\n<\/p>","INITIALVALUE":"null","ID":"css\/properties\/user-input","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/user-input","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Any alpha numeric data can be entered, usually in text boxes, or address fields.\n<\/p>","TITLE":"text"}]},"css\/properties\/box-flex":{"SUMMARY":"<p>Do not use. This property has been replaced by the <a href=\"http:\/\/docs.webplatform.org\/w\/index.php?title=flex&amp;action=edit&amp;redlink=1\" class=\"new\" title=\"flex (page does not exist)\">flex<\/a> property.\n<\/p>","INITIALVALUE":0.0,"ID":"css\/properties\/box-flex","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/box-flex","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>A floating point value that indicates the relative flexibility of a child element.\n<\/p><p>A value of <code>0.0<\/code> indicates the element is not flexible. Any other value indicates the relative flexiblity of the child element compared to the flexibility of other child elements.\n<\/p><p>A negative value is not valid.\n<\/p>","TITLE":"integer"}]},"css\/properties\/ms-grid-row-span":{"SUMMARY":"","INITIALVALUE":1,"ID":"css\/properties\/ms-grid-row-span","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/ms-grid-row-span","STATUS":"Non-Standard","VALUES":[{"DESCRIPTION":"<p>Integer value that specifies the number of rowss to span.\n<\/p>","TITLE":"integer"}]},"css\/properties\/transition-delay":{"SUMMARY":"<p>The 'transition-delay' property defines when the transition will start. A value of ‘0s’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.\n<\/p>","INITIALVALUE":"0s","ID":"css\/properties\/transition-delay","ANIMATABLE":false,"COMPUTEDVALUE":"Same as specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-delay","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by a time units designator (<code>ms<\/code> or <code>s<\/code>). For more information about the supported time units, see <b>CSS Values and Units Reference<\/b>.\n<\/p><p>Values are rounded up to the second decimal place.\nEach <b>transition-delay<\/b> is paired with a corresponding object property  identified in the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-property\" title=\"css\/properties\/transition-property\"><b>transition-property<\/b><\/a> property.\nIf more <b>transition-delay<\/b> values are declared than corresponding object properties identified in the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-property\" title=\"css\/properties\/transition-property\"><b>transition-property<\/b><\/a> property, the excess <b>transition-delay<\/b> values are ignored.\nIf fewer  <b>transition-delay<\/b> values are declared than corresponding object properties identified in the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-property\" title=\"css\/properties\/transition-property\"><b>transition-property<\/b><\/a> property, the list of <b>transition-delay<\/b> values is repeated from the beginning until the object properties are exhausted.\n<\/p>","TITLE":"time"}]},"css\/properties\/border-image-slice":{"SUMMARY":"<p>Divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets.\n<\/p>","INITIALVALUE":"100%","ID":"css\/properties\/border-image-slice","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-image-slice","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Represents pixels for raster images and coordinates for vector images.\n<\/p>","TITLE":"<number>"},{"DESCRIPTION":"<p>Percentages values are relative to the height or width of the image, whichever is adequate.\n<\/p>","TITLE":"<percentage>"},{"DESCRIPTION":"<p>Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.\n<\/p>","TITLE":"fill"},{"DESCRIPTION":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/text-emphasis-color":{"SUMMARY":"<p>The text-emphasis-color property specifies the foreground color of the emphasis marks.\n<\/p>","INITIALVALUE":"currentColor","ID":"css\/properties\/text-emphasis-color","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-emphasis-color","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Specify the foreground color of the emphasis marks.\n<\/p>","TITLE":"color"}]},"css\/properties\/flex-direction":{"SUMMARY":"<p>The <b>flex-direction<\/b> CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container's main axis.\n<\/p>","INITIALVALUE":"row","ID":"css\/properties\/flex-direction","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-direction","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Same as 'column', except the main-start and main-end directions are swapped.\n<\/p>","TITLE":"column-reverse"},{"DESCRIPTION":"<p>The flex container's main axis has the same orientation as the block axis of the current <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\">writing mode<\/a>. The main-start and main-end directions are equivalent to the before\/head and after\/foot directions, respectively, of the current <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\">writing mode<\/a>.\n<\/p>","TITLE":"column"},{"DESCRIPTION":"<p>Same as 'row', except the main-start and main-end directions are swapped.\n<\/p>","TITLE":"row-reverse"},{"DESCRIPTION":"<p>The flex container's main axis has the same orientation as the inline axis of the current <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\">writing mode<\/a>. The main-start and main-end directions are equivalent to the start and end directions, respectively, of the current <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/writing-mode\" title=\"css\/properties\/writing-mode\">writing mode<\/a>.\n<\/p>","TITLE":"row"}]},"css\/properties\/hyphens":{"SUMMARY":"<p>Specifies word wrapping behavior via the use of hyphens.\n<\/p>","INITIALVALUE":"manual","ID":"css\/properties\/hyphens","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/hyphens","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Indicates that all word breaking is suppressed, including at soft hyphens.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Indicates that, in addition to suggested word breaking opportunities, word breaking opportunities are allowed where determined by a hyphenation resource (dictionary). Soft hyphens take priority over other hyphenation opportunities, but are still subject to the hyphenation controlled properties.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Indicates that word breaking is allowed only where word breaking opportunities are suggested. These suggestions may come in the form of soft hyphens or hard hyphens.\n<\/p>","TITLE":"manual"}]},"css\/properties\/padding":{"SUMMARY":"<p>The <code>padding<\/code> optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted.  The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased.\n<\/p><p>The <code>padding<\/code> property is a shorthand to avoid setting each side separately (<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-top\" title=\"css\/properties\/padding-top\">padding-top<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-right\" title=\"css\/properties\/padding-right\">padding-right<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-bottom\" title=\"css\/properties\/padding-bottom\">padding-bottom<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-left\" title=\"css\/properties\/padding-left\">padding-left<\/a>).\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/padding","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage or the absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a non-negative fixed width defined in pixels, pt, em, etc. . See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for details.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>Calculated using the dimensions of the containing block or element.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/column-fill":{"SUMMARY":"<p>Specifies how to fill columns, balanced or not.\n<\/p>","INITIALVALUE":"balance","ID":"css\/properties\/column-fill","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-fill","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. \nColumns are filled sequentially such that the columns may differ in length,\n<\/p><p>depending on other column property values.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Columns are filled sequentially such that the column heights are as balanced as possible,\n<\/p><p>depending on other column property values.\n<\/p>","TITLE":"balance"}]},"css\/properties\/grid-area":{"SUMMARY":"<p>A grid area is the logical space used to lay out one or more grid items. It is bound by four grid lines, one on each side of the grid area, and participates in the sizing of the grid tracks it intersects. A grid area can be named explicitly using the ‘grid-template’ property of the grid container, or referenced implicitly by its bounding grid lines. A grid item is assigned to a grid area using the grid-placement properties.\n<\/p>","INITIALVALUE":"","ID":"css\/properties\/grid-area","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-area","STATUS":"","VALUES":[]},"css\/properties\/padding-top":{"SUMMARY":"<p>The <code>padding-top<\/code> CSS property of an element sets the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding\" title=\"css\/properties\/padding\">padding<\/a> space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/margin-top\" title=\"css\/properties\/margin-top\">margin-top<\/a> values, negative values of <code>padding-top<\/code> are invalid.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/padding-top","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage as specified or the absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-top","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a positive fixed distance. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for details.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>A percentage with respect to the height of the containing block.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/column-rule-color":{"SUMMARY":"<p>Specifies the color of the rule between columns.\n<\/p>","INITIALVALUE":"currentColor","ID":"css\/properties\/column-rule-color","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/column-rule-color","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>One of the color names, RGB, RGBA, HSL, or HSLA values in the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/color\/color_table\" title=\"css\/color\/color table\" class=\"mw-redirect\">Color Table<\/a>.\n<\/p>","TITLE":"color"}]},"css\/properties\/border-style":{"SUMMARY":"<p>Sets the style of an element's four borders. This property can have from one to four values. With only one value, the value will be applied to all four borders; otherwise, this works as a shorthand property for each of <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-style\" title=\"css\/properties\/border-top-style\">border-top-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-style\" title=\"css\/properties\/border-right-style\">border-right-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style\" title=\"css\/properties\/border-bottom-style\">border-bottom-style<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-style\" title=\"css\/properties\/border-left-style\">border-left-style<\/a>, where each border style may be assigned a separate value.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/border-style","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-image\" title=\"css\/properties\/background-image\">background-image<\/a>.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Shorthand values syntax.\n<\/p>","TITLE":"<border-top-style> <border-right-style> <border-bottom-style> <border-left-style>"},{"DESCRIPTION":"<p>A series of square-ended dashes.\n<\/p>","TITLE":"dashed"},{"DESCRIPTION":"<p>A series of round dots.\n<\/p>","TITLE":"dotted"},{"DESCRIPTION":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> value. The border width must be at least 3 pixels wide to draw a double border.\n<\/p>","TITLE":"double"},{"DESCRIPTION":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\">border-color<\/a>.)\n<\/p>","TITLE":"groove"},{"DESCRIPTION":"<p>Same as <code>none<\/code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden<\/code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority.\n<\/p>","TITLE":"hidden"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is sunken into the canvas.\n<\/p>","TITLE":"inset"},{"DESCRIPTION":"<p>Looks as if the content on the inside of the border is coming out of the canvas.\n<\/p>","TITLE":"outset"},{"DESCRIPTION":"<p>Looks as if it were coming out of the canvas.\n<\/p>","TITLE":"ridge"},{"DESCRIPTION":"<p>A single line segment.\n<\/p>","TITLE":"solid"}]},"css\/properties\/text-shadow":{"SUMMARY":"<p>The CSS <code>text-shadow<\/code> property applies one or more drop shadows, outlines, bevels, and other effects to the text of an element. Each <code>text-shadow<\/code> property must contain both a horizontal and vertical shadow value and, optionally, a blur radius and color value. A <code>text-shadow<\/code> can include multiple comma-delimited shadow effects. Multiple shadow effects are applied in a first-to-last order, whereas the first shadow effect will appear at the top, and the last shadow effect at the bottom.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-shadow","ANIMATABLE":true,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-shadow","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Default value.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Optional. The blur radius is a <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">&lt;length&gt;<\/a><\/code> term that indicates the boundaries of the blur effect.\n<\/p>","TITLE":"<blur-radius>"},{"DESCRIPTION":"<p>Optional. A color value may be applied before or after the <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">&lt;length&gt;<\/a><\/code> terms of both shadow effects. The color value will be inherited as the basis for the shadow. If a color is not specified by the user, the value of the color property will be used instead.\n<\/p>","TITLE":"<color>"},{"DESCRIPTION":"<p>Required. Specifies the horizontal <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">&lt;length&gt;<\/a><\/code> term to the right of the text. A negative horizontal <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">&lt;length&gt;<\/a><\/code> term will place the shadow to the left of the text.\n<\/p>","TITLE":"<offset-x>"},{"DESCRIPTION":"<p>Required. Specifies the vertical <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">&lt;length&gt;<\/a><\/code> value below the text. A negative vertical <code><a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">&lt;length&gt;<\/a><\/code> term will place the shadow above the text.\n<\/p>","TITLE":"<offset-y>"}]},"css\/properties\/background-origin":{"SUMMARY":"<p>Specifies what the background-position property is relative to.\n<\/p>","INITIALVALUE":"padding-box","ID":"css\/properties\/background-origin","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/background-origin","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>The position is relative to the border box.\n<\/p>","TITLE":"border-box"},{"DESCRIPTION":"<p>The position is relative to the content box. Useful for having background images automatically follow the padding.\n<\/p>","TITLE":"content-box"},{"DESCRIPTION":"<p>Default. The position is relative to the padding box.\n<\/p>","TITLE":"padding-box"}]},"css\/properties\/align-items":{"SUMMARY":"<p>Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/justify-content\" title=\"css\/properties\/justify-content\">justify-content<\/a> aligns items along the main axis.\n<\/p>","INITIALVALUE":"stretch","ID":"css\/properties\/align-items","ANIMATABLE":false,"COMPUTEDVALUE":"specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/align-items","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>If the flex item's inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.\n<\/p>","TITLE":"baseline"},{"DESCRIPTION":"<p>Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child.\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)\n<\/p>","TITLE":"center"},{"DESCRIPTION":"<p>The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.\n<\/p>","TITLE":"flex-end"},{"DESCRIPTION":"<p>The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.\n<\/p>","TITLE":"flex-start"},{"DESCRIPTION":"<p>If the cross size property of the flex item is <b>auto<\/b>, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-height\" title=\"css\/properties\/min-height\">min-height<\/a>\/<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-width\" title=\"css\/properties\/min-width\">min-width<\/a>\/<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-height\" title=\"css\/properties\/max-height\">max-height<\/a>\/<a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-width\" title=\"css\/properties\/max-width\">max-width<\/a>. Note: that if the flex container's height is constrained the <b>stretch<\/b> value may cause the contents of the flex item to overflow the item.\n<\/p>","TITLE":"stretch"},{"DESCRIPTION":"<p>Initial value. Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-width\" title=\"css\/properties\/max-width\"><b>max-width<\/b><\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/max-height\" title=\"css\/properties\/max-height\"><b>max-height<\/b><\/a> property for a child element takes precedence and layout follows the  <code>start<\/code> rule.\n<\/p>","TITLE":"stretch"}]},"css\/properties\/border-top-width":{"SUMMARY":"<p>Sets the width of an element's top border. To set all four borders, use the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\">border-width<\/a> shorthand property which sets the values simultaneously for <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width\" title=\"css\/properties\/border-top-width\">border-top-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-width\" title=\"css\/properties\/border-right-width\">border-right-width<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width\" title=\"css\/properties\/border-bottom-width\">border-bottom-width<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-left-width\" title=\"css\/properties\/border-left-width\">border-left-width<\/a>.\n<\/p>","INITIALVALUE":"medium","ID":"css\/properties\/border-top-width","ANIMATABLE":false,"COMPUTEDVALUE":"An absolute length; 0 if the border style is 'none' or 'hidden'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-width","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Floating-point number, followed by an absolute units designator (<code>cm<\/code>, <code>mm<\/code>, <code>in<\/code>, <code>pt<\/code>, or <code>pc<\/code>) or a relative units designator (<code>em<\/code>, <code>ex<\/code>, or <code>px<\/code>). For more information about the supported length units, see CSS Values and Units Reference.\n<\/p>","TITLE":"<width>"},{"DESCRIPTION":"<p>Default.  \n<\/p>","TITLE":"medium"},{"DESCRIPTION":"<p>Greater than the default width.\n<\/p>","TITLE":"thick"},{"DESCRIPTION":"<p>Less than the default width.\n<\/p>","TITLE":"thin"}]},"css\/properties\/break-after":{"SUMMARY":"<p>Control page\/column\/region breaks that fall below a block of content\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/break-after","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/break-after","STATUS":"","VALUES":[{"DESCRIPTION":"<p>A page\/column\/region break is inserted (forced) after the content block.\n<\/p>","TITLE":"always"},{"DESCRIPTION":"<p>Default. A page break or column break is determined  by the flow of content.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>A column break is not allowed after the content block.\n<\/p>","TITLE":"avoid-column"},{"DESCRIPTION":"<p>A page break is not allowed after the content block.\n<\/p>","TITLE":"avoid-page"},{"DESCRIPTION":"<p>A <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\">region<\/a> break is not allowed after the content block.\n<\/p>","TITLE":"avoid-region"},{"DESCRIPTION":"<p>A page\/column\/region break is not allowed after the content block.\n<\/p>","TITLE":"avoid"},{"DESCRIPTION":"<p>A column break is inserted (forced) after the content block.\n<\/p>","TITLE":"column"},{"DESCRIPTION":"<p>A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the \"left\" page that immediately follows the current page (according to the paging format of the document).\n<\/p>","TITLE":"left"},{"DESCRIPTION":"<p>A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the page that immediately follows the current page (according to the paging format of the document).\n<\/p>","TITLE":"page"},{"DESCRIPTION":"<p>A <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/concepts\/region\" title=\"css\/concepts\/region\">region<\/a> break is inserted (forced) after the content block.\n<\/p>","TITLE":"region"},{"DESCRIPTION":"<p>A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the \"right\" page that immediately follows the current page (according to the paging format of the document).\n<\/p>","TITLE":"right"}]},"css\/properties\/table-layout":{"SUMMARY":"","INITIALVALUE":"auto","ID":"css\/properties\/table-layout","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/table-layout","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. Column width is set by the widest unbreakable content in the column cells.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Table and column widths are set either by the sum of the widths on the <b>col<\/b> objects or, if these are not specified, by the width of the first row of cells. If no width is specified for the table, it renders by default with width=100%.\n<\/p>","TITLE":"fixed"},{"DESCRIPTION":"<p>This features inherits table-layout property  from the parent element (Internet Explorer 7 and earlier versions don’t support the value inherit for any properties other than direction and visibility)\n<\/p>","TITLE":"inherit"}]},"css\/properties\/user-select":{"SUMMARY":"<p>Controls the visible highlighting of selections of text and elements. It is possible to blind out selection completely or to allow the selection of text only.\n<\/p>","INITIALVALUE":"all","ID":"css\/properties\/user-select","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/user-select","STATUS":"Experimental","VALUES":[{"DESCRIPTION":"<p>None of the descendants of the element can be selected, neither text nor images.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Default. Everything, text and images, can be selected.\n<\/p>","TITLE":"all"},{"DESCRIPTION":"<p>Only specified elements can be selected. Only supported in Firefox and Internet Explorer.\n<\/p>","TITLE":"element"},{"DESCRIPTION":"<p>Only text of the element and its descendants can be selected.\n<\/p>","TITLE":"text"}]},"css\/properties\/vertical-align":{"SUMMARY":"","INITIALVALUE":"not defined for shorthand properties","ID":"css\/properties\/vertical-align","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/vertical-align","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Aligns the contents of an object according to the value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/layout-flow\" title=\"css\/properties\/layout-flow\"><b>-ms-layout-flow<\/b><\/a> attribute.\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Default. Aligns the contents of an object supporting <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/attributes\/vAlign\" title=\"html\/attributes\/vAlign\"><b>VALIGN<\/b><\/a> to the base line.\n<\/p>","TITLE":"baseline"},{"DESCRIPTION":"<p>Vertically aligns the contents of an object supporting <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/attributes\/vAlign\" title=\"html\/attributes\/vAlign\"><b>VALIGN<\/b><\/a> to the bottom of the object.\n<\/p>","TITLE":"bottom"},{"DESCRIPTION":"<p>Vertically aligns the contents of an object supporting <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/attributes\/vAlign\" title=\"html\/attributes\/vAlign\"><b>VALIGN<\/b><\/a> to the middle of the object.\n<\/p>","TITLE":"middle"},{"DESCRIPTION":"<p>Vertically aligns the text to subscript.\n<\/p>","TITLE":"sub"},{"DESCRIPTION":"<p>Vertically aligns the text to superscript.\n<\/p>","TITLE":"super"},{"DESCRIPTION":"<p>Vertically aligns the text of an object supporting <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/attributes\/vAlign\" title=\"html\/attributes\/vAlign\"><b>VALIGN<\/b><\/a> to the bottom of the object.\n<\/p>","TITLE":"text-bottom"},{"DESCRIPTION":"<p>Vertically aligns the text of an object supporting <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/attributes\/vAlign\" title=\"html\/attributes\/vAlign\"><b>VALIGN<\/b><\/a> to the top of the object.\n<\/p>","TITLE":"text-top"},{"DESCRIPTION":"<p>Vertically aligns the contents of an object supporting <a href=\"http:\/\/docs.webplatform.org\/wiki\/html\/attributes\/vAlign\" title=\"html\/attributes\/vAlign\"><b>VALIGN<\/b><\/a> to the top of the object.\n<\/p>","TITLE":"top"}]},"css\/properties\/animation-direction":{"SUMMARY":"<p>Defines an animation's direction, including whether an animation runs in reverse in some or all cycles.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/animation-direction","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/animation-direction","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>The animation plays backward on the first play-through, then forward on the next, then continues to alternate. The count to determine if it is an even or an odd iteration starts at one.\n<\/p>","TITLE":"alternate-reverse"},{"DESCRIPTION":"<p>The animation should reverse direction each cycle. When playing in reverse, the animation steps are performed backward. In addition, timing functions are also reversed; for example, an <i><code>ease-in<\/code><\/i> animation is replaced with an <i><code>ease-out<\/code><\/i> animation when played in reverse. The count to determine if it is an even or an odd iteration starts at one.\n<\/p>","TITLE":"alternate"},{"DESCRIPTION":"<p>The animation should play forward each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. This is the default animation direction setting.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>The animation plays backward each cycle. Each time the animation cycles, the animation resets to the end state and start over again.\n<\/p>","TITLE":"reverse"}]},"css\/properties\/grid-definition-rows":{"SUMMARY":"<p>This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the row, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the row.\n<\/p><p>As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as 'first' and 'header'.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/grid-definition-rows","ANIMATABLE":false,"COMPUTEDVALUE":"As specified, except for ‘auto’ (see prose)","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/grid-definition-rows","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>No initial grid; any rows are implicitly generated with their size determined by the ‘grid-auto-rows’ property.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The track-list syntax is:\n<\/p><p>&lt;track-list&gt;    = &#91; &lt;string&gt;* &#91; &lt;track-size&gt; &#124; &lt;repeat-function&gt; &#93; &#93;+ &lt;string&gt;*\n<\/p><p>&lt;track-size&gt;    = minmax( &lt;track-breadth&gt; , &lt;track-breadth&gt; ) &#124; auto &#124; &lt;track-breadth&gt;\n<\/p><p>&lt;track-breadth&gt; = &lt;length&gt; &#124; &lt;percentage&gt; &#124; &lt;flex&gt; &#124; min-content &#124; max-content\n<\/p><p>Where the values are described as:\n<\/p>\n<ul><li> &lt;length&gt;\n<\/li><li> &lt;percentage&gt;: Percentage values are relative to the extent (logical height) of the grid container in grid row tracks. If the extent of the grid container is an indefinite size, &lt;percentage&gt; values relative to that size are treated as ‘auto’.\n<\/li><li> &lt;flex&gt;: A non-negative dimension with the unit \"fr\". Each &lt;flex&gt; value takes a share of the remaining space in proportion to its value. See Flexible Lengths for more details.\n<\/li><li> max-content: Largest max size contribution of the grid items occupying the grid track.\n<\/li><li> min-content: Largest min size contribution of the grid items occupying the grid track.\n<\/li><li> minmax(min, max): Defines a size range greater than or equal to min and less than or equal to max. If max &lt; min, then max is ignored and ‘minmax(min,max)’ is treated as min.\n<\/li><li> auto: Computes to ‘minmax(min-content, max-content)’.\n<\/li><\/ul>\n","TITLE":"<track-list>"}]},"css\/properties\/transition-property":{"SUMMARY":"<p>The 'transition-property' property specifies the name of the CSS property to which the transition is applied.\n<\/p>","INITIALVALUE":"all","ID":"css\/properties\/transition-property","ANIMATABLE":false,"COMPUTEDVALUE":"Same as specified value","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-property","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>No transition effect is applied (all transition properties are ignored) when a new property value is specified.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>All properties that support transitions have the transition effect applied when a new value for the property is specified. (Default)\n<\/p>","TITLE":"all"},{"DESCRIPTION":"<p>A list of properties, separated by commas, to which the transition effect is applied.\n<\/p>","TITLE":"propertyname"}]},"css\/properties\/text-autospace":{"SUMMARY":"<p>When non-ideographic characters (such as numbers) are presented alongside ideographic characters, many designers prefer to include spacing to separate it from the surrounding ideographs.  This property automates the creation of that space by introducing an in-line margin, the width of which corresponds to the width of existing ideographs.\n<\/p>","INITIALVALUE":"none","ID":"css\/properties\/text-autospace","ANIMATABLE":true,"COMPUTEDVALUE":"specified value (except for initial and inherit)","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/text-autospace","STATUS":"","VALUES":[{"DESCRIPTION":"<p>Default. No effect takes place—that is, no extra space is added.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>Creates extra spacing between runs of ideographic and non-ideographic text, such as Latin-based, Cyrillic, Greek, Arabic, or Hebrew text.\n<\/p>","TITLE":"ideograph-alpha"},{"DESCRIPTION":"<p>Creates extra spacing between runs of ideographic text and numeric characters.\n<\/p>","TITLE":"ideograph-numeric"},{"DESCRIPTION":"<p>Creates extra spacing between a normal (non-wide) parenthesis and an ideograph.\n<\/p>","TITLE":"ideograph-parenthesis"},{"DESCRIPTION":"<p>Extends the width of the space character when it is adjacent to ideographs.\n<\/p>","TITLE":"ideograph-space"}]},"css\/properties\/border":{"SUMMARY":"<p>Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. It can be used to set <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\"><b>border-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\"><b>border-color<\/b><\/a>, or a subset of these. Note that as well as defining properties for all four sides of an element's border at once, you can also target borders on specific sides individually — for example <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top\" title=\"css\/properties\/border-top\"><b>border-top<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right\" title=\"css\/properties\/border-right\"><b>border-right<\/b><\/a> — or even specific properties of individual borders — for example <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-top-color\" title=\"css\/properties\/border-top-color\"><b>border-top-color<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-right-color\" title=\"css\/properties\/border-right-color\"><b>border-right-color<\/b><\/a>.\n<\/p>","INITIALVALUE":"For style values, the initial value is none. For color values, the initial value is currentColor.  For width values, the initial value is medium, which is computed as about 3px in most browsers..","ID":"css\/properties\/border","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>border<\/code> property can contain up to three components:\n<\/p>\n<ul><li> <code>border-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-style<\/code>: This takes any of the range of style values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> property, which includes <code>none<\/code>, <code>hidden<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>, <code>outset<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> page.\n<\/li><li> <code>color<\/code>: This can take any valid CSS color as its value.\n<\/li><\/ul>\n","TITLE":"border-width border-style color"},{"DESCRIPTION":"<p>When we set the value to <code>inherit<\/code>, the element will inherit the border values set on its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/min-width":{"SUMMARY":"<p>Sets the minimum width of an element. It limits the width property to be not smaller than the value specified in min-width.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/min-width","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage as specified or the absolute length or 'none'","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/min-width","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Default. Clears the min-width value. The width property can have any value.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/calc\" title=\"css\/functions\/calc\">css calc function<\/a> for mode details.\n<\/p>","TITLE":"calc()"},{"DESCRIPTION":"<p>Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fill-available"},{"DESCRIPTION":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"fit-content"},{"DESCRIPTION":"<p>Specifies a fixed width. Negative values are not allowed. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for possible units.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space\/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"max-content"},{"DESCRIPTION":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic &amp; Extrinsic Sizing Module support in browsers.\n<\/p>","TITLE":"min-content"},{"DESCRIPTION":"<p>A &lt;percentage&gt; relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.\n<\/p>","TITLE":"percentage"},{"DESCRIPTION":"<p>Takes the same specified value as the property for the element's parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/flex":{"SUMMARY":"<p>The <b>flex<\/b> CSS property specifies the ability of a flex item to alter its dimensions to fill the available space. <b>flex<\/b> is a shorthand property comprised of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-grow\" title=\"css\/properties\/flex-grow\">flex-grow<\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-shrink\" title=\"css\/properties\/flex-shrink\">flex-shrink<\/a>, and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-basis\" title=\"css\/properties\/flex-basis\">flex-basis<\/a> properties. A flex item can be stretched to use available space proportional to its flex grow factor, or reduced proportional to its flex shrink factor to prevent overflow.\n<\/p>","INITIALVALUE":"0 1 auto","ID":"css\/properties\/flex","ANIMATABLE":true,"COMPUTEDVALUE":"See individual properties","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex","STATUS":"W3C Candidate Recommendation","VALUES":[{"DESCRIPTION":"<p>Equivalent to <b>0 0 auto<\/b>\n<\/p>\n<ul><li> The flex item does not adjust its size to fit the container.\n<\/li><li> The flex item's initial main size is determined by either the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/width\" title=\"css\/properties\/width\">width<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> property, whichever is in the main dimension, as determined by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-flow\" title=\"css\/properties\/flex-flow\">flex-direction<\/a> property.\n<\/li><\/ul>\n","TITLE":"none"},{"DESCRIPTION":"<p>An example of the shorthand values.\n<\/p>\n<ul><li> The flex item grows three times as much as the other flex items to fit a larger container.\n<\/li><li> The flex item shrinks just as much as the other flex items to fit a smaller container.\n<\/li><li> The flex item's initial main size is 60% of its container.\n<\/li><\/ul>\n","TITLE":"3 1 60%"},{"DESCRIPTION":"<p>The shorthand value of this property includes the following values:\n<\/p>\n<ul><li> Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-grow\" title=\"css\/properties\/flex-grow\">flex-grow<\/a> property.\n<\/li><li> Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-shrink\" title=\"css\/properties\/flex-shrink\">flex-shrink<\/a> property.\n<\/li><li> Value of the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-basis\" title=\"css\/properties\/flex-basis\">flex-basis<\/a> property.\n<\/li><\/ul>\n","TITLE":"<[[css\/properties\/flex-grow|flex-grow]]> <[[css\/properties\/flex-shrink|flex-shrink]]> <[[css\/properties\/flex-basis|flex-basis]]>"},{"DESCRIPTION":"<p>Equivalent to <b>1 1 auto<\/b>\n<\/p>\n<ul><li> The flex item grows exactly proportional to all of the other flex items to fit a larger container.\n<\/li><li> The flex item shrinks exactly proportional to all of the other flex items to fit a smaller container.\n<\/li><li> The flex item's initial main size is determined by either the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/width\" title=\"css\/properties\/width\">width<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> property, whichever is in the main dimension, as determined by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-flow\" title=\"css\/properties\/flex-flow\">flex-direction<\/a> property.\n<\/li><\/ul>\n","TITLE":"auto"},{"DESCRIPTION":"<p>Equivalent <b>0 1 auto'<\/b>\n<\/p>\n<ul><li> The flex item does not grow with the other flex items to fit a larger container.\n<\/li><li> The flex item shrinks proportional to the other flex items to fit a smaller container.\n<\/li><li> The flex item's initial main size is determined by either the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/width\" title=\"css\/properties\/width\">width<\/a> or <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/height\" title=\"css\/properties\/height\">height<\/a> property, whichever is in the main dimension, as determined by the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/flex-flow\" title=\"css\/properties\/flex-flow\">flex-direction<\/a> property.\n<\/li><\/ul>\n","TITLE":"initial"}]},"css\/properties\/quotes":{"SUMMARY":"<p>Sets the type of quotation marks for embedded quotations.\n<\/p>","INITIALVALUE":"depends on user agent","ID":"css\/properties\/quotes","ANIMATABLE":false,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/quotes","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The \"open-quote\" and \"close-quote\" values produce no quotation marks.\n<\/p>","TITLE":"none"},{"DESCRIPTION":"<p>The \"open-quote\" and \"close-quote\" values are taken from the specified list of pairs of quotation marks. The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc.\n<\/p>","TITLE":"[<string>  <string>]+"}]},"css\/properties\/border-bottom":{"SUMMARY":"<p>Shorthand property that defines the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-width\" title=\"css\/properties\/border-width\"><b>border-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-color\" title=\"css\/properties\/border-color\"><b>border-color<\/b><\/a> of an element's bottom border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the bottom border — <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-width\" title=\"css\/properties\/border-bottom-width\"><b>border-bottom-width<\/b><\/a>, <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-style\" title=\"css\/properties\/border-bottom-style\"><b>border-bottom-style<\/b><\/a> and <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom-color\" title=\"css\/properties\/border-bottom-color\"><b>border-bottom-color<\/b><\/a>.\n<\/p>","INITIALVALUE":"For style values, the initial value is none. For color values, the initial value is currentColor.  For width values, the initial value is medium, which is computed as about 3px in most browsers.","ID":"css\/properties\/border-bottom","ANIMATABLE":true,"COMPUTEDVALUE":"","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-bottom","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>The <code>border-bottom<\/code> property can contain up to three components:\n<\/p>\n<ul><li> <code>border-width<\/code>: This takes a numeric value with any of the standard length units.\n<\/li><li> <code>border-style<\/code>: This takes any of the range of style values available to the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> property, which includes <code>none<\/code>, <code>hidden<\/code>, <code>dotted<\/code>, <code>dashed<\/code>, <code>solid<\/code>, <code>double<\/code>, <code>groove<\/code>, <code>ridge<\/code>, <code>inset<\/code>, <code>outset<\/code>. For more details about each, see the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/border-style\" title=\"css\/properties\/border-style\"><b>border-style<\/b><\/a> page.\n<\/li><li> <code>color<\/code>: This can take any valid CSS color as its value.\n<\/li><\/ul>\n","TITLE":"border-width border-style color"},{"DESCRIPTION":"<p>When we set the value to <code>inherit<\/code>, the element will inherit the border values set on its parent.\n<\/p>","TITLE":"inherit"}]},"css\/properties\/padding-left":{"SUMMARY":"<p>The <code>padding-left<\/code> CSS property of an element sets the <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding\" title=\"css\/properties\/padding\">padding<\/a> space required on the left side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.\n<\/p>","INITIALVALUE":0,"ID":"css\/properties\/padding-left","ANIMATABLE":true,"COMPUTEDVALUE":"the percentage as specified or the absolute length","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/padding-left","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Specifies a positive fixed width. See <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/data_types\/length\" title=\"css\/data types\/length\">length<\/a> for details.\n<\/p>","TITLE":"length"},{"DESCRIPTION":"<p>A percentage with respect to the width of the containing block.\n<\/p>","TITLE":"percentage"}]},"css\/properties\/transition-timing-function":{"SUMMARY":"<p>Sets the pace of action within a transition\n<\/p>","INITIALVALUE":"ease","ID":"css\/properties\/transition-timing-function","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/transition-timing-function","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>Function value specifying a customized response curve.\n<\/p>","TITLE":"[[css\/functions\/cubic-bezier|'''cubic-bezier()''']]"},{"DESCRIPTION":"<p>Function value specifying a series of discrete intervals.\n<\/p>","TITLE":"[[css\/functions\/steps|'''steps()''']]"},{"DESCRIPTION":"<p>Starts and stops gradually, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0.42,0,0.58,1)<\/b><\/a>.\n<\/p>","TITLE":"ease-in-out"},{"DESCRIPTION":"<p>Starts gradually and stops suddenly, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0.42,0,1,1)<\/b><\/a>.\n<\/p>","TITLE":"ease-in"},{"DESCRIPTION":"<p>Starts suddenly and stops gradually, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0,0,0.58,1)<\/b><\/a>.\n<\/p>","TITLE":"ease-out"},{"DESCRIPTION":"<p>Default. Starts and stops gradually, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0.25,0.1,0.25,1)<\/b><\/a>\n<\/p>","TITLE":"ease"},{"DESCRIPTION":"<p>Starts and stops immediately, progressing at a constant rate, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/cubic-bezier\" title=\"css\/functions\/cubic-bezier\"><b>cubic-bezier(0,0,1,1)<\/b><\/a>.\n<\/p>","TITLE":"linear"},{"DESCRIPTION":"<p>The change occurs instantly at the end of the keyframe, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/steps\" title=\"css\/functions\/steps\"><b>steps(1, end)<\/b><\/a>.\n<\/p>","TITLE":"step-end"},{"DESCRIPTION":"<p>The change occurs instantly at the start of the keyframe, equivalent to <a href=\"http:\/\/docs.webplatform.org\/wiki\/css\/functions\/steps\" title=\"css\/functions\/steps\"><b>steps(1, start)<\/b><\/a>.\n<\/p>","TITLE":"step-start"}]},"css\/properties\/wrap-flow":{"SUMMARY":"<p>Specifies how exclusions impact inline content within block-level elements\n<\/p>","INITIALVALUE":"auto","ID":"css\/properties\/wrap-flow","ANIMATABLE":false,"COMPUTEDVALUE":"as specified except for element's whose ‘float’ computed value is not none, in which case the computed value is ‘auto’.","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/wrap-flow","STATUS":"W3C Working Draft","VALUES":[{"DESCRIPTION":"<p>No exclusion is created. Inline flow content interacts with the element as usual.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_auto.png\" class=\"image\"><img alt=\"wrap-flow:auto applied to grid positioned elements;\" src=\"\/w\/images\/b\/ba\/exclusion_wrap_side_auto.png\" width=\"395\" height=\"394\" \/><\/a>\n<\/p>","TITLE":"auto"},{"DESCRIPTION":"<p>Inline flow content can flow on all sides of the exclusion.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_both.png\" class=\"image\"><img alt=\"wrap-flow:both applied to grid positioned elements;\" src=\"\/w\/images\/5\/53\/exclusion_wrap_side_both.png\" width=\"395\" height=\"395\" \/><\/a>\n<\/p>","TITLE":"both"},{"DESCRIPTION":"<p>Inline flow content can only flow before and after the exclusion in the flow content's block direction and must leave the areas next to the start and end edges of the exclusion empty.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_clear.png\" class=\"image\"><img alt=\"wrap-flow:clear applied to grid positioned elements;\" src=\"\/w\/images\/4\/41\/exclusion_wrap_side_clear.png\" width=\"395\" height=\"395\" \/><\/a>\n<\/p>","TITLE":"clear"},{"DESCRIPTION":"<p>Inline flow content can flow around the end edge of the exclusion area but must leave the area next to the start edge of the exclusion empty.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_right.png\" class=\"image\"><img alt=\"wrap-flow:end applied to grid positioned elements;\" src=\"\/w\/images\/d\/df\/exclusion_wrap_side_right.png\" width=\"396\" height=\"396\" \/><\/a>\n<\/p>","TITLE":"end"},{"DESCRIPTION":"<p>Inline flow content can flow around the edge of the exclusion with the largest available space within the flow content's containing block, and must leave the other edge of the exclusion empty.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_maximum.png\" class=\"image\"><img alt=\"wrap-flow:maximum applied to grid positioned elements;\" src=\"\/w\/images\/0\/0b\/exclusion_wrap_side_maximum.png\" width=\"396\" height=\"396\" \/><\/a>\n<\/p>","TITLE":"maximum"},{"DESCRIPTION":"<p>Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content's containing block, and must leave the other edge of the exclusion empty.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_minimum.png\" class=\"image\"><img alt=\"wrap-flow:minimum applied to grid positioned elements;\" src=\"\/w\/images\/d\/d7\/exclusion_wrap_side_minimum.png\" width=\"396\" height=\"396\" \/><\/a>\n<\/p>","TITLE":"minimum"},{"DESCRIPTION":"<p>Inline flow content can flow around the start edge of the exclusion area but must leave the area next to the end edge of the exclusion empty.\n<\/p><p><a href=\"http:\/\/docs.webplatform.org\/wiki\/File:exclusion_wrap_side_left.png\" class=\"image\"><img alt=\"wrap-flow:start applied to grid positioned elements;\" src=\"\/w\/images\/b\/b5\/exclusion_wrap_side_left.png\" width=\"396\" height=\"396\" \/><\/a>\n<\/p>","TITLE":"start"}]},"css\/properties\/font-style":{"SUMMARY":"<p>The <code>font-style<\/code> property allows italic or oblique faces to be selected within a font-family.\n<\/p>","INITIALVALUE":"normal","ID":"css\/properties\/font-style","ANIMATABLE":false,"COMPUTEDVALUE":"as specified","URL":"http:\/\/docs.webplatform.org\/wiki\/css\/properties\/font-style","STATUS":"W3C Recommendation","VALUES":[{"DESCRIPTION":"<p>Selects a font that is labeled as 'italic' (cursive). If no font labeled 'italic' is available, a font that is labeled as 'oblique' is selected.\n<\/p>","TITLE":"italic"},{"DESCRIPTION":"<p>Selects a face that is classified as 'normal'.\n<\/p>","TITLE":"normal"},{"DESCRIPTION":"<p>Selects a font that is labeled as 'oblique' (sloped version of the regular face). If no italic or oblique font is available, the browser slopes the normal version of the font to produce an oblique approximation.\n<\/p>","TITLE":"oblique"}]}},"DATETIME":"August, 29 2013 18:42:00"}
+{"DATETIME":"Fri, 14 Nov 2014 14:36:04 GMT","PROPERTIES":{"css/properties/align-content":{"SUMMARY":"<p>Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <a href='https://docs.webplatform.org/wiki/css/properties/justify-content'>justify-content</a> aligns individual items within the main-axis. ","URL":"https://docs.webplatform.org/wiki/css/properties/align-content","VALUES":[{"description":"<p>Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of empty space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.) ","value":"center "},{"description":"<p>Lines are evenly distributed in the flex container. If the leftover free-space is negative this value is identical to <strong>flex-start</strong>. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the empty space between any two adjacent lines is the same. ","value":"space-between "},{"description":"<p>Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to <strong>center</strong>. Otherwise, the lines in the flex container are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flex container are half the size of the other empty spaces. ","value":"space-around "},{"description":"<p>Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to <strong>flex-start</strong>. Otherwise, the free-space is split equally between all of the lines, increasing their cross size. ","value":"stretch "},{"description":"<p>Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line. ","value":"flex-start "},{"description":"<p>Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line. ","value":"flex-end "}]},"css/properties/align-items":{"SUMMARY":"<p>Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how <a href='https://docs.webplatform.org/wiki/css/properties/justify-content'>justify-content</a> aligns items along the main axis. ","URL":"https://docs.webplatform.org/wiki/css/properties/align-items","VALUES":[{"description":"<p>The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) ","value":"center "},{"description":"<p>If the flex item's inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. ","value":"baseline "},{"description":"<p>If the cross size property of the flex item is <strong>auto</strong>, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by <a href='https://docs.webplatform.org/wiki/css/properties/min-height'>min-height</a>/<a href='https://docs.webplatform.org/wiki/css/properties/min-width'>min-width</a>/<a href='https://docs.webplatform.org/wiki/css/properties/max-height'>max-height</a>/<a href='https://docs.webplatform.org/wiki/css/properties/max-width'>max-width</a>. Note: that if the flex container's height is constrained the <strong>stretch</strong> value may cause the contents of the flex item to overflow the item. ","value":"stretch "},{"description":"<p>The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. ","value":"flex-start "},{"description":"<p>The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. ","value":"flex-end "}]},"css/properties/align-self":{"SUMMARY":"<p>Allows the default alignment to be overridden for individual flex items. ","URL":"https://docs.webplatform.org/wiki/css/properties/align-self","VALUES":[{"description":"<p>The flex item's margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.) ","value":"center "},{"description":"<p>If the flex item's inline axis is the same as the cross axis, this value is identical to <strong>flex-start</strong>. <p>Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. ","value":"baseline "},{"description":"<p>If the cross size property of the flex item is <strong>auto</strong>, its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible, while still respecting the constraints imposed by <a href='https://docs.webplatform.org/wiki/css/properties/min-height'>min-height</a>/<a href='https://docs.webplatform.org/wiki/css/properties/min-width'>min-width</a>/<a href='https://docs.webplatform.org/wiki/css/properties/max-height'>max-height</a>/<a href='https://docs.webplatform.org/wiki/css/properties/max-width'>max-width</a>. Note: that if the flex container's height is constrained the stretch value may cause the contents of the flex item to overflow the item. ","value":"stretch "},{"description":"<p>Computes to the value of <a href='https://docs.webplatform.org/wiki/css/properties/align-items'>align-items</a> on the element's parent, or <strong>stretch</strong> if the element has no parent. ","value":"auto "},{"description":"<p>The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. ","value":"flext-start "},{"description":"<p>The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line. ","value":"flex-end "}]},"css/properties/alignment-adjust":{"SUMMARY":"<p>This property allows precise alignment of elements, such as graphics, that do not have a baseline-table or lack the desired baseline in their baseline-table. With the alignment-adjust property, the position of the baseline identified by the alignment-baseline can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element. ","URL":"https://docs.webplatform.org/wiki/css/properties/alignment-adjust","VALUES":[{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the text-after-edge baseline of the element. ","value":"text-after-edge "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the before-edge of the extended inline box of the element. This may include or not the line-height of the element, depending on the line-stacking-strategy. ","value":"before-edge "},{"description":"<p>The alignment-point is on the start-edge of the inline box. Its position along the start-edge relative to the intersection of the dominant-baseline and the start-edge is offset by the length value. The offset is opposite to the shift-direction (positive value) or in the shift-direction (negative value). A value of \"0cm\" makes the dominant-baseline the alignment point. ","value":"&lt;length&gt; "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the ideographic baseline of the element. ","value":"ideographic "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the text-before-edge baseline of the element. ","value":"text-before-edge "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the alphabetic baseline of the element. ","value":"alphabetic "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the central baseline of the element. ","value":"central "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the hanging baseline of the element. ","value":"hanging "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the middle baseline of the element. ","value":"middle "},{"description":"<p>For each glyph corresponding to textual information within the element, the alignment-point is the intersection of the start-edge of the glyph box and the block-progression-direction position of the alignment point from the font. Padding, border or margin do not affect that alignment point. The alignment point of the inline-level element itself is at the intersection of the start-edge of the first inline box and the baseline identified by the ‘alignment-baseline’ property, if this baseline exists in the baseline-table for the element dominant-baseline. If that specific baseline does not exist, the user agent may use heuristics to determine where the missing baseline would be. ","value":"auto "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the mathematical baseline of the element. ","value":"mathematical "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the after-edge of the extended inline box of the element. This may include or not the line-height of the element, depending on the line-stacking-strategy. ","value":"after-edge "},{"description":"<p>The alignment point is at the intersection of the start-edge of the element and the dominant-baseline of the element. ","value":"baseline "},{"description":"<p>The computed value of the property is this percentage multiplied by the computed line-height of the element. The alignment point is on the start-edge of the inline box. Its position along the start-edge relative to the intersection of the dominant-baseline and the start-edge is offset by the computed value. The offset is opposite to the shift-direction (positive value) or in the shift-direction (negative value). A value of \"0%\" makes the dominant-baseline the alignment point. ","value":"&lt;percentage&gt; "}]},"css/properties/all-space-treatment":{"SUMMARY":"<p>Specifies the treatment of all consecutive white space characters (with no exception for line feed characters). ","URL":"https://docs.webplatform.org/wiki/css/properties/all-space-treatment","VALUES":[{"description":"<p>The white space characters are collapsed according to the rules described in <a href='http://www.w3.org/TR/2003/CR-css3-text-20030514/#white-space-processing'>white space processing</a>. ","value":"collapse "},{"description":"<p>All white space characters are rendered as they are. ","value":"preserve "}]},"css/properties/animation":{"SUMMARY":"<p>Shorthand property to define a CSS animation, setting all parameters at once. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation","VALUES":[{"description":"<p>A list of values for each of the individual animation properties. The animation name and duration are required; all other values are optional. Multiple animations can be assigned as a comma-separated list. <dl><dt><code>&lt;single-animation-name&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-name'><strong>animation-name</strong></a> property.<dt><code>&lt;single-animation-duration&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-duration'><strong>animation-duration</strong></a> property.<dt><code>&lt;single-animation-timing-function&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-timing-function'><strong>animation-timing-function</strong></a> property.<dt><code>&lt;single-animation-delay&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-delay'><strong>animation-delay</strong></a> property.<dt><code>&lt;single-animation-iteration-count&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-iteration-count'><strong>animation-iteration-count</strong></a> property.<dt><code>&lt;single-animation-direction&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-direction'><strong>animation-direction</strong></a> property.<dt><code>&lt;single-animation-fill-mode&gt;</code><dd>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-fill-mode'><strong>animation-fill-mode</strong></a> property.</dl><p><strong>Note:</strong> The first <code>&lt;time&gt;</code> value is assigned to the <strong>animation-duration</strong>. The second <code>&lt;time&gt;</code> value is assigned to the <strong>animation-delay</strong>. ","value":"single-animation [, single-animation]* "}]},"css/properties/animation-delay":{"SUMMARY":"<p>Defines a length of time to elapse before an animation starts, allowing an animation to begin execution some time after it is applied. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-delay","VALUES":[{"description":"<p>Can be specified in seconds or milliseconds, e.g., <strong>2s</strong> or <strong>150ms</strong>. Can also be a comma-separated list of delays, e.g., <strong>.25s, .5s, 1s</strong>, where each delay is applied to the corresponding ordinal position value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-name'>animation-name</a> property. <p><em>If the value is negative the animation will execute the moment it is applied, but will begin execution at the specified offset. That is, the animation appears to begin part-way through its cycle. ","value":"&#60;time&#62; "}]},"css/properties/animation-direction":{"SUMMARY":"<p>Defines whether an animation should run in reverse on some or all cycles. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-direction","VALUES":[{"description":"<p>All iterations of the animation are played as specified. ","value":"normal "},{"description":"<p>All iterations of the animation are played in the reverse direction from the way they were specified. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation. ","value":"reverse "},{"description":"<p>The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction, thus reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd). ","value":"alternate "},{"description":"<p>The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction, again reversing direction each cycle. The count to determine if an iteration is even or odd starts at one (odd). ","value":"alternate-reverse "}]},"css/properties/animation-duration":{"SUMMARY":"<p>Defines the length of time an animation takes to complete one cycle. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-duration","VALUES":[{"description":"<p>Can be specified in seconds or milliseconds, e.g., <strong>2s</strong> or <strong>150ms</strong>. Can also be a comma-separated list of durations, e.g., <strong>.25s, .5s, 1s</strong>, where each duration is applied to the corresponding ordinal position value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-name'>animation-name</a> property.  <p>The initial value of 0s means the animation takes no time; that is, it is applied instantaneously. When the duration is 0s (or 0ms), <a href='https://docs.webplatform.org/wiki/css/properties/animation-fill-mode'>animation-fill-mode</a> still applies, such that an animation filling backward will show the value of the 0% <a href='https://docs.webplatform.org/wiki/css/atrules/@keyframes'>keyframe</a> during any <a href='https://docs.webplatform.org/wiki/css/properties/animation-delay'>delay</a> period, while an animation filling forward will retain the value specified at the 100% <a href='https://docs.webplatform.org/wiki/css/atrules/@keyframes'>keyframe</a> even if the animation was instantaneous. Also, animation events are still fired. ","value":"&#60;time&#62; "}]},"css/properties/animation-fill-mode":{"SUMMARY":"<p>Defines what values are applied by the animation outside the time it is executing (before and after the animation).  <p>By default, an animation does not affect property values between the time it is applied (when the <a href='https://docs.webplatform.org/wiki/css/properties/animation-name'>animation-name</a> property is set on an element) and the time it begins execution (determined by the <a href='https://docs.webplatform.org/wiki/css/properties/animation-delay'>animation-delay</a> property). Also, by default an animation does not affect property values after the animation ends (determined by the <a href='https://docs.webplatform.org/wiki/css/properties/animation-duration'>animation-duration</a> property). The <a href='https://docs.webplatform.org/wiki/css/properties/animation-fill-mode'>animation-fill-mode</a> property can override this behavior. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-fill-mode","VALUES":[{"description":"<p>Property values do not change before the animation starts, and they return to their original state when the animation ends. This is the default behavior. ","value":"none "},{"description":"<p>When the animation ends (as determined by its <a href='https://docs.webplatform.org/wiki/css/properties/animation-iteration-count'>animation-iteration-count</a>), properties retain the values set by the final keyframe. If <strong>animation-iteration-count</strong> is zero, apply the values that would start the first iteration.  <table class=\"mw-datatable os-suggest-results filehistory\"><tr ><th> <a href='https://docs.webplatform.org/wiki/css/properties/animation-direction'>animation-direction</a><th> <a href='https://docs.webplatform.org/wiki/css/properties/animation-iteration-count'>animation-iteration-count</a><th> last keyframe encountered<tr ><td> <code>normal</code> <td> <code>even</code> or <code>odd</code>  <td> 100% or <code>to</code> <tr ><td> <code>reverse</code> <td> <code>even</code> or <code>odd</code> <td> 0% or <code>from</code> <tr ><td> <code>alternate</code> <td> <code>even</code> <td> 0% or <code>from</code> <tr ><td> <code>alternate</code> <td> <code>odd</code> <td> 100% or <code>to</code><tr ><td> <code>alternate-reverse</code> <td> <code>even</code> <td> 100% or <code>to</code><tr ><td> <code>alternate-reverse</code> <td> <code>odd</code> <td> 0% or <code>from</code></table>","value":"forwards "},{"description":"<p>If the animation is delayed by <a href='https://docs.webplatform.org/wiki/css/properties/animation-delay'>animation-delay</a>, properties assume values set by the first keyframe while waiting for the animation to start. These are either the values of the <em>from</em> keyframe (when <a href='https://docs.webplatform.org/wiki/css/properties/animation-direction'>animation-direction</a> is <strong>normal</strong> or <strong>alternate</strong>) or those of the <em>to</em> keyframe (when <a href='https://docs.webplatform.org/wiki/css/properties/animation-direction'>animation-direction</a> is <strong>reverse</strong> or <strong>alternate-reverse</strong>). When the animation ends, properties revert to their original state. <table class=\"mw-datatable os-suggest-results filehistory\"><tr ><th> <a href='https://docs.webplatform.org/wiki/css/properties/animation-direction'>animation-direction</a><th> first relevant keyframe<tr ><td> <code>normal</code> or <code>alternate</code> <td> 0% or <code>from</code><tr ><td> <code>reverse</code> or <code>alternate-reverse</code> <td> 100% or <code>to</code></table>","value":"backwards "},{"description":"<p>Values set by the first and last keyframes are applied before and after the animation. ","value":"both "}]},"css/properties/animation-iteration-count":{"SUMMARY":"<p>Specifies how many times an animation cycle should play. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-iteration-count","VALUES":[{"description":"<p>The animation plays the specified number of times. Can also be a comma-separated list of counts, e.g., <strong>5, 2, 10</strong>, where each duration is applied to the corresponding ordinal position value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-name'>animation-name</a> property. Negative values are not allowed. You may specify non-integer values to play part of an animation cycle (for example 0.5 will play half of the animation cycle). ","value":"&#60;single-animation-iteration-count&#62; "},{"description":"<p>Loop the animation indefinitely. ","value":"infinite "}]},"css/properties/animation-name":{"SUMMARY":"<p>Defines the list of animations that apply to the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-name","VALUES":[{"description":"<p>No animation applies to the element. You can use this value to override any animations coming from the cascade. ","value":"none "},{"description":"<p>One or more comma-separated animation names. Each name is used to select the <code><a href='https://docs.webplatform.org/wiki/css/atrules/@keyframes'>@keyframes</a></code> rule that defines the animation. If the specified name does not match any <strong>@keyframes</strong> rule then no animation will be run for this name. In addition, when multiple animations update the same property, the animation listed last wins. ","value":"&lt;single-animation-name&gt; [, &lt;single-animation-name&gt;]* "}]},"css/properties/animation-play-state":{"SUMMARY":"<p>Defines whether an animation is running or paused. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-play-state","VALUES":[{"description":"<p>Plays the animation. If restarting a paused animation, the animation resumes from the current (paused) state. ","value":"running "},{"description":"<p>Pauses the animation. A paused animation continues to display the current state of the animation. ","value":"paused "}]},"css/properties/animation-timing-function":{"SUMMARY":"<p>Describes how the animation will progress over one cycle of its duration. ","URL":"https://docs.webplatform.org/wiki/css/properties/animation-timing-function","VALUES":[{"description":"<p>Specifies a stepping function using two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0. The second optional is either the value <code>start</code> or <code>end</code> and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value <code>end</code>. ","value":"steps(3, end) "},{"description":"<p>The animation begins and progresses at a constant rate over the specified duration; this value is equivalent to <code><a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'>cubic-bezier(0,0,1,1)</a></code> ","value":"linear "},{"description":"<p>Equivalent to steps(1,start). ","value":"step-start "},{"description":"<p>The animation begins gradually and progresses at a steady rate; this value is equivalent to <code><a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'>cubic-bezier(0.42,0,1,1)</a></code>. ","value":"ease-in "},{"description":"<p>Equivalent to steps(1,end). ","value":"step-end "},{"description":"<p>The animation begins at a steady rate then gradually ends; this value is equivalent to <code><a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'>cubic-bezier(0,0,0.58,1)</a></code>. ","value":"ease-out "},{"description":"<p>The animation begins and ends gradually; equivalent to <code><a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'>cubic-bezier(0.42,0,0.58,1)</a></code>. Note that this timing function is similar to <code>ease</code>, although the latter starts faster than it ends. ","value":"ease-in-out "},{"description":"<p>Specifies a cubic bezier curve. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). Both x values must be in the range [0, 1] or the definition is invalid. The y values can exceed this range. This function is used to specify custom timing functions. ","value":"cubic-bezier(0,0,1,1) "},{"description":"<p>Default. The animation begins and ends gradually; this value is equivalent to <code><a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'>cubic-bezier(0.25,0.1,0.25,1)</a></code>. ","value":"ease "}]},"css/properties/appearance":{"SUMMARY":"<p>Allows changing the style of any element to platform-based interface elements or vice versa. ","URL":"https://docs.webplatform.org/wiki/css/properties/appearance","VALUES":[{"description":"<p>No special styling is applied. For Firefox note <a href='https://bugzilla.mozilla.org/show_bug.cgi?id=649849'>bug 649849</a> and <a href='https://bugzilla.mozilla.org/show_bug.cgi?id=605985'>bug 605985</a> ","value":"none "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"button-arrow-next "},{"description":"","value":"dialog "},{"description":"<p>The element is drawn like a button ","value":"button "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"button-arrow-previous "},{"description":"","value":"listbox "},{"description":"<p>Use button bevel theme for rendering the object. Seems to work only in mozilla based browsers ","value":"button-bevel "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"button-arrow-up "},{"description":"<p>The element is drawn like a checkbox, including only the actual \"checkbox\" portion. ","value":"checkbox "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"button-focus "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"checkbox-container "},{"description":"<p>No clear visual effect. ","value":"caret "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"button-arrow-down "},{"description":"<p>Firefox specific - but no effect in latest version ","value":"checkbox-small "}]},"css/properties/backface-visibility":{"SUMMARY":"<p>Determines whether or not the “back” side of a transformed element is visible when facing the viewer. ","URL":"https://docs.webplatform.org/wiki/css/properties/backface-visibility","VALUES":[{"description":"<p>There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side). In this case, the property should be set to hidden to make the back face of the element opaque. ","value":"hidden "},{"description":"<p>The back face of an element is a transparent background, displaying a mirror image of the front face when the back face is observable. ","value":"visible "}]},"css/properties/background":{"SUMMARY":"<p>This background property is a shorthand property for setting the color, position, size, repeat, clip, origin, attachment, and image of the element. <p>The background- properties provide fundamental styles to an element, such as color, image, and position. CSS3 adds more properties for handling backgrounds, including properties that improve the mobile web experience. Many CSS background properties can be set, at the same time, with this background property. ","URL":"https://docs.webplatform.org/wiki/css/properties/background","VALUES":[{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/background-color'><strong>background-color</strong></a> property. The default value is <tt>transparent</tt>. ","value":"&lt;color&gt; "},{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/background-image'><strong>background-image</strong></a> property. The default value is <tt>none</tt>. ","value":"&lt;bg-image&gt; "},{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/background-position'><strong>background-position</strong></a> property. Otherwise, it is set to its initial value. ","value":"&lt;position&gt; [ / &lt;bg-size&gt; ]? "},{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/background-repeat'><strong>background-repeat</strong></a> property. The default value is <tt>repeat</tt>. ","value":"&lt;repeat-style&gt; "},{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/background-attachment'><strong>background-attachment</strong></a> property. The default value is <tt>scroll</tt>. ","value":"&lt;attachment&gt; "},{"description":"<p>If one &lt;box&gt; value is present then it sets both <a href='https://docs.webplatform.org/wiki/css/properties/background-origin'><strong>background-origin</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/background-clip'><strong>background-clip</strong></a> to that value. If two values are present, then the first sets <a href='https://docs.webplatform.org/wiki/css/properties/background-origin'><strong>background-origin</strong></a> and the second <a href='https://docs.webplatform.org/wiki/css/properties/background-clip'><strong>background-clip</strong></a>. <p>For background-clip, valid values are those available to <a href='https://docs.webplatform.org/wiki/css/properties/background-clip'><strong>background-clip</strong></a> property. The default value is <tt>border-box</tt>. For background-origin, valid values are those  available to <a href='https://docs.webplatform.org/wiki/css/properties/background-origin'><strong>background-origin</strong></a> property. The default value is <tt>padding-box</tt>. ","value":"&lt;box&gt;&#123;1,2&#125; "}]},"css/properties/background-attachment":{"SUMMARY":"<p>Defines if a background image scrolls with the content or stays fixed. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-attachment","VALUES":[{"description":"<p>Background image stays fixed with regard to the element’s contents and scrolls as the element is scrolled. ","value":"local "},{"description":"<p>Default. Background image scrolls with the object as the document is scrolled. ","value":"scroll "},{"description":"<p>Background image stays fixed within the viewport and does not move when the element or the page is scrolled. ","value":"fixed "}]},"css/properties/background-blend-mode":{"SUMMARY":"<p>This property describes how the element's background images should blend with each other and the element's background color.  The value is a list of blend modes that corresponds to each background image. Each element in the list will apply to the corresponding element of background-image. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-blend-mode","VALUES":[{"description":"<p>Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. ","value":"color "},{"description":"<p>Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. ","value":"soft-light "},{"description":"<p>The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged. ","value":"darken "},{"description":"<p>Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. ","value":"luminosity "},{"description":"<p>Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change. ","value":"difference "},{"description":"<p>Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged. ","value":"lighten "},{"description":"<p>This is the default attribute which specifies no blending. The blending formula simply selects the source color. ","value":"normal "},{"description":"<p>Produces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change. ","value":"exclusion "},{"description":"<p>Brightens the backdrop color to reflect the source color. Painting with black produces no changes. ","value":"color-dodge "},{"description":"<p>The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color. ","value":"multiply "},{"description":"<p>Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. ","value":"hue "},{"description":"<p>Darkens the backdrop color to reflect the source color. Painting with white produces no change. ","value":"color-burn "},{"description":"<p>Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen. ","value":"screen "},{"description":"<p>Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change. ","value":"saturation "},{"description":"<p>Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. ","value":"hard-light "},{"description":"<p>Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop. ","value":"overlay "}]},"css/properties/background-clip":{"SUMMARY":"<p>Specifies how an element’s background is clipped. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-clip","VALUES":[{"description":"<p>Default. The background extends underneath the element’s borders, which can be seen with semi-transparent or dotted or dashed border-styles. ","value":"border-box "},{"description":"<p>The background is clipped to the padding-box, i.e. it cannot be seen under the element’s borders. ","value":"padding-box "},{"description":"<p>The background is clipped the element’s content box, so the paddings and borders have no background. This is mainly useful with multiple backgrounds with different background-clip values. ","value":"content-box "}]},"css/properties/background-color":{"SUMMARY":"<p>Sets a color to fill up the background of an element it is applied to and accepts any valid CSS color. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-color","VALUES":[{"description":"<p>The default value; you will be able to see the elements behind the element in question showing through it. ","value":"transparent "},{"description":"<p><code>background-color</code> accepts a single color as its value, which can be a keyword, hex, RGB, RGBa, HSL or HSLa color value. See the <a href='https://docs.webplatform.org/wiki/css/color'>CSS color values</a> page for more details. ","value":"color "},{"description":"<p>The element's background-color is inherited from its parent element. ","value":"inherit "}]},"css/properties/background-image":{"SUMMARY":"<p>Applies one or more background images to an element. These can be any valid CSS image, including url() paths to image files or CSS gradients. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-image","VALUES":[{"description":"<p>Any valid CSS image value, including image files through <a href='https://docs.webplatform.org/wiki/css/functions/url()'>CSS images: url()</a> or CSS gradients. ","value":"&lt;image&gt; "},{"description":"<p>You can apply multiple background images to a single element (image files, gradients, or a mixture) by including all the image references in the property value, with each one separated by a comma. Images referenced earlier in the property value appear in front of images referenced later. ","value":"&lt;image&gt;, &lt;image&gt;, … "},{"description":"<p>Default. Color of the next parent through which the background is visible. ","value":"none "}]},"css/properties/background-origin":{"SUMMARY":"<p>Specifies what the background-position property is relative to. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-origin","VALUES":[{"description":"<p>Default. The position is relative to the padding box. ","value":"padding-box "},{"description":"<p>The position is relative to the border box. ","value":"border-box "},{"description":"<p>The position is relative to the content box. Useful for having background images automatically follow the padding. ","value":"content-box "}]},"css/properties/background-position":{"SUMMARY":"<p><code>background-position</code> allows you to set the placement of a <code>background-image</code> on the element it is applied to. <code>background-position</code> generally takes two values, which set the horizontal and vertical position of the background image inside the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-position","VALUES":[{"description":"<p>If only a single value is included, that is taken as the horizontal value, and the vertical value is set as <code>center</code>. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/percentage'>percentage</a> "},{"description":"<p>If you have applied multiple background images to an element, you can give each background image a different position by specifying multiple background position values delimited by commas. The values supplied will cycle so that all images are given a <code>background-position</code>, for example if four background images are specified and only two position values, position 1 will be applied to images 1 and 3, and position 2 to images 2 and 4. ","value":"30% 15%, 40% 80%, 10px 10px "},{"description":"<p>CSS3 includes the new four value <code>background-position</code> syntax, which allows you to choose which sides of the element you are positioning the background image relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the background image 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0. ","value":"bottom <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> right <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> "},{"description":"<p>Any standard CSS units are acceptable as <code>background-position</code> values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the background image is away from the top left corner of the element. For more details on these units, read <a href='https://docs.webplatform.org/wiki/css/data_types/length'>Length units</a>. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> "},{"description":"<p>Percentages are acceptable for <code>background-position</code> values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the background image is away from the top left corner of the element. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/percentage'>percentage</a> <a href='https://docs.webplatform.org/wiki/css/data_types/percentage'>percentage</a> "},{"description":"<p><code>background-position</code> can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the background image, but rather the overall position of the background image inside the element. So for example, a value of <code>right top</code> will make the background image site flush to the top and right sides of the element it is applied to; the top left corner <em>won't</em> be positioned at the top right of the element! ","value":"left top "}]},"css/properties/background-position-x":{"SUMMARY":"<p>Sets the horizontal position of a background image. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-position-x","VALUES":[{"description":"<p>Horizontal alignment value (e.g. \"left\", \"right\", or \"center\"). ","value":"hAlignment "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object. ","value":"percentage "}]},"css/properties/background-position-y":{"SUMMARY":"<p>Sets vertical starting position of a background image. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-position-y","VALUES":[{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object. ","value":"percentage "},{"description":"<p>Vertical alignment value. ","value":"vAlignment "}]},"css/properties/background-repeat":{"SUMMARY":"<p>Background-repeat defines if and how background images will be repeated after they have been sized and positioned ","URL":"https://docs.webplatform.org/wiki/css/properties/background-repeat","VALUES":[{"description":"<p>Keyword(s) indicating the repeat pattern. <dl><dt><code>repeat</code><dd>Default. In CSS2.1, the image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.<dt><code>no-repeat</code><dd>The image is not repeated.<dt><code>repeat-x</code><dd>The image is repeated along the horizontal axis.<dt><code>repeat-y</code><dd>The image is repeated along the vertical axis.<dt><code>round</code><dd>The image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. <strong>(CSS3)</strong><dt><code>space</code><dd>The image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. <strong>(CSS3)</strong></dl>","value":"&lt;repeat-style&gt; "}]},"css/properties/background-size":{"SUMMARY":"<p>Specifies the size of the background images. ","URL":"https://docs.webplatform.org/wiki/css/properties/background-size","VALUES":[{"description":"<p>Default. See Remarks. ","value":"auto "},{"description":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area. ","value":"contain "},{"description":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area. ","value":"cover "},{"description":"<p>A floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>).  For more information about the supported length units, see the CSS Values and Units Reference. ","value":"length "},{"description":"<p>An integer, followed by a percent (%). A percentage value is relative to the background positioning area. ","value":"percentage "}]},"css/properties/baseline-shift":{"SUMMARY":"<p>Obsolete - spec retired, not implemented. ","URL":"https://docs.webplatform.org/wiki/css/properties/baseline-shift","VALUES":[{"description":"<p>The computed value of the property is this percentage multiplied by the computed 'line-height' of the parent element. The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the computed value. A value of '0%' is equivalent to 'baseline'. ","value":"&lt;percentage&gt; "},{"description":"<p>The dominant-baseline is shifted in the shift-direction (positive value) or opposite to the shift-direction (negative value) of the parent area by the &lt;length&gt; value. A value of '0cm' is equivalent to 'baseline'. ","value":"&lt;length&gt; "},{"description":"<p>There is no baseline shift; the dominant baseline remains in its original position. ","value":"baseline "},{"description":"<p>The dominant baseline is shifted to the default position for subscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset. ","value":"sub "},{"description":"<p>The dominant baseline is shifted to the default position for superscripts. The offset for this position is determined by the font data for the parent nominal font as adjusted by the dominant baseline-table font-size of the parent element. If there is no applicable font data the User Agent may use heuristic to determine the offset. ","value":"super "}]},"css/properties/behavior":{"SUMMARY":"<p>Non standard. Sets or retrieves the location of the Dynamic HTML (DHTML) behavior. ","URL":"https://docs.webplatform.org/wiki/css/properties/behavior"},"css/properties/block-progression":{"SUMMARY":"<p>Sets the block progression and layout orientation: deprecated in favor of the <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing-mode</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/block-progression","VALUES":[{"description":"<p>Default. Top-to-bottom block flow. Layout is horizontal. ","value":"tb "},{"description":"<p>Right-to-left block flow. Layout is vertical. ","value":"rl "},{"description":"<p>Bottom-to-top block flow. Layout is horizontal. ","value":"bt "},{"description":"<p>Left-to-right block flow. Layout is vertical. ","value":"lr "}]},"css/properties/border":{"SUMMARY":"<p>Shorthand property that defines the different properties of all four sides of an element's border in a single declaration. It can be used to set <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-style'>border-style</a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>, or a subset of these. ","URL":"https://docs.webplatform.org/wiki/css/properties/border","VALUES":[{"description":"<p>When the value is set to <code>inherit</code>, the element will inherit the border values set on its parent. ","value":"inherit "},{"description":"<p>A concatenation of <code>&lt;border-width&gt;</code>, <code>&lt;border-style&gt;</code>, and <code>&lt;border-color&gt;</code>. At least one of these must be present, and they may appear in any order. <p><strong>&lt;border-width&gt;</strong>: A numeric value with any of the standard length units. The initial value is <code>medium</code>, which most browsers will render as 3px. See the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> property. <p><strong>&lt;border-style&gt;</strong>: This takes any of the range of values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'>border-style</a> property. The initial value is <code>none</code>. <p><strong>&lt;border-color&gt;</strong>: This takes any valid CSS color. See the <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a> property. The initial value is <code>currentColor</code>. ","value":"&lt;border-width&gt; OR &lt;border-style&gt; OR &lt;border-color&gt; "}]},"css/properties/border-bottom":{"SUMMARY":"<p>Shorthand property that defines the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'><strong>border-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-color'><strong>border-color</strong></a> of an element's bottom border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the bottom border — <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-width'><strong>border-bottom-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-style'><strong>border-bottom-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-color'><strong>border-bottom-color</strong></a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-bottom","VALUES":[{"description":"<p>The <code>border-bottom</code> property can contain up to three components: <ul><li> <code>border-width</code>: This takes a numeric value with any of the standard length units.<li> <code>border-style</code>: This takes any of the range of style values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> property, which includes <code>none</code>, <code>hidden</code>, <code>dotted</code>, <code>dashed</code>, <code>solid</code>, <code>double</code>, <code>groove</code>, <code>ridge</code>, <code>inset</code>, <code>outset</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> page.<li> <code>color</code>: This can take any valid CSS color as its value.</ul>","value":"border-width border-style color "},{"description":"<p>When we set the value to <code>inherit</code>, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-bottom-color":{"SUMMARY":"<p>Sets the color of the bottom border. This page explains the border-bottom-color value, but often you will find it more convenient to fix the border's bottom color as part of a shorthand set, either <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom'>border-bottom</a> or <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>. <p><a href='https://docs.webplatform.org/wiki/css/data_types/color'>Colors</a> can be defined several ways. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-color#Usage'>Usage</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-bottom-color","VALUES":[{"description":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "},{"description":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-color#Usage'>Usage</a>. ","value":"&lt;color&gt; "},{"description":"<p>currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"<p>The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "}]},"css/properties/border-bottom-left-radius":{"SUMMARY":"<p>Defines the shape of the border of the bottom-left corner. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-bottom-left-radius","VALUES":[{"description":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href='https://docs.webplatform.org/wiki/css/data_types/length'>CSS &lt;length&gt; data types</a>. Negative values are invalid. ","value":"length "},{"description":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid. ","value":"percentage "}]},"css/properties/border-bottom-right-radius":{"SUMMARY":"<p>Defines the shape of the border of the bottom-right corner. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-bottom-right-radius","VALUES":[{"description":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href='https://docs.webplatform.org/wiki/css/data_types/length'>CSS &lt;length&gt; data types</a>. Negative values are invalid. ","value":"length "},{"description":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid. ","value":"percentage "}]},"css/properties/border-bottom-style":{"SUMMARY":"<p>Sets the style of an element's bottom border. To set all four borders, use the shorthand property,  <a href='https://docs.webplatform.org/wiki/css/properties/border-style'>border-style</a>. Otherwise, you can set the borders individually with <a href='https://docs.webplatform.org/wiki/css/properties/border-top-style'>border-top-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-style'>border-right-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-style'>border-bottom-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-left-style'>border-left-style</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-bottom-style","VALUES":[{"description":"<p>A single line segment. ","value":"solid "},{"description":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href='https://docs.webplatform.org/wiki/css/properties/background-image'>background-image</a>. ","value":"none "},{"description":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>.) ","value":"groove "},{"description":"<p>Same as <code>none</code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden</code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"<p>Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"<p>A series of round or square dots. ","value":"dotted "},{"description":"<p>Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"<p>A series of square-ended dashes. ","value":"dashed "},{"description":"<p>Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "}]},"css/properties/border-bottom-width":{"SUMMARY":"<p>Sets the width of an element's bottom border. To set all four borders, use the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> shorthand property which sets the values simultaneously for <a href='https://docs.webplatform.org/wiki/css/properties/border-top-width'>border-top-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-width'>border-right-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-width'>border-bottom-width</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/border-left-width'>border-left-width</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-bottom-width","VALUES":[{"description":"<p>Default.   ","value":"medium "},{"description":"<p>Less than the default width. ","value":"thin "},{"description":"<p>Greater than the default width. ","value":"thick "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"&lt;width&gt; "}]},"css/properties/border-collapse":{"SUMMARY":"<p>Border-collapse can be used for collapsing the borders between table cells. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-collapse","VALUES":[{"description":"<p>Adjacent borders and the space between them are collapsed into a single border. ","value":"collapse "},{"description":"<p>The same specified value as the property for the element's parent will be used. ","value":"inherit "},{"description":"<p>Default. Borders are detached (standard HTML). Each table cell has an individual border, with optional space between the borders. ","value":"separate "}]},"css/properties/border-color":{"SUMMARY":"<p>The CSS border-color property sets the color of an element's four borders. This property can have from one to four values, made up of the elementary properties:  <ul><li> <a href='https://docs.webplatform.org/wiki/css/properties/border-top-color'>border-top-color</a><li> <a href='https://docs.webplatform.org/wiki/css/properties/border-right-color'>border-right-color</a><li> <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-color'>border-bottom-color</a><li> <a href='https://docs.webplatform.org/wiki/css/properties/border-left-color'>border-left-color</a></ul><p>The default color is the currentColor of each of these values. <p>If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, respectively. Providing three values sets the top, vertical, and bottom values, in that order. Four values set all for sides: top, right, bottom, and left, in that order. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-color","VALUES":[{"description":"<p>The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"<p>Specify the color to use on all borders. This can be anywhere from one to four values representing the top, right, bottom, and left border respectively. ","value":"&lt;color&gt; "},{"description":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>This will apply a border that is not visible but it can have a width applied. ","value":"transparent "}]},"css/properties/border-corner-shape":{"SUMMARY":"<p>Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). Works along with border-radius to specify the size of each corner effect. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-corner-shape","VALUES":[{"description":"<p>Border radii define a convex curve at the corner (default behavior of border-radius). ","value":"curve "},{"description":"<p>Border radii define a diagonal slice at the corner. ","value":"bevel "},{"description":"<p>Border radii define a concave curve at the corner (informally called \"negative border-radius\") ","value":"scoop "},{"description":"<p>Border radii define a concave rectangular notch at the corner. ","value":"notch "}]},"css/properties/border-image":{"SUMMARY":"<p>Shorthand property that defines an image to be displayed and its positioning, instead of a solid color, for 'border' property. It can be used to set <a href='https://docs.webplatform.org/wiki/css/properties/border-image-source'><strong>border-image-source</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-image-slice'><strong>border-image-slice</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-image-width'><strong>border-image-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-image-outset'><strong>border-image-outset</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-image-repeat'><strong>border-image-repeat</strong></a>, or a subset of these. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-image","VALUES":[{"description":"<p>The <code>border-image</code> property can contain up to five components: <ul><li> <code>border-image-source</code>: This can take a valid <a href='https://docs.webplatform.org/wiki/css/functions/url()'>\"CSS images: url()\"</a> as its value.<li> <code>border-image-slice</code>: This takes any of the values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-image-slice'><strong>border-image-slice</strong></a> property, which includes &lt;number&gt;, &lt;percentage&gt; and <code>fill</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/border-image-slice'><strong>border-image-slice</strong></a> page.<li> <code>border-image-width</code>: This takes a numeric value with any of the standard length units.<li> <code>border-image-outset</code>: This takes a numeric value with any of the standard length units.<li> <code>border-image-repeat</code>: This takes any of the type of values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-image-repeat'><strong>border-image-repeat </strong></a> property, which includes <code>stretch</code>, <code>repeat</code>, <code>round</code> and <code>space</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/border-image-repeat'><strong>border-image-repeat</strong></a> page.</ul>","value":"border-image-source border-image-slice border-image-width border-image-outset border-image-repeat "}]},"css/properties/border-image-outset":{"SUMMARY":"<p>The <code>border-image-outset</code> property describes, by which amount the border image area extends beyond the border box. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-image-outset","VALUES":[{"description":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length). This length must not be negative. ","value":"&lt;length&gt; "}]},"css/properties/border-image-repeat":{"SUMMARY":"<p>The <code>border-image-repeat</code> CSS property defines how the middle part of a border image is handled to match the size of the border. It has a one-value syntax which describes the behavior for all sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-image-repeat","VALUES":[{"description":"<p>Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn't fit after having being repeated a whole number of times, the white space is distributed around the tiles. ","value":"space "},{"description":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>Is a keyword indicating that the image will be stretched to fit the gap between the borders. ","value":"stretch "},{"description":"<p>Is a keyword indicating that the image will be repeated until it fit the gap between the borders ","value":"repeat "},{"description":"<p>Is a keyword indicating that the image will be repeated until it fit the gap between the borders. If it doesn't fit after having being repeated an integer number of times, it is rescaled to do so. ","value":"round "}]},"css/properties/border-image-slice":{"SUMMARY":"<p>Divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-image-slice","VALUES":[{"description":"<p>Percentages values are relative to the height or width of the image, whichever is adequate. ","value":"&lt;percentage&gt; "},{"description":"<p>Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively. ","value":"fill "},{"description":"<p>Is a keyword indicating that all four values are inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>Represents pixels for raster images and coordinates for vector images. ","value":"&lt;number&gt; "}]},"css/properties/border-image-source":{"SUMMARY":"<p>The property <code>border-image-source</code> is used to set the image to be used instead of the border style. If this is set to <code>none</code> the <code>border-style</code> is used instead. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-image-source","VALUES":[{"description":"<p>Default. <code>border-style</code> is used instead. ","value":"none "},{"description":"<p>This value contains a path to an image that you want to apply to the element in question as a background image, using the CSS images syntax, as described at <a href='https://docs.webplatform.org/wiki/css/functions/url()'>\"CSS images: url()\"</a>. ","value":"url(path/to/image.png) "}]},"css/properties/border-image-width":{"SUMMARY":"<p>The <code>border-image-width</code> CSS property defines the offset to use for dividing the border image in nine parts, the top-left corner, central top edge, top-right-corner, central right edge, bottom-right corner, central bottom edge, bottom-left corner, and central right edge. They represent inward distance from the top, right, bottom, and left edges. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-image-width","VALUES":[{"description":"<p>Represents the percentage of the image slice relative to the height, or width, of the border image area. The percentage must not be negative. ","value":"&lt;percentage&gt; "},{"description":"<p>Represents a multiple of the computed value of the element's <code>border-width</code> property to be used as the image slice size. The number must not be negative. ","value":"&lt;number&gt; "},{"description":"<p>Indicates that the width, or height, of the image size must be the intrinsic size of that dimension. ","value":"auto "},{"description":"<p>Represents the length of the image slice. It can be an absolute or relative length. This length must not be negative. ","value":"&lt;length&gt; "}]},"css/properties/border-left":{"SUMMARY":"<p>Shorthand property that defines the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'><strong>border-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-color'><strong>border-color</strong></a> of an element's left border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the left border — <a href='https://docs.webplatform.org/wiki/css/properties/border-left-width'><strong>border-left-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-left-style'><strong>border-left-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-left-color'><strong>border-left-color</strong></a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-left","VALUES":[{"description":"<p>The <code>border-left</code> property can contain up to three components: <ul><li> <code>border-width</code>: This takes a numeric value with any of the standard length units.<li> <code>border-style</code>: This takes any of the range of style values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> property, which includes <code>none</code>, <code>hidden</code>, <code>dotted</code>, <code>dashed</code>, <code>solid</code>, <code>double</code>, <code>groove</code>, <code>ridge</code>, <code>inset</code>, <code>outset</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> page.<li> <code>color</code>: This can take any valid CSS color as its value.</ul>","value":"border-width border-style color "},{"description":"<p>When we set the value to <code>inherit</code>, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-left-color":{"SUMMARY":"<p>The CSS border-left-color property sets the color of an element's left border. This page explains the border-left-color value, but often you will find it more convenient to fix the border's left color as part of a shorthand set, either <a href='https://docs.webplatform.org/wiki/css/properties/border-left'>border-left</a> or <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>. <p><a href='https://docs.webplatform.org/wiki/css/data_types/color'>Colors</a> can be defined several ways. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-left-color#Usage'>Usage</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-left-color","VALUES":[{"description":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "},{"description":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-left-color#Usage'>Usage</a>. ","value":"&lt;color&gt; "},{"description":"<p>currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"<p>The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "}]},"css/properties/border-left-style":{"SUMMARY":"<p>Sets the style of an element's left border. To set all four borders, use the shorthand property,  <a href='https://docs.webplatform.org/wiki/css/properties/border-style'>border-style</a>. Otherwise, you can set the borders individually with <a href='https://docs.webplatform.org/wiki/css/properties/border-top-style'>border-top-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-style'>border-right-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-style'>border-bottom-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-left-style'>border-left-style</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-left-style","VALUES":[{"description":"<p>Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"<p>A single line segment. ","value":"solid "},{"description":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href='https://docs.webplatform.org/wiki/css/properties/background-image'>background-image</a>. ","value":"none "},{"description":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>.) ","value":"groove "},{"description":"<p>Same as <code>none</code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden</code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"<p>Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"<p>A series of round or square dots. ","value":"dotted "},{"description":"<p>Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"<p>A series of square-ended dashes. ","value":"dashed "}]},"css/properties/border-left-width":{"SUMMARY":"<p>Sets the width of an element's left border. To set all four borders, use the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> shorthand property which sets the values simultaneously for <a href='https://docs.webplatform.org/wiki/css/properties/border-top-width'>border-top-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-width'>border-right-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-width'>border-bottom-width</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/border-left-width'>border-left-width</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-left-width","VALUES":[{"description":"<p>Default.   ","value":"medium "},{"description":"<p>Less than the default width. ","value":"thin "},{"description":"<p>Greater than the default width. ","value":"thick "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"&lt;width&gt; "}]},"css/properties/border-radius":{"SUMMARY":"<p>The border-radius CSS property allows authors to round the corners of an element. The rounding can be different per-corner, and it could have different horizontal and vertical radii, to produce elliptical curves. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-radius","VALUES":[{"description":"<p>Specifying two sets of length values separated by a forward slash equates to specifying separate lengths for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have different lengths. Each set can consist of one, two, three or four values. ","value":"length / length "},{"description":"<p>Specifying two sets of percentage values separated by a forward slash equates to specifying separate percentages for the X and Y radii of the corners, resulting in elliptical corners if the X and Y radii have percentages resulting in different computed values (depending on the width and height of the element, different percentages might result in the same computed values; see the remarks section for more). Each set can consist of one, two, three or four values. ","value":"percentage / percentage "},{"description":"<p>Denotes the size of the circle radius or the horizontal and vertical radii, for elliptical curves. It can be expressed in any unit allowed in <a href='https://docs.webplatform.org/wiki/css/data_types/length'>CSS &lt;length&gt; data types</a>. em units are useful for controls that scale proportionally with the font-size. Viewport-relative units (vw, vh, vmin, vmax) can be useful for controls that scale with the viewport size. Negative values are invalid. You can specify a single length for all four corners, or two, three or four lengths to specify different lengths for different corners: see the syntax section for more details. ","value":"length "},{"description":"<p>Denotes the size of the corner radius, in percentages of the box’s border-box dimensions. Specifically, percentages for the horizontal axis refer to the width of the border-box, percentages for the vertical axis refer to the height of the border-box. Negative values are invalid. You can specify a single percentage for all four corners, or two, three or four percentages to specify different percentages for different corners: see the syntax section for more details. ","value":"percentage "}]},"css/properties/border-right":{"SUMMARY":"<p>Shorthand property that defines the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'><strong>border-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-color'><strong>border-color</strong></a> of an element's right border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the right border — <a href='https://docs.webplatform.org/wiki/css/properties/border-right-width'><strong>border-right-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-style'><strong>border-right-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-right-color'><strong>border-right-color</strong></a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-right","VALUES":[{"description":"<p>When we set the value to <code>inherit</code>, the element will inherit the border values set on its parent. ","value":"inherit "},{"description":"<p>The <code>border-right</code> property can contain up to three components: <ul><li> <code>border-width</code>: This takes a numeric value with any of the standard length units.<li> <code>border-style</code>: This takes any of the range of style values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> property, which includes <code>none</code>, <code>hidden</code>, <code>dotted</code>, <code>dashed</code>, <code>solid</code>, <code>double</code>, <code>groove</code>, <code>ridge</code>, <code>inset</code>, <code>outset</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> page.<li> <code>color</code>: This can take any valid CSS color as its value.</ul>","value":"border-width border-style color "}]},"css/properties/border-right-color":{"SUMMARY":"<p>Sets the color of an element's right border. This page explains the border-right-color value, but often you will find it more convenient to fix the border's right color as part of a shorthand set, either <a href='https://docs.webplatform.org/wiki/css/properties/border-right'>border-right</a> or <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>. <p><a href='https://docs.webplatform.org/wiki/css/data_types/color'>Colors</a> can be defined several ways. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-right-color#Usage'>Usage</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-right-color","VALUES":[{"description":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-right-color#Usage'>Usage</a>. ","value":"&lt;color&gt; "},{"description":"<p>currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"<p>The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "}]},"css/properties/border-right-style":{"SUMMARY":"<p>Sets the style of an element's right border. To set all four borders, use the shorthand property,  <a href='https://docs.webplatform.org/wiki/css/properties/border-style'>border-style</a>. Otherwise, you can set the borders individually with <a href='https://docs.webplatform.org/wiki/css/properties/border-top-style'>border-top-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-style'>border-right-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-style'>border-bottom-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-left-style'>border-left-style</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-right-style","VALUES":[{"description":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href='https://docs.webplatform.org/wiki/css/properties/background-image'>background-image</a>. ","value":"none "},{"description":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>.) ","value":"groove "},{"description":"<p>Same as <code>none</code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden</code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"<p>Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"<p>A series of round or square dots. ","value":"dotted "},{"description":"<p>Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"<p>A series of square-ended dashes. ","value":"dashed "},{"description":"<p>Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"<p>A single line segment. ","value":"solid "}]},"css/properties/border-right-width":{"SUMMARY":"<p>Sets the width of an element's right border. To set all four borders, use the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> shorthand property which sets the values simultaneously for <a href='https://docs.webplatform.org/wiki/css/properties/border-top-width'>border-top-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-width'>border-right-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-width'>border-bottom-width</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/border-left-width'>border-left-width</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-right-width","VALUES":[{"description":"<p>Less than the default width. ","value":"thin "},{"description":"<p>Greater than the default width. ","value":"thick "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"&lt;width&gt; "},{"description":"<p>Default.   ","value":"medium "}]},"css/properties/border-spacing":{"SUMMARY":"<p>Specifies the distance between the borders of adjacent cells. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-spacing","VALUES":[{"description":"<p>The distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative. ","value":"length "},{"description":"<p>The same specified value as the property for the element's parent will be used. ","value":"inherit "}]},"css/properties/border-style":{"SUMMARY":"<p>Sets the style of an element's four borders. This property can have from one to four values. With only one value, the value will be applied to all four borders; otherwise, this works as a shorthand property for each of <a href='https://docs.webplatform.org/wiki/css/properties/border-top-style'>border-top-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-style'>border-right-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-style'>border-bottom-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-left-style'>border-left-style</a>, where each border style may be assigned a separate value. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-style","VALUES":[{"description":"<p>Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"<p>A series of round dots. ","value":"dotted "},{"description":"<p>Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"<p>A series of square-ended dashes. ","value":"dashed "},{"description":"<p>Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"<p>A single line segment. ","value":"solid "},{"description":"<p>Shorthand values syntax. ","value":"&lt;border-top-style&gt; &lt;border-right-style&gt; &lt;border-bottom-style&gt; &lt;border-left-style&gt; "},{"description":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href='https://docs.webplatform.org/wiki/css/properties/background-image'>background-image</a>. ","value":"none "},{"description":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>.) ","value":"groove "},{"description":"<p>Same as <code>none</code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden</code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "}]},"css/properties/border-top":{"SUMMARY":"<p>Shorthand property that defines the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'><strong>border-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-color'><strong>border-color</strong></a> of an element's top border in a single declaration. Note that you can use the corresponding longhand properties to set specific individual properties of the top border — <a href='https://docs.webplatform.org/wiki/css/properties/border-top-width'><strong>border-top-width</strong></a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-top-style'><strong>border-top-style</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/border-top-color'><strong>border-top-color</strong></a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-top","VALUES":[{"description":"<p>The <code>border-top</code> property can contain up to three components: <ul><li> <code>border-width</code>: This takes a numeric value with any of the standard length units.<li> <code>border-style</code>: This takes any of the range of style values available to the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> property, which includes <code>none</code>, <code>hidden</code>, <code>dotted</code>, <code>dashed</code>, <code>solid</code>, <code>double</code>, <code>groove</code>, <code>ridge</code>, <code>inset</code>, <code>outset</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/border-style'><strong>border-style</strong></a> page.<li> <code>color</code>: This can take any valid CSS color as its value.</ul>","value":"border-width border-style color "},{"description":"<p>When we set the value to <code>inherit</code>, the element will inherit the border values set on its parent. ","value":"inherit "}]},"css/properties/border-top-color":{"SUMMARY":"<p>Sets the color of an element's top border. This page explains the border-top-color value, but often you will find it more convenient to fix the border's top color as part of a shorthand set, either <a href='https://docs.webplatform.org/wiki/css/properties/border-top'>border-top</a> or <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>. <p><a href='https://docs.webplatform.org/wiki/css/data_types/color'>Colors</a> can be defined several ways. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-top-color#Usage'>Usage</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-top-color","VALUES":[{"description":"<p>The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see <a href='https://docs.webplatform.org/wiki/css/properties/border-top-color#Usage'>Usage</a>. ","value":"&lt;color&gt; "},{"description":"<p>currentColor, the color value inherited from parent object. ","value":"inherit "},{"description":"<p>The same as ‘color: inherit’, the color value inherited from parent object. ","value":"currentColor "},{"description":"<p>Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. ","value":"transparent "}]},"css/properties/border-top-left-radius":{"SUMMARY":"<p>Sets the rounding of the top-left corner of the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-top-left-radius","VALUES":[{"description":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid. ","value":"percentage "},{"description":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href='https://docs.webplatform.org/wiki/css/data_types/length'>CSS &lt;length&gt; data types</a>. Negative values are invalid. ","value":"length "}]},"css/properties/border-top-right-radius":{"SUMMARY":"<p>Sets the rounding of the top-right corner of the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-top-right-radius","VALUES":[{"description":"<p>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the <a href='https://docs.webplatform.org/wiki/css/data_types/length'>CSS &lt;length&gt; data types</a>. Negative values are invalid. ","value":"length "},{"description":"<p>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid. ","value":"percentage "}]},"css/properties/border-top-style":{"SUMMARY":"<p>Sets the style of an element's top border. To set all four borders, use the shorthand property,  <a href='https://docs.webplatform.org/wiki/css/properties/border-style'>border-style</a>. Otherwise, you can set the borders individually with <a href='https://docs.webplatform.org/wiki/css/properties/border-top-style'>border-top-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-style'>border-right-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-style'>border-bottom-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-left-style'>border-left-style</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-top-style","VALUES":[{"description":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href='https://docs.webplatform.org/wiki/css/properties/border-color'>border-color</a>.) ","value":"groove "},{"description":"<p>Same as <code>none</code>, except in terms of conflict resolution of collapsed borders. Any element with a <code>hidden</code> border suppresses all shared borders at that location. Borders with a style of none have the lowest priority. ","value":"hidden "},{"description":"<p>Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"<p>A series of round or square dots. ","value":"dotted "},{"description":"<p>Looks as if the content on the inside of the border is sunken into the canvas. ","value":"inset "},{"description":"<p>A series of square-ended dashes. ","value":"dashed "},{"description":"<p>Looks as if the content on the inside of the border is coming out of the canvas. ","value":"outset "},{"description":"<p>A single line segment. ","value":"solid "},{"description":"<p>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> value. The border width must be at least 3 pixels wide to draw a double border. ","value":"double "},{"description":"<p>Default. Border is not drawn, color and width are ignored. If the border is an image, the image layer counts but is not drawn. See <a href='https://docs.webplatform.org/wiki/css/properties/background-image'>background-image</a>. ","value":"none "}]},"css/properties/border-top-width":{"SUMMARY":"<p>Sets the width of an element's top border. To set all four borders, use the <a href='https://docs.webplatform.org/wiki/css/properties/border-width'>border-width</a> shorthand property which sets the values simultaneously for <a href='https://docs.webplatform.org/wiki/css/properties/border-top-width'>border-top-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-width'>border-right-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-width'>border-bottom-width</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/border-left-width'>border-left-width</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-top-width","VALUES":[{"description":"<p>Greater than the default width. ","value":"thick "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"&lt;width&gt; "},{"description":"<p>Default.   ","value":"medium "},{"description":"<p>Less than the default width. ","value":"thin "}]},"css/properties/border-width":{"SUMMARY":"<p>Sets the width of an element's four borders. This property can have from one to four values. This is a shorthand property for setting values simultaneously for <a href='https://docs.webplatform.org/wiki/css/properties/border-top-width'>border-top-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-right-width'>border-right-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border-bottom-width'>border-bottom-width</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/border-left-width'>border-left-width</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/border-width","VALUES":[{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see <a href='https://docs.webplatform.org/wiki/http://www.w3.org/TR/css3-background/#the-border-width'>CSS Values and Units Reference</a>. ","value":"&lt;width&gt; "},{"description":"<p>Shorthand syntax. See notes below. ","value":"&lt;border-top-width&gt; &lt;border-right-width&gt; &lt;border-bottom-width&gt; &lt;border-left-width&gt; "},{"description":"<p>Default.   ","value":"medium "},{"description":"<p>Less than the default width. ","value":"thin "},{"description":"<p>Greater than the default width. ","value":"thick "}]},"css/properties/bottom":{"SUMMARY":"<p>Sets the position of the bottom edge of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/bottom","VALUES":[{"description":"<p>Default. Default position, according to the regular HTML layout of the page. ","value":"auto "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"<p>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object. ","value":"percentage "}]},"css/properties/box-align":{"SUMMARY":"<p>Obsolete. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-align","VALUES":[{"description":"<p>Default. Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the <a href='https://docs.webplatform.org/wiki/css/properties/max-width'><strong>max-width</strong></a> or <a href='https://docs.webplatform.org/wiki/css/properties/max-height'><strong>max-height</strong></a> property for a child element takes precedence and layout follows the  <code>before</code> rule. ","value":"stretch "},{"description":"<p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-direction'><strong>-ms-box-direction</strong></a> of <code>normal</code>, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-direction'><strong>-ms-box-direction</strong></a> of <code>reverse</code>, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. ","value":"before "},{"description":"<p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-direction'><strong>-ms-box-direction</strong></a> of <code>normal</code>, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-direction'><strong>-ms-box-direction</strong></a> of <code>reverse</code>, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. ","value":"after "},{"description":"<p>Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child. ","value":"middle "},{"description":"<p>The baselines (leading edge or trailing edge depending on the <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-direction'><strong>-ms-box-direction</strong></a> property)  of all child elements are aligned with each other.  <p>The child element that occupies the most space, perpendicular to the layout axis, follows the <code>before</code> rule; the baselines of all remaining elements are then aligned with the baseline of this element. ","value":"baseline "}]},"css/properties/box-decoration-break":{"SUMMARY":"<p>Breaks a box into fragments creating new borders, padding and repeating backgrounds or lets it stay as a continuous box on a page break, column break, or, for inline elements, at a line break. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-decoration-break","VALUES":[{"description":"<p>Each box fragment is independently wrapped with the border and padding. The <code>border-radius</code> and <code>border-image</code> and <code>box-shadow</code>, if any, are applied to each fragment independently. The background is drawn independently in each fragment of the element. A no-repeat background image will thus be rendered once in each fragment of the element. ","value":"clone "},{"description":"<p>No border and no padding are inserted at a break. No box-shadow is drawn at a broken edge; <code>border-radius</code> does not apply to its corners; and the <code>border-image</code> is rendered for the whole box as if it were unbroken. The effect is as though the element were rendered with no breaks present, and then sliced by the breaks afterward. Backgrounds are drawn as if, after the element has been laid out (including any justification, reordering, page breaks, etc.), all the element's box fragments were taken and put one after the other in visual order. The background is applied to the bounding box of this composite box and then the fragments are put back, with each with its share of the background. ","value":"slice "}]},"css/properties/box-direction":{"SUMMARY":"<p>Deprecated ","URL":"https://docs.webplatform.org/wiki/css/properties/box-direction","VALUES":[{"description":"<p>Default.  Child elements are displayed in the same order that they are declared in the source document.  <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-orient'><strong>-ms-box-orient</strong></a> of <code>horizontal</code>, the child elements are displayed from left to right.  <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-orient'><strong>-ms-box-orient</strong></a> of <code>vertical</code>, the child elements are displayed from top to bottom. ","value":"normal "},{"description":"<p>Child elements are displayed in the reverse order that they are declared in the source document.  <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-orient'><strong>-ms-box-orient</strong></a> of <code>horizontal</code>, the child elements are displayed from right to left.  <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-orient'><strong>-ms-box-orient</strong></a> of <code>vertical</code>, the child elements are displayed from bottom to top. ","value":"reverse "},{"description":"<p>Child elements are displayed in the same order as the computed value of this property for the parent element. ","value":"inherit "}]},"css/properties/box-flex":{"SUMMARY":"<p>Do not use. This property has been replaced by the <a href='https://docs.webplatform.org/wiki/flex'>flex</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-flex","VALUES":[{"description":"<p>A floating point value that indicates the relative flexibility of a child element. <p>A value of <code>0.0</code> indicates the element is not flexible. Any other value indicates the relative flexiblity of the child element compared to the flexibility of other child elements. <p>A negative value is not valid. ","value":"integer "}]},"css/properties/box-line-progression":{"SUMMARY":"<p>Do not use. This property has been replaced by the <a href='https://docs.webplatform.org/wiki/flex-wrap'>flex-wrap</a> property.  <p>Gets or sets a value that specifies the direction to add successive rows or columns when the value of <a href='https://docs.webplatform.org/wiki/box-lines'>box-lines</a> is set to multiple. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-line-progression","VALUES":[{"description":"<p>Default.  Successive rows or columns of child elements flow in the direction specified by the <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'><strong>writing-mode</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-lines'><strong>-ms-box-lines</strong></a> properties. ","value":"normal "},{"description":"<p>Successive rows or columns of child elements flow in the reverse direction specified by the <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'><strong>writing-mode</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/box-lines'><strong>box-lines</strong></a> properties. ","value":"reverse "}]},"css/properties/box-lines":{"SUMMARY":"<p>Do not use. This property has been replaced by the <a href='https://docs.webplatform.org/wiki/flex-wrap'>flex-wrap</a> property. <p>Gets or sets a value that specifies whether child elements wrap onto multiple lines or columns based on the space available in the object. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-lines","VALUES":[{"description":"<p>Default.  All child elements are displayed in a single row or column. The <a href='https://docs.webplatform.org/wiki/css/properties/overflow'><strong>overflow</strong></a> property of the object determines whether the child elements are hidden, clipped, or scrollable. ","value":"single "},{"description":"<p>Child elements are wrapped and displayed in successive, parallel rows or columns. The object expands in height or width, perpendicular to the axis defined by the <a href='https://docs.webplatform.org/wiki/css/properties/ms-box-orient'><strong>-ms-box-orient</strong></a> property, to accommodate the additional rows or columns. ","value":"multiple "}]},"css/properties/box-ordinal-group":{"SUMMARY":"<p>Do not use. This property has been replaced by <a href='https://docs.webplatform.org/wiki/flex-order'>flex-order</a>. <p>Specifies the ordinal group that a child element of the object belongs to. This ordinal value identifies the display order (along the axis defined by the <a href='https://docs.webplatform.org/wiki/box-orient'>box-orient</a> property) for the group. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-ordinal-group","VALUES":[{"description":"<p>Integer value that identifies the group that a child element belongs to. ","value":"integer "}]},"css/properties/box-orient":{"SUMMARY":"<p>Deprecated ","URL":"https://docs.webplatform.org/wiki/css/properties/box-orient","VALUES":[{"description":"<p>Child elements are displayed in a vertical stack from top to bottom. ","value":"vertical "},{"description":"<p>Default.  Child elements are displayed along the inline axis. ","value":"inline-axis "},{"description":"<p>Child elements are displayed along the block axis. ","value":"block-axis "},{"description":"<p>Child elements are displayed in the same orientation as the computed value of this property for the parent element. ","value":"inherit "},{"description":"<p>Child elements are displayed in a horizontal line from left to right. ","value":"horizontal "}]},"css/properties/box-pack":{"SUMMARY":"<p>Do not use. This property has been replaced by <a href='https://docs.webplatform.org/wiki/flex-pack'>flex-pack</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-pack","VALUES":[{"description":"<p>The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis. ","value":"start "},{"description":"<p>The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis. ","value":"end "},{"description":"<p>All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element. ","value":"center "},{"description":"<p>The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements. ","value":"justify "}]},"css/properties/box-shadow":{"SUMMARY":"<p>The <code>box-shadow</code> property programmatically creates one or more shadows on the inside or outside of a block level element. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-shadow","VALUES":[{"description":"<p>The third length is a blur radius, which can be a number of any length unit. The larger this value, the bigger the blur, meaning the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it defaults to 0 (the shadow's edge is sharp). ","value":"blur-radius (optional) "},{"description":"<p>The fourth length is a spread distance, which again can be a number of any unit. Positive values cause the shadow to expand and grow bigger, negative values cause the shadow to shrink. If not specified, it defaults to 0 (the shadow is the same size as the element). Note that setting the size of an outer shadow to 0 causes it to disappear, whereas a 0-sized inner shadow covers the entire padding-box. For inner shadows, expanding the shadow (creating more shadow area) means contracting the shadow's perimeter shape. ","value":"spread-distance (optional) "},{"description":"<p>To apply multiple shadows to one element, write the <code>box-shadow</code> values out one after another, separated by commas. ","value":"offset-x offset-y blur-radius color, offset-x offset-y blur-radius color "},{"description":"<p>If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the <code>inset</code> keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. ","value":"inset (optional) "},{"description":"<p>The first length is the horizontal offset of the shadow — offset-x specifies the horizontal offset of the shadow, which can be a number of any length unit. Positive values place the shadow to the right of the element, and negative values to the left. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element. ","value":"offset-x (optional) "},{"description":"<p>The second length is the vertical offset of the shadow — offset-y specifies the vertical offset of the shadow, which can be a number of any length unit. Positive values place the shadow below the element, and negative values above. If both offset-x and offset-y values are 0, the shadow is placed directly behind the element. ","value":"offset-y (optional) "}]},"css/properties/box-sizing":{"SUMMARY":"<p>The <code>box-sizing</code> property alters the CSS box model used to calculate widths and heights of elements, so that they can be equal to the width and height of the content-, padding- or border-box. ","URL":"https://docs.webplatform.org/wiki/css/properties/box-sizing","VALUES":[{"description":"<p>The <code>width</code> and <code>height</code> properties (also including <code>min-width</code>, <code>max-width</code>, <code>min-height</code> and <code>max-height</code> properties) are calculated as the width/height of the content, but not the border, margin, or padding. This is the traditional behaviour of width and height as specified by CSS2.1. ","value":"content-box "},{"description":"<p>The <code>width</code> and <code>height</code> (also including <code>min-width</code>, <code>max-width</code>, <code>min-height</code> and <code>max-height</code> properties) of an element are calculated as the width/height of the content plus the <code>padding</code>. The dimensions of the content alone are thus calculated by subtracting the padding widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0. ","value":"padding-box "},{"description":"<p>The <code>width</code> and <code>height</code> (also including <code>min-width</code>, <code>max-width</code>, <code>min-height</code> and <code>max-height</code> properties) of an element are calculated as the width/height of the content plus the <code>padding</code> and <code>border</code>. The dimensions of the content alone are thus calculated by subtracting the padding and border widths from each side of the element. Dimension properties are set to 0 if the calculated value is less than 0. ","value":"border-box "}]},"css/properties/break-after":{"SUMMARY":"<p>The CSS break-after property allows you to force a break on multi-column layouts. More specifically, it allows you to force a break after an element. It allows you to determine if a break should occur, and what type of break it should be. The break-after CSS property describes how the page, column or region break behaves after the generated box. If there is no generated box, the property is ignored. ","URL":"https://docs.webplatform.org/wiki/css/properties/break-after","VALUES":[{"description":"<p>A page break is not allowed after the content block. ","value":"avoid-page "},{"description":"<p>A page/column/region break is not allowed after the content block. ","value":"avoid "},{"description":"<p>A column break is not allowed after the content block. ","value":"avoid-column "},{"description":"<p>A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the \"left\" page that immediately follows the current page (according to the paging format of the document). ","value":"left "},{"description":"<p>A <a href='https://docs.webplatform.org/wiki/css/concepts/region'>region</a> break is inserted (forced) after the content block. ","value":"region "},{"description":"<p>A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the \"right\" page that immediately follows the current page (according to the paging format of the document). ","value":"right "},{"description":"<p>A <a href='https://docs.webplatform.org/wiki/css/concepts/region'>region</a> break is not allowed after the content block. ","value":"avoid-region "},{"description":"<p>A page break is inserted (forced) after the content block, causing the flow of content to continue in the first column of the page that immediately follows the current page (according to the paging format of the document). ","value":"page "},{"description":"<p>Default. A page break or column break is determined  by the flow of content. ","value":"auto "},{"description":"<p>A column break is inserted (forced) after the content block. ","value":"column "},{"description":"<p>A page/column/region break is inserted (forced) after the content block. ","value":"always "}]},"css/properties/break-before":{"SUMMARY":"<p>Control page/column/region breaks that fall above a block of content ","URL":"https://docs.webplatform.org/wiki/css/properties/break-before","VALUES":[{"description":"<p>A page break is not allowed before the content block. ","value":"avoid-page "},{"description":"<p>A page/column/region break is not allowed before the content block. ","value":"avoid "},{"description":"<p>A column break is not allowed before the content block. ","value":"avoid-column "},{"description":"<p>A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the \"left\" page that immediately follows the current page (according to the paging format of the document). ","value":"left "},{"description":"<p>A <a href='https://docs.webplatform.org/wiki/css/concepts/region'>region</a> break is inserted (forced) before the content block. ","value":"region "},{"description":"<p>A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the \"right\" page that immediately follows the current page (according to the paging format of the document). ","value":"right "},{"description":"<p>A <a href='https://docs.webplatform.org/wiki/css/concepts/region'>region</a> break is not allowed before the content block. ","value":"avoid-region "},{"description":"<p>A page break is inserted (forced) before the content block such that the flow of content continues in the first column of the page that immediately follows the current page (according to the paging format of the document). ","value":"page "},{"description":"<p>Default. A page break or column break is determined by the flow of content. ","value":"auto "},{"description":"<p>A column break is inserted (forced) before the content block. ","value":"column "},{"description":"<p>A page break is inserted (forced) before the content block. ","value":"always "}]},"css/properties/break-inside":{"SUMMARY":"<p>Control page/column/region breaks that fall within a block of content ","URL":"https://docs.webplatform.org/wiki/css/properties/break-inside","VALUES":[{"description":"<p>A page/column/region break is not allowed within the content block. ","value":"avoid "},{"description":"<p>A page break is not allowed within the content block. ","value":"avoid-page "},{"description":"<p>A column break is not allowed within the content block. ","value":"avoid-column "},{"description":"<p>A <a href='https://docs.webplatform.org/wiki/css/concepts/region'>region</a> break is not allowed within the content block. ","value":"avoid-region "},{"description":"<p>Default. A page/column/region break is determined  by the flow of content. ","value":"auto "}]},"css/properties/caption-side":{"SUMMARY":"<p>Specifies the placement of a table caption. ","URL":"https://docs.webplatform.org/wiki/css/properties/caption-side","VALUES":[{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>Positions the caption box above the table box. ","value":"top "},{"description":"<p>Positions the caption box below the table box. ","value":"bottom "}]},"css/properties/clear":{"SUMMARY":"<p>The <strong>clear</strong> CSS property specifies if an element can be positioned next to or must be positioned below the <a href='https://docs.webplatform.org/wiki/css/properties/float'>floating</a> elements that precede it in the markup. ","URL":"https://docs.webplatform.org/wiki/css/properties/clear","VALUES":[{"description":"<p>May have adjacent floats on both the left and right sides. ","value":"none "},{"description":"<p>Floated elements that precede the cleared element are not allowed to the left of the cleared element. The cleared element must move below the floated element. ","value":"left "},{"description":"<p>Floated elements that precede the cleared element are not allowed to the right of the cleared element. The cleared element must move below the floated element. ","value":"right "},{"description":"<p>Floated elements that precede the cleared element are not allowed to be adjacent to the cleared element. The cleared element must move below the floated elements. ","value":"both "},{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "}]},"css/properties/clip":{"SUMMARY":"<p><strong>Deprecated; see <a href='https://docs.webplatform.org/wiki/css/properties/clip-path'>clip-path</a>.</strong> <p>Lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed. ","URL":"https://docs.webplatform.org/wiki/css/properties/clip","VALUES":[{"description":"<p>Default. Clip to expose entire object. ","value":"auto "},{"description":"<p>Top, right, bottom, and left specify length values, any of which can be replaced by <strong>auto</strong>, leaving that side not clipped. The value of top specifies that everything above this value on the Y axis (with 0 at the top) is clipped. The value of right specifies that everything above this value on the X axis (with 0 at the left) is clipped. The value of bottom specifies that everything below this value on the Y axis (with 0 at the top) is clipped. The value of left specifies that everything to the left of this value on the X axis (with 0 at the left) is clipped. ","value":"rect(top, right, bottom, left) "}]},"css/properties/clip-path":{"SUMMARY":"<p>The clip-path property prevents a portion of an element from drawing by defining a clipping region. ","URL":"https://docs.webplatform.org/wiki/css/properties/clip-path","VALUES":[{"description":"<p>The shape is computed based on the values of one of <em>inset, circle, ellipse</em> or <em>polygon</em>.  If shape-box is not supplied, then the reference box defaults to margin-box. <ul><li> <code>inset(&lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;])</code>. Defines an inset rectangle. The basic syntax for inset is the same as the margin shorthand syntax (see <a href='https://docs.webplatform.org/wiki/css/properties/margin'>margin</a> for details).  The optional border-radius argument  defines an inset's rounded corners using the border-radius shorthand syntax (see <a href='https://docs.webplatform.org/wiki/css/properties/border-radius'>border-radius</a> for details).</ul><ul><li> <code>circle([&lt;shape-radius&gt;] [at &lt;position&gt;])</code> The shape-radius argument is the radius of the circle. The position argument defines the center point of the circle and has the same syntax as background-position (see <a href='https://docs.webplatform.org/wiki/css/properties/background-position'>background-position</a> for details).</ul><ul><li> <code>ellipse([&lt;shape-radius&gt;{2}] [at &lt;position&gt;])</code> The shape-radius argument is the radius of the circle. The position argument defines the center point of the circle and has the same syntax as background-position (see <a href='https://docs.webplatform.org/wiki/css/properties/background-position'>background-position</a> for details).</ul><ul><li> <code>polygon([&lt;fill-rule&gt;,] [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code> The fill-rule is used to determine the interior of the polygon (see the SVG <a href='https://docs.webplatform.org/wiki/svg/attributes/fill-rule'>fill-rule</a> for details). Each pair in the shape-arg represents x and y coordinates of each vertex in the polygon.</ul>","value":"&lt;basic-shape&gt; "},{"description":"<p>The <code>&lt;clip-source&gt;</code> value may be one of the following. <ul><li> <code>&lt;url&gt;</code> A URL reference to a <code>&lt;clipPath&gt;</code> element.<li> <code>child</code> A keyword to indicate that the last direct child <code>&lt;clipPath&gt;</code> element of the element to which the <code>clip-path</code> property is applied should be used as the clip source. Equivalent to <code>select(clipPath:last-of-type)</code>.<li> <code>&lt;child-selector&gt;</code> A functional notation accepting a comma-separated list of compound selectors that represents the first matching <code>&lt;clipPath&gt;</code> element in tree order (as defined in <a href='http://dev.w3.org/fxtf/masking/#DOM'>DOM</a>).</ul>","value":"&lt;clip-source&gt; "},{"description":"<p>No clipping path is created. ","value":"none "}]},"css/properties/clip-rule":{"SUMMARY":"<p>Clipping crops an graphic, so that only a portion of the graphic is rendered, or filled. This clip-rule property, when used with the <a href='https://docs.webplatform.org/wiki/css/properties/clipPath'>clipPath</a> property, defines which clip rule, or algorithm, to use when filling the different parts of a graphics. ","URL":"https://docs.webplatform.org/wiki/css/properties/clip-rule","VALUES":[{"description":"<p>This value defines whether a point is inside or outside the path by drawing a ray from that point to infinity in any direction and counting the number of  shape segments that the ray crosses. If the count is odd, the point is inside; if even, the point is outside. <p>See <a href='http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty'>SVG fill-rule property</a> for details. ","value":"evenodd "},{"description":"<p>This value defines whether a point is inside or outside the path by drawing a ray from that point to infinity in any direction and counting the places where a shape segment crosses the ray in a specific direction. When a segment crosses the ray from left to right, the count is incremented; when a segment crosses the ray from right to left, the count is decremented. If the count is zero, the point is outside; if non-zero, it is inside. <p>See <a href='http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty'>SVG fill-rule property</a> for details. ","value":"nonzero "}]},"css/properties/color":{"SUMMARY":"<p>The color property sets the color of an element's foreground content (usually text), accepting any standard CSS color from keywords and hex values to RGB(a) and HSL(a). ","URL":"https://docs.webplatform.org/wiki/css/properties/color","VALUES":[{"description":"<p><a href='https://docs.webplatform.org/wiki/css/color'>CSS color value</a> ","value":"color "}]},"css/properties/column-count":{"SUMMARY":"<p>Specifies the number of columns an element should be divided into. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-count","VALUES":[{"description":"<p>An integer value that specifies the number of columns in the multi-column element. Values must be greater than 0. When <a href='https://docs.webplatform.org/wiki/css/properties/column-width'><strong>column-width</strong></a> is specified with <a href='https://docs.webplatform.org/wiki/css/properties/column-count'><strong>column-count</strong></a> and both have non-auto values, the integer value defines the maximum number of columns. ","value":"count "},{"description":"<p>The number of columns is determined by the values of other property values of the multi-column element, such as <a href='https://docs.webplatform.org/wiki/css/properties/column-width'><strong>column-width</strong></a>. ","value":"auto "}]},"css/properties/column-fill":{"SUMMARY":"<p>Specifies how to fill columns (balanced or sequential). ","URL":"https://docs.webplatform.org/wiki/css/properties/column-fill","VALUES":[{"description":"<p>Columns are filled sequentially such that the column heights are balanced as equally as possible, depending on other column property values. ","value":"balance "},{"description":"<p>Columns are filled sequentially such that the columns may differ in length, depending on other column property values. ","value":"auto "}]},"css/properties/column-gap":{"SUMMARY":"<p>The <code>column-gap</code> property controls the width of the gap between columns in multi-column elements. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-gap","VALUES":[{"description":"<p>Default. The width of the <code>normal</code> value is user-agent specific, but <code>1em</code> is suggested. ","value":"normal "},{"description":"<p>A floating-point number, followed by either an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>), that indicates the width of the gap between columns. For more information about the supported length units, see CSS Length Units Reference. <p><br>Negative values are not valid. ","value":"length "}]},"css/properties/column-rule":{"SUMMARY":"<p>Sets the width, style, and color of the rule between columns. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-rule","VALUES":[{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/column-rule-style'><strong>column-rule-style</strong></a> property. ","value":"column-rule-style "},{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/column-rule-color'><strong>column-rule-color</strong></a> property. ","value":"column-rule-color "},{"description":"<p>Indicates rule is transparent. ","value":"transparent "},{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/column-rule-width'><strong>column-rule-width</strong></a> property. ","value":"column-rule-width "}]},"css/properties/column-rule-color":{"SUMMARY":"<p>Specifies the color of the rule between columns. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-rule-color","VALUES":[{"description":"<p>One of the color names, RGB, RGBA, HSL, or HSLA values in the <a href='https://docs.webplatform.org/wiki/css/color/color table'>Color Table</a>. ","value":"color "}]},"css/properties/column-rule-style":{"SUMMARY":"<p>Specifies the style of the rule between columns. The column-rule-style values are the same as for border-style. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-rule-style","VALUES":[{"description":"<p>Column rule is a dotted line. ","value":"dotted "},{"description":"<p>3-D groove is drawn in colors slightly lighter and darker than the value. ","value":"groove "},{"description":"<p>Column rule is a dashed line. ","value":"dashed "},{"description":"<p>3-D ridge is drawn in colors based on the value. ","value":"ridge "},{"description":"<p>Column rule is a solid line. ","value":"solid "},{"description":"<p>3-D inset is drawn in colors based on the value. ","value":"inset "},{"description":"<p>Column rule is two parallel solid lines with a space between. The sum of the two single lines and the space between equals the <code>column-rule-width</code> value. The column rule width must be at least 3 pixels wide to draw a double rule. ","value":"double "},{"description":"<p>3-D outset is drawn in colors based on the value. ","value":"outset "},{"description":"<p>Same as <code>none</code>. ","value":"hidden "},{"description":"<p>Default. No column rule is drawn, regardless of any specified <code>column-rule-width</code>. The computed value is set to 0. ","value":"none "}]},"css/properties/column-rule-width":{"SUMMARY":"<p>Specifies the width of the rule between columns. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-rule-width","VALUES":[{"description":"<p>Default. A medium width border. ","value":"medium "},{"description":"<p>Width less than the default. ","value":"thin "},{"description":"<p>Width greater than the default. ","value":"thick "},{"description":"<p>Width consisting of a floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>) ","value":"width "},{"description":"<p>If the column rule style is ‘none’ or ‘hidden’ ","value":"0 "}]},"css/properties/column-span":{"SUMMARY":"<p>The <code>column-span</code> CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-span","VALUES":[{"description":"<p>The content block spans all columns on a page. All content that is declared before the content block is shown before the content block. ","value":"all "},{"description":"<p>Default. The content block does not span multiple columns. ","value":"none "}]},"css/properties/column-width":{"SUMMARY":"<p>Specifies the width of columns in multi-column elements. ","URL":"https://docs.webplatform.org/wiki/css/properties/column-width","VALUES":[{"description":"<p>A floating-point number, followed by either an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>rem</code>, <code>em</code>, <code>ex</code>, or <code>px</code>), that indicates the optimal width. For more information about the supported length units, see CSS Length Units Reference. ","value":"length "},{"description":"<p>Default. The optimal column width is determined through other property values of the multi-column element, such as <a href='https://docs.webplatform.org/wiki/css/properties/column-count'><strong>columnCount</strong></a>. ","value":"auto "}]},"css/properties/columns":{"SUMMARY":"<p>This property is a shorthand property for setting <a href='https://docs.webplatform.org/wiki/css/properties/column-width'>column-width</a> and/or <a href='https://docs.webplatform.org/wiki/css/properties/column-count'>column-count</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/columns","VALUES":[{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/column-count'>column-count</a> property. ","value":"column-count "},{"description":"<p>Any of the values available to <a href='https://docs.webplatform.org/wiki/css/properties/column-width'>column-width</a> property. ","value":"column-width "}]},"css/properties/content":{"SUMMARY":"<p>The content property is used to display content in the pseudo-elements ::before and ::after. ","URL":"https://docs.webplatform.org/wiki/css/properties/content","VALUES":[{"description":"<p>Sets the content to be the appropriate string from the quotes property. ","value":"open-quote "},{"description":"<p>Pseudo element is not generated. ","value":"none "},{"description":"<p>Sets the content to be the appropriate string from the quotes property. ","value":"close-quote "},{"description":"<p>Equivalent to \"none\" for :before and :after pseudo-elements, which are the only places the content property currently applies. ","value":"normal "},{"description":"<p>If set, removes the opening quote from the content. ","value":"no-open-quote "},{"description":"<p>Text content, in either double quotation marks (\") or single quotation marks (').  <p>Double quotation marks cannot occur inside other double quotation marks, unless they are preceded by a backslash (\\) escape character. For example, the string <code>\"\\\"\"</code> is interpreted as containing one double quotation character. <p>It is possible to break strings over several lines, for esthetic or other reasons, by use of the backslash as a continuation character; however, the newline character itself is ignored. <p>Newlines can be used by writing the <code>\\A</code> escape sequence in any of the strings after the <strong>content</strong> property. The generated line break is displayed in accordance with the value of the <a href='https://docs.webplatform.org/wiki/css/properties/white-space'><strong>white-space</strong></a> attribute. <p>The backslash is also used to generate escape characters that cannot be represented in the current character encoding. In this case, the backslash is followed by at most six hexadecimal digits (from the range 0–9 and A–F) to indicate the Unicode character with that number. ","value":"string "},{"description":"<p>If set, removes the closing quote from the content. ","value":"no-close-quote "},{"description":"<p>This is the url of an external resource, such as an image. If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed. ","value":"uri "},{"description":"<p>Value of an attribute of the subject of the selector. If attribute is not set on the subject an empty string will be returned. It is used as a function with the element name as the argument: 'attr( element-name )' ","value":"attr "},{"description":"<p>Counters may be specified with two different functions: 'counter()' or 'counters()'.  'counter()' has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default).  'counters()'  also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string.  <p>The counters are rendered in the indicated style ('decimal' by default). The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored. ","value":"counter "}]},"css/properties/counter-increment":{"SUMMARY":"<p>The counter-increment property accepts one or more names of counters (identifiers), each one optionally followed by an integer which specifies the value by which the counter should be incremented (e.g. if the value is 2, the counter increases by 2 each time it is invoked). ","URL":"https://docs.webplatform.org/wiki/css/properties/counter-increment","VALUES":[{"description":"<p>The name of the counter.  The counter can then be invoked by using <strong>counter(&lt;identifier&gt;)</strong>. ","value":"identifier "},{"description":"<p>An integer that indicates by how much the counter is incremented for every occurrence of the element. Zero and negative integers are allowed.  If no value is specified, the value defaults to 1. ","value":"integer "}]},"css/properties/counter-reset":{"SUMMARY":"<p>The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer (otherwise, the integer defaults to 0.)  Each time the given element is invoked, the counters specified by the property are set to the given integer. ","URL":"https://docs.webplatform.org/wiki/css/properties/counter-reset","VALUES":[{"description":"<p>The name of the counter, optionally followed by an integer. ","value":"identifier "},{"description":"<p>The value to which the counter is set when the element is invoked. The default value is 0. ","value":"integer "}]},"css/properties/cue":{"SUMMARY":"<p>The <code>cue</code> property specifies sound files (known as an \"auditory icon\") to be played by speech media agents before and after presenting an element's content; if only one file is specified, it is played both before and after.  The volume at which the file(s) should be played, relative to the volume of the main element, may also be specified.  The icon files may also be set separately with the <a href='https://docs.webplatform.org/wiki/css/properties/cue-before'><code>cue-before</code></a> and <a href='https://docs.webplatform.org/wiki/css/properties/cue-after'><code>cue-after</code></a> properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/cue"},"css/properties/cue-after":{"SUMMARY":"<p>The <code>cue-after</code> property specifies a sound file (known as an \"auditory icon\") to be played by speech media agents after presenting an element's content; the volume at which the file should be played may also be specified.  The shorthand property <a href='https://docs.webplatform.org/wiki/css/properties/cue'><code>cue</code></a> sets cue sounds for both before and after the element is presented. ","URL":"https://docs.webplatform.org/wiki/css/properties/cue-after"},"css/properties/cue-before":{"SUMMARY":"<p>The <code>cue-before</code> property specifies a sound file (known as an \"auditory icon\") to be played by speech media agents before presenting an element's content; the volume at which the file should be played may also be specified.  The shorthand property <a href='https://docs.webplatform.org/wiki/css/properties/cue'><code>cue</code></a> sets cue sounds for both before and after the element is presented. ","URL":"https://docs.webplatform.org/wiki/css/properties/cue-before"},"css/properties/cursor":{"SUMMARY":"<p>The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/cursor","VALUES":[{"description":"<p>There are many standard cursors available: <pre>\n</pre><ul><li> <code>auto</code><li> <code>default</code><li> <code>none</code><li> <code>context-menu</code><li> <code>help</code><li> <code>pointer</code><li> <code>progress</code><li> <code>wait</code><li> <code>cell</code><li> <code>crosshair</code><li> <code>text</code><li> <code>vertical-text</code><li> <code>alias</code><li> <code>copy</code><li> <code>move</code><li> <code>no-drop</code><li> <code>not-allowed</code><li> <code>e-resize</code><li> <code>n-resize</code><li> <code>ne-resize</code><li> <code>nw-resize</code><li> <code>s-resize</code><li> <code>se-resize</code><li> <code>sw-resize</code><li> <code>w-resize</code><li> <code>ew-resize</code><li> <code>ns-resize</code><li> <code>nesw-resize</code><li> <code>nwse-resize</code><li> <code>col-resize</code><li> <code>row-resize</code><li> <code>all-scroll</code><li> <code>zoom-in</code><li> <code>zoom-out</code></ul><p>These have varying support across different browsers — see the support section. The examples below feature different boxes with different cursor values set on them, so you can get an idea of what the different ones look like. ","value":"standard values "},{"description":"<p>Instead of specifying a standard pointer type, you can specify a <code>url()</code> function pointing to a custom graphic to use as a cursor, which must be followed by a fallback keyword to use as a pointer if the image is not available (this can be <code>auto</code> or a standard keyword value). For example, <code>cursor: url(), auto;</code> <p>You can supply multiple <code>url()</code> functions separated by commas (<code>url(), url(), auto</code> for example), and the browser will use the earliest appropriate image it can find. Limitations include: <ul><li> Cursor size: if the cursor image is over a certain size it will be ignored (in Gecko for example the limit is 128×128px). You should limit yourself about 32×32px anyway, for maximum compatibility with operating systems and platforms.<li> Browser: In Opera, the custom cursors are just ignored, and the keywords are used instead.<li> Transparency: Translucent cursors are not supported on Windows releases earlier than XP. This is a limitation of the operating system. Transparency works on all platforms.<li> Image format: Most browsers support a wide variety of image formats, but you should stick to something common and web-optimizable for the most part, such as JPG or PNG. You'll also need to include a CUR format image, as they are required by IE. Animateds PNGs and GIFs will only produce static cursors.</ul>","value":"url(), keyword "},{"description":"<p>CSS3 allows you to specify a custom cusor image along with an X and Y number values for the pointer hotspot, for example <code>cursor:  url(cursor2.png) 2 2, auto;</code>. If not specified, the hotspot position defaults to the top left corner of the cursor image, or may be read from the meta data inside the image file, in the case of CUR and XBM format files. ","value":"url() hotspot-x hotspot-y, keyword; "}]},"css/properties/direction":{"SUMMARY":"<p>The <code>direction</code> CSS property specifies the text direction/writing direction. The <code>rtl</code> is used for Hebrew or Arabic text, the <code>ltr</code> is for other languages. ","URL":"https://docs.webplatform.org/wiki/css/properties/direction","VALUES":[{"description":"<p>Default. Content flows left to right. ","value":"ltr "},{"description":"<p>Content flows right to left. ","value":"rtl "}]},"css/properties/display":{"SUMMARY":"<p>This property specifies the type of rendering box used for an element. It is a shorthand property for many other display properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/display","VALUES":[{"description":"<p>Generates an inline element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0). See <a href='https://docs.webplatform.org/wiki/css/properties/grid'>grid</a>. ","value":"inline-grid "},{"description":"<p>Generates an inline principal block box and a marker box. ","value":"inline-list-item "},{"description":"<p>Causes an element to not appear in the formatting structure and have no effect on layout. Descendant elements and their content are likewise removed from the formatting structure. (This behavior cannot be overridden by setting the <em>display</em> property on the descendants.) <strong>Note:</strong> A display value of \"none\" does not create an invisible box; it creates no box at all. To render an element box's dimensions, yet have its contents be invisible, use the <em>visibility</em> property; see <a href='https://docs.webplatform.org/wiki/css/properties/visibility'>visibility</a>. ","value":"none "},{"description":"<p>Generates a block element box that flows with surrounding content as if it were a single inline box--and behaves like a replaced element. ","value":"inline-block "},{"description":"<p>Causes an element to use the specified or computed value of that property on its parent element. ","value":"inherit "},{"description":"<p>Generates a block element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See <a href='https://docs.webplatform.org/wiki/css/properties/flex'>flex</a>. ","value":"flex "},{"description":"<p>Generates one or more inline element boxes. ","value":"inline "},{"description":"<p>These values cause an element to behave like a table element, subject to certain restrictions. See the <a href='http://www.w3.org/TR/CSS2/tables.html'>W3C tables specification</a>. ","value":"table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption "},{"description":"<p>Generates an inline element for laying out content in the flexbox model. This is a flexbox model value in CSS3. See <a href='https://docs.webplatform.org/wiki/css/properties/flex'>flex</a>. ","value":"inline-flex "},{"description":"<p>Generates a block element box. ","value":"block "},{"description":"<p>Generates a block element for laying out content in the grid model. This is a grid box model value (an experimental tag in CSS 3.0). See <a href='https://docs.webplatform.org/wiki/css/properties/grid'>grid</a>. ","value":"grid "},{"description":"<p>Generates a principal block box and a marker box. ","value":"list-item "}]},"css/properties/empty-cells":{"SUMMARY":"<p>Sets whether or not to display borders and background on empty cells in a table. ","URL":"https://docs.webplatform.org/wiki/css/properties/empty-cells","VALUES":[{"description":"<p>Does not render the cell ","value":"hide "},{"description":"<p>Renders empty cells with inherited borders and styles ","value":"show "}]},"css/properties/fill":{"SUMMARY":"<p>The ‘fill’ property paints the interior of the given graphical element. The area to be painted consists of any areas inside the outline of the shape. To determine the inside of the shape, all subpaths are considered, and the interior is determined according to the rules associated with the current value of the ‘fill-rule’ property. The zero-width geometric outline of a shape is included in the area to be painted. ","URL":"https://docs.webplatform.org/wiki/css/properties/fill","VALUES":[{"description":"<p>Properties ‘fill’ and ‘stroke’ take on a value of type &lt;paint&gt; ","value":"&lt;paint&gt; "}]},"css/properties/fill-opacity":{"SUMMARY":"<p>‘fill-opacity’ specifies the opacity of the painting operation used to paint the interior the current object. (See Painting shapes and text.) ","URL":"https://docs.webplatform.org/wiki/css/properties/fill-opacity","VALUES":[{"description":"","value":"inherit "}]},"css/properties/fill-rule":{"SUMMARY":"<p>The ‘fill-rule’ property indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape. For a simple, non-intersecting path, it is intuitively clear what region lies \"inside\"; however, for a more complex path, such as a path that intersects itself or where one subpath encloses another, the interpretation of \"inside\" is not so obvious. <p>The ‘fill-rule’ property provides two options for how the inside of a shape is determined: ","URL":"https://docs.webplatform.org/wiki/css/properties/fill-rule","VALUES":[{"description":"","value":"evenodd "},{"description":"","value":"inherit "}]},"css/properties/filter":{"SUMMARY":"<p>Applies various image processing effects.  This property is largely unsupported.  See <a href='https://docs.webplatform.org/wiki/#Compatibility'>Compatibility</a> section for more information. ","URL":"https://docs.webplatform.org/wiki/css/properties/filter","VALUES":[{"description":"<p>Any combination of built-in filter functions: <a href='https://docs.webplatform.org/wiki/css/functions/blur'><strong>blur()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/brightness'><strong>brightness()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/contrast'><strong>contrast()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/custom'><strong>custom()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/drop-shadow'><strong>drop-shadow()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/grayscale'><strong>grayscale()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/hue-rotate'><strong>hue-rotate()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/invert'><strong>invert()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/opacity'><strong>opacity()</strong></a>, <a href='https://docs.webplatform.org/wiki/css/functions/saturate'><strong>saturate()</strong></a>, and <a href='https://docs.webplatform.org/wiki/css/functions/sepia'><strong>sepia()</strong></a> ","value":"&lt;function&gt; "},{"description":"<p>A reference to an <a href='https://docs.webplatform.org/wiki/svg/elements/filter'>SVG &lt;filter&gt; element</a> ","value":"url(path/to/filter.svg#filterID) "}]},"css/properties/flex":{"SUMMARY":"<p>The <strong>flex</strong> CSS property specifies the ability of a flex item to alter its dimensions to fill the available space. <strong>flex</strong> is a shorthand property comprised of the <a href='https://docs.webplatform.org/wiki/css/properties/flex-grow'>flex-grow</a>, <a href='https://docs.webplatform.org/wiki/css/properties/flex-shrink'>flex-shrink</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/flex-basis'>flex-basis</a> properties. A flex item can be stretched to use available space proportional to its flex grow factor, or reduced proportional to its flex shrink factor to prevent overflow. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex","VALUES":[{"description":"<p>Equivalent to <strong>1 1 auto</strong> <ul><li> The flex item grows exactly proportional to all of the other flex items to fit a larger container.<li> The flex item shrinks exactly proportional to all of the other flex items to fit a smaller container.<li> The flex item's initial main size is determined by either the <a href='https://docs.webplatform.org/wiki/css/properties/width'>width</a> or <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> property, whichever is in the main dimension, as determined by the <a href='https://docs.webplatform.org/wiki/css/properties/flex-flow'>flex-direction</a> property.</ul>","value":"auto "},{"description":"<p>Equivalent <strong>0 1 auto</strong>' <ul><li> The flex item does not grow with the other flex items to fit a larger container.<li> The flex item shrinks proportional to the other flex items to fit a smaller container.<li> The flex item's initial main size is determined by either the <a href='https://docs.webplatform.org/wiki/css/properties/width'>width</a> or <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> property, whichever is in the main dimension, as determined by the <a href='https://docs.webplatform.org/wiki/css/properties/flex-flow'>flex-direction</a> property.</ul>","value":"initial "},{"description":"<p>The shorthand value of this property includes the following values: <ul><li> Value of the <a href='https://docs.webplatform.org/wiki/css/properties/flex-grow'>flex-grow</a> property.<li> Value of the <a href='https://docs.webplatform.org/wiki/css/properties/flex-shrink'>flex-shrink</a> property.<li> Value of the <a href='https://docs.webplatform.org/wiki/css/properties/flex-basis'>flex-basis</a> property.</ul>","value":"&lt;<a href='https://docs.webplatform.org/wiki/css/properties/flex-grow'>flex-grow</a>&gt; &lt;<a href='https://docs.webplatform.org/wiki/css/properties/flex-shrink'>flex-shrink</a>&gt; &lt;<a href='https://docs.webplatform.org/wiki/css/properties/flex-basis'>flex-basis</a>&gt; "},{"description":"<p>An example of the shorthand values. <ul><li> The flex item grows three times as much as the other flex items to fit a larger container.<li> The flex item shrinks just as much as the other flex items to fit a smaller container.<li> The flex item's initial main size is 60% of its container.</ul>","value":"3 1 60% "},{"description":"<p>Equivalent to <strong>0 0 auto</strong> <ul><li> The flex item does not adjust its size to fit the container.<li> The flex item's initial main size is determined by either the <a href='https://docs.webplatform.org/wiki/css/properties/width'>width</a> or <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> property, whichever is in the main dimension, as determined by the <a href='https://docs.webplatform.org/wiki/css/properties/flex-flow'>flex-direction</a> property.</ul>","value":"none "}]},"css/properties/flex-align":{"SUMMARY":"<p>Obsolete, do not use. This property has been renamed to <a href='https://docs.webplatform.org/wiki/css/properties/align-items'><strong>align-items</strong></a>. <p>Specifies the alignment (perpendicular to the layout axis defined by the <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'><strong>flex-direction</strong></a> property) of child elements of the object. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-align","VALUES":[{"description":"<p>Initial value. Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the <a href='https://docs.webplatform.org/wiki/css/properties/max-width'><strong>max-width</strong></a> or <a href='https://docs.webplatform.org/wiki/css/properties/max-height'><strong>max-height</strong></a> property for a child element takes precedence and layout follows the  <code>start</code> rule. ","value":"stretch "},{"description":"<p>The baselines (leading edge or trailing edge depending on the <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'><strong>-ms-flex-direction</strong></a> property)  of all child elements are aligned with each other.  <p>The child element that occupies the most space, perpendicular to the layout axis, follows the <code>start</code> rule; the baselines of all remaining elements are then aligned with the baseline of this element. ","value":"baseline "},{"description":"<p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'><strong>flex-direction</strong></a> of <code>row</code> or <code>column</code>, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>-ms-flex-direction</strong></a> of <code>row-reverse</code> or <code>column-reverse</code>, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. ","value":"start "},{"description":"<p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>flex-direction</strong></a> of <code>row</code> or <code>column</code>, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'><strong>flex-direction</strong></a> of <code>row-reverse</code> or <code>column-reverse</code>, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. ","value":"end "},{"description":"<p>Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child. ","value":"center "}]},"css/properties/flex-basis":{"SUMMARY":"<p>The <strong>flex-basis</strong> CSS property describes the initial main size of the flex item before any free space is distributed according to the flex factors described in the <a href='https://docs.webplatform.org/wiki/css/properties/flex'>flex</a> property (<a href='https://docs.webplatform.org/wiki/css/properties/flex-grow'>flex-grow</a> and <a href='https://docs.webplatform.org/wiki/css/properties/flex-shrink'>flex-shrink</a>). ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-basis","VALUES":[{"description":"<p>The flex item's initial main size is determined by either the <a href='https://docs.webplatform.org/wiki/css/properties/width'>width</a> or <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> property, whichever is in the main dimension, as determined by the <a href='https://docs.webplatform.org/wiki/css/properties/flex-flow'>flex-direction</a> property. Note that the value of the <a href='https://docs.webplatform.org/wiki/css/properties/width'>width</a> or <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> property itself may be <strong>auto</strong>, in which case the size is determined by the flex item's contents. ","value":"auto "},{"description":"<p>In a horizontal writing mode; percentage values of <strong>flex-basis</strong> are resolved against the flex item's flex container, and if that containing block's size is indefinite, the result is undefined. ","value":"width "},{"description":"<p>In a vertical writing mode; percentage values of <strong>flex-basis</strong> are resolved against the flex item's flex container, and if that containing block's size is indefinite, the result is undefined. ","value":"height "}]},"css/properties/flex-direction":{"SUMMARY":"<p>The <strong>flex-direction</strong> CSS property describes how flex items are placed in the flex container, by setting the direction of the flex container's main axis. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-direction","VALUES":[{"description":"<p>The flex container's main axis has the same orientation as the inline axis of the current <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing mode</a>. The main-start and main-end directions are equivalent to the start and end directions, respectively, of the current <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing mode</a>. ","value":"row "},{"description":"<p>Same as 'row', except the main-start and main-end directions are swapped. ","value":"row-reverse "},{"description":"<p>The flex container's main axis has the same orientation as the block axis of the current <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing mode</a>. The main-start and main-end directions are equivalent to the before/head and after/foot directions, respectively, of the current <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing mode</a>. ","value":"column "},{"description":"<p>Same as 'column', except the main-start and main-end directions are swapped. ","value":"column-reverse "}]},"css/properties/flex-flow":{"SUMMARY":"<p>The <strong>flex-flow</strong> CSS property defines the flex container's main and cross axis. It is a shorthand property for the <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'>flex-direction</a> and <a href='https://docs.webplatform.org/wiki/css/properties/flex-wrap'>flex-wrap</a> properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-flow","VALUES":[{"description":"<p>The shorthand value includes the values of the following properties:  <ul><li> <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'>flex-direction</a><li> <a href='https://docs.webplatform.org/wiki/css/properties/flex-wrap'>flex-wrap</a></ul>","value":"&lt;flex-direction&gt; &lt;flex-wrap&gt; "}]},"css/properties/flex-grow":{"SUMMARY":"<p>The <strong>flex-grow</strong> CSS property specifies how much a flex item will enlarge with respect to the other items in the flex container to fill an expanded container. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-grow","VALUES":[{"description":"<p>The flex grow factor, which describes the proportion by which the flex item will grow relative to the other flex items in the container. Negative numbers are invalid. ","value":"number "}]},"css/properties/flex-item-align":{"SUMMARY":"<p>Do not use. This property has been renamed to <a href='https://docs.webplatform.org/wiki/css/properties/align-self'><strong>align-self</strong></a> <p>Specifies the alignment (perpendicular to the layout axis defined by <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'><strong>flex-direction</strong></a>) of child elements of the object. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-item-align","VALUES":[{"description":"<p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>-ms-flex-direction</strong></a> of <code>row</code> or <code>column</code>, the trailing edge of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>-ms-flex-direction</strong></a> of <code>row-reverse</code> or <code>column-reverse</code>, the leading edge of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. ","value":"end "},{"description":"<p>Each child element is centered between the leading and trailing edges of the object. Any remaining space, perpendicular to the layout axis, is evenly distributed before and after each child. ","value":"center "},{"description":"<p>Each child element is stretched to completely fill the space that is available perpendicular to the layout axis. If set, the <a href='https://docs.webplatform.org/wiki/css/properties/max-width'><strong>max-width</strong></a> or <a href='https://docs.webplatform.org/wiki/css/properties/max-height'><strong>max-height</strong></a> property for a child element takes precedence and layout follows the  <code>start</code> rule. ","value":"stretch "},{"description":"<p>The baselines (leading edge or trailing edge depending on the <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>-ms-flex-direction</strong></a> property)  of all child elements are aligned with each other.  <p>The child element that occupies the most space, perpendicular to the layout axis, follows the <code>start</code> rule; the baselines of all remaining elements are then aligned with the baseline of this element. ","value":"baseline "},{"description":"<p>Initial value. Indicates that the value of the flexbox item's <strong>-ms-flex-item-align</strong> property is equivalent  to that of the parent flexbox element's <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-align'><strong>-ms-flex-align</strong></a> property. ","value":"auto "},{"description":"<p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>-ms-flex-direction</strong></a> of <code>row</code> or <code>column</code>, the leading edge (or baseline) of each child element is aligned with the leading edge of the object. Any remaining space, perpendicular to the layout axis, is placed after the trailing edge of each child element. <p>If the parent element has a computed value for <a href='https://docs.webplatform.org/wiki/css/properties/ms-flex-direction'><strong>-ms-flex-direction</strong></a> of <code>row-reverse</code> or <code>column-reverse</code>, the trailing edge (or baseline) of each child element is aligned with the trailing edge of the object. Any remaining space, perpendicular to the layout axis, is placed before the leading edge of each child element. ","value":"start "}]},"css/properties/flex-line-pack":{"SUMMARY":"<p>Do not use. This property has been renamed to <a href='https://docs.webplatform.org/wiki/css/properties/align-content'><strong>align-content</strong></a>. <p>Specifies how a flexbox's lines align within the flexbox when there is extra space along the axis that is perpendicular to the axis defined by the <a href='https://docs.webplatform.org/wiki/css/properties/flex-direction'><strong>flex-direction</strong></a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-line-pack","VALUES":[{"description":"<p>The ending edge of the first child element is placed at the end of the parent element; the ending edge of the next child element is placed edge to edge with the starting edge of the first child element; and so on along the layout axis direction. All space remaining along the layout axis is placed at the start of the layout axis. ","value":"end "},{"description":"<p>All child elements are placed edge to edge with each other, as described in the descriptions for the [#start start] or [#end end] keywords. However, the group of child elements is centered between the starting and ending edges of the parent element so that all remaining space is evenly distributed before the first child element and after the last child element. ","value":"center "},{"description":"<p>The starting edge of the first child element is placed at the start of the parent element; the ending edge of the last child element is placed edge to edge with the end of the parent box; and all remaining children are placed between the first and last child elements, so that any space that remains along the layout axis is equally distributed between child elements. ","value":"justify "},{"description":"<p>Lines are evenly distributed in the flexbox, with half-size spaces on either end. If the leftover free space is negative or there is only a single line in the flexbox, this value is identical to [#center center]. Otherwise, the lines in the flexbox are distributed such that the empty space between any two adjacent lines is the same, and the empty space before the first and after the last lines in the flexbox are half the size of the other empty spaces. ","value":"distribute "},{"description":"<p>Lines stretch to take up the remaining space. If the leftover free space is negative, this value is identical to [#start start]. Otherwise, the free space is split equally between all of the lines, increasing their cross size. ","value":"stretch "},{"description":"<p>The starting edge of the first child element is placed at the start of the parent element; the starting edge of the next child element is placed edge to edge with the ending edge of the first child element; and so on along the layout axis direction. All space that remains along the layout axis is placed at the end of the layout axis. ","value":"start "}]},"css/properties/flex-order":{"SUMMARY":"<p>Gets or sets a value that specifies the ordinal group that a flexbox element belongs to. This ordinal value identifies the display order for the group. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-order","VALUES":[{"description":"<p>Integer value that identifies the group that a child element belongs to. ","value":"integer "}]},"css/properties/flex-shrink":{"SUMMARY":"<p>The <strong>flex-shrink</strong> CSS property specifies how much a flex item will be reduced with respect to the other items in the flex container to fit within a reduced container. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-shrink","VALUES":[{"description":"<p>The flex shrink factor, which describes the proportion by which the flex item will shrink relative to the other flex items in the container. Negative numbers are invalid. ","value":"number "}]},"css/properties/flex-wrap":{"SUMMARY":"<p>The <strong>flex-wrap</strong> property controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction in which new lines are stacked. ","URL":"https://docs.webplatform.org/wiki/css/properties/flex-wrap","VALUES":[{"description":"<p>The flex container is single-line. The cross-start direction is equivalent to either the start or before/head direction of the current <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing mode</a>, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start. ","value":"nowrap "},{"description":"<p>The flex container is multi-line. The cross-start direction is equivalent to either the start or before/head direction of the current <a href='https://docs.webplatform.org/wiki/css/properties/writing-mode'>writing mode</a>, whichever is in the cross axis, and the cross-end direction is the opposite direction of cross-start. ","value":"wrap "},{"description":"<p>Same as <strong>wrap</strong>, except the cross-start and cross-end directions are swapped. ","value":"wrap-reverse "}]},"css/properties/float":{"SUMMARY":"<p>Elements which have the style <code>float</code>  are floated horizontally.  These elements can move as far to the <code> left</code> or <code>right</code>  of the containing element.  All elements after the floating element will flow around it, but elements before the floating element are not impacted.  If several floating elements are placed after each other, they will float next to each other as long as there is room. ","URL":"https://docs.webplatform.org/wiki/css/properties/float","VALUES":[{"description":"<p>The <code>right</code> value indicates that the element must float to the far right side of its containing block. ","value":"right "},{"description":"<p>The <code>footnote</code> value indicates that the element is moved to the footnote area and that a footnote call is put in its original location. ","value":"footnote "},{"description":"<p><code>none</code> indicates that the element does not contain any float at all. This is the initial value of the <code>float</code> property. ","value":"none "},{"description":"<p>The <code>left</code> value indicates that the element must float to the far left side of its containing block. ","value":"left "}]},"css/properties/flow-from":{"SUMMARY":"<p>Flows content from a <a href='https://docs.webplatform.org/wiki/css/concepts/named_flow'>named flow</a> (specified by a corresponding <a href='https://docs.webplatform.org/wiki/css/properties/flow-into'><strong>flow-into</strong></a>) through selected elements to form a dynamic <a href='https://docs.webplatform.org/wiki/css/concepts/region_chain'>chain</a> of layout <a href='https://docs.webplatform.org/wiki/css/concepts/region'><em>regions</em></a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/flow-from","VALUES":[{"description":"<p>Identifier that replaces content from specified named flow, flowing it from one <a href='https://docs.webplatform.org/wiki/css/concepts/region'><em>region</em></a> element to another. ","value":"&lt;ident&gt; "},{"description":"<p>This container is not a region. Keeps element as is, and does not transform it into a region and replace its content. ","value":"none "}]},"css/properties/flow-into":{"SUMMARY":"<p>Diverts the selected element's content into a <a href='https://docs.webplatform.org/wiki/css/concepts/named_flow'>named flow</a>, used to thread content through different layout <a href='https://docs.webplatform.org/wiki/css/concepts/region'>regions</a> specified by  <a href='https://docs.webplatform.org/wiki/css/properties/flow-from'><strong>flow-from</strong></a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/flow-into","VALUES":[{"description":"<p>The element's content remains unchanged, and is not diverted to a flow unless an ancestor element specifies it. ","value":"none "},{"description":"<p>String identifier that specifies a <em>named flow</em> into which to divert the element's content. Common keyword values such as <strong>none</strong>, <strong>inherit</strong>, <strong>default</strong>, <strong>auto</strong>, and <strong>initial</strong> are invalid flow names, as are <strong>element</strong> and <strong>content</strong>: <ul><li><strong>&lt;ident&gt; element</strong>: The <strong>element</strong> keyword explicitly specifies the entire element diverts to the named flow, not just its contents. (This is the default behavior without the keyword.)</ul><ul><li> <strong>&lt;ident&gt; content</strong>: Adding the <strong>content</strong> keyword overrides the default behavior described above, diverting only the element's nested content to the named flow.</ul>","value":"&lt;ident&gt; "}]},"css/properties/font":{"SUMMARY":"<p>The <code>font</code> property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting. ","URL":"https://docs.webplatform.org/wiki/css/properties/font","VALUES":[{"description":"<p><code>font</code> can take up to six separate parts in its value, which set six different longhand property values. The options are as follows: <ul><li> <code>font-weight</code>: Sets boldness of font; can take values of <code>normal</code> (default), <code>bold</code> (standard bold weight), <code>lighter</code> or <code>bolder</code> (supposed to be a slightly lighter or bolder weight that standard <code>bold</code>), inherit, or various numerical values to indicate different degrees of boldness: <code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, or <code>900</code>.<li> <code>font-style</code>: Allows an italic or oblique font face to be applied; values options are <code>normal</code> (default), italic, oblique, or inherit.<li> <code>font-variant</code>: Allows a small caps font variant to be set. Value options are <code>normal</code> (default), <code>small-caps</code>, or <code>inherit</code>.<li> <code>font-size</code>: Sets a size for the font. Options are absolute size keywords (<code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code> (the default value), <code>large</code>, <code>x-large</code> or <code>xx-large</code>), relative size keywords (<code>smaller</code> or <code>larger</code>, which indicate a keyword size smaller or larger than the parent element's font size), length values (for example <code>12px</code>, or <code>5rem</code>), percentage values (for example <code>80%</code>), or <code>inherit</code>.<li> <code>line-height</code>: Sets the height of the line the font is sat on. Value options include <code>normal</code> (the default), unitless values (for example <code>1.7</code>), length values (for example <code>20px</code> or <code>3.5rem</code>), percentage values (for example <code>120%</code>), or <code>inherit</code>.<li> <code>font-family</code>: Allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character.</ul>","value":"font-weight font-style font-variant font-size/line-height font-family "},{"description":"<p>Alternatively, you can set the value to be a single keyword that corresponds to a system font used to style a certain feature of the system the browser is running on (some browsers offer more, proprietary options. For more, see the links at the bottom of the document):  <ul><li> <code>caption</code>: User-preference font used in objects that have captions—buttons, labels, and so on.<li> <code>icon</code>: User-preference font used in icon labels.<li> <code>menu</code>: User-preference font used in menus.<li> <code>message-box</code>: User-preference font used in dialog boxes.<li> <code>small-caption</code>: User-preference font used in small controls.<li> <code>status-bar</code>: User-preference font used in small controls.</ul>","value":"system font "}]},"css/properties/font-family":{"SUMMARY":"<p>The <code>font-family</code> property allows one or more font family names and/or generic family names to be specified for usage on the selected element(s)' text. The browser then goes through the list; for each character in the selection it applies the first font family that has an available glyph for that character. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-family","VALUES":[{"description":"<p>generic families are not specific fonts, but a reference to fallback fonts of a general type that can be used when specific fonts are not available. The actual fonts used for each fallback type may differ between operating systems. The following generic family keywords are defined: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> and <code>monospace</code>. ","value":"generic-family "},{"description":"<p>You can specify a comma-separated list of multiple font family names and/or generic family names, although it rarely makes sense to specify more than one generic family. This list is called a <strong>font-stack</strong>. The browser goes down the list and uses the first available font that it can find available on the system. Generic font families are used as a fallback when none of the fonts specified in the stack are available. It is always the last alternative in the list of font family names. ","value":"family-name, family-name, generic-family "},{"description":"<p>The name of a font family, such as <code>courier</code> or <code>arial</code>. You can reference fonts available on the user's system, or external fonts imported using <a href='https://docs.webplatform.org/wiki/css/atrules/%40font-face'>@font-face</a>. When the family name contains more than one word, it should be enclosed in quotes, for example <code>'Comic Sans'</code>. ","value":"family-name "}]},"css/properties/font-feature-settings":{"SUMMARY":"<p>The <code>font-feature-settings</code> property gets or sets one or more values that specify glyph substitution (special font characters such as ligatures and figures) and positioning in fonts that include OpenType layout features. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-feature-settings","VALUES":[{"description":"<p>Default. No change in glyph substitution or positioning occurs. ","value":"normal "},{"description":"<p>This property can take up to two separate parts in its value. The options are as follows: <ul><li> <strong>OpenType feature tag</strong>: Comma-separated list of one or more OpenType layout feature tags (each with an optional toggle). See <a href='https://docs.webplatform.org/wiki/css/properties/font-feature-settings#Notes'>Notes</a> for examples of correct syntax, plus a table of the most common feature tags and their definitions.<li> <strong>Indicator</strong>: 0 indicates that the feature is disabled. For boolean features, 1 indicates that feature is enabled. A value of ‘on’ is synonymous with 1 and ‘off’ is synonymous with 0. For non-boolean features, 1 or greater indicates the feature selection index.</ul>","value":"\"OpenType feature tag\" Indicator "}]},"css/properties/font-kerning":{"SUMMARY":"<p>The <code>font-kerning</code> property allows contextual adjustment of inter-glyph spacing, i.e. the spaces between the characters in text. This property  controls &lt;bold&gt;metric kerning&lt;/bold&gt; - that utilizes adjustment data contained in the font. Optical Kerning is not supported as yet. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-kerning","VALUES":[{"description":"<p>Used to specify kerning is at the discretion of the user agent. ","value":"auto "},{"description":"<p>Specifies kerning is applied. Fonts that do not include kerning data are unaffected by this setting. ","value":"normal "},{"description":"<p>Specifies kerning is not applied ","value":"none "}]},"css/properties/font-language-override":{"SUMMARY":"<p>The <code>‘font-language-override’</code> property allows authors to explicitly specify the language system of the font, overriding the language system implied by the content language. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-language-override","VALUES":[{"description":"<p>specifies that when rendering with OpenType fonts, the content language of the element is used to infer the OpenType language system ","value":"normal "},{"description":"<p>single three-letter case-sensitive OpenType language system tag, specifies the OpenType language system to be used instead of the language system implied by the language of the element ","value":"&lt;string&gt; "}]},"css/properties/font-size":{"SUMMARY":"<p><code>font-size</code> sets the font size of the text inside the element to which it is applied, and that of its descendants. You can size text using absolute measurements, or measurements relative to the affected element's parent or root elements. <a href='https://docs.webplatform.org/wiki/guides/css_text_styling_fundamentals'>CSS Text Styling Fundamentals</a> provides an overview. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-size","VALUES":[{"description":"<p>A percentage value specifies an absolute font size relative to the parent element's  <strong>font-size</strong>. ","value":"percentage "},{"description":"<p>The <code>inherit</code> keyword causes the element to adopt its parent element's font size. ","value":"inherit "},{"description":"<p>A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are <strong>xx-small</strong>, <strong>x-small</strong>, <strong>small</strong>, <strong>medium</strong>, <strong>large</strong>, <strong>x-large</strong>, and <strong>xx-large</strong>. ","value":"absolute keywords "},{"description":"<p>A set of keywords interpreted relative to the parent element's <strong>font-size</strong> — either <strong>smaller</strong> or <strong>larger</strong>. ","value":"relative keywords "},{"description":"<p>An absolute unit value: any of the standard <a href='https://docs.webplatform.org/wiki/css/data_types/length'>css length units</a> are allowed. Negative lengths are illegal. ","value":"length "}]},"css/properties/font-size-adjust":{"SUMMARY":"<p>The <code>font-size-adjust</code> property adjusts the font-size of the fallback fonts defined with <a href='https://docs.webplatform.org/wiki/css/properties/font-family'>font-family</a>, so that the <a href='https://docs.webplatform.org/wiki/x-height'>x-height</a> is the same no matter what font is used. This preserves the readability of the text when fallback happens. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-size-adjust","VALUES":[{"description":"<p>The aspect value is calculated by the browser for the first font in the font-family list, and used for every font in that list. ","value":"auto "},{"description":"<p>Only use the font-size value to determine the size of the font. ","value":"none "},{"description":"<p>The value used in calculating the size of the fallback fonts. For the adjusted font size calculation, see <a href='https://docs.webplatform.org/wiki/css/properties/font-size-adjust#Notes'>Notes</a>. ","value":"number "}]},"css/properties/font-stretch":{"SUMMARY":"<p>Allows you to expand or condense the widths for a normal, condensed, or expanded font face. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-stretch","VALUES":[{"description":"<p>This is the default setting. ","value":"normal "},{"description":"<p>This condenses the font face in Internet Explorer only. ","value":"narrower (Internet Explorer only) "},{"description":"<p>This is the least expanded setting. ","value":"semi-expanded "},{"description":"<p>This is the most condensed setting. ","value":"ultra-condensed "},{"description":"<p>Some font faces incorporate an expanded option, this is the equivalent of that setting. ","value":"expanded "},{"description":"<p>This is the second most condensed setting. ","value":"extra-condensed "},{"description":"<p>This is the second most expanded setting. ","value":"extra-expanded "},{"description":"<p>Some font faces incorporate a condensed option, this is the equivalent of that setting. ","value":"condensed "},{"description":"<p>This is the most expanded setting. ","value":"ultra-expanded "},{"description":"<p>This is the least condensed setting. ","value":"semi-condensed "},{"description":"<p>This expands the font face in Internet Explorer only. ","value":"wider (Internet Explorer only) "}]},"css/properties/font-style":{"SUMMARY":"<p>The <code>font-style</code> property allows normal, italic, or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. Oblique faces can be simulated by artificially sloping the glyphs of the regular face. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-style","VALUES":[{"description":"<p>Selects a face that is classified as a normal face (one that is neither italic or oblique). ","value":"normal "},{"description":"<p>Selects a font that is labeled as 'italic' (cursive). If no font labeled 'italic' is available, a font that is labeled as 'oblique' is selected. ","value":"italic "},{"description":"<p>Selects a font that is labeled as 'oblique' (sloped version of the regular face). If no italic or oblique font is available, the browser slopes the normal version of the font to produce an oblique approximation. ","value":"oblique "}]},"css/properties/font-synthesis":{"SUMMARY":"<p>This value specifies whether the user agent is allowed to synthesize  bold or oblique font faces when a font family lacks bold or italic faces. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-synthesis","VALUES":[{"description":"<p>user agent is not allowed to synthesize bold or oblique font when not available. ","value":"none "},{"description":"<p>user agent is only allowed to synthesize bold font when not available but not oblique. ","value":"weight "},{"description":"<p>user agent is only allowed to synthesize oblique font when not available but not bold. ","value":"style "},{"description":"<p>user agent is allowed to synthesize both bold and oblique. ","value":"weight style "}]},"css/properties/font-variant":{"SUMMARY":"<p>The <code>font-variant</code> property enables you to select the small-caps font within a font family. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-variant","VALUES":[{"description":"<p>Selects a font that is not a 'small-caps' font, usually the available 'normal' font. ","value":"normal "},{"description":"<p>Selects a 'small-caps' font. If not small caps variant is available, the browser generates a small caps approximation. ","value":"small-caps "},{"description":"<p>Inherits the font-variant setting from its parent. ","value":"inherit "}]},"css/properties/font-variant-alternates":{"SUMMARY":"<p>Fonts can provide alternate glyphs in addition to default glyph for a character. This property provides control over the selection of these alternate glyphs. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-variant-alternates","VALUES":[{"description":"<p>None of the feature glyphs are enabled. ","value":"normal "},{"description":"<p>historical-forms Enables display of historical forms ","value":"stylistic(&lt;feature-value-name&gt;) "}]},"css/properties/font-weight":{"SUMMARY":"<p>The <code>font-weight</code> property specifies the weight or boldness of the font (their degree of blackness or stroke thickness). Note that some fonts are not available in all weights; some are available only on <strong>normal</strong> and <strong>bold</strong>. ","URL":"https://docs.webplatform.org/wiki/css/properties/font-weight","VALUES":[{"description":"<p>Bold font weight. Same as <strong>700</strong>. ","value":"bold "},{"description":"<p>One font weight lighter than the parent element (among the available weights of the font). ","value":"lighter "},{"description":"<p>One font weight darker than the parent element (among the available weights of the font). ","value":"bolder "},{"description":"<p>Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used. ","value":"100, 200, 300, 400, 500, 600, 700, 800, 900 "},{"description":"<p>Normal font weight. Same as <strong>400</strong>. ","value":"normal "}]},"css/properties/grid":{"SUMMARY":"<p>Foundation of a two-dimensional grid-based layout system.  Defines an element as part of a grid and permits those elements to be displayed differently than the flow order.  Also used as a shorthand for setting all the explicit grid properties (<a href='https://docs.webplatform.org/wiki/css/properties/grid-template-rows'>grid-template-rows</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-columns'>grid-template-columns</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-areas'>grid-template-areas</a>), as well as all the implicit grid properties (<a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-rows'>grid-auto-rows</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-columns'>grid-auto-columns</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-flow'>grid-auto-flow</a>), in a single declaration. If the &lt;grid-auto-rows&gt; value is omitted, it is set to the value specified for grid-auto-columns. Other omitted values are set to their initial values. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid","VALUES":[{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-flow'>grid-auto-flow</a> for details. ","value":"&lt;grid-auto-flow&gt; "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-columns'>grid-auto-columns</a> and <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-rows'>grid-auto-rows</a> for details. ","value":"&lt;grid-auto-columns&gt; / &lt;grid-auto-rows&gt; "},{"description":"<p>Itself a shorthand property, see <a href='https://docs.webplatform.org/wiki/css/properties/grid-template'>grid-template</a> for details. ","value":"&lt;grid-template&gt; "}]},"css/properties/grid-area":{"SUMMARY":"<p>Lays out one or more grid items bound by 4 grid lines. Shorthand for setting <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-start'>grid-column-start</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-end'>grid-column-end</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-start'>grid-row-start</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-end'>grid-row-end</a> in a single declaration. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-area","VALUES":[{"description":"<p>The resolution order of values for this shorthand is grid-row-start, grid-column-start, grid-row-end, grid-column-end. That is, if four &lt;grid-line&gt; values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. <p>When grid-column-end is omitted, if grid-column-start is an &lt;ident&gt;, grid-column-end is set to that &lt;ident&gt;; otherwise, it is set to auto. <p>When grid-row-end is omitted, if grid-row-start is an &lt;ident&gt;, grid-row-end is set to that &lt;ident&gt;; otherwise, it is set to auto. <p>When grid-column-start is omitted, if grid-row-start is an &lt;ident&gt;, all four longhands are set to that value. Otherwise, it is set to auto. ","value":"&lt;grid-line&gt; [ &lt;grid-line&gt; [ &lt;grid-line&gt; [ &lt;grid-line&gt; ] ] ] "}]},"css/properties/grid-auto-columns":{"SUMMARY":"<p>Changes default size of columns.  Creates implicit grid tracks when a grid item is placed into a row or column that is not explicitly sized (by <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-rows'>grid-template-rows</a> or <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-columns'>grid-template-columns</a>).  This property (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-rows'>grid-auto-rows</a>) specifies the default size of such implicitly-created tracks. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-auto-columns","VALUES":[{"description":"<p>A space-separated track list specifying the line names and track sizing functions of the grid. See <a href='http://www.w3.org/TR/css3-grid-layout/#track-sizing'>track sizing</a> in specification for details. ","value":"&lt;track-size&gt; "}]},"css/properties/grid-auto-flow":{"SUMMARY":"<p>Automatically places grid elements into the grid layout if an explicit location is not designated.  Designates the direction of the the flow and whether rows or columns must be added to accommodate the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-auto-flow","VALUES":[{"description":"<p>Causes auto-placed grid items to be placed according to the grid-auto-position property, rather than using the auto-placement algorithm. ","value":"none "},{"description":"<p>Fills each row in turn, adding new rows as necessary. ","value":"rows "},{"description":"<p>Fills each column in turn, adding new columns as necessary. ","value":"columns "},{"description":"<p>Uses a \"dense\" packing algorithm approach to fill in holes in the grid as smaller items appear.  <p>Note: This may cause items to appear out-of-order. ","value":"dense "},{"description":"<p>Permanently skips cells that are not filled with the current item.  The default auto-pacement algorithm packing approach. ","value":"sparse "}]},"css/properties/grid-auto-position":{"SUMMARY":"<p>Specifies the automatic default location if a grid container does not specify automatic-placement strategy via <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-flow'>grid-auto-flow</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-auto-position","VALUES":[{"description":"<p>Specifies the default starting grid column and grid row, respectively.  The two &lt;grid-line&gt; values are treated as though they were specified by <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-start'>grid-column-start</a> and <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-end'>grid-column-end</a>. ","value":"&lt;grid-line&gt; / &lt;grid-line&gt; "}]},"css/properties/grid-auto-rows":{"SUMMARY":"<p>Changes default size of grid rows.  Creates implicit grid tracks when a grid item is placed into a row that is not explicitly sized (by <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-rows'>grid-template-rows</a> ) or when the auto-placement algorithm has generated additional rows. This property (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-auto-columns'>grid-auto-columns</a>) specifies the size of such implicitly-created tracks. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-auto-rows","VALUES":[{"description":"<p>A space-separated track list specifying the line names and track sizing functions of the grid. ","value":"&lt;track-size&gt; "}]},"css/properties/grid-column":{"SUMMARY":"<p>Controls a grid item's placement in a grid area, particularly grid position and a grid span.   Shorthand for setting <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-start'>grid-column-start</a> and <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-end'>grid-column-end</a> in a single declaration. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-column","VALUES":[{"description":"<p>If two &lt;grid-line&gt; values are specified, the grid-column-start property is set to the value before the slash, and the grid-column-end property is set to the value after the slash. If the second value is omitted, then if the first value is an identifier (&lt;ident&gt;), the grid-column-end property is also set to that &lt;ident&gt;; otherwise, it is set to \"auto\". ","value":"&lt;grid-line&gt; [ / &lt;grid-line&gt; ] "}]},"css/properties/grid-column-end":{"SUMMARY":"<p>Controls a grid item's placement in a grid area as well as  grid position and a grid span. The grid-column-end property (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-start'>grid-row-start</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-end'>grid-row-end</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-start'>grid-column-start</a>) determines a grid item's placement by specifying the grid lines of a grid item's grid area. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-column-end","VALUES":[{"description":"<p>Specifies that the corresponding edge of the item's grid area is the grid line at the before edge of the named grid area. If the named grid area doesn't exist, this value is treated as ‘auto’ (computing either to ‘auto’ or ‘span 1’). ","value":"&lt;ident&gt; "},{"description":"<p>Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if &lt;integer&gt; is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the &lt;integer&gt; is negative). ","value":"&lt;integer&gt; &lt;ident&gt; "},{"description":"<p>Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line. ","value":"span [ &lt;integer&gt; or &lt;ident&gt;] "},{"description":"<p>Contributes a line, a span, or nothing (automatic) to the item's row placement or column placement. ","value":"&lt;grid-line&gt; "},{"description":"<p>The default property that does not alter the grid item’s placement. ","value":"auto "}]},"css/properties/grid-column-position":{"SUMMARY":"<p>Specifies the column position to place a grid item  based upon integer location, string value, or column size. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-column-position","VALUES":[{"description":"<p>A value that specifies a grid line in the grid. ","value":"&lt;integer&gt; "},{"description":"<p>A name value that specifies a named grid line. ","value":"&lt;string&gt; "},{"description":"<p>Refers to a named Grid area and computes to a Grid line with the starting edge of the Grid area. ","value":"&lt;identifier&gt; "},{"description":"<p>Places a Grid item based on an automatic placement algorithm. ","value":"auto "}]},"css/properties/grid-column-span":{"SUMMARY":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/grid-column'>css/properties/grid-column</a>. This property has been removed from the specification. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-column-span","VALUES":[{"description":"<p>Integer value that specifies the number of columns to span. ","value":"integer "}]},"css/properties/grid-column-start":{"SUMMARY":"<p>Determines a grid item's placement by specifying the starting grid lines of a grid item's grid area .  A grid item's placement in a grid area consists of a grid position and a grid span. See also ( <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-start'>grid-row-start</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-end'>grid-row-end</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-end'>grid-column-end</a>) ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-column-start","VALUES":[{"description":"<p>If there is a named grid area with the specified name, contributes a line to the placement by specifying the line at the corresponding edge of that named grid area. Otherwise, if there is a named line with the specified name, contributes a line to the placement by specifying the first line of that name. Otherwise, contributes nothing to the placement. ","value":"&lt;ident&gt; "},{"description":"<p>Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if &lt;integer&gt; is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the &lt;integer&gt; is negative). ","value":"&lt;integer&gt; &lt;ident&gt; "},{"description":"<p>Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line. ","value":"span [ <strong>&lt;integer&gt;</strong> <em>or</em> <strong>&lt;ident&gt;</strong> ] - "},{"description":"<p>Contributes a line, a span, or nothing (automatic) to the item's row placement or column placement. ","value":"&lt;grid-line&gt; "},{"description":"<p>Default setting.   Contributes nothing to the grid item’s placement. ","value":"auto "}]},"css/properties/grid-definition-columns":{"SUMMARY":"<p>This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the column, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the column. <p>As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as 'first' and 'header'. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-definition-columns","VALUES":[{"description":"<p>No initial grid; any columns are implicitly generated with their size determined by the ‘grid-auto-columns’ property. ","value":"none "},{"description":"<p>The track-list syntax is: <p>&lt;track-list&gt;    = &#91; &lt;string&gt;* &#91; &lt;track-size&gt; &#124; &lt;repeat-function&gt; &#93; &#93;+ &lt;string&gt;* <p>&lt;track-size&gt;    = minmax( &lt;track-breadth&gt; , &lt;track-breadth&gt; ) &#124; auto &#124; &lt;track-breadth&gt; <p>&lt;track-breadth&gt; = &lt;length&gt; &#124; &lt;percentage&gt; &#124; &lt;flex&gt; &#124; min-content &#124; max-content <p>Where the values are described as: <ul><li> &lt;length&gt;<li> &lt;percentage&gt;: Percentage values are relative to the grid container width in grid column tracks. If the grid container measure is an indefinite size, &lt;percentage&gt; values relative to that size are treated as ‘auto’.<li> &lt;flex&gt;: A non-negative dimension with the unit \"fr\". Each &lt;flex&gt; value takes a share of the remaining space in proportion to its value. See Flexible Lengths for more details.<li> max-content: Largest max size contribution of the grid items occupying the grid track.<li> min-content: Largest min size contribution of the grid items occupying the grid track.<li> minmax(min, max): Defines a size range greater than or equal to min and less than or equal to max. If max < min, then max is ignored and ‘minmax(min,max)’ is treated as min.<li> auto: Computes to ‘minmax(min-content, max-content)’.</ul>","value":"&lt;track-list&gt; "}]},"css/properties/grid-definition-rows":{"SUMMARY":"<p>This property can specify the length, a percentage of the grid container’s size, a measurement of the contents occupying the row, or a fraction of the free space in the grid. You can also specify a range using minmax(), which combines any of these measurements to define a min and max size for the row. <p>As well as referring to grid lines by their numerical index, you can also name lines. Names can make the grid-placement properties easier to understand and maintain. Lines can have multiple names, such as 'first' and 'header'. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-definition-rows","VALUES":[{"description":"<p>No initial grid; any rows are implicitly generated with their size determined by the ‘grid-auto-rows’ property. ","value":"none "},{"description":"<p>The track-list syntax is: <p>&lt;track-list&gt;    = &#91; &lt;string&gt;* &#91; &lt;track-size&gt; &#124; &lt;repeat-function&gt; &#93; &#93;+ &lt;string&gt;* <p>&lt;track-size&gt;    = minmax( &lt;track-breadth&gt; , &lt;track-breadth&gt; ) &#124; auto &#124; &lt;track-breadth&gt; <p>&lt;track-breadth&gt; = &lt;length&gt; &#124; &lt;percentage&gt; &#124; &lt;flex&gt; &#124; min-content &#124; max-content <p>Where the values are described as: <ul><li> &lt;length&gt;<li> &lt;percentage&gt;: Percentage values are relative to the extent (logical height) of the grid container in grid row tracks. If the extent of the grid container is an indefinite size, &lt;percentage&gt; values relative to that size are treated as ‘auto’.<li> &lt;flex&gt;: A non-negative dimension with the unit \"fr\". Each &lt;flex&gt; value takes a share of the remaining space in proportion to its value. See Flexible Lengths for more details.<li> max-content: Largest max size contribution of the grid items occupying the grid track.<li> min-content: Largest min size contribution of the grid items occupying the grid track.<li> minmax(min, max): Defines a size range greater than or equal to min and less than or equal to max. If max < min, then max is ignored and ‘minmax(min,max)’ is treated as min.<li> auto: Computes to ‘minmax(min-content, max-content)’.</ul>","value":"&lt;track-list&gt; "}]},"css/properties/grid-row":{"SUMMARY":"<p>Gets or sets a value that indicates which row an element within a Grid should appear in.  Shorthand for setting <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-start'>grid-row-start</a> and <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-end'>grid-row-end</a> in a single declaration. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-row","VALUES":[{"description":"<p>If two &lt;grid-line&gt; values are specified, the grid-row-start property is set to the value before the slash, and the grid-row-end property is set to the value after the slash.  <p>When the second value is omitted, then if the first value is an identifier (&lt;ident&gt;), the grid-row-end property is also set to that &lt;ident&gt;; otherwise, it is set to \"auto\". ","value":"&lt;grid-line&gt; [ / &lt;grid-line&gt; ] "}]},"css/properties/grid-row-end":{"SUMMARY":"<p>Determines a grid item’s placement by specifying the block-end.   A grid item's placement in a grid area consists of a grid position and a grid span. The grid-row-end property (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-start'>grid-row-start</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-start'>grid-column-start</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-end'>grid-column-end</a>) determines a grid item's placement by specifying the grid lines of a grid item's grid area. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-row-end","VALUES":[{"description":"<p>Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if &lt;integer&gt; is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the &lt;integer&gt; is negative). ","value":"&lt;integer&gt; &lt;ident&gt; "},{"description":"<p>Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line. ","value":"&lt;span&gt; [&lt;integer&gt; or &lt;ident&gt;] "},{"description":"<p>Contributes a line to the item's row placement or column placement. ","value":"&lt;grid-line&gt; "},{"description":"<p>Contributes nothing to the grid item’s placement.  Uses existing criteria. ","value":"auto "},{"description":"<p>If there is a named grid area with the specified name, contributes a line to the placement by specifying the line at the corresponding edge of that named grid area. Otherwise, if there is a named line with the specified name, contributes a line to the placement by specifying the first line of that name. Otherwise, contributes nothing to the placement. ","value":"&lt;indent&gt; "}]},"css/properties/grid-row-position":{"SUMMARY":"<p>Specifies a row position based upon an integer location, string value, or desired row size.  <p><a href='https://docs.webplatform.org/wiki/css/properties/grid-row'>css/properties/grid-row</a> is used as short-hand for grid-row-position and grid-row-position ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-row-position","VALUES":[{"description":"<p>Identifies the specified row. ","value":"integer "},{"description":"<p>Places an item with contiguous space available to the &lt;integer&gt; value. Using the &lt;string&gt; value only considers lines with that name. ","value":"span [integer] [string] "},{"description":"<p>Automatically places an item using the auto-placement algorithm. ","value":"auto "},{"description":"<p>Identifies the specified row. ","value":"string "}]},"css/properties/grid-row-start":{"SUMMARY":"<p>A grid item's placement in a grid area consists of a grid position and a grid span. The grid-row-start property (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-row-end'>grid-row-end</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-start'>grid-column-start</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-column-end'>grid-column-end</a>) determines a grid item's placement by specifying the grid lines of a grid item's grid area. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-row-start","VALUES":[{"description":"<p>Contributes a line, a span, or nothing (automatic) to the item's row placement or column placement. Values have the following meanings: <ul><li><strong>auto</strong> - The property contributes nothing to the grid item’s placement.<li><strong>&lt;ident&gt;</strong> - If there is a named grid area with the specified name, contributes a line to the placement by specifying the line at the corresponding edge of that named grid area. Otherwise, if there is a named line with the specified name, contributes a line to the placement by specifying the first line of that name. Otherwise, contributes nothing to the placement.<li><strong>&lt;integer&gt; &lt;ident&gt;</strong> - Contributes a line to the placement by specifying the Nth grid line. (Negative integers are allowed, but zero is not; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, it instead specifies the first grid line (or the last, if &lt;integer&gt; is negative). If not enough lines of that name exist, it specifies the last such named line (or the first, if the &lt;integer&gt; is negative).<li><strong>span</strong> [ <strong>&lt;integer&gt;</strong> <em>or</em> <strong>&lt;ident&gt;</strong> ] - Contributes a grid span to the placement by specifying that the corresponding edge of the item’s grid area is N grid lines from the opposite edge of the item's grid area. (Negative integers and zero are not allowed; if &lt;integer&gt; is omitted, it defaults to 1.) If a name is given as an &lt;ident&gt;, only lines with that name are counted. If no line with that name exists, the name is ignored. If not enough lines of that name exist, it spans to the last such named line.</ul>","value":"&lt;grid-line&gt; "}]},"css/properties/grid-template":{"SUMMARY":"<p>Shorthand for setting <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-columns'>grid-template-columns</a>, <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-rows'>grid-template-rows</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-areas'>grid-template-areas</a> in a single declaration. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-template","VALUES":[{"description":"<p>Sets all three individual properties to their initial values (\"none\"). ","value":"none "},{"description":"<p>Sets grid-template-columns and grid-template-rows to the specified values, and sets grid-template-areas to \"none\". ","value":"&lt;grid-template-columns&gt; / &lt;grid-template-rows&gt; "},{"description":"<p>Sets grid-template-columns to the track listing specified before the slash (or \"none\", if not specified). Sets grid-template-areas to the strings listed after the slash. Sets grid-template-rows to the &lt;track-size&gt;s following each string (filling in \"auto\" for any missing sizes), and splicing in the named lines defined before/after each size. <p>This syntax allows the author to align track names and sizes inline with their respective grid areas. ","value":"&lt;track-list&gt; / &lt;line-names&gt; &lt;string&gt; &lt;track-size&gt; &lt;line-names&gt; "}]},"css/properties/grid-template-areas":{"SUMMARY":"<p>Specifies named grid areas which are not associated with any particular grid item, but can be referenced from the grid-placement properties. The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-template-areas","VALUES":[{"description":"<p>The grid container does not define any named grid areas. ","value":"none "},{"description":"<p>A row is created for every separate string listed, and a column is created for each identifier or period (\".\") in the string. A period represents an unnamed area in the grid container. An identifier creates a named grid area with the identifier as its name. ","value":"&lt;string&gt; "}]},"css/properties/grid-template-columns":{"SUMMARY":"<p>Specifies (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-rows'>grid-template-rows</a>) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-template-columns","VALUES":[{"description":"<p>Indicates that there is no explicit grid; any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties. ","value":"none "},{"description":"<p>Specifies the track list for the grid columns. See <a href='http://www.w3.org/TR/css3-grid-layout/#track-list'>specification</a> for complete syntax. ","value":"&lt;track-list&gt; "},{"description":"<p>Indicates that the grid will align to its parent grid in that axis. Rather than specifying the sizes of rows/columns explicitly, they will be taken from the parent grid’s definition. If the grid container is not a grid item, this value computes to \"none\". ","value":"subgrid &lt;line-name-list&gt; "}]},"css/properties/grid-template-rows":{"SUMMARY":"<p>Specifies (with <a href='https://docs.webplatform.org/wiki/css/properties/grid-template-columns'>grid-template-columns</a>) the line names and track sizing functions of the grid. Each sizing function can be specified as a length, a percentage of the grid container’s size, a measurement of the contents occupying the column or row, or a fraction of the free space in the grid. ","URL":"https://docs.webplatform.org/wiki/css/properties/grid-template-rows","VALUES":[{"description":"<p>Specifies the track list for the grid columns. See <a href='http://www.w3.org/TR/css3-grid-layout/#track-list'>specification</a> for complete syntax. ","value":"&lt;track-list&gt; "},{"description":"<p>Indicates that the grid will align to its parent grid in that axis. Rather than specifying the sizes of rows/columns explicitly, they will be taken from the parent grid’s definition. If the grid container is not a grid item, this value computes to \"none\". ","value":"subgrid &lt;line-name-list&gt; "},{"description":"<p>Indicates that there is no explicit grid; any rows/columns will be implicitly generated, and their size will be determined by the grid-auto-rows and grid-auto-columns properties. ","value":"none "}]},"css/properties/hanging-punctuation":{"SUMMARY":"<p>If a punctuation mark is present, this property determines if the punctuation mark hangs and whether it can be placed outside the line box and the start or at the end of a line of text. ","URL":"https://docs.webplatform.org/wiki/css/properties/hanging-punctuation","VALUES":[{"description":"<p>A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification. ","value":"allow-end "},{"description":"<p>No character hangs ","value":"none "},{"description":"<p>This is an opening bracket or quote that is at the start of the first formatted line of an element that hangs. Any characters in the Unicode categories Ps, Pf, Pi are applied. ","value":"first "},{"description":"<p>This is a closing bracket or quote of an element at the end of the last formatted line. The element hangs and this applies to any characters in the Unicode categories Pe, Pf, and Pi. ","value":"last "},{"description":"<p>A stop or comma at the end of a line hangs ","value":"force-end "}]},"css/properties/height":{"SUMMARY":"<p>Sets the height of an element. The content area of the element height does not include the <a href='https://docs.webplatform.org/wiki/css/properties/padding'>padding</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border'>border</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/margin'>margin</a> of the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/height","VALUES":[{"description":"<p>If auto is set for the elements height, the browser will determine the height for the element. ","value":"auto "},{"description":"<p>The intrinsic minimum height ","value":"min-content "},{"description":"<p>Will take a number that is immediately followed by a length unit such as px, em, in,  etc. ","value":"height "},{"description":"<p>The containing block height minus horizontal margin, border, and padding ","value":"available "},{"description":"<p>Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly.  Negative values are not allowed. ","value":"percentage "},{"description":"<p>This will be either the large of the minimum height or the smaller of the preferred height and the available height ","value":"fit-content "},{"description":"<p>If border-box is used, the height or percentage defined will be applied to the element's border box. ","value":"border-box "},{"description":"<p>If content-box is used, the height or percentage defined will be applied to the element's content-box. ","value":"content-box "},{"description":"<p>The intrinsic preferred height ","value":"max-content "}]},"css/properties/hyphenate-limit-chars":{"SUMMARY":"<p>Specifies the minimum number of characters in a hyphenated word ","URL":"https://docs.webplatform.org/wiki/css/properties/hyphenate-limit-chars","VALUES":[{"description":"<p>Corresponds to a value of <code>5 2 2</code>, indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break. ","value":"auto "},{"description":"<p>One to three integer values, corresponding to the word limit, the minimum number of characters required before a hyphenation break, and the minimum number of characters required following a hyphenation break, respectively. <p>If the third value is missing it is equal to the second. <p>If the second and third values are missing they are given a value of <strong>auto</strong>. <p>Negative values are not allowed. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/integer'>integer</a> "}]},"css/properties/hyphenate-limit-lines":{"SUMMARY":"<p>Indicates the maximum number of successive hyphenated lines in an element. The ‘no-limit’ value means that there is no limit. ","URL":"https://docs.webplatform.org/wiki/css/properties/hyphenate-limit-lines","VALUES":[{"description":"<p>Indicates that hyphenation is not limited based on the number of consecutive hyphenated lines. In the flow above the consecutive hyphenated lines limit would be an infinitely large positive number. ","value":"no-limit "},{"description":"<p>Indicates the maximum number of successive hyphenated lines. <p>For instance, if <code>2</code>, then no more than 2 successive lines may end with a hyphenated word. If <code>0</code> then no lines may end with a hyphenated word. (Hyphenation is effectively disabled.) <p>Negative values are not allowed. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/integer'>integer</a> "}]},"css/properties/hyphenate-limit-zone":{"SUMMARY":"<p>Specifies the maximum amount of trailing whitespace (before justification) that may be left in a line before hyphenation is triggered to pull part of a word from the next line back up into the current one. ","URL":"https://docs.webplatform.org/wiki/css/properties/hyphenate-limit-zone","VALUES":[{"description":"<p>Specifies the width of the hyphenation zone, relative to the total line length. Negative values are not allowed. ","value":"percentage "},{"description":"<p>Indicates the width of the hyphenation zone. Lengths set in font-relative units (em, ex, ch) tend to be more useful here. Negative values are not allowed. ","value":"length "}]},"css/properties/hyphens":{"SUMMARY":"<p>Specifies whether or not words in a sentence can be split by the use of a manual or automatic hyphenation mechanism. ","URL":"https://docs.webplatform.org/wiki/css/properties/hyphens","VALUES":[{"description":"<p>Indicates that all word breaking is suppressed, even when explicitly specified with soft hyphens. ","value":"none "},{"description":"<p>Indicates that word breaking is allowed only where word breaking opportunities are suggested. These suggestions may come in the form of soft hyphens or hard hyphens. Soft hyphens (Unicode U+00AD, HTML <code>&amp;shy;</code>) can be inserted on the desired place. ","value":"manual "},{"description":"<p>Indicates that, in addition to suggested word breaking opportunities, word breaking opportunities are allowed where determined by a hyphenation resource (dictionary). Soft hyphens take priority over other hyphenation opportunities, but are still subject to the hyphenation controlled properties. By providing a language for the text (via the HTML <code>lang</code> attribute for example), a User Agent can determine the correct place to break a word. ","value":"auto "}]},"css/properties/justify-content":{"SUMMARY":"<p>The <strong>justify-content</strong> property aligns flex items along the main axis of the current line of the flex container, similarly to how <a href='https://docs.webplatform.org/wiki/css/properties/align-items'>align-items</a> aligns items in the cross axis. ","URL":"https://docs.webplatform.org/wiki/css/properties/justify-content","VALUES":[{"description":"<p>Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘center’. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items. ","value":"space-around "},{"description":"<p>Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item. ","value":"flex-start "},{"description":"<p>Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item. ","value":"flex-end "},{"description":"<p>Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.) ","value":"center "},{"description":"<p>Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘flex-start’. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same. ","value":"space-between "}]},"css/properties/kerning-mode":{"SUMMARY":"<p>Obsolete: Unsupported ","URL":"https://docs.webplatform.org/wiki/css/properties/kerning-mode"},"css/properties/knock-out":{"SUMMARY":"<p>Defines whether an element group is a knock-out group. When a group is set to <em>knock-out</em>, the elements in the group only composite and blend with elements outside the group. When a group is set to <em>preserve</em> (the default), the elements composite normally and blend with other elements inside and outside the group. ","URL":"https://docs.webplatform.org/wiki/css/properties/knock-out","VALUES":[{"description":"<p>Elements in the group composite normally and blend with other elements inside and outside the group. ","value":"preserve "},{"description":"<p>Elements in the group only composite and blend with elements outside the group. ","value":"knock-out "}]},"css/properties/left":{"SUMMARY":"<p>Sets the left edge of an element ","URL":"https://docs.webplatform.org/wiki/css/properties/left","VALUES":[{"description":"<p>Default. Default position, according to the regular HTML layout of the page. ","value":"auto "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object. ","value":"percentage "}]},"css/properties/letter-spacing":{"SUMMARY":"<p>The <code>letter-spacing</code> CSS property specifies the spacing behavior between text characters. ","URL":"https://docs.webplatform.org/wiki/css/properties/letter-spacing","VALUES":[{"description":"<p>The spacing is the normal spacing for the current font. ","value":"normal "},{"description":"<p>Indicates inter-character space in addition to the default space between characters, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Values may be negative, but there may be implementation-specific limits. ","value":"length "}]},"css/properties/line-break":{"SUMMARY":"<p>Deprecated. Gets or sets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean. ","URL":"https://docs.webplatform.org/wiki/css/properties/line-break","VALUES":[{"description":"<p>Stricter line-breaking rules are enforced. ","value":"strict "},{"description":"<p>Default. Normal line-breaking mode is applied. ","value":"normal "}]},"css/properties/line-height":{"SUMMARY":"<p>The line-height property specifies the height of an inline block level element. The value of the line-height property cannot be negative. ","URL":"https://docs.webplatform.org/wiki/css/properties/line-height","VALUES":[{"description":"<p>This value has no effect on the rendering of the element and for block inline elements it is equivalent to 'normal.' ","value":"none "},{"description":"<p>Take the height fixed by the default css of the user browser.  In most cases, it multiplies the height of the font by 1.2. ","value":"normal "},{"description":"<p>The used value of the property is this number multiplied by the element's font size. Negative values cannot be used. ","value":"&lt;number&gt; "},{"description":"<p>The specified length is used in the calculation of the line box height: a number immediately followed by a length unit - <code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>. Negative values cannot be used. ","value":"&lt;length&gt; "},{"description":"<p>The value of this property is determined by multiplying this number by the element's font size. Negative values cannot be used. ","value":"&lt;percentage&gt; "}]},"css/properties/list-style":{"SUMMARY":"<p>Shorthand property that sets the <a href='https://docs.webplatform.org/wiki/css/properties/list-style-type'><code>list-style-type</code></a>, <a href='https://docs.webplatform.org/wiki/css/properties/list-style-position'><code>list-style-position</code></a> and <a href='https://docs.webplatform.org/wiki/css/properties/list-style-image'><code>list-style-image</code></a> properties in one declaration. ","URL":"https://docs.webplatform.org/wiki/css/properties/list-style","VALUES":[{"description":"<p>The <code>list-style</code> property can contain up to three components: <ul><li> <code>list-style-type</code>: This takes any of the range of style values available to the <a href='https://docs.webplatform.org/wiki/css/properties/list-style-type'><strong>list-style-type</strong></a>, which includes <code>circle</code>, <code>disc</code>, <code>decimal</code>, <code>upper-roman</code>, etc. To see a the full list of possible values, see the <a href='https://docs.webplatform.org/wiki/css/properties/list-style-type'><strong>list-style-type</strong></a>. <li> <code>list-style-position</code>: Specifies if the list-item markers should appear inside or outside the content flow.<li> <code>list-style-image</code>: This property sets the image that will be used as the list item marker.</ul>","value":"list-style-type list-style-position list-style-image "},{"description":"<p>Takes the same specified value as the property for the element's parent. (Acts similarly to other uses of inherit in CSS.) ","value":"inherit "}]},"css/properties/list-style-image":{"SUMMARY":"<p>This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker. That also means that if the image is not available, it will show the style specified by list-style-property ","URL":"https://docs.webplatform.org/wiki/css/properties/list-style-image","VALUES":[{"description":"<p>Takes the same specified value as the property for the element's parent. (Acts similarly to other uses of inherit in CSS.) ","value":"inherit "},{"description":"<p>Default. No image is specified. ","value":"none "},{"description":"<p>Location of the image, where path/to/image.png is an absolute or relative URL.  More details can be found at the <a href='https://docs.webplatform.org/wiki/css/functions/url()'>css/functions/url()</a> section. ","value":"url(path/to/image.png) "}]},"css/properties/list-style-position":{"SUMMARY":"<p>Specifies if the list-item markers should appear inside or outside the content flow. ","URL":"https://docs.webplatform.org/wiki/css/properties/list-style-position","VALUES":[{"description":"<p>Default. Marker is placed outside the list item, and any wrapping text is not aligned under the marker. ","value":"outside "},{"description":"<p>Marker is placed inside the text, and any wrapping text is aligned under the marker. ","value":"inside "},{"description":"<p>Takes the same specified value as the property for the element's parent.  (Acts similarly to other uses of inherit in CSS.) ","value":"inherit "}]},"css/properties/list-style-type":{"SUMMARY":"<p>Specifies the type of list-item marker in a list. ","URL":"https://docs.webplatform.org/wiki/css/properties/list-style-type","VALUES":[{"description":"<p>square ","value":"square "},{"description":"<p>lower-alpha (a, b, c, d, e, etc.) ","value":"lower-alpha "},{"description":"<p>number. This is default for &lt;ol&gt; ","value":"decimal "},{"description":"<p>upper-alpha (A, B, C, D, E, etc.) ","value":"upper-alpha "},{"description":"<p>lower-greek ","value":"lower-greek "},{"description":"<p>number with leading zeros (01, 02, 03, etc.) ","value":"decimal-leading-zero "},{"description":"<p>upper-latin (A, B, C, D, E, etc.) ","value":"upper-latin "},{"description":"<p>lower-latin (a, b, c, d, e, etc.) ","value":"lower-latin "},{"description":"<p>filled circle. This is default for &lt;ul&gt; ","value":"disc "},{"description":"<p>upper-roman (I, II, III, IV, V, etc.) ","value":"upper-roman "},{"description":"<p>lower-roman (i, ii, iii, iv, v, etc.) ","value":"lower-roman "},{"description":"<p>traditional Georgian numbering ","value":"georgian "},{"description":"<p>The marker is traditional Armenian numbering ","value":"armenian "},{"description":"<p>No marker is shown ","value":"none "},{"description":"<p>The value of the listStyleType property is inherited from parent element ","value":"inherit "},{"description":"<p>circle ","value":"circle "}]},"css/properties/margin":{"SUMMARY":"<p>The <code>margin</code> property is shorthand to allow you to set all four margins of an element at once. Its equivalent longhand properties are <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> and <code>margin-left</code>. Negative values are also allowed. ","URL":"https://docs.webplatform.org/wiki/css/properties/margin","VALUES":[{"description":"<p><code>auto</code> is replaced by some suitable value by the browser. For example, it can be used for centering of blocks. <p><code>div { width:50%;  margin:0 auto; }</code> centers the <code>&lt;div&gt;</code> container horizontally. ","value":"auto "},{"description":"<p>Causes the element it is applied to to take on the same margin values as its parent. ","value":"inherit "},{"description":"<p>Specifies a fixed length, using any standard  <a href='http://docs.webplatform.org/wiki/css/units/length'>CSS length units</a> . Negative Values are allowed. ","value":"length "},{"description":"<p>A percentage relative to the width of the containing block. Negative values are allowed. ","value":"percentage "}]},"css/properties/margin-bottom":{"SUMMARY":"<p><code>margin-bottom</code> sets the bottom margin of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/margin-bottom","VALUES":[{"description":"<p>Inherits the parent element's specified <code>margin-bottom</code> width. ","value":"inherit "},{"description":"<p>Specifies a fixed length, using any standard  <a href='http://docs.webplatform.org/wiki/css/units/length'>CSS length units</a> . Negative Values are allowed. ","value":"length "},{"description":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-bottom, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "},{"description":"<p>The browser calculates a bottom margin dependent on the space available ","value":"auto "}]},"css/properties/margin-left":{"SUMMARY":"<p><code>margin-left</code> sets the left margin of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/margin-left","VALUES":[{"description":"<p>Specifies a fixed length, using any standard  <a href='http://docs.webplatform.org/wiki/css/units/length'>CSS length units</a> . Negative Values are allowed. ","value":"length "},{"description":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "},{"description":"<p>The browser calculates a left margin dependent on the space available. ","value":"auto "},{"description":"<p>Inherits the parent element's specified <code>margin-left</code> width. ","value":"inherit "}]},"css/properties/margin-right":{"SUMMARY":"<p><code>margin-right</code> sets the right margin of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/margin-right","VALUES":[{"description":"<p>Specifies a fixed length, using any standard  <a href='http://docs.webplatform.org/wiki/css/units/length'>CSS length units</a> . Negative Values are allowed. ","value":"length "},{"description":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "},{"description":"<p>The browser calculates a right margin dependent on the space available. ","value":"auto "},{"description":"<p>Inherits the parent element's specified <code>margin-right</code> width. ","value":"inherit "}]},"css/properties/margin-top":{"SUMMARY":"<p><code>margin-top</code> sets the top margin of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/margin-top","VALUES":[{"description":"<p>The browser calculates a bottom margin dependent on the space available. ","value":"auto "},{"description":"<p>Inherits the parent element's specified <code>margin-top</code> width. ","value":"inherit "},{"description":"<p>Specifies a fixed length, using any standard  <a href='http://docs.webplatform.org/wiki/css/units/length'>CSS length units</a> . Negative Values are allowed. ","value":"length "},{"description":"<p>A percentage of the width of the containing block. Negative values are allowed. (Even though this is margin-top, the browser will take the percentage from the width, not the height of the containing block.) ","value":"percentage "}]},"css/properties/marquee-direction":{"SUMMARY":"<p>The <code>marquee-direction</code> determines the initial direction in which the marquee content moves. ","URL":"https://docs.webplatform.org/wiki/css/properties/marquee-direction","VALUES":[{"description":"<p>moves the content in normal reading order ","value":"forward "},{"description":"<p>moves the content in reverse reading order ","value":"reverse "}]},"css/properties/marquee-play-count":{"SUMMARY":"<p>This property specifies how many times the marquee content moves ","URL":"https://docs.webplatform.org/wiki/css/properties/marquee-play-count","VALUES":[{"description":"<p>Any value of 0 and higher. If the value is greater than 16, the UA may stop after 16 loops. ","value":"&lt;non-negative-integer&gt; "},{"description":"<p>An infinite loop. The UA may stop after 16 loops. ","value":"infinite "}]},"css/properties/marquee-speed":{"SUMMARY":"<p>The <code>marquee-speed</code> determines how fast the marquee content scrolls. ","URL":"https://docs.webplatform.org/wiki/css/properties/marquee-speed","VALUES":[{"description":"<p>faster than slow, slower than fast ","value":"normal "},{"description":"<p>faster than normal ","value":"fast "},{"description":"<p>slower than normal ","value":"slow "}]},"css/properties/marquee-style":{"SUMMARY":"<p>The 'marquee-style' property determines a marquee's scrolling behavior. ","URL":"https://docs.webplatform.org/wiki/css/properties/marquee-style","VALUES":[{"description":"<p>Start completely off one side, scroll all the way across and completely off. ","value":"scroll "},{"description":"<p>Start completely off one side, scroll in, and stop as soon as no more content is off that side. ","value":"slide "},{"description":"<p>Bounce back and forth. ","value":"alternate "}]},"css/properties/mask":{"SUMMARY":"<p>This property is shorthand for setting <a href='https://docs.webplatform.org/wiki/css/properties/mask-image'>mask-image</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-mode'>mask-mode</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-repeat'>mask-repeat</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-position'>mask-position</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-clip'>mask-clip</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-origin'>mask-origin</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-composite'>mask-composite</a> and <a href='https://docs.webplatform.org/wiki/css/properties/mask-size'>mask-size</a>. Omitted values are set to their original properties' initial values. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask","VALUES":[{"description":"<p>Where <code> &lt;mask-layer&gt; = &lt;mask-reference&gt; &lt;masking-mode&gt;? ","value":"&lt;mask-layer&gt; "}]},"css/properties/mask-border":{"SUMMARY":"<p>This property is shorthand for setting <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-source'>mask-border-source</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-slice'>mask-border-slice</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-width'>mask-border-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-outset'>mask-border-outset</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-repeat'>mask-border-repeat</a>. Omitted values are set to their original properties' initial values. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-border","VALUES":[{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-outset'>mask-border-outset</a>. ","value":"&lt;mask-border-outset&gt; "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-repeat'>mask-border-repeat</a>. ","value":"&lt;mask-border-repeat&gt; "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-source'>mask-border-source</a>. ","value":"&lt;mask-border-source&gt; "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-slice'>mask-border-slice</a>. ","value":"&lt;mask-border-slice&gt; "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-width'>mask-border-width</a>. ","value":"&lt;mask-border-width&gt; "}]},"css/properties/mask-border-outset":{"SUMMARY":"<p>This property specifies the amount by which the mask box image area extends beyond the border box, similar to the CSS <a href='https://docs.webplatform.org/wiki/css/properties/border-image-outset'>border-image-outset</a> property. The four values set the outsets on the top, right, bottom, and left sides in that order. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-border-outset","VALUES":[{"description":"<p>Represents pixels if the image is a raster image or vector coordinates if the image is a vector image. ","value":"length "},{"description":"<p>Represents multiples of the corresponding computed <em>border-width</em>. ","value":"number "}]},"css/properties/mask-border-repeat":{"SUMMARY":"<p>This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. The first keyword applies to the horizontal sides, the second one applies to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first, similar to the CSS <a href='https://docs.webplatform.org/wiki/css/properties/border-image-repeat'>border-image-repeat</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-border-repeat","VALUES":[{"description":"<p>The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. ","value":"round "},{"description":"<p>The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles. ","value":"space "},{"description":"<p>The image is stretched to fill the area. ","value":"stretch "},{"description":"<p>The image is tiled (repeated) to fill the area. ","value":"repeat "}]},"css/properties/mask-border-slice":{"SUMMARY":"<p>This property specifies inward offsets from the top, right, bottom, and left edges of the mask image, dividing it into nine regions: four corners, four edges, and a middle. The middle image part is discarded and treated as fully transparent black unless the <em>fill</em> keyword is present. The four values set the top, right, bottom and left offsets in that order, similar to the CSS <a href='https://docs.webplatform.org/wiki/css/properties/border-image-slice'>border-image-slice</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-border-slice","VALUES":[{"description":"<p>If present, causes the middle part of the mask image to be preserved. If omitted, the middle part of the mask image is discarded, i.e., treated as empty. ","value":"fill "},{"description":"<p>Refers to the size of the mask box image area: the width of the area for horizontal offsets, the height for vertical offsets. ","value":"&lt;percentage&gt; "},{"description":"<p>Represents pixels if the image is a raster image or vector coordinates if the image is a vector image. ","value":"&lt;number&gt; "}]},"css/properties/mask-border-source":{"SUMMARY":"<p>Specifies an image to be used as a mask. An image that is empty, fails to download, is non-existent, or cannot be displayed is ignored and does not mask the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-border-source","VALUES":[{"description":"<p>Counts as an image layer but does not mask the element. ","value":"none "},{"description":"<p>A CSS image. ","value":"&lt;image&gt; "}]},"css/properties/mask-border-width":{"SUMMARY":"<p>This property sets the width of the mask box image, similar to the CSS <a href='https://docs.webplatform.org/wiki/css/properties/border-image-width'>border-image-width</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-border-width","VALUES":[{"description":"<p>Represents multiples of the corresponding computed <em>border-width</em>. ","value":"number "},{"description":"<p>If specified, the mask box image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice (see <a href='https://docs.webplatform.org/wiki/css/properties/mask-border-slice'>mask-border-slice</a>). If the image does not have the required intrinsic dimension then the corresponding <em>border-width</em> is used. ","value":"auto "},{"description":"<p>Represents pixels if the image is a raster image or vector coordinates if the image is a vector image. ","value":"length "},{"description":"<p>Refers to the size of the mask border image area: the width of the area for horizontal offsets, the height for vertical offsets. ","value":"percentage "}]},"css/properties/mask-clip":{"SUMMARY":"<p>Determines the mask painting area, which defines the area that is affected by the mask. The painted content of an element may be restricted to this area. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-clip","VALUES":[{"description":"<p>The painted content is not restricted (not clipped). The mask painting area is set to the bounding client rect. ","value":"no-clip "},{"description":"<p>The painted content is restricted (clipped) to the border box (painting box for objects without associated layout box). ","value":"border-box "},{"description":"<p>The painted content is restricted (clipped) to the padding box. ","value":"padding-box "},{"description":"<p>The painted content is restricted (clipped) to the content box (object bounding box for objects without associated layout box). ","value":"content-box "}]},"css/properties/mask-image":{"SUMMARY":"<p>This property sets the mask image or the mask source of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-image","VALUES":[{"description":"<p>A CSS image. ","value":"&lt;image&gt; "},{"description":"<p>A URL reference to a &lt;mask&gt; element, e.g., <code>url(commonmasks.svg#mask)</code>, or to a CSS image. ","value":"&lt;url&gt; "},{"description":"<p>A keyword indicating that the last direct child &lt;mask&gt; element of the element the mask-image property is applied to should be used as the mask source. It is equivalent to <code>select(mask:last-of-type)</code>. ","value":"child "},{"description":"<p>A functional notation accepting a comma-separated list of compound selectors that represents the first matching child &lt;mask&gt; element in DOM tree order. ","value":"&lt;child-selector&gt; "},{"description":"<p>Counts as an image layer but does not mask the element. ","value":"none "}]},"css/properties/mask-mode":{"SUMMARY":"<p>This property indicates whether the &lt;mask-reference&gt; is treated as a luminescence mask or as an alpha mask. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-mode","VALUES":[{"description":"<p>Indicates that the luminance values of the mask image should be used as the mask values. ","value":"luminance "},{"description":"<p>Implicitly sets alpha or luminance, depending on the &lt;mask-reference&gt; value of the mask-image property. If it is of type &lt;mask-source&gt;, the luminance values of the mask image should be used as the mask values; if it is of type &lt;image&gt;, the alpha values of the mask image should be used as the mask values. ","value":"auto "},{"description":"<p>Indicates that the alpha values of the mask image should be used as the mask values. ","value":"alpha "}]},"css/properties/mask-origin":{"SUMMARY":"<p>For elements rendered as a single box, specifies the mask positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes <em>box-decoration-break</em> operates on to determine the mask positioning area(s). ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-origin","VALUES":[{"description":"<p>The position is relative to the border box (painting box for objects without associated layout box). ","value":"border-box "},{"description":"<p>The position is relative to the content box (object bounding box for objects without associated layout box). ","value":"content-box "},{"description":"<p>The position is relative to the padding box. (For single boxes, <em>0 0</em> is the upper left corner of the padding edge; <em>100% 100%</em> is the lower right corner.) ","value":"padding-box "}]},"css/properties/mask-position":{"SUMMARY":"<p>This property sets the initial position of a mask image. Position can be specified in terms of percentages of the distance from upper left corner (original point) or using the keywords <strong>top, left, center, right</strong>, or <strong>bottom</strong>, similar to the CSS <a href='https://docs.webplatform.org/wiki/css/properties/background-position'>background-position</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-position","VALUES":[{"description":"<p>CSS3 includes the new four value <code>mask-position</code> syntax, which allows you to choose which sides of the element you are positioning the mask relative to (values 1 and 3), and then the distance away from those sides (values 2 and 4). So this example says that you want to position the mask 10 pixels from the bottom of the element, and 15 pixels from the right. If you miss out one of the offset values, the other is assumed to be 0. ","value":"bottom <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> right <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> "},{"description":"<p>Any standard CSS units are acceptable as <code>mask-position</code> values: px, ems, rems, mm, cm etc. Note that unit values specify the distance the top left corner of the mask is away from the top left corner of the element. For more details on these units, read <a href='https://docs.webplatform.org/wiki/css/data_types/length'>Length units</a>. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> "},{"description":"<p>Percentages are acceptable for <code>mask-position</code> values, and specify percentages of the overall width and height of the element in question. Note that percentage values specify the distance the top left corner of the mask is away from the top left corner of the element. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/percentage'>percentage</a> <a href='https://docs.webplatform.org/wiki/css/data_types/percentage'>percentage</a> "},{"description":"<p><code>mask-position</code> can also be expressed as keywords: left top, top, right top, left, center, right, left bottom, bottom, right bottom. These values do not relate specifically to the position of the top left hand corner of the mask, but rather the overall position of the mask inside the element. So for example, a value of <code>right top</code> will make the right and top sides of the mask flush to the top and right sides of the element it is applied to; the top left corner <em>won't</em> be positioned at the top right of the element! ","value":"left top "},{"description":"<p>If only a single value is included, that is taken as the horizontal value, and the vertical value is set as <code>center</code>. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/percentage'>percentage</a> "}]},"css/properties/mask-repeat":{"SUMMARY":"<p>Specifies how mask images are tiled (repeated) after they have been sized and positioned. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-repeat","VALUES":[{"description":"<p>Tiling of the mask object occurs in both the x and y directions as often as will fit within the background positioning area. If it does not fit a whole number of times, it is rescaled so that it does. ","value":"round "},{"description":"<p>Tiling of the mask object does not occur; that is, it is placed once and not repeated. ","value":"no-repeat "},{"description":"<p>Tiling of the mask object occurs in the x direction. ","value":"repeat-x "},{"description":"<p>Tiling of the mask object occurs in the y direction. ","value":"repeat-y "},{"description":"<p>Tiling of the mask object occurs in both the x and y directions as often as needed to cover the background area. ","value":"repeat "},{"description":"<p>Tiling of the mask object occurs in both the x and y directions as often as will fit within the background positioning area without being clipped, and then the images are spaced out to fill the area. ","value":"space "}]},"css/properties/mask-size":{"SUMMARY":"<p>Specifies the size of the mask images, similar to the CSS <a href='https://docs.webplatform.org/wiki/css/properties/background-size'>background-size</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-size","VALUES":[{"description":"<p>A floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). ","value":"length "},{"description":"<p>An integer, followed by a percent (%). A percentage value is relative to the background positioning area. ","value":"percentage "},{"description":"<p>The intrinsic height/width of the mask image is used. ","value":"auto "},{"description":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and height can fit inside the background positioning area. ","value":"contain "},{"description":"<p>Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and height can completely cover the background positioning area. ","value":"cover "}]},"css/properties/mask-type":{"SUMMARY":"<p>Defines whether the content of the &lt;mask&gt; element is treated as as luminance mask or an alpha mask. ","URL":"https://docs.webplatform.org/wiki/css/properties/mask-type","VALUES":[{"description":"<p>Indicates that the luminance values of the mask should be used. ","value":"luminance "},{"description":"<p>Indicates that the alpha values of the mask should be used. ","value":"alpha "}]},"css/properties/max-font-size":{"SUMMARY":"<p>This property must not be used. It is no longer included in any standard or standard track specification, nor is it implemented in any browser. It is only used when the <a href='https://docs.webplatform.org/wiki/css/properties/text-align-last'><strong>text-align-last</strong></a> property is set to <strong>size</strong>. It controls allowed adjustments of <a href='https://docs.webplatform.org/wiki/css/properties/font-size'><strong>font-size</strong></a> to fit line content. ","URL":"https://docs.webplatform.org/wiki/css/properties/max-font-size","VALUES":[{"description":"<p>The font size of the last line of an element is restricted to being less than either the computed font-size or this number, whichever is larger. ","value":"font-size "},{"description":"<p>The rendering agent determines the minium font size. ","value":"auto "}]},"css/properties/max-height":{"SUMMARY":"<p>Sets the maximum <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> for an element. It prevents the height of the element to exceed the specified value. If <a href='https://docs.webplatform.org/wiki/css/properties/min-height'>min-height</a> is specified and is greater than max-height, max-height is overridden. ","URL":"https://docs.webplatform.org/wiki/css/properties/max-height","VALUES":[{"description":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>Default. Clears the max-height value. The height property can have any value. ","value":"none "},{"description":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"<p>Specifies a fixed height. Negative values are not allowed. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for possible units. ","value":"length "},{"description":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"<p>A &lt;percentage&gt; relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as none. Negative values are not allowed. ","value":"percentage "},{"description":"<p>Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/functions/calc'>css calc function</a> for mode details. ","value":"calc() "}]},"css/properties/max-width":{"SUMMARY":"<p>Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width. ","URL":"https://docs.webplatform.org/wiki/css/properties/max-width","VALUES":[{"description":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"<p>Specifies a fixed width. Negative values are not allowed. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for possible units. ","value":"length "},{"description":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"<p>A &lt;percentage&gt; relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed. ","value":"percentage "},{"description":"<p>Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/functions/calc'>css calc function</a> for mode details. ","value":"calc() "},{"description":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>Default. Clears the max-width value. The width property can have any value. ","value":"none "}]},"css/properties/min-font-size":{"SUMMARY":"<p>Obsolete: unsupported. <p>This property is only used when the text-align-last property is set to size.  It controls allowed adjustments of font-size to fit line content. ","URL":"https://docs.webplatform.org/wiki/css/properties/min-font-size","VALUES":[{"description":"<p>The rendering agent determines the minium font size. ","value":"auto "},{"description":"<p>The font size of the last line of an element is restricted to being greater than either the computed font-size or this number, whichever is smaller. ","value":"font-size "}]},"css/properties/min-height":{"SUMMARY":"<p>Sets the minimum <a href='https://docs.webplatform.org/wiki/css/properties/height'>height</a> for an element. It prevents the height of the element to exceed the specified value. It overrides both the height & the max-height property if any them is specified below the min-height value. ","URL":"https://docs.webplatform.org/wiki/css/properties/min-height","VALUES":[{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "},{"description":"<p>Default. Behaves as 0 for non-flexbox elements. On <a href='https://docs.webplatform.org/wiki/css/flexbox'>flexbox</a>  acts as min-content. ","value":"auto "},{"description":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"<p>Specifies a fixed height. Negative values are not allowed. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for possible units. ","value":"length "},{"description":"<p>Fill the entire available space of from the containing block (Height minus horizontal margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"<p>A &lt;percentage&gt; relative to the height of the containing block. If the containing block has no height explicitly set then is is treated as 0. Negative values are not allowed ","value":"percentage "},{"description":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/functions/calc'>css calc function</a> for mode details. ","value":"calc "}]},"css/properties/min-width":{"SUMMARY":"<p>Sets the minimum width of an element. It limits the width property to be not smaller than the value specified in min-width. ","URL":"https://docs.webplatform.org/wiki/css/properties/min-width","VALUES":[{"description":"<p>Specifies a fixed width. Negative values are not allowed. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for possible units. ","value":"length "},{"description":"<p>The narrowest measure a box could take that doesn't lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"min-content "},{"description":"<p>A &lt;percentage&gt; relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed. ","value":"percentage "},{"description":"<p>Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fill-available "},{"description":"<p>See <a href='https://docs.webplatform.org/wiki/css/functions/calc'>css calc function</a> for mode details. ","value":"calc() "},{"description":"<p>If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"fit-content "},{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>Default. Clears the min-width value. The width property can have any value. ","value":"none "},{"description":"<p>The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers. ","value":"max-content "}]},"css/properties/object-fit":{"SUMMARY":"<p>The <em>object-fit</em> property defines how content of a replaced element (e.g., a video or an image) is made to fit the dimensions of its containing box. ","URL":"https://docs.webplatform.org/wiki/css/properties/object-fit","VALUES":[{"description":"<p>The replaced content is sized to maintain its aspect ratio while fitting within the element's content box ","value":"contain "},{"description":"<p>The replaced content is sized to maintain its aspect ratio while filling the element's entire content box ","value":"cover "},{"description":"<p>The replaced content is not resized to fit inside the element's content box ","value":"none "},{"description":"<p>Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size ","value":"scale-down "},{"description":"<p>The replaced content is sized to fill the element's box ","value":"fill "}]},"css/properties/opacity":{"SUMMARY":"<p>The opacity property controls transparency and opacity of an element. Its values range from 0 to 1. Assuming defaults at parent level, an element with an opacity of 1 is completely opaque, whereas and element with an opacity of 0 is completely transparent. The opacity used when rendering an element is the product of its opacity and the opacity of its ancestors. ","URL":"https://docs.webplatform.org/wiki/css/properties/opacity","VALUES":[{"description":"<p>A <strong>floating-point</strong> value between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Any values outside the range will be clamped to this range. ","value":"alpha-value "},{"description":"<p>Indicates that the property takes the same computed value as the property for the element's parent. ","value":"inherit "}]},"css/properties/order":{"SUMMARY":"<p>The <strong>order</strong> property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups. ","URL":"https://docs.webplatform.org/wiki/css/properties/order","VALUES":[{"description":"<p>The ordinal group for this flex item. ","value":"&lt;integer&gt; "}]},"css/properties/orphans":{"SUMMARY":"<p>In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the old page. This property is normally used to control how page breaks occur. This property only affects paged media such as print. For example, if a paragraph can't fit on one page in its entirety it is split wherever it is possible. In this way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted, so many word processors require at least two lines to be left on an old page, instead of one. You can give it either a positive number (where 2 is the default) or inherit. <p>Note that the orphan property does not generally affect non-paged media such as screen. However, browsers supporting both orphans and columns will apply the intended functionality to columns as well. Also, the property only affects block-level elements. ","URL":"https://docs.webplatform.org/wiki/css/properties/orphans","VALUES":[{"description":"<p>Only positive values are allowed. An <strong>Integer</strong> that specifies or receives the minimum number of lines to print at the bottom of a page. ","value":"integer "},{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "}]},"css/properties/outline":{"SUMMARY":"<p>The CSS <code>outline</code> property is a shorthand property for setting one or more of the individual outline properties <a href='https://docs.webplatform.org/wiki/css/properties/outline-style'>outline-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/outline-width'>outline-width</a> and <a href='https://docs.webplatform.org/wiki/css/properties/outline-color'>outline-color</a> in a single rule. In most cases the use of this shortcut is preferable and more convenient. <p>Outlines differ from <a href='https://docs.webplatform.org/wiki/css/properties/border'>borders</a> in the following ways: <ul><li> Outlines do not take up space, they are drawn above the content.<li> Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. Internet Explorer attempts to place the smallest contiguous outline around all elements or shapes that are indicated to have an outline. Opera draws a non-rectangular shape around a construct.</ul>","URL":"https://docs.webplatform.org/wiki/css/properties/outline","VALUES":[{"description":"<p>The <code>outline</code> property can contain up to three components: <ul><li> <code>outline-color</code>: This can take any valid CSS color as its value.<li> <code>outline-style</code>: This takes any of the range of style values available to the <a href='https://docs.webplatform.org/wiki/css/properties/outline-style'><strong>outline-style</strong></a> property, which includes <code>none</code>, <code>dotted</code>, <code>dashed</code>, <code>solid</code>, <code>double</code>, <code>groove</code>, <code>ridge</code>, <code>inset</code>, <code>outset</code>. For more details about each, see the <a href='https://docs.webplatform.org/wiki/css/properties/outline-style'><strong>outline-style</strong></a> page.<li> <code>outline-width</code>: This takes a numeric value with any of the standard length units.</ul>","value":"outline-color outline-style outline-width "},{"description":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "}]},"css/properties/outline-color":{"SUMMARY":"<p>The outline-color property sets the color of the <a href='https://docs.webplatform.org/wiki/css/properties/outline'>outline</a> of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out. ","URL":"https://docs.webplatform.org/wiki/css/properties/outline-color","VALUES":[{"description":"<p>Specify the color to use on all outlines. This can be anywhere from one to four values representing the top, right, bottom, and left outline respectively. ","value":"&lt;color&gt; "},{"description":"<p>This is expected to perform a color inversion on the pixels on the screen. ","value":"invert "},{"description":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "}]},"css/properties/outline-offset":{"SUMMARY":"<p>The outline-offset property offsets the <a href='https://docs.webplatform.org/wiki/css/properties/outline'>outline</a> and draw it beyond the border edge. ","URL":"https://docs.webplatform.org/wiki/css/properties/outline-offset","VALUES":[{"description":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference (Length).  ","value":"&lt;length&gt; "}]},"css/properties/outline-style":{"SUMMARY":"<p>The outline-style property sets the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out. ","URL":"https://docs.webplatform.org/wiki/css/properties/outline-style","VALUES":[{"description":"<p>Looks as if it were coming out of the canvas. ","value":"ridge "},{"description":"<p>A single line segment. ","value":"solid "},{"description":"<p>Looks as if the content on the inside of the outline is sunken into the canvas. ","value":"inset "},{"description":"<p>Looks as if the content on the inside of the outline is coming out of the canvas. ","value":"outset "},{"description":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>Default. Outline is not drawn, color and width are ignored. ","value":"none "},{"description":"<p>Outline is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <a href='https://docs.webplatform.org/wiki/css/properties/outline-width'>outline-width</a> value. The border width must be at least 3 pixels wide to draw a double outline. ","value":"double "},{"description":"<p>Defined by the user agent (browser). Currently supported only in WebKit. This value allows user-agents to draw focus outlines on elements in an appropriate platform-native style, or in some other appropriate style if there is no platform-native style. ","value":"auto "},{"description":"<p>A series of round or square dots. ","value":"dotted "},{"description":"<p>Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the <a href='https://docs.webplatform.org/wiki/css/properties/outline-color'>outline-color</a>.) ","value":"groove "},{"description":"<p>A series of square-ended dashes. ","value":"dashed "}]},"css/properties/outline-width":{"SUMMARY":"<p>The outline-width property sets the width of the <a href='https://docs.webplatform.org/wiki/css/properties/outline'>outline</a> of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out. ","URL":"https://docs.webplatform.org/wiki/css/properties/outline-width","VALUES":[{"description":"<p>Less than the default width. ","value":"thin "},{"description":"<p>Greater than the default width. ","value":"thick "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"&lt;width&gt; "},{"description":"<p>This is a keyword indicating that the value is inherited from their parent's element calculated value. ","value":"inherit "},{"description":"<p>Default.   ","value":"medium "}]},"css/properties/outline/sv":{"SUMMARY":"<p>Enheten <code>outline</code> i CSS är en regel för att ställa in en eller fler individuella konturregler <a href='https://docs.webplatform.org/wiki/css/properties/outline-style'>outline-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/outline-width'>outline-width</a> och <a href='https://docs.webplatform.org/wiki/css/properties/outline-color'>outline-color</a> i en enda regel. I de flesta fall är det föredraget och mer passande att använda denna enhet. ","URL":"https://docs.webplatform.org/wiki/css/properties/outline/sv"},"css/properties/overflow":{"SUMMARY":"<p>The <code>overflow</code> property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion. ","URL":"https://docs.webplatform.org/wiki/css/properties/overflow","VALUES":[{"description":"<p>Content that exceeds the dimensions of the object is not shown. No scroll mechanism is applied. ","value":"hidden "},{"description":"<p>Content is clipped and scrolling is added only when necessary. ","value":"auto "},{"description":"<p>When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified. ","value":"no-display "},{"description":"<p>When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified. ","value":"no-content "},{"description":"<p>The default value for most elements. Content is not clipped and a scroll mechanism is not added. ","value":"visible "},{"description":"<p>Set <strong>overflow-x</strong> and <strong>overflow-y</strong> separately. ","value":"&lt;overflow-x&gt; &lt;overflow-y&gt; "},{"description":"<p>Content is clipped and a scroll mechanism is added, even if the content does not exceed the dimensions of the object. ","value":"scroll "}]},"css/properties/overflow-style":{"SUMMARY":"<p>Specifies the preferred scrolling methods for elements that overflow. ","URL":"https://docs.webplatform.org/wiki/css/properties/overflow-style","VALUES":[{"description":"<p>A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all the available content of the element and the smaller one the visible part. The smaller rectangle can be moved around by the user to move the content of the element accordingly. ","value":"panner "},{"description":"<p>The value ‘move’ refers to a method where the user can move the content of the element directly (rather than indirectly by moving a scrollbar or a panner). Typically, the mouse pointer changes into a hand or a cross of four arrows to indicate that the user can drag the content around with the mouse. Sometimes the user needs to explicitly activate the move mode and in that case he often can use both dragging (with the mouse) and key events to move the content. ","value":"move "},{"description":"<p>The marquee effect (value ‘marquee’) consists of the content moving autonomously, without any user events to control it. A user who waits long enough will eventually see all the content that overflows. ","value":"marquee "},{"description":"<p>Initial value. Indicates no preference. ","value":"auto "},{"description":"<p>Indicates the element does not display any scrolling mechanism, even when its content overflows.  <p>Unlike <a href='https://docs.webplatform.org/wiki/css/properties/overflow'><strong>overflow</strong></a>: <strong>hidden</strong>, elements with <strong>overflow-style</strong>: <strong>none</strong> can still be scrolled via touch panning, keyboard, or mouse wheel. ","value":"none "},{"description":"<p>Indicates the element displays a classic scrollbar-type control when its content overflows.   <p>Scrollbars do not overlay content, and therefore take up extra layout space along the edges of the element where they appear. ","value":"scrollbar "}]},"css/properties/overflow-wrap":{"SUMMARY":"<p>This property specifies whether or not particularly long words will be 'broken' (separated into multiple lines) if necessary in order to fit in within its container. ","URL":"https://docs.webplatform.org/wiki/css/properties/overflow-wrap","VALUES":[{"description":"<p>Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.) <p>This is the default option. ","value":"normal "},{"description":"<p>Lines can be broken at any point if necessary to preserve the limits of the container element -- for example, \"hamburger\" can be broken into \"ham\" and \"burger\" across separate lines. ","value":"break-word "}]},"css/properties/overflow-x":{"SUMMARY":"<p>The <code>overflow-x</code> property is a specific case of the generic <code>overflow</code> property. It controls how extra content exceeding the x-axis of the bounding box of an element is rendered. ","URL":"https://docs.webplatform.org/wiki/css/properties/overflow-x","VALUES":[{"description":"<p>Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame. ","value":"visible "},{"description":"<p>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object. ","value":"scroll "},{"description":"<p>Content that exceeds the dimensions of the object is not shown. ","value":"hidden "},{"description":"<p>Content is clipped and scrolling is added only when necessary. ","value":"auto "},{"description":"<p>When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified. ","value":"no-display "},{"description":"<p>When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified. ","value":"no-content "}]},"css/properties/overflow-y":{"SUMMARY":"<p>The <code>overflow-y</code> property is a specific case of the generic <code>overflow</code> property. It controls how extra content exceeding the y-axis of the bounding box of an element is rendered. ","URL":"https://docs.webplatform.org/wiki/css/properties/overflow-y","VALUES":[{"description":"<p>When the content doesn't fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified. ","value":"no-content "},{"description":"<p>Default. Content is not clipped and scroll bars are not added. Elements are clipped to the size of the containing window or frame. ","value":"visible "},{"description":"<p>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object. ","value":"scroll "},{"description":"<p>Content that exceeds the dimensions of the object is not shown. ","value":"hidden "},{"description":"<p>Content is clipped and scrolling is added only when necessary. ","value":"auto "},{"description":"<p>When the content doesn't fit in the content box, the whole box is removed, as if ‘display: none’ were specified. ","value":"no-display "}]},"css/properties/padding":{"SUMMARY":"<p>The <code>padding</code> optional CSS property sets the required padding space on one to four sides of an element. The padding area is the space between an element and its border. Negative values are not allowed but decimal values are permitted.  The element size is treated as fixed, and the content of the element shifts toward the center as padding is increased. <p>The <code>padding</code> property is a shorthand to avoid setting each side separately (<a href='https://docs.webplatform.org/wiki/css/properties/padding-top'>padding-top</a>, <a href='https://docs.webplatform.org/wiki/css/properties/padding-right'>padding-right</a>, <a href='https://docs.webplatform.org/wiki/css/properties/padding-bottom'>padding-bottom</a>, <a href='https://docs.webplatform.org/wiki/css/properties/padding-left'>padding-left</a>). ","URL":"https://docs.webplatform.org/wiki/css/properties/padding","VALUES":[{"description":"<p>Specifies a non-negative fixed width defined in pixels, pt, em, etc. . See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for details. ","value":"length "},{"description":"<p>Calculated using the dimensions of the containing block or element. ","value":"percentage "}]},"css/properties/padding-bottom":{"SUMMARY":"<p>The <code>padding-bottom</code> CSS property of an element sets the <a href='https://docs.webplatform.org/wiki/css/properties/padding'>padding</a> space required on the bottom of an element. The padding area is the space between the content of the element and its border. Contrary to <a href='https://docs.webplatform.org/wiki/css/properties/margin-bottom'>margin-bottom</a> values, negative values of <code>padding-bottom</code> are invalid. ","URL":"https://docs.webplatform.org/wiki/css/properties/padding-bottom","VALUES":[{"description":"<p>Specifies a positive fixed distance. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for details. ","value":"length "},{"description":"<p>Calculated using the dimensions of the containing block or element. ","value":"percentage "}]},"css/properties/padding-left":{"SUMMARY":"<p>The <code>padding-left</code> CSS property of an element sets the <a href='https://docs.webplatform.org/wiki/css/properties/padding'>padding</a> space required on the left side of an element. The padding area is the space between the content of the element and its border. Contrary to <a href='https://docs.webplatform.org/wiki/css/properties/margin-left'>margin-left</a> values, negative values of <code>padding-left</code> are invalid. ","URL":"https://docs.webplatform.org/wiki/css/properties/padding-left","VALUES":[{"description":"<p>Specifies a positive fixed width. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for details. ","value":"length "},{"description":"<p>A percentage with respect to the width of the containing block. ","value":"percentage "}]},"css/properties/padding-right":{"SUMMARY":"<p>The <code>padding-right</code> CSS property of an element sets the <a href='https://docs.webplatform.org/wiki/css/properties/padding'>padding</a> space required on the right side of an element. The padding area is the space between the content of the element and its border. Contrary to <a href='https://docs.webplatform.org/wiki/css/properties/margin-right'>margin-right</a> values, negative values of <code>padding-right</code> are invalid. ","URL":"https://docs.webplatform.org/wiki/css/properties/padding-right","VALUES":[{"description":"<p>Specifies a positive fixed width. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for details. ","value":"length "},{"description":"<p>A percentage with respect to the width of the containing block. ","value":"percentage "}]},"css/properties/padding-top":{"SUMMARY":"<p>The <code>padding-top</code> CSS property of an element sets the <a href='https://docs.webplatform.org/wiki/css/properties/padding'>padding</a> space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to <a href='https://docs.webplatform.org/wiki/css/properties/margin-top'>margin-top</a> values, negative values of <code>padding-top</code> are invalid. ","URL":"https://docs.webplatform.org/wiki/css/properties/padding-top","VALUES":[{"description":"<p>Specifies a positive fixed distance. See <a href='https://docs.webplatform.org/wiki/css/data_types/length'>length</a> for details. ","value":"length "},{"description":"<p>A percentage with respect to the height of the containing block. ","value":"percentage "}]},"css/properties/page-break-after":{"SUMMARY":"<p>The page-break-after property is supported in all major browsers. With CSS3, page-break-* properties are only aliases of the break-* properties. The <a href='http://www.w3.org/TR/css3-break/#page-break'>CSS3 Fragmentation spec</a> defines breaks for all CSS box fragmentation. ","URL":"https://docs.webplatform.org/wiki/css/properties/page-break-after","VALUES":[{"description":"<p>Insert page breaks after the element until it reaches a blank right page ","value":"right "},{"description":"<p>Default. Insert a page break after the element if necessary ","value":"auto "},{"description":"<p>Specifies that the value of the page-break-after property should be inherited from the parent element ","value":"inherit "},{"description":"<p>Insert a page break after the element ","value":"always "},{"description":"<p>Avoid inserting a page break after the element ","value":"avoid "},{"description":"<p>Behaves the same as <strong>auto</strong>. ","value":"empty string "},{"description":"<p>Insert page breaks after the element until it reaches a blank left page ","value":"left "}]},"css/properties/page-break-before":{"SUMMARY":"<p>The page-break-before property sets the page-breaking behavior before an element. With CSS3, page-break-* properties are only aliases of the break-* properties. The <a href='http://www.w3.org/TR/css3-break/#page-break'>CSS3 Fragmentation spec</a> defines breaks for all CSS box fragmentation. ","URL":"https://docs.webplatform.org/wiki/css/properties/page-break-before","VALUES":[{"description":"<p>Behaves the same as <strong>auto</strong>. ","value":"empty string "},{"description":"<p>Insert page breaks before the element until it reaches a blank left page. ","value":"left "},{"description":"<p>Insert page breaks before the element until it reaches a blank right page. ","value":"right "},{"description":"<p>Default. Insert a page break before the element if necessary. ","value":"auto "},{"description":"<p>Specifies that the value of the page-break-before property should be inherited from the parent element ","value":"inherit "},{"description":"<p>Insert a page break before the element. ","value":"always "},{"description":"<p>Avoid inserting a page break before the element. ","value":"avoid "}]},"css/properties/page-break-inside":{"SUMMARY":"<p>Sets the page-breaking behavior inside an element. With CSS3, page-break-* properties are only aliases of the break-* properties. The <a href='http://www.w3.org/TR/css3-break/#page-break'>CSS3 Fragmentation spec</a> defines breaks for all CSS box fragmentation. ","URL":"https://docs.webplatform.org/wiki/css/properties/page-break-inside","VALUES":[{"description":"<p>Forbid a page break inside the object, if possible. ","value":"avoid "},{"description":"<p>Behaves the same as <strong>auto</strong>. ","value":"empty string "},{"description":"<p>Inherit the value of the same property for the object's parent. ","value":"inherit "},{"description":"<p>Default.  Neither force nor forbid a page break inside the object. ","value":"auto "}]},"css/properties/pause":{"SUMMARY":"<p>The <code>pause</code> property determines how long a speech media agent should pause before and after presenting an element.  It is a shorthand for the <a href='https://docs.webplatform.org/wiki/css/properties/pause-before'><code>pause-before</code></a> and <a href='https://docs.webplatform.org/wiki/css/properties/pause-before'><code>pause-after</code></a> properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/pause"},"css/properties/pause-after":{"SUMMARY":"<p>The <code>pause-after</code> property determines how long a speech media agent should pause after presenting an element.  It may be replaced by the shorthand property <a href='https://docs.webplatform.org/wiki/css/properties/pause'><code>pause</code></a>, which sets pause time before and after. ","URL":"https://docs.webplatform.org/wiki/css/properties/pause-after"},"css/properties/pause-before":{"SUMMARY":"<p>The <code>pause-before</code> property determines how long a speech media agent should pause before presenting an element.  It may be replaced by the shorthand property <a href='https://docs.webplatform.org/wiki/css/properties/pause'><code>pause</code></a>, which sets pause time before and after. ","URL":"https://docs.webplatform.org/wiki/css/properties/pause-before"},"css/properties/perspective":{"SUMMARY":"<p>The perspective property defines how far an element is placed from the view on the z-axis, from the screen to the viewer. <p>Perspective defines how an object is viewed. In graphic arts, perspective is the representation on a flat surface of what the viewer's eye would see in a 3D space. (See <a href='http://en.wikipedia.org/wiki/Perspective_(graphical)'>Wikipedia</a> for more information about graphical perspective and for related illustrations.) <p>The illusion of perspective on a flat surface, such as a computer screen, is created by projecting points on the flat surface as they would appear if the flat surface were a window through which the viewer was looking at the object. In discussion of virtual environments, this flat surface is called a projection plane. ","URL":"https://docs.webplatform.org/wiki/css/properties/perspective","VALUES":[{"description":"<p>The distance the element is placed on the z-axis. Lengths must be positive. ","value":"<a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a> "},{"description":"<p>Default. ","value":"none "}]},"css/properties/perspective-origin":{"SUMMARY":"<p>The perspective-origin property establishes the origin for the <a href='https://docs.webplatform.org/wiki/css/properties/perspective'>perspective</a> property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.  <p>When used with perspective, perspective-origin changes the appearance of an object, as if a viewer were looking at it from a different origin. An object appears differently if a viewer is looking directly at it versus looking at it from below, above, or from the side. Thus, the perspective-origin is like a vanishing point.  <p>The default value of perspective-origin is 50% 50%. This displays an object as if the viewer's eye were positioned directly at the center of the screen, both top-to-bottom and left-to-right. A value of 0% 0% changes the object as if the viewer was looking toward the top left angle. A value of 100% 100% changes the appearance as if viewed toward the bottom right angle. ","URL":"https://docs.webplatform.org/wiki/css/properties/perspective-origin","VALUES":[{"description":"<p>Second value only. Equal to 0% or a zero height. This keyword displays the object as if the viewer were looking towards the top. ","value":"top "},{"description":"<p>Second value only. Equal to 100% or the full box height. This keyword displays the object as if the viewer were looking towards the bottom. ","value":"bottom "},{"description":"<p>A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px), that indicates the origin of transformation. ","value":"&lt;length&gt; "},{"description":"<p>Equal to 50% or half the length of the box. When given as the first value, this keyword displays the object as if the viewer was positioned on par with the object, from left-to-right. ","value":"center "},{"description":"<p>An integer, followed by a %. The value is a percentage of the total box length (for the first value) or the total box height (for the second value, if specified). The default is 50% 50%, as if the viewer was positioned directly in front of the object. ","value":"&lt;percentage&gt; "},{"description":"<p>Equal to 50% or half the height of the box. When given as the second value, this keyword displays the object as if the viewer was positioned on par with the object, from top-to-bottom. ","value":"center "},{"description":"<p>First value only. Equal to 0% or a zero length. This keyword displays the object as if the viewer were looking towards the left. ","value":"left "},{"description":"<p>First value only. Equal to 100% or the full box length. This keyword displays the object as if the viewer were looking towards the right. ","value":"right "}]},"css/properties/pointer-events":{"SUMMARY":"<p>The pointer-events property  allows you to control whether an element can be the target for the pointing device (e.g, mouse, pen) events. ","URL":"https://docs.webplatform.org/wiki/css/properties/pointer-events","VALUES":[{"description":"<p>For SVG only. The element can only be the target of a pointer event when the <code>visibility</code> property is set to visible and when the pointer is over the perimeter (i.e., stroke) of the element. ","value":"visibleStroke "},{"description":"<p>In HTML/XML content, this value and the value all have the same effect. In SVG content, this value and the value visiblePainted have the same effect. ","value":"auto "},{"description":"<p>The element may be the target of pointer events when the <code>visibility</code> property is set to visible, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element). ","value":"visible "},{"description":"<p>The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have the <code>pointer-events</code> set to some other value. ","value":"none "},{"description":"<p>For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the <code>fill</code>, <code>stroke</code> property is set to a value other than none. ","value":"painted "},{"description":"<p>The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element. ","value":"all "},{"description":"<p>For SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. ","value":"fill "},{"description":"<p>For SVG only. The element can only be the target of a pointer event when the <code>visibility</code> property is set to &lt;span class=\"value\"&gt;visible&lt;/span&gt; and when the pointer is over the interior (i.e., 'fill') of the element or the perimeter (i.e., 'stroke') of the element, and the <code>fill</code>, <code>stroke</code> property is set to a value other than none. ","value":"visiblePainted "},{"description":"<p>For SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. ","value":"stroke "},{"description":"<p>For SVG only. The element can only be the target of a pointer event when the <code>visibility</code> property is set to visible and when the pointer is over the interior (i.e., fill) of the element. ","value":"visibleFill "}]},"css/properties/position":{"SUMMARY":"<p>The position property controls the type of positioning used by an element within its parent elements. The effect of the position property depends on a lot of factors, for example the position property of parent elements. ","URL":"https://docs.webplatform.org/wiki/css/properties/position","VALUES":[{"description":"<p>Object is positioned according to the normal flow, and then offset by the <a href='https://docs.webplatform.org/wiki/css/properties/top'><strong>top</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/left'><strong>left</strong></a> properties. ","value":"relative "},{"description":"<p>Object is positioned relative to the viewport containing the content. Object stays in the viewport when scrolling. Usually used for navigation on mobile devices. Limited support. ","value":"fixed "},{"description":"<p>Inherits the value of the parent element. ","value":"inherit "},{"description":"<p>Default. Object has no special positioning; it follows the layout rules of HTML. Values of <a href='https://docs.webplatform.org/wiki/css/properties/top'>top</a>, <a href='https://docs.webplatform.org/wiki/css/properties/bottom'>bottom</a>, <a href='https://docs.webplatform.org/wiki/css/properties/left'>left</a> and <a href='https://docs.webplatform.org/wiki/css/properties/right'>right</a> have no impact. ","value":"static "},{"description":"<p>Object is positioned relative to nearest positioned ancestor—or to the initial containing block if no positioned ancestor exists—using the <a href='https://docs.webplatform.org/wiki/css/properties/top'><strong>top</strong></a> and <a href='https://docs.webplatform.org/wiki/css/properties/left'><strong>left</strong></a> properties. ","value":"absolute "}]},"css/properties/punctuation-trim":{"SUMMARY":"<p>Obsolete: unsupported. <p>This property determines whether or not a full-width punctuation mark character should be trimmed if it appears at the beginning of a line, so that its \"ink\" lines up with the first glyph in the line above and below. ","URL":"https://docs.webplatform.org/wiki/css/properties/punctuation-trim","VALUES":[{"description":"<p>Leading punctuation is not trimmed. ","value":"none "},{"description":"<p>Leading punctuation is trimmed. ","value":"start "}]},"css/properties/quotes":{"SUMMARY":"<p>Sets the type of quotation marks for embedded quotations. ","URL":"https://docs.webplatform.org/wiki/css/properties/quotes","VALUES":[{"description":"<p>The \"open-quote\" and \"close-quote\" values produce no quotation marks. ","value":"none "},{"description":"<p>The \"open-quote\" and \"close-quote\" values are taken from the specified list of pairs of quotation marks. The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. ","value":"[&lt;string&gt;  &lt;string&gt;]+ "}]},"css/properties/region-fragment":{"SUMMARY":"<p>Controls whether the last <a href='https://docs.webplatform.org/wiki/css/concepts/region'><em>region</em></a> in a <a href='https://docs.webplatform.org/wiki/css/concepts/region_chain'>chain</a> displays additional 'overset' content according its default <a href='https://docs.webplatform.org/wiki/css/properties/overflow'><strong>overflow</strong></a> property, or\tif it displays a <a href='https://docs.webplatform.org/wiki/css/concepts/fragment'>fragment</a> of content as if it were flowing into a subsequent region. ","URL":"https://docs.webplatform.org/wiki/css/properties/region-fragment","VALUES":[{"description":"<p>Region element overrides <a href='https://docs.webplatform.org/wiki/css/properties/overflow'><strong>overflow</strong></a> property, displaying whatever fragment of <a href='https://docs.webplatform.org/wiki/css/concepts/overset'>overset</a> content can fit within the region. ","value":"break "},{"description":"<p>Region element displays <a href='https://docs.webplatform.org/wiki/css/concepts/overset'>overset</a> content according to its <a href='https://docs.webplatform.org/wiki/css/properties/overflow'><strong>overflow</strong></a> property. ","value":"auto "}]},"css/properties/rest":{"SUMMARY":"<p>The <code>rest</code> property determines how long a speech media agent should pause in between presenting an element's main content and presenting the before and after cue sounds.  It is a shorthand for the <a href='https://docs.webplatform.org/wiki/css/properties/rest-before'><code>rest-before</code></a> and <a href='https://docs.webplatform.org/wiki/css/properties/rest-after'><code>rest-after</code></a> properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/rest"},"css/properties/rest-after":{"SUMMARY":"<p>The <code>rest-after</code> property determines how long a speech media agent should pause after presenting an element's main content, before presenting that element's <a href='https://docs.webplatform.org/wiki/css/properties/cue-after'> exit cue sound</a>.  It may be replaced by the shorthand property <a href='https://docs.webplatform.org/wiki/css/properties/rest'><code>rest</code></a>, which sets rest time before and after. ","URL":"https://docs.webplatform.org/wiki/css/properties/rest-after"},"css/properties/rest-before":{"SUMMARY":"<p>The <code>rest-before</code> property determines how long a speech media agent should pause after presenting an  <a href='https://docs.webplatform.org/wiki/css/properties/cue-before'> intro cue sound</a> for an element, before presenting that element's main content.  It may be replaced by the shorthand property <a href='https://docs.webplatform.org/wiki/css/properties/rest'><code>rest</code></a>, which sets rest time before and after. ","URL":"https://docs.webplatform.org/wiki/css/properties/rest-before"},"css/properties/right":{"SUMMARY":"<p>Specifies the position an element in relation to the right side of the containing element. ","URL":"https://docs.webplatform.org/wiki/css/properties/right","VALUES":[{"description":"<p>Integer, followed by a percent sign (%). The value is a percentage of the width of the parent object. ","value":"percentage "},{"description":"<p>Default. Position is determined by the regular HTML layout of the page. ","value":"auto "},{"description":"<p>Floating-point number, followed by an absolute units designator (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or a relative units designator (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "}]},"css/properties/shape-image-threshold":{"SUMMARY":"<p>Defines the alpha channel threshold used to extract a shape from an image. Can be thought of as a \"minimum opacity\" threshold; that is, a value of 0.5 means that the shape will enclose all the pixels that are more than 50% opaque. ","URL":"https://docs.webplatform.org/wiki/css/properties/shape-image-threshold","VALUES":[{"description":"<p>A numeric value used to set the opacity threshold used for extracting a shape from an image. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. ","value":"&lt;number&gt; "}]},"css/properties/shape-inside":{"SUMMARY":"<p>A future level of CSS Shapes will define a shape-inside property, which will define a shape to wrap content within the element. See Editor's Draft &lt;http://dev.w3.org/csswg/css-shapes/&gt; and CSSWG wiki page on next-level plans &lt;http://wiki.csswg.org/spec/css-shapes&gt; ","URL":"https://docs.webplatform.org/wiki/css/properties/shape-inside"},"css/properties/shape-margin":{"SUMMARY":"<p>Adds a margin to a <a href='https://docs.webplatform.org/wiki/css/properties/shape-outside'>shape-outside</a>. In effect, defines a new shape that is the smallest contour around all the points that are the <em>shape-margin</em> distance outward perpendicular to each point on the underlying shape. For points where a perpendicular direction is not defined (e.g., a triangle corner), takes all points on a circle centered at the point and with a radius of the <em>shape-margin</em> distance. This property accepts only non-negative values. ","URL":"https://docs.webplatform.org/wiki/css/properties/shape-margin","VALUES":[{"description":"<p>Sets the margin of the shape to a percentage of the width of the element’s containing block. ","value":"&lt;percentage&gt; "},{"description":"<p>Sets the margin of the shape to the &lt;length&gt;. ","value":"&lt;length&gt; "}]},"css/properties/shape-outside":{"SUMMARY":"<p>Declares a shape around which text should be wrapped, with possible modifications from the <a href='https://docs.webplatform.org/wiki/css/properties/shape-margin'>shape-margin</a> property. The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area. ","URL":"https://docs.webplatform.org/wiki/css/properties/shape-outside","VALUES":[{"description":"<p>If &lt;image&gt; references an image (fetched using the CORS-enabled fetch method defined by the HTML5 specification), the shape is extracted and computed based on the alpha channel of the image as defined by <a href='https://docs.webplatform.org/wiki/css/properties/shape-image-threshold'>shape-image-threshold</a>. If &lt;image&gt; does not reference an image or if the fetch attempt results in any error such that there is no fallback image, the effect is as if the value <em>auto</em> had been specified. ","value":"&lt;image&gt; "},{"description":"<p>The float area is unaffected. ","value":"none "},{"description":"<p>The shape is computed based on the values of one of <em>inset, circle, ellipse</em> or <em>polygon</em>.  If shape-box is not supplied, then the reference box defaults to margin-box. <ul><li> <code>inset(&lt;shape-arg&gt;{1,4} [round&lt;border-radius&gt;])</code>. Defines an inset rectangle. The basic syntax for inset is the same as the margin shorthand syntax (see <a href='https://docs.webplatform.org/wiki/css/properties/margin'>margin</a> for details).  The optional border-radius argument  defines an inset's rounded corners using the border-radius shorthand syntax (see <a href='https://docs.webplatform.org/wiki/css/properties/border-radius'>border-radius</a> for details).</ul><ul><li> <code>circle([&lt;shape-radius&gt;] [at &lt;position&gt;])</code> The shape-radius argument is the radius of the circle. The position argument defines the center point of the circle and has the same syntax as background-position (see <a href='https://docs.webplatform.org/wiki/css/properties/background-position'>background-position</a> for details).</ul><ul><li> <code>ellipse([&lt;shape-radius&gt;{2}] [at &lt;position&gt;])</code> The shape-radius argument is the radius of the circle. The position argument defines the center point of the circle and has the same syntax as background-position (see <a href='https://docs.webplatform.org/wiki/css/properties/background-position'>background-position</a> for details).</ul><ul><li> <code>polygon([&lt;fill-rule&gt;,] [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</code> The fill-rule is used to determine the interior of the polygon (see the SVG <a href='https://docs.webplatform.org/wiki/svg/attributes/fill-rule'>fill-rule</a> for details). Each pair in the shape-arg represents x and y coordinates of each vertex in the polygon.</ul>","value":"&lt;basic-shape&gt; "},{"description":"<p>The shape is defined by the CSS Box Model of the element the shape is applied to: <ul><li> <code>margin-box</code><li> <code>border-box</code><li> <code>padding-box</code><li> <code>content-box</code></ul>","value":"&lt;shape-box&gt; "}]},"css/properties/speak":{"SUMMARY":"<p>The <code>speak</code> property determines whether or not a speech synthesizer will read aloud the contents of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/speak"},"css/properties/speak-as":{"SUMMARY":"<p>The <code>speak-as</code> property determines how the speech synthesizer interprets the content: words as whole words or as a sequence of letters,  numbers as a numerical value or a sequence of digits, punctuation as pauses in speech or named punctuation characters. ","URL":"https://docs.webplatform.org/wiki/css/properties/speak-as"},"css/properties/tab-size":{"SUMMARY":"<p>The tab-size CSS property is used to customise the width of a tab (U+0009) character. ","URL":"https://docs.webplatform.org/wiki/css/properties/tab-size","VALUES":[{"description":"<p>The number of spaces in a tab. Must be positive. ","value":"&lt;integer&gt; "},{"description":"<p>Inherits from the parent element. ","value":"inherit "}]},"css/properties/table-layout":{"SUMMARY":"<p>The 'table-layout' property controls the algorithm used to lay out the table cells, rows, and columns. ","URL":"https://docs.webplatform.org/wiki/css/properties/table-layout","VALUES":[{"description":"<p>Default. Column width is set by the widest unbreakable content in the column cells. The width of the table and its cells depends on the content of the cells. ","value":"auto "},{"description":"<p>Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. It does not depend on the content of the cells. Rendering is faster as the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. ","value":"fixed "},{"description":"<p>This features inherits table-layout property  from the parent element. ","value":"inherit "}]},"css/properties/text-align":{"SUMMARY":"<p>The <code>text-align</code> CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-align","VALUES":[{"description":"<p>Specifies <em><code>start</code></em> alignment of the first line and any line immediately after a forced line break; and <em><code>end</code></em> alignment of any remaining lines not affected by <a href='https://docs.webplatform.org/wiki/css/properties/text-align-last'><strong>text-align-last</strong></a>. ","value":"start end "},{"description":"<p>The inline contents are aligned to the right edge of the line box. ","value":"right "},{"description":"<p>The inline contents are centered within the line box. ","value":"center "},{"description":"<p>The first occurrence of the one-char string is the element used for alignment. the keyword that follows or precedes it indicates how it is aligned. This allows to align numeric values on the decimal point, for instance. ","value":"&lt;string&gt; "},{"description":"<p>The same as <em><code>left</code></em> if direction is left-to-right and <em><code>right</code></em> if direction is right-to-left. ","value":"start "},{"description":"<p>The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph. ","value":"justify "},{"description":"<p>The same as <em><code>right</code></em> if direction is left-to-right and <em><code>left</code></em> if direction is right-to-left. ","value":"end "},{"description":"<p>Similar to inherit with the difference that the value <em><code>start</code></em> and <em><code>end</code></em> are calculated according the parent's direction and are replaced by the adequate <em><code>left</code></em> or <em><code>right</code></em> value. ","value":"match-parent "},{"description":"<p>The inline contents are aligned to the left edge of the line box. ","value":"left "}]},"css/properties/text-align-last":{"SUMMARY":"<p>The <code>text-align-last</code> CSS property describes how the last line of a block element or a line before line break is aligned in its parent block element. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-align-last","VALUES":[{"description":"<p>The same as <code>right</code> if direction is left-to-right and <code>left</code> if direction is right-to-left. ","value":"end "},{"description":"<p>Text is aligned to the left. ","value":"left "},{"description":"<p>Text is aligned to the right. ","value":"right "},{"description":"<p>The text is centered within the line box. ","value":"center "},{"description":"<p>Default. Text is aligned like the other lines in the object, using the value of the <a href='https://docs.webplatform.org/wiki/css/properties/text-align'><strong>text-align</strong></a> property. ","value":"auto "},{"description":"<p>Text is justified if ‘text-justify’ is ‘distribute’,  and the same as <code>start</code> value if otherwise. ","value":"justify "},{"description":"<p>The same as <code>left</code> if direction is left-to-right and <code>right</code> if direction is right-to-left. ","value":"start "}]},"css/properties/text-autospace":{"SUMMARY":"<p>When non-ideographic characters (such as numbers) are presented alongside ideographic characters, many designers prefer to include spacing to separate it from the surrounding ideographs.  This property automates the creation of that space by introducing an in-line margin, the width of which corresponds to the width of existing ideographs. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-autospace","VALUES":[{"description":"<p>Default. No effect takes place—that is, no extra space is added. ","value":"none "},{"description":"<p>Creates extra spacing between runs of ideographic and non-ideographic text, such as Latin-based, Cyrillic, Greek, Arabic, or Hebrew text. ","value":"ideograph-alpha "},{"description":"<p>Creates extra spacing between runs of ideographic text and numeric characters. ","value":"ideograph-numeric "},{"description":"<p>Creates extra spacing between a normal (non-wide) parenthesis and an ideograph. ","value":"ideograph-parenthesis "},{"description":"<p>Extends the width of the space character when it is adjacent to ideographs. ","value":"ideograph-space "}]},"css/properties/text-decoration":{"SUMMARY":"<p>The <strong>text-decoration</strong> CSS property is used to set the text formatting to <strong>underline</strong>, <strong>overline</strong>, <strong>line-through</strong> or <strong>blink</strong>. &lt;br /&gt; <strong>underline</strong> and <strong>overline</strong> decorations are positioned under the text, <strong>line-through</strong> over it. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-decoration","VALUES":[{"description":"<p>Produces no text decoration. ","value":"none "},{"description":"<p>Each line of text is underlined. ","value":"underline "},{"description":"<p>Each line of text has a line above it. ","value":"overline "},{"description":"<p>Each line of text has a line through the middle. ","value":"line-through "},{"description":"<p>Text blinks. ","value":"blink "}]},"css/properties/text-decoration-color":{"SUMMARY":"<p>Sets the color of any text decoration, such as underlines, overlines, and strike throughs. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-decoration-color","VALUES":[{"description":"<p>The color data type value can be a named color keyword, or in hexadecimal, RGB, RGBa, HSL or HSLa notation. See the <a href='https://docs.webplatform.org/wiki/css/color'>CSS color values</a> page for more details. ","value":"color "}]},"css/properties/text-decoration-line":{"SUMMARY":"<p>Sets what kind of line decorations are added to an element, such as underlines, overlines, etc. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-decoration-line","VALUES":[{"description":"<p>The text alternates between visible and invisible. ","value":"blink "},{"description":"<p>Produces no text decoration. ","value":"none "},{"description":"<p>Each line of text is underlined. ","value":"underline "},{"description":"<p>Each line of text has a line above it. ","value":"overline "},{"description":"<p>Each line of text has a line through the middle. ","value":"line-through "}]},"css/properties/text-decoration-skip":{"SUMMARY":"<p>Specifies what parts of an element’s content are  skipped over when applying any text decoration. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-decoration-skip","VALUES":[{"description":"<p>The text decoration will be inset slightly, so that two side by side elements do not appear to have a single continuous decoration. This is important for Chinese content, where underlining is a form of punctuation. ","value":"edges "},{"description":"<p>Will not skip anything; the text decoration will be drawn for all text content ","value":"none "},{"description":"<p>Will skip the element (including it’s margin) if it’s atomic inline ","value":"object "},{"description":"<p>Will skip white space,  including: <ul><li> regular spaces - U+0020<li> tabs - U+0009<li> nbsp - U+00A0<li> ideographic space - U+3000<li> all fixed width spaces - examples: U+2000 to U+200A, U+202F and U+205F<li> any adjacent letter-spacing or word-spacing</ul>","value":"spaces "},{"description":"<p>Will skip over where any glyphs are drawn. It will interrupt the decoration line so that the text will show through where otherwise the decoration would cross through the text. This commonly includes ascenders and descenders of glyphs.  <p>Note: The UA also may skip over small distances on the right or the left side of the glyph outline ","value":"ink "},{"description":"<p>Will skip over the box's margin, border, and padding areas. <p>Note: It is not known yet if this is a needed value ","value":"box-decoration "}]},"css/properties/text-decoration-style":{"SUMMARY":"<p>This property specifies the style of the text decoration line drawn on the specified element. The intended meaning for the values are the same as those of the border-style-properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-decoration-style","VALUES":[{"description":"<p>A single line segment ","value":"solid "},{"description":"<p>Two solid lines that are parallel with some space between them ","value":"double "},{"description":"<p>A series of round dots ","value":"dotted "},{"description":"<p>A series of square-ended dashes ","value":"dashed "},{"description":"<p>Indicates a wavy line ","value":"wavy "}]},"css/properties/text-emphasis":{"SUMMARY":"<p>The text-emphasis property will apply special emphasis marks to the elements text. Slightly similar to the text-decoration property only that this property can have affect on the line-height. It also is noted that this is shorthand for text-emphasis-style and for text-emphasis-color. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-emphasis","VALUES":[{"description":"<p>Displays large circles as marks ","value":"circle "},{"description":"<p>Displays double circles as marks ","value":"double-circle "},{"description":"<p>There are no emphasis marks ","value":"none "},{"description":"<p>Displays triangles as marks ","value":"triangle "},{"description":"<p>It is filled with a solid color ","value":"filled "},{"description":"<p>Displays sesames as marks ","value":"sesame "},{"description":"<p>The shape has an empty space ","value":"open "},{"description":"<p>Display the given string as marks. Authors should not specify more than one character in &lt;string&gt;. The UA may truncate or ignore strings consisting of more than one grapheme cluster. ","value":"&lt;string&gt; "},{"description":"<p>Displays small circles as marks ","value":"dot "}]},"css/properties/text-emphasis-color":{"SUMMARY":"<p>The text-emphasis-color property specifies the foreground color of the emphasis marks. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-emphasis-color","VALUES":[{"description":"<p>Specify the foreground color of the emphasis marks. ","value":"color "}]},"css/properties/text-emphasis-style":{"SUMMARY":"<p>The <code>text-emphasis-style</code> property applies special emphasis marks to an element's text. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-emphasis-style","VALUES":[{"description":"<p>No emphasis marks. ","value":"none "},{"description":"<p>Display triangles as marks. The filled triangle is U+25B2 ‘▲’, and the open triangle is U+25B3 ‘△’. ","value":"triangle "},{"description":"<p>The shape is filled with solid color. ","value":"filled "},{"description":"<p>Display sesames as marks. The filled sesame is U+FE45 ‘﹅’, and the open sesame is U+FE46 ‘﹆’. ","value":"sesame "},{"description":"<p>The shape is hollow. ","value":"open "},{"description":"<p>Display the given string as marks. Authors should not specify more than one character in &lt;string&gt;. The UA may truncate or ignore strings consisting of more than one grapheme cluster. ","value":"&lt;string&gt; "},{"description":"<p>Display small circles as marks. The filled dot is U+2022 ‘•’, and the open dot is U+25E6 ‘◦’. ","value":"dot "},{"description":"<p>Display large circles as marks. The filled circle is U+25CF ‘●’, and the open circle is U+25CB ‘○’. ","value":"circle "},{"description":"<p>Display double circles as marks. The filled double-circle is U+25C9 ‘◉’, and the open double-circle is U+25CE ‘◎’. ","value":"double-circle "}]},"css/properties/text-height":{"SUMMARY":"<p>This property helps determine an inline box's block-progression dimension, derived from the text-height and font-size properties for non-replaced elements, the height or the width for replaced elements, and the stacked block-progression dimension for inline-block elements. The block-progression dimension determines the position of the padding, border and margin for the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-height","VALUES":[{"description":"<p>The block-progression dimension is based either on the em square determined by the computed element font-size property value, or the cell-height (ascender + descender) related to the computed element font-size as chosen by the user agent. ","value":"auto "},{"description":"<p>The block-progression dimension is based on the em square as determined by the computed element font-size. ","value":"font-size "},{"description":"<p>The block-progression dimension is based on the cell-height (ascender + descender) related to the computed element font-size. ","value":"text-size "},{"description":"<p>The block-progression dimension is based on the maximum extents toward the before-edge and after-edge of the box (obtained by considering all child elements located on the same line), ruby annotations (elements with \"display:ruby-text\"), and baseline shifted elements. ","value":"max-size "},{"description":"<p>The block progression dimension is based on <em>number</em> times the em square as determined by the computed font-size. ","value":"&lt;number&gt; "}]},"css/properties/text-indent":{"SUMMARY":"<p>Specifies the amount of space horizontally that should be left on the first line of the text of an element. This horizontal spacing is at the beginning of the first line and is in respect to the left edge of the containing block box. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-indent","VALUES":[{"description":"<p>This value can only be used in conjunction with a length or percentage value (<code>text-indent: 7px each-line;</code>). It indents all lines in the element, not just the first line. <p>Currently an experimental feature. ","value":"&lt;length/percentage&gt; each-line "},{"description":"<p>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). ","value":"length "},{"description":"<p>Integer, followed by a percent sign (%). This value is a percentage of the width of the parent object. ","value":"percentage "},{"description":"<p>Inherits the value from the cascade. ","value":"inherit "},{"description":"<p>This value can only be used in conjunction with a length or percentage value (<code>text-indent: 7px each-line;</code>). It will affect not only the first line of the block container but also any line that is after a forced line break. This does not have affect on soft wrap break. <p>Currently experimental in CSS Text Level 3 ","value":"&lt;length/percentage&gt; each-line "},{"description":"<p>This value can only be used in conjunction with a length or percentage value (<code>text-indent: 7px hanging;</code>). It inverts which lines are indented so that everything but the first formatted line is indented.  <p>Currently an experimental feature. ","value":"&lt;length/percentage&gt; hanging "}]},"css/properties/text-justify":{"SUMMARY":"<p>The <code>text-justify</code> CSS property offers a fine level of justification control over the enclosed content, allowing for a variety of sophisticated justification models used in different language writing systems. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-justify","VALUES":[{"description":"<p>Aligns text by increasing the space between both of words and characters. This value is sometimes used in e.g. Japanese. ","value":"distribute "},{"description":"<p>Default. Allows the browser to determine which justification algorithm to apply. ","value":"auto "},{"description":"<p>Justifies lines of text by elongating characters at chosen points.  This form of justification is intended for Arabic script languages. ","value":"kashida "},{"description":"<p>Justification is disabled. ","value":"none "},{"description":"<p>Aligns text by increasing the space between words. This value's spacing behavior is the fastest way to make all lines of text equal in length. Its justification behavior does not affect the last line of the paragraph. This value is typically used for languages that separate words using spaces, like English or Korean. ","value":"inter-word "},{"description":"<p>Justifies lines of ideographic text, and increases or decreases both inter-ideograph and inter-word spacing. This value is typically used for CJK languages. ","value":"inter-ideograph "},{"description":"<p>Justifies lines of text that contain no inter-word spacing. This value is typically used for Southeast Asian scripts such as Thai. ","value":"inter-cluster "}]},"css/properties/text-line-through":{"SUMMARY":"<p>The <strong>text-line-through</strong> property is a shorthand property for <a href='https://docs.webplatform.org/wiki/css/properties/text-line-through-style '>text-line-through-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/text-line-through-color '>text-line-through-color</a> and <a href='https://docs.webplatform.org/wiki/css/properties/text-line-through-mode '>text-line-through-mode</a>.  (Considered obsolete; use <a href='https://docs.webplatform.org/wiki/css/properties/text-decoration'>text-decoration</a> instead.) ","URL":"https://docs.webplatform.org/wiki/css/properties/text-line-through","VALUES":[{"description":"<p>Values supported by the <a href='https://docs.webplatform.org/wiki/css/properties/text-line-through-style'>text-line-through-style</a>,  <a href='https://docs.webplatform.org/wiki/css/properties/text-line-through-color'>text-line-through-color</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/text-line-through-mode'>text-line-through-mode</a> properties. ","value":"&lt;style&gt; &lt;color&gt; &lt;mode&gt; "}]},"css/properties/text-line-through-color":{"SUMMARY":"<p>Specifies the line colors for the line-through text decoration. <p>(Considered obsolete; use <a href='https://docs.webplatform.org/wiki/css/properties/text-decoration-color'>text-decoration-color</a> instead.) ","URL":"https://docs.webplatform.org/wiki/css/properties/text-line-through-color","VALUES":[{"description":"<p>Specifies a color value. ","value":"&lt;color&gt; "}]},"css/properties/text-line-through-mode":{"SUMMARY":"<p>Sets the mode for the line-through text decoration, determining whether the text decoration affects the space characters or not. <p>(Considered obsolete; use <a href='https://docs.webplatform.org/wiki/css/properties/text-decoration-skip'>text-decoration-skip</a> instead.) ","URL":"https://docs.webplatform.org/wiki/css/properties/text-line-through-mode","VALUES":[{"description":"<p>The line is continuous and covers white space. ","value":"continuous "},{"description":"<p>The line skips (does not include) white space characters. ","value":"skip-white-space "}]},"css/properties/text-line-through-style":{"SUMMARY":"<p>Specifies the line style for line-through text decoration. <p>(Considered obsolete; use <a href='https://docs.webplatform.org/wiki/css/properties/text-decoration-style'>text-decoration-style</a> instead.) ","URL":"https://docs.webplatform.org/wiki/css/properties/text-line-through-style","VALUES":[{"description":"<p>Produces a line that repeats a pattern where a dot is followed by a dash. ","value":"dot-dash "},{"description":"<p>Produces no line ","value":"none "},{"description":"<p>Produces a line that repeats a pattern where two dots are followed by a dash. ","value":"dot-dot-dash "},{"description":"<p>Produces a solid line ","value":"solid "},{"description":"<p>Produces a wavy line. ","value":"wave "},{"description":"<p>Produces a double line. ","value":"double "},{"description":"<p>Produces a dotted line ","value":"dotted "},{"description":"<p>Produces a dashed line ","value":"dashed "}]},"css/properties/text-line-through-width":{"SUMMARY":"<p>Specifies the line width for the line-through text decoration. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-line-through-width"},"css/properties/text-overflow":{"SUMMARY":"<p>The text-overflow shorthand CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string. It covers the two long-hand properties <a href='https://docs.webplatform.org/wiki/css/properties/text-overflow-mode'>text-overflow-mode</a> and <a href='https://docs.webplatform.org/wiki/css/properties/text-overflow-ellipsis'>text-overflow-ellipsis</a> ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overflow","VALUES":[{"description":"<p>Default. Simply clips the content and does not display ellipsis for text-overflow. ","value":"clip "},{"description":"<p>Display ellipsis (...) for text overflow after the last letter that entirely fits into a line. ","value":"ellipsis "},{"description":"<p>Display ellipsis (...) for text overflow after the last word that entirely fits into a line. ","value":"ellipsis-word "}]},"css/properties/text-overflow-ellipsis":{"SUMMARY":"<p>The text-overflow-ellipsis CSS property controls how the hint on overflowed content that is not displayed is signaled to the users. The presence of the hint is controlled with CSS property <a href='https://docs.webplatform.org/wiki/css/properties/text-overflow-mode'>text-overflow-mode</a>. Shorthand property is <a href='https://docs.webplatform.org/wiki/css/properties/text-overflow'>text-overflow</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overflow-ellipsis","VALUES":[{"description":"<p>The value is defined either as a string like the default UTF-8 character 'U+2026' or a URI and represents the ellipsis of text-overflow-mode property. If the value is defined as a URI it displays the image behind the URL. You can also set both values which then means they determine the overflow visual hint at the end and the hint after the element box. The latter visual hint is only displayed if there is clipped content because of the dimension limitation on the element block. ","value":"string "}]},"css/properties/text-overflow-mode":{"SUMMARY":"<p>The text-overflow-mode CSS property controls the presence and position of the hint on overflowed content that is not displayed is signaled to the users. The constitution of the hint is controlled with CSS property <a href='https://docs.webplatform.org/wiki/css/properties/text-overflow-ellipsis'>text-overflow-ellipsis</a>. Shorthand property is <a href='https://docs.webplatform.org/wiki/css/properties/text-overflow'>text-overflow</a>. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overflow-mode","VALUES":[{"description":"<p>Default. Simply clips the content and does not display ellipsis for text-overflow. ","value":"clip "},{"description":"<p>Display ellipsis (...) for text overflow after the last letter that entirely fits into a line. ","value":"ellipsis "},{"description":"<p>Display ellipsis (...) for text overflow after the last word that entirely fits into a line. ","value":"ellipsis-word "}]},"css/properties/text-overline":{"SUMMARY":"<p>The <strong>text-overline</strong> property is the shorthand for the <a href='https://docs.webplatform.org/wiki/css/properties/text-overline-style'>text-overline-style</a>, <a href='https://docs.webplatform.org/wiki/css/properties/text-overline-width'>text-overline-width</a>, <a href='https://docs.webplatform.org/wiki/css/properties/text-overline-color'>text-overline-color</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/text-overline-mode'>text-overline-mode</a> properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overline","VALUES":[{"description":"<p>Possible values: <p>None- Produces no line. solid - Produces a solid line. double - Produces a double line. dotted - Produces a dotted line. dashed - Produces a dashed line style. dot-dash - Produces a line whose repeating pattern is a dot followed by a dash. dot-dot-dash - Produces a line whose repeating pattern is two dots followed by a dash. wave - Produces a wavy line. ","value":"&lt;'text-overline-style'&gt; "},{"description":"<p>Possible values: &lt;color&gt; - Specifies a color value. ","value":"&lt;'text-overline-color'&gt; "},{"description":"<p>This property determines whether only words meant to be overlined or if the whitespace between words and words meant to be overlined.  There are two unique values: continuous or words.  Continuous is the default value and shows overline for both words and whitespaces.  Words only shows onverline for words and not whitespaces. It can also have the values of initial or inherit. ","value":"&lt;'text-overline-mode'&gt; "}]},"css/properties/text-overline-color":{"SUMMARY":"<p>Specifies the line color for the overline text decoration. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overline-color","VALUES":[{"description":"<p>Specifies a color value ","value":"&lt;color&gt; "}]},"css/properties/text-overline-mode":{"SUMMARY":"<p>Sets the mode for the overline text decoration, determining whether the text decoration affects the space characters or not. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overline-mode","VALUES":[{"description":"<p>This value means that the line is continuous. ","value":"continuous "},{"description":"<p>This means that space characters will not be lined. ","value":"skip-white-space "}]},"css/properties/text-overline-style":{"SUMMARY":"<p>Specifies the line style for overline text decoration. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overline-style","VALUES":[{"description":"<p>Produces a wavy line. ","value":"wave "},{"description":"<p>Produces a double line. ","value":"double "},{"description":"<p>Produces a dotted line. ","value":"dotted "},{"description":"<p>Produces a dashed line style. ","value":"dashed "},{"description":"<p>Produces a line whose repeating pattern is a dot followed by a dash. ","value":"dot-dash "},{"description":"<p>Produces no line. ","value":"none "},{"description":"<p>Produces a line whose repeating pattern is two dots followed by a dash. ","value":"dot-dot-dash "},{"description":"<p>Produces a solid line. ","value":"solid "}]},"css/properties/text-overline-width":{"SUMMARY":"<p>Specifies the line width for the overline text decoration. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-overline-width","VALUES":[{"description":"<p>Generates a thin line. The computed value is 'thin'. ","value":"thin "},{"description":"<p>The user agent may use any algorithm to determine the text decoration width. The computed value is 'auto'. ","value":"auto "},{"description":"<p>Generates a medium line. The computed value is 'medium'. ","value":"medium "},{"description":"<p>The text decoration width is the normal text decoration width for the nominal font. The computed value is 'normal'. ","value":"normal "},{"description":"<p>Generates a thick line. The computed value is 'thick'. ","value":"thick "},{"description":"<p>The text decoration width is the product of the &lt;number&gt; and the computed 'font-size'. The computed value is '&lt;number&gt;'. ","value":"&lt;number&gt; "},{"description":"<p>The text decoration width is the length. The computed value is the corresponding absolute &lt;length&gt;. ","value":"&lt;length&gt; "},{"description":"<p>The text decoration width is the product of the &lt;percentage&gt; and the computed 'font-size'. The computed value is the absolute &lt;length&gt;. ","value":"&lt;percentage&gt; "}]},"css/properties/text-rendering":{"SUMMARY":"<p>The text-rendering CSS property provides information to the browser about how to optimize when rendering text. Options are: legibility, speed or geometric precision. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-rendering","VALUES":[{"description":"<p>Indicates that the browser should favor geometric precision over rendering speed and legibility. Usually, this option causes the browser to not use hinting. Instead glyph outlines are drawn with comparable geometric precision to the rendering of path data. This setting can be helpful when using kerning, which does often not scale linearly and can make text using such fonts look good. ","value":"geometricPrecision "},{"description":"<p>Indicates that the browser should choose the most appropriate method between speed, legibility and geometric precision, but favors legibility over speed and geometric precision. ","value":"auto "},{"description":"<p>Indicates that the browser should favor rendering speed over legibility and geometric precision. Browsers usually disable kerning and ligatures and sometimes turn off anti-aliasing. ","value":"optimizeSpeed "},{"description":"<p>Indicates that the browser should favor legibility over rendering speed and geometric precision. Browsers usually apply anti-aliasing or font hinting to display the most legible text. ","value":"optimizeLegibility "}]},"css/properties/text-script":{"SUMMARY":"<p>Obsolete: unsupported. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-script"},"css/properties/text-shadow":{"SUMMARY":"<p>The CSS <code>text-shadow</code> property applies one or more drop shadows to the text and <code><a href='https://docs.webplatform.org/wiki/css/properties/text-decoration'>&lt;text-decorations&gt;</a></code> of an element. Each shadow is specified as an offset from the text, along with optional color and blur radius values. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-shadow","VALUES":[{"description":"<p>Required. Specifies the vertical <code><a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a></code> value below the text. A negative vertical <code><a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a></code> term will place the shadow above the text. ","value":"&lt;offset-y&gt; "},{"description":"<p>Optional. The blur radius is a <code><a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a></code> term that indicates the boundaries of the blur effect. ","value":"&lt;blur-radius&gt; "},{"description":"<p>Optional. A color value may be applied before or after the <code><a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a></code> terms of both shadow effects. The color value will be inherited as the basis for the shadow. If a color is not specified by the user, the value of the color property will be used instead. ","value":"&lt;color&gt; "},{"description":"<p>Default value. ","value":"none "},{"description":"<p>Required. Specifies the horizontal <code><a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a></code> term to the right of the text. A negative horizontal <code><a href='https://docs.webplatform.org/wiki/css/data_types/length'>&lt;length&gt;</a></code> term will place the shadow to the left of the text. ","value":"&lt;offset-x&gt; "}]},"css/properties/text-transform":{"SUMMARY":"<p>This property transforms text for styling purposes. (It has no effect on the underlying content.) ","URL":"https://docs.webplatform.org/wiki/css/properties/text-transform","VALUES":[{"description":"<p>Transforms all the characters to lowercase. ","value":"lowercase "},{"description":"<p>Puts all characters in fullwidth form. If the character does not have a corresponding fullwidth form, it is left as is. This value is typically used to typeset Latin characters and digits like ideographic characters. ","value":"full-width "},{"description":"<p>Default. Text is not transformed. ","value":"none "},{"description":"<p>Transforms the first character of each word to uppercase. ","value":"capitalize "},{"description":"<p>Transforms all the characters to uppercase. ","value":"uppercase "}]},"css/properties/text-underline":{"SUMMARY":"<p>Unsupported. <p>The 'text-underline' property is the shorthand for 'text-underline-style', 'text-underline-width', 'text-underline-color', 'text-underline-mode' and 'text-underline-position'. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-underline","VALUES":[{"description":"<p>This property set the mode for the underline determining whether the text decoration affects the space characters or not. 'Space characters' are all characters classified by the Unicode Standard [UNICODE] as category 'Zs', in addition to the white space characters. Possible values:  continuous/skip-white-space ","value":"text-underline-mode "},{"description":"<p>This property sets the position of the underline. It can appear either 'before' (above in an horizontal flow) or after (below in an horizontal flow) the run of text in relation to its baseline orientation. This property is typically used in vertical writing context where it may be desired to have the underline appear 'before' the run of text. This results in having the underline appearing on the right side of the vertical writing column. Possible values: auto/before-edge/alphabetic/after-edge ","value":"text-underline-position "},{"description":"<p>This property specify the line style for underline. Possible values: none/solid/double/dotted/dashed/dot-dash/dot-dot-dash/wave ","value":"text-underline-style "},{"description":"<p>This property specifies the line color for the underline. ","value":"text-underline-color "}]},"css/properties/text-underline-position":{"SUMMARY":"<p>Unsupported. <p>This property will add a underline position value to the element that has an underline defined. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-underline-position","VALUES":[{"description":"<p>In vertical writing modes, the underline is aligned as for ‘under’, except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the \"over\" side of the text, then an overline also switches sides and is drawn on the \"under\" side. ","value":"left "},{"description":"<p>In vertical writing modes, the underline is aligned as for ‘under’, except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the \"over\" side of the text, then an overline also switches sides and is drawn on the \"under\" side. ","value":"right "},{"description":"<p>Decoration appears above the text. ","value":"auto "},{"description":"<p>The underline is positioned relative to the alphabetic baseline. In this case the underline is likely to cross some descenders. Decoration appears below the text. ","value":"alphabetic "},{"description":"<p>The underline is positioned under the element's text content. In this case the underline usually does not cross the descenders. (This is sometimes called \"accounting\" underline.) This value can be combined with ‘left’ or ‘right’ if a particular side is preferred in vertical writing modes. ","value":"under "}]},"css/properties/text-underline-style":{"SUMMARY":"<p>After review this should be replaced by text-decoration should it not? <p>This property will set the underline style for text with a line value for underline, overline, and line-through. ","URL":"https://docs.webplatform.org/wiki/css/properties/text-underline-style","VALUES":[{"description":"<p>This will produce a line that has a repeating pattern of two dots followed by a dash. ","value":"dot-dot-dash "},{"description":"<p>This will produce a solid line. ","value":"solid "},{"description":"<p>This will produce a wavy line. ","value":"wave "},{"description":"<p>This will produce a double line. ","value":"double "},{"description":"<p>This will produce a dotted line. ","value":"dotted "},{"description":"<p>This will produce a dashed line ","value":"dashed "},{"description":"<p>This will produce a line that has a repeating pattern of a dot followed by a dash. ","value":"dot-dash "},{"description":"<p>This will produce no line. ","value":"none "}]},"css/properties/text-underline-width":{"SUMMARY":"<p>This defines the line width for underline, overline, or line-through of text decorations ","URL":"https://docs.webplatform.org/wiki/css/properties/text-underline-width","VALUES":[{"description":"","value":"&lt;length&gt; "},{"description":"","value":"&lt;percentage&gt; "},{"description":"","value":"thin "},{"description":"","value":"auto "},{"description":"","value":"medium "},{"description":"","value":"normal "},{"description":"","value":"thick "},{"description":"","value":"&lt;number&gt; "}]},"css/properties/top":{"SUMMARY":"<p>This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). ","URL":"https://docs.webplatform.org/wiki/css/properties/top","VALUES":[{"description":"<p>For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details. For replaced elements, the effect of this value depends only on the intrinsic dimensions of the replaced content. See the sections on the width and height of absolutely positioned, replaced elements for details ","value":"auto "},{"description":"<p>The offset is a fixed distance from the reference edge. Negative values are allowed. For more information about the supported length units, see CSS Values and Units Reference. ","value":"length "},{"description":"<p>The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). Negative values are allowed. ","value":"percentage "}]},"css/properties/touch-action":{"SUMMARY":"<p>Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming. ","URL":"https://docs.webplatform.org/wiki/css/properties/touch-action","VALUES":[{"description":"<p>The user agent MAY consider touches that begin on the element only for the purposes of scrolling and continuous zooming. ","value":"manipulation "},{"description":"<p>The user agent MAY determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element. ","value":"auto "},{"description":"<p>Touches that begin on the element MUST NOT trigger default touch behaviors. ","value":"none "},{"description":"<p>The user agent MAY consider touches that begin on the element only for the purposes of horizontally scrolling the element's nearest ancestor with horizontally scrollable content. ","value":"pan-x "},{"description":"<p>The user agent MAY consider touches that begin on the element only for the purposes of vertically scrolling the element's nearest ancestor with vertically scrollable content. ","value":"pan-y "}]},"css/properties/transform":{"SUMMARY":"<p>CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values. ","URL":"https://docs.webplatform.org/wiki/css/properties/transform","VALUES":[{"description":"<p>Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order. ","value":"matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) "},{"description":"<p>Specifies a scale operation using the vector [1, sy]. ","value":"scaleY(sy) "},{"description":"<p>Specifies a 3D rotation by the angle specified in the X direction. Equivalent to <code>rotate3d(1, 0, 0, ax)</code>. ","value":"rotateX(ax) "},{"description":"<p>Specifies a 2D translation by the vector [tx, ty]. If ty is not specified, its value is assumed to be zero. ","value":"translate(tx, ty) "},{"description":"<p>Specifies a 3D translation by the vector [tx,ty,tz] in the X, Y, and Z directions. ","value":"translate3d(tx, ty, tz) "},{"description":"<p>Specifies a 2D rotation by the specified angle around the origin of the element, as defined by the <a href='https://docs.webplatform.org/wiki/css/properties/transform-origin'>transform-origin</a> property. ","value":"rotate(a) "},{"description":"<p>Specifies a 3D rotation by the angle specified in the Y direction. Equivalent to <code>rotate3d(0, 1, 0, ay)</code>. ","value":"rotateY(ay) "},{"description":"<p>Translates the element by the given amount along the X axis. ","value":"translateX(x) "},{"description":"<p>Specifies a 3D translation by the vector [0,0,tz] in the Z direction. ","value":"translateZ(tz) "},{"description":"<p>Specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it is assumed to be zero. ","value":"skew(ax, ay) "},{"description":"<p>Specifies a 3D rotation by the angle specified in the Z direction. Equivalent to <code>rotate3d(0, 0, 1, az)</code>. ","value":"rotateZ(az) "},{"description":"<p>Translates the element by the given amount along the Y axis. ","value":"translateY(y) "},{"description":"<p>Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the three parameters. ","value":"scale3d(sx, sy, sz) "},{"description":"<p>Specifies a 2D skew transformation along the X axis by the given angle. ","value":"skewX(ax) "},{"description":"<p>Specifies a perspective projection matrix, which scales points in the X and Y directions based on their Z value. Thus, points with positive Z values are scaled away from the origin, and those with negative Z values are scaled toward the origin. ","value":"perspective(p) "},{"description":"<p>Specifies a 2D scaling operation described by [sx, sy]. If sy is not specified, it is assumed to be equal to sx. ","value":"scale(sx, sy) "},{"description":"<p>Specifies that no transform should be applied. ","value":"none "},{"description":"<p>Specifies a 3D scale operation by the scaling vector [1,1,sz]. ","value":"scaleZ(sz) "},{"description":"<p>Specifies a 2D skew transformation along the Y axis by the given angle. ","value":"skewY(ay) "},{"description":"<p>Specifies a scale operation using the vector [sx, 1]. ","value":"scaleX(sx) "},{"description":"<p>Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. ","value":"rotate3d(x, y, z, a) "},{"description":"<p>Specifies a 2D transformation matrix in the form of a transformation matrix of the six values, a-f. ","value":"matrix(a, b, c, d, e, f) "}]},"css/properties/transform-origin":{"SUMMARY":"<p>This property defines the origin of the transformation axes relative to the element to which the transformation is applied. ","URL":"https://docs.webplatform.org/wiki/css/properties/transform-origin","VALUES":[{"description":"<p>A floating-point number, followed by a unit of measurement. Units of measurement may be absolute (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or relative (<code>em</code>, <code>ex</code>, or <code>px</code>). ","value":"length "},{"description":"<p>A named position along the specified axis, each of which has a percentage equivalent. The values <code>left</code>, <code>center</code>, and <code>right</code> are valid for the X axis and are equivalent to 0%, 50%, and 100% respectively. The values <code>top</code>, <code>center</code>, and <code>bottom</code> are valid for the Y axis and are equivalent to 0%, 50%, and 100% respectively. There are no named positions along the Z axis. ","value":"&lt;named-position&gt; "},{"description":"<p>A number, followed by a %. The value is a percentage of the bounding box width (for the X axis) or the bounding box height (for the Y axis, if specified). A percentage cannot be applied to the Z axis. ","value":"percentage "}]},"css/properties/transform-origin-z":{"SUMMARY":"<p>This property allows you to define the relative position of the origin of the transformation grid along the z-axis. ","URL":"https://docs.webplatform.org/wiki/css/properties/transform-origin-z","VALUES":[{"description":"<p>A floating-point number, followed by a unit of measurement. Units of measurement may be absolute (<code>cm</code>, <code>mm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code>) or relative (<code>em</code>, <code>ex</code>, or <code>px</code>). For more information about the supported length units, see CSS Values and Units. ","value":"length "}]},"css/properties/transform-style":{"SUMMARY":"<p>This property specifies how nested elements are rendered in 3D space relative to their parent. ","URL":"https://docs.webplatform.org/wiki/css/properties/transform-style","VALUES":[{"description":"<p>Child elements will not preserve their 3D position before applying a transform. ","value":"flat "},{"description":"<p>Child elements will preserve their 3D position before applying a transform. ","value":"preserve-3d "}]},"css/properties/transition":{"SUMMARY":"<p>The transition CSS property is a shorthand property for <a href='https://docs.webplatform.org/wiki/css/properties/transition-property'>transition-property</a>, <a href='https://docs.webplatform.org/wiki/css/properties/transition-duration'>transition-duration</a>, <a href='https://docs.webplatform.org/wiki/css/properties/transition-timing-function'>transition-timing-function</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/transition-delay'>transition-delay</a>. It allows to define the transition between two states of an element. ","URL":"https://docs.webplatform.org/wiki/css/properties/transition","VALUES":[{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-duration'><strong>transition-duration</strong></a> property. ","value":"transition-duration "},{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-timing-function'><strong>transition-timing-function</strong></a> property. ","value":"transition-timing-function "},{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/animation-delay'><strong>transition-delay</strong></a> property. ","value":"transition-delay "},{"description":"<p>Value of the <a href='https://docs.webplatform.org/wiki/css/properties/transition-property'><strong>transition-property</strong></a> property. ","value":"transition-property "}]},"css/properties/transition-delay":{"SUMMARY":"<p>The 'transition-delay' property defines when the transition will start. A value of ‘0s’ means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset. ","URL":"https://docs.webplatform.org/wiki/css/properties/transition-delay","VALUES":[{"description":"<p>Floating-point number, followed by a time units designator (<code>ms</code> or <code>s</code>). For more information about the supported time units, see <strong>CSS Values and Units Reference</strong>. <p>Values are rounded up to the second decimal place. Each <strong>transition-delay</strong> is paired with a corresponding object property  identified in the <a href='https://docs.webplatform.org/wiki/css/properties/transition-property'><strong>transition-property</strong></a> property. If more <strong>transition-delay</strong> values are declared than corresponding object properties identified in the <a href='https://docs.webplatform.org/wiki/css/properties/transition-property'><strong>transition-property</strong></a> property, the excess <strong>transition-delay</strong> values are ignored. If fewer  <strong>transition-delay</strong> values are declared than corresponding object properties identified in the <a href='https://docs.webplatform.org/wiki/css/properties/transition-property'><strong>transition-property</strong></a> property, the list of <strong>transition-delay</strong> values is repeated from the beginning until the object properties are exhausted. ","value":"time "}]},"css/properties/transition-duration":{"SUMMARY":"<p>The 'transition-duration' property specifies the length of time a transition animation takes to complete. ","URL":"https://docs.webplatform.org/wiki/css/properties/transition-duration","VALUES":[{"description":"<p>Floating-point number, followed by a time units designator (<code>ms</code> or <code>s</code>). For more information about the supported time units, see <strong>CSS Values and Units Reference</strong>. ","value":"time "}]},"css/properties/transition-property":{"SUMMARY":"<p>The 'transition-property' property specifies the name of the CSS property to which the transition is applied. ","URL":"https://docs.webplatform.org/wiki/css/properties/transition-property","VALUES":[{"description":"<p>All properties that support transitions have the transition effect applied when a new value for the property is specified. (Default) ","value":"all "},{"description":"<p>A list of properties, separated by commas, to which the transition effect is applied. ","value":"propertyname "},{"description":"<p>No transition effect is applied (all transition properties are ignored) when a new property value is specified. ","value":"none "}]},"css/properties/transition-timing-function":{"SUMMARY":"<p>Sets the pace of action within a transition ","URL":"https://docs.webplatform.org/wiki/css/properties/transition-timing-function","VALUES":[{"description":"<p>The change occurs instantly at the end of the keyframe, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/steps'><strong>steps(1, end)</strong></a>. ","value":"step-end "},{"description":"<p>Starts suddenly and stops gradually, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'><strong>cubic-bezier(0,0,0.58,1)</strong></a>. ","value":"ease-out "},{"description":"<p>Starts and stops gradually, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'><strong>cubic-bezier(0.42,0,0.58,1)</strong></a>. ","value":"ease-in-out "},{"description":"<p>Function value specifying a customized response curve. ","value":"<a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'><strong>cubic-bezier()</strong></a> "},{"description":"<p>Default. Starts and stops gradually, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'><strong>cubic-bezier(0.25,0.1,0.25,1)</strong></a> ","value":"ease "},{"description":"<p>Function value specifying a series of discrete intervals. ","value":"<a href='https://docs.webplatform.org/wiki/css/functions/steps'><strong>steps()</strong></a> "},{"description":"<p>Starts and stops immediately, progressing at a constant rate, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'><strong>cubic-bezier(0,0,1,1)</strong></a>. ","value":"linear "},{"description":"<p>The change occurs instantly at the start of the keyframe, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/steps'><strong>steps(1, start)</strong></a>. ","value":"step-start "},{"description":"<p>Starts gradually and stops suddenly, equivalent to <a href='https://docs.webplatform.org/wiki/css/functions/cubic-bezier'><strong>cubic-bezier(0.42,0,1,1)</strong></a>. ","value":"ease-in "}]},"css/properties/unicode-bidi":{"SUMMARY":"<p>The <code>unicode-bidi</code> CSS property specifies the level of embedding with respect to the bidirectional algorithm. ","URL":"https://docs.webplatform.org/wiki/css/properties/unicode-bidi","VALUES":[{"description":"<p>Default. Element does not open an additional level of embedding. For inline elements, implicit reordering works across element boundaries. ","value":"normal "},{"description":"<p>Element opens an additional level of embedding. The value of the <a href='https://docs.webplatform.org/wiki/css/properties/direction'><strong>direction</strong></a> property specifies the embedding level. Reordering is implicit inside the element. ","value":"embed "},{"description":"<p>Same as the <code>embed</code> value, except that, inside the element, reordering is strictly in sequence according to the <a href='https://docs.webplatform.org/wiki/css/properties/direction'><strong>direction</strong></a> property. This value overrides the implicit bidirectional algorithm. ","value":"bidi-override "}]},"css/properties/unicode-range":{"SUMMARY":"<p><code>unicode-range</code> allows you to set a specific range of characters to be downloaded from a font (embedded using <code>@font-face</code>) and made available for use on the current page. ","URL":"https://docs.webplatform.org/wiki/css/properties/unicode-range","VALUES":[{"description":"<p>You can specify multiple single codepoints and/or codepoint groups, delimiting them using commas. For example, <code>unicode-range: U+00-FF, U+980-9FF</code>. ","value":"multiple value declarations "},{"description":"<p>A single unicode character codepoint, for example <code>unicode-range: U+26</code>. ","value":"single codepoint "},{"description":"<p>A range of unicode codepoints. So for example, <code>unicode-range: U+0025-00FF</code> means \"include all characters in the range U+0025 to U+00FF.\" ","value":"codepoint range "},{"description":"<p>You can specify wildcard characters using the \"?\" character, so for example <code>unicode-range: U+4??</code> would mean \"include all characters in the range U+400 to U+4FF.\" ","value":"wildcard range "}]},"css/properties/user-focus":{"SUMMARY":"<p>This is for all the high level UX stuff. ","URL":"https://docs.webplatform.org/wiki/css/properties/user-focus","VALUES":[{"description":"<p>Default.  Every single thing is under focus. ","value":"all "},{"description":"<p>None of the descendants of the element can be brought under consideration or focus, neither text nor images. ","value":"none "},{"description":"<p>Only text of the element and its descendants can be focused or brought under consideration.. ","value":"text "}]},"css/properties/user-input":{"SUMMARY":"<p>For inputing user content ","URL":"https://docs.webplatform.org/wiki/css/properties/user-input","VALUES":[{"description":"<p>Any alpha numeric data can be entered, usually in text boxes, or address fields. ","value":"text "}]},"css/properties/user-modify":{"SUMMARY":"<p>Needs content ","URL":"https://docs.webplatform.org/wiki/css/properties/user-modify"},"css/properties/user-select":{"SUMMARY":"<p>Controls the visible highlighting of selections of text and elements. It is possible to blind out selection completely or to allow the selection of text only. ","URL":"https://docs.webplatform.org/wiki/css/properties/user-select","VALUES":[{"description":"<p>Only text of the element and its descendants can be selected. ","value":"text "},{"description":"<p>Default. Everything, text and images, can be selected. ","value":"all "},{"description":"<p>Only specified elements can be selected. Only supported in Firefox and Internet Explorer. ","value":"element "},{"description":"<p>None of the descendants of the element can be selected, neither text nor images. ","value":"none "}]},"css/properties/vertical-align":{"SUMMARY":"<p>The <code>vertical-align</code> property controls how inline elements or text are vertically aligned compared to the baseline. If this property is used on table-cells it controls the vertical alignment of content of the table cell. ","URL":"https://docs.webplatform.org/wiki/css/properties/vertical-align","VALUES":[{"description":"<p>Vertically aligns the content to the bottom of its parent. ","value":"text-bottom "},{"description":"<p>Default. Vertically aligns the content with the baseline of its parent. ","value":"baseline "},{"description":"<p>Raises or lowers the content by a percentage of the line height. If this is set to a positive number the content is raised compared to the baseline of its parent. If this is set to a negative number the content is lowered compared to the baseline of its parent. If set to <code>0</code> it is equivalent to <code>baseline</code>. ","value":"&lt;percentage> "},{"description":"<p>Vertically aligns the content to the middle of its parent. ","value":"middle "},{"description":"<p>Raises or lowers the content by the specified length. If this is set to a positive number the content is raised compared to the baseline of its parent. If this is set to a negative number the content is lowered compared to the baseline of its parent. If set to <code>0</code> it is equivalent to <code>baseline</code>. ","value":"&lt;length> "},{"description":"<p>Vertically aligns the content to subscript. ","value":"sub "},{"description":"<p>Vertically aligns the content and its descendants to the top of the text line. ","value":"top "},{"description":"<p>Vertically aligns the content to superscript. ","value":"super "},{"description":"<p>Vertically aligns the content and its descendants to the bottom of the text line. ","value":"bottom "},{"description":"<p>Vertically aligns the content to the top of its parent. ","value":"text-top "}]},"css/properties/visibility":{"SUMMARY":"<p>The visibility property specifies whether the boxes generated by an element are rendered. ","URL":"https://docs.webplatform.org/wiki/css/properties/visibility","VALUES":[{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>The element is visible. ","value":"visible "},{"description":"<p>Object is hidden. The box is invisible (fully transparent, nothing is drawn), but still affects layout.  Descendants of the element will be visible if they have visibility:visible. ","value":"hidden "},{"description":"<p>This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'. ","value":"collapse "}]},"css/properties/voice-balance":{"SUMMARY":"<p>The <code>voice-balance</code> property sets the apparent position (in stereo sound) of the synthesized voice for spoken media. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-balance"},"css/properties/voice-duration":{"SUMMARY":"<p>The <code>voice-duration</code> property allows the author to explicitly set the amount of time it should take a speech synthesizer to read an element's content, for example to allow the speech to be synchronized with other media.  With a value of  <code>auto</code> (the default) the length of time it takes to read the content is determined by the content itself and the <a href='https://docs.webplatform.org/wiki/css/properties/voice-rate'><code>voice-rate</code></a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-duration"},"css/properties/voice-family":{"SUMMARY":"<p>The <code>voice-family</code> property sets the speaker's voice used by a speech media agent to read an element.  The speaker may be specified as a named character (to match a voice option in the speech reading software) or as a generic description of the age and gender of the voice.   Similar to the <a href='https://docs.webplatform.org/wiki/css/properties/font-family'><code>font-family</code></a> property for visual media, a comma-separated list of fallback options may be given in case the speech reader does not recognize the character name or cannot synthesize the requested combination of generic properties. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-family"},"css/properties/voice-pitch":{"SUMMARY":"<p>The <code>voice-pitch</code> property sets pitch or tone (high or low) for the synthesized speech when reading an element; the pitch may be specified absolutely or relative to the normal pitch for the <a href='https://docs.webplatform.org/wiki/css/properties/voice-family'><code>voice-family</code></a> used to read the text. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-pitch"},"css/properties/voice-range":{"SUMMARY":"<p>The <code>voice-range</code> property determines how much variation in pitch or tone will be created by the speech synthesize when reading an element.  Emphasized text, grammatical structures and punctuation may all be rendered as changes in pitch, this property determines how strong or obvious those changes are; large ranges are associated with enthusiastic or emotional speech, while small ranges are associated with flat or mechanical speech. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-range"},"css/properties/voice-rate":{"SUMMARY":"<p>The <code>voice-rate</code> property sets the speed at which the voice synthesized by a speech media agent will read content. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-rate"},"css/properties/voice-stress":{"SUMMARY":"<p>The <code>voice-stress</code> property sets the level of vocal emphasis to be used for synthesized speech reading the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-stress"},"css/properties/voice-volume":{"SUMMARY":"<p>The <code>voice-volume</code> property sets the volume for spoken content in speech media.  It replaces the deprecated <code>volume</code> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/voice-volume"},"css/properties/white-space":{"SUMMARY":"<p>The white-space property controls whether and how white space inside the element is collapsed, and whether lines may wrap at unforced \"soft wrap\" opportunities. ","URL":"https://docs.webplatform.org/wiki/css/properties/white-space","VALUES":[{"description":"<p>Like <code>normal</code>, but content does not wrap to the next line. ","value":"nowrap "},{"description":"<p>Line breaks and other whitespace are preserved. ","value":"pre "},{"description":"<p>Like <code>normal</code>, this value collapses consecutive spaces and allows wrapping, but preserves segment breaks in the source as forced line breaks. ","value":"pre-line "},{"description":"<p>Like <code>pre</code>, but allows wrapping (like <code>normal</code>'s wrapping). ","value":"pre-wrap "},{"description":"<p>This value prevents user agents from collapsing sequences of white space. Segment breaks such as line feeds and carriage returns are preserved as forced line breaks. Lines only break at forced line breaks; content that does not fit within the block container overflows it. ","value":"normal "}]},"css/properties/white-space-treatment":{"SUMMARY":"<p>Obsolete: unsupported. ","URL":"https://docs.webplatform.org/wiki/css/properties/white-space-treatment"},"css/properties/widows":{"SUMMARY":"<p>Defines the minimum number of lines that can appear in the beginning of a new page. In typography, a widow is the last line of a paragraph appearing alone at the top of a page, which is considered to look awkward. Setting the widows property to an integer higher than 1 prevents this. <p>On a non-paged media, like screen, the widows CSS property has no effect. It can have a number value or it can inherit the values from the parent element. ","URL":"https://docs.webplatform.org/wiki/css/properties/widows","VALUES":[{"description":"<p>Denotes the minimum amount of lines that can stay alone on the top of a new page. If the value is not positive, the declaration is invalid. ","value":"integer "},{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "}]},"css/properties/width":{"SUMMARY":"<p>Specifies the width of the content area of an element. The content area of the element width does not include the <a href='https://docs.webplatform.org/wiki/css/properties/padding'>padding</a>, <a href='https://docs.webplatform.org/wiki/css/properties/border'>border</a>, and <a href='https://docs.webplatform.org/wiki/css/properties/margin'>margin</a> of the element. ","URL":"https://docs.webplatform.org/wiki/css/properties/width","VALUES":[{"description":"<p>The containing block width minus horizontal margin, border, and padding ","value":"available "},{"description":"<p>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly.  Negative values are not allowed. ","value":"percentage "},{"description":"<p>This will be either the large of the minimum width or the smaller of the preferred width and the available width ","value":"fit-content "},{"description":"<p>If border-box is used, the length or percentage defined will be applied to the element's border box. ","value":"border-box "},{"description":"<p>This is an experimental rule for max-content. Currently it only works in Chrome, however you should be using max-content instead since that is the standard. ","value":"intrinsic "},{"description":"<p>If content-box is used, the length or percentage defined will be applied to the element's content-box. ","value":"content-box "},{"description":"<p>The intrinsic preferred width ","value":"max-content "},{"description":"<p>If auto is set for the elements width, the browser will determine the width for the element. ","value":"auto "},{"description":"<p>The intrinsic minimum width ","value":"min-content "},{"description":"<p>Will take a number that is immediately followed by a length unit such as px, em, in,  etc. ","value":"length "}]},"css/properties/word-break":{"SUMMARY":"<p>The word-break property is often used when there is long generated content that is strung together without and spaces or hyphens to beak apart. A common case of this is when there is a long URL that does not have any hyphens. This case could potentially cause the breaking of the layout as it could extend past the parent element. ","URL":"https://docs.webplatform.org/wiki/css/properties/word-break","VALUES":[{"description":"<p>Default property. Words break according to their usual rules. ","value":"normal "},{"description":"<p>In addition to <tt>normal</tt> soft wrap opportunities, lines may break between any two letters (except where forbidden by the <a href='https://docs.webplatform.org/wiki/css/properties/line-break'><strong>line-break</strong></a> property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK (Chinese/Japanese/Korean) characters with few non-CJK excerpts and it is desired that the text be better distributed on each line. ","value":"break-all "},{"description":"<p>Implicit soft wrap opportunities between letters are suppressed, i.e. breaks are prohibited between pairs of letters (except where opportunities exist due to dictionary-based breaking). Otherwise this option is equivalent to <tt>normal</tt>. In this style, sequences of CJK characters do not break. ","value":"keep-all "}]},"css/properties/word-spacing":{"SUMMARY":"<p>The <code>word-spacing</code> CSS property specifies the spacing behavior between \"words\". ","URL":"https://docs.webplatform.org/wiki/css/properties/word-spacing","VALUES":[{"description":"<p>The spacing is the normal spacing for the current font. ","value":"normal "},{"description":"<p>Indicates inter-word space in addition to the default space between words, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). Values may be negative, but there may be implementation-specific limits. ","value":"length "},{"description":"<p>Specifies the additional spacing as a percentage of the affected word's advance measure. ","value":"percentage "}]},"css/properties/word-wrap":{"SUMMARY":"<p>An alias of <a href='https://docs.webplatform.org/wiki/css/properties/overflow-wrap'>css/properties/overflow-wrap</a>, word-wrap defines whether to break words when the content exceeds the boundaries of its container. ","URL":"https://docs.webplatform.org/wiki/css/properties/word-wrap","VALUES":[{"description":"<p>Default. Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.). ","value":"normal "},{"description":"<p>Words that exceed the width of the container will be arbitrarily broken to fit within the container's bounds. ","value":"break-word "}]},"css/properties/wrap-flow":{"SUMMARY":"<p>Specifies how exclusions affect inline content within block-level elements. Elements lay out their inline content in their content area but wrap around exclusion areas. ","URL":"https://docs.webplatform.org/wiki/css/properties/wrap-flow","VALUES":[{"description":"<p>Inline flow content can flow around the edge of the exclusion with the largest available space within the flow content's containing block, and must leave the other edge of the exclusion empty. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_maximum.png'>wrap-flow:maximum applied to grid positioned elements</a> ","value":"maximum "},{"description":"<p>No exclusion is created. Inline flow content interacts with the element as usual. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_auto.png'>wrap-flow:auto applied to grid positioned elements</a> ","value":"auto "},{"description":"<p>Inline flow content can only flow before and after the exclusion in the flow content's block direction, and must leave the areas next to the start and end edges of the exclusion empty. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_clear.png'>wrap-flow:clear applied to grid positioned elements</a> ","value":"clear "},{"description":"<p>Inline flow content can flow on all sides of the exclusion. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_both.png'>wrap-flow:both applied to grid positioned elements</a> ","value":"both "},{"description":"<p>Inline flow content can flow around the start edge of the exclusion area but must leave the area next to the end edge of the exclusion empty. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_left.png'>wrap-flow:start applied to grid positioned elements</a> ","value":"start "},{"description":"<p>Inline flow content can flow around the end edge of the exclusion area but must leave the area next to the start edge of the exclusion empty. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_right.png'>wrap-flow:end applied to grid positioned elements</a> ","value":"end "},{"description":"<p>Inline flow content can flow around the edge of the exclusion with the smallest available space within the flow content's containing block, and must leave the other edge of the exclusion empty. <p><a href='https://docs.webplatform.org/wiki/Image:exclusion_wrap_side_minimum.png'>wrap-flow:minimum applied to grid positioned elements</a> ","value":"minimum "}]},"css/properties/wrap-margin":{"SUMMARY":"<p>Set the value that is used to offset the inner wrap shape from other shapes. Inline content that intersects a shape with this property will be pushed by this shape's margin. ","URL":"https://docs.webplatform.org/wiki/css/properties/wrap-margin","VALUES":[{"description":"<p>The value that is used to offset the inner wrap shape from other shapes. ","value":"&lt;length&gt; "}]},"css/properties/wrap-option":{"SUMMARY":"<p>Obsolete and unsupported. Do not use. <p>This CSS property controls the text when it reaches the end of the block in which it is enclosed. ","URL":"https://docs.webplatform.org/wiki/css/properties/wrap-option","VALUES":[{"description":"<p>The text is wrapped like for the 'wrap' case, except that the line-breaking algorithm will allow as a last resort option a text wrap after the last character which can fit before the ending edge of the line box, independently of 'line-break', 'word-break-cjk' and 'word-break-inside' properties. For example, this addresses the situation of very long words constrained in a fixed-width container with no scrolling allowed. ","value":"emergency "},{"description":"<p>The text is wrapped at the best line-breaking opportunity (if required) within the available block inline-progression dimension ","value":"wrap "},{"description":"<p>The text is only wrapped where explicitly specified by preserved line feed characters. In the case when lines are longer than the available block width, the overflow will be treated in accordance with the 'overflow' property specified in the element. ","value":"no-wrap "},{"description":"<p>The text is wrapped after the last character which can fit before the ending-edge of the line and where explicitly specified by preserved line feed characters. No line-breaking algorithm is invoked. The intended usage is the rendering of a character terminal emulation. ","value":"soft-wrap "}]},"css/properties/wrap-through":{"SUMMARY":"<p>Specifies whether an element inherits its parent's wrapping context as defined by the <a href='https://docs.webplatform.org/wiki/css/properties/wrap-flow'>wrap-flow</a> property. ","URL":"https://docs.webplatform.org/wiki/css/properties/wrap-through","VALUES":[{"description":"<p>The element inherits its parent node's wrapping context. Its descendant inline content wraps around exclusions defined outside the element. ","value":"wrap "},{"description":"<p>The element ignores its parent's wrapping context. Its descendent inline content only wraps around exclusions defined inside this element. ","value":"none "}]},"css/properties/writing-mode":{"SUMMARY":"<p><code>writing-mode</code> specifies if lines of text are laid out horizontally or vertically, and the direction which lines of text and blocks progress. ","URL":"https://docs.webplatform.org/wiki/css/properties/writing-mode","VALUES":[{"description":"<p>Lines of text are laid out horizontally, and progress from the top to the bottom of the page. This is the writing mode used in many writing systems, such as Latin, Greek, Cyrillic, Arabic, Hebrew, etc. ","value":"horizontal-tb "},{"description":"<p>Lines of text are laid out vertically, and progress from the right to the left of the page. Asian languages, such as Chinese or Japanese traditionally used this writing mode. ","value":"vertical-rl "},{"description":"<p>Lines of text are laid out vertically, and progress from the left to the right of the page. Mongolian-based writing systems typically use this writing mode. ","value":"vertical-lr "}]},"css/properties/z-index":{"SUMMARY":"<p>The <strong>z-index</strong> property controls the stacking order of elements. As the x-axis defines the horizontal (left-right) position of elements on the screen, and the y-axis defines the vertical (top-down) position, think of the z-axis as the third dimension or depth-of-field, rising “out of” the screen, towards the viewer, or descending “into” the screen, away from the viewer. ","URL":"https://docs.webplatform.org/wiki/css/properties/z-index","VALUES":[{"description":"<p>Takes the same specified value as the property for the element's parent. ","value":"inherit "},{"description":"<p>Default. Specifies the stacking order of the positioned objects based on the top-down order in which the objects appear in the HTML source. ","value":"auto "},{"description":"<p>Integer that specifies the position of the object in the stacking order. The value is arbitrary and may be negative, zero, or positive. ","value":"&lt;integer&gt; "}]},"css/properties/zoom":{"SUMMARY":"<p>Specifies the magnification scale of the object. ","URL":"https://docs.webplatform.org/wiki/css/properties/zoom"}}}
diff --git a/src/extensions/default/WebPlatformDocs/unittest-files/description.html b/src/extensions/default/WebPlatformDocs/unittest-files/description.html
index d08b65611bc..be452203680 100644
--- a/src/extensions/default/WebPlatformDocs/unittest-files/description.html
+++ b/src/extensions/default/WebPlatformDocs/unittest-files/description.html
@@ -4,4 +4,5 @@
 <a href="../relative/link" data-expected="http://docs.webplatform.org/../relative/link">relative</a>
 <a href="file:///someplace/bad" data-expected="http://docs.webplatform.org/file:///someplace/bad">file url</a>
 <a href="foo?querystring" data-expected="http://docs.webplatform.org/foo?querystring">querystring</a>
-<a href="#hash" data-expected="http://docs.webplatform.org/#hash">hash</a>
\ No newline at end of file
+<a href="#hash" data-expected="http://dev.brackets.io/wiki/css/properties/my-css-prop#hash">hash</a>
+<a href="foo#hash" data-expected="http://docs.webplatform.org/foo#hash">hash</a>
diff --git a/src/extensions/default/WebPlatformDocs/unittests.js b/src/extensions/default/WebPlatformDocs/unittests.js
index 5619a05baaf..05492583fa9 100644
--- a/src/extensions/default/WebPlatformDocs/unittests.js
+++ b/src/extensions/default/WebPlatformDocs/unittests.js
@@ -185,8 +185,8 @@ define(function (require, exports, module) {
                 
                 valuesArr.forEach(function (value) {
                     values.push({
-                        TITLE: value[0] || undefined,
-                        DESCRIPTION: value[1] || undefined
+                        title: value[0] || undefined,
+                        description: value[1] || undefined
                     });
                 });
                 
@@ -206,8 +206,8 @@ define(function (require, exports, module) {
                     href,
                     $links = viewer.$htmlContent.find("a:not(.close)");
                 
-                // 7 links in description.html, 1 "more info" link in template
-                expect($links.length).toBe(8);
+                // 8 links in description.html, 1 "more info" link in template
+                expect($links.length).toBe(9);
                 
                 $links.each(function (i, anchor) {
                     $a = $(anchor);
diff --git a/src/file/FileUtils.js b/src/file/FileUtils.js
index 0dbdc1df87e..2bcf3727f63 100644
--- a/src/file/FileUtils.js
+++ b/src/file/FileUtils.js
@@ -36,10 +36,10 @@ define(function (require, exports, module) {
     var FileSystemError     = require("filesystem/FileSystemError"),
         LanguageManager     = require("language/LanguageManager"),
         PerfUtils           = require("utils/PerfUtils"),
-        Dialogs             = require("widgets/Dialogs"),
         DefaultDialogs      = require("widgets/DefaultDialogs"),
         Strings             = require("strings"),
-        StringUtils         = require("utils/StringUtils");
+        StringUtils         = require("utils/StringUtils"),
+        Dialogs;            // This will be loaded asynchronously
 
     
     /**
@@ -276,19 +276,6 @@ define(function (require, exports, module) {
         }
     }
     
-    /**
-     * Warning: Contrary to the name, this does NOT return a canonical path. The canonical format
-     * used by Directory.fullPath actually DOES include the trailing "/"
-     * @deprecated
-     * 
-     * @param {string} path
-     * @return {string}
-     */
-    function canonicalizeFolderPath(path) {
-        console.error("Warning: FileUtils.canonicalizeFolderPath() is deprecated. Use paths ending in '/' if possible, like Directory.fullPath");
-        return stripTrailingSlash(path);
-    }
-    
     /**
      * Get the name of a file or a directory, removing any preceding path.
      * @param {string} fullPath full path to a file or directory
@@ -500,8 +487,9 @@ define(function (require, exports, module) {
     }
     
     /**
-     * Compares two paths segment-by-segment, used for sorting. Sorts folders before files,
-     * and sorts files based on `compareFilenames()`.
+     * Compares two paths segment-by-segment, used for sorting. When two files share a path prefix,
+     * the less deeply nested one is sorted earlier in the list. Sorts files within the same parent
+     * folder based on `compareFilenames()`.
      * @param {string} path1
      * @param {string} path2
      * @return {number} -1, 0, or 1 depending on whether path1 is less than, equal to, or greater than
@@ -526,7 +514,7 @@ define(function (require, exports, module) {
                 } else if (index >= folders1 && index >= folders2) {
                     return compareFilenames(entryName1, entryName2);
                 }
-                return (index >= folders1 && index < folders2) ? 1 : -1;
+                return (index >= folders1 && index < folders2) ? -1 : 1;
             }
             index++;
         }
@@ -546,6 +534,11 @@ define(function (require, exports, module) {
         return pathArray.join("/");
     }
 
+    // Asynchronously loading Dialogs to avoid the circular dependency
+    require(["widgets/Dialogs"], function (dialogsModule) {
+        Dialogs = dialogsModule;
+    });
+
     // Define public API
     exports.LINE_ENDINGS_CRLF              = LINE_ENDINGS_CRLF;
     exports.LINE_ENDINGS_LF                = LINE_ENDINGS_LF;
@@ -561,7 +554,6 @@ define(function (require, exports, module) {
     exports.convertWindowsPathToUnixPath   = convertWindowsPathToUnixPath;
     exports.getNativeBracketsDirectoryPath = getNativeBracketsDirectoryPath;
     exports.getNativeModuleDirectoryPath   = getNativeModuleDirectoryPath;
-    exports.canonicalizeFolderPath         = canonicalizeFolderPath;
     exports.stripTrailingSlash             = stripTrailingSlash;
     exports.isCSSPreprocessorFile          = isCSSPreprocessorFile;
     exports.isStaticHtmlFileExt            = isStaticHtmlFileExt;
diff --git a/src/filesystem/FileSystem.js b/src/filesystem/FileSystem.js
index 8578e1881b9..32b4b07e48e 100644
--- a/src/filesystem/FileSystem.js
+++ b/src/filesystem/FileSystem.js
@@ -816,7 +816,16 @@ define(function (require, exports, module) {
             }
         }
     };
-        
+    
+    /**
+     * Clears all cached content. Because of the performance implications of this, this should only be used if
+     * there is a suspicion that the file system has not been updated through the normal file watchers
+     * mechanism.
+     */
+    FileSystem.prototype.clearAllCaches = function () {
+        this._handleExternalChange(null);
+    };
+    
     /**
      * Start watching a filesystem root entry.
      * 
@@ -965,6 +974,7 @@ define(function (require, exports, module) {
     exports.showSaveDialog = _wrap(FileSystem.prototype.showSaveDialog);
     exports.watch = _wrap(FileSystem.prototype.watch);
     exports.unwatch = _wrap(FileSystem.prototype.unwatch);
+    exports.clearAllCaches = _wrap(FileSystem.prototype.clearAllCaches);
     
     // Static public utility methods
     exports.isAbsolutePath = FileSystem.isAbsolutePath;
diff --git a/src/htmlContent/findreplace-bar.html b/src/htmlContent/findreplace-bar.html
index c7f1f3dc1b4..3034a0f3dba 100644
--- a/src/htmlContent/findreplace-bar.html
+++ b/src/htmlContent/findreplace-bar.html
@@ -13,7 +13,7 @@
 
     {{#replace}}
     <div id="replace-group" {{#scope}}class="has-scope"{{/scope}}><!--
-        --><input type="text" id="replace-with" placeholder="{{Strings.REPLACE_PLACEHOLDER}}"/><!--
+        --><input type="text" id="replace-with" placeholder="{{Strings.REPLACE_PLACEHOLDER}}" value="{{initialReplaceText}}" /><!--
         {{^multifile}}
         --><button id="replace-yes" class="btn no-focus" tabindex="-1">{{Strings.BUTTON_REPLACE}}</button><!--
         {{/multifile}}
diff --git a/src/language/CSSUtils.js b/src/language/CSSUtils.js
index 17b14779ab1..09a2e2ec6a6 100644
--- a/src/language/CSSUtils.js
+++ b/src/language/CSSUtils.js
@@ -844,7 +844,7 @@ define(function (require, exports, module) {
 
         function _maybeProperty() {
             return (/^-(moz|ms|o|webkit)-$/.test(token) ||
-                    (state.state !== "top" && state.state !== "block" &&
+                    (state.state !== "top" && state.state !== "block" && state.state !== "pseudo" &&
                     // Has a semicolon as in "rgb(0,0,0);", but not one of those after a LESS 
                     // mixin parameter variable as in ".size(@width; @height)"
                     stream.string.indexOf(";") !== -1 && !/\([^)]+;/.test(stream.string)));
diff --git a/src/language/LanguageManager.js b/src/language/LanguageManager.js
index 06ae334b45e..ecf1c9b3c1b 100644
--- a/src/language/LanguageManager.js
+++ b/src/language/LanguageManager.js
@@ -807,7 +807,7 @@ define(function (require, exports, module) {
      * Returns either a language associated with the mode or the fallback language.
      * Used to disambiguate modes used by multiple languages.
      * @param {!string} mode The mode to associate the language with
-     * @return {Language} This language if it uses the mode, or whatever {@link LanguageManager#_getLanguageForMode} returns
+     * @return {Language} This language if it uses the mode, or whatever {@link #_getLanguageForMode} returns
      */
     Language.prototype.getLanguageForMode = function (mode) {
         if (mode === this._mode) {
@@ -846,7 +846,7 @@ define(function (require, exports, module) {
     
     /**
      * Trigger the "languageModified" event if this language is registered already
-     * @see _triggerLanguageModified
+     * @see #_triggerLanguageModified
      * @private
      */
     Language.prototype._wasModified = function () {
diff --git a/src/language/languages.json b/src/language/languages.json
index dd097be282b..77bdfe1728c 100644
--- a/src/language/languages.json
+++ b/src/language/languages.json
@@ -207,10 +207,15 @@
     "markdown": {
         "name": "Markdown",
         "mode": "markdown",
-        "fileExtensions": ["md", "markdown"],
+        "fileExtensions": ["md", "markdown", "mdown", "mkdn"],
         "blockComment": ["<!--", "-->"]
     },
 
+    "gfm": {
+        "name": "Markdown (GitHub)",
+        "mode": "gfm"
+    },
+
     "yaml": {
         "name": "YAML",
         "mode": "yaml",
diff --git a/src/nls/cs/strings.js b/src/nls/cs/strings.js
index f8bec08082d..1c49bd7bd50 100644
--- a/src/nls/cs/strings.js
+++ b/src/nls/cs/strings.js
@@ -71,6 +71,7 @@ define({
     "ENTRY_WITH_SAME_NAME_EXISTS"       : "Soubor nebo složka se jménem <span class='dialog-filename'>{0}</span> již existuje.",
     "ERROR_CREATING_FILE_TITLE"         : "Chyba při tvorbě souboru",
     "ERROR_CREATING_FILE"               : "Došlo k chybě při vytváření souboru <span class='dialog-filename'>{0}</span>. {1}",
+    "ERROR_MIXED_DRAGDROP"              : "Nelze otevřít složku ve chvíli, kdy se otevírají jiné soubory.",
 
     // Řetězce chyb nastavení aplikace
     "ERROR_PREFS_CORRUPT_TITLE"         : "Chyba při čtení nastavení",
@@ -219,6 +220,23 @@ define({
     "UNTITLED"          : "Nový",
     "WORKING_FILES"     : "Pracovní soubory",
 
+      /**
+     * Správce rozložení
+     */
+    "TOP"               : "Nahoře",
+    "BOTTOM"            : "Dole",
+    "LEFT"              : "Vlevo",
+    "RIGHT"             : "Vpravo",
+
+    "CMD_SPLITVIEW_NONE"        : "Bez rozdělení",
+    "CMD_SPLITVIEW_VERTICAL"    : "Vertikální rozdělení",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "Horizontální rozdělení",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Rozdělit editor horizontálně nebo vertikálně",
+    "GEAR_MENU_TOOLTIP"         : "Nastavit pracovní plochu",
+
+    "SPLITVIEW_INFO_TITLE"              : "Již otevřen",
+    "SPLITVIEW_MULTIPANE_WARNING"       : "Soubor je již otevřen v jiném okně. {APP_NAME} bude brzy podporovat otevírání stejného souboru ve více oknech. Do té doby bude soubor zobrazen v již otevřeném okně.<br /><br />(Tuto zprávu uvidíte pouze jednou.)",
+
     /**
      * Jména kláves
      */
@@ -354,10 +372,10 @@ define({
     "CMD_TOGGLE_WORD_WRAP"                : "Zalomit řádky",
     "CMD_LIVE_HIGHLIGHT"                  : "Živé zvýraznění",
     "CMD_VIEW_TOGGLE_INSPECTION"          : "Lint soubory při uložení",
-    "CMD_SORT_WORKINGSET_BY_ADDED"        : "Řadit podle data",
-    "CMD_SORT_WORKINGSET_BY_NAME"         : "Řadit podle jména",
-    "CMD_SORT_WORKINGSET_BY_TYPE"         : "Řadit podle typu",
-    "CMD_SORT_WORKINGSET_AUTO"            : "Automatické řazení",
+    "CMD_WORKINGSET_SORT_BY_ADDED"        : "Řadit podle data přidání",
+    "CMD_WORKINGSET_SORT_BY_NAME"         : "Řadit podle jména",
+    "CMD_WORKINGSET_SORT_BY_TYPE"         : "Řadit podle typu",
+    "CMD_WORKING_SORT_TOGGLE_AUTO"        : "Automatické řazení",
     "CMD_THEMES"                          : "Motivy\u2026",
 
     // Příkazy menu Navigace
@@ -421,6 +439,7 @@ define({
     "BASEURL_ERROR_HASH_DISALLOWED"        : "URL nemůže obsahovat znaky jako \"{0}\".",
     "BASEURL_ERROR_INVALID_CHAR"           : "Zvláštní znaky jako '{0}' musí být %-enkódovány.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Neznámá chyba při zpracování URL",
+    "EMPTY_VIEW_HEADER"                    : "<em>Otevřete soubor, zatímco tento panel má fokus</em>",
 
     // Řetězce pro themes-settings.html a themes-general.html
     "CURRENT_THEME"                        : "Aktuální motiv",
@@ -550,6 +569,7 @@ define({
     "CMD_LOG_NODE_STATE"                  : "Uložit stav Node do konzole",
     "CMD_RESTART_NODE"                    : "Restartovat Node",
     "CMD_SHOW_ERRORS_IN_STATUS_BAR"       : "Zobrazit chyby ve stavovém řádku",
+    "CMD_OPEN_BRACKETS_SOURCE"            : "Otevřít zdroj Brackets",
 
     "LANGUAGE_TITLE"                      : "Změnit jazyk",
     "LANGUAGE_MESSAGE"                    : "Prosím, vyberte jazyk ze seznamu:",
diff --git a/src/nls/de/strings.js b/src/nls/de/strings.js
index 4d25e666c5b..f83e2458928 100644
--- a/src/nls/de/strings.js
+++ b/src/nls/de/strings.js
@@ -34,6 +34,7 @@ define({
     "GENERIC_ERROR"                     : "(Fehler {0})",
     "NOT_FOUND_ERR"                     : "Die Datei konnte nicht gefunden werden.",
     "NOT_READABLE_ERR"                  : "Die Datei konnte nicht gelesen werden.",
+    "EXCEEDS_MAX_FILE_SIZE"             : "{APP_NAME} kann keine Dateien öffnen, die größer als {0} MB sind.",
     "NO_MODIFICATION_ALLOWED_ERR"       : "Der Ziel-Ordner kann nicht verändert werden.",
     "NO_MODIFICATION_ALLOWED_ERR_FILE"  : "Die Berechtigungen erlauben Ihnen nicht, Veränderungen vorzunehmen.",
     "CONTENTS_MODIFIED_ERR"             : "Die Datei wurde außerhalb von {APP_NAME} verändert.",
@@ -72,10 +73,22 @@ define({
     "ENTRY_WITH_SAME_NAME_EXISTS"       : "Eine Datei oder ein Ordner mit dem Namen <span class='dialog-filename'>{0}</span> existiert bereits.",
     "ERROR_CREATING_FILE_TITLE"         : "Fehler beim Erstellen von {0}", // TODO: depends on {0} gender
     "ERROR_CREATING_FILE"               : "Beim Erstellen von {0} <span class='dialog-filename'>{1}</span> ist ein Fehler aufgetreten: {2}", // TODO: depends on {0} gender
+    "ERROR_MIXED_DRAGDROP"              : "Ein Ordner kann nicht zeitgleich mit anderen Dateien geöffnet werden.",
+
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Fehler beim Einlesen der benutzerdefinierten Tastenbelegung",
+    "ERROR_KEYMAP_CORRUPT"              : "Ihre Tastenbelegungs-Datei enthält kein gültiges JSON. Die Datei wird geöffnet, damit sie das Format korrigieren können.",
+    "ERROR_LOADING_KEYMAP"              : "Ihre Tastenbelegungs-Datei ist keine gültige UTF-8-kodierte Textdatei und kann daher nicht geladen werden.",
+    "ERROR_RESTRICTED_COMMANDS"         : "Sie können die Tastenkürzel der folgenden Befehle nicht ändern: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "Sie können die folgenden Tastenkürzel nicht ändern: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "Sie ordnen diesen Befehlen mehrere Tastenkürzel zu: {0}",
+    "ERROR_DUPLICATE_SHORTCUTS"         : "Sie belegen diese Tastenkürzel mehrfach: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "Diese Tastenkürzel sind ungültig: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "Sie ordnen nicht existierenden Befehlen Tastenkürzel zu: {0}",
 
     // Application preferences corrupt error strings
     "ERROR_PREFS_CORRUPT_TITLE"         : "Fehler beim Lesen der Einstellungen",
-    "ERROR_PREFS_CORRUPT"               : "Ihre Einstellungsdatei ist kein gültiges JSON. Die Datei wird geöffnet, damit Sie das Format korrigieren können. Sie müssen {APP_NAME} neu starten, damit die Änderungen wirksam werden.",
+    "ERROR_PREFS_CORRUPT"               : "Ihre Einstellungsdatei enthält kein gültiges JSON. Die Datei wird geöffnet, damit Sie das Format korrigieren können. Sie müssen {APP_NAME} neu starten, damit die Änderungen wirksam werden.",
 
     // Application error strings
     "ERROR_IN_BROWSER_TITLE"            : "Ups! {APP_NAME} kann derzeit leider noch nicht im Browser ausgeführt werden.",
@@ -92,8 +105,8 @@ define({
 
     "LIVE_DEVELOPMENT_ERROR_TITLE"      : "Fehler bei der Live-Vorschau",
     "LIVE_DEVELOPMENT_RELAUNCH_TITLE"   : "Verbinden zum Browser",
-    "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "Um die Live-Vorschau zu verwenden, muss Chrome mit aktiviertem Remote-Debugging neu gestartet werden.<br /><br />Soll Chrome neu gestartet werden, um das Remote Debugger Protokoll zu aktivieren?",
-    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Laden der Live-Vorschau nicht möglich",
+    "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "Um die Live-Vorschau zu verwenden, muss Chrome mit aktiviertem Remote-Debugging neu gestartet werden.<br /><br />Soll Chrome neu gestartet werden, um das Remote Debugger Protokoll zu aktivieren?<br /><br />",
+    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Laden der Live-Vorschau nicht möglich.",
     "LIVE_DEV_NEED_HTML_MESSAGE"        : "Öffnen Sie eine HTML-Datei oder stellen Sie sicher, dass sich eine index.html-Datei im Projekt befindet, um die Live-Vorschau zu starten.",
     "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "Zum Starten der Live-Vorschau mit einer serverseitigen Datei müssen Sie eine Basis-URL für dieses Projekt angeben.",
     "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Ein Fehler ist beim Starten des HTTP-Servers oder der Live-Vorschau-Dateien aufgetreten. Bitte versuchen Sie es später erneut.",
@@ -220,6 +233,23 @@ define({
     "UNTITLED"         : "Unbenannt",
     "WORKING_FILES"    : "Offene Dateien",
 
+    /**
+     * MainViewManager
+     */
+    "TOP"               : "Oben",
+    "BOTTOM"            : "Unten",
+    "LEFT"              : "Links",
+    "RIGHT"             : "Rechts",
+
+    "CMD_SPLITVIEW_NONE"        : "Nicht geteilt",
+    "CMD_SPLITVIEW_VERTICAL"    : "Vertikal geteilt",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "Horizontal geteilt",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Teilen Sie den Editor vertikal oder horizontal",
+    "GEAR_MENU_TOOLTIP"         : "Projektdateien konfigurieren",
+
+    "SPLITVIEW_INFO_TITLE"              : "Bereits geöffnet",
+    "SPLITVIEW_MULTIPANE_WARNING"       : "Diese Datei ist bereits in einer anderen Ansicht geöffnet. Das Öffnen einer Datei in mehreren Ansichten wird {APP_NAME} bald unterstützen. Bis dahin wird die Datei in der Ansicht angezeigt, in der sie bereits geöffnet ist.<br /><br />(Sie sehen diese Nachricht nur einmal.)",
+
     /**
      * Keyboard modifier names
      */
@@ -276,7 +306,7 @@ define({
     "CMD_FILE_NEW"                        : "Neue Datei",
     "CMD_FILE_NEW_FOLDER"                 : "Neuer Ordner",
     "CMD_FILE_OPEN"                       : "Öffnen\u2026",
-    "CMD_ADD_TO_WORKING_SET"              : "Zum Projekt hinzufügen",
+    "CMD_ADD_TO_WORKING_SET"              : "Im Projekt öffnen",
     "CMD_OPEN_DROPPED_FILES"              : "Abgelegte Dateien öffnen",
     "CMD_OPEN_FOLDER"                     : "Ordner öffnen\u2026",
     "CMD_FILE_CLOSE"                      : "Schließen",
@@ -355,10 +385,10 @@ define({
     "CMD_TOGGLE_WORD_WRAP"                : "Zeilenumbruch aktivieren",
     "CMD_LIVE_HIGHLIGHT"                  : "Live-Vorschau Highlight",
     "CMD_VIEW_TOGGLE_INSPECTION"          : "Beim Speichern linten",
-    "CMD_SORT_WORKINGSET_BY_ADDED"        : "Nach Hinzufügen-Datum sortieren",
-    "CMD_SORT_WORKINGSET_BY_NAME"         : "Nach Name sortieren",
-    "CMD_SORT_WORKINGSET_BY_TYPE"         : "Nach Typ sortieren",
-    "CMD_SORT_WORKINGSET_AUTO"            : "Automatisch sortieren",
+    "CMD_WORKINGSET_SORT_BY_ADDED"        : "Nach Hinzufügen-Datum sortieren",
+    "CMD_WORKINGSET_SORT_BY_NAME"         : "Nach Name sortieren",
+    "CMD_WORKINGSET_SORT_BY_TYPE"         : "Nach Typ sortieren",
+    "CMD_WORKING_SORT_TOGGLE_AUTO"        : "Automatisch sortieren",
     "CMD_THEMES"                          : "Designs\u2026",
 
     // Navigate menu Commands
@@ -392,9 +422,11 @@ define({
     "CMD_TWITTER"                         : "{TWITTER_NAME} auf Twitter",
     "CMD_ABOUT"                           : "Über {APP_TITLE}",
     "CMD_OPEN_PREFERENCES"                : "Einstellungsdatei öffnen",
+    "CMD_OPEN_KEYMAP"                     : "Benutzerdefinierte Tastenbelegung öffnen",
 
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "Experimenteller Build",
+    "RELEASE_BUILD"                        : "Build",
     "DEVELOPMENT_BUILD"                    : "Entwicklungs-Build",
     "RELOAD_FROM_DISK"                     : "Von der Festplatte neu laden",
     "KEEP_CHANGES_IN_EDITOR"               : "Änderungen im Editor behalten",
@@ -402,7 +434,7 @@ define({
     "RELAUNCH_CHROME"                      : "Chrome neu starten",
     "ABOUT"                                : "Über",
     "CLOSE"                                : "Schließen",
-    "ABOUT_TEXT_LINE1"                     : "Sprint {VERSION_MINOR} {BUILD_TYPE} {VERSION}",
+    "ABOUT_TEXT_LINE1"                     : "Release {VERSION_MAJOR}.{VERSION_MINOR} {BUILD_TYPE} {VERSION}",
     "ABOUT_TEXT_BUILD_TIMESTAMP"           : "Zeitpunkt des Builds: ",
     "ABOUT_TEXT_LINE3"                     : "Hinweise, Bestimmungen und Bedingungen, die sich auf Drittanbieter-Software beziehen, finden sich unter <a href='{ADOBE_THIRD_PARTY}'>{ADOBE_THIRD_PARTY}</a> und sind hier durch Bezugnahme eingeschlossen.",
     "ABOUT_TEXT_LINE4"                     : "Dokumentation und Quellcode unter <a href='https://github.com/adobe/brackets/'>https://github.com/adobe/brackets/</a>",
@@ -421,6 +453,7 @@ define({
     "BASEURL_ERROR_HASH_DISALLOWED"        : "Die Basis-URL kann keine Hashes wie \"{0}\" enthalten.",
     "BASEURL_ERROR_INVALID_CHAR"           : "Sonderzeichen wie  \"{0}\" müssen %-kodiert werden.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Unbekannter Fehler beim Verarbeiten der Basis-URL",
+    "EMPTY_VIEW_HEADER"                    : "<em>Öffnen Sie eine Datei, während diese Ansicht fokussiert ist</em>",
 
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Aktuelles Design",
@@ -524,6 +557,7 @@ define({
     "EXTENSIONS_UPDATES_TITLE"             : "Updates",
 
     "INLINE_EDITOR_NO_MATCHES"             : "Keine Ergebnisse verfügbar.",
+    "INLINE_EDITOR_HIDDEN_MATCHES"         : "Alle Ergebnisse sind ausglendet. Klicken Sie auf die rechts gelisteten Dateien, um die dazugehörigen Ergebnisse anzuzeigen.",
     "CSS_QUICK_EDIT_NO_MATCHES"            : "Es gibt keine CSS-Regeln, die zu Ihrer Auswahl passen.<br> Klicken Sie auf \"Neue Regel\", um eine neue Regel zu erstellen.",
     "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "Es gibt keine Stylesheets in Ihrem Projekt.<br>Erstellen Sie eines, um CSS-Regeln hinzuzufügen.",
 
@@ -550,6 +584,7 @@ define({
     "CMD_LOG_NODE_STATE"                        : "Node-Status in Konsole anzeigen",
     "CMD_RESTART_NODE"                          : "Node neu starten",
     "CMD_SHOW_ERRORS_IN_STATUS_BAR"             : "Zeige Fehler in der Statusleiste",
+    "CMD_OPEN_BRACKETS_SOURCE"                  : "Brackets-Quellcode anzeigen",
 
     "LANGUAGE_TITLE"                            : "Sprache wechseln",
     "LANGUAGE_MESSAGE"                          : "Sprache:",
@@ -578,7 +613,7 @@ define({
     "CMD_SHOW_PARAMETER_HINT"                   : "Parameter-Hinweis anzeigen",
     "NO_ARGUMENTS"                              : "<keine Parameter>",
     "DETECTED_EXCLUSION_TITLE"                  : "Problem mit einer JavaScript-Datei",
-    "DETECTED_EXCLUSION_INFO"                   : "Brackets hat Probleme damit, diese Datei zu verarbeiten:<br><br>{0}<br><br>Code-Vervollständigung und das Springen zur Definition werden für die Datei nicht mehr bereitgestellt. Öffnen Sie <code>.brackets.json</code> in diesem Projekt und entfernen Sie den Dateipfad von jscodehints.detectedExclusions, um diese Features zu reaktivieren.",
+    "DETECTED_EXCLUSION_INFO"                   : "Brackets hat Probleme damit, <span class='dialog-filename'>{0}</span> zu verarbeiten.<br><br>Code-Vervollständigung, Springen zur Definition und Schnelles Bearbeiten werden für die Datei nicht mehr bereitgestellt. Öffnen Sie <code>.brackets.json</code> in diesem Projekt und entfernen Sie den Dateipfad von <code>jscodehints.detectedExclusions</code>, um diese Datei wieder einzuschließen.<br><br>Das ist wahrscheinlich ein Bug in Brackets. <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>Melden Sie den Fehler</a> bitte, falls Sie eine Kopie dieser Datei bereitstellen können. Verlinken Sie in diesem Fall die oben genannte Datei.",
 
     // extensions/default/JSLint
     "JSLINT_NAME"                               : "JSLint",
@@ -593,4 +628,4 @@ define({
     "DOCS_MORE_LINK"                            : "Weiterlesen"
 });
 
-/* Last translated for 8712385a6bf12277e6d0788d408e630a40c95a14 */
+/* Last translated for 893c065b715c211526dcd010c0294e12a8683995 */
diff --git a/src/nls/es/strings.js b/src/nls/es/strings.js
index 7f8f1821321..a93be266e12 100644
--- a/src/nls/es/strings.js
+++ b/src/nls/es/strings.js
@@ -34,6 +34,7 @@ define({
     "GENERIC_ERROR"                     : "(error {0})",
     "NOT_FOUND_ERR"                     : "No se pudo encontrar el archivo.",
     "NOT_READABLE_ERR"                  : "No se pudo leer el archivo.",
+    "EXCEEDS_MAX_FILE_SIZE"             : "Los archivos de más de {0} MB no se pueden abrir en {APP_NAME}.",
     "NO_MODIFICATION_ALLOWED_ERR"       : "El directorio de destino no se puede modificar.",
     "NO_MODIFICATION_ALLOWED_ERR_FILE"  : "Los permisos no permiten hacer modificaciones.",
     "CONTENTS_MODIFIED_ERR"             : "El archivo fue modificado fuera de {APP_NAME}.",
@@ -68,14 +69,26 @@ define({
     "ERROR_DELETING_FILE_TITLE"         : "Error eliminando el {0}",
     "ERROR_DELETING_FILE"               : "Ha ocurrido un error al intentar eliminar el {2} <span class='dialog-filename'>{0}</span>. {1}",
     "INVALID_FILENAME_TITLE"            : "{0} inválido",
-    "INVALID_FILENAME_MESSAGE"          : "Los {0} no puede utilizar ninguna palabra reservada por el sistema, terminar con puntos (.) o utilizar cualquiera de los siguientes caracteres: <code class='emphasized'>{1}</code>",
+    "INVALID_FILENAME_MESSAGE"          : "Los {0} no pueden utilizar ninguna palabra reservada por el sistema, terminar con puntos (.) o utilizar cualquiera de los siguientes caracteres: <code class='emphasized'>{1}</code>",
     "ENTRY_WITH_SAME_NAME_EXISTS"       : "Ya existe un archivo o directorio con el nombre <span class='dialog-filename'>{0}</span>.",
     "ERROR_CREATING_FILE_TITLE"         : "Error creando {0}",
     "ERROR_CREATING_FILE"               : "Ha ocurrido un error al intentar crear el {0} <span class='dialog-filename'>{1}</span>. {2}",
-
+    "ERROR_MIXED_DRAGDROP"              : "No es posible abrir una carpeta y otros archivos al mismo tiempo.",
+    
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Ocurrió un error leyendo los atajos de teclado",
+    "ERROR_KEYMAP_CORRUPT"              : "El archivo de atajos de teclado no tiene un formato JSON válido. El archivo se abrirá para que puedas corregir el formato.",
+    "ERROR_LOADING_KEYMAP"              : "El archivo de atajos de teclado no está codificado como UTF-8 y no puede ser cargado.",
+    "ERROR_RESTRICTED_COMMANDS"         : "No puedes reasignar atajos de teclado a los siguientes comandos: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "No puedes reasignar los siguientes atajos de teclado: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "Estas reasignando múltiples atajos de teclado a los siguientes comandos: {0}",
+    "ERROR_DUPLICATE_SHORTCUTS"         : "Hay múltiples apariciones de los siguientes atajos de teclado: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "Los siguientes atajos de teclado son inválidos: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "Estas asignando atajos de teclado a commandos inexistentes: {0}",
+    
     // Application preferences corrupt error strings
     "ERROR_PREFS_CORRUPT_TITLE"         : "Error leyendo las preferencias",
-    "ERROR_PREFS_CORRUPT"               : "El archivo de preferencias no tiene un formato JSON válido. El archivo se abrirá para que pueda corregir el formato. Luego deberá reiniciar {APP_NAME} para que los cambios surtan efecto.",
+    "ERROR_PREFS_CORRUPT"               : "El archivo de preferencias no tiene un formato JSON válido. El archivo se abrirá para que puedas corregir el formato. Luego deberás reiniciar {APP_NAME} para que los cambios surtan efecto.",
     
     // Application error strings
     "ERROR_IN_BROWSER_TITLE"            : "Vaya... parece que {APP_NAME} todavía no funciona en navegadores.",
@@ -87,40 +100,40 @@ define({
 
     // Live Preview error strings
     "ERROR_LAUNCHING_BROWSER_TITLE"     : "Error iniciando el navegador",
-    "ERROR_CANT_FIND_CHROME"            : "No se pudo encontrar el navegador Google Chrome. Por favor, asegúrate de que esté instalado correctamente.",
+    "ERROR_CANT_FIND_CHROME"            : "No se pudo encontrar el navegador Google Chrome. Por favor, asegúrate que esté instalado correctamente.",
     "ERROR_LAUNCHING_BROWSER"           : "Ha ocurrido un error al iniciar el navegador. (error {0})",
     
-    "LIVE_DEVELOPMENT_ERROR_TITLE"      : "Error en la Vista previa en vivo",
+    "LIVE_DEVELOPMENT_ERROR_TITLE"      : "Error en la Vista previa dinámica",
     "LIVE_DEVELOPMENT_RELAUNCH_TITLE"   : "Conectando con el navegador",
-    "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "Para poder iniciar el modo de Vista previa en vivo, Chrome debe ser iniciado habilitando la depuración remota.<br /><br />¿Quieres reiniciar Chrome y habilitar la depuración remota?",
-    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "No se pudo cargar la página para Vista previa en vivo",
-    "LIVE_DEV_NEED_HTML_MESSAGE"        : "Abre un archivo HTML o asegúrate de que haya un index.html en tu proyecto para poder iniciar el modo de Vista previa en vivo.",
-    "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "Necesitas especificar una URL base en este proyecto para poder iniciar Vista previa en vivo con archivos de servidor.",
-    "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Error iniciando el servidor HTTP para Vista previa en vivo. Vuelve a intentarlo, por favor.",
-    "LIVE_DEVELOPMENT_INFO_TITLE"       : "¡Bienvenido a la Vista previa en vivo!",
-    "LIVE_DEVELOPMENT_INFO_MESSAGE"     : "Vista previa en vivo conecta {APP_NAME} con tu navegador. Lanza una vista previa de tu archivo HTML en el navegador y la actualiza a medida que modificas tu código.<br /><br />En esta versión preliminar de {APP_NAME}, Desarrollo en Vivo sólo funciona para cambios de <strong>archivos CSS o HTML</strong> y únicamente con <strong>Google Chrome</strong>. Los cambios en los archivos Javascript son recargados automáticamente cuando se guardan.<br /><br />(No volverás a ver este mensaje.)",
-    "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "Para más información, consulta <a href='{0}' title='{0}'>Resolución de Problemas de conexión en Vista previa en vivo</a>.",
-    
-    "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Vista previa en vivo",
-    "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Vista previa en vivo: Conectando\u2026",
-    "LIVE_DEV_STATUS_TIP_PROGRESS2"     : "Vista previa en vivo: Inicializando\u2026",
-    "LIVE_DEV_STATUS_TIP_CONNECTED"     : "Terminar Vista previa en vivo",
-    "LIVE_DEV_STATUS_TIP_OUT_OF_SYNC"   : "Vista previa en vivo (guarda el archivo para actualizar)",
-    "LIVE_DEV_STATUS_TIP_SYNC_ERROR"    : "Vista previa en vivo (no se está actualizando debido a un error de sintaxis)",
-    
-    "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS" : "Vista previa en vivo se ha detenido porque se han abierto las herramientas de desarrollo",
-    "LIVE_DEV_DETACHED_TARGET_CLOSED"          : "Vista previa en vivo se ha detenido porque se ha cerrado la página en el navegador",
-    "LIVE_DEV_NAVIGATED_AWAY"                  : "Vista previa en vivo se ha detenido porque se ha accedido a una página que no es parte del proyecto actual",
-    "LIVE_DEV_CLOSED_UNKNOWN_REASON"           : "Vista previa en vivo se ha detenido por motivos desconocidos ({0})",
+    "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "Para poder iniciar el modo de Vista previa dinámica, Chrome debe ser iniciado habilitando la depuración remota.<br /><br />¿Quieres reiniciar Chrome y habilitar la depuración remota?<br /><br />",
+    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "No se pudo cargar la página para la Vista previa dinámica.",
+    "LIVE_DEV_NEED_HTML_MESSAGE"        : "Abra un archivo HTML o asegúrate de que haya un index.html en tu proyecto para poder iniciar el modo de Vista previa dinámica.",
+    "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "Necesitas especificar una URL base en este proyecto para poder iniciar la Vista previa dinámica con archivos de servidor.",
+    "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Error iniciando el servidor HTTP para la Vista previa dinámica. Vuelve a intentarlo, por favor.",
+    "LIVE_DEVELOPMENT_INFO_TITLE"       : "¡Bienvenido a la Vista previa dinámica!",
+    "LIVE_DEVELOPMENT_INFO_MESSAGE"     : "Vista previa dinámica conecta {APP_NAME} con tu navegador. Lanza una vista previa de tu archivo HTML en el navegador y la actualiza a medida que modificas tu código.<br /><br />En esta versión preliminar de {APP_NAME}, el modo de Vista previa dinámica sólo funciona para cambios de <strong>archivos CSS o HTML</strong> y únicamente con <strong>Google Chrome</strong>. Los cambios en los archivos Javascript son recargados automáticamente cuando se guardan.<br /><br />(No volverás a ver este mensaje.)",
+    "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "Para más información, consulta <a href='{0}' title='{0}'>Resolución de Problemas de conexión en Vista previa dinámica</a>.",
+    
+    "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Vista previa dinámica",
+    "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Vista previa dinámica: Conectando\u2026",
+    "LIVE_DEV_STATUS_TIP_PROGRESS2"     : "Vista previa dinámica: Inicializando\u2026",
+    "LIVE_DEV_STATUS_TIP_CONNECTED"     : "Terminar la Vista previa dinámica",
+    "LIVE_DEV_STATUS_TIP_OUT_OF_SYNC"   : "Vista previa dinámica (guarda el archivo para actualizar)",
+    "LIVE_DEV_STATUS_TIP_SYNC_ERROR"    : "Vista previa dinámica (no se está actualizando debido a un error de sintaxis)",
+    
+    "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS" : "Vista previa dinámica se ha detenido porque se han abierto las herramientas de desarrollo",
+    "LIVE_DEV_DETACHED_TARGET_CLOSED"          : "Vista previa dinámica se ha detenido porque se ha cerrado la página en el navegador",
+    "LIVE_DEV_NAVIGATED_AWAY"                  : "Vista previa dinámica se ha detenido porque se ha accedido a una página que no es parte del proyecto actual",
+    "LIVE_DEV_CLOSED_UNKNOWN_REASON"           : "Vista previa dinámica se ha detenido por motivos desconocidos ({0})",
     
     "SAVE_CLOSE_TITLE"                  : "Guardar cambios",
     "SAVE_CLOSE_MESSAGE"                : "¿Quieres guardar los cambios existentes en el documento <span class='dialog-filename'>{0}</span>?",
     "SAVE_CLOSE_MULTI_MESSAGE"          : "¿Quieres guardar tus cambios en los siguientes documentos?",
     "EXT_MODIFIED_TITLE"                : "Cambios externos",
     "CONFIRM_FOLDER_DELETE_TITLE"       : "Confirmar eliminación",
-    "CONFIRM_FOLDER_DELETE"             : "¿Está seguro que desea eliminar el directorio <span class='dialog-filename'>{0}</span>?",
+    "CONFIRM_FOLDER_DELETE"             : "¿Estás seguro que deseas eliminar el directorio <span class='dialog-filename'>{0}</span>?",
     "FILE_DELETED_TITLE"                : "Archivo eliminado",
-    "EXT_MODIFIED_WARNING"              : "<span class='dialog-filename'>{0}</span> ha sido modificado en el disco.<br /><br />¿Desea guardar el archivo y sobrescribir esos cambios?",
+    "EXT_MODIFIED_WARNING"              : "<span class='dialog-filename'>{0}</span> ha sido modificado en el disco.<br /><br />¿Deseas guardar el archivo y sobrescribir esos cambios?",
     "EXT_MODIFIED_MESSAGE"              : "<span class='dialog-filename'>{0}</span> ha sido modificado, pero también tiene cambios en {APP_NAME}.<br /><br />¿Qué versión quieres conservar?",
     "EXT_DELETED_MESSAGE"               : "<span class='dialog-filename'>{0}</span> ha sido eliminado, pero tiene cambios sin guardar en {APP_NAME}.<br /><br />¿Quieres conservar tus cambios?",
     
@@ -180,12 +193,12 @@ define({
     "FIND_IN_FILES_MORE_THAN"           : "Más de ",
     "FIND_IN_FILES_PAGING"              : "{0}&mdash;{1}",
     "FIND_IN_FILES_FILE_PATH"           : "<span class='dialog-filename'>{0}</span> {2} <span class='dialog-path'>{1}</span>",
-    "FIND_IN_FILES_EXPAND_COLLAPSE"     : "Ctrl/Cmd click para expandir/colapsar todo",
+    "FIND_IN_FILES_EXPAND_COLLAPSE"     : "Ctrl/Cmd clic para expandir/colapsar todo",
     "REPLACE_IN_FILES_ERRORS_TITLE"     : "Errores al reemplazar",
     "REPLACE_IN_FILES_ERRORS"           : "Los siguientes archivos no fueron modificados porque cambiaron después de realizar la búsqueda o no pueden ser escritos.",
     
     "ERROR_FETCHING_UPDATE_INFO_TITLE"  : "Error obteniendo información sobre actualizaciones",
-    "ERROR_FETCHING_UPDATE_INFO_MSG"    : "Ocurrió un problema al obtener la información sobre las últimas actualizaciones desde el servidor. Por favor, asegúrate de estar conectado a Internet y vuelve a intentarlo.",
+    "ERROR_FETCHING_UPDATE_INFO_MSG"    : "Ocurrió un problema al obtener la información sobre las últimas actualizaciones desde el servidor. Por favor, asegúrate de estar conectado a internet y vuelve a intentarlo.",
     
     // File exclusion filters
     "NEW_FILE_FILTER"                   : "Nuevo conjunto de filtros\u2026",
@@ -220,6 +233,23 @@ define({
     "UNTITLED"          : "Sin título",
     "WORKING_FILES"     : "Área de trabajo",
     
+    /**
+     * MainViewManager
+     */
+    "TOP"               : "Arriba",
+    "BOTTOM"            : "Abajo",
+    "LEFT"              : "Izquierda",
+    "RIGHT"             : "Derecha",
+    
+    "CMD_SPLITVIEW_NONE"        : "No dividido",
+    "CMD_SPLITVIEW_VERTICAL"    : "División vertical",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "División horizontal",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Dividir el editor vertical u horizontalmente",
+    "GEAR_MENU_TOOLTIP"         : "Configurar el área de trabajo",
+    
+    "SPLITVIEW_INFO_TITLE"              : "Ya está abierto",
+    "SPLITVIEW_MULTIPANE_WARNING"       : "El archivo ya está abierto en otro panel. Próximamente {APP_NAME} soportará abrir el mismo archivo en más de un panel. Hasta entonces, el archivo se mostrará en el panel en el cual ya está abierto.<br /><br />(Sólo verá este mensaje una vez.)",
+    
     /**
      * Keyboard modifier names
      */
@@ -236,20 +266,20 @@ define({
     "STATUSBAR_SELECTION_LINE_SINGULAR"     : " \u2014 {0} línea seleccionada",
     "STATUSBAR_SELECTION_LINE_PLURAL"       : " \u2014 {0} líneas seleccionadas",
     "STATUSBAR_SELECTION_MULTIPLE"          : " \u2014 {0} selecciones",
-    "STATUSBAR_INDENT_TOOLTIP_SPACES"       : "Haz click para usar espacios en la sangría",
-    "STATUSBAR_INDENT_TOOLTIP_TABS"         : "Haz click para usar tabulaciones en la sangría",
-    "STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES"  : "Haz click para cambiar el número de espacios usados en la sangría",
-    "STATUSBAR_INDENT_SIZE_TOOLTIP_TABS"    : "Haz click para cambiar el ancho de las tabulaciones",
+    "STATUSBAR_INDENT_TOOLTIP_SPACES"       : "Haz clic para usar espacios en la sangría",
+    "STATUSBAR_INDENT_TOOLTIP_TABS"         : "Haz clic para usar tabulaciones en la sangría",
+    "STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES"  : "Haz clic para cambiar el número de espacios usados en la sangría",
+    "STATUSBAR_INDENT_SIZE_TOOLTIP_TABS"    : "Haz clic para cambiar el ancho de las tabulaciones",
     "STATUSBAR_SPACES"                      : "Espacios:",
-    "STATUSBAR_TAB_SIZE"                    : "Tamaño de tabulador:",
+    "STATUSBAR_TAB_SIZE"                    : "Tamaño del tabulador:",
     "STATUSBAR_LINE_COUNT_SINGULAR"         : "\u2014 {0} línea",
     "STATUSBAR_LINE_COUNT_PLURAL"           : "\u2014 {0} líneas",
     "STATUSBAR_USER_EXTENSIONS_DISABLED"    : "Extensiones deshabilitadas",
     "STATUSBAR_INSERT"                      : "INS",
     "STATUSBAR_OVERWRITE"                   : "SOB",
-    "STATUSBAR_INSOVR_TOOLTIP"              : "Haz click para intercambiar entre el modo insertar (INS) y el modo sobrescribir (SOB)",
-    "STATUSBAR_LANG_TOOLTIP"                : "Haz click para cambiar el tipo de archivo",
-    "STATUSBAR_CODE_INSPECTION_TOOLTIP"     : "{0}. Haz click para mostrar/ocultar el panel de reportes.",
+    "STATUSBAR_INSOVR_TOOLTIP"              : "Haz clic para intercambiar entre el modo insertar (INS) y el modo sobrescribir (SOB)",
+    "STATUSBAR_LANG_TOOLTIP"                : "Haz clic para cambiar el tipo de archivo",
+    "STATUSBAR_CODE_INSPECTION_TOOLTIP"     : "{0}. Haz clic para mostrar/ocultar el panel de reportes.",
     "STATUSBAR_DEFAULT_LANG"                : "(por defecto)",
     "STATUSBAR_SET_DEFAULT_LANG"            : "Marcar como predeterminado para los archivos .{0}",
     
@@ -259,7 +289,7 @@ define({
     "MULTIPLE_ERRORS"                       : "{1} problemas de {0}",
     "NO_ERRORS"                             : "No se encontraron problemas de {0} - ¡Buen trabajo!",
     "NO_ERRORS_MULTIPLE_PROVIDER"           : "No se encontraron problemas - ¡Buen trabajo!",
-    "LINT_DISABLED"                         : "La inspección de código esta deshabilitado",
+    "LINT_DISABLED"                         : "La inspección de código está deshabilitada",
     "NO_LINT_AVAILABLE"                     : "No hay inspección de código disponible para {0}",
     "NOTHING_TO_LINT"                       : "No hay nada para inspeccionar",
     "LINTER_TIMED_OUT"                      : "{0} ha agotado el tiempo después de esperar {1} ms",
@@ -276,7 +306,7 @@ define({
     "CMD_FILE_NEW"                        : "Nuevo archivo",
     "CMD_FILE_NEW_FOLDER"                 : "Nueva carpeta",
     "CMD_FILE_OPEN"                       : "Abrir\u2026",
-    "CMD_ADD_TO_WORKING_SET"              : "Añadir al espacio de trabajo",
+    "CMD_ADD_TO_WORKING_SET"              : "Abrir en el área de trabajo",
     "CMD_OPEN_DROPPED_FILES"              : "Abrir archivos soltados",
     "CMD_OPEN_FOLDER"                     : "Abrir carpeta\u2026",
     "CMD_FILE_CLOSE"                      : "Cerrar",
@@ -288,8 +318,8 @@ define({
     "CMD_FILE_SAVE"                       : "Guardar",
     "CMD_FILE_SAVE_ALL"                   : "Guardar todo",
     "CMD_FILE_SAVE_AS"                    : "Guardar como\u2026",
-    "CMD_LIVE_FILE_PREVIEW"               : "Vista previa en vivo",
-    "CMD_RELOAD_LIVE_PREVIEW"             : "Recargar vista previa en vivo",
+    "CMD_LIVE_FILE_PREVIEW"               : "Vista previa dinámica",
+    "CMD_RELOAD_LIVE_PREVIEW"             : "Recargar la Vista previa dinámica",
     "CMD_PROJECT_SETTINGS"                : "Configuración del proyecto\u2026",
     "CMD_FILE_RENAME"                     : "Renombrar",
     "CMD_FILE_DELETE"                     : "Eliminar",
@@ -353,12 +383,12 @@ define({
     "CMD_TOGGLE_LINE_NUMBERS"             : "Mostrar números de línea",
     "CMD_TOGGLE_ACTIVE_LINE"              : "Resaltar línea actual",
     "CMD_TOGGLE_WORD_WRAP"                : "Habilitar ajuste de línea",
-    "CMD_LIVE_HIGHLIGHT"                  : "Resaltado en Vista previa en vivo",
+    "CMD_LIVE_HIGHLIGHT"                  : "Resaltado en Vista previa dinámica",
     "CMD_VIEW_TOGGLE_INSPECTION"          : "Inspeccionar el código al guardar",
-    "CMD_SORT_WORKINGSET_BY_ADDED"        : "Ordenar por Añadido",
-    "CMD_SORT_WORKINGSET_BY_NAME"         : "Ordenar por Nombre",
-    "CMD_SORT_WORKINGSET_BY_TYPE"         : "Ordenar por Tipo",
-    "CMD_SORT_WORKINGSET_AUTO"            : "Ordenación automática",
+    "CMD_WORKINGSET_SORT_BY_ADDED"        : "Ordenar por Añadido",
+    "CMD_WORKINGSET_SORT_BY_NAME"         : "Ordenar por Nombre",
+    "CMD_WORKINGSET_SORT_BY_TYPE"         : "Ordenar por Tipo",
+    "CMD_WORKING_SORT_TOGGLE_AUTO"        : "Ordenación automática",
     "CMD_THEMES"                          : "Temas\u2026",
 
     // Navigate menu Commands
@@ -392,9 +422,11 @@ define({
     "CMD_TWITTER"                         : "{TWITTER_NAME} en Twitter",
     "CMD_ABOUT"                           : "Acerca de {APP_TITLE}",
     "CMD_OPEN_PREFERENCES"                : "Abrir archivo de preferencias",
+    "CMD_OPEN_KEYMAP"                     : "Abrir archivo de atajos de teclado",
     
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "versión experimental",
+    "RELEASE_BUILD"                        : "versión",
     "DEVELOPMENT_BUILD"                    : "versión de desarrollo",
     "RELOAD_FROM_DISK"                     : "Volver a cargar desde disco",
     "KEEP_CHANGES_IN_EDITOR"               : "Conservar los cambios del editor",
@@ -402,29 +434,30 @@ define({
     "RELAUNCH_CHROME"                      : "Reiniciar Chrome",
     "ABOUT"                                : "Acerca de\u2026",
     "CLOSE"                                : "Cerrar",
-    "ABOUT_TEXT_LINE1"                     : "sprint {VERSION_MINOR} {BUILD_TYPE} {VERSION}",
+    "ABOUT_TEXT_LINE1"                     : "Release {VERSION_MAJOR}.{VERSION_MINOR} {BUILD_TYPE} {VERSION}",
     "ABOUT_TEXT_BUILD_TIMESTAMP"           : "construido el: ",
     "ABOUT_TEXT_LINE3"                     : "Los avisos, términos y condiciones pertenecientes a software de terceros se encuentran en <a href='{ADOBE_THIRD_PARTY}'>{ADOBE_THIRD_PARTY}</a> y se incluyen aquí como referencia.",
     "ABOUT_TEXT_LINE4"                     : "Puedes encontrar la documentación y código fuente en <a href='https://github.com/adobe/brackets/'>https://github.com/adobe/brackets/</a>",
     "ABOUT_TEXT_LINE5"                     : "Hecho con \u2764 y JavaScript por:",
     "ABOUT_TEXT_LINE6"                     : "Mucha gente (pero ahora mismo estamos teniendo problemas para cargar esos datos).",
     "ABOUT_TEXT_WEB_PLATFORM_DOCS"         : "El contenido de Web Platform Docs y el logo de Web Platform están disponibles bajo Licencia de Reconocimiento de Creative Commons, <a href='{WEB_PLATFORM_DOCS_LICENSE}'>CC-BY 3.0 Unported</a>.",
-    "UPDATE_NOTIFICATION_TOOLTIP"          : "¡Hay una nueva versión de {APP_NAME} disponible! Haz click aquí para más detalles.",
+    "UPDATE_NOTIFICATION_TOOLTIP"          : "¡Hay una nueva versión de {APP_NAME} disponible! Haz clic aquí para ver más detalles.",
     "UPDATE_AVAILABLE_TITLE"               : "Actualización disponible",
     "UPDATE_MESSAGE"                       : "¡Hay una nueva versión de {APP_NAME} disponible! Éstas son algunas de las nuevas características:",
     "GET_IT_NOW"                           : "¡Consíguelo ahora!",
     "PROJECT_SETTINGS_TITLE"               : "Configuración del proyecto para: {0}",
-    "PROJECT_SETTING_BASE_URL"             : "URL base para Vista previa en vivo",
+    "PROJECT_SETTING_BASE_URL"             : "URL base para Vista previa dinámica",
     "PROJECT_SETTING_BASE_URL_HINT"        : "(deja en blanco para urls de tipo \"file\")",
-    "BASEURL_ERROR_INVALID_PROTOCOL"       : "Vista previa en vivo no soporta el protocolo {0}. Por favor, utiliza http: o https: .",
+    "BASEURL_ERROR_INVALID_PROTOCOL"       : "El protocolo {0} no está soportado por la Vista previa dinámica. Por favor, utiliza http: o https: .",
     "BASEURL_ERROR_SEARCH_DISALLOWED"      : "La URL base no puede contener parámetros de búsqueda como \"{0}\".",
     "BASEURL_ERROR_HASH_DISALLOWED"        : "La URL base no puede contener hashes como \"{0}\".",
     "BASEURL_ERROR_INVALID_CHAR"           : "Los caracteres especiales como '{0}' deben codificarse en formato %.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Error desconocido analizando la URL base",
+    "EMPTY_VIEW_HEADER"                    : "<em>Abra un archivo mientras este panel está enfocado</em>", 
     
-    // Strings for themes-settings.html and themes-general.html 
+    // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Tema actual",
-    "USE_THEME_SCROLLBARS"                 : "Usar scrollbars del tema",
+    "USE_THEME_SCROLLBARS"                 : "Usar las barras de desplazamiento del tema",
     "FONT_SIZE"                            : "Tamaño de letra",
     "FONT_FAMILY"                          : "Tipo de letra",
     "THEMES_SETTINGS"                      : "Preferencias de temas",
@@ -448,7 +481,7 @@ define({
     "INSTALL_SUCCEEDED"                    : "¡Instalación completada!",
     "INSTALL_FAILED"                       : "Error en la instalación.",
     "CANCELING_INSTALL"                    : "Cancelando\u2026",
-    "CANCELING_HUNG"                       : "La instalación está tardando demasiado; cancelando. Puede que se haya producido un error interno.",
+    "CANCELING_HUNG"                       : "Cancelando la instalación porque está tardando demasiado tiempo. Puede que se haya producido un error interno.",
     "INSTALL_CANCELED"                     : "Instalación cancelada.",
     "VIEW_COMPLETE_DESCRIPTION"            : "Ver descripción completa",
     "VIEW_TRUNCATED_DESCRIPTION"           : "Ver descripción corta",
@@ -459,8 +492,8 @@ define({
     "BAD_PACKAGE_NAME"                     : "{0} no es un nombre de paquete válido.",
     "MISSING_PACKAGE_VERSION"              : "El archivo package.json no especifica la versión del paquete.",
     "INVALID_VERSION_NUMBER"               : "El número de paquete de la versión ({0}) no es válido.",
-    "INVALID_BRACKETS_VERSION"             : "El código de compatibilidad de {APP_NAME} {{0}} no es válido.",
-    "DISALLOWED_WORDS"                     : "Las palabras {{1}} no están permitidas en el campo {{0}}.",
+    "INVALID_BRACKETS_VERSION"             : "El código de compatibilidad de {APP_NAME} ({0}) no es válido.",
+    "DISALLOWED_WORDS"                     : "Las palabras ({1}) no están permitidas en el campo {0}.",
     "API_NOT_COMPATIBLE"                   : "La extensión no es compatible con esta versión de {APP_NAME}. Está en la carpeta de extensiones deshabilitadas.",
     "MISSING_MAIN"                         : "El paquete no contiene el archivo main.js.",
     "EXTENSION_ALREADY_INSTALLED"          : "Instalar este paquete sobrescribirá una extensión instalada previamente. ¿Deseas sobrescribir la antigua extensión?",
@@ -471,7 +504,7 @@ define({
     "BAD_HTTP_STATUS"                      : "Archivo no encontrado en el servidor (HTTP {0}).",
     "CANNOT_WRITE_TEMP"                    : "No se pudo guardar la descarga en un archivo temporal.",
     "ERROR_LOADING"                        : "La extensión ha encontrado un error al arrancar.",
-    "MALFORMED_URL"                        : "La URL no es válida. Por favor, comprueba que la has escrito correctamente.",
+    "MALFORMED_URL"                        : "La URL no es válida. Por favor, comprueba que esté escrita correctamente.",
     "UNSUPPORTED_PROTOCOL"                 : "La URL debe ser una dirección http o https.",
     "UNKNOWN_ERROR"                        : "Error interno desconocido.",
     // For NOT_FOUND_ERR, see generic strings above
@@ -501,9 +534,9 @@ define({
     "EXTENSION_MORE_INFO_LINK"             : "Más",
     "BROWSE_EXTENSIONS"                    : "Explorar extensiones",
     "EXTENSION_MANAGER_REMOVE"             : "Eliminar extensión",
-    "EXTENSION_MANAGER_REMOVE_ERROR"       : "No se pudo eliminar una o más extensiones: {{0}}. {APP_NAME} se recargará igualmente.",
+    "EXTENSION_MANAGER_REMOVE_ERROR"       : "No se pudo eliminar una o más extensiones: {0}. {APP_NAME} se recargará igualmente.",
     "EXTENSION_MANAGER_UPDATE"             : "Actualizar extensión",
-    "EXTENSION_MANAGER_UPDATE_ERROR"       : "No se pudo actualizar una o más extensiones: {{0}}. {APP_NAME} se recargará igualmente.",
+    "EXTENSION_MANAGER_UPDATE_ERROR"       : "No se pudo actualizar una o más extensiones: {0}. {APP_NAME} se recargará igualmente.",
     "MARKED_FOR_REMOVAL"                   : "Marcada para eliminar",
     "UNDO_REMOVE"                          : "Deshacer",
     "MARKED_FOR_UPDATE"                    : "Marcada para actualizar",
@@ -514,18 +547,19 @@ define({
     "CHANGE_AND_RELOAD"                    : "Cambiar extensiones y recargar",
     "UPDATE_AND_RELOAD"                    : "Actualizar extensiones y recargar",
     "PROCESSING_EXTENSIONS"                : "Procesando los cambios en las extensiones\u2026",
-    "EXTENSION_NOT_INSTALLED"              : "No se pudo eliminar la extensión {{0}} porque no se encuentra instalada.",
-    "NO_EXTENSIONS"                        : "Todavía no hay ninguna extensión instalada.<br />Haz click en la pestaña Disponibles para empezar.",
+    "EXTENSION_NOT_INSTALLED"              : "No se pudo eliminar la extensión {0} porque no se encuentra instalada.",
+    "NO_EXTENSIONS"                        : "Todavía no hay ninguna extensión instalada.<br>Haz clic en la pestaña Disponibles para empezar.",
     "NO_EXTENSION_MATCHES"                 : "No hay extensiones que coincidan con tu búsqueda.",
-    "REGISTRY_SANITY_CHECK_WARNING"        : "NOTA: Estas extensiones puedem provenir de diferentes autores a {APP_NAME}. Las extensiones no son revisadas y tiene todos los privilegios locales. Tenga cuidado cuando instale extensiones de una fuente desconocida.",
+    "REGISTRY_SANITY_CHECK_WARNING"        : "NOTA: estas extensiones pueden provenir de autores diferentes a {APP_NAME}. Las extensiones no son revisadas y tiene todos los privilegios locales. Tenga cuidado cuando instala extensiones de una fuente desconocida.",
     "EXTENSIONS_INSTALLED_TITLE"           : "Instaladas",
     "EXTENSIONS_AVAILABLE_TITLE"           : "Disponibles",
     "EXTENSIONS_THEMES_TITLE"              : "Temas",
     "EXTENSIONS_UPDATES_TITLE"             : "Actualizaciones",
     
     "INLINE_EDITOR_NO_MATCHES"             : "No hay coincidencias disponibles.",
-    "CSS_QUICK_EDIT_NO_MATCHES"            : "No hay reglas CSS existentes que coincidan con tu selección.<br> Haz click en \"Nueva regla\" para crear una.",
-    "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "No hay hojas de estilos en tu proyecto.<br>Crea una para añadir reglas CSS.",
+    "INLINE_EDITOR_HIDDEN_MATCHES"         : "Todas las coincidencias están colapsadas. Expanda los archivos listados a la derecha para ver coincidencias.",
+    "CSS_QUICK_EDIT_NO_MATCHES"            : "No hay reglas de CSS existentes que coincidan con tu selección.<br> Haz clic en \"Nueva regla\" para crear una.",
+    "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "No hay hojas de estilos en tu proyecto.<br>Crea una para añadir reglas de CSS.",
     
     // Custom Viewers
     "IMAGE_VIEWER_LARGEST_ICON"            : "más grande",
@@ -550,6 +584,7 @@ define({
     "CMD_LOG_NODE_STATE"                        : "Mostrar estado de Node en Consola",
     "CMD_RESTART_NODE"                          : "Reiniciar Node",
     "CMD_SHOW_ERRORS_IN_STATUS_BAR"             : "Mostrar errores en la barra de estado",
+    "CMD_OPEN_BRACKETS_SOURCE"                  : "Abrir el código fuente de Brackets",
     
     "LANGUAGE_TITLE"                            : "Cambiar idioma",
     "LANGUAGE_MESSAGE"                          : "Idioma:",
@@ -561,7 +596,7 @@ define({
     "INLINE_TIMING_EDITOR_TIME"                 : "Tiempo",
     "INLINE_TIMING_EDITOR_PROGRESSION"          : "Progresión",
     "BEZIER_EDITOR_INFO"                        : "<kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> Mueven el punto seleccionado<br><kbd class='text'>Shift</kbd> Mueve de a diez unidades<br><kbd class='text'>Tab</kbd> Cambia el punto seleccionado",
-    "STEPS_EDITOR_INFO"                         : "<kbd>↑</kbd><kbd>↓</kbd> Incrementa o decrementa los pasos<br><kbd>←</kbd><kbd>→</kbd> 'Start' o 'End'",
+    "STEPS_EDITOR_INFO"                         : "<kbd>↑</kbd><kbd>↓</kbd> Incrementa o disminuya los pasos<br><kbd>←</kbd><kbd>→</kbd> 'Start' o 'End'",
     "INLINE_TIMING_EDITOR_INVALID"              : "El valor viejo <code>{0}</code> no es válido, por lo tanto, fue modificado a <code>{1}</code>. El documento será actualizado luego de la primer edición.",
     
     // extensions/default/InlineColorEditor
@@ -578,7 +613,7 @@ define({
     "CMD_SHOW_PARAMETER_HINT"                   : "Mostrar sugerencias de parámetros",
     "NO_ARGUMENTS"                              : "<no hay parámetros>",
     "DETECTED_EXCLUSION_TITLE"                  : "Problema de inferencia con un archivo JavaScript",
-    "DETECTED_EXCLUSION_INFO"                   : "Brackets se encontró con problemas procesando:<br><br>{0}<br><br>Este archivo no volverá a ser procesado para las sugerencias de código y saltar a la definición. Para reactivarlo, abra <code>.brackets.json</code> en su proyecto y elimine el archivo de jscodehints.detectedExclusions.",
+    "DETECTED_EXCLUSION_INFO"                   : "Brackets se encontró con problemas procesando: <span class='dialog-filename'>{0}</span>.<br><br>Este archivo no volverá a ser procesado para las sugerencias de código, saltar a la definición o para la edición rápida. Para reactivar este archivo, abra el archivo <code>.brackets.json</code> en su proyecto y edite <code>jscodehints.detectedExclusions</code><br><br>Esto es probablemente un error en Brackets. Si puede proporcionar una copia de este archivo, por favor <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>envíe un informe</a> con un vínculo a dicho archivo.",
     
     // extensions/default/JSLint
     "JSLINT_NAME"                               : "JSLint",
@@ -593,4 +628,4 @@ define({
     "DOCS_MORE_LINK"                            : "Más"
 });
 
-/* Last translated for 8712385a6bf12277e6d0788d408e630a40c95a14 */
+/* Last translated for 0b949dd02b87866d54f38631715a4353a8f927e5 */
diff --git a/src/nls/fi/strings.js b/src/nls/fi/strings.js
index 197bbe12c27..ae0e13ac604 100644
--- a/src/nls/fi/strings.js
+++ b/src/nls/fi/strings.js
@@ -33,12 +33,12 @@ define({
     // General file io error strings
     "GENERIC_ERROR"                     : "(virhe {0})",
     "NOT_FOUND_ERR"                     : "Tiedostoa ei löytynyt.",
-    "NOT_READABLE_ERR"                  : "Tiedostoa ei voitu lukea.",
-    "NO_MODIFICATION_ALLOWED_ERR"       : "Kohdehakemistoa ei voitu muuttaa.",
+    "NOT_READABLE_ERR"                  : "Tiedostoa ei voi lukea.",
+    "EXCEEDS_MAX_FILE_SIZE"             : "Yli {0} Mt:n tiedostoja ei voi voi avata {APP_NAME}issa.",
+    "NO_MODIFICATION_ALLOWED_ERR"       : "Kohdehakemistoa ei voi muuttaa.",
     "NO_MODIFICATION_ALLOWED_ERR_FILE"  : "Sinulla ei ole oikeuksia tehdä muutoksia.",
     "CONTENTS_MODIFIED_ERR"             : "Tiedostoa on muokattu {APP_NAME}in ulkopuolella.",
     "UNSUPPORTED_ENCODING_ERR"          : "{APP_NAME} tukee tällä hetkellä vain UTF-8-koodattuja tekstitiedostoja.",
-    "UNSUPPORTED_FILE_TYPE_ERR"         : "Tiedosto ei ole tuettua tiedostotyyppiä.",
     "FILE_EXISTS_ERR"                   : "Tiedosto tai hakemisto on jo olemassa.",
     "FILE"                              : "tiedosto",
     "FILE_TITLE"                        : "tiedosto",
@@ -75,13 +75,24 @@ define({
     "ERROR_CREATING_FILE"               : "Virhe yritettäessä luoda {0}a <span class='dialog-filename'>{1}</span>. {2}",
     "ERROR_MIXED_DRAGDROP"              : "Kansiota ei voi avata samaan aikaan muiden tiedostojen kanssa.",
 
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Virhe luettaessa käyttäjän näppäinkarttaa",
+    "ERROR_KEYMAP_CORRUPT"              : "Näppäinkarttatiedostosi ei ole kelvollista JSON:ia. Tiedosto avautuu, jotta voi korjata sen muodon.",
+    "ERROR_LOADING_KEYMAP"              : "Näppäinkarttatiedostosi ei ole kelvollinen UTF-8-koodattu tekstitiedosto, ja sitä ei voi ladata.",
+    "ERROR_RESTRICTED_COMMANDS"         : "Et voi määrittää uudelleen seuraavien komentojen pikanäppäimiä: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "Et voi määrittää uudelleen seuraavia pikanäppäimiä: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "Olet määrittämässä useita pikanäppäimiä seuraaville komennoille: {0}",
+    "ERROR_DUPLICATE_SHORTCUTS"         : "Sinulla on useita seuraavien pikanäppäinten sidontoja: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "Seuraavat pikanäppäimet ovat virheellisiä: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "Olet määrittämässä pikanäppäimiä olemattomille komennoille: {0}",
+
     // Application preferences corrupt error strings
     "ERROR_PREFS_CORRUPT_TITLE"         : "Virhe luettaessa asetuksia",
     "ERROR_PREFS_CORRUPT"               : "Asetustiedosto on virheellistä JSON-koodia. Tiedosto avataan, jotta voit korjata sen muodon. Sinun tulee käynnistää {APP_NAME} uudelleen saadaksesi muutokset voimaan.",
 
     // Application error strings
     "ERROR_IN_BROWSER_TITLE"            : "Ups! {APP_NAME} ei toimi vielä selaimissa.",
-    "ERROR_IN_BROWSER"                  : "{APP_NAME} on rakennettu HTML:llä, mutta juuri nyt se toimii kuten työpöydän sovellus, jotta voit käyttää sitä paikallisten tiedostojen muokkaamiseen. Käytäthän osoitteen <b>github.com/adobe/brackets-shell</b> arkiston sovellusliittymää suorittaaksesi {APP_NAME}in.",
+    "ERROR_IN_BROWSER"                  : "{APP_NAME} on rakennettu HTML:llä, mutta juuri nyt se toimii kuten työpöydän sovellus, jotta voit käyttää sitä paikallisten tiedostojen muokkaamiseen. Suorita {APP_NAME} käyttämällä osoitteen <b>github.com/adobe/brackets-shell</b> arkiston sovellusliittymää.",
 
     // ProjectManager max files error string
     "ERROR_MAX_FILES_TITLE"             : "Virhe tiedostojen indeksoinnissa",
@@ -96,12 +107,12 @@ define({
     "LIVE_DEVELOPMENT_RELAUNCH_TITLE"   : "Yhdistetään selaimeen",
     "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "Jotta esikatselu voi muodostaa yhteyden, on Chromen käynnistyttävä uudelleen etävirheenjäljitys käytössä.<br /><br />Haluatko käynnistää Chromen uudelleen ja aktivoida etävirheenjäljityksen?<br /><br />",
     "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Esikatselun sivua ei kyetty lataamaan.",
-    "LIVE_DEV_NEED_HTML_MESSAGE"        : "Avaa HTML-tiedosto tai varmista, että projektissasi on index.html-tiedosto käynnistääksesi esikatselun.",
-    "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "Käynnistääksesi esikatselun palvelimella sijaitsevalla tiedostolla on tämän projektin URL-osoite määritettävä.",
+    "LIVE_DEV_NEED_HTML_MESSAGE"        : "Käynnistä esikatselu avaamalla HTML-tiedosto tai varmistamalla, että projektissa on tiedosto index.html.",
+    "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "Jotta voit käynnistää esikatselun palvelimella sijaitsevalla tiedostolla, tämän projektin URL-osoite täytyy määrittää.",
     "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Virhe käynnistettäessä HTTP-palvelinta esikatselun tiedostoille. Yritäthän uudelleen.",
     "LIVE_DEVELOPMENT_INFO_TITLE"       : "Tervetuloa esikatseluun!",
     "LIVE_DEVELOPMENT_INFO_MESSAGE"     : "Esikatselu yhdistää {APP_NAME}in selaimeesi. Se avaa selaimessa HTML-tiedoston esikatselun, joka päivittyy välittömästi muokatessasi koodia.<br /><br />Tässä varhaisessa {APP_NAME}-versiossa esikatselu toimii vain <strong>Google Chrome</strong>-selaimella ja päivittyy reaaliaikaisesti muokatessasi <strong>CSS- tai HTML-tiedostoja</strong>. Muutokset JavaScript-tiedostoihin päivittyvät tallentaessasi ne.<br /><br />(Näet tämän viestin vain kerran.)",
-    "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "Saadaksesi lisätietoja katso <a href='{0}' title='{0}'>Troubleshooting Live Preview connection errors</a>.",
+    "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "Saat lisätietoja tutustumalla ohjeeseen <a href='{0}' title='{0}'>Troubleshooting Live Preview connection errors</a>.",
 
     "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Esikatselu",
     "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Esikatselu: Yhdistetään\u2026",
@@ -120,9 +131,9 @@ define({
     "SAVE_CLOSE_MULTI_MESSAGE"          : "Haluatko tallentaa muutokset seuraaviin tiedostoihin?",
     "EXT_MODIFIED_TITLE"                : "Ulkoiset muutokset",
     "CONFIRM_FOLDER_DELETE_TITLE"       : "Vahvista poisto",
-    "CONFIRM_FOLDER_DELETE"             : "Oletko varma, että haluat poistaa kansion <span class='dialog-filename'>{0}</span>?",
+    "CONFIRM_FOLDER_DELETE"             : "Haluatko varmasti poistaa kansion <span class='dialog-filename'>{0}</span>?",
     "FILE_DELETED_TITLE"                : "Tiedosto poistettu",
-    "EXT_MODIFIED_WARNING"              : "<span class='dialog-filename'>{0}</span> on muuttunut levyllä.<br /><br />Haluatko tallentaa tiedoston ja korvata nuo muutokset?",
+    "EXT_MODIFIED_WARNING"              : "<span class='dialog-filename'>{0}</span> on muuttunut levyllä.<br /><br />Haluatko tallentaa tiedoston ja korvata kyseiset muutokset?",
     "EXT_MODIFIED_MESSAGE"              : "<span class='dialog-filename'>{0}</span> on muuttunut levyllä, mutta sillä on myös tallentamattomia muutoksia {APP_NAME}issa.<br /><br />Kumman version haluat säilyttää?",
     "EXT_DELETED_MESSAGE"               : "<span class='dialog-filename'>{0}</span> on poistettu levyltä, mutta sillä on tallentamattomia muutoksia {APP_NAME}issa.<br /><br />Haluatko säilyttää muutoksesi?",
 
@@ -148,8 +159,8 @@ define({
     "BUTTON_REPLACE"                    : "Korvaa",
     "BUTTON_NEXT"                       : "\u25B6",
     "BUTTON_PREV"                       : "\u25C0",
-    "BUTTON_NEXT_HINT"                  : "Seuraava vastaavuus",
-    "BUTTON_PREV_HINT"                  : "Edellinen vastaavuus",
+    "BUTTON_NEXT_HINT"                  : "Seuraava vastine",
+    "BUTTON_PREV_HINT"                  : "Edellinen vastine",
     "BUTTON_CASESENSITIVE_HINT"         : "Huomioi kirjainkoko",
     "BUTTON_REGEXP_HINT"                : "Säännöllinen lauseke",
     "REPLACE_WITHOUT_UNDO_WARNING_TITLE": "Korvaa kumoamatta",
@@ -172,17 +183,17 @@ define({
 
     // Find in Files
     "FIND_NUM_FILES"                    : "{0} {1}",
-    "FIND_IN_FILES_SCOPED"              : "kohteesta <span class='dialog-filename'>{0}</span>",
+    "FIND_IN_FILES_SCOPED"              : "kohteessa <span class='dialog-filename'>{0}</span>",
     "FIND_IN_FILES_NO_SCOPE"            : "projektissa",
     "FIND_IN_FILES_ZERO_FILES"          : "Suodatin ohittaa kaikki tiedostot {0}",
     "FIND_IN_FILES_FILE"                : "tiedosto",
     "FIND_IN_FILES_FILES"               : "tiedostoa",
-    "FIND_IN_FILES_MATCH"               : "vastaavuus",
-    "FIND_IN_FILES_MATCHES"             : "vastaavuutta",
+    "FIND_IN_FILES_MATCH"               : "vastine",
+    "FIND_IN_FILES_MATCHES"             : "vastinetta",
     "FIND_IN_FILES_MORE_THAN"           : "Yli ",
     "FIND_IN_FILES_PAGING"              : "{0}&mdash;{1}",
     "FIND_IN_FILES_FILE_PATH"           : "<span class='dialog-filename'>{0}</span> {2} <span class='dialog-path'>{1}</span>", // We should use normal dashes on Windows instead of em dash eventually
-    "FIND_IN_FILES_EXPAND_COLLAPSE"     : "Paina Ctrl/Cmd laajentaaksesi tai pienentääksesi kaikki",
+    "FIND_IN_FILES_EXPAND_COLLAPSE"     : "Laajenna tai pienennä kaikki painamalla Ctrl/Cmd",
     "REPLACE_IN_FILES_ERRORS_TITLE"     : "Korvausvirheet",
     "REPLACE_IN_FILES_ERRORS"           : "Seuraavia tiedostoja ei muokattu, koska ne muuttuivat haun jälkeen tai niihin ei voitu kirjoittaa.",
 
@@ -196,24 +207,24 @@ define({
     "EXCLUDE_FILE_FILTER"               : "Ohita {0}",
     "EDIT_FILE_FILTER"                  : "Muokkaa\u2026",
     "FILE_FILTER_DIALOG"                : "Muokkaa ohitusjoukkoa",
-    "FILE_FILTER_INSTRUCTIONS"          : "Ohita tiedostoja ja kansioita sovittamalla yhteen mikä tahansa seuraavista merkkijonoista / alimerkkijonoista tai <a href='{0}' title='{0}'>jokerimerkeistä</a>. Syötä jokainen merkkijono uudelle riville.",
+    "FILE_FILTER_INSTRUCTIONS"          : "Ohita tiedostoja ja kansioita, jotka täsmäävät jonkin kanssa seuraavista merkkijonoista taikka alimerkkijonoista tai <a href='{0}' title='{0}'>jokerimerkeistä</a>. Kirjoita kukin merkkijono uudelle riville.",
     "FILTER_NAME_PLACEHOLDER"           : "Tämän ohitusjoukon nimi (valinnainen)",
     "FILE_FILTER_CLIPPED_SUFFIX"        : "ja {0} lisää",
     "FILTER_COUNTING_FILES"             : "Lasketaan tiedostoja\u2026",
-    "FILTER_FILE_COUNT"                 : "Sallii {0} tiedostoa {1} tiedostosta {2}",
-    "FILTER_FILE_COUNT_ALL"             : "Sallii kaikki {0} tiedostoa {1}",
+    "FILTER_FILE_COUNT"                 : "Sallii {0} projektin {1} tiedostosta",
+    "FILTER_FILE_COUNT_ALL"             : "Sallii kaikki projektin {0} tiedostoa",
 
     // Quick Edit
-    "ERROR_QUICK_EDIT_PROVIDER_NOT_FOUND"   : "Pikamuokkaus ei ole saatavilla osoittimen nykyiselle sijainnille",
-    "ERROR_CSSQUICKEDIT_BETWEENCLASSES"     : "CSS-pikamuokkaus: sijoita osoitin yksittäisen class-nimen päälle",
+    "ERROR_QUICK_EDIT_PROVIDER_NOT_FOUND"   : "Pikamuokkaus ei ole saatavilla kohdistimen nykyiselle sijainnille",
+    "ERROR_CSSQUICKEDIT_BETWEENCLASSES"     : "CSS-pikamuokkaus: sijoita kohdistin yksittäiseen class-nimeen",
     "ERROR_CSSQUICKEDIT_CLASSNOTFOUND"      : "CSS-pikamuokkaus: puutteellinen class-attribuutti",
     "ERROR_CSSQUICKEDIT_IDNOTFOUND"         : "CSS-pikamuokkaus: puutteellinen id-attribuutti",
-    "ERROR_CSSQUICKEDIT_UNSUPPORTEDATTR"    : "CSS-pikamuokkaus: sijoita osoitin tagin, class- tai id-attribuutin sisälle",
-    "ERROR_TIMINGQUICKEDIT_INVALIDSYNTAX"   : "CSS:n aikafunktion pikamuokkaus: virheellinen syntaksi",
-    "ERROR_JSQUICKEDIT_FUNCTIONNOTFOUND"    : "JS-pikamuokkaus: sijoita osoitin funktion nimen sisälle",
+    "ERROR_CSSQUICKEDIT_UNSUPPORTEDATTR"    : "CSS-pikamuokkaus: sijoita kohdistin tägiin, class- tai id-attribuuttiin",
+    "ERROR_TIMINGQUICKEDIT_INVALIDSYNTAX"   : "CSS-aikafunktion pikamuokkaus: virheellinen syntaksi",
+    "ERROR_JSQUICKEDIT_FUNCTIONNOTFOUND"    : "JS-pikamuokkaus: sijoita kohdistin funktion nimeen",
 
     // Quick Docs
-    "ERROR_QUICK_DOCS_PROVIDER_NOT_FOUND"   : "Pikadokumentaatio ei ole saatavilla osoittimen nykyiselle sijainnille",
+    "ERROR_QUICK_DOCS_PROVIDER_NOT_FOUND"   : "Pikadokumentaatio ei ole saatavilla kohdistimen nykyiselle sijainnille",
 
     /**
      * ProjectManager
@@ -231,9 +242,9 @@ define({
     "RIGHT"             : "Oikea",
 
     "CMD_SPLITVIEW_NONE"        : "Ei jakoa",
-    "CMD_SPLITVIEW_VERTICAL"    : "Pystysuora jako",
-    "CMD_SPLITVIEW_HORIZONTAL"  : "Vaakasuora jako",
-    "SPLITVIEW_MENU_TOOLTIP"    : "Jaa muokkain pysty- tai vaakasuuntaisesti",
+    "CMD_SPLITVIEW_VERTICAL"    : "Pystyjako",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "Vaakajako",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Jaa muokkain pysty- tai vaakasuunnassa",
     "GEAR_MENU_TOOLTIP"         : "Määritä työlista",
 
     "SPLITVIEW_INFO_TITLE"              : "Jo avoinna",
@@ -255,10 +266,10 @@ define({
     "STATUSBAR_SELECTION_LINE_SINGULAR"     : " \u2014 Valittu {0} rivi",
     "STATUSBAR_SELECTION_LINE_PLURAL"       : " \u2014 Valittu {0} riviä",
     "STATUSBAR_SELECTION_MULTIPLE"          : " \u2014 {0} valintaa",
-    "STATUSBAR_INDENT_TOOLTIP_SPACES"       : "Napsauta muuttaaksesi sisennys välilyönneiksi",
-    "STATUSBAR_INDENT_TOOLTIP_TABS"         : "Napsauta muuttaaksesi sisennys sarkainmerkeiksi",
-    "STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES"  : "Napsauta muuttaaksesi sisennyksenä käytettävien välilyöntien määrää",
-    "STATUSBAR_INDENT_SIZE_TOOLTIP_TABS"    : "Napsauta muuttaaksesi sarkainmerkin leveyttä",
+    "STATUSBAR_INDENT_TOOLTIP_SPACES"       : "Muuta sisennys välilyönneiksi napsauttamalla",
+    "STATUSBAR_INDENT_TOOLTIP_TABS"         : "Muuta sisennys sarkainmerkeiksi napsauttamalla",
+    "STATUSBAR_INDENT_SIZE_TOOLTIP_SPACES"  : "Muuta sisennyksenä käytettävien välilyöntien määrää napsauttamalla",
+    "STATUSBAR_INDENT_SIZE_TOOLTIP_TABS"    : "Muuta sarkainmerkin leveyttä napsauttamalla",
     "STATUSBAR_SPACES"                      : "Välilyönnit:",
     "STATUSBAR_TAB_SIZE"                    : "Sarkaimen koko:",
     "STATUSBAR_LINE_COUNT_SINGULAR"         : "\u2014 {0} rivi",
@@ -317,7 +328,7 @@ define({
     "CMD_FILE_REFRESH"                    : "Päivitä tiedostopuu",
     "CMD_QUIT"                            : "Lopeta",
     // Used in native File menu on Windows
-    "CMD_EXIT"                            : "Poistu",
+    "CMD_EXIT"                            : "Lopeta",
 
     // Edit menu commands
     "EDIT_MENU"                           : "Muokkaa",
@@ -329,16 +340,16 @@ define({
     "CMD_SELECT_ALL"                      : "Valitse kaikki",
     "CMD_SELECT_LINE"                     : "Valitse rivi",
     "CMD_SPLIT_SEL_INTO_LINES"            : "Jaa valinta riveihin",
-    "CMD_ADD_CUR_TO_NEXT_LINE"            : "Lisää osoitin seuraavalle riville",
-    "CMD_ADD_CUR_TO_PREV_LINE"            : "Lisää osoitin edelliselle riville",
+    "CMD_ADD_CUR_TO_NEXT_LINE"            : "Lisää kohdistin seuraavalle riville",
+    "CMD_ADD_CUR_TO_PREV_LINE"            : "Lisää kohdistin edelliselle riville",
     "CMD_INDENT"                          : "Sisennä",
     "CMD_UNINDENT"                        : "Poista sisennys",
-    "CMD_DUPLICATE"                       : "Kahdenna",
+    "CMD_DUPLICATE"                       : "Monista",
     "CMD_DELETE_LINES"                    : "Poista rivi",
     "CMD_COMMENT"                         : "Muuta kommenttiriviksi",
     "CMD_BLOCK_COMMENT"                   : "Muuta kommenttilohkoksi",
-    "CMD_LINE_UP"                         : "Siirrä rivi ylemmäs",
-    "CMD_LINE_DOWN"                       : "Siirrä rivi alemmas",
+    "CMD_LINE_UP"                         : "Siirrä riviä ylös",
+    "CMD_LINE_DOWN"                       : "Siirrä riviä alas",
     "CMD_OPEN_LINE_ABOVE"                 : "Avaa rivi yllä",
     "CMD_OPEN_LINE_BELOW"                 : "Avaa rivi alla",
     "CMD_TOGGLE_CLOSE_BRACKETS"           : "Sulje sulkeet automaattisesti",
@@ -349,15 +360,15 @@ define({
     "CMD_FIND"                            : "Etsi",
     "CMD_FIND_NEXT"                       : "Etsi seuraava",
     "CMD_FIND_PREVIOUS"                   : "Etsi edellinen",
-    "CMD_FIND_ALL_AND_SELECT"             : "Etsi kaikki ja valitse",
-    "CMD_ADD_NEXT_MATCH"                  : "Lisää seuraava vastaavuus valintaan",
-    "CMD_SKIP_CURRENT_MATCH"              : "Ohita ja lisää seuraava vastavuus",
+    "CMD_FIND_ALL_AND_SELECT"             : "Etsi ja valitse kaikki",
+    "CMD_ADD_NEXT_MATCH"                  : "Lisää seuraava vastine valintaan",
+    "CMD_SKIP_CURRENT_MATCH"              : "Ohita ja lisää seuraava vastine",
     "CMD_FIND_IN_FILES"                   : "Etsi tiedostoista",
-    "CMD_FIND_IN_SELECTED"                : "Etsi valitusta tiedostosta/kansiosta",
+    "CMD_FIND_IN_SELECTED"                : "Etsi valitusta tiedostosta tai kansiosta",
     "CMD_FIND_IN_SUBTREE"                 : "Etsi kohteesta\u2026",
     "CMD_REPLACE"                         : "Korvaa",
     "CMD_REPLACE_IN_FILES"                : "Korvaa tiedostoissa",
-    "CMD_REPLACE_IN_SELECTED"             : "Korvaa valitussa tiedostossa/kansiossa",
+    "CMD_REPLACE_IN_SELECTED"             : "Korvaa valitussa tiedostossa tai kansiossa",
     "CMD_REPLACE_IN_SUBTREE"              : "Korvaa kohteessa\u2026",
 
     // View menu commands
@@ -371,7 +382,7 @@ define({
     "CMD_SCROLL_LINE_DOWN"                : "Vieritä rivi alas",
     "CMD_TOGGLE_LINE_NUMBERS"             : "Rivinumerot",
     "CMD_TOGGLE_ACTIVE_LINE"              : "Korosta aktiivinen rivi",
-    "CMD_TOGGLE_WORD_WRAP"                : "Tekstin rivitys",
+    "CMD_TOGGLE_WORD_WRAP"                : "Automaattinen rivitys",
     "CMD_LIVE_HIGHLIGHT"                  : "Esikatselun korostus",
     "CMD_VIEW_TOGGLE_INSPECTION"          : "Tarkista tiedostot tallennettaessa",
     "CMD_WORKINGSET_SORT_BY_ADDED"        : "Järjestä lisäysajan mukaan",
@@ -385,11 +396,11 @@ define({
     "CMD_QUICK_OPEN"                      : "Pika-avaus",
     "CMD_GOTO_LINE"                       : "Siirry riville",
     "CMD_GOTO_DEFINITION"                 : "Etsi määrittely nopeasti",
-    "CMD_GOTO_FIRST_PROBLEM"              : "Siirry ensimmäiseen virheeseen/varoitukseen",
+    "CMD_GOTO_FIRST_PROBLEM"              : "Siirry ensimmäiseen virheeseen tai varoitukseen",
     "CMD_TOGGLE_QUICK_EDIT"               : "Pikamuokkaus",
     "CMD_TOGGLE_QUICK_DOCS"               : "Pikadokumentaatio",
-    "CMD_QUICK_EDIT_PREV_MATCH"           : "Edellinen vastaavuus",
-    "CMD_QUICK_EDIT_NEXT_MATCH"           : "Seuraava vastaavuus",
+    "CMD_QUICK_EDIT_PREV_MATCH"           : "Edellinen vastine",
+    "CMD_QUICK_EDIT_NEXT_MATCH"           : "Seuraava vastine",
     "CMD_CSS_QUICK_EDIT_NEW_RULE"         : "Uusi sääntö",
     "CMD_NEXT_DOC"                        : "Seuraava dokumentti",
     "CMD_PREV_DOC"                        : "Edellinen dokumentti",
@@ -406,14 +417,16 @@ define({
     "CMD_SUGGEST"                         : "Ehdota ominaisuutta",
     "CMD_RELEASE_NOTES"                   : "Julkaisutiedot",
     "CMD_GET_INVOLVED"                    : "Lähde mukaan",
-    "CMD_SHOW_EXTENSIONS_FOLDER"          : "Näytä laajennusten kansio",
+    "CMD_SHOW_EXTENSIONS_FOLDER"          : "Näytä laajennuskansio",
     "CMD_HOMEPAGE"                        : "{APP_TITLE}in kotisivut",
     "CMD_TWITTER"                         : "{TWITTER_NAME} Twitterissä",
-    "CMD_ABOUT"                           : "Tietoja {APP_TITLE}-sovelluksesta",
+    "CMD_ABOUT"                           : "Tietoja {APP_TITLE}ista",
     "CMD_OPEN_PREFERENCES"                : "Avaa asetustiedosto",
+    "CMD_OPEN_KEYMAP"                     : "Avaa käyttäjän näppäinkartta",
 
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "kokeellinen koontiversio",
+    "RELEASE_BUILD"                        : "koontiversio",
     "DEVELOPMENT_BUILD"                    : "kehityskoontiversio",
     "RELOAD_FROM_DISK"                     : "Lataa uudelleen levyltä",
     "KEEP_CHANGES_IN_EDITOR"               : "Pidä muutokset muokkaimessa",
@@ -421,19 +434,19 @@ define({
     "RELAUNCH_CHROME"                      : "Käynnistä Chrome uudelleen",
     "ABOUT"                                : "Tietoja",
     "CLOSE"                                : "Sulje",
-    "ABOUT_TEXT_LINE1"                     : "Julkaisu {VERSION_MAJOR}.{VERSION_MINOR} {BUILD_TYPE} {VERSION}",
+    "ABOUT_TEXT_LINE1"                     : "Julkaisu {VERSION_MAJOR}.{VERSION_MINOR}, {BUILD_TYPE} {VERSION}",
     "ABOUT_TEXT_BUILD_TIMESTAMP"           : "koontiversion aikaleima: ",
     "ABOUT_TEXT_LINE3"                     : "Kolmannen osapuolen ohjelmistoihin liittyvät ilmoitukset ja ehdot sijaitsevat osoitteessa <a href='{ADOBE_THIRD_PARTY}'>{ADOBE_THIRD_PARTY}</a> ja yhdistetään viitteisiin tässä.",
     "ABOUT_TEXT_LINE4"                     : "Dokumentaatio ja lähdekoodi osoitteessa <a href='https://github.com/adobe/brackets/'>https://github.com/adobe/brackets/</a>",
     "ABOUT_TEXT_LINE5"                     : "He tekivät tämän \u2764:lla ja JavaScriptillä:",
     "ABOUT_TEXT_LINE6"                     : "Monet ihmiset (mutta meillä on ongelmia ladata näitä tietoja nyt).",
     "ABOUT_TEXT_WEB_PLATFORM_DOCS"         : "Web Platform -dokumentit ja graafinen Web Platform -logo on lisensoitu Creative Commons Attribution -lisenssillä, <a href='{WEB_PLATFORM_DOCS_LICENSE}'>CC-BY 3.0 Unported</a>.",
-    "UPDATE_NOTIFICATION_TOOLTIP"          : "{APP_NAME}ista on saatavilla uusi versio! Napsauta tästä saadaksesi lisätietoja.",
+    "UPDATE_NOTIFICATION_TOOLTIP"          : "Uusi {APP_NAME}-versio on saatavilla! Saat lisätietoja napsauttamalla tästä.",
     "UPDATE_AVAILABLE_TITLE"               : "Päivitys saatavilla",
-    "UPDATE_MESSAGE"                       : "Hei, {APP_NAME}ista on saatavilla uusi versio. Tässä on joitakin uusista ominaisuuksista:",
+    "UPDATE_MESSAGE"                       : "Hei, uusi {APP_NAME}-versio on saatavilla. Tässä on joitakin uusista ominaisuuksista:",
     "GET_IT_NOW"                           : "Hae nyt!",
     "PROJECT_SETTINGS_TITLE"               : "Projektin asetukset kohteelle: {0}",
-    "PROJECT_SETTING_BASE_URL"             : "Esikatselun URL-osoite",
+    "PROJECT_SETTING_BASE_URL"             : "Esikatselun perus-URL",
     "PROJECT_SETTING_BASE_URL_HINT"        : "Käytä paikal. palvelinta antamalla url, kuten http://localhost:8000/",
     "BASEURL_ERROR_INVALID_PROTOCOL"       : "Esikatselu ei tue {0}-protokollaa. Käytä joko http: tai https: .",
     "BASEURL_ERROR_SEARCH_DISALLOWED"      : "URL-osoite ei voi sisältää hakuparametreja, kuten ”{0}”.",
@@ -445,7 +458,7 @@ define({
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Nykyinen teema",
     "USE_THEME_SCROLLBARS"                 : "Käytä teeman vierityspalkkeja",
-    "FONT_SIZE"                            : "Kirjasimen koko",
+    "FONT_SIZE"                            : "Kirjasinkoko",
     "FONT_FAMILY"                          : "Kirjasinperhe",
     "THEMES_SETTINGS"                      : "Teema-asetukset",
 
@@ -529,13 +542,13 @@ define({
     "MARKED_FOR_UPDATE"                    : "Merkitty päivitettäväksi",
     "UNDO_UPDATE"                          : "Kumoa",
     "CHANGE_AND_RELOAD_TITLE"              : "Muuta laajennuksia",
-    "CHANGE_AND_RELOAD_MESSAGE"            : "Päivittääksesi tai poistaaksesi merkityt laajennukset {APP_NAME}in pitää latautua uudelleen. Sinua muistutetaan tallentamattomien muutosten tallentamisesta.",
+    "CHANGE_AND_RELOAD_MESSAGE"            : "Jotta voit päivittää tai poistaa merkityt laajennukset, pitää {APP_NAME}in latautua uudelleen. Sinua muistutetaan tallentamattomien muutosten tallentamisesta.",
     "REMOVE_AND_RELOAD"                    : "Poista laajennukset ja lataa uudelleen",
     "CHANGE_AND_RELOAD"                    : "Muuta laajennuksia ja lataa uudelleen",
     "UPDATE_AND_RELOAD"                    : "Päivitä laajennukset ja lataa uudelleen",
     "PROCESSING_EXTENSIONS"                : "Käsitellään laajennusten muutoksia\u2026",
     "EXTENSION_NOT_INSTALLED"              : "Laajennusta {0} ei voida poistaa, koska sitä ei ole asennettu.",
-    "NO_EXTENSIONS"                        : "Laajennuksia ei ole vielä asennettu.<br>Napsauta Saatavilla-välilehteä yläpuolelta aloittaaksesi.",
+    "NO_EXTENSIONS"                        : "Laajennuksia ei ole vielä asennettu.<br>Aloita napsauttamalla Saatavilla-välilehteä yläpuolelta.",
     "NO_EXTENSION_MATCHES"                 : "Ei hakuasi vastaavia laajennuksia.",
     "REGISTRY_SANITY_CHECK_WARNING"        : "HUOMAUTUS: Nämä laajennukset voivat olla peräisin eri lähteistä kuin {APP_NAME} itse. Laajennuksia ei ole tarkastettu, ja niillä on täydet paikalliset oikeudet. Ole varovainen asentaessasi laajennuksia tuntemattomasta lähteestä.",
     "EXTENSIONS_INSTALLED_TITLE"           : "Asennettu",
@@ -543,9 +556,10 @@ define({
     "EXTENSIONS_THEMES_TITLE"              : "Teemat",
     "EXTENSIONS_UPDATES_TITLE"             : "Päivitykset",
 
-    "INLINE_EDITOR_NO_MATCHES"             : "Vastaavuuksia ei saatavilla.",
-    "CSS_QUICK_EDIT_NO_MATCHES"            : "Valintaasi vastaavia CSS-sääntöjä ei ole.<br> Napsauta ”Uusi sääntö” luodaksesi sellaisen.",
-    "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "Projektissasi ei ole tyylitiedostoja.<br>Luo sellainen lisätäksesi CSS-sääntöjä.",
+    "INLINE_EDITOR_NO_MATCHES"             : "Vastineita ei saatavilla.",
+    "INLINE_EDITOR_HIDDEN_MATCHES"         : "Kaikki vastineet on pienennetty. Näytä vastineet laajentamalla oikealla listatut tiedostot.",
+    "CSS_QUICK_EDIT_NO_MATCHES"            : "Valintaasi vastaavia CSS-sääntöjä ei ole.<br> Luo sellainen napsauttamalla ”Uusi sääntö”.",
+    "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "Projektissa ei ole tyylitiedostoja.<br>Lisää CSS-sääntöjä luomalla sellainen.",
 
     // Custom Viewers
     "IMAGE_VIEWER_LARGEST_ICON"            : "suurin",
@@ -565,7 +579,7 @@ define({
     "CMD_NEW_BRACKETS_WINDOW"                   : "Uusi {APP_NAME}-ikkuna",
     "CMD_SWITCH_LANGUAGE"                       : "Vaihda kieltä",
     "CMD_RUN_UNIT_TESTS"                        : "Suorita testejä",
-    "CMD_SHOW_PERF_DATA"                        : "Näytä suorituskyvyn tiedot",
+    "CMD_SHOW_PERF_DATA"                        : "Näytä suorituskykytiedot",
     "CMD_ENABLE_NODE_DEBUGGER"                  : "Ota Noden virheenjäljitin käyttöön",
     "CMD_LOG_NODE_STATE"                        : "Kirjaa Noden tila konsoliin",
     "CMD_RESTART_NODE"                          : "Käynnistä Node uudelleen",
@@ -595,11 +609,11 @@ define({
     "COLOR_EDITOR_USED_COLOR_TIP_PLURAL"        : "{0} (käytetty {1} kertaa)",
 
     // extensions/default/JavaScriptCodeHints
-    "CMD_JUMPTO_DEFINITION"                     : "Hyppää määrittelyyn",
+    "CMD_JUMPTO_DEFINITION"                     : "Siirry määrittelyyn",
     "CMD_SHOW_PARAMETER_HINT"                   : "Näytä parametrivihje",
     "NO_ARGUMENTS"                              : "<ei parametreja>",
     "DETECTED_EXCLUSION_TITLE"                  : "JavaScript-tiedoston päättelyongelma",
-    "DETECTED_EXCLUSION_INFO"                   : "Brackets kohtasi vaikeuksia tiedoston <span class='dialog-filename'>{0}</span> käsittelyssä.<br><br>Tätä tiedostoa ei enää käsitellä koodivihjeet-, hyppää määrittelyyn- ja pikamuokkaus-toimintoja varten. Ota tämä tiedosto uudelleen käyttöön avaamalla projektisi tiedosto <code>.brackets.json</code> ja muokkaa kohtaa <code>jscodehints.detectedExclusions</code>.<br><br>Tämä on todennäköisesti Bracketsin bugi. Jos voit tarjota kopion tästä tiedostosta, <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>ilmoitathan virheestä</a> tässä nimettyyn tiedostoon osoittavan linkin kanssa.",
+    "DETECTED_EXCLUSION_INFO"                   : "Brackets kohtasi vaikeuksia tiedoston <span class='dialog-filename'>{0}</span> käsittelyssä.<br><br>Tätä tiedostoa ei enää käsitellä koodivihjeet-, hyppää määrittelyyn- tai pikamuokkaus-toimintoja varten. Ota tämä tiedosto uudelleen käyttöön avaamalla projektisi tiedosto <code>.brackets.json</code> ja muokkaamalla kohtaa <code>jscodehints.detectedExclusions</code>.<br><br>Tämä on todennäköisesti Bracketsin bugi. Jos voit tarjota kopion tästä tiedostosta, <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>ilmoitathan virheestä</a> tässä nimettyyn tiedostoon osoittavin linkein.",
 
     // extensions/default/JSLint
     "JSLINT_NAME"                               : "JSLint",
@@ -614,4 +628,4 @@ define({
     "DOCS_MORE_LINK"                            : "Lue lisää"
 });
 
-/* Last translated for 91b392bf349ece5058595b26a11c651697ee7ff6 */
+/* Last translated for 893c065b715c211526dcd010c0294e12a8683995 */
diff --git a/src/nls/fr/strings.js b/src/nls/fr/strings.js
index 42f9eb41593..1cdaf7eea02 100644
--- a/src/nls/fr/strings.js
+++ b/src/nls/fr/strings.js
@@ -25,7 +25,7 @@
 /*global define */
 
 define({
-    
+
     /**
      * Errors
      */
@@ -34,11 +34,11 @@ define({
 	"GENERIC_ERROR": "(Erreur {0})",
 	"NOT_FOUND_ERR": "Fichier introuvable.",
 	"NOT_READABLE_ERR": "Impossible de lire le fichier.",
+	"EXCEEDS_MAX_FILE_SIZE": "Les fichiers dont la taille excède {0} Mo ne peuvent pas être ouverts dans {APP_NAME}.",
 	"NO_MODIFICATION_ALLOWED_ERR": "Le répertoire cible ne peut pas être modifié.",
 	"NO_MODIFICATION_ALLOWED_ERR_FILE": "Vous n’êtes pas autorisé à effectuer des modifications.",
 	"CONTENTS_MODIFIED_ERR": "Le fichier a été modifié dans une application autre que {APP_NAME}.",
 	"UNSUPPORTED_ENCODING_ERR": "Pour le moment, {APP_NAME} ne prend en charge que les fichiers texte avec encodage UTF-8.",
-	"UNSUPPORTED_FILE_TYPE_ERR": "Ce type de fichier n’est pas pris en charge.",
 	"FILE_EXISTS_ERR": "Le fichier ou le répertoire existe déjà.",
 	"FILE": "fichier",
 	"FILE_TITLE": "Fichier",
@@ -48,7 +48,6 @@ define({
 	"FILENAMES_LEDE": "noms de fichiers",
 	"FILENAME": "Nom de fichier",
 	"DIRECTORY_NAME": "Nom du répertoire",
-    
 
     // Project error strings
 	"ERROR_LOADING_PROJECT": "Erreur lors du chargement du projet",
@@ -75,6 +74,17 @@ define({
 	"ERROR_CREATING_FILE": "Une erreur s’est produite lors de la tentative de création du {0} <span class='dialog-filename'>{1}</span>. {2}",
 	"ERROR_MIXED_DRAGDROP": "Impossible d’ouvrir un dossier en même temps que d’autres fichiers.",
 
+    // User key map error strings
+	"ERROR_KEYMAP_TITLE": "Erreur lors de la lecture du mappage de touches utilisateur",
+	"ERROR_KEYMAP_CORRUPT": "Votre fichier de mappage de touches n’est pas un fichier JSON valide. Il va s’ouvrir afin que vous puissiez corriger le format.",
+	"ERROR_LOADING_KEYMAP": "Votre fichier de mappage de touches n’étant pas un fichier texte codé en UTF-8 valide, il ne peut pas être chargé.",
+	"ERROR_RESTRICTED_COMMANDS": "Vous ne pouvez pas réaffecter de raccourcis à ces commandes : {0}",
+	"ERROR_RESTRICTED_SHORTCUTS": "Vous ne pouvez pas réaffecter ces raccourcis : {0}",
+	"ERROR_MULTIPLE_SHORTCUTS": "Vous réaffectez plusieurs raccourcis à ces commandes : {0}",
+	"ERROR_DUPLICATE_SHORTCUTS": "Plusieurs liaisons ont été définies pour les raccourcis suivants : {0}",
+	"ERROR_INVALID_SHORTCUTS": "Ces raccourcis ne sont pas valides : {0}",
+	"ERROR_NONEXISTENT_COMMANDS": "Vous affectez des raccourcis à des commandes qui n'existent pas : {0}",
+
     // Application preferences corrupt error strings
 	"ERROR_PREFS_CORRUPT_TITLE": "Erreur lors de la lecture des préférences",
 	"ERROR_PREFS_CORRUPT": "Votre fichier de préférences n’est pas un fichier JSON valide, il va donc être ouvert afin que vous puissiez corriger le format. Vous devrez ensuite redémarrer {APP_NAME} pour que les modifications prennent effet.",
@@ -82,7 +92,7 @@ define({
     // Application error strings
 	"ERROR_IN_BROWSER_TITLE": "Malheureusement, {APP_NAME} n’est pas encore compatible avec les navigateurs.",
 	"ERROR_IN_BROWSER": "{APP_NAME} est défini en HTML, mais il s’exécute actuellement en tant qu’application de bureau, vous pouvez donc l’utiliser afin de modifier des fichiers locaux. Utilisez l’interpréteur de commandes d’application situé dans le référentiel <b>github.com/adobe/brackets-shell</b> afin d’exécuter {APP_NAME}.",
-    
+
     // ProjectManager max files error string
 	"ERROR_MAX_FILES_TITLE": "Erreur lors de l’indexation des fichiers",
 	"ERROR_MAX_FILES": "Ce projet contient plus de 30 000 fichiers. Les fonctionnalités qui s’appliquent de manière globale à plusieurs fichiers peuvent être désactivées ou se comporter comme si le projet était vide. <a href='https://github.com/adobe/brackets/wiki/Large-Projects'>En savoir plus sur l’utilisation de projets volumineux</a>.",
@@ -91,7 +101,7 @@ define({
 	"ERROR_LAUNCHING_BROWSER_TITLE": "Erreur lors du lancement du navigateur",
 	"ERROR_CANT_FIND_CHROME": "Le navigateur Google Chrome est introuvable. Assurez-vous qu’il est installé.",
 	"ERROR_LAUNCHING_BROWSER": "Une erreur s’est produite lors du lancement du navigateur. (Erreur {0})",
-    
+
 	"LIVE_DEVELOPMENT_ERROR_TITLE": "Erreur du module Aperçu en direct",
 	"LIVE_DEVELOPMENT_RELAUNCH_TITLE": "Connexion au navigateur",
 	"LIVE_DEVELOPMENT_ERROR_MESSAGE": "Pour que le module Aperçu en direct puisse se connecter, vous devez relancer Chrome en activant la fonction de débogage à distance.<br /><br />Voulez-vous relancer Chrome et activer le débogage à distance ?<br /><br />",
@@ -102,7 +112,7 @@ define({
 	"LIVE_DEVELOPMENT_INFO_TITLE": "Bienvenue dans le module Aperçu en direct !",
 	"LIVE_DEVELOPMENT_INFO_MESSAGE": "Le module Aperçu en direct connecte {APP_NAME} à votre navigateur. Il ouvre un aperçu de votre fichier HTML dans le navigateur, puis le met à jour instantanément dès que vous modifiez le code.<br /><br />Dans cette première version du logiciel {APP_NAME}, le module Aperçu en direct ne fonctionne qu’avec <strong>Google Chrome</strong> et affiche les mises à jour en direct, dès que vous modifiez des <strong>fichiers CSS ou HTML</strong>. Les modifications apportées aux fichiers JavaScript sont automatiquement rechargées lorsque vous enregistrez.<br /><br />(Ce message ne s’affichera qu’une seule fois.)",
 	"LIVE_DEVELOPMENT_TROUBLESHOOTING": "Pour plus d’informations, consultez la page <a href='{0}' title='{0}'>Résolution des erreurs de connexion à l’Aperçu en direct</a>.",
-    
+
 	"LIVE_DEV_STATUS_TIP_NOT_CONNECTED": "Aperçu en direct",
 	"LIVE_DEV_STATUS_TIP_PROGRESS1": "Aperçu en direct : Connexion\u2026",
 	"LIVE_DEV_STATUS_TIP_PROGRESS2": "Aperçu en direct : Initialisation\u2026",
@@ -114,7 +124,7 @@ define({
 	"LIVE_DEV_DETACHED_TARGET_CLOSED": "Aperçu en direct a été annulé car la page était fermée dans le navigateur",
 	"LIVE_DEV_NAVIGATED_AWAY": "Aperçu en direct a été annulé car le navigateur a accédé à une page qui ne fait pas partie du projet actuel",
 	"LIVE_DEV_CLOSED_UNKNOWN_REASON": "Aperçu en direct a été annulé pour une raison inconnue ({0})",
-    
+
 	"SAVE_CLOSE_TITLE": "Enregistrer les modifications",
 	"SAVE_CLOSE_MESSAGE": "Souhaitez-vous enregistrer les modifications apportées au document <span class='dialog-filename'>{0}</span> ?",
 	"SAVE_CLOSE_MULTI_MESSAGE": "Souhaitez-vous enregistrer les modifications apportées aux fichiers suivants ?",
@@ -125,7 +135,7 @@ define({
 	"EXT_MODIFIED_WARNING": "<span class='dialog-filename'>{0}</span> a été modifié sur le disque.<br /><br />Voulez-vous enregistrer le fichier et remplacer ces modifications ?",
 	"EXT_MODIFIED_MESSAGE": "Le fichier <span class='dialog-filename'>{0}</span> a été modifié sur le disque mais présente également des modifications non enregistrées dans {APP_NAME}.<br /><br />Quelle version souhaitez-vous conserver ?",
 	"EXT_DELETED_MESSAGE": "Le fichier <span class='dialog-filename'>{0}</span> a été supprimé sur le disque mais présente des modifications non enregistrées dans {APP_NAME}.<br /><br />Souhaitez-vous conserver vos modifications ?",
-    
+
     // Generic dialog/button labels
 	"DONE": "Terminé",
 	"OK": "OK",
@@ -137,7 +147,7 @@ define({
 	"DELETE": "Supprimer",
 	"BUTTON_YES": "Oui",
 	"BUTTON_NO": "Non",
-    
+
     // Find, Replace, Find in Files
 	"FIND_MATCH_INDEX": "{0} sur {1}",
 	"FIND_NO_RESULTS": "Aucun résultat",
@@ -185,10 +195,10 @@ define({
 	"FIND_IN_FILES_EXPAND_COLLAPSE": "Cliquer tout en appuyant sur Ctrl/Cmd pour tout développer/tout réduire",
 	"REPLACE_IN_FILES_ERRORS_TITLE": "Erreurs de remplacement",
 	"REPLACE_IN_FILES_ERRORS": "Les fichiers suivants n’ont pas été traités car ils ont été modifiés après l’opération de recherche ou ne sont pas accessibles en écriture.",
-    
+
 	"ERROR_FETCHING_UPDATE_INFO_TITLE": "Erreur de récupération des informations de mise à jour",
 	"ERROR_FETCHING_UPDATE_INFO_MSG": "Un problème est survenu lors de la récupération des dernières informations de mise à jour sur le serveur. Vérifiez que vous êtes connecté à Internet et réessayez.",
-    
+
     // File exclusion filters
 	"NEW_FILE_FILTER": "Nouveau jeu d’exclusion\u2026",
 	"CLEAR_FILE_FILTER": "Ne pas exclure les fichiers",
@@ -236,8 +246,8 @@ define({
 	"SPLITVIEW_MENU_TOOLTIP": "Fractionner l’éditeur horizontalement ou verticalement",
 	"GEAR_MENU_TOOLTIP": "Configurer l’ensemble de travail",
 
-	"SPLITVIEW_INFO_TITLE": "[7765195] !é=Already Open=!",
-	"SPLITVIEW_MULTIPANE_WARNING": "[7765196] !é=The file is already open in another pane. {APP_NAME} will soon support opening the same file in more than one pane. Until then, the file will be shown in the pane it's already open in.<br /><br />(You'll only see this message once.)=!",
+	"SPLITVIEW_INFO_TITLE": "Déjà ouvert",
+	"SPLITVIEW_MULTIPANE_WARNING": "Ce fichier est déjà ouvert dans un autre volet. Il sera bientôt possible d’ouvrir un même fichier dans plusieurs volets de l’application {APP_NAME}, mais en attendant, vous ne pouvez consulter le fichier que dans le volet dans lequel il est déjà ouvert.<br /><br />(Ce message ne s’affichera qu’une fois.)",
 
     /**
      * Keyboard modifier names
@@ -245,7 +255,7 @@ define({
 	"KEYBOARD_CTRL": "Ctrl",
 	"KEYBOARD_SHIFT": "Maj",
 	"KEYBOARD_SPACE": "Espace",
-    
+
     /**
      * StatusBar strings
      */
@@ -283,12 +293,11 @@ define({
 	"NOTHING_TO_LINT": "Rien à analyser",
 	"LINTER_TIMED_OUT": "Délai dépassé pour {0} après une attente de {1} ms",
 	"LINTER_FAILED": "{0} arrêté avec l’erreur suivante : {1}",
-    
-    
+
     /**
      * Command Name Constants
      */
- 
+
     // File menu commands
 	"FILE_MENU": "Fichier",
 	"CMD_FILE_NEW_UNTITLED": "Nouveau",
@@ -343,7 +352,7 @@ define({
 	"CMD_OPEN_LINE_BELOW": "Ouvrir une ligne en dessous",
 	"CMD_TOGGLE_CLOSE_BRACKETS": "Fermeture automatique des accolades",
 	"CMD_SHOW_CODE_HINTS": "Afficher les indicateurs de code",
-    
+
     // Search menu commands
 	"FIND_MENU": "Rechercher",
 	"CMD_FIND": "Rechercher",
@@ -359,7 +368,7 @@ define({
 	"CMD_REPLACE_IN_FILES": "Remplacer dans les fichiers",
 	"CMD_REPLACE_IN_SELECTED": "Remplacer dans le fichier/dossier sélectionné",
 	"CMD_REPLACE_IN_SUBTREE": "Remplacer dans\u2026",
-    
+
     // View menu commands
 	"VIEW_MENU": "Affichage",
 	"CMD_HIDE_SIDEBAR": "Masquer la barre latérale",
@@ -397,7 +406,7 @@ define({
 	"CMD_SHOW_IN_EXPLORER": "Afficher dans l’Explorateur",
 	"CMD_SHOW_IN_FINDER": "Afficher dans le Finder",
 	"CMD_SHOW_IN_OS": "Afficher dans le SE",
-    
+
     // Help menu commands
 	"HELP_MENU": "Aide",
 	"CMD_CHECK_FOR_UPDATE": "Rechercher les mises à jour",
@@ -411,9 +420,11 @@ define({
 	"CMD_TWITTER": "{TWITTER_NAME} sur Twitter",
 	"CMD_ABOUT": "A propos de {APP_TITLE}",
 	"CMD_OPEN_PREFERENCES": "Ouvrir le fichier de préférences",
+	"CMD_OPEN_KEYMAP": "Ouvrir le mappage de touches utilisateur",
 
     // Strings for main-view.html
 	"EXPERIMENTAL_BUILD": "version expérimentale",
+	"RELEASE_BUILD": "édition",
 	"DEVELOPMENT_BUILD": "version de développement",
 	"RELOAD_FROM_DISK": "Recharger à partir du disque",
 	"KEEP_CHANGES_IN_EDITOR": "Conserver les modifications dans l’éditeur",
@@ -440,8 +451,8 @@ define({
 	"BASEURL_ERROR_HASH_DISALLOWED": "L’URL de base ne peut pas contenir de signe dièse (\"{0}\").",
 	"BASEURL_ERROR_INVALID_CHAR": "Les caractères spéciaux tels que '{0}' doivent être codés en %.",
 	"BASEURL_ERROR_UNKNOWN_ERROR": "Erreur inconnue lors de l’analyse de l’URL de base",
-	"EMPTY_VIEW_HEADER": "<em>Sélectionnez un fichier quand cette vue est active</em>",
-    
+	"EMPTY_VIEW_HEADER": "<em>Ouvrir un fichier quand ce panneau est actif</em>",
+
     // Strings for themes-settings.html and themes-general.html
 	"CURRENT_THEME": "Thème actuel ",
 	"USE_THEME_SCROLLBARS": "Utiliser les barres de défilement du thème ",
@@ -451,7 +462,7 @@ define({
 
     // CSS Quick Edit
 	"BUTTON_NEW_RULE": "Nouvelle règle",
-    
+
     // Extension Management strings
 	"INSTALL": "Installer",
 	"UPDATE": "Mettre à jour",
@@ -542,14 +553,15 @@ define({
 	"EXTENSIONS_AVAILABLE_TITLE": "Disponibles",
 	"EXTENSIONS_THEMES_TITLE": "Thèmes",
 	"EXTENSIONS_UPDATES_TITLE": "Mises à jour",
-    
+
 	"INLINE_EDITOR_NO_MATCHES": "Aucun résultat.",
+	"INLINE_EDITOR_HIDDEN_MATCHES": "Tous les résultats sont réduits. Développez les fichiers dans la liste de droite pour voir le détail.",
 	"CSS_QUICK_EDIT_NO_MATCHES": "Aucune règle CSS existante ne correspond à votre sélection.<br> Cliquez sur « Nouvelle règle » pour en créer une.",
 	"CSS_QUICK_EDIT_NO_STYLESHEETS": "Votre projet ne contient aucune feuille de style.<br>Créez-en une pour pouvoir ajouter des règles CSS.",
 
     // Custom Viewers
 	"IMAGE_VIEWER_LARGEST_ICON": "maximum",
-    
+
     /**
      * Unit names
      */
@@ -571,20 +583,20 @@ define({
 	"CMD_RESTART_NODE": "Redémarrer le nœud",
 	"CMD_SHOW_ERRORS_IN_STATUS_BAR": "Afficher les erreurs dans la barre d’état",
 	"CMD_OPEN_BRACKETS_SOURCE": "Ouvrir la source Brackets",
-    
+
 	"LANGUAGE_TITLE": "Changer de langue",
 	"LANGUAGE_MESSAGE": "Langue :",
 	"LANGUAGE_SUBMIT": "Recharger {APP_NAME}",
 	"LANGUAGE_CANCEL": "Annuler",
 	"LANGUAGE_SYSTEM_DEFAULT": "Langue par défaut du système",
-    
+
     // extensions/default/InlineTimingFunctionEditor
 	"INLINE_TIMING_EDITOR_TIME": "Temps",
 	"INLINE_TIMING_EDITOR_PROGRESSION": "Progression",
 	"BEZIER_EDITOR_INFO": "<kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> Déplacer le point sélectionné<br><kbd class='text'>Maj</kbd> Déplacer de dix unités<br><kbd class='text'>Tabulation</kbd> Permuter les points",
 	"STEPS_EDITOR_INFO": "<kbd>↑</kbd><kbd>↓</kbd> Augmenter ou réduire les pas<br><kbd>←</kbd><kbd>→</kbd> 'Démarrer' ou 'Arrêter'",
 	"INLINE_TIMING_EDITOR_INVALID": "L’ancienne valeur <code>{0}</code> n’est pas valide et a donc été remplacée par <code>{1}</code> pour la fonction affichée. Le document sera mis à jour à la première modification.",
-    
+
     // extensions/default/InlineColorEditor
 	"COLOR_EDITOR_CURRENT_COLOR_SWATCH_TIP": "Couleur actuelle",
 	"COLOR_EDITOR_ORIGINAL_COLOR_SWATCH_TIP": "Couleur d’origine",
@@ -593,23 +605,23 @@ define({
 	"COLOR_EDITOR_HSLA_BUTTON_TIP": "Format HSLa",
 	"COLOR_EDITOR_USED_COLOR_TIP_SINGULAR": "{0} (utilisé {1} fois)",
 	"COLOR_EDITOR_USED_COLOR_TIP_PLURAL": "{0} (utilisé {1} fois)",
-    
+
     // extensions/default/JavaScriptCodeHints
 	"CMD_JUMPTO_DEFINITION": "Accéder à la définition",
 	"CMD_SHOW_PARAMETER_HINT": "Afficher l’indicateur de paramètre",
 	"NO_ARGUMENTS": "<aucun paramètre>",
 	"DETECTED_EXCLUSION_TITLE": "Problème d’inférence de fichier Javascript",
-	"DETECTED_EXCLUSION_INFO": "Brackets a rencontré des problèmes lors du traitement :<br><br>{0}<br><br>La fonction d’accès aux définitions et les indicateurs de code de ce fichier ne seront plus traités. Pour réactiver cette fonctionnalité, ouvrez <code>.brackets.json</code> dans votre projet et supprimez le fichier de la section jscodehints.detectedExclusions.",
-    
+	"DETECTED_EXCLUSION_INFO": "Brackets a rencontré des problèmes lors du traitement du fichier <span class='dialog-filename'>{0}</span>.<br><br>La fonction d’accès aux définitions, les indicateurs de code et la fonction Edition rapide de ce fichier ne seront plus traités. Pour réactiver ce fichier, ouvrez <code>.brackets.json</code> dans votre projet et éditez la section <code>jscodehints.detectedExclusions</code>.<br><br>Il s’agit vraisemblablement d’un bug au niveau de l’application Brackets. Si vous pouvez nous transmettre une copie de ce fichier, merci de <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>consigner un bug</a> en fournissant un lien vers le fichier en question.",
+
     // extensions/default/JSLint
 	"JSLINT_NAME": "JSLint",
-    
+
     // extensions/default/QuickView
 	"CMD_ENABLE_QUICK_VIEW": "Affichage rapide au survol",
-    
+
     // extensions/default/RecentProjects
 	"CMD_TOGGLE_RECENT_PROJECTS": "Projets récents",
-    
+
     // extensions/default/WebPlatformDocs
 	"DOCS_MORE_LINK": "En savoir plus"
 });
diff --git a/src/nls/gl/strings.js b/src/nls/gl/strings.js
index bc772565376..6d9e836f625 100644
--- a/src/nls/gl/strings.js
+++ b/src/nls/gl/strings.js
@@ -110,7 +110,7 @@ define({
     "LIVE_DEV_STATUS_TIP_OUT_OF_SYNC"   : "Vista Previa en Vivo (garda o arquivo para actualizar)",
     "LIVE_DEV_STATUS_TIP_SYNC_ERROR"    : "Vista Previa en Vivo (non se está actualizando debido a un erro de sintaxis)",
     
-    "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS" : "Vista Previa en Vivo detiuse porque abríronse as ferramentas de desenrolo",
+    "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS" : "Vista Previa en Vivo detiuse porque abríronse as ferramentas de desenvolvemento",
     "LIVE_DEV_DETACHED_TARGET_CLOSED"          : "Vista Previa en Vivo detiuse porque cerrouse a páxina no navegador",
     "LIVE_DEV_NAVIGATED_AWAY"                  : "Vista Previa en Vivo detiuse porque accediuse a unha páxina que non é parte do proxecto actual",
     "LIVE_DEV_CLOSED_UNKNOWN_REASON"           : "Vista Previa en Vivo detiuse por motivos descoñecidos ({0})",
@@ -415,7 +415,7 @@ define({
     
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "versión experimental",
-    "DEVELOPMENT_BUILD"                    : "versión de desenrolo",
+    "DEVELOPMENT_BUILD"                    : "versión de desenvolvemento",
     "RELOAD_FROM_DISK"                     : "Volver a cargar dende disco",
     "KEEP_CHANGES_IN_EDITOR"               : "Conservar os cambios do editor",
     "CLOSE_DONT_SAVE"                      : "Pechar (Non gardar)",
@@ -558,7 +558,7 @@ define({
     "UNIT_PIXELS"                          : "píxeles",
 
     // extensions/default/DebugCommands
-    "DEBUG_MENU"                                : "Desenrolo",
+    "DEBUG_MENU"                                : "Desenvolvemento",
     "ERRORS"                                    : "Erros",
     "CMD_SHOW_DEV_TOOLS"                        : "Amosar ferramentas para desenvolvedores",
     "CMD_REFRESH_WINDOW"                        : "Recargar con extensións",
diff --git a/src/nls/hr/strings.js b/src/nls/hr/strings.js
index 85f495b8688..f3ab508416e 100644
--- a/src/nls/hr/strings.js
+++ b/src/nls/hr/strings.js
@@ -198,6 +198,24 @@ define({
     "PROJECT_LOADING"   : "Učitavanje\u2026",
     "UNTITLED"          : "Neimenovan",
     "WORKING_FILES"     : "Radne datoteke",
+    
+    /**
+     * MainViewManager
+     */
+    "TOP"               : "Vrh",
+    "BOTTOM"            : "Dno",
+    "LEFT"              : "Lijevo",
+    "RIGHT"             : "Desno",
+
+    "CMD_SPLITVIEW_NONE"        : "Bez prepolavljanja",
+    "CMD_SPLITVIEW_VERTICAL"    : "Prepolovi okomito",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "Prepolovi vodoravno",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Prepolovi editor okomito ili vodoravno",
+    "GEAR_MENU_TOOLTIP"         : "Definiraj radni skup",
+
+    "SPLITVIEW_INFO_TITLE"              : "Već otvoreno",
+    "SPLITVIEW_MULTIPANE_WARNING"       : "Datoteka je već otvorena u drugom panelu. {APP_NAME} će uskoro podržavati otvaranje iste datoteke u više od jednog panela. Do tada, datoteka će biti prikazana u panelu u kojem je već otvorena.<br /><br />(Ovu ćeš poruku vidjeti samo jednom.)",
+
 
     /**
      * Keyboard modifier names
@@ -391,6 +409,14 @@ define({
     "BASEURL_ERROR_HASH_DISALLOWED"        : "Osnovna URL adresa ne smije sadržavati hasheve (hashes) poput \"{0}\".",
     "BASEURL_ERROR_INVALID_CHAR"           : "Posebni znakovi kao '{0}' moraju biti %-enkodirani.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Nepoznata greška prilikom parsiranja osnovne URL adrese",
+    "EMPTY_VIEW_HEADER"                    : "<em>Otvori datoteku dok je ovaj panel u fokusu</em>",
+    
+    // Strings for themes-settings.html and themes-general.html
+    "CURRENT_THEME"                        : "Trenutna Tema",
+    "USE_THEME_SCROLLBARS"                 : "Koristi scrollbarove teme",
+    "FONT_SIZE"                            : "Veličina Fonta",
+    "FONT_FAMILY"                          : "Obitelj Fonta",
+    "THEMES_SETTINGS"                      : "Postavke Teme",
     
     // CSS Quick Edit
     "BUTTON_NEW_RULE"                      : "Novo Pravilo",
@@ -474,6 +500,7 @@ define({
     "REGISTRY_SANITY_CHECK_WARNING"        : "Budite oprezni prilikom instalacije extenzija koje potječu iz nepoznatih izvora.",
     "EXTENSIONS_INSTALLED_TITLE"           : "Instalirano",
     "EXTENSIONS_AVAILABLE_TITLE"           : "Dostupno",
+    "EXTENSIONS_THEMES_TITLE"              : "Teme",
     "EXTENSIONS_UPDATES_TITLE"             : "Obnovljene verzije",
     
     "INLINE_EDITOR_NO_MATCHES"             : "Poklapanja nisu nađena.",
diff --git a/src/nls/it/strings.js b/src/nls/it/strings.js
index fc099c2803d..d86e420f263 100644
--- a/src/nls/it/strings.js
+++ b/src/nls/it/strings.js
@@ -34,6 +34,7 @@ define({
     "GENERIC_ERROR"                     : "(errore {0})",
     "NOT_FOUND_ERR"                     : "Impossibile trovare il file.",
     "NOT_READABLE_ERR"                  : "Il file non può essere letto.",
+    "EXCEEDS_MAX_FILE_SIZE"             : "File oltre {0} MB non possono essere aperti con {APP_NAME}.",
     "NO_MODIFICATION_ALLOWED_ERR"       : "La cartella selezionata non può essere modificata.",
     "NO_MODIFICATION_ALLOWED_ERR_FILE"  : "Non hai i permessi necessari per effettuare la modifica.",
     "CONTENTS_MODIFIED_ERR"             : "Il file è stato modificato fuori {APP_NAME}.",
@@ -72,7 +73,19 @@ define({
     "FILE_ALREADY_EXISTS"               : "Il file <span class='dialog-filename'>{0}</span> esiste già.",
     "ERROR_CREATING_FILE_TITLE"         : "Errore durante la creazione del file",
     "ERROR_CREATING_FILE"               : "Errore durante il tentativo di creare il file <span class='dialog-filename'>{0}</span>. {1}",
-    "ERROR_MIXED_DRAGDROP"              : "Impossibile aprire una cartella, contemporaneamente, come l'apertura di altri file.",
+    "ERROR_MIXED_DRAGDROP"              : "Impossibile aprire una cartella contemporaneamente all'apertura di altri file.",
+
+
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Errore nella lettura della key map",
+    "ERROR_KEYMAP_CORRUPT"              : "Il tuo file non è in formato JSON valido.  Il file sarà riaperto per poter correggere il formato.",
+    "ERROR_LOADING_KEYMAP"              : "La tua key map non è un file UTF-8 valido e non può essere caricato",
+    "ERROR_RESTRICTED_COMMANDS"         : "Non puoi riassegnare queste scorciatoie: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "Non puoi riassegnare delle scorciatoie a questi comandi: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "Stai riassegnando più di una scorciatoia a questi comandi:: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "Queste scorciatoie non sono valide: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "Stai assegnando scorciatoie a comandi inesistenti: {0}",
+
     
     // Application preferences corrupt error strings
     "ERROR_PREFS_CORRUPT_TITLE"         : "Errore nella lettura delle preferenze",
@@ -80,7 +93,7 @@ define({
 
     // Application error strings
     "ERROR_IN_BROWSER_TITLE"            : "Oops! {APP_NAME} non può essere ancora eseguita nel browser.",
-    "ERROR_IN_BROWSER"                  : "{APP_NAME} è scritta in HTML, ma al momento viene eseguita come applicazione desktop per avere la possibilità di modificare file locali. Puoi usare la shell dell’applicazione Puoi usare la shell sul <b>github.com/adobe/brackets-shell</b> repository per eseguire {APP_NAME}.",
+    "ERROR_IN_BROWSER"                  : "{APP_NAME} è scritta in HTML, ma al momento viene eseguita come applicazione desktop per avere la possibilità di modificare file locali. Puoi usare la shell dal repository <b>github.com/adobe/brackets-shell</b> per eseguire {APP_NAME}.",
     
     // ProjectManager max files error string
     "ERROR_MAX_FILES_TITLE"             : "Errore durante l’indicizzazione dei file",
@@ -414,6 +427,7 @@ define({
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                : "build sperimentale",
     "DEVELOPMENT_BUILD"                 : "build di sviluppo",
+    "RELEASE_BUILD"                     : "build di rilascio",
     "RELOAD_FROM_DISK"                  : "Ricarica dal disco",
     "KEEP_CHANGES_IN_EDITOR"            : "Conserva le modifiche nell’editor",
     "CLOSE_DONT_SAVE"                   : "Chiudi (non salvare)",
@@ -490,7 +504,7 @@ define({
     "BAD_HTTP_STATUS"                      : "File non trovato sul server (HTTP {0}).",
     "CANNOT_WRITE_TEMP"                    : "Impossibile salvare il file scaricato nei file temporanei.",
     "ERROR_LOADING"                        : "Questa estensione ha incontrato un errore durante l’avvio.",
-    "MALFORMED_URL"                        : "L’indirizzo URL è invalido. Controlla di averlo inserito correttamente.",
+    "MALFORMED_URL"                        : "L’indirizzo URL non è valido. Controlla di averlo inserito correttamente.",
     "UNSUPPORTED_PROTOCOL"                 : "L’indirizzo URL dev’essere di tipo http o https.",
     "UNKNOWN_ERROR"                        : "Errore interno sconosciuto.",
     // For NOT_FOUND_ERR, see generic strings above
diff --git a/src/nls/ja/strings.js b/src/nls/ja/strings.js
index cef58c8bb8b..cd7fe63ad85 100644
--- a/src/nls/ja/strings.js
+++ b/src/nls/ja/strings.js
@@ -25,7 +25,7 @@
 /*global define */
 
 define({
-    
+
     /**
      * Errors
      */
@@ -34,11 +34,11 @@ define({
 	"GENERIC_ERROR": "(エラー {0})",
 	"NOT_FOUND_ERR": "ファイルが見つかりません。",
 	"NOT_READABLE_ERR": "ファイルを読み取れません。",
+	"EXCEEDS_MAX_FILE_SIZE": "{0} MB を超えるサイズのファイルは {APP_NAME} で開くことはできません。",
 	"NO_MODIFICATION_ALLOWED_ERR": "対象ディレクトリは変更できません。",
 	"NO_MODIFICATION_ALLOWED_ERR_FILE": "ファイルを変更する権限がありません。",
 	"CONTENTS_MODIFIED_ERR": "このファイルは {APP_NAME} 以外で変更されています。",
 	"UNSUPPORTED_ENCODING_ERR": "{APP_NAME} は現在 UTF-8 でエンコードされたテキストファイルのみをサポートしています。",
-	"UNSUPPORTED_FILE_TYPE_ERR": "ファイルはサポートされているファイルタイプではありません。",
 	"FILE_EXISTS_ERR": "ファイルまたはディレクトリは既に存在しています。",
 	"FILE": "ファイル",
 	"FILE_TITLE": "ファイル",
@@ -48,7 +48,6 @@ define({
 	"FILENAMES_LEDE": "ファイル名",
 	"FILENAME": "ファイル名",
 	"DIRECTORY_NAME": "ディレクトリ名",
-    
 
     // Project error strings
 	"ERROR_LOADING_PROJECT": "プロジェクトを読み込む際にエラーが発生しました。",
@@ -75,6 +74,17 @@ define({
 	"ERROR_CREATING_FILE": "{0} <span class='dialog-filename'>{1}</span> を作成する際にエラーが発生しました。{2}",
 	"ERROR_MIXED_DRAGDROP": "他のファイルを開いている間はフォルダーを開くことはできません。",
 
+    // User key map error strings
+	"ERROR_KEYMAP_TITLE": "ユーザーキーマップを読み込む際にエラーが発生しました",
+	"ERROR_KEYMAP_CORRUPT": "キーマップファイルが有効な JSON ではありません。ファイルが開かれます。フォーマットを修正してください。",
+	"ERROR_LOADING_KEYMAP": "キーマップファイルが UTF-8 でエンコードされた有効なテキストファイルではないため、読み込めません",
+	"ERROR_RESTRICTED_COMMANDS": "次のコマンドにショートカットを割り当て直すことはできません : {0}",
+	"ERROR_RESTRICTED_SHORTCUTS": "次のショートカットを割り当て直すことはできません : {0}",
+	"ERROR_MULTIPLE_SHORTCUTS": "次のコマンドに複数のショートカットを割り当て直しています : {0}",
+	"ERROR_DUPLICATE_SHORTCUTS": "次のショートカットの複数のバインディングがあります : {0}",
+	"ERROR_INVALID_SHORTCUTS": "次のショートカットは無効です : {0}",
+	"ERROR_NONEXISTENT_COMMANDS": "存在しないコマンドにショートカットを割り当てています : {0}",
+
     // Application preferences corrupt error strings
 	"ERROR_PREFS_CORRUPT_TITLE": "環境設定を読み込む際にエラーが発生しました。",
 	"ERROR_PREFS_CORRUPT": "環境設定ファイルが有効な JSON ではありません。ファイルが開かれます。フォーマットを修正してください。変更を反映するには、{APP_NAME} を再起動する必要があります。",
@@ -82,7 +92,7 @@ define({
     // Application error strings
 	"ERROR_IN_BROWSER_TITLE": "{APP_NAME} は、まだブラウザー上で実行されていません。",
 	"ERROR_IN_BROWSER": "{APP_NAME} は HTML で構築されていますが、デスクトップアプリとして実行することで、ローカルファイルを編集することができます。{APP_NAME} を実行するために、<b>github.com/adobe/brackets-shell</b> リポジトリのアプリケーションシェルを使用してください。",
-    
+
     // ProjectManager max files error string
 	"ERROR_MAX_FILES_TITLE": "ファイルのインデックス時にエラーが発生しました。",
 	"ERROR_MAX_FILES": "このプロジェクトには 30,000 個以上のファイルが含まれています。複数のファイルを操作する機能が無効になるか、プロジェクトが空であるかのように動作します。<a href='https://github.com/adobe/brackets/wiki/Large-Projects'>大きいプロジェクトの操作方法の詳細を表示</a>。",
@@ -91,7 +101,7 @@ define({
 	"ERROR_LAUNCHING_BROWSER_TITLE": "ブラウザーの起動時にエラーが発生しました。",
 	"ERROR_CANT_FIND_CHROME": "Google Chrome ブラウザーが見つかりません。インストールされていることを確認してください。",
 	"ERROR_LAUNCHING_BROWSER": "ブラウザーの起動時にエラーが発生しました。(エラー {0})",
-    
+
 	"LIVE_DEVELOPMENT_ERROR_TITLE": "ライブプレビューのエラーが発生しました。",
 	"LIVE_DEVELOPMENT_RELAUNCH_TITLE": "ブラウザーに接続しています",
 	"LIVE_DEVELOPMENT_ERROR_MESSAGE": "ライブプレビューに接続するには、リモートデバッグを有効にして Chrome を再起動する必要があります。<br /><br />Chrome を再起動してリモートデバッグを有効にしますか？<br /><br />",
@@ -102,7 +112,7 @@ define({
 	"LIVE_DEVELOPMENT_INFO_TITLE": "ライブプレビューへようこそ",
 	"LIVE_DEVELOPMENT_INFO_MESSAGE": "ライブプレビューにより {APP_NAME} がブラウザーに接続しました。ブラウザーで HTML ファイルのプレビューが起動し、コードを編集すると直ちにプレビューが更新されます。<br /><br />この初期バージョンの {APP_NAME} では、<strong>Google Chrome</strong> でのみライブプレビューが機能し、<strong>CSS または HTML ファイル</strong>の編集時にのみライブ更新が行われます。 JavaScript ファイルへの変更は、保存時に自動的にリロードされます。<br /><br />(このメッセージは一度しか表示されません。)",
 	"LIVE_DEVELOPMENT_TROUBLESHOOTING": "詳しくは、<a href='{0}' title='{0}'>ライブプレビューの接続エラーに関するトラブルシューティング</a>を参照してください。",
-    
+
 	"LIVE_DEV_STATUS_TIP_NOT_CONNECTED": "ライブプレビュー",
 	"LIVE_DEV_STATUS_TIP_PROGRESS1": "ライブプレビュー : 接続中\u2026",
 	"LIVE_DEV_STATUS_TIP_PROGRESS2": "ライブプレビュー : 初期化中\u2026",
@@ -114,7 +124,7 @@ define({
 	"LIVE_DEV_DETACHED_TARGET_CLOSED": "ブラウザーでページが閉じられたため、ライブプレビューはキャンセルされました",
 	"LIVE_DEV_NAVIGATED_AWAY": "ブラウザーで現在のプロジェクトに含まれないページに移動したため、ライブプレビューはキャンセルされました",
 	"LIVE_DEV_CLOSED_UNKNOWN_REASON": "不明な原因 ({0}) によってライブプレビューはキャンセルされました",
-    
+
 	"SAVE_CLOSE_TITLE": "変更を保存",
 	"SAVE_CLOSE_MESSAGE": "文書 <span class='dialog-filename'>{0}</span> に加えた変更を保存しますか？",
 	"SAVE_CLOSE_MULTI_MESSAGE": "以下のファイルに対する変更を保存しますか？",
@@ -125,7 +135,7 @@ define({
 	"EXT_MODIFIED_WARNING": "<span class='dialog-filename'>{0}</span> はディスク上で変更されています。<br /><br />ファイルを保存し、これらの変更を上書きしますか。",
 	"EXT_MODIFIED_MESSAGE": "<span class='dialog-filename'>{0}</span> はディスク上で変更されていますが、{APP_NAME} 内にも保存されていない変更があります。<br /><br />どちらのバージョンを保持しますか？",
 	"EXT_DELETED_MESSAGE": "<span class='dialog-filename'>{0}</span> はディスク上で削除されていますが、{APP_NAME} 内に保存されていない変更があります。<br /><br />変更を保持しますか？",
-    
+
     // Generic dialog/button labels
 	"DONE": "完了",
 	"OK": "OK",
@@ -137,7 +147,7 @@ define({
 	"DELETE": "削除",
 	"BUTTON_YES": "はい",
 	"BUTTON_NO": "いいえ",
-    
+
     // Find, Replace, Find in Files
 	"FIND_MATCH_INDEX": "{0} / {1}",
 	"FIND_NO_RESULTS": "該当なし",
@@ -185,10 +195,10 @@ define({
 	"FIND_IN_FILES_EXPAND_COLLAPSE": "Ctrl / Command キーをクリックしてすべて展開 / 折りたたみ",
 	"REPLACE_IN_FILES_ERRORS_TITLE": "置換エラー",
 	"REPLACE_IN_FILES_ERRORS": "次のファイルは検索の後で変更されているか、書き込むことができないため、変更されていません。",
-    
+
 	"ERROR_FETCHING_UPDATE_INFO_TITLE": "更新情報を取得する際にエラーが発生しました。",
 	"ERROR_FETCHING_UPDATE_INFO_MSG": "サーバーから最新の更新情報を取得する際にエラーが発生しました。インターネット接続を確認してリトライしてください。",
-    
+
     // File exclusion filters
 	"NEW_FILE_FILTER": "新規除外セット\u2026",
 	"CLEAR_FILE_FILTER": "ファイルを除外しない",
@@ -236,8 +246,8 @@ define({
 	"SPLITVIEW_MENU_TOOLTIP": "エディターを垂直方向 / 水平方向に分割",
 	"GEAR_MENU_TOOLTIP": "ワーキングセットを構成",
 
-	"SPLITVIEW_INFO_TITLE": "!能=[7765195] Already Open_=!",
-	"SPLITVIEW_MULTIPANE_WARNING": "!能=[7765196] The file is already open in another pane. {APP_NAME} will soon support opening the same file in more than one pane. Until then, the file will be shown in the pane it's already open in.<br /><br />(You'll only see this message once.)_=!",
+	"SPLITVIEW_INFO_TITLE": "既に開かれています",
+	"SPLITVIEW_MULTIPANE_WARNING": "ファイルは他のペインで既に開かれています。{APP_NAME} ではまもなく複数のペインで同じファイルを開くことが可能になる予定です。それまでは、ファイルは既に開かれているペインで表示されます。<br /><br />(このメッセージは一度しか表示されません。)",
 
     /**
      * Keyboard modifier names
@@ -245,7 +255,7 @@ define({
 	"KEYBOARD_CTRL": "Ctrl",
 	"KEYBOARD_SHIFT": "Shift",
 	"KEYBOARD_SPACE": "Space",
-    
+
     /**
      * StatusBar strings
      */
@@ -283,12 +293,11 @@ define({
 	"NOTHING_TO_LINT": "Lint チェックするファイルがありません",
 	"LINTER_TIMED_OUT": "{0} は {1} ミリ秒待機した後でタイムアウトしました",
 	"LINTER_FAILED": "{0} は次のエラーにより終了しました : {1}",
-    
-    
+
     /**
      * Command Name Constants
      */
- 
+
     // File menu commands
 	"FILE_MENU": "ファイル",
 	"CMD_FILE_NEW_UNTITLED": "新規作成",
@@ -343,7 +352,7 @@ define({
 	"CMD_OPEN_LINE_BELOW": "下の行を開く",
 	"CMD_TOGGLE_CLOSE_BRACKETS": "自動閉じカッコ",
 	"CMD_SHOW_CODE_HINTS": "コードヒントを表示",
-    
+
     // Search menu commands
 	"FIND_MENU": "検索",
 	"CMD_FIND": "検索",
@@ -359,7 +368,7 @@ define({
 	"CMD_REPLACE_IN_FILES": "ファイルを横断して置換",
 	"CMD_REPLACE_IN_SELECTED": "選択したファイルまたはフォルダーで置換",
 	"CMD_REPLACE_IN_SUBTREE": "置換対象\u2026",
-    
+
     // View menu commands
 	"VIEW_MENU": "表示",
 	"CMD_HIDE_SIDEBAR": "サイドバーを隠す",
@@ -397,7 +406,7 @@ define({
 	"CMD_SHOW_IN_EXPLORER": "エクスプローラーで表示",
 	"CMD_SHOW_IN_FINDER": "Finder で表示",
 	"CMD_SHOW_IN_OS": "OS で表示",
-    
+
     // Help menu commands
 	"HELP_MENU": "ヘルプ",
 	"CMD_CHECK_FOR_UPDATE": "更新をチェックする",
@@ -411,9 +420,11 @@ define({
 	"CMD_TWITTER": "Twitter で {TWITTER_NAME} をフォロー",
 	"CMD_ABOUT": "{APP_TITLE} について",
 	"CMD_OPEN_PREFERENCES": "環境設定ファイルを開く",
+	"CMD_OPEN_KEYMAP": "ユーザーキーマップを開く",
 
     // Strings for main-view.html
 	"EXPERIMENTAL_BUILD": "試験ビルド",
+	"RELEASE_BUILD": "ビルド",
 	"DEVELOPMENT_BUILD": "開発ビルド",
 	"RELOAD_FROM_DISK": "ディスクから再読み込み",
 	"KEEP_CHANGES_IN_EDITOR": "エディター内の変更を保持する",
@@ -440,8 +451,8 @@ define({
 	"BASEURL_ERROR_HASH_DISALLOWED": "ベース URL には、「{0}」のようなハッシュ記号は使用できません。",
 	"BASEURL_ERROR_INVALID_CHAR": "「{0}」のような特殊文字は、パーセントエンコーディングする必要があります。",
 	"BASEURL_ERROR_UNKNOWN_ERROR": "ベース URL の解析中に不明なエラーが発生しました",
-	"EMPTY_VIEW_HEADER": "<em>このビューにフォーカスがあるときにファイルを選択</em>",
-    
+	"EMPTY_VIEW_HEADER": "<em>このペインにフォーカスがあるときにファイルを開く</em>",
+
     // Strings for themes-settings.html and themes-general.html
 	"CURRENT_THEME": "現在のテーマ",
 	"USE_THEME_SCROLLBARS": "テーマスクロールバーを使用",
@@ -451,7 +462,7 @@ define({
 
     // CSS Quick Edit
 	"BUTTON_NEW_RULE": "新規ルール",
-    
+
     // Extension Management strings
 	"INSTALL": "インストール",
 	"UPDATE": "更新",
@@ -542,14 +553,15 @@ define({
 	"EXTENSIONS_AVAILABLE_TITLE": "入手可能",
 	"EXTENSIONS_THEMES_TITLE": "テーマ",
 	"EXTENSIONS_UPDATES_TITLE": "アップデート",
-    
+
 	"INLINE_EDITOR_NO_MATCHES": "一致するものがありません。",
+	"INLINE_EDITOR_HIDDEN_MATCHES": "一致項目はすべて縮小されています。一致項目を表示するには、右側にリストされているファイルを展開してください。",
 	"CSS_QUICK_EDIT_NO_MATCHES": "選択に一致する既存の CSS ルールがありません。<br>「新規ルール」をクリックしてルールを作成してください。",
 	"CSS_QUICK_EDIT_NO_STYLESHEETS": "プロジェクトにはスタイルシートがありません。<br>スタイルシートを作成して CSS ルールに追加してください。",
 
     // Custom Viewers
 	"IMAGE_VIEWER_LARGEST_ICON": "最大",
-    
+
     /**
      * Unit names
      */
@@ -571,20 +583,20 @@ define({
 	"CMD_RESTART_NODE": "Node を再起動",
 	"CMD_SHOW_ERRORS_IN_STATUS_BAR": "ステータスバーにエラーを表示",
 	"CMD_OPEN_BRACKETS_SOURCE": "オープン Brackets ソース",
-    
+
 	"LANGUAGE_TITLE": "言語を切り替える",
 	"LANGUAGE_MESSAGE": "言語 :",
 	"LANGUAGE_SUBMIT": "{APP_NAME} をリロード",
 	"LANGUAGE_CANCEL": "キャンセル",
 	"LANGUAGE_SYSTEM_DEFAULT": "システムのデフォルト",
-    
+
     // extensions/default/InlineTimingFunctionEditor
 	"INLINE_TIMING_EDITOR_TIME": "時間",
 	"INLINE_TIMING_EDITOR_PROGRESSION": "進行",
 	"BEZIER_EDITOR_INFO": "<kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> 選択したポイントを移動<br><kbd class='text'>Shift</kbd> 10 単位ずつ移動<br><kbd class='text'>Tab</kbd> ポイントを切り替え",
 	"STEPS_EDITOR_INFO": "<kbd>↑</kbd><kbd>↓</kbd> 手順を増減<br><kbd>←</kbd><kbd>→</kbd> 「開始」または「終了」",
 	"INLINE_TIMING_EDITOR_INVALID": "古い値 <code>{0}</code> が無効なため、表示されている関数は <code>{1}</code> に変更されました。ドキュメントは最初の編集内容で更新されます。",
-    
+
     // extensions/default/InlineColorEditor
 	"COLOR_EDITOR_CURRENT_COLOR_SWATCH_TIP": "現在の色",
 	"COLOR_EDITOR_ORIGINAL_COLOR_SWATCH_TIP": "元の色",
@@ -593,23 +605,23 @@ define({
 	"COLOR_EDITOR_HSLA_BUTTON_TIP": "HSLa 形式",
 	"COLOR_EDITOR_USED_COLOR_TIP_SINGULAR": "{0} ({1} 回使用)",
 	"COLOR_EDITOR_USED_COLOR_TIP_PLURAL": "{0} ({1} 回使用)",
-    
+
     // extensions/default/JavaScriptCodeHints
 	"CMD_JUMPTO_DEFINITION": "定義にジャンプ",
 	"CMD_SHOW_PARAMETER_HINT": "パラメーターヒントを表示",
 	"NO_ARGUMENTS": "<パラメーターがありません>",
 	"DETECTED_EXCLUSION_TITLE": "JavaScript ファイルの推論問題",
-	"DETECTED_EXCLUSION_INFO": "Brackets で処理中に問題が発生しました : <br><br>{0}<br><br>このファイルはコードヒントとしては処理されず、定義に移動します。これを戻すには、プロジェクトで <code>.brackets.json</code> を開いて jscodehints.detectedExclusions からファイルを削除してください。",
-    
+	"DETECTED_EXCLUSION_INFO": "Brackets で <span class='dialog-filename'>{0}</span> の処理中に問題が発生しました。<br><br>このファイルはコードヒント、定義にジャンプ、またはクイック編集では処理されません。このファイルを再度有効にするには、プロジェクトで <code>.brackets.json</code> を開いて <code>jscodehints.detectedExclusions</code> を編集してください。<br><br>これは、Brackets のバグである可能性があります。このファイルのコピーをご提供いただける場合は、ここで名付けたファイルへのリンクを記載して<a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>バグを登録</a>してください。",
+
     // extensions/default/JSLint
 	"JSLINT_NAME": "JSLint",
-    
+
     // extensions/default/QuickView
 	"CMD_ENABLE_QUICK_VIEW": "ホバー・クイックビュー",
-    
+
     // extensions/default/RecentProjects
 	"CMD_TOGGLE_RECENT_PROJECTS": "最近使用したプロジェクト",
-    
+
     // extensions/default/WebPlatformDocs
 	"DOCS_MORE_LINK": "詳細"
 });
diff --git a/src/nls/pt-br/strings.js b/src/nls/pt-br/strings.js
index 243d40a2535..86f84fd3cdc 100644
--- a/src/nls/pt-br/strings.js
+++ b/src/nls/pt-br/strings.js
@@ -34,10 +34,11 @@ define({
     "GENERIC_ERROR"                     : "(erro {0})",
     "NOT_FOUND_ERR"                     : "O arquivo não pôde ser encontrado.",
     "NOT_READABLE_ERR"                  : "O arquivo não pôde ser lido.",
+    "EXCEEDS_MAX_FILE_SIZE"             : "Arquivos maiores que {0} MB não podem ser abertos no {APP_NAME}.",
     "NO_MODIFICATION_ALLOWED_ERR"       : "O diretório de destino não pode ser modificado.",
     "NO_MODIFICATION_ALLOWED_ERR_FILE"  : "As permissões não permitem que você faça modificações.",
     "CONTENTS_MODIFIED_ERR"             : "O arquivo foi modificado fora do {APP_NAME}.",
-    "UNSUPPORTED_ENCODING_ERR"          : "O arquivo não contém texto codificado em UTF-8.",
+    "UNSUPPORTED_ENCODING_ERR"          : "{APP_NAME} atualmente suporta apenas arquivos de texto codificados em UTF-8.",
     "FILE_EXISTS_ERR"                   : "Arquivo ou pasta já existe.",
     "FILE"                              : "arquivo",
     "FILE_TITLE"                        : "Arquivo",
@@ -72,9 +73,21 @@ define({
     "ENTRY_WITH_SAME_NAME_EXISTS"       : "Já existe um arquivo ou diretório como o nome <span class='dialog-filename'>{0}</span>.",
     "ERROR_CREATING_FILE_TITLE"         : "Erro ao criar {0}",
     "ERROR_CREATING_FILE"               : "Ocorreu um erro ao tentar criar o {0} <span class='dialog-filename'>{1}</span>. {2}",
+    "ERROR_MIXED_DRAGDROP"              : "Não é possível abrir uma pasta e outros arquivos ao mesmo tempo.",
+
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Erro ao ler mapa de teclas do usuário",
+    "ERROR_KEYMAP_CORRUPT"              : "Seu arquivo de mapa de teclas não é um JSON válido. O arquivo será aberto para que você possa corrigir o formato.",
+    "ERROR_LOADING_KEYMAP"              : "Seu arquivo de mapa de teclas não é um arquivo de texto com codificação UTF-8 válida e não pode ser carregado",
+    "ERROR_RESTRICTED_COMMANDS"         : "Você não pode reatribuir atalhos para estes comandos: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "Você não pode reatribuir estes atalhos: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "Você está reatribuindo múltiplos atalhos para estes comandos: {0}",
+    "ERROR_DUPLICATE_SHORTCUTS"         : "Você tem múltiplos vínculos para estes atalhos: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "Estes atalhos são inválidos: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "Você está atribuindo atalhos para comandos não existentes: {0}",
 
     // Application preferences corrupt error strings
-    "ERROR_PREFS_CORRUPT_TITLE"         : "Erro ao ler preferências",
+    "ERROR_PREFS_CORRUPT_TITLE"         : "Erro ao ler as preferências",
     "ERROR_PREFS_CORRUPT"               : "Seu arquivo de preferências não é um JSON válido. O arquivo será aberto para que você possa corrigir o formato. Você deverá reiniciar o {APP_NAME} para as alterações terem efeito.",
 
     // Application error strings
@@ -83,7 +96,7 @@ define({
 
     // ProjectManager max files error string
     "ERROR_MAX_FILES_TITLE"             : "Erro ao indexar arquivos",
-    "ERROR_MAX_FILES"                   : "O número máximo de arquivos foi indexado. Ações que procuram no índice de arquivos podem funcionar incorretamente.",
+    "ERROR_MAX_FILES"                   : "Este projeto contém mais de 30.000 arquivos. Funcionalidades que operam em múltiplos arquivos podem ser desabilitadas ou se comportarem como se o projeto estivesse vazio. <a href='https://github.com/adobe/brackets/wiki/Large-Projects'>Leia mais sobre como trabalhar com grandes projetos</a>.",
 
     // Live Preview error strings
     "ERROR_LAUNCHING_BROWSER_TITLE"     : "Erro ao abrir o navegador",
@@ -93,7 +106,7 @@ define({
     "LIVE_DEVELOPMENT_ERROR_TITLE"      : "Erro no Live Preview",
     "LIVE_DEVELOPMENT_RELAUNCH_TITLE"   : "Conectando-se ao navegador",
     "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "Para que o Live Preview conecte-se, o Chrome deve ser reiniciado com a opção de depuração remota ativada.<br /><br />Gostaria de abrir o Chrome novamente e permitir a depuração remota?",
-    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Não foi possível carregar a página de Live Development",
+    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Não foi possível carregar a página de Live Preview",
     "LIVE_DEV_NEED_HTML_MESSAGE"        : "Abra um arquivo HTML para iniciar Live Preview.",
     "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "Para iniciar um live preview com um arquivo server-side, é preciso especificar uma URL Base para este projeto.",
     "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Erro ao iniciar o servidor HTTP para os arquivos do desenvolvimento em tempo real. Por favor, tente novamente.",
@@ -102,7 +115,7 @@ define({
     "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "Para mais informações, veja <a href='{0}' title='{0}'>Solucionando erros de conexão com Live Development</a>.",
 
     "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Live Preview",
-    "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Live Preview: Connectando\u2026",
+    "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Live Preview: Conectando\u2026",
     "LIVE_DEV_STATUS_TIP_PROGRESS2"     : "Live Preview: Inicializando\u2026",
     "LIVE_DEV_STATUS_TIP_CONNECTED"     : "Desconectar Live Preview",
     "LIVE_DEV_STATUS_TIP_OUT_OF_SYNC"   : "Live Preview (salve o arquivo para recarregar)",
@@ -116,7 +129,7 @@ define({
     "SAVE_CLOSE_TITLE"                  : "Salvar alterações",
     "SAVE_CLOSE_MESSAGE"                : "Você quer salvar as alterações feitas no documento <span class='dialog-filename'>{0}</span>?",
     "SAVE_CLOSE_MULTI_MESSAGE"          : "Você quer salvar as alterações feitas aos seguintes arquivos?",
-    "EXT_MODIFIED_TITLE"                : "Mudanças externas",
+    "EXT_MODIFIED_TITLE"                : "Alterações externas",
     "CONFIRM_FOLDER_DELETE_TITLE"       : "Confirmar exclusão",
     "CONFIRM_FOLDER_DELETE"             : "Tem certeza que deseja excluir a pasta <span class='dialog-filename'>{0}</span>?",
     "FILE_DELETED_TITLE"                : "Arquivo excluído",
@@ -150,15 +163,15 @@ define({
     "BUTTON_PREV_HINT"                  : "Resultado anterior",
     "BUTTON_CASESENSITIVE_HINT"         : "Diferenciar maiúsculas/minúsculas",
     "BUTTON_REGEXP_HINT"                : "Expressão regular",
-    "REPLACE_WITHOUT_UNDO_WARNING_TITLE": "Substituir sem Desfazer",
+    "REPLACE_WITHOUT_UNDO_WARNING_TITLE": "Substituir sem desfazer",
     "REPLACE_WITHOUT_UNDO_WARNING"      : "Porque mais de {0} arquivos precisam ser alterados, {APP_NAME} irá modificar arquivos não abertos no disco.<br />Não será possível desfazer as modificações nestes arquivos.",
-    "BUTTON_REPLACE_WITHOUT_UNDO"       : "Substituir sem Desfazer",
+    "BUTTON_REPLACE_WITHOUT_UNDO"       : "Substituir sem desfazer",
 
     "OPEN_FILE"                         : "Abrir arquivo",
     "SAVE_FILE_AS"                      : "Salvar arquivo",
     "CHOOSE_FOLDER"                     : "Escolha uma pasta",
 
-    "RELEASE_NOTES"                     : "Notas da Versão",
+    "RELEASE_NOTES"                     : "Notas da versão",
     "NO_UPDATE_TITLE"                   : "Você está atualizado!",
     "NO_UPDATE_MESSAGE"                 : "Você está executando a versão mais recente do {APP_NAME}.",
 
@@ -220,6 +233,23 @@ define({
     "UNTITLED"          : "Sem título",
     "WORKING_FILES"     : "Arquivos abertos",
 
+    /**
+     * MainViewManager
+     */
+    "TOP"               : "Início",
+    "BOTTOM"            : "Fim",
+    "LEFT"              : "Esquerda",
+    "RIGHT"             : "Direita",
+
+    "CMD_SPLITVIEW_NONE"        : "Sem divisão",
+    "CMD_SPLITVIEW_VERTICAL"    : "Divisão vertical",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "Divisão horizontal",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Divida o editor verticalmente ou horizontalmente",
+    "GEAR_MENU_TOOLTIP"         : "Configurar conjunto de trabalho",
+
+    "SPLITVIEW_INFO_TITLE"              : "Já está aberto",
+    "SPLITVIEW_MULTIPANE_WARNING"       : "O arquivo já está aberto em outro painel. {APP_NAME} em breve irá suportar a abertura de um mesmo arquivo em mais de um painel. Até lá, o arquivo será mostrado no painel onde já está aberto.<br /><br />(Você irá ver esta mensagem apenas uma vez.)",
+
     /**
      * Keyboard modifier names
      */
@@ -249,7 +279,7 @@ define({
     "STATUSBAR_OVERWRITE"                   : "OVR",
     "STATUSBAR_INSOVR_TOOLTIP"              : "Clique para alternar o cursor entre os modos Insert (INS) e Overwrite (OVR)",
     "STATUSBAR_LANG_TOOLTIP"                : "Clique para alterar o tipo de arquivo",
-    "STATUSBAR_CODE_INSPECTION_TOOLTIP"     : "{0}. Clique para abrir/fechar o painel de reatórios.",
+    "STATUSBAR_CODE_INSPECTION_TOOLTIP"     : "{0}. Clique para abrir/fechar o painel de relatórios.",
     "STATUSBAR_DEFAULT_LANG"                : "(padrão)",
     "STATUSBAR_SET_DEFAULT_LANG"            : "Definir como padrão para arquivos .{0}.",
 
@@ -276,7 +306,7 @@ define({
     "CMD_FILE_NEW"                        : "Novo arquivo",
     "CMD_FILE_NEW_FOLDER"                 : "Nova pasta",
     "CMD_FILE_OPEN"                       : "Abrir\u2026",
-    "CMD_ADD_TO_WORKING_SET"              : "Adicionar ao Conjunto de Trabalho",
+    "CMD_ADD_TO_WORKING_SET"              : "Adicionar ao conjunto de trabalho",
     "CMD_OPEN_DROPPED_FILES"              : "Abrir arquivos largados",
     "CMD_OPEN_FOLDER"                     : "Abrir pasta\u2026",
     "CMD_FILE_CLOSE"                      : "Fechar",
@@ -392,6 +422,7 @@ define({
     "CMD_TWITTER"                         : "{TWITTER_NAME} no Twitter",
     "CMD_ABOUT"                           : "Sobre o {APP_TITLE}",
     "CMD_OPEN_PREFERENCES"                : "Abrir arquivo de configurações",
+    "CMD_OPEN_KEYMAP"                     : "Abrir mapa de teclas do usuário",
 
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "versão experimental",
@@ -421,6 +452,7 @@ define({
     "BASEURL_ERROR_HASH_DISALLOWED"        : "A URL base não pode conter hashes como \"{0}\".",
     "BASEURL_ERROR_INVALID_CHAR"           : "Caracteres especiais como '{0}' devem ser codificados para URL encoding.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Erro desconhecido ao parsear URL base",
+    "EMPTY_VIEW_HEADER"                    : "<em>Abra um arquivo enquanto este painel possui o foco</em>",
     
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Tema atual",
@@ -517,13 +549,14 @@ define({
     "EXTENSION_NOT_INSTALLED"              : "Não foi possível remover a extensão {0} porque ela não estava instalada.",
     "NO_EXTENSIONS"                        : "Nenhuma extensão instalada ainda.<br>Clique na aba Disponíveis acima para começar.",
     "NO_EXTENSION_MATCHES"                 : "Nenhuma extensão corresponde à sua pesquisa.",
-    "REGISTRY_SANITY_CHECK_WARNING"        : "Tenha cuidado ao instalar extensões de fontes desconhecidas.",
+    "REGISTRY_SANITY_CHECK_WARNING"        : "NOTA: Estas extensões podem vir de diferentes autores e não do próprio {APP_NAME}. Extensões não são revisadas e tem prilégios locais totais. Tenha cuidado ao instalar extensões de fontes desconhecidas.",
     "EXTENSIONS_INSTALLED_TITLE"           : "Instaladas",
     "EXTENSIONS_AVAILABLE_TITLE"           : "Disponíveis",
     "EXTENSIONS_THEMES_TITLE"              : "Temas",
     "EXTENSIONS_UPDATES_TITLE"             : "Atualizações",
     
-    "INLINE_EDITOR_NO_MATCHES"             : "Nenhuma correspondência.",
+    "INLINE_EDITOR_NO_MATCHES"             : "Nenhum resultado.",
+    "INLINE_EDITOR_HIDDEN_MATCHES"         : "Todas as correspondências foram ocultadas. Expanda os arquivos listados na direita para ver os resultados.",
     "CSS_QUICK_EDIT_NO_MATCHES"            : "Nenhuma regra CSS corresponde à sua seleção.<br> Clique em \"Nova regra\" para criar uma.",
     "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "Seu projeto não tem uma folha de estilos.<br>Crie uma para adicionar regras CSS.",
 
@@ -539,7 +572,7 @@ define({
     // extensions/default/DebugCommands
     "DEBUG_MENU"                                : "Depurar",
     "ERRORS"                                    : "Erros",
-    "CMD_SHOW_DEV_TOOLS"                        : "Mostrar Ferramentas do Desenvolvedor",
+    "CMD_SHOW_DEV_TOOLS"                        : "Mostrar ferramentas do desenvolvedor",
     "CMD_REFRESH_WINDOW"                        : "Recarregar com extensões",
     "CMD_RELOAD_WITHOUT_USER_EXTS"              : "Recarregar sem extensões",
     "CMD_NEW_BRACKETS_WINDOW"                   : "Nova janela do {APP_NAME}",
@@ -550,6 +583,7 @@ define({
     "CMD_LOG_NODE_STATE"                        : "Registrar estado do Node no console",
     "CMD_RESTART_NODE"                          : "Reiniciar Node",
     "CMD_SHOW_ERRORS_IN_STATUS_BAR"             : "Mostrar erros na barra de status",
+    "CMD_OPEN_BRACKETS_SOURCE"                  : "Abrir local do Brackets",
     
     "LANGUAGE_TITLE"                            : "Alterar idioma",
     "LANGUAGE_MESSAGE"                          : "Idioma:",
@@ -578,7 +612,7 @@ define({
     "CMD_SHOW_PARAMETER_HINT"                   : "Mostrar dicas de parâmetro",
     "NO_ARGUMENTS"                              : "<nenhum parâmetro>",
     "DETECTED_EXCLUSION_TITLE"                  : "Problema de inferência de arquivo JavaScript",
-    "DETECTED_EXCLUSION_INFO"                   : "Brackets enfrentou um problema ao processar:<br><br>{0}<br><br>Este arquivo não será mais processado para dicas de código e definições. Para reverter, abra <code>.brackets.json</code> em seu projeto e remova o arquivo de jscodehints.detectedExclusions.",
+    "DETECTED_EXCLUSION_INFO"                   : "Brackets enfrentou um problema ao processar: <span class='dialog-filename'>{0}</span>.<br><br>Este arquivo não será mais processado para dicas de código, definições ou edição rápida. Para reverter, abra <code>.brackets.json</code> em seu projeto e edite <code>jscodehints.detectedExclusions</code>.<br><br>Este provavelmente é um bug do Brackets. Se você pode fornecer uma cópia deste arquivo, por favor <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>registre um bug</a> com um link para o arquivo mencionado aqui.",
     
     // extensions/default/JSLint
     "JSLINT_NAME"                               : "JSLint",
@@ -591,4 +625,5 @@ define({
     
     // extensions/default/WebPlatformDocs
     "DOCS_MORE_LINK"                            : "Leia mais"
-});
\ No newline at end of file
+});
+/* Last translated for 0b949dd02b87866d54f38631715a4353a8f927e5 */
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
index 784e6d97eb0..fd0b1e76350 100644
--- a/src/nls/root/strings.js
+++ b/src/nls/root/strings.js
@@ -25,7 +25,7 @@
 /*global define */
 
 define({
-    
+
     /**
      * Errors
      */
@@ -48,7 +48,6 @@ define({
     "FILENAMES_LEDE"                    : "Filenames",
     "FILENAME"                          : "Filename",
     "DIRECTORY_NAME"                    : "Directory Name",
-    
 
     // Project error strings
     "ERROR_LOADING_PROJECT"             : "Error Loading Project",
@@ -75,6 +74,17 @@ define({
     "ERROR_CREATING_FILE"               : "An error occurred when trying to create the {0} <span class='dialog-filename'>{1}</span>. {2}",
     "ERROR_MIXED_DRAGDROP"              : "Cannot open a folder at the same time as opening other files.",
 
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Error Reading User Key Map",
+    "ERROR_KEYMAP_CORRUPT"              : "Your key map file is not valid JSON. The file will be opened so that you can correct the format.",
+    "ERROR_LOADING_KEYMAP"              : "Your key map file is not a valid UTF-8 encoded text file and cannot be loaded",
+    "ERROR_RESTRICTED_COMMANDS"         : "You cannot reassign shortcuts to these commands: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "You cannot reassign these shortcuts: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "You are reassigning multiple shortcuts to these commands: {0}",
+    "ERROR_DUPLICATE_SHORTCUTS"         : "You have multiple bindings of these shortcuts: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "These shortcuts are invalid: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "You are assigning shortcuts to nonexistent commands: {0}",
+
     // Application preferences corrupt error strings
     "ERROR_PREFS_CORRUPT_TITLE"         : "Error Reading Preferences",
     "ERROR_PREFS_CORRUPT"               : "Your preferences file is not valid JSON. The file will be opened so that you can correct the format. You will need to restart {APP_NAME} for the changes to take effect.",
@@ -82,7 +92,7 @@ define({
     // Application error strings
     "ERROR_IN_BROWSER_TITLE"            : "Oops! {APP_NAME} Doesn't Run in Browsers Yet.",
     "ERROR_IN_BROWSER"                  : "{APP_NAME} is built in HTML, but right now it runs as a desktop app so you can use it to edit local files. Please use the application shell in the <b>github.com/adobe/brackets-shell</b> repo to run {APP_NAME}.",
-    
+
     // ProjectManager max files error string
     "ERROR_MAX_FILES_TITLE"             : "Error Indexing Files",
     "ERROR_MAX_FILES"                   : "This project contains more than 30,000 files. Features that operate across multiple files may be disabled or behave as if the project is empty. <a href='https://github.com/adobe/brackets/wiki/Large-Projects'>Read more about working with large projects</a>.",
@@ -91,7 +101,7 @@ define({
     "ERROR_LAUNCHING_BROWSER_TITLE"     : "Error Launching Browser",
     "ERROR_CANT_FIND_CHROME"            : "The Google Chrome browser could not be found. Please make sure it is installed.",
     "ERROR_LAUNCHING_BROWSER"           : "An error occurred when launching the browser. (error {0})",
-    
+
     "LIVE_DEVELOPMENT_ERROR_TITLE"      : "Live Preview Error",
     "LIVE_DEVELOPMENT_RELAUNCH_TITLE"   : "Connecting to Browser",
     "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "In order for Live Preview to connect, Chrome needs to be relaunched with remote debugging enabled.<br /><br />Would you like to relaunch Chrome and enable remote debugging?<br /><br />",
@@ -102,7 +112,7 @@ define({
     "LIVE_DEVELOPMENT_INFO_TITLE"       : "Welcome to Live Preview!",
     "LIVE_DEVELOPMENT_INFO_MESSAGE"     : "Live Preview connects {APP_NAME} to your browser. It launches a preview of your HTML file in the browser, then updates the preview instantly as you edit your code.<br /><br />In this early version of {APP_NAME}, Live Preview only works with <strong>Google Chrome</strong> and updates live as you edit <strong>CSS or HTML files</strong>. Changes to JavaScript files are automatically reloaded when you save.<br /><br />(You'll only see this message once.)",
     "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "For more information, see <a href='{0}' title='{0}'>Troubleshooting Live Preview connection errors</a>.",
-    
+
     "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Live Preview",
     "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Live Preview: Connecting\u2026",
     "LIVE_DEV_STATUS_TIP_PROGRESS2"     : "Live Preview: Initializing\u2026",
@@ -114,7 +124,7 @@ define({
     "LIVE_DEV_DETACHED_TARGET_CLOSED"          : "Live Preview was cancelled because the page was closed in the browser",
     "LIVE_DEV_NAVIGATED_AWAY"                  : "Live Preview was cancelled because the browser navigated to a page that is not part of the current project",
     "LIVE_DEV_CLOSED_UNKNOWN_REASON"           : "Live Preview was cancelled for an unknown reason ({0})",
-    
+
     "SAVE_CLOSE_TITLE"                  : "Save Changes",
     "SAVE_CLOSE_MESSAGE"                : "Do you want to save the changes you made in the document <span class='dialog-filename'>{0}</span>?",
     "SAVE_CLOSE_MULTI_MESSAGE"          : "Do you want to save your changes to the following files?",
@@ -125,7 +135,7 @@ define({
     "EXT_MODIFIED_WARNING"              : "<span class='dialog-filename'>{0}</span> has been modified on disk.<br /><br />Do you want to save the file and overwrite those changes?",
     "EXT_MODIFIED_MESSAGE"              : "<span class='dialog-filename'>{0}</span> has been modified on disk, but also has unsaved changes in {APP_NAME}.<br /><br />Which version do you want to keep?",
     "EXT_DELETED_MESSAGE"               : "<span class='dialog-filename'>{0}</span> has been deleted on disk, but has unsaved changes in {APP_NAME}.<br /><br />Do you want to keep your changes?",
-    
+
     // Generic dialog/button labels
     "DONE"                              : "Done",
     "OK"                                : "OK",
@@ -137,7 +147,7 @@ define({
     "DELETE"                            : "Delete",
     "BUTTON_YES"                        : "Yes",
     "BUTTON_NO"                         : "No",
-    
+
     // Find, Replace, Find in Files
     "FIND_MATCH_INDEX"                  : "{0} of {1}",
     "FIND_NO_RESULTS"                   : "No results",
@@ -185,10 +195,10 @@ define({
     "FIND_IN_FILES_EXPAND_COLLAPSE"     : "Ctrl/Cmd click to expand/collapse all",
     "REPLACE_IN_FILES_ERRORS_TITLE"     : "Replace Errors",
     "REPLACE_IN_FILES_ERRORS"           : "The following files weren't modified because they changed after the search or couldn't be written.",
-    
+
     "ERROR_FETCHING_UPDATE_INFO_TITLE"  : "Error Getting Update Info",
     "ERROR_FETCHING_UPDATE_INFO_MSG"    : "There was a problem getting the latest update information from the server. Please make sure you are connected to the internet and try again.",
-    
+
     // File exclusion filters
     "NEW_FILE_FILTER"                   : "New Exclusion Set\u2026",
     "CLEAR_FILE_FILTER"                 : "Don't Exclude Files",
@@ -245,7 +255,7 @@ define({
     "KEYBOARD_CTRL"   : "Ctrl",
     "KEYBOARD_SHIFT"  : "Shift",
     "KEYBOARD_SPACE"  : "Space",
-    
+
     /**
      * StatusBar strings
      */
@@ -283,12 +293,11 @@ define({
     "NOTHING_TO_LINT"                       : "Nothing to lint",
     "LINTER_TIMED_OUT"                      : "{0} has timed out after waiting for {1} ms",
     "LINTER_FAILED"                         : "{0} terminated with error: {1}",
-    
-    
+
     /**
      * Command Name Constants
      */
- 
+
     // File menu commands
     "FILE_MENU"                           : "File",
     "CMD_FILE_NEW_UNTITLED"               : "New",
@@ -343,7 +352,7 @@ define({
     "CMD_OPEN_LINE_BELOW"                 : "Open Line Below",
     "CMD_TOGGLE_CLOSE_BRACKETS"           : "Auto Close Braces",
     "CMD_SHOW_CODE_HINTS"                 : "Show Code Hints",
-    
+
     // Search menu commands
     "FIND_MENU"                           : "Find",
     "CMD_FIND"                            : "Find",
@@ -359,7 +368,7 @@ define({
     "CMD_REPLACE_IN_FILES"                : "Replace in Files",
     "CMD_REPLACE_IN_SELECTED"             : "Replace in Selected File/Folder",
     "CMD_REPLACE_IN_SUBTREE"              : "Replace in\u2026",
-    
+
     // View menu commands
     "VIEW_MENU"                           : "View",
     "CMD_HIDE_SIDEBAR"                    : "Hide Sidebar",
@@ -397,7 +406,7 @@ define({
     "CMD_SHOW_IN_EXPLORER"                : "Show in Explorer",
     "CMD_SHOW_IN_FINDER"                  : "Show in Finder",
     "CMD_SHOW_IN_OS"                      : "Show in OS",
-    
+
     // Help menu commands
     "HELP_MENU"                           : "Help",
     "CMD_CHECK_FOR_UPDATE"                : "Check for Updates",
@@ -411,9 +420,11 @@ define({
     "CMD_TWITTER"                         : "{TWITTER_NAME} on Twitter",
     "CMD_ABOUT"                           : "About {APP_TITLE}",
     "CMD_OPEN_PREFERENCES"                : "Open Preferences File",
+    "CMD_OPEN_KEYMAP"                     : "Open User Key Map",
 
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "experimental build",
+    "RELEASE_BUILD"                        : "build",
     "DEVELOPMENT_BUILD"                    : "development build",
     "RELOAD_FROM_DISK"                     : "Reload from Disk",
     "KEEP_CHANGES_IN_EDITOR"               : "Keep Changes in Editor",
@@ -441,7 +452,7 @@ define({
     "BASEURL_ERROR_INVALID_CHAR"           : "Special characters like '{0}' must be %-encoded.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Unknown error parsing Base URL",
     "EMPTY_VIEW_HEADER"                    : "<em>Open a file while this pane has focus</em>",
-    
+
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Current Theme",
     "USE_THEME_SCROLLBARS"                 : "Use Theme Scrollbars",
@@ -451,7 +462,7 @@ define({
 
     // CSS Quick Edit
     "BUTTON_NEW_RULE"                      : "New Rule",
-    
+
     // Extension Management strings
     "INSTALL"                              : "Install",
     "UPDATE"                               : "Update",
@@ -542,14 +553,15 @@ define({
     "EXTENSIONS_AVAILABLE_TITLE"           : "Available",
     "EXTENSIONS_THEMES_TITLE"              : "Themes",
     "EXTENSIONS_UPDATES_TITLE"             : "Updates",
-    
+
     "INLINE_EDITOR_NO_MATCHES"             : "No matches available.",
+    "INLINE_EDITOR_HIDDEN_MATCHES"         : "All matches are collapsed. Expand the files listed at right to view matches.",
     "CSS_QUICK_EDIT_NO_MATCHES"            : "There are no existing CSS rules that match your selection.<br> Click \"New Rule\" to create one.",
     "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "There are no stylesheets in your project.<br>Create one to add CSS rules.",
 
     // Custom Viewers
     "IMAGE_VIEWER_LARGEST_ICON"            : "largest",
-    
+
     /**
      * Unit names
      */
@@ -571,20 +583,20 @@ define({
     "CMD_RESTART_NODE"                          : "Restart Node",
     "CMD_SHOW_ERRORS_IN_STATUS_BAR"             : "Show Errors in Status Bar",
     "CMD_OPEN_BRACKETS_SOURCE"                  : "Open Brackets Source",
-    
+
     "LANGUAGE_TITLE"                            : "Switch Language",
     "LANGUAGE_MESSAGE"                          : "Language:",
     "LANGUAGE_SUBMIT"                           : "Reload {APP_NAME}",
     "LANGUAGE_CANCEL"                           : "Cancel",
     "LANGUAGE_SYSTEM_DEFAULT"                   : "System Default",
-    
+
     // extensions/default/InlineTimingFunctionEditor
     "INLINE_TIMING_EDITOR_TIME"                 : "Time",
     "INLINE_TIMING_EDITOR_PROGRESSION"          : "Progression",
     "BEZIER_EDITOR_INFO"                        : "<kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> Move selected point<br><kbd class='text'>Shift</kbd> Move by ten units<br><kbd class='text'>Tab</kbd> Switch points",
     "STEPS_EDITOR_INFO"                         : "<kbd>↑</kbd><kbd>↓</kbd> Increase or decrease steps<br><kbd>←</kbd><kbd>→</kbd> 'Start' or 'End'",
     "INLINE_TIMING_EDITOR_INVALID"              : "The old value <code>{0}</code> is not valid, so the displayed function was changed to <code>{1}</code>. The document will be updated with the first edit.",
-    
+
     // extensions/default/InlineColorEditor
     "COLOR_EDITOR_CURRENT_COLOR_SWATCH_TIP"     : "Current Color",
     "COLOR_EDITOR_ORIGINAL_COLOR_SWATCH_TIP"    : "Original Color",
@@ -593,23 +605,23 @@ define({
     "COLOR_EDITOR_HSLA_BUTTON_TIP"              : "HSLa Format",
     "COLOR_EDITOR_USED_COLOR_TIP_SINGULAR"      : "{0} (Used {1} time)",
     "COLOR_EDITOR_USED_COLOR_TIP_PLURAL"        : "{0} (Used {1} times)",
-    
+
     // extensions/default/JavaScriptCodeHints
     "CMD_JUMPTO_DEFINITION"                     : "Jump to Definition",
     "CMD_SHOW_PARAMETER_HINT"                   : "Show Parameter Hint",
     "NO_ARGUMENTS"                              : "<no parameters>",
     "DETECTED_EXCLUSION_TITLE"                  : "JavaScript File Inference Problem",
     "DETECTED_EXCLUSION_INFO"                   : "Brackets ran into trouble processing <span class='dialog-filename'>{0}</span>.<br><br>This file will no longer be processed for code hints, Jump to Definition or Quick Edit. To reenable this file, open <code>.brackets.json</code> in your project and edit <code>jscodehints.detectedExclusions</code>.<br><br>This is likely a Brackets bug. If you can provide a copy of this file, please <a href='https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue'>file a bug</a> with a link to the file named here.",
-    
+
     // extensions/default/JSLint
     "JSLINT_NAME"                               : "JSLint",
-    
+
     // extensions/default/QuickView
     "CMD_ENABLE_QUICK_VIEW"                     : "Quick View on Hover",
-    
+
     // extensions/default/RecentProjects
     "CMD_TOGGLE_RECENT_PROJECTS"                : "Recent Projects",
-    
+
     // extensions/default/WebPlatformDocs
     "DOCS_MORE_LINK"                            : "Read more"
 });
diff --git a/src/nls/strings-app.js b/src/nls/strings-app.js
index 92f0b7c83e7..7adad1099e6 100644
--- a/src/nls/strings-app.js
+++ b/src/nls/strings-app.js
@@ -25,9 +25,9 @@
 /*global define */
 
 define(function (require, exports, module) {
-    
+
     "use strict";
-    
+
     // Code that needs to display user strings should call require("strings") to load
     // src/strings.js. This file will dynamically load strings.js for the specified brackets.locale.
     //
diff --git a/src/nls/sv/strings.js b/src/nls/sv/strings.js
index d78d05f9b61..ea109272098 100644
--- a/src/nls/sv/strings.js
+++ b/src/nls/sv/strings.js
@@ -34,6 +34,7 @@ define({
     "GENERIC_ERROR"                     : "(fel {0})",
     "NOT_FOUND_ERR"                     : "Filen kunde inte hittas.",
     "NOT_READABLE_ERR"                  : "Filen kunde inte läsas.",
+    "EXCEEDS_MAX_FILE_SIZE"             : "Filer större än {0} MB kan inte öppnas i {APP_NAME}.",
     "NO_MODIFICATION_ALLOWED_ERR"       : "Målmappen kunde inte ändras.",
     "NO_MODIFICATION_ALLOWED_ERR_FILE"  : "Du har inte behörighet att modifiera filen.",
     "CONTENTS_MODIFIED_ERR"             : "Filen har ändrats utanför {APP_NAME}.",
@@ -51,7 +52,7 @@ define({
 
     // Project error strings
     "ERROR_LOADING_PROJECT"             : "Projektet kunde inte öppnas",
-    "OPEN_DIALOG_ERROR"                 : "Ett fel inträffade när öppna-dialogen skulle visas. (fel {0})",
+    "OPEN_DIALOG_ERROR"                 : "Ett fel inträffade när öppningsdialogen skulle visas. (fel {0})",
     "REQUEST_NATIVE_FILE_SYSTEM_ERROR"  : "Ett fel inträffade när mappen skulle öppnas <span class='dialog-filename'>{0}</span>. (fel {1})",
     "READ_DIRECTORY_ENTRIES_ERROR"      : "Ett fel inträffade när mappens innehåll skulle läsas <span class='dialog-filename'>{0}</span>. (fel {1})",
 
@@ -64,14 +65,26 @@ define({
     "ERROR_SAVING_FILE_TITLE"           : "Filen kunde inte sparas",
     "ERROR_SAVING_FILE"                 : "Ett fel inträffade när filen <span class='dialog-filename'>{0}</span> skulle sparas. {1}",
     "ERROR_RENAMING_FILE_TITLE"         : "Filen kunde inte döpas om",
-    "ERROR_RENAMING_FILE"               : "Ett fel uppstod när filen <span class='dialog-filename'>{0}</span> skulle döpas om. {1}",
+    "ERROR_RENAMING_FILE"               : "Ett fel uppstod när {2}-filen <span class='dialog-filename'>{0}</span> skulle döpas om. {1}",
     "ERROR_DELETING_FILE_TITLE"         : "Filen kunde inte raderas",
-    "ERROR_DELETING_FILE"               : "Ett fel uppstod när filen <span class='dialog-filename'>{0}</span> skulle tas bort. {1}",
-    "INVALID_FILENAME_TITLE"            : "Ogiltigt filnamn",
-    "INVALID_FILENAME_MESSAGE"          : "Filnamn får inte innehålla följande tecken: {0} eller innehålla ord som reserverats av systemet.",
+    "ERROR_DELETING_FILE"               : "Ett fel uppstod när {2}-filen <span class='dialog-filename'>{0}</span> skulle tas bort. {1}",
+    "INVALID_FILENAME_TITLE"            : "Ogiltigt {0}",
+    "INVALID_FILENAME_MESSAGE"          : "{0} får inte innehålla ord som reserverats av systemet, sluta med punkt (.) eller använda något av följande tecken: <code class='emphasized'>{1}</code>.",
     "ENTRY_WITH_SAME_NAME_EXISTS"       : "En fil eller mapp med namnet <span class='dialog-filename'>{0}</span> existerar redan.",
-    "ERROR_CREATING_FILE_TITLE"         : "Filen {0} kunde inte skapas",
-    "ERROR_CREATING_FILE"               : "Ett fel uppstod när {0} <span class='dialog-filename'>{1}</span> skulle skapas. {2}",
+    "ERROR_CREATING_FILE_TITLE"         : "Kunde inte skapa {0}",
+    "ERROR_CREATING_FILE"               : "Ett fel uppstod när en {0} med namnet <span class='dialog-filename'>{1}</span> skulle skapas. {2}",
+    "ERROR_MIXED_DRAGDROP"              : "Kan inte öppna en mapp samtidigt som andra filer öppnas.",
+
+    // User key map error strings
+    "ERROR_KEYMAP_TITLE"                : "Fel uppstod när användarens tangentuppsättning lästes in",
+    "ERROR_KEYMAP_CORRUPT"              : "Din tangentuppsättningsfil är inte korrekt formaterad JSON. Filen kommer att öppnas så att du kan åtgärda formateringsfelet.",
+    "ERROR_LOADING_KEYMAP"              : "Din tangentuppsättningsfil är inte en UTF-8-kodad textfil och kan inte läsas",
+    "ERROR_RESTRICTED_COMMANDS"         : "Du kan inte ändra kortkommandot för följande kommandon: {0}",
+    "ERROR_RESTRICTED_SHORTCUTS"        : "Du kan inte ändra följande kortkommandon: {0}",
+    "ERROR_MULTIPLE_SHORTCUTS"          : "Du håller på att koppla flera kortkommandon till följande kommandon: {0}",
+    "ERROR_DUPLICATE_SHORTCUTS"         : "Du har flera kopplingar till följande kommandon: {0}",
+    "ERROR_INVALID_SHORTCUTS"           : "Följande kortkommandon är felaktiga: {0}",
+    "ERROR_NONEXISTENT_COMMANDS"        : "Du håller på att skapa kortkommandon till följande icke-existerande kommandon: {0}",
 
     // Application preferences corrupt error strings
     "ERROR_PREFS_CORRUPT_TITLE"         : "Kunde inte läsa inställningar",
@@ -137,8 +150,7 @@ define({
     "BUTTON_NO"                         : "Nej",
     
     // Find, Replace, Find in Files
-    "FIND_RESULT_COUNT"                 : "{0} träffar",
-    "FIND_RESULT_COUNT_SINGLE"          : "1 träff",
+    "FIND_MATCH_INDEX"                  : "{0} av {1}",
     "FIND_NO_RESULTS"                   : "Inga träffar",
     "FIND_QUERY_PLACEHOLDER"            : "Sök\u2026",
     "REPLACE_PLACEHOLDER"               : "Ersätt med\u2026",
@@ -221,6 +233,23 @@ define({
     "UNTITLED"          : "Namnlös",
     "WORKING_FILES"     : "Öppna filer",
 
+    /**
+     * MainViewManager
+     */
+    "TOP"               : "Övre",
+    "BOTTOM"            : "Undre",
+    "LEFT"              : "Vänster",
+    "RIGHT"             : "Höger",
+
+    "CMD_SPLITVIEW_NONE"        : "Ingen delning",
+    "CMD_SPLITVIEW_VERTICAL"    : "Vertikal delning",
+    "CMD_SPLITVIEW_HORIZONTAL"  : "Horisontell delning",
+    "SPLITVIEW_MENU_TOOLTIP"    : "Dela editorn vertikalt eller horisontellt",
+    "GEAR_MENU_TOOLTIP"         : "Konfigurera arbetsyta",
+
+    "SPLITVIEW_INFO_TITLE"              : "Redan öppen",
+    "SPLITVIEW_MULTIPANE_WARNING"       : "Filen är redan öppen i en annan panel. {APP_NAME} kommer inom kort att stödja möjligheten att öppna samma fil i flera paneler. Filen kommer att visas i nuvarande panel tills dess.<br /><br />(Detta meddelande kommer bara att visas en gång.)",
+
     /**
      * Keyboard modifier names
      */
@@ -248,7 +277,11 @@ define({
     "STATUSBAR_USER_EXTENSIONS_DISABLED"    : "Tillägg har avaktiverats",
     "STATUSBAR_INSERT"                      : "INS",
     "STATUSBAR_OVERWRITE"                   : "ÖVR",
+    "STATUSBAR_INSOVR_TOOLTIP"              : "Klicka för att växla mellan Insert (INS)- och Overwrite (OVR)-läge.",
+    "STATUSBAR_LANG_TOOLTIP"                : "Klicka för att byta filtyp",
+    "STATUSBAR_CODE_INSPECTION_TOOLTIP"     : "{0}. Klicka för att visa rapportpanel.",
     "STATUSBAR_DEFAULT_LANG"                : "(standard)",
+    "STATUSBAR_SET_DEFAULT_LANG"            : "Ställ in som standard för .{0}-filer",
 
     // CodeInspection: errors/warnings
     "ERRORS_PANEL_TITLE_MULTIPLE"           : "{0} fel",
@@ -352,10 +385,10 @@ define({
     "CMD_TOGGLE_WORD_WRAP"                : "Automatisk radbrytning",
     "CMD_LIVE_HIGHLIGHT"                  : "Markera förhandsvisning",
     "CMD_VIEW_TOGGLE_INSPECTION"          : "Linta filer vid spara",
-    "CMD_SORT_WORKINGSET_BY_ADDED"        : "Sortera efter senast tillagd",
-    "CMD_SORT_WORKINGSET_BY_NAME"         : "Sortera efter namn",
-    "CMD_SORT_WORKINGSET_BY_TYPE"         : "Sortera efter typ",
-    "CMD_SORT_WORKINGSET_AUTO"            : "Automatisk sortering",
+    "CMD_WORKINGSET_SORT_BY_ADDED"        : "Sortera efter senast tillagd",
+    "CMD_WORKINGSET_SORT_BY_NAME"         : "Sortera efter namn",
+    "CMD_WORKINGSET_SORT_BY_TYPE"         : "Sortera efter typ",
+    "CMD_WORKING_SORT_TOGGLE_AUTO"        : "Automatisk sortering",
     "CMD_THEMES"                          : "Teman\u2026",
 
     // Navigate menu Commands
@@ -389,9 +422,11 @@ define({
     "CMD_TWITTER"                         : "{TWITTER_NAME} på Twitter",
     "CMD_ABOUT"                           : "Om {APP_TITLE}",
     "CMD_OPEN_PREFERENCES"                : "Öppna inställningsfil",
+    "CMD_OPEN_KEYMAP"                     : "Öppna användarens tangentuppsättning",
 
     // Strings for main-view.html
     "EXPERIMENTAL_BUILD"                   : "experimental build",
+    "RELEASE_BUILD"                        : "build",
     "DEVELOPMENT_BUILD"                    : "development build",
     "RELOAD_FROM_DISK"                     : "Ladda om",
     "KEEP_CHANGES_IN_EDITOR"               : "Behåll ändringar i editorn",
@@ -418,12 +453,14 @@ define({
     "BASEURL_ERROR_HASH_DISALLOWED"        : "Adressen kan inte innehålla hashar som \"{0}\".",
     "BASEURL_ERROR_INVALID_CHAR"           : "Specialtecken som '{0}' måste vara %-kodade.",
     "BASEURL_ERROR_UNKNOWN_ERROR"          : "Okänt fel när adressen skulle läsas!",
+    "EMPTY_VIEW_HEADER"                    : "<em>Öppna en fil medan denna panel är i fokus</em>",
     
     // Strings for themes-settings.html and themes-general.html
     "CURRENT_THEME"                        : "Nuvarande tema",
     "USE_THEME_SCROLLBARS"                 : "Använd temats scrollbars",
     "FONT_SIZE"                            : "Teckenstorlek",
     "FONT_FAMILY"                          : "Typsnitt",
+    "THEMES_SETTINGS"                      : "Temainställningar",
 
     // CSS Quick Edit
     "BUTTON_NEW_RULE"                      : "Ny regel",
@@ -516,9 +553,11 @@ define({
     "REGISTRY_SANITY_CHECK_WARNING"        : "Var försiktig när du installerar tillägg från okända källor.",
     "EXTENSIONS_INSTALLED_TITLE"           : "Installerade",
     "EXTENSIONS_AVAILABLE_TITLE"           : "Tillgängliga",
+    "EXTENSIONS_THEMES_TITLE"              : "Teman",
     "EXTENSIONS_UPDATES_TITLE"             : "Uppdateringar",
     
     "INLINE_EDITOR_NO_MATCHES"             : "Inga träffar tillgängliga.",
+    "INLINE_EDITOR_HIDDEN_MATCHES"         : "Alla träffar är minimerade. Expandera filerna listade till höger för att visa träffar.",
     "CSS_QUICK_EDIT_NO_MATCHES"            : "Det finns inga CSS-regler som matchar din markering.<br> Klicka på \"Ny regel\" för att skapa en.",
     "CSS_QUICK_EDIT_NO_STYLESHEETS"        : "Det finns inga stilmallar i ditt projekt.<br>Skapa en flr att lägga till CSS-regler.",
 
@@ -545,6 +584,7 @@ define({
     "CMD_LOG_NODE_STATE"                        : "Skriv ut Node-status till konsollen",
     "CMD_RESTART_NODE"                          : "Starta om Node",
     "CMD_SHOW_ERRORS_IN_STATUS_BAR"             : "Visa fel i statusraden",
+    "CMD_OPEN_BRACKETS_SOURCE"                  : "Öppna Brackets källkod",
     
     "LANGUAGE_TITLE"                            : "Byt språk",
     "LANGUAGE_MESSAGE"                          : "Språk:",
@@ -588,4 +628,4 @@ define({
     "DOCS_MORE_LINK"                            : "Läs mer"
 });
 
-/* Last translated for 2f5acd9c6fb21330cad0dae16e26bf659859583e */
+/* Last translated for 893c065b715c211526dcd010c0294e12a8683995 */
diff --git a/src/nls/urls.js b/src/nls/urls.js
index 67ec41069e3..ec0c4637813 100644
--- a/src/nls/urls.js
+++ b/src/nls/urls.js
@@ -25,9 +25,9 @@
 /*global define */
 
 define(function (require, exports, module) {
-    
+
     "use strict";
-    
+
     // Registry for languages that have specific per-language URLs or file paths that we use
     // elsewhere in Brackets.
     //
@@ -38,7 +38,7 @@ define(function (require, exports, module) {
         "da": true,
         "de": true,
         "es": true,
-		"fa-ir": true,
+        "fa-ir": true,
         "fi": true,
         "fr": true,
         "hr": true,
diff --git a/src/project/FileTreeView.js b/src/project/FileTreeView.js
index fe43d2dcfc9..6a1794403c8 100644
--- a/src/project/FileTreeView.js
+++ b/src/project/FileTreeView.js
@@ -143,7 +143,7 @@ define(function (require, exports, module) {
             this.props.actions.setRenameValue(this.refs.name.getDOMNode().value.trim());
 
             if (e.keyCode !== KeyEvent.DOM_VK_LEFT &&
-                e.keyCode !== KeyEvent.DOM_VK_RIGHT) {
+                    e.keyCode !== KeyEvent.DOM_VK_RIGHT) {
                 // update the width of the input field
                 var domNode = this.refs.name.getDOMNode(),
                     newWidth = _measureText(domNode.value);
@@ -777,19 +777,9 @@ define(function (require, exports, module) {
      * Props:
      * * selectionViewInfo: Immutable.Map with width, scrollTop, scrollLeft and offsetTop for the tree container
      * * visible: should this be visible now
-     * * widthAdjustment: if this box should not fill the entire width, pass in a positive number here which is subtracted from the width in selectionViewInfo
+     * * selectedClassName: class name applied to the element that is selected
      */
     var fileSelectionBox = React.createClass({
-
-        /**
-         * Sets up initial state.
-         */
-        getInitialState: function () {
-            return {
-                initialScroll: 0
-            };
-        },
-
         /**
          * When the component has updated in the DOM, reposition it to where the currently
          * selected node is located now.
@@ -813,7 +803,7 @@ define(function (require, exports, module) {
         render: function () {
             var selectionViewInfo = this.props.selectionViewInfo,
                 left = selectionViewInfo.get("scrollLeft"),
-                width = selectionViewInfo.get("width") - this.props.widthAdjustment,
+                width = selectionViewInfo.get("width"),
                 scrollWidth = selectionViewInfo.get("scrollWidth");
 
             // Avoid endless horizontal scrolling
@@ -832,6 +822,79 @@ define(function (require, exports, module) {
             });
         }
     });
+    
+    /**
+     * On Windows and Linux, the selection bar in the tree does not extend over the scroll bar.
+     * The selectionExtension sits on top of the scroll bar to make the selection bar appear to span the
+     * whole width of the sidebar.
+     *
+     * Props:
+     * * selectionViewInfo: Immutable.Map with width, scrollTop, scrollLeft and offsetTop for the tree container
+     * * visible: should this be visible now
+     * * selectedClassName: class name applied to the element that is selected
+     * * className: class to be applied to the extension element
+     */
+    var selectionExtension = React.createClass({
+        /**
+         * When the component has updated in the DOM, reposition it to where the currently
+         * selected node is located now.
+         */
+        componentDidUpdate: function () {
+            if (!this.props.visible) {
+                return;
+            }
+
+            var node = this.getDOMNode(),
+                selectedNode = $(node.parentNode).find(this.props.selectedClassName),
+                selectionViewInfo = this.props.selectionViewInfo;
+
+            if (selectedNode.length === 0) {
+                return;
+            }
+
+            var top = selectedNode.offset().top,
+                baselineHeight = node.dataset.initialHeight,
+                height = baselineHeight,
+                scrollerTop = selectionViewInfo.get("offsetTop");
+
+            if (!baselineHeight) {
+                baselineHeight = $(node).outerHeight();
+                node.dataset.initialHeight = baselineHeight;
+                height = baselineHeight;
+            }
+
+            // Check to see if the selection is completely scrolled out of view
+            // to prevent the extension from appearing in the working set area.
+            if (top < scrollerTop - baselineHeight) {
+                node.style.display = "none";
+                return;
+            }
+
+            node.style.display = "block";
+
+            // The selectionExtension sits on top of the other nodes
+            // so we need to shrink it if only part of the selection node is visible
+            if (top < scrollerTop) {
+                var difference = scrollerTop - top;
+                top += difference;
+                height = parseInt(height, 10);
+                height -= difference;
+            }
+
+            node.style.top = top + "px";
+            node.style.height = height + "px";
+            node.style.left = selectionViewInfo.get("width") - $(node).outerWidth() + "px";
+        },
+
+        render: function () {
+            return DOM.div({
+                style: {
+                    display: this.props.visible ? "block" : "none"
+                },
+                className: this.props.className
+            });
+        }
+    });
 
     /**
      * @private
@@ -845,6 +908,7 @@ define(function (require, exports, module) {
      * * actions: the action creator responsible for communicating actions the user has taken
      * * extensions: registered extensions for the file tree
      * * forceRender: causes the component to run render
+     * * platform: platform that Brackets is running on
      */
     var fileTreeView = React.createClass({
 
@@ -865,7 +929,6 @@ define(function (require, exports, module) {
                 selectionViewInfo: this.props.selectionViewInfo,
                 className: "filetree-selection",
                 visible: this.props.selectionViewInfo.get("hasSelection"),
-                widthAdjustment: 0,
                 selectedClassName: ".selected-node",
                 forceUpdate: true
             }),
@@ -874,16 +937,24 @@ define(function (require, exports, module) {
                     selectionViewInfo: this.props.selectionViewInfo,
                     className: "filetree-context",
                     visible: this.props.selectionViewInfo.get("hasContext"),
-                    widthAdjustment: 0,
                     selectedClassName: ".context-node",
                     forceUpdate: true
-                });
-
-            return DOM.div(
-                null,
-                selectionBackground,
-                contextBackground,
-                directoryContents({
+                }),
+                extensionForSelection = selectionExtension({
+                    selectionViewInfo: this.props.selectionViewInfo,
+                    selectedClassName: ".selected-node",
+                    visible: this.props.selectionViewInfo.get("hasSelection"),
+                    forceUpdate: true,
+                    className: "filetree-selection-extension"
+                }),
+                extensionForContext = selectionExtension({
+                    selectionViewInfo: this.props.selectionViewInfo,
+                    selectedClassName: ".context-node",
+                    visible: this.props.selectionViewInfo.get("hasContext"),
+                    forceUpdate: true,
+                    className: "filetree-context-extension"
+                }),
+                contents = directoryContents({
                     isRoot: true,
                     parentPath: this.props.parentPath,
                     sortDirectoriesFirst: this.props.sortDirectoriesFirst,
@@ -892,7 +963,15 @@ define(function (require, exports, module) {
                     actions: this.props.actions,
                     forceRender: this.props.forceRender,
                     platform: this.props.platform
-                })
+                });
+            
+            return DOM.div(
+                null,
+                selectionBackground,
+                contextBackground,
+                extensionForSelection,
+                extensionForContext,
+                contents
             );
         }
     });
diff --git a/src/project/FileViewController.js b/src/project/FileViewController.js
index 733e4a33092..a0a147db6f3 100644
--- a/src/project/FileViewController.js
+++ b/src/project/FileViewController.js
@@ -59,7 +59,7 @@ define(function (require, exports, module) {
     /** 
      * Tracks whether a "currentFileChange" notification occured due to a call to 
      * openAndSelectDocument.
-     * @see FileviewController.openAndSelectDocument
+     * @see #openAndSelectDocument
      * @private 
      */
     var _curDocChangedDueToMe = false;
@@ -68,7 +68,7 @@ define(function (require, exports, module) {
 
     /**
      * @private
-     * @see FileViewController.getFileSelectionFocus()
+     * @see #getFileSelectionFocus
      */
     var _fileSelectionFocus = PROJECT_MANAGER;
     
diff --git a/src/project/ProjectManager.js b/src/project/ProjectManager.js
index 42daf42397a..c7d856cd65e 100644
--- a/src/project/ProjectManager.js
+++ b/src/project/ProjectManager.js
@@ -59,7 +59,6 @@ define(function (require, exports, module) {
         Commands            = require("command/Commands"),
         Dialogs             = require("widgets/Dialogs"),
         DefaultDialogs      = require("widgets/DefaultDialogs"),
-        DeprecationWarning  = require("utils/DeprecationWarning"),
         LanguageManager     = require("language/LanguageManager"),
         Menus               = require("command/Menus"),
         StringUtils         = require("utils/StringUtils"),
@@ -605,17 +604,6 @@ define(function (require, exports, module) {
         return null;
     };
 
-    /**
-     * @deprecated Use LanguageManager.getLanguageForPath(fullPath).isBinary()
-     * Returns true if fileName's extension doesn't belong to binary (e.g. archived)
-     * @param {string} fileName
-     * @return {boolean}
-     */
-    function isBinaryFile(fileName) {
-        DeprecationWarning.deprecationWarning("ProjectManager.isBinaryFile() called for " + fileName + ". Use LanguageManager.getLanguageForPath(fileName).isBinary() instead.");
-        return LanguageManager.getLanguageForPath(fileName).isBinary();
-    }
-
     /**
      * @private
      *
@@ -932,21 +920,6 @@ define(function (require, exports, module) {
         return result.promise();
     }
 
-    /**
-     * @private
-     * @type {?$.Promise} Resolves when the currently running instance of
-     *      _refreshFileTreeInternal completes, or null if there is no currently
-     *      running instance.
-     */
-    var _refreshFileTreePromise = null;
-
-    /**
-     * @type {boolean} If refreshFileTree is called before _refreshFileTreePromise
-     *      has resolved then _refreshPending is set, which indicates that
-     *      refreshFileTree should be called again once the promise resolves.
-     */
-    var _refreshPending = false;
-
     /**
      * @const
      * @private
@@ -956,38 +929,16 @@ define(function (require, exports, module) {
 
     /**
      * Refresh the project's file tree, maintaining the current selection.
-     *
-     * @return {$.Promise} A promise object that will be resolved when the
-     *  project tree is reloaded, or rejected if the project path
-     *  fails to reload. If the previous selected entry is not found,
-     *  the promise is still resolved.
+     * 
+     * Note that the original implementation of this returned a promise to be resolved when the refresh is complete.
+     * That use is deprecated and `refreshFileTree` is now a "fire and forget" kind of function.
      */
-    function refreshFileTree() {
-        if (!_refreshFileTreePromise) {
-            var internalRefreshPromise  = model.refresh(),
-                deferred                = new $.Deferred();
-
-            _refreshFileTreePromise = deferred.promise();
-
-            _refreshFileTreePromise.always(function () {
-                _refreshFileTreePromise = null;
-
-                if (_refreshPending) {
-                    _refreshPending = false;
-                    refreshFileTree();
-                }
-            });
-
-            // Wait at least one second before resolving the promise
-            window.setTimeout(function () {
-                internalRefreshPromise.then(deferred.resolve, deferred.reject);
-            }, _refreshDelay);
-        } else {
-            _refreshPending = true;
-        }
-
-        return _refreshFileTreePromise;
-    }
+    var refreshFileTree = function refreshFileTree() {
+        FileSystem.clearAllCaches();
+        return new $.Deferred().resolve().promise();
+    };
+    
+    refreshFileTree = _.debounce(refreshFileTree, _refreshDelay);
 
     /**
      * Expands tree nodes to show the given file or folder and selects it. Silently no-ops if the
@@ -1346,7 +1297,8 @@ define(function (require, exports, module) {
     /**
      * Returns an Array of all files for this project, optionally including
      * files in the working set that are *not* under the project root. Files are
-     * filtered out by ProjectModel.shouldShow().
+     * filtered first by ProjectModel.shouldShow(), then by the custom filter
+     * argument (if one was provided). The list is unsorted.
      *
      * @param {function (File, number):boolean=} filter Optional function to filter
      *          the file list (does not filter directory traversal). API matches Array.filter().
@@ -1439,7 +1391,6 @@ define(function (require, exports, module) {
     exports.isWithinProject               = isWithinProject;
     exports.makeProjectRelativeIfPossible = makeProjectRelativeIfPossible;
     exports.shouldShow                    = ProjectModel.shouldShow;
-    exports.isBinaryFile                  = isBinaryFile;
     exports.openProject                   = openProject;
     exports.getSelectedItem               = getSelectedItem;
     exports.getContext                    = getContext;
diff --git a/src/project/ProjectModel.js b/src/project/ProjectModel.js
index 517f35d98ae..0cf2df87ea5 100644
--- a/src/project/ProjectModel.js
+++ b/src/project/ProjectModel.js
@@ -92,7 +92,7 @@ define(function (require, exports, module) {
 
     /**
      * @private
-     * See shouldShow
+     * @see #shouldShow
      */
     function _shouldShowName(name) {
         return !name.match(_exclusionListRegEx);
@@ -244,7 +244,7 @@ define(function (require, exports, module) {
      * @type {string}
      * 
      * Encoded URL
-     * @see getBaseUrl(), setBaseUrl()
+     * @see {@link ProjectModel#getBaseUrl}, {@link ProjectModel#setBaseUrl}
      */
     ProjectModel.prototype._projectBaseUrl = "";
 
@@ -612,24 +612,21 @@ define(function (require, exports, module) {
     ProjectModel.prototype.showInTree = function (path) {
         var d = new $.Deferred();
         path = _getPathFromFSObject(path);
+        
+        if (!this.isWithinProject(path)) {
+            return d.resolve().promise();
+        }
 
-        var projectRelative = this.makeProjectRelativeIfPossible(path);
-
-        // Not in project?
-        if (projectRelative[0] === "/") {
+        var parentDirectory = FileUtils.getDirectoryPath(path),
+            self = this;
+        this.setDirectoryOpen(parentDirectory, true).then(function () {
+            if (_pathIsFile(path)) {
+                self.setSelected(path);
+            }
             d.resolve();
-        } else {
-            var parentDirectory = FileUtils.getDirectoryPath(path),
-                self = this;
-            this.setDirectoryOpen(parentDirectory, true).then(function () {
-                if (_pathIsFile(path)) {
-                    self.setSelected(path);
-                }
-                d.resolve();
-            }, function (err) {
-                d.reject(err);
-            });
-        }
+        }, function (err) {
+            d.reject(err);
+        });
         return d.promise();
     };
 
@@ -790,7 +787,13 @@ define(function (require, exports, module) {
         if (this._selections.rename && this._selections.rename.path === path) {
             return;
         }
-
+        
+        var projectRelativePath = this.makeProjectRelativeIfPossible(path);
+        
+        if (!this._viewModel.isFilePathVisible(projectRelativePath)) {
+            this.showInTree(path);
+        }
+        
         if (path !== this._selections.context) {
             this.setContext(path);
         } else {
@@ -798,7 +801,7 @@ define(function (require, exports, module) {
         }
 
         this._viewModel.moveMarker("rename", null,
-                                   this.makeProjectRelativeIfPossible(path));
+                                   projectRelativePath);
         var d = new $.Deferred();
         this._selections.rename = {
             deferred: d,
@@ -1072,9 +1075,9 @@ define(function (require, exports, module) {
             });
         }
     };
-
+    
     /**
-     * Refreshes the contents of the tree.
+     * Clears caches and refreshes the contents of the tree.
      *
      * @return {$.Promise} resolved when the tree has been refreshed
      */
@@ -1085,7 +1088,7 @@ define(function (require, exports, module) {
             selections  = this._selections,
             viewModel   = this._viewModel,
             deferred    = new $.Deferred();
-
+        
         this.setProjectRoot(projectRoot).then(function () {
             self.reopenNodes(openNodes).then(function () {
                 if (selections.selected) {
@@ -1135,9 +1138,18 @@ define(function (require, exports, module) {
             ];
         } else {
             // Special case: a directory passed in without added and removed values
-            // appears to be new.
+            // needs to be updated.
             if (!added && !removed) {
-                this._viewModel.ensureDirectoryExists(this.makeProjectRelativeIfPossible(entry.fullPath));
+                entry.getContents(function (err, contents) {
+                    if (err) {
+                        console.error("Unexpected error refreshing file tree for directory", entry.fullPath, err);
+                        return;
+                    }
+                    self._viewModel.setDirectoryContents(self.makeProjectRelativeIfPossible(entry.fullPath), contents);
+                });
+                
+                // Exit early because we can't update the viewModel until we get the directory contents.
+                return;
             }
         }
 
@@ -1224,7 +1236,7 @@ define(function (require, exports, module) {
      * Returns the full path to the welcome project, which we open on first launch.
      *
      * @param {string} sampleUrl URL for getting started project
-     * @param {string} initialPath Path to Brackets directory (see FileUtils.getNativeBracketsDirectoryPath())
+     * @param {string} initialPath Path to Brackets directory (see {@link FileUtils::#getNativeBracketsDirectoryPath})
      * @return {!string} fullPath reference
      */
     function _getWelcomeProjectPath(sampleUrl, initialPath) {
diff --git a/src/project/WorkingSetView.js b/src/project/WorkingSetView.js
index 225923b99ed..8de62c1ef8f 100644
--- a/src/project/WorkingSetView.js
+++ b/src/project/WorkingSetView.js
@@ -57,14 +57,14 @@ define(function (require, exports, module) {
 
     /**
      * Icon Providers
-     * @see {@link WorkingSetView#addIconProvider()}
+     * @see {@link #addIconProvider}
      * @private
      */
     var _iconProviders = [];
     
     /**
      * Class Providers
-     * @see {@link WorkingSetView#addClassProvider()}
+     * @see {@link #addClassProvider}
      * @private
      */
     var _classProviders = [];
diff --git a/src/search/FindBar.js b/src/search/FindBar.js
index 83293916436..69561ded6d0 100644
--- a/src/search/FindBar.js
+++ b/src/search/FindBar.js
@@ -77,6 +77,7 @@ define(function (require, exports, module) {
             replace: false,
             queryPlaceholder: "",
             initialQuery: "",
+            initialReplaceText: "",
             scopeLabel: ""
         };
         this._options = _.extend(defaults, options);
diff --git a/src/search/FindInFilesUI.js b/src/search/FindInFilesUI.js
index df268be0514..b4f354d3415 100644
--- a/src/search/FindInFilesUI.js
+++ b/src/search/FindInFilesUI.js
@@ -129,17 +129,9 @@ define(function (require, exports, module) {
             return;
         }
         
-        // Default to searching for the current selection
+        // Get initial query/replace text
         var currentEditor = EditorManager.getActiveEditor(),
-            initialQuery  = "";
-
-        if (_findBar && !_findBar.isClosed()) {
-            // The modalBar was already up. When creating the new modalBar, copy the
-            // current query instead of using the passed-in selected text.
-            initialQuery = _findBar.getQueryInfo().query;
-        } else if (currentEditor) {
-            initialQuery = FindUtils.getInitialQueryFromSelection(currentEditor);
-        }
+            initialQuery = FindUtils.getInitialQuery(_findBar, currentEditor);
 
         // Close our previous find bar, if any. (The open() of the new _findBar will
         // take care of closing any other find bar instances.)
@@ -150,7 +142,8 @@ define(function (require, exports, module) {
         _findBar = new FindBar({
             multifile: true,
             replace: showReplace,
-            initialQuery: initialQuery,
+            initialQuery: initialQuery.query,
+            initialReplaceText: initialQuery.replaceText,
             queryPlaceholder: Strings.FIND_QUERY_PLACEHOLDER,
             scopeLabel: FindUtils.labelForScope(scope)
         });
diff --git a/src/search/FindReplace.js b/src/search/FindReplace.js
index 9ca6aebac2f..d722eef47b7 100644
--- a/src/search/FindReplace.js
+++ b/src/search/FindReplace.js
@@ -593,13 +593,7 @@ define(function (require, exports, module) {
         state.searchStartPos = editor.getCursorPos(false, "start");
         
         // Prepopulate the search field
-        var initialQuery;
-        if (findBar) {
-            // Use the previous query. This can happen if the user switches from Find to Replace.
-            initialQuery = findBar.getQueryInfo().query;
-        } else {
-            initialQuery = FindUtils.getInitialQueryFromSelection(editor);
-        }
+        var initialQuery = FindUtils.getInitialQuery(findBar, editor);
         
         // Close our previous find bar, if any. (The open() of the new findBar will
         // take care of closing any other find bar instances.)
@@ -611,7 +605,8 @@ define(function (require, exports, module) {
         findBar = new FindBar({
             multifile: false,
             replace: replace,
-            initialQuery: initialQuery,
+            initialQuery: initialQuery.query,
+            initialReplaceText: initialQuery.replaceText,
             queryPlaceholder: Strings.FIND_QUERY_PLACEHOLDER
         });
         findBar.open();
diff --git a/src/search/FindUtils.js b/src/search/FindUtils.js
index 066671467c1..86092182c44 100644
--- a/src/search/FindUtils.js
+++ b/src/search/FindUtils.js
@@ -32,6 +32,7 @@ define(function (require, exports, module) {
         MainViewManager = require("view/MainViewManager"),
         FileSystem      = require("filesystem/FileSystem"),
         FileUtils       = require("file/FileUtils"),
+        FindBar         = require("search/FindBar").FindBar,
         ProjectManager  = require("project/ProjectManager"),
         Strings         = require("strings"),
         StringUtils     = require("utils/StringUtils"),
@@ -71,19 +72,50 @@ define(function (require, exports, module) {
         return replaceWith;
     }
     
-    /*
-     * Returns the string used to prepopulate the find bar
-     * @param {!Editor} editor
-     * @return {string} first line of primary selection to populate the find bar
+    /**
+     * Gets you the right query and replace text to prepopulate the Find Bar.
+     * @param {?FindBar} currentFindBar The currently open Find Bar, if any
+     * @param {?Editor} The active editor, if any
+     * @return {query: string, replaceText: string} Query and Replace text to prepopulate the Find Bar with
      */
-    function getInitialQueryFromSelection(editor) {
-        var selectionText = editor.getSelectedText();
-        if (selectionText) {
-            return selectionText
-                .replace(/^\n*/, "") // Trim possible newlines at the very beginning of the selection
-                .split("\n")[0];
+    function getInitialQuery(currentFindBar, editor) {
+        var query = "",
+            replaceText = "";
+
+        /*
+         * Returns the string used to prepopulate the find bar
+         * @param {!Editor} editor
+         * @return {string} first line of primary selection to populate the find bar
+         */
+        function getInitialQueryFromSelection(editor) {
+            var selectionText = editor.getSelectedText();
+            if (selectionText) {
+                return selectionText
+                    .replace(/^\n*/, "") // Trim possible newlines at the very beginning of the selection
+                    .split("\n")[0];
+            }
+            return "";
         }
-        return "";
+
+        if (currentFindBar && !currentFindBar.isClosed()) {
+            // The modalBar was already up. When creating the new modalBar, copy the
+            // current query instead of using the passed-in selected text.
+            query = currentFindBar.getQueryInfo().query;
+            replaceText = currentFindBar.getReplaceText();
+        } else {
+            var openedFindBar = FindBar._bars && _.find(FindBar._bars, function (bar) {
+                    return !bar.isClosed();
+                });
+
+            if (openedFindBar) {
+                query = openedFindBar.getQueryInfo().query;
+                replaceText = openedFindBar.getReplaceText();
+            } else if (editor) {
+                query = getInitialQueryFromSelection(editor);
+            }
+        }
+
+        return {query: query, replaceText: replaceText};
     }
 
     /**
@@ -244,6 +276,16 @@ define(function (require, exports, module) {
                         var newDoc = DocumentManager.getOpenDocumentForPath(firstPath);
                         // newDoc might be null if the replacement failed.
                         if (newDoc) {
+                            // @todo change the `_edit` call to this:
+                            //     
+                            ///    CommandManager.execute(Commands.FILE_OPEN, {fullPath: firstPath});
+                            //
+                            // The problem with doing that is that the promise returned by this
+                            // function has already been resolved by `Async.doInParallel()` and
+                            // `CommandManager.execute` is an asynchronous operation.
+                            // An asynchronous open can't be waited on (since the promise has been  
+                            //  resolved already) so use the synchronous version so that the next `done`
+                            //  handler is blocked until the open completes
                             MainViewManager._edit(MainViewManager.ACTIVE_PANE, newDoc);
                         }
                     }
@@ -311,7 +353,7 @@ define(function (require, exports, module) {
     }
 
     exports.parseDollars                    = parseDollars;
-    exports.getInitialQueryFromSelection    = getInitialQueryFromSelection;
+    exports.getInitialQuery                 = getInitialQuery;
     exports.hasCheckedMatches               = hasCheckedMatches;
     exports.performReplacements             = performReplacements;
     exports.labelForScope                   = labelForScope;
diff --git a/src/search/QuickOpen.js b/src/search/QuickOpen.js
index 15b753a5bbd..d12a14401b4 100644
--- a/src/search/QuickOpen.js
+++ b/src/search/QuickOpen.js
@@ -145,15 +145,6 @@ define(function (require, exports, module) {
      * cancels Quick Open (via Esc), those changes are automatically reverted.
      */
     function addQuickOpenPlugin(pluginDef) {
-        // Backwards compatibility (for now) for old fileTypes field, if newer languageIds not specified
-        if (pluginDef.fileTypes && !pluginDef.languageIds) {
-            console.warn("Using fileTypes for QuickOpen plugins is deprecated. Use languageIds instead.");
-            pluginDef.languageIds = pluginDef.fileTypes.map(function (extension) {
-                return LanguageManager.getLanguageForPath("file." + extension).getId();
-            });
-            delete pluginDef.fileTypes;
-        }
-        
         plugins.push(new QuickOpenPlugin(
             pluginDef.name,
             pluginDef.languageIds,
@@ -680,7 +671,7 @@ define(function (require, exports, module) {
             displayName += '<span title="sp:' + sd.special + ', m:' + sd.match +
                 ', ls:' + sd.lastSegment + ', b:' + sd.beginning +
                 ', ld:' + sd.lengthDeduction + ', c:' + sd.consecutive + ', nsos: ' +
-                sd.notStartingOnSpecial + '">(' + item.matchGoodness + ') </span>';
+                sd.notStartingOnSpecial + ', upper: ' + sd.upper + '">(' + item.matchGoodness + ') </span>';
         }
         
         // Put the path pieces together, highlighting the matched parts
@@ -959,7 +950,7 @@ define(function (require, exports, module) {
     exports.addQuickOpenPlugin      = addQuickOpenPlugin;
     exports.highlightMatch          = highlightMatch;
     
-    // accessing these from this module will ultimately be deprecated
+    // Convenience exports for functions that most QuickOpen plugins would need.
     exports.stringMatch             = StringMatch.stringMatch;
     exports.SearchResult            = StringMatch.SearchResult;
     exports.basicMatchSort          = StringMatch.basicMatchSort;
diff --git a/src/strings.js b/src/strings.js
index fb391e547cf..eea4207250e 100644
--- a/src/strings.js
+++ b/src/strings.js
@@ -56,7 +56,12 @@ define(function (require, exports, module) {
     additionalGlobals.VERSION_PATCH = parsedVersion[3];
 
     var isDevBuild = !StringUtils.endsWith(decodeURI(window.location.pathname), "/www/index.html");
-    additionalGlobals.BUILD_TYPE    = (isDevBuild ? strings.DEVELOPMENT_BUILD : strings.EXPERIMENTAL_BUILD);
+    if (isDevBuild) {
+        additionalGlobals.BUILD_TYPE = strings.DEVELOPMENT_BUILD;
+    } else {
+        var isReleaseBuild = (brackets.platform === "mac" || brackets.platform === "win");
+        additionalGlobals.BUILD_TYPE = (isReleaseBuild ? strings.RELEASE_BUILD : strings.EXPERIMENTAL_BUILD);
+    }
     
     // Insert application strings
     _.forEach(strings, function (value, key) {
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index fed79d7ec2e..0cd7e4cb1ce 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -749,6 +749,8 @@ a, img {
     padding: 4px 6px;
     .sprite-icon(0, 0, 13px, 13px, "images/split-view-icons.svg");
     background-origin: content-box;  // center image within the 13x13 area - ignore button's padding
+    -webkit-transform: translateZ(0); // forces GPU mode for better filter rendering on retina
+    transform: translateZ(0); // future proofing
     -webkit-filter: drop-shadow(0 1px 0 rgba(0,0,0,0.36));
     z-index: 1;
 }
@@ -876,7 +878,7 @@ a, img {
     position: absolute;
 }
 
-.sidebar-selection-extension {
+.sidebar-selection-extension, .filetree-selection-extension {
     background: @bc-sidebar-selection;
     border-top: 1px solid @bc-shadow-small;
     border-bottom: 1px solid @bc-highlight;
@@ -888,6 +890,16 @@ a, img {
     z-index: @z-index-brackets-selection-extension; /* scroller-shadow appears above the extension */
 }
 
+.filetree-context-extension {
+    background: rgba(255, 255, 255, 0.06);
+    box-sizing: border-box;
+    height: 23px;
+    width: 9px; /* quiet scrollbar width */
+    position: fixed;
+
+    z-index: @z-index-brackets-selection-extension; /* scroller-shadow appears above the extension */
+}
+
 .filetree-context {
     background: rgba(255, 255, 255, 0.06);
     box-sizing: border-box;
@@ -1199,7 +1211,7 @@ a, img {
 
         ul {
             margin: 0;
-            padding: @top-margin 0px;
+            padding: 10px 0px 10px 5px;
             list-style: none;
         }
 
@@ -1214,9 +1226,21 @@ a, img {
             .dark & {
                 color: @dark-bc-text-emphasized;
             }
+            
+            &.section-header {
+                padding-left: 0;
+                padding-bottom: 0;
+                .disclosure-triangle {
+                    .expand-collapse-triangle();
+                }
+                .filename {
+                    font-weight: @font-weight-semibold;
+                }
+            }
 
             .related-file {
                 color: @bc-text-thin-quiet;
+                padding-left: 3px;
                 
                 .dark & {
                     color: @dark-bc-text-thin-quiet;
@@ -1343,6 +1367,9 @@ a, img {
 
 .search-results .disclosure-triangle,
 #problems-panel .disclosure-triangle {
+    .expand-collapse-triangle();
+}
+.expand-collapse-triangle() {
     .jstree-sprite;
     display: inline-block;
     background-position: 7px 5px;
diff --git a/src/thirdparty/CodeMirror2 b/src/thirdparty/CodeMirror2
index 8be56518bef..4bce53423da 160000
--- a/src/thirdparty/CodeMirror2
+++ b/src/thirdparty/CodeMirror2
@@ -1 +1 @@
-Subproject commit 8be56518bef493d2155e4a3bea18a196bc43e1db
+Subproject commit 4bce53423da19c95ab1420885497f19e3ace5db1
diff --git a/src/utils/CollectionUtils.js b/src/utils/CollectionUtils.js
deleted file mode 100644
index 373d424fef6..00000000000
--- a/src/utils/CollectionUtils.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
- *  
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"), 
- * to deal in the Software without restriction, including without limitation 
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
- * and/or sell copies of the Software, and to permit persons to whom the 
- * Software is furnished to do so, subject to the following conditions:
- *  
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *  
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
- * DEALINGS IN THE SOFTWARE.
- * 
- */
-
-/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global define */
-
-/**
- *  Utilities functions related to data collections (arrays & maps)
- */
-define(function (require, exports, module) {
-    "use strict";
-    
-    var _ = require("thirdparty/lodash");
-
-    /**
-     * Returns the first index in 'array' for which isMatch() returns true, or -1 if none
-     * @param {!Array.<*>|jQueryObject} array
-     * @param {!function(*, Number):boolean} isMatch Passed (item, index), same as with forEach()
-     * @deprecated
-     */
-    function indexOf(array, isMatch) {
-        console.warn("CollectionUtils.indexOf is deprecated. Use _.findIndex instead.");
-        return _.findIndex(array, isMatch);
-    }
-    
-    /**
-     * Iterates over all the properties in an object or elements in an array. Differs from
-     * $.each in that it always iterates over the properties of an object, even if it has a length
-     * property making it look like an array.
-     * @param {*} object The object or array to iterate over.
-     * @param {function(value, key)} callback The function that will be executed on every object.
-     * @deprecated
-     */
-    function forEach(object, callback) {
-        console.warn("CollectionUtils.forEach is deprecated. Use _.forEach instead.");
-        _.forEach(object, callback);
-    }
-    
-    /**
-     * Iterates over all the properties in an object or elements in an array. If a callback returns a
-     * truthly value then it will immediately return true, if not, it will return false. Differs from
-     * $.each in that it always iterates over the properties of an object, even if it has a length
-     * property making it look like an array.
-     * @param {*} object The object or array to iterate over.
-     * @param {function(value, key)} callback The function that will be executed on every object.
-     * @return {boolean}
-     * @deprecated
-     */
-    function some(object, callback) {
-        console.warn("CollectionUtils.some is deprecated. Use _.some instead.");
-        return _.some(object, callback);
-    }
-    
-    /**
-     * Returns true if the object has the specified property.
-     * This calls the Object.prototype.hasOwnProperty function directly, rather than
-     * depending on the object having a function named "hasOwnProperty". This way the
-     * object *can* have a property named "hasOwnProperty" that is not a function.
-     * @param {*} object The object to test
-     * @param {string} property The name of the property to query
-     * @return {boolean} True if the object contains the property
-     * @deprecated
-     */
-    function hasProperty(object, property) {
-        console.warn("CollectionUtils.hasProperty is deprecated. Use _.has instead.");
-        return _.has(object, property);
-    }
-    
-    // Define public API
-    exports.indexOf     = indexOf;
-    exports.forEach     = forEach;
-    exports.some        = some;
-    exports.hasProperty = hasProperty;
-});
diff --git a/src/utils/ExtensionUtils.js b/src/utils/ExtensionUtils.js
index 67298d60719..62899492464 100644
--- a/src/utils/ExtensionUtils.js
+++ b/src/utils/ExtensionUtils.js
@@ -72,7 +72,7 @@ define(function (require, exports, module) {
     /**
      * getModuleUrl returns different urls for win platform
      * so that's why we need a different check here
-     * @see getModuleUrl()
+     * @see #getModuleUrl
      * @param {!string} pathOrUrl that should be checked if it's absolute
      * @return {!boolean} returns true if pathOrUrl is absolute url on win platform
      *                    or when it's absolute path on other platforms
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 4cf85b38b35..1f8df2bf425 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -169,8 +169,12 @@ define(function (require, exports, module) {
      * @param {?boolean} createdByWorkspaceManager For internal use only
      * @param {?boolean} usePercentages Maintain the size of the element as a percentage of its parent
      *                          the default is to maintain the size of the element in pixels
+     * @param {?boolean} _attachToParent Attaches the resizer element to parent of the element rather than
+     *                          to element itself. Attach the resizer to the parent *ONLY* if element has the
+     *                          same offset as parent otherwise the resizer will be incorrectly positioned. 
+     *                          FOR INTERNAL USE ONLY
      */
-    function makeResizable(element, direction, position, minSize, collapsible, forceLeft, createdByWorkspaceManager, usePercentages) {
+    function makeResizable(element, direction, position, minSize, collapsible, forceLeft, createdByWorkspaceManager, usePercentages, _attachToParent) {
         var $resizer            = $('<div class="' + direction + '-resizer"></div>'),
             $element            = $(element),
             $parent             = $element.parent(),
@@ -229,8 +233,11 @@ define(function (require, exports, module) {
 
         collapsible = collapsible || false;
         
-        $element.prepend($resizer);
-        
+        if (_attachToParent) {
+            $parent.prepend($resizer);
+        } else {
+            $element.prepend($resizer);
+        }
         // Important so min/max sizes behave predictably
         $element.css("box-sizing", "border-box");
         
@@ -291,8 +298,11 @@ define(function (require, exports, module) {
             elementPrefs.visible = true;
             
             if (collapsible) {
-                $element.prepend($resizer);
-                
+                if (_attachToParent) {
+                    $parent.prepend($resizer);
+                } else {
+                    $element.prepend($resizer);
+                }
                 if (position === POSITION_TOP) {
                     $resizer.css(resizerCSSPosition, "");
                 } else if (position === POSITION_RIGHT) {
diff --git a/src/utils/StringMatch.js b/src/utils/StringMatch.js
index ea138b3f2e0..7f43e1f3631 100644
--- a/src/utils/StringMatch.js
+++ b/src/utils/StringMatch.js
@@ -115,24 +115,32 @@ define(function (require, exports, module) {
         DEBUG_SCORES = ds;
     }
     
+
     // Constants for scoring
-    var SPECIAL_POINTS = 35;
+    var SPECIAL_POINTS = 40;
     var MATCH_POINTS = 10;
+    var UPPER_CASE_MATCH = 100;
+    var CONSECUTIVE_MATCHES_POINTS = 8;
+    var BEGINNING_OF_NAME_POINTS = 13;
     var LAST_SEGMENT_BOOST = 1;
-    var BEGINNING_OF_NAME_POINTS = 10;
     var DEDUCTION_FOR_LENGTH = 0.2;
-    var CONSECUTIVE_MATCHES_POINTS = 7;
     var NOT_STARTING_ON_SPECIAL_PENALTY = 25;
     
     // Used in match lists to designate matches of "special" characters (see
     // findSpecialCharacters above
-    function SpecialMatch(index) {
+    function SpecialMatch(index, upper) {
         this.index = index;
+        if (upper) {
+            this.upper = upper;
+        }
     }
     
     // Used in match lists to designate any matched characters that are not special
-    function NormalMatch(index) {
+    function NormalMatch(index, upper) {
         this.index = index;
+        if (upper) {
+            this.upper = upper;
+        }
     }
     
     /*
@@ -191,8 +199,8 @@ define(function (require, exports, module) {
      *   forward searching to resume
      *
      * * When `deadBranches[queryCounter] = strCounter` it means if we're still trying to match 
-     *   `queryStr[queryCounter]` and we get to `str[strCounter]`, there's no way we can match the 
-     *   remainer of `queryStr` with the remainder of `str` -- either using specials-only or 
+     *   `queryLower[queryCounter]` and we get to `str[strCounter]`, there's no way we can match the 
+     *   remainer of `queryLower` with the remainder of `str` -- either using specials-only or 
      *   full any-char matching.
      *
      * * We know this because deadBranches[] is set in backtrack(), and we don't get to backtrack() unless 
@@ -205,18 +213,20 @@ define(function (require, exports, module) {
      *
      * @param {string} query the search string (generally lower cased)
      * @param {string} str the string to compare with (generally lower cased)
+     * @param {string} originalQuery the "non-normalized" query string (used to detect case match priority)
+     * @param {string} originalStr the "non-normalized" string to compare with (used to detect case match priority)
      * @param {Array} specials list of special indexes in str (from findSpecialCharacters)
      * @param {int} startingSpecial index into specials array to start scanning with
      * @return {Array.<SpecialMatch|NormalMatch>} matched indexes or null if no matches possible
      */
-    function _generateMatchList(query, str, specials, startingSpecial) {
+    function _generateMatchList(query, str, originalQuery, originalStr, specials, startingSpecial) {
         var result = [];
         
         // used to keep track of which special character we're testing now
         var specialsCounter = startingSpecial;
         
         // strCounter and queryCounter are the indexes used for pulling characters
-        // off of the str/compareStr and query.
+        // off of the str/compareLower and query.
         var strCounter = specials[startingSpecial];
         var queryCounter;
         
@@ -257,10 +267,17 @@ define(function (require, exports, module) {
                     specialsCounter = i;
                 } else if (query[queryCounter] === str[specials[i]]) {
                     // we have a match! do the required tracking
+                    strCounter = specials[i];
+                    
+                    // Upper case match check:
+                    // If the query and original string matched, but the original string
+                    // and the lower case version did not, that means that the original
+                    // was upper case.
+                    var upper = originalQuery[queryCounter] === originalStr[strCounter] && originalStr[strCounter] !== str[strCounter];
+                    result.push(new SpecialMatch(strCounter, upper));
                     specialsCounter = i;
                     queryCounter++;
-                    strCounter = specials[i];
-                    result.push(new SpecialMatch(strCounter++));
+                    strCounter++;
                     return true;
                 }
             }
@@ -338,8 +355,13 @@ define(function (require, exports, module) {
                     // we look character by character for matches
                     if (query[queryCounter] === str[strCounter]) {
                         // got a match! record it, and switch back to searching specials
+                        
+                        // See the specials section above for a comment on the expression
+                        // for `upper` below.
+                        var upper = originalQuery[queryCounter] === originalStr[strCounter] && originalStr[strCounter] !== str[strCounter];
+                        result.push(new NormalMatch(strCounter++, upper));
+
                         queryCounter++;
-                        result.push(new NormalMatch(strCounter++));
                         state = SPECIALS_MATCH;
                     } else {
                         // no match, keep looking
@@ -362,6 +384,7 @@ define(function (require, exports, module) {
         return result;
     }
     
+    
     /*
      * Seek out the best match in the last segment (generally the filename). 
      * Matches in the filename are preferred, but the query entered could match
@@ -376,27 +399,33 @@ define(function (require, exports, module) {
      *
      * @param {string} query the search string (generally lower cased)
      * @param {string} str the string to compare with (generally lower cased)
+     * @param {string} originalQuery the "non-normalized" query string (used to detect case match priority)
+     * @param {string} originalStr the "non-normalized" string to compare with (used to detect case match priority)
      * @param {Array} specials list of special indexes in str (from findSpecialCharacters)
      * @param {int} startingSpecial index into specials array to start scanning with
      * @param {boolean} lastSegmentStart which character does the last segment start at
      * @return {{remainder:int, matchList:Array.<SpecialMatch|NormalMatch>}} matched indexes or null if no matches possible
      */
-    function _lastSegmentSearch(query, str, specials, startingSpecial, lastSegmentStart) {
+    function _lastSegmentSearch(query, str, originalQuery, originalStr, specials, startingSpecial, lastSegmentStart) {
         var queryCounter, matchList;
         
         // It's possible that the query is longer than the last segment.
         // If so, we can chop off the bit that we know couldn't possibly be there.
-        var remainder = "";
-        var extraCharacters = specials[startingSpecial] + query.length - str.length;
+        var remainder = "",
+            originalRemainder = "",
+            extraCharacters = specials[startingSpecial] + query.length - str.length;
 
         if (extraCharacters > 0) {
             remainder = query.substring(0, extraCharacters);
+            originalRemainder = originalQuery.substring(0, extraCharacters);
             query = query.substring(extraCharacters);
+            originalQuery = originalQuery.substring(extraCharacters);
         }
         
         for (queryCounter = 0; queryCounter < query.length; queryCounter++) {
             matchList = _generateMatchList(query.substring(queryCounter),
-                                     str, specials, startingSpecial);
+                                     str, originalQuery.substring(queryCounter),
+                                     originalStr, specials, startingSpecial);
             
             // if we've got a match *or* there are no segments in this string, we're done
             if (matchList || startingSpecial === 0) {
@@ -409,6 +438,7 @@ define(function (require, exports, module) {
         } else {
             return {
                 remainder: remainder + query.substring(0, queryCounter),
+                originalRemainder: originalRemainder + originalQuery.substring(0, queryCounter),
                 matchList: matchList
             };
         }
@@ -420,18 +450,20 @@ define(function (require, exports, module) {
      *
      * The parameters and return value are the same as for getMatchRanges.
      *
-     * @param {string} query the search string (will be searched lower case)
-     * @param {string} compareStr the lower-cased string to search
+     * @param {string} queryLower the search string (will be searched lower case)
+     * @param {string} compareLower the lower-cased string to search
+     * @param {string} originalQuery the "non-normalized" query string (used to detect case match priority)
+     * @param {string} originalStr the "non-normalized" string to compare with (used to detect case match priority)
      * @param {Array} specials list of special indexes in str (from findSpecialCharacters)
      * @param {int} lastSegmentSpecialsIndex index into specials array to start scanning with
      * @return {Array.<SpecialMatch|NormalMatch>} matched indexes or null if no matches possible
      */
-    function _wholeStringSearch(query, compareStr, specials, lastSegmentSpecialsIndex) {
+    function _wholeStringSearch(queryLower, compareLower, originalQuery, originalStr, specials, lastSegmentSpecialsIndex) {
         var lastSegmentStart = specials[lastSegmentSpecialsIndex];
         var result;
         var matchList;
         
-        result = _lastSegmentSearch(query, compareStr, specials, lastSegmentSpecialsIndex, lastSegmentStart);
+        result = _lastSegmentSearch(queryLower, compareLower, originalQuery, originalStr, specials, lastSegmentSpecialsIndex, lastSegmentStart);
         
         if (result) {
             matchList = result.matchList;
@@ -440,7 +472,9 @@ define(function (require, exports, module) {
             if (result.remainder) {
                 // Scan with the remainder only through the beginning of the last segment
                 var remainderMatchList = _generateMatchList(result.remainder,
-                                              compareStr.substring(0, lastSegmentStart),
+                                              compareLower.substring(0, lastSegmentStart),
+                                              result.originalRemainder,
+                                              originalStr.substring(0, lastSegmentStart),
                                               specials.slice(0, lastSegmentSpecialsIndex), 0);
                 
                 if (remainderMatchList) {
@@ -454,7 +488,7 @@ define(function (require, exports, module) {
         } else {
             // No match in the last segment, so we start over searching the whole
             // string
-            matchList = _generateMatchList(query, compareStr, specials, 0);
+            matchList = _generateMatchList(queryLower, compareLower, originalQuery, originalStr, specials, 0);
         }
         
         return matchList;
@@ -481,6 +515,7 @@ define(function (require, exports, module) {
             scoreDebug = {
                 special: 0,
                 match: 0,
+                upper: 0,
                 lastSegment: 0,
                 beginning: 0,
                 lengthDeduction: 0,
@@ -544,6 +579,13 @@ define(function (require, exports, module) {
             }
             newPoints += MATCH_POINTS;
             
+            if (match.upper) {
+                if (DEBUG_SCORES) {
+                    scoreDebug.upper += UPPER_CASE_MATCH;
+                }
+                newPoints += UPPER_CASE_MATCH;
+            }
+                        
             // A bonus is given for characters that match at the beginning
             // of the filename
             if (c === lastSegmentStart) {
@@ -664,12 +706,20 @@ define(function (require, exports, module) {
      */
     function _prefixMatchResult(str, query) {
         var result = new SearchResult(str);
+        
         result.matchGoodness = -Number.MAX_VALUE;
+        
+        if (str.substr(0, query.length) !== query) {
+            // Penalize for not matching case
+            result.matchGoodness *= 0.5;
+        }
+        
         if (DEBUG_SCORES) {
             result.scoreDebug = {
-                beginning: Number.MAX_VALUE
+                beginning: -result.matchGoodness
             };
         }
+        
         result.stringRanges = [{
             text: str.substr(0, query.length),
             matched: true,
@@ -684,7 +734,8 @@ define(function (require, exports, module) {
         }
         return result;
     }
-    
+
+
     /*
      * Match str against the query using the QuickOpen algorithm provided by
      * the functions above. The general idea is to prefer matches of "special" characters and,
@@ -732,14 +783,18 @@ define(function (require, exports, module) {
         }
         
         // comparisons are case insensitive, so switch to lower case here
-        query = query.toLowerCase();
-        var compareStr = str.toLowerCase();
+        var queryLower = query.toLowerCase();
+        var compareLower = str.toLowerCase();
         
         if (options.preferPrefixMatches) {
             options.segmentedSearch = false;
         }
         
-        if (options.preferPrefixMatches && compareStr.substr(0, query.length) === query) {
+        if (options.preferPrefixMatches && compareLower.substr(0, queryLower.length) === queryLower) {
+            // NOTE: we compare against the case insensitive match
+            //        above but we pass the case-sensitive version in 
+            //        because we want to weight the match to give case-matches
+            //        a higher score
             return _prefixMatchResult(str, query);
         }
         
@@ -754,14 +809,13 @@ define(function (require, exports, module) {
         // avoid some extra work
         if (options.segmentedSearch) {
             lastSegmentStart = special.specials[special.lastSegmentSpecialsIndex];
-            matchList = _wholeStringSearch(query, compareStr, special.specials,
+            matchList = _wholeStringSearch(queryLower, compareLower, query, str, special.specials,
                               special.lastSegmentSpecialsIndex);
         } else {
             lastSegmentStart = 0;
-            matchList = _generateMatchList(query, compareStr, special.specials,
-                                           0);
+            matchList = _generateMatchList(queryLower, compareLower, query, str, special.specials, 0);
         }
-        
+
         // If we get a match, turn this into a SearchResult as expected by the consumers
         // of this API.
         if (matchList) {
diff --git a/src/utils/StringUtils.js b/src/utils/StringUtils.js
index 9eaac92b292..7604f4f9d96 100644
--- a/src/utils/StringUtils.js
+++ b/src/utils/StringUtils.js
@@ -51,14 +51,6 @@ define(function (require, exports, module) {
         });
     }
 
-    /**
-     * @deprecated Use lodash `escape()` instead.
-     */
-    function htmlEscape(str) {
-        console.warn("StringUtils.htmlEscape is deprecated. Use _.escape instead.");
-        return _.escape(str);
-    }
-
     function regexEscape(str) {
         return str.replace(/([.?*+\^$\[\]\\(){}|\-])/g, "\\$1");
     }
@@ -221,7 +213,6 @@ define(function (require, exports, module) {
 
     // Define public API
     exports.format              = format;
-    exports.htmlEscape          = htmlEscape;
     exports.regexEscape         = regexEscape;
     exports.jQueryIdEscape      = jQueryIdEscape;
     exports.getLines            = getLines;
diff --git a/src/view/MainViewManager.js b/src/view/MainViewManager.js
index 3b7c287a683..6cc094b71d7 100644
--- a/src/view/MainViewManager.js
+++ b/src/view/MainViewManager.js
@@ -227,7 +227,7 @@ define(function (require, exports, module) {
      * localized pane titles 
      * @type {Object.<FIRST_PANE|SECOND_PANE, <VERTICAL.string, HORIZONTAL.string>}}
      *  Localized string for first and second panes in the current orientation.  
-     * @see {@link getPaneTitle()} for more information
+     * @see {@link #getPaneTitle} for more information
      * @private
      */
     var _paneTitles  = {};
@@ -846,7 +846,7 @@ define(function (require, exports, module) {
      * sorts the pane's view list 
      * @param {!string} paneId - id of the pane to sort, ALL_PANES or ACTIVE_PANE
      * @param {sortFunctionCallback} compareFn - callback to determine sort order (called on each item)
-     * @see {@link Pane.sortViewList()} for more information
+     * @see {@link Pane#sortViewList} for more information
      * @see {@link https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/sort|Sort Array - MDN}
      * @private
      */
@@ -1073,7 +1073,7 @@ define(function (require, exports, module) {
         Resizer.makeResizable(firstPane.$el,
                               _orientation === HORIZONTAL ? Resizer.DIRECTION_VERTICAL : Resizer.DIRECTION_HORIZONTAL,
                               _orientation === HORIZONTAL ? Resizer.POSITION_BOTTOM : Resizer.POSITION_RIGHT,
-                              MIN_PANE_SIZE, false, false, false, true);
+                              MIN_PANE_SIZE, false, false, false, true, true);
         
         firstPane.$el.on("panelResizeUpdate", function () {
             _updateLayout();
@@ -1120,28 +1120,20 @@ define(function (require, exports, module) {
     
     /**
      * Edits a document in the specified pane.
-     * This function is only used by Unit Tests (which construct Mock Documents), 
-     *  The Deprecated API "setCurrentDocument" and by File > New 
-     *  because there is yet to be an established File object for the Document which is required 
-     *  for the open API.  
-     * Do not use this API unless you have a document object without a file object
+     * This function is only used by:
+     *  - Unit Tests (which construct Mock Document objects), 
+     *  - by File > New  because there is yet to be an established File object 
+     *  - by Find In Files which needs to open documents synchronously in some cases
+     * Do not use this API it is for internal use only
      * @param {!string} paneId - id of the pane in which to open the document
      * @param {!Document} doc - document to edit
-     * @param {{noPaneActivate:boolean=, noPaneRedundancyCheck:boolean=}=} optionsIn - options
+     * @param {{noPaneActivate:boolean=}=} optionsIn - options
      * @private
      */
     function _edit(paneId, doc, optionsIn) {
         var options = optionsIn || {},
-            currentPaneId;
+            currentPaneId  = _getPaneIdForPath(doc.file.fullPath);
         
-        if (options.noPaneRedundancyCheck) {
-            // This flag is for internal use only to improve performance
-            // Don't check for the file to have been opened in another pane pane which could be time
-            //  consuming.  should only be used when passing an actual paneId (not a special paneId)
-            //  and the caller has already done a redundancy check.  
-            currentPaneId = _getPaneIdForPath(doc.file.fullPath);
-        }
-   
         if (currentPaneId) {
             // If the doc is open in another pane then switch to that pane and call open document
             //  which will really just show the view as it has always done we could just 
@@ -1172,7 +1164,7 @@ define(function (require, exports, module) {
      * or a document for editing.  If it's a document for editing, edit is called on the document 
      * @param {!string} paneId - id of the pane in which to open the document
      * @param {!File} file - file to open
-     * @param {{noPaneActivate:boolean=, noPaneRedundancyCheck:boolean=}=} optionsIn - options
+     * @param {{noPaneActivate:boolean=}=} optionsIn - options
      * @return {jQuery.Promise}  promise that resolves to a File object or 
      *                           rejects with a File error or string
      */
@@ -1250,8 +1242,7 @@ define(function (require, exports, module) {
             DocumentManager.getDocumentForPath(file.fullPath)
                 .done(function (doc) {
                     _edit(paneId, doc, $.extend({}, options, {
-                        noPaneActivate: true,
-                        noPaneRedundancyCheck: true
+                        noPaneActivate: true
                     }));
                     doPostOpenActivation();
                     result.resolve(doc.file);
diff --git a/src/view/Pane.js b/src/view/Pane.js
index dcbd0c46088..b0a5a80db9b 100644
--- a/src/view/Pane.js
+++ b/src/view/Pane.js
@@ -170,8 +170,8 @@ define(function (require, exports, module) {
      * @param {boolean} requestIndex - true to request an index, false if not
      * @param {number} index - the index to request
      * @return {indexRequested:boolean, index:number} an object that can be pased to 
-     * Pane._addToViewList to insert the item at a specific index
-     * @see {Pane._addToViewList}
+     * {@link Pane#addToViewList} to insert the item at a specific index
+     * @see Pane#addToViewList
      */
     function _makeIndexRequestObject(requestIndex, index) {
         return {indexRequested: requestIndex, index: index};
@@ -585,7 +585,7 @@ define(function (require, exports, module) {
     
     /** 
      * Return value from reorderItem when the Item was not found 
-     * @see {@link reorderItem()}
+     * @see {@link Pane#reorderItem}
      * @const 
      */
     Pane.prototype.ITEM_NOT_FOUND = -1;
@@ -593,7 +593,7 @@ define(function (require, exports, module) {
     /** 
      * Return value from reorderItem when the Item was found at its natural index 
      * and the workingset does not need to be resorted
-     * @see {@link reorderItem()}
+     * @see {@link Pane#reorderItem}
      * @const 
      */
     Pane.prototype.ITEM_FOUND_NO_SORT = 0;
@@ -601,7 +601,7 @@ define(function (require, exports, module) {
     /** 
      * Return value from reorderItem when the Item was found and reindexed 
      * and the workingset needs to be resorted
-     * @see {@link reorderItem()}
+     * @see {@link Pane#reorderItem}
      * @const 
      */
     Pane.prototype.ITEM_FOUND_NEEDS_SORT = 1;
@@ -1256,7 +1256,7 @@ define(function (require, exports, module) {
         //
         // ==> Focus is still in the text area. Any keyboard input will modify the document
         
-        if (current.tagName === "textarea" &&
+        if (current.tagName.toLowerCase() === "textarea" &&
                 (!this._currentView || !this._currentView._codeMirror)) {
             current.blur();
         }
diff --git a/tasks/update-release-number.js b/tasks/update-release-number.js
index 1f25a88a634..cd291ceb317 100644
--- a/tasks/update-release-number.js
+++ b/tasks/update-release-number.js
@@ -25,22 +25,22 @@
 module.exports = function (grunt) {
     "use strict";
 
-    var common = require("./lib/common")(grunt);
+    var common = require("./lib/common")(grunt),
+        semver = require("semver");
 
     // task: update-release-number
     // Updates the version property in package.json
     grunt.registerTask('update-release-number', function () {
         var path        = "package.json",
             packageJSON = grunt.file.readJSON(path),
-            release     = grunt.option("release") || 0,
-            versionNumberRegexp = /([0-9]+\.)([0-9]+)([\.\-a-zA-Z0-9]*)?/;
+            release     = grunt.option("release") || "";
 
-        if (!release) {
-            grunt.fail.fatal("Please specify a release. e.g. grunt update-release-number --release=40");
+        if (!release || !semver.valid(release)) {
+            grunt.fail.fatal("Please specify a release. e.g. grunt update-release-number --release=1.1.0");
         }
 
-        packageJSON.version = packageJSON.version.replace(versionNumberRegexp, "$1" + release + "$3");
-        packageJSON.apiVersion = packageJSON.apiVersion.replace(versionNumberRegexp, "$1" + release + "$3");
+        packageJSON.version = release + "-0";
+        packageJSON.apiVersion = release;
 
         common.writeJSON(grunt, path, packageJSON);
     });
diff --git a/test/spec/CSSInlineEdit-test.js b/test/spec/CSSInlineEdit-test.js
index 243226f8cb5..0fefecac956 100644
--- a/test/spec/CSSInlineEdit-test.js
+++ b/test/spec/CSSInlineEdit-test.js
@@ -32,6 +32,7 @@ define(function (require, exports, module) {
 
     var testPath = SpecRunnerUtils.getTestPath("/spec/CSSInlineEdit-test-files");
 
+    // TODO: overlaps a lot with MultiRangeInlineEditor-test integration suite
     describe("CSS Inline Edit", function () {
         this.category = "integration";
 
@@ -41,6 +42,7 @@ define(function (require, exports, module) {
             EditorManager,
             CommandManager,
             DocumentManager,
+            PreferencesManager,
             Commands,
             FileSystem,
             Dialogs;
@@ -57,6 +59,7 @@ define(function (require, exports, module) {
                     FileSystem = brackets.test.FileSystem;
                     Dialogs = brackets.test.Dialogs;
                     DocumentManager = brackets.test.DocumentManager;
+                    PreferencesManager = brackets.test.PreferencesManager;
                     Commands = brackets.test.Commands;
                 });
             });
@@ -70,6 +73,7 @@ define(function (require, exports, module) {
             EditorManager = null;
             CommandManager = null;
             DocumentManager = null;
+            PreferencesManager = null;
             Commands = null;
             Dialogs = null;
             FileSystem = null;
@@ -93,7 +97,6 @@ define(function (require, exports, module) {
             if (index === undefined) {
                 index = 0;
             }
-
             return getInlineEditorWidgets()[index].$messageDiv;
         }
 
@@ -102,9 +105,18 @@ define(function (require, exports, module) {
         }
 
         function getRelatedFiles(inlineWidget) {
-            return inlineWidget.$relatedContainer.find(".related ul>li");
+            return inlineWidget.$relatedContainer.find(".related ul>li:not(.section-header)");
         }
 
+        function getRuleListSections(inlineWidget) {
+            return inlineWidget.$relatedContainer.find("li.section-header");
+        }
+        
+        function expectListItem($ruleListItem, ruleLabel, filename, lineNum) {  // TODO: duplicated with MultiRangeInlineEditor-test
+            expect($ruleListItem.text()).toBe(ruleLabel + " :" + lineNum);
+            expect($ruleListItem.data("filename")).toBe(filename);
+        }
+        
         function loadFile(file) {
             runs(function () {
                 var promise = SpecRunnerUtils.openProjectFiles([file]);
@@ -120,12 +132,13 @@ define(function (require, exports, module) {
         }
 
         function checkAvailableStylesheets(availableFilesInDropdown) {
+            // LESS/SCSS files are sorted above all CSS files. Files are otherwise sorted by path & then filename.
             expect(availableFilesInDropdown.length).toBe(5);
-            expect(availableFilesInDropdown[0].textContent).toEqual("test.css");
-            expect(availableFilesInDropdown[1].textContent).toEqual("test.less");
+            expect(availableFilesInDropdown[0].textContent).toEqual("test.less");
+            expect(availableFilesInDropdown[1].textContent).toEqual("test2.less");
             expect(availableFilesInDropdown[2].textContent).toEqual("test.scss");
-            expect(availableFilesInDropdown[3].textContent).toEqual("test2.css");
-            expect(availableFilesInDropdown[4].textContent).toEqual("test2.less");
+            expect(availableFilesInDropdown[3].textContent).toEqual("test.css");
+            expect(availableFilesInDropdown[4].textContent).toEqual("test2.css");
         }
 
         function getInlineEditorContent(ranges) {
@@ -133,9 +146,23 @@ define(function (require, exports, module) {
 
             return document.getRange({line: ranges.textRange.startLine, ch: 0}, {line: ranges.textRange.endLine, ch: document.getLine(ranges.textRange.endLine).length});
         }
-
+        
+        
         describe("CSS", function () {
+            
+            function resetCollapsedPrefs() {
+                var context = null; // for unit tests, we don't really need a project-specific setting
+                PreferencesManager.setViewState("inlineEditor.collapsedFiles", {}, context);
+            }
+            function makeInitiallyCollapsed(fullPath) {
+                var context = null; // for unit tests, we don't really need a project-specific setting
+                var setting = PreferencesManager.getViewState("inlineEditor.collapsedFiles", context) || {};
+                setting[fullPath] = true;
+                PreferencesManager.setViewState("inlineEditor.collapsedFiles", setting, context);
+            }
+            
             beforeEach(function () {
+                resetCollapsedPrefs();
                 loadFile("index-css.html");
             });
 
@@ -167,8 +194,8 @@ define(function (require, exports, module) {
 
                     var files = getRelatedFiles(inlineWidgets[0]);
                     expect(files.length).toBe(2);
-                    expect(files[0].textContent).toEqual(".standard — test.css : 1");
-                    expect(files[1].textContent).toEqual(".standard — test2.css : 1");
+                    expectListItem(files.eq(0), ".standard", "test.css", 1);
+                    expectListItem(files.eq(1), ".standard", "test2.css", 1);
 
                     // Check Inline Editor 2
                     expect(inlineEditorFileName(inlineWidgets[1])[0].text).toEqual("test.css : 8");
@@ -180,8 +207,8 @@ define(function (require, exports, module) {
 
                     files = getRelatedFiles(inlineWidgets[1]);
                     expect(files.length).toBe(2);
-                    expect(files[0].textContent).toEqual(".banner-new — test.css : 8");
-                    expect(files[1].textContent).toEqual(".banner-new — test2.css : 8");
+                    expectListItem(files.eq(0), ".banner-new", "test.css", 8);
+                    expectListItem(files.eq(1), ".banner-new", "test2.css", 8);
                 });
             });
 
@@ -192,13 +219,19 @@ define(function (require, exports, module) {
                 });
 
                 runs(function () {
-                    // open the dropdown
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    
+                    // verify New Rule dropdown contents
                     dropdownButton().click();
-
                     var availableFilesInDropdown = dropdownMenu().children();
                     checkAvailableStylesheets(availableFilesInDropdown);
 
+                    expect(inlineWidget._getSelectedRange()).toBe(null);
+                    expect(inlineWidget.editor).toBeNull();
+                    
                     expect(inlineEditorMessage().html()).toEqual(Strings.CSS_QUICK_EDIT_NO_MATCHES);
+                    
+                    expect(inlineWidget.$htmlContent.find(".related-container").length).toBe(0);  // rule list hidden
                 });
             });
 
@@ -209,51 +242,185 @@ define(function (require, exports, module) {
                 });
 
                 runs(function () {
-                    // open the dropdown
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(1);
+                    
+                    // verify New Rule dropdown contents
                     dropdownButton().click();
-
-                    var inlineWidgets = getInlineEditorWidgets();
-
                     var availableFilesInDropdown = dropdownMenu().children();
                     checkAvailableStylesheets(availableFilesInDropdown);
-                    expect(inlineEditorFileName(inlineWidgets[0])[0].text).toEqual("test.less : 5");
 
-                    var ranges = inlineWidgets[0]._ranges[0];
-                    var document = ranges.textRange.document;
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test.less : 5");
 
-                    expect(document.getRange({line: ranges.textRange.startLine, ch: 0}, {line: ranges.textRange.endLine, ch: document.getLine(ranges.textRange.endLine).length})).toEqual(".banner {\n    background-color: red;\n}");
+                    var range = inlineWidget._ranges[0].textRange;
+                    var document = range.document;
+                    expect(document.getRange({line: range.startLine, ch: 0}, {line: range.endLine, ch: document.getLine(range.endLine).length})).toEqual(".banner {\n    background-color: red;\n}");
+                    
+                    expect(inlineWidget.$htmlContent.find(".related-container").length).toBe(0);  // rule list hidden
                 });
             });
 
-            it("should show one matching rule in two files", function () {
+            it("should show first matching rule of two files", function () {
                 runs(function () {
                     var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 20, ch: 25});
                     waitsForDone(promise, "Open inline editor");
                 });
 
                 runs(function () {
-                    var inlineWidgets = getInlineEditorWidgets();
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(2);
 
-                    // open the dropdown
+                    // verify New Rule dropdown contents
                     dropdownButton().click();
-
                     var availableFilesInDropdown = dropdownMenu().children();
-                    expect(availableFilesInDropdown.length).toBe(5);
                     checkAvailableStylesheets(availableFilesInDropdown);
-                    expect(inlineEditorFileName(inlineWidgets[0])[0].text).toEqual("test.css : 8");
-
-                    var ranges = inlineWidgets[0]._ranges[0];
-                    var document = ranges.textRange.document;
+                    
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test.css : 8");
 
-                    expect(document.getRange({line: ranges.textRange.startLine, ch: 0}, {line: ranges.textRange.endLine, ch: document.getLine(ranges.textRange.endLine).length})).toEqual(".banner-new {\n    background-color: blue;\n}");
+                    var range = inlineWidget._ranges[0].textRange;
+                    var document = range.document;
+                    expect(document.getRange({line: range.startLine, ch: 0}, {line: range.endLine, ch: document.getLine(range.endLine).length})).toEqual(".banner-new {\n    background-color: blue;\n}");
 
-                    var files = getRelatedFiles(inlineWidgets[0]);
+                    var files = getRelatedFiles(inlineWidget);
                     expect(files.length).toBe(2);
-                    expect(files[0].textContent).toEqual(".banner-new — test.css : 8");
-                    expect(files[1].textContent).toEqual(".banner-new — test2.css : 8");
+                    expectListItem(files.eq(0), ".banner-new", "test.css", 8);
+                    expectListItem(files.eq(1), ".banner-new", "test2.css", 8);
+                    
+                    expect(inlineWidget.$htmlContent.find(".related-container").length).toBe(1);
+                });
+            });
+
+            it("should collapse section without changing selection, and remember collapsed state", function () {
+                runs(function () {
+                    var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 20, ch: 25});
+                    waitsForDone(promise, "Open inline editor");
+                });
+
+                runs(function () {
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(2);
+
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test.css : 8");
+                    
+                    var $ruleListSections = getRuleListSections(inlineWidget);
+                    expect($ruleListSections.eq(0).text()).toBe("test.css (1)");
+                    expect($ruleListSections.eq(1).text()).toBe("test2.css (1)");
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle.expanded").length).toBe(1);  // test.css is expanded
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);  // test2.css is expanded
+
+                    // Collapse test.css section (which contains the selection)
+                    $ruleListSections.eq(0).click();
+                    
+                    $ruleListSections = getRuleListSections(inlineWidget);
+                    expect($ruleListSections.eq(0).text()).toBe("test.css (1)");
+                    expect($ruleListSections.eq(1).text()).toBe("test2.css (1)");
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle:not(.expanded)").length).toBe(1); // test.css is now collapsed
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);  // test2.css is expanded
+                    
+                    // File in collapsed section is still selected - selection unchanged
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test.css : 8");
+
+                    // Close the inline editor
+                    waitsForDone(inlineWidget.close());
+                });
+                runs(function () {
+                    // Reopen it
+                    var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 20, ch: 25});
+                    waitsForDone(promise, "Open inline editor");
+                });
+                runs(function () {
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(2);
+
+                    // Verify that collapsed section is still collapsed
+                    var $ruleListSections = getRuleListSections(inlineWidget);
+                    expect($ruleListSections.eq(0).text()).toBe("test.css (1)");
+                    expect($ruleListSections.eq(1).text()).toBe("test2.css (1)");
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle:not(.expanded)").length).toBe(1); // test.css is still collapsed
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);  // test2.css is expanded
                 });
             });
+            
+            it("should initially select first non-collapsed result, and not change selection when expanding other groups", function () {
+                runs(function () {
+                    makeInitiallyCollapsed(testPath + "/css/test.css");
+                    
+                    var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 20, ch: 25});
+                    waitsForDone(promise, "Open inline editor");
+                });
 
+                runs(function () {
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(2);
+
+                    var $ruleListSections = getRuleListSections(inlineWidget);
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle:not(.expanded)").length).toBe(1);  // test.css is collapsed
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);   // test2.css is expanded
+
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test2.css : 8");
+                    
+                    expect(inlineWidget.$htmlContent.find(".related-container").length).toBe(1);
+                    
+                    // Opening a collapsed section shouldn't change the existing selection
+                    $ruleListSections.eq(0).click();
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle.expanded").length).toBe(1); // test.css now expanded
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);  // test2.css still expanded
+                    
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test2.css : 8");
+                });
+            });
+
+            it("should select nothing if all results collapsed with least 2 results, and auto-select a result on expand", function () {
+                runs(function () {
+                    makeInitiallyCollapsed(testPath + "/css/test.css");
+                    makeInitiallyCollapsed(testPath + "/css/test2.css");
+                    
+                    var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 20, ch: 25});
+                    waitsForDone(promise, "Open inline editor");
+                });
+
+                runs(function () {
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(2);
+
+                    var $ruleListSections = getRuleListSections(inlineWidget);
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle:not(.expanded)").length).toBe(1);  // test.css is collapsed
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle:not(.expanded)").length).toBe(1);  // test2.css is collapsed
+
+                    expect(inlineWidget._getSelectedRange()).toBe(null);
+                    expect(inlineWidget.editor).toBeNull();
+                    
+                    expect(inlineEditorMessage().html()).toEqual(Strings.INLINE_EDITOR_HIDDEN_MATCHES);
+                    expect(inlineWidget.$htmlContent.find(".related-container").length).toBe(1);    // rule list still visible though
+                    
+                    // Opening a collapsed section should select its first result
+                    $ruleListSections.eq(1).click();
+                    expect($ruleListSections.eq(0).find(".disclosure-triangle:not(.expanded)").length).toBe(1); // test.css still collapsed
+                    expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);  // test2.css now expanded
+                    
+                    expect(inlineWidget._getSelectedRange()).toBeTruthy();
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test2.css : 8");
+                });
+            });
+
+            it("should select collapsed result anyway if there's only one result total", function () {
+                runs(function () {
+                    makeInitiallyCollapsed(testPath + "/less/test.less");
+                    
+                    var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 17, ch: 15});
+                    waitsForDone(promise, "Open inline editor");
+                });
+
+                runs(function () {
+                    var inlineWidget = getInlineEditorWidgets()[0];
+                    expect(inlineWidget._ranges.length).toBe(1);
+
+                    expect(inlineEditorFileName(inlineWidget)[0].text).toEqual("test.less : 5");
+                    
+                    expect(inlineWidget.$htmlContent.find(".related-container").length).toBe(0);    // rule list hidden
+                });
+            });
+            
             it("should add the css file to the working set when modified in inline editor", function () {
                 runs(function () {
                     var promise = SpecRunnerUtils.toggleQuickEditAtOffset(EditorManager.getCurrentFullEditor(), {line: 48, ch: 25});
@@ -271,14 +438,14 @@ define(function (require, exports, module) {
 
                     var document = inlineWidgets[0].editor.document;
                     // modify scss to add it to the working set
-                    var scssFile = FileSystem.getFileForPath(testPath + "/scss/test.scss");
                     document.setText(".comment-scss-4 {\n    background-color: black;\n}");
 
-                    expect(DocumentManager.findInWorkingSet(scssFile.fullPath)).toBeGreaterThan(0);
+                    expect(DocumentManager.findInWorkingSet(testPath + "/scss/test.scss")).toBeGreaterThan(0);
                 });
             });
         });
-
+        
+        
         describe("LESS", function () {
             beforeEach(function () {
                 loadFile("index-less.html");
@@ -347,10 +514,10 @@ define(function (require, exports, module) {
 
                     expect(getInlineEditorContent(ranges)).toEqual("    &.banner-new2 {\n        background-color: blue;\n    }");
 
-                    var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                    var files = getRelatedFiles(inlineWidgets[0]);
                     expect(files.length).toBe(2);
-                    expect(files[0].textContent).toEqual("div / &.banner-new2 — test.less : 9");
-                    expect(files[1].textContent).toEqual(".banner-new2 — test2.less : 1");
+                    expectListItem(files.eq(0), "div / &.banner-new2", "test.less", 9);
+                    expectListItem(files.eq(1), ".banner-new2", "test2.less", 1);
                 });
             });
 
@@ -370,9 +537,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("        .level3 {\n            color: red;\n        }");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".level1 / .level2 / .level3 — test2.less : 11");
+                        expectListItem(files.eq(0), ".level1 / .level2 / .level3", "test2.less", 11);
                     });
                 });
 
@@ -391,9 +558,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual(".confuse1 {\n    /* {this comment is special(;:,)} */\n    .special {\n        color: #ff8000;\n    }\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".confuse1 — test2.less : 44");
+                        expectListItem(files.eq(0), ".confuse1", "test2.less", 44);
                     });
                 });
 
@@ -412,9 +579,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual(".compressed{color:red}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".compressed — test2.less : 51");
+                        expectListItem(files.eq(0), ".compressed", "test2.less", 51);
                     });
                 });
             });
@@ -437,7 +604,7 @@ define(function (require, exports, module) {
                         // It's not visible
                         var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".confuse1 / .special — test2.less : 45");
+                        expectListItem(files.eq(0), ".confuse1 / .special", "test2.less", 45);
                     });
                 });
 
@@ -456,9 +623,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("/* This is a single line block comment that should appear in the inline editor as first line */\n.comment1 {\n    text-align: center;\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".comment1 — test2.less : 17");
+                        expectListItem(files.eq(0), ".comment1", "test2.less", 17);
                     });
                 });
 
@@ -477,9 +644,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("// This is a single line comment that should appear in the inline editor as first line\n.comment4 {\n    text-align: center;\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".comment4 — test2.less : 33");
+                        expectListItem(files.eq(0), ".comment4", "test2.less", 33);
                     });
                 });
 
@@ -498,9 +665,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("/* This is a multiline block comment\n * that should appear in the inline editor\n */\n.comment2 {\n    text-decoration: overline;\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".comment2 — test2.less : 22");
+                        expectListItem(files.eq(0), ".comment2", "test2.less", 22);
                     });
                 });
 
@@ -519,9 +686,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual(".comment3 {\n    text-decoration: underline; /* EOL comment {}(,;:) */\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".comment3 — test2.less : 29");
+                        expectListItem(files.eq(0), ".comment3", "test2.less", 29);
                     });
                 });
             });
@@ -542,9 +709,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("    .uno, .dos {\n        color: red\n    }");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".uno, .dos — test2.less : 55");
+                        expectListItem(files.eq(0), ".uno, .dos", "test2.less", 55);
                     });
                 });
 
@@ -563,10 +730,10 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("    .uno, .dos {\n        color: red\n    }");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(2);
-                        expect(files[0].textContent).toEqual(".uno, .dos — test2.less : 55");
-                        expect(files[1].textContent).toEqual("#main / .dos — test2.less : 59");
+                        expectListItem(files.eq(0), ".uno, .dos", "test2.less", 55);
+                        expectListItem(files.eq(1), "#main / .dos", "test2.less", 59);
                     });
                 });
 
@@ -585,9 +752,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("    .tres,\n    .quattro {\n        color: blue;\n    }");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".tres, .quattro — test2.less : 65");
+                        expectListItem(files.eq(0), ".tres, .quattro", "test2.less", 65);
                     });
                 });
             });
@@ -608,9 +775,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual(".mixina-class {\n    .a();\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".mixina-class — test2.less : 86");
+                        expectListItem(files.eq(0), ".mixina-class", "test2.less", 86);
                     });
                 });
 
@@ -629,9 +796,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("#header-mixin-paramterized-default {\n    .border-radius;\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual("#header-mixin-paramterized-default — test2.less : 120");
+                        expectListItem(files.eq(0), "#header-mixin-paramterized-default", "test2.less", 120);
                     });
                 });
 
@@ -650,9 +817,9 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual("    #header-mixin-paramterized-custom-1 {\n        .border-radius(20px);\n    }");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual("#header-mixin-paramterized-custom / #header-mixin-paramterized-custom-1 — test2.less : 126");
+                        expectListItem(files.eq(0), "#header-mixin-paramterized-custom / #header-mixin-paramterized-custom-1", "test2.less", 126);
                     });
                 });
             });
@@ -674,15 +841,16 @@ define(function (require, exports, module) {
                         expect(getInlineEditorContent(ranges)).toEqual(".widget {\n    @{property}: #0ee;\n    background-@{property}: #999;\n}");
 
                         // It's not visible
-                        var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                        var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".widget — test2.less : 109");
+                        expectListItem(files.eq(0), ".widget", "test2.less", 109);
                     });
                 });
             });
 
         });
-
+        
+        
         describe("SCSS", function () {
             beforeEach(function () {
                 loadFile("index-css.html");
@@ -708,9 +876,9 @@ define(function (require, exports, module) {
                     expect(getInlineEditorContent(ranges)).toEqual("p {\n    $font-size: 12px;\n    $line-height: 30px;\n    font: #{$font-size}/#{$line-height};\n}");
 
                     // It's not visible
-                    var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                    var files = getRelatedFiles(inlineWidgets[0]);
                     expect(files.length).toBe(1);
-                    expect(files[0].textContent).toEqual("p — test.scss : 5");
+                    expectListItem(files.eq(0), "p", "test.scss", 5);
                 });
             });
 
@@ -730,9 +898,9 @@ define(function (require, exports, module) {
                     expect(getInlineEditorContent(ranges)).toEqual("#scss-1 {\n    background-color: blue;\n}");
 
                     // It's not visible
-                    var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                    var files = getRelatedFiles(inlineWidgets[0]);
                     expect(files.length).toBe(1);
-                    expect(files[0].textContent).toEqual("#scss-1 — test.scss : 11");
+                    expectListItem(files.eq(0), "#scss-1", "test.scss", 11);
                 });
             });
 
@@ -752,9 +920,9 @@ define(function (require, exports, module) {
                     expect(getInlineEditorContent(ranges)).toEqual("    &-ok {\n        background-image: url(\"ok.png\");\n    }");
 
                     // It's not visible
-                    var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                    var files = getRelatedFiles(inlineWidgets[0]);
                     expect(files.length).toBe(1);
-                    expect(files[0].textContent).toEqual(".button / &-ok — test.scss : 20");
+                    expectListItem(files.eq(0), ".button / &-ok", "test.scss", 20);
                 });
             });
 
@@ -774,9 +942,9 @@ define(function (require, exports, module) {
                     expect(getInlineEditorContent(ranges)).toEqual("a {\n    color: blue;\n}");
 
                     // It's not visible
-                    var files = inlineWidgets[0].$relatedContainer.find(".related ul>li");
+                    var files = getRelatedFiles(inlineWidgets[0]);
                     expect(files.length).toBe(1);
-                    expect(files[0].textContent).toEqual("a — test.scss : 37");
+                    expectListItem(files.eq(0), "a", "test.scss", 37);
                 });
             });
 
@@ -798,7 +966,7 @@ define(function (require, exports, module) {
                         // It's not visible
                         var files = getRelatedFiles(inlineWidgets[0]);
                         expect(files.length).toBe(1);
-                        expect(files[0].textContent).toEqual(".comment-scss-1 — test.scss : 41");
+                        expectListItem(files.eq(0), ".comment-scss-1", "test.scss", 41);
                     });
                 });
             });
diff --git a/test/spec/CSSUtils-test.js b/test/spec/CSSUtils-test.js
index 4d9ba9e16cd..77837bf36b5 100644
--- a/test/spec/CSSUtils-test.js
+++ b/test/spec/CSSUtils-test.js
@@ -1298,6 +1298,27 @@ define(function (require, exports, module) {
                 expect(result.length).toBe(0);
             });
                 
+            it("should find selectors that are after a rule starting with a pseudo selector/element", function () {
+                var css = ":focus { color:red; } \n" +
+                          "div { color:blue; } \n" +
+                          "::selection { color:green; } \n" +
+                          ".Foo { color:black } \n" +
+                          "#bar { color:blue } \n" +
+                          "#baR { color:white }";
+                           
+                var result = match(css, { tag: "div" });
+                expect(result.length).toBe(1);
+
+                result = matchAgain({ clazz: "Foo" });
+                expect(result.length).toBe(1);
+                
+                result = matchAgain({ id: "bar" });
+                expect(result.length).toBe(1);
+                
+                result = matchAgain({ id: "baR" });
+                expect(result.length).toBe(1);
+            });
+            
         }); // describe("Simple selectors")
         
         
diff --git a/test/spec/DocumentCommandHandlers-test.js b/test/spec/DocumentCommandHandlers-test.js
index 2653ced3ec9..2f817b40828 100644
--- a/test/spec/DocumentCommandHandlers-test.js
+++ b/test/spec/DocumentCommandHandlers-test.js
@@ -794,7 +794,7 @@ define(function (require, exports, module) {
             });
 
             // Regardless of platform, files with CRLF should be saved with CRLF and files with LF should be saved with LF
-            it("should preserve line endings when saving changes", function () {
+            it("should preserve line endings after Save", function () {
                 var crlfText = "line1\r\nline2\r\nline3",
                     lfText   = "line1\nline2\nline3",
                     crlfPath = testPath + "/crlfTest.js",
@@ -816,7 +816,6 @@ define(function (require, exports, module) {
                     promise = CommandManager.execute(Commands.FILE_OPEN, {fullPath: crlfPath});
                     waitsForDone(promise, "Open CRLF test file");
                 });
-                
                 runs(function () {
                     DocumentManager.getCurrentDocument().replaceRange("line2a\nline2b", {line: 1, ch: 0}, {line: 1, ch: 5});
                     promise = CommandManager.execute(Commands.FILE_SAVE);
@@ -828,14 +827,13 @@ define(function (require, exports, module) {
                     promise = CommandManager.execute(Commands.FILE_OPEN, {fullPath: lfPath});
                     waitsForDone(promise, "Open LF test file");
                 });
-                
                 runs(function () {
                     DocumentManager.getCurrentDocument().replaceRange("line2a\nline2b", {line: 1, ch: 0}, {line: 1, ch: 5});
                     promise = CommandManager.execute(Commands.FILE_SAVE);
                     waitsForDone(promise, "Save modified file");
                 });
                 
-                // verify file contents
+                // verify files' contents
                 runs(function () {
                     promise = FileUtils.readAsText(FileSystem.getFileForPath(crlfPath))
                         .done(function (actualText) {
@@ -854,14 +852,86 @@ define(function (require, exports, module) {
                 
                 // clean up
                 runs(function () {
-                    promise = SpecRunnerUtils.deletePath(crlfPath);
-                    waitsForDone(promise, "Remove CRLF test file");
+                    waitsForDone(SpecRunnerUtils.deletePath(crlfPath), "Remove CRLF test file");
+                    waitsForDone(SpecRunnerUtils.deletePath(lfPath),   "Remove LF test file");
+                });
+            });
+            
+            it("should preserve line endings after Save As", function () {  // bug #9179
+                var crlfText = "line1\r\nline2\r\nline3",
+                    lfText   = "line1\nline2\nline3",
+                    crlfPath = testPath + "/crlfTest.js",
+                    lfPath   = testPath + "/lfTest.js",
+                    crlfNewPath = testPath + "/saveAsCRLF.js",
+                    lfNewPath = testPath + "/saveAsLF.js",
+                    promise;
+                
+                // create test files (Git rewrites line endings, so these can't be kept in src control)
+                runs(function () {
+                    promise = FileUtils.writeText(FileSystem.getFileForPath(crlfPath), crlfText);
+                    waitsForDone(promise, "Create CRLF test file");
+                });
+                runs(function () {
+                    promise = FileUtils.writeText(FileSystem.getFileForPath(lfPath), lfText);
+                    waitsForDone(promise, "Create LF test file");
+                });
+                
+                // open, modify, and Save As (CRLF case)
+                runs(function () {
+                    promise = CommandManager.execute(Commands.FILE_OPEN, {fullPath: crlfPath});
+                    waitsForDone(promise, "Open CRLF test file");
+                });
+                runs(function () {
+                    DocumentManager.getCurrentDocument().replaceRange("line2a\nline2b", {line: 1, ch: 0}, {line: 1, ch: 5});
+                    
+                    spyOn(FileSystem, "showSaveDialog").andCallFake(function (dialogTitle, initialPath, proposedNewName, callback) {
+                        callback(undefined, crlfNewPath);
+                    });
+                    promise = CommandManager.execute(Commands.FILE_SAVE_AS);
+                    waitsForDone(promise, "Save As modified file");
+                });
+                
+                // open, modify, and Save As (LF case)
+                runs(function () {
+                    promise = CommandManager.execute(Commands.FILE_OPEN, {fullPath: lfPath});
+                    waitsForDone(promise, "Open LF test file");
+                });
+                runs(function () {
+                    DocumentManager.getCurrentDocument().replaceRange("line2a\nline2b", {line: 1, ch: 0}, {line: 1, ch: 5});
+                    
+                    FileSystem.showSaveDialog.andCallFake(function (dialogTitle, initialPath, proposedNewName, callback) {
+                        callback(undefined, lfNewPath);
+                    });
+                    promise = CommandManager.execute(Commands.FILE_SAVE_AS);
+                    waitsForDone(promise, "Save As modified file");
+                });
+                
+                // verify files' contents
+                runs(function () {
+                    promise = FileUtils.readAsText(FileSystem.getFileForPath(crlfNewPath))
+                        .done(function (actualText) {
+                            expect(actualText).toBe(crlfText.replace("line2", "line2a\r\nline2b"));
+                        });
+                    waitsForDone(promise, "Read CRLF save-as file");
+                });
+                
+                runs(function () {
+                    promise = FileUtils.readAsText(FileSystem.getFileForPath(lfNewPath))
+                        .done(function (actualText) {
+                            expect(actualText).toBe(lfText.replace("line2", "line2a\nline2b"));
+                        });
+                    waitsForDone(promise, "Read LF save-as file");
                 });
+                
+                // clean up
                 runs(function () {
-                    promise = SpecRunnerUtils.deletePath(lfPath);
-                    waitsForDone(promise, "Remove LF test file");
+                    waitsForDone(SpecRunnerUtils.deletePath(crlfPath),    "Remove CRLF test file");
+                    waitsForDone(SpecRunnerUtils.deletePath(lfPath),      "Remove LF test file");
+                    waitsForDone(SpecRunnerUtils.deletePath(crlfNewPath), "Remove CRLF save-as file");
+                    waitsForDone(SpecRunnerUtils.deletePath(lfNewPath),   "Remove LF save-as file");
                 });
             });
+            
         });
         
         
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions1/mock-extension-v1.0.0.zip b/test/spec/ExtensionManager-test-files/auto-install-extensions1/mock-extension-v1.0.0.zip
new file mode 100644
index 00000000000..cedc0da2c02
Binary files /dev/null and b/test/spec/ExtensionManager-test-files/auto-install-extensions1/mock-extension-v1.0.0.zip differ
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions1/not-an-extension.zip b/test/spec/ExtensionManager-test-files/auto-install-extensions1/not-an-extension.zip
new file mode 100644
index 00000000000..79719fab007
Binary files /dev/null and b/test/spec/ExtensionManager-test-files/auto-install-extensions1/not-an-extension.zip differ
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions1/should-be-ignored.txt b/test/spec/ExtensionManager-test-files/auto-install-extensions1/should-be-ignored.txt
new file mode 100644
index 00000000000..c2d32e12783
--- /dev/null
+++ b/test/spec/ExtensionManager-test-files/auto-install-extensions1/should-be-ignored.txt
@@ -0,0 +1 @@
+This file should be ignored
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions2/mock-extension-v1.1.1.zip b/test/spec/ExtensionManager-test-files/auto-install-extensions2/mock-extension-v1.1.1.zip
new file mode 100644
index 00000000000..657fb2781bb
Binary files /dev/null and b/test/spec/ExtensionManager-test-files/auto-install-extensions2/mock-extension-v1.1.1.zip differ
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions3/a-mock-extension-v1.0.0.zip b/test/spec/ExtensionManager-test-files/auto-install-extensions3/a-mock-extension-v1.0.0.zip
new file mode 100644
index 00000000000..cedc0da2c02
Binary files /dev/null and b/test/spec/ExtensionManager-test-files/auto-install-extensions3/a-mock-extension-v1.0.0.zip differ
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions3/b-mock-extension-v1.1.1.zip b/test/spec/ExtensionManager-test-files/auto-install-extensions3/b-mock-extension-v1.1.1.zip
new file mode 100644
index 00000000000..657fb2781bb
Binary files /dev/null and b/test/spec/ExtensionManager-test-files/auto-install-extensions3/b-mock-extension-v1.1.1.zip differ
diff --git a/test/spec/ExtensionManager-test-files/auto-install-extensions3/c-mock-extension-v1.1.0.zip b/test/spec/ExtensionManager-test-files/auto-install-extensions3/c-mock-extension-v1.1.0.zip
new file mode 100644
index 00000000000..356b1b14777
Binary files /dev/null and b/test/spec/ExtensionManager-test-files/auto-install-extensions3/c-mock-extension-v1.1.0.zip differ
diff --git a/test/spec/ExtensionManager-test.js b/test/spec/ExtensionManager-test.js
index 022ee60ed41..cba2a4b902f 100644
--- a/test/spec/ExtensionManager-test.js
+++ b/test/spec/ExtensionManager-test.js
@@ -447,6 +447,178 @@ define(function (require, exports, module) {
             });
         });
 
+        describe("Auto-Install Extensions", function () {
+
+            function lookupFileName(zipArray, fileName) {
+                return zipArray.some(function (zip) {
+                    return (zip.file.name === fileName);
+                });
+            }
+
+            function addZipFilesToArray(array, result) {
+                result.installZips.every(function (zip) {
+                    array[zip.info.metadata.name] = zip.info.metadata.version;
+                });
+                result.updateZips.every(function (zip) {
+                    array[zip.info.metadata.name] = zip.info.metadata.version;
+                });
+            }
+
+            it("should correctly handle auto-install extension zip files", function () {
+                var promiseFail    = false,
+                    promiseResult  = null,
+                    autoExtensions = {},
+                    dirPath        = SpecRunnerUtils.getTestPath("/spec/ExtensionManager-test-files/auto-install-extensions1");
+
+                // Should find 1 install zip
+                runs(function () {
+                    ExtensionManager._getAutoInstallFiles(dirPath, autoExtensions)
+                        .done(function (result) {
+                            addZipFilesToArray(autoExtensions, result);
+                            promiseResult = result;
+                        })
+                        .fail(function (err) {
+                            promiseFail = true;
+                            expect("[_getAutoInstallFiles] promise rejected with: " + err).toBe("(expected resolved instead)");
+                        });
+                });
+
+                waitsFor(function () {
+                    return promiseResult || promiseFail;
+                }, "_getAutoInstallFiles success [_getAutoInstallFiles]", 1000);
+
+                runs(function () {
+                    expect(promiseResult).toBeTruthy();
+                    if (promiseResult) {
+                        expect(promiseResult.installZips.length).toBe(1);
+                        expect(promiseResult.updateZips.length).toBe(0);
+
+                        // Extension
+                        expect(lookupFileName(promiseResult.installZips, "mock-extension-v1.0.0.zip")).toBeTruthy();
+
+                        // Not extensions
+                        expect(lookupFileName(promiseResult.installZips, "ignore-this-folder")).toBeFalsy();
+                        expect(lookupFileName(promiseResult.installZips, "not-an-extension.zip")).toBeFalsy();
+                        expect(lookupFileName(promiseResult.installZips, "should-be-ignored.txt")).toBeFalsy();
+                    }
+                });
+
+                // Subsequent run of first folder should find 0 install zips
+                runs(function () {
+                    promiseFail   = false;
+                    promiseResult = null;
+                    ExtensionManager._getAutoInstallFiles(dirPath, autoExtensions)
+                        .done(function (result) {
+                            addZipFilesToArray(autoExtensions, result);
+                            promiseResult = result;
+                        })
+                        .fail(function (err) {
+                            promiseFail = true;
+                            expect("[_getAutoInstallFiles] promise rejected with: " + err).toBe("(expected resolved instead)");
+                        });
+                });
+
+                waitsFor(function () {
+                    return promiseResult || promiseFail;
+                }, "_getAutoInstallFiles success [_getAutoInstallFiles]", 1000);
+
+                runs(function () {
+                    expect(promiseResult).toBeTruthy();
+                    if (promiseResult) {
+                        expect(promiseResult.installZips.length).toBe(0);
+                        expect(promiseResult.updateZips.length).toBe(0);
+
+                        // Extension already installed
+                        expect(lookupFileName(promiseResult.installZips, "mock-extension-v1.0.0.zip")).toBeFalsy();
+
+                        // Not extensions
+                        expect(lookupFileName(promiseResult.installZips, "ignore-this-folder")).toBeFalsy();
+                        expect(lookupFileName(promiseResult.installZips, "not-an-extension.zip")).toBeFalsy();
+                        expect(lookupFileName(promiseResult.installZips, "should-be-ignored.txt")).toBeFalsy();
+                    }
+                });
+
+            });
+
+            it("should detect auto-install extension is an update", function () {
+                var promiseFail    = false,
+                    promiseResult  = null,
+                    autoExtensions = {},
+                    dirPath        = SpecRunnerUtils.getTestPath("/spec/ExtensionManager-test-files/auto-install-extensions2");
+
+                runs(function () {
+                    mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">0.1"]) };
+                    var mockInstallInfo = { "mock-extension": { installInfo: makeMockInstalledVersion(mockRegistry["mock-extension"], "1.0.0") } };
+                    ExtensionManager._setExtensions(mockInstallInfo);
+
+                    ExtensionManager._getAutoInstallFiles(dirPath, autoExtensions)
+                        .done(function (result) {
+                            addZipFilesToArray(autoExtensions, result);
+                            promiseResult = result;
+                        })
+                        .fail(function (err) {
+                            promiseFail = true;
+                            expect("[_getAutoInstallFiles] promise rejected with: " + err).toBe("(expected resolved instead)");
+                        });
+                });
+
+                waitsFor(function () {
+                    return promiseResult || promiseFail;
+                }, "_getAutoInstallFiles success [_getAutoInstallFiles]", 1000);
+
+                runs(function () {
+                    expect(promiseResult).toBeTruthy();
+                    if (promiseResult) {
+                        expect(promiseResult.installZips.length).toBe(0);
+                        expect(promiseResult.updateZips.length).toBe(1);
+
+                        // Extension
+                        expect(lookupFileName(promiseResult.updateZips, "mock-extension-v1.1.1.zip")).toBeTruthy();
+                    }
+                });
+            });
+
+            it("should correctly handle multiple auto-install extension zip files of same extension", function () {
+                var promiseFail    = false,
+                    promiseResult  = null,
+                    autoExtensions = {},
+                    dirPath        = SpecRunnerUtils.getTestPath("/spec/ExtensionManager-test-files/auto-install-extensions3");
+
+                // There are 3 zips of same extension using 3 different versions. Only the latest should be returned.
+                runs(function () {
+                    ExtensionManager._getAutoInstallFiles(dirPath, autoExtensions)
+                        .done(function (result) {
+                            addZipFilesToArray(autoExtensions, result);
+                            promiseResult = result;
+                        })
+                        .fail(function (err) {
+                            promiseFail = true;
+                            expect("[_getAutoInstallFiles] promise rejected with: " + err).toBe("(expected resolved instead)");
+                        });
+                });
+
+                waitsFor(function () {
+                    return promiseResult || promiseFail;
+                }, "_getAutoInstallFiles success [_getAutoInstallFiles]", 1000);
+
+                runs(function () {
+                    expect(promiseResult).toBeTruthy();
+                    if (promiseResult) {
+                        expect(promiseResult.installZips.length).toBe(1);
+                        expect(promiseResult.updateZips.length).toBe(0);
+
+                        // Latest version
+                        // Note that files are named to try to force code to hit desired branches, but order is arbitrary.
+                        expect(lookupFileName(promiseResult.installZips, "b-mock-extension-v1.1.1.zip")).toBeTruthy();
+
+                        // Older versions
+                        expect(lookupFileName(promiseResult.installZips, "a-mock-extension-v1.0.0.zip")).toBeFalsy();
+                        expect(lookupFileName(promiseResult.installZips, "c-mock-extension-v1.1.0.zip")).toBeFalsy();
+                    }
+                });
+            });
+        });
+
         describe("ExtensionManagerView Model", function () {
             describe("when initialized from registry", function () {
                 var model;
@@ -1023,7 +1195,7 @@ define(function (require, exports, module) {
                 
                 it("should show disabled install button if requires newer API version", function () {   // isCompatible: false, requiresNewer: true
                     runs(function () {
-                        mockRegistry = { "mock-extension": makeMockExtension([">0.100"]) };
+                        mockRegistry = { "mock-extension": makeMockExtension([">100.0"]) };
                         setupViewWithMockData(ExtensionManagerViewModel.RegistryViewModel);
                     });
                     runs(function () {
@@ -1057,7 +1229,7 @@ define(function (require, exports, module) {
                 
                 it("should show enabled install button if latest requires newer API version", function () { // isCompatible: true, isLatestVersion: false, requiresNewer: true
                     runs(function () {
-                        mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">0.100"]) };
+                        mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">100.0"]) };
                         setupViewWithMockData(ExtensionManagerViewModel.RegistryViewModel);
                     });
                     runs(function () {
@@ -1105,7 +1277,7 @@ define(function (require, exports, module) {
                 
                 it("should install latest compatible version", function () {
                     runs(function () {
-                        mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">0.2", ">0.100"]) };
+                        mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">0.2", ">100.0"]) };
                         setupViewWithMockData(ExtensionManagerViewModel.RegistryViewModel);
                     });
                     runs(function () {
@@ -1152,7 +1324,7 @@ define(function (require, exports, module) {
                 });
                 
                 it("should show disabled update button for items whose available update requires newer API version", function () {   // isLatestVersion: false, requiresNewer: true
-                    mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">0.100"]) };
+                    mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">100.0"]) };
                     var mockInstallInfo = { "mock-extension": { installInfo: makeMockInstalledVersion(mockRegistry["mock-extension"], "1.0.0") } };
                     ExtensionManager._setExtensions(mockInstallInfo);
                     setupViewWithMockData(ExtensionManagerViewModel.RegistryViewModel);
@@ -1414,7 +1586,7 @@ define(function (require, exports, module) {
                 });
                 
                 it("should show disabled update button for items whose available update requires newer API version", function () {   // isLatestVersion: false, requiresNewer: true
-                    mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">0.100"]) };
+                    mockRegistry = { "mock-extension": makeMockExtension([">0.1", ">100.0"]) };
                     var mockInstallInfo = { "mock-extension": { installInfo: makeMockInstalledVersion(mockRegistry["mock-extension"], "1.0.0") } };
                     ExtensionManager._setExtensions(mockInstallInfo);
                     waitsForDone(ExtensionManager.downloadRegistry()); // ensure mockRegistry integrated in
diff --git a/test/spec/FindInFiles-test.js b/test/spec/FindInFiles-test.js
index 893eb4e8891..cf4bf47672b 100644
--- a/test/spec/FindInFiles-test.js
+++ b/test/spec/FindInFiles-test.js
@@ -1627,25 +1627,40 @@ define(function (require, exports, module) {
                     });
 
                     runs(function () {
-                        expect(DocumentManager.getCurrentDocument().file.fullPath).toEqual(testPath + "/css/foo.css");
+                        var expectedFile = testPath + "/foo.html";
+                        expect(DocumentManager.getCurrentDocument().file.fullPath).toBe(expectedFile);
+                        expect(MainViewManager.findInWorkingSet(MainViewManager.ACTIVE_PANE, expectedFile)).not.toBe(-1);
                     });
                 });
 
                 it("should select the first modified file in the working set if replacements are done in memory and no editor was open", function () {
                     openTestProjectCopy(defaultSourcePath);
 
+                    var testFiles = ["/css/foo.css", "/foo.html", "/foo.js"];
+                    
                     doInMemoryTest({
                         queryInfo:         {query: "foo"},
                         numMatches:        14,
                         replaceText:       "bar",
                         knownGoodFolder:   "unchanged",
                         forceFilesOpen:    true,
-                        inMemoryFiles:     ["/css/foo.css", "/foo.html", "/foo.js"],
+                        inMemoryFiles:     testFiles,
                         inMemoryKGFolder:  "simple-case-insensitive"
                     });
 
+                    
                     runs(function () {
-                        expect(DocumentManager.getCurrentDocument().file.fullPath).toEqual(testPath + "/css/foo.css");
+                        // since nothing was opened prior to doing the 
+                        //  replacements then the first file modified will be opened. 
+                        // This may not be the first item in the array above
+                        //  since the files are sorted differently in performReplacements
+                        //  and the replace is performed asynchronously.  
+                        // So, just ensure that *something* was opened
+                        expect(DocumentManager.getCurrentDocument().file.fullPath).toBeTruthy();
+                        
+                        testFiles.forEach(function (relPath) {
+                            expect(MainViewManager.findInWorkingSet(MainViewManager.ACTIVE_PANE, testPath + relPath)).not.toBe(-1);
+                        });
                     });
                 });
 
@@ -2149,8 +2164,8 @@ define(function (require, exports, module) {
                             $(".check-one").eq(1).click();
                             expect($(".check-one").eq(1).is(":checked")).toBeFalsy();
                             expect($(".check-all").is(":checked")).toBeFalsy();
-                            // In the sorting, this item should be the second match in the first file, which is css/foo.css.
-                            var uncheckedMatch = FindInFiles.searchModel.results[testPath + "/css/foo.css"].matches[1];
+                            // In the sorting, this item should be the second match in the first file, which is foo.html
+                            var uncheckedMatch = FindInFiles.searchModel.results[testPath + "/foo.html"].matches[1];
                             expect(uncheckedMatch.isChecked).toBe(false);
                             // Check that all items in the model besides the unchecked one to be checked.
                             expect(_.every(FindInFiles.searchModel.results, function (result) {
diff --git a/test/spec/KeyBindingManager-test-files/blank.json b/test/spec/KeyBindingManager-test-files/blank.json
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/test/spec/KeyBindingManager-test-files/duplicateShortcuts.json b/test/spec/KeyBindingManager-test-files/duplicateShortcuts.json
new file mode 100644
index 00000000000..231f5c298f9
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/duplicateShortcuts.json
@@ -0,0 +1,9 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-2": "file.openFolder",
+        "Ctrl-2": "file.openFolder",
+        "Ctrl-Alt-4": "view.hideSidebar",
+        "Alt-Ctrl-4": "view.hideSidebar"
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/empty.json b/test/spec/KeyBindingManager-test-files/empty.json
new file mode 100644
index 00000000000..7a73a41bfdf
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/empty.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/invalid.json b/test/spec/KeyBindingManager-test-files/invalid.json
new file mode 100644
index 00000000000..e3e486d0c21
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/invalid.json
@@ -0,0 +1,6 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "cmd-o": "file.open",
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/invalidKeys.json b/test/spec/KeyBindingManager-test-files/invalidKeys.json
new file mode 100644
index 00000000000..f8e80cff063
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/invalidKeys.json
@@ -0,0 +1,11 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "command-2": "file.openFolder",
+        "Option-Cmd-Backspace": "view.hideSidebar",
+        "no_modifier_key": "file.openFolder",
+        "Home": "view.hideSidebar",
+        "ctrl-kk": "file.openFolder",
+        "cmd-Delete": "view.hideSidebar"
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/keymap.json b/test/spec/KeyBindingManager-test-files/keymap.json
new file mode 100644
index 00000000000..c14929042c5
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/keymap.json
@@ -0,0 +1,9 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-2": "file.openFolder",
+        "Alt-Ctrl-Backspace": "view.hideSidebar",
+        "ctrl-l": "navigate.gotoDefinition",
+        "Alt-Ctrl-L": null
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/keymap1.json b/test/spec/KeyBindingManager-test-files/keymap1.json
new file mode 100644
index 00000000000..bd6483ae35a
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/keymap1.json
@@ -0,0 +1,8 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-2": "view.hideSidebar",
+        "ctrl-l": "navigate.gotoDefinition",
+        "Alt-Ctrl-L": null
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/macKeymap.json b/test/spec/KeyBindingManager-test-files/macKeymap.json
new file mode 100644
index 00000000000..8c5ee543b37
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/macKeymap.json
@@ -0,0 +1,9 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-2": "file.openFolder",
+        "Alt-Cmd-Backspace": "view.hideSidebar",
+        "ctrl-l": "navigate.gotoDefinition",
+        "Alt-Cmd-L": null
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/macKeymap1.json b/test/spec/KeyBindingManager-test-files/macKeymap1.json
new file mode 100644
index 00000000000..854b492670a
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/macKeymap1.json
@@ -0,0 +1,8 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-2": "view.hideSidebar",
+        "ctrl-l": "navigate.gotoDefinition",
+        "Alt-Cmd-L": null
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/macRestrictedShortcut.json b/test/spec/KeyBindingManager-test-files/macRestrictedShortcut.json
new file mode 100644
index 00000000000..1ed1fbeec2c
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/macRestrictedShortcut.json
@@ -0,0 +1,8 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "cmd-z": "edit.selectLine",
+        "Cmd-m": "view.hideSidebar", 
+        "cmd-h": "navigate.quickOpen"
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/multipleShortcuts.json b/test/spec/KeyBindingManager-test-files/multipleShortcuts.json
new file mode 100644
index 00000000000..6627fa2a34b
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/multipleShortcuts.json
@@ -0,0 +1,9 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-2": "file.openFolder",
+        "ctrl-3": "file.openFolder",
+        "ctrl-alt-4": "view.hideSidebar",
+        "ctrl-shift-4": "view.hideSidebar"
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/reassignCopy.json b/test/spec/KeyBindingManager-test-files/reassignCopy.json
new file mode 100644
index 00000000000..1737b08b793
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/reassignCopy.json
@@ -0,0 +1,6 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-o": "edit.copy"
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/restrictedShortcut.json b/test/spec/KeyBindingManager-test-files/restrictedShortcut.json
new file mode 100644
index 00000000000..8168d7ce6aa
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/restrictedShortcut.json
@@ -0,0 +1,6 @@
+{
+    "documentation": "https://github.com/adobe/brackets/wiki/Key-Bindings",
+    "overrides": {
+        "ctrl-z": "edit.selectLine"
+    } 
+}
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test-files/whitespace.json b/test/spec/KeyBindingManager-test-files/whitespace.json
new file mode 100644
index 00000000000..01ad2f9a66d
--- /dev/null
+++ b/test/spec/KeyBindingManager-test-files/whitespace.json
@@ -0,0 +1 @@
+   
\ No newline at end of file
diff --git a/test/spec/KeyBindingManager-test.js b/test/spec/KeyBindingManager-test.js
index 74ac946d163..24c9f00b7ce 100644
--- a/test/spec/KeyBindingManager-test.js
+++ b/test/spec/KeyBindingManager-test.js
@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, browser: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, describe, beforeEach, afterEach, it, expect, brackets */
+/*global define, describe, beforeEach, afterEach, it, expect, brackets, spyOn, runs, waits */
 /*unittests: KeyBindingManager */
 
 define(function (require, exports, module) {
@@ -33,7 +33,42 @@ define(function (require, exports, module) {
 
     // Load dependent modules
     var CommandManager      = require("command/CommandManager"),
-        KeyBindingManager   = require("command/KeyBindingManager");
+        Dialogs             = require("widgets/Dialogs"),
+        KeyBindingManager   = require("command/KeyBindingManager"),
+        SpecRunnerUtils     = require("spec/SpecRunnerUtils"),
+        Strings             = require("strings"),
+        _                   = require("thirdparty/lodash");
+    
+    var platform = brackets.platform;
+        
+    var testPath            = SpecRunnerUtils.getTestPath("/spec/KeyBindingManager-test-files");
+
+    var executed,
+        testCommandFn       = function () { executed = true; };
+    
+    var defaultKeyBindings = {
+            "Ctrl-L": "edit.selectLine",
+            "Ctrl-Alt-L": "edit.splitSelIntoLines",
+            "Alt-Shift-Down": "edit.addCursorToNextLine",
+            "Alt-Shift-Up": "edit.addCursorToPrevLine",
+            "F8": "navigate.gotoFirstProblem",
+            "Ctrl-Alt-O": "file.openFolder",
+            "Ctrl-Alt-H": "view.hideSidebar",
+            "Ctrl-Shift-O": "navigate.quickOpen",
+            "Ctrl-T": "navigate.gotoDefinition"
+        },
+        macDefaultKeyBindings = {
+            "Ctrl-L": "edit.selectLine",
+            "Alt-Cmd-L": "edit.splitSelIntoLines",
+            "Alt-Shift-Down": "edit.addCursorToNextLine",
+            "Alt-Shift-Up": "edit.addCursorToPrevLine",
+            "Cmd-'": "navigate.gotoFirstProblem",
+            "Alt-Cmd-O": "file.openFolder",
+            "Shift-Cmd-H": "view.hideSidebar",
+            "Shift-Cmd-O": "navigate.quickOpen",
+            "Cmd-T": "navigate.gotoDefinition"
+        };
+
     
     function key(k, displayKey, explicitPlatform) {
         return {
@@ -60,9 +95,37 @@ define(function (require, exports, module) {
         return map;
     }
     
-    describe("KeyBindingManager", function () {
+    function populateDefaultKeyMap() {
+        var defaults = (platform === "mac") ? macDefaultKeyBindings : defaultKeyBindings,
+            index = 0;
+
+        _.forEach(defaults, function (commandID, key) {
+            ++index;
+            CommandManager.register("test command" + index.toString(), commandID, testCommandFn);
+        });
+    }
+    
+    function getDefaultKeyMap() {
+        var bindings = [],
+            defaults = (platform === "mac") ? macDefaultKeyBindings : defaultKeyBindings,
+            displayKey = "",
+            explicitPlatform;
         
-        var platform = brackets.platform;
+        _.forEach(defaults, function (commandID, key) {
+            displayKey = KeyBindingManager._getDisplayKey(key);
+            if (platform === "mac") {
+                explicitPlatform = undefined;
+                if (commandID === "edit.selectLine" || commandID === "view.hideSidebar" ||
+                        commandID === "navigate.gotoFirstProblem") {
+                    explicitPlatform = "mac";
+                }
+            }
+            bindings.push(keyBinding(key, commandID, displayKey, explicitPlatform));
+        });
+        return keyMap(bindings);
+    }
+    
+    describe("KeyBindingManager", function () {
         
         beforeEach(function () {
             CommandManager._testReset();
@@ -382,6 +445,304 @@ define(function (require, exports, module) {
             
         });
 
+        describe("Load User Key Map", function () {
+            
+            it("should show an error when loading an image file as a user key map file", function () {
+                runs(function () {
+                    var imageTestFilesPath = SpecRunnerUtils.getTestPath("/spec/test-image-files");
+                    KeyBindingManager._setUserKeyMapFilePath(imageTestFilesPath + "/eye.jpg");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        expect(message).toEqual(Strings.ERROR_LOADING_KEYMAP);
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+            
+            it("should show an error when loading a corrupted key map file", function () {
+                runs(function () {
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/invalid.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        expect(message).toEqual(Strings.ERROR_KEYMAP_CORRUPT);
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+
+            it("should show an error when loading a key map file with only whitespaces", function () {
+                runs(function () {
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/whitespace.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        expect(message).toEqual(Strings.ERROR_KEYMAP_CORRUPT);
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+
+            it("should NOT show any error when loading a user key map file with an empty object", function () {
+                runs(function () {
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/empty.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).not.toHaveBeenCalled();
+                });
+            });
+
+            it("should NOT show any error when loading a zero-byte user key map file", function () {
+                runs(function () {
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/blank.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).not.toHaveBeenCalled();
+                });
+            });
+
+            it("should show an error when attempting to reassign a special command", function () {
+                runs(function () {
+                    CommandManager.register("test copy command", "edit.copy", testCommandFn);
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/reassignCopy.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        var msgPrefix = Strings.ERROR_RESTRICTED_COMMANDS.replace("{0}", "");
+                        expect(message).toMatch(msgPrefix);
+                        expect(message).toMatch("edit.copy");
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+
+            it("should show an error when attempting to reassign a restricted shortcut (either bind to a special command or a mac system shortcut)", function () {
+                var testFilePath = (platform === "mac") ? (testPath + "/macRestrictedShortcut.json") : (testPath + "/restrictedShortcut.json");
+                runs(function () {
+                    brackets.platform = platform;
+                    populateDefaultKeyMap();
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testFilePath);
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        var msgPrefix = Strings.ERROR_RESTRICTED_SHORTCUTS.replace("{0}", "");
+                        expect(message).toMatch(msgPrefix);
+                        if (platform === "mac") {
+                            expect(message).toMatch("cmd-z");
+                            expect(message).toMatch("Cmd-m");
+                            expect(message).toMatch("cmd-h");
+                        } else {
+                            expect(message).toMatch("ctrl-z");
+                        }
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+
+            it("should show an error when attempting to assign multiple shortcuts to the same command", function () {
+                runs(function () {
+                    brackets.platform = platform;
+                    populateDefaultKeyMap();
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/multipleShortcuts.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        var msgPrefix = Strings.ERROR_MULTIPLE_SHORTCUTS.replace("{0}", "");
+                        expect(message).toMatch(msgPrefix);
+                        expect(message).toMatch("file.openFolder");
+                        expect(message).toMatch("view.hideSidebar");
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+
+            it("should show an error when attempting to set duplicate shortcuts", function () {
+                runs(function () {
+                    brackets.platform = platform;
+                    populateDefaultKeyMap();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/duplicateShortcuts.json");
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        var msgPrefix = Strings.ERROR_DUPLICATE_SHORTCUTS.replace("{0}", "");
+                        expect(message).toMatch(msgPrefix);
+                        expect(message).toMatch("Ctrl-2");
+                        expect(message).toMatch("Alt-Ctrl-4");
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+        
+            it("should show an error when parsing invalid shortcuts", function () {
+                runs(function () {
+                    brackets.platform = platform;
+                    populateDefaultKeyMap();
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/invalidKeys.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        var msgPrefix = Strings.ERROR_INVALID_SHORTCUTS.replace("{0}", "");
+                        expect(message).toMatch(msgPrefix);
+                        expect(message).toMatch("command-2");
+                        expect(message).toMatch("Home");
+                        expect(message).toMatch("Option-Cmd-Backspace");
+                        expect(message).toMatch("ctrl-kk");
+                        expect(message).toMatch("cmd-Delete");
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+        
+            it("should show an error when attempting to set shortcuts to non-existent commands", function () {
+                runs(function () {
+                    // The command map has to be empty for this test case. So we are intentionally NOT calling 
+                    // populateDefaultKeyMap() before loading the user key map.
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    KeyBindingManager._setUserKeyMapFilePath(testPath + "/keymap.json");
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        var msgPrefix = Strings.ERROR_NONEXISTENT_COMMANDS.replace("{0}", "");
+                        expect(message).toMatch(msgPrefix);
+                        expect(message).toMatch("file.openFolder");
+                        expect(message).toMatch("view.hideSidebar");
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    expect(Dialogs.showModalDialog).toHaveBeenCalled();
+                });
+            });
+        
+            it("should update key map with the user specified key bindings", function () {
+                var testFilePath = (platform === "mac") ? (testPath + "/macKeymap.json") : (testPath + "/keymap.json");
+                runs(function () {
+                    brackets.platform = platform;
+                    var defKeyMap = getDefaultKeyMap();
+                    populateDefaultKeyMap();
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    expect(KeyBindingManager.getKeymap()).toEqual(defKeyMap);
+                    KeyBindingManager._setUserKeyMapFilePath(testFilePath);
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    var keymap = KeyBindingManager.getKeymap(),
+                        reassignedKey1 = (platform === "mac") ? "Alt-Cmd-Backspace" : "Ctrl-Alt-Backspace",
+                        reassignedKey2 = (platform === "mac") ? "Cmd-T" : "Ctrl-T";
+                    expect(Dialogs.showModalDialog).not.toHaveBeenCalled();
+                    expect(keymap["Ctrl-2"].commandID).toEqual("file.openFolder");
+                    expect(keymap["Alt-Cmd-O"]).toBeFalsy();
+                    expect(keymap["Alt-Ctrl-O"]).toBeFalsy();
+
+                    expect(keymap[reassignedKey1].commandID).toEqual("view.hideSidebar");
+                    expect(keymap["Shift-Cmd-H"]).toBeFalsy();
+                    expect(keymap["Alt-Ctrl-H"]).toBeFalsy();
+
+                    expect(keymap["Ctrl-L"].commandID).toEqual("navigate.gotoDefinition");
+                    expect(keymap[reassignedKey2]).toBeFalsy();
+                    
+                    expect(keymap["Alt-Cmd-L"]).toBeFalsy();
+                    expect(keymap["Alt-Ctrl-L"]).toBeFalsy();
+                });
+            });
+
+            it("should restore original key bindings when the user key map is updated", function () {
+                var testFilePath1 = (platform === "mac") ? (testPath + "/macKeymap.json") : (testPath + "/keymap.json"),
+                    testFilePath2 = (platform === "mac") ? (testPath + "/macKeymap1.json") : (testPath + "/keymap1.json");
+                runs(function () {
+                    brackets.platform = platform;
+                    var defKeyMap = getDefaultKeyMap();
+                    populateDefaultKeyMap();
+                    KeyBindingManager._initCommandAndKeyMaps();
+                    expect(KeyBindingManager.getKeymap()).toEqual(defKeyMap);
+                    KeyBindingManager._setUserKeyMapFilePath(testFilePath1);
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    // Loading a different key map file to simulate the user updating an existing key map.
+                    KeyBindingManager._setUserKeyMapFilePath(testFilePath2);
+                    KeyBindingManager._loadUserKeyMap();
+                    waits(300);
+
+                    spyOn(Dialogs, 'showModalDialog').andCallFake(function (dlgClass, title, message, buttons) {
+                        return {done: function (callback) { callback(Dialogs.DIALOG_BTN_OK); } };
+                    });
+                });
+                runs(function () {
+                    var keymap = KeyBindingManager.getKeymap(),
+                        reassignedKey1 = (platform === "mac") ? "Alt-Cmd-Backspace" : "Ctrl-Alt-Backspace",
+                        reassignedKey2 = (platform === "mac") ? "Alt-Cmd-O" : "Ctrl-Alt-O",
+                        reassignedKey3 = (platform === "mac") ? "Cmd-T" : "Ctrl-T";
+
+                    expect(Dialogs.showModalDialog).not.toHaveBeenCalled();
+                    expect(keymap["Ctrl-2"].commandID).toEqual("view.hideSidebar");
+                    
+                    // Previous user key binding to "view.hideSidebar" is gone.
+                    expect(keymap[reassignedKey1]).toBeFalsy();
+                    
+                    // Default key binding for "file.openFolder" is restored.
+                    expect(keymap[reassignedKey2].commandID).toEqual("file.openFolder");
+                    
+                    expect(keymap["Ctrl-L"].commandID).toEqual("navigate.gotoDefinition");
+                    expect(keymap[reassignedKey3]).toBeFalsy();
+                });
+            });
+        });
+        
         describe("handleKey", function () {
             
             it("should execute a command", function () {
diff --git a/test/spec/LiveDevelopment-test.js b/test/spec/LiveDevelopment-test.js
index 2e393cf18ed..97ae366250f 100644
--- a/test/spec/LiveDevelopment-test.js
+++ b/test/spec/LiveDevelopment-test.js
@@ -297,29 +297,11 @@ define(function (require, exports, module) {
                 spyOn(LiveDevelopmentModule, "hideHighlight").andCallFake(function () {});
                 
                 // document spies
-                var deferred = new $.Deferred();
-                spyOn(CSSDocumentModule.prototype, "getStyleSheetFromBrowser").andCallFake(function () {
-                    return deferred.promise();
-                });
-                
                 var mock = SpecRunnerUtils.createMockEditor("p {}\n\ndiv {}", "css");
                 testDocument = mock.doc;
                 testEditor = mock.editor;
                 testCSSDoc = new CSSDocumentModule(testDocument, testEditor);
                 
-                // resolve reloadRules()
-                deferred.resolve({rules: [
-                    {
-                        selectorText    : "p",
-                        selectorRange   : {start: 0},
-                        style           : {range: {end: 3}}
-                    },
-                    {
-                        selectorText    : "div",
-                        selectorRange   : {start: 6},
-                        style           : {range: {end: 11}}
-                    }
-                ]});
             });
             
             afterEach(function () {
diff --git a/test/spec/MultiRangeInlineEditor-test.js b/test/spec/MultiRangeInlineEditor-test.js
index 59e3063712e..a9b00a46d48 100644
--- a/test/spec/MultiRangeInlineEditor-test.js
+++ b/test/spec/MultiRangeInlineEditor-test.js
@@ -34,6 +34,7 @@ define(function (require, exports, module) {
         SpecRunnerUtils         = require("spec/SpecRunnerUtils"),
         Commands                = require("command/Commands");
 
+    // TODO: overlaps a lot with CSSInlineEdit-test integration suite
     describe("MultiRangeInlineEditor", function () {
         
         var inlineEditor,
@@ -56,6 +57,20 @@ define(function (require, exports, module) {
                 hostEditor = null;
             });
     
+            function getRuleListItems() {
+                return $(inlineEditor.htmlContent).find("li:not(.section-header)");
+            }
+    
+            function getRuleListSections() {
+                return $(inlineEditor.htmlContent).find("li.section-header");
+            }
+    
+            function expectListItem($ruleListItem, ruleLabel, filename, lineNum) {  // TODO: duplicated with CSSInlineEdit-test
+                expect($ruleListItem.text()).toBe(ruleLabel + " :" + lineNum);
+                expect($ruleListItem.data("filename")).toBe(filename);
+            }
+            
+            
             it("should initialize to a default state", function () {
                 inlineEditor = new MultiRangeInlineEditor([]);
                 
@@ -89,7 +104,7 @@ define(function (require, exports, module) {
                 // Rule list should be hidden with only one rule.
                 expect(inlineEditor.$htmlContent.find(".related-container").length).toBe(0);
             });
-    
+            
             it("should contain a rule list widget displaying info for each rule", function () {
                 var inlineDoc = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n"),
                     inlineDocName = inlineDoc.file.name;
@@ -112,9 +127,9 @@ define(function (require, exports, module) {
                 inlineEditor = new MultiRangeInlineEditor(mockRanges);
                 inlineEditor.load(hostEditor);
                 
-                var $ruleListItems = $(inlineEditor.htmlContent).find("li");
-                expect($($ruleListItems.get(0)).text()).toBe("div — " + inlineDocName + " : 1");
-                expect($($ruleListItems.get(1)).text()).toBe(".foo — " + inlineDocName + " : 2");
+                var $ruleListItems = getRuleListItems();
+                expectListItem($ruleListItems.eq(0), "div", inlineDocName, 1);
+                expectListItem($ruleListItems.eq(1), ".foo", inlineDocName, 2);
 
                 // Messages div should be hidden, editor holder should have a child editor.
                 expect(inlineEditor.$htmlContent.find(".inline-editor-message").length).toBe(0);
@@ -147,7 +162,7 @@ define(function (require, exports, module) {
                 inlineEditor._selectNextRange();
                 
                 var $selection = $(inlineEditor.htmlContent).find(".selection");
-                var $ruleListItems = $(inlineEditor.htmlContent).find("li");
+                var $ruleListItems = getRuleListItems();
                 expect($selection.position().top).toBe($($ruleListItems.get(0)).position().top);
             });
     
@@ -177,7 +192,7 @@ define(function (require, exports, module) {
                 
                 // verify selection moves
                 var $selection = $(inlineEditor.htmlContent).find(".selection");
-                var $ruleListItems = $(inlineEditor.htmlContent).find("li");
+                var $ruleListItems = getRuleListItems();
                 expect($selection.position().top).toBe($($ruleListItems.get(1)).position().top);
                 
                 // select div
@@ -186,7 +201,106 @@ define(function (require, exports, module) {
                 // verify selection moves again
                 expect($selection.position().top).toBe($($ruleListItems.get(0)).position().top);
             });
+
             
+            function setupNextPrevTest(initialSelectedIndex, collapseA, collapseB, collapseC) {
+                var docA = SpecRunnerUtils.createMockDocument(".aaa{}\n",           "css", "/a.css"),
+                    docB = SpecRunnerUtils.createMockDocument(".bbb1{}\n.bbb2{}\n", "css", "/b.css"),
+                    docC = SpecRunnerUtils.createMockDocument(".ccc{}\n",           "css", "/c.css"),
+                    mockRanges = [
+                        {
+                            document: docA,
+                            name: ".aaa",
+                            lineStart: 0,
+                            lineEnd: 0
+                        },
+                        {
+                            document: docB,
+                            name: ".bbb1",
+                            lineStart: 0,
+                            lineEnd: 0
+                        },
+                        {
+                            document: docB,
+                            name: ".bbb2",
+                            lineStart: 1,
+                            lineEnd: 1
+                        },
+                        {
+                            document: docC,
+                            name: ".ccc",
+                            lineStart: 0,
+                            lineEnd: 0
+                        }
+                    ];
+                
+                inlineEditor = new MultiRangeInlineEditor(mockRanges);
+                inlineEditor.load(hostEditor);
+                
+                inlineEditor.setSelectedIndex(initialSelectedIndex);
+                
+                var $ruleListSections = getRuleListSections();
+                if (collapseA) { $ruleListSections.eq(0).click(); }
+                if (collapseB) { $ruleListSections.eq(1).click(); }
+                if (collapseC) { $ruleListSections.eq(2).click(); }
+                
+                // Selected index the testcase wanted shouldn't be affected by collapsing
+                expect(inlineEditor._selectedRangeIndex).toBe(initialSelectedIndex);
+            }
+            
+            it("should change selection to the next/prev rule, skipping collapsed sections", function () {
+                setupNextPrevTest(0, false, true, false);
+                
+                inlineEditor._selectNextRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(3);
+                
+                inlineEditor._selectPreviousRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(0);
+            });
+            
+            it("shouldn't change selection if already last", function () {
+                setupNextPrevTest(3, false, false, false);
+                
+                inlineEditor._selectNextRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(3);
+            });
+            it("shouldn't change selection if already first", function () {
+                setupNextPrevTest(0, false, false, false);
+                
+                inlineEditor._selectPreviousRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(0);
+            });
+            
+            it("shouldn't change selection if everything next is collapsed", function () {
+                setupNextPrevTest(2, true, false, true);
+                
+                inlineEditor._selectNextRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(2);
+                expect(getRuleListSections().eq(2).find(".disclosure-triangle:not(.expanded)").length).toBe(1);
+            });
+            it("shouldn't change selection if everything prev is collapsed", function () {
+                setupNextPrevTest(1, true, false, true);
+                
+                inlineEditor._selectPreviousRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(1);
+                expect(getRuleListSections().eq(0).find(".disclosure-triangle:not(.expanded)").length).toBe(1);
+            });
+            
+            it("should expand collapsed section when moving to next selection within it", function () {
+                setupNextPrevTest(1, false, true, false);
+                
+                inlineEditor._selectNextRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(2);
+                expect(getRuleListSections().eq(1).find(".disclosure-triangle.expanded").length).toBe(1);
+            });
+            it("should expand collapsed section when moving to prev selection within it", function () {
+                setupNextPrevTest(2, false, true, false);
+                
+                inlineEditor._selectPreviousRange();
+                expect(inlineEditor._selectedRangeIndex).toBe(1);
+                expect(getRuleListSections().eq(1).find(".disclosure-triangle.expanded").length).toBe(1);
+            });
+
             
             function expectResultItemToEqual(resultItem, mockRange) {
                 expect(resultItem.name).toBe(mockRange.name);
@@ -247,9 +361,49 @@ define(function (require, exports, module) {
                 expectResultItemToEqual(inlineEditor._getSelectedRange(), mockRanges[1]);
             });
             
+            it("should show multiple documents in sorted order", function () {
+                var docZ = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n", "css", "/zzz.css"),
+                    docA = SpecRunnerUtils.createMockDocument("#bar{}\n",        "css", "/aaa.css"),
+                    mockRanges = [
+                        {
+                            document: docZ,
+                            name: "div",
+                            lineStart: 0,
+                            lineEnd: 0
+                        },
+                        {
+                            document: docA,
+                            name: "#bar",
+                            lineStart: 0,
+                            lineEnd: 0
+                        }
+                    ];
+                
+                inlineEditor = new MultiRangeInlineEditor(mockRanges);
+                inlineEditor.load(hostEditor);
+                
+                var displayedRanges = inlineEditor._getRanges();
+                expect(displayedRanges.length).toBe(2);
+                expectResultItemToEqual(displayedRanges[0], mockRanges[1]);
+                expectResultItemToEqual(displayedRanges[1], mockRanges[0]);
+                
+                var $ruleListItems = getRuleListItems();
+                expect($ruleListItems.length).toBe(2);
+                expectListItem($ruleListItems.eq(0), "#bar", "aaa.css", 1);
+                expectListItem($ruleListItems.eq(1), "div", "zzz.css", 1);
+                
+                var $ruleListSections = getRuleListSections();
+                expect($ruleListSections.length).toBe(2);
+                expect($ruleListSections.eq(0).text()).toBe("aaa.css (1)");
+                expect($ruleListSections.eq(1).text()).toBe("zzz.css (1)");
+                
+                expect(inlineEditor._getSelectedRange()).toBe(displayedRanges[0]);
+                expect(inlineEditor.editor.document).toBe(docA);
+            });
+            
             it("should add a new range after other ranges from the same doc, then select it", function () {
-                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n"),
-                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n"),
+                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n", "css", "/a.css"),
+                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n",        "css", "/b.css"),
                     mockRanges = [
                         {
                             document: doc1,
@@ -268,8 +422,12 @@ define(function (require, exports, module) {
                 inlineEditor = new MultiRangeInlineEditor(mockRanges);
                 inlineEditor.load(hostEditor);
                 
+                expect(getRuleListSections().eq(0).text()).toBe("a.css (1)");
+                
                 inlineEditor.addAndSelectRange(".foo", doc1, 1, 1);
                 
+                expect(getRuleListSections().eq(0).text()).toBe("a.css (2)");  // verify section header updated
+                
                 var newRanges = inlineEditor._getRanges();
                 expect(newRanges.length).toBe(3);
                 expect(inlineEditor._getSelectedRange()).toBe(newRanges[1]);
@@ -287,9 +445,9 @@ define(function (require, exports, module) {
                 expect(inlineEditor.editor.getLastVisibleLine()).toBe(1);
             });
 
-            it("should add a new range at the end if there are no other ranges from the same doc", function () {
-                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n"),
-                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n"),
+            it("should add a new range at proper sorted pos if there are no other ranges from the same doc", function () {
+                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n", "css", "/a.css"),
+                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n",        "css", "/b.css"),
                     mockRanges = [
                         {
                             document: doc1,
@@ -308,8 +466,12 @@ define(function (require, exports, module) {
                 inlineEditor = new MultiRangeInlineEditor(mockRanges);
                 inlineEditor.load(hostEditor);
                 
+                expect(getRuleListSections().length).toBe(1);
+                
                 inlineEditor.addAndSelectRange("#bar", doc2, 0, 0);
                 
+                expect(getRuleListSections().length).toBe(2);  // verify section header created
+                
                 var newRanges = inlineEditor._getRanges();
                 expect(newRanges.length).toBe(3);
                 expect(inlineEditor._getSelectedRange()).toBe(newRanges[2]);
@@ -328,8 +490,8 @@ define(function (require, exports, module) {
             });
             
             it("should properly refresh the editor if the range is inserted at the currently selected index", function () {
-                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n"),
-                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n"),
+                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n", "css", "/a.css"),
+                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n",        "css", "/b.css"),
                     mockRanges = [
                         {
                             document: doc1,
@@ -387,6 +549,84 @@ define(function (require, exports, module) {
                 expect(inlineEditor.$htmlContent.find(".related-container").length).toBe(1);
             });
 
+            it("should keep collapsed sections collapsed when adding range to other section", function () {
+                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n", "css", "/a.css"),
+                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n",        "css", "/b.css"),
+                    mockRanges = [
+                        {
+                            document: doc1,
+                            name: "div",
+                            lineStart: 0,
+                            lineEnd: 0
+                        },
+                        {
+                            document: doc2,
+                            name: "#bar",
+                            lineStart: 0,
+                            lineEnd: 0
+                        }
+                    ];
+                
+                inlineEditor = new MultiRangeInlineEditor(mockRanges);
+                inlineEditor.load(hostEditor);
+                
+                var $ruleListSections = getRuleListSections();
+                $ruleListSections.eq(1).click(); // collapse doc2 section
+                expect($ruleListSections.eq(0).find(".disclosure-triangle.expanded").length).toBe(1);  // verify doc1 section still expanded
+                expect($ruleListSections.eq(1).find(".disclosure-triangle:not(.expanded)").length).toBe(1); // verify doc2 section now collapsed
+                
+                inlineEditor.addAndSelectRange(".foo", doc1, 1, 1); // add new item to doc1 section
+                
+                var newRanges = inlineEditor._getRanges();
+                expect(newRanges.length).toBe(3);
+                expect(inlineEditor._getSelectedRange()).toBe(newRanges[1]);  // new range should be 2nd in list & be selected
+                expect(inlineEditor.editor.document).toBe(doc1);
+                
+                $ruleListSections = getRuleListSections();
+                expect($ruleListSections.length).toBe(2);  // still just 2 sections
+                expect($ruleListSections.eq(0).find(".disclosure-triangle.expanded").length).toBe(1);  // doc1 section still expanded
+                expect($ruleListSections.eq(1).find(".disclosure-triangle:not(.expanded)").length).toBe(1); // doc2 section still collapsed
+            });
+
+            it("should auto-expand collapsed section when adding new range to it", function () {
+                var doc1 = SpecRunnerUtils.createMockDocument("div{}\n", "css", "/a.css"),
+                    doc2 = SpecRunnerUtils.createMockDocument("#bar{}\n.foo{}\n",        "css", "/b.css"),
+                    mockRanges = [
+                        {
+                            document: doc1,
+                            name: "div",
+                            lineStart: 0,
+                            lineEnd: 0
+                        },
+                        {
+                            document: doc2,
+                            name: "#bar",
+                            lineStart: 0,
+                            lineEnd: 0
+                        }
+                    ];
+                
+                inlineEditor = new MultiRangeInlineEditor(mockRanges);
+                inlineEditor.load(hostEditor);
+                
+                var $ruleListSections = getRuleListSections();
+                $ruleListSections.eq(1).click(); // collapse doc2 section
+                expect($ruleListSections.eq(0).find(".disclosure-triangle.expanded").length).toBe(1);  // verify doc1 section still expanded
+                expect($ruleListSections.eq(1).find(".disclosure-triangle:not(.expanded)").length).toBe(1); // verify doc2 section now collapsed
+                
+                inlineEditor.addAndSelectRange(".foo", doc2, 1, 1); // add new item to doc2 section
+                
+                var newRanges = inlineEditor._getRanges();
+                expect(newRanges.length).toBe(3);
+                expect(inlineEditor._getSelectedRange()).toBe(newRanges[2]);  // new range should be 3rd in list & be selected
+                expect(inlineEditor.editor.document).toBe(doc2);
+                
+                $ruleListSections = getRuleListSections();
+                expect($ruleListSections.length).toBe(2);  // still just 2 sections
+                expect($ruleListSections.eq(0).find(".disclosure-triangle.expanded").length).toBe(1);  // doc1 section still expanded
+                expect($ruleListSections.eq(1).find(".disclosure-triangle.expanded").length).toBe(1);  // doc2 section now collapsed also
+            });
+
             it("should be empty if no ranges are specified", function () {
                 inlineEditor = new MultiRangeInlineEditor([]);
                 inlineEditor.load(hostEditor);
@@ -402,6 +642,10 @@ define(function (require, exports, module) {
                 // Rule list should be invisible.
                 expect(inlineEditor.$htmlContent.find(".related-container").length).toBe(0);
             });
+            
+            // TODO: test removing a range (only occurs with TextRange "lostSync")
+            // TODO: test hiding rule list when removing 2nd to last range
+            // TODO: test auto-closing when removing last range
         });
         
         describe("integration", function () {
@@ -464,7 +708,7 @@ define(function (require, exports, module) {
             // the real Editor functions for adding an inline widget, which complete asynchronously
             // after the animation is finished. That animation doesn't actually occur in the
             // Jasmine window.
-            it("should close and return to the host editor", function () {
+            it("should close and return focus to the host editor", function () {
                 runs(function () {
                     var inlineDoc = SpecRunnerUtils.createMockDocument("div{}\n.foo{}\n");
                     
diff --git a/test/spec/ProjectModel-test.js b/test/spec/ProjectModel-test.js
index 059e092abaa..20dcd6da18f 100644
--- a/test/spec/ProjectModel-test.js
+++ b/test/spec/ProjectModel-test.js
@@ -639,6 +639,13 @@ define(function (require, exports, module) {
                     expect(promise.then).toEqual(jasmine.any(Function));
                 });
                 
+                it("should expand the parent directory if closed", function () {
+                    model.setDirectoryOpen("/foo/subdir1", false);
+                    expect(vm._treeData.getIn(["subdir1", "open"])).toBeUndefined();
+                    model.startRename("/foo/subdir1/afile.js");
+                    expect(vm._treeData.getIn(["subdir1", "open"])).toBe(true);
+                });
+                
                 it("can take a filesystem object or string", function () {
                     model.startRename({
                         fullPath: "/foo/afile.js"
@@ -1134,6 +1141,15 @@ define(function (require, exports, module) {
                 });
             });
             
+            it("should do nothing for a path that is outside of the project on Windows", function () {
+                model.projectRoot = "c:/foo/";
+                waitsForDone(model.showInTree("c:/bar/baz.js"));
+                runs(function () {
+                    expect(vm._treeData.get("baz.js")).toBeUndefined();
+                    expect(model._selections.selected).toBeUndefined();
+                });
+            });
+            
             it("should select a file at the root", function () {
                 waitsForDone(model.showInTree("/foo/toplevel.txt"));
                 runs(function () {
@@ -1362,14 +1378,25 @@ define(function (require, exports, module) {
                 expect(model._selections.context).toBeNull();
             });
             
-            it("should see events with a directory but no added or removed as an add", function () {
+            it("should see events with a directory but no added or removed as a need to reload the directory", function () {
                 model.handleFSEvent({
                     isFile: false,
                     name: "newdir",
-                    fullPath: "/foo/newdir/"
+                    fullPath: "/foo/newdir/",
+                    getContents: function (callback) {
+                        callback(null, [
+                            {
+                                isFile: true,
+                                name: "newfile",
+                                fullPath: "/foo/newdir/newfile"
+                            }
+                        ]);
+                    }
                 });
                 expect(vm._treeData.get("newdir").toJS()).toEqual({
-                    children: null
+                    children: {
+                        newfile: {}
+                    }
                 });
             });
         });
diff --git a/test/spec/SpecRunnerUtils.js b/test/spec/SpecRunnerUtils.js
index 3bfabc7f655..0130d9e1f72 100644
--- a/test/spec/SpecRunnerUtils.js
+++ b/test/spec/SpecRunnerUtils.js
@@ -348,12 +348,13 @@ define(function (require, exports, module) {
      * 
      * Unlike a real Document, does NOT need to be explicitly cleaned up.
      * 
-     * @param {string=} initialContent  Defaults to ""
-     * @param {string=} languageId      Defaults to JavaScript
+     * @param {?string} initialContent  Defaults to ""
+     * @param {?string} languageId      Defaults to JavaScript
+     * @param {?string} filename        Defaults to an auto-generated filename with the language's extension
      */
-    function createMockDocument(initialContent, languageId) {
+    function createMockDocument(initialContent, languageId, filename) {
         var language    = LanguageManager.getLanguage(languageId) || LanguageManager.getLanguage("javascript"),
-            options     = { language: language, content: initialContent },
+            options     = { language: language, content: initialContent, filename: filename },
             docToShim   = createMockActiveDocument(options);
         
         // Prevent adding doc to global 'open docs' list; prevents leaks or collisions if a test
diff --git a/test/spec/StringMatch-test.js b/test/spec/StringMatch-test.js
index 73498b3ded1..7f918eac12d 100644
--- a/test/spec/StringMatch-test.js
+++ b/test/spec/StringMatch-test.js
@@ -59,7 +59,9 @@ define(function (require, exports, module) {
         
         describe("_generateMatchList", function () {
             var fSC = StringMatch._findSpecialCharacters;
+            
             var generateMatchList = StringMatch._generateMatchList;
+            
             var SpecialMatch = StringMatch._SpecialMatch;
             var NormalMatch = StringMatch._NormalMatch;
             
@@ -75,79 +77,82 @@ define(function (require, exports, module) {
             
             var path = "src/document/DocumentCommandHandler.js";
             var specialsInfo = fSC(path);
-            path = path.toLowerCase();
+            var pathLower = path.toLowerCase();
             
             it("should return undefined for no matches", function () {
-                var result = generateMatchList("foo", path, specialsInfo.specials, 0);
+                var result = generateMatchList("foo", pathLower, "foo", path, specialsInfo.specials, 0);
                 expect(result).toEqual(null);
             });
             
             it("should return an array with specials matches", function () {
-                var result = generateMatchList("d", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                var result = generateMatchList("d", pathLower, "d", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new SpecialMatch(13)]);
                 
-                result = generateMatchList("ch", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                result = generateMatchList("ch", pathLower, "ch", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new SpecialMatch(21), new SpecialMatch(28)]);
             });
             
             it("should try contiguous matches as well, but prefer specials", function () {
-                var result = generateMatchList("do", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                var result = generateMatchList("do", pathLower, "do", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new SpecialMatch(13), new NormalMatch(14)]);
                 
-                result = generateMatchList("doc", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                result = generateMatchList("doc", pathLower, "doc", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new SpecialMatch(13), new NormalMatch(14), new SpecialMatch(21)]);
                 
-                result = generateMatchList("doch", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                result = generateMatchList("doch", pathLower, "doch", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new SpecialMatch(13), new NormalMatch(14), new SpecialMatch(21), new SpecialMatch(28)]);
             });
             
             it("should handle contiguous matches that stand alone", function () {
-                var result = generateMatchList("o", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                var result = generateMatchList("o", pathLower, "o", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new NormalMatch(14)]);
             });
             
             it("should recognize non-matches", function () {
-                var result = generateMatchList("ham", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                var result = generateMatchList("ham", pathLower, "ham", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual(null);
             });
             
             it("should backtrack as needed", function () {
-                var result = generateMatchList("cu", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                var result = generateMatchList("cu", pathLower, "cu", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual([new NormalMatch(15), new NormalMatch(16)]);
                 
-                result = generateMatchList("dcho", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
+                result = generateMatchList("dcho", pathLower, "dcho", path, specialsInfo.specials, specialsInfo.lastSegmentSpecialsIndex);
                 expect(result).toEqual(null);
                 
                 var btpath = "MamoMeMiMoMu";
                 var btspecials = fSC(btpath);
-                btpath = btpath.toLowerCase();
+                var btpathLower = btpath.toLowerCase();
                 
-                result = generateMatchList("m", btpath, btspecials.specials, 0);
+                result = generateMatchList("m", btpathLower, "m", btpath, btspecials.specials, 0);
                 expect(result).toEqual([new SpecialMatch(0)]);
                 
-                result = generateMatchList("mu", btpath, btspecials.specials, 0);
+                result = generateMatchList("mu", btpathLower, "mu", btpath, btspecials.specials, 0);
                 expect(result).toEqual([new SpecialMatch(0), new NormalMatch(11)]);
                 
-                result = generateMatchList("mamo", btpath, btspecials.specials, 0);
+                result = generateMatchList("mamo", btpathLower, "mamo", btpath, btspecials.specials, 0);
                 expect(result).toEqual([new SpecialMatch(0), new NormalMatch(1), new SpecialMatch(4), new NormalMatch(9)]);
                 
                 btpath = "AbcdefzBcdefCdefDefEfF";
                 btspecials = fSC(btpath);
-                btpath = btpath.toLowerCase();
+                btpathLower = btpath.toLowerCase();
                 
-                result = generateMatchList("f", btpath, btspecials.specials, 0);
+                result = generateMatchList("f", btpathLower, "f", btpath, btspecials.specials, 0);
                 expect(result).toEqual([new SpecialMatch(21)]);
                 
-                result = generateMatchList("abcdefz", btpath, btspecials.specials, 0);
+                result = generateMatchList("abcdefz", btpathLower, "abcdefz", btpath, btspecials.specials, 0);
                 expect(result).toEqual([new SpecialMatch(0), new NormalMatch(1), new NormalMatch(2), new NormalMatch(3), new NormalMatch(4), new NormalMatch(5), new NormalMatch(6)]);
+
+                result = generateMatchList("abcdefz", btpathLower, "ABCDEFZ", btpath, btspecials.specials, 0);
+                expect(result).toEqual([new SpecialMatch(0, true), new NormalMatch(1), new NormalMatch(2), new NormalMatch(3), new NormalMatch(4), new NormalMatch(5), new NormalMatch(6)]);
                 
-                result = generateMatchList("abcdefe", btpath, btspecials.specials, 0);
+                result = generateMatchList("abcdefe", btpathLower, "abcdefe", btpath, btspecials.specials, 0);
                 expect(result).toEqual([new SpecialMatch(0), new SpecialMatch(7), new SpecialMatch(12), new SpecialMatch(16), new NormalMatch(17), new NormalMatch(18), new SpecialMatch(19)]);
                 
                 var str = "_computeRangesAndScore";
                 var strSpecials = fSC(str);
-                str = str.toLowerCase();
-                result = generateMatchList("_computerangesa", str, strSpecials.specials, 0);
+                var strLower = str.toLowerCase();
+                result = generateMatchList("_computerangesa", strLower, "_computerangesa", str, strSpecials.specials, 0);
                 expect(result).toEqual([
                     new SpecialMatch(0), new SpecialMatch(1), new NormalMatch(2),
                     new NormalMatch(3), new NormalMatch(4), new NormalMatch(5),
@@ -191,6 +196,7 @@ define(function (require, exports, module) {
         describe("_lastSegmentSearch", function () {
             var SpecialMatch = StringMatch._SpecialMatch;
             var NormalMatch = StringMatch._NormalMatch;
+            
             beforeEach(function () {
                 SpecialMatch.prototype.type = "special";
                 NormalMatch.prototype.type = "normal";
@@ -206,23 +212,26 @@ define(function (require, exports, module) {
                 var comparePath = path.toLowerCase();
                 var _lastSegmentSearch = StringMatch._lastSegmentSearch;
                 var sc = StringMatch._findSpecialCharacters(path);
-                expect(_lastSegmentSearch("d", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("d", comparePath, "d", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new SpecialMatch(13)
                     ]
                 });
                 
-                expect(_lastSegmentSearch("do", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("do", comparePath, "do", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new SpecialMatch(13),
                         new NormalMatch(14)
                     ]
                 });
                 
-                expect(_lastSegmentSearch("doc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("doc", comparePath, "doc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new SpecialMatch(13),
                         new NormalMatch(14),
@@ -230,8 +239,9 @@ define(function (require, exports, module) {
                     ]
                 });
                 
-                expect(_lastSegmentSearch("docc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("docc", comparePath, "docc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new SpecialMatch(13),
                         new NormalMatch(14),
@@ -240,8 +250,9 @@ define(function (require, exports, module) {
                     ]
                 });
 
-                expect(_lastSegmentSearch("docch", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("docch", comparePath, "docch", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new SpecialMatch(13),
                         new NormalMatch(14),
@@ -251,8 +262,9 @@ define(function (require, exports, module) {
                     ]
                 });
                 
-                expect(_lastSegmentSearch("docch.js", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("docch.js", comparePath, "docch.js", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new SpecialMatch(13),
                         new NormalMatch(14),
@@ -265,8 +277,9 @@ define(function (require, exports, module) {
                     ]
                 });
                 
-                expect(_lastSegmentSearch("ocu", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("ocu", comparePath, "ocu", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new NormalMatch(14),
                         new NormalMatch(15),
@@ -274,8 +287,9 @@ define(function (require, exports, module) {
                     ]
                 });
                 
-                expect(_lastSegmentSearch("ocuha", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("ocuha", comparePath, "ocuha", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "",
+                    originalRemainder: "",
                     matchList: [
                         new NormalMatch(14),
                         new NormalMatch(15),
@@ -285,11 +299,12 @@ define(function (require, exports, module) {
                     ]
                 });
                 
-                expect(_lastSegmentSearch("z", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
-                expect(_lastSegmentSearch("ocuz", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
+                expect(_lastSegmentSearch("z", comparePath, "z", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
+                expect(_lastSegmentSearch("ocuz", comparePath, "ocuz", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
                 
-                expect(_lastSegmentSearch("sdoc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
+                expect(_lastSegmentSearch("sdoc", comparePath, "sdoc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual({
                     remainder: "s",
+                    originalRemainder: "s",
                     matchList: [
                         new SpecialMatch(13),
                         new NormalMatch(14),
@@ -306,7 +321,7 @@ define(function (require, exports, module) {
                 var comparePath = path.toLowerCase();
                 var _lastSegmentSearch = StringMatch._lastSegmentSearch;
                 var sc = StringMatch._findSpecialCharacters(path);
-                expect(_lastSegmentSearch("ocud", comparePath, sc.specials, 0)).toEqual(null);
+                expect(_lastSegmentSearch("ocud", comparePath, "ocud", path, sc.specials, 0)).toEqual(null);
             });
             
             it("should compare matches that don't fit in just the final segment", function () {
@@ -317,22 +332,22 @@ define(function (require, exports, module) {
                 
                 var comparePath = path.toLowerCase();
                 
-                expect(wholeStringSearch("sdoc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
+                expect(wholeStringSearch("sdoc", comparePath, "sdoc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
                     new SpecialMatch(0),
                     new SpecialMatch(13),
                     new NormalMatch(14),
                     new SpecialMatch(21)
                 ]);
                 
-                expect(wholeStringSearch("doc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
+                expect(wholeStringSearch("doc", comparePath, "doc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
                     new SpecialMatch(13),
                     new NormalMatch(14),
                     new SpecialMatch(21)
                 ]);
                 
-                expect(wholeStringSearch("z", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
+                expect(wholeStringSearch("z", comparePath, "z", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
                 
-                expect(wholeStringSearch("docdoc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
+                expect(wholeStringSearch("docdoc", comparePath, "docdoc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
                     new SpecialMatch(4),
                     new NormalMatch(5),
                     new NormalMatch(6),
@@ -342,7 +357,7 @@ define(function (require, exports, module) {
                 ]);
                 
                 // test for a suspected bug where specials are matched out of order.
-                expect(wholeStringSearch("hc", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
+                expect(wholeStringSearch("hc", comparePath, "hc", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual(null);
             });
             
             it("should handle matches that don't fit at all in the final segment", function () {
@@ -353,7 +368,7 @@ define(function (require, exports, module) {
                 
                 var comparePath = path.toLowerCase();
                 
-                expect(wholeStringSearch("quick", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
+                expect(wholeStringSearch("quick", comparePath, "quick", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
                     new SpecialMatch(23),
                     new NormalMatch(24),
                     new NormalMatch(25),
@@ -361,7 +376,7 @@ define(function (require, exports, module) {
                     new NormalMatch(27)
                 ]);
                 
-                expect(wholeStringSearch("quickopen", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
+                expect(wholeStringSearch("quickopen", comparePath, "quickopen", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
                     new SpecialMatch(23),
                     new NormalMatch(24),
                     new NormalMatch(25),
@@ -373,7 +388,7 @@ define(function (require, exports, module) {
                     new NormalMatch(39)
                 ]);
                                 
-                expect(wholeStringSearch("quickopenain", comparePath, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
+                expect(wholeStringSearch("quickopenain", comparePath, "quickopenain", path, sc.specials, sc.lastSegmentSpecialsIndex)).toEqual([
                     new SpecialMatch(23),
                     new NormalMatch(24),
                     new NormalMatch(25),
@@ -475,7 +490,7 @@ define(function (require, exports, module) {
                 expect(stringMatch("stringTimeRing", "STR", {
                     preferPrefixMatches: true
                 })).toEqual({
-                    matchGoodness: -Number.MAX_VALUE,
+                    matchGoodness: -Number.MAX_VALUE * 0.5,
                     label: "stringTimeRing",
                     stringRanges: [
                         { text: "str", matched: true, includesLastSegment: true },
@@ -486,7 +501,7 @@ define(function (require, exports, module) {
                 expect(stringMatch("STRINGTimeRing", "str", {
                     preferPrefixMatches: true
                 })).toEqual({
-                    matchGoodness: -Number.MAX_VALUE,
+                    matchGoodness: -Number.MAX_VALUE * 0.5,
                     label: "STRINGTimeRing",
                     stringRanges: [
                         { text: "STR", matched: true, includesLastSegment: true },
@@ -664,6 +679,25 @@ define(function (require, exports, module) {
                     "switch"
                 ])).toBe(true);
             });
+            
+            it("should have good ordering with case matches", function () {
+                expect(goodRelativeOrdering("func", [
+                    "function",
+                    "Function"
+                ])).toBe(true);
+                expect(goodRelativeOrdering("Func", [
+                    "Function",
+                    "function"
+                ])).toBe(true);
+                expect(goodRelativeOrdering("Pack", [
+                    "Package.js",
+                    "package.json"
+                ])).toBe(true);
+                expect(goodRelativeOrdering("Pack", [
+                    "src/extensibility/Package.js",
+                    "package.json"
+                ])).toBe(true);
+            });
         });
         
         describe("scoring", function () {