body, html, h1, h2 { margin: 0; padding: 0; font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; color: #333; }
a:hover, a.active { color: #4183c4; }
#header { background-color: #2d2d2d; color: white; text-align: center; }
#header a { color: white; }
#body { width: 1024px; margin: 0 auto; margin-top: 20px; }
#body:after { content: ''; clear: both; display: block; }
#sidebar { float: left; width: 327px; margin-left: 20px; }
#sidebar:after { content: ''; clear: both; display: block; }
.col { width: 50%; float: left; }
.option-block { padding: 5px; border-bottom: 3px dashed #D0CCCC; }
#bits { width: 100px; }
.menu { padding: 0; margin: 0; }
.menu li { list-style: none; }
.menu li a, .menu-group { display: block; min-height: 30px; line-height: 30px; padding-left: 20px; }
.menu-group { font-weight: bold; }
.menu li a:hover, .menu li a.active { padding-left: 19px; border-left: 1px solid #828282 }
#index:after { content: ''; clear: both; display: block; }
#index .menu { float: left; min-width: 200px; }
#main { float: left; width: 677px; }
#main h1 { margin: 10px 0; border-bottom: 1px solid #eee; }
.description { color: gray; margin: 10px 0; }
.submit { height: 60px; line-height: 50px; text-align: center; }
#droppable-zone { border: 10px dashed #ccc; height: 200px; width: 650px; position: relative; overflow: hidden; }
#droppable-zone.hover { border: 10px dashed #aaa; }
#droppable-zone-wrapper { display: table; height: 100%; width: 100%; }
#droppable-zone-text { display: table-cell; text-align: center; vertical-align: middle; font-size: 33px; overflow: hidden; }
.droppable-file { position: absolute; top: 0; left: 0; opacity: 0; height: 100%; width: 100%; cursor: pointer; }
textarea { /*font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;*/ font-size: 12pt; max-width: 95%; width: 95%; height: 200px; border: 3px double #ccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #e0e0e0; /* Old browsers */ background: -moz-linear-gradient(top, #e0e0e0 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e0e0e0 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e0e0e0 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e0e0e0 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #e0e0e0 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }
::-webkit-input-placeholder { text-align: center; line-height: 200px; font-size: 16pt; }
::-moz-placeholder { text-align: center; line-height: 200px; font-size: 16pt; }
:-ms-input-placeholder { text-align: center; line-height: 200px; font-size: 16pt; }
#footer { margin-top: 40px; padding-top: 40px; padding-bottom: 40px; font-size: 12px; line-height: 1.5; color: #777; border-top: 1px solid #eee; text-align: center; }
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
.btn:hover,
.btn:focus,
.btn.focus { color: #333; text-decoration: none; }
.btn:active,
.btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; }
.btn-default { color: #333; background-color: #fff; border-color: #ccc; }
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; }
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default { background-image: none; }
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; }
.btn-default .badge { color: #fff; background-color: #333; }
.hljs { display: block; overflow-x: auto; padding: 0.5em; background: white; color: black }
.hljs-comment,
.hljs-quote,
.hljs-variable { color: #008000 }
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag { color: #00f }
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition { color: #a31515 }
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta { color: #2b91af }
.hljs-doctag { color: #808080 }
.hljs-attr { color: #f00 }
.hljs-symbol,
.hljs-bullet,
.hljs-link { color: #00b0e8 }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: bold }