@charset "utf-8";
html,body { margin:0; color:white; background-color:black; height:96%; }
textarea  { color: white; background-color: #555555; }
a         { color: #444444; text-decoration: none; }
a:visited { color: dimgray; }
.topbar-group { 
position: absolute;
top: 0; left: 0; z-index: 999;
border: 0; width: 100%; height: 48px;
border-bottom: 1px solid rgba(255,255,255,0.4);
}
.topbar { 
display: flex; 
flex-direction: row;
flex-wrap: nowrap;
height: fit-content;
margin: 12px 0 3px 10px;
}
.topbar > .text {
min-width: fit-content;
line-height: 164%;
}
.topbar > .tool-button span {
color: #222222;
font-size: 88%;
padding: 0 2px 0 2px;
}
.tool-button {
min-width: -moz-fit-content;
min-width: fit-content;
padding: 2px 5px 2px 5px;
margin-left: 10px; 
border-radius: 5px; 
background-color: #fff6cc;
}
.tool-button a         { color: black; }
.tool-button a:visited { color: #212121; }
.flex-container {
display: flex; 
margin-top: 48px; 
height: 80%; 
flex-wrap: nowrap; 
background-color: black;
}
.usage-pane       { width: 30%; margin: 5px; padding: 10px; font-size: large; }
.usage-pane a,
.help-info a      { display: inline-block; padding: 4px 8px 4px 8px; margin-top: 8px; border-radius:4px; background-color: wheat; }
.help-info { margin-bottom: -96px; margin-top: -12px; text-align: center; }
.usage-pane > img { margin-left:10px; display: block; max-width:98%; }
.usage-pane > h1  { text-align:center; color: orange; font-size: xx-large; }
.usage-pane > h2  { text-align:center; color: snow; font-size: large; line-height:150%; margin-bottom: 20px; }
.usage-pane > h3  { color: orange; font-size: large; margin-left: 10px; }
.usage-pane > h4  { color: snow; text-align: center; font-size: medium; margin-left: 10px; }
.usage-pane > p   { color: snow; font-size: medium; margin-left: 10px; }
.usage-pane > pre {
white-space: -moz-pre-wrap; 
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
font-family: monospaced; font-size: small;
margin-left: 10px;
padding: 15px 10px 15px 10px; 
background-color: #222222;
}
.input-pane {
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.input-pane > textarea  { display:table-row; margin-top:15px; width:96%; height:98%; }
.output-pane {
width: 35%;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.output-pane > textarea { display:table-row; margin-top:15px; width:94%; height:43%; }
.output-pane button {
margin-top: 15px;
width: 80%;
border: 3px solid gray;
}
.output-pane button:enabled:hover {
border: 3px solid orange;
}
#list_type_chooser      { margin: 10px 0 -4px; 4px; z-index: 999; }
.help-info { margin-bottom: -96px; text-align: center; }
.leo-logo img, img.leo-logo {
display: block;
margin: 0 auto;
width: 50px;
height: 50px;
border-radius: 50%;
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
img.leo-logo:hover, .leo-logo:hover img {
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.bottom-ads { background-color: black; margin-top: 15px; margin-left: 31.4%; margin-right: 1%; }