/* CSS Document */

/* set the size of the definition list <dl> and add the background image */
#imap {
  display:block; 
  width:514px; 
  height:542px; 
  background:url(../images/bill_base.gif) no-repeat; 
  position:relative;
  }
 
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
  display:block; 
  width:514px; 
  height:0; 
  padding-top:542px;
  background:transparent url(../images/bill_over.gif) no-repeat 514px 514px; 
  overflow:hidden; 
  position:absolute; 
  left:0px; 
  top:0px; 
  cursor:default;
  }  

/* the hack for IE pre IE6 */
* html #imap a#title {
  height:542px;
  he\ight:0;
  }  
  
/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
  background-position: 0 0; 
  z-index:10;
  }
  
/* place the <dd>s in the correct absolute position */
/* rollover area */
#imap dd {
  position:absolute; 
  padding:0; 
  margin:0;
  }
#imap #picp {
  left:5px; 
  top:194px; 
  z-index:20;
  }
#imap #picr {
  left:5px; 
  top:259px; 
  z-index:20;
  }
#imap #picj {
  left:5px; 
  top:329px; 
  z-index:20;
  }
#imap #picg {
  left:5px; 
  top:374px; 
  z-index:20;
  }
#imap #picf {
  left:5px; 
  top:419px; 
  z-index:20;
  }
/* need one for each of 5 */
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#total, #imap a#payment, #imap a#calls, #imap a#broadband, #imap a#additional {
  display:block; 
  text-decoration:none; 
  z-index:20;
  }
  
#imap a#total {
  width:369px; 
  height:69px; 
  background:transparent url(../images/hover.gif) -100px -100px no-repeat; 
  }
#imap a#payment {
  width:369px; 
  height:72px; 
  background:transparent url(../images/hover2.gif) -100px -100px no-repeat; 
  }
#imap a#calls {
  width:369px; 
  height:47px; 
  background:transparent url(../images/hover3.gif) -100px -100px no-repeat; 
  }
#imap a#broadband {
  width:369px; 
  height:47px; 
  background:transparent url(../images/hover3.gif) -100px -100px no-repeat; 
  }
#imap a#additional {
  width:369px; 
  height:47px; 
  background:transparent url(../images/hover3.gif) -100px -100px no-repeat; 
  }
  
/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
  display:none;
  }
  
/* move the link background image to position 0 0 when hovered */
#imap a#total:hover, #imap a#payment:hover, #imap a#calls:hover, #imap a#broadband:hover, #imap a#additional:hover {
  background-position:0 0;
  }
  
/* define the common styling for the span text */
#imap a:hover span {
  position:absolute;  
  width:350px; 
  display:block; 
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color: white;
  font-size:11px; 
  background:#1e4383; 
  border:3px solid white; 
  padding:5px;
  }


/* the hack for IE pre IE6 */
* html #imap a:hover span {
  width:350px; w\idth:342px;
  }
/* this changes the text box*/  
/* move the span text to a common position at the bottom of the image map */
#imap a#total:hover span {
  left:30px; 
  top: -100px;
  }
#imap a#payment:hover span {
  left:30px; 
  top:-190px;
  }
#imap a#calls:hover span {
  left:30px; 
  top: -150px;
  }
#imap a#broadband:hover span {
  left:30px; 
  top: -167px;
  }
#imap a#additional:hover span {
  left:30px; 
  top: -153px;
  }
/* add the style for the link span text - first line */
#imap a span:first-line {
  font-weight:bold; 
  color: white;
  }
/******* NORTHRN VERSION *********/
/* set the size of the definition list <dl> and add the background image */
#imap_ni {
  display:block; 
  width:514px; 
  height:542px; 
  background:url(../images/bill_base_ni.gif) no-repeat; 
  position:relative;
  }
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap_ni a#title {
  display:block; 
  width:514px; 
  height:0; 
  padding-top:542px;
  background:transparent url(../images/bill_over_ni.gif) no-repeat 514px 514px; 
  overflow:hidden; 
  position:absolute; 
  left:0px; 
  top:0px; 
  cursor:default;
  }  

/* the hack for IE pre IE6 */
* html #imap_ni a#title {
  height:542px;
  he\ight:0;
  }  
  
/* the <dt><a> hover style to move the background image to position 0 0 */
#imap_ni a#title:hover {
  background-position: 0 0; 
  z-index:10;
  }
  
/* place the <dd>s in the correct absolute position */
/* rollover area */
#imap_ni dd {
  position:absolute; 
  padding:0; 
  margin:0;
  }
#imap_ni #picp {
  left:5px; 
  top:194px; 
  z-index:20;
  }
#imap_ni #picr {
  left:5px; 
  top:259px; 
  z-index:20;
  }
#imap_ni #picj {
  left:5px; 
  top:329px; 
  z-index:20;
  }
#imap_ni #picg {
  left:5px; 
  top:374px; 
  z-index:20;
  }
#imap_ni #picf {
  left:5px; 
  top:419px; 
  z-index:20;
  }
/* need one for each of 5 */
/* style the <dd><a> links physical size and the background image for the hover */
#imap_ni a#total, #imap_ni a#payment, #imap_ni a#calls, #imap_ni a#broadband, #imap_ni a#additional {
  display:block; 
  text-decoration:none; 
  z-index:20;
  }
  
#imap_ni a#total {
  width:369px; 
  height:69px; 
  background:transparent url(../images/hover.gif) -100px -100px no-repeat; 
  }
#imap_ni a#payment {
  width:369px; 
  height:72px; 
  background:transparent url(../images/hover2.gif) -100px -100px no-repeat; 
  }
#imap_ni a#calls {
  width:369px; 
  height:47px; 
  background:transparent url(../images/hover3.gif) -100px -100px no-repeat; 
  }
#imap_ni a#broadband {
  width:369px; 
  height:47px; 
  background:transparent url(../images/hover3.gif) -100px -100px no-repeat; 
  }
#imap_ni a#additional {
  width:369px; 
  height:47px; 
  background:transparent url(../images/hover3.gif) -100px -100px no-repeat; 
  }
  
/* style the span text so that it is not initially displayed */
#imap_ni a span, #imap_ni a:visited span {
  display:none;
  }
  
/* move the link background image to position 0 0 when hovered */
#imap_ni a#total:hover, #imap_ni a#payment:hover, #imap_ni a#calls:hover, #imap_ni a#broadband:hover, #imap_ni a#additional:hover {
  background-position:0 0;
  }
  
/* define the common styling for the span text */
#imap_ni a:hover span {
  position:absolute;  
  width:350px; 
  display:block; 
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color: white;
  font-size:11px; 
  background:#1e4383; 
  border:3px solid white; 
  padding:5px;
  }


/* the hack for IE pre IE6 */
* html #imap_ni a:hover span {
  width:350px; w\idth:342px;
  }
/* this changes the text box*/  
/* move the span text to a common position at the bottom of the image map */
#imap_ni a#total:hover span {
  left:30px; 
  top: -100px;
  }
#imap_ni a#payment:hover span {
  left:30px; 
  top:-190px;
  }
#imap_ni a#calls:hover span {
  left:30px; 
  top: -150px;
  }
#imap_ni a#broadband:hover span {
  left:30px; 
  top: -167px;
  }
#imap_ni a#additional:hover span {
  left:30px; 
  top: -153px;
  }
/* add the style for the link span text - first line */
#imap_ni a span:first-line {
  font-weight:bold; 
  color: white;
  }