/* Main Site Blocks */
#header { text-align: left;padding:0px; margin:0px; padding-top: 15px;padding-bottom: 15px;}
#header img { vertical-align: bottom;  }
#pageContent { padding-top:40px; }
#footer { padding-top: 29px; text-align: center;padding-bottom: 38px;}

/* Width Restrict */
.pageWidth {  width: 980px; margin: auto;}

/* Pagination Blocks*/
.pagination p { margin-top:5px;  float: left;} 
.pagination ul {  list-style-type: none; } 
	.pagination ul li  { float: left; }
		.pagination ul li a  { text-align: center; color: #636363; text-decoration: none; display: block; padding: 3px 6px;margin-left: 3px; margin-right: 3px; background: #e2e2e2;}
		.pagination ul li a:hover, .pagination ul li a.active  { display: block;   background: #f69810; color: white;}
		
/* navigation setup */
#navigation { padding-top: 11px;padding-bottom: 11px; margin-top: 1px;}
	#navigation ul { float: left; display: inline;list-style-type: none; padding:0px; margin:0px;}
	#navigation ul li { float: left;margin-right: 20px; }
	#navigation ul li a,  .logoutLink a, #navigation ul li a, .logoutLink { color: white;text-decoration: none; }
		#navigation ul li a:hover,  .logoutLink a:hover { text-decoration: underline; }
	#navigation .logoutLink { padding-top: 2px;float: right; font-size: 12px;  color: white;}


/* Detail Table Styles */
#detailTable { width: 100%; } 
#detailTable th { font-size: 13px;font-weight: normal;padding: 9px 0px 6px 0px; }
#detailTable th.first {padding-left: 10px;}
#detailTable th.siteName { text-align: left; padding-left: 39px;}	
#detailTable  .smallText { font-size: 11px; } 

#detailTable td  { text-align: center;}
	#detailTable td.siteName { text-align: left; padding-left: 10px;}	
		#detailTable td.siteName img {  padding-right: 5px;}	
		#detailTable td.siteName a { display: block;color: #636361; text-decoration: none;padding: 14px 0px 14px 0px; }
#detailTable tr.odd td { background: #e2e2e2; }
#detailTable tr.even td { background: #ebebeb; }

#detailTable tr.odd.hover td { background: #bae0b7 !important }
#detailTable tr.even.hover td { background: #bae0b7 !important }

div.boxArrow { float: left;margin-right: 10px;display: block; padding:10px; background: url('../../content/layout/bgArrow.png');background-repeat: no-repeat; background-position: center;background-color: #b0b0b0; }

/* Sites List Page */
	#siteInfo { margin-top: 30px;border: 1px solid #d3d3d3; border-radius: 8px;display: inline;float: left;width: 31%;background: url('../../content/layout/iconSite.png');background-repeat: no-repeat; background-position: top right;}
		#siteInfo .innerPadding { padding: 18px; padding-bottom: 5px;padding-top: 14px;}
		#siteInfo h2 { font-weight: normal; display: inline; margin:0px; padding:0px;}
		#siteInfo li a { color: #626262; }
		#siteInfo ul { list-style-type: none; margin:0px; padding:0px;padding-top: 20px;padding-bottom: 1px;}
			#siteInfo li { display: block;padding-top: 6px; padding-bottom: 6px;}
			#siteInfo li span{ float: right; font-weight: bold;}
			#siteInfo.two { margin-left: 29px; margin-right: 29px; }
/* Meter Details Page Styles*/

#siteDetails { float: left;margin-top: 30px; } 
#siteDetails .row label { padding-top: 10px; }
#balanceDetails { margin-top: 30px; } 

.statusRow { margin-bottom:16px;margin-top: 16px; }
.statusRow span {position: relative; left: 5px; top: -4px;}
label { float: left;width: 200px;display: block} 
.siteField { font-family: Tahoma, Arial, Helvetica; width: 350px;border-radius: 4px;border: 1px solid #d3d3d3;background: #e2e2e2;padding: 8px 8px; color: #626262;}
.siteFileReadings  { font-family: Tahoma, Arial, Helvetica; width: 175px;border-radius: 4px;border: 1px solid #d3d3d3;background: #e2e2e2;padding: 8px 8px; color: #626262; }
textarea.siteField { height: 65px;   resize: none; font-size: 12px;} 
select.siteField {  width: 366px;} 

/* Meters: Balance Details*/

		#balanceBox { width: 350px;}
			#balanceBox .balanceDetail { font-size: 12px; background: white; border-left: 1px solid #d3d3d3;border-right: 1px solid #d3d3d3;padding: 10px 10px;  }
			#balanceBox .row  { padding-top: 4px; padding-bottom: 4px;}
				#balanceBox .balanceDetail .row span {  font-size: 14px;float: right; text-align: right;margin-top: -2px;} 
		#balanceBox .title { font-size: 22px; color: white;border-radius: 6px 6px 0px 0px; padding: 10px 10px;}
			#balanceBox .title span { font-size: 26px; float: right; }
		#balanceBox .messageLog { font-size: 11px;border: 1px solid #d3d3d3;background: #ebebeb;padding: 10px 10px; border-radius: 0px 0px 0px 0px; }
		
		.balanceButton { font-size: 12px;text-decoration: none; color: white; border-radius: 4px;width: 140px; text-align: center;padding-top: 8px; padding-bottom: 8px;  }

		a.sendReminder { float: left; margin-left: 10px; background: #8c8c8c;}
		a.addCredit { float: right; margin-right: 10px;background: #fe0000;}
		
		#balanceDetails .messageLog li { display: block;padding-top: 3px; padding-bottom: 3px;} 
		#balanceDetails .messageLog li span {  float: right; } 

/* Login Page Style */

#login{width: 370px; margin: auto; border: 1px solid #d3d3d3; border-radius: 5px;padding:20px;}
#login .padder { padding-top: 10px;}
		.loginrow label {float: none; display: block;  margin-bottom: 7px; font-size: 14px;}

/* Customer facing - My Account Styles */

#accountBox, #personalBox { margin-top: 20px; }
#accountBox .title, #personalBox .title { font-size: 22px; margin-bottom: 15px; }
#accountBox .title span, #personalBox .title span { float: right;font-size: 26px; } 
	#accountBox .boxPadding, #personalBox .boxPadding { padding: 15px;} 
	#accountBox .row span { float: right; text-align: right;font-weight: bold;}
	#accountBox .row { padding-top: 4px;padding-bottom: 4px;}
	#accountBox .row .balanceButton {margin-top: -5px; margin-right:0px;}
	div.balanceDetail { font-size: 12px;} 
	#accountBox { width: 48%;float: left;border: 1px solid #d3d3d3; border-radius: 6px;} 
	#personalBox { width: 48%;float: right;border: 1px solid #d3d3d3; border-radius: 6px; } 

	#personalBox { font-size: 12px; }
	.firstColumn { display: inline-block; width: 100px;  }
	#personalBox .row { padding-top: 3px; padding-bottom: 3px; }
table.personalDetails {  font-size: 13px;}
	table.personalDetails  th {  text-align: left; font-weight: normal; width: 120px; vertical-align: top}
	table.personalDetails td { padding-top: 5px; padding-bottom: 6px;vertical-align: top; }

	#personalBox .editButton { margin-top:3px;display: inline-block; float: right; background: #46c53a; color: white; padding: 3px 10px;text-decoration: none; } 
	#personalBox .editButton:hover { background: #333;} 


	#reportBox .what, #reportBoxLeft .what, #reportBoxRight .what  {display: block; font-size: 22px; margin-bottom: 15px;  }
	#reportBox .dateFrom, #reportBoxLeft .dateFrom, #reportBoxRight .dateFrom {margin-left: 25px;display:inline-block;font-size: 12px; }
	#reportBox .dateTo, #reportBoxLeft .dateTo, #reportBoxRight .dateTo {font-size: 12px;display:inline-block;; margin-left: 20px; }
	#reportBox .dateResult, #reportBoxLeft .dateResult, #reportBoxRight .dateResult{font-size: 12px;}

	#reportBoxLeft .boxPadding, #reportBoxRight .boxPadding  {  padding: 15px; }
	#reportBoxLeft { font-size: 12px;float: left;width: 48%; border: 1px solid #d3d3d3; border-radius: 6px; margin-top: 20px;} 
	#reportBoxRight { font-size: 12px;float: right;width: 48%; border: 1px solid #d3d3d3; border-radius: 6px; margin-top: 20px;}
	.dateField { font-size: 12px;font-family: Tahoma, Arial, Helvetica; width: 65px;border-radius: 4px;border: 1px solid #d3d3d3;background: #e2e2e2;padding: 8px 8px; color: #626262;}
	#reportBoxLeft .row span, #reportBoxRight .row span { float: right; font-weight: bold;	  }
	.dateResult { width: 70px;float: right; font-weight: bold;text-align: center; padding-top: 4px;}
	.dateResult em { display: block;font-size: 11px; font-weight: normal; text-decoration: normal; font-style: normal;}
	.datePeriod { padding-top: 12px;float: left; font-weight: bold; font-size: 12px;}