// Style for tool page

.tool-block {
}

.tool-cube { 
    //color: red;
    font-family: sans-serif;
    background-image: url(/assets/tool-cube-bkgd.png); 
    border: 1px solid #1ebcba;
    
    width: 100%;
    height: auto;
    margin: 10px;
    padding: 0px;
    box-shadow: 4px 4px 8px #888888;
}

.tool-img {
    border: 1px solid black;
    background-color: white;

    float: left;    
    width: 100px;
    height: 100px;
    border-radius: 8px;
    padding: 3px;
    margin: 20px;

    &:hover {
      border: 2px solid #1ebcba;
      background-color: #1ebcba;
      font-weight: bold;
   }
}

.tool-text {
    text-align: left;
    font-family: sans-serif;
    color: #3b3b3b;
    margin: 20px;
}
.tool-label {
    font-weight: bold;
    font-size: 15px;
    margin: 15px;
}
.tool-description {
    font-size: 14px;
    min-height: 80px;
}
.tool-detail-label {
    //font-size: 11px;
    font-weight: normal;
    padding: 5px 0px 10px 10px;
    font-size: modular-scale($base-font-size, -2, $base-ratio);

   @include media($mid) {
     font-size: modular-scale($base-font-size, -1, $base-ratio);
   }
   @include media($huge) {
     font-size: modular-scale($base-font-size, 0, $base-ratio);
   }


}
.tool-link {
    margin-top: 5px;
}

// ****************************************************
// Styles for tools homepage

.tools-hp-block {
  border: 1px solid lightgray;
  font-size: larger;
  background: white;
  padding: 15px 0px 0px 0px;
}

.tools-hp-title {
  //border: 1px solid blue;
  text-align: center;
  margin: 0px;
}

.tools-hp-block-inner {
  margin: 0 auto;
  padding: 0px 20px 20px 20px;
  text-align: center;

   @include media($mid) {
       padding: 0px 100px 40px 100px;
   }
   @include media($huge) {
       padding: 0px 150px 50px 150px;
   }
}

.tools-hp-cube {
   //width: -- set in JS depending on how count in row
    display: inline-block;
    height: 130px;
   @include media($huge) {
       height: 160px;
   }
}

.tools-hp-img {
    vertical-align: top;
    width: 115px;
   @include media($huge) {
       width: 130px;
   }
}

