/* General links. */
A
{
    FONT-FAMILY: Verdana, Arial, 'Times New Roman', 'Microsoft Sans Serif';
    COLOR: #3300ff;
    FONT-WEIGHT: 500;
    FONT-SIZE: 11px;

    TEXT-DECORATION: none
}

/* General links when the mouse is over them. */
A:hover
{
    FONT-FAMILY: Verdana, Arial, 'Times New Roman', 'Microsoft Sans Serif';
    COLOR: #ff9900;
    FONT-WEIGHT: 500;
    FONT-SIZE: 11px;

    TEXT-DECORATION: underline
}

/* General text. */
BODY, INPUT, P, SPAN, TEXTAREA
{
    FONT-FAMILY: Verdana, Arial, 'Times New Roman', 'Microsoft Sans Serif';
    COLOR: #333333;
    FONT-SIZE: 12px;

    /* Don't change */
    MARGIN: 0px;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px
}

/* General tables. */
TABLE, TD, TH, TR
{
    FONT-FAMILY: Verdana, Arial, 'Times New Roman', 'Microsoft Sans Serif';
    COLOR: #333333;
    FONT-SIZE: 12px;

    /* Don't change. */
    VERTICAL-ALIGN: top;
    BORDER-COLLAPSE: collapse;
    MARGIN: 0px;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px
}

/* Small section headings. */
.ss-dataentry-heading
{
    FONT-WEIGHT: bold;
    COLOR: #00016b;
    FONT-SIZE: 12px;

    PADDING-BOTTOM: 3px;
    PADDING-TOP: 7px
}
.ss-dataentry-heading SPAN
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: #00016b
}

/* Sub-section headings. */
.ss-dataentry-label
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    COLOR: black;

    PADDING-BOTTOM: 5px
}

/* Standard field text. */
.ss-dataentry-textfield
{
    FONT-SIZE: 12px;
    PADDING-BOTTOM: 5px
}

/* Indented field text. */
.ss-dataentry-textfieldindent
{
    FONT-SIZE: 10px;
    PADDING-BOTTOM: 5px
}

/* Less significant datagrids appearing on details pages. */
.ss-datagrid-basic
{
    BORDER-RIGHT: lightgray 1px solid;
    BORDER-LEFT: lightgray 1px solid;
    BORDER-TOP: lightgray 1px solid;
    BORDER-BOTTOM: lightgray 1px solid
}
/* Text in less significant datagrids. */
.ss-datagrid-basic TD
{
    BORDER-RIGHT: lightgray 1px solid;
    BORDER-LEFT: lightgray 1px solid;
    BORDER-TOP: lightgray 1px solid;
    BORDER-BOTTOM: lightgray 1px solid;

    FONT-SIZE: 11px
}
/* Links for less significant datagrids. */
.ss-datagrid-basic A
{
    FONT-SIZE: 11px
}
/* Links for less significant datagrids while the mouse is over them.
.ss-datagrid-basic A:hover
{
    FONT-SIZE: 11px
}

/* The heading section of the less significant datagrids appearing on details pages. */
.ss-datagrid-basic-header
{
}
.ss-datagrid-basic-header TD
{
    FONT-WEIGHT: 600;
    COLOR: #00016b;
    FONT-SIZE: 11px
}

/* Main datagrids like those appearing on search results pages. */
.ss-datagrid-general
{
    BORDER-RIGHT: darkgray 1px solid;
    BORDER-LEFT: darkgray 1px solid
    BORDER-TOP-STYLE: none;
    BORDER-BOTTOM-STYLE: none
}
/* Text in main datagrids. */
.ss-datagrid-general TD
{
    BORDER-RIGHT: darkgray 1px solid;
    BORDER-LEFT: darkgray 1px solid;
    BORDER-TOP: medium none;
    BORDER-BOTTOM: medium none;

    FONT-SIZE: 11px;
    BACKGROUND-COLOR: #9DC8EE
}
/* Links in main datagrids. */
.ss-datagrid-general A
{
    FONT-FAMILY: Verdana, Arial, 'Times New Roman', 'Microsoft Sans Serif';
    FONT-SIZE: 11px
}
/* Links while the mouse is over them in the main datagrids. */
.ss-datagrid-general A:hover
{
    FONT-FAMILY: Verdana, Arial, 'Times New Roman', 'Microsoft Sans Serif';
    FONT-SIZE: 11px
}
/* Primary rows in the main datagrids. */
.ss-datagrid-general TR
{
    BORDER-TOP: medium none;
    BORDER-BOTTOM: medium none;

    HEIGHT: 20pt
}
/* Alternate row for the main datagrid. */
.ss-datagrid-general-item-alternate TD
{
    BORDER-TOP: medium none;
    BORDER-BOTTOM: medium none;

    BACKGROUND-COLOR: #F7FBFF
}
.ss-datagrid-general-item-alternate TR
{
    BORDER-TOP: medium none;
    BORDER-BOTTOM: medium none
}
/* Heading section of the main datagrids. */
.ss-datagrid-general-header TD
{
    PADDING-RIGHT: 2px;
    PADDING-LEFT: 2px;

    FONT-WEIGHT: normal;
    FONT-SIZE: 11px;
    COLOR: black;
    
    BORDER-BOTTOM: darkgray 1px solid;

    BACKGROUND-COLOR: #d3d3d3
}

/* Pager sections for the main datagrids. */
.ss-datagrid-general-pager TD
{
    BORDER-TOP: darkgray 1px solid;
    BORDER-BOTTOM: darkgray 1px solid;

    COLOR: black;
    BACKGROUND-COLOR: white
}
/* Pager links in the main datagrid. */
.ss-datagrid-general-pager A
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;

    MARGIN-LEFT: 4px;
    MARGIN-RIGHT: 4px;
}
/* Pager links in the main datagrid. */
.ss-datagrid-general-pager A:hover
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px
}
/* Text in the main datagrid pager section. */
.ss-datagrid-general-pager SPAN
{
    FONT-WEIGHT: 500;
    FONT-SIZE: 12px;
    COLOR: black
}
/* Some of the links in the main datagrid. */
.ss-gridhyperlink A:hover
{
    FONT-SIZE: 11px
}

/* Special approval status link when not 'limited'. */
.ss-gridhyperlink-hide
{
}
.ss-gridhyperlink-hide A:hover
{
}
/* Special approval status link when 'limited'. */
.ss-gridhyperlink-warning
{
    COLOR: Red
}
.ss-gridhyperlink-warning A:hover
{
    FONT-WEIGHT: bold;
    COLOR: Red
}

/* All of the menus! */
.ss-menu-main
{
}
.ss-menu-main TABLE
{
    /* The second margin value is the distance between menu columns. */
    MARGIN: 0px 40px 0px 0px;
    WIDTH: 240pt
}
/* The text for the menu section headings. */
.ss-menu-main TH SPAN
{
    COLOR: white;
    FONT-SIZE: 13px;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: left;

    /* Color of the heading highlight color. */
    BACKGROUND-COLOR: #5CA2D5;

    MARGIN: 30px 0px 3px;

    PADDING-RIGHT: 3px;
    PADDING-BOTTOM: 4px;
    PADDING-TOP: 4px;
    PADDING-LEFT: 3px;

    /* Don't change. */
    DISPLAY: block
}
/* Sub headings in the menus like those for the dropdowns. */
.ss-menu-main P SPAN
{
    COLOR: #00016b;
    FONT-SIZE: 12px;
    FONT-WEIGHT: bold;

    MARGIN: 10px 0px 6px;

    /* Don't change. */
    DISPLAY: block
}
/* Links in the menus. */
.ss-menu-main P A
{
    /* These settings apply to the menu button text. */
    COLOR: black;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;

    /* Do not move or change this line. */
    LIST-STYLE-TYPE: none;

    /* General image for the menu items. */
    LIST-STYLE-IMAGE: url(..\Graphics\GeneralMenuOption.ico);

    PADDING-LEFT: 3px; /* Distance from graphic. */
    PADDING-BOTTOM: 12px;

    MARGIN: 10px 0px 0px;

    WIDTH: 195pt;

    /* Mozilla/Opera-specific setting. */
    MIN-WIDTH: 195;

    /* Do not change. */
    DISPLAY: list-item;
    LIST-STYLE-POSITION: inside
}
/* Specific graphics for the menu items. */
.ss-menu-main #lnkMSDSSearchMaint
{
    LIST-STYLE-IMAGE: url(..\Graphics\MSDSSearchMaint.jpg)
}
.ss-menu-main #lnkMSDSClassificationSearch
{
    LIST-STYLE-IMAGE: url(..\Graphics\MSDSClassSearch.jpg)
}
.ss-menu-main #lnkQueryBuilder
{
    LIST-STYLE-IMAGE: url(..\Graphics\QueryBuilder.jpg)
}
.ss-menu-main #lnkSubmitMSDS
{
    LIST-STYLE-IMAGE: url(..\Graphics\SubmitNewMSDS.jpg)
}
.ss-menu-main #lnkApprovalQueue
{
    LIST-STYLE-IMAGE: url(..\Graphics\MSDSApprovalQueue.jpg)
}
.ss-menu-main #lnkApprovalQueueByLocation
{
    LIST-STYLE-IMAGE: url(..\Graphics\ApprovalQueueByLocation.jpg)
}
.ss-menu-main #lnkCentralMSDSSearch
{
    LIST-STYLE-IMAGE: url(..\Graphics\SubscribeToNewMSDS.jpg)
}
.ss-menu-main #lnkWorkflow
{
    LIST-STYLE-IMAGE: url(..\Graphics\WorkflowFunctions.jpg)
}
.ss-menu-main #lnkFacilityMaintenance
{
    LIST-STYLE-IMAGE: url(..\Graphics\FacilityMaintenance.jpg)
}
.ss-menu-main #lnkInventoryFunctions
{
    LIST-STYLE-IMAGE: url(..\Graphics\ChemicalInventoryFunctions.jpg)
}
.ss-menu-main #lnkSearchByInvLocation
{
    LIST-STYLE-IMAGE: url(..\Graphics\FindMSDSByLocation.jpg)
}
.ss-menu-main #lnkContainerInventory
{
    LIST-STYLE-IMAGE: url(..\Graphics\ContainerInventoryFunctions.jpg)
}
.ss-menu-main #lnkAdministrativeFunctions
{
    LIST-STYLE-IMAGE: url(..\Graphics\AdministrativeFunctions.jpg)
}
.ss-menu-main #lnkChangePassword
{
    LIST-STYLE-IMAGE: url(..\Graphics\ChangePassword.jpg)
}
.ss-menu-main #lnkRegulationMaintenance
{
    LIST-STYLE-IMAGE: url(..\Graphics\RegulationMaintenance.jpg)
}
.ss-menu-main #lnkReportOptions
{
    LIST-STYLE-IMAGE: url(..\Graphics\CustomReports.jpg)
}
.ss-menu-main #lnkSupplierManagement
{
    LIST-STYLE-IMAGE: url(..\Graphics\RegulationMaintenance.jpg)
}
/* Links in menus when mouse is over them. */
.ss-menu-main P A:hover
{
    /* These settings apply to the menu button text. */
    COLOR: #ff9900;
    FONT-WEIGHT: bold;
    FONT-SIZE: 12px;
    TEXT-DECORATION: underline
}
/* Dropdowns in the menus. */
.ss-menu-main P SELECT
{
    WIDTH: 138pt
}
/* Buttons in the menu like the ones beside the dropdowns. */
.ss-menu-main P INPUT
{
    MARGIN: 0px 0px 0px 6px;
    WIDTH: 30pt;

    TEXT-ALIGN: center
}
/* Needed for Mozilla/Opera. */
.ss-menu-main TR
{
    WIDTH: 175pt
}

/* The left panel. */
.ss-panel
{
    /* Panel color; also change the .ss-panel-submenu BACKGROUND-COLOR. */
    BACKGROUND-COLOR: #5CA2D5;

    /* Don't change. */
    VERTICAL-ALIGN: top;
    BACKGROUND-REPEAT: no-repeat;
    WIDTH: 115pt
}
.ss-panel-spacer
{
    WIDTH: 12px
}
.ss-panel-submenu TABLE
{
    /* Panel color; also change the .ss-panel BACKGROUND-COLOR. */
    BACKGROUND-COLOR: #5CA2D5;

    BORDER-RIGHT: #607188 1px solid;
    BORDER-TOP: #607188 1px solid;
    BORDER-LEFT: #607188 1px solid;
    BORDER-BOTTOM: #607188 1px solid;

    /* Don't change. */
    VISIBILITY: hidden;
    POSITION: absolute;
    WIDTH: 115pt
}

.ss-panel DIV
{
    /* Min height of the panel. */
    HEIGHT: 455pt
}
/* Section heading on the panel. */
.ss-panel SPAN
{
    TEXT-ALIGN: left;

    PADDING-TOP: 2px;

    MARGIN: 25px 0px 0px;
    WIDTH: 100pt;

    /* Don't change. */
    DISPLAY: block
}
.ss-panel TABLE TABLE SPAN
{
    /* Line above the section headings. */
    BORDER-TOP: #607188 1px solid;

    MARGIN-TOP: 20px
}
/* Sections on the left panel where customer-specific text appears. */
.ss-panel-customitem TD
{
    WIDTH: 115pt;
    HEIGHT: auto;

    PADDING-RIGHT: 10px;
    PADDING-LEFT: 10px;
    PADDING-TOP: 25px;
    PADDING-BOTTOM: 10px;

    VERTICAL-ALIGN: top;
    DISPLAY: block
}
/* Links on the panel. */
.ss-panel A
{
    PADDING-RIGHT: 2px;  
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    PADDING-TOP: 2px;

    /* Link text */
    COLOR: black;
    FONT-SIZE: 12px;   
    TEXT-ALIGN: left;
    TEXT-DECORATION: none;

    BACKGROUND-COLOR: transparent;

    MARGIN: 0px 10px;

    WIDTH: 100pt;
    MIN-WIDTH: 100pt;

    /* Don't change. */
    DISPLAY: block
}
.ss-panel A:hover
{
    /* Highlight color for links on the panel. */
    BACKGROUND-COLOR: #9DC8EE;

    /* Link text */
    FONT-SIZE: 12px;
    COLOR: black;
    TEXT-ALIGN: left;
    TEXT-DECORATION: none;

    BORDER-RIGHT: #607188 1px solid;
    BORDER-TOP: #607188 1px solid;
    BORDER-BOTTOM: #607188 1px solid;
    BORDER-LEFT: #607188 1px solid;

    PADDING-RIGHT: 1px;
    PADDING-LEFT: 4px;
    PADDING-BOTTOM: 1px;
    PADDING-TOP: 1px;

    MARGIN: 0px 10px;

    WIDTH: 100pt;
    MIN-WIDTH: 100pt;

    /* Don't change. */
    DISPLAY: block
}
/* Popup links. */
.ss-panel-submenu A {
    FONT-STYLE: oblique
}
.ss-panel-submenu TABLE A {
    FONT-STYLE: normal
}
.ss-panel TABLE
{
    VERTICAL-ALIGN: top;
    WIDTH: 115pt;

    /* Don't change. */
    DISPLAY: block;
    HEIGHT: auto
}

/* Login box. */
.ss-login-heading
{
    /* Color for the top heading section. */
    BACKGROUND-COLOR: #93b5e1;

    TEXT-ALIGN: center
}
.ss-login TD
{
    /* Color for the large login section. */
    BACKGROUND-COLOR: #bfddf7;

    TEXT-ALIGN: left
}
.ss-login-heading SPAN
{
    WIDTH: 304px;
    DISPLAY: block
}
.ss-login P
{
    MARGIN: 0px 25px 25px 25px;
    DISPLAY: block
}
.ss-login SPAN
{
    WIDTH: 100;
    DISPLAY: block
}
.ss-login P INPUT
{
    WIDTH: 170;
    DISPLAY: block
}
.ss-login div
{
    MARGIN: 0px 0px 25px 35px;
    DISPLAY: block
}
.ss-login div INPUT
{
    WIDTH: 75px
}
.ss-login #lblLoginMessage
{
    WIDTH: 304px;
    DISPLAY: block
}

/* Bottom section of every page. */
.ss-bottomsection TD
{
    BACKGROUND-REPEAT: no-repeat;
    PADDING-TOP: 10px;
    HEIGHT: 60px;
    WIDTH: 1000px
}
.ss-bottomsection P
{
    PADDING-LEFT: 35px;
    PADDING-BOTTOM: 4px;
    DISPLAY: block
}
.ss-bottomsection A
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10px;
    COLOR: #5670cf;
    BORDER-RIGHT: #5670cf;
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px
}
.ss-bottomsection A:hover
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10px;
    COLOR: #5670cf
}
.ss-bottomsection SPAN
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10px;
    COLOR: #5670cf
}

/* Styles for user messages. */
.ss-message
{
    /* Space between the page controls and the master head graphic. */
    MARGIN-TOP: 12px;
    MARGIN-BOTTOM: 6px
}
.ss-message TABLE
{
    MARGIN-BOTTOM: 2px;
    WIDTH: 500pt
}
.ss-message TD
{
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    PADDING-TOP: 5px;
    PADDING-BOTTOM: 5px
}

/* Styles for the search page. */
.ss-searchpage
{
}
.ss-searchpage SPAN
{
    DISPLAY: list-item;
    WIDTH: 180px;
    LIST-STYLE-TYPE: none
}

.ss-searchpage SELECT
{
    WIDTH: 335px
}
.ss-searchpage INPUT
{
    WIDTH: 335px
}
.ss-searchpage #cmdSearch
{
    MARGIN-TOP: 8px;
    WIDTH: 80pt
}
.ss-searchpage #cmdSearch2
{
    MARGIN-LEFT: 8px;
    WIDTH: 80pt
}
.ss-searchpage TD
{
    PADDING-TOP: 8px;
    HEIGHT: 18pt;
    MIN-WIDTH: 180px
}
.ss-searchpage TR
{
    PADDING-TOP: 10px;
    HEIGHT: 18pt;
    MIN-WIDTH: 180px
}
.ss-searchpage-range
{
}
.ss-searchpage-range SELECT
{
    WIDTH: 167px
}
.ss-searchpage-range INPUT
{
    WIDTH: 165px;
    MARGIN-RIGHT: 5px
}
.ss-searchpage-radio
{
}
.ss-searchpage-radio INPUT
{
    WIDTH: 18px
}
.ss-searchpage TABLE
{
    WIDTH: auto;
    MIN-WIDTH: 800px
}
.ss-searchpage-radio SPAN
{
    WIDTH: 105px
}
.ss-searchpage-radio LABEL
{
    WIDTH: 105px
}
.ss-searchpage #tblSortBy
{
}
.ss-searchpage #tblSortBy SELECT
{
    WIDTH: 200px;
    HEIGHT: 85px
}
.ss-searchpage-hazardclass
{
}
.ss-searchpage-hazardclass TD
{
    PADDING-TOP: 6px;
    HEIGHT: 18px
}
.ss-searchpage-hazardclass SPAN
{
    WIDTH: 80px
}
#txtHazardCode1A
{
    WIDTH: 50px;
    Color: white;
    BACKGROUND-COLOR: blue
}
#txtHazardCode2A
{
    WIDTH: 50px;
    color: white;
    BACKGROUND-COLOR: blue
}
#txtHazardCode1B
{
    WIDTH: 50px;
    BACKGROUND-COLOR: red
}
#txtHazardCode2B
{
    WIDTH: 50px;
    BACKGROUND-COLOR: red
}
#txtHazardCode1C
{
    WIDTH: 50px;
    BACKGROUND-COLOR: yellow
}
#txtHazardCode2C
{
    WIDTH: 50px;
    BACKGROUND-COLOR: yellow
}
#txtHazardCode1D
{
    WIDTH: 50px;
    BACKGROUND-COLOR: white
}
#txtHazardCode2D
{
    WIDTH: 50px;
    BACKGROUND-COLOR: white
}
.ss-searchpage-radio TD
{
    WIDTH: 100px
}

/* Styles for the MSDS details page. */
.ss-details
{
}
.ss-details-col1
{
    VERTICAL-ALIGN: middle;
    WIDTH: 180pt;
    PADDING-TOP: 8px
}
.ss-details-col1 A
{
    VERTICAL-ALIGN: middle;
    WIDTH: 180pt
}
.ss-details-bigfield
{
    WIDTH: 590px;
    PADDING-TOP: 8px
}
.ss-details-bigfield TEXTAREA
{
    WIDTH: 590px;
    HEIGHT: 50px
}
.ss-details-grid
{
}
.ss-details-grid TABLE
{
    WIDTH: 740px
}
.ss-details-data
{
    WIDTH: 350px;
    PADDING-TOP: 8px
}
.ss-details-data INPUT
{
    WIDTH: 350px
}
.ss-details-data TEXTAREA
{
    WIDTH: 350px
}
.ss-details-data SELECT
{
    WIDTH: 350px
}
.ss-details-col1 SPAN
{
    VERTICAL-ALIGN: middle;
    WIDTH: 180pt
}
.ss-details-options
{
}
.ss-details-options SPAN
{
    WIDTH: 110px
}
.ss-details-options INPUT
{
    WIDTH: 10px
}
.ss-details-options LABEL
{
    WIDTH: 95px
}
.ss-details-options TD
{
    WIDTH: 500px
}
.ss-details-data SPAN
{
    WIDTH: 350px
}
.ss-details-bigfield SPAN
{
    WIDTH: 590px
}
.ss-details-smalllabel
{
    VERTICAL-ALIGN: middle;
    WIDTH: 130px;
    PADDING-TOP: 8px
}
.ss-details-smalllabel SPAN
{
    FONT-WEIGHT: bold;
    VERTICAL-ALIGN: middle;
    WIDTH: 130px
}
.ss-details-smalllabel TD
{
    VERTICAL-ALIGN: middle
}
.ss-details-bigfield TD
{
    WIDTH: 590px
}