/* 公共css */
blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,tr,ul{margin:0;padding:0}
li,ol,ul{list-style:none outside none}
input,select{outline:0;}

#app,
.app,
body,
main,
html {
	color: #2f3c4d;
	font-size: 14px;
  width: 100%;
  height: 100%;
  position: relative;
	font-family:'Microsoft YaHei',Arial,Helvetica,sans-serif,'宋体';
}
body{
	background: #ebedef;
}

/* 滚动条样式 */
::-webkit-scrollbar {
	/* 滚动条整体部分 */
	width: 8px;
	height: 8px;
	
}

::-webkit-scrollbar-button {
	/* 滚动条两端的按钮 */
	display: none;
}

::-webkit-scrollbar-track-piece {
	background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
	/* 滑块 */
	width: 8px;
	border-radius: 8px;
	background: #bfc1c4;
}

::-webkit-scrollbar-corner {
	/* 边角 */
	width: 8px;
}

::-webkit-scrollbar-thumb:hover {
	/* 鼠标移入滑块 */
	background: #909090;
}

/* 引入图标库通用代码 */
.icon {
	width: 1em; height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}

/* header */
.layout-header {padding: 20px 15px 30px;}
.layout-header h1 {margin: 0;}
.layout-header p {margin: 0; font-size: 13px;}

/* control */
.api-control {margin: 30px 15px 0; border-top: 1px solid #999;}
.api-control > h1 {font-size: 20px; color: #222; margin: 0 0 5px; padding: 0 0 0 5px;}
.api-control nav {font-size: 14px; padding: 3px 10px; background: #f1f1f1;}
.api-control nav p {margin: 8px 0;}
.api-control nav button {
  padding: 8px 12px; margin: 0 5px 4px 0;
  font-family: 'Helvetica', Arial, sans-serif; font-size: 11px; color: #fff; font-weight: 400;
  border: none; text-transform: uppercase; cursor: pointer; background: #999; border-radius: 0;
}
.api-control > section {margin: 20px 0;}

/* make image */
#makeImageArea {margin: 0; padding: 15px; min-height: 100px; border: 1px dashed #20B292;}
#makeImageArea canvas,
#makeImageArea img {
  display: block; margin: 0 auto; border: 1px solid rgba(0,0,0,.05);
}