MediaWiki:Mobile.css

This page is a System Message. The code in these pages is used to alter the wiki site itself
Only Administrators are able to alter system messages. If you think one should be changed, leave a note on the talk page or message User:gboyers.

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* CSS placed here will affect users of the mobile site */
/** center table columns styles **/
table.center-col-1 td:first-child,
table.center-col-2 td:first-child + td,
table.center-col-3 td:first-child + td + td,
table.center-col-4 td:first-child + td + td + td {
    text-align: center;
}

/** character maps styles for GXT article **/
table.charmap {
    text-align: center;
}
table.charmap td, table.charmap th {
    width: 2em;
    height: 2em;
}
table.charmap td {
    font-family: monospace;
    font-size: 150%;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/** styles for Menu article **/
table.menu tr:target {
    background-color: lightblue;
}
table.menu td:first-child td:first-child + td {
    width: 25em;
}




/* FIX WIDTH ON MOBILE */

body {
width: 100%;
margin:0;
}

/* PREVENT FLOATS */

div.tright, div.floatright, table.floatright {
    float: none;
}





/* FLEX */


.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

.flex-container div {
    border: none;
    background-color: white;
    margin: 5px;
}


.flex-container div span a, .flex-container div span a.new {
    color: #333333;
    padding: 1px 3px 1px 3px;
    text-align: center;
    font-weight: bold;
    margin: auto;
    display: block;
    width: 100%;
    text-decoration: none;
}
.flex-container div span a.new {
    color: darkred;
}


.flex-container div:hover, .flex-container div:hover div {
    background-color: red;
}

.flex-container div:hover span a, .flex-container div span a:hover {
  color: white;
  text-decoration:none;
}


.flex-container img {
    object-fit: contain;
    width: 100px;
    height: 50px;
}

.nofit img { object-fit: contain; }