body 			{margin:0; padding:0}
h4				{font-size:14px}
#interactive	{position:relative; display:block; width:724px; font:12px Helvetica, Arial, sans-serif; overflow:hidden;
				 /* -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none;  user-select: none; -ms-user-select:none;*/
				  bbackground:url(ss2.jpg) top left no-repeat}
.header			{position:relative; top:0; left:0; width:100%; z-index:20;}
h3		{font-size:24px; font-weight:normal; padding:18px 0 0 15px; margin:0}
.header p		{font-size:14px; margin:7px 0 0 15px; line-height:1.25}

.hwacc			{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0);}
.main			{position:relative; display:block; border:1px solid #999; margin:6px 8px 0 14px;}
.graph			{position:absolute; top:0; left:0; width:100%; height:20em; z-index:30;}
.graph h3		{padding:10px 0 0 10px}
.ui				{position:relative; margin-top:35.57%; background:url(bg_choose.png) left top repeat}
.ui:after		{content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.ui h4			{font-size:18px; font-weight:normal; margin:10px 0 8px 19px}

.about-you		{position:absolute; top:0; left:0; width:61%; border-top:1px solid #999}
.about-spouse	{position:absolute; bottom:0; left:0; width:61%; height:36px; padding-bottom:4px; border-top:1px solid #999; overflow:hidden;
				 -webkit-transition:height 0.3s 0s ease-in-out; transition:height 0.3s 0s ease-in-out;}
.about-spouse.selected
				{height:132px;}
.about-spouse h4{cursor:pointer}
.about-spouse .slider, .about-spouse.levers .options
				{opacity:0; -webkit-transition:opacity 0.3s 0s ease-out; transition:opacity 0.3s 0s ease-in;}
.about-spouse.selected .slider, .about-spouse.selected.levers .options
				{opacity:1}
.about-spouse .checkbox
				{display:block; float:left; min-width:9px; height:16px; padding: 1px 3px 0 3px; margin:0 8px 0 0; font-size:14px; text-align:center; border:1px solid #ccc; background:#fff}
.about-spouse.selected .checkbox:after
				{content: "X"; display: block; }
.about-spouse .spouse-lbl:before
				{content: "Include"; display:block; float:left; padding-right:0.5em}
.about-spouse.selected .spouse-lbl:before
				{content: "Your";}
.about-other	{position:relative; display:block; width:38.8%; float:right; border-left:1px solid #999; border-top:1px solid #999; z-index:2} 
.about-other h4	{margin-bottom:14px}
.about-other .savings
				{background:url(bg_savings.png) left 2px no-repeat; padding-left: 44px; margin-left:20px;}
.about-other .savings input
				{font-size:24px; width:58%; padding-bottom:4px;}
.about-other .btn-save-less, .about-other .btn-save-more
				{position:relative; top:1px; display:inline-block;width:32px; height:35px; background:url(bg_btn_save_more_less.png) repeat-x left top;
				 color:#fff; font-size:30px; font-weight:bold; line-height:1; text-align:center; border:1px solid #ccc; border-left:none; border-right:none;
				 cursor:pointer}
 .about-other .btn-save-more
 				{ border-left:1px solid #fff}
.levers .options
				{width:90%; padding:0; display:block; float:left; margin:7px 0 0 19px;}
.levers li 		{position:relative; list-style-type:none; margin:0; padding:3% 0% 7% 19%}	
.levers li[data-value="x"]
				{background:url(bg_about_male.png) 1px top no-repeat;}			
.levers li[data-value="y"]
				{background:url(bg_about_female.png) 1px top no-repeat;}			
.levers li[data-value="conservative"]
				{background:url(bg_invest_conservative.png) 1px top no-repeat;}			
.levers li[data-value="balanced"]
				{background:url(bg_invest_balanced.png) 1px top no-repeat;}			
.levers li[data-value="growth"]
				{background:url(bg_invest_growth.png) 1px top no-repeat;}			
.levers li span {padding:6px 10px 6px 30px; font-size:14px; color:#333; background:url(bg_radio.png) 0 3px no-repeat; cursor:pointer}
.levers li.selected span		
				{background:url(bg_radio_on.png) 0 3px no-repeat; font-weight:bold; padding:6px 10px 8px 30px;}		
.levers li .hover		
				{position:absolute; top:-45%; left:-26%; width:90px; margin-left:-39px; font-size:14px; text-align:center; padding-right:13px;
				 background:url(bg_mix_hover.png) no-repeat right top; display:none;}
.levers li:hover .hover		
				{display:block}		
.levers li .hover span
				{display:block; height:58px; padding:12px 0 0 0; border:1px solid #ccc; border-right:none; background:#fff; }
.about-you.levers .options, .about-spouse.levers .options
				{width:33%}
.about-you.levers li, .about-spouse.levers li
				{padding:8% 0 11% 28%}
				
.ui div.slider	{position:relative; bbackground:#fff; float:right; width:62%; height:7em;}
.ui div.slider .bg	
				{position:absolute; bottom:2px; left:1px; width:245px; height:32px; background:url(bg_slider_bar.png) left bottom no-repeat; background-size:245px; border:none;cursor:pointer;}
.ui div.slider .bg .marker
				{position:absolute; bottom:10px; left:0; width:36px; height: 30px; margin:0 0 5px -18px; padding:0; cursor:url(openhand.cur), move; 
					background:url(bg_slider_pointer.png) center center no-repeat; border:none;}
.ui div.slider .bg .marker.grabbing {cursor:url(closedhand.cur), move;}
.ui div.slider .bg .marker .lbl
				{position:absolute; top:-35px; width: 120px; left:-42px; text-align:center; white-space:nowrap; height: 20px; font-size:12px; font-weight:normal; 
				 color:#408940; border:none;}
.ui .about-spouse div.slider .bg .marker .lbl
				{width:135px; left:-49px}
.ui div.slider .bg .marker .lbl span
				{display:block; margin:0 auto; font-size:18px;}
.footer			{margin:14px 1.3% 0 2.5%; }
.legal			{font-size: 11px}
.disclosure 	{position:absolute; top:100%; width:100%; height:100%; font-size:12px; background:#fff; z-index:100; overflow:auto;
				font-family:Arial, sans-serif; -webkit-transition:top 0.3s 0s ease-in-out; transition:top 0.3s 0s ease-in-out;}
.disclosure h3	{font-size:18px;}
.disclosure p, .disclosure li	
				{margin:12px 15px 10px;}
.disclosure .btn-close
				{position:absolute; top:10px; right:10px; color:#fff; background:#666; padding: 5px 10px; font-size:14px; cursor:pointer}
.btn-additional	{display:block; float:right; padding:7px 1.6%; font-size:12px; font-weight:bold; color:#888; background:#f3f2ed; text-decoration:none; 
				 border:1px solid #ccc; cursor:pointer; margin-left:10px;  margin-bottom: 60px;}
.ruler-wrapper	{position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden}
.ruler, .ruler-bg
				{position:absolute; top:113px; left:2%; width:96%; height:43px; padding:11px 0 5px; z-index:1; background:#ebebeb;}
.ruler			{width:auto; background:none; z-index:3; overflow:hidden; -webkit-transition:left 0.3s 0s ease-in-out; transition:left 0.3s 0s ease-in-out;}
.ruler.grabbing	{-webkit-transition:none; transition:none}
.ruler .segment {position:relative; display:block; float:left; width:58px;  border-left:2px solid #666;  border-left:2px solid rgba(35,31,32,0.4); margin-left:-2px;
				 color:#666; color:rgba(35,31,32,0.5); transform:translate3d(0,0,0); margin-bottom:10px;
				 bbackground:url(bg_ruler_ticks.png) repeat-x left top;}
.ruler .segment.condensed
				{background:none; border-left:1px solid rgba(35,31,32,0.4); margin-left:-1px}
.ruler .segment.condensed.oct
				{border-width:2px; margin-left:-2px}
.ruler .segment span
				{margin-left:4px; padding-top:30px; display:block }
.ruler .segment.scaled.odd span, .ruler .segment.scaled.quad span, .ruler .segment.condensed span
				{display:none}
.ruler .segment.condensed.oct span
				{display:block; margin-left:2px}
.ruler .subtick
				{min-height:30px; width:50%; float:left; border-right:1px solid rgba(35,31,32,0.4); margin-left:-1px;
				 background:url(bg_ruler_subtick.png) -1px top repeat-x;}
.ruler .segment.scaled .subtick				 
				{background:none}
.ruler .segment.scaled .subtick.odd
				{display:none}
 .ruler .segment.condensed .subtick
 				{visibility:hidden}
.fade-left, .fade-right
				{position:absolute; top:93px; left:0; width:69px; height:83px; background:url(bg_fade_white_left.png) repeat-y left top; z-index:5}
.fade-right		{left:auto; right:0; background:url(bg_fade_white_right.png) repeat-y left top}
.sus-rate		{position: absolute; top:0; left:50%; width:173px; height:100%; z-index:2; 
				 -webkit-transition:margin-left 0.2s 0s ease-in-out, width 0.3s 0s ease-in-out; transition:margin-left 0.2s 0s ease-in-out, width 0.3s 0s ease-in-out;}
.sus-rate.grabbing
				{-webkit-transition: none; transition:none}
.range			{position: absolute; top:113px; left:-50%; width:100%; height:60px; background: #e56d29 url(bg_bar_data.png) repeat left top;}
.graph .pin		{position: absolute; left:50%; top:-53px; margin-left:-12px; width:32px; height:53px; z-index:10; cursor:url(openhand.cur), move;
				 background:url(bg_graph_pin.png) no-repeat left top;}
.graph .pin.grabbing 
				{cursor:url(closedhand.cur), move;}
.graph .pin .hover		
				{position:absolute; top:-158%; width:114px; margin-left:-39px; font-size:14px; text-align:center; padding-bottom:19px;
				 background:url(bg_pin_hover.png) no-repeat left bottom; display:none}
.graph .pin:hover .hover
				{display:block}
.graph .pin .hover span
				{display:block; padding:10px 0 3px 0; border:1px solid #ccc; border-bottom:none; background:#eee}
.graph .marker	{position:absolute; left:-1px; top:-31px; height:103px; border-left:1px solid #e56d29}
.graph .marker.right	
				{position:absolute; left:auto; right:-1px;}
.graph .marker .income, .marker .percent
				{position: absolute; top:-31%; left:-100px; width:200px; height:32px; margin-left:-1px; text-align:center; font:24px Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif;
				 color:#e56d29; background:url(bg_marker_stub.png) no-repeat center bottom;}
.graph .marker.tight.left .income
				{left:-194px; text-align:right; background:url(bg_marker_stub.png) no-repeat 98% bottom;}
.graph .marker.tight.right .income
				{left:-6px; right:auto; text-align:left; background:url(bg_marker_stub.png) no-repeat 2.5% bottom;}
.graph .marker.tight.left .percent
				{left:-194px; text-align:right; background:url(bg_marker_stub.png) no-repeat 98% top;}
.graph .marker.tight.right .percent 
				{left:-6px; right:auto; text-align:left; background:url(bg_marker_stub.png) no-repeat 2.5% top;}
.graph .marker .percent
				{top:auto; bottom:-35%; color:#333; font-size:18px; padding-top:5px; background:url(bg_marker_stub.png) no-repeat center top;}
.graph .label
				{position:absolute; left:0; bottom:5px; width:100%; font-size:18px; text-align:center}

@media not screen and (min-device-width: 568px) and (max-width: 1024px) {
.levers li:hover span
				{bbackground:url(bg_radio_on.png) 0 3px no-repeat; font-weight:bold;}
.levers li:hover .hover span
				{background:#fff; font-weight:normal}
}