/*
	total width as default is 500px
	#cp-container inner width = 480
	we use 8 icons -> ideally 60px each
*/
/*
    those - width, height, borderWidth must be kept in sync with JS and everything
    this gives as 60x60 box
*/
#cp-container {
  position: absolute;
  bottom: 50px;
  left: 10px;
  right: 10px;
  top: 15px;
  width: auto;
}
#cp-search-cont {
  /*Enabling this disables the input control, why?  =>  position: absolute; */
  top: 15px;
  left: 80px;
  width: 200px;
  height: 40px;
}
#cp-search-label {
  position: absolute;
  font-size: 2em;
  color: white;
  left: 10px;
  top: 17px;
}
.cp-charcont {
  -ms-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  /*
        those - width, height, borderWidth must be kept in sync with JS and everything
        this gives as 60x60 box
    */
  width: 58px;
  height: 58px;
  border: 1px solid transparent;
  float: left;
  text-align: center;
  overflow: visible;
}
/* any changes to the symbol span */
.cp-icon {
  /* keep in sync with box height */
  line-height: 58px;
  text-decoration: none;
}
#cp-iconlist {
  width: 100%;
  height: 100%;
  background: #EEE;
  overflow-x: hidden;
  overflow-y: scroll;
}
.cp-category-header {
  padding: 2em 1em 1.5em 1em;
  background: white;
  margin-bottom: 2px;
}
.cp-category-header p {
  font-size: 2em;
  text-align: center;
}
.cp-hilit {
  background: white;
  border-color: #6e8cbe;
}
.cp-section {
  margin-bottom: 10px;
}