/*
Table of Contents:
	1. General
	2. Header
		2.1 Navigation
	3. Footer
	4. Sidebar
	5. Print
	6. Content
*/

/* ========== 1. General ==================================================== */

*{
	box-sizing: border-box;
}
body {
	font-size: 75%; /* Resets to 12px */
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0px;
	padding: 0px;
	padding-top: 30px;
	background-color:#727272;
	font-weight: normal;
	overflow: hidden;
}
canvas{
	position: absolute;
	outline: none;
	/* disable select canvas */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */

	/* disable antialiasing */
	image-rendering: optimizeSpeed;             /* Older versions of FF          */
	image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
	image-rendering: -webkit-optimize-contrast; /* Safari                        */
	image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
	image-rendering: pixelated;                 /* Awesome future-browsers       */
	-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}
img{
	border: none;
}
td, th{
	vertical-align:top;
}
table{
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
}
input[type="text"], input[type="button"], select, input[type="number"]{
	border:1px solid #393939;
	padding:1px 3px;
}
input[type="range"]{
	margin-left:0px;
	width:100%;
}
input[type="button"]:disabled {
	visibility:hidden;
}
input[type="button"]{
	background: #dddddd;
}

/* ========== 2. Header ===================================================== */

#logo{
	display: block;
	height: 30px;
	padding: 5px 5px 5px 36px;
	margin: 5px 0 10px 0;
	background: url("../img/logo.png") no-repeat 3px 0px;
	background-size: auto 30px;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	font-size: 13px;
}
#logo:hover{
	animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
	10%, 90% {
		background-position: 2px 0px;
	}
	20%, 80% {
		background-position: 5px 0px;
	}
	30%, 50%, 70% {
		background-position: 0px 0px;
	}
	40%, 60% {
		background-position: 6px 0px;
	}
}

/* ========== 2.1 Navigation ================================================ */

#mobile_menu{
	display:none;
	position: absolute;
	width:100%;
	top: 0;
}
.left_mobile_menu, .right_mobile_menu{
	position:absolute;
	background: url('../img/sprites.png') no-repeat -50px -100px;
	width:50px;
	height:50px;
	display:block;
	top:0;
	z-index:200;
}
.left_mobile_menu{left:0;}
.right_mobile_menu{right:0;}

.ddsmoothmenu{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	font:12px Arial,sans-serif;
	background: #2D2D2D;
	width: 100%;
	padding-left:10px;
	z-index:100;
}
.ddsmoothmenu ul{
	z-index:100;
	margin: 0;
	padding: 0;
	list-style-type: none;
	height:30px;
}
.ddsmoothmenu ul li{
	position: relative;	
	display: inline-block;
	float: left;
	color: #2d2b2b;
	height:100%;
}
.ddsmoothmenu ul ul li a{
	width:100%;
}
.ddsmoothmenu .rightarrowclass{
	display:none !important;
}
.ddsmoothmenu ul li a{	
	display: inline-block;
	color: #2D2D2D;
	text-decoration: none;
	color: #cccccc;
	text-align:center;
	padding: 7px 10px 8px 10px !important;
}
.ddsmoothmenu ul li a.selected {
	background-color: #FFFFFF !important;
	color: #2d2b2b;
}
.ddsmoothmenu ul li ul li a.selected {
	background-color:#E4EBF8 !important;
}
.ddsmoothmenu ul li a:hover{
	background-color: #E4EBF8;
	color: #2D2D2D;
}
.ddsmoothmenu .hide_ul{
	position: absolute;
	left: -3000px;
	display: none;
	visibility: hidden;
	border:1px solid #5680C1;
	border-top:0px;
}
.ddsmoothmenu ul li ul{
	position: absolute;
	left: -3000px;
	display: none;
	visibility: hidden;
	border:1px solid #5680C1;
	border-top:0px;
	margin-left: -1px;
	height:auto;
	min-width:140px;
	width:auto !important;
	top:30px !important;
}
.ddsmoothmenu ul li ul li{
	display: list-item;
	background: #ffffff;
	float: none;
	height:auto;
	width:100%;
}
.ddsmoothmenu ul li ul li a{
	text-align:left;
}
.ddsmoothmenu ul li ul li ul{
	top: 0;
	border-top:1px solid #5680C1;
}
.ddsmoothmenu ul li ul li a{
	padding-left: 5px;
	padding-right:5px;
	margin: 0;
	color: #2D2D2D;
	white-space: nowrap;
}
.ddsmoothmenu ul li ul li ul{
	top:0 !important;
}
* html .ddsmoothmenu{height: 1%;} /*Hack for IE7 and below*/
.ddsmoothmenu .downarrowclass{
	position: absolute;
	top: 12px;
	right: 7px;
}
 .ddsmoothmenu .ddshadow{ 
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	background-color: #ccc;
}
.ddsmoothmenu .mid-line{
	background-color:#ff0000;
	border-top:1px solid #e5e5e5;
	font-size:0;
	padding:0 8px 0 8px;
}
.ddsmoothmenu ul li ul li.more > a {
	background-image: url('../img/right.gif');
	background-repeat: no-repeat;
	background-position: 97% 30%;
}
.ddsmoothmenu ul li ul li ul {
	left: calc(100% + 1px) !important;
}
.ddsmoothmenu .dots::after {
    content: "...";
}
@media screen and (max-width:700px){
	#mobile_menu{
		display:block;
	}
	.left_mobile_menu{
		display:none;
	}
	.ddsmoothmenu{
		height:50px;
	}
	.ddsmoothmenu ul{
		width: calc(100% - 50px);
		height:50px;
	}
	.ddsmoothmenu > ul > li > a{
		height:50px;
		padding-top: 15px !important;
	}
	.ddsmoothmenu ul li ul{
		top:50px !important;
	}
	.ddsmoothmenu ul li ul li{
		height:auto;
	}
	.ddsmoothmenu ul li ul li a{
		height:30px;
	}
}
@media screen and (max-width:550px){
	.ddsmoothmenu{
		padding-left:0;
	}
	.ddsmoothmenu ul{
		width: calc(100% - 100px);
		margin-left:50px;
	}
	.ddsmoothmenu > ul > li{
		width: calc(100% / 7);
	}
	.ddsmoothmenu > ul > li > a{
		width:100%;
		padding-left: 3px !important;
		padding-right: 3px !important;
		overflow: hidden;
	}
	.left_mobile_menu{
		display:block;
	}
}
@media screen and (max-width:400px){
	.ddsmoothmenu{
		background: #666666;
	}
	.ddsmoothmenu > ul > li{
		width: calc(100% / 7);
	}
	.ddsmoothmenu .icon{
		width:100%;
		max-width:50px;
		background-image: url('../img/sprites.png');
		background-position: -91px -88px;
		color: transparent !important;
	}
	.ddsmoothmenu .icon:hover{
		background-color:#727272 !important;
	}
	.ddsmoothmenu .file{ background-position: -91px -88px; }
	.ddsmoothmenu .edit{ background-position: -141px -88px; }
	.ddsmoothmenu .image{ background-position: -191px -88px; }
	.ddsmoothmenu .layer{ background-position: -241px -88px; }
	.ddsmoothmenu .effects{ background-position: -291px -88px; }
	.ddsmoothmenu .tools{ background-position: -341px -88px; }
	.ddsmoothmenu .help{ background-position: -391px -88px; }
}
@media screen and (max-width:350px){
	.ddsmoothmenu .file{ background-position: -95px -88px; }
	.ddsmoothmenu .edit{ background-position: -145px -88px; }
	.ddsmoothmenu .image{ background-position: -195px -88px; }
	.ddsmoothmenu .layer{ background-position: -245px -88px; }
	.ddsmoothmenu .effects{ background-position: -295px -88px; }
	.ddsmoothmenu .tools{ background-position: -345px -88px; }
	.ddsmoothmenu .help{ background-position: -398px -88px; }
}

/* ========== 3. Footer ===================================================== */

/* ========== 4. Sidebar ==================================================== */

#sidebar_left{
	position: absolute;
	width: 105px;
	z-index: 100;
	left:0px;
	padding:0 5px 5px 0;
	transition: 0.2s;
	-webkit-transition: 0.2s;
}
#sidebar_right{
	position: absolute;
	width: 152px;
	right:0;
	top:0;
	z-index: 100;
	transition: 0.2s;
	background-color:#727272;
	-webkit-transition: 0.2s;
}
#sidebar_left.active{
	left:0 !important;
	background-color: #727272;
	box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.75);
}
#sidebar_right.active{
	right:0 !important;
	box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.75);
}
#main_color{
	border:1px solid #393939;
	background-color:#727272;
	margin-top:10px;
	width:100%;
	height:40px;
	margin:0px;
	padding:0px;
}
#main_color_alt{
	border:1px solid #393939;
	margin-top:10px;
	width:100%;
	height:40px;
}
#main_color_rgb{
	margin-top:5px;
	width:100%;
	color:#000000;
	text-align:right;
}
#main_color_rgb input{
	width:55px;
}
#main_color_rgb a{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	color: transparent;
	margin-right: 5px;
}
#main_color_rgb a.red{ background-color:#ff0000; }
#main_color_rgb a.green{ background-color:#00ff00; }
#main_color_rgb a.blue{ background-color:#0000ff; }
#main_color_rgb a.alpha{ background: url('../img/sprites.png') no-repeat -550px -50px; }

#preview{
	width:150px;
	background-color:#989898;
	border:1px solid #393939;
	margin-bottom: 5px;
}
#preview canvas{
	cursor: pointer;
}
#menu_left_container .active{
	background-color: #5680c1 !important;
}		
#menu_left_container a{
	float:left;
	border: 1px solid #393939;
	background: #989898 url('../img/sprites.png') no-repeat 0px 0px;
	width:24px;
	height:24px;
	margin:0px 1px 1px 0px;
	overflow:hidden;
	display:block;
}
#action_attributes{
	min-height:20px;
	font-size:11px;
}
#mouse_info{
	padding:5px 3px 5px 2px;
	font-size:11px;
}	
#action_attributes input{
	font-size:12px;
	width:100%;
}
#color_hex{
	width: 100%;
	border:1px solid #393939;
}
#all_colors{
	margin-top:10px;
	padding:3px 0px 3px 3px;
}
#sidebar_right .layer{
	margin-bottom:2px;
	border:1px solid #393939;
	background-color:#989898;
	padding:1px 5px 3px 5px;
	border-radius:3px;
	font-size:11px;
	height:19px;
	overflow:hidden;
	color:#333333;
}
#layers_base .active{
	background-color:#5680c1;
}
.layers_arrow{
	text-decoration:none;
	color:#000000;
	display:block;
	float:right;
	margin-left:5px;
	background-color:#727272;
	padding:0px 5px 0px 5px;
	border:1px solid #393939;
	font-size:11px;
}
.layer_title{
	display:block;
	float:left;
	cursor:pointer;
	min-width:85px;
	width:10px;
	overflow:hidden;
}

.layer_delete{
	float:right;
	cursor:pointer;
	padding:0px 3px 0px 3px;
	width:12px;
	height:12px;
	background: url('../img/sprites.png') no-repeat 0px -50px;
}
.layer_visible{
	float:right;
	cursor:pointer;
	padding:0px 3px 0px 3px;
	width:12px;
	height:12px;
	background: url('../img/sprites.png') no-repeat -100px -50px;
}
.layer_unvisible{
	background: url('../img/sprites.png') no-repeat -50px -50px;
}	
.layer_add{
	border:1px solid #393939;
	padding:0px 4px 0px 4px;
	text-decoration:none;
	background-color:#5680c1;
	cursor:pointer;
}
.mini-color{
	width:16px;
	height:16px;
	margin:0px 3px 3px 0px;
	float:left;
	border:1px solid #393939;
}
.mini-color:hover{
	cursor:pointer;
}
.attribute-area{
	border:1px solid #393939;
	background-color:#989898;
	margin:5px 5px 5px 5px;
	text-align:center;
	padding:5px 0px 5px 0px;
	cursor:pointer;
	/* disable select */
	-webkit-user-select:none;
	-moz-user-select:none;
}
@media screen and (max-width:700px){
	#sidebar_right{
		right: -160px;
	}
}
@media screen and (max-width:550px){
	#sidebar_left{
		left: -110px;
	}
}

/* ========== 5. Print ====================================================== */

@media print{
	body{
		background:none !important;
		background: #fff;
		background-color: #fff;
		font-family: Arial,Helvetica,Verdana;
		width:auto !important;
		padding:5px !important;
		font-size: 12px;
	}
	progress,
	.menu,
	#resize-w,#resize-h, #resize-wh,
	#sidebar_left,
	#sidebar_right,
	#canvas_back,
	.ddsmoothmenu{
		display: none;
		height: 0;
		width: 0;
	}
	#canvas_wrapper{
		margin:0px;
		padding:0px;
	}
	canvas{
		border:0px;
		position: absolute;
		top:0px;
		left:0px;
	}
}

/* ========== 6. Content ==================================================== */

#wrapper{
	margin: 5px;
	position:relative;
	min-height: 500px;
	overflow: hidden;
}
#canvas_wrapper{
	position:relative;
	margin: 0 157px 0 105px;
	overflow: hidden;
	height: calc(100vh - 35px);
}
#canvas_wrapper canvas{
	border: 1px solid #393939;
	box-sizing: content-box;
}
#canvas_back{
	position: absolute;
	background-color:#ffffff;
	outline: none;
}
#layers_base{
	background-color: #989898;
	border: 1px solid #393939;
	padding: 5px;
	margin-bottom: 5px;
}
#resize-w, #resize-h, #resize-wh{
	background-color:#393939;
	width:5px;
	height:5px;
	margin-left:105px;
	position:absolute;
	top:0;
}
#canvas_grid{
	pointer-events:none;
}
.trn{}
.block{
	border:1px solid #393939;
	padding:5px;
	margin-top:5px;
	background-color:#818181;
}
.error{
	padding:20px;
	margin:10px;
	border:1px solid #ff0000;
	background-color:#ffffff;
	width:400px;
	font-weight:bold;
}
.group{
	border:1px solid #888888;
	margin:5px 0px 5px 0px;
	padding:5px;
}
@media screen and (max-width:700px){
	body{
		padding-top:50px;
	}
	#canvas_wrapper{
		margin-right: 0;
	}
}
@media screen and (max-width:550px){
	#canvas_wrapper{
		margin-left: 0px;
	}
}

/* ========== 6.1 Popup ===================================================== */

#popup{
	position:fixed;
	border:1px solid #000000;
	background-color: #bbb;
	width:500px;
	max-height:550px;
	overflow-y:scroll;
	margin:0px auto 0px auto;
	top:150px;
	left: 50%;
	margin-left:-250px;	
	display:none;
	padding:10px;
	font-size:12px;
	color: #333;
	z-index: 100;
}
#popup h2{
	margin-top:0px;
	cursor:move;
}
#popup td{
	height:20px;
}
#popup textarea{
	color:#000000;
	width:100%;
	border:1px solid #393939;
	padding-left:5px;
}
#popup .button{
	margin-right:5px;
	background-color:#5680c1;
	min-width:60px;
	border:1px solid #000000;
	padding: 2px 6px;
}
#popup input[type="text"], #popup input[type="number"], #popup textarea{
	width:100%;
}
@media screen and (max-width:400px){
	#popup{
		top: 100px !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: 0;
		width: auto;
	}
}
/* ========================================================================== */