Common.css

/* CSS placed here will be applied to all skins */
/* This governs the sections on the Community portal */
.cpbox {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.cpbox #admins {
    box-sizing: border-box;
    width: calc(33% - 10px);
    margin: 5px;
    flex-grow: 1;
    min-width: 300px;
}

.cpbox #help {
    box-sizing: border-box;
    width: calc(67% - 10px);
    margin: 5px;
    flex-grow: 1;
}

/* Template documentation styles */
/* If modifying these styles, be sure to update the mobile skin! */
.doc {
    margin: 0em auto 1em;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}

.doc-header {
    padding-bottom: 3px;
    border-bottom: 1px solid #BDCAC3;
    margin-bottom: 1ex;
}

.doc-footer {
    margin: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid #BDCAC3;
    border-radius: 1em;
    padding: 1em;
}

/*********************
/* Front page styles *
/*********************/
.lidheader {
    background: transparent url(https://static.wikia.nocookie.net/letitdie_gamepedia/images/a/a6/Header.png/revision/latest) repeat-x;
}

/******************
/* General styles *
/******************/
.contentbox {
  border: 1px solid #aaaaaa;
  background: #eeeeee;
  color: #333333;
  margin: 0 0 10px 0;
  padding: 3px 6px;
  overflow: auto;
}

span.bullet {
  background: transparent no-repeat center 60%;
  width: 9px;
  font-size: 11px;
  vertical-align: baseline;
}

.dablink {
  padding: 2px 36px 10px 36px;
  font-style: italic;
}

span.ghost {
  color: #777777; /* For any text that appear fainter for some reason */
}

.columns {
  padding: 0;
  margin: 10px 0 0 0;
  overflow: hidden;
}

.columns .leftcol {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
}

.columns .centercol {
  float: left;
  margin: 0;
  padding: 0;
}

.columns .rightcol {
  float: right;
  width: 50%;
  margin: 0;
  padding: 0;
}

/********************
 * Main Page Layout *
 ********************/
/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */
/* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */
.desktopleft {
    text-align: left;
}

.desktopcenter {
    text-align: center;
}

.desktopright {
    text-align: right;
}

/* Front page structure */
.fpbox {
  margin:.5em;
}

.fpbox .heading {
  font-weight:bold;
  font-size:125%;
  padding:.25em .5em
}

.fpbox .body {
  padding:.5em;
}

.multi-column {
    display:flex;
    flex-flow:row wrap;
}

.multi-column .column {
    margin:5px;
    flex:1;
}

.fpbox#gameplay {grid-area:a;}
.fpbox#about {grid-area:b;}
.fpbox#twitter {grid-area:c;}
.fpbox#videos {grid-area:d;}
.fpbox#roadmap {grid-area:e;}
.fpbox#currentEvents {grid-area:f;}
.fpbox#daily {grid-area:g;}
.fpbox#tdmSeason {grid-area:h;}
.fpbox#hernia {grid-area:i;}
.fpbox#chargers {grid-area:j;}
.fpbox#seasonQuests {grid-area:k;}
.fpbox#weeklyQuests {grid-area:l;}
.fpbox#discord {grid-area:m;}

.fp-container {
  display:grid;
	grid-template-areas: "a" "c" "b" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m";
	grid-template-columns: 100%;
}

@media screen and (min-width:990px) {
    .fp-container {
        grid-template-areas: "a a a a" "b b c c" "d d e e" "f f g g " "h h i i" "j j k k" "l l l l" "m m m m";
        grid-template-columns: 25%;
    }
}
@media screen and (min-width:1350px) {
    .fp-container {
        grid-template-areas: "a a a a a c" "b b b b b c" "d d d e e e" "f f g g g g" "h h i i j j" "k k l l m m";
        grid-template-columns: calc(100% / 6);
    }

    #daily .body {
        display:flex;
        justify-content:space-evenly;
    }
}

.fpbox .rotating-content {
  max-width: 100%;
  white-space: normal !important;
  display:inline-table;
  vertical-align:top;
}

.fpbox img:not(.widget-member-avatar-img),
table.rotating-content img {
  max-width:100%;
  height:auto;
}

/* Auto-resize front page video to fit smaller columns */
.fpbox .embedvideowrap {
    width: 100%!important;
    max-width: 480px;
    margin: 0 auto;
}

.fpbox .embedvideowrap iframe {
    width: 100%!important;
}

.material-link {
	display: inline-block;
}
.material-link:not(:last-child)::after {
	content: ",";
}