/*
███████ ██████  ██ ████████  ██████  ██████
██      ██   ██ ██    ██    ██    ██ ██   ██
█████   ██   ██ ██    ██    ██    ██ ██████
██      ██   ██ ██    ██    ██    ██ ██   ██
███████ ██████  ██    ██     ██████  ██   ██
2016 ~ Mark Hillard | (mark@)markhillard.com
*/


/* CSS Reset
================================================== */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:105%;
margin:0;
padding:0;
vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

body { line-height:1; }
ul,ol { list-style:none; }
blockquote,q { quotes:none; }
blockquote::before,blockquote::after,q::before,q::after { content:none; }
table { border-collapse:collapse; border-spacing:0; }

button,input:not([type="checkbox"],[type="radio"]),textarea { appearance:none; background:none; }
button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; }

* { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; }

*,*::before,*::after { box-sizing:border-box; }
*,*:focus { outline:none; }



/* Global Page Styles
================================================== */

html,body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
font-family:"Source Code Pro", monospace;
font-size:100%;
font-weight:400;
height:100%;
line-height:1.45;
overflow:hidden;
}

/* Highlighting */
::selection { background-color:#282a36; color:#fff; }



/* CodeMirror Overrides
================================================== */

.CodeMirror {
font-family:"Source Code Pro", monospace;
font-size:.9rem;
height:100%;
}

.CodeMirror-lines {
padding:0;
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color:transparent;
}

.CodeMirror-overlayscroll-horizontal {
height:10px;
transition:height ease 300ms;
}

.CodeMirror-overlayscroll-horizontal:hover,
.CodeMirror-overlayscroll-horizontal.hold {
height:15px;
}

.CodeMirror-overlayscroll-vertical {
transition:width ease 300ms;
width:10px;
}

.CodeMirror-overlayscroll-vertical:hover,
.CodeMirror-overlayscroll-vertical.hold {
width:15px;
}

.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
background:rgba(255,255,255,.05);
border-radius:0;
}

.CodeMirror-matchingtag,
.CodeMirror-matchingbracket {
background:none;
border-bottom:1px solid #fff;
text-decoration:none !important;
}

.CodeMirror-guttermarker-subtle {
color:#6d8a88;
}

.CodeMirror-foldmarker {
color:#fff;
text-shadow:none;
}



/* jQuery UI Overrides
================================================== */

.ui-resizable-e {
background-color:#0e0f13;
cursor:col-resize !important;
right:-16px !important;
width:16px !important;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .ui-resizable-handle {
    display:none !important;
    }
}



/* Utility Bar
================================================== */

#debug-pane {
background-color:#000;
padding: 5px;
display:flex;
flex-direction:row;
color: #fff;
}

#utils {
background-color:#244f7c;
border-bottom:16px solid #003467;
display:flex;
flex-direction:row;
}

#utils > div {
font-size:0;
}

.logo {
width:43px;
}

.logo img {
display:block;
height:auto;
width:100%;
}

.code-tools {
position:absolute;
left:150px;
}

.code-tools span .fa {
font-weight:400;
}

.code-swap span,
.code-tools span {
background-color:#244f7c;
border-right:1px solid #0e0f13;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:1rem;
font-weight:700;
height:48px;
padding:10px 15px;
text-decoration:none;
}

.level-done {
    background-color:green !important;
}

.code-swap span.code-swap-html,
.code-tools span.toggle-lineWrapping {
border-left:1px solid #0e0f13;
}

.code-swap span:hover,
.code-tools span:hover {
background-color:#003467;
}

.code-swap span.active,
.code-tools span.active,
.code-tools span:active {
background-color:#6d8a88 !important;
color:#333540;
}

.code-swap span.toggle-view,
.code-swap span.toggle-preview,
.code-tools span.toggle-tools {
display:none;
}

/* Custom */
@media only screen and (max-width:1181px) {
    .code-tools span {
    border-left:1px solid #0e0f13;
    display:block;
    height:auto;
    position:relative;
    text-align:right;
    z-index:100;
    }
    
    .code-tools span:last-child {
    border-bottom:1px solid #0e0f13;
    }
    
    .code-tools span.toggle-tools {
    display:block;
    }
    
    .code-tools span.toggle-tools ~ span {
    display:none;
    }
    
    .code-tools span.toggle-tools.active,
    .code-tools span.toggle-tools:active {
    background-color:#0e0f13 !important;
    color:#6d8a88;
    }
    
    .code-tools span.toggle-tools.active ~ span {
    border-top:1px solid #0e0f13;
    display:block;
    }
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .logo {
    position:absolute;
    }
    
    .code-tools {
    right:0;
    }
    
    .code-tools span {
    border-right:none;
    }
    
    .code-swap {
    left:43px;
    position:absolute;
    }
    
    .code-swap span {
    border-left:1px solid #0e0f13;
    display:block;
    height:auto;
    position:relative;
    text-align:left;
    z-index:100;
    }
    
    .code-swap span:last-child {
    border-bottom:1px solid #0e0f13;
    }
    
    .code-swap span.toggle-view,
    .code-swap span.toggle-preview {
    display:block;
    }
    
    .code-swap span.toggle-view ~ span {
    display:none;
    }
    
    .code-swap span.toggle-view.enabled,
    .code-swap span.toggle-view:active {
    background-color:#0e0f13 !important;
    color:#6d8a88;
    }
    
    .code-swap span.toggle-view.enabled ~ span {
    border-top:1px solid #0e0f13;
    display:block !important;
    }
}

/* IE10+ */
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .toggle-lineWrapping {
    padding:11px 15px 9px !important;
    }
}

.toggle-lineWrapping.css,
.toggle-lineWrapping.js {
position:absolute;
visibility:hidden;
}

.reset-editor:active,
.clear-editor:active,
.run-script:active {
background-color:#244f7c;
color:#333540;
}



/* cdnjs Search
================================================== */

.cdnjs-search {
position:absolute;
right:0;
}

.cdnjs-search .query {
appearance:none;
background:none;
background-color:#6d8a88;
border:none;
box-shadow:0 1px 0 #0e0f13;
color:#282a36;
display:block;
font-family:"Source Code Pro", monospace;
font-size:1rem;
font-weight:700;
height:43px;
padding:11px 15px;
width:260px;
}

/* Placeholder Styles */
.cdnjs-search .query::-moz-placeholder { color:#48565c; opacity:1; }
.cdnjs-search .query:-ms-input-placeholder { color:#48565c; opacity:1; }
.cdnjs-search .query::-webkit-input-placeholder { color:#48565c; opacity:1; }

.tt-hint {
color:#48565c !important;
}

.tt-menu {
margin-top:1px;
text-align:left;
width:100%;
}

.tt-menu .no-match {
background-color:#6d8a88;
color:#282a36;
font-size:1rem;
padding:.75rem;
}

.tt-suggestion {
background-color:#6d8a88;
color:#282a36;
cursor:pointer;
font-size:1rem;
font-weight:700;
padding:11px 15px;
}

.tt-cursor,
.tt-suggestion:hover {
background-color:#0e0f13;
color:#6d8a88;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    .cdnjs-search {
    border-top:1px solid #0e0f13;
    margin-top:43px;
    position:relative;
    width:100%;
    }
    
    .cdnjs-search .query {
    width:100vw;
    }
}



/* Editor
================================================== */

#editor {
display:flex;
flex-direction:row;
height:calc(100vh - 99px);
}

#preview {
height:100%;
margin-left:16px;
width:calc(100% - 16px);
}

.preview-width {
background-color:#0e0f13;
bottom:0;
color:#fff;
display:none;
font-size:0.8rem;
left:16px;
margin:0 auto;
padding:5px 10px 5px 5px;
position:absolute;
}

.code-pane {
width:calc(50% - 16px);
}

.preview-pane {
height:calc(100vh - 99px);
position:relative;
width:calc(50% + 16px);
}

[class^="code-pane-"] {
height:calc(100vh - 99px);
position:relative;
}

/* Mobile & Tablet */
@media only screen and (max-width:800px) {
    #editor,
    #preview,
    .code-pane,
    .preview-pane,
    [class^="code-pane-"] {
    height:calc(100vh - 103px);
    margin-left:0 !important;
    width:100% !important;
    width:100vw !important;
    }
}