$glow-color: lighten(#c2710b,20%);

@mixin cms-intro-coloring($name, $color2) {
  $color: $color2;

  ul > li[aria-controls="#{$name}"] {
    a:hover {
      border-bottom: 5px $color solid;
      color: $color;
    }

    &.ui-tabs-active a {
      border-bottom: 5px $color solid;
      color: $color;
    }
  }

  & > div[id="#{$name}"] {
    i.fa { color: $color; }
    h1 { color: $color }
  }
}


#cms-intro-tabs {
  $icon-height: 1.5em;
  $tabs-font-size: 1.2em;
  line-height: 1.5;

  @include cms-intro-coloring('getting-started', $link-color);
  @include cms-intro-coloring('tips-and-tricks', $link-color);
  @include cms-intro-coloring('quick-links', $link-color);

  .links {
    margin-bottom: 4em;
  }
  // tabs selector
  & > ul {
    @include horizontal-list;
    margin-bottom: 2em;
    width: 100%;

    li a {
      min-width: 8em;
      padding: 0.5em;
      margin-right: 1em;
      padding-left: 0;
      font-size: $tabs-font-size;
      border-bottom: 5px #a3a3a3 solid;
      display: block;
    }
  }

  & > div {
    position: relative;
    top: 1.5em;
    padding-right: 2em;

    h1 {
      margin-top: 1em;
      font-size: 1.6em
    }

    ul {
      list-style: none outside;

      li {
        margin-left: 0;
     }
    }

    p {

     em[id] {
       cursor: help;
       border-bottom: 1px dashed grey;
       font-weight: bold;
       font-type: normal;
     }

     a {
       text-decoration: underline;
     };
    }

    table { margin-bottom: 2em; }
    th {  text-align: right;  }
    td {  padding-left: 1em;  }
    th, td {  padding-top: 1em;   }
  }
}


#cms-sidebar {
  li.glowing.active, li.glowing {
    @include background(linear-gradient($glow-color, darken($glow-color,20%)));
    border-color: $glow-color;
  }

  input.glowing { background-color: $glow-color; }
}

#recent-templates{
  margin-bottom: 4em;
  float: left;
  width: 40%;

  a {
    max-width: 96%;
    display: inline-block;
    @include ellipsis();
    padding-right: 4%;


  }
}
