/* CSS-Datei für Sparkassen-Race - Desktop variante*/ @charset "UTF-8"; body {background-color: #2a2a2a;width: 100%;} h2 {font-size: 28px;font-weight: bold;margin-bottom: 32px;} h3 {font-size: 17px;margin-bottom: 18px;} p {margin-bottom: 12px;font-size: 17px;line-height: 1.4em;} input[type='text'], dl { background-color: #f9f9f9; -webkit-box-shadow: inset 1px 1px 4px 0px rgba(98, 98, 98, 0.4); box-shadow: inset 1px 1px 4px 0px rgba(98, 98, 98, 0.4); line-height: 35px; padding: 4px 10px; border-radius: 3px; font-size: 15px; font-weight: bold; border-width: 0px; border: 1px solid #ffffff; color: #bcbcbc; } input[type='text'].error, select.error { border: 1px solid #e66352; background-color: #fae3e0; } .button {background-position: left top !important;} .button:hover {background-position: left bottom !important;} #Wrapper {margin: 20px auto 0px auto; width: 1024px; overflow: hidden;} #Content {width: 1024px; height: 730px; position: absolute; overflow: hidden;} #Content a:hover {color: #ff0000;} #layer0, #layer1, #layer2, #layer3 {width: 1024px; height: 730px;position: absolute;} #layer0 {width:8000px;z-index: 0;} #layer0 div {float: left;height: 730px;} #layer0 div.bg0 {width: 1024px; background: transparent url('../images/desktop/Background_Wand2.png') 0px top no-repeat; } #layer0 div.bg1 {width: 2048px; background: transparent url('../images/desktop/Background_Wand.png') 0px top repeat; } #layer0 div.bgstart {width: 1024px; background: transparent url('../images/desktop/Background_Wand3.png') 0px top repeat; } #layer1 {width:8000px;z-index: 100;} #layer2 {color: #ffffff;z-index: 200;height: 730px;width:8000px;} #layer2 .page {width: 1024px; height: 730px; float: left;} #layer3 {z-index: 120; background: transparent url('../images/desktop/Overlay_Bottom.png') 0px bottom no-repeat;} #Logo {position: absolute; width: 1024px; height: 290px; background: transparent url('../images/desktop/Overlay_Logo.png') right bottom no-repeat;} #Footer {background-color: #2a2a2a;margin: 0px auto 0px auto; width: 1024px;text-align: right;font-size: 13px; padding: 740px 0px 10px 0px;} #Footer a {color: #b4b4b4;padding: 0px 3px;cursor: pointer;line-height: 20px;} #Footer a:hover {color: #ffffff;} #Footer .addthis_button_facebook {width: 19px; height: 19px;background: transparent url('../images/desktop/facebookBtn.gif') 0px bottom no-repeat;float: left;margin-left: -17px;padding-right: 7px;} #Footer .addthis_button_compact{width: 15px; height: 19px;background: transparent url('../images/desktop/addthisBtn.gif') 0px bottom no-repeat;float: left; margin-right: 9px;padding-right: 3px;} #Footer .addthis_toolbox {width: 62px !important;margin-left: 29px;} #Footer .addthis_toolbox a span {background: transparent !important;} #spkLogo {background: url('../images/logos/standard.gif') left bottom no-repeat; position: absolute; width: 1024px; height: 730px;} #spkLogo.instLogo_99999999{background-image: url('../images/logos/99999999.gif');} #spkLogo.instLogo_68050101{background-image: url('../images/logos/68050101.gif');} #spkLogo.instLogo_72051210{background-image: url('../images/logos/72051210.gif');} .StartBox {display: none; margin-left: 76px; margin-top: 58px;width: 597px; height: 509px;background: url('../images/desktop/Box_Start.png') 0px 0px no-repeat; color: #000000; padding: 71px 80px 0px 76px;} .StartBox h2 {margin-bottom: 13px;} .StartBox h2 + p {margin-bottom: 21px;} .StartBox h3 {font-size: 21px;margin-bottom: 19px;} .StartBox div.Checkbox + div {font-size: 13px;margin-bottom: 30px;} .StartBox input[type='text'] { height:35px; width: 271px; margin-bottom: 26px; clear: both; margin-left: -1px; } .loginButton{ border-width: 0px; cursor: pointer; float: left; font-size: 0px; height:53px; width: 130px; font-weight: bold; padding: 0px 16px 0 0; line-height: 8px; margin-left: -4px; margin-top: -4px; background: url("../images/desktop/loginBtn.png") top left no-repeat; } .loginButton:hover{ background-position: bottom left; } .registerBtn, .homepageBtn { float: left; font-size: 16px; font-weight: bold; margin-top: 13px; margin-left: 20px; cursor: pointer; height: 26px; padding-left: 17px; background: url("../images/desktop/registerBtnBullet.gif") 0 0 no-repeat; } .registerBtn span, .homepageBtn span {text-decoration: underline;} .registerBtn:hover, .homepageBtn:hover { color: #ff0000; background-position: 0 -35px; } /* #------------------------------------------------------------ Registrierungsformular #------------------------------------------------------------*/ .page.register {display: none;} .RegisterBox .dropdown { cursor: pointer; position: absolute; padding: 4px 0px; margin: 0px; height: 19px; float: left; width: 107px; margin-right: 40px; margin-left: 120px; background: #f9f9f9;} .RegisterBox dt {padding: 0px 10px;background: url('../images/desktop/down.png') 88px 7px no-repeat} .RegisterBox dt, .RegisterBox dd {font-size: 13px;line-height: 23px;font-weight: normal;color: #000; width: 107px;} .RegisterBox dd {display: none;margin: 0px 0px 6px 0px;} .RegisterBox ul {list-style-type: none;} .RegisterBox li a{padding-left: 10px;width: 97px;display: block;} .RegisterBox dl a {color: #000;} .RegisterBox .dropdown.open {height: 65px;} .RegisterBox .dropdown.open dd {display: block;} .RegisterBox .dropdown.open dt{width: 87px; background: #c8c6c6 url('../images/desktop/down_hover.png') 88px 7px no-repeat; color: #ffffff !important;} .RegisterBox .dropdown.open dt a {color: #fff;} .RegisterBox input[name='Anrede'] {display: none;} .RegisterBox { background: url('../images/desktop/Box_Registrierung.png') 0px 0px no-repeat; width: 680px; height: 615px; margin-left: 55px; margin-top: 24px; padding: 79px 0px 0px 76px; color: #000; } .RegisterBox h2 {margin-bottom: 20px;} .RegisterBox h2 + p {margin-bottom: 6px;} .RegisterBox .notice {font-size: 13px;margin-bottom: 16px;margin-top: 2px;} .Pflicht, .Registerbox .notice.error, .error, .error a {color: #ff0000 !important;} .RegisterBox input[name='Geburtstag'] {width: 87px; margin-right: 200px;} .RegisterBox div.label {font-size: 13px; width: 117px;float: left;line-height: 27px;height: 27px;margin-left: 2px;} .RegisterBox dl + div.label {width: 83px;margin-left: 149px;} .RegisterBox input {color: #000; height: 19px;width: 200px;float: left;font-size: 13px;line-height: 13px;font-weight: normal;margin-right: 10px;margin-bottom: 4px;} .RegisterBox input + p {clear: both;padding-top: 19px;margin-bottom: 15px;} .RegisterBox input[name="Email"] {margin-right: 250px;margin-bottom: 25px;} .RegisterBox .Checkbox {margin-left: 120px;} .RegisterBox .Checkbox + div {font-size: 13px;margin-bottom: 20px;} .RegisterBox .Checkbox + div > a {color: #000000; text-decoration: underline;} .RegisterBox input[type="submit"] {margin-left: 117px; margin-right: 16px;width: 161px; height: 57px; background: url('../images/desktop/Button_Register.png') 0px 0px no-repeat;border-width: 0px; cursor: pointer;} .RegisterBox input[type="submit"] + input {width: 161px; height: 57px; background: url('../images/desktop/Button_Cancel.png') 0px 0px no-repeat;border-width: 0px; cursor: pointer;} .WhiteBox {display: none;margin-left: 76px; margin-top: 10px;width: 471px;height: 492px;background: url('../images/desktop/Box_Normal.png') 0px 0px no-repeat; color: #000000; padding: 71px 80px 20px 75px;} .WhiteBox a {color: #000000;text-decoration: underline;} .p1 .next {cursor: pointer; background: transparent url('../images/desktop/Button_Start.png');width: 243px; height: 57px;margin-left: -3px;} .p1 .stoerer {display: none;position: absolute;left: 527px;top: 346px;} .p1 .text {position: absolute;left: 629px;top: 463px;display: none;z-index: 100;} .p1 p.bold {margin-top: 20px; font-weight: bold;margin-bottom: 19px;} .p1 p {line-height: 1.5em;} div.Checkbox.active {background: url('../images/desktop/Checkbox_checked.png');} div.Checkbox {cursor: pointer;margin: 0px 12px 12px 2px; float: left;width: 27px; height: 26px;background: url('../images/desktop/Checkbox.png');} div.Checkbox input {display: none;} .p1 div.Checkbox + div {font-size: 13px;margin-bottom: 26px;width: 387px;} /*Fragescreens*/ .steps {position: absolute;margin-left: 442px;margin-top: 496px;display: none;} .Question {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .Question h2 { font-size: 24px; color: #000000;} .Question span {font-size: 54px; font-weight: bold; padding-right: 12px;} .Question div {cursor:pointer; padding: 2px 10px 17px 17px; color: #ffffff; background: transparent url('../images/desktop/Box_Answer.png');} .Question div:hover, .Question div.locked, .Question div.locked:hover {color: #000000;background: url('../images/desktop/Box_Answer_Hover.png');} /*Frage 1*/ .Question.Q1 {margin-left: 75px;margin-top: 67px;} .Question.Q1 h2 {margin-bottom: -10px;padding: 55px 0px 5px 45px; width: 410px; height: 85px; background: url('../images/desktop/Box_Question_1.png') 0px 0px no-repeat;} .Question.Q1 div {height: 47px; margin: 0px 0px 2px 27px;width: 367px;} /*Frage 2*/ .Question.Q2 {margin-left: 234px;margin-top: 25px;} .Question.Q2 h2 {margin-bottom: -9px;padding: 55px 80px 5px 45px; width: 460px; height: 130px; background: url('../images/desktop/Box_Question_2.png') 0px 0px no-repeat;} .Question.Q2 div {margin: 0px 0px 2px 28px;width: 463px;height: 53px;padding: 7px 10px 12px 15px;} /*Frage 3*/ .Question.Q3 {margin-left: 33px;margin-top: 81px;} .Question.Q3 h2 {margin-bottom: -9px;padding: 55px 80px 5px 45px; width: 550px; height: 130px; background: url('../images/desktop/Box_Question_3.png') 0px 0px no-repeat;} .Question.Q3 div {margin: 0px 0px 2px 26px;width: 550px;height: 67px;padding: 17px 10px 2px 15px;} .Question.Q3 p {margin-top:-56px;margin-left: 50px;} /*Frage 4*/ .Question.Q4 {margin-left: 211px;margin-top: 102px;} .Question.Q4 h2 {margin-bottom: -16px;padding: 55px 80px 5px 45px; width: 550px; height: 110px; background: url('../images/desktop/Box_Question_4.png') 0px 0px no-repeat;} .Question.Q4 div {margin: 0px 0px 2px 27px;width: 528px;height: 67px;padding: 16px 10px 3px 15px;} .Question.Q4 p {margin-top:-56px;margin-left: 50px;} /*Frage 5*/ .Question.Q5 {margin-left: 52px;margin-top: 107px;} .Question.Q5 h2 {margin-bottom: -19px;padding: 55px 80px 5px 45px;width: 510px; height: 140px; background: url('../images/desktop/Box_Question_5.png') 0px 0px no-repeat;} .Question.Q5 div {margin: 0px 0px 2px 27px;width: 512px;height: 67px;padding: 16px 10px 3px 15px;} .Question.Q5 p {margin-top:-56px;margin-left: 50px;} /*Wertung*/ .Wertung {margin: 31px 0px 0px 125px; padding: 71px 85px 0px 76px;color: #000000;background: url('../images/desktop/Box_Wertung.png') 0px 0px no-repeat;width: 413px; height:437px;} .Wertung .next, .Wertung .next2 {width: 183px; height:61px;cursor:pointer;float: left;} .Wertung .next {margin-top: 16px;margin-left: -3px;margin-right: 19px;background: url('../images/desktop/Button_Wertung_01.png') 0px 0px no-repeat;} .Wertung .next2 {margin-top: 16px;background: url('../images/desktop/Button_Wertung_02.png') 0px 0px no-repeat;} .Wertung h2 {margin-bottom: 24px;} .Wertung h2 + p {margin-bottom: 21px;} .Wertung h2 + p + p {margin-bottom : 28px;font-weight: bold;padding-top: 4px;} .Berater {background: url('../images/desktop/Box_Berater.png') 0px 0px no-repeat; color: #000;width: 470px;height: 606px;margin-left: 56px;margin-top: 11px;padding: 81px 60px 0px 52px;position: absolute;} .Berater h2 {margin-bottom: 19px;} .Berater h2 + p, .Berater h2 + p + p{font-weight: bold;} .Berater h2 + p + p {margin-bottom: 17px;} .Berater p.small {font-size:13px;margin-bottom: 15px;} .Berater a {color: #000000;text-decoration: underline;} .Berater input {margin: 0px 10px 9px 2px;width: 190px; border-width: 0px;height: 13px;padding: 15px;} .Berater .next {cursor: pointer;background: url('../images/desktop/Button_Check.png') 0px 0px no-repeat; width: 284px; height: 71px;margin: 29px 0px 0px -2px;} .Berater .Checkbox {margin-left: 2px;} .Berater .Checkbox + div {font-size:12px;} .BeraterDetails {float: right; color: #232424; font-weight: bold; width: 387px; margin-top: 296px;font-size: 20px;} .BeraterDetails div a{background: url('../images/desktop/Icon_Post.png') 0px 1px no-repeat;color: #232424;font-size: 15px;text-decoration: underline;padding-left: 25px;line-height:42px;} .BeraterDetails img {-webkit-box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.4); box-shadow: 12px 12px 24px 0px rgba(0, 0, 0, 0.4); margin-top: -117px;margin-bottom: 7px;} /*Abschied*/ .Abschied {margin-left: 125px; margin-top: 20px; color: #000; background: url('../images/desktop/Box_Abschied.png') 0px 0px no-repeat; padding: 69px 0px 0px 78px;width: 575px;height: 516px;} .Abschied h2 {line-height: 1.3em;margin-bottom: 24px;} .Abschied p {margin-bottom: 22px;} .Abschied h2 + p {margin-bottom: 25px;} .Abschied .stoerer {float: right;margin-top: -167px;margin-right: -60px;} .Abschied .facebookBtn {cursor: pointer;background: url('../images/desktop/Button_FacebookBig.png') 0px 0px no-repeat;width: 144px; height: 53px;margin-top: -9px; margin-left: -5px;} .Abschied .homepageBtn{margin-left: -1px; margin-top: 17px; padding-left: 19px;} .Abschied a {color: #000000;} /*Screendefintionen*/ .figure {float: left; width: 1024px; height: 1024px;} .fig2 {background: url('../images/desktop/Background_Wand_Add6.png') 425px top no-repeat; } .fig3 {background: url('../images/desktop/Background_Wand_Add5.png') 27px 44px no-repeat;} .fig4 {background: url('../images/desktop/Background_Wand_Add4.png') 587px 42px no-repeat;} .fig5 {background: url('../images/desktop/Background_Wand_Add3.png') 44px 47px no-repeat;} .fig6 {background: url('../images/desktop/Background_Wand_Add2.png') 384px 50px no-repeat;} .fig7, .fig9 {background: url('../images/desktop/Background_Wand_Add1.png') 795px 346px no-repeat;} .fig8 {background: url('../images/desktop/Background_Wand_Add7.png') 848px 349px no-repeat;}