#previewer-content pre,.gfm-render pre,.km-editor>.receiver { word-break: break-all; word-wrap: break-word } .km-editor { overflow: hidden; z-index: 2 } .km-editor>.mask { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: transparent } .km-editor>.receiver { position: absolute; background: #fff; outline: 0; box-shadow: 0 0 20px rgba(0,0,0,.5); left: 0; top: 0; padding: 3px 5px; margin-left: -3px; margin-top: -5px; max-width: 300px; width: auto; font-size: 14px; line-height: 1.4em; min-height: 1.4em; box-sizing: border-box; overflow: hidden; border: none; -webkit-user-select: text; pointer-events: none; opacity: 0; z-index: -1000 } .km-editor>.receiver.debug { opacity: 1; outline: green solid 1px; background: 0 0; z-index: 0 } .km-editor>.receiver.input { pointer-events: all; opacity: 1; z-index: 999; background: #fff; outline: 0 } div.minder-editor-container { position: absolute; top: 40px; bottom: 0; left: 0; right: 0; font-family: Arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif } .km-note,.minder-editor { top: 92px; right: 0; bottom: 0 } .minder-editor { position: absolute; left: 0 } .minder-viewer { position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .control-panel { position: absolute; top: 0; right: 0; width: 250px; bottom: 0; border-left: 1px solid #CCC } .minder-divider { position: absolute; top: 0; right: 250px; bottom: 0; width: 2px; background-color: #fbfbfb; cursor: ew-resize } .upload-image { width: .1px; height: .1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1 } .bg-color-wrap .bg-color-preview[disabled],.bg-color-wrap .quick-bg-color[disabled],.bg-color-wrap[disabled],.bg-color[disabled],.btn-wrap[disabled] span,.current-font-item[disabled],.current-temp-item[disabled],.font-bold[disabled],.font-color-wrap .font-color-preview[disabled],.font-color-wrap .quick-font-color[disabled],.font-color-wrap[disabled],.font-color[disabled],.font-italics[disabled],.km-btn-item[disabled],.resource-editor .resource-dropdown .km-resource li[disabled],.s-btn-wrap[disabled] span,.theme-item-selected[disabled] { opacity: .5 } .top-tab .nav-tabs { background-color: #e1e1e1; border: 0; height: 32px } .top-tab .nav-tabs li { margin: 0 } .top-tab .nav-tabs li a { margin: 0; border: 0; padding: 6px 15px; border-radius: 0; vertical-align: middle } .top-tab .nav-tabs li a:focus,.top-tab .nav-tabs li a:hover { background: inherit; border: 0 } .top-tab .nav-tabs li.active a { border: 0; background-color: #fff } .top-tab .nav-tabs li.active a:focus,.top-tab .nav-tabs li.active a:hover { border: 0 } .top-tab .tab-content { height: 60px; background-color: #fff; border-bottom: 1px solid #dbdbdb } .top-tab .tab-pane { font-size: 0 } .km-btn-group { display: inline-block; margin: 5px 0; padding: 0 5px; vertical-align: middle; border-right: 1px dashed #eee } .km-btn-item { display: inline-block; margin: 0 3px; font-size: 0; cursor: default } .btn-group-vertical .hyperlink-caption .caption,.btn-group-vertical .image-btn-caption .caption,.km-btn-item .km-btn-caption { font-size: 12px } .km-btn-item[disabled]:active,.km-btn-item[disabled]:hover { background-color: #fff } .km-btn-item .km-btn-icon { display: inline-block; background: url(images/icons.png) 0 20px no-repeat; width: 20px; height: 20px; padding: 2px; margin: 1px; vertical-align: middle } .km-btn-item .km-btn-caption { display: inline-block; vertical-align: middle } .km-btn-item:hover { background-color: #eff3fa } .km-btn-item:active { background-color: #c4d0ee } .do-group { width: 38px } .undo .km-btn-icon { background-position: 0 -1240px } .redo .km-btn-icon { background-position: 0 -1220px } .append-group { width: 212px } .arrange-group,.operation-group { width: 64px } .append-child-node .km-btn-icon { background-position: 0 0 } .append-sibling-node .km-btn-icon { background-position: 0 -20px } .append-parent-node .km-btn-icon { background-position: 0 -40px } .arrange-up .km-btn-icon { background-position: 0 -280px } .arrange-down .km-btn-icon { background-position: 0 -300px } .edit-node .km-btn-icon { background-position: 0 -60px } .remove-node .km-btn-icon { background-position: 0 -80px } .btn-group-vertical .hyperlink,.btn-group-vertical .hyperlink-caption { width: 40px; margin: 0; padding: 0; border: none!important; border-radius: 0!important } .btn-group-vertical .hyperlink-caption:hover,.btn-group-vertical .hyperlink:hover { background-color: #eff3fa } .btn-group-vertical .hyperlink-caption:active,.btn-group-vertical .hyperlink:active { background-color: #c4d0ee } .btn-group-vertical .hyperlink-caption.active,.btn-group-vertical .hyperlink.active { box-shadow: none; background-color: #eff3fa } .btn-group-vertical .hyperlink { height: 25px; background: url(images/icons.png) center -100px no-repeat } .btn-group-vertical .hyperlink-caption { height: 20px } .btn-group-vertical .image-btn,.btn-group-vertical .image-btn-caption { width: 40px; margin: 0; padding: 0; border: none!important; border-radius: 0!important } .btn-group-vertical .image-btn-caption:hover,.btn-group-vertical .image-btn:hover { background-color: #eff3fa } .btn-group-vertical .image-btn-caption:active,.btn-group-vertical .image-btn:active { background-color: #c4d0ee } .btn-group-vertical .image-btn-caption.active,.btn-group-vertical .image-btn.active { box-shadow: none; background-color: #eff3fa } .btn-group-vertical .image-btn { height: 25px; background: url(images/icons.png) center -125px no-repeat } .btn-group-vertical .image-btn-caption { height: 20px } .image-preview { display: block; max-width: 50% } .modal-body .tab-pane { font-size: inherit; padding-top: 15px } .search-result { margin-top: 15px; height: 370px; overflow: hidden } .search-result ul { margin: 0; padding: 0; list-style: none; clear: both; height: 100%; overflow-x: hidden; overflow-y: auto } .search-result ul li { list-style: none; float: left; display: block; width: 130px; height: 130px; line-height: 130px; margin: 6px; padding: 0; font-size: 12px; position: relative; vertical-align: top; text-align: center; overflow: hidden; cursor: pointer; border: 2px solid #fcfcfc } .search-result ul li.selected { border: 2px solid #fc8383 } .search-result ul li img { max-width: 126px; max-height: 130px; vertical-align: middle } #previewer-content img,.gfm-render img { max-width: 100% } .search-result ul li span { display: block; position: absolute; bottom: 0; height: 20px; background: rgba(0,0,0,.5); left: 0; right: 0; color: #fff; line-height: 20px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; opacity: 0; -webkit-transform: translate(0,20px); -ms-transform: translate(0,20px); transform: translate(0,20px); -webkit-transition: all .2s ease; transition: all .2s ease } #previewer-content,.gfm-render { font-size: 12px; -webkit-user-select: text; line-height: 1.8em } .search-result ul li:hover span { opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0) } @media (min-width:768px) { .form-inline .form-control { width: 422px } } .btn-group-vertical.note-btn-group { border-right: 1px dashed #eee; padding-right: 5px } .btn-group-vertical .note-btn,.btn-group-vertical .note-btn-caption { width: 40px; margin: 0; padding: 0; border: none!important; border-radius: 0!important } .btn-group-vertical .note-btn-caption:hover,.btn-group-vertical .note-btn:hover { background-color: #eff3fa } .btn-group-vertical .note-btn-caption:active,.btn-group-vertical .note-btn:active { background-color: #c4d0ee } .btn-group-vertical .note-btn-caption.active,.btn-group-vertical .note-btn.active { box-shadow: none; background-color: #eff3fa } .btn-group-vertical .note-btn { height: 25px; background: url(images/icons.png) center -1150px no-repeat } .btn-group-vertical .note-btn-caption { height: 20px } .btn-group-vertical .note-btn-caption .caption { font-size: 12px } .open>.dropdown-toggle.btn-default { background-color: #eff3fa } .gfm-render { color: #333 } .gfm-render blockquote,.gfm-render hr,.gfm-render p,.gfm-render pre,.gfm-render table,.gfm-render ul { margin: 1em 0; cursor: text } .btn-wrap,.km-note.panel .panel-heading .close-note-editor:hover,div a.theme-item { cursor: pointer } .gfm-render blockquote:first-child:last-child,.gfm-render hr:first-child:last-child,.gfm-render p:first-child:last-child,.gfm-render pre:first-child:last-child,.gfm-render table:first-child:last-child,.gfm-render ul:first-child:last-child { margin: 0 } .gfm-render a { color: #00f } .gfm-render a:hover { color: red } .gfm-render blockquote { display: block; border-left: 4px solid #E4AD91; color: #da8e68; padding-left: 10px; font-style: italic; margin-left: 2em } .gfm-render ol,.gfm-render ul { padding-left: 3em } .gfm-render table { width: 100%; border-collapse: collapse; margin: 1em 0 } .gfm-render table td,.gfm-render table th { border: 1px solid #666; padding: 2px 4px } .gfm-render table th { background: rgba(45,141,234,.2) } .gfm-render table tr:nth-child(even) td { background: rgba(45,141,234,.03) } .gfm-render em { color: red } .gfm-render del { color: #999 } .gfm-render pre { background: rgba(45,141,234,.1); padding: 5px; border-radius: 5px } .gfm-render code { background: rgba(45,141,234,.1); padding: 0 5px; border-radius: 3px } #previewer-content pre code,.gfm-render pre code { background: 0 0 } .gfm-render hr { border: none; border-top: 1px solid #CCC } .gfm-render .highlight { background: #ff0; color: red } .km-note { width: 300px; border-left: 1px solid #babfcd; padding: 5px 10px; background: #fff; position: absolute; left: auto; z-index: 3 } .km-note.panel { margin: 0; padding: 0 } .km-note.panel .panel-heading h3 { display: inline-block } .km-note.panel .panel-heading .close-note-editor { width: 15px; height: 15px; display: inline-block; float: right } .km-note.panel .panel-body { padding: 0 } .km-note .CodeMirror { position: absolute; top: 41px; bottom: 0; height: auto; cursor: text; font-size: 14px; line-height: 1.3em; font-family: consolas } .km-note-tips { color: #ccc; padding: 3px 8px } #previewer-content { position: absolute; background: #FFD; padding: 5px 15px; border-radius: 5px; max-width: 400px; max-height: 200px; overflow: auto; z-index: 10; box-shadow: 0 0 15px rgba(0,0,0,.5); word-break: break-all; color: #333 } #previewer-content blockquote,#previewer-content hr,#previewer-content p,#previewer-content pre,#previewer-content table,#previewer-content ul { margin: 1em 0; cursor: text } #previewer-content blockquote:first-child:last-child,#previewer-content hr:first-child:last-child,#previewer-content p:first-child:last-child,#previewer-content pre:first-child:last-child,#previewer-content table:first-child:last-child,#previewer-content ul:first-child:last-child { margin: 0 } #previewer-content a { color: #00f } #previewer-content a:hover,#previewer-content em { color: red } #previewer-content blockquote { display: block; border-left: 4px solid #E4AD91; color: #da8e68; padding-left: 10px; font-style: italic; margin-left: 2em } #previewer-content ol,#previewer-content ul { padding-left: 3em } #previewer-content table { width: 100%; border-collapse: collapse; margin: 1em 0 } #previewer-content table td,#previewer-content table th { border: 1px solid #666; padding: 2px 4px } #previewer-content table th { background: rgba(45,141,234,.2) } #previewer-content table tr:nth-child(even) td { background: rgba(45,141,234,.03) } #previewer-content del { color: #999 } #previewer-content pre { background: rgba(45,141,234,.1); padding: 5px; border-radius: 5px } #previewer-content code { background: rgba(45,141,234,.1); padding: 0 5px; border-radius: 3px } #previewer-content hr { border: none; border-top: 1px solid #CCC } .tab-content .km-priority,.tab-content .km-progress { font-size: inherit; width: 140px; border-right: 1px dashed #eee; vertical-align: middle } #previewer-content .highlight { background: #ff0; color: red } #previewer-content.ng-hide { display: block!important; left: -99999px!important; top: -99999px!important } .panel-body { padding: 10px } .tab-content .km-priority { display: inline-block; margin: 5px } .tab-content .km-priority .km-priority-item { margin: 0 1px; padding: 1px } .tab-content .km-priority .km-priority-item .km-priority-icon { background: url(images/iconpriority.png) repeat-y } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-0 { background-position: 0 20px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-1 { background-position: 0 0 } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-2 { background-position: 0 -20px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-3 { background-position: 0 -40px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-4 { background-position: 0 -60px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-5 { background-position: 0 -80px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-6 { background-position: 0 -100px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-7 { background-position: 0 -120px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-8 { background-position: 0 -140px } .tab-content .km-priority .km-priority-item .km-priority-icon.priority-9 { background-position: 0 -160px } .tab-content .km-progress { display: inline-block; margin: 5px } .btn-label,.resource-editor .btn,.resource-editor .input-group,.resource-editor .km-resource,.resource-editor input.form-control,.s-btn-label,div a.theme-item { font-size: 12px } .tab-content .km-progress .km-progress-item { margin: 0 1px; padding: 1px } .tab-content .km-progress .km-progress-item .km-progress-icon { background: url(images/iconprogress.png) repeat-y } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-0 { background-position: 0 20px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-1,.temp-item.default { background-position: 0 0 } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-2 { background-position: 0 -20px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-3 { background-position: 0 -40px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-4 { background-position: 0 -60px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-5 { background-position: 0 -80px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-6 { background-position: 0 -100px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-7 { background-position: 0 -120px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-8 { background-position: 0 -140px } .tab-content .km-progress .km-progress-item .km-progress-icon.progress-9 { background-position: 0 -160px } .resource-editor { vertical-align: middle; display: inline-block; margin: 5px } .resource-editor .input-group { height: 20px; width: 168px } .resource-editor .resource-dropdown { position: relative; width: 168px; border: 1px solid #ccc; margin-top: -1px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px } .resource-editor .resource-dropdown .km-resource { position: absolute; width: 154px; margin-bottom: 3px; padding: 0; list-style-type: none; overflow: scroll; max-height: 500px } .resource-editor .resource-dropdown .km-resource.open { z-index: 3; background-color: #fff } .resource-editor .resource-dropdown .km-resource li { display: inline-block; padding: 1px 2px; border-radius: 4px; margin: 2px 3px } .resource-editor .resource-dropdown .resource-caret { display: block; float: right; vertical-align: middle; width: 12px; height: 24px; padding: 8px 1px } .resource-editor .resource-dropdown .resource-caret:hover { background-color: #eff3fa } .resource-editor .resource-dropdown .resource-caret:active { background-color: #c4d0ee } .current-temp-item:hover,.theme-item-selected:hover,.theme-item-wrap:hover { background-color: #eff3fa } .resource-editor input.form-control { padding: 2px 4px; height: 24px; border-bottom-left-radius: 0 } .resource-editor .input-group-btn { line-height: 24px } .resource-editor .input-group-btn .btn { padding: 2px 4px; height: 24px; border-bottom-right-radius: 0 } .temp-panel { margin: 5px 5px 5px 10px; border-right: 1px dashed #eee; display: inline-block; vertical-align: middle } .temp-item-wrap,.theme-panel { margin: 5px; display: inline-block } .current-temp-item .caret,.theme-item-selected .caret { margin-left: 5px } .temp-list { min-width: 124px } .temp-item-wrap { width: 50px; height: 40px; padding: 0 2px } .temp-item { display: inline-block; width: 50px; height: 40px; background-image: url(images/template.png); background-repeat: no-repeat } .temp-item.structure { background-position: -50px 0 } .temp-item.filetree { background-position: -100px 0 } .temp-item.right { background-position: -150px 0 } .temp-item.fish-bone { background-position: -200px 0 } .temp-item.tianpan { background-position: -250px 0 } .current-temp-item { width: 74px; padding: 0 0 0 5px; border: 1px solid #fff } .temp-item-selected { background-color: #87a9da } .theme-panel { height: 42px; padding: 0 5px 0 0; border-right: 1px dashed #eee; vertical-align: middle } .theme-list { min-width: 162px } div a.theme-item { display: inline-block; width: 70px; height: 30px; text-align: center; line-height: 30px; padding: 0 5px; text-decoration: none; color: #000 } .theme-item-selected { width: 100px; padding: 6px 7px; border: 1px solid #fff } .readjust-layout,.style-operator { border-right: 1px dashed #eee; vertical-align: middle } .theme-item-wrap { display: inline-block; width: 80px; height: 40px; padding: 5px } .readjust-layout { display: inline-block; padding: 0 10px 0 5px } .btn-icon { width: 25px; height: 25px; margin-left: 12px; display: block } .btn-wrap { width: 50px; height: 42px; display: inline-block; text-decoration: none } .btn-wrap[disabled],.s-btn-wrap[disabled] { cursor: default } .btn-wrap[disabled]:active,.btn-wrap[disabled]:hover { background-color: transparent } .btn-wrap:link,.btn-wrap:visited { text-decoration: none } .btn-wrap:hover { background-color: #eff3fa; text-decoration: none } .btn-wrap:active { background-color: #c4d0ee } .reset-layout-icon { background: url(images/icons.png) 0 -150px no-repeat } .style-operator { display: inline-block; padding: 0 5px } .style-operator .clear-style { vertical-align: middle } .clear-style-icon { background: url(images/icons.png) 0 -175px no-repeat } .s-btn-group-vertical { display: inline-block; vertical-align: middle } .s-btn-icon { width: 20px; height: 20px; margin-right: 3px; display: inline-block; vertical-align: middle } .s-btn-label { vertical-align: middle; display: inline-block } .s-btn-wrap { padding: 0 5px 0 3px; display: inline-block; text-decoration: none; font-size: 0 } .s-btn-wrap[disabled]:active,.s-btn-wrap[disabled]:hover { background-color: transparent } .s-btn-wrap:hover { background-color: #eff3fa; text-decoration: none } .s-btn-wrap:active { background-color: #c4d0ee } .copy-style-icon { background: url(images/icons.png) 0 -200px no-repeat } .paste-style-wrap { display: block } .paste-style-icon { background: url(images/icons.png) 0 -220px no-repeat } .font-operator { width: 170px; display: inline-block; vertical-align: middle; font-size: 12px; padding: 0 5px } .current-font-family,.current-font-size { height: 18px; overflow: hidden; vertical-align: bottom } .font-operator .font-family-list,.font-operator .font-size-list { display: inline-block; border: 1px solid #eee; padding: 2px 4px } .current-font-item a { text-decoration: none; display: inline-block } .current-font-family { width: 75px } .current-font-size { width: 32px } .font-item { line-height: 1em; text-align: left } .font-item-selected { background-color: #87a9da } .font-bold,.font-italics { display: inline-block; background: url(images/icons.png) no-repeat; cursor: pointer; margin: 0 3px } .font-bold:hover,.font-italics:hover { background-color: #eff3fa } .font-bold:active,.font-italics:active { background-color: #c4d0ee } .font-bold { background-position: 0 -240px } .font-italics { background-position: 0 -260px } .font-bold-selected,.font-italics-selected { background-color: #87a9da } .font-color-wrap { display: inline-block; width: 30px; height: 22px; margin: 3px 3px 0 0; border: 1px solid #efefef; vertical-align: middle; font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .font-color-wrap .quick-font-color { display: inline-block; width: 20px; height: 16px; font-size: 14px; line-height: 16px; vertical-align: top; text-align: center; cursor: default; color: #000 } .font-color-wrap .quick-font-color:hover { background-color: #eff3fa } .font-color-wrap .quick-font-color:active { background-color: #c4d0ee } .font-color-wrap .font-color-preview { display: inline-block; width: 12px; height: 2px; margin: 0 4px; background-color: #000 } .font-color { display: inline-block; width: 8px; height: 16px } .font-color:hover { background-color: #eff3fa } .font-color:active { background-color: #c4d0ee } .font-color .caret { margin-left: -2px; margin-top: 7px } .bg-color-wrap { display: inline-block; width: 30px; height: 22px; margin: 3px 3px 0 0; border: 1px solid #efefef; vertical-align: middle; font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .bg-color-wrap .quick-bg-color { display: inline-block; width: 20px; height: 16px; font-size: 14px; line-height: 16px; vertical-align: top; text-align: center; cursor: default; color: #000; background: url(images/icons.png) center -1260px no-repeat } .btn-group-vertical .expand-caption .caption,.btn-group-vertical .search-caption .caption,.btn-group-vertical .select-caption .caption { font-size: 12px } .bg-color-wrap .quick-bg-color:hover { background-color: #eff3fa } .bg-color-wrap .quick-bg-color:active { background-color: #c4d0ee } .bg-color-wrap .bg-color-preview { display: inline-block; width: 12px; height: 2px; margin: 0 4px; background-color: #fff } .bg-color { display: inline-block; width: 8px; height: 16px } .bg-color:hover { background-color: #eff3fa } .bg-color:active { background-color: #c4d0ee } .bg-color .caret { margin-left: -2px; margin-top: 7px } .btn-group-vertical .expand,.btn-group-vertical .expand-caption { width: 40px; margin: 0; padding: 0; border: none!important; border-radius: 0!important } .btn-group-vertical .expand-caption:hover,.btn-group-vertical .expand:hover { background-color: #eff3fa } .btn-group-vertical .expand-caption:active,.btn-group-vertical .expand:active { background-color: #c4d0ee } .btn-group-vertical .expand-caption.active,.btn-group-vertical .expand.active { box-shadow: none; background-color: #eff3fa } .btn-group-vertical .expand { height: 25px; background: url(images/icons.png) 0 -995px no-repeat; background-position-x: 50% } .btn-group-vertical .expand-caption { height: 20px } .btn-group-vertical .select,.btn-group-vertical .select-caption { width: 40px; margin: 0; padding: 0; border: none!important; border-radius: 0!important } .btn-group-vertical .select-caption:hover,.btn-group-vertical .select:hover { background-color: #eff3fa } .btn-group-vertical .select-caption:active,.btn-group-vertical .select:active { background-color: #c4d0ee } .btn-group-vertical .select-caption.active,.btn-group-vertical .select.active { box-shadow: none; background-color: #eff3fa } .btn-group-vertical .select { height: 25px; background: url(images/icons.png) 7px -1175px no-repeat } .btn-group-vertical .select-caption { height: 20px } .btn-group-vertical { vertical-align: middle; margin: 5px } .btn-group-vertical .search,.btn-group-vertical .search-caption { width: 40px; margin: 0; padding: 0; border: none!important; border-radius: 0!important } .btn-group-vertical .search-caption:hover,.btn-group-vertical .search:hover { background-color: #eff3fa } .btn-group-vertical .search-caption:active,.btn-group-vertical .search:active { background-color: #c4d0ee } .btn-group-vertical .search-caption.active,.btn-group-vertical .search.active { box-shadow: none; background-color: #eff3fa } .btn-group-vertical .search { height: 25px; background: url(images/icons.png) 0 -345px no-repeat; background-position-x: 50% } .btn-group-vertical .search-caption { height: 20px } .search-box { float: right; background-color: #fff; border: 1px solid #dbdbdb; position: relative; top: 0; z-index: 3; width: 360px; height: 40px; padding: 3px 6px; opacity: 1 } .search-box .prev-and-next-btn,.search-box .search-input-wrap { float: left } .search-box .close-search { float: right; height: 16px; width: 16px; padding: 1px; border-radius: 100%; margin-top: 6px; margin-right: 10px } .search-box .close-search .glyphicon { top: -1px } .search-box .close-search:hover { background-color: #efefef } .search-box .close-search:active { background-color: #999 } .search-box .search-input-wrap { width: 240px } .search-box .prev-and-next-btn { margin-left: 5px } .search-box .prev-and-next-btn .btn:focus { outline: 0 } .search-box .search-addon { background-color: #fff } .tool-group { padding: 0 } .tool-group[disabled] { opacity: .5 } .tool-group .tool-group-item { display: inline-block; border-radius: 4px } .tool-group .tool-group-item .tool-group-icon { width: 20px; height: 20px; padding: 2px; margin: 1px } .tool-group .tool-group-item:hover { background-color: #eff3fa } .tool-group .tool-group-item.active,.tool-group .tool-group-item:active { background-color: #c4d0ee } .nav-bar { position: absolute; width: 35px; height: 240px; padding: 5px 0; left: 10px; bottom: 10px; background: #fc8383; color: #fff; border-radius: 4px; z-index: 10; box-shadow: 3px 3px 10px rgba(0,0,0,.2); transition: -webkit-transform .7s .1s ease; transition: transform .7s .1s ease } .nav-bar .nav-btn { width: 35px; height: 24px; line-height: 24px; text-align: center } .nav-bar .nav-btn .icon { background: url(images/icons.png); width: 20px; height: 20px; margin: 2px auto; display: block } .nav-bar .camera .icon,.nav-bar .hand .icon,.nav-bar .nav-trigger .icon { width: 25px; height: 25px; margin: 0 auto } .nav-bar .nav-btn.active { background-color: #5A6378 } .nav-bar .zoom-in .icon { background-position: 0 -730px } .nav-bar .zoom-out .icon { background-position: 0 -750px } .nav-bar .hand .icon { background-position: 0 -770px } .nav-bar .camera .icon { background-position: 0 -870px } .nav-bar .nav-trigger .icon { background-position: 0 -845px } .nav-bar .zoom-pan { width: 2px; height: 70px; box-shadow: 0 1px #E50000; position: relative; background: #fff; margin: 3px auto; overflow: visible } .nav-bar .zoom-pan .origin { position: absolute; width: 20px; height: 8px; left: -9px; margin-top: -4px; background: 0 0 } .nav-bar .zoom-pan .origin:after { content: ' '; display: block; width: 6px; height: 2px; background: #fff; left: 7px; top: 3px; position: absolute } .nav-bar .zoom-pan .indicator { position: absolute; width: 8px; height: 8px; left: -3px; background: #fff; border-radius: 100%; margin-top: -4px } .nav-previewer { background: #fff; width: 140px; height: 120px; position: absolute; left: 45px; bottom: 30px; box-shadow: 0 0 8px rgba(0,0,0,.2); border-radius: 0 2px 2px 0; padding: 1px; z-index: 9; cursor: crosshair; transition: -webkit-transform .7s .1s ease; transition: transform .7s .1s ease } .nav-previewer.grab { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing }