/*
================================================================================
RISKCO USERS LICENCE
====================


SCHEME COLOURS
==============

Riskco Blue Strong ..... #AD1F36     RGB = 
Riskco Blue Medium ..... #D92644     RGB = 


OTHER COLOURS
=============

Riskco Yellow Light ........ #FFFFDD

Riskco Grey Memo ........... #555555
Riskco Grey Disabled ....... #777777

Riskco Red Memo ............ #BB0000


DISPLAY SIZES - MENU & REPORTS
==============================

The menu has a fixed width of 260px, common to all display sizes.

The horizontal header 'bar' has a fixed width of 1040px. Combined with 
the menu width, this gives a total width of 1300px.

The menu HEIGHT should be the same as the report-display height, so make
sure the following style definitions have the SAME 'height' property 
values:
    
    div.sdmenuFrame
    iframe.riskcoReportFrame

NOTE: The iFrame WIDTH determines the report-display width.

Current width/height size for reports:

    width: 1040px;
    height: 760px;

Alternative width/height size for reports - not tested:

    width:  860px;
    height: 760px;
    
Or:

    width:  860px;
    height: 540px;

To change report-display WIDTH, set the SAME value for the 'width' property 
in the following style definitions:

    iframe.riskcoReportFrame

To change report-display HEIGHT, set the SAME value for the 'height' property 
in the following style definitions:

    div.loginFrame
    div.sdmenuFrame
    iframe.riskcoReportFrame


DISPLAY SIZES - OPTION FRAMES
=============================

All 'option' JSPs use the same option-frame DIVs to display FORM content. There are various styles for LIST content.

The current option-frame WIDTH setting is:

    width: 422px;

To change sizes for option-frames, set the following style definitions:

    div.optionFrame (width only)


TEST OUTLINES BORDERS
=====================

    border: 1px solid pink;
    border: 1px solid green;




================================================================================
*/




/*
================================================================================
GLOBAL STYLES
================================================================================
*/


/*
 * Main Frame.
 *
 * This frame encloses everything below the header-frame, including 
 * the menu elements.
 *
 * The TOP style setting ensures MENU elements appear immediately 
 * below the header BAR - without a vertical gap.
 *
 * The 'notional' (visual) width of the main-frame is 652px. The 
 * I-Frame that fits within this main-frame (see below) has its width 
 * set so that its right border aligns with the 652px point on the 
 * main-frame.
 * 
 * The actual width of the main-frame MUST be 10px wider and 10px 
 * higher than the combination of 'menu' and 'child' frames it 
 * encloses to accommodate button frames that have 10px margins (!)
 */
div.riskcoMainFrame {
    position: absolute;
    z-index: 1;
    top: 57px;
    left: 10px;
    width: 95%;
    border-radius: 15px;
}


/* 
 * Images - all images are displayed WITHOUT borders (!)
 */
img {
    border: 0px none #FFFFFF;
}


/*
 * Anchor Tags.
 */
a {
    text-decoration: none;
}


/*
 * Coloured memos and prompts.
 */
span.blue {
    color: #AD1F36;
}
span.blueMedium {
    color: #D92644;
}


/*
 * Grey memos and prompts.
 */
span.grey {
    color: #555555;
}
span.greyLight {
    color: #777777;
}
td.grey,
td.memo {
    color: #555555;
}
td.prompt {
    color: #777777;
}


/*
 * Red memos and prompts.
 */
span.red,
span.red-normal {
    color: #BB0000;
}
span.red-normal {
    font-weight: normal;
}

button {
	border-width: 1px;
	border-radius: 4px;
}

td button {
	border: none;
	background-color: transparent;
}

td button[name^=delete],
td button[name^=remove] {
	border: none;
	background-color: transparent;
	position: relative;
	top: -8px;
}
 

/*
================================================================================
HEADER STYLES
================================================================================
*/


/*
 * Header: Frame.
 */
div.riskcoHeaderFrame {
    position: absolute;
    width: 95%;
    top: 0px;
    left: 10px;
    line-height: normal;
    /*
    border: 1px solid pink;
    */
}
/*
 * Header Frame Logo Image.
 */
div.headerLogoImage {
    position: relative;
    float: left;
    top: 0px;
    left: 0px;
    /*
    */
}
/*
 * Header: Login Memo.
 */
div.headerLoginMemo {
    position: relative;
    float: left;
    margin-left: 20px;
    top: 32px;
    font-size: 8pt;
    font-family: Arial, sans-serif;
    font-weight: normal;
    color: #999999;
    text-decoration: none;
    background: #FFFFFF;
    /*
    */
}
/*
 * Header: Options Frame - Common.
 *
 * Floated to the RIGHT.
 * 
 * HEIGHT same as LOGO IMAGE and "div.headerOptionsReports" below.
 */
div.headerOptionsCommon {
    position: relative;
    float: right;
    height: 50px;
    width: 300px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-weight: bold;
}
/*
 * Header: Options Frame - Reports.
 * 
 * HEIGHT same as LOGO IMAGE and "div.headerOptionsCommon" above.
 *
 * WIDTH = LEFT 550px + 750px = 1300px = div.headerBarReports width (below).
 */
div.headerOptionsReports {
    position: absolute;
    left: 550px;
    height: 50px;
    width: 750px;
}
/*
 * Header: Options.
 */
div.headerOption {
    float: right;
    position: relative;
    top: 32px;
    margin-left: 50px;
}
div.headerOption a {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #888888;
    text-decoration: none;
    background: #FFFFFF;
    /*
    */
}
div.headerOption a:hover   {
    color: #AD1F36;
    background-color: #FFFFFF;
    /*
    font-weight: bold;
    */
}
div.headerOption img {
    vertical-align: bottom;
}
/*
 * Header: Bar.
 *
 * Clears both float settings.
 *
 * NOTE: The background-color for this header-bar is set 
 * to MATCH the TOP part of the graduated background-image 
 * that frames the 'menu-section' <span> elements.
 */
div.headerBar,
div.headerBarReports {
    position: relative;
    clear: both;
    height: 7px;
    background-color: #DB3652;
}
div.headerBarReports {
    width: 1300px;
}




/*
================================================================================
MENU STYLES (SDMENU)
================================================================================
*/


/*
 * Menu Frame.
 */
div.sdmenuFrame {
    position: absolute;
    top: 0px;
    left: 0px;
    height: calc(100vh - 57px);
    color: #AD1F36;
    background-color: #AD1F36;
}
/*
 * Menu DIV.
 *
 * This parent DIV element contains all the DIV, SPAN and ACHOR-TAG 
 * elements that constitute the menu-sections and their menu-items.
 * 
 * IMPORTANT: Several other style elements are dependant on the 
 *            menu WIDTH setting here. If you change this, do a 
 *            search-and-replace for 'div.sdmenu' (!)
 */
div.sdmenu {
    width: 260px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    color: #FFFFFF;
}
div.sdmenu div {
    background: url(../images/gradatedBg.gif) repeat-x;
    overflow: hidden;
}
/*
 * Child DIV elements must belong to one of the three DIV styles declared 
 * below.
 *
 * IMPORTANT: Do NOT use 'anonymous' child DIVs - ie, DIVs that are not 
 *            assigned a style class - because the JavaScripts that operate 
 *            on these elements will choke (!)
 *
 * IMPORTANT: The menu-spacer DIV should be used with a single "&nbsp;" 
 *            (non-breaking-space) HTML entity, and the height of this 
 *            DIV must be always be zero (!)
 */
div.sdmenu div.expanded {
    height: auto;
}
div.sdmenu div.collapsed {
    height: 30px;
}
div.sdmenu div.spacer {
    display: block;
    margin-top: 7px;
    height: 0px;
}
/*
 * Child SPAN elements are used to identify menu SECTIONS.
 */
div.sdmenu div span {
    height: 30px;
    display: block;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 25px;
    padding-right: 25px;
    border-bottom: 2px solid #AD1F36;
    font-weight: bold;
    color: #FFFFFF;
    cursor: default;
    background: url(../images/menuArrowExpanded.gif) no-repeat 10px center;
}
div.sdmenu div span:hover {
    cursor: pointer;
}
div.sdmenu div.collapsed span {
    background-image: url(../images/menuArrowCollapsed.gif);
}
div.sdmenu div.collapsed span.currentMenuSection {
    background-image: url(../images/menuArrowCollapsedCurrent.gif);
}
/*
 * Child ANCHOR-TAG elements are used to identify menu ITEMS.
 */
div.sdmenu div a {
    border-left: 2px solid #AD1F36;
    border-right: 2px solid #AD1F36;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #AD1F36;
    font-weight: bold;
    text-decoration: none;
    color: #AD1F36;
    background: #FFFFFF;
}
div.sdmenu div a.current {
    color: #AD1F36;
    background: #FFFFFF url(../images/menuArrowLink.gif) no-repeat right center;
}
div.sdmenu div a:hover {
    color: #555555;
    text-decoration: none;
    background: #FFFFFF url(../images/menuArrowLinkGrey.gif) no-repeat right center;
}
div.sdmenu div a.current:hover {
    color: #AD1F36;
    text-decoration: none;
    background: #FFFFFF url(../images/menuArrowLink.gif) no-repeat right center;
    cursor: default;
}
div.sdmenu div a.disabled {
    color: #777777;
    background: #FFFFFF;
}
div.sdmenu div a.disabled:hover {
    color: #777777;
    text-decoration: none;
    background: #FFFFFF;
    cursor: default;
}
/*
 * IMPORTANT: width must be SAME as the parent 'div.sdmenu' element, above (!)
 */
div.sdmenu div.logout {
    position: absolute;
    bottom: 2px;
    width: 260px;
}
div.sdmenu div.logout a {
    display: block;
    border-left: 2px solid #AD1F36;
    border-right: 2px solid #AD1F36;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #AD1F36;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    background: #AD1F36;
    /*
    */
}
div.sdmenu div.logout a:hover   {
    color: #555555;
    background-color: #FFFFFF;
}
/*
 * Table tag is used to display Copyright and Version details at the bottom.
 */
div.sdmenu table {
    position: absolute;
    left: 5px;
    bottom: 2px;
    font-size: 8pt;
}
div.sdmenu table a {
    color: #FFFFFF;
}




/*
================================================================================
REPORT STYLES (I-FRAME)
================================================================================
*/


/*
 * I-Frame
 *
 * IMPORTANT: Height must be SAME as 'div.sdmenuFrame' menu-height, above  (!)
 *            Left indent-spacing must be SAME as 'div.sdmenu' WIDTH, above (!)
 * 
 * NOTE 1px offset between LEFT and WIDTH values: the combined total being 1300px.
 * 
 * Small:  W-860px x H-540px
 * Medium: W-1090px x H-760px
 */
iframe.riskcoReportFrame {
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 259px;
    width: 1041px;
    height: 760px;
    border: none;
    /*
    height: 540px;
    */
}
/*
 * Tooltips - DIV container for tooltip messages.
 * NOTE: top/left attributes set dynamically - see JavaScript.
 */
div.tooltip {
    display: none;
    position: absolute;
    z-index: 101;
    padding: 4px 6px;
    border: 1px solid #CCCCCC;
    font-size: 8pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFDD;
    /*
    top: 5px;
    left: 26px;
    */
}
div.tooltip span {
    text-align: center;
    font-style: italic;
}
/*
 * Report-Progress Dummy Toolbar.
 * Only used in reportProgress.jsp.
 */
div.reportProgressToolbar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 600px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
/*
 * Report-Progress activity icon.
 * Only used in reportProgress.jsp.
 */
div.reportProgressBusyIcon {
    position: relative;
    top: 169px;
    left: 357px;
    width: 40px;
}




/*
================================================================================
COMMON - GENERAL
================================================================================
*/


/*
 * Dummy Toolbar.
 */
div.optionToolbar {
    position: absolute;
    top: 0px;
    left: 260px;
    height: 30px;
    width: 750px;
    background: url(../images/gradatedBg.gif) repeat-x;
    /*
    width: 600px; PREVIOUS
    border: 1px solid orange;
    z-index: 0;
    float: right;
    */
}
/*
 * Frame Title.
 */
div.optionFrameTitle {
    position: relative;
    width: 100%;
    margin-bottom: 2px;
    font-family: Arial, sans-serif;
}
div.optionFrameTitle span.title {
    position: relative;
    left: 0px;
    bottom: 0px;
    font-size: 10pt;
    font-weight: bold;
    color: #AD1F36;
}
div.optionFrameTitle span.memo {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size: 9pt;
    font-weight: normal;
    color: #555555;
}




/*
================================================================================
COMMON - LIST-FRAMES
================================================================================
*/


/*
 * List: Frames with various widths.
 *
 * Digits indicate frame pixel-width.
 *
 * IMPORTANT: The TOP and LEFT properties must be identical in 
 *            the following frame declarations:
 *
 *                optionListXXX  ... This section
 *                optionFrame    ... Below
 *
 * IMPORTANT: Do NOT use min-width (instead of width) because 
 *            headers become scambled in IE.
 */
div.optionList422Frame,
div.optionList3ColFrame,
div.optionList4ColFrame {
    position: absolute;
    top: 30px;
    left: 310px;
    border: 0px none #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    color: #AD1F36;
}
div.optionList422Frame {
    width: 422px;
}
div.optionList3ColFrame {
    width: 600px;
}
div.optionList4ColFrame {
    width: 630px;
}
/*
 * List: Common Height, Overflow, Font, Color and Border properties.
 * IMPORTANT: Height fixed at 442px for all lists.
 */
div.optionList422,
div.optionList3ColBox,
div.optionList4ColBox {
    position: relative;
    height: 442px;
    overflow: auto;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFFF;
    border: 1px solid #AD1F36;
    /*
    OPTIONS
    height: 442px;
    height: 362px;
    */
}
/*
 * List 400: Two-Column width properties.
 * Total width = 422px - 38px = 384px
 */
div.optionList422 td.optionListColumn1of2, 
div.optionList422 td.optionListColumn1of2Current, 
div.optionList422 td.optionListColumn1of2Visited {
    width: 212px;
}
div.optionList422 td.optionListColumn2of2, 
div.optionList422 td.optionListColumn2of2Current, 
div.optionList422 td.optionListColumn2of2Visited {
    width: 172px;
}
/*
 * List 600: Three-Column width properties.
 * Total width = 500px - 38px = 462px
 */
div.optionList3ColBox td.optionListColumn1of3,
div.optionList3ColBox td.optionListColumn1of3Current,
div.optionList3ColBox td.optionListColumn1of3Visited {
    width: 250px;
}
div.optionList3ColBox td.optionListColumn2of3, 
div.optionList3ColBox td.optionListColumn2of3Current, 
div.optionList3ColBox td.optionListColumn2of3Visited {
    width: 197px;
}
div.optionList3ColBox td.optionListColumn3of3,
div.optionList3ColBox td.optionListColumn3of3Current,
div.optionList3ColBox td.optionListColumn3of3Visited {
    width: 120px;
}
/*
 * List 630: Four-Columns width properties.
 * Total width = 630px - 38px = 592px
 */
div.optionList4ColBox td.optionListColumn1of4, 
div.optionList4ColBox td.optionListColumn1of4Current, 
div.optionList4ColBox td.optionListColumn1of4Visited {
    width: 200px;
}
div.optionList4ColBox td.optionListColumn2of4,
div.optionList4ColBox td.optionListColumn2of4Current,
div.optionList4ColBox td.optionListColumn2of4Visited {
    width: 170px;
}
div.optionList4ColBox td.optionListColumn3of4, 
div.optionList4ColBox td.optionListColumn3of4Current, 
div.optionList4ColBox td.optionListColumn3of4Visited {
    width: 110px;
}
div.optionList4ColBox td.optionListColumn4of4,
div.optionList4ColBox td.optionListColumn4of4Current,
div.optionList4ColBox td.optionListColumn4of4Visited {
    width: 112px;
}
/*
 * List: Common Table properties - No space between each line in the list.
 */
div.optionList422 table,
div.optionList3ColBox table,
div.optionList4ColBox table {
    border-collapse: collapse;
}
/*
 * List: Common Table-Detail properties.
 * IMPORTANT@ padding-left set to 4px for all TD elements.
 */
div.optionList422 td,
div.optionList3ColBox td,
div.optionList4ColBox td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 9pt;
    text-align: left;
    background-color: #FFFFFF;
}
/*
 * List: Common Anchor-Tags.
 */
div.optionList422 td a,
div.optionList3ColBox td a,
div.optionList4ColBox td a,
div.optionList422 td button,
div.optionList3ColBox td button,
div.optionList4ColBox td button {
    text-decoration: none;
    color: #555555;
}
/*
 * List: Common Anchor-Tag Hovers.
 */
div.optionList422 td a:hover,
div.optionList3ColBox td a:hover,
div.optionList4ColBox td a:hover,
div.optionList422 td button:hover,
div.optionList3ColBox td button:hover,
div.optionList4ColBox td button:hover {
    font-weight: bold;
}
/*
 * List: Common Current Selection Breadcrumb - Yellow BG Colour.
 */
div.optionList422 td.optionListColumn1of2Current,
div.optionList422 td.optionListColumn2of2Current, 
div.optionList3ColBox td.optionListColumn1of3Current, 
div.optionList3ColBox td.optionListColumn2of3Current, 
div.optionList3ColBox td.optionListColumn3of3Current, 
div.optionList4ColBox td.optionListColumn1of4Current, 
div.optionList4ColBox td.optionListColumn2of4Current, 
div.optionList4ColBox td.optionListColumn3of4Current, 
div.optionList4ColBox td.optionListColumn4of4Current {
    background-color: #FFFFD0;
}
/*
 * List: Common Visited Selection Breadcrumb - Gray BG Colour.
 */
div.optionList422 td.optionListColumn1of2Visited,
div.optionList422 td.optionListColumn2of2Visited, 
div.optionList3ColBox td.optionListColumn1of3Visited, 
div.optionList3ColBox td.optionListColumn2of3Visited, 
div.optionList3ColBox td.optionListColumn3of3Visited, 
div.optionList4ColBox td.optionListColumn1of4Visited, 
div.optionList4ColBox td.optionListColumn2of4Visited, 
div.optionList4ColBox td.optionListColumn3of4Visited, 
div.optionList4ColBox td.optionListColumn4of4Visited {
    background-color: #EAEAEA;
}
/*
 * List: Empty Memo DIV.
 */
div.optionListEmptyMemo {
    position: relative;
    top: 90px;
    text-align: center;
    color: #555555;
}
/*
 * List Header: Common DIV properties.
 */
div.optionList422Header,
div.optionList3ColBoxHeader,
div.optionList4ColBoxHeader {
    position: relative;
    height: 25px;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    color: #FFFFFF;
    background: url(../images/gradatedBg.gif) repeat-x;
    /*
    */
}
/*
 * List Header: Common SPAN properties.
 */
div.optionList422Header span.header1of2,
div.optionList422Header span.header2of2,
div.optionList3ColBoxHeader span.header1of3,
div.optionList3ColBoxHeader span.header2of3,
div.optionList3ColBoxHeader span.header3of3,
div.optionList4ColBoxHeader span.header1of4,
div.optionList4ColBoxHeader span.header2of4,
div.optionList4ColBoxHeader span.header3of4,
div.optionList4ColBoxHeader span.header4of4 {
    position: absolute;
    bottom: 4px;
    color: #FFFFFF;
}
/*
 * List Header 400: SPAN left-margins - align titles with their respective list columns.
 */
div.optionList422Header span.header1of2 {
    left: 5px;
}
div.optionList422Header span.header2of2 {
    margin-left: 221px;
}
/*
 * List Header 600: SPAN left-margins - align titles with their respective list columns.
 */
div.optionList3ColBoxHeader span.header1of3 {
    left: 5px;
}
div.optionList3ColBoxHeader span.header2of3 {
    margin-left: 259px;
}
div.optionList3ColBoxHeader span.header3of3 {
    margin-left: 462px;
}
/*
 * List Header 630: SPAN left-margins - align titles with their respective list columns.
 */
div.optionList4ColBoxHeader span.header1of4 {
    left: 5px;
}
div.optionList4ColBoxHeader span.header2of4 {
    margin-left: 210px;
}
div.optionList4ColBoxHeader span.header3of4 {
    margin-left: 385px;
}
div.optionList4ColBoxHeader span.header4of4 {
    margin-left: 500px;
}


/*
================================================================================
COMMON - FORM-FRAMES
================================================================================
*/


/*
 * Option Frame.
 *
 * This is the main 'parent-frame' for all form and list displays.
 *
 * Note that HEIGHT is NOT specified.
 *
 * IMPORTANT: The TOP and LEFT properties must be identical in 
 *            the following frame declarations:
 *
 *                optionListXXX  ... Above
 *                optionFrame    ... This section
 *
 * IMPORTANT: If you want WIDTH to be FLEXIBLE, set the width 
 *            to "auto" using a style-declaration. Example:
 *
 *            <div class="optionFrame" style="width: auto; min-width: 422px;">
 */
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px) {
  
  div.optionFrame {
    position: absolute;
    top: 4vh;
    left: 310px;
    width: auto;
    height: 100%;
    border: 0px none #FFFFFF;
    font-size: 9pt !important;
    font-family: Arial, sans-serif;
    color: #AD1F36;
    min-width: 280px;
}
}

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px)  {
  
  div.optionFrame {
    position: absolute;
    top: 4vh;
    left: 310px;
    width: auto;
    height: 100%;
    border: 0px none #FFFFFF;
    font-size: 9pt !important;
    font-family: Arial, sans-serif;
    color: #AD1F36;
    min-width: 725px;
}
}

@media screen 
  and (min-device-width: 1200px) {
  
  div.optionFrame {
    position: absolute;
    top: 4vh;
    left: 310px;
    width: auto;
    height: 100%;
    border: 0px none #FFFFFF;
    font-size: 9pt !important;
    font-family: Arial, sans-serif;
    color: #AD1F36;
    min-width: 1150px;
}
}
 
/*
 * Option Frame - Header Type.
 *
 * Alternative to above. Usage example: OptionStatusJSP
 */
div.optionFrameHT {
    position: absolute;
    top: 40px;
    left: 310px;
    width: 422px;
    border: 0px none #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    color: #AD1F36;
}
/*
 * Form.
 */
div.optionFrameForm {
    position: relative;
    width: 100%;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
    border: 1px solid #AD1F36;
    /*
    min-height: 396px; OLD INTERIM SETTING (!)
    height: 396px; ORIGINAL SETTING (!)
    overflow: auto;
    */
}
/*
 * White-on-blue type header-band, as in dialogs.
 */
div.optionFrameForm div.header {
    position: relative;
    width: 100%;
    height: 25px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
div.optionFrameForm div.header div.title {
    position: relative;
    left: 8px;
    float: left;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 25px;
}
/*
 * Table Title.
 * Sits just above a <table> element.
 */
div.optionFrameFormTableTitle {
    position: relative;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
}
/*
 * Form Table.
 *
 * Note: Field labels or references should employ either "td.rightAlign" or
 * "td.leftAlign" definitions to control the behaviour of <TD> contents within
 * these tables. See the <TD> definitions in the FORM field references below.
 *
 * Note: The 'border-spacing' attribute increases the VERTICAL spacing between
 * table cells. Horizontal spacing is not affected.
 *
 * IMPORTANT: Do NOT set any top-margin spacing.
 */
div.optionFrameForm table {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    border-spacing: 0pt 2pt;
}
div.optionFrameForm caption {
    text-align: left;
}
/*
 * Form Memo.
 * Grey title/prompt - single line.
 * Digits indicate top-margin height.
 */
div.optionFrameFormMemo5,
div.optionFrameFormMemo15,
div.optionFrameFormMemo20,
div.optionFrameFormMemo25 {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    line-height: 16px;
    color: #555555;
    background-color: #FFFFFF;
}
div.optionFrameFormMemo5 {
    margin-top: 5px;
}
div.optionFrameFormMemo15 {
    margin-top: 15px;
}
div.optionFrameFormMemo20 {
    margin-top: 20px;
}
div.optionFrameFormMemo25 {
    margin-top: 25px;
}
/*
 * Vertical alignment is for 16x16 pixel icons: this 
 * setting aligns the memo text to the icon.
 */
div.optionFrameFormMemo5  img,
div.optionFrameFormMemo15 img,
div.optionFrameFormMemo20 img, 
div.optionFrameFormMemo25 img {
    vertical-align: -22%;
}
/*
 * Use this for text that appears immediately below prompt-icons,
 * such as the exclamation-mark image used to draw attention to 
 * an important prompt.
 */
div.optionFrameFormMemoSubtext {
    margin-top: 5px;
    margin-bottom: 20px;
}
div.optionFrameFormMemoSubDiv {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
/*
 * Button frames - Outer.
 *
 * These DIV accommodate buttons OUTSIDE of form and list DIVs, typically
 * the standard "submitXXX" (white-on-blue type) buttons.
 * 
 * The DIVs are styled with "absolute" positions (to enable the setting of 
 * left/right margins with zero values to affect left/right alignments) so 
 * these DIVs MUST be placed within another frame DIV such as the "optionFrame".
 */
div.optionButtonsFormOuterLeftAlign,
div.optionButtonsFormOuterRightAlign {
    position: absolute;
    z-index: 100;
    margin-top: 20px;
    margin-bottom: 20px;
}
div.optionButtonsFormOuterLeftAlign {
    left: -5px;
}
div.optionButtonsFormOuterRightAlign {
    right: 0px;
}
/*
 * The next two DIVs accommodate buttons WITHIN an "optionFrameForm" DIV, 
 * typically the option "submitOptionXXX" (blue-on-white type) buttons.
 * 
 * 1of2 sets vertical spacing (top and bottom margins).
 * 
 * 2of2 accommodates floating buttons set from the right-hand margin.
 * 
 * IMPORTANT: Both DIVs are required: 1of2 frames 2of2. Do NOT place any 
 *            other content within 1of2. Place buttons within 2of2.
 */
div.optionButtonsFormInner1of2 {
    position: relative;
    margin-top: 20px;
    margin-bottom: 15px;
    width: 100%;
    height: 24px;
}
div.optionButtonsFormInner2of2 {
    position: absolute;
    right: 15px;
}




/*
================================================================================
COMMON - FORM-FRAMES WITH TABS
================================================================================
*/


/* 
 * Tabs - Header.
 *
 * The 48px top-margin results in an actual top-margin spacing of 
 * 25px, which corresponds to the norm in this style sheet.
 *
 * The <SPAN> elements are used for current-selection tabs, and 
 * the <A> elements are used for the remaining alternative-selection 
 * tabs (which pop up by 1 pixel).
 *
 * IMPORTANT: Proceed with extreme caution if you intend to make 
 * any changes (!)
 */
div.optionFrameTabsHeader {
    position: relative;
    margin-top: calc(3vh);
}
/*
 * Memo/Title appears at the top-right, just above the "optionFrameTabsBox" DIV.
 */
div.optionFrameTabsHeader span.memo {
    position: absolute;
    right: 0px;
    bottom: 2px;
    font-size: 9pt;
    font-weight: normal;
    color: #555555;
}
/* 
 * The negative "bottom" attribute value ensures the list frame
 * blends into (overlaps with) the bordered frame which it sits on.
 */
div.optionFrameTabsHeader ul {
    position: absolute;
    bottom: -1px;
    margin: 0px;
    padding: 0px;
}
div.optionFrameTabsHeader ul li {
    display: inline;
    list-style: none;
}
div.optionFrameTabsHeader ul span {
    display: block;
    float: left;
    margin-right: 4px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 6px;
    border-left: 0.1em solid #AD1F36;
    border-right: 0.1em solid #AD1F36;
    border-top: 0.1em solid #AD1F36;
    border-bottom: 0.0em none #FFFFFF;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #AD1F36;
    background-color: #FFFFFF;
}
div.optionFrameTabsHeader ul button,
div.optionFrameTabsHeader ul a {
    display: block;
    float: left;
    margin-top: 1px;
    margin-right: 4px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-left: 0.1em solid #AAAAAA;
    border-right: 0.1em solid #AAAAAA;
    border-top: 0.1em solid #AAAAAA;
    border-bottom: 0.0em none #FFFFFF;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: #777777;
    background-color: #F4F4F4;
}
div.optionFrameTabsHeader ul button:hover,
div.optionFrameTabsHeader ul a:hover {
    margin-top: 0px;
    padding-bottom: 5px;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * Tabs - Box.
 *
 * IMPORTANT: Do NOT set "position" attribute to "relative" because
 * the tabs will break (!)
 *
 * IMPORTANT: You MUST use at least one <TABLE> element within this 
 * frame for the border outline to display as expected (!)
 */
div.optionFrameTabsBox {
    padding-bottom: 20px;
    clear: both;
    border: 1px solid #AD1F36;
   /* width: calc(75vw);*/
}
div.optionFrameTabsBoxMemoSubDiv {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 0px;
}
/*
 * Tabs - Box: Table.
 *
 * Note: Field labels or references should employ either "td.rightAlign" or
 * "td.leftAlign" definitions to control the behaviour of <TD> contents within
 * these tables. See the <TD> definitions in the FORM field references below.
 *
 * Note: The 'border-spacing' attribute increases the VERTICAL spacing between
 * table cells. Horizontal spacing is not affected.
 *
 * IMPORTANT: Do NOT set any top-margin spacing.
 */
div.optionFrameTabsBox table {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    border-spacing: 0pt 2pt;
}
div.optionFrameTabsBox caption {
    text-align: left;
}




/*
================================================================================
COMMON - FORM-FRAME INNER-LISTS
================================================================================
*/




/*
 * Form List: Single column.
 * Width = 422px (optionFrame DIV) - 40px (left/right margins) = 382px.
 * NOTE: The default font color is a non-standard light grey (#777777).
 *       Anchor-tags set the standard darker grey (#555555).
 */
div.optionFrameFormInnerList400 {
    position: relative;
    height: 404px;
    width: 382px;
    margin-top: 18px;
    margin-left: 20px;
    overflow: auto;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
    border: 1px solid #AD1F36;
}
/*
 * Table requires ZERO margin settings.
 */
div.optionFrameFormInnerList400 table {
    margin: 0px;
    border-collapse: collapse;
}
/*
 * Width = 382px - 22px (scrollbar) = 360px.
 */
div.optionFrameFormInnerList400 td {
    width: 360px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 9pt;
    text-align: left;
    background-color: #FFFFFF;
}
div.optionFrameFormInnerList400 td.default {
    background-color: #FFFFFF;
}
div.optionFrameFormInnerList400 td.current {
    background-color: #FFFFD0;
}
div.optionFrameFormInnerList400 td.visited {
    background-color: #EAEAEA;
}
/*
 * Hyperlink elements have the standard (darker) grey font colour.
 */
div.optionFrameFormInnerList400 td a,
div.optionFrameFormInnerList400 td button {
    text-decoration: none;
    color: #555555;
    /*
    color: #AD1F36;
    */
}
div.optionFrameFormInnerList400 td a:hover,
div.optionFrameFormInnerList400 td button:hover {
    font-weight: bold;
}
/*
 * Mini List.
 */
div.optionMiniList {
    position: relative;
    height: 82px;
    width: 340px;
    overflow: auto;
    margin-top: 2px;
    margin-left: 20px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFDD;
    border: 1px solid #AD1F36;
}
div.optionMiniList table {
    margin: 0px;
    border-collapse: collapse;
}
div.optionMiniList td.detail {
    width: 220px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.optionMiniList td.detail a {
    text-decoration: none;
    color: #777777;
}
div.optionMiniList td.detail a:hover {
    font-weight: bold;
}
div.optionMiniList td.option {
    width: 80px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.optionMiniList td.option a {
    text-decoration: none;
    color: #777777;
}
div.optionMiniList td.option a:hover {
    font-weight: bold;
}




/*
================================================================================
DIALOG JSP STYLES
================================================================================
*/


/*
 * Dialog Frame.
 */
div.dialogFrame {
    position: absolute;
    top: 35px;
    left: 310px;
    width: 410px;
    height: 270px;
    border: 2px solid #AD1F36;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFFF;
    /*
    border: 1px solid #AD1F36;
    border: 1px solid pink;
    */
}
/*
 * Centred activity icon.
 */
div.dialogFrameBusyIcon {
    margin-top: 50px;
    text-align: center;
}
/*
 * Title.
 */
div.dialogTitle {
    width: 370px;
    margin-top: 15px;
    margin-left: 20px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #AD1F36;
}
/*
 * Title line separtor.
 */
div.dialogTitleDecor {
    width: 370px;
    height: 15px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #AD1F36;
}
/*
 * Table contains INPUT fields - alternative to dialogMessage below.
 */
div.dialogTable {
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
}
div.dialogTable table {
    text-align: left;
    border-collapse: collapse;
}
/*
 * Messages - alternative to dialogTable above.
 */
div.dialogMessage {
    width: 370px;
    margin-top: 10px;
    margin-left: 20px;
}
div.dialogMessage span {
     font-weight: bold;
     color: #AD1F36;
}
/*
 * Button frame.
 */
div.dialogButtonFrame {
    position: absolute;
    z-index: 100;
    right: 10px;
    bottom: 10px;
}


/*
popup and primary button styling
*/

div.bootbox.modal {
	box-shadow:  5px 10px 10px #555;
}

div.modal-header {
	background-color: #AD1F36;
	color: #eee;
}

div.modal-content {
	font-size: 0.9em;
	color: #111;
}

.btn-primary {
	background-color: #AD1F36;
	color: #ddd;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: #C3223D;
	color: #ddd;
}

/*
Link formatting
*/

/* unvisited link */
a:link
button:link {
  color: #AD1F36;
  text-decoration: none;
  cursor: pointer;
}

/* visited link */
a:visited
button:visited {
  color: #821729;
  text-decoration: none;
  cursor: pointer;
}

/* mouse over link */
a:hover
button:hover {
  color: #821729;
  text-decoration: none;
  font-weight: bolder;
  cursor: pointer;
}

/* selected link */
a:active
button.active, button:active {
  color: #AD1F36;
  text-decoration: none;
  font-weight: bolder;
  cursor: pointer;
}

/*
================================================================================
DIALOG POP-UP STYLES - INCLUDING PROGRESS-BAR ELEMENTS
================================================================================
*/




/*
 * Dialog BG.
 */
div.popupDialogBG {
    position: absolute;
    z-index: 200;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
/*
 * Dialog Frames.
 */
div.popupDialogFrameAlert,
div.popupDialogFrameFlexible {
    position: absolute;
    z-index: 201;
    top: 90px;
    left: 315px;
    min-height: 180px;
    border-left:   1px solid #AD1F36;
    border-right:  1px solid #AD1F36;
    border-bottom: 1px solid #AD1F36;
    background-color: #FFFFFF;
    /*
    Previoulsy, without gradated background image:
    border: 2px solid #AD1F36;
    */
}
div.popupDialogFrameAlert {
    width: 410px;
}
div.popupDialogFrameFlexible {
    min-width: 410px;
}
/*
 * Dialog Title DIV.
 */
div.popupDialogFrameTitle {
    width: 100%;
    height: 26px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #AD1F36;
    background: url(../images/gradatedBg.gif) repeat-x;
    /*
    Previoulsy, without gradated background image:
    background-color: #AD1F36;
    */
}
/*
 * Dialog Title SPAN.
 */
div.popupDialogFrameTitle span {
    display: inline;
    position: relative;
    top: 4px;
    padding-left: 5px;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
}
/*
 * Dialog Title ANCHOR.
 */
div.popupDialogFrameTitle a {
    position: relative;
    float: right;
    right: 8px;
    margin-left: 10px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #DDDDDD;
    line-height: 25px;
}
div.popupDialogFrameTitle a:hover {
    font-weight: bold;
    color: #FFFFFF;
}
div.popupDialogFrameTitle a img {
    position: relative;
    top: 6px;
}
/*
 * Dialog Message.
 */
div.popupDialogFrameMessage {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #AD1F36;
    background-color: #FFFFFF;
}
/*
 * Dialog Button.
 */
div.popupDialogFrameButton {
    position: absolute;
    z-index: 100;
    right: 10px;
    bottom: 10px;
}
/*
 * Progress-Bar.
 */
div.dialogFrameProgressBar {
    height: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid #AD1F36;
    color: #AD1F36;
    background-color: #FFFFFF;
}
div.dialogFrameProgressBarFill {
    width: 10%;
    height: 18px;
    margin: 1px;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    background-color: #D92644;
}


/*
================================================================================
LOGIN STYLES
================================================================================
*/


div.loginFrame {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20%);    
    background-color: #AD1F36;
    border-radius: 10px;
    /*
    */
}

div.loginForm {
    display: inline-block;
    margin: 12px;
    min-height: 320px;
    min-width: 530px;
    border-style: solid;
    border-width: 5px;
    border-top-color: #821729;
    border-left-color: #821729;
    border-right-color: #C3223D;
    border-bottom-color: #C3223D;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFFF;
    /*
    border: 8px inset #005499;
    */
}
div.loginFormMemo {
    position: relative;
    top: 60px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #555555;
    background-color: #FFFFFF;
    text-align: center;
    /*
    width: 410px;
    */
}
div.loginFormTable {
    margin-top: 25px;
    margin-bottom: 20px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
    /*
    margin-left: 10px;
    */
}
div.loginFormTable table {
    border-collapse: collapse;
    margin-right: auto;
    margin-left: auto;
    /*
    text-align: center;
    text-align: left;
    */
    }




/*
================================================================================
COMMON - FORM-ELEMENTS
================================================================================
*/


/*
 * Sub-Heading - Left-aligned.
 */
td.subHeading {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #AD1F36;
    background-color: #FFFFFF;
    text-align: left;
}


/*
 * File Input - Browse button to upload file.
 */
input.file {
    color: #666666;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    background-color: #FFFFDD;
}


/*
 * Right-aligned field references (labels).
 */
td.rightAlign {
    text-align: right;
}
td.rightAlign100,
td.rightAlign100Top {
    width: 100px;
    text-align: right;
}
td.rightAlign100Top {
    vertical-align: top;
}
td.rightAlign120,
td.rightAlign120Top {
    width: 120px;
    text-align: right;
}
td.rightAlign120Top {
    vertical-align: top;
}
td.rightAlign150,
td.rightAlign150Top {
    width: 150px;
    text-align: right;
}
td.rightAlign150Top {
    vertical-align: top;
}
td.rightAlign200,
td.rightAlign200Top {
    width: 200px;
    text-align: right;
}
td.rightAlign200Top {
    vertical-align: top;
}


/*
 * Text input fields.
 */
input.text30,
input.text40,
input.text60 {
    padding: 4px;
    border-left: 1px solid #AD1F36;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #AD1F36;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFDD;
}
input.text30 {
    width: 210px;
}
input.text40 {
    width: 280px;
}
input.text60 {
    width: 320px;
}
textarea.text20,
textarea.text30 {
    position: relative;
    overflow: auto;
    width: 212px;
    border: 1px solid #AD1F36;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFDD;
}
textarea.text20 {
    height: 60px;
}
textarea.text30 {
    height: 76px;
}
/*
 * Width adjusted for 422px width in optionFrameForm
 */
textarea.textComments {
    position: relative;
    overflow: auto;
    width: 374px;
    height: 138px;
    border: 1px solid #AD1F36;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #555555;
    background-color: #FFFFDD;
}
/*
 * Vertical spacers.
 */
td.heightSpacer5 {
    height: 5px;
}
td.heightSpacer10 {
    height: 10px;
}
td.heightSpacer15 {
    height: 15px;
}
td.heightSpacer20 {
    height: 20px;
}
td.heightSpacer30 {
    height: 30px;
}
/*
 * Inputs: radio + checkbox + image.
 * Digits indicate TOP margin spacing in pixels.
 */
input.widget,
input.widget5,
input.widget10 {
    vertical-align: -2px;
}
input.widget5 {
    margin-top: 5px;
}
input.widget10 {
    margin-top: 10px;
}
/*
 * Labels.
 * Digits indicate RIGHT margin spacing in pixels.
 */
label.widget {
    color: #AD1F36;
    background-color: #FFFFFF;
}
label.widget10 {
    margin-right: 10px;
    color: #AD1F36;
    background-color: #FFFFFF;
}
/* 
 * Button: rul_loginSpringboard JSP ONLY.
 */
button.springboardApplicationButton {
    margin-top: 10px;
    width: 260px;
    height: 30px;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    border-radius: 6px;
    border: 1px solid #D92644;
    color: #FFFFFF;
    background: url(../images/gradatedBg.gif) repeat-x;
    cursor: pointer;
}

button:disabled.springboardApplicationButton,
button[disabled].springboardApplicationButton{
   	margin-top: 10px;
    width: 260px;
    height: 30px;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    border-radius: 6px;
    border: 1px solid #D92644;
    color: #FFFFFF;
    background: url(../images/gradatedBg.gif) repeat-x;
    opacity: 0.75;
    cursor: not-allowed;
}


/* 
 * Button: Common to all INPUT buttons.
 */
input.submit100,
input.submit120,
input.submit130,
input.submit150,
input.submit175,
input.submit200,
input.submit250,
input.submitOption100,
input.submitOption120,
input.submitOption130,
input.submitOption150,
input.submitOption175,
input.submitOption200,
input.submit100Disabled,
input.submit120Disabled,
input.submit130Disabled,
input.submit150Disabled,
input.submit175Disabled,
input.submit200Disabled {
    float: right;
    position: relative;
    margin-left: 5px;
    height: 24px;
    line-height: 22px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    border-radius: 6px;
}
/* 
 * Button: Common Standard Submit.
 */
input.submit100,
input.submit120,
input.submit130,
input.submit150,
input.submit175,
input.submit200,
input.submit250 {
    font-weight: normal;
    border: 1px solid #D92644;
    color: #FFFFFF;
    background: url(../images/gradatedBg.gif) repeat-x;
    cursor: pointer;
    /*
    background-color: #D92644;
    */
}
/* 
 * Button: Common Option Type.
 * Blue-on-white variants, for non-action options that switch displays.
 */
input.submitOption100,
input.submitOption120,
input.submitOption130,
input.submitOption150,
input.submitOption175,
input.submitOption200 {
    font-weight: bold;
    border: 1px solid #AD1F36;
    color: #AD1F36;
    background: #FFFFFF;
    cursor: pointer;
}
/* 
 * Buttons: Common Disabled.
 */
input.submit100Disabled,
input.submit120Disabled,
input.submit130Disabled,
input.submit150Disabled,
input.submit175Disabled,
input.submit200Disabled {
    font-weight: normal;
    border: 1px solid #999999;
    color: #999999;
    background-color: #FFFFFF;
}
/* 
 * Button: Widths.
 */
input.submit100,
input.submitOption100,
input.submit100Disabled {
    width: 100px;
}
input.submit120,
input.submitOption120,
input.submit120Disabled {
    width: 120px;
}
input.submit130,
input.submitOption130,
input.submit130Disabled {
    width: 130px;
}
input.submit150,
input.submitOption150,
input.submit150Disabled {
    width: 150px;
}
input.submit175,
input.submitOption175,
input.submit175Disabled {
    width: 175px;
}
input.submit200,
input.submitOption200,
input.submit200Disabled {
    width: 200px;
}
input.submit250 {
    width: 250px;
}
/* 
 * Select (Drop-Down Menu) - COMMON STYLES
 * The width of this drop-down menu corresponds to the
 * typical input fields.
 */
select.width50,
select.width150,
select.width240 {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    color: #555555;
    background-color: #FFFFDD;
}
/* 
 * Select (Drop-Down Menu) - MINI
 * Use for small values: Hours, Minutes, etc.
 */
select.width50 {
    width: 50px;
}
/* 
 * Select (Drop-Down Menu) - MEDIUM
 * Use for small values: Hours, Minutes, etc.
 */
select.width150 {
    width: 150px;
}
/* 
 * Select (Drop-Down Menu) - STANDARD WIDTH
 * The width of this drop-down menu corresponds to the
 * typical input fields.
 */
select.width240 {
    width: 240px;
}




/*
================================================================================
DISPLAY TAG STYLES

Sorting:  sortable
          sorted
          order1
          order2
          
USAGE:

The "rcDisplaytagDefault" table style is commonly used for lists in which 
the headers are single-row name elements - with the gradated BG image.
           
================================================================================
*/

.table td, .table th {
    padding: 0.25rem !important;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

/*
 * Table.
 */
table.rcDisplaytagDefault {
    margin-left: 20px;
    margin-right: 20px;
    border-collapse: collapse;
    text-align: left;
    color: #555555;
    border: 1px solid #AD1F36;
}


/*
 * Export Links.
 */
div.exportlinks {
    margin-left: 20px;
    color: #555555;
}
div.exportlinks a {
    color: #555555;
}
div.exportlinks a:hover {
    color: #AD1F36;
    font-weight: bold;
}


/*
 * Table Header - Default/Common.
 */
table.rcDisplaytagDefault th {
    border-bottom: 1px solid #AD1F36;
    color: #FFFFFF;
    font-weight: normal;
    height: 20px;
    min-width: 80px;
    text-align: left;
    background-color: #C3223D;
    padding-left: 12px;
    padding-right: 12px;
}
table.rcDisplaytagDefault th.number {
    text-align: right;
}
table.rcDisplaytagDefault th.option {
    padding-left: 11px;
}
table.rcDisplaytagDefault th.sortable {
    padding-left: 2px;
}
table.rcDisplaytagDefault th.optionWithCheckbox {
    padding-left: 46px;
}
table.rcDisplaytagDefault th.optionWithBreadcrumb {
    padding-left: 21px;
}
/*
 * IMPORTANT: This 'sortable' declaration MUST be listed 
 *            BEFORE the order1 and order2 below (!)
 */
table.rcDisplaytagDefault th.sortable a {
    background-image: url(../images/displayTagSortOff.gif);
}
table.rcDisplaytagDefault th.order1 a {
    background-image: url(../images/displayTagSortAscending.gif);
}
table.rcDisplaytagDefault th.order2 a {
    background-image: url(../images/displayTagSortDescending.gif);
}
table.rcDisplaytagDefault th.order1   a,
table.rcDisplaytagDefault th.order2   a,
table.rcDisplaytagDefault th.sorted   a,
table.rcDisplaytagDefault th.sortable a {
    padding-left: 10px;
    padding-right: 10px;
    background-position: left bottom;
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-weight: normal;
}


/*
 * Table Detail - Hover.
 */
table.rcDisplaytagDefault th.order1   a:hover,
table.rcDisplaytagDefault th.order2   a:hover,
table.rcDisplaytagDefault th.sorted   a:hover,
table.rcDisplaytagDefault th.sortable a:hover {
    color: #AD1F36;
    background-color: #FFFFFF;
}
/*
 * Table Row <TR>.
 */
table.rcDisplaytagDefault tr {
    height: 20px;
}
table.rcDisplaytagDefault tr.even {
    background-color: #EEEEEE;
}
table.rcDisplaytagDefault tr.odd {
    background-color: #FFFFFF;
}
/*
 * Table Detail <TD>.
 */
table.rcDisplaytagDefault td {
    padding-left:  12px;
    padding-right: 12px;
    text-align: left;
}
table.rcDisplaytagDefault td.number {
    text-align: right;
}
table.rcDisplaytagDefault td.option {
    min-width: 100px;
}
/*
 * Table Detail <TD> - Empty tables.
 */
table.rcDisplaytagDefault tr.empty td {
    text-align: left;
    padding: 15px;
}


/*
 * Button - Look and behave like hyperlinks.
 */
table.rcDisplaytagDefault tr input.button {
    font-size: 9pt;
    text-align: left;
}
table.rcDisplaytagDefault tr.even input.button {
    color: #555555;
    border: 0px none #EEEEEE;
    background-color: #EEEEEE;
    
}
table.rcDisplaytagDefault tr.odd input.button {
    color: #555555;
    border: 0px none #FFFFFF;
    background-color: #FFFFFF;
}


/*
 * Anchor Tags. <A>
 */
table.rcDisplaytagDefault td a,
table.rcDisplaytagDefault td button {
    color: #555555;
}
table.rcDisplaytagDefault td a:hover,
table.rcDisplaytagDefault td button:hover {
    color: #AD1F36;
    font-weight: bold;
}


/*
 * Page-Banner Memo.
 */
span.pagebanner {
    display: block;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 2px;
    color: #555555;
}
/*
 * Page-Banner Links.
 */
span.pagelinks {
    display: block;
    position: absolute;
    margin-top: -15px;
    right: 22px;
    margin-bottom: 2px;
    color: #555555;
    /*
    display: inline;
    float: left;
    */
}
span.pagelinks a {
    color: #555555;
}
span.pagelinks a:hover {
    color: #AD1F36;
    font-weight: bold;
}
span.pagelinks strong {
    color: #AD1F36;
}




/*
================================================================================
COMPARE-REPORT POP-UP DIALOG - Used by the ReportJSP.
================================================================================
*/




/*
 * Table - Outer.
 */
table.compareOuter {
    margin-left: 20px;
    margin-right: 20px;
}
table.compareOuter td {
    vertical-align: top;
}


/*
 * Table - Common.
 */
table.compareOuter,
table.compareScenarios,
table.compareCalculations {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
    border-collapse: collapse;
}


/*
 * Table - TD.
 *
 * WIDTHS must be SAME as corresponding DIV widths below.
 */
table.compareScenarios td {
    width: 220px;
    border-bottom: 1px solid #DDDDDD;
}
table.compareCalculations td {
    width: 180px;
    border-bottom: 1px solid #DDDDDD;
}


/*
 * Table - Anchor-Tags.
 */
table.compareScenarios td a,
table.compareCalculations td a,
table.compareScenarios td button,
table.compareCalculations td button {
    display: block;
    min-height: 14px;
    padding: 2px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
}
table.compareScenarios td.current a,
table.compareScenarios td.current button {
    color: #FFFFFF;
    background: #AD1F36 url(../images/menuArrowLinkWhite.gif)  no-repeat right center;
}
table.compareScenarios td a:hover   {
    color: #FFFFFF;
    background-color: #777777;
}
table.compareScenarios td.current a:hover,
table.compareScenarios td.current button:hover {
    background: #AD1F36 url(../images/menuArrowLinkWhite.gif)  no-repeat right center;
    cursor: default;
}




/*
 * List DIVs.
 *
 * WIDTHS must be SAME as corresponding TD widths above.
 */
div.compareScenarios,
div.compareCalculations {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 250px;
    margin-bottom: 50px;
}
div.compareScenarios {
    width: 220px;
    border: 1px solid #AD1F36;
}
div.compareCalculations {
    width: 180px;
    position: relative;
    left: -2px;
    border-top: 1px solid #AD1F36;
    border-bottom: 1px solid #AD1F36;
    border-right: 1px solid #AD1F36;
}


/*
 * List DIVs - Headers.
 */
div.compareHeaderScenarios,
div.compareHeaderCalculations {
    width: 100%;
    height: 20px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #AD1F36;
    background-color: #AD1F36;
}
div.compareHeaderScenarios span,
div.compareHeaderCalculations span {
    display: block;
    padding-left: 3px;
    padding-top: 3px;
    color: #FFFFFF;
}
div.compareHeaderCalculations {
    position: relative;
    left: -2px;
}


/*
 * Busy Icon DIV.
 */
div.compareBusy {
    display: none;
    margin-top: 50px;
    text-align: center;
}




/*
================================================================================
STRESS SCENARIO OPTIONS - Used by the following iFrame JSPs:
- appAnalysisOptCondProbMatrixFrame.jsp
- appAnalysisOptCondProbRankingsFrame.jsp
- appAnalysisOptCorrStatusFrame.jsp
- appAnalysisOptInCategoryCorrFrame.jsp
- appAnalysisOptCharsParamsFrame.jsp
- appAnalysisOptRiskParamsFrame.jsp
- appScenarioOptCeoParamsFrame.jsp
- appScenarioOptOverridesFrame.jsp
- appScenarioOptParamsFrame.jsp
- appScenarioOptProvisionsFrame.jsp
- appScenarioOptShocksFrame.jsp
- appScenarioOptScriptEngTSParamsFrame.jsp
================================================================================
*/



/*
 * iFrame Alignment.
 *
 * Set iFrame top-left position to match that of in-line 
 * forms in other JSPs.
 *
 * This is cosmetic, but the real-estate is valuable.
 *
 * IMPORTANT: 
 * 
 *     We MUST distinguish the iFrame <BODY> from the parent, 
 *     to enable dialog-pop-ups to work properly - hence this 
 *     style name.
 */
body.dataContainerBody {
    position: relative;
    top: -16px;
    left: -8px;
}


/*
 * Table Common.
 * 
 * ContainerTable = Parent (enclosing) Table
 * RegionsTable   = Child Table within ContainerTable
 * VariablesTable = Child Table within ContainerTable
 * 
 * Usage Example: appScenarioOptParamsFrame.jsp
 */
table.dataContainerTable,
table.dataRegionsTable,
table.dataVariablesTable {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AD1F36;
    background-color: #FFFFFF;
    border-collapse: collapse;
}


/*
 * Table Headers.
 */
table.dataContainerTable th,
table.dataContainerTable th.analysis,
table.dataContainerTable th.borderedHeader {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    text-align: left;
    vertical-align: bottom;
    padding-left: 2px;
    padding-right: 2px;
    border-bottom: 1px solid #AD1F36;
    background-color: #AD1F36;
    /*
    font-weight: bold;
    */
}
table.dataContainerTable th.period {
    text-align: right;
}
table.dataContainerTable th.name {
    text-align: right;
}
table.dataContainerTable th.borderedHeader {
    text-align: center;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
}


/*
 * Borders.
 * 
 * NOTE: Table-Detail (TD) elements are SINGLETONS for 
 *       both the Region and Variable child tables. There 
 *       is only ONE <TD> element in each case, hence the 
 *       border stylings below have the effect of framing 
 *       the whole set of data on display.
 */
td.dataContainerTableRegionsTD,
td.dataContainerTableVariablesTD {
    border: 1px solid #AD1F36;
}


table.dataVariablesTable td a,
table.dataVariablesTable td button {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    color: #AD1F36;
    background: #FFFFFF;
    vertical-align: middle;
}
table.dataVariablesTable td a:hover,
table.dataVariablesTable td button:hover {
    font-weight: bold;
}



/*
 * Region Names.
 */
table.dataRegionsTable td a,
table.dataRegionsTable td button {
    display: block;
    min-width: 150px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    color: #555555;
    background: #FFFFFF;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 0px;
}
table.dataRegionsTable td.current a {
    color: #FFFFFF;
    background-color: #AD1F36;
    /*
    font-weight: bold;
    */
}
table.dataRegionsTable td a:hover,
table.dataRegionsTable td button:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #AD1F36;
}


/*
 * Variable Names.
 */
table.dataVariablesTable td.dataVariablesName {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 4px;
}


/*
 * Variables Footer.
 */
table.dataVariablesTable td.footer {
    text-align: right;
    color: #FFFFFF;
    background-color: #AD1F36;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2px;
    padding-right: 4px;
    border-top: 1px solid #AD1F36;
}


/*
 * Variable Input Fields.
 */
table.dataVariablesTable input.period,
table.dataVariablesTable input.params,
table.dataVariablesTable input.analysis50,
table.dataVariablesTable input.analysis75,
table.dataVariablesTable input.analysis100 {
    width: 38px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-weight: normal;
    color: #AD1F36;
    text-align: right;
    border: 0px none #FFFFFF;
    background-color: #FFFFFF;
}
table.dataVariablesTable input.period {
    width: 38px;
}
table.dataVariablesTable input.params {
    width: 120px;
}
table.dataVariablesTable input.analysis50 {
    width: 50px;
}
table.dataVariablesTable input.analysis75 {
    width: 75px;
}
table.dataVariablesTable input.analysis100 {
    width: 100px;
}


/*
 * Enclosing frame for tabbed-forms within iFrames.
 *
 * The additonal TABLE styles enable the above tables to be 
 * displayed as bordered elements within the enclosing frame.
 * 
 * Usage example: appAnalysisOptCondProbMatrixFrame.jsp
 *                appAnalysisOptCondProbRankingsFrame.jsp
 */
div.optionFrameIF {
    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
    min-width: 400px;
    border: 0px none #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    color: #AD1F36;
}
div.optionFrameIF table.dataContainerTable {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    border-spacing: 0pt 2pt;
}
div.optionFrameIF table.dataVariablesTable {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    border-spacing: 0pt 2pt;
}


/*
 * Cell Focus.
 */
table.dataVariablesTable input:focus {
    outline: #999999 solid thin;
    background-color: #FFFFEE;
}




/*
================================================================================
SIMPLE LISTS
Usage Examples: appDataUploadXXX JSPs
================================================================================
*/


/*
 * Sub-Header/Title for the container/frame box.
 */
div.simpleListTitle {
    margin-left: 20px;
    font-weight: bold;
}
/*
 * Frames table elements.
 */
div.simpleListContainer {
    margin-left: 20px;
    margin-right: 20px;
    border: 1px solid #AD1F36;
}
/*
 * Use <span> tags to space non-first columns.
 */
div.simpleListContainer span {
    margin-left: 20px;
}
div.simpleListContainer table {
    margin: 20px;
}
div.simpleListContainer table td.simpleListHeader {
    font-size: 8pt;
    text-decoration: underline;
    color: #777777;
}
div.simpleListContainer table td a,
div.simpleListContainer table td button {
    margin-left: 20px;
    color: #555555;
}
div.simpleListContainer table td a:hover,
div.simpleListContainer table td button:hover {
    color: #AD1F36;
    font-weight: bold;
}




/*
================================================================================
HELP POP-UP WINDOW
================================================================================
*/


/*
 * Width includes EXTRA 2 x 2px for left and right borders.
 */
div.helpPopUpFrame {
    position: absolute;
    z-index: 200;
    top: 20px;
    left: 440px;
    width: 504px;
    border: none;
}
/*
 * Width same as parent frame.
 */
div.helpPopUpFrame div.header {
    position: relative;
    width: 504px;
    height: 25px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
div.helpPopUpFrame div.header div.title {
    position: relative;
    left: 8px;
    float: left;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 25px;
}
div.helpPopUpFrame div.header div.close {
    position: absolute;
    top: 4px;
    right: 6px;
    clear: right;
}
div.helpPopUpFrame div.header div.close a {
    position: relative;
    top: 2px;
    color: #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}
/*
 * Height is designed to 'mask' any of the standard option JSP forms.
 */
div.helpPopUpFrame div.content {
    position: relative;
    z-index: 200;
    top: 0px;
    width: 500px;
    height: 450px;
    border-left: 2px solid #AD1F36;
    border-right: 2px solid #AD1F36;
    background-color: #FFFFFF;
}
/*
 * Width and Height values adjusted to allow for parent-frame boeders (!)
 * When testing, make sure you have enough 'content' to force the vertical
 * scroll-bar to appear.
 */
div.helpPopUpFrame div.content textarea {
    position: relative;
    overflow-X: hidden;
    overflow-Y: auto;
    width: 489px;
    height: 447px;
    padding-left: 10px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    border: none;
    background-color: #FFFFFF;
    /*
    padding-right: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    */
}
/*
 * Width same as parent frame.
 */
div.helpPopUpFrame div.footer {
    position: relative;
    top: 0px;
    width: 504px;
    height: 25px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
div.helpPopUpFrame div.footer div.button {
    display: block;
    position: absolute;
    right: 4px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
}
div.helpPopUpFrame div.footer div.button input {
    position: relative;
    margin-right: 5px;
    width: 100px;
    height: 24px;
    line-height: 22px;
    border: none;
    color: #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: right;
    background: url(../images/gradatedBg.gif) repeat-x;
}




/*
================================================================================
DATA-UPLOAD ERROR LOGS WINDOW
================================================================================
*/


/*
 * FRAME: Width includes EXTRA 2 x 2px for left and right borders.
 */
div.errorLogsWindowFrame {
    position: absolute;
    z-index: 200;
    top: 80px;
    left: 300px;
    width: 750px;
    border: none;
}
/*
 * HEADER: Width same as parent frame.
 */
div.errorLogsWindowFrame div.header {
    position: relative;
    width: 750px;
    height: 25px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
div.errorLogsWindowFrame div.header div.title {
    position: relative;
    left: 8px;
    float: left;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 25px;
}
div.errorLogsWindowFrame div.header div.close {
    position: absolute;
    top: 4px;
    right: 6px;
    clear: right;
}
div.errorLogsWindowFrame div.header div.close a {
    position: relative;
    top: 2px;
    color: #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}
/*
 * CONTENT: Height is designed to 'mask' most of the JSP form.
 * Width same as parent frame LESS 2 x 2px for left/right borders.
 */
div.errorLogsWindowFrame div.content {
    position: relative;
    z-index: 200;
    top: 0px;
    width: 746px;
    height: 600px;
    border-left: 2px solid #AD1F36;
    border-right: 2px solid #AD1F36;
    background-color: #FFFFFF;
}
/*
 * TEXTAREA: Width and Height values adjusted to allow for 
 * parent-frame borders (!)
 *
 * When testing, make sure you have enough 'content' to force 
 * the vertical scroll-bar to appear.
 */
div.errorLogsWindowFrame div.content textarea {
    position: relative;
    overflow-X: hidden;
    overflow-Y: auto;
    width: 735px;
    height: 597px;
    padding-left: 10px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    border: none;
    background-color: #FFFFFF;
    /*
    padding-right: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    */
}
/*
 * FOOTER: Width same as parent frame.
 */
div.errorLogsWindowFrame div.footer {
    position: relative;
    top: 0px;
    width: 750px;
    height: 25px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
div.errorLogsWindowFrame div.footer div.button {
    display: block;
    position: absolute;
    right: 4px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
}
div.errorLogsWindowFrame div.footer div.button input {
    position: relative;
    margin-right: 5px;
    width: 100px;
    height: 24px;
    line-height: 22px;
    border: none;
    color: #FFFFFF;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: right;
    background: url(../images/gradatedBg.gif) repeat-x;
}




/*
================================================================================
SCRIPT EDITOR
================================================================================
*/
     

/*
 * Data Options.
 */
div.scriptEditorDataOptions {
    position: relative;
    top: 7px;
    width: 1040px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #AD1F36;
    background: #FFFFFF;
}
div.scriptEditorDataOptions span.title {
    margin-left: 60px;
    margin-right: 2px;
    font-weight: normal;
    color: #555555;
}
div.scriptEditorDataOptions span.value {
    color: #AD1F36;
    font-weight: normal;
}
div.scriptEditorDataOptions span.valueRed {
    color: #BB0000;
    font-weight: normal;
}
div.scriptEditorDataOptions div.menu  {
    display: inline;
    position: absolute;
    right: 0px;
}
div.scriptEditorDataOptions div.menu a {
    margin-left: 15px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #888888;
}
div.scriptEditorDataOptions div.menu a:hover {
    font-weight: bold;
    color: #AD1F36;
}


/*
 * Method.
 */
div.scriptEditorMethod {
    position: absolute;
    z-index: 1;
    top: 30px;
    left: 0px;
    border: 1px solid #AD1F36;
    background-color: #FFFFFF;
    box-shadow: 4px 4px 2px #BBBBBB;
}
/*
 * Method: Ace Code.
 */
div.scriptEditorMethod div.aceCode {
    position: relative;
    top: 0px;
    left: 0px;
    width: 610px;
    height: 460px;
    min-width: 500px;
    min-height: 150px;
    font-size: 10pt;
    font-family: "Courier New", Courier, monospace;
    background-color: #FFFFFF;
}
/*
 * Method: New & Main-Method Run Option Dialogs.
 */
div.scriptEditorMethodOptionDialog {
    position: absolute;
    z-index: 201;
    top: 125px;
    left: 300px;
    width: 450px;
    border: none;
}


/*
 * Variables: List.
 */
div.scriptEditorVariableList {
    position: absolute;
    z-index: 2;
    top: 30px;
    left: 630px;
    width: 508px;
    height: 515px;
    min-width: 320px;
    min-height: 150px;
    border: 1px solid #AD1F36;
    background-color: #F6F6F6;
    box-shadow: 4px 4px 2px #BBBBBB;
}
/*
 * Variables: New Dialogs.
 *
 * Width must be fixed (non-variable) so that busy-icon is correctly centred.
 */
div.scriptEditorVariableNewDialog {
    position: absolute;
    z-index: 201;
    top: 125px;
    left: 300px;
    width: 500px;
    border: none;
}


/*
 * Command Prompt.
 */
div.scriptEditorCommand {
    position: absolute;
    z-index: 3;
    top: 565px;
    left: 0px;
    width: 610px;
    height: 250px;
    min-width: 400px;
    min-height: 150px;
    border: 1px solid #AD1F36;
    background-color: #FFFFFF;
    text-align: center;
    box-shadow: 4px 4px 2px #BBBBBB;
}
/*
 * Command Prompt: Text Area.
 */
div.scriptEditorCommand textarea {
    position: relative;
    overflow: auto;
    resize: none;
    top: 4px;
    left: 0px;
    width: 590px;
    height: 180px;
    font-size: 10pt;
    font-family: "Courier New", Courier, monospace;
    color: #555555;
    outline: #FFFFFF none 0px;
    border: 0px none #FFFFFF;
    background-color: #FFFFFF;
}


/*
 * Console.
 */
div.scriptEditorConsole {
    position: absolute;
    z-index: 4;
    top: 565px;
    left: 630px;
    width: 508px;
    height: 250px;
    min-width: 400px;
    min-height: 150px;
    border: 1px solid #AD1F36;
    background-color: #FFFFFF;
    box-shadow: 4px 4px 2px #BBBBBB;
}
/*
 * Console: Text Area.
 */
div.scriptEditorConsole textarea {
    position: relative;
    overflow: auto;
    resize: none;
    top: 5px;
    left: 10px;
    width: 487px;
    height: 210px;
    font-size: 10pt;
    font-family: "Courier New", Courier, monospace;
    color: #BB0000;
    outline: #FFFFFF none 0px;
    border: 0px none #FFFFFF;
    background-color: #FFFFFF;
}


/*
 * Options List Frame - Functions/Methods.
 */
div.scriptEditorOptionsListFrameDataRestore,
div.scriptEditorOptionsListFrameDataSave,
div.scriptEditorOptionsListFrameMethods,
div.scriptEditorOptionsListFrameFunctions {
    position: absolute;
    z-index: 201;
    top: 125px;
    left: 300px;
}
div.scriptEditorOptionsListFrameDataRestore,
div.scriptEditorOptionsListFrameMethods,
div.scriptEditorOptionsListFrameFunctions {
    height: 515px;
    min-width: 320px;
    min-height: 150px;
    border: 1px solid #AD1F36;
    background-color: #F6F6F6;
}
div.scriptEditorOptionsListFrameDataSave {
    width:580px;
    border: none;
}
div.scriptEditorOptionsListFrameMethods {
    width: 508px;
}
div.scriptEditorOptionsListFrameDataRestore,
div.scriptEditorOptionsListFrameFunctions {
    width: 608px;
}


/*
 * Common: Options List Content - Functions/Methods/Variables.
 */
div.scriptEditorOptionsListContentDataRestore,
div.scriptEditorOptionsListContentMethods,
div.scriptEditorOptionsListContentVariables,
div.scriptEditorOptionsListContentFunctions {
    position: absolute;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    height: 437px;
    overflow: auto;
    border: 1px solid #777777;
    background-color: #FFFFFF;
}
div.scriptEditorOptionsListContentMethods,
div.scriptEditorOptionsListContentVariables {
    width: 477px;
}
div.scriptEditorOptionsListContentDataRestore,
div.scriptEditorOptionsListContentFunctions {
    width: 577px;
}
div.scriptEditorOptionsListContentDataRestore a,
div.scriptEditorOptionsListContentMethods     a,
div.scriptEditorOptionsListContentVariables   a,
div.scriptEditorOptionsListContentFunctions   a {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
div.scriptEditorOptionsListContentDataRestore table,
div.scriptEditorOptionsListContentMethods     table,
div.scriptEditorOptionsListContentVariables   table,
div.scriptEditorOptionsListContentFunctions   table {
    border-spacing: 0pt 1pt;
    /*
    border-collapse: collapse;
    */
}
div.scriptEditorOptionsListContentDataRestore table,
div.scriptEditorOptionsListContentMethods     table,
div.scriptEditorOptionsListContentVariables   table {
    width: 100%;
}
div.scriptEditorOptionsListContentFunctions table {
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
}
div.scriptEditorOptionsListContentDataRestore table td,
div.scriptEditorOptionsListContentMethods     table td,
div.scriptEditorOptionsListContentVariables   table td,
div.scriptEditorOptionsListContentFunctions   table td {
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
div.scriptEditorOptionsListContentMethods   table td.breadcrumb,
div.scriptEditorOptionsListContentVariables table td.breadcrumb,
div.scriptEditorOptionsListContentFunctions table td.breadcrumb {
    width: 12px;
    text-align: center;
    color: #999999;
}
div.scriptEditorOptionsListContentDataRestore table td.dataListItem,
div.scriptEditorOptionsListContentMethods     table td.methodsListItem,
div.scriptEditorOptionsListContentVariables   table td.variablesListItem {
    width: 393px;
}
div.scriptEditorOptionsListContentFunctions table td.functionsListItem {
    width: 493px;
}
div.scriptEditorOptionsListContentMethods   table td.copy,
div.scriptEditorOptionsListContentVariables table td.copy,
div.scriptEditorOptionsListContentFunctions table td.copy {
    width: 70px;
}
div.scriptEditorOptionsListContentDataRestore table td.dataListItem {
    padding-left: 5px;
}
div.scriptEditorOptionsListContentVariables table td.variablesListTitle {
    font-weight: bold;
    text-decoration: underline;
    padding-top: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
}
div.scriptEditorOptionsListContentDataRestore table tr.dataListItemRow:hover a,
div.scriptEditorOptionsListContentDataRestore table tr.dataListItemRow:hover td,
div.scriptEditorOptionsListContentMethods     table tr.methodsListItemRow:hover a,
div.scriptEditorOptionsListContentMethods     table tr.methodsListItemRow:hover td,
div.scriptEditorOptionsListContentVariables   table tr.variablesListItemRow:hover a,
div.scriptEditorOptionsListContentVariables   table tr.variablesListItemRow:hover td,
div.scriptEditorOptionsListContentFunctions   table tr.functionsListItemRow:hover a,
div.scriptEditorOptionsListContentFunctions   table tr.functionsListItemRow:hover td {
    color: #FFFFFF;
    background-color: #D92644;
}


/*
 * Common: Header.
 *
 * White-on-blue type header-band, as in dialogs.
 */
div.scriptEditorMethod       div.header,
div.scriptEditorVariableList div.header,
div.scriptEditorCommand      div.header,
div.scriptEditorConsole      div.header,
div.scriptEditorOptionsListFrameDataRestore div.header,
div.scriptEditorOptionsListFrameMethods     div.header,
div.scriptEditorOptionsListFrameFunctions   div.header {
    position: relative;
    width: 100%;
    height: 25px;
    background: url(../images/gradatedBg.gif) repeat-x;
}
div.scriptEditorMethod       div.header:hover,
div.scriptEditorVariableList div.header:hover,
div.scriptEditorCommand      div.header:hover,
div.scriptEditorConsole      div.header:hover,
div.scriptEditorOptionsListFrameDataRestore div.header:hover,
div.scriptEditorOptionsListFrameMethods     div.header:hover,
div.scriptEditorOptionsListFrameFunctions   div.header:hover {
    cursor: move;
    /*
    cursor: alias;
    cursor: grab;
    cursor: cell;
    */
}
/*
 * Common: Header Title.
 */
div.scriptEditorMethod       div.header div.title,
div.scriptEditorVariableList div.header div.title,
div.scriptEditorCommand      div.header div.title,
div.scriptEditorConsole      div.header div.title,
div.scriptEditorOptionsListFrameDataRestore div.header div.title,
div.scriptEditorOptionsListFrameMethods     div.header div.title,
div.scriptEditorOptionsListFrameFunctions   div.header div.title {
    position: relative;
    left: 8px;
    float: left;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 25px;
}
/*
 * Common: Header Options.
 */
div.scriptEditorMethod       div.header a,
div.scriptEditorVariableList div.header a,
div.scriptEditorCommand      div.header a,
div.scriptEditorConsole      div.header a,
div.scriptEditorOptionsListFrameDataRestore div.header a,
div.scriptEditorOptionsListFrameMethods     div.header a,
div.scriptEditorOptionsListFrameFunctions   div.header a {
    position: relative;
    float: right;
    right: 8px;
    margin-left: 10px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #DDDDDD;
    line-height: 25px;
}
div.scriptEditorMethod       div.header a:hover,
div.scriptEditorVariableList div.header a:hover,
div.scriptEditorCommand      div.header a:hover,
div.scriptEditorConsole      div.header a:hover,
div.scriptEditorOptionsListFrameDataRestore div.header a:hover,
div.scriptEditorOptionsListFrameMethods     div.header a:hover,
div.scriptEditorOptionsListFrameFunctions   div.header a:hover {
    font-weight: bold;
    color: #FFFFFF;
}
/*
 * Common: Caption.
 */
div.scriptEditorMethod       div.caption,
div.scriptEditorVariableList div.caption,
div.scriptEditorCommand      div.caption,
div.scriptEditorConsole      div.caption,
div.scriptEditorOptionsListFrameDataRestore div.caption,
div.scriptEditorOptionsListFrameMethods     div.caption,
div.scriptEditorOptionsListFrameFunctions   div.caption {
    position: relative;
    padding-left: 15px;
    font-size: 9pt;
    font-family: Arial, sans-serif;
    font-style: normal;
    color: #AD1F36;
    line-height: 30px;
    text-align: left;
    background-color: #F6F6F6;
}
/*
 * Common: Resize Handle.
 */
div.scriptEditorMethod       div.resizeHandle,
div.scriptEditorVariableList div.resizeHandle,
div.scriptEditorCommand      div.resizeHandle,
div.scriptEditorConsole      div.resizeHandle {
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: #D92644;
    width: 8px;
    height: 8px;
}

    
.table .control-label:after { 
   content:"*";
   color:red;
}


/* === widths === */
.w-5 {
	width: 5%;
}
.w-10 {
	width: 10%;
}
.w-20 {
	width: 20%;
}

.w-30 {
	width: 30%;
}

.w-35 {
	width: 35%;
}

.w-45 {
	width: 45%;
}

.w-50 {
	width: 50%;
}

.w-60vw {
	width: 60vw;
}
.w-70vw {
	width: 70vw;
}

i {
	color: black;
}

caption {
	display:none;
}

/* licence status */
.bolder {
	font-weight: bolder;
}

.underline {
	text-decoration: underline;;
}
.italic {
	font-style: italic;
}

#licence td {
	padding: 5px 10px 5px 5px;;
}
#licence td.option {
	padding: 2px 5px;
	color: #222;
}
#licence td i.fa.fa-exclamation-triangle,
#licence td i.fa.fa-calendar-times-o,
#licence td i.fa.fa-minus  {
	color: #AD1F36;
}
#licence td i.fa.fa-check  {
	color: #005D3A;
}

select {
	background-color: #fff !important;
}

.licenceSelect{
	margin-top: 10px;
	background-color: #fff;
}


#app tbody tr td input[type="button"] {
	margin-top: 6px;
}

.disabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}

button#headerLogoutLink {
    border: none;
    background: transparent;
}


/*
================================================================================
END
================================================================================
*/