/* basics */ 

  #yb-handle,#yr-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
	   
	   .step2,.step3 {
		   display:none;
	   }

		  div#remaining-years {
			  width:60%;         /* adjust based on padding , perc */ 
			  padding-left:40%; /* change this in js based on perc working */ 
			  height:70px; 
background-color: #d3d3d3;
background-image: linear-gradient(315deg, #d3d3d3 0%, #2bc96d 74%);
			  position:relative; 
			  
		  }
		  
		  div.yearMark {
			  position:absolute;
			  bottom:-20px; 
		  }
		  
		  div#retirement-span {
background-color: #fff293;
background-image: linear-gradient(315deg, #fff293 0%, #ffe884 74%);
			 
			  height:70px; 
			  position:relative; 
		  }


			  div#graph-full-life {
				  width:100%;
				  padding:0;
				  margin:0; 
				  height:50px; 
			  }
			  
			  div#graph-full-life div {
				  float:left;
				  height:50px; 
			  }
			  
				  div#graph-full-life div h5 {
				  text-shadow: none;
					  color:#fff; 
			  }     
			  
			  div#full-life #past {
				  width:33%;
background-color: #ffffff;
background-image: linear-gradient(315deg, #ffffff 0%, #274060 74%);
				
			  }
			  div#now-to-retirement {
				  width:33%;
background-color: #d3d3d3;
background-image: linear-gradient(315deg, #d3d3d3 0%, #2bc96d 74%);
				  
			  }			  
			  div#retirement-years {
				  width:33%;
background-color: #fff293;
background-image: linear-gradient(315deg, #fff293 0%, #ffe884 74%);
				  
			  }		
			   div#graph-full-life div h5.cyan {
				 color:darkcyan; 
				  
			  }	

/* end of basics */ 


/* past */ 
	   section#gallery div {
		   width:100px; 
		   height:70px; 
		   float:left;
		   margin-bottom:15px; 
		   margin-right:8px; 
		   text-align: center;
		   z-index: 2;
	   }
	   
	   #gallery div span.arrowTo {
	   	position:absolute;
	   	bottom:2px;
	   	right:4px;
	   	cursor: pointer;
	   }
	   
	   section#gallery div h3 {
		   font-size: .8em; 
		   font-weight:500;
		   padding:3px 7% 4px 7%;
	   }
	 
	 #widgeter {

		box-sizing: content-box;
box-sizing: border-box;	  
	 	
	 }  
	   
  #widgeter #past { 
	  width: 48%; 
	  min-height: 18em; 
	  padding: 0.5em;  
	  margin: 10px; 
	  border:dashed 1px #999; 
background-color: #ffffff;
background-image: linear-gradient(315deg, #ffffff 0%, #274060 74%);;

	  float:right;
	  position: relative;
	  z-index: 1; 
	   
  }	   

  #widgeter #past.wider {
  	width:90%; 
  	margin-left:20px;
  }

  #widgeter #past h2 {
  	color:#fff;
  	text-shadow: none; 
  }

  div.modalbox {
  	background: #fff;
  }

  .ui-dialog .ui-dialog-content {

	background: #fff;

}

  #gallery {
  	float:left; 
  	width:42%;
  	min-height: 15em;
  	position:relative; 
  }

  /* having kids */ 
  .contingent {
  	display:none;
  }

/* custom hanlde for sliders */ 
    .handleNumber {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }

button.closer {
	display:block;
	margin-top:6px;
	float:right;
	clear:all;
}


	  #list-o-events { list-style-type: none; margin: 0; padding: 0;  }
  #list-o-events li { 
  	margin: 0 3px 3px 3px; 
  	padding: 5px; 
  	padding-left: 12px; 
  	font-size: 1.1em; 
  	height: 28px; 
  }
  
  #list-o-events li span { position: absolute; margin-left: -1.3em; }   

  .ui-icon-zoomin {
    float:right;
    cursor: pointer;
  }

  button#advancer {
   
    float:right;
    margin-top:24px;
  }



  /* time line */ 

  div.timeline-year-label {
  	position: absolute;
  	left:-30px;
  	width:28px;
  	background: #fff;
  	border:1px solid #000;
  	padding:4px;
  	font-size:12px;
  	color:#000;
  }

  .timeline-life-event {
  	color:#fff;
  	position:absolute;
  	left:70px;
  	font-size:1em;
  	text-shadow:none;
  }

  .timeline-life-event:nth-child(even) {
  	left:100px;
  }

/* end of past */