site.css

---
---

{% include base.css %}
body, input, textarea { color:#404040; }
h1 { font-size:32px; line-height:36px; }

a       { color:#279acb; }
a:hover { text-decoration:underline; }

.dark a, 
.dark a:hover { color:#fff; text-decoration:none; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a { color:#2699cb; }

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover { text-decoration:none;}

.button {
  background:#2babe2;
  color:#fff;
  display:inline-block;
  border-radius:4px;
  text-align:center;
  padding:8px 20px;
  font-weight:bold;
  box-shadow:0 4px 0 0 rgba(0,0,0,0.10);
  -webkit-transition:background-color 100ms;
     -moz-transition:background-color 100ms;
       -o-transition:background-color 100ms;
          transition:background-color 100ms;
  }
  .dark .button {
    box-shadow:0 4px 0 0 rgba(0,0,0,0.25);
    }
  .dark .button:hover,
  .button:hover {
    text-decoration:none;
    }
  .button:hover {
    background-color:#279acb;
    }
  .button:active {
    position:relative;
    top:2px;
    box-shadow:none;
    }

.round { border-radius:4px; }
.dark { color:#fff; }
.strong { font-weight:bold; }
.block { display:block; }
.capitalize { text-transform:capitalize; }

.icon:before,
.rcon:after,
.sprite {
  background:transparent url(img/sprite@2x.png) no-repeat 0 0;
  display:inline-block;
  text-indent:-999em;
  background-size:640px 140px;
  }
  .icon:before,
  .rcon:after {
    content:'';
    width:20px;
    height:20px;
    vertical-align:middle;
    }
  .icon:before { margin-right:5px; }
  .rcon:after  { margin-left:5px; }

  .sprite.maptime {
    background-position:0 0;
    width:385px;
    height:140px;
    top:-10px;
    }
  .sprite.marker {
    background-position:-385px 0;
    width:100px;
    height:140px;
    }
  .sprite.mozilla {
    background-position:-485px -100px;
    width:140px;
    height:40px;
    }

.rcon.right-arrow:after, .icon.right-arrow:before { background-position:-485px 0; }
.rcon.left-arrow:after, .icon.left-arrow:before  { background-position:-505px 0; }

.fill-light   { background-color:#eee; }

.fill-blue            { background-color:#2babe2; }
a.fill-blue:hover     { background-color:#279acb; text-decoration:none; }
.fill-purple          { background-color:#652e8e; }
a.fill-purple:hover   { background-color:#5b2980; text-decoration:none; }
.fill-green           { background-color:#009347; }
a.fill-green:hover    { background-color:#008440; text-decoration:none; }
.fill-yellow          { background-color:#fcee1e; }
a.fill-yellow:hover   { background-color:#e2d61b; text-decoration:none; }
.fill-orange          { background-color:#f79420; }
a.fill-orange:hover   { background-color:#de851d; text-decoration:none; }
.fill-red             { background-color:#ec2127; }
a.fill-red:hover      { background-color:#d41e23; text-decoration:none; }

.fill-darken0         { background-color:rgba(0,0,0,0.10); }
a.fill-darken0:hover  { background-color:rgba(0,0,0,0.15); }
.fill-darken1 { background-color:rgba(0,0,0,0.25); }

.fill-chapter {
  /* Replace this with a map of your city */
  /*background-image:url(https://s3.amazonaws.com/images.m2i.stamen.com/20191119/watercolor_jqItsZAKyJ0.jpeg);*/ 
  background-repeat:no-repeat;
  background-size:cover;
  max-width:100%;
  }

.thumbnail {
  display:inline-block;
  width:48px;
  height:48px;
  background: white 50% 50% no-repeat;
  background-size: 48px;
  }
.popup {
  display:none;
  position:absolute;
  right:-24px;
  bottom:48px;
  width:100px;
  z-index:10;
  box-shadow:0 2px 0 0 rgba(0,0,0,0.10);
  color:#404040;
  background:#fff;
  }
  .popup:after {
    content:'';
    position:absolute;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #fff;
    bottom:-5px;
    right:45px;
    }
  .popup span {
    width:80px;
    display:block;
    }
  .thumbnail:hover .popup { display:block; }

.popup-group      { position:relative; }
.popup-group > a:hover + .popup { display:block; }

.popup.popup-big {
  width:320px; 
  right:auto;
  top:0;
  left:-330px;
  bottom:auto;
  }
  .popup.popup-big:after {
    top:10px;
    bottom:auto;
    right:-8px;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:8px solid rgba(0,0,0,0.10);
    border-right:none;
    }

.followers {
  max-height:480px;
  position:relative;
  }
  .followers:after {
    background:red;
    content:'';
    display:block;
    position:absolute;
    bottom:0;
    width:100%;
    height:40px; 
    background: -webkit-linear-gradient(top, transparent, #fff);
    background:    -moz-linear-gradient(top, transparent, #fff);
    background:     -ms-linear-gradient(top, transparent, #fff);
    background:      -o-linear-gradient(top, transparent, #fff)
    }

@media only screen and (max-width:800px) {
  .sidebar, .content { width:50%; }
  .sprite.maptime { max-width:100%; }
}
@media only screen and (max-width:640px) {
  .sidebar, .content { width:100%; }
  .sidebar { padding:0; }
  header .limiter { padding:120px 0 0; }
}