.ide { overflow: hidden; }
.ide .headerbar { position: fixed; z-index: 2; right: 0; top: 4px; }
.ide-workspace { position: fixed; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; }

/* elements images */
.ide .element-image { width: 16px; height: 16px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat;
                      font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 16px; text-align: center;
                      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ide .element-image.element-dir:before { content: "\f114"; }
.ide .element-image.element-file:before { content: "\f1c9"; }

/* .workspace-pane-a */
.ide .workspace-pane-a { font-size: 12px; line-height: 18px; }
.ide .workspace-pane-a > .head { position: absolute; left: 0; top: 0; width: 100%; height: 21px; padding: 0 5px; line-height: 20px; background: #0072c6; color: #fff;
                                                      box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
                                                      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-width: 1px; border-style: solid solid none solid; border-color: #8E9BBC; }
.ide .workspace-pane-a > .content { position: absolute; left: 0; top: 21px; width: 100%; bottom: 0; overflow: auto;
                                                         border-width: 1px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
                                                         border-style: none solid solid solid; border-color: #8E9BBC; }

/* workspace-tools-pane */
.ide .workspace-tools-pane { position: absolute; z-index: 1; overflow: hidden; left: 0; top: 0; width: 100%; height: 120px; padding: 0 1px; background: #fff; border-bottom: 3px solid #293955;
                                            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ide .workspace-tools-pane .tabs-head {background-color: #E1E1E1; }
.ide .workspace-tools-pane .tabs-head .tab {text-transform: uppercase; padding: 5px 10px; display: inline-block; color:#323232; }
.ide .workspace-tools-pane .tabs-head .tab:first-child {margin-left: 30px; }
.ide .workspace-tools-pane .tabs-head .tab.active {background-color: #fff; color:#0072c6}
.ide .workspace-tools-pane .tabs-head .tab:hover {color:#0072c6; }
.ide .workspace-tools-pane .tabs-head .tab.disabled { opacity: 0.4; background-color: transparent; color: #323232; cursor: default; }
.ide .workspace-tools-pane .tabs-content { position: relative; overflow: hidden; }
.ide .workspace-tools-pane .tabs-content .tab { overflow: hidden; padding-top: 4px; width: 200%; }
.ide .workspace-tools-pane .title-pane { float: left; display: none; }
.ide .workspace-tools-pane .tools-group { position: relative; padding: 1px 4px; float: left; height: 82px; border-right: 1px solid #ddd; }
.ide .workspace-tools-pane .tools-group > .content { overflow: hidden;  }
.ide .workspace-tools-pane .tools-group > .head { position: absolute; bottom:0; text-align: center; left:0; right:0; font-size:10px; color:#bbb; }
.ide .workspace-tools-pane .tools-subgroup { float: left; }
.ide .workspace-tools-pane .button { float: left; width: 47px; height: 62px; padding: 0; margin: 0; border: 1px solid transparent; position: relative; color: #777;
                                     background-color: transparent; background-position: top center;
                                     box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ide .workspace-tools-pane .button.wider { width: 53px; }
.ide .workspace-tools-pane .button:before { display: block; position: absolute; top:0; left:0; right: 0; content: " "; height: 32px;
                                            background-repeat: no-repeat; background-position: center center; }
.ide .workspace-tools-pane .button .text { position: absolute; top: 35px; text-align: center; left:0; right: 0; font-size: 10px; line-height: 11px; text-transform: none; }
.ide .workspace-tools-pane .button.menu:after { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; content: "\f0d7"; font-size: 10px; line-height: 10px; font-family: "FontAwesome"; }
.ide .workspace-tools-pane .group.sep { float: left; width: 2px; overflow: hidden; height: 82px; padding: 1px 0; margin: 0 3px;
                                                       box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ide .workspace-tools-pane .group.sep > .content { width: 1px; height: 82px; border-style: none solid none none; border-color: #ddd; border-width: 1px; }
.ide .workspace-tools-pane .group.space { float: left; width: 2px; overflow: hidden; height: 24px; padding: 1px 0; margin: 0 3px;
                                                       box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.ide .workspace-tools-pane .button:hover { background-color: #CDE6F7; color: #1283ff; }
.ide .workspace-tools-pane .button.disabled { opacity: 0.4; background-color: transparent; cursor: default; }

.ide .workspace-tools-pane .tools-group2 .button { width: 22px; height:  24px }
.ide .workspace-tools-pane .tools-group2 .button:before { height: 100%; background-size: 14px 14px; -moz-background-size: 14px 14px; -webkit-background-size: 14px 14px; }
.ide .workspace-tools-pane .tools-group2 .button .text { display: none; }

.ide .workspace-tools-pane .button.cmd-save:before { background-image: url(/media/ide/32/Save.png); }
.ide .workspace-tools-pane .button.cmd-close:before { background-image: url(/media/ide/32/Exit.png); }
.ide .workspace-tools-pane .button.cmd-format:before { background-image: url(/media/ide/14/format.png); }
.ide .workspace-tools-pane .button.cmd-comment:before { background-image: url(/media/ide/14/comment.png); }
.ide .workspace-tools-pane .button.cmd-uncomment:before { background-image: url(/media/ide/14/uncomment.png); }

/* workspace-left-pane */
.ide-workspace .workspace-left-pane { display: none; position: absolute; z-index: 1; left: 0; top: 120px; width: 100px; bottom: 0; border-width: 3px; border-style: none solid solid none; border-color: #293955;
                                              box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* workspace-right-pane */
.ide-workspace .workspace-right-pane { position: absolute; z-index: 1; right: 0; top: 120px; width: 250px; bottom: 0; border-width: 3px; border-style: none none solid solid; border-color: #293955;
                                              box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

/* workspace-content-pane */
.workspace-content-pane { position: absolute; z-index: 2; overflow: hidden; left: 0; top: 120px; right: 250px; bottom: 0; border-width: 3px; border-style: none none solid none; border-color: #293955; }
.workspace-content-pane .files-tabs { height: 19px; background: #293955; border-bottom: 1px solid #FFF29D; padding: 0 0 0 4px; }
.workspace-content-pane .files-tabs .tab { position: relative; display: inline-block; vertical-align: top; background: #364E6F; padding: 0 25px 0 7px; font-size: 11px; line-height: 19px; color: #fff; cursor: pointer; }
.workspace-content-pane .files-tabs .tab:hover { background: #5B7199; }
.workspace-content-pane .files-tabs .tab.active { background: #FFF29D; color: #000; }
.workspace-content-pane .files-tabs .tab .changed-marker:before { display: none; content: "*"; }
.workspace-content-pane .files-tabs .tab.changed .changed-marker:before { display: inline; }
.workspace-content-pane .files-tabs .cmd-close { position: absolute; z-index: 2; right: 2px; top: 2px; border: none; background: transparent; outline: none; cursor: pointer; }
.workspace-content-pane .files-tabs .cmd-close span { display: inline-block; vertical-align: top; width: 15px; height: 15px; line-height: 15px; font-size: 10px; text-align: center; vertical-align: top; color: #aaa; text-decoration: none;
                         font-family: FontAwesome; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.workspace-content-pane .files-tabs .cmd-close span:before { content: "\f00d"; }
.workspace-content-pane .files-tabs .cmd-close:hover span { background-color: #E29191; }
.workspace-content-pane .files-contents .file { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.workspace-content-pane .files-contents .file.active { display: block; }
.workspace-content-pane .files-contents { position: absolute; left: 0; top: 20px; right: 0; bottom: 0; }

/* editor */
.ide .editor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* workspace-explorer-pane */
.ide .workspace-explorer-pane .item .name { height: 20px; line-height: 20px; cursor: default; white-space: nowrap; }
.ide .workspace-explorer-pane .item.level-1 > .name { padding-left: 20px; }
.ide .workspace-explorer-pane .item.level-2 > .name { padding-left: 40px; }
.ide .workspace-explorer-pane .item.level-3 > .name { padding-left: 60px; }
.ide .workspace-explorer-pane .item.level-4 > .name { padding-left: 80px; }
.ide .workspace-explorer-pane .item.level-5 > .name { padding-left: 100px; }
.ide .workspace-explorer-pane .item.level-6 > .name { padding-left: 110px; }
.ide .workspace-explorer-pane .item.level-7 > .name { padding-left: 120px; }
.ide .workspace-explorer-pane .item.level-8 > .name { padding-left: 130px; }
.ide .workspace-explorer-pane .item.level-9 > .name { padding-left: 140px; }
.ide .workspace-explorer-pane .item.level-10 > .name { padding-left: 150px; }
.ide .workspace-explorer-pane .item .name > .content { position: relative; padding-left: 40px; }
.ide .workspace-explorer-pane .item .toggle { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; }
.ide .workspace-explorer-pane .item .toggle span { position: relative; left: 5px; top: 3px; display: block; width: 6px; height: 9px;
                                                   background-color: transparent; background-image: url(/media/ide/toggle1.png); background-position: 0 -9px; background-repeat: no-repeat; }
.ide .workspace-explorer-pane .item.collapse > .name .toggle span { background-position: 0 0; }
.ide .workspace-explorer-pane .item.collapse > .items { display: none; }
.ide .workspace-explorer-pane .item .element-image { position: absolute; left: 20px; top: 2px; }
.ide .workspace-explorer-pane .item .element-image.element-dir:before { content: "\f115"; }
.ide .workspace-explorer-pane .item.collapse .element-image.element-dir:before { content: "\f114"; }
.ide .workspace-explorer-pane .item.hover > .name { background: #EDF5FF; }
.ide .workspace-explorer-pane .item.selected > .name { background: #3399FF; color: #fff; }

/* code-snippets */
.code-snippets-pane { position: absolute; z-index: 19; height: 19px; margin-top: -5px; padding: 2px 7px; border: 1px solid #9BA7B7; background: #EAF0FF; color: #000;
                      font: 12px/19px 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; }
.code-snippets-pane label { margin-right: 5px; display: inline-block; vertical-align: top; }
.code-snippets-pane input { vertical-align: top; border: none; background: transparent; height: 16px; width: 100px; font: 12px/17px 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; }
.code-snippets-pane .path { display: inline-block; vertical-align: top; }
.code-snippets-pane .path .item { display: inline-block; vertical-align: top; border: 1px solid #9BA7B7; line-height: 17px; padding: 0 3px; cursor: pointer; }
.code-snippets-pane .path .item:hover { background: #FDF4BF; }
.code-snippets-pane .path .sep { display: inline-block; vertical-align: top; margin: 0 5px; }
.code-snippets-pane .path .sep:before { content: ">"; }

.code-snippets-lookup { position: absolute; z-index: 19; max-height: 300px; overflow: auto;
              box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
              color: #030303; border-width: 1px; border-style: solid; border-color: #E5C365; background: #FFFFFF;}
.code-snippets-lookup .loading { width: 30px; height: 30px; background: transparent url(/media/loader2.gif) center center no-repeat; }
.code-snippets-lookup .item { overflow: hidden; height: 19px; cursor: pointer; }
.code-snippets-lookup .item .image { float: left; cursor: pointer; width: 16px; height: 19px; padding: 0 5px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat;
                      font-family: FontAwesome; font-style: normal; font-weight: normal; font-size: 12px; line-height: 19px; text-align: center;
                      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.code-snippets-lookup .item.item-dir .image:before { content: "\f114"; }
.code-snippets-lookup .item.item-snippet .image:before { content: "\f1c9"; }
.code-snippets-lookup .item .name { display: block; overflow: hidden; height: 19px; padding: 1px 5px; font-size: 12px; line-height: 17px;
                                    white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
                                    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.code-snippets-lookup .item.active .name { border: 1px solid #3399FF; padding: 0 4px; background: #3399FF; color: #fff; }
.code-snippets-lookup .item.preactive .name { background: #fff; color: #030303; }