@media screen {


    /*
        Document   : main
        Created on : 25.02.2010, 14:47:48
        Author     : patrick
        Description:
        Purpose of the stylesheet follows.
    */
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
    }


    html, body {
        width: 100%;
        height: 100%;
    }

    *:focus {
        outline: 0
    }


    body {
        background-image: url(/javax.faces.resource/bg-gray.gif.jsf?ln=images);
        background-repeat: repeat-x;
        color: #333333;
        font: 83%/1.5 arial, tahoma, verdana, sans-serif;
    }


    /* STRUCTURE */
    /* div around everything */
    div#outerWrap {
        margin: 0 auto;
        width: 990px;
    }


    div#logoWrapper {
        padding: 15px 15px;
        background: white;
        border: 1px solid #dedede;
        border-top: none;
        margin: 0 0 15px 0;
        min-height: .5em;
        cursor: pointer;
    }

    #moduleLogo img, #clinicLogo img {
        border: none;
        max-height: 70px;
        max-width: 600px;
        margin-right: 20px;
        vertical-align: middle;

    }

    #moduleLogo img {
        max-width: 300px;
    }

    #moduleLogo, #clinicLogo {
        display: inline;
    }

    div#logoWrapper.hideLogos {
        padding-top: 0;
    }

    div.hideLogos img {
        display: none;
    }

    div#header {
        text-align: center;
        color: red;
        font-weight: bold;
        margin-top: -15px;
        padding: 8px;
        display: none;
    }

    /* wrapper around content and menu (left and right column */
    div#contentWrap {
        margin: 0 auto;
        padding: 15px;
        position: relative;
        background: white;
        border: 1px solid #dedede;
        min-height: 500px;
    }

    div#scrollTool {
        width: 50px;
        position: fixed;
        top: 44%;
        right: 0;
        display: none;
    }

    div#scrollTool img {
        width: 30px;
        opacity: 0.12;
        filter: alpha(opacity=12); /* For IE8 and earlier */
    }

    div#scrollTool img:hover {
        opacity: 0.8;
        filter: alpha(opacity=80); /* For IE8 and earlier */
    }

    #returnToButton {
        display: none;
        float: right;
        font-size: 70%;
    }

    #loginBlock input[type="text"], #loginBlock input[type="password"] {
        width: 165px;
    }

    #loginBlock .formElement {
        white-space: nowrap;
    }

    #loginBlock .formElement div {
        display: inline-block;
    }

    #loginBlock .formElement div#userIdBox {
        float: left;
    }

    .helpIcon {
        float: right;
        width: 22px;
        height: 22px;
        background: url(/javax.faces.resource/help.gif.jsf?ln=images) no-repeat 3px 3px;
        cursor: help;
        border: 1px solid transparent;
    }

    .helpIcon:hover {
        border-style: solid;
        border-width: 1px;
        border-color: #bbb #666 #666 #bbb;
        background-color: #EFEFEF;
    }

    .helpIcon:active {
        border-style: solid;
        border-width: 1px;
        border-color: #666 #bbb #bbb #666;
        background-color: white;
    }

    .helpIconForm {
        float: right;
        width: 22px;
        height: 22px;
        background: url(/javax.faces.resource/help.gif.jsf?ln=images) no-repeat 3px 3px;
        cursor: help;
        border: 1px solid transparent;
    }

    .helpIconForm:hover {
        border-style: solid;
        border-width: 1px;
        border-color: #bbb #666 #666 #bbb;
        background-color: #EFEFEF;
    }

    .helpIconForm:active {
        border-style: solid;
        border-width: 1px;
        border-color: #666 #bbb #bbb #666;
        background-color: white;
    }

    #helpFrame {
        width: 100%;
        height: 100%;
        border: none;
    }

    #helpImage {
        border: none;
        display: block;
        margin: 0 auto;
    }

    #dialogContent input#helpFrameOkButton {
        margin: 10px 0;
    }

    div#leftColumn {
        float: left;
        width: 150px;
    }

    div#rightColumn {
        float: left;
        width: 795px;
        margin-left: 13px;
    }

    /* div around the content in the right column */
    div#content {
        background-color: #f6f6f6;
        padding: 15px 5px;
        border: 1px solid #dedede;
        min-height: 260px;
    }

    /* width of the content column */
    div#contentColumn1 {
        width: 590px;
        float: left;
    }

    /* hidden 2nd content column , not used at the moment*/
    div#contentColumn2 {

        border: 0 solid blue;
        float: left;
    }


    /* img in the right column, beside the user name */
    div#welcomeUser img {
        margin-bottom: -4px;
    }

    /* font size chooser */
    div#fontSize {
        position: absolute;
        bottom: 0;
        right: 15px;
        color: #999;
    }

    div#fontSize a {
        text-decoration: none;
        margin-left: 8px;
        color: #999;
    }

    div#fontSize a:hover {
        color: #c00;
    }

    div#fontSize a.fontSizeMinus {
        font-size: 90%;
    }

    div#fontSize a.fontSizePlus {
        font-size: 110%;
    }


    /* FORMS  */
    form {
        margin: 0;
        padding: 0;
    }


    fieldset legend {
        padding: 0 0.5em;
        font-weight: bold;
        margin-bottom: 15px;

    }

    fieldset.visibleFieldset {
        border: 1px solid #dedede;
        margin: 5px 0;
        padding: 10px 5px;
    }


    div.formElement {
        clear: left;
        margin-bottom: 0;
        min-height: 25px;
    }


    div.formElement.hidden {
        min-height: 0;
    }

    /* label element for a form input */
    div.formElement label {
        display: inline-block;
        float: left;
        min-height: 18px;
        width: 160px;
        border: none;
        padding: 2px 0 0;
        text-align: left;
        vertical-align: top;
    }

    /* some text that should have the same format as a label */
    div.formElement .pseudoLabel {
        display: inline-block;
        float: left;
        min-height: 18px;
        width: 120px;
        border: none;
        text-align: left;
        padding-right: 15px;
        vertical-align: top;
    }

    div.formElement label.labelAddRow {
        margin-left: 25px;
        float: none;
        display: inline-block;
    }

    div.formElement label.normalText {
        margin-left: 4px;
        float: none;
        width: auto;
        display: inline-block;
    }

    div.formElement label.formElementDisabled {
        color: #999999;
    }

    div.formElement img.clickable {
        margin-top: -2px;
    }

    div.formElement img.noclickable {
        margin-top: -2px;
    }

    .fieldNotValid, .fieldNotValid.active {
        background: #FFEFEF;
        border: 1px solid red;
    }

    input[type="radio"].fieldNotValid {
        border: 1px solid red;
        background: #FFEFEF;
    }

    label.labelForInvalidField {
        color: red;
        font-style: italic;
    }

    .formErrorList {
        margin-top: 20px;
        text-align: left;
    }

    .formErrorList li {
        margin-bottom: 8px;
    }

    .questionSelectTextArea {
        display: block;
        width: 100%;
        height: 115px;
        font-size: small;
    }

    /* INPUT */
    input[type="hidden"] {
        margin: 0;
        padding: 0;
        visibility: hidden;
    }

    input, select, textarea {
        border: 1px solid #bababa;
        height: 20px;
        width: 177px;
        vertical-align: top;
        outline: none;
        margin: 0 0 0 0;
        background: white;
    }

    /* this was used to give the fields in the forms variable length.
            a min and max was specified but within this range the fields were
            all different
            table.subformForm input,
            table.subformForm select,
            table.subformForm textarea{
            width:auto;
            min-width: 143px;
            max-width: 761px;
            }
            */
    input[size="90"] {
        width: auto;
    }


    select.pagingQuantity, select.pagingPage {
        width: auto;
    }

    .dateInput {
        width: 170px;
    }

    input.fieldWithIcon {
        width: 155px;
        margin-right: 2px;
    }

    /*  put here a name of matrix with prefix "#.." and suffix "_div"
            * if you want to change a class for questions in matrix
            */
    #ASIASENSORY_MATRIX_div select {
        width: 42px;
    }

    #ASIAMOTOR1_MATRIX_div select {
        width: 42px;
    }

    #ASIAMOTOR2_MATRIX_div select {
        width: 42px;
    }

    #MATRIX1_div select {
        width: 42px;
    }

    #ASIA_ZOPP_MATRIX_div select {
        width: 42px;
    }

    select {
        height: 22px;
        width: 183px;
        margin: 0 0 0 0;
    }

    textarea {
        height: 80px;
        margin: 0 0 0 0;
        outline: none;
        vertical-align: top;
    }

    input:hover, select:hover, textarea:hover {
        border: 1px solid #333;
    }

    input:focus, select:focus, textarea:focus {
        border: 1px solid #333;
    }

    input[disabled="disabled"]:hover, select[disabled="disabled"]:hover, textarea[disabled="disabled"]:hover,
        /* second line is beceause IE7 doesn''t recognize disabled="disabled" */
    input[disabled]:hover, select[disabled]:hover, textarea[disabled]:hover {
        border: 1px solid #bababa;
        cursor: default;
    }

    /* BUTTONS  */
    input[type="button"], input[type="submit"], input[type="reset"] {
        width: auto;
    }


    input[type="button"], input[type="submit"] {
        width: auto;

        height: auto;
        border: 1px solid #666;
        background: #CDCDCD;
        border: 1px solid black;
        border-color: white gray gray white;
        cursor: pointer;
        height: 22px;

    }

    table.subformForm input[type="button"], table.subformForm input[type="submit"] {
        min-width: inherit;
    }

    input.rightSideBtn {
        float: right;
    }

    input + input {
        margin-left: .3em;
    }

    input.rightSideBtn + input.rightSideBtn {
        margin-left: 0;
        margin-right: .3em;
    }

    input[type="button"]:hover, input[type="submit"]:hover {
        border-style: solid;
        border-width: 1px;
        background-color: #ddd;

    }

    input[type="button"]:focus, input[type="submit"]:focus {
        outline: none;
        border-color: #bbb #666 #666 #bbb;
        background-color: #ddd;
    }

    input[type=button]:active {
        /*border:1px solid #111;*/
        border-style: solid;
        border-width: 1px;
        border-color: #666 #bbb #bbb #666;
        background-color: #ddd;

    }

    input[type="button"][disabled="disabled"]:hover, input[type="button"][disabled="disabled"]:active,
        /* second line is beceause IE7 doesn''t recognize disabled="disabled" */
    input[type="button"][disabled]:hover, input[type="button"][disabled]:active {
        border-color: white gray gray white;
        cursor: default;
        color: #808080;
    }

    input[type="button"][disabled="disabled"],
        /* second line is beceause IE7 doesn''t recognize disabled="disabled" */
    input[type="button"][disabled] {
        border-color: white gray gray white;
        cursor: default;
        color: #808080;
    }


    /* BUTTONS WITH IMAGES */
    input.back {
        background: #CDCDCD url(/javax.faces.resource/back.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.ok {
        background: #CDCDCD url(/javax.faces.resource/ok.gif.jsf?ln=images) no-repeat 4px -2px;
        padding: 2px 5px 2px 24px;
    }

    input.cancel {
        background: #CDCDCD url(/javax.faces.resource/cancel.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    /* waiting button */
    .waitingLayer input.cancel {
        background: #CDCDCD url(/javax.faces.resource/close_waitingImage.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
        width: auto;

    }

    input.close {
        background: #CDCDCD url(/javax.faces.resource/close.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 22px;
    }

    input.merge {
        background: #CDCDCD url(/javax.faces.resource/merge.png.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.add {
        background: #CDCDCD url(/javax.faces.resource/add.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input[disabled="disabled"].add, input[disabled].add {
        background: #CDCDCD url(/javax.faces.resource/add_i.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.delete {
        background: #CDCDCD url(/javax.faces.resource/delete.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.exportExcel {
        background: #CDCDCD url(/javax.faces.resource/exportExcel.png.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.edit {
        background: #CDCDCD url(/javax.faces.resource/edit.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.copy {
        background: #CDCDCD url(/javax.faces.resource/copy.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.clearCache {
        background: #CDCDCD url(/javax.faces.resource/clearCache.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.upload {
        background: #CDCDCD url(/javax.faces.resource/upload.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }


    input.download {
        background: #CDCDCD url(/javax.faces.resource/download.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.excel {
        background: #CDCDCD url(/javax.faces.resource/exportExcel.png.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.print {
        background: #CDCDCD url(/javax.faces.resource/print.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.login {
        background: #CDCDCD url(/javax.faces.resource/login.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.next {
        background: #CDCDCD url(/javax.faces.resource/next.gif.jsf?ln=images) no-repeat 4px 3px;
        padding: 2px 5px 2px 26px;
    }

    input.change {
        background: #CDCDCD url(/javax.faces.resource/change.gif.jsf?ln=images) no-repeat 4px 3px;
        padding: 2px 5px 2px 22px;
    }

    input[disabled="disabled"].next, input[disabled].next {
        background: #CDCDCD url(/javax.faces.resource/next_i.gif.jsf?ln=images) no-repeat 4px 3px;
        padding: 2px 5px 2px 26px;
    }

    input.register {
        background: #CDCDCD url(/javax.faces.resource/register.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.remove {
        background: #CDCDCD url(/javax.faces.resource/remove.gif.jsf?ln=images) no-repeat 4px 3px;
        padding: 2px 5px 2px 26px;
    }

    input[disabled="disabled"].remove, input[disabled].remove {
        background: #CDCDCD url(/javax.faces.resource/remove_i.gif.jsf?ln=images) no-repeat 4px 3px;
        padding: 2px 5px 2px 26px;
    }

    input.reset {
        background: #CDCDCD url(/javax.faces.resource/reset.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 25px;
    }

    input.favourite {
        background: #CDCDCD url(/javax.faces.resource/star.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 25px;
    }

    input.pdf {
        background: #CDCDCD url(/javax.faces.resource/pdf.jpg.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 25px;
    }

    input[disabled="disabled"].reset, input[disabled].reset {
        background: #CDCDCD url(/javax.faces.resource/reset_i.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 25px;
    }

    input.autofill {
        /*
            * Asia score auto-fill button
            */
        background: #CDCDCD url(/javax.faces.resource/autofill.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 25px;
    }

    input.rebuild {
        background: #CDCDCD url(/javax.faces.resource/rebuild.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 25px;
    }

    input.omr {
        background: #CDCDCD url(/javax.faces.resource/omr.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.eform {
        background: #CDCDCD url(/javax.faces.resource/add.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.fucalendar {
        background: #CDCDCD url(/javax.faces.resource/calendar.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.stats {
        background: #CDCDCD url(/javax.faces.resource/stats.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.save {
        background: #CDCDCD url(/javax.faces.resource/save.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.greenPin {
        background: #CDCDCD url(/javax.faces.resource/greenPin.png.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.redPin {
        background: #CDCDCD url(/javax.faces.resource/redPin.png.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.complete {
        background: #CDCDCD url(/javax.faces.resource/status_full_green.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.save_incomplete {
        background: #CDCDCD url(/javax.faces.resource/save_incomplete.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.start {
        background: #CDCDCD url(/javax.faces.resource/nextImg.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.changePassword {
        background: #CDCDCD url(/javax.faces.resource/lock-icon.png.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.userProfiles {
        background: #CDCDCD url(/javax.faces.resource/profile.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.joinStudy {
        background: #CDCDCD url(/javax.faces.resource/profileAdd.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.sendEmail {
        background: #CDCDCD url(/javax.faces.resource/emailSend.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.sendLetter {
        background: #CDCDCD url(/javax.faces.resource/emailSend.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.sendLink {
        background: #CDCDCD url(/javax.faces.resource/link.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.saveExit {
        background: #CDCDCD url(/javax.faces.resource/save_exit.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input[disabled="disabled"].save, input[disabled].save {
        background: #CDCDCD url(/javax.faces.resource/save_i.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input[disabled="disabled"].save_incomplete, input[disabled].save_incomplete {
        background: #CDCDCD url(/javax.faces.resource/save_incomplete_i.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }


    input.search {
        background: #CDCDCD url(/javax.faces.resource/search.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.select {
        background: #CDCDCD url(/javax.faces.resource/select.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }


    input.implantNotebook {
        background: #CDCDCD url(/javax.faces.resource/implantNotebook.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
        width: 236px;
    }

    input.submitForm {
        background: #CDCDCD url(/javax.faces.resource/submitForm.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input[disabled="disabled"].submitForm, input[disabled].submitForm {
        background: #CDCDCD url(/javax.faces.resource/submitForm_i.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.create {
        background: #CDCDCD url(/javax.faces.resource/addplus.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.modify {
        background: #CDCDCD url(/javax.faces.resource/modify.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.list {
        background: #CDCDCD url(/javax.faces.resource/list.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.tenLast {
        background: #CDCDCD url(/javax.faces.resource/ten_last_patients.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
        min-width: 130px;
    }

    input.statisticBoard {
        background: #CDCDCD url(/javax.faces.resource/statisticboard.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    /* remove the border on mozilla browser, when a button has focus */
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner {
        border: 0;
    }

    form#logoUpForm input[type="file"] {
        width: 330px;
        display: block;

    }

    form#logoUpForm input.upload {
        margin-top: 6px;
    }

    /* button on the same line as label and input */
    div.formElement input.buttonOnSameLine {
        margin: 0 0 0 20px;
    }

    /* button on new line. need margin : label width + margin */
    div.formElement input.buttonOnNewLine {
        float: left;
        clear: left;
        display: block;
        margin-left: 135px;
    }


    input[type="text"], input[type="password"] {
        height: 18px;
        padding-left: 4px;
        padding-top: 1px;
    }

    input.blur[type="text"] {
        color: #A5A5A5;
    }


    input[type="radio"], table.subformForm input[type="radio"] {
        width: auto;
        min-width: inherit;
        height: auto;
        border: none;
        background: transparent;
    }

    input[type="checkbox"], table.subformForm input[type="checkbox"] {
        width: auto;
        min-width: inherit;
        height: auto;
        border: none;
    }

    input[type="radio"]:focus {
        outline: 1px solid #333;
        border: none;
    }

    input[type="checkbox"]:focus {
        outline: 1px solid #333;
        border: none;
    }


    div.radioBox {
        float: left;
        overflow: hidden;
        padding: 0 0;

    }

    div.radioBoxCustom {
        display: inline-block;
        float: none;
        padding: 0 6px 0 0;
        width: 196px;
        vertical-align: top;
    }

    div.radioBox label, div.radioBoxCustom label {
        width: auto;
        margin: 0;
        padding: 0 0 0 .3em;
        text-align: left;

    }

    .verticalRadioButtons input[type=radio] {

        margin-top: 6px;
        margin-right: 6px;
        float: left;

    }

    div.radioBox div.formElement, div.radioBoxCustom div.formElement {
        display: inline;
        float: none;
        margin-left: 4px;
    }

    div.radioBox div.formElement:first-child, div.radioBoxCustom div.formElement:first-child {
        margin-left: 0;
    }

    div.radioBox div.formElement input, div.radioBoxCustom div.formElement input {
        display: inline;
        margin-bottom: 0;
        margin-top: 4px;
    }

    div.radioBox div.formElement label, div.radioBoxCustom div.formElement label {
        display: inline;
        float: none;
        vertical-align: bottom;
    }


    .required {
        background: url(/javax.faces.resource/required.gif.jsf?ln=images) no-repeat 96% 15%;
    }

    .requiredTxt {
        padding-left: 10px;
        background: url(/javax.faces.resource/required.gif.jsf?ln=images) no-repeat 0 15%;
    }


    .errorMessage {
        font-weight: bold;
        color: #DD0000;
    }

    .fatalMessage {
        font-weight: bold;
        color: #DD0000;
    }

    .infoMessage {
        font-weight: bold;
        color: #0075dd;
    }

    label input[type="radio"] {
        width: auto;
        border: none;
    }


    .langSelected {
        font-weight: bold;
        font-size: 105%;
    }

    .langUnselected {
        font-weight: normal;
        font-size: 100%;
    }

    .lang {
        margin-left: 3px;
    }

    /* SECONDARY NAVIGATION */
    #nav-secondary, #nav-secondary ul {
        position: static;
    }

    #nav-secondary, #nav-secondary li {
        list-style: none;
        margin: 0;
        padding: 0;
        background: #fff
    }

    #nav-secondary {
        padding-top: 0;
        border-top: 1px solid #ccc;
        margin-top: 1px
    }

    #nav-secondary a {
        line-height: 1.8;
        padding: 5px 0 5px 5px;
        font-size: 86%;
        font-weight: bold;
        display: block
    }

    #nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {
        text-decoration: none;
        cursor: pointer
    }

    #nav-secondary a:link {
        color: #000
    }

    #nav-secondary a:visited {
        color: #000
    }

    #nav-secondary a:hover, #nav-secondary a:focus {
        color: #c00;
    }

    #nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {
        color: #c00
    }

    #nav-secondary li {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #ccc;
        margin-left: 0;
        padding-left: 0;
    }


    /* SECONDARY NAVIGATION - 2nd TIER */
    #nav-secondary ul {
        margin: 0 0 1em 20px;
        padding: 0
    }

    #nav-secondary ul li {
        list-style: square outside;
        color: #CC0000;
        margin-left: 40px;
        line-height: 1.5;
        font-weight: normal;
        font-size: 75%;
    }

    #nav-secondary ul li a {
        font-size: 115%;
        padding: 0;
    }

    #nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {
        line-height: 1.5;
        font-weight: normal;
        width: auto;
        color: #000;
        width: 120px;
    }


    /*#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/listIconSquare.gif") no-repeat 0px .6em;padding:0 0 0 10px;font-weight:normal;width:auto;color:#000;width:120px;}*/
    #nav-secondary li.active li a:hover, #nav-secondary li.active li a:active, #nav-secondary li.active li a:focus {
        color: #c00
    }

    #nav-secondary li.active li {
        border: none;
        margin: 0
    }

    #nav-secondary li.active li.active a:link, #nav-secondary li.active li.active a:visited, #nav-secondary li.active li.active a:hover, #nav-secondary li.active li.active a:active {
        font-weight: bold
    }

    /* SECONDARY NAVIGATION - 3rd TIER */
    #nav-secondary ul ul {
        margin: 0 0 1em 13px;
        padding: 0
    }

    #nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {
        width: 117px
    }

    #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited, #nav-secondary li.active li.active li a:hover, #nav-secondary li.active li.active li a:active {
        font-weight: normal
    }

    #nav-secondary li.active li.active li.active a:link, #nav-secondary li.active li.active li.active a:visited, #nav-secondary li.active li.active li.active a:hover, #nav-secondary li.active li.active li.active a:active {
        font-weight: bold
    }

    /* SECONDARY NAVIGATION - 4th TIER */
    #nav-secondary ul ul ul {
        margin: 0 0 1em 13px;
        padding: 0
    }

    #nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {
        width: 104px
    }

    #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited, #nav-secondary li.active li.active li.active li a:hover, #nav-secondary li.active li.active li.active li a:active {
        font-weight: normal
    }

    #nav-secondary li.active li.active li.active li.active a:link, #nav-secondary li.active li.active li.active li.active a:visited,
    #nav-secondary li.active li.active li.active li.active a:hover, #nav-secondary li.active li.active li.active li.active a:active {
        font-weight: bold
    }


    /* Nav for Forms */
    #formularnav, #formularnav ul {
        float: none;
        padding: 0;
        margin: 0;
        list-style: none
    }

    #formularnav {
        font-weight: bold;
        height: 2.09em;
        font-size: 96%;
        margin: 0 0 0 0
    }

    #formularnav li {
        position: relative;
        background: #999;
        float: left;
        width: 10em;
        display: block;
        margin: 0;
        border-bottom: 3px solid #666;
        border-right: 3px solid #252525;
        padding: 0
    }

    #formularnav a, #formularnav a:link, #formularnav a:visited, #formularnav a:hover, #formularnav a:active {
        text-decoration: none;
        cursor: pointer;
        color: #fff;
        display: block;
        padding: 4px 10px 2px
    }

    #formularnav a:hover {
        color: #000
    }

    #formularnav li ul {
        border-left: 1px solid #c00;
        background-color: #f6f6f6;
        width: 15.8em;
        font-size: 90%;
        margin-top: 3px;
        position: absolute;
        font-weight: normal;
        left: -999em
    }

    #formularnav li:hover ul, #formularnav li.sfhover ul {
        left: 0;
        z-index: 99999
    }

    #formularnav li li {
        background: none;
        float: none;
        border: none;
        border: 1px solid #999;
        border-top: 1px solid #fff;
        border-right: none;
        border-left: none;
        padding-left: 0
    }

    #formularnav li li.last {
        border-bottom: none
    }

    #formularnav li li a, #formularnav li li a:link, #formularnav li li a:visited, #formularnav li li a:hover {
        color: #000;
        padding: 3px 10px 2px;
        width: 14em
    }

    #formularnav li li a:hover {
        color: #fff;
        background: #c00
    }

    #formularnav li.active {
        background: #c00;
        border-bottom: 3px solid #c00
    }

    #formularnav li.active ul {
        border: none;
        background-color: #c00;
    }

    #formularnav li.active a:link, #formularnav li.active a:visited, #formularnav li.active a:hover, #formularnav li.active a:active {
    }

    #formularnav li.active a:hover {
        color: #000
    }

    #formularnav li.active li {
        border: none;
        border-top: 1px solid #c15c5c;
        border-bottom: 1px solid #870000
    }

    #formularnav li.active li.last {
        border-bottom: none
    }

    #formularnav li.active li a:link, #formularnav li.active li a:visited, #formularnav li.active li a:hover, #formularnav li.active li a:active {
        color: #fff
    }

    /* hide from IE mac \*/
    #formularnav li {
        width: auto
    }

    /* PSEUDO-CLASSES */
    a, a:link, a:hover {
        background: transparent;
        text-decoration: none;
        cursor: pointer;
        color: #c00
    }

    a:hover, a:active, a:focus {
        text-decoration: underline;
    }

    /* TYPOGRAPHY */
    p, ul, ol {
        margin: 0 0 1.5em
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 .3em;
        color: #333;
    }

    h1 {
        font-size: 136%;
        margin-bottom: 0.6em
    }

    h2 {
        font-size: 126%;
        margin-bottom: 0.6em
    }

    h3 {
        font-size: 116%
    }

    h4 {
        font-size: 106%
    }

    h5, h6 {
        font-size: 100%
    }


    /* Lists */
    ul {
        margin: .3em 0 1.5em 0;
        list-style-type: none
    }

    ol {
        margin: .5em .5em 1.5em
    }

    ol li {
        margin-left: 1.4em;
        padding-left: 0;
        background: none;
        list-style-type: decimal
    }

    li {
        line-height: 1.4em;
        padding-left: 25px;
        background: transparent url(/javax.faces.resource/listIconSquare.gif.jsf?ln=images) no-repeat .6em .5em;
        text-align: left;
    }

    li.doc {
        background-position: 3px -500px
    }

    ul.nomarker li {
        background: none;
        padding-left: 0
    }

    dl {
        margin: 0 0 1em 0
    }

    dt {
        font-weight: bold;
        margin-top: 1.3em
    }

    dl dl {
        margin: 0 0 1.5em 30px
    }

    /* GENERAL */
    img {
        border: none
    }

    hr {
        margin: 1em 0;
        background: #f2f2f2;
        height: 1px;
        color: #f2f2f2;
        border: none;
        clear: both
    }

    .clear {
        clear: both;
        position: relative;
        font-size: 0;
        height: 0;
        line-height: 0
    }

    /* IMAGES */
    .clickable {
        padding: 3px;
        border: 1px solid transparent;
        cursor: pointer;
    }

    .noclickable {
        padding: 3px;
    }

    .clickable:hover {
        border-style: solid;
        border-width: 1px;
        border-color: #bbb #777 #777 #bbb;
        background: #EFEFEF;
    }

    .clickable:active {
        border-style: solid;
        border-width: 1px;
        border-color: #666 #bbb #bbb #666;
        background: white;
    }

    /* paging arrrows can be set inactive */
    .clickable.inactive {
        color: #999;
    }

    .clickable.inactive:hover {
        border: 1px solid transparent;
        background: transparent;
        cursor: default;
    }


    .helpIconField {
        padding: 3px;
        border: 1px solid transparent;
        cursor: help;
    }

    .helpIconField:hover {
        border-style: solid;
        border-width: 1px;
        border-color: #bbb #777 #777 #bbb;
        background: #EFEFEF;
    }

    .helpIconField:active {
        border-style: solid;
        border-width: 1px;
        border-color: #666 #bbb #bbb #666;
        background: white;
    }

    /* paging arrrows can be set inactive */
    .helpIconField.inactive {
        color: #999;
    }

    .helpIconField.inactive:hover {
        border: 1px solid transparent;
        background: transparent;
        cursor: default;
    }


    /* the 'waiting' layer */
    div.waitingLayer {
        position: absolute;
        z-index: 1000;
        background: #FFF;
        top: 0;
        left: 0;
        opacity: .5;
        filter: alpha(opacity=50);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }

    .waitingGif {
        display: block;
    }

    /* the cancel button on that layer */
    .cancelWaitingButton {
        display: block;
        background: #DDD;
        border: 1px solid #333;
        cursor: pointer;
        z-index: 100000;

    }

    .cancleButtonImg {
        border: none;
        float: left;
        margin: 2px 0 2px 4px;
    }

    #dialogContent input {
        margin-right: 4px;
    }

    /* LAYOUT - FOOTER */
    #footer {
        width: 100%;
        font-size: 86%;
        color: #999;
        margin: 0 0 4px 0;
    }

    #footer p {
        margin: 0
    }

    #footer a:link, #footer a:visited {
        color: #999;
        text-decoration: none;
    }

    #footer a:hover, #footer a:focus {
        color: #c00;
        text-decoration: underline;
    }

    #footer #loggin-informations {
        position: static;
        margin-top: -31px;
        text-align: right;
        font-size: 86%;
        color: #000000
    }


    ul#footerNav {
        list-style-type: none;
        list-style-image: none;
        margin-left: 0;
        padding: 0;
        float: left;
    }

    #footerNav li:first-child {
        border-left: 0;
    }

    #footerNav li {
        display: inline;
        padding: 0 5px;
        background: transparent;
        border-left: solid 1px;
        border-right: none;
    }


    div#languageSelection {
        word-spacing: 2px;
        text-align: right;
        padding-right: 0;
        margin-bottom: 10px;

    }

    /* clear cache block */
    div#clearCache {
        float: left;
        padding-top: 4px;
        margin: auto;
        width: 80px;
        display: none;
    }

    div#clearCache:hover {
        cursor: pointer;
        color: #800000;
    }


    /*block containing the newsletter*/
    .newsContainer {
        display: none;
        margin: 10px 0 0;
        background-color: #f6f6f6;
        overflow: hidden;
        border-style: solid;
        border-width: 1px;
        border-color: #e0e6e8;
    }


    /*block containing the newsletter*/
    .newsletter {
        border-width: 1px;
        padding: 0 5px;
        font-family: verdana, sans-serif;
        color: #000000;
        font-size: 10pt;
        text-align: left;
        background-color: #f6f7f6;
        overflow: visible;
        height: 20px;

    }


    /*input box containing the text of the newsletter*/
    .newsletterText {

        font-family: verdana, sans-serif;
        font-size: 83%;
        color: #000000;
        text-align: left;
        background-color: #f6f7f6;
        width: 90%;
        border: 0;
        cursor: pointer;
        float: right;
        margin-top: 1px;

    }


    .newsletterDescription {

        font-family: verdana, sans-serif;
        font-size: 83%;
        color: #000000;
        text-align: left;
        background-color: #f6f6f6;
        float: left;
        font-weight: bold;
        font-variant: small-caps;
        width: 6%;

    }


    /*block containing the newsletter*/
    .newsContainer {
        margin: 10px 0 0;
        background-color: #f6f6f6;
        overflow: hidden;
        border-style: solid;
        border-width: 1px;
        border-color: #e0e6e8;
    }

    /*input box containing the text of the newsletter*/
    .newsText {
        border-width: 1px;
        padding: 0 5px;
        font-family: verdana, sans-serif;
        color: #000000;
        font-size: 10pt;
        text-align: left;
        background-color: #f6f6f6;
        overflow: visible;
        height: 20px;
        width: 80%;
        cursor: pointer;
        float: right;
        margin-top: 1px;
    }


    .newsletterDescription {
        font-family: verdana, sans-serif;
        font-size: 10pt;
        color: #000000;
        text-align: left;
        background-color: #f6f6f6;
        float: left;
        font-weight: bold;
        font-variant: small-caps;
        width: 14%;
    }


    /*button to expand and collapse the newsletter*/
    .newsButton {
        padding-left: 0;
        padding-right: 0;
        width: 4%;
        float: right;
        font-family: verdana, sans-serif;
        color: #000000;
        font-size: 10pt;
        cursor: pointer;
        background-color: #f6f6f6;
        text-align: right;
    }

    .newsButton img.clickable {
        padding: 1px;
    }


    .switchUserDialog {
        width: 360px;
        height: 100px;
        min-height: 120px;
    }

    .switchUserDropDown {
        width: 104%;
        margin-bottom: 12px;
    }


    .userTitleBar {
        padding: .2em 5px;
        line-height: 2;
        background: #E7E7E7 url(/javax.faces.resource/bar-bg-grey2.gif.jsf?ln=images) repeat-x left top;
        font-weight: bold;
        border: 1px solid #dedede;
        margin-bottom: 2px;
        overflow: hidden;
        /*height:18px;*/
        font-size: 94%;
    }

    .switchUserTitleBar {
        height: 30px;
    }


    /* PANEL */
    .dynamicTitleBar, .staticTitleBar, .dynamicTitleBarRight {
        padding: .2em 5px;
        line-height: 2;
        background: #E7E7E7 url(/javax.faces.resource/bar-bg-grey2.gif.jsf?ln=images) repeat-x left top;
        font-weight: bold;
        border: 1px solid #dedede;
        margin-bottom: 2px;
        overflow: hidden;
        /*height:18px;*/
        font-size: 94%;
    }

    .staticTitleBar {
        background: #E7E7E7 url(/javax.faces.resource/bar-bg-grey2.gif.jsf?ln=images) repeat-x left top;
    }

    div.memPanel {
        clear: left;
    }

    div.memPanel div.dynamicTitleBar:hover, .dynamicTitleBarRight:hover {
        background: #BCBCBC url(/javax.faces.resource/bar-bg-grey3.gif.jsf?ln=images) repeat-x left top;

    }

    .panelLink {
        cursor: pointer;
        float: left;
        display: block;
        height: 100%;
        width: 100%;
        font-size: 105%;
    }

    .panelLink:hover {
        color: #666;
    }

    .panelLink img {
        border: none;
        vertical-align: middle;
        margin-top: -2px;
        margin-right: .5em;
    }

    .panelInfo {
        clear: right;
        float: right;
        text-align: right;
        position: relative;
    }

    .panelForceSize {
        clear: both;
        width: 100%
    }

    #changeLogin\:departmentSwitch_header {
        height: 25px;
        padding-left: 28px;
        position: relative;
    }

    #changeLogin\:departmentSwitch_header img {
        position: absolute;
        top: 8px;
        left: 5px;
    }


    .contentBox {
        border-left: 1px solid #dedede;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        margin-bottom: 2px;
        margin-top: -2px;
        padding: 5px;
        display: none;
        background-color: #F6F6F6;
    }


    /* active state */
    div.active div.dynamicTitleBar {
        background: #BCBCBC url(/javax.faces.resource/bar-bg-grey3.gif.jsf?ln=images) repeat-x left top;
    }

    div.active img.expandTitleBarImg {
        display: none;
    }

    div.active img.collapseTitleBarImg {
        display: inline;
    }

    div.active div.contentBox {
        display: block;
    }

    /* passive state */
    div.passive div.dynamicTitleBar {
        background: #E7E7E7 url(/javax.faces.resource/bar-bg-grey2.gif.jsf?ln=images) repeat-x left top;
    }

    div.passive div.contentBox {
        display: none;
    }

    div.passive img.collapseTitleBarImg {
        display: none;
    }

    div.passive img.expandTitleBarImg {
        display: inline;
    }

    /* the top panel */
    .departmentList {
        max-height: 150px;
        overflow: auto;
    }

    .deptBar {
        overflow: hidden;
    }

    .deptOption {
        color: #040404;
        background-color: #F6F6F6;
        cursor: pointer;
        margin-top: 2px;
    }

    .deptOption:hover {
        background-color: #D7D7D7;
    }

    .dynamicTitleBarRight {
        float: right;
        margin-left: 0;
        border-left: none;
    }

    /*
            General properties for jsHtmlDataTables
            */
    table.jsHtmlDataTable {
        background: #fAfAfA;
        color: #000;
        border: 1px solid #DDD;
        border-collapse: collapse;
        margin-bottom: 0;
        width: 100%;
    }

    table.jsHtmlDataTableExpanded {
        background: #f5f5f5;
        color: #919191;
        border: 1px solid #DDD;
        border-collapse: collapse;
        margin-bottom: 0;
        width: 100%;
    }

    table.jsHtmlDataTableInner {
        color: #000;
        background: #fff;
        border: 0 solid #888;
        border-collapse: collapse;
        margin-bottom: 2px;
        width: 100%;
    }

    table.jsHtmlDataTableOutter {
        border-collapse: collapse;
        padding: 1px;
        width: 769px;
    }

    table.jsHtmlDataTable tr, table.jsHtmlDatatableExpanded tr {
        width: 100%;
    }

    table.jsHtmlDataTable td, table.jsHtmlDataTableExpanded td {
        border-top: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        border-right: 0;
        border-left: 0;
        padding: 4px;
    }

    table.jsHtmlDataTableOutter td {
        border-top: 0;
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
        padding: 4px;
    }

    table.jsHtmlDataTable th, table.jsHtmlDataTableExpanded th, table.jsHtmlDataTableOutter th {
        border: 1px solid #DDD;
        padding: 4px;
        text-align: left;
    }

    table.jsHtmlDataTable th, table.jsHtmlDataTableExpanded th {
        color: #000;
        background: #eFeFeF;
    }

    table.jsHtmlDataTableInner td, table.jsHtmlDataTableInner th {
        border: 0 solid #888;
        padding: 2px;

    }

    table.jsHtmlDataTable input.err, table.jsHtmlDatatableExpanded input.err, table.jsHtmlDataTableInner input.err {
        background: #FFCCCC;
        border-color: #A80000;
    }

    table.jsHtmlDataTableInner th {
        color: #000;
        background: #f1f1f1;
        text-align: left;
    }

    .jsHtmlDataTable td.cellWithDateInput, .jsHtmlDataTableExpanded td.cellWithDateInput {
        white-space: nowrap;
    }

    .jsHtmlDataTable td.cellWithDateInput img.calendarImage, .jsHtmlDataTableExpanded td.cellWidthDateInput img.calendarImage {
        margin-bottom: -7px;
    }

    .jsHtmlDataTable td.cellWithDateInput input, .jsHtmlDataTableExpanded td.cellWithDateInput input {
        width: 70px;
    }


    .jsHtmlDataTable tr.titleRow, .jsHtmlDataTableExpanded tr.titleRow {
        text-align: left;
        font-size: 116%;
        color: #000;
        width: 100%;
    }

    .jsHtmlDataTableExpanded tr.expandedRow {
        color: #000;
        background: #fAfAfA;
        text-align: left;
        width: 100%;
        height: 40px;
    }

    .jsHtmlDataTableExpanded tr.expansionRow {
        color: #000;
        background: #fff;
        text-align: left;
        width: 100%;
    }

    .jsHtmlDataTable .sortable, .jsHtmlDataTableExpanded .sortable {
        text-decoration: underline;
        cursor: pointer;
    }

    .jsHtmlDataTable td.alternateRow {
        background: #fEfEfE;
    }

    .jsHtmlDataTable tr.alternateRow td {
        background: #fEfEfE;
    }

    .jsHtmlDataTable input.submitButton, .jsHtmlDataTable input.addNewImplantButton, .jsHtmlDataTableExpanded input.submitButton, .jsHtmlDataTableExpanded input.addNewImplantButton {
        float: right;
    }

    .jsHtmlDataTable input.cancelButton, .jsHtmlDataTableExpanded input.cancelButton, .jsHtmlDataTable input.closeButton, .jsHtmlDataTableExpanded input.closeButton {
        float: left;
    }

    .jsHtmlDataTable td.rowWithEditIcon {
        text-align: center;
    }

    .jsHtmlDataTable th.imageButtonRow {
        width: 20px;
    }

    .jsHtmlDataTable img.jsHtmlDataTableIcon {
        display: block;
        margin: 0 auto;
    }

    .jsHtmlDataTable img.sortDirectionImg {

        margin-top: .6em;
    }

    .sortable {
        padding-right: 2px;
        white-space: nowrap;
    }

    .sortable img {
        padding-left: 2px;
        text-decoration: none;
    }

    /* paging */
    .pagingArrows {
        vertical-align: text-bottom;
        width: 20px;
    }


    .pagingTable {
        width: 100%;
        color: #333;
    }

    .pagingTable select {
        width: 55px;
    }

    .pagingTable td.resultsPageCell {
        text-align: right;
        width: 30%
    }

    .pagingTable td.resultsPerPageCell {
        text-align: center;
    }

    .pagingTable td.howManyHitsCell {
        width: 30%
    }


    /* paging arrrows can be set inactive */
    .clickable.inactive {
        color: #999;
    }

    .clickable.inactive:hover {
        border: 1px solid transparent;
        background: transparent;
        cursor: default;
    }


    /*
            Properties for paging controls on lists
            */
    .pagingLeftDiv {
        float: left;
        width: 40%;
        text-align: left;
    }

    .pagingMiddleDiv {
        float: left;
        width: 25%;
        text-align: center;
    }

    .pagingRightDiv {
        float: right;
        text-align: right;
    }

    /* General page elements */
    .scrollModalPane {
        width: 100%;
        overflow: auto;
    }

    .printDiv {
        display: none;
    }

    .disabledEl {
        display: none;
    }

    .listButton {
        float: right;
    }

    .waitingButton { /*background:#666666 none repeat scroll 0 0;color:#000;font-size:96%;font-weight:bold;padding:1px 3px;*/
        margin: 0 0 0 10px;
        z-index: 1000;
    }


    /* Modal Panel Layout */
    .rich-mpnl-header {
        background: #AEAEAE url(/javax.faces.resource/modalPanel-bg.png.jsf?ln=images) repeat-x left top;
        padding: .6em 0 .6em 10px;
    }


    div.rich-mpnl-controls img {
        margin: .3em .3em .2em 0;
    }

    /* AUTOCOMPLETER */
    div.formElement div.autoCompleterWrapper {
        float: none;
        display: inline-block;
    }

    div.autoCompleterWrapper * {
        float: none !important;
    }

    tr.selectedEntry td div, table.suggestionsTable div:hover {
        background: #0000FF;
        color: #FFF;
        cursor: pointer;

    }

    .selectedEntry div:hover {
        text-decoration: none;
        color: #FFF;
    }


    table.suggestionsTable div {
        display: block;
        padding: 2px 0;
        text-decoration: none;
        text-indent: 4px;
        color: black;
        background: #FAFAFA;
        width: 100%;
    }

    table.suggestionsTable {
        border-top: 1px solid #999;
        width: 100%;
        border: 1px solid #DDD;
        border-collapse: collapse;
        background: #FEFEFE;
        margin-top: -2px;
        position: absolute;
        z-index: 99999;
    }


    table.suggestionsTable td {
        border-bottom: 1px solid #DDD;
    }


    /* CALENDAR POPUP */
    div#calendarWrap table {
        border: 1px solid #dedede;
        border-collapse: collapse;
        width: 155px;
    }

    div#calendarWrap table td {
        font-size: 100%;
        border: 1px solid #dedede;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: middle;

    }

    div#calendarWrap table.headerTable td {
        width: auto;


    }

    div#calendarWrap table.calTable td.cpOtherMonthDate {
        border-style: dotted;
        border-color: #eee;
        font-style: italic;

    }

    div#calendarWrap table.calTable td.cpOtherMonthDate a:link {
        color: #666;

    }

    div#calendarWrap a {
        display: block;
        width: 100%;
    }

    div#calendarWrap a:link {
        text-decoration: none;
    }

    div#calendarWrap table.calTable td.cpOtherMonthDate:hover, div#calendarWrap table.calTable td.cpCurrentMonthDate:hover {
        background: #efefef;
    }

    div#calendarWrap table.headerTable {
        width: 100%;
        border: 1px solid #dedede;
        background: #efefef;
        margin-bottom: 2px;
    }

    div#calendarWrap table.headerTable td {

        padding: 2px 2px;
        text-align: center;
        border: none;
    }


    div#calendarWrap input {
        margin: 0;
        padding-top: 3px;
        padding-left: 2px;
        width: 30px;
        border: 1px solid #dedede;
        background: #efefef;
    }

    div#calendarWrap select.cpYearNavigation {
        width: 60px;
    }

    span.disabled {
        color: #888888;
    }


    #AddNewLocationDiv {
        clear: both;
    }


    /* RULES FOR SPECIFIC PAGES */
    /* HOME */
    form#errorForm {
        display: none;
    }

    /* IMAGE UPLOAD */
    table#imageChooseTable {
        width: 100%;
    }

    table#imageChooseTable td {
        padding: 0 4px;
    }

    /* ADDON QUESTION */
    .addonCancelButton {
        float: right;
    }

    .closeAddonPanel {
        display: block;
        text-align: center;
        margin-top: 1.5em;
    }

    /* some text that should have the same format as a label (\3a is an escape sequence for :  */
    form#innerApplication\3A addOn div.formElement .pseudoLabel {

        width: 180px;

    }

    table#innerApplication\3A addOn\3A questiontype label {
        width: auto;
    }

    .addonQuestionText {
        font-style: italic;
        margin-bottom: 1em;
    }

    .addonPreviewTable {
        width: 100%;
    }

    /* IMPLANT MANAGEMENT */
    div.formElement label[for="joints"], div.formElement label[for="categories"] {
        height: auto;
        padding-top: 0;
    }

    div.formElement input.implantManagementButton {
        float: left;
        margin: -3px 0 0 20px;
        display: block;
    }

    th.companyName {
        width: 110px;
    }

    input.editCompanyName {
        width: 98%;
    }

    th.articleNumber {
        width: 110px;
    }

    input.editArticleNumber {
        width: 98%;
    }

    input.editArticleDescription {
        width: 98%;
    }

    th.articleDescription {
        width: 250px;
    }


    input#articleNumber {
        width: 100%;
        display: block;
        clear: right;
    }


    /* wrapper arround the whole implant search mask and the results table */
    #implantManagementWrapper {
        overflow: auto;
        height: 100%;
        width: 100%;
    }

    div#implantManagementWrapper div.memPanel {
        width: 610px;
    }

    table#implantResultsTable tr.headerRow th div.sortable {
        white-space: nowrap;
    }

    table#implantResultsTable .lotNumberInput {
        width: 140px;
    }


    /* the table that shows the implant search results */
    .jsHtmlDataTableWrapper {
        width: 100%;
    }

    /* registerdClinics is used to hide the title and the table if there are no registerd clinics */
    .registeredClinics {
        display: none;
    }

    .registeredClinics td, .registeredClinics th {
        padding: 4px 16px 4px 0;
    }

    .registeredClinics td {
        text-align: left;
    }

    .jsHtmlDataTable th.pin {
        width: 40px;
    }

    /* scannerUsersTable */
    .jsHtmlDataTable#scannerUsersTable td select.enabledDropdown {
        width: 60px;
    }


    .jsHtmlDataTable input.editPinInput {
        width: 30px;
    }

    /* form definition */
    .formDefinitionFormSelect {
        width: 430px;
    }

    .addonFormSelect {
        width: 430px;
    }

    /* manage form list */
    .highlightQuestion {
        border: 1px dashed red !important;
        min-height: 1em;
        background: #FEE;
    }

    .formlistTitlesAndInfoArea td {
        border: 1px solid white;
    }

    /* online stats */
    #statsFrame {
        border: none;
    }

    .onlineStatsFormSelect {
        width: 600px;
    }

    .sampleDropDown {
        width: 350px;
    }

    #innerApplication\:onlineStats\:questionSelectors table td {
        vertical-align: top;
    }

    #innerApplication\:onlineStats\:questionSelectors table td input {
        margin: 4px 4px 0 0;
    }


    /* remove richfaces font settings for modal panel */
    body table tr td.rich-mpnl-body {
        font-size: 100%;
    }

    div.formSelectSearch, select.formSelectSearch {
        width: 610px;
    }

    div.selectDownload, select.selectDownload {
        width: 400px;
    }

    div.questionSelectSubform {
        margin-top: 5px;
    }

    label.labelHidden {
        visibility: hidden;
    }

    .editImplantNotebookButton1, .closeImplantNotebook {
        float: right;
        margin: 2px;
        margin-top: 2px !important;
        border: 1px solid transparent;
    }

    #implantNotebookResultsTable {
        margin-top: 26px;
    }

    .notebook .rf-pp-cnt {
        background-color: rgb(0, 102, 153);
    }

    /** div element wrapping the jsHtmlDataTable and new case number option dialog elements */
    .caseNumberDialogWrapper {
        width: 800px;
        max-height: 450px;
        overflow: auto;
    }

    /** div elements that harbors a js html data table describing the form the user selected when the case number dialog was oepened */
    div.chosenFormDescriptionArea {
        margin-bottom: 2px;
    }

    /** int the case number dialog this css is used to tune the appearance of the case number that is used to add a form to case that is compatible */
    /*input.assignFormToCaseBtn{
            background: #CDCDCD url(/javax.faces.resource/assignFormToCase.gif.jsf?ln=images) no-repeat 4px 2px;
            padding:2px 5px 2px 24px;
            width : 150px;
            }
            */
    /** button that the user can click to add a form to a new case.*/
    input.createNewCaseBtn {
        background: #CDCDCD url(/javax.faces.resource/createNewCase.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    input.stayInThisCaseBtn {
        background: #CDCDCD url(/javax.faces.resource/ok.gif.jsf?ln=images) no-repeat 4px 2px;
        padding: 2px 5px 2px 24px;
    }

    /** reduce the size of the of the data table - because when too many cases and forms exist the data is diffcult to read*/
    .caseNumberDialogWrapper table.jsHtmlDataTable {
        font-size: 8.7pt;
    }

    /** in the cases number dialog, this is the image button used to display the explanation of the case numbers that are not compatible */
    #imgShowIncompatibleCasesList, #imgShowCompatibleCasesList {
        float: right;
    }

    /** pargrah that gives the option of assign a new a case number to the new form or formuser being edited*/
    #assingNewCaseNumberToFormuserMessage {
        /*border: 1px solid #DDD; */
        border-top: none;
        border-left: 1px solid #DDD;
        border-right: 1px solid #DDD;
        border-bottom: 1px solid #DDD;
        padding: 4px;
    }

    #assingNewCaseNumberToFormuserMessage:hover {
        background: aliceblue;
        cursor: pointer;
    }

    tbody.casegroup:hover, tbody.casegroupAlternate:hover {
        background: aliceblue;
    }

    /** only the tbody elements of compatible cases are clickable. incompatible cases are not clickable and should not have the cursor pointer*/
    tbody.casegroupCompatible:hover {
        cursor: pointer;
    }

    tbody.casegroup {
        /** same background color as  table.jsHtmlDataTable -only applied to all the rows in case group */
        background: #fAfAfA;
    }

    .jsHtmlDataTable tbody.casegroup tr.tableRow {

    }

    .jsHtmlDataTable tbody.casegroup tr.tableRow td {
        background: none;
    }

    .jsHtmlDataTable tbody.casegroup tr.alternateRow {

    }

    .jsHtmlDataTable tbody.casegroup tr.alternateRow td {
        background: none;
    }

    tbody.casegroupAlternate {
        /* some background color */
        background: #fEfEfE;
    }

    .jsHtmlDataTable tbody.casegroupAlternate tr.tableRow {

    }

    /*
            background color must controlled at cell level
            bacause of the css  ".jsHtmlDataTable tr.alternateRow td "
            which specifieds background color on cell level - and we do not want this default jsHtmlDatable css
            to be applied in the case groups table
            */
    .jsHtmlDataTable tbody.casegroupAlternate tr.tableRow td {
        background: none;
    }

    .jsHtmlDataTable tbody.casegroupAlternate tr.alternateRow {

    }

    .jsHtmlDataTable tbody.casegroupAlternate tr.alternateRow td {
        background: none;
    }

    /**
            css class set on the (...) string of the "Exclusion Reason" for a case number
            */
    .expandDetailedExplanation {
        padding-left: 2px;
        cursor: pointer;
        font-style: italic;
    }

    /**
            *    once the user cliks the (...) we want some text to become visible an change a little bit the look of the (...) button.
            *    we put it bold to make it clear that is is expanded.
            */
    .expandDetailedExplanation[visible='true'] {
        font-weight: bold;
    }

    /**
            * in case number dialog, if the user is seing the incompatible cases list, we want to set a fixed width to the column
            * "Exclusion Reason", because otherwise the table will look like it shifts if a user clicks to see the detailed explanation of an exclusion.
            * by setting a fixed width the columns should not shift regardless of the text quantity presented increasing.
            */
    th.formDataExclusionJustificationHeader {
        width: 237px;
    }

    /* see please BUG 919 :
            BreakLine of title text of questions in forms, in title text of groups, in
            title text of sections and title text of subforms are everywhere REPLASED <br/> with space:
            ex:
            QuestionRender.java lines 533 and 1931
            questionText = questionText.replaceAll("\\<br\\>", " ");

            or in group render GroupRender.java  line 71
            groupTitle = groupTitle.replaceAll("\\<br\\>", " ");

            etc..
            and because there are  a lot of already existing questions text which have
            in text "<br />" in forms, it is NOT recommended to disable these lines.

            To put in XML forms 'break line' it is not any more possible with <br /> !!
            From now it is possible only to put in XML forms
            <span class='breakline' ></span>

            in XML forms it would be

            &#60;span class='breakline' &#62;&#60;/span&#62;

            Stylesheet 'breakline' is defined in main.css as:
            .breakline{display:block;}

            */
    .breakline {
        display: block;
        padding-left: 18px;
    }

    /*
            >>>> Do not break line in "Online Statistics" -  onLineStats <<<<<
            */
    #innerApplication\:onlineStats .breakline {
        display: inherit;
        padding-left: inherit;
    }

    .comparisonCell {
        vertical-align: top;
    }

    .maxSpan {
        display: block;
        margin-left: -37px;
        margin-top: 4px;
    }
}

.rf-pp-cntr {
    border: 0 solid;
}

.rf-pp-hdr {
    background: #AEAEAE url(/javax.faces.resource/modalPanel-bg.png.jsf?ln=images);
}

.rf-pp-cnt-scrlr {
    background-color: white;
}

/* Style the list */
ul.tab, ul.tab2 {
    /*border: 1px solid #dedede;*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.tab li, ul.tab2 li {
    float: left;
    width: 384px;
}

/* Style the links inside the list items */
ul.tab li a, ul.tab2 li a {
    display: inline-block;
    text-decoration: none;
    transition: 0.3s;
    padding-top: 10px;
    padding-bottom: 10px;
}

ul.tab li.taboption, ul.tab2 li.taboption {
    background: none;
    padding-left: 0;
}

ul.tab li.tabactive, ul.tab2 li.tabactive {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

ul.tab li a.tabactive, ul.tab2 li a.tabactive {
    font-weight: bold;
    color: black;
    width: 100%
}

ul.tab li a.tabactive:link, ul.tab2 li a.tabactive:link, a.tabactive:hover {
}

ul.tab li a.tabactive:focus, ul.tab2 li a.tabactive:focus {
}

ul.tab li.tabnotactive, ul.tab2 li.tabnotactive {
    border-bottom: 1px solid #ccc;
}

ul.tab li a.tabnotactive, ul.tab2 li a.tabnotactive {
    font-weight: bold;
    color: #a5a5a5;
    width: 100%
}

ul.tab li a.tabnotactive:hover, ul.tab2 li a.tabnotactive:hover {
    font-weight: bold;
    background-color: #e6e6e6;
    color: black;
}

fieldset.visibleFieldset2 {
    padding: 10px 5px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-right: 1px;
}

.moduleLogoLargeLeft {
    float: left;
}

.moduleLogoLargeRight {
    float: right;
}

#error_page {
    margin: 0 auto;
    padding: 5px;
    max-width: 1000px;
    min-width: 600px;
}

.submitToReviewForm {
    background: #CDCDCD url(/javax.faces.resource/submitForm.gif.jsf?ln=images) no-repeat 4px 2px !important;
    padding: 2px 5px 2px 24px !important;
}

.maintenanceDiv {
    font-weight: bold;
    font-size: larger;
    background-color: #e70202;
    display: none;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.cookieConsentBlur {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

#promOperationFormSelect {
    width: 300px;
}
/**
#overlayWrapper {
    position: relative;
    align-content: center;
    height: 100%;
}

#mainOverlayDiv {
    width: 90%;
    height: 96%;
    position: absolute;
    top: 2%;
    left: 5%;
    z-index: 10;
    background-color: #9a9b9a;
    display: none;
}
**/