MediaWiki:Common.css

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

/* Overall wrapper, enclosing the example image and text. */

div.lofe-examples
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
}

div.lofe-examples-side-by-side {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:nowrap;
}


div.lofe-examples-flex {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
}

/* Individual example wrappers */

div.lofe-example {
  float:left;
  margin-left:auto;
  margin-right:auto;
}

div.lofe-example-flex {
  padding:1em;
}

div.lofe-examples-side-by-side div.lofe-example {
  max-width:49%;
}

/* Image examples */

.lofe-image, .lofe-image img {
  width:100%;
}

.lofe-image img {height:auto;}

div.lofe-text {
  width:100%;
  max-width:50em;
  margin-top:0;
  background-color: white;
}

/* Text examples */

div.lofe-text pre {
  background-color: white;
  margin-top:0;
}

/* Allow shrinking side by side text slightly to fit better in medium screens */

div.lofe-size-small {
  font-size:85%;
}

div.lofe-size-normal {
  font-size:100%;
}

/* Discussion block */

div.lofe-discussion {
  display:block;
  clear:both;
  margin-top:1em;
  background-color: white;
  padding:0.5em;
}


/* Set the min and max widths for the image and text elements   */
/* Currently the image gets ONLY a max and the text ONLY a min. */

/* minimums with m */

div.lofe-m20 {min-width:20em;}
div.lofe-m25 {min-width:25em;}
div.lofe-m30 {min-width:30em;}
div.lofe-m35 {min-width:35em;}
div.lofe-m40 {min-width:40em;}
div.lofe-m45 {min-width:45em;}
div.lofe-m50 {min-width:50em;}
div.lofe-m55 {min-width:55em;}
div.lofe-m60 {min-width:60em;}
div.lofe-m65 {min-width:65em;}
div.lofe-m70 {min-width:70em;}

/* maximums with x */

div.lofe-x20 {max-width:20em;}
div.lofe-x25 {max-width:25em;}
div.lofe-x30 {max-width:30em;}
div.lofe-x35 {max-width:35em;}
div.lofe-x40 {max-width:40em;}
div.lofe-x45 {max-width:45em;}
div.lofe-x50 {max-width:50em;}
div.lofe-x55 {max-width:55em;}
div.lofe-x60 {max-width:60em;}
div.lofe-x65 {max-width:65em;}
div.lofe-x70 {max-width:70em;}


/* This code will be applied to all pages in the LOFE */

.ns-3002 #content, .ns-3001 #content {background-color:#f6f6f6; }

.ns-3002 #content .navbar, .ns-3001 #content .navbar {
  background-color:white;
}

/* Remove the sidebar from LOFE pages */

.ns-3002 #mw-panel {visibility: hidden;}
.ns-3002 #content {margin-left:0;}