/*** MAIN ***/
html {
  height: 100%;
}

body {
  font-family: $page-font-family;
  font-size: $page-font-size;
  background: $main-bg;
  color: $main-font-color;
  margin: 0;
  overflow: auto;
  height: 100%;
}

img, svg {
  image-rendering: auto;
}

h3 {
  font-size: $page-font-size;
  font-weight: bold;
}

// override bootstrap
a {
  color: $link-color;
}

a:hover {
  color: $link-color-hover;
}



h4 {
  padding-left: 4px;
  margin-bottom: 2px;
}
h5 {
  padding-left: 4px;
  margin-bottom: 2px;
}

hr {
  background-color: $panel-default-border;
  color: $panel-default-border;
  border: 0;
  border-top: 1px solid $panel-default-border;
  clear: both;
  height: 1px;
}

a:link {
  text-decoration: underline;
}

a:visited {
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}

.studiolink svg, .studiolink img {
  width: 30px;
  height: auto;
}

#ajaxHeader {
  float: left;
}

.bootstrap-container.col-sm-offset-3 {
  background-color: $main-bg;
  margin-top: $navbar-height + 20px;
}

.bootstrap-container {
  background-color: $main-bg;
  margin-top: 80px;

  .dropdown-menu em {
    padding: 0 10px 0 10px;
  }

  .dropdown-menu em a {
    color: $link-color;
  }
}

/* ??? */
// Fix ajax loader in the edit view
// Since the z-index is inline the only way to override it is to use the !important
.mask {
  z-index: 2 !important;
}

#ajaxloading_c {
  z-index: 11 !important;
}

::selection {background: $selection-bg;color:$selection-color;} /* Safari */
::-moz-selection {background: $selection-bg;color:$selection-color;} /* Firefox */

@media (max-width: 750px) {

  .bootstrap-container.col-sm-offset-3 {
    margin-top: $navbar-height + 20px;
  }

  .bootstrap-container {
    margin-top: $navbar-height + 20px;
  }
}

@media (max-width: 1130px) {
  .bootstrap-container.col-md-offset-2 {
    margin-left: 0;
  }

  .col-md-10, .bootstrap-container {
    width: 100%;
  }

}

.content {
  margin: 0 0 0 0;
}

@media (max-width: 750px) {
  .content {
    margin: 0 0 0 0;
    width: 100%;
  }
}