Added landing view structure and styles.

The landing view will be broken up into subcomponents.
Updated dependencies.

package.json

@@ -33,9 +33,9 @@
     "async": "^3.2.0",
     "discord-rpc": "^3.1.1",
     "electron-updater": "^4.3.1",
-    "fs-extra": "^9.0.0",
+    "fs-extra": "^9.0.1",
     "github-syntax-dark": "^0.5.0",
-    "got": "^11.1.4",
+    "got": "^11.3.0",
     "jquery": "^3.5.1",
     "lodash": "^4.17.15",
     "moment": "^2.26.0",
@@ -47,17 +47,17 @@
     "winston": "^3.2.1"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.10.1",
     "@types/adm-zip": "^0.4.33",
     "@types/async": "^3.2.3",
     "@types/chai": "^4.2.11",
     "@types/discord-rpc": "^3.0.4",
     "@types/fs-extra": "^9.0.1",
     "@types/jquery": "^3.3.38",
-    "@types/lodash": "^4.14.152",
+    "@types/lodash": "^4.14.155",
     "@types/mocha": "^7.0.2",
-    "@types/node": "^12.12.42",
-    "@types/react": "^16.9.35",
+    "@types/node": "^12.12.47",
+    "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@types/react-transition-group": "^4.4.0",
@@ -65,18 +65,18 @@
     "@types/tar-fs": "^2.0.0",
     "@types/triple-beam": "^1.3.1",
     "@types/winreg": "^1.2.30",
-    "@typescript-eslint/eslint-plugin": "^3.0.1",
-    "@typescript-eslint/parser": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^3.2.0",
+    "@typescript-eslint/parser": "^3.2.0",
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
-    "electron": "^8.3.0",
-    "electron-builder": "^22.6.1",
+    "electron": "^8.3.1",
+    "electron-builder": "^22.7.0",
     "electron-webpack": "^2.8.2",
     "electron-webpack-ts": "^4.0.1",
-    "eslint": "^7.1.0",
+    "eslint": "^7.2.0",
     "eslint-plugin-react": "^7.20.0",
     "helios-distribution-types": "1.0.0-pre.1",
-    "mocha": "^7.2.0",
+    "mocha": "^8.0.1",
     "nock": "^12.0.3",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
@@ -85,8 +85,8 @@
     "react-transition-group": "^4.4.1",
     "redux": "^4.0.5",
     "rimraf": "^3.0.2",
-    "ts-node": "^8.10.1",
-    "typescript": "^3.9.3",
+    "ts-node": "^8.10.2",
+    "typescript": "^3.9.5",
     "webpack": "^4.43.0"
   },
   "repository": {

src/renderer/components/landing/Landing.css

@@ -0,0 +1,1054 @@
+/*******************************************************************************
+ *                                                                             *
+ * Landing View (Structural Styles)                                            *
+ *                                                                             *
+ ******************************************************************************/
+
+/* Main content container. */
+#landingContainer {
+    height: 100%;
+    position: relative;
+    transition: background 2s ease;
+    overflow-y: hidden;
+}
+
+/* Upper content container. */
+#landingContainer > #upper {
+    position: relative;
+    transition: top 2s ease;
+    top: 0px;
+    height: 77%;
+    display: flex;
+}
+#landingContainer > #upper > #left {
+    display: inline-flex;
+    width: 15%;
+    height: 100%;
+    justify-content: flex-end;
+}
+#landingContainer > #upper > #content {
+    display: inline-flex;
+    width: 70%;
+    height: 100%;
+}
+#landingContainer > #upper > #right {
+    display: inline-flex;
+    width: 15%;
+    height: 100%;
+}
+
+/* Lower content container. */
+#landingContainer > #lower {
+    height: 23%;
+    display: flex;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+#landingContainer > #lower > #left {
+    position: relative;
+    transition: top 2s ease;
+    top: 0px;
+    height: 100%;
+    width: 33%;
+    display: inline-flex;
+    justify-content: center;
+}
+#landingContainer > #lower > #left #content {
+    position: relative;
+    top: 25px;
+    display: inline-flex;
+    line-height: 24px;
+    left: 50px;
+}
+#landingContainer > #lower > #center {
+    position: relative;
+    transition: top 2s ease;
+    top: 0px;
+    height: 100%;
+    width: 34%;
+    display: inline-flex;
+    justify-content: center;
+}
+#landingContainer > #lower > #center #content {
+    position: relative;
+    z-index: 500;
+    transition: top 2s ease;
+    top: 10px;
+}
+#landingContainer > #lower > #right {
+    position: relative;
+    transition: top 2s ease;
+    top: 0px;
+    height: 100%;
+    width: 33%;
+    display: inline-flex;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Landing View (News Styles)                                                  *
+ *                                                                             *
+ ******************************************************************************/
+
+/* Main container. */
+#newsContainer {
+    position: absolute;
+    top: 100%;
+    height: 100%;
+    width: 100%;
+    transition: top 2s ease;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+/* News content container. */
+#newsContent {
+    height: 82vh;
+    width: 100%;
+    display: flex;
+    -webkit-user-select: initial;
+    position: relative;
+}
+
+/* Drop shadow displayed when content is scrolled out of view. */
+#newsContent:before {
+    content: '';
+    background: linear-gradient(rgba(0, 0, 0, 0.25), transparent);
+    width: 100%;
+    height: 5px;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+}
+#newsContent[scrolled]:before {
+    opacity: 1;
+}
+
+/* News article status container (left). */
+#newsStatusContainer {
+    width: calc(30% - 60px);
+    height: calc(100% - 30px);
+    padding: 15px 15px 15px 45px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+}
+
+/* News status content. */
+#newsStatusContent {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+/* News title wrapper. */
+#newsTitleContainer {
+    display: flex;
+    max-width: 90%;
+}
+
+/* News article title styles. */
+#newsArticleTitle {
+    font-size: 18px;
+    font-weight: bold;
+    font-family: 'Avenir Medium';
+    color: white;
+    text-decoration: none;
+    transition: 0.25s ease;
+    outline: none;
+    text-align: right;
+}
+#newsArticleTitle:hover,
+#newsArticleTitle:focus {
+    text-shadow: 0px 0px 20px white;
+}
+#newsArticleTitle:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7;
+}
+
+/* News meta container. */
+#newsMetaContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Date and author wrappers. */
+#newsArticleDateWrapper,
+#newsArticleAuthorWrapper {
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* Date and author shared styles. */
+#newsArticleDate,
+#newsArticleAuthor {
+    display: inline-block;
+    font-size: 10px;
+    padding: 0px 5px;
+    font-weight: bold;
+    border-radius: 2px;
+}
+
+/* Date styles. */
+#newsArticleDate {
+    background: white;
+    color: black;
+    margin-top: 5px;
+}
+
+/* Author styles. */
+#newsArticleAuthor {
+    background: #a02d2a;
+}
+
+/* News article comments styles. */
+#newsArticleComments {
+    margin-top: 5px;
+    display: inline-block;
+    font-size: 10px;
+    color: #ffffff;
+    text-decoration: none;
+    transition: 0.25s ease;
+    outline: none;
+    text-align: right;
+}
+#newsArticleComments:focus,
+#newsArticleComments:hover {
+    color: #e0e0e0;
+}
+#newsArticleComments:active {
+    color: #c7c7c7;
+}
+
+/* Article content container (right). */
+#newsArticleContainer {
+    width: calc(100% - 25px);
+    height: 100%;
+    margin: 0px 0px 0px 25px;
+}
+
+/* Article content styles. */
+#newsArticleContentScrollable {
+    font-size: 12px;
+    overflow-y: scroll;
+    height: 100%;
+    padding: 0px 15px 0px 15px;
+}
+#newsArticleContentScrollable img,
+#newsArticleContentScrollable iframe {
+    max-width: 95%;
+    display: block;
+    margin: 0 auto;
+}
+#newsArticleContentScrollable a {
+    color: rgba(202, 202, 202, 0.75);
+    transition: 0.25s ease;
+    outline: none;
+}
+#newsArticleContentScrollable a:hover,
+#newsArticleContentScrollable a:focus {
+    color: rgba(255, 255, 255, 0.75);
+}
+#newsArticleContentScrollable a:active {
+    color: rgba(165, 165, 165, 0.75);
+}
+#newsArticleContentScrollable::-webkit-scrollbar {
+    width: 2px;
+}
+#newsArticleContentScrollable::-webkit-scrollbar-track {
+    display: none;
+}
+#newsArticleContentScrollable::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
+}
+.bbCodeSpoilerButton {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 16px;
+    transition: 0.25s ease;
+    width: 100%;
+    border-bottom: 1px solid white;
+    padding-bottom: 15px;
+}
+.bbCodeSpoilerButton:hover,
+.bbCodeSpoilerButton:focus {
+    text-shadow: 0px 0px 20px #ffffff, 0px 0px 20px #ffffff, 0px 0px 20px #ffffff;
+}
+.bbCodeSpoilerButton:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+}
+.bbCodeSpoilerText {
+    display: none;
+    padding: 15px 0px;
+    border-bottom: 1px solid white;
+}
+
+
+#newsArticleContentWrapper {
+    width: 80%;
+}
+
+.newsArticleSpacerTop {
+    height: 15px;
+}
+
+/* Div to add spacing at the end of a news article. */
+.newsArticleSpacerBot {
+    height: 30px;
+}
+
+/* News navigation container. */
+#newsNavigationContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+    -webkit-user-select: none;
+    position: absolute;
+    bottom: 15px;
+    right: 0px;
+}
+
+/* Navigation status span. */
+#newsNavigationStatus {
+    font-size: 12px;
+    margin: 0px 15px;
+}
+
+/* Left and right navigation button styles. */
+#newsNavigateLeft,
+#newsNavigateRight {
+    background: none;
+    border: none;
+    outline: none;
+    height: 20px;
+    cursor: pointer;
+}
+#newsNavigateLeft:hover #newsNavigationLeftSVG,
+#newsNavigateLeft:focus #newsNavigationLeftSVG,
+#newsNavigateRight:hover #newsNavigationRightSVG,
+#newsNavigateRight:focus #newsNavigationRightSVG {
+    filter: drop-shadow(0px 0px 2px #fff);
+    -webkit-filter: drop-shadow(0px 0px 2px #fff);
+}
+#newsNavigateLeft:active #newsNavigationLeftSVG .arrowLine,
+#newsNavigateRight:active #newsNavigationRightSVG .arrowLine {
+    stroke: #c7c7c7;
+}
+#newsNavigateLeft:active #newsNavigationLeftSVG,
+#newsNavigateRight:active #newsNavigationRightSVG {
+    filter: drop-shadow(0px 0px 2px #c7c7c7);
+    -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
+}
+#newsNavigateLeft:disabled #newsNavigationLeftSVG .arrowLine,
+#newsNavigateRight:disabled #newsNavigationRightSVG .arrowLine {
+    stroke: rgba(255, 255, 255, 0.75);
+}
+#newsNavigationLeftSVG {
+    transform: rotate(-90deg);
+    width: 15px;
+}
+#newsNavigationRightSVG {
+    transform: rotate(90deg);
+    width: 15px;
+}
+
+/* News error (message) container. */
+#newsErrorContainer {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+#newsErrorFailed {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* News error content (message). */
+.newsErrorContent {
+    font-size: 20px;
+}
+#newsErrorLoading {
+    display: flex;
+    width: 168.92px;
+}
+#nELoadSpan {
+    white-space: pre;
+}
+/* News error retry button styles. */
+#newsErrorRetry {
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    background: none;
+    border: none;
+    outline: none;
+    transition: 0.25s ease;
+}
+#newsErrorRetry:focus,
+#newsErrorRetry:hover {
+    text-shadow: 0px 0px 20px white;
+}
+#newsErrorRetry:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Landing View (Top Styles)                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+/* * *
+* Landing View (Top Styles) | Left Content
+* * */
+
+/* Logo image. */
+#image_seal {
+    height: 70px;
+    width: auto;
+    position: relative;
+    border: 2px solid white;
+    box-sizing: border-box;
+    border-radius: 50%;
+}
+
+/* Logo container styles. */
+#image_seal_container {
+    position: relative;
+    height: 70px;
+    width: 70px;
+    border-radius: 50%;
+    margin-top: 50px;
+}
+
+/* Logo container styles w/ update. */
+#image_seal_container[update]{
+    cursor: pointer
+}
+#image_seal_container[update]:before,
+#image_seal_container[update]:after {
+    cursor: pointer;
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 100%;
+    top: 0%;
+    left: 0%;
+    border-radius: 50%;
+    box-shadow: 0 0 15px #43c628;
+    animation: glow-grow 4s ease-out infinite;
+    background: rgba(0, 0, 0, 0.15);
+}
+#image_seal_container[update]:before {
+    animation-delay: 2s;
+}
+
+/* Update available tooltip styles. */
+#updateAvailableTooltip {
+    cursor: pointer;
+    visibility: hidden;
+    opacity: 0;
+    width: 100px;
+    height: 15px;
+    background-color: rgb(0, 0, 0);
+    color: #fff;
+    text-align: center;
+    border-radius: 4px;
+    padding: 2px;
+    position: absolute;
+    z-index: 1;
+    top: 115%;
+    left: -17.5px;
+    font-family: 'Avenir Medium';
+    font-size: 12px;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+#updateAvailableTooltip::after {
+    content: " ";
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent rgb(0, 0, 0) transparent;
+}
+#image_seal_container[update]:hover #updateAvailableTooltip {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+}
+
+/* Update available animation. */
+@keyframes glow-grow {
+    0% {
+        opacity: 0;
+        transform: scale(1);
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.5);
+        opacity: 0;
+    }
+}
+
+/* * *
+* Landing View (Bottom Styles) | Right Content
+* * */
+
+/*  Wrapper container for top, right content. */
+#rightContainer {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    top: 50px;
+    align-items: flex-start;
+    height: calc(100% - 50px);
+}
+
+/* Right hand user content container. */
+#user_content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    position: relative;
+}
+
+/* User profile avatar container. */
+#avatarContainer {
+    border-radius: 50%;
+    border: 2px solid #cad7e1;
+    box-sizing: border-box;
+    background: rgba(1, 2, 1, 0.5);
+    height: 70px;
+    width: 70px;
+    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
+    overflow: hidden;
+    position: relative;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+/* Avatar edit overlay. */
+#avatarOverlay {
+    opacity: 0;
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.25s ease;
+    font-weight: bold;
+    letter-spacing: 2px;
+    background-color: rgba(0, 0, 0, 0.35);
+    -webkit-user-select: none;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+#avatarOverlay:hover,
+#avatarOverlay:focus {
+    opacity: 1;
+}
+#avatarOverlay:active {
+    background-color: rgba(0, 0, 0, 0.45);
+}
+
+/* User profile name text. */
+#user_text {
+    font-size: 12px;
+    min-width: 135px;
+    font-weight: 900;
+    letter-spacing: 1px;
+    text-shadow: 0px 0px 20px black;
+    position: absolute;
+    right: 95px;
+    text-align: right;
+    -webkit-user-select: initial;
+}
+
+/* Social media icon content container. */
+#mediaContent {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin-top: 25px;
+    height: calc(100% - 95px);
+    width: 70px;
+    align-items: center;
+}
+
+/* Social Media Icon division containers. */
+#internalMedia, #externalMedia {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Container object which wraps an icon to ensure fluid transitions. */
+.mediaContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 27px;
+}
+
+/* Divider bar between the external and internal icons. */
+.mediaDivider {
+    height: 1px;
+    width: 14px;
+    background: rgb(255, 255, 255);
+    margin: 10px 0px;
+}
+
+/* Social media icon shared styles. */
+.mediaSVG {
+    fill: #ffffff;
+    height: 12px;
+    transition: 0.25s ease;
+    cursor: pointer;
+    height: 12px;
+    width: 25px;
+}
+.mediaSVG:hover,
+.mediaURL:focus .mediaSVG,
+.mediaSVG:active {
+    height: 20px;
+}
+
+/* Social media URL shared styles. */
+.mediaURL {
+    outline: none;
+}
+
+/* Internal media button shared styles. */
+.mediaButton {
+    background: none;
+    border: none;
+    padding: 0px;
+    display: flex;
+    align-items: center;
+    outline: none;
+}
+
+#settingsMediaContainer {
+    position: relative;
+}
+
+/* Settings icon colors. */
+#settingsSVG {
+    stroke: #ffffff;
+    height: 15px;
+}
+.mediaButton:hover #settingsSVG,
+.mediaButton:focus #settingsSVG,
+.mediaButton:active #settingsSVG {
+    height: 23px;
+}
+
+/* Settings tooltip styles. */
+#settingsTooltip {
+    visibility: hidden;
+    opacity: 0;
+    width: 75px;
+    height: 20px;
+    background-color: rgba(0, 0, 0, 0.75);
+    text-align: center;
+    border-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    right: 130%;
+    font-size: 12px;
+    line-height: 20px;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+#settingsTooltip::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
+}
+.mediaButton:hover #settingsTooltip,
+.mediaButton:focus #settingsTooltip,
+.mediaButton:active #settingsTooltip {
+    visibility: visible;
+    opacity: 1;
+    transition-delay:0s;
+}
+
+/* Twitter icon colors. */
+#twitterSVG:hover,
+#twitterURL:focus #twitterSVG {
+    fill: #1da1f2;
+}
+#twitterSVG:active {
+    fill: #1b8dd4;
+}
+
+/* Instagram icon colors. */
+#instagramSVG:hover,
+#instagramURL:focus #instagramSVG {
+    fill: url('#instaFill')
+    /*fill: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); */
+}
+#instagramSVG:active {
+    fill: url('#instaFill')
+}
+
+/* Youtube icon colors. */
+#youtubeSVG:hover,
+#youtubeURL:focus #youtubeSVG {
+    fill: #f00;
+}
+#youtubeSVG:active {
+    fill: #ea0202;
+}
+
+/* Discord icon colors. */
+#discordSVG:hover,
+#discordURL:focus #discordSVG {
+    fill: #7288d9;
+}
+#discordSVG:active {
+    fill: #657ac4;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Landing View (Bottom Styles)                                                *
+ *                                                                             *
+ ******************************************************************************/
+
+/* Style for a general label on the bottom of the landing view. */
+.bot_label {
+    font-size: 9px;
+    letter-spacing: 1px;
+    font-weight: bold;
+    text-shadow: 0px 0px 0px #bebcbb;
+}
+
+/* Divider used on the bottom of the landing view. */
+.bot_divider {
+    height: 25px;
+    width: 2px;
+    background: rgba(107, 105, 105, 0.7);
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+/* * *
+* Landing View (Bottom Styles) | Left Content
+* * */
+
+/* Maintains maximum width on the status bar. */
+#server_status_wrapper {
+    display: inline-flex;
+    width: 75px;
+}
+
+/* Span which displays the player count of the selected server. */
+#player_count {
+    color: #949494;
+    font-size: 8px;
+    font-weight: 900;
+    text-shadow: 0px 0px 20px #949494;
+    margin-left: 10px;
+}
+
+/* Wrapper container for the mojang status bar. */
+#mojangStatusWrapper {
+    position: relative;
+    display: flex;
+    cursor: pointer;
+}
+
+/* Icon which displays the status of the mojang services. */
+#mojang_status_icon {
+    font-size: 30px;
+    color: #848484;
+    margin-left: 15px;
+    font-family: 'sans-serif';
+}
+
+/* Tooltip which displays more details about the mojang statuses. */
+#mojangStatusTooltip {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    width: 145px;
+    min-height: 150px;
+    background-color: rgba(0, 0, 0, 0.75);
+    color: #fff;
+    border-radius: 4px;
+    padding: 5px 10px;
+    z-index: 1;
+    font-family: 'Avenir Medium';
+    font-size: 12px;
+    transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+    bottom: calc(100% + 15px);
+    transform: translateX(-50%);
+    margin-left: 50%;
+    box-shadow: 0px 0px 20px rgb(0, 0, 0);
+    cursor: default;
+}
+#mojangStatusTooltip:after {
+    content: " ";
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
+}
+#mojangStatusWrapper:hover #mojangStatusTooltip {
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 0s;
+}
+
+/* Tooltip title for the mojang statuses. */
+#mojangStatusTooltipTitle {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 5px;
+    letter-spacing: 1px;
+}
+
+/* Wrapper container for the non essential services title. */
+#mojangStatusNEContainer {
+    display: flex;
+    align-items: center;
+    margin: 10px 0px;
+}
+
+/* White bar which surrounds the non essential service title. */
+.mojangStatusNEBar {
+    height: 1px;
+    width: 100%;
+    background: white;
+}
+
+/* Non essential service title text. */
+#mojangStatusNETitle {
+    font-size: 10px;
+    padding: 0px 3px;
+    text-align: center;
+    letter-spacing: 1px;
+}
+
+/* Wrapper container for mojang service information. */
+.mojangStatusContainer {
+    display: flex;
+}
+
+/* Displays the name of the mojang service. */
+.mojangStatusName {
+    width: 100%;
+    font-size: 10px;
+    letter-spacing: 1px;
+    line-height: 12px;
+    padding: 6px 0px;
+}
+
+/* Displays the status of the mojang service. */
+.mojangStatusIcon {
+    margin-right: 10px;
+    font-size: 18.5px;
+    color: #848484;
+}
+
+/* * *
+* Landing View (Bottom Styles) | Center Content
+* * */
+
+/* Button which opens the news view. */
+#newsButton {
+    background: none;
+    border: none;
+    cursor: pointer;
+    outline: none;
+}
+#newsButton:hover #newsButtonText,
+#newsButton:focus #newsButtonText {
+    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff;
+}
+#newsButton:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+}
+
+#newsButton:hover #newsButtonSVG,
+#newsButton:focus #newsButtonSVG {
+    filter: drop-shadow(0px 0px 2px #fff);
+    -webkit-filter: drop-shadow(0px 0px 2px #fff);
+}
+#newsButton:active #newsButtonSVG .arrowLine {
+    stroke: #c7c7c7;
+}
+#newsButton:active #newsButtonSVG {
+    filter: drop-shadow(0px 0px 2px #c7c7c7);
+    -webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
+}
+#newsButton:disabled #newsButtonSVG .arrowLine {
+    stroke: rgba(255, 255, 255, 0.75);
+}
+
+/* Icon which indicates there is new news. */
+#newsButtonAlert {
+    width: 5px;
+    height: 5px;
+    position: absolute;
+    border-radius: 50%;
+    background: red;
+    right: -1px;
+    top: 50%;
+}
+
+/* Arrow image which floats above the news button. */
+#newsButtonSVG {
+    height: 11px;
+    margin-left: -2px;
+    transition: 0.25s ease;
+}
+
+/* Span which contains the news button text. */
+#newsButtonText {
+    color: white;
+    font-weight: 900;
+    letter-spacing: 2px;
+    text-shadow: 0px 0px 0px #bebcbb;
+    font-size: 11px;
+    line-height: 30px;
+    display: flex;
+    transition: 0.25s ease;
+}
+
+/* * *
+* Landing View (Bottom Styles) | Right Content
+* * */
+
+/* Main launch content container. */
+#landingContainer > #lower > #right #launch_content {
+    position: relative;
+    top: 25px;
+    display: inline-flex;
+}
+
+/* The launch button. */
+#launch_button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-weight: 900;
+    letter-spacing: 2px;
+    text-shadow: 0px 0px 0px #bebcbb;
+    font-size: 20px;
+    padding: 0px;
+    transition: 0.25s ease;
+    outline: none;
+}
+#launch_button:hover,
+#launch_button:focus {
+    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff;
+}
+#launch_button:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+}
+#launch_button:disabled {
+    color: #c7c7c7;
+    cursor: default;
+    pointer-events: none;
+}
+
+/* Launch details main container, hidden until launch processing begins. */
+#launch_details {
+    position: relative;
+    top: 25px;
+    display: none;
+}
+ 
+/* Left side of launch details container, displays percentage and a divider. */
+#launch_details_left {
+    display: flex;
+}
+
+/* Span which displays percentage complete. */
+#launch_progress_label {
+    font-weight: 900;
+    letter-spacing: 1px;
+    text-shadow: 0px 0px 0px #bebcbb;
+    font-size: 20px;
+    min-width: 53.21px;
+    max-width: 53.21px;
+    text-align: right;
+}
+
+/* Right side of launch details container, displays progress bar and details. */
+#launch_details_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+/* Button which opens the server selection view. */
+#server_selection_button {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    line-height: 24px;
+    padding: 0px;
+    transition: 0.25s ease;
+}
+#server_selection_button:hover,
+#server_selection_button:focus {
+    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff;
+}
+#server_selection_button:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+}
+
+/* Progress bar styles. */
+#launch_progress[value] {
+    height: 3px;
+    width: 265px;
+    -webkit-appearance: none;
+}
+#launch_progress[value]::-webkit-progress-bar {
+    background-color: transparent;
+}
+#launch_progress[value]::-webkit-progress-value {
+    background-color: #fff;
+}
+
+/* Span which displays information about the status of the launch process. */
+#launch_details_text {
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}