#header {
  position: absolute;
  display: block;
  top: 20px;
  left: 120px;
  font: 300 32px "Helvetica Neue";
  color: #525252;
}

#sub-header {
  top: 20px;
  font: 300 32px "Gill Sans";
  color: #525252;
}

#dilemma-A-text {
  position: absolute;
  display: block;
  text-align: end;
  top: 100px;
  left: 10px;
  font: 300 32px "Helvetica Neue";
  color: rgb(116, 169, 207);
  width: 620px;
}

#versus {
  position: absolute;
  display: block;
  top: 126px;
  left: 646px;
  width: 20px;
  font: 200 24px "Helvetica Neue";
  color: #969696;
}

#dilemma-B-text {
  position: absolute;
  display: block;
  top: 100px;
  left: 690px;
  width: 590px;
  font: 300 32px "Helvetica Neue";
  color: rgb(116, 169, 207);
}

#dilemma {
  position: absolute;
  top: 291px;
  left: 540px;
  width: 240px;
    }
    
#actions-header {
  position: absolute;
  top: 390px;
  left: -20px;
  width: 600px;
  text-align: end;
  font: 200 24px "Helvetica Neue";
  color: #969696;
  }



#implications-header {
  position: absolute;
  top: 390px;
  left: 740px;
  width: 590px;
  text-align: start;
  font: 200 24px "Helvetica Neue";
  color: #969696;
}

.emphasized-header {
  font: 500 24px "Helvetica Neue";
}

input[type=range] {
    -webkit-appearance: none;
    background-image: -webkit-gradient(); 
    background-color: #FFF; 
    border: 1px solid #D3D3D3;
    border-radius: 3em/3em;
    opacity: 0.85;
    width: 240px;
    height:8px;

}


input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #f2ab1e;
        background-repeat: repeat-x;
        background-image: -khtml-gradient(linear, left top, left bottom, from(#f0c911), to(#f2ab1e));
        background-image: -moz-linear-gradient(top, #f0c911, #f2ab1e);
        background-image: -ms-linear-gradient(top, #f0c911, #f2ab1e);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0c911), color-stop(100%, #f2ab1e));
        background-image: -webkit-linear-gradient(top, #f0c911, #f2ab1e);
        background-image: -o-linear-gradient(top, #f0c911, #f2ab1e);
        background-image: linear-gradient(top, #f0c911, #f2ab1e);
    opacity: 1;
    width: 16px;
    height: 24px;
    border: 1px solid #f2ab1e;
    border-radius: 8px;
}

input[type="range"]::-webkit-slider-thumb:hover { 
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2ab1e), color-stop(1, #f0c911) );
  background:-moz-linear-gradient( center top, #f2ab1e 5%, #f0c911 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911');
  background-color:#f2ab1e;
}
 

.legend-swatch {
  fill: rgb(231, 41, 138);
  fill-opacity: .9;
  stroke: rgb(231, 41, 138);
  stroke-opacity: 1;
}


.legend-label {
  font: 400 12px "Helvetica";
  color: #525252;
}

.bullet-swatch-yel {
  fill: rgb(255, 237, 111);
  fill-opacity: .9;
  stroke: rgb(255, 237, 111);
  stroke-opacity: 1;
}


.bullet-swatch-red {
  fill-opacity: .65; 
  fill: rgb(227, 26, 28);
  stroke: rgb(227, 26, 28);
  stroke-opacity: 1;
}

.legend-container {
  position: absolute;
  display: block;
  left: 1080px;
  top: 40px;
}


  
text.diamond-label {
  position: absolute;
  display: block;
  fill: #525252;
  font: 500 28px "Gill Sans";
  
}


.dilemmaB-label {
  position: absolute;
  left: 150px;
  width: 600px;
  display: inline-block;
  text-align: left;
  top: -50px;
  color:  #525252; 
  font: 400 28px "Gill Sans";
}

.dilemmaA-label {
  position: absolute;
  left: -510px;
  width: 600px;
  display: inline-block;
  text-align: right;
  top: -50px;
  color:  #525252; 
  font: 400 28px "Gill Sans";
}

rect.dilemma-defaultValue {
  fill:  #fff;  /* 0064cd */
  fill-opacity: .75;
  z-index: -1;
}


 #chart {
  position: absolute;
  width: 600px;
  left: 40px;
  top: 464px;
 }  
  
#implications {
  position: absolute;
  left: 620px;
  top: 470px;
 }  

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}



.lever { font: 11px sans-serif;}
.lever .marker.s0 { stroke: rgb(116, 169, 207); stroke-width: 5px; }
.lever .marker.s1 { stroke: #f6b23d; stroke-width: 7px; }
.lever .axis line, .lever .axis path { stroke: #666; stroke-width: .5px; fill: none; } 
.lever .range.s0 { fill-opacity: 1; fill: #bbb;}
.lever .range.s1 { fill-opacity: .75; fill: #ddd; }
.lever .range.s2 {  fill-opacity: 1; fill: #eee;}
.lever .measure.s0 { fill: #969696; fill-opacity: .85;}
.lever .measure.s1 { fill: #525252; fill-opacity: 0;}
.lever .title { font-size: 20px; font-weight: 300;  fill: #525252; font-family: Gill Sans;}
.lever .subtitle { fill: #999; font-size: 12px; }
 
 
.implication { font: 11px sans-serif;}
.implication .marker.s0 { stroke: rgb(116, 169, 207); stroke-width: 5px; }
.implication .marker.s1 { stroke: #f6b23d; stroke-width: 7px; }
.implication .axis line, .bullet .axis path { stroke: #666; stroke-width: .5px; }
.implication .range.s0 { fill-opacity: 0; fill: rgb(227, 26, 28);}
.implication .range.s1 { fill-opacity: 0; fill: rgb(255, 237, 111); }
.implication .range.s2 {  fill-opacity: 0; fill: rgb(240, 240, 240);}
.implication .measure.s0 { fill: #969696; fill-opacity: .85;}
.implication .measure.s1 { fill: #525252; fill-opacity: 0;}
.implication .title { font-size: 20px; font-weight: 300;  fill: #525252; font-family: Gill Sans;}
.implication .subtitle { fill: #999; font-size: 12px; }

.implication .label { font-size: 20px; font-weight: 400;  fill: #525252; font-family: "Helvetica Neue";}

.bar.positive {
  fill: rgb(116, 169, 207)
  fill-opacity: 1;
}

.bar.negative {
  fill: rgb(227, 26, 28);}
  fill-opacity: .75;
}

.implication .axis text {
  font: 10px sans-serif;
}

.implication .axis path,
.implication .axis line {
  fill: none;
  stroke: rgb(221, 52, 151); 
  stroke-width: 5px;
  shape-rendering: crispEdges;
}

path.diamond {
  position: absolute;
  top: 80px; 
  stroke-width: 0px;
  stroke: rgb(224, 224, 224);
  fill: url(#radial-gradient);
  z-index: 0;
}
 
 svg.pathContainer {
  position: absolute;
  top: 60px; 
  z-index: 0;
   }

 svg.sliderPath {
  position: absolute;
  top: 244px; 
  left: 510px;
  z-index: -100;
   }

.glow {
  fill:  rgb(254, 217, 118);
    z-index: -100;
}

 aside {
  background: #FFF8B8;
  background-image: -webkit-linear-gradient(top, #FFF8B8, #FEED77);
  box-shadow: 0 8px 16px rgba(0,0,0,.5);
  color: #000;
  display: block;
  font: 400 16px "Helvetica Neue";
  padding: 6px;
  position: absolute;
  left: 60px;
  top: 560px;
  -o-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -o-transition: opacity 100ms linear;
  -ms-transition: opacity 100ms linear;
  -moz-transition: opacity 100ms linear;
  -webkit-transition: opacity 100ms linear;
}

.emph {
  font: 400 14px "Helvetica Neue";
}

 aside p:last-child {
  margin-bottom: 0;
}

 aside:hover {
  opacity: .5;
}