INSERT INTO `xf_template` (`template_id`, `type`, `title`, `style_id`, `template`, `template_parsed`, `addon_id`, `version_id`, `version_string`, `last_edit_date`) VALUES
(406, 0x61646d696e, 0x7374796c655f70726f70657274795f6d6163726f73, 0, '<xf:macro id=\"property_edit\"\n	arg-property=\"!\"\n	arg-definitionEditable=\"{{ false }}\"\n	arg-isActive=\"{{ true }}\"\n	arg-customizationState=\"\"\n	arg-enableVariations=\"{{ false }}\"\n	arg-submitName=\"properties\">\n\n	<xf:if is=\"$property.property_type == \'css\'\">\n		<xf:macro id=\"property_edit_css\"\n			arg-property=\"{$property}\"\n			arg-definitionEditable=\"{$definitionEditable}\"\n			arg-isActive=\"{$isActive}\"\n			arg-customizationState=\"{$customizationState}\"\n			arg-submitName=\"{$submitName}\" />\n	<xf:else />\n		<xf:macro id=\"property_edit_value\"\n			arg-property=\"{$property}\"\n			arg-definitionEditable=\"{$definitionEditable}\"\n			arg-customizationState=\"{$customizationState}\"\n			arg-enableVariations=\"{$enableVariations}\"\n			arg-submitName=\"{$submitName}\" />\n	</xf:if>\n</xf:macro>\n\n<xf:macro id=\"property_edit_value\"\n	arg-property=\"!\"\n	arg-definitionEditable=\"!\"\n	arg-customizationState=\"!\"\n	arg-enableVariations=\"{{ false }}\"\n	arg-submitName=\"!\">\n\n	<xf:css src=\"style_properties.less\" />\n\n	<xf:set var=\"$titleHtml\"><span class=\"u-anchorTarget\" id=\"sp-{$property.property_name}\"></span>{$property.title}</xf:set>\n\n	<xf:set var=\"$formBaseKey\" value=\"{$submitName}[{$property.property_name}]\" />\n\n	<xf:set var=\"$hintHtml\"><xf:trim>\n		<xf:if is=\"$xf.development\">{$property.property_name} {$property.display_order|parens}</xf:if>\n		<xf:if is=\"$definitionEditable\">\n			<a href=\"{{ link(\'style-properties/edit\', $property) }}\">{{ phrase(\'edit\') }}</a>\n		</xf:if>\n\n		<xf:if is=\"$property.addon_id AND $property.Group AND $property.addon_id != $property.Group.addon_id AND $property.addon_id != \'XF\'\">\n			<span class=\"formRow-hint-featured\">\n				{$property.AddOn.title}\n			</span>\n		</xf:if>\n\n		<xf:macro id=\"customization_hint\"\n			arg-state=\"{$customizationState}\"\n			arg-submitName=\"{$submitName}\"\n			arg-property=\"{$property}\"\n			arg-checkbox=\"{{ true }}\" />\n\n		<xf:hiddenval name=\"{$submitName}_listed[]\" value=\"{$property.property_name}\" />\n	</xf:trim></xf:set>\n\n	<xf:set var=\"$valueOptions\" value=\"{{ $property.getValueOptions() }}\" />\n\n	<xf:set var=\"$rowClass\" value=\"{{ $property.depends_on ? \'js-stylePropDependsOn-\' . $property.depends_on : \'\' }} xf-{$property.property_name} js-property--{$property.property_name}\" />\n\n	<span class=\"u-anchorTarget\" id=\"@xf-{$property.property_name}\"></span>\n\n	<xf:if is=\"$property.value_type == \'boolean\'\">\n\n		<!--boolean-->\n		<xf:checkboxrow rowclass=\"{$rowClass}\"\n			hint=\"{$hintHtml}\">\n\n			<xf:option name=\"{$formBaseKey}\"\n				value=\"1\"\n				selected=\"$property.property_value == 1\"\n				data-xf-init=\"disabler\"\n				data-container=\".js-stylePropDependsOn-{$property.property_name}\"\n				data-optional=\"true\"\n				data-hide=\"{{ $valueOptions.hideDependent ?: \'false\' }}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$property.description}\"  />\n		</xf:checkboxrow>\n\n\n	<xf:elseif is=\"$property.value_type == \'radio\'\" />\n\n		<xf:if is=\"$property.has_variations\">\n			<xf:formrow rowtype=\"input\"\n				rowclass=\"formRow-styleProperty {$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\">\n\n				<xf:if is=\"$enableVariations\">\n					<ul class=\"listPlain inputGroup-container\">\n						<li>\n							<div class=\"inputGroup inputGroup--grow\">\n								<xf:foreach loop=\"$property.getVariations()\" value=\"$variation\">\n									<xf:if is=\"$variation != \'default\'\">\n										<span class=\"inputGroup-splitter\"></span>\n									</xf:if>\n\n									<xf:radio name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\">\n										<xf:options source=\"{$valueOptions}\" />\n									</xf:radio>\n								</xf:foreach>\n							</div>\n						</li>\n					</ul>\n				<xf:else />\n					<xf:radio name=\"{$formBaseKey}[default]\" value=\"{{ $property.getVariationValue(\'default\') }}\">\n						<xf:options source=\"{$valueOptions}\" />\n					</xf:radio>\n\n					<xf:foreach loop=\"$property.getVariations(false)\" value=\"$variation\">\n						<xf:hiddenval name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\" />\n					</xf:foreach>\n				</xf:if>\n			</xf:formrow>\n		<xf:else />\n			<xf:radiorow name=\"{$formBaseKey}\" value=\"{$property.property_value}\" rowclass=\"{$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\">\n\n				<xf:options source=\"{$valueOptions}\" />\n			</xf:radiorow>\n		</xf:if>\n\n\n	<xf:elseif is=\"$property.value_type == \'select\'\" />\n\n		<xf:selectrow name=\"{$formBaseKey}\" value=\"{$property.property_value}\" rowclass=\"{$rowClass}\"\n			label=\"{$titleHtml}\"\n			hint=\"{$hintHtml}\"\n			explain=\"{$property.description}\">\n\n			<xf:options source=\"{$valueOptions}\" />\n		</xf:selectrow>\n\n	<xf:elseif is=\"$property.value_type == \'number\'\" />\n\n		<xf:numberboxrow name=\"{$formBaseKey}\" value=\"{$property.property_value}\"\n			min=\"{$valueOptions.min}\"\n			max=\"{$valueOptions.max}\"\n			step=\"{$valueOptions.step}\"\n			units=\"{$valueOptions.units}\"\n			rowclass=\"{$rowClass}\" rowid=\"propRow_{$property.property_name}\"\n			label=\"{$titleHtml}\"\n			hint=\"{$hintHtml}\"\n			explain=\"{$property.description}\" />\n\n	<xf:elseif is=\"$property.value_type == \'color\'\" />\n\n		<xf:if is=\"$property.has_variations\">\n			<xf:formrow rowtype=\"input\"\n				rowclass=\"formRow-styleProperty {$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\">\n\n				<xf:if is=\"$enableVariations\">\n					<ul class=\"listPlain inputGroup-container\">\n						<li>\n							<div class=\"inputGroup inputGroup--grow\">\n								<xf:foreach loop=\"$property.getVariations()\" value=\"$variation\">\n									<xf:if is=\"$variation != \'default\'\">\n										<span class=\"inputGroup-splitter\"></span>\n									</xf:if>\n\n									<xf:macro id=\"public:color_picker_macros::color_picker\"\n										arg-name=\"{$formBaseKey}[{$variation}]\"\n										arg-value=\"{{ $property.getVariationValue($variation) }}\"\n										arg-mapVariation=\"{$variation}\"\n										arg-mapName=\"@xf-{$property.property_name}\"\n										arg-allowPalette=\"{{ $valueOptions.hidePalette ? \'false\' : \'true\'}}\"\n										arg-row=\"{{ false }}\"\n										arg-includeScripts=\"{{ false }}\"\n										arg-showTxt=\"{{ true }}\"/>\n								</xf:foreach>\n							</div>\n						</li>\n					</ul>\n				<xf:else />\n					<xf:macro id=\"public:color_picker_macros::color_picker\"\n						arg-name=\"{$formBaseKey}[default]\"\n						arg-value=\"{{ $property.getVariationValue(\'default\') }}\"\n						arg-mapVariation=\"default\"\n						arg-mapName=\"@xf-{$property.property_name}\"\n						arg-allowPalette=\"{{ $valueOptions.hidePalette ? \'false\' : \'true\'}}\"\n						arg-row=\"{{ false }}\"\n						arg-includeScripts=\"{{ false }}\"\n						arg-showTxt=\"{{ true }}\"/>\n\n					<xf:foreach loop=\"$property.getVariations(false)\" value=\"$variation\">\n						<xf:hiddenval name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\" />\n					</xf:foreach>\n				</xf:if>\n			</xf:formrow>\n		<xf:else />\n			<xf:macro template=\"public:color_picker_macros\" name=\"color_picker\"\n				arg-name=\"{$formBaseKey}\"\n				arg-value=\"{$property.property_value}\"\n				arg-mapVariation=\"default\"\n				arg-mapName=\"@xf-{$property.property_name}\"\n				arg-allowPalette=\"{{ $valueOptions.hidePalette ? \'false\' : \'true\'}}\"\n				arg-label=\"{$titleHtml}\"\n				arg-hint=\"{$hintHtml}\"\n				arg-explain=\"{$property.description}\"\n				arg-rowClass=\"formRow-styleProperty {$rowClass}\" rowid=\"propRow_{$property.property_name}\"\n				arg-includeScripts=\"{{ false }}\"\n				arg-showTxt=\"{{ true }}\"/>\n		</xf:if>\n\n	<xf:elseif is=\"$property.value_type == \'unit\'\" />\n\n		<xf:textboxrow\n			name=\"{$formBaseKey}\"\n			value=\"{$property.property_value}\"\n			class=\"input--number\"\n			rowclass=\"{$rowClass}\"\n			label=\"{$titleHtml}\"\n			hint=\"{$hintHtml}\"\n			explain=\"{$property.description}\"\n			dir=\"ltr\" />\n\n	<xf:elseif is=\"$property.value_type == \'template\'\" />\n\n		<xf:if is=\"$valueOptions.template\">\n			<xf:set var=\"$includeHtml\"><xf:include template=\"{$valueOptions.template}\" /></xf:set>\n			<xf:if is=\"$includeHtml is empty\">\n				<xf:formrow label=\"{$titleHtml}\" hint=\"{$hintHtml}\">\n					<div class=\"blockMessage blockMessage--error blockMessage--iconic\">{{ phrase(\'template_x_not_found\', {\'template\': $valueOptions.template}) }}</div>\n				</xf:formrow>\n			<xf:else />\n				{$includeHtml}\n			</xf:if>\n		<xf:else />\n			<xf:formrow label=\"{$titleHtml}\" hint=\"{$hintHtml}\">\n				<div class=\"blockMessage blockMessage--error blockMessage--iconic\">{{ phrase(\'no_template_specified\') }}</div>\n			</xf:formrow>\n		</xf:if>\n\n	<xf:elseif is=\"$property.value_type == \'string\' && $valueOptions.rows > 1\" />\n\n		<xf:if is=\"$property.has_variations\">\n			<xf:formrow rowtype=\"input\"\n				class=\"{$valueOptions.class}\"\n				rowclass=\"formRow-styleProperty {$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\">\n\n				<xf:if is=\"$enableVariations\">\n					<ul class=\"listPlain inputGroup-container\">\n						<li>\n							<div class=\"inputGroup inputGroup--grow\">\n								<xf:foreach loop=\"$property.getVariations()\" value=\"$variation\">\n									<xf:if is=\"$variation != \'default\'\">\n										<span class=\"inputGroup-splitter\"></span>\n									</xf:if>\n\n									<xf:textarea name=\"{$formBaseKey}[default]\" value=\"{{ $property.getVariationValue(\'default\') }}\"\n										rows=\"{$valueOptions.rows}\"\n										autosize=\"true\"\n										code=\"{$valueOptions.code}\"\n										dir=\"auto\" />\n								</xf:foreach>\n							</div>\n						</li>\n					</ul>\n				<xf:else />\n					<xf:textarea name=\"{$formBaseKey}[default]\" value=\"{{ $property.getVariationValue(\'default\') }}\"\n						rows=\"{$valueOptions.rows}\"\n						autosize=\"true\"\n						code=\"{$valueOptions.code}\"\n						dir=\"auto\" />\n\n					<xf:foreach loop=\"$property.getVariations(false)\" value=\"$variation\">\n						<xf:hiddenval name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\" />\n					</xf:foreach>\n				</xf:if>\n			</xf:formrow>\n		<xf:else />\n			<xf:textarearow name=\"{$formBaseKey}\" value=\"{$property.property_value}\"\n				rows=\"{$valueOptions.rows}\"\n				autosize=\"true\"\n				class=\"{$valueOptions.class}\"\n				code=\"{$valueOptions.code}\"\n				rowclass=\"{$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\"\n				dir=\"auto\" />\n		</xf:if>\n\n	<xf:elseif is=\"$property.value_type == \'string\' && $valueOptions.asset\" />\n\n		<xf:if is=\"$property.has_variations\">\n			<xf:formrow rowtype=\"input\"\n				class=\"{$valueOptions.class}\"\n				rowclass=\"formRow-styleProperty {$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\">\n\n				<xf:if is=\"$enableVariations\">\n					<ul class=\"listPlain inputGroup-container\">\n						<li>\n							<div class=\"inputGroup inputGroup--grow\">\n								<xf:foreach loop=\"$property.getVariations()\" value=\"$variation\">\n									<xf:if is=\"$variation != \'default\'\">\n										<span class=\"inputGroup-splitter\"></span>\n									</xf:if>\n\n									<xf:assetupload name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\"\n										asset=\"{$valueOptions.asset}_{$variation}\" />\n								</xf:foreach>\n							</div>\n						</li>\n					</ul>\n				<xf:else />\n					<xf:assetupload name=\"{$formBaseKey}[default]\" value=\"{{ $property.getVariationValue(\'default\') }}\"\n						asset=\"{$valueOptions.asset}_default\" />\n\n					<xf:foreach loop=\"$property.getVariations(false)\" value=\"$variation\">\n						<xf:hiddenval name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\" />\n					</xf:foreach>\n				</xf:if>\n			</xf:formrow>\n		<xf:else />\n			<xf:assetuploadrow name=\"{$formBaseKey}\" value=\"{$property.property_value}\" asset=\"{$valueOptions.asset}\"\n				class=\"{$valueOptions.class}\"\n				rowclass=\"{$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\" />\n		</xf:if>\n\n	<xf:else />\n\n		<xf:if is=\"$property.has_variations\">\n			<xf:formrow rowtype=\"input\"\n				class=\"{$valueOptions.class}\"\n				rowclass=\"formRow-styleProperty {$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\">\n\n				<xf:if is=\"$enableVariations\">\n					<ul class=\"listPlain inputGroup-container\">\n						<li>\n							<div class=\"inputGroup inputGroup--grow\">\n								<xf:foreach loop=\"$property.getVariations()\" value=\"$variation\">\n									<xf:if is=\"$variation != \'default\'\">\n										<span class=\"inputGroup-splitter\"></span>\n									</xf:if>\n\n									<xf:textbox name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\" />\n								</xf:foreach>\n							</div>\n						</li>\n					</ul>\n				<xf:else />\n					<xf:textbox name=\"{$formBaseKey}[default]\" value=\"{{ $property.getVariationValue(\'default\') }}\" />\n\n					<xf:foreach loop=\"$property.getVariations(false)\" value=\"$variation\">\n						<xf:hiddenval name=\"{$formBaseKey}[{$variation}]\" value=\"{{ $property.getVariationValue($variation) }}\" />\n					</xf:foreach>\n				</xf:if>\n			</xf:formrow>\n		<xf:else />\n			<xf:textboxrow name=\"{$formBaseKey}\"\n				value=\"{$property.property_value}\"\n				type=\"{$valueOptions.type}\"\n				class=\"{$valueOptions.class}\"\n				code=\"{$valueOptions.code}\"\n				rowclass=\"{$rowClass}\"\n				label=\"{$titleHtml}\"\n				hint=\"{$hintHtml}\"\n				explain=\"{$property.description}\"\n				dir=\"auto\" />\n		</xf:if>\n\n	</xf:if>\n</xf:macro>\n\n\n<xf:macro id=\"property_edit_css\"\n	arg-property=\"!\"\n	arg-definitionEditable=\"!\"\n	arg-isActive=\"{{ true }}\"\n	arg-customizationState=\"!\"\n	arg-submitName=\"!\">\n\n	<xf:css src=\"style_properties.less\" />\n	<xf:css src=\"public:color_picker.less\" />\n	<xf:js src=\"xf/color_picker.js\" min=\"1\" />\n\n	<xf:set var=\"$formBaseKey\" value=\"{$submitName}[{$property.property_name}]\" />\n\n	<div class=\"cssPropertyWrapper js-property--{$property.property_name}\" data-toggle-wrapper=\"1\">\n		<h3 class=\"block-header block-header--separated\">\n			<span class=\"collapseTrigger collapseTrigger--block {{ $isActive ? \'is-active\' : \'\' }}\"\n				data-xf-click=\"toggle\"\n				data-target=\"< :up :next\"\n				data-xf-init=\"toggle-storage\"\n				data-storage-key=\"sp-{$property.property_name}\">\n				<span class=\"u-anchorTarget\" id=\"sp-{$property.property_name}\"></span><span>{$property.title}</span>\n				<xf:if is=\"$property.description\"><span class=\"block-desc\">{$property.description}</span></xf:if>\n			</span>\n\n			<!-- customization_hint -->\n			<xf:macro id=\"customization_hint\"\n				arg-state=\"{$customizationState}\"\n				arg-submitName=\"{$submitName}\"\n				arg-property=\"{$property}\"\n				arg-checkbox=\"1\"/>\n			<!-- /customization_hint -->\n			<xf:hiddenval name=\"{$submitName}_listed[]\" value=\"{$property.property_name}\" />\n		</h3>\n		<div class=\"block-body block-body--collapsible {{ $isActive ? \'is-active\' : \'\' }}\">\n			<div class=\"block-row\">\n				<xf:if contentcheck=\"true\">\n					<div class=\"cssPropertyDescription\">\n					<xf:contentcheck>\n						<xf:if is=\"$definitionEditable\">\n							<span class=\"u-pullRight\">\n								<xf:button href=\"{{ link(\'style-properties/edit\', $property) }}\"\n									class=\"button--link button--small\" icon=\"edit\" />\n							</span>\n						</xf:if>\n						<xf:if is=\"$xf.development\"><div class=\"u-muted\">{$property.property_name} {$property.display_order|parens}</div></xf:if>\n					</xf:contentcheck>\n					</div>\n				</xf:if>\n\n				<ul class=\"cssProperty\">\n					<xf:if is=\"$property.isValidCssComponent(\'text\')\">\n						<li>\n							<h4 class=\"cssPropertyHeader\">{{ phrase(\'text\') }}</h4>\n							<table class=\"cssPropertySet\">\n							<tr class=\"cssPropertySet-headerRow\">\n								<th>{{ phrase(\'size\') }}</th>\n								<th>{{ phrase(\'color\') }}</th>\n								<th>{{ phrase(\'weight\') }}</th>\n							</tr>\n							<tr>\n								<td><xf:textbox\n									name=\"{$formBaseKey}[font-size]\"\n									value=\"{{ $property.getCssPropertyValue(\'font-size\') }}\"\n									title=\"font-size\"\n									class=\"input--cssProp input--cssLength\"\n									dir=\"ltr\" />\n								</td>\n\n								<td><div class=\"inputGroup inputGroup--joined inputGroup--colorSmall\" data-xf-init=\"color-picker\">\n									<xf:textbox name=\"{$formBaseKey}[color]\" value=\"{{ $property.getCssPropertyValue(\'color\') }}\" title=\"color\" class=\"input--cssProp\" dir=\"ltr\" />\n									<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n								</div></td>\n\n								<td><xf:select name=\"{$formBaseKey}[font-weight]\"\n									value=\"{{ $property.getCssPropertyValue(\'font-weight\') }}\"\n									title=\"font-weight\"\n									class=\"input--cssProp\">\n\n									<xf:option value=\"\">&nbsp;</xf:option>\n									<xf:option value=\"@xf-fontWeightHeavy\">{{ phrase(\'weight_bold\') }}</xf:option>\n									<xf:option value=\"@xf-fontWeightNormal\">{{ phrase(\'weight_normal\') }}</xf:option>\n									<xf:option value=\"@xf-fontWeightLight\">{{ phrase(\'weight_light\') }}</xf:option>\n								</xf:select></td>\n							</tr>\n							<tr>\n								<td colspan=\"3\">\n									<xf:checkbox listclass=\"inputChoices--cssTextOptions\">\n										<xf:option name=\"{$formBaseKey}[font-style]\" value=\"italic\"\n											selected=\"{{ $property.getCssPropertyValue(\'font-style\') == \'italic\' }}\" >\n											{{ phrase(\'italic\') }}\n										</xf:option>\n\n										<xf:option name=\"{$formBaseKey}[text-decoration]\" value=\"underline\"\n											selected=\"{{ $property.getCssPropertyValue(\'text-decoration\') == \'underline\' }}\">\n											{{ phrase(\'underline\') }}\n										</xf:option>\n\n										<xf:option name=\"{$formBaseKey}[text-decoration]\" value=\"none\"\n											selected=\"{{ $property.getCssPropertyValue(\'text-decoration\') == \'none\' }}\">\n											{{ phrase(\'no_text_decoration\') }}\n										</xf:option>\n									</xf:checkbox>\n								</td>\n							</tr>\n							</table>\n						</li>\n					</xf:if>\n\n					<xf:if is=\"$property.isValidCssComponent(\'background\')\">\n						<li>\n							<h4 class=\"cssPropertyHeader\">{{ phrase(\'background\') }}</h4>\n							<table class=\"cssPropertySet\">\n							<tr class=\"cssPropertySet-headerRow\">\n								<th>{{ phrase(\'color\') }}</th>\n							</tr>\n							<tr>\n								<td><div class=\"inputGroup inputGroup--joined inputGroup--color\" data-xf-init=\"color-picker\">\n									<xf:textbox name=\"{$formBaseKey}[background-color]\" value=\"{{ $property.getCssPropertyValue(\'background-color\') }}\" title=\"background-color\" class=\"input--cssProp\" dir=\"ltr\" />\n									<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n								</div></td>\n							</tr>\n							<tr class=\"cssPropertySet-headerRow\">\n								<th>{{ phrase(\'image\') }}</th>\n							</tr>\n							<tr>\n								<td><xf:assetupload name=\"{$formBaseKey}[background-image]\" asset=\"style_properties\"\n									value=\"{{ $property.getCssPropertyValue(\'background-image\') }}\"\n									title=\"background-image\"\n									class=\"input--cssProp input--colorWidthMatched\" /></td>\n							</tr>\n							</table>\n						</li>\n					</xf:if>\n\n					<xf:if is=\"$property.isValidCssComponent(\'border\') OR $property.isValidCssComponent(\'border_radius\')\">\n						<li>\n							<table class=\"cssPropertySet\">\n							<tr class=\"cssPropertySet-headerRow cssPropertySet-headerRow--separated\">\n								<th class=\"cssPropertySet-headerSetLabel\">{{ phrase(\'border\') }}</th>\n								<xf:if is=\"$property.isValidCssComponent(\'border\')\">\n									<th>{{ phrase(\'width\') }}</th>\n									<th>{{ phrase(\'color\') }}</th>\n								</xf:if>\n								<xf:if is=\"$property.isValidCssComponent(\'border_radius\')\">\n									<th>{{ phrase(\'radius\') }}</th>\n								</xf:if>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'all\') }}</td>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-width]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-width\') }}\"\n										title=\"border-width\"\n										class=\"input--cssProp input--cssLength\" dir=\"ltr\" /></td>\n\n									<td><div class=\"inputGroup inputGroup--joined inputGroup--colorSmall\" data-xf-init=\"color-picker\">\n										<xf:textbox name=\"{$formBaseKey}[border-color]\" value=\"{{ $property.getCssPropertyValue(\'border-color\') }}\" title=\"border-color\" class=\"input--cssProp\" dir=\"ltr\" />\n										<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n									</div></td>\n								</xf:if>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border_radius\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-radius]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-radius\') }}\"\n										title=\"border-radius\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n								</xf:if>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'top\') }}</td>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-top-width]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-top-width\') }}\"\n										title=\"border-top-width\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n\n									<td><div class=\"inputGroup inputGroup--joined inputGroup--colorSmall\" data-xf-init=\"color-picker\">\n										<xf:textbox name=\"{$formBaseKey}[border-top-color]\"	value=\"{{ $property.getCssPropertyValue(\'border-top-color\') }}\" title=\"border-top-color\" class=\"input--cssProp\" dir=\"ltr\" />\n										<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n									</div></td>\n								</xf:if>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border_radius\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-top-left-radius]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-top-left-radius\') }}\"\n										title=\"border-top-left-radius\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n								</xf:if>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'right\') }}</td>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-right-width]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-right-width\') }}\"\n										title=\"border-right-width\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n\n									<td><div class=\"inputGroup inputGroup--joined inputGroup--colorSmall\" data-xf-init=\"color-picker\">\n										<xf:textbox name=\"{$formBaseKey}[border-right-color]\" value=\"{{ $property.getCssPropertyValue(\'border-right-color\') }}\" title=\"border-right-color\" class=\"input--cssProp\" dir=\"ltr\" />\n										<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n									</div></td>\n								</xf:if>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border_radius\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-top-right-radius]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-top-right-radius\') }}\"\n										title=\"border-top-right-radius\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n								</xf:if>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'bottom\') }}</td>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-bottom-width]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-bottom-width\') }}\"\n										title=\"border-bottom-width\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n\n									<td><div class=\"inputGroup inputGroup--joined inputGroup--colorSmall\" data-xf-init=\"color-picker\">\n										<xf:textbox name=\"{$formBaseKey}[border-bottom-color]\"\n											value=\"{{ $property.getCssPropertyValue(\'border-bottom-color\') }}\"\n											title=\"border-bottom-color\"\n											class=\"input--cssProp\"\n											dir=\"ltr\" />\n										<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n									</div></td>\n								</xf:if>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border_radius\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-bottom-right-radius]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-bottom-right-radius\') }}\"\n										title=\"border-bottom-right-radius\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n								</xf:if>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'left\') }}</td>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-left-width]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-left-width\') }}\"\n										title=\"border-left-width\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n\n									<td><div class=\"inputGroup inputGroup--joined inputGroup--colorSmall\" data-xf-init=\"color-picker\">\n										<xf:textbox name=\"{$formBaseKey}[border-left-color]\"\n											value=\"{{ $property.getCssPropertyValue(\'border-left-color\') }}\"\n											title=\"border-left-color\"\n											class=\"input--cssProp\"\n											dir=\"ltr\" />\n										<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n									</div></td>\n								</xf:if>\n\n								<xf:if is=\"$property.isValidCssComponent(\'border_radius\')\">\n									<td><xf:textbox name=\"{$formBaseKey}[border-bottom-left-radius]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-bottom-left-radius\') }}\"\n										title=\"border-bottom-left-radius\"\n										class=\"input--cssProp input--cssLength\"\n										dir=\"ltr\" />\n									</td>\n								</xf:if>\n							</tr>\n							</table>\n						</li>\n					<xf:elseif is=\"$property.isValidCssComponent([\'border_color_simple\', \'border_width_simple\', \'border_radius_simple\'])\" />\n						<li>\n							<h4 class=\"cssPropertyHeader\">{{ phrase(\'border\') }}</h4>\n							<table class=\"cssPropertySet\">\n							<xf:if is=\"$property.isValidCssComponent(\'border_width_simple\')\">\n								<tr class=\"cssPropertySet-headerRow\">\n									<th>{{ phrase(\'width\') }}</th>\n								</tr>\n								<tr>\n									<td><xf:textbox name=\"{$formBaseKey}[border-width]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-width\') }}\"\n										title=\"border-width\"\n										class=\"input--cssProp input--colorWidthMatched\"\n										dir=\"ltr\" /></td>\n								</tr>\n							</xf:if>\n\n							<xf:if is=\"$property.isValidCssComponent(\'border_color_simple\')\">\n								<tr class=\"cssPropertySet-headerRow\">\n									<th>{{ phrase(\'color\') }}</th>\n								</tr>\n								<tr>\n									<td><div class=\"inputGroup inputGroup--joined inputGroup--color\" data-xf-init=\"color-picker\">\n										<xf:textbox name=\"{$formBaseKey}[border-color]\" value=\"{{ $property.getCssPropertyValue(\'border-color\') }}\" title=\"border-color\" class=\"input--cssProp\" dir=\"ltr\" />\n										<div class=\"inputGroup-text\"><span class=\"colorPickerBox js-colorPickerTrigger\"></span></div>\n									</div></td>\n								</tr>\n							</xf:if>\n\n							<xf:if is=\"$property.isValidCssComponent(\'border_radius_simple\')\">\n								<tr class=\"cssPropertySet-headerRow\">\n									<th>{{ phrase(\'radius\') }}</th>\n								</tr>\n								<tr>\n									<td><xf:textbox name=\"{$formBaseKey}[border-radius]\"\n										value=\"{{ $property.getCssPropertyValue(\'border-radius\') }}\"\n										title=\"border-radius\"\n										class=\"input--cssProp input--colorWidthMatched\"\n										dir=\"ltr\" /></td>\n								</tr>\n							</xf:if>\n							</table>\n						</li>\n					</xf:if>\n\n					<xf:if is=\"$property.isValidCssComponent(\'padding\')\">\n						<li>\n							<h4 class=\"cssPropertyHeader\">{{ phrase(\'padding\') }}</h4>\n							<table class=\"cssPropertySet\">\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'all\') }}</td>\n\n								<td><xf:textbox name=\"{$formBaseKey}[padding]\"\n									value=\"{{ $property.getCssPropertyValue(\'padding\') }}\"\n									title=\"padding\"\n									class=\"input--cssProp input--cssLength\"\n									dir=\"ltr\" />\n								</td>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'top\') }}</td>\n\n								<td><xf:textbox name=\"{$formBaseKey}[padding-top]\"\n									value=\"{{ $property.getCssPropertyValue(\'padding-top\') }}\"\n									title=\"padding-top\"\n									class=\"input--cssProp input--cssLength\"\n									dir=\"ltr\" />\n								</td>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'right\') }}</td>\n\n								<td><xf:textbox name=\"{$formBaseKey}[padding-right]\"\n									value=\"{{ $property.getCssPropertyValue(\'padding-right\') }}\"\n									title=\"padding-right\"\n									class=\"input--cssProp input--cssLength\"\n									dir=\"ltr\" />\n								</td>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'bottom\') }}</td>\n\n								<td><xf:textbox name=\"{$formBaseKey}[padding-bottom]\"\n									value=\"{{ $property.getCssPropertyValue(\'padding-bottom\') }}\"\n									title=\"padding-bottom\"\n									class=\"input--cssProp input--cssLength\"\n									dir=\"ltr\" />\n								</td>\n							</tr>\n							<tr>\n								<td class=\"cssPropertySet-rowLabel\">{{ phrase(\'left\') }}</td>\n\n								<td><xf:textbox name=\"{$formBaseKey}[padding-left]\"\n									value=\"{{ $property.getCssPropertyValue(\'padding-left\') }}\"\n									title=\"padding-left\"\n									class=\"input--cssProp input--cssLength\"\n									dir=\"ltr\" />\n								</td>\n							</tr>\n							</table>\n						</li>\n					</xf:if>\n\n					<xf:if is=\"$property.isValidCssComponent(\'extra\')\">\n						<li class=\"cssPropertyExtra\">\n							<h4 class=\"cssPropertyHeader\">{{ phrase(\'extra\') }}</h4>\n							<table class=\"cssPropertySet\">\n								<tr class=\"cssPropertySet-headerRow\">\n									<th>{{ phrase(\'freeform_css_code\') }}</th>\n								</tr>\n								<tr>\n									<!--<td><xf:codeeditor name=\"{$formBaseKey}[extra]\" value=\"{{ $property.getCssPropertyValue(\'extra\') }}\"\n										mode=\"less\"\n										class=\"codeEditor&#45;&#45;autoSize\"\n										label=\"{{ phrase(\'extra\') }}\" /></td>-->\n									<td><xf:textarea name=\"{$formBaseKey}[extra]\" value=\"{{ $property.getCssPropertyValue(\'extra\') }}\"\n										label=\"{{ phrase(\'extra\') }}\" /></td>\n								</tr>\n							</table>\n						</li>\n					</xf:if>\n				</ul>\n			</div>\n		</div>\n	</div>\n</xf:macro>\n\n\n\n\n\n<xf:macro id=\"customization_hint\"\n	arg-state=\"!\"\n	arg-submitName=\"!\"\n	arg-property=\"!\"\n	arg-checkbox=\"{{ false }}\">\n\n	<!-- customization_hint {$property.property_name} -->\n	<span class=\"formRow-hint--customState cssCustomHighlight cssCustomHighlight--{$state}\">\n\n		<span class=\"hint hint--custom\"\n			data-xf-init=\"tooltip\" title=\"{{ phrase(\'property_customized_in_this_style\')|for_attr }}\">\n			<xf:if is=\"$checkbox\">\n				<xf:macro id=\"revert_code\"\n					arg-submitName=\"{$submitName}\"\n					arg-property=\"{$property}\"\n					arg-label=\"{{ phrase(\'revert_customized_value\') }}\"\n					arg-Xcontainer=\"dl.xf-{$property.property_name} > dd\"\n					arg-container=\".js-property--{$property.property_name}\"\n				/>\n			<xf:else />\n				{{ phrase(\'value_customized\') }}\n			</xf:if>\n		</span>\n\n		<span class=\"hint hint--inherited\"\n			data-xf-init=\"tooltip\" title=\"{{ phrase(\'property_customized_in_parent_style\')|for_attr }}\">{{ phrase(\'value_inherited\') }}</span>\n\n		<span class=\"hint hint--added\"\n			data-xf-init=\"tooltip\" title=\"{{ phrase(\'property_created_in_this_style\')|for_attr }}\">{{ phrase(\'custom_property\') }}</span>\n\n	</span>\n	<!-- / customization_hint {$property.property_name} -->\n</xf:macro>\n\n<xf:macro id=\"revert_code\"\n	arg-submitName=\"!\"\n	arg-property=\"!\"\n	arg-label=\"!\"\n	arg-container=\"< dl\">\n\n	<xf:checkbox standalone=\"true\">\n		<xf:option name=\"{$submitName}_revert[]\" value=\"{$property.property_name}\"\n			labelclass=\"formRow-revert\"\n			class=\"js-disablerExemption\"\n			data-xf-init=\"disabler\" data-container=\"{$container}\" data-invert=\"true\"\n			label=\"{$label}\" />\n	</xf:checkbox>\n</xf:macro>\n\n<xf:macro id=\"variation_labels\"\n	arg-property=\"!\">\n\n	<div class=\"inputGroup\">\n		<xf:foreach loop=\"$property.getVariations()\" value=\"$variation\">\n			<xf:if is=\"$variation != \'default\'\">\n				<span class=\"inputGroup-splitter\"></span>\n			</xf:if>\n\n			<span class=\"inputGroup-label\">{{ phrase_dynamic(\'style_variation.\' . $variation) }}</span>\n		</xf:foreach>\n	</div>\n</xf:macro>', 0x[encoded data, 411868 characters], 0x5846, 2030370, '2.3.3', 1748686057);
