style.css

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400);

/* Material Design Palette */
.orange{
  background-color: #FF5722;
  color: #FF5722;
}
.pink{
  background-color: #E91E63;
  color: #E91E63;
}
.purple{
  background-color: #9C27B0;
  color: #9C27B0;
}
.deeppurple{
  background-color:#673AB7;
  color: #673AB7;
}
.indigo{
  background-color: #3F51B5;
  color: #3F51B5;
}
.blue{
  background-color: #2196F3;
  color: #2196F3;}
.lightblue{
  background-color: #03A9F4;
  color: #03A9F4;
}
.cyan{
  background-color: #00BCD4;
  color: #00BCD4;
}
.teal{
  background-color: #009688;
  color: #009688;
}

*{
  box-sizing: border-box;
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing: -1px;
}
body, html {
  width: 1920px;
  height: 1080px;
  background-color: #FFC107;
}

#container{
  width: 1860px;
  height: 1020px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #ECEFF1;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.34);
  overflow: hidden;
}

#etappe{
  width: 1180px;
  height: 100%;
  position: absolute;
  right: 0;
}
#etappe #etappe_header{
  width: 110%;
  height: 130px;
  position: relative;
  right: 10%;
  background: #00BCD4;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
}
#etappe #etappe_header h2, #etappe #etappe_header h3{
  position: absolute;
  left: 12%;
  top: 30px;
  font-weight: 300;
  font-size: 60px;
  color: #FFFFFF;
  line-height: 71px;
  letter-spacing: -1px;
}
#etappe #etappe_header h2 span{
  font-size: 40px;
  line-height: 47px;
}
#etappe #etappe_header h3{
  left: inherit;
  right: 30px !important;
}

#etappe #etappe_distance, #etappe #etappe_distance #distancegrid{
  position: absolute;
  width: 650px;
  height: 880px;
  padding-top: 100px
}
#etappe #etappe_distance #distancegrid{
 padding-top: 0 
}
#etappe #etappe_distance #distancegrid div.distancegrid_line{
  width: 100%;
  height: 2px;
  background-color: #FFC107;
  margin-bottom: 70px;
}
#etappe #etappe_distance div.distancegrid_dot{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.27);
  margin-bottom: 56px;
  position: relative;
  top: -8px;
}

#etappe #etappe_speed{
  width: 433px;
  height: 830px;
  position: absolute;
  right: 110px;
  top: 110px;
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
  border-radius: 4px;
}
#etappe #etappe_speed h4{
  font-size: 30px;
  font-weight: 300;
  color: rgba(0,0,0,0.87);
  line-height: 35px;
  text-align: center;
  position: relative;
  top: 46px;
}
#etappe #speedgrid{
  width: 302px;
  height: 600px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 122px;
  border-left: 2px solid #FFC107;
  border-right: 2px solid #FFC107;
}
#etappe #speedgrid div.speedgrid_line{
  width: 2px;
  height: 100%;
  float: left;
  margin-left: 48px;
  background-color: #FFC107;
}
#etappe #speedgrid div.speedgrid_dot{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.27);
  margin-bottom: 56px;
  position: relative;
  left: -9px;
}
#etappe #speedgrid_legend{
  position: absolute;
  bottom: 40px;
  left: 60px;
  width: 370px;
  font-weight: 300;
  font-size: 30px;
  color: rgba(0,0,0,0.54);
  line-height: 35px;
  text-align: center;
}
#etappe #speedgrid_legend span{
  float: left;
  margin-right: 65px;
  text-align: center;
}
#etappe #speedgrid_legend span:last-child{
  margin-right: 0
}
#ranking{
  position: absolute;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.34);
  width: 680px;
  height: 100%;
}
#ranking h1{
  font-weight: 400;
  font-size: 60px;
  color: #00BCD4;
  line-height: 71px;
  position: relative;
  left: 60px;
  top: 30px;
}
#ranking table{
  position: relative;
  left: 60px;
  top: 120px;
  width: calc(100% - 60px);
}
#ranking table tr:nth-child(1) td:nth-child(1){
  background-image: url(leader.svg);
  background-repeat: no-repeat;
  width: 90px;
  height: 90px;
  color: transparent;
}
#ranking table tr:nth-child(1) td:nth-child(2), #ranking table tr:nth-child(1) td:nth-child(3){
  position: relative;
  top: 16px;
}
#ranking table td:nth-child(1){
  font-size: 30px;
  color: rgba(0,0,0,0.54);
  line-height: 70px;
  text-align: center;
}
#ranking table td:nth-child(2){
  font-size: 40px;
  font-weight: 400;
  color: rgba(0,0,0,0.87);
  padding-left: 16px;
}
#ranking table td:nth-child(3){
  font-family: RobotoCondensed-Light;
  font-size: 40px;
  color: rgba(0,0,0,0.54);
  text-align: right;
  padding-right: 30px;
}