/* line 2, ../scss/color.scss */
html {
  height: 100%; }

/* line 6, ../scss/color.scss */
body {
  background: #fff;
  height: 100%;
  min-height: 100%; }

/* line 12, ../scss/color.scss */
h1 {
  margin: 30px 0 0;
  padding: 0;
  font-family: 'Satisfy', cursive;
  font-size: 280%;
  text-align: center; }

/* line 20, ../scss/color.scss */
h2 {
  font-family: 'Open Sans', sans-serif; }

/* line 24, ../scss/color.scss */
ul {
  list-style-type: none; }

/* line 28, ../scss/color.scss */
#wrapper {
  position: relative;
  height: 100%; }

/* line 34, ../scss/color.scss */
#formBox {
  background: #f7f7f7;
  margin: 30px 0 5px;
  padding: 30px 0 28px;
  font-size: 140%; }
  /* line 39, ../scss/color.scss */
  #formBox form {
    text-align: center; }
    /* line 41, ../scss/color.scss */
    #formBox form .mode {
      width: 220px;
      float: left; }
    /* line 45, ../scss/color.scss */
    #formBox form .color {
      display: inline-block; }
      /* line 47, ../scss/color.scss */
      #formBox form .color .form-control {
        border: 4px solid #ddd;
        width: 260px;
        display: inline;
        height: 55px; }
    /* line 54, ../scss/color.scss */
    #formBox form .percent {
      display: inline-block;
      margin-left: 5px; }
      /* line 57, ../scss/color.scss */
      #formBox form .percent .form-control {
        border: 4px solid #ddd;
        width: 70px;
        height: 55px;
        display: inline;
        text-align: right; }
      /* line 64, ../scss/color.scss */
      #formBox form .percent span {
        color: #ddd; }
  /* line 69, ../scss/color.scss */
  #formBox #history {
    width: 395px;
    margin: 5px auto 0;
    text-align: left; }
    /* line 73, ../scss/color.scss */
    #formBox #history span {
      display: inline-block;
      cursor: pointer;
      width: 10px;
      height: 10px;
      margin: 5px 5px 0 0; }

/* line 84, ../scss/color.scss */
#content {
  width: 850px;
  margin: 0 auto 30px; }

/* line 93, ../scss/color.scss */
.colorBox h2 {
  margin-bottom: 15px;
  font-size: 180%; }
/* line 97, ../scss/color.scss */
.colorBox div {
  float: left;
  width: 50px;
  margin: 0 15px 10px 0;
  color: #777; }
  /* line 102, ../scss/color.scss */
  .colorBox div span {
    display: block;
    width: 50px;
    height: 50px;
    margin: 3px 0 4px; }
  /* line 108, ../scss/color.scss */
  .colorBox div p {
    font-size: 80%; }
/* line 115, ../scss/color.scss */
.colorBox#lightenS li.c0 span {
  background: #ed5565; }
/* line 120, ../scss/color.scss */
.colorBox#lightenS li.c5 span {
  background: #ef6c7a; }
/* line 125, ../scss/color.scss */
.colorBox#lightenS li.c10 span {
  background: #f2838f; }
/* line 130, ../scss/color.scss */
.colorBox#lightenS li.c15 span {
  background: #f49aa4; }
/* line 135, ../scss/color.scss */
.colorBox#lightenS li.c20 span {
  background: #f7b1b9; }
/* line 140, ../scss/color.scss */
.colorBox#lightenS li.c25 span {
  background: #f9c8cd; }
/* line 145, ../scss/color.scss */
.colorBox#lightenS li.c30 span {
  background: #fcdfe2; }
/* line 150, ../scss/color.scss */
.colorBox#lightenS li.c35 span {
  background: #fef6f7; }
/* line 155, ../scss/color.scss */
.colorBox#lightenS li.c40 span {
  background: white; }
/* line 160, ../scss/color.scss */
.colorBox#lightenS li.c45 span {
  background: white; }
/* line 165, ../scss/color.scss */
.colorBox#lightenS li.c50 span {
  background: white; }
/* line 170, ../scss/color.scss */
.colorBox#lightenS li.c55 span {
  background: white; }
/* line 175, ../scss/color.scss */
.colorBox#lightenS li.c60 span {
  background: white; }

/* line 184, ../scss/color.scss */
footer {
  border-top: 1px solid #eee;
  width: 850px;
  margin: 30px auto;
  padding: 20px 0 0;
  color: #999; }
  /* line 192, ../scss/color.scss */
  footer .clearfix .left {
    width: 400px;
    margin: 0;
    float: left; }
  /* line 197, ../scss/color.scss */
  footer .clearfix .right {
    width: 400px;
    margin: 0;
    float: right;
    text-align: right; }
    /* line 202, ../scss/color.scss */
    footer .clearfix .right li {
      display: inline-block; }
      /* line 204, ../scss/color.scss */
      footer .clearfix .right li.twitter {
        width: 100px; }
  /* line 210, ../scss/color.scss */
  footer p a {
    color: #999;
    text-decoration: underline; }
  /* line 214, ../scss/color.scss */
  footer #copyright {
    margin: 0;
    padding: 0; }