c-base-pos.css

/*
 Copyright ©2016 Andreas Kotes <count@flatline.de>
 Alle Rechte vorbehalten / All rights reserved.
 Lizensiert 2016 an den c-base e.V.
 Licensed 2016 to the c-base e.V.
*/
/*
 c-base colors:
  black:  #000000
  white:  #ffffff
  orange: #ff9900
  red:    #690e0d
  green:  #375f2a
  x1:     #0b1729
  x2:     #0c1c2a
  x3:     #63738f
  x4:     #9ba8bf
  x5:     #46b6ee
  x6:     #22374c
*/

/* provide our font */
@font-face {
    font-family: 'inconsolata';
    src: url('assets/inconsolata-webfont.eot');
    src: url('assets/inconsolata-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/inconsolata-webfont.woff') format('woff'),
         url('assets/inconsolata-webfont.ttf') format('truetype'),
         url('assets/inconsolata-webfont.svg#inconsolatamedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* set common parameters */
body {
  background-color: #000000;
  color:            #ffffff;
  margin:           0px;
  padding:          5px;
  font-family:      'inconsolata';
  line-height:      1;
  cursor:           crosshair;
  overflow:         hidden;
}

/* disable selecting */
* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/*
 1366x768
 - 5+840+5+511+5
 - 5+32+x+32+5
*/

header {
  background-color: #000;
  height: 32px;
  width: 1000px;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 32px;
}

section {
  background-color: #000;
  height: 550px;
  width: 1000px;
  position: absolute;
  top: 41px;
  left: 5px;
  font-size: 32px;
}

aside {
  background-color: #000;
  width: 351px;
  position: absolute;
  text-align: center;
  left: 1010px;
}

p.about {
  font-size: 28px;
}

div {
   background-color: #ff9900;
   color:            #000000;
   display: table;
   position: absolute;
   text-align: center;
}
div[disabled] {
   background-color: #0c1c2a;
   color:            #22374c;
}
div[touched] {
   background-color: #0b1729;
   color:            #ff9900;
}
div[selected] {
   background-color: #9ba8bf;
   color:            #000000;
}
div[selected][touched] {
   background-color: #0b1729;
   color:            #ff9900;
}

span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

aside#datetime {
  height: 32px;
  top: 5px;
  font-size: 27px;
}

aside#sales_side {
  height: 304px;
  top: 41px;
  font-size: 26px;
}
div.receipt {
  top: 272px;
  left: 0px;
  width: 85px;
  height: 52px;
  font-size: 38px;
}
div.list_amt {
  width: 85px;
  height: 32px;
}
div.list_txt {
  width: 155px;
  height: 32px;
}
div.list_sum {
  width: 103px;
  height: 32px;
}
span.list_amt {
  text-align: right;
  padding-right: 5px;
}
span.list_txt {
  text-align: left;
  padding-left: 5px;
}
span.list_sum {
  text-align: right;
  padding-right: 5px;
}
div#list_amt_0 {
  top: 0px;
  left: 0px;
  text-align: right;
}
div#list_txt_0 {
  top: 0px;
  left: 90px;
  text-align: left;
}
div#list_sum_0 {
  top: 0px;
  left: 248px;
  text-align: right;
}
div#list_amt_1 {
  top: 34px;
  left: 0px;
  text-align: right;
}
div#list_txt_1 {
  top: 34px;
  left: 90px;
  text-align: left;
}
div#list_sum_1 {
  top: 34px;
  left: 248px;
  text-align: right;
}
div#list_amt_2 {
  top: 68px;
  left: 0px;
  text-align: right;
}
div#list_txt_2 {
  top: 68px;
  left: 90px;
  text-align: left;
}
div#list_sum_2 {
  top: 68px;
  left: 248px;
  text-align: right;
}
div#list_amt_3 {
  top: 102px;
  left: 0px;
  text-align: right;
}
div#list_txt_3 {
  top: 102px;
  left: 90px;
  text-align: left;
}
div#list_sum_3 {
  top: 102px;
  left: 248px;
  text-align: right;
}
div#list_amt_4 {
  top: 136px;
  left: 0px;
  text-align: right;
}
div#list_txt_4 {
  top: 136px;
  left: 90px;
  text-align: left;
}
div#list_sum_4 {
  top: 136px;
  left: 248px;
  text-align: right;
}
div#list_amt_5 {
  top: 170px;
  left: 0px;
  text-align: right;
}
div#list_txt_5 {
  top: 170px;
  left: 90px;
  text-align: left;
}
div#list_sum_5 {
  top: 170px;
  left: 248px;
  text-align: right;
}
div#list_amt_6 {
  top: 204px;
  left: 0px;
  text-align: right;
}
div#list_txt_6 {
  top: 204px;
  left: 90px;
  text-align: left;
}
div#list_sum_6 {
  top: 204px;
  left: 248px;
  text-align: right;
}
div#list_amt_7 {
  top: 238px;
  left: 0px;
  text-align: right;
}
div#list_txt_7 {
  top: 238px;
  left: 90px;
  text-align: left;
}
div#list_sum_7 {
  top: 238px;
  left: 248px;
  text-align: right;
}
div#list_txt_sum {
  top: 272px;
  left: 90px;
  width: 261px;
  height: 52px;
  font-size: 32px;
}
span#listentry_txt_sum {
  text-align: left;
}
span#listentry_sum_sum {
  font-weight: bold;
  text-align: right;
}

div.sales {
  width: 196px;
  height: 106px;
  font-weight: bold;
}
div#sales_1x1 {
  top: 0px;
  left: 0px;
}
div#sales_2x1 {
  top: 0px;
  left: 201px;
}
div#sales_3x1 {
  top: 0px;
  left: 402px;
}
div#sales_4x1 {
  top: 0px;
  left: 603px;
}
div#sales_5x1 {
  top: 0px;
  left: 804px;
}
div#sales_2x1 {
  top: 0px;
  left: 201px;
}
div#sales_1x2 {
  top: 111px;
  left: 0px;
}
div#sales_2x2 {
  top: 111px;
  left: 201px;
}
div#sales_3x2 {
  top: 111px;
  left: 402px;
}
div#sales_4x2 {
  top: 111px;
  left: 603px;
}
div#sales_5x2 {
  top: 111px;
  left: 804px;
}
div#sales_1x3 {
  top: 222px;
  left: 0px;
}
div#sales_2x3 {
  top: 222px;
  left: 201px;
}
div#sales_3x3 {
  top: 222px;
  left: 402px;
}
div#sales_4x3 {
  top: 222px;
  left: 603px;
}
div#sales_5x3 {
  top: 222px;
  left: 804px;
}
div#sales_1x4 {
  top: 333px;
  left: 0px;
}
div#sales_2x4 {
  top: 333px;
  left: 201px;
}
div#sales_3x4 {
  top: 333px;
  left: 402px;
}
div#sales_4x4 {
  top: 333px;
  left: 603px;
}
div#sales_5x4 {
  top: 333px;
  left: 804px;
}
div#sales_1x5 {
  top: 444px;
  left: 0px;
}
div#sales_2x5 {
  top: 444px;
  left: 201px;
}
div#sales_3x5 {
  top: 444px;
  left: 402px;
}
div#sales_4x5 {
  top: 444px;
  left: 603px;
}
div#sales_5x5 {
  top: 444px;
  left: 804px;
}

div.result {
  width: 320px;
  height: 50px;
  font-weight: bold;
}
span.result {
  text-align: left;
}
img.result {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  margin: 5px 3px auto;
}
div#result_1x1 {
  top: 0px;
  left: 17px;
}
div#result_2x1 {
  top: 0px;
  left: 340px;
}
div#result_3x1 {
  top: 0px;
  left: 663px;
}
div#result_1x2 {
  top: 52px;
  left: 17px;
}
div#result_2x2 {
  top: 52px;
  left: 340px;
}
div#result_3x2 {
  top: 52px;
  left: 663px;
}
div#result_1x3 {
  top: 104px;
  left: 17px;
}
div#result_2x3 {
  top: 104px;
  left: 340px;
}
div#result_3x3 {
  top: 104px;
  left: 663px;
}

div.nextprev {
  width: 50px;
  height: 50px;
  font-weight: bold;
}
div#next {
  top: 156px;
  left: 933px;
}
div#prev {
  top: 156px;
  left: 17px;
}

div.entry {
  width: 320px;
  height: 50px;
  font-weight: bold;
}
div#entry {
  top: 156px;
  left: 340px;
}

div.keyboard {
  width: 84px;
  height: 84px;
  font-weight: bold;
}
div#key_1 {
  top: 208px;
  left: 17px;
}
div#key_2 {
  top: 208px;
  left: 103px;
}
div#key_3 {
  top: 208px;
  left: 189px;
}
div#key_4 {
  top: 208px;
  left: 275px;
}
div#key_5 {
  top: 208px;
  left: 361px;
}
div#key_6 {
  top: 208px;
  left: 447px;
}
div#key_7 {
  top: 208px;
  left: 533px;
}
div#key_8 {
  top: 208px;
  left: 619px;
}
div#key_9 {
  top: 208px;
  left: 705px;
}
div#key_0 {
  top: 208px;
  left: 791px;
}
div#key_bs {
  top: 208px;
  left: 877px;
  width: 106px;
}
div#key_q {
  top: 294px;
  left: 59px;
}
div#key_w {
  top: 294px;
  left: 145px;
}
div#key_e {
  top: 294px;
  left: 231px;
}
div#key_r {
  top: 294px;
  left: 317px;
}
div#key_t {
  top: 294px;
  left: 403px;
}
div#key_z {
  top: 294px;
  left: 489px;
}
div#key_u {
  top: 294px;
  left: 575px;
}
div#key_i {
  top: 294px;
  left: 661px;
}
div#key_o {
  top: 294px;
  left: 747px;
}
div#key_p {
  top: 294px;
  left: 833px;
}
div#key_a {
  top: 380px;
  left: 103px;
}
div#key_s {
  top: 380px;
  left: 189px;
}
div#key_d {
  top: 380px;
  left: 275px;
}
div#key_f {
  top: 380px;
  left: 361px;
}
div#key_g {
  top: 380px;
  left: 447px;
}
div#key_h {
  top: 380px;
  left: 533px;
}
div#key_j {
  top: 380px;
  left: 619px;
}
div#key_k {
  top: 380px;
  left: 705px;
}
div#key_l {
  top: 380px;
  left: 791px;
}
div#key_enter {
  top: 380px;
  left: 877px;
  width: 106px;
}
div#key_shift {
  top: 466px;
  left: 37px;
  width: 106px;
}
div#key_y {
  top: 466px;
  left: 145px;
}
div#key_x {
  top: 466px;
  left: 231px;
}
div#key_c {
  top: 466px;
  left: 317px;
}
div#key_v {
  top: 466px;
  left: 403px;
}
div#key_b {
  top: 466px;
  left: 489px;
}
div#key_n {
  top: 466px;
  left: 575px;
}
div#key_m {
  top: 466px;
  left: 661px;
}
div#key_minus {
  top: 466px;
  left: 747px;
}
div#key_underscore {
  top: 466px;
  left: 833px;
}

aside#keypad {
  height: 411px;
  top: 368px;
  background-color: #000;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
}
div.keypad {
  width: 85px;
  height: 74px;
}
div#keypad_tariff1 {
  top: 0px;
  left: 0px;
  font-size: 26px;
}
div#keypad_tariff2 {
  top: 78px;
  left: 0px;
  font-size: 26px;
}
div#keypad_tariff3 {
  top: 156px;
  left: 0px;
  font-size: 26px;
}
div#keypad_tariff4 {
  top: 234px;
  left: 0px;
  font-size: 26px;
}

div#keypad_7 {
  top: 0px;
  left: 90px;
}
div#keypad_8 {
  top: 0px;
  left: 178px;
}
div#keypad_9 {
  top: 0px;
  left: 266px;
}
div#keypad_4 {
  top: 78px;
  left: 90px;
}
div#keypad_5 {
  top: 78px;
  left: 178px;
}
div#keypad_6 {
  top: 78px;
  left: 266px;
}
div#keypad_1 {
  top: 156px;
  left: 90px;
}
div#keypad_2 {
  top: 156px;
  left: 178px;
}
div#keypad_3 {
  top: 156px;
  left: 266px;
}
div#keypad_comma {
  top: 234px;
  left: 90px;
}
div#keypad_0 {
  top: 234px;
  left: 178px;
}
div#keypad_ok {
  top: 234px;
  left: 266px;
}
div#keypad_x {
  top: 312px;
  left: 0px;
  height: 78px;
  background-color: #690e0d;
  color:            #ffffff;
}
div#keypad_x[disabled] {
  background-color: #0c1c2a;
  color:            #22374c;
}
div#keypad_x[touched] {
  background-color: #0b1729;
  color:            #690e0d;
}
div#keypad_enter {
  top: 312px;
  left: 90px;
  width: 261px;
  height: 78px;
  background-color: #375f2a;
  color:            #ffffff;
}
div#keypad_enter[disabled] {
  background-color: #0c1c2a;
  color:            #22374c;
}
div#keypad_enter[touched] {
  background-color: #0b1729;
  color:            #375f2a;
}

footer {
  background-color: #000;
  width: 1000px;
  position: absolute;
  left: 5px;
}

footer#menubar_main {
  top:              596px;
  height:           80px;
  font-size: 32px;
}
div.menubar {
  width: 196px;
  height: 80px;
}
div#login {
  top: 0px;
  left: 0px;
  width: 294px;
}
span#login_txt {
  text-align: left;
}
div#menu {
  top: 0px;
  left: 299px;
  width: 98px;
}
div#schedule {
  top: 0px;
  left: 402px;
}
div#howto {
  top: 0px;
  left: 603px;
}
div#query {
  top: 0px;
  left: 804px;
}


footer#log {
  height:           64px;
  top:              681px;
  color:            #fff;
  vertical-align:   bottom;
  text-align:       left;
  font-size:        20px;
}

footer#copyright {
  height:           14px;
  top:              747px;
  color:            #aaa;
  vertical-align:   bottom;
  text-align:       center;
  font-size:        12px;
}

div.debugWindow {
  background-color: #000000;
}

textarea.debugDisplay {
  font-family: 'inconsolata';
  font-size: 30px;
  background-color: #000000;
  color: #375f2a;
  overflow: hidden;
  width: 302px;
  height: 64px;
  border: none;
  outline: none;
  resize: none;
  padding: none
}

textarea.debugPrinter {
  font-family: 'inconsolata';
  font-size: 14px;
  background-color: #ffffff;
  color: #000000;
  width: 302px;
  overflow: hidden;
  height: 498px;
  border: none;
  outline: none;
  resize: none;
  padding: none
}

div.debugCashDrawer {
  font-family: 'inconsolata';
  font-size: 30px;
  color: #9ba8bf;
  background-color: #0b1729;
  // background-color: #690e0d;
  width: 302px;
  overflow: hidden;
  height: 32px;
  border: none;
  outline: none;
  resize: none;
  padding: none
}