/* ===================================================================================================
* WARNING – This file is part of the base implementation for WebMaker, so it should not be edited or changed for any project. 
* These files are replaced if a project is re-imported to the WebMaker Studio or migrated to a new version of the product. 
* For guidance on ‘How do I override or clone Hyfinity webapp files such as CSS & javascript?’, please read the following relevant FAQ entry: 
* http://www.hyfinity.net/faq/index.php?solution_id=1113
==================================================================================================== */
/*
Basic Building Blocks of a Page - 
Reset all HTML fields to the standard font, borders, padding, etc. to ensure no styling carried through if embedding page. 
*/
BODY, TEXTAREA, SELECT, P, LEGEND, LABEL, INPUT, H1, H2, H3, H4, H5, H6, FIELDSET, CAPTION, BUTTON, A, 
.output, .main_body .form .dijitTextBox, .main_body .form .dijitComboBox, .main_body .form .dijitPlaceHolder   
{
    font-family : Tahoma,Verdana,Arial,Gulim,'MS Gothic',sans-serif;
    font-size: 12px;
    color: #696969;
    font-weight : normal;
    font-style: normal;
    line-height: normal;
    direction : ltr;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}
TABLE, THEAD, TBODY, TH, TR, TD
{
    margin: 0px;
    padding: 0px;
    border: none;
}

/* Main Body Styling - All other Layout, Groups, Composite and Form Controls sit within this container  */

DIV.main_body
{
    margin-top: 3px 3px 0px 3px;
}
/*
    FORM CONTROLS - Visual elements added to form UI Controls.
    formElement, Backgrounds and TD for tables are general container for Fields that contains a number of low level elements - A label, field control, hints & tips icon, error icon, error message.
    All fields have a labelBackground and defaultBackgound.
    Classes for input (text boxes), output (text display) and button components
    Includes multiple sizes for use in table like structures.
    Uses the display : inline-block setting to allow the widths to be specifed in IE
*/
.formElement
{
    /* line-height: normal; */
    padding: 1px 3px 1px 3px !IMPORTANT;
    clear: both;
    /* vertical-align: middle; */
}

SPAN.labelBackground
{
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
    /* width: 150px; */
    margin: 0px;
    padding: 1px 3px 1px 0px;
}
SPAN.defaultBackground
{
    display: -moz-inline-box;
    display: inline-block;
    margin: 0px;
    padding: 1px 3px 1px 0px;
    vertical-align: middle;
}
TD.labelBackground, TD.defaultBackground
{
    margin: 0px;
    padding: 1px 3px 1px 0px;
}
.groupLabelBackground, .pagingTableLabelBackground
{
    padding: 3px 3px 3px 3px;
    margin: 10px 0px 0px 0px;
    background: url(../images/hsg_demo_theme/folder_tools_bg.gif) repeat-x left top;
}
TABLE.force TD.labelBackground, TABLE.table TD.labelBackground, TABLE.grid TD.labelBackground
{
    padding: 3px 3px 3px 3px;
    line-height: normal;
    width: auto;
}
TABLE.force TD.defaultBackground, TABLE.table TD.defaultBackground, TABLE.grid TD.defaultBackground
{
    padding: 3px 3px 3px 3px;
    line-height: normal;
    width: auto;
    white-space: normal;
}
TABLE.table TD.defaultBackground
{
    white-space: nowrap;
}
/* Set all Labels to have a standard 150px width - This can be overridden on the LabelBackground on a Field or Group */
SPAN.labelBackground, TABLE.force TD.labelBackground, TABLE.table TD.labelBackground, TABLE.grid TD.labelBackground
{
    width: 150px;
}
TABLE.repeat TD.labelBackground, TABLE.repeat TD.defaultBackground
{
    vertical-align: middle;
}
/* 
LABELS - Located within the LabelBackground Containers above. 
*/
LABEL.label, SPAN.label, .fieldLabel
{
    font-size: 12px;
    font-weight : bold;
    color: #004677;
    display: inline-block;
    vertical-align: top; 
    padding-top: 0px;
}
TD LABEL.label
{
    padding-top: 2px;   
    vertical-align: middle;
}      
.groupLabelBackground .label, .pagingTableLabelBackground .label, H2.label
{
    display: inline;
    /* font-family: Tahoma,Verdana,Arial,Gulim,'MS Gothic',sans-serif; */
    font-size: 12px;
    font-weight: bold;
    color: #004677;
}

/* Used to stretch a Fixed width Label to fit the contents of the data */
.stretch, TD.stretch, TABLE.stretch, DIV.stretch
{
    width: auto;
}

/* RADIO and CHECKBOX - This ensure each of the radio buttons or checkboxes are spaced out */
INPUT.checkbox
{
    border: none;
}
INPUT.radio
{
    margin-right: 0px;
    border: none;
}

.selectBoolean
{
    display: -moz-inline-box;
    display: inline-block;
    padding: 1px 3px 1px 0px;
    vertical-align: middle;
}
.selectBooleanCaption
{
    display: inline-block;
    padding: 0px 6px 0px 3px;
    vertical-align: middle;
}
.output
{
    /* color: #000000; */
}
INPUT
{
    /* color: #000000; */
}
INPUT.textbox
{
	padding-left: 0.2em;
    height : 15px; 
    border: #8ba0bd 1px solid;
}

SELECT, TEXTAREA, 
.main_body .form .dijitTextBox, 
.main_body .form .dijitComboBox,
.main_body .form .dijitSpinner,
.main_body .form .dijitTextArea,
.main_body .form .dijitEditor
{
    border: #8ba0bd 1px solid;
}
SELECT
{
	padding-left: 0.0em;
    margin-left: 0px;
}

/* BUTTON - Styling to adjust look based on the container they are located within */
INPUT.button
{
    color: black;
    padding: 1px 5px 1px 5px;
    cursor: pointer;
}
.formElement .defaultBackground INPUT.button, .formElement .defaultBackground A.button
{
    margin-left: 0px !important;
}
.tabContainer DIV.vertical .formElement .defaultBackground .button, .tabCointaner .formElement .defaultBackground A.button
{
    margin-left: 0px !important;
}

/* IMAGE - Styling overrides */
A, IMG
{
    margin: 3px 0px 0px 0px !IMPORTANT;
    padding: 0px 0px 0px 0px;
    height : auto;
}
IMG.image
{
    display: -moz-inline-box;
    display: inline-block;
    /* margin: 3px;
    padding: 0px 3px 4px 0px; */
}

/* HYPERLINK - The field is implemented as an HTML Anchor. */
A.hyperlink
{
    display: -moz-inline-box;
    display: inline-block;
    color: #000000;
    text-decoration: underline;
    /* margin: 3px 3px 3px 0px;
    padding-top: 1px;
    padding-right: 3px; */
}
.formElement A.hyperlink
{
    padding-left: 3px; 
}

A.hyperlink:hover
{
    color: blue;
    text-decoration: underline;
}
A.hyperlink:visited
{
    color: maroon;
    text-decoration: underline;
}

/* PARAGRAPH - This is the actual P HTML element used */
.main_body .form P, .main_body .form DIV.customControl
{
    font-weight : bold;
    color: #004677;
    line-height: normal;
    margin: 0px !IMPORTANT;
    padding: 1px 3px 1px 3px !IMPORTANT;
    vertical-align: top;
}

/*    DATE AND CALENDAR Styles - Default styles for the DIV based calendar, icons, borders, etc. */
A.datePickerIcon
{
    display: inline-block;
    background: url(../images/hsg_demo_theme/icon_calendar.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 13px;
    text-decoration: none;
    margin-left: 3px;
}

#calendarDiv
{
    position : absolute;
    background : white;
}

.cpYearNavigation,.cpMonthNavigation
{
    background-color:#C0C0C0;
    text-align: center;
    vertical-align: middle;
    text-decoration:none;
    color:#000000;
    font-weight:bold;
}

.cpDayColumnHeader, .cpYearNavigation,.cpMonthNavigation,
.cpCurrentMonthDate,.cpCurrentMonthDateDisabled,.cpOtherMonthDate,
.cpOtherMonthDateDisabled,.cpCurrentDate,.cpCurrentDateDisabled,
.cpTodayText,.cpTodayTextDisabled,.cpText
{
    font-family:arial;
    font-size:8pt;
}

TD.cpDayColumnHeader
{
    text-align:right;
    border:solid thin #C0C0C0;
    border-width:0px 0px 1px 0px;
}

.cpCurrentMonthDate, .cpOtherMonthDate, .cpCurrentDate
{
    text-align:right; text-decoration:none;
}

.cpCurrentMonthDateDisabled, .cpOtherMonthDateDisabled, .cpCurrentDateDisabled
{
    color:#D0D0D0;
    text-align:right;
    text-decoration:line-through;
}

.cpCurrentMonthDate, .cpCurrentDate
{
    color:#000000;
}

.cpOtherMonthDate {
    color:#808080;
}

TD.cpCurrentDate
{
    color:white;
    background-color: #C0C0C0;
    border-width:1px;
    border:solid thin #800000;
}

TD.cpCurrentDateDisabled
{
    border-width:1px;
    border:solid thin #FFAAAA;
}

TD.cpTodayText, TD.cpTodayTextDisabled
{
    border:solid thin #C0C0C0;
    border-width:1px 0px 0px 0px;
}

A.cpTodayText, SPAN.cpTodayTextDisabled
{
    height:20px;
}

A.cpTodayText
{
    color:black;
}

.cpTodayTextDisabled
{
    color:#D0D0D0;
}

.cpBorder
{
    border:solid thin #808080;
}

/*
    CONDITIONAL STYLES - The following styles are not created by default, but are often used for conditional styling requirements
*/

.hide, .hidden
{
    display: none;
    margin: 0px;
    padding: 0px;
    border: none;
}

.main_body .form .defaultBackground .disabled
{
    cursor: not-allowed !IMPORTANT;
    /* background-color: transparent !IMPORTANT; */ 
    border: #8ba0bd 1px solid !IMPORTANT;
    background-color: #f2f6fc !IMPORTANT; 
    background-image: none !IMPORTANT; 
    opacity: 1.0 !IMPORTANT;
    color: gray;
}
.main_body .form .defaultBackground INPUT[type="radio"].disabled,  
.main_body .form .defaultBackground INPUT[type="checkbox"].disabled, A.disabled
{
    border: none !IMPORTANT;
    background-color: transparent !IMPORTANT;
}

.main_body .form .defaultBackground INPUT[type="button"].disabledButton,
.main_body .form A.disabledButton
{
    cursor: not-allowed !IMPORTANT;
}
.mandatory
{
    color: Red;
}

.highlightBackground TD
{
    background-color: #ffde7b;
/*  border: 1px solid Red; */
}

.highlight
{
    font-weight: bold;
    color: Maroon;
}

.reverse
{
    color : white;
}

.repeat .firstRow
{
    background-color: #f2f6fc;
}

.repeat .alternateRow
{
    background-color: white;
}


/* Use a conditional style to indicate that a field value is set by using an Image for display purposes. Data typically in repeating tables. */
.checkboxTrue
{
    display: inline-block;
    background-image: url(../images/hsg_demo_theme/checkbox_true.png);
    background-repeat: no-repeat;
    vertical-align: top;
    margin-top: 3px;
    margin-left: 3px;
    padding: 0px 0px 0px 0px;
    height: 15px;
    width: 15px;
}

A.leftArrow
{
    display : block;
    width : 20px;
    height : 20px;
    background: url(../images/leftarrow.png);
    background-repeat : no-repeat;
    text-decoration: none;
}

A.leftArrow:hover
{
    background: url(../images/leftarrowover.png);
    background-repeat : no-repeat;
    text-decoration: none;
}

A.rightArrow
{
    display : block;
    width : 20px;
    height : 20px;
    background: url(../images/standardbullet.png);
    background-repeat : no-repeat;
    background-position: top left;
    text-decoration: none;
}

A.rightArrow:hover
{
    background: url(../images/standardbulletover.png);
    background-repeat : no-repeat;
    text-decoration: none;
}

/*  LAYOUT AND GROUP CONTROLS -
    These group and heading classes are used to provide headings (label) and layouts on table like structures and divs.
    There are various types of groups that have styling, along with particular form controls that need overrides when used in these containers.
*/
/* GROUPS - Vertical or Horizontal Groups can be set to 'Force Table',which means that an HTML table is generated to allow control of TD containers. */
TABLE.force, TABLE.table
{
    border-collapse: collapse;
}

/* Additional style added for Table structures that require a table type border */
TABLE.outline, DIV.outline
{
    background-color: #f2f6fc;
    border-top: #cacaca 1px solid;
    border-left: #cacaca 1px solid;
}
TABLE.outline TD.labelBackground, TABLE.outline TD.defaultBackground,
TABLE.outline TD P, TABLE.outline TD .customControl,
DIV.outline .formElement, DIV.outline .customControl, DIV.outline P   
{
    background-color: #f2f6fc;
    border-right: #cacaca 1px solid;
    border-bottom: #cacaca 1px solid;
}

/* Grids can have a class applied that will stretch the content to fill the container they are placed in.
The labels will also stretch to fill up the space. */
TABLE.stretchedGroup
{
    width: 100%;
}

TD.vertical, TD.horizontal, TD.horizontal_table, TD.table, TD.tabContainer, TD.accordionContainer
{
    padding-top: 0px !IMPORTANT;
    vertical-align: top;
}

TABLE.layoutGroup, TD.borderedGroup, TD.partialPageContainer, FIELDSET.fieldsetGroup, DIV.tabContainer, DIV.accordionContainer
{
    border-collapse : collapse;
    padding-top: 0px;
}

FIELDSET.fieldsetGroup
{
    border: 1px solid #cacaca;
}

FIELDSET.fieldsetGroup .formElement
{
    margin: 0px;
    border-left: none;
    border-right: none;
}
FIELDSET.fieldsetGroup .fieldsetGroupLabelBackground, FIELDSET.fieldsetGroup .groupLabelBackground
{
    padding: 2px 10px 2px 10px;
    margin: 3px 3px 3px 15px !IMPORTANT;
    border: 1px solid #9bb8ea;
    background: url(../images/hsg_demo_theme/folder_tools_bg.gif) repeat-x left top;
    height: 18px;
}
FIELDSET.fieldsetGroup LEGEND.label, .fieldsetGroupLabel
{
    font-size: 12px;
    font-weight: bold;
    color: #004677;
}

.borderedGroup
{
    background-color: #f2f6fc;
    border: 1px solid #9bb8ea;
    padding: 3px 0px 3px 0px;
}
/*
.borderedGroup P, .accordionContainer P
{
    padding-left: 3px !IMPORTANT;
    padding-right: 3px !IMPORTANT;
} */

.accordionContainer
{
/*  background-color: #F5F5F5;
    overflow: hidden; */
}
.main_body .form .accordionContainer .dijitAccordionTitle
{
    font-family: Tahoma,Verdana,Arial,Gulim,'MS Gothic',sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #004677;
}

.accordionPane
{
    display: block;
    padding: 0px;
    padding-left: 0px !IMPORTANT;
}

.tabContainer DIV.formElement    /* TAB Heading Settings */
{
    padding: 0px !IMPORTANT;
}

.tabContainer DIV.formElement SPAN.defaultBackground
{
    padding: 0px 0px 0px 3px !IMPORTANT;
}

.tabContainer .tabPane DIV.formElement SPAN.labelBackground, .tabContainer .tabPane DIV.formElement SPAN.defaultBackground    
/* Fields in Tab Pane */
{
    padding: 1px 3px 1px 3px !IMPORTANT;
}

.tabContainer .tabPane
{
    background-color: #f2f6fc;
    border-top: #3175a4 1px solid;
    border-right: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
    border-left: 1px solid #cacaca;
/*  moves Pane (Group) below Tab indicators */
    clear: both;
    padding-top: 3px;
    padding-bottom: 3px; 
}

/*  TABS - The following style are used to create various images to provide the round effect on the Tab Links
*/
A.selectedTab, DIV.group A.selectedTab
{
    font-family: Tahoma,Verdana,Arial,Gulim,'MS Gothic',sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 17px;
    color : white;
    text-decoration : none;
    text-align : center;
    float:left;
    margin-left: 0px;
    cursor: pointer;
}
A.unselectedTab, DIV.group A.unselectedTab
{
    font-family: Tahoma,Verdana,Arial,Gulim,'MS Gothic',sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 17px;
    color: black;
    text-decoration: none;
    text-align: center;
    float:left;
    margin-left: 4px;
    cursor: pointer;
}

A.unselectedTab .r
{
    background-image: url(../images/hsg_demo_theme/tab_right.gif);
    background-position: right top;
    background-repeat : no-repeat;
    display: inline-block;
    padding: 3px 5px 2px 1px;
    margin-left: 4px;
    height: 22px;
    \height:17px;
    heig\ht: 17px;
}

A.unselectedTab .l
{
    background-image: url(../images/hsg_demo_theme/tab_left.gif);
    background-position: left top;
    background-repeat: no-repeat;
    display: inline-block;
    height: 22px;
}

A.selectedTab .r
{
    background-image: url(../images/hsg_demo_theme/tab_right.gif);
    background-position : right bottom;
    background-repeat : no-repeat;
    display: inline-block;
    padding: 3px 5px 2px 1px;
    margin-left: 4px;
    height: 22px;
    \height:17px;
    heig\ht:17px;
}

A.selectedTab .l
{
    background-image: url(../images/hsg_demo_theme/tab_left.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    display: inline-block;
    height: 22px;
}

.partialPageContainer
{
}
.ajaxLoading
{
    background : url(../images/ajax-loader-arrows.gif) left center no-repeat;
    padding-left : 20px;
}


/*
BUTTON - Extended Styling button that is impemented as an HTML anchor.
*/
LABEL.button
{
    display:inline-block;
}
TD.defaultBackground a.button
{
    padding-bottom: 2px;
}

A.button::-moz-focus-inner, button::-moz-focus-inner
{
    border: none;
}

A.button,
A.button:link,
A.button:visited
{
  /* Strip down the button and link elements to a base we can work with. */
    display:inline-block;
    padding: 0px 3px 0px 0px;
    margin: 0px 3px 0px 3px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
    overflow: visible;
}

  * html a.button,
  * html a.button:link,
  * html a.button:visited
{
    /* IE6 fix to make link fit text. */
    width: 1%;
  }

 a.button, x:-moz-any-link {
    /* FF fix to make button spacing even across browsers. */
    margin: 0 0 0 0;
  }

 *:first-child+html button {
    /* Reset IE7 back to what it was for previous fix. */
    margin: 0 3px 0 3px;
  }

a.button span, a.button:link span, a.button:visited span
{
    /* Set the span tags to display: block, as they will work our background-image magic. */
    display: inline-block;
  }

a.button, a.button:link, a.button:visited {
  /* HEIGHT - Total height of button. */
  height: 22px;
  /* NOTE - You must define the font here otherwise your buttons and links could end up diffrent. */
  font-family : Tahoma,Verdana,Arial,Gulim,'MS Gothic',sans-serif;
  font-size: 12px;
  color: white;
}

a.button, a.button.button_active, a.button_active
{
    /* Right side padding for button (default). */
    /* SPAN HEIGHT - This should be 2px smaller than the height set on the button (see HEIGHT). */
    height: 20px;
    background: url(../images/hsg_demo_theme/button_left.gif) top left  no-repeat;
    color: white;
  }

a.button span
{
    /* Right side padding for button (default). */
    padding: 0px 4px 0px 4px;
    /* SPAN HEIGHT - This should be 2px smaller than the height set on the button (see HEIGHT). */
    height: 20px;
    background: url(../images/hsg_demo_theme/button_right.gif) top right  no-repeat;
    /* background-color: #ffffff;  */
  }

a.button span span
{
    /* Left side padding for button (default). */
    padding: 0px 6px 0px 6px;
    /* SPAN HEIGHT - This should be 1px smaller than the height set on the button (see HEIGHT). */
    height: 21px;
    /* SPAN LINE-HEIGHT - This should be 1px smaller than the height set on the button (see HEIGHT) and will center the text vertcailly. */
    line-height: 20px;
    background: url(../images/hsg_demo_theme/button_bg.gif) top center repeat-x;
  }

a.button:hover
{
    background-image: url(../images/hsg_demo_theme/button_left_over.gif);
  }
a.button:hover span
{
    background-image: url(../images/hsg_demo_theme/button_right_over.gif);
  }
a.button:hover span span
{
    background-image: url(../images/hsg_demo_theme/button_bg_over.gif);
  }
a.button:active, a.button_active:active
{
    background-image: url(../images/hsg_demo_theme/button_left_pressed.gif);
}
a.button:active span, a.button.button_active span, a.button_active:active span
{
    background-image: url(../images/hsg_demo_theme/button_right_pressed.gif);
  }
a.button:active span span,
a.button.button_active span span, a.button_active:active span span
  /*
      'button_active' is the class used by SimplyButtons.js to create the button states in IE.
  */
{
    background-image: url(../images/hsg_demo_theme/button_bg_pressed.gif);
  }

/*
    COMPOSITE RICH CONTROLS - Including Repeating Tables, etc.
*/
/* Standard Basic Table or Repeat Only */
TABLE.repeat
{
    font-size: 12px;
    width: 100%;
}
TABLE.repeat TH
{
    vertical-align: top;
    margin: 0px 0px 0px 0px;
    border-top: 1px solid #cacaca;
    border-right: 1px solid #cacaca;
}
TABLE.repeat CAPTION
{
    display: none;
}

TABLE.repeat TD
{
    border-left: 1px solid #cacaca;
    border-bottom: 1px solid #cacaca;
    white-space: nowrap;
    padding : 0px 0px 0px 3px;
}

TABLE.repeat TH.labelBackground, .repeatLabelBackground
{
    background : url(../images/hsg_demo_theme/th_bg.gif) top left repeat;
    margin: 0px 0px 10px 0px;
    padding: 0px 3px 0px 3px;
    vertical-align: middle;
    text-align: center;
    height: 21px;  /* Half the height of the background image */
    border-collapse: collapse;
    border-left: 1px solid #919a99;
    border-bottom: 1px solid #919a99;
}
TABLE.repeat .label, .repeatLabel
{
    font-weight: bold;
    color : black;
    /* A background iamge could be attached to label to display an indicator icon on the label */
}
/* This style is used to override the display of a message if there is no date for a repeat. */
TABLE.repeat TD.noRepeatData
{
/*  visibility: hidden; */ /* This can be commented in if you do not want the 'No Data' message displayed */
    padding: 2px 3px 2px 3px;
    width: auto;
}

/* Overrides for Form Controls inside Repeating Tables */
TABLE.repeat TD SPAN.output
{
    display: inline-block !IMPORTANT;
    padding-top: 0px !IMPORTANT;
    line-height: normal;
}

TABLE.repeat TD INPUT.button
{
    margin: 0px !IMPORTANT;
}

TABLE.repeat TD DIV.customControl
{
/*  background-color: #F5F5F5; */
}

TABLE.repeat TD TABLE.repeat
{
    margin: 2px 0px 2px 0px;
}

TABLE.repeat TD TABLE.repeat TD
{
    border-left: none;
    border-bottom: none;  
}

/* Overrides for Form Controls inside Repeating Tables */
TABLE.repeat TD SPAN.output
{
    display: inline-block !IMPORTANT;
    padding-top: 0px !IMPORTANT;
    line-height: normal;
}

TABLE.repeat TD INPUT.button
{
    margin: 1px 3px 1px 0px !IMPORTANT;
}

TABLE.repeat TD DIV.customControl
{
/*  background-color: #F5F5F5; */
}

TABLE.repeat TD TABLE.repeat
{
    margin: 3px 3px 3px 0px;
}

TABLE.repeat TD TABLE.repeat TD
{
/*    margin-top: auto;
    border-left: none;
    border-bottom: none;  */
}

/*
    Styling of rounded corners for border groups - HTML tags are generated for these style if the option 'Extended Border Styling' is ticked.
*/
.corners
{
    margin: 0px 0px 0px 0px;
}

.corners .content
{
/* Top padding is based on heigth of top of table images */
    display: block;
    margin : 0px 0px 0px 0px;
    padding: 31px 0px 0px 0px;
}
.corners .t
{
    background-image : url(../images/corners/table_tab_heading.gif);
    background-position : top center;
    background-repeat : repeat-x;
}
.corners .tr
{
    background-image : url(../images/corners/table_tab_right.gif);
    background-position : top right;
    background-repeat : no-repeat;
}
.corners .r
{
    background-image : url(../images/corners/noedge.gif);
    background-position : right center;
    background-repeat : repeat-y;
}
.corners .br
{
    background-image : url(../images/corners/table_bottom_right_bg.gif);
    background-position : bottom right;
    background-repeat : no-repeat;
}
.corners .b
{
    background-image : url(../images/corners/table_bottom_mid_bg.gif);
    background-position : bottom center;
    background-repeat : repeat-x;
}
.corners .bl
{
    background-image : url(../images/corners/table_bottom_left_bg.gif);
    background-position : bottom left;
    background-repeat : no-repeat;
}
.corners .l
{
    background-image : url(../images/corners/noedge.gif);
    background-position : left center;
    background-repeat : repeat-y;
}
.corners .tl
{
    background-image : url(../images/corners/table_tab_left.gif);
    background-position : top left;
    background-repeat : no-repeat;
}

/*
    ERROR HANDLING STYLES - These are used to display verious error elements for field controls
*/

.errorIcon
{
    display: -moz-inline-box;
    display: inline-block;
    padding: 1px 0px 1px 3px;
    background : url(../images/hsg_demo_theme/warning.png);
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
    width : 25px;
    height : 16px;
}

.errorBackground INPUT, .errorBackground SELECT, .errorBackground TEXTAREA, .errorBackground .dijitComboBox, .errorBackground .dijitTextBox
{
    border:thin solid red !important;
    outline : thin solid red;
/*    background-color:#fff5ee !important; */
}

.errorBackground .dijitComboBox INPUT, .errorBackground .dijitTextBox INPUT
{
    border:none;
    outline : none;
/*    background-color: none;    */
}

.hintIcon
{
    display: -moz-inline-box;
    display: inline-block;
    background : url(../images/hsg_demo_theme/help.gif);
    background-repeat: no-repeat;
    background-position: center center;
    text-decoration: none;
    padding: 3px 3px 4px 5px;
    width : 16px;
    height : 16px;
    pointer: help;
}
.topLevelMessage
{
    background : white;
    font-weight: bold;
    color: Red;
}

.messageBox
{
    color : red;
    text-align: right;
    margin-right : 15px;
}

/* Styles for the popup Hint tooltips. */
#messageDiv
{
    background : #FFFFBD;;
    border : 1px solid #004677;
    padding: 1px 3px 1px 3px;
    color: Black;
    FILTER: progid:DXImageTransform.Microsoft.dropShadow(Color=#ABABAB,offX=4,offY=4,positive=true);
    -moz-box-shadow: 4px 4px 3px #888;
    -webkit-box-shadow: 4px 4px 3px #888;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    z-index:99;
}

/*
    The following are CSS3/HTML5 Styles that can be added as progressive enhanements for modern browsers.
*/
/*  roundedBox can be added to a layout or bordered group in order to give rounded corners and shadows for non IE Browsers.
    For IE there is simply a background coloured block.
*/
.roundedBox
{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-width: 1px;
    border-color: #BFD4F5;
    background-color: #f2f6fc;
/*  Shadow effect for borders */
/*    -webkit-box-shadow:2px 2px 2px #BFD4F5;
    -moz-box-shadow:2px 2px 2px #BFD4F5;
    box-shadow:2px 2px 2px #BFD4F5; */
/*    -webkit-transition: background-color .4s, -webkit-border-radius .4s
    -o-transition-property: border-radius;
    -o-transition-duration: .4s; */
}
.roundedBox .groupLabelBackground
{
    margin-top: 2px;
}

/*
 * DOJO soria defaulted theme overrides. If another theme is used e.g. tundra, then the class names need to be altered below.  
 * These overrides mainly deal with removing the default styling for dijit fields, error highlighting, images, etc
 */
.main_body .form .dijitTextBox INPUT, 
.main_body .form .dijitTextBox,
.main_body .form .dijitComboBox INPUT, 
.main_body .form .dijitComboBox
{
    position: static !important; 
    veritcal-align: middle !important;
}    

.main_body .form .dijitInputField INPUT,
.main_body .form .dijitTextBox,
.main_body .form .dijitComboBox,
.main_body .form .dijitSpinner 
{
    margin: 0 !important;
}
.main_body .form .dijitInlineTable
{
    -moz-display: table-cell; 
}

.main_body .form .dijitTextBox,
.main_body .form .dijitComboBox,
.main_body .form .dijitSpinner,
.main_body .form .dijitInlineEditor input,
.main_body .form .dijitTextArea 
{
    background : #fff !important;
}
.main_body .form .dijitComboBox, 
.main_body .form .dijitTextBox, 
.main_body .form .dijitSpinner, 
.main_body .form .dijitButtonNode, 
.main_body .form dijitSpinnerButtonContainer
{
	padding-left: 0.0em;
    height : 15px; 
    line-height: normal;
}    

.main_body .form .dijitSpinner .dijitArrowButtonInner
{
    height: 7px;
    width:18px;
    padding: 0px;
}
.main_body .form .dijitSpinner .dijitUpArrowButton .dijitArrowButtonInner
{
    background-position: -20px -2px;
}
.main_body .form .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner
{
    background-position: 2px -2px; 
}

.main_body .form .dijitError 
{
    border-color: #8BA0BD !important;
    background-color:#fff;
}
.main_body .form .dj_ie6 .dijitError INPUT 
{
    background-color:#fff !important;
}
.main_body .form .dijitErrorFocused 
{
    background-color:#fff;
}
.main_body .form .dj_ie6 .dijitErrorFocused INPUT 
{
    background-color:#fff !important;
}
.main_body .form .dijitValidationIcon 
{
    display : none;
}

.main_body .form .dijitInputField 
{
    padding-top : 1px;
    padding-left : 1px;
}