/* ------- 11 farben tooltip-------- */
.textPanel {width:700px; margin:20px 0; font-family:'georgia', serif; padding:25px; background:#eee;}
.textPanel img {float:left; padding:0 10px 10px 0;}

/* span.tooltip {padding:0 5px; background:#cdc; cursor:default; z-index:100;} 
  */

span.tooltip {padding:0 5px; background:transparent; cursor:default; z-index:100;}

span.tooltip > span {display:none; position:absolute; border:2px solid #080; background:#fff; box-shadow:0 15px 10px -15px rgba(0,0,0,0.7); z-index:100;}
span.bottomRight > span {border-radius:0 20px 0 20px; left:50%; top:40px;}
span.bottomLeft > span {border-radius:20px 0 20px 0; right:50%; top:40px;}
span.topRight > span {border-radius:20px 0 20px 0; left:50%; bottom:40px;}
span.topLeft > span {border-radius:0 20px 0 20px; right:50%; bottom:40px;}

span.colBlack > span {border-color:#000;}
span.colBlue > span {border-color:#008;}
span.colBrown > span {border-color:#830;}
span.colGray > span {border-color:#888;}
span.colGreen > span {border-color:#080;}
span.colMarine > span {border-color:#126666;}
span.colNavy > span {border-color:#000033;}
span.colOrange > span {border-color:#ff6600;}
span.colRed > span {border-color:#c00;}
span.colViolet > span {border-color:#606;}
span.colYellow > span {border-color:#FF0;}

span.tooltip span b {display:block; background:#126666; *width:100%; margin:2px; padding:10px; color:#222; position:relative; z-index:100; overflow:hidden; font:normal 14px/20px 'georgia', serif;
box-shadow:inset 2px 2px 5px rgba(255, 255, 255, 0.5), inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}
span.bottomRight span b {border-radius:0 18px 0 18px;}
span.bottomLeft span b {border-radius:18px 0 18px 0}
span.topRight span b {border-radius:18px 0 18px 0;}
span.topLeft span b {border-radius:0 18px 0 18px;}

span.colRed span b {background:#C00;}
span.colBlack span b {background:#000;}
span.colBlue span b {background:#008;}
span.colNavy span b {background:#000033;}
span.colMarine span b {border-color:#126666;}
span.colBrown span b {background:#830;}
span.colOrange span b {background:#ff6600;}
span.colGreen span b {background:#0F0;}
span.colGray span b {background:#888;}
span.colViolet span b {background:#606;}
span.colYellow > span b {background:#FF0;}

span.tooltip > span:before {display:block; content:""; width:20px; height:20px; background:transparent; position:absolute;}
span.bottomRight > span:before {top:-20px; left:-2px;}
span.bottomRight.colRed > span:before {background:url(red-corner.png) no-repeat -20px 0;}
span.bottomRight.colBlack > span:before {background:url(black-corner.png) no-repeat -20px 0;}
span.bottomRight.colBlue > span:before {background:url(blue-corner.png) no-repeat -20px 0;}
span.bottomRight.colNavy > span:before {background:url(navy-corner.png) no-repeat -20px 0;}
span.bottomRight.colMarine > span:before {background:url(marine-corner.png) no-repeat -20px 0;}
span.bottomRight.colBrown > span:before {background:url(brown-corner.png) no-repeat -20px 0;}
span.bottomRight.colOrange > span:before {background:url(orange-corner.png) no-repeat -20px 0;}
span.bottomRight.colGreen > span:before {background:url(green-corner.png) no-repeat -20px 0;}
span.bottomRight.colGray > span:before {background:url(gray-corner.png) no-repeat -20px 0;}
span.bottomRight.colViolet > span:before {background:url(violet-corner.png) no-repeat -20px 0;}
span.bottomRight.colYellow > span:before {background:url(yellow-corner.png) no-repeat -20px 0;}

span.bottomLeft > span:before {top:-20px; right:-2px;}
span.bottomLeft.colRed > span:before {background:url(red-corner.png) no-repeat 0 0;}
span.bottomLeft.colBlack > span:before {background:url(black-corner.png) no-repeat 0 0;}
span.bottomLeft.colBlue > span:before {background:url(blue-corner.png) no-repeat 0 0;}
span.bottomLeft.colNavy > span:before {background:url(navy-corner.png) no-repeat 0 0;}
span.bottomLeft.colMarine > span:before {background:url(marine-corner.png) no-repeat 0 0;}
span.bottomLeft.colBrown > span:before {background:url(brown-corner.png) no-repeat 0 0;}
span.bottomLeft.colOrange > span:before {background:url(orange-corner.png) no-repeat 0 0;}
span.bottomLeft.colGreen > span:before {background:url(green-corner.png) no-repeat 0 0;}
span.bottomLeft.colGray > span:before {background:url(gray-corner.png) no-repeat 0 0;}
span.bottomLeft.colViolet > span:before {background:url(violet-corner.png) no-repeat 0 0;}
span.bottomLeft.colYellow > span:before {background:url(yellow-corner.png) no-repeat 0 0;}

span.topRight > span:before {bottom:-20px; left:-2px;}
span.topRight.colRed > span:before {background:url(red-corner.png) no-repeat -20px -20px;}
span.topRight.colBlack > span:before {background:url(black-corner.png) no-repeat -20px -20px;}
span.topRight.colBlue > span:before {background:url(blue-corner.png) no-repeat -20px -20px;}
span.topRight.colNavy > span:before {background:url(navy-corner.png) no-repeat -20px -20px;}
span.topRight.colMarine > span:before {background:url(marine-corner.png) no-repeat -20px -20px;}
span.topRight.colBrown > span:before {background:url(brown-corner.png) no-repeat -20px -20px;}
span.topRight.colOrange > span:before {background:url(orange-corner.png) no-repeat -20px -20px;}
span.topRight.colGreen > span:before {background:url(green-corner.png) no-repeat -20px -20px;}
span.topRight.colGray > span:before {background:url(gray-corner.png) no-repeat -20px -20px;}
span.topRight.colViolet > span:before {background:url(violet-corner.png) no-repeat -20px -20px;}
span.topRight.colYellow > span:before {background:url(yellow-corner.png) no-repeat -20px -20px;}

span.topLeft > span:before {bottom:-20px; right:-2px; border-width:0 2px 0 0;}
span.topLeft.colRed > span:before {background:url(red-corner.png) no-repeat 0 -20px;}
span.topLeft.colBlack > span:before {background:url(black-corner.png) no-repeat 0 -20px ;}
span.topLeft.colBlue > span:before {background:url(blue-corner.png) no-repeat 0 -20px ;}
span.topLeft.colNavy > span:before {background:url(navy-corner.png) no-repeat 0 -20px ;}
span.topLeft.colMarine > span:before {background:url(marine-corner.png) no-repeat 0 -20px ;}
span.topLeft.colBrown > span:before {background:url(brown-corner.png) no-repeat 0 -20px ;}
span.topLeft.colOrange > span:before {background:url(orange-corner.png) no-repeat 0 -20px ;}
span.topLeft.colGreen > span:before {background:url(green-corner.png) no-repeat 0 -20px;}
span.topLeft.colGray > span:before {background:url(gray-corner.png) no-repeat 0 -20px;}
span.topLeft.colViolet > span:before {background:url(violet-corner.png) no-repeat 0 -20px;}
span.topLeft.colYellow > span:before {background:url(yellow-corner.png) no-repeat 0 -20px;}

span.colRed > span:before {border-color:#C00;}
span.colBlack > span:before {border-color:#000;}
span.colBlue > span:before {border-color:#008;}
span.colNavy > span:before {border-color:#000033;}
span.colMarine > span:before {border-color:#126666;}
span.colBrown > span:before {border-color:#850;}
span.colOrange > span:before {border-color:#ff6600;}
span.colGreen > span:before {border-color:#080;}
span.colGray > span:before {border-color:#888;}
span.colViolet > span:before {border-color:#606;}
span.colYellow > span:before {border-color:#FF0;}

span.tooltip span b:before {display:block; content:""; width:80%; height:50px; background:transparent; border-radius: 100% / 50px ; position:absolute; left:10%; top:-30px; z-index:200;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

span.tooltip:hover {position:relative; z-index:100;}
span.tooltip:hover > span {display:block; white-space:nowrap;}

span.tooltip + img.close {position:fixed; left:0; top:0; width:0; height:0; z-index:99;}
span.tooltip:hover + img.close {width:100%; height:100%;}

/* ------- end 11farben tooltip -------- */