/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 2, 2014, 9:43:39 AM
    Author     : nand
*/

body {
    background-image: url('resources/pattern6.png');
    background-attachment: fixed;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    margin: 0px;
}

/*CustomerSelector*/
#customerselector
{
    width: 12em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 0em 2em 2em 0em;
    background-color: #FFF;
}

#customerselector div.loader {
    width: 100%;
    height: 2em;
    background-image:url('resources/loader.gif');
    background-repeat: no-repeat;
    background-attachment: local;
    background-position:center; 
}

#customerselector h1 {
    width: 100%;
    font-size: 1em;
    text-align: center;
}

#customerselector ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

#customerselector ul li {
    border-bottom: 1px solid #AAA;
    padding: 0.2em 0.3em;
    font-size: 0.8em;
}

#customerselector ul li:hover {
    background-color: #85c34b;
}

#customerselector ul li:active {
    background-color: #a5f36b;
}

#customerselector div.backbutton {
    
}

#customerselector input {
    width: 8em;
    margin-left: 0.5em;
    margin-bottom: 1em;
}

/*Log In*/

#login {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 6em; right: 0;
    height: 20em;
    width: 560px;
}

div.logincontainer {
    height: 12em;
    width: 25em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 2em;
    background-color: #F0F2E8;
    padding: 3em;   
    margin: auto;
}

div.banner {
    background: url('resources/banner.png');
    width: 560px;
    height: 183px;
    position: relative;
    top: 3em;
}

div.labelinput {
    width: 100%;
    height: 2em;
    margin-bottom: 1em;
}

div.label {
    font-size: 1.2em;
    width: 9em;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    height: 100%;
}

div.inputfield {
    float: right;
    display: inline-block;
    height: 100%;
}

div.inputfield input, div.inputfield select {
    width: 9em;
}
div.backbuttoncontainer {
    
    margin-top: 1em;
    float: left;
    width: 9em;
    height: 2.5em;
}
div.submitbuttoncontainer {
    
    margin-top: 1em;
    float: right;
    width: 9em;
    height: 2.5em;
}

div.submitbuttoncontainer.loading {
    background-image:url('resources/loader.gif');
    background-repeat: no-repeat;
    background-attachment: local;
    background-position:center; 
}

div.ordercontainer {
    margin-bottom: 4em;
}

input.loginbutton,input.backbutton{
    width: 100%;
    height: 100%;


    background-color: #7fbf4d;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
    background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
    background-image: linear-gradient(top, #7fbf4d, #63a62f);
    border: 1px solid #63a62f;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
    box-shadow: inset 0 1px 0 0 #96ca6d;
    color: #fff;
    font: bold 0.8em/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    padding: 7px 0 8px 0;
    text-align: center;
    text-shadow: 0 -1px 0 #4c9021;
}

input.loginbutton:hover,input.backbutton:hover {
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    cursor: pointer; 
}
  
input.loginbutton:active,input.backbutton:active {
    border: 1px solid #5b992b;
    border-bottom: 1px solid #538c27;
    -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
}

input {
    font-size: 1.2em;
}

.languageselector {
    
    clear: both;
    width: 100%;
    text-align: center;
}

#languageradio {
    display: inline-block;
    margin: 2.5em auto 0em auto;
    font-size: 0.8em;
}


/*Date Page*/

#datepicker {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 5em; right: 0;
    height: 12em;
    width: 25em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 2em;
    background-color: #F0F2E8;
    padding: 3em;   
}


div.importantmessage {
    text-align: center;
    width: 100%;
    min-height: 2em;
    margin-bottom: 1em;
    color: red;
    font-size: x-large;
}
div.welcomemessage {
    text-align: center;
    width: 100%;
    margin-bottom: 1em;
}

#datepicker select {
    font-size: 1.2em;
}


/*Date Page*/

#infopage {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 5em; right: 0;
    height: 19em;
    width: 25em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 2em;
    background-color: #F0F2E8;
    padding: 3em;   
}


div.infopages {
    text-align: center;
    width: 100%;
    min-height: 2em;
    margin-bottom: 1em;
    
    font-size: x-large;
}

div.infopages div.pageslist {
    margin: 0em 1em;
    list-style-type: none;
    border: 1px solid #aaaaaa;
    border-radius: 0.5em;
    background-color: #fff;
    
    -webkit-padding-start: 0px;
}

div.infopages div.pageslist span {
    display: block;
    border-top: 1px solid #aaaaaa;
    padding: 0.3em;
}

div.infopages div.pageslist span:hover {
    background-color: #a5f36b;
}
div.infopages div.pageslist span:first-child:hover, div.infopages ul li:first-child:active {
    border-radius: 0.5em 0.5em 0em 0em;
}
div.infopages div.pageslist span:last-child:hover, div.infopages ul li:last-child:active {
    border-radius: 0em 0em 0.5em 0.5em;
}


div.infopages div.pageslist span:active {
    background-color: #85c34b;
}

div.infopages div.pageslist span:first-child {
    border-top: 0px;
}

div.infopages div.pageslist span a {
    text-decoration:none;
    color: black;
    
}

div.downloadmessage {
    text-align: left;
    width: 100%;
    margin-bottom: 1em;
}



/*Order Page*/

#orderpage {
    display: none;
    /*margin: 0 auto;*/
    
    /*top: 0; left: 0; bottom: 5em; right: 0;*/
    /*height: 100%;*/
    
    margin: auto;
    position: absolute;
    top: 0; right: 0; left: 0;
    
    width: 40em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 1em;
    background-color: white;
    padding: 0em 0.6em;
    
}

#orderpage div.settings {
    float: right;
}

div.settings div.settingsbutton {
    position: absolute;
    right: 0.7em;
    width: 30px;
    height: 30px;
    background-image: url('resources/settings.png');
    z-index: 101;
    cursor:pointer;
}

div.settings div.settingslist {
    display: none;
    /*margin: 33px 0.2em 0em 0em;*/
    list-style-type: none;
    border: 1px solid #aaaaaa;
    border-radius: 0em 0em 0.5em 0.5em;
    background-color: #fff;
    position: absolute;
    width: 8em;
    right: 0.8em;
    top: 15px;
    z-index: 100;
}

div.settings div.settingslist span {
    display: block;
    border-top: 1px solid #aaaaaa;
    padding: 0.3em;
    cursor:pointer;
}

div.settings div.settingslist span:hover {
    background-color: #a5f36b;
}
div.settings div.settingslist span:first-child:hover, div.settings div.settingslist span:first-child:active {
    border-radius: 0.0em 0.0em 0em 0em;
}
div.settings div.settingslist span:last-child:hover, div.settings div.settingslist span:last-child:active {
    border-radius: 0em 0em 0.5em 0.5em;
}

div.settings div.settingslist span:active {
    background-color: #85c34b;
}
div.settings div.settingslist span:first-child {
    border-top: 0px;
}

div settings div.settingslist {
    clear: both;
}

div.searchfield {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
}

div.searchfield input{
    display: inline-block;
    padding-left: 30px;
    
    background-image: url('resources/search.png');
    background-repeat:no-repeat;
    background-position:left center;
    outline:0;
}

tr.groupheader {
    border: 1px solid black;
    background-color: #76b347;
    
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #9fdf6d));
    background-image: -webkit-linear-gradient(top, #749712, #98c419);
    background-image: -moz-linear-gradient(top, #749712, #98c419);
    background-image: -ms-linear-gradient(top, #749712, #98c419);
    background-image: -o-linear-gradient(top, #749712, #98c419);
    background-image: linear-gradient(top, #749712, #98c419);
    margin-top: 0.4em;
}

tr.groupheader td {
    padding: 0.3em;
    color:white;
    font-weight: bold;
    text-shadow: 0.1em 0.1em #AAAAAA;
}

tr.ordercell {
    border-bottom: 1px solid #DDDDDD;
    padding: 0em 0.6em;
    font-size: 0.8em;
}

tr.ordercell.hashistory {
    font-weight: bold;
}

tr.ordercell.hasorder {
    background-color: #BBFFBB;
}


tr.ordercell.inactive {
    background-color: #AAA;
}
tr.ordercell.inactive input {
    display: none;
}

tr.ordercell.amountcheck td.quantityfield input {
    background-color: yellow;
}
tr.ordercell td.purchaseprice,
tr.ordercell td.salesprice {
    text-align: center;
}

tr.ordercell.showhistory td.purchaseprice,
tr.ordercell.showhistory td.salesprice {
    display: none;
}

tr.ordercell.hascomment td.unitofsales {
    background-image: url('resources/yellowcorner.png');
    background-position: right top;
    background-repeat: no-repeat;
}

tr.ordercell.showhistory td.history {
    display: inherit;
}

#commentfield {
    position: absolute;
    right: -10em;
    width: 10em;
}

tr.showhistory #commentfield {
    margin-top: 1em;
}

#commentfield input {
    background-color: yellow;
}


tr.ordercell td.icon, td.flag, td.ordercell td.name, 
tr.ordercell td.purchaseprice, td.ordercell td.salesprice, 
tr.ordercell td.quantityfield, td.history, td.unitofsales, td.amountpersalesunit {
    /*display: inline-block;
    padding: 0.2em 0.1em;*/
    vertical-align: middle;
}

tr.ordercell td.flag {
    width: 1.8em;
    text-align: left;
    height: 0.9em;
}

tr.ordercell td.icon {
    height: 25px;
    width: 25px;
    margin-right: 0.3em;
}

tr.ordercell td.icon.promo {
    background: url('resources/promoicon.png');
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center center;
}

tr.ordercell td.name {
    width: 13.8em;
    overflow: hidden;
}

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

tr.ordercell td.amountpersalesunit {
    width: 6.8em;
    overflow: hidden;
}

tr.ordercell td.purchaseprice {
    width: 5.8em;
    overflow: hidden;
}
tr.ordercell td.salesprice {
    width: 5.8em;
    overflow: hidden;
}
tr.ordercell td.history {
    width: 11.8em;
    overflow: hidden;
    padding: 0em;
    display: none;
}
tr.ordercell td.history table {
    font-size: 0.9em;
}
tr.ordercell td.history table tr th {
    width: 1em;
}
tr.ordercell td.history table tr td {
    text-align: center;
    border: 1px solid #AAA;
    border-radius: 0.3em;
    background-color: white;
}

tr.ordercell td.quantityfield {
    /*width: 6.8em;*/
}
tr.ordercell td.quantityfield input {
    text-align: center;
    width: 3.8em;
}

tr.ordercell td.unitofsales {
    text-align: center;
    width: 3.8em;
}

tr.ordercell td.unitofsales select {
    display: inline-block;
}

tr.ordercell td.historypricecontainer {
    text-align: right;
}

tr.ordercell td.historypricecontainer table{
    display: inline-block;
    margin-right: 1.5em;
}

tr.ordercell td.delete{
    display: inline-block;
    width: 1em;
    background-image: url('resources/delete.jpg');
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

table.ordercellcontainer.basket tr.ordercell td.delete {
    display: inline-block;
    width: 1em;
    background-image: url('resources/delete.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

table.ordercellcontainer.etiket tr.ordercell td.quantityfield {
    display: none;
}
table.ordercellcontainer.etiket tr.ordercell td.etiket {
    display: inline-block;
}

table.ordercellcontainer.order tr.ordercell td.quantityfield {
    display: inline-block;
}
table.ordercellcontainer.order tr.ordercell td.etiket {
    display: none;
}

.categoryselector {
    width: 100%;
    text-align: center;
}

#categoryradio {
    display: inline-block;
    margin: 0em auto 1.5em auto;
    font-size: 0.8em;
}

div.clear {
    clear: both;
}

table.ordercellcontainer {
    border-spacing: 0;
    width: 100%;
}

table.ordercellcontainer div.emptymessage {
    text-align: center;
    width: 100%;
}

table.ordercellcontainer.search {
    background-color: #e4efff;
}
/*
#orderpage div.orderbackground
{
    background-color: white;
    z-index: -10;
    left: 50%;
    margin-left: -20em;
    width: 40em;
    border-radius: 1em;
    padding: 0em 0.6em;
    height: 100%;
    position: fixed;
}

#orderpage div.ordercontent
{
    position: absolute;
    
    left: 50%;
    margin-left: -20em;
    width: 40em;
    padding: 5em 0.6em;
    //Nothing so far..
    z-index: 50;
}


*/

/*
#background_wrap {
    z-index: -20;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    //background-size: 100%;
    background-image: url('resources/pattern6.png');
    background-attachment: fixed;
}*/


#orderpage div.orderheader {
    height: 3em;
    padding: 1em;
}


#orderpage div.orderfooter {
    height: 3em;
    padding: 1em;
}

#about {
    height: 100%;
    width: 100%;
    position: fixed;
    margin: auto;
    text-align: center;
    background-color:rgba(0,0,0,0.7);
}

#about div.aboutcontainer {
    
    width: 30em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 1em;
    background-color: white;
    display: inline-block;
    padding: 1em;
    margin-top: 7em;
}

#about div.aboutcontainer input {
    display: block;
    float: right;
    margin-top: 2em;
}

#error {
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0em;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color:rgba(0,0,0,0.7);
}

#error div.errorcontainer {
    
    width: 25em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 2em;
    background-color: #F0F2E8;
    padding: 1em;
    margin: auto;
    margin-top: 4em;
}

#error div.errorcontainer div.errormessage {
    padding: 0.5em;
}
#error div.errorcontainer div.buttons {
    padding: 0.5em;
    text-align: right;
}

span.categoryspan {
}
span.basketamount {
    margin: 0em 0.2em 0em 0.5em;
    background-color: firebrick;
    border-radius: 0.4em;
    /*border: 0.1em solid red;*/
    display: inline-block;
    padding: 0em 0.5em;
    font-size: 1em;
    font-weight: bold;
    color: white;
}
#bottominfo {
    position: fixed;
    bottom: 0em;
    height: 3em;
    width: 30em;
    border-color: #707050;
    border-width: 1px;
    border-style: solid;
    border-radius: 2em 2em 0em 0em;
    background-color: #FFF;
    margin: 0 auto;
    left: 50%;
    margin-left: -15em;
    z-index: 9999;
}

#bottominfo table {
    width: 100%;
}

#bottominfo table td {
    text-align: center;
}