/******************************************************************************


	This style sheet overrides many styles found in the xe_styles.css file

	

	Minimum supported browsers supported by this CSS:

		- Internet Explorer 7

		- Firefox 3

		- Safari 3

		- Chrome 2

		- Opera 9.5

	

*******************************************************************************/



#commonUtils {

	clear: right;

	padding: 25px 0 0 !important;

	width: auto;

}

.header ul li {border-right: Nne !important;}

textarea, input {font:13px/1.3 arial,helvetica,clean,sans-serif;}

    

/****************Start Message styles***************/

.message {

	border-radius: 3px;

	color: #333 !important;

	font-weight: bold !important;

	margin: -10px 0 15px 0;

	max-width: 30em;

	padding: 5px;

	vertical-align: middle !important;

	display: Nne;

}

.message.warning, input.error, select.error, textarea.error {

//	background-color: #fcd4d4 !important;

	border: 1px solid #f02e25 !important;

}

.message.success {

	//background-color: # !important;

	border: 1px solid #8E9301 !important;

	

}

.message.icon-only {

	border-radius: 0px !important;

	color: transparent !important;

	margin: 0 !important;

	width: auto !important;

	padding: 0px !important;

	vertical-align: middle !important;

	background-color: transparent !important;

	border: Nne !important;

	display:inline-block;

}

.message.icon-only p, .message.success.icon-only p, .message.warning.icon-only p{

	display: Nne !important;

}

.message p {

	display: inline-block !important;

	float: right !important;

    	margin: 0 !important;

    	padding: 0 !important;

    	width: 27em !important;

}

.message.warning p{

		

}

.message .alert {

	float: left !important;

	margin: 5px !important;

	height: 24px!important;

	width: 24px !important;

	text-align: center !important;

	color: #FFFFFF !important;

}

.message.icon-only .alert {

	height: 16px!important;

	width: 16px !important;

	margin: 0 !important;

	background: url("../images/sprites_24.png") -58px -30px no-repeat transparent;



}

.message.warning .alert {

	background: url("../images/sprites_24.png") -58px -2px no-repeat transparent;

}

.message.success .alert {

	background: url("../images/sprites_24.png") -58px -30px no-repeat transparent;



}

.message.icon-only.success .alert {

	background: url("../images/sprites_16.png") -32px -17px no-repeat transparent;



}

.urgent, label.error {font-weight: bold; color: #f02e25;}





/****************End Message styles***************/





/****************Start Window/Table styles***************/

#cust-info{

	clear: both;

	width: 100%;

}

.row {clear: both;}

.window {

	width: 30%;

	padding: 0;

	margin-left: 15px;

	float: left;

}

.whole{width: 94% !important;}

.two-third{width: 62% !important;}

.half{width: 46% !important;}

.third{width: 30% !important;}

.fourth{width: 22% !important;}

.window h3 {

	border-radius: 4px 4px 0 0;

	color: #333;

	font-weight: bold;

	padding: 4px;

	font-size: 14px;

}



/********** 

	Backgrounds for h3 are not using more current CSS methods for handling 

	gradients due to issues with older browsers.  Until Xcel updates the minimum supported 

	browsers this approach to managing backgrounds will need to remain.

**********/

#cust-info .window h3, .row .window h3 {

	background: url('../images/header_bg.jpg') 0 0 repeat-x #6b5e4f; /* Old browsers */

}

.row .window h3 {

	border: 1px solid #6b5e4f;

	color: #FFF;

	background: url('../images/header_bg.jpg') 0 0 repeat-x #6b5e4f; /* Old browsers */

}

.window-info {

	background-color: #F0F0F0;

	border: 1px solid #333;

	border-top: Nne;

	border-radius: 0 0 4px 4px;

	padding: 4px;

	min-height: 75px;

}

.report .window-info{min-height: 185px;}

/***Table Styles***/

.window-info table{width: 100%;}

.window-info table td{}

th.description-col,th.usage-col,th.period-col,th.cost-col,th.tax-col, th.amount-col{text-align:center;}

th.date-col{text-align:center;}

th {vertical-align: bottom;}

th.amount-col{text-align:right;}

.date-col{width: 25%; text-align:right;}

.description-col{text-align:left;}

.usage-col{width: 40%; text-align:center;}

.period-col{width: 30%; text-align:center;}

.amount-col{width: 4em; text-align:right;}

.window-info label{display: inline-block; width: 10em;}

.window-info label.error{display: inline; width: 100%;}

#total-currency, .currency, .date-col{text-align: right; width: 25%;}

.type-total td {font-weight: bold; text-align: right; border-top: 1pt solid #333;}

.more{display: block; text-align: right; clear: both;}

tfoot td{font-weight:bold; text-align:right !important;}

tfoot td.center{text-align:center !important;}

.trans-detail{display: none;}

tfoot td{ border-top: 1px solid #333;}

#meter-info{font-weight: bold; text-decoration: underline;}

#spinner{text-align:center; padding: 10px; }

/****************End Window/Table styles***************/



/****************Start Control styles***************/

#slider {width: 88%; margin: 10px 15px 0;}

.date-out{background-color: #FFFFFF; border: 0 none; color: #222222; font-weight: bold; text-align: right; width: 5em;}

#type-bill-show, #type-pay-show, #type-assist-show, #type-other-show{display:none;}

.toggle{font-weight: 800; height: 25px; padding: 2px; width: 25px;}

table.filter td{padding: 0 !important;}

table.filter .subtotal{text-align:right; width: 5em;}

/*#total-tool{border-top: 1px solid #222;}*/

select{width: 15.2em;}

input {margin: 0 10px 0 0 !important;}

.print {margin: 10px; text-align: center; vertical-align: middle;}

.print img {vertical-align: baseline;}

.print a {text-decoration: Nne; vertical-align: middle;}

.print atext {text-decoration: Nne; vertical-align: middle;}

.print.optional {display: none;}

.customForms{width: 750px !important;}

/****************Start Control styles***************/



/****************Start Miscellaneous styles***************/

.fr {float:right;}

.fl {float:left;}

/****************End Miscellaneous styles***************/



/****************Start Terms styles***************/

.terms {width: 75%;}

.terms h4{font-weight: bold; margin: 10px 0 !important; padding: 0 !important; font-size: 10px !important;}

.terms p{margin: 5px 0 10px 0 !important; padding: 0 !important; font-size: 10px !important;}

/****************End Terms styles***************/