@charset "UTF-8";
/* reset 重置 */
html { font-family: "微软雅黑","宋体",Helvetica,Arial,sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; word-wrap: break-word; }

article, aside, details, figcacption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

a { background: transparent; text-decoration: none; color: #333; }

a:active, a:hover, a:focus { outline: 0; text-decoration: none; color: #333; }

b, strong { font-weight: bold; }

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, a, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea { margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; box-sizing: border-box; }

body { color: #333; background: #FFF; font: 20px; }

ul, li, ol { list-style: none; line-height: normal; }

h1 { font-size: 1.5em; }

h3 { font-size: 1em; }

.clearfix { clear: both; width: 100%; height: 1px; margin-top: -1px; display: block; visibility: hidden; overflow: hidden; }

/* common 共同 */
body { background: url("../images/retina_wood.png") repeat #fff; box-sizing: border-box; }

.h50 { width: 100%; height: 49px; }

/*.top-nav { height: 49px; width: 100%; line-height: 49px; background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0; right: 0; z-index: 9; overflow: hidden; }
.top-nav h3 { text-align: center; width: 100%; line-height: 50px; font-size: 20px; color: #fffcdb; }*/

.top-nav { height: 100px; width: 100%; line-height: 100px; background-color: rgba(0, 0, 0, 0.85); position: fixed; top: 0; right: 0; z-index: 9; overflow: hidden; }
.top-nav .title { text-align: center; width: 90%; line-height: 100px; font-size: 36px; color: #fffcdb; }

.btn-draw, .btn-clear, .btn-reset, .btn-send, .btn-send-editor, .btn-append, .btn-clear-editor, .editor-parameters .btn-append-this { height: 40px; padding-left: 10px; padding-right: 10px; border-radius: 5px; border: #fff 1px solid; text-align: center; line-height: 40px; color: #515151; outline: none; }

.btn-draw, .btn-send-editor, .editor-result .tabBox .hd li.on { background: -webkit-linear-gradient(top, #930e0e, #731c1c); background: linear-gradient(top, #930e0e, #731c1c); background: url("../images/li-on2.png") 0 0 repeat-x; }

.btn-clear, .btn-reset, .btn-send, .btn-append, .btn-clear-editor, .editor-result .tabBox .hd li, .editor-parameters .btn-append-this { background: -webkit-linear-gradient(top, #f4f4f4, #d6d6d6); background: linear-gradient(top, #f4f4f4, #d6d6d6); background: url("../images/li.png") 0 0 repeat-x; }

.btn-draw { width: 80px; font-size: 20px; position: absolute; left: 30px; margin-top: 20px; color: #fffcdb; border: #be1616 1px solid; box-shadow: 0px 3px 3px 0px #aaa; }

.btn-clear { width: 80px; font-size: 20px; position: absolute; left: 50%; margin-left: -40px; margin-top: 20px; box-shadow: 0px 3px 3px 0px #aaa; }

.btn-reset { width: 80px; font-size: 20px; position: absolute; right: 30px; margin-top: 20px; box-shadow: 0px 3px 3px 0px #aaa; }

.btn-send { width: 120px; font-size: 20px; position: absolute; left: 50%; margin-left: -60px; margin-top: 50px; box-shadow: 0px 3px 3px 2px #eee; }

.btn-send-editor { width: 120px; font-size: 20px; position: relative; left: 50%; margin-left: -140px; margin-top: 30px; box-shadow: 0px 3px 3px 2px #eee; color: #fffcdb; }

.btn-append { width: 120px; font-size: 20px; position: relative; left: 50%; margin-left: -60px; margin-top: 30px; box-shadow: 0px 3px 3px 2px #eee; }

.btn-clear-editor { width: 120px; font-size: 20px; position: relative; left: 50%; margin-left: 10px; margin-top: 30px; box-shadow: 0px 3px 3px 2px #eee; color: #515151; }

/* 框架 */
.canvas-parameter { margin: 20px; box-sizing: border-box; }
.canvas-parameter .canvas { min-width: 324px; width: 70%; min-height: 174px; padding: 10px; float: left; border: #721d1d 2px solid; background-color: #eee; border-radius: 5px; }
.canvas-parameter .parameter { width: 30%; padding: 10px; float: left; text-shadow: 1px 1px 1px #fffcdb; padding-bottom: 80px; }
.canvas-parameter .btn-group { width: 100%; position: relative; }

.send { clear: both; min-height: 300px; border-bottom: #721d1d 15px solid; background: url("../images/subtle_dots.png") repeat; padding-bottom: 60px; }
.send h3 { width: 100%; height: 35px; line-height: 35px; background-color: #721d1d; color: #fffcdb; text-align: center; }
.send form { margin: 50px 20px; }
.send label { width: 10%; margin-right: 1%; display: inline-block; text-align: center; }
.send input[type="text"] { width: 85%; padding: 6px 12px; }

.canvas-barcode li, .canvas-graph li, .canvas-hand-writing li, .canvas-image li, .canvas-receipt li, .canvas-label li, .canvas-text li { height: 40px; margin-top: 5px; margin-bottom: 5px; }
.canvas-barcode label, .canvas-graph label, .canvas-hand-writing label, .canvas-image label, .canvas-receipt label, .canvas-label label, .canvas-text label { width: 30%; min-width: 100px; overflow: hidden; display: inline-block; text-align: right; padding-right: 10px; box-sizing: border-box; font-size: 14px; }
.canvas-barcode input, .canvas-graph input, .canvas-hand-writing input, .canvas-image input, .canvas-receipt input, .canvas-label input, .canvas-text input { width: 60%; min-width: 50px; padding-left: 5px; padding-right: 5px; height: 30px; }
.canvas-barcode input:focus, .canvas-graph input:focus, .canvas-hand-writing input:focus, .canvas-image input:focus, .canvas-receipt input:focus, .canvas-label input:focus, .canvas-text input:focus { outline: none; }
.canvas-barcode select, .canvas-graph select, .canvas-hand-writing select, .canvas-image select, .canvas-receipt select, .canvas-label select, .canvas-text select { width: 60%; min-width: 50px; margin-left: -5px; height: 30px; }
.canvas-barcode select:focus, .canvas-graph select:focus, .canvas-hand-writing select:focus, .canvas-image select:focus, .canvas-receipt select:focus, .canvas-label select:focus, .canvas-text select:focus { outline: none; }

/* CanvasBarcode */
/* CanvasGraph */
/* CanvasHandWriting */
/* canvas-image */
/* canvas_receipt */
/* CanvasLabel */
/* canvas-text */
/* pad 平板横屏 */
@media screen and (max-width: 1024px) { .btn-draw { left: 0px; }
  .btn-reset { right: 0px; } }
/* pad 平板竖屏 设置与iphone6 plus一样 */
@media screen and (max-width: 768px) { .btn-draw { left: 0px; }
  .btn-reset { right: 0px; }
  .canvas-parameter .canvas { width: 100%; }
  .canvas-parameter .parameter { width: 100%; padding-bottom: 80px; padding-top: 20px; } }
/* iphone6 plus */
@media screen and (max-width: 414px) { .btn-draw { left: 0px; }
  .btn-reset { right: 0px; }
  .canvas-parameter .canvas { width: 100%; }
  .canvas-parameter .parameter { width: 100%; padding-bottom: 80px; padding-top: 20px; } }
/* iphone5 .etc */
@media screen and (max-width: 320px) { .btn-draw { left: 0px; }
  .btn-reset { right: 0px; }
  .canvas-parameter .canvas { width: 100%; overflow: hidden; box-sizing: border-box; min-width: 100px; }
  .canvas-parameter .parameter { width: 100%; padding-top: 20px; }
  .send { min-height: 200px; }
  .send label { width: 15%; }
  .send input[type="text"] { width: 80%; padding: 6px 12px; } }
/* -------------------------------------------------------------------------------------------------------------------- */
/* Api Editor */
.api-editor { border-bottom: #721d1d 15px solid; height: 100%; }

.editor-result { margin: 20px; box-sizing: border-box; }
.editor-result .tabBox .hd { height: 40px; line-height: 40px; position: relative; }
.editor-result .tabBox .hd ul { float: left; position: absolute; left: 20px; height: 32px; }
.editor-result .tabBox .hd li { float: left; margin-left: 5px; margin-right: 5px; width: 120px; height: 40px; border-radius: 5px 5px 0 0; cursor: pointer; text-align: center; line-height: 40px; color: #8c1111; }
.editor-result .tabBox .hd li.on { height: 40px; font-weight: bold; }
.editor-result .tabBox .hd li.on a { color: #fffcdb; }
.editor-result .tabBox .bd { height: 300px; overflow-y: scroll; overflow-x: hidden; box-sizing: border-box; margin-bottom: 5px; }
.editor-result .tabBox .bd ul { zoom: 1; border: #721d1d 2px solid; border-radius: 5px; background: url("../images/subtle_dots.png") repeat; padding: 0 20px 20px 20px; height: 260px; overflow-y: scroll; overflow-x: scroll; }
.editor-result .tabBox .bd li { height: 24px; line-height: 24px; }
.editor-result .tabBox .bd li a { -webkit-tap-highlight-color: transparent; }

.editor-parameters { width: 100%; border-top: #652723 2px solid; border-bottom: #652723 2px solid; background: url("../images/subtle_dots.png") repeat; }
.editor-parameters .items { display: none; }
.editor-parameters .editor-append { border-top: #e0e0e0 1px solid; margin-left: 50px; margin-right: 50px; padding-top: 0px; padding-bottom: 50px; display: none; }
.editor-parameters .btn-append-this { width: 80px; font-size: 14px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; box-shadow: 0px 1px 1px 2px #eee; color: #555; }
.editor-parameters h3 { width: 100%; height: 35px; line-height: 35px; background-color: #721d1d; color: #fffcdb; text-align: center; }
.editor-parameters ul { width: 100%; text-align: left; margin-top: 30px; margin-bottom: 30px; }
.editor-parameters li { margin-top: 5px; margin-bottom: 5px; clear: both; }
.editor-parameters label { width: 230px; display: inline-block; text-align: right; height: 30px; }
.editor-parameters input[type="text"] { width: 200px; margin-left: 5px; padding: 0px 6px; border: #666 1px solid; outline: none; height: 30px; }
.editor-parameters input[type="text"]:focus { border-color: #9c0000; }
.editor-parameters input[type="checkbox"] { margin-left: 10px; position: relative; top: 0px; }
.editor-parameters select { width: 200px; margin-left: 10px; margin-left: 5px; padding: 0px 6px; border: #666 1px solid; outline: none; height: 30px; }
.editor-parameters select:focus { border-color: #9c0000; }
.editor-parameters .items-1 { text-align: center; height: 300px; }
.editor-parameters .items-1 p { line-height: 70px; }
.editor-parameters .items-1 .btn-append { position: relative; left: 0; margin-left: 0; }

.editor-options { padding: 50px 30px; }
.editor-options .option { float: left; width: 64px; float: left; margin: 20px; text-shadow: 1px 1px 1px #fffcdb; text-align: center; line-height: 18px; font-size: 13px; }
.editor-options .option img { box-shadow: 0 0 5px #fff; }

/* 对API页面的兼容 */
/* pad 平板横屏 */
/* iphone6 plus */
@media screen and (max-width: 414px) { .editor-result .tabBox .hd li { width: 100px; }
  .editor-parameters label { display: block; width: 88%; margin-left: 12%; text-align: left; line-height: normal; }
  .editor-parameters input[type="text"], .editor-parameters select { margin-left: 50px; }
  .editor-parameters input[type="radio"] { margin-left: 200px; }
  .editor-parameters .label10 { display: inline-block; width: 60px; }
  .editor-parameters .label09 { display: inline-block; width: 170px; } }
/* iphone5 .etc */
@media screen and (max-width: 320px) { .editor-result .tabBox .hd li { width: 70px; }
  .editor-parameters label { width: 85%; margin-left: 15%; }
  .editor-parameters input[type="text"], .editor-parameters select { display: block; }
  .editor-parameters .btn-append-this { display: none; }
  .editor-options { padding: 20px 20px; }
  .editor-options .option { margin: 10px; } }
/* sample 页面 */
.sample { margin-top: 80px; }

.sample-editor, .sample-label, .test-label { background: -webkit-linear-gradient(top, #f9f9f9 0%, #f6f6f6 47%, #f0f0f0 47%, #fff 60%, #fbfbfb 100%); background: linear-gradient(top, #f9f9f9 0%, #f6f6f6 47%, #f0f0f0 47%, #fff 60%, #fbfbfb 100%); }

/*.sample-editor, .sample-label, .sample-url, .test-label { width: 80%; margin-left: 10%; margin-top: 30px; min-height: 80px; max-height: 150px; height: 20%; font-size: 36px; font-weight: bold; border: #fffcdb 1px solid; color: #515151; outline: none; }*/
.sample-editor, .sample-label, .sample-url, .test-label, .status-label { width: 10%; margin-left: 17%; margin-top: 30px; min-height: 40px; max-height: 80px; height: 10%; font-size: 14px; font-weight: bold; border: #fffcdb 1px solid; color: #515151; outline: none; border-radius: 5px;}
.sample-editor:hover, .sample-editor:focus, .sample-label:hover, .sample-label:focus, .sample-url:hover, .sample-url:focus, .test-label:hover, .test-label:focus, .status-label:hover, .status-label:focus{ border-color: #721d1d; color: #721d1d; }

.sample-url { padding: 6px; min-height: 40px; font-size: 16px; color: #666; font-weight: normal; border: #aaa 1px solid; border-radius: 5px;}









.label-span{width: 6%;display: inline-block;text-align: right;}

.btn-area{margin:5% 0% 10% 15%;}
.footer-title{position:fixed;width:100%;bottom:0px;line-height: 50px;font-size: 18px;padding-left: 45%;background-color:#221F1A;font-size: 16px;color: #fffcdb;}

.params-setting{border:solid 1px black;}

.params-label{text-align:right;padding-top: 80px;font-size: 16px;}
.content-box{border:solid 1px #fff;padding-bottom: 50px;border-radius: 5px;}