@media all {
/*////////////////////////////////////////////////////////////////
 ///////// allgemeine Styles  ///////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////*/

* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}


.ui-page {
	background: #000;
	background-image: url(../images/background.jpg);
	background-size: cover;
}

/* Reset JQuery Mobile Stylesheet */
.ui-content {
	padding: 0;
}

.ui-input-text {
	background-color: #f2f2f2;
}

.textcontentBox {
	margin: 10% auto;
	width: 85%;
	height: 85%;
	background-color: #F4E0A8;
	padding: 20px 15px;
	text-align: justify;
}




/*///////////////////////////////////////////////////////////////
 /////////// Login Page /////////////////////////////////////////
 ///////////////////////////////////////////////////////////////*/



#frontImage{
	height: auto;
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: #333333;
}

/*///////////////////////////////////////////////////////////////
 /////////// Game Page /////////////////////////////////////////
 ///////////////////////////////////////////////////////////////*/

#card_page {
	position: relative;
	height: 100%;
	overflow: hidden;
}

#content {
	height: 100%;
}
#map {
	position: absolute;
	top: 44px;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
}
#updatePositionDiv {
	position: absolute;
	bottom: 70px;
	right: 13px;
}
#catchButtonDiv {
	position: absolute;
	bottom: 13px;
	right: 13px;
}

.buttonDiv {
	position: absolute;
	width: 180px;
}

.buttonDiv input {
	background-color: #72aab4;
}

#messagePopup-popup {
	height: auto;
	width: 80%;
	padding: 5px;
}

#positionUpdatePopup-popup {
	height: auto;
	width: 80%;
	padding: 5px;
}


@media screen and (orientation:landscape) {
	#frontImage {
		max-width: 40%;	
		margin: 3% auto 5% 30%;
	}
}


@media screen and (orientation:portrait) {
	#frontImage {
		max-width: 80%;
		margin: 20% auto 5% 10%;
}