/* CSS file for styles relating to tools iconography */

.tools
{
  /*General styling*/
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;

  padding: 0;
  margin: 0;

  /*Flex container styling (This list owns a separate, nested flexbox)*/
  display: flex;
}

.tools li a:before
{
  width:  50px; 
  height: 50px;
  float: left;
  margin-left: 8px;

  /*If content is left null, images are hidden*/
  content:""; 

  /*Spritesheet preloads all images to avoid flickering and clean css*/
  background: url('/Images/Tools/50px/spritesheet.png') 
}
.tools .blueprints:before { background-position: 0    0px!important; }
.tools .cpp:before        { background-position: 0  -50px!important; }
.tools .csharp:before     { background-position: 0 -100px!important; }
.tools .fmod:before       { background-position: 0 -150px!important; }
.tools .java:before       { background-position: 0 -200px!important; }
.tools .javascript:before { background-position: 0 -250px!important; }
.tools .mixamo:before     { background-position: 0 -300px!important; }
.tools .threejs:before    { background-position: 0 -350px!important; }
.tools .unity:before      { background-position: 0 -400px!important; }
.tools .unreal:before     { background-position: 0 -450px!important; }
.tools .vr:before         { background-position: 0 -500px!important; }
.tools .wpf:before        { background-position: 0 -550px!important; }


/*Tool tip on tool hover - a literal tooltip for a tool*/
.tools li a .tooltip {
  visibility: hidden;
  width: auto;
  background-color: #0E1011;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 5px 10px;
  margin: -40px -50px;
  position: absolute;
  z-index: 1;
}
.tools li a:hover .tooltip {visibility: visible;}

/*There's definitely a better way of doing this*/
.tools .blueprints .tooltip:before { content: "UE Blueprints"; }
.tools .cpp        .tooltip:before { content: "C++"; }
.tools .csharp     .tooltip:before { content: "C#"; }
.tools .fmod       .tooltip:before { content: "FMOD "; }
.tools .java       .tooltip:before { content: "Java"; }
.tools .javascript .tooltip:before { content: "JavaScript"; }
.tools .mixamo     .tooltip:before { content: "Mixamo"; }
.tools .threejs    .tooltip:before { content: "Three.js"; }
.tools .unity      .tooltip:before { content: "Unity"; }
.tools .unreal     .tooltip:before { content: "Unreal"; }
.tools .vr         .tooltip:before { content: "VR"; }
.tools .wpf        .tooltip:before { content: "WPF"; }