html,
body {
	margin: 32px;
	padding: 0;
	font-family: arial;
	font-size: 16px;
	background-color: #FFFFFF;
	color: #7F7F7F;
}

.wrapper {
	width: 960px;
	margin: 48px auto;
}

h1 {
	margin: 0;
	padding: 8px 32px;
	border-bottom: 1px solid #DFDFDF;
	font-size: 32px;
	font-weight: bold;
	color: #7F7F7F;
}
h2 {
	margin: 16px 0 0;
	padding: 8px 32px;
	border-bottom: 1px solid #DFDFDF;
	font-size: 18px;
	font-weight: bold;
	color: #7F7F7F;
}
p {
	padding: 32px;
}
.right_align {
	text-align: right;
}
a,
a:link,
a:visited,
a:active {
	color: #7F7F7F;
}
a:hover {
	color: #000000;
}

/* Front page */
.site_list {
	list-style: none;
}
.site_list.important {
	font-size: 20px;
}
.site_list li {
	border-bottom: 1px solid #DFDFDF;
}
.site_list li:last-child {
	border-bottom: 0;
}
.site_list a,
.site_list a:active,
.site_list a:link,
.site_list a:visited {
	display: block;
	padding: 16px 32px;
	text-decoration: none;
	font-weight: bold;
	color: #3F3F3F;
}
.site_list a:hover {
	background-color: #BFBFBF;
	color: #FFFFFF;
}
.site_list a:hover:after {
	content: '›››';
	float: right;
}

/* Sub page */
.box {
	margin-top: 32px;
	margin-bottom: 32px;
}
.text {
	margin-left: 32px;
}
.box img {
	float: left;
	margin-top: 3px;
}
table {
	margin: 0 0 0 32px;
	padding: 0;
}
th {
	font-weight: bold;
}
td, th {
	margin: 0;
	padding: 0 8px 8px 0;
}
.has_sub {
	padding-bottom: 5px;
}
sub {
	vertical-align: sub;
}

@media screen and (max-width: 960px) {
	.wrapper {
		width: 100%;
		margin: 32px 0;
	}
}