/* --- Standard styles --- */
BODY {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    word-spacing: normal;
    text-transform: none;
    letter-spacing: normal;
    background-color: white;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

H1, H2, H3, H4, H5 {
    color: #993300;
}

/* --- Tables --- */
/* The "table_form" class is the general form table in the ESR project. */
TABLE.table_form {
    border-style: none;
    border-collapse: collapse;
    width: 100%;
    font-size: 9pt;
}

    TABLE.table_form TH {
        font-size: 11pt;
        color: White;
        font-weight: bold;
        text-align: left;
        background-color: #006699;
        color: #C9D4D8;
        padding-top: 6px;
        padding-right: 10px;
        padding-bottom: 6px;
    }

    TABLE.table_form TD {
        background-color: #C9D4D8;
    }

TH.column_left, TD.column_left {
    width: 5%;
}

TH.column_right, TD.column_right {
    width: 95%;
}
/* The "table_form_td" class can be used to get the table BG color in a single cell. */
.table_form_td {
    background-color: #C9D4D8;
}

/* The "table_bottomline" class can be used in a multiple css definition to add a bottom line to a table cell. */
.table_bottomline {
    border-bottom: solid 1px #006699;
}

/* --- Padding --- */
/* The padding classes can be used in a multiple css definition to add padding to a control. */
.padding_top {
    padding-top: 10px;
}

.padding_bottom {
    padding-bottom: 10px;
}

.padding_right {
    padding-right: 10px;
}

.padding_left {
    padding-left: 10px;
}

.padding_all {
    padding: 10px 10px 10px 10px;
}

.padding_pagecontent {
    padding: 6px 6px 6px 6px;
}

/* --- Text classes --- */
.text_bannertitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bolder;
    color: white;
}

.bannertitle {
    background-color: rgba(14, 49, 142, .9);    
}

.text_pagetitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18pt;
    color: #999999;
}

.text_title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    color: #000000;
}

.text_subtitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    color: #006699;
    border-bottom: solid 1px #006699;
    padding-top: 12px;
}

.text_label {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    color: #000000;
    padding-top: 9pt;
    padding-right: 10px;
    padding-bottom: 2px;
}

.text_label_same_row {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    color: #000000;
    padding-top: 2pt;
    padding-right: 10px;
    padding-bottom: 2px;
}

.text_value {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    font-style: italic;
    color: #006699;
    padding-top: 2px;
    padding-right: 10px;
}

/* --- Input classes --- */
INPUT {
    font-family: Verdana, Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
}

    INPUT.input_text {
        border-color: #CCCCCC;
    }

    INPUT.input_text_mandatory {
        border-color: gold;
    }

    INPUT.input_text_readonly {
        background-color: silver;
        border-style: inset;
    }

    INPUT.input_button {
        font-size: 9pt;
        font-weight: bolder;
        color: #FFFFFF;
        background-color: #006699;
        border-style: solid;
        border-width: 1px;
        width: 100px;
    }

    INPUT.input_button_medium {
        font-size: 9pt;
        font-weight: bolder;
        color: #FFFFFF;
        background-color: #006699;
        border-style: solid;
        border-width: 1px;
        width: 140px;
    }

    INPUT.input_button_large {
        font-size: 9pt;
        font-weight: bolder;
        color: #FFFFFF;
        background-color: #006699;
        border-style: solid;
        border-width: 1px;
        width: 180px;
    }

    INPUT.input_small {
        width: 50px;
    }

    INPUT.input_medium {
        width: 150px;
    }

    INPUT.input_large {
        width: 300px;
    }

    INPUT.input_extralarge {
        width: 600px;
    }

    INPUT[type="button"]:disabled,
    INPUT[type="submit"]:disabled {
        background: #dddddd;
        background-color: darkGrey;
    }

TEXTAREA {
    font-family: Verdana, Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    border-color: #CCCCCC;
}

    TEXTAREA.textarea_small {
        height: 100px;
        width: 350px;
    }

    TEXTAREA.textarea_medium {
        height: 100px;
        width: 775px;
    }

    TEXTAREA.textarea_large {
        height: 300px;
        width: 1000px;
    }

SELECT {
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    font-family: Verdana, Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    color: #000000;
    border: 1px #660000;
    width: 155px;
}

    SELECT.select_small {
        width: 50px;
    }

    SELECT.select_medium {
        width: 150px;
    }

    SELECT.select_large {
        width: 300px;
    }

    SELECT.select_extralarge {
        width: 600px;
    }
/* --- Validation summary style --- */
.validation_summary {
    margin-top: 10px;
    font-size: 10pt;
    font-style: italic;
    color: #DD0000;
}

/* --- Link classes --- */
/* Standard links */
A:active {
    text-decoration: underline;
    color: #C9D4D8;
    font-size: 9pt;
}

A:link {
    text-decoration: underline;
    color: #C9D4D8;
    font-size: 9pt;
}

A:visited {
    text-decoration: underline;
    color: #C9D4D8;
    font-size: 9pt;
}

A:hover {
    text-decoration: underline;
    color: gray;
}

/* --- Datagrid classes --- */
/* Standard datagrid style definition */
.datagrid {
    width: 100%;
    background-color: White;
    border-color: #999999;
    border-width: 1px;
    border-style: none;
    font-size: 9pt;
}

.datagrid_header {
    font-weight: bold;
    color: #ffffff;
    background-color: #006699;
}

.datagrid_footer {
    color: white;
    background-color: #006699;
}

.datagrid_pager {
    text-align: Center;
    color: white;
    background-color: #006699;
}

.datagrid_selectedItem {
    font-weight: bold;
    color: White;
    background-color: #008A8C;
}

.datagrid_alternatingItem {
    background-color: gainsboro;
}

.datagrid_item {
    color: Black;
    background-color: #EEEEEE;
}

/* Datagrid print friendly style definition */
.datagrid_printfriendly {
    width: 100%;
    background-color: White;
    padding: 3;
    border-color: #999999;
    border-width: 1px;
    border-style: none;
    font-size: 9pt;
}

.datagrid_printfriendly_header {
    font-weight: bold;
    color: white;
    background-color: black;
}

.datagrid_printfriendly_footer {
    font-weight: bold;
    color: white;
    background-color: black;
}

.datagrid_printfriendly_alternatingItem {
    color: black;
    background-color: #EEEEEE;
}

.datagrid_printfriendly_item {
    color: black;
    background-color: #FFFFFF;
}

/* --- Styles for the "menu banner": the banner for the menu and the bottom "link to komatsu" banner --- */
/* Table styles for the menu banner */
TABLE.table_menubanner {
    border-style: none;
    border-collapse: collapse;
    width: 100%;
    font-size: 9pt;
}

    TABLE.table_menubanner TD {
        font-weight: bold;
        background-color: #C9D4D8;
        color: #006699;
        padding-top: 6px;
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 6px;
    }
/* Spacer underneath the menu bar */
.div_menuspacer {
    border-style: none;
    border-collapse: collapse;
    width: 100%;
    font-size: 1px;
}
/* Link styles used in the menu */
A.menubanner:active {
    text-decoration: underline;
    color: #006699;
    font-size: 9pt;
}

A.menubanner:link {
    text-decoration: underline;
    color: #006699;
    font-size: 9pt;
}

A.menubanner:visited {
    text-decoration: underline;
    color: #006699;
    font-size: 9pt;
}

A.menubanner:hover {
    text-decoration: underline;
    color: #0099BB;
}

/* Scroll divs */
div.scroll_medium {
    overflow: auto;
    height: 220px;
    border-style: solid;
    border-color: gray;
    border-width: 1px;
}

div.scroll_large {
    overflow: auto;
    height: 300px;
    border-style: solid;
    border-color: gray;
    border-width: 1px;
}