@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700");
.links-list a.github:after, .links-list a.coffeescript:after, .links-list a.issues:after, .close-button:before, .CodeMirror .CodeMirror-lint-marker-error:before, .CodeMirror .CodeMirror-lint-marker-warning:before, .CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-error:before, .CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-warning:before, .code-toolbar .button.run:before, .code-toolbar .button.link:before, .announcement-banner .icon:before, .announcement-banner .title:before, .announcement-dialog .heading:before, .announcement-dialog a:after, .faux-addressbar:before, .share-button.twitter:before { line-height: 1em; font-family: "Ionicons"; font-weight: normal; font-style: normal; display: inline-block; text-decoration: none; vertical-align: middle; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }

.CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-warning:before { content: "\f101"; }

.announcement-banner .icon:before { content: "\f366"; }

.CodeMirror .CodeMirror-lint-marker-error:before { content: "\f36e"; }

.CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-error:before { content: "\f2d7"; }

.faux-addressbar:before { content: "\f38c"; }

.CodeMirror .CodeMirror-lint-marker-warning:before { content: "\f3bc"; }

.links-list a.coffeescript:after { content: "\f272"; }

.announcement-banner .title:before, .announcement-dialog .heading:before { content: "\f3f9"; }

.close-button:hover:before { content: "\f406"; }

.close-button:before { content: "\f405"; }

.announcement-dialog a:after { content: "\f499"; }

.code-toolbar .button.link:before { content: "\f1fe"; }

.links-list a.issues:after { content: "\f29f"; }

.code-toolbar .button.run:before { content: "\f215"; }

.links-list a.github:after { content: "\f233"; }

.share-button.twitter:before { content: "\f242"; }

@font-face { font-family: "Ionicons"; src: url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?#iefix&v=2.0.1") format("embedded-opentype"), url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }
/* vars */
/* base */
* { box-sizing: border-box; }

html { background: #242930; }

html, input, textarea, td, button { font-family: "source sans pro", sans-serif; line-height: 1.5; font-size: 1em; }

html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body { font-size: 14px; color: #ddd; }

button { cursor: pointer; margin: 0; padding: 0; border: 0; background: transparent; display: inline-block; }

button:active, button:focus { outline: 0; }

a, a:visited { color: #f0f0f0; text-decoration: none; }

a:hover, a:focus { color: white; }

/* mixins */
/* main area */
.code-area { bottom: 0; position: absolute; top: 0; left: 0; right: 200px; }
.code-area .code-toolbar { position: absolute; right: 15px; bottom: -10px; padding: 15px; padding-right: 0; width: 200px; z-index: 10; }

/* heh */
.main-sidebar { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #272b33; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); width: 200px; height: 100%; position: absolute; top: 0; right: 0; padding: 15px; }
.main-sidebar .bottom { position: absolute; bottom: 0; padding: 15px; width: 100%; padding-bottom: 0; left: 0; background: #272b33; }
.main-sidebar h1, .main-sidebar h5 { margin: 0; padding: 0; }
.main-sidebar h1 { font-weight: 300; margin: 0; font-size: 1.5em; text-align: center; border: solid 2px #2f353e; padding: 30px 10px; border-radius: 3px; margin-bottom: 15px; line-height: 1.2em; }
.main-sidebar h5 { font-weight: 400; font-size: 0.9em; color: #888; }
.main-sidebar .section { margin: 15px 0; }

/* logo */
.js2c-logo { display: block; margin-top: 4px; height: 40px; background: url("./logo.svg") center center/85% auto no-repeat; }

/* links list */
.links-list, .links-list li { margin: 0; padding: 0; list-style: none; }
.links-list { margin: 15px 0; }
.links-list a { display: block; padding: 5px 15px; margin-left: -15px; margin-right: -15px; color: #818387; border-radius: 3px; font-size: 0.9em; transition: all 100ms linear; }
.links-list li { border-top: solid 1px rgba(255, 255, 255, 0.02); }
.links-list { border-bottom: solid 1px rgba(255, 255, 255, 0.02); }
.links-list a:hover, .links-list a:focus { background: rgba(237, 118, 105, 0.03); color: white; }
.links-list a:hover:after, .links-list a:focus:after { opacity: 1; }
.links-list a:active { background: rgba(237, 118, 105, 0.1); color: white; }
.links-list a:active:after { opacity: 1; }
.links-list a:after { float: right; font-size: 14px; margin: 2px 5px 0 0; color: #ed7669; }
.links-list a.coffeescript:after { font-size: 16px; }

/* each code box */
.code-box { width: 50%; height: 100%; position: relative; float: left; box-shadow: inset 0 0 0 black, inset -1px 0 0 rgba(0, 0, 0, 0.1), inset -2px 0 1px rgba(0, 0, 0, 0.05); transition: all 100ms linear; }
.code-box.left.focus { box-shadow: inset 0 3px 0 #2ECC71, inset -1px 0 0 rgba(0, 0, 0, 0.1), inset -2px 0 1px rgba(0, 0, 0, 0.05); }
.code-box.right.focus { box-shadow: inset 0 3px 0 #ed7669, inset -1px 0 0 rgba(0, 0, 0, 0.1), inset -2px 0 1px rgba(0, 0, 0, 0.05); }
.code-box.focus h3 strong { color: white; }
.code-box.focus.left h3 { border-bottom: solid 1px #253937; }
.code-box.focus.right h3 { border-bottom: solid 1px #383136; }

/* common */
.code-box:not(.focus) .CodeMirror, .code-box-popup:not(.focus) .CodeMirror { opacity: 0.75; }
.code-box h3, .code-box-popup h3 { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 0; left: 30px; right: 30px; padding: 10px 0; font-size: 0.8em; border-bottom: solid 1px #2b3038; }
.code-box h3 strong, .code-box-popup h3 strong { color: #929498; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; }
.code-box h3 em, .code-box-popup h3 em { font-style: normal; font-weight: 400; color: #505459; margin-left: 10px; }
.code-box .CodeMirror, .code-box-popup .CodeMirror { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 30px; padding-top: 70px; padding-left: 10px; }
.code-box.error .CodeMirror, .code-box-popup.error .CodeMirror { opacity: 0.2; }

/* popup */
.code-box-popup { position: absolute; left: 0; top: 0; width: 50%; height: 100%; padding: 10px; transition: transform 250ms ease, opacity 250ms ease; transform: scale(1) translate(0, 0); opacity: 1; z-index: 10; }
.code-box-popup, .code-box-popup .CodeMirror, .code-box-popup pre { cursor: default; }
.code-box-popup.hide { transform: scale(0.98) translate(10px, 0); pointer-events: none; opacity: 0; }
.code-box-popup:not(.focus):not(.error) .CodeMirror { opacity: 0.9; }
.code-box-popup .container { position: absolute; top: 15px; left: 15px; bottom: 15px; right: 15px; z-index: 5; background: #191d21; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); border-radius: 3px; border: solid 1px #ed7669; border: solid 1px #89504d; }
.code-box-popup h3 { border-bottom: 0; }
.code-box-popup h3 strong { color: #ed7669; }
.code-box-popup h3 em { color: #89504d; }
.code-box-popup .CodeMirror { padding-left: 30px; padding-top: 55px; }

/* close */
.close-button { position: absolute; top: 0; right: 0; width: 64px; height: 100%; background: transparent; border: 0; padding: 0; margin: 0; z-index: 10; cursor: pointer; color: #89504d; transition: color 100ms linear; }
.close-button:hover { color: #ed7669; }
.close-button:before { font-size: 32px; position: absolute; top: 0; left: 0; width: 64px; height: 64px; line-height: 64px; text-align: center; vertical-align: top; }

/* codemirror customization */
.CodeMirror { cursor: text; transition: opacity 100ms linear; font-size: 13px; }
.CodeMirror.CodeMirror.CodeMirror { font-family: menlo, monospace; background: transparent; box-shadow: none; }
.CodeMirror .CodeMirror-gutters.CodeMirror-gutters { background: transparent; border-right: 0; box-shadow: none; }
.CodeMirror .CodeMirror-lint-marker-warning, .CodeMirror .CodeMirror-lint-marker-error, .CodeMirror .CodeMirror-lint-marker-multiple { opacity: 1; }
.CodeMirror .CodeMirror-lint-marker-error { background: transparent; }
.CodeMirror .CodeMirror-lint-marker-error:before { font-size: 12px; position: relative; top: -2px; color: #C0392B; }
.CodeMirror .CodeMirror-lint-marker-warning { background: transparent; }
.CodeMirror .CodeMirror-lint-marker-warning:before { font-size: 12px; position: relative; top: -1px; color: #F1C40F; }
.CodeMirror .CodeMirror-lint-marker-multiple { opacity: 0; }

.CodeMirror-lint-tooltip.CodeMirror-lint-tooltip { font-family: "source sans pro", sans-serif; padding: 8px 15px; background: #111; color: white; border: 0; }
.CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-error, .CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-warning { padding-left: 0; background: none; }
.CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-error:before { font-size: 20px; position: relative; top: -1px; color: #C0392B; margin-right: 12px; }
.CodeMirror-lint-tooltip.CodeMirror-lint-tooltip .CodeMirror-lint-message-warning:before { font-size: 16px; position: relative; top: -1px; color: #F1C40F; margin-right: 12px; }

.CodeMirror-overlayscroll-vertical div, .CodeMirror-overlayscroll-horizontal div { opacity: 0; transition: opacity 100ms linear; background: #3a424d; }

.CodeMirror-focused .CodeMirror-overlayscroll-vertical div, .CodeMirror-focused .CodeMirror-overlayscroll-horizontal div, .CodeMirror:hover .CodeMirror-overlayscroll-vertical div, .CodeMirror:hover .CodeMirror-overlayscroll-horizontal div { opacity: 0.5; }

.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler { background: transparent; }

/* Yep */
.code-toolbar { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: right; }
.code-toolbar .button { margin-bottom: 10px; margin-left: 8px; display: inline-block; width: 80px; background: #242930; box-shadow: 0 0 0 4px #242930; border: solid 1px rgba(255, 255, 255, 0.1); color: #9ea7b5; border-radius: 4px; height: 30px; line-height: 26px; font-size: 0.9em; transition: all 100ms linear; }
.code-toolbar .button:hover { border-color: transparent; background: #454e5b; color: white; }
.code-toolbar .button:active { background: #2ECC71; color: white; transition: all 0 linear; }
.code-toolbar .button:active:before { color: white; }
.code-toolbar .button:before { margin-right: 8px; color: #2ECC71; font-size: 14px; position: relative; top: -1px; }

/* */
.section { color: #65686d; }
.section:not(:first-child):not(.first) { border-top: solid 1px rgba(46, 204, 113, 0.05); padding-top: 15px; }
.section h3 { margin: 0; padding: 0; text-transform: uppercase; font-size: 0.8em; font-weight: normal; line-height: 1.3; letter-spacing: 1px; margin-bottom: 15px; }

/* link */
.code-example { display: block; background: #2f353e; border-bottom: solid 1px rgba(0, 0, 0, 0.2); padding: 5px 10px; color: #ddd; border-radius: 3px; text-align: center; font-size: 0.9em; margin: 10px 0 0 0; }
.code-example:hover, .code-example:focus { background: #3a424d; }
.code-example:active { background: #454e5b; }

/* */
.checkbox-row { transition: all 100ms linear; cursor: pointer; display: block; }
.checkbox-row + .checkbox-row { margin-top: 5px; }
.checkbox-row:hover { color: #ddd; }
.checkbox-row span { text-transform: uppercase; letter-spacing: 1px; font-size: 0.9em; font-weight: normal; }

/* */
.section.section.ad-section:last-child { margin-bottom: 0; }
.section.section.ad-section { font-size: 0.9em; line-height: 1.4; border-top: 0; margin: 0 -15px 15px -15px; padding: 15px; padding-top: 0; min-height: 200px; }
.section.section.ad-section a { display: block; margin: 0; padding: 0; color: #65686d; transition: color 100ms linear; cursor: pointer; }
.section.section.ad-section a:hover { color: #ddd; }
.section.section.ad-section .carbon-img { text-align: left; background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 20px; transition: background-color 100ms linear; }
.section.section.ad-section .carbon-img img { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); border-radius: 2px; background: #242930; height: 100px; width: 130px; }
.section.section.ad-section .carbon-img:hover { background-color: rgba(9, 41, 23, 0.1); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2); }
.section.section.ad-section .carbon-text { margin-top: 10px; color: #a1a3a5; }
.section.section.ad-section .carbon-poweredby { color: #65686d; }
.section.section.ad-section img { display: block; width: 130px; height: 100px; }

.section.share-section:last-child { border-top: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 10px; }

/* announcement */
.announcement-box { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 0; bottom: 0; width: 50%; padding-right: 15px; transition: all 250ms ease; }
.announcement-box.expanded { transform: translate(0, 50px); }
.announcement-box .announcement-dialog { margin: 15px 15px 5px 30px; opacity: 0; pointer-events: none; display: none; transition: opacity 250ms ease; }
.announcement-box .announcement-dialog.visible { display: block; opacity: 1; pointer-events: auto; }

/* the button */
.announcement-banner { width: 100%; display: block; cursor: pointer; text-align: left; }
.announcement-banner { position: relative; z-index: 5; background-color: #242930; background: linear-gradient(to bottom, rgba(36, 41, 48, 0.5), #242930 10%); padding: 15px 30px; color: #65686d; white-space: nowrap; }
.announcement-banner, .announcement-banner .title, .announcement-banner .expando { transition: all 100ms linear; }
.announcement-banner .icon { display: inline-block; vertical-align: middle; width: 32px; height: 32px; line-height: 24px; text-align: center; border: solid 2px rgba(255, 255, 255, 0.1); border-radius: 50%; margin-right: 15px; color: #ed7669; background: transparent; }
.announcement-banner .icon:before { font-size: 20px; }
.announcement-banner .title { color: #818387; font-weight: normal; margin-right: 15px; }
.announcement-banner .title:before { font-size: 16px; margin-right: 10px; }
.announcement-banner .date { margin-right: 15px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; }
.announcement-banner .expando { display: inline-block; opacity: 0; width: 30px; height: 20px; line-height: 16px; border: solid 1px rgba(255, 255, 255, 0.1); border-radius: 3px; color: #65686d; text-align: center; }
.announcement-banner .expando:before { content: "•••"; }
.announcement-banner:hover, .announcement-banner:focus { color: #65686d; }
.announcement-banner:hover .icon, .announcement-banner:focus .icon { border-color: #ed7669; }
.announcement-banner:hover .title, .announcement-banner:focus .title { color: #ddd; }
.announcement-banner:hover .expando, .announcement-banner:focus .expando { color: #ed7669; border-color: #ed7669; }

/* */
.announcement-dialog { position: relative; background: #191d21; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); border-radius: 3px; border: solid 1px #ed7669; border: solid 1px #89504d; padding: 0 15px; padding-right: 64px; height: 50%; color: #65686d; line-height: 1.5; }
.announcement-dialog p, .announcement-dialog h2, .announcement-dialog h3 { margin: 15px 0; }
.announcement-dialog .heading { color: #ddd; font-weight: normal; margin-bottom: 10px; padding: 0; font-size: 1.3em; border-bottom: solid 1px rgba(255, 255, 255, 0.1); padding-bottom: 10px; }
.announcement-dialog .heading + p { margin-top: 0; }
.announcement-dialog .heading:before { font-size: 16px; margin-right: 10px; }
.announcement-dialog .title { font-weight: normal; }
.announcement-dialog .date { font-size: 0.6em; color: #65686d; text-transform: uppercase; letter-spacing: 1px; margin-left: 10px; }
.announcement-dialog a, .announcement-dialog a:visited { color: #bfc0c1; }
.announcement-dialog a:after { font-size: 12px; opacity: 0.5; color: #2ECC71; margin: 0 6px 0 4px; }
.announcement-dialog a:hover, .announcement-dialog a:focus { color: #ddd; }

/* Mobile view: `.mobile-view` - info message for mobile visitors. */
.mobile-view { display: none; }
.mobile-view { max-width: 350px; margin: auto; padding: 15px; text-align: center; color: #65686d; }
.mobile-view .js2c-logo, .mobile-view .code-example { max-width: 250px; margin-left: auto; margin-right: auto; }
.mobile-view p { margin: 30px 0 15px 0; }
.mobile-view b { color: #a1a3a5; border-bottom: solid 1px rgba(255, 255, 255, 0.2); }
.mobile-view iframe { position: relative; left: 20px; }

@media (max-width: 768px) { html, body { height: 100%; }
  body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
  .mobile-view { display: block; }
  .code-area, .main-sidebar { display: none; } }
/* Faux addressbar: `.faux-addressbar` - used to display the site address in the mobile view. */
.faux-addressbar { margin: 20px auto; border: solid 1px rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 10px 15px; text-align: left; font-size: 0.8em; display: block; max-width: 250px; font-family: menlo, monospace; }
.faux-addressbar, .faux-addressbar:visited { color: #ddd; }
.faux-addressbar:before { font-size: 16px; margin-right: 5px; opacity: 0.3; position: relative; top: -1px; color: #ed7669; }

/* Share buttons: `.share-buttons` - where github/tweet buttons are */
.share-buttons > * { vertical-align: top; margin-right: 10px; }

/* Share button: `.share-button` - a tweet button.  a.share-button.twitter | Tweet */
.share-button { display: inline-block; height: 30px; line-height: 30px; padding: 0 10px; background: #15181c; border-radius: 4px; color: #65686d; transition: all 100ms linear; font-size: 0.9em; font-weight: bold; font-family: sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.share-button.twitter:after { display: none; content: none; }
.share-button:before { margin-right: 9px; position: relative; top: -1px; font-size: 16px; }
.share-button.twitter:before { color: dodgerblue; }
.share-button.twitter:focus, .share-button.twitter:hover { background: dodgerblue; }
.share-button.twitter:focus, .share-button.twitter:focus:before, .share-button.twitter:hover, .share-button.twitter:hover:before { color: white; }