style.css

html,body{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:'Roboto Slab', serif;margin:0}html{margin:0;padding:0}body{overflow:hidden}#dummy{width:100%;height:40%}#top{position:absolute;top:0;left:20%;width:60%;height:40%;background-color:#EFEFEF;margin-left:auto;margin-right:auto}#left{float:left;width:20%;height:100%;background-color:#EFDFEF}#right{float:right;width:20%;height:100%;background-color:#EFDFEF}#bottom{position:absolute;bottom:0;left:20%;width:60%;height:40%;background-color:#EFEFEF;margin-top:auto;margin-left:auto;margin-right:auto}.node{padding:0;display:inline-block;width:290px;z-index:11;text-align:center;cursor:move !important}.node .front{box-shadow:2px 2px 2px rgba(0,0,0,0.2);background-color:white;border:1px solid #093;padding: 40px;}.node .back{text-align:center;box-shadow:2px 2px 2px rgba(0,0,0,0.2);background-color:white;border:1px solid #093}.node .flipper>.front,.back{position:relative;}.back div{padding: 40px;}.rotate{font-size:16pt;position:absolute;bottom:4px;right:4px;display:none}.back .rotate{display:block}.close{font-size:16pt;position:absolute;top:0;right:4px}.color{display:inline-block;width:30px;height:30px;margin-right:8px;border-radius:6px;border:1px solid lightgrey}.color1{background-color:white}.color2{background-color:#FAA}.color3{background-color:#AAF}.color4{background-color:#AFA}.color5{background-color:#FFA}#flash{width:100%;height:100%;display:none;position:absolute;top:0;left:0;background-color:#fff;z-index:999}iframe{width:100%;height:100%;overflow:hidden}#swap{position:fixed;top:0;right:0;height:60px;width:80px;z-index:9999;max-width:80px;max-height:60px}.leftButton{position:fixed;top:0;right:80px;height:60px;width:80px;z-index:9999;max-width:80px;max-height:60px}.flip-container{-webkit-perspective:1000;perspective:1000;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.flipped .flipper{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);z-index:1000}body>.flip-container,#container>.flipper>.front,#container>.flipper>.back{width:100%;height:670px;padding:0}.flipper{-webkit-transition:all 0.6s linear;-moz-transition:all 0.6s linear;-ms-transition:all 0.6s linear;-o-transition:all 0.6s linear;transition:all 0.6s linear;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative}.front,.back{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;top:0;left:0}.front{z-index:2;overflow:visible !important}.back{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg)}.camera{background-color:white;z-index:999;position:fixed;border:1px solid black;border-radius:4px;bottom:0px;width:200px;text-align:center;left:50%;margin-left:-100px}svg{font-family:'Noto Sans', sans-serif}#send{width:93%;height:50px;background-image:url(images/move-1.png);background-position:center center;background-repeat:no-repeat;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-ms-transition:all 0.4s linear;-o-transition:all 0.4s linear;transition:all 0.4s linear;opacity:0.5;border:2px solid rgba(0,0,0,0);cursor:pointer;margin-bottom:5px}#send:hover,#send:active{border-color:rgba(153,204,153,0.6);opacity:1}.node-list{list-style-type:none;padding-bottom:100px;min-height:100px}.node-list .sortable-placeholder{border:1px dashed #dedede;height:20px;margin:10px}.list-node{margin:10px;border:1px solid #009933;padding:10px;white-space:pre-wrap;box-shadow:2px 2px 2px rgba(0,0,0,0.2);background-color:#fff;display:none}#no-found{text-align:center;margin-top:200px;font-size:1.5em;color:#666}#save-note{text-align:right;width:92%;margin:auto;font-size:0.8em;color:#bbb;height:1.4em}.main{width:500px;margin:auto;margin-top:200px;text-align:center;color:#4a4a4a}.main h1{font-size:1.7em}.main h2{font-size:1.1em}.main input[type="text"]{padding:8px;border-color:#bcbcbc;border-width:1px;border-radius:2px;border-style:solid}.main input[type="submit"]{font-family:'Roboto Slab', serif;background-color:#f1f1f1;padding:8px;border:1px outset #cbcbcb;border-radius:3px;box-shadow:inset 0 -15px 3px rgba(0,0,0,0.05);font-size:1.1em;font-weight:300;color:#888}.main input[type="submit"]:active{border-style:inset}#text{border:0;width:92%;margin:auto;overflow-y:scroll;line-height:1.5em;padding-right:18px;white-space:pre-wrap;display:block;font-family:'Roboto Slab', serif;font-size:inherit !important}::-webkit-scrollbar{width:6px;height:6px;background-color:#99CC99;border-radius:6px}::-webkit-scrollbar-track{border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background-color:#009933}.node{padding:8px;position:absolute;max-width:60%}.dom-node{background-color:#fff;border-top:20px solid #009933;box-shadow:inset 0 0 0 3px #009933;padding:10px;margin:10px;display:none;font-size:0.7em;width:200px;float:left;white-space:pre-wrap}