MediaWiki:Common.css: Difference between revisions

From Epic Path
Jump to navigation Jump to search
No edit summary
No edit summary
 
(334 intermediate revisions by the same user not shown)
Line 3: Line 3:
/* removes header on main page */
/* removes header on main page */
body.page-Epic_Path.action-view h1.firstHeading, body.page-Epic_Path.action-submit h1.firstHeading { display: none; }
body.page-Epic_Path.action-view h1.firstHeading, body.page-Epic_Path.action-submit h1.firstHeading { display: none; }
/* removes bottom border of h2 on main page */
body.page-Epic_Path.action-view h2, body.page-Epic_Path.action-submit h2 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: none;
    clear: both;
}


/* removes redirected from main page message from main page */
/* removes redirected from main page message from main page */
.page-Epic_Path #contentSub { display: none }
.page-Epic_Path #contentSub { display: none }
.topbanner img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}
h1.firstHeading {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}


h1 {
h1 {
     color: #888888;
     color: #584500;
     font-size: 2em;
    font-family: Stonehenge;
     font-size: 225%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}
}


h2 {
h2 {
     color: #888888;
     color: #584500;
     font-size: 1.5em;
     font-family: Stonehenge;
     padding: 2px;
     font-size: 200%;
     padding-top: 30px;
     font-weight: bold;
     border-bottom-style: solid;
     border-bottom-style: solid;
     border-bottom-color: Black;
     border-bottom-color: #584500;
}
 
h3 {
    color: #584500;
    font-weight: bold;
    font-size: 175%;
}
 
h4 {
    font-weight: bold;
    font-size: 150%;
    color: #584500;
}
 
h5 {
    font-weight: bold;
    font-size: 125%;
    color: #584500;
}
 
h6 {
    font-weight: bold;
    font-size: 125%;
    color: #000000;
}
 
 
@font-face {
    font-family: 'Ferrum';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ferrum/Ferrum.otf");
    src: local('Ferrum.otf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ferrum/Ferrum.otf') format('opentype'),
}
 
.ferrum {
    font-family: 'MarcellusSC';
}
 
@font-face {
    font-family: 'MarcellusSC';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/MarcellusSC/MarcellusSC.ttf");
    src: local('MarcellusSC.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/MarcellusSC/MarcellusSC.ttf') format('truetype'),
}
 
.marcellus {
    font-family: 'MarcellusSC';
}
 
@font-face {
    font-family: 'Stonehenge';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonehenge/Stonehenge.ttf");
    src: local('Stonehenge.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonehenge/Stonehenge.ttf') format('truetype'),
}
 
.stonehenge {
    font-family: 'Stonehenge';
}
 
@font-face {
    font-family: 'Ringbearer';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ringbearer/Ringbearer.ttf");
    src: local('Ringbearer.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ringbearer/Ringbearer.ttf') format('truetype'),
}
}


body.page-Main_Page h2 {
.ringbearer {
    color: #888888;
     font-family: 'Ringbearer';
     font-size: 1.5em;
    padding: 2px;
    padding-top: 30px;
}
}


@font-face {
    font-family: 'Alex Brush';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.ttf");
    src: local('AlexBrush-Regular.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.ttf') format('truetype'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.woff') format('woff');
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.woff2') format('woff2');
}


h3 {
.alexbrush {
     color: #888888;
     font-family: 'Alex Brush';
     font-size: 1.25em;
}
     padding: 2px;
 
     padding-top: 30px;
@font-face {
    font-family: 'Bilbo Swash Caps';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.ttf");
    src: local('BilboSwashCaps-Regular.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.ttf') format('truetype'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.woff') format('woff');
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.woff2') format('woff2');
}
 
.bilbosc {
    font-family: 'Bilbo Swash Caps';
}
 
@font-face {
    font-family: 'Stonecross';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.ttf");
    src: local('stonecross.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.ttf') format('truetype'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.woff') format('woff');
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.woff2') format('woff2');
}
 
.stonecross {
    font-family: 'Stonecross';
}
 
@font-face {
     font-family: 'Fondamento';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.ttf");
     src: local('Fondamento-Regular.ttf'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.ttf') format('truetype'),
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.woff') format('woff');
        url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.woff2') format('woff2');  
}
 
.fondamento {
     font-family: 'Fondamento';
}
 
 
 
/* Give a bit of space to the TOC */
#toc {
margin: 10px 0;
}
 
/*
* Allow limiting of which header levels are shown in a TOC;
* <div class="toclimit-3">, for instance, will limit to
* showing ==headings== and ===headings=== but no further.
* Used in [[Template:TOC]]
*/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
 
 
/* Table Formatting - Standard */
.ep-default {box-shadow: 4px 4px 4px #8c775c;}
 
.ep-default th, .ep-default td {
  border: 1px solid #000;
  padding: 2px 5px 2px 5px;
}
}


.ep-default tr {background-color: #EBE7D2;}
.ep-default tr:nth-child(even) {background-color: #FFFBE6;}


h4 {
.ep-default th {
    color: #888888;
  background-image: -moz-linear-gradient(top, #BB8E53, #FFEC8D);  
    padding: 2px;
  background-image: -o-linear-gradient(top, #BB8E53, #FFEC8D);
    padding-top: 30px;
  background-image: -webkit-linear-gradient(top, #BB8E53, #FFEC8D);
  background-image: linear-gradient(top, #BB8E53, #FFEC8D);
  color: #000;
}
}


h5 {
/* Table Formatting - No Default Header Colors */
    color: #888888;
.ep-default2 {box-shadow: 4px 4px 4px #8c775c;}
    padding: 2px;
 
    padding-top: 30px;
.ep-default2 th, .ep-default2 td {
  border: 1px solid #000;
  padding: 2px 5px 2px 5px;
}
}
.ep-default2 tr {background-color: #EBE7D2;}
.ep-default2 tr:nth-child(even) {background-color: #FFFBE6;}




/* Background Colors */
/* Main content panel */
/* Main content panel */
#content {
#content {
     background-color: #F2ECCE;  
     background-color: #F2ECCE;
}
}


/* Top of screen */
/* Logo Space */
#mw-head-base {
#p-logo {
     background-color: #FFFBE6;  
     background-color: #FFFBE6;  
/*    margin-left: -6px;  */
/*    width: 130px;      */
}
}


/* Logo Space */
#p-logo a,
#p-logo {
#p-logo a:hover {
    display: block;
    text-decoration: none;
}
 
/* Top of screen */
#mw-head {
     background-color: #FFFBE6;  
     background-color: #FFFBE6;  
}
}
Line 79: Line 266:
     background-color: #FFFBE6;  
     background-color: #FFFBE6;  
}
}
#mw-page-base {
    background-color: #FFFBE6;
}
/* Everywhere else */
/* Everywhere else */
body {  
body {  
     background-color: #FFFBE6;  
     background-color: #FFFBE6;  
}
/* Mobile-Friendly Two Column Display (Full Page)*/
#page-2column-left {
    float: left;
    width: 49%;
}
#page-2column-right {
    float: right;
    width: 49%;
}
@media only screen and (max-width: 850px) {
    /* Decouple the columns on narrow screens */
    #page-2column-left,
    #page-2column-right {
        float: inherit;
        width: inherit;
    }
}
/* Responsive Columns on Main Page */
.section-content {
    box-sizing: border-box;
}
.columns {
    -moz-column-width: 200px; /* Firefox */
    -webkit-column-width: 200px; /* webkit, Safari, Chrome */
    column-width: 200px;
    margin-right: 2px;
}
.columns ul {
    list-style-type: none;
    white-space: nowrap;
}
.columns2 {
    -moz-column-width: 35px; /* Firefox */
    -webkit-column-width: 35px; /* webkit, Safari, Chrome */
    column-width: 35px;
    margin-right: 2px;
}
.columns2 ul {
    list-style-type: none;
    white-space: nowrap;
}
.clear {
  clear: left;
  height: 1px;
  margin-top: -1px;
}
/* Bestiary Header Formatting */
h2.bestiary_main {
    color: #584500;
    font-family: Stonehenge;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    border-bottom-style: none;
}
h2.bestiary {
    color: #584500;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: none;
}
h3.bestiary {
    color: #584500;
    font-weight: bold;
    font-size: 125%;
    border-bottom-style: none;
}
/* Trap Header Formatting */
h2.trap_main {
    color: #232c71;
    font-family: Stonehenge;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    border-bottom-style: none;
}
h2.trap {
    color: #232c71;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: none;
}
h3.trap {
    color: #232c71;
    font-weight: bold;
    font-size: 125%;
    border-bottom-style: none;
}
/* CSS for Point Buy Calculator */
input.ptby[type="number"] {
width: 3em;
}
table.ptby {
text-align: center;
background-color: #F2ECCE;
}
table.ptby tr {
background-color: #fffbe6;
}
table.ptby tr:nth-child(2n) {
background-color: #ebe7d2;
}
table.ptby th, table.ptby td {
border: 1px solid black;
padding: 5px;
}
div.ptby-rowflex {
flex-flow: row wrap;
align-items: flex-start;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
width: 90vw;
}
div.ptby-rowflex > div, div.ptby-rowflex > table {
flex: 0 0 auto;
}
div.ptby-rowflex > div {
text-align: right;
}
div.ptby-colflex {
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
min-height: 15em;
}
div.ptby-colflex > div {
flex: 0 0 auto;
}
.ptby-bold {
font-weight: bold;
}
}

Latest revision as of 17:18, 18 January 2022

/* CSS placed here will be applied to all skins */

/* removes header on main page */
body.page-Epic_Path.action-view h1.firstHeading, body.page-Epic_Path.action-submit h1.firstHeading { display: none; }

/* removes bottom border of h2 on main page */
body.page-Epic_Path.action-view h2, body.page-Epic_Path.action-submit h2 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: none;
    clear: both; 
}

/* removes redirected from main page message from main page */
.page-Epic_Path #contentSub { display: none }

.topbanner img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}

h1.firstHeading {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}

h1 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 225%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}

h2 {
    color: #584500;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: #584500;
}

h3 {
    color: #584500;
    font-weight: bold;
    font-size: 175%;
}

h4 {
    font-weight: bold;
    font-size: 150%;
    color: #584500;
}

h5 {
    font-weight: bold;
    font-size: 125%;
    color: #584500;
}

h6 {
    font-weight: bold;
    font-size: 125%; 
    color: #000000;
}


@font-face {
    font-family: 'Ferrum';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ferrum/Ferrum.otf");
    src: local('Ferrum.otf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ferrum/Ferrum.otf') format('opentype'),
}

.ferrum {
    font-family: 'MarcellusSC';
}

@font-face {
    font-family: 'MarcellusSC';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/MarcellusSC/MarcellusSC.ttf");
    src: local('MarcellusSC.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/MarcellusSC/MarcellusSC.ttf') format('truetype'),
}

.marcellus {
    font-family: 'MarcellusSC';
}

@font-face {
    font-family: 'Stonehenge';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonehenge/Stonehenge.ttf");
    src: local('Stonehenge.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonehenge/Stonehenge.ttf') format('truetype'),
}

.stonehenge {
    font-family: 'Stonehenge';
}

@font-face {
    font-family: 'Ringbearer';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ringbearer/Ringbearer.ttf");
    src: local('Ringbearer.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Ringbearer/Ringbearer.ttf') format('truetype'),
}

.ringbearer {
    font-family: 'Ringbearer';
}

@font-face {
    font-family: 'Alex Brush';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.ttf");
    src: local('AlexBrush-Regular.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/AlexBrush/AlexBrush-Regular.woff2') format('woff2'); 
}

.alexbrush {
    font-family: 'Alex Brush';
}

@font-face {
    font-family: 'Bilbo Swash Caps';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.ttf");
    src: local('BilboSwashCaps-Regular.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Bilbo_Swash_Caps/BilboSwashCaps-Regular.woff2') format('woff2'); 
}

.bilbosc {
    font-family: 'Bilbo Swash Caps';
}

@font-face {
    font-family: 'Stonecross';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.ttf");
    src: local('stonecross.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Stonecross/stonecross.woff2') format('woff2'); 
}

.stonecross {
    font-family: 'Stonecross';
}

@font-face {
    font-family: 'Fondamento';
    src: url("/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.ttf");
    src: local('Fondamento-Regular.ttf'), 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.ttf') format('truetype'),
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.woff') format('woff'); 
         url('/extensions/UniversalLanguageSelector/data/fontrepo/fonts/Fondamento/Fondamento-Regular.woff2') format('woff2'); 
}

.fondamento {
    font-family: 'Fondamento';
}



/* Give a bit of space to the TOC */
#toc {
	margin: 10px 0;
}

/*
 * Allow limiting of which header levels are shown in a TOC;
 * <div class="toclimit-3">, for instance, will limit to
 * showing ==headings== and ===headings=== but no further.
 * Used in [[Template:TOC]]
 */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}


/* Table Formatting - Standard */
.ep-default {box-shadow: 4px 4px 4px #8c775c;}

.ep-default th, .ep-default td {
   border: 1px solid #000;
   padding: 2px 5px 2px 5px;
}

.ep-default tr {background-color: #EBE7D2;}

.ep-default tr:nth-child(even) {background-color: #FFFBE6;}

.ep-default th {
   background-image: -moz-linear-gradient(top, #BB8E53, #FFEC8D); 
   background-image: -o-linear-gradient(top, #BB8E53, #FFEC8D);
   background-image: -webkit-linear-gradient(top, #BB8E53, #FFEC8D);
   background-image: linear-gradient(top, #BB8E53, #FFEC8D);
   color: #000;
}

/* Table Formatting - No Default Header Colors */
.ep-default2 {box-shadow: 4px 4px 4px #8c775c;}

.ep-default2 th, .ep-default2 td {
   border: 1px solid #000;
   padding: 2px 5px 2px 5px;
}

.ep-default2 tr {background-color: #EBE7D2;}

.ep-default2 tr:nth-child(even) {background-color: #FFFBE6;}



/* Background Colors */
/* Main content panel */
#content {
     background-color: #F2ECCE;
}

/* Logo Space */
#p-logo {
     background-color: #FFFBE6; 
/*     margin-left: -6px;  */
/*     width: 130px;       */
}

#p-logo a,
#p-logo a:hover {
     display: block;
     text-decoration: none;
}

/* Top of screen */
#mw-head {
     background-color: #FFFBE6; 
}

/* Sidebar */
#mw-panel {
     background-color: #FFFBE6; 
}

/* Bottom of screen */
#footer {
     background-color: #FFFBE6; 
}

/* Categories pane */
#catlinks {
     background-color: #FFFBE6; 
}

#mw-page-base { 
     background-color: #FFFBE6; 
}

/* Everywhere else */
body { 
     background-color: #FFFBE6; 
}



/* Mobile-Friendly Two Column Display (Full Page)*/
#page-2column-left {
    float: left;
    width: 49%;
}
#page-2column-right {
    float: right;
    width: 49%;
}
@media only screen and (max-width: 850px) {
    /* Decouple the columns on narrow screens */
    #page-2column-left,
    #page-2column-right {
        float: inherit;
        width: inherit;
    }
}



/* Responsive Columns on Main Page */
.section-content {
    box-sizing: border-box;
}

.columns {
    -moz-column-width: 200px; /* Firefox */
    -webkit-column-width: 200px; /* webkit, Safari, Chrome */
    column-width: 200px; 
    margin-right: 2px;
}

.columns ul {
    list-style-type: none;
    white-space: nowrap;
}

.columns2 {
    -moz-column-width: 35px; /* Firefox */
    -webkit-column-width: 35px; /* webkit, Safari, Chrome */
    column-width: 35px; 
    margin-right: 2px;
}

.columns2 ul {
    list-style-type: none;
    white-space: nowrap;
}

.clear {
   clear: left;
   height: 1px;
   margin-top: -1px;
}


/* Bestiary Header Formatting */
h2.bestiary_main {
    color: #584500;
    font-family: Stonehenge;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    border-bottom-style: none;
}

h2.bestiary {
    color: #584500;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: none;
}

h3.bestiary {
    color: #584500;
    font-weight: bold;
    font-size: 125%;
    border-bottom-style: none;
}

/* Trap Header Formatting */
h2.trap_main {
    color: #232c71;
    font-family: Stonehenge;
    font-size: 250%;
    font-weight: bold;
    text-align: center;
    border-bottom-style: none;
}

h2.trap {
    color: #232c71;
    font-family: Stonehenge;
    font-size: 200%;
    font-weight: bold;
    border-bottom-style: none;
}

h3.trap {
    color: #232c71;
    font-weight: bold;
    font-size: 125%;
    border-bottom-style: none;
}


/* CSS for Point Buy Calculator */

input.ptby[type="number"] {
 width: 3em;
}

table.ptby {
 text-align: center;
 background-color: #F2ECCE;
}
table.ptby tr {
 background-color: #fffbe6;
}
table.ptby tr:nth-child(2n) {
 background-color: #ebe7d2;
}
table.ptby th, table.ptby td {
 border: 1px solid black;
 padding: 5px;
}

div.ptby-rowflex {
 flex-flow: row wrap;
 align-items: flex-start;
 display: flex;
 justify-content: space-between;
 position: fixed;
 top: 0;
 left: 0;
 width: 90vw;
}

div.ptby-rowflex > div, div.ptby-rowflex > table {
 flex: 0 0 auto;
}

div.ptby-rowflex > div {
 text-align: right;
}

div.ptby-colflex {
 display: flex;
 flex-flow: column nowrap;
 justify-content: space-around;
 min-height: 15em;
}

div.ptby-colflex > div {
 flex: 0 0 auto;
}

.ptby-bold {
 font-weight: bold;
}