* {
	margin: 0;
	padding: 0;
}

#container {
	margin: 0px auto;
	width: 465px;
	height: 465px;
	background-color: #b3b3b3;
	font-family: sans-serif;
	background-image: url("https://dummyimage.com/465x465/00ffff/000.png&text=Chrome,Safari,FF+Only");
}

#circle {
	margin: 0px auto;
	width: 100px;
	height: 100px;
	position: relative;
	top:182px;
	border: 2px solid #f5f5f5;
	background-color: rgba(255, 255, 255, 0.3);

	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-box-shadow: 2px 2px 3px #4d4d4d;
	-moz-box-shadow: 2px 2px 3px #4d4d4d;
}

#circle:after {
	height: 100px;
	width: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	content: '';

	-webkit-border-radius: 95px;
	-moz-border-radius: 95px;
	background: -webkit-gradient(
		radial,
		30% 30%, 25,
		45% 45%, 50,
		from(rgba(255, 255, 255, 0.1)),
		color-stop(0.3, rgba(255, 255, 255, 0.5)),
		to(rgba(255, 255, 255, 0.7))
	);
	background: -moz-radial-gradient(
		25% 25%,
		rgba(255,255,255,0.1) 20%,
		rgba(255,255,255,0.5) 40%,
		rgba(255, 255, 255, 0.7)
	);
}

#circle:hover {
	cursor:pointer;
}

#circle:active {
	position: relative;
	top:183px;
	left:1px;

	-webkit-box-shadow: 1px 1px 0px #4d4d4d;
	-moz-box-shadow: 1px 1px 0px #4d4d4d;
}

#circle p.allow {
	font-size: 50px;
	font-weight: bold;
	color: #f5f5f5;
	width: 50px;
	height: 50px;
	position: absolute;
	top:25px;
	left:31px;

	text-shadow: #1a1a1a -1px 1px 2px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
}

#circle p.isMac {
	left:40px;
}

#circle p.isAndroid {
	top:35px;
}