/* -------------------------------------------- */
/* Zwei Framework: CMS */
/* Version: 9 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: SITE */
/* Class/ID Scope: .zwei-ui* / #zwei_* */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !Reset-styles (NOT SCOPED!) */
/* !-------------------------------------------- */

/* A sane, non-nerve-wracking box sizing for everyone. Thanks @paul_irish and @thijs */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

html {
height: 100%;
font-family: "Helvetica", "Arial", sans-serif;
font-size: small;
text-decoration: none;
}

body {
color: #000;
height: 100%;
}

body, h1, h2, h3, h4, p {
margin: 0;
padding: 0;
}

ul, ol, li, dl, dt, dd {
list-style: none;
margin: 0;
padding: 0;
}

fieldset {
border: none;
margin: 0;
padding: 0;
}

pre {
font-family: inherit;
margin: 0;
padding: 0;
white-space: normal;
}

/* !-------------------------------------------- */
/* !LAYOUT: General */
/* !-------------------------------------------- */

body.zwei-ui {
background: #565656 url("./img/carbon_fibre.png") 0 0 repeat;
overflow: hidden;
}

#zwei_nav {
left: 10px;
position: absolute;
top: 10px;
z-index: 80;
}

#zwei_content {
height: 100%;
padding-bottom: 10px;
padding-top: 80px;
position: relative;
z-index: 50;
transition: left 0.3s ease, margin 0.3s ease;
}

/* !-------------------------------------------- */
/* !LAYOUT: Content area */
/* !-------------------------------------------- */

#zwei_content .content-head {
background: #333;
height: 60px;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 50;
transition: left 0.3s ease;
}

#zwei_content .content-head:after {
background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
content: "";
display: block;
height: 10px;
position: relative;
top: 10px;
width: 100%;
z-index: 50;
}

#zwei_nav.menu-pinned ~ #zwei_content {
margin-left: 265px;
transition: margin 0.3s ease;
}

#zwei_nav.menu-pinned ~ #zwei_content .content-head {
left: 122px;
transition: left 0.3s ease;
}

/* --- Content of global header bar */
#zwei_content .content-head h1 {
color: #aaa;
font-size: 20px;
padding: 10px 0 0 0;
text-shadow: 0 1px 0 #000;
}

#zwei_content .content-head h2 {
color: #fcbc00;
font-size: 14px;
text-shadow: 0 1px 0 #000;
}

#zwei_content .content-head .content-controller {
position: absolute;
right: 10px;
top: 10px;
transition: right 0.3s ease;
}

#zwei_nav.menu-pinned ~ #zwei_content .content-head .content-controller {
right: 132px;
transition: right 0.3s ease;
}

/* --- Content body */
#zwei_content .content-body {
color: #aaa;
height: 100%;
opacity: 1;
padding: 0 10px 0 10px;
transition: opacity 0.5s ease;
}

/* !-------------------------------------------- */
/* !LAYOUT: Overlay panes in content area */
/* !-------------------------------------------- */

/* --- Position the overlay as a sliding panel */
#zwei_content .content-overlay {
    background: #333;
    border: 2px solid #444;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow:  0 2px 25px rgba(0, 0, 0, 1);
    color: #fff;
    left: 50px;
    position: absolute;
    right: 50px;
    top: -100%;
    bottom: 100%;
    z-index: 49; /* keep it right under the global header (which has 50) */
    transition: top 0.5s ease, bottom 0.5s ease;
}

#zwei_content.enables-overlay .content-overlay {
    top: 60px;
    bottom: 100px;
    transition: top 0.3s ease, bottom 0.3s ease;
}

/* Block and dim the content-body when the overlay is active */
#zwei_content.enables-overlay .content-body {
opacity: 0.3;
transition: opacity 0.3s ease;
}

#zwei_content.enables-overlay .content-body:before {
background: transparent;
content: "";
display: block;
height: 100%;
position: absolute;
width: 100%;
z-index: 40;
}

/* --- Subdivide the overlay */
#zwei_content .content-overlay .overlay-header {
background: #565656 url("./img/crossed_stripes.png") 0 0 repeat;
border-bottom: 1px solid #000;
height: 60px;
left: 0;
padding: 10px;
position: absolute;
top: 0;
width: 100%;
}

#zwei_content .content-overlay .overlay-header:after {
    content: "";
    display: block;
    clear: both;
}

#zwei_content .content-overlay .overlay-header h3 {
    float: left;
    line-height: 38px;
}

#zwei_content .content-overlay .overlay-header .zwei-ui-chooser {
    float: right;
}

#zwei_content .content-overlay .overlay-body {
bottom: 55px;
left: 0;
overflow: auto;
padding: 10px;
position: absolute;
top: 60px;
width: 100%;
}

#zwei_content .content-overlay .overlay-footer {
background: #565656 url("./img/crossed_stripes.png") 0 0 repeat;
border-radius: 0 0 8px 8px;
border-top: 1px solid #000;
bottom: 0;
height: 55px;
left: 0;
padding: 10px;
position: absolute;
width: 100%;
}

/* --- Handle the close button */
#zwei_content .content-overlay .overlay-footer .action {
line-height: 30px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Links & Actions */
/* !Only used in this design & size for "outmost" controls */
/* !Dedicated views (e.g. ListView, EditView) get their own variant */
/* !-------------------------------------------- */

/* Standard action buttons, without visible text */
.zwei-ui .action {
background: #3b3b3b url("./img/action_button_sprite.png") 1px 0 no-repeat;
border-bottom: 1px solid #444;
border-left: 1px solid #000;
border-right: 1px solid #444;
border-top: 1px solid #000;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
font-weight: bold;
height: 40px;
overflow: hidden;
padding: 0; /* resetting default styles for <button> */
text-decoration: none;
text-indent: -1000em;
width: 40px;
transition: color .3s ease;
}

.zwei-ui .action:visited {
color: #fff;
transition: color .3s ease;
}

.zwei-ui .action:hover {
color: #fcbc00;
transition: color .3s ease;
}


/* Same actions buttons, but with text visible */
.zwei-ui .action-text {
background: none;
border: none;
height: 100%;
text-indent: 0;
width: 100%;
}

.zwei-ui .action-text:before {
background: #3b3b3b url("./img/action_button_sprite.png") 1px 0 no-repeat;
border-bottom: 1px solid #444;
border-left: 1px solid #000;
border-right: 1px solid #444;
border-top: 1px solid #000;
border-radius: 4px;
content: "";
display: inline-block;
float: left;
height: 40px;
margin-right: 10px;
width: 40px;
}


/* Actions with pure text, no icons */
.zwei-ui .action-option {
background: none;
border: none;
font-size: 14px;
height: 100%;
padding: 0 5px 0 5px;
text-indent: 0;
width: 100%;
}

/* PRELIMINARY TREATMENT: Idle actions */
.zwei-ui .action-idle {
opacity: 0.5;
}

/* Icon assignments */
/* ICON: Landing plane */
.zwei-ui .action-download,
.zwei-ui .action-download:before {
background-position: 1px 0;
}
.zwei-ui .action-download:hover,
.zwei-ui .action-download:hover:before {
background-position: -50px 0;
}

/* ICON: Trashcan */
.zwei-ui .action-delete,
.zwei-ui .action-delete:before {
background-position: 0 -48px;
}
.zwei-ui .action-delete:hover,
.zwei-ui .action-delete:hover:before {
background-position: -51px -48px;
}

/* ICON: Escalator */
.zwei-ui .action-login,
.zwei-ui .action-login:before {
background-position: 1px -98px;
}
.zwei-ui .action-login:hover,
.zwei-ui .action-login:hover:before {
background-position: -51px -98px;
}

/* ICON: Exit */
.zwei-ui .action-logout,
.zwei-ui .action-logout:before, 
.zwei-ui .action-dismiss,
.zwei-ui .action-dismiss:before {
background-position: 1px -147px;
}
.zwei-ui .action-logout:hover,
.zwei-ui .action-logout:hover:before, 
.zwei-ui .action-dismiss:hover,
.zwei-ui .action-dismiss:hover:before {
background-position: -51px -147px;
}

/* ICON: Zwei logo */
.zwei-ui .action-zwei,
.zwei-ui .action-zwei:before {
background-position: 1px -196px;
}
.zwei-ui .action-zwei:hover,
.zwei-ui .action-zwei:hover:before {
background-position: 1px -196px;
}

/* ICON: Sharing */
.zwei-ui .static-link .action-entity,
.zwei-ui .static-link .action-entity:before {
background-position: 1px -245px;
}
.zwei-ui .static-link .action-entity:hover,
.zwei-ui .static-link .action-entity:hover:before {
background-position: 1px -245px;
}

/* ICON: RSS */
.zwei-ui .static-post .action-entity,
.zwei-ui .static-post .action-entity:before {
background-position: 0px -295px;
}
.zwei-ui .static-post .action-entity:hover,
.zwei-ui .static-post .action-entity:hover:before {
background-position: 0px -295px;
}

/* ICON: File */
.zwei-ui .static-binary .action-entity,
.zwei-ui .static-binary .action-entity:before {
background-position: 0px -343px;
}
.zwei-ui .static-binary .action-entity:hover,
.zwei-ui .static-binary .action-entity:hover:before {
background-position: 0px -343px;
}

/* ICON: Textbox */
.zwei-ui .static-text .action-entity,
.zwei-ui .static-text .action-entity:before {
background-position: 1px -391px;
}
.zwei-ui .static-text .action-entity:hover,
.zwei-ui .static-text .action-entity:hover:before {
background-position: 1px -391px;
}

/* ICON: Tools */
.zwei-ui .action-user,
.zwei-ui .action-user:before {
background-position: 0 -441px;
}
.zwei-ui .action-user:hover,
.zwei-ui .action-user:hover:before {
background-position: 0 -441px;
}

/* ICON: Images */
.zwei-ui .static-image .action-entity,
.zwei-ui .static-image .action-entity:before {
background-position: 1px -490px;
}
.zwei-ui .static-image .action-entity:hover,
.zwei-ui .static-image .action-entity:hover:before {
background-position: 1px -490px;
}

/* ICON: Suitcase */
.zwei-ui .action-entity,
.zwei-ui .action-entity:before {
background-position: 0 -538px;
}
.zwei-ui .action-entity:hover,
.zwei-ui .action-entity:hover:before {
background-position: 0 -538px;
}

/* ICON: Elevator */
.zwei-ui .action-home,
.zwei-ui .action-home:before {
background-position: 0 -588px;
}
.zwei-ui .action-home:hover,
.zwei-ui .action-home:hover:before {
background-position: 0 -588px;
}

/* ICON: Talking people */
.zwei-ui .static-area .action-entity,
.zwei-ui .static-area .action-entity:before {
background-position: 0 -636px;
}
.zwei-ui .static-area .action-entity:hover,
.zwei-ui .static-area .action-entity:hover:before {
background-position: 0 -636px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Inner Links & Actions */
/* !For dedicated views (e.g. ListView, EditView) */
/* !-------------------------------------------- */

/* Standard action buttons, without visible text */
.zwei-ui .zwei-ui-view .action {
background: #3b3b3b url("./img/action_button_inside_sprite.png") -2px -2px no-repeat;
color: #c3c5a5;
font-size: 13px;
height: 30px;
width: 30px;
transition: color .3s ease, background-color .3s ease;
}

.zwei-ui .zwei-ui-view .action:hover {
background-color: #000;
color: #fff;
transition: color .3s ease, background-color .3s ease;
}

/* Same actions buttons, but with text visible */
.zwei-ui .zwei-ui-view .action-text {
background: none;
height: 100%;
width: 100%;
}

.zwei-ui .zwei-ui-view .action-text:hover {
background: none;
}

.zwei-ui .zwei-ui-view .action-text:before {
background: #3b3b3b url("./img/action_button_inside_sprite.png") -2px -2px no-repeat;
height: 30px;
width: 30px;
}

.zwei-ui .zwei-ui-view .action-text:hover:before {
background-color: #000;
}

/* Actions with pure text, no icons */
.zwei-ui .zwei-ui-view .action-option {
font-size: 13px;
height: 100%;
width: 100%;
}

/* ICON: Checkmark */
.zwei-ui .zwei-ui-view .action-text.action-save:before, 
.zwei-ui .zwei-ui-view .action-save {
background-position: -2px -2px;
}
.zwei-ui .zwei-ui-view .action-text.action-save:hover:before, 
.zwei-ui .zwei-ui-view .action-save:hover {
background-position: -54px -2px;
}

/* ICON: Plus */
.zwei-ui .zwei-ui-view .action-text.action-create:before, 
.zwei-ui .zwei-ui-view .action-create {
background-position: -2px -51px;
}
.zwei-ui .zwei-ui-view .action-text.action-create:hover:before, 
.zwei-ui .zwei-ui-view .action-create:hover {
background-position: -54px -51px;
}

/* ICON: Minus */
.zwei-ui .zwei-ui-view .action-text.action-remove:before, 
.zwei-ui .zwei-ui-view .action-remove {
background-position: -2px -100px;
}
.zwei-ui .zwei-ui-view .action-text.action-remove:hover:before, 
.zwei-ui .zwei-ui-view .action-remove:hover {
background-position: -54px -100px;
}

/* ICON: Cross */
/* will be interfered with when the button has .action-protected */
.zwei-ui .zwei-ui-view .action-text.action-delete:before, 
.zwei-ui .zwei-ui-view .action-delete {
background-position: -2px -149px;
}
.zwei-ui .zwei-ui-view .action-text.action-delete:hover:before, 
.zwei-ui .zwei-ui-view .action-delete:hover {
background-position: -54px -149px;
}

/* ICON: Arrow up-down
DEPRECATED: was for drag-and-drop reordering of ListView rows  */
.zwei-ui .zwei-ui-view .action-text.action-dragger:before, 
.zwei-ui .zwei-ui-view .action-dragger {
background-position: -2px -199px;
}
.zwei-ui .zwei-ui-view .action-text.action-dragger:hover:before, 
.zwei-ui .zwei-ui-view .action-dragger:hover {
background-position: -54px -199px;
}
 
/* ICON: Double square parentheses */
.zwei-ui .zwei-ui-view .action-text.action-copy:before, 
.zwei-ui .zwei-ui-view .action-copy {
background-position: -2px -246px;
}
.zwei-ui .zwei-ui-view .action-text.action-copy:hover:before, 
.zwei-ui .zwei-ui-view .action-copy:hover {
background-position: -54px -246px;
}

/* ICON: Expanded */
.zwei-ui .zwei-ui-view.listview-small .action-text.action-visor:before, 
.zwei-ui .zwei-ui-view.listview-small .action-visor {
background-position: -2px -345px;
}
.zwei-ui .zwei-ui-view.listview-small .action-text.action-visor:hover:before, 
.zwei-ui .zwei-ui-view.listview-small .action-visor:hover {
background-position: -54px -296px;
}

/* ICON: Collapsed */
.zwei-ui .zwei-ui-view.listview-medium .action-text.action-visor:before, 
.zwei-ui .zwei-ui-view.listview-medium .action-visor {
background-position: -2px -296px;
}
.zwei-ui .zwei-ui-view.listview-medium .action-text.action-visor:hover:before, 
.zwei-ui .zwei-ui-view.listview-medium .action-visor:hover {
background-position: -54px -345px;
}

/* ICON: Private to Public */
.zwei-ui .zwei-ui-view .action-text.action-makepublic:before, 
.zwei-ui .zwei-ui-view .action-makepublic {
background-position: -2px -393px;
}
.zwei-ui .zwei-ui-view .action-text.action-makepublic:hover:before, 
.zwei-ui .zwei-ui-view .action-makepublic:hover {
background-position: -54px -393px;
}

/* ICON: Public to Private */
.zwei-ui .zwei-ui-view .action-text.action-makeprivate:before, 
.zwei-ui .zwei-ui-view .action-makeprivate {
background-position: -2px -443px;
}
.zwei-ui .zwei-ui-view .action-text.action-makeprivate:hover:before, 
.zwei-ui .zwei-ui-view .action-makeprivate:hover {
background-position: -54px -443px;
}

/* ICON: Eye */
.zwei-ui .zwei-ui-view .action-text.action-view:before, 
.zwei-ui .zwei-ui-view .action-view {
background-position: -2px -493px;
}
.zwei-ui .zwei-ui-view .action-text.action-view:hover:before, 
.zwei-ui .zwei-ui-view .action-view:hover {
background-position: -54px -493px;
}

/* ICON: Pencil */
.zwei-ui .zwei-ui-view .action-text.action-edit:before, 
.zwei-ui .zwei-ui-view .action-edit {
background-position: -2px -542px;
}
.zwei-ui .zwei-ui-view .action-text.action-edit:hover:before, 
.zwei-ui .zwei-ui-view .action-edit:hover {
background-position: -55px -542px;
}

/* ICON: Door */
.zwei-ui .zwei-ui-view .action-text.action-close:before, 
.zwei-ui .zwei-ui-view .action-close {
background-position: -2px -590px;
}
.zwei-ui .zwei-ui-view .action-text.action-close:hover:before, 
.zwei-ui .zwei-ui-view .action-close:hover {
background-position: -54px -590px;
}


/* !-------------------------------------------- */
/* !COMPONENT: Small inline actions */
/* !Only used in this design & size for "outmost" controls */
/* !Dedicated views (e.g. ListView, EditView) get their own variant */
/* !-------------------------------------------- */

.zwei-ui .inline-action {
color: #666;
display: block;
min-height: 20px;
position: relative;
text-decoration: none;
width: 100%;
}

.zwei-ui .inline-action:hover, 
.zwei-ui .inline-action:visited {
color: inherit;
}

.zwei-ui .inline-action:after {
background: #fff url("./img/inlineaction_button_sprite.png") 0 0 no-repeat;
border-radius: 4px;
content: "";
display: block;
height: 20px;
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
width: 40px;
transition: background-color 0.3s ease;
}

.zwei-ui .inline-action:hover:after {
background-color: #fcbc00;
transition: background-color 0.3s ease;
}

.zwei-ui .inline-action-visor:after {
/* !!! to do */ 
}

.zwei-ui .menu-collapsed .inline-action-visor:after {
background-color: #fcbc00;
background-position: -51px 0;
transition: background-color 0.3s ease;
}

/* !-------------------------------------------- */
/* !COMPONENT: Small inline actions */
/* !For dedicated views (e.g. ListView, EditView) */
/* !-------------------------------------------- */

.zwei-ui .zwei-ui-view .inline-action {
color: #c3c5a5;
min-height: 15px;
padding-left: 40px;
transition: color .3s ease;
}

.zwei-ui .zwei-ui-view .inline-action:hover { 
color: #fff;
transition: color .3s ease;
}

.zwei-ui .zwei-ui-view .inline-action:after {
display: none;
}

.zwei-ui .zwei-ui-view .inline-action:before {
background: #3b3b3b url("./img/inlineaction_button_inside_sprite.png") 0 0 no-repeat;
border-radius: 4px;
content: "";
display: block;
height: 15px;
left: 0;
position: absolute;
top: 0;
width: 30px;
transition: background-color 0.3s ease;
}

.zwei-ui .zwei-ui-view .inline-action:hover:before {
background-color: #000;
transition: background-color 0.3s ease;
}

/* ICON: Arrow right */
.zwei-ui .zwei-ui-view .inline-action-edit:before, 
.zwei-ui .zwei-ui-view .inline-action-view:before {
background-position: 0 -344px;
}
.zwei-ui .zwei-ui-view .inline-action-edit:hover:before, 
.zwei-ui .zwei-ui-view .inline-action-view:hover:before {
background-position: -53px -344px;
}

/* ICON: Sort unordered */
.zwei-ui .zwei-ui-view .inline-action-sort:before {
background-position: 0 -99px;
}
.zwei-ui .zwei-ui-view .inline-action-sort:hover:before {
background-position: -52px 0;
}

/* ICON: Sort ascending */
.zwei-ui .zwei-ui-view .sorted-ascending .inline-action-sort:before {
background-position: -52px 0;
}
.zwei-ui .zwei-ui-view .sorted-ascending .inline-action-sort:hover:before {
background-position: -52px -49px;
}

/* ICON: Sort descending */
.zwei-ui .zwei-ui-view .sorted-descending .inline-action-sort:before {
background-position: -52px -49px;
}
.zwei-ui .zwei-ui-view .sorted-descending .inline-action-sort:hover:before {
background-position: -52px 0;
}

/* ICON: Collapsed */
.zwei-ui .zwei-ui-view .listview-toolbox .col-filtered .inline-action-visor:before, 
.zwei-ui .zwei-ui-view .attribute-expanded .inline-action-visor:before, 
.zwei-ui .zwei-ui-view .bridge-expanded .inline-action-visor:before {
background-position: 0 -196px;
}
.zwei-ui .zwei-ui-view .listview-toolbox .zwei-ui-flyout:hover .inline-action-visor:before, 
.zwei-ui .zwei-ui-view .listview-toolbox .inline-action-visor:hover:before, 
.zwei-ui .zwei-ui-view .attribute-expanded .inline-action-visor:hover:before, 
.zwei-ui .zwei-ui-view .bridge-expanded .inline-action-visor:hover:before {
background-position: -52px -148px;
}

/* ICON: Expanded */
.zwei-ui .zwei-ui-view .listview-toolbox .inline-action-visor:before, 
.zwei-ui .zwei-ui-view .attribute-collapsed .inline-action-visor:before, 
.zwei-ui .zwei-ui-view .bridge-collapsed .inline-action-visor:before {
background-position: 0 -148px;
}
.zwei-ui .zwei-ui-view .listview-toolbox .col-filtered .zwei-ui-flyout:hover .inline-action-visor:before, 
.zwei-ui .zwei-ui-view .listview-toolbox .col-filtered .inline-action-visor:hover:before, 
.zwei-ui .zwei-ui-view .attribute-collapsed .inline-action-visor:hover:before, 
.zwei-ui .zwei-ui-view .bridge-collapsed .inline-action-visor:hover:before {
background-position: -52px -196px;
}

/* ICON: Arrow up */
.zwei-ui .zwei-ui-view .inline-action-increment:before {
background-position: 0 -245px;
}
.zwei-ui .zwei-ui-view .inline-action-increment:hover:before {
background-position: -52px -245px;
}

/* ICON: Arrow down */
.zwei-ui .zwei-ui-view .inline-action-decrement:before {
background-position: 0 -296px;
}
.zwei-ui .zwei-ui-view .inline-action-decrement:hover:before {
background-position: -52px -296px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Protected actions */
/* !So far only used for delete actions */
/* !-------------------------------------------- */

.zwei-ui .action-protected {
opacity: 0.6;
position: relative;
transition: opacity 0.3s ease;
}

/* Disable the usual hover effect if it's still protected */
.zwei-ui .action-delete.action-protected:hover {
background-position: -2px -149px;
opacity: 1;
transition: opacity 0.3s ease;
}

/* Draw a lock drawer */
/* We use :after here because :before is already used for .action.action-text */
.zwei-ui .action-protected:after {
content: "";
background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.7) 25%, rgba(255, 255, 255, 0.7) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.7) 75%);
background-size: 10px 10px;
border: 1px solid transparent;
border-radius: 4px;
height: 26px;
left: 0;
position: absolute;
top: 0;
width: 26px;
transition: top 0.3s ease, border 0.3s ease;
}

/* For some reason, buttons with .action-text are slightly bigger */
.zwei-ui .action-text.action-protected:after {
height: 29px;
width: 29px;
}

.zwei-ui .action-protected:hover:after {
border: 1px solid #fcbc00;
border-right: 1px solid #fcbc00;
border-bottom: 1px solid #fcbc00;
transition: border 0.3s ease;
}

/* Enable the usual hover effect again if the protection has been unlocked */
.zwei-ui .action-delete.action-protected.protection-unlocked:hover {
background-position: -54px -149px;
}

.zwei-ui .action-protected.protection-unlocked {
opacity: 1;
}

/* Slide the lock drawer downwards */
.zwei-ui .action-protected.protection-unlocked:hover:after {
top: 100%;
transition: top 0.5s ease;
}

/* !-------------------------------------------- */
/* !COMPONENT: Icons */
/* !-------------------------------------------- */

.zwei-ui .icon {
background: transparent url("./img/icon_sprite.png") 0 0 no-repeat;
display: inline-block;
height: 25px;
text-indent: -1000em;
width: 30px;
}

.zwei-ui .icon.state-private {
background-position: 0 -5px;
}

.zwei-ui .icon.state-public {
background-position: 0 -55px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Zwei Hausmeister menu */
/* !-------------------------------------------- */

/* --- Box pinning */
#zwei_nav {
background: #565656 url("./img/white_carbonfiber.png") 0 0 repeat;
border-right: 1px solid #999;
border-bottom: 1px solid #000;
border-radius: 0 0 8px 0;
box-shadow:  2px 2px 5px rgba(0, 0, 0, 1);
height: auto;
left: -250px;
max-height: 98%;
overflow: visible; /* Safari doesn't like this on "auto" (cuts off the <h1>) although it works in Chrome and Firefox */
padding: 60px 10px 10px 10px;
top: 0;
width: auto;
width: 250px; /* !!! auto-scaling doesn't work for now */
transition: left 0.3s ease;
}

#zwei_nav:active, 
#zwei_nav:hover, 
#zwei_nav.menu-pinned {
left: 0;
overflow: auto;
transition: left 0.3s ease;
}

#zwei_nav.menu-pinned {
box-shadow:  2px 2px 25px rgba(0, 0, 0, 1);
animation: pin 0.1s linear;
}

@keyframes pin {
0% { transform: translate(0, 0); }
50% { transform: translate(2px, 2px); }
100% { transform: translate(0, 0); }
}


/* --- Menu headline */
#zwei_nav h1 {
background: rgba(200, 200, 200, 0.9);
height: 60px;
left: 0;
padding: 10px 0 0 10px;
position: fixed;
top: 0;
width: 250px;
z-index: 100; /* above scrolling menu options */
transition: background 0.3s ease;
}

#zwei_nav h1 .action {
color: #000;
}

#zwei_nav:not(.menu-pinned) h1 {
background: none;
transition: background 0.3s ease;
}

#zwei_nav:not(.menu-pinned) h1 .action {
color: #999;
}

#zwei_nav h1:active:after,
#zwei_nav h1:hover:after,
#zwei_nav.menu-pinned h1:after {
background: linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
content: "";
display: block;
height: 7px;
margin-left: -10px;
padding-left: 10px;
position: relative;
width: 100%;
z-index: 100;
}

/* --- Global menu button */
.zwei-ui .action-zwei {
line-height: 40px;
}

#zwei_nav h1 a {
color: #000;
}

.zwei-ui .action-zwei:before {
background-color: #666;
border-bottom: 1px solid #999;
border-left: 1px solid #aaa;
border-right: 1px solid #999;
border-top: 1px solid #aaa;
}

#zwei_nav:active .action-zwei:before, 
#zwei_nav:hover .action-zwei:before, 
#zwei_nav.menu-pinned .action-zwei:before, 
.zwei-ui .action-zwei:active:before, 
.zwei-ui .action-zwei:hover:before {
background-color: #ccc;
border-bottom: 1px solid #999;
border-left: 1px solid #fff;
border-right: 1px solid #999;
border-top: 1px solid #fff;
}


/* --- Menu components */
#zwei_nav .menu-component {
margin: 15px 0 10px 0;
}

#zwei_nav h2 {
border-bottom: 1px solid #aaa;
color: #888;
font-size: 16px;
letter-spacing: 1px;
margin: 0 -10px 10px -10px;
padding: 5px 10px 5px 10px;
text-shadow: 0 1px 0 #eee, 0 -1px 0 #000;
}

#zwei_nav .menu-component.menu-collapsed h2 {
background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.5) 75%);
background-size: 30px 30px;
border: none;
}

#zwei_nav .menu-component :not(.zwei-ui-chooser) li {
padding: 5px 0 5px 0;
}

#zwei_nav .menu-component:not(.component-global) :not(.zwei-ui-chooser) li {
margin: 0 -10px 0 -10px;
padding: 5px 60px 5px 10px; /* right: make room for 4-digit counter */
position: relative;
}

#zwei_nav .menu-component :not(.zwei-ui-chooser) li.active {
background-color: rgba(255, 255, 255, 0.3);
}

#zwei_nav .menu-component .action {
color: #666;
line-height: 40px;
text-overflow: ellipsis;
white-space: nowrap;
}

#zwei_nav .menu-component .action-option {
line-height: inherit;
}

#zwei_nav .menu-component .action:active, 
#zwei_nav .menu-component .action:hover, 
#zwei_nav .menu-component li.active .action {
color: #000;
}

#zwei_nav .menu-component li.active .action:before {
background-color: #fcbc00;
}

#zwei_nav .menu-component .zwei-ui-counter {
margin-top: -9px;
position: absolute;
right: 10px;
top: 50%;
}

/* --- Menu component: Framework version */
#zwei_nav .component-version {
font-size: 10px;
margin-bottom: 0;
}


/* !-------------------------------------------- */
/* !LAYOUT: Content Field lists */
/* !-------------------------------------------- */

.zwei-ui-fieldset > ul {
margin: 0 auto 0 auto;
}

.zwei-ui-fieldset > ul li {
margin: 10px 0 10px 0;
text-align: left;
}

/* !-------------------------------------------- */
/* !COMPONENT: Chooser elements */
/* !-------------------------------------------- */

/* --- Generic chooser */
.zwei-ui-chooser {
border: 1px solid #eee;
border-radius: 4px;
}

.zwei-ui-chooser li {
line-height: 25px;
}

.zwei-ui-chooser .action {
border-radius: 0;
border-top: 1px solid #eee;
}

.zwei-ui-chooser li:first-child .action {
border-top: none;
}

.zwei-ui-chooser .active .action {
background-color: #fcbc00;
}

/* --- Variant: Horizontal chooser */
/* This could be declared in a more generic way. But we leave it at that for the moment. */

.content-controller .zwei-ui-chooser {
border-color: #999;
}

.content-controller .zwei-ui-chooser:after {
clear: both;
content: "";
display: block;
}

.content-controller .zwei-ui-chooser li {
float: left;
line-height: 38px;
}

.content-controller .zwei-ui-chooser .action {
border-left: 1px solid #eee;
border-top: none;
padding: 0 10px 0 10px;
}

.content-controller .zwei-ui-chooser li:first-child .action {
border-left: none;
border-radius: 4px 0 0 4px;
}

.content-controller .zwei-ui-chooser li:last-child .action {
border-radius: 0 4px 4px 0;
}

.content-controller .zwei-ui-chooser .active .action {
background-color: #000;
}

/* !-------------------------------------------- */
/* !COMPONENT: Flyout menu */
/* !-------------------------------------------- */

.zwei-ui-flyout {
position: relative;
}

/* --- Flyout trigger button*/
/* Icon handling is done within general .inline-action handling */
.zwei-ui-flyout:hover .inline-action-visor {
color: #fff;
transition: color .3s ease;
position: relative;
}

/* Invisible box to enable mouse-down movement w/o collapsing the :hover */
.zwei-ui-flyout:hover .inline-action-visor:after {
background: none;
bottom: -15px;
content: "";
display: block;
height: 15px;
left: -10px;
position: absolute;
right: auto;
top: auto;
width: 100%;
}

/* --- Layout for menu option container */
.zwei-ui-flyout .zwei-ui-chooser {
border: 2px solid #555;
box-shadow: 0 0 20px rgba(0, 0, 0, 1);
display: none;
left: -10px;
margin-top: 10px;
max-width: 250%;
min-width: 100%;
position: absolute;
top: 100%;
z-index: 10;
}

.zwei-ui-flyout.flyout-rightmost .zwei-ui-chooser {
left: auto;
right: -10px;
}

.zwei-ui-flyout .zwei-ui-chooser.chooser-filter {
max-height: 400px;
overflow: auto;
}

.zwei-ui-flyout:hover .zwei-ui-chooser {
display: block;
}

/* --- Menu options */
.zwei-ui-flyout .zwei-ui-chooser li {
position: relative;
}

.zwei-ui-flyout .zwei-ui-chooser .active .action {
background-color: #000;
}

.zwei-ui-flyout .zwei-ui-chooser .action {
background-image: none;
border-top: 2px solid #555;
line-height: 40px;
padding-right: 50px; /* make room for a counter box */
text-overflow: ellipsis;
white-space: nowrap;
}

.zwei-ui-flyout .zwei-ui-chooser li:first-child .action {
border-radius: 4px 4px 0 0;
}

.zwei-ui-flyout .zwei-ui-chooser li:last-child .action {
border-radius: 0 0 4px 4px;
}

.zwei-ui-flyout .zwei-ui-chooser .zwei-ui-counter {
margin-top: -9px;
position: absolute;
right: 10px;
top: 50%;
}

/* !-------------------------------------------- */
/* !COMPONENT: Counters */
/* !-------------------------------------------- */

.zwei-ui-counter {
background: #888;
border-radius: 9px;
color: #fff;
display: inline-block;
font-weight: bold;
font-size: 12px;
height: 18px;
line-height: 18px;
min-width: 24px;
padding: 0 8px 0 8px;
text-align: center;    
}

.zwei-ui-counter.counter-zero {
background: #333;
color: #666;
}

#zwei_nav .zwei-ui-counter.counter-zero {
background: #bbb;
color: #fff;
}

/* !-------------------------------------------- */
/* !COMPONENT: Embedded drop zone for drag-and-drop file uploads */
/* !-------------------------------------------- */

/* --- Set up the dropzone, disable standard styling for the small alternative text link */
.zwei-ui-input-dropzone {
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #444;
border-left: 1px solid #000;
border-right: 1px solid #444;
border-top: 1px solid #000;
border-radius: 8px;
padding: 10px;
position: relative;
text-align: center;
transition: box-shadow 0.5s ease;
}

.zwei-ui .zwei-ui-input-dropzone .inline-action-upload:before {
display: none;
}

.zwei-ui .zwei-ui-input-dropzone .inline-action-upload {
margin-top: 5px;
padding-left: 0;
}

/* Handle the dragStart event to indicate the drop will start the upload */
.zwei-ui-input-dropzone:hover,
.zwei-ui-input-dropzone.ready-to-receive {
box-shadow: inset 1px 1px 5px #fbcc00, inset -1px -1px 5px #fbcc00;
}

/* Display progress bar while the upload is underway */
.zwei-ui-input-dropzone.handles-upload:hover, 
.zwei-ui-input-dropzone.handles-upload {
box-shadow: none;
}

.zwei-ui-input-dropzone.handles-upload .dropzone-progress {
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, #fff 25%, #fff 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, #fff 75%);
background-size: 30px 30px;
border: 1px solid #fff;
left: 5%;
top: 10%;
bottom: 10%;
position: absolute;
right: 50%; /* dynamic property: Animate from 95% (start of upload) to 5% (end of upload) */
width: auto;
}

/* !-------------------------------------------- */
/* !LAYOUT: Authentication dialog */
/* !-------------------------------------------- */

#zwei_content.content-role-authentication {
text-align: center;
}

#zwei_content.content-role-authentication .zwei-ui-fieldset {
display: inline-block;
margin-left: 50px;
}

#zwei_content.content-role-authentication input {
background: #3b3b3b;
border-bottom: 1px solid #444;
border-left: 1px solid #000;
border-right: 1px solid #444;
border-top: 1px solid #000;
border-radius: 4px;
color: #fff;
display: inline-block;
font-size: 16px;
height: 40px;
margin: 0 auto 0 auto;
min-width: 15em;
padding: 5px;
vertical-align: top; /* needed to align w/ button on Firefox & IE10 */
}

#zwei_content.content-role-authentication.failed input {
animation: wiggle .1s 8 linear;
}

@keyframes wiggle {
0% { -ms-transform: translate(0, 0); }
50% { -ms-transform: translate(5px, 0); }
75% { -ms-transform: translate(0, 0); }
100% { -ms-transform: translate(-5px, 0); }
}

#zwei_content.content-role-authentication button {
display: inline-block;
margin-left: 10px;
}

/* !-------------------------------------------- */
/* !LAYOUT: Generic administration stuff */
/* !-------------------------------------------- */

#zwei_content.content-role-generic {
    
}

/* !-------------------------------------------- */
/* !LAYOUT: Pure entity list */
/* !-------------------------------------------- */

#zwei_content.content-role-list {
overflow: auto;
}

/* !-------------------------------------------- */
/* !LAYOUT: Combined entity list & edit */
/* !-------------------------------------------- */

/* --- Set up 2 columns for listView and editView */
#zwei_content.content-role-listedit .zwei-ui-listview {
float: left;
height: 100%;
overflow: auto;
width: 50%;
transition: width 0.3s ease;
}

#zwei_content.content-role-listedit .zwei-ui-editview {
background: #565656 url("./img/crossed_stripes.png") 0 0 repeat;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
float: left;
height: 100%;
position: relative;
width: 50%;
transition: width 0.3s ease;
}

#zwei_content.content-role-listedit .zwei-ui-listview.listview-small {
width: 25%;
transition: width 0.3s ease;
}

#zwei_content.content-role-listedit .zwei-ui-listview.listview-small + .zwei-ui-editview {
width: 75%;
transition: width 0.3s ease;
}

/* --- Set up the editView with only the attributes list scrollable */
/* Could be done more elegantly with FlexBox */
#zwei_content.content-role-listedit .editview-header {
left: 0;
position: absolute;
top: 0;
width: 100%
}

#zwei_content.content-role-listedit .editview-attributes {
bottom: 60px;
left: 0;
overflow: auto;
position: absolute;
top: 90px;
width: 100%
}

#zwei_content.content-role-listedit .editview-footer {
bottom: 0;
left: 0;
position: absolute;
width: 100%
}

/* !-------------------------------------------- */
/* !LAYOUT: Entity matrix */
/* !-------------------------------------------- */

#zwei_content.content-role-matrix {
overflow: auto;
}

/* --- We want to control how many nodes per row we show, depending on the surrounding layout */
/* 6 cells per row */
#zwei_content.content-role-matrix .zwei-ui-matrixview .zwei-ui-matrixnode {
    margin: 0 15px 15px 0;
    width: calc((100% / 6) - (5 * 15px / 6) - 0.2px);
}

#zwei_content.content-role-matrix .zwei-ui-matrixview .zwei-ui-matrixnode:nth-child(6n) {
    margin-right: 0;
}

/* !-------------------------------------------- */
/* !LAYOUT: Entity matrix within an overlay dialog */
/* !-------------------------------------------- */

/* --- Adjust the matrix nodes' size */
/* 6 cells per row */
#zwei_content .zwei-ui-matrixview.overlay-body .zwei-ui-matrixnode {
    margin: 0 15px 15px 0;
    width: calc((100% / 6) - (5 * 15px / 6) - 0.2px);
}

#zwei_content .zwei-ui-matrixview.overlay-body .zwei-ui-matrixnode:nth-child(6n) {
    margin-right: 0;
}

/* !-------------------------------------------- */
/* !LAYOUT: Combined entity matrix & edit */
/* !-------------------------------------------- */

/* --- Set up 2 columns for listView and editView */
#zwei_content.content-role-matrixedit .zwei-ui-matrixview {
float: left;
height: 100%;
overflow: auto;
width: 50%;
padding-right: 15px;
padding-top: 15px;
}

/* --- Adjust the matrix nodes' size */
/* 3 cells per row */
#zwei_content.content-role-matrixedit .zwei-ui-matrixview .zwei-ui-matrixnode {
    margin: 0 15px 15px 0;
    width: calc((100% / 3) - (2 * 15px / 3) - 0.2px);
}

#zwei_content.content-role-matrixedit .zwei-ui-matrixview .zwei-ui-matrixnode:nth-child(3n) {
    margin-right: 0;
}

#zwei_content.content-role-matrixedit .zwei-ui-editview {
background: #565656 url("./img/crossed_stripes.png") 0 0 repeat;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
float: left;
height: 100%;
position: relative;
width: 50%;
}

/* --- Set up the editView with only the attributes list scrollable */
/* Could be done more elegantly with FlexBox */
#zwei_content.content-role-matrixedit .editview-header {
left: 0;
position: absolute;
top: 0;
width: 100%
}

#zwei_content.content-role-matrixedit .editview-attributes {
bottom: 60px;
left: 0;
overflow: auto;
position: absolute;
top: 90px;
width: 100%
}

#zwei_content.content-role-matrixedit .editview-footer {
bottom: 0;
left: 0;
position: absolute;
width: 100%
}

/* !-------------------------------------------- */
/* !COMPONENT: ListView table */
/* !-------------------------------------------- */

.zwei-ui-listview {
width: 100%;
}

.zwei-ui-listview > table {
width: 100%;
}

.zwei-ui-listview th, 
.zwei-ui-listview td {
border-bottom: 1px solid #555;
padding: 10px 5px 10px 5px;
vertical-align: top;
}

.zwei-ui-listview tbody tr:last-child th, 
.zwei-ui-listview tbody tr:last-child td {
border-bottom: none;
}

.zwei-ui-listview .list-attribute {
padding: 10px;
}

.zwei-ui-listview tbody th, 
.zwei-ui-listview tbody td {
border-top: 1px solid #000;
}

/* --- Column widths */
/*
.zwei-ui-listview table .list-attribute-main {
width: 20%;
}
*/

/* --- Dragged rows */
.zwei-ui-listview .entity-dragged {
background: #000; 
}

/* --- Column headers */
.zwei-ui-listview thead th {
text-align: left;
}

.zwei-ui-listview thead .listview-toolbox th {
border-bottom: none;
border-top: 1px solid #000;
padding-bottom: 0;
}

.zwei-ui-listview thead.listview-toolbox + tbody th, 
.zwei-ui-listview thead.listview-toolbox + tbody td {
border-top: none;
}

/* Make the collapser/expander go away when we are not showing an edit view */
#zwei_content.content-role-list thead .action-visor {
display: none;
}

/* --- Hide some columns dependending on listview's width mode */
.zwei-ui-listview table .list-attribute, 
.zwei-ui-listview table .list-action {
display: none;
}
.zwei-ui-listview.listview-wide table .list-attribute, 
.zwei-ui-listview.listview-wide table .list-action, 
.zwei-ui-listview.listview-medium table .list-attribute:not(.listview-wide), 
.zwei-ui-listview.listview-medium table .list-action {
display: table-cell;
}

.zwei-ui-listview table .listview-wide {
display: none;
}
.zwei-ui-listview.listview-wide table .listview-wide {
display: table-cell;
}

/* --- Sorting actions & states */
/* Also handles general filter state indicators */
.zwei-ui-listview thead .list-control .inline-action {
padding-left: 0;
text-indent: -1000em;
}

.zwei-ui-listview .col-sorted {
border-bottom-width: 5px;
color: #fff;
}

.zwei-ui-listview .col-sorted .inline-action-sort {
color: #fff;
}

.zwei-ui-listview .col-filtered {
background-color: rgba(0,0,0,0.2);
border-left: 1px solid rgba(0,0,0,0.4);
border-right: 1px solid rgba(0,0,0,0.4);
}

.zwei-ui-listview thead tr:first-child .col-filtered {
border-radius: 4px 4px 0 0;
border-top: 1px solid rgba(0,0,0,0.4);
}

.zwei-ui-listview tbody tr:last-child .col-filtered {
border-radius: 0 0 4px 4px;
border-bottom: 1px solid rgba(0,0,0,0.4);
}

/* --- ID & state columns */
.zwei-ui-listview .list-control .inline-action {
    padding-left: 0;
    text-indent: -1000em;
}

.zwei-ui-listview tbody .list-control {
    text-align: left;
    padding-top: 16px; 
}

.zwei-ui-listview .list-state {
border-right: 1px solid #555;  
}

.zwei-ui-listview .list-state + td {
border-left: 1px solid #000;  
}

/* --- Attribute columns */
.zwei-ui-listview .list-attribute-main {
font-weight: bold;
}

/* Incomplete 80% solution: Limit some cell content's height */
.zwei-ui-listview .list-attribute-main .inline-action, 
.zwei-ui-listview td > pre {
max-height: 3.5em;
overflow: auto;
}

/* --- Action columns */
.zwei-ui-listview .list-action {
border-left: 1px solid #555;  
}

/* --- SVG images within table cells */
.zwei-ui-listview img.zwei-img-svg {
max-height: 100px;
max-width: 50px;  
}

/* --- Row for edited entity */
.zwei-ui-listview .entity-edited th, 
.zwei-ui-listview .entity-edited td {
background: #565656 url("./img/crossed_stripes.png") 0 0 repeat;
color: #fff;
}

.zwei-ui-listview .entity-edited th.list-control, 
.zwei-ui-listview .entity-edited .list-attribute-main .inline-action {
    color: #fcbc00;
}

/* I'm very, very sorry for using non-semantic elements for this... */
.zwei-ui-listview .list-dummy {
display: none;
}

#zwei_content.content-role-listedit .zwei-ui-listview .list-dummy {
border: none;
display: table-cell;
width: 30px;
}

/* !-------------------------------------------- */
/* !COMPONENT: MatrixView */
/* !-------------------------------------------- */

.zwei-ui-matrixview {
width: 100%;
}

/* margin + width are set above, depending on the surrounding layout */
.zwei-ui-matrixview .zwei-ui-matrixnode {
background: rgba(0,0,0,0.3);
border: 1px solid #000;
border-radius: 4px;
float: left;
height: 145px;
overflow: hidden;
padding: 10px 10px 30px 10px;
position: relative;
text-align: center;
}

.zwei-ui-matrixview .zwei-ui-matrixnode:hover {
    cursor: pointer;
}

.zwei-ui-matrixview .zwei-ui-matrixnode:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.zwei-ui-matrixview .zwei-ui-matrixnode.entity-edited, 
.zwei-ui-matrixview .zwei-ui-matrixnode.entity-selected {
    background: #565656 url("./img/crossed_stripes.png") 0 0 repeat;
    border: 3px solid #fcbc00;
    box-shadow: 0 0 15px rgba(252, 188, 0,1);
}

/* --- Content of a matrix node */
/* The actual image */
.zwei-ui-matrixview .zwei-ui-matrixnode img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    opacity: 1;
    transform: translateY(-50%) translateX(-50%);
    transition: opacity 0.3s ease;
}

.zwei-ui-matrixview .zwei-ui-matrixnode:hover img {
opacity: 0.3;
transition: opacity 0.3s ease;
}

/* Slide-in panel with image attributes */
.zwei-ui-matrixview .zwei-ui-matrixnode .matrixnode-attributes {
    background: rgba(0,0,0,0.3);
    left: 0;
    text-align: left;
    top: 0;
    padding: 5px 10px 5px 45px;
    position: absolute;
    width: 100%;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zwei-ui-matrixview .zwei-ui-matrixnode:hover .matrixnode-attributes {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.zwei-ui-matrixview .zwei-ui-matrixnode .matrixnode-attributes dt, 
.zwei-ui-matrixview .zwei-ui-matrixnode .matrixnode-attributes dd {
    display: inline;
    color: #fff;
}

.zwei-ui-matrixview .zwei-ui-matrixnode .matrixnode-attributes dd:before {
    content: " - ";
}

/* Entity state indicator */
.zwei-ui-matrixview .zwei-ui-matrixnode:before {
background-color: rgba(0,0,0,0.7);
border-radius: 4px 0 4px 0;
content: "";
display: block;
height: 35px;
left: 0;
position: absolute;
top: 0;
width: 40px;
z-index: 10;
}

.zwei-ui-matrixview .zwei-ui-matrixnode .state {
left: 5px;
opacity: 1;
position: absolute;
top: 5px;
z-index: 10;
transition: opacity 0.3s ease;
}

/* Select image for active entity */
.zwei-ui-matrixview .zwei-ui-matrixnode .inline-action {
bottom: 5px;
left: 5px;
overflow: hidden;
position: absolute;
right: 5px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 15;
}

/* !-------------------------------------------- */
/* !COMPONENT: EditView / Headers */
/* !-------------------------------------------- */

/* --- Header information */
.zwei-ui-editview .editview-header {
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #000;
padding: 10px 5px 5px 5px;
}

.zwei-ui-editview .editview-header em {
    font-style: normal;
    font-weight: bold;
}

.zwei-ui-editview .editview-header dl {
float: left;
width: 25%;
}

.zwei-ui-editview .editview-header dt {
border-bottom: 1px solid #555;
color: #fff;
padding-bottom: 5px;
}

.zwei-ui-editview .editview-header dd {
border-top: 1px solid #000;
padding: 5px 0 5px 0;
text-overflow: ellipsis;
white-space: nowrap; /* doesn't work yet */
width: 100%;
}

.zwei-ui-editview .editview-header dd + dd {
border-top: none;
padding-top: 0;
}

/* Header: State switchers */
.zwei-ui-editview .editview-header .header-state dd {
display: none;
padding-top: 5px;
}

.zwei-ui-editview.entity-state-private .editview-header .state-private, 
.zwei-ui-editview.entity-state-public .editview-header .state-public {
display: block;
}


/* !-------------------------------------------- */
/* !COMPONENT: EditView / Attributes */
/* !-------------------------------------------- */

.zwei-ui-editview .editview-attributes {
}

/* --- Basic layout */
.zwei-ui-editview .attribute, 
.zwei-ui-editview .bridge-object {
border-bottom: 1px solid #555;
padding: 10px 5px 10px 5px;
position: relative;
}

.zwei-ui-editview .attribute:after, 
.zwei-ui-editview .bridge-object:after {
clear: left;
content: "";
display: block;
}

.zwei-ui-editview .editview-attributes .field-label, 
.zwei-ui-editview .editview-attributes .object-controller {
float: left;
width: 33%;
}

.zwei-ui-editview .editview-attributes .value-container {
float: left;
width: 67%;
}

/* --- Form elements, default state */
.zwei-ui-editview .editview-attributes input, 
.zwei-ui-editview .editview-attributes textarea, 
.zwei-ui-editview .editview-attributes select {
margin: 0;
width: 100%;
}

.zwei-ui-editview .editview-attributes textarea {
height: 3em;
transition: height 0.2s ease;
}

/* Let the height be set by the jQuery plugin textext.js */
.zwei-ui-editview .editview-attributes .text-core textarea {
height: auto;
transition: none;
}

.zwei-ui-editview .editview-attributes textarea:focus {
height: 8em;
transition: height 0.2s ease;
}

/* Exclude the dynamic height changing when using the jQuery plugin textext.js */
.zwei-ui-editview .editview-attributes .text-core textarea:focus {
height: inherit;
transition: none;
}

.zwei-ui-editview .editview-attributes input[type="radio"], 
.zwei-ui-editview .editview-attributes input[type="radio"] + label, 
.zwei-ui-editview .editview-attributes input[type="checkbox"], 
.zwei-ui-editview .editview-attributes input[type="checkbox"] + label {
display: inline-block;
float: left;
margin: 5px 0 5px 0;
width: auto;
}

.zwei-ui-editview .editview-attributes input[type="radio"], 
.zwei-ui-editview .editview-attributes input[type="checkbox"] {
clear: left; 
margin-right: 10px;
}

/* --- Mandatory and key attribute fields */
.zwei-ui-editview .attribute-mandatory .value-container {
position: relative;
}

.zwei-ui-editview .attribute-mandatory .value-container:before {
background: #fcbc00;
content: "";
display: block;
height: 100%;
left: -10px;
position: absolute;
top: 0;
width: 2px;
}

.zwei-ui-editview .attribute-main .field-label {
color: #fff;
}

/* --- 1:1 relations via dropdown choosers */
.zwei-ui-editview .attribute-relation .value-field {
min-height: 30px; /* make room for a adjacent button */
padding-left: 40px;
position: relative;
}

.zwei-ui-editview .attribute-relation.relation-undefined .value-field {
padding-left: 0;
}

.zwei-ui-editview .attribute-relation .value-field .action-view {
position: absolute;
left: 0;
top: 0;
}

.zwei-ui-editview .attribute-relation.relation-undefined .value-field .action-view {
display: none;
}

/* ---- 1:1 relations to the generic image entity kind */
.zwei-ui-editview .attribute-relation.relation-image .value-field {
min-height: 100px; /* make room for 3 adjacent buttons */
}

.zwei-ui-editview .attribute-relation.relation-image.attribute-mandatory .value-field {
min-height: 60px; /* only two buttons needed */
}

.zwei-ui-editview .attribute-relation.relation-image.relation-undefined .value-field {
min-height: 30px; /* only one button needed */
padding-left: 40px;
}

/* --- Attributes for 1:1 related images */
.zwei-ui-editview .attribute-relation.relation-image .value-field img {
float: left;
margin-right: 15px;
}

.zwei-ui-editview .attribute-relation.relation-image .value-field img.zwei-img-svg {
max-height: 200px;
max-width: 50px;
}

.zwei-ui-editview .attribute-relation.relation-image .value-field .image-attributes {
float: left;
}

.zwei-ui-editview .attribute-relation.relation-image .value-field .image-attributes dt {
color: #fff;
}

/* Image handling buttons */
.zwei-ui-editview .attribute-relation.relation-image .value-field .action-edit {
position: absolute;
left: 0;
top: 35px;
}

.zwei-ui-editview .attribute-relation.relation-image.relation-undefined .value-field .action-edit {
top: 0;
}

.zwei-ui-editview .attribute-relation.relation-image .value-field .action-delete {
position: absolute;
left: 0;
top: 70px;
}

.zwei-ui-editview .attribute-relation.relation-image.relation-undefined .value-field .action-delete, 
.zwei-ui-editview .attribute-relation.relation-image.attribute-mandatory .value-field .action-delete {
display: none;
}

/* --- Attributes for generic image entities */
.zwei-ui-editview .attribute-image-original input {
margin-bottom: 10px;
}

.zwei-ui-editview .attribute-image-original .action-view {
line-height: 30px;
margin-bottom: 10px;
}

.zwei-ui-editview .attribute-image-original img {
max-height: 500px;
max-width: 100%;
}

.zwei-ui-editview .attribute-image-original img.zwei-img-svg {
/* width: 100%; This is a bit much... */
}

.zwei-ui-editview .attribute-image-variants .value-field {
min-height: 40px;
padding-left: 35px;
position: relative;
}

.zwei-ui-editview .attribute-image-variants .action-view {
left: 0;
position: absolute;
top: 0;
}

/* --- Attributes for generic document entities */
.zwei-ui-editview .attribute-document-original input {
margin-bottom: 10px;
}

.zwei-ui-editview .attribute-document-original .action-view {
line-height: 30px;
}

/* ---- Invalid fields/field errors */
.zwei-ui-editview .attribute-invalid {
border-bottom: none;
padding-bottom: 0;
}

.zwei-ui-editview .attribute-invalid:before, 
.zwei-ui-editview .attribute-invalid:after {
background: linear-gradient(-45deg, transparent 25%, #fcbc00 25%, #fcbc00 50%, transparent 50%, transparent 75%, #fcbc00 75%);
background-size: 30px 30px;
content: "";
display: block;
height: 10px;
margin: 0 0 10px 0;
width: 100%;
}

.zwei-ui-editview .attribute-invalid:after {
margin: 10px 0 0 0; /* top doesn't work yet */
}

.zwei-ui-editview .value-error {
color: #fcbc00;
margin: 5px 0 10px 0;
}

/* --- Structured fields */
.zwei-ui-editview .attribute-structured textarea {
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMklEQVQYGWP8//8/Awi8f/8ewgDzUAlBQUFGRphCVClMHhM+k5CVMyFz8LGHlUKiwxEAncAQ1UySvV4AAAAASUVORK5CYII=") repeat;
}

/* --- Keyword fields */
.zwei-ui-editview .attribute-keyword textarea {
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQklEQVQYGY3MUQoAIAhEQbv/XfUImwYGlanCfjm8AYCqExGQwWzMrG+NdVAKveShsHijsBihB/7QATO0YYUW7CCDE9s1Gvi7dNaFAAAAAElFTkSuQmCC") repeat;
}

/* ---- Multilanguage fields */
.zwei-ui-editview .attribute-multilang .value-field {
display: none;
}

.zwei-ui-editview .attribute-multilang .value-field.language-current {
display: block;
}

.zwei-ui-editview .attribute-multilang.attribute-collapsed .value-field.language-current label {
display: none;
}

.zwei-ui-editview .attribute-multilang.attribute-collapsed {
background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
background-size: 30px 30px;
}

.zwei-ui-editview .attribute-multilang.attribute-expanded .value-field, 
.zwei-ui-editview .attribute-multilang.attribute-expanded .value-field.language-current label {
display: block;
}

.zwei-ui-editview .attribute-multilang .value-field textarea {
margin: 5px 0 10px 0;
}

.zwei-ui-editview .attribute-multilang.attribute-collapsed .value-field textarea {
margin: 0;
}

.zwei-ui-editview .attribute-multilang .value-field:last-of-type textarea {
margin-bottom: 0;
}

/* --- Disabled fields */
.zwei-ui-editview .attribute-disabled input, 
.zwei-ui-editview .attribute-disabled textarea, 
.zwei-ui-editview .attribute-disabled select {
background: #666;
color: #ccc;
}

/* --- Field comments */
.zwei-ui-editview .value-comment {
margin-top: 5px;
}

/* Some entities and attributes have validation links in the comments */
.zwei-ui-editview .value-comment .inline-action {
margin-top: 5px;
} 


/* !-------------------------------------------- */
/* !COMPONENT: EditView / Bridges */
/* !-------------------------------------------- */

/* --- Bridges to other entities */
.zwei-ui-editview .entity-bridge {
margin: 10px 0 10px 0;
}

.zwei-ui-editview .bridge-controller {
background: rgba(0, 0, 0, 0.2);
overflow: hidden;
padding: 10px 50px 10px 5px; /* padding-right: make room for 4-digit counter */
position: relative;
transition: padding-left 0.3s ease;
}

.zwei-ui-editview .bridge-controller h3 {
font-size: 13px;
}

.zwei-ui-editview .bridge-expanded .bridge-controller {
min-height: 40px;
}

.zwei-ui-editview .bridge-expanded .bridge-controller .inline-action-visor {
padding-left: 70px;
transition: padding-left 0.3s ease;
}

/* Bridges for incoming links have no "create" button, so the headline stays unmoved */
.zwei-ui-editview .incoming-bridge.bridge-expanded .bridge-controller .inline-action-visor {
padding-left: 40px;
}

.zwei-ui-editview .bridge-controller .action-create {
left: 40px;
position: absolute;
top: 5px;
transition: left 0.3s ease;
}

.zwei-ui-editview .bridge-collapsed .bridge-controller {
background: linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
background-size: 30px 30px;
}

.zwei-ui-editview .bridge-collapsed .bridge-controller .action {
left: -50px;
transition: left 0.3s ease;
}

.zwei-ui-editview .bridge-controller .zwei-ui-counter {
margin-top: -9px;
position: absolute;
right: 10px;
top: 50%;
}

/* Bridge Objects */
.zwei-ui-editview .entity-bridge.bridge-collapsed .bridge-object {
display: none;
}

.zwei-ui-editview .bridge-object .value-field {
min-height: 30px; /* make room for a adjacent button */
padding-left: 40px;
position: relative;
}

.zwei-ui-editview .entity-bridge.incoming-bridge .bridge-object .value-field {
min-height: 0;
padding-left: 0;
}

.zwei-ui-editview .bridge-object.object-undefined .value-field {
padding-left: 0;
}

.zwei-ui-editview .bridge-object .value-field .action-view {
position: absolute;
left: 0;
top: 0;
}

.zwei-ui-editview .bridge-object.object-undefined .value-field .action-view {
display: none;
}

/* Bridge Objects referring to image entities */
.zwei-ui-editview .bridge-object.object-image .value-field {
min-height: 60px;
}

.zwei-ui-editview .bridge-object.object-image.object-undefined .value-field {
padding-left: 40px;
}

.zwei-ui-editview .bridge-object.object-image .value-field img {
float: left;
margin-right: 10px;
max-width: 40%;
}

.zwei-ui-editview .bridge-object.object-image .value-field .image-attributes {
float: left;
}

.zwei-ui-editview .bridge-object.object-image .value-field .image-attributes dt {
color: #fff;
}

.zwei-ui-editview .bridge-object.object-image .value-field .action-edit {
position: absolute;
left: 0;
top: 35px;
}

.zwei-ui-editview .bridge-object.object-image.object-undefined .value-field .action-edit {
top: 0;
}

/* !-------------------------------------------- */
/* !COMPONENT: EditView / Footer actions */
/* !-------------------------------------------- */

/* --- Layout the footer button array */
.zwei-ui-editview .editview-footer {
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid #000;
}

.zwei-ui-editview .editview-footer ul:after {
clear: left;
content: "";
display: block;
}

.zwei-ui-editview .editview-footer li {
border-right: 1px solid #000;
float: left;
height: 100%;
overflow: hidden;
padding: 10px 5px 10px 5px;
position: relative;
}

/* --- Setup widths for the EditView's button containers */
.zwei-ui-editview .editview-footer .footer-close {
width: 10%;
}

.zwei-ui-editview .editview-footer .footer-delete {
width: 15%;
}

.zwei-ui-editview .editview-footer .footer-copy {
width: 25%;
}

.zwei-ui-editview .editview-footer .footer-save {
width: 50%;
}

/* Currently we don't have a Copy function for generic entities */
.zwei-ui-editview.entity-type-generic .editview-footer .footer-save {
width: 75%;
}

/* A new entity doesn't need a delete button */
.zwei-ui-editview.entity-is-new .editview-footer .footer-close {
width: 25%;
}

/* --- Handle the save container depending on the entity's change state */
.zwei-ui-editview .editview-footer .footer-save {
border: 1px solid transparent;
border-radius: 0 0 4px 0;
transition: border-color 0.5s ease;
}

.zwei-ui-editview.entity-is-dirty .editview-footer .footer-save {
border: 1px solid #fcbc00;
transition: border-color 0.5s ease;
}

/* --- Button display */
.zwei-ui-editview .editview-footer .action {
font-size: 16px;
line-height: 30px;
text-overflow: ellipsis;
white-space: nowrap;
}

/* --- Handle the save button depending on the entity's change state */
.zwei-ui-editview .editview-footer .action-save {
opacity: 0;
transition: opacity 0.5s ease;
}

.zwei-ui-editview.entity-is-dirty .editview-footer .action-save {
opacity: 1;
transition: opacity 0.5s ease;
}

/* --- Handle the delete button depending on the entity's persistence state */
/* We need to clone the opacity changes for protected delete buttons here */
.zwei-ui-editview .editview-footer .action-delete {
opacity: 0;
transition: opacity 0.5s ease;
}

.zwei-ui-editview.entity-is-persisted .editview-footer .action-delete, 
.zwei-ui-editview.entity-is-persisted .editview-footer .action-delete.action-protected:hover {
opacity: 1;
transition: opacity 0.5s ease;
}

.zwei-ui-editview.entity-is-persisted .editview-footer .action-delete.action-protected {
opacity: 0.6;
transition: opacity 0.5s ease;
}

/* !-------------------------------------------- */
/* !COMPONENT: Error Messages */
/* !-------------------------------------------- */

.zwei-ui-errorbox {
background: linear-gradient(45deg, transparent 25%, #fbcc00 25%, #fbcc00 50%, transparent 50%, transparent 75%, #fbcc00 75%);
background-size:30px 30px;
border-bottom: 1px solid #000;
display: none;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
padding: 20px 60px 20px 20px;
position: relative;
}

#zwei_content.content-error .zwei-ui-errorbox {
display: block;
}

.zwei-ui-errorbox .action-dismiss {
position: absolute;
margin-top: -20px;
right: 10px;
top: 50%;
}

.zwei-ui-errorbox ul {
background: #565656 url("./img/carbon_fibre.png") 0 0 repeat;
color: #fff;
padding: 10px 40px 10px 40px;
}

.zwei-ui-errorbox li {
border-bottom: 1px solid #000;
border-top: 1px solid #444;
padding: 10px 0 10px 0;
text-align: left;
}

.zwei-ui-errorbox li:last-child {
border-bottom: none;
}

.zwei-ui-errorbox li:first-child {
border-top: none;
}

.zwei-ui-errorbox em {
font-style: normal;
color: #fbcc00;
}

.zwei-ui-errorbox span {
font-weight: normal;
}

/* !-------------------------------------------- */
/* !-------------------------------------------- */
/* !-------------------------------------------- */
/* !DEVELOPER EXTENSIONS: These styles are only temporary and need to be cleaned up! */
/* !-------------------------------------------- */
/* !-------------------------------------------- */
/* !-------------------------------------------- */

.action-disabled {
    border-color: red !important;
}