<!-- Radatz Waagen template --> <style type='text/css'> .spotPreviewDefault { width: 800px; height: 600px; } @font-face { font-family: 'Plantin'; src: url('fonts/Plantin.ttf'); } @font-face { font-family: 'font1'; src: url('fonts/Plantin.ttf'); } @font-face { font-family: 'Plantin Italic'; src: url('fonts/Plantin Italic.ttf'); } @font-face { font-family: 'font2'; src: url('fonts/Plantin Italic.ttf'); } @font-face { font-family: 'Plantin MT Light'; src: url('fonts/Plantin MT Light.ttf'); } @font-face { font-family: 'font3'; src: url('fonts/Plantin MT Light.ttf'); } @font-face { font-family: 'Plantin MT Light Italic'; src: url('fonts/Plantin MT Light Italic.ttf'); } @font-face { font-family: 'font4'; src: url('fonts/Plantin MT Light Italic.ttf'); } {{divId}} .waage { position: relative; display: inline-block; width: 100%; height: 100%; {{#equals offerBackground 'Rot'}} background-color: #7f111a; {{/equals}} {{#equals offerBackground 'Schiefer'}} background-color: #333333; {{/equals}} {{#if background }} background-image: url({{{background}}}); background-size: cover; {{/if}} } {{divId}} .container { position: relative; display: block; margin: 40px; font-size: 60px; font-family: 'Plantin'; color: white; } {{divId}} .header { position: relative; display: block; font-size: 40px; } {{divId}} .pointline { height: 50px; width: 100%; margin-top: -25px; font-size: 40px; font-family: 'Plantin MT Light'; letter-spacing: 6px; white-space: nowrap; overflow: hidden; } {{divId}} .footer { position: absolute; display: block; left: 40px; bottom: 40px; line-height: 0.92; font-size: 32px; font-family: 'Plantin Italic'; color: white; } {{divId}} .footer span { font-size: 32px !important; } {{divId}} .price { position: absolute; right: 40px; bottom: 30px; font-size: 65px; font-family: 'Plantin Italic'; color: white; } {{divId}} .title { font-size: 70px; line-height: 0.95; } </style> <div class='waage'> <div class='container'><div class='header'>{{{nl2br offerHeader}}}<br/><font face='Plantin Italic'>{{{nl2br offerSubHeader}}}</font></div><div class='pointline'>..............................................................</div> <div class='title'><div>{{{offerTitle}}}</div></div> </div> <div class='footer'><font face='Plantin Italic'>{{{nl2br offerFooter}}}</font></div> <div class='price'>{{{offerPrice}}}</div> </div> <script> function templateInitFunc{{playerId}}(player) { /* Without timeout height of footer is 0 */ setTimeout(function(){ var titleHeight = $('{{divId}}').height() - $('{{divId}} .footer').first().height() - 180; $('{{divId}} .title').css('height', titleHeight+'px'); var $h = $('{{divId}} .title'); var $i = $('{{divId}} .title div')[0]; var height = $h.height(); var innerHeight = $i.scrollHeight; while(innerHeight > height) { size = parseInt($h.css('font-size'), 10); $h.css('font-size', size - 1); innerHeight = $i.scrollHeight; } if(height > innerHeight) { $h.height(innerHeight); } }, 0); } </script>