main.css

*{
	list-style:none;
	margin:0;
	padding:0;
	text-decoration:none;
}
body {
	background: radial-gradient(rgba(219,219,219,1),rgba(238,238,238,.5)),
	url('tex2res5.png');
}
h1 {
	color: #444;
	font: 32px/40px 'Josefin Slab'; 
	font-weight: 700; 
	margin-top: 40px; 
	text-align: center; 
	text-shadow: 0 1px 0 #fff;
}
.container {
	background: radial-gradient(#ddd,#e3e3e3);
	border: 1px solid #e3e3e3;
	border-radius: 40px;
	box-shadow: inset 0 0 1px 0 rgba(0,0,0,.15),
		inset 0 0 10px 1px rgba(0,0,0,.05),
		0 0 1px 0 rgba(255,255,255,.3),
		0 0 10px 0 rgba(255,255,255,.3);
	margin: 40px auto; 
	padding: 20px 24px;
	width: 290px; 
}
li {
	background: linear-gradient(#555,#333);
	background-clip: padding-box;
	border: 2px solid rgba(255,255,255,.5);
	border-radius: 50%; 
	box-shadow: 
		inset 0 0 2px 1px rgba(0,0,0,.4),
		0 0 3px -1px rgba(0,0,0,.5);
	color: #ccc;
	cursor: pointer;
	display: inline-block; 
	font: bold 32px/80px 'Josefin Sans';
	height: 70px; 
	margin: 4px; 
	padding: 5px;
	text-align: center; 
	text-shadow: 0 1px 0 #000, 0 -1px 0 #fff;
	width: 70px; 
}
.speaker {
	background: 
	    linear-gradient(
	    	rgba(102,102,102,.5) 0%,
	    	rgba(187,187,187,.3) 5%,
	    	rgba(204,204,204,.3)) 20%,
	    radial-gradient(
	    	50% 50%, 90% 200%,
	    	rgba(221,221,221,0) 40%, 
	    	rgba(221,221,221,1) 60%
	    );
	border-radius: 40px;
	box-shadow: inset 0 1px 3px 1px rgba(0,0,0,.2),
		inset 0 1px 5px 1px rgba(255,255,255,.8);
	height: 58px;
	margin: 20px auto;
	width: 200px; 
}
.dot {
	background: linear-gradient(
		rgba(136,136,136,.1) 72%, rgba(119,119,119,.35)
	); 
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: inset 0 1px 1px 1px rgba(68,68,68,.2),
		0 1px 1px 0px rgba(255,255,255,.7);
	display: inline-block; 
	height: 12px; 
	margin-left: 15px; 
	margin-top: 8px;
	width: 12px;
}
.dot:nth-of-type(1) {
	margin-left: 25px;
}
.dot:nth-of-type(6) {
	margin-left: 25px;
}
.dot.selected {
	background: linear-gradient(
		rgba(102,187,87,.4) 72%, rgba(51,187,85,.8)
	);
}