/* Theme Name: Parkquartier Steglitz Theme URI: http://www.lacaze-carnier.com Description: Author: Eric Lacaze Author URI: http://www.lacaze-carnier.com */ @charset "utf-8"; /* font-family:'Futura W01 Book', ; font-family:'Futura W01 Book Oblique'; font-family:'Futura W01 Bold'; font-family:'Futura W01 Bold Oblique'; font-family:'FuturaW01-HeavyOblique'; font-family:'Futura W01 Heavy'; */ /* CORE --------------------------------------------------- */ * { margin: 0px; padding: 0px; outline: none; font-family:'Futura W01 Book', Arial, sans-serif; /*-webkit-transition: translate3d(0,0,0); -moz-transition: translate3d(0,0,0); -ms-transition: translate3d(0,0,0); */ } body { background-color: #ffffff; color: #000000; } img { border: 0px; } .clear { position: relative; width: 0px; height: 0px; overflow: hidden; clear: both; } #lnc-scrbr { position: absolute; bottom: -1px; left: 0px; width: 1px; height: 1px; overflow: hidden; } #lnc-wrapper { position: absolute; top: 227px; left: 0px; width: 100%; min-width: 980px; height: auto; z-index: 100; -webkit-transform: translateZ(0); } #lnc-nav { position: absolute; top: 0px; left: 0px; width: 100%; min-width: 980px; height: auto; z-index: 500; -webkit-transform: translateZ(0); } .lnc-center { position: relative; top: 0px; margin: 0px auto; width: 980px; } /* BG --------------------------------------------------- */ #lnc-background { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; width: auto; height: auto; background-color: #ffffff; background-image: url('../images/lnc-bg-repeat.png'); background-repeat: repeat; -webkit-box-shadow: inset 0px 0px 250px 0px rgba(41, 41, 41, 0.5); -moz-box-shadow: inset 0px 0px 250px 0px rgba(41, 41, 41, 0.5); box-shadow: inset 0px 0px 250px 0px rgba(41, 41, 41, 0.5); -webkit-transform: translateZ(0); } /* HEAD --------------------------------------------------- */ #lnc-head { position: relative; height: 192px; width: 100%; z-index: 610; } #lnc-logo-background { position: absolute; top: 62px; left: -100px; z-index: 500; height: auto; width: auto; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=15)'; filter: alpha(opacity=15); -moz-opacity: 0.15; -khtml-opacity: 0.15; opacity: 0.15; } #lnc-head #lnc-logo { position: absolute; top: 100px; left: 10px; z-index: 550; height: auto; width: auto; cursor: pointer; } #lnc-head #lnc-title { position: absolute; top: 122px; right: 15px; z-index: 525; height: 50px; width: 700px; font-size: 20px; line-height: 50px; text-transform: uppercase; letter-spacing: 15px; text-align: right; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; filter: alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; opacity: 0.9; text-shadow: 0px 0px 10px rgba(255, 255, 255, 1); } #lnc-head #lnc-login-0 { position: absolute; top: -10px; right: 260px; width: 215px; height: 60px; z-index: 590; margin-right: 30px; background-image: url('../images/lnc-login-1-bg.png'); background-position: 0px 0px; background-repeat: no-repeat; background-color: #666666; border-left: 2px #3b5998 solid; -webkit-box-shadow: 0px 0px 10px 0px rgba(59, 89, 152, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(59, 89, 152, 0.5); box-shadow: 0px 0px 10px 0px rgba(59, 89, 152, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #lnc-head #lnc-login-0:hover { border-left: 3px #3b5998 solid; -webkit-box-shadow: 0px 0px 20px 0px rgba(59, 89, 152, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(59, 89, 152, 1); box-shadow: 0px 0px 20px 0px rgba(59, 89, 152, 1); } #lnc-head #lnc-login-1 { position: absolute; top: -10px; right: 260px; width: 215px; height: 60px; z-index: 590; background-image: url('../images/lnc-login-1-bg.png'); background-position: 0px 0px; background-repeat: no-repeat; background-color: #666666; border-left: 2px #ff7800 solid; -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 120, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(255, 120, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(255, 120, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #lnc-head #lnc-login-1:hover { border-left: 3px #ff7800 solid; -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } #lnc-head #lnc-login-2 { position: absolute; top: -10px; right: 30px; width: 215px; height: 60px; z-index: 585; background-image: url('../images/lnc-login-2-bg.png'); background-position: 0px 0px; background-repeat: no-repeat; background-color: #666666; border-left: 2px #ff7800 solid; -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 120, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(255, 120, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(255, 120, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #lnc-head #lnc-login-2:hover { border-left: 3px #ff7800 solid; -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } #lnc-head a.lnc-login { display: block; width: 170px; height: 42px; padding: 18px 0 0 45px; background-image: url('../images/lnc-icon-orange-key.png'); background-position: 3px 15px; background-size: 40px 40px; background-repeat: no-repeat; color: #ffffff; text-transform: uppercase; font-size: 10px; line-height: 14px; letter-spacing: 2px; text-decoration: none; text-shadow: 0px 0px 5px rgba(0,0,0,1); -moz-transform: skew(20deg, 0deg); -webkit-transform: skew(20deg, 0deg); -o-transform: skew(20deg, 0deg); -ms-transform: skew(20deg, 0deg); transform: skew(20deg, 0deg); } #lnc-head a.lnc-login b { color: #ff7800; font-size: 15px; line-height: 20px; letter-spacing: 2px; font-weight: 300; } #lnc-head .fb-like { position: relative; width: 125px; margin: 25px 0 0 15px; float: left; -moz-transform: skew(20deg, 0deg); -webkit-transform: skew(20deg, 0deg); -o-transform: skew(20deg, 0deg); -ms-transform: skew(20deg, 0deg); transform: skew(20deg, 0deg); } #lnc-head .fb-share-button { position: relative; width: 60px; margin: 25px 0 0 0px; float: left; -moz-transform: skew(20deg, 0deg); -webkit-transform: skew(20deg, 0deg); -o-transform: skew(20deg, 0deg); -ms-transform: skew(20deg, 0deg); transform: skew(20deg, 0deg); } #lnc-head #lnc-login-0 { animation: login-1-out ease 0.1s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: login-1-out ease 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: login-1-out ease 0.1s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: login-1-out ease 0.1s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: login-1-out ease 0.1s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-moz-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-webkit-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-o-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-ms-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } /* #lnc-head #lnc-login-0:hover { animation: login-1-over ease 0.1s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: login-1-over ease 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: login-1-over ease 0.1s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: login-1-over ease 0.1s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: login-1-over ease 0.1s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-moz-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-webkit-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-o-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-ms-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } */ #lnc-head #lnc-login-1 { animation: login-1-out ease 0.1s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: login-1-out ease 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: login-1-out ease 0.1s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: login-1-out ease 0.1s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: login-1-out ease 0.1s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-moz-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-webkit-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-o-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } @-ms-keyframes login-1-out { 0% { right: 264px; top: 0px; } 100% { right: 260px; top: -10px; } } #lnc-head #lnc-login-1:hover { animation: login-1-over ease 0.1s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: login-1-over ease 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: login-1-over ease 0.1s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: login-1-over ease 0.1s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: login-1-over ease 0.1s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-moz-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-webkit-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-o-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } @-ms-keyframes login-1-over { 0% { right: 260px; top: -10px; } 100% { right: 264px; top: 0px; } } #lnc-head #lnc-login-2 { animation: login-2-out ease 0.1s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: login-2-out ease 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: login-2-out ease 0.1s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: login-2-out ease 0.1s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: login-2-out ease 0.1s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes login-2-out { 0% { right: 34px; top: 0px; } 100% { right: 30px; top: -10px; } } @-moz-keyframes login-2-out { 0% { right: 34px; top: 0px; } 100% { right: 30px; top: -10px; } } @-webkit-keyframes login-2-out { 0% { right: 34px; top: 0px; } 100% { right: 30px; top: -10px; } } @-o-keyframes login-2-out { 0% { right: 34px; top: 0px; } 100% { right: 30px; top: -10px; } } @-ms-keyframes login-2-out { 0% { right: 34px; top: 0px; } 100% { right: 30px; top: -10px; } } #lnc-head #lnc-login-2:hover { animation: login-2-over ease 0.1s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: login-2-over ease 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: login-2-over ease 0.1s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: login-2-over ease 0.1s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: login-2-over ease 0.1s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes login-2-over { 0% { right: 30px; top: -10px; } 100% { right: 34px; top: 0px; } } @-moz-keyframes login-2-over { 0% { right: 30px; top: -10px; } 100% { right: 34px; top: 0px; } } @-webkit-keyframes login-2-over { 0% { right: 30px; top: -10px; } 100% { right: 34px; top: 0px; } } @-o-keyframes login-2-over { 0% { right: 30px; top: -10px; } 100% { right: 34px; top: 0px; } } @-ms-keyframes login-2-over { 0% { right: 30px; top: -10px; } 100% { right: 34px; top: 0px; } } /* MENU --------------------------------------------------- */ #lnc-menu { position: relative; width: 980px; height: 33px; z-index: 600; border-top: 1px rgba(0,0,0,0.7) solid; border-bottom: 1px rgba(0,0,0,0.7) solid; } #lnc-menu #lnc-menu-info { position: absolute; top: 0px; left: 0px; width: 190px; height: 33px; cursor: pointer; } #lnc-menu #lnc-menu-info img { position: absolute; top: 0px; left: 0px; width: auto; height: 33px; z-index: 10; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #lnc-menu #lnc-menu-info:hover img { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #lnc-menu #lnc-menu-info-title { position: relative; width: auto; height: 33px; float: right; z-index: 20; font-size: 12px; line-height: 33px; padding: 0 40px 0 40px; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; background-image: url('../images/lnc-menu-button.png'); background-position: 10px 4px; background-size: 22px auto; background-repeat: no-repeat; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-menu #lnc-order-info { position: absolute; top: 0px; left: 0px; width: 190px; height: 33px; } #lnc-menu #lnc-order-info img { position: absolute; top: 0px; left: 0px; width: auto; height: 33px; z-index: 10; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; } #lnc-menu #lnc-order-info-title { position: relative; width: auto; height: 33px; float: right; z-index: 20; font-size: 12px; line-height: 33px; padding: 0 40px 0 40px; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-menu #lnc-breadcrumbs { position: absolute; top: 0px; left: 190px; width: 790px; height: 33px; list-style: none outside none; font-size: 12px; line-height: 33px; color: rgba(0,0,0,0.7); text-transform: uppercase; letter-spacing: 2px; } #lnc-menu #lnc-breadcrumbs li { display: block; float: left; padding: 0 5px 0 5px; font-size: 12px; line-height: 33px; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.7); } #lnc-menu #lnc-breadcrumbs li.home { float: right; padding: 0 30px 0 30px; } #lnc-menu #lnc-breadcrumbs li.order { color: #009f6a; } /* #lnc-menu #lnc-breadcrumbs li:hover { background-color: rgba(0,0,0,0.05); } */ /* #lnc-menu #lnc-breadcrumbs li.order:hover { background-color: rgba(0,0,0,0); } */ #lnc-menu #lnc-breadcrumbs li span { color: rgba(0,0,0,0.7); position: relative; font-size: 24px; float: left; display: block; padding-right: 10px; margin-top: -4px; } #lnc-menu #lnc-breadcrumbs li a { color: #19409d; text-decoration: none; float: left; display: block; text-shadow: 0 0 2px rgba(0,0,0,0.25); } #lnc-menu #lnc-breadcrumbs li:hover a { color: #4e81ff; } #lnc-menu.active #lnc-menu-info img { -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #lnc-menu.active #lnc-menu-info-title { background-position: 10px -30px; } #lnc-menu-open { position: relative; width: 980px; height: 450px; display: none; overflow: hidden; background-color: rgba(0,0,0,0.8); } #lnc-menu-open ul { list-style: none outside none; padding: 25px 0 25px 0; } #lnc-menu-open ul li { display: block; font-size: 12px; line-height: 25px; text-transform: uppercase; letter-spacing: 2px; } #lnc-menu-open ul li.left { width: 450px; float: left; } #lnc-menu-open ul li.right { width: 530px; float: right; } #lnc-menu-open ul li.left p.h3 { color: #009f6a; font-weight: normal; display: inline-block; width: 170px; padding: 0 10px 0 0; text-align: right; vertical-align: top; } #lnc-menu-open ul li.left ul { display: inline-block; width: 260px; padding: 0 0 25px 0; } #lnc-menu-open ul li.left ul li { width: 260px; } #lnc-menu-open ul li.right p.h3 { color: #009f6a; font-weight: normal; display: inline-block; width: 150px; padding: 0 10px 0 0; text-align: right; vertical-align: top; } #lnc-menu-open ul li.right ul { display: inline-block; width: 350px; height: 400px; padding: 0px; overflow: hidden; } #lnc-menu-open ul li.right ul .gameserver { width: 330px; position: relative; } #lnc-menu-open ul li.right ul li { width: 330px; } #lnc-menu-open ul li ul li span { position: relative; display: block; float: left; width: 20px; top: -4px; font-size: 24px; color: #ffffff; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-menu-open ul li ul li a { text-decoration: none; display: block; color: #ffffff; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-menu-open ul li ul li a:hover { color: rgba(255,120,0,1); text-shadow: 0 0 5px rgba(0,0,0,1); } /* BODY --------------------------------------------------- */ #lnc-content { position: relative; width: 980px; min-height: 400px; padding: 35px 0 25px 0; } #lnc-content .h1 { position: relative; width: auto; height: 36px; padding: 0 20px 0 20px; margin: 0 0 20px 20px; display: inline-block; background-image: url('../images/lnc-h1-bg.png'); background-position: 0px 0px; background-repeat: no-repeat; background-color: rgba(20,20,20,0.8); border-left: 2px #009f6a solid; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #lnc-content #lnc-order-headline .h1 { width: 900px; border-left: 2px rgba(255,120,0,1) solid; } #lnc-content h1 { position: relative; width: auto; height: 36px; display: inline-block; white-space: nowrap; color: #ffffff; font-size: 20px; line-height: 36px; font-weight: 300; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 5px rgba(0,0,0,1); -moz-transform: skew(5deg, 0deg); -webkit-transform: skew(5deg, 0deg); -o-transform: skew(5deg, 0deg); -ms-transform: skew(5deg, 0deg); transform: skew(5deg, 0deg); } #lnc-content div.h2 { position: relative; width: auto; height: auto; padding: 0 0 0 20px; margin: 0 20px 15px 20px; display: block; clear: both; border-left: 2px #009f6a solid; -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #lnc-content h2 { position: relative; width: auto; height: auto; display: inline-block; font-size: 14px; line-height: 18px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(5deg, 0deg); -webkit-transform: skew(5deg, 0deg); -o-transform: skew(5deg, 0deg); -ms-transform: skew(5deg, 0deg); transform: skew(5deg, 0deg); } #lnc-content p.h2 { position: relative; width: auto; height: auto; display: inline-block; padding: 0; text-align: left; font-size: 14px; line-height: 18px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(5deg, 0deg); -webkit-transform: skew(5deg, 0deg); -o-transform: skew(5deg, 0deg); -ms-transform: skew(5deg, 0deg); transform: skew(5deg, 0deg); } #lnc-content h3 { position: relative; width: auto; height: auto; display: block; padding: 0 0 0 40px; font-size: 13px; line-height: 25px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-content p.h3 { position: relative; width: auto; height: auto; display: block; padding: 0 0 0 40px; text-align: left; font-size: 13px; line-height: 25px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-content h4 { position: relative; width: auto; height: auto; display: block; padding: 3px 0 3px 40px; font-size: 13px; line-height: 19px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-content p.h4 { position: relative; width: auto; height: auto; display: block; padding: 3px 0 3px 40px; text-align: left; font-size: 13px; line-height: 19px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-content h5 { position: relative; width: auto; height: auto; display: block; padding: 3px 0 3px 40px; font-size: 13px; line-height: 19px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-content p.h5 { position: relative; width: auto; height: auto; display: block; padding: 3px 0 3px 40px; text-align: left; font-size: 13px; line-height: 19px; letter-spacing: 1px; font-weight: 600; color: #000000; text-transform: uppercase; -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-content p { padding: 0 30px 25px 40px; font-size: 13px; line-height: 18px; letter-spacing: 1px; color: #000000; text-align: justify; } #lnc-content p.alert { color: red; } #lnc-content p a { text-decoration: none; color: #19409d; text-shadow: 0 0 2px rgba(0,0,0,0.25); } #lnc-content p a:hover { color: rgba(255,120,0,1); } #lnc-content ul { padding: 0 0 25px 40px; list-style: none outside none; font-size: 12px; line-height: 25px; letter-spacing: 1px; color: #000000; } /* INTRO */ #lnc-intro-teaser { position: relative; float: right; width: 290px; height: 350px; margin: 20px 20px 0 20px; } #lnc-intro-teaser #lnc-intro-teaser-show { position: absolute; top: 0px; left: 0px; width: 290px; height: auto; min-height: 270px; padding: 0 0 30px 0; cursor: pointer; background-image: url('../images/lnc-teaser-bg.png'); background-position: 0px 0px; background-repeat: no-repeat; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } #lnc-intro-teaser #lnc-intro-teaser-show:hover { -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } #lnc-intro-teaser #lnc-intro-teaser-hide { display: none; } #lnc-intro-teaser .image { position: relative; width: 290px; height: 176px; z-index: 100; border-top: 1px #009f6a solid; border-bottom: 1px #009f6a solid; display: none; } #lnc-intro-teaser .image img { position: relative; width: 330px; height: 176px; margin: 0px -20px 0px -20px; } #lnc-intro-teaser .title { position: relative; top: -25px; width: 260px; height: auto; z-index: 120; padding: 0 15px 0 15px; margin-bottom: -15px; display: none; color: #ffffff; font-size: 17px; line-height: 25px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-intro-teaser .info { position: relative; width: 260px; height: auto; padding: 0 15px 40px 15px; display: none; color: #ffffff; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 2px; text-align: left; text-shadow: 0 0 5px rgba(0,0,0,1); } .price { position: absolute; bottom: -15px; right: -30px; width: 155px; height: 60px; } .price .price-tag { position: absolute; top: -12px; left: 0px; width: 155px; height: 60px; z-index: 200; color: rgba(255, 120, 0, 1); } .price .price-tag .bg { position: absolute; top: 9px; left: 15px; width: 124px; height: 42px; z-index: 5; background-color: #292929; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } .price .price-tag .pre { position: absolute; top: 20px; left: 23px; z-index: 10; font-size: 16px; line-height: 30px; } .price .price-tag .count { position: absolute; top: 14px; right: 35px; z-index: 10; font-size: 30px; line-height: 30px; } .price .price-tag .count span { position: relative; top: -11px; font-size: 16px; line-height: 16px; } .price .price-tag .euro { position: absolute; bottom: 26px; right: 15px; z-index: 10; display: block; font-size: 9px; line-height: 9px; -moz-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); -o-transform: rotate(-70deg); -ms-transform: rotate(-70deg); transform: rotate(-70deg); } .price .price-sub { position: absolute; top: 0px; left: 1px; width: 154px; height: 60px; z-index: 199; } .price .price-sub .bg { position: absolute; top: 9px; left: 15px; width: 124px; height: 42px; z-index: 5; background-color: rgba(255, 120, 0, 1); -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } .price .price-sub .sub-info { position: absolute; bottom: 11px; right: 25px; z-index: 10; display: block; font-size: 8px; line-height: 8px; color: #000000; text-transform: uppercase; letter-spacing: 2px; font-family:'Futura W01 Heavy', Arial, sans-serif; } .price .sub-info span { position: relative; top: 1px; font-size: 16px; line-height: 8px; color: #000000; } .price { animation: price ease 2s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: price ease 2s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: price ease 2s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: price ease 2s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: price ease 2s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } .price .price-sub { animation: price-sub ease 2s; animation-iteration-count: 1; animation-fill-mode:forwards; -webkit-animation: price-sub ease 2s; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; -moz-animation: price-sub ease 2s; -moz-animation-iteration-count: 1; -moz-animation-fill-mode:forwards; -o-animation: price-sub ease 2s; -o-animation-iteration-count: 1; -o-animation-fill-mode:forwards; -ms-animation: price-sub ease 2s; -ms-animation-iteration-count: 1; -ms-animation-fill-mode:forwards; } @keyframes price { 0% { bottom: -27px; opacity:0; } 50% { bottom: -27px; opacity:0; } 100% { bottom: -15px; opacity:1; } } @-moz-keyframes price { 0% { bottom: -27px; opacity:0; } 50% { bottom: -27px; opacity:0; } 100% { bottom: -15px; opacity:1; } } @-webkit-keyframes price { 0% { bottom: -27px; opacity:0; } 50% { bottom: -27px; opacity:0; } 100% { bottom: -15px; opacity:1; } } @-o-keyframes price { 0% { bottom: -27px; opacity:0; } 50% { bottom: -27px; opacity:0; } 100% { bottom: -15px; opacity:1; } } @-ms-keyframes price { 0% { bottom: -27px; opacity:0; } 50% { bottom: -27px; opacity:0; } 100% { bottom: -15px; opacity:1; } } @keyframes price-sub { 0% { top: -12px; } 75% { top: -12px; } 100% { top: 0px; } } @-moz-keyframes price-sub { 0% { top: -12px; } 75% { top: -12px; } 100% { top: 0px; } } @-webkit-keyframes price-sub { 0% { top: -12px; } 75% { top: -12px; } 100% { top: 0px; } } @-o-keyframes price-sub { 0% { top: -12px; } 75% { top: -12px; } 100% { top: 0px; } } @-ms-keyframes price-sub { 0% { top: -12px; } 75% { top: -12px; } 100% { top: 0px; } } #lnc-intro-content { position: relative; width: 650px; height: auto; float: right; } #lnc-intro-guarantee { position: relative; width: 980px; height: auto; display: block; clear: both; margin: 20px 0 0 0; padding: 20px 0 0 0; border-top: 1px rgba(0,0,0,0.7) solid; } #lnc-intro-guarantee.sub { margin: 0px 0 0 0; padding: 0px 0 0 0; border-top: 0px; } #lnc-intro-guarantee p.h3 { position: relative; width: 140px; height: auto; display: block; float: left; padding: 0 10px 0 0; font-size: 12px; line-height: 40px; color: #000000; text-transform: uppercase; letter-spacing: 2px; text-align: right; font-family:'Futura W01 Book Oblique', Arial, sans-serif; font-weight: 300; } #lnc-intro-guarantee ul { position: relative; width: 830px; height: auto; display: block; float: left; list-style: none outside none; padding: 0px !important; } #lnc-intro-guarantee ul li { position: relative; width: 275px; height: auto; display: block; float: left; padding: 0 0 10px 0; font-size: 12px; line-height: 40px; color: #000000; text-transform: uppercase; letter-spacing: 1px; background-position: 0px 0px; background-repeat: no-repeat; } #lnc-intro-guarantee ul li img { position: relative; width: 40px; height: 40px; display: block; float: left; margin-right: 5px; } #lnc-intro-guarantee-short { position: relative; width: 980px; height: auto; display: block; clear: both; margin: 20px 0 0 0; padding: 20px 0 0 0; border-top: 1px rgba(0,0,0,0.7) solid; } #lnc-intro-guarantee-short.sub { margin: 0px 0 0 0; padding: 0px 0 0 0; border-top: 0px; } #lnc-intro-guarantee-short p.h3 { position: relative; width: 140px; height: auto; display: block; float: left; padding: 0 10px 0 0; font-size: 12px; line-height: 40px; color: #000000; text-transform: uppercase; letter-spacing: 2px; text-align: right; font-family:'Futura W01 Book Oblique', Arial, sans-serif; font-weight: 300; } #lnc-intro-guarantee-short ul { position: relative; width: 550px; height: auto; display: block; float: left; list-style: none outside none; padding: 0px !important; } #lnc-intro-guarantee-short ul li { position: relative; width: 275px; height: auto; display: block; float: left; padding: 0 0 10px 0; font-size: 12px; line-height: 40px; color: #000000; text-transform: uppercase; letter-spacing: 1px; background-position: 0px 0px; background-repeat: no-repeat; } #lnc-intro-guarantee-short ul li img { position: relative; width: 40px; height: 40px; display: block; float: left; margin-right: 5px; } /* alt start */ #lnc-content-add img { padding: 30px 0 30px 0; } #lnc-content-add ul { position: relative; width: 300px; height: auto; display: block; list-style: none outside none; margin: 0 0 0 30px; padding: 0px !important; } #lnc-content-add ul li { position: relative; width: 290px; height: auto; display: block; padding: 0 0 10px 0px; font-size: 12px; line-height: 40px; color: #000000; text-transform: uppercase; letter-spacing: 1px; background-position: 0px 0px; background-repeat: no-repeat; } #lnc-content-add ul li img { position: relative; width: 40px; height: 40px; display: block; float: left; margin-right: 5px; padding: 0; } /* alt ende */ .lnc-content-add img { padding: 30px 0 30px 0; } .lnc-content-add ul { position: relative; width: 300px; height: auto; display: block; list-style: none outside none; margin: 0 0 0 30px; padding: 0px !important; } .lnc-content-add ul li { position: relative; width: 290px; height: auto; display: block; padding: 0 0 10px 0px; font-size: 12px; line-height: 40px; color: #000000; text-transform: uppercase; letter-spacing: 1px; background-position: 0px 0px; background-repeat: no-repeat; } .lnc-content-add ul li img { position: relative; width: 40px; height: 40px; display: block; float: left; margin-right: 5px; padding: 0; } /* alt start */ #lnc-content-headline { position: relative; width: 980px; height: auto; clear: both; padding: 0 0 10px 0; } #lnc-content-text { position: relative; width: 650px; height: auto; float: left; } #lnc-content-add { position: relative; width: 330px; height: auto; float: left; } /* alt ende */ .lnc-content-headline { position: relative; width: 980px; height: auto; clear: both; padding: 0 0 10px 0; } .lnc-content-text { position: relative; width: 650px; height: auto; float: left; } .lnc-content-add { position: relative; width: 330px; height: auto; float: left; } ul.lnc-gameserver { position: relative; height: auto; display: block; list-style: none outside none; margin: 0 0 40px 40px; padding: 0px !important; } ul.lnc-gameserver li { position: relative; height: auto; display: block; font-size: 12px; line-height: 20px; color: #000000; text-transform: uppercase; letter-spacing: 1px; background-position: 0px 0px; background-repeat: no-repeat; } ul.lnc-gameserver li a { color: #19409d; text-decoration: none; display: block; text-shadow: 0 0 2px rgba(0,0,0,0.25); } ul.lnc-gameserver li a:hover { color: rgba(255,120,0,1); } ul.lnc-gameserver li span { position: relative; font-size: 24px; float: left; display: block; padding-right: 10px; margin-top: -4px; } .lnc-right-50 { position: relative; width: 50%; float: right; } .lnc-left-50 { position: relative; width: 50%; float: left; } #lnc-product { position: relative; display: block; width: 980px; height: 200px; clear: both; padding: 0 0 50px 0; } #lnc-product .lnc-product-image { position: relative; width: 244px; height: 160px; z-index: 1000; float: left; background-color: #484848; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } #lnc-product .lnc-product-image img { position: relative; width: 300px; height: 160px; z-index: 1000; margin: 0 -29px 0 -25px; } #lnc-product .lnc-product-4-1 { position: relative; display: block; width: 180px; height: 160px; float: left; z-index: 300; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-product-1-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-4-2 { position: relative; display: block; width: 180px; height: 160px; float: left; z-index: 200; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-product-2-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-4-3 { position: relative; display: block; width: 180px; height: 160px; float: left; z-index: 100; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-product-3-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-4-4 { position: relative; display: block; width: 193px; height: 160px; float: left; z-index: 100; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-plus-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-4-plus { position: relative; display: block; width: 183px; height: 160px; float: left; z-index: 400; margin: 0 0 0 10px; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-plus-bg.png'); background-repeat: no-repeat; background-position: right 0px; } #lnc-product .lnc-product-3-1 { position: relative; display: block; width: 244px; height: 160px; float: left; z-index: 300; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-product-1-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-3-2 { position: relative; display: block; width: 244px; height: 160px; float: left; z-index: 200; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-product-2-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-3-3 { position: relative; display: block; width: 246px; height: 160px; float: left; z-index: 100; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-3-bg.png'); background-repeat: no-repeat; background-position: right 0px; } #lnc-product .lnc-product-3-plus { position: relative; display: block; width: 236px; height: 160px; float: left; z-index: 400; margin: 0 0 0 10px; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-plus-bg.png'); background-repeat: no-repeat; background-position: right 0px; } #lnc-product .lnc-product-2-1 { position: relative; display: block; width: 366px; height: 160px; float: left; z-index: 300; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-product-1-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-2-2 { position: relative; display: block; width: 366px; height: 160px; float: left; z-index: 200; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-2-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; } #lnc-product .lnc-product-2-plus { position: relative; display: block; width: 356px; height: 160px; float: left; z-index: 400; margin: 0 0 0 10px; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-plus-bg.png'); background-repeat: no-repeat; background-position: right 0px; } #lnc-product .price-position { position: absolute; right: 35px; bottom: -20px; width: 155px; height: 60px; } #lnc-product .lnc-product { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } #lnc-product .lnc-product:hover { z-index: 500 !important; -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } #lnc-product * { text-decoration: none; } #lnc-product p.title { margin: 0px; padding: 12px 0 8px 20px; color: #009f6a; text-transform: uppercase; letter-spacing: 3px; font-size: 18px; text-shadow: 0 0 5px rgba(0,0,0,1); -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-product .lnc-product:hover p.title { color: rgba(255,120,0,1); } #lnc-product ul.info { list-style: none outside none; display: block; padding: 0px !important; } #lnc-product ul.info li { padding: 0 0 0 15px; color: #ffffff; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-product-sub { position: relative; display: block; width: 980px; height: 40px; clear: both; padding: 5px 0 45px 0; } #lnc-product-sub .lnc-product-image { position: relative; width: 244px; height: 40px; z-index: 1000; float: left; background-color: #484848; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } #lnc-product-sub .lnc-product-image img { position: relative; width: 300px; height: 40px; z-index: 1000; margin: 0 -29px 0 -25px; } #lnc-product-sub .lnc-product-sub { position: relative; display: block; width: 625px; height: 40px; float: left; z-index: 100; background-color: rgba(20,20,20,0.8); background-image: url('../images/lnc-product-1-bg.png'); background-repeat: no-repeat; background-position: 0px -110px; } #lnc-product-sub .price-position { position: absolute; right: 0px; bottom: 0px; width: 155px; height: 60px; } #lnc-product-sub .lnc-product { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } #lnc-product-sub .lnc-product:hover { z-index: 500 !important; -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } #lnc-product-sub * { text-decoration: none; } #lnc-product-sub p.title { margin: 0px; padding: 0 0 0 20px; line-height: 40px; color: #009f6a; text-transform: uppercase; letter-spacing: 3px; font-size: 18px; text-shadow: 0 0 5px rgba(0,0,0,1); -moz-transform: skew(-15deg, 0deg); -webkit-transform: skew(-15deg, 0deg); -o-transform: skew(-15deg, 0deg); -ms-transform: skew(-15deg, 0deg); transform: skew(-15deg, 0deg); } #lnc-product-sub .lnc-product:hover p.title{ color: rgba(255,120,0,1); } #lnc-product-sub ul.info { list-style: none outside none; display: block; padding: 0px !important; } #lnc-product-sub ul.info li { padding: 0 0 0 15px; color: #ffffff; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-order-headline { position: relative; width: 980px; height: auto; clear: both; padding: 0 0 10px 0; z-index: 200; } #lnc-order-background { position: absolute; top: 91px; bottom: 40px; right: 20px; width: 290px; height: auto; z-index: 100; background-color: rgba(20,20,20,0.8); margin-right: 1px; background-image: url('../images/lnc-order-bg.png'); background-repeat: no-repeat; background-position: 0px 0px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } #lnc-order-image { position: absolute; top: 91px; right: 20px; width: 290px; height: 176px; z-index: 200; border-top: 1px #009f6a solid; border-bottom: 1px #009f6a solid; } #lnc-order-image img { position: relative; margin: 0px -20px 0px -20px; width: 330px; height: 176px; } #lnc-order-cart { position: absolute; top: 244px; right: 20px; width: 290px; height: 160px; z-index: 200; } #lnc-order-cart .title { position: relative; top: 0px; width: 260px; height: auto; z-index: 120; padding: 0 15px 0 15px; color: #ffffff; font-size: 17px; line-height: 25px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-order-cart .info { position: relative; width: 260px; height: auto; padding: 30px 15px 0 15px; color: #ffffff; font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0,0,0,1); } #lnc-order-button { position: relative; width: 980px; height: 58px; clear: both; z-index: 2000; margin: 0 0 50px 0; } #lnc-order-button * { text-decoration: none; } #lnc-order-button .order-bg { position: absolute; top: 8px; width: 900px; height: 42px; padding: 0 20px 0 20px; margin: 0 0 0 20px; display: block; z-index: 10; background-color: rgba(255, 120, 0, 1); -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } #lnc-order-button .order-text { position: absolute; top: 8px; left: 40px; width: auto; text-align: left; z-index: 20; font-size: 16px; line-height: 42px; color: #000000; text-transform: uppercase; letter-spacing: 2px; font-family:'Futura W01 Heavy', Arial, sans-serif; } #lnc-order-button .order-text span { position: relative; font-size: 30px; float: left; display: block; padding-right: 10px; margin-top: -3px; } .orderprice { position: absolute; bottom: 0px; right: 50px; width: 175px; height: 58px; z-index: 20; } .orderprice .price-tag { position: absolute; top: 0px; left: 0px; width: 175px; height: 58px; z-index: 200; color: rgba(255, 120, 0, 1); } .orderprice .price-tag .bg { position: absolute; top: 0px; left: 15px; width: 175px; height: 58px; z-index: 5; background-color: #292929; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-transform: skew(-20deg, 0deg); -webkit-transform: skew(-20deg, 0deg); -o-transform: skew(-20deg, 0deg); -ms-transform: skew(-20deg, 0deg); transform: skew(-20deg, 0deg); } .orderprice .price-tag .pre { position: absolute; top: 15px; left: 25px; z-index: 10; font-size: 22px; line-height: 42px; } .orderprice .price-tag .count { position: absolute; top: 7px; right: 15px; z-index: 10; font-size: 42px; line-height: 42px; } .orderprice .price-tag .count span { position: relative; top: -15px; font-size: 22px; line-height: 22px; } .orderprice .price-tag .euro { position: absolute; bottom: 26px; right: -15px; z-index: 10; display: block; font-size: 11px; line-height: 11px; -moz-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); -o-transform: rotate(-70deg); -ms-transform: rotate(-70deg); transform: rotate(-70deg); } .orderprice .price-tag .unit { position: absolute; top: 35px; left: -200px; width: 200px; text-align: right; font-size: 10px; line-height: 10px; color: #000000; text-transform: uppercase; letter-spacing: 2px; font-family:'Futura W01 Heavy', Arial, sans-serif; } #lnc-order-button:hover .orderprice .price-tag .bg, #lnc-order-button:hover .order-bg { -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } form.lnc-order-form { display: block; min-height: 310px; } table.lnc-configuration { width: auto; border: 0px; margin: 0 0 20px 30px; } table.lnc-configuration * { text-transform: uppercase; line-height: 25px; font-size: 12px; letter-spacing: 2px; } table.lnc-configuration thead td { text-align: right; padding-right: 10px; } table.lnc-configuration tbody tr:hover { background-color: rgba(0,0,0,0.2); } table.lnc-configuration .name { width: 220px; padding: 3px 0 3px 10px; } table.lnc-configuration .name span { width: 30px; display: inline-block; } table.lnc-configuration .input { width: 50px; text-align: right; padding: 3px 10px 3px 10px; } table.lnc-configuration .count { width: 70px; text-align: right; padding: 3px 10px 3px 10px; } table.lnc-configuration .option { width: 70px; text-align: left; padding: 3px 10px 3px 10px; } .lnc-form-left { padding-left: 40px; } .lnc-form-20 { position: relative; width: 100px; float: left; padding-right: 20px; } .lnc-form-50 { position: relative; width: 235px; float: left; padding-right: 20px; } .lnc-form-80 { position: relative; width: 370px; float: left; padding-right: 20px; } .lnc-form-auto { position: relative; width: auto; float: left; padding-right: 20px; } .form-row { position: relative; padding: 0 0 20px 40px; } .form-row label { display: block; text-transform: uppercase; line-height: 25px; font-size: 12px; letter-spacing: 2px; } .form-row label.alert { color: red; } .form-row input.text { padding: 3px 5px 3px 5px; border: 1px #ffffff solid; font-size: 14px; letter-spacing: 1px; background-color: rgba(20,20,20,0.8); color: #ffffff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } .form-row input.alert { border: 1px red solid; -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.5); } .form-row .lnc-form-20 input { width: 88px; } .form-row .lnc-form-50 input { width: 223px; } .form-row .lnc-form-80 input { width: 358px; } .form-row .lnc-form-auto label { display: inline-block; width: auto; text-transform: uppercase; line-height: 25px; font-size: 12px; letter-spacing: 2px; } .form-row .lnc-form-auto input { display: inline-block; margin: 0 10px 0 10px; } input.domain { padding: 3px 5px 3px 5px; margin: 0 5px 0 5px; border: 1px #ffffff solid; font-size: 14px; letter-spacing: 1px; background-color: rgba(20,20,20,0.8); color: #ffffff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } input.domain.alert { border: 1px red solid; -webkit-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(255, 0, 0, 0.5); } form.lnc-contact-form { display: block; } form.lnc-contact-form ol { list-style: none outside none; } form.lnc-contact-form ol li { position: relative; padding: 0 0 20px 40px; overflow: visible; } form.lnc-contact-form ol li label { display: block; float: none; width: 100%; margin-right: 0px; text-transform: uppercase; line-height: 25px; font-size: 12px; letter-spacing: 2px; } form.lnc-contact-form ol li input { display: block; padding: 3px 5px 3px 5px; border: 1px #ffffff solid; font-size: 14px; letter-spacing: 1px; width: 358px; background-color: rgba(20,20,20,0.8); color: #ffffff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } form.lnc-contact-form ol li textarea { display: block; padding: 3px 5px 3px 5px; border: 1px #ffffff solid; font-size: 14px; letter-spacing: 1px; width: 358px; height: 100px; background-color: rgba(20,20,20,0.8); color: #ffffff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } form.lnc-contact-form ol li.csc-form-element-submit input { display: block; padding: 3px 10px 3px 10px; border: 0px; width: auto; background-color: rgba(255, 120, 0, 1); color: #000000; font-size: 12px; line-height: 21px; text-transform: uppercase; letter-spacing: 2px; font-family: 'Futura W01 Heavy', Arial, sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); } form.lnc-contact-form ol li.csc-form-element-submit input:hover { -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); -moz-box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); box-shadow: 0px 0px 20px 0px rgba(255, 120, 0, 1); } .credit_card { /* color: rgba(255,120,0,1); */ text-transform: none !important; font-weight: bold; } /* FOOT --------------------------------------------------- */ #lnc-footer { position: relative; width: 980px; height: 100px; border-top: 1px rgba(0,0,0,0.7) solid; } #lnc-footer ul { position: relative; left: 30px; width: 920px; list-style: none outside none; } #lnc-footer ul li { display: block; float: left; padding-right: 15px; font-size: 12px; line-height: 33px; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.7); } #lnc-footer ul li.right { float: right; padding-right: 0; padding-left: 15px; } #lnc-footer ul li span { display: inline-block; padding-left: 15px; } #lnc-footer a { color: #19409d; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,0.25); } #lnc-footer a:hover { color: #4e81ff; } /* JSCROLLPANE --------------------------------------------------- */ .jspContainer { overflow: hidden; position: relative; } .jspPane { position: absolute; margin-left: 0px; } .jspVerticalBar { position: absolute; top: 0; right: 0px; width: 14px; height: 100%; } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 14px; } .jspVerticalBar * { margin: 0; padding: 0px; } .jspHorizontalBar * { margin: 0; padding: 0px; } .jspCap { display: none; } .jspHorizontalBar .jspCap { float: left; } .jspTrack { background: transparent; position: relative; width: 3px; left: 5px; } .jspDrag { background: #ffffff; position: relative; top: 0px; width: 3px; height: 3px; left: 0px; cursor: pointer; } .jspHorizontalBar .jspTrack { float: left; height: 3px; top: 5px; left: 0px; } .jspHorizontalBar .jspDrag { float: left; height: 3px; top: 0px; left: 0px; } .jspArrow { background: none; text-indent: -20000px; display: block; cursor: pointer; } .jspArrow.jspDisabled { cursor: default; } .jspVerticalBar .jspArrow { height: 13px; width: 13px; } .jspHorizontalBar .jspArrow { width: 13px; float: left; height: 13px; } .jspVerticalBar .jspArrow:focus { outline: none; } .jspCorner { background: #eeeef4; float: left; height: 100%; } .jspArrowUp { background-image: url('../images/jspArrowUp.png'); background-position: 0px 0px; background-repeat: no-repeat; } .jspArrowDown { background-image: url('../images/jspArrowDown.png'); background-position: 0px 0px; background-repeat: no-repeat; } .jspArrowLeft { background-image: url('../images/jspArrowLeft.png'); background-position: 0px 0px; background-repeat: no-repeat; } .jspArrowRight { background-image: url('../images/jspArrowRight.png'); background-position: 0px 0px; background-repeat: no-repeat; } /* Yuk! CSS Hack for IE6 3 pixel bug :( */ * html .jspCorner { margin: 0 -3px 0 0; } /* MEDIA QUERIES --------------------------------------------------- */ .rsp_desktop { position: fixed; top: 0px; left: 0px; width: 5px; height: 5px; z-index: 123456; background-color: aqua; } .rsp_mobile { position: fixed; top: 0px; left: 0px; width: 5px; height: 5px; z-index: 123456; background-color: fuchsia; } .rsp_desktop { display: block; -webkit-animation: Show 1s ease 0 1 alternate; animation: Show 1s ease 0 1 alternate; opacity: 1; } #LnC_AnimationFrame.rsp_desktop { display: block; -webkit-animation: none !important; animation: none !important; opacity: 1; } .rsp_mobile { display: none; -webkit-animation: Hide 1s ease 0 1 alternate; animation: Hide 1s ease 0 1 alternate; opacity: 0; } @media all and (max-width: 980px) { .rsp_desktop { -webkit-animation: Hide 1s ease 0 1 alternate; animation: Hide 1s ease 0 1 alternate; opacity: 0; display: none; } #LnC_AnimationFrame.rsp_desktop { display: none; -webkit-animation: none !important; animation: none !important; opacity: 0; } .rsp_mobile { -webkit-animation: Show 1s ease 0 1 alternate; animation: Show 1s ease 0 1 alternate; opacity: 1; display: block; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } } @media all and (max-width: 600px) { } /* TRANSITIONS --------------------------------------- */ @keyframes Show { 0% { -moz-opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; opacity:0; } 100% { -moz-opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; opacity:1; } } @-webkit-keyframes Show { 0% { opacity:0; } 100% { opacity:1; } } @keyframes Hide { 0% { -moz-opacity:1; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; opacity:1; } 100% { -moz-opacity:0; filter:alpha(opacity=0); -ms-filter:"alpha(opacity=0)"; opacity:0; } } @-webkit-keyframes Hide { 0% { opacity:1; } 100% { opacity:0; } }