MediaWiki:Wikia.css

.HomeMenu { padding: 70px; background-image: url("https://static.wikia.nocookie.net/the_archive_of_mystic_records/images/0/04/MainMenu_Background.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }

.BannerLeft { width: 128px; height: 115px; background-image: url("https://images.wikia.com/the_archive_of_mystic_records/images/1/18/Banner_Left.png"); background-size: contain; }

.BannerCenter { height: 115px; background-image: url("https://images.wikia.com/the_archive_of_mystic_records/images/d/d2/Banner_Center.png"); background-size: contain; display: flex; align-items: center; }

.BannerRight { width: 173px; height: 115px; background-image: url("https://images.wikia.com/the_archive_of_mystic_records/images/4/4a/Banner_Right.png"); background-size: contain; }

.BannerTitle { color: #d1bd84; text-decoration: none; text-shadow: 0px 0px 5px #261702; font-size: 20px; margin: 10px }

.IncompleteImage { }

box-sizing: border-box; } /* Set a background color */ body { background-color: #474e5d; font-family: Helvetica, sans-serif; } /* The actual timeline (the vertical ruler) */ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline::after { content: ''; position: absolute; width: 6px; background-color: #61420a; top: 0; bottom: 0; left: 50%; margin-left: -3px; } /* Container around content */ .container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } /* The circles on the timeline */ .container::after { content: ''; position: absolute; width: 25px; height: 25px; right: -17px; background-color: #61420a; border: 4px solid #9c7427; top: 15px; border-radius: 50%; z-index: 1; } /* Place the container to the left */ .left { left: 0; } /* Place the container to the right */ .right { left: 50%; } /* Add arrows to the left container (pointing right) */ .left::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid #e8e0cc; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #d9d4ca; } /* Add arrows to the right container (pointing left) */ .right::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid #e8e0cc; border-width: 10px 10px 10px 0; border-color: transparent #d9d4ca transparent transparent; } /* Fix the circle for containers on the right side */ .right::after { left: -16px; } /* The actual content */ .content { padding: 20px 30px; background-color: #d9d4ca; position: relative; border-radius: 6px; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { /* Place the timelime to the left */ .timeline::after { left: 31px; } /* Full-width containers */ .container { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .container::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Make sure all circles are at the same spot */ .left::after, .right::after { left: 15px; } /* Make all right containers behave like the left ones */ .right { left: 0%; } }