// a4.io dark theme
$background-color: #060606;
$background-light: #222;
$color: #808080;
$color-title-link: #fefefe;
$color-summary: #ddd;
$color-light: #bbb;
$color-menu-background: #222;
$color-note-link: #666;
$primary-color: #f7ca18;

$background-color: #eee; 
$background-light: #ccc;
$color: #111;
$color-title-link: #333;
$color-light: #555;
$color-summary: #111;
$color-note-link: #333;
$color-menu-background: #ddd;
$primary-color: #1d781d; 

.note-container p:first-child {
        margin-top: 0;
}
html, body {
	  height: 100%;
}
body {
  background-color: $background-color;
  color: $color;
  display: flex;
  flex-direction: column;
}
.base-container {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
a, h1, h2, h3, h4, h5, h6 {
  color: $color-title-link;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.gold {
  color: $primary-color;
}

#header {
  margin-bottom: 40px;

  .title {
    font-size: 1.2em;
    padding-right: 15px;
    color: $color-title-link;
  }
  .title:hover {
    text-decoration: none;
  }
  .subtitle-username {
    color: $color;
  }
  .menu {
    padding: 20px 0 10px 0;
    ul {
      display: inline;
      list-style-type: none;
      padding: 0;
      li {
        float:left;
        padding-right:10px;
        margin-bottom:10px;
      }
    }
    a {
      padding: 5px 10px;
        small.badge {
          background-color: $color-menu-background;
          color: $color-light;
          border-radius: 2px;
          margin-left: 5px;
          padding: 3px 5px 0px 5px;
          font-weight: bold;
        }
    }
    a.selected {
      background: $primary-color;
      color: $background-color;
      border-radius:2px;
    }
    a:hover {
      background: $primary-color;
      color: $background-color;
      text-decoration: none;
      border-radius: 2px;
      .badge {
        color: $primary-color;
        background: $background-color;
      }
    }
  }
}
#container {
  width: 90%;
  max-width: 720px;
  margin: 40px auto;
}
#container #notes {
  margin-top: 20px;
}
.actor-box {
  display: block;
  text-decoration: none;
  margin-bottom: 40px;

  .actor-icon {
    width: 120px;
    border-radius:2px;
  }

  h3 { margin: 0; }

  .actor-inline {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.actor-box-big {
  display: block;
  text-decoration: none;

  .actor-box-wrapper {
    margin-bottom:40px;

    .actor-icon {
      width:120px;
      border-radius:2px;
    }

    h3 { margin: 0; }
  }
}
.note {
  display: flex;
  margin-bottom: 70px;
  .l {
    color: $color-note-link;
  }
  
  .h-card {
    flex: initial;
    width: 50px;
  }
  
  .u-photo {
    width: 50px;
    border-radius: 2px;
  }
  .note-wrapper {
    flex: 1;
    padding-left: 15px;
  }

  .bottom-bar { margin-top:10px; }

  .img-attachment {
    max-width:100%;
    border-radius:2px;
  }

  h3 {
    font-size: 1.1em;
    color: $color-light;
  }

  strong { font-weight:600; }

  .note-container {
    clear: right;
    padding:10px 0;
  }
}

.bar-item {
  background: $color-menu-background;
  padding: 5px;
  color: $color-light;
  margin-right:5px;
  border-radius:2px;
}
button.bar-item {
  border: 0
}
form.action-form {
  display: inline;
}
.perma {
  font-size: 1.25em;
}
.bottom-bar .perma-item {
  margin-right: 5px;
}
.bottom-bar a.bar-item:hover {
  text-decoration: none;
}
.footer > div  {
  width: 90%;
  max-width: 720px;
  margin: 40px auto;
}
.footer a, .footer a:hover, .footer a:visited {
  text-decoration: underline;
  color: $color;
}
.summary {
  color: $color-summary;
  font-size: 1.3em;
  margin-top: 60px;
  margin-bottom: 50px;
}
.summary a, .summay a:hover {
  color: $color-summary;
  text-decoration: underline;
}
#followers, #following, #new {
  margin-top: 50px;
}
#admin {
  margin-top: 50px;
}
textarea, input {
  background: $color-menu-background;
  padding: 10px;
  color: $color-light;
  border: 0px;
  border-radius: 2px;
}
input {
  padding: 10px;
}
input[type=submit] {
  color: $primary-color;
  text-transform: uppercase;
}