@import "../../.components/bootstrap/less/bootstrap.less";
@import "../../.components/bootstrap-datepicker/less/datepicker.less";
@import "font-awesome.less";

/* Variables
   ----------------------------- */

// Grays
// -------------------------
@grayDark: rgb(72, 71, 72);
@grayLight: #bbb;
@grayLighter: #eff0ef;
@grayNeutral: #999;
@graySp: #777;

// Accent colors
// -------------------------
@blueBright: #4bcfe3;
@blueDark: #379ea9;
@blueLight: #3cb3c5;
@orange: #f05a24;
@orangeAlt: #f7931e;
@orangeLight: #f6921e;

// Scaffolding
// -------------------------
@bodyBackground: #fefefe;


// Links
// -------------------------
@linkColor: #41aaba;

// Typography
// -------------------------
@baseFontSize: 14px;
@baseLineHeight: 18px;
@customFont: 'Lato', sans-serif;
@textColor: @grayDarker;

// Buttons
// -------------------------
@btnPrimaryBackground: #008CB3;
@btnPrimaryBackgroundHighlight: darken(@btnPrimaryBackground, 10%);
@btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: @grayDarker;

// Forms
// -------------------------
@inputBorderRadius: 3px;

// Dropdowns
// -------------------------
@dropdownLinkBackgroundHover: @btnPrimaryBackground;
@dropdownDividerTop: #e5e5e5;
@dropdownDividerBottom: @white;

// Input placeholder text color
// -------------------------
@placeholderText: #aaa;

// Navbar
// -------------------------
@navbarHeight:                    25px;
@navbarBackgroundHighlight:       @btnPrimaryBackground;
@navbarBackground:                darken(@btnPrimaryBackground, 15%);

@navbarText:                      #fefefe;
@navbarLinkColor:                 #fefefe;
@navbarLinkColorHover:            @white;
@navbarLinkColorActive:           @navbarLinkColorHover;
@navbarLinkBackgroundActive:      @navbarBackground;

@navbarSearchBackground:          lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus:     @white;
@navbarSearchBorder:              darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor:    #ccc;

// Fluid grid
// -------------------------
@fluidGridColumnWidth:    6.382978723%;
@fluidGridGutterWidth:    2.127659574%;


@navBkgd:#a7e4ee;
@bdrColor: #ccc;

/* Base
   ----------------------------- */
body {
  padding-top: 47px;
  padding-bottom: 40px;
  background: @bodyBackground;
  font-family: @customFont;
}

h2 {
  color:@gray;
  font-size: 1.5em;
  margin-bottom:10px !important;
}

h3 {
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
  margin-bottom: 0 !important;
}


/* Header
   ----------------------------- */
.navbar {
  li form {
    margin: 0;
  }
  .navbar-inner {
    background: @grayDark;
    border: 0;
    .box-shadow(20px);
    padding-top: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);
       -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);
            box-shadow: 0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);
  }
  .navbar-text a {
    color:#fff;
  }
  .navbar-text a:hover {
    color:#fff;
  }
  .search-box {
    margin: 2px 5px;
    border:0;
    input[type="text"] {
      width: 250px;
      .border-radius(0);
      .box-shadow(none);
      margin-right: 0;
      padding-left: 10px;
      border-right: 0;
      float:left;
      &:active, &:focus {
        border-color:@bdrColor;
      }
    }
    .btn {
     height: 28px;
     margin: 0;
     padding: 0px 10px;
     .border-radius(0);
     .box-shadow(none);
     border: 1px solid @bdrColor;
     border-left: 0;
     float:left;
    }
    a {
      font-size:11px;
      color:@white;
      text-decoration:underline;
      &:hover {
        text-decoration:none;
      }
    }
    .btn {
      font-size:@baseFontSize;
      background-color: @white;
    }
    i {
      color:@grayDark;
    }
  }
}
.nav-logo {
  float: left;
  width: 140px;
  height: 30px;
  overflow: hidden;
  text-indent: -9999em;
  background: url(../img/logo.png) no-repeat;
  margin-bottom: 7px;
}
.brand {
  overflow: hidden;
  text-indent: -9999em;
}
.navbar .nav > li > a {
  padding: 3.5px 10px 3.5px;
}
.navbar .nav li.dropdown.open>.dropdown-toggle, 
.navbar .nav li.dropdown.active>.dropdown-toggle, 
.navbar .nav li.dropdown.open.active>.dropdown-toggle {
  background-color: transparent;
}
.navbar .nav.account-bar {
  margin-top: 7px;
  li.divider-v {
    padding: 1px 5px 0 0;
  }
  i {
    font-size:16px;
  }
  li.actions {
    a {
      padding-left: 3px;
      float:left;
      i {
        font-size:16px;
      }
    }
  }
  li {
    a {
      padding-left: 4px;
    }
  }
  img.avatar {
    float: left;
    margin-left: 5px;
    border-radius: 3px;
  }
}
.nav-box {
  background:@navBkgd;
  border-bottom: 0;
  margin-bottom: 0;
  padding: 1px 0;
  margin-left: -20px;
  margin-right: -20px;
}
nav.main-nav  {
  margin:4px 0 2px;
  overflow:hidden;
  ul {
    margin-left:0;
     li {
       list-style-type:none;
       &.current a {
         font-weight:700;
       }
      a {
        border:0;
        color:#353535;
        font-family:@customFont;
        font-weight: 400;
        display:block;
        float:left;
        text-transform:uppercase;
        font-size:16px;
        padding:4px 17px;
      }
      a.last {
        border-right:0;
      }
      a:hover {
        text-decoration:none;
        font-weight:700;
      }
    }
  }
}

nav.back {
  text-align: right;
  margin-bottom: 1em;
}
nav.back i {
  margin-right: 4px;
}
.navbar .nav.pull-right {
  margin-left: 10px;
  margin-right: 0;
}

.navbar-active {
  color: white;
}
body.data li#nav_data a {
  .navbar-active
}
body.maps li#nav_maps a {
  .navbar-active
}
body.documents li#nav_documents a {
  .navbar-active
}
body.people li#nav_people a {
  .navbar-active
}
body.groups li#nav_groups a {
  .navbar-active
}
.navbar-logout {
  clear: both;
  color: @grayDarker;
  display: block;
  font-weight: normal;
  line-height: 18px;
  padding: 3px 20px;
  white-space: nowrap;
  &:hover {
    text-decoration: none;
  color: @dropdownLinkColorHover;
  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
  }
}
/* Home Page
   ----------------------------- */
.hero-unit {
  background:none;
  padding:0 20px 20px 0;
  h1 {
    #title;
    font-weight:300;
  }
  .btn {
    background:@orangeAlt;
    &:hover {
      background:@orange;
    }
  }
.hero-unit-content {
    overflow:hidden;
    margin-top:10px;
  }
  .intro {
    float:left;
    width:68%;
    span {
      display:block;
      font-size:@baseFontSize;
      margin-top:15px;
    }
  }
  .btns {
    float:right;
    width:30%;
    text-align:right;
    a.btn-large {
      font-size:20px;
      margin:0 0 15px;
      width:160px;
    }
  }
}
/* Layers
   ----------------------------- */

/* Maps
   ----------------------------- */

/* Documents
   ----------------------------- */

/* People
   ----------------------------- */

/* Groups
   ----------------------------- */

/* Search
   ----------------------------- */

.lines (@p: 10px, @m: 10px, @bdr-width: 1px, @bdr-style: solid, @bdr-color: @grayNeutral) {
  padding-bottom:@p;
  margin-bottom:@m;
  border-bottom-width:@bdr-width;
  border-bottom-style: @bdr-style;
  border-bottom-color:@bdr-color;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/fontawesome-webfont.woff') format('woff'),
     url('../font/fontawesome-webfont.ttf') format('truetype'),
     url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

#title {
  text-transform:uppercase;
  font-family:@customFont;
  font-weight: 400;
}

.input-append, .input-prepend {
  font-size: 13px;
}


// Fix for openlayers
img.olTileImage {
  max-width: none;
}

// General layout styles



li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}


.people .profile-info {
  color: @grayDarker;
  margin-top: -10px
}
.people .dl-horizontal dd {
  margin-left: 30px;
}
.people .dl-horizontal dt {
  width: 15px;
}

.errorlist{
  color: @errorText;
}



footer.footer {
  background:@gray;
  color:@white;
  font-size:@baseFontSize - 2;
  padding-top:10px;
  position:fixed;
  left:0px;
  bottom:0px;
  height:35px;
  width:100%;

  a {
    color:@white;
    text-decoration:none;

    &:hover {
     text-decoration:underline;
    }
  }

  form {
    margin-bottom:10px;

    label, select {
      font-size:@baseFontSize - 2;
    }

    label {
      color:@grayNeutral;
    }
  }
}

.content-wrap {
  background:#fff;
  padding:30px 0 0 20px;
  width:980px;
  min-height:400px;
  margin:0 auto 30px;

  form {
    legend {
      #title;
      border-bottom:0;
    }

    label {

      span.note {
        font-weight:normal;
        font-size:@baseFontSize - 1;
        float:right;
      }
    }

    input[type="text"], input[type="password"], input[type="email"] {
      padding-top:10px;
      padding-bottom:11px;
      font-size:@baseFontSize + 2;
      color:@black;
    }

    textarea {
      font-size:@baseFontSize + 2;
      color:@black;
    }

    .form-actions {
      background:none;
      border:0;
      text-align:right;
      padding:0;

      button[type="submit"] {
        font-size:@baseFontSize + 6;
        font-weight:bold;
        margin-left:30px;
        padding-left:25px;
        padding-right:25px;
      }
    }

    &.form-search {
      input[type="text"] {
        padding-top:8px;
        padding-bottom:9px;
      }
    }
  }
}

// Elements
.meta {
  color:@graySp;
}
.meta p {
  margin-bottom: 0;
}

.btn {
  border:0;
  background:@blueLight;
  .box-shadow(none);
  color:@white;
  text-shadow:none;
  font-family:@customFont;
  font-weight: 700;

  &:hover {
    background:@blueDark;
    color:@white;
  }
  &.btn-mini {
    font-size: 11px;
    line-height: 14px;
    padding: 2px 6px;
  }
  &.btn-primary {
    background:@orange;

    &:hover {
      background:darken(@orange, 5%);
    }
  }

  &.btn-info {
    background: @orangeLight;

    &:hover {
      background: darken(@orangeLight, 5%);
    }
  }

  &.btn-secondary {
    background:none;
    color:@linkColor;

    &:hover {
      text-decoration:underline;
    }
  }
}

.action-group {
  .btn-group {
    /*float: left; */
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }

}

.btn-group {
  li {
    border-bottom: 1px solid @grayNeutral;
    text-transform: uppercase;
    margin: 0 4px;

    &:last-child {
      border-bottom: none;
    }
    a {
      padding-top: 5px;
      padding-bottom: 5px;
      .border-radius(3px);
    }
  }
}

#widget-title {
  background:@grayDark;
  padding:4px 15px;
  .border-radius(6px);
  color:@white;
  #title;
}

section.widget {
  margin-bottom:20px;

  h2 {
    #widget-title;
  }
}

section.widget-mini {
  h2 {
    #widget-title;
    padding:5px 10px;
    font-size:16px;

    a.btn {
      float:right;
      margin-top:5px;
    }
  }
}

.well {
  background-color: @white;
  border: 1px solid #ccc;
  .box-shadow(none);
}

.img-placeholder {
  background:#dddeda;
  border-radius: 4px;
  color:@graySp;
   display:table-cell;
  float:left;
  margin:0 15px 15px 0;
  text-align:center;
  vertical-align: middle;

  &.pl-153-113 {
    .size(60px, 80px);
    padding-top:20px;
  }

  &.pl-64-70 {
    .size(50px, 64px);
    padding-top:20px;
    font-size:11px;
  }
}

article h3 [class^="icon-"], [class*=" icon-"] {
      color: @blueLight;
      margin-left: 1px;
      margin-right: 5px;
    }
article a [class^="icon-"], [class*=" icon-"] {
      color: @grayLight;
      font-size: 14px;
      margin-left: 5px;
}
article a [class^="icon-star"], [class*=" icon-star"] {
  color: orange;
  margin-left:0;
}
article a:hover [class^="icon-"], [class*=" icon-"] {
  color: orange;
  margin-left:5px;
  }
article.abstract {
  border-top:1px solid @bdrColor;
  border-bottom:1px solid @bdrColor;
  padding:15px 0;
  margin-bottom:15px;
}

.search-count {margin: 10px 40px;}

.list article,
.grid article {
  .rating, .activity {
    color:@graySp;
  }
  .overall_rating {
    color: @orange;
    img {
      margin: 1px;
    }
  }
}
/* List */

.people .list article {
  margin-left: 0;
}
.people .search-count {margin-left: 0}

.list article {
  border-bottom: 1px solid @grayLight;
  clear: both;
  margin-left: 40px;
  .content {
    margin-left: 0;
  }

  h3 {
    color: @blueLight;
    font-size: 14px;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  p {
    font-size: 12px;
  }
  .item-header .img-missing,
  .item-header img {
    border: 1px solid @grayLight;
    display: block;
    float:left;
    height: 75px;
    margin: 0;
    margin-right: 10px;
    overflow: hidden;
    padding: 0;
    width: 100px;
  }

  .item-header .img-missing{
    background-color: @grayLight;
    color: @grayDark;
    border-radius: 4px;
  }

  .avatar .img-missing,
  .avatar img {
    border: 0;
    height: 50px;
    width: 50px;
  }


  .icon-placeholder {
    background: @grayLighter;
    border: 1px solid @grayLight;
    float: left;
    height: 75px;
    margin-right: 10px;
    overflow: hidden;
    padding: 0;
    i {
      background: @grayLighter;
      color: @grayLight;
      font-size: 4em;
      line-height: 1.2em;
      padding: 0 31px;
    }
  }
  .details {
    overflow: hidden;
  }
  .resources-abstract {
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }
  .sharing-date {
    margin-bottom: 10px;
  }
  .abstract-placeholder {
    display: none;
  }
}

body.home {
  .search-count {margin-left: 10px}
  article {margin-left: 0;}
}
body.people article .content {
  margin-left: 0;
}


/* Grid */
.grid article {
  height: 265px;
  width: 200px;
  margin: 0 -18px 20px 36px;
  overflow: hidden;
  padding: 0;
  float: left;
  border-radius: 4px;
  border: 1px solid @grayLight;

  img.thumb {
    height: 150px;
    margin:0;
  }

  h3 {
    color: @blueLight;
    font-size: 14px;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 190px;
  }

  p {
    padding-bottom: 10px;
    margin-left: 0;
  }

  .abstract {display: none}
  .abstract-placeholder {
    color: @grayNeutral;
    font-size: 10px;
    height: 130px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
  }

  img {
    margin: 0;
  }

  .avatar img {
    clear: both;
    margin-bottom: 30px;
    margin-left: 50px;
    margin-top: 30px;
  }

  .icon-placeholder {
    background: @grayLighter;
    float: left;
    height: 150px;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0;
    i {
      background: @grayLighter;
      color: @grayLight;
      font-size: 8em;
      line-height: 1.2em;
      padding: 0 63px;
    }
  }

  .details {
    clear: left;
    margin-left: 5px;
    width: 190px;

    p {
      font-size: 11px;
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 190px;
    }
    .stats {
      margin-left: -5px;
      margin-top: -10px;
    }
    .tools {
      clear: left;
    }
  }
}
.grid article:first-child {
  margin-left: 0;
}

aside .well {
  section {
    border-bottom:1px solid @bdrColor;
    padding-bottom:20px;
    margin-bottom:20px;
  }
  p {
    clear: both;
  }

  section.last {
    border-bottom:0;
    margin-bottom: 20px;
    h3 {
      font-size: 14px;
      margin-left: -10px;
      margin-top: 0;
    }
    .avatar {
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 20px;
    }
    .details {
      margin-left: -10px;
      margin-top: 0;
    }
  }

  h2 {
    border-bottom: 1px solid #ccc;
    margin:-19px -19px 0;
    padding: 4px 15px 3px;
    #title;
  }

  ul.sidenav {
    margin:13px 0 0;

    a {
      font-size:@baseFontSize + 4;
      font-weight:bold;
      color:@black;
      line-height:33px;

      &:hover {
        color:@linkColor;
        text-decoration:none;
        background:none;
      }
    }
  }
}

.badge {
  background: @grayNeutral;
}
.sub-type {
  background: @grayLight;
  }

/* Font-awesome icon rotation */
.icon-rotate-45:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

section.article-list {
  article {
    overflow:hidden;
    margin-bottom:15px;

    header {
      overflow:hidden;

      h3 {
        float:left;
        width:65%;
        font-size:16px;
        line-height: 18px;
      }

      .btn {
        float:right;
      }
    }

    .details {
      clear:both;
    }

    h6 {
      text-transform:none;
      line-height:1.2em;
      font-size:12px;

      a {
       color:#4a4a4a;
      }
    }

    h6 a:hover {
      text-decoration:none;
    }

    a[rel="name"], time {
      display:block;
      font-size:11px;
    }

    footer {
      font-weight:bold;
      font-size:10px;
      margin-top:0;
      border:0;

      .views {
        border-right:1px solid #777;
        padding-right:8px;
      }
    }
  }
}

.main-actions a.btn-large {
  font-size:@baseFontSize + 6;
  font-weight:bold;
  display:block;
  margin-bottom:15px;
  margin-top: 15px;
}
.hd-actions a.btn-primary {
  background-color: @orange;
}
.hd-actions a.btn-info {
  background-color: @orangeLight;
}

h2.page-title {
  color:@black;
  font-family:@customFont;
  font-size:36px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform:uppercase;
  /*overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
  word-wrap:break-word;
}

.strong {
  font-weight:bold;
}

.btn.strong {
  margin-bottom:10px;
}

ul.nav-pills.filter {
  margin-left:-10px;

  a {
    display:block;
    float:left;
    text-transform:capitalize;
    padding:4px 10px;
    border-right:1px solid @bdrColor;
    font-size:@baseFontSize - 1;
    .border-radius(0);
    cursor: pointer;
  }

  a.selected { color: black; }

  a:hover {
    text-decoration:none;
  }

  form {
    padding:2px 0 0 10px;

    label {
      font-size:@baseFontSize - 2;
      font-weight:bold;
    }

    select {
      font-size:@baseFontSize - 2;
      height:20px;
      width:90px;
    }
  }
}

/** pagination **/
.pagination {
  font-weight:bold;
  font-size:11px;
  text-align:right;
  clear: left;
}

.comments header .pagination {
  position:absolute;
  top:0;
  right:0;
}

.pagination span {
  padding-right:7px;
}

.pagination .pager {
  display:inline;
  border-left:1px solid @bdrColor;
  padding-left:3px;
  height:20px;
  width:100px;
}

.pager a, .pager span {
  padding:0 !important;
  border: 0 !important;
  display:inline-block;
  width:15px;
  height:15px;
  text-indent:-9999px;
}

.pagination ul {
  display: inline-block !important;
}

.pagination .prev { background:url(../img/arrows_gr_sm.png) no-repeat 0 0; }
.pagination .next { background:url(../img/arrows_gr_sm.png) no-repeat -11px 0; }
.pagination a.prev:hover { background:url(../img/arrows_gr_sm.png) no-repeat 0 -15px; }
.pagination a.next:hover { background:url(../img/arrows_gr_sm.png) no-repeat -11px -15px; }

.loadmore.loading a {
  text-decoration: none;
}
.loadmore.loading a:before {
  content: "[Loading...] ";
  color: @grayNeutral;
  text-decoration: none;
}

ul.space li {
  margin-bottom:5px;
  word-wrap:break-word;
}

/** view by **/
.viewby {
  font-size: 10px;
  line-height: 14px;
  padding-top: 4px;

  a {
    color: @graySp;
    padding-left: 8px;
  }
  i {
    font-size: 18px;
  }
  a.active {
    color: @orange;
  }
}

/** slide nav pane (layers & maps) **/
#contain-slider {
  margin-left: 0;
  overflow: hidden;
  .tab-content {
    margin-left: 0; /* it was 40px before */
    padding-bottom: 40px;
  }
  .span4 {
    margin-left: 0;
  }
}
#slide-pane {
  border-right: 1px solid @grayLight;
  padding-right: 10px;
  position: relative;
  margin-left: 0;

  h2 {
    font-size: 14px;
    color: #FFF;
    background-color: @grayDark;
    padding: 0 8px;
    .border-radius(3px);
    margin-top: 10px;
    #title;
  }
  .nav li {
    border-bottom: 1px solid @grayLight;
    line-height: 1.3;
  }
  .nav a {
    padding: 0.8em;
    color: @grayDark;
    font-size: 13px;
    cursor: pointer;
  }
  .nav a.active {
    color: @orange;
  }
  a.toggle {
    text-decoration: none;
  }
  a.toggle-pane {
    display: block;
    font-size: 20px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 10px;
    margin-right: -30px;
    width: 20px;
    padding: 8px 4px 6px;
    border: 1px solid @grayLight;
    .border-radius(0 3px 3px 0);
  }
  a.toggle-nav {
    display: block;
    color: @grayLighter;
    i {
      padding-right: 8px;
    }
  }

}
#nav-keywords {
  ul.nav {
    list-style: none;
    margin: 0;
    li {
      margin-bottom: 8px;
      border: 0
    }
    a {
      display: inline;
      padding: 3px 5px;
      font-size: 12px;
      background-color: @navBkgd;
      color: @graySp;
      text-transform: lowercase;
      .border-radius(4px);
    }
    .count {
      color: @graySp;
      padding-left: 8px;
      font-size: 11px;
    }
  }
}

// Bootstrap overwrite
.tabs-left .nav-tabs {
  float:none !important;
  border-right:0 !important;

  a {
    font-size:@baseFontSize + 4;
    font-weight:bold;
    padding:20px 20px;
    color:@grayDarker;
    background: rgb(239,239,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(239,239,238,1) 0%, rgba(251,251,251,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,238,1)), color-stop(100%,rgba(251,251,251,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(239,239,238,1) 0%,rgba(251,251,251,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(239,239,238,1) 0%,rgba(251,251,251,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(239,239,238,1) 0%,rgba(251,251,251,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(239,239,238,1) 0%,rgba(251,251,251,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#fbfbfb',GradientType=0 ); /* IE6-9 */
    margin-bottom:0 !important;
    .border-radius(0) !important;
    border:0;
    font-family:@customFont;
    font-weight: 700;
  }
}

.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left .nav-tabs a:hover {
  border:0;
  background: rgb(200,203,202); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(200,203,202,1) 0%, rgba(218,221,220,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,203,202,1)), color-stop(100%,rgba(218,221,220,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(200,203,202,1) 0%,rgba(218,221,220,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(200,203,202,1) 0%,rgba(218,221,220,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(200,203,202,1) 0%,rgba(218,221,220,1) 100%); /* IE10+ */
  background: linear-gradient(top,  rgba(200,203,202,1) 0%,rgba(218,221,220,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8cbca', endColorstr='#dadddc',GradientType=0 ); /* IE6-9 */
  color:@grayDarker;
}


.tab-pane article {
  padding-bottom: 0;
  padding-top: 0;

  img {
    margin-bottom:12px;
  }
}

/** map & layer actions **/
.map-actions,
.layer-actions {
  margin:8px 0 20px;

  a {
    font-size:14px;
    padding-right:20px;
    color: rgb(255, 70, 0);
    [class^="icon-"], [class*=" icon-"] {
      margin:2px 1px 0 0;
    }
  }
  .avg_rating {
    float: right;
    margin-top: 8px;
    color: @graySp;

    .overall_rating {
      font-size: 18px;
      padding-left: 6px;
      color: @orange;
    }
  }
}

/** comments **/
.comments {
  margin-top:20px;

  header {
    padding: 0.1em 1em;
    background-color: @grayDark;
    color: white;
    margin-bottom: 1em;
  }
  header h3 {
    font-weight: normal;
    margin-top: 10px;
    padding: 0px 0px 8px;
    text-transform: uppercase;
  }
  header .total {
    text-transform: lowercase;
  }

  article {
    clear: both;
    margin-top: 20px;
    padding-top: 20px;

    p {
      margin: 0;
    }

    .avatar {
      display: block;
      height: 28px;
      margin:5px 0 10px;
      width: 28px;
    }

    footer {
      font-size:@baseFontSize - 2;
      font-weight:bold;
      color:@graySp;
      .author {
        margin-left: 0;
      }
    }
  }
}

.clear { clear:both; }
.mrg-btm {margin-bottom:20px;}

.modal.custom {
  .modal-footer {
    text-align:left;
  }

  [class^="icon-"], [class*=" icon-"] {
    margin:7px 0 0 0;
  }
}

ul.wide {
  li {
    margin-bottom:10px;
  }
}

.views { font-weight:normal; }

.rating i {
  color:@orange;
  font-size:@baseFontSize - 1;
}

// Page specific styles
// homepage
body.home {
  .content-wrap {
    background:none;
  }

  .nav-box {
    border-bottom:0;
    margin-bottom:0;
  }

  aside .well {
    section {
      padding-bottom:0;
      margin-bottom:0;
      border:0;

      &.article-list article h6 a {
        color:@linkColor;
      }
      &.latest-maps .thumb {
        border: 1px solid @bdrColor;
        padding: 9px;
      }
      &.latest-maps h3 {
        font-size: 14px;
      }
      &.latest-maps p {
        font-size: 12px;
      }
    }
  }
}


// explore data
body.explore-data article {
  border-bottom:1px solid @bdrColor;
  padding-bottom:10px;
  margin-bottom:20px;
}
body.data-list nav.back {
  display: none;
}
body.data #subnav-tabs,
body.groups #subnav-tabs,
body.maps #subnav-tabs,
body.people #subnav-tabs,
body.documents #subnav-tabs {
  background-color: @grayLighter;
  color: @graySp;
  .border-radius(3px 3px 0 0);
  .box-shadow(0 1px 2px #CCC);
  border-bottom: 2px solid @grayDark;

  a {
    display: block;
    .border-radius(3px 3px 0 0);
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 500;
    color: @graySp;
    text-decoration: none;
    border-width: 0;
  }
  a.active {
    background-color: @grayDark;
    color: white;
    font-weight: 400;
  }
  a:hover, a:focus, a:active {
    background-color: @graySp;
    color: white;
  }
  li {
    margin-bottom: 0;
  }
}
body.search #subnav-tabs a.search,
body.update #subnav-tabs a.update,
body.remove #subnav-tabs a.remove,
body.create #subnav-tabs a.create,
body.upload #subnav-tabs a.upload,
body.explore #subnav-tabs a.explore {
  background-color: @grayDark;
  color: white;
  font-weight: 400;
}


// layer info

.layer-actions {
  margin-bottom:20px;
  position:relative;

  ul {
    width: 100%;
  }
}
body.layer-info .pointer,
body.map-info .pointer {
  width:17px;
  height:9px;
  background: url(../img/pointer.png) no-repeat 0 0;
  position:absolute;
  bottom:-1px;
  left:38px;
}

// search results
.search-filters .collapse {
  position:inherit;
}

input.span2.date {
  background:#fff url(../img/calendar_in.png) no-repeat 120px center;
}

body.search-results {
  .well > header {
    background:@grayLighter;
    margin:-19px -19px 10px -19px;
    padding:8px 20px 0;
    .border-radius(6px 6px  0 0);
    border-bottom: 1px solid #EEE;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    h3 {
      margin:0;
    }
  }

  aside section {
    padding-bottom:15px;
    margin-bottom:15px;

    h4 {
      line-height:26px;
    }
  }

  form .subgroup {
    padding-left:25px;
  }
}

.related-search {
  font-size:@baseFontSize - 1;

  a {
    padding:0 10px;
  }
}

.selections h4 a, .selections ul li a.pull-right {
  font-size:@baseFontSize - 1;
}

.view {
  text-align:right;

  a {
    zoom: 1;
    filter: alpha(opacity=60);
    opacity: 0.6;
  }

  a.current, a:hover {
    filter: alpha(opacity=100);
    opacity: 1;
  }
}

.well.info-bar {
  padding:5px 10px;
  background:@grayLighter;

  div.results-counter {
    float:left;
    width:40%;
  }

  a.save-search {
    display:block;
    float:left;
    width:30%;
  }

  form {
    float:right;
    width:25%;

    select {
      font-size:@baseFontSize - 2;
      height:20px;
      width:90px;
    }
  }
}

.search-results {
  .content-wrap .container {
    width: 960px;
  }
  article {
    overflow:hidden;
    background:@grayLighter;
    padding:15px;
    margin:9px 0;

    h6 {
      color:@grayDark;
      font-size:@baseFontSize;
      margin-bottom:5px;
    }

    img.thumb {
      margin:0 15px 15px 0;
    }

    .actions a {
      padding-right:30px;
    }
  }
}

form.advanced-search fieldset {
  background:@grayLighter;
  padding:15px;
  margin-bottom:15px;
}

.navbar form.sign-in {
  padding:10px 10px 15px 10px;

  label {
    color:@textColor;
  }

  div {
    color:@textColor !important;
    clear:both;
    font-size:@baseFontSize - 1;
    padding:16px 0 0;
    margin-bottom:-10px;

    a {
      display:inline;
      padding:0;
      text-decoration:underline;
    }
  }
}

// upload.pagination
body.upload {
  h3 {
    text-transform:uppercase;
  }

  .main-content form.well {
    padding:30px 0;

    label {
      font-weight:bold;
    }

    .controls label {
      font-weight:normal;
    }
  }
}

body.upload #permission_form{
  .select2-container{
    margin-top: 8px;
  }
}

body.upload-info .main-content {
  button[type="submit"] {
    margin-right:-80px;
  }
}

body.upload-prms .main-content {
  .control-group {
    margin-bottom:13px;
  }

  .add-user {
    margin-top:-10px;
  }
}

.steps {
  text-align:right;
  text-transform:uppercase;
  border-bottom:1px solid @grayLight;
  margin-bottom:10px;

  .step {
    padding-left:30px;
    color:@grayLight;
  }
}

body.upload-file .steps .step1 { color:@gray; }
body.upload-info .steps .step2 { color:@gray; }
body.upload-prms .steps .step3 { color:@gray; }

.uploader {
  padding-top:30px;
  text-align:center;
  margin-bottom:30px;

  .btn {
    display:block;
    margin:0 auto;
    float:none;
    width:300px;
    font-size:@baseFontSize + 10;
  }

  .note {
    margin-top:20px;
  }
}

#drop-zone {
  background: @grayLighter;
  margin-bottom: 10px;
  padding: 5px;
  border: 2px dashed @grayLight;
  h2 {
    color: @grayLight;
    margin: 20px 0;
    text-align: center;
    i {
      font-size: 2em;
    }
  }
}
.uip {
  border: 1px solid @grayLight;
  border-radius: 3px;
  padding: .5em;
  margin: .5em
}
#file-queue {
  ul {
    margin-bottom: 20px;
  }
  #status {
    margin-left: -20px;
  }
}
ul#global-errors {
  list-style-type: none;
  margin-left: 0;
}
section.charset {
  border-bottom: 1px solid @grayLight;
  margin: 20px 0;
}
#clear-button {
  border: 1px solid @grayLight;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  line-height: 18px;
  padding: 3px 11px;
  margin: 0 10px;
  text-align: center;
  vertical-align: middle;
}

/* Groups
   ----------------------------- */
.group-logo {
  width: 100%;
}

/* FileUploadField component styles
   ----------------------------- */
.x-form-file-wrap {
    position: relative;
    height: 22px;
}
.x-form-file-wrap .x-form-file {
  position: absolute;
  right: 0;
  /* Alert! This causes a Parse Error in Less
  -moz-opacity: 0;
  filter:alpha(opacity: 0); */
  opacity: 0;
  z-index: 2;
    height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
  position: absolute;
  right: 0;
  z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
    position: absolute;
    left: 0;
    z-index: 3;
    color: #777;
}

/* Portals
   ----------------------------- */
body.portals {
  p.btns {
    text-align:left;

    a.btn {
      margin-left:0;
    }
  }
}

#main {
  h1 {
    #title;
    margin-bottom:15px;
  }
}

ul.list {
  li {
    .lines;

    &:last-child {
      .lines(0, 0, 0);
    }
  }
}

.navbar-fixed-top {
  color: #fefefe;
  z-index: 1019;
}

// log in
.content-wrap form.login .form-actions {
  text-align:left;
}

#form_post_comment textarea {
  width: 100%;
}

// people

.people .avatar {
  margin-left: 0;
  margin-right: 20px;
}

.avatar img {
  display: block;
  border-radius: 4px;
}

ul.stats {
  margin-left: -10px;
  margin-top: 0;

  a {
    border-left: 1px solid @grayLight;

    float:left;
    /*line-height: 14px;*/
    padding:4px 10px;
    font-size: @baseFontSize - 2;
    .border-radius(0);
    cursor: pointer;
  }

  a.selected { color: black; }

  a:hover {
    background: none;
    text-decoration:none;
  }
}
.stats li:first-child a {
  border-left: 0;
}
.stats a strong {
  display: block;
  font-size: 14px;
}

/* Select2 */

.ms-container ul {
  border: 1px solid @grayLighter;
  margin-left: 0;
  list-style-type: none;
  padding: 10px;
}

.select-style {
  margin-bottom: 20px;
}

#pb .ui-progressbar-value {
  background: rgb(125, 196, 243);
}
/* Activity
   ----------------------------- */
.no-style-list {
  list-style-type: none;
  margin-top: 20px;
}
.activity-item {
  border-bottom: 1px solid @grayLighter;
  border-left: 1px solid @grayLight;
  color: @grayNeutral;
  margin-top: -10px;
  padding: 20px 18px;
  .comment {
    content: "\f086";
  }
  .comment:before {
    content: "\f086";
  }
  .delete {
    content: "\f014";
  }
  .delete:before {
    content: "\f014";
  }
  .edit {
    content: "\f14b";
  }
  .edit:before {
    content: "\f14b";
  }
  .layer {
    content: "\f096";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  }
  .layer:before {
    content: "\f096";
  }
  .map {
    content: "\f041";
  }
  .map:before {
    content: "\f041";
  }
  .upload {
    content: "\f093";
  }
  .upload:before {
    content: "\f093";
  }
}
.icon-activity {
  background: @grayNeutral;
     -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
          border-radius: 20px;
  border: 2px solid white;
  color: white;
  float: left;
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 1.25em;
  font-style: normal;
  height: 20px;
  line-height: 1.25em;
  margin: 0 10px 10px -35px;
  padding: 4px;
  text-align: center;
  text-decoration: inherit;
  width: 20px;
}
.thumb-activity {
  clear:both;
  height: 60px;
  img {
    border: 1px solid @grayLight; 
    float: left; 
    margin-right: 5px;  
    width:60px
  }
}

.activity {
  content: "\f045";
}
.activity:before {
  content: "\f045";
}
.activity-timestamp {
  margin-top: -10px;
}

.helptext {
  font-size: @baseFontSize - 2px;
}

body.documents form[id='upload_form']{

  label{
    font-weight: bold;
  }

  .errorlist{
    color: #b94a48;
  }

}

.errorlist{
    color: #b94a48;
  }
