@import "bs3grid.less";

@screen-tiny:           100px;
@screen-phone-min:      479px;      // max 479
@screen-phone:          @screen-xs; // 480 and up
@screen-smalltablet:    600px;      // 600 and up
@screen-tablet:         @screen-sm; // 768 and up
@screen-laptop:         @screen-md; // 992 and up
@screen-desktop:        @screen-lg; // 1200 and up

// Colors
@white: #fff;
@black: #000;
@red: #9e1d2a;
@blue: #4c84c7;
@blue-dark: darken(@blue, 10%);
@navy-blue: #0e2946;

// This section was copied from mastersheet.less
#top {
  font-size: 14px;
  font-size: 1.5rem;
  line-height: 1.643;


  color: #666;
  padding: 20px 0;
  text-decoration: none;
  border-bottom: lightgray solid;
  border-width: 1px;

  .container {
    position: relative;
    min-height: 58px;
    a {
      text-decoration:none;
    }
  }

  .logo {
    float: left;
    padding-left: 140px; //Logo position
    display: none;

    a {
      //background: url(../images/logo.png) no-repeat top left;
      width: 179px;
      height: 58px;
      text-indent: -999999px;
      display: block;
    }

    @media (min-width: @screen-tablet) {
      display: block;
    }
  }

  .main-navigation {
    display: none;
    // fix for navigation bug #166
    position: relative;
    z-index: 200;

    ul {
      list-style-type: none;
      > li {
        > a {
          font-weight:bold;
          padding: 0 25px 0 15px;

          span {
            display: none;
          }
        }
      }
    }

    @media (min-width: @screen-phone) {
      display: block;
      float: left;

      ul {
        > li {
          float: left;
          position: relative;

          > a {
            height: 58px;
            line-height: 58px;
            float: left;


            color: lighten(@black, 10%);
            position: relative;
            border: 1px solid transparent;
            border-bottom: 0;
            z-index: 101;
            padding: 0 20px 0 10px;

            &:before {
              content: "";
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 6px 4.5px 0 4.5px;
              border-color: lighten(@black, 70%) transparent transparent transparent;
              position: absolute;
              top: 50%;
              right: 5px;
              margin-top: -3px;
            }
          }

          &.active {
            > a {
              background: @white;
              border-top: 1px solid darken(@white, 10%);
              border-left: 1px solid darken(@white, 10%);
              border-right: 1px solid darken(@white, 10%);
            }

            ol {
              display: block;
              list-style-type: none;
            }
          }

          // the last but one li and ol in it... in css this is the third one
          &:nth-child(3) {
            ol {
              left: auto;
              right: 0;
            }
          }
          // the last li and ol in it
          &:last-child {
            ol {
              left: auto;
              right: 0;
            }
          }

          ol {
            display: none;
            position: absolute;
            top: 57px;
            width: 290px;
            z-index: 100;
            background: @white;
            border: 1px solid darken(@white, 10%);

            > li {
              a {
                padding: 10px 20px;
                display: block;
                border-top: 1px solid darken(@white, 10%);
                color: lighten(@black, 20%);


                &:hover {
                  background: @blue;
                  color: @white;
                }
              }

              &:first-child {
                a {
                  border-top: 0;
                }
              }
            }
          }
        }
      }
    }
    @media (min-width: @screen-smalltablet) {
      ul > li {
        > a {

          padding: 0 25px 0 15px;

          &:before {
            right: 10px;
          }
        }
        ol {
          > li {
            a {
              padding: 15px 25px;

            }
          }
        }
      }
    }
    @media (min-width: @screen-tablet) {
      float: right;

      ul > li {
        &:nth-child(3) {
          ol {
            left: 0;
            right: auto;
          }
        }
      }
    }

    @media (min-width: @screen-laptop) {
      margin-right: 150px;
    }

    @media (min-width: @screen-desktop) {
      ul > li > a {
        padding: 0 35px 0 25px;
        span {
          display: inline;
        }
      }
    }
  }

  .mobile-navigation {
    width: 60px;
    height: 41px;
    display: block;
    padding: 10px;
    position: relative;
    top: 10px;
    right: 10px;

    span {
      display: block;
      background: lighten(@black, 20%);
      height: 5px;
      position: relative;
      margin-top: 8px;

      &:before, &:after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        height: 5px;
        background: lighten(@black, 20%);
      }

      &:before {
        top: -8px;
      }

      &:after {
        top: 8px;
      }
    }

    @media (min-width: @screen-phone) {
      display: none;
    }
  }

  .addon {
    display: none;

    @media (min-width: @screen-laptop) {
      display: block;
      position: absolute;
      top: 5px;
      right: 10px;
      width: 130px;
    }
  }
}


// Footer: This section was copied from mastersheet.less
#footer_wiki {
  background: lighten(@black, 20%);
  padding-top: 30px;

  a {
    color: lighten(@black, 60%);

    &:hover {
      color: lighten(@black, 70%);
    }
  }

  header {
    padding: 30px 0 20px 0;

    h4 {
      color: @white;


    }
  }

  .about {
    display: none;

    @media (min-width: @screen-tablet) {
      display: block;
      border-bottom: 1px solid lighten(@black, 30%);

      ul {
        border-bottom: 1px solid lighten(@black, 19%);
        padding-bottom: 30px;
        text-align: center;
        .clearfix;

        li {
          padding-left: 90px;
          height: 70px;
          line-height: 70px;
          background-position: 20px center;
          background-repeat: no-repeat;
          border-left: 1px solid lighten(@black, 30%);
          display: inline-block;
          text-align: left;
          margin-left: 20px;
          white-space: nowrap;

          &.institutions {
            background-image: url(../images/icon-institutions.png);
          }

          &.countries {
            background-image: url(../images/icon-countries.png);
          }

          &.software {
            background-image: url(../images/icon-software-packages.png);
          }

          &:first-child {
            border-left: 0;
            margin-left: 0;
          }

          p {
            color: @white;

            span {
            }
          }
        }
      }
    }

    @media (min-width: @screen-laptop) {
      ul {
        li {
          width: 33%;
          margin-left: 0;
          padding-left: 120px;
          background-position: 40px center;
        }
      }
    }

    @media (min-width: @screen-desktop) {
      ul {
        li {
          border-left: 0;
        }
      }
    }
  }

  .pages {
    padding: 0 40px;

    ul {
      > li {
          ol {
            border-bottom: 1px solid lighten(@black, 25%);
            > li {
              border-top: 1px solid lighten(@black, 25%);
              padding: 5px 0 5px 16px;
              position: relative;

              &:before {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 3px 0 3px 5px;
                border-color: transparent transparent transparent lighten(@black, 40%);
                position: absolute;
                top: 14px;
                left: 2px;

              }
            }
          }
      }
    }

    @media (min-width: @screen-phone) {
      padding: 0 20px;

      ul {
        > li {
          float: left;
          width: 45%;

          &:nth-child(2n) {
            float: right;
          }
        }
      }
    }

    @media (min-width: @screen-smalltablet) {
      padding: 0 50px;
      ul {
        > li {
          width: 40%;
        }
      }
    }

    @media (min-width: @screen-tablet) {
      padding: 0;

      ul {
        > li {
          width: 33%;
          padding: 0 20px;

          &:nth-child(2n) {
            float: left;
          }
          &:nth-child(3) {
            &:after {
              content: "";
              clear: both;
            }
          }
          &:nth-child(4) {
            margin-left: 16.5%;
          }
        }
      }
    }

    @media (min-width: @screen-laptop) {
      ul {
        > li {
          width: 200px;
          padding: 0;
          float: none;
          display: inline-block;
          vertical-align: top;
          margin: 0 15px;
          text-align: left;

          &:nth-child(3), &:nth-child(2n) {
            float: none;
          }

          &:nth-child(4) {
            margin: 0 15px;
            clear: none;
          }
        }
      }
    }

    @media (min-width: @screen-desktop) {
      ul {
        > li {
          margin: 0 45px;

          &:nth-child(4){
            margin: 0 45px;
          }
        }
      }
    }
  }

  .anchors {
    padding: 0 40px 40px 40px;

    ul {
      > li {
        border-top: 1px solid lighten(@black, 25%);
        padding: 5px 0 5px 20px;
        position: relative;

        &:before {
          content: "";
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 3px 0 3px 5px;
          border-color: transparent transparent transparent lighten(@black, 40%);
          position: absolute;
          top: 14px;
          left: 0;

          @media (min-width: @screen-laptop) {
            display: none;
          }
        }
      }
    }

    @media (min-width: @screen-phone) {
      float: left;
      width: 45%;
      padding: 0 0 30px 30px;
    }

    @media (min-width: @screen-smalltablet) {
      padding: 0 50px 40px 50px;
      width: 50%;
    }

    @media (min-width: @screen-tablet) {
      width: 33%;
      padding: 0 20px 40px 20px;
    }

    @media (min-width: @screen-laptop) {
      float: none;
      width: auto;
      text-align: center;
      padding: 0;
      margin-top: 40px;
      border-top: 1px solid lighten(@black, 19%);

      header {
        display: none;
      }

      ul {
        border-top: 1px solid lighten(@black, 30%);
        padding: 30px 0;

        > li {
          border-top: 0;
          padding: 0 10px;
          display: inline-block;
          border-left: 1px solid lighten(@black, 60%);
          height: 12px;
          line-height: 12px;

          &:first-child {
            border-left: 0;
            padding-left: 0;
          }

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

  .copyrights {
    background: lighten(@black, 10%);
    padding: 30px 40px;
    text-align: center;
    color: lighten(@black, 60%);
    @media (min-width: @screen-phone) {
      padding: 30px 0;
    }
  }
}