/* 
	This stylesheet controls standard site wide styles including the header and footer.
	Every asp and htm page should include this BEFORE any page or localised stylesheets.
	Header and Footer styles are prefixed as with "header" and "footer"
*/



/* DEFAULT GLOBAL STYLE SETTINGS */

BODY
{
	font-family: Verdana;
	font-size:   0.7em;
}
TABLE
{
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	border: 0;
}
TH
{
	text-align: left;
}
IMG 
{
	 border: none;
}




/* The design requires a "Central/Fixed Width Layout" is provided by 
   BODY and DIV#container rules.
*/
BODY 
{
	text-align: center;
}

DIV#container
{
	width: 770px;
	margin: 0 auto;
	text-align: left;
	border: solid 1px #CCC;
}


/* 	PAGE LAYOUT: TWO COLUMN PAGE 
	This table is used to split a page into two columns:
	1) a small (25%) left column which will contain a menu and 
	2) a large (75) right column which contains the page content
	This style is used by the home page and many other sub-pages.
	It contains a 13px padding in each column.
	The two TD cells MUST contain id="pageleft" and "pageright"
*/

TABLE#twocolumnpage
{
	width: 100%;
}

TABLE#twocolumnpage TR TD#pageleft
{
	width: 25%;
	padding: 13px;
	vertical-align: top;
}

TABLE#twocolumnpage TR TD#pageright
{
	width: 75%;
	padding: 13px;
	border-left: solid 1px #DDD;
}



/* 	PAGE LAYOUT: SIMPLE PAGE 
	This is a simple page layout with no columns.
	It provides a 1em indent around the whole page.
*/

DIV#simplepage
{
	padding: 1.43em;
}




/* The radio input styles determine the padding and layout of input radio buttons and labels */
INPUT.RadioAnswer
{ 
	margin: 0.5em 0 0.5em 0.25em;
	vertical-align: middle;
}

/* Used by Form_Checkbox */
INPUT.disabled,
LABEL.disabled,
P.disabled INPUT,
P.disabled LABEL
{ 
	color: #888;
}

LABEL.RadioText
{
}


TABLE TR 
{
	vertical-align: top;
}



/* 
	OUTER FRAME TABLE
	This defines the outer table which holds the whole page.
	It must contain the attribute: id="outerframe".
	We fix this to 770px width and have no visible lines or any padding.
*/

TABLE#outerframe
{
}
/* 
	ADMIN OUTER FRAME TABLE
	This defines the outer table which holds the whole page.
	It must contain the attribute: id="outerframe".
	We fix this to 95% width and have no visible lines or any padding.
*/

TABLE#outerframeAdmin
{
	width: 95%;
	margin: 0px;
	padding: 0px;
	border: solid #AAA 1px;
}

/* Table with two columns of equal width */
TABLE.fiftyfifty, TABLE.quarters
{
	width: 95%;
	margin: 0px;
	padding: 0px;
}
TABLE.fiftyfifty TR TD, TABLE.fiftyfifty TR TH
{
	width: 50%;
}
TABLE.quarters TR TD, TABLE.quarters TR TH
{
	width: 25%;
}

/* 
	FORMs always seem to have a margin/padding associated by default but
	as this is a non-visual boundary, we
	want to remove any effect of a FORM element on the presentation
*/
FORM
{
	margin: 0px;
	padding: 0px;
}
INPUT
{
	margin: 0px;
	padding: 0px;
}
INPUT[type="button"], INPUT[type="submit"]
{
	padding-left:1em;
	padding-right:1em;
}

HR
{
	height: 1px;
	color: #CCC;
	background-color: #CCC;
	border: 0;
	margin: 0;
	padding: 0;
}


/*	DIV#header
	Header area presentation.
	Header is enclosed in a TABLE called "header" which spans 100%
	(ie. width of outer frame).
	Everything in the header should be fixed size (ie. use px not em)
*/
DIV#header
{
	width: 100%;
}
DIV#header DIV#header_row1		{ padding: 3px 12px; }
DIV#header DIV#header_row1_left	{ float: left; }
DIV#header DIV#header_row1_right{ text-align: right; }
DIV#header DIV#header_row2		{ background-color: #E0EBFF; padding: 3px 12px; clear: both; }
DIV#header DIV#header_row2_left	{ float: left;       }
DIV#header DIV#header_row2_right{ text-align: right; }
DIV#header DIV#header_5			{ clear: left; }

DIV#header .title1 { font-family: Arial; font-size: 2.14em; font-weight: bolder; color: #36F; margin: 0px; padding: 0px; }
DIV#header .title2 { font-family: Arial; font-size: 1.86em; font-weight: bold; color: #888; margin: 0px; padding: 0px; }
DIV#header .title3 { font-family: Verdana, Arial; font-size: 1em; font-weight: bold; color: #36F; margin: 2px 0px; padding: 0px; }
DIV#header .title4 { font-family: Verdana; font-size: 1em; }
DIV#header .title4 A { margin: 0; padding: 0; color: black; font-weight: bold; }


/*  
	.footer
	Footer area presentation.
	Footer is enclosed in a TABLE called "footer" which spans 100% (ie. width of outer frame).
*/

TABLE.footer { width: 100%; }

TABLE.footer A { color: #666; }

.footer0 { background-color: #CCC; padding: 3px 12px; }
.footer0 A { text-decoration: none; font-weight: bold; color: #666; }
.footer0 A:hover { text-decoration: underline; color: #333; }

TABLE.footer TD { padding: 10px 10px 10px 12px; vertical-align: middle; color: #999 }
TABLE.footer TD.footer2 { text-align: center; }
TABLE.footer TD.footer3 { text-align: right; }

DIV#footer DIV#footer_debug		{ clear: both; padding: 0 12px; text-align: left; vertical-align: bottom; font-family: Verdana; color: red; }



TABLE.results					{ width: 100%; border-color: #E5E5FF; }
TABLE.results TR				{ vertical-align: bottom; }
TABLE.results TR TD				{ width: 25%; padding: 2px 2px; text-align: left; vertical-align: middle; background-color: #E5E5E5; font-size: 0.90em; font-family: Arial,Verdana; border-color: Gray;  }
TABLE.results TR TD.header		{ background-color: #E5E5FF; font-weight: bold;  }
TABLE.results TR TD.title		{ font-weight: bold; }

H1, 
P.heading, 
TD.heading
{
	margin-top: 14px;
	margin-bottom: 8px;
	padding: 0px;
	font-family: Verdana, Arial;
	font-size: 1em;
	font-weight: bold;	
	color: black;	
	
}
/* Most of the time H1 is the first child and will automatically lose its top margin.
   If content is inserted above the main H1 (e.g. Filters in the Report screens that to float to the right)
   Then we must explicitly state that we want to lose the top margin (.mainheading) is it will no longer 
   be the first child */
H1:first-child, /* implicit */
H1.mainheading, /* explicit */
P.heading:first-child
{
	margin-top: 0;
}

H2, P.heading2, 
TD.heading2, TH.heading2
{
	margin-top: 14px;
	margin-bottom: 12px;
	font-size: 1em;
	font-weight: bold;
	color: #838383;
}
TH.heading2
{
	padding-top: 0em;
}




/* fieldname refers to the text that names a field (such as "UserID" or "Password") */
P.fieldname
{
	margin: 12px 0 4px 0;
	font-weight: bold;
}


/* fieldlabel refers to the field text (such as "UserID" or "Password") */
P.fieldlabel
{
	margin: 2px 2px 4px 0;
}

/* fieldcomment is an assoicated comment to go with a field description and input.  This can
be used as a spen within the "fieldname" or as a separate <P> following the input area */
P.fieldcomment
{
	margin: 0px 0px 2px 0;
	font-family: Verdana;
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
}
SPAN.fieldcomment
{
	font-family: Verdana;
	font-size: 1em;
	font-weight: normal;
}
/* Used in ConfigGroupsAdd */
DIV.checkboxlist .fieldname
{
	font-weight: normal;
	margin: 0.25em;
}

/* Comment DIV field within a table -- Initially hidden, its containing table row alternates between visible and hidden.
	Made visible using JS function "OnShowComment" */
DIV.CommentField
{
	margin: 0 2em;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background-color: White;
	border: 1px solid black;
}

/* errorfield standard style for reporting validation errors */
P.errorfield
{
	margin: 2px;
	font-weight: bold;
	color: red;
}
H1.errorfield
{
	color: Red;
}
/* Used to report system errors such as filed emails */
P.syserror
{
	text-align: left;
	border: solid 1px black;
	padding: 12px;
	font-family: Courier New, Monospace;
	font-size: 12pt;
	background-color: Red;
	color: Black;
}
/* success standard style for reporting a successful event such as an update, add or delete 
This style is very customised at present (used in ConfiUWA.asp) and should be generaled once
more pages are properly validated and fed back
*/
P.success, 
H1.success
{
	font-weight: bold;
	color: blue;
}



/* 
 *	Menu presentation provided by a collection of divs.
 *	Each div may contain text or an anchor
 */

/* Base text size for whole menu */
DIV#menu
{
}
/* Default style of TEXT at all three levels */
DIV#menu DIV, 
DIV#menu DIV DIV, 
DIV#menu DIV DIV DIV
{
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/* Default style of LINK TEXT at all three levels */
DIV#menu DIV A:link, 
DIV#menu DIV DIV A:link, 
DIV#menu DIV DIV DIV A:link,
DIV#menu DIV A:visited, 
DIV#menu DIV DIV A:visited, 
DIV#menu DIV DIV DIV A:visited
{
	font-size: 1.0em;
	margin: 0;
	padding: 0;
	font-weight: normal;
	text-decoration: none;
}
DIV#menu DIV A:hover, 
DIV#menu DIV DIV A:hover, 
DIV#menu DIV DIV DIV A:hover
{
	text-decoration: underline;
}
/* Level 0 customisation*/
DIV#menu > DIV:first-child
{
}
/* Level 1 customisation */
DIV#menu DIV
{
	color: #FF8000;
}

DIV#menu DIV A:link, DIV#menu DIV A:visited
{
	font-weight: bold;
	color: #FF8000;
}

/* Level 2 customisation */
DIV#menu div div
{
	margin-left: 1.5ex;
	color: #2370C8;
}
DIV#menu DIV DIV A:link, DIV#menu DIV DIV A:visited
{
	color: #2370C8;
}
/* Level 3 customisation */
DIV#menu div div div
{
	margin-left: 0.5ex;
	color: #2370C8;
}
DIV#menu DIV DIV DIV A:link, DIV#menu DIV DIV DIV A:visited
{
	color: #2370C8;
}
SPAN.todo { color: Red; font-weight: bold; margin-left: 0.2em; }
SPAN.todo IMG { height: 0.9em; }


P.body A:link,
P.body A:visited
{
	font-family: Verdana;
}

/* Turns objects blue including their anchors */
.blue, 
.blue A:link, 
.blue A:visited
{
	/* Matches colour of menu - try to keep the same when changing */
	color: #2370C8;
}

/* Turns objects black including their anchors */
.black, 
.black A:link,
.black A:visited
{
	color: Black;
}

/* Paragraph to contain Cancel, Update, Add buttons */
P.submit
{
	text-align: right;
	margin: 1em 4px 0px 2px;
}
P.submit INPUT
{
	min-width: 80px;
}

IMG.info
{ 
	width: 15px;
	height: 15px;
	vertical-align: middle;
	margin-left: 5px;
}

P.adminlogin
{
	margin: 0px 14px;
	padding: 0px;
	text-align: right;
}
P.adminlogin A
{
	font-family: Arial,Verdana;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;	
	color: #888;
}


.right
{
	float: right;
	margin: 0;
}

.left
{
	float: left;
	margin: 0;
}
.clearleft
{
	clear: left;
}
.clearright
{
	clear: right;
}
.clear
{
	clear: both;
}



/* 
	ACTION BAR
*/
DIV.actionbar
{
	background-image: url(../images/bluegradient.png);
	background-repeat: repeat-x;
	background-color: #76B2D8;
	padding: 0 0.20em;
	margin-top: 0.5em;
	margin-bottom: 1px; /* Join onto table below */
	min-height: 22px; /* set a minimum height (instances may or may not have a DDL, so ensure there is height. */
}
DIV.actionbar:after
{
	/* This is the clearfix fix for IE6.  It ensures the actionbar's div when contianing float elemetns
	doesn't reduce to 0 height.
	It also means you don't require a <div style='clear:both:'></div> following the actionbar.
	Note: An IE6 tweak is also in commonIE.css */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
DIV.actionbar A
{
	color: Black;
	padding: 1px 4px;
	border: solid 1px transparent;
}
DIV.actionbar A:hover
{
	background-color: White;
	padding: 1px 4px;
	border: solid 1px black;
	text-decoration: none;
}
DIV.actionbar P
{
	padding: 0.25em;
	margin: 0;
}
DIV.actionbar SELECT
{
	font-size: 0.8em;
}
P.actionbar
{
	margin-top: 1em;
}

SELECT.small,
INPUT.small
{
	font-size: 0.8em;
}




/* 
	GRAY WITH BLUE SIDE PANEL 
	(ref ConfigEmailTemplatesEdit.asp) 
*/
TABLE.greyblue
{
	margin: 0;
	width: 100%;
}

TABLE.greyblue TD.grey
{
	background-color: #eeeeee;
	border: solid 1px black;
	width: 70%;
	padding: 0.5em;
	
}

TABLE.greyblue TD.blue
{
	background-color: #dfeef9;
	width: 30%;
	padding: 0.25em;
}

TABLE.greyblue H2
{
	margin-top: 0em;
	margin-bottom: 0em;
}





/* 
	SIDE PANEL BOX 
	(ref UserBulkEmailCustom.asp)
*/
DIV.insertbox
{
	border: solid 1px #809ed6;
	margin: 0.5em;
	padding: 0;
}
DIV.insertbox H2
{
	background-color: #a0c6e5;
	margin: 0;
	padding: 3px 6px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 0.8em;
	color:Black;
}
DIV.insertbox P
{
	background-color: White;
	padding: 3px 6px;
	border: 0;
	margin: 0;
}
DIV.insertbox P.line
{
	border-top: solid 1px #809ed6;
}





/* 
	STRIPEY TABLE
*/
TABLE.stripey
{
	width: 100%;
}
TABLE.stripey TR
{
	background-color: #e4e4e4;
}
TABLE.stripey TR.header
{
	background-color: #E0EBFF;
	border-bottom: solid 1px white;
}
TABLE.stripey TH, TABLE.stripey TD
{
	border-left: solid 1px white;
	padding: 2px 3px;
}
TABLE.stripey TH A, TABLE.stripey TD A
{
	color: blue;
}
TABLE.stripey TH:first-child, TABLE.stripey TD:first-child
{
	border-left: none;
}
TABLE.stripey TR.header TH
{
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}

TABLE.stripey TH A
{ 
	color: black;
}

TABLE.stripey TH A.blue
{ 
	color: blue;
}

TABLE.stripey TR.alt
{
	background-color: #f2f2f2;
}

TABLE.stripey TR.pagebar TD
{
	border: none;
	border-top: solid 2px white;
	background-color: #E0EBFF;	
	padding-top: 0.35em; /* to match TR.header */
	padding-bottom: 0.35em;
}
TABLE.stripey TR.totalbar TD
{
	border: none;
	border-top: solid 1em white;
	background-color: #E0EBFF;	
	padding-top: 0.35em; /* to match TR.header */
	padding-bottom: 0.35em;
}

.c { text-align: center; }
.l { text-align: left; }
.r { text-align: right; }
.nowrap { white-space:nowrap }
tr.middle { vertical-align:middle; }

/* Block that holds "paging" for a table - see vbsUpload */
DIV.pagebar
{
	text-align: center;
}

/* Disabled table cells are faded. */
TD.disabled    { color: #AAA; }
TR.disabled TD { color: #AAA; }





/* AtoZ: First Name/Surname A to Z selector bar. Links are forced to normal blue.  Current Selection is bold black. */
SPAN.AtoZ
{
	font-weight: bold;
	color: black;
}
SPAN.AtoZ A
{
	font-weight: normal;
	color: blue;
}
SPAN.AtoZ A:visited
{
	color: blue;
}




/* Detailed user reports -- printing style */

@media print 
{
	DIV#header,
	DIV#footer,
	P.submit,
	.noprint,
	TABLE.stripey TR.pagebar
	{
		display: none;
	}
	
	DIV#container
	{
		border: 0;
	}
	DIV#simplepage
	{
		width: 80%;
	}
	DIV.actionbar
	{
		display: none;
	}
}



SPAN.m
{
	color: Red;
	font-weight: bold;
	font-family: Courier;
	vertical-align: top; 
	
}

/* Separates heading with a black line */
H1.headersep, H2.headersep
{
	margin-top: 1em;
	padding-top: 1em;
	border-top: solid 2px #CCC;
}

PRE
{
	font-family: Courier New;
	font-size: 1em;
	display: block;
}

DIV.AcceptWarn
{
	margin-top: 1em;
	margin-bottom: 1em;
	padding: 0.25em;
	background-color: #FFFF99;
	border: 1px solid black;
	font-family: Verdana;
	color: red;
}

DIV.AcceptWarn H1,
DIV.AcceptWarn P
{
	padding: 0.25em;
	margin: 0;
	color: red;
}
P.proxy a
{
	 border: solid 1px black; 
	 padding: 2px 6px;
	 background-color: yellow; 
	 color: red; 
	 text-decoration: none;
}

.nodisplay
{
	display: none;
}

UL.spaced LI,
OL.spaced LI
{
	margin-top: 1em;
	margin-bottom: 1em;
}





/* Filter Table - As used in ConfigUsers.asp etc. */
TABLE.FilterTable
{
	/* should have float right here but IE6 doesn't apply it so separate right class should be added on TABLE also! */
}
TABLE.FilterTable TH
{
	padding: 0 0 0 0.5em;
}
TABLE.FilterTable TD
{
	padding: 0 0 0.5em 0.5em;
}
TABLE.FilterTable SELECT
{
	font-size: 0.9em;
}

/* IE fix items */
INPUT.btn { }
.ie-heading-top-fix { }
.ie-checkbox-fix { }


/* UWA Status */
.highrisk
{
	color: Red;
	font-weight: bold;
}

.problems
{
	color: #AA0; 
	font-weight: bold;
}
.ok
{
	color: Green; 
	font-weight: bold;
}
.disabled .highrisk
{
	color: #FAA;
	font-weight: bold;
}

.disabled .problems
{
	color: #CC8;
	font-weight: bold;
}
.disabled .ok
{
	color: #8C8; 
	font-weight: bold;
}

IFRAME
{
	background-color: #EEE; 
	border: solid 1px black; 
}

/*	Ref: How to use clearfix:
	http://www.positioniseverything.net/easyclearing.html

	http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

	How float backgrounds can match height of main content
	http://www.sitepoint.com/examples/clearing_floats/example1.php
*/
.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* Indents a form on a FORM, DIV or TABLE.
   This replaces fieldname, fieldlabel and other elements having an explicit 5px indent for example. */
.indentedform
{
	padding-left: 5px;
}
TABLE.indentedform
{
	padding-left: 0;
}
TABLE.indentedform TH,
TABLE.indentedform TD
{
	padding-left: 5px;
}