use class="hidden" not style="display:none"

1 files changed, 110 insertions, 110 deletions

diff --git a/files/zh-cn/web/css/appearance/index.html b/files/zh-cn/web/css/appearance/index.html
index 00980a5dea..bcc7adce7a 100644
--- a/files/zh-cn/web/css/appearance/index.html
+++ b/files/zh-cn/web/css/appearance/index.html
@@ -52,7 +52,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>none</code></td>
 			<td>
-			<div id="sampleNone" style="display: none;">
+			<div id="sampleNone" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: none; -webkit-appearance: none; color: black;}</pre>
 
@@ -67,7 +67,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button</code></td>
 			<td>
-			<div id="sampleButton" style="display: none;">
+			<div id="sampleButton" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button; -webkit-appearance: button; color: black; }</pre>
 
@@ -81,7 +81,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button-arrow-down</code></td>
 			<td>
-			<div id="sampleButtonArrowDown" style="display: none;">
+			<div id="sampleButtonArrowDown" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; color: black; }</pre>
 
@@ -95,7 +95,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button-arrow-next</code></td>
 			<td>
-			<div id="sampleButtonArrowNext" style="display: none;">
+			<div id="sampleButtonArrowNext" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; color: black; }</pre>
 
@@ -109,7 +109,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button-arrow-previous</code></td>
 			<td>
-			<div id="sampleButtonArrowPrevious" style="display: none;">
+			<div id="sampleButtonArrowPrevious" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; color: black; }</pre>
 
@@ -123,7 +123,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button-arrow-up</code></td>
 			<td>
-			<div id="sampleButtonArrowUp" style="display: none;">
+			<div id="sampleButtonArrowUp" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; color: black; }</pre>
 
@@ -137,7 +137,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button-bevel</code></td>
 			<td>
-			<div id="sampleButtonBevel" style="display: none;">
+			<div id="sampleButtonBevel" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button-bevel; -webkit-appearance: button-bevel; color: black; }</pre>
 
@@ -157,7 +157,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>button-focus</code></td>
 			<td>
-			<div id="sampleButtonFocus" style="display: none;">
+			<div id="sampleButtonFocus" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: button-focus; -webkit-appearance: button-focus; color: black; }</pre>
 
@@ -171,7 +171,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>caret</code></td>
 			<td>
-			<div id="sampleCaret" style="display: none;">
+			<div id="sampleCaret" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: caret; -webkit-appearance: caret; color: black; }</pre>
 
@@ -185,7 +185,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>checkbox</code></td>
 			<td>
-			<div id="sampleCheckbox" style="display: none;">
+			<div id="sampleCheckbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: checkbox; -webkit-appearance: checkbox; color: black; }</pre>
 
@@ -199,7 +199,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>checkbox-container</code></td>
 			<td>
-			<div id="sampleCheckboxContainer" style="display: none;">
+			<div id="sampleCheckboxContainer" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; color: black; }</pre>
 
@@ -213,7 +213,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>checkbox-label</code></td>
 			<td>
-			<div id="sampleCheckboxLabel" style="display: none;">
+			<div id="sampleCheckboxLabel" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; color: black; }</pre>
 
@@ -227,7 +227,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>checkmenuitem</code></td>
 			<td>
-			<div id="sampleCheckmenuitem" style="display: none;">
+			<div id="sampleCheckmenuitem" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; height: 20px; color: black; }</pre>
 
@@ -241,7 +241,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>dualbutton</code></td>
 			<td>
-			<div id="sampleDualButton" style="display: none;">
+			<div id="sampleDualButton" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: dualbutton; -webkit-appearance: dualbutton; color: black; }</pre>
 
@@ -255,7 +255,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>groupbox</code></td>
 			<td>
-			<div id="sampleGroupbox" style="display: none;">
+			<div id="sampleGroupbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: groupbox; -webkit-appearance: groupbox; color: black; }</pre>
 
@@ -275,7 +275,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>listbox</code></td>
 			<td>
-			<div id="sampleListBox" style="display: none;">
+			<div id="sampleListBox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: listbox; -webkit-appearance: listbox; height:20px; color: black; }</pre>
 
@@ -289,7 +289,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>listitem</code></td>
 			<td>
-			<div id="sampleListItem" style="display: none;">
+			<div id="sampleListItem" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: listitem; -webkit-appearance: listitem; color: black; }</pre>
 
@@ -393,7 +393,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menuarrow</code></td>
 			<td>
-			<div id="sampleMenuArrow" style="display: none;">
+			<div id="sampleMenuArrow" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menuarrow; -webkit-appearance: menuarrow; color: black; }</pre>
 
@@ -407,7 +407,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menubar</code></td>
 			<td>
-			<div id="sampleMenubar" style="display: none;">
+			<div id="sampleMenubar" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menubar; -webkit-appearance: menubar; color: balck; }</pre>
 
@@ -421,7 +421,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menucheckbox</code></td>
 			<td>
-			<div id="sampleMenuCheckbox" style="display: none;">
+			<div id="sampleMenuCheckbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; color: black; }</pre>
 
@@ -435,7 +435,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menuimage</code></td>
 			<td>
-			<div id="sampleMenuImage" style="display: none;">
+			<div id="sampleMenuImage" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menuimage; -webkit-appearance: menuimage; color: black; }</pre>
 
@@ -449,7 +449,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menuitem</code></td>
 			<td>
-			<div id="sampleMenuItem" style="display: none;">
+			<div id="sampleMenuItem" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menuitem; -webkit-appearance: menuitem; color: black; }</pre>
 
@@ -463,7 +463,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menuitemtext</code></td>
 			<td>
-			<div id="sampleMenuItemText" style="display: none;">
+			<div id="sampleMenuItemText" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; color: black; }</pre>
 
@@ -477,7 +477,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menulist</code></td>
 			<td>
-			<div id="sampleMenuList" style="display: none;">
+			<div id="sampleMenuList" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menulist; -webkit-appearance: menulist; color: black; }</pre>
 
@@ -493,7 +493,7 @@ translation_of: Web/CSS/appearance
    <td>
 			</td><td><code>menulist-button</code></td>
 			<td>
-			<div id="sampleMenuListButton" style="display: none;">
+			<div id="sampleMenuListButton" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menulist-button; -webkit-appearance: menulist-button; color: black; }</pre>
 
@@ -507,7 +507,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menulist-text</code></td>
 			<td>
-			<div id="sampleMenuListText" style="display: none;">
+			<div id="sampleMenuListText" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menulist-text; -webkit-appearance: menulist-text; color: black; }</pre>
 
@@ -521,7 +521,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menulist-textfield</code></td>
 			<td>
-			<div id="sampleMenuListTextfield" style="display: none;">
+			<div id="sampleMenuListTextfield" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; color: black; }</pre>
 
@@ -533,7 +533,7 @@ translation_of: Web/CSS/appearance
 			<td>这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）</td>
 			<td><code>menupopup</code></td>
 			<td>
-			<div id="sampleMenuPopup" style="display: none;">
+			<div id="sampleMenuPopup" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menupopup; -webkit-appearance: menupopup; color: black; }</pre>
 
@@ -547,7 +547,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menuradio</code></td>
 			<td>
-			<div id="sampleMenuRadio" style="display: none;">
+			<div id="sampleMenuRadio" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menuradio; -webkit-appearance: menuradio; color: black; }</pre>
 
@@ -561,7 +561,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>menuseparator</code></td>
 			<td>
-			<div id="sampleMenuSeparator" style="display: none;">
+			<div id="sampleMenuSeparator" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: menuseparator; -webkit-appearance: menuseparator; color: transparent; }</pre>
 
@@ -581,7 +581,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>meterbar</code></td>
 			<td>
-			<div id="sampleMeterbar" style="display: none;">
+			<div id="sampleMeterbar" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: meterbar; -webkit-appearance: meterbar; color: black; }</pre>
 
@@ -595,7 +595,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>meterchunk</code></td>
 			<td>
-			<div id="sampleMeterchunk" style="display: none;">
+			<div id="sampleMeterchunk" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: meterchunk; -webkit-appearance: meterchunk; color: black; }</pre>
 
@@ -621,7 +621,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>progressbar</code></td>
 			<td>
-			<div id="sampleProgressBar" style="display: none;">
+			<div id="sampleProgressBar" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: progressbar; -webkit-appearance: progressbar; color: black; }</pre>
 
@@ -635,7 +635,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>progressbar-vertical</code></td>
 			<td>
-			<div id="sampleProgressBarVertical" style="display: none;">
+			<div id="sampleProgressBarVertical" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; color: transparent; }</pre>
 
@@ -649,7 +649,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>progresschunk</code></td>
 			<td>
-			<div id="sampleProgressChunk" style="display: none;">
+			<div id="sampleProgressChunk" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: progresschunk; -webkit-appearance: progresschunk; color: black; }</pre>
 
@@ -663,7 +663,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>progresschunk-vertical</code></td>
 			<td>
-			<div id="sampleProgressChunkVertical" style="display: none;">
+			<div id="sampleProgressChunkVertical" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; color: black; }</pre>
 
@@ -683,7 +683,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>radio</code></td>
 			<td>
-			<div id="sampleRadio" style="display: none;">
+			<div id="sampleRadio" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: radio; -webkit-appearance: radio; color: black; }</pre>
 
@@ -698,7 +698,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>radio-container</code></td>
 			<td>
-			<div id="sampleRadioContainer" style="display: none;">
+			<div id="sampleRadioContainer" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: radio-container; -webkit-appearance: radio-container; color: black; }</pre>
 
@@ -712,7 +712,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>radio-label</code></td>
 			<td>
-			<div id="sampleRadioLabel" style="display: none;">
+			<div id="sampleRadioLabel" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: radio-label; -webkit-appearance: radio-label; color: black; }</pre>
 
@@ -726,7 +726,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>radiomenuitem</code></td>
 			<td>
-			<div id="sampleRadioMenuItem" style="display: none;">
+			<div id="sampleRadioMenuItem" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; color: black; }</pre>
 
@@ -740,7 +740,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td>range</td>
 			<td>
-			<div id="sampleRange" style="display: none;">
+			<div id="sampleRange" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: range; -webkit-appearance: radiomenuitem; color: black; }</pre>
 			range
@@ -755,7 +755,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td>range-thumb</td>
 			<td>
-			<div id="sampleRangeThumb" style="display: none;">
+			<div id="sampleRangeThumb" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: range-thumb; -webkit-appearance: range-thumb; color: black; }</pre>
 
@@ -769,7 +769,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>resizer</code></td>
 			<td>
-			<div id="sampleResizer" style="display: none;">
+			<div id="sampleResizer" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: resizer; -webkit-appearance: resizer; color: transparent; }</pre>
 
@@ -783,7 +783,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>resizerpanel</code></td>
 			<td>
-			<div id="sampleResizerPanel" style="display: none;">
+			<div id="sampleResizerPanel" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; color: black; }</pre>
 
@@ -797,7 +797,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scale-horizontal</code></td>
 			<td>
-			<div id="sampleScaleHorizontal" style="display: none;">
+			<div id="sampleScaleHorizontal" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; color: transparent; }</pre>
 
@@ -811,7 +811,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scalethumbend</code></td>
 			<td>
-			<div id="sampleThumbEnd" style="display: none;">
+			<div id="sampleThumbEnd" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; color: black; }</pre>
 
@@ -825,7 +825,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scalethumb-horizontal</code></td>
 			<td>
-			<div id="sampleScaleThumbHorizontal" style="display: none;">
+			<div id="sampleScaleThumbHorizontal" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; color: transparent; }</pre>
 
@@ -839,7 +839,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scalethumbstart</code></td>
 			<td>
-			<div id="sampleScaleThumbStart" style="display: none;">
+			<div id="sampleScaleThumbStart" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; color: black; }</pre>
 
@@ -853,7 +853,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scalethumbtick</code></td>
 			<td>
-			<div id="sampleScaleThumbTick" style="display: none;">
+			<div id="sampleScaleThumbTick" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; color: black; }</pre>
 
@@ -867,7 +867,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scalethumb-vertical</code></td>
 			<td>
-			<div id="sampleScaleThumbVertical" style="display: none;">
+			<div id="sampleScaleThumbVertical" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; color: black; }</pre>
 
@@ -881,7 +881,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scale-vertical</code></td>
 			<td>
-			<div id="sampleScaleVertical" style="display: none;">
+			<div id="sampleScaleVertical" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; color: transparent; }</pre>
 
@@ -895,7 +895,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbarbutton-down</code></td>
 			<td>
-			<div id="sampleScrollbarButtonDown" style="display: none;">
+			<div id="sampleScrollbarButtonDown" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; color: black; }</pre>
 
@@ -909,7 +909,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbarbutton-left</code></td>
 			<td>
-			<div id="sampleScrollbarButtonLeft" style="display: none;">
+			<div id="sampleScrollbarButtonLeft" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; color: black; }</pre>
 
@@ -923,7 +923,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbarbutton-right</code></td>
 			<td>
-			<div id="sampleScrollbarButtonRight" style="display: none;">
+			<div id="sampleScrollbarButtonRight" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; color: black; }</pre>
 
@@ -937,7 +937,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbarbutton-up</code></td>
 			<td>
-			<div id="sampleScrollbarButtonUp" style="display: none;">
+			<div id="sampleScrollbarButtonUp" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; color: black; }</pre>
 
@@ -951,7 +951,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbarthumb-horizontal</code></td>
 			<td>
-			<div id="sampleScrollbarThumbHorizontal" style="display: none;">
+			<div id="sampleScrollbarThumbHorizontal" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; color: black; }</pre>
 
@@ -965,7 +965,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbarthumb-vertical</code></td>
 			<td>
-			<div id="sampleScrollbarThumbVertical" style="display: none;">
+			<div id="sampleScrollbarThumbVertical" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; color: black; }</pre>
 
@@ -979,7 +979,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbartrack-horizontal</code></td>
 			<td>
-			<div id="sampleScrollbarTrackHorizontal" style="display: none;">
+			<div id="sampleScrollbarTrackHorizontal" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; color: black; }</pre>
 
@@ -993,7 +993,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>scrollbartrack-vertical</code></td>
 			<td>
-			<div id="sampleScrollbarTrackVertical" style="display: none;">
+			<div id="sampleScrollbarTrackVertical" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; color: black; }</pre>
 
@@ -1007,7 +1007,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>searchfield</code></td>
 			<td>
-			<div id="sampleSearchField" style="display: none;">
+			<div id="sampleSearchField" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: searchfield; -webkit-appearance: searchfield; color: black; }</pre>
 
@@ -1027,7 +1027,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>separator</code></td>
 			<td>
-			<div id="sampleSeparator" style="display: none;">
+			<div id="sampleSeparator" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: separator; -webkit-appearance: separator; color: transparent; }</pre>
 
@@ -1041,7 +1041,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>sheet</code></td>
 			<td>
-			<div id="sampleSheet" style="display: none;">
+			<div id="sampleSheet" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: sheet; -webkit-appearance: sheet; color: black; }</pre>
 
@@ -1079,7 +1079,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>spinner</code></td>
 			<td>
-			<div id="sampleSpinner" style="display: none;">
+			<div id="sampleSpinner" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: spinner; -webkit-appearance: spinner; color: transparent; }</pre>
 
@@ -1093,7 +1093,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>spinner-downbutton</code></td>
 			<td>
-			<div id="sampleSpinnerDownbutton" style="display: none;">
+			<div id="sampleSpinnerDownbutton" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; color: black; }</pre>
 
@@ -1107,7 +1107,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>spinner-textfield</code></td>
 			<td>
-			<div id="sampleSpinnerTextfield" style="display: none;">
+			<div id="sampleSpinnerTextfield" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; color: black; }</pre>
 
@@ -1121,7 +1121,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>spinner-upbutton</code></td>
 			<td>
-			<div id="sampleSpinnerUpbutton" style="display: none;">
+			<div id="sampleSpinnerUpbutton" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; color: black; }</pre>
 
@@ -1135,7 +1135,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>splitter</code></td>
 			<td>
-			<div id="sampleSplitter" style="display: none;">
+			<div id="sampleSplitter" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: splitter; -webkit-appearance: splitter; color: transparent; }</pre>
 
@@ -1155,7 +1155,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>statusbar</code></td>
 			<td>
-			<div id="sampleStatusBar" style="display: none;">
+			<div id="sampleStatusBar" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: statusbar; -webkit-appearance: statusbar; color: black; }</pre>
 
@@ -1169,7 +1169,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>statusbarpanel</code></td>
 			<td>
-			<div id="sampleStatusBarPanel" style="display: none;">
+			<div id="sampleStatusBarPanel" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; color: black; }</pre>
 
@@ -1183,7 +1183,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>tab</code></td>
 			<td>
-			<div id="sampleTab" style="display: none;">
+			<div id="sampleTab" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: tab; -webkit-appearance: tab; height: 20px; color: black; }</pre>
 
@@ -1197,7 +1197,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>tabpanel</code></td>
 			<td>
-			<div id="sampleTabPanel" style="display: none;">
+			<div id="sampleTabPanel" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: tabpanel; -webkit-appearance: tabpanel; color: black; }</pre>
 
@@ -1211,7 +1211,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>tabpanels</code></td>
 			<td>
-			<div id="sampleTabPanels" style="display: none;">
+			<div id="sampleTabPanels" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: tabpanels; -webkit-appearance: tabpanels; color: black; }</pre>
 
@@ -1225,7 +1225,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>tab-scroll-arrow-back</code></td>
 			<td>
-			<div id="sampleTabScrollArrowBack" style="display: none;">
+			<div id="sampleTabScrollArrowBack" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; color: black; }</pre>
 
@@ -1239,7 +1239,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>tab-scroll-arrow-forward</code></td>
 			<td>
-			<div id="sampleTabScrollArrowForward" style="display: none;">
+			<div id="sampleTabScrollArrowForward" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; color: black; }</pre>
 
@@ -1259,7 +1259,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>textfield</code></td>
 			<td>
-			<div id="sampleTextField" style="display: none;">
+			<div id="sampleTextField" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: textfield; -webkit-appearance: textfield; color: black; }</pre>
 
@@ -1273,7 +1273,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>textfield-multiline</code></td>
 			<td>
-			<div id="sampleTextfieldMultiline" style="display: none;">
+			<div id="sampleTextfieldMultiline" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; color: black; }</pre>
 
@@ -1287,7 +1287,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>toolbar</code></td>
 			<td>
-			<div id="sampleToolbar" style="display: none;">
+			<div id="sampleToolbar" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: toolbar; -webkit-appearance: toolbar; color: black; }</pre>
 
@@ -1301,7 +1301,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>toolbarbutton</code></td>
 			<td>
-			<div id="sampleToolbarButton" style="display: none;">
+			<div id="sampleToolbarButton" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; color: black; }</pre>
 
@@ -1315,7 +1315,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>toolbarbutton-dropdown</code></td>
 			<td>
-			<div id="sampleToolbarButtonDropdown" style="display: none;">
+			<div id="sampleToolbarButtonDropdown" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; color: black; }</pre>
 
@@ -1329,7 +1329,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>toolbargripper</code></td>
 			<td>
-			<div id="sampleToolbarGripper" style="display: none;">
+			<div id="sampleToolbarGripper" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; color: black; }</pre>
 
@@ -1343,7 +1343,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>toolbox</code></td>
 			<td>
-			<div id="sampleToolbox" style="display: none;">
+			<div id="sampleToolbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: toolbox; -webkit-appearance: toolbox; color: black; }</pre>
 
@@ -1357,7 +1357,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>tooltip</code></td>
 			<td>
-			<div id="sampleTooltip" style="display: none;">
+			<div id="sampleTooltip" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: tooltip; -webkit-appearance: tooltip; color: black; }</pre>
 
@@ -1371,7 +1371,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treeheader</code></td>
 			<td>
-			<div id="sampleTreeHeader" style="display: none;">
+			<div id="sampleTreeHeader" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treeheader; -webkit-appearance: treeheader; color: black; }</pre>
 
@@ -1385,7 +1385,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treeheadercell</code></td>
 			<td>
-			<div id="sampleTreeHeaderCell" style="display: none;">
+			<div id="sampleTreeHeaderCell" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; height:20px; color: black; }</pre>
 
@@ -1399,7 +1399,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treeheadersortarrow</code></td>
 			<td>
-			<div id="sampleTreeHeaderSortArrow" style="display: none;">
+			<div id="sampleTreeHeaderSortArrow" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; color: black; }</pre>
 
@@ -1413,7 +1413,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treeitem</code></td>
 			<td>
-			<div id="sampleTreeItem" style="display: none;">
+			<div id="sampleTreeItem" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treeitem; -webkit-appearance: treeitem; color: black; }</pre>
 
@@ -1427,7 +1427,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treeline</code></td>
 			<td>
-			<div id="sampleTreeLine" style="display: none;">
+			<div id="sampleTreeLine" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treeline; -webkit-appearance: treeline; color: black; }</pre>
 
@@ -1441,7 +1441,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treetwisty</code></td>
 			<td>
-			<div id="sampleTreeTwisty" style="display: none;">
+			<div id="sampleTreeTwisty" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treetwisty; -webkit-appearance: treetwisty; color: transparent; }</pre>
 
@@ -1455,7 +1455,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treetwistyopen</code></td>
 			<td>
-			<div id="sampleTreeTwistyOpen" style="display: none;">
+			<div id="sampleTreeTwistyOpen" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; color: transparent; }</pre>
 
@@ -1469,7 +1469,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>treeview</code></td>
 			<td>
-			<div id="sampleTreeView" style="display: none;">
+			<div id="sampleTreeView" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: treeview; -webkit-appearance: treeview; color: black; }</pre>
 
@@ -1483,7 +1483,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td>{{gecko_minversion_inline("2.0")}} <code>-moz-win-borderless-glass</code></td>
 			<td>
-			<div id="sampleWinBorderlessGlass" style="display: none;">
+			<div id="sampleWinBorderlessGlass" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-borderless-glass; color: black; }</pre>
 
@@ -1497,7 +1497,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-browsertabbar-toolbox</code></td>
 			<td>
-			<div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+			<div id="sampleWinBrowsertabbarToolbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
 
@@ -1511,7 +1511,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-browsertabbar-toolbox</code></td>
 			<td>
-			<div id="sampleWinBrowsertabbarToolbox" style="display: none;">
+			<div id="sampleWinBrowsertabbarToolbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-browsertabbar-toolbox; color: black; }</pre>
 
@@ -1525,7 +1525,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-communicationstext</code></td>
 			<td>
-			<div id="sampleWinCommunicationstext" style="display: none;">
+			<div id="sampleWinCommunicationstext" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-communicationstext; color: black; }</pre>
 
@@ -1539,7 +1539,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-communications-toolbox</code></td>
 			<td>
-			<div id="sampleWinCommunicationsToolbox" style="display: none;">
+			<div id="sampleWinCommunicationsToolbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-communications-toolbox; color: black; }</pre>
 
@@ -1553,7 +1553,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td>{{gecko_minversion_inline("6.0")}} <code>-moz-win-exclude-glass</code></td>
 			<td>
-			<div id="sampleWinExcludeGlass" style="display: none;">
+			<div id="sampleWinExcludeGlass" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-exclude-glass; color: black; }</pre>
 
@@ -1567,7 +1567,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-glass</code></td>
 			<td>
-			<div id="sampleWinGlass" style="display: none;">
+			<div id="sampleWinGlass" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-glass; color: black; }</pre>
 
@@ -1581,7 +1581,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-mediatext</code></td>
 			<td>
-			<div id="sampleWinMediaText" style="display: none;">
+			<div id="sampleWinMediaText" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-mediatext; color: black; }</pre>
 
@@ -1601,7 +1601,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-win-media-toolbox</code></td>
 			<td>
-			<div id="sampleWinMediaToolbox" style="display: none;">
+			<div id="sampleWinMediaToolbox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-win-media-toolbox; color: black; }</pre>
 
@@ -1615,7 +1615,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-button-box</code></td>
 			<td>
-			<div id="sampleWindowButtonBox" style="display: none;">
+			<div id="sampleWindowButtonBox" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-button-box; color: black; }</pre>
 
@@ -1629,7 +1629,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-button-box-maximized</code></td>
 			<td>
-			<div id="sampleWindowButtonBoxMaximized" style="display: none;">
+			<div id="sampleWindowButtonBoxMaximized" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-button-box-maximized; color: black; }</pre>
 
@@ -1643,7 +1643,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-button-close</code></td>
 			<td>
-			<div id="sampleWindowButtonClose" style="display: none;">
+			<div id="sampleWindowButtonClose" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-button-close; color: black; }</pre>
 
@@ -1657,7 +1657,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-button-maximize</code></td>
 			<td>
-			<div id="sampleWindowButtonMaximize" style="display: none;">
+			<div id="sampleWindowButtonMaximize" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-button-maximize; color: black; }</pre>
 
@@ -1671,7 +1671,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-button-minimize</code></td>
 			<td>
-			<div id="sampleWindowButtonMinimize" style="display: none;">
+			<div id="sampleWindowButtonMinimize" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-button-minimize; color: black; }</pre>
 
@@ -1685,7 +1685,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-button-restore</code></td>
 			<td>
-			<div id="sampleWindowButtonRestore" style="display: none;">
+			<div id="sampleWindowButtonRestore" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-button-restore; color: black; }</pre>
 
@@ -1699,7 +1699,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-frame-bottom</code></td>
 			<td>
-			<div id="sampleWindowFrameBottom" style="display: none;">
+			<div id="sampleWindowFrameBottom" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-frame-bottom; color: black; }</pre>
 
@@ -1713,7 +1713,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-frame-left</code></td>
 			<td>
-			<div id="sampleWindowFrameLeft" style="display: none;">
+			<div id="sampleWindowFrameLeft" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-frame-left; color: black; }</pre>
 
@@ -1727,7 +1727,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-frame-right</code></td>
 			<td>
-			<div id="sampleWindowFrameRight" style="display: none;">
+			<div id="sampleWindowFrameRight" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-frame-right; color: black; }</pre>
 
@@ -1741,7 +1741,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-titlebar</code></td>
 			<td>
-			<div id="sampleWindowTitlebar" style="display: none;">
+			<div id="sampleWindowTitlebar" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-titlebar; color: black; }</pre>
 
@@ -1755,7 +1755,7 @@ translation_of: Web/CSS/appearance
 		<tr>
 			<td><code>-moz-window-titlebar-maximized</code></td>
 			<td>
-			<div id="sampleWindowTitlebarMaximized" style="display: none;">
+			<div id="sampleWindowTitlebarMaximized" class="hidden">
 			<pre class="brush:css">
  div {-moz-appearance: -moz-window-titlebar-maximized; color: black; }</pre>