/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

@import "../../../_components/_mixin.less";

.photon{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-1px;
  color:#cda034
}

@orange:#f7941e;

#tool-platforms {
  @media (max-width: 767px) {
    border-top:none;
    margin-top: -50px;
    padding-top: 75px;
  }
}

.jetty-spacing {
  @media (min-width: 768px) {
    margin-left:9.7%;
  }
}

// Container
.downloads-container {
  overflow:hidden;
  h2{
    font-size: 16px;
  }
  
  h2 span.downloads-title{
    color:#545454;
    padding:6px 30px;
    position:relative;
    border: 1px solid #bdbdbd;
  }
}

//Â Top Header
.downloads-header {
  .h1-container{
    margin-top:30px;
    margin-bottom:20px;
    border-left:5px solid @orange; // orange
    padding-left:10px;
    text-align:left;
    @media (min-width: 768px) {
      margin-top:60px;
    }
    @media (min-width: 992px) {
      margin-top:75px;
    }
  }
}

.downloads-content-padding{
  padding-top:20px;
}

.downloads-section-all-projects{
  text-align:center;
}

// Page sections
.downloads-section{
  background-color:#f9f9f9;
  border-top:1px solid darken(#f9f9f9, 30%);
  padding:30px 0;
  text-align:center;
  @media (max-width: 767px) {
    &:first-child {
      border-top:none;
    }
  }
}

.downloads-logo{
  width:160px;
  height:50px;
  margin:0 auto 15px;
  display:flex;
  img{
    max-width:100%;
    max-height:auto;
    margin:0 auto;
  }
}

.downloads-items {
  margin-bottom:20px;
  padding:30px 15px 30px;
  position:relative;
  .small{
    font-size:12px;
  }
  .downloads-items-hover-box{
    opacity:0;
    visibility: hidden;
    position:absolute;
    background-color:rgba(245,245,245,0.95);
    border-radius:300px;
    box-shadow:0px 0px 4px 1px #ccc;
    top: -20px;
    width: 230px;
    left: 0;
    height: 230px;
    z-index: 777;
    padding: 25px;
    .opacityTransition();
  }
  @media (min-width: 992px) {
    &:hover{
      .downloads-items-hover-box{
        .opacityTransition();
        opacity:1;
        visibility: visible;
      }
    }
  }
}

.downloads-items-close {
  cursor:pointer;
}

.downloads-items-hover-box-text{
  font-size:0.8em;
}

.downloads-items-hover-box-links{
  font-size:0.8em;
  margin:0 0 5px;
  a{
    color:#8b82b0;
    text-transform:uppercase;
  }
}

.downloads-items-header {
  font-size:18px;
  font-weight:700;
  margin-top:5px;
  &:after{
    content:"";
    position:relative;
    display:block;
    width:50px;
    height:3px;
    border-bottom:2px solid;
    margin: 0 auto;
    top: 5px;
  }
  @media (max-width: 1200px) {
    cursor:pointer;
  }
}

// Sticky Menu

.downloads-menu-container{
  height:46px;
  width:100%;
}

.downloads-menu{
  font-size:14px;
  width:100%;
  z-index:999;
  ul{
    margin-bottom:0;
    line-height:1;
    li{
      line-height:1;
      padding: 16px 15px;
      &:hover, &.active{
        background-color:rgba(0,0,0,0.1);
      }
    }
  }
  a{
    color:#6f6f6f;
    text-decoration:none;
    &:hover{
      color:#6f6f6f;
      text-decoration:none;
    }
  }
}

// Bar ad (right underneath the sticky menu)

.downloads-bar-ad {
  color:#fff;
  border-bottom: 1px solid #ddd;
  background-color:#3f7b96;
  p{
    color:#fff;
    padding:15px 0 15px;
    margin:0;
    @media (max-width: 991px) {
      text-align:center;
      padding:15px 0 5px;
    }
    @media (min-width: 1200px) {
      font-size: 16px;
    }

    font-weight: 300;
  }
  .btn{
    margin-top:8px;
    z-index:999;
    @media (min-width: 992px) {
      position:absolute;
    }
    @media (max-width: 991px) {
      margin-bottom:15px;
    }
  }
}
.downloads-bar-ad-white-shape{

  background-repeat:no-repeat;
  background-position:top right;
  padding-right:0;
}
.downloads-bar-ad-white-content{
  text-align:center;
  position:relative;
  @media (min-width: 1200px){
    padding-left:0;
  }
  @media (min-width: 992px){
    text-align:left;
  }
}

.grey-link{
  color:#9692a8;
  font-weight:300;
}

.downloads-installer{
  position:relative;
  margin-bottom:10px;
  top:-20px;  @media (max-width: 991px) {
    border-bottom:2px dotted #e0e0e0;
    padding-bottom:20px;
  }

  @media (min-width: 992px) {
    &:after{
      content:"";
      height:170px;
      width:3px;
      border-right:2px dotted #e0e0e0;
      position: absolute;
      top: 20px;
      right: 0px;
      @media (min-width: 1200px) {
        right: 45px;
      }
    }
  }
}

.downloads-all-projects-items {
  padding: 30px 15px 0;
}

.featured-story-block, .featured-ad {
  @media (min-width: 768px) {
    min-height:270px;
  }
}

// 5 column grid
.col-xs-5th,
.col-sm-5th,
.col-md-5th,
.col-lg-5th,
.col-xs-10th,
.col-sm-10th,
.col-md-10th,
.col-lg-10th {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5th {
    width: 20%;
    float: left;
}

.col-xs-10th {
    width: 20%;
    float: left;
}

@media (min-width: 992px) {
  .jetty-margin {
    margin-left:9.7%;
  }
}


@media (min-width: 768px) {
    .col-sm-5th {
        width: 20%;
        float: left;
    }
    .col-sm-10th {
        width: 40%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5th {
        width: 20%;
        float: left;
    }
    .col-md-10th {
        width: 40%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5th {
        width: 20%;
        float: left;
    }
    .col-lg-10th {
        width: 40%;
        float: left;
    }
}
