/*
	Produktkonfigurator Jalousiekasten  u. -schürze
	Core-CSS
*/

/*	HTML-Body	*/
.produktgen_body {
	/*margin: 0;
	padding: 10px;
	background-color: #d9dadb;
	min-width: 730px;*/
}

/*	Schrift	*/
.produktgen_body,
.produktgen_body td, 
.produktgen_body th, 
.produktgen_body p {
   /* color: #4B4B4D;
    font-family: Arial,Helvetica,Verdana,Sans-Serif,Switzerland;
    font-size: 12px;
    line-height: 12pt;*/
}

/*	Überschrift 1	*/
.produktgen_body h1 {
    /*color: #4B4B4D;
	font-family: Arial,Helvetica,Verdana,Sans-Serif,Switzerland;
    font-size: 12px;
    font-weight: bold;*/
}

/*	Links	*/
.produktgen_body a:link,
.produktgen_body a:visited
{
	/*color: #4b4b4d;
	text-decoration: none;*/
}

.produktgen_body a:hover
{
	/*color: #177549;
	text-decoration: none;*/
}

/*	NoScript */
#produktgen_noscript
{
	margin: 0 50px auto;
	width: 80%; 
	background-color: #FaFad2; 
	border: 2px solid #a9a9a9; 
	border-radius: 5px; 
	padding: 10px;
}
	#produktgen_noscript_pic
	{
		float: left;
	}
	
	#produktgen_noscript_text
	{
		padding-left: 15%; 
		font-weight: bold;
	}

/* Produktgenerator */
#produktgen_jalousie
{
	position: relative;
	z-index: 1;
	margin: 0 120px;
	padding-top: 100px;
	min-height: 400px;
}
	#produktgen_jalousie .produktgen_jalousie_inner	{
		padding: 0;
	}
	
/*	Check u. Radio-Buttons	*/
#produktgen_jalousie input[type=radio],
#produktgen_jalousie input[type=checkbox],
#produktgen_jalousie .radiobox,
#produktgen_jalousie .checkbox
{
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 13px;
	height: 13px;

    -webkit-appearance: auto;
}

/*	Link u. Input-Buttons	*/
#produktgen_jalousie .button,
#produktgen_jalousie a.button,
#produktgen_jalousie a.button:link,
#produktgen_jalousie a.button:visited,
#produktgen_jalousie a.button:hover
{
	color: white;
}

#produktgen_jalousie label
{
	display: inline-block;
	margin-bottom: 5px;
}

#produktgen_jalousie .feld 
{

}

/*	Neue Planung, Planung reseten	*/
#produktgen_new_project,
#js_meldung
{
	padding-bottom: 40px;
}

#produktgen_reset_project {
	text-align: right;
	padding: 40px 0;
}

/*	Gespeicherte Zusammenstellungen	*/
#produktgen_jalousie .projekte_table {
	width: 100%;
}
	#produktgen_jalousie .projekte_table td	{
		padding: 2px 5px 2px 0;
	}
	
	#produktgen_jalousie .projekte_table_td_oben {
		font-weight: bold;
		border-bottom: 1px solid #4B4B4D;
	}

ul#produktgen_jalousie_liste
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: table;
	width: 100%;
	background: url(/images/bg/trennlinie.png) center no-repeat transparent;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}

ul#produktgen_jalousie_liste li
{
	padding: 0;
	margin: 0;
	display: table-cell;
	width: 9.09%;
	background: none;
}

ul#produktgen_jalousie_liste .headline
{
	position: relative;
	background-color: rgb(147,188,169);
	width: 50px;
	margin: 0 auto;
	height: 50px;
	padding: 6px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-ms-behavior: url(/cms/js/ext/pie2/PIE.htc);
}

ul#produktgen_jalousie_liste li.done .headline
{
	background-color: rgb(39, 121, 83);
}

ul#produktgen_jalousie_liste li.active .headline
{
	background-color: rgb(255, 222, 0);
}

ul#produktgen_jalousie_liste li.active .headline:after {
	content: "";
	position: absolute;
	bottom: -25px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: rgb(212, 228, 221);
	left: 50%;
	margin-left: -20px;
}

ul#produktgen_jalousie_liste li.inkompatibel .headline {
	background-color: rgb(212, 228, 221);
}

#produktgen_jalousie .headline_status {
	display: none;
}


#produktgen_jalousie .step
{
	display: block;
	text-align: center;
	color: white;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-ms-behavior: url(/cms/js/ext/pie2/PIE.htc);
	border: 2px solid white;
	font-size: 16px;
	line-height: 34px;
}

#produktgen_jalousie .result
{
	display: none;
}

#produktgen_jalousie .title
{
	display: none;
	position: absolute;
	bottom: 100%;
	margin-bottom: 25px;
	min-width: 180px;
	left: -65px;
	padding: 10px;
	background-color: rgb(147,188,169);
	color: rgb(39, 121, 83);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    font-family: 'PoppinsMedium', sans-serif;
	font-size: 24px;
	text-align: center;
}
#produktgen_jalousie .title:after {
	content: "";
	position: absolute;
	top: 100%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: rgb(147,188,169);
	left: 70px;
}


#produktgen_jalousie .headline:hover .title {
	display: block;
}


#produktgen_jalousie .projekt_contents {
	margin-top: 25px;
	border: 10px solid rgb(212, 228, 221);
}

#produktgen_jalousie .projekt_contents > * {
	background-color: rgb(190,215,203);
	padding: 40px;
}

#produktgen_jalousie h1 {
	margin-bottom: 20px;
	font-size: 20px;
}
#produktgen_jalousie .projekt_head {
	padding-bottom: 0;
}
#produktgen_jalousie .projekt_head table {
	width: 80%;
	margin-left: 10%;
}
#produktgen_jalousie .projekt_head td {
	width: 40%;
}
#produktgen_jalousie .projekt_head td input {
	width: 90%;
}
#produktgen_jalousie .feld {
    display: inline-block;

    background-color: rgb(212,228,221);
}

.produktgen_step_info > img {
	display: block;
	width: 40%;
	float: left;
	padding-left: 10%;
	margin-top: -3%;
}
.produktgen_step_info:after {
	content: "";
	display: block;
	clear: both;
}
.produktgen_step_info .step_info_text {
	position: relative;
	width: 35%;
	background-color: rgb(147, 188, 169);
	padding: 20px;
	min-height: 200px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: right;
}
.produktgen_step_info .step_info_text h2 {
	color: rgb(39, 121, 83);
	margin-bottom: 5px;
}
.produktgen_step_info .step_info_text img {
	width: 100%;
}
.produktgen_step_info .step_info_text:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -10px;
	right: 100%;
	height: 0;
	width: 0;
	border: 20px solid transparent;
	border-right-color: rgb(147, 188, 169);
}

#produktgen_jalousie .borderline {
	border: 0;
	height: 1px;
	margin: 20px 0;
	background: url(/images/bg/trennlinie.png) center no-repeat transparent;
	-webkit-background-size: 100% 1px;
	background-size: 100% 1px;
}

#produktgen_jalousie .content {
	position: relative;
    z-index: -1;
	display: none;
}

#produktgen_jalousie .step_link {
	display: block;
	position: absolute;
	bottom: 100px;
	width: 100px;
	height: 120px;
	opacity: 0.6;
}
#produktgen_jalousie .step_link:hover,
#produktgen_jalousie .step_link:focus {
	opacity: 1.0;
}
#produktgen_jalousie .backstep_link {
	left: 0;
	background: url(/images/icons/arrow_left_grey.svg) center no-repeat transparent;
	-webkit-background-size: contain;
	background-size: contain;
}
#produktgen_jalousie .nextstep_link {
	right: 0;
	background: url(/images/icons/arrow_right_grey.svg) center no-repeat transparent;
	-webkit-background-size: contain;
	background-size: contain;
}

#produktgen_jalousie .showed {}

#produktgen_jalousie .showed.content {
	display: block;
	z-index: 1;
	height: auto;
}

#produktgen_jalousie .content .hidden {
	display: none;
}

#produktgen_jalousie .hidden.content {
	height: 0;
	overflow: hidden;
}

#produktgen_jalousie .select_content_box {
	width: 80%;
	margin: 0 auto;
	min-height: 200px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#produktgen_jalousie .select_content_box table {
	width: 100%;
}

#produktgen_jalousie .select_content_box td {
	vertical-align: top;
	text-align: left;
	padding: 0 10% 10px 0;
	width: 50%;
}

.table_innenmasse tr td,
#fensterstock_further table tr td,
.table_putzdicke_farbe tr td,
.table_lichtes_mass tr td
{
	width: auto !important;
	padding-bottom: 20px !important;
}
.table_innenmasse tr td:first-child,
#fensterstock_further table tr td:first-child,
.table_putzdicke_farbe tr td:first-child,
.table_lichtes_mass tr td:first-child
{
	width: 0 !important;
	padding-right: 10px !important;
	white-space: nowrap;
}

#jk_8 {
	padding-bottom: 40px;
}

#anputzColor_2_box {
	display: block;
	margin-left: 25px;
}


#produktgen_jalousie .picker_prevRalColor
{
	position: absolute; 
	top: -3px; 
	left: 85px; 
	width: 20px;
	height: 20px;
	cursor: pointer;
	outline: none;
	background-color: white;
}

* html #produktgen_jalousie .picker_prevRalColor
{
	top: 0;	
	width: 17px; 
	height: 17px; 
}

#produktgen_jalousie .picker_colorPicker
{
	position: absolute; 
	bottom: 0;
	left: 110px;
	width: 193px; 
	height: 500px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid #333333;
	background-color: #ffffff;
}
	#produktgen_jalousie .picker_colorPicker table
	{
		width: 176px;
	}
	
/*	Ext MsgBox	*/
/*.x-dlg .x-dlg-hd-left,
.x-dlg .x-dlg-hd-right,
.x-dlg .x-dlg-hd
{
	background: none !important;
    background-color: #177549 !important;
    color: #fff;
}
.x-dlg .x-dlg-hd {
    padding: 5px 10px 5px 10px;
}
.x-dlg .x-dlg-dlg-body {
    padding: 10px;
}

.x-dlg .x-dlg-dlg-body
{
	background: none !important;
	background-color: #D9DADB !important;
	border: none !important;
}

.x-dlg
{
	border: 1px solid #333333 !important;
}

.x-dlg .x-dlg-close 
{
    background-image: url("/images/system/buttons/close.gif") !important;
}

.x-dlg-proxy {
	background: none !important;
	background-color: rgb(212, 228, 221) !important;
	border: 1px solid rgb(147, 188, 169) !important;
}*/

/*
	Bild-Links
*/
#produktgen_jalousie .selecttable {
	margin: 0 auto;
	width: auto !important;
}

#produktgen_jalousie .selecttable td
{
	padding: 0 25px;
	text-align: center;
	width: 250px;
}

#produktgen_jalousie .selecttable a
{
	display: block;
	width: auto;
	outline: none;
	text-align: center;
	background-color: rgb(212, 228, 221);
	padding: 10px;
}

#produktgen_jalousie .selectable {
    font-family: 'PoppinsMedium', sans-serif;
	cursor: pointer;
}

#produktgen_jalousie .selecttable a img {
	display: block;
	width: 100%;
}
#produktgen_jalousie .selecttable a span {
	display: block;
	padding-top: 10px;
	min-height: 54px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#produktgen_jalousie .selecttable a:hover,
#produktgen_jalousie .selecttable a:focus,
#produktgen_jalousie .selecttable a:active
{
	background-color: rgb(147, 188, 169);
	color: rgb(39, 121, 83);
}
#produktgen_jalousie .selecttable a.selected
{
	background-color: rgb(39, 121, 83);
	color: white;
}

#produktgen_jalousie .selecttable a.nonSelect {
	/*opacity: 0.5;*/
}

#produktgen_jalousie .entertable td {}

#produktgen_jalousie .entertable_td_left {
	width: 210px
}

#produktgen_jalousie #fensterstock_further .entertable_td_left,
#produktgen_jalousie #content_8 .entertable_td_left
{
	width: 300px
}

#produktgen_jalousie #content_10 .entertable_td_left
{
	width: 230px
}

#produktgen_jalousie #step10_pics img
{
	margin: 0 0 5px 0;
	max-width: 100%;
}

.projekt_footer_slogan {
	padding-left: 20px;
	background: url(/images/icons/double_arrow_right_gruen.png) no-repeat left 5px transparent;
	width: 50%;
	float: left;
}
.projekt_links {
	float: right;
	padding-top: 10px;
}
#produktgen_new_project a,
.projekt_links a
{
	display: block;
	padding-left: 20px;
	background: url(/images/icons/double_arrow_right_gruen_2.png) no-repeat left 5px transparent;
	color: rgb(39, 121, 83);
	font-weight: bold;
}


#produktgen_new_project a {
	display: inline-block;
}

#fillAll {
}

#jk_overview_details {
	padding: 20px 0;
}

#jk_overview_details table {
	width: 100%;
}
#produktgen_jalousie .select_content_box #jk_overview_details td {
	padding: 5px;
}
#jk_overview_details tr:nth-child(odd) td {
	background-color: rgb(212,228,221);
}

#send table {
	width: 50% !important;
}
#send td {
	width: auto !important;
	padding: 0 10px 10px 0 !important;
}

input[type=range] {
	width: 50%;
	float: left;
	margin-right: 20px;
}

#content_3 .select_content_box,
#content_5 .select_content_box
{
	padding-top: 50px;
	padding-left: 20%;
}


/*
    Auflösung bis 1300px
*/
@media only screen
    and (max-width: 1310px)
{
	#produktgen_jalousie {
		margin: 0 97px;
	}
}


/*
    Auflösung bis 1024px
*/
@media only screen
    and (max-width: 1034px)
{
	#produktgen_jalousie {
		margin: 0 6%;
	}

	ul#produktgen_jalousie_liste .headline {
		height: 40px;
		width: 40px;
		padding: 3px;
	}
	ul#produktgen_jalousie_liste .step {
		line-height: 30px;
	}
	ul#produktgen_jalousie_liste .title {
		min-width: 100px;
		left: -25px;
		font-size: 16px;
	}
	#ul#produktgen_jalousie_liste .title:after {
		left: 25px;
	}

	#produktgen_jalousie .projekt_contents > * 	{
		padding: 10px;
	}

	#produktgen_jalousie h1 {
		margin-bottom: 10px;
	}
	#produktgen_jalousie .projekt_head table {
		margin: 0;
		width: 100%;
	}
	#produktgen_jalousie .projekt_head td {
		width: 50%;
	}

	#produktgen_jalousie .borderline {
		margin: 10px 0;
	}

	#produktgen_jalousie .select_content_box {
		width: auto;
		margin: 0 60px;
	}

	#produktgen_jalousie .select_content_box td {
		padding-right: 10px !important;
	}


	#produktgen_jalousie .step_link {
		width: 50px;
		height: 60px;
	}

	#produktgen_jalousie .selecttable td
	{
		width: 50%;
	}

	input[type=range] {
		width: 80%;
	}

	#content_3 .select_content_box,
	#content_5 .select_content_box
	{
		padding-top: 50px;
		padding-left: 0;
	}
}


/*
    Auflösung bis 640px
*/
@media only screen
    and (max-width: 640px)
{
	#produktgen_jalousie {
		margin: 0 10px;
		padding: 0;
	}

	#produktgen_jalousie h1 {
		font-size: 16px;
	}

	ul#produktgen_jalousie_liste {
		display: block;
		width: 50px;
		float: left;
		background: url(/images/bg/trennlinie2.png) center top no-repeat transparent;
		-webkit-background-size: 1px 100%;
		background-size: 1px 100%;
	}
	ul#produktgen_jalousie_liste li {
		display: block;
		width: 100%;
		padding-bottom: 10px;
	}
	ul#produktgen_jalousie_liste li .headline .title {
		display: none !important;
	}
	ul#produktgen_jalousie_liste li.active .headline::after {
		left: 100%;
		margin-left: -15px;
		bottom: 50%;
		margin-bottom: -20px;
		border-bottom-color: transparent;
		border-right-color: rgb(212, 228, 221);
	}

	#produktgen_jalousie .projekt_contents {
		margin: 0 0 0 60px;
	}

	#produktgen_jalousie .projekt_contents > * {
		padding: 20px;
	}

	#produktgen_jalousie .projekt_head table {
		width: 100%;
	}
	#produktgen_jalousie .projekt_head td {
		display: block;
		width: 100%;
	}

	.produktgen_step_info img {
		display: block;
		width: 90%;
		padding-left: 0;
		margin: 0 auto;
		float: none;
	}

	.produktgen_step_info .step_info_text {
		width: 90%;
		margin: 20px auto 0;
		float: none;
		min-height: auto;
	}
	.produktgen_step_info .step_info_text::before {
		top: auto;
		bottom: 100%;
		right: 50%;
		margin-right: -10px;
		border-right-color: transparent;
		border-bottom-color: rgb(147, 188, 169);
	}
	.produktgen_step_info::after {
		clear: none;
	}

	#produktgen_jalousie .select_content_box {
		margin: 0 30px;
	}

	#produktgen_jalousie .selecttable td {
		padding: 0 10px;
	}

	#produktgen_jalousie .select_content_box table.table_putzdicke_farbe td,
	#produktgen_jalousie .select_content_box table.table_lichtes_mass td
	{
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.projekt_footer_slogan {
		float: none;
		width: auto;
	}

	.projekt_links {
		float: none;
		padding-top: 10px;
	}
}

/*
    Auflösung bis 480px
*/
@media only screen
    and (max-width: 480px)
{
	#produktgen_jalousie .projekt_contents > * {
		padding: 10px;
	}

	#produktgen_jalousie .select_content_box {
		margin: 0;
		min-height: auto;
	}

	#content_3 .select_content_box,
	#content_5 .select_content_box {
		padding-top: 10px;
	}

	#produktgen_jalousie .selecttable td,
	#produktgen_jalousie table.table_innenmasse td,
	.table_innenmasse td,
	#fensterstock_further table td,
	.table_putzdicke_farbe td,
	.table_lichtes_mass td,
	#produktgen_jalousie .select_content_box td
	{
		display: block;
		width: 100% !important;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-bottom: 10px !important;
	}

	#produktgen_jalousie .selecttable a span {
		min-height: auto;
	}

	#produktgen_jalousie .step_link {
		margin: 0 !important;
		position: static;
	}
	#produktgen_jalousie .backstep_link {
		float: left;
	}
	#produktgen_jalousie .nextstep_link {
		float: right;
	}

	#jk_overview_details td {
		display: block;
		width: 100% !important;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-top: 0 !important;
	}
	#jk_overview_details tr td:first-child {
		padding-bottom: 0 !important;
		font-weight: bold;
		padding-top: 5px !important;
	}
}