@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,urrent
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	/*font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	vertical-align: middle;	*/
	
}

*{
	-webkit-tap-highlight-color: transparent
}

html, body{
	font-family:Arial, Helvetica, sans-serif;
	padding:0;
	margin:0;
	
	/*overflow:hidden;
	max-height:634px;
	
	
	min-width:943px;*/
	
}

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

#start{
	width:100%;  height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:20;  
	text-align:center; 	
}
#start_logo{
	position:absolute;
	z-index:21; 
	top:30%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

#canvas_holder{
	/*float:left;
	width:960px;
	height:490px;
	margin-top:10px;
	margin-left:0px;*/
	background-color:#f5f5f5;
	margin:0 auto;	
	/*max-width:650px;*/
	
}

#theCanvas{
	position:absolute;
	cursor:default;	
	/*max-width:650px;*/
	
	
}
#drag-container{
	position:absolute;
	/*top:165px;*/
	top:-1000px;
	width:1000px;
	height:1000px;
	/*background-color:#FFF;*/
	cursor:pointer;	
	opacity:0.01;
	filter: alpha(opacity = 10);	
}
#drag-element{
	width:4px;
	height:4px;
	
}



#black-overlay{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:20;
	display:none;
	text-align:center;
	vertical-align:middle;
}

#menu{ width:2500px} /*eerst even te groot om verspringen tegen te gaan*/



#overlay{
	position:absolute; 
	width:100%; 
	height:100%; 
	background:rgba(0,0,0,0.2);  
	z-index:11; 
	display:none;
}

#real_size_page{
	position:absolute; 
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);	
	padding:0 50px; 
	background-color:transparent;
	background-image:url(../images/rz_bg3.png); background-position:center; background-size:100%;
	border:solid 2px #444;
	border-radius:8px; 
	box-shadow:0 0 15px #000;  
	display:none;
	z-index:11; 
	
}
#real_size_page_top_txt1{text-align:center; font-size:20px; font-weight:bold; padding:5px 0 0 0; }

#real_size_page_top_txt2{text-align:center;  }

#real_size_page_bottom_txt{text-align:center; font-size:x-small;  padding: 3px; }

#real_size_page #preview_image_holder img{}


#real_size_page_close{position: absolute; top:5px; right:5px;}

#confirm_change{position:absolute;  z-index:12; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); background-color:#000; border:solid 1px #fff; font-size:120%; font-weight:bold; color:#fff; border-radius:5px; padding:10px; padding-bottom:20px; text-align:center; box-shadow: 0 0 10px #000; display: none;}
#confirm_change #change_question{margin-bottom:10px;}
#confirm_change #existinglost{font-size:80%;margin-bottom:20px; font-weight:normal; white-space:pre-line;}
#confirm_change #change_yes, #confirm_change #change_no{display:inline; border:solid 2px #fff; border-radius:2px; padding:4px 15px; background-color:#f5f5f5; color:#000; text-shadow:1px 1px 1px #fff; cursor:pointer;}
#confirm_change #change_yes:hover, #confirm_change #change_no:hover{background-color:#fff;}

#confirm_save{position:absolute;  z-index:12; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);background-color:#000; border:solid 1px #fff; font-size:120%; font-weight:bold; color:#fff; border-radius:5px; padding:10px 20px 20px 20px;  text-align:center; box-shadow: 0 0 10px #000; display:none;}
#confirm_save #save_question{margin-bottom:2px;}
#confirm_save #save_sub{margin-bottom:15px;font-size:80%; font-weight:normal;}
#confirm_save #save_yes, #confirm_save #save_no{display:inline; border:solid 2px #fff; border-radius:2px; padding:4px 15px; background-color:#f5f5f5; color:#000; text-shadow:1px 1px 1px #fff; cursor:pointer;}
#confirm_save #save_yes:hover, #confirm_save #save_no:hover{background-color:#fff;}

#save_wait{position:absolute; z-index:15; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);background-color:#444; border:solid 1px #fff; font-size:22px; font-weight:bold; color:#fff; border-radius:5px; padding:10px; text-align:center;box-shadow: 0 0 10px #000; display:none;}

#confirm_delete{position:absolute;  z-index:12; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);background-color:#000; border:solid 1px #fff; font-size:120%; font-weight:bold; color:#fff; border-radius:5px; padding:10px 20px 20px 20px;  text-align:center; box-shadow: 0 0 10px #000; display:none;}
#confirm_delete #delete_question{}
#delete_session_name{margin-bottom:15px; }
#confirm_delete #delete_yes, #confirm_delete #delete_no{display:inline; border:solid 2px #fff; border-radius:2px; padding:4px 15px; background-color:#f5f5f5; color:#000; text-shadow:1px 1px 1px #fff; cursor:pointer;}
#confirm_delete #delete_yes:hover, #confirm_delete #delete_no:hover{background-color:#fff;}
#delete_exist{font-size:80%; margin-top:20px; font-weight:normal; display:none;}


#preview_image_holder{text-align:center; border:solid 1px #fff;}

#menu_holder{
	width:100%; 
	overflow-x:hidden; /* for desktop hidden; */
	overflow-y:hidden;
	box-shadow:0 8px 10px #aaa;
	-webkit-overflow-scrolling:touch;
	background-color:#444;
	border-top:solid 2px #fff; 
	border-bottom:solid 2px #fff;
	text-align:center;
}

#menu{
	margin:0 auto;	
	width:100%;
}


.ios_select{padding-bottom:3px; padding-top:3px; border:mone; background-color:transparent;}
/*.android_select{padding-bottom:5px; padding-top:4px;}*/
.android_select{padding-bottom:4px; padding-top:3px;}

select#select-size option{
	appearance:none;
	border-bottom: solid 1px #000; line-height:1.5;
}
select#select-size{
	appearance:none;
	border-bottom: dashed 1px #000;
}

select#select-size optgroup{
	background-color:#444; 
	color:#fff;
	border-bottom: solid 1px #000; 
	font-style:normal;
	font-size:18px;
}

#l-arrow, #r-arrow{
	padding-left:15px; 
	padding-right:15px; 
	min-width:20px;
	visibility:hidden;	
	position:absolute;
}
#l-arrow:hover, #r-arrow:hover{
	box-shadow:inset 3px 3px 3px #000;
}
#l-arrow{left:0;border-right:solid 2px #888;}
#r-arrow{right:0;border-left:solid 2px #aaa;}

#icon_holder{
	position:absolute; 
	z-index:20;
	left:0;
	bottom:36px; 	
	background-color:#444; 
	border-top:solid 1px #000;
	
	opacity:0.91; 
	width:100%; 
	height:60px;
}

#icon_scroller{
	position:absolute;
	left:60px;
	width:Calc(100% - 180px); 
	/*height:52px;*/
	height:57px;
	/*margin-top:-20px; */
	padding-left:5px; 
	
	background:#444; 
	border:solid 2px #444; 
	border-top:solid 5px #444; 
	overflow-x:hidden; 
	overflow-y:hidden;
	/*-webkit-overflow-scrolling:touch;*/
}

#icon_arrow_l{position:absolute; margin-top:11px; margin-left:7px; transform:rotate(-180deg); cursor:pointer; border:solid 2px #fff; background-color:#fff;width:38px; height:38px; border-radius:50px;}
#icon_arrow_l:hover{background-color:#f00;}
#icon_arrow_r{position:absolute; margin-top:11px; right:60px; cursor:pointer; border:solid 2px #fff; background-color:#fff;width:38px; height:38px; border-radius:50px;}
#icon_arrow_r:hover{background-color:#f00;}

#pattern-holder-holder{width:100%; padding: 8px 0 3px 0; box-sizing:border-box;  overflow-y:hidden; -webkit-overflow-scrolling:touch; border-right: solid 5px #444;border-left:solid 5px #444; height:68px;background-color:#444; color:#fff;}

#pattern_scroll_arrows_holder{text-align:center; font-size:x-small;}
.pattern_arrow{display:inline-block;float:left; padding:5px; cursor:pointer;  }
#pattern_left_arrow{float:left;}
#pattern_right_arrow{float:right}

#icon_holder_close, #pattern_holder_close{
	float:right; 
	margin-top:12px; 
	margin-right:10px;
}

#sel_div{
	position:absolute; left:0; top:-2px;
	top:103px;
	z-index:2;
	text-align:center; 	
	padding:2px 0 4px 0;
	box-sizing:border-box;
	width:100%;
	font-size:20px;
}

#footer {
	position:fixed;
	z-index:9;
	bottom:0;
	width:100%;	
	/*min-width:943px;
	padding:4px 15px;*/
	font-size:14px;
	font-weight:bold;	
	color:#fff;
	padding:5px 0 3px 0;
	text-align:center;
	box-sizing:border-box;
	
}

#visi_txt{
	float:left; 
	margin-right:10px; 
	margin-left:10px; 
	font-size:18px;
	padding-top:3px;
}
.visi_but{
	display:inline-block; 
	border:solid 2px #444; 
	padding:3px 10px; 
	border-radius:2px;
	font-size:16px;
	/*box-shadow:inset 2px 2px 2px rgba(215,215,215,1), inset -2px -2px 2px #000;*/
	cursor:pointer;
}
.visi_checked{ 
	
}
.visi_unchecked{ 	
	
	box-shadow:inset 2px 2px 2px rgba(0,0,0,1), inset -1px -1px 1px #aaa;
}

.visi_inactive{
	background-color:#666;
	opacity:0.5;
}
#temp-image-holder{
	position:absolute;
	top:5000px;
	left:5000px;
	display:none;	
}

#button_resize{position:absolute;z-index:10; margin-top:5px; margin-left:5px; font-size:x-small;}
#button_resize span{cursor:pointer;}
.resize_but_border{border:solid 1px #f00; border-radius:20px;cursor:default;}
#mini_warning{margin-left:-45px; margin-right:-45px; text-align:center}

#clicker{position:absolute; z-index:13; width:200px;  top:50%;  -webkit-transform:translateY(-50%); transform:translateY(-50%); background-color:#000; color:#fff; border:solid 2px #fff; border-radius:5px; padding:20px; font-weight:bold; font-size:18px; text-align:center; display:none;}

#save_load_holder{position:absolute; z-index:12; top:100px;  background-color:#fff; border:solid 1px #ccc; display:none;}

#startup_reader{position:absolute; z-index:12; width:350px;  top:50%; left:50%; transform:translate(-50%,-50%); background-color:#f5f5f5; border:solid 1px #444; display:none;}
#startup_reader_header{padding:10px; background-color:#444; color:#fff; box-sizing:border-box;}
#startup_closer{float:right; padding:4px; font-size:110%; font-weight:bold; margin-top:-8px; cursor:pointer; }
#startups{ max-height:250px; overflow:auto; backgrond-color:#eee}
.startup_files{padding:5px 10px; cursor:pointer; box-sizing:border-box; width:100%; border-bottom:solid 1px #ccc; display:inline-block; transition:0.4s;}
.startup_files:hover{background-color:#09c; color:#fff;}
/*.startup_files_del{display:inline-block; padding:0 5px 1px 5px;  border:solid 1px #aaa; cursor:pointer; margin-top:-3px; }
.startup_files_del:hover{background-color:#f00; color:#fff; }*/

#startup_reader_delete{position:absolute; z-index:12; width:350px;  top:50%; left:50%; transform:translate(-50%,-50%); background-color:#f5f5f5; border:solid 1px #444; display:none;}
#startup_reader_header_delete{padding:10px; background-color:#444; color:#fff; box-sizing:border-box;}
#startup_closer_delete{float:right; padding:4px; font-size:110%; font-weight:bold; margin-top:-8px; cursor:pointer; }
#startup_delete{ max-height:212px; overflow:auto; backgrond-color:#eee}
.startup_files_delete{padding:5px 10px; cursor:pointer; box-sizing:border-box; width:100%; border-bottom:solid 1px #ccc; display:inline-block; transition:0.4s;}
.startup_files_delete:hover{background-color:#f00; color:#fff;}
/*.startup_files_del{display:inline-block; padding:0 5px 1px 5px;  border:solid 1px #aaa; cursor:pointer; margin-top:-3px; }
.startup_files_del:hover{background-color:#f00; color:#fff; }*/

#startup_save_holder{position:absolute; z-index:12; width:390px;  top:50%; left:50%; transform:translate(-50%,-50%); background-color:#fff; text-align:center;  border:solid 1px #aaa; display:none;}
#startup_save_header{padding:10px; background-color:#444; color:#fff;}
#startup_save_header_txt{margin-bottom:5px;}
#startup_save_header_txt_sub{font-size:80%;}
#startup_save_closer{float:right; padding:4px; font-size:110%; font-weight:bold; margin-top:-8px; cursor:pointer;}
input#startup_name{width:70%;}
.startup_files_save{padding:5px 10px; cursor:pointer; box-sizing:border-box; width:100%; border-bottom:solid 1px #ccc; display:inline-block; transition:0.4s;}
.startup_files_save:hover{background-color:#09c; color:#fff;}
#startup_input_holder{padding:8px; border-bottom:solid 1px #ccc; background-color:#aaa;}
#startup_reader_save{text-align:left; max-height:212px; overflow-y:auto;}

.save_buttons{border-bottom:solid 1px #ddd;padding:8px;cursor:pointer;transition:0.4s}
.save_buttons:hover{background:#09c; color:#fff;}
.save_buttons div{}
.save_txt{display:inline-block;width:170px; vertical-align:top;}
.save_explain{font-size:small; opacity:0.7; display:inline-block; width:350px;}
.save_explain:hover{opacity:1;}

/*get scrollbars in safari ?????
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}*/

.black{color:#000;}
.red{color:#f00;}
.current{background-color:#ddd;font-weight:bold;}
.current::after{content:"*"}


#alerter{position:absolute; z-index:20; left:50%; top:50%; transform:translate(-50%,-50%); background-color:#444; color:#fff; width:250px; padding:20px; box-sizing:border-box; border:solid 2px #fff; cursor:pointer; font-size:18px; text-align:center; white-space:pre-line; display:none;}
.addcross{color:#f00}
.addcross:after{content:"*"};


/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	
	#menu_holder{overflow-x:auto;}
	#l-arrow, #r-arrow{position:static;}
	#l-arrow:hover, #r-arrow:hover{box-shadow:none;}
	#icon_scroller{overflow-x:auto;}	
	#icon_arrow_l, #icon_arrow_r{display:none; }
	#icon_scroller{position:absolute; left:10px; width:Calc(100% - 90px);}
	.save_buttons{padding:13px 8px;}
	#save_load_holder{top:103px;}
	
}


/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	
	#menu_holder{overflow-x:auto;}
	#l-arrow, #r-arrow{position:static;}
	#l-arrow:hover, #r-arrow:hover{box-shadow:none;}
	#icon_scroller{overflow-x:auto;}	
	#icon_arrow_l, #icon_arrow_r{display:none;}
	#icon_scroller{position:absolute; left:10px; width:Calc(100% - 90px);}
	.save_buttons{padding:13px 8px;}
	#save_load_holder{top:103px;}
}



/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
	
	#menu_holder{overflow-x:auto; }
	#l-arrow, #r-arrow{position:static;}
	#l-arrow:hover, #r-arrow:hover{box-shadow:none;}
	#icon_scroller{overflow-x:auto;}
	#icon_arrow_l, #icon_arrow_r{display:none;}
	#icon_scroller{position:absolute; left:10px; width:Calc(100% - 90px);}
	.save_buttons{padding:13px 8px;}
	#save_load_holder{top:103px;}
}

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {
	
	#menu_holder{overflow-x:auto;}
	#l-arrow, #r-arrow{position:static;}
	#l-arrow:hover, #r-arrow:hover{box-shadow:none;}
	#icon_scroller{overflow-x:auto;}
	#icon_arrow_l, #icon_arrow_r{display:none;}
	#icon_scroller{position:absolute; left:10px; width:Calc(100% - 90px);}
	.save_buttons{padding:13px 8px;}
	#save_load_holder{top:103px;}
}