body {
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}

table {
	 
}

.demo-description {
	clear: both;
	padding: 12px;
	font-size: 1.3em;
	line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}


.hexagon {
    width: 100px;
    height: 55px;
    position: relative;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: red;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);   
    box-shadow: 0 0 10px rgba(0,0,0,0.8);   
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 22px;
    width: 57px;
    height: 57px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
    top: -29px;
}
.hexagon:after {
    top: 27px;
}
.hexagon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 55px;
    background:red;
    z-index: 1;
}

.circle {
	border-radius: 50%;
	width: 100px;
	height: 100px; 
	/* width and height can be anything, as long as they're equal */
}



/* Create the animation blocks */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Spinning, gradient circle; CSS only! */
#advanced {
	width: 100px;
	height: 100px;
	
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, rgb(255,200,100) 0%, rgb(255,200,255) 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, rgb(255,200,100), rgb(255,200,255));
	background-image: radial-gradient(45px 45px 45deg, circle cover, rgb(255,200,100) 0%, rgb(255,200,255) 100%, red 95%);
	
	animation-name: spin; 
	animation-duration: 3s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}