/*

	PacifiCorp CSS - Form screens
	ISITE Design

	included only on forms pages. Contains page layout and form styling.
	
*/

/*----------------------------------- Panel --------------------*/
.panel {
	background: #f7f8f8;
	border: 1px solid #c7c8ca;
	clear: both;
	overflow: hidden;
	margin: 1em 0;
	padding: 12px 18px;
}
	* html .panel { height: 1%; }
	.panel h2 { font-size: 1.315em; font-weight: bold; }
	.panel h3 { font-size: 1.165em; font-weight: normal; margin-bottom: 1em; }
	
	.panel table				{ margin: 0 0 1em 0; width: 100%; }
	.panel table.fixed			{ table-layout: fixed; } /* IE < 8 needs this for some tables with set column widths */
		.panel tbody th,
		.panel tfoot th			{ border: none; font-weight: normal; padding: .2em 4px; text-align: left; }	
			.panel td 			{ border: none; padding: .2em 4px; }
			.panel td.nopadding { padding: .2em 0; }	
				td.bill			{ text-align: right; }
				td.due			{ color: #920920; font-weight: bold; text-align: right; }
			.panel tfoot th,
			.panel tfoot td,
			.panel .row-total th,
			.panel .row-total td	{ background: transparent url(../img/css/bg_tfoot.gif) 4px 7px repeat-x; padding-top: 11px; }
			.panel tfoot td.due,
			.panel .row-total td.due { background-position: -516px 7px; text-align: right; }
			
			.panel tr.alert th,
			.panel tr.alert td	{ background: #dcddde; color: #252525; font-weight: bold; padding: .2em 4px; }
	
	.panel .btn-container td,
	.panel .btn-container th	{ padding-top: 4px; }
	
	.panel table.clean th {
		border-bottom: 1px solid #c7c8ca;
		font-size: 1.1em;
		text-align: left;
	}
	.panel table.clean td 			{ text-align: left; }
	.panel table.clean td.currency	{ text-align: right; }
	th.checkfield, td.checkfield, th.linkfield, td.linkfield { padding-right: 16px; width: 50px; }
	
	td.selectall { padding-top: 3px; padding-bottom: 4px; }
	
	.panel th.th-name 		{ width: 150px; }
	.panel th.th-address 	{ width: 280px; }
	
	.panel .columns { overflow: hidden; }	
		.panel .column-left {
			display: inline;
			float: left;
			margin: 0 20px 0 0;
			width: 325px;
		}
		.panel .column-right {
			display: inline;
			float: left;
			width: 181px;
		}
	
	.panel hr { clear: both; }

.panel-header {
	border-bottom: 1px solid #c7c8ca;
	clear: both;
	margin: 0 0 1em 0;
	overflow: hidden;
}
	.panel p.note 			{ float: right; margin: 0 0 0 8px; text-align: right; width: 32%; }
	.panel-header p.note 	{ margin-top: .3em; }

.panel .section {
	clear: both;
	margin: 1em 0 1.6em 0;
	overflow: hidden;
}
.panel .dateselector 	{ margin: 0; }

.panel fieldset.column-left { margin-top: 1em; width: 252px; }
.panel fieldset.column-left ol.fields li.left { width: 100%; }
.panel fieldset.column-left .nav-form { clear: both; }

.panel .help {
	margin: 0 0 0 304px;
	padding: 2em 0 0 0;
	width: 200px;
}
.wide .panel .help { width: 400px; }
.wide .panel .help-text { width: auto; }
	.panel .help h3 { font-weight: bold; line-height: 1.1; margin-bottom: .6em; }
	.panel .help ul { font-size: .9em; }
	.panel .help li { margin-bottom: .6em; }
	.panel .full p.help, .panel p.help-text {
		margin: 0;
		padding: 0;
		width: auto;
	}

/*----------------------------------- Widgets --------------------*/
#progressmeter 			{ margin-bottom: 10px; overflow: hidden; width: 100%; }
* html #progressmeter 	{ background: transparent url(../img/css/progressmeter_line.gif) 130px 2px no-repeat; } /* hide ie6 gap in arrow */
#progressmeter h2 {
	background: transparent url(../img/css/progressmeter.gif) 0 2px no-repeat;
	float: left;
	height: 19px;
	overflow: hidden;
	text-indent: -9999em;
	width: 134px;
}
	#progressmeter ol {
		background: transparent url(../img/css/progressmeter.gif) right 2px no-repeat;
		display: block;
		font-size: .8em;
		list-style: none;
		margin: 0;
		overflow: hidden;
	}
		#progressmeter ol.steps-2 { width: 240px; }
		#progressmeter ol.steps-3 { width: 345px; }
		#progressmeter ol.steps-4 { width: 400px; }
		#progressmeter ol.steps-5 { width: 430px; }
		#progressmeter li {
			background: #fff url(../img/css/progressmeter.gif) -150px 2px no-repeat;
			display: block;
			float: left;
			min-height: 50px;
			padding: 0 2px;
			text-align: center;
			width: 80px;
		}
			* html #progressmeter li { height: 50px; }
			#progressmeter ol.steps-2 li { padding-left: 10px; width: 94px; }
			#progressmeter ol.steps-3 li { padding-left: 10px; width: 94px; }
			#progressmeter ol.steps-4 li { padding-left: 5px; width: 84px; }
			#progressmeter ol.steps-5 li { width: 80px; }
		#progressmeter .step {
			background: #fff url(../img/css/progressmeter.gif) 0 -21px no-repeat; 
			display: block;
			font-size: 1.2em;
			height: 21px;
			line-height: 20px;
			margin: 0 auto 3px auto;
			width: 21px;
		}
		#progressmeter a 				{ color: #000; }
		#progressmeter a:hover .step	{ text-decoration: none; }
		#progressmeter .current a 		{ color: #4075ba; font-weight: bold; font-size: 1.1em; }
		#progressmeter .current .step 	{ background-position: -21px -21px; color: #fff; }

/*----------------------------------- Forms --------------------*/
#form-accountselect select { float: left; margin: 1px 4px .5em 0; width: 147px; }
.panel legend { display: none; }

ol.fields {
	float: left;
	list-style: none;
	margin: 0;
	width: 100%;
}
	.wide ol.fields 				{ width: 518px; }
	.wide .column-left ol.fields 	{ width: 100%; }
	ol.fields li {
		float: left;
		margin: 0 0 1em 0;
		min-height: 3.1em;
	}
		* html ol.fields li 	{ height: 3.1em; }
	ol.fields li.left  			{ width: 58%; }
	ol.fields li.right			{ width: 38%; }
	ol.fields li.full  			{ min-height: 0; width: 531px; } /* width: 100%; */
	* html ol.fields li.full 	{ height: 1%; }

.panel fieldset 		{ margin-bottom: 1em; }
	ol.fields fieldset 	{ margin-bottom: 0; }
#form-accountselect	fieldset { margin-bottom: 0; }
	

.fields .left input 	{ width: 252px; }
.fields .right input 	{ width: 200px; }
.fields .full input,
.fields .inline input	{ display: inline; }
.fields .full-text input{ display: block; width: 252px; } 
.fields .inline input	{ width: auto; }
.fields .full select	{ display: inline; margin-right: 14px; }
.fields .full p,
.fields .right p,
.fields .left p					{ margin-bottom: 0; }
.fields .selector p				{ margin: 0 0 1em 22px; }
.fields .selector p.description { margin-left: 0; }
* html .fields .selector p 		{ zoom:1; }

.fields .selector label,
.fields .list label		{ display: block; padding-left: 22px; }
.fields .selector input,
.fields .list input		{ float: left; margin: 2px 2px 0 -22px; }

* html .fields .selector input	{ margin-right:0; }
*+html .fields .selector input	{ margin-top:0; }

.panel .fields input.checkradio,
.panel .fields input.checkradio { width: auto; }

.panel form .inline label 			{ white-space: nowrap; }
.panel form  fieldset.list label 	{ clear: both;  white-space: normal; }
* html .panel form  fieldset.list label input 	{ margin-top: -.1em; }
*+html .panel form  fieldset.list label input 	{ margin-top: -.1em; }

.fields .paired label				{ display: inline; }
.fields .paired label.checkradio 	{ display: block; margin-bottom: .3em; }
.fields .paired input 				{ display: inline; width: 50px; }
.fields .paired label input 		{ float: none; width: auto; }
.fields input.description			{ width: 140px; }
.fields label.text input			{ border: 1px solid #ccc; width: 30px; }

.zip, .state 			{ display: inline; float: left; width: 70px; }
.state 					{ margin-right: 6px; width: 124px; }
.state select 			{ width: 100%; }
.fields div.zip input 	{ width: 70px; }
* html .fields div.zip input { width: 61px; }

.fields .phone,
.fields .socialsecurity,
.panel .fields .enteraccountnumber	{ color: #c7c8ca; }
.fields .phone input	{ display: inline; }
.fields input.areacode, 	
.fields input.prefix	{ width: 30px; }
.fields input.suffix	{ width: 40px; }
.fields input.mid		{ width: 18px; }

.fields input.tax-a 	{ display: inline; width: 20px; }
.fields input.tax-b		{ display: inline; width: 120px; }

.workphone, .extension		{ display: inline; float: left; width: 70px; }
.workphone 					{ margin-right: 20px; width: 162px; }
.fields div.extension input { width: 70px; }

.fields .socialsecurity input { display: inline;  }

.fields p 							{ color: #000; }
.fields p.error						{ color: #ef3d42; }
.fields p.error-help				{ font-size: .8em; }
.fields .checkradio p 				{ float: left; width: 423px; }
.fields .checkradio fieldset 		{ float: right; width: 102px; }
.fields .checkradio label			{ display: block; float: left; width: 49px; }
.fields .wide p 					{ float: none; margin-bottom: .3em; width: auto; }
.fields .wide fieldset 				{ float: none; width: auto; }
.fields .wide label					{ margin-right: 8px; width: auto; }
.fields .full select				{ float: left; }
.fields .full div.checkradio		{ float: left; padding-top: 3px; }
* html .fields .checkradio label	{ margin-top: -.25em; }
*+html .fields .checkradio label	{ margin-top: -.25em; }

.enteraccountnumber	form			{ float: left; margin: 2em 0 3em; width: 100%; }
.enteraccountnumber fieldset		{ display: inline; float: left; width: 250px; }
.enteraccountnumber h2 				{ float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.3em; margin: 0 10px 0 0; }
.enteraccountnumber input 			{ display: inline !important; }
.enteraccountnumber .accountnumber1	{ width: 115px !important; }
.enteraccountnumber .accountnumber2	{ width: 57px !important; }
.enteraccountnumber .accountnumber3	{ width: 16px !important; }
.enteraccountnumber	.btn-continue 	{ float: left; margin-top: -2px; position: relative; }


#form-dateselect label {
	float: left;
	line-height: 1.8;
	padding: 0 5px 0 0;
}

.accountselect		{ margin-bottom: 2em; }
.usagerangeselect	{ border-bottom: 1px solid #c7c7c7; margin-bottom: 2em; }

/*----------------------------------- Buttons --------------------*/
.btn-viewbill, .btn-makeonlinepayment, .btn-accountoverview { float: right; }

.btn-makeonlinepayment 				{ background-position: 0 -94px; margin: 1em 0; width: 151px; }
	.btn-makeonlinepayment:hover,
	.over-btn-makeonlinepayment		{ background-position: -151px -94px; }
.btn-accountoverview 				{ background-position: 0 -118px; width: 129px; }
	.btn-accountoverview:hover,
	.over-btn-accountoverview 		{ background-position: -129px -118px; }
.btn-continue		 				{ background-position: 0 -142px; float: right; width: 77px; }
	.btn-continue:hover,
	.over-btn-continue 				{ background-position: -79px -142px; }
.btn-viewbill			 			{ background-position: 0 -70px; margin: -12px -4px 0 0; text-align: left; width: 121px; position: relative; }
* html .btn-viewbill				{ margin-right: -2px; }
	.btn-viewbill:hover,
	.over-btn-viewbill 				{ background-position: -121px -70px; }
	.btn-container .btn-viewbill	{ margin-top: -4px; }
.btn-back			 				{ background-position: 0 -166px; float: left; width: 50px; }
	.btn-back:hover,
	.over-btn-back 					{ background-position: -50px -166px; }
.btn-cancel			 				{ background-image: url(../img/css/btns_alert.gif); background-position: 0 0; float: left; margin: 0 12px 0 0; width: 62px; }
	.btn-cancel:hover,
	.over-btn-cancel		 		{ background-position: 0 -24px; }
.btn-update 						{ background-position: 0 -214px; width: 64px; }
	.btn-update:hover,
	.over-btn-update				{ background-position: -64px -214px; }
.btn-submit 						{ background-position: 0 -190px; float: right; width: 65px; }
	.btn-submit:hover,
	.over-btn-submit				{ background-position: -65px -190px; }
.btn-savecontact					{ background-position: 0 -286px; width: 102px; }
	.btn-savecontact:hover,
	.over-btn-savecontact			{ background-position: -102px -286px; }
.btn-remove							{ background-position: 0 -310px; float: right; width: 71px; }
	.btn-remove:hover,
	.over-btn-remove				{ background-position: -71px -310px; }
.btn-send							{ background-position: 0 -334px; float: right; width: 53px; }
	.btn-send:hover,
	.over-btn-send					{ background-position: -53px -334px; }
.btn-calculate						{ background-position: 0 -358px; float: right; margin: .8em 0; text-indent: 9999em; width: 78px; }
	.btn-calculate:hover,
	.over-btn-calculate				{ background-position: -78px -358px; }
.btn-enroll 						{ background-position: 0 -382px; width: 56px; margin-bottom: 2em; }
	.btn-enroll:hover,
	.over-btn-enroll				{ background-position: -56px -382px; }
	.nav-form .btn-enroll			{ float: right; margin-bottom: 0; }
.btn-paynow 						{ background-position: 0 -406px; width: 73px; margin-bottom: 2em; }
	.btn-paynow:hover,
	.over-btn-paynow				{ background-position: -73px -406px; }	
.btn-onlinepaymentprogram 			{ background-position: 0 -430px; width: 172px; margin-bottom: 2em; }
	.btn-onlinepaymentprogram:hover,
	.over-btn-onlinepaymentprogram	{ background-position: -172px -430px; }
.btn-cancelonlinepayment 			{ background-position: 0 -454px; width: 216px; margin-bottom: 2em; }
	.btn-cancelonlinepayment:hover,
	.over-btn-cancelonlinepayment	{ background-position: -216px -454px; }
.btn-printpreview 					{ background-position: 0 -478px; float: right; margin: 0 12px 0 0; width: 101px; }
	.btn-printpreview:hover,
	.over-btn-printpreview			{ background-position: -101px -478px; }

.btn-disabled						{ background-image: url(../img/css/btns_disabled.gif); cursor: default; }


/*----------------------------------- Navigation --------------------*/
.nav-form 			{ margin: 0 0 3em 0; overflow: hidden; }
.panel .nav-form 	{ margin: 2em 0 1em 0; }
.wide .nav-form 	{ clear: left; }
	
	
/*----------------------------------- tables --------------------*/	
#table-yourbill td, #table-yourbill th 	{ padding-left: 30px; padding-right: 30px; }
#table-yourbill .col-billamount			{ text-align: center; width: 6.8em; }
	
	
/*----------------------------------- images --------------------*/	
#usagegraph {
	border-top: 1px solid #c7c7c7;
	padding: 1.7em 0 1em 0;
}	
.help-image { margin: 0 0 2em 0; }
	.help-image h3 { font-weight: bold; margin: 0; }
	
/*----------------------------------- calculator --------------------*/	
.calculator {
	display: inline;
	float: left;
	margin: 1em 200px 1em 22px;
	width: 20em;
}
	.calculator dl { margin: 0; }
	.calculator dt {
		clear: right;
		float: left;
		width: 12em;
	}
	* html .calculator dt { clear: none; }
	*+html .calculator dt { clear: none; }
	.calculator dd {
		float: right;
		text-align: right;
	}
	.calculator dt.calculator-field {
		padding-top: .25em;
	}
	* html .calculator dt.calculator-field { padding-top: .5em }
	*+html .calculator dt.calculator-field { padding-top: .5em }
	.calculator dd.calculator-equals { 
		border-bottom: 1px solid #d7d7d7;
		clear: both;
		float: none;
		height: 5px;
		margin: .4em 0;
		overflow: hidden;
		text-indent: 9999em;
		width: 20em;
	}
	.fields .selector .calculator input, .calculator input { float: none; margin: 0 -5px 0 0; position: relative; text-align: right; width: 40px; }
	
	
/*----------------------------------- globalheader --------------------*/
#globalheader 					{ float: left; margin: -1.2em 0 2em 0; *margin-top: -.6em; _margin-top: -.6em; _height: 1%; width: 566px; }
#globalheader .columns 			{ clear: both; overflow: hidden; }	
	#globalheader .column-left 	{ display: inline; float: left; margin-right: 10px; width: 362px; }
	#globalheader .column-right { display: inline; float: left; margin-right: 0; width: 176px; }

#globalheader .name,
#globalheader .account 	{ display: block; font-size: 1.1em; margin-top: 2px; width: 50%; float: left; } 
#globalheader .name 	{ clear: left; }
#globalheader form,
#globalheader .account 	{ float: right; width: 195px; }

#globalheader #form-accountselect select 	{ width: 190px; }
#globalheader .note, .panel li.note 		{ font-size: .9em; }
#globalheader ul li 						{ background: none; padding: 0; }	

#globalheader a.trigger-account span {
	background: transparent url(../img/css/icon_plusminus.gif) -8px 0 no-repeat;
	display: block;
	float: left;
	height: 8px;
	margin: 5px 5px 0 0;
	overflow: hidden;
	text-indent: -9999em;
	width: 8px;
}
#globalheader a.open span 	{ background-position: 0 0; }

.custom-select-wrapper { position:relative; }
    .custom-select-wrapper .custom-select-display a {
    	background: #fff url(../img/css/btn_dropdown_arrow.gif) top right no-repeat;
    	border: 1px solid #c7c7c7;
		color: #222;
    	cursor: pointer;
    	display: block;
    	line-height: 20px;	
    	padding: 0 20px 0 4px;
    	position: relative;
		text-decoration: none;
    	width: 172px;
    }
	.panel .custom-select-wrapper .custom-select-display a { margin-left: -4px; width: 161px; }
		.custom-select-wrapper  a 			{ color: #222; text-decoration: none; }
		.custom-select-wrapper  a .closed, span.closed 	{ color: #f33; }
		.custom-select-wrapper  a .active, span.active 	{ color: #44b51f; }
    	.custom-select-wrapper .custom-select-list-wrapper {
    		background-color: #fff;
    		border: 1px solid #c7c7c7;
			border-width: 0 1px 1px 1px;
    		position: absolute; top: 1.75em; left: 0;
    		width: 196px;
    	}
		.panel .custom-select-wrapper .custom-select-list-wrapper { left: -4px; width: 185px; }
		* html .panel .custom-select-wrapper .custom-select-list-wrapper { left: 0; }
			.custom-select-wrapper li 	{ margin: 0; }
			.custom-select-wrapper li a {
				display: block;
				padding: 2px 4px;
			}
			.custom-select-wrapper li a:hover,
			.custom-select-wrapper li a:focus,
			.custom-select-wrapper li a.focused { background-color: #eee !important; }
			/* 
			.custom-select-wrapper li a:focus { background: #f90; }
			.custom-select-wrapper li a.focused { background: #3f3; } */
			
/* burns edit */
ol.fields li.leftsmall		{ width: 210px;} 
ol.fields li.middlesmall	{ width: 95px;}
ol.fields li.leftsmall input { width: 197px; }
ol.fields li.middlesmall input { width: 40px;}

ol.fields div.split {
	float: left;
	width: 45%;
}
.nocheckborder, .nocheckborder input{
	border: 0px;
}
.nocheckbordersize{
	border: 0px;
	width: auto !important;
	display: inline;
	padding-top: 3px;
}
.labelinline label{
display: inline;
}