html {width:100%; height:100%; margin:0; padding:0;}

body {width:100%; height:100%; margin:0; padding:0; background-color:#fff;-webkit-touch-callout: none;-webkit-user-select:none ;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-family:Arial,Tahoma, Helvetica, sans-serif; font-size:11px;}

a {text-decoration:none;}
textarea {resize: none;}
input[type=checkbox]{margin-top:6px;}
input[type=text],textarea{-webkit-border-radius: 3px; -moz-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;border:1px solid #ccc;outline:none; text-align:center; color:#000;}
input:read-only{cursor:pointer}
input:disabled, select:disabled,textarea:disabled,multiselect:disabled{cursor:default; background-color:#ebebeb}

select {border:1px solid #ccc;outline:none; text-align:center; color:#000;padding: 5px 5px;
-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none;
-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;
}
.ui-menu .ui-menu-item a{height:15px; font-size:11px}
.ui-autocomplete {max-height:190px; width:auto; min-width:200px;overflow-y: scroll; overflow-x: hidden;}
#ui-datepicker-div{display:none;}

.CONTENT{background:#666 url(themes/excite-bike/images/grey_lined.png);}

.TOPmenu{ background-image:url(themes/excite-bike/images/grey_dark.png);
-moz-box-shadow: inset #000 0 -1px 0 0 ;-webkit-box-shadow: inset #000 0 -1px 0 0; box-shadow: inset #000 0 -1px 0 0;}
.TOPbuttons{background-color:#666;
-moz-box-shadow: inset #000 0 -1px 0 0 ;-webkit-box-shadow: inset #000 0 -1px 0 0; box-shadow: inset #000 0 -1px 0 0;}
.leftContent{float:left; position:relative; background-image:url(themes/excite-bike/images/red.png);
-moz-box-shadow: inset #333 -1px -1px 0 0; -webkit-box-shadow: inset #333 -1px -1px 0 0; box-shadow: inset #333 -1px -1px 0 0;}
.rightContent{position:relative;float:right; background:url(themes/excite-bike/images/grey_dark_lined.png);
-moz-box-shadow: inset #666 1px -1px 0 0 ;-webkit-box-shadow: inset #666 1px -1px 0 0; box-shadow: inset #666 1px -1px 0 0;}
.middleContent{position:relative; float:left;}
.middleContentLeft{float:left;background-image:url(themes/excite-bike/images/grey_yellow_lined.png);overflow:scroll;
-moz-box-shadow: inset #666 -1px -1px 0 0; -webkit-box-shadow: inset #666 -1px -1px 0 0; box-shadow: inset #666 -1px -1px 0 0;}
.middleContentRight{float:right;background-image:url(themes/excite-bike/images/grey_lined.png); text-align:center;overflow:scroll}



.resultsTableTitle{width:100%; height:auto; margin-top:10px; position:relative; font-size:18px; font-weight:bold; text-align:center;}

.ResultsLists{width:100%; margin:0 auto; margin-top:0px}

.ResultsLists input{padding:5px; width:70%;}
.ResultsLists input:disabled{cursor:default}
.ResultsLists select{padding:5px; width:70%;}
.ResultsLists select:disabled{cursor:default}
.ResultsLists textarea{padding:5px; width:70%;}
.ResultsLists textarea:disabled{cursor:default}


.ResultsLists .DataRowContainer input:focus{background-color:#fff;}
.ResultsLists div{padding:0px; float:left}

.ResultsLists .ColumnTitlesRowHolder{width:100%; height:30px; background: url(../images/grey_light.png); border-bottom:1px solid #333;}
#InvoiceDetailsList .ColumnTitlesRowHolder{height:40px;}
.ResultsLists .ColumnTitlesRowHolder div{float:left;font-size:12px; font-weight:bold; color:#fff; margin-top:7px; cursor:default;}

.ResultsLists .AddnewRecordRowHolder{width:100%; height:40px; background: url(../images/grey_light2.png); border-bottom:1px solid #666;}
.ResultsLists .AddnewRecordRowHolder div{float:left; height:35px; margin-top:5px}

.ResultsLists .TotalsRowHolder{width:100%; height:40px; background: url(../images/grey_dark_lined.png); border-bottom:1px solid #666;}
.ResultsLists .TotalsRowHolder div{float:left; height:35px; margin-top:5px}

.ResultsLists .DataRowContainer{width:100%; height:100%; position:relative; overflow:scroll;-webkit-overflow-scrolling: touch;}
.ResultsLists .DataRowHolder{width:100%; height:30px; border-bottom:1px solid #000;overflow:hidden;}
.ResultsLists .DataRowHolder div{float:left;font-size:11px; color:#666; cursor:default;}
.ResultsLists .DataRowHolder input:disabled,.ResultsLists .DataRowHolder textarea:disabled{border:none; background-color:transparent;}



#SalesList .DataRowHolderSaleTotals{ height:30px;font-weight:bold;}
#SalesList .DataRowHolderSaleTotals input{font-weight:bold;}
#SalesList .DataRowHolder{width:100%; height:30px;}

/*
.ResultsLists .DataRowHolder:nth-of-type(odd) {background-color: #fff;}
.ResultsLists .DataRowHolder:nth-of-type(odd):hover {background-color: #e9ebca;}

.ResultsLists .DataRowHolder:nth-of-type(even) {background-color: #fff;}
.ResultsLists .DataRowHolder:nth-of-type(even):hover {background-color: #e9ebca;}
*/
.ResultsLists .DataRowHolderChildren div{background-color:transparent;}
.ResultsLists .DataRowHolderChildren {background-color:#ebebeb;}


.ResultsLists .TotalsRowHolder div{font-size:12px;}
.ResultsLists .TotalsRowHolder input{background-color:transparent; border:none; font-size:12px;}

.priceHolder input,  .netHolder input, .taxHolder input, .grossHolder input, .salepriceHolder input, .discountHolder input, .totalnetHolder input, .totalgrossHolder input, .revenueHolder input, .itemvalueHolder input, .itemtotalvalueHolder input{text-align:right}
.notesHolder input, .nameHolder input, .productHolder input, .descHolder textarea, .tagHolder textarea, .codeHolder input,.categoryHolder input,.brandHolder input{text-align:left}

.IDHolder input{color:#444;}
#ProductsList .categoryHolder{width:7%;}
#ProductsList .brandHolder{width:23%;}
#ProductsList .codeHolder{width:16%;}

#ProductsList .nameHolder{width:20%;}
#ProductsList .priceHolder{width:7%;}
#ProductsList .imageHolder{width:4%;}
#ProductsList .imageGalleryHolder{width:65px;}
#ProductsList .discountHolder{width:6%;}
#ProductsList .descHolder{width:15%;}
#ProductsList .tagHolder{width:10%;}
#ProductsList .sizesHolder{width:7%;}
#ProductsList .colorsHolder{width:7%;}
#ProductsList .stockHolder{width:4%;}
#ProductsList .parentchildHolder{width:4%;}
#ProductsList .webHolder{width:5%;}
#ProductsList .dateHolder{width:10%;}
#ProductsList input,#ProductsList select{width:90%;margin-top:5px}
#ProductsList .AddnewRecordRowHolder{height: 116px}

#ProductsList .codeHolder input{width:80%}
#ProductsList .brandHolder input,#ProductsList .brandHolder select{width:95%;float:left}
#ProductsList .priceHolder input{width:70%}
#ProductsList .discountHolder input{width:60%}


#InvoicesList .numberHolder{width:10%;}
#InvoicesList .dateHolder{width:10%;}
#InvoicesList .supplierHolder{width:20%;}
#InvoicesList .totalrowsHolder{width:6%;}
#InvoicesList .itemsHolder{width:6%;}
#InvoicesList .netHolder{width:8%;}
#InvoicesList .taxHolder{width:7%;}
#InvoicesList .grossHolder{width:9%;}
#InvoicesList .notesHolder{width:8%;}
#InvoicesList .paymentHolder{width:5%;}
#InvoicesList .paymenttypeHolder{width:11%;}

#InvoicesList .numberHolder input{width:80%;}
#InvoicesList .dateHolder input{width:80%;}
#InvoicesList .supplierHolder input{width:90%;}

#InvoiceDetailsList .positionHolder{width:3%;}
#InvoiceDetailsList .supplierHolder{width:10%;}
#InvoiceDetailsList .codeHolder{width:10%;}
#InvoiceDetailsList .nameHolder{width:22%;}
#InvoiceDetailsList .itemsHolder{width:6%;}
#InvoiceDetailsList .priceHolder{width:7%;}
#InvoiceDetailsList .discountHolder{width:7%;}
#InvoiceDetailsList .taxHolder{width:7%;}
#InvoiceDetailsList .totalnetHolder{width:8%;}
#InvoiceDetailsList .totalgrossHolder{width:8%;}
#InvoiceDetailsList .salepriceHolder{width:7%;}
#InvoiceDetailsList .markupHolder{width:5%;}
#InvoiceDetailsList .quantityHolder input{width:50%;}
#InvoiceDetailsList .nameHolder input{width:90%;}

#InvoiceDetailsAllList .DataRowHolder, #InvoiceDetailsAllList .DataRowHolder input,#InvoiceDetailsAllList .DataRowHolder div{cursor:default}
#InvoiceDetailsAllList .dateHolder{width:8%;}
#InvoiceDetailsAllList .suppliernameHolder{width:7%;}
#InvoiceDetailsAllList .invoicenumberHolder{width:5%;}
#InvoiceDetailsAllList .supplierHolder{width:6%;}
#InvoiceDetailsAllList .codeHolder{width:9%;}
#InvoiceDetailsAllList .nameHolder{width:15%;}
#InvoiceDetailsAllList .itemsHolder{width:5%;}
#InvoiceDetailsAllList .priceHolder{width:6%;}
#InvoiceDetailsAllList .discountHolder{width:6%;}
#InvoiceDetailsAllList .taxHolder{width:6%;}
#InvoiceDetailsAllList .totalnetHolder{width:7%;}
#InvoiceDetailsAllList .totalgrossHolder{width:7%;}
#InvoiceDetailsAllList .salepriceHolder{width:7%;}
#InvoiceDetailsAllList .markupHolder{width:5%;}
#InvoiceDetailsAllList input{width:65%}
#InvoiceDetailsAllList .nameHolder input,#InvoiceDetailsAllList .dateHolder input,#InvoiceDetailsAllList .suppliernameHolder input{width:100%;}



#SalesList .dateHolder{width:9%}
#SalesList .shopHolder{width:10%}

#SalesList .salenoHolder{width:3%}
#SalesList .codeHolder{width:12%}
#SalesList .nameHolder{width:18%}
#SalesList .nameHolder input{width:90%}
#SalesList .itemsHolder{width:5%}
#SalesList .valueHolder{width:7%}
#SalesList .staffHolder{width:6%}
#SalesList .infoHolder{width:6%}
#SalesList .infoHolder{width:5%}
#SalesList .typeHolder{width:5%}
#SalesList .discountHolder{width:4%}
#SalesList .notesHolder{width:5%}

#SalesList input{width:80%}
#SalesList .staffHolder select{width:95%}
#SalesList .valueHolder input{width:60%}
#SalesList .ColumnTitlesRowHolder div{cursor:default}


#SalePaymentsList .dateHolder,#SalesReceiptsList .dateHolder,#InvoicePaymentsList .dateHolder{width:25%}
#SalePaymentsList .typeHolder,#SalesReceiptsList .typeHolder,#InvoicePaymentsList .typeHolder{width:30%}
#SalePaymentsList .valueHolder,#SalesReceiptsList .valueHolder,#InvoicePaymentsList .valueHolder{width:20%}
#SalePaymentsList .actionHolder,#SalesReceiptsList .actionHolder,#InvoicePaymentsList .actionHolder{width:20%}
#SalePaymentsList,#SalesReceiptsList, #InvoicePaymentsList{text-align:center}


#CashierList .dateHolder{width:10%;}
#CashierList .shopHolder{width:10%;}
#CashierList .dailytotalHolder{width:10%;}
#CashierList .valueHolder{width:7%;}



#TransactionsList .dateHolder{width:9%}
#TransactionsList .accountHolder{width:9%}
#TransactionsList .valueHolder{width:9%}
#TransactionsList .categoryHolder{width:12%}
#TransactionsList .typeHolder{width:12%}
#TransactionsList .yearHolder{width:5%}
#TransactionsList .periodHolder{width:5%}
#TransactionsList .staffHolder{width:7%}
#TransactionsList .supplierHolder{width:8%}
#TransactionsList .infoHolder{width:9%}
#TransactionsList .autoHolder{width:5%}

#TransactionsList input, #TransactionsList select {width:85%}
#TransactionsList .valueHolder input{width:70%; text-align:right;}

#BudgetList .monthHolder{width:4%}
#BudgetList .agiamarinaHolder{width:7%}
#BudgetList .chaniaHolder{width:7%}
#BudgetList .plataniasHolder{width:7%}
#BudgetList .internetHolder{width:7%}
#BudgetList .rentHolder{width:7%}
#BudgetList .staffHolder{width:8%}
#BudgetList .taxHolder{width:7%}
#BudgetList .otherHolder{width:8%}
#BudgetList .variousHolder{width:9%}
#BudgetList .productsHolder{width:7%}
#BudgetList .checksHolder{width:9%}
#BudgetList .balanceHolder{width:9%}
#BudgetList input{text-align:right; background-color:transparent; border:none}
#BudgetList input:focus{background-color:#FF9}
#BudgetList .monthHolder input{text-align:center; font-weight:bold;}

#BudgetVariousList .dateHolder{width:30%}
#BudgetVariousList .amountHolder{width:22%}
#BudgetVariousList .infoHolder{width:38%}
#BudgetVariousList .deleteHolder{width:10%}

#BudgetVariousList input:focus{background-color:#FF9}
#BudgetVariousList input{background-color:transparent; border:none}

#BalancesList .accountHolder{width:50%}
#BalancesList .amountHolder{width:30%}
#BalancesList input{background-color:transparent; border:none; text-align:right;}

#CategoryStatsList .categoryHolder{width:9%}
#CategoryStatsList .itemsHolder{width:4%}
#CategoryStatsList .valueHolder{width:8%}
#CategoryStatsList .categoryHolder input{text-align:left;}
#CategoryStatsList input{text-align:right;}

#CategoryStatsList .ShopTitleHolder{font-weight:bold; font-size:14px; background-color:#333; width:100%; height:20px; padding-top:5px; color:#fff; text-align:left; text-indent:20px;}
#CategoryStatsList .SHOPTOTALS{font-weight:bold; background-color:#888; width:100%; color:#fff;}
#CategoryStatsList .SHOPTOTALS input{font-weight:bold; color:#fff;}
#CategoryStatsList .SHOPTOTALS div{font-weight:bold; color:#fff;}

.ResultsLists .Web{width: 100%; height: 300px; display:none;}
.ResultsLists .Web table tr td{ vertical-align: top;}

#transactionsFiltersContainer{ margin-top:0px;}
#transactionsFiltersContainer .filtersFieldInput{padding-bottom:2px;}

.filtersContainer{width:160px; position:relative; padding:10px; margin-top:10px;}
.filtersTitle{ position:relative; font-size:16px; font-weight:bold; text-align:center; padding-bottom:10px;}
.filtersFieldTitle{position:relative; padding-left:5px;}
.filtersFieldInput{ position:relative; padding-bottom:5px;}
.filtersContainer input{text-align:left; padding:5px 3px;}

.filtersButtonsHolder{width:130px; margin:0 auto; color:#fff; margin-top:20px}

.confirmButton{ float:left; display:inline-block; padding:5px 10px 5px 10px; background-color:#666;cursor:pointer;
-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;
-moz-transition: background-color 300ms ease-in-out; /* FF 4 */
-webkit-transition: background-color 300ms ease-in-out; /* Safari & Chrome */
-o-transition: background-color 300ms ease-in-out; /* Opera */}
.confirmButton:hover{ background:#000;}

.cancelButton{ float:right; display:inline-block; padding:5px 10px 5px 10px; background-color:#999; cursor:pointer;
-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;
-moz-transition: background-color 300ms ease-in-out; /* FF 4 */
-webkit-transition: background-color 300ms ease-in-out; /* Safari & Chrome */
-o-transition: background-color 300ms ease-in-out; /* Opera */}
.cancelButton:hover{ background:#000;}

.closeButton{display:inline-block; padding:7px 20px 7px 20px; background-color:#999;cursor:pointer; color:#fff; font-size:14px;
-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;
-moz-transition: background-color 300ms ease-in-out; /* FF 4 */
-webkit-transition: background-color 300ms ease-in-out; /* Safari & Chrome */
-o-transition: background-color 300ms ease-in-out; /* Opera */}
.closeButton:hover{ background:#000;}

.actionButtons, .NewEditDeleteButtons{ display:inline-block; width:80px; padding:6px 0 6px 0;background-color:#666; color:#fff;cursor:pointer; margin-bottom:5px; float:left; margin-left:10px;display:none;
-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;
-moz-transition: 300ms ease-in-out; /* FF 4 */
-webkit-transition: 300ms ease-in-out; /* Safari & Chrome */
-o-transition: 300ms ease-in-out; /* Opera */
}
.NewEditDeleteButtons:hover{ background-color:#000; color:#fff;}
.productsAB:hover{ background-color:#000; color:#fff;}


.salesButtons, .CashierButtons{display:none}

/* modal */

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index:998;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

#prDialogContentHolder, #ipDialogContentHolder {width: 400px; height:400px;background: #fff;padding:10px; border:10px solid #ccc;
	margin-top:-50%; position:absolute;left:0;right:0;margin-left:auto; margin-right:auto;
	z-index:999;transition: opacity 700ms;visibility: hidden;opacity: 0;
	-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;
}





/* ======================================================================== */

<!-- this is the menu code -->
<!-- this is the menu code -->
<!-- this is the menu code -->

#TopMenuHolder {

}
#TopMenuHolder nav {
	margin-left:70px;
	width: 900px;
	height: 30px;
	float:left;
	}

#TopMenuHolder ul {
	text-align: center;
}

#TopMenuHolder ul li {
	font: 12px Arial, 'Lucida Grande';
	cursor: pointer;
	float:left;
	-webkit-transition: padding .05s linear;
	-moz-transition: padding .05s linear;
	-ms-transition: padding .05s linear;
	-o-transition: padding .05s linear;
	transition: padding .05s linear;
}
#TopMenuHolder ul li.drop {
	position: relative;
}
#TopMenuHolder ul > li {
	display: inline-block;
}
#TopMenuHolder ul li a {
	line-height: 20px;
	padding: 0 20px;
	height: 80px;
	color: #ccc;
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}
#TopMenuHolder ul li a:hover {
	color: #eee;
}

.dropOut .triangle {
	width: 0;
	height: 0;
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid white;
	top: -8px;
	left: 50%;
	margin-left: -8px;

}
.dropdownContain {
	width: 170px;
	position: absolute;
	z-index: 2;
	left: 50%;
	margin-left: -80px; /* half of width */
	top: -400px;
}
.dropOut {
	width: 170px;
	background: #fff;
	float: left;
	position: relative;
	margin-top: 0px;
	opacity: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
	-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
	box-shadow: 0 1px 6px rgba(0,0,0,.15);
	-webkit-transition: all .1s ease-out;
	-moz-transition: all .1s ease-out;
	-ms-transition: all .1s ease-out;
	-o-transition: all .1s ease-out;
	transition: all .1s ease-out;
}

.dropOut ul {
	float: left;
	padding: 10px 0;
}
.dropOut ul li {
	text-align: left;
	float: left;
	width: 140px;
	padding: 3px 3px 3px 3px;
	margin: 0px 10px;
	color: #777;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	/*
	-webkit-transition: background .1s ease-out;
	-moz-transition: background .1s ease-out;
	-ms-transition: background .1s ease-out;
	-o-transition: background .1s ease-out;
	transition: background .1s ease-out;
	*/
}

.dropOut ul li:hover {
	background: #666 url(themes/excite-bike/images/red.png);
	color:#000;
	font-weight:bold;
}

#TopMenuHolder ul li:hover a { color: white; }

#TopMenuHolder ul li .dropOut ul li a { color: #000; font-size:11px;}
#TopMenuHolder ul li .dropOut ul li:hover a { color: #fff; }

#TopMenuHolder ul li:hover .dropdownContain { top: 20px; }
#TopMenuHolder ul li:hover .underline { border-bottom-color: #777; }
#TopMenuHolder ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

<!-- this is the menu code -->
<!-- this is the menu code -->
<!-- this is the menu code -->



/* TREE Menu container */
.treemenu	{
	width:300px;
	height:175px;
	border:solid #FF9900 1px;
	padding:10px 5px 10px 5px;
	margin:12px 12px 12px 50px;
	}

/* Menu styles */
.treemenu ul
	{
	margin:0px;
	padding:0px;
	}
.treemenu li
	{
	margin:0px 0px 0px 5px;
	padding:0px;
	list-style-type:none;
	text-align:left;
	font-family:Arial,Helvetica,sans-serif;
	font-size:13px;
	font-weight:normal;
	}

/* Submenu styles */
.treemenu ul ul 
	{ background-color:none; }
.treemenu li li
	{ margin:0px 0px 0px 16px; }

/* Symbol styles */
.treemenu .symbol-item,
.treemenu .symbol-open,
.treemenu .symbol-close
	{
	float:left;
	width:16px;
	height:1em;
	background-position:left center;
	background-repeat:no-repeat;
	margin-top:5px;
	}
.treemenu .symbol-item  { background-image:url(../js/icons/page.png); }
.treemenu .symbol-open  { background-image:url(../js/icons/minus.png); }
.treemenu .symbol-close { background-image:url(../js/icons/plus.png);}

/* Menu line styles */
.treemenu li.open  { font-weight:bold; }
.treemenu li.close { font-weight:normal; }