body,p,h1,h2,h3,h4,h5,h6,form {
	margin:0;
	padding:0;
}

.warning {
	color: #ff0000;
	font-size: 20px;
}

.info {
	color: #0000ff;
	font-size: 20px;
}

body {
	text-align: center;
	margin: 0 0 10px 0;
	background-color: #ccffcc;
}

ul {
	list-style-type: none;
}

table {
	margin: 0 auto;
	background-color: white;
	border: 1px #333 solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

table.historyTable {
	border-collapse: collapse;
}

table.historyTable thead {
	text-align: center;
	font-weight: bold;
	background-color: #ddd;
}

table.historyTable td {
	padding: 4px;
}

table.historyTable thead td {
	border-top: 1px black solid;
	border-bottom: 1px black solid;
	background: rgb(198,229,255);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2ZTVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzkxZDRmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiMmUyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(198,229,255,1) 0%, rgba(145,212,255,1) 51%, rgba(178,226,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(198,229,255,1)), color-stop(51%,rgba(145,212,255,1)), color-stop(100%,rgba(178,226,255,1)));
	background: -webkit-linear-gradient(top,  rgba(198,229,255,1) 0%,rgba(145,212,255,1) 51%,rgba(178,226,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(198,229,255,1) 0%,rgba(145,212,255,1) 51%,rgba(178,226,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(198,229,255,1) 0%,rgba(145,212,255,1) 51%,rgba(178,226,255,1) 100%);
	background: linear-gradient(top,  rgba(198,229,255,1) 0%,rgba(145,212,255,1) 51%,rgba(178,226,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c6e5ff', endColorstr='#b2e2ff',GradientType=0 );
}

table.historyTable tbody td {
	border-top: 1px #777 solid;
	background: rgb(244,250,255);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZmFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2Q2ZWZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWVlZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(244,250,255,1) 0%, rgba(214,239,255,1) 48%, rgba(209,238,255,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,250,255,1)), color-stop(48%,rgba(214,239,255,1)), color-stop(100%,rgba(209,238,255,1)));
	background: -webkit-linear-gradient(top,  rgba(244,250,255,1) 0%,rgba(214,239,255,1) 48%,rgba(209,238,255,1) 100%);
	background: -o-linear-gradient(top,  rgba(244,250,255,1) 0%,rgba(214,239,255,1) 48%,rgba(209,238,255,1) 100%);
	background: -ms-linear-gradient(top,  rgba(244,250,255,1) 0%,rgba(214,239,255,1) 48%,rgba(209,238,255,1) 100%);
	background: linear-gradient(top,  rgba(244,250,255,1) 0%,rgba(214,239,255,1) 48%,rgba(209,238,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4faff', endColorstr='#d1eeff',GradientType=0 );
}

/*------ Index ------*/
#index {

}

#index p {
	margin-bottom: 5px;
}

/*------ Login ------*/
#login {
	margin: 10px;
}

#login table.loginTable {
	border: 1px #333333 solid;
	padding: 10px;
	margin-bottom: 10px;
}

/*------ NewUser ------*/
#newUser {
	margin: 10px;
}

#newUser table.newUserTable {
	border: 1px #333333 solid;
	padding: 10px 10px 0 10px;
	margin-bottom: 10px;
}

/*------ User ------*/
#user {

}

table.userTable {
	border: 1px #333333 solid;
	border-collapse: collapse;
}

table.userTable td {
	border: 1px #333333 solid;
}

table.userTable th {
	border: 1px #333333 solid;
	background-color: #dddddd;
}

/*------ Entry ------*/
#entry {
	margin: 10px;
}

table.entryTable {
	border: 1px #333333 solid;
	padding: 10px 10px 0 10px;
	margin-bottom: 10px;
}

/*------ Edit ------*/
#edit {
	margin: 10px;
}

/*------ Menu -------*/
#menuBox {
	width: 1006px;
	height: 51px;
	margin: 12px auto;
	padding: 0;
	line-height: 51px;
	font-size: 25px;
	text-align: center;
}

#menuBox a.menuLink{
	padding: 13px 5px 13px 5px;
	margin: 0 3px 0 5px;
	border: 1px black solid;
	border-radius: 3px;
	background-color: #aaffaa;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	text-decoration: none;
	color: black;
	-webkit-box-shadow: 0px 5px 15px rgba(30, 30, 30, 0.5);
	-moz-box-shadow:    0px 5px 15px rgba(30, 30, 30, 0.5);
	box-shadow:         0px 5px 15px rgba(30, 30, 30, 0.5);
}

#menuBox a.menuLink:HOVER {
	background-color: #ccffcc;
	color: #555;
}



/*------ ShowGraph ------*/
#titleBox{
	width: 100%;
	height: 75px;
	line-height: 75px;
	background: rgb(0,138,0);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOGEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iIzUxYzY1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc4JSIgc3RvcC1jb2xvcj0iIzgzYzc4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iI2I0ZGRiNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(0,138,0,1) 0%, rgba(81,198,81,1) 46%, rgba(131,199,131,1) 78%, rgba(180,221,180,1) 98%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,138,0,1)), color-stop(46%,rgba(81,198,81,1)), color-stop(78%,rgba(131,199,131,1)), color-stop(98%,rgba(180,221,180,1)));
	background: -webkit-linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(81,198,81,1) 46%,rgba(131,199,131,1) 78%,rgba(180,221,180,1) 98%);
	background: -o-linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(81,198,81,1) 46%,rgba(131,199,131,1) 78%,rgba(180,221,180,1) 98%);
	background: -ms-linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(81,198,81,1) 46%,rgba(131,199,131,1) 78%,rgba(180,221,180,1) 98%);
	background: linear-gradient(top,  rgba(0,138,0,1) 0%,rgba(81,198,81,1) 46%,rgba(131,199,131,1) 78%,rgba(180,221,180,1) 98%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008a00', endColorstr='#b4ddb4',GradientType=0 );
}

#mainBox {
	width: 1080px;
	margin: 0 auto;
}

#showGraph {
	width: 880px;
	float: left;
}

#showGraph p {
	margin-top: 3px;
	margin-bottom: 10px;
}

#showGraph ul {
	margin: 0;
	padding: 0;
	text-align: left;
}

#showGraph li {
	display: inline;
	margin: 0 6px;
}

#showGraph table.graphTable {
	border: 2px #666666 solid;
	margin: 20px auto 10px auto;
	padding: 2px 15px;
	width: 850px;
}

#showGraph .graphTitle {
	border: 3px #444444 solid;
	padding: 5px;
	line-height: 35px;
	font-size: 20px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	webkit-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.7);
	-moz-box-shadow:    0px 2px 4px rgba(50, 50, 50, 0.7);
	box-shadow:         0px 2px 4px rgba(50, 50, 50, 0.7);
}

#showGraph table.showTable {
	border-collapse: collapse;
	border: 2px #222222 solid;
	font-size: 15px;
	line-height: 20px;
}

#showGraph table.showTable td, table.showTable th{
	border: 1px #333333 solid;
}

#showGraph table.showTable th {
	border-bottom: 2px #333333 solid;
}

#showGraph table.showTable th{
	background-color: #DDDDDD;
}

#showGraph table.showTable tr.jpop {
	background-color: #48D1D2;
}

#showGraph table.showTable tr.jpop td{
	background-image: url("img/jpop_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}

#showGraph table.showTable tr.anime {
	background-color: #F46B00;
}

#showGraph table.showTable tr.anime td{
	background-image: url("img/anime_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}
#showGraph table.showTable tr.doyo {
	background-color: #EE4C99;
}

#showGraph table.showTable tr.doyo td{
	background-image: url("img/doyo_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}
#showGraph table.showTable tr.variety {
	background-color: #A0C500;
}

#showGraph table.showTable tr.variety td{
	background-image: url("img/variety_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}

#showGraph table.showTable tr.classic {
	background-color: #CF8400;
}

#showGraph table.showTable tr.classic td{
	background-image: url("img/classic_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}

#showGraph table.showTable tr.gm {
	background-color: #A68FE6;
}

#showGraph table.showTable tr.gm td{
	background-image: url("img/gm_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}

#showGraph table.showTable tr.original {
	background-color: #E63B00;
}

#showGraph table.showTable tr.original td {
	background-image: url("img/original_back.png");
	background-position: bottom;
	background-repeat: repeat-x;
}

#showGraph table.showTable img {
	width: 20px;
	height: 20px;
}

#subBox {
	width: 200px;
	float: left;
}

#subBox table.userTable {
	width: 185px;
	margin: 0 auto 10px auto;
	font-size: 80%;
}

#subBox table.userTable ul {
	padding: 0;
	margin: 0;
}

#subBox table.userTable li {
	padding: 0;
	margin: 4px 0 4px 2px;
}

#subBox table.userTable img{
	margin: 0 auto;
}

#footerBox {
	width: 1100px;
	clear: left;
	line-height: 30px;
	margin: 0 auto;
	padding-bottom: 15px;
}

/*------ Help ------*/
#help {
	text-align: left;
	padding-bottom: 20px;
	margin: 5px;
}

#help h2 {
	margin-top: 25px;
}

#help p {
	margin: 2px 0;
}

#help ol {
	margin: 0;
	pdding: 0;
}

#help ul {
	padding-left: 15px;
}

#help ul.child , #help ol.child{
	font-size: 15px;
}

/*------ User List -----*/
#user_list {
	width: 684px;
	margin: 0 auto;
}

.user_box {
	border: 1px #525 solid;
	width: 320px;
	height: 165px;
	margin: 10px;
	float: left;
	background-color: #afa;
}

.user_box .name {
	width: 290px;
	height: 25px;
	margin: 0 10px;
	line-height: 25px;
	font-size: 160%;
	text-align: left;
}

.user_box img.donder_image{
	border:1px black solid;
	margin: 2px;
	float: left;
}

.user_box .side {
	width: 172px;
	height: 40px;
	line-height: 40px;
	float: left;
	margin: 3px 5px;
	background-color: #efe;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.user_box img.crown {
	margin: 7px 2px;
	float: left;
}

.user_box .side .in{
	width: 86px;
	height: 40px;
	float: left;
}

.user_box .side .in .text {
	height: 40px;
	line-height: 40px;
	float: left;
}

/*----- Music Detail -----*/
#musicContent h2.title {
	border: 3px #444444 solid;
	padding: 5px;
	line-height: 35px;
	font-size: 30px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	background: rgb(252,243,159);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZjM5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iI2YxZGEzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(252,243,159,1) 0%, rgba(241,218,54,1) 67%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,243,159,1)), color-stop(67%,rgba(241,218,54,1)));
	background: -webkit-linear-gradient(top,  rgba(252,243,159,1) 0%,rgba(241,218,54,1) 67%);
	background: -o-linear-gradient(top,  rgba(252,243,159,1) 0%,rgba(241,218,54,1) 67%);
	background: -ms-linear-gradient(top,  rgba(252,243,159,1) 0%,rgba(241,218,54,1) 67%);
	background: linear-gradient(top,  rgba(252,243,159,1) 0%,rgba(241,218,54,1) 67%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf39f', endColorstr='#f1da36',GradientType=0 );
}

#musicContent h3.star {
	line-height: 25px;
	font-size: 20px;
}

#musicContent h3.genre {
	line-height: 25px;
	font-size: 20px;
}

#yourScore {

}

#yourScore .playDataArea {
	width: 246px;
	height: 20px
	line-height: 20px;
	font-size: 110%;
	margin: 8px 13px;
	padding: 2px 2px 2px 4px;
	float: left;
	background-color: #eeeeee;
	border: 1px #aaaaaa solid;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#yourScore .playDataArea .left {
	text-align: left;
	width: 140px;
	float: left;
}

#yourScore .playDataArea .right{
	width: 75px;
	float: left;
}

#yourScore .link {
	clear: left;
}

#recentUserList table.graphTable {
	border: 0 black solid;
}

/*----- showGraph -----*/

.infoBox {
	border: 2px #666666 solid;
	margin: 20px auto 10px auto;
	padding: 2px 7px;
	width: 850px;
	background-color: white;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.infoBox h2.title {
	border: 3px #444444 solid;
	padding: 5px;
	line-height: 35px;
	font-size: 30px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	webkit-box-shadow: 0px 2px 4px rgba(50, 50, 50, 0.7);
	-moz-box-shadow:    0px 2px 4px rgba(50, 50, 50, 0.7);
	box-shadow:         0px 2px 4px rgba(50, 50, 50, 0.7);
	margin: 2px 30px;
}

#clearCondition .graphBox {
	width: 390px;
	height: 186px;
	background-color: #aaffaa;
	margin: 3px;
	float: left;
	margin: 6px 12px;
	border: 2px #44ff44 solid;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}

#clearCondition .graphBox h2{
	text-align: center;
	line-height: 32px;
	text-decoration: underline;
	font-style: italic;
}

#clearCondition .graphBox .valueBox {
	width: 210px;
	float: left;
}

#clearCondition .graphBox .valueBox .playDataArea {
	height: 16px;
	line-height: 16px;
	margin: 8px 4px;
	padding: 5px;
	border: 1px #666 solid;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#clearCondition .valueBox .gold {
	background-color: ffff00;
}

#clearCondition .valueBox .silver {
	background-color: c0c0c0;
}

#clearCondition .valueBox .notClear {
	background-color: ff0000;
}

#clearCondition .valueBox .notPlay {
	background-color: 0affff;
}

#clearCondition .graphBox .valueBox .playDataArea .left{
	width: 85px;
	float: left;
	padding-left: 3px;
}

#clearCondition .graphBox .valueBox .playDataArea .right{
	width: 100px;
	float: left;

}

#clearCondition .graphBox .pictBox {
	width: 160px;
	float: left;
}

#clearCondition .graphBox .pictBox img {
	border: 1px black solid;
}

#levelChart , #genreChart {
	float:left;
	margin: 2px 6px;
}