@import "font-awesome";

$font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
$header-font: "GillSansLight";

$black: #000;
$white: #FFF;
$error-color: #FFF;
$error-background: #827D7E;
$dark-grey: #333;
$medium-grey: #827D7E;
$light-grey: #CCC;

$primary-color: #F17D04;
$primary-admin-color: #F17D04;
$disabled-button-color: #CCC;
$cancel-button-color: #F17D04;
$reverse-text: #FFF;

$header-gradient-light: #F59503;
$header-gradient-dark: #ED6406;
$header-height: 160px;

$footer-height: 300px;

/* See `.combobox-clear-button` for an example of this mixin in use */
@mixin icon($icon) {
  @extend .fa;
  @extend .fa-#{$icon}:before;
}

@import "roadmap-hacks";
@import "roadmap-form";
@import "roadmap-tabs";

/* Main page layout: header, content, footer */
html.dmponline {
  background-color: $white;
}

h1, h2, h3, h4, h5,
a, a:hover, a:visited, a:active, a:link {
  color: $primary-color;
}

/* This class will ensure that the item is hidden for sighted users and that it does not take up space */
/* For example:  <h2 aria-hidden="false" class="aria-only"><%= _('Create account') %></h2> */
.aria-only {
  visibility: hidden;
  height: 0;
  width: 0;
}

.primary-color {
  color: $primary-color;
}

/* Used to override standard h2,h3,h4,etc. sizing */
.small-header {
  font-size: 20px;
}

.main_header {
  margin-bottom: 20px;
  background: linear-gradient($header-gradient-dark, $header-gradient-light);

  div.header_left {
    width: auto;

    .home_logo {
      margin: 0 10px 0 0;
    }
  }
}

.content {
  width: 100%;
  background-color: $white;
  border-radius: 3px;
  margin-top: 25px;
  padding: 10px 20px;
}

.content-two-column {
  width: 100%;

  .column-left {
    display: inline-block;
    width: 55%;
  }
  .column-right {
    display: inline-block;
    width: 40%;
    height: auto;
    margin-left: 35px;
    vertical-align: top;
  }
}

.inline {
  display: inline-block;
}
.centered {
  text-align: center;
}

.left-indent {
  margin-left: 15px;
}

div.roadmap-info-box {
  position: absolute;
  float: right;
  top: 180px;
  right: 12%;
  background-color: $white;
  padding: 8px 20px;
  border-radius: 5px;
  vertical-align: middle;

  span {
    padding-left: 30px;
  }
  .fa {
    position: absolute;
    top: 10px;
    background: transparent;
    color: $black;
    font-size: 16pt;
    margin-right: 15px;
  }
}

table.dmp_table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  border-bottom: 0px;
  margin-bottom: 20px;
  table-layout: fixed;

  thead th, tbody td {
    padding: 6px 15px 6px 6px;
    overflow: hidden;
  }

  .col-tiny {
    width: 5%;
  }
  .col-small {
    width: 10%;
  }
  .col-medium {
    width: 20%;
  }
  th.col-large {
    width: 35%;
  }

  a.dmp_table_link i {
    font-size: 14pt;
    margin-right: 5px;
  }
}

.checkbox-label {
  display: inline-block;
  font-size: 1em;
  margin: 0;
  padding: 2px;
}

.checkbox-input {
  border: none;
  vertical-align: middle;
  height: 17px;
  margin: 0 4px 0 0;
  padding: 0;
}

.project-title-container {
  width: 60%;
}