@charset "utf-8";

/* used in jquery ui */
@import "common.css";

body {
	font-family: "Helvetica Neue", "Lucida Grande", "Tahoma",
		"Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS UI Gothic", "ＭＳ Ｐゴシック",
		"MS Gothic", "IPAUIGothic", "IPAPGothic", sans-serif;
	font-size: 90%;
	font-weight: 200;
	line-height: 1.6;
	width: 800px;
	margin: 0 auto;
	padding: 0;
	background: black;
	text-align: justify;
}

/* layout */
#header {
	background: #037;
	margin: 0;
	padding: 1px 0;
}
#header h1 {
	color: white;
	font-weight: 200;
	font-size: 200%;
	text-shadow: #fff 0 0 8px;
	margin: 2em 0.5em 0.5em 0.5em;
}
#header .menu {
	background: #46a;
	margin: 0.5em 0;
	padding: 0;
	list-style: none;
	height: 2em;
	overflow: hidden;
}
#header .menu li {
	display: inline;
}
#header .menu a {
	color: white;
	text-decoration: none;
	float: left;
	padding: 0.25em 1em;
}
#header .menu a:hover, #header .menu a:active {
	background: #89c;
}
#contents {
	background: white;
	margin: 0.5em 0;
	padding: 1px 0 2em 0;
}
#footer {
	color: white;
	text-align: right;
	font-size: 75%;
	padding-bottom: 1em;
}
#footer p {
	margin: 0.3em 0.5em;
	line-height: 1.3;
}
#footer .copyright {
	font-weight: bold;
}

/* inline */
a {
	color: blue;
	text-decoration: underline;
}
a:hover, a:active {
	color: red;
}
em {
	font-style: italic;
}
strong {
	font-weight: 600;
}
small {
	font-size: 85%;
}
.tr {
	cursor: help;
}

/* block */
p {
	margin: 0.5em;
}
h2 {
	margin: 0.67em 0.33em;
	font-size: 150%;
	font-weight: 600;
	color: #444;
	text-shadow: #ccc 2px 2px 2px;
	border-bottom: 3px solid #ccc;
	letter-spacing: 2px;
	clear: right;
}
h3 {
	margin: 0.5em 0.38em;
	font-size: 130%;
	font-weight: 200;
	color: #666;
	text-shadow: #ddd 1px 1px 1px;
	border-bottom: 1px solid #ccc;
	letter-spacing: 2px;
	clear: right;
}
dl {
	margin: 0;
	padding: 0;
}
dt {
	margin: 0.5em;
	font-weight: 600;
}
dd {
	margin: 0.5em 0.5em 0.5em 3em;
}
form {
	margin: 0;
}
.gallery {
	margin: 0.5em;
	text-align: center;
}
#widget {
	margin: 1em 300px; /* since widget is 200px wide */
}

/* metadata & navigation */
.metadata {
	font-size: 90%;
	background: #ccc;
	width: 140px;
	float: left;
	margin: 10px;
	line-height: 1.3;
}
* html .metadata {
	margin-left: 5px;
}
.metadata p {
	margin: 5px;
}
.metadata .name {
	font-size: 120%;
	margin-bottom: 10px;
}
.navigation {
	list-style: none;
	margin: 10px 5px 0 5px;
	padding: 0;
	padding-bottom: 5px;
	border-bottom: 2px solid white;
}
.navigation li {
	margin: 0;
	padding: 0;
}
.navigation a {
	display: block;
	width: 120px;
	background: white;
	padding: 5px;
	margin: 5px 0;
	color: black;
	text-decoration: none;
}
.navigation a:before {
	content: '» ';
}
.navigation a:hover, .navigation a:active {
	color: black;
	background: #aaa;
}

/* section */
.section {
	margin: 0 0 1em 160px;
	width: 630px;
	font-size: 90%;
}
.section h2 {
	margin: 0.2em 0;
	width: 630px;
}
.section h3 {
	margin: 0.5em 0;
	width: 630px;
}
.section p {
	margin: 0.5em 0;
}
.section .full {
	width: 630px;
	line-height: 1;
}
.message {
	margin-top: 0.75em;
	width: 610px;
	padding: 5px 10px;
	background: #222;
	color: white;
}
.message p {
	margin: 0;
}

/* gauge */
.gauge {
	color: white;
	float: left;
	margin: -3px 3px -3px 0;
	line-height: 1.8;
	background: #444;
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#444));
	cursor: default;
	font-size: 80%;
	height: 1.8em;
	overflow: hidden;
}
.gauge span {
	height: 1.8em;
	padding: 0;
	float: left;
	overflow: hidden;
}
.points-S4 .g0, .points-S2 .g0, .points-S3 .g0, .points-S1 .g0 { background: #cc8; background: -webkit-gradient(linear, left top, left bottom, from(#eea), to(#995)); }
.points-A4 .g0, .points-A2 .g0, .points-A3 .g0, .points-A1 .g0 { background: #aa8; background: -webkit-gradient(linear, left top, left bottom, from(#cca), to(#775)); }
.points-B4 .g0, .points-B2 .g0, .points-B3 .g0, .points-B1 .g0 { background: #668; background: -webkit-gradient(linear, left top, left bottom, from(#99a), to(#335)); }
.points-C4 .g0, .points-C2 .g0, .points-C3 .g0, .points-C1 .g0 { background: #448; background: -webkit-gradient(linear, left top, left bottom, from(#88a), to(#115)); }
.points-D .g0 { background: #338; background: -webkit-gradient(linear, left top, left bottom, from(#66a), to(#005)); }
.ratings-BASIC .g0 { background: #0c0; background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#0c0)); }
.ratings-BASIC .g1 { background: #2c2; background: -webkit-gradient(linear, left top, left bottom, from(#4e4), to(#2c2)); }
.ratings-BASIC .g2 { background: #4c4; background: -webkit-gradient(linear, left top, left bottom, from(#4c4), to(#4c4)); }
.ratings-BASIC .g3 { background: #6c6; background: -webkit-gradient(linear, left top, left bottom, from(#4a4), to(#6c6)); }
.ratings-BASIC .g4 { background: #8c8; background: -webkit-gradient(linear, left top, left bottom, from(#484), to(#8c8)); }
.ratings-BASIC .g5 { background: #aca; background: -webkit-gradient(linear, left top, left bottom, from(#464), to(#aca)); }
.ratings-ADVANCED .g0 { background: #cc0; background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#cc0)); }
.ratings-ADVANCED .g1 { background: #cc2; background: -webkit-gradient(linear, left top, left bottom, from(#ee4), to(#cc2)); }
.ratings-ADVANCED .g2 { background: #cc4; background: -webkit-gradient(linear, left top, left bottom, from(#cc4), to(#cc4)); }
.ratings-ADVANCED .g3 { background: #cc6; background: -webkit-gradient(linear, left top, left bottom, from(#aa4), to(#cc6)); }
.ratings-ADVANCED .g4 { background: #cc8; background: -webkit-gradient(linear, left top, left bottom, from(#884), to(#cc8)); }
.ratings-ADVANCED .g5 { background: #cca; background: -webkit-gradient(linear, left top, left bottom, from(#664), to(#cca)); }
.ratings-EXTREME .g0 { background: #c00; background: -webkit-gradient(linear, left top, left bottom, from(#f44), to(#c00)); }
.ratings-EXTREME .g1 { background: #c22; background: -webkit-gradient(linear, left top, left bottom, from(#e44), to(#c22)); }
.ratings-EXTREME .g2 { background: #c44; background: -webkit-gradient(linear, left top, left bottom, from(#c44), to(#c44)); }
.ratings-EXTREME .g3 { background: #c66; background: -webkit-gradient(linear, left top, left bottom, from(#a44), to(#c66)); }
.ratings-EXTREME .g4 { background: #c88; background: -webkit-gradient(linear, left top, left bottom, from(#844), to(#c88)); }
.ratings-EXTREME .g5 { background: #caa; background: -webkit-gradient(linear, left top, left bottom, from(#644), to(#caa)); }
.avgscore-BASIC .g0 { background: #0c0; background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#0c0)); }
.avgscore-ADVANCED .g0 { background: #cc0; background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#cc0)); }
.avgscore-EXTREME .g0 { background: #c00; background: -webkit-gradient(linear, left top, left bottom, from(#f44), to(#c00)); }

/* /u/UID/: basicinfo */
.basicinfo th {
	text-align: left;
	font-weight: bold;
	vertical-align: top;
	width: 80px;
	padding: 0.3em 0;
}
.basicinfo td {
	vertical-align: top;
	padding: 0.3em 0;
}
.basicinfo .nested {
	width: 75px;
	font-style: italic;
}

/* /u/UID/: graphs */
.graphs .graphoption {
	margin: 0;
}
.graphs .realgraph {
	width: 100%;
	height: 400px;
}
.graphs .ui-tabs h3 {
	display: none;
}

/* /u/UID/m/: musiclist */
.musiclist table {
	border-collapse: collapse;
}
.musiclist tr {
	cursor: pointer;
}
.musiclist th {
	width: 260px;
	text-align: left;
	font-weight: bold;
	vertical-align: middle;
	padding: 0.3em 0;
}
.musiclist th a {
	color: black;
	text-decoration: none;
}
.musiclist th a:hover, .musiclist th a:active {
	color: black;
	text-decoration: underline;
}
.musiclist th, .musiclist td {
	border-top: 0.3em solid white;
}
.musiclist .more td {
	border-top: none;
}
.musiclist .status-noplay th, .musiclist .status-failed th {
	text-decoration: line-through;
}
.musiclist .status-noplay td {
	text-align: right;
}
.musiclist .rating {
	font-size: 200%;
	text-align: center;
	font-weight: bold;
	letter-spacing: -3px;
}
.musiclist .maxscore {
	width: 110px;
	text-align; left;
}
.musiclist .maxcombo {
	width: 120px;
	text-align: center;
}
.musiclist .nplays {
	width: 110px;
	text-align: right;
}
.musiclist .more td {
	text-align: center;
}
.musiclist .more td img {
	float: right;
	margin-left: 6px;
}
.musiclist .status-fullcombo .maxcombo, .musiclist .status-excellent .maxcombo {
	font-weight: bold;
	color: red;
}
.musiclist .status-excellent .maxscore {
	font-weight: bold;
	color: blue;
}
.musiclist#BASIC .status-noplay, .musiclist#BASIC .status-noplay a, .musiclist#BASIC .status-failed, .musiclist#BASIC .status-failed a { color: #9c9; }
.musiclist#ADVANCED .status-noplay, .musiclist#ADVANCED .status-noplay a, .musiclist#ADVANCED .status-failed, .musiclist#ADVANCED .status-failed a { color: #cc9; }
.musiclist#EXTREME .status-noplay, .musiclist#EXTREME .status-noplay a, .musiclist#EXTREME .status-failed, .musiclist#EXTREME .status-failed a { color: #c99; }
.musiclist#BASIC tr.hovering { background: #dfd; }
.musiclist#ADVANCED tr.hovering { background: #ffd; }
.musiclist#EXTREME tr.hovering { background: #fdd; }
.musiclist#BASIC .status-noplay small, .musiclist#BASIC .status-failed small { color: #ada; }
.musiclist#ADVANCED .status-noplay small, .musiclist#ADVANCED .status-failed small { color: #dda; }
.musiclist#EXTREME .status-noplay small, .musiclist#EXTREME .status-failed small { color: #daa; }
.musiclist#BASIC th small, .musiclist#BASIC .rating { color: #696; }
.musiclist#ADVANCED th small, .musiclist#ADVANCED .rating { color: #996; }
.musiclist#EXTREME th small, .musiclist#EXTREME .rating { color: #966; }

/* /u/UID/m/MID: musicinfo */
.musicinfo .titleimg {
	float: right;
	border: 1px solid black;
	margin: -2.5em 0 10px 0;
}
.musicinfo table {
	width: 458px;
	line-height: 1;
	border-collapse: collapse;
}
.musicinfo th {
	text-align: left;
	font-weight: bold;
	vertical-align: top;
	width: 90px;
	padding: 0.4em 0;
}
.musicinfo td {
	padding: 0.4em 0.2em;
}
.musicinfo .BASIC { background: #dfd; }
.musicinfo .ADVANCED { background: #ffd; }
.musicinfo .EXTREME { background: #fdd; }
.musicinfo tr.axes td {
	font-style: italic;
	border-bottom: 0.4em solid white;
}
.musicinfo tr.maxscore td.status-excellent {
	font-weight: bold;
	color: blue;
}
.musicinfo tr.maxrating td {
	font-size: 200%;
	font-weight: bold;
	letter-spacing: -3px;
	padding: 0 0.1em 0.2em 0.1em;
}
.musicinfo tr.maxcombo td.status-fullcombo, .musicinfo tr.maxcombo td.status-excellent {
	font-weight: bold;
	color: red;
}
.musicinfo .maxrating .BASIC { color: #696; }
.musicinfo .maxrating .ADVANCED { color: #996; }
.musicinfo .maxrating .EXTREME { color: #966; }

/* /u/UID/achievement: achievement */



/* Korean specific */
body.lang-ko {
	font-family: "Helvetica Neue", "Lucida Grande", "Hiragino Kaku Gothic Pro",
		"나눔고딕", "NanumGothic",
		"돋움", "Dotum", "Tahoma", "メイリオ", "Meiryo", "MS UI Gothic", "ＭＳ Ｐゴシック",
		"MS Gothic", "IPAUIGothic", "IPAPGothic", sans-serif;
}
body.lang-ko .gauge,
body.lang-ko .musiclist table,
body.lang-ko .musicinfo .maxrating td {
	font-family: "Helvetica Neue", "Lucida Grande", "Tahoma",
		"Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS UI Gothic", "ＭＳ Ｐゴシック",
		"MS Gothic", "IPAUIGothic", "IPAPGothic", sans-serif;
}
body.lang-ko em,
body.lang-ko .basicinfo .nested,
body.lang-ko .musicinfo tr.axes td {
	font-style: normal;
	text-decoration: underline;
}
body.lang-ko .basicinfo th {
	width: 95px;
}