
All about the supplied CMX Themes
=================================

All themes are suitable for use with either the default CumulusMX 
website or the CumulusMX Alternative Interface.

They should be placed in the css folder for the required site.  You can 
then follow the instructions below to make them the default colour 
scheme for your site.

The Default Website
===================

1.	Upload your chosen theme(s) to the css folder on your remote site.
2.	Rename the existing 'colours.css' file.  This ensures that it is 
	available in the future, should you wish to revert to it.
3.	Rename your chosen CumulusMX theme to 'colours.css'. Please ensure 
	that it is exactly the same - no capitals.

You published website will now use your chosen theme stylesheet for all 
pages.

The Alternative Interface
=========================

All the themes are available as part of the AI package so to choose an 
alternative colour theme follow these instructions.

1.	Use the AI Settings page to view the available colour themes.  This 
	is done by selecting a theme and clicking the 'View on this Page' 
	button. 
2.	Make any other adjustments for the header, footer and space between 
	them and the body of the page.
3.	To make it permenant (until you change your mind), click the button 
	'Use for all pages'.

Even if you shut your computer down, your chosen colour them will be 
used for the AI.

If you want to change it later just follow the same 3 steps again.  You 
can also revert back to the default colour scheme by using the 'Restore 
default' button.

Available Theme Styles
======================

All themes include 11 theme colour variations for background, 
foreground and border colours.  You also get 11 independant text, border 
and hover variations of those colours.  However, the border hover 
colours are only availabel as theme, light and dark variations.

The style names available are:

Text & Background	Text & Background Hover		Text Only			Border only
-----------------	-----------------------		---------			-----------
w3-theme-light,		w3-theme-light-hvr			w3-theme-light-txt	w3-theme-light-bdr
w3-theme-l5,		w3-theme-l5-hvr				w3-theme-l5-txt		w3-theme-l5-bdr
w3-theme-l4,		w3-theme-l4-hvr				w3-theme-l4-txt		w3-theme-l4-bdr
w3-theme-l3,		w3-theme-l3-hvr				w3-theme-l3-txt		w3-theme-l3-bdr
w3-theme-l2,		w3-theme-l2-hvr				w3-theme-l2-txt		w3-theme-l2-bdr
w3-theme-l1,		w3-theme-l1-hvr				w3-theme-l1-txt		w3-theme-l2-bdr
w3-theme,			w3-theme-hvr				w3-theme-txt		w3-theme-bdr
w3-theme-d1,		w3-theme-d1-hvr				w3-theme-d1-txt		w3-theme-d1-bdr
w3-theme-d2,		w3-theme-d2-hvr				w3-theme-d2-txt		w3-theme-d2-bdr
w3-theme-d3,		w3-theme-d3-hvr				w3-theme-d3-txt		w3-theme-d3-bdr
w3-theme-d4,		w3-theme-d4-hvr				w3-theme-d4-txt		w3-theme-d4-bdr
w3-theme-d5,		w3-theme-d5-hvr				w3-theme-d5-txt		w3-theme-d5-bdr
w3-theme-dark,		w3-theme-dark-hvr			w3-theme-dark-txt	w3-theme-dark-bdr

w3-theme-white:			Gives a dark text on a white background
w3-theme-action:		Gives mid-light text and mid-dark background
w3-theme-action-hvr:	A hover style that reverses text & background 
						colours used with the w3-theme-action style.

TEXT only HOVER styles			BORDER only HOVER styles
----------------------			------------------------
w3-theme-light-txt-hvr			w3-theme-light-bdr-hvr
w3-theme-l5-txt-hvr				w3-theme-l5-bdr-hvr
w3-theme-txt-hvr				w3-theme-bdr-hvr
3-theme-d5-txt-hvr				w3-theme-d5-bdr-hvr
w3-theme-dark-txt-hvr			w3-theme-dark-bdr-hvr


In all cases above, light is the same as 'l5', and dark the same as 'd5'.

MODAL Window Background
.at-theme-modal {
	background-color: var(--theme);
	background-color: var(--modal);
}

This style is semi-transparent and is used behind modal windows.
