MediaWiki:Gadget-ms-Tardis.css

From Tardis Wiki, the free Doctor Who reference
(Redirected from CSS:TARDIS)
Clear your cache often around here

After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.

  • Firefox: hold down Shift while performing a page reload.
  • Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
  • Safari users should simultaneously hold down + Option + E. You may need to enable the Develop menu first
  • Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* ============================
   Tardis.css v. 2.0
   
   Month of last major change: Feb 2024

   This page styles custom elements
   which exist only here at Tardis. 
   If the base selector is unique to 
   Tardis, you'll find the styling here.
   ============================ */


/*  ======================
    TOP-OF-PAGE BANNERS
    which identify the type
    of article or give other
    important messages about
    the article as a whole
    =======================
    Clearly owes a debt to
    memoryalpha.fandom.com,
    who were riffin' off of
    en.wikipedia
    =======================
 
    +++++++++++++++++++++++
    Base frame
    +++++++++++++++++++++++ */
div#article-type { 
    border: 1px solid var(--accent-1);
    padding: 5px;
    letter-spacing: .5px;
    text-align: left;
    min-height: 55px;
    min-width: 528.5px;
    margin: 0px 0px 10px 0px;
}   
div#article-type p {
    margin-left: 205px;
    line-height: 11px;
    font-size: 11px;
    text-align: left;
    font-weight: normal;
    font-style: normal;
}
div#type-title {
    margin-left: 205px;
    font-size: 18pt;
    line-height: 16pt;
}

/* +++++++++++++++++++
   Various article types
   +++++++++++++++++++ */

div.type-realworld {
    margin: auto auto auto auto;
    top: 0px;
    max-height: 55px;
    background: url(https://tardis.wiki/w/images/Tardis_Images/d/d8/SmallClapper.jpg) no-repeat;
    z-index: 5;
}
div.type-nc {
    background: url(https: //tardis.wiki/w/images/Tardis_Images/f/f1/Journal200px.png) no-repeat;
    z-index: 5;
}
div.type-disambig {
    max-height: 55px;
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/a/af/Transferring.jpg) no-repeat;
    z-index: 5; 
}
div.type-inuse {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/e/e0/Inuse200px.jpg) no-repeat;
    z-index: 5;
}
div.type-update {
    margin-left: 180px;
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/3/37/Update200px.jpg) no-repeat;
    z-index: 5;
}
div.type-cleanup {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/5/58/Thirteen_repairing_timeship.jpg) no-repeat;
}
div.type-listy {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/3/3a/Explain_explain_Journey%27s_End.jpg) no-repeat;
}
div.type-delete {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/6/6b/Delete200px.jpg) no-repeat;
    z-index: 5;
}
div.type-oou {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/6/63/Oou200px.jpg) no-repeat;
    z-index: 5;
}
div.type-rename {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/1/1e/Rename200px.jpg) no-repeat;
    z-index: 5;
}
div.type-merge {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/9/99/Merging_Tremaster.jpg);
    background-repeat: no-repeat;
    background-size: 200px 200px;
    background-position: 0 0;
    z-index: 5;
}
div.type-spoiler {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/7/7f/Spoiler200px.jpg) no-repeat;
    z-index: 5;
}
div.type-conjecture {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/c/c3/Conjecture200px.jpg) no-repeat;
    z-index: 5;
}
div.type-talk {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/b/b4/Talk200px.jpg) no-repeat;
    z-index: 5;
}
div.type-unprod {
    background: rgba(var(--contrast-color-1--rgb),0.4) url(https: //tardis.wiki/w/images/Tardis_Images/f/f2/Unprod.png) no-repeat;
    z-index: 5;
}
div.type-doctorwhich {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/a/af/WhichDoctor.jpg) no-repeat;
    z-index: 5;
}
div.type-nonfiction {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/2/26/Nonfiction.png) no-repeat;
    z-index: 5;
}
div.type-prefix {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/d/d5/Prefix.png) no-repeat;
    z-index: 5;
    background-size: 200px 90px;
    background-position: left top;
}
div.type-demonym {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/c/c6/Demonym200px.jpg) no-repeat;
    z-index: 5;
    background-position: 0px -20px
}

/*  ===============
    STUBS
    =============== */
    
.stub-type,
#stub-type {
    float: left;
    margin-right: 12px;
    margin-top: 5px;
}
.stub-type + .stub-type + .stub-type,
#stub-type + .stub-type + .stub-type,
#stub-type + #stub-type + .stub-type,
#stub-type + #stub-type + #stub-type,
#stub-type + .stub-type + #stub-type,
.stub-type + #stub-type + .stub-type,
.stub-type + #stub-type + #stub-type,
.stub-type + .stub-type + #stub-type {
	clear: left;
}

/*  This is for the small, right-floating 
    boxes, like DisconNav   */
    
div#inline-box-rt {
    float: right;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--accent-1);
    width: 250px;
    margin: 10px;
    line-height: 1.1em;
    font-size: .8em;
    font-weight: 400;
    font-style: normal;
    background-color: transparent ;
    color: #fff;
}

/*  This is for the small, left-floating 
    boxes, like section cleanup   */
    
div#inline-box {
    float: left;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--accent-7);
    width: 250px;
    margin: 10px 14px 10px 10px;
    line-height: 1.1em;
    font-size: .8em;
    font-weight: 400;
    font-style: normal;
    background-color: transparent;
    color: var(--text-color);
}

div#inline-box p,
div#inline-box-rt p {
    line-height: .9em;
    font-size: .8em;
    font-weight: normal;
    font-style: normal;
    color: var(--text-color-2);
}
/*  DIVs used in "messages" (as in the delete temp) */
div.warning {
	background-color: #401F22;
	border: 1px solid #660000;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
	color: #FF0000;
	font-weight: bold;
	margin: 2em 0 1em;
	padding: .5em 1em;
	margin-top: auto;
    margin-bottom: auto;
	text-align: justify;
}
div.header-notice,
.copyright-notice {
	background-color: transparent;
	border: 1px solid var(--accent-1);
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
	color: #000;
	padding: .5em 1em;
    margin: auto;
    width: 80%;
    line-height: 110%;
    font-size: 95%;
	text-align: justify;
}
div.header-notice table {
    background-color: transparent;
	padding: 1px;
}
div.notice {
	background-color: #401F22;
	border: 1px solid #CC0000;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
	color: #FFFFFF;
	margin: 2em 10% 1em 10%;
	padding: .5em 1em;
	text-align: justify;
	font-size: smaller;
}
div.header-notice#fa {
    width: auto;
	font-size: inherit;
}
div.notice p,
div.header-notice p,
div.warning p {
	line-height: 120%;
}
div span.msg-title {
    display: block;
	width: 100%;
	color: #FFD942;
	text-align: center;
	font-size: 150%;
	font-weight: bold;
	border-bottom: 1px solid #666;
}
.tr-tit {
    font-family: "Maven Pro","Nunito","Rubik",sans-serif!important;
    font-weight: bold;
}
/*  ============
    Wikipediainfo
    and Image links tags
    ============

    This puts {{wikipediainfo}} 
    on the top left side of the page */

#wikipedia-info,
.wikipedia-info,
div#wikipedia-info {
    float: left;
    margin-right: 5px;
    margin-top: 15px;
}
/*  This places {{protect}} and {{lock}} 
    underneath {{wikipediainfo}} in case 
    they're ever on the same page together. */
.protect,
div#protect {
    float: left;
    margin-right: 5px;
    margin-top: 15px;
}
.type-of-article,
div#type-of-article {
    float: left;
    margin-right: 5px;
    margin-top: 15px;
}
/*  =======================
    SHORTCUTS
    the little boxes that say
    T: WHATEVER
    in the upper right hand corner
    of pages
    =======================
    Base style probably originated
    at en.wikipedia, but has spread
    to some of the larger Wikia
    wikis like Wookiee, The Vault and MA
    ======================== */

div.shortcut {
    float: right;
    background: transparent;
    border: 1px solid var(--accent-4);
    padding: 0.65em;
    margin: 10px 10px 10px 10px;
    text-align: center;
    font-size: smaller;
    font-weight: bold;
    width: auto;
}

/*  ===============
    TIMELINE
    =============== */

.timeline a: visited,
.timeline a: link {
    color: #ccdfff
} 
.timeline a: hover {
    color: #fff9d4;
    background: none;
}

.timeline {
    color: #fff;
    background: #012c57;
    background: -moz-linear-gradient(top,  #012c57 0%, #012c57 35%, #4e7dab 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#012c57), color-stop(35%,#012c57), color-stop(100%,#4e7dab));
    background: -webkit-linear-gradient(top,  #012c57 0%,#012c57 35%,#4e7dab 100%);
    background: -o-linear-gradient(top,  #012c57 0%,#012c57 35%,#4e7dab 100%);
    background: -ms-linear-gradient(top,  #012c57 0%,#012c57 35%,#4e7dab 100%);
    background: linear-gradient(top,  #012c57 0%,#012c57 35%,#4e7dab 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#012c57', endColorstr='#4e7dab',GradientType=0 );
    overflow: visible;
    border-color: transparent;
    text-align: center;
    font-size: 0.85em;
    float: right;
    clear: right;
    width: 250px!important;
    min-width: 250px!important;
    margin-bottom: 10px;
    margin-right: 10px;
}

/*  =========================
    SPECIAL STYLES
    mainly used in template design
    =========================
    These designs are all unique
    to tardis.wikia.com and were
    created by CzechOut
    ========================= */

#editpage-specialchars,
#glow {
    background-color: transparent;
	border: 1px solid var(--accent-1);
	padding: .5em 1em;
    margin: auto;
    width: 95%;
    line-height: 110%;
    font-size: 95%;
	text-align: justify;
       -moz-box-shadow: -0px 0px 40px var(--accent-4);
    -webkit-box-shadow: -0px 0px 40px var(--accent-4);
        -ms-box-shadow: -0px 0px 40px var(--accent-4);
         -o-box-shadow: -0px 0px 40px var(--accent-4);
            box-shadow: -0px 0px 40px var(--accent-4);
}
#quote-nom {
    background-color: transparent;
	border: 1px solid var(--accent-1);
	margin-right: 260px; 
	padding: .5em 1em;
	vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    line-height: 110%;
    font-size: 95%;
	text-align: justify;
       -moz-box-shadow: inset -0px 0px 25px 4px var(--accent-4);
    -webkit-box-shadow: inset -0px 0px 25px 4px var(--accent-4);
        -ms-box-shadow: inset -0px 0px 25px 4px var(--accent-4);
         -o-box-shadow: inset -0px 0px 25px 4px var(--accent-4);
            box-shadow: inset -0px 0px 25px #e5c076 4px;
}
#license {
    background-color: transparent;
    border: solid 2px #8495b3;
    border-radius: 14px;
    margin: auto;
    padding: .5em 1em;
    width: 80%;
    line-height: 110%;
    font-size: 95%;
    font-family: "Rubik";
    text-align: left;
    position: relative;
    left: -1px;
}
#license + #license {
    margin-top: 7.04px;
}
#license h1 {
    margin-top: 11.62px;
}
#license h1:after {
    border-bottom: solid 4px #1a2e53;
    border-bottom: solid 2px #6f8cc1;
    margin-top: 10px;
}
#license a img {
    position: relative;
    top: -2.82px;
}
.smw-editpage-help,
#box  {
    font-weight: normal;
    background-color: var(--primary-9);
    border: 1px solid var(--primary-3);
    color: inherit;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
    padding: 16px;
    margin-top: 13px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 21px;
    font-size: 95%;
}

#box-rt  {
    font-weight: normal;
    background-color: transparent;
    border: 2px solid var(--accent-1);
    color: #000;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    font-size: 95%;
}

#box-lt  {
    font-weight: normal;
    background-color: transparent;
    border: 1px solid var(--accent-1);
    color: #000;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
    padding: 10px;
    margin: 25px auto 25px auto;
    font-size: 95%;
}
#th {
    font-family: Adelle, 'Cambria', 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;
    font-size: 1.8em;
    line-height: 1.2em;
    font-style: italic;
    color: #000;
    font-weight: bold;
}
.error, #error { 
    color: #000;
    font-weight: bold;
} 
.error, #error,
#tech, .tech  {
    width: 95%;
    font-weight: normal;
    background-color: transparent;
    border: 1px solid var(--accent-1);
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
    padding: 10px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    font-size: 95%;
}
:root.theme-dark #tech,
:root.theme-dark .tech {
    border-color: #1a2e53!important;
    background-color: #081d3f!important;
}
:root.theme-dark .ns-3 #tech + #tech {
    background-color: #132b55!important;
}

#mainpage-highlight { 
    margin-bottom: 15px;
    padding: 5px;
    background-color: transparent;
    border: 1px solid #e5c076;
}
#crewtop { 
    background: transparent;
       -moz-border-radius: 50% 50% 0% 0% / 5% 5% 0% 0%;
    -webkit-border-radius: 50% 50% 0% 0% / 5% 5% 0% 0%;
        -ms-border-radius: 50% 50% 0% 0% / 5% 5% 0% 0%;
         -o-border-radius: 50% 50% 0% 0% / 5% 5% 0% 0%;
            border-radius: 50% 50% 0% 0% / 5% 5% 0% 0%;
    border: 3px solid var(--accent-1);
    clear: both;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 10px;
    font-size: .90em;
    line-height: .95em;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
}
#crew { 
    background: transparent;  
    -webkit-border-radius: 0px 0px 10px 10px;
       -moz-border-radius: 0px 0px 10px 10px;
        -ms-border-radius: 0px 0px 10px 10px;
         -o-border-radius: 0px 0px 10px 10px;
            border-radius: 0px 0px 10px 10px;
    clear: both;
    width: auto;
    padding: 11px;
    border: 2px solid var(--accent-1);
    margin-left: auto;
    margin-right: auto;
    font-size: 0.80em;
    line-height: .90em;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
}
:root.theme-dark .skin-timeless #crewtop,
:root.theme-dark .skin-timeless #crew {
    background: var(--primary-25);
    border-color: var(--contrast-color-3); /* var(--primary-21) */
    box-shadow: 22vw 0 22vw var(--primary-24) inset;
}
:root.theme-dark .skin-timeless #crewtop tr > td:only-child > hr {
    border-color: var(--primary-7);
}

#crew p {
	margin-bottom: 0px;
}
.stitched {
    padding: 5px 10px;
    margin: 10px;
    line-height: 100%;
    border: 1px solid var(--accent-1);
    -webkit-border-radius: 10px 0px 0px 10px;
       -moz-border-radius: 10px 0px 0px 10px;
        -ms-border-radius: 10px 0px 0px 10px;
         -o-border-radius: 10px 0px 0px 10px;
            border-radius: 10px 0px 0px 10px;
    font-weight: normal;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
}
.key, #key {
    font-size: .9em;
    background-color: inherit; 
    border: 1pt outset var(--accent-1);
    text-align: center; 
    vertical-align: middle; 
    padding: 2px;
    margin: 2px;
    font-weight: bold;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
}
#block {
    display: block;
    height: 30px;
    width: 100px;
    border: 1px solid var(--accent-1);
    margin: 5px;
}

/* Dabtag and mosbox */
.dabtag,
#dabtag {
    border: 2px solid var(--accent-1);
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
        -ms-border-radius: 0;
            border-radius: 0;
    overflow: hidden;
    font-size: 0.80em;
    line-height: .95em;
    display: inline-block;
    width: 276px; /* this is precise width of two stub tags */
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 17px!important; /*overrides the div.dabtag elsewhere */
    float: left;
    line-height: 130%;
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
    clear: left;
}
.dabtag, #dabtag {
    padding-top: 1px;
    background: none;
    border: 2px solid var(--accent-1);
    width: 274px;
    border-radius: 3px 3px 8px 4px;
}


/*improves formatting on smaller screen sizes*/
.dabtag + p, #dabtag + p {
    word-wrap: normal;
}

#mosbox {
    font-family: "Maven Pro","Nunito","Rubik",sans-serif;
    text-transform: none;
    letter-spacing: 0px;
    line-height: 120%;
    word-break: normal;
    font-size: 16px; 
    word-wrap: break-word;
}
#mos-summary {
    font-style: italic;
    margin: 25px;
    border-bottom: 2px solid #b0b0b0;
    font-size: 150%;
    padding: 10px;
    font-weight: normal;
    line-height: 150%;
    font-family: Adelle, 'Cambria', 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;
}
.mosheadcolor {
    color: #000;
}
.moscolor { 
    color: #000;
}

/* ==============
   DPL formats 
   ============== */

.dpl3 {
    vertical-align: top;
    width: 100%;
    margin: 0 auto;
}

/* ==========================
   Equally sized table widths
   ========================== */
   
table.twelve-equal-columns,
table.eight-equal-columns,
table.five-equal-columns,
table.four-equal-columns {
  table-layout: fixed;
  width: 100%!important; /*!important is necassary*/
}
td.twelve-equal-columns {
	width: 8.33333333333333%;
}
td.eight-equal-columns {
	width: 12.5%;
}
td.five-equal-columns {
  width: 20%;
}
td.four-equal-columns {
  width: 25%;
}

/* ======================
   Collapsible navfoboxes 
   ====================== */
   /*using : has() would improve this template but it doesn't work on Firefox yet. De-comment this selector when https: //developer.mozilla.org/en-US/docs/Web/CSS/: has#browser_compatibility says that firefox support exists */
.collapsible-navfobox aside: has(div.mw-collapsed) {
	margin-bottom: 1px;
}
.collapsible-navfobox h2: has(div.mw-collapsed) {
	padding: 0px!important;
	border-top: none!important;
}
.collapsible-navfobox nav: has(div.mw-collapsed) {
	padding-top: 0px!important;
}
.collapsible-navfobox .portable-infobox .pi-header: nth-child(n+3): has(div.mw-collapsed) {
	margin-top: 0px;
}
/* Firefox workaround */
@media all and (min--moz-device-pixel-ratio: 0) {
	.collapsible-navfobox aside {
		margin-bottom: 1px;
	}
	.collapsible-navfobox h2 {
		padding: 0px!important;
		border-top: none!important;
	}
	.collapsible-navfobox nav {
		padding-top: 0px!important;
	}
	.collapsible-navfobox .portable-infobox .pi-header: nth-child(n+3) {
		margin-top: 0px;
	}
}

/* NWLH */
.NWLH a.external {
	background: none;
	padding-right: 0;
}

/* making the last tab default for some tabbed galleries in infoboxes */
.default-last-tab .wds-tabs .wds-tabs__tab: first-child {
	order: 9999;
}

/* {{Pullout}} */
.pullout-wrapper {
	float: right;
	display: flex;
    margin-top: 8px;
    margin-bottom: 12.6px;
    position: relative;
    z-index: 20;
}
.pullout-handle {
	background-color: var(--accent-2);
	border-radius: 24px 0px 0px 24px;
	width: 40px;
	height: 56px;
	padding-left: 14px;
	font-size: 2em;
	color: var(--primary-1);
	transition: background-color 1s, width 1s;
}
.pullout-handle: hover {
	background-color: var(--accent-1);
	width: 55px;
}
.pullout-content {
	border: 1px solid var(--accent-1);
}
.pullout-content div#article-type {
    margin: 0px;
    max-width: 38em;
}
.pullout-left-arrow {
	display: none;
}

@media screen and (min-width: 851px) {
    .pullout-content div#article-type {
    	min-width: 47vw;
        max-width: 54.82em;
        position: relative;
        border-right: solid 1em var(--accent-26);
    }
    
    .mw-parser-output:has(.dabtag) > .pullout-wrapper > .pullout-content div#article-type {
        max-width: unset;
    }
    
}

/* {{subpage tabs}} */
/* see also: Template:Subpage tabs/styles.css for non-colour styles */
.subpage-tabs-main {
	border: 2px solid var(--accent-2);
	color: var(--alt-text-color);
}
.subpage-tabs-tab {
	background-color: var(--accent-6);
}
.subpage-tabs-main a, .subpage-tabs-main a: visited, .subpage-tabs-main a: hover, .subpage-tabs-main a: hover: visited {
	color: var(--alt-text-color);
}

.RW-box {
	border: 1px solid var(--accent-1);
	padding: 5px;
	margin-top: 2px;
}

/* =====================
   CSS for wip templates 
   ===================== */
/* content warning templates on [[User: Bongolium500/Sandbox 9]]*/
div.type-trigger {
    background: rgba(var(--contrast-color-1--rgb),.04) url(https: //tardis.wiki/w/images/Tardis_Images/7/79/Trigger_Template_200px.jpg) no-repeat;
    z-index: 5;
}
   
/* recent releases homepage module */
div.mainpage-box-recent div.recent-release-box {
	border: var(--accent-1) 2px solid;
	background: var(--primary-2);
	margin: 3px;
	border-radius: 25px;
}
div.mainpage-box-recent {
	border: var(--accent-1) 2px solid;
	background: var(--accent-1);
	border-radius: 28px;
}
.mainpage-box-recent .read-more-button {
	background: var(--accent-1);
	color: var(--primary-1);
	padding: 7px 50px 5px 50px;
	border-radius: 15px;
	transition: background 0.5s, color 0.5s;
	transition-timing-function: ease;
}
.mainpage-box-recent .read-more-button: hover {
	background: var(--accent-3);
	color: var(--primary-2);
}
.mainpage-box-recent .floatright,
.mainpage-box-recent .floatleft {
	margin: 0px;
}
.mainpage-box-recent .floatright img {
	border-radius: 0px 24px 24px 0px;
}
.mainpage-box-recent .floatleft img {
	border-radius: 24px 0px 0px 24px;
}
.mainpage-box-recent p {
	margin-bottom: 10px;
	display: inherit!important; /*required to get the paragraph under the read more button to show up. This is needed so that the button has some space before the bottom of the box. */
}
.mainpage-box-recent p+p {
	margin-top: 12px;
}

/* adapted from https: //stackoverflow.com/a/37120036 by Jacob G under CC-BY-SA 4.0 */
.horizontal-line {
	background: linear-gradient(transparent 42.5%, var(--accent-1) 42.5%, var(--accent-1) 57.5%, transparent 57.5%);
	padding: 5px;
	width: 35px;
	display: inline-flex;
	margin: 0px 5px;
}

/* {{TriggerImage}} */
.trigger {
	position: relative;
}
.trigger p.trigger-warning {
	position: absolute;
	width: 180px;
	text-align: center;
	padding: 15px 0;
	z-index: 0;
}
.trigger a.image {
	padding: 55px 0;
	z-index: 1;
	position: relative;
	border: var(--accent-1) 2px solid;
}
.trigger img {
	visibility: hidden;
}

/* [[User:Bongolium500/The Faceless Ones (TV story)/Home media]] */
.home-media-timeline-table {
	float: left;
	min-width: 320px;
	margin-right: 20px !important;
}
.home-media-easytimeline-wrapper {
	margin-left: 330px;
}
.home-media-easytimeline-wrapper .mw-collapsible-toggle {
	float: left;
}
.home-media-nav-table th a,
.home-media-release-table th a,
.home-media-features-table th a {
	color: var(--alt-text-color);
	text-decoration: underline;
}
.home-media-nav-table {
	float: right;
	clear: right;
}
.home-media-features-table {
	width: 100%;
}
.home-media-features-table .home-media-features-table-center {
	float: center;
}
.home-media-features-table .home-media-features-table-right {
	float: right;
}
.home-media-age-ratings-table {
	float: right;
	clear: right;
}
.compact-section-toc {
	text-align: center;
	width: 50%;
	word-wrap: break-word;
	border: 1px solid var(--accent-1);
	padding: 10px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	font-size: 95%;
}
.back-box {
	float: right;
	border: 1px solid var(--accent-1);
	padding: 0.65em;
	margin: 10px 10px 10px 10px;
	text-align: center;
	font-size: smaller;
	font-weight: bold;
}