/* 
    user permissions 
*/
.user-permissions
{
    position: relative;
}
/*
    user permissions user tree
        .user                       - the containing div for a user item
            .user-name              - a span for the name of the user item (clickable)
            .groups                 - the containg div for groups associated with the user item
                .group              - a div for the group item
                    .group-name     - a span for the group name 
*/
.user-permissions .users
{
    padding: 1em;
}
.user-permissions .users .user { }
.user-permissions .users .user .user-name
{
    cursor: pointer;
    font-weight: bold;
}
.user-permissions .users .user .user-name.hover
{
    color: #369;
}
.user-permissions .users .user .groups
{
    display: none;
    margin-left: 1em;
}
.user-permissions .users .user .groups.show
{
    display: block;
}
.user-permissions .users .user .groups .group-name { }
.user-permissions .users .user .groups .group-name.hover
{
    color: #369;
}
/*
    user-permissions add user form
        label                   -label for username/group
        input                   -input for username/group
        intput[type=button]     -add user button
*/
.user-permissions .add-user
{
    background : #dedede;
    margin: 1em;
    padding: 1em;
}
.user-permissions .add-user label
{
    font-weight: bold;
    display: inline-block;
    padding-right: 0.5em;
    padding-left: 2em;
}
.user-permissions .add-user input[type=button]
{
    margin-left: 1em;
}
/*
    user-permissions modal
        .title   -modal title
        .body    -modal body
*/
.user-permissions .modal
{
    position: absolute;
    width: auto;
    display: none;
}
.user-permissions .modal.show
{
    display : block;
}
.user-permissions .modal .title { }
.user-permissions .modal .body { }
/*
    user-permissions group-menu
        div(s)   -each div is a menu item (hoverable & clickable)
*/
.user-permissions .group-menu
{
    position: absolute;
    margin: 0em 0 0 1em;
    background: #dedede;
    border: 1px solid #ccc;
    padding : 1em;
}
.user-permissions .group-menu div
{
    padding: 0 0.5em 0 0.5em;
    cursor: pointer;
}
.user-permissions .group-menu div.hover
{
    background: #666;
    color: #fff;
}