@charset "UTF-8";			
			
.WorkArea
{	
	float:left; 
	/* font-size: x-large; */
	width:100%;	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: table;
	
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
	
	background-color:#DADADA;
	border-color: #888888;
	border-style: solid;
	border-width: 1px;
	
	/* border-radius: 0px 0px 15px 15px; */
	/* padding-top:10px; */
	
	/* background-color:#6b6; */	
	margin-bottom:10px;	
}

#HandlerBox 
{ 
	display:table-cell;  
	margin: 10px; 
	/* position:relative; */ /* Ha ez be van kapcsolva, akkor a canvas nem fogadja a touch eseményeket, mert lefedi azt...*/
	vertical-align: bottom;	
	/*
	padding-left: 10px;
	
	padding-bottom: 10px;
	*/
	padding-right: 10px; 
	font-size: large;
	
	/* background-color: yellow; */
}

#WorkCanvas{float:left; /* cursor: move; */ }

.CanvasBox
{
	display: inline-block;		
	line-height: 100%;
	vertical-align: top;
	padding:0px 3px 3px 0px;	
	
	/* background-color: olive; */ 
}  

.ToolBar 
{
  display: inline-block; 		
	line-height: 100%;	
	vertical-align: bottom;	
	
	/* background-color:pink; */
}		

.NavBar
{
	display: block;
	width: 100%;	
	float: left;
	margin:10px 10px 10px 0px;
	
	/* background-color:red; */	
}
	
.SquareButton
{
	margin: 5px;
	display: table-cell;		
	float: left;
	cursor: pointer;
	user-select: element;
		
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */ 
}

.SquareButton:hover
{
	filter:brightness(95%);
	/*margin:4px 6px 6px 4px;*/
	/*box-shadow:2px 2px 1px #444;*/
}

.SquareButton:active
{
	margin:6px 4px 4px 6px;
	/*margin: 5px 5px 5px 5px;*/
}
	
.BackButton
{
	float: left;
	/*left: 5px;*/	
	position: relative;
}

.BackButton a 
{
	color: white;
	text-decoration: none;
	height: 100%;	
}	

.NextButton
{
	float: right;
	/* line-height: 34px; */
}

.CommandButton
{
	border-radius: 2px;
	color: white;
	background: linear-gradient(0deg,hsl(212, 51%, 36%),hsl(212, 51%, 60%));	
	line-height: 34px;
	
	border-color:#2d5a8c;
	border-style: solid;
	border-width: 1px;
	font-size: medium; 		
	display: table-cell;
	
	padding-left: 15px;
	padding-right: 15px;
	cursor: pointer;
		
	-webkit-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.InsideButton { margin-left: 10px; }

.CommandButton:hover { background: linear-gradient(0deg,hsl(212, 51%, 46%),hsl(212, 51%, 70%)); }
.CommandButton:active { background: linear-gradient(0deg,hsl(212, 51%, 70%),hsl(212, 51%, 46%)); }
.CommandButton:disabled { background: linear-gradient(0deg,hsl(0, 0%, 36%),hsl(0, 0%, 60%)); opacity:0.5; }
.CommandButtonDisabled, .CommandButtonDisabled:hover { background: linear-gradient(0deg,hsl(0, 0%, 36%),hsl(0, 0%, 60%)); opacity:0.5; cursor: default; }

#btn_ScaleDown { background-position: -95px -132px;}
#btn_ScaleDown:active { top: 1px; left: 1px;}
#btn_MoveUp { background-position: -135px -132px;}
#btn_MoveUp:active { top: 1px; left: 1px;}
#btn_ScaleUp { background-position: -175px -132px;}
#btn_ScaleUp:active { top: 1px; left: 1px;}

#btn_MoveLeft { background-position: -95px -172px;}
#btn_MoveLeft:active { top: 1px; left: 1px;}
#btn_MoveDown { background-position: -135px -172px;}
#btn_MoveDown:active { top: 1px; left: 1px;}
#btn_MoveRight { background-position: -175px -172px;}
#btn_MoveRight:active { top: 1px; left: 1px;}

@media screen and (max-aspect-ratio: 1/1) 
{ 
	.WorkArea{display:block; /*margin-bottom:10px; padding-bottom:10px;*/}	
	.CanvasBox{display:block; padding:0px; /*width:100%; float:left;*/}
	#WorkCanvas{/*margin-left:auto; margin-right:auto;*/float:none;}
	#HandlerBox{display:block; width:auto; padding-left:0px; padding-right:0px; margin-top:0px;/*vertical-align: top;*/}
	.BackButton{left: 0px;}
}