/**
 * MARGIN SHORTCUTS
 * these are shortcuts to the margin-{side} CSS property
 */
/**
 * MARGIN - H / V
 * these are shortcuts to set only horizontals or vertical margins without alter existing rules
 * you can use these mixins with one value applied to the left/right, top/bottom margins or
 * you can use them with separated values
 */
/**
 * PADDING SHORTCUTS
 * these are shortcuts to the padding-{side} CSS property
 */
/**
 * PADDING - H / V
 * these are shortcuts to set only horizontals or vertical paddings without alter existing rules
 * you can use these mixins with one value applied to the left/right, top/bottom paddings or
 * you can use them with separated values
 */
/**
  * TRANSPARENT BACKGROUND COLOR
  * this mixin will set the opacity level of the background color of a block level element
  * pass the color as hex, and the mixin will create the rgba values.
  */
/* GRID GENERATOR */
body {
  width: 100%;
  *zoom: 1;
}
body:before,
body:after {
  content: "";
  display: table;
}
body:after {
  clear: both;
}
body:before,
body:after {
  content: "";
  display: table;
}
body:after {
  clear: both;
}
/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* list styles */
li > p {
  margin: 0 !important;
}
.list-blocks li {
  background: #eaeaea;
  padding: 10px;
  margin-bottom: 10px;
  word-wrap: break-word;
  overflow: hidden;
  display: block;
}
.list-blocks li label {
  font-size: 100%;
  font-weight: bold;
  display: block;
  column-span: all;
}
.list-lined {
  margin: 0;
  padding: 0 !important;
}
.list-lined li {
  border-bottom: 1px solid #ddd;
  list-style: none;
  padding: 2px 0;
}
/*************************************************
 Key-value lists
**************************************************/
ul.key-value-list {
  margin: 0;
  padding: 0;
}
ul.key-value-list li {
  *zoom: 1;
  list-style-type: none;
}
ul.key-value-list li:before,
ul.key-value-list li:after {
  content: "";
  display: table;
}
ul.key-value-list li:after {
  clear: both;
}
ul.key-value-list li:before,
ul.key-value-list li:after {
  content: "";
  display: table;
}
ul.key-value-list li:after {
  clear: both;
}
ul.key-value-list label {
  color: #999;
  display: inline-block;
  font-weight: 100;
  margin: 0 4px 0 0;
  text-align: right;
  padding-right: 6px;
  min-width: 8em;
}
ul.key-value-list + span {
  display: inline-block;
}
ul.key-value-list span {
  word-wrap: break-word;
}
ul.key-value-list span.value {
  font-size: inherit;
}
ul.key-value-list.lined li {
  border-bottom: 1px solid #eee;
  padding: 4px 0px;
}
ul.key-value-list.small {
  font-size: small;
}
ul.key-value-list.small label {
  min-width: 6em;
}
ul.key-value-list.stacked li {
  display: block;
  margin-bottom: 10px;
}
ul.key-value-list.stacked li label {
  text-align: left;
  font-size: 110%;
}
ul.key-value-list.wide label {
  min-width: 10em;
}
/*************************************************
 Twitter Bootstrap overrides
**************************************************/
/* a bootstrap grid addition to allow for 5 equal columns */
.col-sm-1of5 {
  width: 20%;
  /* Extra Small Devices, Phones */
}
@media only screen and (max-width: 768px) {
  .col-sm-1of5 {
    width: 100%;
  }
}
.popover {
  max-width: 300px;
  word-wrap: break-word;
}
.modal-backdrop.in {
  height: 200%;
  z-index: 1001;
}
/* slide out side panels ****************************/
.side-panel {
  background-color: #222;
  color: #bbb;
  height: 100%;
  width: 500px;
  /*********************/
  position: fixed;
  top: 0;
  z-index: 10;
  /*********************/
  -webkit-transition: all 0.75s ease;
  -moz-transition: all 0.75s ease;
  transition: all 0.75s ease;
}
.side-panel.left {
  left: -500px;
}
.side-panel.left.open {
  left: 0px;
}
.side-panel.right {
  right: -500px;
}
.side-panel.right.open {
  right: 0px;
}
.side-panel-inner {
  padding: 20px;
}
.side-panel-tab {
  background: #222;
  color: #888;
  font-size: 1.2em;
  height: 32px;
  padding: 6px 10px 7px 10px;
  position: absolute;
  top: 100px;
  width: 32px;
  -webkit-transition: all 0.75s ease;
  -moz-transition: all 0.75s ease;
  transition: all 0.75s ease;
}
.right .side-panel-tab {
  margin-right: 100%;
  right: 0;
}
.left .side-panel-tab {
  margin-left: 100%;
  left: 0px;
}
.side-panel-tab:hover {
  cursor: pointer;
}
/* image placeholder **************/
/* placeholder no image */
.no-image-placeholder {
  background: #fff;
  background-position: 50% 50%;
  height: 165px;
  position: relative;
  width: 100%;
}
.no-image-placeholder.large {
  height: 300px;
}
.no-image-placeholder.large span {
  top: 45%;
}
.no-image-placeholder span {
  position: absolute;
  top: 40%;
  color: #333;
  display: block;
  text-align: center;
  width: 100%;
}
.no-image-placeholder .overlay {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff, endColorstr=#bfffffff);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff, endColorstr=#bfffffff);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
