body {
  font-size: 14px;
  background-image: url("../back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color: #333333;
  margin: 0;
  background-color: black;
  background-position: top center;
}

a:visited, a:link {
  color: #cfcfcf;
}

a:hover {
  opacity: 0.6;
}

.en {
  display: none;
}

.ja {
  display: inline;
}

h2 {
  border-left: 12px tomato solid;
  border-bottom: 2px tomato solid;
  padding: 10px;
}

h3 {
  margin-top: 5px;
}

hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333333;
  color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 15px;
  z-index: 10000;
}

.header > div {
  width: 900px;
  margin: 0 auto;
}

.title {
  margin-left: 10px;
  margin-right: 30px;
  font-size: 23px;
}

.language {
  text-decoration: underline;
  cursor: pointer;
  margin-left: 50px;
}

.content {
  margin-top: 44px;
  background-size: contain;
}

.content > div {
  margin: 0 auto;
  width: 900px;
  min-height: 80vh;
}

.searchWrapper {
  text-align: center;
  padding-top: 20px;
  margin-bottom: 20px;
}

.searchTextBox {
  font-size: 23px;
  width: 300px;
  height: 25px;
  padding: 5px;
}


.suggest {
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #CCCCFF;
  font-size: 90%;
  /*width: 200px;
  font-size: 20px;*/
  z-index: 1000;

  text-align: left;
}

.suggest div {
  display: block;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.suggest .select{ /* キー上下で選択した場合のスタイル */
  color: #FFFFFF;
  background-color: #3366FF;
}

.suggest .over{ /* マウスオーバ時のスタイル */
  background-color: #99CCFF;
}

.suggest img {
  width: 30px;
  height: 30px;
  position: relative;
  top: 4px;
}

.home {
  color: #cfcfcf;
  background-color: rgba(37, 43, 35, 0.48);

}

.champImageListWrapper {
  padding: 20px;
}

.champImageList {
  padding: 3px;
}

.champImageList > li {
  display: inline-block;
  cursor: pointer;
  margin: 5px;
}

.champImageList > li:hover {
  opacity: 0.8;
}

.champInfoWrapper {
  color: #cfcfcf;
  background-size: contain;
  background-blend-mode: multiply;
  /*background-color: #444444;*/
  background-repeat: no-repeat;
}

.champInfo {
  padding: 20px;
}

.table {
  min-height: 510px;
}

.champTableLeft {
  border-right: 2px #2a2a2a solid;
  width: 150px;
  position: absolute;
}

.champTableLeft img {
  width: 120px;
  height: 120px;
}

.name {
  text-align: center;
}

.champName {
  font-size: 40px;
}

.champTitle {
  font-size: 23px;
  margin-left: 40px;
}

.champTableRight {
  padding-left: 190px;
}

.champTableRight > table {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.champTableRight > table td {
  padding: 6px;
}

.champTableRight > table tr:nth-child(even) {
  background-color: rgba(85, 85, 85, 0.69);
}

.champTableRight > table tr:nth-child(odd) {
  background-color: rgba(43, 43, 43, 0.69);
}

.skins {
  margin-top: 50px;
}

.skins > img {
  width: 75px;
  margin: 4px 4px;
}

.changeHistories {
  padding: 20px;
}

.history {
  padding: 30px;
  margin-bottom: 30px;
  background-color: rgb(88, 88, 88);
  display: none;
}

.history a {
  color: #a4a6ac;
}

.showMoreHistory, .showAllHistory, .showTextboxHelp {
  cursor: pointer;
  text-decoration: underline;
}

.pbe {
  border-left: rgb(173, 94, 94) solid 5px;
}


.live {
  border-left: rgb(95, 136, 173) solid 5px;
}

.spell {
  padding: 20px;
  padding-left: 40px;
  background-color: rgb(88, 88, 88);
}

.spells {
  padding-left: 20px;
}

.cost {
  color: #a4a6ac;
}

.spellDisc {
  padding-left: 35px;
}

.colorFF8C00 {
  color: #FF8C00;
}

.color99FF99 {
  color: #99FF99;
}

.color0000FF {
  color: #0000FF;
}

.colorFF0000 {
  color: #FF0000;
}

.colorFFD700 {
  color: #FFD700;
}

.colorFFE076 {
  color: #FFE076;
}

.colorFF3300 {
  color: #FF3300;
}

.colorFF9900 {
  color: #FF9900;
}

.tips {
  padding-left: 20px;
}

.tip {
  padding: 30px;
  margin-bottom: 30px;
  background-color: rgb(88, 88, 88);
}

.lore {
  padding-left: 40px;
  padding-right: 20px;
}

.footer {
  height: 240px;
  background-color: #333333;
  width: 100%;
}

.footer > div {
  margin: 0 auto;
  margin-top: 40px;
  width: 900px;
  color: #cfcfcf;
  padding: 20px;
}

.footer a {
  color: #cfcfcf;
}

.footer hr {
  width: 600px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* for official site */
.history .removed {
  background-color: tomato;
}

.history .attribute:after {
  margin-right: 10px;
  content: "：";
}

.history .new {
  background-color: #4f801a;
}