#ui-datepicker-div{
  z-index:10;
}

img{
  border:none;
}

.grey{
  color:#aaa;
}
.orange{
  color:orange;
}

.purple{
  color:purple;
}

.green{
  color:green;
}

#wrapper{
	width:100%;
	/*border:1px solid yellow;*/
}

a.button{
  background:#ddd;
  border:1px solid #aaa;
  color:black;
  padding:5px;
  margin-right:10px;
}

table{
 	font-family:Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size:12px;
}
table th,table th label, table td{
  vertical-align:top;
  padding:5px;
  padding-right:10px;  
  text-align:left;   
}
table th{
}

.space{
  height:10px;
}

.td_space{
  width:20px;
}

.center {   
    text-align: center;
}

.right{
  float:right;
}


.done{
  background: url('../imgs/checkbox_checked.gif') right no-repeat;
  padding-right:20px !important;
  /*width: 20px;
  height: 20px;*/
}

.company_title{
  font-weight: bold;
	font-size: 20px;
	font-family: Arial;
	color: black;
  padding:10px;
  float:left;
}

.box_title{	
	font-weight: bold;
	font-size: 14px;
	color: black;
	background:#ffcc66;
}


.title{	
	font-weight: bold;
	font-size: 17px;
	font-family: Arial;	
	color: orange;
}
.subtitle{	
	font-weight: bold;
	font-size: 14px;
	font-family: Arial;	
	color: brown;
}

.gray {
	color:#999999;
	font-weight:normal;
}
.internal{
  color:red;
}
	
.underline {
	text-decoration:underline;
}


a {
	color:#0134C5;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
table {
  border-collapse: collapse;
} 
td.important{
	color:#6688ff;
	font-weight:bold;
}
td.veryimportant{
	color:red;
}
td.note{
	color:#777;
	font-style:italic;
}

#footer {
	margin:0 auto;
  margin-top: 100px;
	Xwidth:900px;
  text-align:left;  
}
#footer div{
  padding-left:10px;
}
	
.staff_note{
	width: 25px;
}

.bold{
	font-weight: bold;	
}
.error{
	color: red;
}
.note{
	clear:both;
	color: white;
	background:blue;
	border-bottom:10px solid white;
	margin-top:10px;
	padding:5px;
	line-height:35px;
}
.fieldnote{
  color:green;
}
.wrap{
  white-space:normal !important;
}
.hidden{
  display:none;
}
.totalSum{
  text-decoration:underline;
  font-weight:bold;
}


/************ suggestion list **************/

.input_suggestion_list{
  display:none;
  position: absolute;
  z-index:2;
  background: beige;
  padding: 10px;
  width: auto;
  border:2px solid darkgoldenrod;
}                        
.input_suggestion_list ul{
  list-style: none;
  width: auto;
  display:inline-block;
  padding-left: 0px;
  margin: 0;
}
.input_suggestion_list li{
  list-style: none;
  list-type: none;
  display:block;
  border-bottom:1px solid darkgoldenrod;
}
.input_suggestion_list li:last-of-type{
  border-bottom:none;
}



/******* header ********/
#header {
	clear:both;
	margin:0 auto;
	border:0;
	padding:0 0 0 0;
	Xwidth:880px;
}
#header H1{
	margin:0 auto;
	border:0;
	padding:0;
}
#tabs .tab ,
#tabs .tab_work_app,
#tabs .tab_template{  
    margin: 4 2 0 0;
    width: 90px;
    height:30;
    float:left; 
    background-color:#f8ecb9;
    font-size:13px;
    padding:0;
}
#tabs .tab a,
#tabs .tab_work_app a,
#tabs .tab_template a{  
    font-weight:normal;    
    color: #ff9900
}
#tabs .tab_work_app,
#tabs .tab_template {
	width:145px;
}

#tabs .tab.over,
#tabs .tab_work_app.over,
#tabs .tab_template.over  {   
    background-color:#ffcc66;   
}
#tabs .tab.over a,
#tabs .tab_work_app.over a,
#tabs .tab_template.over a {   
    color: #ff6600   
}
#tabs .tab.current,
#tabs .tab_work_app.current,
#tabs .tab_template.current {	 
    background-color:orange;
}
#tabs .tab.current a,
#tabs .tab_work_app.current a,
#tabs .tab_template.current a{ 
    color: white;
    font-size:15px;
    font-weight:bold;
}
#tabs .tab .tab_text,
#tabs .tab_work_app .tab_text,
#tabs .tab_template .tab_text {	
	font-weight:bold;
	font-size: 12px;	
	padding: 8 0 0 0;
	margin:0;
	width: 100%;
	height:100%;		
	left:0; top:0;
	text-align: center;
}



/***** TITLE *****/
span.h3_title{
	float:left;
	padding:0 5 0 0;
	margin:0;	
}

h3.admin{
	background-color: #DDEEDD;
}
h4 {
	font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size: 13px;
	font-weight: bold;
	color:black;
	text-align:center;
	/*width:200;*/
	/*padding:5 5 5 10;*/
	/*background-color:#eeeebb;*/
	/*margin:0 0 10 0;*/
	padding:0 0 0 10;
	margin:0 0 0 0;		
}
h5 {
	font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding:0 0 0 10;
	text-align:center;
	margin:0 0 10 0;	
	color: #888855;
	white-space:nowrap;
}
h5 a{
	color: #888855;
	text-decoration: underline;
}
h5 a:hover{
	color: #555533;
}
h5.over{
	color: orange;
	font-size: 13px;
	font-weight: bold;	
	white-space:nowrap;
	padding-bottom:10px;	
}
h5.over a{
  text-decoration:none;
  color: orange;
}

/***** CONTENT *****/

.box_orange th,  .box_orange td{
  text-align:left;
  padding:0px;
  padding-left:5px;
}
.box_orange th label{
  text-align:left;
  padding:0px;
}
.box_orange th{
  background:darkorange;
  color:white;
}
.box_orange td{
  Xborder-bottom:1px solid orange;
  Xcolor:darkorange;
}
.box_orange td input, .box_orange td textarea{
  border:1px solid orange;
  padding:2px;
  text-align:left;
}
.box_orange td textarea{
  width:80px !important;
  height:60px !important;
}
.box_orange .gray th, .box_orange .gray th label,  .box_orange .gray td{
  background:#dedede;
  color:black;
  text-align:left;
  padding:5px;
  padding-left:8px;
}
.box_orange tr.summary td{
  background:#FFCC66 !important;
  color:black;
}

tr.summary.red > td{
  color:red;
}
tr.summary.blue > td{
  color:blue;
}


#content .box{
  /*width:100%;*/  
}
#content .box td, #content .box_no_border td {
	border-bottom:1px solid #ccc;
	padding:5px; 
	padding-right:10px; 
	text-align: left;
	white-space:nowrap;
}
#content .box td.title, #content .box_no_border td.title {
  font-weight:bold;
  color:#ff6633;
  font-size:inherit;
}
.box .new_section{
  border-top:gray;
  background:gray;
  color:white;
  font-size:13px;
  border-top:20px solid #F9F9F9;
  padding:5px;
}
.box .border-top{
  border-top:1px solid gray;
}
#content .box_common td {
	padding:5px; 
	text-align: left;
	white-space:nowrap;
}

#content .box_create{
  width:99%;
  box-sizing:border-box;
}
#content .box td.right, #content .box_no_border td.right, #content .box_create td.right,
#content .box th.right, #content .box_no_border th.right, #content .box_create th.right,
.box_common th {   
    text-align: right;
}
#content .box td.center, #content .box_no_border td.center, #content .box_create td.center,
#content .box th.center, #content .box_no_border th.center, #content .box_create th.center {   
    text-align: center;
}

#content .box_create td {
	text-align: left;
	border-bottom:1px solid #d0d0d0;
	padding:5px; 
	white-space:nowrap;
	vertical-align:top;
}
#content .box th label, #content .box_create th label, #content .box_workshop_app th label, #content .box_no_border th label{
	float:right;
	text-align: left;
	white-space:nowrap;
}
.box th, #content .box_workshop_app th, #content .box_no_border th{
	background: #ddd;
	text-align:left;
	padding:5px;
	white-space:nowrap;
}
#content .box_create th{
	/*font-weight:normal;*/
	border-bottom:1px solid #d0d0d0;
	vertical-align: top;
	padding-top: 5px;
	padding-left: 5px;
	width: 60px;
	/*color: #aaa;*/
}
#content .box_create .colored_area{
	background-color:#eee;
}
#content .box_create .box_header{	
	padding: 7px;
	background-color: #ccc;
	width:auto;
}
#content .box_create .sign{	
	color: blue;
	font-weight:bold;
	font-size:20px;
}

.box, .box_workshop_app, .box_create {
  margin-left:10px;
	background-color:#F9F9F9;
	border:1px solid #D0D0D0;
	font-size:12px;
	clear:both;
}
.box_no_border{
	background-color:#F9F9F9;
	font-size:12px;
	clear:both;
}
.box_text_gray{
	font-size: 10px;
	color: gray;
}
.box_right{
	background-color:#F9F9F9;
	border:1px solid #D0D0D0;
	font-size:12px;
	float:right;
}
#content .box .td_linebreak{
	white-space: normal;
}

#content .box_create .td_linebreak{
	white-space: normal;
}

#box_info{
	padding-top:30px;
	font-weight:bold;
	color:#7777dd; 
	width:800px;
	margin-top:30px;
}
#box_wide{
	width:800px;	
}

#csv{
	float:right;	
	margin-bottom: 5px;
}
.staff_name{
	color:#0000aa
}
#show_public{
	font-size:16px;
}
.show_public_3b{
	font:italic 12px gray;
	padding-top:20px;
}	
.show_app_no{
	color:blue;
	font-weight:bold;	
}
/***** PROGRESSBAR *****/
#progressbar{
	width:400px; 
	height:20px;	
}
.progressbar_text{
	font-size:12px;	
}

/***** FILTERS *****/
.filter_drop_label{
	padding-top:3px; 
	width:100%;
}
.filter_fields{
	padding-top:3px;	
}

#filter_form{
  background:#eee;
  padding:10px;
  Xborder-top:1px solid orange;
  border-bottom:2px solid orange;
}
#filter_form table th, #filter_form table th label{
  text-align:left !important;
  font-weight:normal;
}
#filter_form table th label{
  padding:0px;               
}
#filter_form table th, #filter_form table th label{
  color:black;
  font-weight:bold;
}
#filter_form table td{
  color:grey;
}

/***** ICONS *****/
.list{
	background: url('../../imgs/list.jpg') no-repeat;
	padding: 4px 10px 4px 25px;;
	text-decoration: none;
	margin-right: 5px;
}
*html .list{ 
  	background: url('../../imgs/list.jpg');
	padding: 3px 7px;
	text-decoration: none;
	margin-right: 5px;
}

.create{
	background: url('../../imgs/create.jpg') no-repeat;
	padding: 4px 10px 4px 25px;
	text-decoration: none;
	margin-right: 5px;
}
*html .create{
	background: url('../../imgs/create.jpg')  no-repeat;
	padding: 4px 10px 4px 25px;
	text-decoration: none;
	margin-right: 5px;
}
.export{
	background: url('../../imgs/export.jpg') no-repeat;
	padding: 1px 6px;
	text-decoration: none;
	margin-right: 5px;
}
*html .export{
	background: url('../../imgs/export.jpg');
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
}
.view{
	background: url('../../imgs/view.gif') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html .view{
	background: url('../../imgs/view.gif') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
.update, .edit_link{
	background: url('/imgs/edit.png') no-repeat;
	padding-left: 17px ;
	padding-bottom:2px;
	text-decoration: none;
	margin-right: 0px;
	color: blue;    
  font-size:12px;  
}
*html .update{
	background: url('../../imgs/edit.png') no-repeat;
	padding-bottom: 2px;
	padding-left: 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
.pdf_link{
	background: url('/imgs/pdf.jpg') no-repeat;
	padding-left: 17px ;
	padding-bottom:2px;
	text-decoration: none;
	margin-right: 0px;
	color: blue;    
  font-size:12px;
}
.upload_link{
	background: url('/imgs/up_16.png') no-repeat;
	padding-left: 17px ;
	padding-bottom:2px;
	text-decoration: none;
	margin-right: 0px;
	color: blue;    
  font-size:12px;
}
.delete{
	background: url('../../imgs/delete.png') no-repeat;
	padding: 1px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html .delete{
	background: url('../../imgs/delete.png') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
a.report{
	background: url('../imgs/report.png') no-repeat;
	padding: 1px 6px;
	height: 16px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html a.report{
	background: url('../imgs/report.png') no-repeat;
	padding: 0px 6px;
	height: 16px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
a.fansclub{
	background: url('../imgs/fansclub.jpg') no-repeat;
	padding: 1px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 0px;
	color: red;
}
*html a.fansclub{
	background: url('../imgs/fansclub.jpg') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 0px;
	color: red;
}
#content .box_workshop_app .icons{
padding: 2px;
}

/***** FILTER *****/
#filter, #filter_class{	
	width: 500px !important;
	padding: 10px;
	margin-top: 0px;
	/*border:1px solid black;*/
}
*html #filter_class{
	width: 330px;
}
*html #filter{
	margin: -6px 0px;
	width: 310px;
}
#filter_work_app{
	width: 370px;
	padding: 10px;
	margin-bottom: 15px;
}
*html #filter_work_app{
	width: 400px;
}
.filter_text{
	font-weight: bold;
	color: #223b6a;
}
.filter_label{
	font-weight: bold;
	float: left;
	color: #223b6a;
	margin-right: 3px;
	text-align:right;
}
#filter_class_row1{
	margin-bottom: 3px;
	margin-left: 54px;
}

*html #filter_class_row1{
	margin-left: 50px;
	margin-bottom: 3px;
}
#filter_class_row2{
	margin-right: 12px;
	float:left;

}
.filter_label_ws_app_row1{
	font-weight: bold;
	color: #223b6a;
	margin-left: 85px;
}
.filter_label_ws_app_row2{
	font-weight: bold;
	color: #223b6a;
	margin-left: 98px;
}
.filter_label_ws_app_row3{
	font-weight: bold;
	color: #223b6a;
	margin-left: 0px;
}
.filter_label_ws_app_row4{
	font-weight: bold;
	color: #223b6a;
	margin-left: 28px;
}

*html .filter_label_ws_app_row1{
	margin-left: 85px;
}
*html .filter_label_ws_app_row2{
	margin-left: 97px;
}
*html .filter_label_ws_app_row3{
	margin-left: 0px;
}
*html .filter_label_ws_app_row4{
	margin-left: 35px;
}

.submit_ws_app{
	margin-left: 28px;
}
*html .submit_ws_app{
	margin-left: 8px;
}
.filter_field{
	margin-bottom: 3px;
}

.filter_submit{
	float: right;
	width:80;
	margin-top:-25px;
}
.workshop_filt_row2{
	margin-left: 15px;
}
*html .workshop_filt_row2{
	margin-left: 22px;
}

/***** sorting & pager *****/
#sorting_pager{
	clear:both;
}
#sorting{
	float:right;
}
div.apagination{
	width:400px;
}

/***** general *****/

.clear{ clear: both; }
.red, tr.red > td { color: red; }
.blue, tr.blue > td{ color: blue; }
.darkblue{ color: #0000c6; }
.big{ font-size: 20px; }
.medium{ font-size: 15px; }
.alignright{ float:right; }
.redNote{ background: red; color: white; padding:3px; margin-bottom:10px; line-height:19px; }
.blueNote{ background: blue; color: white; padding:3px; margin-bottom:10px; line-height:19px; }

tr.summary td{
	/*border-top: 2px solid #BBBBFF;
	border-bottom: 2px solid #BBBBFF;*/
	color: #333;
	font-weight: bold;
	background: #ddd !important;
  text-align:right !important;
}
tr.summary2 td{
	/*border-top: 2px solid #BBBBFF;
	border-bottom: 2px solid #BBBBFF;*/
	color: #333;
	font-weight: bold;
	background:beige !important;
  text-align:right !important;
}
tr.summary3 td{
	/*border-top: 2px solid #BBBBFF;
	border-bottom: 2px solid #BBBBFF;*/
	color: #333;
	font-weight: bold;
	background:#fafafa !important;
  text-align:right !important;
}
tr.summary.red td, tr.summary2.red td, tr.summary3.red td{
  color:red;
}
tr.summary.blue td, tr.summary2.blue td, tr.summary3.blue td{
  color:blue;
}

div.controls{
	padding-bottom: 10px;
	height: 30xp;
	float: right;
}

div.controls a{
	font-weight: bold;
}


/******** for background and pop up *********/

#background{
  background-color: black;
  opacity:0.6;
  filter:alpha(opacity=60);
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index: 9;
  display:none;
}

#scroll_popup{
  z-index: 10;
  display:none;
  position:absolute;
  background: white;
  border:1px solid gray;  
  top:50px;
  left:50px;
  width:900px !important;
  height:500px !important;
  overflow:scroll !important; 
}

#detail_700_popup, #emailForm, #addPhotoForm, #loading, #iframe_popup{
  z-index: 10;
  display:none;
  position:absolute;
  width:700px;
  height:auto !important;
  background: white;
  border:1px solid gray;  
  top:50px;
  left:50px;
}
#detail_700_popup #wrap, #emailForm #wrap, #addPhotoForm #wrap, #loading #wrap, #iframe_popup #wrap, #scroll_popup #wrap{
  width:670px !important; /* overwrite */
}
#detail_700_popup #content, #emailForm #content, #addPhotoForm #content, #loading #content, #iframe_popup #content, #scroll_popup #content{
  width:600px !important; /* overwrite */
}
#detail_700_popup .content, #emailForm .content, #addPhotoForm .content, #loading .content, #iframe_popup .content, #scroll_popup .content{
  /*margin-top:20px;*/
  background: white;  
  /*width: 595px;
  */
  width: auto;
  height:500px;  
  /*
  padding:8px;  
  padding-top:15px;*/
  overflow: scroll;
  /*border: 1px solid gray;*/
  margin:0px;
  padding:10px;
}                     
#detail_700_popup .content img , #emailForm .content img, #addPhotoForm .content img, #scroll_popup img{
  width:auto;
  height:auto;
}                                                           
.close_popup_button, #detail_700_popup .close, div.popup .close, #emailForm .close, #addPhotoForm .close, #iframe_popup .close, #scroll_popup .close{
  margin:0px;
  padding:0px;
  background: url('../imgs/popup_close.jpg') no-repeat;
  width: auto;/*595px;*/
  height: 25px;
  width: 25px;
  /*background-position:right top;*/
  float:right;
}

#loading{
  Xwidth:400px !important;
  Xheight:300px !important;
  background:#eee !important;
  color:black !important;
  font-weight:bold !important;
  overflow:hidden !important;
  padding:20px !important;
}
#loading .content{
  background:#eee !important;
  width:auto !important;
  height:auto !important;
  overflow:hidden !important;
  font-size:20px;
}






/**************** MAIN CONTAINER & common ********************/

body {
	color:#333333;
	font-family:Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size:12px;
	margin-top:0px;
	margin: 0;
  text-align: center;
  width: 100%;
}

#main{
    border: 2px solid #C0C0C0;
    margin: 10px auto;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    Xpadding-top: 20px;
    text-align: left;
    width: 900px;
}

#content_main {
	margin:0 auto;
	width:100%;         
}
#content{
  clear:both;
  padding-top:0px;  
  Xwidth:880px;
  margin: 0 auto;
  margin-top: -10px ;
  text-align:left;
}
#content h1 {
	color: white;
	font-weight: bold;
	font-size: 16px !important;
  Xline-height:16px;
	padding: 0px;
	margin-bottom: 0px;
	Xwidth:880px;
	X_width:100%;
	background:#ff6633;
  padding: 3 0 3 10px;
  text-align:left;	
}

#wrap{
  clear:both;
  margin:0px;
  Xwidth:100%;
  padding:0px; 
  
}

#dynamic_content{
  clear:both;
  padding:10px;
  position: relative;
}

h3 {
	font-size: 15px;
	font-weight: bold;
	color:gray;	
	margin:0 0 10 0;
	padding-top:10px;
}

.links_with_underline{
  margin-bottom:10px;
  margin-top:10px;  
}
.links_with_underline a{
  text-decoration:underline;
  padding-left:10px;
  padding-right:10px;  
}

.bottom_links{
  clear:both;
  padding-top:20px;
}
.bottom_links a{
  padding-left:30px;
  padding-right:30px;
  Xborder-left:1px solid gray;
  border-right:1px solid gray;
}
.bottom_links a:last-of-type{
  border-right:1px solid white;
}





/**************** TOP BAR ********************/

#top_line {
    border-top: 3px solid #8FBBB3;    
    clear: both;
    height: 3px;
    margin-top:0px;    
}

#topBar img.logo{
  float:left;
}

#admin_bar {  
    float:left;
    margin:0px;        
    Xmargin-top:20px;
    X_margin-top:70px;
    padding:0px;
    padding-left:10px;
    clear:left;    
}
#admin_bar a{    
    color: grey;
    font-size:11px;
    font-weight:bold;
    padding:0px;
    padding-left:5px;
	   padding-right:5px;
}
#admin_bar a:hover{
    color: orange;
    text-decoration:none;
}
#admin_bar .admin {
	float:left;	
	color:#ff6633;
  padding-left:0px;
}
#admin_bar .admin.current {    
}
#admin_bar .admin.current a{
    color: #ff3300;
    font-weight:bold;
}
#admin_bar .admin.accounting{
  Xbackground:#eee;
}

#wellcome_msg {
    float:right;
    margin-top:2px;    
}
#wellcome_msg span{
    font-style:italic;
    font-weight:bold;
    margin-right:5px;
}

/***** LOGIN *****/
#login_form{	
	padding: 5px;
}
#username{
	float: left;
	color: #223b6a;
	font-weight: bold;

}
#username_input{
	float: left;
}
.block{
	display: block;
}
#password{
	display: block;
	float: left;
	color: #223b6a;
	font-weight: bold;
}
#pwd_input{
	
}
.login_box{
	width: 500px;
}
.login_box img{
  padding-bottom:3px; 
}
#login_form .login_box td{
	height: 30px;
	padding: 5px;
}

/******** table common **********/

tr.record.over{
  background:#eeeeee;
}

.report_table{
  margin-top:20px;
}
.report_table tr:hover td{
  background:#eee;
}
.report_table th, .report_table td{
  padding:4px;
  border-bottom:1px solid #888;
  text-align:left;
}
.report_table th{
  background:#bbb;
}
.report_table td{
}

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

.report_table.yearly .money{
  color:blue;
}
.report_table.yearly .money:nth-child(2n){
  color:green;
}
.report_table.yearly tr .money:last-of-type{
  color:grey;
  font-weight:bold;
}

.report_table .salary{
  color:blue;
}
.report_table .addition{
  color:#04B4AE;
}
.report_table .bonus{
  color:green;
}
.report_table .deduction{
  color:orange;
}
.report_table .mpf{
  color:brown;
}

/******** iframe common setting *********/

iframe{
  border:0px;
  padding:0px;
}

/********** listing page in box form *************/

.list_box{
  background:#eee;
  padding:10px;
  clear:both;
  margin-top:15px;  
}
.list_box .manageDiv{
  float:right;
}
.list_box .manageDiv a{  
}
.list_box .pic{
  float:left;
  padding-right:15px;
  padding-bottom:15px;
}
.list_box .date{
  color:gray;
  padding-bottom:5px;
}
.list_box .title{
  color:#2C557F;
  font-weight:bold;
  padding-bottom:5px;
}
.list_box .langDiv{
  border-bottom:1px solid #ccc;
  padding-bottom:10px;
}
.list_box .showHideLangDiv{
  padding-top:10px;
  padding-bottom:10px;  
}
.list_box .noPhotoDiv{
  width:100px;
  height:100px;
  border:1px solid gray;
  text-align:center;
  padding-top:40px;
}

/***** sub menu *****/

.sub_menu{
  background:#ffcc99;
	padding:10px;
}
.sub_menu a{
	color:brown;    	
  margin-right:0px;
  margin-top:10px;
  padding-right:5px;
  Xborder-right:1px solid orange;
  Xtext-decoration:underline;
}
X.sub_menu{
	float: left;
	padding:5px;
  padding-top:15px;
	text-align:right;
}
X.sub_menu a{
	color:brown;
	background:#ffcc99;
  margin-left:10px;
  margin-top:0px;
  padding:5 8 7 8px;
  border:1px solid brown;
  line-height:22px;
}


/**** form ***/

form{
  text-align:left;
}

#create_form textarea, #update_form textarea, #html___Frame{
  width:500px;
  height:110px;
}

textarea, input, select{
  font-size:12px;
}

/**** offer_options ***/
.offer_option, .old_offer_option{
  margin-bottom:3px;
  padding-top:3px;
  clear:both;
}
.offer_option input{
  margin-bottom:3px;
  margin-left:3px;
  margin-right:3px;
}
.offer_option .option_no, .old_offer_option .option_no{
  float:left;
  height:40px;
  width:10px;
  color:white;
  background:darkorchid;
  padding:2px;
  margin-right:5px;  
}
.offer_option_display .option_no{
  height:30px !important;
}

.offer_del_link{
  background: url('../../../imgs/delete_16.png') no-repeat 10px 0px;
  padding-left:26px; 
  padding-bottom:3px;
}

/********* orders to be confirmed **********/

.order_to_be_confirmed{
  border-top:1px solid gray;
  padding-bottom:10px;
  padding-top:10px;
  clear:both;
}
.order_to_be_confirmed .pay_info{
  float:right;
  width:400px;
  border-left:1px dashed gray;
  margin-left:30px;
  padding-left:30px;
}

/*********** po / inv *************/

#po_items_div{
  /*border:2px dashed orange;*/
  padding:10px;
}

.td_field_title{
  background:orange;
  color:white;
  white-space:normal;
  height:35px;
  padding:3px;
  margin-top:5px;
}

.duplicateItemLink, .deleteItemLink{
  font-size:11px;
  font-weight:normal;
  text-decoration:underline;
}

#bulk_edit_form{
  padding:10px;
  margin:10px;
  background:#fff2cc;
  margin-bottom:20px;  
}
#bulk_edit_form h2{
  font-size:16px;
  margin:0px;
  margin-bottom:10px;
  border-bottom:1px solid #c79b6b;   
  color: #cc6900; 
}

/********** salary **************/

.salary_list_item{
  overflow: hidden;
  font-size:11px !important;
  z-index:8;
  clear: left;
}

.salary_list_item textarea{
  width:100px;
  height:40px;
} 
.salary_list_item.fieldname{
  position:relative;
  font-size:12px;
  background:beige;
  overflow:hidden;
  border-top:20px solid white;
  border-bottom:5px solid white;          
  padding-bottom:0px !important;  
  padding-top:0px !important;
  Xwidth:1330px;
  z-index:9 !important;
}

.salary_list_item div{  
  width:75px;
  float:left;
  clear:none;
  border-top:1px solid #ccc;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:7px;
  box-sizing:content-box;
}
.salary_list_item div div{
  border-top:none !important;
  padding:0 !important;
  float:normal !important;
  width:auto;
}
.salary_list_item.fieldname div{
  Xpadding-right:20px;
  Xwidth:55px;
  Xborder-right:1px solid #ccc;
  Xheight:inherit;
}

.salary_list_item input{
  width:50px;
}

.salary_list_item div.staff_name{
  background:beige;
  overflow:hidden;
  color:black;
}
.salary_list_item div.staff_name.selected{
  background:orange;
}
.salary_list_item div.staff_name.inactive{
  text-decoration:line-through;
}

.salary_list_item .allowance,
.salary_allowance_desc_1_block .show_block span,
.salary_allowance_desc_2_block .show_block span{
  Xcolor:brown;                   
}

.salary_list_item.fieldname div:nth-of-type(3),
.salary_list_item.fieldname div:nth-of-type(4),
.salary_list_item.fieldname div:nth-of-type(6),
.salary_list_item.fieldname div:nth-of-type(8),
.salary_list_item.fieldname div:nth-of-type(10),
.salary_list_item.fieldname div:nth-of-type(12),
.salary_list_item.fieldname div:nth-of-type(13),
.salary_list_item.fieldname div:nth-of-type(14){
  border-left: 1px solid #ccc;
}

.salary_list_item div:nth-of-type(4),
.salary_list_item div:nth-of-type(5){
  color:green;
}

.salary_list_item div:nth-of-type(6),
.salary_list_item div:nth-of-type(7),
.salary_list_item div:nth-of-type(7) span{
  color:red;
}
.salary_list_item div:nth-of-type(8),
.salary_list_item div:nth-of-type(8) span,
.salary_list_item div:nth-of-type(10),
.salary_list_item div:nth-of-type(10) span,
.salary_list_item div:nth-of-type(9),
.salary_list_item div:nth-of-type(9) span,
.salary_list_item div:nth-of-type(11),
.salary_list_item div:nth-of-type(11) span{
  color:#aa55aa;
}
.salary_list_item div:nth-of-type(12),
.salary_list_item div:nth-of-type(12) span{
  color:blue;
}

.salary_list_item div:nth-of-type(1){
  width:20px !important;
}
.salary_list_item div:nth-of-type(3){
  width:30px !important;
  color:grey;
}
X.salary_list_item div:nth-of-type(5){
  width:40px !important;
}
.salary_list_item div:nth-of-type(2),
.salary_list_item div:nth-of-type(5){
  width:60px !important;
}
.salary_list_item div:nth-of-type(4){
  width:70px !important;
}
.salary_list_item div:nth-of-type(12) input,
.salary_list_item div:nth-of-type(14) input{
  width:80px !important;
}
.salary_list_item div:nth-of-type(5),
.salary_list_item div:nth-of-type(7),
.salary_list_item div:nth-of-type(9),
.salary_list_item div:nth-of-type(15){
  width:90px !important;
}
.salary_list_item div:nth-of-type(6),
.salary_list_item div:nth-of-type(8),
.salary_list_item div:nth-of-type(10),
.salary_list_item div:nth-of-type(13){
  width:100px !important;
}
.salary_list_item div:nth-of-type(14) textarea{
  width:160px !important;
}

.allowance_merged_header{
  Xfont-weight:bold;
  text-decoration:underline;
}


/**** accounting ******/

.accounting_listing_table{
  margin-left:0;
}

.accounting_listing_table tr th{
  background:#ccc;
}
.accounting_listing_table tr.header{
  Xborder-top: 1px solid black;
  border-bottom: 1px solid black;
}                                  
.accounting_listing_table.with_date tr.header th{
  line-height:200%;
  border-top:30px solid white;
}
.accounting_listing_table tr.header.dummy th{  
}                                  

.accounting_listing_table tr.in > td{
  background:#e7f6fd;
}
.accounting_listing_table tr.out > td{
  background:#fbeaea;
}
.accounting_listing_table tr.txn_group_hidden.in td{
  Xbackground:none !important;
  Xbackground:#acc1d2 !important;
  background-image: url('../../../imgs/slash_dashed_blk.png');
  Xbackground-image: url('../../../imgs/bg_slash_line_blue.jpg');  
  background-size:14px auto;
}
.accounting_listing_table tr.txn_group_hidden.out td{
  Xbackground:none !important;
  Xbackground:#e6cbcb !important;
  background-image: url('../../../imgs/slash_dashed_blk.png');
  background-size:14px auto;
}
.accounting_listing_table tr > td{
  color:#999;
  Xbackground:#fde7e7;
}
.accounting_listing_table tr > td:nth-child(4){
  Xcolor:#555;
}
.accounting_listing_table .txn_type, .accounting_listing_table .vehicle_plate_no{
  font-weight:bold;
}
.accounting_listing_table .vehicle_plate_no{
  color:#9900ff;
}
.accounting_listing_table .staff{
  color:#9900cc;
  min-width:80px;
  font-style: italic;
}

.accounting_listing_table .summary.txn_group_hidden td{
  background:#eee url('../../../imgs/slash_dashed_blk.png') !important;
  background-size:14px auto !important;
}

.accounting_listing_table.tbc td{
  background:white !important;
}

.txn_group{
  color:#9900cc;
}
.ticket_desc{
  color:#e6005c;
  min-width:150px;
}

.accounting_create_edit_table tr.ticket th{
  color:red;
}    

.expenses_color, .income_color{
  color:black !important;
  font-weight:bold;
}                
.expenses_color{
  Xcolor:orange;
}
.income_color{
  Xcolor:blue;
}

tr.monthly_report_title th:nth-child(2),tr.monthly_report_title th:nth-child(3),tr.monthly_report_title th:nth-child(4){
 text-align:right !important; 
}

h3 .openCloseBtn{ 
  padding:0; margin-right:10px; cursor: pointer; display:inline-block; overflow: visible;  
  background:#555; color:white; 
  width: 20px; height: 20px; line-height: 20px; 
  text-align: center; 
}

tr.io_row > td{ background:#ededf8; }
tr.io_row .delete{ display:block; cursor: pointer; }
tr.io_row .deleteCfm{ cursor: pointer; }
tr.io_summary > td{ background:#d8d8ea !important; }

tr.monthly_report_net_summary > td{ background:#fae4c9 !important; }

.monthly_io_block > td{ background:#fef9e7; padding:20px !important; }
.monthly_io_block #create_form th{ background:none !important; }
.monthly_io_block #create_form td{ border-bottom:none !important;}
.monthly_io_block > td > div{ width:50%; display:inline-block; vertical-align: top; }
.monthly_io_block > td > div * { max-width:300px !important; }
.monthly_io_block .io_show_table{ width:46%; }

.create_io_form th{ background:none ; }
.create_io_form th, .create_io_form td{ border-bottom:none !important; }
.create_io_form textarea, .create_io_form [type=text]{ width:250px; }
.create_io_form textarea{ height:80px; }

.io_show_table th.note{ color:blue; text-align:center; }

.update_io_block{ 
  position:fixed; width:600px; left:100px; top:200px; display:none; 
  background: #d8d8ea; padding: 30px; border: 3px solid black;
}
.update_io_block *{ }
.update_io_block h3{ color: black; text-align:left; }
.update_io_block textarea, .update_io_block [type=text]{ width:300px;  }
.update_io_block textarea{ height:80px; }