GW2Wiki:Proyectos/CSS/individual pages- vector

/** -------- INDIVIDUAL PAGES -------- **/
/** MAIN PAGE **/
.mainpage-background-wrapper {
  overflow-x: hidden;
  background: url("/images/8/84/Main_page_background_left_(Secrets_of_the_Obscure).png") top +50px left -30px/auto 600px no-repeat,
      url("/images/3/38/Main_page_background_right_(Secrets_of_the_Obscure).png") bottom +0px right -375px/auto 600px no-repeat,
      #FFF;
}

body.action-view.page-Main_Page #content,
body.action-view.page-Main_Page_editcopy #content {
  padding: 0em 0em 1.2em 0em;
}

.mainpage-banner > p {
  font-family: EasonPro, Helvetica, Arial, sans-serif;
  font-size: 1.8375em;
  text-align: center;
}

.mainpage-banner > p > span {
  position: relative;
  bottom: 2px;
}

.mainpage-banner,
.mainpage-cell,
#editcopylink {
  background: rgba(255, 255, 255, 0.85);
}

#mainpage-content {
  font-family: CronosPro, Arial, Helvetica, sans-serif;
  font-size: 1.225em;
}

.mainpage-cell-wrapper {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: wrap;
  justify-content: center;
  max-width: 96em;
  margin: 0 auto;
  padding-right: 0.5em;
}

.mainpage-cell {
  margin: 0.5em 0em 0em 0.5em;
  padding: 0.5em;
  width: 21em;
  border: 1px solid white;
  box-sizing: border-box;
}

.mainpage-cell.mainpage-cell-double {
  width: 42.5em;
}

.mainpage-cell h2 {
  line-height: 1.5em;
  font-size: 1.75em;
  margin: 0em 0em 0.5em;
}

.mainpage-cell a {
  white-space: nowrap;
}

.mainpage-cell a.external {
  white-space: normal;
}

.mainpage-cell dl {
  margin-top: 0;
  margin-bottom: 0;
}

.mainpage-featured-images {
  overflow-x: hidden;
}

#editcopylink {
  font-size: 0.8em;
  font-style: italic;
  text-align: right;
  margin-top: 1em;
}

#editcopylink span {
  margin-right: 2em;
}

/* Hide right background image if it would interfere with left image */
@media only screen and (max-width: 70em) {
  .mainpage-background-wrapper {
      background: url("/images/8/84/Main_page_background_left_(Secrets_of_the_Obscure).png") top +100px left 0px/auto 800px no-repeat,
          #FFF;
  }

}

/* Hide featured images and set cells to full width if page width is less than two columns wide */
@media only screen and (max-width: 54.5em) {
  .mainpage-featured-images {
      display: none;
  }

  .mainpage-cell,
  .mainpage-cell:first-of-type {
      width: 100%;
  }
}