TWiki/PatternSkinColorSettings.mdwn

   1 # <a name="Color scheme settings for TWiki."></a><a name=" Color scheme settings for TWiki"></a> Color scheme settings for [[PatternSkin]]
   2
   3 Use this topic to change the color settings of [[PatternSkin]]. When this topic is saved, the attachment `theme-colors.css` will be updated with new color values. This method relies on TWiki:Plugins.AttachContentPlugin to work.
   4
   5 AttachContentPlugin is **not** installed.
   6
   7 ## <a name="Usage"></a><a name=" Usage"></a> Usage
   8
   9 ### <a name="Step 1"></a><a name=" Step 1"></a> Step 1
  10
  11 Let [[PatternSkin]] point to the custom-made colors style sheet. In [[Main.TWikiPreferences|Main/TWikiPreferences]] put:
  12
  13        * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/theme-colors.css
  14
  15 ### <a name="Step 2"></a><a name=" Step 2"></a> Step 2
  16
  17 Edit this topic, and change the color variables as you like.
  18
  19 ### <a name="Step 3"></a><a name=" Step 3"></a> Step 3
  20
  21 Save the topic. This will generate an [attachment](http://www.dementia.org/twiki//view/TWiki/PatternSkin/theme-colors.css) to topic [[PatternSkin]].
  22
  23 <img src="http://www.dementia.org/twiki//view/Main/WebHome/info.gif" width="16" height="16" alt="info" /> For more help on customizing styles, see [[PatternSkinCustomization]].
  24
  25 ## <a name="Color variables"></a><a name=" Color variables"></a> Color variables
  26
  27 <div>
  28   <ul>
  29     <li><a href="#Logical groupings"> Logical groupings</a><ul>
  30         <li><a href="#Text"> Text</a><ul>
  31             <li><a href="#MAIN_TEXT_COLOR Main text color"> MAIN_TEXT_COLOR Main text color</a></li>
  32             <li><a href="#MAIN_BACKGROUND_COLOR Main backg"> MAIN_BACKGROUND_COLOR Main background color</a></li>
  33             <li><a href="#LIGHT_ON_DARK_TEXT_COLOR Light o"> LIGHT_ON_DARK_TEXT_COLOR Light on dark text color</a></li>
  34             <li><a href="#GRAYED_TEXT_COLOR"> GRAYED_TEXT_COLOR</a></li>
  35             <li><a href="#GENERAL_TEXT General text (if no"> GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)</a></li>
  36             <li><a href="#HEADER_TEXT Header text"> HEADER_TEXT Header text</a></li>
  37             <li><a href="#CODE_TEXT Code text, left bar te"> CODE_TEXT Code text, left bar text and links</a></li>
  38             <li><a href="#MUTED_TEXT Muted text (dark gray"> MUTED_TEXT Muted text (dark gray)</a></li>
  39             <li><a href="#GRAYED_OUT_TEXT Grayed out text"> GRAYED_OUT_TEXT Grayed out text</a></li>
  40           </ul>
  41         </li>
  42         <li><a href="#Links"> Links</a><ul>
  43             <li><a href="#LINK_TEXT_NORMAL Link normal tex"> LINK_TEXT_NORMAL Link normal text</a></li>
  44             <li><a href="#LINK_BACKGROUND_NORMAL Link norm"> LINK_BACKGROUND_NORMAL Link normal background</a></li>
  45             <li><a href="#LINK_TEXT_NORMAL_VISITED Link no"> LINK_TEXT_NORMAL_VISITED Link normal text visited</a></li>
  46             <li><a href="#LINK_TEXT_ACTION_BUTTON Link tex"> LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)</a></li>
  47             <li><a href="#LINK_TEXT_HOVER Link hover text"> LINK_TEXT_HOVER Link hover text</a></li>
  48             <li><a href="#LINK_BACKGROUND_HOVER Link backg"> LINK_BACKGROUND_HOVER Link background hover</a></li>
  49             <li><a href="#SIDE_BAR_LINK_TEXT Side bar link"> SIDE_BAR_LINK_TEXT Side bar link text</a></li>
  50           </ul>
  51         </li>
  52         <li><a href="#Disabled"> Disabled</a><ul>
  53             <li><a href="#DISABLED_BORDER Disabled border"> DISABLED_BORDER Disabled border</a></li>
  54             <li><a href="#DISABLED_TEXT Disabled text"> DISABLED_TEXT Disabled text</a></li>
  55             <li><a href="#DISABLED_BACKGROUND Disabled bac"> DISABLED_BACKGROUND Disabled background</a></li>
  56             <li><a href="#BUTTON_BORDERS_DISABLED Disabled"> BUTTON_BORDERS_DISABLED Disabled button borders</a></li>
  57           </ul>
  58         </li>
  59         <li><a href="#'New'"> 'New'</a><ul>
  60             <li><a href="#NEW_TEXT New text (green)"> NEW_TEXT New text (green)</a></li>
  61             <li><a href="#NEW_BACKGROUND New background (l"> NEW_BACKGROUND New background (light green)</a></li>
  62           </ul>
  63         </li>
  64         <li><a href="#Alert"> Alert</a><ul>
  65             <li><a href="#ALERT_TEXT Alert text (red)"> ALERT_TEXT Alert text (red)</a></li>
  66             <li><a href="#ALERT_TEXT_MUTED Muted alert tex"> ALERT_TEXT_MUTED Muted alert text (dark red)</a></li>
  67             <li><a href="#ALERT_BORDER Alert border"> ALERT_BORDER Alert border</a></li>
  68           </ul>
  69         </li>
  70         <li><a href="#Buttons"> Buttons</a><ul>
  71             <li><a href="#BUTTON_TEXT Button text color (d"> BUTTON_TEXT Button text color (dark gray)</a></li>
  72             <li><a href="#BUTTON_BORDERS Button borders"> BUTTON_BORDERS Button borders</a></li>
  73             <li><a href="#BUTTON_BACKGROUND Button backgro"> BUTTON_BACKGROUND Button background</a></li>
  74             <li><a href="#BUTTON_CANCEL_BACKGROUND Cancel"> BUTTON_CANCEL_BACKGROUND Cancel button background</a></li>
  75             <li><a href="#SUBMIT_BUTTON_BACKGROUND Submit"> SUBMIT_BUTTON_BACKGROUND Submit button background</a></li>
  76             <li><a href="#SUBMIT_BUTTON_BORDER_TEXT Submit"> SUBMIT_BUTTON_BORDER_TEXT Submit button text color</a></li>
  77             <li><a href="#SELECT_BORDER Select border"> SELECT_BORDER Select border</a></li>
  78           </ul>
  79         </li>
  80         <li><a href="#Background colors"> Background colors</a><ul>
  81             <li><a href="#GENERAL_BACKGROUND General backg"> GENERAL_BACKGROUND General background color (if not set in MAIN_BACKGROUND_COLOR) (white)</a></li>
  82             <li><a href="#SIDE_BAR_BACKGROUND Side bar bac"> SIDE_BAR_BACKGROUND Side bar background</a></li>
  83             <li><a href="#NEUTRAL_BACKGROUND"> NEUTRAL_BACKGROUND</a></li>
  84             <li><a href="#TOP_BAR_BACKGROUND Top bar backg"> TOP_BAR_BACKGROUND Top bar background</a></li>
  85             <li><a href="#ATTACHMENT_AND_FORM_BACKGROUND A"> ATTACHMENT_AND_FORM_BACKGROUND Attachment, form</a></li>
  86             <li><a href="#TOPIC_ACTION_BACKGROUND Topic ac"> TOPIC_ACTION_BACKGROUND Topic action row</a></li>
  87             <li><a href="#HEADER_BACKGROUND h2, h3"> HEADER_BACKGROUND h2, h3</a></li>
  88             <li><a href="#DIFF_HEADER_BACKGROUND Diff head"> DIFF_HEADER_BACKGROUND Diff header (dark gray)</a></li>
  89             <li><a href="#NOTIFICATION_BACKGROUND Info, br"> NOTIFICATION_BACKGROUND Info, broadcast message and notifications</a></li>
  90             <li><a href="#INFO_BACKGROUND"> INFO_BACKGROUND</a></li>
  91           </ul>
  92         </li>
  93         <li><a href="#Border colors"> Border colors</a><ul>
  94             <li><a href="#NEUTRAL_BORDER Info (light gray)"> NEUTRAL_BORDER Info (light gray)</a></li>
  95             <li><a href="#SEPARATOR_BORDER"> SEPARATOR_BORDER</a></li>
  96             <li><a href="#MINOR_SEPARATOR_BORDER Header H3"> MINOR_SEPARATOR_BORDER Header H3..H6 bottom</a></li>
  97             <li><a href="#LAYOUT_ELEMENT_BORDER Main layou"> LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone)</a></li>
  98             <li><a href="#IMAGE_BORDER Image border"> IMAGE_BORDER Image border</a></li>
  99             <li><a href="#FORM_STEP_BORDER Form step borde"> FORM_STEP_BORDER Form step border</a></li>
 100             <li><a href="#NOTIFICATION_BORDER Broadcast me"> NOTIFICATION_BORDER Broadcast message</a></li>
 101             <li><a href="#Table colors"> Table colors</a><ul>
 102                 <li><a href="#TABLE_DATA_BACKGROUND Table data"> TABLE_DATA_BACKGROUND Table data background</a></li>
 103                 <li><a href="#TABLE_HEADER_BACKGROUND Table he"> TABLE_HEADER_BACKGROUND Table header background</a></li>
 104                 <li><a href="#TABLE_SELECTED_COLUMN_HEADER_BAC"> TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background</a></li>
 105                 <li><a href="#TABLE_DATA_ODD_BACKGROUND Table"> TABLE_DATA_ODD_BACKGROUND Table data background (odd row)</a></li>
 106                 <li><a href="#TABLE_DATA_EVEN_BACKGROUND Table"> TABLE_DATA_EVEN_BACKGROUND Table data background (even row)</a></li>
 107                 <li><a href="#TABLE_DATA_ODD_SELECTED_BACKGROU"> TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)</a></li>
 108                 <li><a href="#TABLE_DATA_EVEN_SELECTED_BACKGRO"> TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)</a></li>
 109                 <li><a href="#TABLE_DATA_MIX_BACKGROUND Table"> TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)</a></li>
 110               </ul>
 111             </li>
 112             <li><a href="#TABLE_BORDER Table border, sup ("> TABLE_BORDER Table border, sup (light neutral tone)</a></li>
 113             <li><a href="#LINK_TEXT_NORMAL_TABLE_HEADER Ta"> LINK_TEXT_NORMAL_TABLE_HEADER Table header link text</a></li>
 114             <li><a href="#LINK_TEXT_NORMAL_BORDER_TABLE_HE"> LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border</a></li>
 115             <li><a href="#LINK_TEXT_SORTED_TABLE_HEADER So"> LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text</a></li>
 116             <li><a href="#LINK_TEXT_HOVER_TABLE_HEADER Tab"> LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text</a></li>
 117             <li><a href="#LINK_BORDER_TABLE_SELECTED_COLUM"> LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header</a></li>
 118           </ul>
 119         </li>
 120         <li><a href="#Forms"> Forms</a><ul>
 121             <li><a href="#INPUT_FIELD_BORDERS Input field"> INPUT_FIELD_BORDERS Input field borders</a></li>
 122             <li><a href="#FORM_INPUT_BORDER Textarea, inpu"> FORM_INPUT_BORDER Textarea, input and select (darker gray)</a></li>
 123             <li><a href="#FORM_BORDER Form (same as twikiT"> FORM_BORDER Form (same as twikiTable border)</a></li>
 124             <li><a href="#ACTIVE_FORM_BACKGROUND Edit form"> ACTIVE_FORM_BACKGROUND Edit form, form steps</a></li>
 125             <li><a href="#FORMFIELD_ACTIVE Active form fie"> FORMFIELD_ACTIVE Active form field</a></li>
 126             <li><a href="#FORM_HEADER_TEXT Header text on"> FORM_HEADER_TEXT Header text on form background</a></li>
 127           </ul>
 128         </li>
 129       </ul>
 130     </li>
 131   </ul>
 132 </div>
 133
 134 ## <a name="Logical groupings"></a> Logical groupings
 135
 136 ### <a name="Text"></a> Text
 137
 138 #### <a name="MAIN_TEXT_COLOR Main text color"></a> MAIN\_TEXT\_COLOR Main text color
 139
 140 - Set MAIN\_TEXT\_COLOR = #000
 141
 142 #### <a name="MAIN_BACKGROUND_COLOR Main backg"></a> MAIN\_BACKGROUND\_COLOR Main background color
 143
 144 - Set MAIN\_BACKGROUND\_COLOR = #fff
 145
 146 #### <a name="LIGHT_ON_DARK_TEXT_COLOR Light o"></a> LIGHT\_ON\_DARK\_TEXT\_COLOR Light on dark text color
 147
 148 - Set LIGHT\_ON\_DARK\_TEXT\_COLOR = #fff
 149
 150 #### <a name="GRAYED_TEXT_COLOR"></a> GRAYED\_TEXT\_COLOR
 151
 152 - Set GRAYED\_TEXT\_COLOR = #777
 153
 154 #### <a name="GENERAL_TEXT General text (if no"></a> GENERAL\_TEXT General text (if not set in MAIN\_BACKGROUND\_COLOR) (black)
 155
 156 - Set GENERAL\_TEXT = #000
 157
 158 #### <a name="HEADER_TEXT Header text"></a> HEADER\_TEXT Header text
 159
 160 - Set HEADER\_TEXT = #630000
 161
 162 #### <a name="CODE_TEXT Code text, left bar te"></a> CODE\_TEXT Code text, left bar text and links
 163
 164 - Set CODE\_TEXT = #7A4707
 165
 166 #### <a name="MUTED_TEXT Muted text (dark gray"></a> MUTED\_TEXT Muted text (dark gray)
 167
 168 - Set MUTED\_TEXT = %GRAYED\_TEXT\_COLOR%
 169
 170 #### <a name="GRAYED_OUT_TEXT Grayed out text"></a> GRAYED\_OUT\_TEXT Grayed out text
 171
 172 - Set GRAYED\_OUT\_TEXT = %GRAYED\_TEXT\_COLOR%
 173
 174 ### <a name="Links"></a> Links
 175
 176 #### <a name="LINK_TEXT_NORMAL Link normal tex"></a> LINK\_TEXT\_NORMAL Link normal text
 177
 178 - Set LINK\_TEXT\_NORMAL = #4571d0
 179
 180 #### <a name="LINK_BACKGROUND_NORMAL Link norm"></a> LINK\_BACKGROUND\_NORMAL Link normal background
 181
 182 - Set LINK\_BACKGROUND\_NORMAL =
 183
 184 #### <a name="LINK_TEXT_NORMAL_VISITED Link no"></a> LINK\_TEXT\_NORMAL\_VISITED Link normal text visited
 185
 186 - Set LINK\_TEXT\_NORMAL\_VISITED = #666
 187
 188 #### <a name="LINK_TEXT_ACTION_BUTTON Link tex"></a> LINK\_TEXT\_ACTION\_BUTTON Link text red (same as LINK\_BACKGROUND\_HOVER)
 189
 190 - Set LINK\_TEXT\_ACTION\_BUTTON = #be000a
 191
 192 #### <a name="LINK_TEXT_HOVER Link hover text"></a> LINK\_TEXT\_HOVER Link hover text
 193
 194 - Set LINK\_TEXT\_HOVER = #fff
 195
 196 #### <a name="LINK_BACKGROUND_HOVER Link backg"></a> LINK\_BACKGROUND\_HOVER Link background hover
 197
 198 - Set LINK\_BACKGROUND\_HOVER = #ce000f
 199
 200 #### <a name="SIDE_BAR_LINK_TEXT Side bar link"></a> SIDE\_BAR\_LINK\_TEXT Side bar link text
 201
 202 - Set SIDE\_BAR\_LINK\_TEXT = #444
 203
 204 ### <a name="Disabled"></a> Disabled
 205
 206 #### <a name="DISABLED_BORDER Disabled border"></a> DISABLED\_BORDER Disabled border
 207
 208 - Set DISABLED\_BORDER = #e0e0e0
 209
 210 #### <a name="DISABLED_TEXT Disabled text"></a> DISABLED\_TEXT Disabled text
 211
 212 - Set DISABLED\_TEXT = #aaa
 213
 214 #### <a name="DISABLED_BACKGROUND Disabled bac"></a> DISABLED\_BACKGROUND Disabled background
 215
 216 - Set DISABLED\_BACKGROUND = #fafaf8
 217
 218 #### <a name="BUTTON_BORDERS_DISABLED Disabled"></a> BUTTON\_BORDERS\_DISABLED Disabled button borders
 219
 220 - Set BUTTON\_BORDERS\_DISABLED = #fff #ccc #ccc #fff
 221
 222 ### <a name="&#39;New&#39;"></a> 'New'
 223
 224 #### <a name="NEW_TEXT New text (green)"></a> NEW\_TEXT New text (green)
 225
 226 - Set NEW\_TEXT = #049804
 227
 228 #### <a name="NEW_BACKGROUND New background (l"></a> NEW\_BACKGROUND New background (light green)
 229
 230 - Set NEW\_BACKGROUND = #ECFADC
 231
 232 ### <a name="Alert"></a> Alert
 233
 234 #### <a name="ALERT_TEXT Alert text (red)"></a> ALERT\_TEXT Alert text (red)
 235
 236 - Set ALERT\_TEXT = #f00
 237
 238 #### <a name="ALERT_TEXT_MUTED Muted alert tex"></a> ALERT\_TEXT\_MUTED Muted alert text (dark red)
 239
 240 - Set ALERT\_TEXT\_MUTED = #900
 241
 242 #### <a name="ALERT_BORDER Alert border"></a> ALERT\_BORDER Alert border
 243
 244 - Set ALERT\_BORDER = #f00
 245
 246 ### <a name="Buttons"></a> Buttons
 247
 248 #### <a name="BUTTON_TEXT Button text color (d"></a> BUTTON\_TEXT Button text color (dark gray)
 249
 250 - Set BUTTON\_TEXT = #000
 251
 252 #### <a name="BUTTON_BORDERS Button borders"></a> BUTTON\_BORDERS Button borders
 253
 254 - Set BUTTON\_BORDERS = #fff #888 #888 #fff
 255
 256 #### <a name="BUTTON_BACKGROUND Button backgro"></a> BUTTON\_BACKGROUND Button background
 257
 258 - Set BUTTON\_BACKGROUND = #e2e3e3
 259
 260 #### <a name="BUTTON_CANCEL_BACKGROUND Cancel"></a><a name="BUTTON_CANCEL_BACKGROUND Cancel "></a> BUTTON\_CANCEL\_BACKGROUND Cancel button background
 261
 262 - Set BUTTON\_CANCEL\_BACKGROUND = #f2d5d0
 263
 264 #### <a name="SUBMIT_BUTTON_BACKGROUND Submit"></a><a name="SUBMIT_BUTTON_BACKGROUND Submit "></a> SUBMIT\_BUTTON\_BACKGROUND Submit button background
 265
 266 - Set SUBMIT\_BUTTON\_BACKGROUND = #06c
 267
 268 #### <a name="SUBMIT_BUTTON_BORDER_TEXT Submit"></a> SUBMIT\_BUTTON\_BORDER\_TEXT Submit button text color
 269
 270 - Set SUBMIT\_BUTTON\_BORDER\_TEXT = #fff
 271
 272 #### <a name="SELECT_BORDER Select border"></a> SELECT\_BORDER Select border
 273
 274 - Set SELECT\_BORDER = #888
 275
 276 ### <a name="Background colors"></a> Background colors
 277
 278 #### <a name="GENERAL_BACKGROUND General backg"></a> GENERAL\_BACKGROUND General background color (if not set in MAIN\_BACKGROUND\_COLOR) (white)
 279
 280 - Set GENERAL\_BACKGROUND = #fff
 281
 282 #### <a name="SIDE_BAR_BACKGROUND Side bar bac"></a> SIDE\_BAR\_BACKGROUND Side bar background
 283
 284 - Set SIDE\_BAR\_BACKGROUND = #f6f6f6
 285
 286 #### <a name="NEUTRAL_BACKGROUND"></a> NEUTRAL\_BACKGROUND
 287
 288 - Set NEUTRAL\_BACKGROUND = #fdfaf1
 289
 290 #### <a name="TOP_BAR_BACKGROUND Top bar backg"></a> TOP\_BAR\_BACKGROUND Top bar background
 291
 292 - Set TOP\_BAR\_BACKGROUND = #fefcf7
 293
 294 #### <a name="ATTACHMENT_AND_FORM_BACKGROUND A"></a> ATTACHMENT\_AND\_FORM\_BACKGROUND Attachment, form
 295
 296 - Set ATTACHMENT\_AND\_FORM\_BACKGROUND = #f6f6f6
 297
 298 #### <a name="TOPIC_ACTION_BACKGROUND Topic ac"></a> TOPIC\_ACTION\_BACKGROUND Topic action row
 299
 300 - Set TOPIC\_ACTION\_BACKGROUND = %ATTACHMENT\_AND\_FORM\_BACKGROUND%
 301
 302 #### <a name="HEADER_BACKGROUND h2, h3"></a> HEADER\_BACKGROUND h2, h3
 303
 304 - Set HEADER\_BACKGROUND = %TOPIC\_ACTION\_BACKGROUND%
 305
 306 #### <a name="DIFF_HEADER_BACKGROUND Diff head"></a> DIFF\_HEADER\_BACKGROUND Diff header (dark gray)
 307
 308 - Set DIFF\_HEADER\_BACKGROUND = #ccc
 309
 310 #### <a name="NOTIFICATION_BACKGROUND Info, br"></a> NOTIFICATION\_BACKGROUND Info, broadcast message and notifications
 311
 312 - Set NOTIFICATION\_BACKGROUND = #ffe67b
 313
 314 #### <a name="INFO_BACKGROUND"></a> INFO\_BACKGROUND
 315
 316 - Set INFO\_BACKGROUND = %NOTIFICATION\_BACKGROUND%
 317
 318 ### <a name="Border colors"></a> Border colors
 319
 320 #### <a name="NEUTRAL_BORDER Info (light gray)"></a> NEUTRAL\_BORDER Info (light gray)
 321
 322 - Set NEUTRAL\_BORDER = #ddd
 323
 324 #### <a name="SEPARATOR_BORDER"></a> SEPARATOR\_BORDER
 325
 326 - Set SEPARATOR\_BORDER = #e2e2e2
 327
 328 #### <a name="MINOR_SEPARATOR_BORDER Header H3"></a> MINOR\_SEPARATOR\_BORDER Header H3..H6 bottom
 329
 330 - Set MINOR\_SEPARATOR\_BORDER = %SEPARATOR\_BORDER%
 331
 332 #### <a name="LAYOUT_ELEMENT_BORDER Main layou"></a> LAYOUT\_ELEMENT\_BORDER Main layout elements (neutral tone)
 333
 334 - Set LAYOUT\_ELEMENT\_BORDER = #dadada
 335
 336 #### <a name="IMAGE_BORDER Image border"></a> IMAGE\_BORDER Image border
 337
 338 - Set IMAGE\_BORDER = #eee
 339
 340 #### <a name="FORM_STEP_BORDER Form step borde"></a> FORM\_STEP\_BORDER Form step border
 341
 342 - Set FORM\_STEP\_BORDER = %SEPARATOR\_BORDER%
 343
 344 #### <a name="NOTIFICATION_BORDER Broadcast me"></a> NOTIFICATION\_BORDER Broadcast message
 345
 346 - Set NOTIFICATION\_BORDER = #ffdf4c
 347
 348 #### <a name="Table colors"></a> Table colors
 349
 350 ##### <a name="TABLE_DATA_BACKGROUND Table data"></a> TABLE\_DATA\_BACKGROUND Table data background
 351
 352 - Set TABLE\_DATA\_BACKGROUND = #f0f6f9
 353
 354 ##### <a name="TABLE_HEADER_BACKGROUND Table he"></a> TABLE\_HEADER\_BACKGROUND Table header background
 355
 356 - Set TABLE\_HEADER\_BACKGROUND = #6b7f93
 357
 358 ##### <a name="TABLE_SELECTED_COLUMN_HEADER_BAC"></a> TABLE\_SELECTED\_COLUMN\_HEADER\_BACKGROUND Sorted table column accent background
 359
 360 - Set TABLE\_SELECTED\_COLUMN\_HEADER\_BACKGROUND = #345
 361
 362 ##### <a name="TABLE_DATA_ODD_BACKGROUND Table"></a><a name="TABLE_DATA_ODD_BACKGROUND Table "></a> TABLE\_DATA\_ODD\_BACKGROUND Table data background (odd row)
 363
 364 - Set TABLE\_DATA\_ODD\_BACKGROUND = #f0f6fb
 365
 366 ##### <a name="TABLE_DATA_EVEN_BACKGROUND Table"></a> TABLE\_DATA\_EVEN\_BACKGROUND Table data background (even row)
 367
 368 - Set TABLE\_DATA\_EVEN\_BACKGROUND = #ffffff
 369
 370 ##### <a name="TABLE_DATA_ODD_SELECTED_BACKGROU"></a> TABLE\_DATA\_ODD\_SELECTED\_BACKGROUND Table data background (odd row, selected column)
 371
 372 - Set TABLE\_DATA\_ODD\_SELECTED\_BACKGROUND = #dce7ee
 373
 374 ##### <a name="TABLE_DATA_EVEN_SELECTED_BACKGRO"></a> TABLE\_DATA\_EVEN\_SELECTED\_BACKGROUND Table data background (even row, selected column)
 375
 376 - Set TABLE\_DATA\_EVEN\_SELECTED\_BACKGROUND = #f5f5f5
 377
 378 ##### <a name="TABLE_DATA_MIX_BACKGROUND Table"></a><a name="TABLE_DATA_MIX_BACKGROUND Table "></a> TABLE\_DATA\_MIX\_BACKGROUND Table data background (mix between even and odd)
 379
 380 - Set TABLE\_DATA\_MIX\_BACKGROUND = #f7fafc
 381
 382 #### <a name="TABLE_BORDER Table border, sup ("></a> TABLE\_BORDER Table border, sup (light neutral tone)
 383
 384 - Set TABLE\_BORDER = #e2e2e2
 385
 386 #### <a name="LINK_TEXT_NORMAL_TABLE_HEADER Ta"></a> LINK\_TEXT\_NORMAL\_TABLE\_HEADER Table header link text
 387
 388 - Set LINK\_TEXT\_NORMAL\_TABLE\_HEADER = #fff
 389
 390 #### <a name="LINK_TEXT_NORMAL_BORDER_TABLE_HE"></a> LINK\_TEXT\_NORMAL\_BORDER\_TABLE\_HEADER Table header link border
 391
 392 - Set LINK\_TEXT\_NORMAL\_BORDER\_TABLE\_HEADER = #bbb
 393
 394 #### <a name="LINK_TEXT_SORTED_TABLE_HEADER So"></a> LINK\_TEXT\_SORTED\_TABLE\_HEADER Sorted table header link text
 395
 396 - Set LINK\_TEXT\_SORTED\_TABLE\_HEADER = #fff
 397
 398 #### <a name="LINK_TEXT_HOVER_TABLE_HEADER Tab"></a> LINK\_TEXT\_HOVER\_TABLE\_HEADER Table header link hover text
 399
 400 - Set LINK\_TEXT\_HOVER\_TABLE\_HEADER = #fff
 401
 402 #### <a name="LINK_BORDER_TABLE_SELECTED_COLUM"></a> LINK\_BORDER\_TABLE\_SELECTED\_COLUMN\_HEADER Link border in selected column header
 403
 404 - Set LINK\_BORDER\_TABLE\_SELECTED\_COLUMN\_HEADER = #999
 405
 406 ### <a name="Forms"></a> Forms
 407
 408 #### <a name="INPUT_FIELD_BORDERS Input field"></a><a name="INPUT_FIELD_BORDERS Input field "></a> INPUT\_FIELD\_BORDERS Input field borders
 409
 410 - Set INPUT\_FIELD\_BORDERS = #bbb #f2f2f2 #f2f2f2 #bbb
 411
 412 #### <a name="FORM_INPUT_BORDER Textarea, inpu"></a> FORM\_INPUT\_BORDER Textarea, input and select (darker gray)
 413
 414 - Set FORM\_INPUT\_BORDER = #aaa
 415
 416 #### <a name="FORM_BORDER Form (same as twikiT"></a> FORM\_BORDER Form (same as twikiTable border)
 417
 418 - Set FORM\_BORDER = #cfcfcf
 419
 420 #### <a name="ACTIVE_FORM_BACKGROUND Edit form"></a> ACTIVE\_FORM\_BACKGROUND Edit form, form steps
 421
 422 - Set ACTIVE\_FORM\_BACKGROUND = #fbfbfb
 423
 424 #### <a name="FORMFIELD_ACTIVE Active form fie"></a> FORMFIELD\_ACTIVE Active form field
 425
 426 - Set FORMFIELD\_ACTIVE = #ffffe0
 427
 428 #### <a name="FORM_HEADER_TEXT Header text on"></a><a name="FORM_HEADER_TEXT Header text on "></a> FORM\_HEADER\_TEXT Header text on form background
 429
 430 - Set FORM\_HEADER\_TEXT = #036
 431
 432 Do not change the text below this line unless you know what you are doing!
 433
 434 ----
 435
 436     %STARTATTACH{"theme-colors.css" web="%TWIKIWEB%" topic="PatternSkin"}%
 437     /* PatternSkin colors */
 438     /* Generated by AttachContentPlugin from %WEB%.%TOPIC% */
 439
 440     /* LAYOUT ELEMENTS */
 441
 442     #patternTopBar {
 443        border-color:%SEPARATOR_BORDER%;
 444        background-color:%TOP_BAR_BACKGROUND%;
 445     }
 446     #patternMain { /* don't set a background here; use patternOuter */ }
 447     #patternOuter {
 448        background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
 449        border-color:%LAYOUT_ELEMENT_BORDER%;
 450     }
 451     #patternLeftBar,
 452     #patternWrapper {
 453        background-color:%SIDE_BAR_BACKGROUND%;
 454     }
 455     #patternBottomBar {
 456        border-color:%SEPARATOR_BORDER%;
 457     }
 458     #patternBottomBarContents,
 459     #patternBottomBarContents a:link,
 460     #patternBottomBarContents a:visited {
 461        color:%GRAYED_OUT_TEXT%;
 462     }
 463     #patternBottomBarContents a:hover {
 464        color:%LINK_TEXT_HOVER%;
 465     }
 466
 467     /* GENERAL HTML ELEMENTS */
 468
 469     html body {
 470        background-color:%MAIN_BACKGROUND_COLOR%;
 471        color:%MAIN_TEXT_COLOR%;
 472     }
 473     /* be kind to netscape 4 that doesn't understand inheritance */
 474     body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
 475        background-color:transparent;
 476     }
 477     hr {
 478        color:%SEPARATOR_BORDER%;
 479        background-color:%SEPARATOR_BORDER%;
 480     }
 481     pre, code, tt {
 482        color:%CODE_TEXT%;
 483     }
 484     blockquote {
 485        background-color:%ACTIVE_FORM_BACKGROUND%;
 486        border-color:%ACTIVE_FORM_BACKGROUND% %ACTIVE_FORM_BACKGROUND% %ACTIVE_FORM_BACKGROUND% %NEUTRAL_BORDER%;
 487
 488     }
 489     blockquote h2 {
 490        background:none;
 491     }
 492     h1, h2, h3, h4, h5, h6 {
 493        color:%HEADER_TEXT%;
 494     }
 495     h2 {
 496        background-color:%HEADER_BACKGROUND%;
 497        border-color:%MINOR_SEPARATOR_BORDER%;
 498     }
 499     h3, h4, h5, h6 {
 500        border-color:%MINOR_SEPARATOR_BORDER%;
 501     }
 502     /* to override old Render.pm coded font color style */
 503     .twikiNewLink font {
 504        color:inherit;
 505     }
 506     .twikiNewLink a:link sup,
 507     .twikiNewLink a:visited sup {
 508        color:%MUTED_TEXT%;
 509        border-color:%NEUTRAL_BORDER%;
 510     }
 511     .twikiNewLink a:hover sup {
 512        background-color:%LINK_BACKGROUND_HOVER%;
 513        color:%LINK_TEXT_HOVER%;
 514        border-color:%LINK_BACKGROUND_HOVER%;
 515     }
 516     .twikiNewLink {
 517        border-color:%NEUTRAL_BORDER%;
 518     }
 519     :link:focus,
 520     :visited:focus,
 521     :link,
 522     :visited,
 523     :link:active,
 524     :visited:active {
 525        color:%LINK_TEXT_NORMAL%;
 526        background-color:transparent;
 527     }
 528     :link:hover,
 529     :visited:hover {
 530        color:%LINK_TEXT_HOVER%;
 531        background-color:%LINK_BACKGROUND_HOVER%;
 532        background-image:none;
 533     }
 534     :link:hover img,
 535     :visited:hover img {
 536        background-color:transparent;
 537     }
 538     .patternTopic a:visited {
 539        color:%LINK_TEXT_NORMAL_VISITED%;
 540     }
 541     .patternTopic a:hover {
 542        color:%LINK_TEXT_HOVER%;
 543     }
 544     #patternMainContents h1 a:link, #patternMainContents h1 a:visited,
 545     #patternMainContents h2 a:link, #patternMainContents h2 a:visited,
 546     #patternMainContents h3 a:link, #patternMainContents h3 a:visited,
 547     #patternMainContents h4 a:link, #patternMainContents h4 a:visited,
 548     #patternMainContents h5 a:link, #patternMainContents h5 a:visited,
 549     #patternMainContents h6 a:link, #patternMainContents h6 a:visited {
 550        color:%HEADER_TEXT%;
 551     }
 552     #patternMainContents h1 a:hover,
 553     #patternMainContents h2 a:hover,
 554     #patternMainContents h3 a:hover,
 555     #patternMainContents h4 a:hover,
 556     #patternMainContents h5 a:hover,
 557     #patternMainContents h6 a:hover {
 558        color:%LINK_TEXT_HOVER%;
 559     }
 560     .patternTopic .twikiUnvisited a:visited {
 561        color:%LINK_TEXT_NORMAL%;
 562     }
 563     .patternTopic .twikiUnvisited a:hover {
 564        color:%LINK_TEXT_HOVER%;
 565     }
 566
 567     /* Form elements */
 568
 569     textarea,
 570     input,
 571     select {
 572        border-color:%FORM_INPUT_BORDER%;
 573        color:%MAIN_TEXT_COLOR%;
 574        background-color:%GENERAL_BACKGROUND%;
 575     }
 576     .twikiSubmit,
 577     .twikiButton {
 578        border-color:%BUTTON_BORDERS%;
 579     }
 580     .twikiSubmit {
 581        color:%SUBMIT_BUTTON_BORDER_TEXT%;
 582        background-color:%SUBMIT_BUTTON_BACKGROUND%;
 583     }
 584     .twikiButton {
 585        color:%BUTTON_TEXT%;
 586        background-color:%BUTTON_BACKGROUND%;
 587     }
 588     .twikiButtonCancel {
 589        color:%BUTTON_TEXT%;
 590        background-color:%BUTTON_CANCEL_BACKGROUND%;
 591     }
 592     .twikiSubmitDisabled,
 593     .twikiSubmitDisabled:active {
 594        border-color:%BUTTON_BORDERS_DISABLED%;
 595        color:%DISABLED_TEXT%;
 596        background-color:%ACTIVE_FORM_BACKGROUND%;
 597     }
 598     .twikiTextarea,
 599     .twikiInputField,
 600     .twikiInputFieldDisabled,
 601     .twikiInputFieldReadOnly,
 602     .twikiSelect {
 603        border-color:%INPUT_FIELD_BORDERS%;
 604     }
 605     .twikiTextarea,
 606     .twikiInputField,
 607     .twikiSelect {
 608        color:%MAIN_TEXT_COLOR%;
 609        background-color:%MAIN_BACKGROUND_COLOR%;
 610     }
 611     .twikiInputField:active,
 612     .twikiInputField:focus,
 613     .twikiInputFieldFocus {
 614        background-color:%FORMFIELD_ACTIVE%;
 615     }
 616
 617     .twikiTextareaRawView {
 618        color:%GENERAL_TEXT%;
 619     }
 620     .twikiInputFieldDisabled {
 621        color:%DISABLED_TEXT%;
 622        background-color:%DISABLED_BACKGROUND%;
 623     }
 624     .twikiInputFieldReadOnly {
 625        color:%GRAYED_TEXT_COLOR%;
 626     }
 627     .twikiSelect {
 628        border-color:%INPUT_FIELD_BORDERS%;
 629        color:%MAIN_TEXT_COLOR%;
 630        background-color:%MAIN_BACKGROUND_COLOR%;
 631     }
 632     .twikiInputFieldDisabled,
 633     .twikiSelectDisabled {
 634        color:%DISABLED_TEXT%;
 635        border-color:%INPUT_FIELD_BORDERS%;
 636        background-color:%DISABLED_BACKGROUND%;
 637     }
 638     .twikiInputFieldBeforeFocus {
 639        color:%MUTED_TEXT%;
 640     }
 641
 642     /*   -----------------------------------------------------------
 643        Plugin elements
 644        -----------------------------------------------------------   */
 645
 646     /* TablePlugin */
 647     .twikiTable,
 648     .twikiTable td,
 649     .twikiTable th {
 650        border-color:%TABLE_BORDER%;
 651     }
 652     .twikiTable th a:link,
 653     .twikiTable th a:visited,
 654     .twikiTable th a font {
 655        color:%LINK_TEXT_NORMAL_TABLE_HEADER%;
 656     }
 657
 658     /* TwistyContrib */
 659     .twistyPlaceholder {
 660        color:%GRAYED_OUT_TEXT%;
 661     }
 662     a:hover.twistyTrigger {
 663        color:%LINK_TEXT_HOVER%;
 664     }
 665
 666     /* TipsContrib */
 667     .tipsOfTheDay {
 668     }
 669
 670     /* RevCommentPlugin */
 671     .revComment .patternTopicAction {
 672        background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
 673     }
 674
 675     /*   -----------------------------------------------------------
 676        TWiki styles
 677        -----------------------------------------------------------   */
 678
 679     .twikiGrayText {
 680        color:%GRAYED_OUT_TEXT%;
 681     }
 682     .twikiGrayText a:link,
 683     .twikiGrayText a:visited {
 684        color:%GRAYED_OUT_TEXT%;
 685     }
 686     .twikiGrayText a:hover {
 687        color:%LINK_TEXT_HOVER%;
 688     }
 689
 690     table.twikiFormTable th.twikiFormTableHRow,
 691     table.twikiFormTable td.twikiFormTableRow {
 692        color:%MUTED_TEXT%;
 693     }
 694     .twikiEditForm {
 695        color:%MAIN_TEXT_COLOR%;
 696     }
 697     .twikiEditForm .twikiFormTable,
 698     .twikiEditForm .twikiFormTable th,
 699     .twikiEditForm .twikiFormTable td {
 700        border-color:%TABLE_BORDER%;
 701     }
 702     /* use a different table background color mix: no odd/even rows, no white background */
 703     .twikiEditForm .twikiFormTable td  {
 704        background-color:%TABLE_DATA_MIX_BACKGROUND%;
 705     }
 706     .twikiEditForm .twikiFormTable th {
 707        background-color:%TABLE_DATA_ODD_BACKGROUND%;
 708     }
 709     .patternContent .twikiAttachments,
 710     .patternContent .twikiForm {
 711        background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
 712        border-color:%TABLE_BORDER%;
 713     }
 714     .twikiAttachments table,
 715     table.twikiFormTable {
 716        border-color:%TABLE_BORDER%;
 717        background-color:%MAIN_BACKGROUND_COLOR%;
 718     }
 719     .twikiAttachments table {
 720        background-color:%MAIN_BACKGROUND_COLOR%;
 721     }
 722     .twikiAttachments td,
 723     .twikiAttachments th {
 724        border-color:%TABLE_BORDER%;
 725     }
 726     .twikiAttachments .twikiTable th font,
 727     table.twikiFormTable th.twikiFormTableHRow font {
 728        color:%LINK_TEXT_NORMAL%;
 729     }
 730
 731     .twikiFormSteps {
 732        background-color:%ACTIVE_FORM_BACKGROUND%;
 733        border-color:%FORM_STEP_BORDER%;
 734     }
 735     .twikiFormStep {
 736        border-color:%FORM_STEP_BORDER%;
 737     }
 738     .twikiFormStep h3,
 739     .twikiFormStep h4 {
 740        color:%FORM_HEADER_TEXT%;
 741     }
 742     .twikiFormStep h3,
 743     .twikiFormStep h4 {
 744        background-color:transparent;
 745     }
 746     .twikiActionFormStepSign {
 747        color:%FORM_HEADER_TEXT%;
 748     }
 749     .twikiToc .twikiTocTitle {
 750        color:%MUTED_TEXT%;
 751     }
 752     .twikiBroadcastMessage {
 753        background-color:%NOTIFICATION_BACKGROUND%;
 754     }
 755     .twikiNotification {
 756        background-color:%NOTIFICATION_BACKGROUND%;
 757     }
 758     #twikiLogin .patternLoginNotification {
 759        background-color:%MAIN_BACKGROUND_COLOR%;
 760        border-color:%ALERT_BORDER%;
 761     }
 762     .twikiHelp {
 763        background-color:%INFO_BACKGROUND%;
 764     }
 765     .twikiHelp {
 766        background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
 767        border-color:%SEPARATOR_BORDER%;
 768     }
 769     .twikiBroadcastMessage b,
 770     .twikiBroadcastMessage strong {
 771        color:%ALERT_TEXT%;
 772     }
 773     .twikiAlert,
 774     .twikiAlert code {
 775        color:%ALERT_TEXT%;
 776     }
 777     .twikiEmulatedLink {
 778        color:%LINK_TEXT_NORMAL%;
 779     }
 780     .twikiPageForm table {
 781        border-color:%TABLE_BORDER%;
 782        background:%MAIN_BACKGROUND_COLOR%;
 783     }
 784     .twikiPageForm hr {
 785        border-color:%FORM_BORDER%;
 786        background-color:%FORM_BORDER%;
 787        color:%FORM_BORDER%;
 788     }
 789     .twikiAccessKey {
 790        color:inherit;
 791        border-color:%GRAYED_OUT_TEXT%;
 792     }
 793     a:link .twikiAccessKey,
 794     a:visited .twikiAccessKey {
 795        color:inherit;
 796     }
 797     a:hover .twikiAccessKey {
 798        color:inherit;
 799     }
 800     .twikiImage img {
 801        border-color:%IMAGE_BORDER%;
 802        background-color:%MAIN_BACKGROUND_COLOR%;
 803     }
 804     #patternTopBar .twikiImage img {
 805        background-color:transparent;
 806     }
 807     .twikiImage a:hover img {
 808        border-color:%LINK_BACKGROUND_HOVER%;
 809     }
 810
 811     /*   -----------------------------------------------------------
 812        Pattern skin specific elements
 813        -----------------------------------------------------------   */
 814     #patternPage {
 815        background-color:%MAIN_BACKGROUND_COLOR%;
 816     }
 817     .patternHomePath a:link,
 818     .patternHomePath a:visited {
 819        border-color:%NEUTRAL_BORDER%;
 820        color:%LINK_TEXT_NORMAL_VISITED%;
 821     }
 822     .patternTop a:hover {
 823        border:none;
 824        color:%LINK_TEXT_HOVER%;
 825     }
 826     .patternHomePath .patternRevInfo,
 827     .patternHomePath .patternRevInfo a:link,
 828     .patternHomePath .patternRevInfo a:visited {
 829        color:%GRAYED_OUT_TEXT%;
 830     }
 831     .patternHomePath .patternRevInfo a:hover {
 832        color:%LINK_TEXT_HOVER%;
 833     }
 834
 835     /* Left bar */
 836     #patternLeftBarContents {
 837        color:%GENERAL_TEXT%;
 838     }
 839     #patternLeftBarContents hr {
 840        color:%FORM_STEP_BORDER%;
 841        background-color:%FORM_STEP_BORDER%;
 842     }
 843     #patternLeftBarContents a:link,
 844     #patternLeftBarContents a:visited {
 845        color:%SIDE_BAR_LINK_TEXT%;
 846     }
 847     #patternLeftBarContents a:hover {
 848        color:%LINK_TEXT_HOVER%;
 849     }
 850     #patternLeftBarContents .patternLeftBarPersonal,
 851     #patternLeftBarContents .patternWebIndicator {
 852        border-color:#dadada;
 853     }
 854     #patternLeftBarContents b,
 855     #patternLeftBarContents strong {
 856        color:%HEADER_TEXT%;
 857     }
 858
 859     .patternTopicActions {
 860        border-color:%TABLE_BORDER%;
 861        background-color:%TOPIC_ACTION_BACKGROUND%;
 862        color:%MUTED_TEXT%;
 863     }
 864     .patternTopicAction {
 865        border-color:%TABLE_BORDER%;
 866     }
 867     .patternTopicAction s,
 868     .patternTopicAction strike {
 869        color:%DISABLED_TEXT%;
 870     }
 871     .patternTopicAction .twikiSeparator {
 872        color:%SEPARATOR_BORDER%;
 873     }
 874     .patternActionButtons a:link,
 875     .patternActionButtons a:visited {
 876        color:%LINK_TEXT_ACTION_BUTTON%;
 877     }
 878     .patternActionButtons a:hover {
 879        color:%LINK_TEXT_HOVER%;
 880     }
 881     .patternTopicAction .twikiAccessKey {
 882        color:%LINK_TEXT_ACTION_BUTTON%;
 883        border-color:%LINK_TEXT_ACTION_BUTTON%;
 884     }
 885     .patternTopicAction a:hover .twikiAccessKey {
 886        color:%LINK_TEXT_HOVER%;
 887     }
 888     .patternTopicAction label {
 889        color:%GENERAL_TEXT%;
 890     }
 891     .patternHelpCol {
 892        color:%GRAYED_OUT_TEXT%;
 893     }
 894     .patternSigLine {
 895        color:%MUTED_TEXT%;
 896     }
 897     .patternToolBar a:link .twikiAccessKey,
 898     .patternToolBar a:visited .twikiAccessKey {
 899        color:inherit;
 900        border-color:%LINK_TEXT_NORMAL_VISITED%;
 901     }
 902     .patternToolBar a:hover .twikiAccessKey {
 903        background-color:transparent;
 904        color:inherit;
 905        border-color:%LINK_TEXT_NORMAL_VISITED%;
 906     }
 907     .patternSaveHelp {
 908        background-color:%MAIN_BACKGROUND_COLOR%;
 909     }
 910
 911     /* WebSearch, WebSearchAdvanced */
 912     table#twikiSearchTable {
 913        border-color:%FORM_STEP_BORDER%;
 914     }
 915     table#twikiSearchTable th,
 916     table#twikiSearchTable td {
 917        background-color:%GENERAL_BACKGROUND%;
 918        border-color:%FORM_STEP_BORDER%;
 919     }
 920     table#twikiSearchTable hr {
 921        border-color:%FORM_STEP_BORDER%;
 922        background-color:%FORM_STEP_BORDER%;
 923     }
 924     table#twikiSearchTable th {
 925        color:%MAIN_TEXT_COLOR%;
 926     }
 927
 928     /*   -----------------------------------------------------------
 929        Search results
 930        styles and overridden styles used in search.pattern.tmpl
 931        -----------------------------------------------------------   */
 932
 933     h3.patternSearchResultsHeader,
 934     h4.patternSearchResultsHeader {
 935        background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
 936        border-color:%SEPARATOR_BORDER%;
 937     }
 938     h4.patternSearchResultsHeader {
 939        color:%MAIN_TEXT_COLOR%;
 940     }
 941     .patternNoViewPage h4.patternSearchResultsHeader {
 942        color:%HEADER_TEXT%;
 943     }
 944     .patternSearchResult .twikiBottomRow {
 945        border-color:%MINOR_SEPARATOR_BORDER%;
 946     }
 947     .patternSearchResult .twikiAlert {
 948        color:%ALERT_TEXT%;
 949     }
 950     .patternSearchResult .twikiSummary .twikiAlert {
 951        color:%ALERT_TEXT_MUTED%;
 952     }
 953     .patternSearchResult .twikiNew {
 954        background-color:%NEW_BACKGROUND%;
 955        border-color:%NEW_TEXT%;
 956        color:%NEW_TEXT%;
 957     }
 958     .patternViewPage .patternSearchResultsBegin {
 959        border-color:%TABLE_BORDER%;
 960     }
 961
 962     /* Search results in book view format */
 963
 964     .patternBookView .twikiTopRow {
 965        background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
 966        color:%MUTED_TEXT%;
 967     }
 968     .patternBookView .twikiBottomRow {
 969        border-color:%TABLE_BORDER%;
 970     }
 971     .patternBookView .patternSearchResultCount {
 972        color:%GRAYED_OUT_TEXT%;
 973     }
 974
 975     /* edit.pattern.tmpl */
 976
 977     /* preview.pattern.tmpl */
 978
 979     .twikiPreviewArea {
 980        border-color:%ALERT_BORDER%;
 981        background-color:%MAIN_BACKGROUND_COLOR%;
 982     }
 983
 984     /* rdiff.pattern.tmpl */
 985
 986     .patternDiff {
 987        border-color:%TABLE_HEADER_BACKGROUND%;
 988     }
 989     #patternMainContents .patternDiff h4.patternSearchResultsHeader {
 990        background-color:%TABLE_HEADER_BACKGROUND%;
 991        color:%LIGHT_ON_DARK_TEXT_COLOR%;
 992     }
 993     #patternMainContents .patternDiff h4.patternSearchResultsHeader a:link,
 994     #patternMainContents .patternDiff h4.patternSearchResultsHeader a:visited {
 995        color:%LIGHT_ON_DARK_TEXT_COLOR%;
 996     }
 997     tr.twikiDiffDebug td {
 998        border-color:%TABLE_BORDER%;
 999     }
1000     .patternDiffPage .twikiDiffTable th {
1001        background-color:%DIFF_HEADER_BACKGROUND%;
1002     }
1003     /* Changed */
1004     .twikiDiffChangedHeader,
1005     tr.twikiDiffDebug .twikiDiffChangedText,
1006     tr.twikiDiffDebug .twikiDiffChangedText {
1007        background:#9f9; /* green - do not change */
1008     }
1009     /* Deleted */
1010     .twikiDiffDeletedHeader,
1011     tr.twikiDiffDebug .twikiDiffDeletedMarker,
1012     tr.twikiDiffDebug .twikiDiffDeletedText {
1013        background-color:#f99; /* red - do not change */
1014     }
1015     /* Added */
1016     .twikiDiffAddedHeader,
1017     tr.twikiDiffDebug .twikiDiffAddedMarker,
1018     tr.twikiDiffDebug .twikiDiffAddedText {
1019        background-color:#ccf; /* violet - do not change */
1020     }
1021     /* Unchanged */
1022     tr.twikiDiffDebug .twikiDiffUnchangedText {
1023        color:%GRAYED_OUT_TEXT%;
1024     }
1025     .twikiDiffUnchangedTextContents { }
1026     .twikiDiffLineNumberHeader {
1027        background-color:%DIFF_HEADER_BACKGROUND%;
1028     }
1029
1030     /* IMAGES */
1031     /* image positions are set here as well as these are dependent on the image */
1032
1033     h2,
1034     .patternTopicAction {
1035        background-image:url(bg_action_gradient.gif);
1036        background-repeat:repeat-x;
1037     }
1038     .twikiToc li {
1039        background-image:url(bullet-toc.gif);
1040        background-repeat:no-repeat;
1041        background-position:0 .4em;
1042     }
1043     #patternOuter,
1044     #patternTopBar {
1045        /* gradient yellow of left bar and main */
1046        background-image:url(bg_outer_gradient.gif);
1047        background-repeat:repeat-x;
1048     }
1049     .patternPrintPage #patternOuter {
1050        background:#fff; /* white - do not change */
1051     }
1052     .twikiPageForm table,
1053     table#twikiSearchTable td.twikiFirstRow {
1054        background-image:url(form_gradient.gif);
1055        background-repeat:repeat-x;
1056        background-color:#f5f5f5;
1057     }
1058     .twikiSubmit,
1059     .twikiSubmitDisabled {
1060        background-image:url(bg_submit_gradient.gif);
1061        background-repeat:repeat-x;
1062     }
1063     .twikiSubmit,
1064     a.twikiSubmit:link,
1065     a.twikiSubmit:visited {
1066        background-position:0px 0px;
1067        background-color:#06c;
1068        border-color:#abcdf0 #0048b8 #0048b8 #abcdf0;
1069        color:#fff;
1070     }
1071     .twikiSubmit:hover,
1072     a.twikiSubmit:hover {
1073        background-position:0px -80px;
1074        background-color:#0047b7;
1075        border-color:#98bce9 #0031a4 #0031a4 #98bce9;
1076        color:#fff;
1077     }
1078     .twikiSubmit:active,
1079     a.twikiSubmit:active {
1080        background-position:0px -160px;
1081        background-color:#73ace6;
1082        border-color:#0031a4 #98bce9 #98bce9 #0031a4;
1083        color:#fff;
1084     }
1085     .twikiSubmitDisabled,
1086     .twikiSubmitDisabled:hover,
1087     .twikiSubmitDisabled:active {
1088        background-position:0px -240px;
1089        background-color:#d9e8f7;
1090        border-color:#f5f9fd #ccc #ccc #f5f9fd;
1091        color:#ccc;
1092     }
1093     .twikiButton,
1094     a.twikiButton:link,
1095     a.twikiButton:visited {
1096        background-image:url(bg_button_gradient.gif);
1097        background-repeat:repeat-x;
1098        background-position:0px 0px;
1099        border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec;
1100        background-color:#dbd9cf;
1101        color:#333;
1102     }
1103     .twikiChangeFormButtonHolder .twikiButton {
1104        background-color:#fff;
1105        background-image:none;
1106        color:#06c;
1107     }
1108     .twikiChangeFormButtonHolder .twikiButton:hover,
1109     .twikiChangeFormButtonHolder .twikiButton:active {
1110        background-image:url(bg_button_gradient.gif);
1111        background-repeat:repeat-x;
1112     }
1113     .twikiButton:hover,
1114     .twikiChangeFormButtonHolder .twikiButton:hover,
1115     a.twikiButton:hover {
1116        background-position:0px -80px;
1117        border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb;
1118        background-color:#c2bfae;
1119        color:#222;
1120     }
1121     .twikiButton:active,
1122     .twikiChangeFormButtonHolder .twikiButton:active,
1123     a.twikiButton:active {
1124        background-position:0px -160px;
1125        border-color:#a3a092 #f4f2eb #f4f2eb #a3a092;
1126        background-color:#e8e5d7;
1127        color:#222;
1128     }
1129     .twikiButtonDisabled,
1130     .twikiButtonDisabled:hover,
1131     .twikiButtonDisabled:active {
1132        background-image:url(bg_button_gradient.gif);
1133        background-repeat:repeat-x;
1134        background-position:0px -240px;
1135        border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9;
1136        background-color:#edece6;
1137        color:#bbb;
1138     }
1139     .twikiButtonCancel {
1140        background-image:url(bg_buttoncancel_gradient.gif);
1141        background-repeat:repeat-x;
1142        background-position:0px 0px;
1143        border-color:#f3ddd7 #b5706a #b5706a #f3ddd7;
1144        background-color:#cc867f;
1145        color:#333;
1146     }
1147     .twikiButtonCancel:hover {
1148        background-position:0px -80px;
1149        border-color:#eacac1 #9f564f #9f564f #eacac1;
1150        background-color:#b26259;
1151        color:#222;
1152     }
1153     .twikiButtonCancel:active {
1154        background-position:0px -160px;
1155        border-color:#9f564f #eacac1 #eacac1 #9f564f;
1156        background-color:#e5bdb1;
1157        color:#222;
1158     }
1159     .patternToolBar span a:link,
1160     .patternToolBar span a:visited,
1161     .patternToolBar span s,
1162     .patternToolBar span strike {
1163        background-image:url(bg_button_small_gradient.gif);
1164        background-repeat:repeat-x;
1165     }
1166     .patternToolBar span a:link,
1167     .patternToolBar span a:visited {
1168        background-position:0px 0px;
1169        border-color:#f8f6ec #b8b6ad #b8b6ad #f8f6ec;
1170        background-color:#dbd9cf;
1171        color:#333;
1172     }
1173     .patternToolBar span a:hover {
1174        background-position:0px -80px;
1175        border-color:#f4f2eb #a3a092 #a3a092 #f4f2eb;
1176        background-color:#c2bfae;
1177        color:#222;
1178     }
1179     .patternToolBar span a:active {
1180        background-position:0px -160px;
1181        border-color:#a3a092 #f4f2eb #f4f2eb #a3a092;
1182        background-color:#e8e5d7;
1183        color:#222;
1184     }
1185     .patternToolBar span s,
1186     .patternToolBar span strike {
1187        background-position:0px -240px;
1188        border-color:#fcfbf9 #e3e2dd #e3e2dd #fcfbf9;
1189        background-color:#edece6;
1190        color:#bbb;
1191     }
1192     .patternTextareaButton {
1193        border-color:#fffefd #b8b6ad #b8b6ad #fffefd;
1194        overflow:hidden;
1195     }
1196     .patternButtonFontSelector {
1197        background-image:url(button_font_selector.gif);
1198        width:33px;
1199        height:16px;
1200     }
1201     .patternButtonFontSelectorProportional {
1202        background-position:0 0;
1203     }
1204     .patternButtonFontSelectorMonospace {
1205        background-position:0 -16px;
1206     }
1207     .patternButtonEnlarge,
1208     .patternButtonShrink {
1209        background-image:url(button_arrow.gif);
1210        width:16px;
1211        height:16px;
1212     }
1213     .patternButtonEnlarge {
1214        background-position:0 0;
1215     }
1216     .patternButtonEnlarge:hover {
1217        background-position:0 -42px;
1218     }
1219     .patternButtonEnlarge:active {
1220        background-position:0 -84px;
1221     }
1222     .patternButtonShrink {
1223        background-position:16px 0;
1224     }
1225     .patternButtonShrink:hover {
1226        background-position:16px -42px;
1227     }
1228     .patternButtonShrink:active {
1229        background-position:16px -84px;
1230     }
1231     .twikiBroadcastMessage,
1232     .twikiNotification {
1233        background-image:url(background_alert.gif);
1234        background-repeat:repeat-x;
1235     }
1236
1237     /* common settings */
1238     .patternLeftBarPersonal li,
1239     li.patternLogOut,
1240     li.patternLogIn {
1241        padding-left:13px;
1242        background-position:0 .4em;
1243        background-repeat:no-repeat;
1244     }
1245     .patternLeftBarPersonal li {
1246        background-image:url(bullet-personal_sidebar.gif);
1247     }
1248     .patternLeftBarPersonal li.patternLogOut {
1249        background-image:url(bullet-lock.gif);
1250     }
1251     .patternLeftBarPersonal li.patternLogIn {
1252        background-image:url(bullet-lock.gif);
1253     }
1254     %ENDATTACH%