/**
 * comp: page
 */

@media all {
	.homepage {
		background-color: #f2f2f2;
	}
	#ui {
        background-position 0 0;
        background-repeat: no-repeat;
		margin: 0 auto;
		max-width: 168em;
		min-width: 94em;
	}
	.homepage #ui {
        background-position: 50% 0;
		max-width: none;
	}

	/* wrapper for width and centering */
	#ui .wrapper {
		margin: 0 auto;
		width: 94em;
	}

	/* header */
	#ui .wrapper > header {
		padding-top: .8em;
	}	

	/* main content + sidebar */
	#ui #main {
		clear: both;
		margin-top: 4em;
		position: relative;
	}
	.homepage #ui #main {
        padding-top: 38.5em;
	}
	
	.productpage #ui #main {
        padding-top: 35em;
	}
	#ui aside {
		clear: both;
		float: left;
		position: relative;
		width: 20em;
	}
    #ui #main > article {
    	float: right;
		position: relative;
		width: 70em;
    }
    #ui #main > article.no-sidebar {
    	float: none;
		width: 100%;
    }

	/* footer */
	#ui > footer {
		background-position: 0 0;
		background-repeat: no-repeat;
		clear: both;
		margin-top: 4em;
		padding: 20em 0 7em;
	}
	.ie7 #ui > footer {
		padding-bottom: 4em;
		position: relative;
	}
	.homepage #ui > footer {
		background: #f2f2f2 none;
		margin-top: 2.5em;
		padding-top: 0;
	}
	.homepage #ui > footer .wrapper {
		background: url(/etc/designs/persil/components/page/img/bg-footer-hp.png) no-repeat 0 0;
		padding-top: 3.5em;
	}
}

/**
 * comp: logo
 */

@media all {
	#ui .wrapper header .logo {
		position: absolute;
		top: 22px;
	}
	#ui footer .logo {
		float: right;
		padding-left: 1em;
	}
}

/**
 * comp: image
 */

@media all {
	/* link */
	#ui .image a {
		background-color: transparent !important;
		display: block;
	}
	#ui .image a:link,
	#ui .image a:visited {
		text-decoration: none !important;
	}
	/* image caption */
	#ui .image small {
		clear: both;
		display: block;
		font-size: 1.2em;
		font-weight: bold;
		line-height: 1.167;
		margin-top: .833em;
	}
	#ui .image a:hover small,
	#ui .image a:active small,
	#ui .image a:focus small {
		text-decoration: underline;
	}
	/* zoom icon */
	#ui .image.zoom a {
		position: relative;
	}
	#ui .image.zoom a span.magnifier {
		background-image: url(/etc/designs/persil/components/image/img/magnifier.png);
		background-repeat: no-repeat;
		background-position: 0 0;
		height: 20px;
		left: 0;
		opacity: .8;
		position: absolute;
		top: 0;
		visibility: hidden;
		width: 20px;
	}
	#ui .image.zoom a:hover span.magnifier {
		visibility: visible;
	}
}

/**
 * comp: input-box
 */

@media all {
	#ui .search.input-box {
		float: right;
		margin: 0 1em 1.1em 0;
	}

	#ui .search.input-box input.searchfield {
		-webkit-appearance: textfield;
		border-style: solid;
		border-width: 2px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px 12px 12px 12px;
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		display: block;
		float: left;
		font-size: 11px;
		height: 15px;
		margin-right: .273em;
		padding: .091em .455em;
		position: relative;
		width: 130px;
	}

	#ui .search.input-box input.searchbutton {
		background-position: 5px -2398px;
		background-repeat: no-repeat;
		border: none;
		display: block;
		float: left;
		height: 20px;
		line-height: 25px;
		margin: 0;
		padding: 0;
		text-indent: -999em;
		width: 25px;
	}
}

/**
 * comp: languageswitch
 */

@media all {
	#ui .languageswitch {
		float: right;
		margin: .5em 1.4em 0 0;
	}
	#ui .languageswitch li a {
		border-left: 1px solid #8c8a84;
		color: #898887;
		font-weight: bold;
		padding: 0 .4em;
		text-transform: uppercase;
	}
	#ui .languageswitch li:first-child > a {
		border: none;
	}
	#ui .languageswitch li.current a,
	#ui .languageswitch li a:hover {
		color: #4c4c4c;
		text-decoration: none;
	}
	#ui .languageswitch li a:active,
	#ui .languageswitch li a:focus,
	#ui .languageswitch li.current a:active,
	#ui .languageswitch li.current a:focus {
		background-color: #4c4c4c;
		color: #fff;
	}
}

/**
 * comp: meta-nav
 */

@media all {
	#ui .meta-nav {
		float: right;
		margin: .5em 1.4em 0 0;
	}
	#ui .meta-nav li a {
		border-left: 1px solid #8c8a84;
		color: #898887;
		font-weight: bold;
		padding: 0 .4em;
		text-transform: uppercase;
	}
	#ui .meta-nav li:first-child > a {
		border: none;
	}
	#ui .meta-nav li a:hover {
		color: #4c4c4c;
		text-decoration: none;
	}
	#ui .meta-nav li a:active,
	#ui .meta-nav li a:focus {
		background-color: #4c4c4c;
		color: #fff;
	}
}

/**
 * comp: facebook
 */

@media all {
	#ui .facebook {
		float: right;
		margin: 0 .5em 0 0;
	}
	#ui .facebook iframe {
		height: 21px;
		width: 130px;
	}
}

/**
 * comp: twitter
 */

@media all {
	#ui .twitter {
		float: right;
		margin: 0 .5em 0 0;
	}
}

/**
 * comp: main-nav
 */

@media all {
	#ui .main-nav {
		clear: both;
		float: right;
	}
	.ie7 #ui .main-nav {
		position: relative;
		width: 100%;
		z-index: 100;
	}
	.ie7 #ui .main-nav .h-nav {
		float: right;
	}

	/* first level */
	#ui .main-nav li {
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		list-style-type: none;
		position: relative;
	}
	/*
	 * The way PIE works is it inserts an element as previous-sibling to the target element. 
	 * So all of a sudden, PIE's element is the first-child rather than your first li element!	 
	 * The problem is easily fixed if you add an additional selector to your CSS:#ui .main-nav css3-container:first-child + li 
	 */
	#ui .main-nav css3-container:first-child + li,
	#ui .main-nav li:first-child {
		-webkit-border-top-left-radius: 17px;
		-webkit-border-bottom-left-radius: 17px;
		-moz-border-radius: 17px 0 0 17px;
		border-radius: 17px 0 0 17px;
	}
	#ui .main-nav li:first-child > a {
		padding-left: 15px;
	}

	#ui .main-nav li.last {
		-webkit-border-top-right-radius: 17px;
		-webkit-border-bottom-right-radius: 17px;
		-moz-border-radius: 0 17px 17px 0;
		border-radius: 0 17px 17px 0;	
	}
	#ui .main-nav li.last > a {
		background-image: none;
		padding-right: 15px;
	}

	#ui .main-nav li a {
		background-position: 100% 0;
		background-repeat: no-repeat;
		font-size: 1.4em;
		font-weight: bold;
		height: 34px;
		line-height: 34px;
		padding: 0 .786em;
		white-space: nowrap;
	}
	#ui .main-nav li a:hover {
		text-decoration: none;
	}
	#heli .main-nav a:active,
	#heli .main-nav a:focus{
		background: none;
	}


	/* indicator */
	#ui .main-nav .indicator {
		background: url(/etc/designs/persil/common/img/gui.png) no-repeat -176px 0 transparent;	
		bottom: 0;
		height: 7px;
		left: 50%;
		margin-left: -10px;
		position: absolute;
		width: 20px;
		z-index: 1;
	}

	/* second level */
	#ui .main-nav li .dropdown {
		/* help IE */
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		z-index: 100;
	}

	.no-js #ui .main-nav li:hover .dropdown {
		left: auto;
		right: 0;
	}

	#ui .main-nav li .dropdown li {
		border-style: solid;
		border-width: 1px;
		background: none;
		-pie-background: none;
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		filter: none;
		float: none;
		height: 40px;
		margin: -1px 0 0 -1px;
	}
	#ui .main-nav li .dropdown li.float-left {
		float: left;
	}

	#ui .main-nav li .dropdown li a {
		background-repeat: no-repeat;
		background-position: 15px -1186px;
		font-weight: normal;
		height: 40px;
		line-height: 40px;
		margin: 0;
		padding: 0 15px 0 32px;
		text-decoration: none;
		text-shadow: none;
		white-space: nowrap;
	}
}

/**
 * comp: stage
 */

@media all {
	#ui .stage {
		clear: both;
		margin-bottom: 4em;
		text-align: right;
	}
	.homepage #ui .stage,
	.productpage #ui .stage {
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	/* claim */
	#ui .stage .claim {
		padding-right: 1em;
	}

	/* headlines */
	#ui .stage h2 {
		font-size: 3em;
		font-weight: bold;
		line-height: 1.133;
		margin-bottom: .333em;
	}
	#ui .stage h3 {
		font-size: 1.8em;
		line-height: 1.222;
		margin-bottom: .556em;
	}

	/* image */
	#ui .stage img {
		-webkit-border-radius: .5em;
		-moz-border-radius: .5em;
		border-radius: .5em;
		-webkit-box-shadow: 0 20px 15px -10px #505050;
		-moz-box-shadow: 0 20px 15px -10px #505050;
		box-shadow: 0 20px 15px -10px #505050;
		margin: auto;
	}
	#ui .stage.no-shadow img {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
}
/**
 * comp: sub-nav
 */

@media all {
	#ui .sub-nav {
		background: url("/etc/designs/persil/common/img/bottom-cap.png") no-repeat -940px 100% transparent;
		margin-bottom: 15px;
		padding-bottom: 10px;
		overflow: hidden;
	}
	
	#ui .sub-nav li {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		font-size: 13px;
		line-height: 18px;
		margin: 0;
		padding-left: 10px;		
	}

	/*
	 * The way PIE works is it inserts an element as previous-sibling to the target element. 
	 * So all of a sudden, PIE's element is the first-child rather than your first li element!	 
	 * The problem is easily fixed if you add an additional selector to your CSS:#ui .main-nav css3-container:first-child + li 
	 */
	#ui .sub-nav css3-container:first-child + li,
	#ui .sub-nav li:first-child {
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
		-moz-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
	}

	#ui .sub-nav li.last {
		border: none;
		-webkit-border-bottom-left-radius: 5px;
		-webkit-border-bottom-right-radius: 5px;
		-moz-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px;
	}

	#ui .sub-nav li a {
		background-repeat: no-repeat;
		background-position: 100% -1589px;
		display: block;
		font-weight: bold;
		line-height: 16px;
		padding: 10px 30px 11px 16px;
		text-decoration: none;
	}
	#ui .sub-nav li.current a {
		cursor: default;
	}

	.ie7 #ui .sub-nav ul {
		height: 100%;
	}
	.ie7 #ui .sub-nav li,
	.ie8 #ui .sub-nav li {
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		height: 1%; 	
		position: relative; /*needed by PIE.htc*/
	}
	.ie7 #ui .sub-nav li a {
		height: 1%;
	}
}

/**
 * comp: title
 */

@media all {
	#ui .title {
	    margin-bottom: 3em;
	}
	#ui .title h2 {		
		font-size: 3em;
		line-height: 1.133;
		margin-bottom: .133em;
	}
	#ui .title h3 {
		font-size: 2em;
		line-height: 1.2;
		margin-bottom: .5em;
	}	
}
/**
 * comp: textimage
 */

@media all {
	#ui .textimage {
		clear: both;
		margin-bottom: 1em;
	}
	/* headlines */
	#ui .textimage h2 {
		font-size: 3em;
		line-height: 1.133;
		margin: 0 0 0.833em;
	}
	#ui .textimage h3 {
		font-size: 2em;
		line-height: 1.2;
		margin: 0 0 .8em;
	}
	#ui .textimage h4 {
		font-size: 1.8em;
		line-height: 1.222;
		margin: 0 0 0.55em;
	}
	#ui .textimage h5 {
		font-size: 1.4em;
		font-weight: bold;
		line-height: 1.143;
		margin-bottom: .214em;
	}
	/* footnotes */
	#ui .textimage .footnote {
		font-size: 0.8em;			
	}
	/* inverted styles */
	#ui .textimage .inverted {
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		display: inline-block;		
	}
	#ui .textimage h2 .inverted {
		margin-left: -.333em;
		padding: 0 .333em .067em;
	}
	#ui .textimage h3 .inverted {
		margin-left: -.5em;
		padding: 0 .5em .1em;
	}
	#ui .textimage h4 .inverted {
		margin-left: -.556em;
		padding: 0 .556em .111em;
	}
	#ui .textimage h5 .inverted {
		margin-left: -.714em;
		padding: 0 .714em .143em;
	}
	#ui .textimage p .inverted {
		background-color: transparent !important;
		color: inherit !important;
		display: inline !important;
	}
	/* text */
	#ui .textimage p {
		font-size: 1.4em;
		line-height: 1.429em;
		margin-bottom: 1.143em;
	}
	/* lists */
	#ui .textimage ul {
		margin-left: 1.5em;
		margin-bottom: 2.6em;		
	}
	#ui .textimage ol {
		margin-left: 2em;
		margin-bottom: 1.6em;
	}	
	#ui .textimage li {
		font-size: 1.4em;
		line-height: 1.571;
	}
	#ui .textimage ul li {
		margin-bottom: 0.357em;
	}
	#ui .textimage li p,
	#ui .textimage li li {
		font-size: 1em;
	}
	/* image */
	#ui .textimage img {
		margin-bottom: 1em;
		max-width: 100%;
	}
	#ui .textimage.image-left > .image {
		clear: left;
		float: left;
		margin-right: 2.5em;
	}
	#ui .textimage.image-right > .image {
		clear: right;
		float: right;
		margin-left: 2.5em;
		margin-right: 0;
	}
	#ui .textimage.image-full > .image {
		clear: both;
		float: none;
		margin-right: 0;
	}
	/* image sizes */
	#ui .textimage.image-size10 > .image {
		width: 10%;
	}
	#ui .textimage.image-size20 > .image {
		width: 20%;
	}
	#ui .textimage.image-size25 > .image {
		width: 25%;
	}
	#ui .textimage.image-size33 > .image {
		width: 33%;
	}
	#ui .textimage.image-size50 > .image {
		width: 50%;
	}
	/* image content */
	#ui .textimage.image-right > .image a,
	#ui .textimage.image-right > .image img {
		float: right;
	}
	.ie7 #ui .textimage.image-right > .image a{
		text-align: right;
	}
	#ui .textimage.image-right > .image.zoom a span.magnifier {
		left: auto;
		right: 0;
	}
	/* column style content */
	#ui .textimage.image-left > .textimage-text {
		padding-left: 2.5em;
	}
	#ui .textimage.image-left.image-size10 > .textimage-text {
		margin-left: 10%;
	}
	#ui .textimage.image-left.image-size20 > .textimage-text {
		margin-left: 20%;
	}
	#ui .textimage.image-left.image-size25 > .textimage-text {
		margin-left: 25%;
	}
	#ui .textimage.image-left.image-size33 > .textimage-text {
		margin-left: 33%;
	}
	#ui .textimage.image-left.image-size50 > .textimage-text {
		margin-left: 50%;
	}
	#ui .textimage.image-right > .textimage-text {
		padding-right: 2.5em;
	}
	#ui .textimage.image-right.image-size10 > .textimage-text {
		margin-right: 10%;
	}
	#ui .textimage.image-right.image-size20 > .textimage-text {
		margin-right: 20%;
	}
	#ui .textimage.image-right.image-size25 > .textimage-text {
		margin-right: 25%;
	}
	#ui .textimage.image-right.image-size33 > .textimage-text {
		margin-right: 33%;
	}
	#ui .textimage.image-right.image-size50 > .textimage-text {
		margin-right: 50%;
	}
	/* links */
	#ui .textimage a:link,
	#ui .textimage a:visited {
		text-decoration: underline;
	}
	#ui .textimage a:hover,
	#ui .textimage a:active,
	#ui .textimage a:focus {
		text-decoration: none;
	}
	/* links with icon */
	#ui .textimage a.icon-link:link,
	#ui .textimage a.icon-link:visited {
		text-decoration: none;
	}
	#ui .textimage a.icon-link:hover .ic,
	#ui .textimage a.icon-link:active .ic,
	#ui .textimage a.icon-link:focus .ic {
		text-decoration: underline;
	}
	#ui .textimage a .ic {		
		font-weight: bold;		
	}

	
	.ie7 #ui .textimage .inverted,
	.ie8 #ui .textimage .inverted {
		position: relative;
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
	}
	
	.ie7 #ui .textimage p .inverted {		
		color: #FFFFFF;		
	}
	.ie7 #ui .white .textimage p .inverted,
	.ie7 #ui .textimage.white p .inverted {		
		color: #137625;		
	}
	
	
}

/**
 * comp: table
 */

@media all {
	#ui .table {		
	    font-size: 13px;
    	line-height: 18px;
	}	
	#ui .table th {	
		border: 1px solid transparent;
		font-size: 14px;
	    font-weight: bold;
	    padding: 6px 0 6px 30px;
		text-align: left;
	    text-transform: uppercase;	
		
	}
	#ui .table td {
		border: 1px solid transparent;
		padding: 1px 0 1px 30px;
	}	
	.productpage #ui .table th,
	.productpage #ui .table td {
		padding-left: 0;
		padding-right: 10px;
	}
}
/**
 * comp: panel
 * description: wrapper box for various components. Can define look&feel of included components. 
 */

@media all {
	#ui .panel {
		margin-bottom: 2em;
	}


	/**
	 * settings
	 * - color "theme" (dropdown) -> sets solid background
	 * - border (full/bottom/no) -> bottom border not possible to combine with panel-solid
	 * - gradient (yes/no) -> not possible to combine without panel-solid
	 * - panel shadow? (yes/no) -> not possible to combine without panel-solid
	 * - animation type (slide/fade)
	 * - default body state (open/close) 
	 */
	/* border */
	#ui .panel.panel-border {
		border-style: solid;
		border-width: 1px;
	}
	#ui .panel.panel-bottom-border {
		background: url(/etc/designs/persil/common/img/divider-h.png) repeat-x 0 100%;
		padding-bottom: 3em;
	}
	#ui #sidebar .panel.panel-solid.panel-bottom-border {
		padding-bottom: 2em;
	}
	#ui .panel.panel-solid.panel-bottom-border {
		background-image: none;
	}
	/*  solid */
	#ui .panel.panel-solid {		
		-webkit-border-radius: .5em;
		-moz-border-radius: .5em;
		border-radius: .5em;		
		padding: 2em 3em;
		position: relative;
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
	}
	#ui #sidebar .panel.panel-solid {
		padding: 1em 2em;
	}
	#ui .panel.panel-solid.panel-expandable {
		padding-bottom: 0;
	}
	.ie7 #ui .panel.panel-solid.panel-expandable {
		padding-top: 0;
	}
	/*  shadow (only on solid panel) */
	#ui .panel.panel-solid.panel-shadow {
		-moz-box-shadow: 0 12px 5px -10px #505050;
		-webkit-box-shadow: 0 12px 5px -10px #505050;		
		box-shadow: 0 12px 5px -10px #505050;
	}
	/*  gradient (only on solid panel) */
	#ui .panel.panel-solid.gradient {
		background-position: 0 100%;
		background-repeat: repeat-x;
	}

	/**
	 * jump target
	 */
	#ui .panel > a.jump {
		display: block;
		position: absolute;
		top: -2em;
	}

	/**
	 * header
	 */
	#ui .panel > header h3 {
		font-size: 1.8em;
		line-height: 1.222;
	}
	#ui .panel > header p {
		font-size: 1.4em;
		line-height: 1.143;
		margin-top: .5em;
	}
	#ui .panel > header .image {
		float: left;
		margin: 0 1em 0 0;
	}
	/* solid header */
	#ui .panel.panel-solid > header {
		background: url(/etc/designs/persil/common/img/divider-h.png) repeat-x 0 100%;
		margin-bottom: 2em;
		padding-bottom: 1em;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
	}
	/* expandable header */
	#ui .panel.panel-expandable > header {
		cursor: pointer;
		margin-bottom: 0;
		position: relative;
		text-decoration: underline;
	}
	#ui .panel.panel-expandable > header.hover {
		text-decoration: none;
	}
	#ui .panel.panel-solid.panel-expandable > header {
		background-image: none;
		-webkit-border-radius: .5em;
		-moz-border-radius: .5em;
		border-radius: .5em;	
		margin: -2em -3em 0;
		padding: 0 6em 0 11em;
		text-decoration: none;
		text-shadow: none;
	}
	.ie7 #ui .panel.panel-solid.panel-expandable > header {
		margin-top: 0;
	}
	.ie7 #ui .panel.panel-solid.panel-expandable > header,
	.ie8 #ui .panel.panel-solid.panel-expandable > header {
		position: relative;
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
	}
	#ui #sidebar .panel.panel-solid.panel-expandable > header {
		margin: -1em -2em 0;
		padding: 0 2em 1em;
	}
	#ui .panel.panel-expandable > header .icon {
		background-repeat: no-repeat;
		background-position: 0 -800px;
		display: block;
		float: left;
		height: 25px;
		margin-right: 5px;
		width: 25px;
	}
	#ui .panel.panel-solid.panel-expandable > header .icon {
		margin-right: 0;
		position: absolute;
		right: 2em;
		top: 2.2em;
	}
	#ui .panel.panel-solid.panel-expandable > header .image {
		float: none;
		left: 0;
		margin: 0;
		position: absolute;
		top: -.7em;
	}
	#ui .panel.panel-solid.panel-expandable > header h3 {
		font-weight: bold;
		padding: 1.222em 0;
	}
	#ui .panel.panel-solid.panel-expandable > header p {
		margin-top: -1em;
		padding-bottom: .714em;
	}


	/**
	 * body
	 */
	#ui .panel.panel-closed > .panel-body {
		display: none;
	}
	#ui .panel.panel-solid.panel-expandable > .panel-body {
		padding: 2em 0;
	}
	#ui #sidebar .panel.panel-solid.panel-expandable > .panel-body {
		padding 1em 0;
	}
	/* body with fading children */
	#ui .panel.panel-fade > .panel-body {
		position: relative;
	}
	#ui .panel.panel-fade > .panel-body > .children-fade {
		position: absolute;
		top: 0;
		z-index: 10;
	}
}

/**
 * comp: panelgroup
 * description: wrapper for multiple panels 
 */

@media all {
	#ui .panelgroup .panel p.panel-nav {
		font-size: 1.3em;
	    font-weight: bold;
	    padding-top: 1em;
	}
	#ui .panelgroup .panel p.panel-nav .next {
		bottom: -.5em;
		position: relative;
	}
	#ui .panelgroup .panel p.panel-nav > .ic {		
		display: inline-block;	
		line-height: normal;	
	}
}

/**
 * comp: faqpanel
 * description: list of toggleable faqs 
 */

@media all {
	#ui .faqpanel ol.faq-list {
		margin-left: 2.7em;
	}
	#ui .faqpanel ul.faq-list {
		margin-left: 1.4em;
	}
	#ui .faqpanel ol.faq-list > li,
	#ui .faqpanel ul.faq-list > li {
		font-size: 1.4em;
		font-weight: bold;
		line-height: 1.0;
	}
	/*second level inside ol*/
	#ui .faqpanel ol.faq-list > li ul li {
		list-style-type: disc;
	}
	#ui .faqpanel details {
		font-weight: normal;
	}
	#ui .faqpanel details summary {
		display: block;
		font-weight: bold;
		line-height: 1.286;
		padding-bottom: .286em;
	}
	#ui .faqpanel details summary:hover {
		cursor: pointer;
		text-decoration: underline;
	}
	#ui .faqpanel details div {
		font-size: .714em; /* reset to base font-size */
		padding-top: .5em;
	}
	.no-js #ui .faqpanel details div {
		display: block;
	}
}

/**
 * comp: labelslegend
 * description: list of washing symbols with description 
 */

@media all {
	#ui .labelslegend ul.labels-list {
		list-style: none;
		margin: 0 -.5em;
	}
	#ui .labelslegend ul.labels-list > li {
		float: left;
		list-style: none;
		margin: 0 2px 2px 0;
	}

	#ui .labelslegend summary {
		position: relative;
	}
	#ui .labelslegend summary:hover {
		cursor: pointer;
	}
	/* symbol */
	#ui .labelslegend summary img {
		border: 2px solid transparent;
		-webkit-border-radius: 11px;
		-moz-border-radius: 11px;
		border-radius: 11px;
		padding: 2px 1px 1px 2px;
	}
	#ui .labelslegend .current summary img {
		border-color: #fff;
		box-shadow: 0 0 10px #fff;
	}
	#ui .labelslegend summary .overlay {
		background: transparent url(/etc/designs/persil/common/img/gui.png) no-repeat -150px -150px;
		display: none;
		height: 72px;
		left: 4px;
		position: absolute;
		top: 4px;
		width: 72px;
	}
	#ui .labelslegend .current summary .overlay,
	#ui .labelslegend summary:hover .overlay {
		display: block;
	}

	/* description */
	#ui .labelslegend div.description-container {
		background-color: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #575757;
		margin-top: .5em;
		padding: 1em 1.4em .1em;
	}
	/* overwrite inner components sstyles */
	#ui .labelslegend div.description-container .textimage,
	#ui .labelslegend div.description-container .image img {
		margin-bottom:  0;
	}
	#ui .labelslegend div.description-container .textimage h4 {
		margin-top:  0;
	}
}

/**
 * comp: form
 */

@media all {	

	/* headlines */
	#ui .form h3 {
		font-size: 1.8em;
		line-height: 22px;
		margin-bottom: 20px;
	}

	/* links */
	#ui .form form a:link,
	#ui .form form a:visited {
		text-decoration: underline;
	}
	#ui .form form a:hover,
	#ui .form form a:active,
	#ui .form form a:focus {
		text-decoration: none;
	}

	/* form */
	#ui .form form {
		overflow: visible;
		padding: 0 0 5px;
	}
	#ui .form fieldset {
		font-size: 13px;
		line-height: 18px;
		margin-bottom: 10px;
	}

	#ui .form form .row {
		clear: both;
	}
	
	#ui .form p {
		font-size: 13px;
		line-height: 18px;
	}
	#ui .form p.hint {
		clear: both;
		font-size: 10px;
		line-height: 12px;
	}

	/* form elements */	
	#ui .form label {
		cursor: pointer;
		display: block;
		margin-bottom: 4px;
		padding-left: 1px;
		vertical-align: bottom;
	}

	#ui .form form .item {
		float: left;
		height: 55px;
		margin-left: 15px;
	}
	#ui .form form .item:first-child {
		margin-left: 0;
	}
	#ui .form .text input, 
	#ui .form .select select,
	#ui .form .textarea textarea {
		font-size: 11px;
		margin-bottom: 6px;
	}

	#ui .form .text input,
	#ui .form .textarea textarea {
		border-style: solid;
		border-width: 2px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		display: block;
		padding: 1px 5px;
	}	

	#ui .form .text input {
		height: 15px;
		width: 196px;
	}
	#ui .form .long-text input {
		width: 421px;
	}
	#ui .form .textarea textarea {
		height: 92px;
		padding-right: 2px;
		width: 424px;
	}
	#ui .form .select p {
	  	-webkit-border-radius: 12px;
	  	-moz-border-radius: 12px;
	  	border-radius: 12px;
		height: 18px;
		overflow: hidden;
		padding: 1px 5px 0;
	}
	#ui .form .select select {
		border: none;
		height: 16px;
		width: 201px;   
	}
	#ui .form .select select option {
		height: 18px;
		padding-top: 4px;
	}	


	/* data privacy check */
	#ui .form .fsInfo {
		padding-left: 20px;
		font-size: 11px;
	}	
	#ui .form .fsInfo div {
		margin-bottom: 6px;
	}
	#ui .form .fsInfo input, 
	#ui .form .fsInfo .styledCheckbox {
		float: left;
		margin-left: -20px;
	}	
	#ui .form .fsInfo label {
		display: inline;
	}
	
	
	/*Checkboxes and Radiobuttons*/
	#ui .form .styledCheckbox,
	#ui .form .styledRadio {
		background-repeat: no-repeat;
		margin-right: 6px;
		width: 18px;
	}
	#ui .form .styledRadio {
		background-position: -120px 0;
		display: inline-block !important;
		height: 18px;
		vertical-align: top;
	}
	#ui .form .styledRadioChecked {
		background-position: -120px -20px;
	}
	#ui .form label.hover .styledRadio, 
	#ui .form .styledRadio.active {
		background-position: -150px 0;
	}
	#ui .form label.hover .styledRadioChecked, 
	#ui .form .styledRadioChecked.active {
		background-position: -150px -20px;
	}
	#ui .form label.disabled .styledRadio {
		background-position: -180px 0;
	}
	#ui .form label.disabled .styledRadioChecked {
		background-position: -180px -20px;
	}
	#ui .form label.error .styledRadio {
		background-position: -210px 0;
	}
	#ui .form label.error .styledRadioChecked {
		background-position: -210px -20px;
	}	
	#ui .form .styledCheckbox {
		background-position: 0 0;
		height: 16px;
		display: block;
		display: none !important;
		display: inline-block !important;
		vertical-align: middle;
		margin-top: 1px;
	}
	#ui .form .styledCheckboxChecked {
		background-position: 0 -20px;
	}
	#ui .form label.hover .styledCheckbox, 
	#ui .form .styledCheckbox.active {
		background-position: -30px 0;
	}
	#ui .form label.hover .styledCheckboxChecked, 
	#ui .form .styledCheckboxChecked.active {
		background-position: -30px -20px;
	}
	#ui .form label.disabled .styledCheckbox {
		background-position: -60px 0;
	}
	#ui .form label.disabled .styledCheckboxChecked {
		background-position: -60px -20px;
	}
	#ui .form label.error .styledCheckbox {
		background-position: -90px 0;
	}
	#ui .form label.error .styledCheckboxChecked {
		background-position: -90px -20px;
	}
	

	/* submit button */
	#ui .form .submit {
		clear: both;
		overflow: hidden;
	}


	/*Captcha*/
	#ui .form .captcha {
   		margin-bottom: 15px;
	}
	#ui .form .form_captcha_img {
		float: left;
		margin: 0 10px 0 0;
		padding: 5px 22px;
	}
	#ui .form .form_captcha_refresh {
		float: left;
		margin-top: 11px;
		position: relative;
	}
	#ui .form .form_captcha_refresh input {
		background-repeat: no-repeat;
		background-position: 0 -394px;
		border: medium none;
		cursor: pointer;
		font-size: 13px;
		height: 24px;
		padding-left: 20px;
		text-decoration: underline;
	}	
	#ui .form .form_captcha_refresh input:hover {
		text-decoration: none;
	}	
	#ui .panel.white .form .form_captcha_refresh input {
		background-position: 0 -1593px;
	}
	#ui .form .form_captchatimer {
		border: 1px solid #fff;
		left: 22px;
		position: absolute;
		top: -11px;
		width: 64px;
	}
	#ui .form .form_captchatimer_bar {
		background-color: #ccc;
		height: 9px;
	}



	/* error */
	#ui .form p.error-message {
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		font-weight: bold;
		margin-bottom: 20px !important;
		padding: 10px 15px;
	}
	#ui .panel.white .form p.error-message {
		padding-left: 0;
	}
	#ui .form .text input.error, 
	#ui .form .select p.error, 
	#ui .form .textarea textarea.error {
		border-width: 2px;
		border-style: solid;
	}
	
	
	/* ie */
	.ie6 #ui .form form .item,
	.ie7 #ui .form form .item {
		margin-left: 8px;
	}
	.ie6 #ui .form form .item:first-child,
	.ie7 #ui .form form .item:first-child {
		margin-left: 0;
	}
	.ie6 #ui .form form .item label,
	.ie7 #ui .form form .item label {
		padding-left: 9px;
	}
	.ie6 #ui .form form .item:first-child label,
	.ie7 #ui .form form .item:first-child label {
		padding-left: 1px;
	}
	.ie6 #ui .form .text input,
	.ie6 #ui .form .textarea textarea,
	.ie6 #ui .form p.select,
	.ie7 #ui .form .text input,
	.ie7 #ui .form .textarea textarea,
	.ie7 #ui .form p.select,
	.ie8 #ui .form .text input,
	.ie8 #ui .form .textarea textarea,
	.ie8 #ui .form p.select,
	.ie8 #ui .form p.error-message {
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		position: relative;
	}
	.ie6 #ui .form .fsInfo,
	.ie7 #ui .form .fsInfo {
		padding-left: 24px;
	}
	.ie6 #ui .form .fsInfo input, 
	.ie7 #ui .form .fsInfo input,
	.ie6 #ui .form .fsInfo .styledCheckbox,
	.ie7 #ui .form .fsInfo .styledCheckbox {
		margin-left: -24px;
	}
	.ie6 #ui .form .form_captcha_refresh input,
	.ie7 #ui .form .form_captcha_refresh input,
	.ie8 #ui .form .form_captcha_refresh input {
		background-position: 0 -395px;
	}	
	.ie6 #ui .panel.white .form .form_captcha_refresh input,
	.ie7 #ui .panel.white .form .form_captcha_refresh input,
	.ie8 #ui .panel.white .form .form_captcha_refresh input {
		background-position: 0 -1595px;
	}
}

/**
 * comp: contactform
 */

@media all {
	#ui .contactform form {
		width: 44em;		
	}
	#ui .contactform .gender label {
	    display: inline-block;
		margin-right: 30px;
	}
	#ui .contactform .gender input {
	    margin-right: 2px;
	}
	#ui .contactform .button {
		float: right;
	}
}

/**
 * comp: teaser
 */

@media all {
	/* container */
	#ui .teaser {
		cursor: pointer;
	}	
	#ui .teaser.panel.panel-solid {
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
		-webkit-box-shadow: 0 10px 5px -8px #505050;
		-moz-box-shadow: 0 10px 5px -8px #505050;
		box-shadow: 0 10px 5px -8px #505050;
		overflow: visible;
		padding: 1.6em 2.5em 11em;
	}	
	#ui .teaser.panel.panel-solid.short {
		padding-bottom: 5.5em;
	}

	#ui .teaser.teaser-product {
		background-repeat: no-repeat;
		border: 1px solid #e2e2e2;
		border-width: 1px 1px 0;
		height: 310px;	
		overflow: hidden;
	}	
	#ui .teaser.teaser-product.panel.panel-solid {
		background-position: 50% 0;
		padding: 0 2em;
	}
	
	/* images */	
	#ui .teaser img {
		position: absolute;
		margin: 0;
	}
	#ui article .teaser img {
		bottom: -10px;
		right: -10px;
	}
	#ui #sidebar .teaser img {
		bottom: 60px;
		right: auto;
	}
	
	/* content */
	#ui article .teaser .textimage {
		margin-bottom: 0;
	}
	#ui .teaser h3 {
		background: url("/etc/designs/persil/common/img/divider-h.png") repeat-x 0 100% transparent;
		font-size: 2em;
		line-height: 1.2;
		margin: 0 0 0.3em;
		padding-bottom: .5em;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	}
	/* special treatment for headline in light-grey teaser */
	#ui .teaser.light-grey h3 {
		text-shadow: none;
	}
	#ui .teaser.teaser-product h3 {	
		background-image: none;
		font-size: 1.8em;
		line-height: 1.222;
		margin: 12.7em 0 0.1em;
		padding-bottom: 0;	
	}
	#ui #sidebar .teaser h3 {
		font-size: 1.8em;
		line-height: 1.222;
		margin-top: 0;
	}	
	#ui .teaser.teaser-product h3 a {	
		display: block;
	    position: relative;
	    top: -3px;	
	}

	#ui .teaser p {		
		font-size: 1.3em;
		line-height: 1.385;
		margin-bottom: 0;
		padding-bottom: .769em;
	}
	#ui .teaser.short p {
		padding-right: 5.385em;		
	}
	#ui .teaser.yellow p {
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	}

	#ui .teaser p a {
		text-decoration: underline;
	}

	/* button teaser specific */
	#ui .teaser .button {
		margin: 0 0 10px;
	}	
	#ui article .teaser .button {				
		bottom: 10px;
		left: 15px;
		position: absolute;
	}	
	#ui #sidebar .teaser .button {
		margin-top: 120px;
	}
}

/**
 * comp: metadatapage
 */

@media all {
	.metadatapage #ui {
		height: 1200px;
	}
	
	.metadatapage #ui h1 {
		font-size: 3em;
	    line-height: 1.133;
	    margin-bottom: 0.133em;
	}
	.metadatapage #ui .productshape {
		margin-bottom: 2em;
	}
	.metadatapage #ui .productshape .shape {
		float: left;
		margin-right: 2em;
		text-align: center;
	}
	.metadatapage #ui .productshape .tooltip {
		float: left;
	}
}

/**
 * comp: productshapes
 */

@media all {
	#ui .productshapes ul.symbols {
		margin: 4em 0 1em;
	}
	#ui .productshapes ul.symbols li {
		-webkit-border-radius: .5em;
		-moz-border-radius: .5em;
		border-radius: .5em;
		height: 84px;
		margin: 0 1em 0 0;
		min-width: 84px;
		padding: 0;
	}
	#ui .productshapes ul.symbols li:hover {
		background: transparent url(/etc/designs/persil/common/img/symbols_opacity.png) repeat 0 0;
		position: relative;
		behavior: url(/etc/designs/henkel-lib/js/libs/PIE/1.0b4/PIE.htc);
	}
	#ui .productshapes li .shape {
		font-size: 1.3em;
		font-weight: bold;
		line-height: 1.385;
		text-align: center;
	}
	#ui .productshapes li .shape img {
		margin: 0 auto;
	}
	#ui .productshapes li .shape span {
		padding: 0 15px;
	}
	
	/* tooltip */
	#ui .productshapes li .tooltip {
		border-width: 1px;
		border-style: solid;
		-webkit-border-radius: 5px;
		-moz-border-radius:	5px;
		border-radius: 5px;
		-webkit-box-shadow:	0 0 8px #666;
		-moz-box-shadow: 0 0 8px #666;
		box-shadow:	0 0 8px #666;
		padding: 10px 15px 5px;
		position: absolute;
		width: 160px;
		z-index: 1000;
	}
	#ui .productshapes li .tooltip .nose {
		background: url(/etc/designs/persil/common/img/gui.png) no-repeat -136px top;
		bottom: -11px;
		height: 11px;
		position: absolute;
		width: 30px;
	}
	#ui .productshapes li .tooltip h4 {
		font-size: 1.8em;
		line-height: 1.222;
		margin: 0;
	}
	#ui .productshapes li .tooltip p {
		font-size: 1.3em;
		line-height: 1.231;
		margin-top: .462em;
	}
	
	.ie7 #ui .productshapes li .shape img {
		margin: 0;
	}
	.ie7 #ui .productshapes li .tooltip {
		zoom: 1;
	}
}

/**
 * comp: productlist
 */

@media all {		
	#ui .productlist .products > li {
		float: left;
		list-style-type: none;
		margin-right: 2%;
		width: 32%;
	}
	
	#ui .productlist .products > li.last-of-row,
	.ie7 #ui .productlist .products > li.last-of-row {
		float: right;
		margin-right: 0;
	}
	
	.ie7 #ui .productlist .products > li {
		margin-right: 2.1%;
		width: 31.9%;
	}
}

/**
 * comp: search
 */

@media all {
	#ui .search h2 {
		font-size: 3em;
    	line-height: 1.133;
    	margin-bottom: 0.133em;
	}
	
	#ui .search h3 {
		font-size: 2em;
    	line-height: 1.2;
    	margin-bottom: 0.5em;
	}
	
	#ui .search p.no-results,
	#ui .search p.spellcheck {
		font-size: 1.4em;
    	line-height: 1.571;
		margin-bottom: 10px;
	}
	#ui .search .searchresults ul {
		list-style-type: none;	
	}
	
	#ui .search .searchresults li.result {
		overflow: hidden;
		margin: 0 0 1px;
		padding: 17px 20px;
	}
	#ui .search .searchresults li.result a {
		cursor: pointer;
		display: block;
	}
	#ui .search .searchresults li.result a:hover{
		text-decoration: none;
	}
	
	#ui .search .searchresults li.result a h4 {
		font-size: 1.8em;
		line-height: 1.222;
		margin: 0 0 .333em;
		text-decoration: underline;
	}
	
	#ui .search .searchresults li.result a p{
		font-size: 1.4em;
    	line-height: 1.571;
		margin-bottom: 10px;    	
	}
	
	#ui .search .searchresults li.result a span{
		font-size: 1.4em;
    	line-height: 1.571;	
	}
	
	#ui .search .paging {
		margin: 2em 0;
		text-align: center;
	}
	#ui .search .paging span,
	#ui .search .paging a {
		display: inline-block;		
		font-size: 1.4em;
		margin-right: 5px;
		vertical-align: top;
	}
	#ui .search .paging span {		
		font-weight: bold;
		text-decoration: underline;
		
	}
	#ui .search .paging a.previous {
		background-repeat: no-repeat;
		background-position: 0 -3695px;
		width: 15px;
		height: 17px;
	}
	#ui .search .paging a.next {
		background-repeat: no-repeat;
		background-position: 0 -3595px;
		width: 15px;
		height: 17px;
	}
	#ui .search .paging a,
	#ui .search .paging a:hover {
		text-decoration: none;
	}
}

/**
 * comp: footer-nav
 */

@media all {
	#ui .footer-nav {
		clear: both;
		float: left;
		padding-top: .5em;
		width: 70em;
	}
	#ui .footer-nav li,
	#ui .footer-nav small {
		font-size: 1.1em;
		margin-bottom: .545em;
	}
	#ui .footer-nav small {
		clear: left;
		float: left;
		line-height: 1.0;
		padding-right: .273em;
	}
	#ui .footer-nav a {
		padding: 0 .273em;
	}
	#ui .footer-nav li:first-child a {
		border-left: none;
		padding-left: 0;
	}
}

/**
 * comp: teaser-expandable
 */

@media all {
	#ui .teaser-expandable {
		float: right;
		position: relative;
	}

	#ui .teaser-expandable a.ir {
		background: none no-repeat 0 0 transparent;
		color: #8dcd3a;
		height: 41px;
		text-decoration: none;
		width: 110px;
	}
	.homepage #ui .teaser-expandable a.ir {
		background-position: 0 0;
		color: #848484;
	}
	/* container for lifetimes content received from henkel-lifetimes */ 
	#ui .teaser-expandable .lifetimes {
		background-color: #fff;
		bottom: 35px;
		-webkit-box-shadow: 3px 0 20px #666;
		-moz-box-shadow: 3px 0 20px #666;
		box-shadow: 3px 0 20px #666;
		padding: 10px 10px 5px;
		position: absolute;
		width: 215px;
		z-index: 110;
	}
	#ui .teaser-expandable .lifetimes img {
		display: inline;
	}

	.ie7 #ui .teaser-expandable .lifetimes,
	.ie8 #ui .teaser-expandable .lifetimes {
		border: 1px solid #ccc;
	}
}

/**
 * comp: footnote
 */

@media all {
	#ui .footnote {
		clear: both;
		color: #999;
		display: block;
	    font-size: 1.1em;
    	line-height: 1.0;
    	padding-top: 1em;
	}
}