MediaWiki: Common.css
From Travel Strategies
/* CSS placed here will be applied to all skins */
/*Adjust Navbar Styles*/
.navbar-collapse, .navbar-header, .navbar-inner, .dropdown-menu {background-color: #004953;}
.navbar-default .navbar-brand {
font-weight: bold;
font-size: 18px;
position:relative; top:-6px;
line-height: 80%;
color: whitesmoke;}
.navbar-default .navbar-nav>li>a {color: whitesmoke; font-size: 14px;}
.navbar-default .navbar-nav .open {color: whitesmoke;}
.dropdown-menu>li>a {color: whitesmoke;}
/*Adjust Tweeki Boostrop Font Basics*/
body, blockquote {
font-size: 16px;
font-family: "Segoe UI Semilight", "Roboto", -apple-system, system-ui, BlnkMacSystemFont, "Helvetica Neue";
line-height: 1.8;}
p {margin-bottom: 1.2em;}
.infobox > p {margin-bottom: .2em;}
/* Fix issue with visited link colors being too dark */
a {color: #20B1BC;}
a:visited {color:#1a939c;}
a:hover {color: #006978;}
/*Custom header formatting */
h2, h4 {text-align: center;}
.firstHeading {text-align: left;}
h1, h3, h4 {
margin-top: 36px;
-webkit-margin-before: 36px;
margin-bottom: .5em;
color: #455e64;}
h2 {
margin-top: 72px;
-webkit-margin-before: 36px;
margin-bottom: 1em;
}
h3 {
border-top: 1px solid #819ca9;
padding-top: .5em;}
h2 + h3, h3:first-of-type {
-webkit-margin-before: .6em;
margin-top: .6em;}
/*Set up basic image handling*/
.inlineimg {
margin-top: .6em;
margin-bottom: 1.2em;}
.grid {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 2em;}
.scaledimg {
width: 95%;
height: auto;}
.fullimg {
width: 100%;
height: auto;}
/*Convert blockquote to 'blurb' */
blockquote {
font-weight: bold;
border-color: #004953;
padding-top: 4px;
padding-bottom: 4px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 12.5px;
padding-left: 12.5px;
padding-right: 12.5px;}
.box {
background-color: #f4f7f8;
margin: 2em 0em 2em 0em;
padding: 1.5em 1.5em 4px 1.5em;}
.boxtitle {
text-align: center;
margin-bottom: .6em;}
.infobox {
border: 1px solid black;
background-color: #f4f7f8;
padding: .5em;}
.infoboxheader {
font-weight: bold;
font-size: 85%;
margin-top: 1.5em;
margin-bottom: .2em;}
.top, .mobile {display: none;}
@media screen and (max-width: 992px) {
.mobile, .top {display: block;}
.middle, .desktop {display: none;}
}
/*Adjust paragraph spacing in lists
This only applies to lists within the main div, so it doesn't affect template chrome */
/*Add extra space to the bottom of lists*/
div.main ul {margin-bottom:1.2em;}
div.main ol {margin-bottom:1.2em;}
/*Add extra space between paragraphs within lists and more space between bullet and text */
div.main ul p {
margin-bottom: 6px;
padding-left: 0em;}
div.main ol p {
margin-bottom: 6px;
padding-left: 0em;}
div.main li {
margin-bottom: .6em;
margin-top: 1.2em;
padding-left: 0em;}
div.main ul.tight li {
margin-bottom: .75em;
margin-top: 0em;}
div.main ul.tight {margin-top: .5em;}
/*Modify bullet lists for custom symbols*/
/*Clear the normal unordered list styling */
div.main ul li {
list-style-image: none;
position: relative;
margin-left: 0;
list-style-type: none;}
div.main ol li {
margin-left: -2em;
padding-left: .5em;}
div.main ol p {margin-left: -1.5em;}
/* Add custom bullets to the different types of lists */
div.main .bulletlist > li:before {
content: "\25c6";
position: absolute;
color: #004953;
left: -1.5em;
}
div.main .checklist > li:before {
content: "\25a2";
color: DimGray;
position: absolute;
left: -1.5em;
}
div.main .simplelist > li:before {
content: "-";
position: absolute;
left: -1.5em;}
/*Add a custome bullet to sublists in every type of lists */
div.main ul ul li:before {
content: "-";
position: absolute;
left: -1em;}
div.main ol ul li:before {
content: "-";
position: absolute;
left: -1em;
}
/*Cusotmize Table Styles */
td > p {margin-bottom: .6em;}
.datatable td > p {margin-top: .6em;}
td > p:last-child {margin-bottom: 1.2em;}
/*set the header cell style for all datatables*/
.datatable tbody > tr > th {
font-size: 14px;
vertical-align: bottom;
text-align: center;
background-color: #e3e9ed;}
.basictable td > p {margin-bottom: 0px;}
/*Center table*/
.datatable {
margin: auto;
margin-bottom: 24px;
margin-top: 0px;}
/*adjust basic cell properties for all datatables*/
table.datatable td {
font-size: 16px;
vertical-align: top;
text-align: center;}
/*Special case left-aligned tables */
table.lefttable td {text-align: left;}
/*Adjust first column of basic table*/
table.basictable td:first-child, table.basictable th:first-child {
text-align: left;
font-weight: bold;}
/*Special handling for two line tables*/
.two-line tr:nth-of-type(odd) {
border-bottom:1px solid black;}
table.comment tbody > tr:nth-of-type(odd) > td {font-size: 15px;}
.two-line tr > td:first-child {text-align: left;}
.two-line tr:nth-of-type(even) > td:first-child {font-weight:bold;}
/*scale font size on phones*/
@media screen and (max-width: 500px) {
table.datatable td {font-size: 14px;}
table.datatable tbody > tr > th {font-size: 12px;}
}
/*Styles for Credit Card "Tiles" */
/*Make the name of the credit cad small*/
.guidename {
margin-top: -.5em;
margin-bottom: 1.5em;
font-size: 80%;
text-align: center;}
/*When Card Title is below */
.namebelow {
font-size: 90%;
font-weight: bold;
text-align: center;
margin-bottom: 30px; }
/*For Image */
.gridimg {
margin-top: .5em;
text-align: center;
min-width: 100%;}
.imglist {margin-top: 8px;}
/*Styles to convert labelled list style tables into lists*/
.labels>tbody>tr>td {line-height: 1.8;}
.tilelist>tbody>tr>td {line-height: 1.8;}
.labels>tbody>tr>td:first-child {width: 2in;}
.tilelist>tbody>tr>td:first-child {width: 2in;}
.textlabel>tbody>tr>td:first-child {width: 1.5in;}
@media screen and (max-width: 500px) {
.labels>tbody>tr>th, .labels>tbody>tr>td {
border-top: none;
margin-left: 1em;}
.labels>tbody>tr>td:first-child {
width: 100%;
border-top: 1px solid #819ca9;}
.labels>tbody>tr, table.labels>tbody{
display:block;
width: 100%;}
.labels>tbody>tr> td {
display:block;
width:100%; }
.guidename {
margin-top: -.1em;
margin-bottom: 0px;}
.gridimg {width: 1in;}
.tilelist>tbody>tr>td:first-child {width: 1in;}
}
/*Styles to handle the navigation tiles*/
.tilelist > tbody > tr {
border-style: none;
border-color: white;}
.tile, .smalltile, .tilex {
max-width: 2in;
display: inline-block;
vertical-align: top;
text-align: center;
overflow: hidden;
margin: 0em .5em 2em .5em;
font-size: 93%;}
.smalltile {max-width: 1.2in;}
.tileimage, .tileimagex {
height: 1.34in;
width: 2in;
line-height: 1.34in;
margin-bottom: .5em;
text-align: center;
}
.smalltileimage {
height: .8in;
width: 1.2in;
line-height: .8in;
margin-bottom: .5em;}
@media screen and (max-width: 500px) {
.tile {max-width: 1.5in;}
.tileimage {
height: 1in;
width: 1.5in;
line-height: 1in;}
.smalltile, .tileimagex {max-width: 1in;}
.smalltileimage, .tileimagex {
height: .67in;
width: 1in;
line-height: .67in;}
}
.jumplist, .jumplist > p, .jumplist ul li {
margin-bottom: 0em;
font-size: 11pt;
line-height: 1em;
}
.sectionheader {
margin-top: 6px;
-webkit-margin-before: 6px;
margin-bottom: 1em;
color: #455e64;
/* border-top: 1px solid #819ca9; */
padding-top: .5em;
font-size: 100%;
font-weight: bold;
text-align: center;
}
.byline {
font-size: 80%;
text-align: center;
margin-top: -.6em;
margin-bottom: 1.8em;}
body.page-Home.action-view h1.firstHeading, body.Home.action-submit
h1.firstHeading { display: none; }
.toctext {
line-height: 5px;
font-size: 100%;}
#toc a {line-height: 1.2;
margin-bottom: .6em;}
#toc h2 {font-size: 80%;}
/*--------------EXPERIMENT SECTION-------------*/
@media screen and (max-width: 500px) {
.firstcol {
margin-top: 20px;
}
}
@media screen and (min-width: 500px) {
.labellist {display: table;}
.lrow {display:table-row;}
.firstcol {
color:green;
display: table-cell;}
.lcontent {display: table-cell;}}