body {
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;
	/* Firefox, other Gecko */
	box-sizing: border-box;
	/* Opera/IE 8+ */
	background: white;
	/* for em font-sizes */
	font-size: 100%;
}
div, header, span, img, p, a, button {
	
	/* CAUSES DISPLAY BUG IN CHROME ON 3D ANIMATIONS
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	NOTE I REENABLED THIS FOR IE ONLY IN TELEKOMSTYLES_V1*/
	/* enables hardware accerelation on iOS */
	cursor: pointer;
	line-height: 1;
}
img {
	position: absolute;
	top: 0;
	left: 0;
}
#stage {
	position: absolute;
	display: block;
	overflow: hidden !important;/* WHY IMPORTANT TAG? NEED REASON; CONFLICT WITH EXPANDABLES? */
	font-size: 16px;
	line-height: 100%;
}
.stage-120x60 {
	width: 120px;
	height: 60px;
}
.stage-120x600 {
	width: 120px;
	height: 600px;
}
.stage-125x125 {
	width: 125px;
	height: 125px;
}
.stage-160x120 {
	width: 160px;
	height: 120px;
}
.stage-160x600 {
	width: 160px;
	height: 600px;
}
.stage-180x150 {
	width: 180px;
	height: 150px;
	font-size: 13px;
}
.stage-200x600 {
	width: 200px;
	height: 600px;
}
.stage-234x60 {
	width: 234px;
	height: 60px;
}
.stage-300x60 {
	width: 300px;
	height: 60px;
}
.stage-300x150 {
	width: 300px;
	height: 150px;
}
.stage-300x180 {
	width: 300px;
	height: 180px;
}
.stage-300x250 {
	width: 300px;
	height: 250px;
}
.stage-300x600 {
	width: 300px;
	height: 600px;
	font-size: 18px;
}
.stage-336x280 {
	width: 336px;
	height: 280px;
	font-size: 16px;
}
.stage-430x600 {
	width: 430px;
	height: 600px;
}
.stage-450x450 {
	width: 450px;
	height: 450px;
}
.stage-468x60 {
	width: 468px;
	height: 60px;
	font-size: 14px;
}
.stage-480x320 {
	width: 480px;
	height: 320px;
	font-size: 14px;
}
.stage-728x90 {
	width: 728px;
	height: 90px;
}
.stage-640x480 {
	width: 640px;
	height: 480px;
	font-size: 20px;
}
.stage-800x250 {
	width: 800px;
	height: 250px;
	font-size: 26px;
}
.stage-800x600 {
	width: 800px;
	height: 600px;
	font-size: 22px;
}
.stage-820x90 {
	width: 820px;
	height: 90px;
}
.stage-830x90 {
	width: 830px;
	height: 90px;
}
.stage-842x250 {
	width: 842px;
	height: 250px;
	font-size: 26px;
}
.stage-900x300 {
	width: 900px;
	height: 300px;
}
.stage-920x250 {
	width: 920px;
	height: 250px;
}
.stage-964x250 {
	width: 964px;
	height: 250px;
}
.stage-970x90 {
	width: 970px;
	height: 90px;
}
.stage-970x250 {
	width: 970px;
	height: 250px;
}
.stage-1018x80 {
	width: 1018px;
	height: 80px;
}
.stage-1200x200 {
	width: 1200px;
	height: 200px;
}

/* use outline by adding the outline-class to any div in the stage or to the stage itself. For a grey outline add both classes outline and outline-grey*/


/* the border is usually drawn by the ::before-pseudo-class. At this point ::after is also defined for beeing used in wallpapers, as the skyscraper needs a shorter border on the left side.*/

.outline::before, .outline::after {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	border: 0px black solid;
	content: '';
	display: block;
	z-index: 1000;
	pointer-events: none;
}
.outline::before {
	border: 1px solid;
}
.stage-120x600.stage-wp.outline::before, .stage-120x600.stage-wp .outline::before,
.stage-160x600.stage-wp.outline::before, .stage-160x600.stage-wp .outline::before,
.stage-200x600.stage-wp.outline::before, .stage-200x600.stage-wp .outline::before {
	border-left: none;
}
.stage-728x90.stage-wp.outline::before, .stage-728x90.stage-wp .outline::before,
.stage-820x90.stage-wp.outline::before, .stage-820x90.stage-wp .outline::before,
.stage-830x90.stage-wp.outline::before, .stage-830x90.stage-wp .outline::before,
.stage-1018x80.stage-wp.outline::before, .stage-1018x80.stage-wp .outline::before {
	border-right: none;
}

.stage-120x600.stage-wp.outline::after, .stage-120x600.stage-wp .outline::after,
.stage-160x600.stage-wp.outline::after, .stage-160x600.stage-wp .outline::after,
.stage-200x600.stage-wp.outline::after, .stage-200x600.stage-wp .outline::after {
	border-width: 0px;
	border-left-width: 1px;
	border-left-style: solid;
	top: 89px;
}
.outline-grey::before, .outline-grey::after {
	border-color: #d0d0d0;
}
.full-size {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

/* POSITIONING ABSOLUTE ELEMENTS */
.center_box_horizontal {
	transform: translateX(-50%);
}
.center_position_horizontal {
	display: block;
	position: absolute;
	left: 50%;
}
.center_box_vertical {
	transform: translateY(-50%);
}
.center_position_vertical {
	display: block;
	position: absolute;
	top: 50%;
}
.center_box_horizontal_vertical {
	transform: translateX(-50%) translateY(-50%);
}
.center_position_horizontal_vertical {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
}
