#pixi_frame{
	/*display:none;*/
	background-image:url("../img/grid-back.png");
	background-repeat: repeat;	
}
#hint_frame{
	display:none;
	background-image:url("../img/info_back.png");
	background-size: cover;
	background-repeat: repeat;
	transition: .1s linear;
}

#start_frame{
	/*display:none;*/
	background-image:url("../img/bgd.png");
	background-size:cover;
	background-repeat:repeat-x;

	overflow-y:auto;
	overflow-x:hidden;

}
#result_frame{
	background-image:url("../img/bgd.png");
	background-size:cover;
	background-repeat:repeat-x;
	overflow-y:auto;
	overflow-x:hidden;
	display:none;
}

/* intro */
#intro_frame{
	background-image:url("../img/info_back.png");
	background-size:100% 100%;
	overflow-y:auto;
	overflow-x:hidden;

	display:none;
}

#game_intro{
	/*min-width:600px;*/
	width:50%;
	/*margin-right:10%;*/
	display:inline-block;
}
.introDialogue{
	position:relative;
	/*left:10%;*/
	width:100%;
	margin-top:90px;
}
.introTitle{
	position:absolute;
	top:-43px;
	left:-10px;
}
.introTextWrapper{
	position: relative;
	/*top:0px;
	bottom:0px;
	left:0px;
	right:0px;*/
	height: auto;
	padding: 40px 0px 10px 20px;
	background-color: #FCEB74;

	border-top: 5px solid #122C9A;
	border-left: 5px solid #122C9A;
	/*border-image:url("../img/frame-intro.png") 25 stretch;

	-webkit-border-image:url("../img/frame-intro.png") 25 stretch;
	-moz-border-image:url("../img/frame-intro.png") 25 stretch;
	-o-border-image:url("../img/frame-intro.png") 25 stretch;
	border-image:url("../img/frame-intro.png") 25 stretch;*/
}

.introText{
	/*padding:0px 20px 50px 20px;*/	
	background-color: #FCEB74;
	font-size:2em;

	color:#122C9A;
	text-align: left;
	/*padding:20px;*/
}
#website_link{
	width:calc(50% - 10px);
	margin-bottom:-24px;
	display:inline-block;
	vertical-align:bottom;
	cursor:pointer;
	/*float:right;*/
}

.uiButton{
	
	min-width:20%;
	width:328px;
	height:84px;
	cursor:pointer;
}
.iknowButton{
	background-image:url("../img/iknow.png");	
	background-repeat: no-repeat;
	margin-top:5%;
}
.iknowButton.pressed{
	background-image:url("../img/iknow-pressed.png");
}



.intro_left_bottom_corner{
	position:absolute;
	left:0px;
	bottom:-24px;
}

.intro_right_bottom_corner{
	position:absolute;
	right:-24px;
	bottom:-24px;
}

.intro_right_top_corner{
	position:absolute;
	right:-24px;
	top:0px;
}
.intro_right_border{
	position:absolute;
	right:-24px;
	top:26px;
	bottom:0px;
	width:24px;
	background-image: url("../img/frame-intro-14.png");
	background-size:auto;
	background-repeat: repeat-y;
}
.intro_bottom_border{
	position:absolute;
	right:0px;
	left:25px;
	bottom:-24px;
	height:24px;
	background-image: url("../img/frame-intro-13.png");
	background-size:auto;
	background-repeat: repeat-x;
}



/* start */
.startButton{
	background-image:url("../img/ui_start.png");
	background-repeat: no-repeat;		
	display: none;
}

.startButton.pressed{
	background-image:url("../img/ui_start_pressed.png");
	/*background-position:0 100%;*/
}
#loading_text{
	height: 100px;
	width:500px;
}
.loadingBar{
	position: relative;
	top:24px;
	width:363px;
	height:27px;
	background-image:url("../img/bar.png");
}
#loading_snake_tail{
	position: absolute;
	left:0;
}
#loading_snake_body{
	background-image:url("../img/loading-snake-02.png");	
	background-repeat: repeat-x;
	position: absolute;
	left:33px;
	width:20px;
	height:26px;	
	transition: .1s linear;
}
#loading_snake_head{
	position: absolute;
	left:53px;
	top:-5px;
	transition: .1s linear;
}

#start_logo{
	position: relative;
	/*animation-name: logoFloat;
	animation-duration: .5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in;*/
}
@keyframes logoFloat{
    from{
        top:0px;
    }
    to{
        top:5px;
    }
}

/* result */

.resultButton{
	height:84px;
	display:inline-block;
	cursor:pointer;
	background-repeat: no-repeat;
	transition:0.2s ease-out;
}
#replay_button{
	width:127px;
	background-image:url("../img/replay.png");
	
	vertical-align: top;
	
	margin-bottom: 30px;
	display: inline-block;
	float:left;
}
#replay_button.pressed{
	background-image:url("../img/replay-pressed.png");
}

#share_button{
	width:268px;
	background-image:url("../img/share.png");	
}
#share_button.pressed{
	background-image:url("../img/share-pressed.png");
}

#signup_button{
	width:268px;
	background-image:url("../img/signup.png");
	margin-top: 30px;	
}
#signup_button.pressed{
	background-image:url("../img/signup-pressed.png");
}

#sample_dialogue{
	/*min-height:100px;
	padding-bottom:50px;
	padding-left:20px;
	padding-right:50px;*/
}
#sample_image{
	width:100%;
	height:auto;
}
#sample_image_wrapper{
	position: relative;
	right:5px;
	border:5px solid #122C9A;
	margin-top:20px;
}

#sample_text{
	
}
#end_logo{
	max-width: 40%;
}

.resultButtonWrapper{
	/*width:49%;*/
	max-width: 60%;
	display: inline-block;

	vertical-align: top;
	margin-top: 30px;
}

#dead_snake{

	max-width:100%;
	max-height:100%;
}
#dead_wrapper{
	position: relative;
	display: inline-block;
	width: 100%;
	height:600px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#sample_image_left_top{
	position: absolute;
	left:-5px;
	top:-5px;
}
#sample_image_left_bottom{
	position: absolute;
	left:-5px;
	bottom:-5px;
}
#sample_image_right_top{
	position: absolute;
	right:-5px;
	top:-5px;
}
#sample_image_right_bottom{
	position: absolute;
	right:-5px;
	bottom:-5px;
}

#left_bottom_corner{
	position:absolute;
	left:-5px;
	bottom:-13px;
}

#right_bottom_corner{
	position:absolute;
	right:-13px;
	bottom:-13px;
}

#right_top_corner{
	position:absolute;
	right:0px;
	top:0px;
}