/* layout.css */
@media screen {

body {
	margin:0;
	padding:0;
	text-align:center;
}
body #canvas {
	position:relative;
	top:-1px;
	width:769px;
/*
@retail conflict:
	width:775px;
*/
	margin:0 auto;
	text-align:left;
	border-top:1px solid #fff;
}
body.page-1024 #canvas {
	width:976px;
}
#contentcontainer {
	margin:156px 0 0 0;
/*
@retail conflict:
	margin:184px 0 0 0;
*/
}
	body.landingspage #contentcontainer {
		margin:100px 0 0 0;
	}
	body.page-1024 #contentcontainer {
		zoom:1;
		background:url("../images/backgrounds/contentcontainer.gif") top right repeat-y;
	}
	#contentcontainer #maincontent {
		position:relative;
		float:left;
		width:733px;
		z-index: 2;
	}
		#maincontent #h1container {
			background:url("../images/backgrounds/h1.gif") left bottom no-repeat;
			min-height:28px;
			padding:2px 0 15px 40px;
			font-family: 'FagoWeb','Trebuchet MS',verdana,arial,sans-serif;
/*
@retail conflict:
			padding:2px 0 15px 38px;
*/
		}
		#maincontent #pagecontainer {
			background:url("../images/backgrounds/content.gif") 0 0 repeat-y;
			padding:0 0 0 24px;
			position:relative;
			width:710px;
			z-index:1;
		}
			#maincontent #pagecontainer.overview,
			#maincontent #pagecontainer.comparison {
				margin:0;
			}
			#maincontent #pagecontainer.comparison {
				padding-top:26px;
/*
@retail conflict:
				padding-top:10px;
*/
			}
			#maincontent #pagecontainer #pagenavigation {
				position:absolute;
				top:10px;
				left:14px;
				width:700px;
				z-index:100;
/*
@retail conflict:
				z-index:200;
*/
				padding:0 0 0 20px;
				zoom:1;
			}	
			#maincontent #pagecontainer #contextual {
				float:left;
				position:relative;
				top:0;
				left:0px;
				width:233px;
				padding:30px 0 0 0;
			}
			#maincontent #pagecontainer #content {
				float:right;
				position:relative;
				top:30px;
				padding:10px 30px 20px 30px;
				margin:0 0 50px 0;
				width:417px;
			}
				#maincontent #pagecontainer.contentpagewide #content {
					float:none;
					margin-left:3px;
					padding-left:0;
					width:auto;
				}
				#maincontent #pagecontainer.contentpagewide #content {
					padding-left:0;
					width:auto;
				}
				#maincontent #pagecontainer .item,
				#maincontent #contextual .item {
					margin:0 0 10px 0;
					width:auto;
					min-height: 53px;
				}
				#maincontent #pagecontainer.application #contextual {
					padding-right:0;
					width:231px;
				}
				/* Customer group navigation */
				#maincontent #pagecontainer.customer-group #contextual {
					width:201px;
					padding:10px 10px 0 10px;
					border:1px solid #dedede;
					margin: 41px 0 10px 0;
					left: 10px;
				}				
				#maincontent #pagecontainer.application #content {
					border:1px solid #d7d7d7;
				}
				#maincontent #pagecontainer.overview #content,
				#maincontent #pagecontainer.comparison #content {
					margin-bottom:30px;
                                                                                padding-bottom:0px;
					padding-top:0px;
					padding-left:0px;
					padding-right:0px;
					top:10px;
					width:100%;
				}
				#maincontent #pagecontainer.extra #content {
					padding-top:30px;
				}
	#contentcontainer #subcontent {
		display: inline;
		float:left;
		padding:10px 0 0 0;
		width:755px;
		margin:10px 0 0 14px;
/*
@retail conflict:
		width:757px;
		margin:10px 0 0 10px;
*/
		background:url("../images/subcontent-bg-800.gif") 0 0 no-repeat;
	}
		body.page-1024 #canvas #subcontent {
			margin:0 0 0 10px;
			width:232px;
			border-top:1px solid #d8d8d8;
			background:none;
		}
		#contentcontainer #subcontent .column {
			float:left;
			width:223px;
		}
			body.page-1024 #contentcontainer #subcontent .column {
			float:none;
		}
			#contentcontainer #subcontent .column .item {
				margin:0 0 10px 10px;
			}

	/* contentcontainer fullwidth */
	body.page-1024 #contentcontainer.content-fullwidth {
		background: none;
	}
	
		body.page-1024 #contentcontainer.content-fullwidth #maincontent {
			float: none;
			width: 976px;
		}
			body.page-1024 #contentcontainer.content-fullwidth #maincontent #pagecontainer {
				width: 952px;
			}
			#contentcontainer.content-fullwidth #maincontent #h1container {
				background-image:url("../images/backgrounds/h1-fullwidth.gif");
			}
				#contentcontainer.content-fullwidth #maincontent #pagecontainer #contextual {
					float: none;
				}
				body.page-1024 #contentcontainer.content-fullwidth #maincontent #pagecontainer #contextual {
					float: left;
				}
				#contentcontainer.content-fullwidth #maincontent #pagecontainer #content {
					float: none;
					padding-left: 0;
					padding-right: 0;
					width: 690px;
				}
				body.page-1024 #contentcontainer.content-fullwidth #maincontent #pagecontainer #content {
					float: right;
				}
			


/* [C01] Logobar */
#logobar {
	position:absolute;
	top:30px;
	left:0;
	height:25px;
	width:100%;
	background:url('../images/backgrounds/nuon-logo-background.gif') 14px 0 no-repeat;
}

/* The class logobar is for the print, so isn't displayed on the webpage */
.logobar {
	display: none;
}

#logobar a img {
	padding: 0px 40px;
}

/* Rows */
div.row {
	clear:both;
	margin:0 0 10px 0;
}
	div.row.border {
		padding:10px;
		border:1px solid #d4d4d4;
	}
		div.row .column.xs-small,
		div.row .column.small,
		div.row .column.medium,
		div.row .column.wide,
		div.row .column.threefold {
			float:left;
			margin-right:10px;
			padding-bottom:0px;
		}
	div.row .column.threefold{width:710px;}
	div.row .column.last {
		margin-right:0 !important;
	}
	/* xs-small column */
	div.row .column.xs-small {
		width:192px;
	}
	/* small column */
	div.row .column.small {
		width:230px;
	}
	/* medium column */
	div.row .column.medium {
		width:350px;
	}
	/* wide column */
	div.row .column.wide {	
		width:470px;
	}		
	/* .application .row */
	.application div.row {
		margin: 0px;
	}
	#maincontent #pagecontainer.application div.row #content {
		border: none;
		padding: 0;
	}
	.application div.row .column.small {
		margin-right:0;
		margin-top: 40px;
	}
	/* multiple columns in application page */
	.application .row .column.small .box-content h3 {
		width: auto;
	}
	/* .contentpage */
	.contentpage div.row .column.small {	

		width:139px;
	}
	/* medium column .application / .contentpage */
	.application div.row .column.medium,
	.contentpage div.row .column.medium {
		width:203px;
	}
	.application .border .column.medium,
	.contentpage .border .column.medium,
	.contentpage .box-content div.row .column.medium {
		width:191px;
	}
	/* 4 columns */
	div.row.columns4 .column.small {
		width: 172px;
	}
	
/* row video */
div.row-video {}
div.row-video .column.xs-small { margin: 0; width: 184px; }
div.row-video .last { float: right;	width: 212px; }


/* clearfix */
#maincontent #pagecontainer:after,
#maincontent #pagecontainer #contextual:after,
#contentcontainer:after,
#content div.row:after,
#maincontent #pagecontainer .item:after,
#maincontent #contextual .item:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
/*overlay*/
#overlay {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%; /* scripted */ 
	background:black;
	display:none;
	z-index:999;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
	-moz-opacity:0.2;
	opacity:0.2;	
}

/*iframe*/

#content-frame {
	margin:10px 0 0;
	border:0;
	width:100%;
}


/* text input for filtering selects.
Selector Inflator was here! */
form fieldset span.DCselect input.choiceSearchStatus,
form fieldset div.field span.DCselect input.choiceSearchStatus {
	left:-10000px;
	padding-bottom:1px;
	padding-left:4px;
	padding-right:0;
	padding-top:1px;
	position:absolute;
	width: 182px !important;
	z-index: 10;
} 

/* No navigation application page */
body #canvas.nonav {
	width: auto;
	border-top: none !important;
	top: 0 !important;
}
.nonav #header,
.nonav #h1container,
.nonav #contentcontainer #subcontent,
.nonav #maincontent #pagecontainer #pagenavigation,
.nonav #footer,
.nonav #navigation {
	display: none;
	height: 0;
	width: 0;
}
.nonav #contentcontainer {
	background: none !important;
	padding: 0 !important;
	width: auto;
	margin: 0;
}
.nonav #contentcontainer #maincontent {
	width: auto;
}
.nonav #contentcontainer #maincontent #pagecontainer {
	background: none;
	padding: 0;
	width: auto;
}
.nonav #maincontent #pagecontainer #content {
	border: none !important;
	padding: 0;
	margin: 0;
	top: 0;
	width: 400px;
}

.nonav #maincontent #content form fieldset div.field, div.fieldcontainer div.field {
	padding:3px 5px;
}

.nonav #maincontent #content form fieldset input, #maincontent #content form fieldset textarea {
	width: auto;
}

.nonav #maincontent #content form fieldset a.help, form fieldset span.errormessage {
	width: auto;
}
	


/* New colored buttons */
a.nuon-button {
	color:#FFF;
	float: right;
}

.nuon-button table, .nuon-button tr, .nuon-button td {
	margin: 0px;
	border: 0px none;
	width: 0px;
	height: 0px;
	border-spacing:0;
	empty-cells: show;
	padding: 0px;
}

.nuon-button table {
	padding: 0px 0px 0px 0px;
	/* special cursor fix for IE */
	cursor: pointer;
}

.nuon-button tr  {
	padding: 0px;
}

.nuon-button tr td {
	padding: 0px;
	overflow: hidden;
}

.nuon-button tr td span{
	overflow: hidden;
	width: 8px;
	height: 8px;
	display:block;
	padding: 0px;
}

.nuon-button .tl {
	background: 0 0 no-repeat scroll url(../images/buttons/button-shadow-tl.png);
}

.nuon-button .tc {
	background: 0 0 repeat-x scroll url(../images/buttons/button-shadow-tc.png);
}

.nuon-button .tr {
	background: 0 0 no-repeat scroll url(../images/buttons/button-shadow-tr.png);
}

.nuon-button .ml {
	background: 0 0 repeat-y scroll url(../images/buttons/button-shadow-ml.png);
}

.nuon-button .mr {
	background: 0 0 repeat-y scroll url(../images/buttons/button-shadow-mr.png);
}

.nuon-button .mc div {
	white-space: nowrap;
	display: inline;
}

.nuon-button .mc {
	background: 0 0 no-repeat scroll url(../images/buttons/button-back-black.png);
	color: white;
	padding: 9px 12px 10px 22px;
	font-family:Verdana,Arial,sans-serif;
	font-size:11px;
	line-height:1.31em;
	font-weight:bold;
	height: auto;
	width: auto;
}

.nuon-button .mc.small{
	background: 0 0 no-repeat scroll url(../images/buttons/button-back-black-small.png);
	padding: 2px 12px 3px 22px;
}
	
.nuon-button .bl {
	background: 0 0 no-repeat scroll url(../images/buttons/button-shadow-bl.png);
}

.nuon-button .bc {
	background: 0 0 repeat-x scroll url(../images/buttons/button-shadow-bc.png);
}

.nuon-button .br {
	background: 0 0 no-repeat scroll url(../images/buttons/button-shadow-br.png);
}

}