/* Example tokeninput style #2: Facebook style */
ul.token-input-list-facebook {
    background-color: #fff;
    border: 1px solid #8496ba;
    cursor: text;
    font-family: Verdana;
    height: auto !important; 
    height: 1%;
    margin: 0;
    max-height: 100px; /*added for add users*/
    /*max-width: 400px;*/
    min-height: 1px;
    /*overflow: hidden; */
    overflow-y: auto; /*added for add users*/
    overflow-x: hidden;/*added for add users*/
    padding: 0;
    padding-bottom: 5px;
    width: 400px;
    z-index: 999;
}

ul.token-input-list-facebook {
    list-style-type: none;
}

ul.token-input-list-facebook li input {
    background-color: rgb(255, 255, 255);
    border: 0;
    margin: 5px 0 -5px 0;
    min-width: 3em;
    padding: 3px 4px;
}

.token-input-token-facebook {
    font-size: 11px;
    float: left;
    height: auto !important; 
    /*height: 1%;*/
    padding : 5px 0px 0px 5px;
    overflow: hidden; 
    white-space: nowrap;
}

.wrapper {
    background-color: rgb(240, 243, 247);
    border: 1px solid rgb(204, 213, 240);
    border-right: 1px solid rgb(204, 213, 240);
    border-radius: 5px;
    padding : 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.invalid-token {
    background-color: rgb(247, 216, 210);
    border-color: rgb(219, 59, 31);
    color: rgb(219, 59, 31);
    cursor:pointer;
}

.invalid-token-disabled-user {
    background-color: rgb(247, 216, 210);
    border-color: rgb(219, 59, 31);
    color: rgb(219, 59, 31);
    cursor:pointer;
}

.token-input-name-facebook, .token-input-delete-facebook {
    margin : 0;
    padding : 0;
    white-space : nowrap;
}

.token-input-delete-facebook {
    color : rgb(186, 186, 186);
    cursor : pointer;
    font-weight : bold;
    padding-left: 5px;
    /* 
    [KLUDGE : gjcourt]
    this style below should get applied iff
    using a non-ie browser
    */
    padding-right : 5px;
}

.token-input-selected-token-facebook {
    background-color: rgb(86, 111, 166);
    border: 1px solid rgb(60, 89, 153);
    color: #fff;
}

.token-input-input-token-facebook {
    float: left;
    width: inherit;
}

.token-input-input-token-facebook input[type="text"] {
    width: inherit;
}

div.token-input-dropdown-facebook {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border-left: 1px solid rgb(204, 204, 204);
    border-right: 1px solid rgb(204, 204, 204);
    border-bottom: 1px solid rgb(204, 204, 204);
    cursor: default;
    font-size: 11px;
    font-family: Verdana;
    overflow: hidden;
    width: 380px;
    z-index: 1;
}

div.token-input-dropdown-facebook-wide 
    {
    width: 524px;
    }

div.token-input-dropdown-facebook p {
    margin: 0;
    padding: 5px;
    font-weight: bold;
    color: #777;
}

div.token-input-dropdown-facebook ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown-facebook ul li {
    background-color: #fff;
    padding: 3px;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook {
    background-color: #fff;
}

div.token-input-dropdown-facebook ul li em {
    font-weight: bold;
    font-style: none;
}

div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
    background-color: #3b5998;
    color: #fff;
}
/* If a token has an ellipsis, we show the full text on hover, so change the cursor to a 
pointer to indicate an on hover action */
.shortened-option {
    cursor:pointer;
}