/*
 * Global page properties and redefined tags.
 */
body {
	color: white; 
	background: black;
}

h1 {
	font-size: 1.2em;
	color: blue;
}

h2 {
	font-size: 1em;
	color: blue;
}

/*
 * Redefine table tag to display small text (10pt) inside tables.
 * This attribute (font-size) does not seem to be inherited so
 * the tag must be redefined.
 */
table {
	font-size: 10pt;
	border-spacing: 0;	/* NOT SUPPORTED BY IE. use border-collapse. */
	border-collapse: collapse;
	border-style: none;
	empty-cells: show;
	vertical-align: top;
	padding: 0;
}

/*
 * Page layout
 *
 * The page is divided into a 3x3 matrix as shown below:
 *
 *	logo	|	Banner		| Empty
 *	---------------------------------------
 *	blocks	|	Main area	| More
 *		|	for text.	| blocks
 *	--------|-----------------------|------
 *		footer (powered by Mati)
 *	---------------------------------------
 *		trailer (powered by PHP)
 *
 * This implies, three columns (left, right, center).
 * NOTE: trailer is outside the page layout table and has
 * no class.
 *
 */

/*
 * The main table that defines the layout above. Currently
 * has the same attributes as the rest of the page
 * (body and table tags).
 */
table.page {
}

/* Left column. All attributes are same as the page table. */
td.leftcol {
	vertical-align: top;
}

/* Right column. All attributes are same as the page table. */
td.rightcol {
	vertical-align: top;
}

/* The central area */
td.mainarea {
	padding: 1em;
	vertical-align: top;
	text-align: left;
}

/*
 * The footer: cell, row, or table. 
 * Uses smaller text.
 *
 * NOTE: Currently unused in code.
 */
*.footer {
	vertical-align: top;
	text-align: center;
	font-size: 0.9em;
}

/*
 * Tab support
 *
 * Tables are used to simulate tabbed layout of information. Multiple tabs can
 * be created, with a tab being either a foreground or background tab.
 * Color etc of each will be different.
 * The following cell (td) classes define foreground, background tab cells
 * as well as the main cell that carries the foreground text.
 *
 * IE Quirk: Use border-width: 1. Keyword 'thin' doesn't seem to work.
 */
/* Foreground tab, title cell */
td.tab_fg {
	background: orange;
	border-style: solid;
	border-width: 1;
	padding: 0.1em;
}

/* Background tab, title cell */
td.tab_bg {
	background: lightblue;
	border-style: solid;
	border-width: 1;
	padding: 0.1em;
}

/* Foreground tab, text cell. */
td.tab_main {
	border-style: solid;
	border-width: 1;
	margin: 1em;
}

/* Error message style. */
div.errormsg {
	background: red;
	border-style: solid;
	border-width: 1;
	padding: 0.1em 0.5em;
}

/* Single line status messages are printed in this style. Usually used to
 * indicate success of an operation. */
div.statusmsg {
	padding: 0.2em 0.5em;
	background: blue;
}

/*
 * Multi-entry display tables
 *
 * These tables are used to display multiple entries, such as the results from
 * a search. The format of these tables is:
 * 
 * ----------- Heading row (multiple cells) ---------
 * +++++++++++++ Data row (multiple cells) ++++++++++ 
 *
 * This 'list' class of table elements defines a table with:
 * - A green background
 * - lightgreen title row with bold black text
 * - Solid border around the table/list, no border between elements.
 * - left aligned text in all rows.
 */

/* 
 * The parent/enclosing table. The color here specifies the color of the 
 * element rows.
 */
table.list {
	background: green;
	border-style: solid;
	border-width: 1;
	text-align: left;
	vertical-align: middle;
}

/* Heading/title row contents: lightgreen background, bold black text.
 * This style can be applied to the entire row, or to individual cells. */
thead.listhead, tr.listhead, th.listhead {
	color: black;
	background: lightgreen;
	font-weight: bold;
}

/* Data row: Currently no different formatting. */
tbody.listdata, tr.listdata {
}

/*
 * Form entry tables
 *
 * Form entry tables are used to allow user input of multiple fields. The
 * table will be organized as follows:
 * 
 * |------------------------------------|
 * |		Title cell		|
 * |------------------------------------|
 * | Description |++++++++ Input +++++++|
 * |------------------------------------|
 * | Description |++++++++ Input +++++++|
 * |------------------------------------|
 * | Description |++++++++ Input +++++++|
 * |------------------------------------|
 *
 * The different table cell classes are defined below.
 * NOTE: The input cell does not need a separate class but one may be defined.
 */
/* Title cell */
td.form_title {
	background: lightgreen;
	text-align: center;
	color: black;
}

/* Description cell */
td.form_field {
	background: lightgray;
	color: black;
}

/* Form entry cell containing the actual input tag. */
td.form_input {
}

/*
 * Blocks
 */
table.sideblock {
	border-style: solid;
	border-color: #660000;
	border-width: 1;
	margin: 0.5em;
}

/* The title of the sideblock. */
div.sideblocktitle {
	border-color: #660000;
	border-style: solid;
	border-width: 1;
	font-weight: bold;
	margin: 0.5em;
	padding: 0.1em 0.5em;
}

/* The contents of the sideblock */
div.sideblockcontent {
	border-style: solid;
	border-width: 1;
	border-color: #660000;
	margin: 0.5em;
	padding: 0.5em 0.5em;
}

table.mainblock {
	margin: 0.5em 0em;	/* Allow spacing between boxes. */
	border-style: solid;
	border-width: 1;
}

td.mainblocktitle {
	background: gray;
	font-size: 150%;
	border-style: none none solid none;
	padding: 0.1em 5pt;
}

td.mainblockcontent {
	margin: 0.5em;
	padding: 0.5em 5pt;
	border-style: none;
}

/*
 * Thumbnail table definition for the POP module.
 * Defines tables as having no borders, but each cell will have a border.
 * Text and photos are aligned in the center of each cell.
 */
table.thumbnails {
	width: 100%;
	border-style: none;
	text-align: center;
	empty-cells: hide;
}

td.thumbnails {
	vertical-align: top;
	border-style: solid;
	border-width: 1;
}