--- /dev/null
+*, html, body {
+ -webkit-font-smoothing: antialiased;
+}
+
+html {
+ height: 100%;
+}
+
+/*
+body {
+ font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
+ background: #F6F6F6 url(../img/initializing.png) 50% 50% no-repeat;
+ overflow: hidden;
+ padding: 0;
+ margin: 0;
+ position: relative;
+ font-size: 14px;
+}
+
+@media
+(-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
+ body {
+ background: #F6F6F6 url(../img/initializing@2x.png) 50% 50% no-repeat;
+ background-size: 186px 157px;
+ }
+}
+*/
+
+body .CodeMirror * {
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+#show-result #sidebar,
+#show-result #content {
+ transition: opacity .4s;
+ -moz-transition: opacity .4s;
+ -webkit-transition: opacity .4s;
+ -o-transition: opacity .4s;
+ -ms-transition: opacity .4s;
+ -webkit-transform: translateZ(0);
+ /*-moz-transform: translateZ(0);*/
+ opacity: 0;
+}
+
+
+/* content
+ ================================================================ */
+#content {
+ margin: 14px 15px 0 232px;
+ position: relative;
+ background: #F6F6F6;
+ height: 96%;
+}
+
+/* header
+ ================================================================ */
+#header {
+ height: 44px;
+ background: #3D6AA2;
+}
+
+#branding {
+ float: left;
+ width: 200px;
+ padding: 0 7px 0 10px;
+ font-size: 10px;
+ color: #fff;
+}
+
+#home {
+ display: block;
+ width: 200px;
+ height: 44px;
+ line-height: 44px;
+ background: transparent url(../img/logo.png) no-repeat 0 50%;
+ text-indent: 45px;
+ text-transform: uppercase;
+ color: #fff;
+ text-decoration: none;
+ font-size: 17px;
+ text-indent: -900em;
+}
+
+@media
+(-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
+ #home {
+ background: transparent url(../img/logo@2x.png) no-repeat 0 50%;
+ background-size: 136px 23px;
+ }
+}
+
+/* sidebar
+ ================================================================ */
+#sidebar {
+ padding: 0;
+ margin: 0;
+/* font-size: 11px;*/
+ width: 217px;
+ position: absolute;
+/* top: 45px;
+ left: 0;*/
+ background-color: #fff;
+ color: #444;
+ height: 100%;
+}
+
+ #sidebar h3 {
+ clear: both;
+ padding: 0;
+ font-size: 12px;
+ font-weight: bold;
+ }
+
+ #sidebar input[type='text'],
+ #sidebar input[type='password'],
+ #sidebar textarea {
+ width: 186px;
+ padding: 7px 5px;
+ color: #626262;
+ font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
+ font-size: 1em;
+ background: #F6F6F6;
+ border: solid 1px #C0C0C0;
+ box-shadow: inset 0 1px 2px #e4e4e4;
+ border-radius: 2px;
+ outline: none;
+ }
+
+ #sidebar input[type='text'].warning {
+ border: solid 1px #e58b85;
+ background: #f6e4e3;
+ }
+
+ #sidebar textarea {
+ height: 40px;
+ }
+
+ #sidebar a {
+ color: #4679BD;
+ }
+
+ #sidebar p {
+ margin: 0 0 7px;
+ line-height: 160%;
+ }
+
+ #sidebar select {
+ width: 100%;
+ margin: 3px 0;
+ }
+
+ #sidebar pre,
+ #sidebar code {
+ padding: 0 2px;
+ font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+ font-size: .9em;
+ background: #fffadb;
+ }
+
+ #sidebar .element,
+ #sidebar .text {
+ margin: 0;
+ }
+
+/*
+ #sidebar label {
+ font-size: 11px;
+ }
+*/
+ #sidebar .element strong {
+ font-weight: bold;
+ }
+
+ #sidebar .elementBody {
+ padding-top: 0;
+ border-top-style: none;
+ padding-bottom: 0;
+ border-bottom-style: none;
+ overflow: hidden;
+ opacity: 0;
+ height: 0;
+ }
+
+ #sidebar .ebCont {
+ padding: 4px 8px 8px;
+ }
+
+ #sidebar .ebCont h3 {
+ font-size: 1em;
+ padding: 4px 0 2px;
+ color: #888;
+ border-top: 1px solid #EEEFEE;
+ }
+
+#sidebar .selectPanel {
+ position: relative;
+ height: 54px;
+}
+
+ #sidebar .selectPanel .panelChoice,
+ #sidebar .selectPanel .selectFake {
+ width: 92px;
+ position: absolute;
+ }
+
+ #sidebar .selectPanel .selectFake {
+ color: #999;
+ font-size: 1em;
+ line-height: 20px;
+ }
+
+ .panelChoice.html {
+ top: 0;
+ left: 0;
+ }
+
+ .panelChoice.css {
+ top: 0;
+ right: 0;
+ }
+
+ .panelChoice.js {
+ bottom: 0;
+ left: 0;
+ }
+
+ .panelChoice.result {
+ bottom: 0;
+ right: 0;
+ }
+
+#sidebar #id_title {
+}
+
+#sidebar .toggler {
+ color: #333;
+ height: 36px;
+ line-height: 36px;
+ padding: 0 8px;
+ font-size: 13px;
+ font-weight: normal;
+ position: relative;
+}
+
+ #sidebar .toggler em {
+ color: #AEAEAE;
+ font-style: normal;
+ font-size: .8em;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: #f1f1f1;
+ height: 16px;
+ padding: 0 4px;
+ line-height: 16px;
+ border-radius: 2px;
+ }
+
+
+ #sidebar .toggler.active {
+ color: #333;
+ font-weight: bold;
+ }
+
+ #sidebar .toggler.selected {
+ }
+
+ #sidebar .toggler,
+ #sidebar .element a {
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ #sidebar .element {
+ border-bottom: 1px solid #DFDFDF;
+ }
+
+ #sidebar .element a:hover {
+ text-decoration: underline;
+ }
+
+
+
+#shell_settings li {
+ margin: 5px 0;
+}
+
+#shell_settings li input {
+ margin-right: 3px;
+}
+
+#sidebar-bottom {
+ margin: 10px 0 10px 3px;
+
+}
+
+ #sidebar #share_links label,
+ #share_links_dropdown label {
+ display: block;
+ padding: 0 0 2px;
+ font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
+ font-size: 11px;
+ }
+
+ #sidebar #share_links p,
+ #share_links_dropdown p {
+ margin: 0 0 7px;
+ }
+
+ #share_links_dropdown input {
+ width: 190px;
+ padding: 7px 5px;
+ color: #626262;
+ font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
+ font-size: 1em;
+ border: solid 1px #C0C0C0;
+ background: #F6F6F6;
+ box-shadow: inset 0 1px 2px #e4e4e4;
+ border-radius: 2px;
+ }
+
+.libraryTagAttributes {
+ padding: 5px 0 0;
+}
+
+/* actions */
+#actions {
+ height: 44px;
+ font-size: 13px;
+}
+
+#actions ul.actionCont {
+ float: left;
+}
+
+ #actions ul.right {
+ float: right;
+ }
+
+ #actions li.actionItem {
+ float: left;
+ position: relative;
+ margin-right: 1px;
+ }
+
+ #actions li.actionItem .aiButton,
+ #actions li.actionItem .aiButton span,
+ #actions ul.dropdown li.actionItem a.aiButton {
+ height: 44px;
+ }
+
+ #actions li.actionItem a.aiButton {
+ display: block;
+ outline: none;
+ text-decoration: none;
+ color: #fff;
+ background: #355E95;
+ padding: 0 10px;
+ }
+
+ #actions li.actionItem a.aiButton span {
+ line-height: 44px;
+ margin-right: 6px;
+ font-size: .85em;
+ }
+
+ #actions li.noIcon a.aiButton span {
+ padding: 0 0 0 6px;
+ margin-right: 0;
+ }
+
+ #actions li.actionItem #mobile.aiButton span {
+ margin-right: 0;
+ }
+
+ #actions li.actionItem a.aiButton span.selected {
+ color: #555;
+ background: #fff;
+ }
+
+
+ #actions ul.dropdown .dropdownCont li {
+ line-height: 26px;
+ }
+
+ #actions ul.dropdown .dcWrapper a {
+ color: #4679BD;
+ text-decoration: none;
+ }
+
+ #actions ul.dropdown .dcWrapper a:hover {
+ text-decoration: underline;
+ }
+
+ #actions ul.dropdown .dropdownCont li a {
+ display: block;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ #actions ul.dropdown .dropdownCont li a span {
+ margin: 0 6px;
+ }
+
+ #actions ul.dropdown .dropdownCont li a:hover {
+ background: #eee;
+ }
+
+ #actions ul.collapsed li.actionItem {
+ }
+
+ #actions ul.dropdown li.actionItem a.aiButton {
+ }
+
+ #actions ul.dropdown li.actionItem a.aiButton span {
+ padding: 0 0 0 6px;
+ margin-right: 0;
+ }
+
+ #actions #toggleSidebarUl {
+ position: absolute;
+ top: 0;
+ left: 165px;
+ margin-left: -40px;
+ }
+
+ #actions #toggleSidebar {
+ border-width: 0px;
+ display: none;
+ outline: none;
+ text-decoration: none;
+ text-shadow: 0;
+ color: #ffffff;
+ font-weight: bold;
+ font-size: 12px;
+ background: transparent;
+ }
+
+ #actions #toggleSidebar span {
+ text-indent: -999px;
+ padding: 0 8px;
+ width: 12px;
+ }
+
+ #actions #showjscode {
+ display: none;
+ }
+
+ #actions #collaborate sup {
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 2px;
+ vertical-align: middle;
+ opacity: 0.4;
+ font-size: .7em;
+ padding: 2px 3px;
+ text-transform: uppercase;
+
+ }
+
+/* select link */
+#select_link {
+ background: transparent url(../img/sprites.png) no-repeat 0 -254px;
+ color: #fdfdfd;
+ float: right;
+ width: 229px;
+ height: 27px;
+ margin: 6px 10px 0;
+ font-size: 13px;
+ padding-left: 15px;
+ line-height: 27px;
+}
+
+/* universal dropdown container
+ ================================================================ */
+div.dropdownCont {
+ position: absolute;
+ top: 44px;
+ right: -30px;
+ z-index: 200;
+ opacity: 0;
+ overflow: hidden;
+ padding: 0 30px 30px;
+}
+
+ div.dropdownCont div.dcWrapper {
+ background-color: #fff;
+ width: 200px;
+ padding: 10px;
+ margin: 0;
+ font-size: 13px;
+ box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
+ }
+
+ #actions div.dropdownCont div.dcWrapper ul li a {
+ font-weight: normal;
+ color: #4679BD;
+ padding: 0;
+ line-height: 22px;
+ }
+
+ #actions div.dropdownCont div.dcWrapper ul li a:hover {
+ background: #fff;
+ }
+
+/* editor
+ ================================================================ */
+#content fieldset.column {
+ display: block;
+ height: 100%;
+ width: 50%;
+}
+
+#content .window {
+ width: 100%;
+ border: 1px solid #C0C0C0;
+ box-shadow: inset 0 1px 2px #e4e4e4;
+}
+
+ #content .top {
+ height: 25%;
+ position: absolute;
+ top: -6px;
+ }
+
+ #content .bottom {
+ height: 75%;
+ position: absolute;
+ bottom: -6px;
+ }
+
+ #content .right {
+ position: absolute;
+ right: -5px;
+ }
+
+ #content .left {
+ position: absolute;
+ left: -5px;
+ }
+
+ #handler_vertical {
+ width: 8px;
+ height: 100%;
+ padding: 5px 0;
+ cursor: col-resize;
+ position: absolute;
+ top: -5px;
+ left: 0;
+ background: url(../img/handle-v.png) 3px 50% no-repeat;
+
+ }
+
+ .handler_horizontal {
+ width: 100%;
+ height: 8px;
+ padding: 0 1px;
+ cursor: row-resize;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: url(../img/handle-h.png) 50% 3px no-repeat;
+ }
+
+ #content textarea,
+ #result iframe,
+ body.editbox {
+ min-width: 100px;
+ width: 100%;
+ height: 100%;
+ line-height: 15px;
+ font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+ font-size: 12px;
+ }
+
+ /* editors */
+ #content textarea,
+ #content iframe {
+ background: #fff;
+ box-shadow: inset 0 1px 3px #E4E4E4;
+ border: 0 !important;
+ }
+
+ /* resizing sets display to inline, this overrides */
+ #content textarea {
+ display: block;
+ }
+
+ .heyoffline_overlay {
+ z-index: 100;
+ }
+
+ /* editor labels */
+ .window_label {
+ border: solid 1px #F1F1F1;
+ background: #fff;
+ display: inline-block;
+ height: 22px;
+ padding: 0 6px;
+ line-height: 22px;
+ position: absolute;
+ top: 7px;
+ right: 6px;
+ text-align: center;
+ font-size: 12px;
+ color: #777;
+ border-radius: 1px;
+ z-index: 30;
+ }
+
+ /* fullscreen */
+ .fullscreen {
+ background: transparent url(../img/sprites.png) no-repeat -301px -320px;
+ display: block;
+ width: 31px;
+ height: 31px;
+ text-indent: -9999px;
+ z-index: 100;
+ position: absolute;
+ bottom: 6px;
+ right: 14px;
+ cursor: pointer;
+ }
+
+ /* we want editors to fill up all the space available */
+ .CodeMirror-wrapping {
+ width: 100%;
+ height: 100%;
+ }
+
+ /* shim to cover iframes when dragging */
+ .shim {
+ display: none;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+/* external resources
+ ================================================================ */
+#sidebar #external-resources-form {
+ height: 30px;
+}
+
+ /* place resource button next to input */
+ #sidebar #external-resources-form #external_resource {
+ padding-right: 0px;
+ width: 160px;
+ float: left;
+ height: 14px;
+ }
+
+ /* custom style inputs/buttons */
+ #sidebar #external-resources-form .submit,
+ #sidebar .submit {
+ border: none;
+ border: solid 1px #EDEDED;
+ float: right;
+ height: 28px;
+ width: 28px;
+ padding: 0;
+ line-height: 31px;
+ text-align: center;
+ outline: none;
+ color: #333;
+ }
+
+ #sidebar #external-resources-form .submit:hover,
+ #sidebar .submit:hover {
+ text-decoration: none;
+ }
+
+ #sidebar .commonButton {
+ width: 70%;
+ float: none;
+ display: block;
+ line-height: 28px;
+ text-align: center;
+ color: #555;
+ font-size: 12px;
+ margin-top: 5px;
+ }
+
+
+/* share socially
+ ================================================================ */
+#share-social {
+
+}
+
+ #share-social li {
+ }
+
+ #actions .actionCont .dropdownCont #share-social a {
+ text-decoration: none;
+ margin-left: 5px;
+ display: inline;
+ }
+
+ #actions .actionCont .dropdownCont #share-social a:hover {
+ text-decoration: underline;
+ }
+
+ #share-social span {
+ color: #ccc;
+ }
+
+/* license text
+ ================================================================ */
+#documentation-info {
+ margin: 20px 8px 0;
+ color: #9A9A9A;
+}
+
+ #documentation-info p {
+ font-size: 1em;
+ }
+
+ #documentation-info a {
+ text-decoration: none;
+ }
+
+ #documentation-info a:hover {
+ text-decoration: underline;
+ }
+
+
+/* style the external resources list
+ ================================================================ */
+#sidebar #external_resources_list {
+}
+
+ #sidebar #external_resources_list li {
+ padding: 5px 0 3px;
+ position: relative;
+ }
+
+ #sidebar #external_resources_list li .filename {
+ }
+
+ #sidebar #external_resources_list li .remove {
+ position: absolute;
+ top: 7px;
+ right: 0;
+ display: block;
+ text-indent: -9000em;
+ width: 10px;
+ height: 10px;
+ background: url(../img/remove-resources.png) -10px 50% no-repeat;
+ }
+
+ #sidebar #external_resources_list li a.remove:hover {
+ background: url(../img/remove-resources.png) 0 50% no-repeat;
+ }
+
+ #add_external_resource {
+ }
+
+/* info box
+ ================================================================ */
+#info {
+ background: #FEFFE5;
+ padding: 7px;
+ border: 1px solid #EBBA95;
+ font-size: 11px;
+ color: #C98657;
+ margin: 7px 8px 10px;
+ line-height: 130%;
+ text-shadow: 0 1px 0 #FFF7F4;
+ position: relative;
+ display: none;
+
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+}
+
+ #info #info-close {
+ width: 10px;
+ height: 10px;
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ text-indent: -900em;
+ display: block;
+ background: url(../img/info-close.png);
+ overflow: hidden;
+ }
+
+ #info a {
+ font-weight: bold;
+ color: #C98657;
+ }
+
+/* modal window
+ ================================================================ */
+#modal {
+ display: none;
+}
+
+.disqus_thread {
+ width: 600px;
+}
+
+ .disqus_thread .modalBody {
+ max-height: 500px;
+ min-height: 250px;
+ overflow: auto;
+ margin-bottom: 0 !important;
+ }
+
+.modal_jslint {
+ width: 500px;
+}
+
+.modal_kbd {
+ width: 500px;
+}
+
+.modal_confirmation {
+ width: 400px;
+}
+
+ .modal_jslint code,
+ .modal_Coffee .error,
+ .modal_jslint .evidence {
+ padding: 0 2px;
+ font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+ font-size: .9em;
+ background: #fffadb;
+ }
+
+ .modal_Coffee .error {
+ padding: 5px 10px;
+ }
+
+ .modal_jslint #errors {
+
+ }
+
+ .modal_jslint #errors p {
+ margin: 2px 0;
+ }
+
+ .modal_jslint p.evidence {
+ display: block;
+ margin-bottom: 10px !important;
+ }
+
+
+.modalWrap {
+ padding: 10px;
+ background: #fff;
+ z-index: 300;
+ font-size: 1em;
+ transition-duration: 0.2s;
+ transition-property: webkit-transform opacity;
+ transform: scale(0.94);
+
+ -webkit-transition-duration: 0.2s;
+ -webkit-transition-property: webkit-transform opacity;
+ -webkit-transform: scale(0.94);
+
+ -moz-transition-duration: 0.2s;
+ -moz-transition-property: moz-transform opacity;
+ -moz-transform: scale(0.94);
+
+ -o-transition-duration: 0.2s;
+ -o-transition-property: o-transform opacity;
+ -o-transform: scale(0.94);
+
+ -ms-transition-duration: 0.2s;
+ -ms-transition-property: ms-transform opacity;
+ -ms-transform: scale(0.94);
+
+ -webkit-transform: translateZ(0);
+ /*-moz-transform: translateZ(0);*/
+
+ opacity: 0;
+ box-shadow: 0 5px 50px rgba(0, 0, 0, 0.3);
+ border: solid 1px #ACB3B9;
+}
+
+.modalWrap.show {
+ opacity: 1;
+ transform: scale(1.0);
+ -webkit-transform: scale(1.0);
+ -moz-transform: scale(1.0);
+ -o-transform: scale(1.0);
+ -ms-transform: scale(1.0);
+}
+
+ .modalWrap .modalHeading {
+ position: relative;
+ height: 50px;
+ }
+
+ .modalWrap .modalHeading .close {
+ background: url(../img/modal/close.png) 0 0 no-repeat;
+ width: 15px;
+ height: 15px;
+ display: block;
+ position: absolute;
+ top: 8px;
+ right: 0;
+ text-indent: -9000em;
+ cursor: pointer;
+ }
+
+ .modalWrap .modalHeading h3 {
+ font-size: 1.6em;
+ padding: 6px 0;
+ cursor: default;
+ }
+
+ .modalWrap .modalBody {
+ position: relative;
+ }
+
+ .modalWrap .modalBody strong {
+ font-weight: bold;
+ }
+
+legend {
+ display: none;
+}
+
+.keyActions {
+ position: absolute;
+ bottom: 40px;
+ left: 8px;
+ display: block;
+ padding: 0 0 0 30px;
+ text-decoration: none;
+}
+
+ .keyActions:before {
+ content: '?';
+ position: absolute;
+ top: -1px;
+ left: 0;
+ display: block;
+ border: solid 1px #ABABAB;
+ padding: 0 8px;
+ border-radius: 2px;
+ font-family: 'Lucida Grande';
+ font-size: 10px;
+ color: #999;
+ }
+
+.keyActions:hover {
+ text-decoration: underline;
+}
+
+#kbd {
+}
+
+ #kbd li {
+ padding: 10px 0;
+ border-bottom: solid 1px #E6E6E6;
+ }
+
+ #kbd li:last-child {
+ padding: 10px 0 0;
+ border-bottom: none;
+ }
+
+ #kbd kbd {
+ border: solid 1px #ABABAB;
+ font-size: 10px;
+ font-family: 'Lucida Grande';
+ padding: 2px 3px;
+ border-radius: 3px;
+ color: #999;
+ }
+
+ #kbd span {
+ padding-left: 10px;
+ }
+
+.warningTooltip {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background: rgba(255, 234, 147, 0.9);
+ font-size: .85em;
+ line-height: 1.5em;
+ color: #6c5517;
+ width: 100%;
+ z-index: 100;
+}
+
+ .warningTooltip code,
+ .warningTooltip strong {
+ font-weight: bold;
+ }
+
+ .warningTooltip li {
+ border-top: solid 1px #eddf97;
+ padding: 5px 8px;
+ }
+
+.gittip {
+ margin: 10px;
+ color: #949494;
+}
+
+.gittip iframe {
+ border: 0;
+ margin: 0 0 0 5px;
+ padding: 0;
+ opacity: 0.6;
+ vertical-align: middle;
+}