body { font-size: 100%; } div.main { position:fixed; top:0px; bottom:0px; left:0px; right:0px; } div.leftpanel { float: left; position: fixed; width: 20%; height: 100%; background-color: slategray; } div.flist { float: left; position: relative; width: 100%; height: 75%; background-color: slategray; overflow: scroll; } .file, .file_fail { position: relative; color: white; font-family: Helvetica, Arial, sans-serif; font-size: 1em; height: 5%; text-align: left; margin: 3%; margin-right: 4%; box-shadow: 5px 10px 18px #000000; z-index: 1; display:flex; align-items: center; justify-content: left; padding-left: 5%; overflow: visible; cursor: default; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .file { background-color: gray; } .file_fail { background-color: red; } .file:hover,.file_fail:hover { color: white; box-shadow: 7px 14px 26px #000000; overflow: visible; } .file:hover { background-color: lightgray; } .file_fail:hover { background-color: pink; } .file:active,.file_fail:active { margin-right: 3%; margin-left: 4%; margin-top: 4%; margin-bottom: -1%; } div.controlpanel { float: left; position: relative; width: 100%; height: 10%; background-color: slategray; font-family: Helvetica, Arial, sans-serif; font-size: 1em; // padding: 5%; // border: 1px solid black; } div.controlpanel { // float: right; position: relative; width: 100%; height: 5%; background-color: slategray; font-family: Helvetica, Arial, sans-serif; font-size: 1em; display: flex; // padding: 5%; // border: 1px solid black; } div.controlbutton { // position: relative; background-color: gray; color: white; font-family: Helvetica, Arial, sans-serif; font-size: 1em; // width: 20%; height: 75%; text-align: center; margin-left: 3%; margin-top: 2%; margin-down: 2%; margin-right: 0%; box-shadow: 5px 10px 18px #000000; z-index: 1; // display:flex; display: inline-block; // align-items: center; // justify-content: left; padding-left: 2%; padding-right: 2%; padding: 1%em; overflow: visible; cursor: default; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } div.controlbutton:hover { background-color: lightgray; color: white; box-shadow: 7px 14px 26px #000000; overflow: visible; } div.controlbutton:active { margin-right: -2%; margin-left: 5%; margin-top: 4%; margin-bottom: -1%; } div.reportpanel { float: left; position: relative; width: 100%; height: 20%; background-color: slategray; font-family: Helvetica, Arial, sans-serif; font-size: 1em; // padding: 5%; // border: 1px solid black; } div.report { background-color: white; position: relative; box-shadow: 5px 10px 18px #000000; z-index: 1; margin: 3%; margin-right: 4%; height: 82.4%; overflow: scroll; // border: 1px solid red; padding: 2%; white-space: pre-wrap; } div.viewpanel { position: relative; float: right; width: 80%; height: 100%; background-color: slategray; z-index: 0; overflow: visible; } div.viewholder { // border: 5px solid red; background-color: white; position: relative; width: 98%; height: 98%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 5px 10px 18px #000000; z-index: 1; } div.viewer { // border: 5px solid green; overflow: visible; display: block; background-color: white; position: relative; width: 98.2%; height: 97%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .can { margin: 0 auto; position: relative; }