html, body {
  height: 100%;  
}

body {
  font-size: 12px;
  font-family:arial;
  background-color:#FFFFFF;
}
/*this is for view towage order dialog.*/
.ui-widget {
font-family: Arial,sans-serif;
font-size: 12px;
}

.ui-widget-header{
	background: #ABBDD3;
}

a {
  color: #3366cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: Georgia, serif;
  font-weight: normal;
  padding-top: 20px;
  text-align: center;
}

h2 {
  padding-top: 20px;
  text-align: center;
}

select {
  font-family:arial;
  margin-left: 0px;
}

input.middle, select.middle { min-width:150px; }

#wrap {min-height: 100%;margin: 0 auto;width:100%;overflow-y:visible;overflow-x:visible;}

#main {overflow-y:auto;overflow-x:auto; padding-bottom: 80px;}

#header { width:100%;}

#header .header_banner_logo {
  background-image: url(../images/PSA_Marine_Black.png);
  background-repeat: no-repeat;
  height:70px;
  width:auto;
  background-size: contain;
}

#header .header_banner_bottom {
  background-image: url(../images/Bottom_bkgrd_black.jpg);
  background-repeat: repeat-x;
  height:10px;
  width:100%;
}

#footer {
  text-align : center;
  position: relative;
  margin-top: -80px;
  height: 75px;
  clear:both;
}
#simplemodal-overlay {background-color:#000;}

#simplemodal-container {
width:500px; 
height:261px;
background-color:white;
}
#tree-menu-control {
  height:20px;
  text-align:left;
  cursor: pointer;
  width:20px;
  color:black;
}
#tree-table-control {
  width:20px;
  height:100%;
  float:left;
  cursor: pointer;
  color:black;
  margin-top:-25px;
}
#error_msg_panel{
 height:60px;
 border: 1px solid #FF0000;
 background-color:#f9fdff;
 margin-top:10px;
}
.footer{
  height: 30px;
  border: 1px solid #A6BBD0;
  border-left:0px;
  border-right:0px;
  border-bottom:0px;
}
.header_link {
  background-image: url(../images/current.gif);
  background-repeat:repeat-x;
  height:25px;
  border: 1px solid #fff;
  line-height:25px;
  color:#326ca6;
}
.header_link_menu {
  margin-left:25px;
  margin-top:-20px;
}
.user_info{
  line-height:25px;
  border-bottom: 1px solid #A6BBD0;
  height:55px;
  color:#326ca6;
}
.user_info_main{
  line-height:25px;
  height:55px;
  color:#326ca6;
}
.user_info span{
  font-size: 14px;
  font-weight:bold;
  color:#D96200;
}
.user_info_main span{
  font-size: 14px;
  font-weight:bold;
  color:#D96200;
}
.header_title {
  background-image: url(../images/title.gif);
  background-repeat:repeat-x;
  height:30px;
  line-height:30px;
  font-weight:bold;
  font-size:16px;
}
.header_title span{
  height:30px;
  line-height:30px;
  font-size:12px;
}
.header_title span .info{
  height:30px;
  line-height:30px;
  margin-left:200px;
  font-size:12px;
}
.header_dot{
  background-image: url(../images/current.gif);
  background-repeat:repeat-x;
  height:5px;
  border: 1px solid #fff;
}

.panel_title {
  background-image: url(../images/taT1Bg2.jpg);
  background-repeat:repeat-x;
  height:24px;
  line-height:24px;
  font-size: 14px;
  font-weight: bold;
}
.panel_title_no_background {
  height:24px;
  line-height:24px;
  font-size: 16px;
  font-weight: bold;
}

.download_xls {
  border: 1px solid #ccc;
  background-color:#f9fdff;
  height:34px;
  margin-top:55px;
  padding-top:10px;
  width:100%;
  display:none;
}
.download_xls_div {
  margin-left:140px;
  display:none;

}
.download_xls_div_pilot {
  margin-left:110px;
  display:none;

}
.msg_panel{
    height:60px;
    border: 1px solid #ccc;
    background-color:#f9fdff;
    margin-top:10px;

  }
.msg_header{
     text-align:left;
     background-color:#abbdd3;
     font-weight: bold;
     color:red;

  }
.msg_reason{
  font-weight: bold;
  text-align:left;
  }
.order_type_chkbox{
  margin:30px;
  }
.order_type_chkbox input{
  margin:5px;
  }
.search_panel {
  padding:3px;
}
.result_panel {
  width:100%;
  border-left:0px;
  border-right:0px;
}

.result_panel_datatable {
  width:100%;
  border: 1px solid #ccc;
  margin-bottom:10px;
  border-left:0px;
  border-right:0px;
}
.datatable  {
  width:100%;

}
.datatable_info {
  width:100%;
  margin-bottom:10px;
  padding:3px 5px;
}
.datatable td, .datatable th {
  border:1px solid #ccc;
  padding-right:2px;
}

.datatable td {
  background-color: #F5F5F5;
  padding:3px 3px;
}

.datatable td.header {
  text-align:left;
  background-color:#E2E2E2;
  font-weight:bold;
  

}
.datatable td.header_sort {
  text-align:left;
  background-color:#E2E2E2;
  font-weight:bold;
  padding-right:20px;
  

}
.header {
  text-align:left;
  background-color:#E2E2E2;
  font-weight:bold;
  

}
 .header_sort {
  text-align:left;
  background-color:#E2E2E2;
  font-weight:bold;
  padding-right:20px;
  

}


table.datatable input {
max-width:58px;

}
.blank_panel{
  height:40px;
  width:5%;
}


.tree-menu-control {
  width:100%;
  height:20px;
  background-color:#abbdd3;
  text-align:right;
  cursor: pointer;
}


select.error, textarea.error, input.error, label.error {
  color:#FF0000;
}


/*For table*/
.colLabel1{
	float:left;
	width: 24%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:22px;
	border-left:0px;
	border-top:0px;
}
.colData1{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 24%;
	height:22px;
	border-left:0px;
	border-top:0px;
}
.colLabel2{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 24%;
	font-weight:bold;
	text-align:right;
	height:22px;
	border-left:0px;
	border-top:0px;
}
.colData2{
	float:left;
	border: 1px solid #ccc;
	padding:5px 4px 3px;
	width:24.2%;
	height:22px;
	border-left:0px;
	border-top:0px;
	border-right:0px;
}
/*the width is three columns width*/
.colData3_bottom{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 74.1%;
	height:22px;
	border-left:0px;
	border-right:0px;
	border-top:0px;
}

.colLabel5{
	float:left;
	width: 30.8%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:22px;
	border-left:0px;
	border-top:0px;	
}
.colData5{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 67.4%;
	height:22px;
	border-left:0px;
	border-top:0px;
	border-right:0px;
}
.colData5_portal_no_bottom{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
    border-bottom:0px;
    border-left:0px;
	width: 77.5%;
	height:22px;

}
.colData5_logout_no_bottom{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
    border-bottom:0px;
    border-left:0px;
	width: 57.5%;
	height:22px;

}
.colData5_portal{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	border-left:0px;
	width: 77.5%;
	height:22px;

}

.colData5_logout{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	border-left:0px;
	width: 57.5%;
	height:22px;
}
.colLabel5_heighter{
	float:left;
	width: 30.8%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:50px;
	border-left:0px;
	border-top:0px;
	
}
.colData5_heighter{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 67.4%;
	height:50px;
	border-left:0px;
	border-top:0px;
	border-right:0px;
}
.colLabel6{
	float:left;
	width: 30%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:22px;
}
.colData6{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 64%;
	height:22px;

}
.colLabel6_heighter{
	float:left;
	width: 30%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:80px;
	
}
.colData6_heighter{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 64%;
	height:80px;

}

.colLabel6_heighter_rich{
	float:left;
	width: 30%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:280px;
	
}
.colData6_heighter_rich{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 64%;
	height:280px;

}

.colLabel1_heighter{
	float:left;
	width: 24%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:53px;
	border-left:0px;
	border-top:0px;
}
/*label for textarea*/
.colLabel1_textarea{
	float:left;
	width: 24%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	height:55px;
	border-left:0px;
	border-top:0px;	
}

.colData1_heighter{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 24%;
	height:53px;
	border-left:0px;
	border-top:0px;
}
.colLabel2_heighter{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 24%;
	font-weight:bold;
	text-align:right;
	height:53px;
	border-left:0px;
	border-top:0px;
}
.colData2_heighter{
	float:left;
	border: 1px solid #ccc;
	padding:5px 4px 3px;
	width:24.2%;
	height:53px;
	border-left:0px;
	border-top:0px;
	border-right:0px;
}
/* data for textarea*/
.colData3_textarea{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 74%;
	height:200px;
	border-left:0px;
	border-top:0px;
}
.colLabel1_textarea_rich{
	float:left;
	width: 21.5%;
	border: 1px solid #ccc;
	text-align:right;
	padding: 5px 4px 3px;
	font-weight:bold;
	border-left:0px;
	border-bottom:0px;	
}
.colData3_textarea_rich{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 78%;
	height:330px;
	border-left:0px;
	border-right:0px;
}
.col_half_cell_textarea_rich{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	text-align:right;
	width: 20%;
	height:330px;
}
.col_full{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 99%;
	height:22px;
	border-left:0px;
	border-top:0px;
	border-right:0px;
}

.col_half_cell_widther{
	float:left;
	border: 1px solid #ccc;
	padding: 1px 1px 1px;
	width: 60%;
	height:18px;
}
.col_half_cell{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 20%;
	height:22px;
}
.col_half_cell_no_bottom{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	border-bottom:0px;
	width: 20%;
	height:22px;
}
.col_half_cell_no_bottom_label{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	text-align:right;
	border-bottom:0px;
	width: 20%;
	height:22px;
}

.col_half_no_bottom_logout{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	border-bottom:0px;
	width: 40.48%;
	height:22px;
}

.col_half_logout{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	width: 40.48%;
	height:22px;
}
.col_half_cell_popup{
	float:left;
	text-align:right;
	border: 1px solid #ccc;
	border-bottom:0px;
	padding: 5px 2px 3px;
	width: 47%;
	height:22px;
}

.col_half_cell_popup_right{
	float:left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 50%;
	border-bottom:0px;
	margin-left:48%;
	margin-top:-31px;
	height:22px;
}
/*For Button*/
input[type="button"][disabled="disabled"]{
	background : grey;
}
.button_panel {
  height:50px;
  margin-top:20px;
  margin-bottom:10px;
  width:100%;
  text-align: center;
}
.button_panel_create_announcement {
  height:50px;
  margin-top:360px;
  margin-bottom:10px;
  width:100%;
  text-align: center;
}

.button_panel_right {
  height:50px;
  margin-top:20px;
  margin-bottom:10px;
  margin-left:120px;
}

.button_panel_pop {
  height:30px;
  width:100%;
  padding-top:10px;
  padding-bottom: 11px;
  float:left;
  text-align:center;
}

.button_panel_pop_right{
 height:30px;
 width:100%;
 padding-top:10px;
 margin-left:40px;
}

.button_panel_pop_special{
 background-color:#abbdd3;
}

.button_panel_left{
  height:50px;
  margin-top:15px;
  margin-left:40%;
  margin-bottom:10px;
}
.button_panel_left_menu_show{
  height:50px;
  margin-top:5px;
  margin-left:40%;
}
.button_input {
 margin-left: 25%;
}
.button_input_after_extend  {
 margin-left: 30%;
}
.button_on_popup{
 margin-bottom:15px;
 margin-top:10px;
 margin-left:200px;
}
.button_on_popup_ie8{
 margin-bottom:15px;
 margin-top:10px;
 text-align:center;
}
.button_on_popup_left{
 margin-bottom:15px;
 margin-top:10px;
 margin-left:20px;
}
.button_input_less {
 margin-top: 30px;
 margin-left: 35%;
}
.button_input_less_after_extend {
 margin-top: 40px;
 margin-left: 33%;
}
.button_right{

 margin-left: 20%;
}


input[type="button"][disabled="disabled"]{
	background : grey;
}
input[type="submit"][disabled="disabled"]{
	background : grey;
}

button[type="submit"][disabled="disabled"]{
	background : grey;
}

.button_blue {
   cursor: pointer;
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: arial, serif;
   text-decoration: none;
   vertical-align: middle;
   margin-top:15px;
   margin-bottom:10px;
   behavior: url(PIE.htc);
   }
.button_blue:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button_blue:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
   
 .button {
   cursor: pointer;
   border-top: 1px solid #f7d797;
   background: #D96200;
   background: -webkit-gradient(linear, left top, left bottom, from(#D96200), to(#d6a765));
   background: -webkit-linear-gradient(top, #D96200, #d6a765);
   background: -moz-linear-gradient(top, #D96200, #d6a765);
   background: -ms-linear-gradient(top, #D96200, #d6a765);
   background: -o-linear-gradient(top, #D96200, #d6a765);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: arial, serif;
   text-decoration: none;
   vertical-align: middle;
   margin-top:15px;
   margin-bottom:10px;
   }
.button:hover {
   border-top-color: #3d2878;
   background: #3d2878;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
   
.button_small {
   border-top: 1px solid #f7d797;
   background: #D96200;
   background: -webkit-gradient(linear, left top, left bottom, from(#D96200), to(#d6a765));
   background: -webkit-linear-gradient(top, #D96200, #d6a765);
   background: -moz-linear-gradient(top, #D96200, #d6a765);
   background: -ms-linear-gradient(top, #D96200, #d6a765);
   background: -o-linear-gradient(top, #D96200, #d6a765);
   padding: 4px 8px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 12px;
   font-family: arial, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button_small:hover {
   border-top-color: #3d2878;
   background: #3d2878;
   color: #ccc;
   }
.button_small:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
.button_blue_small {
   cursor: pointer;
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 4px 8px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 12px;
   font-family: arial, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button_blue_small:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button_blue_small:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }
 .button_login {
   cursor: pointer;
   border-top: 1px solid #f7d797;
   background: #D96200;
   background: -webkit-gradient(linear, left top, left bottom, from(#D96200), to(#d6a765));
   background: -webkit-linear-gradient(top, #D96200, #d6a765);
   background: -moz-linear-gradient(top, #D96200, #d6a765);
   background: -ms-linear-gradient(top, #D96200, #d6a765);
   background: -o-linear-gradient(top, #D96200, #d6a765);
   padding: 3px 6px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 16px;
   font-family: arial, serif;
   text-decoration: none;
   vertical-align: middle;
   margin-top:15px;
   margin-bottom:10px;
   }
.button_login:hover {
   border-top-color: #3d2878;
   background: #3d2878;
   color: #ccc;
   }
.button_login:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.btn-inverse{
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  margin-left: 10px;
  background-color: #111111;
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

.btn-inverse[name=Login] {
  width: 70px;
}

.btn-inverse[name=Logout] {
  width: 60px;
}

.btn-inverse:hover,
.btn-inverse:focus {
  background-color: #444444;
}

.btn-inverse:active {
  background-color: #666666;
}

.btn-inverse.disabled,
.btn-inverse[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
}

.announcement-header {
	text-align:left;
	background-color:#222222;
	color:white;
	padding:5px 5px;
	font-weight:bold;
	border: 1px solid #ABBDD3;
	border-top:0px;border-left:0px;
	border-right:0px;
	height:20px;
	font-size:14px;
}

.pure-button-warning {
            color: white;
            border-radius: 6px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 2);
            font-size:14px;
            font-weight:bold;
            background-image: url(../images/bg.png);
            background-repeat: repeat-x;
        }        
/*add by dongju for red *, declare that the field is mandatory*/
.mark{font-family:Arial,Helvetica,Helv; font-size:12px; font-weight:bold; color:#E00C0C; padding-left:5px;}

textarea{resize:none;}

/*for search form data width on 2013-05-24*/
.formData{
	float:left;
	padding: 5px 4px 3px;
	border: 1px solid #ccc;
	border-left:0px;
	width: 73.9%;
	height:22px;
}
/*for special tug field width on 2013-05-24*/
.colLabelForSpeTug{
	background-color: #E2E2E2;
	font-weight: bold;
	float: left;
	border: 1px solid #ccc;
	padding: 5px 4px 3px;
	width: 49.2%;
	height: 22px;
	text-align:left;
	border-left: 0px;
	border-top: 0px;
	border-right: 0px;
}
/*for location field image on 2013-06-27*/
.colData1 a img {padding-bottom:3px;}

.errorMsg{
	color: red;
	border: 2px solid red;
	min-height: 50px;
	padding: 5px;
	background-color:#FDE9D9;
}
.errorMsg hr{
	display:none;
}
.upper{
	text-transform : uppercase;
}
input[type="text"]{
	height:20px;
}
select{
	height:24px;
}

.lable_header {
  height:30px;
  line-height:30px;
  font-size:13px;
  font-weight: bold;
}

.lable2_header {
  height:30px;
  line-height:30px;
  font-size:12px;
  
}
/* panel_title {
  background-image: url(../images/taT1Bg2.jpg);
  background-repeat:repeat-x;
  height:24px;
  line-height:24px;
  font-size: 14px;
  font-weight: bold;
} */

.full-site
{
	display:block!important;
}