/*================================================================================
	Item Name:CPP - Custom Web Portal Stylesheet
	Description:HTML Based CSS Design
	Author:Jeff Tsang
================================================================================*/

body{
	margin:0 auto;
	background:#FFFFFF;
	font-family:·L³n¥¿¶ÂÅé, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;}

a{
	text-decoration:underline;
	color:#000000;}
	
a:hover{
	color:#FF6666;}	
	
a i{
	padding:0 3px 0 0;}

td{
	vertical-align:"top";
	text-align:"left";}

li{
    text-align:center;}

li a{
    display:block;
    text-decoration:none;
	color:#596677;
	font-size:16px;}

li a:hover{
	background:#E3E3E3;
	color:#000000;}    

li a:active{
	background:#E3E3E3;
	color:#000000;}	

/* ================= Label ================= */
.label-pwd{
	font-size:12px;
	border-radius:3px;}

/* ================= Button ================= */
.button {
	border:none;
	cursor:pointer;
  	font-size:12px;
  	text-align:center;
  	text-decoration:none;
  	width:60px;
  	height:24px;
  	color:#FFFFFF;
  	background:#f07373;
	border-radius:6px;
  	box-shadow:0 2px #999999;}

.button:hover {background-color: #ffa1a1}

.button:active {
  background-color: #ffa1a1;
  box-shadow: 0 2px #666666;
  transform: translateY(3px);}
  
.button:disabled, button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;}

/* ================= Select ================= */
.select-style{
	font-size:14px;
	color:#000000;
	border-radius:3px;
	height:30px;
   	overflow:hidden;
	border:1px solid #CED3D8;}

.select-custUnit{
	width:600px;}

.semi-square{
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;}

/* ================= SimpleBox ================= */
.simpleBox{
	position:relative;
	margin:0 auto;}

.simpleBox-title{
	position:relative;
	background:#E9E9E9;
	border-radius:3px 3px 0 0;
    color:#646464;
    font-size:16px;
    padding:8px 0px 8px 12px;}
    
.simpleBox-title i{
	padding:0 5px 0 0px;}    	
	
.simpleBox-content{
	position:relative;
	background:#ffbfc5;}	

/* ================= Table ================= */
table{
	position:relative;
	margin:0 auto;
	width:100%;
	border-collapse: collapse;}

table tr{
	text-align:left;}

table td{
	padding:8px 0 8px 12px;}

table.tableBox{
	position:relative;}
  
table.tableBox thead tr th{
	position:relative;
	padding:0 0 0 10px;
	font-size:14px;
	color:#646464;
	text-align:left;
	height:28px;}

table.tableBox tbody{
	position:absolute;}
    
table.tableBox tbody tr td{
	position:relative;
	padding:4px 0 4px 10px;
	font-size:14px;
	color:#646464;
	text-align:left;
	height:22px;}

table.tableBox tr.odd.gradeA{
	background-color:#EAF0F6;}

table.tableBox tr.even.gradeA{
	background-color:#FFFFFF;}

.custAddr{
	float:right;
	margin:5px 20px 5px 0;
	height:0px;}  

.custConf{
	float:left;
	margin:5px 0 5px 20px;
	height:124px;}	

.custUnit{
	clear:left;
	width:auto;
	margin:10px 20px 0px 20px;}

.custUnit tbody{
	background:#F9F9F9;
	height:187px;
	max-height:187px;
	overflow:auto;}	

.custUnitSelect{
	/*float:left;*/
	width:auto;
	margin:10px 20px 0px 20px;
	/*margin:5px 0 10px 20px;*/
	height:65px;}

.custBill{
	/*clear:left;*/
	width:auto;
	margin:10px 20px 0px 20px;}

.custBill tbody{
	background:#F9F9F9;
	height:242px;
	max-height:242px;
	overflow:auto;}
	
.custBill{
	clear:left;}		

.custBillService{
	/*float:left*/
	width:auto;
	margin:10px 20px 15px 20px;}

.custOwnerAuth{
	/*float:left*/
	width:auto;
	margin:10px 20px 15px 20px;}	

.resetPwd{
	/*float:left*/
	width:auto;
	margin:10px 20px 0px 20px;}
	
.custPromotion{
	/*float:left*/
	width:auto;
	margin:10px 20px 0px 20px;}		  	  
	
table.dataTable tbody tr.oddStripe1 {
		background-color: #ffffff;
		height:20px;
}

table.dataTable tbody tr.evenStripe1 {
		background-color: #EAF0F6;
		border-bottom: solid #c0c0c0;
		height:20px;
}		
/* ================= Wrapper ================= */	
.wrapper{
	position:relative;
	margin:0 auto;
	width:1010px;}	

/* ================= Header ================= */	
.header{
	position:relative;
	background:url(../../../img/header-bg_0510.png) x-repeat;
	padding:0 0 0 20px;
	height:70px;}	

.header .logo{
	position:relative;
	padding:15px 0 0 0;}

#header-inner {
	margin: 0 auto;
}

#header {
	width:100%;
	height:60px;
	display:block;
	background-image:url(../../../img/header-bg_0510.png) ;
	background-repeat-x:repeat;
	background-size:contain;
	/*background-color:#ffB9B9;*/
}
	
#logo {
	display:block;
	position:relative;
	z-index:9999;
	background-color:#fff;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.3);
	margin-left:15px;
	margin-right:15px;
	display:inline-block;
	height:70px;
	text-align:center;
	padding-top:10px;
	padding-left:20px;
	padding-right:20px;
	border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
}		

#logo img {
	max-height:60px;
	vertical-align:middle;
}

#changelanguage {
	float:right;
	height:100%;
	min-width:80px;
	display:block;
}

#changelanguage div#lang-text {
	position:relative;
	display:inline-block;
	margin-right:10px;
	margin-top:35px;
	font-size:12px;
	font-weight:bold;
	color:#596677;}
	
#changelanguage div#lang-text a {
	font-size:12px;
	color:#596677;}


/* ================= Linebreak ================= */
.linebreak{
	position:relative;
	background:#5780b3;
	height:8px;}

/* ================= Logout ================= */	
.logout{
	display:block;
	position:relative;
	left:850px;
	z-index:9999;
	background:#E3E3E3;
	width:70px;
	height:30px;
	border-radius:0 0 3px 3px;
	font-size:12px;
	color:#000000;
	text-align:center;
	padding:8px 0 0 0;}

.logout a{
	text-decoration:none;
	color:#596677;}	

.logout-button{
	display:block;
	width:40px;
	border: none;
}
	
/* ================= Menu ================= */
.menu{
	position:relative;
	float:left;
	width:200px;
	height:600px;
	line-height:50px;
	padding-top:10px;
	overflow:auto;}
	
.menu ul{
    list-style-type:none;
    margin:0;
    padding:0;
    width:100%;}

.menu .mainMenu .mainTitle{
    border-bottom:1px solid #E3E3E3;
	text-align:left;}    
    
.menu .mainMenu .mainTitle .mainAction{
    font-size:16px;}    

.menu i{
	font-size:18px;
	padding:0 6px 0 6px;}
    
.menu .subMenu li a{
	font-size:14px;
	text-align:left;
	line-height:40px;
	padding:0 0 0 40px;}
	
.menu-toggle-down{
	position:relative;
	float:right;
	top:15px;
	right:4px;}			
	
/* ================= Page ================= */
.page{
	position:relative;
	float:right;
	background:#7d7d7d;
	width:810px;
	height:600px;
	overflow-y: scroll;}
	
.page-title{
	margin:20px 20px 10px 20px;
	font-size:22px;
	color:#FFFFFF;}
	
.page-content{
	margin:20px 20px 10px 20px;
	font-size:18px;
	color:#000000;}	

/* ================= Footer ================= */
.footer{
	clear:left;	
	position:relative;
	background:#c2c2c2;
	height:30px;
	text-align:center;
	padding-top:5px;}		

/* ================= Error ================= */
.page-error{
	position:relative;
	background:#C0C0C0;
	width:100%;
	height:400px;
	padding:50px;}

/* ================= Customer Info ================= */
.custInfo{
	position:relative;
	margin:10px 20px 5px 20px;
	background:#e3494b;
	height:72px;
	opacity:0.8;
	border-radius:3px;}

.custInfo-left{
	position:absolute;
	padding:12px;}
		
.custInfo-right{
	position:absolute;
	left:200px;
	padding:12px;}

.custInfo-title{
	font-size:12px;
	color:#FFFFFF;}

.custInfo-content{
	font-size:20px;
	color:#FFFFFF;}
	
/* ================= message ================= */
.success-message{
	positive:relative;
	font-size:12px;
	color:blue;
}	
	
.error-message{
	positive:relative;
	font-size:12px;
	color:red;
}

/* ================= Grid ================= */
.gridSimpleBox{width:753px;}
.gridSimpleBox1{width:310px;}
.gridSimpleBox2{width:438px;}
.gridValueAddr{width:438px;}
.gridLabelEmail{width:100px;}
.gridValueEmail{width:220px;}
.gridErrorEmail{width:400px;}
.gridLabelPwd{width:140px;}
.gridValuePwd{width:150px;}
.gridErrorPwd{width:483px;}
.gridLabelUnit{width:120px;}
.gridSelectUnit{width:653px;}
.gridUnitId{width:100px;}
.gridUnitName{width:553px;}
.gridLastBill{width:120px;}
.gridBillDate{width:100px;}
.gridBillType{width:120px;}
.gridBillDesc{width:423px;}
.gridBillAmt{width:120px;}
.gridPaymentInstructionsNumber{width:30px; vertical-align: text-top;}
.gridPaymentInstructionsContent{width:723px; vertical-align: text-top;}
.gridPaymentInstructionsSubNumber{width:30px; vertical-align: text-top;}
.gridPaymentInstructionsSubContent{width:693px; vertical-align: text-top;}

.ps{font-size:11px;
	color:blue;}
	
.tdHeight16{
	height:10px;}	
	

.menu_promotion_area {
	margin:10px 20px 10px 30px;
	width:140px;
	height:140px;
	
}	

.img_promotion {
	width:100%;
	height:100%;	
	border: 1px solid #999999;	
}

.msg_promotion {
	position:relative;
	text-align:left;
	line-height: 16px;
    font-size:10px;
    color:#596677;	
}