.ranking-main-container {
  width: 100%;
  border: 1px solid #dcdcdc;
}
.ranking-main-container > div {
  width: 100%;
  display: table;
}
.ranking-main-container div > * {
  display: table-cell;
}
.ranking-main-container span {
  text-align: center;
  vertical-align: middle;
}
.one-column-row {
  width: 100%;
}
.two-columns-row {
  width: 50%;
}
.three-columns-row {
  width: 33.33%;
}
.four-columns-row {
  width: 25%;
}
.six-columns-row {
  width: 16.66%;
}

.wid12-5 {
	width: 12.5%;
}
.wid15 {
	width: 15%;
}
.wid20 {
	width: 20%;
}
.wid25 {
	width: 25%;
}
.wid35 {
	width: 35%;
}
.wid40 {
	width: 40%;
}

#empty-ranking-sentence {
  text-align: center;
  vertical-align: middle;
}
#empty-ranking-link {
  color: #566e3f;
  text-decoration: underline;
  font-weight: bold;
}

.ranking-first-line-container {
  text-transform: uppercase;
  font-size: 20px;
  font-family: "PT Sans";
  background: #ebeaea;
}
@media only screen and (max-width: 719px) {
  .ranking-first-line-container > span {
    padding: 10px 0px;
  }
}
@media only screen and (min-width: 720px) {
  .ranking-first-line-container > span {
    padding: 10px 20px;
  }
}

.ranking-main-container > .ranking-second-line-container {
  text-transform: uppercase;
  font-size: 13px;
  font-family: "PT Sans";
  background: #ebeaea;
  margin: 15px auto 50px auto;
  width: 95%;
}
@media only screen and (min-width: 720px) {
  .ranking-second-line-container > span {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.ranking-headers-line-container {
  background: #f6f6f6;
  font-weight: bold;
  font-family: Barlow;
}
.ranking-headers-line-container > span {
  border: 1px solid #dcdcdc;
}
@media only screen and (max-width: 719px) {
  .ranking-headers-line-container > span {
    padding: 10px 0px;
  }
}
@media only screen and (min-width: 720px) {
  .ranking-headers-line-container > span {
    padding: 10px 20px;
  }
}

.ranking-content-lines-container > span {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  font-family: "PT Sans";
  font-weight: 400;
  letter-spacing: 0px;
  font-style: normal;
  font-size: 13px;
}
@media only screen and (max-width: 719px) {
  .ranking-content-lines-container > span {
    padding: 10px 0px;
  }
}
@media only screen and (min-width: 720px) {
  .ranking-content-lines-container > span {
    padding: 10px 20px;
  }
}

.selected-ranking-cell {
  border-top: 3px solid #566e3f; 
  background: #ffffff;
}

.ranking-pager {
  text-align: center;
  vertical-align: middle;
  margin: 8px;
}
.ranking-pager span {
  width: 48px;
  height: 48px;
  font-size: 30px;
  border: 1px solid black;
}
.ranking-pager-previous-button {
  float: left;
}
.ranking-pager-next-button {
  float: right;
}
#ranking-factions-background-title {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}
.ranking-faction-background {
	font-size: 16px;
	color: black;
	padding: 8px;
	border: 1px solid black;
}
#ranking-fire-faction-background {
	background-color: red;
	background-image: linear-gradient(to right, #FFC619, #FF1919);
	margin: 0px;
}
#ranking-ice-faction-background {
	background-color: blue;
	background-image: linear-gradient(to right, #1471CC, #73E6E6);
	margin: 0px;
}
#ranking-thunder-faction-background {
	background-color: yellow;
	background-image: linear-gradient(to right, #49F249, #FFFF33, #49F249);
	margin: 0px;
}

.ranking-faction-icon {
	width: 128px;
	height: 128px;
}
.ranking-faction-left-icon {
	float: left;
	margin: 5px 20px 0px 5px;
}
.ranking-faction-right-icon {
	float: right;
	margin: 5px 5px 0px 20px;
}