/* page attributes */

body{
	background-color:#ffffff;
  padding: 0px;
  margin: 0px;
	overflow-y:hidden;
  height:100%;
	overflow-x:hidden;
  width:100%;
	font-family: sans-serif;
	font-weight: 400;
	font-size: 12px;
	text-shadow: none;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	 -khtml-user-select: none; /* Konqueror */
		 -moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
					user-select: none;
}

#emoji-ink{
	width: 100vw;
	height:100vh;
	padding:0px;
  margin:0px;
	display:block;
	z-index:5;
	border: none;
}

.show{
	z-index:100;
	position: fixed;
	left:25px;
	bottom:25px;
	width:100px;
	height:100px;
	background-color:orange;
	display:none;
}

/* window components */

.window{
  z-index:100;
  position:fixed;
  left:50%;
  top:50%;
  width:447px;
  height:275px;
  margin-left:-225px;
  margin-top:-125px;
  background-color:white;
  border-radius: 5px;
  transform: rotate(0deg) scale(1);
}

.top{
	z-index:5000;
}

.ui-resizable-se {
    background-image: url("");
}

.window-content{
	width:100%;
	height:100%;
	border:none;
	top:0px;
	position:absolute;
	overflow:auto;
	border-radius: 0px 0px 5px 5px;
}

/* window-components - handle */
.handle{
  z-index:101;
  position:absolute;
  width: 100%;
  height:22px;
  left:0px;
  cursor:default;
  border-radius: 5px 5px 0px 0px;
}

.title{
  z-index:102;
  position:absolute;
  left:50%;
  margin-left:-15px;
  top:4px;
  pointer-events:none;
}

.title-icon{
  position:absolute;
  z-index:102;
  width:15px;
  left:50%;
  margin-left:-35px;
  top:3px;
  pointer-events:none;
}

.buttons{
	position:absolute;
	z-index:104;
}

.buttons_hover_no{
	z-index:1;
	position:absolute;
	width:52;
	height:22px;
	left:8px;
	display:block;
}

.buttons_hover_yes{
	z-index:2;
	position:absolute;
	width:52;
	height:22px;
	left:8px;
	display:none;
}

.button-close{
	z-index:3;
	position:absolute;
	width:12px;
	height:12px;
	left:8px;
	top:5px;
}

.button-rotate{
	z-index:3;
	position:absolute;
	width:12px;
	height:12px;
	left:28px;
	top:5px;
}

.button-transparent{
	z-index:3;
	position:absolute;
	width:12px;
	height:12px;
	left:48px;
	top:5px;
}

/* window-componenets - border */

.shadow{
  z-index:100;
  position:absolute;
  pointer-events: none;
}

.tt{
  width: -webkit-calc(100% - 8px);
  width:    -moz-calc(100% - 8px);
  width:         calc(100% - 8px);
  height:13px;
  left:4px;
  top:-13px;
}

.tl{
  width:59px;
  height:54px;
  left:-55px;
  top:-32px;
}

.tr{
  width:59px;
  height:54px;
  right:-55px;
  top:-32px;
}

.l{
  width:56px;
  height: -webkit-calc(100% - 26px);
  height:    -moz-calc(100% - 26px);
  height:         calc(100% - 26px);
  left:-56px;
  top:22px;
}

.r{
  width:56px;
  height: -webkit-calc(100% - 26px);
  height:    -moz-calc(100% - 26px);
  height:         calc(100% - 26px);
  right:-56px;
  top:22px;
}

.b{
  width: -webkit-calc(100% - 8px);
  width:    -moz-calc(100% - 8px);
  width:         calc(100% - 8px);
  height:84px;
  left:4px;
  bottom:-84px;
}

.bl{
  width:60px;
  height:84px;
  left:-56px;
  bottom:-80px;
}

.br{
  width:60px;
  height:84px;
  right:-56px;
  bottom:-80px;
}

/* window-components - content area */

.content-area{
  position:absolute;
  width:100%;
	height: -webkit-calc(100% - 22px);
	height:    -moz-calc(100% - 22px);
	height:         calc(100% - 22px);
	top:22px;
  overflow:auto;
	border-radius: 0px 0px 5px 5px;
}

/* window-components - content area - columns */

.column-1{
  position:absolute;
  width:149px;
	margin-left:0px;
  height:100%;
  border-radius:0px 0px 0px 5px;
  background-color:transparent;
	border-style:solid;
	border-color:#e7e7e7;
	border-width: 0px 1px 0px 0px;
}

.column-2-holder{
	position:absolute;
	width:150px;
	height:100%;
	background-color:transparent;
	top:0px;
	display:none;
}

.column-2{
  position:absolute;
  width:150px;
  height:100%;
  background-color:transparent;
	border-style:solid;
	border-color:#e7e7e7;
	border-width: 0px 1px 0px 0px;
}

.column-3-holder{
	position:absolute;
	width:150px;
	height:100%;
	background-color:transparent;
	top:0px;
	display:none;
}

.column-3{
  position:absolute;
  width:150px;
	margin-left:1px;
  height:100%;
	border-style:solid;
	border-color:#e7e7e7;
	border-width: 0px 1px 0px 0px;
	border-radius:0px 0px 0px 0px;
}

.column-4-holder{
	position:absolute;
	width:150px;
	height:100%;
	background-color:transparent;
	top:0px;
	display:none;
}

.column-4{
  position:absolute;
  width:200px;
	margin-left:1px;
  height:100%;
	border-style:solid;
	border-color:#e7e7e7;
	border-width: 0px 1px 0px 0px;
	border-radius:0px 0px 0px 0px;
}



.item{
	width:100%;
	height:18px;
}

.selected{
	background-color:#116cd6;
	color:white;
}

.old-selected{
	background-color:#dcdcdc;
	color:black;
}

.not-selected{
	background-color:transparent;
}

.item-icon-folder{
	position:relative;
	width:15px;
	height:15px;
	left:5px;
	top:1px;
}

.item-icon-normal{
	position:relative;
	width:14px;
	height:14px;
	left:5px;
	top:2px;
}

.item-arrow{
	position:relative;
	width:6px;
	height:8px;
	right:2px;
	float:right;
	top:5px;
	display:block;
}

.item-arrow-blue{
	position:relative;
	width:6px;
	height:8px;
	right:2px;
	float:right;
	top:5px;
	display:none;
}

.item-arrow-grey{
	position:relative;
	width:6px;
	height:8px;
	right:2px;
	float:right;
	top:5px;
	display:none;
}

.item-text{
	position:relative;
	margin-top:-16px;
	margin-left:25px;
	pointer-events: none;
}

.item-text-normal{
	position:relative;
	margin-top:-15px;
	margin-left:25px;
	pointer-events: none;
}

/* column-1 */

/* column-2 */
/* column-2 - nations */

.folder-projects{
	display:none;
}

.folder-about{
	display:none;
}

.folder-contact{
	display:none;
}

.folder-shop{
	display:none;
}

/* column-2 - contact */

#email-address{
	display:none;
}

/* column-3 -shop */

.shop{
	height:100%;
	overflow:auto;
	width:200px;
}

.shop-picture-1{
	top:10px;
	margin-left:37.5px;
	margin-top:10px;
	width:125px;
}

.shop-picture-2{
	top:10px;
	margin-left:25px;
	margin-top:10px;
	width:150px;
}

.shop-title-1{
	width:100%;
	height:20px;
	text-align:center;
	font-weight:500;
	font-size:14px;
	margin-top:5px;
}

.shop-title-2{
	width:100%;
	height:20px;
	text-align:center;
	font-weight:500;
	font-size:14px;
	margin-top:15px;
}

.shop-description{
	width:100%;
	height:15px;
	text-align:center;
	font-weight:500;
	font-size:10px;
	margin-top:0px;
}

.grey{
	color:grey;
}


/* window-2 */

#window-2{
	display:none;

}

/* window-3 */

#window-3{
	display:none;
}