html,body{
position:relative;
height:100%;
}
body{
margin:0;
padding:0;
overflow:hidden;
}
.editor-control {
padding: 0.5em;
background: #fff;
border-bottom:1px solid #E7E7E7;
}
.editor-control a {
color: #858788;
text-decoration: none;
padding: 2px 5px;
border: 1px solid #C0392B;
border-radius: 2px;
margin: 0;
display: inline;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.editor-control a:hover {
color: #F0A2A2;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.editor{
position: relative;
display: block;
width: 100%;
margin: 0;
background:#FFFBF5;
height: 100%;
overflow: hidden;
}
.editor .editor-area {
display: block;
width: 96%;
margin: 1%;
padding: 1%;
height: 88%;
background: #FFF;
color: #6B6B6B;
border: none;
overflow: auto;
resize: none;
}
.editor .editor-area:focus {
outline-color: #C9C5C5;
}
.result {
position: absolute;
top: 34px;
left: 0;
display: block;
width: 96%;
margin: 1%;
padding: 1%;
height: 90%;
border: none;
overflow: auto;
visibility: hidden;
opacity: 0;
background: #FFF;
color: #6B6B6B;
transition: all 1s ease;
}
.result img{
display:block;
width:100%;
}
.show{
visibility: visible !important;
opacity:1;
transition:all 1s ease;
}
.active{
color:#f55 !important;
}