You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ofbiz.apache.org by jn...@apache.org on 2018/02/15 15:07:22 UTC
svn commit: r1824321 [3/3] - in /ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone: rainbowstone-amber.less rainbowstone-emerald.less rainbowstone-main-theme.less rainbowstone-ruby.less rainbowstone-saphir.less

Modified: ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less?rev=1824321&r1=1824320&r2=1824321&view=diff
==============================================================================
--- ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less (original)
+++ ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-ruby.less Thu Feb 15 15:07:22 2018
@@ -1,34 +1,3 @@
-/* common colors */
-@black: #000;
-@white: #fff;
-@grey: #e6e6e6;
-@greydark: #929292;
-
-@color-success: #8cff8c;
-@font-color-for-success: @black;
-@color-alert: #ff8c8c;
-@font-color-for-alert: @black;
-
-@color-success-dark: #356e35;
-@font-color-for-success: @black;
-@color-alert-dark: #932f33;
-@font-color-for-alert: @black;
-
-@color-background-alert: #f2dede;
-@color-font-alert: #a94442;
-@color-border-alert: #ebccd1;
-
-@color-background-success: #dff0d8;
-@color-font-success: #3c763d;
-@color-border-success: #d6e9c6;
-
-/* Sapphire colors */
-@blue-dark: #002333;
-@blue-main: #005982;
-@blue-medium: #c7dfff;
-@blue-light: #f1f7ff;
-@blue-light2: #e4f0f5;
-
 /* Ruby colors */
 @red-dark: #420000;
 @red-main: #bf1616;
@@ -36,37 +5,7 @@
 @red-light: #fce7e7;
 @red-light2: #fed7c9;
 
-/* Emerald colors */
-@green-dark: #197948;
-@green-main: #23af9b;
-@green-medium: #7ae3ad;
-@green-light: #e5f9ef;
-@green-light2: #d7f9ef;
-
-/* Amber colors */
-@amber-dark: #bc4216;
-@amber-main: #f08906;
-@amber-medium: #f5c4b3;
-@amber-light: #fcede8;
-@amber-light2: #fcedcd;
-
-/* Sapphire theme */
-/*
-@main-color-theme : @blue-main;
-@dark-color-theme : @blue-dark;
-@medium-color-theme : @blue-medium;
-@light-color-theme : @blue-light;
-@light2-color-theme : @blue-light2;
-@font-color-for-dark : @grey;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-
 /* Ruby theme */
-
 @main-color-theme : @red-main;
 @dark-color-theme : @red-dark;
 @medium-color-theme : @red-medium;
@@ -79,1917 +18,5 @@
 @shadow-color : @black;
 @shadow-color-light : @greydark;
 
-
-/* Emerald theme */
-/*
-@main-color-theme : @green-main;
-@dark-color-theme : @green-dark;
-@medium-color-theme : @green-medium;
-@light-color-theme : @green-light;
-@light2-color-theme : @green-light2;
-@font-color-for-dark : @white;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-/* Amber theme */
-/*
-@main-color-theme : @amber-main;
-@dark-color-theme : @amber-dark;
-@medium-color-theme : @amber-medium;
-@light-color-theme : @amber-light;
-@light2-color-theme : @amber-light2;
-@font-color-for-dark : @white;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-
-
-@app-bar-height: 60px;
-@sub-app-bar-height: 40px;
-@footer-height: 20px;
-@home-btn-width: 47px;
-@color-line-height: 9px;
-
-@home-menu-tile-height: 80px;
-@home-menu-tile-min-width: 100px;
-@home-menu-tile-max-width: 100px;
-
-@third-lvl-height: 80px;
-@third-lvl-width : 100px;
-@min-screen : 1170px;
-@min-container-width: 1130px;
-
-@box-border-color: #d7d7d7;
-
-@font-face {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  src: url('fonts/quicksand/quicksandbold.otf');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  src: url('fonts/quicksand/quicksandbold.otf');
-  font-weight: bold;
-  font-style: normal;
-}
-
-/* ---------------------------------- */
-/* Begin special checkbox type switch */
-/* ---------------------------------- */
-
-[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox {
-  display: none;
-}
-
-[type="checkbox"]:not(:checked).nrd-chkbox + label,
-[type="checkbox"]:checked.nrd-chkbox + label{
-  cursor: pointer;
-}
-[type="checkbox"]:not(:checked).nrd-chkbox + label:before,
-[type="checkbox"]:checked.nrd-chkbox + label:before{
-  content: "";
-  width: 150px;
-  min-width: 150px;
-  background-color: @light-color-theme;
-  padding: 2px 20px 2px 20px;
-  border-radius: 8px 8px 8px 8px;
-
-  cursor: pointer;
-}
-
-[type="checkbox"]:not(:checked).nrd-chkbox + label:after,
-[type="checkbox"]:checked.nrd-chkbox + label:after{
-  content: "";
-  position: relative;
-  left:-35px;
-  background-color: @dark-color-theme;
-  min-height: 10px;
-  min-width: 10px;
-  padding-left: 4px;
-  padding-right: 5px;
-  border-radius: 8px 8px 8px 8px;
-  transition: all .2s;
-}
-
-[type="checkbox"]:checked.nrd-chkbox + label:after{
-  position: relative;
-  left: -15px;
-  transition: all .2s;
-}
-/* ---------------------------------- */
-/* End special checkbox type switch */
-/* ---------------------------------- */
-
-/* ---------------------------------- */
-/*  Begin square Checkbox             */
-/* ---------------------------------- */
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox,
-[type="checkbox"]:checked.nrd-square-chkbox{
-  position: absolute;
-  left: -9999px;
-}
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label,
-[type="checkbox"]:checked.nrd-square-chkbox + label{
-  content: '';
-  padding-left: 35px;
-  position: relative;
-  cursor: pointer;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 12px;
-
-}
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before,
-[type="checkbox"]:checked.nrd-square-chkbox + label:before{
-  content: '';
-  position: absolute;
-  left:10px;
-  top: -4px;
-  width: 17px;
-  height: 17px; /* dim. de la case */
-  border: 1px solid #aaa;
-  background: @light-color-theme;
-  border-radius: 2px;
-}
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before {
-  background: @light-color-theme;
-}
-[type="checkbox"]:checked.nrd-square-chkbox + label:before{
-  background: @main-color-theme;
-}
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after,
-[type="checkbox"]:checked.nrd-square-chkbox + label:after{
-  content: 'â';
-  position: absolute;
-  top: -4px;
-  left: 14px;
-  font-size: 16px;
-  color: @font-color-for-main;
-  transition: all .2s;
-}
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after {
-  opacity: 0;
-  transform: scale(0);
-}
-[type="checkbox"]:checked.nrd-square-chkbox + label:after {
-  opacity: 1;
-  transform: scale(1);
-}
-/* ---------------------------------*/
-/*  End square Checkbox             */
-/* ---------------------------------*/
-
-/* ---------------------------------*/
-/*  Begin class content mgmt        */
-/* ---------------------------------*/
-
-
-.flex-row {
-  display: flex;
-  flex-direction: row !important;
-}
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.col-width-1 {
-  width: 10%;
-}
-.col-width-2 {
-  width: 20%;
-}
-.col-width-3 {
-  width: 30%;
-}
-.col-width-4 {
-  width: 40%;
-}
-.col-width-5 {
-  width: 50%;
-}
-.col-width-6 {
-  width: 60%;
-}
-.col-width-7 {
-  width: 70%;
-}
-.col-width-8 {
-  width: 80%;
-}
-.col-width-9 {
-  width: 90%;
-}
-.col-width-10 {
-  width: 100%;
-}
-
-.align-v-center {
-  display:flex;
-  align-items: center;
-}
-
-.align-h-center {
-  display:flex;
-  justify-content: center;
-}
-
-/* ---------------------------------*/
-/*    End class content mgmt        */
-/* ---------------------------------*/
-
-
-/* ---------------------------------- */
-/*  Begin btn-sort         */
-/* ---------------------------------- */
-
-.btn-sort {
-  position: relative;
-  top: -6px;
-  border:none;
-  background:none;
-  border-radius: 0;
-  margin-left:5px;
-}
-
-.btn-sort:before{
-  content: '';
-  position: absolute;
-  left: -1px;
-  width: 0;
-  height: 0;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid @greydark;
-  border-left: 10px solid transparent;
-}
-
-.btn-sort:after{
-  content: '';
-  position: absolute;
-  right: -1px;
-  width: 0;
-  height: 0;
-  border-right: 10px solid transparent;
-  border-top: 10px solid @greydark;
-  border-left: 10px solid transparent;
-  @media screen and (max-width: 1349px) {
-    right: -5px;
-  }
-}
-
-.btn-sort.btn-sort-asc:before{
-  border-bottom: 10px solid @main-color-theme;
-}
-
-.btn-sort.btn-sort-desc:after{
-  border-top: 10px solid @main-color-theme;
-}
-
-/* ---------------------------------- */
-/*  End btn-sort           */
-/* ---------------------------------- */
-
-
-/* ---------------------------------- */
-/*  Begin defaut colour class         */
-/* ---------------------------------- */
-
-.dark-color {
-  background-color: @dark-color-theme !important;
-  color: @font-color-for-dark !important;
-}
-.main-color {
-  background-color: @main-color-theme !important;
-  color: @font-color-for-main !important;
-}
-.medium-color {
-  background-color: @medium-color-theme !important;
-  color: @font-color-for-medium !important;
-}
-.light-color {
-  background-color: @light-color-theme !important;
-  color: @font-color-for-light !important;
-}
-.light2-color {
-  background-color: @light2-color-theme !important;
-  color: @font-color-for-light !important;
-}
-
-.grey-color {
-  background-color: @grey !important;
-}
-.darkgrey-color {
-  background-color: @greydark !important;
-}
-
-/* begin lookup widget */
-.ui-dialog {
-  opacity: 1;
-  z-index: 50;
-}
-
-.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
-  background: none !important;
-  background-color: @dark-color-theme !important;
-  button {
-    background: none;
-    background-color: @light-color-theme;
-  }
-}
-/* end lookup widget */
-
-.main-bar-label {
-  color: @light-color-theme;
-  padding-left: 3px;
-  padding-right: 6px;
-  font-size: 15px;
-  font-weight: bold;
-}
-
-#company-logo {
-  right: 10px;
-  top: 2px;
-  background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover;
-  min-height: 50px;
-  min-width: 50px;
-  margin-right: 15px;
-  align-self: center;
-  @media screen and (min-width : 1232px) {
-    min-height: 50px;
-    min-width: 129px;
-    background: url("images/ofbiz_logo.svg") no-repeat left top / cover;
-  }
-}
-
-.modal-screen {
-  visibility: hidden;
-  display: flex;
-  flex-direction: column;
-  background-color: @grey;
-  opacity: .93;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-}
-
-.modal-box{
-  background-color: @white;
-  opacity: 1;
-  margin: 10%;
-  border-radius: 10px;
-  border: solid 2px @main-color-theme;
-  padding : 10px 40px 10px 40px;
-  .modal-header {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    h2 {
-      font-size: 25px;
-      font-weight: normal;
-      color: @main-color-theme;
-    }
-    .btn-close-nrd {
-      position: absolute;
-      right: 0;
-      display: flex;
-      justify-content: center;
-      border: solid 1px @main-color-theme;
-      border-radius: 5px;
-      color: @main-color-theme;
-      font-size: 25px;
-      height: 30px;
-      width: 30px;
-      text-decoration: none !important;
-    }
-  }
-  .modal-body {
-    p {
-      font-size: 20px;
-    }
-  }
-  .modal-footer {
-    position: relative;
-    height: 35px;
-    display: flex;
-    justify-content: flex-end;
-    .btn-nrd {
-      background: none;
-      border: none;
-      text-shadow: none;
-      opacity: 1;
-      margin-right: 10px;
-      font-size: 20px;
-      padding: 5px;
-      border-radius: 8px;
-    }
-    .btn-nrd-main {
-      background-color: @main-color-theme;
-      color: @white;
-    }
-    .btn-nrd-std {
-      background-color: @white;
-      color: @main-color-theme;
-      border: solid 1px @main-color-theme !important;
-    }
-  }
-}
-.btn-nrd:hover {
-  box-shadow: 5px 5px 3px 0 @black;
-}
-
-.btn-nrd-std:hover {
-  background-color: @main-color-theme !important;
-  color: @white !important;
-  border: solid 1px @main-color-theme !important;
-}
-
-.btn-close-nrd:hover {
-  background-color: @main-color-theme !important;
-  color: @white !important;
-}
-
-.list-nrd {
-  border: solid 2px @main-color-theme;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  display: flex;
-  flex-direction: column;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  .title-list-nrd {
-    background-color: @main-color-theme;
-    color : @white;
-    font-size: 20px;
-    font-weight: bold;
-    padding-left: 5px;
-  }
-
-  li {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    font-size: 20px;
-    padding-left: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    margin-bottom: 3px;
-    a {
-      color: @main-color-theme;
-    }
-    span {
-      position: absolute;
-      right: 0;
-      color: @main-color-theme;
-      font-size: 30px;
-    }
-  }
-}
-li.line-odd {
-  background-color: @light-color-theme;
-}
-
-#user-avatar {
-  height: 40px;
-  width: 40px;
-  padding: 2px;
-
-  align-self: center;
-
-  :hover {
-    cursor: pointer;
-  }
-  img {
-    max-height: 40px;
-    max-width: 40px;
-    position: relative;
-    top: -2px;
-    padding: 2px;
-    background-color: @white;
-    border-radius: 2px;
-  }
-}
-
-#main-navigation-bar {
-  position: relative;
-  width: 100%;
-  min-width: @min-container-width;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: Quicksand,sans-serif;
-  background-color: @dark-color-theme;
-  z-index: 5;
-  height: @app-bar-height;
-}
-#main-nav-bar-left {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-#main-nav-bar-right {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding-right: 15px;
-}
-
-.app-btn{
-  height: @app-bar-height;
-  background-color: @dark-color-theme;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  margin-right: 2px;
-  margin-left: 2px;
-  a {
-    padding:10px;
-    color: @font-color-for-dark;
-    font-size: 1.4em !important;
-  }
-}
-
-.app-btn a:visited {
-  color: @font-color-for-dark;
-}
-
-.app-btn:hover{
-  position: relative;
-  top: -6px;
-  background-color: @main-color-theme;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  box-shadow: 1px 1px 12px @shadow-color;
-  a {
-    position: relative;
-    top: 6px;
-    color : @font-color-for-main;
-  }
-}
-.app-btn.selected:hover {
-  background-color: @dark-color-theme;
-  box-shadow: none;
-  top:0;
-}
-
-.app-btn a:hover {
-  text-decoration: none;
-}
-#app-selected {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: @main-color-theme;
-  box-shadow: 1px -2px 12px @shadow-color;
-  z-index: 0;
-  opacity: .99;
-  border-top-left-radius : 8px ;
-  border-top-right-radius : 8px ;
-  a {
-    position: relative;
-    top: 3px;
-    color: @font-color-for-main;
-  }
-}
-.app-btn.selected a:hover {
-  text-decoration: none;
-}
-
-#app-bar-line {
-  position: relative;
-  width: 100%;
-  min-width: @min-container-width;
-  height: @color-line-height;
-  background-color: @main-color-theme;
-  box-shadow: 2px 2px 5px @shadow-color;
-}
-#color-add {
-  width: 150px;
-  background-color: @main-color-theme;
-  height: @color-line-height;
-  z-index: 20;
-  position: relative;
-  top: @color-line-height;
-}
-
-#more-app {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 1.4em !important;
-  width: 40px;
-  height: @app-bar-height;
-  color: @font-color-for-dark;
-}
-#more-app:hover {
-  background-color: @main-color-theme;
-  text-decoration: none;
-}
-#more-app:hover #more-app-list {
-  display: block;
-}
-#more-app.selected {
-  background-color: @main-color-theme;
-}
-
-#more-app-list {
-  display: none;
-  position: absolute;
-  top: @app-bar-height;
-  left: -20px;
-  background-color: @dark-color-theme;
-  z-index: 10;
-  border: solid 4px @main-color-theme;
-  border-top-width: @color-line-height;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  li {
-    padding-left : 4px;
-    padding-right: 4px;
-  }
-
-  a {
-    color: @font-color-for-dark;
-    font-size: 15px;
-  }
-
-  :hover {
-    background-color: @medium-color-theme;
-    a {
-      box-shadow: none;
-      color: @dark-color-theme;
-    }
-    a:hover{
-      box-shadow: none;
-      text-decoration: none;
-      border-radius: 0;
-    }
-  }
-
-  li.selected {
-    background-color: @main-color-theme;
-    a {
-      color: @font-color-for-main;
-    }
-    a:hover {
-      color: @font-color-for-main;
-      background-color: @main-color-theme;
-    }
-  }
-}
-
-#homeButton {
-  display: flex;
-  //visibility: hidden;
-  align-items: center;
-  justify-content: center;
-  background-color:@grey;
-  border: none;
-  border-radius : 0;
-
-  height: @app-bar-height;
-  width : @home-btn-width;
-  text-decoration: none;
-  img {
-    height: 25px;
-    transition: all .2s ease-in-out;
-  }
-}
-
-#homeButton:hover img {
-  transform: scale(1.1);
-}
-
-#app-bar-list {
-  display: flex;
-}
-
-#user-details {
-  position: absolute;
-  right: 20px;
-  top : 62px;
-  background-color: @dark-color-theme;
-  color : @font-color-for-dark;
-  font-size: 15px;
-  font-weight: bold;
-  padding-top: 5px;
-  padding-bottom: 10px;
-  z-index: 15;
-  box-shadow: 3px 3px 12px @shadow-color;
-  border-radius: 3px;
-  transition: all .1s ease-in-out;
-
-  img {
-    height: 50px;
-    background-color: @white;
-    padding: 4px;
-    border-radius : 3px;
-    margin-left: 10px;
-    margin-right: 5px;
-  }
-  #logout {
-    background-color: @white;
-    color: @dark-color-theme !important;
-    border-radius: 2px;
-    :hover {
-      text-decoration: none;
-    }
-  }
-}
-
-#user-details:after{
-  content: '';
-  position: absolute;
-  top: -10px;
-  right: 5px;
-  width: 0;
-  height: 0;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid @dark-color-theme;
-  border-left: 10px solid transparent;
-}
-
-a.user-pref-btn {
-  margin-top: 15px;
-  background-color: @dark-color-theme;
-  margin-left: 10px;
-  margin-right: 10px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  display: flex;
-  justify-content: center;
-  color: @font-color-for-dark !important;
-  :hover {
-    text-decoration: none;
-  }
-}
-
-#user-name {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  padding-left : 5px;
-  padding-right : 5px;
-  span {
-    min-width: 100px;
-    padding-bottom : 5px;
-    padding-top : 5px;
-  }
-}
-
-#user-row1 {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  #user-lang {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    span {
-      min-width: 30px;
-      color: @font-color-for-dark;
-    }
-  }
-}
-
-.appbar-btn-img {
-  height: @app-bar-height - 40px;
-}
-
-#help-btn {
-  font-size: 10px;
-  min-width: 20px;
-  margin-right: 15px;
-}
-/* Begin sub Menu section */
-
-#app-navigation {
-  height: @sub-app-bar-height;
-  border-right: solid 1px @black;
-  border-bottom: solid 1px @black;
-  width: 100%;
-  min-width: @min-container-width;
-  h2 {
-    display: none;
-  }
-  ul {
-    display: flex;
-    flex-direction: row;
-    background-color: @grey;
-    flex-grow: 1;
-  }
-  ul li ul li {
-    border-left: solid 1px @black;
-    height: @sub-app-bar-height;
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    justify-content: center;
-    min-width: 75px;
-    padding-left: 6px;
-    padding-right: 6px;
-    font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-    border-bottom: solid 1px @black;
-    font-size: 12px;
-    @media screen and (max-width: 1500px) {
-      font-size: 10px;
-      min-width: 65px;
-    }
-    @media screen and (max-width: 1300px) {
-      font-size: 10px;
-      min-width: 50px;
-    }
-    a {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      height: 100%;
-      width: 100%;
-      text-decoration: none;
-    }
-  }
-}
-
-#app-navigation ul li ul li:last-child {
-  border-right: solid 1px @black;
-}
-
-#app-navigation ul li ul li:hover {
-  background-color: @main-color-theme;
-  min-height: @sub-app-bar-height;
-  position: relative;
-  //top: -1px;
-  a {
-    color: @white;
-    text-decoration: none;
-  }
-}
-#app-navigation ul li ul li.selected:hover {
-  a {
-    color: @black !important;
-  }
-}
-
-#app-navigation ul li ul li.selected {
-  background-color: @white;
-  position: relative;
-  top: 1px;
-  height: @sub-app-bar-height + 1px;
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  border-bottom: none;
-
-  :after {
-    content: '';
-    position: absolute;
-    top: -2px;
-    left: 5px;
-    width: 0;
-    height: 0;
-    border-right: 10px solid transparent;
-    border-top: 10px solid @main-color-theme;
-    border-left: 10px solid transparent;
-  }
-
-}
-
-
-/* End sub Menu section */
-
-/* begin sub Menu section 3rd level */
-
-.button-bar.tab-bar {
-  ul li ul li {
-    border: solid 1px @grey;
-    border-radius: 4px;
-    a {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  li.selected{
-    background-color: @main-color-theme;
-    a{
-      color: @font-color-for-main;
-    }
-  }
-  ul li ul li:hover {
-    background-color: @main-color-theme;
-    a {
-      color: @font-color-for-main ;
-    }
-  }
-}
-
-#third-level-menu-container {
-  display: flex;
-  flex-direction: row;
-}
-#working-area {
-  width: 100%;
-}
-
-#left-column-menu {
-  width: 100px;
-}
-
-.third-lvl-menu {
-  background-color: @dark-color-theme;
-  position: relative;
-  left: -10px;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  ul {
-    li {
-      ul {
-        position: relative;
-        top: 5px;
-        width: @third-lvl-width;
-      }
-    }
-  }
-  h2 {
-    visibility: hidden;
-  }
-}
-.third-level-item:last-child {
-  border-bottom: solid 1px @main-color-theme;
-}
-
-.third-level-item {
-  min-height: @third-lvl-height;
-  background-color: @dark-color-theme;
-  padding-right: 3px;
-  border-top: solid 1px @main-color-theme;
-
-  a, a:visited {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    color: @font-color-for-dark !important;
-    min-height: @third-lvl-height;
-    max-width: @third-lvl-width;
-    text-align: center;
-  }
-}
-.third-level-item.selected {
-  position: relative;
-  border-left: solid 9px @main-color-theme;
-  a, a:visited {
-    background-color: @white;
-    color: @dark-color-theme !important;
-  }
-  :after {
-    content: '';
-    position: absolute;
-    top: 5px;
-    left: 0;
-    width: 0;
-    height: 0;
-    border-top: 10px solid transparent;
-    border-left: 10px solid @main-color-theme;
-    border-bottom: 10px solid transparent;
-  }
-}
-
-.third-level-item a:hover {
-  background-color: @main-color-theme;
-  color: @font-color-for-main ;
-  text-decoration: none;
-}
-/* End 3rd level menu */
-
-
-
-/* Begin Home Menu for IB section */
-.fixed-nav-bar {
-  position: fixed !important;
-  width: 100%;
-}
-#nav-bar-offset {
-  height: @app-bar-height ;
-}
-
-#homeGlyph {
-  margin-left: 20px;
-  height: 20px;
-}
-
-#homePageTitle {
-  color: @white;
-  font-size: 20px;
-  font-weight: bold;
-  margin-right: 20px;
-  margin-left: 20px;
-}
-.home-menu-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.hp-applist {
-  display: flex;
-  flex-direction: row;
-  color : @white;
-  align-items: center;
-  .app-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: @dark-color-theme;
-    height: @home-menu-tile-height;
-    padding: 5px 10px 5px 10px;
-    border-bottom: solid 1px @black;
-    span {
-      font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
-      font-size: 15px;
-      font-weight: bold;
-      width: 110px;
-      a {
-        display: flex;
-        justify-content: center;
-        color : @white;
-      }
-    }
-  }
-
-  .hp-menu-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin-left: 5px;
-    margin-right: 5px;
-    border: solid 2px @grey;
-    border-radius: 8px;
-    height: @home-menu-tile-height - 4px;
-    min-width: @home-menu-tile-min-width;
-    max-width: @home-menu-tile-max-width;
-    .menu-link {
-      font-size: 10px;
-      color: @black;
-      padding: 10px;
-    }
-    .star-link {
-      position: absolute;
-      height: 25px;
-      top: 5px;
-      right: 5px;
-    }
-  }
-
-}
-.hp-applist .app-title span a:hover {
-  text-decoration: none;
-}
-
-.hp-menu-item.favoriteItem {
-  border: solid 2px @dark-color-theme;
-}
-
-.hp-menu-item:hover {
-  box-shadow: 3px 3px 12px @shadow-color;
-  a {
-    text-decoration: none;
-  }
-}
-
-/* End Home Menu for IB section */
-
-/* Begin Login screenlet */
-#login-container {
-  #content-messages {
-    position: relative;
-    top: @app-bar-height;
-    border-radius: 4px;
-    width: 97%;
-    &.errorMessage {
-      background-color : @color-background-alert !important;
-      color: @color-font-alert !important;
-      border : solid 1px @color-border-alert !important;
-    }
-    &.eventMessage {
-      background-color : @color-background-success !important;
-      color: @color-font-success !important;
-      border : solid 1px @color-border-success !important;
-    }
-  }
-}
-#loginBar {
-  position: fixed;
-  top:0;
-  left: 0;
-  width: 100%;
-  height: @app-bar-height;
-  background-color: @dark-color-theme;
-  span {
-    background-color: @white;
-    color: @main-color-theme;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-    font-size: 25px;
-    position: relative;
-    top: @app-bar-height - 32px;
-    left: 15px;
-    padding: 5px 10px 5px 10px;
-  }
-  #company-logo {
-    position: absolute;
-  }
-}
-
-.login-screenlet {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-width: 50em;
-  border-radius: 8px !important;
-  margin-top: 15%;
-  box-shadow: 3px 3px 12px @shadow-color;
-  .screenlet-title-bar {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    margin:0;
-    padding:0;
-    h3{
-      padding-top:2px;
-      padding-bottom:2px;
-      background-color: @dark-color-theme !important;
-      color: @font-color-for-dark;
-      height: 100%;
-      width:100%;
-      text-shadow: none;
-      font-size: 25px;
-    }
-  }
-  .screenlet-body {
-    background-color: @main-color-theme !important;
-    form {
-      .button {
-        width: 150px;
-        border-radius: 4px;
-        background: none;
-        background-color: @dark-color-theme;
-        color: @font-color-for-dark;
-        text-shadow: none;
-        margin-top: 20px;
-        margin-bottom: 10px;
-      }
-
-      table {
-        tr {
-          width: 100%;
-          .label {
-            color: @font-color-for-main;
-            width: 25%;
-            font-size: 15px;
-          }
-          input {
-            width: 100%;
-          }
-          .buttontext,
-          [type="submit"] {
-            width: 150px;
-            border-radius: 4px;
-            background: none;
-            background-color: @dark-color-theme;
-            color: @font-color-for-dark;
-            text-shadow: none;
-          }
-          [name="GET_PASSWORD_HINT"] {
-            background-color: @font-color-for-dark;
-            color: @main-color-theme;
-            border: none;
-            width: 100%;
-          }
-          [name="EMAIL_PASSWORD"] {
-            background-color: @font-color-for-dark;
-            color: @main-color-theme;
-            border: none;
-            width: 100%;
-          }
-          td {
-            padding: 5px;
-            color: @font-color-for-main;
-            font-size: 15px;
-            font-weight: bold;
-          }
-        }
-      }
-    }
-    a {
-      color: @font-color-for-main;
-    }
-  }
-}
-
-.login-screenlet .screenlet-title-bar {
-  text-align: center;
-}
-
-/* End Login screenlet */
-
-
-/* --------------------------------------------- */
-/*      Begin Screenlet style                    */
-/* --------------------------------------------- */
-.screenlet-title-bar {
-  text-decoration: none ;
-  color: @dark-color-theme;
-  background-color: @grey;
-  height: 1%; /* IE fix */
-  min-height: 1.5em;
-  padding:0.8em 0.2em;
-}
-
-.screenlet {
-  border-radius: 5px;
-  border: solid 1px @grey;
-  height: auto !important;
-  margin-bottom: 1em;
-  overflow: auto;
-}
-
-.screenlet-body {
-  background-color: #FFFFFF;
-  height: auto !important;
-  height: 1%;
-  padding: 0.4em;
-}
-
-.screenlet-body div {
-  margin: 0.8em 0.1em
-}
-
-/* Special Screenlet style for locale and timezone window */
-.lists.screenlet {
-  margin-left: 25%;
-  margin-right: 25%;
-  margin-top: 1em;
-}
-
-.lists.screenlet .basic-table tr td {
-  text-align: center;
-}
-
-.lists.screenlet .basic-table tr td a {
-  display: block;
-}
-
-/*      Alternate table header style      */
-.basic-table .header-row-2 th,
-.basic-table .header-row-2 td {
-  background-color: @greydark;
-  border-bottom: 0;
-  border-left: 0.1em solid #aaa;
-  border-right: 0.1em solid #888;
-  color: #ffffff;
-  font-weight: bold;
-}
-
-/* No padding screenlet decorator */
-.no-padding {
-  padding: 0;
-  border: none;
-}
-
-.no-padding .h1,
-.no-padding .h2,
-.no-padding .h3,
-.no-paddingr h1,
-.no-padding h2,
-.no-padding h3 {
-  padding: 0.7em;
-}
-
-.screenlet-title-bar ul a:hover {
-  color: @main-color-theme !important;
-  text-decoration: none;
-}
-
-
-/* --------------------------------------------- */
-/*      End Screenlet style                      */
-/* --------------------------------------------- */
-
-/* ---------------------- */
-/*      Table Styles      */
-/* ---------------------- */
-
-.basic-table {
-  background-color: #ffffff;
-  color: #000000;
-  margin-bottom: 1em;
-  width: 100%;
-}
-
-form table,
-form .basic-table,
-.screenlet-body .basic-table {
-  background: transparent;
-  margin-bottom: 0;
-}
-
-.basic-table tr td {
-  /* Style for all cells */
-  padding: 0.8em 0.1em;
-  vertical-align: middle;
-}
-
-.basic-table tr .align-bottom {
-  vertical-align: bottom;
-}
-
-.basic-table tr .align-top {
-  vertical-align: top;
-}
-
-.basic-table tr .label,
-.basic-table tr .group-label {
-  /* field labels for forms */
-  font-weight: bold;
-  text-align: right;
-  padding-right: 1.5em;
-  white-space: nowrap;
-  width: 1%;
-}
-
-.basic-table tr .group-label {
-  /* "header" for field label groups */
-  font-size: 1.2em;
-  padding: 2em 1.5em 0 0;
-}
-
-.basic-table tr th,
-.basic-table .header-row {
-  font-weight: bold;
-  text-align: left;
-}
-
-.basic-table .header-row td {
-  border-bottom: 0.1em solid #000000;
-}
-
-.basic-table .header-row td a {
-  color: #000000;
-}
-
-.basic-table .alternate-row {
-  /* Alternating row style */
-  background-color: #eeeeee;
-}
-
-.basic-table .selected {
-  background: #FFFCCF;
-}
-
-.basic-table .alternate-rowSelected {
-  background: #FFF55F;
-}
-
-.basic-table .Validate {
-  /*Style use by alt-row-style on list*/
-  background: #A0D5F7;
-}
-
-.basic-table .alternate-rowValidate {
-  /*Style use by alt-row-style on list*/
-  background: #72A8F2;
-}
-
-.basic-table .Warn {
-  /*Style use by alt-row-style on list*/
-  background: #f55C5C;
-}
-
-.basic-table .alternate-rowWarn {
-  /*Style use by alt-row-style on list*/
-  background: #FC7455;
-}
-
-.basic-table tr .button-col {
-  /* button column style - for the small
-  collection of buttons used in lists */
-  vertical-align: top;
-  padding: 0.3em;
-}
-.basic-table tr .button-col a,
-.basic-table tr .button-col button,
-.basic-table tr .button-col input[type="reset"],
-.basic-table tr .button-col input[type="submit"],
-.basic-table tr .button-col input[type="button"] {
-  -webkit-appearance: none;
-  -moz-border-radius: 1em;
-  -webkit-border-radius: 1em;
-  border-radius: 2px;
-  border: 0.1em solid @main-color-theme;
-  background-color: @white;
-  cursor: pointer;
-  color: @main-color-theme;
-  display:inline-block;
-  font-size: 0.9em;
-  font-weight: bold;
-  outline: 0;
-  overflow: visible;
-  padding: 0.1em 0.5em 0.2em 0.5em;
-  text-decoration: none;
-  width: auto;
-
-  &:hover {
-    background-color: @main-color-theme;
-    color: @white;
-  }
-}
-
-.basic-table .collapsed {
-  visibility: collapse;
-}
-
-/*      Sort field style      */
-.basic-table .header-row-2 th .sort-order-asc,
-.basic-table .header-row-2 td .sort-order-asc{
-  background: url(/images/arrow-gr-up.png) no-repeat right;
-  padding-left: 0.5em;
-  padding-right: 20px; /* Setting must be in px */
-}
-.basic-table .header-row-2 th .sort-order-desc,
-.basic-table .header-row-2 td .sort-order-desc{
-  background: url(/images/arrow-gr-dw.png) no-repeat right;
-  padding-left: 0.5em;
-  padding-right: 20px; /* Setting must be in px */
-}
-.basic-table .header-row-2 th .sort-order,
-.basic-table .header-row-2 td .sort-order{
-  background: url(/images/arrow-gr.png) no-repeat right;
-  padding-left: 0.5em;
-  padding-right: 20px; /* Setting must be in px */
-  color:#fff
-}
-
-
-/* --------------------------------------------- */
-/*      Begin Message Info                       */
-/* --------------------------------------------- */
-.count-message {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height:20px;
-  min-width: 20px;
-  max-height:20px;
-  max-width: 20px;
-  background: @white;
-  font-size:12px;
-  font-weight: bold;
-  border-radius: 50%;
-}
-.info-message-title {
-  min-width:150px;
-  margin: 5px;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  font-weight: bold;
-}
-.message-list {
-  position:relative;
-  margin-top: 10px;
-  box-shadow: 1px 3px 5px @greydark;
-  border-radius: 0 5px 5px 0;
-  transition: height 2s;
-}
-.message-list-main {
-  padding: 5px 15px 5px 15px;
-}
-.message-list-alert {
-  background-color: @color-alert;
-  border-left : solid 5px @color-alert-dark;
-  .count-message {
-    color: @color-alert-dark;
-  }
-}
-.message-list-success {
-  background-color: @color-success;
-  border-left: solid 5px @color-success-dark;
-  .count-message {
-    color: @color-success-dark;
-  }
-}
-.message-list-table-container {
-  background-color: @white;
-  border-radius: 5px;
-  overflow: hidden;
-  height: 0;
-}
-.info-message-success {
-  display: none;
-}
-.info-message-alert {
-  display: none;
-}
-table.msg-list {
-  width: 100%;
-  font-size: 16px;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  padding: 0;
-  thead {
-    height: 100%;
-    background-color: @grey;
-    margin: 0;
-    padding: 0;
-    tr{
-      font-weight: bold;
-      border-bottom: solid 1px @black;
-      height: 100%;
-      background-color: @grey;
-      line-height: 30px;
-    }
-  }
-  tbody {
-    tr {
-      line-height: 25px;
-    }
-    tr.msg-row-success {
-      background-color: @color-success;
-    }
-    tr.msg-row-alert {
-      background-color: @color-alert;
-    }
-  }
-  td {
-    padding-left: 5px;
-  }
-}
-
-/* --------------------------------------------- */
-/*      End  Message Info                        */
-/* --------------------------------------------- */
-
-/* ---------------------- */
-/*     Paginate Style     */
-/* ---------------------- */
-
-.paginate-bar-nrd {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 15px;
-  background-color: @grey;
-  padding-left: 10px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  box-shadow: 0 2px 5px @shadow-color;
-
-  ul.paginate-pg-list {
-    display: flex;
-    flex-direction: row;
-    background-color: @white;
-    color: @main-color-theme;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: solid 1px @box-border-color;
-    height: 18px;
-    li {
-      display: flex;
-      justify-content: center;
-      min-width: 17px;
-      border-right: solid 1px @box-border-color;
-      padding-left: 2px;
-      padding-right: 2px;
-      height:100%;
-      a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-        color: @dark-color-theme;
-        height: 100%;
-        width: 100%;
-      }
-      .paginate-disable {
-
-      }
-    }
-    li.selected {
-      background-color: @main-color-theme;
-      a {
-        color: @font-color-for-main;
-      }
-    }
-    li:first-child, li:last-child {
-      width: 20px;
-    }
-    li:first-child {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-    }
-    li:last-child {
-      border-right: none;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-  }
-
-}
-select.paginate-select {
-  position: relative;
-  background: @white;
-  font-size: 16px;
-  font-weight: bold;
-  border: 1px solid @box-border-color;
-  option {
-    display: flex;
-    justify-self: center;
-    font-size: 14px;
-  }
-}
-
-.paginate-select-label {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.paginate-information {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-ul.paginate-pg-list li:hover{
-  background-color: @main-color-theme;
-  a {
-    text-decoration: none;
-    color: @font-color-for-main;
-  }
-}
-
-/* End of Paginate Style  */
-/* ---------------------- */
-
-/* ------------------------------- */
-/*      List Navigation Style      */
-/* ------------------------------- */
-
-.nav-pager {
-  background-color: @greydark;
-  color: @white;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 9px;
-  font-weight: bold;
-  line-height: 3.5em;
-  height: 3.5em;
-  margin: 0.5em 0 0.5em 0;
-  border-radius: 3px 3px 0 0;
-}
-
-.nav-pager ul {
-  display: inline; /* IE Fix */
-}
-
-.nav-pager ul li {
-  float:left;
-  vertical-align: middle;
-}
-
-.nav-pager ul li a {
-  display: block;
-}
-
-.nav-pager ul a {
-  color: @white;
-  padding: 0 1em 0 1em;
-  text-decoration: none;
-}
-
-.nav-pager ul a:hover {
-  background-color: @main-color-theme;
-  color: @font-color-for-main;
-}
-
-.nav-pager ul .nav-pagesize,
-.nav-pager ul .nav-page-select,
-.nav-pager ul .nav-displaying {
-  padding: 0 1em 0 1em;
-}
-
-.nav-pager ul .nav-first-disabled,
-.nav-pager ul .nav-previous-disabled,
-.nav-pager ul .nav-next-disabled,
-.nav-pager ul .nav-last-disabled {
-  padding: 0 1em 0 1em;
-}
-
-.nav-pager ul .nav-first-disabled:hover,
-.nav-pager ul .nav-previous-disabled:hover,
-.nav-pager ul .nav-next-disabled:hover,
-.nav-pager ul .nav-last-disabled:hover {
-  cursor: not-allowed;
-}
-
-
-.nav-pager ul .nav-displaying {
-  border-right: none;
-}
-
-
-/* ---------------------------- */
-/*     Multi-Column Styles      */
-/* ---------------------------- */
-
-#column-container {
-  margin: auto;
-  padding: 1em;
-  position: relative;
-  min-width: @min-container-width;
-}
-
-#column-container h1,
-#column-container .h1,
-#column-container h2,
-#column-container .h2 {
-  margin-bottom: 0.5em;
-}
-
-#column-container h1,
-#column-container .h1 {
-  color: #557996;
-}
-
-#column-container .left {
-  float: left;
-  /* alt: position: absolute; top: 0px; left: 0px; */
-  width: 22em;
-  margin-right: 1em;
-}
-
-#column-container .left-larger {
-  float: left;
-  /* alt: position: absolute; top: 0px; left: 0px; */
-  width: 25em;
-  margin-right: 1em;
-}
-
-.lefthalf {
-  float: left;
-  height: 1%;
-  left: 0;
-  margin: 0% 1% 1% 0%;
-  width: 49%;
-}
-
-.righthalf {
-  float: right;
-  height: 1%;
-  margin: 0 0 1% 1%;
-  right: 0;
-  width: 49%;
-}
-
-#column-container .right {
-  float: right;
-  margin-left: 1em;
-  width: 22em;
-}
-
-#column-container .leftonly {
-  margin-left: 23em;
-  width: auto;
-}
-
-#column-container .leftonly-larger {
-  margin-left: 26em;
-  width: auto;
-}
-
-#column-container .rightonly {
-  margin-right: 23em;
-  width: auto;
-}
-
-#column-container .center {
-  margin-left: 23em;
-  margin-right: 23em;
-  width: auto;
-}
-
-#column-container .nocolumns {
-  width: auto;
-}
-
-/* ---------------------- */
-/*      Button Style      */
-/* ---------------------- */
-
-.button-bar li.buttontext a,
-a.buttontext,
-a.buttontextbig,
-.smallSubmit,
-.smallSubmit:hover,
-.mediumSubmit,
-.largeSubmit,
-.loginButton,
-.button-style-1 a,
-.button-style-1 ul a,
-.button-style-2 ul a,
-.button-style-2 a,
-.button,
-button,
-input[type="reset"],
-input[type="submit"],
-input[type="button"] {
-  -webkit-appearance: none;
-  -moz-border-radius: 1.1em;
-  -webkit-border-radius: 1.1em;
-  border-radius: 2px;
-  border: 0.1em solid @main-color-theme;
-  background-color: @white;
-  cursor: pointer;
-  color: @main-color-theme;
-  display:inline-block;
-  font-size: 1em;
-  font-weight: bold;
-  outline: 0;
-  overflow: visible;
-  padding: 0.4em 1em 0.4em;
-  text-decoration:none;
-  /*text-transform:uppercase;*/
-  width: auto;
-
-  /* IE7 */
-  *padding-top: 0.2em;
-  *padding-bottom: 0;
-  &:hover {
-    color: @font-color-for-main;
-    background-color: @main-color-theme;
-  }
-}
-
-
-/* ---------------------- */
-/*      Footer Style      */
-/* ---------------------- */
-
-#footer {
-  background: @dark-color-theme;
-  border-top: 0.1em inset #000;
-  padding: 0.5em 0 0.5em 0.5em;
-
-  height: @footer-height;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
-  z-index: 10;
-
-  span {
-    color: @font-color-for-dark;
-    padding: 10px;
-  }
-
-  a {
-    color: @font-color-for-dark;
-    font-weight: normal;
-  }
-}
-
-#footer a:focus {
-  text-decoration: underline;
-}
-
-#footer-offset {
-  height: @footer-height + 10px;
-  width: 100%;
-}
+/* include main less theme file */
+@import (less) "rainbowstone-main-theme.less";

Modified: ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less
URL: http://svn.apache.org/viewvc/ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less?rev=1824321&r1=1824320&r2=1824321&view=diff
==============================================================================
--- ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less (original)
+++ ofbiz/ofbiz-framework/trunk/themes/rainbowstone/webapp/rainbowstone/rainbowstone-saphir.less Thu Feb 15 15:07:22 2018
@@ -1,27 +1,3 @@
-/* common colors */
-@black: #000;
-@white: #fff;
-@grey: #e6e6e6;
-@greydark: #929292;
-
-@color-success: #8cff8c;
-@font-color-for-success: @black;
-@color-alert: #ff8c8c;
-@font-color-for-alert: @black;
-
-@color-success-dark: #356e35;
-@font-color-for-success: @black;
-@color-alert-dark: #932f33;
-@font-color-for-alert: @black;
-
-@color-background-alert: #f2dede;
-@color-font-alert: #a94442;
-@color-border-alert: #ebccd1;
-
-@color-background-success: #dff0d8;
-@color-font-success: #3c763d;
-@color-border-success: #d6e9c6;
-
 /* Saphir colors */
 @blue-dark: #002333;
 @blue-main: #005982;
@@ -29,27 +5,6 @@
 @blue-light: #f1f7ff;
 @blue-light2: #e4f0f5;
 
-/* Ruby colors */
-@red-dark: #420000;
-@red-main: #bf1616;
-@red-medium: #f7baba;
-@red-light: #fce7e7;
-@red-light2: #fed7c9;
-
-/* Emerald colors */
-@green-dark: #197948;
-@green-main: #23af9b;
-@green-medium: #7ae3ad;
-@green-light: #e5f9ef;
-@green-light2: #d7f9ef;
-
-/* Amber colors */
-@amber-dark: #bc4216;
-@amber-main: #f08906;
-@amber-medium: #f5c4b3;
-@amber-light: #fcede8;
-@amber-light2: #fcedcd;
-
 /* Saphir theme */
 @main-color-theme : @blue-main;
 @dark-color-theme : @blue-dark;
@@ -63,1935 +18,5 @@
 @shadow-color : @black;
 @shadow-color-light : @greydark;
 
-/* Ruby theme */
-/*
-@main-color-theme : @red-main;
-@dark-color-theme : @red-dark;
-@medium-color-theme : @red-medium;
-@light-color-theme : @red-light;
-@light2-color-theme : @red-light2;
-@font-color-for-dark : @grey;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-/*
-
-/* Emerald theme */
-/*
-@main-color-theme : @green-main;
-@dark-color-theme : @green-dark;
-@medium-color-theme : @green-medium;
-@light-color-theme : @green-light;
-@light2-color-theme : @green-light2;
-@font-color-for-dark : @white;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-/* Amber theme */
-/*
-@main-color-theme : @amber-main;
-@dark-color-theme : @amber-dark;
-@medium-color-theme : @amber-medium;
-@light-color-theme : @amber-light;
-@light2-color-theme : @amber-light2;
-@font-color-for-dark : @white;
-@font-color-for-main : @white;
-@font-color-for-medium : @dark-color-theme;
-@font-color-for-light : @dark-color-theme;
-@shadow-color : @black;
-@shadow-color-light : @greydark;
-*/
-
-
-@app-bar-height: 60px;
-@sub-app-bar-height: 40px;
-@footer-height: 20px;
-@home-btn-width: 47px;
-@color-line-height: 9px;
-
-@home-menu-tile-height: 80px;
-@home-menu-tile-min-width: 100px;
-@home-menu-tile-max-width: 100px;
-
-@third-lvl-height: 80px;
-@third-lvl-width : 100px;
-@min-screen : 1170px;
-@min-container-width: 1130px;
-
-@box-border-color: #d7d7d7;
-
-@font-face {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  src: url('fonts/quicksand/quicksandbold.otf');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  src: url('fonts/quicksand/quicksandbold.otf');
-  font-weight: bold;
-  font-style: normal;
-}
-
-/* ---------------------------------- */
-/* Begin special checkbox type switch */
-/* ---------------------------------- */
-
-[type="checkbox"]:not(:checked).nrd-chkbox, [type="checkbox"]:checked.nrd-chkbox {
-  display: none;
-}
-
-[type="checkbox"]:not(:checked).nrd-chkbox + label,
-[type="checkbox"]:checked.nrd-chkbox + label{
-  cursor: pointer;
-}
-[type="checkbox"]:not(:checked).nrd-chkbox + label:before,
-[type="checkbox"]:checked.nrd-chkbox + label:before{
-  content: "";
-  width: 150px;
-  min-width: 150px;
-  background-color: @light-color-theme;
-  padding: 2px 20px 2px 20px;
-  border-radius: 8px 8px 8px 8px;
-
-  cursor: pointer;
-}
-
-[type="checkbox"]:not(:checked).nrd-chkbox + label:after,
-[type="checkbox"]:checked.nrd-chkbox + label:after{
-  content: "";
-  position: relative;
-  left:-35px;
-  background-color: @dark-color-theme;
-  min-height: 10px;
-  min-width: 10px;
-  padding-left: 4px;
-  padding-right: 5px;
-  border-radius: 8px 8px 8px 8px;
-  transition: all .2s;
-}
-
-[type="checkbox"]:checked.nrd-chkbox + label:after{
-  position: relative;
-  left: -15px;
-  transition: all .2s;
-}
-/* ---------------------------------- */
-/* End special checkbox type switch */
-/* ---------------------------------- */
-
-/* ---------------------------------- */
-/*  Begin square Checkbox             */
-/* ---------------------------------- */
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox,
-[type="checkbox"]:checked.nrd-square-chkbox{
-  position: absolute;
-  left: -9999px;
-}
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label,
-[type="checkbox"]:checked.nrd-square-chkbox + label{
-  content: '';
-  padding-left: 35px;
-  position: relative;
-  cursor: pointer;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 12px;
-
-}
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before,
-[type="checkbox"]:checked.nrd-square-chkbox + label:before{
-  content: '';
-  position: absolute;
-  left:10px;
-  top: -4px;
-  width: 17px;
-  height: 17px; /* dim. de la case */
-  border: 1px solid #aaa;
-  background: @light-color-theme;
-  border-radius: 2px;
-}
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:before {
-  background: @light-color-theme;
-}
-[type="checkbox"]:checked.nrd-square-chkbox + label:before{
-  background: @main-color-theme;
-}
-
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after,
-[type="checkbox"]:checked.nrd-square-chkbox + label:after{
-  content: 'â';
-  position: absolute;
-  top: -4px;
-  left: 14px;
-  font-size: 16px;
-  color: @font-color-for-main;
-  transition: all .2s;
-}
-[type="checkbox"]:not(:checked).nrd-square-chkbox + label:after {
-  opacity: 0;
-  transform: scale(0);
-}
-[type="checkbox"]:checked.nrd-square-chkbox + label:after {
-  opacity: 1;
-  transform: scale(1);
-}
-/* ---------------------------------*/
-/*  End square Checkbox             */
-/* ---------------------------------*/
-
-/* ---------------------------------*/
-/*  Begin class content mgmt        */
-/* ---------------------------------*/
-
-
-.flex-row {
-  display: flex;
-  flex-direction: row !important;
-}
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.col-width-1 {
-  width: 10%;
-}
-.col-width-2 {
-  width: 20%;
-}
-.col-width-3 {
-  width: 30%;
-}
-.col-width-4 {
-  width: 40%;
-}
-.col-width-5 {
-  width: 50%;
-}
-.col-width-6 {
-  width: 60%;
-}
-.col-width-7 {
-  width: 70%;
-}
-.col-width-8 {
-  width: 80%;
-}
-.col-width-9 {
-  width: 90%;
-}
-.col-width-10 {
-  width: 100%;
-}
-
-.align-v-center {
-  display:flex;
-  align-items: center;
-}
-
-.align-h-center {
-  display:flex;
-  justify-content: center;
-}
-
-/* ---------------------------------*/
-/*    End class content mgmt        */
-/* ---------------------------------*/
-
-
-/* ---------------------------------- */
-/*  Begin btn-sort         */
-/* ---------------------------------- */
-
-.btn-sort {
-  position: relative;
-  top: -6px;
-  border:none;
-  background:none;
-  border-radius: 0;
-  margin-left:5px;
-}
-
-.btn-sort:before{
-  content: '';
-  position: absolute;
-  left: -1px;
-  width: 0;
-  height: 0;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid @greydark;
-  border-left: 10px solid transparent;
-}
-
-.btn-sort:after{
-  content: '';
-  position: absolute;
-  right: -1px;
-  width: 0;
-  height: 0;
-  border-right: 10px solid transparent;
-  border-top: 10px solid @greydark;
-  border-left: 10px solid transparent;
-  @media screen and (max-width: 1349px) {
-    right: -5px;
-  }
-}
-
-.btn-sort.btn-sort-asc:before{
-  border-bottom: 10px solid @main-color-theme;
-}
-
-.btn-sort.btn-sort-desc:after{
-  border-top: 10px solid @main-color-theme;
-}
-
-/* ---------------------------------- */
-/*  End btn-sort           */
-/* ---------------------------------- */
-
-
-/* ---------------------------------- */
-/*  Begin defaut colour class         */
-/* ---------------------------------- */
-
-.dark-color {
-  background-color: @dark-color-theme !important;
-  color: @font-color-for-dark !important;
-}
-.main-color {
-  background-color: @main-color-theme !important;
-  color: @font-color-for-main !important;
-}
-.medium-color {
-  background-color: @medium-color-theme !important;
-  color: @font-color-for-medium !important;
-}
-.light-color {
-  background-color: @light-color-theme !important;
-  color: @font-color-for-light !important;
-}
-.light2-color {
-  background-color: @light2-color-theme !important;
-  color: @font-color-for-light !important;
-}
-
-.grey-color {
-  background-color: @grey !important;
-}
-.darkgrey-color {
-  background-color: @greydark !important;
-}
-
-/* begin lookup widget */
-.ui-dialog {
-  opacity: 1;
-  z-index: 50;
-}
-
-.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
-  background: none !important;
-  background-color: @dark-color-theme !important;
-  button {
-    background: none;
-    background-color: @light-color-theme;
-  }
-}
-/* end lookup widget */
-
-.main-bar-label {
-  color: @light-color-theme;
-  padding-left: 3px;
-  padding-right: 6px;
-  font-size: 15px;
-  font-weight: bold;
-}
-
-#company-logo {
-  right: 10px;
-  top: 2px;
-  background: url("images/ofbiz-simple-white.svg") no-repeat left top / cover;
-  min-height: 50px;
-  min-width: 50px;
-  margin-right: 15px;
-  align-self: center;
-  @media screen and (min-width : 1232px) {
-    min-height: 50px;
-    min-width: 129px;
-    background: url("images/ofbiz_logo.svg") no-repeat left top / cover;
-  }
-}
-
-.modal-screen {
-  visibility: hidden;
-  display: flex;
-  flex-direction: column;
-  background-color: @grey;
-  opacity: .93;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-}
-
-.modal-box{
-  background-color: @white;
-  opacity: 1;
-  margin: 10%;
-  border-radius: 10px;
-  border: solid 2px @main-color-theme;
-  padding : 10px 40px 10px 40px;
-  .modal-header {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    h2 {
-      font-size: 25px;
-      font-weight: normal;
-      color: @main-color-theme;
-    }
-    .btn-close-nrd {
-      position: absolute;
-      right: 0;
-      display: flex;
-      justify-content: center;
-      border: solid 1px @main-color-theme;
-      border-radius: 5px;
-      color: @main-color-theme;
-      font-size: 25px;
-      height: 30px;
-      width: 30px;
-      text-decoration: none !important;
-    }
-  }
-  .modal-body {
-    p {
-      font-size: 20px;
-    }
-  }
-  .modal-footer {
-    position: relative;
-    height: 35px;
-    display: flex;
-    justify-content: flex-end;
-    .btn-nrd {
-      background: none;
-      border: none;
-      text-shadow: none;
-      opacity: 1;
-      margin-right: 10px;
-      font-size: 20px;
-      padding: 5px;
-      border-radius: 8px;
-    }
-    .btn-nrd-main {
-      background-color: @main-color-theme;
-      color: @white;
-    }
-    .btn-nrd-std {
-      background-color: @white;
-      color: @main-color-theme;
-      border: solid 1px @main-color-theme !important;
-    }
-  }
-}
-.btn-nrd:hover {
-  box-shadow: 5px 5px 3px 0 @black;
-}
-
-.btn-nrd-std:hover {
-  background-color: @main-color-theme !important;
-  color: @white !important;
-  border: solid 1px @main-color-theme !important;
-}
-
-.btn-close-nrd:hover {
-  background-color: @main-color-theme !important;
-  color: @white !important;
-}
-
-.list-nrd {
-  border: solid 2px @main-color-theme;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  display: flex;
-  flex-direction: column;
-  margin-top: 15px;
-  margin-bottom: 15px;
-  .title-list-nrd {
-    background-color: @main-color-theme;
-    color : @white;
-    font-size: 20px;
-    font-weight: bold;
-    padding-left: 5px;
-  }
-
-  li {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    font-size: 20px;
-    padding-left: 5px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    margin-bottom: 3px;
-    a {
-      color: @main-color-theme;
-    }
-    span {
-      position: absolute;
-      right: 0;
-      color: @main-color-theme;
-      font-size: 30px;
-    }
-  }
-}
-li.line-odd {
-  background-color: @light-color-theme;
-}
-
-#user-avatar {
-  height: 40px;
-  width: 40px;
-  padding: 2px;
-  align-self: center;
-
-  :hover {
-    cursor: pointer;
-  }
-  img {
-    max-height: 40px;
-    max-width: 40px;
-    position: relative;
-    top: -2px;
-    padding: 2px;
-    background-color: @white;
-    border-radius: 2px;
-  }
-}
-
-#main-navigation-bar {
-  position: relative;
-  width: 100%;
-  min-width: @min-container-width;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: Quicksand,sans-serif;
-  background-color: @dark-color-theme;
-  z-index: 5;
-  height: @app-bar-height;
-}
-#main-nav-bar-left {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-#main-nav-bar-right {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding-right: 15px;
-}
-
-.app-btn{
-  height: @app-bar-height;
-  background-color: @dark-color-theme;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  margin-right: 2px;
-  margin-left: 2px;
-  a {
-    padding:10px;
-    color: @font-color-for-dark;
-    font-size: 1.4em !important;
-  }
-}
-
-.app-btn a:visited {
-  color: @font-color-for-dark;
-}
-
-.app-btn:hover{
-  position: relative;
-  top: -6px;
-  background-color: @main-color-theme;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  box-shadow: 1px 1px 12px @shadow-color;
-  a {
-    position: relative;
-    top: 6px;
-    color : @font-color-for-main;
-  }
-}
-.app-btn.selected:hover {
-  background-color: @dark-color-theme;
-  box-shadow: none;
-  top:0;
-}
-
-.app-btn a:hover {
-  text-decoration: none;
-}
-#app-selected {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: @main-color-theme;
-  box-shadow: 1px -2px 12px @shadow-color;
-  z-index: 0;
-  opacity: .99;
-  border-top-left-radius : 8px ;
-  border-top-right-radius : 8px ;
-  a {
-    position: relative;
-    top: 3px;
-    color: @font-color-for-main;
-  }
-}
-.app-btn.selected a:hover {
-  text-decoration: none;
-}
-
-#app-bar-line {
-  position: relative;
-  width: 100%;
-  min-width: @min-container-width;
-  height: @color-line-height;
-  background-color: @main-color-theme;
-  box-shadow: 2px 2px 5px @shadow-color;
-}
-#color-add {
-  width: 150px;
-  background-color: @main-color-theme;
-  height: @color-line-height;
-  z-index: 20;
-  position: relative;
-  top: @color-line-height;
-}
-
-#more-app {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-size: 1.4em !important;
-  width: 40px;
-  height: @app-bar-height;
-  color: @font-color-for-dark;
-}
-#more-app:hover {
-  background-color: @main-color-theme;
-  text-decoration: none;
-}
-#more-app:hover #more-app-list {
-  display: block;
-}
-#more-app.selected {
-  background-color: @main-color-theme;
-}
-
-#more-app-list {
-  display: none;
-  position: absolute;
-  top: @app-bar-height;
-  left: -20px;
-  background-color: @dark-color-theme;
-  z-index: 10;
-  border: solid 4px @main-color-theme;
-  border-top-width: @color-line-height;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  li {
-    padding-left : 4px;
-    padding-right: 4px;
-  }
-
-  a {
-    color: @font-color-for-dark;
-    font-size: 15px;
-  }
-
-  :hover {
-    background-color: @medium-color-theme;
-    a {
-      box-shadow: none;
-      color: @dark-color-theme;
-    }
-    a:hover{
-      box-shadow: none;
-      text-decoration: none;
-      border-radius: 0;
-    }
-  }
-
-  li.selected {
-    background-color: @main-color-theme;
-    a {
-      color: @font-color-for-main;
-    }
-    a:hover {
-      color: @font-color-for-main;
-      background-color: @main-color-theme;
-    }
-  }
-}
-
-#homeButton {
-  display: flex;
-  //visibility: hidden;
-  align-items: center;
-  justify-content: center;
-  background-color:@grey;
-  border: none;
-  border-radius : 0;
-
-  height: @app-bar-height;
-  width : @home-btn-width;
-  text-decoration: none;
-  img {
-    height: 25px;
-    transition: all .2s ease-in-out;
-  }
-}
-
-#homeButton:hover img {
-  transform: scale(1.1);
-}
-
-#app-bar-list {
-  display: flex;
-}
-
-#user-details {
-  position: absolute;
-  right: 20px;
-  top : 62px;
-  background-color: @dark-color-theme;
-  color : @font-color-for-dark;
-  font-size: 15px;
-  font-weight: bold;
-  padding-top: 5px;
-  padding-bottom: 10px;
-  z-index: 15;
-  box-shadow: 3px 3px 12px @shadow-color;
-  border-radius: 3px;
-  transition: all .1s ease-in-out;
-
-  img {
-    height: 50px;
-    background-color: @white;
-    padding: 4px;
-    border-radius : 3px;
-    margin-left: 10px;
-    margin-right: 5px;
-  }
-  #logout {
-    background-color: @white;
-    color: @dark-color-theme !important;
-    border-radius: 2px;
-    :hover {
-      text-decoration: none;
-    }
-  }
-}
-
-#user-details:after{
-  content: '';
-  position: absolute;
-  top: -10px;
-  right: 5px;
-  width: 0;
-  height: 0;
-  border-right: 10px solid transparent;
-  border-bottom: 10px solid @dark-color-theme;
-  border-left: 10px solid transparent;
-}
-
-a.user-pref-btn {
-  margin-top: 15px;
-  background-color: @dark-color-theme;
-  margin-left: 10px;
-  margin-right: 10px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  display: flex;
-  justify-content: center;
-  color: @font-color-for-dark !important;
-  :hover {
-    text-decoration: none;
-  }
-}
-
-#user-name {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  padding-left : 5px;
-  padding-right : 5px;
-  span {
-    min-width: 100px;
-    padding-bottom : 5px;
-    padding-top : 5px;
-  }
-}
-
-#user-row1 {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  #user-lang {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-    padding-left: 10px;
-    padding-right: 10px;
-    span {
-      min-width: 30px;
-      color: @font-color-for-dark;
-    }
-  }
-}
-
-.appbar-btn-img {
-  height: @app-bar-height - 40px;
-}
-
-#help-btn {
-  font-size: 10px;
-  min-width: 20px;
-  margin-right: 15px;
-}
-/* Begin sub Menu section */
-
-#app-navigation {
-  height: @sub-app-bar-height;
-  border-right: solid 1px @black;
-  border-bottom: solid 1px @black;
-  width: 100%;
-  min-width: @min-container-width;
-  h2 {
-    display: none;
-  }
-  ul {
-    display: flex;
-    flex-direction: row;
-    background-color: @grey;
-    flex-grow: 1;
-  }
-  ul li ul li {
-    border-left: solid 1px @black;
-    height: @sub-app-bar-height;
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    justify-content: center;
-    min-width: 75px;
-    padding-left: 6px;
-    padding-right: 6px;
-    font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-    border-bottom: solid 1px @black;
-    font-size: 12px;
-    @media screen and (max-width: 1500px) {
-      font-size: 10px;
-      min-width: 65px;
-    }
-    @media screen and (max-width: 1300px) {
-      font-size: 10px;
-      min-width: 50px;
-    }
-    a {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-      height: 100%;
-      width: 100%;
-      text-decoration: none;
-    }
-  }
-}
-
-#app-navigation ul li ul li:last-child {
-  border-right: solid 1px @black;
-}
-
-#app-navigation ul li ul li:hover {
-  background-color: @main-color-theme;
-  min-height: @sub-app-bar-height;
-  position: relative;
-  //top: -1px;
-  a {
-    color: @white;
-    text-decoration: none;
-  }
-}
-#app-navigation ul li ul li.selected:hover {
-  a {
-    color: @black !important;
-  }
-}
-
-#app-navigation ul li ul li.selected {
-  background-color: @white;
-  position: relative;
-  top: 1px;
-  height: @sub-app-bar-height + 1px;
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  border-bottom: none;
-
-  :after {
-    content: '';
-    position: absolute;
-    top: -2px;
-    left: 5px;
-    width: 0;
-    height: 0;
-    border-right: 10px solid transparent;
-    border-top: 10px solid @main-color-theme;
-    border-left: 10px solid transparent;
-  }
-
-}
-
-
-/* End sub Menu section */
-
-/* begin sub Menu section 3rd level */
-
-.button-bar.tab-bar {
-  ul li ul li {
-    border: solid 1px @grey;
-    border-radius: 4px;
-    a {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  li.selected{
-    background-color: @main-color-theme;
-    a{
-      color: @font-color-for-main;
-    }
-  }
-  ul li ul li:hover {
-    background-color: @main-color-theme;
-    a {
-      color: @font-color-for-main ;
-    }
-  }
-}
-
-#third-level-menu-container {
-  display: flex;
-  flex-direction: row;
-}
-#working-area {
-  width: 100%;
-}
-
-#left-column-menu {
-  width: 100px;
-}
-
-.third-lvl-menu {
-  background-color: @dark-color-theme;
-  position: relative;
-  left: -10px;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  ul {
-    li {
-      ul {
-        position: relative;
-        top: 5px;
-        width: @third-lvl-width;
-      }
-    }
-  }
-  h2 {
-    visibility: hidden;
-  }
-}
-.third-level-item:last-child {
-  border-bottom: solid 1px @main-color-theme;
-}
-
-.third-level-item {
-  min-height: @third-lvl-height;
-  background-color: @dark-color-theme;
-  padding-right: 3px;
-  border-top: solid 1px @main-color-theme;
-
-  a, a:visited {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    color: @font-color-for-dark !important;
-    min-height: @third-lvl-height;
-    max-width: @third-lvl-width;
-    text-align: center;
-  }
-}
-.third-level-item.selected {
-  position: relative;
-  border-left: solid 9px @main-color-theme;
-  a, a:visited {
-    background-color: @white;
-    color: @dark-color-theme !important;
-  }
-  :after {
-    content: '';
-    position: absolute;
-    top: 5px;
-    left: 0;
-    width: 0;
-    height: 0;
-    border-top: 10px solid transparent;
-    border-left: 10px solid @main-color-theme;
-    border-bottom: 10px solid transparent;
-  }
-}
-
-.third-level-item a:hover {
-  background-color: @main-color-theme;
-  color: @font-color-for-main ;
-  text-decoration: none;
-}
-/* End 3rd level menu */
-
-/* ===== System messages rendering ===== */
-.eventMessage,
-.errorMessage {
-  font-size: 1.3em;
-  font-weight: bold;
-  _margin: 5px 7px 0 7px;
-  padding: 0 1em 0 50px;
-}
-.eventMessage {
-  background: #105fa8 url(../images/information.png) no-repeat 5px 50%;
-  color: #FFFFFF;
-  border: solid 3px #f0f0f0;
-}
-.errorMessage {
-  background: #820f05 url(../images/exclamation.png) no-repeat 5px 50%;
-  color: #ffffff;
-  border: solid 3px #f0f0f0;
-}
-
-.content-messages p {
-  margin: 0.5em 0 0.5em 0;
-}
-
-
-
-/* Begin Home Menu*/
-.fixed-nav-bar {
-  position: fixed !important;
-  width: 100%;
-}
-#nav-bar-offset {
-  height: @app-bar-height ;
-}
-
-#homeGlyph {
-  margin-left: 20px;
-  height: 20px;
-}
-
-#homePageTitle {
-  color: @white;
-  font-size: 20px;
-  font-weight: bold;
-  margin-right: 20px;
-  margin-left: 20px;
-}
-.home-menu-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.hp-applist {
-  display: flex;
-  flex-direction: row;
-  color : @white;
-  align-items: center;
-  .app-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: @dark-color-theme;
-    height: @home-menu-tile-height;
-    padding: 5px 10px 5px 10px;
-    border-bottom: solid 1px @black;
-    span {
-      font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
-      font-size: 15px;
-      font-weight: bold;
-      width: 110px;
-      a {
-        display: flex;
-        justify-content: center;
-        color : @white;
-      }
-    }
-  }
-
-  .hp-menu-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin-left: 5px;
-    margin-right: 5px;
-    border: solid 2px @grey;
-    border-radius: 8px;
-    height: @home-menu-tile-height - 4px;
-    min-width: @home-menu-tile-min-width;
-    max-width: @home-menu-tile-max-width;
-    .menu-link {
-      font-size: 10px;
-      color: @black;
-      padding: 10px;
-    }
-    .star-link {
-      position: absolute;
-      height: 25px;
-      top: 5px;
-      right: 5px;
-    }
-  }
-
-}
-.hp-applist .app-title span a:hover {
-  text-decoration: none;
-}
-
-.hp-menu-item.favoriteItem {
-  border: solid 2px @dark-color-theme;
-}
-
-.hp-menu-item:hover {
-  box-shadow: 3px 3px 12px @shadow-color;
-  a {
-    text-decoration: none;
-  }
-}
-
-/* End Home Menu */
-
-/* Begin Login screenlet */
-#loginBar {
-  position: fixed;
-  top:0;
-  left: 0;
-  width: 100%;
-  height: @app-bar-height;
-  background-color: @dark-color-theme;
-  span {
-    background-color: @white;
-    color: @main-color-theme;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-    font-size: 25px;
-    position: relative;
-    top: @app-bar-height - 32px;
-    left: 15px;
-    padding: 5px 10px 5px 10px;
-  }
-  #company-logo {
-    position: absolute;
-  }
-}
-
-.login-screenlet {
-  display: flex;
-  flex-direction: column;
-  min-width: 300px;
-  max-width: 50em;
-  border-radius: 8px !important;
-  margin-top: 15%;
-  box-shadow: 3px 3px 12px @shadow-color;
-  .screenlet-title-bar {
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    margin:0;
-    padding:0;
-    h3{
-      padding-top:2px;
-      padding-bottom:2px;
-      background-color: @dark-color-theme !important;
-      color: @font-color-for-dark;
-      height: 100%;
-      width:100%;
-      text-shadow: none;
-      font-size: 25px;
-    }
-  }
-  .screenlet-body {
-    background-color: @main-color-theme !important;
-    form {
-      .button {
-        width: 150px;
-        border-radius: 4px;
-        background: none;
-        background-color: @dark-color-theme;
-        color: @font-color-for-dark;
-        text-shadow: none;
-        margin-top: 20px;
-        margin-bottom: 10px;
-      }
-
-      table {
-        tr {
-          width: 100%;
-          .label {
-            color: @font-color-for-main;
-            width: 25%;
-            font-size: 15px;
-          }
-          input {
-            width: 100%;
-          }
-          .buttontext,
-          [type="submit"] {
-            width: 150px;
-            border-radius: 4px;
-            background: none;
-            background-color: @dark-color-theme;
-            color: @font-color-for-dark;
-            text-shadow: none;
-          }
-          [name="GET_PASSWORD_HINT"] {
-            background-color: @font-color-for-dark;
-            color: @main-color-theme;
-            border: none;
-            width: 100%;
-          }
-          [name="EMAIL_PASSWORD"] {
-            background-color: @font-color-for-dark;
-            color: @main-color-theme;
-            border: none;
-            width: 100%;
-          }
-          td {
-            padding: 5px;
-            color: @font-color-for-main;
-            font-size: 15px;
-            font-weight: bold;
-          }
-        }
-      }
-    }
-    a {
-      color: @font-color-for-main;
-    }
-  }
-}
-
-.login-screenlet .screenlet-title-bar {
-  text-align: center;
-}
-
-/* End Login screenlet */
-
-
-/* --------------------------------------------- */
-/*      Begin Screenlet style                    */
-/* --------------------------------------------- */
-.screenlet-title-bar {
-  text-decoration: none ;
-  color: @dark-color-theme;
-  background-color: @grey;
-  height: 1%; /* IE fix */
-  min-height: 1.5em;
-  padding:0.8em 0.2em;
-}
-
-.screenlet {
-  border-radius: 5px;
-  border: solid 1px @grey;
-  height: auto !important;
-  margin-bottom: 1em;
-  overflow: auto;
-}
-
-.screenlet-body {
-  background-color: #FFFFFF;
-  height: auto !important;
-  height: 1%;
-  padding: 0.4em;
-}
-
-.screenlet-body div {
-  margin: 0.8em 0.1em
-}
-
-/* Special Screenlet style for locale and timezone window */
-.lists.screenlet {
-  margin-left: 25%;
-  margin-right: 25%;
-  margin-top: 1em;
-}
-
-.lists.screenlet .basic-table tr td {
-  text-align: center;
-}
-
-.lists.screenlet .basic-table tr td a {
-  display: block;
-}
-
-/*      Alternate table header style      */
-.basic-table .header-row-2 th,
-.basic-table .header-row-2 td {
-  background-color: @greydark;
-  border-bottom: 0;
-  border-left: 0.1em solid #aaa;
-  border-right: 0.1em solid #888;
-  color: #ffffff;
-  font-weight: bold;
-}
-
-/* No padding screenlet decorator */
-.no-padding {
-  padding: 0;
-  border: none;
-}
-
-.no-padding .h1,
-.no-padding .h2,
-.no-padding .h3,
-.no-paddingr h1,
-.no-padding h2,
-.no-padding h3 {
-  padding: 0.7em;
-}
-
-.screenlet-title-bar ul a:hover {
-  color: @main-color-theme !important;
-  text-decoration: none;
-}
-
-
-/* --------------------------------------------- */
-/*      End Screenlet style                      */
-/* --------------------------------------------- */
-
-/* ---------------------- */
-/*      Table Styles      */
-/* ---------------------- */
-
-.basic-table {
-  background-color: #ffffff;
-  color: #000000;
-  margin-bottom: 1em;
-  width: 100%;
-}
-
-form table,
-form .basic-table,
-.screenlet-body .basic-table {
-  background: transparent;
-  margin-bottom: 0;
-}
-
-.basic-table tr td {
-  /* Style for all cells */
-  padding: 0.8em 0.1em;
-  vertical-align: middle;
-}
-
-.basic-table tr .align-bottom {
-  vertical-align: bottom;
-}
-
-.basic-table tr .align-top {
-  vertical-align: top;
-}
-
-.basic-table tr .label,
-.basic-table tr .group-label {
-  /* field labels for forms */
-  font-weight: bold;
-  text-align: right;
-  padding-right: 1.5em;
-  white-space: nowrap;
-  width: 1%;
-}
-
-.basic-table tr .group-label {
-  /* "header" for field label groups */
-  font-size: 1.2em;
-  padding: 2em 1.5em 0 0;
-}
-
-.basic-table tr th,
-.basic-table .header-row {
-  font-weight: bold;
-  text-align: left;
-}
-
-.basic-table .header-row td {
-  border-bottom: 0.1em solid #000000;
-}
-
-.basic-table .header-row td a {
-  color: #000000;
-}
-
-.basic-table .alternate-row {
-  /* Alternating row style */
-  background-color: #eeeeee;
-}
-
-.basic-table .selected {
-  background: #FFFCCF;
-}
-
-.basic-table .alternate-rowSelected {
-  background: #FFF55F;
-}
-
-.basic-table .Validate {
-  /*Style use by alt-row-style on list*/
-  background: #A0D5F7;
-}
-
-.basic-table .alternate-rowValidate {
-  /*Style use by alt-row-style on list*/
-  background: #72A8F2;
-}
-
-.basic-table .Warn {
-  /*Style use by alt-row-style on list*/
-  background: #f55C5C;
-}
-
-.basic-table .alternate-rowWarn {
-  /*Style use by alt-row-style on list*/
-  background: #FC7455;
-}
-
-.basic-table tr .button-col {
-  /* button column style - for the small
-  collection of buttons used in lists */
-  vertical-align: top;
-  padding: 0.3em;
-}
-.basic-table tr .button-col a,
-.basic-table tr .button-col button,
-.basic-table tr .button-col input[type="reset"],
-.basic-table tr .button-col input[type="submit"],
-.basic-table tr .button-col input[type="button"] {
-  -webkit-appearance: none;
-  -moz-border-radius: 1em;
-  -webkit-border-radius: 1em;
-  border-radius: 2px;
-  border: 0.1em solid @main-color-theme;
-  background-color: @white;
-  cursor: pointer;
-  color: @main-color-theme;
-  display:inline-block;
-  font-size: 0.9em;
-  font-weight: bold;
-  outline: 0;
-  overflow: visible;
-  padding: 0.1em 0.5em 0.2em 0.5em;
-  text-decoration: none;
-  width: auto;
-
-  &:hover {
-    background-color: @main-color-theme;
-    color: @white;
-  }
-}
-
-.basic-table .collapsed {
-  visibility: collapse;
-}
-
-/*      Sort field style      */
-.basic-table .header-row-2 th .sort-order-asc,
-.basic-table .header-row-2 td .sort-order-asc{
-  background: url(/images/arrow-gr-up.png) no-repeat right;
-  padding-left: 0.5em;
-  padding-right: 20px; /* Setting must be in px */
-}
-.basic-table .header-row-2 th .sort-order-desc,
-.basic-table .header-row-2 td .sort-order-desc{
-  background: url(/images/arrow-gr-dw.png) no-repeat right;
-  padding-left: 0.5em;
-  padding-right: 20px; /* Setting must be in px */
-}
-.basic-table .header-row-2 th .sort-order,
-.basic-table .header-row-2 td .sort-order{
-  background: url(/images/arrow-gr.png) no-repeat right;
-  padding-left: 0.5em;
-  padding-right: 20px; /* Setting must be in px */
-  color:#fff
-}
-
-
-/* --------------------------------------------- */
-/*      Begin Message Info                       */
-/* --------------------------------------------- */
-.count-message {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height:20px;
-  min-width: 20px;
-  max-height:20px;
-  max-width: 20px;
-  background: @white;
-  font-size:12px;
-  font-weight: bold;
-  border-radius: 50%;
-}
-.info-message-title {
-  min-width:150px;
-  margin: 5px;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  font-weight: bold;
-}
-.message-list {
-  position:relative;
-  margin-top: 10px;
-  box-shadow: 1px 3px 5px @greydark;
-  border-radius: 0 5px 5px 0;
-  transition: height 2s;
-}
-.message-list-main {
-  padding: 5px 15px 5px 15px;
-}
-.message-list-alert {
-  background-color: @color-alert;
-  border-left : solid 5px @color-alert-dark;
-  .count-message {
-    color: @color-alert-dark;
-  }
-}
-.message-list-success {
-  background-color: @color-success;
-  border-left: solid 5px @color-success-dark;
-  .count-message {
-    color: @color-success-dark;
-  }
-}
-.message-list-table-container {
-  background-color: @white;
-  border-radius: 5px;
-  overflow: hidden;
-  height: 0;
-}
-.info-message-success {
-  display: none;
-}
-.info-message-alert {
-  display: none;
-}
-table.msg-list {
-  width: 100%;
-  font-size: 16px;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  padding: 0;
-  thead {
-    height: 100%;
-    background-color: @grey;
-    margin: 0;
-    padding: 0;
-    tr{
-      font-weight: bold;
-      border-bottom: solid 1px @black;
-      height: 100%;
-      background-color: @grey;
-      line-height: 30px;
-    }
-  }
-  tbody {
-    tr {
-      line-height: 25px;
-    }
-    tr.msg-row-success {
-        background-color: @color-success;
-    }
-    tr.msg-row-alert {
-        background-color: @color-alert;
-    }
-  }
-  td {
-    padding-left: 5px;
-  }
-}
-
-/* --------------------------------------------- */
-/*      End  Message Info                        */
-/* --------------------------------------------- */
-
-/* ---------------------- */
-/*     Paginate Style     */
-/* ---------------------- */
-
-.paginate-bar-nrd {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 15px;
-  background-color: @grey;
-  padding-left: 10px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  box-shadow: 0 2px 5px @shadow-color;
-
-  ul.paginate-pg-list {
-    display: flex;
-    flex-direction: row;
-    background-color: @white;
-    color: @main-color-theme;
-    margin-right: 10px;
-    border-radius: 8px;
-    border: solid 1px @box-border-color;
-    height: 18px;
-    li {
-      display: flex;
-      justify-content: center;
-      min-width: 17px;
-      border-right: solid 1px @box-border-color;
-      padding-left: 2px;
-      padding-right: 2px;
-      height:100%;
-      a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-        color: @dark-color-theme;
-        height: 100%;
-        width: 100%;
-      }
-      .paginate-disable {
-
-      }
-    }
-    li.selected {
-      background-color: @main-color-theme;
-      a {
-        color: @font-color-for-main;
-      }
-    }
-    li:first-child, li:last-child {
-      width: 20px;
-    }
-    li:first-child {
-      border-top-left-radius: 3px;
-      border-bottom-left-radius: 3px;
-    }
-    li:last-child {
-      border-right: none;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-  }
-
-}
-select.paginate-select {
-  position: relative;
-  background: @white;
-  font-size: 16px;
-  font-weight: bold;
-  border: 1px solid @box-border-color;
-  option {
-    display: flex;
-    justify-self: center;
-    font-size: 14px;
-  }
-}
-
-.paginate-select-label {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.paginate-information {
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 16px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-ul.paginate-pg-list li:hover{
-  background-color: @main-color-theme;
-  a {
-    text-decoration: none;
-    color: @font-color-for-main;
-  }
-}
-
-/* End of Paginate Style  */
-/* ---------------------- */
-
-/* ------------------------------- */
-/*      List Navigation Style      */
-/* ------------------------------- */
-
-.nav-pager {
-  background-color: @greydark;
-  color: @white;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif;
-  font-size: 9px;
-  font-weight: bold;
-  line-height: 3.5em;
-  height: 3.5em;
-  margin: 0.5em 0 0.5em 0;
-  border-radius: 3px 3px 0 0;
-}
-
-.nav-pager ul {
-  display: inline; /* IE Fix */
-}
-
-.nav-pager ul li {
-  float:left;
-  vertical-align: middle;
-}
-
-.nav-pager ul li a {
-  display: block;
-}
-
-.nav-pager ul a {
-  color: @white;
-  padding: 0 1em 0 1em;
-  text-decoration: none;
-}
-
-.nav-pager ul a:hover {
-  background-color: @main-color-theme;
-  color: @font-color-for-main;
-}
-
-.nav-pager ul .nav-pagesize,
-.nav-pager ul .nav-page-select,
-.nav-pager ul .nav-displaying {
-  padding: 0 1em 0 1em;
-}
-
-.nav-pager ul .nav-first-disabled,
-.nav-pager ul .nav-previous-disabled,
-.nav-pager ul .nav-next-disabled,
-.nav-pager ul .nav-last-disabled {
-  padding: 0 1em 0 1em;
-}
-
-.nav-pager ul .nav-first-disabled:hover,
-.nav-pager ul .nav-previous-disabled:hover,
-.nav-pager ul .nav-next-disabled:hover,
-.nav-pager ul .nav-last-disabled:hover {
-  cursor: not-allowed;
-}
-
-
-.nav-pager ul .nav-displaying {
-  border-right: none;
-}
-
-
-/* ---------------------------- */
-/*     Multi-Column Styles      */
-/* ---------------------------- */
-
-#column-container {
-  margin: auto;
-  padding: 1em;
-  position: relative;
-  min-width: @min-container-width;
-}
-
-#column-container h1,
-#column-container .h1,
-#column-container h2,
-#column-container .h2 {
-  margin-bottom: 0.5em;
-}
-
-#column-container h1,
-#column-container .h1 {
-  color: #557996;
-}
-
-#column-container .left {
-  float: left;
-  /* alt: position: absolute; top: 0px; left: 0px; */
-  width: 22em;
-  margin-right: 1em;
-}
-
-#column-container .left-larger {
-  float: left;
-  /* alt: position: absolute; top: 0px; left: 0px; */
-  width: 25em;
-  margin-right: 1em;
-}
-
-.lefthalf {
-  float: left;
-  height: 1%;
-  left: 0;
-  margin: 0% 1% 1% 0%;
-  width: 49%;
-}
-
-.righthalf {
-  float: right;
-  height: 1%;
-  margin: 0 0 1% 1%;
-  right: 0;
-  width: 49%;
-}
-
-#column-container .right {
-  float: right;
-  margin-left: 1em;
-  width: 22em;
-}
-
-#column-container .leftonly {
-  margin-left: 23em;
-  width: auto;
-}
-
-#column-container .leftonly-larger {
-  margin-left: 26em;
-  width: auto;
-}
-
-#column-container .rightonly {
-  margin-right: 23em;
-  width: auto;
-}
-
-#column-container .center {
-  margin-left: 23em;
-  margin-right: 23em;
-  width: auto;
-}
-
-#column-container .nocolumns {
-  width: auto;
-}
-
-/* ---------------------- */
-/*      Button Style      */
-/* ---------------------- */
-
-.button-bar li.buttontext a,
-a.buttontext,
-a.buttontextbig,
-.smallSubmit,
-.smallSubmit:hover,
-.mediumSubmit,
-.largeSubmit,
-.loginButton,
-.button-style-1 a,
-.button-style-1 ul a,
-.button-style-2 ul a,
-.button-style-2 a,
-.button,
-button,
-input[type="reset"],
-input[type="submit"],
-input[type="button"] {
-  -webkit-appearance: none;
-  -moz-border-radius: 1.1em;
-  -webkit-border-radius: 1.1em;
-  border-radius: 2px;
-  border: 0.1em solid @main-color-theme;
-  background-color: @white;
-  cursor: pointer;
-  color: @main-color-theme;
-  display:inline-block;
-  font-size: 1em;
-  font-weight: bold;
-  outline: 0;
-  overflow: visible;
-  padding: 0.4em 1em 0.4em;
-  text-decoration:none;
-  /*text-transform:uppercase;*/
-  width: auto;
-
-  /* IE7 */
-  *padding-top: 0.2em;
-  *padding-bottom: 0;
-  &:hover {
-    color: @font-color-for-main;
-    background-color: @main-color-theme;
-  }
-}
-
-
-/* ---------------------- */
-/*      Footer Style      */
-/* ---------------------- */
-
-#footer {
-  background: @dark-color-theme;
-  border-top: 0.1em inset #000;
-  padding: 0.5em 0 0.5em 0.5em;
-
-  height: @footer-height;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: "Quicksand", Arial, "Lucida Grande", sans-serif !important;
-  z-index: 10;
-
-  span {
-    color: @font-color-for-dark;
-    padding: 10px;
-  }
-
-  a {
-    color: @font-color-for-dark;
-    font-weight: normal;
-  }
-}
-
-#footer a:focus {
-  text-decoration: underline;
-}
-
-#footer-offset {
-  height: @footer-height + 10px;
-  width: 100%;
-}
+/* include main less theme file */
+@import (less) "rainbowstone-main-theme.less";