/*
 *	colors:
 *	- #2B5DA7 darkblue
 *	- #E9F0FA lightblue
 */
@import url(global.css);

body 
{
	background:			#F2F2F2;
}

/* hide html templates */
#templates
{
	display:			none;
}
/**/

/*
**	=header
*/
#energy-calc #header 
{
	background:			#FFF;
	color:				#2B5DA7;
	padding:			15px 10px 10px;
}
#energy-calc #header h1 {
	font-size:			12px;
	font-weight:		normal;
	line-height:		12px;
}
#energy-calc #header h2 
{
	font-size:			24px;
	font-weight:		normal;
	line-height:		24px;
}
#energy-calc .options #btnPrint 
{
    /*
	position:			absolute;
	top:				12px;
	right:				10px;
	*/
}
/** END header **/

/* buttons */
a.btn {  
    background:         url(img/buttons/button_white_start.png) no-repeat;  
    color:              #000;
    display:			inline-block; 
    font-size:          12px;
    height:             20px;
    line-height:        20px;
    padding:            2px 19px 5px 13px; 
    position:           relative;
    text-decoration:    none;
}
a.btn b {
    background:         #FFF url(img/buttons/button_white_end.png) right top no-repeat;
    cursor:             pointer;
    height:             27px;
    position:           absolute;
    right:              -1px;
    top:                0;
    width:              10px;
}
a.btn.icon {
    padding:            2px 19px 5px 33px;    
}

a.btn:hover,
a.btn:focus,
a.btn:hover b,
a.btn:focus b 
{
	background-position:0 -27px;
}
a.btn:active,
a.btn:active b 
{
	background-position:0 -54px;
}	


/***** TYPE SELECTION *****/

/*
** =type list
*/
#energy-calc.type-selection dl {
	padding:			0 0 1px;
}
#energy-calc.type-selection dt {
	background:			#2B5DA7;
	color:				#FFF;
	font-weight:		bold;
	padding:			5px 15px;
}

#energy-calc.type-selection dd {
	border-top:			1px solid #FFF;
	border-left:		1px solid #FFF;
	float:				left;
	height:				180px;
	width:				204px;
}
#energy-calc.type-selection dd a {
	background:			#E9F0FA;
	background-position:15px 15px;
	background-repeat: 	no-repeat;
	color:				#404040;
	float:				left;
	font-size:			11px;
	height:				24px;
	line-height:		12px;
	text-align:			center;
	text-decoration:	none;
	padding:			150px 5px 6px;
	width:				194px;
}
#energy-calc.type-selection dd.television a{
	background-image:	url(img/types/television.jpg);
}
#energy-calc.type-selection dd.dvdvideo a{
	background-image:	url(img/types/dvd.jpg);
}
#energy-calc.type-selection dd.receiver a{
	background-image:	url(img/types/receiver.jpg);
}
#energy-calc.type-selection dd.homeentertainment a{
	background-image:	url(img/types/homeentertainment.jpg);
}
#energy-calc.type-selection dd.cooling a{
	background-image:	url(img/types/cooling.jpg);
}
#energy-calc.type-selection dd.dishwasher a{
	background-image:	url(img/types/dishwasher.jpg);
}
#energy-calc.type-selection dd.washer a{
	background-image:	url(img/types/washer.jpg);
}

#energy-calc.type-selection dd a:focus,
#energy-calc.type-selection dd a:hover {
	background-position:12px 12px;
	border:				3px solid #FFF;
	padding:			147px 2px 3px;
}
#energy-calc.type-selection dd a:active {
	position:			relative;
	top:				1px;
}
#energy-calc.type-selection dd a strong {
    display:            block;
}
/** END type list **/

/***** END TYPE SELECTION *****/


/***** CALCULATOR *****/

/*
**	=header
*/
#energy-calc.calculator #header h1 {
	/*
	display:			none;
	*/
}
#energy-calc.calculator #header h2 {
	font-size:			24px;
	font-weight:		normal;
	line-height:		24px
}
#energy-calc.calculator #header h2,
#energy-calc.calculator #header p 
{
	display:			inline;
}
#energy-calc #header p 
{
	font-size:			11px;
	padding:			0 15px;	
}
#energy-calc #header p a 
{
	color:				#2B5DA7;
}

#energy-calc #header #btnHelp
{	
	position:			absolute;
	top:				12px;
	right:				10px;
}
/** END header **/

/*
** =content
** =comparison table
*/
#content {
    background:         #FFF;
    overflow-y:         auto;
}
#energy-calc.calculator table {
	border-right:		1px solid #FFF;
	border-bottom:		1px solid #FFF;
	width:				100%;
}
#energy-calc.calculator th {
	background:			#2B5DA7;
	color:				#FFF;
	font-weight:		bold;
}
#energy-calc.calculator th span{
	font-size:			9px;
}
#energy-calc.calculator th,
#energy-calc.calculator td{
	border-top:			1px solid #FFF;
	border-left:		1px solid #FFF;
	padding:			10px;
	vertical-align: 	top;
}
#energy-calc.calculator td {
	background:			#E9F0FA;
}
#energy-calc.calculator td img {
	background:			#FFF;
	border:				1px solid #A7A6AA;
	float:				left;
	margin:				0 10px 0 0;
	max-height:			55px;
	max-width:			80px;
	
	
	
	padding:			1px;
}
* html #energy-calc.calculator td img {
	width:				50px;
	height:				auto;
}
#energy-calc.calculator td span {
	display:			block;
	font-weight:		bold;
}
#energy-calc.calculator td cite {
	color:				#B0B0B0;
	font-size:			9px;
}
#energy-calc.calculator table .product span.btnRemoveProduct 
{
	font-weight:		normal;
}
#energy-calc.calculator table .product cite 
{
	display:			none;
}
#energy-calc.calculator table .product a 
{
	color:				#404040;
}
#energy-calc.calculator table .product a:focus,
#energy-calc.calculator table .product a:hover 
{
	text-decoration:	none;	
}
#energy-calc.calculator table .product input 
{ 	
	width:				100%;
}
#energy-calc.calculator table .consumption {
	width:				280px;
}
#energy-calc.calculator table .consumption input 
{
	width:				50px;
}
#energy-calc.calculator table .costs 
{
	font-size:			11px;
	text-align:			right;
	width:				200px;
}
#energy-calc.calculator table .costs p {
	padding:			0 0 5px;
	white-space:		nowrap;
}
#energy-calc.calculator table .costs strong {
	font-size:			24px;
	font-weight:		normal;
}

/* .standby */
#energy-calc.calculator table.standby dt,
#energy-calc.calculator table.standby dd{
	float: 				left;
}
#energy-calc.calculator table.standby dt {
	font-weight:		bold;
	width:				60px;
}
#energy-calc.calculator table.standby dd {
	width:				60px;
}
/** END comparison table **/

/*
**	=toolbar
*/
#toolbar 
{
	background:			#FFF;
	padding:			10px;
	position:			relative;
}
#toolbar #btnAddEmptyProduct 
{
	margin:				0 15px 0 0;
}
/** END toolbar**/

/*
**	=footer
*/
#energy-calc.calculator #footer {
	background:			#F2F2F2;
	border-top:			2px solid #CCCCCC;
	font-size:			11px;
	position:			relative;
}
#energy-calc.calculator #footer strong {
	float:				left;
	position:			relative;
	width:				135px;
}

#energy-calc.calculator #footer cite {
	color:				#B0B0B0;
	font-size:			9px;
}


#energy-calc.calculator #footer div.usage 
{
	padding:			10px;
	position:			relative;	
}
#energy-calc.calculator #footer div.usage strong {
	height:				60px;
}
#energy-calc.calculator #footer #usage_years,
#energy-calc.calculator #footer #usage_hours {
	float:				left;
	margin-bottom:      20px;
	position:           relative;
}
#energy-calc.calculator #footer #usage_years {
	width:				200px;
	margin-right:       50px;
}
#energy-calc.calculator #footer #usage_hours {
	width:				400px;
}
#energy-calc.calculator #footer .usage .ui-slider  
{
	background:			url(img/slider/slider_bg.gif) repeat-x center center; 
	height:				23px;
	margin:				20px 0 0;
	position:			relative;
	width:				100%;   
}
#energy-calc.calculator #footer .usage .ui-slider-handle  
{
	background-image:	url(img/slider/slider-handle_grey.gif);
	height:				23px; 
	left:				0px; 
	position:			absolute; 
	text-decoration:	none;
	top:				0; 
	width:				12px; 
	z-index:			1;  
}
#energy-calc.calculator #footer .usage .ui-slider-handle-active
{
	background-image:	url(img/slider/slider-handle.gif);	
}
#energy-calc.calculator #footer .usage .ui-slider-handle-active .label
{
	color:				#2C5EA9 !important;	
}
#energy-calc.calculator #footer .usage .ui-slider-disabled .ui-slider-handle  
{ 
}
#energy-calc.calculator #footer .usage .ui-slider .label {
	color:				#2C5EA9;	
	font-size: 			11px;
	font-weight:		bold;
	height:				30px;	
	left:				0;
	padding:			0 0 0 2px;
	position:			absolute;
	text-align:			right;
	text-indent:		-9999px;
	top:				-16px;
	width:				100px;
}	
#energy-calc.calculator #footer .usage .ui-slider .label i 
{
	font-style:			normal;
	left:				-52px;
	position:			relative;
}
#energy-calc.calculator #footer .usage #usage_hours .ui-slider .label i
{
	left:				-35px;
}


#energy-calc.calculator #footer div.costs {
	clear:				left;
	float:				left;
	height:				20px;
	padding:			10px;
	position:			relative;
}
#energy-calc.calculator #footer div.costs strong{
	height:             30px;
}
#energy-calc.calculator #footer div.costs .show,
#energy-calc.calculator #footer div.costs .edit {
	margin-left:        135px;
}
#energy-calc.calculator #footer div.costs .edit {
    white-space:        nowrap;
	display:			none;
}
/** END footer **/

/***** END CALCULATOR *****/