/** empower.css - this file defines the styles used in Empower .NET.  Edit with care. **/

/** HTML STYLES **/

body
{
	margin: 0px;
	scrollbar-base-color: #C6DBF7;
	scrollbar-darkshadow-color: #8CB2EF;
}

img
{
	border: none;
}

#content h1
{
	font: bold 120% arial, helvetica, sans-serif;
	color: #840000;
}

#content p
{
	font: 80% arial, helvetica, sans-serif;
}

#content blockquote
{
	font: 80% arial, helvetica, sans-serif;
}

/* The top area of of any of the non-dashboard pages where the logo and image sit **/

#header
{
	background: #840000;
	width: 100%;
	border: none;
	padding: 0px;
}

/** This is the second bar across the top of any of the non-dashboard pages **/

#topmenu
{
	background: #840000;
	width: 100%;
	color: white;

	border-color: white;
	border-style: solid;
	border-width: 1px 0px 1px 0px;

	padding: 0px;
}

/** This is the main table of any of the non-dashboard pages **/

#main
{
	width: 100%;
	height: 100%;
	border: none;
	padding: 0px;
}

/** This is the left hand column of any of the non-dashboard pages **/

#leftcolumn
{
	background: #840000;
	width: 120px;
}

/** This is the inner area within any of the non-dashboard pages that is used to display information specific to a single page **/

#content_outer_table
{
	background: #faf3f3;
	width: 600px;

	margin-width: 1px 2px;

	border: #840000 1px solid;
}

#password
{
	width: 250px;
}

/** The OK button used on various dialogs **/

#ok
{
	width: 100px;
}

#OK
{
	width: 100px;
}

#workaround
{
	width: 0px;
}

/** Defines horizontal bars on HTML pages. **/

hr
{
	color: #840000;
	margin: 0px;
	padding: 0px;
}

/** This is the company logo on the left hand side of any of the non-dashboard pages **/
#logo_image
{
	background: url(resources/logo.gif);
	height: 85px;
	width: 110px;
	border: none;
}

/** This is the image used at the top of any of the non-dashboard pages **/
#image
{
	background: url(resources/lion.jpg);
	height: 85px;
	width: 665px;
	border: none;
}

select
{
	width: 255px;
}

/** SHARED STYLES **/

.push 
{
	width: 75px;
	height: 25px;
}

/** LISTBOX DIALOG **/

#list_dialog_list
{
	width: 100%;
}

#list_dialog_frame
{
	z-index: 501;
	left: 0px;
	position: absolute;
	top: 0px;
}

#list_dialog_mask
{
	z-index: 500;
	left: 0px;
	position: absolute;
	top: 0px;
	background-color: #333333;
	filter: alpha(opacity=50); -moz-opacity:0.5;
	opacity:0.5;
}

/** MESSAGEBOX POPUP **/

.spacer {
	width: 50%;
}

td.button_cell
{
	height: 25px;
}

#messagebox_message_text
{
	width: 100%;
	height: 100%;
	border: none;
	font-family: Times New Roman, Serif;
}

#messagebox_frame
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 501;
}

#messagebox_mask
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 500;
	background-color: #333333;
	filter: alpha(opacity=50); -moz-opacity:0.5;
	opacity:0.5;
}

#securityMessagebox_message_text
{
	width: 100%;
	height: 100%;
	border: none;
	font-family: Times New Roman, Serif;
}

#securityMessagebox_frame
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 501;
}

#securityMessagebox_mask
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 500;
	background-color: #333333;
	filter: alpha(opacity=50); -moz-opacity:0.5;
	opacity:0.5;
}

/** GENERIC SELECTOR DIALOG **/

#dialog_outer_table
{
	width: 400px;
	max-height: 300px;

	background-color: black;

	margin: 0 auto;
	border: 1px;
}

#dialog_title
{
	height: 25px;

	color: white;
	background: #840000;

	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
}

#dialog_inner_cell
{
	background-color: white;
	max-height: 325px;
}

#dialog_inner_table
{
	width: 100%;
	height: 100%;

	background-color: white;
	
	padding: 5px;
	margin: 0;
	border: 1px;
}

#listbox_cell
{
	height: 250px;
	width: 100%;
}

#listbox_cell_overlay
{
	text-align: left;
	height: 250px;
}

/** TOOLBAR **/

#m_toolbar_position
{
	width: 110px;

	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 100;

	background-color: Gray;

	margin: 0px;
	border: none;
	padding: 0px;
}

#m_toolbar_table
{
	z-index: 101;
	width: 100%;
	position: absolute;
	margin: 0px;
	border: none;
	padding: 0px;
	background-color: Gray;
}

#m_toolbar_TB_move
{
	width: 100%;
	border: none;
	padding: 0px;
	margin: 0px;
	height: 7px;
	background-color: Maroon;
}

#toolbar_inner_table
{
	background-color: White;
	margin: 0px;
	border: none;
	padding: 0px;
}

/** DATA EDITOR **/

#m_data_editor_position
{
	position: absolute;
	z-index: 502;
}

#outer_table
{
	z-index: 503;
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: White;
}

#inner_table
{
	z-index: 504;
	background-color: White;
	margin: 0;
}

#m_data_editor_data_input
{
	border: none;
	text-align: center;
}

#m_data_editor_save_data
{
	width: 40px;
	font-size: x-small;
}

#m_data_editor_cancel_edit
{
	width: 40px;
	font-size: x-small;
}

#m_data_editor_mask
{
	z-index: 500;
	left: 0px;
	position: absolute;
	top: 0px;
	background-color: #333333;
	filter: alpha(opacity=50); -moz-opacity:0.5;
	opacity: 0.5;
}

/** ELEMENT SELECTOR **/

/** An element selector consists of a table which contans a div (used for scrolling) which in turn contains a TreeView **/

/** The outer table of an element selector. Use this style to set border styles, etc. **/
#m_element_selector_m_table
{
	background-color: rgb(198,219,247);
	position: absolute;
	width: 300px;
	height: 300px;
	border-style: ridge;
	border-color: #E0FFFF;
	z-index: 501;
}

/** The scrollable div of an element selector. The overflow style defines how scrolling is handled **/
#m_element_selector_m_div
{
	background-color: rgb(198,219,247);
	overflow: auto;
	width: 290px;
	height: 290px;
	z-index: 502;
}

/** The actual TreeView within an element selector **/
#m_element_selector_m_tree_view
{
	background-color: rgb(198,219,247);
	font-family: arial;
	z-index: 503;	
}

/** This is required to fix a bug which causes the lines joining items on the tree to have gaps. **/
.tree td div
{
	height: 20px !important
} 

/** The display style for normal tree items **/
.TreeView_Normal
{
	color: Blue;
}

/** The display style for a tree item when the mouse if hovering over it **/
.TreeView_Hover
{
	color: Red;
	background-color: E7EFFF;
}

/** The display style for selected tree items **/
.TreeView_Selected
{
	color: Blue;
	background-color: LightBlue;
}


/** POSTBACK MASK **/

#postback_mask
{
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 500;

	background-color: #333333;
	filter: alpha(opacity=0); -moz-opacity:0;
	opacity: 0;
}