/*****************************************/
/** Essential to use UserInteraction.js **/
/*****************************************/
/******** Paulo Papoy Szczerbenko ********/
/*********** paulosz@gmail.com ***********/
/*****************************************/


.clear
{
    clear: both;
}

.userInteractionBackground
{
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1 !important;
    background-color: black;
    filter: alpha(opacity=75); /* internet explorer */
    -khtml-opacity: 0.75; /* khtml, old safari */
    -moz-opacity: 0.75; /* mozilla, netscape */
    opacity: 0.75; /* fx, safari, opera */
}


.userInteraction
{
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 13px;
    position: relative;
    width: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -260px;
    z-index: 2 !important;
    background-color: #FFF;
    padding: 38px 10px 10px 10px;
}

    .userInteraction div.userInteractionTitle
    {
        left: 0px;
        right: 0px;
        top: 0px;
        height: 27px;
        position: absolute;
        background-color: #007f93;
    }

        .userInteraction div.userInteractionTitle h2
        {
            color: #FFF;
            font-size: 14px;
            margin: 5px 0px 0px 10px;
        }

    .userInteraction a.close
    {
        background: url("Images/UserInteration/close.gif");
        position: absolute;
        width: 28px;
        height: 28px;
        top: -10px;
        right: -14px;
        cursor: pointer;
    }


    .userInteraction div.container
    {
        display: block;
    }

        .userInteraction div.container.full
        {
            width: 500px;
            clear: both;
        }

        .userInteraction div.container.half
        {
            width: 240px;
            margin-top: 10px;
            float: left;
        }

        .userInteraction div.container span
        {
            float: left;
            padding-left: 22px;
            margin: 3px 0px 8px 15px;
            font-weight: bold;
            color: #333;
            clear: both;
            display: inline-block;
        }

            .userInteraction div.container span.message
            {
                background: url("Images/UserInteration/message.gif") no-repeat scroll left center;
            }

            .userInteraction div.container span.photo
            {
                background: url("Images/UserInteration/photo.gif") no-repeat scroll left center;
            }

            .userInteraction div.container span.audio
            {
                background: url("Images/UserInteration/audio.gif") no-repeat scroll left center;
            }

            .userInteraction div.container span.messageCharacters
            {
                float: left;
                clear: right;
                margin: 5px 0px 8px 10px;
                font-weight: normal;
                color: #CCC;
                font-size: 11px;
                padding-left: 0px;
            }

        .userInteraction div.container div.border
        {
            border: 1px solid #D6D6D6;
            float: left;
            width: 100%;
            position: relative;
        }

        .userInteraction div.container div.arrow
        {
            position: absolute;
            background: url("Images/UserInteration/selected.gif") no-repeat scroll center center;
            width: 11px;
            height: 7px;
            top: -7px;
            left: 15px;
        }

        .userInteraction div.container textarea
        {
            width: 100%;
            border-width: 0px;
            overflow: hidden;
            outline: 0;
            background-color: transparent;
            resize: none;
            min-height: 70px;
            overflow-y: auto;
            padding-top: 2px;
        }


    .userInteraction div.loading
    {
        max-width: 16px;
        height: 16px;
        float: right;
        position: absolute;
        background: url("Images/UserInteration/loader.gif") no-repeat scroll right center;
        right: 4px;
        top: 4px;
        padding-right: 20px;
    }

        .userInteraction div.loading span
        {
            float: right;
            color: #999;
            font-size: 10px;
            margin-top: 2px;
        }

    /* BOTOES */
    .userInteraction div.actionsContainer
    {
        margin-top: 4px;
        padding-top: 10px;
        width: 500px;
        height: 30px;
        clear: both;

    }

        .userInteraction div.actionsContainer input
        {
            float: right;
            background-color: #007f93;
            border-color: #29447E;
            color: White;
            float: right;
            font-size: 15px;
            font-weight: bold;
            height: 30px;
            margin: 0px 6px 0 0;
            width: 100px;
        }