abbr,address,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h5,h6,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}
h1,h2,h3{padding:0}
h4{margin:0;font-size:16px}
article{margin:0;padding:20px!important;clear:both}
article,h1,h2,h3,h4,header,nav{border:0;outline:0;background:0 0}
article,header,nav{font-size:100%}
article,h1,h2,h3,h4,header{vertical-align:baseline}
header{margin:0 0 10px;border-bottom:2px solid #e1e1e4}
nav{margin:0}
body{line-height:1}
h1{font-size:25px}
h2{font-size:21px}
article h2,h3{font-weight:700}
h3{font-size:18px}
.aligncenter{text-align:center}
a.thumb img,article,aside,details,figcaption,figure,footer,header,hgroup,menu,pre code.hcj,section,span.clearboth{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:none}
a,h4,header,hr,nav{padding:0}
a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}
a.thumb,article strong,ins{text-decoration:none}
ins,mark{background-color:#ff9}
.clickables a.highlighted:hover,.hcj,ins{color:#000}
article pre{display:inline-block;vertical-align:middle}
pre code.hcj{overflow-x:auto;padding:2px 2em}
code.hcj{padding:3px 5px}
.hcj{background:#fff}
.hcj-comment,.hcj-quote{color:#888;font-style:italic}
.hcj-doctag,.hcj-formula,.hcj-keyword{color:#a11}
.hcj-deletion,.hcj-section,.hcj-selector-tag,.hcj-subst{color:#219}
.hcj-literal{color:#0ff}
.hcj-addition,.hcj-attribute,.hcj-meta .hcj-string,.hcj-regexp{color:#170}
.hcj-attr,.hcj-selector-attr,.hcj-selector-class,.hcj-selector-pseudo,.hcj-template-variable,.hcj-type,.hcj-variable{color:#00c}
.hcj-bullet,.hcj-link,.hcj-selector-id,.hcj-symbol,.hcj-title{color:#219}
.hcj-meta{color:#000;font-weight:700}
.hcj-name{color:#170}
.hcj-number,.hcj-string{color:#a11}
.hcj-built_in,.hcj-class .hcj-title,.hcj-title.class_{color:#170}
.hcj-emphasis,mark{font-style:italic}
.hcj-strong,article strong{font-weight:700}
.hcj-link{text-decoration:underline}
.becomes{display:inline-block;font-weight:700;font-size:30px;color:#fc4842;text-shadow:1px 1px 3px #000}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}
.becomes,input,select{vertical-align:middle}
h1,h2,h3{color:#464655;margin:0 0 20px;text-align:left}
body,html{background-color:#fff;color:#464655;font-family:"Open Sans",sans-serif}
img{max-width:100%}
.center{max-width:1550px;margin:auto;padding:5px 20px;text-align:center;overflow-x:hidden}
.inline{vertical-align:middle;display:inline-block}
a.thumb{margin-bottom:75px;max-width:300px}
a.thumb img{opacity:.8}
.pageFooter,a.thumb span{background:#464655;color:#fff}
a.thumb span{display:block;font-weight:700;line-height:2em;font-size:.9em;text-align:center}
a.thumb:hover img{opacity:1}
a.thumb,nav,nav ul li{display:inline-block}
nav{vertical-align:middle}
nav ul li a,nav ul li a:link{padding:2px 10px;font-size:15px;text-decoration:none;font-weight:700;border-radius:5px;background:#464655;color:#fff!important}
#logo span,nav ul li a:hover{background:#fc4842}
nav ul li{margin:10px}
#pageContent{margin:auto;border:0}
article h2{margin-bottom:12px}
article ol,article p,article ul{font-size:1.1em;line-height:1.4em}
article ol,article p{margin-bottom:26px}
article ul{margin:0 0 26px 30px}
article ul li{margin-bottom:10px}
.pageFooter{margin:auto;clear:both;padding:10px 50px 10px 5px;text-align:right}
.pageFooter p{padding:5px 20px}
.pageFooter a{color:#fff!important}
aside>div{margin:10px auto;background:#dbe8ed;min-height:100px}
#logo span{font-size:1.2em;display:inline-block;line-height:1.2em;padding:3px 10px;border-radius:6px;color:#fff;margin-right:7px}
#logo,.clickables a em,.clickables a span,.inlineblock,.mainEditOptions svg{display:inline-block;vertical-align:middle}
.inlineblock{vertical-align:top;text-align:left;margin:5px 20px 40px}
.clickables a.highlighted{background:#fc4842;color:#fff}
.clickables a.highlighted span{border-left-color:#000}
#logo,.clickables a{font-weight:700;color:#464655}
.clickables a.highlighed{background:green}
#logo{font-size:24px;margin-right:14px;line-height:24px;margin-bottom:0}
#scrollTop{width:32px;line-height:32px;overflow:hidden;border-radius:8px 8px 0 0;z-index:999;display:none;cursor:pointer;-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg);-o-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);position:fixed;bottom:10px;right:0;background-color:#464655;color:#fff;text-align:center;font-size:23px;text-decoration:none}
.sourceCodeWrap.inlineblock{width:800px}
.CodeMirror{height:800px!important}
.sourceCodeWrap.clickables{max-width:600px}
aside.inlineblock{max-width:300px}
.clearboth{clear:both}
#scrollTop:hover{background-color:#fc4842}
.CodeMirror-code{font-size:14px}
.wrapEditorz{margin-bottom:30px}
body>section{margin:auto;padding:30px 0;border-bottom:1px solid #999;color:#333}
.clickables a{display:block;line-height:1.6em;cursor:pointer;margin-bottom:5px}
.clickables a em{margin-top:-3px;margin-right:5px;min-width:33px;text-align:center;font-size:1.4em;font-style:normal}
.pushRght{padding-left:40px}
.clickables a:hover{background:#ffdad9}
.clickables a span{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:14px solid #fc4842;margin:0 6px}
.clickables a:hover span{border-left:14px solid #464655}
#cssEditorInputField{border:2px solid #e1e1e4}
.mainEditOptions a{color:#464655}
.mainEditOptions a:hover{color:#a21313}
.sourceBiggerFont:hover,.sourceSmallerFont:hover{background:#a21313}
.mainEditOptions{background:#e1e1e4;user-select:none;font-weight:700;position:relative}
#pleaseWaitWorking{position:absolute;display:none;right:-50px;font-size:2em}
.mainEditOptions svg{width:18px}
.mainEditOptions .grey svg{width:22px}
.mainEditOptions>a,.mainEditOptions>div,a.grey{display:inline-block;cursor:pointer;vertical-align:middle}
.mainEditOptions>a,.mainEditOptions>div{margin:5px 7px;height:26px;line-height:34px;position:relative}
#copyText{display:none}
a.grey{background:#464655;font-weight:700;padding:6px 13px;float:right;font-size:18px;line-height:25px;border-radius:8px;text-shadow:1px 1px 3px #000}
a.grey svg{fill:#fff}
a.grey,a.grey:hover{color:#fff}
a.grey:hover svg{fill:#fc4842}
.mainEditOptions>a.green{background:#2bad5f!important}
.mainEditOptions>a.green svg{fill:#fff!important}
.mainEditOptions>a.red{background:#fc4842!important}
.mainEditOptions>a.red:hover{background:#464655!important}
a.red svg{fill:#464655}
.mainEditOptions>a.red:hover svg{fill:#fc4842!important}
#clipBord{opacity:.7}
.textBiggerSmaller{padding-left:10px}
.textBiggerSmaller span,mark{font-weight:700;color:#000}
.textBiggerSmaller span:nth-child(1){font-size:13px}
.textBiggerSmaller span:nth-child(2){font-size:15px}
.textBiggerSmaller span:nth-child(3){font-size:18px}
a#demoLoad{margin-left:0}
#inputLength{min-width:45px;margin-right:0}
#wrapLengths{position:relative}
#inputLengthDifference{position:absolute;right:10px;top:-40px;font-size:20px;text-align:right;font-weight:700;color:#0b830b;background:#fff;padding:2px 10px}
#inputLengthDifference.red{color:#bd1010}
.sourceBiggerFont,.sourceSmallerFont{display:inline-block;border:2px solid #464655;width:16px;text-align:center;color:#464655!important;font-size:20px;border-radius:5px;line-height:16px}
a.sourceBiggerFont:hover,a.sourceSmallerFont:hover{background:#fff}
@media screen and (max-width:1210px){.sourceCodeWrap.inlineblock{width:610px}
.mainEditOptions svg{width:16px}
.mainEditOptions>a,.mainEditOptions>div{margin:5px 4px;font-size:13px}
}
@media screen and (max-width:1150px){article{max-width:100%;width:500px}
}
@media screen and (max-width:1030px){.mainEditOptions>a,.mainEditOptions>div{margin:5px 2px}
a.grey{padding:6px 9px}
.sourceCodeWrap.inlineblock{width:500px}
.inlineblock{margin-left:10px;margin-right:10px}
.textBiggerSmaller{display:none!important}
}
@media screen and (max-width:580px){.sourceCodeWrap.inlineblock{width:96%}
.inlineblock{margin:5px 3px 40px}
.center{padding:5px 0}
.mainEditOptions>a,.mainEditOptions>div{font-size:14px}
.mainEditOptions svg{display:none}
.mainEditOptions #compressButton svg,.mainEditOptions #convertButton svg{display:inline-block}
nav ul li{margin:7px 2px}
#copyText{display:none!important}
}
@media screen and (max-width:420px){#inputLength{display:none}
}
@media screen and (max-width:350px){#compressButton{display:none!important}
}
@media screen and (max-height:950px){.CodeMirror{height:700px!important}
}
@media screen and (max-height:850px){.CodeMirror{height:600px!important}
}
@media screen and (max-height:750px){.CodeMirror{height:500px!important}
}
@media screen and (max-height:650px){.CodeMirror{height:400px!important}
.sourceCodeWrap.inlineblock{position:relative}
.mainEditOptions{position:absolute;top:0;left:0;right:0}
#cssEditorInputField{margin-top:40px}
}