/* styles.css */
#mag {
	margin:auto;
}

.page {
	background: url(images/stripe.png) 0 0;
}

#mag div a {
	cursor: pointer;
}

#mag div a:hover {
	-moz-box-shadow: 0 0 6px 2px #efefef;
	-webkit-box-shadow: 0 0 6px 2px #efefef;
}

.shadow {
	-moz-box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;
}

/* skin/gui.css */
#skin {
	width: 100%;
	height: 61px;
	background: url(images/bg.png) repeat-x 0 0; /*CHANGE for YUMPU design*/
	position: relative; /*CHANGE for YUMPU design*/
	z-index: 10; /*important! don't remove!*/
}

.spacer {
	height: 15px; /*depends on #skin height*/
}

#buttons { /*CHANGE for YUMPU design*/
	margin: auto;
	padding-top: 15px;
	text-align: center;
	width: 275px;
}

#buttons li {
	float: left;
	margin: 0 5px 0 0;
	list-style-type: none;
}

#buttons li a {
	cursor: pointer;
}

#buttons li a:hover {
	background-position: 0 -23px;
}

#feedback {
	width: 69px;
	height: 22px;
	background: url(../images/feedback.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#abo {
	width: 85px;
	height: 22px;
	background: url(../images/abo.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#taf {
	width: 78px;
	height: 22px;
	background: url(../images/taf.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#print {
	width: 91px;
	height: 22px;
	background: url(../images/print.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#download {
	width: 94px;
	height: 22px;
	background: url(../images/download.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#archiv {
	width: 57px;
	height: 22px;
	background: url(../images/archiv.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#back,
#page-back {
	width: 23px;
	height: 23px;
	background: url(images/left.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#page-back {
	position: absolute;
	top: 50%;
	left: 0px;/*-15px;*/ /*CHANGE for YUMPU design*/
	cursor: pointer;
	z-index: 30;
}

#overview {
	width: 73px;
	height: 22px;
	background: url(images/overview.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
}

#forward,
#page-forward {
	width: 23px;
	height: 23px;
	background: url(images/right.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: block;
	z-index: 300;
}

#page-forward {
	position: absolute;
	top: 50%;
	right: 0px;/*-15px;*/ /*CHANGE for YUMPU design*/
	cursor: pointer;
}

/* EXTRAS */
a img {
	border: none;
	text-decoration: none;
}

#extras {
	width: 100%;
	height: 10px;
	position: relative;
	bottom: 0;
	z-index: 20; /*important! don't remove!*/
}

#logo-left {
	position: absolute;
	left: 20px;
	bottom: 20px;
}

#logo-right {
	position: absolute;
	right: 20px;
	bottom: 20px;
}

/* HELPERS */
.leftspace {
	margin: 0 5px 0 20px !important;
}

.clear {
	clear: both;
}


/* skin/popups/popup.css */
.popup-bg {
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .4;
	position: absolute; /*CHANGE for YUMPU design*/
	z-index: 1000;
	display: none;
	top: 50px;
}

#taf-popup {
	z-index: 1001;
	background: url(../images/popup_bg.png) no-repeat 0 0; /*CHANGE for YUMPU design*/
	display: none;
}

#overview-popup {
	z-index: 1002;
	display: none;
	position: absolute;
	margin: auto;/*50px 0 0 0;*/ /*CHANGE for YUMPU design*/
	padding: 0 20px;
}

#overview-popup a {
	margin: 5px;
	cursor: pointer;
	display: inline-block; /*CHANGE for YUMPU design*/
}

.popup {
	position: fixed;
	left: 40%;
	top: 15%;
	width: 289px;
	height: 494px;
	font-family: Helvetica,Arial,sans-serif;
}

.close {
	position: absolute;
	bottom: 5px;
	left: 10px;
	cursor: pointer;
}

.send {
	position: absolute;
	bottom: 5px;
	right: 10px;
	cursor: pointer;
}

.popup h1 {
	color: #fff;
	font-weight: normal;
	text-align: center;
}

.popup h3 {
	color: #555;
	text-align: center;
	padding: 5px 0 0 0;
}

.popup #form {
	padding: 0 20px;
}

.popup #form h3 {
	text-align: left;
}

.popup #form table {
	width: 100%;
}

.popup #form table tr {
	margin: 10px;
}

.popup #form #spacer {
	border: 1px solid #dea305;
	margin: 10px 0;
}

/* CHANGE for YUMPU design, scale images to fit display container */
.page div img {
	width: 100%;
}
#overview-popup a img{
	width: 100px;
}
.page div .hotspot {
	position: absolute;
	overflow: hidden;
	display: block;
	background: url("../images/mask.png") repeat scroll 0 0 transparent;
	opacity:0;
	filter:alpha(opacity=0); /* For IE8 and earlier */
}
.page div .hotspot:hover {
	text-decoration: none;
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
.page div .hotspot img{
	width: 50%;
	float: left;
	margin: 3px;
}
.page div .hotspot span.text{
	color: #ffffff;
	padding: 3px;
	line-height: 14px;
	display: block;
}
#mag .page a.click_to_buy {
	position: absolute;
	background-color: #ffffff;
	width: 255px;
	height: 148px;
	font-weight: bold;
	background: url("../images/aboteaser_background.png") no-repeat;
	text-align: center;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
}
#mag .page a.click_to_buy:hover {
	box-shadow: none;
	text-decoration: none;
	opacity:1;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}
#mag .page a.click_to_buy  h4{
	font-size: 20px;
	margin: 30px auto 20px;
	width: 160px;
}