/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
	background-color: #E1F5FD;
	background-image:url(../_images/background2.jpg);
	background-repeat:no-repeat;
	background-position: top;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 20px;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
	color: #67C5E0;
	font-size: 24px;
	font-weight: lighter;
	letter-spacing: 4px;
	padding-bottom: 0px;
	/*border-bottom: 1px solid #67C5E0;*/
  line-height: 18px;
}
/* Commonly used to style section titles. */
h2 {
	color: #F00;
	font-size: 11px;
	margin-bottom: 15px;
	margin-right: 310px;
	padding-left: 400px;
	font-weight: bold;
	letter-spacing: 1px;
	border-bottom: 1px solid #CAE7F7;
	width:300px;
}
*html h2 { width:300px; margin-right:0; padding-left:400px; } /*style for IE 6*/
*+html h2 {width:300px;} /*style for IE 7*/

/* Commonly used to style section titles. */
h3 {
	color: #06C;
	font-size: 11px;
	padding-top: 20px;
	padding-left: 10px;
	font-weight: bold;
	line-height: 13px;
	letter-spacing: 1px;
}
h4 {
	color: #616161;
	font-size: 11px;
	padding-top: 10px;
	padding-left: 10px;
	font-weight: bold;
	line-height: 13px;
	letter-spacing: 1px;
}
/* Sets the style for unvisited links. */
a, a:link {
	color: #069;
	font-weight: bold;
	text-decoration: underline;
}
/* Sets the style for visited links. */
a:visited {
	color: #069;
	font-weight: bold;
	text-decoration: underline;
}
/* Sets the style for links on mouseover. */
a:hover {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}
/* Sets the style for a link that has focus. */
a:focus {
	color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
	color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
    min-width: 880px;
	margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: left; /* Redefines the text alignment defined by the body element. */
	width: 1040px;
}

*html #outerWrapper {width: 1045px;} /*IE 6 hack to prevent content area from displaying below right col*/

#outerWrapper #header {
	height:94px;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #header_1 {
	height: 62px;
}
#outerWrapper #contentWrapper {
	overflow: hidden;
}
#outerWrapper #contentWrapper #rightColumn1 {/*css for the right column of the about us section*/
	background-image:url(../_images/right_col_jps.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
}
#outerWrapper #contentWrapper #rightColumn3 {/*css for the right column of the business section*/
	background-image:url(../_images/promo_right3.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
}
#outerWrapper #contentWrapper #rightColumn4 {/*css for the right column of the resource centre*/
	background-image:url(../_images/right_col_resource.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
}

#outerWrapper #contentWrapper #rightColumn5 {/*css for the right column of the business section*/
	background-image:url(../_images/right_col_residential.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
}
#outerWrapper #contentWrapper #rightColumn6 {/*css for the right column of the business section*/
	background-image:url(../_images/right_col_media.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
}
#outerWrapper #contentWrapper #rightColumn7 {/*css for the right column of the business section*/
	background-image:url(../_images/right_col_news.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
	height:500px;
}

#outerWrapper #contentWrapper #rightColumn8 {/*css for the right column of the business section*/
	background-image:url(../_images/right_col_outages.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
	height:500px;
}
#outerWrapper #contentWrapper #rightColumn9 {/*css for the right column of the disaster centre*/
	background-image:url(../_images/right_col_community.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
	height:500px;
}

#outerWrapper #contentWrapper #rightColumn10 {/*css for the right column of the disaster centre*/
	background-image:url(../_images/right_col_disaster.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
	height:500px;
}

#outerWrapper #contentWrapper #rightColumn11 {/*css for the right column of the disaster centre*/
	background-image:url(../_images/right_col_myjps.jpg);
	background-repeat:no-repeat;
	float: right;
	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	width: 315px;
	height:415px;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
	/*background-color:#E1F5FD;*/
	margin: 0 315px 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 18px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#outerWrapper #contentWrapper #content_2 {
	/*background-color:#E1F5FD;*/
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 18px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

#footer {
	background-color: #CBDDEF;
	border-top: solid 5px #B9D1EA; /* Sets the top border properties for an element using shorthand notation */
	border-bottom: solid 5px #B9D1EA;
	padding: 3px 0 10px 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	height: 65px;
	color: #666;
	font-size: 9px;
}
/*#footer a,  a:link {
  color: #666;
  font-weight: bold;
  text-decoration: underline;
  font-size: 9px;
}
#footer a:visited {
  color: #666;
  font-weight: bold;
  text-decoration: underline;
}
#footer a:hover {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
#footer a:focus {
  color: #000;
}
#footer a:active {
  color: #000;
}
End of footer link css*/
#main_menu {/*Main menu css*/
	height: 24px;
	width: 562px;
	float:right;
	padding-top: 0px;
	font-size: 10px;
}
#outerWrapper #search {
	height: 30px;
	background-repeat:no-repeat;
	text-align:right;
	font-size: 10px;
	padding:0;
	margin:0;
}
#outerWrapper #search form {padding:0; margin:0;}

#outerWrapper #search input {
	background-color: #BFEEFF;
	border: 1px solid #09F;
	padding: 1px 2px;
	font-size: 10px;
}
#logo {
	float:left;
	height: 62px;
}
.float_left {
	float:left;
	margin-right:  10px;
}
.float_right {
	float:right;
	margin-left: 10px;
}
.notoppad_p {
	margin-top: 0px;
}
.toppad_1 {
	margin-top: 0;
	padding-top:1px;
}
.bold {
	font-weight:bold;
	color:#333;
}
#left {/*CSS for two columns on a page in the content area*/
	float:left;
}
#right {/*CSS for two columns on a page in the content area*/
	float:right;
}
/**/
#columns {
	/*width: 724px;*/
	height: 400px;
}
/*Start of css for the 'how we serve' page css popups*/
#map1 {
	position:relative;
	margin:0;
	padding:0;
	width:724px;
	height:330px;
	background:url(../_images/process1.jpg) top left no-repeat #fff;
	font-family:arial, helvetica, sans-serif;
	font-size:10px;
}
#map1 li {
	margin:0;
	padding:0;
	list-style:none;
}
#map1 li a {
	position:absolute;
	display:block;
	/*
   Specifying a background image
   (a 1px by 1px transparent gif)
   fixes a bug in older versions of
   IE that causeses the block to not
   render at its full dimensions.
   */
  background:url(../_images/blank.gif);
}
#map1 li a span {
	display:none;
}
#map1 li a:hover span {
	position:relative;
	display:block;
	width:300px;
	left:20px;
	top:10px;
	padding:5px;
	border:1px solid #333;
	background:#fff;
	text-decoration:none;
	color:#000;
	filter:alpha(opacity=80);
	opacity:0.8;
}
#map1 a.wind_power {
	top:7px;
	left:327px;
	width:122px;
	height:120px;
}
#map1 a.hydropower {
	top:39px;
	left:138px;
	width:145px;
	height:93px;
}
#map1 a.fossil_fuel {
	top:25px;
	left:1px;
	width:119px;
	height:114px;
}
#map1 a.switchyard {
	top:39px;
	left:553px;
	width:63px;
	height:89px;
}
#map1 a.lines {
	top:163px;
	left:602px;
	width:102px;
	height:168px;
}
#map1 a.substation {
	top:227px;
	left:495px;
	width:82px;
	height:78px;
}
#map1 a.distribution {
	top:173px;
	left:301px;
	width:49px;
	height:160px;
}
#map1 a.transformer {
	top:241px;
	left:427px;
	width:39px;
	height:38px;
}
#map1 a.customer {
	top:180px;
	left:3px;
	width:104px;
	height:76px;
}
#map1 a.business {
	top:212px;
	left:132px;
	width:124px;
	height:115px;
}
/*End of css for the 'how we serve' page css popups*/
/*Start of css for the 'customer services' page css popups*/
#map2 {
	position:relative;
	margin:0;
	padding:0;
	width:724px;
	height:274px;
	background:url(../_images/customer_services.jpg) top left no-repeat #fff;
	font-family:arial, helvetica, sans-serif;
	font-size:10px;
}
#map2 li {
	margin:0;
	padding:0;
	list-style:none;
}
#map2 li a {
	position:absolute;
	display:block;
	/*
   Specifying a background image
   (a 1px by 1px transparent gif)
   fixes a bug in older versions of
   IE that causeses the block to not
   render at its full dimensions.
   */
  background:url(../_images/blank.gif);
}
#map2 li a span {
	display:none;
}
#map2 li a:hover span {
	position:relative;
	display:block;
	width:180px;
	left:20px;
	top:10px;
	padding:5px;
	border:1px solid #999;
	background:#fff;
	text-decoration:none;
	color:#000;
	filter:alpha(opacity=80);
	opacity:0.8;
}
#map2 a.lucea {
	top:27px;
	left:63px;
	width:32px;
	height:33px;
}
#map2 a.mobay {
	top:30px;
	left:162px;
	width:34px;
	height:32px;
}
#map2 a.falmouth {
	top:36px;
	left:221px;
	width:34px;
	height:33px;
}
#map2 a.saintanns {
	top:18px;
	left:346px;
	width:34px;
	height:34px;
}
#map2 a.portmaria {
	top:45px;
	left:460px;
	width:34px;
	height:34px;
}
#map2 a.portantonio {
	top:107px;
	left:596px;
	width:34px;
	height:34px;
}
#map2 a.stthomas {
	top:167px;
	left:612px;
	width:34px;
	height:34px;
}
#map2 a.kingston {
	top:141px;
	left:514px;
	width:34px;
	height:34px;
}
#map2 a.standrew {
	top:136px;
	left:478px;
	width:33px;
	height:33px;
}
#map2 a.portmore {
	top:178px;
	left:449px;
	width:33px;
	height:33px;
}
#map2 a.spanish {
	top:142px;
	left:425px;
	width:36px;
	height:34px;
}
#map2 a.maypen {
	top:151px;
	left:337px;
	width:33px;
	height:33px;
}
#map2 a.mandeville {
	top:167px;
	left:276px;
	width:33px;
	height:33px;
}
#map2 a.blackriver {
	top:162px;
	left:199px;
	width:33px;
	height:33px;
}
#map2 a.savlamar {
	top:83px;
	left:73px;
	width:33px;
	height:33px;
}
/*End of css for the 'customer services' page css popups*/
/*Start of css for the 'power plants' page css popups*/
#map3 {
	position:relative;
	margin:0;
	padding:0;
	width:724px;
	height:274px;
	background:url(../_images/power_plants2.jpg) top left no-repeat #fff;
	font-family:arial, helvetica, sans-serif;
	font-size:10px;
}
#map3 li {
	margin:0;
	padding:0;
	list-style:none;
}
#map3 li a {
	position:absolute;
	display:block;
	/*
   Specifying a background image
   (a 1px by 1px transparent gif)
   fixes a bug in older versions of
   IE that causeses the block to not
   render at its full dimensions.
   */
  background:url(../_images/blank.gif);
}
#map3 li a span {
	display:none;
}
#map3 li a:hover span {
	position:relative;
	display:block;
	width:300px;
	left:20px;
	top:10px;
	padding:5px;
	border:1px solid #999;
	background:#fff;
	text-decoration:none;
	color:#000;
	filter:alpha(opacity=80);
	opacity:0.8;
}
#map3 a.bogue {
	top:39px;
	left:162px;
	width:28px;
	height:26px;
}
#map3 a.riobuenoa {
	top:49px;
	left:230px;
	width:28px;
	height:29px;
}
#map3 a.riobuenob {
	top:69px;
	left:260px;
	width:25px;
	height:25px;
}
#map3 a.roaring {
	top:64px;
	left:312px;
	width:27px;
	height:27px;
}
#map3 a.lowerwhite {
	top:76px;
	left:349px;
	width:27px;
	height:27px;
}
#map3 a.upperwhite {
	top:76px;
	left:389px;
	width:27px;
	height:27px;
}
#map3 a.constant {
	top:113px;
	left:485px;
	width:27px;
	height:27px;
}
#map3 a.ramshorn {
	top:141px;
	left:503px;
	width:29px;
	height:24px;
}
#map3 a.rockfort {
	top:169px;
	left:501px;
	width:29px;
	height:28px;
}
#map3 a.huntsbay {
	top:156px;
	left:464px;
	width:27px;
	height:27px;
}
#map3 a.oldharbour {
	top:179px;
	left:399px;
	width:30px;
	height:28px;
}
#map3 a.maggotty {
	top:162px;
	left:231px;
	width:28px;
	height:29px;
}
/*End of css for the 'power plants' page css popups*/
/*Start of css for the 'restoration process' page css popups*/
#map4 {
	position:relative;
	margin:0;
	padding:0;
	width:724px;
	height:366px;
	background:url(../_images/power_restoration.jpg) top left no-repeat #fff;
	font-family:arial, helvetica, sans-serif;
	font-size:10px;
}
#map4 li {
	margin:0;
	padding:0;
	list-style:none;
}
#map4 li a {
	position:absolute;
	display:block;
	/*
   Specifying a background image
   (a 1px by 1px transparent gif)
   fixes a bug in older versions of
   IE that causeses the block to not
   render at its full dimensions.
   */
  background:url(../_images/blank.gif);
}
#map4 li a span {
	display:none;
}
#map4 li a:hover span {
	position:relative;
	display:block;
	width:300px;
	left:20px;
	top:10px;
	padding:5px;
	border:1px solid #999;
	background:#fff;
	text-decoration:none;
	color:#000;
	filter:alpha(opacity=80);
	opacity:0.8;
}
#map4 a.rest1 {
	top:51px;
	left:12px;
	width:269px;
	height:202px;
}
#map4 a.rest2 {
	top:64px;
	left:363px;
	width:180px;
	height:109px;
}
#map4 a.rest3 {
	top:63px;
	left:566px;
	width:145px;
	height:135px;
}
#map4 a.rest4 {
	top:237px;
	left:537px;
	width:172px;
	height:80px;
}
#map4 a.rest5 {
	top:260px;
	left:192px;
	width:247px;
	height:100px;
}
/*End of css for the 'power restoration' page css popups*/
/*Start of css for the 'understanding your bill' residential page css popups*/
#jps_bill {
	position:relative;
	margin:0;
	padding:0;
	width:481px;
	height:473px;
	background:url(../_images/jps_bill.jpg) top left no-repeat #fff;
	font-family:arial, helvetica, sans-serif;
	font-size:10px;
}
#jps_bill li {
	margin:0;
	padding:0;
	list-style:none;
}
#jps_bill li a {
	position:absolute;
	display:block;
	/*
   Specifying a background image
   (a 1px by 1px transparent gif)
   fixes a bug in older versions of
   IE that causeses the block to not
   render at its full dimensions.
   */
  background:url(../_images/blank.gif);
}
#jps_bill li a span {
	display:none;
}
#jps_bill li a:hover span {
	position:relative;
	display:block;
	width:200px;
	left:20px;
	top:10px;
	padding:5px;
	border:1px solid #333;
	background:#fff;
	text-decoration:none;
	color:#000;
	filter:alpha(opacity=90);
	opacity:0.9;
}
/*#jps_bill li a span b{ font-weight:bolder; color:#F00;}*/
#jps_bill a.one {
	top:61px;
	left:291px;
	width:174px;
	height:34px;
}
#jps_bill a.two {
	top:106px;
	left:319px;
	width:145px;
	height:34px;
}
#jps_bill a.three {
	top:106px;
	left:115px;
	width:157px;
	height:28px;
}
#jps_bill a.four {
	top:177px;
	left:136px;
	width:247px;
	height:60px;
}
#jps_bill a.five {
	top:260px;
	left:264px;
	width:152px;
	height:32px;
}
#jps_bill a.six {
	top:297px;
	left:148px;
	width:132px;
	height:83px;
}

/*End of css for the 'understanding your bill' residential page css popups*/

/*Start of css for the 'understanding your bill' business page css popups*/
#jps_bill_business {
	position:relative;
	margin:0;
	padding:0;
	width:481px;
	height:473px;
	background:url(../_images/jps_bill_business.jpg) top left no-repeat #fff;
	font-family:arial, helvetica, sans-serif;
	font-size:10px;
}
#jps_bill_business li {
	margin:0;
	padding:0;
	list-style:none;
}
#jps_bill_business li a {
	position:absolute;
	display:block;
	/*
   Specifying a background image
   (a 1px by 1px transparent gif)
   fixes a bug in older versions of
   IE that causeses the block to not
   render at its full dimensions.
   */
  background:url(../_images/blank.gif);
}
#jps_bill_business li a span {
	display:none;
}
#jps_bill_business li a:hover span {
	position:relative;
	display:block;
	width:200px;
	left:20px;
	top:10px;
	padding:5px;
	border:1px solid #333;
	background:#fff;
	text-decoration:none;
	color:#000;
	filter:alpha(opacity=90);
	opacity:0.9;
}
/*#jps_bill_business li a span b{ font-weight:bolder; color:#F00;}*/
#jps_bill_business a.one {
	top:17px;
	left:109px;
	width:129px;
	height:53px;
}
#jps_bill_business a.two {
	top:31px;
	left:298px;
	width:177px;
	height:34px;
}
#jps_bill_business a.three {
	top:81px;
	left:354px;
	width:119px;
	height:28px;
}
#jps_bill_business a.four {
	top:151px;
	left:151px;
	width:229px;
	height:31px;
}
#jps_bill_business a.five {
	top:255px;
	left:195px;
	width:152px;
	height:32px;
}
#jps_bill_business a.six {
	top:298px;
	left:198px;
	width:132px;
	height:31px;
}

/*End of css for the 'understanding your bill' business page css popups*/


 /* css for main pages table */
 #main_page_tbl ul { 
 	/*margin-left:20px; 
	padding-left:5px; */
	padding-bottom:10px;
	margin-top:0; 
	padding-top:0;
}
 #main_page_tbl th { 
 	background-color: #669CC4; 
	color:#FFF;
	/*border-left:20px solid #E2F5FC;
	border-right:20px solid #E2F5FC;
	border-bottom:2px solid #E2F5FC;*/

}
 #main_page_tbl td{
	/* padding-left:20px; 
	 padding-right:20px;*/
	 font-size:9px;
	 color: #069;
}
#main_page_tbl td a { 
 	font-size:9px;
}
 /* End Of css for main pages table */
/*css for Online Forms */
.redtxt {color: #FF0000}
.error { background-color:#FFE8E8;}
.errortxt { color:#FF0000; font-size:0.8em;}
/*end of css for Online Forms */
p.center { text-align:center;} /*centre the flash movie in p tag in theatre pages*/