clustergrammer/lib/css/custom_scrolling.css

This is a clustergram implemented in D3.js. I started from the example http://bost.ocks.org/mike/miserables/ and added the following features

body{
  width: 100%;
  margin: 0px auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 100%;
  overflow-x: hidden;
}

#wrap{
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 5px;
  padding-right: 5px;
}

#container{
  position: relative;
  width: 100%;
  overflow: auto;
  /*padding-left: 50px;*/
  /*padding-right: 50px;*/
  min-width: 950px;
}

#sections{
  width: 180px;
  float: left;
  /*margin-right: 10px;*/
  /*background-color: red;*/
}

#sections > div{
  opacity: 0.2;
}

#sections > div.graph-scroll-active{
  opacity: 1;
}

#graph{
  margin-top: 50px;
  float: left;
  margin-left: 2px;
  width: 925px;
}

#graph.graph-scroll-fixed{
  position: fixed;
  top: 0px;
  /*change this along with first section*/
  margin-left: 182px;
}

#graph.graph-scroll-below, #graph2.graph-scroll-below {
  position: absolute;
  bottom: 0px;
  /*change this with graph-scroll-fixed*/
  margin-left: 182px;
}

#end-div{
  height: 100px;
}

h1{
  margin: 50px;
}

h1{
  text-align: center;
}

.instruction_text{
  font-size: 15px;
  font-weight: 350;
  margin-bottom: 7px;
}

.instruction{
  border: 1px;
  border-top: 4px solid #8F8F8F;
  height: 350px;
  margin-top: 200px;
  padding-right: 5px;
}

.conclusions{
  height: 700px;
}

#source{
  margin-top: 200px;
  display: none;
}

.highlight_word{
  font-weight: bold;
}

#title_container{
  margin-left:50%;
  width: 20%;
}

#main_title_container{
  border: 1px;
  border-bottom: 1px solid #DEDEDE;
  /*margin-left: 50px;*/
  /*margin-right: 50px;*/
}

#title_image{
  width: 250px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: -125px;
}

.sidebar_text{
  font-size: 12px;
}
.sidebar_button_text{
  font-size: 12px;
}

.tour_title_text{
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 18px;
}

.modal-backdrop{
  display: none;
}

.modal-backdrop.fade{
  display: none;
}

.modal-backdrop.in{
  display: none;
}