Преглед изворни кода

css's inside helios namespace

Herbert Vojčík пре 10 година
родитељ
комит
aa98d8bb42
5 измењених фајлова са 2856 додато и 0 уклоњено
  1. 368 0
      helios-niflheim.css
  2. 446 0
      helios-niflheim.less
  3. 932 0
      helios.css
  4. 1073 0
      helios.less
  5. 37 0
      helios_frame.css

+ 368 - 0
helios-niflheim.css

@@ -0,0 +1,368 @@
+body[id="helios"].niflheim {
+  background: #eeeeee url('/images/squared_metal-dark.png') repeat;
+  /*		.navbar-fixed-top ul {
+		  width: 100%;
+		}*/
+  /*.tool_container .pane .nav-pills i.package {
+			background-image: url('../images/package.png');
+		}*/
+}
+body[id="helios"].niflheim .btn-group > .dropdown-menu {
+  background-color: #666;
+  border-color: #888;
+  padding: 2px 8px;
+}
+body[id="helios"].niflheim .btn-group > .dropdown-menu a {
+  /*			position: absolute;*/
+  height: 100%;
+  /*			width: 100%;*/
+}
+body[id="helios"].niflheim .btn-group > .dropdown-menu a {
+  color: #fffffb;
+}
+body[id="helios"].niflheim .navbar-fixed-top i.close {
+  background-image: url('../../images/close-dark.png');
+}
+body[id="helios"].niflheim .navbar-fixed-top .navbar-inner {
+  border-bottom: 1px solid #222;
+  border-top: 1px solid #222;
+  box-shadow: inset 0px 1px 0px #777;
+  background: #4d5052;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+body[id="helios"].niflheim .focused ::-webkit-scrollbar-thumb {
+  background-color: #4c4c4c;
+}
+body[id="helios"].niflheim .focused ::-webkit-scrollbar-thumb:hover {
+  background-color: #3a3a3a;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-thumb {
+  background-color: #585858;
+  border: 3px solid transparent;
+  border-radius: 9px;
+  background-clip: content-box;
+}
+body[id="helios"].niflheim ::-webkit-scrollbar-thumb:hover {
+  background-color: #707070;
+}
+body[id="helios"].niflheim .new_tab a b {
+  border-top: 4px solid #a7a7a7;
+}
+body[id="helios"].niflheim .navbar .nav > li > a {
+  border-right: 1px solid #222;
+  box-shadow: none;
+}
+body[id="helios"].niflheim .navbar .nav > li > a:hover {
+  color: #f00;
+  background-image: linear-gradient(top, #666666, #454648);
+  background-image: -webkit-linear-gradient(top, #666666, #454648);
+  background-image: -moz-linear-gradient(top, #666666, #454648);
+  background-image: -o-linear-gradient(top, #666666, #454648);
+}
+body[id="helios"].niflheim .navbar .nav > .active > a,
+body[id="helios"].niflheim .navbar .nav > .active > a:hover,
+body[id="helios"].niflheim .navbar .nav > .active > a:focus,
+body[id="helios"].niflheim .navbar .nav .ui-sortable-helper a {
+  color: #ddd;
+  background-image: linear-gradient(top, #666666, #454648);
+  background-image: -webkit-linear-gradient(top, #666666, #454648);
+  background-image: -moz-linear-gradient(top, #666666, #454648);
+  background-image: -o-linear-gradient(top, #666666, #454648);
+  text-shadow: none;
+  box-shadow: inset -1px 0px 1px -1px #eeeeee, inset 1px 1px 1px -1px #eeeeee;
+  border-right: 1px solid #222;
+}
+body[id="helios"].niflheim .navbar-fixed-top li.inactive {
+  opacity: 0.6;
+  background: #4d5052;
+  box-shadow: none;
+}
+body[id="helios"].niflheim .navbar-fixed-top li.inactive span {
+  text-shadow: none;
+  color: #ccc;
+}
+body[id="helios"].niflheim .nav-pills.nav-stacked > li > a {
+  color: #b8c4cf;
+}
+body[id="helios"].niflheim .focused .nav-pills.nav-stacked > li > a {
+  color: #ddd;
+}
+body[id="helios"].niflheim .nav-pills > .active > a {
+  background-color: #222B3C;
+  color: #fffffb !important;
+}
+body[id="helios"].niflheim .focused .nav-pills {
+  background-color: #585858;
+}
+body[id="helios"].niflheim .focused .nav-pills > .active > a,
+body[id="helios"].niflheim .nav-pills > .active > a:hover,
+body[id="helios"].niflheim .dropdown-menu li > a:hover,
+body[id="helios"].niflheim .dropdown-menu li > a:focus,
+body[id="helios"].niflheim .dropdown-submenu:hover > a,
+body[id="helios"].niflheim .dropdown-menu .active > a,
+body[id="helios"].niflheim .dropdown-menu .active > a:hover,
+body[id="helios"].niflheim .CodeMirror-hint-active {
+  background: #305f9f;
+}
+body[id="helios"].niflheim .CodeMirror {
+  position: initial;
+  height: 100%;
+  width: initial;
+}
+body[id="helios"].niflheim .welcome {
+  color: #fffffb;
+  text-shadow: none;
+}
+body[id="helios"].niflheim [class^="icon-"],
+body[id="helios"].niflheim body[id="helios"][class*=" icon-"] {
+  opacity: 0.68;
+  background-image: url("../../bower_components/bootstrap/img/glyphicons-halflings-white.png");
+}
+body[id="helios"].niflheim .welcome h2 {
+  text-align: center;
+  /*			color: #666;*/
+}
+body[id="helios"].niflheim .welcome button {
+  /*			background: #eee;*/
+  margin: 10px;
+  padding: 20px;
+  height: auto;
+  width: 150px;
+}
+body[id="helios"].niflheim .tool_container .panes .pane {
+  background: #444;
+}
+body[id="helios"].niflheim .tool_container .splitter.vertical {
+  border-left: 1px solid #525252;
+}
+body[id="helios"].niflheim .tool_container .splitter.horizontal {
+  border-top: 1px solid #666;
+}
+body[id="helios"].niflheim .tool_container .list-label {
+  border-bottom: 1px solid #525252;
+  background-image: linear-gradient(top, #585858, #323232);
+  background-image: -webkit-linear-gradient(top, #585858, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+  color: #ccc;
+  font-weight: normal;
+  text-shadow: none;
+}
+body[id="helios"].niflheim .transcript-container .list-label {
+  border-top: none;
+}
+body[id="helios"].niflheim .tool_container .pane_actions,
+body[id="helios"].niflheim .tool_container .buttons_bar {
+  border-top: 1px solid #222;
+  background-image: linear-gradient(top, #585858, #323232);
+  background-image: -webkit-linear-gradient(top, #585858, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+}
+body[id="helios"].niflheim .tool_container .panes .pane .pane_actions label {
+  test-shadow: none;
+  color: #d3d3d3;
+}
+body[id="helios"].niflheim .tool_container .panes .pane .pane_actions .btn {
+  border: 1px;
+  text-shadow: none;
+  margin-top: -1px;
+  color: #929292;
+}
+body[id="helios"].niflheim .tool_container .panes .pane .pane_actions .btn-group .btn.active {
+  color: #d3d3d3;
+  text-shadow: none;
+  box-shadow: inset 0px 0px 2px 0px #323232;
+  border-radius: 4px;
+  background: #666;
+  background-image: linear-gradient(top, #454545, #252525);
+  background-image: -webkit-linear-gradient(top, #454545, #252525);
+  background-image: -moz-linear-gradient(top, #454545, #252525);
+  background-image: -o-linear-gradient(top, #454545, #252525);
+}
+body[id="helios"].niflheim .tool_container .panes .pane .class_side .nav-pills {
+  background: #38404a;
+}
+body[id="helios"].niflheim .key_helper {
+  background: #444;
+  box-shadow: 0 0 80px 2px #222;
+  border: 1px solid #777;
+}
+body[id="helios"].niflheim .key_helper .command {
+  color: #ccc;
+}
+body[id="helios"].niflheim .key_helper .command strong {
+  display: inline-block;
+  min-width: 1.4em;
+  text-align: center;
+  background-color: #eee;
+  color: #2b658b;
+}
+body[id="helios"].niflheim .key_helper #binding-helper-main {
+  background: #444;
+}
+body[id="helios"].niflheim .key_helper .action {
+  vertical-align: middle;
+}
+body[id="helios"].niflheim .key_helper .selected {
+  background-image: linear-gradient(top, #484848, #323232);
+  background-image: -webkit-linear-gradient(top, #484848, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+  text-shadow: none;
+  border-bottom: 1px solid #585858;
+  color: #cccccc;
+}
+body[id="helios"].niflheim .growl {
+  background-image: -webkit-linear-gradient(#505050, #3c3c3c);
+  background-image: -moz-linear-gradient(#505050, #3c3c3c);
+  background-image: -o-linear-gradient(#505050, #3c3c3c);
+  background-image: linear-gradient(#888888, #666666);
+  box-shadow: 0 0 3px #777;
+  color: #ccc;
+  text-shadow: none;
+}
+body[id="helios"].niflheim .button {
+  color: #d3d3d3;
+  border-radius: 3px !important;
+  border: 1px solid #383838;
+  background-image: linear-gradient(top, #454545, #252525);
+  background-image: -webkit-linear-gradient(top, #454545, #252525);
+  background-image: -moz-linear-gradient(top, #454545, #252525);
+  background-image: -o-linear-gradient(top, #454545, #252525);
+}
+body[id="helios"].niflheim .button.default {
+  color: #d3d3d3;
+  border: 1px solid #585858;
+  background-image: linear-gradient(top, #549ceb, #12374f);
+  background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+  background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+  background-image: -o-linear-gradient(top, #549ceb, #12374f);
+}
+body[id="helios"].niflheim .dialog .button {
+  color: #444;
+  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;
+  background: -moz-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;
+  background: -o-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;
+  background: -ms-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;
+  background: 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;
+}
+body[id="helios"].niflheim .dialog .button:hover {
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  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;
+  background: -moz-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;
+  background: -o-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;
+  background: -ms-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;
+  background: 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;
+}
+body[id="helios"].niflheim .dialog .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;
+  background: -o-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: -ms-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: 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);
+}
+body[id="helios"].niflheim .dialog .button.default:hover {
+  cursor: pointer;
+  color: #d3d3d3;
+  border: 1px solid #585858;
+  background-image: linear-gradient(top, #549ceb, #12374f);
+  background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+  background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+  background-image: -o-linear-gradient(top, #549ceb, #12374f);
+}
+body[id="helios"].niflheim .button:hover {
+  cursor: pointer;
+  border: 1px solid #444;
+  background-image: linear-gradient(top, #353535, #151515);
+  background-image: -webkit-linear-gradient(top, #353535, #151515);
+  background-image: -moz-linear-gradient(top, #353535, #151515);
+  background-image: -o-linear-gradient(top, #353535, #151515);
+}
+body[id="helios"].niflheim .button.default:hover {
+  cursor: pointer;
+  border: 1px solid #4F4D67;
+  border-top: 1px solid #535273;
+  border-bottom: 1px solid #4B4B58;
+  color: #0a0000;
+  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+  -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);
+}
+body[id="helios"].niflheim .doc {
+  background: transparent;
+  color: #ccc;
+}
+body[id="helios"].niflheim .doc code {
+  color: #d46e69;
+  background-color: #626262;
+  border-color: #888;
+}
+body[id="helios"].niflheim .doc .button {
+  background-image: linear-gradient(top, #444444, #1d1d1d);
+  background-image: -webkit-linear-gradient(top, #444444, #1d1d1d);
+  background-image: -moz-linear-gradient(top, #444444, #1d1d1d);
+  background-image: -o-linear-gradient(top, #444444, #1d1d1d);
+}
+body[id="helios"].niflheim .doc .button.default {
+  background-image: linear-gradient(top, #585858, #323232);
+  background-image: -webkit-linear-gradient(top, #585858, #323232);
+  background-image: -moz-linear-gradient(top, #585858, #323232);
+  background-image: -o-linear-gradient(top, #585858, #323232);
+}
+body[id="helios"].niflheim .doc .button.default:hover {
+  color: #ccc;
+  background-image: linear-gradient(top, #454545, #252525);
+  background-image: -webkit-linear-gradient(top, #454545, #252525);
+  background-image: -moz-linear-gradient(top, #454545, #252525);
+  background-image: -o-linear-gradient(top, #454545, #252525);
+}
+body[id="helios"].niflheim .doc .markdown > pre {
+  background-color: #666;
+  border: 1px solid #383838;
+}
+body[id="helios"].niflheim .doc .inheritance > a {
+  color: #4098ed;
+}
+body[id="helios"].niflheim .doc .inheritance > a:hover {
+  color: #4098ed;
+}
+body[id="helios"].niflheim .transcript textarea {
+  background: #444;
+  color: #b8c4cf;
+}
+body[id="helios"].niflheim .hl_debugger .list-label {
+  border-top: 1px solid transparent;
+}

+ 446 - 0
helios-niflheim.less

@@ -0,0 +1,446 @@
+body[id="helios"] {
+	&.niflheim {
+		background: #eeeeee url('/images/squared_metal-dark.png') repeat;
+
+		.btn-group > .dropdown-menu {
+			background-color: #666;
+			border-color: #888;
+			padding: 2px 8px;
+		}
+	
+		.btn-group > .dropdown-menu a {
+			// todo: remove
+/*			position: absolute;*/
+		
+			height: 100%;
+		
+			// todo: remove
+/*			width: 100%;*/
+		}
+	
+		.btn-group > .dropdown-menu a {
+		  color: #fffffb;
+		}
+	
+		// todo: check if it can be removed
+/*		.navbar-fixed-top ul {
+		  width: 100%;
+		}*/
+
+		.navbar-fixed-top i.close {
+		  background-image: url('../../images/close-dark.png');
+		}
+
+		.navbar-fixed-top .navbar-inner {
+		  border-bottom: 1px solid #222;
+		  border-top: 1px solid #222;
+		  box-shadow: inset 0px 1px 0px #777;
+		  background: #4d5052;
+		}
+
+		::-webkit-scrollbar {  
+		  width: 14px;
+		  height: 14px;
+		}  
+
+		::-webkit-scrollbar-corner {
+		  background-color: transparent;
+		}
+
+		::-webkit-scrollbar-track {  
+		  background-color: transparent;
+		}  
+
+		.focused ::-webkit-scrollbar-thumb {
+		  background-color: #4c4c4c;
+		}
+
+		.focused ::-webkit-scrollbar-thumb:hover {
+		  background-color: #3a3a3a;
+		}
+
+		::-webkit-scrollbar-thumb {
+		  background-color: #585858;
+		  border: 3px solid transparent;
+		  border-radius: 9px;
+		  background-clip: content-box;
+		}  
+
+		::-webkit-scrollbar-thumb:hover {  
+		  background-color: #707070;
+		}
+
+		.new_tab  a  b {
+		  border-top: 4px solid #a7a7a7;
+		}
+
+		.navbar .nav > li > a {
+		  border-right: 1px solid #222;
+		  box-shadow: none;
+		}
+	
+		.navbar .nav > li > a:hover {
+		  color: #f00;
+		  background-image: linear-gradient(top, #666, #454648);
+		  background-image: -webkit-linear-gradient(top, #666, #454648);
+		  background-image: -moz-linear-gradient(top, #666, #454648);
+		  background-image: -o-linear-gradient(top, #666, #454648);
+		}
+	
+		.navbar .nav > .active > a,
+		.navbar .nav > .active > a:hover,
+		.navbar .nav > .active > a:focus,
+		.navbar .nav .ui-sortable-helper a {
+		  color: #ddd;
+		  background-image: linear-gradient(top, #666, #454648);
+		  background-image: -webkit-linear-gradient(top, #666, #454648);
+		  background-image: -moz-linear-gradient(top, #666, #454648);
+		  background-image: -o-linear-gradient(top, #666, #454648);
+		  text-shadow: none;
+		  box-shadow: inset -1px 0px 1px -1px #eee, inset 1px 1px 1px -1px #eee;
+		  border-right: 1px solid #222;
+		}
+	
+		.navbar-fixed-top li.inactive{
+		  opacity: 0.6;
+		  background: #4d5052;
+		  box-shadow: none;
+		}
+
+		.navbar-fixed-top li.inactive span{
+		  text-shadow: none;
+		  color: #ccc;
+		}
+	
+		.nav-pills.nav-stacked > li > a {
+		  color: #b8c4cf;
+		}
+
+		.focused .nav-pills.nav-stacked > li > a {
+		  color: #ddd;
+		}
+	
+		.nav-pills > .active > a {
+		  background-color: #222B3C;
+		  color: #fffffb !important;
+		}
+		.focused .nav-pills {
+		  background-color: #585858;
+		}
+	
+		.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: #305f9f;
+		}
+		
+		.CodeMirror {
+			position: initial;
+			height: 100%;
+			width: initial;
+		}
+	
+		.welcome {
+			color: #fffffb;
+			text-shadow: none;
+		}
+
+		[class^="icon-"], body[id="helios"][class*=" icon-"]{
+			opacity: 0.68;
+			background-image: url("../../bower_components/bootstrap/img/glyphicons-halflings-white.png");
+		}
+
+		.welcome h2 {
+			text-align: center;
+	  
+			// todo: remove
+/*			color: #666;*/
+		}
+	
+		.welcome button {
+			// todo: remove 
+/*			background: #eee;*/
+
+			margin: 10px;
+			padding: 20px;
+			height: auto;
+			width: 150px;
+		}
+	
+		.tool_container .panes .pane {
+			background: #444;
+		}
+	
+		.tool_container .splitter.vertical {
+			border-left: 1px solid #525252;
+		}
+	
+		.tool_container .splitter.horizontal {
+			border-top: 1px solid #666;
+		}
+	
+		//todo: remove
+		/*.tool_container .pane .nav-pills i.package {
+			background-image: url('../images/package.png');
+		}*/
+
+		.tool_container .list-label {
+			border-bottom: 1px solid #525252;
+			background-image: linear-gradient(top, #585858, #323232);
+			background-image: -webkit-linear-gradient(top, #585858, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+			color: #ccc;
+		
+			font-weight: normal;
+			text-shadow: none;
+		}
+	
+		.transcript-container .list-label {
+		  border-top: none;
+		}
+	
+		.tool_container .pane_actions,
+		.tool_container .buttons_bar {
+			border-top: 1px solid #222;
+			background-image: linear-gradient(top, #585858, #323232);
+			background-image: -webkit-linear-gradient(top, #585858, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+		}
+
+		.tool_container .panes .pane .pane_actions label {
+			test-shadow: none;
+			color: #d3d3d3;
+		}
+	
+		.tool_container .panes .pane .pane_actions .btn {
+		  border: 1px;
+		  text-shadow: none;
+		  margin-top: -1px;
+		  color: #929292
+		}
+
+		.tool_container .panes .pane .pane_actions .btn-group .btn.active {
+			color: #d3d3d3;
+			text-shadow: none;
+			box-shadow: inset 0px 0px 2px 0px #323232;
+			border-radius: 4px;
+			background: #666;
+			background-image: linear-gradient(top, #454545, #252525);
+			background-image: -webkit-linear-gradient(top, #454545, #252525);
+			background-image: -moz-linear-gradient(top, #454545, #252525);
+			background-image: -o-linear-gradient(top, #454545, #252525);
+		}
+	
+		.tool_container .panes .pane .class_side .nav-pills {
+			background: #38404a;
+		}
+
+		.key_helper {
+			background: #444;
+			box-shadow: 0 0 80px 2px #222;
+			border: 1px solid #777;
+		}
+	
+		.key_helper .command {
+		  color: #ccc;
+		}
+
+		.key_helper .command strong {
+			display: inline-block;
+			min-width: 1.4em;
+			text-align: center;
+			background-color: #eee;
+			color: #2b658b;
+		}
+	
+		.key_helper #binding-helper-main {
+			background: #444;
+		}
+
+		.key_helper .action {
+			vertical-align: middle;
+		}
+	
+		.key_helper .selected {
+			background-image: linear-gradient(top, #484848, #323232);
+			background-image: -webkit-linear-gradient(top, #484848, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+			text-shadow: none;
+			border-bottom: 1px solid #585858;
+			color: #ccc
+		}
+	
+		.growl {
+			background-image: -webkit-linear-gradient(#505050, #3c3c3c);
+			background-image: -moz-linear-gradient(#505050, #3c3c3c);
+			background-image: -o-linear-gradient(#505050, #3c3c3c);
+			background-image: linear-gradient(#888, #666);
+			box-shadow: 0 0 3px #777;
+			color: #ccc;
+			text-shadow: none;
+		}
+	
+		.button {
+			color: #d3d3d3;
+			border-radius: 3px !important;
+			border: 1px solid #383838;
+			background-image: linear-gradient(top, #454545, #252525);
+			background-image: -webkit-linear-gradient(top, #454545, #252525);
+			background-image: -moz-linear-gradient(top, #454545, #252525);
+			background-image: -o-linear-gradient(top, #454545, #252525);
+		}
+
+		.button.default {
+			color: #d3d3d3;
+			border: 1px solid #585858;
+			background-image: linear-gradient(top, #549ceb, #12374f);
+			background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+			background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+			background-image: -o-linear-gradient(top, #549ceb, #12374f);
+		}
+
+		.dialog .button {
+			color: #444;
+			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;
+			background: -moz-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;
+			background: -o-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;
+			background: -ms-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;
+			background: 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; 
+		}
+	
+		.dialog .button:hover {
+			cursor: pointer;
+			border: 1px solid rgba(0, 0, 0, 0.6);
+			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;
+			background: -moz-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;
+			background: -o-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;
+			background: -ms-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;
+			background: 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;
+		}
+
+		.dialog .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;
+		  background: -o-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: -ms-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: 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);
+		}
+
+		.dialog .button.default:hover {
+			cursor: pointer;
+			color: #d3d3d3;
+			border: 1px solid #585858;
+			background-image: linear-gradient(top, #549ceb, #12374f);
+			background-image: -webkit-linear-gradient(top, #549ceb, #12374f);
+			background-image: -moz-linear-gradient(top, #549ceb, #12374f);
+			background-image: -o-linear-gradient(top, #549ceb, #12374f);
+		}
+
+		.button:hover {
+			cursor: pointer;
+			border: 1px solid #444;
+			background-image: linear-gradient(top, #353535, #151515);
+			background-image: -webkit-linear-gradient(top, #353535, #151515);
+			background-image: -moz-linear-gradient(top, #353535, #151515);
+			background-image: -o-linear-gradient(top, #353535, #151515);
+		}
+
+		.button.default:hover {
+			cursor: pointer;
+			border: 1px solid #4F4D67;
+			border-top: 1px solid #535273;
+			border-bottom: 1px solid #4B4B58;
+			color: #0a0000;
+
+			background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			background: linear-gradient(bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.45) 95%, rgba(255, 255, 255, 0.8) 100%) #549ceb;
+			-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);
+		}
+	
+		.doc {
+			background: transparent;
+			color: #ccc;
+		}
+
+		.doc code {
+			color: #d46e69;
+			background-color: #626262;
+			border-color: #888;
+  
+		}
+	
+		.doc .button {
+			background-image: linear-gradient(top, #444, #1d1d1d);
+			background-image: -webkit-linear-gradient(top, #444, #1d1d1d);
+			background-image: -moz-linear-gradient(top, #444, #1d1d1d);
+			background-image: -o-linear-gradient(top, #444, #1d1d1d);
+		}
+
+		.doc .button.default {
+			background-image: linear-gradient(top, #585858, #323232);
+			background-image: -webkit-linear-gradient(top, #585858, #323232);
+			background-image: -moz-linear-gradient(top, #585858, #323232);
+			background-image: -o-linear-gradient(top, #585858, #323232);
+		}
+
+		.doc .button.default:hover {
+			color: #ccc;
+			background-image: linear-gradient(top, #454545, #252525);
+			background-image: -webkit-linear-gradient(top, #454545, #252525);
+			background-image: -moz-linear-gradient(top, #454545, #252525);
+			background-image: -o-linear-gradient(top, #454545, #252525);
+		}
+	
+		.doc .markdown > pre {
+			background-color: #666;
+			border: 1px solid #383838;
+		}
+
+		.doc .inheritance > a {
+			color: #4098ed;
+		}
+
+		.doc .inheritance > a:hover {
+			color: #4098ed;
+		}
+	
+		.transcript textarea {
+			background: #444;
+			color: #b8c4cf;
+		}
+	
+		.hl_debugger .list-label {
+			border-top: 1px solid transparent;
+		}
+	}
+}

+ 932 - 0
helios.css

@@ -0,0 +1,932 @@
+.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%;
+}
+body.navigation .CodeMirror pre {
+  cursor: pointer !important;
+}
+.cm-s-helios.CodeMirror {
+  font-family: Consolas, "Liberation Mono", Courier, monospace;
+  line-height: 16px;
+  font-size: 13px;
+}
+.cm-s-helios .CodeMirror-gutter.stops {
+  width: 20px;
+}
+.cm-s-helios .highlighted.CodeMirror-linebackground {
+  background-color: #ffffaa;
+}
+.cm-s-helios .CodeMirror-gutter-elt .stop {
+  width: 16px;
+  height: 16px;
+  background: url('../../images/arrowRight.png');
+  margin-left: 2px;
+}
+body#helios {
+  font-size: 11px;
+  font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
+  background: #eeeeee url(/images/squared_metal.png) repeat;
+}
+body#helios a {
+  cursor: pointer;
+}
+body#helios i {
+  opacity: 1;
+}
+body#helios [class^="icon-"],
+body#helios [class*=" icon-"] {
+  margin-top: 0;
+}
+body#helios .CodeMirror {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+body#helios .CodeMirror-hints {
+  border-radius: 0;
+  font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
+  font-size: 11px;
+  line-height: 1em;
+  padding: 0;
+  max-height: 120px;
+}
+body#helios .CodeMirror-hint {
+  border-radius: 0;
+  padding: 0 10px;
+}
+body#helios .state {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+  width: 16px;
+  height: 16px;
+}
+body#helios .state.modified {
+  background: transparent url('../../images/modified.png') 50% 50% no-repeat;
+}
+body#helios .editor {
+  position: absolute;
+  top: 0;
+  bottom: 23px;
+  left: 0;
+  right: 0;
+}
+body#helios .hl_widget:focus {
+  outline: 0 none;
+}
+body#helios .buttons_bar {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  padding: 0px 25px;
+  height: 21px;
+  line-height: 18px;
+  border-top: 1px solid #999;
+  text-align: right;
+}
+body#helios .buttons_bar .button {
+  height: 17px;
+  font-size: 12px;
+  min-width: 0;
+}
+body#helios .btn,
+body#helios .btn-group > .btn,
+body#helios .btn-group > .dropdown-menu {
+  padding: 2px 8px;
+}
+body#helios .navbar-fixed-top {
+  font-size: 11px;
+  line-height: 16px;
+}
+body#helios .navbar-fixed-top ul {
+  width: 100%;
+}
+body#helios .navbar-fixed-top a span,
+body#helios .dialog .nav a span {
+  padding: 1px;
+  padding-left: 18px;
+  background-position: center left;
+  background-repeat: no-repeat;
+  background-position: 0px center;
+  height: 22px;
+}
+body#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: 4px;
+}
+body#helios .navbar-fixed-top a span.references,
+body#helios .dialog .nav a span.references {
+  background-image: url('../../images/references.png');
+}
+body#helios .navbar-fixed-top a span.browser,
+body#helios .dialog .nav a span.browser {
+  background-image: url('../../images/browser.png');
+}
+body#helios .navbar-fixed-top a span.sunit,
+body#helios .dialog .nav a span.sunit {
+  background-image: url('../../images/sunit.png');
+}
+body#helios .navbar-fixed-top a span.workspace,
+body#helios .dialog .nav a span.workspace {
+  background-image: url('../../images/workspace.png');
+}
+body#helios .navbar-fixed-top a span.debugger,
+body#helios .dialog .nav a span.debugger {
+  background-image: url('../../images/debugger.png');
+}
+body#helios .navbar-fixed-top a span.inspector,
+body#helios .dialog .nav a span.inspector {
+  background-image: url('../../images/inspector.png');
+}
+body#helios .navbar-fixed-top .navbar-inner {
+  min-height: 24px;
+  border-bottom: 1px solid #666;
+  box-shadow: inset 0px 2px 2px #aaa;
+  background: #bababa;
+}
+body#helios .navbar .nav > li {
+  line-height: 16px;
+  text-align: center;
+  max-width: 300px;
+}
+body#helios .new_tab {
+  width: 20px;
+  height: 24px;
+  line-height: 24px;
+  border-right: 0 none;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 2000;
+}
+body#helios .new_tab a {
+  color: #444;
+}
+body#helios .new_tab a:hover {
+  text-decoration: none;
+}
+body#helios .new_tab .dropdown-menu {
+  left: auto;
+  float: right;
+  right: 0;
+}
+body#helios .dropdown-menu {
+  min-width: 0;
+  text-align: left;
+}
+body#helios .navbar .nav > li > a {
+  line-height: 22px;
+  padding: 0px 8px;
+  font-size: 11px;
+  border-right: 1px solid #777;
+  text-shadow: #ddd 0px 1px 0px;
+  color: #222;
+}
+body#helios .navbar .nav > li > a span {
+  display: block;
+  overflow: hidden;
+}
+body#helios .nav > li > a:hover {
+  background: transparent;
+}
+body#helios .navbar .nav > li > a:hover {
+  color: #333;
+  background-image: linear-gradient(top, #cfcfcf, #c0c0c0);
+  background-image: -webkit-linear-gradient(top, #cfcfcf, #c0c0c0);
+  background-image: -moz-linear-gradient(top, #cfcfcf, #c0c0c0);
+  background-image: -o-linear-gradient(top, #cfcfcf, #c0c0c0);
+  text-shadow: 0 1px 0 #ddd;
+  box-shadow: 0 0 0;
+}
+body#helios .navbar .nav > .active > a,
+body#helios .navbar .nav > .active > a:hover,
+body#helios .navbar .nav > .active > a:focus,
+body#helios .navbar .nav .ui-sortable-helper a {
+  color: #444;
+  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: -o-linear-gradient(top, #dfdfdf, #d0d0d0);
+  text-shadow: 0 1px 0 #ddd;
+  box-shadow: 0 0 0;
+}
+body#helios .navbar .nav .ui-sortable-helper a {
+  border-left: 1px solid #777;
+}
+body#helios .navbar-fixed-top i {
+  opacity: 0.4;
+  margin-right: 5px;
+  height: 12px;
+  margin-top: 0;
+}
+body#helios .navbar-fixed-top .active i {
+  opacity: 0.6;
+}
+body#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;
+}
+body#helios [class^="icon-"],
+body#helios [class*=" icon-"] {
+  margin-right: 2px;
+}
+body#helios .dropdown-menu {
+  border-radius: 0;
+  padding: 0;
+  margin: 3px;
+}
+body#helios .nav-pills > .active > a {
+  background-color: #ddd;
+  color: #fff;
+  text-shadow: 0 0 0;
+}
+body#helios .focused .nav-pills {
+  background-color: #f3f7fb;
+}
+body#helios .focused .nav-pills > .active > a,
+body#helios .nav-pills > .active > a:hover,
+body#helios .dropdown-menu li > a:hover,
+body#helios .dropdown-menu li > a:focus,
+body#helios .dropdown-submenu:hover > a,
+body#helios .dropdown-menu .active > a,
+body#helios .dropdown-menu .active > a:hover,
+body#helios .CodeMirror-hint-active {
+  background: rgba(95, 159, 228, 0.62);
+  color: #fff;
+  text-shadow: 0 0 0;
+}
+body#helios .welcome {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -170px;
+  width: 340px;
+  margin-top: 60px;
+  text-shadow: 0 1px 0 #fafafa;
+  color: #666;
+  font-size: 14px;
+}
+body#helios .welcome h2 {
+  text-align: center;
+  color: #666;
+}
+body#helios .welcome button {
+  background: #eee;
+  margin: 10px;
+  padding: 20px;
+  height: auto;
+  width: 150px;
+}
+body#helios .tool_container {
+  position: absolute;
+  top: 23px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+body#helios .transcript textarea {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+body#helios .tool_container .panes {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+body#helios .tool_container .panes .pane {
+  position: absolute;
+  overflow: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fefefe;
+}
+body#helios .tool_container .multi_pane {
+  position: relative;
+  height: 100%;
+  width: auto;
+  overflow-x: auto;
+}
+body#helios .tool_container .multi_pane .pane {
+  height: 100%;
+  max-width: 300px;
+  border-right: 1px solid #888;
+}
+body#helios .tool_container .panes .pane > div {
+  height: 100%;
+  position: relative;
+}
+body#helios .tool_container .panes.horizontal > .pane {
+  min-height: 50px;
+}
+body#helios .tool_container .panes.horizontal > .pane {
+  top: 50%;
+}
+body#helios .tool_container .panes.horizontal > .pane:first-child {
+  top: 0;
+  bottom: 50%;
+}
+body#helios .tool_container .panes.vertical > .pane {
+  left: 50%;
+}
+body#helios .tool_container .panes.vertical > .pane:first-child {
+  left: 0;
+  right: 50%;
+}
+body#helios .tool_container .splitter {
+  position: absolute;
+  border-width: 0;
+  z-index: 10;
+}
+body#helios .tool_container .splitter.vertical {
+  width: 5px;
+  left: 50%;
+  margin-left: -1px;
+  border-left: 1px solid #888;
+  height: 100%;
+  float: left;
+  cursor: ew-resize;
+}
+body#helios .tool_container .splitter.horizontal {
+  top: 50%;
+  height: 5px;
+  margin-top: -1px;
+  width: 100%;
+  border-top: 1px solid #888;
+  cursor: ns-resize;
+}
+body#helios .tool_container .panes .pane .nav-pills {
+  position: absolute;
+  overflow-y: auto;
+  top: 17px;
+  bottom: 17px;
+  width: 100%;
+  margin: 0;
+}
+body#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;
+}
+body#helios .tool_container .pane .nav-pills i.announcement {
+  background-image: url('../../images/announcement.png');
+}
+body#helios .tool_container .pane .nav-pills i.class {
+  background-image: url('../../images/class.png');
+}
+body#helios .tool_container .pane .nav-pills i.collection {
+  background-image: url('../../images/collection.png');
+}
+body#helios .tool_container .pane .nav-pills i.test {
+  background-image: url('../../images/test.png');
+}
+body#helios .tool_container .pane .nav-pills i.exception {
+  background-image: url('../../images/exception.png');
+}
+body#helios .tool_container .pane .nav-pills i.widget {
+  background-image: url('../../images/widget.png');
+}
+body#helios .tool_container .pane .nav-pills i.magnitude {
+  background-image: url('../../images/magnitude.png');
+}
+body#helios .tool_container .pane .nav-pills i.package {
+  background-image: url('../../images/package.png');
+}
+body#helios .tool_container .pane .nav-pills i.package_dirty {
+  background-image: url('../../images/package-dirty.png');
+}
+body#helios .tool_container .pane .nav-pills i.private {
+  background-image: url('../../images/private.png');
+}
+body#helios .tool_container .pane .nav-pills i.extension {
+  background-image: url('../../images/extension.png');
+}
+body#helios .tool_container .pane .nav-pills i.initialization {
+  background-image: url('../../images/initialization.png');
+}
+body#helios .tool_container .pane .nav-pills i.package {
+  background-image: url('../../images/package.png');
+}
+body#helios .tool_container .pane .nav-pills i.override {
+  background-image: url('../images/override.png ');
+}
+body#helios .tool_container .pane .nav-pills i.overridden {
+  background-image: url('../../images/overridden.png');
+}
+body#helios .tool_container .pane .nav-pills i.override-overridden {
+  background-image: url('../../images/override-overridden.png');
+}
+body#helios .tool_container .pane .nav-pills i.warning {
+  background-image: url('../images/warning.gif');
+}
+body#helios .tool_container .pane .nav-pills i.uncommented {
+  background-image: url('../../images/uncommented.png');
+}
+body#helios .tool_container .list-label {
+  font-size: 11px;
+  border-radius: 0;
+  border-bottom: 1px solid #999;
+  border-top: 1px solid #eee;
+  background-color: #eee;
+  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
+  background-image: linear-gradient(top, #eeeeee, #dddddd);
+  color: #444;
+  font-weight: bold;
+  text-shadow: 0 0 0;
+  padding-left: 4px;
+  line-height: 14px;
+  height: 15px;
+  text-shadow: 0 1px 0 #eee;
+}
+body#helios .tool_container .list-label .btn-group.cog {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+}
+body#helios .tool_container .list-label .btn-group.open .dropdown-toggle {
+  box-shadow: 0 0 0;
+  border: 0;
+}
+body#helios .tool_container .list-label .btn-group > .dropdown-menu {
+  padding: 0;
+  font-size: 11px;
+}
+body#helios .tool_container .list-label .btn-group.cog i {
+  margin-top: 1px;
+}
+body#helios .tool_container .list-label .cog .btn.dropdown-toggle {
+  padding: 0;
+  margin: 0;
+  line-height: 12px;
+  border: 0;
+  background: transparent;
+}
+body#helios .tool_container .panes .pane .pane_actions {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 16px;
+  bottom: 0;
+  padding: 0;
+  margin: 0;
+}
+body#helios .tool_container .pane_actions,
+body#helios .tool_container .buttons_bar {
+  background: #dadada;
+  border-top: 1px solid #666;
+  background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
+  background-image: -moz-linear-gradient(top, #dadada, #bdbdbd);
+  background-image: -o-linear-gradient(top, #dadada, #bdbdbd);
+  background-image: linear-gradient(top, #dadada, #bdbdbd);
+}
+body#helios .tool_container .panes .pane .pane_actions .info {
+  padding: 10px 5px 5px;
+  font-weight: bold;
+  color: #666;
+  line-height: 20px;
+}
+body#helios .tool_container .panes .pane .pane_actions .btn-group {
+  display: inline;
+  margin-left: 5px;
+}
+body#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;
+}
+body#helios .tool_container .panes .pane .pane_actions label input {
+  float: none;
+  vertical-align: top;
+  margin-top: 2px;
+  margin-right: 5px;
+}
+body#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; */
+}
+body#helios .tool_container .panes .pane .pane_actions .btn:hover {
+  background-color: #bbb;
+}
+body#helios .tool_container .panes .pane .pane_actions .btn-group .btn:hover {
+  background-color: transparent;
+}
+body#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);
+}
+body#helios .tool_container .panes .pane .class_side .nav-pills {
+  font-weight: bold;
+  background: #ffffdd;
+}
+body#helios .key_helper {
+  z-index: 2001;
+  position: fixed;
+  top: 120px;
+  left: 50%;
+  width: 400px;
+  max-height: 300px;
+  margin-left: -200px;
+  background: white;
+  box-shadow: 0 0 6px #aaa;
+  border: 1px solid #aaa;
+  font-size: 11px;
+  transition: all .5s;
+  -webkit-transition: all .5s;
+  -moz-transition: all .5s;
+  -o-transition: all .5s;
+  -ms-transition: all .5s;
+}
+body#helios .key_helper .command {
+  padding: 0;
+  display: inline-block;
+  width: 50%;
+}
+body#helios .key_helper .command strong {
+  display: inline-block;
+  min-width: 1.4em;
+  text-align: left;
+}
+body#helios .key_helper #binding-helper-main {
+  display: block;
+  padding: 5px;
+  background: #eee;
+}
+body#helios .key_helper .label {
+  padding: 1px 4px;
+  font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+  background: transparent;
+  color: #0E4561;
+  text-shadow: none;
+  border: 0 none;
+}
+body#helios .key_helper .action {
+  padding: 0 0.5em 0 5px;
+  color: inherit;
+  font-weight: bold;
+}
+body#helios .key_helper .selected {
+  background-image: linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: -moz-linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: -o-linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: -webkit-linear-gradient(top, #cccccc, #bbbbbb);
+  height: 28px;
+  padding: 0 8px;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 28px;
+  text-shadow: 0 1px 0 #fff;
+  display: block;
+  border-bottom: 1px solid #aaa;
+}
+body#helios .key_helper .close {
+  font-size: 14px;
+  line-height: 28px;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  right: 4px;
+}
+body#helios .key_helper .close:hover {
+  opacity: 0.8;
+}
+body#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;
+}
+body#helios .key_helper .error .help-inline,
+body#helios .key_helper .error input {
+  color: #B91010;
+  font-weight: bold;
+}
+body#helios .key_helper #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;
+}
+body#helios .key_helper #cog-helper:hover {
+  opacity: 1;
+}
+body#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;
+}
+body#helios #overlay {
+  z-index: 2000;
+  background: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+body#helios .growl {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  z-index: 2001;
+  width: 200px;
+  height: auto;
+  padding: 15px;
+  background-image: -webkit-linear-gradient(#ffffff, #ebebeb);
+  background-image: -moz-linear-gradient(#ffffff, #ebebeb);
+  background-image: -o-linear-gradient(#ffffff, #ebebeb);
+  background-image: linear-gradient(#ffffff, #ebebeb);
+  border: 1px solid #aaa;
+  border-radius: 8px;
+  box-shadow: 0 0 3px #ccc;
+  font-weight: bold;
+  text-shadow: 0px 2px 1px #fff;
+}
+body#helios .confirmation,
+body#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 .2s;
+  -webkit-transition: top .2s;
+  -moz-transition: top .2s;
+  -o-transition: top .2s;
+}
+body#helios .confirmation .head,
+body#helios .dialog .head {
+  display: block;
+}
+body#helios .confirmation .hl_widget .form-actions,
+body#helios .dialog .hl_widget .form-actions {
+  padding: 0;
+  border: 0;
+}
+body#helios .confirmation .nav,
+body#helios .dialog .nav {
+  border: 1px solid #999;
+}
+body#helios .confirmation .nav span,
+body#helios .dialog .nav span {
+  font-size: 11px;
+  font-weight: normal;
+}
+body#helios .confirmation .title,
+body#helios .dialog .title {
+  font-size: 16px;
+  margin-bottom: 15px;
+}
+body#helios .confirmation.large,
+body#helios .dialog.large {
+  width: 400px;
+  margin-left: -220px;
+}
+body#helios .confirmation.large textarea,
+body#helios .dialog.large textarea {
+  width: 385px;
+  height: 200px;
+}
+body#helios .confirmation textarea,
+body#helios .dialog textarea {
+  display: block;
+  width: 235px;
+}
+body#helios .confirmation input[type="text"],
+body#helios .dialog input[type="text"] {
+  margin: 5px 0;
+  width: 390px;
+}
+body#helios .confirmation .progress,
+body#helios .dialog .progress {
+  height: 5px;
+}
+body#helios .confirmation .progress .bar,
+body#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);
+}
+body#helios .confirmation span,
+body#helios .dialog span {
+  font-size: 13px;
+  font-weight: bold;
+}
+body#helios .confirmation .buttons,
+body#helios .dialog .buttons {
+  text-align: right;
+  margin-top: 20px;
+}
+body#helios .confirmation.active,
+body#helios .dialog.active {
+  top: 0;
+}
+body#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;
+  background: -moz-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;
+  background: -o-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;
+  background: -ms-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;
+  background: 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;
+}
+body#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;
+  background: -o-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: -ms-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: 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);
+}
+body#helios .button:hover {
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+}
+body#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);
+}
+body#helios .button:focus {
+  outline: 0;
+  border-color: #08C;
+  box-shadow: 0 0 5px #08C;
+}
+body#helios .doc {
+  background: white;
+}
+body#helios .doc code .doc pre,
+body#helios .doc p,
+body#helios .doc div {
+  font-size: 13px;
+}
+body#helios .doc code {
+  padding: 1px 4px;
+}
+body#helios .doc .head {
+  background: #666;
+  padding: 10px;
+  font-size: 22px;
+  color: white;
+}
+body#helios .focused .doc .head {
+  background: #08c;
+}
+body#helios .doc .button {
+  float: right;
+}
+body#helios .doc .markdown,
+body#helios .doc .inheritance {
+  padding: 10px;
+}
+body#helios .doc h1 {
+  font-size: 22px;
+  margin: 0 10px;
+  border-bottom: 1px solid #666;
+}
+body#helios .doc h2 {
+  font-size: 16px;
+}
+body#helios .transcript_container .list-label {
+  height: 16px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+body#helios .transcript {
+  position: absolute;
+  top: 17px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+body#helios .transcript textarea {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+body#helios .hl_debugger .tool_container {
+  top: 53px;
+}
+body#helios .hl_debugger .head {
+  position: absolute;
+  top: 23px;
+  width: 100%;
+  background: #0088cc url(/images/debugger.png) 10px center no-repeat;
+  border-bottom: 1px solid white;
+}
+body#helios .hl_debugger .head h2 {
+  font-size: 14px;
+  line-height: 30px;
+  padding: 0 30px;
+  margin: 0;
+  color: white;
+}

+ 1073 - 0
helios.less

@@ -0,0 +1,1073 @@
+.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%;
+}
+
+body.navigation .CodeMirror pre {
+	cursor: pointer !important;
+}
+
+.cm-s-helios {
+	&.CodeMirror {
+		font-family: Consolas, "Liberation Mono", Courier, monospace;
+		line-height: 16px;
+		font-size: 13px;
+	}
+
+	.CodeMirror-gutter.stops {
+		width: 20px;
+	}
+
+	.highlighted.CodeMirror-linebackground {
+		background-color: #ffffaa;
+	}
+
+	.CodeMirror-gutter-elt .stop {
+		width: 16px;
+		height: 16px;
+		background: url('../../images/arrowRight.png');
+		margin-left: 2px;
+	}
+}
+
+body#helios {
+	font-size: 11px;
+	font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
+	background: #eee url(/images/squared_metal.png) repeat;
+
+	a {
+		cursor: pointer;
+	}
+
+	i {
+		opacity: 1;
+	}
+
+	[class^="icon-"], [class*=" icon-"] {
+		margin-top: 0;
+	}
+
+	.CodeMirror {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+	}
+
+	.CodeMirror-hints {
+		border-radius: 0;
+		font-family: "Lucida Grande", "Segoe UI", helvetica, arial, sans-serif;
+		font-size: 11px;
+		line-height: 1em;
+		padding: 0;
+		max-height: 120px;
+	}
+
+	.CodeMirror-hint {
+		border-radius: 0;
+		padding: 0 10px;
+	}
+
+	.state {
+		position: absolute;
+		right: 15px;
+		top: 10px;
+		width: 16px;
+		height: 16px;
+	}
+
+	.state.modified {
+		background: transparent url('../../images/modified.png') 50% 50% no-repeat;
+	}
+
+	.editor {
+		position: absolute;
+		top: 0;
+		bottom: 23px;
+		left: 0;
+		right: 0;
+	}
+
+	.hl_widget {
+
+		&:focus {
+			outline: 0 none;
+		}
+	}
+
+	.buttons_bar {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		z-index: 2;
+		padding: 0px 25px;
+		height: 21px;
+		line-height: 18px;
+		border-top: 1px solid #999;
+		text-align: right;
+
+		.button {
+			height: 17px;
+			font-size: 12px;
+			min-width: 0;
+		}
+	}
+
+	.btn, .btn-group > .btn, .btn-group > .dropdown-menu {
+		padding: 2px 8px;
+	}
+
+	.navbar-fixed-top {
+		font-size: 11px;
+		line-height: 16px;
+		
+		ul {
+			width: 100%;
+		}
+	}
+
+	.navbar-fixed-top a span,
+	.dialog .nav a span {
+		padding: 1px;
+		padding-left: 18px;
+		background-position: center left;
+		background-repeat: no-repeat;
+		background-position: 0px center;
+		height: 22px;
+	}
+
+	.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: 4px;
+	}
+
+	.navbar-fixed-top a,
+	.dialog .nav a {
+
+		span.references {
+			background-image: url('../../images/references.png')
+		}
+
+		span.browser {
+			background-image: url('../../images/browser.png')
+		}
+
+		span.sunit {
+			background-image: url('../../images/sunit.png')
+		}
+
+		span.workspace {
+			background-image: url('../../images/workspace.png')
+		}
+
+		span.debugger {
+			background-image: url('../../images/debugger.png')
+		}
+		span.inspector {
+			background-image: url('../../images/inspector.png')
+		}
+	}
+
+	.navbar-fixed-top .navbar-inner {
+		min-height: 24px;
+		border-bottom: 1px solid #666;
+		box-shadow: inset 0px 2px 2px #aaa;
+		background: #bababa;
+	}
+
+	.navbar .nav {
+		> li {
+			line-height: 16px;
+			text-align: center;
+			max-width: 300px;
+		}
+	}
+
+	.new_tab {
+		width: 20px;
+		height: 24px;
+		line-height: 24px;
+		border-right: 0 none;
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		z-index: 2000;
+
+		a {
+			color: #444;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
+		
+		.dropdown-menu {
+			left: auto;
+			float: right;
+			right: 0;
+		}
+	}
+
+	.dropdown-menu {
+		min-width: 0;
+		text-align: left;
+	}
+
+	.navbar .nav > li > a {
+		line-height: 22px;
+		padding: 0px 8px;
+		font-size: 11px;
+		border-right: 1px solid #777;
+		text-shadow: #ddd 0px 1px 0px;
+		color: #222;
+
+		span {
+			display: block;
+			overflow: hidden;
+		}
+	}
+
+	.nav > li > a:hover {
+		background: transparent;
+	}
+
+	.navbar .nav > li > a:hover {
+		color: #333;
+		background-image: linear-gradient(top, #cfcfcf, #c0c0c0);
+		background-image: -webkit-linear-gradient(top, #cfcfcf, #c0c0c0);
+		background-image: -moz-linear-gradient(top, #cfcfcf, #c0c0c0);
+		background-image: -o-linear-gradient(top, #cfcfcf, #c0c0c0);
+		text-shadow: 0 1px 0 #ddd;
+		box-shadow: 0 0 0;
+	}
+
+	.navbar .nav > .active > a,
+	.navbar .nav > .active > a:hover,
+	.navbar .nav > .active > a:focus,
+	.navbar .nav .ui-sortable-helper a {
+		color: #444;
+		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: -o-linear-gradient(top, #dfdfdf, #d0d0d0);
+		text-shadow: 0 1px 0 #ddd;
+		box-shadow: 0 0 0;
+	}
+
+	.navbar .nav .ui-sortable-helper a {
+		border-left: 1px solid #777;
+	}
+
+	.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;
+	}
+
+	.welcome {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		margin-left: -170px;
+		width: 340px;
+		margin-top: 60px;
+		text-shadow: 0 1px 0 #fafafa;
+
+		color: #666;
+		font-size: 14px;
+		
+		h2 {
+			text-align: center;
+			color: #666;
+		}
+
+		button {
+			background: #eee;
+			margin: 10px;
+			padding: 20px;
+			height: auto;
+			width: 150px;
+		}
+	}
+
+	.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.package_dirty {
+		background-image: url('../../images/package-dirty.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 #999;
+		border-top: 1px solid #eee;
+		background-color: #eee;
+		background-image: -webkit-linear-gradient(top, #eee, #ddd);
+		background-image: -moz-linear-gradient(top, #eee, #ddd);
+		background-image: -o-linear-gradient(top, #eee, #ddd);
+		background-image: linear-gradient(top, #eee, #ddd);
+		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;
+		padding: 0;
+		margin: 0;
+	}
+
+	.tool_container .pane_actions, .tool_container .buttons_bar {
+		background: #dadada;
+		border-top: 1px solid #666;
+		background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
+		background-image: -moz-linear-gradient(top, #dadada, #bdbdbd);
+		background-image: -o-linear-gradient(top, #dadada, #bdbdbd);
+		background-image: 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: 2001;
+		position: fixed;
+		top: 120px;
+		left: 50%;
+		width: 400px;
+		max-height: 300px;
+		margin-left: -200px;
+		background: white;
+		box-shadow: 0 0 6px #aaa;
+		border: 1px solid #aaa;
+		font-size: 11px;
+
+		transition: all .5s;
+		-webkit-transition: all .5s;
+		-moz-transition: all .5s;
+		-o-transition: all .5s;
+		-ms-transition: all .5s;
+
+
+		.command {
+			padding: 0;
+			display: inline-block;
+			width: 50%;
+
+			strong {
+				display: inline-block;
+				min-width: 1.4em;
+				text-align: left;
+			}
+		}
+
+		#binding-helper-main {
+			display: block;
+			padding: 5px;
+			background: #eee;
+		}
+
+		.label {
+			padding: 1px 4px;
+			font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
+			background: transparent;
+			color: #0E4561;
+			text-shadow: none;
+			border: 0 none;
+		}
+
+		.action {
+			padding: 0 0.5em 0 5px;
+			color: inherit;
+			font-weight: bold;
+		}
+
+		.selected {
+			background-image: linear-gradient(top, #ccc, #bbb);
+			background-image: -moz-linear-gradient(top, #ccc, #bbb);
+			background-image: -o-linear-gradient(top, #ccc, #bbb);
+			background-image: -webkit-linear-gradient(top, #ccc, #bbb);
+			height: 28px;
+			padding: 0 8px;
+			font-weight: bold;
+			font-size: 18px;
+			line-height: 28px;
+			text-shadow: 0 1px 0 #fff;
+			display: block;
+			border-bottom: 1px solid #aaa;
+		}
+
+		.close {
+			font-size: 14px;
+			line-height: 28px;
+			opacity: 0.6;
+			position: absolute;
+			top: 0;
+			right: 4px;
+		}
+
+		.close:hover {
+			opacity: 0.8;
+		}
+
+		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;
+		}
+
+		.error .help-inline,
+		.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;
+	}
+
+	.growl {
+		position: fixed;
+		top: 10px;
+		right: 10px;
+		margin: 0;
+		z-index: 2001;
+		width: 200px;
+		height:auto;
+		padding: 15px;
+		background-image: -webkit-linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
+		background-image: -moz-linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
+		background-image: -o-linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
+		background-image: linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1));
+		border: 1px solid #aaa;
+		border-radius: 8px;
+		box-shadow: 0 0 3px #ccc;
+		font-weight: bold;
+		text-shadow: 0px 2px 1px #fff;
+	}
+
+
+	.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 .2s;
+		-webkit-transition: top .2s;
+		-moz-transition: top .2s;
+		-o-transition: top .2s;
+
+		.head {
+			display: block;
+		}
+
+		.hl_widget {
+
+			.form-actions {
+				padding: 0;
+				border: 0;
+			}
+		}
+
+		.nav {
+			border: 1px solid #999;
+
+			span {
+				font-size: 11px;
+				font-weight: normal;
+			}
+		}
+
+		.title {
+			font-size: 16px;
+			margin-bottom: 15px;
+		}
+
+		&.large {
+			width: 400px;
+			margin-left: -220px;
+
+			textarea {
+				width: 385px;
+				height: 200px;
+			}
+		}
+
+		textarea {
+			display: block;
+			width: 235px;
+		}
+
+		input[type="text"] {
+			margin: 5px 0;
+			width: 390px;
+		}
+
+		.progress {
+			height: 5px;
+
+			.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);
+			}
+		}
+
+		span {
+			font-size: 13px;
+			font-weight: bold;
+		}
+
+		.buttons {
+			text-align: right;
+			margin-top: 20px;
+		}
+
+		&.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;
+		background: -moz-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;
+		background: -o-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;
+		background: -ms-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;
+		background: 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;
+		background: -o-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: -ms-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: 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;
+		border-color: #08C;
+		box-shadow: 0 0 5px #08C;
+	}
+
+	.doc {
+		background: white;
+	}
+
+	.doc code .doc pre, .doc p, .doc div {
+		font-size: 13px;
+	}
+
+	.doc code {
+		padding: 1px 4px;
+	}
+	.doc .head {
+		background: #666;
+		padding: 10px;
+		font-size: 22px;
+		color: white;
+	}
+
+	.focused .doc .head {
+		background: #08c;
+	}
+
+	.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;
+	}
+
+	.hl_debugger {
+		
+		.tool_container {
+			top: 53px;
+		}
+
+		.head {
+			position: absolute;
+			top: 23px;
+			width: 100%;
+			background: #08c url(/images/debugger.png) 10px center no-repeat;
+			border-bottom: 1px solid white;
+
+			h2 {
+				font-size: 14px;
+				line-height: 30px;
+				padding: 0 30px;
+				margin: 0;
+				color: white;
+			}
+		}
+	}
+
+}

+ 37 - 0
helios_frame.css

@@ -0,0 +1,37 @@
+#helios {
+    z-index: 100000;
+    border-top: 1px solid #666;
+    position: fixed;
+    width: 100%;
+    height: 350px;
+    min-height: 150px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+#helios iframe {
+    width: 100%; 
+    height: 100%;
+}
+
+#helios .ui-resizable-n {
+    background-color: rgba(0, 0, 0, 0); 
+    top: 0; cursor: row-resize; 
+    height: 5px; 
+    left: 0;  
+    position: absolute; 
+    right: 0; 
+    width: auto !important; 
+    z-index: 100002;
+}
+
+#helios .overlay {
+    position: fixed;
+    backhground: transparent;
+    z-index: 100001;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}