.chart{
  background-color: white;
}

.main text {
	color: #333;
}

.axis line, .axis path {
  fill: none;
  stroke:       #333;
	stroke-width:    2;
  shape-rendering:crispEdges;
}

.dot {
  stroke: black;
  fill: #333;
}

.dot:hover {
  fill: #D3D3D3;
}

#scatterplotId{
	margin-left:	  0px;
	margin-right:	 40px;
  margin-bottom: 10px;
	border-spacing:	0px;
  padding-left:  18px;

}

.scatterplotClass{
  float: left;
	margin-left:	  0px;
	margin-right:	  0px;
	border-spacing:	0px;	
}

.scatterplotLabels{
  font-weight: bold;
  font-size:    12px;
  stroke: white; 
  stroke-width:.3px;
  fill: black;  
}

.axis-label{
   text-anchor:end;
   font-size:   15px;
}
  
table tr td {
    background: #FFFFFF;
    border: 2px solid #D3D3D3;
}

caption { 
    display: table-caption;
    text-align: left;
}

h3 { 
    display: block;
    font-size:   1.17em;
    margin-top:     1em;
    margin-bottom:  1em;
    margin-left:    0;
    margin-right:   0;
    font-weight: bold;
    color:       #333;
}

.d3-tip {
  line-height: 1;
  /*font-weight: bold;*/
  padding:        2px;
  background:   white;
  border: 3px #D3D3D3;
  color:      #D3D3D3;
  fill:red;
  border-radius: 1px;
  border-style: solid; 
}

.hover-line { 
  stroke:       #a8a8a8;  
  fill: none;
  stroke-width:     2px;
  stroke-dasharray: 5,5; 

}

/* Tutorial: all */
div.tutorialContainer{
  position: relative;
  width:         550px;
  height:        610px;
  
  padding-top:     0px;
  padding-left:    0px;
  padding-right:   0px;
  padding-bottom:  0px;
  margin:          0px;
  
  border-width:    4px;
  border-style:     solid;
  border-color:     #BABABA;
  background-color: #fafafa;
}

div.headTutorialContainer{
  position: absolute;
  top:       20px;
  left:      20px;
  right:     20px;
  height:    20px;
}

div.pageNo{
  position: absolute;
  right:       0px;
}
div.instrucTutorialContainer{
  position:absolute;
  top:       80px;
  left:      20px;
  right:     20px;
  border:     0px;
}
/* end of :all */

/* Tutorial:index */
.lotteryImgIndex{
    position: absolute;
    top:        0px;
    left:     100px;
    right:      0px;
    width:    260px;
    height:   190px;
    border:none;
}

div.imgContainerIndex{
    position:absolute;
    top:    0px;
}

div.textContainerIndex{
    position:absolute;
    top:    260px;
}
div.noteIndex{
    position:absolute;
    width:   330px;
    top:     200px;
    left:     70px;
    font-size:12px;
}
/* end of :index */

/* Tutorial:intro_prob_prize */
.lotteryImgIntroProbPrize{
    width:    190px;
    height:   130px;
    border:none;
}

div.imgContainerIntroProbPrize{
    position: absolute;
    left:  300px;
    top:     0px;
    padding: 5px 5px 5px 5px;
}

div.textContainerBesideImgIntroProbPrize{
    position: absolute;
    left:   0px;
    top:    0px;
    width:280px;
}

div.textContainerBelowImgIntroProbPrize{
    position: absolute;
    left:    0px;
    top:   130px;
    width: 500px;
}
/* end of :intro_prob_prize */

/* Tutorial:proba_diagram */
div.textContainerAboveSplotProbaDiagram{
  position: absolute;
  left:0px;
}

div.splotContainerProbaDiagram{
  position: absolute;
  top:30px;
}

div.textContainerBelowSplotProbaDiagram{
  position: absolute;
  top:350px;
}
/* end of :prob_diagram */

/* Tutorial:prize_diagram */
div.textContainerAboveSplotPrizeDiagram{
  position: absolute;
  left:0px;
}

div.splotContainerPrizeDiagram{
  position: absolute;
  top:130px;
}

div.textContainerBelowSplotPrizeDiagram{
  position: absolute;
  top:420px;
}
/* end of :prob_diagram */

/* Tutorial:proba_prize_diagram */
div.textContainerAboveSplotProbaPrizeDiagram{
  position: absolute;
  left:0px;
}

div.splotContainerProbaPrizeDiagram{
  position: absolute;
  top:30px;
}

div.textContainerBelowSplotProbaPrizeDiagram{
  position: absolute;
  top:350px;
}
/* end of proba_prize_diagram */

/* Tutorial:many_points_diagram */
div.textContainerAboveSplotManyPointsDiagram{
  position: absolute;
  left:0px;
}

div.splotContainerManyPointsDiagram{
  position: absolute;
  top:60px;
}

div.textContainerBelowSplotManyPointsDiagram{
  position: absolute;
  top:380px;
}
/* end of many_points_diagram */

/* Tutorial:no_right_choice_diagram */
div.textContainerAboveSplotNoRightChoiceDiagram{
  position: absolute;
  left:0px;
}

div.splotContainerNoRightChoiceDiagram{
  position: absolute;
  top:30px;
}

div.textContainerBelowSplotNoRightChoiceDiagram{
  position: absolute;
  top:340px;
}
/* End of no_right_choice_diagram */

/* 

/* Tutorial:warm_up */
div.textContainerAboveSplotWarmUpDiagram{
  position: absolute;
  left:0px;
}

div.splotContainerWarmUpDiagram{
  position: absolute;
  top:135px;
}

div.textContainerBelowSplotWarmUpDiagram{
  position: absolute;
  top:340px;
}
/* end of Tutorial:warm_up  */

/* Tutorial: End of Tutorial; */
.lotteryImgEndOfTutorial{
  position: absolute;
  top:        0px;
  left:      100px;
  right:      0px;
  width:    320px;
  height:   190px;
  border:none;
}
div.imgContainerEndOfTutorial{
    position:absolute;
    top:    20px;
}
div.textContainerEndOfTutorial{
    position:absolute;
    top:    240px;
}
/* End of : end of tutorial */

/* Tutorial:EndOfTraining */
div.textContainerEndOfTraining{
  position: absolute;
  top:0px;
}
#mTurkIdContainer{
  position: absolute;
  border-width:   2px;
  height:        50px;
  font-size:     30px;
  top:           70px;
  left:           0px;
  resize:     none;
    width:      auto;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}
/* end of Tutorial:EndOfTraining */
