helios/helios-niflheim.less

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;
		}
	}
}