Pattern Skin Color Settings

TWiki
---+ !!Color scheme settings for %TWIKIWEB%.PatternSkin
*Appearance: text colors, background colors, border colors.*

Use this topic to change the color settings of %TWIKIWEB%.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.

---++!! Usage
---+++!! Step 1
Let %TWIKIWEB%.PatternSkin point to the custom-made colors style sheet. In [[%MAINWEB%.TWikiPreferences]] put:
<pre>
   * <nop>Set USERCOLORSURL = %<nop>PUBURLPATH%/%<nop>MAINWEB%/TWikiPreferences/theme-colors.css
</pre>

---+++!! Step 2
Edit this topic, and change the color variables as you like. 

---++!! Color variables  
%TOC%

---++ Logical groupings
---+++ Text on background
---++++ MAIN_TEXT_COLOR Main text color
   * Set MAIN_TEXT_COLOR = #000
---++++ MAIN_BACKGROUND_COLOR Main background color
   * Set MAIN_BACKGROUND_COLOR = #fff
---++++ LIGHT_ON_DARK_TEXT_COLOR Light on dark text color
   * Set LIGHT_ON_DARK_TEXT_COLOR = #fff
   
---+++ Links
---++++ LINK_TEXT_NORMAL Link normal text
   * Set LINK_TEXT_NORMAL = #06c
---++++ LINK_BACKGROUND_NORMAL Link normal background
   * Set LINK_BACKGROUND_NORMAL =
---++++ LINK_TEXT_ACTION_BUTTON Link text red (same as LINK_BACKGROUND_HOVER)
   * Set LINK_TEXT_ACTION_BUTTON = #D6000F
---++++ LINK_TEXT_HOVER Link hover text
   * Set LINK_TEXT_HOVER = #FBF7E8
---++++ LINK_BACKGROUND_HOVER Link background hover
   * Set LINK_BACKGROUND_HOVER = #D6000F
---++++ SIDE_BAR_LINK_TEXT Side bar link text
   * Set SIDE_BAR_LINK_TEXT = #666
---++++ LINK_TEXT_NORMAL_TABLE_HEADER Table header link text
   * Set LINK_TEXT_NORMAL_TABLE_HEADER = #fff
---++++ LINK_TEXT_NORMAL_BORDER_TABLE_HEADER Table header link border
   * Set LINK_TEXT_NORMAL_BORDER_TABLE_HEADER = #bbb
---++++ LINK_TEXT_SORTED_TABLE_HEADER Sorted table header link text
   * Set LINK_TEXT_SORTED_TABLE_HEADER = #fff
---++++ LINK_TEXT_HOVER_TABLE_HEADER Table header link hover text
   * Set LINK_TEXT_HOVER_TABLE_HEADER = #fff
---++++ LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER Link border in selected column header
   * Set LINK_BORDER_TABLE_SELECTED_COLUMN_HEADER = #999
   
---+++ Disabled
---++++ DISABLED_BORDER Disabled border
   * Set DISABLED_BORDER = #e0e0e0
---++++ DISABLED_TEXT Disabled text
   * Set DISABLED_TEXT = #ccc
---++++ DISABLED_BACKGROUND Disabled background
   * Set DISABLED_BACKGROUND = #f5f5f5

---+++ 'New'
---++++ NEW_TEXT New text (green) 
   * Set NEW_TEXT = #049804
---++++ NEW_BACKGROUND New background (light green) 
   * Set NEW_BACKGROUND = #ECFADC

---+++ Alert
---++++ ALERT_TEXT Alert text (red)
   * Set ALERT_TEXT = #f00
---++++ ALERT_TEXT_MUTED Muted alert text (dark red)
   * Set ALERT_TEXT_MUTED = #900
---++++ ALERT_BORDER Alert border
   * Set ALERT_BORDER = #f00
 
---+++ Buttons
---++++ BUTTON_TEXT Button text color (dark gray)
   * Set BUTTON_TEXT = #333
---++++ BUTTON_BORDERS Button borders
   * Set BUTTON_BORDERS = #ddd #aaa #aaa #ddd
---++++ BUTTON_BORDERS_ACTIVE Button borders (active)
   * Set BUTTON_BORDERS_ACTIVE = #999 #ccc #ccc #999
---++++ SUBMIT_BUTTON_BACKGROUND Submit button background (dark yellow)
   * Set SUBMIT_BUTTON_BACKGROUND = #FED764
---++++ SUBMIT_BUTTON_BORDER Submit button border (blue) 
   * Set SUBMIT_BUTTON_BORDER = #88B6CF

---+++ Forms
---++++ INPUT_FIELD_BORDERS Input field borders
   * Set INPUT_FIELD_BORDERS = #aaa #ddd #ddd #aaa
---++++ FORM_INPUT_BORDER Textarea, input and select (darker gray)
   * Set FORM_INPUT_BORDER = #aaa
---++++ FORM_BORDER Form (same as twikiTable border)
   * Set FORM_BORDER = #ccc
---++++ ACTIVE_FORM_BACKGROUND Edit form, form steps
   * Set ACTIVE_FORM_BACKGROUND = #f8fbfc
---++++ FORMFIELD_ACTIVE Active form field (not implemented yet)
   * Set FORMFIELD_ACTIVE = #ffc
   
---++ Color groupings
---+++ Text colors
---++++ GENERAL_TEXT General text (if not set in MAIN_BACKGROUND_COLOR) (black)
   * Set GENERAL_TEXT = #000
---++++ HEADER_TEXT Header text
   * Set HEADER_TEXT = #a00
---++++ CODE_TEXT Code text, left bar text and links
   * Set CODE_TEXT = #7A4707
---++++ MUTED_TEXT Muted text (dark gray)
   * Set MUTED_TEXT = #666
---++++ GRAYED_OUT_TEXT Grayed out text
   * Set GRAYED_OUT_TEXT = #8E9195
---++++ STRONG_TEXT Dark text, header (dark gray)
   * Set STRONG_TEXT = #333
---++++ SEPARATOR Seperator in topic action bar
   * Set SEPARATOR = #aaa
	
---+++ Background colors
---++++ GENERAL_BACKGROUND General background color (if not set in  MAIN_BACKGROUND_COLOR) (white)
   * Set GENERAL_BACKGROUND = #fff
---++++ SIDE_BAR_BACKGROUND Side bar background
   * Set SIDE_BAR_BACKGROUND = #f7fafc
---++++ SIDE_BAR_PERSONAL_BACKGROUND Side bar personal background
   * Set SIDE_BAR_PERSONAL_BACKGROUND = #e6eff5;
---++++ INFO_BACKGROUND Info (very light blue) (placeholder for background image)
   * Set INFO_BACKGROUND = #f8fbfc
---++++ TOPIC_ACTION_BACKGROUND Topic action row (light yellow)
   * Set TOPIC_ACTION_BACKGROUND = #FCF8EC
---++++ HEADER_BACKGROUND H1, H2, etc header (light yellow) 
   * Set HEADER_BACKGROUND = #FDFAF3
---++++ ATTACHMENT_AND_FORM_BACKGROUND Attachment, form (light yellow)
   * Set ATTACHMENT_AND_FORM_BACKGROUND = #FEFCF6
---++++ DIFF_HEADER_BACKGROUND Diff header (dark gray) (same as GRAYED_OUT_TEXT)
   * Set DIFF_HEADER_BACKGROUND = #ccc

---++++ Table colors
---+++++ TABLE_DATA_BACKGROUND Table data background
   * Set TABLE_DATA_BACKGROUND = #f0f6f9
---+++++ TABLE_HEADER_BACKGROUND Table header background
   * Set TABLE_HEADER_BACKGROUND = #6b7f93
---+++++ TABLE_SELECTED_COLUMN_HEADER_BACKGROUND Sorted table column accent background 
   * Set TABLE_SELECTED_COLUMN_HEADER_BACKGROUND = #345
---+++++ TABLE_DATA_ODD_BACKGROUND Table data background (odd row)
   * Set TABLE_DATA_ODD_BACKGROUND = #edf4f9
---+++++ TABLE_DATA_EVEN_BACKGROUND Table data background (even row)
   * Set TABLE_DATA_EVEN_BACKGROUND = #ffffff
---+++++ TABLE_DATA_ODD_SELECTED_BACKGROUND Table data background (odd row, selected column)
   * Set TABLE_DATA_ODD_SELECTED_BACKGROUND = #dce7ee
---+++++ TABLE_DATA_EVEN_SELECTED_BACKGROUND Table data background (even row, selected column)
   * Set TABLE_DATA_EVEN_SELECTED_BACKGROUND = #f5f5f5
---+++++ TABLE_DATA_MIX_BACKGROUND Table data background (mix between even and odd)
   * Set TABLE_DATA_MIX_BACKGROUND = #f7fafc
	
---+++ Border colors
---++++ INFO_BORDER Info (light blue)
   * Set INFO_BORDER = #D5E6F3
---++++ SEPARATOR_BORDER HR line, bottom of h2, attachment table, form (brown)
   * Set SEPARATOR_BORDER = #E2DCC8
---++++ MINOR_SEPARATOR_BORDER Header H3..H6 bottom (75% of SEPARATOR_BORDER)
   * Set MINOR_SEPARATOR_BORDER = #E9E4D2
---++++ LAYOUT_ELEMENT_BORDER Main layout elements (neutral tone) 
   * Set LAYOUT_ELEMENT_BORDER = #ccc
---++++ TABLE_BORDER Table border, sup (light neutral tone)
   * Set TABLE_BORDER = #ccc
---++++ TABLE_BORDER_LIGHT Table border light
   * Set TABLE_BORDER_LIGHT = #e2e7eb
   
<!-- END OF COLOR VARIABLES -->

Do not change the text below this line unless you know what you are doing!
-------------------------------------------------------------------------------
<verbatim>
%STARTATTACH{"theme-colors.css"}%
/* PatternSkin colors */
/* Generated by AttachContentPlugin from TWiki.PatternSkinColorSettings */

/* LAYOUT ELEMENTS */

#patternTopBar {
	background-color:%MAIN_BACKGROUND_COLOR%;
	border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternMain { /* don't set a background here; use patternOuter */ }
#patternOuter {
	background-color:%MAIN_BACKGROUND_COLOR%; /* Sets background of center col */
	border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternLeftBar, #patternLeftBarContents { /* don't set a background here; use patternWrapper */ }
#patternWrapper {
	background-color:%SIDE_BAR_BACKGROUND%;
}
#patternBottomBar {
	background-color:%MAIN_BACKGROUND_COLOR%;
	border-color:%LAYOUT_ELEMENT_BORDER%;
}
#patternBottomBarContents,
#patternBottomBarContents a:link,
#patternBottomBarContents a:visited {
	color:%GRAYED_OUT_TEXT%;
}
#patternBottomBarContents a:hover {
	color:%LINK_TEXT_HOVER%;
}

/* GENERAL HTML ELEMENTS */

html body {
	background-color:%MAIN_BACKGROUND_COLOR%;
	color:%MAIN_TEXT_COLOR%;
}
/* be kind to netscape 4 that doesn't understand inheritance */
body, p, li, ul, ol, dl, dt, dd, acronym, h1, h2, h3, h4, h5, h6 {
	background-color:transparent;
}
hr {
	color:%LAYOUT_ELEMENT_BORDER%;
	background-color:%LAYOUT_ELEMENT_BORDER%;
}
pre, code, tt {
	color:%CODE_TEXT%;
}
blockquote {
	border-color:%INFO_BORDER%;
	background-color:%ACTIVE_FORM_BACKGROUND%;
}
h1, h2, h3, h4, h5, h6 {
	color:%HEADER_TEXT%;
}
h1 a:link,
h1 a:visited {
	color:%HEADER_TEXT%;
}
h1 a:hover {
	color:%LINK_TEXT_HOVER%;
}
h2 {
	background-color:%HEADER_BACKGROUND%;
	border-color:%SEPARATOR_BORDER%;
}
h3, h4, h5, h6 {
	border-color:%MINOR_SEPARATOR_BORDER%;
}
/* to override old Render.pm coded font color style */
.twikiNewLink font {
	color:inherit;
}
.twikiNewLink a:link sup,
.twikiNewLink a:visited sup {
	color:%MUTED_TEXT%;
	border-color:%TABLE_BORDER%;
}
.twikiNewLink a:hover sup {
	background-color:%LINK_BACKGROUND_HOVER%;
	color:%LINK_TEXT_HOVER%;
	border-color:%LINK_BACKGROUND_HOVER%;
}
.twikiNewLink {
	border-color:%TABLE_BORDER%;
}
:link:focus,
:visited:focus,
:link,
:visited,
:link:active,
:visited:active {
	color:%LINK_TEXT_NORMAL%;
	background-color:transparent;
}
:link:hover,
:visited:hover {
	color:%LINK_TEXT_HOVER%;
	background-color:%LINK_BACKGROUND_HOVER%;
}
:link:hover img,
:visited:hover img {
	background-color:transparent;
}
/* fix for hover over transparent logo: */
#patternTopBar :link:hover img,
#patternTopBar :visited:hover img {
	background:%MAIN_BACKGROUND_COLOR%;
}
.patternTopic a:visited {
	color:%MUTED_TEXT%;
}
.patternTopic a:hover {
	color:%LINK_TEXT_HOVER%;
}

/* Form elements */

textarea,
input,
select {
	border-color:%FORM_INPUT_BORDER%;
	color:%MAIN_TEXT_COLOR%;
	background-color:%GENERAL_BACKGROUND%;
}
.twikiSubmit,
.twikiButton {
	border-color:%BUTTON_BORDERS%;
	color:%BUTTON_TEXT%;
	background-color:%GENERAL_BACKGROUND%;
}
.twikiSubmit:active,
.twikiButton:active {
	border-color:%BUTTON_BORDERS_ACTIVE%;
	color:%GENERAL_TEXT%;
}
.twikiSubmitDisabled,
.twikiSubmitDisabled:active {
	border-color:%DISABLED_BORDER%;
	color:%DISABLED_TEXT%;
	background-color:%DISABLED_BACKGROUND%;
}
.twikiInputField,
.twikiSelect {
	border-color:%INPUT_FIELD_BORDERS%;
	color:%MAIN_TEXT_COLOR%;
	background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiInputFieldDisabled {
	color:%MUTED_TEXT%;
}

/*	-----------------------------------------------------------
	Plugin elements
	-----------------------------------------------------------	*/

/* TablePlugin */
.twikiTable,
.twikiTable td {
	border-color:%TABLE_BORDER%;
}
.twikiTable th {
	border-color:%TABLE_BORDER% %MAIN_BACKGROUND_COLOR%;
}
.twikiTable th a:link,
.twikiTable th a:visited,
.twikiTable th a font {
	color:%LINK_TEXT_NORMAL_TABLE_HEADER%;
}

/* TwistyContrib */
.twistyPlaceholder {
	color:%GRAYED_OUT_TEXT%;
}
a:hover.twistyTrigger {
	color:%LINK_TEXT_HOVER%;
}

/* TipsContrib */
.tipsOfTheDay {
	background-color:%INFO_BACKGROUND%;
}
.patternTopic .tipsOfTheDayHeader {
	color:%STRONG_TEXT%;
}
/* TipsContrib - in left bar */
#patternLeftBar .tipsOfTheDay a:link,
#patternLeftBar .tipsOfTheDay a:visited {
	color:%HEADER_TEXT%;
}
#patternLeftBar .tipsOfTheDay a:hover {
	color:%LINK_TEXT_HOVER%;
}

/* RevCommentPlugin */
.revComment .patternTopicAction {
	background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
}

/*	-----------------------------------------------------------
	TWiki styles
	-----------------------------------------------------------	*/

.twikiGrayText {
	color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:link,
.twikiGrayText a:visited {
	color:%GRAYED_OUT_TEXT%;
}
.twikiGrayText a:hover {
	color:%LINK_TEXT_HOVER%;
}

table.twikiFormTable th.twikiFormTableHRow,
table.twikiFormTable td.twikiFormTableRow {
	color:%MUTED_TEXT%;
}
.twikiEditForm {
	color:%MAIN_TEXT_COLOR%;
}
.twikiEditForm .twikiFormTable,
.twikiEditForm .twikiFormTable th,
.twikiEditForm .twikiFormTable td {
	border-color:%TABLE_BORDER_LIGHT%;
}
/* use a different table background color mix: no odd/even rows, no white background */
.twikiEditForm .twikiFormTable td  {
	background-color:%TABLE_DATA_MIX_BACKGROUND%;
}
.twikiEditForm .twikiFormTable th {
	background-color:%TABLE_DATA_ODD_BACKGROUND%;
}
.patternContent .twikiAttachments,
.patternContent .twikiForm {
	background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
	border-color:%SEPARATOR_BORDER%;
}
.twikiAttachments table,
table.twikiFormTable {
	border-color:%LAYOUT_ELEMENT_BORDER%;
	background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments table {
	background-color:%MAIN_BACKGROUND_COLOR%;
}
.twikiAttachments td, 
.twikiAttachments th {
	border-color:%LAYOUT_ELEMENT_BORDER%;
}
.twikiAttachments .twikiTable th font,
table.twikiFormTable th.twikiFormTableHRow font {
	color:%LINK_TEXT_NORMAL%;
}

.twikiFormSteps {
	background-color:%ACTIVE_FORM_BACKGROUND%;
	border-color:%SEPARATOR_BORDER%;
}
.twikiFormStep {
	border-color:%SEPARATOR_BORDER%;
}
.twikiFormStep h3,
.twikiFormStep h4 {
	background-color:transparent;
}
.twikiToc .twikiTocTitle {
	color:%MUTED_TEXT%;
}
.twikiBroadcastMessage {
	background-color:yellow;
}
.twikiBroadcastMessage b,
.twikiBroadcastMessage strong {
	color:%ALERT_TEXT%;
}
.twikiAlert,
.twikiAlert code {
	color:%ALERT_TEXT%;
}
.twikiEmulatedLink {
	color:%LINK_TEXT_NORMAL%;
}
.twikiPageForm table {
	border-color:%TABLE_BORDER%;
	background:%MAIN_BACKGROUND_COLOR%;
}
.twikiPageForm hr {
	border-color:%FORM_BORDER%;
	background-color:%FORM_BORDER%;
	color:%FORM_BORDER%;
}
.twikiHelp {
	background-color:%INFO_BACKGROUND%;
	border-color:%INFO_BORDER%;
}
.twikiAccessKey {
	color:inherit;
	border-color:%GRAYED_OUT_TEXT%;
}
a:link .twikiAccessKey,
a:visited .twikiAccessKey,
a:hover .twikiAccessKey {
	color:inherit;
}


/*	-----------------------------------------------------------
	Pattern skin specific elements
	-----------------------------------------------------------	*/
#patternPage {
	background-color:%MAIN_BACKGROUND_COLOR%;
}
/* Left bar */
#patternLeftBarContents {
	color:%MUTED_TEXT%;
}
#patternLeftBarContents .patternWebIndicator {
	color:%GENERAL_TEXT%;
}
#patternLeftBarContents .patternWebIndicator a:link,
#patternLeftBarContents .patternWebIndicator a:visited {
	color:%GENERAL_TEXT%;
}
#patternLeftBarContents .patternWebIndicator a:hover {
	color:%LINK_TEXT_HOVER%;
}
#patternLeftBarContents hr {
	color:%SEPARATOR_BORDER%;
	background-color:%SEPARATOR_BORDER%;
}
#patternLeftBarContents a:link,
#patternLeftBarContents a:visited {
	color:%SIDE_BAR_LINK_TEXT%;
}
#patternLeftBarContents a:hover {
	color:%LINK_TEXT_HOVER%;
}
#patternLeftBarContents b,
#patternLeftBarContents strong {
	color:%STRONG_TEXT%;
}
#patternLeftBarContents .patternChangeLanguage {
	color:%GRAYED_OUT_TEXT%;
}
#patternLeftBarContents .patternLeftBarPersonal {
	background-color:%SIDE_BAR_PERSONAL_BACKGROUND%
}
#patternLeftBarContents .patternLeftBarPersonal a:link,
#patternLeftBarContents .patternLeftBarPersonal a:visited,
#patternLeftBarContents .twikiHierarchicalNavigation a:link,
#patternLeftBarContents .twikiHierarchicalNavigation a:visited {
	color:%LINK_TEXT_NORMAL%;
}
#patternLeftBarContents .patternLeftBarPersonal a:hover,
#patternLeftBarContents .twikiHierarchicalNavigation a:hover {
	color:%LINK_TEXT_HOVER%;
	background-color:%LINK_BACKGROUND_HOVER%;
}
#patternLeftBarContents .twikiHierarchicalNavigation {
	background:%MAIN_BACKGROUND_COLOR%;
}
.patternTopicActions {
	border-color:%SEPARATOR_BORDER%;
}
.patternTopicAction {
	color:%MUTED_TEXT%;
	border-color:%SEPARATOR_BORDER%;
	background-color:%TOPIC_ACTION_BACKGROUND%;
}
.patternTopicAction s,
.patternTopicAction strike {
	color:%DISABLED_TEXT%;
}
.patternTopicAction .twikiSeparator {
	color:%SEPARATOR_BORDER%;
}
.patternActionButtons a:link,
.patternActionButtons a:visited {
	color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternActionButtons a:hover {
	color:%LINK_TEXT_HOVER%;
}
.patternTopicAction .twikiAccessKey {
	color:%LINK_TEXT_ACTION_BUTTON%;
	border-color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternTopicAction label {
	color:%GENERAL_TEXT%;
}
.patternHelpCol {
	color:%GRAYED_OUT_TEXT%;
}
.patternFormFieldDefaultColor {
	/* input fields default text color (no user input) */
	color:%GRAYED_OUT_TEXT%;
}

.patternToolBar .patternButton s,
.patternToolBar .patternButton strike,
.patternToolBar .patternButton a:link,
.patternToolBar .patternButton a:visited {
	border-color:%SEPARATOR_BORDER%;
	background-color:%GENERAL_BACKGROUND%;
}
.patternToolBar .patternButton a:link,
.patternToolBar .patternButton a:visited {
	color:%MUTED_TEXT%;
}
.patternToolBar .patternButton s,
.patternToolBar .patternButton strike {
	color:%DISABLED_TEXT%;
	border-color:%DISABLED_BORDER%;
}
.patternToolBar .patternButton a:hover {
	background-color:%LINK_BACKGROUND_HOVER%;
	color:%LINK_TEXT_HOVER%;
	border-color:%LINK_TEXT_ACTION_BUTTON%;
}
.patternToolBar .patternButton img {
	background-color:transparent;
}	
.patternToolBarBottom {
	border-color:%SEPARATOR_BORDER%;
}
.patternToolBar a:link .twikiAccessKey,
.patternToolBar a:visited .twikiAccessKey {
	color:inherit;
	border-color:%MUTED_TEXT%;
}
.patternToolBar a:hover .twikiAccessKey {
	background-color:transparent;
	color:inherit;
}

.patternRevInfo,
.patternRevInfo a:link,
.patternRevInfo a:visited {
	color:%GRAYED_OUT_TEXT%;
}
.patternRevInfo a:hover {
	color:%LINK_TEXT_HOVER%;
}

.patternMoved,
.patternMoved a:link,
.patternMoved a:visited {
	color:%GRAYED_OUT_TEXT%;
}
.patternMoved a:hover {
	color:%LINK_TEXT_HOVER%;
}
.patternSaveHelp {
	background-color:%MAIN_BACKGROUND_COLOR%;
}

/* WebSearch, WebSearchAdvanced */
table#twikiSearchTable th,
table#twikiSearchTable td {
	background-color:%GENERAL_BACKGROUND%;
	border-color:%TABLE_BORDER%;
} 
table#twikiSearchTable th {
	color:%MAIN_TEXT_COLOR%;
}
table#twikiSearchTable td.first {
	background-color:%TOPIC_ACTION_BACKGROUND%;
}

/*	-----------------------------------------------------------
	Search results
	styles and overridden styles used in search.pattern.tmpl
	-----------------------------------------------------------	*/

h3.patternSearchResultsHeader,
h4.patternSearchResultsHeader {
	background-color:%ATTACHMENT_AND_FORM_BACKGROUND%;
	border-color:%LAYOUT_ELEMENT_BORDER%;
}
h4.patternSearchResultsHeader {
	color:%MAIN_TEXT_COLOR%;
}
.patternNoViewPage h4.patternSearchResultsHeader {
	color:%HEADER_TEXT%;
}
.patternSearchResult .twikiBottomRow {
	border-color:%TABLE_BORDER%;
}
.patternSearchResult .twikiAlert {
	color:%ALERT_TEXT%;
}
.patternSearchResult .twikiSummary .twikiAlert {
	color:%ALERT_TEXT_MUTED%;
}
.patternSearchResult .twikiNew {
	background-color:%NEW_BACKGROUND%;
	border-color:%NEW_TEXT%;
	color:%NEW_TEXT%;
}
.patternViewPage .patternSearchResultsBegin {
	border-color:%TABLE_BORDER%;
}

/* Search results in book view format */

.patternBookView .twikiTopRow {
	background-color:transparent; /* set to WEBBGCOLOR in css.pattern.tmpl */
	color:%MUTED_TEXT%;
}
.patternBookView .twikiBottomRow {
	border-color:%TABLE_BORDER%;
}
.patternBookView .patternSearchResultCount {
	color:%GRAYED_OUT_TEXT%;
}

/* oopsmore.pattern.tmpl */

table.patternDiffOptions img {
	border-color:%LAYOUT_ELEMENT_BORDER%;
}

/* edit.pattern.tmpl */

.twikiChangeFormButton .twikiButton,
.twikiChangeFormButtonHolder .twikiButton { /* looks like a link */
	color:%LINK_TEXT_NORMAL%;
	background:none;
}
.patternSig input {
	color:%GRAYED_OUT_TEXT%;
	background-color:%MAIN_BACKGROUND_COLOR%;
}

/* preview.pattern.tmpl */

.patternPreviewArea {
	border-color:%ALERT_BORDER%;
	background-color:%MAIN_BACKGROUND_COLOR%;
}

/* rdiff.pattern.tmpl */

.patternDiff {
	border-color:%TABLE_HEADER_BACKGROUND%;
}
.patternDiff h4.patternSearchResultsHeader {
	background-color:%TABLE_HEADER_BACKGROUND%;
	color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
.patternDiff h4.patternSearchResultsHeader a:link,
.patternDiff h4.patternSearchResultsHeader a:visited {
	color:%LIGHT_ON_DARK_TEXT_COLOR%;
}
tr.twikiDiffDebug td {
	border-color:%TABLE_BORDER%;
}
.patternDiffPage .twikiDiffTable th {
	background-color:%DIFF_HEADER_BACKGROUND%;
}
/* Changed */
.twikiDiffChangedHeader,
tr.twikiDiffDebug .twikiDiffChangedText,
tr.twikiDiffDebug .twikiDiffChangedText {
	background:#9f9; /* green - do not change */
}
/* Deleted */
.twikiDiffDeletedHeader,
tr.twikiDiffDebug .twikiDiffDeletedMarker,
tr.twikiDiffDebug .twikiDiffDeletedText {
	background-color:#f99; /* red - do not change */
}
/* Added */
.twikiDiffAddedHeader,
tr.twikiDiffDebug .twikiDiffAddedMarker,
tr.twikiDiffDebug .twikiDiffAddedText {
	background-color:#ccf; /* violet - do not change */
}
/* Unchanged */
tr.twikiDiffDebug .twikiDiffUnchangedText {
	color:%GRAYED_OUT_TEXT%;
}
.twikiDiffUnchangedTextContents { }
.twikiDiffLineNumberHeader {
	background-color:%DIFF_HEADER_BACKGROUND%;
}


/* IMAGES */
/* image positions are set here as well as these are dependent on the image */

.twikiInputField {
	background-image:url(background_input.gif);
	background-repeat:repeat-x;
}
.twikiInputFieldDisabled {
	background-image:none;
	border:none;
}
.twikiButton {
	background-image:url(background_button.gif);
	background-repeat:repeat-x;
}
.patternToolBarButtons .patternButton a {
	/*
	background-image:url(background_button.gif);
	background-repeat:repeat-x;
	*/
}
.twikiSubmit {
	background-image:url(background_submit.gif);
	background-repeat:repeat-x;
}
.twikiSubmitDisabled {
	background-image:none;
}
.twikiToc li {
	background-image:url(bullet-child-black.gif);
	background-repeat:no-repeat;
	background-position:0 .35em;
}
/*#patternLeftBarContents .patternLeftBarPersonal,*/
#twikiLogin,
#patternLeftBarContents .tipsOfTheDayContents {
	background-image:url(gradient_blue.gif);
	background-repeat:repeat-x;
}
#patternOuter {
	/* gradient yellow of left bar and main */
	background-image:url(gradient_yellow.gif);
	background-repeat:repeat-x;
}
.patternPrintPage #patternOuter {
	background:#fff; /* white - do not change */
}
.twikiPageForm table {
	background-image:url(form_gradient.gif);
	background-repeat:repeat-x;
}


/* commong settings */
.patternLeftBarPersonal li,
.twikiHierarchicalNavigation .twikiChildTopics li,
.twikiHierarchicalNavigation .twikiParentTopic li,
li.patternLogOut,
li.patternLogIn {
	padding-left:13px;
	background-position:0 .25em;
	background-repeat:no-repeat;
}
.patternLeftBarPersonal li,
.twikiHierarchicalNavigation .twikiChildTopics li {
	background-image:url(bullet-blue.gif);
}
.twikiHierarchicalNavigation .twikiParentTopic li {
	background-image:url(bullet-parent.gif);
}
.patternLeftBarPersonal li.patternLogOut {
	background-image:url(bullet-lock.gif);
}
.patternLeftBarPersonal li.patternLogIn {
	background-image:url(bullet-lock.gif);
}
%ENDATTACH%
</verbatim>