/*
 MSX Colors

 0 transparant  000000
 1 black        000000
 2 green        24DA24
 3 light green  6DFF6D
 4 dark blue    2424FF
 5 blue         486DFF
 6 dark red     B62424
 7 light blue   48DAFF
 8 red          FF2424
 9 light red    FF6D6D
10 dark yellow  DADA24
11 light yellow DADA91
12 dark green   249124
13 purple       DA48B6
14 gray         B6B6B6
15 white        FFFFFF

*/

/***********************************************************************/
/* HTML TAG STYLES                                                     */
/***********************************************************************/

body {
	margin: 0px;
	padding: 0px;
	background-color: #48DAFF; /* light blue */
}

html, body {
	height: 100%;
}

* html #nonFooter {
	height: 100%;
}

/*
 * nonFooter is the container for the
 *   pageHeader
 *   msxDisplayArea
 * It is a little bit smaller then the body, so that the body background-color
 * will make the left and right borders
 * It will fill-up the entire height of the screen (except for the footer area)
 * and create the background color for the screen itself
 */
#nonFooter {
	background-color: #2424FF; /* dark blue */
	position: relative;
	min-height: 100%;
	margin-left: 20px;
	margin-right: 20px;
}

/*
 * The page header makes the top-border of the screen
 */
#pageHeader {
	color: #2424FF; /* dark blue */
	background-color: #48DAFF; /* light blue */
	margin: 0px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 20pt;
	text-align: center;
}

/*
 * This is the 'msx Display area', making up the main part of the screen
 * The background-color is inherited from its container: nonFooter
 */
#msxDisplayArea {
	color: #FFFFFF; /* white */
	font-family: serif;
	font-size: 13pt;
	padding: 2px;
}

#lastUpdated {
	position: absolute;
	top: 52px;
	right: 2px;
	font-size: 10pt;
}

/*
 * The footer is positioned over the lowest part of the nonFooter area
 * In this manner, it will not increase the height of the screen. If the
 * nonFooter would be placed below the nonFooter area, then the total size
 * of the screen would be 100% + xxx pixels (xxx being the height of the footer)
 * The browser would then always make scrollbars, even when not necesary
 */
#footer {
	color: #2424FF; /* dark blue */
	background-color:  #48DAFF; /* light blue */
	position: relative;
	bottom: 0;
	width: 100%;
	height: 30px;
	margin-top: -30px;
}

/*
 * The footerspacer must be used in the nonFooter area, as last element. It will
 * prevent real elements (like text) to disappear behind the footer
 */
#footerspacer {
	position: relative;
	bottom: 0;
	height: 30px;
}


/******* hyperlink and anchor tag styles *******/
a:link {
	color: #48DAFF; /* light blue */
	text-decoration: underline;
	}
a:hover {
	text-decoration: underline;
	}
a:visited {
	color: #B6B6B6; /* grey */
	text-decoration: underline;
	}
a:visited:hover {
	text-decoration: underline;
	}

/* default settings for all menu items */
.ddmx {
	font-family: sans-serif;
	font-weight: normal;
	font-size: 10pt;
}

/* item in top-menu-bar when menu is closed or when menu is open but mouse still in menu bar */
.ddmx .item1,.ddmx .item1:link,.ddmx .item1:visited {
	padding: 0px 10px 0px 10px;
	color: #2424FF; /* dark blue */
	text-decoration: none;
	display: block;
	white-space: nowrap; 
	position: relative;
}

/* item in top-menu-bar when the menu is open and the mouse is in the menu itself */
.ddmx .item1-active,.ddmx .item1-active:link,.ddmx .item1-active:visited  {
	padding: 0px 10px 0px 10px;
	color: #FFFFFF; /* white */
	text-decoration: none;
	display: block;
	white-space: nowrap;
	position: relative;
}

/* item in top-menu-bar, when mouse is in menu on the item itself or when the menu is open and mouse is in
   the menu */
.ddmx .item1:hover,.ddmx .item1:visited:hover,.ddmx .item1-active:hover,.ddmx .item1-active:visited:hover {
	color: #FFFFFF; /* white */
}


/* item in menu, when mouse is not on the item itself */
.ddmx .item2,.ddmx .item2:link,.ddmx .item2:visited {
	min-width: 120px;
	border-bottom:1px solid #2424FF; /* dark blue */
	padding: 3px 16px 3px 8px;
	color: #FFFFFF; /* white */
	text-decoration: none;
	display: block;
	position: relative;
	white-space: nowrap;
	z-index: 500;
	background: #486DFF; /* blue */
}

/* item in menu, when mouse is in sub-menu of this item */
.ddmx .item2-active,.ddmx .item2-active:link,.ddmx .item2-active:visited  {
	min-width: 120px;
	border-bottom:1px solid #2424FF; /* dark blue */
	padding: 3px 16px 3px 8px;
	color: #FFFFFF; /* white */
	text-decoration: none;
	display: block;
	position: relative;
	white-space: nowrap;
	z-index: 500;
	background: #48DAFF; /* light blue */
}

/* item in menu, when mouse is hovering over the item */
.ddmx .item2:hover,.ddmx .item2:visited:hover,.ddmx .item2-active:hover,.ddmx .item2-active:visited:hover {
	background: #48DAFF; /* light blue */
}


/* The indicator in the item in the menu to indicate that there is a sub-menu */
/* it is tagged with <b></b> and this style makes sure that it is right-aligned (and not bold) */
.ddmx .item2 b, .ddmx .item2-active b {
	position: absolute;
	top: 3px;
	right: 1px;
	border: 0;
}

/* The border around a drop-down menu or a sub-menu */
.ddmx .section {
	border: 1px solid #2424FF; /* dark blue */
	border-bottom: 0px;
	position: absolute;
	visibility: hidden;
	z-index: -1;
}

* html .ddmx td {
	position: relative;
} /* ie 5.0 fix */

.error {
	color: #DADA24; /* dark yellow */
}

td {
	color: #FFFFFF; /* white */
}

h1 {
	margin-top: 4px;
}

h1, h2, h3 {
	color: #DADA24; /* dark yellow */
}

input {
	background: #FFFFFF; /* white */
}

ul {
	list-style-image: url(../Icons/yellowball.gif);
}

/* forms */
label {
	font-weight: bold;
	color: #DADA24; /* dark yellow */
}

.submit {
	background-color: #DADA24; /* dark yellow */
	color: #2424FF; /* dark blue */
}

select, input, textarea {
	background-color: #DADA91; /* light yellow */
	color: #2424FF; /* dark blue */
}