/* Compensate fixed-top navbar */
body {
  padding-top: 50px;
}

/***************
 * Page header *
 ***************/

.fake-page-header {
  padding-top: 50px;
}

.fake-page-header h1 small {
  font-style: italic;
}

.fake-page-header .info {
  text-align: right;
  color: grey;
  font-style: italic;
}

.fake-page-header .info a {
  color: grey;
}

.row.motto {
  text-align: center;
  width: 100%;
  color: blue;
  font-style: italic;
  padding-bottom: 20px;
}

.row.motto h4 small {
  color: orange;
  font-variant: small-caps;
}

img.identity {
  float: right;
  width: 80px;
  padding: 2px;
  margin-left: 10px;
  border: 1px solid orange;
  vertical-align: text-bottom;
}

/* Group label */
.vis-label {
  font-weight: bold;
}

/*********
 * Items *
 *********/

.vis-item {
  border-width: 0;
}

.vis-item.vis-range {
  border-radius: 4px;
}

/* This is important for details styling */
.vis-item-content {
  width: 100%;
}

/* Background items */
.vis-item.vis-background.hamcos {
  background: #FFE4DA;
  color: #5383B8;
}

.vis-item.vis-background.geberit {
  background-color: #FFF6DA;
  color: #5383B8;
}

.vis-item.vis-background img.logo {
  float: left;
  margin-right: 5px;
  padding: 1px;
  border: 1px solid lightgray;
}

/* Group-header "reserves" an empty line for background titles */
.group-header {
  height: 40px !important;
}

/* Used skills */
.vis-item.used, .vis-item.used a, li.used {
  background-color: #D9EDF7;
  color: #2C4B6C;
}

/* Implemented skills */
.vis-item.implemented, .vis-item.implemented a.details-toggle, li.implemented {
  background-color: #337AB7;
  color: white !important;
}

/* Contributed skills */
.vis-item.contributed, .vis-item.contributed a.details-toggle, li.contributed {
  background-color: #AAAAAA;
  color: white !important;
}

/* Developed skills */
.vis-item.developed, .vis-item.developed a.details-toggle, li.developed {
  background-color: #2ECC40;
  color: white !important;
}


/**********
 * Legend *
 **********/

#legend li {
  padding: 10px;
}


#pdf img {
  width: 30px;
}

.caret {
  border-top: 4px solid;
}

/**********
 * Images *
 **********/

img.logo {
  width: 40px;
  vertical-align: middle;
}

/* Small logo */
img.logo.small {
  width: 25px;
}


/***********
 * Details *
 ***********/

.vis-item-content .details {
  white-space: normal;
  font-size: 80%;
  margin: 5px 0 0 0;
  padding: 5px;
  background: white;
  width: auto;
  color: #2C4B6C;
}

/* block won't tolerate the zoom button on the same line */
.vis-item-content .details-toggle {
  display: inline-block;
}

/* Hide zoom button by default */
.vis-item-content .zoom {
  visibility: hidden;
}

/* Show zoom button when hovering on title */
.vis-item-content:hover .zoom {
  visibility: visible;
}

#legend li, .details-toggle {
  cursor: context-menu;
  display: block;
}

.vis-item-content .details .details-toggle {
  padding: 5px;
}

.navbar-btn a, .navbar-btn a:hover {
  color: black;
  text-decoration: none;
}

/**************
 * Responsive *
 **************/

/* No github ribbon on mobile */
@media (max-width: 768px) {
  .github-ribbon {
    display: none;
  }

  .navbar-nav .open .dropdown-menu {
    position: fixed;
    top: 48px;
    background: #f8f8f8;
    border-top: 1px solid #e7e7e7;
    margin: 0;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    width: 100vw;
  }

  /* Always show zoom */
  .vis-item-content .zoom {
    visibility: visible;
  }
}

@media (min-width: 769px) {
  #legend {
    min-width: 400px;
  }

  #info {
    min-width: 400px;
  }
}

@media (max-width: 650px) {
  .header-text {
    display: none;
  }

}

/* Remove group labels on phones (portrait) */
@media (max-width: 500px) {
  .vis-panel.vis-left {
    display: none;
  }
}