addons/point_of_sale/static/src/css/pos.css

   1 body{
   2     overflow: hidden;
   3 }
   4 .point-of-sale {
   5     padding: 0;
   6     margin: 0;
   7     background-color: #f0eeee;
   8     font-family: "Lucida Grande", Helvetica, Verdana, Arial;
   9     color: #555555;
  10     font-size: 12px;
  11     position: absolute;
  12     left: 0;
  13     top: 0;
  14     width: 100%;
  15     height: 100%;
  16 }
  17 .point-of-sale table {
  18     border-spacing: 0;
  19     border-collapse: collapse;
  20 }
  21 .point-of-sale td {
  22     border: 1px solid #e9eaec;
  23 }
  24 .point-of-sale input {
  25     color: #555555;
  26 }
  27 .point-of-sale a {
  28     text-decoration: none;
  29     color: #555555;
  30 }
  31 .point-of-sale button, .point-of-sale a.button {
  32     display: inline-block;
  33     cursor: pointer;
  34     padding: 4px 10px;
  35     font-size: 11px;
  36     border: 1px solid #cacaca;
  37     -moz-border-radius: 4px;
  38     -webkit-border-radius: 4px;
  39     border-radius: 4px;
  40     background: #e2e2e2;
  41     background: -moz-linear-gradient(#f0f0f0, #e2e2e2);
  42     background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
  43 }
  44 .point-of-sale ul, .point-of-sale ol {
  45     padding: 0;
  46     margin: 0;
  47 }
  48 .point-of-sale li {
  49     list-style-type: none;
  50 }
  51 .point-of-sale button img {
  52     vertical-align: bottom;
  53 }
  54 .point-of-sale .pos-right-align {
  55     text-align: right;
  56 }
  57 .point-of-sale .pos-right-align input {
  58     text-align: right;
  59 }
  60 .point-of-sale #container {
  61     width: 100%;
  62     height: 100%;
  63 }
  64 .point-of-sale #topheader {
  65     width: 100%;
  66     height: 54px;
  67     color: gray;
  68     border-top: solid 1px #d3d3d3;
  69     border-bottom: solid 1px black;
  70     background: #393939;
  71     background: -moz-linear-gradient(#7b7979, #393939);
  72     background: -webkit-gradient(linear, left top, left bottom, from(#7b7979), to(#393939));
  73 }
  74 .point-of-sale #topheader button {
  75     color: black;
  76     border: 1px solid black;
  77     background: #7f82ac;
  78     background: -moz-linear-gradient(#b2b3d7, #7f82ac);
  79     background: -webkit-gradient(linear, left top, left bottom, from(#b2b3d7), to(#7f82ac));
  80 }
  81 .point-of-sale #branding, .point-of-sale #rightheader {
  82     float: left;
  83     overflow: hidden;
  84     height: 35px;
  85     padding: 10px;
  86 }
  87 .point-of-sale #rightheader {
  88     float: none;
  89     margin-left: 440px;
  90 }
  91 .point-of-sale #branding {
  92     border-right: 1px solid #373737;
  93     text-align: left;
  94     width: 419px;
  95 }
  96 .point-of-sale #branding img {
  97     height: 32px;
  98     width: 116px;
  99 }
 100 .point-of-sale #neworder-button {
 101     width: 32px;
 102     padding: 4px 10px;
 103 }
 104 .point-of-sale #loggedas {
 105     float: right;
 106     padding: 5px 9px;
 107     text-align: center;
 108     color: white;
 109     border-left: 1px solid #373737;
 110 }
 111 .point-of-sale #loggedas p {
 112     margin: 0 0 3px 0;
 113 }
 114 .point-of-sale #content {
 115     width: 100%;
 116     position: absolute;
 117     top: 56px;
 118     bottom: 0;
 119 }
 120 .point-of-sale #leftpane {
 121     -webkit-box-sizing:border-box;
 122     position:absolute;
 123     left:0;
 124     width:440px;
 125     top:0px;
 126     bottom:105px;
 127     /*height: 87%;
 128     width: 440px;
 129     position: relative;*/
 130     border-right: solid 1px #afafb6;
 131     background-color: white;
 132 }
 133 .point-of-sale #leftpane footer {
 134     position: absolute;
 135     bottom: 0;
 136     left: 0;
 137     width: 100%;
 138     background-color: #e0e0e0;
 139     background-image: url(../img/headerbackground.jpg);
 140     white-space: nowrap;
 141 }
 142 .point-of-sale #current-order {
 143     width: 100%;
 144     position: absolute;
 145     top: 0;
 146     bottom: 271px;
 147     overflow: auto;
 148 }
 149 .point-of-sale #current-order thead {
 150     background-color: #cccccc;
 151     background-image: url(../img/headerbackground.jpg);
 152     border: 0px;
 153     font-size: 12px;
 154     width: 440px;
 155 }
 156 .point-of-sale #current-order thead td {
 157     text-align: center;
 158     padding: 8px 0px;
 159     min-width: 40px;
 160     font-size: 12px;
 161 }
 162 .point-of-sale #current-order td {
 163     padding: 6px 4px;
 164     font-size: 11px;
 165     text-align: right;
 166     min-width: 40px;
 167     white-space: nowrap;
 168 }
 169 .point-of-sale #current-order td:first-child {
 170     width: 320px;
 171     padding: 6px;
 172     text-align: left;
 173     text-overflow: ellipsis;
 174 }
 175 .point-of-sale #current-order td:last-child {
 176     border-right: none;
 177 }
 178 .point-of-sale #current-order tr.selected {
 179     background-color: #e9eaf2;
 180 }
 181 .point-of-sale #current-order tr.selected td {
 182     border-top: 2px solid #d5d6e0;
 183     border-bottom: 1px solid #d5d6e0;
 184     padding-top: 5px;
 185     color: #555555;
 186 }
 187 .point-of-sale #amounts {
 188     background: white;
 189     border-bottom: solid 1px #d2d2d2;
 190     border-top: solid 1px #e9eaec;
 191     font-weight: bold;
 192     text-align: right;
 193     -webkit-margin-before: 0;
 194     -webkit-margin-after: 0;
 195 }
 196 .point-of-sale #amounts li {
 197     display: inline-block;
 198     padding: 8px;
 199     width: 29%;
 200 }
 201 .point-of-sale #paypad {
 202     padding: 8px 4px 8px 8px;
 203     display: inline-block;
 204     text-align: center;
 205     vertical-align: top;
 206 }
 207 .point-of-sale #paypad button {
 208     height: 54px;
 209     width: 208px;
 210     margin: 0 -3px;
 211     font-weight: bold;
 212     vertical-align: middle;
 213     color: #555555;
 214     border-top: 1px solid #efefef;
 215 }
 216 .point-of-sale #paypad button:hover {
 217     color: white;
 218     background: #7f82ac;
 219     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 220     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 221 }
 222 .point-of-sale #numpad {
 223     padding: 8px 8px 8px 4px;
 224     display: inline-block;
 225     text-align: center;
 226 }
 227 .point-of-sale #numpad button {
 228     height: 54px;
 229     width: 54px;
 230     margin: 0 -3px;
 231     font-weight: bold;
 232     vertical-align: middle;
 233     color: #555555;
 234     border-top: 1px solid #efefef;
 235 }
 236 .point-of-sale #numpad button:hover {
 237     color: white;
 238     background: #7f82ac;
 239     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 240     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 241 }
 242 .point-of-sale #numpad .selected-mode {
 243     color: white;
 244     background: #7f82ac;
 245     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 246     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 247 }
 248 .point-of-sale .payment-button {
 249     font-size: 14px;
 250 }
 251 .point-of-sale .input-button {
 252     font-size: 24px;
 253 }
 254 .point-of-sale .mode-button, .point-of-sale #numpad-delete, .point-of-sale #numpad-minus {
 255     font-size: 14px;
 256 }
 257 .point-of-sale #rightpane {
 258     position: absolute;
 259     top: 0;
 260     bottom: 105px;
 261     left: 440px;
 262     //height:100%;
 263     right: 0;
 264     vertical-align: top;
 265 }
 266 .point-of-sale #rightpane header {
 267     padding: 0;
 268     height: 32px;
 269     border-bottom: 1px solid #cecbcb;
 270     background: #d3d3d3;
 271     background: -moz-linear-gradient(white, #d3d3d3);
 272     background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d3d3d3));
 273 }
 274 .point-of-sale .product-list {
 275     overflow: auto;
 276     position: absolute;
 277     top: 72px;
 278     bottom: 0;
 279 }
 280 .point-of-sale .breadcrumb li {
 281     float: left;
 282     line-height: 32px;
 283     height: 32px;
 284 }
 285 .point-of-sale .breadcrumb li:last-child {
 286     padding-right: 3px;
 287     border-right: 1px solid #c5c5c5;
 288 }
 289 .point-of-sale .breadcrumb a {
 290     display: inline-block;
 291     padding: 0 9px;
 292     vertical-align: top;
 293     text-shadow: #f7f7f7 0 1px 1px;
 294     color: #555555;
 295     font-weight: bold;
 296 }
 297 .point-of-sale .bc-arrow {
 298     height: 33px;
 299 }
 300 .point-of-sale .homeimg {
 301     width: 19px;
 302     height: 19px;
 303     margin: 6px 0;
 304 }
 305 .point-of-sale .searchbox {
 306     position: absolute;
 307     right: 2px;
 308 }
 309 .point-of-sale .searchbox input {
 310     width: 130px;
 311     -moz-border-radius: 11px;
 312     -webkit-border-radius: 11px;
 313     border-radius: 11px;
 314     border: 1px solid #cecbcb;
 315     padding: 3px 19px;
 316     margin: 6px;
 317     background: url("../img/search.png") no-repeat 5px;
 318     background-color: white;
 319 }
 320 .point-of-sale .search-clear {
 321     position: absolute;
 322     top: 11px;
 323     right: 11px;
 324     cursor: pointer;
 325     display: none;
 326 }
 327 .point-of-sale #categories {
 328     border-bottom: 1px solid #cecbcb;
 329 }
 330 .point-of-sale #categories h4 {
 331     display: inline-block;
 332     margin: 9px 5px;
 333 }
 334 .point-of-sale #categories ol {
 335     display: inline;
 336 }
 337 .point-of-sale #categories li {
 338     display: inline-block;
 339 }
 340 .point-of-sale #categories .button {
 341     padding: 6px 14px;
 342     margin: 4px 0;
 343     font-size: 12px;
 344 }
 345 .point-of-sale .product {
 346     vertical-align: top;
 347     display: inline-block;
 348     font-size: 11px;
 349     margin: 5px;
 350     max-width: 120px;
 351     border: 1px solid lightgray;
 352     -moz-border-radius: 4px;
 353     -webkit-border-radius: 4px;
 354     border-radius: 4px;
 355     -moz-box-shadow: 0px 1px 4px #777777;
 356     -webkit-box-shadow: 0px 1px 4px #777777;
 357     -box-shadow: 0px 1px 4px #777777;
 358 }
 359 .point-of-sale .product-img {
 360     position: relative;
 361     width: 120px;
 362     height: 100px;
 363     background: white;
 364     text-align: center;
 365 }
 366 .point-of-sale .price-tag {
 367     position: absolute;
 368     top: 2px;
 369     right: 2px;
 370     vertical-align: top;
 371     color: white;
 372     background: #7f82ac;
 373     padding: 2px 5px;
 374     -moz-border-radius: 3px;
 375     -webkit-border-radius: 3px;
 376     border-radius: 3px;
 377 }
 378 .point-of-sale .price-subtag {
 379     position: absolute;
 380     top: 24px;
 381     right: 2px;
 382     vertical-align: top;
 383     color: white;
 384     background: #7f82ac;
 385     padding: 2px 5px;
 386     -moz-border-radius: 3px;
 387     -webkit-border-radius: 3px;
 388     border-radius: 3px;
 389 }
 390 .point-of-sale .product-name {
 391     padding: 3px;
 392 }
 393 .point-of-sale #login-form label, .point-of-sale #login-form input {
 394     display: block;
 395 }
 396 .point-of-sale #login-form input {
 397     margin: 4px 0 12px;
 398     padding: 4px;
 399     width: 96%;
 400 }
 401 .point-of-sale div#order-selector {
 402     display: inline;
 403 }
 404 .point-of-sale ol#orders {
 405     display: inline;
 406 }
 407 .point-of-sale li.order-selector-button {
 408     display: inline;
 409 }
 410 .point-of-sale li.selected-order button {
 411     font-weight: 900;
 412 }
 413
 414 .point-of-sale .step-screen {
 415     text-align: center;
 416 }
 417 .point-of-sale .step-screen header h2 {
 418     margin-top: 0px;
 419     padding-top: 7px;
 420 }
 421 .point-of-sale .step-screen p{
 422     font-size: 18px;
 423 }
 424
 425 .point-of-sale .pos-step-container {
 426     display: inline-block;
 427     font-size: 1.5em;
 428 }
 429 .point-of-sale .pos-payment-container {
 430     text-align: left;
 431 }
 432 .point-of-sale .pos-payment-container .payment-due {
 433     display: block;
 434     margin-top: 10px;
 435     margin-bottom: 10px;
 436     padding: 3px 6px 0px 6px;
 437     background-color: white;
 438     border:1px solid grey;
 439     border-radius: 3px;
 440 }
 441 .point-of-sale .pos-payment-container table {
 442     width: 100%;
 443     margin-bottom: 20px;
 444 }
 445 .point-of-sale .pos-payment-container .paymentline-type {
 446     font-size: 0.8em;
 447     font-weight: bold;
 448 }
 449 .point-of-sale .step-screen button {
 450     width: 50%;
 451     text-align: center;
 452     padding: 7px 0 7px 0;
 453     font-size: 0.8em;
 454     font-weight: bold;
 455 }
 456 .point-of-sale .pos-sale-ticket {
 457     text-align: left;
 458     width: 300px;
 459     background-color: white;
 460     margin: 20px;
 461     padding: 10px;
 462     display: inline-block;
 463 }
 464 .point-of-sale .pos-sale-ticket table {
 465     width: 100%;
 466     border: 0;
 467 }
 468 .point-of-sale .pos-sale-ticket table td {
 469     border: 0;
 470 }
 471 .point-of-sale .pos-receipt-container {
 472     font-size: 0.75em;
 473 }
 474
 475 .point-of-sale .oe_pos_synch-notification-button {
 476     color: white;
 477     border: 1px solid black;
 478     border-radius: 3px;
 479     padding: 2px 3px 2px 3px;
 480     background-color: #D92A2A;
 481 }
 482
 483 .receipt-buttons {
 484         white-space: nowrap;
 485 }
 486
 487 .pos-payment-buttons {
 488     white-space: nowrap;
 489 }
 490
 491 @media print {
 492     #oe_header, #oe_menu, .point-of-sale #topheader, .point-of-sale #leftpane {
 493         display: none;
 494     }
 495     .point-of-sale #content {
 496         top: 0px;
 497     }
 498     .point-of-sale #rightpane {
 499         left: 0px;
 500         background-color: white;
 501     }
 502     #receipt-screen header, .receipt-buttons {
 503         display: none;
 504     }
 505     #receipt-screen {
 506         text-align: left;
 507     }
 508     .pos-sale-ticket {
 509         margin: 0;
 510     }
 511 }
 512
 513 .point-of-sale .pos-actionbar{
 514     position:absolute;
 515     left:    0;
 516     bottom:  0px;
 517     height: 105px;
 518     width:  100%;
 519     margin: 0;
 520     background: #f5f5f5;    /*#ebebeb;*/
 521     border-top: solid 1px #afafb6;
 522     z-index:900;
 523 }
 524
 525 .point-of-sale .pos-actionbar ul{
 526     list-style:  none;
 527 }
 528
 529 .point-of-sale .pos-actionbar-left-pane{
 530     height: 100%;
 531     width:  434px;
 532     margin: 0px;
 533     padding-left:3px;
 534     padding-right:3px;
 535     border-right: solid 1px #dfdfdf;
 536     float:  left;
 537 }
 538
 539 .point-of-sale .pos-actionbar-button-list{
 540     height: 100%;
 541     margin: 0px;
 542     padding-left:3px;
 543     padding-right:3px;
 544     overflow:hidden;
 545 }
 546
 547 .point-of-sale .pos-actionbar .button{
 548     width: 90px;
 549     height: 90px;
 550     text-align:center;
 551     margin:3px;
 552     margin-top:6px;
 553     float:left;
 554
 555     font-size:   14px;
 556     font-weight: bold;
 557
 558     cursor: pointer;
 559
 560     border: 1px solid #cacaca;
 561     -moz-border-radius: 4px;
 562     -webkit-border-radius: 4px;
 563     border-radius: 4px;
 564
 565     background: #e2e2e2;
 566     background: -moz-linear-gradient(#f0f0f0, #e2e2e2);
 567     background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
 568     -webkit-box-shadow: 0px 2px 2px rgba(0,0,0, 0.3);
 569 }
 570 .point-of-sale .total{
 571     line-height: 105px;
 572     font-size: 26px;
 573     margin: 0;
 574     margin-left: 180px;
 575     font-weight: bold;
 576 }
 577 .point-of-sale .pos-actionbar .button .label{
 578     margin-top: 37px;
 579 }
 580 .point-of-sale .pos-actionbar .button .icon{
 581     margin-top: 10px;
 582 }
 583 .point-of-sale .pos-actionbar .button:hover {
 584     color: white;
 585     background: #7f82ac;
 586     border: 1px solid #7f82ac;
 587     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 588     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 589
 590     -webkit-transition-property: background, border;
 591     -webkit-transition-duration: 0.2s;
 592     -webkit-transition-timing-function: ease-out;
 593 }
 594
 595 .point-of-sale .pos-actionbar .button.rightalign{
 596     float:right;
 597 }
 598
 599 .point-of-sale .modal-dialog{
 600     position: absolute;
 601     left: 0;
 602     top: 0;
 603     width: 100%;
 604     height:100%;
 605     background-color: rgba(0,0,0,0.5);
 606     z-index:1000;
 607 }
 608 .point-of-sale .modal-dialog .popup{
 609     position: absolute;
 610     left:50%;
 611     top:50%;
 612     width:500px;
 613     height:400px;
 614     margin-left: -250px;
 615     margin-top: -200px;
 616     padding:10px;
 617     padding-top:20px;
 618     text-align:center;
 619     font-size:20px;
 620     font-weight:bold;
 621     background-color: #F0EEEE;
 622     border: 1px solid #E0DDDD;
 623     -webkit-box-shadow: 0px 10px 20px rgba(0,0,0, 0.3);
 624     z-index:1200;
 625 }
 626 .point-of-sale .popup .footer{
 627     position:absolute;
 628     bottom:0;
 629     left:0;
 630     width:100%;
 631     height:60px;
 632     border-top: 1px solid #E0DDDD;
 633 }
 634 .point-of-sale .popup .button{
 635     float:right;
 636     width: 110px;
 637     height: 40px;
 638     line-height:40px;
 639     text-align:center;
 640     margin:3px;
 641     margin-top:10px;
 642     margin-right:10px;
 643
 644     font-size:   14px;
 645     font-weight: bold;
 646
 647     cursor: pointer;
 648
 649     border: 1px solid #cacaca;
 650     -moz-border-radius: 4px;
 651     -webkit-border-radius: 4px;
 652     border-radius: 4px;
 653
 654     background: #e2e2e2;
 655     background: -moz-linear-gradient(#f0f0f0, #e2e2e2);
 656     background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
 657     -webkit-box-shadow: 0px 2px 2px rgba(0,0,0, 0.3);
 658 }
 659 .point-of-sale .popup .button:hover {
 660     color: white;
 661     background: #7f82ac;
 662     border: 1px solid #7f82ac;
 663     background: -moz-linear-gradient(#9d9fc5, #7f82ac);
 664     background: -webkit-gradient(linear, left top, left bottom, from(#9d9fc5), to(#7f82ac));
 665
 666     -webkit-transition-property: background, border;
 667     -webkit-transition-duration: 0.2s;
 668     -webkit-transition-timing-function: ease-out;
 669 }
 670
 671 .point-of-sale .popup .button.big-left{
 672     position:absolute;
 673     top: 120px;
 674     left:40px;
 675     width: 180px;
 676     height: 180px;
 677     line-height:180px;
 678 }
 679
 680 .point-of-sale .popup .button.big-right{
 681     position:absolute;
 682     top: 120px;
 683     right:40px;
 684     width: 180px;
 685     height: 180px;
 686     line-height:180px;
 687 }
 688
 689 /* Onscreen Keyboard http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/ */
 690
 691 .point-of-sale .keyboard_frame{
 692     display: none;
 693     position:absolute;
 694     left:    0;
 695     bottom:  0px;
 696     margin:  0;
 697     padding: 0;
 698     padding-top: 15px;
 699     width: 100%;
 700     height: 0px;    /* 235px, animated via jquery */
 701         background-color: #BBB;
 702     overflow:hidden;
 703     -webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0.3);
 704     -webkit-touch-callout: none;
 705     -webkit-user-select: none;
 706     -khtml-user-select: none;
 707     -moz-user-select: none;
 708     -ms-user-select: none;
 709     user-select: none;
 710
 711 }
 712 .point-of-sale .keyboard_frame .close_button{
 713     height:40px;
 714     width:60px;
 715     text-align:center;
 716     background-color: #DDD;
 717     font-size: 12px;
 718     line-height:40px;
 719     border: 1px solid #CCC;
 720         -webkit-border-radius: 5px;
 721     -webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
 722     position:absolute;
 723     top:0;
 724     right:15px;
 725         cursor: pointer;
 726 }
 727 .point-of-sale .keyboard li {
 728         float: left;
 729         text-align: center;
 730         background-color: #fff;
 731         border: 1px solid #f0f0f0;
 732     top:0;
 733         -moz-border-radius: 5px;
 734         -webkit-border-radius: 5px;
 735     -webkit-box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
 736     -webkit-transition-property: top, background-color;
 737     -webkit-transition-duration: 0.2s;
 738     -webkit-transition-timing-function: linear;
 739 }
 740 .point-of-sale .keyboard li:hover {
 741         position: relative;
 742         top: 2px;
 743         left: 0px;
 744         border-color: #ddd;
 745     background-color:#e5e5e5;
 746         cursor: pointer;
 747     -webkit-transition-property: top, background-color;
 748     -webkit-transition-duration: 0.1s;
 749     -webkit-transition-timing-function: ease-out;
 750 }
 751 .point-of-sale .uppercase {
 752         text-transform: uppercase;
 753 }
 754 .point-of-sale .on {
 755         display: none;
 756 }
 757 .point-of-sale .firstitem{
 758         clear: left;
 759 }
 760 .point-of-sale .keyboard .lastitem {
 761         margin-right: 0;
 762 }
 763
 764 /* ---- full sized keyboard ---- */
 765
 766 .point-of-sale .full_keyboard {
 767     list-style: none;
 768     font-size: 14px;
 769     width: 680px;
 770     height: 100%;
 771     margin-left: auto;
 772     margin-right: auto;
 773 }
 774 .point-of-sale .full_keyboard li{
 775         margin: 0 5px 5px 0;
 776         width: 40px;
 777         height: 40px;
 778         line-height: 40px;
 779 }
 780 .point-of-sale .full_keyboard .tab, .point-of-sale .full_keyboard .delete {
 781         width: 70px;
 782 }
 783 .point-of-sale .full_keyboard .capslock {
 784         width: 80px;
 785 }
 786 .point-of-sale .full_keyboard .return {
 787         width: 77px;
 788 }
 789 .point-of-sale .full_keyboard .left-shift {
 790         width: 95px;
 791 }
 792 .point-of-sale .full_keyboard .right-shift {
 793         width: 109px;
 794 }
 795 .point-of-sale .full_keyboard .space {
 796         clear: left;
 797         width: 673px;
 798 }
 799
 800 /* ---- simplified keyboard ---- */
 801
 802 .point-of-sale .simple_keyboard {
 803     list-style: none;
 804     font-size: 16px;
 805     width: 545px;
 806     height: 220px;
 807     margin-left: auto;
 808     margin-right: auto;
 809 }
 810 .point-of-sale .simple_keyboard li{
 811     margin: 0 5px 5px 0;
 812     width: 49px;
 813     height: 49px;
 814     line-height: 49px;
 815 }
 816 .point-of-sale .simple_keyboard .firstitem.row_asdf{
 817     margin-left:25px;
 818 }
 819 .point-of-sale .simple_keyboard .firstitem.row_zxcv{
 820     margin-left:55px;
 821 }
 822 .point-of-sale .simple_keyboard .delete{
 823     width: 103px;
 824 }
 825 .point-of-sale .simple_keyboard .return{
 826     width: 103px;
 827 }
 828 .point-of-sale .simple_keyboard .space{
 829     width:268px;
 830 }
 831 .point-of-sale .simple_keyboard .numlock{
 832     width:103px;
 833 }
 834