/*
 The outer element of the climate space
 Let some space (10%) left and right from the edge
*/
.climate_bottomPanel {
    position: absolute;
    left: 10%;
    right: 10%;
    margin: 0 auto;
  }

  /*
  The element inside the bottomPanel
  With the slider and the heading text
  */
  .climate_timeInfo{
    display: block;
    padding: 5px;
    position: relative;
    z-index: 99;
  }

  /*
  As we have a transparent background for the time slider, we have to make the labels more visible
  Add class="climate_rule_label" to element id="dijit_form_HorizontalRuleLabels_0" inside id="mod_climate_slider_container"
  */
  .climate_rule_label{
    font-weight:bold;
    font-size: medium;
  }

  /*
  DIV element where the buttons are located in
  */
  .climate_button_div{
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  /*
  Definition of the year buttons in the maptip
  */
  .climate_button{
    background-color: inherit;
    float: left;
    border: none; 
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 14px;
  }