File: css-rules.bfinc

package info (click to toggle)
bluefish 2.2.19-1
links: PTS, VCS
area: main
in suites: forky, sid
size: 31,568 kB
sloc: xml: 150,061; ansic: 60,177; python: 5,336; sh: 5,118; makefile: 1,006; sed: 16
file content (15878 lines) | stat: -rw-r--r-- 891,778 bytes
<?xml version="1.0" encoding="UTF-8" ?>
<!--
	Bluefish HTML Editor
	css-rules.bfinc $Revision: 9165 $

	Copyright (C) 2008-2023 Olivier Sessink
	updated 2022-2023 by Martin Senftleben

		This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
	GNU General Public License for more details.

	You should have received a copy of the GNU General Public License
	along with this program. If not, see <http://www.gnu.org/licenses/>.

*********************************************************************************************
*********************************************************************************************
**                                                                                         **
**                                      OPTIMISATION TIP                                   **
**                                                                                         **
** every pattern and context in this file is loaded multiple times (within <style></style> ** 
** tags and in every style="" attribute). Therefore, re-use is important. Make sure every  **
** context has id="" AND idref="" so the second time it is re-used.                        **
** elements can also be re-used, but the impact of that is much smaller (saves a few bytes **
** of memory) so this is far less important                                                ** 
**                                                                                         **
*********************************************************************************************
*********************************************************************************************
-->
<!--
*******************************************************************************************
** The following idrefs are available for reuse (in parentheses is the line number
** from which they are made available). This does not include the idrefs of the master
** element (i.e. the CSS properties):
** prefix "c.css.": accent-color (color values, includes also auto, initial, inherit)
**		length_percentage (includes all positive length values like px, em etc., as well as percantages)
**		border (includes color, length and style of border)
**		border_style (the style of a border)
**		parentheses_length (for elements which need values of length (incl. %) following it within parentheses)
** prefix "e.css.": 
** 	colors - not optimal, as it works via regex, so there is no autocompletion
**		end (222) - identifies a semicolon (';') as end of the context
**		inherit (provides the regular reference)
**		initial (provides the regular reference)
**		in_style_attribute.dquote(225)
**		in_style_attribute.squote (228)
**		in_style_section.rbrace (229);
**		lcomment(224)
**		length (positive length values without percent)
**		length.neg (negative and positive length values, includes (neg) percent!) 
**		length_percent (all positive length-units including percent)
**		number (any number)
**		numbers_letters (allows for words and positive or negative numbers)
**		number-pos (only positive numbers from 1 to x)
**		percent (only positive percent units)
**		percent.neg  (15000): (positive and negative percent units)
**		url - identifies the value 'url(nnn.nnn.nnn)' as a value
** 
-->
<bfinc>
<!-- 1 -->
<element pattern="accent-color" highlight="css-property"  id="e.css.accent-color" idref="e.css.accent-color">
	<autocomplete append=": " />
	<reference>The accent-color property specifies the accent color for user-interface controls like: &lt;input type="checkbox"&gt;, &lt;input type="radio"&gt;, &lt;input type="range"&gt; and &lt;progress&gt;.
	<b>Values:</b> auto | <i>color</i> | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed color 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background">www.w3.org</a></reference>
	<context id="c.css.accent-color" idref="c.css.accent-color" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="aliceblue"/>
			<element pattern="antiquewhite"/>
			<element pattern="aqua"/>
			<element pattern="aquamarine"/>
			<element pattern="azure"/>
			<element pattern="beige"/>
			<element pattern="bisque"/>
			<element pattern="black"/>
			<element pattern="blanchedalmond"/>
			<element pattern="blue"/>
			<element pattern="blueviolet"/>
			<element pattern="brown"/>
			<element pattern="burlywood"/>
			<element pattern="cadetblue"/>
			<element pattern="chartreuse"/>
			<element pattern="chocolate"/>
			<element pattern="coral"/>
			<element pattern="cornflowerblue"/>
			<element pattern="cornsilk"/>
			<element pattern="crimson"/>
			<element pattern="cyan"/>
			<element pattern="darkblue"/>
			<element pattern="darkcyan"/>
			<element pattern="darkgoldenrod"/>
			<element pattern="darkgray"/>
			<element pattern="darkgreen"/>
			<element pattern="darkgrey"/>
			<element pattern="darkkhaki"/>
			<element pattern="darkmagenta"/>
			<element pattern="darkolivegreen"/>
			<element pattern="darkorange"/>
			<element pattern="darkorchid"/>
			<element pattern="darkred"/>
			<element pattern="darksalmon"/>
			<element pattern="darkseagreen"/>
			<element pattern="darkslateblue"/>
			<element pattern="darkslategray"/>
			<element pattern="darkslategrey"/>
			<element pattern="darkturquoise"/>
			<element pattern="darkviolet"/>
			<element pattern="deeppink"/>
			<element pattern="deepskyblue"/>
			<element pattern="dimgray"/>
			<element pattern="dimgrey"/>
			<element pattern="dodgerblue"/>
			<element pattern="firebrick"/>
			<element pattern="floralwhite"/>
			<element pattern="forestgreen"/>
			<element pattern="fuchsia"/>
			<element pattern="gainsboro"/>
			<element pattern="ghostwhite"/>
			<element pattern="gold"/>
			<element pattern="goldenrod"/>
			<element pattern="gray"/>
			<element pattern="green"/>
			<element pattern="greenyellow"/>
			<element pattern="grey"/>
			<element pattern="honeydew"/>
			<element pattern="hotpink"/>
			<element pattern="indianred"/>
			<element pattern="indigo"/>
			<element pattern="ivory"/>
			<element pattern="khaki"/>
			<element pattern="lavender"/>
			<element pattern="lavenderblush"/>
			<element pattern="lawngreen"/>
			<element pattern="lemonchiffon"/>
			<element pattern="lightblue"/>
			<element pattern="lightcoral"/>
			<element pattern="lightcyan"/>
			<element pattern="lightgoldenrodyellow"/>
			<element pattern="lightgray"/>
			<element pattern="lightgreen"/>
			<element pattern="lightgrey"/>
			<element pattern="lightpink"/>
			<element pattern="lightsalmon"/>
			<element pattern="lightseagreen"/>
			<element pattern="lightskyblue"/>
			<element pattern="lightslategray"/>
			<element pattern="lightslategrey"/>
			<element pattern="lightsteelblue"/>
			<element pattern="lightyellow"/>
			<element pattern="lime"/>
			<element pattern="limegreen"/>
			<element pattern="linen"/>
			<element pattern="magenta"/>
			<element pattern="maroon"/>
			<element pattern="mediumaquamarine"/>
			<element pattern="mediumblue"/>
			<element pattern="mediumorchid"/>
			<element pattern="mediumpurple"/>
			<element pattern="mediumseagreen"/>
			<element pattern="mediumslateblue"/>
			<element pattern="mediumspringgreen"/>
			<element pattern="mediumturquoise"/>
			<element pattern="mediumvioletred"/>
			<element pattern="midnightblue"/>
			<element pattern="mintcream"/>
			<element pattern="mistyrose"/>
			<element pattern="moccasin"/>
			<element pattern="navajowhite"/>
			<element pattern="navy"/>
			<element pattern="oldlace"/>
			<element pattern="olive"/>
			<element pattern="olivedrab"/>
			<element pattern="orange"/>
			<element pattern="orangered"/>
			<element pattern="orchid"/>
			<element pattern="palegoldenrod"/>
			<element pattern="palegreen"/>
			<element pattern="paleturquoise"/>
			<element pattern="palevioletred"/>
			<element pattern="papayawhip"/>
			<element pattern="peachpuff"/>
			<element pattern="peru"/>
			<element pattern="pink"/>
			<element pattern="plum"/>
			<element pattern="powderblue"/>
			<element pattern="purple"/>
			<element pattern="red"/>
			<element pattern="rosybrown"/>
			<element pattern="royalblue"/>
			<element pattern="saddlebrown"/>
			<element pattern="salmon"/>
			<element pattern="sandybrown"/>
			<element pattern="seagreen"/>
			<element pattern="seashell"/>
			<element pattern="sienna"/>
			<element pattern="silver"/>
			<element pattern="skyblue"/>
			<element pattern="slateblue"/>
			<element pattern="slategray"/>
			<element pattern="slategrey"/>
			<element pattern="snow"/>
			<element pattern="springgreen"/>
			<element pattern="steelblue"/>
			<element pattern="tan"/>
			<element pattern="teal"/>
			<element pattern="thistle"/>
			<element pattern="tomato"/>
			<element pattern="turquoise"/>
			<element pattern="violet"/>
			<element pattern="wheat"/>
			<element pattern="white"/>
			<element pattern="whitesmoke"/>
			<element pattern="yellow"/>
			<element pattern="yellowgreen"/>
			<element pattern="currentColor"/>
			<element pattern="transparent"/>
		</group>
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element pattern="inherit" id="e.css.inherit" idref="e.css.inherit" highlight="css-value">
				<reference>Inherits this property from its parent element.</reference>
			</element>
			<element pattern="initial" id="e.css.initial" idref="e.css.initial" highlight="css-value">
				<reference>Sets this property to its default value.</reference>
			</element>
		</group>
		<element pattern="#([0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]|[0-9a-f][0-9a-f][0-9a-f])" highlight="css-value" is_regex="1" is_color="1" case_insens="1" id="e.css.hex-color" idref="e.css.hex-color" />
		<element pattern="(rgba|hsla)\( *[0-9]+%? *, *[0-9]+%? *, *[0-9]+%? *, *(0|1|0.[0-9]*) *\)" highlight="css-value" is_regex="1" is_color="1" case_insens="1" id="e.css.rgba-color" idref="e.css.rgba-color" />
		<element pattern="(rgb|hsl)\( *[0-9]+%? *, *[0-9]+%? *, *[0-9]+%? *\)" highlight="css-value" is_regex="1" is_color="1" case_insens="1" id="e.css.rgb-color" idref="e.css.rgb-color" />
		<element id="e.css.end" idref="e.css.end" pattern=";" ends_context="1"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="align-content" highlight="css-property"  id="e.css.align-content" idref="e.css.align-content">
	<autocomplete append=": " />
	<reference>Aligns a flex container's lines within the flex container when there is extra space in the cross-axis.
	<b>Values:</b> flex-start | flex-end | center | space-between | space-evenly | space-around | initial | inherit | stretch
	<b>Initial:</b> stretch
	<b>Applies to:</b> multi-line flex containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-flexbox/#align-content">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.align-content" idref="c.css.align-content">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="flex-start" id="test1">
				<reference>Lines are packed toward the start of the flex container</reference>
			</element>
			<element pattern="flex-end" id="test2">
				<reference>Lines are packed toward the end of the flex container</reference>
			</element>
			<element pattern="center" id="test3">
				<reference>Lines are packed toward the center of the flex container</reference>
			</element>
			<element pattern="space-between" id="test4">
				<reference>Lines are evenly distributed in the flex container</reference>
			</element>
			<element pattern="space-evenly" id="test5">
				<reference>Lines are evenly distributed in the flex container, with equal space around them</reference>
			</element>
			<element pattern="space-around" id="test6">
				<reference>Lines are evenly distributed in the flex container, with half-size spaces on either end</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element id="e.sass.newline_end" idref="e.sass.newline_end" pattern="(&#9;|&#10;|&#13;)" is_regex="1" ends_context="1"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="align-items" highlight="css-property"  id="e.css.align-items" idref="e.css.align-items">
	<autocomplete append=": " />
	<reference>The align-items property specifies the default alignment for items inside a flexbox or grid container.
	 In a flexbox container, the flexbox items are aligned on the cross axis, which is vertical by default (opposite of flex-direction).
    In a grid container, the grid items are aligned in the block direction. For pages in English, block direction is downward and inline direction is left to right.
	For this property to have any alignment effect, the items need available space around themselves in the appropriate direction.
	<b>Tip</b>: Use the align-self property of each item to override the align-items property.
	<b>Values:</b> normal | stretch | <i>positional alignment</i> | flex-start | flex-end | baseline | initial | inherit
	<b>Initial:</b> normal
	<b>Applies to:</b> flex containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-flexbox/#align-items">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.align-items" idref="c.css.align-items">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="stretch"/>
			<element pattern="start"/>
			<element pattern="end"/>
			<element pattern="flex-start"/>
			<element pattern="flex-end"/>
			<element pattern="center"/>
			<element pattern="baseline"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="align-self" highlight="css-property"  id="e.css.align-self" idref="e.css.align-self">
	<autocomplete append=": " />
	<reference>Flex items can be aligned in the cross axis of the current line of the flex container, similar to 
		‘justify-content’ but in the perpendicular direction.
	<b>Values:</b> auto | flex-start | flex-end | center | baseline | stretch
	<b>Initial:</b> auto
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> ‘auto’ computes to parent's ‘align-items’; otherwise as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-flexbox/#align-self">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.align-self" idref="c.css.align-self">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element pattern="flex-start"/>
			<element pattern="flex-end"/>
			<element pattern="center"/>
			<element pattern="baseline"/>
			<element pattern="stretch"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="all" highlight="css-property"  id="e.css.all" idref="e.css.all">
	<autocomplete append=": " />
	<reference>The <i>all</i> property resets all properties, apart from 
	<i>unicode-bidi</i> and <i>direction</i>, to their initial or inherited value. It
	does not reset custom properties.
	<b>Example:</b> if an author specifies <b>all: initial</b> on an element, 
	it will block all inheritance and reset all properties, as if no rules 
	appeared in the author, user, or user-agent levels of the cascade.
	This can be useful for the root element of a &quot;widget&quot; included 
	in a page, which does not wish to inherit the styles of the outer page. 
	Note, however, that any &quot;default&quot; style applied to that element 
	(such as, e.g. <i>display: block</i> from the UA style sheet on block elements 
	such as &lt;div&gt;) will also be blown away.
	<b>Values:</b> unset | revert | revert-layer | initial | inherit 
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> see individual properties
	<b>Inherited:</b> see individual properties
	<b>Percentages:</b> see individual properties
	<b>Media:</b> see individual properties
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> no
	<b>Animation type:</b> see individual properties
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-cascade-3/#all-shorthand">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.all" idref="c.css.all">
		<group highlight="css-value" >
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
			<element pattern="unset">
			<reference>Changes all the properties applied to the element or the element's 
			parent to their parent value if they are inheritable or to their initial 
			value if not</reference>
			</element>
			<element pattern="revert">
			<reference>Changes all the properties applied to the element or the element's 
			parent to their parent value if they are inheritable or to their initial 
			value if not</reference>
			</element>
			<element pattern="revert-layer">
			<reference>Changes all the properties applied to the element or the element's 
			parent to their parent value if they are inheritable or to their initial 
			value if not</reference>
			</element>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation" highlight="css-property"  id="e.css.animation" idref="e.css.animation">
	<autocomplete append=": " />
	<reference>The animation property is a shorthand property for:
    <i>animation-name</i> - Specifies the name of the keyframe you want to bind to the selector
    <i>animation-duration</i> - Specifies how many seconds or milliseconds an animation takes to complete ( can also be &lt;inherit%gt; | &lt;initial%gt;)
    <i>animation-timing-function</i> - Specifies the speed curve of the animation
    <i>animation-delay</i> - Specifies a delay before the animation will start
    <i>animation-iteration-count</i> - Specifies how many times an animation should be played
    <i>animation-direction</i> - Specifies whether or not the animation should play in reverse on alternate cycles
    <i>animation-fill-mode</i> - Specifies what values are applied by the animation outside the time it is executing
    <i>animation-play-state</i> - Specifies whether the animation is running or paused
    <b>Example</b>: animation: mymove 5s ease-in 2s 4 alternate none running;
	<b>Note</b>: Always specify the animation-duration property, otherwise the duration is 0, and will never be played.
	<b>Values:</b> <i>name duration timing-function delay iteration-count direction fill-mode play-state</i> | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> see individual properties
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-shorthand-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation" idref="c.css.animation" highlight="css-value">
		<element pattern="[A-Za-z0-9._-]+" is_regex="1" case_insens="1" highlight="css-value" id="e.css.text" idref="e.css.text"/>
		<element pattern="ease-in"/>
		<element pattern="ease-out"/>
		<element pattern="ease-in-out"/>
		<element pattern="step-start"/>
		<element pattern="step-end"/>
		<element idref="e.css.initial"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-delay" highlight="css-property"  id="e.css.animation-delay" idref="e.css.animation-delay">
	<autocomplete append=": " />
	<reference>	The animation-delay property specifies a delay for the start of an animation. 
		The animation-delay value is defined in seconds (s) or milliseconds (ms).
	<b>Values:</b> <i>time</i> | initial | inherit
	<b>Initial:</b> 0s
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> list, each item a duration
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar 
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-animations-1/#animation-delay">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-delay" idref="c.css.animation-delay">
		<element pattern="[0-9]+\.?[0-9]*(s|ms)" is_regex="1" case_insens="1" highlight="css-value" id="e.css.time" idref="e.css.time">
			<reference>Sets a time-span in seconds (s) or milliseconds (ms) </reference>
		</element>
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-direction" highlight="css-property"  id="e.css.animation-direction" idref="e.css.animation-direction">
	<autocomplete append=": " />
	<reference>Defines whether or not the animation should play in reverse on alternate cycles.
	<b>Values:</b> normal | reverse | alternate | alternate-reverse
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-direction-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-direction" idref="c.css.animation-direction">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="reverse"/>
			<element pattern="alternate"/>
			<element pattern="alternate-reverse"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-duration" highlight="css-property"  id="e.css.animation-duration" idref="e.css.animation-duration">
	<autocomplete append=": " />
	<reference>Defines the length of time that an animation takes to complete one cycle.
	<b>Values:</b> &lt;time&gt; [, &lt;time&gt;]* | initial | inherit
	<b>Initial:</b> 0s
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-duration-property">www.w3.org</a></reference>
	<context idref="c.css.animation-delay" />
</element>

<!-- 10 -->
<element pattern="animation-fill-mode" highlight="css-property"  id="e.css.animation-fill-mode" idref="e.css.animation-fill-mode">
	<autocomplete append=": " />
	<reference>Defines what values are applied by the animation outside the time it is executing.
	<b>Values:</b> none | forwards | backwards | both
	<b>Initial:</b> none
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-fill-mode-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-fill-mode" idref="c.css.animation-fill-mode">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
		<element pattern="forwards"/>
		<element pattern="backwards"/>
		<element pattern="both"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-iteration-count" highlight="css-property"  id="e.css.animation-iteration-count" idref="e.css.animation-iteration-count">
	<autocomplete append=": " />
	<reference>Specifies the number of times an animation cycle is played. The initial value is ‘1’, meaning the animation will play 
		from beginning to end once.
	<b>Values:</b> infinite | &lt;number&gt;
	<b>Initial:</b> 1
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-iteration-count-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-iteration-count" idref="c.css.animation-iteration-count">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="infinite"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-name" highlight="css-property"  id="e.css.animation-name" idref="e.css.animation-name">
	<autocomplete append=": " />
	<reference>Defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation.
	<b>Values:</b> none | &lt;IDENT&gt;
	<b>Initial:</b> none
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-name-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-name" idref="c.css.animation-name">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-play-state" highlight="css-property"  id="e.css.animation-play-state" idref="e.css.animation-play-state">
	<autocomplete append=": " />
	<reference>Defines whether the animation is running or paused.
	<b>Values:</b> running | paused
	<b>Initial:</b> running
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-play-state-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-play-state" idref="c.css.animation-play-state">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="running"/>
		<element pattern="paused"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="animation-timing-function" highlight="css-property"  id="e.css.animation-timing-function" idref="e.css.animation-timing-function">
	<autocomplete append=": " />
	<reference>Describes how the animation will progress over one cycle of its duration.
	<b>Values:</b> ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(&lt;integer&gt;[, [ start | end ] ]?) | cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
	<b>Initial:</b> ease
	<b>Applies to:</b> all elements, ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-animations/#animation-timing-function-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.animation-timing-function" idref="c.css.animation-timing-function">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="ease"/>
		<element pattern="linear"/>
		<element pattern="ease-in"/>
		<element pattern="ease-out"/>
		<element pattern="ease-in-out"/>
		<element pattern="step-start"/>
		<element pattern="step-end"/>
	</group>
	<element pattern="steps" highlight="css-value">
		<autocomplete append="();" backup_cursor="2" />
		<context symbols="()" highlight="css-value" id="c.css.genericroundbraces" idref="c.css.genericroundbraces">
			<element pattern="("/>
			<element pattern=")" ends_context="1" highlight="css-value"/>
		</context>
	</element>
	<element pattern="cubic-bezier" highlight="css-value">
		<autocomplete append="();" backup_cursor="2" />
		<context idref="c.css.genericroundbraces"/>
	</element>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="aspect-ratio" highlight="css-property" id="e.css.aspect-ratio" idref="e.css.aspect-ratio" >
	<autocomplete append=": " />
	<reference>The aspect-ratio property allows you to define the ratio between width and height of an element. If aspect-ratio and width properties are set, the height will follow in the defined aspect ratio. <b>Tip</b>: Use the aspect-ratio property in responsive layouts where elements often vary in size and you want to preserve the ratio between width and height.
	<b>Values:</b> auto | <i>number</i>/<i>number</i> | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements except inline boxes and internal ruby or table boxes 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword or a pair of numbers
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-sizing-4/#aspect-ratio">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.aspect-ratio" idref="c.css.aspect-ratio">
	<group highlight="css-value" >
		<autocomplete append=";" />
<!--		[0-9]+.\/?[0-9]+ -->
		<element id="e.css.number-slash-number" pattern="[0-9]+.\/?[0-9]+" is_regex="1" highlight="css-value">
			<reference>First number specifies the number for width in aspect ratio. Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default. Format <i>n</i>/<i>n</i></reference>
		</element>
		<element pattern="auto">
			<reference>Replaced elements with a natural aspect ratio use that aspect ratio; otherwise the box has no preferred aspect ratio. Size calculations involving the aspect ratio work with the content box dimensions always.</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="azimuth" highlight="css-property"  id="e.css.azimuth" idref="e.css.azimuth">
	<autocomplete append=": " />
	<reference><b>WARNING:</b> This property is not supported by most browsers yet
	Spatial audio is an important stylistic property for aural presentation.
	<b>Values:</b> &lt;<i>angle</i>&gt; | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
	<b>Initial:</b> center
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> normalized angle
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/2007/CR-CSS21-20070719/aural.html#spatial-props">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.azimuth" idref="c.css.azimuth">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="left-side"/>
		<element pattern="far-left"/>
		<element pattern="left"/>
		<element pattern="center-left"/>
		<element pattern="center"/>
		<element pattern="center-right"/>
		<element pattern="right"/>
		<element pattern="far-right"/>
		<element pattern="right-side"/>
		<element pattern="behind"/>
		<element pattern="leftwards"/>
		<element pattern="rightwards"/>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<!-- *******************************************************************************************************
** The following backdrop-flter may need some changes. E.g. blur takes px as unit, hue-rotate takes degree...
** Maybe it is better to define each value independantly - this will later be used for the property "filter" as well.
************************************************************************************************************ -->
<element pattern="backdrop-filter" highlight="css-property" id="e.css.backdrop-filter" idref="e.css.backdrop-filter" >
	<autocomplete append=": " />
	<reference>The backdrop-filter property is used to apply a graphical effect to the area behind an element. <b>Tip</b>: To see the effect, the element or its background must be at least partially transparent.
	<b>Values:</b> none | &lt;<i>filter</i>&gt; [ blur() | brightness() | contrast() | drop-shadow() | 
		grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | 
		&lt;<i>url to an SVG filter</i>&gt;] | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> area behind the element 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword or filter
	<b>Animatable:</b> no
	<b>Animation type:</b> N/A
	<b>Specification:</b> no official specifications yet?
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.backdrop-filter" idref="c.css.backdrop-filter">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element id="e.css.light_filters" idref="e.css.light_filters" pattern="(blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|sepia|saturate)\([0-9]+\.?[0-9]*(%|deg|px)\)" is_regex="1" highlight="css-value">
			<reference>A space-separated list of filter-functions (in parentheses follows the intensitiy in appropriate units)</reference>
		</element>
		<element pattern="url" id="e.css.url" idref="e.css.url" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<context id="c.css.uri" idref="c.css.uri" symbols="()" highlight="css-value">
				<element pattern="(" />
				<element pattern=")" ends_context="1" highlight="css-value" />
			</context>
		</element>
		<element pattern="none">
			<reference>Default value. No filter is applied to the backdrop.</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="backface-visibility" highlight="css-property" id="e.css.backface-visibility" idref="e.css.backface-visibility" >
	<autocomplete append=": " />
	<reference>determines whether or not the ‘back’ side of a transformed element is visible when facing the viewer.
	<b>Values:</b> visible | hidden
	<b>Initial:</b> visible
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> same as specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-transforms/#backface-visibility-property">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.backface-visibility" idref="c.css.backface-visibility">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="visible"/>
		<element pattern="hidden"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background" highlight="css-property"  id="e.css.background" idref="e.css.background">
	<autocomplete append=": " />
	<reference>A shorthand property for setting all background properties in one declaration.
	<b>Values:</b> &lt;<i>bg-image</i>&gt; || &lt;<i>position</i>&gt; [ / &lt;<i>bg-size</i>&gt; ]? || &lt;<i>repeat-style</i>&gt; ||
		 &lt;<i>attachment</i>&gt; || &lt;<i>box</i>&gt;{1,2} || &lt;'<i>background-color</i>'&gt; | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> see individual properties
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background">www.w3.org</a></reference>
<context id="c.css.background" idref="c.css.background" symbols=" &#9;&#10;&#13;-{},().;:'&quot;">
	<element idref="e.css.url">
		<autocomplete append="()" backup_cursor="1" />
		<context idref="c.css.uri" />
	</element>
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="aliceblue"/>
		<element pattern="antiquewhite"/>
		<element pattern="aqua"/>
		<element pattern="aquamarine"/>
		<element pattern="azure"/>
		<element pattern="beige"/>
		<element pattern="bisque"/>
		<element pattern="black"/>
		<element pattern="blanchedalmond"/>
		<element pattern="blue"/>
		<element pattern="blueviolet"/>
		<element pattern="brown"/>
		<element pattern="burlywood"/>
		<element pattern="cadetblue"/>
		<element pattern="chartreuse"/>
		<element pattern="chocolate"/>
		<element pattern="coral"/>
		<element pattern="cornflowerblue"/>
		<element pattern="cornsilk"/>
		<element pattern="crimson"/>
		<element pattern="cyan"/>
		<element pattern="darkblue"/>
		<element pattern="darkcyan"/>
		<element pattern="darkgoldenrod"/>
		<element pattern="darkgray"/>
		<element pattern="darkgreen"/>
		<element pattern="darkgrey"/>
		<element pattern="darkkhaki"/>
		<element pattern="darkmagenta"/>
		<element pattern="darkolivegreen"/>
		<element pattern="darkorange"/>
		<element pattern="darkorchid"/>
		<element pattern="darkred"/>
		<element pattern="darksalmon"/>
		<element pattern="darkseagreen"/>
		<element pattern="darkslateblue"/>
		<element pattern="darkslategray"/>
		<element pattern="darkslategrey"/>
		<element pattern="darkturquoise"/>
		<element pattern="darkviolet"/>
		<element pattern="deeppink"/>
		<element pattern="deepskyblue"/>
		<element pattern="dimgray"/>
		<element pattern="dimgrey"/>
		<element pattern="dodgerblue"/>
		<element pattern="firebrick"/>
		<element pattern="floralwhite"/>
		<element pattern="forestgreen"/>
		<element pattern="fuchsia"/>
		<element pattern="gainsboro"/>
		<element pattern="ghostwhite"/>
		<element pattern="gold"/>
		<element pattern="goldenrod"/>
		<element pattern="gray"/>
		<element pattern="green"/>
		<element pattern="greenyellow"/>
		<element pattern="grey"/>
		<element pattern="honeydew"/>
		<element pattern="hotpink"/>
		<element pattern="indianred"/>
		<element pattern="indigo"/>
		<element pattern="ivory"/>
		<element pattern="khaki"/>
		<element pattern="lavender"/>
		<element pattern="lavenderblush"/>
		<element pattern="lawngreen"/>
		<element pattern="lemonchiffon"/>
		<element pattern="lightblue"/>
		<element pattern="lightcoral"/>
		<element pattern="lightcyan"/>
		<element pattern="lightgoldenrodyellow"/>
		<element pattern="lightgray"/>
		<element pattern="lightgreen"/>
		<element pattern="lightgrey"/>
		<element pattern="lightpink"/>
		<element pattern="lightsalmon"/>
		<element pattern="lightseagreen"/>
		<element pattern="lightskyblue"/>
		<element pattern="lightslategray"/>
		<element pattern="lightslategrey"/>
		<element pattern="lightsteelblue"/>
		<element pattern="lightyellow"/>
		<element pattern="lime"/>
		<element pattern="limegreen"/>
		<element pattern="linen"/>
		<element pattern="magenta"/>
		<element pattern="maroon"/>
		<element pattern="mediumaquamarine"/>
		<element pattern="mediumblue"/>
		<element pattern="mediumorchid"/>
		<element pattern="mediumpurple"/>
		<element pattern="mediumseagreen"/>
		<element pattern="mediumslateblue"/>
		<element pattern="mediumspringgreen"/>
		<element pattern="mediumturquoise"/>
		<element pattern="mediumvioletred"/>
		<element pattern="midnightblue"/>
		<element pattern="mintcream"/>
		<element pattern="mistyrose"/>
		<element pattern="moccasin"/>
		<element pattern="navajowhite"/>
		<element pattern="navy"/>
		<element pattern="oldlace"/>
		<element pattern="olive"/>
		<element pattern="olivedrab"/>
		<element pattern="orange"/>
		<element pattern="orangered"/>
		<element pattern="orchid"/>
		<element pattern="palegoldenrod"/>
		<element pattern="palegreen"/>
		<element pattern="paleturquoise"/>
		<element pattern="palevioletred"/>
		<element pattern="papayawhip"/>
		<element pattern="peachpuff"/>
		<element pattern="peru"/>
		<element pattern="pink"/>
		<element pattern="plum"/>
		<element pattern="powderblue"/>
		<element pattern="purple"/>
		<element pattern="red"/>
		<element pattern="rosybrown"/>
		<element pattern="royalblue"/>
		<element pattern="saddlebrown"/>
		<element pattern="salmon"/>
		<element pattern="sandybrown"/>
		<element pattern="seagreen"/>
		<element pattern="seashell"/>
		<element pattern="sienna"/>
		<element pattern="silver"/>
		<element pattern="skyblue"/>
		<element pattern="slateblue"/>
		<element pattern="slategray"/>
		<element pattern="slategrey"/>
		<element pattern="snow"/>
		<element pattern="springgreen"/>
		<element pattern="steelblue"/>
		<element pattern="tan"/>
		<element pattern="teal"/>
		<element pattern="thistle"/>
		<element pattern="tomato"/>
		<element pattern="turquoise"/>
		<element pattern="violet"/>
		<element pattern="wheat"/>
		<element pattern="white"/>
		<element pattern="whitesmoke"/>
		<element pattern="yellow"/>
		<element pattern="yellowgreen"/>
		<element pattern="currentColor"/>
		<element pattern="transparent"/>
	</group>
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto"/>
		<element pattern="cover"/>
		<element pattern="contain"/>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
		<element pattern="repeat"/>
		<element pattern="repeat-x"/>
		<element pattern="repeat-y"/>
		<element pattern="no-repeat"/>
		<element pattern="scroll"/>
		<element pattern="fixed"/>
		<element pattern="top left"/>
		<element pattern="top center"/>
		<element pattern="top right"/>
		<element pattern="center left"/>
		<element pattern="center center"/>
		<element pattern="center right"/>
		<element pattern="bottom left"/>
		<element pattern="bottom center"/>
		<element pattern="bottom right"/>
		<element pattern="left top"/>
		<element pattern="left center"/>
		<element pattern="left bottom"/>
		<element pattern="center top"/>
		<element pattern="center bottom"/>
		<element pattern="right top"/>
		<element pattern="right center"/>
		<element pattern="right bottom"/>
		<element pattern="none"/>
		<element pattern="0"/>
	</group>
	<element idref="e.css.hex-color" />
	<element idref="e.css.rgb-color" />
	<element idref="e.css.rgba-color" />
	<element id="e.css.percent" idref="e.css.percent" pattern="[0-9]+\.?[0-9]*%" is_regex="1" highlight="css-value"/>
	<element id="e.css.length" idref="e.css.length" pattern="[0-9]+\.?[0-9]*(em|rem|ex|in|cm|mm|pt|pc|px|ch|vw|vh|vmin|vmax)" is_regex="1" highlight="css-value"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>-->
</element>

<element pattern="background-attachment" highlight="css-property"  id="e.css.background-attachment" idref="e.css.background-attachment">
	<autocomplete append=": " />
	<reference>Sets whether a background image is fixed or scrolls with the rest of the page.
	<b>Values:</b> scroll | fixed | local
	<b>Initial:</b> scroll
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-attachment">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-attachment" idref="c.css.background-attachment">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="scroll"/>
		<element pattern="fixed"/>
		<element pattern="local"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-blend-mode" highlight="css-property"  id="e.css.background-blend-mode" idref="e.css.background-blend-mode">
	<autocomplete append=": " />
	<reference>The background-blend-mode property defines the blending mode of each background layer (color and/or image)
	<b>Values:</b> normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity
	<b>Initial:</b> normal
	<b>Applies to:</b> All HTML elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/compositing-1/#propdef-background-blend-mode">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-blend-mode" idref="c.css.background-blend-mode">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="normal">
			<reference>This is default. Sets the blending mode to normal</reference>
		</element>
		<element pattern="multiply">
			<reference>Sets the blending mode to multiply</reference>
		</element>
		<element pattern="screen">
			<reference>Sets the blending mode to screen</reference>
		</element>
		<element pattern="overlay">
			<reference>Sets the blending mode to overlay</reference>
		</element>
		<element pattern="darken">
			<reference>Sets the blending mode to darken</reference>
		</element>
		<element pattern="lighten">
			<reference>Sets the blending mode to lighten</reference>
		</element>
		<element pattern="color-dodge">
			<reference>Sets the blending mode to color-dodge</reference>
		</element>
		<element pattern="saturation">
			<reference>Sets the blending mode to saturation</reference>
		</element>
		<element pattern="color">
			<reference>Sets the blending mode to color</reference>
		</element>
		<element pattern="luminosity">
			<reference>Sets the blending mode to luminosity</reference>
		</element>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-clip" highlight="css-property"  id="e.css.background-clip" idref="e.css.background-clip">
	<autocomplete append=": " />
	<reference>Determines the area within which the background is painted.
	<b>Values:</b> border-box | padding-box | content-box
	<b>Initial:</b> border-box
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-clip">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-clip" idref="c.css.background-clip">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="border-box"/>
			<element pattern="padding-box"/>
			<element pattern="content-box"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<!--
/*********************************************************************************
** The following property background-color is only almost identical to accent-color.
** Here, the value "auto" is not available. Hence, this context should be used for
** all color properties which do not have the "auto" value.
**********************************************************************************/
-->
<element pattern="background-color" highlight="css-property"  id="e.css.background-color" idref="e.css.background-color">
	<autocomplete append=": " />
	<reference>Sets the background color of an element.
	<b>Values:</b> &lt;color&gt; | transparent | initial | inherit
	<b>Initial:</b> transparent
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the computed color(s)
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-color">www.w3.org</a>
	</reference>
	<context id="c.css.background-color" idref="c.css.background-color" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="aliceblue"/>
		<element pattern="antiquewhite"/>
		<element pattern="aqua"/>
		<element pattern="aquamarine"/>
		<element pattern="azure"/>
		<element pattern="beige"/>
		<element pattern="bisque"/>
		<element pattern="black"/>
		<element pattern="blanchedalmond"/>
		<element pattern="blue"/>
		<element pattern="blueviolet"/>
		<element pattern="brown"/>
		<element pattern="burlywood"/>
		<element pattern="cadetblue"/>
		<element pattern="chartreuse"/>
		<element pattern="chocolate"/>
		<element pattern="coral"/>
		<element pattern="cornflowerblue"/>
		<element pattern="cornsilk"/>
		<element pattern="crimson"/>
		<element pattern="cyan"/>
		<element pattern="darkblue"/>
		<element pattern="darkcyan"/>
		<element pattern="darkgoldenrod"/>
		<element pattern="darkgray"/>
		<element pattern="darkgreen"/>
		<element pattern="darkgrey"/>
		<element pattern="darkkhaki"/>
		<element pattern="darkmagenta"/>
		<element pattern="darkolivegreen"/>
		<element pattern="darkorange"/>
		<element pattern="darkorchid"/>
		<element pattern="darkred"/>
		<element pattern="darksalmon"/>
		<element pattern="darkseagreen"/>
		<element pattern="darkslateblue"/>
		<element pattern="darkslategray"/>
		<element pattern="darkslategrey"/>
		<element pattern="darkturquoise"/>
		<element pattern="darkviolet"/>
		<element pattern="deeppink"/>
		<element pattern="deepskyblue"/>
		<element pattern="dimgray"/>
		<element pattern="dimgrey"/>
		<element pattern="dodgerblue"/>
		<element pattern="firebrick"/>
		<element pattern="floralwhite"/>
		<element pattern="forestgreen"/>
		<element pattern="fuchsia"/>
		<element pattern="gainsboro"/>
		<element pattern="ghostwhite"/>
		<element pattern="gold"/>
		<element pattern="goldenrod"/>
		<element pattern="gray"/>
		<element pattern="green"/>
		<element pattern="greenyellow"/>
		<element pattern="grey"/>
		<element pattern="honeydew"/>
		<element pattern="hotpink"/>
		<element pattern="indianred"/>
		<element pattern="indigo"/>
		<element pattern="ivory"/>
		<element pattern="khaki"/>
		<element pattern="lavender"/>
		<element pattern="lavenderblush"/>
		<element pattern="lawngreen"/>
		<element pattern="lemonchiffon"/>
		<element pattern="lightblue"/>
		<element pattern="lightcoral"/>
		<element pattern="lightcyan"/>
		<element pattern="lightgoldenrodyellow"/>
		<element pattern="lightgray"/>
		<element pattern="lightgreen"/>
		<element pattern="lightgrey"/>
		<element pattern="lightpink"/>
		<element pattern="lightsalmon"/>
		<element pattern="lightseagreen"/>
		<element pattern="lightskyblue"/>
		<element pattern="lightslategray"/>
		<element pattern="lightslategrey"/>
		<element pattern="lightsteelblue"/>
		<element pattern="lightyellow"/>
		<element pattern="lime"/>
		<element pattern="limegreen"/>
		<element pattern="linen"/>
		<element pattern="magenta"/>
		<element pattern="maroon"/>
		<element pattern="mediumaquamarine"/>
		<element pattern="mediumblue"/>
		<element pattern="mediumorchid"/>
		<element pattern="mediumpurple"/>
		<element pattern="mediumseagreen"/>
		<element pattern="mediumslateblue"/>
		<element pattern="mediumspringgreen"/>
		<element pattern="mediumturquoise"/>
		<element pattern="mediumvioletred"/>
		<element pattern="midnightblue"/>
		<element pattern="mintcream"/>
		<element pattern="mistyrose"/>
		<element pattern="moccasin"/>
		<element pattern="navajowhite"/>
		<element pattern="navy"/>
		<element pattern="oldlace"/>
		<element pattern="olive"/>
		<element pattern="olivedrab"/>
		<element pattern="orange"/>
		<element pattern="orangered"/>
		<element pattern="orchid"/>
		<element pattern="palegoldenrod"/>
		<element pattern="palegreen"/>
		<element pattern="paleturquoise"/>
		<element pattern="palevioletred"/>
		<element pattern="papayawhip"/>
		<element pattern="peachpuff"/>
		<element pattern="peru"/>
		<element pattern="pink"/>
		<element pattern="plum"/>
		<element pattern="powderblue"/>
		<element pattern="purple"/>
		<element pattern="rebeccapurple"/>
		<element pattern="red"/>
		<element pattern="rosybrown"/>
		<element pattern="royalblue"/>
		<element pattern="saddlebrown"/>
		<element pattern="salmon"/>
		<element pattern="sandybrown"/>
		<element pattern="seagreen"/>
		<element pattern="seashell"/>
		<element pattern="sienna"/>
		<element pattern="silver"/>
		<element pattern="skyblue"/>
		<element pattern="slateblue"/>
		<element pattern="slategray"/>
		<element pattern="slategrey"/>
		<element pattern="snow"/>
		<element pattern="springgreen"/>
		<element pattern="steelblue"/>
		<element pattern="tan"/>
		<element pattern="teal"/>
		<element pattern="thistle"/>
		<element pattern="tomato"/>
		<element pattern="turquoise"/>
		<element pattern="violet"/>
		<element pattern="wheat"/>
		<element pattern="white"/>
		<element pattern="whitesmoke"/>
		<element pattern="yellow"/>
		<element pattern="yellowgreen"/>
		<element pattern="currentColor"/>
		<element pattern="transparent"/>
	</group>
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element pattern="#([0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]|[0-9a-f][0-9a-f][0-9a-f])" highlight="css-value" is_regex="1" case_insens="1" id="e.css.hex-color" idref="e.css.hex-color" />
	<element pattern="(rgba|hsla)\( *[0-9]+%? *, *[0-9]+%? *, *[0-9]+%? *, *(0|1|0.[0-9]) *\)" highlight="css-value" is_regex="1" case_insens="1" id="e.css.rgba-color" idref="e.css.rgba-color" />
	<element pattern="(rgb|hsl)\( *[0-9]+%? *, *[0-9]+%? *, *[0-9]+%? *\)" highlight="css-value" is_regex="1" case_insens="1" id="e.css.rgb-color" idref="e.css.rgb-color" />
	<element id="e.css.end" idref="e.css.end" pattern=";" ends_context="1"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-image" highlight="css-property"  id="e.css.background-image" idref="e.css.background-image">
	<autocomplete append=": " />
	<reference>Sets the background image of an element.
	<b>Values:</b> none | &lt;image&gt;
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, but with URIs made absolute
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-image">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}().;:'&quot;" id="c.css.background-image" idref="c.css.background-image">
		<element idref="e.css.url" />
<!--	<element pattern="url" highlight="css-value">
		<autocomplete append="();" backup_cursor="2" />
		<context idref="c.css.uri"/>
	</element>-->
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
		</context>
</element>

<element pattern="background-origin" highlight="css-property"  id="e.css.background-origin" idref="e.css.background-origin">
	<autocomplete append=": " />
	<reference>Specifies the background positioning area
	<b>Values:</b> border-box | padding-box | content-box
	<b>Initial:</b> padding-box
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-origin">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-origin" idref="c.css.background-origin">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="border-box"/>
		<element pattern="padding-box"/>
		<element pattern="content-box"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-position" highlight="css-property" id="e.css.background-position" idref="e.css.background-position">
	<autocomplete append=": " />
	<reference>Specifies the background image initial position
	<b>Values:</b>
	[
	 [ left | center | right | top | bottom | &lt;percentage&gt; | &lt;length&gt; ]
	|
	 [ left | center | right | &lt;percentage&gt; | &lt;length&gt; ]
	 [ top | center | bottom | &lt;percentage&gt; | &lt;length&gt; ]
	|
	 [ center | [ left | right ] [ &lt;percentage&gt; | &lt;length&gt; ]? ] &amp;&amp;
	 [ center | [ top | bottom ] [ &lt;percentage&gt; | &lt;length&gt; ]? ]
	]
	<b>Initial:</b> 0% 0%
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of background positioning area minus size of background image
	<b>Media:</b> visual
	<b>Computed value:</b> 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
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-position">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-position" idref="c.css.background-position">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="left"/>
		<element pattern="center"/>
		<element pattern="right"/>
		<element pattern="top"/>
		<element pattern="bottom"/>
		<element pattern="top left"/>
		<element pattern="top center"/>
		<element pattern="top right"/>
		<element pattern="center left"/>
		<element pattern="center center"/>
		<element pattern="center right"/>
		<element pattern="bottom left"/>
		<element pattern="bottom center"/>
		<element pattern="bottom right"/>
		<element pattern="left top"/>
		<element pattern="left center"/>
		<element pattern="left bottom"/>
		<element pattern="center top"/>
		<element pattern="center bottom"/>
		<element pattern="right top"/>
		<element pattern="right center"/>
		<element pattern="right bottom"/>
		<element pattern="0"/>
	</group>
	<element idref="e.css.percent"/>
	<element idref="e.css.length"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-position-x" highlight="css-property" id="e.css.background-position-x" idref="e.css.background-position-x">
	<autocomplete append=": " />
	<reference><b>Warning</b>: This property is only supported by Firefox and Safari Browser!
	The background-position-x property sets the position of a background image on the x-axis. <b>Tip</b>: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
	<b>Values:</b> left | center | right | &lt;percentage&gt; | &lt;length&gt; | initial | inherit
	<b>Initial:</b> 0%
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of background positioning area minus size of background image
	<b>Media:</b> visual
	<b>Computed value:</b> 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
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-position">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-position-x" idref="c.css.background-position-x">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="left"/>
		<element pattern="center"/>
		<element pattern="right"/>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
		<element pattern="0"/>
	</group>
	<element idref="e.css.percent"/>
	<element idref="e.css.length"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-position-y" highlight="css-property" id="e.css.background-position-y" idref="e.css.background-position-y">
	<autocomplete append=": " />
	<reference><b>Warning</b>: This property is only supported by Firefox and Safari Browser!
	The background-position-y property sets the position of a background image on the y-axis. <b>Tip</b>: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
	<b>Values:</b> top | center | bottom | &lt;<i>percentage</i>&gt; | &lt;<i>length</i>&gt; | initial | inherit
	<b>Initial:</b> 0%
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of background positioning area minus size of background image
	<b>Media:</b> visual
	<b>Computed value:</b> 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
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-position">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-position-y" idref="c.css.background-position-y">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="top"/>
		<element pattern="center"/>
		<element pattern="bottom"/>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
		<element pattern="0"/>
	</group>
	<element idref="e.css.percent"/>
	<element idref="e.css.length"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="background-repeat" highlight="css-property" id="e.css.background-repeat" idref="e.css.background-repeat">
	<autocomplete append=": " />
	<reference>Specifies how background images are tiled after they have been sized and positioned
	<b>Values:</b> repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
	<b>Initial:</b> repeat
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> A list, each item consisting of: two keywords, one per dimension
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-repeat">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-repeat" idref="c.css.background-repeat">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="no-repeat"/>
		<element pattern="repeat"/>
		<element pattern="repeat-x"/>
		<element pattern="repeat-y"/>
		<element pattern="round"/>
		<element pattern="space"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<!-- 30 -->
<element pattern="background-size" highlight="css-property" id="e.css.background-size" idref="e.css.background-size">
	<autocomplete append=": " />
	<reference>Specifies how background images are tiled after they have been sized and positioned
	<b>Values:</b> [ &lt;length&gt; | &lt;percentage&gt; | auto ]{1,2} | cover | contain
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, but with lengths made absolute
	<b>Animatable:</b> yes except keyword values
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-background-size">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.background-size" idref="c.css.background-size">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto"/>
		<element pattern="cover"/>
		<element pattern="contain"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="block-size" highlight="css-property" id="e.css.block-size" idref="e.css.block-size">
	<autocomplete append=": " />
	<reference>The block-size property specifies the size of an element in the block direction. <b>Note</b>: The related CSS property writing-mode defines block direction, and this affects the result of the block-size property. For pages in English, block direction is downward and inline direction is left to right.
	The CSS block-size and inline-size properties are very similar to CSS properties <i>width</i> and <i>height</i>, but the block-size and inline-size properties are dependent on block and inline directions. 
	<b>Values:</b> auto | &lt;<i>value</i>&gt; | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements but non-replaced inline elements, table rows, and row groups
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> all elements but non-replaced inline elements, table rows, and row groups
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-logical-1/#propdef-block-size">w3.org</a>
	</reference>
	<context id="c.css.block-size" idref="c.css.block-size" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.percent"/>
		<element idref="e.css.length"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border" highlight="css-property" id="e.css.border" idref="e.css.border">
	<autocomplete append=": " />
	<reference>Shorthand property for setting the same width, style and color for all four borders of a box.
	<b>Values:</b> [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt; ] | initial | inherit;
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-shorthands">www.w3.org</a></reference>
	<context id="c.css.border" idref="c.css.border" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >
			<element pattern="(aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen|currentColor|transparent)" is_regex="1" id="e.css.colors" idref="e.css.colors" /> 
			<element idref="e.css.hex-color"/>
			<element idref="e.css.rgba-color"/>
			<element idref="e.css.rgb-color"/>
			<element idref="e.css.length"/>
			<element pattern="(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)" is_regex="1" id="e.css.border_style" idref="e.css.border_style"/>
			<element pattern="thin" />
			<element pattern="medium" />
			<element pattern="thick" />
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.end"/>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-block" highlight="css-property" id="e.css.border-block" idref="e.css.border-block">
	<autocomplete append=": " />
	<reference>The border-block property is a shorthand property for these properties:
    border-block-width
    border-block-style (required)
    border-block-color
	If values for color or width are omitted, default values will be used. The CSS border-block property is very similar to CSS property border, but the border-block property is dependent on block direction. 
	<b>Note</b>: The related CSS property writing-mode defines block direction. This affects where the start and end of a block is and the result of the border-block property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> &lt;<i>border-block-width</i>&gt; &lt;<i>border-block-style</i>&gt; &lt;<i>border-block-color</i>&gt; | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block">www.w3.org</a></reference>
	<context id="c.css.border-block" idref="c.css.border-block" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
	<group highlight="css-value" >
		<autocomplete append=" " />
		<element idref="e.css.length"/>
	</group>
	<group highlight="css-value" >
		<autocomplete append=" " />
		<element idref="e.css.border_style"/>
	</group>
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
		<element idref="e.css.colors" />
		<element idref="e.css.hex-color" />
		<element idref="e.css.rgb-color" />
		<element idref="e.css.rgba-color" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-block-color" highlight="css-property" id="e.css.border-block-color" idref="e.css.border-block-color">
	<autocomplete append=": " />
	<reference>The border-block-color property sets the color of an element's borders in the block direction. If two values are set, the second applies to the bottom border line
	<b>Note</b>: For the border-block-color property to take effect, the border-block-style <i>must</i> be set.
	<b>Values:</b> <i>color</i> [<i>color</i>] | transparent | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block">www.w3.org</a></reference>
	<context idref="c.css.background-color" />
</element>

<element pattern="border-block-end-color" highlight="css-property" id="e.css.border-block-end-color" idref="e.css.border-block-end-color">
	<autocomplete append=": " />
	<reference>The border-block-end-color property sets the color of an element's border at the end in the block direction.
	<b>Note</b>: For the border-block-end-color property to take effect, the border-block-end-style property <i>must</i> be set.
	<b>Values:</b> <i>color</i> | transparent | initial | inherit
	<b>Initial:</b> the current value
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block">www.w3.org</a></reference>
	<context idref="c.css.background-color" />
</element>

<element pattern="border-block-end-style" highlight="css-property" id="e.css.border-block-end-style" idref="e.css.border-block-end-style">
	<autocomplete append=": " />
	<reference>The border-block-end-color property sets the color of an element's border at the end in the block direction.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block">www.w3.org</a></reference>
	<context id="c.css.border_style" idref="c.css.border_style" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
		<element pattern="hidden"/>
		<element pattern="dotted"/>
		<element pattern="dashed"/>
		<element pattern="solid"/>
		<element pattern="double"/>
		<element pattern="groove"/>
		<element pattern="ridge"/>
		<element pattern="inset"/>
		<element pattern="outset"/>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-block-end-width" highlight="css-property" id="e.css.border-block-end-width" idref="e.css.border-block-end-width">
	<autocomplete append=": " />
	<reference>The border-block-end-width property sets the width of an element's border at the end in the block direction.
	<b>Note</b>: For the border-block-end-width property to take effect, the border-block-end-style property <i>must</i> be set.
	<b>Values:</b> none | medium | thin | thick | <i>length</i> | initial | inherit
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; zero if the border style is none or hidden
	<b>Animatable:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block-end-width">www.w3.org</a></reference>
	<context id="c.css.border_width" idref="c.css.border_width" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element idref="e.css.length"/>
		<element pattern="thin"/>
		<element pattern="medium"/>
		<element pattern="thick"/>
		<element pattern="none"/>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-block-start-color" highlight="css-property" id="e.css.border-block-start-color" idref="e.css.border-block-start-color">
	<autocomplete append=": " />
	<reference>The border-block-start-color property sets the color of an element's border at the start in the block direction.
	<b>Note</b>: For the border-block-start-color property to take effect, the border-block-start-style property <i>must</i> be set.
	<b>Values:</b> <i>color</i> | transparent | initial | inherit
	<b>Initial:</b> the current value
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block">www.w3.org</a></reference>
	<context idref="c.css.background-color" />
</element>

<element pattern="border-block-start-style" highlight="css-property" id="e.css.border-block-start-style" idref="e.css.border-block-start-style">
	<autocomplete append=": " />
	<reference>The border-block-start-styele property sets the color of an element's border at the start in the block direction.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<!-- 40 -->
<element pattern="border-block-start-width" highlight="css-property" id="e.css.border-block-start-width" idref="e.css.border-block-start-width">
	<autocomplete append=": " />
	<reference>The border-block-start-width property sets the width of an element's border at the start in the block direction.
	<b>Note</b>: For the border-block-start-width property to take effect, the border-block-start-style property <i>must</i> be set.
	<b>Values:</b> medium | thin | thick | <i>length</i> | initial | inherit
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; zero if the border style is none or hidden
	<b>Animatable:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block-start-width">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-block-style" highlight="css-property" id="e.css.border-block-style" idref="e.css.border-block-style">
	<autocomplete append=": " />
	<reference>The border-block-style property sets the style of an element's borders in the block direction.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> 
	<b>Animatable:</b> 
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-block-width" highlight="css-property" id="e.css.border-block-width" idref="e.css.border-block-width">
	<autocomplete append=": " />
	<reference>The border-block-width property sets the width of an element's border at the start in the block direction.
	<b>Note</b>: For the border-block-width property to take effect, the border-block-style property <i>must</i> be set.
	<b>Values:</b> medium | thin | thick | <i>length</i> | initial | inherit
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; zero if the border style is none or hidden
	<b>Animatable:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-block-start-width">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-bottom" highlight="css-property" id="e.css.border-bottom" idref="e.css.border-bottom">
	<autocomplete append=": " />
	<reference>Shorthand property for setting the width, style and color of the bottom border of a box.
	<b>Values:</b> &lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt;
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-shorthands">www.w3.org</a></reference>
	<context idref="c.css.border"/>
</element>

<element pattern="border-bottom-color" highlight="css-property" id="e.css.border-bottom-color" idref="e.css.border-bottom-color">
	<autocomplete append=": " />
	<reference>Sets the foreground color of the bottom border specified by the border-style properties.
	<b>Values:</b> &lt;color&gt; | transparent | initial | inherit
	<b>Initial:</b> currentColor
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the computed color
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-border-bottom-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-bottom-left-radius" highlight="css-property" id="e.css.border-bottom-left-radius" idref="e.css.border-bottom-left-radius">
	<autocomplete append=": " />
	<reference>Defines the radius of the bottom left corner.
	<b>Values:</b> 0 | [ &lt;length&gt; | &lt;percentage&gt; ] | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-radius">www.w3.org</a></reference>
	<context id="c.css.length_percentage" idref="c.css.length_percentage" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >	
			<element pattern="0" />	
			<element idref="e.css.percent" />
			<element idref="e.css.length" />
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end" />
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-bottom-right-radius" highlight="css-property" id="e.css.border-bottom-right-radius" idref="e.css.border-bottom-right-radius">
	<autocomplete append=": " />
	<reference>Defines the radius of the right bottom corner
	<b>Values:</b> [ &lt;length&gt; | &lt;percentage&gt; ] | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-bottom-style" highlight="css-property" id="e.css.border-bottom-style" idref="e.css.border-bottom-style">
	<autocomplete append=": " />
	<reference>Sets the style of the element's bottom border, unless there is a border image.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-bottom-width" highlight="css-property" id="e.css.border-bottom-width" idref="e.css.border-bottom-width">
	<autocomplete append=": " />
	<reference>Sets the thickness of the bottom border. <b>Note</b>: Always declare the border-style or the border-bottom-style property before the border-bottom-width property. An element must have borders before you can change the width.
	<b>Values:</b> &lt;length&gt; | thin | medium | thick |initial | inherit
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; ‘0’ if the border style is ‘none’ or ‘hidden’
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-style">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-collapse" highlight="css-property" id="e.css.border-collapse" idref="e.css.border-collapse">
	<autocomplete append=": " />
	<reference>The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.
	<b>Values:</b> collapse | separate | initial | inherit
	<b>Initial:</b> separate
	<b>Applies to:</b> ‘table’ and ‘inline-table’ elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/CSS2/tables.html#borders">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.border-collapse" idref="c.css.border-collapse">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="collapse"/>
		<element pattern="separate"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<!-- 50 -->
<element pattern="border-color" highlight="css-property"  id="e.css.border-color" idref="e.css.border-color">
	<autocomplete append=": " />
	<reference>Sets the foreground color of the border specified by the border-style properties.
	<b>Values:</b> &lt;color&gt; | transparent | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-end-end-radius" highlight="css-property" id="e.css.border-end-end-radius" idref="e.css.border-end-end-radius">
	<autocomplete append=": " />
	<reference>The border-end-end-radius property defines the radius of the corner at the end in the block and inline directions. Values for the border-end-end-radius property can be set in different ways:
	If the border-end-end-radius property has two values:
	    border-end-end-radius: 10px 50px;
   	     radius at block end is 10px
      	  radius at inline end is 50px
	If the border-end-end-radius property has one value:
	    border-end-end-radius: 10px;
   	     radius at block and inline end corner is 10px
The CSS border-end-end-radius property is very similar to CSS properties border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius and border-top-right-radius, but the border-end-end-radius property is dependent on block and inline directions.
<b>Note</b>: The related CSS properties writing-mode, text-orientation and direction define block and inline directions. That is why these properties also affect the result of the border-end-end-radius property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> [ &lt;length&gt; | &lt;percentage&gt; ] | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-end-start-radius" highlight="css-property" id="e.css.border-end-start-radius" idref="e.css.border-end-start-radius">
	<autocomplete append=": " />
	<reference>The border-end-start-radius property defines the radius of the corner at the end in the block direction and the start in the inline direction. Values for the border-end-start-radius property can be set in different ways:
	If the border-end-start-radius property has two values:
	    border-end-start-radius: 10px 50px;
   	     radius at block end is 10px
      	  radius at inline start is 50px
	If the border-end-start-radius property has one value:
	    border-end-start-radius: 10px;
   	     radius at block and inline start corner is 10px
The CSS border-end-start-radius property is very similar to CSS properties border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius and border-top-right-radius, but the border-end-start-radius property is dependent on block and inline directions.
<b>Note</b>: The related CSS properties writing-mode, text-orientation and direction define block and inline directions. That is why these properties also affect the result of the border-end-start-radius property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> [ &lt;length&gt; | &lt;percentage&gt; ] | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-image" highlight="css-property" id="e.css.border-image" idref="e.css.border-image">
	<autocomplete append=": " />
	<reference>The border-image property allows you to specify an image to be used as the border around an element. The <i>border-image</i> property is a shorthand property for:
	    border-image-source (The path to the image to be used as a border)
   	 border-image-slice (How to slice the border image, values can be <i>integer</i>, <i>percent</i> or fill)
    	 border-image-width (The width of the border image, values as usual for length, can also be auto)
	    border-image-outset (The amount by which the border image area extends beyond the border box)
   	 border-image-repeat (Whether the border image should be repeated, rounded or stretched, values are stretch | round | repeat | stretch)
	Omitted values are set to their default values.
	<b>Values:</b> &lt;border-image-source&gt; | &lt;border-image-slice&gt; [ / &lt;border-image-width&gt; | / &lt;border-image-width&gt;? / &lt;border-image-outset&gt; ]? || &lt;border-image-repeat&gt;
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> see individual properties
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-border-image">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{},().;:'&quot;" id="c.css.border-image" idref="c.css.border-image">
<!--		<element pattern="url" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.uri"/>
		</element>-->
<!--		<group highlight="css-value">
		</group>-->
		<element idref="e.css.url" />
		<group highlight="css-value" >
			<autocomplete append=" " />
			<element pattern="auto"/>
			<element pattern="stretch"/>
			<element pattern="repeat"/>
			<element pattern="round"/>
			<element pattern="space"/>
			<element pattern="fill"/>
		</group>
		<element idref="e.css.percent"/>
		<element idref="e.css.length"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-image-outset" highlight="css-property" id="e.css.border-image-outset" idref="e.css.border-image-outset">
	<autocomplete append=": " />
	<reference>Specifies the amount by which the border image area extends beyond the border box.
	<b>Values:</b> &lt;length&gt; | &lt;number&gt; |initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements, except internal table elements when ‘border-collapse’ is ‘collapse’
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> four values, each a number or absolute length 
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#border-image-outset">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.border-image-outset" idref="c.css.border-image-outset">
		<element idref="e.css.length"/>
			<element pattern="[0-9]+\.?[0-9]+" is_regex="1">
				<reference>Represents multiples of the corresponding border-width</reference>
			</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-image-repeat" highlight="css-property" id="e.css.border-image-repeat" idref="e.css.border-image-repeat">
	<autocomplete append=": " />
	<reference>The <i>border-image-repeat</i> property specifies whether the border image should be repeated, rounded, spaced or stretched. <b>Tip</b>: Also look at the <i>border-image</i> property (a shorthand property for setting all the border-image-* properties). 
	<b>Values:</b> stretch | repeat | round | space | initial | inherit
	<b>Initial:</b> stretch
	<b>Applies to:</b> all elements, except internal table elements when ‘border-collapse’ is ‘collapse’
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> two keywords, one per axis
	<b>Animatable:</b> no
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#border-image-repeat">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.border-image-repeat" idref="c.css.border-image-repeat">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="stretch"/>
			<element pattern="repeat"/>
			<element pattern="round"/>
			<element pattern="space"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-image-slice" highlight="css-property" id="e.css.border-image-slice" idref="e.css.border-image-slice">
	<autocomplete append=": " />
	<reference>The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle. The "middle" part is treated as fully transparent, unless the fill keyword is set. <b>Tip</b>: Also look at the <i>border-image</i> property (a shorthand property for setting all the border-image-* properties).
	This property can take one to four values. If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.
	<b>Values:</b> number | % | fill | initial | inherit
	<b>Initial:</b> 100%
	<b>Applies to:</b> all elements, except internal table elements when ‘border-collapse’ is ‘collapse’
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of the border image
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#border-image-slice">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.border-image-slice" idref="c.css.border-image-slice">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="[0-9]+\.?[0-9]+" is_regex="1">
				<reference>First number specifies the number for width in aspect ratio. Second number specifies the number for height in aspect ratio. Optional. If not set, number for height is 1 as default. Format <i>n</i>/<i>n</i></reference>
			</element>
			<element pattern="fill"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.length"/>
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-image-source" highlight="css-property" id="e.css.border-image-source" idref="e.css.border-image-source">
	<autocomplete append=": " />
	<reference>The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element). <b>Tip 1</b>: If the value is "none", or if the image cannot be displayed, the border styles will be used. <b>Tip 2</b>: Also look at the border-image property (a shorthand property for setting all the border-image-* properties).
	<b>Values:</b> none | <i>image-url</i> | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements, except internal table elements when ‘border-collapse’ is ‘collapse’
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> ‘none’ or the image with its URI made absolute
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-image-source">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;()" id="c.css.border-image-source" idref="c.css.border-image-source">
		<element idref="e.css.url" />
<!--	<element pattern="url" highlight="css-value">
		<autocomplete append="();" backup_cursor="2" />
		<context idref="c.css.uri"/>
	</element>-->
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-image-width" highlight="css-property" id="e.css.border-image-width" idref="e.css.border-image-width">
	<autocomplete append=": " />
	<reference>The border-image-width property specifies the width of the border image. <b>Tip</b>: Also look at the <i>border-image</i> property (a shorthand property for setting all the border-image-* properties).
	<b>Values:</b> <i>number</i> | % | auto | initial | inherit
	<b>Initial:</b> 1
	<b>Applies to:</b> all elements, except table elements when ‘border-collapse’ is ‘collapse’
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of the border image area
	<b>Media:</b> visual
	<b>Computed value:</b> four values, each either a number, the keyword auto, or a computed &lt;length-percentage&gt; value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-border-image-width">www.w3.org</a></reference>	
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.border-image-width" idref="c.css.border-image-width">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element id="e.css.number" idref="e.css.number" pattern="[0-9]+\.?[0-9]+" is_regex="1">
				<reference>Any number</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
			<element pattern="auto"/>
		</group>
		<element idref="e.css.length"/>
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-inline" highlight="css-property" id="e.css.border-inline" idref="e.css.border-inline">
	<autocomplete append=": " />
	<reference>The <i>border-inline</i> property is a shorthand property for these properties:
			border-inline-width
			border-inline-style (required)
			border-inline-color
		If values for color or width are omitted, default values will be used. The CSS <i>border-inline</i> property is very similar to CSS property <i>border</i>, but the <i>border-inline</i> property is dependent on the inline direction.
		<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the <i>border-inline</i> property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> <i>border-inline-width</i> <i>border-inline-style</i> <i>border-inline-color</i> | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-inline">www.w3.org</a></reference>
	<context idref="c.css.border"/>
</element>

<!-- 60 -->
<element pattern="border-inline-color" highlight="css-property" id="e.css.border-inline-color" idref="e.css.border-inline-color">
	<autocomplete append=": " />
	<reference>The border-inline-color property sets the color of an element's borders in the inline direction. <strong>Note</strong>: For the border-inline-color property to take effect, the border-inline-style must be set.
	Values for the border-inline-color property can be set in different ways:
	If the border-inline-color property has two values:
		border-inline-color: pink blue;
			border color at inline start is pink
			border color at inline end is blue
	If the border-inline-color property has one value:
		border-inline-color: blue;
			border color at inline start and end is blue
	The CSS <i>border-inline-color</i> property is very similar to CSS properties <i>border-bottom-color</i>, <i>border-left-color</i>, <i>border-right-color</i> and <i>border-top-color</i>, but the <i>border-inline-color</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-color property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> color | transparent | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-inline-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-inline-end-color" highlight="css-property" id="e.css.border-inline-end-color" idref="e.css.border-inline-end-color">
	<autocomplete append=": " />
	<reference>The <i>border-inline-end-color</i> property sets the color of an element's border at the end in the inline direction. <strong>Note</strong>: For the <i>border-inline-end-color</i> property to take effect, the <i>border-inline-end-style</i> property must be set.
	The CSS <i>border-inline-end-color</i> property is very similar to CSS properties <i>border-bottom-color</i>, <i>border-left-color</i>, <i>border-right-color</i> and <i>border-top-color</i>, but the <i>border-inline-end-color</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the <i>border-inline-end-color</i> property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> color | transparent | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-inline-end-style" highlight="css-property" id="e.css.border-inline-end-style" idref="e.css.border-inline-end-style">
	<autocomplete append=": " />
	<reference>The <i>border-inline-end-style</i> property sets the style of an element's border at the end in the inline direction. The CSS <i>border-inline-end-style</i> property is very similar to CSS properties <i>border-bottom-style</i>, <i>border-left-style</i>, <i>border-right-style</i> and <i>border-top-style</i>, but the <i>border-inline-end-style</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-end-style property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-inline-end-width" highlight="css-property" id="e.css.border-inline-end-width" idref="e.css.border-inline-end-width">
	<autocomplete append=": " />
	<reference>The <i>border-inline-end-width</i> property sets the width of an element's border at the end in the inline direction. <strong>Note</strong>: For the <i>border-inline-end-width</i> property to take effect, the <i>border-inline-end-style</i> property must be set.
	The CSS <i>border-inline-end-width</i> property is very similar to CSS properties <i>border-bottom-width</i>, <i>border-left-width</i>, <i>border-right-width</i> and <i>border-top-width</i>, but the <i>border-inline-end-width</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-end-width property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> &lt;length&gt; | thin | medium | thick |initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-style">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-inline-start-color" highlight="css-property" id="e.css.border-inline-start-color" idref="e.css.border-inline-start-color">
	<autocomplete append=": " />
	<reference>The <i>border-inline-start-color</i> property sets the color of an element's border at the end in the inline direction. <strong>Note</strong>: For the <i>border-inline-start-color</i> property to take effect, the <i>border-inline-start-style</i> property must be set.
	The CSS <i>border-inline-start-color</i> property is very similar to CSS properties <i>border-bottom-color</i>, <i>border-left-color</i>, <i>border-right-color</i> and <i>border-top-color</i>, but the <i>border-inline-start-color</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the <i>border-inline-start-color</i> property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> color | transparent | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-inline-start-style" highlight="css-property" id="e.css.border-inline-start-style" idref="e.css.border-inline-start-style">
	<autocomplete append=": " />
	<reference>The <i>border-inline-start-style</i> property sets the style of an element's border at the end in the inline direction. The CSS <i>border-inline-start-style</i> property is very similar to CSS properties <i>border-bottom-style</i>, <i>border-left-style</i>, <i>border-right-style</i> and <i>border-top-style</i>, but the <i>border-inline-start-style</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-start-style property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-inline-start-width" highlight="css-property" id="e.css.border-inline-start-width" idref="e.css.border-inline-start-width">
	<autocomplete append=": " />
	<reference>The <i>border-inline-start-width</i> property sets the width of an element's border at the end in the inline direction. <strong>Note</strong>: For the <i>border-inline-start-width</i> property to take effect, the <i>border-inline-start-style</i> property must be set.
	The CSS <i>border-inline-start-width</i> property is very similar to CSS properties <i>border-bottom-width</i>, <i>border-left-width</i>, <i>border-right-width</i> and <i>border-top-width</i>, but the <i>border-inline-start-width</i> property is dependent on inline direction.
	<strong>Note</strong>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-start-width property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> &lt;length&gt; | thin | medium | thick |initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-style">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-inline-style" highlight="css-property" id="e.css.border-inline-style" idref="e.css.border-inline-style">
	<autocomplete append=": " />
	<reference>The <i>border-inline-style</i> property sets the style of an element's borders in the inline direction.
		Values for the border-inline-style property can be set in different ways:
			If the border-inline-style property has two values:
				border-inline-style: solid dotted;
					border style at inline start is solid
					border style at inline end is dotted
			If the border-inline-style property has one value:
					border-inline-style: dotted;
					border style at inline start and end is dotted
		The CSS <i>border-inline-style</i> property is very similar to CSS properties <i>border-bottom-style</i>, <i>border-left-style</i>, <i>border-right-style</i> and <i>border-top-style</i>, but the border-inline-style property is dependent on inline direction.
	<b>Note</b>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-style property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-inline-width" highlight="css-property" id="e.css.border-inline-width" idref="e.css.border-inline-width">
	<autocomplete append=": " />
	<reference>The <i>border-inline-width</i> property sets the width of an element's borders in the inline direction. <b>Note</b>: For the <i>border-inline-width</i> property to take effect, the <i>border-inline-style</i> must be set.
	Values for the border-inline-width property can be set in different ways:
		If the border-inline-width property has two values:
			border-inline-width: 10px 50px;
			border width at inline start is 10px
			border width at inline end is 50px
		If the border-inline-width property has one value:
			border-inline-width: 10px;
			border width at inline start and end is 10px
	The CSS <i>border-inline-width</i> property is very similar to CSS properties <i>border-bottom-width</i>, <i>border-left-width</i>, <i>border-right-width</i> and <i>border-top-width</i>, but the border-inline-width property is dependent on inline direction.
	<b>Note</b>: The related CSS properties writing-mode, text-orientation and direction define inline direction. This affects where the start and end of a line is and the result of the border-inline-width property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> &lt;length&gt; | thin | medium | thick |initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-inline-width">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-left" highlight="css-property" id="e.css.border-left" idref="e.css.border-left">
	<autocomplete append=": " />
	<reference>The <i>border-left property</i> is a shorthand property for (in the following order):
		border-left-width
		border-left-style (required)
		border-left-color
	If border-left-color is omitted, the color applied will be the color of the text.
	<b>Values:</b> [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;color&gt; ] | inherit | initial;
	<b>Initial:</b> medium none <i>color</i>
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-shorthands">www.w3.org</a></reference>
	<context idref="c.css.border"/>
</element>

<element pattern="border-left-color" highlight="css-property" id="e.css.border-left-color" idref="e.css.border-left-color">
	<autocomplete append=": " />
	<reference>The border-left-color property sets the color of an element's left border. <b>Note</b>: Always declare the border-style or the border-left-style property before the border-left-color property. An element must have a border before you can change the color.
	<b>Values:</b> &lt;<i>color</i>&gt;
	<b>Initial:</b> currentColor
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the computed color
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-left-style" highlight="css-property" id="e.css.border-left-style" idref="e.css.border-left-style">
	<autocomplete append=": " />
	<reference>Sets the style of the left border, unless there is a border image.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-left-width" highlight="css-property" id="e.css.border-left-width" idref="e.css.border-left-width">
	<autocomplete append=": " />
	<reference>Sets the thickness of the left border.
	<b>Values:</b> &lt;<i>length</i>&gt; | thin | medium | thick | initial | inherit
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; ‘0’ if the border style is ‘none’ or ‘hidden’
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-style">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-radius" highlight="css-property" id="e.css.border-radius" idref="e.css.border-radius">
	<autocomplete append=": " />
	<reference>The border-radius property defines the radius of the element's 
	corners. This property allows you to add rounded corners to elements! 
	This property can have from one to four values. Here are the rules:
	<b>Four values</b> - border-radius: 15px 50px 30px 5px; 
	(first value applies to top-left corner, second value applies to 
	top-right corner, third value applies to bottom-right corner, and 
	fourth value applies to bottom-left corner).
	<b>Three values</b> - border-radius: 15px 50px 30px; 
	(first value applies to top-left corner, second value applies to 
	top-right and bottom-left corners, and third value applies to 
	bottom-right corner).
	<b>Two values</b> - border-radius: 15px 50px; 
	(first value applies to top-left and bottom-right corners, and 
	the second value applies to top-right and bottom-left corners).
	One value - border-radius: 15px; 
	(the value applies to all four corners, which are rounded equally).
	<b>Values:</b> [ {1-4x} &lt;<i>length</i>&gt; / {1-4x} &lt;<i>percentage</i>&gt; ] | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-right" highlight="css-property" id="e.css.border-right" idref="e.css.border-right">
	<autocomplete append=": " />
	<reference>The <i>border-right</i> property is a shorthand property for (in the following order):
			border-right-width
			border-right-style (required)
			border-right-color
		If border-right-color is omitted, the color applied will be the color of the text.
	<b>Values:</b> <i>border-width</i> <i>border-style</i> <i>border-color</i> | initial | inherit
	<b>Initial:</b> medium none <i>color</i>
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">www.w3.org</a></reference>
	<context idref="c.css.border"/>
</element>

<element pattern="border-right-color" highlight="css-property" id="e.css.border-right-color" idref="e.css.border-right-color">
	<autocomplete append=": " />
	<reference>The <i>border-right-color</i> property sets the color of an element's right border. <b>Note</b>: Always declare the <i>border-style</i> or the <i>border-right-style</i> property <i>before</i> the <i>border-right-color</i> property. An element must have a border before you can change the color.
	<b>Values:</b> <i>color</i> | transparent | initial | inherit
	<b>Initial:</b> currentColor
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the computed color
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-right-style" highlight="css-property" id="e.css.border-right-style" idref="e.css.border-right-style">
	<autocomplete append=": " />
	<reference>Sets the style of the right border, unless there is a border image.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-right-width" highlight="css-property" id="e.css.border-right-width" idref="e.css.border-right-width">
	<autocomplete append=": " />
	<reference>The border-right-width property sets the width of an element's right border. <b>Note</b>: Always declare the <i>border-style</i> or the <i>border-right-style</i> property before the <i>border-right-width</i> property. An element must have borders before you can change the width.
	<b>Values:</b> <i>length</i> | thin | medium | thick | initial | inherit
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; ‘0’ if the border style is ‘none’ or ‘hidden’
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-spacing" highlight="css-property" id="e.css.border-spacing" idref="e.css.border-spacing">
	<autocomplete append=": " />
	<reference>The border-spacing property sets the distance between the borders of adjacent cells. <b>Note</b>: This property works only when border-collapse is set to <i>separate</i>.
	
	<b>Values:</b> <i>length</i> [ <i>length</i> ] | initial | inherit
		If two length values are set, the first applies to horizontal spacing, while the second applies to vertical spacing.
	<b>Initial:</b> 0
	<b>Applies to:</b> ‘table’ and ‘inline-table’ elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute lengths
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-tables-3-20190727/#propdef-border-spacing">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.border-spacing" idref="c.css.border-spacing">
	<group highlight="css-value" >
		<autocomplete append=" " />
		<element idref="e.css.length"/>
	</group>
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="border-start-end-radius" highlight="css-property" id="e.css.border-start-end-radius" idref="e.css.border-start-end-radius">
	<autocomplete append=": " />
	<reference>The border-start-end-radius property defines the radius of the corner at the start in the block direction and end in the inline direction.
	Values for the border-start-end-radius property can be set in different ways:
		If the border-start-end-radius property has two values:
			border-start-end-radius: 10px 50px;
				radius at block start is 10px
				radius at inline end is 50px
		If the border-start-end-radius property has one value:
			border-start-end-radius: 10px;
				radius at corner of block start and inline end is 10px
	The CSS <i>border-start-end-radius</i> property is very similar to CSS properties <i>border-bottom-left-radius</i>, <i>border-bottom-right-radius</i>, <i>border-top-left-radius</i> and <i>border-top-right-radius</i>, but the <i>border-start-end-radius</i> property is dependent on block and inline directions.
	<b>Note</b>: The related CSS properties writing-mode, text-orientation and direction define block and inline directions. That is why these properties also affects the result of the <i>border-start-end-radius</i> property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> 0 | length | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-start-end-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-start-start-radius" highlight="css-property" id="e.css.border-start-start-radius" idref="e.css.border-start-start-radius">
	<autocomplete append=": " />
	<reference>The border-start-start-radius property defines the radius of the corner at the end in the block and inline directions.
	Values for the border-start-start-radius property can be set in different ways:
		If the border-start-start-radius property has two values:
			border-start-end-radius: 10px 50px;
				radius at block end is 10px
				radius at inline end is 50px
		If the border-start-start-radius property has one value:
			border-start-end-radius: 10px;
				radius at block and inline end corner is 10px
	The CSS <i>border-start-start-radius</i> property is very similar to CSS properties <i>border-bottom-left-radius</i>, <i>border-bottom-right-radius</i>, <i>border-top-left-radius</i> and <i>border-top-right-radius</i>, but the <i>border-start-start-radius</i> property is dependent on block and inline directions.
	<b>Note</b>: The related CSS properties writing-mode, text-orientation and direction define block and inline directions. That is why these properties also affects the result of the <i>border-start-start-radius</i> property. For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-border-start-start-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-style" highlight="css-property" id="e.css.border-style" idref="e.css.border-style">
	<autocomplete append=": " />
	<reference>The <i>border-style</i> property sets the style of an element's four borders. This property can have from one to four values.
	One value: all four borders are the same
	Two values: top and bottom take the first, left and right the second value
	Three values: first is for top border, second for left and right, third for bottom border
	Four values: the values affect the borders from top to left (clockwise) 
	<b>Values:</b> &lt;<i>border-style</i>&gt; [ &lt;<i>border-style</i>&gt; &lt;<i>border-style</i>&gt; &lt;<i>border-style</i>&gt; ]
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-top" highlight="css-property" id="e.css.border-top" idref="e.css.border-top">
	<autocomplete append=": " />
	<reference>The border-top shorthand property sets all the top border properties in one declaration.
	The properties that can be set must be in the following order:
		border-top-width
		border-top-style (required)
		border-top-color
	If border-top-color is omitted, the color applied will be the color of the text.
	<b>Values:</b> &lt;<i>border-width</i>&gt; || &lt;<i>border-style</i>&gt; || &lt;<i>color</i>&gt; | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-background/#the-border-shorthands">www.w3.org</a></reference>
	<context idref="c.css.border"/>
</element>

<element pattern="border-top-color" highlight="css-property" id="e.css.border-top-color" idref="e.css.border-top-color">
	<autocomplete append=": " />
	<reference>Sets the foreground color of the top border specified by the border-style properties.
	<b>Values:</b> color | transparent | initial | inherit;
	<b>Initial:</b> currentColor
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the computed color
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="border-top-left-radius" highlight="css-property" id="e.css.border-top-left-radius" idref="e.css.border-top-left-radius">
	<autocomplete append=": " />
	<reference>Defines the radii of a quarter ellipse that defines the shape of the corner of the left outer border edge. The first number defines the horizontal part of the corner, the second the vertical part.
	<b>Values:</b> length | % [ length | % ] | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-border-top-left-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<!-- Up to here checked, updated and new properties added -->

<element pattern="border-top-right-radius" highlight="css-property" id="e.css.border-top-right-radius" idref="e.css.border-top-right-radius">
	<autocomplete append=": " />
	<reference>Defines the radii of a quarter ellipse that defines the shape of the top right corner of the outer border edge. The first number defines the horizontal part of the corner, the second the vertical part.
	<b>Values:</b> length | % [ length | % ] | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements (but see prose)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the border box
	<b>Media:</b> visual
	<b>Computed value:</b> two absolute &lt;length&gt; or percentages
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-border-top-right-radius">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="border-top-style" highlight="css-property" id="e.css.border-top-style" idref="e.css.border-top-style">
	<autocomplete append=": " />
	<reference>Sets the style of the top border, unless there is a border image.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style">www.w3.org</a></reference>
	<context idref="c.css.border_style"/>
</element>

<element pattern="border-top-width" highlight="css-property" id="e.css.border-top-width" idref="e.css.border-top-width">
	<autocomplete append=": " />
	<reference>Sets the thickness of the top border.
	<b>Values:</b> &lt;length&gt; | thin | medium | thick
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length; ‘0’ if the border style is ‘none’ or ‘hidden’
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-border-top-width">www.w3.org</a></reference>
	<context idref="c.css.border_width"/>
</element>

<element pattern="border-width" highlight="css-property" id="e.css.border-width" idref="e.css.border-width">
	<autocomplete append=": " />
<reference>Sets the thickness of the border. Takes up to four values. Examples:
	border-width: thin medium thick 10px;
		top border is thin
		right border is medium
		bottom border is thick
		left border is 10px
	border-width: thin medium thick;
		top border is thin
		right and left borders are medium
		bottom border is thick
	border-width: thin medium;
		top and bottom borders are thin
		right and left borders are medium
	border-width: thin;
		all four borders are thin
	<b>Note</b>: Always declare the <i>border-style</i> property before the <i>border-width</i> property. An element must have borders before you can set the width.
<b>Values:</b> medium | thin | thick | length | initial | inherit
<b>Initial:</b> see individual properties
<b>Applies to:</b> all elements
<b>Inherited:</b> no
<b>Percentages:</b> see individual properties
<b>Media:</b> visual
<b>Computed value:</b> see individual properties
<b>Animatable:</b> see individual properties
<b>Specification:</b> <a
href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#border-width">www.w3.org</a></reference>
<context idref="c.css.border_width"/>
</element>

<element pattern="bottom" highlight="css-property" id="e.css.bottom" idref="e.css.bottom">
	<autocomplete append=": " />
	<reference>The bottom property affects the vertical position of a positioned element. 
	This property has no effect on non-positioned elements.
	If position: <i>absolute</i>; or position: <i>fixed</i>; - the bottom property 
	sets the bottom edge of an element to a unit above/below the bottom edge of 
	its nearest positioned ancestor.
	If <i>position: relative</i>; - the bottom property makes the element's bottom 
		edge to move above/below its normal position.
	If <i>position: sticky</i>; - the bottom property behaves like its position is 
		relative when the element is inside the viewport, and like its position is 
		fixed when it is outside.
	If <i>position: static</i>; - the bottom property has no effect.
	<b>Values:</b> &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | auto | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto.
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#propdef-bottom">www.w3.org</a></reference>
	<context id="c.css.bottom" idref="c.css.bottom" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element id="e.css.length.neg" pattern="-?[0-9]+\.?[0-9]*(cap|ch|cm|em|ex|ic|in|lh|mm|pc|pt|px|rcap|rch|rem|rex|ric|rlh|vb|vh|vi|vmax|vmin|vw|%)" is_regex="1" highlight="css-value"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="box-decoration-break" highlight="css-property" id="e.css.box-decoration-break" idref="e.css.box-decoration-break">
	<autocomplete append=": " />
	<reference>The <i>box-decoration-break</i> property specifies how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented.
		<b>Note:</b> This property must be preceded by the keyword <i>-webkit-</i> in browsers Chrome 22, Safari 6.1 and Opera 11.5
	<b>Values:</b> slice | clone | initial | inherit | unset
	<b>Initial:</b> slice
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-break-3-20181204/#propdef-box-decoration-break">www.w3.org</a></reference>
	<context id="c.css.box-decoration-break" idref="c.css.box-decoration-break" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value">
			<autocomplete append=";" />
			<element pattern="slice">
				<reference>Default. Box decorations are applied to the element as a whole and break at the edges of the element fragments</reference>
			</element>
			<element pattern="clone">
				<reference>Box decorations apply to each fragment of the element as if the fragments were individual elements. Borders wrap the four edges of each fragment of the element, and backgrounds are redrawn in full for each fragment</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-box-reflect" highlight="css-property" id="e.css.box-reflect" idref="e.css.box-reflect">
	<autocomplete append=": " />
	<reference>The box-reflect property is used to create a reflection of an element.
	The value of the <i>box-reflect</i> property can be: below, above, left, or right.
	<b>Note</b>: The box-reflect property is <i>non-standard</i> and must be written with <i>-webkit-</i> prefix. It does not (yet) work on Firefox.
	<b>Values:</b> none | below | above | left | right | <i>position offset gradient</i> | initial | inherit
		For <i>position offset gradient</i> there is a two (<i>position</i> and <i>offset</i>) and three value (<i>position</i>, <i>offset</i> and <i>gradient</i>) syntax:
		- position sets reflection below, above, left, or right of the element.
		- offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0.
		- gradient sets a transition for the reflection, i.e. a fading effect. Two color values are needed.
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> no
	<b>Animation type:</b> discrete
	<b>Decription:</b> <a
	href="https://www.w3schools.com/cssref/css_pr_box-reflect.php">www.w3schools.com</a>
	<b>Reference:</b> none so far
	</reference>
	<context id="c.css.box_reflect" idref="c.css.box_reflect" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value">
			<autocomplete append=";" />
			<element pattern="none">
				<reference>Default value. No reflection is displayed.</reference>
			</element>
			<element pattern="below">
				<reference>Creates a reflection below the element.</reference>
			</element>
			<element pattern="above">
				<reference>Creates a reflection above the element.</reference>
			</element>
			<element pattern="left">
				<reference>Creates a reflection to the left of the element.</reference>
			</element>
			<element pattern="right">
				<reference>Creates a reflection to the right of the element.</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<group highlight="css-value">
			<autocomplete enable="1" />
			<element idref="e.css.length" />
			<element idref="e.css.percent" />
			<element idref="e.css.colors" />
			<element idref="e.css.hex-color" />
			<element idref="e.css.rgba-color" />
			<element idref="e.css.rgb-color" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="box-shadow" highlight="css-property" id="e.css.box-shadow" idref="e.css.box-shadow">
	<autocomplete append=": " />
	<reference>The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property takes a comma-separated list of shadows, ordered front to back. Each shadow is given as a &lt;shadow&gt;, represented by 2-4 length values, an optional color, and an optional ‘inset’ keyword. Omitted lengths are 0; omitted colors default to the value of the ‘color’ property.
	<b>Values:</b> none | <i>h-offset v-offset blur spread color</i> | inset | initial |inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> any &lt;length&gt; made absolute; any specified color computed; otherwise as specified
	<b>Animatable:</b> as shadow list
	<b>Animation type:</b> by computed value, treating none as a zero-item list and appending blank shadows (transparent 0 0 0 0) with a corresponding inset keyword as needed to match the longer list if the shorter list is otherwise compatible with the longer one 
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-backgrounds-3-20210726/#propdef-box-shadow">www.w3.org</a></reference>
	<context id="c.css.box_offsets" idref="c.css.box_offsets" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element pattern="inset">
				<reference>Optional. Changes the shadow from an outer shadow (outset) to an inner shadow</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.length.neg" />
		<element idref="e.css.end"/>
		<element idref="e.css.colors" />
		<element idref="e.css.hex-color" />
		<element idref="e.css.rgba-color" />
		<element idref="e.css.rgb-color" />
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="box-sizing" highlight="css-property" id="e.css.box_sizing" idref="e.css.box_sizing">
	<autocomplete append=": " />
	<reference>The <i>box-sizing</i> property defines how the width and height of an element are calculated: should they include padding and borders, or not. Example: If you have a 200px DIV with 10px padding and a 30px border and set box-sizing as &quot;border-box&quot;, the total width of the DIV element is always 200px, but if box-sizing is set to &quot;content-box&quot;, the total width is 200px plus padding and border = 280px.
	<b>Values:</b> content-box | border-box | initial | inherit
	<b>Initial:</b> content-box
	<b>Applies to:</b> all elements that accept width or height
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete 
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-ui-3-20180621/#propdef-box-sizing">www.w3.org</a>
	</reference>
	<context id="c.css.box_sizing" idref="c.css.box_sizing" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="content-box">
				<reference>Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included</reference>
			</element>
			<element pattern="border-box">
				<reference>The width and height properties (and min/max properties) includes content, padding and border</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="break-after" highlight="css-property" id="e.css.break_after" idref="e.css.break_after">
	<autocomplete append=": " />
	<reference>The <i>break-after</i> property specifies whether or not a page break, column break, or region break should occur after the specified element. The <i>break-after</i> property extends the CSS2 page-break-after property. Using <i>break-after</i>, you can tell the browser to break the page, column, or region after the element the break-after property is applied to, or avoid the element to be split and span across two pages.
	<b>Values:</b> auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page | recto | region | right | verso | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level boxes, grid items, flex items, table row groups, table rows
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete 
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-break-3-20181204/#propdef-break-after">www.w3.org</a>
	</reference>
	<context id="c.css.break_after" idref="c.css.break_after" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default. Automatic page/column/region break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="all">
				<reference>Always insert a page-break right after (for <i>break-before</i> property: before) the principal box</reference>
			</element>
			<element pattern="always">
				<reference>Always insert a page-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="avoid">
				<reference>Avoid a page/column/region break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="avoid-column">
				<reference>Avoid a column-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="avoid-page">
				<reference>Avoid a page-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="avoid-region">
				<reference>Avoid a region-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="common">
				<reference>Always insert a column-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="left">
				<reference>Insert one or two page-breaks after (for <i>break-before</i> property: before) the element so that the next page is formatted as a left page</reference>
			</element>
			<element pattern="page">
				<reference>Always insert a page-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="recto">
				<reference>Insert one or two page-breaks after (for <i>break-before</i> property: before) the principal box so that the next page is formatted as a recto page</reference>
			</element>
			<element pattern="region">
				<reference>Always insert a region-break after (for <i>break-before</i> property: before) the element</reference>
			</element>
			<element pattern="right">
				<reference>Insert one or two page-breaks after (for <i>break-before</i> property: before) the element so that the next page is formatted as a right page</reference>
			</element>
			<element pattern="verso">
				<reference>Insert one or two page-breaks after (for <i>break-before</i> property: before) the principal box so that the next page is formatted as a verso page</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="break-before" highlight="css-property" id="e.css.break-before" idref="e.css.break-before">
	<autocomplete append=": " />
	<reference>The <i>break-before</i> property specifies whether or not a page break, column break, or region break should occur before the specified element. The <i>break-before</i> property extends the CSS2 page-break-before property. Using <i>break-before</i>, you can tell the browser to break the page, column, or region before the element the break-before property is applied to, or avoid the element to be split and span across two pages.
		<b>Values:</b> auto | all | always | avoid | avoid-column | avoid-page | avoid-region | column | left | page | recto | region | right | verso | initial | inherit
		<b>Initial:</b> auto
		<b>Applies to:</b> block-level boxes, grid items, flex items, table row groups, table rows
		<b>Inherited:</b> no
		<b>Percentages:</b> N/A
		<b>Media:</b> visual
		<b>Computed value:</b> specified value
		<b>Animatable:</b> yes
		<b>Animation type:</b> discrete 
		<b>Specification:</b> <a
		href="https://www.w3.org/TR/2018/CR-css-break-3-20181204/#propdef-break-before">www.w3.org</a>
	</reference>
	<context idref="c.css.break_after" />
</element>

<element pattern="break-inside" highlight="css-property" id="e.css.break-inside" idref="e.css.break-inside">
	<autocomplete append=": " />
	<reference>The <i>break-inside</i> property specifies whether or not a page break, column break, or region break should occur inside the specified element. The <i>break-inside</i> property extends the CSS2 page-break-inside property. Using <i>break-inside</i>, you can tell the browser to avoid breaks inside images, code snippets, tables, and lists.
		<b>Values:</b> auto | avoid | avoid-column | avoid-page | avoid-region | initial | inherit
		<b>Initial:</b> content-box
		<b>Applies to:</b> all elements except inline-level boxes, internal ruby boxes, table column boxes, table column group boxes, absolutely-positioned boxes 
		<b>Inherited:</b> no
		<b>Percentages:</b> N/A
		<b>Media:</b> visual
		<b>Computed value:</b> specified value
		<b>Animatable:</b> yes
		<b>Animation type:</b> discrete 
		<b>Specification:</b> <a
		href="https://www.w3.org/TR/2018/CR-css-break-3-20181204/#propdef-break-inside">www.w3.org</a>
	</reference>
	<context id="c.css.break_inside" idref="c.css.break_inside" symbols=" &#9;&#10;&#13;-{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default. Automatic page/column/region break inside the element</reference>
			</element>
			<element pattern="avoid">
				<reference>Avoid a page/column/region break inside the element</reference>
			</element>
			<element pattern="avoid-column">
				<reference>Avoid a column-break inside the element</reference>
			</element>
			<element pattern="avoid-page">
				<reference>Avoid a page-break inside the element</reference>
			</element>
			<element pattern="avoid-region">
				<reference>Avoid a region-break inside the element</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="caption-side" highlight="css-property" id="e.css.caption-side" idref="e.css.caption-side">
	<autocomplete append=": " />
	<reference>Specifies the position of the caption box with respect to the table box.
	<b>Values:</b> top | bottom | inherit | initial
	<b>Initial:</b> top
	<b>Applies to:</b> 'table-caption' elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#propdef-caption-side">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.caption-side" idref="c.css.caption-side">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="top"/>
			<element pattern="bottom"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="caret-color" highlight="css-property" id="e.css.caret-color" idref="e.css.caret-color">
	<autocomplete append=": " />
	<reference>The <i>caret-color</i> property specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.
	<b>Values:</b> auto | <i>color</i> | transparent | initial | inherit;
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> interactive
	<b>Computed value:</b> the computed color
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-ui-3-20180621/#propdef-caret-color">www.w3.org</a></reference>
	<context idref="c.css.accent-color"/>
</element>

<!-- where to put the @charset rule? How to handle rules anyway? -->

<element pattern="clear" highlight="css-property" id="e.css.clear" idref="e.css.clear">
	<autocomplete append=": " />
	<reference>The <i>clear</i> property controls the flow next to floated elements. The <i>clear</i> property specifies what should happen with the element that is next to a floating element. <b>Tip:</b> Also look at the <i>float</i> property.
	<b>Values:</b> inline-start | inline-end | block-start | block-end | none | left | right | top | bottom | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> block-level elements, floats, regions, pages
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/WD-css-page-floats-3-20150915/#propdef-clear">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.clear" idref="c.css.clear">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="inline-end">
				<reference>If applied to a block-level element or a float with a float-reference set to inline, requires that the block-start outer edge of the box comes after the block-end outer edge of any inline-end-floats with an inline-end-float-reference that resulted from elements earlier in the source document. 
			If applied to a page float, the float reference in which the page float is placed will be seen as full when determining whether it can host subsequent page floats that float in the inline-end direction.</reference>
			</element>
			<element pattern="inline-start">
				<reference>If applied to an inline float, requires that the block-start outer edge of the box comes after the <i>block-end</i> outer edge of any inline-start-floats with an inline-start-float-reference that resulted from elements earlier in the source document.		
			If applied to a page float, the float reference in which the page float is placed will be seen as full when determining whether it can host subsequent page floats that float in the inline-start direction.</reference>
			</element>
			<element pattern="block-end">
				<reference>If applied to a block-level element or a float with a float-reference set to inline, behave like inline-end.
			If applied to a page float, the float reference in which the page float is placed will be seen as full when determining whether it can host subsequent page floats that float in the block-end direction.</reference>
			</element>
			<element pattern="block-start">
				<reference>If applied to a block-level element or a float with a float-reference set to inline, behave like inline-start.
			If applied to a page float, the float reference in which the page float is placed will be seen as full when determining whether it can host subsequent page floats that float in the block-start direction.</reference>
			</element>
			<element pattern="bottom">
				<reference>Behave like <i>block-end</i> or <i>inline-end</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i>. </reference>
			</element>
			<element pattern="left">
				<reference>Behave like <i>block-end</i>, <i>inline-start</i> or <i>inline-end</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i>. </reference>
			</element>
			<element pattern="right">
				<reference>Behave like <i>block-start</i>, <i>inline-start</i> or <i>inline-end</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode.</i> </reference>
			</element>
			<element pattern="top">
				<reference>Behave like <i>block-start</i> or <i>inline-start</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i>.</reference>
			</element>
			<element pattern="none">
				<reference>Default. The element is not pushed below left or right floated elements</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="clip" highlight="css-property" id="e.css.clip" idref="e.css.clip">
	<autocomplete append=": " />
	<reference> The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped.
		<b>Note:</b> The clip property does not work if "overflow:visible".
		<b>Note: The clip property is deprecated and will be replaced by the clip-path property in the future.</b>
	<b>Values:</b> rect() | auto | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements.
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> 'auto' if specified as 'auto', otherwise a rectangle with four values, each of which is 'auto' if specified as 'auto' and the computed length otherwise
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-clip">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{},().;:'&quot;" id="c.css.clip" idref="c.css.clip">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
			<element pattern="auto"/>
		</group>
		<element pattern="rect" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context symbols="()" highlight="css-value">
			<element pattern="(">
				<context symbols=", )" highlight="css-value">
				<element pattern="0" highlight="css-value"/>
				<element pattern=","/>
				<element idref="e.css.length"/>
				<element pattern=")" ends_context="2" highlight="css-value"/>
				</context>
			</element>
			</context>
		</element>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="clip-path" highlight="css-property" id="e.css.clip_path" idref="e.css.clip_path">
	<autocomplete append=": " />
	<reference>  The <i>clip-path</i> property lets you clip an element to a basic shape or to an SVG source.
	<b>Note:</b> The <i>clip-path</i> property will replace the deprecated clip property.
	<b>Values:</b> <i>clip-source</i> | circle | elipse | polygon | inset | margin-box | 
		border-box | padding-box | content-box | fill-box | stroke-box | view-box | none | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding 
		the defs element, all graphics elements and the use element
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, but with &lt;url&gt; values made absolute
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-clip-path">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{},().;:'&quot;" id="c.css.clip_path" idref="c.css.clip_path">
		<element idref="e.css.url" />
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element pattern="circle" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context symbols="()" highlight="css-value" id="c.css.parentheses_length" idref="c.css.parentheses_length">
			<element pattern="(">
				<context symbols=", )" highlight="css-value">
				<element pattern="0" highlight="css-value"/>
				<element pattern=","/>
				<element idref="e.css.length"/>
				<element pattern=")" ends_context="2" highlight="css-value"/>
				</context>
			</element>
			</context>
		</element>
		<element pattern="elipse" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="polygon" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="inset" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="margin-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="border-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="padding-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="content-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="fill-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="stroke-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element pattern="view-box" highlight="css-value">
			<autocomplete append="();" backup_cursor="2" />
			<context idref="c.css.parentheses_length" />
		</element>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="color" highlight="css-property" id="e.css.color" idref="e.css.color">
	<autocomplete append=": " />
<reference>Describes the foreground color of an element's text content.
<b>Values:</b> <i>color</i> | initial | inherit
<b>Initial:</b> depends on user agent
<b>Applies to:</b> all elements
<b>Inherited:</b> yes
<b>Percentages:</b> N/A
<b>Media:</b> visual
<b>Computed value:</b> as specified
<b>Animatable:</b> yes
<b>Specification:</b> <a
href="https://www.w3.org/TR/2022/REC-css-color-3-20220118/#color1">www.w3.org</a></reference>
<context idref="c.css.background-color"/>
</element>

<element pattern="column-count" highlight="css-property" id="e.css.column-count" idref="e.css.column-count">
	<autocomplete append=": " />
	<reference>The column-count property specifies the number of columns an element should be divided into.
	<b>Values:</b> <i>number</i> | auto | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> block containers except table wrapper boxes
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-count">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.column-count" idref="c.css.column-count">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="auto">
				<reference>Default value. The number of columns will be determined by other properties, like e.g. &quot;column-width&quot;</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
			<element idref="e.css.number" />
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="column-fill" highlight="css-property" id="e.css.column-fill" idref="e.css.column-fill">
	<autocomplete append=": " />
	<reference>The column-fill property specifies how to fill columns, balanced or not. <b>Tip:</b> If you add a height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.
	<b>Values:</b> balance | balance-all | auto | initial | inherit
	<b>Initial:</b> balance
	<b>Applies to:</b> multicol containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-fill">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.column-fill" idref="c.css.column-fill">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="balance">
				<reference>Default value. Balance content equally between columns, as far as possible. In fragmented contexts, only the last fragment is balanced.</reference>
			</element>
			<element pattern="balance-all">
				<reference>Balance content equally between columns, as far as possible. In fragmented contexts, all fragments are balanced.</reference>
			</element>
			<element pattern="auto">
				<reference>Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly)</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="column-gap" highlight="css-property" id="e.css.column-gap" idref="e.css.column-gap">
	<autocomplete append=": " />
	<reference>The <i>column-gap</i> property specifies the gap between the columns in grid, flexbox or multi-column layout. <b>Note:</b> If there is a column-rule between columns, it will appear in the middle of the gap.
	<b>Values:</b> normal | <i>length</i> | initial | inherit
	<b>Initial:</b> normal
	<b>Applies to:</b> multi-column-containers, flex containers, grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/css-align-3/#propdef-column-gap">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.column-gap" idref="c.css.column-gap">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="normal">
				<reference>The normal represents a used value of 1em on multi-column containers, and a used value of 0px in all other contexts.</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="column-rule" highlight="css-property" id="e.css.column-rule" idref="e.css.column-rule">
	<autocomplete append=": " />
	<reference>The column-rule property sets the width, style, and color of the rule between columns.
	This property is a shorthand property for:
		column-rule-width
		column-rule-style (required)
		column-rule-color
	If column-rule-color is omitted, the color applied will be the color of the text.
	<b>Values:</b> <i>column-rule-width</i> <i>column-rule-style</i> <i>column-rule-color</i> | initial | inherit
	<b>Initial:</b> medium none <i>color</i>
	<b>Applies to:</b> multi-column-containers, flex containers, grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-rule">www.w3.org</a>
	</reference>
	<context idref="c.css.border" />
</element>

<element pattern="column-rule-color" highlight="css-property" id="e.css.column-rule-color" idref="e.css.column-rule-color">
	<autocomplete append=": " />
	<reference>The column-rule-color property specifies the color of the rule between columns.
	<b>Values:</b> <i>color</i> | initial | inherit
	<b>Initial:</b> current <i>color</i>
	<b>Applies to:</b> multi-column-containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> computed value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-rule-color">www.w3.org</a>
	</reference>
	<context idref="c.css.background-color" />
</element>

<element pattern="column-rule-style" highlight="css-property" id="e.css.column-rule-style" idref="e.css.column-rule-style">
	<autocomplete append=": " />
	<reference>The <i>column-rule-style property</i> specifies the style of the rule between columns.
	<b>Values:</b> none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit
	<b>Initial:</b> current <i>color</i>
	<b>Applies to:</b> multi-column-containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> computed value
	<b>Animatable:</b> yes
	<b>Animation style:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-rule-style">www.w3.org</a>
	</reference>
	<context idref="c.css.border_style" />
</element>

<element pattern="column-rule-width" highlight="css-property" id="e.css.column-rule-width" idref="e.css.column-rule-width">
	<autocomplete append=": " />
	<reference>The <i>column-rule-width</i> property specifies the width of the rule between columns.
	<b>Values:</b> medium | thin | thick | <i>length</i> | initial | inherit
	<b>Initial:</b> current <i>color</i>
	<b>Applies to:</b> multi-column-containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> computed value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-rule-width">www.w3.org</a>
	</reference>
	<context idref="c.css.border_width" />
</element>

<element pattern="column-span" highlight="css-property" id="e.css.column-span" idref="e.css.column-span">
	<autocomplete append=": " />
	<reference>The <i>column-span</i> property specifies how many columns an element should span across.
	<b>Values:</b> none | all | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> in-flow block-level elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword 
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-span">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;-{}.;()'&#34;" id="c.css.column-span" idref="c.css.column-span">
	<group highlight="css-value" >
		<autocomplete append=";" />
	<element pattern="none">
		<reference>Default value. The element should span across one column</reference>
	</element>
	<element pattern="all">
		<reference>The element should span across all columns</reference>
	</element>
	<element idref="e.css.initial" />
	<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="column-width" highlight="css-property" id="e.css.column-width" idref="e.css.column-width">
	<autocomplete append=": " />
	<reference>The <i>column-width</i> property specifies the column width. The number of columns will be the minimum number of columns needed to show all the content across the element. <i>column-width</i> is a flexible property. Think of <i>column-width</i> as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width, then the columns will stop and drop into a single column.
	<b>Values:</b> auto | <i>length</i> | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> block containers except table wrapper boxes
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword &lt;auto&gt; or an absolute length 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-column-width">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;-{}.;()'&#34;" id="c.css.column-width" idref="c.css.column-width">
	<group highlight="css-value" >
		<autocomplete append=";" />
	<element pattern="auto">
		<reference>Default value. The width will be determined by the browser</reference>
	</element>
	<element idref="e.css.length" />
	<element idref="e.css.initial" />
	<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="columns" highlight="css-property" id="e.css.columns" idref="e.css.columns">
	<autocomplete append=": " />
	<reference>The <i>columns</i> property is a shorthand property for:
		column-width
		column-count
	The <i>column-width</i> part will define the minimum width for each column, while the <i>column-count</i> part will define the maximum number of columns. By using this property, the multi-column layout will automatically break down into a single column at narrow browser widths, without the need of media queries or other rules.
	<b>Values:</b> auto | <i>column-width column-count</i> | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> block containers except table wrapper boxes
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> see individual properties
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2021/CR-css-multicol-1-20211012/#propdef-columns">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;-{}.;()'&#34;" id="c.css.columns" idref="c.css.columns">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>Default value. Sets both the <i>column-width</i> and <i>column-count</i> to &quot;auto&quot;</reference>
		</element>
		<element idref="e.css.length" />
		<element idref="e.css.number" />
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="content" highlight="css-property" id="e.css.content" idref="e.css.content">
	<autocomplete append=": " />
	<reference>This property is used with the ::before and ::after pseudo-elements to generate content in a document.
	<b>Values:</b> normal | none | [ &lt;string&gt; | &lt;uri&gt; | &lt;counter&gt; | attr(&lt;identifier&gt;) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements, tree-abiding pseudo-elements (::before, ::after), and page margin boxes 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> all
	<b>Computed value:</b> On elements, always computes to 'normal'. On :before and :after, if 'normal' is specified, computes to 'none'. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-content-3-20190802/#propdef-content">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;()'&#34;" id="c.css.content" idref="c.css.content">
	<!-- BUG: this pattern creates an issue in the bluefish syntax scanning. Because the same rule is used
	in the in-line css and in the included css, we have to match the same pattern ( a double quote ") as
	end-of-inline-css and as start-of-css-string.
	
	what to do now????
	-->
	<!--<element pattern="'" highlight="css-string">
	<context symbols="\'" highlight="css-string">
		<element pattern="\\." is_regex="1" highlight="css-string"/>
		<element pattern="'" highlight="css-string" ends_context="1"/>
	</context>
	</element>
	<element pattern="&quot;" highlight="css-string">
	<context symbols="\&quot;" highlight="css-string">
		<element pattern="\\." is_regex="1" highlight="css-string"/>
		<element pattern="&quot;" highlight="css-string" ends_context="1"/>
	</context>
	</element>-->
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none">
			<reference>Sets the content, if specified, to nothing</reference>
		</element>
		<element pattern="normal">
			<reference>Default value. Sets the content, if specified, to normal, which defaults to "none" (which is nothing)</reference>
		</element>
		<element pattern="open-quote">
			<reference>Sets the content to be an opening quote</reference>
		</element>
		<element pattern="close-quote">
			<reference>Sets the content to be a closing quote</reference>
		</element>
		<element pattern="no-open-quote">
			<reference>Removes the opening quote from the content, if specified</reference>
		</element>
		<element pattern="no-close-quote">
			<reference>Removes the closing quote from the content, if specified</reference>
		</element>
		<element idref="e.css.text" />
		<element pattern="attr" highlight="css-value">
			<reference>Sets the content as one of the selector's attribute</reference>
			<autocomplete append="()" backup_cursor="1" />
			<context idref="c.css.genericroundbraces"/>
		</element>
		<element idref="e.css.url" />
		<element pattern="counter" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<context idref="c.css.genericroundbraces"/>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="counter-increment" highlight="css-property" id="e.css.counter-increment" idref="e.css.counter-increment">
	<autocomplete append=": " />
	<reference>The <i>counter-increment</i> property increases or decreases the value of one or more CSS counters. The <i>counter-increment</i> property is usually used together with the <i>counter-reset</i> property and the <i>content</i> property. 
	<b>Values:</b> none | &lt;<i>counter id</i>&gt; &lt;<i>number</i>&gt; | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> all
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-counter-increment">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.counter-increment" idref="c.css.counter-increment">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element pattern="([a-zA-Z]+|[-]?[0-9]+|[0-9])" is_regex="1" case_insens="1" highlight="css-value" id="e.css.numbers_letters" idref="e.css.numbers_letters"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="counter-reset" highlight="css-property" id="e.css.counter-reset" idref="e.css.counter-reset">
	<autocomplete append=": " />
	<reference>The <i>counter-reset</i> property creates or resets one or more CSS counters. The <i>counter-reset</i> property is usually used together with the <i>counter-increment</i> property and the <i>content</i> property.
	<b>Example:</b> counter-reset: mycounter 4; The id &quot;<i>mycounter</i>&quot; defines which counter to reset. The number &quot;<i>4</i>&quot; sets the value the counter is reset to on each occurrence of the selector. The default number value is 0 (if no number is given)
	<b>Values:</b> [ <i>&lt;identifier&gt;</i> <i>&lt;integer&gt;</i> ]+ | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> all
	<b>Computed value:</b> the keyword <i>none</i> or a list, each item an identifier paired with an integer 
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-counter-reset">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.counter-reset" idref="c.css.counter-reset">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.numbers_letters"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="counter-set" highlight="css-property" id="e.css.counter-set" idref="e.css.counter-set">
	<autocomplete append=": " />
	<reference>The <i>counter-set</i> property creates or sets one or more CSS counters. The <i>counter-set</i> property is usually used together with the <i>counter-increment</i> property and the <i>content</i> property.
	<b>Example:</b> counter-set: mycounter 4; The id &quot;<i>mycounter</i>&quot; defines which counter to reset. The number &quot;<i>4</i>&quot; sets the value of the counter on each occurrence of the selector. 
	<b>Values:</b> [ <i>&lt;identifier&gt;</i> <i>&lt;integer&gt;</i> ]+ | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> all
	<b>Computed value:</b> the keyword <i>none</i> or a list, each item an identifier paired with an integer 
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-counter-set">www.w3.org</a></reference>
	<context idref="c.css.counter-reset" />
</element>

<element pattern="cue" highlight="css-property" id="e.css.cue" idref="e.css.cue">
	<autocomplete append=": " />
	<reference>A shorthand for the properties <i>cue-before</i> and <i>cue-after</i>. If two values are given the first value is <i>cue-before</i> and the second is <i>cue-after</i>. If only one value is given, it applies to both properties.
	<b>Values:</b> <i>&lt;cue-before&gt;</i> <i>&lt;cue-after&gt;</i>
	<b>Initial:</b> N/A (see individual properties)
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> speech
	<b>Computed value:</b> N/A (see individual properties)
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CR-css-speech-1-20200310/#cue">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;()" id="c.css.cue" idref="c.css.cue">
		<element idref="e.css.url" />
		<element pattern="(-*[0-9]+|[0-9]dB)" is_regex="1" case_insens="1" highlight="css-value" id="e.css.decibel" idref="e.css.decibel" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="cue-after" highlight="css-property" id="e.css.cue-after" idref="e.css.cue-after">
	<autocomplete append=": " />
	<reference>Specifies auditory icons (i.e. pre-recorded / pre-generated sound clips) to be played after the selected element within the aural box model. Tip: See also the shorthand property <i>cue</i> which enables <i>cue-before</i> and <i>cue-after</i> in one.
	<b>Values:</b> &lt;uri&gt; &lt;decibel&gt;? | none
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> speech
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CR-css-speech-1-20200310/#cue-after">www.w3.org</a></reference>
	<context idref="c.css.cue" />
</element>

<element pattern="cue-before" highlight="css-property" id="e.css.cue-before" idref="e.css.cue-before">
	<autocomplete append=": " />
	<reference>Specifies auditory icons (i.e. pre-recorded / pre-generated sound clips) to be played before the selected element within the aural box model.
	<b>Values:</b> &lt;uri&gt; &lt;decibel&gt;? | none
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> speech
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CR-css-speech-1-20200310/#cue-before">www.w3.org</a></reference>
	<context idref="c.css.cue" />
</element>

<!-- Please order values alphabetically, they are much easier to manage, Only inherit and initial may be placed at the end -->
<element pattern="cursor" highlight="css-property" id="e.css.cursor" idref="e.css.cursor">
	<autocomplete append=": " />
	<reference>Specifies the type of cursor to be displayed for the pointing device.
	<b>Values:</b> [ [&lt;uri&gt; [&lt;x&gt; &lt;y&gt;]?,]* [ alias | all-scroll | auto | cell | col-resize | context-menu | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | no-drop | none | not-allowed | nesw-resize | ns-resize | nw-resize | nwse-resize | pointer | progress | row-resize | s-resize | se-resize | sw-resize | text | wait | vertical-text | w-resize | zoom-in | zoom-out ] ] | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual, interactive
	<b>Computed value:</b> as specified, except with any relative URLs converted to absolute
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/css3-ui/#cursor">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:()'&quot;" id="c.css.cursor" idref="c.css.cursor">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="alias">
				<reference>The cursor indicates an alias of something is to be created</reference>
			</element>
			<element pattern="all-scroll">
				<reference>The cursor indicates that something can be scrolled in any direction</reference>
			</element>
			<element pattern="auto">
				<reference>Default. The browser sets a cursor</reference>
			</element>
			<element pattern="cell">
				<reference>The cursor indicates that a cell (or set of cells) may be selected</reference>
			</element>
			<element pattern="col-resize">
				<reference>The cursor indicates that the column can be resized horizontally</reference>
			</element>
			<element pattern="context-menu">
				<reference>The cursor indicates that a context-menu is available</reference>
			</element>
			<element pattern="copy">
				<reference>The cursor indicates something is to be copied</reference>
			</element>
			<element pattern="crosshair">
				<reference>The cursor render as a crosshair</reference>
			</element>
			<element pattern="default">
				<reference>The default cursor</reference>
			</element>
			<element pattern="e-resize">
				<reference>The cursor indicates that an edge of a box is to be moved right (east)</reference>
			</element>
			<element pattern="ew-resize">
				<reference>Indicates a bidirectional resize cursor</reference>
			</element>
			<element pattern="grab">
				<reference>The cursor indicates that something can be grabbed</reference>
			</element>
			<element pattern="grabbing">
				<reference>The cursor indicates that something can be grabbed</reference>
			</element>
			<element pattern="help">
				<reference>The cursor indicates that help is available</reference>
			</element>
			<element pattern="move">
				<reference>The cursor indicates something is to be moved</reference>
			</element>
			<element pattern="n-resize">
				<reference>The cursor indicates that an edge of a box is to be moved up (north)</reference>
			</element>
			<element pattern="ne-resize">
				<reference>The cursor indicates that an edge of a box is to be moved up and right (north/east)</reference>
			</element>
			<element pattern="nesw-resize">
				<reference>Indicates a bidirectional resize cursor</reference>
			</element>
			<element pattern="no-drop">
				<reference>The cursor indicates that the dragged item cannot be dropped here</reference>
			</element>
			<element pattern="none">
				<reference>No cursor is rendered for the element</reference>
			</element>
			<element pattern="not-allowed">
				<reference>The cursor indicates that the requested action will not be executed</reference>
			</element>
			<element pattern="ns-resize">
				<reference>Indicates a bidirectional resize cursor</reference>
			</element>
			<element pattern="nw-resize">
				<reference>The cursor indicates that an edge of a box is to be moved up and left (north/west)</reference>
			</element>
			<element pattern="nwse-resize">
				<reference>Indicates a bidirectional resize cursor</reference>
			</element>
			<element pattern="pointer">
				<reference>The cursor is a pointer and indicates a link</reference>
			</element>
			<element pattern="progress">
				<reference>The cursor indicates that the program is busy (in progress)</reference>
			</element>
			<element pattern="row-resize">
				<reference>The cursor indicates that the row can be resized vertically</reference>
			</element>
			<element pattern="s-resize">
				<reference>The cursor indicates that an edge of a box is to be moved down (south)</reference>
			</element>
			<element pattern="se-resize">
				<reference>The cursor indicates that an edge of a box is to be moved down and right (south/east)</reference>
			</element>
			<element pattern="sw-resize">
				<reference>The cursor indicates that an edge of a box is to be moved down and left (south/west)</reference>
			</element>
			<element pattern="text">
				<reference>The cursor indicates text that may be selected</reference>
			</element>
			<element pattern="vertical-text">
				<reference>The cursor indicates vertical-text that may be selected</reference>
			</element>
			<element pattern="w-resize">
				<reference>The cursor indicates that an edge of a box is to be moved left (west)</reference>
			</element>
			<element pattern="wait">
				<reference>The cursor indicates that the program is busy</reference>
			</element>
			<element pattern="zoom-in">
				<reference>The cursor indicates that something can be zoomed in</reference>
			</element>
			<element pattern="zoom-out">
				<reference>The cursor indicates that something can be zoomed out</reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element pattern="url" highlight="css-value">
			<reference>A comma separated list of URLs to custom cursors. <b>Note:</b> Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used</reference>
			<autocomplete append="()" backup_cursor="1" />
			<context idref="c.css.uri"/>
		</element>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="direction" highlight="css-property" id="e.css.direction" idref="e.css.direction">
	<autocomplete append=": " />
	<reference>The direction property specifies the text direction/writing direction within a block-level element. <b>Tip:</b> Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.
	<b>Values:</b> ltr | rtl | inherit | initial
	<b>Initial:</b> ltr
	<b>Applies to:</b> all elements, but see prose
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/#propdef-direction">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.direction" idref="c.css.direction">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="ltr">
				<reference>Text direction goes from left to right. This is default</reference>
			</element>
			<element pattern="rtl">
				<reference>Text direction goes from right to left.</reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="display" highlight="css-property" id="e.css.display" idref="e.css.display">
	<autocomplete append=": " />
	<reference>The display property specifies the display behavior (the type of rendering box) of an element. In HTML, the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.
	<b>Note:</b> The values &quot;<i>flex</i>&quot; and &quot;<i>inline-flex</i>&quot; requires the -webkit- prefix to work in Safari.
	<b>Note:</b> &quot;<i>display: contents</i>&quot; does not work in Edge prior version 79.
	<b>Values:</b> block | contents | flex | flow-root | grid | inline | inline-block | inline-flex | inline-grid | inline-table | list-item | none | ruby | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inherit | initial
	<b>Initial:</b> inline
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> all
	<b>Computed value:</b> see text
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-display-3-20221118/#propdef-display">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.display" idref="c.css.display">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="block">
			<reference>Displays an element as a block element (like &lt;p&gt;). It starts on a new line, and takes up the whole width</reference>
		</element>
		<element pattern="contents">
			<reference>Makes the container disappear, making the child elements children of the element the next level up in the DOM</reference>
		</element>
		<element pattern="flex">
			<reference>Displays an element as a block-level flex container</reference>
		</element>
		<element pattern="flow">
			<reference></reference>
		</element>
		<element pattern="flow-root">
			<reference></reference>
		</element>
		<element pattern="grid">
			<reference>Displays an element as a block-level grid container</reference>
		</element>
		<element pattern="inline">
			<reference>Displays an element as an inline element (like &lt;span&gt;). Any height and width properties will have no effect</reference>
		</element>
		<element pattern="inline-block">
			<reference>Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values</reference>
		</element>
		<element pattern="inline-flex">
			<reference>Displays an element as an inline-level flex container</reference>
		</element>
		<element pattern="inline-grid">
			<reference>Displays an element as an inline-level grid container</reference>
		</element>
		<element pattern="inline-table">
			<reference>The element is displayed as an inline-level table</reference>
		</element>
		<element pattern="list-item">
			<reference>Let the element behave like a &lt;li&gt; element</reference>
		</element>
		<element pattern="none">
			<reference>The element is completely removed</reference>
		</element>
		<element pattern="ruby">
			<reference></reference>
		</element>
		<element pattern="run-in">
			<reference>Displays an element as either block or inline, depending on context </reference>
		</element>
		<element pattern="table">
			<reference>Let the element behave like a &lt;table&gt; element</reference>
		</element>
		<element pattern="table-caption">
			<reference>Let the element behave like a &lt;caption&gt; element</reference>
		</element>
		<element pattern="table-cell">
			<reference>Let the element behave like a &lt;td&gt; element</reference>
		</element>
		<element pattern="table-column">
			<reference>Let the element behave like a &lt;col&gt; element</reference>
		</element>
		<element pattern="table-column-group">
			<reference>Let the element behave like a &lt;colgroup&gt; element</reference>
		</element>
		<element pattern="table-footer-group">
			<reference>Let the element behave like a &lt;tfoot&gt; element</reference>
		</element>
		<element pattern="table-header-group">
			<reference>Let the element behave like a &lt;thead&gt; element</reference>
		</element>
		<element pattern="table-row">
			<reference>Let the element behave like a &lt;tr&gt; element</reference>
		</element>
		<element pattern="table-row-group">
			<reference>Let the element behave like a &lt;tbody&gt; element</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="dominant-baseline" highlight="css-property" id="e.css.dominant-baseline" idref="e.css.dominant-baseline">
	<autocomplete append=": " />
	<reference>This property specifies the dominant baseline, which is the default baseline type used to align content within the box. For inline boxes, the dominant baseline is used to align the box’s text (and, unless otherwise specified by vertical-align, any inline-level child boxes) by aligning each glyph/box’s corresponding baseline to the box’s own dominant baseline. For other boxes, it indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context.
	<b>Values:</b> auto | alphabetic | central | hanging | ideographic | mathematical | middle | text-bottom | text-top | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> block containers, inline boxes, table rows, grid containers, flex containers, and SVG text content elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-inline-3-20221114/#propdef-dominant-baseline">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.dominant-baseline" idref="c.css.dominant-baseline">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>Equivalent to <i>alphabetic</i> in horizontal writing modes and in vertical writing modes when text-orientation is sideways. Equivalent to central in vertical writing modes when text-orientation is mixed or upright. However, in SVG text, the origin point of glyphs (used for coordinate-based glyph positioning) is always handled as for central in vertical writing modes.</reference>
		</element>
		<element pattern="alphabetic">
			<reference>Used in writing Latin, Cyrillic, Greek, and many other scripts, corresponds to the bottom of most, but not all, their characters</reference>
		</element>
		<element pattern="central">
			<reference>Corresponds to the ideographic central baseline, halfway between the ideographic-under and ideographic-over baselines</reference>
		</element>
		<element pattern="hanging">
			<reference>Corresponds to hanging baseline from which characters in Tibetan and similar unicameral scripts with a strong but not absolute top edge seem to &quot;hang&quot;</reference>
		</element>
		<element pattern="ideographic">
			<reference>Corresponds to the line-under design edge of CJK (Han/Hangul/Kana) text</reference>
		</element>
		<element pattern="mathematical">
			<reference>Corresponds to center baseline around which mathematical characters are designed</reference>
		</element>
		<element pattern="middle">
			<reference>Corresponds to halfway between the alphabetic and x-height baselines. If text-orientation: upright, corresponds to the ideographic central baseline, halfway between the ideographic-under and ideographic-over baselines</reference>
		</element>
		<element pattern="text-bottom">
			<reference>Corresponds to the metric used as the line-under edge of an inline’s content box per [CSS2]</reference>
		</element>
		<element pattern="text-top">
			<reference>Corresponds to the metric used as the line-over edge of an inline’s content box per [CSS2]</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="empty-cells" highlight="css-property" id="e.css.empty-cells" idref="e.css.empty-cells">
	<autocomplete append=": " />
	<reference>The empty-cells property sets whether or not to display borders on empty cells in a table. <b>Note:</b> This property has no effect if border-collapse is "collapse".
	<b>Values:</b> show | hide | inherit | initial
	<b>Initial:</b> show
	<b>Applies to:</b> table-cell elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="http://www.w3.org/TR/CSS2/tables.html#propdef-empty-cells">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.empty-cells" idref="c.css.empty-cells">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="show">
			<reference>Display borders on empty cells. This is default</reference>
		</element>
		<element pattern="hide">
			<reference>Hide borders on empty cells</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="filter" highlight="css-property" id="e.css.filter" idref="e.css.filter">
	<autocomplete append=": " />
	<reference>The <i>filter</i> property defines visual effects (like blur and saturation) to an element (often &lt;img&gt;)
	<b>Values:</b> none | <i>filter</i> [ blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | <i>url to an SVG filter</i>] | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> All elements. In SVG, it applies to container elements without the <i>defs</i> element, all <i>graphics elements</i> and the <i>use</i> element.
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-filter-effects-1-20181218/#propdef-filter">www.w3.org</a></reference>
	<context idref="c.css.backdrop-filter" />
</element>
<!-- for the above filter property, see the note above for backdrop-filter -->

<element pattern="flex" highlight="css-property" id="e.css.flex" idref="e.css.flex">
	<autocomplete append=": " />
	<reference>The <i>flex</i> property is a shorthand property for:
		flex-grow
		flex-shrink
		flex-basis
	The flex property sets the flexible length on flexible items.
	<b>Note:</b> If the element is not a flexible item, the <i>flex</i> property has no effect.
	<b>Values:</b> <i>flex-grow</i> <i>flex-shrink</i> <i>flex-basis</i> | auto | initial | inherit
	<b>Initial:</b> 0 1 auto
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> individual
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.flex" idref="c.css.flex">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element idref="e.css.number"/>
		<element idref="e.css.length"/>
		<element pattern="auto">
			<reference>Same as <i>1 1 auto</i></reference>
		</element>
		<element pattern="initial">
			<reference>Same as <i>0 1 auto</i></reference>
		</element>
		<element pattern="none">
			<reference>Same as <i>0 0 auto</i></reference>
		</element>
		<element idref="e.css.inherit"/>
	</group>
	<element idref="e.css.end"/>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="flex-basis" highlight="css-property" id="e.css.flex-basis" idref="e.css.flex-basis">
	<autocomplete append=": " />
	<reference>The <i>flex-basis</i> property specifies the initial length of a flexible item. <b>Tip:</b> It is preferrable to use the <i>flex</i> property.
	<b>Note:</b> If the element is not a flexible item, the <i>flex-basis</i> property has no effect.
	<b>Values:</b> <i>number</i> | auto | content | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the flex container’s inner main size
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword or a computed <i>length-percentage</i> value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex-basis">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.flex-basis" idref="c.css.flex-basis">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>Default value. The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.number"/>
	<element idref="e.css.percent"/>
	<element idref="e.css.length"/>
	<element idref="e.css.end"/>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="flex-direction" highlight="css-property" id="e.css.flex-direction" idref="e.css.flex-direction">
	<autocomplete append=": " />
	<reference>The <i>flex-direction</i> property specifies the direction of the flexible items.
	<b>Note:</b> If the element is not a flexible item, the <i>flex-direction</i> property has no effect.
	<b>Values:</b> row | row-reverse | column | column-reverse | initial | inherit
	<b>Initial:</b> row
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> individual
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex-direction">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.flex-direction" idref="c.css.flex-direction">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="row">
			<reference>Default value. The flexible items are displayed horizontally, as a row</reference>
		</element>
		<element pattern="row-reverse">
			<reference>Same as row, but in reverse order</reference>
		</element>
		<element pattern="column">
			<reference>The flexible items are displayed vertically, as a column</reference>
		</element>
		<element pattern="column-reverse">
			<reference>Same as column, but in reverse order</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="flex-flow" highlight="css-property" id="e.css.flex-flow" idref="e.css.flex-flow">
	<autocomplete append=": " />
	<reference>The <i>flex-flow</i> property is a shorthand property for:
		flex-direction
		flex-wrap
	<b>Note:</b> If the element is not a flexible item, the <i>flex-flow</i> property has no effect.
	<b>Values:</b> <i>flex-direction</i> <i>flex-wrap</i> | initial | inherit
		values for <i>flex-direction</i>: row (default) | row-reverse | column | column-reverse | initial | inherit
		values for <i>flex-wrap</i>: nowrap (default) | wrap | wrap-reverse | initial | inherit 
	<b>Initial:</b> row nowrap
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> individual
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex-flow">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.flex-flow" idref="c.css.flex-flow">
	<group highlight="css-value" >
		<autocomplete append=" " />
		<element pattern="row">
			<reference>Default value. The flexible items are displayed horizontally, as a row</reference>
		</element>
		<element pattern="row-reverse">
			<reference>Same as row, but in reverse order</reference>
		</element>
		<element pattern="column">
			<reference>The flexible items are displayed vertically, as a column</reference>
		</element>
		<element pattern="column-reverse">
			<reference>Same as column, but in reverse order</reference>
		</element>
		<element pattern="nowrap">
			<reference>Default value. Specifies that the flexible items will not wrap</reference>
		</element>
		<element pattern="wrap">
			<reference>Specifies that the flexible items will wrap if necessary</reference>
		</element>
		<element pattern="wrap-reverse">
			<reference>Specifies that the flexible items will wrap, if necessary, in reverse order</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="flex-grow" highlight="css-property" id="e.css.flex-grow" idref="e.css.flex-grow">
	<autocomplete append=": " />
	<reference>The <i>flex-grow</i> property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
	<b>Note:</b> If the element is not a flexible item, the <i>flex-grow</i> property has no effect.
	<b>Values:</b> <i>number</i> | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> individual
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex-grow">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.flex-grow" idref="c.css.flex-grow">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element id="e.css.number" idref="e.css.number" pattern="[0-9]+\.?[0-9]+" is_regex="1">
			<reference>A number specifying how much the item will grow (flex-grow) or shrink (flex-shrink) relative to the rest of the flexible items. Default value is 0</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="flex-shrink" highlight="css-property" id="e.css.flex-shrink" idref="e.css.flex-shrink">
	<autocomplete append=": " />
	<reference>The <i>flex-shrink</i> property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
	<b>Note:</b> If the element is not a flexible item, the <i>flex-shrink</i> property has no effect.
	<b>Values:</b> <i>number</i> | initial | inherit
	<b>Initial:</b> 1
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> individual
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex-shrink">www.w3.org</a>
	</reference>
	<context idref="c.css.flex-grow" />
</element>

<element pattern="flex-wrap" highlight="css-property" id="e.css.flex-wrap" idref="e.css.flex-wrap">
	<autocomplete append=": " />
	<reference>The <i>flex-wrap</i> property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
	<b>Note:</b> If the element is not a flexible item, the <i>flex-wrap</i> property has no effect.
	<b>Values:</b> nowrap | wrap | wrap-reverse | initial | inherit
	<b>Initial:</b> nowrap
	<b>Applies to:</b> flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> individual
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-flex-wrap">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.flex-wrap" idref="c.css.flex-wrap">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element  pattern="nowrap" id="e.css.nowrap" idref="e.css.nowrap">
			<reference>Default value. Specifies that the flexible items will not wrap</reference>
		</element>
		<element  pattern="wrap" id="e.css.wrap" idref="e.css.wrap">
			<reference>Specifies that the flexible items will wrap if necessary</reference>
		</element>
		<element  pattern="wrap-reverse" id="e.css.wrap-reverse" idref="e.css.wrap-reverse">
			<reference>Specifies that the flexible items will wrap, if necessary, in reverse order</reference>
		</element>
		<element idref="e.css.initial" />
		<element idref="e.css.inherit" />
	</group>
	<element idref="e.css.end"/>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="float" highlight="css-property" id="e.css.float" idref="e.css.float">
	<autocomplete append=": " />
	<reference>The float property specifies whether an element should float to the left, right, or not at all. 
		<b>Note:</b> Absolutely positioned elements ignore the float property! 
		<b>Note:</b> Elements next to a floating element will flow around it. To avoid this, use the clear property or the clearfix hack (see example at the bottom of this page).
	<b>Values:</b> block-start | block-end | inline-start | inline-end | snap-block(<i>&lt;length&gt; [, start | end | near ]</i>?) | snap-inline(<i>&lt;length&gt; [, left | right | near ]</i>?) | left | right | none | top | bottom | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> all
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/WD-css-page-floats-3-20150915/#propdef-float">www.w3.org</a></reference>
	<context id="c.css.float" idref="c.css.float" symbols=" &#9;&#10;&#13;-{}.,();:'&quot;">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="block-start">
			<reference>If the float reference is a line box, block-start behaves like inline-start. If the float reference is not a line box, the element generates a box that is floated to the block-start and line-start outer edges of the float reference. The initial value of the max-width or max-height property that refers to the inline size of the float is '100%'. Content flows on the block-end side of the box.</reference>
		</element>
		<element pattern="block-end">
			<reference>If the float reference is a line box, block-end behaves like inline-end. If the float reference is not a line box, the element generates a box that is floated to the block-end and line-start outer edges of the float reference. The initial value of the max-width or max-height property that refers to the inline size of the float is '100%'. Content flows on the block-start side of the box.</reference>
		</element>
		<element pattern="inline-start">
			<reference>The element generates a box that is floated to the line-start outer edge of the float reference. Content flows on the line-end side of the box</reference>
		</element>
		<element pattern="inline-end">
			<reference>The element generates a box that is floated to the line-end outer edge of the float reference. Content flows on the line-start side of the box. </reference>
		</element>
		<element pattern="top">
			<reference>Behave like <i>block-start</i> or <i>inline-start</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i></reference>
		</element>
		<element pattern="bottom">
			<reference>Behave like <i>block-end</i> or <i>inline-end</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i></reference>
		</element>
		<element pattern="left">
			<reference>If the float reference is a line box, behaves like <i>inline-start</i> or <i>inline-end</i>, whichever corresponds to line-left for the float reference. Otherwise, behaves like <i>block-end</i>, <i>inline-start</i> or <i>inline-end</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i></reference>
		</element>
		<element pattern="right">
			<reference>If the float reference is a line box, behaves like <i>inline-start</i> or <i>inline-end</i>, whichever corresponds to line-right for the float reference. Otherwise, behaves like <i>block-start</i>, <i>inline-start</i> or <i>inline-end</i> depending on the float containing block’s <i>direction</i> and <i>writing-mode</i></reference>
		</element>
		<element pattern="none">
			<reference>The element does not float, (will be displayed just where it occurs in the text). This is default</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element pattern="snap-block" highlight="css-value">
		<autocomplete append="();" backup_cursor="2" />
		<reference>Makes the element float to the start or the end of the block if it 
		naturally appears within a certain distance from either one. The length value(s) 
		specifies the maximum distance from the start/end that an element must be within 
		in order to be floated; one length value specifies the distance from both the 
		start and the end, two length values specify the distance from the start and end, 
		respectively.
		The optional keyword value specifies where the element is floated: start, end, or 
		the nearest of the two. The initial value is near. If near is in effect and the element 
		is within the specified distance both from the start and the end, end wins.
		An element is considered to be a float if it has a snap-block() value, even if the 
		element does not appear within the specified distance. This way, it can be determined 
		whether an element is float or not without laying out the document.</reference>
		<context idref="c.css.parentheses_length" />
	</element>
	<element pattern="snap-inline" highlight="css-value">
		<autocomplete append="();" backup_cursor="2" />
		<reference>Makes the element float to the line start or line end if it naturally appears within a certain distance from the start or end of the line. The length value(s) specifies the maximum distance from the start/end that an element must be within in order to be floated; one length value specifies the distance from both the start and the end, two length values specify the distance from the start and end, respectively.
	The optional keyword value specifies where the element is floated: line start, line end, or the nearest of the two. The initial value is near. If near is in effect and the element is within the specified distance both from the start and the end, end wins.
	An element is considered to be a float if it has a snap-inline() value, even if the element does not appear within the specified distance. This way, it can be determined whether an element is float or not without laying out the document.</reference>
		<context idref="c.css.parentheses_length" />
	</element>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="flow" highlight="css-property" id="e.css.flow" idref="e.css.flow">
	<autocomplete append=": " />
	<reference>The ‘flow’ property adds an element to a slot. The name of the slot may be quoted (&lt;<i>string</i>&gt;) or unquoted (&lt;<i>identifier</i>&gt;), but if the name is equal to one of the following, it must be quoted: ‘initial’, ‘inherit’, ‘default’ or ‘same’. This is to avoid ambiguity with the keywords of the same name.
	<b>Values:</b> auto | &lt;<i>identifier</i>&gt; | &lt;<i>string</i>&gt; | ‘*’ | same 
	<b>Initial:</b> auto
	<b>Applies to:</b> elements that have a grid ancestor and whose ‘position’ is ‘static’ or ‘relative’ 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/NOTE-css-template-3-20150326/#flow0">www.w3.org</a></reference>
	<context id="c.css.flow" idref="c.css.flow" symbols=" &#9;&#10;&#13;-{}.,();:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>This is the default. The element is added to the flow of its parent</reference>
			</element>
			<element idref="e.css.numbers_letters"/>
			<element pattern="same">
				<reference></reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.end"/>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font" highlight="css-property" id="e.css.font" idref="e.css.font">
	<autocomplete append=": " />
	<reference>The <i>font</i> property is a shorthand property for:
		<i>font-style</i> =&gt; Specifies the font style. Default value is &quot;normal&quot;
		<i>font-variant</i> =&gt; Specifies the font variant. Default value is &quot;normal&quot;
		<i>font-weight</i> =&gt; Specifies the font weight. Default value is &quot;normal&quot;
		<i>font-size/line-height</i> =&gt; Specifies the font size and the line-height. Default value is &quot;normal&quot;
		<i>font-family</i> =&gt; Specifies the font family. Default value depends on the browser
	The font-size and font-family values are required. If one of the other values is missing, their default value are used.
	<b>Note:</b> The <i>line-height</i> property sets the space between lines.
	<b>Values:</b> <i><i>font-style font-variant font-weight font-size</i>/line-height font-family</i> | caption | icon | menu |message-box | small-caption | status-bar | initial | inherit
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> see individual properties
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font" idref="c.css.font">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="italic"/>
			<element pattern="oblique"/>
			<element pattern="small-caps"/>
			<element pattern="bold"/>
			<element pattern="bolder"/>
			<element pattern="lighter"/>
			<element pattern="xx-small"/>
			<element pattern="x-small"/>
			<element pattern="small"/>
			<element pattern="medium"/>
			<element pattern="large"/>
			<element pattern="x-large"/>
			<element pattern="xx-large"/>
			<element pattern="larger"/>
			<element pattern="smaller"/>
			<element pattern="serif"/>
			<element pattern="Times"/>
			<element pattern="sans-serif"/>
			<element pattern="Helvetica"/>
			<element pattern="cursive"/>
			<element pattern="Zapf-Chancery"/>
			<element pattern="monospace"/>
			<element pattern="Courier"/>
			<element pattern="caption"/>
			<element pattern="icon"/>
			<element pattern="menu"/>
			<element pattern="message-box"/>
			<element pattern="small-caption"/>
			<element pattern="status-bar"/>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element pattern="(100|200|300|400|500|600|700|800|900)" is_regex="1" highlight="css-value" id="e.css.hundreds" idref="e.css.hundreds"/>
<!--		<element pattern="[0-9]+\.?[0-9]*" is_regex="1" highlight="css-value"/>-->
		<element idref="e.css.number" />
		<element pattern="/"/>
		<element idref="e.css.length"/>
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<!-- Here should be the rule @font-face -->

<element pattern="font-family" highlight="css-property" id="e.css.font-family" idref="e.css.font-family">
	<autocomplete append=": " />
	<reference>The font-family property specifies the font for an element.
		The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. There are two types of font family names:
		family-name - The name of a font-family, like "times", "courier", "arial", etc.
		generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
		Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
		<b>Note:</b> Separate each value with a comma.
		<b>Note:</b> If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
	<b>Values:</b> [[ &lt;family-name&gt; | &lt;generic-family&gt; ] [, &lt;family-name&gt;| &lt;generic-family&gt;]* ] | inherit | initial | revert |revert-layer | unset
	<b>Initial:</b> depends on browser
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-family" idref="c.css.font-family">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="Arial"/>
			<element pattern="Arial Black"/>
			<element pattern="Courier"/>
			<element pattern="Courier New"/>
			<element pattern="cursive"/>
			<element pattern="emoji"/>
			<element pattern="fangsong"/>
			<element pattern="fantasy"/>
			<element pattern="Georgia"/>
			<element pattern="Helvetica"/>
			<element pattern="Impact"/>
			<element pattern="Lucida"/>
			<element pattern="Lucida Console"/>
			<element pattern="Lucida Sans Unicode"/>
			<element pattern="math"/>
			<element pattern="monospace"/>
			<element pattern="revert"/>
			<element pattern="revert-layer"/>
			<element pattern="sans-serif"/>
			<element pattern="serif"/>
			<element pattern="system-ui"/>
			<element pattern="Tahoma"/>
			<element pattern="Times"/>
			<element pattern="Times New Roman"/>
			<element pattern="ui-monospace"/>
			<element pattern="ui-rounded"/>
			<element pattern="ui-serif"/>
			<element pattern="ui-sans-serif"/>
			<element pattern="unset"/>
			<element pattern="Verdana"/>
			<element pattern="Zapf-Chancery"/>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-feature-settings" highlight="css-property" id="e.css.font-feature-settings" idref="e.css.font-feature-settings">
	<autocomplete append=": &quot;&quot;"  backup_cursor="1" />
	<reference>The <i>font-feature-settings</i> property allows low-level control over advanced typographic features in OpenType fonts.
		<b>Note:</b> You should generally use <i>font-variant</i> and its related subproperties whenever possible and only use this property for special cases where its use is the only way of accessing a particular infrequently used font feature. 
		Feature tag values have the following syntax:
		&lt;feature-tag-value&gt; = &lt;<i>string</i>&gt; [ &lt;<i>integer</i>&gt; | on | off ]
		Examples:
		font-feature-settings: "dlig" 1;       /* dlig=1 enable discretionary ligatures */
		font-feature-settings: "smcp" on;      /* smcp=1 enable small caps */
		font-feature-settings: 'c2sc';         /* c2sc=1 enable caps to small caps */
		font-feature-settings: "liga" off;     /* liga=0 no common ligatures */
		font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
		font-feature-settings: "tnum" "hist";  /* <b>invalid</b>, need a comma-delimited list */
		font-feature-settings: "silly" off;    /* <b>invalid</b>, tag too long */
		font-feature-settings: "PKRN";         /* PKRN=1 enable custom feature */
		font-feature-settings: dlig;           /* <b>invalid</b>, tag must be a string */
	<b>Values:</b> normal | &lt;<i>feature-value</i>&gt; &lt;<i>number</i>&gt; | [ on | off ]
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-feature-settings">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-feature-settings" idref="c.css.font-feature-settings">
		<group highlight="css-value" >
			<autocomplete append=" "/>
			<element pattern="c2sc">
			<reference>caps to smallcaps</reference></element>
			<element pattern="calt">
			<reference>contextual alternates</reference></element>
			<element pattern="case">
			<reference>casesensitive forms</reference></element>
			<element pattern="dlig">
			<reference>discretionary ligatures</reference></element>
			<element pattern="fina">
			<reference>final forms</reference></element>
			<element pattern="frac">
			<reference>fractions</reference></element>
			<element pattern="hist">
			<reference>historical forms</reference></element>
			<element pattern="hlig">
			<reference>historical ligatures</reference></element>
			<element pattern="hwid">
			<reference>half width</reference></element>
			<element pattern="init">
			<reference>initial forms</reference></element>/>
			<element pattern="isol">
			<reference>isolated forms</reference></element>/>
			<element pattern="kern">
			<reference>kerning</reference></element>/>
			<element pattern="liga">
			<reference>common ligatures</reference></element>/>
			<element pattern="lnum">
			<reference>lining numbers</reference></element>/>
			<element pattern="locl">
			<reference>localized forms</reference></element>/>
			<element pattern="mark">
			<reference>mark</reference></element>
			<element pattern="medi">
			<reference>medial forms</reference></element>
			<element pattern="mkmk">
			<reference>mark to mark positioning</reference></element>
			<element pattern="normal">
			<reference>Default. No changes</reference></element>
			<element pattern="off">
			<reference>disables the feature given before</reference></element>
			<element pattern="on">
			<reference>enables the feature given before (e.g.: &lt;"smcp" on&gt;)</reference></element>
			<element pattern="onum">
			<reference>Old style numbers</reference></element>
			<element pattern="PKRN">
			<reference>custom feature</reference></element>
			<element pattern="rlig">
			<reference>required ligatures</reference></element>
			<element pattern="smcp">
			<reference>small caps</reference></element>
			<element pattern="ss**">
			<reference>stylistic sets</reference></element>
			<element pattern="subs">
			<reference>subscript</reference></element>
			<element pattern="sups">
			<reference>superscript</reference></element>
			<element pattern="swsh">
			<reference>swashes</reference></element>
			<element pattern="tnum">
			<reference>tabular numbers</reference></element>
			<element pattern="zero">
			<reference>slashed zero</reference></element>
		</group>
		<element pattern="(0|1)" id="e.css.Zero_One" is_regex="1" highlight="css-value" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-kerning" highlight="css-property" id="e.css.font-kerning" idref="e.css.font-kerning">
	<autocomplete append=": " />
	<reference>The <i>font-kerning</i> property controls the usage of the kerning information stored in a font. <b>Tip:</b> Kerning defines how letters are spaced. <b>Note:</b> For fonts that do not include kerning data, this property will have no visible effect.
	<b>Values:</b> auto | normal | none
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-kerning">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-kerning" idref="c.css.font-kerning">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="auto"/>
			<element pattern="none"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-size" highlight="css-property" id="e.css.font-size" idref="e.css.font-size">
	<autocomplete append=": " />
	<reference>Sets the size of the font when set solid.
	<b>Values:</b> &lt;absolute-size&gt; | &lt;relative-size&gt; | &lt;length&gt; | &lt;percentage&gt; | inherit | initial | math
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements and text
	<b>Inherited:</b> yes
	<b>Percentages:</b> refer to parent element’s font size 
	<b>Media:</b> visual
	<b>Computed value:</b> an absolute length
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-size">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-size" idref="c.css.font-size">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="xx-small"/>
			<element pattern="x-small"/>
			<element pattern="small"/>
			<element pattern="medium"/>
			<element pattern="large"/>
			<element pattern="x-large"/>
			<element pattern="xx-large"/>
			<element pattern="larger"/>
			<element pattern="smaller"/>
			<element pattern="0"/>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.length"/>
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-size-adjust" highlight="css-property" id="e.css.font-size-adjust" idref="e.css.font-size-adjust">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property is currently only supported by Firefox.
	Sets the size of the font when set solid. <b>Note:</b> Some values may not yet work properly. Established values are <i>none</i> and <i>number</i>.
	<b>Values:</b> [from-font | &lt;<i>number</i>&gt;] | [ ex-height | cap-height | ch-width | ic-width | ic-height ] | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements and text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> as number
	<b>Animation type:</b> discrete if the keywords differ, otherwise by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-size-adjust">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-size-adjust" idref="c.css.font-size-adjust">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
			<element pattern="ex-height">
				<reference>Normalize the <b>aspect value</b> of the fonts, using the x-height divided by the font size.</reference>
			</element>
			<element pattern="cap-height">
				<reference>Normalize the cap-height of the fonts, using the cap-height by the font size.</reference>
			</element>
			<element pattern="ch-width">
				<reference>Normalize the horizontal narrow pitch of the fonts, using the advance width of &quot;0&quot; (ZERO, U+0030) divided by the font size. </reference>
			</element>
			<element pattern="ic-width">
				<reference>Normalize the horizontal wide pitch of the font, using the advance width of &quot;水&quot; (CJK water ideograph, U+6C34) divided by the font size. </reference>
			</element>
			<element pattern="ic-height">
				<reference>Normalize the vertical wide pitch of the font, using the advance height of &quot;水&quot; (CJK water ideograph, U+6C34) divided by the font size. </reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.length"/>
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-stretch" highlight="css-property" id="e.css.font-stretch" idref="e.css.font-stretch">
	<autocomplete append=": " />
	<reference>The <i>font-stretch</i> property allows you to make text narrower (condensed) or wider (expanded). <b>Note:</b> Some fonts provide additional faces; condensed faces and expanded faces. For these fonts, you can use the font-stretch property to select a normal, condensed, or expanded font face. 
	<b>Note:</b> This property has no effect if the selected font does not offer condensed or expanded faces!
	<b>Values:</b> &lt;<i>percentage</i>&gt; | ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements and text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> as <i>font stretch</i>
	<b>Animation type:</b> discrete if the keywords differ, otherwise by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-stretch">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-stretch" idref="c.css.font-stretch">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="ultra-condensed">
				<reference>Makes the text as narrow as it gets</reference>
			</element>
			<element pattern="extra-condensed">
				<reference>Makes the text narrower than condensed, but not as narrow as ultra-condensed</reference>
			</element>
			<element pattern="condensed">
				<reference>Makes the text narrower than semi-condensed, but not as narrow as extra-condensed</reference>
			</element>
			<element pattern="semi-condensed">
				<reference>Makes the text narrower than normal, but not as narrow as condensed</reference>
			</element>
			<element pattern="semi-expanded">
				<reference>Makes the text wider than normal, but not as wide as expanded</reference>
			</element>
			<element pattern="expanded">
				<reference>Makes the text wider than semi-expanded, but not as wide as extra-expanded</reference>
			</element>
			<element pattern="extra-expanded">
				<reference>Makes the text wider than expanded, but not as wide as ultra-expanded</reference>
			</element>
			<element pattern="ultra-expanded">
				<reference>Makes the text as wide as it gets</reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-style" highlight="css-property" id="e.css.font-style" idref="e.css.font-style">
	<autocomplete append=": " />
	<reference>Selects between normal (sometimes referred to as `roman` or `upright`), italic and oblique faces within a font family.
	<b>Values:</b> normal | italic | oblique | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-style">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-style" idref="c.css.font-style">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="italic"/>
			<element pattern="oblique"/>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-synthesis" highlight="css-property" id="e.css.font-synthesis" idref="e.css.font-synthesis">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property is not yet supported by all browsers. It works with Chrome, Firefox and partly with Safari.
	This property controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces. If ‘weight’ is not specified, user agents must not synthesize bold faces and if ‘style’ is not specified user agents must not synthesize italic faces. A value of ‘none’ disallows all synthetic faces.
	The <i>weight</i> value can be given as <i>bold</i>, <i>bolder</i> or <i>lighter</i>. An alternative is the weight value by hundreds, i.e. <i>100</i>, <i>200</i>, <i>300</i> ... <i>900</i>, where 100 is very thin and 900 is heavy.
	<b>Values:</b> none | [ <i>weight</i> || <i>style</i> ] 
	<b>Initial:</b> weight style
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-synthesis">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-synthesis" idref="c.css.font-synthesis">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
			<element pattern="normal"/>
			<element pattern="italic"/>
			<element pattern="oblique"/>
			<element pattern="bold"/>
			<element pattern="bolder"/>
			<element pattern="lighter"/>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
			<element idref="e.css.hundreds"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant" highlight="css-property" id="e.css.font-variant" idref="e.css.font-variant">
	<autocomplete append=": " />
	<reference>The <i>font-variant</i> property is a shorthand for all font-variant subproperties. The value <i>normal</i> resets all subproperties of <i>font-variant</i> to their inital value. The <i>none</i> value sets <i>font-variant-ligatures</i> to <i>none</i> and resets all other font feature properties to their initial value. Like other shorthands, using <i>font-variant</i> resets unspecified <i>font-variant</i> subproperties to their initial values. It does not reset the values of <i>font-feature-settings</i>. 
	<b>Values:</b> normal | none | [ &lt;<i>common-lig-values</i>&gt; || &lt;<i>discretionary-lig-values</i>&gt; || &lt;<i>historical-lig-values</i>&gt; || &lt;<i>contextual-alt-values</i>&gt; || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || &lt;<i>numeric-figure-values</i>&gt; || &lt;<i>numeric-spacing-values</i>&gt; || &lt;<i>numeric-fraction-values</i>&gt; || ordinal || slashed-zero || &lt;<i>east-asian-variant-values</i>&gt; || &lt;<i>east-asian-width-values</i>&gt; || ruby || [ sub | super ] ] | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-variant">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant" idref="c.css.font-variant">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="none"/>
			<element pattern="small-caps">
				<reference>All lowercase letters are converted to uppercase letters. However, the converted uppercase letters appear in a smaller font size than the original uppercase letters in the text.</reference>
			</element>
			<element pattern="all-small-caps">
				<reference>Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).</reference>
			</element>
			<element pattern="petite-caps">
				<reference>Enables display of petite capitals (OpenType feature: pcap).</reference>
			</element>
			<element pattern="all-petite-caps">
				<reference>Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap).</reference>
			</element>
			<element pattern="unicase">
				<reference>Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).</reference>
			</element>
			<element pattern="titling-caps">
				<reference>Enables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.</reference>
			</element>
			<element pattern="ordinal">
				<reference>Enables display of letter forms used with ordinal numbers (OpenType feature: ordn).</reference>
			</element>
			<element pattern="slashed-zero">
				<reference>Enables display of slashed zeros (OpenType feature: zero)..</reference>
			</element>
			<element pattern="common-ligatures">
				<reference>Enables display of common ligatures (OpenType features: liga, clig). For OpenType fonts, common ligatures are enabled by default.</reference>
			</element>
			<element pattern="no-common-ligatures">
				<reference>Disables display of common ligatures (OpenType features: liga, clig).</reference>
			</element>
			<element pattern="discretionary-ligatures">
				<reference>Enables display of discretionary ligatures (OpenType feature: dlig). Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.</reference>
			</element>
			<element pattern="no-discretionary-ligatures">
				<reference>Disables display of discretionary ligatures (OpenType feature: dlig).</reference>
			</element>
			<element pattern="historical-ligatures">
				<reference>Enables display of historical ligatures (OpenType feature: hlig).</reference>
			</element>
			<element pattern="no-historical-ligatures">
				<reference>Disables display of historical ligatures (OpenType feature: hlig).</reference>
			</element>
			<element pattern="contextual">
				<reference>Enables display of contextual alternates (OpenType feature: calt). Although not strictly a ligature feature, like ligatures this feature is commonly used to harmonize the shapes of glyphs with the surrounding context. For OpenType fonts, this feature is on by default.</reference>
			</element>
			<element pattern="no-contextual">
				<reference>Disables display of contextual alternates (OpenType feature: calt).</reference>
			</element>
			<element pattern="lining-nums">
				<reference>Enables display of lining numerals (OpenType feature: lnum).</reference>
			</element>
			<element pattern="oldstyle-nums">
				<reference>Enables display of old-style numerals (OpenType feature: onum).</reference>
			</element>
			<element pattern="proportional-nums">
				<reference>Enables display of proportional numerals (OpenType feature: pnum).</reference>
			</element>
			<element pattern="tabular-nums">
				<reference>Enables display of tabular numerals (OpenType feature: tnum).</reference>
			</element>
			<element pattern="diagonal-fractions">
				<reference>Enables display of lining diagonal fractions (OpenType feature: frac).</reference>
			</element>
			<element pattern="stacked-fractions">
				<reference>Enables display of lining stacked fractions (OpenType feature: afrc).</reference>
			</element>
			<element pattern="jis78">
				<reference>Enables rendering of JIS78 forms (OpenType feature: jp78).</reference>
			</element>
			<element pattern="jis83">
				<reference>Enables rendering of JIS83 forms (OpenType feature: jp83).</reference>
			</element>
			<element pattern="jis90">
				<reference>Enables rendering of JIS90 forms (OpenType feature: jp90).</reference>
			</element>
			<element pattern="jis04">
				<reference>Enables rendering of JIS2004 forms (OpenType feature: jp04).</reference>
			</element>
			<element pattern="simplified">
				<reference>Enables rendering of simplified forms (OpenType feature: smpl). Allows control over the glyph forms for characters which have been simplified over time but for which the older, traditional form is still used in some contexts.</reference>
			</element>
			<element pattern="traditional">
				<reference>Enables rendering of traditional forms (OpenType feature: trad). Allows control over the glyph forms for characters which have been simplified over time but for which the older, traditional form is still used in some contexts.</reference>
			</element>
			<element pattern="full-width">
				<reference>Enables rendering of full-width variants (OpenType feature: fwid).</reference>
			</element>
			<element pattern="proportional-width">
				<reference>Enables rendering of proportionally-spaced variants (OpenType feature: pwid)</reference>
			</element>
			<element pattern="ruby">
				<reference>Enables display of ruby variant glyphs (OpenType feature: ruby). Since ruby text is generally smaller than the associated body text, font designers can design special glyphs for use with ruby that are more readable than scaled down versions of the default glyphs. Only glyph selection is affected, there is no associated font scaling or other change that affects line layout. The red ruby text below is shown with default glyphs (top) and with ruby variant glyphs (bottom). Note the slight difference in stroke thickness. </reference>
			</element>
			<element pattern="sub">
				<reference>Enables display of subscript variants (OpenType feature: subs).</reference>
			</element>
			<element pattern="super">
				<reference>Enables display of superscript variants (OpenType feature: sups).</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-alternates" highlight="css-property" id="e.css.font-variant-alternates" idref="e.css.font-variant-alternates">
	<autocomplete append=": " />
	<reference>The <i>font-variant-caps</i> property controls the usage of alternate glyphs for capital letters.
	<b>Values:</b> normal | [ stylistic(&lt;<i>feature-value-name</i>&gt;) || historical-forms || styleset(&lt;<i>feature-value-name</i>&gt;#) || character-variant(&lt;<i>feature-value-name</i>&gt;#) || swash(&lt;<i>feature-value-name</i>&gt;) || ornaments(&lt;<i>feature-value-name</i>&gt;) || annotation(&lt;<i>feature-value-name</i>&gt;) ] | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements and text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-fonts-4-20211221/#propdef-font-variant-alternates">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.();:'&quot;" id="c.css.font-variant-alternates" idref="c.css.font-variant-alternates">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="historical-forms">
				<reference>Enables display of historical forms (OpenType feature: hist).</reference>
			</element>
			<element pattern="stylistic">
				<reference>stylistic(&lt;<i>feature-value-name</i>&gt;) enables display of stylistic alternates 
				(font specific, OpenType feature: salt &lt;feature-index&gt;).</reference>
				<autocomplete append="()" backup_cursor="1" />
				<context idref="c.css.genericroundbraces" />
			</element>
			<element pattern="styleset">
				<reference>styleset(&lt;<i>feature-value-name</i>&gt;#) enables display of petite capitals 
				(OpenType feature: pcap).</reference>
				<autocomplete append="()" backup_cursor="1" />
				<context idref="c.css.genericroundbraces" />
			</element>
			<element pattern="character-variant">
				<reference>character-variant(&lt;<i>feature-value-name</i>&gt;#) enables display of specific 
				character variants (font specific, OpenType feature: cv&lt;feature-index&gt; OpenType currently 
				defines cv01 through cv99).</reference>
				<autocomplete append="()" backup_cursor="1" />
				<context idref="c.css.genericroundbraces" />
			</element>
			<element pattern="swash">
				<reference>swash(&lt;feature-value-name&gt;) enables display of swash glyphs (font specific, 
				OpenType feature: swsh &lt;feature-index&gt;, cswh &lt;feature-index&gt;).</reference>
				<autocomplete append="()" backup_cursor="1" />
				<context idref="c.css.genericroundbraces" />
			</element>
			<element pattern="ornaments">
				<reference>ornaments(&lt;<i>feature-value-name</i>&gt;) enables replacement of default glyphs 
				with ornaments, if provided in the font (font specific, OpenType feature: ornm &lt;feature-index&gt;). 
				Some fonts may offer ornament glyphs as alternates for a wide collection of characters; however, 
				displaying arbitrary characters (e.g., alphanumerics) as ornaments is poor practice as it distorts 
				the semantics of the data.</reference>
				<autocomplete append="()" backup_cursor="1" />
				<context idref="c.css.genericroundbraces" />
			</element>
			<element pattern="annotation">
				<reference>annotation(&lt;<i>feature-value-name</i>&gt;) enables display of alternate annotation forms (font specific, OpenType feature: nalt &lt;feature-index&gt;).</reference>
				<autocomplete append="()" backup_cursor="1" />
				<context idref="c.css.genericroundbraces" />
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-caps" highlight="css-property" id="e.css.font-variant-caps" idref="e.css.font-variant-caps">
	<autocomplete append=": " />
	<reference>The <i>font-variant-caps</i> property controls the usage of alternate glyphs for capital letters.
	<b>Values:</b> normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-variant-caps">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-caps" idref="c.css.font-variant-caps">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="small-caps">
				<reference>All lowercase letters are converted to uppercase letters. However, the converted 
				uppercase letters appear in a smaller font size than the original uppercase letters in the 
				text.</reference>
			</element>
			<element pattern="all-small-caps">
				<reference>Enables display of small capitals for both upper and lowercase letters 
				(OpenType features: c2sc, smcp).</reference>
			</element>
			<element pattern="petite-caps">
				<reference>Enables display of petite capitals (OpenType feature: pcap).</reference>
			</element>
			<element pattern="all-petite-caps">
				<reference>Enables display of petite capitals for both upper and lowercase letters 
				(OpenType features: c2pc, pcap).</reference>
			</element>
			<element pattern="unicase">
				<reference>Enables display of mixture of small capitals for uppercase letters with 
				normal lowercase letters (OpenType feature: unic).</reference>
			</element>
			<element pattern="titling-caps">
				<reference>Enables display of titling capitals (OpenType feature: titl). Uppercase 
				letter glyphs are often designed for use with lowercase letters. When used in all 
				uppercase titling sequences they can appear too strong. Titling capitals are designed 
				specifically for this situation.</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-east-asian" highlight="css-property" id="e.css.font-variant-east-asian" idref="e.css.font-variant-east-asian">
	<autocomplete append=": " />
	<reference>Allows control of glyph substitution and sizing in East Asian text.
	<b>Values:</b> normal | [ &lt;<i>east-asian-variant-values</i>&gt; || &lt;<i>east-asian-width-values</i>&gt; || ruby ] | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-variant-east-asian">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-east-asian" idref="c.css.font-variant-east-asian">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="jis78">
				<reference>Enables rendering of JIS78 forms (OpenType feature: jp78).</reference>
			</element>
			<element pattern="jis83">
				<reference>Enables rendering of JIS83 forms (OpenType feature: jp83).</reference>
			</element>
			<element pattern="jis90">
				<reference>Enables rendering of JIS90 forms (OpenType feature: jp90).</reference>
			</element>
			<element pattern="jis04">
				<reference>Enables rendering of JIS2004 forms (OpenType feature: jp04).</reference>
			</element>
			<element pattern="simplified">
				<reference>Enables rendering of simplified forms (OpenType feature: smpl). 
				Allows control over the glyph forms for characters which have been simplified 
				over time but for which the older, traditional form is still used in some contexts.</reference>
			</element>
			<element pattern="traditional">
				<reference>Enables rendering of traditional forms (OpenType feature: trad). 
				Allows control over the glyph forms for characters which have been simplified over 
				time but for which the older, traditional form is still used in some contexts.</reference>
			</element>
			<element pattern="full-width">
				<reference>Enables rendering of full-width variants (OpenType feature: fwid).</reference>
			</element>
			<element pattern="proportional-width">
				<reference>Enables rendering of proportionally-spaced variants (OpenType feature: pwid)</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-emoji" highlight="css-property" id="e.css.font-variant-emoji" idref="e.css.font-variant-emoji">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all browsers.
	Allows control of glyph substitution and sizing in East Asian text.
	<b>Values:</b> auto | text | emoji | unicode 
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements and text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-fonts-4-20211221/#propdef-font-variant-emoji">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-emoji" idref="c.css.font-variant-emoji">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>User agents can choose to draw a Presentation Participating Code Point 
				in either emoji style or text style. User agents typically follow platform 
				conventions when performing this decision. </reference>
			</element>
			<element pattern="text">
				<reference>Code points are rendered as if U+FE0E VARIATION SELECTOR-15 was appended 
				to every Presentation Participating Code Point.</reference>
			</element>
			<element pattern="emoji">
				<reference>Code points are rendered as if U+FE0F VARIATION SELECTOR-16 was appended 
				to every Presentation Participating Code Point.</reference>
			</element>
			<element pattern="unicode">
				<reference>Code points are rendered in accordance with [UTS51] as either emoji-default, 
				text-default, or text-only, depending on the values of the Emoji and Emoji_Presentation 
				properties for each Presentation Participating Code Point. If present, FE0E VARIATION 
				SELECTOR-15 and U+FE0F VARIATION SELECTOR-16 will override the default presentation of 
				individual Presentation Participating Code Points. </reference>
			</element>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-ligatures" highlight="css-property" id="e.css.font-variant-ligatures" idref="e.css.font-variant-ligatures">
	<autocomplete append=": " />
	<reference>Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.
	<b>Values:</b> normal | none | [ &lt;<i>common-lig-values</i>&gt; || &lt;<i>discretionary-lig-values</i>&gt; || &lt;<i>historical-lig-values</i>&gt; || &lt;<i>contextual-alt-values</i>&gt; | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-variant-ligatures">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-ligatures" idref="c.css.font-variant-ligatures">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="none"/>
			<element pattern="common-ligatures">
				<reference>Enables display of common ligatures (OpenType features: liga, clig). For OpenType fonts, common ligatures are enabled by default.</reference>
			</element>
			<element pattern="no-common-ligatures">
				<reference>Disables display of common ligatures (OpenType features: liga, clig).</reference>
			</element>
			<element pattern="discretionary-ligatures">
				<reference>Enables display of discretionary ligatures (OpenType feature: dlig). Which ligatures are discretionary or optional is decided by the type designer, so authors will need to refer to the documentation of a given font to understand which ligatures are considered discretionary.</reference>
			</element>
			<element pattern="no-discretionary-ligatures">
				<reference>Disables display of discretionary ligatures (OpenType feature: dlig).</reference>
			</element>
			<element pattern="historical-ligatures">
				<reference>Enables display of historical ligatures (OpenType feature: hlig).</reference>
			</element>
			<element pattern="no-historical-ligatures">
				<reference>Disables display of historical ligatures (OpenType feature: hlig).</reference>
			</element>
			<element pattern="contextual">
				<reference>Enables display of contextual alternates (OpenType feature: calt). Although not strictly a ligature feature, like ligatures this feature is commonly used to harmonize the shapes of glyphs with the surrounding context. For OpenType fonts, this feature is on by default.</reference>
			</element>
			<element pattern="no-contextual">
				<reference>Disables display of contextual alternates (OpenType feature: calt).</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-numeric" highlight="css-property" id="e.css.font-variant-numeric" idref="e.css.font-variant-numeric">
	<autocomplete append=": " />
	<reference>Specifies control over numerical forms. Within normal paragraph text, proportional numbers are used while tabular numbers are used so that columns of numbers line up properly. 
	<b>Values:</b> normal | &lt;<i>numeric-figure-values</i>&gt; || &lt;<i>numeric-spacing-values</i>&gt; || &lt;<i>numeric-fraction-values</i>&gt; || ordinal || slashed-zero | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-variant-numeric">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-numeric" idref="c.css.font-variant-numeric">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="ordinal">
				<reference>Enables display of letter forms used with ordinal numbers (OpenType feature: ordn).</reference>
			</element>
			<element pattern="slashed-zero">
				<reference>Enables display of slashed zeros (OpenType feature: zero)..</reference>
			</element>
			<element pattern="lining-nums">
				<reference>Enables display of lining numerals (OpenType feature: lnum).</reference>
			</element>
			<element pattern="oldstyle-nums">
				<reference>Enables display of old-style numerals (OpenType feature: onum).</reference>
			</element>
			<element pattern="proportional-nums">
				<reference>Enables display of proportional numerals (OpenType feature: pnum).</reference>
			</element>
			<element pattern="tabular-nums">
				<reference>Enables display of tabular numerals (OpenType feature: tnum).</reference>
			</element>
			<element pattern="diagonal-fractions">
				<reference>Enables display of lining diagonal fractions (OpenType feature: frac).</reference>
			</element>
			<element pattern="stacked-fractions">
				<reference>Enables display of lining stacked fractions (OpenType feature: afrc).</reference>
			</element>
			<element pattern="jis78">
				<reference>Enables rendering of JIS78 forms (OpenType feature: jp78).</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-position" highlight="css-property" id="e.css.font-variant-position" idref="e.css.font-variant-position">
	<autocomplete append=": " />
	<reference>This property is used to enable typographic subscript and superscript glyphs. 
	These are alternate glyphs designed within the same em-box as default glyphs and are 
	intended to be laid out on the same baseline as the default glyphs, with no resizing 
	or repositioning of the baseline. They are explicitly designed to match the surrounding 
	text and to be more readable without affecting the line height. 
	<b>Values:</b> normal | sub | super | initial | inherit 
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-variant-position">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-position" idref="c.css.font-variant-position">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="sub">
				<reference>Enables display of subscript variants (OpenType feature: subs).</reference>
			</element>
			<element pattern="super">
				<reference>Enables display of superscript variants (OpenType feature: sups).</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-variant-settings" highlight="css-property" id="e.css.font-variant-settings" idref="e.css.font-variant-settings">
	<autocomplete append=": " />
	<reference>This property provides low-level control over OpenType or TrueType 
	font variations. It is intended as a way of providing access to font variations 
	that are not widely used but are needed for a particular use case. 
	<b>Values:</b> normal | [ &lt;<i>string</i>&gt; &lt;<i>number</i>&gt;]# | initial | inherit
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-fonts-4-20211221/#propdef-font-variation-settings">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-variant-settings" idref="c.css.font-variant-settings">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element idref="e.css.text" />
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="font-weight" highlight="css-property" id="e.css.font-weight" idref="e.css.font-weight">
	<autocomplete append=": " />
	<reference>The font-weight property sets how thick or thin characters in text should be displayed.
	<b>Values:</b> normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see text
	<b>Animatable:</b> as font weight
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-weight">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.font-weight" idref="c.css.font-weight">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal"/>
			<element pattern="bold"/>
			<element pattern="bolder"/>
			<element pattern="lighter"/>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.hundreds" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="gap" highlight="css-property" id="e.css.gap" idref="e.css.gap">
	<autocomplete append=": " />
	<reference>The <i>gap property</i> defines the size of the gap between the rows and between the columns in flexbox, grid or multi-column layout. It is a shorthand for the following properties:
    row-gap
    column-gap
	<b>Values:</b> normal | <i>row-gap</i> <i>column-gap</i> | initial | inherit
	<b>Initial:</b> normal normal
	<b>Applies to:</b>  	multi-column containers, flex containers, grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the content area 
	<b>Media:</b> visual
	<b>Computed value:</b> See individual values
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-align-3/#propdef-gap">www.w3.org</a></reference>
	<context idref="c.css.column-gap" />
</element>

<element pattern="grid" highlight="css-property" id="e.css.grid" idref="e.css.grid">
	<autocomplete append=": " />
	<reference>The <i>grid</i> property is a shorthand property for: grid-template-rows, 
	grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow
	<b>Values:</b> none | auto | row
	<b>Initial:</b> none none none auto auto row
	<b>Applies to:</b> grid layout
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid" idref="c.css.grid">
		<group highlight="css-value" >
			<autocomplete append=" " />
			<element pattern="none"/>
			<element pattern="auto"/>
			<element pattern="row"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>

		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-area" highlight="css-property" id="e.css.grid-area" idref="e.css.grid-area">
	<autocomplete append=": " />
	<reference>The grid-area property specifies a grid item's size and location in a 
	grid layout, and is a shorthand property for the following properties:
     grid-row-start
     grid-column-start
     grid-row-end
     grid-column-end
	The grid-area property can also be used to assign a name to a grid item. Named grid items can then 
	be referenced to by the grid-template-areas property of the grid container.	
	<b>Values:</b> &lt;<i>grid-row-start</i>&gt; / &lt;<i>grid-column-start</i>&gt; / &lt;<i>grid-row-end</i>&gt; / &lt;<i>grid-column-end</i>&gt; | itemname
	<b>Initial:</b> auto
	<b>Applies to:</b> grid items and absolutely-positioned boxes whose containing block is a grid container
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid-area">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-area" idref="c.css.grid-area">
		<group highlight="css-value" >
			<autocomplete append=" " />
			<element pattern="[A-Za-z0-9._-]+" is_regex="1" case_insens="1" highlight="css-value"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>

		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-auto-columns" highlight="css-property" id="e.css.grid-auto-columns" idref="e.css.grid-auto-columns">
	<autocomplete append=": " />
	<reference>The <i>grid-auto-columns</i> property sets a size for the columns in a 
	grid container. This property affects only columns with the size not set.
	<b>Values:</b> auto | max-content | min-content | <i>length (in % or measure)</i>;
	<b>Initial:</b> auto
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/#propdef-grid-auto-columns">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid.columnsize" idref="c.css.grid.columnsize">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element id="e.css.percent" pattern="[0-9]+\.?[0-9]*%" is_regex="1" highlight="css-value"/>
			<element idref="e.css.length"/>
			<element pattern="auto">
				<reference>Default value. The size of the columns is determined by the size of the container</reference>
			</element>
			<element pattern="max-content">
				<reference>Sets the size of each column depending on the largest item in the column</reference>
			</element>
			<element pattern="min-content">
				<reference>Sets the size of each column depending on the smallest item in the column</reference>
			</element>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>

		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-auto-flow" highlight="css-property" id="e.css.grid-auto-flow" idref="e.css.grid-auto-flow">
	<autocomplete append=": " />
	<reference>The <i>grid-auto-flow</i> property controls how auto-placed items get inserted in the grid.
	<b>Values:</b> row | column | dense | row dense | column dense 
	<b>Initial:</b> auto
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/#propdef-grid-auto-flow">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-auto-flow" idref="c.css.grid-auto-flow">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="row">
				<reference>Default value. Places items by filling each row</reference>
			</element>
			<element pattern="column">
				<reference>Places items by filling each column</reference>
			</element>
			<element pattern="dense">
				<reference>Place items to fill any holes in the grid</reference>
			</element>
			<element pattern="row dense">
				<reference>Places items by filling each row, and fill any holes in the grid</reference>
			</element>
			<element pattern="column dense">
				<reference>Places items by filling each column, and fill any holes in the grid</reference>
			</element>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>

		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-auto-rows" highlight="css-property" id="e.css.grid-auto-rows" idref="e.css.grid-auto-rows">
	<autocomplete append=": " />
	<reference>The <i>grid-auto-rows</i> property sets a size for the rows in a grid container.
	<b>Values:</b> auto | max-content | min-content | length (in % or units) 
	<b>Initial:</b> auto
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/#propdef-grid-auto-rows">www.w3.org</a></reference>
	<context idref="c.css.grid.columnsize"/>
</element>

<element pattern="grid-column" highlight="css-property" id="e.css.grid-column" idref="e.css.grid-column">
	<autocomplete append=": " />
	<reference>The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:
	    grid-column-start
   	 grid-column-end
	<b>Values:</b> auto | &lt;<i>grid-column-start</i>&gt; | &lt;<i>grid-column-end</i>&gt;
	<b>Initial:</b> auto / auto
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/#propdef-grid-column">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-column" idref="c.css.grid-column">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="[0-9] \/ [0-9]" is_regex="1" highlight="css-value">
				<reference>The first value specifies on which column to start displaying the item. The second value specifies on which column to stop displaying the item, or how many rows to span. Numbers are separated by &quot;/&quot;.</reference>
			</element>
			<element pattern="auto">
				<reference>Default value. The item will be placed following the flow</reference>
			</element>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-column-end" highlight="css-property" id="e.css.grid-column-end" idref="e.css.grid-column-end">
	<autocomplete append=": " />
	<reference>The grid-column-end property defines how many columns an item will span, or on which column-line the item will end (see example at the end of this page).
	<b>Values:</b> auto | span <i>n</i> | <i>column-line</i>
	<b>Initial:</b> auto
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid-column-end">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-column-end" idref="c.css.grid-column-end">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="auto">
				<reference>Default value. The item will span one column</reference>
			</element>
			<element pattern="(span [0-9])"  is_regex="1" case_insens="1">
				<reference>span <i>n</i> - Specifies the number of columns the item will span</reference>
			</element>
			<element pattern="([0-9])"  is_regex="1">
				<reference>Specifies on which column to end the display of the item</reference>
			</element>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-column-gap" highlight="css-property" id="e.css.grid-column-gap" idref="e.css.grid-column-gap">
	<autocomplete append=": " />
	<reference>The grid-column-gap property defines the size of the gap between the columns in a grid layout.
	<b>Values:</b> normal | <i>length</i> | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Note:</b> This property was renamed to <i>column-gap</i> in CSS3. 
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/css-align-3/#propdef-column-gap">www.w3.org</a>
	</reference>
	<context idref="c.css.column-gap" />
</element>

<element pattern="grid-column-start" highlight="css-property" id="e.css.grid-column-start" idref="e.css.grid-column-start">
	<autocomplete append=": " />
	<reference>The grid-column-start property defines on which column-line the item will start.
	<b>Values:</b> auto | span <i>n</i> | <i>column-line</i>
	<b>Initial:</b> auto
	<b>Applies to:</b> grid items and absolutely-positioned boxes whose containing block is a grid container
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/css-grid-1/#line-placement">www.w3.org</a>
	</reference>
	<context idref="c.css.grid-column-end" />
</element>

<element pattern="grid-row" highlight="css-property" id="e.css.grid-row" idref="e.css.grid-row">
	<autocomplete append=": " />
	<reference>The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:
    grid-row-start
    grid-row-end
	<b>Values:</b> <i>grid-line-start</i> [/ <i>grid-line-end</i>]
	<b>Initial:</b> auto / auto
	<b>Applies to:</b> grid items and absolutely-positioned boxes whose containing block is a grid container
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/#propdef-grid-row">www.w3.org</a>
	</reference>
	<context idref="c.css.grid-column" />
</element>

<element pattern="grid-row-end" highlight="css-property" id="e.css.grid-row-end" idref="e.css.grid-row-end">
	<autocomplete append=": " />
	<reference>The grid-row-end property defines how many rows an item will span, or on which row-line the item will end.
	<b>Values:</b> auto | <i>row-line</i> | span <i>n</i>
	<b>Initial:</b> auto
	<b>Applies to:</b> grid items and absolutely-positioned boxes whose containing block is a grid container
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword, identifier, and/or integer 
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid-row-end">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-row-end" idref="c.css.grid-row-end">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="auto">
				<reference>Default value. The item will be placed following the flow</reference>
			</element>
			<element pattern="[0-9]+\.?[0-9]*" is_regex="1" highlight="css-value">
				<reference>Specifies on which row to start or end the display of the item</reference>
			</element>
			<element pattern="span [0-9]+\.?[0-9]*" is_regex="1" highlight="css-value">
				<reference>Specifies the number of rows the item will span</reference>
			</element>
<!--			<element id="e.css.length" pattern="[0-9]+\.?[0-9]*(em|ex|in|cm|mm|pt|pc|px|ch)" is_regex="1" highlight="css-value">
				<reference>Any legal length value, like px or %. 0 is the default value</reference>
			</element> -->
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-row-start" highlight="css-property" id="e.css.grid-row-start" idref="e.css.grid-row-start">
	<autocomplete append=": " />
	<reference>The grid-row-start property defines on which row-line the item will start..
	<b>Values:</b> auto | <i>row-line</i> | span <i>n</i>
	<b>Initial:</b> auto
	<b>Applies to:</b> grid items and absolutely-positioned boxes whose containing block is a grid container
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword, identifier, and/or integer 
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/css-grid-1/#placement-shorthands">www.w3.org</a>
	</reference>
	<context idref="c.css.grid-row-end" />
</element>

<element pattern="grid-template" highlight="css-property" id="e.css.grid-template" idref="e.css.grid-template">
	<autocomplete append=": " />
	<reference>The <i>grid-template</i> property is a shorthand property for the following properties:
		<i>grid-template-rows</i>
		<i>grid-template-columns</i>
		<i>grid-template-areas</i>
	<b>Values:</b> none | <i>grid-template-rows</i> / <i>grid-template-columns</i> | <i>grid-template-areas</i> | inherit | initial
	<b>Initial:</b> none none none
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> see individual properties
	<b>Percentages:</b> see individual properties
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> see individual properties
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid-template">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-template" idref="c.css.grid-template">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="none">
				<reference>Default value. No specific sizing of the columns or rows</reference>
			</element>
			<element pattern="auto">
				<reference>Values are set automatically</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
			<element idref="e.css.length"/>
			<group highlight="css-value" >
				<autocomplete append=" " />
				<element pattern="([a-z0-9])" highlight="css-value" is_regex="1" case_insens="1"/>
			</group>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-template-areas" highlight="css-property" id="e.css.grid-template-areas" idref="e.css.grid-template-areas">
	<autocomplete append=": " />
	<reference>The <i>grid-template-areas</i> property specifies areas within the grid layout. 
	You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property. 
	Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.
	<b>Values:</b> none | <i>item-names</i>
	<b>Initial:</b> none
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i> or a list of string values 
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/css-grid-1/#grid-template-areas-property">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-template-areas" idref="c.css.grid-template-areas">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="none">
				<reference>Default value. No named grid areas</reference>
			</element>
			<group highlight="css-value" >
				<autocomplete append=" " />
				<element idref="e.css.text"/>
			</group>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-template-columns" highlight="css-property" id="e.css.grid-template-columns" idref="e.css.grid-template-columns">
	<autocomplete append=": " />
	<reference>The grid-template-columns property specifies the number (and the widths) of columns in a grid layout.
	The values are a space separated list, where each value specifies the size of the respective column.
	<b>Values:</b> none | auto | max-content | min-content | <i>length</i> | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the content area 
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i> or a computed track list
	<b>Animatable:</b> yes
	<b>Animation type:</b> if the list lengths match, by computed value type per item in the computed track list; discrete otherwise 
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid-template-columns">www.w3.org</a>
	</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.grid-template-columns" idref="c.css.grid-template-columns">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
			<group highlight="css-value" >
				<autocomplete append=" " />
				<element idref="e.css.length">
					<reference>Any legal length value, like px or %. 0 is the default value</reference>
				</element>				
				<element pattern="none">
					<reference>Default value. Columns/Rows are created if needed</reference>
				</element>
				<element pattern="auto">
					<reference>The size of the columns/rows is determined by the size of the container and by the size of the content of the items in the column</reference>
			</element>
				<element pattern="max-content">
					<reference>Sets the size of each column/row to depend on the largest item in the column/row</reference>
			</element>
				<element pattern="min-content">
					<reference>Sets the size of each column/row to depend on the smallest item in the column/row</reference>
			</element>
			</group>
		</group>
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="grid-template-rows" highlight="css-property" id="e.css.grid-template-rows" idref="e.css.grid-template-rows">
	<autocomplete append=": " />
	<reference>The <i>grid-template-rows</i> property specifies the number (and the heights) of the rows in a grid layout.
	The values are a space-separated list, where each value specifies the height of the respective row.
	<b>Values:</b> none | auto | max-content | min-content | &lt;<i>length</i>&gt; | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the content area 
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i> or a computed track list
	<b>Animatable:</b> yes
	<b>Animation type:</b> if the list lengths match, by computed value type per item in the computed track list; discrete otherwise 
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
		href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/#propdef-grid-template-rows">www.w3.org</a>
	</reference>
	<context idref="c.css.grid-template-columns" />
</element>

<element pattern="hanging-punctuation" highlight="css-property" id="e.css.hanging-punctuation" idref="e.css.hanging-punctuation">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property is currently only supported by Safari 10 and newer.
	The <i>hanging-punctuation</i> property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.
	<b>Values:</b> none | first | last | allow-end | force-end | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword(s)
	<b>Animatable:</b> yes
	<b>Canonical Order:</b> per grammar
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-hanging-punctuation">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.hanging-punctuation" idref="c.css.hanging-punctuation">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none" >
				<reference>No punctuation mark may be placed outside the line box at the start or at the end of a full line of text</reference>
			</element>
			<element pattern="first" >
				<reference>Punctuation may hang outside the start edge of the first line</reference>
			</element>
			<element pattern="last" >
				<reference>Punctuation may hang outside the end edge of the first line</reference>
			</element>
			<element pattern="allow-end" >
				<reference>Punctuation may hang outside the end edge of all lines if the punctuation does not otherwise fit prior to justification</reference>
			</element>
			<element pattern="force-end" >
				<reference>Punctuation may hang outside the end edge of all lines. If justification is enabled on this line, then it will force the punctuation to hang</reference>
			</element>
			<element idref="e.css.initial"/>
			<element idref="e.css.inherit"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="height" highlight="css-property" id="e.css.height" idref="e.css.height">
	<autocomplete append=": " />
	<reference>	The <i>height</i> property sets the height of an element.
	The height of an element does not include padding, borders, or margins!
	If <i>height: auto;</i> the element will automatically adjust its height 
	to allow its content to be displayed correctly.
	If <i>height</i> is set to a <i>numeric value</i> (like pixels, (r)em, 
	percentages etc.) then if the content does not fit within the specified 
	height, it will overflow. How the container will handle the overflowing 
	content is defined by the overflow property.
	<b>Note:</b> The min-height and max-height properties override the <i>height</i> 
		property.
	<b>Values:</b> &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | min-content | 
	max-content | auto | fit-content(&lt;<i>length-percentage</i>&gt;) | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements but non-replaced inline elements
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, with &lt;<i>length-percentage</i>&gt; values computed
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#propdef-height">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.height" idref="c.css.height">
		<group highlight="css-value">
			<element pattern="auto" >
				<reference>	The browser calculates the height. This is default</reference>
			</element>
			<element pattern="min-content" >
				<reference>	for a box’s block size, unless otherwise specified, this is equivalent to its automatic size</reference>
			</element>
			<element pattern="max-content" >
				<reference>	for a box’s block size, unless otherwise specified, this is equivalent to its automatic size</reference>
			</element>
		</group>
		<element idref="e.css.percent"/>
		<element idref="e.css.length"/>
		<element pattern="fit-content" id="e.css.fit-content" idref="e.css.fit-content" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>fit-content(&lt;<i>length-percentage</i>&gt;)
    Use the <i>fit-content</i> formula with the available space replaced by the 
    specified argument, i.e. min(<i>max-content</i>, max(<i>min-content</i>, &lt;<i>length-percentage</i>&gt;)), where the &lt;<i>length-percentage</i>&gt; argument is resolved exactly as for &lt;<i>length-percentage</i>&gt; values standing alone.
<b>Note:</b> Negative &lt;<i>length-percentage</i>&gt; values are invalid.
</reference>
			<context idref="c.css.genericroundbraces" />
		</element>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="hyphens" highlight="css-property" id="e.css.hyphens" idref="e.css.hyphens">
	<autocomplete append=": " />
	<reference>	The <i>hyphens</i> property defines whether hyphenation is allowed to create 
	more soft wrap opportunities within a line of text.
	<b>Note:</b> IE/Edge requires &quot;-ms-&quot; and Safari requires &quot;-webkit-&quot; as prefix,
	i.e. <i>-ms-hyphens</i> or <i>-webkit-hyphens</i> respectively
	<b>Values:</b> none | manual | auto | inherit | initial
	<b>Initial:</b> manual
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-hyphens">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.hyphens" idref="c.css.hyphens">
		<group highlight="css-value">
			<autocomplete append="; " />
			<element pattern=" auto" >
				<reference>Words are hyphenated where the algorithm is deciding (if needed)</reference>
			</element>
			<element pattern="none" >
				<reference>	Words are not hyphenated</reference>
			</element>
			<element pattern="manual" >
				<reference>Default. Words are only hyphenated at &amp;hyphen; or &amp;shy; (if needed)</reference>
			</element>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="image-rendering" highlight="css-property" id="e.css.image-rendering" idref="e.css.image-rendering">
	<autocomplete append=": " />
	<reference>	The <i>image-rendering</i> property specifies the type of algorithm to be used for image scaling.
	<b>Note:</b> This property has no effect on images that are not scaled.
	<b>Values:</b> auto | smooth | high-quality | crisp-edges | pixelated | inherit | initial
		<b>Note:</b> Chrome, Edge, Opera, and Safari uses an alternate name for the <i>crisp-edges</i> value: <i>-webkit-optimize-contrast</i>.
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-images-3-20201217/#propdef-image-rendering">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.image-rendering" idref="c.css.image-rendering">
		<group highlight="css-value">
			<autocomplete append="; " />
			<element pattern=" auto" >
				<reference>Let the browser choose the scaling algorithm. This is default</reference>
			</element>
			<element pattern="smooth" >
				<reference>Use an algorithm that smooth out the colors in the image</reference>
			</element>
			<element pattern="high-quality" >
				<reference>Same as smooth, but with a preference for higher-quality scaling</reference>
			</element>
			<element pattern="crisp-edges" >
				<reference>Use an algorithm that will preserve the contrast and edges in the image</reference>
			</element>
			<element pattern="pixelated" >
				<reference>	If the image is scaled up, the nearest-neighbor algorithm is used, 
				so the image will appear as being composed of large pixels. If the image is 
				scaled down, it will be the same as auto</reference>
			</element>
			<element pattern="-webkit-optimize-contrast" >
				<reference>Use an algorithm that will preserve the contrast and edges in the image</reference>
			</element>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="inline-size" highlight="css-property" id="e.css.inline-size" idref="e.css.inline-size">
	<autocomplete append=": " />
	<reference>	The <i>inline-size</i> property specifies the size of an element in the inline direction.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines inline direction, and this affects 
	the result of the <i>inline-size</i> property. For pages in English, inline direction is left to right 
	and block direction is downward.
	The CSS <i>inline-size</i> and <i>block-size properties</i> are very similar to CSS properties <i>width</i> 
	and <i>height</i>, but the <i>inline-size</i> and <i>block-size</i> properties are dependent on inline and 
	block directions. 
	<b>Values:</b> auto | <i>value</i> | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements but non-replaced inline elements, table rows, and row groups
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-inline-size">www.w3.org</a></reference>
	<context idref="c.css.block-size" />
</element>

<element pattern="inset" highlight="css-property" id="e.css.inset" idref="e.css.inset">
	<autocomplete append=": " />
	<reference>	The <i>inset</i> property sets the distance between an element and the parent element.
	<b>Note:</b> For this property to take effect it has to have the position property specified.
	The inset property is a shorthand property for the following properties:
		top
		bottom
		left
		right
	Values for the inset property can be set in different ways:
	If the <i>inset</i> property has four values:
		inset: 15px 30px 60px 90px;
			top distance is 15px
			right distance is 30px
			bottom distance is 60px
			left distance is 90px
	If the <i>inset</i> property has <b>three</b> values:
		inset: 15px 30px 60px;
			top distance is 15px
			left and right distances are 30px
			bottom distance is 60px
	If the <i>inset</i> property has <b>two</b> values:
		inset: 15px 30px;
			top and bottom distances are 15px
			left and right distances are 30px
	If the <i>inset</i> property has <b>one</b> value:
		inset: 10px;
			all four distances are 10px
	<b>Values:</b> auto | <i>value</i> | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> see individual properties
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-inset">www.w3.org</a></reference>
	<context idref="c.css.block-size" />
</element>

<element pattern="inset-block" highlight="css-property" id="e.css.inset-block" idref="e.css.inset-block">
	<autocomplete append=": " />
	<reference>	The <i>inset-block</i> property sets the distance between an element and the parent 
	element in the block direction.
	<b>Note:</b> For this property to take effect it has to have the <i>position</i> property specified.
	The <i>inset-block</i> property is a shorthand property for the following properties:
		inset-block-start
		inset-block-end
	Values for the inset-block property can be set in different ways:
	If the <i>inset-block</i> property has two values:
		inset-block: 10px 50px;
			distance at start is 10px
			distance at end is 50px
	If the inset-block property has one value:
		inset-block: 10px;
			distance at start and end is 10px
	The CSS <i>inset-block</i> and <i>inset-inline</i> properties are very similar to CSS properties <i>top</i>, 
	<i>bottom</i>, <i>left</i> and <i>right</i>, but the <i>inset-block</i> and <i>inset-inline</i> properties 
	are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where 
	the start and end of a block is and the result of the inset-block property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Values:</b> auto | <i>value</i> | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> see individual properties
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-inset-block">www.w3.org</a></reference>
	<context idref="c.css.block-size" />
</element>

<element pattern="inset-block-end" highlight="css-property" id="e.css.inset-block-end" idref="e.css.inset-block-end">
	<autocomplete append=": " />
	<reference>	The <i>inset-block-end</i> property sets the distance between the end of an element 
	and the parent element in the block direction.
	<b>Note:</b> For this property to take effect it has to have the <i>position</i> property specified.
	The CSS <i>inset-block</i> and <i>inset-inline</i> properties are very similar to CSS properties <i>top</i>, 
	<i>bottom</i>, <i>left</i> and <i>right</i>, but the <i>inset-block</i> and <i>inset-inline</i> properties 
	are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <b>writing-mode</b> defines block direction. This affects where the start 
	and end of a block is and the result of the <b>inset-block-end</b> property. For pages in English, block direction 
	is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-inset-block-end">www.w3.org</a></reference>
	<context idref="c.css.bottom" />
</element>

<element pattern="inset-block-start" highlight="css-property" id="e.css.inset-block-start" idref="e.css.inset-block-start">
	<autocomplete append=": " />
	<reference>	The <i>inset-block-start</i> property sets the distance between the start of an element 
	and the parent element in the block direction.
	<b>Note:</b> For this property to take effect it has to have the <i>position</i> property specified.
	The CSS <i>inset-block</i> and <i>inset-inline</i> properties are very similar to CSS properties <i>top</i>, 
	<i>bottom</i>, <i>left</i> and <i>right</i>, but the <i>inset-block</i> and <i>inset-inline</i> properties 
	are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <b>writing-mode</b> defines block direction. This affects where the start 
	and end of a block is and the result of the <b>inset-block-start</b> property. For pages in English, block direction 
	is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-inset-block-start">www.w3.org</a></reference>
	<context idref="c.css.bottom" />
</element>

<element pattern="inset-inline" highlight="css-property" id="e.css.inset-inline" idref="e.css.inset-inline">
	<autocomplete append=": " />
	<reference>	The <i>inset-inline</i> property sets the distance between an element and the parent 
	element in the block direction.
	<b>Note:</b> For this property to take effect it has to have the <i>position</i> property specified.
	The <i>inset-inline</i> property is a shorthand property for the following properties:
		inset-inline-start
		inset-inline-end
	Values for the inset-inline property can be set in different ways:
	If the <i>inset-inline</i> property has two values:
		inset-inline: 10px 50px;
			distance at start is 10px
			distance at end is 50px
	If the inset-inline property has one value:
		inset-inline: 10px;
			distance at start and end is 10px
	The CSS <i>inset-block</i> and <i>inset-inline</i> properties are very similar to CSS properties <i>top</i>, 
	<i>bottom</i>, <i>left</i> and <i>right</i>, but the <i>inset-block</i> and <i>inset-inline</i> properties 
	are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> and <i>direction</i> define inline direction. 
	This affects where the start and end of a line is and the result of the <i>inset-inline</i> property. For 
	pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> auto | <i>value</i> | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> see individual properties
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-inset-inline">www.w3.org</a></reference>
	<context idref="c.css.block-size" />
</element>

<element pattern="inset-inline-end" highlight="css-property" id="e.css.inset-inline-end" idref="e.css.inset-inline-end">
	<autocomplete append=": " />
	<reference>	The <i>inset-inline-end</i> property sets the distance between the end of an element 
	and the parent element in the inline direction.
	<b>Note:</b> For this property to take effect it has to have the <i>position</i> property specified.
	The CSS <i>inset-block</i> and <i>inset-inline</i> properties are very similar to CSS properties <i>top</i>, 
	<i>bottom</i>, <i>left</i> and <i>right</i>, but the <i>inset-block</i> and <i>inset-inline</i> properties 
	are dependent on block and inline directions.
	<b>Note:</b> The related CSS properties <i>writing-mode</i> and <i>direction</i> define inline direction. This 
	affects where the end of an element is in the inline direction and the result of the <i>inset-inline-end</i> property. 
	For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-inset-inline-end">www.w3.org</a></reference>
	<context idref="c.css.bottom" />
</element>

<element pattern="inset-inline-start" highlight="css-property" id="e.css.inset-inline-start" idref="e.css.inset-inline-start">
	<autocomplete append=": " />
	<reference>	The <i>inset-inline-start</i> property sets the distance between the start of an element 
	and the parent element in the inline direction.
	<b>Note:</b> For this property to take effect it has to have the <i>position</i> property specified.
	The CSS <i>inset-block</i> and <i>inset-inline</i> properties are very similar to CSS properties <i>top</i>, 
	<i>bottom</i>, <i>left</i> and <i>right</i>, but the <i>inset-block</i> and <i>inset-inline</i> properties 
	are dependent on block and inline directions.
	<b>Note:</b> The related CSS properties <i>writing-mode</i> and <i>direction</i> define inline direction. This 
	affects where the start of an element is in the inline direction and the result of the <i>inset-inline-end</i> property. 
	For pages in English, inline direction is left to right and block direction is downward.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-inset-inline-start">www.w3.org</a></reference>
	<context idref="c.css.bottom" />
</element>

<element pattern="isolation" highlight="css-property" id="e.css.isolation" idref="e.css.isolation">
	<autocomplete append=": " />
	<reference>	The <i>isolation</i> property defines whether an element must create a new stacking content.
	<b>Note:</b> The isolation property is helpful when used with <i>background-blend-mode</i> or <i>mix-blend-mode</i>.
	<b>Values:</b> isolate | auto | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements.
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/CR-compositing-1-20150113/#propdef-isolation">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.isolation" idref="c.css.isolation">
		<group highlight="css-value">
			<autocomplete append="; " />
			<element pattern=" auto" >
				<reference>Default. A new stacking context is created only if one of the properties 
				applied to the element requires it</reference>
			</element>
			<element pattern="isolate" >
				<reference>	A new stacking context must be created</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="justify-content" highlight="css-property" id="e.css.justify-content" idref="e.css.justify-content">
	<autocomplete append=": " />
	<reference>	The <i>justify-content</i> property aligns the flexible container's items when the items 
	do not use all available space on the main-axis (horizontally).
	<b>Tip:</b> Use the align-items property to align the items vertically.
	<b>Note:</b> The <i>justify-content</i> property can also be used on a grid container to align grid 
	items in the inline direction. For pages in English, inline direction is left to right and block 
	direction is downward.
	<b>Values:</b> flex-start | flex-end | center | space-between | space-around | space-evenly | inherit | initial
	<b>Initial:</b> flex-start
	<b>Applies to:</b> flex-containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-flexbox-1-20181119/#propdef-justify-content">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.justify-content" idref="c.css.justify-content">
		<group highlight="css-value">
			<autocomplete append="; " />
			<element pattern="flex-start" >
				<reference>Default value. Items are positioned at the beginning of the container</reference>
			</element>
			<element pattern="flex-end" >
				<reference>Items are positioned at the end of the container</reference>
			</element>
			<element pattern="center" >
				<reference>Items are positioned in the center of the container</reference>
			</element>
			<element pattern="space-between" >
				<reference>Items will have space between them</reference>
			</element>
			<element pattern="space-around" >
				<reference>Items will have space before, between, and after them</reference>
			</element>
			<element pattern="space-evenly" >
				<reference>Items will have equal space around them</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="justify-items" highlight="css-property" id="e.css.justify-items" idref="e.css.justify-items">
	<autocomplete append=": " />
	<reference>	The <i>justify-items</i> property is set on the grid container to give child elements (grid items) 
	alignment in the inline direction.
	For pages in English, inline direction is left to right and block direction is downward.
	For this property to have any alignment effect, the grid items need available space around themselves in the 
	inline direction.
	<b>Tip:</b> To align grid items in block direction instead of inline direction, use align-items property.
	<b>Values:</b> normal | stretch | &lt;<i>baseline-position</i>&gt; | &lt;<i>overflow-position</i>&gt;? [ &lt;<i>self-position</i>&gt; | left | right ] | legacy | legacy &amp;&amp; [ left | right | center ] 
	&lt;<i>baseline-position</i>&gt;-values are: first-baseline | last-baseline
	&lt;<i>overflow-position</i>&gt;?-values are: unsafe | safe
	&lt;<i>self-position</i>&gt;-values are: center | start | end | flex-start | flex-end
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword(s), except for <i>legacy</i>
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-align-3-20211224/#propdef-justify-items">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.justify-items" idref="c.css.justify-items">
		<group highlight="css-value">
			<autocomplete append="; " />
			<element pattern="legacy" >
				<reference>Default value. Grid items with justify-self value 'auto' only inherits 
				grid container justify-items property value if it starts with 'legacy'. It exists 
				to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute.</reference>
			</element>
			<element pattern="legacy left" >
				<reference>This value is passed to descendants to inherit. But if the descendant declares 
				<i>justify-self</i>: auto; then legacy is ignored but still respects the directional keyword. 
				The value computes to the inherited value if no directional keyword is provided. Otherwise, 
				it it computes to normal.</reference>
			</element>
			<element pattern="legacy right" >
				<reference>This value is passed to descendants to inherit. But if the descendant declares 
				<i>justify-self</i>: auto; then legacy is ignored but still respects the directional keyword. 
				The value computes to the inherited value if no directional keyword is provided. Otherwise, 
				it it computes to normal.</reference>
			</element>
			<element pattern="legacy center" >
				<reference>This value is passed to descendants to inherit. But if the descendant declares 
				<i>justify-self</i>: auto; then legacy is ignored but still respects the directional keyword. 
				The value computes to the inherited value if no directional keyword is provided. Otherwise, 
				it it computes to normal.</reference>
			</element>
			<element pattern="normal" >
				<reference>Dependant on layout context, but similar to 'stretch' for grid layout</reference>
			</element>
			<element pattern="stretch" >
				<reference>Stretches to fill the grid cell if inline-size (width) is not set.</reference>
			</element>
			<element pattern="safe" >
				<reference>Sets alignment of the item to 'start' if the content overflows</reference>
			</element>
			<element pattern="unsafe" >
				<reference>Keeps the alignment value regardless of wether or not the item content overflows</reference>
			</element>
			<element pattern="baseline" >
				<reference>Computes to first baseline</reference>
			</element>
			<element pattern="first baseline" >
				<reference>Specifies participation in first-baseline alignment: aligns the alignment baseline 
				of the box’s first baseline set with the corresponding baseline of its baseline-sharing group.</reference>
			</element>
			<element pattern="last baseline" >
				<reference>	aligns the alignment baseline of the box’s last baseline set with the corresponding 
				baseline of its baseline-sharing group.̣</reference>
			</element>
			<element pattern="left" >
				<reference>Align items to the left</reference>
			</element>
			<element pattern="right" >
				<reference>Align items to the right</reference>
			</element>
			<element pattern="center" >
				<reference>Align items to the center</reference>
			</element>
			<element pattern="flex-end" >
				<reference>Only used in flex layout. Aligns the alignment subject to be flush with the edge of the 
				alignment container corresponding to the flex container’s main-end or cross-end side, as 
				appropriate. </reference>
			</element>
			<element pattern="end" >
				<reference>Align items at the end in the inline direction</reference>
			</element>
			<element pattern="flex-start" >
				<reference>Only used in flex layout. Aligns the alignment subject to be flush with the edge of the 
				alignment container corresponding to the flex container’s main-start or cross-start side, as 
				appropriate. </reference>
			</element>
			<element pattern="start" >
				<reference>Align items at the start in the inline direction</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="justify-self" highlight="css-property" id="e.css.justify-self" idref="e.css.justify-self">
	<autocomplete append=": " />
	<reference>	The <i>justify-self</i> property aligns a grid item within its grid cell in the inline direction.
	For pages in English, inline direction is left to right and block direction is downward.
	For this property to have any alignment effect, the grid item need available space around itself in 
	the inline direction.
	<b>Tip:</b> To align a grid item in block direction instead of inline direction, use <i>align-self</i> or 
	<i>align-items</i> properties.
	<b>Values:</b> auto | normal | stretch | &lt;<i>baseline-position</i>&gt; | &lt;<i>overflow-position</i>&gt; [ &lt;<i>self-position</i>&gt; | left | right ]  
	&lt;<i>baseline-position</i>&gt;-values are: first-baseline | last-baseline
	&lt;<i>overflow-position</i>&gt;-values are: unsafe | safe
	&lt;<i>self-position</i>&gt;-values are: center | start | end | flex-start | flex-end
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level boxes, absolutely-positioned boxes, and grid items
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keywords
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-align-3-20211224/#propdef-justify-self">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.justify-self" idref="c.css.justify-self">
		<group highlight="css-value">
			<autocomplete append="; " />
			<element pattern="auto" >
				<reference>Default value. Grid container justify-self property value is inherited.</reference>
			</element>
			<element pattern="normal" >
				<reference>Dependant on layout context, but similar to 'stretch' for grid layout for grid items 
				when size is not set. If size is set, the property value behaves lik 'start'.</reference>
			</element>
			<element pattern="stretch" >
				<reference>Stretches to fill the grid cell if inline-size (width) is not set.</reference>
			</element>
			<element pattern="safe" >
				<reference>Sets alignment of the item to 'start' if the content overflows</reference>
			</element>
			<element pattern="unsafe" >
				<reference>Keeps the alignment value regardless of wether or not the item content overflows</reference>
			</element>
			<element pattern="baseline" >
				<reference>Computes to first baseline</reference>
			</element>
			<element pattern="first baseline" >
				<reference>Specifies participation in first-baseline alignment: aligns the alignment baseline 
				of the box’s first baseline set with the corresponding baseline of its baseline-sharing group.</reference>
			</element>
			<element pattern="last baseline" >
				<reference>	aligns the alignment baseline of the box’s last baseline set with the corresponding 
				baseline of its baseline-sharing group.̣</reference>
			</element>
			<element pattern="left" >
				<reference>Align items to the left</reference>
			</element>
			<element pattern="right" >
				<reference>Align items to the right</reference>
			</element>
			<element pattern="center" >
				<reference>Align items to the center</reference>
			</element>
			<element pattern="flex-end" >
				<reference>Only used in flex layout. Aligns the alignment subject to be flush with the edge of the 
				alignment container corresponding to the flex container’s main-end or cross-end side, as 
				appropriate. </reference>
			</element>
			<element pattern="end" >
				<reference>Align items at the end in the inline direction</reference>
			</element>
			<element pattern="flex-start" >
				<reference>Only used in flex layout. Aligns the alignment subject to be flush with the edge of the 
				alignment container corresponding to the flex container’s main-start or cross-start side, as 
				appropriate. </reference>
			</element>
			<element pattern="start" >
				<reference>Align items at the start in the inline direction</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="left" highlight="css-property" id="e.css.left" idref="e.css.left">
	<autocomplete append=": " />
	<reference>The left property affects the horizontal position of a positioned element. This property 
	has no effect on non-positioned elements.
    If <i>position: absolute;</i> or <i>position: fixed;</i> - the left property sets the left edge of an element to 
    a unit to the left of the left edge of its nearest positioned ancestor.
    If <i>position: relative;</i> - the left property sets the left edge of an element to a unit to the left/right 
    of its normal position.
    If <i>position: sticky;</i> - the left property behaves like its position is relative when the element is 
    inside the viewport, and like its position is fixed when it is outside.
    If <i>position: static;</i> - the left property has no effect.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#propdef-left">www.w3.org</a></reference>
	<context idref="c.css.bottom" />
</element>

<element pattern="letter-spacing" highlight="css-property" id="e.css.letter-spacing" idref="e.css.letter-spacing">
	<autocomplete append=": " />
	<reference>The letter-spacing property increases or decreases the space between characters in a text.
	<b>Values:</b> normal | &lt;<i>length</i>&gt; | inherit | initial
	&lt;<i>length</i>&gt;: Defines a length that is used as the space between characters (negative values 
		are also allowed).
	<b>Initial:</b> normal
	<b>Applies to:</b> inline boxes and text
	<b>Inherited:</b> yes
	<b>Percentages:</b> relative to computed font-size, i.e. 1em
	<b>Media:</b> visual
	<b>Computed value:</b> an absolute length and/or a percentage 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value 
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-letter-spacing">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.letter-spacing" idref="c.css.letter-spacing">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="normal"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
		<element pattern="0"/>
	</group>
	<element idref="e.css.length.neg" />
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="line-height" highlight="css-property" id="e.css.line-height" idref="e.css.line-height">
	<autocomplete append=": " />
	<reference>This property specifies the box’s preferred line height, which is used in calculating its 
	&quot;layout bounds&quot;, i.e. its contribution to the logical height of its line box.
	<b>Note:</b> Negative values are not allowed.
	<b>Values:</b> normal | &lt;<i>number</i>&gt; | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> non-replaced inline boxes and SVG text content elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> computed relative to 1em
	<b>Media:</b> visual
	<b>Computed value:</b> the specified keyword, a number, or a computed &lt;<i>length</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-inline-3-20221114/#propdef-line-height">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.line-height" idref="c.css.line-height">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="normal"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element pattern="[0-9]+\.?[0-9]*" is_regex="1" highlight="css-value"/>
	<element idref="e.css.length"/>
	<element idref="e.css.percent"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="list-style" highlight="css-property" id="e.css.list-style" idref="e.css.list-style">
	<autocomplete append=": " />
	<reference>The list-style property is a shorthand for the following properties:
		list-style-type
		list-style-position
		list-style-image
	If one of the values are missing, the default value for that property will be used.
	<b>Values:</b>  	&lt;<i>list-style-position</i>&gt; || &lt;<i>list-style-image</i>&gt; || &lt;<i>list-style-type</i>&gt; | inherit | initial
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> list items
	<b>Inherited:</b> see individual properties
	<b>Percentages:</b> see individual properties
	<b>Media:</b> see individual properties
	<b>Computed value:</b> see individual properties
	<b>Canonical order:</b> per grammar
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-list-style">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;()" id="c.css.list-style" idref="c.css.list-style">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="arabic-indic"/>
		<element pattern="armenian"/>
		<element pattern="bengali"/>
		<element pattern="cambodian"/>
		<element pattern="circle"/>
		<element pattern="cjk-decimal"/>
		<element pattern="cjk-earthly-branch"/>
		<element pattern="cjk-heavenly-stem"/>
		<element pattern="cjk-ideographic"/>
		<element pattern="decimal"/>
		<element pattern="decimal-leading-zero"/>
		<element pattern="devanagri"/>
		<element pattern="disc"/>
		<element pattern="disclosure-closed"/>
		<element pattern="disclosure-open"/>
		<element pattern="ethiopic-numeric"/>
		<element pattern="georgian"/>
		<element pattern="gujarati"/>
		<element pattern="gurmukhi"/>
		<element pattern="hebrew"/>
		<element pattern="hiragana"/>
		<element pattern="hiragana-iroha"/>
		<element pattern="japanese-informal"/>
		<element pattern="japanese-formal"/>
		<element pattern="kannada"/>
		<element pattern="katakana"/>
		<element pattern="katakana-iroha"/>
		<element pattern="khmer"/>
		<element pattern="lao"/>
		<element pattern="lower-alpha"/>
		<element pattern="lower-armenian"/>
		<element pattern="lower-greek"/>
		<element pattern="lower-latin"/>
		<element pattern="lower-roman"/>
		<element pattern="malayalam"/>
		<element pattern="mongolian"/>
		<element pattern="myanmar"/>
		<element pattern="oriya"/>
		<element pattern="persian"/>
		<element pattern="simp-chinese-informal"/>
		<element pattern="simp-chinese-formal"/>
		<element pattern="square"/>
		<element pattern="tamil"/>
		<element pattern="telugu"/>
		<element pattern="thai"/>
		<element pattern="tibetan"/>
		<element pattern="trad-chinese-formal"/>
		<element pattern="trad-chinese-informal"/>
		<element pattern="upper-alpha"/>
		<element pattern="upper-armenian"/>
		<element pattern="upper-greek"/>
		<element pattern="upper-latin"/>
		<element pattern="upper-roman"/>
		<element pattern="none"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
		<element pattern="inside"/>
		<element pattern="outside"/>
	</group>
	<element idref="e.css.url" />
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="list-style-image" highlight="css-property" id="e.css.list-style-image" idref="e.css.list-style-image">
	<autocomplete append=": " />
	<reference>The list-style-image property replaces the list-item marker with an image.
	<b>Note:</b> Always specify the list-style-type property in addition. This property is used 
	if the image for some reason is unavailable.
	<b>Values:</b> &lt;<i>uri</i>&gt; | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> elements with `display: list-item`
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword noneor the computed &lt;<i>image</i>&gt;
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-list-style-image">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;()" id="c.css.list-style-image" idref="c.css.list-style-image">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
	</group>
	<element idref="url" />
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="list-style-position" highlight="css-property" id="e.css.list-style-position" idref="e.css.list-style-position">
		<autocomplete append=": " />
	<reference>Specifies the position of the marker box with respect to the principal block box.
	<b>Values:</b> inside | outside | inherit | initial
	<b>Initial:</b> outside
	<b>Applies to:</b> elements with `display: list-item`
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-list-style-position">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.list-style-position" idref="c.css.list-style-position">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="inside"/>
		<element pattern="outside"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="list-style-type" highlight="css-property" id="e.css.list-style-type" idref="e.css.list-style-type">
	<autocomplete append=": " />
	<reference>Specifies appearance of the list item marker if `list-style-image` has the value `none` or if the image pointed to by the URI cannot be displayed.
	<b>Values:</b> arabic-indic | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
	<b>Note:</b> There are many more values available, mainly language dependent.
	<b>Initial:</b> disk
	<b>Applies to:</b> elements with `display: list-item`
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-lists-3-20201117/#propdef-list-style-type">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.list-style-type" idref="c.css.list-style-type">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="arabic-indic"/>
		<element pattern="armenian"/>
		<element pattern="bengali"/>
		<element pattern="cambodian"/>
		<element pattern="circle"/>
		<element pattern="cjk-decimal"/>
		<element pattern="cjk-earthly-branch"/>
		<element pattern="cjk-heavenly-stem"/>
		<element pattern="cjk-ideographic"/>
		<element pattern="decimal"/>
		<element pattern="decimal-leading-zero"/>
		<element pattern="devanagri"/>
		<element pattern="disc"/>
		<element pattern="disclosure-closed"/>
		<element pattern="disclosure-open"/>
		<element pattern="ethiopic-numeric"/>
		<element pattern="georgian"/>
		<element pattern="gujarati"/>
		<element pattern="gurmukhi"/>
		<element pattern="hebrew"/>
		<element pattern="hiragana"/>
		<element pattern="hiragana-iroha"/>
		<element pattern="japanese-informal"/>
		<element pattern="japanese-formal"/>
		<element pattern="kannada"/>
		<element pattern="katakana"/>
		<element pattern="katakana-iroha"/>
		<element pattern="khmer"/>
		<element pattern="lao"/>
		<element pattern="lower-alpha"/>
		<element pattern="lower-armenian"/>
		<element pattern="lower-greek"/>
		<element pattern="lower-latin"/>
		<element pattern="lower-roman"/>
		<element pattern="malayalam"/>
		<element pattern="mongolian"/>
		<element pattern="myanmar"/>
		<element pattern="oriya"/>
		<element pattern="persian"/>
		<element pattern="simp-chinese-informal"/>
		<element pattern="simp-chinese-formal"/>
		<element pattern="square"/>
		<element pattern="tamil"/>
		<element pattern="telugu"/>
		<element pattern="thai"/>
		<element pattern="tibetan"/>
		<element pattern="trad-chinese-formal"/>
		<element pattern="trad-chinese-informal"/>
		<element pattern="upper-alpha"/>
		<element pattern="upper-armenian"/>
		<element pattern="upper-greek"/>
		<element pattern="upper-latin"/>
		<element pattern="upper-roman"/>
		<element pattern="none"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="margin" highlight="css-property" id="e.css.margin" idref="e.css.margin">
	<autocomplete append=": " />
	<reference>The <i>margin</i> property sets the margins for an element, and is a shorthand property for the following properties:
		<i>margin-top</i>
		<i>margin-right</i>
		<i>margin-bottom</i>
		<i>margin-left</i>
	If the margin property has <b>four</b> values:
		<i>margin: 10px 5px 15px 20px;</i>
			top margin is 10px
			right margin is 5px
			bottom margin is 15px
			left margin is 20px
	If the margin property has <b>three</b> values:
		<i>margin: 10px 5px 15px;</i>
			top margin is 10px
			right and left margins are 5px
			bottom margin is 15px
	If the margin property has <b>two</b> values:
		<i>margin: 10px 5px;</i>
			top and bottom margins are 10px
			right and left margins are 5px
	If the margin property has <b>one</b> value:
		<i>margin: 10px;</i>
			all four margins are 10px
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> &lt;<i>margin-width</i>&gt;{1,4} | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except internal table elements, ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block 
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-box-3-20221103/#propdef-margin">www.w3.org</a></reference>
	
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.margin" idref="c.css.margin">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length.neg"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="margin-block" highlight="css-property" id="e.css.margin-block" idref="e.css.margin-block">
	<autocomplete append=": " />
	<reference>The <i>margin-block</i> property specifies the margin at the start and end in the block direction, 
	and is a shorthand property for the following properties:
		<i>margin-block-start</i>
		<i>margin-block-end</i>
	Values for the <i>margin-block</i> property can be set in different ways:
	If the <i>margin-block</i> property has <b>two</b> values:
		<i>margin-block: 10px 50px;</i>
			margin at start is 10px
			margin at end is 50px
	If the <i>margin-block</i> property has <b>one</b> value:
		<i>margin-block: 10px;</i>
			margin at start and end is 10px
	The CSS margin-block and margin-inline properties are very similar to CSS properties <i>margin-top</i>, 
	<i>margin-bottom</i>, <i>margin-left</i> and <i>margin-right</i>, but the <i>margin-block</i> and <i>margin-inline</i> properties are 
	dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where the 
	start and end of a block is and the result of the <i>margin-block</i> property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-margin-block">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-block-end" highlight="css-property" id="e.css.margin-block-end" idref="e.css.margin-block-end">
	<autocomplete append=": " />
	<reference>The <i>margin-block-end</i> property specifies the margin at the end in the block direction.
	The CSS <i>margin-block</i> and <i>margin-inline</i> properties are very similar to CSS properties <i>margin-top</i>, 
	<i>margin-bottom</i>, <i>margin-left</i> and <i>margin-right</i>, but the <i>margin-block</i> and <i>margin-inline</i> 
	properties are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where the 
	start and end of a block is and the result of the <i>margin-block-end</i> property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-margin-block-end">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-block-start" highlight="css-property" id="e.css.margin-block-start" idref="e.css.margin-start">
	<autocomplete append=": " />
	<reference>The <i>margin-block-start</i> property specifies the margin at the end in the block direction.
	The CSS <i>margin-block</i> and <i>margin-inline</i> properties are very similar to CSS properties <i>margin-top</i>, 
	<i>margin-bottom</i>, <i>margin-left</i> and <i>margin-right</i>, but the <i>margin-block</i> and <i>margin-inline</i> 
	properties are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where the 
	start and end of a block is and the result of the <i>margin-block-start</i> property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-margin-block-start">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-bottom" highlight="css-property" id="e.css.margin-bottom" idref="e.css.margin-bottom">
	<autocomplete append=": " />
	<reference>The margin-bottom property sets the bottom margin of an element.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-box-3-20221103/#propdef-margin-bottom">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-inline" highlight="css-property" id="e.css.margin-inline" idref="e.css.margin-inline">
	<autocomplete append=": " />
	<reference>The margin-inline property specifies the margin at the start and end in the inline direction, 
	and is a shorthand property for the following properties:
		margin-inline-start
		margin-inline-end
	Values for the margin-inline property can be set in different ways:
	If the margin-inline property has two values:
		margin-inline: 10px 50px;
			margin at start is 10px
			margin at end is 50px
	If the margin-inline property has one value:
		margin-inline: 10px;
			margin at start and end is 10px
	The CSS <i>margin-block</i> and <i>margin-inline</i> properties are very similar to CSS properties <i>margin-top</i>, 
	<i>margin-bottom</i>, <i>margin-left</i> and <i>margin-right</i>, but the <i>margin-block</i> and <i>margin-inline</i> 
	properties are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where the 
	start and end of a block is and the result of the <i>margin-inline</i> property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-margin-inline">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-inline-end" highlight="css-property" id="e.css.margin-inline-end" idref="e.css.margin-inline-end">
	<autocomplete append=": " />
	<reference>The <i>margin-inline-end</i> property specifies the margin at the end in the inline direction.
	The CSS <i>margin-block</i> and <i>margin-inline</i> properties are very similar to CSS properties <i>margin-top</i>, 
	<i>margin-bottom</i>, <i>margin-left</i> and <i>margin-right</i>, but the <i>margin-block</i> and <i>margin-inline</i> 
	properties are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where the 
	start and end of a block is and the result of the <i>margin-inline-start</i> property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-margin-inline-end">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-inline-start" highlight="css-property" id="e.css.margin-inline-start" idref="e.css.margin-inline-start">
	<autocomplete append=": " />
	<reference>The <i>margin-inline-start</i> property specifies the margin at the start in the inline direction.
	The CSS <i>margin-block</i> and <i>margin-inline</i> properties are very similar to CSS properties <i>margin-top</i>, 
	<i>margin-bottom</i>, <i>margin-left</i> and <i>margin-right</i>, but the <i>margin-block</i> and <i>margin-inline</i> 
	properties are dependent on block and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects where the 
	start and end of a block is and the result of the <i>margin-inline-start</i> property. For pages in English, block 
	direction is downward and inline direction is left to right.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except elements with table display types other than table-caption, table and inline-table
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-margin-inline-start">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-left" highlight="css-property" id="e.css.margin-left" idref="e.css.margin-left">
	<autocomplete append=": " />
	<reference>The <i>margin-left</i> property sets the left margin of an element.
	<b>Note:</b> Negative values are allowed. 
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except internal table elements, ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-box-3-20221103/#propdef-margin-left">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-right" highlight="css-property" id="e.css.margin-right" idref="e.css.margin-right">
	<autocomplete append=": " />
	<reference>The <i>margin-right</i> property sets the right margin of an element.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except internal table elements, ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-box-3-20221103/#propdef-margin-right">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="margin-top" highlight="css-property" id="e.css.margin-top" idref="e.css.margin-top">
	<autocomplete append=": " />
	<reference>The <i>margin-top</i> property sets the top margin of an element.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> auto | &lt;<i>margin-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except internal table elements, ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-box-3-20221103/#propdef-margin-top">www.w3.org</a></reference>
	<context idref="c.css.margin"/>
</element>

<element pattern="mask-image" highlight="css-property" id="e.css.mask-image" idref="e.css.mask-image">
	<autocomplete append=": " />
	<reference>The mask-image property specifies an image to be used as a mask layer for an element.
	<b>Tip:</b> Linear and radial gradients in CSS can also be used as the mask image.
	<b>Note:</b> Most browsers (except Firefox) require the prefix <i>-webkit-</i> in order to use this property.
	<b>Values:</b> <i>image</i> | <i>url</i> | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i>, a computed &lt;image&gt;, or a computed &lt;url&gt;
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-image">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.mask-image" idref="c.css.mask-image">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none"/>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
		<element idref="e.css.numbers_letters"/>
		<element idref="e.css.url" />
	</group>
	<element idref="e.css.length"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-mask-image" highlight="css-property" id="e.css.webkit-mask-image" idref="e.css.webkit-mask-image">
	<autocomplete append=": " />
	<reference>The mask-image property specifies an image to be used as a mask layer for an element.
	<b>Tip:</b> Linear and radial gradients in CSS can also be used as the mask image.
	<b>Values:</b> <i>image</i> | <i>url</i> | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i>, a computed &lt;image&gt;, or a computed &lt;url&gt;
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-image">www.w3.org</a></reference>
	<context idref="c.css.mask-image" />
</element>

<element pattern="mask-mode" highlight="css-property" id="e.css.mask-mode" idref="e.css.mask-mode">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property is currently only supported by Firefox browser.
	The <i>mask-mode</i> property specifies whether the mask layer image should be treated as a 
	luminance mask or as an alpha mask.
	<b>Values:</b>  match-source | luminance | alpha | initial | inherit
	<b>Initial:</b> match-source
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-mode">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.mask-mode" idref="c.css.mask-mode">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="match-source">
			<reference>If the mask-image property is an image (an image URL or a gradient), set mask-mode 
			to alpha. If the mask-image property is an SVG &lt;mask&gt; element, use the &lt;mask&gt; element's mask-type 
			property. This is default.</reference>
		</element>
		<element pattern="luminance">
			<reference>Use the luminance values of the mask image as the mask values</reference>
		</element>
		<element pattern="alpha">
			<reference>Use the alpha values of the mask image as the mask values</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="mask-origin" highlight="css-property" id="e.css.mask-origin" idref="e.css.mask-origin">
	<autocomplete append=": " />
	<reference>	The <i>mask-origin</i> property specifies the origin position (the mask position area) of a mask layer image.
	<b>Note:</b> Most browsers (except Firefox) require the prefix <i>-webkit-</i> in order to use this property.
	<b>Values:</b>  border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box | initial | inherit
	<b>Initial:</b> border-box
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-origin">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.mask-origin" idref="c.css.mask-origin">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="border-box">
			<reference>The position is relative to the border box. This is default</reference>
		</element>
		<element pattern="content-box">
			<reference>The position is relative to the content box</reference>
		</element>
		<element pattern="padding-box">
			<reference>The position is relative to the padding box</reference>
		</element>
		<element pattern="margin-box">
			<reference>The position is relative to the margin box</reference>
		</element>
		<element pattern="fill-box">
			<reference>The position is relative to the object bounding box</reference>
		</element>
		<element pattern="stroke-box">
			<reference>The position is relative to the stroke bounding box</reference>
		</element>
		<element pattern="view-box">
			<reference>Use the nearest SVG viewport as reference box</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-mask-origin" highlight="css-property" id="e.css.webkit-mask-origin" idref="e.css.webkit-mask-origin">
	<autocomplete append=": " />
	<reference>	The <i>mask-origin</i> property specifies the origin position (the mask position area) of a mask layer image.
	<b>Note:</b> Most browsers (except Firefox) require the prefix <i>-webkit-</i> in order to use this property.
	<b>Values:</b>  border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box | initial | inherit
	<b>Initial:</b> border-box
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-origin">www.w3.org</a></reference>
	<context idref="c.css.mask-origin" />
</element>

<element pattern="mask-position" highlight="css-property" id="e.css.mask-position" idref="e.css.mask-position">
	<autocomplete append=": " />
	<reference>	The <i>mask-position</i> property sets the starting position of a mask image (relative to the mask 
	position area).
	<b>Tip:</b> By default, a mask image is placed at the top-left corner of an element, and repeated both 
	vertically and horizontally. 
	<b>Note:</b> Most browsers (except Firefox) require the prefix <i>-webkit-</i> in order to use this property.
	<b>Values:</b>  left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | &lt;<i>x% y%</i>&gt; | &lt;<i>xposition</i>&gt; &lt;<i>yposition</i>&gt; | initial | inherit
	<b>Note:</b> If you only specify one keyword, the other value will be &quot;center&quot;
	<b>Initial:</b> 0% 0%
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of mask painting area minus size of mask layer image
	<b>Media:</b> visual
	<b>Computed value:</b> 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. 
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-position">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.mask-position" idref="c.css.mask-position">
		<group highlight="css-value" >
			<autocomplete append=" " />
			<element pattern="left" />
			<element pattern="right" />
			<element pattern="bottom" />
			<element pattern="top" />
			<element pattern="center" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-mask-position" highlight="css-property" id="e.css.webkit-mask-position" idref="e.css.webkit-mask-position">
	<autocomplete append=": " />
	<reference>	The <i>mask-position</i> property sets the starting position of a mask image (relative to the mask 
	position area).
	<b>Tip:</b> By default, a mask image is placed at the top-left corner of an element, and repeated both 
	vertically and horizontally. 
	<b>Values:</b>  left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | &lt;<i>x% y%</i>&gt; | &lt;<i>xposition</i>&gt; &lt;<i>yposition</i>&gt; | initial | inherit
	<b>Note:</b> If you only specify one keyword, the other value will be &quot;center&quot;
	<b>Initial:</b> 0% 0%
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of mask painting area minus size of mask layer image
	<b>Media:</b> visual
	<b>Computed value:</b> 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. 
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-position">www.w3.org</a></reference>
	<context idref="c.css.mask-position" />
</element>

<element pattern="mask-repeat" highlight="css-property" id="e.css.mask-repeat" idref="e.css.mask-repeat">
	<autocomplete append=": " />
	<reference>	The <i>mask-repeat</i> property sets if/how a mask image will be repeated.
	By default, a mask image is repeated both vertically and horizontally.
	<b>Note:</b> Most browsers (except Firefox) require the prefix <i>-webkit-</i> in order to use this property.
	<b>Values:</b>   repeat | repeat-x | repeat-y | space | round | no-repeat | initial | inherit
	<b>Initial:</b> repeat
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of mask painting area minus size of mask layer image
	<b>Media:</b> visual
	<b>Computed value:</b> Consists of: two keywords, one per dimension 
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-repeat">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.mask-repeat" idref="c.css.mask-repeat">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="repeat">
			<reference>The mask image is repeated both vertically and horizontally. The last image will 
			be clipped if it does not fit. This is default</reference>
		</element>
		<element pattern="repeat-x">
			<reference>The mask image is repeated only horizontally</reference>
		</element>
		<element pattern="repeat-y">
			<reference>The mask image is repeated only vertically</reference>
		</element>
		<element pattern="space">
			<reference>The mask image is repeated as much as possible without clipping. The first and last image 
			is pinned to either side of the element, and whitespace is distributed evenly between the images</reference>
		</element>
		<element pattern="round">
			<reference>The mask image is repeated and squished or stretched to fill the space (no gaps)</reference>
		</element>
		<element pattern="no-repeat">
			<reference>The mask image is not repeated. The image will only be shown once</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-mask-repeat" highlight="css-property" id="e.css.webkit-mask-repeat" idref="e.css.webkit-mask-repeat">
	<autocomplete append=": " />
	<reference>	The <i>mask-position</i> property sets the starting position of a mask image (relative to the mask 
	position area).
	<b>Tip:</b> By default, a mask image is placed at the top-left corner of an element, and repeated both 
	vertically and horizontally. 
	<b>Values:</b>  left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | &lt;<i>x% y%</i>&gt; | &lt;<i>xposition</i>&gt; &lt;<i>yposition</i>&gt; | initial | inherit
	<b>Note:</b> If you only specify one keyword, the other value will be &quot;center&quot;
	<b>Initial:</b> 0% 0%
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of mask painting area minus size of mask layer image
	<b>Media:</b> visual
	<b>Computed value:</b> 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. 
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-position">www.w3.org</a></reference>
	<context idref="c.css.mask-repeat" />
</element>

<element pattern="mask-size" highlight="css-property" id="e.css.mask-size" idref="e.css.mask-size">
	<autocomplete append=": " />
	<reference>	The <i>mask-size</i> property specifies the size of the mask layer image.
	<b>Note:</b> Most browsers (except Firefox) require the prefix <i>-webkit-</i> in order to use this property.
	<b>Values:</b> auto | &lt;<i>size</i>&gt; | contain | cover | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, but with lengths made absolute 
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-size">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.mask-size" idref="c.css.mask-size">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>This is default</reference>
		</element>
		<element pattern="contain">
			<reference>Scales the mask image in a way that both its width and 
			its height fit inside the container</reference>
		</element>
		<element pattern="cover">
			<reference>Scales the mask image in a way that both its width and 
			its height cover the container</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length" />
	<element idref="e.css.percent" />
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-mask-size" highlight="css-property" id="e.css.webkit-mask-size" idref="e.css.webkit-mask-size">
	<autocomplete append=": " />
	<reference>	The mask-position property sets the starting position of a mask image (relative to the mask 
	position area).
	<b>Tip:</b> By default, a mask image is placed at the top-left corner of an element, and repeated both 
	vertically and horizontally. 
	<b>Values:</b>  left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | &lt;<i>x% y%</i>&gt; | &lt;<i>xposition</i>&gt; &lt;<i>yposition</i>&gt; | initial | inherit
	<b>Note:</b> If you only specify one keyword, the other value will be &quot;center&quot;
	<b>Initial:</b> 0% 0%
	<b>Applies to:</b> All elements. In SVG, it applies to container elements excluding the &lt;defs&gt; 
	element, all graphics elements and the &lt;use&gt; element 
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of mask painting area minus size of mask layer image
	<b>Media:</b> visual
	<b>Computed value:</b> 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. 
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/#propdef-mask-position">www.w3.org</a></reference>
	<context idref="c.css.mask-size" />
</element>

<element pattern="max-block-size" highlight="css-property" id="e.css.max-block-size" idref="e.css.max-block-size">
	<autocomplete append=": " />
	<reference>The <i>max-block-size</i> property specifies the maximum size of an element in the block direction.
	If the content is smaller than the maximum size in block direction, the max-block-size property value has no effect.
	If the content is larger than the maximum size in block direction, the max-block-size property value will be applied.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction, and this affects the result of 
	the <i>max-block-size</i> property. For pages in English, block direction is downward and inline direction is left 
	to right.
	The CSS <i>max-block-size</i> property is very similar to CSS properties <i>max-height</i> and <i>max-width</i>, 
	but the <i>max-block-size</i> property is dependent on block direction.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | none | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements but non-replaced inline elements, table rows, and row groups
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property 
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-max-block-size">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.max-block-size" idref="c.css.max-block-size">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto"/>
		<element pattern="none"/>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length"/>
	<element idref="e.css.percent"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="max-height" highlight="css-property" id="e.css.max-height" idref="e.css.max-height">
	<autocomplete append=": " />
	<reference>The <i>max-height</i> property defines the maximum height of an element.
	If the content is larger than the maximum height, it will overflow. How the container will handle the 
	overflowing content is defined by the overflow property.
	If the content is smaller than the maximum height, the <i>max-height</i> property has no effect.
	<b>Note:</b> This prevents the value of the height property from becoming larger than <i>max-height</i>. 
	The value of the <i>max-height</i> property overrides the <i>height</i> property.
	<b>Values:</b> &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements but non-replaced inline elements, table columns, and column groups
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, with &lt;<i>length-percentage</i>&gt; values computed 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value, recursing into <i>fit-content()</i>
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#propdef-max-height">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.max-height" idref="c.css.max-height">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="0"/>
		<element pattern="none"/>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length"/>
	<element idref="e.css.percent"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="max-inline-size" highlight="css-property" id="e.css.max-inline-size" idref="e.css.max-inline-size">
	<autocomplete append=": " />
	<reference>The <i>max-inline-size</i> property specifies the maximum size 
	of an element in the inline direction.
	If the content is smaller than the maximum size in inline direction, 
	the <i>max-inline-size</i> property value has no effect.
	If the content is larger than the maximum size in block direction, 
	the <i>max-inline-size</i> property value will be applied.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines inline direction, 
	and this affects the result of the <i>max-inline-size</i> property. For pages in English, 
	block direction is downward and inline direction is left to right.
	The CSS <i>max-inline-size</i> property is very similar to CSS properties <i>max-height</i> 
	and <i>max-width</i>, but the <i>max-inline-size</i> property is dependent on inline direction.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements that accept <i>width</i> or <i>height</i>
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length or `none`
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value, recursing into fit-content()
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-max-inline-size">www.w3.org</a></reference>
	<context idref="c.css.max-block-size"/>
</element>

<element pattern="max-lines" highlight="css-property" id="e.css.max-lines" idref="e.css.max-lines">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by major browsers.
	This property forces a break after the given number of lines contained within the element or 
	its descendants, as long as those lines are in the same block formatting context.
	<b>Values:</b> &lt;<i>integer</i>&gt; | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> fragment boxes
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i> or an integer
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-4-20221231/#propdef-max-lines">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.max-lines" idref="c.css.max-lines">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none">
			<reference>No effect. This is default</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element id="e.css.number-pos" idref="e.css.number-pos" pattern="[1-9]+\.?[0-9]+" is_regex="1" highlight="css-value">
		<reference>Any positive number (1 and higher)</reference>
	</element>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="max-width" highlight="css-property" id="e.css.max-width" idref="e.css.max-width">
	<autocomplete append=": " />
	<reference>The <i>max-width</i> property defines the maximum width of an element.
	If the content is larger than the maximum width, it will automatically change the height of 
	the element. 
	If the content is smaller than the maximum width, the <i>max-width</i> property has no effect.
	<b>Note:</b> This prevents the value of the width property from becoming larger than <i>max-width</i>.
	The value of the <i>max-width</i> property overrides the <i>width</i> property.
	<b>Values:</b> &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements that accept <i>width</i> or <i>height</i>
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length or `none`
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value, recursing into fit-content()
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#propdef-max-width">www.w3.org</a></reference>
	<context idref="c.css.max-height"/>
</element>

<element pattern="min-block-size" highlight="css-property" id="e.css.min-block-size" idref="e.css.min-block-size">
	<autocomplete append=": " />
	<reference>The <i>min-block-size</i> property specifies the minimum size of an element in the block direction.
	If the content is smaller than the minimum size in block direction, the <i>min-block-size</i> property value will 
	be applied.
	If the content is larger than the minimum size in block direction, the <i>min-block-size</i> property value has
	no effect.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction, and this affects the result of 
	the <i>min-block-size</i> property. For pages in English, block direction is downward and inline direction is left 
	to right.
	The CSS <i>min-block-size</i> property is very similar to CSS properties <i>min-height</i> and <i>min-width</i>, 
	but the <i>min-block-size</i> property is dependent on block direction.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements but non-replaced inline elements, table rows, and row groups
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property 
	<b>Media:</b> visual
	<b>Computed value:</b> 	the percentage as specified or the absolute length
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-max-block-size">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.min-block-size" idref="c.css.min-block-size">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto"/>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length"/>
	<element idref="e.css.percent"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="min-height" highlight="css-property" id="e.css.min-height" idref="e.css.min-height">
	<autocomplete append=": " />
	<reference>The <i>min-height</i> property defines the minimum height of an element.
	If the content is smaller than the minimum height, the minimum height will be applied.
	If the content is larger than the minimum height, the <i>min-height</i> property has no effect.
	<b>Note:</b> This prevents the value of the <i>height</i> property from becoming smaller than <i>min-height</i>.
	<b>Values:</b> auto | min-content | max-content | fit-content(&lt;<i>length-percentage</i>&gt;) | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements but non-replaced inline elements, table columns, and column groups
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value, recursing into <i>fit-content()</i>
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#propdef-min-height">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.min-height" idref="c.css.min-height">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto"/>
		<element pattern="fit-content"/>
		<element pattern="min-content"/>
		<element pattern="max-content"/>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length"/>
	<element idref="e.css.percent"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="min-inline-size" highlight="css-property" id="e.css.min-inline-size" idref="e.css.min-inline-size">
	<autocomplete append=": " />
	<reference>The <i>min-inline-size</i> property specifies the minimum size of an element in the inline direction.
	If the content is smaller than the minimum size in inline direction, the <i>min-inline-size</i> property value will 
	be applied.
	If the content is larger than the minimum size in inline direction, the <i>min-inline-size</i> property value has
	no effect.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction, and this affects the result of 
	the <i>min-inline-size</i> property. For pages in English, block direction is downward and inline direction is left 
	to right.
	The CSS <i>min-inline-size</i> property is very similar to CSS properties <i>min-height</i> and <i>min-width</i>, 
	but the <i>min-inline-size</i> property is dependent on block direction.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements but non-replaced inline elements, table rows, and row groups
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property 
	<b>Media:</b> visual
	<b>Computed value:</b> 	the percentage as specified or the absolute length
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-min-inline-size">www.w3.org</a></reference>
	<context idref="c.css.min-block-size" />
</element>

<element pattern="min-width" highlight="css-property" id="e.css.min-width" idref="e.css.min-width">
	<autocomplete append=": " />
	<reference>The <i>min-width</i> property defines the minimum width of an element.
	If the content is smaller than the minimum width, the minimum width will be applied.
	If the content is larger than the minimum width, the <i>min-width</i> property has no effect.
	<b>Note:</b> This prevents the value of the <i>width</i> property from becoming smaller than <i>min-width</i>.
	<b>Values:</b> auto | min-content | max-content | fit-content(&lt;<i>length-percentage</i>&gt;) | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements but non-replaced inline elements, table columns, and column groups
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#propdef-min-width">www.w3.org</a></reference>
	<context idref="c.css.min-height"/>
</element>

<element pattern="mix-blend-mode" highlight="css-property" id="e.css.mix-blend-mode" idref="e.css.mix-blend-mode">
	<autocomplete append=": " />
	<reference>The mix-blend-mode property specifies how an element's content should blend with its 
	direct parent background.
	<b>Values:</b> color | color-burn | color-dodge | darken | difference | exclusion | hard-light | hue | 
		lighten | luminosity | multiply | normal | overlay | screen | saturation | soft-light
	<b>Initial:</b> normal
	<b>Applies to:</b> All elements. In SVG, it applies to container elements, graphics elements 
		and graphics referencing elements.
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/CR-compositing-1-20150113/#propdef-mix-blend-mode">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.mix-blend-mode" idref="c.css.mix-blend-mode">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="color">
			<reference>Sets the blending mode to color</reference>
		</element>
		<element pattern="color-burn">
			<reference>Sets the blending mode to color-burn</reference>
		</element>
		<element pattern="color-dodge">
			<reference>Sets the blending mode to color-dodge</reference>
		</element>
		<element pattern="darken">
			<reference>Sets the blending mode to darken</reference>
		</element>
		<element pattern="difference">
			<reference>Sets the blending mode to difference</reference>
		</element>
		<element pattern="exclusion">
			<reference>Sets the blending mode to exclusion</reference>
		</element>
		<element pattern="hard-light">
			<reference>Sets the blending mode to hard-light</reference>
		</element>
		<element pattern="hue">
			<reference>Sets the blending mode to hue</reference>
		</element>
		<element pattern="lighten">
			<reference>Sets the blending mode to lighten</reference>
		</element>
		<element pattern="luminosity">
			<reference>Sets the blending mode to normal</reference>
		</element>
		<element pattern="multiply">
			<reference>Sets the blending mode to multiply</reference>
		</element>
		<element pattern="normal">
			<reference>This is default. Sets the blending mode to normal</reference>
		</element>
		<element pattern="overlay">
			<reference>Sets the blending mode to overlay</reference>
		</element>
		<element pattern="saturation">
			<reference>Sets the blending mode to saturation</reference>
		</element>
		<element pattern="screen">
			<reference>Sets the blending mode to screen</reference>
		</element>
		<element pattern="soft-light">
			<reference>Sets the blending mode to soft-light</reference>
		</element>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="object-fit" highlight="css-property" id="e.css.object-fit" idref="e.css.object-fit">
	<autocomplete append=": " />
	<reference>The <i>object-fit</i> property is used to specify how an &lt;img&gt; or &lt;video&gt; 
	should be resized to fit its container.
	This property tells the content to fill the container in a variety of ways; such as &quot;preserve 
	that aspect ratio&quot; or &quot;stretch up and take up as much space as possible&quot;.
	<b>Values:</b> fill | contain | cover | none | scale-down | initial | inherit
	<b>Initial:</b> fill
	<b>Applies to:</b> Replaced elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-images-3-20201217/#propdef-object-fit">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.object-fit" idref="c.css.object-fit">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="contain">
			<reference>The replaced content is scaled to maintain its aspect ratio while fitting 
			within the element's content box</reference>
		</element>
		<element pattern="cover">
			<reference>The replaced content is sized to maintain its aspect ratio while filling 
			the element's entire content box. The object will be clipped to fit</reference>
		</element>
		<element pattern="fill">
			<reference>This is default. The replaced content is sized to fill the element's content box. 
			If necessary, the object will be stretched or squished to fit</reference>
		</element>
		<element pattern="none">
			<reference>The replaced content is not resized</reference>
		</element>
		<element pattern="scale-down">
			<reference>The content is sized as if none or contain were specified (would result in 
			a smaller concrete object size)</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="object-position" highlight="css-property" id="e.css.object-position" idref="e.css.object-position">
	<autocomplete append=": " />
	<reference>The <i>object-position</i> property is used together with <i>object-fit</i> to specify 
	how an &lt;img&gt; or &lt;video&gt; should be positioned with x/y coordinates inside its &quot;own content box&quot;.
	<b>Values:</b> &lt;<i>position</i>&gt; | initial | inherit
	<b>Initial:</b> 50% 50%
	<b>Applies to:</b> Replaced elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to width and height of element itself 
	<b>Media:</b> visual
	<b>Computed value:</b> list, each item a pair of offsets (horizontal and vertical) from the top left 
	origin each given as a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/CRD-css-images-3-20201217/#propdef-object-position">www.w3.org</a></reference>
	<context idref="c.css.background-position" />
</element>

<element pattern="offset" highlight="css-property" id="e.css.offset" idref="e.css.offset">
	<autocomplete append=": " />
	<reference>The <i>offset</i> property is used when animating an element along a path, and is a 
	shorthand property for the following properties:
		<i>offset-path</i>
		<i>offset-distance</i>
		<i>offset-rotate</i>
		<i>offset-anchor</i>*
	* =&gt;  <i>currently only working in the Firefox browser</i>
	<b>Example:</b>
	img {
		offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
	}
	In this example the anchor is set which makes it currently only usable within firefox.
	<b>Example:</b>
	img {
		offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg;
	}
	<b>Values:</b> [ offset-position? [ offset-path [ offset-distance || offset-rotate ]? ]? ]!
[ / offset-anchor ]? | auto | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> see individual properties 
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-motion-1-20181218/#propdef-offset">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.offset" idref="c.css.offset">
			<element pattern="path" id="e.css.path" idref="e.css.path" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<context id="c.css.path" idref="c.css.path" symbols="()" highlight="css-value">
					<element pattern="(" />
					<element pattern=")" ends_context="1" highlight="css-value" />
				</context>
			</element>
		<group highlight="css-value">
			<autocomplete append=" " />
			<element pattern="left top" />
			<element pattern="left center" />
			<element pattern="left bottom" />
			<element pattern="right top" />
			<element pattern="right center" />
			<element pattern="right bottom" />
			<element pattern="center top" />
			<element pattern="center center" />
			<element pattern="center bottom" />
			<element idref="e.css.numbers_letters" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="offset-anchor" highlight="css-property" id="e.css.offset-anchor" idref="e.css.offset-anchor">
	<autocomplete append=": " />
	<reference>The <i>offset-anchor</i> property specifies the point on an element to be fixed along 
	a path defined by <i>the offset-path</i> property.
	The point defined by the <i>offset-anchor</i> property will also be the center of rotation if the 
	element is rotated with the offset-rotate property.
	<b>Note:</b> This property is currently only working with the Firefox browser.
	<b>Values:</b> auto | &lt;<i>position</i>&gt; | left top |  left center |  left bottom | right top |  
		right center |  right bottom | center top |  center center |  center bottom | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> Relative to the width and the height of a box 
	<b>Media:</b> visual
	<b>Computed value:</b> For &lt;<i>length</i>&gt; the absolute value, otherwise a percentage.
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-motion-1-20181218/#propdef-offset-anchor">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.offset-anchor" idref="c.css.offset-anchor">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="left top" />
			<element pattern="left center" />
			<element pattern="left bottom" />
			<element pattern="right top" />
			<element pattern="right center" />
			<element pattern="right bottom" />
			<element pattern="center top" />
			<element pattern="center center" />
			<element pattern="center bottom" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="offset-distance" highlight="css-property" id="e.css.offset-distance" idref="e.css.offset-distance">
	<autocomplete append=": " />
	<reference>The <i>offset-distance</i> property sets the distance of an element from the start of 
	the path defined by the <i>offset-path</i> property.
	<b>Values:</b> 0 | &lt;<i>length-percentage</i>&gt; | initial | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the total path length 
	<b>Media:</b> visual
	<b>Computed value:</b> For &lt;<i>length</i>&gt; the absolute value, otherwise a percentage.
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-motion-1-20181218/#propdef-offset-distance">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.offset-distance" idref="c.css.offset-distance">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="0">
				<reference>The element is placed at the start of its path. This is default.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="offset-path" highlight="css-property" id="e.css.offset-path" idref="e.css.offset-path">
	<autocomplete append=": " />
	<reference>The <i>offset-path</i> property creates a path for an animated element to follow.
	<b>Note:</b> Currently, only <i>path()</i> and <i>none</i> are supported values for the offset-path property.
	<b>Values:</b> none | ray() | path() | &lt;<i>url</i>&gt; | [ &lt;<i>basic-shape</i>&gt; || &lt;<i>geometry-box</i>&gt; ] | 
		initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> as &lt;<i>angle</i>&gt;, &lt;<i>basic-shape</i>&gt; or <i>path()</i>
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-motion-1-20181218/#propdef-offset-path">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.offset-path" idref="c.css.offset-path">
		<element idref="e.css.url" />
		<element pattern="path" id="e.css.path" idref="e.css.path" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>path( [&lt;<i>fill-rule</i>&gt;,]? &lt;<i>string</i>&gt; ), where 
			&lt;<i>fill-rule</i>&gt; is either nonzero or evenodd and
			&lt;<i>string</i>&gt; is a SVG Path data string.</reference>
			<context id="c.css.path" idref="c.css.path" symbols="()" highlight="css-value">
				<element pattern="(" />
				<element pattern=")" ends_context="1" highlight="css-value" />
			</context>
		</element>
		<element pattern="ray" id="e.css.ray" idref="e.css.ray" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>ray( [ &lt;<i>angle</i>&gt; &amp;&amp; &lt;<i>size</i>&gt; &amp;&amp; contain? ] ),
			where &lt;<i>angle</i>&gt; is a value in deg(rees) like <i>60deg</i>, and
			&lt;<i>size</i>&gt; decides the path length used when offset-distance is 
			expressed as a percentage, using the distance to the containing box. For 
			&lt;<i>size</i>&gt; values other than sides, the path length is independent 
			of &lt;<i>angle</i>&gt;. Keywords for &lt;<i>size</i>&gt; are:
			closest-side | closest-corner | farthest-side | farthest-corner | sides</reference>
			<context idref="c.css.path" />
		</element>
		<element pattern="inset" id="e.css.inset" idref="e.css.inset" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>inset( &lt;<i>length-percentage</i>&gt;{1,4} [ round &lt;<i>border-radius</i>&gt; ]? )
    		Defines an inset rectangle via insets from each edge of the reference box.
    		&lt;<i>length-percentage</i>&gt;: one to four length or percentage values.
			&lt;<i>border-radius</i>&gt;: defines rounded corners for the rectangle 
			using the border-radius shorthand syntax.
    		If less than four &lt;<i>length-percentage</i>&gt; values are provided, 
    		the omitted values default in the same way as the margin shorthand: an 
    		omitted second or third value defaults to the first, and an omitted 
    		fourth value defaults to the second.</reference>
			<context idref="c.css.path" />
		</element>
		<element pattern="xywh" id="e.css.xywh" idref="e.css.xywh" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>	xywh( &lt;<i>length-percentage</i>&gt;{2} &lt;<i>length-percentage</i> [0,∞]&gt;{2} 
			[ round &lt;<i>border-radius</i>&gt; ]? ) defines a rectangle via offsets 
			from the top and left edge of the reference box, and a specified width and 
			height.  
			&lt;<i>length-percentage</i>&gt;: one to four length or percentage values.
			&lt;<i>border-radius</i>&gt;: defines rounded corners for the rectangle 
			using the border-radius shorthand syntax.
			</reference>
			<context idref="c.css.path" />
		</element>
		<element pattern="rect" id="e.css.rect" idref="e.css.rect" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>rect( [ &lt;<i>length-percentage</i>&gt; | auto ]{4} [ round &lt;<i>border-radius</i>&gt; ]? )
			defines a rectangle via insets from the top and left edges of the reference box.
			&lt;<i>length-percentage</i>&gt;: one to four length or percentage values.
			&lt;<i>border-radius</i>&gt;: defines rounded corners for the rectangle 
			using the border-radius shorthand syntax.
			An <i>auto</i> value makes the edge of the box coincide with the corresponding 
			edge of the reference box</reference>
			<context idref="c.css.path" />
		</element>
		<element pattern="circle" id="e.css.circle" idref="e.css.circle" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>	circle( &lt;<i>shape-radius</i>&gt;? [ at &lt;<i>position</i>&gt; ]? ) 
			defines a rectangle via insets from the top and left edges of the reference box.
			The &lt;<i>shape-radius</i>&gt; argument represents <i>r</i>, the radius of the 
			circle. Negative values are invalid. A percentage value here is resolved from 
			the used width and height of the reference box as sqrt(width^2+height2)/sqrt(2).
			The &lt;<i>position</i>&gt; argument defines the center of the circle. This 
			defaults to center if omitted.</reference>
			<context idref="c.css.path" />
		</element>
		<element pattern="ellipse" id="e.css.ellipse" idref="e.css.ellipse" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>ellipse( [ &lt;<i>shape-radius</i>&gt;{2} ]? [ at &lt;<i>position</i>&gt; ]? ) 
			defines a rectangle via insets from the top and left edges of the reference box.
			The &lt;<i>shape-radius</i>&gt; arguments represent <i>rx</i> and <i>ry</i>, the 
			x-axis and y-axis radii of the ellipse, in that order. Negative values for either 
			radius are invalid. Percentage values here are resolved against the used width 
			(for the rx value) and the used height (for the ry value) of the reference box. 
			The &lt;<i>position</i>&gt; argument defines the center of the ellipse. This 
			defaults to center if omitted.</reference>
			<context idref="c.css.path" />
		</element>
		<element pattern="polygon" id="e.css.polygon" idref="e.css.polygon" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>	polygon( &lt;<i>fill-rule</i>&gt;? , [&lt;<i>length-percentage</i>&gt; &lt;<i>length-percentage</i>&gt;]# ) 
			&lt;<i>fill-rule</i>&gt;: The filling rule used to determine the interior 
			of the polygon. Values can be <i>nonzero</i> and <i>evenodd</i>. Default 
			value when omitted is nonzero.
        	Each pair argument in the list represents xi and yi - the x and y axis 
        	coordinates of the i-th vertex of the polygon. 
			The UA must close a polygon by connecting the last vertex with the first 
			vertex of the list.</reference>
			<context idref="c.css.path" />
		</element>
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="0">
				<reference>The element is placed at the start of its path. This is default.</reference>
			</element>
			<element pattern="closest-side" />
			<element pattern="farthest-side" />
			<element pattern="closest-corner" />
			<element pattern="farthest-corner" />
			<element pattern="fill-box" />
			<element pattern="view-box" />
			<element pattern="stroke-box" />
			<element pattern="sides" />
			<element pattern="none" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element pattern="nonzero" />
		<element pattern="evenodd" />
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="offset-rotate" highlight="css-property" id="e.css.offset-rotate" idref="e.css.offset-rotate">
	<autocomplete append=": " />
	<reference>The <i>offset-rotate</i> property sets the rotation of an animated element moving along a path.
	<b>Note:</b> This property is not (yet?) supported by the Safari browser!
	<b>Values:</b> [ auto | reverse ] || &lt;<i>angle</i>&gt; | initial | inherit
		<i>auto</i>: The element is facing the direction it is moving along a path. This is default.
		<i>auto &lt;angle&gt;</i>: With both <i>auto</i> and &lt;<i>angle</i>&gt; given, the angle 
			is added to the default rotation, in the clockwise direction.
		&lt;<i>angle</i>&gt;: Specifies how much to rotate an element with a constant angle.
		<i>reverse</i>: The element is rotated in the opposite direction of the default rotation.
	<b>Initial:</b> auto
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the total path length 
	<b>Media:</b> visual
	<b>Computed value:</b> computed &lt;<i>angle</i>&gt; value, optionally preceded by <i>auto</i>
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-motion-1-20181218/#propdef-offset-rotate">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.offset-rotate" idref="c.css.offset-rotate">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="auto" />
			<element pattern="reverse" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element pattern="[0-9]+\.?[0-9]*(deg|rad|turn|grad)" is_regex="1" case_insens="1" highlight="css-value" id="e.css.degree" idref="e.css.degree"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="opacity" highlight="css-property" id="e.css.opacity" idref="e.css.opacity">
	<autocomplete append=": " />
	<reference>The opacity property sets the opacity level for an element.
	The opacity-level describes the transparency-level, where 1 is not transparent at all, 
	0.5 is 50% see-through, and 0 is completely transparent.
	<b>Values:</b> &lt;<i>alphavalue</i>&gt; | inherit | initial
	<b>Initial:</b> 1
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the same as the specified value after clipping the &lt;alphavalue&gt; to the range [0.0,1.0]
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/REC-css-color-3-20220118/#opacity">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.opacity" idref="c.css.opacity">
		<group highlight="css-value">
			<autocomplete append=";" />
			<element idref="e.css.inherit" />
<!-- Values can be from 0 to 1. The following detects 0.1 to 0.9, after that the integers 0 and 1 are individual patterns.
	Is it possible, to have all of it in the regex without then accepting e.g. 1.4 etc. as well, and without not accepting
	plain 0 or 1? -->
			<element pattern="[0]\.[1-9]" highlight="css-value" is_regex="1" />
			<element pattern="0" />
			<element pattern="1" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="order" highlight="css-property" id="e.css.order" idref="e.css.order">
	<autocomplete append=": " />
	<reference>The order property specifies the order of a flexible item relative to 
	the rest of the flexible items inside the same container.
	<b>Note:</b> If the element is not a flexible item, the order property has no effect. 
	<b>Values:</b> &lt;<i>integer</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> flex items and grid items
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified integer
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-display-3-20221118/#propdef-order">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.order" idref="c.css.order">
		<group highlight="css-value">
			<autocomplete append=";" />
			<element idref="e.css.number" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="orphans" highlight="css-property" id="e.css.orphans" idref="e.css.orphans">
	<autocomplete append=": " />
	<reference>The <i>orphans</i> property specifies the minimum number of lines that must be 
	left at the bottom of a page or column.
	<b>Tip:</b> Also look at the <i>widows</i> property.
	<b>Values:</b> &lt;<i>integer</i>&gt; | inherit | initial
	<b>Initial:</b> 2
	<b>Applies to:</b> block containers that establish an inline formatting context
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified integer
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/CR-css-break-3-20181204/#propdef-orphans">www.w3.org</a></reference>
	<context idref="c.css.order" />
</element>

<element pattern="outline" highlight="css-property" id="e.css.outline" idref="e.css.outline">
	<autocomplete append=": " />
	<reference>An outline is a line that is drawn around elements, outside the borders, to make 
	the element &quot;stand out&quot;.
	The <i>outline</i> property is a shorthand property for:
		<i>outline-width</i> (medium|thin|thick|&lt;<i>length</i>&gt;)
		<i>outline-style</i> (required) (none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)
		<i>outline-color</i> (invert|&lt;<i>color</i>&gt;)
	If outline-color is omitted, the color applied will be the color of the text.
	<b>Note:</b> Outlines differ from borders! Unlike border, the outline is drawn outside the element's 
	border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; 
	the element's total width and height is not affected by the width of the outline.
	<b>Values:</b> [ &lt;<i>outline-color</i>&gt; || &lt;<i>outline-style</i>&gt; || &lt;<i>outline-width</i>&gt; ] | 
		inherit | initial
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> see individual properties
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/REC-css-ui-3-20180621/#propdef-outline">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.outline" idref="c.css.outline">
	<group highlight="css-value">;
		<autocomplete append=" " />
		<element idref="e.css.length" />
	</group>
	<group highlight="css-value" >
		<autocomplete append=" " />
		<element pattern="dashed"/>
		<element pattern="dotted"/>
		<element pattern="double"/>
		<element pattern="groove"/>
		<element pattern="hidden"/>
		<element pattern="inset"/>
		<element pattern="invert"/>
		<element pattern="medium"/>
		<element pattern="none"/>
		<element pattern="outset"/>
		<element pattern="ridge"/>
		<element pattern="solid"/>
		<element pattern="thick"/>
		<element pattern="thin"/>
	</group>
	<group highlight="css-value">
		<autocomplete append=";" />
		<element idref="e.css.colors"/>
		<element idref="e.css.hex-color"/>	
		<element idref="e.css.rgba-color"/>	
		<element idref="e.css.rgb-color"/>	
		<element idref="e.css.initial"/>
		<element idref="e.css.inherit"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="outline-color" highlight="css-property" id="e.css.outline-color" idref="e.css.outline-color">
	<autocomplete append=": " />
	<reference>Controls the style of these dynamic outlines.
	<b>Values:</b> &lt;<i>color</i>&gt; | invert | inherit | initial
	<b>Initial:</b> invert
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-outline-color">www.w3.org</a></reference>
	<context idref="c.css.background-color"/>
</element>

<element pattern="outline-offset" highlight="css-property" id="e.css.outline-offset" idref="e.css.outline-offset">
	<autocomplete append=": " />
	<reference>The <i>outline-offset</i> property adds space between the outline and the edge or border of an element.
	The space between an element and its outline is transparent.
	Outlines differ from borders in three ways:
		An outline is a line drawn around elements, outside the border edge
		An outline does not take up space
		An outline may be non-rectangular
	<b>Values:</b> &lt;<i>length</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-outline-offset">www.w3.org</a></reference>
	<context id="c.css.outline_offset" idref="c.css.outline_offset" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element idref="e.css.length"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="outline-style" highlight="css-property" id="e.css.outline-style" idref="e.css.outline-style">
		<autocomplete append=": " />
	<reference>Controls the style of these dynamic outlines.
	<b>Values:</b> &lt;<i>border-style</i>&gt; | auto | none | inherit | initial
	border styles are: hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual, interactive
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-outline-style">www.w3.org</a></reference>
<!-- The border_style is different! outline-style has auto and has not hidden, it's vice-versa in border-style. 
	That's why the context is spelled out here and not referenced by idref! -->
	<context id="c.css.outline_style" idref="c.css.outline_style" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element pattern="none"/>
			<element pattern="dotted"/>
			<element pattern="dashed"/>
			<element pattern="solid"/>
			<element pattern="double"/>
			<element pattern="groove"/>
			<element pattern="ridge"/>
			<element pattern="inset"/>
			<element pattern="outset"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

	<element pattern="outline-width" highlight="css-property" id="e.css.outline-width" idref="e.css.outline-width">
		<autocomplete append=": " />
	<reference>Controls the style of these dynamic outlines.
	<b>Values:</b> medium | thin | thick | &lt;<i>length</i>&gt; | inherit | initial
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual, interactive
	<b>Computed value:</b> absolute length; `0` if the outline style is <i>none</i>
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-outline-width">www.w3.org</a></reference>
	<context idref="c.css.border_width" />
</element>

<element pattern="overflow" highlight="css-property" id="e.css.overflow" idref="e.css.overflow">
	<autocomplete append=": " />
	<reference>The <i>overflow</i> property specifies what should happen if content overflows an element's box.
	This property specifies whether to clip content or to add scrollbars when an element's content is too 
	big to fit in a specified area.
	<b>Note:</b> The <i>overflow</i> property only works for block elements with a specified height.
	<b>Values:</b> visible | hidden | clip | scroll | auto | inherit | initial
	<b>Initial:</b> visible
	<b>Applies to:</b> block containers, flex containers and grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#propdef-overflow">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.overflow" idref="c.css.overflow">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="visible">
			<reference>The overflow is not clipped. It renders outside the element's box. This is default</reference>
		</element>
		<element pattern="hidden">
			<reference>The overflow is clipped, and the rest of the content will be invisible. 
				Content can be scrolled programmatically (e.g. by setting scrollLeft or scrollTo())</reference>
		</element>
		<element pattern="clip">
			<reference>The overflow is clipped, and the rest of the content will be invisible. 
				Forbids scrolling, including programmatic scrolling.</reference>
		</element>
		<element pattern="scroll">
			<reference>The overflow is clipped, but a scroll-bar is added to see the rest of the content</reference>
		</element>
		<element pattern="auto">
			<reference>If overflow is clipped, a scroll-bar should be added to see the rest of the content</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="overflow-anchor" highlight="css-property" id="e.css.overflow-anchor" idref="e.css.overflow-anchor">
	<autocomplete append=": " />
	<reference>The <i>overflow-anchor</i> property makes it possible to turn off scroll anchoring.
	Scroll anchoring is a feature in the browser that prevents a viewable area that is scrolled 
	into focus to move when new content is loaded above. This is typically a problem on a slow 
	connection if the user scrolls down and starts reading before the page is fully loaded.
	<b>Values:</b> none | auto | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2020/WD-css-scroll-anchoring-1-20201111/#propdef-overflow-anchor">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.overflow-anchor" idref="c.css.overflow-anchor">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none">
			<reference>Scroll anchoring is disabled</reference>
		</element>
		<element pattern="auto">
			<reference>Default value. Scroll anchoring is enabled</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="overflow-block" highlight="css-property" id="e.css.overflow-block" idref="e.css.overflow-block">
	<autocomplete append=": " />
	<reference>The <i>overflow-block</i> property specifies whether to clip the content, 
	add a scroll bar, or display overflow content of a block-element,
	 when it overflows on the block axis.
	<b>Values:</b> visible | hidden | scroll | clip | auto | inherit | initial
	<b>Initial:</b> visible
	<b>Applies to:</b> block containers, flex containers, grid containers, and replaced elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#propdef-overflow-block">www.w3.org</a></reference>
	<context idref="c.css.overflow" />
</element>

<element pattern="overflow-inline" highlight="css-property" id="e.css.overflow-inline" idref="e.css.overflow-inline">
	<autocomplete append=": " />
	<reference>The <i>overflow-inline</i> property specifies whether to clip the content, 
	add a scroll bar, or display overflow content of a block-element,
	 when it overflows on the inline axis.
	<b>Values:</b> visible | hidden | scroll | clip | auto | inherit | initial
	<b>Initial:</b> visible
	<b>Applies to:</b> block containers, flex containers, grid containers, and replaced elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#propdef-overflow-inline">www.w3.org</a></reference>
	<context idref="c.css.overflow" />
</element>

<element pattern="overflow-wrap" highlight="css-property" id="e.css.overflow-wrap" idref="e.css.overflow-wrap">
	<autocomplete append=": " />
	<reference>The <i>overflow-wrap</i> property specifies whether or not the browser can break lines 
	with long words, if they overflow the container.
	<b>Values:</b> normal | anywhere | break-word | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> N/A
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-overflow-wrap">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.overflow-wrap" idref="c.css.overflow-wrap">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="normal">
			<reference>Long words will not break, even if they overflow the container. This is default</reference>
		</element>
		<element pattern="anywhere">
			<reference>Long words will break if they overflow the container if there are no 
			otherwise-acceptable break points in the line. No hyphenation character is inserted.</reference>
		</element>
		<element pattern="break-word">
			<reference>Long words will break if they overflow the container</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="overflow-x" highlight="css-property" id="e.css.overflow-x" idref="e.css.overflow-x">
	<autocomplete append=": " />
	<reference>The <i>overflow-x</i> property specifies whether to clip the content, 
	add a scroll bar, or display overflow content of a block-level element,
	 when it overflows at the left and right edges.
	<b>Tip:</b> Use <i>the overflow-y</i> property to determine clipping at the 
		top and bottom edges.
	<b>Values:</b> visible | hidden | scroll | clip | auto | inherit | initial
	<b>Initial:</b> visible
	<b>Applies to:</b> block containers, flex containers, grid containers, and replaced elements 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#propdef-overflow-x">www.w3.org</a></reference>
	<context idref="c.css.overflow" />
</element>

<element pattern="overflow-y" highlight="css-property" id="e.css.overflow-y" idref="e.css.overflow-y">
	<autocomplete append=": " />
	<reference>The <i>overflow-y</i> property specifies whether to clip the content, 
	add a scroll bar, or display overflow content of a block-level element,
	 when it overflows at the top and bottom edges.
	<b>Tip:</b> Use <i>the overflow-x</i> property to determine clipping at the 
		right and left edges.
	<b>Values:</b> visible | hidden | scroll | clip | auto | inherit | initial
	<b>Initial:</b> visible
	<b>Applies to:</b> block containers, flex containers, grid containers, and replaced elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#propdef-overflow-y">www.w3.org</a></reference>
	<context idref="c.css.overflow" />
</element>

<element pattern="overscroll-behaviour" highlight="css-property" id="e.css.overscroll-behaviour" idref="e.css.overscroll-behaviour">
	<autocomplete append=": " />
	<reference>The <i>overscroll-behavior</i> property is used to turn off scroll chaining or 
	overscroll affordance on an element when you try to scroll past the scroll boundary.
	<i>Scroll chaining</i> is when overscrolling on an element leads to scroll behavior on the 
	parent element. This is default behavior.
	<i>Overscroll affordance</i> is a feedback to the user when trying to scroll beyond the scroll 
	boundary. For example, a visual feedback together with a page refresh normally happens 
	on mobile devices when trying to scroll beyond the top of a page.
	The <i>overscroll-behavior</i> property is a shorthand for the following properties:
		overscroll-behavior-x
		overscroll-behavior-y
	Values for the <i>overscroll-behavior</i> property can be set in different ways:
	If the <i>overscroll-behavior</i> property has two values:
		overscroll-behavior: none contain;
			x-direction: there is no overscroll-behavior
			y-direction: there is no scroll chaining, but overscroll affordance is allowed
	If the <i>overscroll-behavior</i> property has one value:
		overscroll-behavior: contain;
			there is no scroll chaining in x- or y-direction, but overscroll affordance is allowed
	<b>Note:</b> In Microsoft Edge, the property value <i>none</i> is treated like <i>contain</i>, 
		and this is not correct.
	<b>Values:</b> auto | contain | none | inherit | initial
	<b>Initial:</b> auto auto
	<b>Applies to:</b> scroll container elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/#propdef-overscroll-behavior">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.overscroll-behaviour" idref="c.css.overscroll-behaviour">
	<group highlight="css-value" >
		<autocomplete append="; " backup_cursor="2" />
		<element pattern="auto">
			<reference>Allows scroll chaining and overscroll affordance behavior. This is default</reference>
		</element>
		<element pattern="contain">
			<reference>Allows overscroll affordance behavior, but not scroll chaining.</reference>
		</element>
		<element pattern="none">
			<reference>Does not allow overscroll affordance or scroll chaining behavior.</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="overscroll-behaviour-block" highlight="css-property" id="e.css.overscroll-behaviour-block" idref="e.css.overscroll-behaviour-block">
	<autocomplete append=": " />
	<reference>The <i>overscroll-behavior-block</i> property is used to turn off scroll chaining 
	or overscroll affordance on an element when you try to scroll past the scroll boundary 
	in the block direction.
	<i>Scroll chaining</i> is when overscrolling on an element leads to scroll behavior on the 
	parent element. This is default behavior.
	<i>Overscroll affordance</i> is a feedback to the user when trying to scroll beyond the scroll 
	boundary. For example, a visual feedback together with a page refresh normally happens 
	on mobile devices when trying to scroll beyond the top of a page.
	The CSS <i>overscroll-behavior-block</i> and <i>overscroll-behavior-inline</i> properties are very 
	similar to CSS properties <i>overscroll-behavior-x</i> and <i>overscroll-behavior-y</i>, but the 
	<i>overscroll-behavior-block</i> and <i>overscroll-behavior-inline</i> properties are dependent on block and 
	inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects whether 
	the block direction is in the x-direction or y-direction and the result of the <i>overscroll-behavior-block</i> 
	property. For pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | contain | none | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll container elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/#propdef-overscroll-behavior-block">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.overscroll-behaviour-block" idref="c.css.overscroll-behaviour-block">
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element pattern="auto">
			<reference>Allows scroll chaining and overscroll affordance behavior. This is default</reference>
		</element>
		<element pattern="contain">
			<reference>Allows overscroll affordance behavior, but not scroll chaining.</reference>
		</element>
		<element pattern="none">
			<reference>Does not allow overscroll affordance or scroll chaining behavior.</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="overscroll-behaviour-inline" highlight="css-property" id="e.css.overscroll-behaviour-inline" idref="e.css.overscroll-behaviour-inline">
	<autocomplete append=": " />
	<reference>The <i>overscroll-behavior-inline</i> property is used to turn off scroll chaining 
	or overscroll affordance on an element when you try to scroll past the scroll boundary 
	in the inline direction.
	<b>Note:</b> To scroll sideways to trigger overscroll-behavior in the inline direction, you might need 
	to use swipe-gesture on a touchpad or a touchscreen.
	<i>Scroll chaining</i> is when overscrolling on an element leads to scroll behavior on the 
	parent element. This is default behavior.
	<i>Overscroll affordance</i> is a feedback to the user when trying to scroll beyond the scroll 
	boundary. For example, a visual feedback together with a page refresh normally happens 
	on mobile devices when trying to scroll beyond the top of a page.
	The CSS <i>overscroll-behavior-block</i> and <i>overscroll-behavior-inline</i> properties are very 
	similar to CSS properties <i>overscroll-behavior-x</i> and <i>overscroll-behavior-y</i>, but the 
	<i>overscroll-behavior-block</i> and <i>overscroll-behavior-inline</i> properties are dependent on block and 
	inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects whether 
	the block direction is in the x-direction or y-direction and the result of the <i>overscroll-behavior-inline</i> 
	property. For pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | contain | none | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll container elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/#propdef-overscroll-behavior-inline">www.w3.org</a></reference>
	<context idref="c.css.overscroll-behaviour-block" />
</element>

<element pattern="overscroll-behaviour-x" highlight="css-property" id="e.css.overscroll-behaviour-x" idref="e.css.overscroll-behaviour-x">
	<autocomplete append=": " />
	<reference>The <i>overscroll-behavior-x</i> property is used to turn off scroll chaining or overscroll 
	affordance on an element when you try to scroll past the scroll boundary in the x-direction.
	<b>Note:</b> To scroll sideways to trigger overscroll-behavior in the inline direction, you might need 
	to use swipe-gesture on a touchpad or a touchscreen.
	<i>Scroll chaining</i> is when overscrolling on an element leads to scroll behavior on the 
	parent element. This is default behavior.
	<i>Overscroll affordance</i> is a feedback to the user when trying to scroll beyond the scroll 
	boundary. For example, a visual feedback together with a page refresh normally happens 
	on mobile devices when trying to scroll beyond the top of a page.
	<b>Note:</b> In Microsoft Edge, the property value <i>none</i> is treated like <i>contain</i>, 
		and this is not correct.
	<b>Values:</b> auto | contain | none | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll container elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/#propdef-overscroll-behavior-x">www.w3.org</a></reference>
	<context idref="c.css.overscroll-behaviour-block" />
</element>

<element pattern="overscroll-behaviour-y" highlight="css-property" id="e.css.overscroll-behaviour-y" idref="e.css.overscroll-behaviour-y">
	<autocomplete append=": " />
	<reference>The <i>overscroll-behavior-x</i> property is used to turn off scroll chaining or overscroll 
	affordance on an element when you try to scroll past the scroll boundary in the y-direction.
	<i>Scroll chaining</i> is when overscrolling on an element leads to scroll behavior on the 
	parent element. This is default behavior.
	<i>Overscroll affordance</i> is a feedback to the user when trying to scroll beyond the scroll 
	boundary. For example, a visual feedback together with a page refresh normally happens 
	on mobile devices when trying to scroll beyond the top of a page.
	<b>Note:</b> In Microsoft Edge, the property value <i>none</i> is treated like <i>contain</i>, 
		and this is not correct.
	<b>Values:</b> auto | contain | none | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll container elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-overscroll-1-20190606/#propdef-overscroll-behavior-y">www.w3.org</a></reference>
	<context idref="c.css.overscroll-behaviour-block" />
</element>

<element pattern="padding" highlight="css-property" id="e.css.padding" idref="e.css.padding">
	<autocomplete append=": " />
	<reference>An element's padding is the space between its content and its border.
	The <i>padding property</i> is a shorthand property for:
		<i>padding-top</i>, <i>padding-right</i>, <i>padding-bottom</i>, <i>padding-left</i>
	<b>Note:</b> Padding creates extra space within an element, while margin creates extra space 
	around an element.
	This property can have from one to four values.
	If the <i>padding</i> property has <b>four</b> values:
		padding:10px 5px 15px 20px;
			top padding is 10px
			right padding is 5px
			bottom padding is 15px
			left padding is 20px
	If the <i>padding</i> property has <b>three</b> values:
		padding:10px 5px 15px;
			top padding is 10px
			right and left padding are 5px
			bottom padding is 15px
	If the <i>padding</i> property has <b>two</b> values:
		padding:10px 5px;
			top and bottom padding are 10px
			right and left padding are 5px
	If the <i>padding</i> property has <b>one</b> value:
		padding:10px;
			all four paddings are 10px
	<b>Note:</b> Negative values are not allowed.
	<b>Values:</b> &lt;<i>padding-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-box-3-20221103/#propdef-padding">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="padding-block" highlight="css-property" id="e.css.padding-block" idref="e.css.padding-block">
	<autocomplete append=": " />
	<reference>An element's padding-block is the space from its border to its content in the block 
	direction, and it is a shorthand property for the following properties:
		padding-block-start
		padding-block-end
	Values for the padding-block property can be set in different ways:
		If the <i>padding-block</i> property has <b>two</b> values:
			padding-block: 10px 50px;
			padding at start is 10px
			padding at end is 50px
	If the padding-block property has one value:
		padding-block: 10px;
			padding at start and end is 10px
	The CSS <i>padding-block</i> and <i>padding-inline</i> properties are very similar to CSS properties 
	<i>padding-top</i>, <i>padding-bottom</i>, <i>padding-left</i> and <i>padding-right</i>, 
	but the <i>padding-block</i> and <i>padding-inline</i> properties are dependent on block 
	and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects 
	where the start and end of a block is and the result of the <i>padding-block</i> property. For 
	pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>padding-width</i>&gt; | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-padding-block">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.padding-block" idref="c.css.padding-block">
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element pattern="auto">
			<reference>Default. The element's default padding value.</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.length" />
	<element idref="e.css.percent" />
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="padding-block-end" highlight="css-property" id="e.css.padding-block-end" idref="e.css.padding-block-end">
	<autocomplete append=": " />
	<reference>An element's <i>padding-block-end</i> is the space from its border to its content, at 
	the end in the block direction.
	The CSS <i>padding-block</i> and <i>padding-inline</i> properties are very similar to CSS properties 
	<i>padding-top</i>, <i>padding-bottom</i>, <i>padding-left</i> and <i>padding-right</i>, 
	but the <i>padding-block</i> and <i>padding-inline</i> properties are dependent on block 
	and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects 
	where the start and end of a block is and the result of the <i>padding-block-end</i> property. For 
	pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>padding-width</i>&gt; | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-padding-block-end">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="padding-block-start" highlight="css-property" id="e.css.padding-block-start" idref="e.css.padding-block-start">
	<autocomplete append=": " />
	<reference>An element's <i>padding-block-start</i> is the space from its border to its content, at 
	the start in the block direction.
	The CSS <i>padding-block</i> and <i>padding-inline</i> properties are very similar to CSS properties 
	<i>padding-top</i>, <i>padding-bottom</i>, <i>padding-left</i> and <i>padding-right</i>, 
	but the <i>padding-block</i> and <i>padding-inline</i> properties are dependent on block 
	and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects 
	where the start and end of a block is and the result of the <i>padding-block-start</i> property. For 
	pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>padding-width</i>&gt; | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-padding-block-start">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="padding-bottom" highlight="css-property" id="e.css.padding-bottom" idref="e.css.padding-bottom">
	<autocomplete append=": " />
	<reference>An element's padding is the space between its content and its border.
	The <i>padding-bottom</i> property sets the bottom padding (space) of an element.
	<b>Note:</b> Negative values are not allowed.
	<b>Values:</b> &lt;<i>padding-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> a computed &lt;<i>length-percentage</i>&gt; value
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-box-4-20221103/#propdef-padding-bottom">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="padding-inline" highlight="css-property" id="e.css.padding-inline" idref="e.css.padding-inline">
	<autocomplete append=": " />
	<reference>An element's <i>padding-inline</i> is the space from its border to its content in the inline 
	direction, and it is a shorthand property for the following properties:
		padding-inline-start
		padding-inline-end
	Values for the <i>padding-inline</i> property can be set in different ways:
		If the <i>padding-inline</i> property has <b>two</b> values:
			padding-inline: 10px 50px;
				padding at start is 10px
				padding at end is 50px
		If the <i>padding-inline</i> property has <b>one</b> value:
			padding-inline: 10px;
				padding at start and end is 10px
	The CSS <i>padding-block</i> and <i>padding-inline</i> properties are very similar to CSS properties 
	<i>padding-top</i>, <i>padding-bottom</i>, <i>padding-left</i> and <i>padding-right</i>, 
	but the <i>padding-block</i> and <i>padding-inline</i> properties are dependent on block 
	and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects 
	where the start and end of a block is and the result of the <i>padding-inline</i> property. For 
	pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>padding-width</i>&gt; | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-padding-inline">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="padding-inline-end" highlight="css-property" id="e.css.padding-inline-end" idref="e.css.padding-inline-end">
	<autocomplete append=": " />
	<reference>An element's <i>padding-inline-end</i> is the space from its border to its content, at 
	the end in the inline direction.
	The CSS <i>padding-block</i> and <i>padding-inline</i> properties are very similar to CSS properties 
	<i>padding-top</i>, <i>padding-bottom</i>, <i>padding-left</i> and <i>padding-right</i>, 
	but the <i>padding-block</i> and <i>padding-inline</i> properties are dependent on block 
	and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects 
	where the start and end of a block is and the result of the <i>padding-inline-end</i> property. For 
	pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>padding-width</i>&gt; | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-padding-inline-end">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="padding-inline-start" highlight="css-property" id="e.css.padding-inline-start" idref="e.css.padding-inline-start">
	<autocomplete append=": " />
	<reference>An element's <i>padding-inline-start</i> is the space from its border to its content, at 
	the start in the inline direction.
	The CSS <i>padding-block</i> and <i>padding-inline</i> properties are very similar to CSS properties 
	<i>padding-top</i>, <i>padding-bottom</i>, <i>padding-left</i> and <i>padding-right</i>, 
	but the <i>padding-block</i> and <i>padding-inline</i> properties are dependent on block 
	and inline directions.
	<b>Note:</b> The related CSS property <i>writing-mode</i> defines block direction. This affects 
	where the start and end of a block is and the result of the <i>padding-inline-start</i> property. For 
	pages in English, block direction is downward and inline direction is left to right.
	<b>Values:</b> auto | &lt;<i>padding-width</i>&gt; | inherit
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> As for the corresponding physical property
	<b>Media:</b> visual
	<b>Computed value:</b> the percentage as specified or the absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-logical-1-20180827/#propdef-padding-block-start">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="padding-left" highlight="css-property" id="e.css.padding-left" idref="e.css.padding-left">
	<autocomplete append=": " />
	<reference>An element's padding is the space between its content and its border.
	The <i>padding-left</i> property sets the left padding (space) of an element.
	<b>Note:</b> Negative values are not allowed.
	<b>Values:</b> &lt;<i>padding-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> a computed &lt;<i>length-percentage</i>&gt; value
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-box-4-20221103/#propdef-padding-left">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="padding-right" highlight="css-property" id="e.css.padding-right" idref="e.css.padding-right">
	<autocomplete append=": " />
	<reference>An element's padding is the space between its content and its border.
	The <i>padding-right</i> property sets the right padding (space) of an element.
	<b>Note:</b> Negative values are not allowed.
	<b>Values:</b> &lt;<i>padding-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> a computed &lt;<i>length-percentage</i>&gt; value
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-box-4-20221103/#propdef-padding-right">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="padding-top" highlight="css-property" id="e.css.padding-top" idref="e.css.padding-top">
	<autocomplete append=": " />
	<reference>An element's padding is the space between its content and its border.
	The <i>padding-top</i> property sets the top padding (space) of an element.
	<b>Note:</b> Negative values are not allowed.
	<b>Values:</b> &lt;<i>padding-width</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements except: internal table elements other than table cells, 
		ruby base containers, and ruby annotation containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> a computed &lt;<i>length-percentage</i>&gt; value
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-box-4-20221103/#propdef-padding-top">www.w3.org</a></reference>
	<context idref="c.css.length_percentage"/>
</element>

<element pattern="page" highlight="css-property" id="e.css.page" idref="e.css.page">
	<autocomplete append=": " />
	<reference>The <i>page</i> property is used to specify a particular type of page 
	(called a <b>named page</b>) on which an element must be displayed. If necessary, 
	a forced page break is introduced and a new page generated of the specified type.
	<b>Note:</b> This page can be styled by using the same type name in a page selector.
	<b>Values:</b> auto | &lt;<i>custom-ident</i>&gt;
	<b>Initial:</b> auto
	<b>Applies to:</b> boxes that create class A break points
	<b>Inherited:</b> no (if the page value on an element is auto, then its used value 
		is the value specified on its nearest ancestor with a non-auto value. When specified 
		on the root element, the used value for auto is the empty string.)
	<b>Percentages:</b> N/A
	<b>Media:</b> visual, paged
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-page-3-20181018/#propdef-page">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.page" idref="c.css.page">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="auto">
				<reference>Default. Automatic page-break</reference>
			</element>
			<element idref="e.css.text" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="page-break-after" highlight="css-property" id="e.css.page-break-after" idref="e.css.page-break-after">
	<autocomplete append=": " />
	<reference>The <i>page-break-after</i> property adds a page-break after a specified element.
	<b>Tip:</b> The properties: <i>page-break-before</i>, <i>page-break-after</i> and 
		<i>page-break-inside</i> help to define how a document should behave when printed.
	<b>Note:</b> You cannot use this property on an empty &lt;div&gt; or on absolutely 
		positioned elements.
	<b>Values:</b> auto | always | avoid | left | right | inherit | initial
	<b>Note:</b> None of the browsers support &quot;avoid&quot;. 
	<b>Note:</b> Browsers may interpret &quot;left&quot; and &quot;right&quot; as &quot;always&quot;.
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level elements (User agents may also apply these properties 
		to other elements, e.g., 'table-row' elements.)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual, paged
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/page.html#propdef-page-break-after">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.page-break-after" idref="c.css.page-break-after">
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element pattern="auto">
			<reference>Default. Automatic page-break</reference>
		</element>
		<element pattern="always">
			<reference><i>page-break-after</i>: Always insert a page-break after the element. 
			<i>page-break-before</i>: Always insert a page-break before the element. </reference>
		</element>
		<element pattern="avoid">
			<reference><i>page-break-after</i>: Avoid a page-break after the element (if possible). 
			<i>page-break-before</i>: Avoid a page-break before the element (if possible). 
			Not yet supported by all browsers!</reference>
		</element>
		<element pattern="left">
			<reference><i>page-break-after</i>: Insert page-break after the element so that the next page is formatted 
				as a left page
			<i>page-break-before</i>: Insert page-break before the element so that the next page is formatted 
				as a left page
			</reference>
		</element>
		<element pattern="right">
			<reference><i>page-break-after</i>: Insert page-break after the element so that the next page is formatted 
				as a right page			
			<i>page-break-before</i>: Insert page-break before the element so that the next page is formatted 
				as a right page
			</reference>
</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="page-break-before" highlight="css-property" id="e.css.page-break-before" idref="e.css.page-break-before">
	<autocomplete append=": " />
	<reference>The <i>page-break-before</i> property adds a page-break before a specified element.
	<b>Tip:</b> The properties: <i>page-break-before</i>, <i>page-break-after</i> and 
		<i>page-break-inside</i> help to define how a document should behave when printed.
	<b>Note:</b> You cannot use this property on an empty &lt;div&gt; or on absolutely 
		positioned elements.
	<b>Values:</b> auto | always | avoid | left | right | inherit | initial
	<b>Note:</b> None of the browsers support &quot;avoid&quot;. 
	<b>Note:</b> Browsers may interpret &quot;left&quot; and &quot;right&quot; as &quot;always&quot;.
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level elements (User agents may also apply these properties 
		to other elements, e.g., 'table-row' elements.)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual, paged
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/page.html#propdef-page-break-before">www.w3.org</a></reference>
	<context idref="c.css.page-break-after" />
</element>

<element pattern="page-break-inside" highlight="css-property" id="e.css.page-break-inside" idref="e.css.page-break-inside">
	<autocomplete append=": " />
	<reference>The <i>page-break-inside</i> property sets whether a page-break should be 
	avoided inside a specified element.
	<b>Tip:</b> The properties: <i>page-break-before</i>, <i>page-break-after</i> and 
		<i>page-break-inside</i> help to define how a document should behave when printed.
	<b>Note:</b> You cannot use this property on absolutely positioned elements.
	<b>Values:</b> auto | avoid | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level elements (User agents may also apply these properties 
		to other elements, e.g., 'table-row' elements.)
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to logical width of containing block
	<b>Media:</b> visual, paged
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/page.html#propdef-page-break-before">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.page-break-after" idref="c.css.page-break-after">
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element pattern="auto">
			<reference>Default. Automatic page-break</reference>
		</element>
		<element pattern="avoid">
			<reference>Avoid page-break inside the element (if possible)</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="paint-order" highlight="css-property" id="e.css.paint-order" idref="e.css.paint-order">
	<autocomplete append=": " />
	<reference>The <i>paint-order</i> property specifies the order of how an SVG element or text is painted.
	<b>Note:</b> Only the order of stroke and fill can be changed for text elements, because markers are 
		not applicable.
	<b>Tip:</b> if only one of fill, stroke and markers is given, the other two will follow in the
		regular order, e.g. &quot;stroke fill markers&quot; or &quot;markers fill stroke&quot;.
	<b>Values:</b> normal | [ fill || stroke || markers ] | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> block-level elements (User agents may also apply these properties 
		to other elements, e.g., 'table-row' elements.)
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> There is no specification by w3.org</reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.paint-order" idref="c.css.paint-order">
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element pattern="normal">
			<reference>Default. Painting is done in the order of fill, stroke and markers.</reference>
		</element>
		<element pattern="fill" />
		<element pattern="stroke" />
		<element pattern="markers" />
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="pause" highlight="css-property" id="e.css.pause" idref="e.css.pause">
	<autocomplete append=": " />
	<reference>The <i>pause</i> property is a shorthand for 
		<i>pause-before</i> 
		<i>pause-after</i> 
	If two values are given, the first value is <i>pause-before</i> and the second is <i>pause-after</i>. 
	If only one value is given, it applies to both properties.
	<b>Values:</b> 	[ [&lt;<i>time</i>&gt; | &lt;<i>percentage</i>&gt;]{1,2} ] | initial | inherit
	<i>time</i>: Expresses the pause in absolute time units (seconds and milliseconds)
	<i>percentage</i>: Refers to the inverse of the value of the <i>speech-rate</i> property. For 
	example, if the speech-rate is 120 words per minute (i.e., a word takes half a second, or 500ms) 
	then a <i>pause-before</i> of 100% means a pause of 500 ms and a <i>pause-before</i> of 20% means 100ms.
	<b>Initial:</b> 0 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> time
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-pause">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.pause" idref="c.css.pause">
	<group highlight="css-value" >
		<element idref="e.css.time" />
		<element idref="e.css.percent" />
	</group>
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="pause-after" highlight="css-property" id="e.css.pause-after" idref="e.css.pause-after">
	<autocomplete append=": " />
	<reference>The <i>pause-after</i> properties specifíes a pause to be observed after 
	speaking an element's content.
	<b>Values:</b> [ [&lt;<i>time</i>&gt; | &lt;<i>percentage</i>&gt;]{1,2} ] | initial | inherit
	<i>time</i>: Expresses the pause in absolute time units (seconds and milliseconds)
	<i>percentage</i>: Refers to the inverse of the value of the <i>speech-rate</i> property. For 
	example, if the speech-rate is 120 words per minute (i.e., a word takes half a second, or 500ms) 
	then a <i>pause-before</i> of 100% means a pause of 500 ms and a <i>pause-before</i> of 20% means 100ms.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> time
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-pause-after">www.w3.org</a></reference>
	<context idref="c.css.pause" />
</element>

<element pattern="pause-before" highlight="css-property" id="e.css.pause-before" idref="e.css.pause-before">
	<autocomplete append=": " />
	<reference>The <i>pause-before</i> properties specifíes a pause to be observed before 
	speaking an element's content.
	<b>Values:</b> [ [&lt;<i>time</i>&gt; | &lt;<i>percentage</i>&gt;]{1,2} ] | initial | inherit
	<i>time</i>: Expresses the pause in absolute time units (seconds and milliseconds)
	<i>percentage</i>: Refers to the inverse of the value of the <i>speech-rate</i> property. For 
	example, if the speech-rate is 120 words per minute (i.e., a word takes half a second, or 500ms) 
	then a <i>pause-before</i> of 100% means a pause of 500 ms and a <i>pause-before</i> of 20% means 100ms.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> time
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-pause-after">www.w3.org</a></reference>
	<context idref="c.css.pause" />
</element>

<element pattern="perspective" highlight="css-property" id="e.css.perspective" idref="e.css.perspective">
	<autocomplete append=": " />
	<reference>The <i>perspective</i> property is used to give a 3D-positioned element some perspective.
	The <i>perspective</i> property defines how far the object is away from the user. So, a lower 
	value will result in a more intensive 3D effect than a higher value.
	When defining the perspective property for an element, it is the CHILD elements that get the 
	perspective view, NOT the element itself.
	<b>Tip:</b> Also look at the <i>perspective-origin</i> property, which defines at which position 
	the user is looking at the 3D object.
	<b>Values:</b> &lt;<i>length</i>&gt; | none | initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i> or an absolute length
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#propdef-perspective">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.perspective" idref="c.css.perspective">
	<group highlight="css-value" >
		<autocomplete append="; " />
		<element pattern="none">
			<reference>Default value. Same as 0. The perspective is not set</reference>
		</element>
		<element idref="e.css.length" />
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="perspective-origin" highlight="css-property" id="e.css.perspective-origin" idref="e.css.perspective-origin">
	<autocomplete append=": " />
	<reference>The <i>perspective-origin</i> property defines at from which position the user 
	is looking at the 3D-positioned element.
	When defining the <i>perspective-origin</i> property for an element, it is the CHILD 
	elements that will get the effect, NOT the element itself.
	<b>Note:</b> This property must be used in conjunction with the perspective property!
	<b>Values:</b> &lt;<i>x-axis</i>&gt; &lt;<i>y-axis</i>&gt; | initial | inherit
	<b>Initial:</b> 50% 50%
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the size of the reference box
	<b>Media:</b> visual
	<b>Computed value:</b> list, each item a pair of offsets (horizontal and vertical) from the 
		top left origin each given as a computed &lt;<i>length-percentage</i>&gt; value
	<b>Canonical Order:</b> per grammar
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#propdef-perspective-origin">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.perspective-origin" idref="c.css.perspective-origin">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="none">
				<reference>Default value. Same as 0. The perspective is not set</reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<group highlight="css-value" >
			<element idref="e.css.length" />
			<element idref="e.css.percent" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2" />
	</context>
</element>

<element pattern="place-content" highlight="css-property" id="e.css.place-content" idref="e.css.place-content">
	<autocomplete append=": " />
	<reference>The <i>place-content</i> property is used in flexbox and grid layouts, and is a shorthand 
	property for the following properties:
		<i>align-content</i>
		<i>justify-content</i>
	If the <i>place-content</i> property has <b>two</b> values:
		place-content: start center;
			align-content property value is 'start'
			justify-content property value is 'center'
	If the <i>place-content</i> property has <b>one</b> value:
		place-content: end;
			align-content and justify-content property values are both 'end'
	<b>Values:</b> &lt;<i>align-content</i>&gt; &lt;<i>justify-content</i>&gt; ? | initial | inherit
	&lt;<i>align-content</i> and <i>justify-content</i>&gt;-values are: flex-start|flex-end|center|space-between|space-evenly|
		space-around|stretch|baseline|first-baseline|last-baseline|safe|unsafe|center|left|right
	<b>Initial:</b> normal 
	<b>Applies to:</b> block containers, flex containers, and grid containers 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-align-3-20211224/#propdef-place-content">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.place-content" idref="c.css.place-content">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="flex-start" id="e.css.flex-start">
				<reference>Lines are packed toward the start of the flex container</reference>
			</element>
			<element pattern="flex-end" id="e.css.flex-end">
				<reference>Lines are packed toward the end of the flex container</reference>
			</element>
			<element pattern="center" id="e.css.center">
				<reference>Lines are packed toward the center of the flex container</reference>
			</element>
			<element pattern="space-between" id="e.css.space-between">
				<reference>Lines are evenly distributed in the flex container</reference>
			</element>
			<element pattern="space-evenly" id="e.css.space-evenly">
				<reference>Lines are evenly distributed in the flex container, with equal space around them</reference>
			</element>
			<element pattern="space-around" id="e.css.space-around">
				<reference>Lines are evenly distributed in the flex container, with half-size spaces on either end</reference>
			</element>
			<element pattern="stretch" >
				<reference>Stretches to fill the grid cell if inline-size (width) is not set.</reference>
			</element>
			<element pattern="safe" >
				<reference>Sets alignment of the item to 'start' if the content overflows</reference>
			</element>
			<element pattern="unsafe" >
				<reference>Keeps the alignment value regardless of wether or not the item content overflows</reference>
			</element>
			<element pattern="baseline" >
				<reference>Computes to first baseline</reference>
			</element>
			<element pattern="first baseline" >
				<reference>Specifies participation in first-baseline alignment: aligns the alignment baseline 
				of the box’s first baseline set with the corresponding baseline of its baseline-sharing group.</reference>
			</element>
			<element pattern="last baseline" >
				<reference>	aligns the alignment baseline of the box’s last baseline set with the corresponding 
				baseline of its baseline-sharing group.̣</reference>
			</element>
			<element pattern="left" >
				<reference>Align items to the left</reference>
			</element>
			<element pattern="right" >
				<reference>Align items to the right</reference>
			</element>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="place-items" highlight="css-property" id="e.css.place-items" idref="e.css.place-items">
	<autocomplete append=": " />
	<reference>The <i>place-items</i> property is used in grid layout, and is a shorthand property 
	for the following properties:
		align-items
		justify-items
	If the <i>place-items</i> property has <b>two</b> values:
		place-items: start center;
			align-items property value is start
			justify-items property value is center
	If the <i>place-items</i> property has <b>one</b> value:
		place-items: end;
			align-items and justify-items property values are both end
	<b>Values:</b> normal | stretch |&lt;<i> baseline-position</i>&gt; | &lt;<i>overflow-position</i>&gt;? [ &lt;<i>self-position</i>&gt; |
		 left | right ] | legacy | legacy &amp;&amp; [ left | right | center ] 
	&lt;<i>baseline-position</i>&gt;-values are: first-baseline | last-baseline
	&lt;<i>overflow-position</i>&gt;-values are: unsafe | safe
	&lt;<i>self-position</i>&gt;-values are: center | start | end | flex-start | flex-end
	<b>Initial:</b> normal legacy
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-align-3-20211224/#propdef-place-content">www.w3.org</a></reference>
	<context idref="c.css.justify-items" />
</element>

<element pattern="place-self" highlight="css-property" id="e.css.place-self" idref="e.css.place-self">
	<autocomplete append=": " />
	<reference>The <i>place-self</i> property is used to align individual grid items, and is a 
	shorthand property for the following properties:
		align-self
		justify-self
	If the <i>place-self</i> property has <b>two</b> values:
		place-self: start center;
			align-self property value is 'start'
			justify-self property value is 'center'
	If the <i>place-self</i> property has <b>one</b> value:
		place-self: end;
			align-self and justify-self property values are both 'end'
	<b>Values:</b> auto | normal | stretch |&lt;<i> baseline-position</i>&gt; | &lt;<i>overflow-position</i>&gt;? &lt;<i>self-position</i>&gt; |
		 left | right | initial | inherit
	&lt;<i>baseline-position</i>&gt;-values are: first-baseline | last-baseline
	&lt;<i>overflow-position</i>&gt;-values are: unsafe | safe
	&lt;<i>self-position</i>&gt;-values are: center | start | end | flex-start | flex-end
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level boxes, absolutely-positioned boxes, and grid items 
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-align-3-20211224/#propdef-place-self">www.w3.org</a></reference>
	<context idref="c.css.justify-items" />
</element>

<element pattern="pointer-events" highlight="css-property" id="e.css.pointer-events" idref="e.css.pointer-events">
	<autocomplete append=": " />
	<reference>The <i>pointer-events</i> property defines whether or not an element reacts to pointer events.
	<b>Values:</b> auto | none | initial | inherit
		auto: The element reacts to pointer events like :hover and :click
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level boxes, absolutely-positioned boxes, and grid items 
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/">www.w3.org (no specification found)</a></reference>
	<context id="c.css.pointer-events" idref="c.css.pointer-events" symbols=" &#9;&#10;&#13;{}.;:'&quot;">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto"/>
			<element pattern="none"/>
			<element idref="e.css.initial" />
			<element idref="e.css.inherit" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="position" highlight="css-property" id="e.css.position" idref="e.css.position">
	<autocomplete append=": " />
	<reference>The <i>position</i> property specifies the type of positioning method used for 
	an element (static, relative, absolute, fixed, or sticky).
	<b>Values:</b> static | relative | absolute | fixed | sticky | inherit | initial
	<b>Initial:</b> static
	<b>Applies to:</b> all elements except table-column-group and table-column
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-position">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.position" idref="c.css.position">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="static">
			<reference>Default value. Elements render in order, as they appear in the document flow</reference>
		</element>
		<element pattern="relative">
			<reference>The element is positioned relative to its normal position, so "left:20px" adds 20 
			pixels to the element's LEFT position </reference>
		</element>
		<element pattern="absolute">
			<reference>The element is positioned relative to its first positioned (not static) ancestor element</reference>
		</element>
		<element pattern="fixed">
			<reference>The element is positioned relative to the browser window</reference>
		</element>
		<element pattern="sticky">
			<reference>The element is positioned based on the user's scroll position
			A sticky element toggles between relative and fixed, depending on the scroll position. 
			It is positioned relative until a given offset position is met in the viewport - then 
			it "sticks" in place (like position:fixed).
			<b>Note:</b> Not supported in IE/Edge 15 or earlier. Supported in Safari 
			from version 6.1 with a -webkit- prefix.</reference>
		</element>
		<element idref="e.css.inherit"/>
		<element idref="e.css.initial"/>
</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="quotes" highlight="css-property" id="e.css.quotes" idref="e.css.quotes">
	<autocomplete append=": " />
	<reference>Specifies quotation marks for any number of embedded quotations.
	<b>Values:</b> auto | [&lt;<i>string</i>&gt; &lt;<i>string</i>&gt;]+ | none | inherit | initial
	<b>Note:</b> &lt;<i>string</i>&gt; is a list of pairs of quotes.
	<b>Example:</b> &quot;‘&quot; &quot;’&quot; ‘&quot;’ ‘&quot;’
	where the first pair stands for the outer quotes and the second pair for inner quotes. 
	<b>Example:</b> '\2039' '\203A' is equal to '‹' '›' 
	Hex values:
	<b>Example:</b> &quot;\00AB\2005&quot; &quot;\2005\00BB&quot; &quot;\2039\2005&quot; &quot;\2005\203A&quot; 
		is equal to &quot;« &quot; &quot; »&quot; &quot;‹ &quot; &quot; ›&quot; 
	\2039: ‹ (Single left-pointing angle quotation mark)
	\203A: › (Single right-pointing angle quotation mark)
	\2018: ’ (Left single quotation mark)
	\2019: ’ (Right single quotation mark)
	\201A: ‚ (Single low-9 quotation mark)
	\201B: ‛ (Single high-reversed-9 quotation mark)
	\201C: “ (left double quotation mark)
	\201D: ” (right double quotation mark)
	\201E: „ (Double low-9 quotation mark)
	\201F: ‟ (Double high-reversed-9 quotation mark)
	\00AB: « (Double left-pointing angle quotation mark)
	\00BB: » (Double right-pointing angle quotation mark)
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i>, the keyword <i>auto</i>, or a list, 
		each item a pair of string values
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/WD-css-content-3-20190802/#propdef-quotes">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}().;:'&#34;" id="c.css.quotes" idref="c.css.quotes">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default value. A typographically appropriate used value for quotes is automatically 
				chosen by the UA based on the content language of the element and/or its parent.</reference>
			</element>
			<element pattern="none">
				<reference>Specifies that the <i>open-quote</i> and <i>close-quote</i> values of the <i>content</i> 
				property will not produce any quotation marks</reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
<!-- There is no highlighting for the following two elements. I couldn't figure out why... 
  it is because bluefish can only use ascii chcracters in the highlighting, not UTF-8 characters, 
  current SVN and future 2.2.14 releasde will give a warning if UTF-8 characters are used -->
		<!--<element pattern="(‹|›|'|`|‚|‛|“|”|„|‟|«|»)" is_regex="1" highlight="css-value" />-->
		<element pattern="(\\[0-9]+?[0-9]+?[A-F]+)" is_regex="1" highlight="css-value" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="rest" highlight="css-property" id="e.css.rest" idref="e.css.rest">
	<autocomplete append=": " />
	<reference>The <i>rest</i> property is a shorthand for 
		<i>rest-before</i>
		<i>rest-after</i>. 
	If <b>two</b> values are given, the first value is <i>rest-before</i> and 
	the second is <i>rest-after</i>. 
	If only <b>one</b> value is given, it applies to both properties.
	It specifies a prosodic boundary (silence with a specific duration) that 
	occurs before (and after) the speech synthesis rendition of an element 
	within the <i>aural box model</i>.
	<b>Values:</b>  	&lt;<i>time</i>&gt; | none | x-weak | weak | medium | strong | x-strong | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-rest">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.rest" idref="c.css.rest">
	<group highlight="css-value" >
		<autocomplete append=";" />
			<element idref="e.css.time" />
			<element pattern="none">
				<reference>Equivalent to 0ms. (No prosodic break is produced 
				by the speech processor.)</reference>
			</element>
			<element pattern="x-weak">
				<reference>Expresses the rest by the strength of the prosodic break in speech output. 
				The exact time is implementation-dependent. The value indicates monotonically 
				non-decreasing (conceptually increasing) break strength between elements.</reference>
			</element>
			<element pattern="weak">
				<reference>Expresses the rest by the strength of the prosodic break in speech output. 
				The exact time is implementation-dependent. The value indicates monotonically 
				non-decreasing (conceptually increasing) break strength between elements.</reference>
			</element>
			<element pattern="medium">
				<reference>Expresses the rest by the strength of the prosodic break in speech output. 
				The exact time is implementation-dependent. The value indicates monotonically 
				non-decreasing (conceptually increasing) break strength between elements.</reference>
			</element>
			<element pattern="strong">
				<reference>Expresses the rest by the strength of the prosodic break in speech output. 
				The exact time is implementation-dependent. The value indicates monotonically 
				non-decreasing (conceptually increasing) break strength between elements.</reference>
			</element>
			<element pattern="x-strong">
				<reference>Expresses the rest by the strength of the prosodic break in speech output. 
				The exact time is implementation-dependent. The value indicates monotonically 
				non-decreasing (conceptually increasing) break strength between elements.</reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="rest-after" highlight="css-property" id="e.css.rest-after" idref="e.css.rest-after">
	<autocomplete append=": " />
	<reference>The <i>rest-after</i> property specifies a rest or prosodic boundary 
	to be observed after speaking an element's content.
	<b>Values:</b>  	&lt;<i>time</i>&gt; | none | x-weak | weak | medium | strong | x-strong | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-rest-after">www.w3.org</a></reference>
	<context idref="c.css.rest" />
</element>

<element pattern="rest-before" highlight="css-property" id="e.css.rest-before" idref="e.css.rest-before">
	<autocomplete append=": " />
	<reference>The <i>rest-before</i> property specifies a rest or prosodic boundary 
	to be observed before speaking an element's content.
	<b>Values:</b>  	&lt;<i>time</i>&gt; | none | x-weak | weak | medium | strong | x-strong | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-rest-before">www.w3.org</a></reference>
	<context idref="c.css.rest" />
</element>

<element pattern="resize" highlight="css-property" id="e.css.resize" idref="e.css.resize">
	<autocomplete append=": " />
	<reference>The <i>resize</i> property allows the author to specify whether or not 
	an element is resizable by the user, and if so, along which axis/axes.
	<b>Note:</b> The <i>resize</i> property does not apply to inline elements or to block 
	elements where overflow=&quot;visible&quot;. So, make sure that overflow is set to 
	&quot;scroll&quot;, &quot;auto&quot;, or &quot;hidden&quot;.
	<b>Values:</b> none | both | horizontal | vertical | block | inline | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> elements with <i>overflow</i> other than visible, and optionally 
		replaced elements such as images, videos, and iframes
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-resize">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.resize" idref="c.css.resize">
	<group highlight="css-value" >
		<autocomplete append=";" />
			<element pattern="none">
				<reference>Default value. The user cannot resize the element</reference>
			</element>
			<element pattern="both">
				<reference>The user can resize both the height and width of the element</reference>
			</element>
			<element pattern="horizontal">
				<reference>The user can resize the width of the element</reference>
			</element>
			<element pattern="vertical">
				<reference>The user can resize the height of the element</reference>
			</element>
			<element pattern="block">
				<reference>The UA presents a unidirectional block-axis resizing mechanism to 
				allow the user to adjust only the block size of the element.</reference>
			</element>
			<element pattern="inline">
				<reference>The UA presents a unidirectional inline-axis resizing mechanism 
				to allow the user to adjust only the inline size of the element. </reference>
			</element>
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="richness" highlight="css-property" id="e.css.richness" idref="e.css.richness">
	<autocomplete append=": " />
	<reference>The property <i>richness</i> specifies the richness, or brightness, 
	of the speaking voice. A rich voice will "carry" in a large room, a smooth 
	voice will not. (The term &quot;smooth&quot; refers to how the wave form looks 
	when drawn.)
	<b>Values:</b> &lt;<i>number</i>&gt; | inherit | initial
	&lt;<i>number</i>&gt; is a value between <i>0</i> and <i>100</i>. The higher the value, 
	the more the voice will carry. A lower value will produce a soft, mellifluous voice. 
	<b>Initial:</b> 50
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-richness">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.richness" idref="c.css.richness">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<element idref="e.css.number" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="right" highlight="css-property" id="e.css.right" idref="e.css.right">
	<autocomplete append=": " />
	<reference>The <i>right</i> property affects the horizontal position of a positioned 
	element. This property has no effect on non-positioned elements.
	If <i>position: absolute;</i> or <i>position: fixed;</i> - the <i>right</i> property sets the 
	right edge of an element to a unit to the right of the right edge of its nearest 
	positioned ancestor.
	If <i>position: relative;</i> - the <i>right</i> property sets the right edge of an element 
	to a unit to the left/right of its normal position.
	If <i>position: sticky;</i> - the <i>right</i> property behaves like its position is relative 
	when the element is inside the viewport, and like its position is fixed when it is outside.
	If <i>position: static;</i> - the <i>right</i> property has no effect.
	<b>Values:</b> &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | auto | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto.
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-position-3-20220901/#propdef-right">www.w3.org</a></reference>
	<context idref="c.css.bottom"/>
</element>

<element pattern="rotate" highlight="css-property" id="e.css.rotate" idref="e.css.rotate">
	<autocomplete append=": " />
	<reference>The <i>rotate</i> property allows you to rotate elements.
	The <i>rotate</i> property defines a value for how much an element is rotated 
	clockwise around z-axis. To rotate an element around x-axis or y-axis or 
	in other ways, this must be defined.
	Values for <i>rotate</i> property can be given as one angle, axis name + angle, 
	or three values + angle.
	If an angle is given, the element is rotated clockwise around z-axis.
	If axis name + angle is given, the element is rotated clockwise around that 
	given axis.
	If three values are given + angle, the three values define a vector which the 
	element is rotated around.
	<b>Note:</b> An alternative technique to rotate an element is to use CSS transform 
	property with CSS rotate() function. The CSS rotate property is arguably a simpler 
	and more direct way to rotate an element.
	<b>Values:</b> &lt;<i>axis</i>&gt; &lt;<i>angle</i>&gt; | inherit | initial
	&lt;<i>axis</i>&gt;: [[x y z] | [1|0 1|0 1|0]] (any one, two or three)
	&lt;<i>angle</i>&gt;: 0-360deg | 0-6.28rad | 0-1turn | 0-400grad
	<b>Initial:</b> auto
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> n/a
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword none, or an &lt;angle&gt; with an axis consisting 
		of a list of three &lt;<i>number</i>&gt;s
	<b>Animatable:</b> yes
	<b>Animation type:</b> as SLERP (but not with <i>none</i> as value)
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#propdef-rotate">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.rotate" idref="c.css.rotate">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<group highlight="css-value" >
			<autocomplete append=" " />
			<element pattern="x" highlight="css-value" />
			<element pattern="y" highlight="css-value" />
			<element pattern="z" highlight="css-value" />
			<element pattern="1" highlight="css-value" />
			<element pattern="0" highlight="css-value" />
		</group>
		<element idref="e.css.degree"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="row-gap" highlight="css-property" id="e.css.row-gap" idref="e.css.row-gap">
	<autocomplete append=": " />
	<reference>The <i>row-gap</i> property specifies the gap between the rows in a flexbox or grid layout.
	<b>Values:</b> <i>length-percentage</i> | normal | initial | inherit | normal
	<b>Initial:</b> normal
	<b>Applies to:</b>  	multi-column containers, flex containers, grid containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to corresponding dimension of the content area 
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword, else a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Canonical order:</b> per grammar
	<b>Animation type:</b> by computed value type
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-align-3/#propdef-row-gap">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:&quot;'" id="c.css.row-gap" idref="c.css.row-gap">
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="normal">
				<reference>Default value. Specifies a normal gap between the rows</reference>
			</element>
			<element idref="e.css.length" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
<!--
		<element pattern="([A-Za-z0-9;'])" highlight="css-value" is_regex="1" case_insens="1"/>
-->		
		<element idref="e.css.lcomment"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scale" highlight="css-property" id="e.css.scale" idref="e.css.scale">
	<autocomplete append=": " />
	<reference>The <i>scale</i> property allows you to change the size of elements.
	The <i>scale</i> property defines values for how much an element is scaled in x- 
	and y-directions. You can also define how much an element is scaled in z-direction.
	Scale values can be given as one value, two values, or three values.
		If <b>one</b> value is given, the element is scaled the same amount in both x- 
		and y-direction.
		If <b>two</b> values are given, the element is scaled in x- and y-direction 
		individually.
		If <b>three</b> values are given, the element is scaled in x-, y- and 
		z-direction individually.
	<b>Note:</b> An alternative technique to scale an element is to use CSS <i>transform</i> 
	property with CSS scale() function. The CSS scale property is arguably a simpler and 
	more direct way to scale an element.
	<b>Values:</b> none | [ &lt;<i>number</i>&gt; | &lt;<i>percentage</i>&gt; ]{1,3} | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i>, or a list of up to 3 &lt;<i>number</i>&gt;s 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#propdef-scale">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scale" idref="c.css.scale">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.number" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-behavior" highlight="css-property" id="e.css.scroll-behavior" idref="e.css.scroll-behavior">
	<autocomplete append=": " />
	<reference>The <i>scroll-behavior</i> property specifies whether to smoothly 
	animate the scroll position, instead of a straight jump, when the user 
	clicks on a link within a scrollable box.
	<b>Values:</b> auto | smooth | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> scrolling boxes
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#propdef-scroll-behavior">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-behavior" idref="c.css.scroll-behavior">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto" >
				<reference>Allows a straight jump &quot;scroll effect&quot; between elements 
				within the scrolling box. This is the default</reference>
			</element>
			<element pattern="smooth" >
				<reference>Allows a smooth animated &quot;scroll effect&quot; between elements 
				within the scrolling box.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-margin" highlight="css-property" id="e.css.scroll-margin" idref="e.css.scroll-margin">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin</i> property specifies the distance between the 
	snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance between the snap position and the container.
	Snap position is the position on the child element where it snaps into place 
	in the container when you stop scrolling.
	The<i> scroll-margin</i> property is a shorthand property for the following 
	properties:
		scroll-margin-top
		scroll-margin-bottom
		scroll-margin-left
		scroll-margin-right
	Values for the <i>scroll-margin</i> property can be set in different ways:
	If the <i>scroll-margin</i> property has <b>four</b> values:
		scroll-margin: 15px 30px 60px 90px;
			top distance is 15px
			right distance is 30px
			bottom distance is 60px
			left distance is 90px
	If the <i>scroll-margin</i> property has <b>three</b> values:
		scroll-margin: 15px 30px 60px;
			top distance is 15px
			left and right distances are 30px
			bottom distance is 60px
	If the <i>scroll-margin</i> property has <b>two</b> values:
		scroll-margin: 15px 30px;
			top and bottom distances are 15px
			left and right distances are 30px
	If the <i>scroll-margin</i> property has <b>one</b> value:
		scroll-margin: 10px;
			all four distances are 10px
	To see the effect from the <i>scroll-margin</i> property, the <i>scroll-margin</i> 
	and <i>scroll-snap-align</i> properties must be set on the child elements, and the 
	<i>scroll-snap-type</i> property must be set on the parent element.
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> per side, an absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-margin" idref="c.css.scroll-margin">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length.neg" />
		<element pattern="0" highlight="css-value">
			<reference>Scroll-margin is zero. This is the default</reference>
		</element>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-margin-block" highlight="css-property" id="e.css.scroll-margin-block" idref="e.css.scroll-margin-block">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-block</i> property specifies the distance in 
	block direction, between the snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance in block direction, between the snap 
	position and the container.
	Block direction is where the next line is put compared to the position 
	of an existing line, and this is also how tags with CSS display: block; 
	like &lt;p&gt; and &lt;div&gt; tags are laid out on a page. Block direction 
	is dependent on the written language, i.e. Mongolian where new lines are 
	laid out left to right which makes block direction left to right, while 
	pages in English have a downward block direction. Block direction can be 
	defined with CSS property <i>writing-mode</i>.
	Snap position is the position on the child element where it snaps into 
	place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> or <i>end</i> for the block direction.
	The <i>scroll-margin-block</i> property is a shorthand property for the 
	following properties:
		<i>scroll-margin-block-start</i>
		<i>scroll-margin-block-end</i>
	Values for the <i>scroll-margin-block</i> property can be set in different ways:
	If the <i>scroll-margin-block</i> property has <b>two</b> values:
		scroll-margin-block: 10px 50px;
			distance at start is 10px
			distance at end is 50px
	If the <i>scroll-margin-block</i> property has <b>one</b> value:
		scroll-margin-block: 10px;
			distance at start and end is 10px
	To see the effect from the <i>scroll-margin-block</i> property, the 
	<b>scroll-margin-block</b> and <i>scroll-snap-align</i> properties must be set 
	on the child elements, and the scroll-snap-type property must be set on the parent 
	element.
	The CSS <i>scroll-margin-inline</i> and <i>scroll-margin-block</i> properties are very 
	similar to CSS properties <i>scroll-margin-top</i>, <i>scroll-margin-bottom</i>, 
	<i>scroll-margin-left</i> and <i>scroll-margin-right</i>, but the <i>scroll-margin-block</i> 
	and <i>scroll-margin-inline</i> properties are dependent on block and inline directions. 
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> per side, an absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-block">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-block-end" highlight="css-property" id="e.css.scroll-margin-block-end" idref="e.css.scroll-margin-block-end">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-block-end</i> property specifies the distance 
	in block direction, between the snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance in block direction, between the snap 
	position at the end of the child element and the container.
	<b>Block direction</b> is where the next line is put compared to the position 
	of an existing line, and this is also how tags with CSS display: block; 
	like &lt;p&gt; and &lt;div&gt; tags are laid out on a page. Block direction 
	is dependent on the written language, i.e. Mongolian where new lines are 
	laid out left to right which makes block direction left to right, while 
	pages in English have a downward block direction. Block direction can be 
	defined with CSS property <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>end</i> for the block direction.
	To see the effect from the <i>scroll-margin-block-end</i> property, the 
	<b>scroll-margin-block-end</b> and <i>scroll-snap-align</i> properties must be set 
	on the child elements, and the scroll-snap-type property must be set on the parent 
	element.
	The CSS <i>scroll-margin-inline</i> and <i>scroll-margin-block</i> properties are very 
	similar to CSS properties <i>scroll-margin-top</i>, <i>scroll-margin-bottom</i>, 
	<i>scroll-margin-left</i> and <i>scroll-margin-right</i>, but the <i>scroll-margin-block</i> 
	and <i>scroll-margin-inline</i> properties are dependent on block and inline directions. 
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-block-end">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-block-start" highlight="css-property" id="e.css.scroll-margin-block-start" idref="e.css.scroll-margin-block-start">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-block-start</i> property specifies the distance 
	in block direction, between the snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance in block direction, between the snap 
	position at the start of the child element and the container.
	<b>Block direction</b> is where the next line is put compared to the position 
	of an existing line, and this is also how tags with CSS display: block; 
	like &lt;p&gt; and &lt;div&gt; tags are laid out on a page. Block direction 
	is dependent on the written language, i.e. Mongolian where new lines are 
	laid out left to right which makes block direction left to right, while 
	pages in English have a downward block direction. Block direction can be 
	defined with CSS property <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> for the block direction.
	To see the effect from the <i>scroll-margin-block-start</i> property, the 
	<b>scroll-margin-block-start</b> and <i>scroll-snap-align</i> properties must be set 
	on the child elements, and the <i>scroll-snap-type</i> property must be set on the 
	parent element.
	The CSS <i>scroll-margin-inline</i> and <i>scroll-margin-block</i> properties are very 
	similar to CSS properties <i>scroll-margin-top</i>, <i>scroll-margin-bottom</i>, 
	<i>scroll-margin-left</i> and <i>scroll-margin-right</i>, but the <i>scroll-margin-block</i> 
	and <i>scroll-margin-inline</i> properties are dependent on block and inline directions. 
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-block-start">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-bottom" highlight="css-property" id="e.css.scroll-margin-bottom" idref="e.css.scroll-margin-bottom">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-bottom</i> property specifies the distance 
	between the snap position and the container.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the snap position is placed at the 
	bottom of the child element.
	To see the effect from the <i>scroll-margin-bottom</i> property, the 
	<b>scroll-margin-bottom</b> and <i>scroll-snap-align</i> properties must be set 
	on the child elements, and the <i>scroll-snap-type</i> property must be set on the 
	parent element.
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-bottom">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-inline" highlight="css-property" id="e.css.scroll-margin-inline" idref="e.css.scroll-margin-inline">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-inline</i> property specifies the distance in 
	the inline direction, between the snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance in the inline direction, between the snap 
	position and the container.
	<b>Inline direction</b> is where the next character is put compared to the 
	position of the existing characters in a line, and this is also how tags 
	with CSS <i>display: inline</i>; like a&lt;&gt; and &lt;strong&gt; tags are 
	laid out in a text. Inline direction is dependent on the written language, 
	i.e. Arabic where new charachters are laid out right to left which makes 
	inline direction right to left, while pages in English have a left to right 
	inline direction. Inline direction can be defined with CSS properties <i>direction</i> 
	and <i>writing-mode</i>.
	The <i>scroll-margin-inline</i> property is a shorthand property for the 
	following properties:
		<i>scroll-margin-inline-start</i>
		<i>scroll-margin-inline-end</i>
	Values for the <i>scroll-margin-inline</i> property can be set in different ways:
	If the <i>scroll-margin-inline</i> property has <b>two</b> values:
		scroll-margin-inline: 10px 50px;
			distance at start is 10px
			distance at end is 50px
	If the <i>scroll-margin-inline</i> property has <b>one</b> value:
		scroll-margin-inline: 10px;
			distance at start and end is 10px
	To see the effect from the <i>scroll-margin-inline</i> property, the 
	<b>scroll-margin-inline</b> and <i>scroll-snap-align</i> properties must be set 
	on the child elements, and the scroll-snap-type property must be set on the parent 
	element.
	The CSS <i>scroll-margin-inline</i> and <i>scroll-margin-block</i> properties are very 
	similar to CSS properties <i>scroll-margin-top</i>, <i>scroll-margin-bottom</i>, 
	<i>scroll-margin-left</i> and <i>scroll-margin-right</i>, but the <i>scroll-margin-block</i> 
	and <i>scroll-margin-inline</i> properties are dependent on block and inline directions. 
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> per side, an absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-inline">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-inline-end" highlight="css-property" id="e.css.scroll-margin-inline-end" idref="e.css.scroll-margin-inline-end">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-inline-end</i> property specifies the distance 
	in the inline direction, between the snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance in the inline direction, between the snap 
	position at the end of the child element and the container.
	<b>Inline direction</b> is where the next character is put compared to the 
	position of the existing characters in a line, and this is also how tags 
	with CSS <i>display: inline</i>; like a&lt;&gt; and &lt;strong&gt; tags are 
	laid out in a text. Inline direction is dependent on the written language, 
	i.e. Arabic where new charachters are laid out right to left which makes 
	inline direction right to left, while pages in English have a left to right 
	inline direction. Inline direction can be defined with CSS properties <i>direction</i> 
	and <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>end</i> for the inline direction.
	To see the effect from the <i>scroll-margin-inline-end</i> property, the 
	<b>scroll-margin-inline-end</b> and <i>scroll-snap-align</i> properties must be set 
	on the child elements, and the scroll-snap-type property must be set on the parent 
	element.
	The CSS <i>scroll-margin-inline</i> and <i>scroll-margin-block</i> properties are very 
	similar to CSS properties <i>scroll-margin-top</i>, <i>scroll-margin-bottom</i>, 
	<i>scroll-margin-left</i> and <i>scroll-margin-right</i>, but the <i>scroll-margin-block</i> 
	and <i>scroll-margin-inline</i> properties are dependent on block and inline directions. 
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-inline-end">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-inline-start" highlight="css-property" id="e.css.scroll-margin-inline-start" idref="e.css.scroll-margin-inline-start">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-inline-start</i> property specifies the distance 
	in the inline direction, between the snap position and the container.
	This means that when you stop scrolling, the scrolling will quickly adjust 
	and stop at a specified distance in the inline direction, between the snap 
	position at the start of the child element and the container.
	<b>Inline direction</b> is where the next character is put compared to the 
	position of the existing characters in a line, and this is also how tags 
	with CSS <i>display: inline</i>; like a&lt;&gt; and &lt;strong&gt; tags are 
	laid out in a text. Inline direction is dependent on the written language, 
	i.e. Arabic where new charachters are laid out right to left which makes 
	inline direction right to left, while pages in English have a left to right 
	inline direction. Inline direction can be defined with CSS properties <i>direction</i> 
	and <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> for the block direction.
	The CSS <i>scroll-margin-inline</i> and <i>scroll-margin-block</i> properties are very 
	similar to CSS properties <i>scroll-margin-top</i>, <i>scroll-margin-bottom</i>, 
	<i>scroll-margin-left</i> and <i>scroll-margin-right</i>, but the <i>scroll-margin-block</i> 
	and <i>scroll-margin-inline</i> properties are dependent on block and inline directions. 
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-inline-start">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-left" highlight="css-property" id="e.css.scroll-margin-left" idref="e.css.scroll-margin-left">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-left</i> property specifies the distance 
	between the snap position and the container.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling. Snap position is set with 
	<i>scroll-snap-align</i> property, but can also be affected by CSS properties 
	<i>direction</i> and <i>writing-mode</i>.
	<b>Note:</b> This property only works if the snap position is placed on the 
	left side of the child element.
	To see the effect from the <i>scroll-margin-left</i> property, the 
	<i>scroll-margin-left</i> and <i>scroll-snap-align</i> properties must be set on 
	the child elements, and the <i>scroll-snap-type</i> property must be set on the 
	parent element.
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-left">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-right" highlight="css-property" id="e.css.scroll-margin-right" idref="e.css.scroll-margin-right">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-right</i> property specifies the distance 
	between the snap position and the container.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling. Snap position is set with 
	<i>scroll-snap-align</i> property, but can also be affected by CSS properties 
	<i>direction</i> and <i>writing-mode</i>.
	<b>Note:</b> This property only works if the snap position is placed on the 
	left side of the child element.
	To see the effect from the <i>scroll-margin-right</i> property, the 
	<i>scroll-margin-right</i> and <i>scroll-snap-align</i> properties must be set on 
	the child elements, and the <i>scroll-snap-type</i> property must be set on the 
	parent element.
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-right">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-margin-top" highlight="css-property" id="e.css.scroll-margin-top" idref="e.css.scroll-margin-top">
	<autocomplete append=": " />
	<reference>The <i>scroll-margin-top</i> property specifies the distance 
	between the snap position and the container.
	<b>Snap position</b> is the position on the child element where it snaps into 
	place in the container when you stop scrolling. Snap position is set with 
	<i>scroll-snap-align</i> property, but can also be affected by CSS properties 
	<i>direction</i> and <i>writing-mode</i>.
	<b>Note:</b> This property only works if the snap position is placed at the 
	top of the child element.
	To see the effect from the <i>scroll-margin-top</i> property, the 
	<i>scroll-margin-top</i> and <i>scroll-snap-align</i> properties must be set on 
	the child elements, and the <i>scroll-snap-type</i> property must be set on the 
	parent element.
	<b>Values:</b> 0 | &lt;<i>length</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are allowed.
	<b>Initial:</b> 0
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-margin-top">www.w3.org</a></reference>
	<context idref="c.css.scroll-margin" />
</element>

<element pattern="scroll-padding" highlight="css-property" id="e.css.scroll-padding" idref="e.css.scroll-padding">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding</i> property specifies the distance 
	from the container to the snap position of child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance from the container to the 
	snap position of the child element in focus.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	The <i>scroll-padding</i> property is a shorthand property for the 
	following properties:
		scroll-padding-top
		scroll-padding-bottom
		scroll-padding-left
		scroll-padding-right
	Values for the <i>scroll-padding</i> property can be set in 
	different ways:
	If the <i>scroll-padding</i> property has <b>four</b> values:
		scroll-padding: 15px 30px 60px 90px;
			top distance is 15px
			right distance is 30px
			bottom distance is 60px
			left distance is 90px
	If the <i>scroll-padding</i> property has <b>three</b> values:
		scroll-padding: 15px 30px 60px;
			top distance is 15px
			left and right distances are 30px
			bottom distance is 60px
	If the <i>scroll-padding</i> property has <b>two</b> values:
		scroll-padding: 15px 30px;
			top and bottom distances are 15px
			left and right distances are 30px
	If the <i>scroll-padding</i> property has <b>one</b> value:
		scroll-padding: 10px;
			all four distances are 10px
	To see the effect from the <i>scroll-padding</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, 
	and the <i>scroll-padding</i> and <i>scroll-snap-type</i> properties 
	must be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-block" highlight="css-property" id="e.css.scroll-padding-block" idref="e.css.scroll-padding-block">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-block</i> property specifies the distance 
	in block direction, from the container to the snap position on the 
	child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance in block direction, between 
	the snap position and the container.
	<b>Block direction</b> is where the next line is put compared to the 
	position of an existing line, and this is also how tags with CSS 
	<i>display: block;</i> like &lt;p&gt; and &lt;div&gt; tags are laid out 
	on a page. Block direction is dependent on the written language, i.e. 
	Mongolian where new lines are laid out left to right which makes block 
	direction left to right, while pages in English have a downward block 
	direction. Block direction can be defined with CSS property <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> or <i>end</i> for the block direction.
	The <i>scroll-padding-block</i> property is a shorthand property for 
	the following properties:
		scroll-padding-block-start
		scroll-padding-block-end
	Values for the scroll-padding-block property can be set in different ways:
	If the <i>scroll-padding-block</i> property has <b>two</b> values:
		scroll-padding-block: 10px 50px;
			distance at start is 10px
			distance at end is 50px
	If the <i>scroll-padding-block</i> property has <b>one</b> value:
		scroll-padding-block: 10px;
			distance at start and end is 10px
	To see the effect from the <i>scroll-padding-block</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, 
	and the <i>scroll-padding-block</i> and the scroll-snap-type properties 
	must be set on the parent element.
	The CSS <i>scroll-padding-block</i> and <i>scroll-padding-inline</i> properties 
	are very similar to CSS properties <i>scroll-padding-top</i>, 
	<i>scroll-padding-bottom</i>, <i>scroll-padding-left</i> and <i>scroll-padding-right</i>, 
	but the <i>scroll-padding-block</i> and <i>scroll-padding-inline</i> properties are 
	dependent on block and inline directions. 
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-block">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-block-end" highlight="css-property" id="e.css.scroll-padding-block-end" idref="e.css.scroll-padding-block-end">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-block-end</i> property specifies the 
	distance in block direction from the end of the container to the snap 
	position on the child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance in block direction, between 
	the snap position and the container.
	<b>Block direction</b> is where the next line is put compared to the 
	position of an existing line, and this is also how tags with CSS 
	<i>display: block;</i> like &lt;p&gt; and &lt;div&gt; tags are laid out 
	on a page. Block direction is dependent on the written language, i.e. 
	Mongolian where new lines are laid out left to right which makes block 
	direction left to right, while pages in English have a downward block 
	direction. Block direction can be defined with CSS property <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>end</i> for the block direction.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-block-end">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-block-start" highlight="css-property" id="e.css.scroll-padding-block-start" idref="e.css.scroll-padding-block-start">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-block-start</i> property specifies the 
	distance in block direction from the start of the container to the snap 
	position on the child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance in block direction, between 
	the snap position and the container.
	<b>Block direction</b> is where the next line is put compared to the 
	position of an existing line, and this is also how tags with CSS 
	<i>display: block;</i> like &lt;p&gt; and &lt;div&gt; tags are laid out 
	on a page. Block direction is dependent on the written language, i.e. 
	Mongolian where new lines are laid out left to right which makes block 
	direction left to right, while pages in English have a downward block 
	direction. Block direction can be defined with CSS property <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> for the block direction.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-block-start">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-bottom" highlight="css-property" id="e.css.scroll-padding-bottom" idref="e.css.scroll-padding-bottom">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-bottom</i> property specifies the distance 
	from the bottom of the container to the snap position on the 
	child elements.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is placed at the bottom of the child element.
	To see the effect from the <i>scroll-padding-bottom</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, and 
	the <i>scroll-padding-bottom</i> and the <i>scroll-snap-type</i> properties must 
	be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-bottom">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-inline" highlight="css-property" id="e.css.scroll-padding-inline" idref="e.css.scroll-padding-inline">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-inline</i> property specifies the distance 
	in inline direction, from the container to the snap position on the 
	child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance in block direction, between 
	the snap position and the container.
	<b>Inline direction</b> is where the next character is put compared to 
	the position of the existing characters in a line, and this is also how 
	tags with CSS <i>display: inline;</i> like &lt;a&gt; and &lt;strong&gt; 
	tags are laid out in a text. Inline direction is dependent on the written 
	language, i.e. Arabic where new charachters are laid out right to left 
	which makes inline direction right to left, while pages in English have 
	a left to right inline direction. Inline direction can be defined with 
	CSS properties <i>direction</i> and <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> for the block direction.
	The <i>scroll-padding-inline</i> property is a shorthand property for 
	the following properties:
		scroll-padding-inline-start
		scroll-padding-inline-end
	Values for the scroll-padding-inline property can be set in different ways:
	If the <i>scroll-padding-inline</i> property has <b>two</b> values:
		scroll-padding-inline: 10px 50px;
			distance at start is 10px
			distance at end is 50px
	If the <i>scroll-padding-inline</i> property has <b>one</b> value:
		scroll-padding-inline: 10px;
			distance at start and end is 10px
	To see the effect from the <i>scroll-padding-inline</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, 
	and the <i>scroll-padding-inline</i> and the scroll-snap-type properties 
	must be set on the parent element.
	The CSS <i>scroll-padding-block</i> and <i>scroll-padding-inline</i> properties 
	are very similar to CSS properties <i>scroll-padding-top</i>, 
	<i>scroll-padding-bottom</i>, <i>scroll-padding-left</i> and <i>scroll-padding-right</i>, 
	but the <i>scroll-padding-block</i> and <i>scroll-padding-inline</i> properties are 
	dependent on block and inline directions. 
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-inline">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-inline-end" highlight="css-property" id="e.css.scroll-padding-inline-end" idref="e.css.scroll-padding-inline-end">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-inline-end</i> property specifies the 
	distance in the inline direction from the end of the container to the snap 
	position on the child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance in the inline direction, between 
	the snap position and the container.
	<b>Inline direction</b> is where the next character is put compared to the 
	position of the existing characters in a line, and this is also how tags 
	with CSS <i>display: inline;</i> like &lt;a&gt; and &lt;strong&gt; tags are 
	laid out in a text. Inline direction is dependent on the written language, 
	i.e. Arabic where new charachters are laid out right to left which makes 
	inline direction right to left, while pages in English have a left to right 
	inline direction. Inline direction can be defined with CSS properties 
	<i>direction</i> and <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>end</i> for the inline direction.
	To see the effect from the <i>scroll-padding-inline-end</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, and the 
	<i>scroll-padding-inline-end</i> and the <i>scroll-snap-type</i> properties must 
	be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-inline-end">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-inline-start" highlight="css-property" id="e.css.scroll-padding-inline-start" idref="e.css.scroll-padding-inline-start">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-inline-start</i> property specifies the 
	distance in the inline direction from the start of the container to the snap 
	position on the child elements.
	This means that when you stop scrolling, the scrolling will quickly 
	adjust and stop at a specified distance in the inline direction, between 
	the snap position and the container.
	<b>Inline direction</b> is where the next character is put compared to the 
	position of the existing characters in a line, and this is also how tags 
	with CSS <i>display: inline;</i> like &lt;a&gt; and &lt;strong&gt; tags are 
	laid out in a text. Inline direction is dependent on the written language, 
	i.e. Arabic where new charachters are laid out right to left which makes 
	inline direction right to left, while pages in English have a left to right 
	inline direction. Inline direction can be defined with CSS properties 
	<i>direction</i> and <i>writing-mode</i>.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is set to <i>start</i> for the inline direction.
	To see the effect from the <i>scroll-padding-inline-start</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, and the 
	<i>scroll-padding-inline-start</i> and the <i>scroll-snap-type</i> properties must 
	be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-inline-start">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-left" highlight="css-property" id="e.css.scroll-padding-left" idref="e.css.scroll-padding-left">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-left</i> property specifies the distance 
	from the left side of the container to the snap position on the 
	child elements.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is placed on the left side of the child element.
	To see the effect from the <i>scroll-padding-left</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, and 
	the <i>scroll-padding-left</i> and the <i>scroll-snap-type</i> properties must 
	be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-left">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-right" highlight="css-property" id="e.css.scroll-padding-right" idref="e.css.scroll-padding-right">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-right</i> property specifies the distance 
	from the right side of the container to the snap position on the 
	child elements.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is placed on the right side of the child element.
	To see the effect from the <i>scroll-padding-right</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, and 
	the <i>scroll-padding-right</i> and the <i>scroll-snap-type</i> properties must 
	be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-right">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-padding-top" highlight="css-property" id="e.css.scroll-padding-top" idref="e.css.scroll-padding-top">
	<autocomplete append=": " />
	<reference>The <i>scroll-padding-top</i> property specifies the distance 
	from the top of the container to the snap position on the 
	child elements.
	<b>Snap position</b> is the position on the child element where it snaps 
	into place in the container when you stop scrolling.
	<b>Note:</b> This property only works if the <i>scroll-snap-align</i> property 
	is placed at the top of the child element.
	To see the effect from the <i>scroll-padding-top</i> property, the 
	<i>scroll-snap-align</i> property must be set on the child elements, and 
	the <i>scroll-padding-top</i> and the <i>scroll-snap-type</i> properties must 
	be set on the parent element.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Note:</b> Negative values are <i>not</i> allowed.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the scroll container’s scrollport
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>auto</i> or a computed &lt;<i>length-percentage</i>&gt; value
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value type
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-padding-top">www.w3.org</a></reference>
	<context idref="c.css.padding-block" />
</element>

<element pattern="scroll-snap-align" highlight="css-property" id="e.css.scroll-snap-align" idref="e.css.scroll-snap-align">
	<autocomplete append=": " />
	<reference>The <i>scroll-snap-align property</i> specifies where elements 
	will snap into focus when you stop scrolling.
	To acheive scroll snap behaviour, the <i>scroll-snap-align</i> property must be 
	set on the child elements, and the <i>scroll-snap-type</i> property must be set 
	on the parent element.
	<b>Values:</b> none | start | end | center | &lt;<i>block inline</i>&gt; | inherit | initial
	&lt;<i>block inline</i>&gt;: first value indicates how to snap in block direction, the 
		second how to snap in inline direction.
	<b>Example:</b> scroll-snap-align: none center;
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> two keywords
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-snap-align">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-snap-align" idref="c.css.scroll-snap-align">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none">
				<reference>No scroll snap effect. This is default</reference>
			</element>
			<element pattern="start">
				<reference>Scroll snap at start of elements on x- and y-axis.</reference>
			</element>
			<element pattern="center">
				<reference>Scroll snap at end of elements on x- and y-axis.</reference>
			</element>
			<element pattern="end">
				<reference>Scroll snap at center of elements on x- and y-axis.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-snap-stop" highlight="css-property" id="e.css.scroll-snap-stop" idref="e.css.scroll-snap-stop">
	<autocomplete append=": " />
	<reference>When swiping fast on a trackpad or a touch screen, the 
	<i>scroll-snap-stop</i> property specifies whether to scroll past 
	elements or to stop and snap on the next element.
	To control scroll snap stop behaviour, the <i>scroll-snap-stop</i> and 
	<i>scroll-snap-align</i> properties must be set on the child elements, 
	and the <i>scroll-snap-type</i> property must be set on the parent element.
	<b>Note:</b> You must use swipe gesture on a device with a trackpad or a 
	touch screen to experience the effect of the <i>scroll-snap-stop</i> property.
	<b>Values:</b> normal | always | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-snap-stop">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-snap-stop" idref="c.css.scroll-snap-stop">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default value. After fast swipe with touchpad or touch screen, 
				the scrolling slows down slowly and passes several elements.</reference>
			</element>
			<element pattern="always">
				<reference>After fast swipe with touchpad or touch screen, scrolling stops 
				and the next element snaps into focus.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-snap-type" highlight="css-property" id="e.css.scroll-snap-type" idref="e.css.scroll-snap-type">
	<autocomplete append=": " />
	<reference>The <i>scroll-snap-type</i> specifies how the elements will snap into 
	focus when you stop scrolling, and in what direction.
	To achieve scroll snap behaviour, the <i>scroll-snap-type</i> property 
	must be set on the parent element, and the <i>scroll-snap-align</i> 
	property must be set on the child elements.
	<b>Values:</b> none | x | y | block | inline | both | mandatory | proximity | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scroll-snap-1-20210311/#propdef-scroll-snap-stop">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-snap-type" idref="c.css.scroll-snap-type">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none">
				<reference>No scroll snap effect. This is default</reference>
			</element>
			<element pattern="x">
				<reference>Scroll snap effect is set on x-axis</reference>
			</element>
			<element pattern="y">
				<reference>Scroll snap effect is set on y-axis</reference>
			</element>
			<element pattern="block">
				<reference>Scroll snap effect is set on block direction</reference>
			</element>
			<element pattern="inline">
				<reference>Scroll snap effect is set on inline direction</reference>
			</element>
			<element pattern="both">
				<reference>Scroll snap effect is set on both x- and y-axis</reference>
			</element>
			<element pattern="mandatory">
				<reference>Scroll will automatically move to snap point after scroll 
				action is finished</reference>
			</element>
			<element pattern="proximity">
				<reference>Similar to mandatory, but not as strict. Scroll will automatically 
				move to snap point after scroll action is finished, but inbetween snap 
				points there is an area without the snap effect. Depends on browser 
				parameters.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-timeline" highlight="css-property" id="e.css.scroll-timeline" idref="e.css.scroll-timeline">
	<autocomplete append=": " />
	<reference>This property is a shorthand for setting 
		<i>scroll-timeline-name</i>
		<i>scroll-timeline-axis</i>
	<b>Values:</b> [ &lt;<i>scroll-timeline-name</i>&gt; || &lt;<i>scroll-timeline-axis</i>&gt; ]
	&lt;<i>scroll-timeline-name</i>&gt;: none | &lt;<i>custom-id</i>&gt;
	&lt;<i>scroll-timeline-axis</i>&gt;: [ block | inline | vertical | horizontal ]
	<b>Initial:</b> none block
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-scroll-animations-1-20221208/#propdef-scroll-timeline">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-timeline" idref="c.css.scroll-timeline">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none" />
			<element pattern="block">
				<reference>Default. Specifies to use the measure of progress 
				along the block axis of the scroll container.</reference>
			</element>
			<element pattern="inline">
				<reference>Specifies to use the measure of progress along the 
				inline axis of the scroll container. </reference>
			</element>
			<element pattern="vertical">
				<reference>Specifies to use the measure of progress along the 
				vertical axis of the scroll container. </reference>
			</element>
			<element pattern="horizontal">
				<reference>Specifies to use the measure of progress along the 
				horizontal axis of the scroll container. </reference>
			</element>
		</group>
		<element idref="e.css.text"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-timeline-axis" highlight="css-property" id="e.css.scroll-timeline-axis" idref="e.css.scroll-timeline-axis">
	<autocomplete append=": " />
	<reference>Specifies an axis for each scroll progress timeline associated with 
	this scroll container. The name for this timeline is given by 
	<i>scroll-timeline-name.</i>
	<b>Values:</b> [ block | inline | vertical | horizontal ]
	<b>Initial:</b> block
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-scroll-animations-1-20221208/#propdef-scroll-timeline-axis">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-timeline" idref="c.css.scroll-timeline">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="block">
				<reference>Default. Specifies to use the measure of progress 
				along the block axis of the scroll container.</reference>
			</element>
			<element pattern="inline">
				<reference>Specifies to use the measure of progress along the 
				inline axis of the scroll container. </reference>
			</element>
			<element pattern="vertical">
				<reference>Specifies to use the measure of progress along the 
				vertical axis of the scroll container. </reference>
			</element>
			<element pattern="horizontal">
				<reference>Specifies to use the measure of progress along the 
				horizontal axis of the scroll container. </reference>
			</element>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scroll-timeline-name" highlight="css-property" id="e.css.scroll-timeline-name" idref="e.css.scroll-timeline-name">
	<autocomplete append=": " />
	<reference>Specifies names for the scroll progress timelines associated with 
	this scroll container. The axis for this timeline is given by 
	<i>scroll-timeline-axis</i>.
	<b>Values:</b> none | &lt;<i>custom-id</i>&gt;
	<b>Initial:</b> none
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-scroll-animations-1-20221208/#propdef-scroll-timeline-name">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scroll-timeline-name" idref="c.css.scroll-timeline-name">
		<element idref="e.css.text"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="scrollbar-color" highlight="css-property" id="e.css.scrollbar-color" idref="e.css.scrollbar-color">
	<autocomplete append=": " />
	<reference>This property allows the author to set colors of an element’s scrollbars.
	UAs must apply the <i>scrollbar-color</i> value set on the root element to the viewport.
	<b>Values:</b> auto | &lt;<i>color</i>&gt; &lt;<i>color</i>&gt; | inherit | initial
	auto: The user agent determines the colors of the scrollbar. It should 
		follow platform conventions, but may adjust the colors in accordance with 
		<i>color-scheme</i> or other contextual information to better suit the page.
	&lt;<i>color</i>&gt;: apply the first color to the thumb of the scrollbar, 
		and the second color to the track of the scrollbar.
	<b>Initial:</b> auto
	<b>Applies to:</b> scroll containers
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword or two computed colors
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/CR-css-scrollbars-1-20211209/#propdef-scrollbar-color">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.scrollbar-color" idref="c.css.scrollbar-color">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>The user agent determines the colors of the scrollbar. It should 
		follow platform conventions, but may adjust the colors in accordance with 
		<i>color-scheme</i> or other contextual information to better suit the page.</reference>
			</element>
		</group>
		<element idref="e.css.colors"/>
		<element idref="e.css.hex-color"/>
		<element idref="e.css.rgba-color"/>
		<element idref="e.css.rgb-color"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="shape-inside" highlight="css-property" id="e.css.shape-inside" idref="e.css.shape-inside">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by
	any major browser.
	The property <i>shape-inside</i> defines an element, which can be 
	filled with text that wraps along the edge of the possibly 
	non-rectangular element.
	<b>Values:</b> auto | outside-shape | [ &lt;<i>basic-shape</i>&gt; || &lt;<i>shape-box</i>&gt; ] | &lt;<i>image</i>&gt; | display
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> computed lengths for &lt;<i>basic-shape</i>&gt;, the 
		absolute URI for &lt;<i>image</i>&gt;, otherwise as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2016/WD-css-round-display-1-20161222/#propdef-shape-inside">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.shape-inside" idref="c.css.shape-inside">
		<element idref="e.css.url" />
		<element idref="e.css.path" />
		<element idref="e.css.inset" />
		<element idref="e.css.xywh" />
		<element idref="e.css.rect" />
		<element idref="e.css.circle" />
		<element idref="e.css.ellipse" />
		<element idref="e.css.polygon" />
		<element idref="e.css.ray" />
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default. Sets the shape of the fillable area automatically
				according to the element's content box or the physical bounderies
				of the display.</reference>
			</element>
			<element pattern="outside-shape" >
				<reference></reference>
			</element>
			<element pattern="margin-box" >
				<reference>The <i>margin-box</i> value defines the shape enclosed by 
				the outside margin edge. The corner radii of this shape are determined 
				by the corresponding border-radius and margin values.</reference>
			</element>
			<element pattern="border-box" >
				<reference>The <i>border-box</i> value defines the shape enclosed by 
				the outside border edge. This shape follows all of the normal border 
				radius shaping rules for the outside of the border.</reference>
			</element>
			<element pattern="padding-box" >
				<reference>The <i>padding-box</i> value defines the shape enclosed by 
				the outside padding edge. This shape follows all of the normal border 
				radius shaping rules for the inside of the border.</reference>
			</element>
			<element pattern="content-box" >
				<reference>The <i>content-box</i> value defines the shape enclosed by 
				the outside content edge. Each corner radius of this box is the larger 
				of 0 or <i>border-radius</i> - <i>border-width</i> - <i>padding</i>.</reference>
			</element>
			<element pattern="display" >
				<reference>Takes the dimensions of the display as fillable area.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="shape-margin" highlight="css-property" id="e.css.shape-margin" idref="e.css.shape-margin">
	<autocomplete append=": " />
	<reference>The property <i>shape-margin</i> adds a margin to a 
	shape-outside. This defines a new shape that is the smallest 
	contour (in the shrink-wrap sense) that includes all the points 
	that are the shape-margin distance outward in the perpendicular 
	direction from a point on the underlying shape.
	<b>Values:</b> &lt;<i>length-percentage</i>&gt; | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> floats
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the inline size of the containing block
	<b>Media:</b> visual
	<b>Computed value:</b> &lt;<i>basic-shape</i>&gt;
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-shapes-1-20221115/#propdef-shape-margin">www.w3.org</a></reference>
	<context idref="c.css.length_percentage" />
</element>

<element pattern="shape-outside" highlight="css-property" id="e.css.shape-outside" idref="e.css.shape-outside">
	<autocomplete append=": " />
	<reference>The property <i>shape-margin</i> adds a margin to a 
	shape-outside. This defines a new shape that is the smallest 
	contour (in the shrink-wrap sense) that includes all the points 
	that are the shape-margin distance outward in the perpendicular 
	direction from a point on the underlying shape.
	<b>Values:</b> none | [ &lt;<i>basic-shape</i>&gt; || &lt;<i>shape-box</i>&gt; ] | &lt;<i>image</i>&gt;
	<b>Initial:</b> none
	<b>Applies to:</b> floats
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as defined for &lt;<i>basic-shape</i>&gt; (with 
		&lt;<i>shape-box</i>&gt; following, if supplied); else the computed &lt;<i>image</i>&gt;; 
		else the keyword as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> as defined for &lt;<i>basic-shape</i>&gt;, otherwise discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-shapes-1-20221115/#propdef-shape-outside">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.shape-outside" idref="c.css.shape-outside">
		<element idref="e.css.url" />
		<element idref="e.css.path" />
		<element idref="e.css.inset" />
		<element idref="e.css.xywh" />
		<element idref="e.css.rect" />
		<element idref="e.css.circle" />
		<element idref="e.css.ellipse" />
		<element idref="e.css.polygon" />
		<element idref="e.css.ray" />
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="none">
				<reference>Default.</reference>
			</element>
			<element pattern="outside-shape" >
				<reference></reference>
			</element>
			<element pattern="margin-box" >
				<reference>The <i>margin-box</i> value defines the shape enclosed by 
				the outside margin edge. The corner radii of this shape are determined 
				by the corresponding border-radius and margin values.</reference>
			</element>
			<element pattern="border-box" >
				<reference>The <i>border-box</i> value defines the shape enclosed by 
				the outside border edge. This shape follows all of the normal border 
				radius shaping rules for the outside of the border.</reference>
			</element>
			<element pattern="padding-box" >
				<reference>The <i>padding-box</i> value defines the shape enclosed by 
				the outside padding edge. This shape follows all of the normal border 
				radius shaping rules for the inside of the border.</reference>
			</element>
			<element pattern="content-box" >
				<reference>The <i>content-box</i> value defines the shape enclosed by 
				the outside content edge. Each corner radius of this box is the larger 
				of 0 or <i>border-radius</i> - <i>border-width</i> - <i>padding</i>.</reference>
			</element>
			<element pattern="display" >
				<reference>Takes the dimensions of the display as fillable area.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="speak" highlight="css-property" id="e.css.speak" idref="e.css.speak">
	<autocomplete append=": " />
	<reference>The property <i>speak</i> specifies whether text will be rendered 
	aurally and if so, in what manner.
	<b>Values:</b> 	auto | never | always | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-speak">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.speak" idref="c.css.speak">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default. Resolves to a computed value of never when display is none, 
				otherwise resolves to a computed value of auto. The used value of a computed 
				auto is equivalent to always if visibility is visible and to never otherwise. </reference>
			</element>
			<element pattern="never" >
				<reference>This value causes an element (including pauses, cues, rests and 
				actual content) to not be rendered (i.e., the element has no effect in 
				the aural dimension).</reference>
			</element>
			<element pattern="always" >
				<reference>The element is rendered aurally (regardless of its display value, 
				or the display or speak values of its ancestors). </reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="speak-as" highlight="css-property" id="e.css.speak-as" idref="e.css.speak-as">
	<autocomplete append=": " />
	<reference>The property <i>speak</i> specifies whether text will be rendered 
	aurally and if so, in what manner.
	<b>Values:</b> normal | spell-out || digits || [ literal-punctuation | no-punctuation ] | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-speak-as">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.speak-as" idref="c.css.speak-as">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default. Uses language-dependent pronunciation rules for 
				rendering the element’s content. For example, punctuation is not 
				spoken as-is, but instead rendered naturally as appropriate pauses.</reference>
			</element>
			<element pattern="digits" >
				<reference>Speak numbers one digit at a time, for instance, &quot;twelve&quot; 
				would be spoken as &quot;one two&quot;, and &quot;31&quot; as &quot;three one&quot;. </reference>
			</element>
			<element pattern="literal-punctuation" >
				<reference>Punctuation such as semicolons, braces, and so on is named aloud 
				(i.e. spoken literally) rather than rendered naturally as appropriate pauses. </reference>
			</element>
			<element pattern="no-punctuation" >
				<reference>Punctuation is not rendered: neither spoken nor rendered as pauses</reference>
			</element>
			<element pattern="spell-out" >
				<reference>Spells the text one letter at a time (useful for acronyms and 
				abbreviations).</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="speak-header" highlight="css-property" id="e.css.speak-header" idref="e.css.speak-header">
	<autocomplete append=": " />
	<reference>The property <i>speak-header</i> specifies whether table headers are 
	spoken before every cell, or only before a cell when that cell is associated 
	with a different header than the previous cell.
	<b>Values:</b> once | always | inherit | initial
	<b>Initial:</b> once
	<b>Applies to:</b> elements that have table header information
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-speak-header">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.speak-header" idref="c.css.speak-header">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="once">
				<reference>Default. The header is spoken one time, before 
				a series of cells.</reference>
			</element>
			<element pattern="always" >
				<reference>The header is spoken before every pertinent cell. </reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="speak-numeral" highlight="css-property" id="e.css.speak-numeral" idref="e.css.speak-numeral">
	<autocomplete append=": " />
	<reference>The property <i>speak-header</i> specifies whether table headers are 
	spoken before every cell, or only before a cell when that cell is associated 
	with a different header than the previous cell.
	<b>Values:</b> digits | continuous | inherit | initial
	<b>Initial:</b> continuous
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-speak-numeral">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.speak-numeral" idref="c.css.speak-numeral">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="continuous">
				<reference>Default. Speak the numeral as a full number. Thus, &quot;237&quot; 
				is spoken &quot;Two hundred thirty seven&quot;. Word representations are 
				language-dependent.</reference>
			</element>
			<element pattern="digits" >
				<reference>Speak the numeral as individual digits. Thus, &quot;237&quot; 
				is spoken &quot;Two Three Seven&quot;.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="speak-punctuation" highlight="css-property" id="e.css.speak-punctuation" idref="e.css.speak-punctuation">
	<autocomplete append=": " />
	<reference>The property <i>speak-punctuation</i> specifies how punctuation 
	is spoken.
	<b>Values:</b> code | none | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-speak-punctuation">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.speak-punctuation" idref="c.css.speak-punctuation">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="none">
				<reference>Default. Punctuation is not to be spoken, but instead
				rendered naturally as various pauses.</reference>
			</element>
			<element pattern="code" >
				<reference>Punctuation such as semicolons, braces, and so on are 
				to be spoken literally.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="speech-rate" highlight="css-property" id="e.css.speech-rate" idref="e.css.speech-rate">
	<autocomplete append=": " />
	<reference>The property <i>speak-punctuation</i> specifies how punctuation 
	is spoken.
	<b>Values:</b> &lt;<i>number</i>&gt; | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | initial
	&lt;<i>number</i>&gt;: Specifies the speaking rate in words per minute, a quantity 
	that varies somewhat by language but is nevertheless widely supported by speech 
	synthesizers.	
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> number
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-speech-rate">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.speech-rate" idref="c.css.speech-rate">
		<group highlight="css-value">
		<autocomplete append=";" />
			<element pattern="x-slow">
				<reference>Same as 80 words per minute.</reference>
			</element>
			<element pattern="slow" >
				<reference>Same as 120 words per minute</reference>
			</element>
			<element pattern="slower" >
				<reference>Subtracts 40 words per minute from the current speech rate.</reference>
			</element>
			<element pattern="medium" >
				<reference>Same as 180-200 words per minute. Default.</reference>
			</element>
			<element pattern="fast" >
				<reference>Same as 300 words per minute</reference>
			</element>
			<element pattern="x-fast" >
				<reference>Same as 500 words per minute</reference>
			</element>
			<element pattern="faster" >
				<reference>Adds 40 words per minute to the current speech rate.</reference>
			</element>
			<element idref="e.css.number" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="stress" highlight="css-property" id="e.css.stress" idref="e.css.stress">
	<autocomplete append=": " />
	<reference>Specifies the height of &quot;local peaks&quot; in the intonation contour 
	of a voice. For example, English is a stressed language, and different parts 
	of a sentence are assigned primary, secondary, or tertiary stress. The value 
	of <i>stress</i> controls the amount of inflection that results from these stress 
	markers. This property is a companion to the <i>pitch-range</i> property and is 
	provided to allow developers to exploit higher-end auditory displays.
	<b>Values:</b> &lt;<i>number</i>&gt; | inherit | initial
	&lt;<i>number</i>&gt;: a value from 0 to 100	
	<b>Initial:</b> 50
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> number
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/aural.html#propdef-speech-rate">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.stress" idref="c.css.stress">
		<element idref="e.css.number" />
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="table-layout" highlight="css-property" id="e.css.table-layout" idref="e.css.table-layout">
	<autocomplete append=": " />
	<reference>The <i>table-layout</i> property defines the algorithm used to lay out 
	table cells, rows, and columns.
	<b>Tip:</b> The main benefit of <i>table-layout: fixed;</i> is that the table renders 
	much faster. On large tables, users will not see any part of the table until 
	the browser has rendered the whole table. So, if you use table-layout: fixed, 
	users will see the top of the table while the browser loads and renders rest 
	of the table. This gives the impression that the page loads a lot quicker!
	<b>Values:</b> auto | fixed | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> `table` and `inline-table` elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#propdef-table-layout">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.table-layout" idref="c.css.table-layout">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="fixed">
				<reference>Sets a fixed table layout algorithm. The table and column widths 
				are set by the widths of table and color by the width of the first row 
				of cells. Cells in other rows do not affect column widths. If no widths 
				are present on the first row, the column widths are divided equally across 
				the table, regardless of content inside the cells.</reference>
			</element>
			<element pattern="auto">
				<reference>Browsers use an automatic table layout algorithm. The column width 
				is set by the widest unbreakable content in the cells. The content will 
				dictate the layout</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-align" highlight="css-property" id="e.css.text-align" idref="e.css.text-align">
	<autocomplete append=": " />
	<reference>The <i>text-align</i> property specifies the horizontal alignment 
	of text in an element.
	<b>Values:</b> left | right | center | justify | inherit | initial
	<b>Initial:</b> a nameless value that acts as <i>left</i> if <i>direction</i> is 
		<i>ltr</i> (left to right), <i>right</i> if <i>direction</i> is <i>rtl</i> (right
		to left)
	<b>Applies to:</b> block containers
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the initial value or as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-align">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-align" idref="c.css.text-align">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="left"/>
		<element pattern="right"/>
		<element pattern="center"/>
		<element pattern="justify"/>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-align-last" highlight="css-property" id="e.css.text-align-last" idref="e.css.text-align-last">
	<autocomplete append=": " />
	<reference>The <i>text-align-last</i> property specifies how to align the last 
	line of a text.
	Notice that the <i>text-align-last</i> property sets the alignment for all 
	last lines within the selected element. So, if you have a &lt;div&gt; 
	with three paragraphs in it, text-align-last will apply to the last 
	line of EACH of the paragraphs. To use <i>text-align-last</i> on only the 
	last paragraph in the container, you can use :last child.
	<b>Note:</b> In Edge prior 79, the <i>text-align-last</i> property only 
	works on text that has &quot;text-align: justify&quot;.
	<i>Note:</i> This property is not (yet) implemented in Safari.
	<b>Values:</b> auto | start | end | left | right | center | justify | match-parent | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> block containers
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-text-align-last">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-align-last" idref="c.css.text-align-last">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>Default value. The last line is justified and aligned left</reference>
		</element>
		<element pattern="start">
			<reference>The last line is aligned at the beginning of the line (left if 
			the text-direction is left-to-right, and right if the text-direction 
			is right-to-left)</reference>
		</element>
		<element pattern="end">
			<reference>The last line is aligned at the end of the line (right if 
			the text-direction is left-to-right, and left if the text-direction 
			is right-to-left)</reference>
		</element>
		<element pattern="left">
			<reference>The last line is aligned to the left</reference>
		</element>
		<element pattern="right">
			<reference>The last line is aligned to the right</reference>
		</element>
		<element pattern="center">
			<reference>The last line is center-aligned</reference>
		</element>
		<element pattern="justify">
			<reference>The last line is justified as the rest of the lines</reference>
		</element>
		<element pattern="match-parent">
			<reference>Matches the element's parent.</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-combine-upright" highlight="css-property" id="e.css.text-combine-upright" idref="e.css.text-combine-upright">
	<autocomplete append=": " />
	<reference>The <i>text-combine-upright</i> property specifies the 
	combination of multiple characters into the space of a single 
	character. If the combined text is wider than 1em, the user 
	browser must fit the contents within 1em. The resulting 
	composition is treated as a single upright glyph for the 
	purposes of layout and decoration. This property only has 
	an effect in vertical writing modes.
	<b>Values:</b> none | all | [ digits &lt;<i>integer</i>&gt;? ]
	<b>Initial:</b> none
	<b>Applies to:</b> non-replaced inline elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword, plus integer if <i>digits</i>
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/#propdef-text-combine-upright">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-combine-upright" idref="c.css.text-combine-upright">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none">
			<reference>Default value. No special processing</reference>
		</element>
		<element pattern="all">
			<reference>Attempt to typeset horizontally all consecutive 
			typographic character units within the box such that they 
			take up the space of a single typographic character unit 
			within the vertical line box.</reference>
		</element>
	</group>
	<group highlight="css-value" >
		<autocomplete append=" ;" backup_cursor="1" />
			<element pattern="digits">
			<reference>Attempt to typeset horizontally each maximal sequence of 
			consecutive ASCII digits (U+0030–U+0039) that has as many 
			or fewer digits than the specified integer such that it 
			takes up the space of a single typographic character unit 
			within the vertical line box. If the integer is omitted, 
			it computes to 2. Integers outside the range 2-4 are invalid.</reference>
		</element>
	</group>
	<element pattern="[2-4]" is_regex="1" highlight="css-value" />
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-decoration" highlight="css-property" id="e.css.text-decoration" idref="e.css.text-decoration">
	<autocomplete append=": " />
	<reference>The <i>text-decoration</i> property specifies the decoration 
	added to text, and is a shorthand property for:
		<i>text-decoration-line</i> (required)
		<i>text-decoration-color</i>
		<i>text-decoration-style</i>
		<i>text-decoration-thickness</i>
	<b>Values:</b> &lt;<i>text-decoration-line</i>&gt; || &lt;<i>text-decoration-style</i>&gt; || 
	&lt;<i>text-decoration-thickness</i>&gt; || &lt;<i>text-decoration-color</i>&gt; | inherit | initial
	Possible values are for:
	&lt;<i>text-decoration-line</i>&gt;: none | [ underline || overline || line-through || blink ]
	&lt;<i>text-decoration-style</i>&gt;: solid | double | dotted | dashed | wavy
	&lt;<i>text-decoration-color</i>&gt;: any color or color value in Hex, RGB etc.
	&lt;<i>text-decoration-thickness</i>&gt;: auto | from-font | &lt;<i>length/percentage</i>&gt; 
	<b>Initial:</b> none solid currentcolor
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete or by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-text-decor-3-20220505/#propdef-text-decoration">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-decoration" idref="c.css.text-decoration">
	<group highlight="css-value" >
		<autocomplete append=" " />
		<element pattern="none"/>
		<element pattern="underline">
			<reference>A line under the text.</reference>
		</element>
		<element pattern="overline">
			<reference>A line over the text.</reference>
		</element>
		<element pattern="line-through">
			<reference>A line through the middle of the text.</reference>
		</element>
		<element pattern="blink">
			<reference>Text blinks (alternates between visible and invisible).</reference>
		</element>
		<element pattern="solid">
			<reference>The line will display as a single line</reference>
		</element>
		<element pattern="double">
			<reference>The line will display as a double line</reference>
		</element>
		<element pattern="dotted">
			<reference>The line will display as a dotted line</reference>
		</element>
		<element pattern="dashed">
			<reference>The line will display as a dashed line</reference>
		</element>
		<element pattern="wavy">
			<reference>The line will display as a wavy line</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.colors" />
	<element idref="e.css.hex-color"/>
	<element idref="e.css.rgba-color"/>
	<element idref="e.css.rgb-color"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-decoration-color" highlight="css-property" id="e.css.text-decoration-color" idref="e.css.text-decoration-color">
	<autocomplete append=": " />
	<reference>The <i>text-decoration-color</i> property specifies the color 
	of the text-decoration (underlines, overlines, linethroughs).
	<b>Tip:</b> Also look at the <i>text-decoration</i> property, which is 
	a short-hand property for <i>text-decoration-line</i>, <i>text-decoration-style</i>, 
	<i>text-decoration-color</i>, and <i>text-decoration-thickness</i>.
	<b>Values:</b> &lt;<i>color</i>&gt; | inherit | initial
	<b>Initial:</b> currentcolor
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> computed color
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-text-decor-3-20220505/#propdef-text-decoration-color">www.w3.org</a></reference>
	<context idref="c.css.background-color" />
</element>

<element pattern="text-decoration-line" highlight="css-property" id="e.css.text-decoration-line" idref="e.css.text-decoration-line">
	<autocomplete append=": " />
	<reference>The <i>text-decoration-line</i> property sets the kind of text decoration 
	to use (like underline, overline, line-through).
	<b>Tip:</b> Also look at the <i>text-decoration</i> property, which is 
	a short-hand property for <i>text-decoration-line</i>, <i>text-decoration-style</i>, 
	<i>text-decoration-color</i>, and <i>text-decoration-thickness</i>.
	<b>Note:</b> You can also combine more than one value, like underline 
	and overline to display lines both under and over the text.	
	<b>Values:</b> none | underline | overline | line-through | blink | inherit | initial 
	<b>Initial:</b> none
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-text-decor-3-20220505/#propdef-text-decoration-line">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-decoration-line" idref="c.css.text-decoration-line">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none"/>
			<element pattern="underline">
				<reference>A line under the text.</reference>
			</element>
			<element pattern="overline">
				<reference>A line over the text.</reference>
			</element>
			<element pattern="line-through">
				<reference>A line through the middle of the text.</reference>
			</element>
			<element pattern="blink">
				<reference>Text blinks (alternates between visible and invisible).</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-decoration-style" highlight="css-property" id="e.css.text-decoration-style" idref="e.css.text-decoration-style">
	<autocomplete append=": " />
	<reference>The <i>text-decoration-line</i> property sets the kind of text decoration 
	to use (like underline, overline, line-through).
	<b>Tip:</b> Also look at the <i>text-decoration</i> property, which is 
	a short-hand property for <i>text-decoration-line</i>, <i>text-decoration-style</i>, 
	<i>text-decoration-color</i>, and <i>text-decoration-thickness</i>.
	<b>Note:</b> You can also combine more than one value, like underline 
	and overline to display lines both under and over the text.	
	<b>Values:</b> solid | double | dotted | dashed | wavy | inherit | initial  
	<b>Initial:</b> solid
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-text-decor-3-20220505/#propdef-text-decoration-style">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-decoration-style" idref="c.css.text-decoration-style">
		<group highlight="css-value" >
			<autocomplete append=";" />
		<element pattern="solid">
			<reference>The line will display as a single line</reference>
		</element>
		<element pattern="double">
			<reference>The line will display as a double line</reference>
		</element>
		<element pattern="dotted">
			<reference>The line will display as a dotted line</reference>
		</element>
		<element pattern="dashed">
			<reference>The line will display as a dashed line</reference>
		</element>
		<element pattern="wavy">
			<reference>The line will display as a wavy line</reference>
		</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-decoration-thickness" highlight="css-property" id="e.css.text-decoration-thickness" idref="e.css.text-decoration-thickness">
	<autocomplete append=": " />
	<reference>The <i>text-decoration-thickness</i> property specifies 
	the thickness of the decoration line.
	<b>Values:</b> auto | from-font | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial  
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword or absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-decor-4-20220504/#propdef-text-decoration-thickness">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-decoration-thickness" idref="c.css.text-decoration-thickness">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>The UA (browser) chooses the thickness of the decoration line</reference>
			</element>
			<element pattern="from-font">
				<reference>If a font file contains information about a preferred thickness, 
				use that value. If not, behave as auto</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-indent" highlight="css-property" id="e.css.text-indent" idref="e.css.text-indent">
	<autocomplete append=": " />
	<reference>The <i>text-indent</i> property specifies the indentation of the first 
	line in a text-block.
	Unless otherwise specified by the <i>each-line</i> and/or <i>hanging</i> keywords, 
	only lines that are the first formatted line of an element are affected. 
	For example, the first line of an anonymous block box is only affected 
	if it is the first child of its parent element.
	<b>Note:</b> Negative values are allowed. The first line will be indented 
		to the left if the value is negative.
	<b>Values:</b> [ &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; ]| &amp;&amp; hanging? &amp;&amp; each-line? | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> block containers
	<b>Inherited:</b> yes
	<b>Percentages:</b> refers to block container’s own inline-axis inner size
	<b>Media:</b> visual
	<b>Computed value:</b> computed &lt;<i>length-percentage</i>&gt; value, plus any specified keywords 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-text-indent">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-indent" idref="c.css.text-indent">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="each-line">
				<reference>Indentation affects the first line of each block container and each 
				line after a forced line break (but not lines after a soft wrap break). </reference>
			</element>
			<element pattern="hanging">
				<reference>Inverts which lines are affected. </reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.length.neg" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-justify" highlight="css-property" id="e.css.text-justify" idref="e.css.text-justify">
	<autocomplete append=": " />
	<reference>The <i>text-justify</i> property specifies the justification method 
	of text when text-align is set to &quot;justify&quot;.
	<b>Note:</b> On Chrome and Opera you may need to <i>Enable Experimental Web Platform Features</i>
	<b>Values:</b> auto | none | inter-word | inter-character | inherit | initial
	<b>Initial:</b> 0
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword (except for the distribute legacy value)  
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-text-justify">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-justify" idref="c.css.text-justify">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>The browser determines the justification algorithm</reference>
			</element>
			<element pattern="none">
				<reference>Disables justification methods</reference>
			</element>
			<element pattern="inter-word">
				<reference>Increases/Decreases the space between words</reference>
			</element>
			<element pattern="inter-character">
				<reference>Increases/Decreases the space between characters</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-orientation" highlight="css-property" id="e.css.text-orientation" idref="e.css.text-orientation">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This may not (yet) be supported by all browsers!
	The <i>text-orientation</i> property specifies the orientation of characters.
	<b>Note:</b> Works only when <i>writing-mode</i> is set to vertical.
	<b>Values:</b> mixed | upright | sideways | sideways | sideways-right | 
		use-glyph-orientation | inherit | initial
	<b>Initial:</b> mixed
	<b>Applies to:</b> all elements except table row groups, rows, column groups, and columns
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/#propdef-text-orientation">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-orientation" idref="c.css.text-orientation">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="mixed">
				<reference>Default value. Characters are rotated 90 degrees clockwise.</reference>
			</element>
			<element pattern="upright">
				<reference>Characters are not rotated, but standing upright.</reference>
			</element>
			<element pattern="sideways">
				<reference>Only supported in Firefox. Characters are orientated the same as 
				the text lines are oriented with writing-mode vertical, 90 degrees clockwise.</reference>
			</element>
			<element pattern="sideways-right">
				<reference>Equal to property value sideways. Kept for compatibility purposes.</reference>
			</element>
			<element pattern="use-glyph-orientation">
				<reference>For use in SVG elements, so that text inherits deprecated SVG properties 
				glyph-orientation-vertical and glyph-orientation-horizontal.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-overflow" highlight="css-property" id="e.css.text-overflow" idref="e.css.text-overflow">
	<autocomplete append=": " />
	<reference>The <i>text-overflow</i> property specifies how overflowed content that 
	is not displayed should be signaled to the user. It can be clipped, display 
	an ellipsis (...), or display a custom string.
	Both of the following properties are required for text-overflow:
		<i>white-space: nowrap;</i>
		<i>overflow: hidden;</i>
	<b>Values:</b> [ clip | ellipsis | &lt;<i>string</i>&gt; | fade | &lt;fade()&gt; ]{1,2} | inherit | initial
	&lt;<i>string</i>&gt;: Browser will render the given &lt;<i>string</i>&gt; to represent the clipped text
	&lt;fade()&gt;: fade( [ &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; ] ) 
	Clip inline content that overflows its line box. Characters may be only partially rendered. 
	In addition, the UA must apply a fade out effect near the edge of the line box, reaching 
	complete transparency at the edge. &lt;<i>length-percentage</i>&gt; indicates when the
	fading out shall begin.
	<b>Initial:</b> clip
	<b>Applies to:</b> box containers
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the width of the line box
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, with lengths made absolute
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-overflow-4-20221231/#propdef-text-overflow">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.text-overflow" idref="c.css.text-overflow">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="clip">
				<reference>Default value. The text is clipped and not accessible</reference>
			</element>
			<element pattern="ellipsis">
				<reference>Render an ellipsis (&quot;...&quot;) to represent the clipped text</reference>
			</element>
			<element pattern="fade">
				<reference>fade( [ &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; ] )
				<i>or</i> fade; fade(10em) would mean that fading begins at the distance of 10em 
				from the end of the visible area. If no length parameter is given, the 
				browser decides when to begin the fade.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
<!-- The following would conflict with the element "fade". If the following were favoured and in the css-file
	there would be just "text-overflow: fade;", the following property would be treated as a value, since this
	property hasn't been closed properly. Hence, the alternative is to just use the element "fade" and use the
	reference to explain the possibility of giving the length. The context allows parentheses () to be highlighted 
	as CSS values, so that would be fine and works.
	If anyone has a better solution, let me know...
	
			<element pattern="fade" id="e.css.fade" idref="e.css.fade" highlight="css-value">
			<autocomplete append="()" backup_cursor="1" />
			<reference>fade( [ &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; ] )
			fade(10em) would mean that fading begins at the distance of 10em from the
			end of the visible area. If no length parameter is given, the browser
			decides when to begin the fade.</reference>
			<context id="c.css.path" idref="c.css.path" symbols="()" highlight="css-value">
				<element pattern="(" />
				<element pattern=")" ends_context="1" highlight="css-value" />
			</context>
		</element>
-->		<element idref="e.css.length" />
		<element idref="e.css.percent" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-shadow" highlight="css-property" id="e.css.text-shadow" idref="e.css.text-shadow">
	<autocomplete append=": " />
	<reference>Specifies the type of shadow effect under the text.
	<b>Values:</b> &lt;<i>h-shadow</i>&gt; &lt;<i>v-shadow</i>&gt; &lt;<i>blur-radius</i>&gt; &lt;<i>color</i>&gt;| 
		none | initial | inherit
	&lt;<i>h-shadow</i>&gt;: Required. The position of the horizontal shadow. Negative values are allowed
	&lt;<i>v-shadow</i>&gt;: Required. The position of the vertical shadow. Negative values are allowed
	&lt;<i>blur-radius</i>&gt;: Optional. The blur radius. Default value is 0
	&lt;<i>color</i>&gt;: Optional. The color of the shadow
	<b>Initial:</b> none
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> either the keyword <i>none</i> or a list, each item consisting of four 
		absolute lengths plus a computed color and optionally also an <i>inset</i> keyword 
	<b>Animatable:</b> yes
	<b>Animation type:</b> as shadow list
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-decor-4-20220504/#propdef-text-shadow">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-shadow" idref="c.css.text-shadow">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none">
				<reference>Default value. No shadow</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
	<element pattern="0" highlight="css-value" >
		<autocomplete enable="1" />
	</element>
	<element idref="e.css.colors"/>
	<element idref="e.css.hex-color"/>
	<element idref="e.css.rgb-color"/>
	<element idref="e.css.rgba-color"/>
	<element idref="e.css.length.neg"/>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-transform" highlight="css-property" id="e.css.text-transform" idref="e.css.text-transform">
	<autocomplete append=": " />
	<reference>Controls capitalization effects of an element's text.
	<b>Values:</b> none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana | inherit | initial
	<b>Initial:</b> none
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> N/A
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-text-transform">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-transform" idref="c.css.text-transform">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="none">
			<reference>No capitalization. The text renders as it is. This is default</reference>
		</element>
		<element pattern="capitalize">
			<reference>Transforms the first character of each word to uppercase</reference>
		</element>
		<element pattern="uppercase">
			<reference>Transforms all characters to uppercase</reference>
		</element>
		<element pattern="lowercase">
			<reference>Transforms all characters to lowercase</reference>
		</element>
		<element pattern="full-width">
			<reference>Puts all typographic character units in full-width form. If a 
			character does not have a corresponding full-width form, it is left 
			as is. This value is typically used to typeset Latin letters and 
			digits as if they were ideographic characters. </reference>
		</element>
		<element pattern="full-size-kana">
			<reference>Converts all small Kana characters to the equivalent full-size Kana. 
			This value is typically used for ruby annotation text, where authors may 
			want all small Kana to be drawn as large Kana to compensate for legibility 
			issues at the small font sizes typically used in ruby.</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-underline-offset" highlight="css-property" id="e.css.text-underline-offset" idref="e.css.text-underline-offset">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	This property, which is not a sub-property of the <i>text-decoration</i> 
	shorthand, sets the offset of underlines from their zero position.
	<b>Note:</b> Positive offsets represent distances outward from the text; 
	negative offsets inward. It affects all decorations originating from this 
	element, even if descendant boxes specify a different position. It does 
	not affect underlines specified by ancestor elements.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | inherit | initial
		<b>Initial:</b> none
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> N/A
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-decor-4-20220504/#propdef-text-underline-offset">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-underline-offset" idref="c.css.text-underline-offset">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>The UA chooses an appropriate offset for underlines.
			However, this offset must be zero if the computed value of 
			<i>text-underline-position</i> is <i>from-font</i> and the UA 
			was able to extract an appropriate metric to use from the font.</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length.neg" />
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-underline-position" highlight="css-property" id="e.css.text-underline-position" idref="e.css.text-underline-position">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	This property, which is not a sub-property of the <i>text-decoration</i> 
	shorthand, 	sets the position of an underline with respect to the text, 
	and defines its zero position for further adjustment by 
	<i>text-underline-offset</i>.
	<b>Note:</b> It affects all decorations originating from this element, 
	even if descendant boxes specify a different position. It does not 
	affect underlines specified by ancestor elements.
	<b>Values:</b> auto | [ from-font | under ] || [ left | right ] | inherit | initial
		<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-decor-4-20220504/#propdef-text-underline-position">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-underline-position" idref="c.css.text-underline-position">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="auto">
			<reference>The UA (user agent) may use any algorithm to determine the 
			underline’s position; however it must be placed at or under the 
			alphabetic baseline.</reference>
		</element>
		<element pattern="from-font">
			<reference>If the first available font has metrics indicating a preferred 
			underline offset, use that offset, otherwise behaves as auto. </reference>
		</element>
		<element pattern="under">
			<reference>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 &quot;accounting&quot; underline.) This value can be
			 combined with left or right if a particular side is preferred in vertical 
			 typographic modes. </reference>
		</element>
		<element pattern="left">
			<reference>In vertical typographic 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 &quot;over&quot; side of the text, then an 
			overline also switches sides and is drawn on the &quot;under&quot; side. </reference>
		</element>
		<element pattern="right">
			<reference>In vertical typographic 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 &quot;over&quot; side of the text, then an 
			overline also switches sides and is drawn on the &quot;under&quot; side.</reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="text-wrap" highlight="css-property" id="e.css.text-wrap" idref="e.css.text-wrap">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The property <i>text-wrap</i> specifies the mode for text wrapping.
	<b>Values:</b> wrap | nowrap | balance | stable | pretty  | inherit | initial
	<b>Initial:</b> wrap
	<b>Applies to:</b> text and block containers
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-text-wrap">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.text-wrap" idref="c.css.text-wrap">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="wrap">
			<reference>Default. Inline-level content may break across lines at allowed soft 
			wrap opportunities, as determined by the line-breaking rules in effect 
			in order to minimize inline-axis overflow. The exact algorithm is 
			UA-defined.</reference>
		</element>
		<element pattern="nowrap">
			<reference>Inline-level content does not break across lines; content that does 
			not fit within the block container overflows it. </reference>
		</element>
		<element pattern="balance">
			<reference>Same as wrap for inline boxes. For block containers that establish 
			an inline formatting context, line breaks are chosen to balance the 
			remaining (empty) space in each line box, if better balance than wrap 
			is possible. This must not change the number of line boxes the block 
			would contain if text-wrap were set to wrap. </reference>
		</element>
		<element pattern="stable">
			<reference>When applied to a block container that establishes an inline formatting 
			context, specifies that content on subsequent lines should not be considered 
			when making break decisions so that when editing text any content before the 
			cursor remains stable; otherwise equivalent to <i>wrap</i>.</reference>
		</element>
		<element pattern="pretty">
			<reference>When applied to a block container that establishes an inline formatting 
			context, specifies the UA should bias for better layout over speed, and is 
			expected to consider multiple lines, when making break decisions. Otherwise 
			equivalent to <i>wrap</i></reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.end"/>
	<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="top" highlight="css-property" id="e.css.top" idref="e.css.top">
	<autocomplete append=": " />
	<reference>The <i>top</i> property affects the vertical position of a positioned 
	element. This property has no effect on non-positioned elements.
	If <i>position: absolute;</i> or <i>position: fixed;</i> - the <i>top</i> property 
	sets the top edge of an element to a unit above/below the top edge of its 
	nearest positioned ancestor.
	If <i>position: relative;</i> - the <i>top</i> property makes the element's top 
	edge to move above/below its normal position.
	If <i>position: sticky;</i> - the <i>top</i> property behaves like its position 
	is relative when the element is inside the viewport, and like its position is 
	fixed when it is outside.
	If <i>position: static;</i> - the <i>top</i> property has no effect.
	<b>Values:</b> auto | &lt;<i>length</i>&gt; | &lt;<i>percentage</i>&gt; | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to size of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword auto or a computed &lt;<i>length-percentage</i>&gt; value 
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/css-position-3/#propdef-top">www.w3.org</a></reference>
	<context idref="c.css.bottom"/>
</element>

<element pattern="transform" highlight="css-property" id="e.css.transform" idref="e.css.transform">
	<autocomplete append=": " />
	<reference>The <i>transform</i> property applies a 2D or 3D transformation to an 
	element. This property allows you to rotate, scale, move, skew, etc., elements.
	<b>Values:</b> none | &lt;<i>transform-list</i>&gt;
	&lt;<i>transform-list</i>&gt; means a list of transform-functions. These can be:
	matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() |
	rotate() | skew() | skewX() | skewY()
	<i>Note:</i> skew() exists for compatibility reasons, and should not be used in 
	new content. Use skewX() or skewY() instead, noting that the behavior of skew() 
	is different from multiplying skewX() with skewY().
	<b>Initial:</b> none
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the size of reference box
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, but with lengths made absolute
	<b>Animatable:</b> yes
	<b>Animation type:</b> transform list
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#propdef-transform">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.transform" idref="c.css.transform">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none" />
			<element idref="e.css.inherit"/>
			<element idref="e.css.initial"/>
		</group>
		<group highlight="css-value">
			<element pattern="matrix" id="e.css.matrix" idref="e.css.matrix" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>matrix( &lt;<i>number</i>&gt; [, &lt;<i>number</i>&gt; ]{5,5} )
				specifies a 2D transformation in the form of a transformation matrix of the 
				six values a, b, c, d, e, f.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="translate" id="e.css.transftranslate" idref="e.css.transftranslate" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>translate( &lt;<i>length-percentage</i>&gt; [, &lt;<i>length-percentage</i>&gt; ]? )
				specifies a 2D translation by the vector [tx, ty], where tx is the first 
				translation-value parameter and ty is the optional second translation-value 
				parameter. If &lt;ty&gt; is not provided, ty has zero as a value.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="translateX" id="e.css.translateX" idref="e.css.translateX" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>translateX( &lt;<i>length-percentage</i>&gt; )
				specifies a translation by the given amount in the X direction.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="translateY" id="e.css.translateY" idref="e.css.translateY" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>translateY( &lt;<i>length-percentage</i>&gt; )
				specifies a translation by the given amount in the Y direction.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="scale" id="e.css.scale2D" idref="e.css.scale2D" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>scale( &lt;<i>number</i>&gt; [, &lt;<i>number</i>&gt; ]? )
				specifies a 2D scale operation by the [sx,sy] scaling vector 
				described by the 2 parameters. If the second parameter is not 
				provided, it takes a value equal to the first. For example, 
				<i>scale(1, 1)</i> would leave an element unchanged, while 
				scale(2, 2) would cause it to appear twice as long in both 
				the X and Y axes, or four times its typical geometric size.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="scaleX" id="e.css.scaleX" idref="e.css.scaleX" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>scaleX( &lt;<i>number</i>&gt; )
				specifies a 2D scale operation using the [sx,1] scaling vector, 
				where sx is given as the parameter.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="scaleY" id="e.css.scaleY" idref="e.css.scaleY" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference>scaleY( &lt;<i>number</i>&gt; )
				specifies a 2D scale operation using the [1,sy] scaling vector, 
				where sy is given as the parameter.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="rotate" id="e.css.tfrotate" idref="e.css.tfrotate" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference> rotate( [ &lt;<i>angle</i>&gt; | &lt;<i>zero</i>&gt; ] )
				specifies a 2D rotation by the angle specified in the parameter about 
				the origin of the element, as defined by the <i>transform-origin</i> property. 
				For example, <i>rotate(90deg)</i> would cause elements to appear rotated 
				one-quarter of a turn in the clockwise direction.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="skew" id="e.css.skew" idref="e.css.skew" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference> skew( [ &lt;<i>angle</i>&gt; | &lt;<i>zero</i>&gt; ] [, [ &lt;<i>angle</i>&gt; | &lt;<i>zero</i>&gt; ] ]? )
				specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not 
				provided, it has a zero value.
				<b>Note: skew() exists for compatibility reasons, and should not be used in 
				new content. Use skewX() or skewY() instead, noting that the behavior of skew() 
				is different from multiplying skewX() with skewY().</b> </reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="skewX" id="e.css.skewX" idref="e.css.skewX" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference> skewX( [ &lt;<i>angle</i>&gt; | &lt;<i>zero</i>&gt; ])
				specifies a 2D skew transformation along the X axis by the given angle.</reference>
				<context idref="c.css.path" />
			</element>
			<element pattern="skewY" id="e.css.skewY" idref="e.css.skewY" highlight="css-value">
				<autocomplete append="()" backup_cursor="1" />
				<reference> skewY( [ &lt;<i>angle</i>&gt; | &lt;<i>zero</i>&gt; ])
				specifies a 2D skew transformation along the Y axis by the given angle.</reference>
				<context idref="c.css.path" />
			</element>
		</group>
		<element idref="e.css.degree"/>
		<element idref="e.css.length.neg"/>
		<element idref="e.css.number"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="transform-box" highlight="css-property" id="e.css.transform-box" idref="e.css.transform-box">
	<autocomplete append=": " />
	<reference>All transformations defined by the <i>transform</i> and <i>transform-origin</i> property 
	are relative to the position and dimensions of the reference box of the element.
	The reference box is defined by the <i>transform-box</i> property.
	<b>Values:</b> content-box | border-box | fill-box | stroke-box | view-box
	<b>Initial:</b> view-box
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#propdef-transform-box">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.transform-box" idref="c.css.transform-box">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="content-box" id="e.css.content-box" idref="e.css.content-box">
				<reference>Uses the content box as reference box. The reference box of a table is 
				the border box of its table wrapper box, not its table box.</reference>
			</element>
			<element pattern="border-box" id="e.css.content-box" idref="e.css.content-box">
				<reference>Uses the border box as reference box. The reference box of a table is 
				the border box of its table wrapper box, not its table box.</reference>
			</element>
			<element pattern="fill-box" id="e.css.content-box" idref="e.css.content-box">
				<reference>Uses the object bounding box as reference box.</reference>
			</element>
			<element pattern="stroke-box" id="e.css.content-box" idref="e.css.content-box">
				<reference>Uses the stroke bounding box as reference box.</reference>
			</element>
			<element pattern="view-box" id="e.css.content-box" idref="e.css.content-box">
				<reference>Uses the nearest SVG viewport as reference box.
				If a viewBox attribute is specified for the SVG viewport creating element:
				The reference box is positioned at the origin of the coordinate system 
				established by the viewBox attribute.
				The dimension of the reference box is set to the width and height values 
				of the viewBox attribute.</reference>
			</element>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="transform-origin" highlight="css-property" id="e.css.transform-origin" idref="e.css.transform-origin">
	<autocomplete append=": " />
	<reference>The <i>transform-origin</i> property allows you to change the position 
	of transformed elements.
	2D transformations can change the x- and y-axis of an element. 3D transformations 
	can also change the z-axis of an element.
	If only one value is specified, the second value is assumed to be center. If one 
	or two values are specified, the third value is assumed to be 0px.
	<b>Note:</b> This property must be used together with the <i>transform</i> property.
	<b>Values:</b> &lt;<i>x-axis</i>&gt; | &lt;<i>y-axis</i>&gt; | &lt;<i>z-axis</i>&gt; | initial | inherit
	The values are for:	
	&lt;<i>x-axis</i>&gt;: left | center | right | &lt;<i>length-percentage</i>&gt;
	&lt;<i>y-axis</i>&gt;: top | center | bottom | &lt;<i>length-percentage</i>&gt;
	&lt;<i>z-axis</i>&gt;: &lt;<i>length</i>&gt;?
	<b>Examples:</b> <i>transform-origin: center top;</i> <i>transform-origin: 10% bottom;</i>
	3D-elements: <i>transform-origin: center center 10px;</i> <i>transform-origin: 50% 50% 10;</i>
	<b>Initial:</b> 50% 50% 0
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> refer to the size of reference box
	<b>Media:</b> visual
	<b>Computed value:</b> list
	<b>Animatable:</b> yes
	<b>Animation type:</b> repeatable list
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#propdef-transform-origin">www.w3.org</a></reference>
	<context idref="c.css.background-position" />
</element>

<element pattern="transform-style" highlight="css-property" id="e.css.transform-style" idref="e.css.transform-style">
	<autocomplete append=": " />
	<reference>The <i>transform-style</i> property specifies how nested elements 
	are rendered in 3D space.
	<b>Note:</b> This property must be used together with the <i>transform</i> property.
	<b>Values:</b> flat | preserve-3d | initial | inherit
	<b>Initial:</b> flat
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#propdef-transform-style">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.transform-style" idref="c.css.transform-style">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="flat">
				<reference>Default. Specifies that child elements will NOT preserve its 3D position</reference>
			</element>
			<element pattern="preserve-3d">
				<reference>Specifies that child elements will preserve its 3D position</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="transition" highlight="css-property" id="e.css.transition" idref="e.css.transition">
	<autocomplete append=": " />
	<reference>The <i>transition</i> property is a shorthand property for:
		<i>transition-property</i>
		<i>transition-duration</i>
		<i>transition-timing-function</i>
		<i>transition-delay</i>
	<b>Note:</b> Always specify the transition-duration property, otherwise 
	the duration is 0s, and the transition will have no effect.
	<b>Note:</b> The order is important within the items in this property: the first 
	value that can be parsed as a time is assigned to the <i>transition-duration</i>, 
	and the second value that can be parsed as a time is assigned to <i>transition-delay</i>.
	<b>Values:</b> none | &lt;<i>property</i>&gt; &lt;<i>duration</i>&gt; &lt;<i>timing-function</i>&gt; &lt;<i>delay</i>&gt; | initial | inherit
	Values are:
	&lt;<i>property</i>&gt;: Specifies the name of the CSS property the transition effect is for
	&lt;<i>duration</i>&gt;: Specifies how many seconds or milliseconds the transition effect 
		takes to complete
	&lt;<i>timing-function</i>&gt;: Specifies the speed curve of the transition effect
	&lt;<i>delay</i>&gt;: Defines when the transition effect will start
	<b>Initial:</b> see individual properties
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> interactive
	<b>Computed value:</b> see individual properties
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/#propdef-transition">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.transition" idref="c.css.transition">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="none">
				<reference>No transition takes place. If, besides <i>none</i>, another value is give,
				the whole becomes invalid.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.time" />
		<element idref="e.css.text" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="transition-delay" highlight="css-property" id="e.css.transition-delay" idref="e.css.transition-delay">
	<autocomplete append=": " />
	<reference>The <i>transition-delay</i> property specifies when the transition effect will start.
	The transition-delay value is defined in seconds (s) or milliseconds (ms).
	<b>Values:</b> &lt;<i>time</i>&gt; | initial | inherit
	<b>Initial:</b> 0s
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> interactive
	<b>Computed value:</b> list, each item a duration
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/#propdef-transition-delay">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.transition-delay" idref="c.css.transition-delay">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.time" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="transition-duration" highlight="css-property" id="e.css.transition-duration" idref="e.css.transition-duration">
	<autocomplete append=": " />
	<reference>The <i>transition-duration</i> property specifies how many seconds (s) or 
	milliseconds (ms) a transition effect takes to complete.
	<b>Note:</b> negative values are not allowed.
	<b>Values:</b> &lt;<i>time</i>&gt; | initial | inherit
	<b>Initial:</b> 0s
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> interactive
	<b>Computed value:</b> list, each item a duration
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/#propdef-transition-duration">www.w3.org</a></reference>
	<context idref="c.css.transition-delay" />
</element>

<element pattern="transition-property" highlight="css-property" id="e.css.transition-property" idref="e.css.transition-property">
	<autocomplete append=": " />
	<reference>The <i>transition-property</i> property specifies the name of the CSS 
	property the transition effect is for (the transition effect will start 
	when the specified CSS property changes).
	<b>Tip:</b> A transition effect could typically occur when a user hover over 
	an element.
	<b>Note:</b> Always specify the <i>transition-duration</i> property, otherwise 
	the duration is 0, and the transition will have no effect.
	<b>Values:</b> none | all | &lt;<i>property</i>&gt; [ ‘,’ &lt;<i>property</i>&gt; ]*
	<b>Initial:</b> all
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i>, else a list of identifiers
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/#propdef-transition-property">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;," id="c.css.transition-property" idref="c.css.transition-property">
	<!--
	list of animatable properties:
	https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
	Updated: 2014-03-10
	-->
		<group highlight="css-value" >
			<autocomplete append="; " />
			<element pattern="-moz-outline-radius"/>
			<element pattern="-moz-outline-radius-bottomleft"/>
			<element pattern="-moz-outline-radius-bottomright"/>
			<element pattern="-moz-outline-radius-topleft"/>
			<element pattern="-moz-outline-radius-topright"/>
			<element pattern="-ms-grid-columns"/>
			<element pattern="-ms-grid-rows"/>
			<element pattern="-webkit-line-clamp"/>
			<element pattern="-webkit-text-fill-color"/>
			<element pattern="-webkit-text-stroke"/>
			<element pattern="-webkit-text-stroke-color"/>
			<element pattern="accent-color"/>		
			<element pattern="backdrop-filter"/>
			<element pattern="background"/>
			<element pattern="background-color"/>
			<element pattern="background-position"/>
			<element pattern="background-size"/>
			<element pattern="block-size"/>
			<element pattern="border"/>
			<element pattern="border-block-end"/>
			<element pattern="border-block-end-color"/>
			<element pattern="border-block-end-width"/>
			<element pattern="border-block-start"/>
			<element pattern="border-block-start-color"/>
			<element pattern="border-block-start-width"/>
			<element pattern="border-bottom"/>
			<element pattern="border-bottom-color"/>
			<element pattern="border-bottom-left-radius"/>
			<element pattern="border-bottom-right-radius"/>
			<element pattern="border-bottom-width"/>
			<element pattern="border-color"/>
			<element pattern="border-end-end-radius"/>
			<element pattern="border-end-start-radius"/>
			<element pattern="border-image-outset"/>
			<element pattern="border-image-slice"/>
			<element pattern="border-image-width"/>
			<element pattern="border-inline-end"/>
			<element pattern="border-inline-end-color"/>
			<element pattern="border-inline-end-width"/>
			<element pattern="border-inline-start"/>
			<element pattern="border-inline-start-color"/>
			<element pattern="border-inline-start-width"/>
			<element pattern="border-left"/>
			<element pattern="border-left-color"/>
			<element pattern="border-left-width"/>
			<element pattern="border-radius"/>
			<element pattern="border-right"/>
			<element pattern="border-right-color"/>
			<element pattern="border-right-width"/>
			<element pattern="border-start-end-radius"/>
			<element pattern="border-start-start-radius"/>
			<element pattern="border-top"/>
			<element pattern="border-top-color"/>
			<element pattern="border-top-left-radius"/>
			<element pattern="border-top-right-radius"/>
			<element pattern="border-top-width"/>
			<element pattern="border-width"/>
			<element pattern="bottom"/>
			<element pattern="box-shadow"/>
			<element pattern="caret"/>
			<element pattern="caret-color"/>
			<element pattern="caret-shape"/>
			<element pattern="clip"/>
			<element pattern="clip-path"/>
			<element pattern="color"/>
			<element pattern="column-count"/>
			<element pattern="column-gap"/>
			<element pattern="column-rule"/>
			<element pattern="column-rule-color"/>
			<element pattern="column-rule-width"/>
			<element pattern="column-width"/>
			<element pattern="columns"/>
			<element pattern="contain-intrinsic-block-size"/>
			<element pattern="contain-intrinsic-height"/>
			<element pattern="contain-intrinsic-inline-size"/>
			<element pattern="contain-intrinsic-size"/>
			<element pattern="contain-intrinsic-width"/>
			<element pattern="filter"/>
			<element pattern="flex"/>
			<element pattern="flex-basis"/>
			<element pattern="flex-grow"/>
			<element pattern="flex-shrink"/>
			<element pattern="font"/>
			<element pattern="font-size"/>
			<element pattern="font-size-adjust"/>
			<element pattern="font-stretch"/>
			<element pattern="font-variation-settings"/>
			<element pattern="font-weight"/>
			<element pattern="gap"/>
			<element pattern="grid-column-gap"/>
			<element pattern="grid-gap"/>
			<element pattern="grid-row-gap"/>
			<element pattern="grid-template-columns"/>
			<element pattern="grid-template-rows"/>
			<element pattern="height"/>
			<element pattern="inline-size"/>
			<element pattern="inset"/>
			<element pattern="inset-block"/>
			<element pattern="inset-block-end"/>
			<element pattern="inset-block-start"/>
			<element pattern="inset-inline"/>
			<element pattern="inset-inline-end"/>
			<element pattern="inset-inline-start"/>
			<element pattern="left"/>
			<element pattern="letter-spacing"/>
			<element pattern="line-clamp"/>
			<element pattern="line-height"/>
			<element pattern="margin"/>
			<element pattern="margin-block"/>
			<element pattern="margin-block-end"/>
			<element pattern="margin-block-start"/>
			<element pattern="margin-bottom"/>
			<element pattern="margin-inline"/>
			<element pattern="margin-inline-end"/>
			<element pattern="margin-inline-start"/>
			<element pattern="margin-left"/>
			<element pattern="margin-right"/>
			<element pattern="margin-top"/>
			<element pattern="mask"/>
			<element pattern="mask-border"/>
			<element pattern="mask-position"/>
			<element pattern="mask-size"/>
			<element pattern="max-block-size"/>
			<element pattern="max-height"/>
			<element pattern="max-inline-size"/>
			<element pattern="max-lines"/>
			<element pattern="max-width"/>
			<element pattern="min-block-size"/>
			<element pattern="min-height"/>
			<element pattern="min-inline-size"/>
			<element pattern="min-width"/>
			<element pattern="object-position"/>
			<element pattern="offset"/>
			<element pattern="offset-anchor"/>
			<element pattern="offset-distance"/>
			<element pattern="offset-path"/>
			<element pattern="offset-position"/>
			<element pattern="offset-rotate"/>
			<element pattern="opacity"/>
			<element pattern="order"/>
			<element pattern="outline"/>
			<element pattern="outline-color"/>
			<element pattern="outline-offset"/>
			<element pattern="outline-width"/>
			<element pattern="padding"/>
			<element pattern="padding-block"/>
			<element pattern="padding-block-end"/>
			<element pattern="padding-block-start"/>
			<element pattern="padding-bottom"/>
			<element pattern="padding-inline"/>
			<element pattern="padding-inline-end"/>
			<element pattern="padding-inline-start"/>
			<element pattern="padding-left"/>
			<element pattern="padding-right"/>
			<element pattern="padding-top"/>
			<element pattern="perspective"/>
			<element pattern="perspective-origin"/>
			<element pattern="right"/>
			<element pattern="rotate"/>
			<element pattern="row-gap"/>
			<element pattern="scale"/>
			<element pattern="scroll-margin"/>
			<element pattern="scroll-margin-block"/>
			<element pattern="scroll-margin-block-end"/>
			<element pattern="scroll-margin-block-start"/>
			<element pattern="scroll-margin-bottom"/>
			<element pattern="scroll-margin-inline"/>
			<element pattern="scroll-margin-inline-end"/>
			<element pattern="scroll-margin-inline-start"/>
			<element pattern="scroll-margin-left"/>
			<element pattern="scroll-margin-right"/>
			<element pattern="scroll-margin-top"/>
			<element pattern="scroll-padding"/>
			<element pattern="scroll-padding-block"/>
			<element pattern="scroll-padding-block-end"/>
			<element pattern="scroll-padding-block-start"/>
			<element pattern="scroll-padding-bottom"/>
			<element pattern="scroll-padding-inline"/>
			<element pattern="scroll-padding-inline-end"/>
			<element pattern="scroll-padding-inline-start"/>
			<element pattern="scroll-padding-left"/>
			<element pattern="scroll-padding-right"/>
			<element pattern="scroll-padding-top"/>
			<element pattern="scroll-snap-coordinate"/>
			<element pattern="scroll-snap-destination"/>
			<element pattern="scroll-timeline"/>
			<element pattern="scrollbar-color"/>
			<element pattern="shape-image-threshold"/>
			<element pattern="shape-margin"/>
			<element pattern="shape-outside"/>
			<element pattern="tab-size"/>
			<element pattern="text-decoration"/>
			<element pattern="text-decoration-color"/>
			<element pattern="text-decoration-thickness"/>
			<element pattern="text-emphasis"/>
			<element pattern="text-emphasis-color"/>
			<element pattern="text-indent"/>
			<element pattern="text-shadow"/>
			<element pattern="text-underline-offset"/>
			<element pattern="top"/>
			<element pattern="transform"/>
			<element pattern="transform-origin"/>
			<element pattern="translate"/>
			<element pattern="vertical-align"/>
			<element pattern="visibility"/>
			<element pattern="width"/>
			<element pattern="word-spacing"/>
			<element pattern="z-index"/>
			<element pattern="zoom"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="transition-timing-function" highlight="css-property" id="e.css.transition-timing-function" idref="e.css.transition-timing-function">
	<autocomplete append=": " />
	<reference>The <i>transition-timing-function</i> property specifies the speed curve of the 
	transition effect.
	This property allows a transition effect to change speed over its duration.
	<b>Values:</b> ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | 
	steps(&lt;<i>integer</i>&gt;[, [ start | end ] ]?) | 
	cubic-bezier(&lt;<i>number</i>&gt;, &lt;<i>number</i>&gt;, &lt;<i>number</i>&gt;, &lt;<i>number</i>&gt;) |
	initial | inherit
	<b>Initial:</b> ease
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/#propdef-transition-timing-function">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.transition-timing-function" idref="c.css.transition-timing-function">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element pattern="ease">
			<reference>Default value. Specifies a transition effect with a slow start, then fast, 
			then end slowly (equivalent to <i>cubic-bezier(0.25,0.1,0.25,1)</i>)</reference>
		</element>
		<element pattern="linear">
			<reference>Specifies a transition effect with the same speed from start to end 
			(equivalent to <i>cubic-bezier(0,0,1,1)</i>)</reference>
		</element>
		<element pattern="ease-in">
			<reference>Specifies a transition effect with a slow start 
			(equivalent to <i>cubic-bezier(0.42,0,1,1)</i>)</reference>
		</element>
		<element pattern="ease-out">
			<reference>Specifies a transition effect with a slow end 
			(equivalent to <i>cubic-bezier(0,0,0.58,1)</i>)</reference>
		</element>
		<element pattern="ease-in-out">
			<reference>Specifies a transition effect with a slow start and end 
			(equivalent to <i>cubic-bezier(0.42,0,0.58,1)</i>)</reference>
		</element>
		<element pattern="step-start">
			<reference>Equivalent to <i>steps(1, start)</i></reference>
		</element>
		<element pattern="step-end">
			<reference>Equivalent to <i>steps(1, end)</i></reference>
		</element>
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element pattern="end"/>
	<element pattern="start"/>
	<element idref="e.css.number" />
	<element pattern="steps" highlight="css-value">
		<reference>steps(&lt;<i>number</i>&gt;, start) Specifies a stepping function, with two parameters. The first 
		parameter specifies the number of intervals in the function. It must be a 
		positive integer (greater than 0). The second parameter, which is 
		optional, is either the value &quot;start&quot; or &quot;end&quot;, 
		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 &quot;end&quot;</reference>
		<autocomplete append="();" backup_cursor="2" />
		<context idref="c.css.genericroundbraces"/>
	</element>
	<element pattern="cubic-bezier" highlight="css-value">
		<reference>Define your own values in the cubic-bezier function. 
		Possible values are numeric values from 0 to 1. A total of four
		comma-separated values are expected.</reference>
		<autocomplete append="();" backup_cursor="2" />
		<context idref="c.css.genericroundbraces"/>
	</element>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="translate" highlight="css-property" id="e.css.translate" idref="e.css.translate">
	<autocomplete append=": " />
	<reference>The <i>translate</i> property allows you to change the position of elements.
	The <i>translate</i> property defines x- and y-coordinates of an element in 2D. 
	You can also define the z-coordinate to change position in 3D.
	Coordinates can be given as only x-coordinates, x- and y-coordinates, or x-, y- 
	and z-coordinates.
	<b>Tip:</b> You need to define a value for CSS <i>perspective</i> property for the 
	z-property to take effect.
	<b>Note:</b> An alternative technique to translate an element is to use CSS <i>transform</i> 
	property with CSS <i>translate()</i> function. The CSS translate property, as explained here, 
	is arguably a simpler and more direct way to translate an element.
	<b>Values:</b> none | &lt;<i>length-percentage</i>&gt; [ &lt;<i>length-percentage</i>&gt; &lt;<i>length</i>&gt;? ]? |
	initial | inherit
	<b>Initial:</b> none
	<b>Applies to:</b> transformable elements
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to the width of the reference box (for the first value) 
		or the height (for the second value) 
	<b>Media:</b> visual
	<b>Computed value:</b> the keyword <i>none</i> or a pair of computed &lt;<i>length-percentage</i>&gt; 
	values and an absolute &lt;<i>length</i>&gt;
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Canonical order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#propdef-translate">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}().;:'&quot;" id="c.css.translate" idref="c.css.translate">
	<group highlight="css-value" >
		<autocomplete append=";" />
		<element idref="e.css.inherit" />
		<element idref="e.css.initial" />
	</group>
	<element idref="e.css.length.neg"/>
	<element idref="e.css.end"/>
	<group class="is_SASS">
		<element idref="e.sass.variable" />
		<element idref="e.sass.newline_end"/>
	</group>
	<element idref="e.css.lcomment"/>
	<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
	<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="unicode-bidi" highlight="css-property" id="e.css.unicode-bidi" idref="e.css.unicode-bidi">
	<autocomplete append=": " />
	<reference>The <i>unicode-bidi</i> property is used together with the direction property to set 
	or return whether the text should be overridden to support multiple languages in the 
	same document.
	<b>Values:</b> normal | embed | isolate | bidi-override | isolate-override | plaintext | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/#propdef-unicode-bidi">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.unicode-bidi" idref="c.css.unicode-bidi">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default. The element does not open an additional level of embedding.</reference>
			</element>
			<element pattern="embed">
				<reference>For inline elements, this value opens an additional level of embedding</reference>
			</element>
			<element pattern="isolate">
				<reference>The element is isolated from its siblings</reference>
			</element>
			<element pattern="bidi-override">
				<reference>For inline elements, this creates an override. For block elements, 
				this creates an override for inline-level descendants not within another 
				block element</reference>
			</element>
			<element pattern="isolate-override">
				<reference>This combines the isolation behavior of <i>isolate</i> with the directional override 
				behavior of <i>bidi-override</i>: to surrounding content, it is equivalent to isolate, 
				but within the box content is ordered as if bidi-override were specified. It 
				effectively nests a directional override inside an isolated sequence.</reference>
			</element>
			<element pattern="plaintext">
				<reference>This value behaves as <i>isolate</i> except that for the purposes of the 
				Unicode bidirectional algorithm, the base directionality of each of the box’s 
				bidi paragraphs (if a block container) or isolated sequences (if an inline) 
				is determined by following the heuristic in rules P2 and P3 of the Unicode 
				bidirectional algorithm (rather than by using the direction property of the box).</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="user-select" highlight="css-property" id="e.css.user-select" idref="e.css.user-select">
	<autocomplete append=": " />
	<reference>The <i>user-select</i> property specifies whether the text of an element 
	can be selected.
	In web browsers, if you double-click on some text it will be selected/highlighted. 
	This property can be used to prevent this.
	<b>Note:</b> some browser versions require the prefix -webkit-, -ms- or -moz-
	<b>Note:</b> User agents must not apply the user-select property to the 
	<i>::first-line</i> and <i>::first-letter</i> pseudo-elements.
	<b>Values:</b> auto | text | none | contain | all | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements, and optionally to the ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-user-select">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.user-select" idref="c.css.user-select">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default. The used value of auto is determined as follows:
				On the <i>::before</i> and <i>::after</i> pseudo-elements, the used value is <i>none</i>
				If the element is an editable element, the used value is <i>contain</i>
				Otherwise, if the used value of user-select on the parent of this element 
				is <i>all</i>, the used value is <i>all</i>
				Otherwise, if the used value of user-select on the parent of this element 
				is <i>none</i>, the used value is <i>none</i>
				Otherwise, the used value is <i>text</i></reference>
			</element>
			<element pattern="text">
				<reference>The text can be selected by the user</reference>
			</element>
			<element pattern="none">
				<reference>Prevent text selection</reference>
			</element>
			<element pattern="contain">
				<reference>UAs must not allow a selection which is started in this element 
				to be extended outside of this element.
				A selection started outside of this element must not end in this element. If 
				the user attempts to create such a selection, the UA must instead end the 
				selection range at the element boundary.
				The UA must allow selections to extend across this element, and such selections 
				must include the content of the element.</reference>
			</element>
			<element pattern="all">
				<reference>The content of the element must be selected atomically: If a selection 
				would contain part of the element, then the selection must contain the entire 
				element including all its descendants. If the element is selected and the used 
				value of user-select on its parent is all, then the parent must be included in 
				the selection, recursively.
				If this element has descendants on which the used value of user-select is not 
				all and if a selection is entirely contained in these descendants, then the 
				selection is not extended to include this whole element.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="-webkit-user-select" highlight="css-property" id="e.css.webkit-user-select" idref="e.css.webkit-user-select">
	<autocomplete append=": " />
	<reference>The <i>user-select</i> property specifies whether the text of an element 
	can be selected.
	In web browsers, if you double-click on some text it will be selected/highlighted. 
	This property can be used to prevent this.
	<b>Note:</b> some browser versions require the prefix -webkit-, -ms- or -moz-
	<b>Note:</b> User agents must not apply the user-select property to the 
	<i>::first-line</i> and <i>::first-letter</i> pseudo-elements.
	<b>Values:</b> auto | text | none | contain | all | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements, and optionally to the ::before and ::after pseudo-elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-user-select">www.w3.org</a></reference>
	<context idref="c.css.user-select" />
</element>

<element pattern="vertical-align" highlight="css-property" id="e.css.vertical-align" idref="e.css.vertical-align">
	<autocomplete append=": " />
	<reference>The <i>vertical-align</i> property sets the vertical alignment of an element.
	<b>Values:</b> [ first | last] || &lt;<i>alignment-baseline</i>&gt; || &lt;<i>baseline-shift</i>&gt; |
		inherit | initial	
	The values are for
	&lt;<i>alignment-baseline</i>&gt;: alphabetic | baseline | central | ideographic | mathematical | 
		middle | text-bottom | text-top
	&lt;<i>baseline-shift</i>&gt;: &lt;<i>length-percentage</i>&gt; | bottom | center | sub | super | top
	<b>Initial:</b> baseline
	<b>Applies to:</b> inline-level boxes, flex items, grid items, table cells, and SVG text content elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A or refer to the <i>line-height</i> of the element itself
	<b>Media:</b> visual
	<b>Computed value:</b> for &lt;<i>length-percentage</i>&gt; the absolute value, otherwise as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-inline-3-20221114/#propdef-vertical-align">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.vertical-align" idref="c.css.vertical-align">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="alphabetic">
				<reference>Used in writing Latin, Cyrillic, Greek, and many other scripts, corresponds 
				to the bottom of most, but not all, their characters. Often represented as zero in 
				font design coordinate systems</reference>
			</element>
			<element pattern="baseline">
				<reference>Default. The element is aligned with the baseline of the parent.</reference>
			</element>
			<element pattern="bottom">
				<reference>The element is aligned with the lowest element on the line</reference>
			</element>
			<element pattern="central">
				<reference>Corresponds to the ideographic central baseline, halfway between the 
				ideographic-under and ideographic-over baselines. Assigned to <i>bsln value 1</i> 
				in TrueType AAT.</reference>
			</element>
			<element pattern="ideographic">
				<reference>Corresponds to the line-under design edge of CJK (Han/Hangul/Kana) text. 
				Assigned to <i>ideo</i> in OpenType.</reference>
			</element>
			<element pattern="mathematical">
				<reference>Corresponds to center baseline around which mathematical characters are 
				designed. Assigned to math in OpenType and <i>bsln value 4</i> in TrueType AAT. </reference>
			</element>
			<element pattern="middle">
				<reference>In general, use the x-middle baselines; except under <i>text-orientation: upright</i> 
				(where the alphabetic and x-height baselines are essentially meaningless) use the 
				central baseline instead. </reference>
			</element>
			<element pattern="sub">
				<reference>The element is aligned with the subscript baseline of the parent</reference>
			</element>
			<element pattern="super">
				<reference>The element is aligned with the superscript baseline of the parent</reference>
			</element>
			<element pattern="text-bottom">
				<reference>The element is aligned with the bottom of the parent element's font</reference>
			</element>
			<element pattern="text-top">
				<reference>The element is aligned with the top of the parent element's font</reference>
			</element>
			<element pattern="top">
				<reference>The element is aligned with the top of the tallest element on the line</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
			<element pattern="0"/>
		</group>
		<element idref="e.css.length.neg"/>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="visibility" highlight="css-property" id="e.css.visibility" idref="e.css.visibility">
	<autocomplete append=": " />
	<reference>The <i>visibility</i> property specifies whether or not an element is visible.
	<b>Tip:</b> Hidden elements take up space on the page. Use the display property to 
	both hide and remove an element from the document layout!
	<b>Values:</b> visible | hidden | collapse | inherit | initial
	<b>Initial:</b> visible
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-display-3-20221118/#propdef-visibility">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.visibility" idref="c.css.visibility">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="visible">
				<reference>Default value. The element is visible</reference>
			</element>
			<element pattern="hidden">
				<reference>The element is hidden (but still takes up space)</reference>
			</element>
			<element pattern="collapse">
				<reference>Only for table rows (&lt;tr&gt;), row groups (&lt;tbody&gt;), columns (&lt;col&gt;), 
				column groups (&lt;colgroup&gt;). This value removes a row or column, but it does 
				not affect the table layout. The space taken up by the row or column will be 
				available for other content.
				If <i>collapse</i> is used on other elements, it renders as &quot;<i>hidden</i>&quot;</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="voice-family" highlight="css-property" id="e.css.voice-family" idref="e.css.voice-family">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>voice-family</i> property specifies a prioritized list of component values 
	that are separated by commas to indicate that they are alternatives. (This is 
	analogous to <i>font-family</i> in visual style sheets.) Each component value 
	potentially designates a speech synthesis voice instance, by specifying match 
	criteria.
	<b>Values:</b> [[&lt;<i>family-name</i>&gt; | &lt;<i>generic-voice</i>&gt;],]* [&lt;<i>family-name</i>&gt; | 
		&lt;<i>generic-voice</i>&gt;] | preserve | inherit | initial
	The values are for
	&lt;<i>family-name</i>&gt;: Values are specific voice instances (e.g., Mike, comedian, mary, carlos2, 
		&quot;valley girl&quot;). Like font-family names, voice names must either be given quoted as strings, 
		or unquoted as a sequence of one or more CSS identifiers.
		Identifyers are:
		&lt;<i>age</i>&gt;: child | young | old
		&lt;<i>gender</i>&gt;: male | female | neuter
		&lt;<i>integer</i>&gt;: An integer indicating the preferred variant (e.g. &quot;the second male child voice&quot;). Only 
			positive integers (i.e. excluding zero) are allowed. The value 1 refers to the first of all 
			matching voices.
		&lt;<i>preserve</i>&gt;: Indicates that the voice-family value gets inherited and used regardless of any potential 
			language change within the content markup.
	&lt;<i>generic-voice</i>&gt;: 		
		&lt;<i>age</i>&gt;: child | young | old
		&lt;<i>gender</i>&gt;: male | female | neuter
		&lt;<i>integer</i>&gt;: An integer indicating the preferred variant (e.g. &quot;the second male child voice&quot;). Only 
			positive integers (i.e. excluding zero) are allowed. The value 1 refers to the first of all 
			matching voices.
	<b>Initial:</b> implementation-dependent 
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-voice-family">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.voice-family" idref="c.css.voice-family">
		<group highlight="css-value" >
			<autocomplete append=" ;" backup_cursor="1" />
			<element pattern="female">
				<reference>A female generic voice. Should be added as fallback if a specific
				family-name (like &quot;mike&quot;) is given.</reference>
			</element>
			<element pattern="male">
				<reference>A male generic voice. Should be added as fallback if a specific
				family-name (like &quot;mike&quot;) is given.</reference>
			</element>
			<element pattern="neutral">
				<reference>A neutral generic voice. Should be added as fallback if a specific
				family-name (like &quot;mike&quot;) is given.</reference>
			</element>
			<element pattern="preserve">
				<reference>Indicates that the voice-family value gets inherited and used regardless of any potential 
			language change within the content markup.</reference>
			</element>
			<element pattern="mike">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="comedian">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="mary">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="carlos">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="romeo">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="igor">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="valley girl">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="Mike">
				<reference>A specific voice type. For the case that this is not available 
				to the UA, a generic voice (female, male, neutral) should be added as
				fallback.</reference>
			</element>
			<element pattern="child">
				<reference>A child's voice.</reference>
			</element>
			<element pattern="young">
				<reference>A young person's voice.</reference>
			</element>
			<element pattern="old">
				<reference>An old person's voice.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.text" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="voice-pitch" highlight="css-property" id="e.css.voice-pitch" idref="e.css.voice-pitch">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>voice-pitch</i> property specifies the &quot;baseline&quot; pitch of the 
	generated speech output, which depends on the used voice-family instance, and 
	varies across speech synthesis processors (it approximately corresponds to the 
	average pitch of the output). For example, the common pitch for a male voice 
	is around 120Hz, whereas it is around 210Hz for a female voice.
	<b>Values:</b> &lt;<i>frequency</i>&gt; &amp;&amp; absolute | [[x-low | low | medium | high | x-high] || 
		[&lt;<i>frequency</i>&gt; | &lt;<i>semitones</i>&gt; | &lt;<i>percentage</i>&gt;]]  | inherit | initial
	The values are for
	&lt;<i>frequency</i>&gt;: A value in frequency units (Hertz or kiloHertz, e.g. 100Hz, +2kHz). 
		Values are restricted to positive numbers when the <i>absolute</i> keyword is specified. 
		Otherwise (when the <i>absolute</i> keyword is not specified), a negative value represents 
		a decrement, and a positive value represents an increment, relative to the inherited value. 
		For example, 2kHz is a positive offset (strictly equivalent to +2kHz), and +2kHz absolute 
		is an absolute frequency (strictly equivalent to 2kHz absolute).
	&lt;<i>semitones</i>&gt;: Specifies a relative change (decrement or increment) to the inherited 
		value. The syntax of &lt;semitones&gt; allowed values is a dimension with the unit identifier st 
		(semitones). A semitone interval corresponds to the step between each note on an equal 
		temperament chromatic scale. A semitone can therefore be quantified as the difference 
		between two consecutive pitch frequencies on such scale. 		
	&lt;<i>percentage</i>&gt;: Positive and negative percentage values are allowed, to represent 
		an increment or decrement (respectively) relative to the inherited value. Computed values 
		are calculated by adding (or subtracting) the specified fraction of the inherited value, 
		to (from) the inherited value. For example, 50% (which is equivalent to +50%) with a 
		inherited value of 200Hz results in 200 + (200*0.5) = 300Hz. Conversely, -50% results 
		in 200-(200*0.5) = 100Hz. 
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> refer to inherited value
	<b>Media:</b> aural
	<b>Computed value:</b> one of the predefined pitch keywords if only the keyword is specified by 
	itself, otherwise an absolute frequency calculated by converting the keyword value (if any) to 
	a fixed frequency based on the current voice-family and by applying the specified relative 
	offset (if any) 
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-voice-pitch">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.voice-pitch" idref="c.css.voice-pitch">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="absolute">
				<reference>This keyword indicates that the given frequency is absolute and
				not relative to another frequency.</reference>
			</element>
			<element pattern="x-low">
				<reference>A very low pitch</reference>
			</element>
			<element pattern="low">
				<reference>A low pitch (higher than x-low, but lower than medium)</reference>
			</element>
			<element pattern="medium">
				<reference>Default. A medium pitch (higher than low, but lower than high).</reference>
			</element>
			<element pattern="high">
				<reference>A high pitch (higher than medium, but lower than x-high).</reference>
			</element>
			<element pattern="x-high">
				<reference>A very high pitch</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
<!--			<element pattern="+" highlight="css-value" />-->
		<element id="e.css.percent.neg" idref="e.css.percent.neg" pattern="-*[0-9]+\.?[0-9]*%" is_regex="1" highlight="css-value"/>
		<element id="e.css.frequency" idref="e.css.frequency" pattern="-*\+*[0-9]+\.?[0-9]*(Hz|kHz)" is_regex="1" highlight="css-value"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="voice-range" highlight="css-property" id="e.css.voice-range" idref="e.css.voice-range">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>voice-range</i> property specifies the variability in the &quot;baseline&quot; pitch, 
	i.e. how much the fundamental frequency may deviate from the average pitch of the 
	speech output. The dynamic pitch range of the generated speech generally increases 
	for a highly animated voice, for example when variations in inflection are used to 
	convey meaning and emphasis in speech. Typically, a low range produces a flat, 
	monotonic voice, whereas a high range produces an animated voice.
	<b>Values:</b> &lt;<i>frequency</i>&gt; &amp;&amp; absolute | [[x-low | low | medium | high | x-high] || 
		[&lt;<i>frequency</i>&gt; | &lt;<i>semitones</i>&gt; | &lt;<i>percentage</i>&gt;]]  | inherit | initial
	The values are for
	&lt;<i>frequency</i>&gt;: A value in frequency units (Hertz or kiloHertz, e.g. 100Hz, +2kHz). 
		Values are restricted to positive numbers when the <i>absolute</i> keyword is specified. 
		Otherwise (when the <i>absolute</i> keyword is not specified), a negative value represents 
		a decrement, and a positive value represents an increment, relative to the inherited value. 
		For example, 2kHz is a positive offset (strictly equivalent to +2kHz), and +2kHz absolute 
		is an absolute frequency (strictly equivalent to 2kHz absolute).
	&lt;<i>semitones</i>&gt;: Specifies a relative change (decrement or increment) to the inherited 
		value. The syntax of &lt;semitones&gt; allowed values is a dimension with the unit identifier st 
		(semitones). A semitone interval corresponds to the step between each note on an equal 
		temperament chromatic scale. A semitone can therefore be quantified as the difference 
		between two consecutive pitch frequencies on such scale. 		
	&lt;<i>percentage</i>&gt;: Positive and negative percentage values are allowed, to represent 
		an increment or decrement (respectively) relative to the inherited value. Computed values 
		are calculated by adding (or subtracting) the specified fraction of the inherited value, 
		to (from) the inherited value. For example, 50% (which is equivalent to +50%) with a 
		inherited value of 200Hz results in 200 + (200*0.5) = 300Hz. Conversely, -50% results 
		in 200-(200*0.5) = 100Hz. 
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> refer to inherited value
	<b>Media:</b> aural
	<b>Computed value:</b> one of the predefined pitch keywords if only the keyword is specified by 
	itself, otherwise an absolute frequency calculated by converting the keyword value (if any) to 
	a fixed frequency based on the current voice-family and by applying the specified relative 
	offset (if any) 
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-voice-pitch">www.w3.org</a></reference>
	<context idref="c.css.voice-pitch" />
</element>

<element pattern="voice-rate" highlight="css-property" id="e.css.voice-rate" idref="e.css.voice-rate">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>voice-rate</i> property manipulates the rate of generated synthetic speech in terms 
	of words per minute.
	<b>Values:</b> [normal | x-slow | slow | medium | fast | x-fast] || &lt;<i>percentage</i>&gt; | 
		inherit | initial
	&lt;<i>percentage</i>&gt;: Only non-negative percentage values are allowed. This 
		represents a change relative to the given keyword value (see enumeration above), 
		or to the default value for the root element, or otherwise to the inherited 
		speaking rate (which may itself be a combination of a keyword value and of a 
		percentage, in which case percentages are combined multiplicatively). For example, 
		50% means that the speaking rate gets multiplied by 0.5 (half the value). 
		Percentages above 100% result in faster speaking rates (relative to the base 
		keyword), whereas percentages below 100% result in slower speaking rates. 
	<b>Example:</b> <i>voice-rate: fast 120%;</i> The fast rate will be multiplied by 1.2
	<b>Example:</b> <i>voice-rate: fast 50%;</i> The fast rate will be multiplied by 0.5
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> refer to default value
	<b>Media:</b> aural
	<b>Computed value:</b> a keyword value, and optionally also a percentage relative to 
		the keyword (if not 100%) 
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-voice-rate">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.voice-rate" idref="c.css.voice-rate">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default. &quot;resets&quot; the speaking rate to the intrinsic voice value</reference>
			</element>
			<element pattern="x-slow">
				<reference>A very slow rate of ~80 words/minute. The actual rate depends 
				on the language.</reference>
			</element>
			<element pattern="slow">
				<reference>A slow rate of ~120 words/minute. The actual rate depends 
				on the language.</reference>
			</element>
			<element pattern="medium">
				<reference>A medium rate of 180 to 200 words/minute. The actual rate depends 
				on the language.</reference>
			</element>
			<element pattern="fast">
				<reference>A fast rate of ~500 words/minute. The actual rate depends 
				on the language.</reference>
			</element>
			<element pattern="x-fast">
				<reference>A very fast rate of >500 words/minute. The actual rate depends 
				on the language.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
			<element pattern="+" highlight="css-value" />
		<element idref="e.css.percent"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="voice-stress" highlight="css-property" id="e.css.voice-stress" idref="e.css.voice-stress">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>voice-stress</i> property manipulates the strength of emphasis, which is 
	normally applied using a combination of pitch change, timing changes, loudness 
	and other acoustic differences. The precise meaning of the values therefore 
	depend on the language being spoken.
	<b>Values:</b> normal | strong | moderate | none | reduced | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> refer to default value
	<b>Media:</b> aural
	<b>Computed value:</b> specified value
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-voice-stress">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.voice-stress" idref="c.css.voice-stress">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default. Represents the default emphasis produced by the speech synthesizer. </reference>
			</element>
			<element pattern="strong">
				<reference>This value is monotonically non-decreasing in strength. Its application 
				results in more emphasis than what the speech synthesizer would normally produce 
				(i.e. more than the value corresponding to <i>normal</i>).</reference>
			</element>
			<element pattern="moderate">
				<reference>This value is monotonically non-decreasing in strength. Its application 
				results in more emphasis than what the speech synthesizer would normally produce 
				(i.e. more than the value corresponding to <i>normal</i>).</reference>
			</element>
			<element pattern="none">
				<reference>Prevents the synthesizer from emphasizing text it would normally emphasize.</reference>
			</element>
			<element pattern="reduced">
				<reference>Effectively the opposite of emphasizing a word.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="voice-volume" highlight="css-property" id="e.css.voice-volume" idref="e.css.voice-volume">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>voice-volume</i> property allows authors to control the amplitude of the audio 
	waveform generated by the speech synthesizer, and is also used to adjust the relative 
	volume level of audio cues within the aural box model of the selected element.
	<b>Values:</b> silent | [[x-soft | soft | medium | loud | x-loud] || &lt;<i>decibel</i>&gt;]  | inherit | initial
	<b>Initial:</b> medium
	<b>Applies to:</b> all elements
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> aural
	<b>Computed value:</b> silent, or a keyword value and optionally also a decibel offset (if not zero)
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-speech-1-20230214/#propdef-voice-volume">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.voice-volume" idref="c.css.voice-volume">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="medium">
				<reference>Default. Represents the default emphasis produced by the speech synthesizer. </reference>
			</element>
			<element pattern="silent">
				<reference>Specifies that no sound is generated (the text is read &quot;silently&quot;). </reference>
			</element>
			<element pattern="x-soft">
				<reference>The volume is very soft (minimum audible)</reference>
			</element>
			<element pattern="soft">
				<reference>The volume is soft (louder than x-soft, but softer than medium)</reference>
			</element>
			<element pattern="loud">
				<reference>The volume is loud (louder than medium, but softer than x-loud)</reference>
			</element>
			<element pattern="x-loud">
				<reference>The volume is very loud (maximum tolerable)</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.decibel"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="white-space" highlight="css-property" id="e.css.white-space" idref="e.css.white-space">
	<autocomplete append=": " />
	<reference>Declares how white space inside the element is handled.
	<b>Values:</b> break-spaces | normal | nowrap | pre | pre-wrap | pre-line | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> N/A
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-white-space">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.white-space" idref="c.css.white-space">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="break-spaces">
				<reference>The behavior is identical to that of pre-wrap, except that:
-&gt; Any sequence of preserved white space or other space separators 
	always takes up space, including at the end of the line.
-&gt; A line breaking opportunity exists after every preserved white 
	space character and after every other space separator (including 
	between adjacent spaces). </reference>
			</element>
				<element pattern="normal">
				<reference>Default. Sequences of whitespace will collapse into a single whitespace. 
				Text will wrap when necessary.</reference>
			</element>
			<element pattern="nowrap">
				<reference>Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a &lt;br&gt; tag is encountered</reference>
			</element>
			<element pattern="pre">
				<reference>Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the &lt;pre&gt; tag in HTML </reference>
			</element>
			<element pattern="pre-line">
				<reference>Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks</reference>
			</element>
			<element pattern="pre-wrap">
				<reference>Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="widows" highlight="css-property" id="e.css.widows" idref="e.css.widows">
	<autocomplete append=": " />
	<reference>The <i>widows</i> property specifies the minimum number of lines that must be 
	left at the top of a page or column.
	<b>Tip:</b> Also look at the <i>orphans</i> property.
	<b>Values:</b> &lt;<i>integer</i>&gt; | inherit | initial
	<b>Initial:</b> 2
	<b>Applies to:</b> block containers that establish an inline formatting context
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified integer
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2018/WD-css-break-4-20181218/#propdef-widows">www.w3.org</a></reference>
	<context idref="c.css.order" />
</element>

<element pattern="width" highlight="css-property" id="e.css.width" idref="e.css.width">
	<autocomplete append=": " />
	<reference>The width property sets the width of an element.
	The width of an element does not include padding, borders, or margins!
	<b>Note:</b> The <i>min-width</i> and <i>max-width</i> properties override the <i>width</i> property.
	<b>Values:</b> auto | &lt;<i>length-percentage</i>&gt; | min-content | max-content | 
		fit-content(&lt;<i>length-percentage</i>&gt;) | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements but non-replaced inline elements
	<b>Inherited:</b> no
	<b>Percentages:</b> relative to width/height of containing block
	<b>Media:</b> visual
	<b>Computed value:</b> as specified, with &lt;<i>length-percentage</i>&gt; values computed
	<b>Animatable:</b> yes
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2021/WD-css-sizing-3-20211217/#propdef-width">www.w3.org</a></reference>
	<context idref="c.css.height" />
</element>

<element pattern="will-change" highlight="css-property" id="e.css.will-change" idref="e.css.will-change">
	<autocomplete append=": " />
	<reference>Specifies the content width of boxes.
	<b>Values:</b> auto | &lt;<i>animateable-feature</i>&gt;# | inherit | initial
	The values for &lt;<i>animateable-feature</i>&gt; are:
	scroll-position | contents | &lt;<i>custom-ident</i>&gt;
	<b>Initial:</b> auto
	<b>Applies to:</b> all elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/CRD-css-will-change-1-20220505/#propdef-will-change">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.will-change" idref="c.css.will-change">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Expresses no particular intent; the user agent should apply whatever heuristics and optimizations it normally does.</reference>
			</element>
				<element pattern="scroll-position">
				<reference>Indicates that the author expects to animate or change the scroll position of the element in the near future.</reference>
			</element>
			<element pattern="contents">
				<reference>Indicates that the author expects to animate or change something about the element’s contents in the near future.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.text"/>
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="word-break" highlight="css-property" id="e.css.word-break" idref="e.css.word-break">
	<autocomplete append=": " />
	<reference>The word-break property specifies how words should break when reaching the end of a line.
	<b>Values:</b> normal | keep-all | break-all | break-word | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-text-3-20230213/#propdef-word-break">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.word-break" idref="c.css.word-break">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default value. Uses default line break rules</reference>
			</element>
			<element pattern="keep-all">
				<reference>Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value &quot;normal&quot;</reference>
			</element>
			<element pattern="break-all">
				<reference>To prevent overflow, word may be broken at any character</reference>
			</element>
			<element pattern="break-word">
				<reference>To prevent overflow, word may be broken at arbitrary points</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
			<element pattern="0"/>
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="word-spacing" highlight="css-property" id="e.css.word-spacing" idref="e.css.word-spacing">
	<autocomplete append=": " />
	<reference>The <i>word-spacing</i> property increases or decreases the white space between words.
	<b>Note:</b> Negative values are allowed.
	<b>Values:</b> normal | &lt;<i>length</i>&gt; | inherit | initial
	<b>Initial:</b> normal
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> an absolute length
	<b>Animatable:</b> yes
	<b>Animation type:</b> by computed value
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-text-3-20230213/#propdef-word-spacing">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.word-spacing" idref="c.css.word-spacing">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="normal">
				<reference>Default value. Defines normal space between words (0.25em)</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
			<element pattern="0"/>
		</group>
		<element idref="e.css.length.neg" />
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="word-wrap" highlight="css-property"  id="e.css.word-wrap" idref="e.css.word-wrap">
	<autocomplete append=": " />
	<reference>The <i>word-wrap</i> property allows long words to be broken and wrap onto the next line.
	<b>Values:</b> normal | break-word | anywhere | initial | inherit
	<b>Initial:</b> normal
	<b>Applies to:</b> text
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified value
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2023/CRD-css-text-3-20230213/#propdef-word-wrap">www.w3.org</a></reference>
	<context idref="c.css.overflow-wrap" />
</element>

<element pattern="wrap-after" highlight="css-property"  id="e.css.wrap-after" idref="e.css.wrap-after">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>wrap-after</i> property specifies a modification to break opportunities 
	in line breaking (and flex line breaking)
	<b>Values:</b> auto | avoid | avoid-line | avoid-flex | line | flex | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> inline-level boxes and flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-wrap-after">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.wrap-after" idref="c.css.wrap-after">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default value. Lines may break at allowed break points before and after the box, as determined by the line-breaking rules in effect. </reference>
			</element>
			<element pattern="avoid">
				<reference>Line breaking is suppressed immediately before/after the box: the UA may only break there if there are no other valid break points in the line. If the text breaks, line-breaking restrictions are honored as for auto. </reference>
			</element>
			<element pattern="avoid-line">
				<reference>Line breaking is suppressed immediately before/after the box: the UA may only break there if there are no other valid break points in the line.</reference>
			</element>
			<element pattern="avoid-flex">
				<reference>Same as avoid, but only for flex line breaks.</reference>
			</element>
			<element pattern="line">
				<reference>Force a line break immediately before/after the box if the box is an inline-level box. </reference>
			</element>
			<element pattern="flex">
				<reference>Force a flex line break immediately before/after the box if the box is a flex item in a multi-line flex container.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="wrap-before" highlight="css-property"  id="e.css.wrap-before" idref="e.css.wrap-before">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>wrap-before</i> property specifies a modification to break opportunities 
	in line breaking (and flex line breaking)
	<b>Values:</b> auto | avoid | avoid-line | avoid-flex | line | flex | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> inline-level boxes and flex items
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> specified keyword
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-wrap-before">www.w3.org</a></reference>
	<context idref="c.css.wrap-after" />
</element>

<element pattern="wrap-flow" highlight="css-property"  id="e.css.wrap-flow" idref="e.css.wrap-flow">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>wrap-flow</i> property 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.
	<b>Values:</b> auto | both | start | end | minimum | maximum | clear | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> block-level elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified except for element’s whose float computed value is 
		not <i>none</i>, in which case the computed value is <i>auto</i>.
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/WD-css3-exclusions-20150115/#propdef-wrap-flow">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.wrap-flow" idref="c.css.wrap-flow">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default value. No exclusion is created. Inline flow content interacts with the element as usual.</reference>
			</element>
			<element pattern="both">
				<reference>Inline flow content can flow on all sides of the exclusion.</reference>
			</element>
			<element pattern="start">
				<reference>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.</reference>
			</element>
			<element pattern="end">
				<reference>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.</reference>
			</element>
			<element pattern="minimum">
				<reference>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.</reference>
			</element>
			<element pattern="maximum">
				<reference>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.</reference>
			</element>
			<element pattern="clear">
				<reference>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.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<!-- Up to here: checked, updated and new properties added -->

<element pattern="wrap-inside" highlight="css-property"  id="e.css.wrap-inside" idref="e.css.wrap-inside">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>wrap-inside</i> property controls breaks within boxes.
	<b>Values:</b> auto | avoid | initial | inherit
	<b>Initial:</b> auto
	<b>Applies to:</b> inline-boxes
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> yes
	<b>Animation type:</b> discrete
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2022/WD-css-text-4-20221231/#propdef-wrap-inside">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.wrap-inside" idref="c.css.wrap-inside">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default value. Lines may break at allowed break points within the 
box, as determined by the line-breaking rules in effect. </reference>
			</element>
			<element pattern="avoid">
				<reference>Line breaking is suppressed within the box: the UA may only break 
within the box if there are no other valid break points in the line. 
If the text breaks, line-breaking restrictions are honored as for <i>auto</i>.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="wrap-through" highlight="css-property"  id="e.css.wrap-through" idref="e.css.wrap-through">
	<autocomplete append=": " />
	<reference><b>Warning:</b> This property may not yet be supported by all major browsers!
	The <i>wrap-through</i> property decides if an element inherits 
	its parent wrapping context. In other words, exclusions defined outside 
	the element, have no effect on the element’s children layout, if this is
	set to <i>none</i>.
	<b>Values:</b> wrap | none | initial | inherit
	<b>Initial:</b> wrap
	<b>Applies to:</b> block-level elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2015/WD-css3-exclusions-20150115/#propdef-wrap-through">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.wrap-through" idref="c.css.wrap-through">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="wrap">
				<reference>The element inherits its parent node’s wrapping context. Its 
descendant inline content wraps around exclusions defined outside the element.</reference>
			</element>
			<element pattern="none">
				<reference>The element does not inherit its parent node’s wrapping context. Its 
descendants are only subject to exclusion areas defined inside the element.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="writing-mode" highlight="css-property"  id="e.css.writing-mode" idref="e.css.writing-mode">
	<autocomplete append=": " />
	<reference>The <i>writing-mode</i> property specifies whether lines of text are laid 
	out horizontally or vertically.
	<b>Values:</b> horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | initial | inherit
	<b>Initial:</b> horizontal-tb
	<b>Applies to:</b> All elements except table row groups, table column groups, table rows, 
		table columns, ruby base container, ruby annotation container
	<b>Inherited:</b> yes
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Animation type:</b> none
	<b>Canonical Order:</b> per grammar
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2019/CR-css-writing-modes-4-20190730/#propdef-writing-mode">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;-{}.;:'&quot;" id="c.css.writing-mode" idref="c.css.writing-mode">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="horizontal-tb">
				<reference>Top-to-bottom block flow direction. Both the writing mode and the 
typographic mode are horizontal.</reference>
			</element>
			<element pattern="vertical-rl">
				<reference>Right-to-left block flow direction. Both the writing mode and the 
typographic mode are vertical.</reference>
			</element>
			<element pattern="vertical-lr">
				<reference>Left-to-right block flow direction. Both the writing mode and the 
typographic mode are vertical.</reference>
			</element>
			<element pattern="sideways-rl">
				<reference>Right-to-left block flow direction. The writing mode is vertical, while 
the typographic mode is horizontal.</reference>
			</element>
			<element pattern="sideways-lr">
				<reference>Left-to-right block flow direction. The writing mode is vertical, while 
the typographic mode is horizontal.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.end"/>
		<group class="is_SASS"><element idref="e.sass.variable" /><element idref="e.sass.newline_end"/></group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="z-index" highlight="css-property" id="e.css.z-index" idref="e.css.z-index">
	<autocomplete append=": " />
	<reference>The z-index property specifies the stack order of an element.
	An element with greater stack order is always in front of an element 
	with a lower stack order.
	<b>Note:</b> <i>z-index</i> only works on positioned elements (<i>position: absolute</i>, 
	<i>position: relative</i>, <i>position: fixed</i>, or <i>position: sticky</i>) and flex items 
	(elements that are direct children of <i>display:flex</i> elements).
	<b>Note:</b> If two positioned elements overlap without a z-index specified, the 
	element positioned last in the HTML code will be shown on top. 
	<b>Values:</b> auto | &lt;<i>integer</i>&gt; | inherit | initial
	<b>Initial:</b> auto
	<b>Applies to:</b> positioned elements
	<b>Inherited:</b> no
	<b>Percentages:</b> N/A
	<b>Media:</b> visual
	<b>Computed value:</b> as specified
	<b>Animatable:</b> no
	<b>Specification:</b> <a
	href="https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#propdef-z-index">www.w3.org</a></reference>
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.z-index" idref="c.css.z-index">
		<group highlight="css-value" >
			<autocomplete append=";" />
			<element pattern="auto">
				<reference>Default value. Sets the stack order equal to its parents.</reference>
			</element>
			<element idref="e.css.inherit" />
			<element idref="e.css.initial" />
		</group>
		<element idref="e.css.number" />
		<element idref="e.css.end"/>
		<group class="is_SASS">
			<element idref="e.sass.variable" />
			<element idref="e.sass.newline_end"/>
		</group>
		<element idref="e.css.lcomment"/>
		<element id="e.css.in_style_attribute.dquote" idref="e.css.in_style_attribute.dquote" pattern="&quot;" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_attribute.squote" idref="e.css.in_style_attribute.squote" pattern="'" highlight="string" ends_context="3" condition_contextref="c.html.attrib.style.inner" condition_mode="1" condition_relation="1" />
		<element id="e.css.in_style_section.rbrace" idref="e.css.in_style_section.rbrace" pattern="}" ends_block="1" blockstartelement="e.css.lbrace" highlight="css-brackets" ends_context="2"/>
	</context>
</element>

<element pattern="@starting-style" highlight="css-at-rule"/>
<element idref="e.css.lbrace" />

<!--
The following doesn't seem to work

<element pattern="-webkit-box-decoration-break"> 
	<context symbols=" &#9;&#10;&#13;{}.;:'&quot;" id="c.css.webkit-box-decoration-break" idref="c.css.webkit-box-decoration-break">
		<element idref="e.css.box-decoration-break" />
	</context>
</element>
-->
</bfinc>