/*
    Metacom impersonation CSS
    IMC 16 Oct 2013
*/

html {
    background-color: white;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    color: #333333;
    margin: 0;
    padding: 0px 5px;
}

.metacomEmbedBox {
    background-repeat: repeat-x;
    border-color: #9999CC;
    border-style: solid;
    border-width: 1px;
    position: relative;
    z-index: 1;
    background-position: 0% 0%;
    font-family: Arial,Helvetica,sans-serif;
    text-align: left;
    padding-bottom: 12px;
    margin-bottom: 15px;
    padding-top: 0px;
    margin-top: 0px;
    padding-left: 0px;
    margin-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
}

.itemBox {
    border-color: #9999CC;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 5px;
    margin-right: 2px;
    border-radius: 5px;
}

TABLE {
    border-collapse: collapse !IMPORTANT;
}

.itemBox H4 {
    font-size: 14px;
    font-weight: 400;
    color: #013E7F;
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0px;
    background-color: #E6ECF2;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.itemBox DIV {
    margin: 0 3px 0 3px;
}


.metacomEmbedBoxL {
    background-repeat: no-repeat;
    background-position: 0% 0%;
    z-index: auto;
    font-size: 12px;
    color: #333333;
}

.metacomEmbedBoxR {
    background-repeat: no-repeat;
    background-position: 100% 0%;
    padding-right: 25px;
    z-index: 3;
}

.metacomEmbedBox H4 {
    font-size: 14.6667px;
    font-weight: 400;
    color: #013E7F;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 0px;
}


.metacomEmbedBoxBody {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 16px;
}

.metacomEmbedBoxTable {
    border-collapse: collapse;
}

    .metacomEmbedBoxTable, .metacomEmbedBoxTable TH, .metacomEmbedBoxTable TD {
        border: 1px solid #9999CC;
    }

.metacomEmbedHeader {
    width: 100%;
    float: left;
    left: 0;
    top: 22px;
    padding: 0;
    position: fixed;
    background-color: white;
    margin-bottom: 10px;
    z-index: 999;
    border-bottom: 1px solid #9999CC;
}

    .metacomEmbedHeader H1 {
        font-size: 18px;
        font-weight: 200;
        color: #013E7F;
        font-family: Arial;
        Helvetica;
        sans-serif;
        margin: 2px;
    }

.metacomEmbedNav {
    width: 100%;
    float: left;
    left: 0;
    top: 0;
    padding: 0;
    position: fixed;
    background-color: #cccccc;
    margin-bottom: 10px;
    z-index: 999;
}

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

    .metacomEmbedNav li {
        float: left;
    }

        .metacomEmbedNav li a {
            display: block;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 15px;
            padding-right: 15px;
            text-decoration: none;
            font-weight: 700;
            color: #333333;
            font-size: 11px;
            font-family: Arial;
            Helvetica;
            sans-serif;
        }

            .metacomEmbedNav li a:hover {
                color: #d4470f;
                background-color: white;
            }

.metacomEmbedSubNav {
    width: 100%;
    float: left;
    padding: 0;
    background-color: #cccccc;
    margin-bottom: 10px;
}

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

    .metacomEmbedSubNav li {
        float: left;
        width: 100px;
    }

        .metacomEmbedSubNav li a {
            display: block;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 15px;
            padding-right: 15px;
            text-decoration: none;
            font-weight: 400;
            color: #333333;
            font-size: 11px;
            font-family: Arial;
            Helvetica;
            sans-serif;
        }

            .metacomEmbedSubNav li a:hover, .metacomEmbedSubNavSelected {
                color: #d4470f;
                background-color: white;
            }

.fixedwidth li {
    width: 100px;
}

.metacomEmbedFooter {
    font-family: Arial;
    Helvetica;
    sans-serif;
    font-size: 12px;
}

.metacomEmbedBanner {
    font-family: Arial;
    Helvetica;
    sans-serif;
    font-size: 12px;
    background: yellow;
}

.sideMenu {
    float: left;
    position: fixed;
    left: 0;
    top: 60px;
    width: 200px;
}

    .sideMenu select, .sideMenu option {
        width: 200px;
    }

.mainContent {
    margin-left: 200px;
    margin-top: 25px;
}

#body {
    margin-top: 60px;
}

.status {
    width: 17px;
    height: 16px;
    display: inline-block;
    background-repeat: no-repeat;
}

.statusNotRequired A {
    text-decoration: line-through !IMPORTANT;
}

.groupEdit {
    width: 250px;
    float: left;
}

.groupEditProduct {
    width: 120px;
    display: inline-block;
}

.groupEdit FIELDSET {
    border: 1px solid #013E7F;
    margin: 2px 2px 2px 2px;
    padding: 2px 5px 5px 5px;
    border-radius: 3px;
}

/* Styles for the collection content editable control*/

.cosysSortable UL {
    list-style-type: none;
    margin: 0 0 0 0;
    margin-right: 0px;
    padding: 0 0 2.5em;
}

.cosysSortable li {
    margin: 2px;
    padding: 2px;
    width: 250px;
    background-color: #EBEBF5;
}

    .cosysSortable li:hover {
        background-color: white;
        cursor: move;
    }

LI SPAN.id {
    display: none;
}

/* ===========
icons are spaced evenly, so x & y position numbers should almost always be the following:
 16px  80px   144px  208px  272px  336px  400px  464px  528px  592px  656px  720px
784px  848px  912px  976px 1040px 1104px 1168px 1232px 1296px 1360px 1424px
============== */

.icon {
    background-image: url('../images/jive-icon-sprites-med.png');
    height: 16px;
    width: 17px;
    margin: -1px 4px 0 0;
    display: inline-block;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    padding: 0;
}

.icon-product-group {
    background-position: -400px -528px;
}

.icon-product {
    background-position: -208px -400px;
}

.icon-customer {
    background-position: -16px -528px;
}

.icon-emulate {
    background-position: -16px -528px;
}

.icon-sortable {
    background-position: -80px -272px;
}

.icon-error {
    background-position: -336px -592px;
}

.context-menu {
    background: transparent url(../images/jive-contentblock-options-icons.png) no-repeat 0 0;
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-right: 3px;
}

    .context-menu:hover {
        background-position: 0 -12px;
    }

.header-float-right {
    float: right;
}

#collectionContent .remove {
    float: right;
}

#body H3 {
    margin: 0px;
    font-size: 13px;
    font-weight: 400;
    color: #013E7F;
    margin-bottom: 5px;
}

.metacomEmbedBoxBodySection {
    border-top: 1px solid #9999CC;
    padding: 5px;
}

.edit-1col LABEL, .edit-2col LABEL {
    width: 10%;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    float: left;
}

.edit-1col INPUT, .edit-1col TEXTAREA {
    width: 89%;
}

.edit-1col .edit-1col-value {
    width: 50%;
    display: inline-block;
    float: left;
}

.edit-1col DIV {
    display: inline-block;
}

.edit-1col:hover, .edit-2col:hover {
    background-color: #EBEBF5;
}

.edit-2col INPUT, .edit-2col SELECT {
    width: 39%;
}

.display-1col LABEL {
    width: 10%;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

#adminGroupsUL {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

    #adminGroupsUL li {
        float: left;
        background-color: #EBEBF5;
        padding: 2px;
        margin-right: 10px;
        border-color: #9999CC;
        border-style: solid;
        border-width: 1px;
        border-radius: 3px;
    }

.multiChooser UL {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

    .multiChooser UL LI {
        float: left;
        background-color: #EBEBF5;
        padding: 2px;
        margin-right: 10px;
        border-color: #9999CC;
        border-style: solid;
        border-width: 1px;
        border-radius: 3px;
    }

.prodSearch INPUT {
    width: 30px;
    display: block;
}

.datefield, .edit-1col .datefield {
    width: 7em;
}

.timefield, .edit-1col .timefield {
    width: 3em;
}

.loginInfo {
    display: block;
    float: right;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 200;
    color: #333333;
    font-size: 11px;
    font-family: Arial;
    Helvetica;
    sans-serif;
}

.imc-menu {
    display: none;
}

    .imc-menu.visible {
        display: inline-block;
    }



.full-width-table TABLE, .full-width-table {
    width: 100%;
}

TH {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: #013E7F;
}

.full-width-table .full-width INPUT, .full-width-table .full-width TEXTAREA {
    width: 100%;
}

#collection-contents-table {
    width: 100%;
}

    #collection-contents-table TD {
        vertical-align: top;
    }


        #collection-contents-table TD .icon-add,
        #availableResources .icon-add,
        #availableResources .icon-info {
            /* CSS to make the text in this cell very small, not a good solution */
            font-size: 0px;
            color: White;
        }

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

#availableResources {
    width: 100% !IMPORTANT;
}

.testSystem {
    color: Black;
    padding: 1px 1px 1px 1px;
    font-weight: 700;
    background-color: Yellow;
    border: 2px solid black;
}

.pseudoButton {
    float: left;
    display: inline-block;
    border: 1px solid #ccc;
    background: #ccc;
    color: #333;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 2px;
    margin-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-right: 2px;
    padding-left: 2px;
    text-align: center;
    text-decoration: none;
    font-weight: 900;
}

    .pseudoButton:hover {
        border: 1px solid #333;
        color: #000;
    }

#errorAdditionalInfoShow, #errorAdditionalInfoHide {
    text-decoration: underline;
    margin: 5px 0px 5px 0px;
}

.orderedList OL {
    counter-reset: item;
    padding: 0 0 0 0
}

.orderedList LI {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #013E7F;
}

    .orderedList LI P {
        font-size: 12px;
        font-weight: 100;
        color: black;
        padding-left: 5px;
    }

    .orderedList LI:before {
        content: counters(item, ".") " ";
        counter-increment: item;
    }

.custom-combobox {
    position: relative;
    display: inline-block;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    /* support: IE7 */
    /*height: 1.7em; */
    /*top: 0.1em; */
}

.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
}

h2 {
    font-size: 18px;
    font-weight: 200;
    color: #013E7F;
    font-family: Arial, Helvetica, sans-serif;
    margin: 2px;
}

td.add-mapping {
    padding-right: 1em;
}

input.branch-mapping {
    width: 16em;
}

input.text-box {
    width: 16em;
}

.editor-field-block {
    margin: 4px 8px 4px 0px;
    float: left;
}