@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 200;
  src: local('☺'), url('../media/fonts/mixolydian_bk-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Dosis', Arial, sans-serif;
}


html, body {
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
	background-color: #2a0438;
	background: #2a0438;
    overflow: hidden;
    user-select: none;
	-ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none; 
	-webkit-user-callout: none;
	-ms-touch-action: manipulation !important;
}

image, canvas {
    position: absolute;
    overflow: hidden;
    top: 0px; 
    left: 0px;
    user-select: none;
	-ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none; 
	-webkit-user-callout: none;	
   	background:transparent;
	background-color: transparent;
}

#canvas_overlay {
   background:transparent;
}
#canvas_main {
   background:transparent;
}
#canvas_avatar {
   background:transparent;
}
#canvas_floater {
   background:transparent;
}

#canvas_bg {
	background-color: #2a0438;
	background: url('../media/images/bg.png') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

select {
	width: 250px;
	height: 36px;
	position: absolute;
	left: 100px;
	top: 20px;
	display: inline-block;
	
	font-family: Dosis;
	font-size: 20px;
	
	background-color: #CB47C3;
	color: #FFFFFF;
	border-width: 0px;
	border-radius: 8px;
	border-style: none;
	padding-left: 10px;
	
	background-repeat: no-repeat;
	background-position: 206px 2px;
    background-size: 32px 32px;
	background-attachment: absolute;
	background-image: url('../media/images/dropdown_arrow.png');
	
	-webkit-appearance: none;
    -moz-appearance: none;
	appearance: none;
	
	outline:none;
	cursor: pointer;
}

select::-ms-expand {
    display: none;
}

#wrapper {
    position: absolute;
    top: 0px; 
    left: 0px;
    width: 100%;
    height: 100%;
}

#canvas_alter_landscape {
    position: absolute;
    overflow: hidden;
    top: 0px; 
    left: 0px;
    width: 100%;
    height: 100%;
  	background-color: #000000;
	background: #000000;
	display: none;
    z-index: 101;
	background-image: url('../media/images/orientation_iphone.png');
	background-repeat:no-repeat;
	background-position: center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

#debug { 
    position: absolute; 
    top: 6px; 
    left: 6px; 
    z-index: 100;
    overflow: hidden;
}

.debug_btn {
  border-radius: 28px;
  border: 0;
  font-family: Arial;
  color: #ffffff;
  font-size: 24px;
  background: #d95a34; 
}

.debug_txt {
  	border-radius: 8px;
	display: none;
  	border: 0;
  	font-family: Arial;
  	color: #333333;
  	font-size: 12px;
	padding-top: 8px;
    padding-bottom: 8px;
    padding-right:8px;
    padding-left: 8px;
  	background-color: #EEEEEE;
  	clear: both;
}