/**** Visualization  ****/
        body {
          background: #FAFAFA;
          font-size: 12px;
          font-family:'Lato',Helvetica,sans-serif;
          font-weight: 400;
        }
        h3{
          font-weight: 700;
          font-size: 16px;
          text-align: center;
        }
        h4{
          font-weight: 700;
          font-size: 13px;
          text-align: center;
        }
        h5{
          font-weight: 700;
          font-size: 13px;
          text-align: center;
          line-height: 10px;
        }
        #multiples{
          padding-top: 30px;
          padding-right: 140px;
          padding-bottom: 30px;
          padding-left: 30px;
          margin-left: auto;
          margin-right: auto;
        }

        .axis text{
          font-size: 8px;
          text-align: left;
        }
        .label{
          font-weight: 700;
        }
        .infos{
          visibility: hidden;
          font-size: 0px;
        }
        .item:hover #title { 
          opacity: 1; 
          font-size: 10px;
          visibility: visible;
          color: black;
          position: fixed;
          top: -30px;
          left: 0px;
        }

        .item:hover img{
          border-radius: 100px;
          border: 1px solid rgba(0, 0, 0, .1);
        }

        .item img{
          transform: translate(-50%, -50%)
        }

        .item{
          width: 50px;
          height: 50px;
        }

        /**** User Iterface  ****/

        /**** Headline ****/

        header{
          height: 80px;
        }
        #hTennis{
          text-align: center;
          font-size: 18px;
          font-weight: 700;
          display: block;
          line-height: 1;
        }
        #hSuccess{
          text-align: center;
          font-size: 29px;
          font-weight: 700;
          display: block;
          line-height: .8;
        }

        /**** Navigation ****/

        nav{
          border-top: 1px solid;
          border-color: #7F7F7F;
        }
        #userInterface{
          position: fixed;
          overflow: scroll;
          top: 0px;
          right: 0px;
          height: 100%;
          width: 130px;
          padding: 10px;
          background-color:rgba(0,0,0,0.8);
          z-index: 5;
          text-align: right;
          color: white;
          padding-top: 35px;
        }
        label {
          font-style: italic;
          font-size: 13px;
          line-height: 20px;
        }
        a {
          font-style: italic;
          font-size: 13px;
          line-height: 20px;
          color: white;
          text-decoration: none;
          padding-right:26px;
        }
        a:hover {
          text-decoration: underline;
        }
        label:hover {
          text-decoration: underline;
          cursor:pointer;
        }
        input[type=radio] {
          display:none;
        }
        input[type="radio"]:checked + span{
          font-weight: bold;
          text-decoration: underline;
        }
        .active{
          font-weight: bold;
        }

        .infoBox{
          display: inline;
          margin: 5px;
          -webkit-border-radius: 60;
          -moz-border-radius: 60;
          border-radius: 60px;
          font-size: 9px;
          color: white;
          padding: 0px 4px 0px 4px;
          width: 8px;
          background-color:rgba(255,255,255,0.3);
          cursor:help;
        }
        .infoHover{
          background: rgba(255,255,255,0.95);
          font-size: 11px;
          color: black;
          text-align: right;
          visibility: hidden;
          padding: 5px;
          right: 0px;
          margin-top: 30px;
          position:fixed;
          width: 0px;
          z-index: 1000;
        }
        .desc-img{
          max-width: 125px;
        }

        p.infoBox:hover .infoHover{
          visibility: visible;
          right: 5px;
          width: 130px;
        }

        .infoHover:before {
          content:'';
          display:block;
          position:absolute;
          width: 0; 
          height: 0; 
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          border-bottom: 6px solid rgba(255,255,255,0.95);
          left:117px;
          top:-6px;
        }
        .multiSelect{
          font-size: 14px;
        }

        /**** Isotope CSS3 transitions ****/

        /*.isotope,*/
        .isotope .isotope-item {
          -webkit-transition-duration: 2s;
             -moz-transition-duration: 2s;
                  transition-duration: 2s;

        }

        .isotope {
          -webkit-transition-property: height, width;
             -moz-transition-property: height, width;
                  transition-property: height, width;
        }

        .isotope .isotope-item {
          -webkit-transition-property: -webkit-transform, opacity;
             -moz-transition-property:    -moz-transform, opacity;
                  transition-property:         transform, opacity;
        }

        /**** Single Vis Styles ****/ 
        /* New changes for wikipedia view */

        #singleVisContainer{
          position: fixed;
          top: 5%;
          left: 30px;
          height: 580px;
          max-width: 90%;
          min-width: 370px;
          visibility: hidden;
          padding: 10px;
          z-index: 100;
          background: white;
          -moz-box-shadow: 0 0 20px #ccc;
          -webkit-box-shadow: 0 0 20px #ccc;
          box-shadow: 0 0 20px #ccc;
        }

        #insideVisContainer{
          overflow:auto;
          max-width:100%;
        }

        #insideVis{
          left: 100px;
          position: relative;
        }
        #legend{
          position: absolute;
          left: 0px;
          top: 30px;
          margin: 10px;
          width: 100px;
          height: 400px;
          background: white;
          border-right: solid lightgray thin;
        }
        #searchBoxInput{
          border-style: none;
          border-bottom: solid gray thin;
          z-index: 300;
          width: 130px;
          background: white;
          -webkit-box-shadow: 0 0px 0px #333;
          -moz-box-shadow: 0 0px 0px #333;
          box-shadow: 0 0px 0px #333;
          border-radius: 0px;
        }
        #searchBoxInput:focus, input:focus{
            outline: 0;
        }
        #searchButton{
          position: absolute;
          top: 15px;
          left: 160px;
        }

      .axis path{
        fill: none;
        stroke: none;
      }
      .axis line {
        fill: black;
        stroke: black;
        shape-rendering: crispEdges;
        stroke-width: .5px;
        stroke-dasharray: 1,1;
      }
      .axis text {
        fill: black;
      }
      .axisLines {
        /*stroke-width: .5px;*/
        z-index: 3;
        stroke-dasharray: 1,3;
        stroke-width: .5px;
        stroke: black;
      }
      #bestRank{
        z-index: -30;
        stroke-width: .5px;
        stroke: gray;
        stroke-dasharray: 1,10;
      }
      #bestText{
        fill: black;
      }
      #yearLines{
        stroke-width: .2px;
        stroke: black;
      }
      #yearLables{
        fill: black;
      }
      #tournamentLableText,p{
        fill: black;
      }

      #colorLegend,#lengthLegend{
        height: 120px;
        float:top;
      }
      #wikiText{
        overflow: scroll;
        position: fixed;
        width: 350px;
        height: 100px;
        display: inline-block;
        margin: 10px;
        padding-bottom: 20px;
        /*position: relative;*/
      }
      #wikiText:before{
        content:"";
        width: 350px;
        height: 120px;
        position: fixed;
        background: -webkit-linear-gradient(rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 10%,rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 10%,rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 100%);
      }

      /********* Viewchange */

      .wikiLine {
        stroke: #2166ac;
        fill: none;
        stroke-width: 1px;
        stroke-linecap: round;
      }
      .wikiArea{
        fill: #2166ac;
        opacity: 0.5;
      }
      .modelArea{
        fill: #b2182b;
        opacity: 0.5;
      }