From f621b1a3a81df54e2f246f6345df0f5e61a1c42a Mon Sep 17 00:00:00 2001 From: Maximilian Weber Date: Tue, 30 Apr 2019 16:16:20 +0200 Subject: [PATCH] Copy css files to scss, lint auto fix them --- ui/css/src/scss/cloudstack3-ie7.scss | 209 + ui/css/src/scss/cloudstack3.hu.scss | 26 + ui/css/src/scss/cloudstack3.ja_JP.scss | 83 + ui/css/src/scss/cloudstack3.scss | 13239 ++++++++++++++++++++ ui/css/src/scss/custom.scss | 21 + ui/css/src/scss/token-input-facebook.scss | 132 + 6 files changed, 13710 insertions(+) create mode 100644 ui/css/src/scss/cloudstack3-ie7.scss create mode 100644 ui/css/src/scss/cloudstack3.hu.scss create mode 100644 ui/css/src/scss/cloudstack3.ja_JP.scss create mode 100644 ui/css/src/scss/cloudstack3.scss create mode 100644 ui/css/src/scss/custom.scss create mode 100644 ui/css/src/scss/token-input-facebook.scss diff --git a/ui/css/src/scss/cloudstack3-ie7.scss b/ui/css/src/scss/cloudstack3-ie7.scss new file mode 100644 index 00000000000..114e9c01edc --- /dev/null +++ b/ui/css/src/scss/cloudstack3-ie7.scss @@ -0,0 +1,209 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + +/*[fmt]1C20-1C0D-E*/ +div.panel div.list-view { + position: relative; + overflow-x: hidden; + margin-top: 0px; +} + +div.toolbar { + top: expression(this.offsetParent.scrollTop); +} + +div.toolbar div.text-search div.search-bar input { + float: left; + border: none; + margin-top: -1px; + margin-right: 0px; + margin-bottom: 0px; + margin-left: -12px; + width: 97%; + height: 67%; +} + +div.panel div.list-view div.fixed-header { + top: expression(this.offsetParent.scrollTop + 30); +} + +.detail-view div.list-view div.fixed-header { + top: 29px !important; + left: 12px !important; +} + +div.panel div.list-view div.data-table table.body { + top: 78px; +} + +.detail-view .main-groups { + width: 96%; + height: 416px; + position: relative; + overflow-x: hidden; + margin-top: -18px; +} + +.detail-view .ui-widget-content { + overflow-x: hidden !important; +} + +.tree-view { + position: relative; + top: expression(this.offsetParent.scrollTop); +} + +.tree-view li .name { + margin: 0px !important; +} + +.detail-view .button.done { + /*+placement:shift 0px 459px;*/ + position: relative; + left: 0px; + top: 459px; +} + +.detail-view ul { + /*+placement:shift;*/ + position: relative; + left: 0; + top: 0; +} + +.ui-tabs ul.ui-tabs-nav { + margin-top: 20px; +} + +.dashboard.admin .dashboard-container.sub.alerts ul { + top: expression(this.offsetParent.scrollTop); +} + +#user-options a:hover { + background: #ADADAD; + color: #FFFFFF; + /*+text-shadow:0px 1px 2px #383838;*/ + -moz-text-shadow: 0px 1px 2px #383838; + -webkit-text-shadow: 0px 1px 2px #383838; + -o-text-shadow: 0px 1px 2px #383838; + text-shadow: 0px 1px 2px #383838; +} + +.multi-wizard .progress ul li span.arrow { + display: none; + border-right: 0px solid #000000; +} + +.tree-view ul li .name { + float: right; +} + +.multi-edit .data .data-body .data-item .expandable-listing { + width: 99.8%; + border: 1px solid #CFC9C9; + max-height: 161px; + position: relative; + overflow: auto; + overflow-x: hidden; + top: expression(this.offsetParent.scrollTop); +} + +table tbody td, +table th { + padding: 9px 5px 8px 0px; + border-right: 1px solid #BFBFBF; + color: #495A76; + clear: none; + width: auto; + width: 88px; + min-width: 88px; + font-size: 11px; + overflow: hidden; + vertical-align: middle; +} + +.detail-view > .toolbar { + position: relative; + float: left; + left: -14px; +} + +.detail-view .list-view > .toolbar { + width: 100% !important; +} + +.system-chart ul.resources li .label { + /*+placement:shift 3px 9px;*/ + position: relative; + left: 3px; + top: 9px; + position: absolute; +} + +.system-chart ul.resources li .button.view-all .view-all-label { + /*+placement:shift 6px 5px;*/ + position: relative; + left: 6px; + top: 5px; +} + +.quick-view-tooltip div.title > span.title { +} + +.quick-view-tooltip div.title .icon { + top: -15px; +} + +.quick-view-tooltip table { +} + +.quick-view-tooltip .main-groups { + float: left; + left: 0px; + margin-top: 7px; +} + +.quick-view-tooltip .actions { + width: 426px !important; + float: left; +} + +.quick-view-tooltip .action { + float: left !important; + width: 54px !important; + margin-left: 7px !important; +} + +.quick-view-tooltip .action .label { + float: left; + max-width: 20px; +} + +.quick-view-tooltip .action .icon { + float: left; + height: 7px; + left: 0px; +} + +.list-view td.quick-view { +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text { + filter:alpha(opacity=100); +} diff --git a/ui/css/src/scss/cloudstack3.hu.scss b/ui/css/src/scss/cloudstack3.hu.scss new file mode 100644 index 00000000000..77259e14d57 --- /dev/null +++ b/ui/css/src/scss/cloudstack3.hu.scss @@ -0,0 +1,26 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ + +/* + * correct the breadcrumbs, hungarian translation is longer + * than the english default. + */ +#breadcrumbs div.home { + width: 100px; +} diff --git a/ui/css/src/scss/cloudstack3.ja_JP.scss b/ui/css/src/scss/cloudstack3.ja_JP.scss new file mode 100644 index 00000000000..c4164d92970 --- /dev/null +++ b/ui/css/src/scss/cloudstack3.ja_JP.scss @@ -0,0 +1,83 @@ +/*[fmt]1C20-1C0D-E*/ +/* +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ +#header div.view-switcher { + font-size: 9px; +} + +.dashboard.admin .dashboard-container .stats ul li .name { + font-size: 10px; +} + +.dashboard.admin .dashboard-container .stats ul li .percentage { + float: left; + font-size: 15px; + font-weight: bold; + margin: 13px 0 0; + /*+text-shadow:0px -2px 1px #FFFFFF;*/ + -moz-text-shadow: 0px -2px 1px #FFFFFF; + -webkit-text-shadow: 0px -2px 1px #FFFFFF; + -o-text-shadow: 0px -2px 1px #FFFFFF; + text-shadow: 0px -2px 1px #FFFFFF; +} + +.dashboard.admin .dashboard-container .stats ul li .value .content { + font-size: 10px; +} + +div.toolbar div.filters label { + font-size: 9px; +} + +div.toolbar div.filters select { + width: 82px; + font-size: 11px; +} + +div.toolbar div.button.add, +div.toolbar div.button.refresh, +div.toolbar div.button.add, +div.toolbar div.button.main-action, +.toolbar div.button.header-action, +.detail-group .button.add { + font-size: 10px; + white-space: nowrap; +} + +table tbody td.quick-view, +table thead th.quick-view { + font-size: 8px; +} + +.multi-wizard.instance-wizard .progress ul li span.multiline { + font-size: 9px; +} + +.multi-wizard .review .select-container .select .name { + white-space: nowrap; + font-size: 10px; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text .label { + font-size: 8px; +} + +.detail-view .multi-edit table tr th, .detail-view .multi-edit table tr td { + font-size: 8px; +} \ No newline at end of file diff --git a/ui/css/src/scss/cloudstack3.scss b/ui/css/src/scss/cloudstack3.scss new file mode 100644 index 00000000000..cfad99df14a --- /dev/null +++ b/ui/css/src/scss/cloudstack3.scss @@ -0,0 +1,13239 @@ +/*[fmt]1C20-1C0D-E*/ +/* +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +*/ +div.toolbar:after, +.multi-wizard.zone-wizard .select-container .field .select-array-item:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + font-size: 0; +} + +div.toolbar, +.multi-wizard.zone-wizard .select-container .field .select-array-item { + display: inline-block; +} + +div.toolbar, +.multi-wizard.zone-wizard .select-container .field .select-array-item { + display: block; + height: 1px; +} + +body { + min-width: 1224px; + font-family: sans-serif; + overflow: auto; + background: #EDE8E8; +} + +body.install-wizard { + font-family: sans-serif; + height: 769px !important; + overflow: auto; + overflow-x: hidden; + background: #FFFFFF url(../images/bg-login.png); +} + +#main-area { + width: 1224px; + height: 729px; + margin: auto; + border: 1px solid #D4D4D4; + /*+box-shadow:0px -5px 11px #B7B7B7;*/ + -moz-box-shadow: 0px -5px 11px #B7B7B7; + -webkit-box-shadow: 0px -5px 11px #B7B7B7; + -o-box-shadow: 0px -5px 11px #B7B7B7; + box-shadow: 0px -5px 11px #B7B7B7; + border: 1px solid #E8E8E8; +} + +#container { + /*[empty]width:;*/ + height: 100%; + margin: auto; + position: relative; +} + +#sections { + display: none; +} + +a { + color: #0B84DC; + text-decoration: none; +} + +a:hover { + text-decoration: underline; + color: #000000; +} + +/*Table*/ +table { + width: 955px; + max-width: 977px; + margin: 15px 15px 12px 12px; + font-size: 13px; + text-align: left; + text-indent: 10px; + border-bottom: 1px solid #C4C5C5; + border-collapse: collapse; + position: relative; +} + +table thead { + background: url(../images/bg-table-head.png) repeat-x; + cursor: default; +} + +table thead th { + border: 1px solid #C6C3C3; + color: #525252; + border-top: none; + border-bottom: 1px solid #CFC9C9; + text-align: left; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + font-weight: bold; + white-space: nowrap; + cursor: pointer; +} + +table thead th.sorted { + color: #312F2F; + /*+text-shadow:0px 1px 1px #BFBFBF;*/ + -moz-text-shadow: 0px 1px 1px #BFBFBF; + -webkit-text-shadow: 0px 1px 1px #BFBFBF; + -o-text-shadow: 0px 1px 1px #BFBFBF; + text-shadow: 0px 1px 1px #BFBFBF; +} + +table thead th.sorted.desc { + background-position: 102% -111px; +} + +table thead th.sorted.asc { + background-position: 102% -157px; +} + +table tbody td, +table th { + padding: 10px 5px 6px; + border-right: 1px solid #BFBFBF; + color: #282828; + clear: none; + min-width: 88px; + font-size: 11px; + overflow: hidden; + vertical-align: middle; +} + +table tbody td.loading { + text-align: center; + background: #DBE2E9; + border-top: 1px solid #FBFBFB; +} + +table tbody td.truncated { + overflow: visible; + max-width: 120px; +} + +table tbody td.truncated > span { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.list-view-select table th.name, +.list-view-select table td.name { + width: 170px; + min-width: 170px; + max-width: 170px; +} + +/** Multiselect*/ +table thead th.multiselect, +table tbody td.multiselect { + width: 20px; + min-width: 20px; + max-width: 20px; +} + +table thead th.multiselect input, +table tbody td.multiselect input { + margin: 0; + /*+placement:shift -8px 0px;*/ + position: relative; + left: -8px; + top: 0px; +} + +table thead th.multiselect input { + margin-left: 2px; +} + +/** Actions table cell*/ +table tbody td.actions { + width: 130px; + max-width: 130px !important; + min-width: 130px !important; + vertical-align: middle; +} + +table tbody td.actions input { + /*+placement:shift 10px -6px;*/ + position: relative; + left: 10px; + top: -6px; + margin: 11px 0 0px; +} + +.list-view-select table tbody td.actions { + width: 40px !important; + min-width: 40px !important; + max-width: 40px !important; +} + +.list-view-select table tbody td.actions input { + margin: 0 0 0 -7px; +} + +.list-view-select table thead th.actions { + width: 40px !important; + min-width: 40px !important; + max-width: 40px !important; + text-indent: 5px; +} + +/** Quick view table cell*/ +table tbody td.quick-view, +table thead th.quick-view { + min-width: 58px; + max-width: 58px !important; + width: 58px !important; + height: 14px !important; + text-indent: 2px; + white-space: nowrap; + cursor: default; +} + +table tbody td.quick-view .icon { + margin-left: 22px; + margin-top: 3px; + padding: 0px 0px 6px 12px; + background: url(../images/sprites.png) no-repeat -44px -62px; +} + +table tbody td.quick-view:hover .icon { + background-position: -44px -644px; +} + +table tbody tr.loading td.quick-view .icon { + display: none; +} + +table tbody tr.loading td.quick-view { + cursor: default; +} + +table tbody tr.loading td.quick-view .loading { + background-position: center center; +} + +/** Row styling*/ +table tbody tr { + border-left: 1px solid #C4C5C5; + border-right: 1px solid #C4C5C5; + border-top: 1px solid transparent; +} + +table tbody tr.even { + background: #FFFFFF; +} + +table tbody tr.odd { + background: #F2F0F0; +} + +table tbody tr.selected { + background: #CBDDF3; + border-top: 1px solid #EDF0F7 !important; + border-bottom: 1px solid #BABFD9; + text-shadow: 0px 1px 1px #FCFBF7; +} + +table tbody tr.to-remove { + background: #E05959; + border-top: 1px solid #EDF0F7 !important; + border-bottom: 1px solid #BABFD9; + text-shadow: 0px 1px 1px #FCFBF7; +} + +table tbody tr.loading { + background: #E2E9F0; +} + +table tbody tr.loading td { + /*+opacity:50%;*/ + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; + opacity: 0.5; +} + +table tbody tr.loading td.loading.icon { + background: url(../images/ajax-loader.gif) no-repeat center; + height: 35px; + padding: 0; +} + +table tbody tr div.loading { + display: block; + width: 50px; + height: 14px; + background: transparent url(../images/ajax-loader-small.gif) no-repeat center; + margin: auto; +} + +table th.resizable { + position: relative; + cursor: col-resize; +} + +table th div.ui-resizable-handle { + position: relative; + top: -30px; + float: right; +} + +/** Header, misc*/ +#template { + display: none; +} + +/*Login screen*/ +body.login { + background: url(../images/overlay-pattern.png) repeat center, #106CA9 url(../images/bg-login.jpg) no-repeat center; + background-size: auto, cover; + overflow: hidden; +} + +.login { + display: block; + width: 100%; + height: 350px; + /*+placement:shift 0 80px;*/ + position: relative; + left: 0; + top: 80px; + background: #053663; +} + +.login .select-language { + margin-top: 10px; + float: left; +} + +.login .select-language select { + width: 260px; + border: 1px solid #808080; + margin-top: 20px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + font-size: 12px; + /*+box-shadow:inset 0px 1px 1px #838383;*/ + -moz-box-shadow: inset 0px 1px 1px #838383; + -webkit-box-shadow: inset 0px 1px 1px #838383; + -o-box-shadow: inset 0px 1px 1px #838383; + box-shadow: inset 0px 1px 1px #838383; +} + +.login .fields { + width: 409px; + float: left; + margin: 72px 0 0 88px; +} + +.login .fields .field { + position: relative; +} + +.login .fields .field label { + font-size: 12px; + color: #4E4F53; + /*+placement:displace 9px 14px;*/ + position: absolute; + margin-left: 9px; + margin-top: 14px; +} + +.login .fields .field label.error { + color: #FF0000; + float: right; + left: 264px; + top: 0; +} + +.login .fields input { + width: 248px; + height: 20px; + margin: 5px 0 0; + text-indent: 1px; + font-size: 13px; + border: none; + padding: 5px; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + /*+box-shadow:inset 0px 1px 1px #4E4E4E;*/ + -moz-box-shadow: inset 0px 1px 1px #4E4E4E; + -webkit-box-shadow: inset 0px 1px 1px #4E4E4E; + -o-box-shadow: inset 0px 1px 1px #4E4E4E; + box-shadow: inset 0px 1px 1px #4E4E4E; + background: #ECECEC; +} + +.login .fields input.error { + border-color: #FF8080; + background: #FFEAEA; +} + +.login .fields input[type=submit] { + background: transparent url(../images/sprites.png) -563px -747px; + cursor: pointer; + border: none; + margin: 7px 120px 0 -1px; + text-align: center; + width: 69px; + height: 25px; + display: block; + color: #FFFFFF; + font-weight: bold; + float: left; + text-indent: -1px; + /*+text-shadow:0px 1px 2px #000000;*/ + -moz-text-shadow: 0px 1px 2px #000000; + -webkit-text-shadow: 0px 1px 2px #000000; + -o-text-shadow: 0px 1px 2px #000000; + text-shadow: 0px 1px 2px #000000; +} + +.login .fields input[type=samlsubmit] { + background: transparent url(../images/sprites.png) -563px -747px; + cursor: pointer; + border: none; + text-align: center; + width: 60px; + height: 15px; + display: block; + color: #FFFFFF; + font-weight: bold; + text-indent: -1px; + /*+text-shadow:0px 1px 2px #000000;*/ + -moz-text-shadow: 0px 1px 2px #000000; + -webkit-text-shadow: 0px 1px 2px #000000; + -o-text-shadow: 0px 1px 2px #000000; + text-shadow: 0px 1px 2px #000000; + font-size: 10px; +} + +.login .fields input[type=submit]:hover { + background-position: -563px -772px; +} + +.login .logo { + width: 290px; + height: 40px; + float: left; + margin: 72px 0 0 209px; + background: url(../images/logo-login.png) no-repeat 0 0; +} + +.login.nologo .logo { + background-image: url(../images/logo-login-oss.png); +} + +.login form { + display: block; + width: 1000px; + height: 100%; + margin: auto; + background: #053663; +} + +/*About dialog*/ +.dialog-about .ui-widget-content { + padding-left: 0; + padding-right: 0; + width: 100% !important; +} + +.dialog-about .logo { + font-size: 26px; + color: #636363; + padding-top: 20px; +} + +.dialog-about .version { + font-size: 12px; + padding-top: 10px; +} + +.dialog-about .ui-button { + float: none; + margin: 0 auto; +} + +#browser div.panel div.detail-view .toolbar { + width: 100%; +} + +div.list-view table tbody td span { + display: block; + float: left; + max-width: 89%; + word-break: break-all; + word-wrap: break-word; + text-indent: 0; + margin-left: 12px; + line-height: 15px; +} + +div.list-view div.toolbar div.section-switcher div.section-select label { + margin: 0 9px 0 0; +} + +.loading-overlay { + position: absolute; + width: 100%; + height: 100%; + left: 0px; + top: 0px; + background: #F2F2F2 url(../images/ajax-loader.gif) no-repeat center; + z-index: 500; + /*+opacity:70%;*/ + filter: alpha(opacity=70); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + -moz-opacity: 0.7; + opacity: 0.7; +} + +.loading-overlay span { + display: block; + text-align: center; + margin: 155px 0 0 5px; + color: #4B4B4B; +} + +.detail-view .ui-tabs-panel .loading-overlay { + background-position: 50% 250px; +} + +/*Install wizard*/ +.install-wizard { + width: 1024px; + height: 768px; + margin: auto; + border-top: none; + position: relative; +} + +.install-wizard .header { + text-align: center; + background: url(../images/bg-login.png); + color: #626E82; + height: 365px; + padding: 32px 0 89px; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 2px #FFFFFF; + -webkit-text-shadow: 0px 1px 2px #FFFFFF; + -o-text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0px 1px 2px #FFFFFF; + z-index: 9; +} + +.install-wizard .header h3 { + font-size: 20px; +} + +.install-wizard .step { + max-width: 691px; + margin: auto; + padding: 56px 0 0; +} + +.install-wizard .step .title { + width: 303px; + margin: auto auto 30px; + font-size: 22px; + clear: both; + color: #626E82; +} + +.install-wizard .step .subtitle { + color: #4B5E69; + font-weight: bold; + font-size: 12px; +} + +.install-wizard .step p { + color: #4A4A4A; + font-size: 15px; + line-height: 23px; + background: url(../images/bg-gradient-white-transparent.png) repeat-x -114px -270px; +} + +.install-wizard .step ul li { + margin: 14px 0 0 18px; + width: 465px; + font-size: 13px; + list-style: disc; +} + +.install-wizard .step .field { + text-align: left; + margin: 0 0 12px; +} + +.install-wizard .step .field label { + display: block; + clear: both; + font-size: 11px; + color: #4D4D4D; +} + +.install-wizard .step .field label.error { + color: #FF2424; + font-size: 11px; +} + +.install-wizard .body { + width: 1012px; + height: 762px; + margin: -352px auto auto; + z-index: 10; + background: url(../images/bg-gradient-white-transparent.png) repeat-x -114px -141px; + /*+box-shadow:0px -3px 4px #CFCFCF;*/ + -moz-box-shadow: 0px -3px 4px #CFCFCF; + -webkit-box-shadow: 0px -3px 4px #CFCFCF; + -o-box-shadow: 0px -3px 4px #CFCFCF; + box-shadow: 0px -3px 4px #CFCFCF; +} + +.install-wizard h2 { + font-size: 28px; + margin: 0 0 19px; +} + +.install-wizard input[type=text], +.install-wizard input[type=password], +.install-wizard input[type=text], +.install-wizard select { + width: 288px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #CDCDCD; + /*+box-shadow:inset 0px 1px #AEAEAE;*/ + -moz-box-shadow: inset 0px 1px #AEAEAE; + -webkit-box-shadow: inset 0px 1px #AEAEAE; + -o-box-shadow: inset 0px 1px #AEAEAE; + box-shadow: inset 0px 1px #AEAEAE; + -moz-box-shadow: inset 0px 1px 0px #AEAEAE; + -webkit-box-shadow: inset 0px 1px 0px #AEAEAE; + -o-box-shadow: inset 0px 1px 0px #AEAEAE; + font-size: 14px; + color: #232323; + padding: 6px; + background: #F7F7F7; +} + +.install-wizard .button { + background: url(../images/bg-gradients.png) 0px -221px; + padding: 7px 16px 7px 18px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #505050; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + /*+text-shadow:0px -1px 3px #3F4351;*/ + -moz-text-shadow: 0px -1px 3px #3F4351; + -webkit-text-shadow: 0px -1px 3px #3F4351; + -o-text-shadow: 0px -1px 3px #3F4351; + text-shadow: 0px -1px 3px #3F4351; + float: right; + cursor: pointer; + margin-top: 15px; +} + +.install-wizard .button.advanced-installation, +.install-wizard .button.go-back { + background: #E0DEDE; + color: #3B3B3B; + border: 1px solid #C7C2C2; + /*+text-shadow:0px 0px #FFFFFF;*/ + -moz-text-shadow: 0px 0px #FFFFFF; + -webkit-text-shadow: 0px 0px #FFFFFF; + -o-text-shadow: 0px 0px #FFFFFF; + text-shadow: 0px 0px #FFFFFF; + float: left; +} + +.install-wizard .button.go-back { + padding: 9px 16px 10px 18px; + font-size: 12px; +} + +.install-wizard .setup-form .button.go-back { + /*+placement:shift 15px -14px;*/ + position: relative; + left: 15px; + top: -14px; +} + +.install-wizard .step { + z-index: 11; + position: relative; +} + +.install-wizard .step .tooltip-info { + /*+placement:shift 547px 50px;*/ + position: relative; + left: 547px; + top: 50px; + position: absolute; +} + +/*** Intro*/ +.install-wizard .step.intro.what-is-cloudstack p { + background: url(../images/bg-what-is-cloudstack.png) no-repeat 50% 237px; + height: 540px; +} + +/*** Diagram*/ +.install-wizard .diagram { + width: 910px; + height: 385px; + /*+placement:shift 65px 496px;*/ + position: relative; + left: 65px; + top: 496px; + position: absolute; + z-index: 10; +} + +.install-wizard .diagram .part { + background: url(../images/install-wizard-parts.png) no-repeat; + display: none; +} + +.install-wizard .diagram .part.zone { + width: 742px; + height: 135px; + background-position: -267px -580px; + /*+placement:shift 77px 222px;*/ + position: relative; + left: 77px; + top: 222px; + position: absolute; +} + +.install-wizard .diagram .part.loading { + width: 742px; + height: 432px; + background-position: -1264px -487px; + /*+placement:shift 105px -67px;*/ + position: relative; + left: 105px; + top: -67px; + position: absolute; +} + +.install-wizard .diagram .part.loading .icon { + width: 61px; + height: 76px; + background: url(../images/ajax-loader.gif) no-repeat; + /*+placement:shift 322px 130px;*/ + position: relative; + left: 322px; + top: 130px; +} + +.install-wizard .diagram .part.pod { + width: 266px; + height: 396px; + background-position: -47px -3px; + /*+placement:shift 313px -76px;*/ + position: relative; + left: 313px; + top: -76px; + position: absolute; +} + +.install-wizard .diagram .part.cluster { + width: 266px; + height: 396px; + background-position: -364px 1px; + /*+placement:shift 313px -76px;*/ + position: relative; + left: 313px; + top: -76px; + position: absolute; +} + +.install-wizard .diagram .part.host { + width: 266px; + height: 396px; + background-position: -688px 1px; + /*+placement:shift 313px -76px;*/ + position: relative; + left: 313px; + top: -76px; + position: absolute; +} + +.install-wizard .diagram .part.primaryStorage { + width: 275px; + height: 396px; + background-position: -1046px 1px; + /*+placement:shift 306px -76px;*/ + position: relative; + left: 306px; + top: -76px; + position: absolute; +} + +.install-wizard .diagram .part.secondaryStorage { + width: 385px; + height: 396px; + background-position: -1469px 1px; + /*+placement:shift 306px -76px;*/ + position: relative; + left: 306px; + top: -76px; + position: absolute; +} + +/*** Setup form*/ +.install-wizard .step .setup-form { + display: inline-block; + background: url(../images/bg-transparent-white.png); + width: 469px; + border: 1px solid #DFDFDF; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; + -moz-text-shadow: 0px 1px 0px #FFFFFF; + -webkit-text-shadow: 0px 1px 0px #FFFFFF; + -o-text-shadow: 0px 1px 0px #FFFFFF; + /*+box-shadow:0px 5px 9px #9F9F9F;*/ + -moz-box-shadow: 0px 5px 9px #9F9F9F; + -webkit-box-shadow: 0px 5px 9px #9F9F9F; + -o-box-shadow: 0px 5px 9px #9F9F9F; + box-shadow: 0px 5px 9px #9F9F9F; +} + +.install-wizard .step .setup-form .title { + float: left; + margin: 17px 0 0 29px; + color: #626F7C; +} + +.install-wizard .step .setup-form .field { + width: 389px; + display: inline-block; + margin: 6px 0 1px 31px; + padding: 9px; + color: #57646D; +} + +.install-wizard .step .setup-form .field .name { + width: 98px; + text-align: right; + float: left; + font-size: 13px; + padding: 10px 0 0 0px; +} + +.install-wizard .step .setup-form .field .value { + float: right; +} + +.install-wizard .step .setup-form input[type=text], +.install-wizard .step .setup-form input[type=password] { + width: 278px; + border: 1px solid #8D8D8D; + padding: 2px 2px 1px; + margin: 6px 4px 0 0; +} + +.install-wizard .step .setup-form .range-item { + width: 142px; + float: left; +} + +.install-wizard .step .setup-form .range-item input { + width: 131px; +} + +.install-wizard .step .setup-form .multi-range input[type=text] { + width: 128px; +} + +.install-wizard .step .setup-form input.button { + margin: 0 30px 14px 15px; +} + +/*** Step: Change user*/ +.install-wizard .step.change-user { + text-align: center; + padding-top: 95px; + width: 316px; + margin: auto; +} + +.install-wizard .step.intro iframe { + width: 99%; + height: 99%; + margin: 4px; +} + +.install-wizard .step.intro .title { + color: #565454; + margin-left: 0; + margin-bottom: 21px; + font-size: 25px; +} + +.install-wizard .step.intro .subtitle { + margin-bottom: 9px; +} + +.install-wizard .step.intro .subtitle li { + background: url(../images/ajax-loader-small.gif) no-repeat 3px 0px; + position: relative; + width: 45%; + padding: 1px 0 1px 30px; + height: 24px; + list-style: none; +} + +.install-wizard .step.intro .subtitle li.complete { + background: url(../images/icons.png) -1px -224px; +} + +.install-wizard .step.intro .subtitle li.error { + background: url(../images/icons.png) -1px -190px; +} + +.install-wizard .step.intro .subtitle li img { + float: right; +} + +/*Notifications*/ +div.notification-box { + width: 323px; + height: 354px; + background: url(../images/bg-notifications.png) no-repeat 0px 0px; +} + +div.notification-box h3 { + color: #FFFFFF; + /*+placement:shift 0px 35px;*/ + position: relative; + left: 0px; + top: 35px; + text-align: center; + font-size: 21px; + letter-spacing: 1px; + /*+text-shadow:0px 1px 2px #000000;*/ + -moz-text-shadow: 0px 1px 2px #000000; + -webkit-text-shadow: 0px 1px 2px #000000; + -o-text-shadow: 0px 1px 2px #000000; + text-shadow: 0px 1px 2px #000000; +} + +div.notification-box .container { + background: #FFFFFF; + width: 296px; + height: 241px; + margin: auto; + /*+placement:shift 3px 46px;*/ + position: relative; + left: 3px; + top: 46px; + /*+box-shadow:inset 0px 3px 7px #656565;*/ + -moz-box-shadow: inset 0px 3px 7px #656565; + -webkit-box-shadow: inset 0px 3px 7px #656565; + -o-box-shadow: inset 0px 3px 7px #656565; + box-shadow: inset 0px 3px 7px #656565; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #8198AE; +} + +div.notification-box .container ul { + margin-top: 8px; + height: 229px; + overflow: auto; + overflow-x: hidden; + width: 294px; +} + +div.notification-box .container ul li { + width: 100%; + height: 41px; + border-bottom: 1px solid #CECECE; + overflow-x: hidden; + text-indent: 0; + font-size: 12px; + color: #4D5E6E; + background: url(../images/icons.png) no-repeat 10px -213px; + cursor: pointer; +} + +div.notification-box .container ul li.error { + height: 53px; + background: url(../images/icons.png) no-repeat 10px -171px; +} + +div.notification-box .container ul li.error .subtitle { + display: block; + width: 213px; + height: 10px; + overflow: hidden; + white-space: nowrap; + float: left; + text-overflow: ellipsis; + color: #808080; + text-indent: 0; + padding: 0; + margin: 0; + /*+placement:shift 48px 17px;*/ + position: relative; + left: 48px; + top: 17px; +} + +div.notification-box .container ul li span { + float: left; + /*+placement:shift 48px 15px;*/ + position: relative; + left: 48px; + top: 15px; + max-width: 202px; + font-size: 14px; + font-weight: 100; + overflow: hidden; +} + +div.notification-box .container ul li span:hover { + color: #5FAAF7; + text-decoration: underline; +} + +div.notification-box .container ul div.remove { + width: 17px; + height: 21px; + background: url(../images/buttons.png) no-repeat -623px -8px; + float: right; + margin: -4px 8px 0px 0px; + cursor: pointer; + /*+placement:shift 0px 16px;*/ + position: relative; + left: 0px; + top: 16px; +} + +div.notification-box .container ul div.remove:hover { + background-position: -606px -8px; +} + +div.notification-box .container ul li.pending { + color: #7E96AC; + background: url(../images/ajax-loader.gif) no-repeat 8px 6px; +} + +div.notification-box .container ul li.first { + border-top: none; +} + +div.notification-box .button { + float: left; + background: url(../images/buttons.png) no-repeat; + cursor: pointer; + /*+placement:shift 0px 51px;*/ + position: relative; + left: 0px; + top: 51px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border-bottom: 1px solid #2B2B2B; + /*+box-shadow:0px 0px 2px #272727;*/ + -moz-box-shadow: 0px 0px 2px #272727; + -webkit-box-shadow: 0px 0px 2px #272727; + -o-box-shadow: 0px 0px 2px #272727; + box-shadow: 0px 0px 2px #272727; + padding: 5px 10px 6px; +} + +div.notification-box .button span { + color: #FFFFFF; + font-size: 11px; + font-weight: bold; + letter-spacing: 1px; + /*+text-shadow:0px -1px 2px #171717;*/ + -moz-text-shadow: 0px -1px 2px #171717; + -webkit-text-shadow: 0px -1px 2px #171717; + -o-text-shadow: 0px -1px 2px #171717; + text-shadow: 0px -1px 2px #171717; +} + +div.notification-box .button.clear-list { + background: url(../images/gradients.png) 0px -10px; + margin-left: 16px; +} + +div.notification-box .button.clear-list:hover { + background-position: 0px -51px; +} + +div.notification-box .button.close { + background: url(../images/gradients.png) 0px -317px; + float: right; + margin-right: 10px; + border-bottom: 1px solid #232323; +} + +div.notification-box .button.close:hover { + background-position: -4px -368px; +} + +/*** Corner alert*/ +div.notification.corner-alert { + background: #FFFFFF; + background: rgba(255, 255, 255, 0.95); + /*+box-shadow:0px 2px 10px #000000;*/ + -moz-box-shadow: 0px 2px 10px #000000; + -webkit-box-shadow: 0px 2px 10px #000000; + -o-box-shadow: 0px 2px 10px #000000; + box-shadow: 0px 2px 10px #000000; + width: 300px; + height: 75px; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + position: absolute; + text-indent: 10px; + padding: 7px 7px 0; + font-size: 12px; + /*+opacity:70%;*/ + filter: alpha(opacity=70); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + -moz-opacity: 0.7; + opacity: 0.7; + z-index: 100; + margin: 38px 0 0 -56px; +} + +div.notification.corner-alert .top-arrow { + background: url(../images/sprites.png) no-repeat -580px -1353px; + width: 36px; + height: 15px; + position: absolute; + top: -15px; + left: 50px; +} + +div.notification.corner-alert div.title { + width: 100%; + height: 33px; + color: #FFFFFF; +} + +div.notification.corner-alert div.title span { + /*+placement:shift 0px 10px;*/ + position: relative; + left: 0px; + top: 10px; + color: #6D6D6D; + padding: 3px 0 12px 24px; + font-weight: 100; + font-size: 14px; + padding-left: 33px; + background: url(../images/icons.png) no-repeat 3px -223px; +} + +div.notification.corner-alert.error div.title span { + background: url(../images/icons.png) no-repeat -2px -190px; +} + +div.notification.corner-alert div.message span { + position: relative; + padding-top: 6px; + font-size: 14px; + display: block; + color: #000000; + /*+placement:shift 17px -2px;*/ + position: relative; + left: 17px; + top: -2px; +} + +/*Tooltips*/ +.tooltip-info { + width: 239px; + min-height: 83px; + display: inline-block; + background: #FFFFFF; + border: 1px solid #BEB8B8; + position: absolute; + z-index: 1000; + /*+border-radius:22px;*/ + -moz-border-radius: 22px; + -webkit-border-radius: 22px; + -khtml-border-radius: 22px; + border-radius: 22px; + border-radius: 22px 22px 22px 22px; +} + +.tooltip-info .arrow { + width: 27px; + height: 47px; + position: absolute; + top: 17px; + left: -18px; + background: url(../images/sprites.png) -583px -939px; +} + +.tooltip-info .title { + color: #485766; + margin: 12px; + font-size: 19px; +} + +.tooltip-info .content { + width: 182px; + font-size: 11px; + line-height: 19px; + padding-bottom: 13px; + overflow: auto; + overflow-x: hidden; + margin: auto; +} + +/*List view*/ +div.panel div.list-view { + overflow: auto; + overflow-x: hidden; + height: 632px; + margin-top: 30px; +} + +.detail-view div.list-view { + width: 930px; + border: 1px solid #DAD4D4; + margin: 41px auto auto !important; + height: 536px !important; + background: #F7F7F7; +} + +div.panel div.list-view div.data-table table { + width: 955px; +} + +.detail-view div.list-view div.data-table table { + width: 903px !important; +} + +.detail-view div.list-view div.data-table table td { + border-left: 1px solid #CACACA; +} + +div.panel div.list-view div.fixed-header { + position: absolute; + top: 29px; + left: 12px; + width: 960px; + height: 47px; + display: table; + background-color: #F7F7F7; + margin: 0; + z-index: 1; +} + +.detail-view div.list-view div.fixed-header { + width: 903px !important; + top: 49px !important; + left: 29px !important; + background: #FFFFFF; +} + +.detail-view div#details-tab-zones div.fixed-header { + left: 25px !important; +} + +.detail-view div.list-view div.fixed-header table { + width: 100% !important; +} + +.project-view div.panel div.list-view div.fixed-header { + background: #6D747D; +} + +div.panel div.list-view div.fixed-header table { + margin: 0; + /*+placement:shift 0px 18px;*/ + position: relative; + left: 0px; + top: 18px; + width: 955px; + /*+box-shadow:0px 4px 10px #DFE1E3;*/ + -moz-box-shadow: 0px 4px 10px #DFE1E3; + -webkit-box-shadow: 0px 4px 10px #DFE1E3; + -o-box-shadow: 0px 4px 10px #DFE1E3; + box-shadow: 0px 4px 10px #DFE1E3; +} + +.project-view div.panel div.list-view div.fixed-header table { + /*+box-shadow:0px 2px 2px #CACDD1;*/ + -moz-box-shadow: 0px 2px 2px #CACDD1; + -webkit-box-shadow: 0px 2px 2px #CACDD1; + -o-box-shadow: 0px 2px 2px #CACDD1; + box-shadow: 0px 2px 2px #CACDD1; +} + +div.list-view td.state { + width: 120px; + min-width: 120px; + max-width: 120px; +} + +div.list-view td.first { + cursor: pointer; +} + +div.list-view tr:not(.multi-edit-selected) td.first:hover { + color: #3A82CD; +} + +div.list-view td.state span { + padding: 1px 0 0 18px; + text-align: center; + width: 80px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + background: url(../images/sprites.png) 1px -526px; +} + +div.list-view td.state.on span { + background-image: url(../images/sprites.png); + background-repeat: no-repeat; + color: #008000; + background-position: 1px -460px; +} + +div.list-view td.state.off span { + background-image: url(../images/sprites.png); + background-repeat: no-repeat; + color: #B90606; + background-position: 1px -492px; +} + +div.list-view td.state.warning span { + background-image: url(../images/sprites.png); + background-repeat: no-repeat; + color: #B90606; + background-position: 1px -558px; +} + +div.list-view td.state.transition span { + background-image: url(../images/sprites.png); + background-repeat: no-repeat; + color: #B90606; + background-position: 1px -432px; +} + +div.list-view td.state.suitable span { + background: url(../images/icons.png) no-repeat scroll 1px -224px; + color: #008000; + height: 18px; +} + +div.list-view td.state.suitable-storage-migration-required span { + width: 200px; +} + +div.list-view td.state.notsuitable span { + background: url(../images/icons.png) no-repeat scroll 1px -190px; + color: #B90606; + height: 19px; + width: 100px; +} + +div.list-view td.state.notsuitable-storage-migration-required span { + width: 220px !important; +} + +.horizontal-overflow tbody td, .horizontal-overflow thead th { + min-width: 40px; + padding: 10px 10px 5px 0px; +} + +.horizontal-overflow th.quick-view { + padding-left: 5px; +} + +.groupable-header { + background: url(../images/bg-table-head.png); + border-left: 1px solid #C6C3C3; + border-right: 1px solid #C6C3C3; +} + +.groupable-header-columns th { + border: none; +} + +table.horizontal-overflow td.state { + width: 55px; + min-width: 55px; + max-width: 55px; +} + +table.no-split td.first { + min-width: 150px; +} + +.groupable-header-border { + border-left: 1px solid #C6C3C3; + border-right: 1px solid #C6C3C3; +} + +td.alert-notification-threshold { + color: #E87900; + background-color: rgba(255, 231, 175, 0.75); +} + +td.alert-disable-threshold { + color: #F50000; + background-color: rgba(255, 190, 190, 0.75); +} + +span.compact { + height: 16px; +} + +/** Quick view tooltip*/ +.quick-view-tooltip { + width: 470px; + display: inline-block; + padding-top: 0; + margin-left: 0px; +} + +.quick-view-tooltip > div.title { + width: 444px; + position: absolute; + top: 20px; + left: 10px; + color: #808080; + font-weight: 100; +} + +.quick-view-tooltip > div.title .icon { + position: relative; + top: -2px; + left: -7px; + background: url(../images/sprites.png) no-repeat -42px -67px; + float: right; + padding: 0px 13px 0 0px; +} + +.quick-view-tooltip .loading-overlay { + top: 94px; + height: 57px; + left: 1px; + /*+opacity:35%;*/ + filter: alpha(opacity=35); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35); + -moz-opacity: 0.35; + opacity: 0.35; +} + +.quick-view-tooltip .container { + border: 1px solid #9EA2A5; + background: #FFFFFF; + width: 471px; + min-height: 100px; + height: auto; + overflow: hidden; + display: inline-block; + /*+box-shadow:0px 7px 9px #676F76;*/ + -moz-box-shadow: 0px 7px 9px #676F76; + -webkit-box-shadow: 0px 7px 9px #676F76; + -o-box-shadow: 0px 7px 9px #676F76; + box-shadow: 0px 7px 9px #676F76; +} + +/*** Quick view detail view*/ +.quick-view-tooltip .detail-view .main-groups { + width: 456px; + height: 170px; + position: absolute; + padding-top: 7px; + top: 55px; + border: 1px solid #808080; + border-left: none; + border-right: none; + overflow: hidden; + /*+box-shadow:0px 1px #E6E6E6;*/ + -moz-box-shadow: 0px 1px #E6E6E6; + -webkit-box-shadow: 0px 1px #E6E6E6; + -o-box-shadow: 0px 1px #E6E6E6; + box-shadow: 0px 1px #E6E6E6; +} + +.quick-view-tooltip .detail-view .tagger { + display: none; +} + +.quick-view-tooltip .detail-view ul { + display: none !important; +} + +.quick-view-tooltip .detail-view .ui-tabs-panel { + display: inline-block; + width: 100% !important; + float: left; + height: auto; + overflow: hidden; +} + +.quick-view-tooltip .detail-view .details { + display: inline-block; + height: auto; + padding-bottom: 224px; +} + +.quick-view-tooltip .detail-view .detail-group { + width: 365px; + margin: 0; + padding: 0; + left: -9px; + background: none; + border: none; +} + +.quick-view-tooltip .detail-view .detail-group table { + margin: 0; + border: none; + background: none; +} + +.quick-view-tooltip .detail-view .detail-group table tr { + background: none; +} + +.quick-view-tooltip .detail-view .detail-group table td.name { + color: #000000 !important; + padding: 0px 29px 0px 5px !important; + font-size: 13px; +} + +.quick-view-tooltip .detail-view .detail-group table td.value { + font-size: 12px; + /*+text-shadow:0px 1px #EAEAEA;*/ + -moz-text-shadow: 0px 1px #EAEAEA; + -webkit-text-shadow: 0px 1px #EAEAEA; + -o-text-shadow: 0px 1px #EAEAEA; + text-shadow: 0px 1px #EAEAEA; + overflow: hidden; +} + +.quick-view-tooltip .detail-view .detail-group table td.value input[type=text] { + width: 258px; + height: 10px; + margin-left: 0px; +} + +.quick-view-tooltip .detail-view .detail-group .main-groups table td.value span { + height: 25px; + top: 7px; +} + +.quick-view-tooltip .detail-view .detail-group.actions { + position: relative; + top: 202px; + float: left; + width: 100%; + height: auto; +} + +.quick-view-tooltip .detail-view .detail-group.actions .button { + top: 160px; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text { + width: 112px; + height: 41px; + background: none; + border: none; + float: left; + margin-left: 5px; + display: inline-block; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text:hover { + /*+box-shadow:none;*/ + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text .icon { + display: block; + float: left; + width: 4px; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text .label { + width: 81px; + display: block; + float: right; + font-size: 11px; + color: #454C53; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; + text-indent: 0px; +} + +.quick-view-tooltip .detail-view .detail-group.actions .action.text:hover .label { + color: #000000; +} + +.quick-view-tooltip .detail-view .detail-group.actions .detail-actions { + width: 460px; + height: auto; + background: none; + vertical-align: top; + position: relative; + top: 27px; + float: left; +} + +.quick-view-tooltip .detail-view .detail-group.actions td.view-all { + position: relative; + left: 0px; + top: 26px; + float: left; + height: 26px; + /*+box-shadow:inset 0px 1px #FFFFFF;*/ + -moz-box-shadow: inset 0px 1px #FFFFFF; + -webkit-box-shadow: inset 0px 1px #FFFFFF; + -o-box-shadow: inset 0px 1px #FFFFFF; + box-shadow: inset 0px 1px #FFFFFF; +} + +.quick-view-tooltip .detail-view .detail-actions a { + background: none; + width: 30px; +} + +/*Details page*/ +.detail-view { + padding: 0 0 0 14px; +} + +.ui-tabs .info { + background: #EFEFEF; + width: 91%; + height: auto; + overflow: visible; + padding: 14px 14px 0; + border: 1px dashed #D7D7D7; + /*+box-shadow:inset 0px 1px 2px #FFFFFF;*/ + -moz-box-shadow: inset 0px 1px 2px #FFFFFF; + -webkit-box-shadow: inset 0px 1px 2px #FFFFFF; + -o-box-shadow: inset 0px 1px 2px #FFFFFF; + box-shadow: inset 0px 1px 2px #FFFFFF; + margin: 10px; + display: inline-block; +} + +.ui-tabs .info li { + font-size: 12px; + color: #3E4C59; + margin: 0 0 18px; +} + +.ui-tabs .info li strong { + font-weight: bold; + color: #506273; +} + +.project-view .ui-tabs ul li.ui-state-default a { + background: #6D747D; + /*+box-shadow:inset -1px -2px 12px #596066;*/ + -moz-box-shadow: inset -1px -2px 12px #596066; + -webkit-box-shadow: inset -1px -2px 12px #596066; + -o-box-shadow: inset -1px -2px 12px #596066; + box-shadow: inset -1px -2px 12px #596066; + color: #FFFFFF; + font-weight: bold; + /*+text-shadow:0px -1px 1px #3A3E42;*/ + -moz-text-shadow: 0px -1px 1px #3A3E42; + -webkit-text-shadow: 0px -1px 1px #3A3E42; + -o-text-shadow: 0px -1px 1px #3A3E42; + text-shadow: 0px -1px 1px #3A3E42; +} + +.project-view .ui-tabs ul li.ui-state-hover a { + background: #878E97 0px 8px; +} + +.project-view .ui-tabs ul li.ui-state-active a { + background: #DBDDDF; + color: #4F6270; + font-weight: bold; + /*+text-shadow:0px 0px #FFFFFF;*/ + -moz-text-shadow: 0px 0px #FFFFFF; + -webkit-text-shadow: 0px 0px #FFFFFF; + -o-text-shadow: 0px 0px #FFFFFF; + text-shadow: 0px 0px #FFFFFF; + /*+box-shadow:0px 0px;*/ + -moz-box-shadow: 0px 0px; + -webkit-box-shadow: 0px 0px; + -o-box-shadow: 0px 0px; + box-shadow: 0px 0px; + -moz-box-shadow: 0px 0px none; + -webkit-box-shadow: 0px 0px none; + -o-box-shadow: 0px 0px none; +} + +.ui-tabs li.ui-state-active.first.last a, +.ui-tabs li.ui-state-default.first.last a { + /*+border-radius:4px 4px 0 0;*/ + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.ui-tabs .ui-tabs-hide { + display: none !important; +} + +.ui-tabs .ui-tabs-panel { + border: 1px solid #D9D9D9; + clear: both; + padding: 7px 0 0 0; + width: 97%; + overflow: auto; + overflow-x: hidden; + height: 591px; +} + +.detail-view .main-groups { + max-height: 407px; + overflow: auto; + overflow-x: hidden; + width: 100%; + /*[empty]padding:;*/ + margin-right: 12px; +} + +.detail-view.edit-mode .main-groups { + max-height: 360px; +} + +.detail-group table { + width: 98%; + font-size: 12px; + border-bottom: 1px solid #DFDFDF; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); + margin-top: 10px; +} + +.detail-group table tr, +.detail-group table td { + vertical-align: middle; + border: none; + cursor: default; +} + +.detail-group table tr.odd { + background: none; +} + +.details.group-multiple table { + border: none; + border-top: none; +} + +.details.group-multiple table.header { + width: 94%; + margin-bottom: 1px; +} + +.details.group-multiple table tbody { + border-top: 1px solid #F2F0F0; +} + +.detail-group .main-groups table td.name { + width: 113px; + color: #6D6D6D; + font-weight: bold; + padding: 14px 12px 13px 13px; + border: none; + text-indent: 0; +} + +.detail-group .main-groups table td.value { + text-indent: 0; +} + +.detail-group .main-groups table td.value > span { + display: block; + height: 30px; + overflow: auto; + position: relative; + top: 9px; + float: left; + width: 245px; +} + +.detail-group .main-groups table td.value > span.copypasteenabledvalue { + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.detail-group .main-groups table td.value > .copypasteactive { + display: auto; + white-space: nowrap; + overflow: none; +} + +div.copypasteicon { + background: url("../images/sprites.png") no-repeat -271px -65px; + float: left; + height: 21px; + margin-left: 6px; + margin-top: 0px; + width: 18px; +} + +div.copypasteicon:hover { + background: url("../images/sprites.png") no-repeat -271px -646px; +} + +.detail-group .main-groups table td.value > span.copypasteenabledvalue { + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.detail-group .main-groups table td.value > .copypasteactive { + display: auto; + white-space: nowrap; + overflow: none; +} + +div.copypasteicon { + background: url("../images/sprites.png") no-repeat -271px -65px; + float: left; + height: 21px; + margin-left: 6px; + margin-top: 0px; + width: 18px; +} + +div.copypasteicon:hover { + background: url("../images/sprites.png") no-repeat -271px -646px; +} + +.detail-group .main-groups table td.value > span select { + width: 100% !important; +} + +.detail-group .main-groups table td.value .view-all { + cursor: pointer; + /*[empty]height:;*/ + /*+border-radius:4px 0 0 4px;*/ + -moz-border-radius: 4px 0 0 4px; + -webkit-border-radius: 4px 0 0 4px; + -khtml-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; + float: right; + margin: 7px 0 0; + padding: 0px; +} + +.detail-group .main-groups table td.value .view-all span { + display: block; + float: left; + padding: 5px 2px 8px 4px; + background: url(../images/gradients.png) repeat-x 0px -529px; + border-left: 1px solid #9FA2A6; + /*+border-radius:4px 0 0 4px;*/ + -moz-border-radius: 4px 0 0 4px; + -webkit-border-radius: 4px 0 0 4px; + -khtml-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; + margin-top: -5px; +} + +.detail-group .main-groups table td.value .view-all .end { + background: url(../images/sprites.png) no-repeat 100% -397px; + float: right; + width: 22px; + height: 25px; + padding: 0px; + margin: -6px 0px 0px; +} + +.detail-group .main-groups table td.value .view-all:hover { + background-position: 100% -431px; +} + +.detail-group .main-groups table td.value .view-all:hover span { + background-position: 0px -566px; +} + +.detail-group .main-groups table td.value .view-all:hover div.end { + background-position: -618px -430px; +} + +.detail-view .detail-group .button.add { + clear: both; + margin: 0px 21px 13px 0 !important; +} + +.detail-view .details.group-multiple { + float: left; + height: 600px; + width: 100%; + margin-bottom: 30px; +} + +.detail-view .details.group-multiple .main-groups { + overflow: visible; + width: 98%; + margin-bottom: 35px; +} + +/*List-view: subselect dropdown*/ +.list-view .subselect { + width: 116px; + display: block; + float: left; + background: url(../images/bg-gradients.png) 0px -42px; + padding: 0; + margin: 8px 0 1px 7px; + clear: both; + border: 1px solid #A8A7A7; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} + +.list-view .subselect span { + margin: 4px 0 0 12px; +} + +.list-view .subselect span.info { + font-size: 10px; + white-space: nowrap; +} + +.list-view .subselect select { + width: 85%; + margin: 5px 0 4px; + font-size: 10px; +} + +.detail-group .main-groups table td.value .view-all:hover { + background-position: 100% -431px; +} + +.panel.always-maximized .detail-group .main-groups table td.value span { + width: 565px; +} + +.detail-group.head table td.name { + padding: 20px 0px 17px; +} + +.detail-view .button.done, +.detail-view .button.cancel { + display: inline-block; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+text-shadow:0px -1px 2px #000000;*/ + -moz-text-shadow: 0px -1px 2px #000000; + -webkit-text-shadow: 0px -1px 2px #000000; + -o-text-shadow: 0px -1px 2px #000000; + text-shadow: 0px -1px 2px #000000; + /*+box-shadow:0px 1px 4px #ADADAD;*/ + -moz-box-shadow: 0px 1px 4px #ADADAD; + -webkit-box-shadow: 0px 1px 4px #ADADAD; + -o-box-shadow: 0px 1px 4px #ADADAD; + box-shadow: 0px 1px 4px #ADADAD; + cursor: pointer; + margin: 0 0 0 12px; + padding: 9px 20px; + background: url(../images/bg-gradients.png) 0px -221px; + /*+placement:shift -1px 550px;*/ + position: relative; + left: -1px; + top: 550px; + position: absolute; +} + +.detail-view .button.cancel { + background-position: 0px -795px; + left: 85px; + color: #808080; + /*+text-shadow:0px -1px 2px #000000;*/ + -moz-text-shadow: 0px -1px 2px #000000; + -webkit-text-shadow: 0px -1px 2px #000000; + -o-text-shadow: 0px -1px 2px #000000; + text-shadow: 0px -1px 2px #000000; + -moz-text-shadow: 0px -1px 2px #CCCCCC; + -webkit-text-shadow: 0px -1px 2px #CCCCCC; + -o-text-shadow: 0px -1px 2px #CCCCCC; + text-shadow: 0px -1px 2px #CCCCCC; +} + +.detail-view .button.done:hover { + background-position: 0px -950px; + /*+box-shadow:inset 0px 1px 3px #000000;*/ + -moz-box-shadow: inset 0px 1px 3px #000000; + -webkit-box-shadow: inset 0px 1px 3px #000000; + -o-box-shadow: inset 0px 1px 3px #000000; + box-shadow: inset 0px 1px 3px #000000; +} + +.detail-view .button.cancel:hover { + background-position: 0px -834px; +} + +div.group-multiple div.detail-group table { + margin-top: -1px; +} + +div.group-multiple div.detail-group table.header { + border: none; + margin-top: 11px; +} + +div.group-multiple div.detail-group table.header thead th { + background: transparent; + border: none; +} + +div.ui-tabs-panel table span.none { + color: #9D9D9D; +} + +div.detail-group td.view-all div.view-all { + width: auto; + float: right; +} + +div.detail-group td.view-all a { + font-size: 13px; + display: block; + text-decoration: none; + color: #0373B7; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 2px #FFFFFF; + -webkit-text-shadow: 0px 1px 2px #FFFFFF; + -o-text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0px 1px 2px #FFFFFF; + float: left; + font-weight: 100; +} + +div.detail-group td.view-all:hover a { + background-position: 0px -566px; +} + +div.detail-group td.view-all a span { + /*+placement:shift -4px -1px;*/ + position: relative; + left: -4px; + top: -1px; +} + +div.detail-group td.view-all:hover a span { + text-decoration: underline; + color: #000000; +} + +div.detail-group td.view-all div.view-all div.end { + display: none; + float: left; + width: 15px; + height: 25px; + background: url(../images/sprites.png) -617px -398px; +} + +div.detail-group td.view-all:hover div.view-all div.end { + background-position: -617px -431px; +} + +div.details div.detail-group td.value input, +div.details div.detail-group td.value select { + width: 282px; +} + +div.details div.detail-group td.value input, +div.details div.detail-group td.value input[type=checkbox] { + float: left; + width: 15px; + margin-left: 10px; +} + +div.details div.detail-group td.value input, +div.details div.detail-group td.value input[type=text] { + width: 93%; +} + +div.details .main-groups label.error { + position: absolute; + right: 10%; + top: 6px; +} + +.detail-view td.view-all.multiple { + max-width: 145px; + display: block; + float: left; + height: 28px; + margin-left: 0; + text-align: left; +} + +/*** Actions*/ +div.detail-group.actions { + padding: 0; + margin: 0; +} + +div.detail-group.actions table { + padding: 0; +} + +div.detail-group.actions tr { + margin: 0; +} + +div.detail-group.actions td { + height: 50px; + vertical-align: middle; +} + +.details.group-multiple div.detail-group.actions { + float: right; + max-width: 75%; + height: 23px; + position: relative; + margin: -15px 0 -5px; +} + +.details.group-multiple div.detail-group.actions table { + background: none; +} + +.details.group-multiple div.detail-group.actions td.detail-actions { + background: none; + display: block; + height: 35px; + float: right; + padding: 0; + min-width: 120px; +} + +.details.group-multiple div.detail-group.actions .detail-actions .action { + float: left; + width: 32px; + /*+placement:shift 11px 7px;*/ + position: relative; + left: 11px; + top: 7px; +} + +.details.group-multiple div.detail-group.actions .detail-actions .action a { + background: none; + width: 31px; +} + +.detail-group table td.detail-actions { + height: 26px; +} + +.detail-group table td.detail-actions.full-length { + display: block; + width: 99%; + float: left; +} + +.detail-group table td.detail-actions .action.text { + padding: 0px 6px 0px 0px; + cursor: pointer; + display: inline-block; + float: right; + margin-right: 8px; + border: 1px solid #C2C2C2; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + background: url(../images/bg-gradients.png) repeat-x 0px -83px; +} + +.detail-group table td.detail-actions .action.text .label { + font-size: 12px; + /*+placement:shift -1px 8px;*/ + position: relative; + left: -1px; + top: 8px; +} + +.detail-group table td.detail-actions .action.text:hover { + /*+box-shadow:inset 0px 1px 3px #171717;*/ + -moz-box-shadow: inset 0px 1px 3px #171717; + -webkit-box-shadow: inset 0px 1px 3px #171717; + -o-box-shadow: inset 0px 1px 3px #171717; + box-shadow: inset 0px 1px 3px #171717; +} + +.detail-group table td.detail-actions a { + display: block; + float: left; + text-indent: -9999px; + width: 30px; + height: 25px; + margin: 0; +} + +.detail-group table td.detail-actions a:hover { + background-position: -417px -43px; +} + +.detail-group table td.detail-actions div.action.first a { + background-position: -385px -11px; + width: 32px; +} + +.detail-group table td.detail-actions div.action.first a:hover { + background-position: -385px -43px; +} + +.detail-group table td.detail-actions div.action.last a { + background-position: -596px -11px; + width: 30px; +} + +.detail-group table td.detail-actions div.action.last a:hover { + background-position: -596px -43px; +} + +.detail-group table td.detail-actions div.action.single a { + width: 31px; + height: 26px; + background-position: -414px -625px; +} + +.detail-group table td.detail-actions div.action.text a { + background: none; +} + +.detail-group table td.detail-actions div.action.single a:hover { + background-position: -414px -587px; +} + +.detail-group table td.detail-actions a span.icon { + background-image: url(../images/sprites.png); + padding: 10px; + display: block; +} + +/*Header*/ +#header { + width: 100%; + height: 135px; + background: url(../images/overlay-pattern.png) repeat 0, #1B5070 url(../images/header-gradient.png) no-repeat center; + background-size: auto, cover; + position: relative; +} + +#header div.button { + font-size: 12px; + color: #FFFFFF; + cursor: pointer; +} + +#header.nologo div.logo { + width: 1224px; + height: 47px; + margin: auto; + background: url(../images/logo.png) no-repeat 0 center; + /*+placement:shift 0px 15px;*/ + position: relative; + left: 0px; + top: 15px; +} + +#header div.controls { + width: 1226px; + height: 48px; + position: relative; + margin: 27px auto 0; + padding-top: 13px; + /*+border-radius:4px 4px 0 0;*/ + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +#header div.controls.nologo { + background: #666666; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZDNkM2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, #666666 0%, #3d3d3d 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#3d3d3d)); + background: -webkit-linear-gradient(top, #666666 0%,#3d3d3d 100%); + background: -o-linear-gradient(top, #666666 0%,#3d3d3d 100%); + background: -ms-linear-gradient(top, #666666 0%,#3d3d3d 100%); + background: linear-gradient(to bottom, #666666 0%,#3d3d3d 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#3d3d3d',GradientType=0 ); + /*+box-shadow:0px -1px 6px #0E3955;*/ + -moz-box-shadow: 0px -1px 6px #0E3955; + -webkit-box-shadow: 0px -1px 6px #0E3955; + -o-box-shadow: 0px -1px 6px #0E3955; + box-shadow: 0px -1px 6px #0E3955; +} + +.button { + float: left; + background: url(../images/buttons.png) no-repeat; + cursor: pointer; +} + +#header div.notifications { + background: transparent; + float: right; + height: 18px; + padding: 1px 0 0; + /*+placement:shift -174px -57px;*/ + position: relative; + left: -239px; + top: -57px; +} + +#header div.notifications:after { + content: "|"; + /*+placement:shift 28px 7px;*/ + position: relative; + left: 28px; + top: 7px; +} + +#header div.notifications span { + position: relative; + top: 5px; + left: 7px; + /*+text-shadow:0px -1px 1px #464646;*/ + -moz-text-shadow: 0px -1px 1px #464646; + -webkit-text-shadow: 0px -1px 1px #464646; + -o-text-shadow: 0px -1px 1px #464646; + text-shadow: 0px -1px 1px #464646; +} + +#header div.notifications:hover { + color: #5FAAF7; +} + +#header div.notifications div.total { + width: 22px; + height: 19px; + float: left; + margin: 3px; + background: url(../images/sprites.png) no-repeat -593px -870px; + color: #FFFFFF; + font-size: 11px; + /*+text-shadow:0px -1px #6C7283;*/ + -moz-text-shadow: 0px -1px #6C7283; + -webkit-text-shadow: 0px -1px #6C7283; + -o-text-shadow: 0px -1px #6C7283; + text-shadow: 0px -1px #6C7283; + -moz-text-shadow: 0px -1px 0px #6C7283; + -webkit-text-shadow: 0px -1px 0px #6C7283; + -o-text-shadow: 0px -1px 0px #6C7283; +} + +#header div.notifications div.total.pending { + background-position: -593px -846px; + font-weight: bold; +} + +#header div.notifications div.total span { + /*+placement:shift 0px 3px;*/ + position: relative; + left: 0px; + top: 3px; + text-align: center; + display: block; + width: 21px; + font-size: 12px; +} + +#user { + height: 30px; + margin: 0; + position: absolute; + top: -47px; + left: 1025px; + cursor: default !important; + display: inline-block; + float: left; + background: transparent; +} + +#user div.name { + display: inline-block; + float: left; + padding: 9px 18px 7px 12px; + border-right: none; + /*[empty]border-top:;*/ + min-width: 110px; + max-width: 220px; + text-align: center; + height: 12px; + overflow: hidden; + /*+text-shadow:0px -1px 1px #464646;*/ + -moz-text-shadow: 0px -1px 1px #464646; + -webkit-text-shadow: 0px -1px 1px #464646; + -o-text-shadow: 0px -1px 1px #464646; + text-shadow: 0px -1px 1px #464646; + margin: 0; +} + +#user div.options { + float: left; + width: 31px; + height: 28px; + /*+placement:shift 0px 0px;*/ + position: relative; + left: 0px; + top: 0px; + background-position: 0px -867px; + cursor: pointer; +} + +#user div.options .arrow { + width: 11px; + height: 8px; + background: url(../images/buttons.png) -402px -23px; + /*+placement:shift 8px 11px;*/ + position: relative; + left: 8px; + top: 11px; +} + +/** Zone filter (mixed zone management)*/ +#header .zone-filter { + float: left; + width: 111px; + margin: 9px 20px 0 2px; +} + +#header .zone-filter label { + position: absolute; + top: -3px; + color: #FFFFFF; + font-size: 11px; +} + +#header .zone-filter select { + width: 100%; + font-size: 12px; + border: 1px solid #000000; + border-bottom: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + background: #ECECEC; + margin-top: 2px; +} + +/*Navigation*/ +#navigation { + width: 230px; + position: relative; + float: left; + /*+box-shadow:inset -1px 4px 7px #DDDDDD;*/ + -moz-box-shadow: inset -1px 4px 7px #DDDDDD; + -webkit-box-shadow: inset -1px 4px 7px #DDDDDD; + -o-box-shadow: inset -1px 4px 7px #DDDDDD; + box-shadow: inset -1px 4px 7px #DDDDDD; + background: #EDE8E8; + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYlIiBzdG9wLWNvbG9yPSIjZWRlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); + background: -moz-linear-gradient(top, #ffffff 0%, #ede8e8 6%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(6%,#ede8e8)); + background: -webkit-linear-gradient(top, #ffffff 0%,#ede8e8 6%); + background: -o-linear-gradient(top, #ffffff 0%,#ede8e8 6%); + background: -ms-linear-gradient(top, #ffffff 0%,#ede8e8 6%); + background: linear-gradient(to bottom, #ffffff 0%,#ede8e8 6%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ede8e8',GradientType=0 ); +} + +.project-view #navigation { + background: #6D747D; +} + +#navigation ul { + height: 700px; + padding-top: 29px; +} + +.project-view #navigation ul { + border-right: 1px solid #464C53; + background: #6D747D; +} + +#navigation ul li { + height: 42px; + cursor: pointer; + border-bottom: 1px solid #D2D2D2; +} + +.project-view #navigation ul li { + background-image: url(../images/bg-nav-item-project-view.png); + background-position: 0px 0px; + border: none; +} + +.project-view #navigation ul li span { + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +#navigation ul li:hover, +#navigation ul li.active { + width: 230px; + background: #2C5D7B; + /*+box-shadow:inset 0px 0px 7px #000000;*/ + -moz-box-shadow: inset 0px 0px 7px #000000; + -webkit-box-shadow: inset 0px 0px 7px #000000; + -o-box-shadow: inset 0px 0px 7px #000000; + box-shadow: inset 0px 0px 7px #000000; +} + +#navigation ul li.disabled { + /*+opacity:60%;*/ + filter: alpha(opacity=60); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); + -moz-opacity: 0.6; + opacity: 0.6; +} + +.project-view #navigation ul li:hover, +.project-view #navigation ul li.active { + background: url(../images/bg-nav-item-active-project-view.png); + background-position: 0px 0px; + width: 230px; +} + +.project-view #navigation ul li.disabled:hover { + background: #D5D5D5; + color: #596D7F; + cursor: default; +} + +#navigation ul li:hover span, +#navigation ul li.active span { + color: #FFFFFF; + /*+text-shadow:0px 1px #000000;*/ + -moz-text-shadow: 0px 1px #000000; + -webkit-text-shadow: 0px 1px #000000; + -o-text-shadow: 0px 1px #000000; + text-shadow: 0px 1px #000000; +} + +#navigation ul li.disabled:hover { + cursor: not-allowed !important; +} + +#navigation ul li.disabled:hover span { + color: #596D7F; + /*+text-shadow:0px 0px;*/ + -moz-text-shadow: 0px 0px; + -webkit-text-shadow: 0px 0px; + -o-text-shadow: 0px 0px; + text-shadow: 0px 0px; + -moz-text-shadow: 0px 0px none; + -webkit-text-shadow: 0px 0px none; + -o-text-shadow: 0px 0px none; + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; +} + +#navigation ul li.last { + background-repeat: repeat; + background-position: 0px 0px; + /*[empty]color:;*/ +} + +#navigation ul li span { + /*+placement:shift 14px 13px;*/ + position: relative; + left: 14px; + top: 13px; + font-size: 12px; + color: #515151; + padding-left: 19px; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; +} + +#navigation ul li span.icon { + background: url(../images/icons.png) no-repeat 0px 0px; + padding: 16px 16px 13px; + /*+placement:shift 17px 10px;*/ + position: relative; + left: 17px; + top: 10px; +} + +#navigation ul li.custom-icon span.icon { + display: block; + width: 50px; + height: 50px; + position: relative; + float: left; + margin-right: -47px; + background: none; +} + +#navigation ul li.custom-icon span.icon img { + width: 50px; + height: 50px; + float: left; + /*+placement:shift -6px -17px;*/ + position: relative; + left: -6px; + top: -17px; + position: absolute; + margin-right: -14px; +} + +/*Navigation icons*/ +#navigation ul li.dashboard span.icon, +#navigation ul li.dashboard-user span.icon { + background-position: -14px -18px; +} + +#navigation ul li.dashboard:hover span.icon, +#navigation ul li.dashboard-user:hover span.icon span.icon, +#navigation ul li.dashboard.active span.icon, +#navigation ul li.dashboard-user.active span.icon span.icon { + background-position: -23px -687px; +} + +#navigation ul li.instances span.icon { + background-position: -73px -18px; +} + +#navigation ul li.instances.active span.icon, +#navigation ul li.instances:hover span.icon { + background-position: -82px -686px; +} + +#navigation ul li.vmsnapshots span.icon { + background: url(../images/sprites.png) no-repeat -34px -666px; +} + +#navigation ul li.affinityGroups span.icon { + background-position: -73px -87px; +} + +#navigation ul li.affinityGroups.active span.icon, +#navigation ul li.affinityGroups:hover span.icon { + background-position: -82px -755px; +} + +#navigation ul li.storage span.icon { + background-position: -127px -19px; +} + +#navigation ul li.storage.active span.icon, +#navigation ul li.storage:hover span.icon { + background-position: -137px -687px; +} + +#navigation ul li.network span.icon { + background-position: -180px -20px; +} + +#navigation ul li.network.active span.icon, +#navigation ul li.network:hover span.icon { + background-position: -189px -690px; +} + +#navigation ul li.templates span.icon { + background-position: -233px -21px; +} + +#navigation ul li.templates.active span.icon, +#navigation ul li.templates:hover span.icon { + background-position: -242px -690px; +} + +#navigation ul li.projects span.icon { + background-position: -294px -21px; +} + +#navigation ul li.projects.active span.icon, +#navigation ul li.projects:hover span.icon { + background-position: -303px -690px; +} + +#navigation ul li.events span.icon { + background-position: -351px -23px; +} + +#navigation ul li.events.active span.icon, +#navigation ul li.events:hover span.icon { + background-position: -359px -692px; +} + +#navigation ul li.configuration span.icon { + background-position: -401px -21px; +} + +#navigation ul li.configuration.active span.icon, +#navigation ul li.configuration:hover span.icon { + background-position: -410px -690px; +} + +#navigation ul li.global-settings span.icon { + background-image: url(../images/sprites.png); + background-position: -143px -240px; +} + +#navigation ul li.global-settings.active span.icon, +#navigation ul li.global-settings:hover span.icon { + background-image: url(../images/sprites.png); + background-position: -366px -239px; +} + +#navigation ul li.roles span.icon { + background-position: -460px -80px; +} + +#navigation ul li.roles.active span.icon, +#navigation ul li.roles:hover span.icon { + background-position: -469px -750px; +} + +#navigation ul li.accounts span.icon { + background-position: -458px -19px; +} + +#navigation ul li.accounts.active span.icon, +#navigation ul li.accounts:hover span.icon { + background-position: -467px -688px; +} + +#navigation ul li.system span.icon { + background-position: -569px -24px; +} + +#navigation ul li.system.active span.icon, +#navigation ul li.system:hover span.icon { + background-position: -578px -692px; +} + +#navigation ul li.domains span.icon { + background-position: -520px -21px; +} + +#navigation ul li.domains.active span.icon, +#navigation ul li.domains:hover span.icon { + background-position: -529px -690px; +} + +#navigation ul li.plugins span.icon { + background: url(../images/sprites.png) no-repeat -140px -291px; +} + +#navigation ul li.regions span.icon { + background: url(../images/sprites.png) no-repeat -141px -379px; +} + +#navigation ul li.regions.active span.icon, +#navigation ul li.regions:hover span.icon { + background: url(../images/sprites.png) no-repeat -365px -377px; +} + +/*Browser*/ +#browser { + width: 994px; + height: 100%; + max-width: 994px; + position: relative; + float: left; + overflow: hidden; +} + +#browser.panel-highlight { + overflow: visible; +} + +#browser div.panel { + height: 100%; + border-right: 1px solid #A5A5A5; + overflow: visible; + background-color: #F7F7F7; +} + +#browser div.panel.panel-highlight-wrapper { + display: inline-block; + background: none; + /*+border-radius:9px;*/ + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; + border-radius: 9px; + margin-top: 7px; + /*+box-shadow:0px 0px 12px #000000;*/ + -moz-box-shadow: 0px 0px 12px #000000; + -webkit-box-shadow: 0px 0px 12px #000000; + -o-box-shadow: 0px 0px 12px #000000; + box-shadow: 0px 0px 12px #000000; + border: 3px solid #FFFFFF; + height: 542px; + overflow: hidden; + position: absolute; + z-index: 10000; + padding: 78px 0px 67px 51px; +} + +#browser div.panel.panel-highlight-wrapper .panel { + left: 20px !important; + height: 631px; + overflow: hidden; + top: 3px; +} + +.project-view #browser div.panel { + background: #6D747D; +} + +.ui-tabs div.ui-tabs-panel { + position: relative; +} + +.project-view .ui-tabs div.ui-tabs-panel { + background: #DBDDDF; +} + +#browser div.panel .shadow { + width: 10px; + height: 100%; + top: 0px; + left: -10px; + position: absolute; + background: url(../images/bg-panel-shadow.png) repeat-y 0px 0px; +} + +#browser.panel-highlight { + overflow: visible; +} + +#browser.panel-highlight .panel.highlighted { + /*+box-shadow:0px 10px 11px #5C5C5C;*/ + -moz-box-shadow: 0px 10px 11px #5C5C5C; + -webkit-box-shadow: 0px 10px 11px #5C5C5C; + -o-box-shadow: 0px 10px 11px #5C5C5C; + box-shadow: 0px 10px 11px #5C5C5C; + border: 5px solid #FFFFFF; + /*+border-radius:6px;*/ + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; + border-radius: 6px; + margin-top: 21px; +} + +#browser.panel-highlight .panel > .shadow { + display: none; +} + +#browser .highlight-arrow { + width: 24px; + height: 19px; + background: url(../images/sprites.png) -590px -1295px; + position: absolute; + top: -22px; + left: 80px; +} + +/*Toolbar*/ +/*[clearfix]*/div.toolbar { + width: 100%; + height: 32px; + /*+box-shadow:0px 1px 4px #CFCFCF;*/ + -moz-box-shadow: 0px 1px 4px #CFCFCF; + -webkit-box-shadow: 0px 1px 4px #CFCFCF; + -o-box-shadow: 0px 1px 4px #CFCFCF; + box-shadow: 0px 1px 4px #CFCFCF; + /*+placement:shift 0px -1px;*/ + position: relative; + left: 0px; + top: -1px; + z-index: 6; + position: absolute; + top: 0px; + background: #ECECEC 0px -6px; +} + +.detail-view .ui-tabs-panel div.toolbar { + width: 968px; + background: transparent; + border: none; + margin-top: 8px; +} + +.project-view div.toolbar { + background: #808080 url(../images/bg-nav-item-active-project-view.png) 0px -210px; +} + +div.toolbar div.filters { + margin: 5px 0px 0 12px; +} + +div.toolbar div.filters label { + color: #3F3B3B; + font-size: 12px; + font-weight: 100; + display: block; + float: left; + padding: 5px 11px 0 0; +} + +.project-view div.toolbar div.filters label { + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +div.toolbar div.filters select { + width: 142px; + border: 1px solid #808080; +} + +div.toolbar div.text-search { + float: right; + position: relative; +} + +div.toolbar div.text-search div.search-bar { + float: left; + width: 141px; + height: 20px; + margin: 5px 0 0 12px; + background: #FFFFFF; + border: 1px solid #8B7E7E; + z-index: 4; + position: relative; + border-right: 1px solid #8B8989; + /*+border-radius:4px 0 0 4px;*/ + -moz-border-radius: 4px 0 0 4px; + -webkit-border-radius: 4px 0 0 4px; + -khtml-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +div.toolbar div.text-search div.search-bar input { + float: left; + border: none; + margin: 1px 0 0; + width: 90%; + height: 68%; +} + +div.toolbar div.text-search div.search-bar div.filter { + background: #FFFFFF; + width: 74px; + height: 15px; + float: left; + font-size: 12px; + text-align: center; + border-left: 1px solid #6D6D6D; + margin: 2px 0 0px; + padding: 1px; +} + +div.toolbar div.button.search { + background: url(../images/sprites.png) no-repeat -592px -328px; + width: 33px; + height: 22px; + /*+placement:shift -10px 5px;*/ + position: relative; + left: -10px; + top: 5px; + z-index: 3; + cursor: pointer; +} + +div.toolbar div.button.search:hover { + background-position: -592px -359px; +} + +div.toolbar div.button.add, +div.toolbar div.button.refresh, +div.toolbar div.button.add, +div.toolbar div.button.main-action, +.toolbar div.button.header-action, +.detail-group .button.add { + /*+placement:shift 0px 5px;*/ + position: relative; + left: 0px; + top: 5px; + background: #EAEAEA; + font-size: 12px; + font-weight: 100; + color: #000000; + margin: 0 10px 0 0; + cursor: pointer; + /*+text-shadow:0px 1px 1px #DEE5EA;*/ + -moz-text-shadow: 0px 1px 1px #DEE5EA; + -webkit-text-shadow: 0px 1px 1px #DEE5EA; + -o-text-shadow: 0px 1px 1px #DEE5EA; + text-shadow: 0px 1px 1px #DEE5EA; + padding: 5px 5px 5px 5px; + background: #F7F7F7; + background: rgb(247, 247, 247); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, rgba(247,247,247,1) 1%, rgba(234,234,234,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(234,234,234,1))); + background: -webkit-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + background: -o-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + background: -ms-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + background: linear-gradient(to bottom, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); + border: 1px solid #B7B7B7; + float: right; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + height: 12px; +} + +div.toolbar div.button.export:hover, +div.toolbar div.button.add:hover, +div.toolbar div.button.refresh:hover, +div.toolbar div.button.main-action:hover, +.toolbar div.button.header-action:hover, +.detail-group .button.add:hover { + background: #E5E5E5; + /*+box-shadow:inset 0px 0px 5px #C3C3C3;*/ + -moz-box-shadow: inset 0px 0px 5px #C3C3C3; + -webkit-box-shadow: inset 0px 0px 5px #C3C3C3; + -o-box-shadow: inset 0px 0px 5px #C3C3C3; + box-shadow: inset 0px 0px 5px #C3C3C3; +} + +div.toolbar div.button.main-action span.icon { + background-image: url(../images/sprites.png); + display: block; + cursor: pointer; + width: 34px; + height: 20px; + float: left; + /*+placement:shift 0px -7px;*/ + position: relative; + left: 0px; + top: -7px; +} + +div.toolbar div.button.refresh { + float: right; + margin: 0 20px 0 0; +} + +div.toolbar div.button.refresh span { + background-image: url(../images/icons.png); + padding: 1px 1px 1px 16px; + background-position: -629px -232px; + background-repeat: no-repeat; +} + +div.toolbar div.button.add span, +.detail-group .button.add span.icon { + padding: 0px 0 3px 18px; + background: url(../images/icons.png) no-repeat -626px -209px; + /*+placement:shift 0px 0px;*/ + position: relative; + left: 0px; + top: 0px; +} + +#browser div.panel.selected div.toolbar { + border-right: 1px solid #43586B; +} + +/*** Advanced search*/ +#advanced_search { + width: 15px; + position: absolute; + left: 139px; + top: 4px; + z-index: 4; + background: none; +} + +#advanced_search .icon { + /*+opacity:56%;*/ + filter: alpha(opacity=56); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); + -moz-opacity: 0.56; + opacity: 0.56; + background: url(../images/sprites.png) no-repeat -62px -162px; + padding: 10px; + position: absolute; + top: 1px; + left: -1px; + z-index: 10; +} + +#advanced_search:hover .icon { + /*+opacity:100%;*/ + filter: alpha(opacity=100); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-opacity: 1; + opacity: 1; +} + +#advanced_search .form-container { + /*+opacity:91%;*/ + filter: alpha(opacity=91); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=91); + -moz-opacity: 0.91; + opacity: 0.91; + /*+box-shadow:0px 5px 9px #B6B0B0;*/ + -moz-box-shadow: 0px 5px 9px #B6B0B0; + -webkit-box-shadow: 0px 5px 9px #B6B0B0; + -o-box-shadow: 0px 5px 9px #B6B0B0; + box-shadow: 0px 5px 9px #B6B0B0; + border: 1px solid #808080; + /*+border-radius:0 0 4px 4px;*/ + -moz-border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; + -khtml-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + left: -290px; + top: 2px; + position: absolute; + display: inline-block; + background: #FFFFFF; + padding: 18px; + cursor: default; +} + +#advanced_search .form-container .name { + width: 66px; + float: left; +} + +#advanced_search .form-container .value { + width: 186px; + float: left; +} + +#advanced_search .form-container .form-item { + width: 268px; + height: 40px; + margin-bottom: 15px; +} + +#advanced_search .form-container .form-item input, +#advanced_search .form-container .form-item select { + width: 97%; + padding: 3px; +} + +#advanced_search input[type=submit] { + float: right; + background: url(../images/bg-gradients.png) 0px -220px; + /*+box-shadow:0px 2px 5px #858585;*/ + -moz-box-shadow: 0px 2px 5px #858585; + -webkit-box-shadow: 0px 2px 5px #858585; + -o-box-shadow: 0px 2px 5px #858585; + box-shadow: 0px 2px 5px #858585; + border: 1px solid #606060; + border-top: none; + color: #FFFFFF; + font-size: 12px; + font-weight: bold; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + cursor: pointer; + padding: 8px 20px; +} + +#advanced_search input[type=submit]:hover { + /*+box-shadow:inset 0px 2px 3px #000000;*/ + -moz-box-shadow: inset 0px 2px 3px #000000; + -webkit-box-shadow: inset 0px 2px 3px #000000; + -o-box-shadow: inset 0px 2px 3px #000000; + box-shadow: inset 0px 2px 3px #000000; +} + +#advanced_search .button.cancel { + background: url(noen); + color: #9A9A9A; + font-size: 12px; + float: right; + /*+placement:shift -32px 13px;*/ + position: relative; + left: -32px; + top: 13px; + font-weight: bold; +} + +#advanced_search .button.cancel:hover { + color: #494949; +} + +/*** Panel controls*/ +#browser div.panel div.toolbar div.panel-controls { + float: right; + width: 42px; + height: 23px; + display: none; +} + +#browser div.panel.reduced div.toolbar div.panel-controls { + display: block; + float: left; + width: 194px; +} + +#browser div.panel.maximized div.toolbar div.panel-controls { + display: block; +} + +#browser div.panel div.toolbar div.panel-controls div.control { + width: 25px; + height: 26px; + background: url(../images/buttons.png) no-repeat -599px -335px; + float: right; + cursor: pointer; + margin-right: 6px; +} + +#browser div.panel.maximized.single div.toolbar div.panel-controls div.control { + display: none; +} + +#browser div.panel div.toolbar div.panel-controls div.control:hover { + background-position: -593px -309px; +} + +#browser div.panel.maximized div.toolbar div.panel-controls div.control { + background-position: -621px -334px; +} + +#browser div.panel.maximized div.toolbar div.panel-controls div.control:hover { + background-position: -617px -308px; +} + +/*** Section switcher*/ +div.panel div.toolbar div.section-switcher { + margin-top: 6px; + margin-left: 10px; + float: left; +} + +#browser div.panel.maximize-if-selected.selected div.toolbar div.panel-controls div.control { + display: none; +} + +div.toolbar div.section-switcher div.section-select { + float: right; + font-size: 12px; + font-weight: 100; +} + +div.toolbar div.section-switcher div.section { + float: left; + font-size: 11px; + font-weight: bold; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + /*+text-shadow:0px 1px 1px #EDEDED;*/ + -moz-text-shadow: 0px 1px 1px #EDEDED; + -webkit-text-shadow: 0px 1px 1px #EDEDED; + -o-text-shadow: 0px 1px 1px #EDEDED; + text-shadow: 0px 1px 1px #EDEDED; +} + +div.toolbar div.section-switcher div.section a { + background: url(../images/bg-section-switcher.png) repeat-x 0px -22px; + text-decoration: none; + display: block; + color: #516374; + padding: 5px 10px 3px; + border: 1px solid #979FA4; +} + +div.toolbar div.section-switcher div.section a.active { + background: url(../images/bg-section-switcher.png) repeat-x 0px -21px; + background-position: 0px 0px; + border: none; + border-bottom: 1px solid #CCD1D4; + padding-bottom: 2px; + padding-top: 6px; + /*+box-shadow:inset 0px 1px 5px #546874;*/ + -moz-box-shadow: inset 0px 1px 5px #546874; + -webkit-box-shadow: inset 0px 1px 5px #546874; + -o-box-shadow: inset 0px 1px 5px #546874; + box-shadow: inset 0px 1px 5px #546874; +} + +div.toolbar div.section-switcher div.section.first a { + /*+border-radius:4px 0 0 5px;*/ + -moz-border-radius: 4px 0 0 5px; + -webkit-border-radius: 4px 0 0 5px; + -khtml-border-radius: 4px 0 0 5px; + border-radius: 4px 0 0 5px; +} + +div.toolbar div.section-switcher div.section.last a { + /*+border-radius:0 4px 4px 0px;*/ + -moz-border-radius: 0 4px 4px 0px; + -webkit-border-radius: 0 4px 4px 0px; + -khtml-border-radius: 0 4px 4px 0px; + border-radius: 0 4px 4px 0px; +} + +div.toolbar div.section-switcher div.section.first.last a { + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; +} + +div.toolbar div.section-switcher div.section-select { + float: left; + height: 26px; +} + +.project-view div.toolbar div.section-switcher div.section-select { + background: transparent; +} + +div.toolbar div.section-switcher div.section-select select { + height: 21px; + margin-right: 13px; + font-size: 12px; + border: 1px solid #808080; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +div.toolbar div.section-switcher div.section-select label { + margin: 0 9px 0 0; +} + +.project-view div.list-view div.toolbar div.section-switcher div.section-select label { + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +/*Breadcrumbs*/ +div.toolbar div.filters { + margin: 5px 0px 0 12px; + width: 200px; + float: left; +} + +div.toolbar div.filters select { + width: 104px; + height: 21px; + font-size: 12px; + border: 1px solid #808080; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + padding: 0px 0 0; + margin: 1px 0 0; +} + +#breadcrumbs { + height: 29px; + max-height: 29px; + background: #FFFFFF; + overflow: hidden; + width: 100%; +} + +.project-view #breadcrumbs { + background-image: url(../images/bg-breadcrumbs-project-view.png); + background-position: 0px 1px; + background-color: #828282; +} + +#breadcrumbs div.home { + width: auto; + height: 23px; + float: left; + /*+placement:shift -1px 0px;*/ + position: relative; + left: -1px; + top: 0px; + cursor: pointer; + z-index: 5; +} + +.project-view #breadcrumbs div.home { + background-position: -63px -98px; +} + +.project-view #breadcrumbs div.end { + background-position: -89px -98px; +} + +#breadcrumbs ul li, +#breadcrumbs div.active-project, +#breadcrumbs .home { + height: 21px; + float: left; + font-size: 13px; + color: #FFFFFF; + padding: 9px 5px 0px 0px; + cursor: pointer; + /*+placement:shift -13px 0px;*/ + position: relative; + left: -13px; + top: 0px; + position: relative; + margin: 0 0 0 2px; +} + +#breadcrumbs ul li:after, +#breadcrumbs .home:after { + content: ">"; + font-size: 11px; + /*+placement:shift 7px -1px;*/ + position: relative; + left: 7px; + top: -1px; + color: #C4C4C4; +} + +.project-view #breadcrumbs ul li { + color: #FFFFFF !important; +} + +#breadcrumbs ul li, +#breadcrumbs div.active-project, +#breadcrumbs .home { + /*+placement:shift 0px 0px;*/ + position: relative; + left: 0px; + top: 0px; + color: #63A9F1; + padding: 9px 5px 0px 8px; +} + +#breadcrumbs ul li:hover, +#breadcrumbs ul li.active, +#breadcrumbs ul li.maximized { + color: #000000; +} + +/*NOTE: End divs are not displayed per UI changes*/ +#breadcrumbs ul div.end { + /*+placement:shift -37px -1px;*/ + position: relative; + left: -37px; + top: -1px; + margin-right: 0px; + /*Disabled*/ + display: none; +} + +#breadcrumbs ul li { + position: relative; + /*+placement:shift -36px 0px;*/ + top: 0px; + font-size: 13px; +} + +#breadcrumbs div.active-project { + z-index: 2; + text-indent: 9px; + display: none; +} + +/*Group View*/ +div.panel div.view.group-thumbnail ul.groups li { + float: left; + width: 142px; + height: 80px; + background: url(../images/buttons.png) no-repeat -1px -399px; + margin: 16px -1px -5px 16px; + cursor: pointer; + position: relative; +} + +div.panel div.view.group-thumbnail ul.groups li.active { + background-position: -1px -489px; +} + +div.panel div.view.group-thumbnail ul.groups li.drop-hover { + background-position: -1px -310px !important; +} + +div.panel div.view.group-thumbnail ul.groups li.new { + background-position: -147px -401px; +} + +div.panel div.view.group-thumbnail ul.groups li.new.drop-hover { + background-position: -148px -312px !important; +} + +div.panel div.view.group-thumbnail ul.groups li span.name { + font-size: 12px; + color: #49596B; + /*+placement:shift 9px 7px;*/ + position: relative; + left: 9px; + top: 7px; + font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + position: absolute; +} + +div.panel div.view.group-thumbnail ul.groups li span.vm-count { + font-size: 21px; + /*+placement:displace 54px 27px;*/ + position: absolute; + margin-left: 54px; + margin-top: 27px; + position: absolute; + color: #3A4857; +} + +/*Reduced view*/ +#browser div.panel.reduced .reduced-hide { + color: #BBB8B8; +} + +#browser div.panel.reduced div.toolbar .reduced-hide { + display: none; +} + +/*List view -- edit field*/ +div.view table td.editable div.edit { + width: 106%; + height: 20px; + /*+placement:shift 6px 0px;*/ + position: relative; + left: 6px; + top: 0px; +} + +div.view table td.truncated.editable div.edit { + top: 1px; + width: 285px; + left: 1px; +} + +div.view table td.editable div.edit input { + float: left; + width: 66%; + height: 17px; + border: none; + position: relative; + z-index: 1; +} + +.detail-view div.view table td.editable div.edit { + width: 116px; +} + +div.view table td.editable div.action { + float: left; + width: 16px; + height: 19px; + background: #FFFFFF url(../images/buttons.png) -614px -684px; + padding-left: 2px; + /*+placement:shift -2px 0px;*/ + position: relative; + left: -2px; + top: 0px; + cursor: pointer; +} + +div.view table td.editable div.action.save { + margin-left: 2px; +} + +div.view table td.editable div.action.cancel { + background-position: -628px -684px; +} + +/*** Actions*/ +table td.actions { + cursor: default; + /*Make fixed*/ + width: 200px; + min-width: 200px; + max-width: 200px; +} + +table td.actions span { + margin: 0 0 0 2px !important; +} + +table td.actions .action span.icon { + background-image: url(../images/sprites.png); + cursor: pointer; + width: 23px; + height: 21px; + float: left; +} + +table td.actions .action.disabled .icon { + cursor: not-allowed; + /*+opacity:20%;*/ + filter: alpha(opacity=20); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); + -moz-opacity: 0.2; + opacity: 0.2; +} + +table tr.odd td.actions .action.disabled .icon { + background-color: #F2F0F0; +} + +table tr.even td.actions .action.disabled .icon { + background-color: #DFE1E3; +} + +table tr td.actions .action.text { + cursor: pointer; + display: inline-block; + border: 1px solid #C2C2C2; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + background: url(../images/bg-gradients.png) repeat-x 0px -83px; +} + +table tr td.actions .action.text:hover { + /*+box-shadow:inset 0px 1px 3px #171717;*/ + -moz-box-shadow: inset 0px 1px 3px #171717; + -webkit-box-shadow: inset 0px 1px 3px #171717; + -o-box-shadow: inset 0px 1px 3px #171717; + box-shadow: inset 0px 1px 3px #171717; +} + +table tr td.actions .action.text .label { + padding: 4px 0 0 4px; +} + +table tr td.actions .action.text .icon { + padding-bottom: 4px; +} + +table tr.selected td.actions .action.disabled .icon { + background-color: #CBDDF3; +} + +/*** Action icons +Dialogs*/ +.ui-dialog { + background: #FFFFFF; + text-align: left; + /*+box-shadow:0px -4px 15px #4C4A4A;*/ + -moz-box-shadow: 0px -4px 15px #4C4A4A; + -webkit-box-shadow: 0px -4px 15px #4C4A4A; + -o-box-shadow: 0px -4px 15px #4C4A4A; + box-shadow: 0px -4px 15px #4C4A4A; + position: absolute; + padding: 15px; +} + +.ui-dialog.ui-corner-all { + border-radius: 0; +} + +.ui-dialog .ui-widget-content { + padding: 8px 0 8px 8px; + text-align: center; + display: inline-block; +} + +.ui-dialog .ui-widget-content .nothing-to-select { + width: 386px; + line-height: 21px; + text-align: left; + font-size: 16px; + color: #3D3D3D; + padding: 4px 25px 180px 28px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + background: #FFFFFF; + margin: 57px 0 0; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; +} + +.ui-dialog .ui-widget-content .nothing-to-select p { + margin: 18px 0 0; +} + +.ui-dialog .ui-widget-content .nothing-to-select .specify-ip { + margin-top: 28px; + padding-top: 21px; + font-size: 12px; + border-top: 1px solid #DFDFDF; +} + +.ui-dialog-buttonset { + width: 285px; + margin: 0; +} + +.ui-dialog .ui-button { + display: block; + cursor: pointer; + float: left; + width: 110px; + height: 31px; + border: none; + background: url(../images/gradients.png) -2px -481px; + border: 1px solid #BFBCBC; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.ui-dialog .ui-button:hover { + background-position: -4px -426px; +} + +.ui-dialog.notice .close.ui-button { + background: transparent; + display: inline; + padding: 0; + float: right; + color: #516374; + /*+text-shadow:0px -1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px -1px 1px #FFFFFF; + -webkit-text-shadow: 0px -1px 1px #FFFFFF; + -o-text-shadow: 0px -1px 1px #FFFFFF; + text-shadow: 0px -1px 1px #FFFFFF; +} + +.ui-dialog .ui-button.ok { + background-position: 0px -317px; + border: 1px solid #0065C5; + color: #FFFFFF; + /*+text-shadow:0px -1px 1px #011238;*/ + -moz-text-shadow: 0px -1px 1px #011238; + -webkit-text-shadow: 0px -1px 1px #011238; + -o-text-shadow: 0px -1px 1px #011238; + text-shadow: 0px -1px 1px #011238; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.ui-dialog .ui-button.ok:hover { + background-position: -3px -368px; + border: 1px solid #004FF7; +} + +.ui-dialog.confirm .ui-button { + margin-top: 0px; + margin-left: 11px; +} + +.ui-dialog.confirm .ui-button.cancel { + margin-left: 50px; +} + +.ui-dialog span.message { + display: block; + text-align: center; + color: #445361; + font-size: 14px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + padding-bottom: 40px; +} + +.ui-dialog span.message ul { + margin-left: 30px; + margin-top: 14px; + text-align: left; + list-style: disc; +} + +.ui-dialog span.message ul li { + margin-top: 3px; +} + +.ui-dialog span.message p { + text-align: left; + margin-top: 20px; +} + +.ui-dialog-titlebar { + background: #FFFFFF; + color: #000000; + height: 33px; + /*+border-radius:7px 7px 0 0;*/ + -moz-border-radius: 7px 7px 0 0; + -webkit-border-radius: 7px 7px 0 0; + -khtml-border-radius: 7px 7px 0 0; + border-radius: 7px 7px 0 0; + margin: auto; +} + +.ui-dialog-titlebar.ui-widget-header { + border: none; + font-weight: inherit; +} + +.ui-dialog-titlebar .ui-icon-closethick { + display: none; +} + +.ui-dialog-title { + /*+placement:shift 8px 9px;*/ + position: relative; + left: 8px; + top: 9px; + font-size: 14px; + padding: 2px 0 5px 30px; + background: url(../images/icons.png) no-repeat 0px -255px; +} + +.notice .ui-dialog-title { + background-position: 0px -288px; +} + +.ui-dialog.confirm .ui-dialog-title { + background: url(../images/icons.png) no-repeat 0px -224px; +} + +.ui-dialog.create-form .ui-dialog-title { + background: url(../images/icons.png) no-repeat 0px -255px; +} + +.ui-dialog.warning .ui-dialog-title { + background: url(../images/icons.png) no-repeat 0px -286px; +} + +.ui-dialog.confirm .ui-button { + /*+placement:shift 0px -8px;*/ + position: relative; + left: 0px; + top: -8px; +} + +/*** Create form*/ +.ui-dialog div.form-container { + width: 94% !important; + height: 106px; + text-align: left; + display: inline-block; +} + +.ui-dialog div.form-container span.message { + text-align: left; + padding: 0 0 23px 5px; + font-size: 15px; +} + +.ui-dialog div.form-container span.message br { + margin-bottom: 13px; +} + +.ui-dialog div.form-container div.form-item { + width: 100%; + display: inline-block; + margin: 0 0 12px; +} + +.ui-dialog div.form-container div.name { + float: left; + clear: both; + width: 115px; + font-size: 15px; + color: #485867; + /*+text-shadow:0px 2px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 2px 1px #FFFFFF; + -webkit-text-shadow: 0px 2px 1px #FFFFFF; + -o-text-shadow: 0px 2px 1px #FFFFFF; + text-shadow: 0px 2px 1px #FFFFFF; + margin: 3px 0 0; +} + +.ui-dialog div.form-container div.name label { + display: block; + width: 119px; + text-align: right; + font-size: 13px; + margin-top: 2px; +} + +.field-required { + color: #EE7B7B; + font-size: 14px; + padding: 0 3px 0 0; + font-weight: bold; +} + +.ui-dialog div.form-container div.value { + width: 61%; + float: left; + margin: 0 0 0 15px; + display: inline-block; +} + +.ui-dialog div.form-container div.value input, +textarea { + width: 98%; + font-size: 14px; + padding: 4px; + background: #F6F6F6; + border: 1px solid #AFAFAF; + float: left; +} + +.ui-dialog div.form-container div.value label { + display: block; + width: 119px; + text-align: left; + font-size: 13px; + margin-top: 2px; + margin-left: -10px; +} + +.ui-dialog div.form-container div.value input.hasDatepicker { + color: #2F5D86; + cursor: pointer; + font-size: 13px; + text-indent: 3px; +} + +.ui-dialog div.form-container div.value input.hasDatepicker:hover { + /*+box-shadow:inset 0px 0px 3px;*/ + -moz-box-shadow: inset 0px 0px 3px; + -webkit-box-shadow: inset 0px 0px 3px; + -o-box-shadow: inset 0px 0px 3px; + box-shadow: inset 0px 0px 3px; +} + +.ui-dialog div.form-container div.value .range-edit { + width: 249px; + height: 33px; + margin: 2px 0 0; +} + +.ui-dialog div.form-container div.value .range-edit .range-item { + width: 124px; + height: 32px; + position: relative; + float: left; +} + +.ui-dialog div.form-container div.value .range-edit input { + width: 105px; + margin: 0 9px 0 0; +} + +.ui-dialog div.form-container div.value .range-edit label.error { + position: absolute; + left: 3px; + top: 25px; +} + +.ui-dialog div.form-container div.value select { + width: 100%; + float: right; +} + +.ui-dialog div.form-container div.value input[type=checkbox] { + width: 14px; +} + +.ui-dialog div.form-container div.value label.error { + display: block; + clear: both; + font-size: 10px; + color: #FA0000; + display: none; +} + +.ui-dialog div.form-container div.multi-array { + display: inline-block; + background: #FFFFFF; + padding: 4px; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + border: 1px solid #808080; + /*+box-shadow:inset 0px 1px 1px #929292;*/ + -moz-box-shadow: inset 0px 1px 1px #929292; + -webkit-box-shadow: inset 0px 1px 1px #929292; + -o-box-shadow: inset 0px 1px 1px #929292; + box-shadow: inset 0px 1px 1px #929292; +} + +.ui-dialog div.form-container div.multi-array .item { + width: 111px; + float: left; + margin: 0 0 13px; +} + +.ui-dialog div.form-container div.multi-array .item .name { + font-size: 11px; + width: 61px; + float: left; +} + +.ui-dialog div.form-container div.multi-array .item .value { + width: 13px; + float: left; +} + +.ui-dialog div.form-container div.multi-array .item .value input { + float: left; + margin: 0; + padding: 0; +} + +.ui-dialog.create-form .ui-dialog-buttonpane { + margin-left: 25px; +} + +.ui-dialog.create-form .ui-button.ok { + margin-left: 0; + float: right; +} + +.ui-dialog.create-form .ui-button.cancel { + background: #B6B6B6 url(../images/gradients.png) 0px -480px; + float: right; + margin-right: 13px; + border: 1px solid #AAAAAA; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.ui-dialog.create-form .ui-button.cancel:hover { + background-position: -4px -426px; + border-color: #878787; +} + +/**** Dynamic input*/ +.ui-dialog div.form-container div.value .dynamic-input { + background: #FFFFFF; + width: calc(100% + 4px); + min-height: 50px; + clear: both; + max-height: 211px; + overflow: auto; + overflow-x: hidden; + border: 1px solid #CDCDCD; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.ui-dialog div.form-container div.value .dynamic-input .form-item { + width: 97%; + margin: 4px 0 0 5px; +} + +.ui-dialog div.form-container div.value .dynamic-input .name { + width: 99px; +} + +.ui-dialog div.form-container div.value .dynamic-input .name label { + width: inherit; + font-size: 12px; + margin-left: 0; +} + +.ui-dialog div.form-container div.value .dynamic-input .value { + width: 40%; +} + +/*User options*/ +#user-options { + background: #FFFFFF; + z-index: 10000; + width: 150px; + position: absolute; + padding: 15px; + top: 30px; + /*+border-radius:0 0 3px 3px;*/ + -moz-border-radius: 0 0 3px 3px; + -webkit-border-radius: 0 0 3px 3px; + -khtml-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; + /*+box-shadow:0px 1px 7px #000000;*/ + -moz-box-shadow: 0px 1px 7px #000000; + -webkit-box-shadow: 0px 1px 7px #000000; + -o-box-shadow: 0px 1px 7px #000000; + box-shadow: 0px 1px 7px #000000; +} + +#user-options a { + float: left; + width: 100%; + padding: 10px 0; +} + +/*Dashboard +** Admin*/ +.dashboard.admin { + background: #F2F0F0; + height: 100%; + padding: 10px; + font-size: 13px; + color: #3D5873; +} + +.dashboard.admin .dashboard-container { + background: #FFFFFF; + border: 1px solid #C8C2C2; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + padding: 0px 8px 18px 0px; + margin: 0 0 11px; +} + +.dashboard.admin .dashboard-container.sub { + width: 468px; +} + +.dashboard.admin .dashboard-container.sub .button.view-all, +.dashboard.admin .dashboard-container .button.fetch-latest { + font-size: 13px; + float: right; + clear: none; + /*+text-shadow:none;*/ + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; + -moz-text-shadow: 0px 1px 0px #333E49; + -webkit-text-shadow: 0px 1px 0px #333E49; + -o-text-shadow: 0px 1px 0px #333E49; + padding: 3px 8px 3px 10px; + background: rgb(234, 234, 234); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(214,214,214,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(214,214,214,1))); + background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + background: -o-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + background: -ms-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); + border: 1px solid #9D9D9D; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + /*+box-shadow:0px 1px #CACACA;*/ + -moz-box-shadow: 0px 1px #CACACA; + -webkit-box-shadow: 0px 1px #CACACA; + -o-box-shadow: 0px 1px #CACACA; + box-shadow: 0px 1px #CACACA; + cursor: pointer; + font-weight: 100; + color: #000000; +} + +.dashboard.admin .dashboard-container.sub .button.view-all:hover, +.dashboard.admin .dashboard-container .button.fetch-latest:hover { + background: #E8E8E8; + /*+box-shadow:inset 0px 0px 6px #636363;*/ + -moz-box-shadow: inset 0px 0px 6px #636363; + -webkit-box-shadow: inset 0px 0px 6px #636363; + -o-box-shadow: inset 0px 0px 6px #636363; + box-shadow: inset 0px 0px 6px #636363; +} + +.dashboard.admin .dashboard-container.sub .title { + float: left; +} + +/**** Head*/ +.dashboard.admin .dashboard-container.head { + width: 966px; + height: 431px; + margin: 9px 0 0; + float: left; +} + +.dashboard.admin .dashboard-container .top { + background: #EFEFEF 0px -4px; + padding: 4px 4px 8px; + width: 100%; + float: left; + margin: 0; + color: #FFFFFF; +} + +.dashboard.admin .dashboard-container .title { + float: left; + font-size: 13px; + font-weight: 100; + /*+text-shadow:0px 1px 1px #9A9A9A;*/ + -moz-text-shadow: 0px 1px 1px #9A9A9A; + -webkit-text-shadow: 0px 1px 1px #9A9A9A; + -o-text-shadow: 0px 1px 1px #9A9A9A; + text-shadow: 0px 1px 1px #9A9A9A; + padding: 5px 0 0 4px; +} + +.dashboard.admin .dashboard-container .title span { + color: #000000; + /*+text-shadow:none;*/ + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; +} + +.dashboard.admin .dashboard-container.head .selects { + float: right; +} + +.dashboard.admin .dashboard-container.head .selects .select { + float: left; + padding: 0; + margin: 0 0 0 21px; +} + +.dashboard.admin .dashboard-container.head .selects .select label { + display: block; + float: left; + padding: 5px 0px 0px; +} + +.dashboard.admin .dashboard-container.head .selects .select select { + width: 124px; + margin: 3px 0 0 10px; + padding: 0px; +} + +/**** Charts / stats*/ +.dashboard.admin .zone-stats { + width: 974px; + height: 416px; + overflow: auto; + overflow-x: hidden; + /*+placement:shift 0px 0px;*/ + position: relative; + left: 0px; + top: 0px; +} + +.dashboard.admin .zone-stats ul { + width: 996px; + /*+placement:shift -2px 11px;*/ + position: relative; + left: -2px; + top: 11px; +} + +.dashboard.admin .zone-stats ul li { + width: 488px; + font-size: 14px; + height: 79px; + float: left; + position: absolute; + position: relative; + cursor: pointer; + z-index: 1; +} + +.dashboard.admin .zone-stats ul li canvas { + position: relative; + z-index: -1; +} + +.dashboard.admin .zone-stats ul li:hover { + background: #FFF2DA; +} + +.dashboard.admin .zone-stats ul li .label { + width: 161px; + float: left; + font-weight: 100; + border-bottom: 1px solid #E2E2E2; + margin: 5px 0 0 22px; + padding: 22px 0 7px; +} + +.dashboard.admin .zone-stats ul li .info { + float: left; + width: 151px; + white-space: nowrap; + margin: 12px 0 0; + color: #636363; +} + +.dashboard.admin .zone-stats ul li .info .name { + font-weight: bold; + margin-top: 8px; + margin-bottom: 9px; + font-size: 12px; + font-weight: 100; + /*[empty]color:;*/ +} + +.dashboard.admin .zone-stats ul li .pie-chart-container { + width: 91px; + height: 69px; + overflow: hidden; + float: left; + position: relative; + /*+placement:shift -8px 7px;*/ + position: relative; + left: -8px; + top: 7px; +} + +.dashboard.admin .zone-stats ul li .pie-chart-container .percent-label { + width: 52px; + color: #C98200; + /*+placement:shift 28px 31px;*/ + position: relative; + left: 28px; + top: 31px; + position: absolute; + font-weight: bold; + text-align: center; +} + +.dashboard.admin .zone-stats ul li .pie-chart { + width: 70px; + height: 66px; + float: left; + margin: 3px 27px 0 16px; + position: relative; + z-index: -1; +} + +.dashboard.admin .dashboard-container .stats ul li { + display: block; + width: 97%; + height: 40px; + background: url(../images/bg-gradients.png) 0px -29px; + clear: both; + border: 1px solid #C8C2C2; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + padding: 0 12px 0px; + margin: 0 0 10px; +} + +.dashboard.admin .dashboard-container .stats ul li .name { + width: 178px; + float: left; + font-size: 11px; + font-weight: bold; + margin: 15px 15px 0 0; +} + +.dashboard.admin .dashboard-container .stats ul li div.value { + float: left; + background: url(../images/bg-gradients.png) 0px -51px; + width: 295px; + height: 100%; + border-left: 1px solid #C8C2C2; + border-right: 1px solid #C8C2C2; + margin: 0 9px 0 0; +} + +.dashboard.admin .dashboard-container .stats ul li .value .content { + background: url(../images/bg-gradients.png) repeat-x 0px 0px; + margin: 6px 9px 9px; + padding: 9px; + color: #FFFFFF; + /*Adjusting the font size for proper display*/ + font-size: 10px; + border-left: 1px solid #6A6A6A; + border-right: 1px solid #6A6A6A; + border-bottom: 1px solid #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+text-shadow:0px -1px 1px #6F6F6F;*/ + -moz-text-shadow: 0px -1px 1px #6F6F6F; + -webkit-text-shadow: 0px -1px 1px #6F6F6F; + -o-text-shadow: 0px -1px 1px #6F6F6F; + text-shadow: 0px -1px 1px #6F6F6F; +} + +.dashboard.admin .dashboard-container .stats ul li .chart { + float: left; + width: 290px; + height: 17px; + padding: 0px 1px; + background: url(../images/bg-gradients.png) 0px -130px; + margin: 12px 23px 0 0; + /*+border-radius:7px;*/ + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + -khtml-border-radius: 7px; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; + border-bottom: 1px solid #FFFFFF; + border-top: 1px solid #727272; +} + +.dashboard.admin .dashboard-container .stats ul li .chart .chart-line { + height: 15px; + background: url(../images/bg-gradients.png) 0px -149px; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + margin: 1px 0px 0; +} + +.dashboard.admin .dashboard-container .stats ul li .percentage { + float: left; + font-size: 20px; + font-weight: bold; + margin: 13px 0 0; + /*+text-shadow:0px -2px 1px #FFFFFF;*/ + -moz-text-shadow: 0px -2px 1px #FFFFFF; + -webkit-text-shadow: 0px -2px 1px #FFFFFF; + -o-text-shadow: 0px -2px 1px #FFFFFF; + text-shadow: 0px -2px 1px #FFFFFF; +} + +/**** Alerts*/ +.dashboard.admin .dashboard-container.sub.alerts { + float: left; + margin: 0 12px 0 0; + height: 170px; + overflow: hidden; + position: relative; +} + +.dashboard.admin .dashboard-container.sub.alerts.last { + margin-right: 0; +} + +.dashboard.admin .dashboard-container.sub.alerts ul { + width: 468px; + height: 100%; + overflow-y: scroll; + position: relative; + margin: 0px 0 0 8px; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li { + background: #F0F0F0; + float: left; + border: 1px solid #D4D0D0; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + margin: 9px; + padding: 8px; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li { + border: 1px solid #FF7070; + background: #FFEFEF; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li span.title { + width: 100%; + font-weight: bold; + font-size: 14px; + font-weight: 100; + color: #266E9A; + margin: 3px 0 5px; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; + padding: 0; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li p { + float: left; + margin: 4px 0px 0px; + color: #252525; +} + +.dashboard.admin .dashboard-container.sub.alerts ul li p br { + display: none; +} + +/*** User*/ +#browser div.panel .dashboard.user .toolbar { + height: 60px; + position: relative; +} + +.dashboard.user .button.view-all { + float: right; + border: 1px solid #4B5B6B; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + color: #FFFFFF; + /*+text-shadow:0px -1px 2px #13293E;*/ + -moz-text-shadow: 0px -1px 2px #13293E; + -webkit-text-shadow: 0px -1px 2px #13293E; + -o-text-shadow: 0px -1px 2px #13293E; + text-shadow: 0px -1px 2px #13293E; + padding: 2px 3px 3px; + margin: -4px 4px -4px 0; + text-indent: 0; + background: url(../images/bg-gradients.png) 0px -147px; +} + +.dashboard.user .button.view-all:hover { + background-position: 0px 0px; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +/**** Actions*/ +.dashboard.user .dashboard-actions ul { + padding: 11px; +} + +.dashboard.user .dashboard-actions ul li { + float: left; + width: 123px; + cursor: pointer; + height: 40px; + margin: 0 9px 0 0; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+box-shadow:inset 0px 0px 1px #DDE3EC;*/ + -moz-box-shadow: inset 0px 0px 1px #DDE3EC; + -webkit-box-shadow: inset 0px 0px 1px #DDE3EC; + -o-box-shadow: inset 0px 0px 1px #DDE3EC; + box-shadow: inset 0px 0px 1px #DDE3EC; + border: 1px solid #395268; + border-right: 1px solid #556778; + background: url(../images/bg-gradients.png) repeat-x 0px -181px; +} + +.dashboard.user .dashboard-actions ul li span { + color: #FFFFFF; + font-size: 11px; + /*+text-shadow:0px 1px 2px #444444;*/ + -moz-text-shadow: 0px 1px 2px #444444; + -webkit-text-shadow: 0px 1px 2px #444444; + -o-text-shadow: 0px 1px 2px #444444; + text-shadow: 0px 1px 2px #444444; + background: url(../images/icons.png) no-repeat -613px -309px; + padding: 8px 12px 11px 34px; + /*+placement:shift 4px 10px;*/ + position: relative; + left: 4px; + top: 10px; +} + +.dashboard.user .dashboard-actions ul li.add-iso span { + background-position: -613px -352px; +} + +.dashboard.user .dashboard-actions ul li.add-volume span { + background-position: -613px -264px; +} + +.dashboard.user .dashboard-actions ul li.acquire-ip span { + background-position: -613px -389px; +} + +/**** VM Status*/ +.dashboard.user .vm-status { + width: 98%; + margin: 19px auto auto; + border: 1px solid #D2CDCD; + /*+border-radius:9px;*/ + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; +} + +.dashboard.user .vm-status .title { + width: 100%; + background: url(../images/bg-gradients.png) 0px -53px; + /*+border-radius:10px 10px 0 0;*/ + -moz-border-radius: 10px 10px 0 0; + -webkit-border-radius: 10px 10px 0 0; + -khtml-border-radius: 10px 10px 0 0; + border-radius: 10px 10px 0 0; + font-size: 13px; + color: #4A5967; + padding: 13px 0 12px; + border-bottom: 1px solid #C8C2C2; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; +} + +.dashboard.user .vm-status .title span { + padding: 0 0 0 8px; +} + +.dashboard.user .vm-status .content { + padding: 9px 0px; +} + +.dashboard.user .vm-status .content ul { + display: inline-block; + margin: auto; +} + +.dashboard.user .vm-status .content ul li { + float: left; + width: 243px; + height: 237px; + border: 1px solid #E6EBEE; + border-top: 2px solid #D3D9DE; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + margin: 0 0 0 11px; + background: #EBEDF1; +} + +.dashboard.user .vm-status .content ul li .name { + font-size: 28px; + color: #5C7082; + padding: 0 0 0 35px; + margin: 14px 0 0; + /*+text-shadow:0px 2px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 2px 2px #FFFFFF; + -webkit-text-shadow: 0px 2px 2px #FFFFFF; + -o-text-shadow: 0px 2px 2px #FFFFFF; + text-shadow: 0px 2px 2px #FFFFFF; + background: url(../images/icons.png) -617px -488px; +} + +.dashboard.user .vm-status .content ul li .value { + background: #DFE9CC; + width: 229px; + color: #5D7C98; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 2px #FFFFFF; + -webkit-text-shadow: 0px 1px 2px #FFFFFF; + -o-text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0px 1px 2px #FFFFFF; + font-size: 58px; + margin: 12px auto auto; + text-align: center; + padding: 59px 0px; +} + +.dashboard.user .vm-status .content ul li.stopped .name { + background-position: -617px -524px; +} + +.dashboard.user .vm-status .content ul li.stopped .value { + background: #EDCBCE; +} + +.dashboard.user .vm-status .content ul li.total .name { + background-position: -617px -559px; +} + +.dashboard.user .vm-status .content ul li.total .value { + background: #DFE4E9; +} + +/***** Tables / status list*/ +.dashboard.user .status-lists { + margin: 15px 0 0 8px; +} + +.dashboard.user .status-lists ul li.events { + width: 512px; +} + +.dashboard.user .status-lists ul li.events .content li { + width: 97%; + cursor: default; + margin: 6px 11px 0 0; + font-size: 11px; + padding: 13px 0 12px 16px; + color: #495A76; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; + border: 1px solid #DBDBDB; + /*+box-shadow:0px 2px 4px #C0C0C0;*/ + -moz-box-shadow: 0px 2px 4px #C0C0C0; + -webkit-box-shadow: 0px 2px 4px #C0C0C0; + -o-box-shadow: 0px 2px 4px #C0C0C0; + box-shadow: 0px 2px 4px #C0C0C0; + background: #EFEFEF url(../images/bg-gradients.png) repeat-x 0px -29px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.dashboard.user .status-lists ul li.events .content li .title { + font-weight: bold; + color: #4A5A6A; + margin-bottom: 9px; +} + +.dashboard.user .status-lists ul li { + float: left; + margin: 0 10px 0 0; +} + +.dashboard.user .status-lists table { + width: 252px; + margin: 0; + cursor: default; +} + +.dashboard.user .status-lists table th { + padding: 8px 0px 6px; +} + +.dashboard.user .status-lists .events table { + width: 515px; +} + +.dashboard.user .status-lists table tbody { + height: 256px; + display: block; + overflow: auto; + overflow-x: hidden; + padding: 0 0px; +} + +.dashboard.user .status-lists table td.value { + cursor: default; +} + +.dashboard.user .status-lists table td.desc { + width: 151px; + overflow: hidden; + cursor: default; +} + +.dashboard.user .status-lists .my-account table tbody tr td { + padding-top: 19px; + padding-bottom: 19px; +} + +.dashboard.user .status-lists table thead { + background: url(../images/bg-gradients.png) 0px -351px; + border-top: 1px solid #C4C5C5; +} + +.dashboard.user .status-lists table tr.odd { + background: #DFE1E3; +} + +.dashboard.user .status-lists table td { + vertical-align: middle; +} + +/****** IP addresses*/ +.dashboard.user .status-lists li.ip-addresses td { + width: 250px; + padding: 28px 0 51px; +} + +.dashboard.user .status-lists li.ip-addresses .desc { + color: #3F5468; +} + +.dashboard.user .status-lists li.ip-addresses .value { + font-size: 29px; + margin: 7px 0 0; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 2px #FFFFFF; + -webkit-text-shadow: 0px 1px 2px #FFFFFF; + -o-text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0px 1px 2px #FFFFFF; +} + +/*System chart*/ +.system-chart { + width: 100%; + height: 100%; + overflow: auto; + overflow-x: hidden; +} + +.system-chart ul.resources li { + background: transparent url(../images/bg-gradients.png) repeat-x 0px -1340px; + text-align: left; + width: 100px; + height: 60px; + position: absolute; + border: 1px solid #99A0A5; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+box-shadow:0px 0px 2px #A6A6A6;*/ + -moz-box-shadow: 0px 0px 2px #A6A6A6; + -webkit-box-shadow: 0px 0px 2px #A6A6A6; + -o-box-shadow: 0px 0px 2px #A6A6A6; + box-shadow: 0px 0px 2px #A6A6A6; +} + +.system-chart ul.resources li .button.view-all { + width: 65px; + height: 25px; + background: url(../images/buttons.png) no-repeat -458px -504px; + /*+placement:shift 32px 34px;*/ + position: relative; + left: 32px; + top: 34px; + position: absolute; +} + +.system-chart ul.resources li .button.view-all:hover { + background-position: -537px -504px; +} + +.system-chart ul.resources li .button.view-all .view-all-label { + color: #FFFFFF; + font-size: 11px; + /*+text-shadow:0px -1px 1px #000000;*/ + -moz-text-shadow: 0px -1px 1px #000000; + -webkit-text-shadow: 0px -1px 1px #000000; + -o-text-shadow: 0px -1px 1px #000000; + text-shadow: 0px -1px 1px #000000; + /*+placement:shift 9px 0px;*/ + position: relative; + left: 9px; + top: 0px; +} + +.system-chart ul.resources li .label { + font-weight: bold; + font-size: 12px; + color: #5C7485; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; + /*+placement:shift 3px 3px;*/ + position: relative; + left: 3px; + top: 3px; + position: absolute; +} + +/** Resources*/ +.system-chart.dashboard.admin { + width: 97%; + height: 96%; + background: transparent; +} + +.system-chart.dashboard.admin .dashboard-container { + width: 930px; + border: none; +} + +.system-chart.dashboard.admin .dashboard-container .top { + background: transparent; +} + +.system-chart.dashboard.admin .dashboard-container .top .title { + color: #55687A; +} + +.system-chart.dashboard.admin .dashboard-container .top .title span { + /*+text-shadow:0px 0px #FFFFFF;*/ + -moz-text-shadow: 0px 0px #FFFFFF; + -webkit-text-shadow: 0px 0px #FFFFFF; + -o-text-shadow: 0px 0px #FFFFFF; + text-shadow: 0px 0px #FFFFFF; +} + +.system-chart.dashboard.admin .dashboard-container .stats .chart { + width: 300px; +} + +/** Compute*/ +.system-chart.compute { + background: url(../images/bg-system-chart-compute.png) no-repeat center; +} + +/*** Compute resources*/ +.system-chart.compute ul.resources { + width: 98%; + height: 97%; + margin: 0; + position: relative; +} + +.system-chart.compute ul.resources li.zone { + left: 196px; +} + +.system-chart.compute ul.resources li.zone .label { + width: 100%; + left: 0px; + top: 20px; + font-size: 14px; + text-align: center; +} + +.system-chart.compute ul.resources li.pods { + left: 299px; + top: 112px; +} + +.system-chart.compute ul.resources li.clusters { + left: 396px; + top: 189px; +} + +.system-chart.compute ul.resources li.hosts { + left: 507px; + top: 265px; +} + +.system-chart.compute ul.resources li.primaryStorage { + left: 507px; + top: 375px; +} + +.system-chart.compute ul.resources li.secondaryStorage { + left: 299px; + top: 497px; +} + +.system-chart.compute ul.resources li.ucs { + left: 299px; + top: 406px; +} + +/** Network*/ +.system-chart.network .network-switch-icon { + color: #506980; + font-weight: bold; + background: url(../images/bg-gradients.png) repeat-x 0px -38px; + border: 1px solid #CDCDCD; + border-top: 2px solid #FFFFFF; + /*+box-shadow:0px 0px 2px #A4A4A4;*/ + -moz-box-shadow: 0px 0px 2px #A4A4A4; + -webkit-box-shadow: 0px 0px 2px #A4A4A4; + -o-box-shadow: 0px 0px 2px #A4A4A4; + box-shadow: 0px 0px 2px #A4A4A4; + /*+border-radius:2px;*/ + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; + border-radius: 2px 2px 2px 2px; + padding: 8px 7px; + /*+placement:shift 187px 76px;*/ + position: relative; + left: 187px; + top: 76px; + position: absolute; + z-index: 3; +} + +.system-chart.network .base-circle-icon { + width: 35px; + height: 34px; + background: url(../images/bg-system-network-traffic.png) 0px -853px; + /*+placement:shift 227px 557px;*/ + position: relative; + left: 227px; + top: 557px; + position: absolute; + z-index: 5; +} + +.system-chart.network ul.resources { + width: 100%; + height: 98%; + position: absolute; + z-index: 2; +} + +.system-chart.network ul.resources li { + background: transparent; + /*+box-shadow:0px 0px;*/ + -moz-box-shadow: 0px 0px; + -webkit-box-shadow: 0px 0px; + -o-box-shadow: 0px 0px; + box-shadow: 0px 0px; + -moz-box-shadow: 0px 0px none; + -webkit-box-shadow: 0px 0px none; + -o-box-shadow: 0px 0px none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + border: none; + /*+border-radius:0px;*/ + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + -khtml-border-radius: 0px; + border-radius: 0px; + border-radius: 0px 0px 0px 0px; +} + +.system-chart.network ul.resources li .view-all { + /*+placement:shift 19px 21px;*/ + position: relative; + left: 19px; + top: 21px; +} + +.system-chart.network ul.resources li.public { + /*+placement:shift 356px 23px;*/ + position: relative; + left: 356px; + top: 23px; + position: absolute; +} + +.system-chart.network ul.resources li.guest { + /*+placement:shift 356px 155px;*/ + position: relative; + left: 356px; + top: 155px; + position: absolute; +} + +.system-chart.network ul.resources li.management { + /*+placement:shift 356px 242px;*/ + position: relative; + left: 356px; + top: 242px; + position: absolute; +} + +.system-chart.network ul.resources li.storage { + /*+placement:shift 356px 333px;*/ + position: relative; + left: 356px; + top: 333px; + position: absolute; +} + +.system-chart.network ul.resources li.providers { + /*+placement:shift 248px 427px;*/ + position: relative; + left: 248px; + top: 427px; + height: 77px; + width: 258px; + position: absolute; + background: url(../images/bg-system-network-traffic.png) no-repeat -50px -848px; +} + +.system-chart.network ul.resources li.providers span { + /*+placement:shift 99px 5px;*/ + position: relative; + left: 99px; + top: 5px; + position: absolute; + font-size: 12px; +} + +.system-chart.network ul.resources li.providers .view-all { + /*+placement:shift 186px 48px;*/ + position: relative; + left: 186px; + top: 48px; + position: absolute; +} + +.system-chart.network .system-network-chart { + width: 100%; + height: 100%; + position: relative; + z-index: 1; +} + +.system-chart.network .system-network-chart .network-chart-item { + background: url(../images/bg-system-network-traffic.png) no-repeat; + width: 213px; + height: 539px; +} + +.system-chart.network .system-network-chart .network-chart-item.public { + background-position: -793px -1px; + /*+placement:shift 245px 20px;*/ + position: relative; + left: 245px; + top: 20px; + position: absolute; +} + +.system-chart.network .system-network-chart .network-chart-item.management { + background-position: -273px 12px; + /*+placement:shift 239px 20px;*/ + position: relative; + left: 239px; + top: 20px; + position: absolute; +} + +.system-chart.network .system-network-chart .network-chart-item.storage { + background-position: -523px 12px; + /*+placement:shift 231px 20px;*/ + position: relative; + left: 231px; + top: 20px; + position: absolute; +} + +.system-chart.network .system-network-chart .network-chart-item.guest { + background-position: -43px 12px; + /*+placement:shift 251px 20px;*/ + position: relative; + left: 251px; + top: 20px; + position: absolute; +} + +/** NAAS +** Add initial resource form*/ +.panel .add-first-network-resource { + margin: 37px; + font-size: 14px; + background: #FFFFFF; + padding: 19px 19px 79px; + /*+border-radius:12px;*/ + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + -khtml-border-radius: 12px; + border-radius: 12px; + border-radius: 12px 12px 12px 12px; + border: 1px solid #ECECEC; +} + +.panel .add-first-network-resource form { + display: inline-block; + height: 442px; + overflow: auto; + overflow-x: hidden; +} + +.panel .add-first-network-resource .title { + font-size: 26px; + color: #3984D1; + /*+text-shadow:0px 1px 2px #BCBCBC;*/ + -moz-text-shadow: 0px 1px 2px #BCBCBC; + -webkit-text-shadow: 0px 1px 2px #BCBCBC; + -o-text-shadow: 0px 1px 2px #BCBCBC; + text-shadow: 0px 1px 2px #BCBCBC; + margin: 0 0 17px; +} + +.panel .add-first-network-resource .message { + display: block; + color: #545151; + margin: 0 0 30px; +} + +.panel .add-first-network-resource .form-item { + width: 409px; + display: inline-block; + padding: 5px; + position: relative; + margin: 0 0 2px; +} + +.panel .add-first-network-resource .form-item label { + float: left; + width: 109px; + text-align: right; +} + +.panel .add-first-network-resource .form-item label.error { + display: none; + font-size: 10px; + position: absolute; + top: 30px; + left: 137px; +} + +.panel .add-first-network-resource .form-item input { + float: right; + /*+border-radius:6px;*/ + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; + border-radius: 6px; + border-radius: 6px 6px 6px 6px; + font-size: 16px; + border: 1px solid #B7B7B7; +} + +.panel .add-first-network-resource .form-item input[type=checkbox] { + float: right; + margin: 0 266px 0 0; +} + +.panel .add-first-network-resource .form-item input[type=text], +.panel .add-first-network-resource .form-item input[type=password], +.panel .add-first-network-resource .form-item input[type=text], +.panel .add-first-network-resource .form-item select { + width: 276px; +} + +.panel .add-first-network-resource .form-item select { + width: 280px; + margin: 0 0 0 20px; +} + +.panel .add-first-network-resource .button { + padding: 11px 23px 11px 21px; + cursor: pointer; + background: url(../images/bg-gradients.png) repeat-x 0px -221px; + margin: 29px 0 0; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + border: 1px solid #858585; + color: #FFFFFF; + clear: both; + /*[empty]position:;*/ +} + +.panel .add-first-network-resource .multi-array { + background: #FFFFFF; + border: 1px solid #DCDCDC; + display: inline-block; + float: left; + padding: 12px; + clear: both; + width: 383px; + margin: 3px 0 10px; + /*+border-radius:7px;*/ + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + -khtml-border-radius: 7px; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; +} + +.panel .add-first-network-resource .multi-array .item { + max-width: 155px; + float: left; + margin: 6px 0 0 24px; +} + +.panel .add-first-network-resource .multi-array .item .name { + float: left; +} + +.panel .add-first-network-resource .multi-array .item .value { + float: right; + margin: 0 0 0 13px; +} + +.panel .add-first-network-resource .multi-array .item .value input { + margin: 0; +} + +/*Form validation*/ +input.error { + background: #FEE5E5; +} + +label.error { + color: #FF0000; +} + +/*Multi-step wizard*/ +.multi-wizard { + width: 500px; + height: 550px; + display: inline-block; +} + +/*** Progress bar*/ +.multi-wizard .progress { + color: #FFFFFF; + font-size: 11px; +} + +.multi-wizard .progress ul { + height: 40px; + float: left; + clear: both; +} + +/*[clearfix]*/ +.multi-wizard .progress ul li { + float: left; + width: 128px; + height: 40px; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.multi-wizard.instance-wizard .progress ul li { + width: 102px; + margin-left: 8px; +} + +.multi-wizard .progress ul li.active { + background: url(../images/bg-gradients.png) 0px -221px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; +} + +.multi-wizard .progress ul li span { + position: relative; + color: #000000; + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + width: 62px; + text-align: center; +} + +.multi-wizard .progress ul li span.arrow { + width: 17px; + height: 15px; + /*+placement:displace 74px -3px;*/ + position: absolute; + margin-left: 74px; + margin-top: -3px; + background: url(../images/icons.png) no-repeat 0px -422px; + z-index: 1000; + display: none; +} + +.multi-wizard.instance-wizard .progress ul li span.arrow { + left: 19px; +} + +.multi-wizard .progress ul li.active span.arrow { + background-position: -1px -396px; +} + +.multi-wizard .progress ul li span.number { + width: auto; + font-size: 27px; + font-weight: bold; + color: #BBBBBB; + background: transparent; +} + +.multi-wizard .progress ul li.active span { + /*+text-shadow:0px -1px 1px #004AFF;*/ + -moz-text-shadow: 0px -1px 1px #004AFF; + -webkit-text-shadow: 0px -1px 1px #004AFF; + -o-text-shadow: 0px -1px 1px #004AFF; + text-shadow: 0px -1px 1px #004AFF; + color: #FFFFFF; +} + +/*** Content*/ +.multi-wizard .main-desc { + font-size: 11px; + text-align: left; + width: 437px; + /*+placement:shift 3px 25px;*/ + position: relative; + left: 3px; + top: 25px; + line-height: 17px; +} + +.multi-wizard .review .main-desc, +.multi-wizard .select-template .main-desc { + margin-left: 10px; + left: 0; +} + +.multi-wizard .content { + background: #FFFFFF; + width: 440px; + min-height: 366px; + margin: 24px 0 0; + padding-bottom: 8px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + display: inline-block; + float: left; +} + +.multi-wizard .select-security-group .content { + height: 366px; +} + +.multi-wizard .content .section { + width: 416px; + background: #E9E9E9; + margin: 16px auto auto; + overflow: hidden; + text-align: left; + font-size: 12px; + color: #505A62; + border: 1px solid #E0DFDF; +} + +.multi-wizard.instance-wizard .service-offering .content { + width: 463px; + max-height: 365px; + overflow: auto; + overflow-x: hidden; +} + +.multi-wizard .content .section .select-area { + width: 334px; + height: 45px; + margin: 9px auto auto; + background: #D6D6D6; +} + +.multi-wizard .content .section .select-area .desc { + text-align: left; + width: 155px; + float: right; + padding: 9px 0 0; + font-size: 12px; + color: #989898; +} + +.multi-wizard .content .section .select-area input { + float: left; + margin: 0; + padding: 9px; +} + +.multi-wizard .content .section .select-area select { + padding: 0; + width: 158px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + margin: 11px 0px 0 14px; + float: left; +} + +.multi-wizard .content .section .select-area input[type=radio], +.multi-wizard.instance-wizard .content .section.select-template input[type=radio] { + margin: 14px 16px 0; +} + +.multi-wizard .content .section .select-area label { + float: left; + text-align: left; + font-size: 18px; + color: #62798E; + /*+text-shadow:0px 2px 2px #EFEFEF;*/ + -moz-text-shadow: 0px 2px 2px #EFEFEF; + -webkit-text-shadow: 0px 2px 2px #EFEFEF; + -o-text-shadow: 0px 2px 2px #EFEFEF; + text-shadow: 0px 2px 2px #EFEFEF; + margin: 12px 12px 12px 2px; +} + +.multi-wizard .content .section .select-area label.error { + font-size: 10px; + color: #FF0000; + margin: 2px 0 0 14px; +} + +.multi-wizard .content .section p { + font-size: 11px; + text-align: left; + color: #808080; + padding: 0 0 0 40px; +} + +.multi-wizard .content .section h3 { + text-align: left; + color: #62798E; + font-weight: bold; + padding: 14px 14px 3px 39px; + /*+text-shadow:0px 1px 1px #EFEFEF;*/ + -moz-text-shadow: 0px 1px 1px #EFEFEF; + -webkit-text-shadow: 0px 1px 1px #EFEFEF; + -o-text-shadow: 0px 1px 1px #EFEFEF; + text-shadow: 0px 1px 1px #EFEFEF; + margin: 0; +} + +.multi-wizard .content .section.select-zone { + height: 117px; +} + +.multi-wizard .content .section.select-template { + height: 206px; +} + +.multi-wizard .content.tab-view { + margin: 31px 0px 0px; + background: transparent; + padding: 0px 8px; +} + +.multi-wizard .content.tab-view div.ui-tabs-panel { + border: 1px solid #E2DDDD; + clear: both; + height: 72% !important; + width: 98%; + overflow: auto; + overflow-x: hidden; + height: 591px; + /*+border-radius:0 3px 10px 10px;*/ + -moz-border-radius: 0 3px 10px 10px; + -webkit-border-radius: 0 3px 10px 10px; + -khtml-border-radius: 0 3px 10px 10px; + border-radius: 0 3px 10px 10px; + background: #FFFFFF; +} + +.multi-wizard .content.tab-view div.ui-tabs-panel.ui-tabs-hide { + display: none; +} + +.multi-wizard.instance-wizard .select-iso .content .select .hypervisor { + float: left; + display: block; + clear: both; + margin: 12px 0 0 58px; + /*+placement:shift 0px -6px;*/ + position: relative; + left: 0px; + top: -6px; +} + +.multi-wizard.instance-wizard .select-iso .content .select .hypervisor select { + width: 160px; +} + +.multi-wizard.instance-wizard .select-iso .content .select .hypervisor label { + color: #000000; + font-size: 11px; + margin-right: 9px; + margin-left: 2px; + /*+placement:shift;*/ + position: relative; + left: 0; + top: 0; +} + +.multi-wizard.instance-wizard .select-iso .wizard-step-conditional.select-iso .content .select.selected { + height: 90px; +} + +/*** UI widgets*/ +.multi-wizard .ui-tabs ul.ui-tabs-nav { + margin-top: 7px; + display: block; + height: 41px; + background: transparent; + border: none; + /*+placement:shift -6px 5px;*/ + position: relative; + left: -6px; + top: 5px; + overflow: hidden; + display: inline-block; + z-index: 10; +} + +.multi-wizard .select-iso .ui-tabs ul { + float: left; + left: 0px; + top: 1px; +} + +.multi-wizard .ui-tabs li.ui-state-active { + background: #FFFFFF; +} + +.multi-wizard .ui-tabs li.ui-state-default a { + padding-left: 0; + padding-right: 0; +} + +.multi-wizard .ui-slider { + width: 136px; + padding: 0; + margin: 8px -2px 3px; + background: url(../images/bg-gradients.png) 0px -307px !important; + float: left; +} + +.multi-wizard.instance-wizard .ui-slider { + padding: 7px 0 0 8px; + margin: 8px 0px 0px 2px; +} + +.multi-wizard .ui-slider .ui-slider-handle { + display: block; + background: url(../images/buttons.png) -622px -274px; + width: 18px; + height: 18px; + position: relative; + outline: none; + border: none; + top: -0.5rem; + margin-left: -0.9rem; +} + +/*** Select container*/ +.multi-wizard .select-container { + height: 352px; + overflow: auto; + overflow-x: hidden; + border: 1px solid #D9DFE1; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + margin: 10px 10px 0px; +} + +.multi-wizard .select-container p { + padding: 11px; + color: #424242; + background: #DFDFDF; +} + +.multi-wizard .select-container .select { + font-size: 13px; + margin: -1px 0 0; + padding: 0 0 14px; + min-height: 35px; + width: 100%; + display: inline-block; + text-align: left; + float: left; + border: none; + background: #FFFFFF; +} + +.multi-wizard .select-container .select.odd { + background: #EBEFF4; +} + +.multi-wizard .select-container .select input { + float: left; + margin: 21px 24px 0; +} + +.multi-wizard .select-container .select .select-desc { + max-width: 335px; + min-height: 28px; + overflow: hidden; + float: left; + clear: none; + margin: 21px 0 0; + display: inline-block; +} + +.multi-wizard .select-container .select .select-desc .name { + font-weight: bold; + margin: 0 0 5px; +} + +.multi-wizard .select-container .select .select-desc .desc { + font-size: 11px; + color: #808080; + display: inline-block; + /*[empty]height:;*/ +} + +/*** Buttons*/ +.multi-wizard .buttons { + width: 100%; + position: absolute; + bottom: 10px; + left: 0px; +} + +.multi-wizard .buttons .button { + width: 88px; + height: 16px; + padding: 11px 0 8px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + border: 1px solid #78818F; + cursor: pointer; + font-weight: bold; + font-size: 12px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.multi-wizard .buttons .button.next { + /*+placement:float-right 77px 0px;*/ + float: right; + position: relative; + left: 77px; + top: 0px; + color: #FFFFFF; + /*+text-shadow:0px -1px 1px #465259;*/ + -moz-text-shadow: 0px -1px 1px #465259; + -webkit-text-shadow: 0px -1px 1px #465259; + -o-text-shadow: 0px -1px 1px #465259; + text-shadow: 0px -1px 1px #465259; + background: #0049FF url(../images/gradients.png) 0px -317px; + font-weight: bold; + border: 1px solid #0069CF; + border-top: 1px solid #0070FC; +} + +.multi-wizard .buttons .button.next:hover { + background-position: -3px -368px; + border: 1px solid #0035B8; + border-bottom: 1px solid #0062FA; +} + +.multi-wizard .buttons .button.next.final { + padding: 4px 0px 9px; + width: 115px; + margin: 3px 0 0; +} + +.multi-wizard .buttons .button.next.final span { + background: url(../images/icons.png) 0px -349px; + /*+placement:shift 0px 5px;*/ + position: relative; + left: 0px; + top: 5px; + padding: 5px 0px 5px 30px; +} + +.multi-wizard .buttons .button.cancel { + border: none; + /*+placement:float-right -127px 0px;*/ + float: right; + position: relative; + left: -127px; + top: 0px; + color: #808080; + /*+border-radius:0;*/ + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; + border-radius: 0; + border-radius: 0 0 0 0; + background: transparent; + /*+box-shadow:0px 0px;*/ + -moz-box-shadow: 0px 0px; + -webkit-box-shadow: 0px 0px; + -o-box-shadow: 0px 0px; + box-shadow: 0px 0px; + -moz-box-shadow: 0px 0px inherit; + -webkit-box-shadow: 0px 0px inherit; + -o-box-shadow: 0px 0px inherit; + -moz-box-shadow: inherit; + -webkit-box-shadow: inherit; + -o-box-shadow: inherit; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + padding: 14px 0 0px 0px; +} + +.multi-wizard .buttons .button.cancel:hover { + color: #5E5E5E; +} + +.multi-wizard .buttons .button.previous { + background: #D6D6D6; + color: #62798E; + margin-left: 27px; +} + +.multi-wizard .buttons .button.previous:hover { + background: #C6C6C6; +} + +/** Instance wizard +** Select ISO*/ +.multi-wizard.instance-wizard .select-iso .select-container { + height: 260px; + margin: 0; + /*+border-radius:0 0 5px 5px;*/ + -moz-border-radius: 0 0 5px 5px; + -webkit-border-radius: 0 0 5px 5px; + -khtml-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; +} + +/*** Data disk offering*/ +.multi-wizard.instance-wizard .content .section { + padding: 9px 0 16px; + margin: 12px 0 15px 8px; +} + +.multi-wizard.instance-wizard .content .section.no-thanks { + box-sizing: border-box; + width: 426px; +} + +.multi-wizard.instance-wizard .data-disk-offering .select-container, +.multi-wizard.instance-wizard .sshkeyPairs .select-container { + height: 300px; + margin: -7px 6px 0 8px; + /*+border-radius:6px;*/ + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; + border-radius: 6px; + border-radius: 6px 6px 6px 6px; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group { + float: left; + margin-top: 12px; + width: 100%; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-header { + border-bottom: 1px solid #D4D4D4; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + background: #C2C2C2 0px 4px; + padding: 6px; + height: 17px; +} + +.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header { + background: #505050; + /*+border-radius:4px 4px 0 0;*/ + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-header input { + float: left; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-header .title { + float: left; + font-size: 14px; + padding: 2px; +} + +.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header .title { + color: #FFFFFF; + /*+text-shadow:0px -1px #000000;*/ + -moz-text-shadow: 0px -1px #000000; + -webkit-text-shadow: 0px -1px #000000; + -o-text-shadow: 0px -1px #000000; + text-shadow: 0px -1px #000000; +} + +.multi-wizard.instance-wizard .data-disk-offering .multi-disk-select-container { + max-height: 257px; + overflow: auto; + border: 1px solid #DDDBDB; + padding: 13px; + background: #E4E4E4; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-container { + max-height: 114px; + float: left; + margin: 0; + border: none; + /*+border-radius:0;*/ + -moz-border-radius: 0; + -webkit-border-radius: 0; + -khtml-border-radius: 0; + border-radius: 0; + display: none; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.selected .select-container { + display: block; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select { + padding: 0 0 17px; + height: 0; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.custom-size .section.custom-size { + display: block !important; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select input { + margin: 13px 12px 12px; +} + +.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-desc { + margin: 13px 0 0; +} + +.multi-wizard.instance-wizard .data-disk-offering.required .select-container { + height: 344px; + position: relative; + margin-top: 9px !important; +} + +.multi-wizard.instance-wizard .custom-disk-size .select-container { + height: 279px; +} + +.multi-wizard.instance-wizard .custom-disk-size .select-container { + height: 213px; + margin: -7px 6px 0 8px; + /*+border-radius:6px;*/ + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + -khtml-border-radius: 6px; + border-radius: 6px; + border-radius: 6px 6px 6px 6px; +} + +.multi-wizard.instance-wizard .content .section input { + float: left; +} + +.multi-wizard.instance-wizard .content .section input[type=radio] { + margin: 8px 2px 0 17px; +} + +.multi-wizard.instance-wizard .content .section label { + display: block; + float: left; + margin: 10px 7px 7px; +} + +.multi-wizard.instance-wizard .content .section .select-area label { + margin: 12px 0px 0px; +} + +.multi-wizard.instance-wizard .content .section label.size { + color: #647A8E; + font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; +} + +.multi-wizard.instance-wizard .section.custom-size { + position: relative; + background: #F4F4F4; + padding: 7px; + border-radius: 4px; + width: 100%; + box-sizing: border-box; + margin: 12px 0; +} + +.multi-wizard.instance-wizard .section.custom-size.custom-disk-size { + width: 426px; + margin-left: 8px; +} + +.multi-wizard.instance-wizard .section.custom-iops { + position: relative; + background: #F4F4F4; + padding: 7px; + border-radius: 4px; +} + +.multi-wizard.instance-wizard .section.custom-iops-do { + position: relative; + background: #F4F4F4; + padding: 7px; + border-radius: 4px; + box-sizing: border-box; + width: 426px; +} + +.multi-wizard.instance-wizard .section.custom-size input[type=radio] { + float: left; +} + +.multi-wizard.instance-wizard .section.custom-size input[type=text] { + float: left; + width: 28px; + margin: 6px -1px 0 8px; +} + +.multi-wizard.instance-wizard .section.custom-iops input[type=text] { + float: left; + width: 28px; + margin: 6px -1px 0 8px; +} + +.multi-wizard.instance-wizard .section.custom-iops-do input[type=text] { + float: left; + width: 28px; + margin: 6px -1px 0 8px; +} + +.multi-wizard.instance-wizard .section.custom-size label.error { + position: absolute; + top: 29px; + left: 242px; + font-size: 10px; +} + +.instance-wizard .step.data-disk-offering.custom-disk-size .select-container { + height: 272px; +} + +.instance-wizard .step.data-disk-offering.custom-iops-do .select-container { + height: 240px; +} + +.instance-wizard .step.data-disk-offering.custom-disk-size.custom-iops-do .select-container { + height: 176px; +} + +.instance-wizard .step.data-disk-offering.required.custom-disk-size .select-container { + height: 315px; +} + +.instance-wizard .step.data-disk-offering.required.custom-iops-do .select-container { + height: 295px; +} + +.instance-wizard .step.data-disk-offering.required.custom-disk-size.custom-iops-do .select-container { + height: 223px; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do { + display: none; +} + +.instance-wizard .step.data-disk-offering.custom-iops-do .custom-iops-do { + display: block; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do .field { + width: 30%; + float: left; + margin-bottom: 5px; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do .field label { + text-indent: 20px; +} + +.instance-wizard .step.data-disk-offering .custom-iops-do .field input { + width: 88%; + margin-left: 26px; +} + +/*** Compute offering*/ +.instance-wizard .step.service-offering.custom-size .select-container { + height: 235px; +} + +.instance-wizard .step.service-offering.custom-iops .select-container { + height: 235px; +} + +.instance-wizard .step.service-offering .custom-size { + display: none; +} + +.instance-wizard .step.service-offering .custom-iops { + display: none; +} + +.instance-wizard .step.service-offering.custom-size .custom-size { + display: block; +} + +.instance-wizard .step.service-offering.custom-iops .custom-iops { + display: block; +} + +.instance-wizard .step.service-offering .custom-size .field { + width: 30%; + float: left; + margin-bottom: 13px; +} + +.instance-wizard .step.service-offering .custom-iops .field { + width: 30%; + float: left; + margin-bottom: 13px; +} + +.instance-wizard .step.service-offering .custom-size .field label { + text-indent: 20px; +} + +.instance-wizard .step.service-offering .custom-iops .field label { + text-indent: 20px; +} + +.instance-wizard .step.service-offering .custom-size .field input { + width: 88%; + margin-left: 26px; +} + +.instance-wizard .step.service-offering .custom-size .field label.error { + position: relative; + top: 0; + left: 0; +} + +.instance-wizard .step.service-offering .custom-iops .field input { + width: 88%; + margin-left: 26px; +} + +/*** Network*/ +.multi-wizard.instance-wizard .no-network { + background: #FFFFFF; + width: 773px; + height: 52px; + position: absolute; + top: 98px; + left: 11px; + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + z-index: 1; + padding: 162px 0 194px; +} + +.multi-wizard.instance-wizard .no-network p { + font-size: 22px; + line-height: 25px; +} + +.multi-wizard.instance-wizard .select-network .select table { + width: 405px; + margin: 4px 12px 0; + float: left; +} + +.multi-wizard.instance-wizard .select-network .select table thead { + margin: 0; + padding: 0; +} + +.multi-wizard.instance-wizard .select-network .select table td { + padding: 0; + margin: 0; + vertical-align: top; +} + +.multi-wizard.instance-wizard .select-network .select table .select-container { + margin: 0px; + border: 0; + height: 223px; +} + +.multi-wizard.instance-wizard .select-network.no-add-network .select table .select-container { + height: 282px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container { + height: 29px; + overflow: visible; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select { + margin: -12px 0 0; + position: relative; + text-align: right; +} + +.multi-wizard.instance-wizard .select-network .select.new-network table .select-container .select select { + width: 145px; + margin: 4px 0 0; + /*+placement:shift;*/ + position: relative; + left: 0; + top: 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network { + margin: -17px 0 0; +} + +.multi-wizard.instance-wizard .select-network.no-add-network .select.new-network { + display: none !important; +} + +.multi-wizard.instance-wizard .select-network .main-desc { + width: 252px; + top: 12px; + left: 12px; + float: left; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input { + float: right; + width: 80px; + height: 48px; + font-size: 11px; + border-left: 1px solid #D7D7D7; + color: #000000; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .secondary-input { + height: 73px; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input input { + margin: 0 !important; + padding: 0 !important; + /*+placement:shift 9px 21px;*/ + position: relative; + left: 9px; + top: 21px; +} + +.multi-wizard.instance-wizard .select-network .select .secondary-input .name { + float: right; + /*+placement:shift -16px 22px;*/ + position: relative; + left: -16px; + top: 22px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select { + width: 100%; + float: left; + padding: 0; + position: relative; +} + +.multi-wizard.instance-wizard .select-network .select-container .select.advanced { + height: 74px; +} + +.multi-wizard.instance-wizard .select-network .select .advanced-options { + background: url(../images/sprites.png) -7px -795px; + width: 20px; + height: 20px; + float: right; + cursor: pointer; + margin-top: 15px; + margin-right: 13px; +} + +.multi-wizard.instance-wizard .select-network .select .advanced-options:hover, +.multi-wizard.instance-wizard .select-network .select.advanced .advanced-options { + background: url(../images/sprites.png) -32px -795px; +} + +.multi-wizard.instance-wizard .select-network .select .specify-ip { + display: none; + position: absolute; + top: 45px; + left: 0px; + width: 100%; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip { + display: block; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip input { + margin: 0px 0 0 15px; + width: 138px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select input { + margin: 21px 15px 0px; + float: left; +} + +.multi-wizard.instance-wizard .select-network .select-container .select label { + float: left; + font-size: 11px; + margin: 4px 0 0 42px; + color: #4E6B82; +} + +.multi-wizard.instance-wizard .select-network .select-vpc { + float: left; + padding: 3px; + margin: 7px 0px 7px 7px; +} + +.multi-wizard.instance-wizard .select-network.no-add-network .select-vpc { + visibility: hidden !important; +} + +.multi-wizard.instance-wizard .select-network .select-vpc select { + width: 124px; +} + +.multi-wizard.instance-wizard .select-network .select-vpc label { + font-size: 10px; +} + +/**** New networ*/ +.multi-wizard.instance-wizard .select-network .select.new-network .advanced-options { + /*+placement:shift 379px 15px;*/ + position: relative; + left: 379px; + top: 15px; + position: absolute; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select.advanced { + height: 106px; + position: relative; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select.advanced { + height: auto; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select.advanced .specify-ip { + top: 74px; + left: 29px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .hide-if-selected { + display: none; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .hide-if-unselected { + display: none; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .hide-if-selected { + display: block; +} + +.multi-wizard.instance-wizard .select-network .select.new-network input { + margin-top: 24px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field { + /*+placement:shift 41px 21px;*/ + position: relative; + left: 41px; + top: 21px; + font-size: 11px; + color: #000000; + position: absolute; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field .name { + width: 99px; + float: left; + padding: 3px 0 0; + /*[empty]display:;*/ +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field .value { + float: left; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .field .value input { + width: 138px; + margin: 0 0 0 11px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network label.error { + display: none !important; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input { + width: 97px; + padding: 13px 0 17px; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .secondary-input .name { + margin: 0 17px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc { + width: 255px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .desc { + font-size: 11px; + color: #808080; + float: left; + max-width: 113px; +} + +.multi-wizard.instance-wizard .select-network .select-container .select .select-desc .name { + width: 116px; + font-size: 11px; + font-weight: normal; + float: left; + color: #000000; + margin: 0 16px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network .select-desc .name { + width: 99px; + margin: 4px 0 0; +} + +.multi-wizard.instance-wizard .select-network .select.new-network.unselected .select-desc .name { + color: #808080; +} + +/*** Confirmation*/ +.multi-wizard .review .select-container .select { + height: 35px; + padding: 0; +} + +.multi-wizard .review .select-container .select .name { + float: left; + margin: 13px 22px 0 14px; + width: 127px; + font-size: 11px; +} + +.multi-wizard .review .select-container .select .value { + float: left; + margin: 9px 21px 0; + width: 136px; +} + +.multi-wizard .review .select-container .select .value span { + font-size: 10px; +} + +.multi-wizard .review .select-container .select .edit { + float: right; + cursor: pointer; + height: 18px; + margin: 11px 20px 0 0px; + background: url(../images/icons.png) -10px -452px; + padding: 0px 0px 0 20px; +} + +.multi-wizard .review .select-container .select.odd .edit a { + background: #EBEFF4; +} + +.multi-wizard .review .select-container .select .edit a { + font-size: 10px; + color: #0000FF; + text-decoration: none; + padding: 5px 0 8px; + background: #FFFFFF; +} + +.multi-wizard .review .select-container .select input, +.multi-wizard .review .select-container .select select { + margin: 0; + width: 151px; + float: left; +} + +/*** Diagram*/ +.multi-wizard.instance-wizard .diagram { + width: 1px; + height: 502px; + position: absolute; + top: 109px; + left: 465px; +} + +.multi-wizard.instance-wizard .diagram .part { + background: url(../images/instance-wizard-parts.png) no-repeat 0px 0px; +} + +.multi-wizard.instance-wizard .diagram .part.zone-plane { + width: 354px; + height: 117px; + background-position: -38px -55px; + /*+placement:displace -38px 259px;*/ + position: absolute; + margin-top: 259px; +} + +.multi-wizard.instance-wizard .diagram .part.computer-tower-front { + width: 95px; + height: 254px; + background-position: -54px -210px; + /*+placement:displace 44px 92px;*/ + position: absolute; + margin-left: 44px; + margin-top: 92px; +} + +.multi-wizard.instance-wizard .diagram .part.computer-tower-back { + width: 194px; + height: 271px; + background-position: -148px -192px; + /*+placement:displace 138px 74px;*/ + position: absolute; + margin-left: 138px; + margin-top: 74px; +} + +.multi-wizard.instance-wizard .diagram .part.os-drive { + width: 194px; + height: 86px; + background-position: -348px -192px; + /*+placement:displace 138px 74px;*/ + position: absolute; + margin-left: 138px; + margin-top: 74px; +} + +.multi-wizard.instance-wizard .diagram .part.cpu { + width: 194px; + height: 49px; + background-position: -344px -278px; + /*+placement:displace 138px 156px;*/ + position: absolute; + margin-left: 138px; + margin-top: 156px; +} + +.multi-wizard.instance-wizard .diagram .part.hd { + width: 194px; + height: 44px; + background-position: -344px -331px; + /*+placement:displace 138px 208px;*/ + position: absolute; + margin-left: 138px; + margin-top: 208px; +} + +.multi-wizard.instance-wizard .diagram .part.network-card { + width: 194px; + height: 44px; + background-position: -344px -380px; + /*+placement:displace 138px 260px;*/ + position: absolute; + margin-left: 138px; + margin-top: 260px; +} + +/** Add zone wizard*/ +.multi-wizard.zone-wizard { + display: block; + height: 675px; +} + +.multi-wizard.zone-wizard ul.subnav { + text-align: left; + /*+placement:shift 30px 104px;*/ + position: relative; + left: 30px; + top: 104px; + position: absolute; + list-style: disc inside; +} + +.multi-wizard.zone-wizard ul.subnav li { + float: left; + padding: 0; + font-size: 12px; + white-space: nowrap; + text-transform: uppercase; + list-style: none; + height: 20px; + margin-right: 34px; + color: #9A9A9A; +} + +.multi-wizard.zone-wizard ul.subnav li:after { + content: ">"; + font-size: 13px; + /*+placement:shift 4px -1px;*/ + position: relative; + left: 4px; + top: -1px; +} + +.multi-wizard.zone-wizard ul.subnav li.active { + color: #0000FF; +} + +.multi-wizard.zone-wizard .ui-tabs-panel { + height: 422px; + overflow: auto; + overflow-x: hidden; +} + +.multi-wizard.zone-wizard ul.ui-tabs-nav { + /*+placement:shift 0px 0px;*/ + position: relative; + left: 0px; + top: 0px; + float: left; + margin: 6px 0 3px 3px; +} + +.multi-wizard.zone-wizard .select-container { + height: 333px; + overflow: auto; +} + +.multi-wizard.zone-wizard .setup-guest-traffic .select-container { + background: #E9EAEB; + overflow: hidden; +} + +.multi-wizard.zone-wizard .setup-guest-traffic.basic .select-container { + background: #FFFFFF; +} + +.multi-wizard.zone-wizard .main-desc { + width: 516px; + float: left; + /*+placement:shift 0;*/ + position: relative; + left: 0; + top: 0; + margin: 23px 0 0px 6px; + font-weight: 100; + font-size: 14px; + color: #424242; +} + +.multi-wizard.zone-wizard .review .main-desc.pre-setup { + width: 90%; + font-size: 18px; + color: #2C4159; + background: url(../images/icons.png) no-repeat 74px -224px; + padding: 1px 0 1px 20px; + text-align: center; + margin-left: 50px; + font-weight: 100; + /*+placement:shift 0px 153px;*/ + position: relative; + left: 0px; + top: 153px; + left: -10px; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; +} + +.multi-wizard.zone-wizard .info-desc { + font-size: 11px; + float: left; + text-align: left; + overflow: auto; + overflow-x: hidden; + padding: 11px; + width: 698px; + margin: 29px 0 68px 5px; + background: #FFFFFF; + border: 1px solid #C7C7C7; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.multi-wizard.zone-wizard .setup-storage-traffic .info-desc { + margin-bottom: 10px; +} + +.multi-wizard.zone-wizard .setup-public-traffic .info-desc, +.multi-wizard.zone-wizard .setup-guest-traffic .info-desc, +.multi-wizard.zone-wizard .setup-physical-network .info-desc { + margin-bottom: 12px; +} + +.multi-wizard.zone-wizard .info-desc strong { + font-weight: bold; +} + +.multi-wizard.zone-wizard .main-desc em { + text-decoration: underline; + font-weight: bold; +} + +.multi-wizard.zone-wizard .progress ul li { + width: 107px; + margin-left: 7px; + padding: 0 32px 0 0; +} + +.multi-wizard.zone-wizard .progress ul li span { + width: 102px; +} + +.multi-wizard.zone-wizard .progress ul li span.arrow { + margin: -4px 0 0 109px; +} + +.multi-wizard.zone-wizard .select-network .content .section { + width: 665px; + height: 430px; + /*+placement:shift 0px 14px;*/ + position: relative; + left: 0px; + top: 14px; +} + +.multi-wizard.zone-wizard .select-network .content { + width: 100%; + height: 461px; + float: none; + margin: 7px auto auto; + padding-bottom: 28px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area { + height: 181px; + width: 586px; + position: relative; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.basic-zone { + height: 105px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.advanced-zone { + height: 233px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode { + height: 98px; + overflow: hidden; + float: left; + margin: 5px 0 0; + position: absolute; + top: 114px; + left: 9px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.disabled .isolation-mode { + /*+opacity:50%;*/ + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; + opacity: 0.5; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .title { + font-size: 15px; + color: #5D7387; + /*+placement:shift 36px 2px;*/ + position: relative; + left: 36px; + top: 2px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .desc { + width: 373px; + height: 70px; + color: #727272; + background: #EFEFEF; + padding: 12px 18px 25px; + /*+placement:shift -27px 12px;*/ + position: relative; + left: -27px; + top: 12px; + /*+border-radius:7px;*/ + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + -khtml-border-radius: 7px; + border-radius: 7px; + border-radius: 7px 7px 7px 7px; + line-height: 19px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area.basic-zone .desc { + padding-bottom: 4px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .desc em { + font-weight: bold; + text-decoration: underline; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area { + width: 586px; + height: 61px; + overflow: hidden; + margin: 0; + padding: 0px 0 9px; + background: none; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area label { + font-size: 11px; + margin: 24px 0 0 2px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { + margin: 26px 0 11px; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area input { + margin: 24px 8px 0 12px !important; + padding: 0 !important; +} + +.multi-wizard.zone-wizard .select-network-model .select-area .isolation-mode .select-area .desc { + padding: 6px 7px 11px; + width: 388px; + height: 29px; + font-size: 11px; + margin-right: 9px; + background: #EFEFEF; + float: right; + /*+placement:shift -27px 12px;*/ + position: relative; + left: -27px; + top: 12px; +} + +.multi-wizard.zone-wizard .content.input-area { + width: 721px; + min-height: inherit; + margin: -50px auto auto 4px; + overflow: auto; + overflow-x: hidden; +} + +/*** Add physical network -- network form items*/ +.multi-wizard.zone-wizard .setup-physical-network .content.input-area { + width: 627px; + height: 396px; + background: transparent; + position: relative; +} + +.multi-wizard.zone-wizard .setup-physical-network .drag-helper-icon { + width: 80px; + height: 84px; + background: url(../images/sprites.png) no-repeat 0px -1365px; + /*+placement:shift 134px 303px;*/ + position: relative; + left: 134px; + top: 303px; + position: absolute; +} + +.multi-wizard.zone-wizard .select-container.multi { + display: inline-block; + width: 490px; + margin: 6px auto auto; + float: right; + height: auto; + border: 1px solid #BFBFBF; + overflow: visible; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+box-shadow:inset 0px 1px 2px #CBCACA;*/ + -moz-box-shadow: inset 0px 1px 2px #CBCACA; + -webkit-box-shadow: inset 0px 1px 2px #CBCACA; + -o-box-shadow: inset 0px 1px 2px #CBCACA; + box-shadow: inset 0px 1px 2px #CBCACA; + background: #F8F6F6; + /*[empty]display:;*/ +} + +.multi-wizard.zone-wizard .select-container.multi.disabled { + border: 1px dotted #A7A7A7; + /*+opacity:40%;*/ + filter: alpha(opacity=40); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); + -moz-opacity: 0.4; + opacity: 0.4; +} + +.multi-wizard.zone-wizard .select-container.multi .physical-network-icon { + width: 61px; + height: 53px; + float: left; + border-right: 1px solid #CDCDCD; + background: url(../images/sprites.png) -109px -1393px; +} + +.multi-wizard.zone-wizard .select-container.multi input { + width: 195px !important; + margin: 2px 0 0 17px !important; +} + +.multi-wizard.zone-wizard .select-container.multi .field { + width: 425px; + height: 46px; + margin-top: -6px; +} + +.multi-wizard.zone-wizard .select-container.multi .field .name { + width: 93%; + margin-left: 17px; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container { + background: #DAE2EC; + width: 484px; + height: 114px; + clear: both; + position: relative; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 3px dashed #BBBFC4; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container ul { + background: #DAE2EC; + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + width: 99%; + height: 94%; + top: 4px; + left: 2px; + position: absolute; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container ul.active { + background: #DFEAFF; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container ul li { + float: left; + margin: 2px 17px 0 29px; +} + +.multi-wizard.zone-wizard .select-container.multi .drop-container span.empty-message { + text-align: center; + color: #959BA0; + font-size: 13px; + /*+placement:shift 0px 45px;*/ + position: relative; + left: 0px; + top: 45px; +} + +/*** Add physical network -- traffic type drag area*/ +.multi-wizard.zone-wizard .traffic-types-drag-area { + width: 96px; + height: 370px; + background: #F0F1F2; + border: 1px solid #DCCACA; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + float: left; + text-align: left; + padding: 0; + margin: 8px 0 0; + /*+placement:shift 3px 0px;*/ + position: relative; + left: 3px; + top: 0px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area .header { + margin: 0; + font-size: 13px; + font-weight: bold; + color: #5C5C5C; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + background: #F8F8F8; + text-align: center; + padding: 8px 0 7px; + /*+border-radius:4px 4px 0 0;*/ + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + border-bottom: 1px solid #DCCACA; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul { + width: 100%; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li { + float: left; + font-size: 11px; + width: 100%; + background: transparent; + height: 83px; + margin: 16px 13px 0 0; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required { + display: none; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li.required.clone { + display: block; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container { + width: 60px; + height: 54px; + margin-left: 16px; + background: #E4E4E4; + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + /*+box-shadow:inset 0px 2px 4px #999696;*/ + -moz-box-shadow: inset 0px 2px 4px #999696; + -webkit-box-shadow: inset 0px 2px 4px #999696; + -o-box-shadow: inset 0px 2px 4px #999696; + box-shadow: inset 0px 2px 4px #999696; + border-bottom: 1px solid #FFFFFF; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li ul.container li { + /*+placement:shift 1px 2px;*/ + position: relative; + left: 1px; + top: 2px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable { + display: block; + background: transparent url(../images/sprites.png) no-repeat 0px -1161px; + width: 51px; + height: 51px; + margin: auto; + cursor: move; + z-index: 5000; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { + width: 69px !important; + height: 66px !important; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { + /*+placement:shift -2px -4px;*/ + position: relative; + left: -2px; + top: -4px; +} + +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable:hover { + /*+placement:shift -8px -6px;*/ + position: relative; + left: -8px; + top: -6px; + margin-right: 0px; + width: 70px !important; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.disabled { + /*+opacity:50%;*/ + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; + opacity: 0.5; + cursor: not-allowed; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area ul > li.disabled { + display: none; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.disabled { + /*+opacity:50%;*/ + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; + opacity: 0.5; + cursor: not-allowed; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.management { + background-position: 0px -1161px; + height: 52px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.management:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.management:hover { + background-position: -11px -1225px; +} + +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.management:hover { + margin-right: -1px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.public { + width: 53px; + height: 53px; + background-position: -54px -1160px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.public:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.public:hover { + background-position: -87px -1225px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.guest { + background-position: -113px -1161px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.guest:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.guest:hover { + background-position: -166px -1227px; +} + +.multi-wizard.zone-wizard li.traffic-type-draggable.storage { + background-position: -170px -1160px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area li.traffic-type-draggable.storage:hover, +.multi-wizard.zone-wizard .select-container.multi li.traffic-type-draggable.storage:hover { + background-position: -244px -1224px; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info { + width: 100%; + margin: 5px 0 0 -2px; + line-height: 14px; + float: left; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .title { + text-align: center; + font-weight: bold; + color: #787879; +} + +.multi-wizard.zone-wizard .traffic-types-drag-area > ul > li .info .desc { + display: none; +} + +/*** Traffic type icon -- edit button*/ +.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type { + display: none; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type { + cursor: pointer; + display: block; + width: 59px; + height: 23px; + padding: 2px 9px 0 12px; + background: url(../images/bg-gradients.png) 0px -1342px; + border: 1px solid #C4C4C4; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border-top: 1px solid #FFFFFF; + /*+placement:shift -16px 70px;*/ + position: relative; + left: -16px; + top: 70px; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover { + background-position: 0px -105px; + color: #FFFFFF; + /*+box-shadow:inset 0px -1px 1px #727272;*/ + -moz-box-shadow: inset 0px -1px 1px #727272; + -webkit-box-shadow: inset 0px -1px 1px #727272; + -o-box-shadow: inset 0px -1px 1px #727272; + box-shadow: inset 0px -1px 1px #727272; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover span { + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable:hover > .edit-traffic-type { + /*+placement:shift -7px 76px;*/ + position: relative; + left: -7px; + top: 76px; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span { + text-align: center; + font-size: 11px; + font-weight: bold; + color: #4E73A6; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; +} + +.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span.icon { + float: left; + background: url(../images/sprites.png) -7px -4px; + padding: 7px 11px 0 7px; +} + +.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type span.name { + float: left; + width: 76px; + font-size: 10px; + padding: 2px; + color: #4E5F6F; + background: #DBE1E9; + /*+border-radius:4px 4px 0 0;*/ + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -khtml-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + /*+placement:shift -13px -16px;*/ + position: relative; + left: -13px; + top: -16px; + margin-bottom: -13px; + border: 1px solid #C3BCBC; + border-bottom: 1px solid #D1CDCD; + /*+box-shadow:inset 0px 1px 1px #F5F4F4;*/ + -moz-box-shadow: inset 0px 1px 1px #F5F4F4; + -webkit-box-shadow: inset 0px 1px 1px #F5F4F4; + -o-box-shadow: inset 0px 1px 1px #F5F4F4; + box-shadow: inset 0px 1px 1px #F5F4F4; +} + +.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type:hover span.name { + background: #C4C3C3; +} + +/*** Configure guest network -- tabs*/ +.multi-wizard.zone-wizard .setup-guest-traffic .ui-widget-content { + width: 682px; + height: 281px; + border-bottom: none; + border-right: none; + /*+placement:shift -1px -7px;*/ + position: relative; + left: -1px; + top: -7px; +} + +.multi-wizard.zone-wizard .setup-guest-traffic ul.ui-tabs-nav { + width: 456px; + /*+placement:shift -4px -8px;*/ + position: relative; + left: -4px; + top: -8px; +} + +.multi-wizard.zone-wizard .setup-guest-traffic .main-desc { + margin-top: 27px; + margin-left: -3px; +} + +.multi-wizard.zone-wizard .setup-guest-traffic .content { + margin-left: -4px; + margin-top: 2px; +} + +/*** Multi-edit*/ +.multi-wizard.zone-wizard .multi-edit { + width: 732px; + float: left; + margin-left: 0px; +} + +.multi-wizard.zone-wizard .multi-edit table { + float: left; + width: 98%; +} + +.multi-wizard.zone-wizard .multi-edit table td, +.multi-wizard.zone-wizard .multi-edit table th { + padding: 4px; +} + +.multi-wizard.zone-wizard .multi-edit table th { + padding-top: 11px; + padding-bottom: 8px; +} + +.multi-wizard.zone-wizard .multi-edit table input { + margin: 2px 0px 2px -5px; + padding: 2px 0px; +} + +.multi-wizard.zone-wizard .multi-edit .data { + float: left; + overflow: visible; +} + +.multi-wizard.zone-wizard .multi-edit .data-body { + margin: 0; +} + +.multi-wizard.zone-wizard .multi-edit .data-body .data-item { + float: left; +} + +.multi-wizard.zone-wizard .multi-edit .data-body .data-item td { + padding-top: 8px; + padding-bottom: 8px; +} + +.multi-wizard.zone-wizard .multi-edit .data-body .data-item td span { + font-size: 10px; + text-overflow: ellipsis; + max-width: 91px; +} + +/*** Select container fields*/ +.multi-wizard.zone-wizard .select-container .field { + width: 100%; + padding-bottom: 13px; + float: left; +} + +.multi-wizard.zone-wizard .select-container .field.odd { + background: #EBEFF5; +} + +.multi-wizard.zone-wizard .select-container .field .name { + float: left; + margin: 18px 0 0 12px; + width: 95px; + font-size: 11px; + text-align: left; + line-height: 13px; +} + +.multi-wizard.zone-wizard .select-container .field .value { + float: left; + position: relative; +} + +.multi-wizard.zone-wizard .select-container .field .value span { + display: block; + font-size: 11px; + color: #052060; + margin: 20px 0 0; +} + +.multi-wizard.zone-wizard .select-container .field .value label.error { + color: #FF0000; + font-size: 10px; + position: absolute; + display: block; + text-align: left; + margin: 2px 0 0 16px; + float: right; + /*+placement:shift 1px 31px;*/ + position: relative; + left: 1px; + top: 31px; + position: absolute; +} + +.multi-wizard.zone-wizard .select-container .field .value input, +.multi-wizard.zone-wizard .select-container .field .value select { + width: 316px; + height: 20px; + margin: 13px 13px 0 18px; + float: left; +} + +.multi-wizard.zone-wizard .select-container .field .range-edit .range-item { + width: 106px; + float: left; +} + +.multi-wizard.zone-wizard .select-container .field .range-edit .range-item input[type=text] { + width: 93px; + margin: 16px 0 0 17px; +} + +.multi-wizard.zone-wizard .select-container .field .value select { + width: 327px; + height: 21px; +} + +.multi-wizard.zone-wizard .select-container .field .value input[type=checkbox] { + float: left; + display: block; + width: 13px; +} + +.multi-wizard.zone-wizard .select-container .field .value.multi-range input { + float: left; + width: 137px; +} + +.multi-wizard.zone-wizard .select-container .field .value.multi-range span { + float: left; + margin: 13px 0 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array { + width: 360px; + display: inline-block; +} + +/*[clearfix]*/.multi-wizard.zone-wizard .select-container .field .select-array-item { + width: 175px; + height: 34px; + float: left; +} + +.multi-wizard.zone-wizard .select-container .field .select-array-item .name { + width: 127px; + float: right; + padding: 0; + margin: 11px 0 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array-item .value { + width: 41px; + float: right; + padding: 0; + margin: 0; +} + +.multi-wizard.zone-wizard .select-container .field .select-array-item .value input { + width: inherit; + margin: 12px 0 0 11px; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network { + background: #808080 url(../images/bg-gradients.png) 0px -264px; + visibility: hidden; + border: 1px solid #ADA7A7; + padding: 6px 20px 6px 11px; + font-size: 12px; + float: right; + margin: 14px 6px 0 0; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + color: #475765; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + cursor: pointer; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network { + padding: 10px 10px 0px; + background: url(../images/sprites.png) -6px -93px; + cursor: pointer; + position: relative; + float: right; + top: 27px; + margin: -26px 0 0; +} + +.multi-wizard.zone-wizard .setup-physical-network .select-container.disabled .button.remove.physical-network { + display: none; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.remove.physical-network:hover { + background-position: -6px -675px; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network:hover { + background-position: 0px -349px; + color: #000000; + /*+text-shadow:0px 1px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 2px #FFFFFF; + -webkit-text-shadow: 0px 1px 2px #FFFFFF; + -o-text-shadow: 0px 1px 2px #FFFFFF; + text-shadow: 0px 1px 2px #FFFFFF; +} + +.multi-wizard.zone-wizard .setup-physical-network .button.add.new-physical-network .icon { + padding: 10px; + background: url(../images/sprites.png) -44px -58px; +} + +/*** Review / launch*/ +.multi-wizard.zone-wizard .review .launch-container { + width: 98%; + max-height: 438px; + overflow: auto; + overflow-x: hidden; + float: left; + background: #ECECEC 0px -12px; + background: #F7F7F7; + background: -moz-linear-gradient(top, #f7f7f7 0%, #eaeaea 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eaeaea)); + background: -webkit-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%); + background: -o-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%); + background: -ms-linear-gradient(top, #f7f7f7 0%,#eaeaea 100%); + background: linear-gradient(to bottom, #f7f7f7 0%,#eaeaea 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); + margin: 11px 0 0 7px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border: 1px solid #CACACA; + border-radius: 4px 4px 4px 4px; +} + +.multi-wizard.zone-wizard .review .launch-container li { + width: 100%; + text-align: left; + padding: 15px 0 15px 12px; + font-size: 12px; + font-weight: bold; +} + +.multi-wizard.zone-wizard .review .launch-container li .icon { + /*[empty]display:;*/ + padding: 10px 21px 10px 10px; + background: url(../images/icons.png) -2px -217px; +} + +.multi-wizard.zone-wizard .review .launch-container li.loading .icon { + background: url(../images/ajax-loader-small.gif) no-repeat 2px 9px; +} + +.multi-wizard.zone-wizard .review .launch-container li.error .icon { + background-position: -2px -185px; +} + +.multi-wizard.zone-wizard .review .launch-container li.info .icon { + display: none; +} + +/*Tree view*/ +.tree-view { + width: 24%; + height: 98%; + overflow: auto; +} + +.tree-view.overflowScroll { + overflow: scroll; +} + +.tree-view ul { + display: block; + width: 85px; +} + +.tree-view ul li { + position: relative; + left: 21px; + font-size: 12px; + display: block; + margin: 7px 0 0; + clear: both; + width: 100%; +} + +.tree-view > ul { + /*+placement:shift 3px 40px;*/ + position: relative; + left: 3px; + top: 40px; +} + +.tree-view > ul > li { + left: 5px; +} + +.tree-view ul li .name { + float: left; + margin: 1px 0px 13px 17px; + padding: 6px 9px 6px 4px; + cursor: pointer; +} + +.tree-view ul li .name:hover { + text-decoration: underline; +} + +.tree-view ul li .name.selected { + background: #DDDCDD; + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; +} + +.tree-view ul li .expand { + width: 10px; + height: 10px; + float: left; + background: url(../images/buttons.png) -630px -245px; + margin: 4px 5px 0 0; + float: left; + cursor: pointer; + position: absolute; +} + +.tree-view ul li.expanded > .expand { + background-position: -631px -228px; +} + +#browser .tree-view div.toolbar div.text-search { + float: left; +} + +.detail-group table tbody { + border: none; +} + +/*Dialog-based list view*/ +.ui-dialog .list-view { + height: 515px !important; + overflow: auto; + overflow-x: hidden; +} + +.ui-dialog .list-view .toolbar { + top: 50px; + width: 854px; +} + +div.panel.ui-dialog div.list-view div.fixed-header { + top: 55px; + left: 35px; + width: 759px; + height: 49px; + background-color: #FFFFFF; + margin: 0; + z-index: 1; +} + +.ui-dialog .list-view table { + top: 9px !important; +} + +.ui-dialog.panel div.list-view div.data-table table { + width: 778px; + margin-top: 39px; +} + +.ui-dialog.panel div.list-view div.data-table table tbody tr.multi-edit-selected { + background: #C3E0FC; +} + +/*List-view: subselect dropdown*/ +.list-view .subselect { + width: 173px; + cursor: default; + display: block; + float: left; + background: #E8E8E8; + padding: 0; + margin: 0 0 0 -3px; + clear: both; + border: 1px solid #A8A7A7; + /*+border-radius:2px;*/ + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; +} + +.list-view .subselect:hover span { + color: initial; +} + +.list-view .subselect span { + margin: 4px 0 0 12px; + cursor: default; +} + +.list-view .subselect span.info { + background: none; +} + +.list-view .subselect span:hover { + color: initial; +} + +.list-view .subselect select { + width: 175px; + margin: 0 0 0 -11px; + font-size: 10px; +} + +/*Multi-edit*/ +div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit thead tr th, +div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBalancer div.multi-edit form table.multi-edit tbody tr td { + min-width: 100px; +} + +.multi-edit { + overflow: auto; +} + +.multi-edit > form { + position: relative; + clear: both; +} + +.multi-edit table.multi-edit { + border-top: none; +} + +.multi-edit table th { + min-width: 88px; + white-space: nowrap; + text-align: center; + text-indent: 0; +} + +.detail-group .multi-edit table td { + border-left: 1px solid #CDCCCC; +} + +.detail-view .multi-edit input { + width: 70%; +} + +.detail-view .multi-edit select { + width: 93%; + font-size: 10px; + min-width: 80px; +} + +.multi-edit input { + width: 85%; +} + +.multi-edit .range { + position: relative; +} + +.multi-edit .range .range-item { + float: left; +} + +.multi-edit .range input { + width: 35px; + margin-right: 2px; + position: relative; +} + +.multi-edit .range label { + display: block; + clear: both; + /*+placement:shift 3px 2px;*/ + position: relative; + left: 3px; + top: 2px; +} + +.multi-edit label.error { + font-size: 10px; + margin: 3px 0 0; + float: left; +} + +.multi-edit .data-table td span { + float: left; +} + +.multi-edit .data-table td.add-vm { + cursor: pointer; +} + +.multi-edit th.add-rule, +.multi-edit td.add-rule { + border-right: 1px solid #cdcccc; +} + +.multi-edit .data-table td.add-vm:hover { + color: #5FAAF7; +} + +.multi-edit .data-table .fixed-header { + display: none; +} + +.multi-edit .button.add-vm { + font-size: 10px; + font-weight: bold; + cursor: pointer; + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + border: 1px solid #858585; + border-top: none; + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + width: 74px; + text-indent: 0px; + text-align: center; + padding: 6px 0px 4px; + background: url(../images/bg-gradients.png) repeat-x 0px -220px; + /*+placement:shift 4px 0px;*/ + position: relative; + left: 4px; + top: 0px; +} + +.multi-edit .button.add-vm:hover { + background-position: 0px -241px; + /*+box-shadow:inset 0px 1px 1px #000000;*/ + -moz-box-shadow: inset 0px 1px 1px #000000; + -webkit-box-shadow: inset 0px 1px 1px #000000; + -o-box-shadow: inset 0px 1px 1px #000000; + box-shadow: inset 0px 1px 1px #000000; +} + +.multi-edit .button.custom-action { + background: url(../images/bg-gradients.png) 0px -271px; + border: 1px solid #B7B7B7; + color: #485867; + font-size: 10px; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; +} + +.multi-edit td.disabled .button.add-vm.custom-action { + /*+opacity:50%;*/ + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; + opacity: 0.5; + cursor: not-allowed; +} + +.multi-edit .button.custom-action:hover { + background: #808080 url(../images/bg-gradients.png); + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +.ui-dialog.multi-edit-add-list { + width: initial !important; +} + +.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane { + display: block; +} + +.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane .ui-dialog-buttonset { + width: initial; + padding-right: 15px; +} + +.ui-dialog.multi-edit-add-list .ui-dialog-buttonpane .ui-dialog-buttonset button { + top: 0; + left: 0; +} + +.multi-edit-add-list .ui-button.ok, +.multi-edit-add-list .ui-button.cancel { + float: right; + /*+placement:shift 506px -18px;*/ + position: relative; + left: 506px; + top: -18px; +} + +.multi-edit-add-list .ui-button.cancel { + /*+placement:shift 492px -18px;*/ + position: relative; + left: 492px; + border: none; + background: transparent; + color: #808B95; + font-weight: bold; +} + +.multi-edit-add-list div.form-container { + width: auto !important; + height: auto; + text-align: center; +} + +.multi-edit-add-list div.form-container div.name label { + display: inline; +} + +.multi-edit .data .data-body { + margin: auto auto auto 11px; + overflow: hidden; +} + +.panel.always-maximized .multi-edit .data .data-body { + width: 96%; + margin: 0 0 0 12px; +} + +.multi-edit .data .data-body .data-item { + margin-bottom: 14px; + border: 1px solid #CDCCCC; + position: relative; +} + +.multi-edit .data .data-body .data-item .loading-overlay { + background-position: 50% 50%; +} + +.multi-edit .data .data-body .data-item.loading { + height: 28px; + background: #FFFFFF url(../images/ajax-loader.gif) no-repeat center; + border: 1px solid #DDDDDD; +} + +.multi-edit .data .data-body .data-item.loading .label { + color: #808080; + font-size: 12px; + text-align: center; + text-indent: 19%; + margin: 12px 0 0; +} + +.multi-edit .data .data-body .data-item table { + margin: 0; + border: none; + width: 100%; + overflow: hidden; + background: #F0F1F2; +} + +.multi-edit .data .data-body .data-item tr { + background: #EFEFEF; + border: none; +} + +.multi-edit .data .data-body .data-item table tbody tr td { + background: #F0F1F2; + border-left: none; + border-right: 1px solid #CFC9C9; + height: 15px; + overflow: auto; +} + +.multi-edit .data .data-body .data-item > table tbody tr td span { + overflow: hidden; + max-width: 90%; + display: block; + float: left; + text-overflow: ellipsis; + white-space: nowrap; +} + +.multi-edit .data .data-body .data-item table tbody tr td.name { + padding-top: 9px; +} + +.multi-edit .data .data-body .data-item table tbody tr td.name span { + width: 53px; + color: #4C5D78; + font-weight: bold; +} + +.multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span { + color: #4C5D78; + font-weight: normal; + cursor: pointer; +} + +.multi-edit .data .data-body .data-item .expandable-listing table tbody tr td.name span:hover { + color: #0000FF; +} + +div#details-tab-aclRules table.multi-edit tr th.number, +div#details-tab-aclRules div.data-item table tr td.number { + width: 45px !important; + min-width: 45px !important; + max-width: 45px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.action, +div#details-tab-aclRules div.multi-edit table tr td.action { + width: 40px !important; + min-width: 40px !important; + max-width: 40px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.protocol, +div#details-tab-aclRules div.multi-edit table tr td.protocol { + width: 50px !important; + min-width: 50px !important; + max-width: 50px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.protocolnumber, +div#details-tab-aclRules div.multi-edit table tr td.protocolnumber { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.traffictype, +div#details-tab-aclRules div.multi-edit table tr td.traffictype { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.reason, +div#details-tab-aclRules div.multi-edit table tr td.reason { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.icmptype, div#details-tab-aclRules div.multi-edit table tr td.icmptype, +div#details-tab-aclRules div.multi-edit table tr th.icmpcode, div#details-tab-aclRules div.multi-edit table tr td.icmpcode { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules div.multi-edit table tr th.startport, div#details-tab-aclRules div.multi-edit table tr td.startport, +div#details-tab-aclRules div.multi-edit table tr th.endport, div#details-tab-aclRules div.multi-edit table tr td.endport { + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +div#details-tab-aclRules td.cidrlist span { + text-align: center; + width: 100%; +} + +.multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action { + cursor: pointer; + width: 28px; + height: 21px; + float: left; +} + +.multi-edit .data .data-body .data-item table tbody tr td.multi-actions .action span.icon { + background-image: url(../images/sprites.png); + cursor: pointer; + width: 28px; + height: 21px; + float: left; +} + +.multi-edit .data .data-body .data-item tr td .expand { + width: 14px; + height: 15px; + display: block; + cursor: pointer; + background: #FFFFFF url(../images/sprites.png) -541px -499px; + border: 1px solid #D0D0D0; + /*+border-radius:9px;*/ + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + float: left; + margin: -3px 0 0 11px; +} + +.multi-edit .data .data-body .data-item tr td.add-vm, +.multi-edit tr th.add-vm { + cursor: pointer; +} + +.multi-edit .data .data-body .data-item tr td .custom-action { + margin: -2px 0 0 0px; +} + +.multi-edit .data .data-body .data-item tr td.add-vm:hover { + color: #0060FF; + font-weight: bold; +} + +.multi-edit .data .data-body .data-item tr td.add-vm p { + text-indent: 0; + padding-left: 9px; + margin-top: 3px; + margin-bottom: 6px; +} + +.multi-edit .data .data-body .data-item tr td.multi-actions .icon { + /*+placement:shift -3px -2px;*/ + position: relative; + left: -3px; + top: -2px; +} + +.multi-edit .data .data-body .data-item .expandable-listing { + width: 99.8%; + border: 1px solid #CFC9C9; + max-height: 161px; + overflow: auto; + overflow-x: hidden; +} + +.multi-edit .data .data-body .data-item .expandable-listing tr { + width: 100%; + border: none; + margin: 0; + padding: 0; +} + +.multi-edit .data .data-body .data-item .expandable-listing tr td { + background: #DDE0E2; + border: none; + margin: 0; + text-indent: 37px; +} + +.multi-edit .data .data-body .data-item .expandable-listing tr.odd td { + background: #F2F0F0; +} + +.ui-tabs-panel .add-by { + font-size: 12px; + color: #536474; + width: 94%; + margin: 13px 0 0 14px; +} + +.ui-tabs-panel .add-by .selection { + width: 236px; + margin: 8px 0 0; +} + +.ui-tabs-panel .add-by .selection input { + margin: 0 6px 0 0; +} + +.ui-tabs-panel .add-by .selection label { + margin: 0 22px 0 0; +} + +/** Fix long table overflow*/ +.detail-view .multi-edit { + width: 100%; +} + +.detail-view .multi-edit table { + width: 97%; + max-width: inherit; +} + +.detail-view .multi-edit table tr th, +.detail-view .multi-edit table tr td { + width: 84px !important; + min-width: 84px !important; + max-width: 84px !important; + font-size: 10px; +} + +/* special case for 'Source CIDR' column - make it wide enough to fit a CIDR without ellipsizing*/ +.detail-view .multi-edit table tr th.cidrlist, +.detail-view .multi-edit table tr td.cidrlist { + min-width: 118px !important; + max-width: 118px !important; + padding: 0 0 0 0; +} +.detail-view .multi-edit td.cidrlist input { + width: 85%; +} + + +/** Header fields*/ +.multi-edit .header-fields { + position: relative; + /*+placement:shift 14px 11px;*/ + position: relative; + left: 14px; + top: 11px; +} + +.multi-edit .header-fields .form-container { + width: 96%; + height: 32px; + background: #E4E4E4; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border: 1px solid #D4CFCF; +} + +.multi-edit .header-fields .form-item { + padding: 4px 15px 3px 9px; + margin-bottom: 32px; + margin-right: 0; + float: left; +} + +.multi-edit .header-fields .form-item input, +.multi-edit .header-fields .form-item select { + margin-top: 4px; +} + +.multi-edit .header-fields .form-item .name, +.multi-edit .header-fields .form-item .value { + float: left; +} + +.multi-edit .header-fields .form-item .name { + font-size: 14px; + padding: 5px; + color: #55687A; +} + +/*Sortable*/ +.multi-edit table tbody tr td.reorder, +.multi-edit table thead tr th.reorder { + width: 16px !important; + min-width: 16px !important; + max-width: 16px !important; +} + +/*Security Rules*/ +.security-rules .multi-edit input { + width: 69px; + margin: 0 0 0 9px; +} + +.security-rules .multi-edit .range input { + width: 44px; + margin: 0; +} + +/*Recurring snapshots*/ +.recurring-snapshots { + display: inline-block; +} + +.recurring-snapshots .schedule .add-snapshot-actions { + width: 581px; + clear: both; + float: left; + font-size: 13px; + margin-bottom: 13px; + border-top: 1px solid #FFFFFF; +} + +.recurring-snapshots .schedule .add-snapshot-action { + /*+placement:shift -7px -34px;*/ + position: relative; + left: -7px; + top: -34px; + float: right; + cursor: pointer; + padding: 10px; +} + +.recurring-snapshots .schedule .add-snapshot-action.add { + color: #0000FF; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + font-weight: bold; +} + +.recurring-snapshots .schedule .add-snapshot-action.add:hover { + color: #1A85F4; +} + +.recurring-snapshots .schedule p { + font-size: 13px; + margin: 0; +} + +.recurring-snapshots .schedule .forms form { + font-size: 12px; + color: #4F6171; +} + +.recurring-snapshots .schedule .forms form select { + float: left; + margin: 3px 10px 3px 3px; + max-width: 100%; +} + +.recurring-snapshots .schedule .forms form input { + /*+placement:shift 1px 4px;*/ + position: relative; + left: 1px; + top: 4px; +} + +.recurring-snapshots .schedule .forms form label { + /*+placement:shift 5px 4px;*/ + position: relative; + left: 5px; + top: 4px; +} + +.recurring-snapshots .schedule .forms form label.error { + width: 100%; + float: left; + font-size: 10px; +} + +.recurring-snapshots .schedule .forms form .field { + width: 100%; + float: left; + margin: 8px 0 0; +} + +.recurring-snapshots .schedule .forms form .name { + float: left; + text-align: right; + width: 72px; + padding: 4px 0 0; + margin: 3px 14px 0 0; +} + +.recurring-snapshots .schedule .forms form .value { + width: 470px; + float: left; + text-align: left; +} + +.ui-dialog .recurring-snapshots .ui-widget-content { + padding: 0; + margin: 0; +} + +.recurring-snapshots .ui-button { + /*+placement:anchor-bottom-right 9px 9px;*/ + position: absolute; + right: 9px; + bottom: 9px; +} + +.recurring-snapshots .scheduled-snapshots { + clear: both; + position: relative; + top: -26px; +} + +.recurring-snapshots .scheduled-snapshots p { + font-weight: bold; + font-size: 12px; + /*+text-shadow:0px 2px 2px #FFFFFF;*/ + -moz-text-shadow: 0px 2px 2px #FFFFFF; + -webkit-text-shadow: 0px 2px 2px #FFFFFF; + -o-text-shadow: 0px 2px 2px #FFFFFF; + text-shadow: 0px 2px 2px #FFFFFF; +} + +.recurring-snapshots .scheduled-snapshots table { + border: none; + /*+placement:shift 0px -14px;*/ + position: relative; + top: -14px; + width: 100%; + margin: 0; +} + +.recurring-snapshots .scheduled-snapshots table td.actions div.action span.icon { + /*+placement:shift -3px -4px;*/ + position: relative; + left: -3px; + top: -4px; +} + +.recurring-snapshots .scheduled-snapshots tr { + padding: 0; + border: 0; + display: block; + width: 100%; + height: 38px; + margin: 22px 0 0; + display: none; +} + +.recurring-snapshots .scheduled-snapshots tr td { + border: none; + padding: 5px 0px 0 14px; + font-size: 12px; + word-break: keep-all; + word-wrap: normal; + text-indent: 0px; +} + +.recurring-snapshots .scheduled-snapshots tr td.keep { + min-width: 60px; +} + +.recurring-snapshots .scheduled-snapshots tr td.timezone { + min-width: 168px; + font-size: 12px; +} + +.recurring-snapshots .scheduled-snapshots tr td.timezone span { + font-size: 10px; +} + +.recurring-snapshots .scheduled-snapshots table tbody tr td.actions { + max-width: 22px !important; + min-width: 22px !important; +} + +.recurring-snapshots .scheduled-snapshots tr td.time { + min-width: 144px; + background: url(../images/sprites.png) no-repeat -536px -533px; + text-indent: 0.7em; +} + +.recurring-snapshots .scheduled-snapshots tr.daily td.time { + background-position: -537px -569px; +} + +.recurring-snapshots .scheduled-snapshots tr.weekly td.time { + background-position: -537px -605px; +} + +.recurring-snapshots .scheduled-snapshots tr.monthly td.time { + background-position: -537px -648px; +} + +.recurring-snapshots p { + text-align: left; + font-size: 14px; + line-height: 18px; + padding: 0 47px 0 0; + color: #475765; + margin-bottom: 16px; + /*+text-shadow:0px 3px 3px #FFFFFF;*/ + -moz-text-shadow: 0px 3px 3px #FFFFFF; + -webkit-text-shadow: 0px 3px 3px #FFFFFF; + -o-text-shadow: 0px 3px 3px #FFFFFF; + text-shadow: 0px 3px 3px #FFFFFF; + max-width: 550px; + display: block; +} + +.recurring-snapshots .ui-tabs ul { + position: relative; + margin: 0; + width: 100%; + padding: 0; + margin: 0; + display: block; +} + +.recurring-snapshots .ui-tabs ul li a { + width: 76px; + background: url(../images/sprites.png) no-repeat -521px -533px; +} + +.recurring-snapshots .ui-tabs ul li.disabled a { + /*+opacity:50%;*/ + filter: alpha(opacity=50); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + -moz-opacity: 0.5; + opacity: 0.5; +} + +.recurring-snapshots .ui-tabs ul li.disabled:hover a { + border: none; + background-color: transparent; + border: none; + /*+box-shadow:0px 0px;*/ + -moz-box-shadow: 0px 0px; + -webkit-box-shadow: 0px 0px; + -o-box-shadow: 0px 0px; + box-shadow: 0px 0px; + -moz-box-shadow: 0px 0px none; + -webkit-box-shadow: 0px 0px none; + -o-box-shadow: 0px 0px none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + cursor: default; +} + +.recurring-snapshots .ui-tabs ul li.daily a { + background-position: -522px -570px; +} + +.recurring-snapshots .ui-tabs ul li.weekly a { + background-position: -526px -605px; +} + +.recurring-snapshots .ui-tabs ul li.monthly a { + background-position: -528px -649px; +} + +.recurring-snapshots .ui-tabs div.ui-tabs-panel { + height: 144px; + width: 100%; + border: none; + background: #E9E9E9; +} + +.recurring-snapshots .ui-tabs div.ui-tabs-panel.ui-tabs-hide { + display: none; +} + +/*Upload volume*/ +.upload-volume .list-view { + margin-top: 5px !important; +} + +.upload-volume .listView-container { + background: #FFFFFF; + width: 823px; + margin: 71px 0px 20px 28px; + border: 1px solid #DADADA; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.upload-volume div.list-view .data-table div.fixed-header { + top: 115px !important; + left: 56px !important; + background: #FFFFFF !important; +} + +.upload-volume .data-table table.body { + margin-top: 66px !important; + margin-left: 19px; +} + +.upload-volume .list-view .toolbar { + top: 118px; + width: 801px; + left: 43px; + background: transparent; + border: none; +} + +.upload-volume .top-fields { + float: left; + clear: none; + margin-left: 24px; +} + +.upload-volume .top-fields .field { + float: left; + margin-right: 50px; +} + +.upload-volume .top-fields input { + float: right; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + padding: 2px; + width: 186px; +} + +.upload-volume .top-fields label, +.upload-volume .desc { + display: block; + float: left; + padding: 6px; + font-size: 12px; + color: #4C5D6C; + /*+text-shadow:0px 0px #FFFFFF;*/ + -moz-text-shadow: 0px 0px #FFFFFF; + -webkit-text-shadow: 0px 0px #FFFFFF; + -o-text-shadow: 0px 0px #FFFFFF; + text-shadow: 0px 0px #FFFFFF; +} + +.upload-volume .desc { + position: absolute; + width: 825px; + text-align: left; + top: 79px; + left: 32px; + border-top: 1px solid #CFCFCF; +} + +/*Network detail chat*/ +.network-chart { + width: 100%; + height: 100%; + position: relative; + background: url(../images/bg-network.png) no-repeat 38% 70px; +} + +.network-chart.static-nat { + background: url(../images/bg-network-nat.png) no-repeat 31% 62px; +} + +.network-chart ul { + width: 536px; + height: 421px; + position: absolute; + top: 0px; + left: 0px; +} + +.network-chart li { + display: block; + width: 147px; + height: 86px; + background: url(../images/buttons.png) no-repeat 0px -399px; +} + +.network-chart li.static-nat-enabled { + /*+placement:shift 31px 44px;*/ + position: relative; + left: 31px; + top: 44px; +} + +.network-chart li.static-nat-enabled .vmname { + /*+placement:shift 16px 41px;*/ + position: relative; + left: 16px; + top: 41px; + cursor: pointer; + max-width: 98px; + max-height: 21px; + padding: 7px; + font-size: 10px; + position: absolute; + overflow: hidden; + color: #485563; + font-weight: bold; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; + background: url(../images/bg-gradients.png) repeat-x 2px -221px; + color: #FFFFFF; + /*+border-radius:9px;*/ + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; +} + +.network-chart li.static-nat-enabled .vmname:hover { + background-position: 0px -946px; +} + +.network-chart li.static-nat-enabled .name { + background: url(../images/sprites.png) no-repeat -6px -460px; +} + +.network-chart li.static-nat-enabled .name span { + font-size: 11px; + padding: 0 0 0 25px; +} + +.network-chart li.disabled { + /*+opacity:100%;*/ + filter: alpha(opacity=100); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-opacity: 1; + opacity: 1; +} + +.network-chart li.firewall { + /*+placement:shift 282px 188px;*/ + position: relative; + left: 356px; + top: 188px; + position: absolute; +} + +.network-chart li.loadBalancing { + /*+placement:shift 167px 342px;*/ + position: relative; + left: 237px; + top: 342px; + position: absolute; +} + +.network-chart li.portForwarding { + /*+placement:shift 401px 342px;*/ + position: relative; + left: 480px; + top: 342px; + position: absolute; +} + +.network-chart li .name { + color: #4E5F6F; + width: 130px; + /*+text-shadow:0px 1px 1px #FCFCFC;*/ + -moz-text-shadow: 0px 1px 1px #FCFCFC; + -webkit-text-shadow: 0px 1px 1px #FCFCFC; + -o-text-shadow: 0px 1px 1px #FCFCFC; + text-shadow: 0px 1px 1px #FCFCFC; + /*+placement:shift 10px 11px;*/ + position: relative; + left: 10px; + top: 11px; +} + +.network-chart li.disabled .name { + color: #8695A5; + /*+placement:shift 5px 32px;*/ + position: relative; + left: 5px; + top: 32px; + text-decoration: line-through; + text-align: center; +} + +.network-chart li .view-details { + /*+placement:anchor-bottom-right 34px 19px;*/ + position: absolute; + right: 34px; + bottom: 19px; + cursor: pointer; + background: #F7F7F7; + background: rgb(247, 247, 247); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, rgba(247,247,247,1) 1%, rgba(234,234,234,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(234,234,234,1))); + background: -webkit-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + background: -o-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + background: -ms-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + background: linear-gradient(to bottom, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); + font-size: 11px; + padding: 8px 20px; + color: #000000; + border: 1px solid #A2A2A2; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} + +.network-chart li .view-details:hover { + background: #D5D5D5; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + /*+box-shadow:inset 0px 0px 4px #000000;*/ + -moz-box-shadow: inset 0px 0px 4px #000000; + -webkit-box-shadow: inset 0px 0px 4px #000000; + -o-box-shadow: inset 0px 0px 4px #000000; + box-shadow: inset 0px 0px 4px #000000; +} + +.network-chart li.disabled .view-details { + display: none; +} + +/*System Dashboard*/ +.system-dashboard { + height: 258px; + width: 962px; + display: block; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + /*+box-shadow:inset 0px 0px 1px #FFFFFF;*/ + -moz-box-shadow: inset 0px 0px 1px #FFFFFF; + -webkit-box-shadow: inset 0px 0px 1px #FFFFFF; + -o-box-shadow: inset 0px 0px 1px #FFFFFF; + box-shadow: inset 0px 0px 1px #FFFFFF; + position: relative; + margin: 18px 0 0 15px; +} + +.system-dashboard.zone { + height: 609px; + background-position: 0px -1423px; +} + +.system-dashboard-view .toolbar { + position: relative; +} + +.system-dashboard .head { + color: #000000; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + text-indent: 11px; + padding: 0px 0 12px; + /*+box-shadow:0px 0px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 0px 1px #FFFFFF; + -webkit-box-shadow: 0px 0px 1px #FFFFFF; + -o-box-shadow: 0px 0px 1px #FFFFFF; + box-shadow: 0px 0px 1px #FFFFFF; +} + +.project-view .system-dashboard .head { + color: #FFFFFF; + /*+text-shadow:0px -1px #000000;*/ + -moz-text-shadow: 0px -1px #000000; + -webkit-text-shadow: 0px -1px #000000; + -o-text-shadow: 0px -1px #000000; + text-shadow: 0px -1px #000000; + /*+box-shadow:none;*/ + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; + padding-top: 14px; +} + +.system-dashboard .view-more, +.system-dashboard .view-all { + float: right; + margin: -4px 19px 0 0; + cursor: pointer; + font-size: 13px; + font-weight: 100; + background: #DADADA repeat-x 0px -735px; + background: rgb(234, 234, 234); + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmQ2ZDYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); + background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(214,214,214,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(214,214,214,1))); + background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + background: -o-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + background: -ms-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(214,214,214,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#d6d6d6',GradientType=0 ); + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + border: 1px solid #B5B5B5; +} + +.system-dashboard .view-more:hover, +.system-dashboard .view-all:hover { + background-position: 0px -763px; + /*+box-shadow:inset 0px 1px 1px #000000;*/ + -moz-box-shadow: inset 0px 1px 1px #000000; + -webkit-box-shadow: inset 0px 1px 1px #000000; + -o-box-shadow: inset 0px 1px 1px #000000; + box-shadow: inset 0px 1px 1px #000000; + background: #C1C1C1; +} + +.system-dashboard .status_box .view-all { + /*+placement:shift 18px 110px;*/ + position: relative; + left: 18px; + top: 110px; + width: 83%; + position: absolute; + text-align: center; + padding: 8px 0; +} + +.system-dashboard .status_box { + font-size: 14px; + margin: 10px 0 0; + background: transparent; + border: none; +} + +.system-dashboard .status_box li { + height: 178px; + width: 228px; + padding: 0; + margin: 0 0 0 8px; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + position: relative; + border: 1px solid #C6C6C6; + float: left; +} + +.system-dashboard.zone .status_box li { + margin-bottom: 8px; + height: 152px; + background-color: #F4F4F4; +} + +.system-dashboard.zone .status_box li .icon { + background: url(../images/infrastructure-icons.png) no-repeat 0px 0px; + padding: 65px 80px 5px; + /*+placement:shift 31px 19px;*/ + position: relative; + left: 51px; + top: 19px; + position: absolute; + /*+opacity:56%;*/ + filter: alpha(opacity=56); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=56); + -moz-opacity: 0.56; + opacity: 0.56; +} + +.system-dashboard .status_box li span.label { + color: #CCCFD4; + font-size: 12px; +} + +.system-dashboard .status_box li span.total { + font-size: 25px; +} + +.system-dashboard .status_box li span.label { + color: #CCCFD4; + font-size: 12px; +} + +.system-dashboard .status_box li span.unit { + color: #C1C4C9; + font-size: 13px; +} + +.system-dashboard .status_box li span.header { + margin: 1px 0 0; + /*+placement:shift 13px 5px;*/ + position: relative; + left: 13px; + top: 13px; + font-weight: 100; +} + +.system-dashboard.zone .status_box li span.header { + font-size: 14px; + color: #4F4F4F; +} + +.system-dashboard .status_box li span.status { + font-size: 27px; + /*+placement:shift 13px 141px;*/ + position: relative; + left: 13px; + top: 141px; + position: absolute; + color: #25FF25; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +.system-dashboard .status_box li span.instance.total { + /*+placement:shift 12px 32px;*/ + position: relative; + left: 12px; + top: 32px; + position: absolute; +} + +.system-dashboard .status_box li span.instance.label { + /*+placement:shift 15px 53px;*/ + position: relative; + left: 15px; + top: 53px; + position: absolute; +} + +.system-dashboard .status_box li span.vcpu-hours.total { + /*+placement:shift 13px 76px;*/ + position: relative; + left: 13px; + top: 76px; + position: absolute; +} + +.system-dashboard .status_box li span.vcpu-hours.label { + /*+placement:shift 14px 95px;*/ + position: relative; + left: 14px; + top: 95px; + position: absolute; +} + +.system-dashboard .status_box li span.gb-hours.total { + /*+placement:shift 106px 77px;*/ + position: relative; + left: 106px; + top: 77px; + position: absolute; +} + +.system-dashboard .status_box li span.gb-hours.label { + /*+placement:shift 106px 95px;*/ + position: relative; + left: 106px; + top: 95px; + position: absolute; +} + +.system-dashboard .status_box li span.overview.total { + font-size: 56px; + /*+placement:shift 9px 29px;*/ + position: relative; + left: 9px; + top: 29px; + position: absolute; + font-weight: 100; + color: #2B7DAF; + /*+text-shadow:0px -1px 2px #FFFFFF;*/ + -moz-text-shadow: 0px -1px 2px #FFFFFF; + -webkit-text-shadow: 0px -1px 2px #FFFFFF; + -o-text-shadow: 0px -1px 2px #FFFFFF; + text-shadow: 0px -1px 2px #FFFFFF; +} + +.system-dashboard .status_box li.capacity span.overview.total { + font-size: 32px; +} + +.system-dashboard .status_box li span.overview.label { + /*+placement:shift 52px 79px;*/ + position: relative; + left: 52px; + top: 79px; + position: absolute; +} + +.system-dashboard .status_box li span.used.total { + /*+placement:shift 14px 130px;*/ + position: relative; + left: 14px; + top: 130px; + font-size: 30px; + position: absolute; +} + +.system-dashboard .status_box li span.used.label { + /*+placement:shift 14px 153px;*/ + position: relative; + left: 14px; + top: 153px; + position: absolute; +} + +.system-dashboard .status_box li span.used.unit { + /*+placement:shift 67px 135px;*/ + position: relative; + left: 67px; + top: 135px; + position: absolute; +} + +.system-dashboard .status_box li span.available.unit { + /*+placement:shift 159px 135px;*/ + position: relative; + left: 159px; + top: 135px; + position: absolute; +} + +.system-dashboard .status_box li span.available.total { + /*+placement:shift 97px 130px;*/ + position: relative; + left: 97px; + top: 130px; + font-size: 30px; + position: absolute; +} + +.system-dashboard .status_box li span.available.label { + /*+placement:shift 97px 153px;*/ + position: relative; + left: 97px; + top: 153px; + position: absolute; +} + +.system-dashboard-view .socket-info { + width: 100%; + height: 239px; + overflow: auto; + float: left; + padding: 0; +} + +.system-dashboard-view .socket-info > .title { + padding: 8px; + font-size: 13px; +} + +.system-dashboard-view .socket-info li { + width: 139px; + padding: 13px; + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + margin: 7px; + border: 1px solid #CCC; + background: #EFEFEF; + float: left; +} + +.system-dashboard-view .socket-info li > div { + text-decoration: none; + float: left; +} + +.system-dashboard-view .socket-info li .name { + width: 100%; + font-weight: 100; + margin-bottom: 13px; +} + +.system-dashboard-view .socket-info li .hosts, +.system-dashboard-view .socket-info li .sockets { + width: 54px; + /*[empty]color:;*/ +} + +.system-dashboard-view .socket-info li div .title { + color: #424242; + border: none; + font-size: 13px; + padding-bottom: 3px; +} + +.add-zone-resource .form-container { + height: auto !important; + display: inline-block; + overflow: visible; +} + +.add-zone-resource .form-container form { + display: inline-block; + height: auto; +} + +.add-zone-resource .head { + width: 100%; + margin-bottom: 7px; + display: inline-block; + border-bottom: 1px solid #AFBDCA; + /*+box-shadow:0px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px #FFFFFF; + -o-box-shadow: 0px 1px #FFFFFF; + box-shadow: 0px 1px #FFFFFF; +} + +.add-zone-resource .head span { + float: left; + font-size: 14px; + text-indent: 5px; + padding: 10px 0 18px; +} + +.add-zone-resource .head select { + float: left; + margin: -3px 0 6px 13px; + margin: 8px 0 0 9px; +} + +/** Infrastructure icons*/ +.system-dashboard.zone .status_box li.zones .icon { + background-position: -36px -105px; +} + +.system-dashboard.zone .status_box li.pods .icon { + background-position: -229px -105px; +} + +.system-dashboard.zone .status_box li.clusters .icon { + background-position: -411px -96px; +} + +.system-dashboard.zone .status_box li.hosts .icon { + background-position: -601px -102px; +} + +.system-dashboard.zone .status_box li.primary-storage .icon { + background-position: -32px -404px; + /*+placement:shift 37px 68px;*/ + position: relative; + left: 37px; + top: 68px; +} + +.system-dashboard.zone .status_box li.sockets .icon { + background-position: -14px -581px; +} + +.system-dashboard.zone .status_box li.secondary-storage .icon { + background-position: -216px -404px; + /*+placement:shift 37px 68px;*/ + position: relative; + left: 37px; + top: 68px; +} + +.system-dashboard.zone .status_box li.system-vms .icon, +.system-dashboard.zone .status_box li.management-servers .icon { + background-position: -408px -399px; +} + +.system-dashboard.zone .status_box li.virtual-routers .icon { + background-position: -601px -400px; +} + +/*Projects +** View switcher*/ +#header .view-switcher { + font-size: 12px; + color: #55687B; + float: left; + margin: 11px 0 0 18px; +} + +#header div.view-switcher { + height: 39px; + background-position: 0px -5px; + /*+placement:shift 0px -10px;*/ + position: relative; + left: 0px; + top: -10px; + margin-right: 9px; + display: none; +} + +#header div.view-switcher.alt { + background-position: 0px -41px; +} + +#header div.view-switcher div { + float: left; + /*[empty]display:;*/ + width: 126px; + padding: 13px 0 0; + margin: 0; + text-indent: 17px; + position: relative; + /*+text-shadow:0px -1px 1px #2D2D2D;*/ + -moz-text-shadow: 0px -1px 1px #2D2D2D; + -webkit-text-shadow: 0px -1px 1px #2D2D2D; + -o-text-shadow: 0px -1px 1px #2D2D2D; + text-shadow: 0px -1px 1px #2D2D2D; +} + +#header div.view-switcher .select.active { + color: #FFFFFF; + font-weight: bold; + /*+text-shadow:0px -1px 1px #5B5B5B;*/ + -moz-text-shadow: 0px -1px 1px #5B5B5B; + -webkit-text-shadow: 0px -1px 1px #5B5B5B; + -o-text-shadow: 0px -1px 1px #5B5B5B; + text-shadow: 0px -1px 1px #5B5B5B; +} + +#header div.view-switcher div span.icon { + background: url(../images/icons.png) no-repeat; + width: 10px; + height: 10px; + padding: 0 19px 0 0; + top: 0; + /*+placement:shift -4px 0px;*/ + position: relative; + left: -4px; + top: 0px; +} + +#header div.view-switcher div.default-view span.icon { + background-position: -23px 0px; +} + +#header div.view-switcher div.project-view span.icon { + background-position: -24px 0px !important; +} + +#header div.view-switcher div.select span.icon { + background-position: -47px 0px; +} + +#header .view-switcher span { + padding: 0 13px 0 0; + background-repeat: repeat-x; +} + +#header .view-switcher select { + max-width: 120px; + margin: 6px 3px 0 -21px; + padding: 3px 0 4px; +} + +/*** View switcher (drop-down)*/ +.project-switcher, .domain-switcher { + float: left; + width: 223px; + padding: 9px 17px 0 19px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} + +.project-switcher label, .domain-switcher label { + top: 29px; + color: #FFFFFF; + font-size: 13px; + float: left; + margin-right: 7px; + margin-top: 5px; +} + +.project-switcher select, .domain-switcher select { + width: 70%; + float: left; + margin-top: 0px; + border: 1px solid #393939; + /*+text-shadow:0px -1px 1px #373737;*/ + -moz-text-shadow: 0px -1px 1px #373737; + -webkit-text-shadow: 0px -1px 1px #373737; + -o-text-shadow: 0px -1px 1px #373737; + text-shadow: 0px -1px 1px #373737; + background: #515151; + font-size: 13px; + font-weight: 100; + color: #FFFFFF; +} + +/*** Select project*/ +.project-selector { + display: inline-block; +} + +.project-selector-dialog .ui-widget-content { + padding: 0 !important; +} + +.project-selector .toolbar { + width: 420px; + position: relative; + background: transparent; + border: none; + border-bottom: 1px solid #93A4B4; + /*+box-shadow:0px 2px #FFFFFF;*/ + -moz-box-shadow: 0px 2px #FFFFFF; + -webkit-box-shadow: 0px 2px #FFFFFF; + -o-box-shadow: 0px 2px #FFFFFF; + box-shadow: 0px 2px #FFFFFF; + -moz-box-shadow: 0px 2px 0px #FFFFFF; + -webkit-box-shadow: 0px 2px 0px #FFFFFF; + -o-box-shadow: 0px 2px 0px #FFFFFF; +} + +.project-selector .search input[type=text] { + /*+border-radius:3px;*/ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + border-radius: 3px 3px 3px 3px; + width: 192px; + height: 18px; + margin: 6px 0 0 105px; + /*+box-shadow:0px 1px 1px #FFFFFF;*/ + -moz-box-shadow: 0px 1px 1px #FFFFFF; + -webkit-box-shadow: 0px 1px 1px #FFFFFF; + -o-box-shadow: 0px 1px 1px #FFFFFF; + box-shadow: 0px 1px 1px #FFFFFF; + border: 1px solid #9DADBB; + float: left; +} + +.project-selector .search input[type=submit] { + display: block; + float: left; + border: none; + cursor: pointer; + margin: 6px 0 0; + background: url(../images/sprites.png) no-repeat -601px -328px; + width: 25px; + height: 22px; + border-left: 1px solid #283979; + /*+placement:shift -2px 0px;*/ + position: relative; + left: -2px; + top: 0px; + cursor: pointer; +} + +.project-selector .listing { + margin: 15px; + border: 1px solid #D0D0D0; + position: relative; +} + +.project-selector .listing .data { + width: 100%; + height: 275px; + background: #F2F0F0; + overflow: auto; + overflow-x: hidden; + margin: 18px 0 0; +} + +.project-selector .listing .data ul { + text-align: left; + font-size: 11px; +} + +.project-selector .listing .data ul li { + padding: 10px 0 10px 7px; + cursor: pointer; + font-size: 12px; +} + +.project-selector .listing .data ul li.odd { + background: #DFE1E3; +} + +.project-selector .listing .data ul li:hover { + background: #CBDDF3; + border-top: 1px solid #FFFFFF; + border-bottom: 1px solid #BABFD9; + padding: 9px 0 9px 7px; +} + +.project-selector .listing .header { + width: 379px; + background: url(../images/bg-gradients.png) repeat-x 0px -164px; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + text-align: left; + color: #4F6171; + font-size: 11px; + padding: 3px 2px 3px 7px; + border-bottom: 1px solid #FFFFFF; + position: absolute; + left: 0; +} + +.project-selector .button.cancel { + color: #808080; + background: #B6B6B6 url("../images/gradients.png") repeat 0 -480px; + border: 1px solid #AAAAAA; + border-radius: 4px 4px 4px 4px; + font-size: 13px; + font-weight: bold; + padding: 8px 20px; + float: none; + cursor: pointer; + color: #838181; + left: 170px; + top: -8px; + width: 54px; + margin: auto auto 17px; +} + +.project-selector .button.cancel:hover { + color: #3A3A3A; +} + +/*** Resource management*/ +.project-dashboard .resources form { + background: #FFFFFF; + width: 87%; + /*+border-radius:11px;*/ + -moz-border-radius: 11px; + -webkit-border-radius: 11px; + -khtml-border-radius: 11px; + border-radius: 11px; + border-radius: 11px 11px 11px 11px; + padding: 26px; + margin-top: 17px; + margin-left: 22px; + /*+box-shadow:inset 0px 3px 4px #979797;*/ + -moz-box-shadow: inset 0px 3px 4px #979797; + -webkit-box-shadow: inset 0px 3px 4px #979797; + -o-box-shadow: inset 0px 3px 4px #979797; + box-shadow: inset 0px 3px 4px #979797; + display: inline-block; +} + +.project-dashboard .resources form .field { + width: 100%; + float: left; + clear: both; + margin: auto auto 30px; +} + +.project-dashboard .resources form label { + float: left; +} + +.project-dashboard .resources form input[type=text] { + float: right; + width: 176px; + font-size: 16px; + margin: 0 287px 0 0; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #C6C6C6; + padding: 6px; +} + +.project-dashboard .resources form input[type=submit] { + display: block; + border: none; + background: transparent url(../images/bg-gradients.png) 0px -220px; + float: left; + padding: 9px 20px; + cursor: pointer; + color: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + clear: both; +} + +.detail-view .project-dashboard .resources form { + width: 83%; + border-bottom: 1px solid #DBDBDB; +} + +.detail-view .project-dashboard .resources form .field input { + margin-right: 105px; +} + +/*** Dashboard*/ +.project-dashboard .toolbar { + position: relative; +} + +.project-dashboard .ui-tabs { + /*+placement:shift 10px -31px;*/ + position: relative; + left: 10px; + top: -31px; +} + +.project-view .project-dashboard .ui-tabs .multi-edit table td { + background: #EAEAEA; +} + +.project-dashboard-view .overview-area { + float: left; +} + +.project-dashboard-view .compute-and-storage .system-dashboard, +.project-dashboard-view .users .system-dashboard { + width: 510px; + height: 230px; + float: left; + background: #777E88; +} + +.project-dashboard-view .compute-and-storage .system-dashboard ul, +.project-dashboard-view .users .system-dashboard ul { + height: 162px; + margin: 14px 0 0; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li, +.project-dashboard-view .users .system-dashboard li { + width: 156px; + height: 161px; + background: #3D4045; + color: #FFFFFF; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .icon, +.project-dashboard-view .users li .icon { + width: 100px; + height: 76px; + /*+placement:shift 27px 20px;*/ + position: relative; + left: 27px; + top: 20px; + position: absolute; + background: url(../images/sprites.png) no-repeat 2px -1039px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.storage .icon { + background-position: -89px -1036px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.bandwidth .icon { + background-position: -184px -1036px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview { + width: 100%; + height: 53px; + position: relative; + margin: 81px 0 0; + color: #FFFFFF; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .total { + font-size: 28px; + /*+placement:shift 30px 21px;*/ + position: relative; + left: 30px; + top: 21px; + position: absolute; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li.storage .overview .label { + font-size: 13px; + color: #C3C1C1; + /*+placement:shift 91px 33px;*/ + position: relative; + left: 91px; + top: 33px; + position: absolute; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item { + float: left; + margin: 12px 0 0 20px; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .total { + font-size: 24px; + font-weight: bold; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item .label { + font-size: 11px; + margin: 4px 0 0; + color: #C7C7C7; +} + +.project-dashboard-view .compute-and-storage .system-dashboard li .overview .overview-item.running .label { + color: #2BFF2B; + /*[empty]background-position:;*/ +} + +.project-dashboard-view .users .system-dashboard { + width: 509px; + height: 100%; + clear: both; +} + +.project-dashboard-view .users .system-dashboard ul { + overflow-y: auto; +} + +.project-dashboard-view .users .system-dashboard li { + width: 86px; + height: 138px; + margin-bottom: 24px; + margin-left: 6px; +} + +.project-dashboard-view .users .system-dashboard li .icon { + background-position: -306px -1044px; + left: 16px; +} + +.project-dashboard-view .users .system-dashboard li .header { + width: 77px; + max-width: 77px; + /*+placement:shift 7px 110px;*/ + position: relative; + left: 7px; + top: 110px; + position: absolute; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +/**** Info box*/ +.info-boxes { + float: right; + width: 233px; + height: 551px; + margin: 21px 5px 0 0; +} + +.info-boxes .info-box { + display: inline-block; + border: 1px solid #B3C3D0; + /*+box-shadow:inset 0px -1px 7px #A7A7A7;*/ + -moz-box-shadow: inset 0px -1px 7px #A7A7A7; + -webkit-box-shadow: inset 0px -1px 7px #A7A7A7; + -o-box-shadow: inset 0px -1px 7px #A7A7A7; + box-shadow: inset 0px -1px 7px #A7A7A7; + background: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; +} + +.info-boxes .info-box.events { + margin-top: 4px; + height: 323px; + width: 228px; +} + +.info-boxes .info-box.events ul { + max-height: 295px; + overflow: auto; + overflow-x: hidden; +} + +.info-boxes .info-box ul { + margin: 0 0 3px 2px; + height: auto; + display: inline-block; +} + +.info-boxes .info-box ul li { + width: 224px; + margin: 0 2px 0 0; + display: inline-block; + border-bottom: 1px solid #BDD2DF; + border-top: 1px solid #FFFFFF; +} + +.info-boxes .info-box ul li.odd { + background: #ECECEC; +} + +.info-boxes .info-box .button { + background: url(../images/bg-gradients.png) 0px -734px; + color: #FFFFFF; + border: 1px solid #82A3C7; + /*+text-shadow:0px 1px 1px #000000;*/ + -moz-text-shadow: 0px 1px 1px #000000; + -webkit-text-shadow: 0px 1px 1px #000000; + -o-text-shadow: 0px 1px 1px #000000; + text-shadow: 0px 1px 1px #000000; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + /*+box-shadow:inset 0px 1px 1px #85ACC4;*/ + -moz-box-shadow: inset 0px 1px 1px #85ACC4; + -webkit-box-shadow: inset 0px 1px 1px #85ACC4; + -o-box-shadow: inset 0px 1px 1px #85ACC4; + box-shadow: inset 0px 1px 1px #85ACC4; + padding: 2px 6px 3px 3px; + font-size: 10px; + cursor: pointer; + font-weight: bold; + float: right; + margin: 0 14px 0 0; +} + +.info-boxes .info-box .button span { + /*+placement:shift 0px 2px;*/ + position: relative; + left: 0px; + top: 2px; + float: left; +} + +.info-boxes .info-box .title .button { + margin: 4px 6px 0 3px; +} + +.info-boxes .info-box .title .button span { + color: #FFFFFF; + font-size: 10px; + margin: 0; + padding: 0; + /*+placement:shift 1px 1px;*/ + position: relative; + left: 1px; + top: 1px; +} + +.info-boxes .info-box .button:hover { + background-position: 0px -766px; +} + +.info-boxes .info-box .button .arrow { + width: 16px; + height: 13px; + float: right; + /*+placement:shift 0px 0px;*/ + position: relative; + left: 0px; + top: 0px; + background: url(../images/sprites.png) no-repeat -455px -84px; +} + +.info-boxes .info-box ul li .total, +.info-boxes .info-box ul li .date { + width: 52px; + height: 36px; + float: left; + font-size: 24px; + color: #647C91; + border-right: 1px solid #BDD2DF; + /*+placement:shift;*/ + position: relative; + left: 0; + top: 0; + text-align: right; +} + +.info-boxes .info-box ul li .date { + font-size: 11px; + text-align: center; + margin: 1px 0 0; +} + +.info-boxes .info-box ul li .date span { + /*+placement:shift 0px 11px;*/ + position: relative; + left: 0px; + top: 11px; +} + +.info-boxes .info-box ul li .desc { + color: #606060; + font-size: 12px; + /*+placement:shift 5px 8px;*/ + position: relative; + left: 5px; + top: 8px; + display: inline-block; + padding-bottom: 13px; + max-width: 153px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.info-boxes .info-box ul li .total span { + /*+placement:shift -5px 7px;*/ + position: relative; + left: -5px; + top: 7px; +} + +.info-boxes .info-box .title { + height: 27px; + border-bottom: 1px solid #BDD2DF; +} + +.info-boxes .info-box .title span { + /*+placement:shift 8px 6px;*/ + position: relative; + left: 8px; + top: 6px; + font-size: 12px; + font-weight: bold; + color: #4E748C; +} + +/*** New project form*/ +.new-project { + display: inline-block; + margin: 0 0 20px 30px; +} + +.new-project form { + margin: 0; +} + +.ui-dialog .new-project { + text-align: left; +} + +.ui-dialog .new-project .add-by { + font-size: 12px; + color: #5E6D7D; + margin-left: 11px; +} + +.ui-dialog .new-project .add-by input { + margin-right: 8px; +} + +.ui-dialog .new-project .add-by label { + margin-right: 12px; +} + +.new-project .title { + color: #3497E6; + font-size: 26px; + /*+text-shadow:0px 1px 2px #D6D6D6;*/ + -moz-text-shadow: 0px 1px 2px #D6D6D6; + -webkit-text-shadow: 0px 1px 2px #D6D6D6; + -o-text-shadow: 0px 1px 2px #D6D6D6; + text-shadow: 0px 1px 2px #D6D6D6; + letter-spacing: 0px; + margin: 10px 0 32px; +} + +.new-project .field { + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + width: 686px; + display: inline-block; + background: #DFDFDF; + margin: -2px 0 -4px auto; +} + +#new-project-review-tabs-resouces { + background: #D2D2D2; + height: 225px; +} + +.new-project .resources .ui-widget-content { + background: #FFFFFF; +} + +.new-project .resources .field { + height: 39px; + padding: 0; +} + +.new-project .field span.value { + color: #475765; + /*+placement:shift 21px 20px;*/ + position: relative; + left: 21px; + top: 20px; +} + +.new-project .field label { + display: block; + width: 104px; + height: 59px; + color: #5B5B5B; + float: left; + background: #D2D2D2; + text-align: right; + padding: 20px 24px 0 0; +} + +.new-project .resources .field label { + font-size: 14px; + height: auto; + padding: 10px 14px 14px 40px; +} + +.new-project .field label.error { + color: #FF0000; + font-size: 9px; + /*+placement:displace 154px 29px;*/ + position: absolute; + margin-left: 154px; + margin-top: 29px; + background: transparent; + width: auto; + height: auto; +} + +.new-project .field input[type=text] { + background: #FFFFFF 0px 7px; + /*+border-radius:5px;*/ + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -khtml-border-radius: 5px; + border-radius: 5px; + border-radius: 5px 5px 5px 5px; + font-size: 14px; + border: 1px solid #E2E1DF; + /*+box-shadow:inset 0px 1px #A1A1A1;*/ + -moz-box-shadow: inset 0px 1px #A1A1A1; + -webkit-box-shadow: inset 0px 1px #A1A1A1; + -o-box-shadow: inset 0px 1px #A1A1A1; + box-shadow: inset 0px 1px #A1A1A1; + -moz-box-shadow: inset 0px 1px 0px #A1A1A1; + -webkit-box-shadow: inset 0px 1px 0px #A1A1A1; + -o-box-shadow: inset 0px 1px 0px #A1A1A1; + width: 506px; + height: 20px; + margin: 17px 25px 0 0; + float: right; + border: 1px solid #C7C7C7; +} + +.new-project .resources .field input[type=text] { + margin: 6px 9px 0 0; +} + +.new-project .button.cancel { + color: #808080; + background: transparent; + font-size: 12px; + font-weight: bold; + float: left; + cursor: pointer; + color: #838181; + /*+placement:shift 488px 9px;*/ + position: relative; + left: 488px; + top: 9px; + left: 480px; + margin: 19px 0 0 40px; +} + +.new-project .button.cancel:hover { + color: #3A3A3A; +} + +.new-project input[type=submit], +.new-project .button.confirm { + display: inline-block; + height: 31px; + border: none; + /*+placement:float-right 63px 18px;*/ + float: right; + position: relative; + left: 63px; + top: 18px; + color: #FFFFFF; + /*+text-shadow:0px -1px 1px #465259;*/ + -moz-text-shadow: 0px -1px 1px #465259; + -webkit-text-shadow: 0px -1px 1px #465259; + -o-text-shadow: 0px -1px 1px #465259; + text-shadow: 0px -1px 1px #465259; + background: #0049FF url(../images/gradients.png) 0px -317px; + font-size: 13px; + font-weight: bold; + border: 1px solid #0069CF; + border-top: 1px solid #0070FC; + /*+border-radius:9px;*/ + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + -khtml-border-radius: 9px; + border-radius: 9px; + border-radius: 9px 9px 9px 9px; + margin: 0px 63px 0 0; + cursor: pointer; +} + +.new-project input[type=submit]:hover, +.new-project .button.confirm:hover { + background-position: -3px -369px; +} + +.new-project .button { + cursor: pointer; +} + +.new-project .button.confirm { + display: block; + height: 27px; + padding: 13px 10px 0px 12px; +} + +.new-project .button.confirm.next { + padding: 10px 34px 0px 29px; +} + +.new-project .review .button.confirm.next { + /*+placement:shift 25px 11px;*/ + position: relative; + left: 25px; + top: 11px; +} + +.new-project .review .ui-tabs { + /*+placement:shift -29px -31px;*/ + position: relative; + left: -29px; + top: -31px; +} + +.new-project .review .ui-tabs .ui-widget-content { + width: 695px; + height: 185px; +} + +.new-project .review .ui-tabs .ui-widget-content.ui-tabs-hide { + display: none; +} + +.new-project .review .ui-tabs ul { + text-align: left; + /*+placement:shift 0px -2px;*/ + position: relative; + left: 0px; + top: -2px; +} + +.new-project .review .ui-tabs .list-view { + width: 688px; + height: 185px !important; +} + +.new-project .review .ui-tabs .list-view .fixed-header { + position: absolute; + z-index: 1000; + height: 58px; + background: #FFFFFF; + top: -22px; +} + +.new-project .review .ui-tabs .list-view .data-table table { + width: 669px; + margin: 31px 0 -1px; +} + +.new-project .review .ui-tabs .list-view .data-table table .edit { + width: 132px; + background: #FFFFFF; + /*+placement:shift 14px 0px;*/ + position: relative; + left: 14px; + top: 0px; +} + +.new-project .review .ui-tabs .list-view .data-table table .edit select { + width: 95px; + height: 20px; + float: left; + background: #FFFFFF; + border: 1px solid #B2B2B2; +} + +.new-project .review .ui-tabs .list-view .data-table table .edit .action { + float: left; + margin: 0; + padding: 0; + /*+placement:shift 14px 0px;*/ + position: relative; + left: 14px; + top: 0px; + height: 20px; +} + +.new-project .review .ui-tabs .list-view .toolbar { + display: none; +} + +.new-project .review .project-data { + padding: 16px; + background: #F4F4F4; + margin: 0; + /*+placement:shift -19px -13px;*/ + position: relative; + left: -19px; + top: -13px; +} + +.new-project .review .project-data .field { + width: 677px; + margin: auto; +} + +.new-project .button.later { + color: #808080; + background: url(../images/bg-gradients.png) 0px -261px; + border: 1px solid #B1B1B1; + /*+box-shadow:inset 0px 2px 2px #FFFFFF;*/ + -moz-box-shadow: inset 0px 2px 2px #FFFFFF; + -webkit-box-shadow: inset 0px 2px 2px #FFFFFF; + -o-box-shadow: inset 0px 2px 2px #FFFFFF; + box-shadow: inset 0px 2px 2px #FFFFFF; + float: right; + font-size: 13px; + margin: 19px -40px 0 0; + padding: 13px 7px 14px 8px; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; +} + +.new-project .button.later:hover { + color: #000000; + /*+box-shadow:inset 0px 1px 1px #A1A1A1;*/ + -moz-box-shadow: inset 0px 1px 1px #A1A1A1; + -webkit-box-shadow: inset 0px 1px 1px #A1A1A1; + -o-box-shadow: inset 0px 1px 1px #A1A1A1; + box-shadow: inset 0px 1px 1px #A1A1A1; + background-position: 0px -86px; +} + +.new-project input[type=submit]:hover { + background-position: -3px -369px; +} + +.new-project .resources input[type=submit] { + display: none; +} + +.new-project .multi-edit { + width: 671px; +} + +.new-project .multi-edit .data { + width: 700px; +} + +.new-project .multi-edit .data .data-item { + margin: 0; + border: none; + border: 1px solid #D2D2D2; +} + +.new-project .multi-edit .data .data-item.even td { + background: #DFE1E3; +} + +/*Tooltip*/ +.tooltip-box { + width: 15%; + height: auto; + display: inline-block; + padding: 4px; + background: #FFFFFF; + border: 1px solid #BEB8B8; + padding: 10px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + margin-left: 23px; + /*+box-shadow:0px 1px 12px #353535;*/ + -moz-box-shadow: 0px 1px 12px #353535; + -webkit-box-shadow: 0px 1px 12px #353535; + -o-box-shadow: 0px 1px 12px #353535; + box-shadow: 0px 1px 12px #353535; +} + +.tooltip-box .arrow { + width: 19px; + height: 30px; + background: url(../images/sprites.png) -585px -947px; + /*+placement:shift -16px 3px;*/ + position: relative; + left: -16px; + top: 3px; + position: absolute; +} + +/*Tagger*/ +.tagger { + width: 94%; + margin: auto; + padding-bottom: 12px; + background: #F2F0F0; + border: 1px solid #CFC9C9; + /*+placement:shift -4px 0px;*/ + position: relative; + left: -4px; + top: 0px; +} + +.tagger .field { + width: 35%; + float: left; + position: relative; +} + +.tagger .tag-info { + font-size: 11px; + color: #757575; + margin-top: 12px; + margin-left: 8px; +} + +.tagger .tag-info.title { + font-size: 11px; + color: #6F9BF0; + margin-bottom: 5px; +} + +.tagger form { + margin: 12px 9px 0px; +} + +.tagger.readonly form { + display: none; +} + +.tagger form label { + display: block; + float: left; + width: 25px; + text-align: right; + font-size: 10px; + color: #394552; + margin-right: 9px; + /*+placement:shift 5px 8px;*/ + position: relative; + left: 5px; + top: 8px; +} + +.tagger form label.error { + position: absolute; + color: #FF0000; + left: 44px; + top: 28px !important; + /*[empty]background-color:;*/ +} + +.tagger form input { + padding: 4px; + background: #FFFFFF; + border: 1px solid #808080; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} + +.tagger form input { + width: 45%; + margin-left: 9px; +} + +.tagger form input[type=submit] { + background: url(../images/bg-gradients.png) repeat-x 0px -220px; + cursor: pointer; + color: #FFFFFF; + /*+text-shadow:0px -1px 2px #000000;*/ + -moz-text-shadow: 0px -1px 2px #000000; + -webkit-text-shadow: 0px -1px 2px #000000; + -o-text-shadow: 0px -1px 2px #000000; + text-shadow: 0px -1px 2px #000000; + border: none; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + padding: 7px 25px 7px 26px; + margin-left: 16px; + width: auto; +} + +.tagger form input[type=submit]:hover { + background-position: 0px -946px; +} + +.tagger ul { + display: block; + width: 96%; + margin: 16px auto auto; + /*+border-radius:2px;*/ + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + -khtml-border-radius: 2px; + border-radius: 2px; + overflow: auto; + padding-bottom: 10px; + border: 1px solid #D2D2D2; + background: #FFFFFF; + /*+box-shadow:inset 0px 0px 10px #DCDCDC;*/ + -moz-box-shadow: inset 0px 0px 10px #DCDCDC; + -webkit-box-shadow: inset 0px 0px 10px #DCDCDC; + -o-box-shadow: inset 0px 0px 10px #DCDCDC; + box-shadow: inset 0px 0px 10px #DCDCDC; +} + +.tagger ul li { + background: #DFDFDF 0px 4px; + height: 15px; + padding: 0px 18px 0 7px; + display: inline-block; + float: left; + margin-left: 7px; + margin-right: 2px; + margin-top: 5px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + /*+placement:shift 0px 2px;*/ + position: relative; + left: 0px; + top: 2px; +} + +.tagger ul li span { + color: #000000; +} + +.tagger ul li span.label span.value { + max-width: 100px; + overflow: hidden; +} + +.tagger ul li span.label { + font-size: 10px; + position: relative; + left: 15px; + top: -2px; +} + +.tagger.readonly ul li span.label { + left: 6px; +} + +.tagger ul li span.label > span { + float: left; + display: block; + margin-top: 2px; +} + +.tagger ul li span.label > span.key { + font-weight: bold; + max-width: 134px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-left: 15px; + margin-right: 5px; +} + +.tagger ul li span.label > span.value { + max-width: 160px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin-left: 6px; +} + +.tagger ul li span.remove { + width: 15px !important; + overflow: hidden !important; + height: 11px !important; + background: #DFDFDF; + display: block; + top: 0px !important; + left: -3px !important; + text-indent: 4px; + padding: 4px 0px 0px 8px; + font-size: 8px; + font-weight: bold; + cursor: pointer; + position: absolute !important; + color: #5B5B5B; +} + +.tagger.readonly ul li span.remove { + display: none; +} + +.tagger ul li span.remove:hover { + color: #000000; +} + +/** Dialog tagger*/ +.ui-dialog .tagger { + width: 375px; +} + +.ui-dialog .tagger .tag-info { + display: none; +} + +.ui-dialog.editTags .ui-button { + float: right; +} + +.ui-dialog.editTags .ui-dialog-buttonpane { + float: right; +} + +.ui-dialog .tagger .field { + width: 119px !important; +} + +.ui-dialog .tagger input.key, +.ui-dialog .tagger input.value { + width: 66px !important; + height: 15px; + font-size: 11px !important; +} + +.ui-dialog .tagger input[type=submit] { + padding: 6px 15px; +} + +/*VPC / vApps*/ +.vpc-chart { + width: 100%; + height: 94%; + overflow: auto; + position: relative; + margin: 30px 0 0; + background: #FFFFFF 0px 24px; +} + +.vpc-chart .vpc-title { + width: 210px; + font-size: 22px; + /*+placement:shift 11px 41px;*/ + position: relative; + left: 11px; + top: 41px; + position: absolute; + color: #5F768A; +} + +.vpc-chart .vpc-title > span { + max-width: 160px; + display: block; + float: left; + overflow-y: hidden; + overflow-x: auto; +} + +.vpc-chart .vpc-title .icon { + padding: 7px 15px; + background: url(../images/sprites.png) no-repeat -145px -195px; + margin-left: 10px; + cursor: pointer; + /*+placement:shift 6px -8px;*/ + position: relative; + left: 6px; + top: -8px; + float: left; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip { + width: 129px; + padding: 35px 10px 10px; + font-size: 14px; + display: none; + z-index: 2000; + position: absolute; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip .arrow { + width: 30px; + height: 20px; + background: #FFFFFF url(../images/sprites.png) no-repeat -589px -997px; + /*+placement:shift 13px 26px;*/ + position: relative; + left: 13px; + top: 26px; + position: absolute; + z-index: 1; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip ul { + border: 1px solid #C2C2C2; + background: #FFFFFF; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + /*+placement:shift 0px -6px;*/ + position: relative; + left: 0px; + top: -6px; + margin: 10px 0; + padding: 9px; + /*+box-shadow:0px 1px 8px #CBCBCB;*/ + -moz-box-shadow: 0px 1px 8px #CBCBCB; + -webkit-box-shadow: 0px 1px 8px #CBCBCB; + -o-box-shadow: 0px 1px 8px #CBCBCB; + box-shadow: 0px 1px 8px #CBCBCB; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip li { + padding: 3px 0 5px; + cursor: pointer; + font-size: 12px; +} + +.vpc-chart .vpc-title .vpc-configure-tooltip li:hover { + font-weight: bold; +} + +.vpc-chart ul.tiers { + padding: 0 0 0 26px; + margin: 79px 0 0 232px; + border-left: 3px solid #CCC; +} + +.vpc-chart li.tier { + display: block; + width: 258px; + height: 107px; + margin: -55px 0 90px; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border: 1px solid #50545A; + background: url(../images/bg-gradients.png) 0px -2637px; + /*+placement:shift 0px 58px;*/ + position: relative; + left: 0px; + top: 58px; + position: relative; + /*+box-shadow:0px 5px 7px #DADADA;*/ + -moz-box-shadow: 0px 5px 7px #DADADA; + -webkit-box-shadow: 0px 5px 7px #DADADA; + -o-box-shadow: 0px 5px 7px #DADADA; + box-shadow: 0px 5px 7px #DADADA; +} + +.vpc-chart li.tier .loading-overlay { + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} + +.vpc-chart li.tier .connect-line { + position: absolute; + width: 28px; + height: 3px; + background: #CCCCCC 0px -8px; + /*+placement:shift -29px 49px;*/ + position: relative; + left: -29px; + top: 49px; + position: absolute; +} + +.vpc-chart li.tier span.title { + color: #FFFFFF; + /*+placement:shift 8px 7px;*/ + position: relative; + left: 8px; + top: 7px; + position: absolute; + cursor: pointer; + padding: 3px; + font-size: 24px; + /*+text-shadow:1px 2px 2px #000000;*/ + -moz-text-shadow: 1px 2px 2px #000000; + -webkit-text-shadow: 1px 2px 2px #000000; + -o-text-shadow: 1px 2px 2px #000000; + text-shadow: 1px 2px 2px #000000; + text-decoration: underline; +} + +.vpc-chart li.tier span.cidr { + /*+placement:shift 12px 46px;*/ + position: relative; + left: 12px; + top: 46px; + position: absolute; + font-size: 14px; + /*+text-shadow:0px -1px 1px #343E4C;*/ + -moz-text-shadow: 0px -1px 1px #343E4C; + -webkit-text-shadow: 0px -1px 1px #343E4C; + -o-text-shadow: 0px -1px 1px #343E4C; + text-shadow: 0px -1px 1px #343E4C; + color: #FFFFFF; +} + +.vpc-chart li.tier .actions { + width: 258px; + height: 35px; + background: #CCC; + /*+border-radius:0 0 4px 4px;*/ + -moz-border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; + -khtml-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + /*+placement:shift -1px 71px;*/ + position: relative; + left: -1px; + top: 71px; + position: absolute; + /*+box-shadow:inset 0px 1px #FFFFFF;*/ + -moz-box-shadow: inset 0px 1px #FFFFFF; + -webkit-box-shadow: inset 0px 1px #FFFFFF; + -o-box-shadow: inset 0px 1px #FFFFFF; + box-shadow: inset 0px 1px #FFFFFF; + border: 1px solid #808080; + border-top: 1px solid #4C545E; + position: absolute; +} + +.vpc-chart li.tier .actions .action { + cursor: pointer; + float: left; + width: 50px; + height: 24px; + text-align: center; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + margin: 4px 0px 4px 4px; + border: 1px solid #909090; + color: #4B637A; + font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + background: url(../images/bg-gradients.png) 0px -2533px; +} + +.vpc-chart li.tier .actions .action.disabled, +.vpc-chart li.tier .actions .action.disabled:hover { + color: #9D9D9D; + background: #CFCFCF; + /*+text-shadow:none;*/ + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; + border-color: #B5B5B5; + cursor: not-allowed; + /*+box-shadow:none;*/ + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} + +.vpc-chart li.tier .actions .action:hover { + border: 1px solid #7A8B9A; + background-position: 0px -106px; + color: #5B7A96; + /*+box-shadow:inset 1px 2px 4px #808080;*/ + -moz-box-shadow: inset 1px 2px 4px #808080; + -webkit-box-shadow: inset 1px 2px 4px #808080; + -o-box-shadow: inset 1px 2px 4px #808080; + box-shadow: inset 1px 2px 4px #808080; +} + +.vpc-chart li.tier .actions .action span.label { + /*+placement:shift 1px 3px;*/ + position: relative; + left: 1px; + top: 3px; + font-size: 11px; +} + +.vpc-chart li.tier .actions .action.remove, +.vpc-chart li.tier .actions .action.remove:hover { + background: none; + width: 30px; + padding: 0; + float: right; + border: none; + /*+placement:shift -3px -2px;*/ + position: relative; + left: -3px; + top: -2px; + /*+box-shadow:none;*/ + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} + +.vpc-chart li.tier .action span.icon { + background-image: url(../images/sprites.png); + cursor: pointer; + width: 37px; + height: 23px; + float: left; + /*+placement:shift 1px 3px;*/ + position: relative; + left: 1px; + top: 3px; +} + +.vpc-chart li.tier .vm-count { + font-size: 23px; + left: 134px; + top: 3px; + position: absolute; + color: #FFFFFF; + /*+text-shadow:1px 2px 2px #000000;*/ + -moz-text-shadow: 1px 2px 2px #000000; + -webkit-text-shadow: 1px 2px 2px #000000; + -o-text-shadow: 1px 2px 2px #000000; + text-shadow: 1px 2px 2px #000000; + cursor: pointer; + display: block; + padding: 5px; + text-align: center; + width: 100px; + border: 1px solid transparent; + margin: 4px; + text-decoration: underline; +} + +.vpc-chart li.tier.loading .vm-count { + padding-right: 10px; +} + +.vpc-chart li.tier .vm-count .loading-overlay { + display: none; + width: 24px; + height: 24px; + position: absolute; + left: 15px; + top: 7px; + /*+border-radius:12px;*/ + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + -khtml-border-radius: 12px; + border-radius: 12px; + background-image: url(../images/ajax-loader-small.gif); + /*+opacity:100%;*/ + filter: alpha(opacity=100); + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + -moz-opacity: 1; + opacity: 1; +} + +.vpc-chart li.tier.loading .vm-count .loading-overlay { + display: block; +} + +.vpc-chart li.tier .vm-count:hover, +.vpc-chart li.tier .title:hover { + border-radius: 4px; + border: 1px solid #4C545E; + background: url(../images/bg-gradients.png) 0px -2751px; +} + +.vpc-chart li.tier .vm-count .total { + padding-right: 4px; + font-size: 24px; +} + +.vpc-chart li.tier.placeholder { + background: #ECECEC; + border: dotted #ACACAC; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + /*+box-shadow:none;*/ + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; + cursor: pointer; +} + +.vpc-chart li.tier.placeholder:hover { + background: #D3D3D3; + /*+box-shadow:0px 2px 8px #A7A7A7;*/ + -moz-box-shadow: 0px 2px 8px #A7A7A7; + -webkit-box-shadow: 0px 2px 8px #A7A7A7; + -o-box-shadow: 0px 2px 8px #A7A7A7; + box-shadow: 0px 2px 8px #A7A7A7; +} + +.vpc-chart li.tier.placeholder span { + top: 40px; + left: 66px; + color: #9F9F9F; + /*+text-shadow:none;*/ + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; + text-decoration: none; +} + +.vpc-chart li.tier.placeholder:hover span { + color: #000000; + /*+text-shadow:0px 0px 7px #FFFFFF;*/ + -moz-text-shadow: 0px 0px 7px #FFFFFF; + -webkit-text-shadow: 0px 0px 7px #FFFFFF; + -o-text-shadow: 0px 0px 7px #FFFFFF; + text-shadow: 0px 0px 7px #FFFFFF; + background: none; + border: none; +} + +.vpc-chart li.tier.virtual-router { + margin: 0px; + width: 222px; + height: 65px; + /*+placement:shift 17px -36px;*/ + position: relative; + left: 17px; + top: -36px; + background-position: 0px -2519px; + border: 1px solid #ADADAD; + cursor: pointer; +} + +.vpc-chart li.tier.virtual-router:hover { + text-decoration: underline; +} + +.vpc-chart li.tier.virtual-router.disabled:hover { + text-decoration: none; +} + +.vpc-chart li.tier.virtual-router.disabled, +.vpc-chart li.tier.virtual-router.disabled span { + cursor: default; +} + +.vpc-chart li.tier.virtual-router span { + color: #586E82; + font-size: 18px; + /*+text-shadow:0px 1px 3px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 3px #FFFFFF; + -webkit-text-shadow: 0px 1px 3px #FFFFFF; + -o-text-shadow: 0px 1px 3px #FFFFFF; + text-shadow: 0px 1px 3px #FFFFFF; + /*+placement:shift 53px 22px;*/ + position: relative; + left: 53px; + top: 22px; + text-decoration: none; +} + +.vpc-chart li.tier.virtual-router span:hover { + background: none; + border: none; +} + +.vpc-chart li.tier.virtual-router .connect-line { + /*+placement:shift -47px 14px;*/ + position: relative; + left: -47px; + top: 14px; + width: 46px; +} + +/*VPC: Enable Static NAT fields*/ +.list-view.instances .filters.tier-select { + width: 246px; + padding: 2px 20px 2px 13px; + margin: 1px 120px 0 19px; +} + +.list-view.instances .filters.tier-select label { + color: #FFFFFF; + /*+text-shadow:0px 1px 3px #000000;*/ + -moz-text-shadow: 0px 1px 3px #000000; + -webkit-text-shadow: 0px 1px 3px #000000; + -o-text-shadow: 0px 1px 3px #000000; + text-shadow: 0px 1px 3px #000000; +} + +.list-view.instances .filters.tier-select select { + width: 166px; + float: left; +} + +/*Configure ACL dialog / VM tier list view dialog*/ +.ui-dialog.configure-acl .multi-edit { + width: 866px; +} + +.ui-dialog.configure-acl .multi-edit table { + max-width: none; +} + +.ui-dialog.configure-acl .multi-edit table select, +.detail-view .acl .multi-edit select { + width: 76px; +} + +.ui-dialog.configure-acl .ui-dialog-buttonpane { + /*+placement:shift 722px -2px;*/ + position: relative; + left: 722px; + top: -2px; +} + +.ui-dialog.configure-acl div.view.list-view { + max-height: 474px; +} + +.ui-dialog.configure-acl .multi-edit .data { + width: 901px; + padding: 0; + margin: 0; + height: 370px; + overflow: auto; + overflow-x: hidden; +} + +.ui-dialog.configure-acl .multi-edit .data .multi-actions { + min-width: none !important; + max-width: none !important; +} + +.ui-dialog.configure-acl .view.list-view table.body tr td.actions { + width: 184px !important; + max-width: 184px !important; +} + +div.ui-dialog div.acl div.multi-edit table.multi-edit thead tr th, +div.ui-dialog div.acl div.multi-edit table.multi-edit tbody tr td { + min-width: 75px; +} + +div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table tbody tr td { + width: 100%; + min-width: 77px; +} + +.detail-view .acl .multi-edit th, +.detail-view .acl .multi-edit td { + padding-right: 0px !important; + min-width: 25px !important; +} + +.detail-view .acl .multi-edit th { + font-size: 10px; +} + +.detail-view .acl .multi-edit input { + width: 50px; +} + +.detail-view .acl .multi-edit .add-vm { + width: 51px; + text-indent: 0px; + padding-right: 0px; +} + +.detail-view .acl .multi-edit td.multi-actions { + width: 65px; +} + +/*HEALTH CHECK*/ +.ui-dialog .health-check { + height: 295px !important; + padding-bottom: 93px; +} + +div.ui-dialog div.health-check div.health-check-description { + color: #808080; +} + +div.ui-dialog div.health-check div.form-container form div.form-item { + width: 58%; + margin-left:116px; + margin-top: -16px; + margin-bottom: 30px; +} + +div.ui-dialog div.health-check div.health-check-config-title { + float: left; + color: #808080; + font-size: 17px; + margin-left: 15px; +} + +div.ui-dialog div.health-check div.health-check-advanced-title { + float: left; + color: #808080; + font-size: 17px; + margin-left: 15px; + margin-top: -70px; +} + +/*Autoscaler*/ +.ui-dialog div.autoscaler { + overflow: auto; + max-height: 600px; +} + +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit thead tr th { + min-width: 80px; + max-width: 80px; + font-size: 10px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons { + float: right; + margin-right: 6px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons .action { + width: 32px; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { + display: block; + width: 370px; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=diskOfferingId] { + display: inline-block; + width: 370px; + float: left; + position: relative; + margin-top: 1px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=minInstance] { + display: block; + width: 50%; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=maxInstance] { + display: inline-block; + width: 50%; + float: left; + left: -30px; + position: relative; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=interval] { + display: block; + width: 50%; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=quietTime] { + display: inline-block; + width: 50%; + float: left; + left: -15px; + position: relative; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpCommunity] { + display: block; + width: 50%; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpPort] { + display: inline-block; + width: 50%; + float: left; + left: -15px; + position: relative; +} + +.ui-dialog div.autoscaler div.form-container div.value select { + width: 88%; + float: left; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { + margin-top: 0px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { + margin-top: 0px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title { + color: #0055BB; + margin-left: -650px; + margin-top: 40px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title label { + font-size: 13px; + margin-left: 200px; + margin-right: 10px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { + border-left: 1px none #38546D; + border-right: 1px none #16222C; + border-top: 1px none #38546D; + margin-bottom: 12px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { + border-left: 1px none #38546D; + border-right: 1px none #16222C; + border-top: 1px none #38546D; + margin-bottom: 12px; +} + +div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { + border-left: 1px none #38546D; + border-right: 1px none #16222C; + border-top: 1px none #38546D; + margin-top: 15px; + margin-bottom: -1px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title label { + font-size: 13px; + margin-left: 170px; + margin-right: 10px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title { + color: #0055BB; + margin-left: -620px; + margin-top: 10px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type=text] { + margin-left: 729px; + width: 30%; + margin-top: -17px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { + margin-left: 420px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type=text] { + margin-left: 698px; + width: 30%; + margin-top: -16px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { + margin-left: 420px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { + margin-bottom: 0px; + margin-right: 22px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { + margin-bottom: 0px; + margin-right: 22px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { + color: #A5A3A7; + font-size: 14px; + margin-bottom: 3px; + margin-left: 755px; + width: 12px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { + color: #A5A3A7; + font-size: 14px; + margin-bottom: 3px; + margin-left: 755px; + width: 12px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.hide { + background: #FFFFFF url("../images/minus.png") no-repeat 38% 59%; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.hide { + background: #FFFFFF url("../images/minus.png") no-repeat 31% 54%; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.expand { + background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.expand { + background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { + font-size: 11px; +} + +/*List state BG colors*/ +.list-view .body td.item-state-on { + background: #C0FFC0; + border-bottom: 1px solid #09BC09; +} + +.list-view .body td.item-state-off { + background: #FFD8CF; + border-bottom: 1px solid #FF9F9F; +} + +.list-view .body tr.selected td.item-state-on, +.list-view .body tr.selected td.item-state-off { + background-color: inherit; + border-color: inherit; +} + +/*Autoscaler*/ +.ui-dialog div.autoscaler { + overflow: auto; + max-height: 600px; +} + +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit tbody tr td, +div.container div.panel div#details-tab-network.detail-group div div.multi-edit table.multi-edit thead tr th { + min-width: 72px; + font-size: 10px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons { + float: right; + margin-right: 6px; +} + +.ui-dialog div.autoscaler .detail-actions .buttons .action { + width: 32px; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=securityGroups] { + display: block; + width: 370px; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=diskOfferingId] { + display: inline-block; + width: 370px; + float: left; + position: relative; + margin-top: 1px; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=minInstance] { + display: block; + width: 50%; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=maxInstance] { + display: inline-block; + width: 50%; + float: left; + left: -30px; + position: relative; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=interval] { + display: block; + width: 50%; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=quietTime] { + display: inline-block; + width: 50%; + float: left; + left: -15px; + position: relative; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpCommunity] { + display: block; + width: 50%; + float: left; +} + +.ui-dialog div.autoscaler div.form-container div.form-item[rel=snmpPort] { + display: inline-block; + width: 50%; + float: left; + left: -15px; + position: relative; +} + +.ui-dialog div.autoscaler div.form-container div.value select { + width: 88%; + float: left; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container { + height: 55px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit { + margin-top: 0px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit { + margin-top: 0px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title { + color: #0055BB; + margin-left: -650px; + margin-top: 40px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title label { + font-size: 13px; + margin-left: 200px; + margin-right: 10px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title hr.policy-divider { + border-left: 1px none #38546D; + border-right: 1px none #16222C; + border-top: 1px none #38546D; + margin-bottom: 12px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title hr.policy-divider { + border-left: 1px none #38546D; + border-right: 1px none #16222C; + border-top: 1px none #38546D; + margin-bottom: 12px; +} + +div.ui-dialog div.autoscaler div.field-group.bottom-fields hr.policy-divider { + border-left: 1px none #38546D; + border-right: 1px none #16222C; + border-top: 1px none #38546D; + margin-top: 15px; + margin-bottom: -1px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title label { + font-size: 13px; + margin-left: 170px; + margin-right: 10px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title { + color: #0055BB; + margin-left: -620px; + margin-top: 10px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.value input[type=text] { + margin-left: 195px; + width: 30%; + margin-top: 1px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy-title div.form-container div.form-item div.name { + margin-left: 390px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.value input[type=text] { + margin-left: 670px; + width: 30%; + margin-top: -16px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy-title div.form-container div.form-item div.name { + margin-left: 390px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.multi-edit div.data div.data-body div.data-item { + margin-bottom: 0px; + margin-right: 22px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.multi-edit div.data div.data-body div.data-item { + margin-bottom: 0px; + margin-right: 22px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.slide-label { + color: #A5A3A7; + font-size: 14px; + margin-bottom: 3px; + margin-left: 755px; + width: 12px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.slide-label { + color: #A5A3A7; + font-size: 14px; + margin-bottom: 3px; + margin-left: 755px; + width: 12px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.hide { + background: #FFFFFF url("../images/minus.png") no-repeat 38% 59%; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.hide { + background: #FFFFFF url("../images/minus.png") no-repeat 31% 54%; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.scale-up-policy div.expand { + background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.scale-down-policy div.expand { + background: #FFFFFF url("../images/sprites.png") repeat -541px -499px; + border: 1px solid #D0D0D0; + border-radius: 9px 9px 9px 9px; + cursor: pointer; + float: right; + height: 15px; + margin: -20px 45px 0 11px; + width: 14px; +} + +div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-item div.name label { + font-size: 11px; +} + +/*UI datepicker*/ +.ui-datepicker { + background: #FFFFFF 0px -2470px; + width: 300px; + height: auto; + overflow: hidden; + padding: 4px 0 0; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + /*+box-shadow:0px 3px 8px #000000;*/ + -moz-box-shadow: 0px 3px 8px #000000; + -webkit-box-shadow: 0px 3px 8px #000000; + -o-box-shadow: 0px 3px 8px #000000; + box-shadow: 0px 3px 8px #000000; + display: none; +} + +.ui-datepicker .ui-datepicker-title { + width: 100%; + margin: auto; +} + +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { + font-size: 13px; + color: #FFFFFF; + /*+box-shadow:0px 1px 5px #444444;*/ + -moz-box-shadow: 0px 1px 5px #444444; + -webkit-box-shadow: 0px 1px 5px #444444; + -o-box-shadow: 0px 1px 5px #444444; + box-shadow: 0px 1px 5px #444444; + /*+text-shadow:0px -1px 1px #050505;*/ + -moz-text-shadow: 0px -1px 1px #050505; + -webkit-text-shadow: 0px -1px 1px #050505; + -o-text-shadow: 0px -1px 1px #050505; + text-shadow: 0px -1px 1px #050505; + padding: 6px; + margin: 6px 13px 6px 14px; + font-size: 12px; + background: url(../images/bg-gradients.png) 0px -182px; + cursor: pointer; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} + +.ui-datepicker .ui-datepicker-prev:hover, +.ui-datepicker .ui-datepicker-next:hover { + /*+box-shadow:inset 0px 0px 10px #000000;*/ + -moz-box-shadow: inset 0px 0px 10px #000000; + -webkit-box-shadow: inset 0px 0px 10px #000000; + -o-box-shadow: inset 0px 0px 10px #000000; + box-shadow: inset 0px 0px 10px #000000; +} + +.ui-datepicker .ui-datepicker-prev { + float: left; +} + +.ui-datepicker .ui-datepicker-next { + float: right; +} + +.ui-datepicker .ui-datepicker-title .ui-datepicker-month { + width: 85px; + font-size: 16px; + color: #2C363F; +} + +.ui-datepicker .ui-datepicker-title { + text-align: center; + width: 188px; + height: 19px; + padding: 3px 0 0; + /*+placement:shift 0px 6px;*/ + position: relative; + left: 0px; + top: 6px; +} + +.ui-datepicker table { + width: 277px; + height: 9px; +} + +.ui-datepicker table th, +.ui-datepicker table td { + min-width: 24px; + text-align: center; + border: 1px solid #B9B6B6; + text-indent: 0px; + padding: 7px 0; + /*[empty]+placement:;*/ +} + +.ui-datepicker table td { + cursor: pointer; +} + +.ui-datepicker table td.ui-state-disabled, +.ui-datepicker table td.ui-state-disabled:hover { + background-color: #DCDCDC; + /*+box-shadow:none;*/ + -moz-box-shadow: none; + -webkit-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; + cursor: default; +} + +.ui-datepicker table td a { + text-decoration: none; + color: #485867; + font-size: 12px; +} + +.ui-datepicker table td:hover { + background-color: #6A839A; + /*+box-shadow:inset 0px 0px 4px #6B6B6B;*/ + -moz-box-shadow: inset 0px 0px 4px #6B6B6B; + -webkit-box-shadow: inset 0px 0px 4px #6B6B6B; + -o-box-shadow: inset 0px 0px 4px #6B6B6B; + box-shadow: inset 0px 0px 4px #6B6B6B; +} + +.ui-datepicker table td:hover a { + color: #FFFFFF; + text-shadow: 0px -1px #000000; +} + +/*Plugins listing*/ +.plugins-listing ul { + width: 100%; +} + +.plugins-listing ul li { + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + /*+box-shadow:0px 2px 6px #D3D3D3;*/ + -moz-box-shadow: 0px 2px 6px #D3D3D3; + -webkit-box-shadow: 0px 2px 6px #D3D3D3; + -o-box-shadow: 0px 2px 6px #D3D3D3; + box-shadow: 0px 2px 6px #D3D3D3; + border: 1px solid #A8A3A3; + background: url(../images/bg-gradients.png) 0px -29px; + width: 98%; + height: 66px; + margin: 9px auto 12px; + cursor: pointer; +} + +.plugins-listing ul li:hover { + /*+box-shadow:inset 0px 2px 4px #B9B9B9;*/ + -moz-box-shadow: inset 0px 2px 4px #B9B9B9; + -webkit-box-shadow: inset 0px 2px 4px #B9B9B9; + -o-box-shadow: inset 0px 2px 4px #B9B9B9; + box-shadow: inset 0px 2px 4px #B9B9B9; +} + +.plugins-listing ul li .title { + display: block; + float: left; + width: 90%; + font-weight: bold; + /*+text-shadow:0px 1px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px 1px #FFFFFF; + -o-text-shadow: 0px 1px 1px #FFFFFF; + text-shadow: 0px 1px 1px #FFFFFF; + color: #4A5A6A; + margin: 13px 0 7px; +} + +.plugins-listing ul li .desc { + color: #524E4E; + font-size: 13px; +} + +.plugins-listing ul li .icon { + display: block; + width: 50px; + height: 50px; + float: left; + margin: 8px 13px 13px 11px; +} + +.plugins-listing ul li .icon img { + width: 100%; + height: 100%; +} + +/*Regions*/ +.region-switcher { + display: inline-block; + position: relative; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + height: 28px; + float: left; + margin: 5px 13px 0 0; + cursor: pointer; + /*+placement:shift 27px 1px;*/ + position: relative; + left: 27px; + top: 1px; +} + +.region-selector { + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + width: 318px; + background: url(../images/bg-notifications.png) center; + height: 372px; + /*+placement:shift 185px 49px;*/ + position: relative; + left: 185px; + top: 49px; + position: absolute; + z-index: 5500; +} + +.region-selector h2 { + color: #FFFFFF; + text-align: center; + font-size: 21px; + letter-spacing: 1px; + /*+text-shadow:0px 1px 2px #000000;*/ + -moz-text-shadow: 0px 1px 2px #000000; + -webkit-text-shadow: 0px 1px 2px #000000; + -o-text-shadow: 0px 1px 2px #000000; + text-shadow: 0px 1px 2px #000000; + margin: 31px 0 14px; +} + +.region-selector .buttons { + width: 95%; + height: 33px; + margin: 5px auto 0; +} + +.region-selector .buttons .button.close { + background: url(../images/gradients.png) 0px -317px; + float: right; + margin-right: 10px; + border-bottom: 1px solid #232323; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + padding: 8px; +} + +.region-selector .buttons .button.close:hover { + /*+box-shadow:inset 0px 2px 4px #525252;*/ + -moz-box-shadow: inset 0px 2px 4px #525252; + -webkit-box-shadow: inset 0px 2px 4px #525252; + -o-box-shadow: inset 0px 2px 4px #525252; + box-shadow: inset 0px 2px 4px #525252; +} + +.region-selector .buttons .button.close span { + color: #FFFFFF; + font-weight: bold; + letter-spacing: 1px; + /*+text-shadow:0px 1px 2px #000000;*/ + -moz-text-shadow: 0px 1px 2px #000000; + -webkit-text-shadow: 0px 1px 2px #000000; + -o-text-shadow: 0px 1px 2px #000000; + text-shadow: 0px 1px 2px #000000; +} + +.region-selector ul { + background: #FFFFFF; + width: 94%; + /*+border-radius:4px;*/ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + height: 237px; + border: 1px solid #B7B7B7; + overflow: auto; + margin: auto; + /*+box-shadow:inset 0px 0px 8px #A3A3A3;*/ + -moz-box-shadow: inset 0px 0px 8px #A3A3A3; + -webkit-box-shadow: inset 0px 0px 8px #A3A3A3; + -o-box-shadow: inset 0px 0px 8px #A3A3A3; + box-shadow: inset 0px 0px 8px #A3A3A3; +} + +.region-selector ul li { + background: none; + color: #415C72; + font-size: 13px; + /*+text-shadow:none;*/ + -moz-text-shadow: none; + -webkit-text-shadow: none; + -o-text-shadow: none; + text-shadow: none; + text-indent: 14px; + cursor: pointer; + border-bottom: 1px solid #CACACA; + width: 100%; + padding: 15px 0; +} + +.region-selector ul li:hover, +.region-selector ul li.active { + background: #E9E9E9 url(../images/bg-gradients.png) repeat-x 0px -31px; + /*+text-shadow:0px 1px #FFFFFF;*/ + -moz-text-shadow: 0px 1px #FFFFFF; + -webkit-text-shadow: 0px 1px #FFFFFF; + -o-text-shadow: 0px 1px #FFFFFF; + text-shadow: 0px 1px #FFFFFF; +} + +.region-switcher .icon { + display: inline-block; + float: left; + display: block; + width: 26px; + height: 26px; + background: url(../images/sprites.png) -15px -1313px; + position: absolute; +} + +.region-switcher .title { + display: inline-block; + float: right; + padding: 9px 9px 0 34px; + color: #FFFFFF; + font-size: 13px; + font-weight: 100; + max-width: 285px; + overflow: hidden; + white-space: nowrap; + /*+placement:shift -1px 0px;*/ + position: relative; + left: -1px; + top: 0px; +} + +.region-switcher:hover, +.region-switcher.active { + /*+box-shadow:inset 0px 1px 5px #000000;*/ + -moz-box-shadow: inset 0px 1px 5px #000000; + -webkit-box-shadow: inset 0px 1px 5px #000000; + -o-box-shadow: inset 0px 1px 5px #000000; + box-shadow: inset 0px 1px 5px #000000; +} + +.region-switcher:hover .icon, +.region-switcher.active .icon { + background-position: -70px -1311px; +} + +/*CA Cert*/ +.cacert-download { + display: inline-block; + position: relative; + height: 30px; + float: right; + cursor: pointer; + position: absolute; + left: 1175px; + top: 20px; +} + +.cacert-download .icon { + display: inline-block; + float: left; + display: block; + width: 32px; + height: 30px; + background: url(../images/sprites.png) -142px -348px; + position: absolute; +} + +.cacert-download:hover .icon, +.cacert-download.active .icon { + background-position: -368px -348px; +} + +/*Action icons*/ +.action.edit .icon { + background-position: 1px -1px; +} + +.action.edit:hover .icon { + background-position: 1px -583px; +} + +.start .icon, +.startByAdmin .icon { + background-position: -169px -1px; +} + +.start:hover .icon, +.startByAdmin:hover .icon { + background-position: -169px -583px; +} + +.updateVmwareDc .icon { + background-position: -265px -148px; +} + +.updateVmwareDc:hover .icon { + background-position: -265px -728px; +} + +.stop .icon, +.removeVmwareDc .icon, +.release .icon { + background-position: 0px -31px; +} + +.stop:hover .icon, +.removeVmwareDc:hover .icon, +.release:hover .icon { + background-position: 0px -613px; +} + +.restart .icon, +.releaseDedicatedZone .icon { + background-position: 0px -63px; +} + +.restart:hover .icon, +.releaseDedicatedZone:hover .icon { + background-position: 0px -645px; +} + +.destroy .icon, +.expunge .icon, +.remove .icon, +.removeMulti .icon, +.delete .icon, +.decline .icon, +.deleteacllist .icon { + background-position: 1px -92px; +} + +.destroy:hover .icon, +.expunge:hover .icon, +.remove:hover .icon, +.delete:hover .icon, +.deleteacllist:hover .icon { + background-position: 1px -674px; +} + +.migrate .icon, +.migrateToAnotherStorage .icon { + background-position: 0px -125px; +} + +.migrate:hover .icon, +.migrateToAnotherStorage:hover .icon { + background-position: 0px -707px; +} + +.migrate .icon, +.migrateVolume .icon { + background-position: 0px -125px; +} + +.migrate:hover .icon, +.migrateVolume:hover .icon { + background-position: 0px -707px; +} + +.viewMetrics .icon { + background-position: -40px -32px; +} + +.viewMetrics:hover .icon { + background-position: -40px -32px; +} + +.refreshMetrics .icon { + background-position: 0px -62px; +} + +.refreshMetrics:hover .icon { + background-position: 0px -62px; +} + +.attach .icon, +.attachISO .icon, +.attachDisk .icon, +.associateProfileToBlade .icon { + background-position: -104px -3px; +} + +.attach:hover .icon, +.attachISO:hover .icon, +.attachDisk:hover .icon { + background-position: -101px -585px; +} + +.detach .icon, +.detachISO .icon, +.detachDisk .icon, +.disassociateProfileFromBlade .icon { + background-position: -101px -65px; +} + +.detach:hover .icon, +.detachISO:hover .icon, +.detachDisk:hover .icon, +.disassociateProfileFromBlade:hover .icon { + background-position: -101px -647px; +} + +.secureKVMHost .icon, +.resetPassword .icon, +.changePassword .icon { + background-position: -68px -30px; +} + +.secureKVMHost:hover .icon, +.resetPassword:hover .icon, +.changePassword:hover .icon { + background-position: -68px -612px; +} + +.resetSSHKeyForVirtualMachine .icon { + background-position: -196px -3px; +} + +.resetSSHKeyForVirtualMachine:hover .icon { + background-position: -195px -586px; +} + +.changeService .icon { + background-position: -38px -33px; +} + +.changeService:hover .icon { + background-position: -38px -615px; +} + +.snapshot .icon, +.takeSnapshot .icon { + background-position: -36px -91px; +} + +.snapshot:hover .icon, +.takeSnapshot:hover .icon { + background-position: -36px -673px; +} + +.recurringSnapshot .icon { + background-position: -69px -95px; +} + +.recurringSnapshot:hover .icon { + background-position: -69px -677px; +} + +.downloadVolume .icon, +.downloadTemplate .icon, +.downloadISO .icon { + background-position: -35px -125px; +} + +.downloadVolume:hover .icon, +.downloadTemplate:hover .icon, +.downloadISO:hover .icon { + background-position: -35px -707px; +} + +.createVolume .icon { + background-position: -70px -124px; +} + +.createVolume:hover .icon { + background-position: -70px -706px; +} + +.enable .icon, +.enableStaticNAT .icon { + background-position: -102px -92px; +} + +.enable:hover .icon, +.enableStaticNAT:hover .icon { + background-position: -102px -676px; +} + +.disable .icon, +.disableStaticNAT .icon { + background-position: -136px -93px; +} + +.disable:hover .icon, +.disableStaticNAT:hover .icon { + background-position: -136px -677px; +} + +.add .icon, +.addNew .icon, +.addLdapAccount .icon, +.assignVm .icon, +.rootAdminAddGuestNetwork .icon { + background-position: -37px -61px; +} + +.add:hover .icon, +.addNew:hover .icon, +.addLdapAccount:hover .icon, +.assignVm:hover .icon, +.rootAdminAddGuestNetwork:hover .icon { + background-position: -37px -643px; +} + +.assignVmToAnotherAccount .icon { + background-position: -232px -97px; +} + +.assignVmToAnotherAccount:hover .icon { + background-position: -231px -678px; +} + +.create .icon, +.createTemplate .icon, +.enableSwift .icon, +.addVM .icon, +.dedicateZone .icon, +.dedicate .icon { + background-position: -69px -63px; +} + +.create:hover .icon, +.createTemplate:hover .icon, +.enableSwift:hover .icon, +.addVM:hover .icon, +.dedicateZone:hover .icon { + background-position: -69px -645px; +} + +.copyTemplate .icon, +.copyISO .icon { + background-position: -138px -2px; +} + +.copyTemplate:hover .icon, +.copyISO:hover .icon { + background-position: -138px -584px; +} + +.createVM .icon { + background-position: -137px -32px; +} + +.createVM:hover .icon { + background-position: -137px -614px; +} + +.blankHAForHost .icon { + background-position: -266px -31px; +} + +.blankHAForHost:hover .icon { + background-position: -266px -31px; +} + +.configureHAForHost .icon { + background-position: -270px -148px; +} + +.configureHAForHost:hover .icon { + background-position: -270px -728px; +} + +.enableHA .icon { + background-position: -265px -93px; +} + +.enableHA:hover .icon { + background-position: -265px -673px; +} + +.disableHA .icon { + background-position: -265px -120px; +} + +.disableHA:hover .icon { + background-position: -265px -700px; +} + +.blankOutOfBandManagement .icon { + background-position: -266px -31px; +} + +.blankOutOfBandManagement:hover .icon { + background-position: -266px -31px; +} + +.configureOutOfBandManagement .icon { + background-position: -168px -31px; +} + +.configureOutOfBandManagement:hover .icon { + background-position: -168px -613px; +} + +.diagnostics .icon { + background-position: -165px -122px; +} + +.diagnostics:hover .icon { + background-position: -165px -704px; +} + +.enableOutOfBandManagement .icon { + background-position: -138px -65px; +} + +.enableOutOfBandManagement:hover .icon { + background-position: -138px -647px; +} + +.disableOutOfBandManagement .icon { + background-position: -138px -123px; +} + +.disableOutOfBandManagement:hover .icon { + background-position: -138px -705px; +} + +.issueOutOfBandManagementPowerAction .icon { + background-position: -266px -3px; +} + +.issueOutOfBandManagementPowerAction:hover .icon { + background-position: -265px -584px; +} + +.changeOutOfBandManagementPassword .icon { + background-position: -68px -30px; +} + +.changeOutOfBandManagementPassword:hover .icon { + background-position: -68px -612px; +} + +.enableMaintenanceMode .icon { + background-position: -138px -65px; +} + +.enableMaintenanceMode:hover .icon { + background-position: -138px -647px; +} + +.cancelMaintenanceMode .icon { + background-position: -138px -123px; +} + +.cancelMaintenanceMode:hover .icon { + background-position: -138px -705px; +} + +.lock .icon { + background-position: -104px -124px; +} + +.lock:hover .icon { + background-position: -104px -706px; +} + +.updateResourceLimits .icon { + background-position: -100px -32px; +} + +.updateResourceLimits:hover .icon { + background-position: -100px -614px; +} + +.addVlanRange .icon, +.addVmwareDc .icon { + background-position: -37px -62px; +} + +.addVlanRange:hover .icon, +.addVmwareDc:hover .icon { + background-position: -37px -62px; +} + +.removeVlanRange .icon { + background-position: 1px -92px; +} + +.removeVlanRange:hover .icon { + background-position: 1px -92px; +} + +.resize .icon, +.updateResourceCount .icon { + background-position: -167px -66px; +} + +.resize:hover .icon, +.updateResourceCount:hover .icon { + background-position: -167px -648px; +} + +.generateKeys .icon, +.networkACL .icon { + background-position: -167px -95px; +} + +.generateKeys:hover .icon, +.networkACL:hover .icon { + background-position: -167px -677px; +} + +.revertSnapshot .icon, +.revertToVMSnapshot .icon, +.restoreVM .icon, +.restore .icon, +.recover .icon { + background-position: -168px -31px; +} + +.reset .icon, +.reinstall .icon { + background-position: -168px -31px; +} + +.scaleUp .icon { + background-position: -167px -66px; +} + +.revertSnapshot:hover .icon, +.revertToVMSnapshot:hover .icon, +.restoreVM:hover .icon, +.restore:hover .icon { + background-position: -168px -613px; +} + +.reset:hover .icon { + background-position: -168px -613px; +} + +.enableVPN .icon { + background-position: -198px -3px; +} + +.enableVPN:hover .icon { + background-position: -197px -586px; +} + +.disableVPN .icon { + background-position: -198px -32px; +} + +.disableVPN:hover .icon { + background-position: -197px -615px; +} + +.addIpRange .icon { + background-position: -197px -65px; +} + +.addIpRange:hover .icon { + background-position: -197px -647px; +} + +.forceReconnect .icon { + background-position: -196px -95px; +} + +.forceReconnect:hover .icon { + background-position: -196px -677px; +} + +.manage .icon { + background-position: -165px -122px; +} + +.manage:hover .icon { + background-position: -165px -704px; +} + +.unmanage .icon { + background-position: -196px -122px; +} + +.unmanage:hover .icon { + background-position: -196px -704px; +} + +.configureSamlAuthorization .icon { + background-position: -165px -122px; +} + +.configureSamlAuthorization:hover .icon { + background-position: -165px -704px; +} + +.viewConsole .icon { + background-position: -231px -2px; +} + +.viewConsole:hover .icon { + background-position: -229px -586px; +} + +.moveTop .icon { + background-position: -24px -161px; +} + +.moveTop:hover .icon { + background-position: -24px -734px; +} + +.moveBottom .icon { + background-position: -98px -161px; +} + +.moveBottom:hover .icon { + background-position: -98px -734px; +} + +.moveUp .icon { + background-position: -2px -161px; +} + +.moveUp:hover .icon { + background-position: -2px -734px; +} + +.moveDown .icon { + background-position: -55px -161px; +} + +.moveDown:hover .icon { + background-position: -55px -734px; +} + +.moveDrag .icon { + cursor: move; + /*+border-radius:10px;*/ + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + -khtml-border-radius: 10px; + border-radius: 10px; + border-radius: 10px 10px 10px 10px; + background-position: -82px -162px; +} + +.moveDrag:hover .icon { + background-color: #FFFFFF; + cursor: move !important; +} + +.uploadVolume .icon { + background-position: -232px -34px; +} + +.uploadVolume:hover .icon { + background-position: -230px -615px; +} + +.editTags .icon { + background-position: -228px -65px; +} + +.editTags:hover .icon { + background-position: -228px -646px; +} + +.replaceacllist .icon, +.replaceACL .icon, +.updateIpaddr .icon, +.changeAffinity .icon { + background-position: -264px -2px; +} + +.replaceacllist:hover .icon, +.replaceACL:hover .icon, +.updateIpaddr:hover .icon, +.changeAffinity:hover .icon { + background-position: -263px -583px; +} + +.releaseFromAccount .icon { + background-position: -230px -123px; +} + +.releaseFromAccount:hover .icon { + background-position: -229px -704px; +} + +.addAccount .icon { + background-position: -231px -96px; +} + +.addAccount:hover .icon { + background-position: -230px -677px; +} + +.linktoldap .icon { + background-position: -197px -65px; +} + +.linktoldap:hover .icon { + background-position: -197px -647px; +} + +.label-hovered { + cursor: pointer; + color: #0000FF !important; +} + +.accounts-wizard table { + margin: 0; + width: 100%; + table-layout: fixed; +} + +.accounts-wizard .ui-button { + display: inline-block !important; + float: none !important; +} + +.accounts-wizard td:last-child { + border: none; +} + +.accounts-wizard tbody tr:nth-child(even) { + background: #DFE1E3; +} + +.accounts-wizard tbody tr:nth-child(odd) { + background: #F2F0F0; +} + +.accounts-wizard .content { + display: inline-block; +} + +.accounts-wizard .content td { + white-space: nowrap; + text-overflow: ellipsis; +} + +.accounts-wizard .content td.select, +.accounts-wizard .content th.select { + background: none; + border-right: 1px solid #BFBFBF; + width: 60px !important; + min-width: 60px !important; + max-width: 60px !important; +} + +.accounts-wizard .content .select input { + padding: 0; + width: auto; + height: auto; + margin: 18px 0 0 24px; +} + +.accounts-wizard .content:last-child { + margin-left: 14px; +} + +.accounts-wizard table thead th:first-child { + width: 50px; + min-width: 50px; + max-width: 50px; +} + +.accounts-wizard .input-area { + width: 320px; + font-size: 13px; + color: #485867; + text-shadow: 0px 2px 1px #FFFFFF; +} + +.ldap-account-choice { + border: none !important; + border-radius: 0 0 0 0 !important; +} + +.manual-account-details .name { + margin-top: 2px; + width: 100px; + float: left; + padding-bottom: 10px; +} + +.manual-account-details { + height: auto !important; + overflow: visible !important; + overflow-x: visible !important; +} + +.manual-account-details label.error { + display: block; + font-size: 10px; +} + +.manual-account-details .value { + float: left; +} + +.manual-account-details .form-item:after { + content: "."; + display: block; + clear: both; + visibility: hidden; + line-height: 0; + height: 0; +} + +.manual-account-details .form-item { + padding: 5px; + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.manual-account-details select, +.manual-account-details input { + width: 150px; +} + +.manual-account-details input { + background: #F6F6F6; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; + border-radius: 4px 4px 4px 4px; + border: 1px solid #AFAFAF; +} + +.manual-account-details > *:nth-child(even) { + background: #DFE1E3; +} + +.manual-account-details > *:nth-child(odd) { + background: #F2F0F0; +} + +.manual-account-details .value { + display: inline-block; +} + +/*GPU*/ +div.gpugroups div.list-view div.fixed-header { + position: relative; + left: 12px !important; + top: 0px !important; +} + +div.gpugroups div.list-view div.fixed-header table { + width: auto; +} + +div.gpugroups div.list-view div.data-table table { + margin-top: 0; +} + +div.gpugroups div.list-view { + position: relative; + height: auto !important; + margin-top: 0 !important; + border: none !important; +} + +.gpugroups { + float: left; + height: 100%; + width: 100%; + overflow-x: hidden; + overflow-y: auto; +} + +.gpugroups .gpugroup-container { + border: 1px solid #C8C2C2; + border-radius: 3px; + height: auto !important; + margin: 12px; + padding: 0; + position: relative; + float: left; + width: auto; +} + +.gpugroups .gpugroup-container .title { + font-size: 13px; + font-weight: 100; + padding: 12px 12px 5px; +} + +.ui-dialog .ui-button.add { + background: transparent linear-gradient(to bottom, #f7f7f7 1%, #eaeaea 100%) repeat 0px 0px; + font-size: 12px; + height: 12px; + width: auto; + margin: 0px 0px 12px; + padding: 5px 7px 5px 6px; +} + +.ui-dialog .ui-button.add:hover { + background: #E5E5E5 repeat 0px 0px; + box-shadow: inset 0px 0px 5px #C3C3C3; +} + +.ui-dialog .ui-button.add span { + background: transparent url("../images/icons.png") no-repeat -626px -209px; + padding: 0 0 3px 18px; +} + +ul.ui-autocomplete.ui-menu { + width: 250px; + background: #ddd; + font-size: 13px; + padding: 5px; + max-height: 400px; + overflow-x: hidden; + overflow-y: auto; +} + +.multi-edit-add-list .ui-button.migrateok, +.multi-edit-add-list .ui-button.migratecancel { + top: -5px !important; +} + +.migrate-vm-available-host-list div.text-search { + right: 30px; +} + +.migrate-vm-available-host-list div.ui-widget-content { + display: block !important; +} + +.list-view-select table th.availableHostSuitability, +.list-view-select table td.availableHostSuitability { + max-width: 250px; +} +.copy-template-destination-list div.text-search { + right: 5px; +} + +.copy-template-destination-list div.ui-widget-content { + display: block !important; +} + +div.panel.copy-template-destination-list div.list-view div.fixed-header{ + width: 500px; +} + +.copy-template-destination-list.panel div.list-view div.data-table table{ + width: 595px; +} + +.copy-template-destination-list .list-view .toolbar { + width: 654px; +} + +.multi-edit-add-list .ui-button.copytemplateok{ + left: 330px; +} + +.multi-edit-add-list .ui-button.copytemplatecancel { + left: 310px; +} + +div.button.export { + position: relative; + left: 0px; + top: 5px; + font-size: 12px; + font-weight: 100; + color: #000000; + margin: 0 10px 0 0; + cursor: pointer; + text-shadow: 0px 1px 1px #DEE5EA; + padding: 5px 5px 5px 5px; + background: linear-gradient(to bottom, rgba(247,247,247,1) 1%,rgba(234,234,234,1) 100%); + border: 1px solid #B7B7B7; + float: right; + border-radius: 4px 4px 4px 4px; + height: 12px; +} + +div.button.export a { + padding: 0px 0 3px 20px; + background: url(../images/exportCsvIcon.png) no-repeat; + position: relative; + left: 0px; + top: 0px; + background-size: 15.5px; + text-decoration: none; + color: black; +} + +/*jQuery UI specific stylings*/ +.ui-widget { + font-family: inherit; +} + +.ui-widget-content, +.ui-widget.ui-widget-content { + border: none; + background: inherit; +} + +.ui-dialog.ui-widget-content { + background: #FFFFFF; +} + +.ui-tabs .ui-tabs-nav { + margin-top: 42px; + display: block; + width: 100%; + height: 41px; + float: left; + border: none; + overflow: hidden; + z-index: 2; + position: relative; + background-color: inherit; + padding: 0; +} + +.ui-tabs .ui-tabs-nav.ui-corner-all { + border-bottom-left-radius: 0; +} + +.ui-tabs .ui-tabs-nav .ui-tab { + margin-right: 1px; +} + +.ui-tabs .ui-tab .ui-tabs-anchor { + float: left; + padding: 15px 10px; + min-width: 91px; + text-align: center; + font-size: 11px; + color: #4E6070; + text-decoration: none; + position: relative; +} + +.ui-tabs .ui-tab.ui-state-default { + border: 1px solid #D9D9D9; + background: #F0F0F0; +} + +.ui-tabs .ui-tab.ui-state-active { + background: #FFFFFF; +} + +.ui-tabs .ui-tab.ui-state-hover a { + text-decoration: underline; + /*color: #000000;*/ + cursor: pointer; +} diff --git a/ui/css/src/scss/custom.scss b/ui/css/src/scss/custom.scss new file mode 100644 index 00000000000..021362338d8 --- /dev/null +++ b/ui/css/src/scss/custom.scss @@ -0,0 +1,21 @@ +/* +* Licensed to the Apache Software Foundation (ASF) under one +* or more contributor license agreements. See the NOTICE file +* distributed with this work for additional information +* regarding copyright ownership. The ASF licenses this file +* to you under the Apache License, Version 2.0 (the +* "License"); you may not use this file except in compliance +* with the License. You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, +* software distributed under the License is distributed on an +* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +* KIND, either express or implied. See the License for the +* specific language governing permissions and limitations +* under the License. +* +* +* Use custom.css to override the default CloudStack styles +*/ diff --git a/ui/css/src/scss/token-input-facebook.scss b/ui/css/src/scss/token-input-facebook.scss new file mode 100644 index 00000000000..2eb2afcff72 --- /dev/null +++ b/ui/css/src/scss/token-input-facebook.scss @@ -0,0 +1,132 @@ +/* +* jQuery Plugin: Tokenizing Autocomplete Text Entry +* Version 1.6.0 +* +* Copyright (c) 2009 James Smith (http://loopj.com) +* Licensed jointly under the GPL and MIT licenses, +* choose which one suits your project best! +* +*/ +/* Example tokeninput style #2: Facebook style */ +ul.token-input-list-facebook { + overflow: hidden; + height: auto !important; + height: 1%; + width: 233px; + border: 1px solid #AFAFAF; + cursor: text; + font-size: 12px; + font-family: Verdana; + min-height: 1px; + z-index: 2147483647; + margin: 0; + padding: 0; + background-color: #F6F6F6; + list-style-type: none; + clear: left; +} + +ul.token-input-list-facebook li input { + border: 0; + width: 100px; + padding: 3px 8px; + background-color: white; + margin: 2px 0; + -webkit-appearance: caret; +} + +li.token-input-token-facebook { + overflow: hidden; + height: auto !important; + height: 15px; + margin: 3px; + padding: 1px 3px; + background-color: #eff2f7; + color: #000; + cursor: default; + border: 1px solid #ccd5e4; + font-size: 11px; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + float: left; + white-space: nowrap; +} + +li.token-input-token-facebook p { + display: inline; + padding: 0; + margin: 0; +} + +li.token-input-token-facebook span { + color: #a6b3cf; + margin-left: 5px; + font-weight: bold; + cursor: pointer; +} + +li.token-input-selected-token-facebook { + background-color: #5670a6; + border: 1px solid #3b5998; + color: #fff; +} + +li.token-input-input-token-facebook { + float: left; + margin: 0; + padding: 0; + list-style-type: none; +} + +div.token-input-dropdown-facebook { + position: absolute; + width: 233px; + background-color: #fff; + overflow: hidden; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; + cursor: default; + font-size: 11px; + font-family: Verdana; + z-index: 2147483647; +} + +div.token-input-dropdown-facebook p { + margin: 0; + width : 233px; + padding: 5px; + font-weight: bold; + color: #777; +} + +div.token-input-dropdown-facebook ul { + margin: 0; + padding: 0; +} + +div.token-input-dropdown-facebook ul li { + background-color: #fff; + padding: 3px; + margin: 0; + list-style-type: none; +} + +div.token-input-dropdown-facebook ul li.token-input-dropdown-item-facebook { + background-color: #fff; +} + +div.token-input-dropdown-facebook ul li.token-input-dropdown-item2-facebook { + background-color: #fff; +} + +div.token-input-dropdown-facebook ul li em { + font-weight: bold; + font-style: normal; +} + +div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook { + background-color: #3b5998; + color: #fff; +}