/********************************************************************************
  overlay.css
  
  Required: reset.css
            screen.css
            popin.css 
            
********************************************************************************/
/* reset */
.hide {display:none;}
.hide-panel {color:#fff;}
.hide-panel table.data tr th, .hide-panel table.data tr td {color:#fff; background-color:#fff; border:none;}

/******************************* 
  Dock 
*******************************/

body .dock {	
	height:40px;
	padding:0;
	position:fixed;
	right:0;
  width:100%; 
}
  
body #dock-bottom {
	bottom:0;
	background:url('i-overlay/bkg-ebill-startbar.png') repeat-x;
	z-index:5;
}

.dock .bill-navigator { 
	background:url('i-overlay/img-ebill-startbar-logo.png') no-repeat 10px 4px;
	height:32px;
	margin:8px auto 0;
	width:932px;
}

.dock .bill-navigator .bill-data-tab { 
  float:left; 
	margin:2px 5px 0 0;
	position:relative;
}

.dock .bill-data-tab input.submit {
  color:#fff;
  font-weight:bold;
  text-decoration:none;
  font-size:10px;
  height:28px;
  border:1px solid #57759e;
  padding:0 5px ;
  vertical-align:middle;
  line-height:20px;
  float:left;	
  width:auto; 
  overflow:visible;  
  letter-spacing:0em;
}

.dock .bill-navigator .account-overview {
  position:static;
  margin:2px 5px 0 0;
  line-height:26px;
  font-size:10px;
}
	
.dock .account-overview input.submit {
  background:url('i-overlay/bkg-ebill-startbar-accountoverview-tab.gif') no-repeat left center; 
  padding:7px 5px 7px 30px; 
  text-decoration:none; 
  font-weight:bold;  
}

.dock .account-overview input.submit:hover, .dock .account-overview-selected a.submit {
  background:url('i-overlay/bkg-ebill-startbar-accountoverview-tab-selected.gif') no-repeat left center; 
  color:#fff;
  
}

.dock .phone-summary input.submit {
  background: url('i-overlay/bkg-ebill-startbar-phonesummary-tab.gif') no-repeat left center; 
  padding:0 115px 0 25px;
}	

.dock .phone-summary input.submit:hover, 
.dock .phone-summary-selected input.submit {
  background:url('i-overlay/bkg-ebill-startbar-phonesummary-tab-selected.gif') no-repeat left center; 
  cursor: pointer;
}
	
.dock .usage-details input.submit {
  background:url('i-overlay/bkg-ebill-startbar-usagedetails-tab.gif') no-repeat left center;  
  padding:0 115px 0 25px;
  cursor: pointer;
}		

.dock .usage-details input.submit:hover, .dock .usage-details-selected input.submit{
  background:url('i-overlay/bkg-ebill-startbar-usagedetails-tab-selected.gif') no-repeat left center;
}

.dock .bill-data-tab select {
  position:absolute; 
  margin-left:-113px; 
  top:5px;
  font-size: 11px;
}

.dock .tab { 
  float:left; 
	color:#333;
	margin:5px 10px 0 45px;
	font-weight:bold;
	font-size:110%;
	font-family:Arial;
}

.dock .tab .label {
  display:inline;
  font-size: 11px;
}

.bill-navigator .close {
  float:right;
}

.bill-navigator .close a  {
  color:#000;
  background:url('i-overlay/icon-ebill-startbar-hide.png') no-repeat center top;
  padding:14px 5px 0 5px;
  display:block;
  font-size: 11px;
  margin: 5px 0 0;
}

/******************************* 
  Canvas 
*******************************/
#canvas {
  position:fixed; 
  width:100%; 
  z-index:1; 
  background:transparent url('i-overlay/bg-popin-overlay.png') repeat; 
	height:100%;
  left:0; 
  top:0;
}

/******************************* 
  Draggables Container 
*******************************/
#draggables-container .draggable-module {
  background:transparent url('i-overlay/bg-popinXXX-footer.png') no-repeat left bottom; padding:0 0 25px; width:447px; 
  height:auto;
  position:absolute;
  width:713px;
}

#draggables-container .draggable-module .draggable-module-container {
  padding-right:18px; 
  background:transparent url('i-overlay/bg-popinXXX-header.png') no-repeat left top; 
}

/******************************* 
  Heading 
*******************************/
#draggables-container .draggable-module .heading  {
  height:40px;
  cursor:move;
}

#draggables-container .draggable-module .heading h4 {
  float:left; 
  padding:15px 15px 0; 
  color:#4b6283;  
  font-size:14px; 
  font-family:Arial;
  
}

#draggables-container .draggable-module .heading .actions {
  float:right;
  width:135px;
  font-size: 11px
}

#draggables-container .draggable-module .heading .actions ul li {
  float:left;
  margin:15px 0 0 5px;
}

#draggables-container .draggable-module .heading .actions ul li a {
  color:#4b6283;
  cursor:pointer;

}

#draggables-container .draggable-module .heading .actions ul li a.print {
  background:url('i-overlay/icon-print-small.png') no-repeat;
  padding:1px 5px 0 20px;
  border-right:1px solid #4b6283;
  
}

/******************************* 
  Panel Heading 
*******************************/
#draggables-container .draggable-module .panel .heading {
  height:auto;
}

#draggables-container .draggable-module .panel .heading h4 {
  color:#666;
  margin:15px 5px 5px 5px; 
  padding:0; 
  font-size: 14px; 
  float:none; 
  line-height:14px;
  cursor:default;
}

/******************************* 
  Panel Options 
*******************************/
.panel-options {
  line-height:20px; 
	margin:0 2px 0 6px;
	background-color:#fff;
	padding:5px 0 10px;

}
.panel-options:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.panel-options select {
  margin:0 5px;
  font-size: 11px;
  padding: 0;
}

.panel-options input.submit {
  font-size: 11px;
}

.draggable-module .panel-options .charge-type, 
.draggable-module .panel-options .panel-balance {
  float:left; 
  width:49.9%;
  font-size: 11px;
}

.draggable-module  .panel-options .billing-period {
  float:right; 
  text-align:right;
  width:49%;
  font-size: 11px;
  padding: 0 5px 0 0;
} 


/******************************* 
  Tabs - needs to optimised 
*******************************/
.panel-nav {
  height:23px; 
  padding-left:10px; 
  border-bottom:1px solid #c2cfe2; 
  margin:10px;
  background-color:#fff;
}

.panel-nav ul li {
  float:left; 
  margin:0 4px 0 0; 
  background:transparent url('i-overlay/bg-tab-l.png') no-repeat left ; 
}

.panel-nav ul li a {
  background:transparent url('i-overlay/bg-tab-r.png') no-repeat right; 
  padding-right:11px; 
  display:block; 
  text-decoration:none; 
  line-height:23px; 
  color:#777; 
  font-family:Arial; 
  font-weight:bold;
  font-size: 11px;
}

.panel-nav ul li a span {
  font-size:110%; 
  background:transparent url('i-overlay/bg-tab-m.png') repeat-x; 
  display:block; 
  margin-left:11px; 
  height:23px;
}
    
.panel-nav ul li.selected {
  background:transparent url('i-overlay/bg-tab-l-selected.png') no-repeat left;
}

.panel-nav ul li.selected a {
  background:transparent url('i-overlay/bg-tab-r-selected.png') no-repeat right; 
  color:white;
}

.panel-nav ul li.selected a span {
  background:transparent url('i-overlay/bg-tab-m-selected.png') repeat-x;
}

/******************************* 
  Content 
*******************************/
#draggables-container .draggable-module .content {
  padding:0 6px 20px 10px;
}

.draggable-module .panel {
  background-color:#fff;
  margin:0 0 0 8px;
}
.draggable-module .panel-1, .draggable-module .panel-2 {
  display:none
}

.draggable-module .panel .table-content table.data caption {
  width:auto;
  margin:0 3px 0 2px
}

.draggable-module .panel .table-content:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.draggable-module .panel .pagination {
  margin:0;
}

/******************************* 
  Help Popins 
*******************************/
#draggables-container .draggable-module .panel .popin-help .heading {
  height:20px;
  background:none;
  cursor:pointer;
}

#draggables-container .draggable-module .panel .popin-help .heading h4 {
  margin:0;
  float:left;
  color:#4B6283;
  font-size:14px;
  width:135px;
}

#draggables-container .draggable-module .panel .popin-help .heading .actions {
  width:60px;
  float:right;
}

#draggables-container .draggable-module .panel .popin-help .heading .actions ul li {
  margin:0;
}
					
/* Chart */
.chart-container {
  position:absolute;
  left:5px;
  top:120px;
  width:685px;
  display:none;
  background-color:#fff;
}

.show-chart {
  background:url('i-overlay/icon-pie-chart.gif') no-repeat right center; 
  cursor:pointer;
  padding:2px 20px 2px 0;
}

.close-chart {
  float:right;
  padding:5px;
  cursor:pointer;
}