projekt kivitendo

# About this less stuff

## What is LESS?

Read this excellent short german overview: http://www.lesscss.de<br>

It is recommended to install lessc/node-less server-side.

LESS contains mainly CSS/LESS statements, and yes!, also pure and

valid CSS-Code is also accepted and compiled. The compiler (lessc) creates

pure and valid css code with your LESS and CSS code.

## How to create a style.css for kivitendo

First set the cursor of your terminal to <code>/css/less/</code> (<code>cd /css/less</code>)<br>

Use following command: <code>lessc style.less ../style.css</code><br>

For minifiying the output css:  <code>lessc -x style.less ../style.css</code><br>

Then a new <code>/css/style.css</code> is created except when errors occurs.

## Developing kivitendo CSS (not customizing)

Read style.less.<br>

This is the comand center for the whole less stuff.<br>

Variables can be set or changed in variables.less.<br>

Variables are efficacious in the other less files.

## Overriding original stuff

There are several overriding LESS files. Some of the files are for

customizing the original kivitendo LESS stuff.

 * <b>jquery-ui-overrides.less</b> (overrides original jquery css)

 * <b>main-overrides</b> (overrides a lot of kivitendo less/css stuff)

 * <b>custom-variables.less</b> (overrides variables in variable.less)

 * <b>custom.less</b> (overrides all the original kivitendo LESS stuff)

Overriding is useful for occurences of standard elements in a special

context. For example: a standard table occurs in a toggle panel or in other

control panels.

## jQuery and overriding jQuery-CSS

The jQuery LESS stuff contains the original jQuery CSS stuff (pure CSS).

Overriding the jQuery stuff (you can call it customizing for kivitendo) is

the best way to preserve full functionality of the jQuery JS. It is intended

just to change colors, font-sizes & -families etc. with the override-file

(jquery-overrides.less).

If there's a new jQuery-Version just paste the whole CSS code into the

corresponding LESS file. That's (almost) all, folks.

## Customizing kivitendo CSS (not developing)

For customisation do not touch the original (developers) LESS files.<br>

Therefore it is recommended to edit only these two files:

 * <b>custom-variables.less</b> (overrides variables in variable.less)

 * <b>custom.less</b> (overrides all the original kivitendo LESS stuff)

These files can be empty if you do not want to customize the kivitendo CSS

stuff. The original custom files contains only comments and deactivated example

code.

Customization only with these two files gives you comfort in your GIT

habit.

// ----------------------------------------------------------------------------

//

// ADMIN-Section

//

// ----------------------------------------------------------------------------

// DESCRIPTION:

//

//

//

// CONTENTS:

// -

// -

// -

// -

// ----------------------------------------------------------------------------

// login and admin

// PENDENT: entfernen?!?!?!

a.no-underlined-links,

a.no-underlined-links:visited,

a.no-underlined-links:hover {

  text-decoration: none !important;

  background-color:transparent !important;

  border:none;

}

a.no-underlined-links:hover {

  background: none;

}

// Admin section: the menu itself doesn't occupy space. So make room

// at the top of the div covering the whole admin area.

body {

  & + #menuv3 {

    top: 0 important;

  }

  div.admin {

    margin: 60px 0 0 0 ;

    //top: 60px;

    h1 {

      background-color: #fe5f14 !important;

      color: #ffffff;

      top: 30px ;

      position: fixed;

      width: 100% ;

      padding: 0.6em 0.5em 0.5em 0.6em;

      z-index: 1000;

      & + .wrapper {

        padding-top: 1.2em;

      //margin-top: 1.0em ;

      //top: 1.0em;

      //&:first-child{

      //padding-top: 2.0em;

      //}

      }

    }

    .tabwidget {

      //top: 35px ;

      padding: 2.4em 0 0 0 !important;

      .ui-tabs-nav{

        top: 66px;

      }

      .ui-tabs-panel {

        padding: 2.0em 1.0em 1.0em 1.0em ;

        overflow: hidden;

        height: auto;

        min-height: 300px ;

      }

    }

    & > form{

      display: block ;

      margin-top: 1px ;

      padding-top: 1.2em ;

    }

    &> form {

      //padding-top: 3.8em ;

    }

    .message{

      &_error,

      &_hint,

      &_info,

      &_warning,

      &_ok{

        //margin-top: 70px ;

      }

    }

  }

}

// ----------------------------------------------------------------------------

//

// BUTTONS (FORM BUTTONS & LINKS AS BUTTONS)

//

// ----------------------------------------------------------------------------

// DESCRIPTION: all kind of buttons

//

// CONTENTS:

// - FORM BUTTONS

//   - input, button

//     - .clear

//     - Dimensions

//   - button.icon

//   - Action STRONG (submission to server page)

//   - Action SOFT/NEUTRAL (no submission to server page)

//   - button

//     - .below

// - LINK AND LABELS DESIGNED AS BUTTONS

// - BUTTONS CONTAINER

// - IMAGE-BUTTONS

// ----------------------------------------------------------------------------

// --------------------------------------

// FORM BUTTONS

// --------------------------------------

// At first we tried to nest the buttons within the form element,

// but it is not possible because some forms do not have a form element

// (e.g. print dialog)

//form {

  // General

  input[type="button"],

  input[type="submit"],

  input[type="reset"],

  button {

    .mx-button ; // Mixin

    &.clear { clear: left; }

    // DIMENSIONS

    &.wi-verysmall   { min-width: @input-wi-verysmall   ; }

    &.wi-small       { min-width: @input-wi-small       ; }

    &.wi-mediumsmall { min-width: @input-wi-mediumsmall ; }

    &.wi-normal      { min-width: @input-wi-normal      ; }

    &.wi-lightwide   { width:     @input-wi-lightwide   ; }

    &.wi-wide        { width:     @input-wi-wide        ; }

    &.wi-wider       { width:     @input-wi-wider       ; }

    &.wi-verywide    { width:     @input-wi-verywide    ; }

    &.wi-tiny {

      width: auto ;

      padding: 0.16em 0.2em 0.1em 0.2em;

      margin: -0.3em 0 0 0.2em;

      //float: right;

      display: inline-block;

      font-size: 84% ;

      min-height: 23px;

      max-height: 23px;

    }

    &.wi-verytiny{

      font-size: 8pt !important;

      padding: 0.0em 0.3em 0.1em 0.3em;

      display: inline-block;

      min-height: 17px;

      max-height: 17px;

    }

  } // /input[type="button etc."] /button

  button.icon{

    padding:    0 ;

    margin:     0 ;

    background: none !important;

    border:     none;

    display: inline-block;

    img { vertical-align: middle ; }

  }

  // -------------------

  // Action STRONG (submission to server page)

  input[type="submit"],

  input[type="button"],

  input[type="button"].button,

  button[type="submit"],

  button[type="button"] {

    color:            @btn-default-color ;

    background-color: @btn-default-bg;

    border-color:     @btn-default-border ;

    &:hover{

      color:            @btn-default-hover-color ;

      background-color: @btn-default-hover-bg;

      border-color:     @btn-default-hover-border ;

    }

    &:active,

    &:focus{

      color:            @btn-default-active-color ;

      background-color: @btn-default-active-bg;

      border-color:     @btn-default-active-border ;

    }

  }

  // -------------------

  // Action SOFT/NEUTRAL (no submission to server page)

  input[type="button"].neutral,

  input[type="submit"].neutral,

  input[type="reset"],

  input[type="reset"].neutral,

  button.neutral,

  button[type="reset"] {

    color:              @btn-neutral-color ;

    background-color:   @btn-neutral-bg;

    border-color:       @btn-neutral-border ;

    &:hover {

      color:            @btn-neutral-hover-color ;

      background-color: @btn-neutral-hover-bg;

      border-color:     @btn-neutral-hover-border ;

    }

    &:active,

    &:focus {

      color:            @btn-neutral-active-color;

      background-color: @btn-neutral-active-bg;

      border-color:     @btn-neutral-active-border ;

    }

  }

  // PENDENT: Neu

  input[type="button"]{

    &.below{

      clear: both !important;

      float: none;

      margin-top: 0.3em;

      overflow: hidden ;

    }

  }

//} // /form

// --------------------------------------

// LINKS DESIGNED AS BUTTONS

// They may be placed inside or outside a form

// --------------------------------------

a {

  &.button {

    .mx-button ;

    &.below { clear: both !important; }

    // STANDARD colors

    .mx-button-standard ;

    .mx-button-standard-hover-focus ;

    // NEUTRAL (no Submission)

    &.neutral {

      &:link,

      &:visited{

        .mx-button-neutral ; // Mixin

      }

      .mx-button-neutral-hover-focus ; // Mixin

    } // /.neutral

    &.wi-smallest     { width:     @input-wi-smallest    ; }

    &.wi-verysmall    { width:     @input-wi-verysmall   ; }

    &.wi-small        { width:     @input-wi-small       ; }

    &.wi-mediumsmall  { width:     @input-wi-mediumsmall ; }

    &.wi-normal       { width:     @input-wi-normal      ; }

    &.wi-lightwide    { width:     @input-wi-lightwide   ; }

    &.wi-wide         { width:     @input-wi-wide        ; }

    &.wi-wider        { min-width: @input-wi-wider       ; }

    &.wi-verywide     { min-width: @input-wi-verywide    ; }

    // Tiny button (one letter button)

    &.wi-tiny {

      display:            inline-block;

      width:              auto ;

      padding:            0.16em 0.2em 0.1em 0.2em;

      margin:            -0.3em 0 0 0.2em;

      font-size:          84% ;

    }

    // Toggle (for filters e.g.)

    &.toggle {

      &.off::after{

        content:                    " ▸";

        padding-right:              1.0em;

      }

      &.on::after {

        content:                    " ▾";

        padding-right:              1.0em;

      }

      &.with-panel{

        margin-bottom:              0 ;

        border-bottom: none;

        border-bottom-left-radius:  0px ;

        border-bottom-right-radius: 0px ;

      }

      &:hover{

        background-color:           @btn-neutral-bg !important;

        border-color:               @btn-neutral-border  !important ;

        color:                      @btn-neutral-color;

        text-decoration:            none;

      }

    } // /.toggle

  } // /.button

}// /a

// --------------------------------------

// LABELS DESIGNED AS BUTTONS

// They may be placed inside or outside a form

// --------------------------------------

#content label.button {

  .mx-button ; // Mixin

  // STANDARD colors

  .mx-button-standard ; // Mixin

  .mx-button-standard-hover-focus ; // Mixin

  // NEUTRAL (no Submission)

  &.neutral {

    .mx-button-neutral ; // Mixin

    .mx-button-neutral-hover-focus ; // Mixin

  } // /.neutral

} // /.button

// --------------------------------------

// BUTTONS CONTAINER

// --------------------------------------

// Container fuer Buttons

div.buttons {

  padding:                1.0em ;

  clear:                  left ;

  display:                block;

  // PENDENT: anschauen, ist fuer Anzeige von Positionsdetails

  &.positions {

    margin:               0 0 -2.0em 26.0em;

    padding:              0em;

  }

  &.below {

    padding:              0 ;

    margin:               0 ;

  }

}

.col > .buttons,

.wrapper * .buttons {

  padding:                1.0em 1.0em 1.0em 0 !important;

}

// --------------------------------------

// IMAGE BUTTONS ()

// --------------------------------------

.button-image {

  display: inline-block ;

  // Info or details button

  &.info {  }

  // Delete (cross) button

  &.delete {  }

  // Edit (pencil) button

  &.edit {  }

  // Map (globus / planet earth) button

  &.map { }

}

td,

th {

  .button-image { vertical-align: middle; }

}

input[type="button"].button-image{

  &.delete {

  background-image: url("image/cross.png");

  background-repeat: no-repeat;

  background-position: 0 0;

  color: #fff;

  background-color:transparent;

  border-color: none;

  border-width: 0;

  }

}

// This file is not effacious. It is intended to delete it in the end.

input.grow_on_focus {

    width: 20px;

    transition:         width 0.1s;

    -moz-transition:    width 0.1s;

    -webkit-transition: width 0.1s;

    -o-transition:      width 0.1s;

    &:focus { width: 150px }

}

/* quirk to force certain constructs to block context  */

.block-context { overflow: hidden }

/* various oneshot decoration for legacy purpose. dont use  */

.small-text { font-size: @font-size-small; }

.bold       { font-weight: bold ;}

.float-left  { float: left;  }

.float-right { float: right; }

/* position  */

.position-relative { position: relative; }

.position-absolute { position: absolute; }

// ----------------------------------------------------------------------------

//

// COMMON PROPERTIES

//

// ----------------------------------------------------------------------------

// DESCRIPTION:

//

//

//

// CONTENTS:

// - HTML

// - BODY

// - DIVs & BOX-SIZING

// - CLEARFIX

// - MEDIA

// - CTI

// - INTERACT

// - CURSOR

// - CKEDITOR

// - PENDENT: bereinigen, bitte!

// ----------------------------------------------------------------------------

// --------------------------------------

// HTML

// --------------------------------------

html {

  // show scrollbar every time

  overflow-y: scroll;

}

// --------------------------------------

// BODY

// --------------------------------------

body {

  // don't use this IE stuff anymore!!!

  //behavior:url("csshover.htc") ;

  padding: 0;

  margin: 0 ;

}

// --------------------------------------

// DIVS & BOX-SIZING

// --------------------------------------

div, 

p,

span, 

input, 

textarea,

select, 

button,

a.button,

table, 

col,

th,

td

{

  box-sizing: border-box;

}

// --------------------------------------

// CLEARFIX

// --------------------------------------

// class to fix container around floats

.clearfix:after {

  clear:both;

  content:".";

  display:block;

  height:0;

  visibility:hidden;

}

// --------------------------------------

// MEDIA

// --------------------------------------

@media screen   { .noscreen { display: none; } }

@media print    { .noprint  { display: none ;} }

@media handheld { .nomobile { display: none; } }

// --------------------------------------

// CTI

// --------------------------------------

a.cti_call_action {

  //display: inline-block;

  display: block;

  padding-left: 18px;

  top: 2px;

  vertical-align: middle;

  background-image: url(../image/icons/16x16/phone.png);

  background-repeat: no-repeat;

}

// --------------------------------------

// INTERACT

// --------------------------------------

// clickable text anchors, usually with attached javascript handlers

.interact { color: gray }

.interact:hover { color: black; }

// --------------------------------------

// CURSOR

// --------------------------------------

.cursor-default { cursor: default }

.cursor-pointer { cursor: pointer }

.cursor-help    { cursor: help }

// --------------------------------------

// CKEditor

// --------------------------------------

// PENDENT: schauen, wie man das am besten hinkriegt,

// ggf. in CKEditor-JS-Dateien anpassen, was aber nicht nachhaltig ist

// CKEditor: Padding reduziert

.cke_contents iframe html body.cke_editable{

  padding: 0;

  margin: 0;

}

// --------------------------------------

// PENDENT

// --------------------------------------

// PENDENT: OBSOLET diese Klassen entfernen

 //  Internals (waren im HTML-Code eingebaut)

 //  ersetzen bzw. Verlagern in Tabellen ggf. Paragrafen oder DIVs

.top_border {

  border-top: solid black;

  border-width: 4px;

}

 //  Internals (waren im HTML-Code eingebaut)

 //  ersetzen bzw. Verlagern in Tabellen ggf. Paragrafen oder DIVs

.bottom_border {

  border-bottom: solid black;

  border-width: 1px;

}

// ----------------------------------------------------------------------------

//

// CONTROL PANELS

//

// ----------------------------------------------------------------------------

// DESCRIPTION: all kind boxes/tools for selecting, including and entering data

//

// CONTENTS:

// - FORM-ADDITION

// - SELECT ITEM

// - FILTER-TOGGLE-PANEL

// - INPUT-PANEL

// - PAGINATE

// - JUMP-TO

// ----------------------------------------------------------------------------

// --------------------------------------

// CONTROL-PANEL

// --------------------------------------

// General Class for all control panels

.control-panel {

  border:           @controlpanel-border;

  background-color: @controlpanel-bg;

  border-radius:    @controlpanel-radius;

  color:            red ;

  overflow:         hidden ;

}

// --------------------------------------

// FORM-ADDITION

// --------------------------------------

// Settings for including fields in a report

.form-addition{

  padding:          @controlpanel-padding-bold ;

  margin:           @controlpanel-margin !important ;

  width:            auto !important ;

  display:          inline-block ;

  h3{

    color:          @controlpanel-h3-color  !important;

    font-size:      @controlpanel-h3-size   !important;

    font-weight:    @controlpanel-h3-weight !important;

    margin: 0.3em 0 0.1em 0 !important;

    padding: 0 ;

  }

  h4{

    color:        @controlpanel-h4-color !important;;

    font-size:    @controlpanel-h4-size;

    font-weight:  @controlpanel-h4-weight;

    font-style:   @controlpanel-h4-style;

  }

  div.list{

    margin-top: 0.2em !important ;

    &.col{

//       min-width: 130px ;

//       max-width: 240px ;

    }

  }

} // /.form-addition

// --------------------------------------

// SELECT ITEM

// --------------------------------------

// for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)

.select-item{

  display:          inline-block ;

  width:            auto ;

  height:           auto;

  padding:          @controlpanel-select-item-padding ;

  margin:           @controlpanel-margin ;

  border:           @controlpanel-border ;

  border-radius:    @controlpanel-radius ;

  background-color: @controlpanel-bg ;

  color:            @controlpanel-color ;

  font-size:        @font-size-smaller ;

  input,

  select{

    margin-left:    0.6em ;

  }

  span.label{

    float:          left ;

    color:          @controlpanel-color ;

  }

  table{

    margin: 0 ;

    td, th{ color:  @controlpanel-color ; }

  }

  // see /controller.pl?action=FinancialOverview

  // PENDENT: anders loesen oder einfacher benennen

  .floating-boxes {

    display: table ;

    margin: 0.4em 0 0.8em 0 ;

    .floating-box {

      display: table-cell ;

      float: left ;

      font-size: @font-size-smaller ;

      height: 1.9em ;

      vertical-align: middle;

      padding: 0 2.0em 0 0 ;

      .button, button{

        margin: 0 ;

      }

      label,

      span.label{

        width: auto;

        display: inline-block;

        height: 160%;

      }

      input[type="checkbox"]{ margin: 0 0.4em 0 0 ; }

      select { margin: -0.3em 0 0 0; }

    }

  }

} // /.select-item

// Select function within standard wrapper

.ui-tabs-panel > .select-item {

  margin:     @contentbox-margin;

}

.wrapper > .select-item {

  margin:     0.8em 0 1.0em 0 ;

}

// --------------------------------------

// FILTER-TOGGLE-PANEL

// --------------------------------------

// for togglin a filter panel

// see inlcude file /templates/webpages/common/filter-toggle.html

.toggle_panel{

  & > a.button.toggle {

    padding: 0.2em 0 0.2em 1.4em;

    &:hover {

      background-color: @controlpanel-bg !important;

      text-decoration: underline ;

    }

  }

  span.summary {

    font-size: @font-size-small;

    padding-left: 2.0em;

    color: @gray-mediumdark;

  }

  .toggle_panel_block {

    display:  block;

    overflow: hidden;

    padding:          @controlpanel-padding ;

    margin:           2em 1em 0em 0; ;

    border-bottom-left-radius:  @controlpanel-radius ;

    border-bottom-right-radius: @controlpanel-radius ;

    border-top-right-radius:    @controlpanel-radius ;

    margin-top: -1px ;

    .buttons{

      clear: left ;

      padding: 0 !important;

      margin: 0;

    }

  }

  .tbl-horizontal {

    th{ color: @brand-darkest ; }

  }

}

// --------------------------------------

// INPUT-PANEL

// --------------------------------------

// Panel for entering data via jQuery-Scripts etc.

#content .input-panel {

  overflow: hidden;

  padding:                    @controlpanel-padding ;

  margin:                     @margin-from-wrapper ;

  background-color:           @controlpanel-bg;

  border:                     @controlpanel-border ;

  border-bottom-left-radius:  @controlpanel-radius ;

  border-bottom-right-radius: @controlpanel-radius ;

  border-top-right-radius:    @controlpanel-radius ;

  border-top-left-radius:     @controlpanel-radius ;

  width: auto ;

  min-width: 30% ;

  //max-width: 70% ;

  display: inline-block;

  & > h3 {

    margin-top: 0 ;

  }

  p      {

    font-size: @font-size-smaller ;

    margin: 0 0 0.4em 0 ;

  }

}

// --------------------------------------

// PAGINATE

// --------------------------------------

.paginate{

  display:          inline-block ;

  width:            auto ;

  height:           auto;

  padding:          0;

  margin:           @controlpanel-margin ;

  border:           @controlpanel-border;

  border-radius:    @controlpanel-radius ;

  background-color: @controlpanel-bg;

  color:            @controlpanel-color ;

  & > a,

  & > span {

    padding: 0.4em 0.6em !important;

    margin-top: -1px;

  }

  .paginate-prev {

    display:          inline-block ;

    &::before{ content: "◄"; }

    &:hover{

      border-bottom-left-radius: @controlpanel-radius;

      border-top-left-radius:    @controlpanel-radius;

    }

  }

  .paginate-next {

    display:          inline-block ;

    &::after{ content: "►"; }

    &:hover{

      border-bottom-right-radius: @controlpanel-radius;

      border-top-right-radius:    @controlpanel-radius;

    }

  }

  .paginate-page {

    display:          inline-block ;

    padding: 0 ;

  }

  span.paginate-page {

    background-color: @controlpanel-active-bg;

    color:            @controlpanel-active-text;

  }

  a:link, a:visited{  }

  a:hover,

  a:active{

    background-color: @controlpanel-bg-hover;

    color:            @controlpanel-bg-hover-text;

    text-decoration: none;

  }

}

// --------------------------------------

// JUMP-TO

// --------------------------------------

// for jumping e.g. to a address within a browser window

// PENDENT: anders und allgemein loesen

table.jump-to {

  &.right { float: right; }

  border: @controlpanel-border;

  border-radius: 0.2em ;

  background-color: @controlpanel-bg;

  margin: 0.8em 2.0em 0 1.2em !important;

}

// -------------------

// FLOAT-CELLS TABLE

// Table with left-floating cell

div.float-cells-table{

  display: block ;

  width: 100% ;

  overflow: hidden;

  font-size: 80% ;

  div.caption{

    float: left;

    display: block;

    width: auto:

    padding: 0 2.0em 0 0;

    margin: 0;

  }

  div.cells{

    float: left;

    display: block;

    overflow: hidden;

    width: 100%;

     background-color: #F66;

    div.cell{

      float: left;

      padding: 0 2.0em 0 0;

      border-right: 1px #fff solid;

      background-color: #FC6;

    }

  }

}

// ----------------------------------------------------------------------------

//

// CUSTOM LESS STUFF (ONLY FOR OVERRIDES OF THE STANDARD-KIVITENDO-STUFF)

//

// ----------------------------------------------------------------------------

// DESCRIPTION: Place your custom less/css stuff here

// Override the Kivitendo-Less-Stuff only in custom.less

//

//

//

// CONTENTS:

// - SUBJECT

// - - My special class

// - - My overridden class // PENDENT: bessere Beschreibung

// ----------------------------------------------------------------------------

//

// **********************************

// MY SPECIAL CLASS

// **********************************

//.my-class-padding: 0.2em ; // just an example

//

// **********************************

// MY OVERRIDDEN CLASSES // PENDENT: bessere Beschreibung

// **********************************

// You can delete or disable/enable the following CSS code

// This is just an exemple

// Do run "lessc style.less ../style.css" in your terminal session with cursor on the folder /css/less

/* Custom overrides */

/*

table.tbl-horizontal {

  display: table ;

  background-color: #ccc;

  border-bottom: 12px #ccc solid ;

  border-top-left-radius:   0 ;

  border-top-right-radius:  0 ;

  border-bottom-left-radius:   6px ;

  border-bottom-right-radius:  6px ;

  & > caption{

    color:                   #ffffff !important;

    background-color:        @gray-mediumdark;

    padding-left:            0.8em;

    border-top-left-radius:  6px ;

    border-top-right-radius: 6px ;

    //margin: -24px -12px 0.6em -12px ;

    & > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }

  }

  th{ padding-left: 0.3em; }

  td{ padding-right: 0.3em; }

  tbody { border-top: 8px #ccc solid; }

  &.checkered {

     tbody { border-top: none ; }

     border-bottom: none;

  }

  tbody > tr > td:first-child,

  tbody > tr > th:first-child,

  thead > tr > th:first-child{

    padding-left: 1.0em ;

  }

  tbody > tr:first-child {

    & > th { padding-top: 0.5em ; }

    & > td { padding-top: 0.5em ; }

  }

  th.caption{

    color:              #fff !important;

    background-color:   @gray-mediumdark;

    padding:            0.4em 0 0.3em 0.8em;

    border-top:         6px solid #ccc;

    border-bottom:      8px solid #ccc;

    margin-bottom: 0.6em ;

    //margin: -24px -12px 0.6em -18px ;

  }

}

.col{

  padding-bottom: 0.4em ;

  & > table.tbl-horizontal {

    margin-right: 0 !important;

    //border-top-left-radius:  0 ;

    //border-top-right-radius: 0 ;

    border-radius: 0 ;

    padding-bottom: 0 ;

    caption{

      border-top-left-radius:  0 ;

      border-top-right-radius: 0 ;

    }

  }

  & > table.tbl-horizontal:first-child{

    border-top-left-radius:     0 ;

    border-top-right-radius:    0 ;

    border-bottom-left-radius:  0 ;

    border-bottom-right-radius: 0 ;

    margin-bottom: 0 ;

    caption{

      border-top-left-radius:  6px ;

      border-top-right-radius: 6px ;

    }

  }

  & > table.tbl-horizontal:last-child{

    border-bottom-left-radius:  6px  ;

    border-bottom-right-radius: 6px ;

    margin-bottom: 0 ;

  }

}

.cke_editable{

  margin-left: 0.0em !important;

}

 */

//  Benutzerdefinierte Tabellen-Angaben 

//  Diese uebersteuern alle Anweisungen aus tables.less 

//  Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden. 

//  Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches 

//  Design zu gewaehrleisten 

//  Diese Datei wird am Schluss von tables.less includiert. 

table{

    //  Zusatzklasse zur Tabelle (Beispiel) 

    //  Betreff: xyz 

    //  Autor: hanspeter.schlaepfer@revamp-it.ch 

    &.meine-tabellen-klasse {

    }

    //  Tabelle mit spezieller ID (Beispiel) 

    //  Betreff: xyz 

    //  Autor: hanspeter.schlaepfer@revamp-it.ch 

    &#meine-spezielle-tabelle {

    }

    //  Tabelle mit Konten-Uebersicht (Kontoplan) 

    //  Betreff: Kontoplan 

    //  Autor: hanspeter.schlaepfer@revamp-it.ch 

    &#konten-plan {

        tbody tr{

            td:first-child {

                text-align: right !important;

            }

            &.heading td {

                font-size: @font-size-large;

                border-top: 1px #999 solid;

            }

        }

        tr:first-child {

             &.heading td {

                border: none;

            }

        }

    }

// PENDENT: genauer anschauen

  &#eurtable {

    border-collapse: collapse;

    width: 100%;

  }

  tr.category {

    //  background set via jquery 

  }

  tr.chart {

    border: 0;

  }

  td.chartname {

    padding-left: 50px;

  }

  tr.chartrow {

    font-size: 75%;

  }

  .guv_row_background {

    background:#f0f0f0;

  }

  .tr_error {

    background-color: #ffc9c9;

  }

}

// ----------------------------------------------------------------------------

//

// CUSTOM VARIABLES (ONLY FOR OVERRIDES IN CUSTOM.LESS)

//

// ----------------------------------------------------------------------------

// DESCRIPTION: Place your custom variables here

// For more information about variables see variables.less

// Copy variables from variable.less into this files here

// Do not change variables and less stuff in the original source files

// then you will be happy with your git work

//

// CONTENTS:

// - SUBJECT

// - - My override variables

// - - My own variables

// ----------------------------------------------------------------------------

//

// **********************************

// MY OVERRIDE VARIABLES

// **********************************

//

// **********************************

// MY SPECIAL VARIABLES

// **********************************

//@my-class-padding: 0.2em ; // just an example

// ----------------------------------------------------------------------------

//

// Developing-Section

//

// ----------------------------------------------------------------------------

// DESCRIPTION:

// This LESS-file is just for us developers.

// Don't be ashamed to disable the rendering of the following LESS/CSS-Code

// in the file style.less.

//

//

// CONTENTS:

// -

// -

// -

// -

// ----------------------------------------------------------------------------

body.developing{

  &>header{

     background-color: @h1-bg;

     display: block;

     overflow: hidden;

    h1{

      float: left;

      color: @h1-color ;

      padding: 1.0em;

    }

    nav{

      float: right;

      padding: 1.0em;

      a:link,

      a:visited {

        color: white ;

      }

    }

  }

  .wrapper{

    p,

    ul,

    ol,

    li,

    h2,

    h3,

    h4{

      clear: both;

      width: 60.0em;

      max-width: 60em;

    }

  }

  & > p,

  & > h2,

  & > h3,

  & > h4 {

    margin-left: 0.8em ;

  }

  h2, h3, h4 { font-weight: bold ; color: #000 !important; clear: left; padding-left: 0 !important; }

  h2{ font-size: 130%;  }

  h3{ font-size: 120%;  }

  h4{ font-size: 110%;  }

  pre {

    margin: 0 0 1.0em 0 ;

    padding: 0.6em ;

    border: 1px #000 solid ;

    background-color: #ddd ;

    display: inline-block;

    clear: both;

    code{ padding: 0 ; }

  }

  div.code-highlighted{

    margin: 0 0 1.0em 0 ;

    padding: 0.6em ;

    border: 1px #000 solid ;

    background-color: #ddd ;

    display: inline-block;

  }

  p.picture{

    background-color: #fff;

    padding: 0.8em;

    border: 1px @gray-medium solid;

    display: inline-block;

    width: auto;

  }

  .wrapper{

    .tbl-horizontal{

      border: 1px black solid !important;

      border-collapse: collapse;

      tbody {

        border-top: none;

      }

      caption,th { padding-left: 0.6em ; }

      th.caption {

        border-top: none;

        border-bottom: none;

      }

      &.test,

      &.test-plain{

        th{

          //border: 1px black solid !important;

          padding-left: 0.3em;

        }

        td{

          //border: 1px black solid ;

          display: block;

          overflow: visible;

          border-bottom: 1px @gray-mediumdark solid ;

        }

        tr:last-child td { border: none ;}

      }

    }

    &.clear{

      .tbl-horizontal{

        clear: both ;

      }

    }

    table.tbl-list > thead > tr th:first-child, table.tbl-list > tbody > tr td:first-child {

        padding-left: 0 !important;

    }

    div.test-box{

      font-size: 80% ;

      overflow: visible;

      padding: 0.3em 0.5em ;

      background-color: #9D9E9D;

      float: left;

      border: 1px #000 dotted ;

    }

  } // /.wrapper

} // /body.developing

// ----------------------------------------------------------------------------

//

// DEVELOPERS DEMO

//

// ----------------------------------------------------------------------------

// DESCRIPTION: All colors for the demo color page in /css/developing/farben-demo.html

// use following statement for creating the demo-css-file:

//   lessc developing-demo.less ../css/developement/farben-demo.css

//

// For creating the HTML demo blocks from variables.less use following grep patterns

//   @([a-z-]+)[ ]*:[ ]*[@][0-9a-z-]+[ ]*;         replace with:

//   .\1 { background-color: @\1 } or .$1 { background-color: @$1 }

// ----------------------------------------------------------------------------

@import 'variables';

// --------------

// Grey shades

.gray-darker { background-color: @gray-darker }

.gray-dark { background-color: @gray-dark }

.gray-mediumdark { background-color: @gray-mediumdark }

.gray { background-color: @gray }

.gray-medium { background-color: @gray-medium }

.gray-light { background-color: @gray-light }

.gray-lighter { background-color: @gray-lighter }

.gray-morelighter { background-color: @gray-morelighter }

.gray-verylight { background-color: @gray-verylight }

.gray-superlight { background-color: @gray-superlight }

// --------------

// Divers Color Specications

// for message and other coloured stuff

// error

.color-red-strong { background-color: @color-red-strong }

.color-red-light { background-color: @color-red-light }

// ok

.color-green-strong { background-color: @color-green-strong }

.color-green-light { background-color: @color-green-light }

// info/hint

.color-blue-strong { background-color: @color-blue-strong }

.color-blue-light { background-color: @color-blue-light }

// warning

.color-orange-strong { background-color: @color-orange-strong } // more brown

.color-orange-light { background-color: @color-orange-light }

// divers

.rainbow-green { background-color: @rainbow-green }

.rainbow-blue { background-color: @rainbow-blue }

.rainbow-red { background-color: @rainbow-red }

.rainbow-yellow { background-color: @rainbow-yellow }

// --------------

// Brand colors

// Text (Label & data)

.brand-primary { background-color: @brand-primary }

.brand-label { background-color: @brand-label }

.brand-label-bg { background-color: @brand-label-bg }

// Messages & info types

.brand-info { background-color: @brand-info }

.brand-info-bg { background-color: @brand-info-bg }

.brand-ok { background-color: @brand-ok }

.brand-ok-bg { background-color: @brand-ok-bg }

.brand-warning { background-color: @brand-warning }

.brand-warning-bg { background-color: @brand-warning-bg }

.brand-error { background-color: @brand-error }

.brand-error-bg { background-color: @brand-error-bg }