/*
 * ParametricWritingEditor.css

 * Copyright (c) 2017, Brandon Crosby, Commit3x LLC
 */

 body.warnHalting{
     background:red;
 }
 
/* 
    
    Top Area


*/
#upper-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0px;
    height: 75px;
    z-index: 100;
}

#upper-bar #home-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    margin:10px;margin-top:0px;
}
#upper-bar #names {
    position: absolute;
    left: 80px;
    right: 20px;
    top: 0;
    bottom: 0;
    z-index: 100;
}
#upper-bar #names #doc-name {
    font-size: 1em;font-weight:bold;border:2px solid #efefef;text-align:center;
    padding: 0px 0px 0px 0px;margin:2px;background-color:#f5f5f5;
    width: 99%;
}
#upper-bar #names #user-name {
    /* position: absolute; */
    bottom: 25px;
    font-weight:bold;
    right: 0;
    text-align:right;
}
#login-area {
	user-select:none;
}


/* 

    Main Menu

*/

#main-menubar {
    /* position: fixed; */
    z-index: 100;
    top: 90px;
    left: 10px;
    font-size: large;
    font-family: sans-serif;
    color: black;
}
#main-menubar ul,
#main-menubar li {
    padding: 0;
    margin: 0;
}
#main-menubar-ul {
    display:inline-block;
}
#main-menubar li {
    display: inline-block;
    margin-left: -4px;
    position: relative;
}
#main-menubar a {
    display: inline-block;
    padding: 1px 5px 1px 5px;
    color: #777;
    font-size: .9em;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid #fff;
    position: relative;
    z-index: 100;
}
#main-menubar a.menuDivider {
    /* border-top:1px black; */
    line-height:10px;margin-top:0px;margin-bottom:0px;
}
#main-menubar li:hover > a.menuItem {
    background: #fdfdfd;
    border: 1px solid #e1e1e1;
    border-bottom: 1px solid #fff;
}
#main-menubar .sub-menu {
    position: absolute;
    z-index: 50;
    left: 0;
    top: 95%;
    min-width: 120%;
    padding: 5px 0;
    background: #fff;
    border: 1px solid #e1e1e1;
    display: none;
}
#main-menubar .sub-menu li {
    display: block;
    padding-left: 30px; /*bc*/
}

#main-menubar .sub-menu li.checked {
    background-image: url('../img/check-mark.svg');
    background-repeat: no-repeat;
    background-position-x:5px;
}
#main-menubar .sub-menu a {
    border: 0;
    padding: 5px 13px;
}
#main-menubar .sub-menu a.menuItem:hover {
    border: 0;
    color: #555;
    background: #f5f5f5;
}

#main-menubar.opened .active .sub-menu {
    display: block;
}

.menu-checked {
	font-weight:bolder;
}
#login-area {
    margin-top: -16pt;
    text-align: right;
    /* display:inline-block; */
}
#user-name {
}
#user-permission {
    margin-left:15px;
    font-size: x-small;
    font-weight:bold;
}

/* 

    Footer

*/
/* Site Footer */
#footer {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 50;
    height: 15px;
    font-size: 10px;
}

/* Editor Header (even with Rule, Add Rule; Brief, Add Brief) */
#editor-head{
    display:none;
}

/* Editor status bar */
#editor-status {
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 50;
    display: block;
    padding: 9px 10px 10px;
    background: #ccc;
    min-width: 150px;
    text-align: right;
    font-style: italic;
}
#editor-status:empty {
	display: none;
}




/* 

    Main Area

*/
.main-area, #main-area {
    position: absolute;
    left: 0px;
    top: 50px;
    width: calc(100% - 10px);
    bottom: 15px;
    display: none;
    border: 5px solid #efefef;
}
.view-main #main-area,
.view-edit-sentence #main-area-edit-specific-sentence,
.view-edit-rule #main-area-edit-specific-rule,
.view-fix-issues #main-area-fix-issues,
.view-fix-issue #main-area-fix-issue {
	display: block;
}


/* Text Editor (QuillJS) */
#editor-container {
    height:100%;
    float:left;
    width:45%;
    overflow-y:hidden;
}

#editor {
	height:calc(100% - 42px);
}

/* For space between paragraphs! */

.ql-editor p { /* Brandon */
    margin-bottom: 10px;
}

.ql-toolbar.ql-snow {
	position: relative;
	z-index: 99;
}

/* Splitter */
#main-area > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.gutter.gutter-horizontal {
    height: 100%;
    float: left;
}
.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}
#main-area .gutter {
    z-index: 40;
    top: 0;
    bottom: 0px;
    cursor: ew-resize;
    background-color: #efefef;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-image:url('../img/dragHandles.png');
    /*url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')*/
}
#main-area .gutter-vertical {
	bottom: unset;
	top: unset;
	left: 0;
	right: 0;
	height: 10px;
	width: unset;
	cursor: n-resize;
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=')
}
#sentence-list,
#rule-use-list {
	padding-top: 10px; /* height of splitter */
}
#rule-use-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}







/* 

    Modal box / popup

*/

#editor-modal, #state-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0,0,0,.8);
    display: none;
}
#modal-wrap, #state-modal-wrap {
    width: 500px;
    max-width: 95%;
    padding: 15px 20px 25px;
    position: relative;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 15px;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
#modal-close, #state-modal-close {
    position: absolute;
    top: -6px;
    right: -10px;
    z-index: 999;
    background: #fff;
    border-radius: 50%;
    padding: 7px;
    border: 1px solid #555;
    font-size: .9em;
    text-decoration: none;
    font-weight: bold;
}
    #modal-close:hover, #state-modal-close:hover {
        background: #eee;
    }
.selectionID{
	background: white;
}



#modal-content input[type=button] {
    margin:5px;font-weight:bold;
}
#modal-content input[type=text] {
    border: 1px solid #4c4b4b;margin:5px;padding:2px;font-size:large;
    width:calc(100% - 150px);
}
#modal-content input[type=text].wideDetails {
	font-size: small !important;width:calc(100% - 10px) !important;
}

/* #editor-modal is the backgorund see-through wrapper thing */


/* 


    When there is no open story, prompt to make a new one, or go back to the list of stories

*/
#no-makeNew-1 {
	text-align:center;
	margin-top:-45%;
	padding-top:50%;
}

/* Loading */
body.loading-editor:after {
	position: fixed;
	z-index: 999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: ' ';
	display: block;
    background: rgba(0,0,0,.8) url('../img/loading-spinner.gif') center center no-repeat;
	background-size: 100px;
}





/*

    Editor Proper (the Quill editor)


*/
s { /* This is how we hide sentences or make them non-visible. */
    display: none !important;
}

.QL-custom-button {
    background-size: 24px !important;
    background-repeat: no-repeat !important;
}

#QL-custom-button-combine {
    background-image: url('../img/Toolbar-Combine.png');
}

#QL-custom-button-combine:hover {
    background-image: url('../img/Toolbar-CombineA.png');
}

#QL-custom-button-split {
    background-image: url('../img/Toolbar-Split.png');
}

#QL-custom-button-split:hover {
    background-image: url('../img/Toolbar-SplitA.png');
}

#QL-custom-button-notForPublishing {
    background-image: url('../img/Toolbar-Zoom2.png');
}

#QL-custom-button-notForPublishing:hover {
    background-image: url('../img/Toolbar-Zoom2A.png');
}

#QL-custom-button-zoom3 {
    background-image: url('../img/Toolbar-Zoom3.png');
}

#QL-custom-button-zoom3:hover {
    background-image: url('../img/Toolbar-Zoom3A.png');
}

#QL-custom-button-zoom4 {
    background-image: url('../img/Toolbar-Zoom4.png');
}

#QL-custom-button-zoom4:hover {
    background-image: url('../img/Toolbar-Zoom4A.png');
}

#QL-custom-button-rule-toggle {
    background-image: url('../img/Toolbar-RuleToggle-Off.png');
}

#QL-custom-button-rule-toggle:hover {
    background-image: url('../img/Toolbar-RuleToggle-OffA.png');
}
#QL-custom-button-rule-toggle.on {
    background-image: url('../img/Toolbar-RuleToggle-On.png');
}

#QL-custom-button-rule-toggle.on:hover {
    background-image: url('../img/Toolbar-RuleToggle-OnA.png');
}


#QL-custom-button-hid-toggle {
    background-image: url('../img/show-hid-sentencesOFF.png');
}

#QL-custom-button-hid-toggle:hover {
    background-image: url('../img/show-hid-sentencesOFFA.png');
}
#QL-custom-button-hid-toggle.on {
    background-image: url('../img/show-hid-sentencesON.png');
}

#QL-custom-button-hid-toggle.on:hover {
    background-image: url('../img/show-hid-sentencesONA.png');
}


#main-area-popup {
	/* display:none; */
	position:absolute;
	background-color:#ffffca;
}

#main-area-popup img {
	width:20px;
}

#footer-status-bar {
    text-align:right;float:right;margin-right:10px;
}

.ql-editor{
	padding-right:30px; /* room for the mini-map minimap */
}
#editorMiniMap {
	position: absolute;
	top: 42px;
	right:30px;
	width:25px;
	height:calc(100% - 43px);
}
@media print {
   #editorMiniMap {
      display:none;
   }
}