@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);
 /* general box-sizing */
 *, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}
/* overlay */
.ruletip1-opened #qubo,.ruletip2-opened #qubo,.foul1-opened #qubo,.foul2-opened #qubo,.login-fail-opened #qubo{filter: blur(4px) brightness(150%) contrast(0.5);}
/* logout area */
#logout h3 {font-size:1rem;font-weight:normal;}
#logout h3 span {color:#fff;}
h2 {text-shadow:1px 1px 0px rgba(0,0,0,0.8);}
/* login form */
.form-group{margin-bottom:0.3rem;position:relative;}
.login-closed #login-form,.login-closed #register-form,.login-closed #register-msg,#register-form,.login-opened #logout,
.login-result-closed #login-result,.register-result-closed #register-result,#loginbtn,#login-msg{display:none;}
fieldset{margin-bottom:0.3rem;}
.login-closed #logout{display:block;}
.text-danger{color:red;font-weight:bold;text-shadow:1px 1px 0px rgba(0,0,0,0.7);}
#submitLoginData,#submitRegistrationData,#logoutUser,#registerbtn{}
.errspan {position:relative;z-index: 2;color:#4878a8;left:-1.5rem;top:0.1rem}
input[type="button"]{min-width:120px;transition:color 0.3s;font-weight:bold;background:#ff9900;color:#4878a8;padding:0.2rem 1.6rem 0.2rem 0.2rem;border-radius:0.2rem;border:none;cursor:pointer;margin-top:0.2rem;}
input[type="button"]:hover{color:#fff;}
/* kacheln - divs mit festem seitenverhältnis */
.blockaspect {float:left;position:relative;}
.blockaspect .aspect-spacer {content:"";display:block;padding-top:100%;}
.blockaspect .XXtile:before {content:"";display:inline-block;height:100%;vertical-align:middle;}
.tile {background:none;position:absolute;bottom:0;right:0;left:0;top:0;perspective:400px;-webkit-perspective:400px;z-index:20;}
.turncard{position:absolute;top:0;width:100%;height:100%;backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);
-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;transition: 0.8s ease-in-out;
}
[qubo-state="touched"]:before{font-family:'FontAwesome';content:'\f132';position:absolute;right:0.5rem;top:0.5rem;z-index:30;color:#ff9900;}
.turned .turncard{transform: rotateY(180deg);perspective:400px;-webkit-perspective:400px;}
.turnbox {backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-webkit-backface-visibility:hidden;position: absolute;width: 100%;height: 100%;top:0;box-shadow:inset 1px 1px 0px rgba(255,255,255,0.5);}
.front{perspective:400px;-webkit-perspective:400px;-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);transform: rotateY(0deg);}
.back{perspective:400px;-webkit-perspective:400px;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}
#loadingDiv{position:absolute;z-index:200;top:calc(45% - 15rem);left:calc(50% - 15rem);width:30rem;height:30rem;border-radius:15rem;background:rgba(255,255,255,0.5);color:#ff9900;text-align:center;line-height:38rem;font-size:6rem;text-shadow:3px 3px 3px rgba(0,0,0,0.75)}
#loadingDiv i{}
html {height:100%;font-size:100%;}
body {font-family: 'Roboto', sans-serif;margin:0;padding:0;height:100%;
}
#myForm,#save{position:fixed;z-index:1001;right:0;}
#save{bottom:50%;}
div h2 {margin-top:0;}
#clock,#ctrl,#info,#score {position:fixed;z-index:100;}
#clock{pointer-events:none;}
#content {position:fixed;z-index:50;width:calc(100% + 32rem);height:calc(100% + 32rem);margin:-16rem;}

#qubo {transition:all 0.5s;position:relative;height:100%;background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjM2I1Y2I1Ij48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjUpIiBzdHJva2Utd2lkdGg9IjIiPjwvcGF0aD4KPHBhdGggZD0iTTI4IDBMMjggMzRMMCA1MEwwIDg0TDI4IDEwMEw1NiA4NEw1NiA1MEwyOCAzNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDAuMykiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgo8L3N2Zz4=");}

#qubo.nogo {background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSIjZmY5OTAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjUpIiBzdHJva2Utd2lkdGg9IjIiPjwvcGF0aD4KPHBhdGggZD0iTTI4IDBMMjggMzRMMCA1MEwwIDg0TDI4IDEwMEw1NiA4NEw1NiA1MEwyOCAzNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDAuMykiIHN0cm9rZS13aWR0aD0iMiI+PC9wYXRoPgo8L3N2Zz4=");}
#qubo #playground {position:relative;background:none;border-right:1px solid rgba(255,255,255,0.5);border-bottom:1px solid rgba(255,255,255,0.5);margin:0 auto;
-webkit-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
}
#qubo #playground:after {content:'';display:block;clear:both;}
#game.inactive{background-color:rgba(50,255,10,0.25);transition:background-color 1s;}
#tabber.active .center{background-color:rgba(50,255,10,0.55);}
#qubo .entered {opacity:0.75;}
#qubo .tile.nogo{-webkit-box-shadow: inset 0px 0px 75px -13px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 75px -13px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 75px -13px rgba(0,0,0,0.75);}
#counter {position:absolute;right:1.5rem;top:3rem;z-index:110;}
#counter h3 {color:#ff9900;margin:0;}
#stopwatch {border-radius:60px;border:2px solid #ff9900;position:absolute;top:10px;left:10px;padding:25px;background:rgba(255,255,255,0.5) url(/img/clockface.png) no-repeat; background-size:90%;background-position:50% 50%;
-webkit-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
}
.no-touch  #stopwatch {width:7.5rem;height:7.5rem;}
.touch  #stopwatch {width:5.5rem;height:5.5rem;}
#login-register,#showhighscores{margin-bottom:0.5rem;}
#userrank{display:inline-block;font-size:0.8rem;cursor:pointer;transition:color 0.5s;}
#userrank:hover{color:#fff;}
.userlistrank .listname{font-weight:bold;color:#ff9900;}
#highscorelist{display:none;padding-top:0.5rem;max-height:6.5rem;overflow-y:auto;position:relative;}
#highscorelist .trow{display:table-row;}
#highscorelist .trow span{display:table-cell;}
#highscorelist .trow span{padding-right:0.5rem;}
#gametime{position:absolute;left:1.5rem;top:3rem;z-index:110;}
#gametime h3{margin:0;color:#4878a8;}
.alert-box{cursor:pointer;width:24rem;height:auto;padding:2rem;text-align:center;font-size:1.2rem;color:#ff9900;background:#4878a8;position:fixed;z-index:100;
:150;top:calc(50% - 6rem);left:calc(50% - 12rem);border-radius:0.5rem;
-webkit-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);opacity:1;transition:opacity 0.75s;XXXanimation:fade-in 0.75s;animation-fill-mode: forwards;}
.alert-box:before{font-family:'FontAwesome';content:'\f05c';font-size:40px;line-height:32px;text-align:center;width:32px;height:32px;border-radius:16px;position:absolute;right:-16px;top:-16px;background:#ff9900;color:#4878a8;z-index:150;}
#result{top:calc(85% - 6rem)}
.foul1-closed #foul-1,.foul2-closed #foul-2,.result-closed #result,.memo-closed #memo,.login-result-closed #login-result,.login-fail-closed #login-fail,.logout-result-closed #logout-result,.register-result-closed #register-result{display:none;opacity:0;}
.foul1-opened #content,.foul2-opened #content{pointer-events:none;}
#result .replay{float:right;}
@keyframes fade-in{
	0% {opacity:0;z-index:-1000;}
	100%{opacity:1;z-index:1000;}
}
@keyframes fade-out{
	0% {opacity:1;z-index:1000;}
	100%{opacity:0;z-index:-1000;}
}
.ruletip{cursor:pointer;}
.ruletip .fa-video-camera{padding-left:4px;}
.ruletip.initial .fa-video-camera {opacity:0;animation:ruletip;animation-duration:1s;animation-delay:1s;animation-fill-mode:forwards;}
#ruletip-2.ruletip.initial .fa-video-camera{animation-delay:2s;}
@keyframes ruletip{
	0% {opacity:0;}
	20%{opacity:1;}
	40% {opacity:0;}
	60% {opacity:1;}
	80% {opacity:0;}
	100% {opacity:1;}
}
.ruletip:hover .fa-video-camera{animation:pulsate 0.5s infinite;animation-direction: normal;}
@keyframes pulsate{
	0%{opacity:1;transform:scale(1,1);}
	100%{opacity:0;transform:scale(2,2);}
}
.rulebox{background:url(/frontendimg/ruletip.jpg);background-size:cover;width:400px;height:400px;}
.ruletab{position:absolute;width:16px;height:16px;background:white;border-radius:8px;opacity:0;}
#ruletipbox1 .ruletab{animation:movetab1 8s linear forwards;animation-delay:0.5s;left:174px;bottom:34px;}
@keyframes movetab1{
	0%{bottom:34px;left:174px;opacity:1;}
	12.5%{bottom:126px;left:174px;}
	18.75%{bottom:126px;left:204px;}
	31.25%{bottom:26px;left:204px;}
	31.251%{bottom:200px;left:26px;}
	43.75%{bottom:200px;left:100px;}
	68.749%{bottom:370px;left:100px;}
	68.75%{bottom:370px;left:276px;}
	84.375%{bottom:284px;left:276px;background-color:white;}
	100%{bottom:284px;left:354px;opacity:1;background-color:red;}
}
#ruletipbox2 .ruletab{}
 #step11-1{animation:step11-1, error;animation-duration:1s, 0.2s;animation-delay:0.5s,2.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:180px;bottom:30px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step11-1 {
	0%{height:5px;opacity:1;}
	100%{height:100px;opacity:1;}
}
#step11-2{animation:step11-2,error;animation-duration:0.5s,0.2s;animation-delay:1.5s,2.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:180px;bottom:130px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step11-2 {
	0%{width:5px;opacity:1;}
	100%{width:30px;opacity:1;}
}
#ruletipbox1 #step11-3{animation:step11-3,error;animation-duration:1s,0.2s;animation-delay:2s,2.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:210px;bottom:130px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step11-3 {
	0%{height:5px;bottom:130px;opacity:1;}
	100%{height:105px;bottom:30px;opacity:1;}
}
#step12-1{animation:step12-1, success;animation-duration:1s, 0.2s;animation-delay:3s,5.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:30px;top:190px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step12-1 {
	0%{width:5px;opacity:1;}
	100%{width:80px;opacity:1;}
}
#step12-2{animation:step12-2, success;animation-duration:2s, 0.2s;animation-delay:4s,5.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:105px;top:190px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step12-2 {
	0%{height:5px;opacity:1;top:190px;}
	100%{height:160px;opacity:1;top:30px;}
}
#step13-1{animation:step13-1, error;animation-duration:1.25s, 0.2s;animation-delay:6s,7.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:280px;bottom:370px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step13-1 {
	0%{height:5px;opacity:1;bottom:370px;}
	100%{height:80px;opacity:1;bottom:290px;}
}
#step13-2{animation:step13-2, error;animation-duration:1.25s, 0.2s;animation-delay:7s,7.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:280px;bottom:290px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step13-2 {
	0%{width:5px;opacity:1;}
	100%{width:80px;opacity:1;}
}

/* rule 2 */
 #step21-1{animation:step21-1, error;animation-duration:2s, 0.2s;animation-delay:1s,6.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:190px;bottom:30px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step21-1 {
	0%{height:5px;opacity:1;}
	100%{height:180px;opacity:1;}
}
 #step21-2{animation:step21-2,error;animation-duration:1s,0.2s;animation-delay:3s,6.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:190px;bottom:210px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step21-2 {
	0%{width:5px;opacity:1;}
	100%{width:90px;opacity:1;}
}
#step21-3{animation:step21-3,error;animation-duration:1s,0.2s;animation-delay:4s,6.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:280px;bottom:210px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step21-3 {
	0%{height:5px;bottom:210px;opacity:1;}
	100%{height:100px;bottom:115px;opacity:1;}
}
#step21-4{animation:step21-4, error;animation-duration:1.5s, 0.2s;animation-delay:5s,6.5s;animation-fill-mode:forwards;animation-timing-function: linear;position:absolute;left:280px;bottom:115px;width:5px;height:5px;background:white;opacity:0;}
@keyframes step21-4 {
	0%{width:5px;opacity:1;left:280px;}
	100%{width:100px;opacity:1;left:180px;}
}

@keyframes error {
	0%{background-color:white;}
	100%{background-color:red;}
}
@keyframes success {
	0%{background-color:white;}
	100%{background-color:#44ff47;}
}

.ruletip1-closed #ruletipbox1,.ruletip2-closed #ruletipbox2{display:none;}
.ruletip1-opened #ruletipbox1,.ruletip2-opened #ruletipbox2{display:block;}
/* score list */
#current-score-display{display:none;}
#cookie-score-display{line-height:1.1;display:none;margin:0.5rem 0;}
ol.legal {list-style:none;counter-reset: golux;margin:0;padding:0;}
ol.legal li:before {color:#ff9900;content: 'Spiel 'counter(golux)':';counter-increment: golux;margin-right: 5px;font-weight: bold;}
/* memobox */
.qubo-user-logedin .tocookie, .no-user-logedin .todatabase,.qubo-user-logedin #login-form,.qubo-user-logedin #register-form,.qubo-user-logedin #register-msg,.no-user-logedin #logout{display:none;}
#score_input{color:#ff9900;background:none;border:none;width:60px;}
.memo{display:flex;align-items:center;padding-bottom:1rem;}
.memo .multile{margin:0 16px 0 0;flex-basis: 3rem;flex-grow: 0;flex-shrink: 0;}
.memo h4 {margin:0;}
/* info-box */
#info,#score{width:304px;display:flex;align-items:center;}
#openmemo{float:right;margin:0;}
.info-closed #info{right:-240px;transition:right ease-in-out 0.5s;}
.info-opened #info{right:0;transition:right ease-in-out 0.5s;}
.score-closed #score{left:-240px;transition:left ease-in-out 0.5s;}
.score-opened #score{left:0;transition:left ease-in-out 0.5s;}
#score .tab{width:64px;height:112px;border-radius:0 10px 10px 0;
-webkit-box-shadow: 16px 6px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: 16px 6px 38px -8px rgba(0,0,0,0.67);
box-shadow: 16px 6px 38px -8px rgba(0,0,0,0.67);
}
#score .ctrl-box{-webkit-box-shadow: 9px 6px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: 9px 6px 38px -8px rgba(0,0,0,0.67);
box-shadow: 9px 6px 38px -8px rgba(0,0,0,0.67);}

#info .tab{width:64px;height:112px;border-radius:0.6rem 0 0 0.6rem;}
#info .tab .fa,#score .tab .fa{font-size:40px;line-height:112px;position:absolute;right:12px;}
#score .tab .fa{left:5px;}
#info .tab:hover .fa-question-circle{opacity:0}
#info .tab:hover .fa-info-circle{opacity:1;}
#info .fa-question-circle{opacity:1;transition:opacity 0.5s ease-in-out;}
#info .fa-info-circle{opacity:0;transition:opacity 0.5s ease-in-out;}
#info .ctrl-box,#score .ctrl-box{padding:16px;color:#fff;min-height:160px;width:240px;}
.orange{color:#ff9900 !important;font-weight:bold;}
#info h2{text-align:center;margin:0;}
#info p {font-size:1rem;text-align:justify;margin:0.5rem;}
/* controls */
#ctrl{left:calc(50% - 12.5rem);width:25rem;}
 .ctrl-closed #ctrl{top:calc(100% - 4rem);transition:all ease-in-out 0.5s;}
 .ctrl-opened #ctrl{top:calc(100% - 15rem);transition:all ease-in-out 0.5s;}
.ctrl-box{width:100%;background:#4878a8;}
#ctrl .ctrl-box{border-radius:0.5rem 0.5rem 0 0;}
#ctrl .row{display:flex;justify-content:center;height:5rem;}
#ctrl #imagefolders{height:6rem;}
 .multile {margin:1rem;color:#4878a8;cursor:pointer;background:#ff9900;width:3rem;height:3rem;border-radius:1.5rem;line-height:3rem;text-align:center;font-size:1.6rem;transition:all 0.5s ease-in-out;}
.multile:hover {color:#fff;}
#saveresult{margin:0 1rem;}
.tab{cursor:pointer;position:relative;color:#ff9900;background:#4878a8;margin:0;text-align:center;}
#info .tab{
-webkit-box-shadow: -15px 6px 39px -10px rgba(0,0,0,0.74);
-moz-box-shadow: -15px 6px 39px -10px rgba(0,0,0,0.74);
box-shadow: -15px 6px 39px -10px rgba(0,0,0,0.74);
}
#info .ctrl-box{
	-webkit-box-shadow: -15px 6px 39px -10px rgba(0,0,0,0.74);
-moz-box-shadow: -15px 6px 39px -10px rgba(0,0,0,0.74);
box-shadow: -15px 6px 39px -10px rgba(0,0,0,0.74);
}
.ctrl-box .folderthumb{margin:0 0.5rem;width:5rem;height:5rem;background-size:cover;text-align:center;}
.ctrl-box h4{line-height:3rem;color:#ff9900;text-shadow:1px 2px 2px #4878a8;}
.ctrl-opened .slide-box,.info-opened .slide-box,.score-opened .slide-box{
	
}
.ctrl-opened .tab,.info-opened .tab,.score-opened .tab{
}
#ctrl .tab{height:64px;width:112px;line-height:2.5rem;border-radius:10px 10px 0 0;margin:0 auto;
-webkit-box-shadow: -19px -11px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: -19px -11px 38px -8px rgba(0,0,0,0.67);
box-shadow: -19px -11px 38px -8px rgba(0,0,0,0.67);
}
#ctrl .ctrl-box {-webkit-box-shadow: -19px -11px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: -19px -11px 38px -8px rgba(0,0,0,0.67);
box-shadow: -19px -11px 38px -8px rgba(0,0,0,0.67);}

 .tab .fa {line-height:0.75;font-size:4.6rem}
.tab:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
	}
#ctrl .tab:before{	
    border-top: 30px solid transparent;
    border-bottom: 30px solid #4878a8;
    border-left: 8px solid transparent;
    border-right: 8px solid #4878a8;
    top: 5px;
    left: -15px;
}
#info .tab:before{	
    border-top: 8px solid transparent;
    border-bottom: 8px solid #4878a8;
    border-left: 30px solid transparent;
    border-right: 30px solid #4878a8;
    left: 5px;
    top: -15px;
}
#score .tab:before{	
    border-top: 8px solid transparent;
    border-bottom: 8px solid #4878a8;
    border-left: 30px solid #4878a8;
    border-right: 30px solid transparent;
    left: 0;
    top: -15px;
}

.tab:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    position: absolute;
}
#ctrl .tab:after {
    border-top: 30px solid transparent;
    border-bottom: 30px solid #4878a8;
    border-left: 8px solid #4878a8;
    border-right: 8px solid transparent;
    top: 5px;
    right: -15px;
}
#info .tab:after {
    border-top: 8px solid #4878a8;
    border-bottom: 8px solid transparent;
    border-left: 30px solid transparent;
    border-right: 30px solid #4878a8;
    bottom: -15px;
   left: 5px;
}
#score .tab:after {
    border-top: 8px solid #4878a8;
    border-bottom: 8px solid transparent;
    border-left: 30px solid #4878a8;
    border-right: 30px solid transparent;
    bottom: -15px;
   left: 0;
}
/* webtec-clock */
#indicatorSw{position:absolute;width:1px;background:#C33;}
#hubSw.running{animation: indicatorSw 60s steps(60, end) infinite;}
.hub {width:1px;height:1px;position:absolute;left:50%;top:50%;}
@keyframes indicatorSw{0% {transform:rotate(0deg);}	100% {transform:rotate(360deg);}}
/* slider */
#slider {position:absolute;top:200px;left:24px;}
.ui-slider {width:15px;position:absolute;border:1px solid #cdcdcd;background:rgba(255,255,255,0.5);}
.ui-slider-handle {border:1px solid #999;margin-left:-8px;position:absolute;z-index:200;display:block;width:30px;height:30px;border-radius:15px;background:#ff9900;}
div.clearfix:after {display:block;width:100%;clear:both;}
/* touch-test */
.no-touch .touch, .touch .no-touch {display: none;}

/* crosshair */
#tabber{position:absolute;z-index:1000;}
.disc {width:100%;height:100%;position:absolute;z-index:1000;background:#cdcdcd;border-radius:50%;opacity:0.7;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0+58,1+76,0+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 58%, rgba(255,255,255,1) 76%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(58%,rgba(255,255,255,0)), color-stop(76%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,1) 76%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,1) 76%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,1) 76%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,1) 76%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
-moz-box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);
box-shadow: -4px 16px 38px -8px rgba(0,0,0,0.67);}
.center{position:absolute;z-index:1000;position:absolute;top:45%;left:45%;width:10%;height:10%;border-radius:50%;border:solid 1px #fff;background:rgba(255,255,255,0.3);}
.bullseye{position:absolute;top:50%;left:50%;width:1px;height:1px;background:red;}
.ui-draggable-dragging .disc {animation: pulse 1s alternate infinite linear;}
.pointer_on {animation: pulse 0.3s alternate infinite ease-out;} 
@keyframes pulse{
	0% {opacity:0.7;}
	100% {opacity:0.3;}
	}
		html.touch{font-size:70%;min-height:110%;}
@media(max-width:768px){
	#clock{bottom:10rem;}
	.touch #clock{bottom:7.5rem;font-size:1.25rem;}
	.touch #counter{right:0.5rem;top:2rem;}
		.touch #gametime{left:0.5rem;top:2rem;}

}