body {
	z-index:50;
	background-color: white; 
/*	background-color: #e5e6e7;*/
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-size: 11pt;
	margin-left: 10px;
	margin: 0px;		
}


/* mobile */
*{-webkit-text-size-adjust:none;}
*{-webkit-text-size-adjust:auto;}
*{-webkit-text-size-adjust:100%;}

/* portrait */
.portraitWarring
{
	text-align: center;
	margin-top: 30%;	
}

/* basic table */
table:not(.dataTable)
{
	border-collapse: collapse;
	border-spacing: 2px;
	border-color: gray;	
	table-layout: auto;
}

tr {
	display: table-row;
	vertical-align: inherit;
	border-color: inherit;
}


td {	
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	border-color: #AAAAAA;		
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-size: 11pt;	
	word-wrap:break-word; 	
	max-width: 200px;
}

th {
	background-color: #EEEEEE;	
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	border-color: #AAAAAA;		
	font-weight: normal;
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-size: 11pt;	
	word-break:keep-all; 	
}

td input[type=text]
{
	width:90%;
	margin-left: 5%;	
}

td input[type=number]
{
	width:20%;		
}

td select
{
	width:90%;
	margin-left: 5%;	
} 


label
{
	min-width: 3%;
	display: inline-block;
}

/* body */
div#body
{
	padding-top: 130px;
	padding-bottom: 80px;
	resize:both;		
}


/* laoding */
#loading {
	width: 100%; 
	height: 200%; 
	top: 0; 
	left: 0; 
	background: rgba(0, 0, 0, 0.3); 	 
	position: fixed;
	z-index: 10000; 	
}

#loading span{
	color: red;
	font-weight: bold;
	width: 100%;
	height: 100%;
	margin-left: 50%;
	margin-top: 30%;
	font-size: larger;
	position: absolute;	
}


/* header */
#header {
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	z-index: 9999;	
	border-bottom-color: black;
	border-bottom-width: 1px;
	border-bottom-style: none;	
	box-shadow: 1px 1px 1px #888888	
}

* html #header {
   position:absolute;
}


/* footer */
#footer {
	text-align: center;
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-size: 10pt;	
	border-top-style: solid;
	border-top-color: black;
	border-top-width: 1px;
	padding: 6px;			
	background-color: #AA220F;	
	color: white;	
	position:fixed;
	left:0px;
	bottom:0px;
	width:100%;	
	z-index: 9999;	
	box-shadow: -2px -2px 1px #888888
}

* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}



/* error */
.errorblock
{
	color: red;
}

/* fieldset */
fieldset {
 border-color:rgb(137,111,43);
 border-style:solid;
 border-width:1px ;
 background-color: white;
 box-shadow: 4px 4px 4px #888888; 
}

legend {
	font-size: 1.3em; 
/* 	text-transform: uppercase;  */
	color: #000;
}

legend a, legend a:LINK 
{		
	color: blue;	
}

legend a:HOVER
{
	color: red;
}

* html fieldset {
	position: relative;
}

* html legend {
	position: absolute; 
	top: -.5em; 
	left: .5em;
}

* html fieldset {
	position: relative; 
	margin-top: 1em; 
	padding-top: .75em;
}

/* Login */
.logInStatus {
text-align: right;
color: Black;
font-size: 11pt;
}

.logInMsg {
	width: 50%; margin: auto; border: 1px solid black; padding: 10px; min-height: 200px;
}

.loginInput{
	width: 20%; 
	margin: auto; 	
	padding: 10px; 	
	color: Black;
}

.loginInput form{
	margin: 0;
}


/* Banner */
.banner {
	border-collapse: collapse;
	width: 100%;
	background-color: #AA220F;
	border-width: 0px;	
}

.banner tr td, .banner tr td a
{
	font-size: 14pt;
	padding: 10px;	
	color:white;	
	font-family: "Times New Roman";
	font-weight: bold;
	text-decoration: none;
	border-width: 0px;		
}

.banner td.bannerLog{
	width:40%;	
}

.banner td.bannerVersion{
	width:60%;
	text-align: right;
}


/* nav */
.nav, .navSub
{
	background-color: #336699;	
	padding: 4px;
	text-align: right;
	font-family: Calibri, Helvetica, Arial, sans-serif;
	font-size: 11pt;		
}

.navSub
{
	background-color: black;	
}

.navSub ul
{
	display: none;	
}

.nav ul, .navSub ul  
{
	margin: 0;	
}

.nav ul li, .navSub ul li 
{
	display: inline-block;
	*display: inline;
    zoom: 1;
    margin-right: 1%;
	font-size:	larger;    
}
.nav ul li a, .navSub ul li a
{
	color: White;	
}

.nav ul li a:HOVER, .navSub ul li a:HOVER
{
	color: gold;
}

.nav ul li[data-hasLeaf] a
{
	text-decoration: none;
}

.nav ul li.selected a, .navSub ul li.selected a
{
	color: red;
}

/* Sales */
.productPublish
{
	width : 98%;
	margin-left: 1%;		
}

.productPublish table
{
	width : 100%;	
}

.productPublish table td
{
	text-align: center;	
	border-width: 1px;			
}

.productPublish td
{
	vertical-align: top;
	border-width: 0px;	
}

.productPublish td:FIRST-CHILD fieldset
{
	margin-right: 2%
}



/* CRM */
.customerDetail, 
.contactInfo, 
.supportCreate,
.supportUpdate,
.contractMaster,
.contractCreate,
.contractDetail,
.contractService,
.contractPayment,
.customerRequest
{
	width : 98%;
	margin-left: 1%;		
}

.customerDetail table,
.contactInfo table,
.supportCreate table,
.supportUpdate table,
.contractMaster table,
.contractCreate table,
.contractDetail table,
.contractService table,
.contractPayment table,
.customerRequest table
{
	width : 99%;	
}

.customerDetail table td, 
.contactInfo table td,
.supportCreate table td,
.supportUpdate table td,
.contractMaster table td,
.contractCreate table td,
.contractDetail table td,
.contractService table td,
.contractPayment table td,
.customerRequest table td
{
	text-align: center;
	border-width: 1px;		
}

.customerDetail table tr:nth-child(odd),
.contactInfo table tr:nth-child(odd),
.supportCreate table tr:nth-child(odd),
.supportUpdate table tr:nth-child(odd),
.contractMaster table tr:nth-child(odd),
.contractCreate table tr:nth-child(odd),
.contractDetail table tr:nth-child(odd),
.contractService table tr:nth-child(odd),
.contractPayment table tr:nth-child(odd),
.customerRequest table tr:nth-child(odd)
{
	background-color: #F6F4F0;
}

.customerDetail td, 
.contactInfo td, 
.supportCreate td, 
.supportUpdate td, 
.contractMaster td,
.contractCreate td,
.contractDetail td,
.contractService td,
.contractPayment td,
.customerRequest td
{
	vertical-align: top;
	border-width: 0px;	
	max-width:10%;
}

.customerRequest td select
{
width: 99%;
margin-left: 0%
}


.customerDetail td:FIRST-CHILD fieldset, 
.contactInfo td:FIRST-CHILD fieldset, 
.supportCreate td:FIRST-CHILD fieldset, 
.supportUpdate td:FIRST-CHILD fieldset, 
.contractMaster td:FIRST-CHILD fieldset,
.contractCreate td:FIRST-CHILD fieldset,
.contractDetail td:FIRST-CHILD fieldset,
.contractService td:FIRST-CHILD fieldset,
.contractPayment td:FIRST-CHILD fieldset,
.customerRequest td:FIRST-CHILD fieldset
{
	margin-right: 2%	
}

.customerDetail table td.wider_note
{
	width: 35%;	
	min-width:350px;
}

.customerDetail tr td.description
{
	width: 20%;
}

.customerDetail table tbody tr td textarea, .contractDetail table tbody tr td textarea
{
	width:95%;	
	height: 80px;
}

.contactInfo .save
{
	text-align: center;
}

.customerUpdate, .customerCreate
{
	text-align : center;	
}

.customerUpdate table, .customerCreate table
{
	width: 100%
}

.supportUpdate textarea, 
.supportCreate textarea,
.customerRequest textarea
{
	width: 90%;
	min-height: 100px;
}

.supportUpdate input[type=number], 
.supportCreate input[type=number],
.customerRequest input[type=number]
{
	min-width: 80px;
}


form.customerUpdate fieldset, 
form.customerCreate fieldset,
form.customerRequest fieldset
{
	display:inline-block;	
	min-width: 70%;
}

form.customerUpdate fieldset legend, 
form.customerCreate fieldset legend  
{
	text-align: left;
}

.leadCustomerList, .customerList
{
	width : 96%;
	margin-left: 1%;
}

.expired, .expired a
{
	color: red !important;	
}

.quickCustomerList
{
	overflow: auto;
}

.customerDetail fieldset fieldset
{
	box-shadow: none;		
	border-color: black;
} 

/* account */

.updatedContract
{
	width : 96%;
	margin-left: 1%;
}

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

.billingList .appliedDay
{
	max-width: 60px;
}

.billingList .payment, .billingList .appliedPayment
{
	max-width: 100px;
}

.billingList, .prepayment
{
	width : 96%;
	margin-left: 1%;
}

.prepayment table tr:nth-child(odd)
{
	background-color: #F6F4F0;
}

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

.prepayment input[name=prepAmount]
{
	width : 40%;	
	margin-left: 2%;
	text-align: right;	
}

.billingCommandGroup
{
	width: 96%;
	margin-left: 1%;
	margin-bottom: 1%;
}

.billingCommandGroup div
{
	display: inline-block;
}

.billingCommandGroup div label
{
	min-width : 150px;	
}

.billingCommandGroup div input
{
	margin-right: 20px;
}

.billingCommandGroup div.input
{
	text-align: right;
	width: 95%;
}



.today
{
	
	color: blue !important;
	font-weight: bold;
}

.invoiceRequest .note
{	
	max-width: 500px;
		
}

/* SCM */
.productDetail,
.productManager, 
.supplierDetail, 
.contactEdit, 
.whStockInText, 
.whStockOutBarcode,
.whStockInBarCode,
.whStockOutText,
.dispatchDetail,
.purchase
{
	width : 98%;
	margin-left: 1%;
}

.remain
{
	color: red;	
}

.inventoryDispatchList, .statInventoryList, .purchaseList
{
	width : 96%;
	margin-left: 1%;
	margin-right: 1%;
}

.inventoryDispatchList table .note, .purchaseList table .note
{
	width: 30%;
}

.inventoryStockIn, .productList, .product_search
{
	width : 94%;
	margin-left: 2%;	
}

.productList table,  .product_search table
{
	width : 100%;
	text-align: center;	
}


.product_search form
{
	text-align: right;
}

.product_search table td input[type=number]
{
	width:80%;		
}


.productDetail td,
.productManager td,
.supplierDetail td, 
.contactEdit td,
.whStockInText td,
.whStockOutBarcode td,
.whStockInBarCode td,
.whStockOutText td,
.inventoryStockIn td,
.dispatchDetail td
{
	vertical-align: top;
	border-width: 0px;	
	max-width: 10%;	
}


.productDetail table,
.productManager table, 
.supplierDetail table, 
.contactEdit table, 
.whStockInText table,
.whStockOutBarcode table,
.whStockInBarCode table,
.whStockOutText table,
.inventoryStockIn table,
.dispatchDetail table
{
	width : 100%;	
}

.productManager table tr:nth-child(odd), 
.whStockInText table tr:nth-child(odd),
.whStockOutBarcode table tr:nth-child(odd),
.whStockInBarCode table tr:nth-child(odd),
.whStockOutText table tr:nth-child(odd),
.dispatchDetail table tr:nth-child(odd)
{
	background-color: #F6F4F0;
}

.productDetail table td,
.supplierDetail table td, 
.contactEdit table td, 
.whStockInText table td,
.whStockOutBarcode table td,
.whStockInBarCode table td,
.whStockOutText table td,
.dispatchDetail table td
{
	text-align: center;
	border-width: 1px;
}

.productDetail table td textarea
.dispatchDetail table td textarea
{	
	width: 96%;
	height: 100px;
}

.dispatchDetail .expiredDay
{
	width : 2%;
}

.dispatchDetail fieldset
{
	margin-bottom: 2%;
}


.inventoryStockIn table td
{
	border-width: 1px;
}

.inventoryStockIn .dbProcessingResult
{
	padding-top: 5%;
}

.productManager table td
{
	padding-left: 1%;
	border-width: 1px;
}

.productDetail .Warrantydate
{
	width: 35%;
}

.productDetail td select
{
	width: initial;
}

.note
{
	margin-bottom: 1%;
	margin-left: 5%;
}

#txtPrex, #txtQty
{
	width : 10%;
}

#taBarCodes
{
	width : 80%;
	height: 600px;
}


.dispatchDetail table
{
	width : 98%;	
	border-width: 0px;	
}

.purchase fieldset.itemList
{
	width: 40%;
	display: inline-block; 
	vertical-align: top;
	min-height: 300px; 		
}

.purchase fieldset.orderList
{
	width: 24%;	
	display: inline-block; 
	vertical-align: top;
	min-height: 300px; 	
}

.purchase fieldset.supplierList
{
	width: 30%;	
	display: inline-block; 
	vertical-align: top;
	min-height: 300px;		
}


.purchase fieldset.orderList table
{
	width: 100%;
	text-align: center;
}

.purchase fieldset.orderList table input
{
	width: 90%;
	margin-left: 5%;
}

.purchase fieldset.itemList table tbody td a
{
	color: red;
}


/* hr */
.userList
{
	width : 96%;	
	margin: 0px auto;
}

.userList table
{
	width : 98%;	
	border-width: 0px;	
}

.userEdit
{
	text-align : center;		
}

.userEdit table
{
	width: 100%
}

.userEdit td input[type=password] {
width: 90%;
margin-left: 5%;
}

form.userEdit fieldset
{
	display:inline-block;	
	min-width: 70%;
}

form.userEdit fieldset legend
{
	text-align: left;
}

/* report */
.select_report table th
{
	white-space: nowrap;
}

.select_report table td
{	
	white-space: nowrap;
}

.select_report form
{
	text-align: right;
	display: block;	
}

/* home */
.userInfo, .sectionGroup, .stockInOut
{
	width : 80%;	
	margin: 0 auto;
	margin-bottom: 1%;		
}

.stockInOut table
{
	width : 99%;
	text-align: center;		
}

.sectionGroup
{
	min-height: 420px;
}

.newContract
{
	width : 49%;		
	float: left;
}

.payment
{
	width : 49%;		
	float: right;
}

.userInfo ul {
	list-style: none outside none;
	display: block;
	margin: 0;
	padding-bottom: 1.5em;
	border-bottom: 1px dotted black;
}
 
 .sectionGroup ul,  .stockInOut ul {
	list-style: none outside none;
	display: block;
	margin: 1% 0 0 0;
	padding-bottom: 1.5em;
	border-bottom: 1px dotted black;
}
 
 
 
.userInfo li,  .sectionGroup li,  .stockInOut li {
    float: left;
    display: block;    
}

.sectionGroup li{
    margin-left: -20px;
}


.sectionGroup ul.link, .stockInOut ul.link{
    border-bottom: none;
}

.sectionGroup ul.link li, .stockInOut ul.link li{
    text-align: right;
    width: 100%;
}

.userInfo li.itemName {
	min-width: 120px;	
	font-weight: bolder;
}

.userInfo li.item {
	min-width: 200px;	
}


/* object */
.command
{
	display: inline;
}

/* object */
#objectListTable
{
	width: 100%;
}

/* objectItem */
.goBack
{
	text-align: left;
	margin-left: 2%;
	display: block;
}

.goBack a:HOVER
{
	width: auto;
	color: red;
	font-weight: bold;	
}

.goBack a, .goBack a:ACTIVE
{
	width: auto;
	color: blue;
	font-weight: normal;		
}

div#oiObject
{
	width :25%;
	display: inline-block;
    *zoom: 1;
    *display: inline;	
	vertical-align: top;
	margin-right: 5px;
	text-align: center;
}

div#oiObjectItem
{	
	width : 73%;
	display: inline-block;
	vertical-align: top;	
    *zoom: 1;
    *display: inline;
}

div#oiObjectItem .oiObjectItemAddition
{
	width : 100%;
	overflow-x: auto;
}

div#oiObjectItem .oiObjectItemList
{	
	width : 100%;
	overflow-x: auto;
	padding-bottom: 3%;
}

div.pdFilter
{
	text-align: right;
}


/* dataTable Filter */
tr th input.search_init
{
	width: 90%;
	margin: auto;
}

tr th.search_th
{
	background: none;
}

/* history */
.historyList
{
	width : 96%;
	margin: auto;	
}

.historyDetail
{
	width : 96%;
	margin: auto;		
}

.historyDetail table
{
	width : 100%;
	margin: auto;		
}

.historyDetail .difference
{
	color: red !important;	
}


/* commonFieldset*/
.commonFieldset {	
	border: 0.1em solid black;		
	overflow: hidden;
	position: relative;
}

.commonFieldset fieldset,.commonFieldset legend {	
	background: #5c9ccc;
	border: none;
	margin: 0;
	padding: 0;
}

.commonFieldset legend {	
	display: block;
	padding: 0.5em 0 0.3em;
	width: 100%; /* For IE8 */
}

.commonFieldset legend .title {		
	font-size: 1.3em;
	font-weight: normal;
	margin: 0 0.5em;
	white-space: normal;
	display: block;
}

.commonFieldset .type2 {	
	background: #855F85 !important;	
}


.commonFieldset .contents {
	background: white;
	padding: 1em 0.5em;
}

.strong
{
	color: red;	
	font-weight: bold;
}

.money
{
	text-align: right !important;	
}

.hidden
{
	display: none;
}

/* commonReport*/
.commonReport
{
	margin : auto;
	width: 98%;	
}

.commonReport table
{
	margin : auto;
	width: 98%;		
}

 .commonReport table th
 {
 	text-align: center !important;	
 }

.commonReport table td
{	
	text-align: center;		
}

.commonReportTitle
{
	text-align: center;	
}


.commonReport .weeklyReport table th, .commonReport .weeklyReport table td
{
	border-style: solid !important;
	border-width: 1px !important;;
	border-color: black !important;
}

.commonReport .weeklyReport table thead th
{
	border-bottom-style: double !important;
	border-bottom-width: initial !important;	
}

.commonReport .weeklyReport table tfoot th
{
	color: red !important;
	font-weight: bold !important;	
	font-size: large;
}

.commonReport .weeklyReport .footTotalMoney, .commonReport .weeklyReport .footTotalPoints 
{
	background: orange !important;
}

.commonReport .weeklyReport .salesContracts, .commonReport .weeklyReport .support  
{
	background: yellow;
}

.commonReport .weeklyReport .salesMoney ,  .commonReport .weeklyReport .install  
{
	background: RGB(146,208,80);
}

.commonReport .weeklyReport .totalMoney 
{
	font-weight: bold;
}

.commonReport .weeklyReport .salesTotal , .commonReport .weeklyReport .pointsTotal
{
	background: orange;
}

.commonReport .weeklyReport .moneyExist
{
	background: RGB(197,217,241);
}

.commonReport .weeklyReport .remoteSupport
{
	background: cornflowerblue;
}


/* signature */
.signature
{
		width: 90%;	
		margin: 0 auto;
}

.signature fieldset
{
	 background-color: antiquewhite;
}

.signature label
{
	min-width: 150px;
	display: inline-block;
}

.signature input[type=text]
{
	min-width: 200px;	
}

.signatureImg
{
	text-align: center;	
}

.signatureImg canvas
{	
	background: white;
} 

.dataForSignature 
{
	margin: 0 auto;
	width: 90%;		
}

.dataForSignature .terms
{
	margin: 0 auto;
	width: 100%;
	height: 300px;	
}

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

#signatureImg
{
	text-align: center;	
}

#signatureImg canvas
{	

	background: white;
} 


/* ADDED BY SUNNY 2013-03-03 */
/* //////////////////////////////////////////////////////////////////////////////////// */

.aSimple {	
  	font-weight: normal;
  	text-decoration:underline;
  	color: white;
}

.aSimple:link{	
  	font-weight: normal;
  	text-decoration:none;
  	color: white;
}

.aSimple:visited {
  /* Applies to all visited links */
  text-decoration:  none;
  font-weight:      normal;
  color: white;
  } 

.aSimple:hover{	
  text-decoration:  none;
  font-weight:      normal;
  color:            gold;
}