/* column view container */
.column-view-container {
  width: 100%;
  padding: 0;
  height: 554px;
  border: 1px solid #ccc;
  background: #FFF;
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
}

/* the composition div for colums */
.column-view-composition {
  display: table;
}

/**/
.column {
  display: table-cell;
  position: relative;
  border-right: 10px solid #E1E9F0;
}

.column:last-child {
  border-right: 0;
}

/* for error messages */
.column > p {
  margin: 10px;
  color: #666;
}

/* for column listing */
.column ul.hcols-list {
  margin: 0;
  height: 554px;
  padding: 0;
  width: 300px;
  overflow-y: auto;
  list-style: none;
}

.column ul.hcols-list li.hcols-node {
  position: relative;
  margin: 0;
  padding: 10px 20px 10px 10px;
  overflow: hidden;
  -o-text-overflow: ellipsis; /* pour Opera 9 */
  text-overflow: ellipsis; /* pour le reste du monde */
  color: #000;
}

.column ul.hcols-list li.hcols-node:hover {
  cursor: pointer;
}

.column ul.hcols-list li.hcols-node i {
  position: absolute;
  top: 9px;
  right: 5px;
}

.column ul.hcols-list li.hcols-node:hover, .column ul.hcols-list li.hcols-node.active {
  background: #DBE8EF;
}

.column .search {
  margin: 0;
  padding: 5px;
}

.column .search input {
  width: 100%;
  margin: 0;
}

/* icon type, could be replace with FontAwesome */
[class^=icon-], [class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: 0.3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../images/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

.icon-chevron-right {
  background-position: -456px -72px;
}

.icon-globe {
  background-position: -336px -144px;
}

.icon-file {
  background-position: -23px -24px;
}

.hcolumn-note {
  color: #777;
}

.info-column {
  padding: 5px;
  padding-top: 15px;
}