A chat skin I started and never finished

Circles.css

@import url(http://fonts.googleapis.com/css?family=Varela+Round);
.ChatWindow {
	overflow: hidden;
	/*font-family: 'Varela Round', sans-serif;*/
	background-image: url('http://www.10wallpaper.com/wallpaper/1920x1080/1107/tender_grass_wallpaper_1920x1080.jpg');
	background-size: cover;
}
/*.ChatWindow:before {
	background-color: rgba(0,0,0,.2);
	position: absolute;
	height: 100%;
	content: '';
	width: 100%;
}*/
#WikiaPage {
	border: 0;
}
.ChatWindow #ChatHeader {
	display: none;
}
.ChatWindow #WikiaPage {
	position: static;
}
.ChatWindow #WikiaPage .wordmark {
	display: none !important;
}
.ChatWindow #WikiaPage #Rail {
	width: 100px;
	display: table;
	height: 100%;
	z-index: 100;
	margin-right: 20px;
}
#Rail #WikiChatList {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
#Rail #WikiChatList .User {
	display: block !important;
	padding: 2px 0;
	width: 98px;
}
#Rail #WikiChatList .User:hover {
	background: transparent;
}
#WikiChatList .User .status {
	display: none;
}
#WikiChatList .User img {
	display: block;
	position: static;
}
#WikiChatList .User img, #WikiaPage .Chat .avatar {
	border: 0;
	height: 38px;
	width: 38px;
	border-radius: 50px;
	margin: auto;
	margin-top: 7px;
	margin-bottom: 7px;
	transition: opacity .3s;
	-webkit-transition: opacity .3s;
}
#WikiChatList .User.away:hover img {
	opacity: 1;
}
#WikiChatList .User:before, #WikiaPage .Chat li:not(.continued):not(.inline-alert):before {
	position: absolute;
	width: 42px;
	height: 42px;
	border: 4px solid white;
	border-radius: 50px;
	box-shadow: 0 0 10px black, black 0 0 10px inset;
	content: '';
	left: 24px;
	top: 3px;
	transition: opacity .3s;
	-webkit-transition: opacity .3s;
}
#WikiaPage .Chat li:not(.continued):not(.inline-alert):before {
	left: -57px;
}
#WikiChatList .User:hover:before, #WikiChatList .User.away:hover:before {
	opacity: .1;
}
#WikiChatList .User.away img, #WikiChatList .User.away:before {
	opacity: .3;
}
#WikiChatList .User .username {
	margin-right: 0;
	color: white;
	font-weight: bold;
	text-shadow: 0 0 10px black;
}
#WikiChatList .User .username:after {
	right: 18px;
	top: -1px;
	position: absolute;
}
.ChatWindow #UserStatsMenu {
	background: black;
	padding-right: 17px;
	right: 126px !important;
	border: 0;
	box-shadow: none;
	margin-top: 7px;
	-webkit-box-shadow: none;
	text-align: right;
	text-shadow: 0 0 10px black;
	padding-left: 17px;
	border-radius: 38px;
}
#UserStatsMenu:before {
	position: absolute;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border: 4px solid white;
	border-radius: 50px;
	box-shadow: 0 0 10px black, black 0 0 10px inset;
	content: '';
	left: -6px;
	top: -6px;
}
.ChatWindow #UserStatsMenu .info {
	height: 40px;
	background: transparent;
	padding: 0;
}
#UserStatsMenu .info img {
	display: none;
}
#UserStatsMenu .info .username, #UserStatsMenu .info .edits {
	display: none;
}
#UserStatsMenu .info {
	height: auto !important; 
}
#UserStatsMenu .info ul {
	margin-left: 0;
	color: #FFCC00;
}
#UserStatsMenu .actions .icon {
	display: none !important;
}
#UserStatsMenu .actions li {
	padding: 0;
}
#UserStatsMenu .actions li:hover {
	background-color: transparent;
}
#UserStatsMenu .actions ul {
	margin: 0;
}
#UserStatsMenu .actions a {
	color: #47B9EB;
}
#UserStatsMenu .actions .private {
	display: none;
}
.ChatWindow #WikiaPage .Chat {
	border: 0;
	width: calc(50% - 120px);
	right: 0;
	left: auto;
	padding-right: 120px;
	overflow-x: hidden;
	overflow-y: scroll;
}
.ChatWindow #WikiaPage .Chat:before {
	width: 50%;
	right: 20px;
	border-radius: 1000px 0 0 1000px;
	height: 100%;
	margin-right: -50%;
	padding-right: 50%;
	margin-top: -25%;
	padding-bottom: 25%;
	position: fixed;
	padding-top: 25%;
	content: '';
	border: 20px solid white;
	box-shadow: 0 0 30px black, inset 0 0 40px black;
	pointer-events: none;
}
#WikiaPage .Chat li {
	padding: 10px 0;
	margin-left: 25%;
	color: white;
	text-shadow: 0 0 10px black;
}
#WikiaPage .Chat .you {
	background: transparent;
}
#WikiaPage .Chat .continued {
	padding-top: 5px;
}
#WikiaPage .Chat .avatar {
	left: -51px;
	top: 2px;
}
#WikiaPage .Chat .username {
	font-size: 11px;
}
#WikiaPage .Chat .time {
	color: white;
	font-size: 11px;
	font-weight: bold;
}
.YES {
top: -50%;
left: 36.5%;
position: absolute;
width: 50%;
height: 200%;
pointer-events: none;
background-image: -webkit-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 90%, rgb(0, 0, 0) 90%);
z-index: 100;
}
/*
background-position: 0% 50%;
background-attachment: inherit;
background-size: 100% 66.6%;
background-image: url('http://priedionipriedioni.ueuo.com/wordpress/wp-content/uploads/blogger/-4…6y3I/AAAAAAAADuk/CWQCEoY_DZc/s1600/1280x960_Dizorb_Field_HD_Wallpaper.jpg');
*/