
html {	overflow-y: auto;	/*IE6-7*/
	height: 100%;
	width: 100%;
	display: table;

	background: olive;
	back\ground: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 600,
		     color-stop(0, rgba(255,255,255,0.35)), color-stop(100%, transparent)),
	-webkit-gradient(linear, left top, right bottom, color-stop(0,olive), color-stop(100%,black));
	bac\kground:-webkit-radial-gradient(rgba(255,255,255,0.35), transparent)
		    -webkit-linear-gradient(left top, olive, black);
	bac\kground:   -moz-radial-gradient(rgba(255,255,255,0.35), transparent),
		       -moz-linear-gradient(left top, olive, black);	 /* I\E5 */
	bac\kground:    -ms-radial-gradient(rgba(255,255,255,0.35), transparent),
		        -ms-linear-gradient(left top, olive, black);
	bac\kground:     -o-linear-gradient(left top, olive, black);
	bac\kground:        radial-gradient(rgba(255,255,255,0.35), transparent)
			    linear-gradient(to right bottom, olive, black);

	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=olive);
}

body {	display: table-cell;
	vertical-align: middle;
	height: 100%; margin: 0;	/* IE 6-7 */;
}

p {	width: 12.3em;
	border: solid thin black;
	padding: 0.75em 0 0.75em 1.8em;
	margin: auto;
	color: gray;

	background: white url(karo.gif) 50%;
	bac\kground: url(ameise.gif) no-repeat 7.3em 0.2em, white url(karo.gif) 50%;
   -moz-background-size: 6.8em auto, auto;
-webkit-background-size: 130px auto, auto;
	background-size: 6.8em auto, auto;

	font: 1.2em/2 "DejaVu Sans Mono", Menlo, "Liberation Mono", "Lucida Console", Monaco, sans-serif;

   -moz-border-radius: 1.8em 3em 3em;
   -moz-border-radius: 7.4em/4em;	/* ab Fx3.5 */
-webkit-border-radius: 135px 70px;
	border-radius: 50%;

-webkit-box-shadow:      -0.3em -0.3em   1em black; /* inset und border-radius bug */
   -moz-box-shadow: inset 0.3em  0.3em   1em black;
	box-shadow: inset 0.3em  0.3em 0.7em black;
	filter: progid:dximagetransform.microsoft.shadow(color=#222222);

	*margin-top: expression((parentNode.offsetHeight-offsetHeight)/2); /* IE5.5-7 */
	-margin-left: expression((parentNode.offsetWidth-offsetWidth)/2);  /* IE5.5-6 */
}

p {
-webkit-transition: 9s;
   -moz-transition: 9s;
     -o-transition: 9s;		/* funktioniert nicht */
	transition: 9s;
}

p:hover { background-position: 10em -5em, 50% }

a {	padding: 0 0.2em;
	outline: none;
	border-color: transparent;
	border-radius: 50%;
	margin-left: 0.3em;
	text-shadow: 0 1px rgba(255,255,255,0.5), -1px 0 rgba(255,255,255,0.5),
		     0 -1px rgba(255,255,255,0.5), 1px 0 rgba(255,255,255,0.5);

-webkit-transition: 500ms ease-in;
   -moz-transition: 500ms ease-in;
     -o-transition: 250ms;	/* buggy */
	transition: 500ms ease-in;
}

a:hover, a:active, a:focus {
	text-decoration: none;
	background: gold;
	color: red;
	border: solid 1px;
	border-color: #fe2 goldenrod goldenrod #fe2;
	border-radius: 0;
	outline: solid 0;	/* Opera */
}

a:active { border-color: goldenrod #fe2 #fe2 goldenrod }

span {	color: #444;
	padding: 0 0.3em;
	text-shadow: -1px -1px #888;

	display: inline-block;	/* IE5-7 hasLayout */
	filter: dropshadow(offx=-1 offy=-1 color=#888888)
}

small {	background: #666;
	border: solid 1px;
	border-color: #777 black black #777;
	font-size: 83%;
	line-height: 1.3;

-webkit-transform: rotate(345deg); -webkit-transform-origin: 100% 0;
   -moz-transform: rotate(345deg);    -moz-transform-origin: 100% 0;
     -o-transform: rotate(345deg);      -o-transform-origin: 100% 0;
	transform: rotate(345deg);         transform-origin: 100% 0;

	display: inline-block;	/* IE hasLayout; WebKit transform */

	position: relative;  top: -1em;  *top: 0;
	*ma\rgin: -0.3em 0;	/* IE6-7 auto expand */

	fil\ter:		/* 345° cos, sin, -sin, cos */
	  progid:DXImageTransform.Microsoft.Matrix(
	    m11=0.97, m21=-0.26, m12=0.26, m22=0.97, sizingmethod='auto expand');
}
