html, body
{
	height: 100%;
}

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face
{
	font-family: 'Post-It';
	src: url('../include/font.ttf') format('truetype');
}

body
{
	background-image: url('../images/smartphone_portrait.png');
	background-repeat: no-repeat;
	background-position: center;
}

body.smartphone_portrait
{
	background-image: url('../images/smartphone_portrait.png');
}

body.smartphone_landscape
{
	background-image: url('../images/smartphone_landscape.png');
}

body.tablet
{
	background-image: url('../images/tablet.png');
}

body .container,
body.smartphone_portrait .container
{
	width: 360px;
	height: 740px;
	position: absolute;
	left: calc(50% - 180px);
	top: calc(50% - 370px);
}

body.smartphone_landscape .container
{
	width: 740px;
	height: 360px;
	position: absolute;
	left: calc(50% - 370px);
	top: calc(50% - 181px);
}

body.tablet .container
{
	width: 1082px;
	height: 760px;
	position: absolute;
	left: calc(50% - 699px);
	top: calc(50% - 350px); */
}

.content
{
	width: 100%;
	height: 100%;
	position: absolute;
}

.topbar
{
	width: 100%;
	height: 28px;
	background-color: #505050;
	font-family: Arial;
	font-size: 13px;
	color: #FFFFFF;
	position: relative;
}

.topbar_application
{
	line-height: 28px;
	position: absolute;
	left: 30px;
}

.topbar_clock
{
	line-height: 28px;
	position: absolute;
	right: 57px;
}

.topbar_battery
{
	width:17px;
	height: 10px;
	position: absolute;
	right: 30px;
	top:9px;
}

.app_content
{
	width: 100%;
	height: calc(100% - 28px);
	border: none;
}

.foreground
{
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
}

body .postit,
body.smartphone_portrait .postit
{
	width: 300px;
	height: 300px;
	position: absolute;
	left: calc(50% + 450px);
	top: calc(50% - 390px);
}

body.smartphone_landscape .postit
{
	width: 300px;
	height: 300px;
	position: absolute;
	left: calc(50% + 500px);
	top: calc(50% - 290px);
}

body.tablet .postit
{
	width: 300px;
	height: 300px;
	position: absolute;
	left: calc(50% + 635px);
	top: calc(50% - 445px);
}

.postit_image
{
	width: 300px;
	height: 300px;
	position: absolute;
}

.postit_text
{
	font-family: Post-It;
	font-size: 20px;
	line-height: 50px;
	text-align: center;
	color: #1F47B5;
	position: absolute;
	left: -15px;
	top: 40px;
	width: 100%;
	height: 100%;
	padding: 0 35px;
	transform: rotate(6deg);
}

.postit_text_headline
{
	text-decoration: underline;
}

#hint-text:hover, #hint-text:focus
{
	color: red;
}

.device_selection
{
	position: absolute;
	right: 20px;
	bottom: 20px;
}

.device_selection img
{
	cursor: pointer;
}

.device_margin
{
	margin-left: 20px;
}