@charset "UTF-8";

body 		{ background-color: #000; }
a:link		{ color:#fff; text-decoration: none; font-weight: bold;}
a:visited 	{ color:#fff; text-decoration: none; font-weight: bold;}
a:active 	{ color: #fff; text-decoration: none; font-weight: bold;}
h1		{ font-family: arial,geneva,helvetica,sans-serif; 
		  font-size: 32pt; color: #222222; font-weight: bold; 
		  margin-bottom:4px; margin-top:-8px;	}
h2		{ font-family: arial,geneva,helvetica,sans-serif; 
		  font-size: 18pt; color: #222222; font-weight: bold; 
		  margin-bottom:-2px; 	}
h3		{ font-family: arial,geneva,helvetica,sans-serif; 
		  font-size: 12pt; color: #222222; font-weight: bold; 
		  text-decoration: none;}
body,p,td,li 	{ font-family: arial,geneva,helvetica,sans-serif;  font-size: 10pt; color: #fff; letter-spacing:0.1em; }
input,option,select { font-family: arial,geneva,helvetica,sans-serif;  font-size: 10pt; color: #fff; letter-spacing:0.0em; }
submit { background:#DDDDDD; border:0px solid black; }


.small		{ font-size: 9pt; font-weight: normal; letter-spacing:0.0em; }
.smaller	{ font-size: 8pt; text-decoration: none; letter-spacing:0.0em; }
.smallest	{ font-size: 7pt; text-decoration: none; letter-spacing:0.0em; }
.medium		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 13pt; color: #fff; font-weight: bold;  margin-bottom:-2px; letter-spacing:-0.05em;  }
.large		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 15pt; color: #222222; font-weight: normal; margin-bottom:-2px; letter-spacing:0.1em; 	}
.larger		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 18pt; color: #222222; font-weight: bold; margin-bottom:-2px; letter-spacing:0.1em; text-transform: uppercase; letter-spacing:0.2em; 	}
.digits		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 15pt; color: #222222; font-weight: bold;  margin-bottom:-2px; letter-spacing:-0.05em; 	}
.item		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 11pt; color: #222222; font-weight: bold;  margin-bottom:-2px; letter-spacing:-0.05em; 	}
.item2		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 15pt; color: #222222; font-weight: bold;  margin-bottom:-2px; letter-spacing:-0.05em; 	}
		 
.bold		{ font-weight: bold;}

.uc 	{text-transform: uppercase; }
		 
.numberinputwide {  font-family: arial,geneva,helvetica,sans-serif; font-size:9pt; background-color:#DDDDDD; width:75px; border:1px solid #AAAAAA;            }
.numberinput {  font-family: arial,geneva,helvetica,sans-serif; font-size:9pt; background-color:#DDDDDD; width:55px; border:1px solid #AAAAAA;            }
.numberinputsmall {  font-family: arial,geneva,helvetica,sans-serif; font-size:9pt; background-color:#DDDDDD; width:35px; border:1px solid #AAAAAA;     }
.numberinputsmaller {  font-family: arial,geneva,helvetica,sans-serif; font-size:9pt; background-color:#DDDDDD; width:25px; border:1px solid #AAAAAA;     }
.numberinputdigits {  font-family: arial,geneva,helvetica,sans-serif; font-size: 15pt; color: #222222; font-weight: bold;  margin-bottom:-2px; letter-spacing:-0.05em;  background-color:#DDDDDD; width:45px; border:1px solid #AAAAAA;          }
.textinput {  font-family: arial,geneva,helvetica,sans-serif; font-size:11pt; background-color:#DDDDDD; width:100px; border:1px solid #AAAAAA;            }
.textinputwide {  font-family: arial,geneva,helvetica,sans-serif; font-size:11pt; color:#222222; background-color:#DDDDDD; width:250px; border:1px solid #AAAAAA;            }
.textinputsmall {  font-family: arial,geneva,helvetica,sans-serif; font-size:9pt; color:#222222; background-color:#DDDDDD; width:250px; border:1px solid #AAAAAA;            }
.selectinput {  font-family: arial,geneva,helvetica,sans-serif; font-size:7pt; background-color:#DDDDDD; border:1px solid #AAAAAA;            }
.selectinputbig {  font-family: arial,geneva,helvetica,sans-serif; font-size:9pt; background-color:#DDDDDD; border:1px solid #AAAAAA;            }
.button { background-color:#AAAAAA; font-size:9pt; color:#222222; border:1px solid #555555; text-transform: uppercase; font-weight: bold; }
.buttonlarge { background-color:#AAAAAA; font-size:20pt; color:#222222; border:1px solid #555555; }
.buttonsmall { background-color:#AAAAAA; font-size:9pt; color:#222222; border:1px solid #555555; }
.buttonsmallbold { background-color:#AAAAAA; font-size:9pt; color:#222222; border:1px solid #555555; text-transform: uppercase; font-weight: bold; }


.ok  { color:#44AA00; }
.ng  { color:#FF0044; }

.warn  { color:orange; }
.error  { color:#FF0044; }

.deact { color:#AAAAAA; }

.snipe { color:purple; }
.flank { color:blue; }

.strong { background-color:#CCDDCC; }
.field { background-color:#DDCCCC; }
.strong2 { background-color:#DDFFDD; }
.field2 { background-color:#FFDDDD; }

.middle { vertical-align:middle; }
.vertical { vertical-align:middle; }

.dialogue		{ font-family: arial,geneva,helvetica,sans-serif; font-size: 14pt; color: #222222; font-weight: bold; font-style:italic; margin-bottom:-2px; 	}

.mouseover:hover { background-color:#DDDDDD; }

.imageborder { padding: 2px; border:1px solid #555555; }
.bonusborder { padding: 1px; border:1px solid #44AA00; border-radius:10px}
.malusborder { padding: 1px; border:1px solid #FF0044; border-radius:10px}

.reiteran { font-family: arial,geneva,helvetica,sans-serif; font-size: 11pt; color: #222222; font-weight: normal;  margin-bottom:-2px; letter-spacing:-0.0em; border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; }
.reiteraus { font-family: arial,geneva,helvetica,sans-serif; font-size: 11pt; color: #222222; font-weight: normal;  margin-bottom:-2px; letter-spacing:-0.05em; border-bottom:1px solid black;	 }

form {
  display:inline;
  border: 0px solid #AAAAAA;
  margin:0;
  padding:.5em;
 }

#bq-logo	{ display:inline-block; transform-origin:50% 50%; will-change: transform, filter; }

@keyframes bq-quake {
  0%   { transform: translate(0,0) skew(0deg,0deg) scale(1); filter: blur(0); }
  4%   { transform: translate(-6px,3px) skew(-3deg,1deg) scale(1.03); filter: blur(1.5px); }
  9%   { transform: translate(5px,-4px) skew(3deg,-2deg) scale(0.97); filter: blur(1px); }
  13%  { transform: translate(-7px,2px) skew(-4deg,2deg) scale(1.04); filter: blur(2px); }
  18%  { transform: translate(4px,-3px) skew(2deg,-3deg) scale(0.96); filter: blur(1px); }
  25%  { transform: translate(-5px,4px) skew(-3deg,3deg) scale(1.03); filter: blur(1px); }
  33%  { transform: translate(3px,-5px) skew(3deg,0deg) scale(0.98); filter: blur(0.5px); }
  42%  { transform: translate(-3px,2px) skew(-1deg,1deg) scale(1.02); filter: blur(0); }
  52%  { transform: translate(2px,-2px) skew(1deg,-1deg) scale(0.99); }
  63%  { transform: translate(-2px,1px) skew(-1deg,0deg) scale(1.01); }
  75%  { transform: translate(1px,-1px) skew(0deg,1deg) scale(1); }
  88%  { transform: translate(-1px,0) skew(0deg,0deg) scale(1); }
  100% { transform: translate(0,0) skew(0deg,0deg) scale(1); filter: blur(0); }
}

.bq-quake	{ animation: bq-quake 0.65s steps(3, jump-end) both; }