.bg-white{background:#ffffff;}
.bg-black{background: #000;}
.bg-orange-superlight {background:#feece1; background: #e1f2fe;}
.bg-orange-light {background:#ffd8c0; background: #c0eaff;}
.bg-orange {background:#ffb181; background: #81d5ff;}
.bg-orange-dark {background:#ff8840; background: #075aa4;}
.bg-green{background:#07a44d; background:#075aa4}
.bg-grey{background:#6D6D6D}



.font-white{color:#ffffff}
.font-black{color:#000000}
.font-white{color:#ffffff}
.font-orange{color:#ff8840; color:#075aa4}

.font-bliss-light, body, html { font-family:"Bliss Light", 'Gill Sans', Calibri, 'Helvetica Neue', Arial, sans-serif; font-size-adjust:0.47; font-weight:200; font-style:normal; }
.font-bliss-bold, th { font-family:"Bliss Bold", 'Gill Sans', Calibri, 'Helvetica Neue', Arial, sans-serif; font-size-adjust:0.47; font-weight:bold; font-style:normal; }
.font-bliss-medium, h2, h3 { font-family:"Bliss Medium", 'Gill Sans', Calibri, 'Helvetica Neue', Arial, sans-serif; font-size-adjust:0.47; font-weight:500; font-style:normal; }

.backtotop{display:block; text-decoration:none; color:black; font-size:12px; text-align:right;}

#systemmessages {position:fixed; top:20px; width:500px; left:50%; transform: translateX(-50%); z-index: 50}
#systemmessages div {display:none;margin: 2px; padding: 5px;color:black;font-weight: bold;}
#systemmessages .success {background:#3EFF90; border: 2px solid green; }
#systemmessages .failure {background:#FF9799; border: 2px solid red; }

.position{ font-size: 30px;}
.player{ font-size: 20px; margin:20px 0 10px;}

#buttonnavi {padding:20px 0;}
#buttonnavi .button { float:left; height: 35px; width:202px; display:block; text-align:center; line-height:35px; color:#ffffff; text-decoration:none; background:#ffb181; background: #81d5ff; border:2px solid #ffffff; -webkit-border-radius: 4px; border-radius: 4px;
-webkit-transition: all 1000ms ease;
-moz-transition: all 1000ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;}
#buttonnavi .button.active { background:#ff8840; background: #075aa4;}
#buttonnavi .button:hover { border-color:#6D6D6D; border-color: #075aa4;}

#buttonnavi .buttonspacer {height: 35px; width:24px; display:block; float:left; }

table.zebra {border:2px solid #ff8840;border:2px solid #075aa4; border-collapse:collapse;	-webkit-border-radius: 3px;border-radius: 3px;}
table.zebra td {padding:5px}
table.zebra tr:nth-child(odd){background:#feece1; background: #e1f2fe}
table.zebra tr:nth-child(even){background:#ffd8c0; background: #c0eaff;}
table.zebra tr.inactive:nth-child(odd){background:#dedede; }
table.zebra tr.inactive:nth-child(even){background:#bbbbbb; }
table.zebra tr:hover td{background:#ffb181; background: #81d5ff;}
table.zebra tr.inactive:hover td{background:#8c8c8c; }
table.zebra th {padding:10px 5px; background:#ff8840; background: #075aa4; color:#ffffff; text-align:left}

table.punktestreifen {background:#ff8840; background: #075aa4;}
table.punktestreifen td {font-size:0px; line-height:0px; height:2px; background:#ff8840; background: #075aa4;}
table.zebra tr:hover td table.punktestreifen td {background:#ffd8c0; background: #c0eaff;}

table.punktestreifen2 {}
table.punktestreifen2 tr{background:none !important;}
table.punktestreifen2 td{padding:0 5px !important}
table.punktestreifen2 td.streifen {font-size:0px; line-height:0px; height:2px; background:#ff8840; background: #075aa4;}
table.punktestreifen2 td.wert {font-size:16px; line-height:10px; background:none !important;}
table.zebra tr:hover td table.punktestreifen2 td.streifen {background:#ffd8c0; background: #c0eaff;}

#faehnchen{ position:fixed; right:-10px; top:300px; z-index:100}
#share,#members {
  color:#ffffff;
    border: 2px solid #FFF;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: -1px 2px 8px 1px #666666;
    box-shadow: -1px 2px 8px 1px #666666;
    margin-bottom:20px;
    padding: 7px;
    width:46px;
    float:right;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
    overflow:hidden;
}
#share {width:150px;left:104px; position:relative;}
#share .left{ float:left;}
#share .right{ float:right}

#faehnchen .sharer {display:block; width:45px; height:45px; background-color:#000000; background-repeat:no-repeat; background-position:center center;}
#faehnchen #facebook {background-image:url(../img/facebook.png); margin-bottom:5px;}
#faehnchen #twitter {background-image:url(../img/twitter.png);}
#faehnchen #membercounter{ display:block; width:45px; height:23px; padding-top:36px; text-align: center; color: #ffffff; background-color:#000000; background-image:url(../img/members.png); background-repeat:no-repeat; background-position:top center; }

label.specialselect select {
    height: 27px;
    width:160px;
    font-family:font-family:"Bliss Bold", 'Gill Sans', Calibri, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 2px 7px;
    margin: 0;
     background: #fff;
    color:#ff8840;
    color:#075aa4;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    
    border:3px solid #ff8840;
    border:3px solid #075aa4;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 4px 1px #666666;
    box-shadow: 0 0 4px 1px #666666;
    
}
#ie7-detected label.specialselect select {
margin-top:-1px;
padding: 3px 7px;
}
#ie8-detected label.specialselect select {
padding: 3px 7px;
height:25px;
}
#ie9-detected label.specialselect select {
height:25px;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label.specialselect {position: relative;
height: 25px;
display: inline-block;
margin-bottom: 0px;
line-height: 16px;
}
label.specialselect:after {
    content:'<>';
    font:12px "Consolas", monospace;
    color:#ff8840;
    color:#075aa4;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:-3px;
    padding:0 0 2px;
    border-bottom:1px solid #ff8840;
    border-bottom:1px solid #075aa4;
    position:absolute;
    pointer-events:none;
	
	top:5px;
}
label.specialselect:before {
    content:'';
    right:6px; top:-5px;
    width:20px; height:17px;
    background:#ffffff;
    position:absolute;
    pointer-events:none;
    display:block;
	
	top:4px;
}				
				



body,html{
	margin:0;
	padding:0;
    font-size:16px;
    position:relative
}

.clearer{clear:both; height:0; line-height:0; font-size:0;}
.mobile_half{float:left;}
a img{border:0;}


.content-holder {position:relative;}
.content-outer { width:1000px; margin:0 auto;position:relative;}
.content-inner { width:896px; margin:0 auto; position:relative; padding:0 52px;}
.content-inner .content-left{float:left; width:180px;}
.content-inner .content-right{float:right; width:540px;}
.content-inner .content-left.half{width:438px;}
.content-inner .content-right.half{width:438px;}

.segmentbutton{
	position: absolute;
	bottom: -32px;
	height: 66px;
	width: 100%;
	text-align: center;
	z-index: 100;
}
.segmentbutton a, .segmentbutton input{
	display:inline-block;
	height:60px;
	line-height:60px;
	padding:0px 25px;
	margin:0 auto;
	
	text-decoration:none;
	
	font-size:20px;
	font-weight:bold;
	text-align:center;
	
	border:3px solid white;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 0 0 7px 3px #666666;
	box-shadow: 0 0 7px 3px #666666;
	
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.segmentbutton a:hover, .segmentbutton input:hover{background:#ff8840; background: #085994;
	-webkit-box-shadow: 0 0 25px 5px #666666;
	box-shadow: 0 0 25px 5px #666666;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}


#header{height:225px; position:relative}
	#aologo{ position:absolute; left:25px; top:25px; }
	#teaser{ position:absolute; left:260px; top:60px; }
	#navi{ position:absolute; right:25px; top:20px; font-size:14px; text-align:right; width:650px; }
		#navi a{ padding:0 10px; }

h1{ height: auto;line-height: 28px;font-size: 24px;text-align: center;margin: 0;padding: 10px;}
h2{ font-size:20px;margin:30px 0px 15px;}
h3{ font-size:16px;margin:20px 0px 15px;}

#countdown{ text-align:center; padding:90px 0 60px; font-size:24px;}
.clock{margin:0 auto;}

#steps {text-align:center;}
.step {float:left; width:180px;margin:45px 22px 60px; text-decoration:none; display:block; text-align:center;}
.step .link {text-decoration:underline; color:#ff8840; color: #085994;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;}
.step:hover .link {color:#07a44d;}
.step h3.headline {font-size:22px; font-weight:bold; height:50px; line-height:22px;}
.step .teaser{ background-position:top left; background-repeat:no-repeat; width:180px; height:180px; 
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;}
#step1 .teaser{background-image:url(../img/step1.png);}
#step1:hover .teaser{background-image:url(../img/step1-hover.png);}
#step2 .teaser{background-image:url(../img/step2.png);}
#step2:hover .teaser{background-image:url(../img/step2-hover.png);}
#step3 .teaser{background-image:url(../img/step3.png);}
#step3:hover .teaser{background-image:url(../img/step3-hover.png);}
#step4 .teaser{background-image:url(../img/step4.png);}
#step4:hover .teaser{background-image:url(../img/step4-hover.png);}

#text{padding:30px 0;}

#gewinne{ text-align:center; padding:30px 0}
	#gewinne .headline {font-size:24px;}
	.gewinn{float:left; margin:30px 7px;}
	.gewinn .teaser{height:239px; background-position:center center; background-repeat:no-repeat}
	#gewinn1{ width:238px;}
		#gewinn1 .teaser{ background-image:url(../img/gewinn1.png);}
	#gewinn2{ width:216px;}
		#gewinn2 .teaser{ background-image:url(../img/gewinn2.png);}
	#gewinn3{ width:194px;}
		#gewinn3 .teaser{ background-image:url(../img/gewinn3.png);}
	#gewinn4{ width:151px;}
		#gewinn4 .teaser{ background-image:url(../img/gewinn4.png);}
	


.content-right .form.line {margin-bottom:15px;}
.content-right .form label {width:150px; display:inline-block; line-height:38px; float:left;}
.content-right .form input {width:265px;
	border:3px solid #ff8840;
  border:3px solid #075aa4;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height:38px; line-height:38px;
	padding:0 10px;
	font-size:16px;
}
.content-right .form textarea {width:265px;
	border:3px solid #ff8840;
  border:3px solid #075aa4;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	height:80px; line-height:20px;
	padding:10px 10px;
	font-size:16px;
}

#daten .content-inner{padding:20px 0 20px;}
#daten .content-right{margin-top:30px;}
#spielerwahl .content-inner{padding:0px 0 60px;}
#spielerwahl .content-left{padding-top:74px;}
#spielfeld {width:540px; height:701px; background:url(../img/spielfeld.png) center center no-repeat; position:relative}
#spielfeld .specialselect {position:absolute;}
#spielfeld #goalkeeper {top:40px; left:190px;}
#spielfeld #defender1 {top:180px; left:40px;}
#spielfeld #defender2 {top:120px; left:105px;}
#spielfeld #defender3 {top:120px; right:105px;}
#spielfeld #defender4 {top:180px; right:40px;}
#spielfeld #midfielder1 {top:300px; left:40px;}
#spielfeld #midfielder2 {top:380px; right:190px;}
#spielfeld #midfielder3 {top:300px; right:40px;}
#spielfeld #attacker1 {bottom:200px; left:40px;}
#spielfeld #attacker2 {bottom:120px; right:190px;}
#spielfeld #attacker3 {bottom:200px; right:40px;}

#spielfeld .segmentbutton{
bottom:-95px;
}

#footer{padding:30px 0 60px;}
	#footernavi{ font-size:14px; text-align:center; line-height: 18px;}
		#footernavi a{ padding:0 10px; }













.unterseite #text{padding:30px 0 60px;}
.unterseite #footer {padding:120px 0 60px;}










/**
  * Mobile Version *
  */

@media only screen and (max-width:999px){
    .hide{display:none;}
    .content-outer {width:auto !important;}
    .content-inner {width:auto !important; padding:10px;}
    .content-inner .half {float:none !important;  width:auto !important;}
    
    .content-left {float:none !important; margin:auto;}
    .content-left img {display:block; margin:auto;}
    .content-right {float:none !important; margin:auto;}
    .content-right img {display:block; margin:auto;}

    #daten .content-right {width:460px !important;}
    
#buttonnavi {padding:0 !important;}
#buttonnavi .button { height: auto !important; width:100% !important; line-height:auto !important; 
border:0;}
#buttonnavi .button.active { background:#ff8840; background: #085994;}
#buttonnavi .button:hover { border-color:#6D6D6D;}

#buttonnavi .buttonspacer {height: 1px; width:100%; display:block;}
    
    .segmentbutton a:hover{
        background:#ff8840; background: #085994;
        -webkit-box-shadow: 0 0 7px 3px #666666;
        box-shadow: 0 0 7px 3px #666666;
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    #footer{padding:80px 0 0 !important;}
    
    .mobile_half{display:inline-block; float:none !important; margin:0 auto; text-align:center}
    #gewinn1{display: inline-block;float: none;}
    #gewinn2{display: inline-block;float: none;}
    #steps{padding-bottom: 50px;}
    .step{margin:25px 22px 0px;}
}
@media only screen and (max-width:800px){
    #header{height: 210px !important;}
    #teaser {width:60% !important}
    #teaser img{width:100% !important;}
}
@media only screen and (max-width:750px){
    #header{height: 190px !important;}
    #teaser {width:55% !important}
}
@media only screen and (max-width:670px){
    .hide670{display:none;}
    #header{height:auto !important;}
    #aologo {
        float: left !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin:20px 10px !important;
        width:23% !important;
    }
    #aologo img {
        width:100% !important;;
        height:auto !important;
    }
    #teaser {
        float: right !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin:10px !important;
        width: 61.5% !important;
    }
    #teaser img{
        width: 100% !important;
        height: auto !important;
    }
    #navi{
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
    }
    #navi a{
        display:block;
        text-align:center;
        padding: 5px 0;
        border-top: 1px solid #000;
    }
.flip-clock-wrapper ul li a div div.inn{font-size:40px !important;}
.flip-clock-wrapper ul{width: 30px !important; height: 50px !important; line-height:50px !important; margin:4px !important}
.flip-clock-divider{height:60px !important;}
.flip-clock-dot.top{top:35px  !important}
.flip-clock-divider .flip-clock-label{right:-61px !important;}
.flip-clock-divider.hours .flip-clock-label{right:-70px !important;}
.flip-clock-divider.minutes .flip-clock-label{right:-70px !important;}
.flip-clock-divider.seconds .flip-clock-label{right:-75px !important;}
}
@media only screen and (max-width:600px){
    #spielerwahl .content-right {width:100%;}

    #spielfeld{
        zoom: 80%;
        margin:auto;
    }
    h3{text-align:center}
}
@media only screen and (max-width:482px){
    .hidesmall{display:none;}
    #faehnchen{display:none;}
    .content-left {width:90% !important;}
    .content-right {width:90% !important;}
    #daten .content-right {width:90% !important;}
    #spielerwahl .content-right {width:100% !important;}
    .content-right .form input {width:90% !important;}
    #spielfeld{
        zoom:normal;
        width:100%;
        background:none;
        height:auto;
    }
    #spielfeld .specialselect{
        position: relative;
        width: 90% !important;
        left:auto !important;
        right:auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 5px auto;
        display: block;
    }
    label.specialselect select {
        width:100%;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #daten .content-right .form.line {}
    #daten label {display:block;line-height: 26px;}
    #aologo {
        display: block;
        margin: 10px auto !important;
        width: 100% !important;
        text-align: center;
    }
    #aologo img {
        width:auto !important;
    }
    #teaser{
        display: block;
        float: none !important;
        width: 100% !important;
        text-align: center;
        margin:10px 0 !important;
    }
    #teaser img{ width:80% !important;}
    .zebra th{width:auto !important;}
    .segmentbutton a{
        display:block !important;
        width:auto !important;
        height:auto !important;
        font-size: 18px !important;
        padding: 5px !important;
        line-height: 20px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0px !important;
    }
    #footernavi{}
    #footernavi a{
        display:block;
        text-align:center;
        padding: 5px 0;
        border-top: 1px solid #000;
    }
    
    #footer{padding:40px 0 0 !important;}
    .mobile_half{display:block;}
    .step{float:none; margin:0 auto;}
    .gewinn{float:none; margin:0 auto;}

.flip-clock-wrapper ul li a div div.inn{font-size:25px !important;}
.flip-clock-wrapper ul{width: 20px !important; height: 35px !important; line-height:35px !important; margin:2px !important; padding:0}
.flip-clock-divider{height:50px !important; width:14px !important}
.flip-clock-divider:first-child{width:0px !important;}
.flip-clock-dot.top{top:25px  !important}
.flip-clock-dot {width: 7px !important;height: 7px !important; left:4px !important}
.flip-clock-divider .flip-clock-label{right:-35px !important;}
.flip-clock-divider.hours .flip-clock-label{right:-44px !important;}
.flip-clock-divider.minutes .flip-clock-label{right:-44px !important;}
.flip-clock-divider.seconds .flip-clock-label{right:-49px !important;}
}
@media only screen and (max-width:482px){
}