html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;word-wrap:break-word}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
html, body{width:100%;height:100%;margin:0;padding:0;font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#fff;color:#555}
*, body, button, input, textarea, select{text-rendering:optimizeLegibility;-webkit-touch-callout:auto;outline:none;text-outline:none}
#wrapper,#loader,#header{ width:100%;overflow:hidden}
.htmledito a{text-decoration:none;color:#0089f2;text-shadow:0 1px 0 white}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
.CodeMirror{font-family:"Lucida Console", Monaco, monospace;font-size:13px;line-height:1.4}
#foo, #bar, .general{-ms-user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}
input#previewsizewidth, input#previewsizeheight {display:none}
.placeholder{color:#aaa}
.saveShare {float:right;text-align:center;position:relative}
@media (max-width:520px){
  .saveShare {
    float:unset;
    position: absolute;
    right: 0;
    z-index: 999;
  } 
   .s-hide{
      display:none;
  }
}
#wrapEditors {min-height:1300px;position:relative;}
#saveShareButton {height:50px;line-height:50px;font-weight:500;padding:0 16px;font-family:sans-serif;display:block;cursor:pointer;font-size:16px;color:#000}
#saveShareButton:hover {background:#428BCA;color:#FFF}
#saveShareButton:hover svg {fill:#FFF}
#saveShareButton svg {fill:#3792ce;height:26px;width:26px;position:relative;top:-3px;display:inline-block;vertical-align:middle}
#shareWindow {background:#FFF;width:240px;position:absolute;right:15px;top:40px;z-index:999;display:none;padding:5px;border:1px solid #ddd;box-shadow:10px 9px 17px -10px rgba(0,0,0,0.5)}
#shareWindow > div {clear:both}
#shareWindow a {background:#3792ce;color:#FFF !important;font-weight:bold;display:inline-block;min-width:60px;padding:0 5px;border-radius:3px;font-size:14px}
#shareWindow a:hover {background:#1c7dbd}
#shareLinkInput {width:200px;display:inline-block;margin:5px 0;font-size:13px}
#loader{position:absolute;padding-top:200px;font-size:30px;text-align:center;color:#CCC;top:0;height:100%;width:100%;background:#FFF;background-position:center center;z-index:9999}
#foo, #bar{width:100%;height:100%;overflow:hidden}
#codehtml, #codecss, #codejs, #codepreview{width:100%;height:100%;overflow:hidden}
#preview{width:100%;height:100%;margin:0;padding:0;border:0;background:#fff}
#previewmask{position:absolute;opacity:0.1;width:100%;height:100%;background:#fff;padding:0;margin:0}
#widget{overflow:hidden;position:absolute;width:100%;height:90%;border-bottom:7px solid grey}
#header{overflow:visible;color:#555;font-size:13px;width:100%;height:50px;margin:0;background:#fff;border-bottom:1px solid #ccc;box-shadow:0 0 8px rgba(0,0,0,0.07);webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1000}
#settingsmenubutton, #librarymenubutton, #runcodebutton { margin:0 0 0 2px; font-weight:500; height:50px; display:inline-block; font-size:16px; border:0; background:transparent; cursor:pointer; padding:4px}
#runcodebutton { padding:4px 2px; margin:0 5px}
.generatormenu > label:hover{ background:#428bca; color: #fff;}
.generatormenu > label:hover input{color:white}
#sizer {font-size:12px}
#sizer span {font-size:16px}
#sizer a { display:inline-block; background:#428bca; color:#FFF !important; width:20px; height:20px; font-size:20px; line-height:20px; text-align:center; font-weight:bold; opacity:0.6; border-radius:20px}
#sizer a.decrease {	background:#a11}
#sizer a:hover {	opacity:1}
#previewcompact{background:url('/views/codeEditor/images/icons.png') no-repeat;background-position:0 0;width:34px;height:25px}
#previewnojs{background:url('/views/codeEditor/images/icons.png') no-repeat;background-position:-37px 0;width:34px;height:25px}
#fullpreview{background:url('/views/codeEditor/images/icons.png') no-repeat;background-position:-73px 0;width:32px;height:26px}
#previewtablet{background:url('/views/codeEditor/images/icons.png') no-repeat;background-position:-107px 0;width:18px;height:24px}
#previewphone-h{background:url('/views/codeEditor/images/icons.png') no-repeat;background-position:-126px 0;width:11px;height:20px}
#previewphone-w{background:url('/views/codeEditor/images/icons.png') no-repeat;background-position:-140px 0;width:20px;height:11px}
#fullpreview, #previewtablet, #previewphone-h, #previewphone-w{margin:4px 0 0;border:0;cursor:pointer;opacity:0.5;filter:alpha(opacity=50)}
#fullpreview:hover, #previewtablet:hover, #previewphone-h:hover, #previewphone-w:hover{opacity:1.0;filter:alpha(opacity=100)}
#previewcompact, #previewnojs{border:0;vertical-align:middle;opacity:0.8;filter:alpha(opacity=80);cursor:pointer}
#previewcompact:hover, #previewnojs:hover{opacity:1.0;filter:alpha(opacity=100)}
#revisionbox{background:#4072b4;height:37px;padding:13px 0 0}
#revision{width:40px;font-size:11px;padding:3px;border:0;margin-right:4px}
@media screen and (min-width:0\0){#revisionbox{ background:#4072b4;height:34px;padding:16px 0 0}
}
@-moz-document url-prefix(){#revisionbox{ background:#4072b4;height:34px;padding:16px 0 0}
.htmledito-settings option{ padding-top:5px}
}
@media screen and (-webkit-min-device-pixel-ratio:0){ ::i-block-chrome,#revisionbox{ background:#4072b4;height:36px;padding:14px 0 0}
::i-block-chrome,#revision{ width:20px;color:#fff;background:#4072b4;-webkit-appearance:none}
::i-block-chrome,#themeselectbox{ line-height:24px}
}
.topmenu { color:#333; z-index:999; background:#fff; padding:10px; display:none; position:absolute; left:15px; border:1px solid #ddd; box-shadow:10px 9px 17px -10px rgba(0,0,0,0.5)}
.topmenu input[type="text"]{border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.topmenu textarea{border:1px solid #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;height:70px}
#librarymenu input[type="button"]{font-weight:500;color:#fff;background:#428BCD;font-size:11px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;cursor:pointer;border:none;padding:5px;margin-top:5px }
#librarymenu input[type="button"]:hover{background:#2E71AE}
.topmenu input[type="checkbox"]{vertical-align:middle;margin:0 8px 0 5px}
#previewoutputsize{display:none;position:absolute;top:0;left:0;font-family:arial;font-size:12px;font-weight:normal;background:rgba(255,255,255,0.8);-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;padding:5px}
#outputsizenumber{font-weight:bold}
textarea{font-weight:500;resize:none;width:100%;padding:3px 3px 3px 5px !important;margin:5px 0 0 !important}
input[type="text"], input[type="password"]{padding:3px 3px 3px 5px !important}
.general{background:#fff;width:calc(100%-50px)}
.codetypelabel{font-size:11px;z-index:998;position:absolute;margin-top:4px;right:5px;padding:2px;white-space:nowrap;color:#ccc;letter-spacing:1px}
.CodeMirror-activeline-background{width:100%;background:#f3fafe}
.CodeMirror-selected{background:#ececec;overflow:hidden}
#htmltabbutton, #csstabbutton, #jstabbutton, #previewtabbutton{background:#4679bd;color:#fff;border:2px solid #4072b4;font-size:9px;cursor:pointer;margin:0;height:25px;width:40px;text-align:left;font-weight:500}
iframe.codethumb{z-index:2;width:200%;height:200%;background:white;border:0;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transform:scale(0.5);-webkit-transform-origin:top left;-moz-transform:scale(0.5);-moz-transform-origin:top left;-ms-transform:scale(0.5);-ms-transform-origin:top left;-o-transform:scale(0.5);-o-transform-origin:top left;transform:scale(0.5);transform-origin:top left}
article{float:left;margin:10px;overflow:hidden}
.clear{clear:both;height:0;line-height:0;font-size:0}
@media only screen and (-moz-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-devicepixel-ratio:1.5), only screen and (min-resolution:1.5dppx), only screen and (-moz-min-device-pixel-ratio:2), only screen and (-o-min-device-pixel-ratio:2), only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min-devicepixel-ratio:2), only screen and (min-resolution:2dppx){#loader{ position:fixed;background:#4679bd url('/views/codeEditor/images/spinner.gif') no-repeat;background-size:121px 30px;background-position:center center}
}
.brand{display:inline-block;font-weight:500;background-color:#EC0D8E;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:1px;padding-bottom:1px;padding-right:3px;text-shadow:0 -1px 0 rgba(0,0,0,0.2);text-align:center}
.brand-span{background-color:#914C90;font-weight:500;color:white;text-shadow:1px 1px 1px rgba(11,11,11,.5);-webkit-border-radius:inherit;-moz-border-radius:inherit;border-radius:inherit;padding:3px 4px;border-radius:3px}
.about{float:left;margin-top:-2px;margin-right:20px;font-size:1.2em}
#Dmenu-right{margin-top:7px;margin-right:3px}
#Dmenu-right input{margin-right:9px}
#Dmenu-right input[type="text"], .htmledito-settings select{color:#888;height:26px;border:1px solid #ddd;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}
#Dmenu-right input[type="text"]{width:50px}
#Dmenu-right input:nth-child(n+5){position:relative}
div.htmledito-settings{float:left}
div.htmledito-settings select{font-size:1em}
select, .htmledito-settings select{ font-weight:500;font-size:14px;color:#777}
.topmenubutton:hover{color:#428bca}
.topmenubutton:active{color:#555}
#settingsmenu ul{margin:5px;list-style:none;line-height:2;padding-left:0}
#librarymenu div{margin-top:8px}
#librarymenu a:hover{text-decoration:underline!important}
div.font-sizer{display:block;text-align:center}
div.font-sizer img{margin-right:10px;vertical-align:text-top;opacity:0.5;filter:alpha(opacity=50)}
div.font-sizer img:hover{opacity:1.0;filter:alpha(opacity=100)}
a{text-decoration:none!important;color:#428bca!important}
a:hover{color:blue}
.codetypelabel{padding-right:1.5em}
div.CodeMirror-vscrollbar::-webkit-scrollbar{width:7px;background-color:#FFF}
div.CodeMirror-hscrollbar::-webkit-scrollbar{height:7px;background-color:#FFF}
div.CodeMirror-vscrollbar::-webkit-scrollbar-thumb, div.CodeMirror-hscrollbar::-webkit-scrollbar-thumb{background-color:#bcbcbc;border-radius:10px;border:1px solid #a8a8a8}
div.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover, div.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover{background-color:#bf4649;border:1px solid #333}
div.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:active, div.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:active{background-color:#a6393d;border:1px solid #333}
div.CodeMirror-vscrollbar::-webkit-scrollbar-track, div.CodeMirror-hscrollbar::-webkit-scrollbar-track{border-radius:10px;-webkit-box-shadow:0 0 6px gray inset}
#headermenu{margin-left:10px;float:left;text-align:left;color:#333;}
#headermenu #revisionbox, #headermenu .run-button, #headermenu .generatormenu{float:right}
.generatormenu label { cursor:pointer; display:inline-block; padding:0 5px;margin:0 5px;}
@media only screen and (max-width:570px){
.generatormenu label {height:50px;}
}
.generatormenu svg { height:15px; width:15px; display:inline-block; fill:#428bca; position:relative; top:2px}
.generatormenu .run-button svg { fill:#C59237;}
.generatormenu svg#settingsGearIcon {	fill:#3792ce}
.generatormenu label:hover svg {	fill:#FFF!important}
#Dmenu-right{float:right}
@media only screen and (max-width:520px){#librarymenu{ position:absolute;left:0;/*top:50px*/}
.brand{ font-size:small}
.htmledito-settings span,#runcodebutton/*,#settingsmenubutton*/{ display:none}
.label-right{ font-size:small;right:0}
.logo{ display:block}
.demo-title h1{ display:block;margin-bottom:0;margin-left:0}
.htmledito-settings select{ max-width:90px}
.generatormenu .run-button svg {transform: translateY(15px); -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); }
}
@media only screen and (max-width:570px){.about small{ display:none}
}
@media only screen and (max-width:700px){.about{ margin-left:0 !important}
}
@media screen and (max-width:860px){#Dmenu-right{ display:none}
}
@media screen and (max-width:980px){.demo-title{ width:100%}
.featured{ width:100%}
}
@media only screen and (min-width:1024px){.CodeMirror{ font-size:13.4px}
}
@media screen and (max-width:1200px){.theme-option span{ display:none}
}
.about-demo{padding-left:0.5em;padding-bottom:0.7em;height:50px;background:#F9F5FF;box-shadow:2px 0 2px #eaeaea;border-bottom:1px solid #ddd}
.about-demo h1, p.source{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.about-demo h1{clear:both;position:relative;font-size:13px;padding:5px 5px 0;margin:0;font-weight:normal}
p.source{margin-top:0;font-size:12px;padding:5px;color:#555}
p.source span{color:#428bca}
.font-sizer img{border:0}
.about p span:nth-child(2){font-size:0.8em;margin-left:0.4em;margin-right:0;padding:0.2em;color:#FFF;background:#6f6f6f;border-radius:5px}



footer {
    background: #20232a;
    color: #ccc;
    padding: 20px;
    text-align: center;
}

footer a {
    color:rgb(139, 201, 236);
    text-decoration: none;
}

.socialLinks {
    padding: 10px;
}

.socialLinks a {
    color:rgb(139, 201, 236);
    padding: 0 5px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid transparent;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
}

.socialLinks a:hover {
    color:rgb(117, 188, 230);
    padding: 0 5px;
    border: 1px solid #444;
    box-shadow: #2e51c5 0 0 10px;
}