/**
 * Basisstyles fuer den Konsumcheck
 *
 */

/** Basislayout, Anordnung, Schriften, Farben **/
html, body {width: 100%;}
body {padding: 0; margin: 0 auto; font-size: 13px; font-family: Arial,Helvetica,sans-serif, sans-serif; color: #000000; width: 100%; background: #FFFFFF; margin-top: 10px;}
body.index_index {max-width: 800px;}
.content-wrapper {background: #F2F2F2; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 1em; position: relative;}
h1, h2 {margin: 0; padding: 0; font-size: 1.1em;}
h2, h3 {color: #FF0000; margin-bottom: 0.5em;}
h3 {font-size: 1em;}
.info h2 {color: #000000;}
a {color: #000000; }
a.nav {font-size: 1.1em; font-weight: bold; text-decoration: none;}
a img {border: 0;}
ul.hlist,
ul.hlist li {list-style-type: none; margin: 0; padding: 0; display: inline-block; *display: inline; zoom:1;}

/** Aufteilung der Seite, Contentboxen **/
.content-box {margin-bottom: 1em;}
.content-box .content {background: #fff; }
.content-box-left {float: left; width: 66%;}
.content-box-left-complete {width: 100%;}
.content-box-right  {float: right; width: 31%;}
.content-footer {height: 81px; position: relative;}
.has-border {border-top:1px solid #DEDEDE; -moz-box-shadow: 0 10px 15px -10px #DEDEDE inset; -webkit-box-shadow: 0 10px 15px -10px #DEDEDE inset; box-shadow: 0 10px 15px -10px #DEDEDE inset}
.border-arrow {background-position: center -100px !important;}
.dummy-wrapper {height: 15px;}

/** header **/
.header {text-align: left; position: relative; z-index: 1;}
.has-portal-header {text-align: left; float: none; width: auto; margin: 0 0 20px 0;}
.header h1 { margin: 0; display: inline; float: left; font-size: 1.5em; font-weight: normal;}
.has-portal-header h1 {line-height: normal; float: right; position: relative; top: 10px;}
.header img {float: right;}
.has-portal-header h1 {margin-left: 0;}
.portalHeader #co2logo {position: absolute; top: 5px; right: 1%;}

/** User Status **/
#userstate {display: block;}
.has-portal-header #userstate {float: right;}
#userstate a {text-decoration: none;}

/** ksc-footer **/
.ksc-footer {line-height: 25px; color: #000000;}
.ksc-footer p {margin: 0;}
.ksc-footer a {color: #000000;}
.ksc-footer .social {float: left; width: 35%; font-weight: bold;}
.small .ksc-footer .social > span {display: none;}
.ksc-footer .footer {float: right; width: 65%; text-align: right;}
.ksc-footer ul {margin: 0; padding: 0; list-style-type: none; }
.ksc-footer li {float: left; margin-right: 5px;}

/** Einige Buttondefinitionen */
.red-button,
.grey-button,
.blue-button {
    -moz-box-shadow: 1px 1px 1px #D6D6D6;
    -webkit-box-shadow: 1px 1px 1px #D6D6D6;
    box-shadow: 1px 1px 1px #D6D6D6;
    border: 1px solid #a40518;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 7px 15px;
    *display:inline; 
    display: inline-block;
    zoom: 1;
}
.red-button {
    border-color: #a40518;
    *display:inline; 
    display: inline-block;
    background: #dd001a; /* Old browsers */
    background: -moz-linear-gradient(top, #dd001a 0%, #a40518 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd001a), color-stop(100%,#a40518)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dd001a 0%,#a40518 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dd001a 0%,#a40518 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #dd001a 0%,#a40518 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd001a', endColorstr='#a40518',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dd001a 0%,#a40518 100%); /* W3C */
}
.grey-button {
    border-color: #B2B2B2;
    background: #dcdcdc; /* Old browsers */
    background: -moz-linear-gradient(top, #dcdcdc 0%, #b2b2b2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dcdcdc 0%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dcdcdc 0%,#b2b2b2 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #dcdcdc 0%,#b2b2b2 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#b2b2b2',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dcdcdc 0%,#b2b2b2 100%); /* W3C */
}
.blue-button {
    background: #C9C8C9; /* Old browsers */
    background: -moz-linear-gradient(top, #C9C8C9 0%, #38ABC6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C9C8C9), color-stop(100%,#38ABC6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #C9C8C9 0%,#38ABC6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #C9C8C9 0%,#38ABC6 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #C9C8C9 0%,#38ABC6 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9C8C9', endColorstr='#38ABC6',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #C9C8C9 0%,#38ABC6 100%); /* W3C */
    border-color: #38ABC6;
}
.grey-button:nth-of-type(1n),
.blue-button:nth-of-type(1n)
{
    filter: none; /* Disable all filters for IE9 */
}

/** Link im Content-footer **/
.link-footer {text-align: right;}
.link-footer a {margin: 35px 15px 0 0; display: inline-block;}
.link-footer a.hideme {display: none;}

/** Icons, Links **/
.icon,
.border-arrow {background: transparent url(/gfx/ksc/sprite.png) 0 0 no-repeat;}
.loading {background: url(/gfx/ksc/ajax-loader.gif) center no-repeat;}
a span.pfeil {padding-right: 15px; background-position: 100% 2px;}
a.speichern,
a.datenblatt {padding-left: 25px;}
a.speichern span,
a.datenblatt span {padding-right: 15px; background-position: 100% -29px;}
a.speichern {background-position: 0px -608px;}
a.datenblatt {background-position: 0px -655px;}
a.facebook,
a.twitter {display: block; text-indent: -1000px; width: 24px; height: 24px;}
a.facebook {background-position: 0px -532px;}
a.twitter {background-position: 0px -557px;}
a.editieren, a.loeschen, a.check {display: inline-block; width: 13px; height: 13px;}
a.editieren {background-position: 0px -505px;}
a.editieren:hover {background-position: 0px -518px;}
a.loeschen {background-position: 0px -477px;}
a.loeschen:hover {background-position: 0px -491px;}
a.check {background-position: 0px -800px; height: 16px; margin-bottom: 1px; width: 18px;}
a.check:hover {background-position: 0px -816px;}
a.close {background-position: 100% -861px; padding-right: 10px;}
a.backlink {background-position: 0 -59px; padding-left: 15px;}

/** Impressum **/
#impressum {background: #fff; padding: 10px;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

/** Einkaufswagen **/
.einkaufskorb .content-box-left {position: relative;}
.einkaufskorb h3 {height: 35px; margin: 15px 0 0 15px;}
.einkaufskorb .info {position: absolute; top: 15px; right: 0; color: #000000;}
.einkaufskorb .content-box-right h3 {margin-left: 0;}
.diagramm-wrapper {height: 280px; margin: 0 0 0 15px; overflow: auto; overflow-y: hidden; overflow-x: auto;}
.diagramm-wrapper img {display: none;}
.button-wrapper {height: 60px; margin-left: 15px;}
.button-wrapper a {margin-top: 13px;}

/** Legende **/
.legende-wrapper {background: #fafafa; margin-right: 15px;}
.legende {height: 230px; overflow: auto; overflow-x: hidden;}
.index_auswahl .vergleichswert {visibility:hidden;}

.vergleichswert .info {position: absolute; top: 3px; right: 0; font-weight: normal; color: #000000;}
.vergleichswert .grey-select {width: 100%; margin-top: 10px;}
.vergleichswert .grey-select li,
.vergleichswert .grey-select .selectedTxt {white-space: nowrap;}
.vergleichswert.show {visibility:visible;}
.vergleichswert,
.legende .element {min-height: 40px; margin: 0 15px 0 15px; border-top: 1px solid #dcdcdc; padding: 3px 0 7px 45px; color: #000000; font-weight: bold; font-size: 0.9em; position: relative;}
.vergleichswert {padding-left: 0; position: relative;}
.small .vergleichswert,
.small .legende .element {margin: 0;}
.legende .element .n {display: block; margin-right: 35px; overflow: hidden;}
.small .legende .element {padding-left: 0;}
.small .legende .element .eicon {display: none;}
.legende .element {padding-top: 7px;}
.legende .element:first-child {border: 0;}
.legende .element .attribute {display: block; font-weight: normal; font-size: 0.8em;}
.legende input {border: 1px solid #DCDCDC; font-size: 12px; height: 16px; line-height: 16px; margin: 5px 5px 0 0; padding: 0; text-align: right; width: 40%; background: #fff;}
.element .icon {margin-left: 5px; position: absolute; top: 7px;}
.element .editieren {right: 18px;}
.element .loeschen {right: 0;}
.element .check {float: none; margin: 0; position: relative; margin-left: 5px; top: 2px;}
.eicon {display: block; position: absolute; top: 5px; left: 0; background: url(/gfx/ksc/sprite-produkte.png) -379px 0 no-repeat; width: 45px; height: 45px;}

/** Icons fuer die Legende **/
.legende .produkt_kaese {background-position: -379px -45px;}
.legende .produkt_joghurt {background-position: -379px -90px;}
.legende .produkt_milch {background-position: -379px -135px;}
.legende .produkt_sahne {background-position: -379px -180px;}
.legende .produkt_quark {background-position: -379px -225px;}
.legende .produkt_butter{background-position: -379px -270px;}
.legende .produkt_schwein,
.legende .produkt_schinken {background-position: -379px -315px;}
.legende .produkt_rind{background-position: -379px -360px;}
.legende .produkt_gefluegel {background-position: -379px -405px;}
.legende .produkt_tofu {background-position: -379px -450px;}
.legende .produkt_brot {background-position: -379px -495px;}
.legende .produkt_broetchen {background-position: -379px -540px;}
.legende .produkt_suesswasserfischfilet,
.legende .produkt_kabeljau {background-position: -379px -585px;}
.legende .produkt_garnelen {background-position: -379px -630px;}
.legende .produkt_saefte {background-position: -379px -675px;}
.legende .produkt_kaffee {background-position: -379px -720px;}
.legende .produkt_bier {background-position: -379px -765px;}
.legende .produkt_kopfsalat {background-position: -379px -810px;}
.legende .produkt_tomate {background-position: -379px -855px;}
.legende .produkt_gurke {background-position: -379px -900px;}
.legende .produkt_kohlrabi {background-position: -379px -945px;}
.legende .produkt_karotten {background-position: -379px -990px;}
.legende .produkt_kartoffeln,
.legende .produkt_kartoffelpueree {background-position: -379px -1035px;}
.legende .produkt_gemuese{background-position: -379px -1080px;}
.legende .produkt_obst {background-position: -379px -1125px;}
.legende .produkt_erdbeeren{background-position: -379px -1170px;}
.legende .produkt_aepfel {background-position: -379px -1215px;}
.legende .produkt_pommes {background-position: -379px -1260px;}
.legende .produkt_pizza {background-position: -379px -1305px;}
.legende .produkt_ketchup {background-position: -379px -1350px;}
.legende .produkt_eier {background-position: -379px -1395px;}
.legende .produkt_pflanzenoele {background-position: -379px -1440px;}
.legende .produkt_margarine {background-position: -379px -1485px;}
.legende .produkt_zucker {background-position: -379px -1530px;}
.legende .produkt_weizenmehl {background-position: -379px -1575px;}
.legende .produkt_haferflocken {background-position: -379px -1620px;}
.legende .produkt_konfituere {background-position: -379px -1665px;}
.legende .produkt_wurst {background-position: -379px -1710px;}
.legende .produkt_duschgel,
.legende .produkt_duschgel_nutzung {background-position: -379px -1800px;}
.legende .produkt_shampoo,
.legende .produkt_shampoo_nutzung {background-position: -379px -1755px;}
.legende .produkt_waschpulver,
.legende .produkt_waschpulver_nutzung {background-position: -379px -1935px;}
.legende .produkt_toilettenpapier {background-position: -379px -1845px;}
.legende .produkt_haushaltsrolle {background-position: -379px -1890px;}
.legende .produkt_soja_drink {background-position: -379px -2250px;}
.legende .produkt_tagliatelle {background-position: -379px -2070px;}
.legende .produkt_gulasch {background-position: -379px -2295px;}
.legende .produkt_nudeln {background-position: -379px -2025px;}
.legende .produkt_reis {background-position: -379px -1980px;}
.legende .produkt_kekse_feingebaeck {background-position: -379px -2115px;}
.legende .produkt_schokolade {background-position: -379px -2385px;}
.legende .produkt_soja_schnetzel {background-position: -379px -2205px;}
.legende .produkt_tropenfruechte {background-position: -379px -2160px;}

/** Links unter Diagrammen **/
.link-footer .backlink {float: left; margin-left: 15px;}

/** Loginbox **/
form #loginBox {
    position: absolute;
    top: 550px; 
    height:300px;
    display: none;}
form .show_login #loginBox {
    position: absolute;
    top: 550px; 
    height:300px;
    display: block;
}

/** FB teilenfunktion **/
#facebook-teilen,
.bluebuttton {
    display: inline-block;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #003C3F;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #02636f;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyNjM2ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDQxNTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #02636f 0%, #004151 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02636f), color-stop(100%,#004151));
    background: -webkit-linear-gradient(top, #02636f 0%,#004151 100%);
    background: -o-linear-gradient(top, #02636f 0%,#004151 100%);
    background: -ms-linear-gradient(top, #02636f 0%,#004151 100%);
    background: linear-gradient(to bottom, #02636f 0%,#004151 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02636f', endColorstr='#004151',GradientType=0 );
    *display: inline; zoom: 1; /* iE7 hack */
    color: #fff;
    position: relative;
    font-size: 14px;
    text-decoration: none;
}
#facebook-teilen {position: absolute; right: 98px; top: 805px; font-size: 14px; font-family: 'Lucida Grande', sans-serif;}
#facebook-teilen span {display: block; background: url(/gfx/facebook/ratgeber/icon_teilen.png) 0 center no-repeat; padding-left: 20px;}

/** Overlay mit Hinweis wenn keine Cookies akzeptiert wurden **/
#nocookieoverlay-bg {
	display: none;
	background: #333;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
	opacity: 0.5;
	filter:alpha(opacity=50);
}
#nocookieoverlay {
	display: none;
	background: #fff;
	width: 400px;
	height: 300px;
	z-index: 2001;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -200px;
	border: 2px solid #7F7F7F;
	box-shadow: 0 0 5px #333;
	-webit-box-shadow: 0 0 5px #333;
	-moz-box-shadow: 0 0 5px #333;
	padding: 30px;
	box-sizing: border-box;
	font-size: 14px;
}

/** Helper **/
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0}
.clearfix {display: block}
.center {text-align: center;}
html[xmlns] .clearfix {display: block}
* html .clearfix {height: 1%}
.hideme {display: none;}
.clear {clear: both;}
.empty {height: 0; line-height: 0; font-size: 0;}

/**
 * Alle Styles fuer die Loginbox der Ratgeber.
 *
 * @author Oliver Albrecht
 */

#loginBox, div#messageBox, div#forgotPassword {
    width:300px;
    height:290px;
    background-color:#FFF;
    background-image:url(../gfx/ovwLayer_bg.jpg);
    background-repeat:repeat-x;
    background-position:left bottom;
    padding:20px;
    line-height: 1.4em;
    position:absolute;
    left: 100px;
    top: 100px;
    border:1px solid #e9e9e9;
    z-index: 1000;
}

div#loginBox label, div#forgotPassword label {
    font-weight:bold;
    width:100px;
    float:left;
}

div#loginBox input {
    border:none;
}

div#loginBox .button-left {
    width: 45%;
}

div#loginBox div.button-left input {
    background-color: #CCC;
    margin-top: 0;
}

div#loginBox a {
    font-weight:bold;

    text-decoration: none;
    color: #006193;
}

#loginBox .loginbox_teaser {
    padding-bottom: 15px;
    border-bottom: 2px solid #e9e9e9;
}

div#loginBox h1 {
    margin-top: 20px;
    margin-bottom: 5px;
}

div#loginBox .error {
    color:red;
    margin:4px;
}

div#loginBox input#loginBox_email, div#loginBox input#loginBox_password {
    width: 100%;
}

div#loginBox input, div#forgotPassword input {
    border:1px solid #CECECE;
    margin-top: 2%;
    margin-bottom: 5%;
}

.loginbox-close {
    font-size: 110%;
    height: 20px;
    width: 20px;
    line-height: 20px;
    position: absolute;
    right: -1px;
    text-align: center;
    top: -1px;
    border: 1px solid #e9e9e9;
}/**
 * Speziellee css Definitionen fuer sehr kleine Einbindungen
 *
 */

/* Keinen Aussenabstand des Formulars */
body {margin:0;}

/* Rechte Seite absolut positionieren */
div#stage_content {position:relative; }

div#stage div#stageHeader div.portalHeader {
	clear:both;
}

div#stage div#stageRight {
	border-bottom-width: 1px;
	width: 100%;
	height: 27px;
}

* html div#stage div#stageRight {width: 102%;}

	div#stageRight ul#next_list {
		margin: 1px 1%;
	}

		div#stage div#stageRight ul#next_list img {
			height: 25px;
			float:left;
		}


		div#stageRight ul#next_list li {
			float: left;
			padding: 0;
			margin-right: 10px;
		}

		div#stageRight ul#next_list div.next_item .hidden_text {
			display: none;
			float:left;
			line-height:190%;
			margin-left: 3px;
		}

/* Floating der linken seite abschalten, damit kein Abstand nach rechts entsteht. */
div#stage div#stageLeft {float:none; width: auto;}

/* Position Logo umstellen */
#consultantHeader h1 {min-height: 22px;}
div#stage div#stageHeader div#co2logo {top: -34px;}

/* Paddings der Menueelemente verringern, damit mehr Platz ist */
div#stage div#stageHeader div#stepsNav {top: 0;}
div#stage div#stageHeader div#stepsNav ol li {padding: 0.6em 0.3em;}

/* Padding bei weiter/zurueck Button weg nehmen */
div#inConsultantNav {padding: 0;}

/* Teaser entfernen und damit Abstand zwischen Nav und Form verringern */
div#stage div#stageHeader div#teaser {margin:0;}

/* Den Teader auf der rechten Seite ausblenden */
.teaser_rechts {display:none;}

/***** Ratgeberauswahl ******/
ol#consultantsOverview li {margin: 0; height: auto; width: 24.5%;}
ol#consultantsOverview li div.white {height: 90px; width: 116px;}
ol#consultantsOverview li div.white div.consultantIcon a {margin: 5px auto auto auto;}
div#stage.overview div#stageLeft .teaser, #overview_header .teaser {margin-bottom: 5px;}

/* Padding in Ratgeberauswahl */
#overview_header {padding: 0 1%; width: 90%;}
div#stage.overview div#stageRight {padding: 0 1%;}