/*
	Document   : CubeBuilding
	Created on : 2014.05.06., 14:34:08
	Author     : Dani
	Description:
		Purpose of the stylesheet follows.
*/

root {
	display: block;
}
body{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*
div{
	text-decoration: none;
}
div[title]:hover:after{
	content: attr(title);
	padding: 4px 8px;
	color: #333;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 20;
	white-space: nowrap;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 4px #222;
	-webkit-box-shadow: 0px 0px 4px #222;
	box-shadow: 0px 0px 4px #222;
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
	background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
*/


.st-pusher{
	top:64px;
}

#MainFrame{
	left: 0px;
	top: 64px;
	width: 1000px;
	height: 512px;
	cursor: default;

	background-color: green;
}

#BlockSelectorFrame{
	position: absolute;
	left: 80%;
	top: 0px;
	width: 20%;
	height: 100%;

	background-color: green;
}

#BlockRotateFrame{
	position: absolute;
	left:0%;
	top: 0%;
	width: 100%;
	height: 20%;
	background-image:url("/images/cubecreate/BG.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#RotateImg{
	position: absolute;
	left:0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-image:url("../blocks/0/0_0.png");
	background-repeat:no-repeat;
	background-size: auto 100%;
	background-position: center;
}
#BtnRotateLeft{
	position: absolute;
	left:2%;
	top: 35%;
	width: 15%;
	height: 30%;
	background-image:url("/images/cubecreate/BtnRotateLeft.png");
	background-repeat:no-repeat;
	background-size: 100% 100%;
	background-position: center;
}
#BtnRotateRight{
	position: absolute;
	right:2%;
	top: 35%;
	width: 15%;
	height: 30%;
	background-image:url("/images/cubecreate/BtnRotateRight.png");
	background-repeat:no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

#BlockStudFrame{
	position: absolute;
	left:0%;
	top: 20%;
	width: 100%;
	height: 20%;
	background-image:url("/images/cubecreate/BG.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#StudImg{
	position: absolute;
	left:0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-image:url("../blocks/0/0.png");
	background-repeat:no-repeat;
	background-size: auto 100%;
	background-position: center;
}
#BtnPrevStud{
	position: absolute;
	left:2%;
	top: 35%;
	width: 15%;
	height: 30%;
	background-image:url("/images/cubecreate/BtnPrev.png");
	background-repeat:no-repeat;
	background-size: 100% 100%;
	background-position: center;
}
#BtnNextStud{
	position: absolute;
	right:2%;
	top: 35%;
	width: 15%;
	height: 30%;
	background-image:url("/images/cubecreate/BtnNext.png");
	background-repeat:no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

#BlockListFrame{
	position: absolute;
	left:0%;
	top: 50%;
	width: 100%;
	height: 50%;
	background-image:url("/images/cubecreate/BG.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	overflow-y: scroll;
}
.BlockCard{
	float: left;
	margin: 2.5%;
	width: 40%;
	/*height: 128px;*/
	padding: 2.5%;
	box-shadow: 0px 0px 10px #000000;

	/*background-image:url("../blocks/0/thumb.png");*/
	/*background-color: lightblue;*/
	background-repeat:no-repeat;
	background-size: auto 100%;
	background-position: center;
}
.BlockCard:hover{
	box-shadow: 0px 0px 10px #ffffff;
}

#MainCanvas{
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;

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

	background-image:url("/images/cubecreate/BG.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.NaviButton{
	position: absolute;
	width: 33.33333%;
}

.Btn{
	opacity: 0.33;
}
.Btn:hover{
	opacity: 0.66;
}
.Btn:active{
	opacity: 1.0;
}
.NaviButton{
	position: absolute;
	height: 10%;
	top: 1.25%;
}
#BtnNavigate{
	background: url("/images/cubecreate/BtnNavigate.png");
	background-size:75%;
	background-repeat:no-repeat;
	background-position:center;
	right: 8px;
	width:64px;
	opacity: 1.0;
}
#BtnNavigate:hover{background-size: 100%;}
#BtnZoom{
	background: url("/images/cubecreate/BtnZoom.png");
	background-size:75%;
	background-repeat:no-repeat;
	background-position:center;
	right:80px;
	width:64px;
	opacity: 1.0;
}
#BtnZoom:hover{background-size: 100%}

#MaterialPicker{
	position: absolute;
	bottom: 8px;
}

#BtnPickMaterialOn{
	position: absolute;
	background: url("/images/cubecreate/BtnPickMaterial.png");
	background-size:100%;
	opacity: 1.0;
}

#BtnPickMaterialOff{
	position: absolute;
	background: url("/images/cubecreate/BtnPickMaterial.png");
	background-size:100%;
}

.ModeButton{
	position: absolute;
}

#BtnBuildOn             {background: url("/images/cubecreate/BtnBuild.png"); background-size:100%; opacity: 1.0;}
#BtnBuildOff            {background: url("/images/cubecreate/BtnBuild.png");background-size:100%;}

#BtnEraseOn             {background: url("/images/cubecreate/BtnErase.png"); background-size:100%; opacity: 1.0;}
#BtnEraseOff            {background: url("/images/cubecreate/BtnErase.png");background-size:100%;}

#BtnPaintOn             {background: url("/images/cubecreate/BtnPaint.png"); background-size:100%; opacity: 1.0;}
#BtnPaintOff            {background: url("/images/cubecreate/BtnPaint.png");background-size:100%;}

.MenuButton{
	position: absolute;
	height: 7.5%;
	top: 2.5%;
}

#BtnUndo{
	background: url("/images/cubecreate/BtnUndo.png");
	background-size:100%;
}

#BtnRedo{
	background: url("/images/cubecreate/BtnRedo.png");
	background-size:100%;
}

#BtnSave{
	background: url("/images/cubecreate/BtnSave.png");
	background-size:100%;
}

.Frame{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3333);
	z-index: 100;
}
.FrameWindow{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 512px;
	height: 512px;
	margin-left: -256px;
	margin-top: -256px;
	background: rgba(255, 255, 255, 0.3333);
	text-align: center;
	/*border-radius: 5%;*/
}

.TagElement{
	margin: 4px;
	background: rgba(255, 255, 0, 1.0);
	cursor:pointer;
}
#SaveThumbnail{
	position: absolute;
	width: 66.6666%;
	height: 66.6666%;
	top: 16.6666%;
	left: 16.6666%;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	background-image:url("/images/cubecreate/BG.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#SaveTitleFrame{
	position: absolute;
	width: 100%;
	height: 16.6666%;
	top: 0%;
	left: 0%;
	font-size: 7.5%;
	line-height: 222.2213%;
}
.SaveFrameBtn{
	position: absolute;
	width: 25%;
	height: 10%;
	top: 86.6666%;
	font-size: 5%;
	line-height: 200%;
	/*border-top-left-radius: 10% 20.8333%;
	border-top-right-radius: 10% 20.8333%;
	border-bottom-left-radius: 10% 20.8333%;
	border-bottom-right-radius: 10% 20.8333%;*/

	background: rgba(255, 255, 255, 0.33);
}
.SaveFrameBtn:hover{
	background: rgba(255, 255, 255, 0.66);
}
.SaveFrameBtn:active{
	background: rgba(255, 255, 255, 1.00);
}
#BtnSaveObject{
	left: 20.8333%;
}
#BtnSaveCancel{
	left: 54.1666%;
}

#ObjectNameFrame{
	margin: 8px;
	visibility: hidden;
}
#AuthorNameFrame{
	margin: 8px;
	visibility: hidden;
}
#TagsFrame{
	margin: 8px;
	visibility: hidden;
}
#Tags{
	margin: 8px;
}
button:not(#login-btn){
	font-size: 20px;
}
input{
	font-size: 20px;
}

#ProcessingImage{
	position:absolute;
	left: 37.5%;
	top: 25%;
	width: 25%;
	height: 25%;
}
#ProcessingMessage{
	position:absolute;
	left: 0%;
	top: 50%;
	width: 100%;
	height: 50%;
	font-size: 30px;
	text-align:center;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}
#FastMessageWindow{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 512px;
	height: 512px;
	margin-left: -256px;
	margin-top: -256px;
	background: rgba(255, 255, 255, 0.5);
	text-align:center;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}
#FastMessage{
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	text-align:center;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	font-size: 15%;
}

#MessageWindow{
	left: 50%;
	top: 50%;
	width: 400px;
	height: 256px;
	margin-left: -200px;
	margin-top: -128px;
	text-align:center;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
	background: rgba(192, 192, 192, 0.75);
}
#Message{
	font-size: 20px;
	margin: 8px;
}
#LogFrame{
	color: white;
}
#adminframe{
	position: absolute;
	left:25%;
	top:25%;
	width: 50%;
	height: 50%;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	z-index: 1000;
}
#JSONLoad{
	width: 90%;
	height: 75%;
}