Browse Source

helios:
- use less instead of plain css
- add a #helios id to body

Nicolas Petton 11 years ago
parent
commit
b3309550e9
3 changed files with 1577 additions and 842 deletions
  1. 723 841
      css/helios.css
  2. 853 0
      css/helios.less
  3. 1 1
      helios.html

+ 723 - 841
css/helios.css

@@ -1,850 +1,732 @@
 body {
-    font-size: 11px;
-    font-family: "Lucida Grande", helvetica, arial, sans;
-    background: #eee;
+  font-size: 11px;
+  font-family: "Lucida Grande", helvetica, arial, sans;
+  background: #eee;
 }
-
 .clearfix:after {
-	content: ".";
-	display: block;
-	clear: both;
-	visibility: hidden;
-	line-height: 0;
-	height: 0;
-}
- 
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
 .clearfix {
-	display: inline-block;
+  display: inline-block;
 }
- 
 html[xmlns] .clearfix {
-	display: block;
+  display: block;
 }
- 
 * html .clearfix {
-	height: 1%;
-}
-
-a {
-    cursor: pointer;
-}
-
-i {
-    opacity: 0.8;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-    margin-top: 0;
-}
-
-.CodeMirror {
-    position: absolute;
-    overflow: hidden;
-    height: 100%;
-    width: 100%;
-    background: #fff;
-}
-
-.CodeMirror-hints {
-    border-radius: 0;
-    font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-    font-size: 11px;
-    line-height: 1em;
-    padding: 0;
-    max-height: 120px;
-}
-
-.CodeMirror-hint {
-    border-radius: 0;
-    padding: 0 10px;
-}
-
-.CodeMirror pre {
-    font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-    line-height: 16px;
-}
-
-.CodeMirror-gutter.stops {
-    width: 20px;
-}
-
-.CodeMirror .CodeMirror-gutter-elt {
-    line-height: 1.5em;
-}
-
-.CodeMirror .highlighted.CodeMirror-linebackground {
-    background-color: #ffffaa;
-}
-
-.CodeMirror .CodeMirror-gutter-elt .stop {
-    width: 16px;
-    height: 16px;
-    background: url('../images/arrowRight.png');
-    margin-left: 2px;
-}
-
-.state {
-    position: absolute;
-    right: 15px;
-    top: 10px;
-    width: 16px;
-    height: 16px;
-}
-
-.state.modified {
-    background: transparent url('../images/modified.png') 50% 50% no-repeat;
-}
-
-.buttons_bar {
-    position: absolute;
-    bottom: 8px;
-    right: 20px;
-    z-index: 2;
-}
-
-.btn, .btn-group > .btn, .btn-group > .dropdown-menu {
-    padding: 2px 8px;
-}
-
-.navbar-fixed-top {
-    font-size: 11px;
-    line-height: 16px;
-}
-
-.navbar-fixed-top a span {
-    padding-left: 18px;
-    background-position: center left;
-    background-repeat: no-repeat;
-    background-position: 0px -1px;
-}
-
-.navbar-fixed-top i.close {
-    width: 14px;
-    height: 16px;
-    margin-left: 4px;
-    background-image: url('../images/close.gif');
-    margin-right: 0;
-    background-position: center left;
-    margin-top: 2px;
-}
-
-.navbar-fixed-top a span.references {
-    background-image: url('../images/references.png')
-}
-
-.navbar-fixed-top a span.browser {
-    background-image: url('../images/browser.png')
-}
-
-.navbar-fixed-top a span.sunit {
-    background-image: url('../images/sunit.png')
-}
-
-.navbar-fixed-top a span.workspace {
-    background-image: url('../images/workspace.png')
-}
-
-.navbar-fixed-top a span.debugger {
-    background-image: url('../images/debugger.png')
-}
-.navbar-fixed-top a span.inspector {
-    background-image: url('../images/inspector.png')
-}
-
-
-.navbar-fixed-top .navbar-inner {
-    min-height: 20px;
-    background-color: #dbdbdb;
-    border-bottom: 1px solid #666;
-    background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
-    background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
-    background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
-    background-image: -owebkit-linear-gradient(top, #dfdfdf, #d0d0d0);
-    box-shadow: 0 0 0;
-}
-
-
-.navbar .nav > li {
-    line-height: 16px;
-}
-
-
-.navbar .nav > li > a {
-    line-height: 22px;
-    padding: 0px 8px;
-    font-size: 11px;
-    color: #444;
-    text-shadow: 0 1px 0 #ddd;
-}
-
-.nav > li > a:hover {
-    background: transparent;
-}
-
-.navbar .nav > .active > a, 
-.navbar .nav > .active > a:hover, 
-.navbar .nav > .active > a:focus {
-    background-color: #bababa;
-    background-image: linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    background-image: -webkit-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    background-image: -moz-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    background-image: -o-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    text-shadow: #ddd 0px 1px 0px; 
-    color: #222;
-}
-
-.navbar-fixed-top i {
-    opacity: 0.4;
-    margin-right: 5px;
-    height: 12px;
-    margin-top: 0;
-}
-
-.navbar-fixed-top .active i {
-    opacity: 0.6;
-}
-
-.nav-pills.nav-stacked > li > a {
-    border-radius: 0;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    padding: 2px 2px 1px 4px;
-    margin: 0;
-    font-size: 11px;
-    color: #111;
-    white-space: nowrap;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-    margin-right: 2px;
-}
-
-.dropdown-menu {
-    border-radius: 0;
-    padding: 0;
-    margin: 3px;
-}
-
-.nav-pills > .active > a {
-    background-color: #ddd;
-    color: #fff;
-    text-shadow: 0 0 0;
-}
-
-.focused .nav-pills {
-    background-color: #f3f7fb;
-}
-
-.focused .nav-pills > .active > a, 
-.nav-pills > .active > a:hover,
-.dropdown-menu li > a:hover, 
-.dropdown-menu li > a:focus, 
-.dropdown-submenu:hover > a,
-.dropdown-menu .active > a, 
-.dropdown-menu .active > a:hover,
-.CodeMirror-hint-active {
-    background: rgba(95, 159, 228, 0.62);
-    color: #fff;
-    text-shadow: 0 0 0;
-}
-
-
-.tool_container {
-    position: absolute;
-    top: 23px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.transcript textarea {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-.tool_container .panes {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
-.tool_container .panes .pane {
-    position: absolute;
-    overflow: auto;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #fefefe;
-}
-
-.tool_container .multi_pane {
-    position: relative;
-    height: 100%;
-    width: auto;
-    overflow-x: auto;
-}
-
-.tool_container .multi_pane .pane {
-    height: 100%;
-    max-width: 300px;
-    border-right: 1px solid #888;
-}
-
-.tool_container .panes .pane > div {
-    height: 100%;
-    position: relative;
-}
-
-.tool_container .panes.horizontal > .pane {
-    min-height: 50px;
-}
-
-.tool_container .panes.horizontal > .pane {
-    top: 50%;
-}
-
-.tool_container .panes.horizontal > .pane:first-child {
-    top: 0;
-    bottom: 50%;
-}
-
-.tool_container .panes.vertical > .pane {
-    left: 50%;
-}
-
-.tool_container .panes.vertical > .pane:first-child {
-    left: 0;
-    right: 50%;
-}
-
-
-.tool_container .splitter {
-    position: absolute;
-    border-width: 0;
-    z-index: 10;
-}
-
-.tool_container .splitter.vertical {
-    width: 5px;
-    left: 50%;
-    margin-left: -1px;
-    border-left: 1px solid #888;
-    height: 100%;
-    float: left;
-    cursor: ew-resize;
-}
-
-.tool_container .splitter.horizontal {
-    top: 50%;
-    height: 5px;
-    margin-top: -1px;
-    width: 100%;
-    border-top: 1px solid #888;
-    cursor: ns-resize;
-}
-
-
-
-.tool_container .panes .pane .nav-pills {
-    position: absolute;
-    overflow-y: auto;
-    top: 17px;
-    bottom: 17px;
-    width: 100%;
-    margin: 0;
-}
-
-.tool_container .pane .nav-pills i {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    background-image: none;
-    background-position: top left;
-    line-height: 14px;
-    vertical-align: text-top;
-}
-
-.tool_container .pane .nav-pills i.announcement {
-    background-image: url('../images/announcement.png');
-}
-.tool_container .pane .nav-pills i.class {
-    background-image: url('../images/class.png');
-}
-.tool_container .pane .nav-pills i.collection {
-    background-image: url('../images/collection.png');
-}
-.tool_container .pane .nav-pills i.test {
-    background-image: url('../images/test.png');
-}
-.tool_container .pane .nav-pills i.exception {
-    background-image: url('../images/exception.png');
-}
-.tool_container .pane .nav-pills i.widget {
-    background-image: url('../images/widget.png');
-}
-.tool_container .pane .nav-pills i.magnitude {
-    background-image: url('../images/magnitude.png');
-}
-.tool_container .pane .nav-pills i.package {
-    background-image: url('../images/package.png');
-}
-.tool_container .pane .nav-pills i.private {
-    background-image: url('../images/private.png');
-}
-.tool_container .pane .nav-pills i.extension {
-    background-image: url('../images/extension.png');
-}
-.tool_container .pane .nav-pills i.initialization {
-    background-image: url('../images/initialization.png');
-}
-.tool_container .pane .nav-pills i.package {
-    background-image: url('../images/package.png');
-}
-.tool_container .pane .nav-pills i.override {
-    background-image: url('../images/override.png ');
-}
-.tool_container .pane .nav-pills i.overridden {
-    background-image: url('../images/overridden.png');
-}
-.tool_container .pane .nav-pills i.override-overridden {
-    background-image: url('../images/override-overridden.png');
-}
-.tool_container .pane .nav-pills i.warning {
-    background-image: url('../images/warning.gif');
-}
-.tool_container .pane .nav-pills i.uncommented {
-    background-image: url('../images/uncommented.png');
-}
-
-
-
-.tool_container .list-label {
-    font-size: 11px;
-    border-radius: 0;
-    border-bottom: 1px solid #666;
-    border-top: 1px solid #e1ebf5;
-    background-color: #d2dae6;
-    background-image: -webkit-linear-gradient(top, #d2dae6, #cad3de);
-    background-image: -moz-linear-gradient(top, #d2dae6, #cad3de);
-    background-image: -o-linear-gradient(top, #d2dae6, #cad3de);
-    background-image: linear-gradient(top, #d2dae6, #cad3de);
-    color: #444;
-    font-weight: bold;
-    text-shadow: 0 0 0;
-    padding-left: 4px;
-    line-height: 14px;
-    height: 15px;
-    text-shadow: 0 1px 0 #eee;
-}
-
-.tool_container .list-label .btn-group.cog {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0;
-    margin: 0;
-}
-
-.tool_container .list-label .btn-group.open .dropdown-toggle {
-    box-shadow: 0 0 0;
-    border: 0;
-}
-
-.tool_container .list-label .btn-group > .dropdown-menu {
-    padding: 0;
-    font-size: 11px;
-}
-
-.tool_container .list-label .btn-group.cog i {
-    margin-top: 1px;
-}
-
-.tool_container .list-label .cog .btn.dropdown-toggle {
-    padding: 0;
-    margin: 0;
-    line-height: 12px;
-    border: 0;
-    background: transparent;
-}
-
-
-.tool_container .panes .pane .pane_actions {
-    position: absolute;
-    overflow: hidden;
-    width: 100%;
-    height: 16px;
-    bottom: 0;
-    background: #dadada;
-    border-top: 1px solid #666;
-    padding: 0;
-    margin: 0;
-    background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
-}
-
-.tool_container .panes .pane .pane_actions .info {
-    padding: 10px 5px 5px;
-    font-weight: bold;
-    color: #666;
-    line-height: 20px;
-}
-
-.tool_container .panes .pane .pane_actions .btn-group {
-    display: inline;
-    margin-left: 5px;
-}
-
-.tool_container .panes .pane .pane_actions label {
-    display: inline-block;
-    padding-left: 30px;
-    font-size: 11px;
-    line-height: 16px;
-    vertical-align: top;
-    text-shadow: #ddd 0px 1px 0px; 
-    color: #222;
-
-}
-
-.tool_container .panes .pane .pane_actions label input {
-    float: none;
-    vertical-align: top;
-    margin-top: 2px;
-    margin-right: 5px;
-}
-
-.tool_container .panes .pane .pane_actions .btn {
-    background: transparent;
-    border: 0;
-    font-size: 11px;
-    line-height: 16px;
-    padding: 0 5px;
-    margin: 0;
-    border-radius: 0;
-    box-shadow: 0 0 0;
-    vertical-align: top;
-    /* min-width: 50px; */
-}
-
-.tool_container .panes .pane .pane_actions .btn:hover {
-    background-color: #bbb;
-}
-
-.tool_container .panes .pane .pane_actions .btn-group .btn:hover {
-    background-color: transparent;
-}
-
-.tool_container .panes .pane .pane_actions .btn-group .btn.active {
-    text-shadow: #ddd 0px 1px 0px; 
-    color: #222;
-    background: #bbb;
-    background-image: linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    background-image: -webkit-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    background-image: -moz-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-    background-image: -o-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
-}
-
-.tool_container .panes .pane .class_side .nav-pills {
-    font-weight: bold;
-    background: #ffd
-}
-
-.key_helper {
-    z-index: 20;
-    position: fixed;
-    bottom: 0px;
-    background: #fff;
-    background-image: linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-    background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-    background-image: -o-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-    background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-    width: 100%;
-    border-top: 1px solid #aaa;
-    font-size: 11px;
-    height: 22px;
-}
-
-.key_helper .command {
-    padding: 0 2px;
-}
-
-.key_helper .label {
-    padding: 1px 4px;
-    font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-    background: transparent;
-    color: #08C;
-    text-shadow: none;
-    border: 0 none;
-}
-
-.key_helper .action {
-    padding: 0 5px;
-    color: #666;
-}
-
-.key_helper .selected {
-    background-image: linear-gradient(top, #ccc, #aaa);
-    background-image: -moz-linear-gradient(top, #ccc, #aaa);
-    background-image: -o-linear-gradient(top, #ccc, #aaa);
-    background-image: -webkit-linear-gradient(top, #ccc, #aaa);
-    height: 30px;
-    padding: 0 8px;
-    color: #333;
-    font-weight: bold;
-    text-shadow: 0 1px 0 #fff;
-    display: inline-block;
-    border-right: 1px solid #aaa;
-}
-
-.key_helper .close {
-    font-size: 14px;
-    line-height: 26px;
-    opacity: 0.6;
-}
-
-.key_helper .close:hover {
-    opacity: 0.8;
-}
-
-.key_helper input {
-    outline: none;
-    font-size: 11px;
-    padding: 2px 8px;
-    background: #fff;
-    border: 1px solid #a1a1a1;
-    border-radius: 12px;
-    box-shadow: inset 0 0px 2px 0px #aaa;
-    margin: 2px 4px;
-    line-height: 1em;
-}
-
-.key_helper .error .help-inline,
-.key_helper .error input {
-    color: #B91010;
-    font-weight: bold;
-}
-
-.typeahead.dropdown-menu {
-    position: fixed !important;
-    top: auto !important;
-    bottom: 30px !important;
-}
-
-#cog-helper {
-    position: fixed;
-    bottom: 2px;
-    right: 2px;
-    z-index: 1000;
-    opacity: 0.6;
-    transition: all .5s;
-    -webkit-transition: all .5s;
-    -moz-transition: all .5s;
-    -o-transition: all .5s;
-    -ms-transition: all .5s;
-}
-
-#cog-helper:hover {
-    opacity: 1;
-}
-
-#helper {
-    z-index: 300;
-    top: 50%;
-    position: absolute;
-    left: 50%;
-    margin-left: -220px;
-    margin-top: -35px;
-    width: 400px;
-    text-align: center;
-    color: #ddd;
-    font-size: 18px;
-    font-weight: bold;
-    text-shadow: 0 -1px 0 #111;
-    padding: 20px;
-    background: rgba(0,0,0, 0.6);
-    border-radius: 40px;
-}
-
-#overlay {
-    z-index: 2000;
-    background: transparent;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.confirmation, .dialog {
-    z-index: 2001;
-    background: rgba(243,243,243,0.9);
-    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
-    background-image: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
-    background-image: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
-    background-image: linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
-    padding: 20px;
-    width: 250px;
-    position: fixed;
-    top: -500px;
-    left: 50%;
-    margin-left: -135px;
-    box-shadow: 0 0 6px #333;
-    transition: top .5s;
-    -webkit-transition: top .5s;
-    -moz-transition: top .5s;
-    -o-transition: top .5s;
-}
-
-.confirmation.large,
-.dialog.large {
-    width: 400px;
-    margin-left: -220px;
-}
-
-.confirmation textarea,
-.dialog textarea {
-    display: block;
-    width: 235px;
-}
-
-.confirmation.large textarea,
-.dialog.large textarea {
-    width: 385px;
-    height: 200px;
-}
-
-.dialog .progress {
-    height: 5px;
-}
-
-.dialog .progress .bar {
-    background-color: #e9eaf5;
-    background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
-    background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);
-    background-image: -o-linear-gradient(top, #B1BDD5, #8999b8);
-    background-image: linear-gradient(top, #B1BDD5, #8999b8);
- 
-}
-
-.confirmation span,
-.dialog span {
-    font-size: 13px;
-    font-weight: bold;
-}
-
-.confirmation .buttons,
-.dialog .buttons {
-    text-align: right;
-    margin-top: 20px;
-}
-
-.confirmation.active,
-.dialog.active {
-    top: 0;
-}
-
-.button {
-    border-radius: 3px !important;
-    background: #ccc;
-    border: 1px solid #9B9B9B;
-    height: 20px;
-    border-radius: 5px;
-    min-width: 68px;
-    padding: 0 10px;
-    text-align: center;
-    margin: 0;
-    margin-left: 10px;
-    background: -webkit-linear-gradient(bottom, rgba(0,0,0,.09) 0%, rgba(0,0,0, 0.02) 50%, rgba(0,0,0,.04) 50.5%, rgba(0,0,0,.04) 100%) #fff;
-    font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
-}
-
-.button.default { 
-    border-top: 1px solid #535273;
-    border: 1px solid #4F4D67;
-    border-bottom: 1px solid #4B4B58;    
-    background: -webkit-linear-gradient(bottom, rgba(255,255,255,.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255,255,255,.3) 50.5%, rgba(255,255,255,.45) 95%, rgba(255,255,255,.8) 100%) #b1bdd5;
-    background: -moz-linear-gradient(bottom, rgba(255,255,255,.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255,255,255,.3) 50.5%, rgba(255,255,255,.45) 95%, rgba(255,255,255,.8) 100%) #b1bdd5;
-    -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
-    -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
-    box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
-}
-
-
-.button:hover {
-    cursor: pointer;
-    border: 1px solid rgba(0,0,0,.6);
-}
-
-.button:active {
-    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
-    -moz-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
-    box-shadow: inset 0 0 5px rgba(0,0,0,.5);
-}
-
-.button:focus {
-    outline: 0;
-}
-
-.doc {
-    background: white;
-}
-
-.doc code .doc pre {
-    font-size: 11px;
-}
-
-.doc code {
-    padding: 1px 4px;
-}
-.doc .head {
-    background: #08C;
-    padding: 10px;
-    font-size: 22px;
-    color: white;
-}
-
-.doc .button {
-    float: right;
-}
-.doc .markdown,
-.doc .inheritance {
-    padding: 10px;
-}
-
-.doc h1 {
-    font-size: 22px;
-    margin: 0 10px;
-    border-bottom: 1px solid #666;
-}
-
-.doc h2 {
-    font-size: 16px;
-}
-
-.transcript_container .list-label {
-    height: 16px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-}
-
-.transcript {
-    position: absolute;
-    top: 17px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.transcript textarea {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    border: 0;
+  height: 1%;
+}
+#helios a {
+  cursor: pointer;
+}
+#helios i {
+  opacity: 0.8;
+}
+#helios [class^="icon-"],
+#helios [class*=" icon-"] {
+  margin-top: 0;
+}
+#helios .CodeMirror {
+  position: absolute;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  background: #fff;
+}
+#helios .CodeMirror-hints {
+  border-radius: 0;
+  font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+  font-size: 11px;
+  line-height: 1em;
+  padding: 0;
+  max-height: 120px;
+}
+#helios .CodeMirror-hint {
+  border-radius: 0;
+  padding: 0 10px;
+}
+#helios .CodeMirror pre {
+  font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+  line-height: 16px;
+}
+#helios .CodeMirror-gutter.stops {
+  width: 20px;
+}
+#helios .CodeMirror .CodeMirror-gutter-elt {
+  line-height: 1.5em;
+}
+#helios .CodeMirror .highlighted.CodeMirror-linebackground {
+  background-color: #ffffaa;
+}
+#helios .CodeMirror .CodeMirror-gutter-elt .stop {
+  width: 16px;
+  height: 16px;
+  background: url('../images/arrowRight.png');
+  margin-left: 2px;
+}
+#helios .state {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+  width: 16px;
+  height: 16px;
+}
+#helios .state.modified {
+  background: transparent url('../images/modified.png') 50% 50% no-repeat;
+}
+#helios .buttons_bar {
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+  z-index: 2;
+}
+#helios .btn,
+#helios .btn-group > .btn,
+#helios .btn-group > .dropdown-menu {
+  padding: 2px 8px;
+}
+#helios .navbar-fixed-top {
+  font-size: 11px;
+  line-height: 16px;
+}
+#helios .navbar-fixed-top a span {
+  padding-left: 18px;
+  background-position: center left;
+  background-repeat: no-repeat;
+  background-position: 0px -1px;
+}
+#helios .navbar-fixed-top i.close {
+  width: 14px;
+  height: 16px;
+  margin-left: 4px;
+  background-image: url('../images/close.gif');
+  margin-right: 0;
+  background-position: center left;
+  margin-top: 2px;
+}
+#helios .navbar-fixed-top a span.references {
+  background-image: url('../images/references.png');
+}
+#helios .navbar-fixed-top a span.browser {
+  background-image: url('../images/browser.png');
+}
+#helios .navbar-fixed-top a span.sunit {
+  background-image: url('../images/sunit.png');
+}
+#helios .navbar-fixed-top a span.workspace {
+  background-image: url('../images/workspace.png');
+}
+#helios .navbar-fixed-top a span.debugger {
+  background-image: url('../images/debugger.png');
+}
+#helios .navbar-fixed-top a span.inspector {
+  background-image: url('../images/inspector.png');
+}
+#helios .navbar-fixed-top .navbar-inner {
+  min-height: 20px;
+  background-color: #dbdbdb;
+  border-bottom: 1px solid #666;
+  background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
+  background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
+  background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
+  background-image: -owebkit-linear-gradient(top, #dfdfdf, #d0d0d0);
+  box-shadow: 0 0 0;
+}
+#helios .navbar .nav > li {
+  line-height: 16px;
+}
+#helios .navbar .nav > li > a {
+  line-height: 22px;
+  padding: 0px 8px;
+  font-size: 11px;
+  color: #444;
+  text-shadow: 0 1px 0 #ddd;
+}
+#helios .nav > li > a:hover {
+  background: transparent;
+}
+#helios .navbar .nav > .active > a,
+#helios .navbar .nav > .active > a:hover,
+#helios .navbar .nav > .active > a:focus {
+  background-color: #bababa;
+  background-image: linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: -webkit-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: -moz-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: -o-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  text-shadow: #ddd 0px 1px 0px;
+  color: #222;
+}
+#helios .navbar-fixed-top i {
+  opacity: 0.4;
+  margin-right: 5px;
+  height: 12px;
+  margin-top: 0;
+}
+#helios .navbar-fixed-top .active i {
+  opacity: 0.6;
+}
+#helios .nav-pills.nav-stacked > li > a {
+  border-radius: 0;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  padding: 2px 2px 1px 4px;
+  margin: 0;
+  font-size: 11px;
+  color: #111;
+  white-space: nowrap;
+}
+#helios [class^="icon-"],
+#helios [class*=" icon-"] {
+  margin-right: 2px;
+}
+#helios .dropdown-menu {
+  border-radius: 0;
+  padding: 0;
+  margin: 3px;
+}
+#helios .nav-pills > .active > a {
+  background-color: #ddd;
+  color: #fff;
+  text-shadow: 0 0 0;
+}
+#helios .focused .nav-pills {
+  background-color: #f3f7fb;
+}
+#helios .focused .nav-pills > .active > a,
+#helios .nav-pills > .active > a:hover,
+#helios .dropdown-menu li > a:hover,
+#helios .dropdown-menu li > a:focus,
+#helios .dropdown-submenu:hover > a,
+#helios .dropdown-menu .active > a,
+#helios .dropdown-menu .active > a:hover,
+#helios .CodeMirror-hint-active {
+  background: rgba(95, 159, 228, 0.62);
+  color: #fff;
+  text-shadow: 0 0 0;
+}
+#helios .tool_container {
+  position: absolute;
+  top: 23px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+#helios .transcript textarea {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+#helios .tool_container .panes {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+#helios .tool_container .panes .pane {
+  position: absolute;
+  overflow: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fefefe;
+}
+#helios .tool_container .multi_pane {
+  position: relative;
+  height: 100%;
+  width: auto;
+  overflow-x: auto;
+}
+#helios .tool_container .multi_pane .pane {
+  height: 100%;
+  max-width: 300px;
+  border-right: 1px solid #888;
+}
+#helios .tool_container .panes .pane > div {
+  height: 100%;
+  position: relative;
+}
+#helios .tool_container .panes.horizontal > .pane {
+  min-height: 50px;
+}
+#helios .tool_container .panes.horizontal > .pane {
+  top: 50%;
+}
+#helios .tool_container .panes.horizontal > .pane:first-child {
+  top: 0;
+  bottom: 50%;
+}
+#helios .tool_container .panes.vertical > .pane {
+  left: 50%;
+}
+#helios .tool_container .panes.vertical > .pane:first-child {
+  left: 0;
+  right: 50%;
+}
+#helios .tool_container .splitter {
+  position: absolute;
+  border-width: 0;
+  z-index: 10;
+}
+#helios .tool_container .splitter.vertical {
+  width: 5px;
+  left: 50%;
+  margin-left: -1px;
+  border-left: 1px solid #888;
+  height: 100%;
+  float: left;
+  cursor: ew-resize;
+}
+#helios .tool_container .splitter.horizontal {
+  top: 50%;
+  height: 5px;
+  margin-top: -1px;
+  width: 100%;
+  border-top: 1px solid #888;
+  cursor: ns-resize;
+}
+#helios .tool_container .panes .pane .nav-pills {
+  position: absolute;
+  overflow-y: auto;
+  top: 17px;
+  bottom: 17px;
+  width: 100%;
+  margin: 0;
+}
+#helios .tool_container .pane .nav-pills i {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  background-image: none;
+  background-position: top left;
+  line-height: 14px;
+  vertical-align: text-top;
+}
+#helios .tool_container .pane .nav-pills i.announcement {
+  background-image: url('../images/announcement.png');
+}
+#helios .tool_container .pane .nav-pills i.class {
+  background-image: url('../images/class.png');
+}
+#helios .tool_container .pane .nav-pills i.collection {
+  background-image: url('../images/collection.png');
+}
+#helios .tool_container .pane .nav-pills i.test {
+  background-image: url('../images/test.png');
+}
+#helios .tool_container .pane .nav-pills i.exception {
+  background-image: url('../images/exception.png');
+}
+#helios .tool_container .pane .nav-pills i.widget {
+  background-image: url('../images/widget.png');
+}
+#helios .tool_container .pane .nav-pills i.magnitude {
+  background-image: url('../images/magnitude.png');
+}
+#helios .tool_container .pane .nav-pills i.package {
+  background-image: url('../images/package.png');
+}
+#helios .tool_container .pane .nav-pills i.private {
+  background-image: url('../images/private.png');
+}
+#helios .tool_container .pane .nav-pills i.extension {
+  background-image: url('../images/extension.png');
+}
+#helios .tool_container .pane .nav-pills i.initialization {
+  background-image: url('../images/initialization.png');
+}
+#helios .tool_container .pane .nav-pills i.package {
+  background-image: url('../images/package.png');
+}
+#helios .tool_container .pane .nav-pills i.override {
+  background-image: url('../images/override.png ');
+}
+#helios .tool_container .pane .nav-pills i.overridden {
+  background-image: url('../images/overridden.png');
+}
+#helios .tool_container .pane .nav-pills i.override-overridden {
+  background-image: url('../images/override-overridden.png');
+}
+#helios .tool_container .pane .nav-pills i.warning {
+  background-image: url('../images/warning.gif');
+}
+#helios .tool_container .pane .nav-pills i.uncommented {
+  background-image: url('../images/uncommented.png');
+}
+#helios .tool_container .list-label {
+  font-size: 11px;
+  border-radius: 0;
+  border-bottom: 1px solid #666;
+  border-top: 1px solid #e1ebf5;
+  background-color: #d2dae6;
+  background-image: -webkit-linear-gradient(top, #d2dae6, #cad3de);
+  background-image: -moz-linear-gradient(top, #d2dae6, #cad3de);
+  background-image: -o-linear-gradient(top, #d2dae6, #cad3de);
+  background-image: linear-gradient(top, #d2dae6, #cad3de);
+  color: #444;
+  font-weight: bold;
+  text-shadow: 0 0 0;
+  padding-left: 4px;
+  line-height: 14px;
+  height: 15px;
+  text-shadow: 0 1px 0 #eee;
+}
+#helios .tool_container .list-label .btn-group.cog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+}
+#helios .tool_container .list-label .btn-group.open .dropdown-toggle {
+  box-shadow: 0 0 0;
+  border: 0;
+}
+#helios .tool_container .list-label .btn-group > .dropdown-menu {
+  padding: 0;
+  font-size: 11px;
+}
+#helios .tool_container .list-label .btn-group.cog i {
+  margin-top: 1px;
+}
+#helios .tool_container .list-label .cog .btn.dropdown-toggle {
+  padding: 0;
+  margin: 0;
+  line-height: 12px;
+  border: 0;
+  background: transparent;
+}
+#helios .tool_container .panes .pane .pane_actions {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 16px;
+  bottom: 0;
+  background: #dadada;
+  border-top: 1px solid #666;
+  padding: 0;
+  margin: 0;
+  background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
+}
+#helios .tool_container .panes .pane .pane_actions .info {
+  padding: 10px 5px 5px;
+  font-weight: bold;
+  color: #666;
+  line-height: 20px;
+}
+#helios .tool_container .panes .pane .pane_actions .btn-group {
+  display: inline;
+  margin-left: 5px;
+}
+#helios .tool_container .panes .pane .pane_actions label {
+  display: inline-block;
+  padding-left: 30px;
+  font-size: 11px;
+  line-height: 16px;
+  vertical-align: top;
+  text-shadow: #ddd 0px 1px 0px;
+  color: #222;
+}
+#helios .tool_container .panes .pane .pane_actions label input {
+  float: none;
+  vertical-align: top;
+  margin-top: 2px;
+  margin-right: 5px;
+}
+#helios .tool_container .panes .pane .pane_actions .btn {
+  background: transparent;
+  border: 0;
+  font-size: 11px;
+  line-height: 16px;
+  padding: 0 5px;
+  margin: 0;
+  border-radius: 0;
+  box-shadow: 0 0 0;
+  vertical-align: top;
+  /* min-width: 50px; */
+
+}
+#helios .tool_container .panes .pane .pane_actions .btn:hover {
+  background-color: #bbb;
+}
+#helios .tool_container .panes .pane .pane_actions .btn-group .btn:hover {
+  background-color: transparent;
+}
+#helios .tool_container .panes .pane .pane_actions .btn-group .btn.active {
+  text-shadow: #ddd 0px 1px 0px;
+  color: #222;
+  background: #bbb;
+  background-image: linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: -webkit-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: -moz-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+  background-image: -o-linear-gradient(left, #777777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777777 0%, #bababa 2px, transparent 2px);
+}
+#helios .tool_container .panes .pane .class_side .nav-pills {
+  font-weight: bold;
+  background: #ffffdd;
+}
+#helios .key_helper {
+  z-index: 20;
+  position: fixed;
+  bottom: 0px;
+  background: #fff;
+  background-image: linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+  background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+  background-image: -o-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+  background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+  width: 100%;
+  border-top: 1px solid #aaa;
+  font-size: 11px;
+  height: 22px;
+}
+#helios .key_helper .command {
+  padding: 0 2px;
+}
+#helios .key_helper .label {
+  padding: 1px 4px;
+  font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+  background: transparent;
+  color: #08C;
+  text-shadow: none;
+  border: 0 none;
+}
+#helios .key_helper .action {
+  padding: 0 5px;
+  color: #666;
+}
+#helios .key_helper .selected {
+  background-image: linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: -o-linear-gradient(top, #cccccc, #aaaaaa);
+  background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa);
+  height: 30px;
+  padding: 0 8px;
+  color: #333;
+  font-weight: bold;
+  text-shadow: 0 1px 0 #fff;
+  display: inline-block;
+  border-right: 1px solid #aaa;
+}
+#helios .key_helper .close {
+  font-size: 14px;
+  line-height: 26px;
+  opacity: 0.6;
+}
+#helios .key_helper .close:hover {
+  opacity: 0.8;
+}
+#helios .key_helper input {
+  outline: none;
+  font-size: 11px;
+  padding: 2px 8px;
+  background: #fff;
+  border: 1px solid #a1a1a1;
+  border-radius: 12px;
+  box-shadow: inset 0 0px 2px 0px #aaa;
+  margin: 2px 4px;
+  line-height: 1em;
+}
+#helios .key_helper .error .help-inline,
+#helios .key_helper .error input {
+  color: #B91010;
+  font-weight: bold;
+}
+#helios .typeahead.dropdown-menu {
+  position: fixed !important;
+  top: auto !important;
+  bottom: 30px !important;
+}
+#helios #cog-helper {
+  position: fixed;
+  bottom: 2px;
+  right: 2px;
+  z-index: 1000;
+  opacity: 0.6;
+  transition: all .5s;
+  -webkit-transition: all .5s;
+  -moz-transition: all .5s;
+  -o-transition: all .5s;
+  -ms-transition: all .5s;
+}
+#helios #cog-helper:hover {
+  opacity: 1;
+}
+#helios #helper {
+  z-index: 300;
+  top: 50%;
+  position: absolute;
+  left: 50%;
+  margin-left: -220px;
+  margin-top: -35px;
+  width: 400px;
+  text-align: center;
+  color: #ddd;
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 -1px 0 #111111;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 40px;
+}
+#helios #overlay {
+  z-index: 2000;
+  background: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+#helios .confirmation,
+#helios .dialog {
+  z-index: 2001;
+  background: rgba(243, 243, 243, 0.9);
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
+  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
+  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
+  background-image: linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 5px, transparent 6px);
+  padding: 20px;
+  width: 250px;
+  position: fixed;
+  top: -500px;
+  left: 50%;
+  margin-left: -135px;
+  box-shadow: 0 0 6px #333;
+  transition: top .5s;
+  -webkit-transition: top .5s;
+  -moz-transition: top .5s;
+  -o-transition: top .5s;
+}
+#helios .confirmation.large,
+#helios .dialog.large {
+  width: 400px;
+  margin-left: -220px;
+}
+#helios .confirmation textarea,
+#helios .dialog textarea {
+  display: block;
+  width: 235px;
+}
+#helios .confirmation.large textarea,
+#helios .dialog.large textarea {
+  width: 385px;
+  height: 200px;
+}
+#helios .dialog .progress {
+  height: 5px;
+}
+#helios .dialog .progress .bar {
+  background-color: #e9eaf5;
+  background-image: -webkit-linear-gradient(top, #b1bdd5, #8999b8);
+  background-image: -moz-linear-gradient(top, #b1bdd5, #8999b8);
+  background-image: -o-linear-gradient(top, #b1bdd5, #8999b8);
+  background-image: linear-gradient(top, #b1bdd5, #8999b8);
+}
+#helios .confirmation span,
+#helios .dialog span {
+  font-size: 13px;
+  font-weight: bold;
+}
+#helios .confirmation .buttons,
+#helios .dialog .buttons {
+  text-align: right;
+  margin-top: 20px;
+}
+#helios .confirmation.active,
+#helios .dialog.active {
+  top: 0;
+}
+#helios .button {
+  border-radius: 3px !important;
+  background: #ccc;
+  border: 1px solid #9B9B9B;
+  height: 20px;
+  border-radius: 5px;
+  min-width: 68px;
+  padding: 0 10px;
+  text-align: center;
+  margin: 0;
+  margin-left: 10px;
+  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.04) 50.5%, rgba(0, 0, 0, 0.04) 100%) #ffffff;
+  font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
+}
+#helios .button.default {
+  border-top: 1px solid #535273;
+  border: 1px solid #4F4D67;
+  border-bottom: 1px solid #4B4B58;
+  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 50.5%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #b1bdd5;
+  -moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
+  -webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+  box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+}
+#helios .button:hover {
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+}
+#helios .button:active {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+}
+#helios .button:focus {
+  outline: 0;
+}
+#helios .doc {
+  background: white;
+}
+#helios .doc code .doc pre {
+  font-size: 11px;
+}
+#helios .doc code {
+  padding: 1px 4px;
+}
+#helios .doc .head {
+  background: #08C;
+  padding: 10px;
+  font-size: 22px;
+  color: white;
+}
+#helios .doc .button {
+  float: right;
+}
+#helios .doc .markdown,
+#helios .doc .inheritance {
+  padding: 10px;
+}
+#helios .doc h1 {
+  font-size: 22px;
+  margin: 0 10px;
+  border-bottom: 1px solid #666;
+}
+#helios .doc h2 {
+  font-size: 16px;
+}
+#helios .transcript_container .list-label {
+  height: 16px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+#helios .transcript {
+  position: absolute;
+  top: 17px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+#helios .transcript textarea {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
 }

+ 853 - 0
css/helios.less

@@ -0,0 +1,853 @@
+body {
+    font-size: 11px;
+    font-family: "Lucida Grande", helvetica, arial, sans;
+    background: #eee;
+}
+
+.clearfix:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+
+.clearfix {
+    display: inline-block;
+}
+
+html[xmlns] .clearfix {
+    display: block;
+}
+
+* html .clearfix {
+    height: 1%;
+}
+
+#helios {
+
+    a {
+	cursor: pointer;
+    }
+
+    i {
+	opacity: 0.8;
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+	margin-top: 0;
+    }
+
+    .CodeMirror {
+	position: absolute;
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+	background: #fff;
+    }
+
+    .CodeMirror-hints {
+	border-radius: 0;
+	font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+	font-size: 11px;
+	line-height: 1em;
+	padding: 0;
+	max-height: 120px;
+    }
+
+    .CodeMirror-hint {
+	border-radius: 0;
+	padding: 0 10px;
+    }
+
+    .CodeMirror pre {
+	font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+	line-height: 16px;
+    }
+
+    .CodeMirror-gutter.stops {
+	width: 20px;
+    }
+
+    .CodeMirror .CodeMirror-gutter-elt {
+	line-height: 1.5em;
+    }
+
+    .CodeMirror .highlighted.CodeMirror-linebackground {
+	background-color: #ffffaa;
+    }
+
+    .CodeMirror .CodeMirror-gutter-elt .stop {
+	width: 16px;
+	height: 16px;
+	background: url('../images/arrowRight.png');
+	margin-left: 2px;
+    }
+
+    .state {
+	position: absolute;
+	right: 15px;
+	top: 10px;
+	width: 16px;
+	height: 16px;
+    }
+
+    .state.modified {
+	background: transparent url('../images/modified.png') 50% 50% no-repeat;
+    }
+
+    .buttons_bar {
+	position: absolute;
+	bottom: 8px;
+	right: 20px;
+	z-index: 2;
+    }
+
+    .btn, .btn-group > .btn, .btn-group > .dropdown-menu {
+	padding: 2px 8px;
+    }
+
+    .navbar-fixed-top {
+	font-size: 11px;
+	line-height: 16px;
+    }
+
+    .navbar-fixed-top a span {
+	padding-left: 18px;
+	background-position: center left;
+	background-repeat: no-repeat;
+	background-position: 0px -1px;
+    }
+
+    .navbar-fixed-top i.close {
+	width: 14px;
+	height: 16px;
+	margin-left: 4px;
+	background-image: url('../images/close.gif');
+	margin-right: 0;
+	background-position: center left;
+	margin-top: 2px;
+    }
+
+    .navbar-fixed-top a span.references {
+	background-image: url('../images/references.png')
+    }
+
+    .navbar-fixed-top a span.browser {
+	background-image: url('../images/browser.png')
+    }
+
+    .navbar-fixed-top a span.sunit {
+	background-image: url('../images/sunit.png')
+    }
+
+    .navbar-fixed-top a span.workspace {
+	background-image: url('../images/workspace.png')
+    }
+
+    .navbar-fixed-top a span.debugger {
+	background-image: url('../images/debugger.png')
+    }
+    .navbar-fixed-top a span.inspector {
+	background-image: url('../images/inspector.png')
+    }
+
+
+    .navbar-fixed-top .navbar-inner {
+	min-height: 20px;
+	background-color: #dbdbdb;
+	border-bottom: 1px solid #666;
+	background-image: linear-gradient(top, #dfdfdf, #d0d0d0);
+	background-image: -webkit-linear-gradient(top, #dfdfdf, #d0d0d0);
+	background-image: -moz-linear-gradient(top, #dfdfdf, #d0d0d0);
+	background-image: -owebkit-linear-gradient(top, #dfdfdf, #d0d0d0);
+	box-shadow: 0 0 0;
+    }
+
+
+    .navbar .nav > li {
+	line-height: 16px;
+    }
+
+
+    .navbar .nav > li > a {
+	line-height: 22px;
+	padding: 0px 8px;
+	font-size: 11px;
+	color: #444;
+	text-shadow: 0 1px 0 #ddd;
+    }
+
+    .nav > li > a:hover {
+	background: transparent;
+    }
+
+    .navbar .nav > .active > a, 
+    .navbar .nav > .active > a:hover, 
+    .navbar .nav > .active > a:focus {
+	background-color: #bababa;
+	background-image: linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	background-image: -webkit-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	background-image: -moz-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	background-image: -o-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	text-shadow: #ddd 0px 1px 0px; 
+	color: #222;
+    }
+
+    .navbar-fixed-top i {
+	opacity: 0.4;
+	margin-right: 5px;
+	height: 12px;
+	margin-top: 0;
+    }
+
+    .navbar-fixed-top .active i {
+	opacity: 0.6;
+    }
+
+    .nav-pills.nav-stacked > li > a {
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	padding: 2px 2px 1px 4px;
+	margin: 0;
+	font-size: 11px;
+	color: #111;
+	white-space: nowrap;
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+	margin-right: 2px;
+    }
+
+    .dropdown-menu {
+	border-radius: 0;
+	padding: 0;
+	margin: 3px;
+    }
+
+    .nav-pills > .active > a {
+	background-color: #ddd;
+	color: #fff;
+	text-shadow: 0 0 0;
+    }
+
+    .focused .nav-pills {
+	background-color: #f3f7fb;
+    }
+
+    .focused .nav-pills > .active > a, 
+    .nav-pills > .active > a:hover,
+    .dropdown-menu li > a:hover, 
+    .dropdown-menu li > a:focus, 
+    .dropdown-submenu:hover > a,
+    .dropdown-menu .active > a, 
+    .dropdown-menu .active > a:hover,
+    .CodeMirror-hint-active {
+	background: rgba(95, 159, 228, 0.62);
+	color: #fff;
+	text-shadow: 0 0 0;
+    }
+
+
+    .tool_container {
+	position: absolute;
+	top: 23px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+    }
+
+    .transcript textarea {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	border: 0;
+    }
+
+    .tool_container .panes {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+    }
+
+    .tool_container .panes .pane {
+	position: absolute;
+	overflow: auto;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #fefefe;
+    }
+
+    .tool_container .multi_pane {
+	position: relative;
+	height: 100%;
+	width: auto;
+	overflow-x: auto;
+    }
+
+    .tool_container .multi_pane .pane {
+	height: 100%;
+	max-width: 300px;
+	border-right: 1px solid #888;
+    }
+
+    .tool_container .panes .pane > div {
+	height: 100%;
+	position: relative;
+    }
+
+    .tool_container .panes.horizontal > .pane {
+	min-height: 50px;
+    }
+
+    .tool_container .panes.horizontal > .pane {
+	top: 50%;
+    }
+
+    .tool_container .panes.horizontal > .pane:first-child {
+	top: 0;
+	bottom: 50%;
+    }
+
+    .tool_container .panes.vertical > .pane {
+	left: 50%;
+    }
+
+    .tool_container .panes.vertical > .pane:first-child {
+	left: 0;
+	right: 50%;
+    }
+
+
+    .tool_container .splitter {
+	position: absolute;
+	border-width: 0;
+	z-index: 10;
+    }
+
+    .tool_container .splitter.vertical {
+	width: 5px;
+	left: 50%;
+	margin-left: -1px;
+	border-left: 1px solid #888;
+	height: 100%;
+	float: left;
+	cursor: ew-resize;
+    }
+
+    .tool_container .splitter.horizontal {
+	top: 50%;
+	height: 5px;
+	margin-top: -1px;
+	width: 100%;
+	border-top: 1px solid #888;
+	cursor: ns-resize;
+    }
+
+
+
+    .tool_container .panes .pane .nav-pills {
+	position: absolute;
+	overflow-y: auto;
+	top: 17px;
+	bottom: 17px;
+	width: 100%;
+	margin: 0;
+    }
+
+    .tool_container .pane .nav-pills i {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	margin-right: 4px;
+	background-image: none;
+	background-position: top left;
+	line-height: 14px;
+	vertical-align: text-top;
+    }
+
+    .tool_container .pane .nav-pills i.announcement {
+	background-image: url('../images/announcement.png');
+    }
+    .tool_container .pane .nav-pills i.class {
+	background-image: url('../images/class.png');
+    }
+    .tool_container .pane .nav-pills i.collection {
+	background-image: url('../images/collection.png');
+    }
+    .tool_container .pane .nav-pills i.test {
+	background-image: url('../images/test.png');
+    }
+    .tool_container .pane .nav-pills i.exception {
+	background-image: url('../images/exception.png');
+    }
+    .tool_container .pane .nav-pills i.widget {
+	background-image: url('../images/widget.png');
+    }
+    .tool_container .pane .nav-pills i.magnitude {
+	background-image: url('../images/magnitude.png');
+    }
+    .tool_container .pane .nav-pills i.package {
+	background-image: url('../images/package.png');
+    }
+    .tool_container .pane .nav-pills i.private {
+	background-image: url('../images/private.png');
+    }
+    .tool_container .pane .nav-pills i.extension {
+	background-image: url('../images/extension.png');
+    }
+    .tool_container .pane .nav-pills i.initialization {
+	background-image: url('../images/initialization.png');
+    }
+    .tool_container .pane .nav-pills i.package {
+	background-image: url('../images/package.png');
+    }
+    .tool_container .pane .nav-pills i.override {
+	background-image: url('../images/override.png ');
+    }
+    .tool_container .pane .nav-pills i.overridden {
+	background-image: url('../images/overridden.png');
+    }
+    .tool_container .pane .nav-pills i.override-overridden {
+	background-image: url('../images/override-overridden.png');
+    }
+    .tool_container .pane .nav-pills i.warning {
+	background-image: url('../images/warning.gif');
+    }
+    .tool_container .pane .nav-pills i.uncommented {
+	background-image: url('../images/uncommented.png');
+    }
+
+
+
+    .tool_container .list-label {
+	font-size: 11px;
+	border-radius: 0;
+	border-bottom: 1px solid #666;
+	border-top: 1px solid #e1ebf5;
+	background-color: #d2dae6;
+	background-image: -webkit-linear-gradient(top, #d2dae6, #cad3de);
+	background-image: -moz-linear-gradient(top, #d2dae6, #cad3de);
+	background-image: -o-linear-gradient(top, #d2dae6, #cad3de);
+	background-image: linear-gradient(top, #d2dae6, #cad3de);
+	color: #444;
+	font-weight: bold;
+	text-shadow: 0 0 0;
+	padding-left: 4px;
+	line-height: 14px;
+	height: 15px;
+	text-shadow: 0 1px 0 #eee;
+    }
+
+    .tool_container .list-label .btn-group.cog {
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 0;
+	margin: 0;
+    }
+
+    .tool_container .list-label .btn-group.open .dropdown-toggle {
+	box-shadow: 0 0 0;
+	border: 0;
+    }
+
+    .tool_container .list-label .btn-group > .dropdown-menu {
+	padding: 0;
+	font-size: 11px;
+    }
+
+    .tool_container .list-label .btn-group.cog i {
+	margin-top: 1px;
+    }
+
+    .tool_container .list-label .cog .btn.dropdown-toggle {
+	padding: 0;
+	margin: 0;
+	line-height: 12px;
+	border: 0;
+	background: transparent;
+    }
+
+
+    .tool_container .panes .pane .pane_actions {
+	position: absolute;
+	overflow: hidden;
+	width: 100%;
+	height: 16px;
+	bottom: 0;
+	background: #dadada;
+	border-top: 1px solid #666;
+	padding: 0;
+	margin: 0;
+	background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
+    }
+
+    .tool_container .panes .pane .pane_actions .info {
+	padding: 10px 5px 5px;
+	font-weight: bold;
+	color: #666;
+	line-height: 20px;
+    }
+
+    .tool_container .panes .pane .pane_actions .btn-group {
+	display: inline;
+	margin-left: 5px;
+    }
+
+    .tool_container .panes .pane .pane_actions label {
+	display: inline-block;
+	padding-left: 30px;
+	font-size: 11px;
+	line-height: 16px;
+	vertical-align: top;
+	text-shadow: #ddd 0px 1px 0px; 
+	color: #222;
+
+    }
+
+    .tool_container .panes .pane .pane_actions label input {
+	float: none;
+	vertical-align: top;
+	margin-top: 2px;
+	margin-right: 5px;
+    }
+
+    .tool_container .panes .pane .pane_actions .btn {
+	background: transparent;
+	border: 0;
+	font-size: 11px;
+	line-height: 16px;
+	padding: 0 5px;
+	margin: 0;
+	border-radius: 0;
+	box-shadow: 0 0 0;
+	vertical-align: top;
+    /* min-width: 50px; */
+    }
+
+    .tool_container .panes .pane .pane_actions .btn:hover {
+	background-color: #bbb;
+    }
+
+    .tool_container .panes .pane .pane_actions .btn-group .btn:hover {
+	background-color: transparent;
+    }
+
+    .tool_container .panes .pane .pane_actions .btn-group .btn.active {
+	text-shadow: #ddd 0px 1px 0px; 
+	color: #222;
+	background: #bbb;
+	background-image: linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	background-image: -webkit-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -webkit-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	background-image: -moz-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -moz-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+	background-image: -o-linear-gradient(left, #777 0%, #bababa 2px, transparent 2px), -o-linear-gradient(right, #777 0%, #bababa 2px, transparent 2px);
+    }
+
+    .tool_container .panes .pane .class_side .nav-pills {
+	font-weight: bold;
+	background: #ffd
+    }
+
+    .key_helper {
+	z-index: 20;
+	position: fixed;
+	bottom: 0px;
+	background: #fff;
+	background-image: linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+	background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+	background-image: -o-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+	background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
+	width: 100%;
+	border-top: 1px solid #aaa;
+	font-size: 11px;
+	height: 22px;
+    }
+
+    .key_helper .command {
+	padding: 0 2px;
+    }
+
+    .key_helper .label {
+	padding: 1px 4px;
+	font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+	background: transparent;
+	color: #08C;
+	text-shadow: none;
+	border: 0 none;
+    }
+
+    .key_helper .action {
+	padding: 0 5px;
+	color: #666;
+    }
+
+    .key_helper .selected {
+	background-image: linear-gradient(top, #ccc, #aaa);
+	background-image: -moz-linear-gradient(top, #ccc, #aaa);
+	background-image: -o-linear-gradient(top, #ccc, #aaa);
+	background-image: -webkit-linear-gradient(top, #ccc, #aaa);
+	height: 30px;
+	padding: 0 8px;
+	color: #333;
+	font-weight: bold;
+	text-shadow: 0 1px 0 #fff;
+	display: inline-block;
+	border-right: 1px solid #aaa;
+    }
+
+    .key_helper .close {
+	font-size: 14px;
+	line-height: 26px;
+	opacity: 0.6;
+    }
+
+    .key_helper .close:hover {
+	opacity: 0.8;
+    }
+
+    .key_helper input {
+	outline: none;
+	font-size: 11px;
+	padding: 2px 8px;
+	background: #fff;
+	border: 1px solid #a1a1a1;
+	border-radius: 12px;
+	box-shadow: inset 0 0px 2px 0px #aaa;
+	margin: 2px 4px;
+	line-height: 1em;
+    }
+
+    .key_helper .error .help-inline,
+    .key_helper .error input {
+	color: #B91010;
+	font-weight: bold;
+    }
+
+    .typeahead.dropdown-menu {
+	position: fixed !important;
+	top: auto !important;
+	bottom: 30px !important;
+    }
+
+    #cog-helper {
+	position: fixed;
+	bottom: 2px;
+	right: 2px;
+	z-index: 1000;
+	opacity: 0.6;
+	transition: all .5s;
+	-webkit-transition: all .5s;
+	-moz-transition: all .5s;
+	-o-transition: all .5s;
+	-ms-transition: all .5s;
+    }
+
+    #cog-helper:hover {
+	opacity: 1;
+    }
+
+    #helper {
+	z-index: 300;
+	top: 50%;
+	position: absolute;
+	left: 50%;
+	margin-left: -220px;
+	margin-top: -35px;
+	width: 400px;
+	text-align: center;
+	color: #ddd;
+	font-size: 18px;
+	font-weight: bold;
+	text-shadow: 0 -1px 0 #111;
+	padding: 20px;
+	background: rgba(0,0,0, 0.6);
+	border-radius: 40px;
+    }
+
+    #overlay {
+	z-index: 2000;
+	background: transparent;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+    }
+
+    .confirmation, .dialog {
+	z-index: 2001;
+	background: rgba(243,243,243,0.9);
+	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
+	background-image: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
+	background-image: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
+	background-image: linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 5px, transparent 6px);
+	padding: 20px;
+	width: 250px;
+	position: fixed;
+	top: -500px;
+	left: 50%;
+	margin-left: -135px;
+	box-shadow: 0 0 6px #333;
+	transition: top .5s;
+	-webkit-transition: top .5s;
+	-moz-transition: top .5s;
+	-o-transition: top .5s;
+    }
+
+    .confirmation.large,
+    .dialog.large {
+	width: 400px;
+	margin-left: -220px;
+    }
+
+    .confirmation textarea,
+    .dialog textarea {
+	display: block;
+	width: 235px;
+    }
+
+    .confirmation.large textarea,
+    .dialog.large textarea {
+	width: 385px;
+	height: 200px;
+    }
+
+    .dialog .progress {
+	height: 5px;
+    }
+
+    .dialog .progress .bar {
+	background-color: #e9eaf5;
+	background-image: -webkit-linear-gradient(top, #B1BDD5, #8999b8);
+	background-image: -moz-linear-gradient(top, #B1BDD5, #8999b8);
+	background-image: -o-linear-gradient(top, #B1BDD5, #8999b8);
+	background-image: linear-gradient(top, #B1BDD5, #8999b8);
+	
+    }
+
+    .confirmation span,
+    .dialog span {
+	font-size: 13px;
+	font-weight: bold;
+    }
+
+    .confirmation .buttons,
+    .dialog .buttons {
+	text-align: right;
+	margin-top: 20px;
+    }
+
+    .confirmation.active,
+    .dialog.active {
+	top: 0;
+    }
+
+    .button {
+	border-radius: 3px !important;
+	background: #ccc;
+	border: 1px solid #9B9B9B;
+	height: 20px;
+	border-radius: 5px;
+	min-width: 68px;
+	padding: 0 10px;
+	text-align: center;
+	margin: 0;
+	margin-left: 10px;
+	background: -webkit-linear-gradient(bottom, rgba(0,0,0,.09) 0%, rgba(0,0,0, 0.02) 50%, rgba(0,0,0,.04) 50.5%, rgba(0,0,0,.04) 100%) #fff;
+	font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
+    }
+
+    .button.default { 
+	border-top: 1px solid #535273;
+	border: 1px solid #4F4D67;
+	border-bottom: 1px solid #4B4B58;    
+	background: -webkit-linear-gradient(bottom, rgba(255,255,255,.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255,255,255,.3) 50.5%, rgba(255,255,255,.45) 95%, rgba(255,255,255,.8) 100%) #b1bdd5;
+	background: -moz-linear-gradient(bottom, rgba(255,255,255,.5) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255,255,255,.3) 50.5%, rgba(255,255,255,.45) 95%, rgba(255,255,255,.8) 100%) #b1bdd5;
+	-moz-box-shadow: 0 0 3px rgba(69, 113, 184, 0.8);
+	-webkit-box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+	box-shadow: 0 0 5px rgba(69, 113, 184, 0.44);
+    }
+
+
+    .button:hover {
+	cursor: pointer;
+	border: 1px solid rgba(0,0,0,.6);
+    }
+
+    .button:active {
+	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+	-moz-box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+	box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+    }
+
+    .button:focus {
+	outline: 0;
+    }
+
+    .doc {
+	background: white;
+    }
+
+    .doc code .doc pre {
+	font-size: 11px;
+    }
+
+    .doc code {
+	padding: 1px 4px;
+    }
+    .doc .head {
+	background: #08C;
+	padding: 10px;
+	font-size: 22px;
+	color: white;
+    }
+
+    .doc .button {
+	float: right;
+    }
+    .doc .markdown,
+    .doc .inheritance {
+	padding: 10px;
+    }
+
+    .doc h1 {
+	font-size: 22px;
+	margin: 0 10px;
+	border-bottom: 1px solid #666;
+    }
+
+    .doc h2 {
+	font-size: 16px;
+    }
+
+    .transcript_container .list-label {
+	height: 16px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+    }
+
+    .transcript {
+	position: absolute;
+	top: 17px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+    }
+
+    .transcript textarea {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	border: 0;
+    }
+}

+ 1 - 1
helios.html

@@ -8,7 +8,7 @@
     <link type="image/x-icon" rel="shortcut icon" href="/favicon.ico"/>
     <link rel="stylesheet" type="text/css" href='css/helios.css' />
   </head>
-  <body>
+  <body id="helios">
     <div id="helper">Loading Helios...</div>
 
     <div id="includes">