ARK Wiki/styles-legacy.css

.fpmain {

   width: 100%;
   overflow: hidden;
   z-index: 1;

}

1. fp-container, #fp-container * {

   box-sizing: border-box;

} /* Grid layout */

1. fp-container {

   display: grid;
   grid-template-areas: "a" "b" "c" "d" "e";
   grid-template-columns: 1fr;
   column-gap: 10px;

} @media screen and (min-width: 990px) {

   #fp-container {
       grid-template-areas: "a a" "b b" "d c" "d c" "e e";
       grid-template-columns: repeat(2, minmax(0, 1fr));
   }

} @media screen and (min-width: 1350px) {

   #fp-container {
       grid-template-areas: "a a a" "b c d" "e c d";
       grid-template-columns: repeat(3, minmax(0, 1fr));
   }

}

1. fpwelcome { grid-area: a; }
2. fp-1 { grid-area: b; }
3. fp-2 { grid-area: c; }
4. fp-3 { grid-area: d; }
5. fp-4 { grid-area: e; }

.fp-section {

   display: flex;
   flex-direction: column;
   overflow: hidden;

} .fp3col {

   display: flex;
   flex-flow: row wrap;

} .fp3col > div {

   flex: 1 0 33%;
   min-width: 10em;

}

/* Boxes */ .fpbox {

   width: 100%;
   border: 1px solid var(--fp-box-border-color);
   box-shadow: 0 2px 5px var(--fp-box-shadow-color);
   background: var(--fp-box-background-color);
   color: var(--content-text-color);
   margin: 5px 0;
   padding: 8px 1.25em;
   border-radius: 2px;
   box-sizing: border-box;

} .fp-section > .fpbox:last-child {

   flex-grow: 1;

} .fpbox.plain {

   border: none;
   box-shadow: none;
   background: transparent;
   padding: 6px 10px;

} .fpbox .mainheading {

   border: none;
   border-bottom: 1px solid var(--fp-box-mainheading-border-color);
   color: var(--fp-box-mainheading-text-color);
   font-size: 150%;
   font-weight: bold;
   margin: 0 0 10px 0;
   padding: 0 0 5px 0;
   overflow: auto;

} .fpbox .heading {

   border: none;
   border-bottom: 1px solid var(--fp-box-heading-border-color);
   color: var(--fp-box-heading-text-color);
   font-size: 132%;
   margin: 0 0 10px 0;
   padding: 0 0 5px 0;
   overflow: auto;

} .fpmain .columns .leftcol {

   width: 100%;
   margin: 0;
   padding: 0;

} .fpmain .columns .rightcol {

   width: 100%;
   margin: 0;
   padding: 0;

} .fpbox .fpbody > ul {

   margin-left: 0;

}

/* Welcome box */

1. fpwelcome {

   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;

}

1. fpwelcometext {

   text-align: center;
   padding: 8px 5px 8px 0;
   max-width: 650px;
   flex: 1 1 650px;

} @media screen and (min-width: 2040px) {

   #fpwelcometext {
       max-width: 850px;
   }

}

1. fpsociallinks,
2. fpplatformlinks {

   flex: 1 1;
   max-width: 900px;
   width: 100%;
   max-width: max-content;

}

1. fpsociallinks {

   padding: 8px 7px 8px 0;
   flex-basis: 270px;

}

1. fpplatformlinks {

   padding: 8px 0;
   flex-basis: 435px;

}

@media screen and (max-width: 1375px) {

   #fpwelcome {
       justify-content: center;
   }

}

/* Welcome box links */

1. fpsociallinks {

   padding-right: 1em;

}

1. fpsociallinks .fp-icon-flex {

   margin: 0 4px;

} .fp-icon-container {

   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   font-size: 12px;
   line-height: 1;

} .fp-icon-flex {

   display: flex;
   justify-content: center;
   align-items: center;
   margin: 7px 6px 0;

} .fp-icon-flex * {

   vertical-align: middle;

} .fp-icon-flex > div {

   margin-left: 4px;

} .fp-icon-flex > div > * {

   display: block;

} .fp-icon-flex a.external {

   background: none;

} .fp-icon-flex strong {

   margin-top: 3px;
   font-size: 1.125em;

}

/* Other */ .fpimagelist ul {

   list-style-type: none;
   list-style-image: none;

}

.fpvideos {

   margin: 0 auto;
   overflow: hidden;
   text-align: center;

}

.fpvideo {

   display: inline-block;
   margin: 0 5px;

}

img.fpWideImage {

   max-width: 100%;
   height: auto;

} /* Hide paragraphs with only a line break after a box */ .fpbox + p > br { display: none; } /* Force minimum height for the Twitter feed */

1. fptweets .twitter-timeline.twitter-timeline-rendered {

   width: 100% !important;

}

1. fptweets .fpbody {

   min-height: 400px;

}