tiredpixel/tunefl

/* = colors */

/* http://colorschemedesigner.com/#0051Tw0sCw0w0 */

@color-p-1: #E40000;
@color-p-2: #AB2B2B;
@color-p-3: #940000;
@color-p-4: #F23C3C;
@color-p-5: #F26D6D;

@color-sa-1: #E46700;
@color-sa-2: #AB652B;
@color-sa-3: #944300;
@color-sa-4: #F28E3C;
@color-sa-5: #F2A96D;

@color-sb-1: #B70067;
@color-sb-2: #89225C;
@color-sb-3: #770043;
@color-sb-4: #DB3794;
@color-sb-5: #DB63A7;

@color-w: #FFFFFF;
@color-b: #000000;


/* = main */

.clear {
  clear: both;
}

html, body {
  font-family: 'Ubuntu', sans-serif;
  background-image: url("background.png");
  background-attachment: fixed;
  padding-top: 0;
  color: @color-b;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  word-wrap: break-word;
  margin-bottom: .5em;
}

h1, h2 {
  color: @color-sb-3;
}

h3, h4, h5, h6 {
  color: @color-sb-4;
}

p {
  text-align: justify;
  font-size: 13px;
  line-height: 1.5em;
}

a,
a:hover {
  color: @color-p-1;
}


/* = main */

.main {
  background-color: #E9D8C9;
  background-color: rgba(233, 216, 201, .8);
  box-shadow: 1px 1px 5px @color-sa-2;
  margin-bottom: 25px;
  padding: 25px;
}


/* = bar */

.bar {
  background-image: url("bar_background.png");
  background-attachment: fixed;
  box-shadow: 1px 1px 5px @color-sb-2;
  margin-bottom: 25px;
}


/* = header */

.header {
  height: 150px;
  position: relative;
  
  .logo {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 228px;
    height: 100px;
    z-index: 1;
  }
  
  .treble_clef {
    position: absolute;
    top: 0;
    right: 135px;
    background-image: url("header_treble_clef.png");
    background-repeat: no-repeat;
    width: 80px;
    height: 150px;
    z-index: 0;
  }
}


/* = footer */

.footer {
  height: 100px;
  position: relative;
  
  .bass_clef {
    position: absolute;
    bottom: 0;
    left: 25px;
    background-image: url("footer_bass_clef.png");
    background-repeat: no-repeat;
    width: 96px;
    height: 100px;
    z-index: 0;
  }
  
  .credits {
    position: relative;
    padding: 25px;
    color: @color-sb-5;
    z-index: 1;
    
    p {
      text-align: center;
    }
    
    a {
      color: inherit;
    }
    
    a:hover {
      text-decoration: underline;
      color: inherit;
    }
  }
  
  .links {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: @color-sb-5;
    z-index: 1;
    
    p {
      margin: 0;
      
      a {
        color: inherit;
      }
      
      a:hover {
        text-decoration: underline;
        color: inherit;
      }
    }
  }
}


/* = about */

.about {
  text-align: center;
  
  h1 {
    margin: 0;
  }
  
  h3 {
    margin: 1em 0;
  }
  
  p {
    text-align: center;
  }
}


/* = forms */

form {
  margin-right: 10px;
  
  label {
    margin-bottom: 0;
  }
  
  input[type='text'],
  textarea {
    width: 100%;
    display: block;
  }
  
  textarea {
    height: 5em;
  }
  
  .control-group {
    margin-bottom: 5px;
  }
  
  .actions {
    text-align: right;
    margin-right: -10px;
  }
}

form#new_score {
  margin-bottom: 0;
  
  textarea#score_music {
    font-size: 1.5em;
  }
}

/* = scores */

.score {
  background-color: @color-w;
  box-shadow: 1px 1px 5px @color-sa-2;
  margin-bottom: 25px;
  padding: 25px;
  overflow-x: scroll;
  
  .title {
    color: @color-b;
  }
  
  .composer {
    color: @color-b;
    font-style: italic;
  }
  
  img {
    max-width: none;
    margin: 25px 25px 25px 0;
  }
  
  p.music {
    font-size: 1em;
    color: @color-p-5;
    margin-top: 2em;
  }
}