STYLE FOR OUR NIFTY TOOLBAR

DRAW_WITH_YOUR_FACE_TOOLBAR.css

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

#tools {
   list-style: none;
   margin: 4px 0px 0px 10px;
   padding: 0;
   float: left;
}

#tools li {
   width: 24px;
   height: 24px;
   padding: 5px;
   -moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,-4px 4px #000,-5px 5px #000,-6px 6px #000;
   -webkit-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,-4px 4px #000,-5px 5px #000,-6px 6px #000;
   box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,-4px 4px #000,-5px 5px #000,-6px 6px #000;
   border: 1px solid black;
   display: inline-block;
   background: #f5f5f5;
   text-align: center;
   text-shadow: 0px 0px 7px #CCC;
   position: relative;
   z-index: 3;
   margin-top: -1px;
}

#tools li:first-child {
   margin-bottom: 0;
}

#tools li:first-child:hover {
   margin-bottom: -4px;
}

#tools li:hover {
   -moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
   -webkit-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
   box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,inset -2px 2px 2px #333;
   margin-top: 3px;
   margin-left: -3px;
   margin-bottom: -4px;
   cursor: pointer;
}

#tools li:first-child:active {
   margin-top: 4px;
   margin-left: -6px;
   margin-bottom: -5px;
}

#tools li:active {
   -moz-box-shadow: 0px 0px white;
   -webkit-box-shadow: 0px 0px white;
   margin-top: 3px;
   margin-left: -6px;
   margin-bottom: -4px;
   box-shadow: inset -3px 3px 4px #333;
   cursor: pointer;
}

#tools li.selected-cursor {
   -moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
   -webkit-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
   box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,inset -2px 2px 2px #333;
   margin-top: 3px;
   margin-left: -3px;
   margin-bottom: -3px;
   cursor: pointer;
}

#tools li.selected-color {
   -moz-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
   -webkit-box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000;
   box-shadow: -1px 1px #000,-2px 2px #000,-3px 3px #000,inset -2px 2px 2px #333;
   margin-top: 3px;
   margin-left: -3px;
   margin-bottom: -3px;
   cursor: pointer;
}

#tools .trash {
   background: white;
   background-image: url(https://s3.amazonaws.com/facedrawing/calendar-trash-icon.jpeg);
   background-repeat: no-repeat;
   background-position: 1px 1px;
}

#tools .purple {
   background: purple;
}

#tools .black {
   background: black;
}

#tools .green {
   background: green;
}

#tools .blue {
   background: blue;
}

#tools .yellow {
   background: yellow;
}

#tools .red {
   background: red;
}

#tools .orange {
   background: orange;
}

#tools .small {
   background-image: url(https://s3.amazonaws.com/facedrawing/dots.png);
   background-position: 2px -137px;
   background-repeat: no-repeat;
}

#tools .medium {
   background-image: url(https://s3.amazonaws.com/facedrawing/dots.png);
   background-position: 2px -68px;
   background-repeat: no-repeat;
}

#tools .large {
   background-image: url(https://s3.amazonaws.com/facedrawing/dots.png);
   background-position: 2px 2px;
   background-repeat: no-repeat;
}