body {
	font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
	background: #F9F9F5;
}

header {
	position: relative;
	padding: 10px 20px;
	background: #555;
	z-index: 2000;
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background-color:#c0c0c0;
  min-height:28px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #9499a5;
}


.pull-right {
	float: right;
}

.btn-group *{
	margin-left: 20px;
}

.container {
	position: absolute;
	left: 10px;
	top: 50px;
	right: 10px;
	bottom: 20px;
	overflow: hidden;
	-webkit-transition: ease all 1s;
	-moz-transition: ease all 1s;
	-ms-transition: ease all 1s;
	transition: ease all 1s;
}

.setting-area {
	font-family: "微软雅黑";
	font-size: 20px;
	position: absolute;
	top: 100%;
	left: 50%;
	padding: 0 20px;
	margin-left: -300px;
	height: 500px;
	width: 600px;
	border: 2px solid grey;
	background: white;
	z-index: 1000;
	-webkit-transition: ease all 1s;
	-moz-transition: ease all 1s;
	-ms-transition: ease all 1s;
	transition: ease all 1s;
}

.code-area, .display-area {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	padding: 5px 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	overflow-y: auto;
	word-break: break-all;
	line-height: 1.5em;
}

.code-area {
	left: 0;
}

.display-area {
	right: 0;
}

.display-content {
	display: block;
	border: 2px dashed rgb(187, 187, 187);
	color: rgb(44, 62, 80);
	width: 100%;
	height: 100%;
}

.transparent-input {
	background: transparent;
	border: 0;
	color: white;
	outline: 0;
}


.code-area .CodeMirror {
  font-size: 16px;
  color: rgb(44, 62, 80);
  font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
  background: transparent;
  line-height: 1.5em;
  height: 100%;
}


.abs-top-right {
	position: absolute;
	top: 10px;
	right: 20px;
	z-index: 1000;
}

#md-download, .html-action {
	display: none;
}

.code-area:hover #md-download {
	display: inline-block;
}

.display-area:hover + .html-action, .html-action:hover {
	display: inline-block;
}

.html-action > * {
	cursor: pointer;
}

.buffer-top2 {
	margin-top: 20px
}

.buffer-right2 {
	margin-right: 20px
}

label, input[type=range] {
	cursor: pointer;
}

/* sprites */
.icon-file,.icon-copy,.icon-cog,.icon-arrow-down,.icon-checkmark,.icon-loop {
	cursor: pointer;
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(../images/sprites.png);
	background-repeat: no-repeat;
	margin-bottom: -2px;
}
.icon-file {
	background-position: 0 0;
}
.icon-copy {
	background-position: -32px 0;
}
.icon-cog {
	background-position: -64px 0;
}
.icon-arrow-down {
	background-position: -96px 0;
}
.icon-checkmark {
	background-position: -128px 0;
}
.icon-loop {
	background-position: -160px 0;
}