
.last-updated { color: #180206; }

/* scale 3:1 (feet:pixel) */

body,
body > .wrap {
	max-width: 960px !important;
	display: block;
	margin: 15px auto;
}

.site-header {
	display: none;
}

article {
	max-width: 880px;
	display: block;
	margin: 0 auto;
}

.community {
	position: relative;
	width: 880px;
	height: 880px;
	display: block;
	margin: 20px auto;
	text-align: center;
}

.community {
	border: 20px solid #999;
	background-color: #d8ead2;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 24px;
}

section {
	position: relative;
}

section .wrap {
	overflow: visible;
}

.group {
	display: block;
	margin: 12px;
	text-align: center;
	border: 3px solid #999;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 12px;
}

.group {
	position: absolute;
	width: 240px;
	height: 240px;
	margin-top: -120px;
	margin-left: -120px;
}

.group > .inner {
	padding: 10px;
}

.group-1 {
	left: 280px;
	top: 145px;
}

.group-2 {
	left: 560px;
	top: 145px;
}

.group-3 {
	left: 145px;
	top: 420px;
}
.group-4 {
	left: 695px;
	top: 420px;
}

.group-5 {
	left: 280px;
	top: 690px;
}

.group-6 {
	left: 560px;
	top: 690px;
}

.text {
	position: absolute;
	font-weight: bold;
	color: #777;
	font-size: 130%;
}

.community-text {
	left: 420px;
	top: 420px;
	width: 150px;
	height: 150px;
	line-height: 150px;
	margin-left: -75px;
	margin-top: -75px;	
}

.group-text {
	width: 50px;
	height: 50px;
	line-height: 50px;
	top: 117px;
	left: 117px;
	margin-top: -25px;
	margin-left: -25px;
}

.role {
	color: #777;
	font-size: 9px;
	font-weight: normal;
	border: 2px solid #999;
	border-radius: 3px;
	box-sizing: border-box;
}

.role {
	position: absolute;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	margin-top: -30px;
}

.role .inner {
	position: absolute;
	/* .role width minus border */
	width: 56px;
}

.role .inner {
	margin-top: -7px;	
}

.tier .role .inner {
	top: 28px;
}

.role-1 {
	left: 75px;
	top: 45px;
}

.role-2 {
	left: 160px;
	top: 45px;
}

.role-3 {
	left: 42px;
	top: 117px;
}

.role-4 {
	left: 192px;
	top: 117px;
}

.role-5 {
	left: 75px;
	top: 190px;
}

.role-6 {
	left: 160px;
	top: 190px;
}
