/* -------------------------------------------- */
/* Transity: Contracts */
/* Version: 2.31 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: STAGE LAYOUT */
/* !-------------------------------------------- */

/* !======================================================================================== */
/* !STAGE DEFINITIONS: General layout & viewport dependencies */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !STAGE: General layout for actor elements */
/* !-------------------------------------------- */

.stage {
background: #f2f2f2;
}

.actor, .actorgroup, .actorfamily {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
}

/* !-------------------------------------------- */
/* !STAGE MODE: Overlay with spinning wheel */
/* !-------------------------------------------- */

#actor-blocker {
    display: none;
}

.stage.overlay-blocker #actor-blocker {
    display: block;
    height: 100%;
    z-index: 500;
}

/* !-------------------------------------------- */
/* !STAGE: General setup with all actors (overlapping) */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

.stage #actor-navigation {
top: 0;
height: 80px;
z-index: 200;
}

/* --- Authentication pane */
.stage #actor-authentication {
top: 80px;
bottom: 0;
z-index: 100;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
/* filter: blur(0); */
-webkit-transition: top ease 0.5s, bottom ease 0.5s, -webkit-filter 1.5s ease;
-moz-transition: top ease 0.5s, bottom ease 0.5s, -moz-filter 1.5s ease;
-ms-transition: top ease 0.5s, bottom ease 0.5s, -ms-filter 1.5s ease;
/* transition: top ease 0.5s, bottom ease 0.5s, filter 1.5s ease; */
}

/* --- Selected object */
/* --- Moved out of view initially */
.stage #actorgroup-object {
top: -100%;
bottom: 100%;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

.stage #actor-inspector {
width: 30%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}

.stage #actorfamily-object {
width: 70%;
left: 30%;
height: 100%;
}

/* Pages: Initialize to hidden state */
.stage #actor-editor-base, 
.stage #actor-editor, 
.stage #actor-history, 
.stage #actor-templates {
height: 100%;
overflow: auto;
overflow-x: hidden;
left: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
-moz-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
-ms-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
}


/* --- General settings */
/* --- Moved out of view initially */
.stage #actorgroup-settings {
top: -100%;
bottom: 100%;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

.stage #actor-inspector-settings {
width: 30%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}

.stage #actorfamily-settings {
width: 70%;
left: 30%;
height: 100%;
}

/* Pages: Initialize to hidden state */
.stage #actor-settings-index, 
.stage #actor-settings-templates, 
.stage #actor-settings-app {
height: 100%;
overflow: auto;
overflow-x: hidden;
left: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
-moz-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
-ms-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
}


/* --- Global data */
/* --- Moved out of view initially */
.stage #actorgroup-global-data {
top: -100%;
bottom: 100%;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

.stage #actor-inspector-global-data {
width: 30%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}

.stage #actorfamily-global-data {
width: 70%;
left: 30%;
height: 100%;
}

/* Pages: Initialize to hidden state */
.stage #actor-edit-data-keys, 
.stage #actor-edit-values {
height: 100%;
overflow: auto;
overflow-x: hidden;
left: 100%;
opacity: 0;
visibility: hidden;
-webkit-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
-moz-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
-ms-transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
transition: left ease 0.2s, opacity 1s ease, visibility ease 0 1s;
}


/* --- List of all objects */
.stage #actorgroup-list {
top: 70%;
bottom: 0;
-webkit-transition: 1s top ease;
-moz-transition: 1s top ease;
-ms-transition: 1s top ease;
transition: 1s top ease;
}

.stage #actor-list-controller {
height: 90px;
}

.stage #actor-list-view {
top: 90px;
bottom: 0;
overflow: auto;
}

/* !-------------------------------------------- */
/* !STAGE: Authentication dialog */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Authentication pane is already visible by default */

/* --- Move out Contract list */
.stage-auth #actorgroup-list {
top: 100%;
-webkit-transition: 1s top ease;
-moz-transition: 1s top ease;
-ms-transition: 1s top ease;
transition: 1s top ease;
}

/* !-------------------------------------------- */
/* !STAGE: Pure object listing */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Move out Authentication pane */
.stage-list #actor-authentication {
top: -100%;
bottom: 100%;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
/* filter: blur(8px); */
-webkit-transition: top ease 0.5s, bottom ease 0.5s, -webkit-filter 1.5s ease;
-moz-transition: top ease 0.5s, bottom ease 0.5s, -moz-filter 1.5s ease;
-ms-transition: top ease 0.5s, bottom ease 0.5s, -ms-filter 1.5s ease;
/* transition: top ease 0.5s, bottom ease 0.5s, filter 1.5s ease; */
}

/* --- List of all objects */
.stage-list #actorgroup-list {
top: 80px;
bottom: 0;
-webkit-transition: 1s top ease;
-moz-transition: 1s top ease;
-ms-transition: 1s top ease;
transition: 1s top ease;
}

/* !-------------------------------------------- */
/* !STAGE: Object inspection */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Move out Authentication pane */
.stage-object #actor-authentication {
top: -100%;
bottom: 100%;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
/* filter: blur(8px); */
-webkit-transition: top ease 0.5s, bottom ease 0.5s, -webkit-filter 1.5s ease;
-moz-transition: top ease 0.5s, bottom ease 0.5s, -moz-filter 1.5s ease;
-ms-transition: top ease 0.5s, bottom ease 0.5s, -ms-filter 1.5s ease;
/* transition: top ease 0.5s, bottom ease 0.5s, filter 1.5s ease; */
}

/* --- Move in Object actor group */
.stage-object #actorgroup-object {
top: 80px;
bottom: 30%;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

/* --- Move selected page into view */
.stage-object.spotlight-editor-base #actor-editor-base, 
.stage-object.spotlight-editor #actor-editor, 
.stage-object.spotlight-history #actor-history, 
.stage-object.spotlight-templates #actor-templates {
left: 0;
opacity: 1;
visibility: visible;
-webkit-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
-moz-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
-ms-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
}


/* !-------------------------------------------- */
/* !STAGE: General settings */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Move out Authentication pane */
.stage-settings #actor-authentication {
top: -100%;
bottom: 100%;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
/* filter: blur(8px); */
-webkit-transition: top ease 0.5s, bottom ease 0.5s, -webkit-filter 1.5s ease;
-moz-transition: top ease 0.5s, bottom ease 0.5s, -moz-filter 1.5s ease;
-ms-transition: top ease 0.5s, bottom ease 0.5s, -ms-filter 1.5s ease;
/* transition: top ease 0.5s, bottom ease 0.5s, filter 1.5s ease; */
}

/* --- Mode: When user has no matching access rights, move out Contract list */
/* TODO: Finalize this in TC-155 */
.stage-settings:not(.access-objects) #actorgroup-list {
top: 100%;
-webkit-transition: 1s top ease;
-moz-transition: 1s top ease;
-ms-transition: 1s top ease;
transition: 1s top ease;
}

/* --- Move in General Settings actor group */
.stage-settings #actorgroup-settings {
top: 80px;
bottom: 0;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

.stage.access-objects #actorgroup-settings {
bottom: 30%;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

/* --- Move selected page into view */
.stage-settings.spotlight-settings-index #actor-settings-index, 
.stage-settings.spotlight-settings-templates #actor-settings-templates, 
.stage-settings.spotlight-settings-app #actor-settings-app {
left: 0;
opacity: 1;
visibility: visible;
-webkit-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
-moz-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
-ms-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
}

/* !-------------------------------------------- */
/* !STAGE: Global data */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Move out Authentication pane */
.stage-global-data #actor-authentication {
top: -100%;
bottom: 100%;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
/* filter: blur(8px); */
-webkit-transition: top ease 0.5s, bottom ease 0.5s, -webkit-filter 1.5s ease;
-moz-transition: top ease 0.5s, bottom ease 0.5s, -moz-filter 1.5s ease;
-ms-transition: top ease 0.5s, bottom ease 0.5s, -ms-filter 1.5s ease;
/* transition: top ease 0.5s, bottom ease 0.5s, filter 1.5s ease; */
}

/* --- Move out Contract list */
.stage-global-data #actorgroup-list {
top: 100%;
-webkit-transition: 1s top ease;
-moz-transition: 1s top ease;
-ms-transition: 1s top ease;
transition: 1s top ease;
}

/* --- Move in Global data actor group */
.stage-global-data #actorgroup-global-data {
top: 80px;
bottom: 0;
-webkit-transition: top 1s ease, bottom 1s ease;
-moz-transition: top 1s ease, bottom 1s ease;
-ms-transition: top 1s ease, bottom 1s ease;
transition: top 1s ease, bottom 1s ease;
}

/* --- Move selected page into view */
.stage-global-data.spotlight-edit-data-keys #actor-edit-data-keys, 
.stage-global-data.spotlight-edit-values #actor-edit-values {
left: 0;
opacity: 1;
visibility: visible;
-webkit-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
-moz-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
-ms-transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
transition: left 1s ease, opacity ease 1s, visibility ease 0 0;
}


/* !======================================================================================== */
/* !DEVELOPER SECTION: Temporary styles which need to be reviewed and cleaned */
/* !======================================================================================== */