.hidden {
    display:none;
}

/* main menu icons */
ul#mainmenu li.node-users a {
    background: url('/cone.ugm.static/images/menu_users.png') top left no-repeat;
}
ul#mainmenu li.node-users a.current_page_item {
    background: url('/cone.ugm.static/images/menu_users_selected.png') top left no-repeat;
}
ul#mainmenu li.node-groups a {
    background: url('/cone.ugm.static/images/menu_groups.png') top left no-repeat;
}
ul#mainmenu li.node-groups a.current_page_item {
    background: url('/cone.ugm.static/images/menu_groups_selected.png') top left no-repeat;
}

/* columns */
div.columns {
    display: block;
    float: left;
    position: relative;
    width: 100%;
}
div.columns div.column {
    float:left;
    left:100%;
    position:relative;
    width:48%;
    float:left;
}
div.left_column {
    margin-left:-100%;
}
div.right_column {
    margin-left:-50%;
}

/* add button */
div.add_button {
    float:left;
}
div.add_button input {
    font-size:80%;
}

/* column filter */
div.column_filter {
    float:right;
}
div.column_filter input {
    color:#ccc;
    font-size:80%;
}

/* column batch */
div.column .batch {
    clear:both;
    padding-top:12px;
}
div.column .batch span {
    color:#ccc;
}
div.column .batch a {
    color:#49539f;
    text-decoration:none;
}
div.column .batch strong {
    font-weight:bold;
    font-size:110%;
    color:#333;
}

/* action icons */
a.action {
    line-height:16px;
    font-size:16px;
    padding-left:16px;
    text-decoration:none;
    float:right;
    margin-top:1px;
}
a.add_item {
    background:url('/cone.ugm.static/images/icon_add.png') 50% 50% no-repeat;
    cursor:pointer;
}
a.add_item_disabled {
    background:url('/cone.ugm.static/images/icon_add_disabled.png') 50% 50% no-repeat;
}
a.remove_item {
    background:url('/cone.ugm.static/images/icon_remove.png') 50% 50% no-repeat;
    cursor:pointer;
}
a.remove_item_disabled {
    background:url('/cone.ugm.static/images/icon_remove_disabled.png') 50% 50% no-repeat;
}
a.delete_item {
    background:url('/cone.ugm.static/images/icon_delete.png') 50% 50% no-repeat;
    cursor:pointer;
}
a.delete_item_disabled {
    background:url('/cone.ugm.static/images/icon_delete_disabled.png') 50% 50% no-repeat;
}

/* column listing */
div.columnsorting {
    margin-top:12px;
    width:100%;
}
div.columnsorting div {
    float:left;
}
div.columnsorting div.sort_col_1,
div.columnsorting div.sort_col_2,
div.columnsorting div.sort_col_3 {
    padding-right:5px;
}
div.columnsorting div.sortintro {
    color:#333;
    cursor:pointer;
    text-decoration:none;
    font-size:80%;
    padding-left:11px;
}
div.columnsorting a {
    color:#333;
    cursor:pointer;
    text-decoration:none;
    font-size:80%;
    font-weight:bold;
    padding-left:11px;
}
div.columnsorting a.asc {
    background: url('/cone.ugm.static/images/icon_asc.gif') 0 50% no-repeat;
}
div.columnsorting a.desc {
    background: url('/cone.ugm.static/images/icon_desc.gif') 0 50% no-repeat;
}
div.columnitems {
    clear:both;
    border-left:#ccc 1px solid;
    border-right:#ccc 1px solid;
    border-bottom:#ccc 1px solid;
    border-top:#ccc 1px solid;
    overflow-y:scroll;
}
div.left_column div.columnitems {
    height:570px;
}
div.columnitems ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
div.columnitems li {
    clear:both;
    border-top:#ccc 1px solid;
}
div.columnitems li.first_item {
    border-top: none;
}
div.columnitems li.hidden {
    display:none;
}
div.columnitems li.selected {
    color:#fff;
    background-color:#49539f !important;
}
div.columnitems li.selected div.head.li_trigger {
    color:#fff;
    background-color:#49539f !important;
}
div.columnitems div.head {
    float:left;
    width:88%;
    cursor:pointer;
}
div.columnitems div.head div {
    float:left;
    overflow:hidden;
    padding:4px;
}

/* col 1 -> normally id */
div.columnitems div.head div.sort_col_1 {
    width:30%;
}
/* col 2 -> normally title */
div.columnitems div.head div.sort_col_2 {
    width:65%;
}
/* XXX: calculate sort_col width in backend */
div.columnitems div.head div.sort_col_3 {
    width:0%;
}

div.columnitems div.actions {
    float:right;
    overflow:hidden;
    padding:4px;
}
div.right_column div.users {
    height:500px;
}
div.right_column div.groups {
    height:178px;
}

/* inout widget */
div.inoutwidget {
    clear:both;
    display:block;
    position:relative;
    width:100%;
}
div.inout_column_filter {
    font-family:Arial,Helvetica,sans-serif;
    margin-top:18px;
    position:relative;
    width:45%;
}
div.left_column_filter {
    float:left;
}
div.right_column_filter {
    float:right;
}
div.left_column_filter strong,
div.right_column_filter strong {
    color:#333;
    text-decoration:none;
    font-size:80%;
    padding-top:4px;
    padding-left:4px;
    float:left;
}
div.left_column_filter input,
div.right_column_filter input {
    color:#ccc;
    font-size:80%;
    margin-bottom:1em;
    float:right;
    width:50%;
}
div.inoutlisting {
    clear:both;
    margin-top:1em;
    display:block;
    position:relative;
    width:100%;
}
div.inoutlisting ul {
    margin:0;
    padding:0;
    list-style-type:none;
    height:300px;
    border-bottom:#ccc 1px solid;
    border-top:#ccc 1px solid;
    overflow-y:scroll;
}
div.inoutlisting ul.inoutleftlisting {
    width:45%;
    float:left;
    border-left:#ccc 1px solid;
    border-right:#ccc 1px solid;
}
div.inoutlisting ul.inoutrightlisting {
    width:45%;
    float:right;
    border-left:#ccc 1px solid;
    border-right:#ccc 1px solid;
}
div.inoutbuttons {
    width:9%;
    float:left;
}
div.inoutbuttons input {
    width:100%;
}
div.inoutlisting li {
    clear:both;
    border-top:#ccc 1px solid;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
div.inoutlisting li.first_item {
    border-top: none;
}
div.inoutlisting li.selected {
    color:#fff;
    background-color:#49539f !important;
}
div.inoutlisting div.head div {
    float:left;
    overflow:hidden;
    padding:4px;
}
div.inoutlisting div.actions {
    float:right;
    overflow:hidden;
    padding:4px;
}
div.inoutlisting div.actions a.hidden {
    display:none;
}
div.inoutlisting div.head div.sort_col_1 {
    width:80%;
}

/* forms */
div.help {
    font-weight:normal;
}
.tabpanes form .field {
    padding:6px;
}
div.right_column div.field {
    width:400px;
    clear:both;
    line-height: 1.75em;
}
div.right_column div.field label {
    float:left;
    font-size:80%;
}
div.right_column input {
    font-size:80%;
}
div.right_column div.field input {
    float:right;
}
div.right_column div.column_limit {
    float:right;
    margin-right:24px;
}
div.right_column div.column_limit label {
    display:inline;
    float:left;
    font-size:80%;
    line-height:1.5em;
}
div.right_column div.column_limit input {
    float:right;
    font-size:80%;
}
div.right_column div.field div {
    float:right;
    font-size:80%;
    width:160px;
}

.principal_form .box {
    background: none!important;
    border-top: 1px solid #eee;
}
.column.right_column {
    margin-top: 82px;
}
#form-groupform .error,
#form-userform .error {
    width:336px;
    text-align:left;
    font-size:100%;
    margin-bottom:0.2em;
}
#form-groupform .errormessage,
#form-userform .errormessage {
    line-height:1.2em;
    padding-left:0.2em;
    float:left;
}
#form-groupform input,
#form-userform input {
    width:330px;
}
#display-groupform-id,
#display-userform-id {
    margin-top: -0.2em;
}
#field-groupform-id div,
#field-userform-id div {
    width:330px;
}
#field-userform-portrait .errormessage {
    width:334px;
}
#image-preview-userform-portrait {
    border-radius:3px 3px 3px 3px;
    box-shadow:0px 0px 4px #666666;
    margin-left:26px;
    margin-top:4px;
    margin-bottom:6px;
    clear:both;
}
div.error img#image-preview-userform-portrait {
    margin-left:3px;
}
#input-userform-portrait {
    width:336px !important;
}
#radio-userform-portrait-keep,
#radio-userform-portrait-replace,
#radio-userform-portrait-delete {
    clear:both;
    width:340px;
    position:relative;
}
#radio-userform-portrait-keep input,
#radio-userform-portrait-replace input,
#radio-userform-portrait-delete input {
    float:left;
    position:relative;
    top:3px;
}
div.expiration-widget {
    font-size:90% !important;
    width:336px !important;
}
div.expiration-widget #input-userform-active {
    width:120px;
}
div.expiration-widget #checkbox-userform-active {
    width:20px;
    margin-left:0;
}
div.expiration-widget label {
    margin:7px 5px 0 10px;
    line-height:1em;
}
div.expiration-widget #checkbox-userform-active,
div.expiration-widget #input-userform-active {
    float:left;
}
div.expiration-widget .ui-datepicker-trigger {
    margin-top:2px;
    margin-left:3px;
}
#field-groupform-principal_roles,
#field-userform-principal_roles {
    text-align:right;
}
#field-groupform-principal_roles > label,
#field-userform-principal_roles > label {
    position: absolute;
}
#field-groupform-principal_roles div label,
#field-userform-principal_roles div label {
    margin-top: 1px!important;
}
#checkbox-groupform-principal_roles-wrapper,
#checkbox-userform-principal_roles-wrapper {
    margin-top:0;
    margin-bottom:0;
    width:340px;
    list-style:none;
    clear:none;
    float:right;
}
#checkbox-groupform-principal_roles-wrapper li,
#checkbox-userform-principal_roles-wrapper li {
    clear:both;
}
#checkbox-groupform-principal_roles-wrapper li input,
#checkbox-userform-principal_roles-wrapper li input {
    float:left !important;
    width:16px;
}
#input-groupform-save,
#input-userform-save {
    margin-top:1em;
}
#input-groupform-save,
#input-groupform-cancel,
#input-userform-save,
#input-userform-cancel {
    width:100px !important;
}
#form-ldap_users_settings table,
#form-ldap_groups_settings table,
#form-ldap_roles_settings table {
    width:auto;
}
#form-ldap_users_settings .array table {
    width:340px;
    border:none;
}
#form-ldap_users_settings .array thead tr:first-child {
    text-align:left;
}
#form-ldap_users_settings .array table th {
    background-color:transparent;
    font-weight:normal;
}
#form-ldap_users_settings .array table tr {
    border:none;
}