firsts.css

*************CLEARFIX**************/
* {
  box-sizing: border-box;
}

.cf:before, .cf:after {
  display: table;
  content: ' ';
}

.cf:after {
  clear: both;
}

/**************GENERAL**************/

html, body {
  height: auto;
}

.main-container {
  width: 500px;
  height: auto;
  border-radius: 5px;
  background: #fff;
  margin: 0 auto;

  -webkit-box-shadow: 6px 6px 14px -7px rgba(0, 0, 0, .35);
  -moz-box-shadow: 6px 6px 14px -7px rgba(0, 0, 0, .35);
  box-shadow: 6px 6px 14px -7px rgba(0, 0, 0, .35);
}

/**************HEADER**************/

header {
  margin: 0 auto;
  width: 500px;
  height: 71px;
  border-radius: 5px 5px 0 0;
  background: #414242;
  border-bottom: 1px solid #EEECEC;
  display: inline-block;
  overflow: hidden;

}

#search-icon {
  float: left;
  margin-top: 12px;
  margin-right: 6px;
  padding-left: 63px;
  width: 38px;
  height: 46px;
  text-indent: -9999px;
  background: url('images/images.png') no-repeat -16px -132px;
}

#logo {
  float: left;
  font-size: 40px;
  color: #fff;
  font-family: 'Sofia', cursive;
  padding-left: 95px;
  margin-top: 1px;
  text-transform: lowercase;
  font-weight: 100;
}

#add-new-icon {
  float: right;
  margin-top: 15px;
  margin-right: -29px;
  padding-left: 71px;
  width: 36px;
  height: 39px;
  text-indent: -9999px;
  background: url('images/images.png') no-repeat -100px -34px;
}

#add-new-icon.hover {
  float: right;
  margin-top: 15px;
  margin-right: -29px;
  padding-left: 71px;
  width: 36px;
  height: 39px;
  text-indent: -9999px;
  background: url('images/images.png') no-repeat -206px -34px;
 }

/**************MAIN LIST**************/


#list-nav {
   margin: -3px 0 0 0;
   height: auto;
   background-color: #fff;
}

#list-nav li {
  list-style: none;
  width: 500px;
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 42px;
  color: #00a8e4;
  text-indent: 20px;
  padding: 9px 0px 0 0px;
  display: inline-block;
}

.checkbox {
  background: url('images/images.png') no-repeat -32px -339px;
  margin-top: 15px;
  margin-left: -48px;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  z-index: 1;
  text-indent: -9999px;
}

.new-list-item {
  display: inline-block;
  margin-left: -14px;
}

.remove {
  background: url('images/images.png') no-repeat -32px -444px;
  display: inline-block;
  width: 30px;
  height: 30px;
  float: right;
  margin-top: 14px;
  margin-right: 62px;
  text-indent: -9999px;

}

.tag {
  background: url('images/images.png') no-repeat -27px -246px;
  width: 21px;
  margin-top: -7px;
  margin-left: 41px;
  height: 28px;
  margin-bottom: 10px;
}
.tag-item {
  font-family: 'Muli', sans-serif;
  list-style: none;
  width: 382px;
  margin-left: -12px;
  font-size: 15px;
  text-transform: lowercase;
  color: #414242;
  font-weight: 300;
}

/*#list-nav li:nth-child(3n+2){
  color: #e78f26;
}

#list-nav li:nth-child(3n+1){
  color: #5dc6dc;
}

#list-nav li:nth-child(3n+3){
  color: #aece24;
}*/

.completed {
  text-decoration: line-through;

}

.completed .checkbox {
  background-position: -133px -339px;
  margin-left: -41px;
  width: 37px;
  height: 30px;
}


/**************ADD NEW**************/
#add-new-container {
  width: 100%;
  height: 73px;
  background-color: #ffffff;
  display: none;
}

#add-new-item {
  width: 75%;
  height: 25px;
  background: #fff;
  border: 2px solid #aece24;
  display: inline-block;
  float: left;
  margin: 14px 0 0 6px;
}
 #add-button {
   float: right;
   font-family: 'Muli', sans-serif;
   font-size: 18px;
   z-index: 400;
   margin: 14px 5px 0 0;
   border-radius: 5px;
   background: #fff;
   border: 2px solid #aece24;
   display: inline-block;
 }

fieldset {
  border: none;
}