MediaWiki:Mainpage.css

/* Main page */ /** General **/ .mainpage-box { font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; margin: 0 0 30px; } .mainpage-box h2 { border: medium none; color: #00cccc; font-size: 26px; font-weight: bold; line-height: normal; margin: 85px 0 20px; overflow: hidden; padding: 0; text-align: center; text-transform: uppercase; } .mainpage-box h2::before, .mainpage-box h2::after { background-color: #707070; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .mainpage-box h2::before { margin-left: -50%; right: 0.5em; } .mainpage-box h2::after { left: 0.5em; margin-right: -50%; } .mainpage-box h3 { color: #008f50; font-weight: bold; font-size: 22px; line-height: normal; margin: 15px 0px 20px; } .mainpage-more { margin-top: 20px; } .mainpage-more a, .mainpage-more .recent a:active, .mainpage-more .recent a:visited { color: #5d194a; font-size: 18px; text-decoration: none; } .mainpage-more a:hover { color: #6aaefc; } .mainpage-more a::after { background-size: cover; background-image: url("https://vignette.wikia.nocookie.net/central/images/4/45/Mainpage_Arrows.png/revision/latest?cb=20160711222557"); background-position: 0px 0px; background-repeat: no-repeat; content: ""; display: inline-block; height: 16px; left: 8px; position: relative; top: 3px; width: 22px; } .mainpage-more a:hover::after { background-position: -23px 0px; } @media screen and (max-width: 1023px) { .page-Community_Central .WikiaRail, .page-Community_Central .main-page-tag-rcs { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } /** Blogs **/ .mainpage-blogs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mainpage-blogs .blog { margin: 0 0 20px 0; width: calc(50% - 10px); } .mainpage-blogs .blog.featured { width: 100%; } .mainpage-blogs .hero-image img { height: auto; width: 100%; } .mainpage-blogs .blog-info { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border-bottom: 1px solid #e5e9f4; border-left: 1px solid #e5e9f4; border-radius: 0px 0px 4px 4px; border-right: 1px solid #e5e9f4; display: -webkit-box; display: -ms-flexbox; display: flex; height: 64px; } .mainpage-blogs .blog .blog-info { padding: 15px 15px 10px 10px; } .mainpage-blogs .blog.featured .blog-info { padding-bottom: 10px; } .mainpage-blogs .details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 18px; } .mainpage-blogs .blog-info .avatar { height: 55px; margin: 0px 20px 0px 0px; } .mainpage-blogs .blog-info .avatar img { border-radius: 50%; height: 100%; width: auto; } .mainpage-blogs .blog-info .author a, .mainpage-blogs .blog-info .author a:active, .mainpage-blogs .blog-info .author a:visited { color: #103584; text-decoration: none; } .mainpage-blogs .blog-info .author a:hover { color: #9dc4c3; } .mainpage-blogs .blog-info .timestamp { color: #8591ca; font-size: 14px; } .mainpage-blogs .blog-info .timestamp::before { content: "\00a0\00a0•\00a0"; font-size: 10px; } .mainpage-blogs .blog .blog-info .title { font-size: 16px; font-weight: bold; margin-top: 4px; } .mainpage-blogs .blog.featured .blog-info .title { font-size: 23px; } .mainpage-blogs .blog-info .title a, .mainpage-blogs .blog-info .title a:active, .mainpage-blogs .blog-info .title a:visited { color: #4a90e2; text-decoration: none; } .mainpage-blogs .blog .title a:hover { color: #6aaefc; } @media screen and (min-width: 1024px) and (max-width: 1083px) { .mainpage-blogs .blog .blog-info .title { font-size: 14px; } } /** Connect **/ .mainpage-connect .staff { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style: outside none none; margin: 0px; } .mainpage-connect .staff li { border-radius: 4px; border: 1px solid #e5e9f4; box-sizing: border-box; margin: 0px 0px 20px; padding: 15px 20px; text-align: center; width: calc(50% - 10px); } .mainpage-connect .staff img { border-radius: 50%; height: auto; width: 95px; } .mainpage-connect .staff .name { line-height: 18px; margin-top: 10px; } .mainpage-connect .staff .name a, .mainpage-connect .staff .name a:active, .mainpage-connect .staff .name a:visited { color: #000000; font-weight: bold; text-decoration: none; } .mainpage-connect .staff .name a:hover { color: #e01449; } .mainpage-connect .mainpage-more { margin-top: 10px; } @media screen and (max-width: 1023px) { .mainpage-connect .staff li { width: auto; }    .mainpage-connect .staff .notablet { display: none; } } /** Social **/ .mainpage-social { background-color: #f6f6f6; padding: 30px 0px 35px; text-align: center; } .mainpage-social h3 { font-size: 25px; font-weight: bold; margin: 0px 0px 15px; } .mainpage-social .social-button { display: inline-block; vertical-align: top; } .mainpage-social .social-button.facebook span { vertical-align: top ! important; } .mainpage-social .twitter-follow-button { height: 20px ! important; position: static ! important; visibility: visible ! important; width: 64px ! important; } /** Highlight on cover code **/ .mainpage-box .staff li:hover, .mainpage-box .featured:hover, .mainpage-box .not-featured:hover { background: #f2f6fa; } .mainpage-box .avatar { border: none; }

/** character **/ .mainpage-connect .character { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style: outside none none; margin: 0px; } .mainpage-connect .character li { border-radius: 4px; border: 1px solid #e5e9f4; box-sizing: border-box; margin: 0px 0px 20px; padding: 15px 20px; text-align: center; width: calc(25% - 10px); } .mainpage-connect .character img { border-radius: 25%; height: auto; width: 95px; } .mainpage-connect .character .name { line-height: 18px; margin-top: 10px; } .mainpage-connect .character .name a, .mainpage-connect .character .name a:active, .mainpage-connect .character .name a:visited { color: #000000; font-weight: bold; text-decoration: none; } .mainpage-connect .character .name a:hover { color: #e01449; } .mainpage-connect .mainpage-more { margin-top: 10px; } @media screen and (max-width: 1023px) { .mainpage-connect .character li { width: auto; }    .mainpage-connect .character .notablet { display: none; } }

/** fa **/ .mainpage-connect .fa { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; list-style: outside none none; margin: 0px; } .mainpage-connect .fa li { border-radius: 4px; border: 1px solid #e5e9f4; box-sizing: border-box; margin: 0px 0px 20px; padding: 15px 20px; text-align: center; width: calc(50% - 10px); } .mainpage-connect .fa img { border-radius: 25%; height: auto; width: 100%; } .mainpage-connect .fa .name { line-height: 18px; margin-top: 10px; } .mainpage-connect .fa .name a, .mainpage-connect .fa .name a:active, .mainpage-connect .fa .name a:visited { color: #000000; font-weight: bold; text-decoration: none; } .mainpage-connect .fa .name a:hover { color: #e01449; } .mainpage-connect .mainpage-more { margin-top: 10px; } @media screen and (max-width: 1023px) { .mainpage-connect .fa li { width: auto; }    .mainpage-connect .fa .notablet { display: none; } }

/***MainPageCSS***/

/*-- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --*/ ul.tabbernav { border-bottom: 0px solid !important; font: normal 14px Helvetica, Arial, sans-serif !important; padding: 10px 0px !important; border-top: 5px solid #002E54; }

ul.tabbernav li { }

ul.tabbernav li a { padding: 10px 10px !important; margin-left: 0px !important; border: 0px solid !important; background: #FFF !important; }

ul.tabbernav li a:link { color: #002E54 !important; } ul.tabbernav li a:visited { color: #002E54 !important; }

ul.tabbernav li a:hover { background-color: #002E54 !important; border-color: transparent !important; color: #FFF !important; }

ul.tabbernav li.tabberactive a { color:#FFF !important; font-weight:normal !important; border: 0px solid #D9D9D9 !important; border-bottom: 1px solid #fff !important; background-color: #002E54 !important; }

ul.tabbernav li.tabberactive a:hover { border: 0px solid #D9D9D9 !important; border-bottom: 0px solid #fff !important; }

.tabberlive { width: 100% !important; } .tabberlive .tabbertab { border:0px solid #D9D9D9 !important; border-top:0 !important; }

/*-- Styles for Guides Tabs --*/

.tab-item-avatar { float:left;width:48px;margin:20px 10px 0px 10px;}

.tab-item-title { font-size:22px;padding-top:20px;margin:5px 0px -5px 0px }

.tab-item-content { margin: 0px 0px 0px 10px;border-bottom:1px solid #ccc; }