#rodzic{
	width:448px;
	height:46px;
	font-size:24px;
	margin:0 auto;
	text-align:center;
}
#rodzic > span{
	display:block;
	float:left;
	width:40px;
	line-height:40px;
	margin:0 5px;
	border:3px solid #FDD700;
	background-color:#FFF;
	border-radius:6px;
	animation:animowany_tekst 5s linear infinite;
	-webkit-animation:animowany_tekst 5s linear infinite;
}

@keyframes animowany_tekst{
	0% { transform:rotate(0); }
	10% { transform:rotate(360deg); }
	100% { transform:rotate(360deg); }
}

#rodzic > #dziecko1{
	animation-delay:250ms;
}
#rodzic > #dziecko2{
	animation-delay:500ms;
}
#rodzic > #dziecko3{
	animation-delay:750ms;
}
#rodzic > #dziecko4{
	animation-delay:1000ms;
}
#rodzic > #dziecko5{
	animation-delay:1250ms;
}
#rodzic > #dziecko6{
	animation-delay:1500ms;
}
#rodzic > #dziecko7{
	animation-delay:1750ms;
}
#rodzic > #dziecko8{
	animation-delay:2000ms;
}


/*Wygląd*/
/*  WSZYSTKO TO CO TRZEBA ZROBIĆ */
.Good{
	text-align: left;
}

.Good > ul{
	list-style-type:none;
	margin:0;
	padding:0;
	width:250px;
	border:1px solid #CCC;
	box-shadow: 0 6px 6px -6px #666;
}
.Good > ul li{
	position: relative;
	border-top:1px solid #CCC;
	background-color: #EEE;
	background-repeat: repeat-x;
	background-image: url('tooltip.png');
	background-image:radial-gradient(ellipse at bottom, #FFF 0%, #DDD 100%);
}

.Good > ul li:first-child{
	border-top:none;
}

.Good > ul li:hover{
	background: #FFF;
}
.Good > ul li:before{
	content:'';
}
.Good > ul li:after{
	content:'';
}

.Good > ul li a{
	display:block;
	text-decoration:none;
	padding:10px;
	text-align:center;
	color:#00A0AA;
	text-shadow: 1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
	font-size:18px;
	border-top:1px solid #FFF;
	background-repeat: no-repeat;
	background-position: center;
	transition:1s;
}


.Good > ul li a:hover{
	color:#000;
	background-image: url('Crap/strzalka.png');
	background-position: 97% center;
}

.Good > ul li:hover a span{
	animation:mignij 2s linear;
}

.Good > ul li:hover:before{
	content:attr(data-tooltip-1);
	width:100%;
	padding:10px;
	line-height:20px;
	border:1px solid #CCC;
	position:absolute;
	top:-41px;
	left:110%;
	background-color:#EEE;
	background-repeat: repeat-x;
	background-image: url('tooltip.png');
	background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
	font-size: 1.2em;
	text-align: center;
	text-shadow: 1px 1px 0 #FFF, 1px 2px 0 #AAA, 1px 2px 6px #AAA;
	animation:tooltip-1 1s;
}

.Good > ul li:hover:after{
	content:attr(data-tooltip-2);
	width:100%;
	padding:10px;
	line-height:25px;
	border:1px solid #CCC;
	position:absolute;
	top:0;
	left:110%;
	background-color:#FFF;
	background-image:radial-gradient(ellipse at center, #FFF 0%, #EEE 100%);
	font-family: Tahoma, sans-serif;
	text-shadow: 0 0 2px #9AF6FA;
	box-shadow:0 6px 6px -6px #666;
	transform-origin:50% 100%;
	animation: tooltip-2 1s;
}

@keyframes mignij
{
	0%{opacity:0;}
	100%{opacity:1;}
}


@keyframes tooltip-1
{
	0% {transform: translateY(-1500px); opacity:0;}
	100% {transform: translateY(0); opacity:1;}
}

@keyframes tooltip-2
{
	0% {transform: scale(0) rotate(0); opacity:0;}
	100% {transform: scale(1) rotate(360deg); opacity:1;}
}