body {
  background-color: #F0F0F0;
  font-family: verdana, arial, helvetica;
  font-size: 10px;
}

.editable {
  border: 0;
  background-color: inherit;
  text-decoration: inherit;
}

.list-name {
  font-size: 18px;
  width: 90%;
}

.item-label {
  font-size: 12px;
  width: 270px;
  vertical-align: top;
}

.todo-item {
  list-style: none;
}

.todo-list {
  margin: 3px;
  background-color: #FFFFFF;
  width: 320px;
  padding: 5px;
  float: left;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

  box-shadow: #D2D2D2 -1px 0px 0px 0px, 
              #E6E6E6 -1px 0px 0px 0px, 
              #D2D2D2 1px 0px 0px 0px, 
              #E6E6E6 2px 0px 0px 0px, 
              #E8E8E8 0px -1px 0px 0px, 
              hsla(0, 0%, 95%, 0.298039) 0px 2px 0px 0px, 
  -moz-box-shadow: #D2D2D2 -1px 0px 0px 0px, 
              #E6E6E6 -1px 0px 0px 0px, 
              #D2D2D2 1px 0px 0px 0px, 
              #E6E6E6 2px 0px 0px 0px, 
              #E8E8E8 0px -1px 0px 0px, 
              hsla(0, 0%, 95%, 0.298039) 0px 2px 0px 0px, 
              #B1B1B1 0px 1px 0px 0px;
  -webkit-box-shadow: #D2D2D2 -1px 0px 0px 0px, 
              #E6E6E6 -1px 0px 0px 0px, 
              #D2D2D2 1px 0px 0px 0px, 
              #E6E6E6 2px 0px 0px 0px, 
              #E8E8E8 0px -1px 0px 0px, 
              hsla(0, 0%, 95%, 0.298039) 0px 2px 0px 0px, 
              #B1B1B1 0px 1px 0px 0px;
              #B1B1B1 0px 1px 0px 0px;
}

@media screen and (max-width: 800px) {
  .todo-list {
    width: 93%; 
  }
  .item-label {
    margin-bottom: 12px;
    width: 80%; 
  }
}

.todo-ul {
  padding: 0;
} 

.status-done .item-label {
  text-decoration: line-through;
}

.status-ongoing {
  background-color: lightgreen; 
}

.icon {
  background-image: url(../img/glyphicons-halflings.png);
  width: 14px;
  height: 14px;
  text-indent: -1000px;
  display: inline-block;
  opacity: 0.5;
}

.icon:hover {
  opacity: 1;
}

.delete-icon {
  background-position: -312px 0;
}

.trash-icon {
  background-position: -456px 0;
}