--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/layout.less Wed Dec 05 13:13:47 2018 +0100
@@ -0,0 +1,1347 @@
+
+/*
+ * Components layout
+ */
+
+@import "colors.less";
+
+html {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow-x: hidden!important;
+ background-color: @bodyColor;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow: hidden;
+ background-color: @bodyColor;
+ direction: ltr;
+
+ &.container {
+ position: relative;
+ padding: 0;
+ border-left: 1px solid #bfbfbf;
+ border-right: 1px solid #bfbfbf;
+ -webkit-box-shadow: 0 2px 70px rgba(0, 0, 0, .45);
+ box-shadow: 0 2px 70px rgba(0, 0, 0, .45);
+ }
+ &.nooverflow {
+ position: fixed;
+ overflow: hidden;
+ width: 100%;
+ }
+}
+
+#main {
+ display: block;
+ margin-left: 220px;
+ padding: 0;
+ min-height: 500px;
+ -webkit-transition: all .1s ease-out;
+ transition: all .1s ease-out;
+
+ @media (max-width:979px) {
+ margin-left: 0;
+ }
+}
+
+#content {
+ padding: 10px;
+ position: relative;
+ left: 0;
+ -webkit-transition: left .1s ease-out;
+ transition: left .1s ease-out;
+
+ @media (max-width:767px) {
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+}
+
+.page-title {
+ margin: 7px 0 10px;
+
+ a {
+ color: #6F8696;
+ }
+ a:hover,
+ a:active {
+ text-decoration: none;
+ }
+ span {
+ font-size: 16px;
+ color: #333;
+ display: inline-block;
+ vertical-align: 1px;
+
+ i {
+ padding: 0 5px;
+ }
+ }
+}
+
+aside {
+ display: block;
+ width: 220px;
+ overflow: hidden;
+ min-height: 100%;
+ background-color: @asideBgColor;
+
+ nav li.divider {
+ background: @navDividerBgColor;
+ }
+}
+
+#header {
+ display: block;
+ height: 49px;
+ position: relative;
+ margin: 0;
+ padding: 0 13px 0 0;
+ background-color: @headerBgColor;
+
+ @media (max-width:767px) {
+ padding-right: 5px;
+ }
+ @media only screen and (max-width:679px) {
+ padding-right: 5px;
+ background: @headerMobileBgColor;
+ }
+ >div {
+ display: inline-block;
+ vertical-align: middle;
+ height: 49px;
+ float: left;
+
+ &.open {
+ font-weight: 700;
+ }
+ }
+
+ .fixed-header & {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1001;
+
+ .container& {
+ max-width: 1164px;
+ }
+ .ajax-dropdown {
+ z-index: 1000;
+ }
+ }
+
+ #logo-group {
+ @media (max-width: 979px) {
+ display: none;
+ }
+ }
+}
+
+.fixed-header {
+ #shortcut {
+ position: fixed;
+ }
+ #main {
+ margin-top: 49px;
+ }
+}
+
+#top-links {
+ @media (max-width: 979px) {
+ margin-left: 10px;
+ }
+
+ >div {
+ display: inline-block;
+ float: left;
+
+ @media (max-width: 767px) {
+ display: none;
+ }
+ }
+}
+.top-menu {
+ display: inline-block;
+ padding: 7px 13px 0;
+ position: relative;
+
+ @media (max-width:767px) {
+ display: none;
+ }
+ >span {
+ display: block;
+ }
+ >:first-child {
+ display: block;
+ color: #bfbfbf;
+ font-size: 10px;
+ font-weight: 700;
+ text-transform: uppercase;
+ text-shadow: 0 0 1px #fff;
+ padding-left: 0;
+ text-align: left;
+ }
+ &.bordered {
+ background-color: white;
+ padding-top: 4px;
+ padding-bottom: 9px;
+ border-color: silver;
+ border-width: 2px 2px 0;
+ border-style: solid;
+ border-radius: 8px 8px 0 0;
+ margin-left: -1px;
+ }
+}
+.top-tabs {
+ display: inline-block;
+ padding: 7px 13px 0;
+ position: relative;
+
+ >span {
+ display: block;
+ }
+ >:first-child {
+ display: block;
+ color: #bfbfbf;
+ font-size: 10px;
+ font-weight: 700;
+ text-transform: uppercase;
+ text-shadow: 0 0 1px #fff;
+ padding-left: 5px;
+ text-align: left;
+ }
+ .nav-tabs {
+ li {
+ >a {
+ padding: 2px 10px 3px!important;
+ border-color: #ccc #ccc transparent;
+ box-shadow: 0px -2px 3px #ccc;
+ margin-top: 3px!important;
+ }
+ &.active >a {
+ margin-top: 3px!important;
+ padding: 2px 10px 3px!important;
+ }
+ .subtab {
+ display: none;
+ position: absolute;
+ min-width: 200px;
+ margin-top: -1px;
+ padding: 5px;
+ background-color: white;
+ border: 1px solid #ccc;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+ z-index: 101;
+
+ .slider {
+ width: ~"calc(100% - 10px)";
+ margin: 0 5px;
+ }
+ }
+ }
+ }
+}
+.top-selector {
+ max-width: 97%;
+ white-space: nowrap;
+ background: 0 0;
+ border: 0;
+ padding: 0;
+ text-align: left;
+ color: #555;
+ font-size: 14px;
+ cursor: pointer;
+
+ &:hover {
+ color: #333;
+ }
+}
+
+
+#user-menu {
+ position: relative;
+
+ .btn {
+ position: relative;
+ margin-top: 10px;
+ margin-bottom: 8px;
+ padding: 3px 6px 3px 0;
+ width: 60px;
+
+ @media (max-width: 767px) {
+ margin-top: 5px;
+ margin-left: 5px!important;
+ width: 40px;
+ padding-top: 5px;
+ padding-bottom: 4px;
+
+ i.fa {
+ float: none!important;
+ font-size: 150%;
+ }
+ }
+ img,
+ i.img {
+ position: absolute;
+ left: -1px;
+ top: -4px;
+ border: solid 1px white;
+ padding: 2px;
+ background-color: white;
+ transform: rotate(-7deg);
+
+ @media (max-width: 767px) {
+ display: none;
+ }
+ }
+ i.img {
+ width: 34px;
+ height: 34px;
+ color: #999;
+ opacity: 1;
+ font-size: 220%;
+ }
+
+ &:active {
+ img,
+ i.img {
+ left: -2px;
+ top: -5px;
+ }
+ }
+ }
+ @media (max-width: 767px) {
+ .dropdown-menu {
+ a {
+ width: auto!important;
+ }
+ }
+ }
+}
+
+
+#user-activity {
+ position: relative;
+
+ .badge {
+ position: absolute;
+ top: 2px;
+ right: -8px;
+
+ @media (max-width: 767px) {
+ top: -2px;
+ }
+ }
+}
+
+
+#login-info {
+ @media (max-width:979px) {
+ display: none;
+ }
+ >span {
+ display: inline-block;
+ height: 39px;
+ float: left;
+
+ .badge {
+ position: absolute;
+ top: -5px;
+ right: -9px;
+ cursor: pointer;
+ background: #0091d9;
+ display: inline-block;
+ font-size: 10px;
+ -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
+ box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
+ color: #fff;
+ font-weight: 700;
+ border-radius: 50%;
+ padding: 3px;
+ text-align: center;
+ line-height: normal;
+ }
+ }
+ span#activity {
+ border-radius: 2px;
+ cursor: default!important;
+ display: inline-block;
+ font-weight: 700;
+ height: 24px;
+ width: 24px;
+ padding: 2px;
+ text-align: center;
+ text-decoration: none!important;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ background-color: #f8f8f8;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1));
+ background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+ background-image: -webkit-gradient(linear, top left, bottom left, from(#f8f8f8), to(#f1f1f1));
+ background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+ background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
+ border: 1px solid #bfbfbf;
+ color: #c4bab6;
+ font-size: 19px;
+ margin: 5px 0 0;
+ position: relative;
+
+ &:hover {
+ border: 1px solid #bfbfbf;
+ -webkit-transition: all 0s;
+ transition: all 0s;
+ cursor: pointer!important;
+ -webkit-box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .08);
+ box-shadow: inset 0 0 4px 1px rgba(0, 0, 0, .08);
+ }
+ }
+}
+
+.authomatic {
+ display: inline-block;
+ width: 21px;
+ height: 21px;
+ margin: 2px 0!important;
+ padding: 3px!important;
+ text-align: center;
+
+ &:hover {
+ background-color: #ccc;
+ border-radius: 3px;
+ }
+}
+
+#logo {
+ display: inline-block;
+ max-width: 100%;
+
+ @media (min-width:768px) and (max-width:880px) {
+ margin-top: 10px;
+ }
+ @media (max-width:767px) {
+ margin-top: 10px;
+ margin-left: 4px;
+ }
+ @media only screen and (min-width:0) and (max-width:679px) {
+ margin-top: 10px;
+ margin-left: 4px;
+ }
+ @media only screen and (min-width:320px) and (max-width:479px) {
+ width: 135px;
+ margin-top: 10px;
+ margin-left: 4px;
+ }
+ img {
+ max-width: 100%;
+ max-height: 50px;
+ }
+}
+
+#logo-group {
+ width: 220px;
+
+ @media only screen and (min-width:480px) and (max-width:1089px) {
+ width: 175px;
+ }
+ @media only screen and (min-width:320px) and (max-width:479px) {
+ width: 169px!important;
+ }
+}
+
+.uv-icon {
+ position: absolute!important;
+ left: 155px!important;
+ top: 5px!important;
+ z-index: 500!important;
+
+ @media only screen and (min-width:0) and (max-width:1089px) {
+ left: 130px!important;
+ }
+}
+
+#activity.active .badge {
+ background: #006fa6!important;
+}
+
+.header-search {
+ position: relative;
+
+ @media (max-width:767px) {
+ display: none;
+ }
+
+ &.pull-right {
+ margin-left: 6px;
+
+ @media (max-width:979px) {
+ margin-left: 0;
+ }
+ }
+ >input[type=text] {
+ display: block;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ min-width: 200px;
+ width: 100%;
+ height: 30px;
+ padding: 0 10px;
+ outline: 0;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 0;
+ border-color: #bfbfbf;
+ background: #fff;
+ color: #404040;
+ appearance: normal;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ margin-top: 10px;
+ line-height: normal;
+
+ @media (min-width:768px) and (max-width:979px) {
+ margin-top: 9px;
+ }
+ }
+ >button {
+ background: 0 0;
+ border: 0;
+ color: #6D6A69;
+ font-size: 17px;
+ height: 30px;
+ line-height: 30px;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ right: 0;
+ top: 10px;
+ width: 30px;
+ z-index: 2;
+ }
+}
+
+#search-mobile {
+ display: none;
+
+ @media (max-width:767px) {
+ display: block;
+ }
+ @media only screen and (min-width:0) and (max-width:679px) {
+ display: block;
+ }
+ @media only screen and (min-width:320px) and (max-width:479px) {
+ margin-left: 0;
+ }
+}
+
+.search-mobile {
+ @media (max-width:767px) {
+ .header-search {
+ display: block;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 49px;
+ background: #333;
+ padding: 0 2px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ left: 0;
+
+ >input[type=text] {
+ margin-top: 2px;
+ height: 45px;
+ border-color: #333;
+ padding-right: 75px;
+ }
+ >button {
+ height: 29px;
+ line-height: 29px;
+ background: #DDD;
+ right: 44px;
+ }
+ }
+ #search-mobile {
+ display: none;
+ }
+ #cancel-search-js {
+ display: block;
+ }
+ }
+}
+
+#cancel-search-js {
+ position: absolute;
+ display: none;
+ background: #a90329;
+ z-index: 3;
+ color: #fff;
+ padding: 0;
+ right: 10px;
+ top: 10px;
+ text-align: center;
+ height: 29px;
+ line-height: 29px;
+ width: 30px;
+ font-size: 17px;
+ text-decoration: none!important;
+}
+
+#left-panel {
+ position: absolute;
+ top: 49px;
+ left: 0;
+ z-index: 1002;
+ -webkit-transition: left .1s ease-out;
+ transition: left .1s ease-out;
+ overflow-y: auto;
+
+ @media (max-width:979px) {
+ left: -220px;
+ }
+ .fixed-navigation & {
+ position: fixed;
+ z-index: 998;
+
+ @media (max-width:767px) {
+ position: absolute!important;
+ }
+ }
+ #ajax-gear {
+ position: absolute;
+ left: calc(50% - 1em);
+ top: 5px;
+ }
+ .version {
+ bottom: 2px;
+ margin-top: 40px;
+ width: 100%;
+ text-align: center;
+ font-size: 11px;
+ color: #333;
+ }
+}
+
+#ribbon {
+ height: 40px;
+ background: @ribbonBgColor;
+ padding: 0 40px 0 13px;
+ position: relative;
+
+ @media (max-width:767px) {
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+ @media only screen and (min-width:0) and (max-width:679px) {
+ border-bottom: 1px solid @ribbonMobileBorderBottomColor;
+ border-top: 1px solid @ribbonMobileBorderTopColor;
+ background: @ribbonMobileBgColor;
+ }
+ .breadcrumb {
+ display: inline-block;
+ margin: 0;
+ padding: 12px 34px 10px 0!important;
+ background: 0 0;
+ vertical-align: top;
+
+ li.strong {
+ a {
+ line-height: 1em;
+ font-weight: bold;
+ font-size: 120%;
+ color: @ribbonLinkStrongColor!important;
+
+ @media only screen and (min-width:0) and (max-width:679px) {
+ color: @ribbonMobileLinkStrongColor!important;
+ }
+ }
+ }
+ &,
+ a {
+ color: @ribbonLinkColor!important;
+ text-decoration: none!Important;
+
+ @media only screen and (min-width:0) and (max-width:679px) {
+ color: @ribbonMobileLinkColor!important;
+ }
+ }
+ >li+li:before {
+ padding: 0 3px;
+ //font-size: 14px;
+ //font-weight: normal;
+ }
+ >li+li.strong:before {
+ padding-right: 1px;
+ }
+ li:last-child,
+ >.active {
+ color: @ribbonActiveLinkColor;
+
+ @media only screen and (min-width:0) and (max-width:679px) {
+ color: @ribbonMobileActiveLinkColor!important;
+ }
+ a {
+ font-weight: bold;
+ }
+ }
+ }
+}
+
+.fixed-ribbon {
+ #ribbon {
+ position: fixed;
+ right: 0;
+ left: 220px;
+ top: 49px;
+ z-index: 999;
+
+ @media (max-width:979px) {
+ left: 0;
+ }
+ }
+ .container& #ribbon {
+ width: 944px;
+ left: 590px;
+ }
+ #content {
+ padding-top: 50px;
+
+ @media (max-width:767px) {
+ padding-top: 52px;
+ }
+ }
+ .minified& #ribbon {
+ left: 45px;
+ }
+ .hidden-menu& #ribbon {
+ left: 10px;
+
+ @media (max-width:979px) {
+ left: 220px;
+ }
+ }
+}
+.hidden-ribbon {
+ #ribbon {
+ height: 1px;
+ min-height: 1px;
+ max-height: 1px;
+
+ >* {
+ display: none;
+ }
+ }
+}
+
+.ribbon {
+ position: absolute;
+ right: 9px;
+ top: -4px;
+}
+
+.header-dropdown-list {
+ list-style: none;
+ float: right;
+ position: relative;
+ margin: 0;
+ padding-left: 10px;
+
+ >li {
+ display: inline-block;
+ padding-right: 5px;
+ }
+ >li >.dropdown-toggle {
+ margin-top: 16px;
+ display: block;
+ }
+}
+
+.smart-accordion-default {
+ &.panel-group {
+ .panel+.panel {
+ margin-top: -1px;
+ }
+ .panel-heading {
+ padding: 0;
+ }
+ .panel-title a {
+ display: block;
+ padding: 10px 15px;
+ text-decoration: none!important;
+ }
+ }
+ .panel-group .panel,
+ .panel-heading {
+ border-radius: 0;
+ }
+ .panel-default {
+ border-color: #c3c3c3;
+
+ >.panel-heading {
+ background-color: #fcfcfc;
+ }
+ }
+ .panel-title {
+ >a.collapsed >.fa,
+ >a >:first-child {
+ display: none;
+ }
+ >a.collapsed >:first-child {
+ display: inline-block;
+ }
+ }
+ .no-padding & {
+ >div {
+ border-left: 0!important;
+ border-right: 0!important;
+ }
+ >div:first-child {
+ border-top: 0!important;
+ }
+ >div:last-child {
+ border-bottom: 0!important;
+ }
+ }
+}
+
+#logo-group *,
+.login-info,
+.login-info *,
+.minified .menu-item-parent {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+.login-info {
+ display: block;
+ font-size: 12px;
+ height: 39px;
+ color: #333;
+ border: solid transparent;
+ margin: 2px 0 0 10px !important;
+ float: right;
+
+ a,
+ strong {
+ text-transform: capitalize;
+ font-size: 14px;
+ display: inline-block;
+ color: #333;
+ text-decoration: none;
+ margin-left: 5px;
+ }
+ a:hover,
+ strong {
+ color: #666;
+ }
+ a.btn {
+ margin-top: 5px;
+ }
+ a.btn-danger,
+ a.btn-success,
+ a.btn-primary {
+ color: @white;
+ }
+ span {
+ /*height: 38px;*/
+ display: inline-block;
+ padding: 0 0 0 10px;
+ /*border-bottom: 1px solid #1A1817;*/
+
+ a.btn-success {
+ margin-top: -10px;
+ }
+ }
+ img {
+ width: 24px;
+ height: auto;
+ display: inline-block;
+ vertical-align: middle;
+ margin-top: -6px;
+ margin-right: 0;
+ margin-left: 0;
+ border-left: 0;
+ }
+}
+
+.minifyme {
+ border-bottom: 1px solid #302F2F;
+ background: #454545;
+ color: #A8A8A8;
+ text-align: center;
+ padding: 1px 0 0;
+ width: 36px;
+ height: 28px;
+ display: block;
+ position: absolute;
+ right: -3px;
+ border-radius: 5px 0 0 5px;
+ cursor: pointer;
+ margin-top: 5px;
+ margin-bottom: 10px;
+ font-size: 19px;
+ -webkit-transition: all .1s linear 0s;
+ transition: all .1s linear 0s;
+
+ &:hover {
+ background: #646464;
+ color: #E4E4E4;
+ right: 0;
+ }
+}
+
+.minified {
+ .minifyme {
+ right: 0;
+ color: #A8A8A8;
+ position: relative;
+ width: 100%;
+ border-radius: 0;
+ margin: 0;
+ height: 32px;
+ font-size: 23px;
+
+ .fa:before {
+ content: "\f0a9";
+ }
+ }
+ #left-panel {
+ width: 45px;
+ overflow: visible;
+
+ @media (max-width:979px) {
+ left: 0;
+ }
+ }
+ #main {
+ margin-left: 45px;
+ }
+ #left-panel,
+ nav {
+ >ul >li {
+ overflow: visible;
+ /*border-bottom: 1px solid #1A1817;
+ border-top: 1px solid #525151;*/
+
+ >ul::before {
+ border-left: 0;
+ }
+ }
+ >ul >li,
+ >ul >li a {
+ position: relative;
+ }
+ ul >li >a {
+ padding: 12px 11px 10px;
+ display: block;
+ }
+ >ul >li >a .fa.fa-fw {
+ display: block;
+ width: auto;
+ text-align: center;
+ padding: 0;
+ }
+ >ul >li >a >i {
+ text-align: center;
+ margin: 0;
+ display: block;
+ }
+ >ul >li.active >a::before {
+ content: "\f0d9";
+ }
+ ul ul li a {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 14px;
+ }
+ ul ul li li a {
+ padding-left: 25px;
+ }
+ >ul ul li::before,
+ >ul >li >ul::before {
+ left: 12px;
+ }
+ >ul >li >a .menu-item-parent,
+ >ul >li >a >b {
+ display: none;
+ }
+ >ul >li >a >.menu-item-parent {
+ display: none;
+ position: absolute;
+ left: 40px;
+ top: -3px;
+ width: 186px;
+ height: 36px;
+ line-height: 38px;
+ background-color: #f5f5f5;
+ color: #333;
+ z-index: 3;
+ -webkit-box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, .2);
+ box-shadow: 2px 1px 2px 0 rgba(0, 0, 0, .2);
+ border-left: 1px solid #bfbfbf;
+ border-top: 1px solid #D8D4D4;
+ border-bottom: 1px solid #fff;
+ padding-left: 12px;
+ }
+ >ul >li >ul {
+ display: none!important;
+ position: absolute;
+ left: 40px;
+ width: 200px;
+ z-index: 5;
+ border: 1px solid @navBgColor;
+ min-height: 180px;
+ -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .2);
+ box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .2);
+ background: @navBgColor;
+ margin-top: -3px;
+ }
+ ul >li >ul >li >ul {
+ position: relative;
+ left: 13px;
+ border: 0;
+ margin-left: -12px;
+ width: 197px;
+ }
+ >ul >li:hover >a >.menu-item-parent,
+ >ul >li:hover >ul {
+ display: block!important;
+ }
+ >ul >li >ul >li {
+ background-color: @navBgColor;
+ }
+ >ul >li >ul >li >ul >li {
+ background-color: @navSubMenuBgColor;
+ }
+ >ul >li >ul >li >a,
+ >ul >li >ul >li >ul >li >a {
+ padding-top: 7px;
+ padding-bottom: 7px;
+ }
+ >ul >li >ul >li >ul >li a {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+ >ul >ul {
+ min-height: 100px!important;
+ max-height: 180px!important;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ background: #ed1c24!important;
+ }
+ >ul ul li::before {
+ border: 0;
+ }
+ ul ul ul ul li a {
+ padding-left: 45px;
+ }
+ ul ul ul ul ul li a {
+ padding-left: 62px;
+ }
+ ul ul ul ul ul ul li a {
+ padding-left: 82px;
+ }
+ }
+ #left-panel {
+ .version {
+ display: none;
+ }
+ }
+ .slimScrollDiv,
+ .slimScrollDiv>:first-child {
+ overflow: visible!important;
+ }
+ .slimScrollBar,
+ .slimScrollRail {
+ display: none;
+ }
+}
+
+.slimScrollDiv, .slimScrollDiv>:first-child {
+ overflow: hidden;
+}
+
+#hide-menu,
+#logout {
+ i {
+ @media (max-width:979px) {
+ color: #6D6A69;
+ font-size: 100%;
+ }
+ @media (min-width:0) and (max-width:880px) {
+ font-size: 121%;
+ }
+ }
+}
+
+.hidden-menu {
+ #left-panel {
+ left: -210px;
+ z-index: 1002;
+
+ @media (max-width:979px) {
+ left: 0;
+ }
+ &:hover {
+ left: 0;
+ }
+ }
+ #main {
+ margin-left: 10px;
+
+ .minified& {
+ margin-left: 0;
+ }
+ @media (max-width:979px) {
+ position: relative;
+ left: 210px;
+
+ .minified& {
+ left: 0;
+ }
+ }
+ }
+ #hide-menu {
+ i {
+ @media (max-width:979px) {
+ color: #fff;
+ }
+ @media (min-width:768px) and (max-width:880px) {
+ &::before {
+ content: "\f0c9";
+ }
+ }
+ @media (max-width:767px) {
+ color: #fff;
+
+ &::before {
+ content: "\f0c9";
+ }
+ }
+ }
+ >:first-child >a {
+ background-color: #e8e8e8;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5a5a5a), color-stop(100%, #686868));
+ background-image: -webkit-linear-gradient(to bottom, #5a5a5a 0, #686868 100%);
+ background-image: -webkit-gradient(linear, top left, bottom left, from(#5a5a5a), to(#686868));
+ background-image: -webkit-linear-gradient(top, #5a5a5a 0, #686868 100%);
+ background-image: linear-gradient(to bottom, #5a5a5a 0, #686868 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5A5A5A', endColorstr='#686868', GradientType=0);
+ color: #fff;
+ border-color: #494949;
+ -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, .15);
+ box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, .15);
+
+ @media (min-width:768px) and (max-width:979px) {
+ margin-top: 9px;
+ width: 40px;
+ }
+ &:active {
+ -webkit-box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, .2);
+ box-shadow: inset 0 0 6px 1px rgba(0, 0, 0, .2);
+ }
+ }
+ }
+}
+.hidden-menu .minifyme,
+.minified #hide-menu {
+ display: none;
+}
+
+.no-menu {
+ #left-panel {
+ left: -220px;
+ z-index: 0;
+ }
+ #main {
+ margin-left: 0;
+ }
+ #hide-menu {
+ display: none;
+ }
+}
+
+#shortcuts {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: auto;
+ width: 100%;
+ background-color: #33302F;
+ background-color: rgba(0, 0, 0, .85);
+ z-index: 1009;
+ display: none;
+ color: #fff;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ ul {
+ padding: 15px 20px 10px;
+ list-style: none;
+ margin: 0;
+ -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
+ border-bottom: 1px solid #423F3F;
+
+ li {
+ display: inline-block;
+ width: auto;
+
+ .ams-metro-tile {
+ margin: 0 3px 3px;
+ border: 0;
+ border-radius: 0;
+
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ }
+ &:active,
+ &:focus {
+ left: 0;
+ top: 0;
+ }
+ }
+ a {
+ display: inline-block;
+ box-sizing: content-box;
+ text-transform: capitalize;
+ font-size: 14px;
+ color: #333;
+ text-decoration: none;
+
+ span {
+ display: inline-block;
+ padding: 0 0 0 10px;
+ }
+ }
+ }
+ }
+
+ .version {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+}
+
+.shortcut-on #response-btn {
+ display: none!important;
+}
+.shortcut-on #left-bar .navbar, .shortcut-on #main .navbar {
+ border: 0!important;
+}
+
+#sparks {
+ display: block;
+ list-style: none;
+ margin: 10px 0 0;
+ padding: 0;
+ text-align: right;
+
+ @media only screen and (min-width:320px) and (max-width:479px) {
+ text-align: center;
+ background: #E0E0E0;
+ padding: 10px 0;
+ margin-bottom: 15px;
+ }
+ li {
+ display: inline-block;
+ border-left: 1px dotted #c7c7c7;
+ padding: 0 10px;
+ max-height: 47px;
+ overflow: hidden;
+ text-align: left;
+ box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+
+ @media only screen and (min-width:320px) and (max-width:479px) {
+ padding: 0 10px 0 20px;
+ }
+ &:last-child {
+ padding-right: 0;
+ }
+ &:first-child {
+ border-left: 0;
+ padding-left: 0;
+ }
+ h5 {
+ color: #555;
+ float: left;
+ font-size: 11px;
+ font-weight: 400;
+ margin: -3px 0 0 0;
+ padding: 0;
+ border: 0;
+ text-transform: uppercase;
+ }
+ span {
+ color: #636363;
+ display: block;
+ }
+ }
+}
+.sparks-info {
+ min-width: 70px;
+}
+.sparks-info span {
+ font-size: 18px;
+ line-height: 20px;
+ margin: 0;
+ text-transform: none;
+}
+.sparks-info .sparkline {
+ display: block;
+ float: right;
+ margin: 3px 0 0 20px;
+}
+
+#heat-fill {
+ display: block;
+ position: relative;
+ margin-bottom: 20px;
+ background: #333;
+ height: 7px;
+ width: 200px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAABCAIAAAAU3Xa1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMDE4MkZGMzMzOTgxMUUzODZBQUNFQUNFOTk0NEUxRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMDE4MkZGNDMzOTgxMUUzODZBQUNFQUNFOTk0NEUxRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAwMTgyRkYxMzM5ODExRTM4NkFBQ0VBQ0U5OTQ0RTFGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAwMTgyRkYyMzM5ODExRTM4NkFBQ0VBQ0U5OTQ0RTFGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+rG8MDAAAAM5JREFUeNpUUtESwyAIg8ft9v8/W4ElBPWKV1AIiKEeEWVuVlWjINSVONBnirQDxukNgcuyTQsBzLHMDsLIQQw+nIL71JqNJ5GZJXApFNpmtlagQjfS2xGbkFA4Iwu+hu0sK3Wl3nOwNv7TvPrWk3X0eW9dK1pU9hK2eTuWb2ySJmlziutA3iBxmblPNvA5PNsuUpoDY80+Z0SW1IRpDEqwC58C14tsr1f8le8si0aojdADr/1UjaclsFashX8GGkL9wDxtRsV6ft/PX4ABADRzhOVIOJaAAAAAAElFTkSuQmCC);
+}
+.fill-a,
+.fill-b {
+ width: 20px;
+ text-align: right;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: block;
+ background: #fff;
+ padding-right: 4px;
+ position: absolute;
+ left: 0;
+ margin-top: -7px;
+ font-weight: 700;
+}
+.fill-b {
+ text-align: left;
+ position: absolute;
+ right: 0;
+ left: auto;
+ top: 0;
+ width: 60px;
+ padding-left: 4px;
+ padding-right: 0;
+}
+
+.cke_top {
+ background: rgba(248, 248, 248, .9)!important;
+ background-image: none!important;
+}
+