body { background: #ccc; color: #222; }

p { line-height: 1.3em; }

#skrollr-body { background: white !important; margin: 0 auto; border-left: solid 1px #777; border-right: solid 1px #777;}
#header { padding: 5px 15px; }
#login-status {  position: relative;  float: right; margin-top: -10px; }
#search-top-box {   display: none; }
#content-wrap {   display: inline-flex; width: 100%; }
#side-bar {   width: 145px; flex-grow: 1; padding-right: 30px; }
#side-bar img {   width: 145px; float: left; margin-top: -25px; margin-bottom: 10px; opacity: 0.7; }
#side-bar img:hover { opacity: 1; }
#side-bar ul { padding-left: 0em; }
#side-bar li { width: 145px; float: right; list-style-type: none; background: #eee; border: solid 1px white;}
#side-bar li:hover { background: #ddd; }
#side-bar li a:hover { background: transparent; }
#side-bar li a { display: inline-block !important; width: 145px !important; }
#search-form .text {     width:71px;  }

#main-content {
  margin: 0;
  min-width: 200px;
  flex-grow: 500;
}

#u-top-box {
  width: 100%; border: 1px solid #777; background-color: #6633cc;   padding: 3px; text-align: center; color: white; font-weight:        bold; margin: 1px 0px; box-sizing: border-box;
}

#u-top-box a { color: white !important; }

#u-upper-container, #u-lower-container, #u-bottom-container {
  display: flex; 
  width: 100%;
}
#u-upper-left, #u-lower-right, #u-bottom-left {
  background-color: #78faa4; 
  flex: 1 1 0;
  padding: 10px;
  margin: 1px; 
  border: 1px solid #777;
}

#u-lower-right-container { display: flex; }
#u-lower-right-container div {flex-grow: 1; flex-shrink: 1; flex-basis: 0; }

#u-upper-right, #u-lower-left, #u-bottom-right {
  background-color: #f7a177; 
  flex: 1 1 0;
  padding: 10px;
  margin: 1px;
  border: 1px solid #777;
  position: relative;
}

#u-upper-left img {
   width: 80%;
   max-width: 450px;
   min-width: 200px;
}


hr { margin: 1em 0 !important; }
.image-container { padding-top: 0px !important; }

div.pages-tag-cloud-box a.tag {
    padding: 0 0.4em 0 0 !important;
}

a {
  color: #492591 !important;
  text-decoration: underline;
}


a[href^="/system:page-tags/tag/"], a[href^="/system:page-tags-all/tag/"], a[href^="/system:page-tags-hidden/tag/"]  {
  color: #208040 !important;
  border-bottom: none !important;
  white-space: nowrap;
}
a[href^="/activity:"] {   text-decoration-color: #ff8040; }
a[href^="/game:"] {  text-decoration-color: #40ff80; }
a[href^="/glossary:"] {
  color: black !important;
  text-decoration-color: #492591;
  position: relative;
}

a[href^="http"]:not([href*="wikidot.com"]):not([href*="www.flickr.com"]):not([href*="twitter.com"]):not([href*="musicgames.wdfiles.com"]):after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

.regular-link a {
  color: #492591 !important;
  text-decoration-color: #492591 !important;
}

a[href$="skip"] { 
float: right;
margin-top: -36px;
font-size: 12px;
margin-right: 5px;
}

.inline-block ul {
  margin: 0;
  padding: 0;
}
.inline-block li {
  display: inline-block;
}
.blockquote {
border: 1px dashed #999;
padding: 1em;
background-color: #f4f4f4;
}
.wiki-standalone-button {
    background: #eee;
    padding: 5px;
    border: solid 1px #ddd;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 1px 1px;
    clear: right;
    margin-bottom: 5px;
}

.right { float: right; clear: right; }
.left { float: left; }
#page-content .image-container.floatright img {
    width: 302px;
}
.floatright { clear: right; }

div.draft {
  background-color: #bbb;
  padding: 20px;
}

div.box-float, div.setBox, div.def {
    display: block;
    position: relative;
    width: 302px;
    float: right;
    clear: right;
    margin-left: 30px !important;
    box-sizing: border-box;
    border: solid 1px #666;

}

div.setBox {
  margin: -4px 0 15px 30px;
  padding: 8px 10px;
  background: #ddddff;
}
div.def {
  opacity: 0.7;
  padding: 8px 10px;
  color: #333;
  margin: -4px 0 15px 30px;
}
div.def p, div.setBox p { margin: 0; }

#breadcrumbs {
  font-size: 80%;
  margin-top: -10px;
  margin-bottom: 20px;
}

.show0, .hide1 { display: none }

.comments-box { padding-top: 20px; clear: left; }

/* mobile layout */
@media screen and (max-width: 800px) {
   #u-upper-container, #u-lower-right-container, #u-bottom-container {
     flex-direction: column;
  }
  #u-lower-container {
    flex-direction: column-reverse;
  }
 #u-glossaryBox { margin-left: 0px !important; clear: both; }
}
@media screen and (max-width: 500px) {
  .no-mobile {
     display: none;
   }
   #content-wrap, #u-upper-container, #u-lower-container {
     flex-wrap: wrap;
  }
 
  #side-bar { width: 100%; }
}

@media screen and (min-width: 1200px) { 
  #skrollr-body { width: 1200px; }
}


/* only specific categories below */

/* sub - games included in other articles */

.sub { display: none; }


/* glossary - also has a box-float class */

#u-glossaryBox {
    background: #bbb; 
    padding: 2px; 
    margin-bottom: 15px;
  }
#u-glossaryBox > div {   padding: 0 10px 10px 8px; }
#u-glossaryBox h2 {      margin: 0 0 3px 0; }
#u-glossaryBox ul {       padding: 0 0 20px 0; margin-top: 8px; }
#u-glossaryBox li {
    float: left;
    padding-right: 10px;
    list-style: none;
    margin-bottom: 4px;
    font-size: 85%;
    letter-spacing: -0.09em;
  }



/* thumbnails */

.thumbnail {
  float: left;
  position: relative;
  width: 75px;
  height: 75px;
  border: solid 1px black;
  overflow: hidden;
  text-align: center;
}
.thumbnail img {
  width: 75px;
  height: 75px; 
  object-fit: cover;
}
.thumbnail a[href^="/activity"], .thumbnail a[href^="/game"], .thumbnail a[href^="/glossary"] {
position: absolute;  
display: block;
width: 100%;
height: 38px;
bottom: 0;
text-align: center;
font-size: 9px;
background: white;
opacity: 0;
}
.thumbnail:hover a { opacity: 1}

/* articles hub */
.box-image, .practical-image, .people-image, .books-image, .write-image, .draft-image {
  background-repeat: no-repeat;
  background-position: 98% 4%;
  background-size: 35px;
}
.box-image { background-image: url('http://musicgames.wikidot.com/local--files/hub:wiki/box.png'); }
.books-image { background-image: url('http://musicgames.wikidot.com/local--files/hub:wiki/books.png'); }
.people-image { background-image: url('http://musicgames.wikidot.com/local--files/hub:wiki/people.png'); }
.practical-image { background-image: url('http://musicgames.wikidot.com/local--files/hub:wiki/practical.png'); }
.write-image { background-image: url('http://musicgames.wikidot.com/local--files/hub:wiki/write.png'); }
.draft-image { background-image: url('http://musicgames.wikidot.com/local--files/hub:wiki/draft.png'); }