/**
 * TheVirtualBrain-Framework Package. This package holds all Data Management, and
 * Web-UI helpful to run brain-simulations. To use it, you also need to download
 * TheVirtualBrain-Scientific Package (for simulators). See content of the
 * documentation-folder for more details. See also http://www.thevirtualbrain.org
 *
 * (c) 2012-2023, Baycrest Centre for Geriatric Care ("Baycrest") and others
 *
 * This program is free software: you can redistribute it and/or modify it under the
 * terms of the GNU General Public License as published by the Free Software Foundation,
 * either version 3 of the License, or (at your option) any later version.
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 * PARTICULAR PURPOSE.  See the GNU General Public License for more details.
 * You should have received a copy of the GNU General Public License along with this
 * program.  If not, see <http://www.gnu.org/licenses/>.
 *
 **/

/* -------------------------------------------- */
/* The Virtual Brain: System */
/* -------------------------------------------- */
/* Created by @twotribes, Stuttgart */
/* -------------------------------------------- */
/* StyleSheet Scope: GENERAL OVERLAY WINDOWS */
/* Version: Odinson / 2.9.0 */
/* -------------------------------------------- */

/* !-------------------------------------------- */
/* !GENERAL: Overlay box */
/* !-------------------------------------------- */

#overlay {
display: none;
}

body.overlay:before {
background: rgba(0, 0, 0, 0.6);
background-color: transparent;
background-image: -webkit-gradient(radial, center 10%, 0, center 10%, 800, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.7)));
background-image: -moz-radial-gradient(center 10%, circle farthest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
background-position: center 0;
background-repeat: no-repeat;
bottom: 0;
display: block;
content: "";
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 900;
}

body.overlay #overlay {
background: #838590 url("./img/back_master.png") 0 0 repeat;
background-image: -webkit-gradient(radial, center 20%, 0, center 20%, 600, from(rgba(182, 182, 182, 0.7)), to(rgba(182, 182, 182, 0))), url("./img/back_master_top.png"), url("./img/back_master_left.png"), url("./img/back_master_right.png"), url("./img/back_master.png");
background-image: -moz-radial-gradient(center 20%, circle farthest-corner, rgba(182, 182, 182, 0.7), rgba(182, 182, 182, 0)), url("./img/back_master_top.png"), url("./img/back_master_left.png"), url("./img/back_master_right.png"), url("./img/back_master.png");
background-position: center 0, 0 top, left 0, right 0, 0 0;
background-repeat: no-repeat, repeat-x, repeat-y, repeat-y, repeat;
display: block;
position: fixed;
top: 76px;
height: 80%;
left: 10%;
overflow: hidden;
width: 80%;
z-index: 1000;
-webkit-box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.5);
}

#main #overlay hgroup {
background: rgba(250, 247, 228, 0.3);
border-bottom: 1px solid rgba(250, 247, 228, 0.4);
height: 37px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

/* --- we replicate this from base.css as an overlay might occur on a page w/o div#main.columnized */
/* we don't set the background here as it's different and set above by <hgroup> */
/* this should be deleted once all pages are "columnized" */
#overlay hgroup h4 {
color: #fff;
font-size: 15px;
margin: 0 0 10px 0;
padding: 10px 5px 10px 10px;
/* text-shadow: 0 -1px 0 rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.3); */
}

#overlay hgroup h4 mark {
color: #646a6f;
text-transform: uppercase;
}

#overlay hgroup h4 mark:after {
content: ":";
}

/* --- end of h4 replication */

#overlay hgroup .action-exit {
position: absolute;
right: 0;
top: 0;
}

#overlay .overlay-content {
bottom: 0;
left: 0;
position: absolute;
top: 50px;
overflow: auto;
width: 100%;
}

#overlay > .tabswitcher {
left: 0;
position: absolute;
top: 50px;
width: 100%;
}

#overlay.overlay-blocker > .tabswitcher, 
#overlay.overlay-blocker > .overlay-sidebar {
display: none;
}

#overlay > .tabswitcher + .overlay-content {
top: 81px; /* depends on the tabswitcher's height, defined in base.css ! */
}

#overlay.overlay-blocker .overlay-content, 
#overlay.overlay-blocker > .tabswitcher + .overlay-content {
top: 0;
}

/* !-------------------------------------------- */
/* !COMPONENT: Embedded sidebar within overlay content */
/* !-------------------------------------------- */

#overlay.dialog-sidebar .overlay-content {
margin-left: 20%;
width: 80%;
}

#overlay.dialog-sidebar.overlay-blocker .overlay-content {
margin-left: 0;
width: 100%;
}

#overlay .overlay-sidebar {
border-right: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
left: 0;
overflow: auto;
position: absolute;
top: 50px;
width: 20%;
}

#overlay > .tabswitcher + .overlay-content + .overlay-sidebar {
top: 81px; /* depends on the tabswitcher's height, defined in base.css ! */
}

/* We inherit a bit from the general column layout because we're lazy. */
#overlay .overlay-sidebar h4 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.3);
height: 28px;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Basically stolen from filter lists in section_project.css */
#overlay .overlay-sidebar li {
background: rgba(250, 247, 228, 0.1);
font-weight: bold;
padding: 5px 30px 5px 10px;
position: relative;
margin-bottom: 5px;
-webkit-transition: background .3s ease;
-moz-transition: background .3s ease;
}

#overlay .overlay-sidebar li.active {
background: rgba(250, 247, 228, 0.6);
}

#overlay .overlay-sidebar li:hover {
background: rgba(0, 0, 0, 0.1);
-webkit-transition: background .3s ease;
-moz-transition: background .3s ease;
}

#overlay .overlay-sidebar li.active:hover {
background: rgba(250, 247, 228, 0.6);
}

#overlay .overlay-sidebar li a {
color: #3e4252;
}

#overlay .overlay-sidebar li.active:hover a {
color: #646a6f;
}


/* !-------------------------------------------- */
/* !COMPONENT: Paging tools */
/* !-------------------------------------------- */

#overlay hgroup .block-pager {
display: none;
left: 10px;
position: absolute;
top: 5px;
width: 80px;
}

#overlay hgroup .block-pager li {
margin-right: 2px;
}

#overlay.can-browse hgroup .block-pager {
display: block;
}

#overlay.can-browse hgroup h4 {
padding-left: 90px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Generic blocker w/ spinning wheel */
/* !-------------------------------------------- */

body.overlay #overlay.overlay-blocker:not(.dialog-upload) {
background: transparent url("./img/progressbar_infinite.gif") center 100px no-repeat;
color: #fff;
font-weight: bold;
text-align: center;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}

#overlay.overlay-blocker:not(.dialog-upload) p:first-child {
margin-top: 200px;
}

#overlay.overlay-blocker:not(.dialog-upload) p {
margin-top: 10px;
text-shadow: #000 1px 1px 2px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Image lightbox */
/* !-------------------------------------------- */

#overlay.lightbox {
}

/* !-------------------------------------------- */
/* !COMPONENT: Project Data Upload dialog */
/* !-------------------------------------------- */

body.overlay #overlay.dialog-upload {
height: 75%;
left: 7%;
width: 86%;
}

#overlay.lightbox .upload-progress,
#overlay.editor-node .upload-progress,
#overlay.dialog-upload.overlay-blocker .uploader,
#overlay.dialog-upload.overlay-blocker .uploader.active,
#overlay.dialog-upload .uploader {
display: none;
}

#overlay.dialog-upload.overlay-blocker .blocker, 
#overlay.dialog-upload .uploader.active {
display: block;
}

#overlay.dialog-upload .upload-progress {
background: rgba(0, 0, 0, 0.5) url("./img/progressbar_infinite.gif") center 100px no-repeat;
color: #fff;
font-weight: bold;
height: 100%;
line-height: 400px;
text-align: center;
text-shadow: #000 1px 1px 2px;
}

/* !-------------------------------------------- */
/* !COMPONENT: Online help */
/* !-------------------------------------------- */

body.overlay #overlay.help {
left: 15%;
width: 70%;
}

#overlay.help .overlay-content {
overflow: hidden;
padding: 0;
top: 39px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

#overlay.help iframe {
border: none;
height: 100%;
width: 100%;
}

/* !-------------------------------------------- */
/* !COMPONENT: Data node editor */
/* !-------------------------------------------- */

body.overlay #overlay.editor-node {
height: 60%;
left: 20%;
width: 60%;
}

#overlay.editor-node .toolbar-inline .tool-removal {
float: right;
margin-right: 0;
}

/* Special action button case: Visible text, not only icon */
#overlay.editor-node .toolbar-inline .action-relevancy {
padding-left: 20px;
text-indent: 0;
width: auto;
}

/* Define later:

#overlay.node-type-gibberish 

*/

#overlay.editor-node .node-data {
display: none;
}

#overlay.editor-node .node-data.active {
display: block;
}

/* --- Editor for metadata */
#overlay.editor-node .node-metadata {
}

/* --- Link from/to other projects */
#overlay.editor-node .node-link div {
margin: 10px 0 10px 10px;
}

#overlay.editor-node .node-link div + div {
margin-top: 20px;
}

#overlay.editor-node .node-link h5 {
color: #3E4252;
}

#overlay.editor-node .node-link ul {
padding: 10px 10px 10px 0;
}

#overlay.editor-node .node-link li {
margin-bottom: 5px;
}

#overlay.editor-node .node-link p {
margin: 10px 0 10px 0;
}

/* --- Common layout for action trees */
#overlay.editor-node .node-export div,
#overlay.editor-node .node-analyze div,
#overlay.editor-node .node-view div {
margin: 10px 0 10px 10px;
}

#overlay.editor-node .node-export h5,
#overlay.editor-node .node-analyze h5,
#overlay.editor-node .node-view h5 {
color: #3E4252;
}

#overlay.editor-node .node-export ul,
#overlay.editor-node .node-analyze ul,
#overlay.editor-node .node-view ul {
padding: 10px;
}

#overlay.editor-node .node-export div ul,
#overlay.editor-node .node-analyze div ul,
#overlay.editor-node .node-view div ul {
padding-left: 0;
}

#overlay.editor-node .node-export li,
#overlay.editor-node .node-analyze li,
#overlay.editor-node .node-view li {
margin-bottom: 5px;
}

#overlay.editor-node .node-export button,
#overlay.editor-node .node-analyze button,
#overlay.editor-node .node-view button {
width: 100%;
}


/* --- Analyzers */
#overlay.editor-node .node-analyze {
}

/* --- Exporters */
#overlay.editor-node .node-export {
}

/* --- Visualizers */
#overlay.editor-node .node-view {
}


/** Backend developers styles. See TVB-1029 */

#overlay.editor-node .metadata-body{
position: absolute;
top: 40px;
padding-top: 10px;
overflow-y: auto;
bottom: 0;
left: 0;
right: 0;
}

#overlay.editor-node .metadata-body fieldset dd{
border:none;
margin: 0 ;
padding-top: 2px;
}

#overlay.editor-node .metadata-body fieldset dt{
border:none;
margin: 0 ;
padding-top: 2px;
}