html{height:100%;overflow:hidden;width:100%}
body{background-color:#222;font-family:sans-serif;font-size:100%;height:100%;margin:0;padding:0;width:100%}
ul{list-style-type:none;margin:0;padding:0}

#frame-title,#frame-link{color:#fff;opacity:0.2;position:absolute;top:21px;}
#frame-title:hover,#frame-link:hover{opacity:1}
#frame-title{left:20px}
#frame-link{right:20px}
#frame-link a{color:#fff}

#content{display:flex;height:100%}
#left,#right{width:20%;min-width:240px;padding:60px 20px 0}
#left>div:not(:last-of-type),#right>div:not(:last-of-type){margin-bottom:20px}
#center{flex:1 1 0;padding:19px 0 15px;text-align:center}

.dnd35e{display:none}

.titlebar{background-color:#f93;border-radius:5px 5px 0 0;color:#fff;cursor:pointer;font-weight:bold;padding:10px 12px;transition:background-color 0.2s, border-radius 0.1s, color 0.2s;-moz-user-select:none;user-select:none}
.titlebar.collapsed{background-color:#333;border-radius:5px;color:#777}
.inner.content{background-color:#eee;border-radius:0 0 5px 5px;padding:10px}
.template{display:none}

.config{background-color:#fff;border-radius:3px;box-sizing:border-box;display:none;min-height:40px;padding:11px 11px 6px;position:absolute;top:-14px;width:150%;max-width:400px;z-index:1}

#left .config{left:-webkit-calc(100% + 3px);left:-moz-calc(100% + 3px);left:calc(100% + 3px)}
#right .config{right:-webkit-calc(100% + 3px);right:-moz-calc(100% + 3px);right:calc(100% + 3px)}
.config:before,.config:after{border:12px solid transparent;content:'';position:absolute;top:17px}
#left .config:before{border-left-width:0;border-right-color:#222;left:-12px}
#right .config:before{border-left-color:#222;border-right-width:0;right:-12px}
#left .config:after{border-left-width:0;border-right-color:#fff;left:-9px}
#right .config:after{border-left-color:#fff;border-right-width:0;right:-9px}

#pc{position:relative}
#reset{color:#333;cursor:pointer;font-size:0.6em;padding:8px;position:absolute;right:3px;top:0;text-transform:uppercase}

.config .namegen{color:#aaa;font-size:1.2em;font-weight:bold;line-height:27px;position:absolute;top:11px;right:4px;text-align:center;transition:color 0.2s;width:27px;}
.config .namegen:hover{color:#222;}

ul.dragdroplist{background-color:#ddd}
ul.dragdroplist li{background-color:#fff;border-bottom:1px solid #ddd;color:#aaa;cursor:default;padding:5px 12px 6px 12px;position:relative}
ul.dragdroplist li span,ul.dragdroplist li div{color:#222}
ul.dragdroplist .button,ul.dragdroplist .delete, ul.dragdroplist .list{border-radius:50%;cursor:pointer;display:inline-block;font-size:17px;font-weight:bold;height:20px;line-height:1em;margin-top:1px;text-align:center;width:20px}
ul.dragdroplist .list{color:#ccc;float:right;line-height:14px;margin-left:6px;margin-right:4px;position:relative;z-index:100;}
ul.dragdroplist .moveup,ul.dragdroplist .movedown{font-size:0.9em}
ul.dragdroplist li>input{border-width:1px;float:right;height:24px;margin:-2px 0;text-align:center;width:30px}
ul.dragdroplist li>span[type="list"]{border-width:1px;float:right;height:16px;margin:-2px 0;text-align:center;width:30px}
ul.dragdroplist .button:hover{background-color:#222;color:#fff}
ul.dragdroplist .delete:hover, ul.dragdroplist .list:hover{background-color:#d00;color:#fff}
#left ul.dragdroplist .button{float:right;margin-left:6px}
#left ul.dragdroplist .delete{float:left;margin-right:6px}
#right ul.dragdroplist .button{float:left;margin-right:6px}
#right ul.dragdroplist .delete{float:right;margin-left:6px}

#pc li[template]:before{display:inline-block;font-size:0.75em;position:relative;top:-1px;text-align:center;text-transform:uppercase;width:30px;}
#pc li[template="pc"]:before{color:green;content:'pc';}
#pc li[template="npc"]:before{color:blue;content:'npc';}
#pc li[template="enemy"]:before{color:red;content:'en';}

.functionbar{background-color:#eee;border-radius:0 0 5px 5px;color:#888;cursor:pointer;font-weight:bold;padding:5px 12px 6px;text-align:center}
ul.dragdroplist li:not(.ui-sortable-helper):hover .config{display:block}
input:not([type="button"]),.config select,textarea{-moz-appearance:none;border:2px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;box-sizing:border-box;font-family:sans-serif;font-size:0.9em;margin-bottom:5px;padding:3px;width:100%;}
.config textarea {height:120px;resize:vertical;}
.config select{-moz-appearance:none;background-color:#fff;margin-top:1px;padding:2px;}
input[type="number"]{border-right:none;padding:3px 0;}
#canvas textarea{margin:0;resize:none}

#canvas{height:calc(100% - 100px)}
#canvas textarea,#center #canvas>div{background-color:#333;color:#fff}
#canvas textarea{border:none;box-sizing:border-box;font-size:1.1em;height:100%;padding:20px 24px;width:100%}
#canvas>div{border-radius:7px;display:none;height:calc(100% - 45px);overflow-y:auto;padding:25px 25px 20px;-moz-column-count:3;column-count:3}
#canvas>div>div{margin:0 10px 30px;overflow:hidden;page-break-inside:avoid;vertical-align:top}
#canvas>div p{text-align:left}
#canvas h2{color:#f80;margin-top:0}
#canvas table{text-align:center;width:100%}
#canvas table th{background-color:#444;padding:5px 0 4px}
#canvas table tr:last-child td{border-bottom:1px solid #444;padding-bottom:5px}
#canvas ul{text-align:left}
#canvas ul li{border-bottom:1px solid #444;padding:4px 0}
#canvas ul li:last-child{border:none}

.config > div{display:flex;max-width:100%;}
.config > div input, .config > div select, .config a{margin-left:0;margin-right:5px;min-width:0;}
.config > div input:last-child, .config > div select:last-child{margin-right:0;}
.config .w10{flex:10}
.config .w16{flex:16}
.config .w20{flex:20}
.config .w25{flex:25}
.config .w33{flex:33}
.config .w40{flex:40}
.config .w50{flex:50}
.config .w60{flex:60}
.config .w80{flex:80}
.config .center{text-align:center}
.config a{background-color:#e4e4e4;border-radius:3px;height:27px;line-height:27px;text-align:center;text-decoration:none;width:28px;}

::-webkit-input-placeholder{color:#777}
:-moz-placeholder{color:#777}
::-moz-placeholder{color:#777}
:-ms-input-placeholder{color:#777}

#tabs{display:inline-flex;text-align:center}
#tabs div{background-color:#555;border-radius:5px 5px 0 0;color:#fff;cursor:pointer;display:inline-block;line-height:39px;margin:0 4px;overflow:hidden;padding:0 1.5em}
#tabs div.active{background:#333 linear-gradient(#4a4a4a, #333)}
ul.toolbar{display:inline-block;margin:15px 0 0;text-align:center}
ul.toolbar li{background-color:#000;border-radius:5px;color:#fff;cursor:pointer;display:inline-block;line-height:40px;margin:0 4px;overflow:hidden;padding:0 1.5em}
ul.toolbar li.active{background-color:#333;font-weight:bold}

#name input{line-height:21px;}
#name input[type="text"]{border:1px solid #bbb;line-height:20px;margin:0;padding:3px 6px;position:relative;top:-2px;width:calc(100% - 1.5em - 35px);}
#namegen-debug{padding-left:42px;}
#namegen-debug span{background-color:#ddd;border-radius:5px;display:inline-block;font-size:0.8em;margin-top:5px;margin-right:2px;padding:2px 5px;}

#audio input[type="file"]{border:none;margin:0;padding:0;width:100%}
/*#audio audio{display:none}*/
#audio-content{display:none}
#audio-controls{display:flex}
#audio-controls select{min-width:72px}
#audio-controls select:first-of-type{width:100%;}
#audio-controls input{line-height:1.15em;text-align:center;width:2.25em}

input[type='button'],select{border:1px solid #888;border-radius:3px;height:27px;line-height:25px !important}
input[type='button']:not(:last-child),select:not(:last-child){margin-right:3px}

#notes textarea {padding:0.5rem;resize:vertical;}

@media (max-width:1000px) {
  body {overflow-y:auto;}
  #content {flex-wrap:wrap;height:auto;}
  #left {order:1;padding-right:10px;width:calc(50% - 30px);}
  #right {order:2;padding-left:10px;width:calc(50% - 30px);}
  #center {order:3;padding:2rem;width:100%;}
  
  #canvas textarea {box-sizing:border-box;height:35vh;}
  #screen, #about {box-sizing:border-box;max-height:35vh;}
}