/* CSS Document */
html {
	height:100%;
}
body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	line-height: 160%;
	text-align: center;
	background-color: #dddddd;
	height:100%;
}
img {
 border: 0;
}
	/* ------------------------------------------------------------------------------------------------------------------------- */
/* Div IDs */
/* ------------------------------------------------------------------------------------------------------------------------- */
#container {
	text-align: left;
	margin: auto;
	padding: 0px;
	width: 750px;
	background-color: #FFFFFF;
	position: relative;
	left: 0px;
	top: 6px;
	border-left: solid #cccccc 1px;
	border-right: solid #cccccc 1px;
	border-bottom: solid #cccccc 1px;
}

div.menu {
	text-align: right;
	margin: 0;
	padding: 0;
	width: 450px;
	position: absolute;
	right: 10px;
	top: 2px;
	color:#FFFFFF;
	font-size:8px;
	font-weight:bold;
	font:Verdana, Arial, Helvetica, sans-serif;
}
#header {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 10px 0px;
	position:relative;
	width: 749px;
	height:101px;
	background: #000000 url(http://www.connectutilities.com/images/pageheaders/ph_dir_background.gif) no-repeat;
	border:#FF9900 solid 1px;
}

#main {
	padding: 0;
	margin: 0px 15px 0px 20px;
	top:0px;
	width: 715px;
	min-height:560px;
	height:auto !important;
	height:560px;

	position:relative;
	border-bottom: solid #cccccc 1px;
}
#inner-main {
	padding: 0;
	margin: 0px 0px 0px 0px;
	width: 300px;
	position:relative;
}
#inner-main2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position:absolute;
	right:0px;
	top:0px;
	width:280px;
}
#logo-box {
	padding: 20px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #888888;
	text-align: center;
	line-height: 150%;
	position: relative;
	width: 100%;
	height:100px;

}
#footer {
	padding: 10px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #888888;
	text-align: center;
	line-height: 150%;
	position: relative;
	width: 750px;
	height:40px;

}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* Header Styles */
/* ------------------------------------------------------------------------------------------------------------------------- */

h2.cta-text {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 2px 0px;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
}

/* ------------------------------------------------------------------------------------------------------------------------- */
/* Link Styles */
/* ------------------------------------------------------------------------------------------------------------------------- */

a.link, a:active, a:visited, a:hover {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	color:#0066CC;
	text-decoration: none;
}
a.link:hover {
	text-decoration:underline;
	color:#0099FF;
}
a.headlink, a.headlink:active, a.headlink:visited, a.headlink:hover {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	color:#FFFFFF;
	text-decoration: none;
}
a.headlink:hover {
	color:#FF9900;
}
a.small:link, a.small:active, a.small:visited, a.small:hover {
	padding: 0px 0px 0px 3px;
	margin: 0px 0px 0px 0px;
	color: #ffffff;
	text-decoration: underline;
	font-size: 9px;
	position: relative;
	bottom: 7px;
}
a.small:hover {
	text-decoration: none;
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* list Styles */
/* ------------------------------------------------------------------------------------------------------------------------- */
ul.empty {
	padding: 3px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
}
ul.indented {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	position: relative;
	left: 100px;
	width: 350px;
}
li.carrot {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 20px;
	color: #333333;
	text-decoration: none;
 list-style-image: url(images/carrot.gif);
	list-style-position: outside;
}
li.blue-bullet {
	padding: 0px 0px 4px 0px;
	margin: 0px 0px 0px 20px;
	list-style-image: url(images/blue-bullet.gif);
	list-style-position: outside;
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* Image Styles */
/* ------------------------------------------------------------------------------------------------------------------------- */
img.spacer {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 100px;
}
div#header a img.spacer {
	background:url(/images/pageheaders/ph_dir_logo.gif) no-repeat 10px 25px;
}
img.logo {
	padding: 0px 0px 0px 0px;
	margin: 0px 10px 0px 0px;
	top: 0px;
	left: 0px;
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* address login Styles */
/* ------------------------------------------------------------------------------------------------------------------------- */
#orangebox, #orangebox2 {
	padding: 10px 0px 0px 11px;
	margin: 0px 0px 0px 0px;
	position:absolute;
	top: 120px;
	right: 40px;
	width: 206px;
	height: 200px;
	background: url(images/orange-box.jpg) no-repeat top left;
	text-align: left;
	z-index: 3;
}
#orangebox2 {
	top: 210px;
	left: 20px;
}
#login-box, div.loginbox {
	padding: 10px 0px 0px 10px;
	margin: 0px 0px 0px 0px;
	position:absolute;
	top: 5px;
	right: 0px;
	width: 405px;
	height: 311px;
	background: url(images/login-back.jpg) no-repeat top left;
	text-align: left;
	z-index: 3;
}
div.loginbox {
	height:121px;
	padding-top: 190px;
}
div.loginbox h2 {
	display:none;
}
div.loginbox form input.continue {
	background:url(images/actionbox_continue.gif) no-repeat top left;
	width:99px;
	height:23px;
	position:absolute;
	right:20px;
	top:80px;
}
#orangebox2 {
	top: 210px;
	left: 20px;
}
#bluebox {
	padding: 10px 0px 0px 11px;
	margin: 0px 0px 0px 0px;
	position:absolute;
	top: 340px;
	right: 40px;
	width: 206px;
	height: 200px;
	background: url(images/blue-box.jpg) no-repeat top left;
	text-align: left;
	z-index: 3;
}
#returning-users {
	padding: 10px 0px 0px 11px;
	margin: 0px 0px 0px 0px;
	position:absolute;
	top: 320px;
	right: 0px;
	width: 405px;
	height: 93px;
	text-align: left;
	z-index: 3;
	background:url(images/returning-back.gif);
}
#hero-shot {
	padding: 70px 0px 0px 0px;
	margin: 0;
	position:absolute;
	top: -5px;
	right: 75px;
	width: 146px;
	height: 55px;
	background: url(images/hero-shot2.jpg) no-repeat top left;
	text-align: center;
	z-index: 4;
}
#nat-gas-shot {
	padding: 0;
	margin: 0;
	position:absolute;
	top: 5px;
	right: 55px;
	width: 206px;
	height: 110px;
	background: url(images/nat-gas.jpg) no-repeat top left;
	text-align: center;
	z-index: 4;
}
#whybox {
	padding: 0px 20px 0px 20px;
	margin: 25px 0px 0px 0px;
	width: 430px;
	position: relative;
	top: 0px;
	left: 250px; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}
#login-fields {
	padding: 0px 0px 0px 0px;
	margin: 0;
	position: absolute;
	bottom: 5px;
	width: 200px;
	text-align: left;
}
#user-name {
	padding: 0px 0px 0px 0px;
	margin: 0;
	position: relative;
	top: 7px;
	width: 152px;
	text-align: left;
}
#login-row {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 0px;
	top: 0px;
	width: 197px;
	text-align: left;
}
#returning-cell {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 0px;
	top: 0px;
	width: 152px;
	font-size: 9px;
	font-weight: bold;
	text-align: left;
	color: #ffffff;
}
#login-box-2 {
	padding:0;
	margin:0;
	width:390px;
	position:absolute;
	left:15px;
	top:190px;
}
#returning-users-2 {
	padding:0;
	margin:0;
	width:375px;
	position:absolute;
	left:15px;
	top:30px;
}
div.login-row, div.loginbox form div {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height:28px;
	font-size: 10px;
	font-weight: bold;
	text-align: left;
	color: #000000;
}
div.loginbox form div {
	width: 375px;
	padding: 0 0 0 10px;
}
div.login-returning {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height:28px;
	font-size: 10px;
	font-weight: bold;
	text-align: left;
	color: #000000;
}
div.login-returning2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	right: 10px;
	top: 0px;
	width: 100%;
	height:28px;
	font-size: 10px;
	font-weight: bold;
	text-align: left;
	color: #000000;
}
#returning-btn {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	right: 10px;
	bottom: 30px;
	width: 100px;
}
div.login-row-2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	font-size: 10px;
	text-align: left;
	color: #000000;
}
#login-cell-1, div.loginbox form div input {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 190px;
	font-size: 12px;
	/*font-weight: bold;*/
	text-align: left;
	color: #ffffff;
}
div.loginbox form div input {
	color:#333333;
	width:170px;
}
#login-cell-returning {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	right: 0px;
	top: 0px;
	width: 175px;
	font-size: 9px;
	font-weight: bold;
	text-align: left;
	color: #000000;
}
#login-cell-returning-2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 175px;
	font-size: 9px;
	font-weight: bold;
	text-align: left;
	color: #000000;
}
#login-cell-2 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 0px;
	top: 0px;
	width: 60px;
	font-size: 9px;
	font-weight: bold;
	text-align: left;
	color: #ffffff;
}
#login-cell-3 {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: absolute;
	left: 80px;
	top: 0px;
	width: 115px;
	font-size: 9px;
	font-weight: bold;
	text-align: left;
	color: #ffffff;
}
#login-cell-submit {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	position: relative;
	left: 112px;
	top: 19px;
	width: 141px;
}
#form-row {
	padding: 0;
	margin: 0;
	font-size: 9px;
	position: absolute;
	width: 197px;
	right:10px;
	color: #000000;
}
#form-row2 {
	padding: 0px;
	margin: 12px 0px 0px 0px;
	font-size: 9px;
	text-align: left;
	position: relative;
	width: 157px;
	color: #ffffff;
}
h3.address-head {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	color:#006699;
	font-weight: bold;
}
/* ------------------------------------------------------------------------------------------------------------------------- */
/* Field Styles */
/* ------------------------------------------------------------------------------------------------------------------------- */
input.returning {
	width: 170px;
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 5px 0px;
}
input.streetaddress {
	width: 170px;
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 5px 0px;
}
input.apt {
	width: 170px;
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 5px 0px;
}
input.zip {
	width: 170px;
	padding: 0px 0px 0px 0px;
	margin: 2px 0px 5px 0px;
}
input.streetaddress2 {
	width: 120px;
	font-size: 9px;
	padding: 2px 0px 2px 0px;
	margin: 3px 0px 0px 0px;
	border: solid #CCCCCC 1px;
}
input.apt2 {
	width: 60px;
	font-size: 9px;
	padding: 2px 0px 2px 0px;
	margin: 3px 0px 0px 0px;
	border: solid #CCCCCC 1px;
}
input.zip2 {
	width: 100px;
	font-size: 9px;
	padding: 2px 0px 2px 0px;
	margin: 3px 0px 0px 0px;
	border: solid #CCCCCC 1px;
}
input.login {
	padding: 0;
	margin: 5px 0px 0px 0px;
	position:absolute;
	top:-6px;
	right:15px;
}
div.loginbox form {
	position:relative;
}
input.login2 {
	padding: 0;
	margin: 5px 0px 0px 0px;
	position:absolute;
	top:-3px;
	right:15px;
}