/**
 * Blue Sky Insight - Skin/CSS
 *
 * CSS
 * Stylesheets are divided into behavioral and look-and-feel.  Behavioral applies
 * to styles that are required for the application to function normally and include
 * things like hiding elements when they should not be on the screen.  Look-and-feel
 * applies to styles that can be changed without affecting the funtionality of
 * the application (although they can seriously affect the user's experience).
 *
 * The following style sheets are used:  Everything within the skin path can be
 * overridden.
 * <skin-path-url>/skin.css - Contains all look-and-feel styles
 * <skin-path-url>/ie_workarounds.css - Contains CSS workarounds for IE
 * <skin-path-url>/images - Contains all images mostly grouped by size
 * <skin-path-url>/image.css - Contains standard CSS image replacements
 * <skin-path-url>/image_hover.css - Contains standard CSS image replacements for mouseovers
 * <skin-path-url>/ie_image.css - Contains IE CSS image replacment styles because IE doesn't
 *								  handle transparent PNGs correctly
 * <skin-path-url>/ie_image_hover.css - Contains IE mouseover CSS image replacements
 *
 * The behavioral styles should not be overridden.
 * <base-url>/style/behavior.css - Contains styles required for the application to function
 *
 *
 * Images
 * The default images are in <skin-path-url>/../images which is also <context-path>/skin/images.
 * A new skin can simply copy the image CSS files without having to make a full
 * copy of the existing images.  The paths in the non-IE image CSS files will have to be changed
 * because they are relative (the IE paths use expressions to set the full path basd on the
 * context).  
 *
 *
 * JavaScript
 * Most JavaScript functions are behavioral and should not be modified.  The skin.js file is
 * for custom JavaScript.  It will be loaded last so that it override previous behaviors.
 *
 * <skin-path-url>/skin.js - Skin JavaScript for overrides
 * <base-url>/scripts - Contains all JavaScript scripts
 * <base-url>/scripts/thirdparty - Contains third party JavaScript
 * <base-url>/scripts/admins.js - Scripts for the administrative behaviours
 * <base-url>/scripts/alert.js - Scripts for the alert-related behaviours
 * <base-url>/scripts/dataSource.js - Scripts for the data source-related behaviours
 * <base-url>/scripts/email.js - Scripts for the e-mail-related behaviours
 * <base-url>/scripts/form.js - Scripts for the form-related behaviours
 * <base-url>/scripts/gauge.js - Scripts for the gauge-related behaviours
 * <base-url>/scripts/nav.js - Scripts for the nav-related behaviours
 * <base-url>/scripts/popup.js - Scripts for the popup-related behaviours
 * <base-url>/scripts/table.js - Scripts for the table-related behaviours
 * <base-url>/scripts/util.js - Scripts for the utility functions
 *
 *
 * Variables
 * There are several global variables that can be used in custom JavaScript:
 * 	 currentContext - The fully qualified URL of the application context
 *   skinPath - The fully qualfied URL of the current skin (default http.../skin/default)
 *   imagePath - The full qualified URL of the default images (http.../skin/images
 *   ie - true if the detected browser is Internet Explorer
 *   ie7 - true if the detected browser is Internet Explorer 7
 *
 * These can be changed, for example, a skin could override the imagePath to point images 
 * references by JavaScript to a new URL.  However, they are mostly useful for referencing
 * paths into the application.
 *
 *
 *  This file (default: skin.css) is grouped into the following sections:
 *		Page - Styles that apply to every page
 *		Navigation - Styles related to navigation elements such as menus and links
 *		Table - Styles related to tables
 *		Form - Styles related to input forms
 *		Popup - Styles related to popups
 *		Utility - Helper elements such as spacers that are used by all areas
 *		Admin - Styles for specific elements within the Admin pages
 *		Alert - Styles for specific elements within the Alert pages
 *		Gauge - Styles for specific elements related to Gauges
 *		Minimal - Styles for pages outside of the normal logged in state, such
 *				  as login pages, error pages, etc
 *
 *  Yes, there's some overkill on some of the selector specificity that could
 *  be removed, but I wanted to start out leaving no room for duplication or
 *  confusion.
 *
 * Common colors used in this skin
 * (I got the palette from www.returnofdesign.com before it went away)
 * 666 - dark gray
 * 538FDC - dark blue from our logo   #538FDC
 * 526CAE - slightly darker than the blue from our logo
 * 940500 - maroonish
 * 93D056 - light green
 * ccc - light gray
 * eda - tan
 * 7c6240 - brownish
 * 940500 - reddish
 * cedebd - olive
 * b8b8b8 - medium gray
 * ababab - darker than medium gray
 * edf2f6 - really light blue
 */


/**************************************************************
 * Page Styles
 *
 * The structure of a standard Page is as follows:
 *
 * 		body
 *			header_container
 *			page_nav_container
 *				navigation tabs
 *			page_container
 *				content_container
 *					action_container
 *						action links
 *					h1/h2
 *					form/table_container
 *						unique contents of page
 *						button_container (if applicable)
 *			footer_container
 *
 *
 *  Virtually every container has the following structure:
 *
 *  	<div><div class="start"><span></span></div><div class="contents">
 *			...
 *		</div><div class="end"><span></span></div></div>
 *
 *  The extra start/end/contents divs can be used as hooks to 
 *  add borders, corners, etc.
 *
 **************************************************************/
body {
	margin: 5px 5px 0px 5px;
	padding: 0;
	font: normal 14px "trebuchet MS", Verdana, Arial, Sans;
}

#flash {
	height: 14px; 
	line-height: 14px;
	margin: 0px 0px 2px 0px; 
	padding: 0; 
	text-align: center; 
	width: 99%;
}
#flash span {
	font-size: 12px; 
	color: #aaa;
}

/** Contains the Dashboard choose form and the preferences and logout links **/
#header_container {
	margin: 0;
	padding: 0;
}

/** Contains the tabs **/
#page_nav_container {
	margin: 0px 0px 0px -4px;
	padding: 0;
	width: 100%;
}

/** Contains the content of the page **/
#page_container {
}

/** Additional content container for the page **/
div.content_container {
	margin-bottom: 10px;
}

div.content_container_with_margin {
	margin-left: 10px;
	margin-right: 10px;
}

h1 {
	font-weight: bold;
	font-size: 16px;
	text-align: left;
	margin: 0px 0px 4px 75px;
	padding: 0;
}

h1.full_left {
	margin: 0;
	padding: 0;
}

strong {
	color: green;
}
.strong {
	color: green;
	font-weight: bold;
}

/** For headings that have <a> links inside them; to style the link separately **/
h1 span.inline_link {
	font-size: 13px;
}

h1 span.small_inline_link {
	font-size: 10px;
}

h3 span.inline_link {
	font-size: 10px;
}

h2 {
	font-size: 12px;
	font-weight: 200;
	text-align: left;
	margin: 0px 75px 5px 75px;
}

h2.left {
	margin: 0px 0px 5px 10px;
}

/** Inner container for all other containers **/
div.content {
	width: 100%;
	text-align: center;
}

/** Start container for all other containers **/
div.start {}

/** End container for all other containers **/
div.end {}

/** Mostly empty for now **/
#footer_container {}


/** 
 * This section is for the Choose Dashboard form at the top left of page.
 * It consists of either the name of the current Dashboard or a select
 * list if multiple Dashboards are accessible for the user.
 */


/** The form itself **/
form#dashboard_select_form {
	margin: 0;
	padding: 0;
}

/** The Dashboard name or label **/
#dashboard_select_form span {
	color: #666;  	/* Gray */
	font-weight: bold;
}

/** The list of choices in the Dashboard select list **/
#dashboard_select_form .select_menu_choice {
	color: #526CAE;   	/* Blue-ish */
}

/** The display name that appears when the select list is not open **/
#dashboard_select_list_menu:hover #dashboard_select_list_display {
	color: #940500;
}

/*?
#dashboard_select_list_display:hover {
	color: #940500;
}
*/

/** The name that appears when there is only one Dashboard **/
span#dashboard_name {
	color: #666;
	float: left;
	margin-right: 3px;
}

/** The label next to the Dashboard list */
span#dashboard_label {
	float: left;
	margin-right: 3px;
}

/** The warning indicator that displays when an Alert fires **/
#alert_indicator {
	float: left;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	position: relative;
}

/** The hover help for the Alert warning indicator */
#alert_indicator_tooltip {
	background-color: #fff;
	font-size: 12px;
	position: absolute;
	width: 300px;
} 

#alert_indicator_tooltip div span {
	color: #000;
	font-weight: normal;
}

#search_form {
	margin: 0; 
	padding: 0;
}

/**
 * The following styles are for pages that contain a list of links 
 * such as the Welcome or Admin pages.
 */
div.page_action_list_container {
	margin: 20px auto auto 100px;
}

ul.page_action_list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

ul.page_action_list a {
	font-weight: bold;
}

ul.page_action_list li a.page_action_link {
	float: left;
	cursor: pointer;
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
	margin-right: 20px;
}

/** Keep the span text from displaying; it will be moved via JavaScript to the title **/
ul.page_action_list li a.page_action_link span {
	display: none;
}

/** On pages with very long descriptions, things wrap around the image if you use
 *  an anchor instead of a span.  I don't fully understand/remember but I know
 *  I worked a long time to get this to look ok with different browser sizes.
 */
ul.page_action_list li span.page_action_image {
	float: left;
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
	margin-right: 20px;
}	

ul.page_action_list li div.page_action_text_container {
	float: left;
	margin: auto 0px 20px auto;
	padding-right: 0px;
	width: 75%;
}


/*?
.action_description {
	margin: 0;
	padding: 0;
}
*/

/** No bottom margin on the last one because the extra
 *  whitespace causes an unecessary scrollbar
 */
ul.page_action_list li.last  {
	margin-bottom: 0px;
}

/** I took out the translation spans to lighten the pages
    May add them back if I find a use for them like inline
    changing of translatiosn
a.page_action_link span.translation {
	display: none;
}
a.action_link span.translation {
	display: none;
}
*/


/**************************************************************
 * Navigation Styles
 * 
 * This section mainly deals with the navigation tabs, but also
 * handles standard action links used for navigation and the base
 * anchor styles.
 *
 **************************************************************/
 
a {
	text-decoration: none;
	color: #526CAE;
}

a strong {
	text-decoration: none;
	color: #93D056;
	font-weight: bold;
}

a:hover {
	text-decoration: none;
	color: #940500;
}

/** TODO: all these should share some common class to make the inner text disappear on image replacement **/
a.page_action_link, a.action_link, a.action_link_big, span.page_action_image, span.title_only {
	text-indent: -100em;
	overflow: hidden;
}

a.page_action_link span, a.action_link span, a.action_link_big span {
	display: none;
}
	

#add_gauge_link {
	text-indent: -100em;
	overflow: hidden;
}

a.gauge_header_action span {
	display: none;
}


#search_link, #remove_search_link, #save_search_link {
	text-indent: -100em;
	overflow: hidden;
}

a.alert_action_link, #new_alert_link, #alert_big, #alert_medium, #alert_small {
	text-indent: -100em;
	overflow: hidden;
}

a#show_header {
	float: left;
	display: block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	margin: 0;
	margin-right: 5px;
	cursor: hand;
}

/** Required to clear the floated tabs **/
#page_nav_container div.end {
	clear: both;
}

/** The links in the header for preferences, logout, search **/
ul#nav_header_links {
	float: right;
	/*? display: inline; */
	margin: 0;
	padding: 0;
	list-style:none;
}

#nav_header_links li {
	float: left;
	margin: 0px 10px auto 0px;
}

#nav_header_links li .last {
	margin-right: 0px;
}

#search_link, #contact_support_link {
	cursor: pointer;
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
}

/** The icon that allows new pages/tabs to be added */
#add_page_action {
	float: left;
	display: block;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	margin: 0;
}

/** The icon that allows dashboards to be copied */
#copy_dashboard_action {
	float: left;
	display: block;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	margin: 0;
}

/** The main navigation tabs list **/
ul.nav_list {
	margin: 0px auto 0px auto;
}

/** The individual navigation tabs **/
ul.nav_list li {
	display: block;
	float: left;
	min-width: 80px;
	margin: 1px 2px 1px 1px;
	padding: 0px;
	text-align: center;
	white-space: nowrap;
	background-color: #538FDC;
}

ul.nav_list li.nav_list_item_hover {
	background-color: #526CAE;
}

/** The links inside the tab **/
ul.nav_list li a {
	padding: 0px 4px 4px 4px;
	margin: 0px 0px 0px 0px;
	display: block;
	text-align: center;
	background-color: #538FDC;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 90%;
	white-space: nowrap;
}

/** Both of these are needed because the <a> doesn't fully cover the <li> **/
ul.nav_list li.nav_list_item_hover a {
	background-color: #526CAE;
}

ul.nav_list li a:hover {
	color: #fff;
}

/** The top part of the tabs; used to grab the tab for moving **/
ul.nav_list li div.handle {
	background-color: #538FDC;
	position: relative;
	font-size: 1%;
	height: 5px; 
	top: 0; 
	left: 0;
	cursor: move;
}

ul.nav_list li.nav_list_item_hover div.handle {
	background-color: #526CAE;
}

/** Replace the handle above when the tab is not draggable **/
ul.nav_list li div.non_handle {
	background-color: #538FDC;
	position: relative;
	font-size: 1%;
	height: 5px; 
	top: 0; 
	left: 0;
	cursor: auto;
}

ul.nav_list li.nav_list_item_hover div.non_handle {
	background-color: #526CAE;
}

/** A placeholder used when tabs are being dragged **/
ul.nav_list #nav_list_dummy {
	width: 0px;
	height: 0px;
}

/* The box that shows the current drop position when performing a drag-n-drop */
ul.nav_list li.nav_placeholder {
	border: 2px dotted #ccc;
	display: block;
	float: left;
	margin: 1px 2px 1px 1px;
	padding: 0px;
	background-color: #fff;
}

/** The currently selected tab **/
ul.nav_list li.current {
	background-color: #93D056;
}

ul.nav_list li.current a {
	background-color: #93D056;
	font-weight: bold;
	color: #fff;
}

ul.nav_list li.current a:hover {
	color: #940500;
}

ul.nav_list li.current div.handle {
	background-color: #93D056;
}

ul.nav_list li.current div.non_handle {
	background-color: #93D056;
}

ul.nav_list li.current_nav_list_item_hover {
	background-color: #93D056;
}


/** The Action Container contains links to related functions as well as the page help **/
div.action_container {
	float: right;
	vertical-align: top;
}

/** The list containing the actions **/
div.action_container ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

/** The actions themselves **/
div.action_container li {
	margin-right: 10px;
	float: left;
}

/** The action links. By default these are shown as icons **/
div.action_container li a {  /*? .action_link { */
	float: left;
	cursor: pointer;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
}

a.action_link_big {
	display: block;
	cursor: pointer;
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
}

/** The contents of the span are typically moved to the link title via JavaScript.
  * This theoretically allows the links to be pure text instead of icons, although
  * it would require additional JavaScript to undo the move. 
  **/
div.action_container li a span { /*?.action_link span { */
	display: none;
}


/**
 * Online Help
 */

div.help {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	text-align: center;
	margin: 0;
	padding: 0;
	width: 700px;
	height: 500px;
}

div.online_help_container {
	text-align: center;
	margin: 0;
	font-size: 12px;
	position: relative; 
	left: -1px; 
	top: -1px; 
	padding: 0px 10px 10px 10px; 
	background: #ffffff;
	border: 4px solid #06f;
	width: 100%;
}

div#help_container_contents h3 {
	font-size: 13px;
	font-weight: bold;
	margin: 10px 0px 0px 0px;
	padding: 0;
}

div.online_help_container ul {
	margin-top: 5px;
}

div#help_form_container #edit_help_form {
	margin: 0px 30px 0px 30px;
}

div#help_container_contents {
	text-align: left;
	width: 100%;
	margin: 10px 10px 0px 10px;
}

h1#help_title {
	position: relative;
	margin: 0;
	float: left;
}

h1#help_title span.left {
	margin: 0;
}

h1#help_title span.right {
	margin: 0px 20px 0px 0px;
}

h2#help_subtitle {
	margin: 0;
}

div.help_container {
	margin: 10px 30px 0px 30px;
	overflow-y: auto;
	height: 300px;
}


div.help_container_no_related {
	margin: 10px 30px 0px 30px;
	height: 400px;
	overflow-y: auto;
}

#edit_help_form {
	margin: 0;
	padding: 0;
}

div.edit_help_container {
	margin: 10px 30px auto 30px;
	height: 200px;
	overflow-y: auto;
}

#help_related_container {
	margin: 5px 30px 0px 30px;
	height: 75px;
	padding: 0;
}

#edit_help_related_container {
	margin: 5px 30px 0px 30px;
	height: 130px;
	overflow-y: auto;
	text-align: left;
}

#help_related_title {
	font-size: 13px;
	margin: 0px 0px 5px 0px;
}

#help_related_container table {
	width: 100%;
	margin: 0;
	padding: 0;
}

#help_related_container td {
	line-height: 17px;
	vertical-align: top;
}

ul.help_related_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.help_related_list li {
	font-size: 13px;
	margin: 0;
	padding: 0;
}

#help_button_container {
	text-align: center;
	margin: 5px auto 0px auto;
}

#help_button_container button {
	margin: 0px 5px 5px 5px;
}

/*
div.online_help_container .contents>#help_button_container {
	margin-top: 30px;
}
*/

hr.help_divider {
	margin: 10px 20px 0px 20px;
}


/**************************************************************
 * Form Styles
 *
 * These styles deal with input forms.  These heavily rely on 
 * or are relied on by forms.js and the tag bsl:formElement.  
 * The basic idea is to have a side for labels and a side for
 * the inputs or values. This also covers hover help and actual
 * form element styles.
 **************************************************************/
 
/**  The parent container of the form itself **/
div.form_container {
	text-align: center;
	margin: 0;
	padding: 0;
}

/** The form goes under the form_container **/
div.form {}

/* The child of the form and parent of all of the form elements */
div.form_elements {
	font-size: 13px;
	width: 750px;
	padding: 0px 0px 0px 0px;
	margin: 15px auto auto auto;
	text-align: left;
}

div.form_elements_left {
	font-size: 13px;
	width: 850px;
	padding: 0px 0px 0px 0px;
	margin: 15px auto auto auto;
	text-align: left;
}

div.form_elements_left span.form_element_label {
	width: 170px;
}

div.form_elements_left div.form_element_contents {
	width: 650px;
}

/** A horizontal line with some spacing around it; the 215px is related
    to the label side of the form so this can display only on the value
    side **/
hr.spacer_line {
	margin: 16px auto 8px 215px;
}

hr.skinny_spacer_line {
	margin: 8px auto 4px 215px;
}

div.form_elements_left hr.spacer_line {
	margin: 16px auto 8px 185px;
}

div.form_elements_left hr.skinny_spacer_line {
	margin: 8px auto 4px 185px;
}

/** A container used to hold for elements that are optional and only displayed
    if some other element is in a specific state. **/
div.form_toggle_container {
	clear: both;
	float: left;
	margin: 0;
	padding: 4px 0px 0px 0px;
}

/** The container for an individual form element, which includes a label and an input like a textbox **/
div.form_element_container {
	clear: both;
	padding-top: 3px;
}

/** The next two are because Firefox handles padding differently and looks all 
    squished compared to IE. IE doesn't handle the ">" (direct child) selector. **/
div.form_elements>div.form_element_container {
	padding-top: 12px;
}

div.form_toggle_container>div.form_element_container {
	padding-top: 8px;
}

/** The label that appears on the left.  Usually contains a high level description of the form element. **/
span.form_element_label {
	float: left;
	text-align: right;
	width: 185px;
	font-weight: bold;
}

div#alert_parameters span.form_element_label {
	font-weight: normal;
	font-size: 12px;
}

div#alert_parameters div.form_element_container {
	clear: both;
	padding-top: 2px;
}

/** A label just out in the middle of no where, i.e. not in the standard formElement template **/
span.form_element_label_single {
	font-weight: bold;
	margin-right: 5px;
}

/** The container for the for non-label portion of the form element, 
	which is typically on the right opposite the label. **/
div.form_element_contents {
	float: right;
	text-align: left;
	width: 535px;
}

/** Optional text that can be displayed prior to the actual input. Depending on the
    style, this could go on the line above or on the same line. **/
span.form_element_pre_text {
	float: left;
}

/** A wrapper around the input element **/
div.form_element {
	float: left;
}

/*? Not sure **/
div.form_element div {
	margin-bottom: 5px;
}

/** The display for form fields that the user can't change **/
span.form_element_readonly {
	font-style: italic;
	font-weight: bold;
}

/** 
 * The following are the actual input elements 
 */

div.form_element input {
	float: left;
}

div.form_element input.radio {
	float: none;
}

div.form_element textarea {
	float: left;
}

div.form_element select {
	float: left;
}

div.form_element .select {
	float: left;
	min-width: 150px;
}

/** Lists within form elements **/
div.form_element ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


/** Optional text that can be displayed after the input.  
    Could go on the same line or the next one. **/
span.form_element_post_text {
}


/**
 * The following styles are for popup help boxes that display when the user hovers over the
 * label. "Small" is arbitrarily defined as 200 characters or less in the help message because
 * short messages look stupid with large containers and long messages cause small containers
 * to scroll.
 * If there's a way to make a div expand both vertically and horizontally
 * to stay in a roughly square shape, that would be better than using two styles.
 */

/** The help container **/
div.form_element_help, div.form_element_help_small {
	background-color: #fff;
	color: #000;
	font-weight: normal;
	width: 300px;
	height: auto;
	text-align: left;
}

/** If the help is small (200 characters or less); use a narrower box **/
div.form_element_help_small {
	width: 200px;
}

div.popup_help_container {
	position: relative; 
	left: -1px; 
	top: -1px; 
	border: 1px solid #ccc; 
	border-top: 2px solid #ccc; 
	padding: 10px; 
	background: #ffffcc;
	text-align: left;
	overflow: auto;
}

/** The label that appears at the top of the help popup; this is the same value as the
    label on the right of the scree, but without any trailing colon. **/
div.form_element_help_label {
	font-weight: bold;
	margin-bottom: 5px;
}

/** The text of the help message **/
span.form_element_help_text {}


/**
 * This style is for pre-defined error messages that are put in the form.
 * The idea is to allow the author to show the error message right next to
 * the item that caused it rather than at the top.
 */
div.form_element_inline_error {
	clear: both;
	color: red;
	font-weight: bold;
	font: bold 13px Verdana, Arial, Sans;
}

/**
 * There is automatic client-side validation for any element with a class of "required".
 * This container displays the overall message saying "Required fields are missing" or somesuch.
 * It displays at the top of the form.  The server can also return a special required
 * error that will trigger this to be displayed.
 */
div.required_fields_missing {
	color: red;
	font: bold 13px Verdana, Arial, Sans;
	margin-bottom: 5px;
}

/** This is a marker put next to required fields that weren't populated or fields with errors. **/
span.required_error {
	color: red;
	font: bold 16px Verdana, Arial, Sans;
	padding: 0;
	text-align: left;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	margin-right: 5px;
}

/** A hack because FireFox and IE look different **/
span.required_error[class] {
	float: left;
	margin: 2px 3px 0px 3px;
}

/** Hide the text if using an image for the error indicator **/
span.required_error span {
	display: none;
}

/** 
 * An error container will display error messages that aren't inline.  It is dynamically inserted at
 * the top of the screen if it is needed (when an error doesn't have a pre-existing inline
 * element).
 */
div.errors {
	color: red;
	font: 13px Verdana, Arial, Sans;
	font-weight: bold;
}

/** The list of errors (<ul>) that will be displayed in the error list container **/
div.errors ul.error_list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/** The actual error messages **/
div.errors ul.error_list li.error_list_item {}

/** A container for the buttons at the bottom of a form **/
div.button_container {
	clear: both;
	padding-top: 15px;
}

/** The buttons themselves **/
div.button_container button {
	margin-right: 5px;
}

/** A container that can go around a table in a form. **/
div.form_table_container {
	clear: both;
	margin-top: 40px;
	margin-bottom: 20px;
}

/** A description of the table that precedes it in a form. **/
div.form_table_description {
	padding-bottom: 10px;
	text-align: left;
}

/*?
.form_list {
	padding: 0;
	margin: 0;
	list-style: none;
}
*/


/**
 * A Select menu is an menu-style dropdown that is an alternative to
 * the normal <select> html element.  It's prettier.
 */ 


 /** This the top level div that wraps the entire select menu. **/
div.select_menu, div.select_menu_open {
	float: left;
	position: relative;
	margin: 0;
	color: #526CAE;
	white-space: nowrap;
}
div.select_menu_open {
	z-index: 200;
}

/** Not really sure what this does, but it was recommended by A List Apart **/
/*?
div.select_menu>ul, div.select_menu_open>ul {
	top: auto;
	width: auto;
}
*/

/** The list (<ul>) that contains the select options **/
div.select_menu ul, div.select_menu_open ul {
	color: #940500;
	position: absolute;
	border: 2px solid #eda;
	background-color: #fff;
	top: 20px;
	left: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}


/** An individual select option (<li>) **/
li.dropdown_option {
	padding: 3px 3px 3px 3px;
	white-space: nowrap;
}

/** The link that contains the select option text **/
li.dropdown a {
	color: #7C6240;
	text-decoration: none;
	display: block;
}

/*? Check this
li.dropdown>a {
	padding-right: 0px;
}
*/

/** A line that can be used to group items in a list **/
li.dropdown_separator {
	height: .1em;
	margin: 0;
	border-bottom: 1px dashed #7C6240;
	padding: 0;
}

/** The text that displays **/
li.dropdown_option span {
	text-decoration: none;
}

/** The style to apply as the mouse goes over each select option. The extra class
    is only needed because IE can't do hover on anything but an anchor. **/
li.dropdown_option_hover {
	background-color: #eda;
}

/** The optional part of the dropdown that asks the user to choose a value **/
li.dropdown_choose {
	padding-bottom: 3px;
	border-bottom: 2px solid #7C6240;
}

.delete_warning {
	margin-bottom: 20px;
}

.delete_warning_marker {
	float: left;
	width: 48px;
	height: 48px;
	margin-right: 10px;
}


/** A textarea that grows as the user fills it up, preventing scrolling */
textarea.adjustable_textarea {
	overflow-y: auto;
	text-align: left;
}

/** A, uh, small text box **/
input.small_textbox {
	width: 40px;
}
/** A small numeric textbox. Might have JavaScript to prevent non-numerics **/
.small_numeric_textbox {
	width: 50px;
}
input.upper_case_textbox {
	text-transform: uppercase;
}	
	
/*? Might be used in some popups to prevent the radio buttons from drifting rightward */
ul.radio li input {
	clear: both;
}

/** Generic label **/
.label {
	font-weight: bold;
	float: left;
	margin-right: 5px;
	color: #666;
}

.small_label {
	float: left;
	margin-right: 5px;
	color: #666;
}

.label_13 {
	font-size: 13px;
	font-weight: bold;
	color: #666;
}

.label_12 {
	font-size: 12px;
	font-weight: bold;
	color: #666;
}

/**************************************************************
 * Popup Form Styles
 * 
 * The popupForm tag displays a popup form when an element is
 * clicked, allows the user to enter some data, and then re-
 * displays the element based on the new values.  In between
 * it updates something on the server via Ajax.
 *
 **************************************************************/
 
/*? Can't find this anywhere
.configure_field_anchor {
	white-space: nowrap;
}
*/

/** The popup itself **/
div.popup {
	background-color: #fff;
}

popup.table {
	line-height: 24px;
}

/**
  Drop shadows on popups; much faster than images
 */
div.drop-shadow1 {
	background: #F1F0F1;
}

div.drop-shadow2 {
	position: relative; 
	left: -1px; 
	top: -1px; 
	background: #DBDADB;
}

div.drop-shadow3 {
	position: relative; 
	left: -1px; 
	top: -1px; 
	background: #B8B6B8;
}

/** The main container inside the popup **/
div.popup_contents_container {
	position: relative; 
	left: -1px; 
	top: -1px; 
	border: 1px solid #ccc; 
	border-top: 2px solid #ccc; 
	padding: 10px 10px 10px 10px;
	background: #ffffff;
	text-align: left;
}

/** The popup headers **/
div.popup_contents_container h1 {
	margin: 0 3px 0px 3px;
	padding: 0;
	max-width: 350px;	
	font-size: 15px;
	color: #940500;
}

.popup_contents_container h2 {
	font-size: 12px;
	margin: 0px 3px 0px 3px;
	padding: 5px 5px 0px 0px;
	max-width: 350px;
}

div.popup_contents_container div.contents {
	text-align: center;
}
	
/** A form container within a popup **/
div.popup_form_container {
	width: 100%;
	text-align: left;
	/*
	padding: 0px 10px 0px 10px;
	margin: 10px 0px 0px 0px;
	*/
}

/** A button container within a popup **/
div.popup_button_container {
	width: 100%;
	clear: both;
	/*margin: 10px 10px 0px 10px;*/
	padding-top: 10px;
	text-align: center;
}

/** The buttons in the popup button container **/
.popup_button_container button {
	margin-right: 10px;
}

/** Separates sections of a popup somehow **/
.popup_spacer {
	font-size: 1%;
	height: 0px;
	clear: left;
	width: 1px;
	margin: 0;
	padding: 0;
}

/** A side by side label for an input within a popup **/
span.popup_label {
	float: left;
	margin-right:3px;
	clear: both;
	color: #666;
	font-weight: bold;
}

/** A warning or message instructing them to do something **/
span.popup_message {
	float: left;
	margin-right:3px;
	clear: both;
	color: #666;
	font-weight: bold;
	font-size: 11px;
}

/** A top/bottom label for an input within a popup **/
div.popup_label {
	margin-top: 10px;
	margin-bottom: 5px;
	padding-right: 10px;
	color: #666;
	font-weight: bold;
}

table .popup_label {
	margin: 0;
	font-size: 13px;
}
	
/** An input element in a popup **/
div.popup_form_container input {
	margin-right: 3px;		/* For the error field marker */
	float: left;
}

div.popup_form_container select {
	margin-right: 3px;		/* For the error field marker */
	float: left;
}

/** A list in a popup **/
div.popup_form_container ul {
	list-style: none;
}

/** The required fields missing container for a popup (see form) **/
div.popup_required_fields_missing {
	color: red;
	font: bold 13px Verdana, Arial, Sans;
	margin: 0;
	padding: 0;
}

/** The list of errors in a popup **/
#popup_errors {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 5px 0px;
	display: block;
}

/** A container that holds form fields in a popup **/
div.popup_field_container {
	margin-top: 5px;
	overflow: auto;
}

/** A message that displays on a page with a table when there are no rows **/
span.highlight {
	color: #940500;
	font-weight: bold;
}

div.empty_list {
	margin: 20px 125px 0px 125px;
	text-align: left;
	color: #940500;
	font-weight: bold;
}

div.popup_empty_list {
	margin: auto;
	text-align: left;
	width: 250px;
	color: #940500;
	font-weight: bold;
} 

/**************************************************************
 * Table Styles
 *
 * There are several different kinds of table templates.
 *
 * Live Table is a table that will retrieve content from the server as it is scrolled
 * It has a separate header table so that the body can scroll independently from the
 * header.  That means, it pretty much has to have fixed column sizes.  Wrapping is not
 * allowed either, because of the way the JavaScript calculates how many rows to retrieve.
 * See livetable.js and openrico.org for more information on the dynamic stuff.
 * 
 * Friendly Table is a table that doesn't look like a table.  It has various JavaScript
 * functionality to add and delete rows.
 *
 * Small Table is a narrow table that contains similar functionality to friendly table
 * but looks like a regular table.
 * 
 * Full Table is a full width (or mostly), regular looking, non-dynamic table.
 *
 **************************************************************/

table.configurable_table td {
	font-size: 13px;
}

/** Live Table **/

/** Container for a live table **/
div.table_container {
	margin: 20px auto auto auto;
	text-align: left;
	width: 780px;
}

table.live_table {
	table-layout: fixed;
	width: 750px;
	border-left: 1px solid #ababab; /* darker grey than #b8b8b8 */
}

table.live_table_header {
	border-left: 1px solid #b8b8b8; /* grey */
	table-layout: fixed;
	width: 750px;
	margin: 0;
	padding: 0;
}

table.live_table_header th {
	text-align: left;
	padding: 2px 0px 2px 3px;
	font-size: 13px;
	border-top: 1px solid #b8b8b8;
	border-right: 1px solid #b8b8b8;
	background-color: #cedebd; /* olive-ish */
}

table.live_table tr {
	line-height: 30px;
	height: 30px;
}

table.live_table td {
	overflow: hidden;
	margin: auto;
	padding: 2px 0px 2px 3px;
	line-height: 24px;
	height: 24px;
	font-size: 13px;
	border-bottom: 1px solid #b8b8b8; /* grey */
	border-right: 1px solid #b8b8b8;
	white-space: nowrap;
}

/**
 * Friendly table is a table that just looks like some sentences, probably
 * with form elements inside them.  It has some built-in functionality to
 * add new rows by copying the first one and resetting the values and to
 * remove rows.
 */
table.friendly_table {
	padding: 0;
	margin-bottom: 10px;
	width: 100%;
}

table.friendly_table thead td {
	padding-bottom: 5px;
}

table.friendly_table td {
	font: normal 13px "trebuchet MS", Verdana, Arial, Sans; /*? necessary? */
	padding: 0px 3px 2px 0px;
	margin-top: 0;
	line-height: 16px;
	font-size: 13px;
	text-align: left;
}

/** A cell that contains a link such as a copy or remove action **/
table.friendly_table td.friendly_table_link {
	width: 40px;
}

table.friendly_table a.table_copy_action_link, table.friendly_table a.table_remove_action_link, table.friendly_table a.table_move_down_action_link, table.friendly_table  a.table_move_up_action_link {
	display: block;
	cursor: pointer;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
	font-size: 0;
	text-indent: -100em;
	overflow: hidden;	
}

table.friendly_table tr.last_row td {
	padding-bottom: 10px;
}

table.friendly_table tr.friendly_default_row td {
	height: 0px;
	line-height: 0px;
	margin: 0;
	padding: 0;
	font-size: 0px;
	visibility: hidden;
	display: none;
}

table.friendly_table tfoot td {
}



/** Small Table **/

table.small_table {
	margin-top: 10px;
	border-left: 1px solid #ababab; /* darker grey than #b8b8b8 */
	width: 375px;
}
table.small_table th {
	font-size: 13px;
	background-color: #cedebd; /* olive-ish */
	border-top: 1px solid #b8b8b8;
	border-right: 1px solid #b8b8b8;
	text-align: left;
	padding: 2px 0px 2px 3px;
	margin: 0px;
}

table.small_table td {
	height: 22px;
	line-height: 14px;
	font-size: 13px;
	overflow: hidden;
	padding: 2px 4px 2px 4px;
	margin: 0px;
	border-bottom: 1px solid #b8b8b8; /* grey */
	border-right: 1px solid #b8b8b8;
	white-space: nowrap;
}

/*?
table.small_table td.small_table_link {
	width: 40px;
}
*/

table.small_table a.table_copy_action_link, table.small_table a.table_remove_action_link, table.friendly_table  a.table_move_down_action_link, table.friendly_table  a.table_move_up_action_link {
	display: block;
	cursor: pointer;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
	font-size: 0;
	text-indent: -100em;
	overflow: hidden;		
}

table.small_table tr.friendly_default_row td {
	height: 0px;
	line-height: 0px;
	margin: 0;
	padding: 0;
	font-size: 0px;
	visibility: hidden;
	display: none;
}

/*?
table.small_table .table_copy_action_cell {
	border-right: 0px;
}
*/


/** Full Table **/

/** Container for a full table **/
div.full_table_container {
	width: 90%;
	margin: 20px auto auto auto;
	text-align: center;
}

table.full_table {
	margin-top: 10px;
	border-left: 1px solid #ababab; /* darker grey than #b8b8b8 */
	width: 100%;
	margin: auto;
}
table.fixed_table {
	table-layout: fixed;
	margin-top: 10px;
	border-left: 1px solid #ababab; /* darker grey than #b8b8b8 */
	width: 850px;
}

table.full_table th, table.fixed_table th {
	font-size: 13px;
	background-color: #cedebd; /* olive-ish */
	border-top: 1px solid #b8b8b8;
	border-right: 1px solid #b8b8b8;
	text-align: left;
	padding: 2px 0px 2px 3px;
	margin: 0px;
}


table.full_table td {
	height: 22px;
	line-height: 14px;
	font-size: 13px;
	overflow: hidden;
	padding: 2px 4px 2px 4px;
	margin: 0px;
	border-bottom: 1px solid #b8b8b8; /* grey */
	border-right: 1px solid #b8b8b8;
}

table.fixed_table td {
	height: 22px;
	line-height: 16px;
	font-size: 13px;
	overflow: hidden;
	padding: 2px 4px 2px 4px;
	margin: 0px;
	border-bottom: 1px solid #b8b8b8; /* grey */
	border-right: 1px solid #b8b8b8;
}

table.full_table td {
	white-space: nowrap;
}

/** A row displaying defaults or something that needs to look differently **/
table.full_table tr.defaults td {
	background-color: #eee;
}

/** Links inside tables to perform some action on the row **/
a.table_action_link {
	display: block;
	cursor: pointer;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
	font-size: 0;
	text-indent: -100em;
	overflow: hidden;		
}

div.image_display {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
	font-size: 0;
	text-indent: -100em;
	overflow: hidden;		
}

/** Table text that is hidden because the link is replaced by an image **/
.image_display span, .table_action_link span, .table_copy_action_link span, .table_remove_action_link span, .table_move_down_action_link span, .table_move_up_action_link span {
	display: none;
}

td.center, th.center {
	text-align: center;
}

/**************************************************************
 * Utility Styles
 **************************************************************/

a.small_error {
	display: block;
	color: red;
	font: bold 16px Verdana, Arial, Sans;
	padding: 0;
	text-align: left;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	margin-left: 5px;
	float: left;
}

/** Highlight an error condition **/
.in_error {
	color: red;
}

/** Higlight an error condition ... differently; in_error is cleared when the form is
    submitted; error is not
 **/
.error {
	color: red;
	font-weight: bold;
}

/** A div that is offset on the left and bottom **/
div.lb_offset_container {
	margin-left: 20px;
	margin-bottom: 10px;
	text-align: left;
}

/** A div with the contents aligned left **/
div.align_left {
	text-align: left;
}

/** Clear a float **/
br.clear {
	clear: both;
}

/** A left floated div **/
div.inline {
	float: left;
}

/** A spacer div **/
div.spacer {
	height: 5px;
	clear: both;
}

/** A somewhat arbitrary left-aligned block */
.left_aligned_block {
	text-align: left;
	font-size: 12px;
	margin: 0px 0px 0px 25px;
}

/** Text that is indented **/
.indent_text {
	margin: 0px auto auto 10px;
}

/** Float any old thing left **/
.left {
	float: left;
}

.right {
	float: right;
}

/** I'm sure there's a reason for this **/
div.left_spacer {
	width: 10px;
	float: left;
}

/***************************************************************
 * Admin Styles
 * 
 * These styles are for specific elements on Administrative pages
 * and may be somewhat random
 *
 **************************************************************/

/** The following elements are for the Data Source and E-mail Server Test
    pages, which have some funky results containers. **/


/** The test results container **/
#test_container {
	margin: auto 75px auto 75px;
}

a.cancel_action, #start_test_action {
	float: left;
	cursor: pointer;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
}

/** The results themselves **/
#results {
	text-align: left;
	clear: both;
	height: 55%;
	overflow: auto;
	border: 1px solid grey;
	padding: 5px;
	margin-bottom: 10px;
}

/** An individual result message **/
#test_result_message {
	float: left;
	text-align: left;
	vertical-align: middle;
	line-height: 32px;
	margin-bottom: 10px;
}

/** The text of the result message **/
#test_result_message span {
	font-weight: 600;
	color: #940500;
	height: 32px;
}

/** A link to start the test **/
#start_link {
	float: left;
	text-align: left;
	line-height: 32px;
	vertical-align: middle;
}

/** The actual anchor of the link to start and the link to return from the test **/
#start_link a,#return_link a {
	margin-right: 10px;
}

/** A link to return from the test **/
#return_link {
	clear: both;
	float: left;
	text-align: left;
	line-height: 32px;
	vertical-align: middle;
}

/*?
#cancel_test {
	display: none;
}
*/

/** A container used while the test is in progrss **/
#in_progress {
	float: left;
	text-align: left;
	margin-bottom: 10px;
}


/** An indicator that the test is in progress **/
#in_progress_marker {
	float: left;
	background-repeat: no-repeat;
	width: 300px;
	height: 20px;
}

/** An indicator that the test has passed **/
#passed_marker {
	float: left;
	background-repeat: no-repeat;
	height: 32px;
	width: 32px;	
}

/** An indicator that the test has failed **/
#failed_marker {
	background-repeat: no-repeat;
	float: left;
	height: 32px;
	width: 32px;
}

/** Something dynamically added during the test **/
.header {
	font-weight: bold;
	line-height: 25px;
}


/***************************************************************
 * Alert Styles
 **************************************************************/

/**
 * Alert List/Status Page
 */

/** The link that allows the user to add a new Alert **/
#new_alert_link {
	float: left;
	cursor: pointer;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */	
}

/** Hide the inner text for image replacement **/
#new_alert_link span {
	display: none;
}

/** Header cell for the alert checked and activated columns **/
th.alert_checked_header, th.alert_activated_header {
	text-align: right;
	font-weight: bold;
}

/** The cell for the Alert Status **/
td.alert_status_cell a {
	margin: auto;
}

/** The indicator link that shows if the Alert is active or not **/
a.alert_action_link {
	float: left;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
}

/** Hide the text for image replacement **/
a.alert_action_link span {
	display: none;
}

/** The cell containing the name of the Alert **/
td.alert_name_cell {
	font-weight: bold;
}

/** The cells containing the checked and activated values **/
td.alert_checked_cell, td.alert_activated_cell {
	text-align: right;
	white-space: nowrap;
}

/** The cell containing the description of the Instrument **/
td.instrument_description_cell {
	vertical-align: top;
}


/** The following styles deal with the function that allows the user 
	to determine the size of the Alerts in the list so they can fit 
	more on the screen.  Not currently used **/
#size_div {
	clear: both;
	margin: 10px 0px auto auto;
	float: right;
	display: none;
}

#size_list  {
	list-style:none; 
	margin: 0px 5px 0px 0px;
	padding: 0;
}

#size_list li {
	float: left; 
	margin-right: 5px; 
	padding: 0;
}

/** The next 3 are the different images for the Alert status based on the size
    chosen by the user **/

#alert_big {
	float: left;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
	width: 14px;
	height: 32px;
}

#alert_medium {
	float: left;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
	width: 10px;
	height: 24px;
	margin-top: 8px;
}

#alert_small {
	float: left;
	cursor: pointer;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;		/* Required to prevent mouseover from having holes */
	width: 8px;
	height: 18px;
	margin-top: 14px;
}

.alert_list_48 th.alert_checked_header, .alert_list_48 th.alert_activated_header {
	font-size: 14px;
}

.alert_list_48 td {
	font-size: 14px;
	line-height: 14px;
}

.alert_list_48 alert_status_cell {
	width: 48px;
	height: 48px;
}

.alert_list_48 .alert_action_link {
	width: 48px;
	height: 48px;
}

.alert_list_32 th.alert_checked_header, .alert_list_32 th.alert_activated_header {
	font-size: 13px;
}

.alert_list_32 td {
	font-size: 13px;
	line-height: 13px;
}

.alert_list_32 alert_status_cell {
	width: 32px;
	height: 32px;
}

.alert_list_32 .alert_action_link {
	width: 32px;
	height: 32px;
}

.alert_list_24 th.alert_checked_header, .alert_list_24 th.alert_activated_header {
	font-size: 12px;
}

.alert_list_24 td {
	font-size: 12px;
	line-height: 12px;
}

.alert_list_24 alert_status_cell {
	width: 24px;
	height: 24px;
}

.alert_list_24 .alert_action_link {
	width: 24px;
	height: 24px;
}

/*?
#intervalTimeUnit {
	margin-left: 5px;
}
*/


/**
 * Alert Configuration Page
 */

/** Add some space between the Alert action and the interval **/
span.action_interval {
	margin-left: 5px;
}


/**
 * Alert Engine Management Page
 */

/** Progress indicator while the Alert Engine is starting or stopping **/
#alert_engine_progress {
	float: left;
	width: 16px;
	height: 16px;
	padding-bottom: 5px;
	margin-left: 10px;
	background-repeat: no-repeat;
}

/** Button for starting the Alert Engine **/
#alert_engine_start_action {
	margin-left: 10px;
}

/** Button for stopping the Alert Engine **/
#alert_engine_stop_action {
	margin-left: 10px;
}


/***************************************************************
 * Gauge Styles
 **************************************************************/
 
/** 
 * The following styles deal with the layout of gauges on a page
 * A page can be 1, 2, or 3 columns of various sizes divisible by 2 or 3
 * and adding up to 6, e.g. 2-2-2 means 3 columns each 2/6th or 1/3rd; 4-2
 * means 2 columns, one is 2/3rd and the other is 1/3rd, etc.  The page
 * is just a single table with x columns, each column containg a list of
 * gauges.
 */

/** The dropdown that displays the page layout choices **/
#layout_action_container {
	background-color: #666;
}

/** The link that actually changes the layout **/
#layout_action_container a.layout_action_link {
	width: 64px;
	height: 64px;
	display: block;
}
 
img.layout_image {
	border: 0px;
}

/** The table used to layout the Gauges on a Page **/
table.gauge_layout_table {
	margin: 8px 0px 0px 0px;
	padding: 0;
	width: 98%;
	table-layout: fixed;
}

table.gauge_layout_table td {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px; 
}

/** The table column for a Page with only one column of Gauges **/
td.gauge_layout_column_600 {
	vertical-align: top;
	width: 100%;	
}

/** The table column for a Page with only three columns of Gauges **/
td.gauge_layout_column_222 {
	vertical-align: top;
	width: 32%;	
}

/** The left table column for a Page with two columns (60/40) of Gauges **/
td.gauge_layout_column_240_left {
	vertical-align: top;
	width: 39%;	
}

/** The right table column for a Page with two columns (60/40) of Gauges **/
td.gauge_layout_column_240_right {
	vertical-align: top;
	width: 59%;
}

/** The left table column for a Page with two columns (50/50) of Gauges **/
td.gauge_layout_column_330_left {
	vertical-align: top;
	width: 49%;	
}

/** The right table column for a Page with two columns (50/50) of Gauges **/
td.gauge_layout_column_330_right {
	vertical-align: top;
	width: 49%;
}

/** The left table column for a Page with two columns (40/60) of Gauges **/
td.gauge_layout_column_420_left {
	vertical-align: top;
	width: 59%;
}

/** The right table column for a Page with two columns (40/60) of Gauges **/
td.gauge_layout_column_420_right {
	vertical-align: top;
	width: 39%;	
}

/** The container for an individual Gauge **/
div.gauge {
	display: block; 
	margin: auto auto 20px;
	top: 0;
	left: 0;
	background-color: #fff;
}

/** The box that shows the current drop position during a Gauge drag-n-drop **/
/*?
.gauge_placeholder {
	border: 2px dotted #ccc;
}
*/

/** The container for the Gauge header which shows the name and the Gauge actions **/
div.gauge_header {
	background-color: #93D056;
	border-top: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	width: 100%; 
	margin: 0;
	display: block;
}

/** The layout table for the Gauge header **/
table.gauge_header_table {
	width: 100%;
	table-layout: fixed;
	border: 1px solid #ece9d8; 
}

/** The cell that displays the Gauge name **/
td.gauge_header_title_cell {
	cursor: move;
	width: 70%;
	overflow: hidden;
}

td.gauge_header_title_cell_readonly {
	cursor: auto;
	overflow: hidden;
}

/* The span holding the Gauge title */
span.gauge_name {
	margin-left: 3px;
	padding-left: 2px;
	white-space: nowrap;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
}

span.gauge_name a {
	color: #000;
}

span.gauge_name a:hover {
	color: #940500;
}

/** The cell that displays the Gauge actions **/
td.gauge_header_action_cell {
	width: 30%;
	overflow: hidden;
	white-space: nowrap;
	text-align: right;
}

/** The layout table for the Gauge actions **/
td.gauge_header_action_cell table {
	margin: 0px 0px 0px auto;
	text-align: right;
}

/** The actual links for the Gauge actions; usually image replaced with icons **/
a.gauge_header_action {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: #93D056;
	cursor: pointer;
	margin-right: 2px;
}

/** A container for Gauge actions that cannot fit in the header **/
div.gauge_header_more_actions {
	background-color: #93D056;
	position: absolute;
	margin: 0;
	border-left: 1px solid #ece9d8;
	border-bottom: 1px solid #ece9d8;
	border-right: 1px solid #ece9d8;
	border-top: 1px solid #ece9d8;
}

/** The action links within the additional action container **/
div.gauge_header_more_actions div {
	margin: 5px 0px 0px 0px;
}

/** The container for the body area of the gauge that will show the actual contents **/
div.gauge_contents {
	border: 1px solid #d3d3d3;
	width: 100%;
	overflow-x: auto;
}



/**
 * The following styles are for the default Gauge tabular displays.
 * 
 * The standard table will not scroll, but may cause the page to scroll.
 * The scroll table has a fixed height and will scroll within that height.
 */
 
div.gauge_scroll_table_container {
	overflow: auto;
	margin: 0 auto;
	}

div.gauge_scroll_table_container table {
	border: none;
	}
	
div.gauge_scroll_table_container table>tbody	{  /* child selector syntax which IE6 and older do not support*/
	overflow: auto;
	overflow-x: hidden; 
	height: 200px;
	}
	
div.gauge_scroll_table_container thead tr	{
	position:relative; 
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	}
	
div.gauge_scroll_table_container table td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

/** The main contents of the Gauge when shown in a table **/
table.gauge_table, table.gauge_scroll_table {
	width: 100%;
}

table.gauge_table th, table.gauge_scroll_table th {
	font-size: 12px;
	padding: 2px 0px 2px 3px;
	margin: 0px 0px 0px 0px;
	background-color: #edf2f6;
	text-align: left;
}

table.gauge_table td, table.gauge_scroll_table td { 
	height: 22px;
	line-height: 14px;
	font-size: 12px;
	padding: 2px 5px 2px 5px;
	margin: 0px;
	white-space: nowrap;
	overflow: hidden;
}

/** Allows the scrolling table to scroll **/
/*<!--
div.gauge_scroll_table_container thead {
	background-color: blue;
	overflow: none;
}

div.gauge_scroll_table_container tbody {
	background-color: red;
	overflow: auto;
}
-->*/

/** Gauge Configuration Styles **/

#parameter_list {
	margin-top: 5px;
	width: 650px;
	font: normal 13px "trebuchet MS", Verdana, Arial, Sans; /*? necessary? */
	padding: 0px 3px 2px 0px;
}

table#parameter_list tr th {
	height: 28px;
	white-space: nowrap;
}
table#parameter_list tr td {
	line-height: 24px;
	white-space: nowrap;
}
table#parameter_list tr td.first {
	color: #666;
	font-weight: bold;
}
table#parameter_list tr th.lock {
	text-align: center;
}
table#parameter_list tr th {
	white-space: nowrap;
	text-align: left;
	font-size: 13px;
	font-weight: bold;
}

select.gauge_parameters_saveto {
	width: 300px;
}

a.gauge_parameter_locked, a.gauge_parameter_unlocked {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: #fff;
	cursor: pointer;
	overflow: hidden;	
	font-size: 0;
	text-indent: -100em;
}

div.gauge_configure {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	margin: 0;
	width: 750px;
}

div.gauge_configure_container {
	padding: 0;
	padding: 10px 10px 0px 10px;
	width: 750px;
}

div.gauge_configure_container div.form_elements {
	text-align: left;
	margin-left: 50px;
}

div#gauge_configure_button_container {
	height: 20px;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
}

div.gauge_configure_container h1 {
	margin-left: 20px;
	margin-right: 20px;
}

div.gauge_configure_container h2 {
	margin-left: 20px;
	margin-right: 20px;
	max-width: 600px;
}

#gauge_column_table {
	table-layout: fixed;
	width: 550px;
}

#gauge_column_table th {
	font-size: 12px;
}

#gauge_column_table td {
	overflow: hidden;
}

#gauge_column_table tr.first_row td a.gauge_columns_move_up_action_link {
	display: none;
}

#gauge_column_table tr.last_row td a.gauge_columns_move_down_action_link {
	display: none;
}

#gauge_column_table tr.last_row td {
	padding-bottom: 0px;
}

div.gauge_configure_display {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	margin: 0;
	padding: 0;
	width: 750px;
	text-align: center;
}

div.gauge_configure_display_container h1 {
	margin-left: 20px;
	margin-right: 20px;
}

div.gauge_configure_display_container h2 {
	margin-left: 20px;
	margin-right: 20px;
	max-width: 700px;
}

div.gauge_configure_display_container div.form_elements {
	padding: 0px 0px 0px 0px;
	margin: 15px auto auto auto;
	text-align: left;
	width: 680px;
}

div.gauge_configure_display_container span.form_element_label {
	width: 100px;
	float: left;
	text-align: right;
	font-weight: bold;
}

div.gauge_configure_display_container div.form_element_contents {
	float: right;
	text-align: left;
	width: 575px;
}

a.gauge_columns_copy_action_link, a.gauge_columns_remove_action_link, a.gauge_columns_move_down_action_link, a.gauge_columns_move_up_action_link {
	display: block;
	cursor: pointer;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
}

a.gauge_columns_move_up_action_link {
	display: block;
}

a.gauge_columns_move_down_action_link {
	display: block;
}

div#gauge_column_picker {
	top: 0px;
	left: 0px;
	width: 400px;
	height: 350px;
	text-align: left;
	overflow: hidden;
}

div.gauge_error_container {
	text-align: center;
	height: 50px;
	position: relative;
	margin-top: 15px;
}

span.gauge_error {
	color: #940500;
	font-size: 13px;
	font-weight: bold;
}

span.gauge_error_internal {
	color: #fff;
	display: none;
}

div.gauge_info_container {
	text-align: center;
	height: 50px;
	position: relative;
	margin-top: 15px;
}

span.gauge_no_data {
	color: #940500;
	font-weight: bold;
}

/***************************************************************
 * Minimal Styles
 *
 * Styles for pages that do not follow the standard template;
 * these are mostly pages that appear before the User is logged
 * in.
 **************************************************************/

body#minimal {
	text-align: center;
	background-color: #edf2f6;
	color: #538FDC;
}

#minimal h1 {
	text-align: left;
	font-size: 16px;
	margin: 20px auto auto 25px;
}

#minimal h2 {
	text-align: left;
	margin: auto 25px auto 25px;
	padding: 0;
}

#minimal table.center_table {
	height: 100%;
	width: 700px;
	margin: auto;
}

#minimal table.center_table td {
	text-align: center;
	height: 100%;
}

#minimal div.content_container {
	margin: auto;
	text-align: center;
	padding: 20px 0px 10px 0px;
	border: 2px solid #538FDC;
	background-color: #fff;
}

/*?
#minimal table {
	width: 99%;
	margin: 0;
}

*/

/** The left side of the container that shows the logo **/
#minimal .logo_container {
	width: 250px;
	height: 200px;
	margin: 10px 20px auto 20px;
	text-align: center;
	padding-top: 20px;
}

/** The container for the version **/
#minimal div.application_info {
	padding-top: 10px;
	line-height: 30px;
	text-align: center;
	margin: auto;
	width: 200px;
}

/** The application name **/
#minimal div.application_name {
	font-weight: bold;
	font-size: 20px;
	margin: 10px 0px 0px 0px;
	padding: 0;
}

/** The application version **/
#minimal span.application_version {
	font-size: 14px;
}

#minimal td.divider {
	border-right: 2px solid #538FDC;
	width: 0px;
	margin: 0px;
	padding: 0px;
}

#minimal #remember_contents>#remember_element {
	margin-top: 2px;
}


/** These styles are covered in the form section; 
    the sizes are different for the minimal containers **/

/*?
#minimal div.form_container {
	width: 400px;
}
*/

#minimal div.form_elements {
	width: 400px;
	margin-top: 10px;
}

#minimal form>div.form_elements {
	margin-top: 20px;
}

#minimal span.form_element_label {
	width: 100px;
}

#minimal div.form_element_contents {
	width: 275px;
}

#minimal div.required_fields_missing {
	margin-left: 25px;
}

#modal_overlay,#progress_overlay {
	border: 0px;
	z-index: 199;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 30;
	display: none;
}

/**
 * Styles for single and list pages
 */
 
div.single_section {
	margin: 12px 75px 0px 75px;
	text-align: left;
	border: 1px solid #ccc;
}

/* This is needed because the 100% width table inside single_section 
   on view/list expands the parent out past the edge
 */
div.single_section_contents {
	width: 100%;
}

div.single_section_title {
	margin: 0;
	padding: 0;
	height: 20px;
	background-color: #93D056;
	color: #000;
	font-weight: bold;
	font-size: 13px;
/*	text-transform: uppercase; */
}

div.single_section_title span {
	margin-left: 5px;
}

span.single_subsection_title {
	margin-top: 5px;
	font-weight: bold;
	color: #666;
}

div.single_subsection {
	margin-left: 5px;
}

div.single_section_contents {
	margin: 0;
	padding: 0;
}

table.single_field_list td {
	line-height: 14px;
	font-size: 85%;
}

div#single_tabs {
	margin: 20px 75px 0px 75px;
	text-align: left;
}

div#single_tabs span.single_tab_title {
	background-color: #538FDC;
	position: relative;
	margin: 0;
	padding: 5px 5px 5px 5px;
}

div#single_tabs span.current {
	background-color: #93D056;
	padding-bottom: 7px;
}

div#single_tabs a {
	font-size: 90%;
}

div#single_tabs span.current a {
	font-weight: bold;
}

div#single_tabs span.hover {
	background-color: #526CAE;
}

a.single_tab_link {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
}

a.single_tab_link:hover {
	color: #fff;
}

div.single_tab_content {
	border: 1px solid #ccc;
	border-top: 10px solid #93D056;
	margin: 0;
	margin-top: 7px;
	padding: 0;
}

table.single_list {
	margin: 0;
	padding: 0;
	width: 100%;
}

a.sortheader {
	color: #000;
}

a.sortheader:hover {
	color: #940500;
}

table.single_list thead tr {
	background-color: #edf2f6;
}

table.single_list thead td {
	padding-left: 3px;
	line-height: 24px;
	font-weight: bold;
	font-size: 14px;
}

table.single_list td {
	line-height: 20px;
	font-size: 85%;
	padding-left: 3px;
}

a.popup_list_link {
	cursor: pointer;
}

div.popup_list {
	display: none;
	background-color: #fff;
	border: 1px solid black;
	width: 200px;
	margin: 0;
	padding: 0;
}

div.popup_list ul {
	padding: 5px;
	list-style: none;
	margin: 0;
	float: left;
}

div.popup_list ul li {
	margin: 0;
	padding: 0;
}

a.popup_close {
	float: right;
	margin-top: 2px;
	display: block;
	cursor: pointer;
	width: 14px;
	height: 16px;
	background-repeat: no-repeat;
	overflow: hidden;	
	background-color: #fff;	/* Required to prevent mouseover from having holes */
}


/**
 * Styles for search and search results
 */
 
#search_container {
	margin: auto 75px auto 75px;
	padding-top: 5px;	
}

div.search_results {
	margin: 0px 75px 0px 75px;
	text-align: left;
} 

span.search_summary {
	font-weight: bold;
	line-height: 30px;
}

span.search_item {
	margin-left: 10px;
}

span.search_more {
	margin-left: 5px;
	line-height: 30px;
}


/**
 * Gauge Help
 */
div.gauge_help h3 {
	font-size: 12px;
	margin: 0;
	padding: 0;
}

div.gauge_help hr.help_divider {
	margin: 30px 20px 10px 20px;
}

div.gauge_result_description {
	margin-bottom: 20px;
}

div.instrument_help {
	margin-bottom: 20px;
}

span.gauge_note_user {
	margin-right: 20px;
	color: #666;
}

span.gauge_note_date {
	color: #666;
}

table#datePicker_table {
}

div.calendar { 
	z-index: 300;
}

a.calendar_widget {
	display: block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	position: relative;
}

a.calendar_widget:hover {
	border: 1px solid black;
}

	
.transfer_box_table {
}

#transfer_box_move_from, #transfer_box_move_to {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: #fff;
}

a.transfer_box_move_from, a.transfer_box_move_to {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: #fff;
}
a.transfer_box_move_down, a.transfer_box_move_up {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-color: #fff;
}

#transfer_box_move_from, #transfer_box_move_to {
	text-indent: -100em;
	overflow: hidden;
}

a.transfer_box_move_from, a.transfer_box_move_to {
	text-indent: -100em;
	overflow: hidden;
}
a.transfer_box_move_down, a.transfer_box_move_up {
	text-indent: -100em;
	overflow: hidden;
}

#in_progress_popup {
	z-index: 500;
	width: 100px;
	height: 50px;
	position: absolute;
	margin: auto;
	background-color: #edf2f6;
	text-align: center;
 	border: 4px outset #538FDC;
}

#in_progress_popup span {
	line-height: 50px;	/** Clever trick to vertically center a span inside a div **/
	font-weight: bold;
	color: black;
}

#instrument_select_display_row td {
	padding-top: 20px;
}

div.address {
	margin-top: 3px;
	margin-bottom: 3px;
}


div.instrument_test_results {
	width: 750px;
	height: 650px;
	overflow:auto;
	text-align: left;
	margin: 0;
	padding: 10px 10px 10px 10px;
}

div.release_notes {
	margin: 0px 100px 0px 0px;
	text-align: left;
}

.tiny {
	font-size: 1%;
}

div.date_picker_description {
	margin: 0px 20px 10px 20px;
	padding: 2px;
	border: 1px solid #666;
	background-color: #ffc;
}

span.select_data {
	display: none;
}
span.data {
	display: none;
}

table.popup_table {
	width: 100%;
}

.red_border {
	border: 1px solid red;
}
.green_border {
	border: 1px solid green;
}
.blue_border {
	border: 1px solid blue;
}



/** AMS Styles

LMS Colors: 
	0d3d4b - dark green
	67999a - light green
	cccc9a - brownish
**/
div#ams_list_header {
	background-color: #cccc9a;
	border-top: 1px solid #d3d3d3;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
	width: 100%; 
	margin: 0;
	display: block;
}

div.ams_gauge_contents table.gauge_scroll_table th {
	background-color: #67999a;
}
div.ams_gauge_contents table.gauge_table th {
	background-color: #67999a;
}
div.ams_gauge_contents table.gauge_scroll_table th a {
}

div.autocomplete {
  position:absolute;
  width:350px;
  background-color:white;
  border:1px solid #888;
  margin:0px;
  padding:0px;
  z-index: 500;
}
div.autocomplete ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.autocomplete ul li.selected { background-color: #ffb;}
div.autocomplete ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:1px;
  height:18px;
  cursor:pointer;
  white-space: nowrap;
}

#requested_date_element {
  width: 100%;
}

table.side_by_side {
  border-top: 1px solid #ababab;
  border-bottom: 1px solid #ababab;
}

table.side_by_side th {
  background-color: #cedebd;
  border-bottom: 1px solid #ababab;
  border-right: 1px solid #ababab;
  width: auto;
  white-space: nowrap;
  text-align: right;
  padding: 2px 10px 2px 0;
  font-weight: normal;
}

table.side_by_side td {
  border-bottom: 1px solid #ababab;
  border-right: 1px solid #ababab;
  padding-left: 5px;
  width: 300px;
}
table.side_by_side td.last, table.side_by_side th.last {
  border-bottom: 0;
}