body{
	background-color:#FFF;
	margin:0px;
	font-family:arial;
}
#myCanvas{
	cursor:crosshair;
	background-color:#FFF;
	margin:0px auto;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.menu{
	position:fixed;
	top:0px;
	left:50%;
	z-index:10;
	height:20px;
	border-bottom:1px solid #DDD;
	height:48px;
	margin-bottom:10px;
	background-color:#DDD;
	padding-top:6px;
	padding-bottom:6px;
	width:330px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	margin-left:-165px;
}

.advancedmenu{
	width:1124px;
	margin-left:-562px;
}

.menu ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}
		
.menu ul li{
	float:left;
	height:24px;
	padding-top:12px;
	padding-bottom:12px;
	line-height:36px;
	color:#000;
	background-color:#FFF;
	border-radius:5px;
	margin-left:6px;
}
				
.menu ul li:hover{
	background-color:#CCC;
	cursor:pointer;
}

.menu ul li.inactive:hover{
	background-color:#FFF;
	cursor:default;
}

.menu ul li.selected{
	background-color:#ed713b;
}

.menu ul li.advanced,.menu ul li.narrow{
	display:none;
}

.menu ul li.toggle{
	background-color:#DDD;
	line-height:24px;
	width:32px;
	text-align:center;
	color:#FFF;
}

.menu ul li.toggle#hide,.menu ul li.toggle#hide2{
	display:none;
}

.menu ul li.iconrange_1.active{
	background-color:#ed713b;
	background: linear-gradient(#FFF 90%,#ed713b 10%);
}

.menu ul li.iconrange_1.active:hover{
	background-color:#ed713b;
	background: linear-gradient(#CCC 90%,#ed713b 10%);
}

.menu ul li.iconrange_2.active{
	background-color:#ed713b;
	background: linear-gradient(#FFF 90%,#ed713b 10%);
}

.menu ul li.iconrange_2.active:hover{
	background-color:#ed713b;
	background: linear-gradient(#CCC 90%,#ed713b 10%);
}

.menu ul li.iconrange_1.active.selected,.menu ul li.iconrange_2.active.selected{
	background:#ed713b;
}

.advancedmenu ul li.toggle#expand{
	display:none;
}

.advancedmenu ul li.toggle#hide{
	display:list-item;
}

.advancedmenu ul li.advanced{
	display:list-item;
}
/*
@media only screen and (min-width: 1136px) {
	.menu{
		width:1086px;
		margin-left:-543px;
	}
	
	.menu ul li.advanced{
		display:list-item;
	}
	
	.menu ul li.toggle#expand{
		display:none;
	}
}

@media only screen and (max-width: 584px) {
	.menu ul li.toggle{
		margin-top:-54px;
		height:78px;
		line-height:78px;
	}
	
	.menu ul li.narrow{
		display:list-item;
	}
	
	.menu ul li.wide{
		display:none;
	}
}

@media only screen and (max-width: 364px) {
	.menu{
		left:0px;
		width:100%;
		margin-left:0px;
		text-align:center;
		border-radius:0px;
		height:102px;
	}
	
	.menu ul{
		margin:0px auto;
		display:block;
		width:314px;
	}
	
	.menu ul li{
		margin-bottom:6px;
	}
}

@media only screen and (min-width: 364px) and (max-width: 584px) {
	.menu{
		width:314px;
		margin-left:-157px;
		text-align:center;
		height:102px;
	}
	
	.menu ul{
		margin:0px auto;
		display:block;
		width:314px;
	}
	
	.menu ul li{
		margin-bottom:6px;
	}
}

@media only screen and (min-width: 584px) and (max-width: 634px){
	.menu{
		left:0px;
		width:100%;
		margin-left:0px;
		text-align:center;
		border-radius:0px;
	}
	
	.menu ul{
		margin:0px auto;
		display:block;
		width:584px;
	}
}

@media only screen and (max-width: 584px) {	
	.advancedmenu ul li:not(.advanced){
		display:none;
	}
	
	.advancedmenu ul li.toggle#hide{
		display:none;
	}

	.advancedmenu ul li.toggle#hide2{
		display:list-item;
	}
}

@media only screen and (max-width: 1124px) {
	.advancedmenu ul li.toggle{
		margin-top:-54px;
		height:78px;
		line-height:78px;
	}
	
	.menu ul li.toggle#hide2{
		margin-top:0px;
	}
}

@media only screen and (max-width: 364px) {
	.advancedmenu{
		left:0px;
		width:100%;
		margin-left:0px;
		text-align:center;
		border-radius:0px;
		height:102px;
	}
	
	.advancedmenu ul{
		margin:0px auto;
		display:block;
		width:314px;
	}
	
	.advancedmenu ul li{
		margin-bottom:6px;
	}
	
	.advancedmenu ul li:not(.advanced){
		display:none;
	}
	
	.advancedmenu ul li.toggle{
		display:none;
	}
	
	.advancedmenu ul li.toggle#hide2{
		display:list-item;
	}
}
	
@media only screen and (min-width: 364px) and (max-width: 584px) {
	.advancedmenu{
		left:50%;
		width:314px;
		margin-left:-157px;
		text-align:center;
		height:102px;
	}
	
	.advancedmenu ul{
		margin:0px auto;
		display:block;
		width:314px;
	}
	
	.advancedmenu ul li{
		margin-bottom:6px;
	}
}

@media only screen and (min-width: 584px) and (max-width: 634px) {
	.advancedmenu{
		left:0px;
		width:100%;
		margin-left:0px;
		text-align:center;
		border-radius:0px;
		height:102px;
	}
	
	.advancedmenu ul{
		margin:0px auto;
		display:block;
		width:584px;
	}
	
	.advancedmenu ul li{
		margin-bottom:6px;
	}
}

@media only screen and (min-width: 634px) and (max-width: 1124px) {
	.advancedmenu{
		left:50%;
		width:584px;
		margin-left:-265px;
		text-align:center;
		height:102px;
	}
	
	.advancedmenu ul{
		margin:0px auto;
		display:block;
		width:584px;
	}
	
	.advancedmenu ul li{
		margin-bottom:6px;
	}
}

@media only screen and (min-width: 1124px) and (max-width: 1174px){
	.advancedmenu{
		left:0px;
		width:100%;
		margin-left:0px;
		text-align:center;
		border-radius:0px;
	}
	
	.advancedmenu ul{
		margin:0px auto;
		display:block;
		width:1124px;
	}
}*/

.edge_finish_menu{
	position:fixed;
	top:65px;
	left:50%;
	z-index:10;
	width:300px;
	height:250px;
	margin-left:-150px;
	border:1px solid #DDD;
	padding-bottom:6px;
	border-radius:5px;
	background-color:#FFF;
	display:none;
}

.edge_finish_menu ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	width:250px;
	height:120px;
	margin-left:15px;
}
		
.edge_finish_menu ul li{
	float:left;
	height:24px;
	padding-top:12px;
	padding-bottom:12px;
	line-height:36px;
	color:#000;
	background-color:#FFF;
	border-radius:5px;
	margin-right:6px;
	margin-bottom:6px;
	border:1px solid #DDD;
}

.edge_finish_menu ul li:hover{
	background-color:#CCC;
}

.edge_finish_menu ul li.selected{
	background-color:#ed713b;
}

.edge_finish_menu ul a:nth-child(4) li{
	margin-top:27px;
}

.edge_finish_menu ul a:nth-child(5) li,.edge_finish_menu ul a:nth-child(6) li,.edge_finish_menu ul a:nth-child(7) li{
	margin-top:-27px;
}

#container{
	margin:0px auto;
	max-width:1000px;
}

#container h2{
	margin-top:15px;
}

.orderimage{
	width:600px;
	height:400px;
	border:1px solid #DDD;
	float:right;
	border-radius:5px;
	margin-bottom:25px;
	text-align:center;
	position:relative;
}

.orderimage a{
	position:absolute;
	display:block;
	z-index:10;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#555;
	text-decoration:none;
	background-color:#DDD;
	font-size:30px;
	font-weight:bold;
}

.orderimage a:hover{
	background-color:#ed713b;
	color:#FFF;
}

.orderimage a:first-of-type{
	top:0px;
	left:0px;
	border-top-left-radius:3px;
	border-bottom-right-radius:3px;
}

.orderimage a:last-of-type{
	top:0px;
	right:0px;
	border-top-right-radius:3px;
	border-bottom-left-radius:3px;
}

.orderimage img{
	border-radius:5px;
}

.RotateRight{
	background:url('img/icon-39.png') center no-repeat;
}

.RotateLeft{
	background:url('img/icon-40.png') center no-repeat;
}

#orderimage_1{
	max-height:350px;
}

#orderimage_2{
	max-height:250px;
}

@media only screen and (min-width: 1000px) and (max-width: 1040px) {
	#container{
		padding-left:2%;
		padding-right:2%;
	}
}

@media only screen and (max-width: 1040px) {	
	.orderimage{
		width:calc(96% - 400px);
	}
}

@media only screen and (max-width: 1000px) {
	.orderimage{
		margin-right:15px;
	}
}

@media only screen and (max-width: 850px) {
	.orderimage{
		float:none;
		width:calc(100% - 30px);
		margin-left:15px;
		margin-bottom:10px;
	}
}

@media only screen and (max-width: 500px) {
	.orderimage{
		height:250px;
	}
	
	.orderimage img{
		height:250px;
	}
}


h2{
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	height:50px;
	line-height:50px;
	margin:0px;
	padding:0px;
	background-color:#ed713b;
	color:#FFF;
	border-radius:5px;
	padding-left:15px;
	margin-top:25px;
	margin-bottom:10px;
}

.roofform ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	margin-bottom:25px;
}

.roofform li{
	height:auto;
	line-height:50px;
	border:1px solid #DDD;
	width:100%;
	text-align:left;
	margin-bottom:5px;
	border-radius:5px;
}

.roofform li.inactive,div.inactive{
	display:none;
}

.roofform li.active{
	height:auto;
}

.roofform li span{
	display:inline-block;
	height:auto;
	line-height:20px;
	padding-top:15px;
	padding-bottom:15px;
	background-color:#DDD;
	width:38%;
	padding-left:15px;
	padding-right:15px;
	text-align:left;
}

.roofform li.active span,.roofform li.question_only span{
	width:calc(100% - 30px);
	font-weight:bold;
	color:#333;
}

.roofform li select{
	width:60%;
	height:47px;
	border:none;
	margin-left:5px;
	font-size:15px;
	margin:0px;
	padding:0px;
	padding-left:5px;
}

.roofform li.active select{
	width:100%;
}

@media only screen and (max-width: 1000px){
	.roofform li{
		width:calc(100% - 12px);
		margin-left:5px;
	}
}

.summary ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	margin-bottom:25px;
}

.summary li{
	line-height:40px;
	width:calc(100% - 15px);
	text-align:left;
	padding-left:15px;
	border-bottom:1px solid #DDD;
	border-left:1px solid #DDD;
	border-right:1px solid #DDD;
}

.summary li.summaryTitle{
	background-color:#DDD;
	color:#515151;
	font-weight:bold;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}

.summary li.summaryTitle:not(:first-child){
	margin-top:15px;
}

.summary li span:first-child{
	float:left;
	width:175px;
}

.summary li span:nth-child(2){
	display:block;
	padding-left:175px;
}

.summary li.price span:nth-child(2){
	font-size:20px;
	font-weight:bold;
}

.summary li.image{
	text-align:center;
}

.orderform span.error{
	color:#F00;
	height:auto;
}

@media only screen and (min-width: 850px) {
	.orderform span.error{
		max-width:325px;
	}
}

.orderform ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	margin-bottom:25px;
}

.orderform#orderlengths ul{
	margin-bottom:0px;
}

.orderform ul li{
	height:50px;
	line-height:50px;
	border:1px solid #DDD;
	width:150px;
	text-align:left;
	margin-bottom:5px;
	border-radius:5px;
}

.orderform ul li span{
	display:inline-block;
	height:50px;
	background-color:#DDD;
	width:40px;
	text-align:center;
}

.orderform ul li.error{
	border:1px solid #F00;
}

.orderform ul li.readonly{
	color:#777;
}

.orderform ul li.error span{
	background-color:#F00;
	color:#FFF;
}

.orderform input[type=number],.orderform input[type=text],.orderform select,.modifypopup input[type=number],.modifypopup select,#startmenu div select{
	width:55px;
	height:47px;
	border:none;
	margin-left:5px;
	font-size:15px;
	margin:0px;
	padding:0px;
	padding-left:5px;
}

.orderform ul li.readonly input,.readonly ul li input{
	color:#777;
}

.readonly ul li input:focus{
	outline:none;
}

.readonly .spinner{
	display:none;
}

.orderform .accessory_option select{
	width:80px;
	padding-left:10px;
}

.orderform select,.modifypopup select,#startmenu div select{
	-webkit-appearance: none;
	-moz-appearance:none;
    appearance: none;
}

.orderform select::-ms-expand,.modifypopup select::-ms-expand,#startmenu div select::-ms-expand{
    display: none;
}

.orderform ul.finishing_side li{
	position:relative;
}

.orderform ul li.title{
	border:none;
	height:25px;
	line-height:25px;
}

.orderform ul li.notification{
	border:none;
	height:40px;
	line-height:40px;
}

.orderform > span{
	display:block;
	height:25px;
	line-height:25px;
	margin-bottom:5px;
	padding-left:5px;
}

.orderform > span.finishing_side{
	padding-top:7px;
}

.orderform > span.finishing_side_top{
	padding-top:0px;
}

.orderform a{
	color:#000;
	text-decoration:none;
}

.orderform a:hover{
	text-decoration:underline;
}

#material ul li,#project ul li,#startmenu div:nth-of-type(2),#materialpopup div{
	width:100%;
	position:relative;
}

#startmenu div:nth-of-type(2),#materialpopup div{
	margin-top:15px;
	margin-left:15px;
	width:calc(100% - 30px);
	border:1px solid #DDD;
	border-radius:5px;
}

#startmenu div.error{
	border:1px solid #F00;
}

#material ul li select,#project ul li select,#startmenu div select,#materialpopup select,.orderform ul.finishing_side select{
	width:100%;
	background:transparent;
	padding-left:10px;
}

#material ul li:before,#project ul li:first-child:before,#startmenu div:nth-of-type(2):before,#materialpopup div:before,.orderform ul.finishing_side li:before{
	content:"\25BC";
	position:absolute;
	top:0px;
	right:0px;
	width:50px;
	line-height:50px;
	text-align:center;
	z-index:-1;
}

#lengths{
	float:left;
	margin-right:50px;
}

#angles{
	float:left;
}

#angles input[type=number]{
	width:75px;
}

#orderlengthsheading{
	clear:both;
}

#orderlengths{
	clear:both;
}

#orderlengths ul li{
	width:350px;
}

#orderlengths ul li span:nth-of-type(2){
	width:40px;
	background-color:#FFF;
}

#orderlengths ul li span:last-child{
	width:110px;
	background-color:transparent;
	border-left:1px solid #DDD;
}

#orderlengths ul li input[type=number]:first-child{
	padding-left:10px;
	width:70px;
}

#orderlengths ul li input[type=number]:nth-child(4), #orderlengths ul li input[type=text]:nth-child(4){
	padding-left:10px;
	width:55px;
}

#orderlengths ul li.title span{
	width:100px;
	background-color:transparent;
	text-align:left;
	margin-left:5px;
	border:none;
}

#orderlengths ul li.title span:first-child{
	width:128px;
}

#orderlengths ul li.title span:last-child{
	width:95px;
	text-align:center;
}

#ordertotal{
	padding-left:242px;
	width:100px;
	text-align:center;
	height:25px;
	line-height:25px;
}

#orderlengthsmessage,#orderlengthsexpansion{
	margin-top:5px;
	margin-bottom:5px;
}

#orderlengthsmessage{
	color:#F00;
}

#orderlengthscheck,#orderlengthscheck label,#orderlengthscheck input{
	cursor:pointer;
}

#materialmessage{
	margin-top:-10px;
}

#endplatemessage{
	display:block;
	border-radius:5px;
	padding-left:5px;
	padding-right:15px;
	padding-top:15px;
	padding-bottom:15px;
	margin-bottom:5px;
}

.errormessage{
	display:none;
	color:#F00;
	margin-bottom:15px;
}

.advice,.advice2{
	display:inline;
}

.orderform:nth-last-of-type(2){
	margin-bottom:85px;
}

@media only screen and (max-width: 441px) {
	.orderform:nth-last-of-type(2){
		margin-bottom:150px;
	}
}

#accessories ul li{
	width:100%;
	position:relative;
}

#accessories ul li input[type=number]{
	padding-left:10px;
	width:70px;
}

#accessories ul li span:nth-child(3){
	margin-right:10px;
}

#accessories ul li:not(.accessory_option) span:nth-child(4), #accessories ul li.accessory_option span:nth-child(3),#accessories ul li:not(.accessory_option) span:nth-child(5), #accessories ul li.accessory_option span:nth-child(4){
	width:auto;
	display:block;
	position:absolute;
	top:50%;
	left:138px;
	transform: translateY(-50%);
	width:calc(100% - 233px);
	text-align:left;
	line-height:1em;
	height:auto;
	background-color:transparent;
}

#accessories ul li:not(.accessory_option) span:nth-child(5), #accessories ul li.accessory_option span:nth-child(4){
	display:none;
}

#accessories ul li:not(.title) span:last-child{
	position:absolute;
	right:0px;
	width:70px;
	text-align:right;
	padding-right:15px;
	background-color:#FFF;
}

#accessories ul li.title span{
	width:100px;
	background-color:transparent;
	text-align:left;
	margin-left:5px;
	border:none;
}

#accessories ul li.title span:first-child{
	width:128px;
}

#accessories ul li.subtitle{
	height:40px;
	width:calc(100% - 30px);
	line-height:40px;
	background-color:#ed713b;
	color:#FFF;
	font-weight:bold;
	border:1px solid #ed713b;
	padding-left:15px;
	padding-right:15px;
}

#accessories ul li.subtitle.inactive{
	background-color:#DDD;
	border:1px solid #DDD;
	color:#515151;
}

#accessories ul li.subtitle.inactive::after{
	content:"\002B";
	float:right;
	font-size:20px;
}

#accessories ul li.subtitle.active::after{
	content:"\2212";
	float:right;
	font-size:20px;
}

#accessories ul li.subtitle.inactive:hover,#accessories ul li.subtitle.active{
	background-color:#ed713b;
	border:1px solid #ed713b;
	color:#FFF;
	cursor:pointer;
}

@media only screen and (max-width: 1000px) {
	#container h2{
		border-radius:0px;
		margin-top:0px;
	}
	
	#remark{
		padding-left:15px;
	}
	
	.orderform,.orderinfo {
		padding-left:15px;
		padding-right:15px;
	}
	
	#lengths{
		padding-right:0px;
	}
	
	#angles{
		padding-left:0px;
		padding-right:0px;
	}
	
	#accessories{
		clear:both;
	}
}

@media only screen and (max-width: 400px) {
	#lengths{
		margin-right:10px;
	}
}

@media only screen and (max-width: 350px) {
	#lengths,#angles{
		float:none;
		padding-left:15px;
		padding-right:15px;
	}
}

@media only screen and (max-width: 375px) {	
	#orderlengths ul li.title span:last-child,#orderlengths ul li span:last-child{
		display:none;
	}
	
	#orderlengths ul li{
		width:240px;
	}
	
	#ordertotal{
		display:none;
	}
}

.nextbutton{
	clear:both;
}

@media only screen and (max-width: 1000px){
	.nextbutton{
		margin-left:5px;
	}
}

.orderbutton a,.modifypopup a,.edge_finish_menu_buttons a,.nextbutton a{
	display:inline-block;
	color:#333;
	font-weight:bold;
	background-color:#ed713b;
	height:50px;
	line-height:50px;
	padding-left:15px;
	padding-right:15px;
	text-decoration:none;
	border-radius:5px;
}

.orderbutton a, .nextbutton a{
	background-color:#DDD;
	margin-bottom:15px;
}

.modifypopup a,.edge_finish_menu_buttons a{
	color:#FFF;
}

.orderbutton a:hover,.nextbutton a:hover{
	background-color:#CCC;
}

.orderbutton a:first-child{
	margin-right:15px;
}

.orderbutton a:last-child{
	background-color:#ed713b;
	color:#FFF;
}

.modifypopup a:nth-child(3),.edge_finish_menu_buttons a:nth-child(1){
	background-color:#DDD;
	color:#333;
}

.modifypopup a:hover,.edge_finish_menu_buttons a:hover{
	background-color:#CCC;
}

.orderbutton a:last-child:hover,.modifypopup a:last-child:hover,.edge_finish_menu_buttons a:last-child:hover{
	background-color:#ec652d;
	color:#FFF;
}

#text2{
	position:absolute;
	top:0px;
	left:0px;
	width:100px;
	z-index:10;
}

#design_logo{
	display:none;
}

h2{
	font-family:arial;
}

.instructions ul,#quickstart ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

.instructions ul li{
	min-height:60px;
	border-bottom:1px dotted #DDD;
	font-family:arial;
	padding-top:5px;
	padding-left:58px;
	padding-bottom:5px;
}

.instructions li img,#quickstart img{
	float:left;
	width:48px;
	height:24px;
	padding-top:12px;
	padding-bottom:12px;
	border:1px solid #DDD;
	border-radius:5px;
	margin-left:-58px;
}

.instructions div,.orderbutton{
	position:fixed;
	bottom:0px;
	left:0px;
	background-color:#FFF;
	border-top:1px solid #DDD;
	width:100%;
	padding-top:15px;
	padding-left:calc(50% - 500px);
	padding-bottom:15px;
}

.orderbutton{
	padding-right:15px;
	padding-bottom:0px;
	width:calc(100% - 30px);
}

.totalprice{
	position:fixed;
	bottom:0px;
	left:50%;
	margin-left:385px;
	width:100px;
	height:80px;
	line-height:80px;
	font-size:16px;
	font-weight:bold;
	font-family:arial;
	text-align:right;
}

@media only screen and (max-width: 1040px) {
	.totalprice{
		left:auto;
		right:34px;
		margin-left:0px;
		z-index:15;
	}
}

.instructions:last-child{
	margin-bottom:80px;
}

@media only screen and (max-width: 1040px) {	
	.instructions div,.orderbutton{
		padding-left:15px;
	}
}

#overlay{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.37);
	z-index:16;
}

#startmenu,#endmenu{
	position:fixed;
	width:350px;
	height:350px;
	top:50%;
	left:50%;
	margin-left:-175px;
	margin-top:-175px;
	background-color:#FFF;
	border:1px solid #515151;
	border-radius:5px;
	z-index:13;
	text-align:center;
}

#endmenu{
	display:none;
}

#startmenu h2,#endmenu h2{
	border-top-left-radius:3px;
	border-top-right-radius:3px;
}

#endmenu span{
	display:block;
	font-weight:bold;
	margin-top:15px;
}

#startmenu ul,#endmenu ul{
	margin:0px;
	padding:0px;
	list-style-type:none;
	margin-left:50%;
}

#startmenu ul a,#endmenu ul a{
	text-decoration:none;
}

#startmenu ul li,#endmenu ul li{
	margin-left:-120px;
	height:50px;
	line-height:50px;
	background-color:#DDD;
	border-radius:5px;
	width:240px;
	margin-top:20px;
	color:#000;
	text-align:left;
}

#startmenu ul li::before,#endmenu ul li::before{
	content:"";
	float:left;
	width:50px;
	height:50px;
	vertical-align:middle;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	margin-right:10px;
}

#startmenu ul a:first-child li::before,#endmenu ul a:first-child li::before{
	background:#ed713b url('img/draw.png') no-repeat 10px center;
}

#startmenu ul a:nth-child(2) li::before,#endmenu ul a:nth-child(2) li::before{
	background:#ed713b url('img/profile.png') no-repeat 10px center;
}

#startmenu ul a:last-child li::before{
	background:#ed713b url('img/help.png') no-repeat 10px center;
}

#endmenu ul a:last-child li::before{
	background:#ed713b url('img/shopping-cart.png') no-repeat 10px center;
}

#startmenu ul li:hover,#endmenu ul li:hover{
	background-color:#ed713b;
	color:#FFF;
}

@media only screen and (max-width: 600px) {
	#startmenu,#endmenu{
		top:0px;
		left:0px;
		border:none;
		width:100%;
		height:100%;
		margin-left:0px;
		margin-top:0px;
		border-radius:0px;
	}
	
	#startmenu h2,#endmenu h2{
		border-top-left-radius:0px;
		border-top-right-radius:0px;
	}
}

@media only screen and (max-width: 270px) {
	#startmenu{
		text-align:left;
	}
	
	#startmenu ul{
		margin-left:0px;
	}
	
	#startmenu ul li{
		margin-left:15px;
		width:200px;
	}
}

#quickstart{
	display:none;
	position:absolute;
	width:550px;
	height:424px;
	top:50%;
	left:50%;
	margin-top:-212px;
	margin-left:-275px;
	z-index:13;
	font-family:arial;
	line-height:48px;
	background-color:#FFF;
	border:1px solid #515151;
	border-radius:5px;
}

#quickstartsmall{
	display:none;
}

#quickstart h2,#startmenu h2,#endmenu h2{
	margin:0px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}

#quickstart ul li{
	line-height:60px;
	border-bottom:1px dotted #DDD;
	padding-left:58px;
}

#quickstart ul li.subtitle{
	text-decoration:underline;
}

#quickstart ul li:last-child{
	border-bottom:none;
}

#quickstart ul li span:first-child{
	display:inline-block;
	width:48px;
	margin-right:10px;
	font-size:30px;
	text-align:center;
	vertical-align: middle;
	margin-left:-58px;
}

#quickstart img{
	float:none;
	display:inline-block;
	margin-left:0px;
	vertical-align: middle;
}

#quickstart div{
	margin-left:60px;
	margin-top:6px;
	margin-bottom:11px;
}

#quickstart a,.instructions a{
	display:inline-block;
	height:48px;
	line-height:48px;
	background-color:#ed713b;
	border-radius:5px;
	padding-left:15px;
	padding-right:15px;
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
}

#quickstart a:last-child,.instructions a:nth-child(2){
	background-color:#DDD;
	color:#333;
	margin-left:15px;
}

#quickstart a:last-child:hover,.instructions a:nth-child(2):hover{
	background-color:#CCC;
}

#quickstart a:not(:last-child):hover,.instructions a:hover{
	background-color:#ec652d;
}

.remark{
	margin-bottom:15px;
	font-style:italic;
}

.remark.inactive{
	display:none;
}

#remark{
	margin-bottom:15px;
}

/*
@media only screen and (max-width: 1000px) {
	#quickstart{
		width:96%;
		top:70px;
		left:2%;
		margin-top:0px;
		margin-left:0px;
		
	}
	
	#quickstart ul li{
		padding-right:2%;
	}
	
	
}*/
@media only screen and (max-width: 1000px) {
	.instructions ul li{
		padding-left:77px;
		padding-right:5px;
	}
	
	.instructions ul li img{
		margin-left:-62px;
	}
}

@media only screen and (max-width: 575px) {
	#quickstart{
		top:0px;
		width:100%;
		min-width:314px;
		margin:0px;
		left:0px;
		border:none;
		border-radius:0px;
		background-color:#FFF;
		min-height:100%;
	}
	
	#quickstart h2{
		border-radius:0px;
	}
	
	#quickstartwide{
		display:none;
	}
	
	#quickstartsmall{
		display:block;
	}
	/*
	#quickstartsmall h2{
		border-radius:0px;
	}
	
	#quickstart li, #quickstartsmall li{
		border-bottom:1px solid #DDD;
	}
	*/
	
	#quickstart ul{
		margin-bottom:80px;
	}
	
	#quickstart ul li{
		padding-left:15px;
	}
	
	#quickstart ul li img:last-child{
		margin-right:10px;
	}
	
	#quickstart ul li span:first-child{
		margin-left:0px;
		height:28px;
		line-height:24px;
		width:36px;
		margin-right:10px;
		display:inline-block;
		font-size:24px;
		text-align:center;
		vertical-align: middle;
	}
	
	#quickstart div,.instructions div,.orderbutton{
		position:fixed;
		bottom:0px;
		left:0px;
		background-color:#FFF;
		border-top:1px solid #DDD;
		width:100%;
		margin-left:0px;
		margin-bottom:0px;
		padding-top:15px;
		padding-bottom:15px;
		padding-left:15px;
		z-index:11;
	}
	
	#accessories ul li:not(.accessory_option) span:nth-child(4), #accessories ul li.accessory_option span:nth-child(3){
		display:none;
	}
	
	#accessories ul li:not(.accessory_option) span:nth-child(5), #accessories ul li.accessory_option span:nth-child(4){
		display:block;
	}
	
	.orderbutton{
		padding-bottom:0px;
	}
	
	.orderbutton a{
		display:block;
		float:left;
		clear:left;
	}
	
	.totalprice{
		height:160px;
		line-height:160px;
	}
	
	/*.orderbutton{
		padding-right:15px;
		padding-bottom:0px;
		width:calc(100% - 30px);
	}*/
	
	#container h2{
		border-radius:0px;
		margin-top:0px;
	}
	
	.instructions:last-child{
		margin-bottom:80px;
	}
	
	#remark{
		padding-left:15px;
		padding-right:15px;
	}
}

/*
@media only screen and (min-width: 584px) and (max-width:585px){
	#quickstart{
		width:500px;
		top:75px;
		left:50%;
		margin-left:-250px;
		border:1px solid #DDD;
		border-radius:5px;
	}
	
	#quickstart h2{
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		padding-left:25px;
	}
	
	#quickstart ul li{
		padding-left:25px;
	}
	
	#quickstart ul li img:last-child,#quickstart ul li span:first-child{
		margin-right:10px;
	}
		
	#quickstart div{
		left:50%;
		margin-left:-249px;
		width:475px;
		padding-left:25px;
	}
}*/

@media only screen and (max-width: 360px) {
	#quickstart a:first-child{
		margin-right:50px;
	}
	
	#quickstart a:last-child{
		margin-left:0px;
		margin-top:15px;
	}
	
	#quickstart ul{
		margin-bottom:145px;
	}
}

#MaterialTitle{
	position:fixed;
	left:10px;
	bottom:10px;
	font-weight:bold;
	font-size:14px;
}

#MaterialTitle:hover{
	cursor:pointer;
	color:#ec652d;
}

#MaterialTitle span{
	background-color:#FFF;
}

@media only screen and (max-width: 650px) {
	#MaterialTitle{
		left:50%;
		width:200px;
		margin-left:-100px;
		text-align:center;
		bottom:8px;
	}
}

.sidebar{
	position:fixed;
	right:0px;
	top:50%;
	margin-top:-24px;
	width:48px;
	height:48px;
	line-height:48px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	text-align:center;
	font-size:30px;
	text-decoration:none;
	color:#FFF;
}

#help.sidebar{
	background:#DDD url('img/help.png') no-repeat center center;
}

#profile.sidebar{
	margin-top:-82px;
	background:#DDD url('img/profile.png') no-repeat center center;
}

#closewindow.sidebar{
	margin-top:34px;
	background-color:#DDD;
}

#close.sidebar{
	display:none;
	visibility:hidden;
	background:#DDD url('img/close.png') no-repeat center center;
}

#help.sidebar:hover,#profile.sidebar:hover,#close.sidebar:hover,#closewindow.sidebar:hover{
	background-color:#ed713b;
}

#help.fullscreen{
	margin-top:-53px;
}

#profile.fullscreen{
	margin-top:-111px;
}

#closewindow.fullscreen{
	margin-top:5px;
}

#close.fullscreen{
	display:block;
	visibility:visible;
	margin-top:63px;
}

.modifypopup{
	display:none;
	position:absolute;
	top:65px;
	left:50%;
	width:300px;
	height:200px;
	margin-left:-150px;
	background-color:#FFF;
	border:1px solid #DDD;
	border-radius:5px;
	z-index:10;
}

#logoutnotification{
	position:fixed;
	z-index:17;
	border-color:1px solid #515151;
}

#logoutnotification p{
	padding-left:15px;
	margin:0px;
	padding-top:5px;
}

#logoutnotification span{
	border:none;
	padding:0px;
	margin:0px;
}

#materialpopup{
	width:350px;
	margin-left:-175px;
}

.modifypopup h2,.edge_finish_menu h2{
	margin-top:0px;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}

.modifypopup span{
	display:inline-block;
	border:1px solid #DDD;
	border-radius:5px;
	margin-left:15px;
	padding-right:10px;
	padding-left:5px;
}

.modifypopup a,.edge_finish_menu_buttons a{
	margin-left:15px;
	margin-top:15px;
}

#profiles{
	overflow: auto;
	margin-bottom:80px;
}

#profiles ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#profiles a{
	color:#000;
	text-decoration:none;
	font-family:arial;
}

#profiles li{
	float:left;
	border:2px solid #DDD;
	border-radius:5px;
	padding-bottom:10px;
	margin-bottom:20px;
	text-align:center;
}

#profiles li:hover{
	border:2px solid #AAA;
}

#profiles span{
	display:block;
}

@media only screen and (min-width: 1000px) {
	#profiles li{
		width:calc((100% - 53px)/3);
	}
	
	#profiles a:nth-child(3n-1) li,#profiles a:nth-child(3n) li{
		margin-left:20px;
	}
	
	#profiles.NotSuitableForPlastisolPVDF a:nth-child(3n-1) li{
		margin-left:0px;
	}
	
	#profiles.NotSuitableForPlastisolPVDF a:nth-child(3n-2) li{
		margin-left:20px;
	}
}

@media only screen and (max-width: 1000px) {
	#profiles li{
		width:calc((100% - 92px)/3);
		margin-left:20px;
	}
}


@media only screen and (max-width: 900px) {
	#profiles li{
		width:calc((100% - 68px)/2);
	}
}

@media only screen and (max-width: 600px) {
	#profiles li{
		float:none;
		width:calc(100% - 44px);
	}
}

.ProfileType{
	padding-right:15px;
	padding-bottom:15px;
}

.ProfileTypeButton{
	display:inline-block;
	height:30px;
	line-height:30px;
	padding-left:10px;
	padding-right:10px;
	text-decoration:none;
	color:#777;
	border:1px solid #DDD;
	border-radius:5px;
}

.ProfileTypeButton:hover{
	color:#000;
}

@media only screen and (max-width: 1000px) {
	.ProfileType{
		padding-bottom:15px;
		padding-left:15px;
	}
}

@media only screen and (min-width: 450px) {
	.ProfileTypeButton{
		margin-left:20px;
	}
}

.spinner{
	display:inline-block;
	width:25px;
	height:50px;
	position:relative;
	vertical-align:bottom;
	margin-left:-25px;
}

a.spinnerplus,a.spinnerminus{
	position:absolute;
	top:0px;
	width:25px;
	height:25px;
	line-height:25px;
	text-align:center;
	background-color:#FFF;
	font-size:10px;
	color:#CCC;
}

a.spinnerplus:hover,a.spinnerminus:hover{
	background-color:#EEE;
	color:#333;
	text-decoration:none;
}

a.spinnerminus{
	top:25px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

#closeframe,#closeframe2{
	position:fixed;
	top:15px;
	left:50%;
	margin-left:515px;
	width:50px;
	height:50px;
	text-align:center;
	line-height:50px;
	color:#555;
	font-size:30px;
	background-color:#DDD;
	border-radius:5px;
	z-index:15;
}

#closeframe2{
	top:50%;
	margin-top:-175px;
	margin-left:190px;
}

#closeframe:hover,#closeframe2:hover{
	cursor:pointer;
	color:#FFF;
	background-color:#ed713b;
}

@media only screen and (min-width: 1000px) and (max-width: 1160px) {
	#closeframe{
		top:15px;
		left:auto;
		right:15px;
		margin-left:0px;
	}
}

@media only screen and (max-width: 1000px) {
	#closeframe{
		top:0px;
		left:auto;
		right:0px;
		border-radius:0px;
		border-bottom-left-radius:5px;
		margin-left:0px;
	}
}

@media only screen and (max-width: 600px) {
	#closeframe2{
		top:0px;
		left:auto;
		right:0px;
		border-radius:0px;
		border-bottom-left-radius:5px;
		margin-top:0px;
		margin-left:0px;
	}
}

#project{
	margin-bottom:100px;
}

@media only screen and (max-width: 575px) {
	#project{
		margin-bottom:165px;
	}
}

#add_project{
	display:none;
}

#project_new{
	width:calc(100% - 10px);
	height:47px;
	border:none;
	border-radius:5px;
	padding-left:10px;
	font-size:14px;
	color:#777;
}

#project_new.focused{
	color:#000;
}

.orderinfo{
	
}

.explanation{
	display:none;
	border:1px solid #DDD;
	border-radius:5px;
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	margin-bottom:5px;
}

.explanation ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
	clear:both;
	overflow:auto;
}

.explanation li{
	float:left;
	height:225px;
	width:200px;
	background-size:auto 200px;
	background-repeat:no-repeat;
	margin-right:10px;
	margin-bottom:10px;
	text-align:center;
	line-height:25px;
}

.explanation li::before{
	display:block;
	content:"";
	height:200px;
}

.explanation li#wit-structuur{
	background-image:url('img/plastisol-wit-structuur.png');
}

.explanation li#merlin-grey-structuur{
	background-image:url('img/plastisol-merlin-grey-structuur.png');
}

.explanation li#antraciet-structuur{
	background-image:url('img/plastisol-antraciet-structuur.png');
}

.explanation li#zwart-structuur{
	background-image:url('img/plastisol-zwart-structuur.png');
}

.explanation li#zinkgrijs-glad{
	background-image:url('img/plastisol-zinkgrijs-glad.png');
}

.explanation li#antraciet-glad{
	background-image:url('img/plastisol-antraciet-glad.png');
}

#videooverlay {
	display:none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 15;
    cursor: pointer;
}

#instructionvideo{
	left:0px;
    width: 100%;
    padding-top: 56.25%;
	height:0px;
    box-sizing: border-box;
    position: relative;
	z-index:16;
}

#instructionvideo iframe{
	position: absolute;
    top: 0;
    left: 0;
	width:100%;
	height:100%;
}

#accessories ul li.SuppliesHidden,#accessories ul li.SuppliesClamp,#accessories ul li.SuppliesEndplate,#accessories ul li.SuppliesSeparationExpansion,#accessories ul li.SuppliesExpansionRib,#accessories ul li.SuppliesOutlet,#accessories ul li.SuppliesWindowSill{
	display:none;
}

#accessories ul li.SuppliesActive{
	display:list-item;
}

#accessories ul li.SuppliesUnavailable{
	display:none;
}

.faq-question{
	height:40px;
	line-height:40px;
	font-size:16px;
	font-weight:bold;
	padding-left:15px;
	padding-right:15px;
	background-color:#DDD;
	border:1px solid #DDD;
	border-radius:5px;
	color:#515151;
}

.faq-question:hover{
	cursor:pointer;
	background-color:#ed713b;
	border:1px solid #ed713b;
	color:#FFF;
}

.faq-question.active{
	background-color:#ed713b;
	border:1px solid #ed713b;
	color:#FFF;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}

.faq-question.inactive::after{
	content:"\002B";
	float:right;
	font-size:20px;
}

.faq-question.active::after{
	content:"\2212";
	float:right;
	font-size:20px;
}

.faq-answer{
	display:none;
	padding-left:15px;
	padding-right:15px;
	padding-top:15px;
	padding-bottom:15px;
	border:1px solid #DDD;
	border-top:none;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

.orderinfo{
	margin-bottom:10px;
	margin-top:-10px;
}

.orderinfo a{
	color:#000;
	text-decoration:none;
	line-height:30px;
}

.tab{
	display:none;
}

.tabactive{
	display:block;
}

.option_link,.option_link_float,.option_link_float_three{
	display:block;
	border:2px solid #FFF;
	margin-bottom:5px;
	border-radius:5px;
	width:calc(100% - 4px);
}

.option_link_float span,.option_link_float_three span{
	display:block;
	color:#000;
	line-height:25px;
}

a.option_link_float_three{
	text-decoration:none;
}

@media only screen and (min-width: 1000px) {
	.option_link_float{
		float:left;
		width:calc(50% - 19px);
		padding-left:10px;
		text-align:center;
	}
	
	.option_link_float_three{
		float:left;
		width:calc(33% - 18px);
		padding-left:10px;
		text-align:center;
	}
	
	.option_link_float:first-child, .option_link_float_three:not(:last-child){
		margin-right:10px;
	}
}

a.option_link:hover,a.option_link_float:hover,a.option_link_float_three:hover,.option_link_selected{
	border:2px solid #DDD;
}

#tabmenu ul{
	margin:0px;
	padding:0px;
	list-style-type:none;
	height:40px;
	border-left:1px solid #DDD;
	border-right:1px solid #DDD;
	border-bottom:1px solid #DDD;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	background-color:#DDD;
}

#tabmenu li{
	float:left;
	line-height:40px;
	width:calc(12.5%);
	font-size:14px;
	text-align:center;
	color:#000;
}

#tabmenu a:not(:first-child) li{
	width:calc(12.5% - 1px);
	border-left:1px solid #FFF;
}

#tabmenu li:hover:not(.inactive){
	background-color:#CCC;
}

#tabmenu li.inactive{
	background-color:#EEE;
	color:#BBB;
	cursor:default;
}

@media only screen and (max-width: 1000px) {
	#tabmenu span{
		display:none;
	}
}

#tab_notification{
	display:none;
	height:50px;
	line-height:50px;
	border-radius:5px;
	border:1px solid #DDD;
	padding-left:15px;
	position:relative;
}

#tab_notification::before{
	content:"\25B2";
	display:block;
	position:absolute;
	top:-18px;
	left:20px;
	height:20px;
	line-height:20px;
	font-size:20px;
	color:#DDD;
}