@charset "utf-8";
/* CSS Document */
/** DO NOT EDIT THIS BLOCK OF CODE, THIS IS THE DEFAULT CSS RESET THAT IS USED TO MAKE ALL BROWSERS DISPLAY AS CLOSE AS POSSIBLE BY DEFAULT **/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;zoom:0;}body{	line-height:1;}ul,li{list-style:none;display:inline;}.clear{clear:both;}

.ResizeBox{
	position:absolute;
	display:block;
	overflow:hidden;	
}

.ResizeBox .rail{

	display:block;
	height:40px;	
	position:relative;
}

.ResizeBox .lines{
	display:block;
	position:relative;
	border-right:3px solid #cc0000;
	border-top:3px solid #cc0000;	
			
}

.ResizeBox .dragHandle{
	background:url(../images/drag.png) no-repeat 3px top;
	display:block;
	position:relative;
	width:30px;
	height:30px;	
}

.ResizeBox .dragger{
	display:block;
	width:40px;
	height:40px;

	position:relative;
}

.lGraphHolder{
	float:left;
	display:block;
	width:520px;
	
}
.controlsHolder{
	display:block;
	float:right;	
	width:140px;
	margin-right:20px;
	margin-top:50px;
}



body .controlsHolder h2{
	font-size:22px;
	color:#7070cf;
	text-align:left;
	padding:0px;
	margin:0px;
	font-weight:bold;
	width:300px;
	margin-bottom:10px;
	margin-top:30px;
}

h1{
	color:#676666;
	font-size:18px;
	text-align:center;	
	margin-bottom:20px;
}

.DynamicSlider{
	float:left;	
	margin-left:55px;
}

.DynamicSlider .top{
	background:url(../images/slider_top.png) no-repeat center top;
	width:28px;
	height:9px;
}

.DynamicSlider .bottom{
	background:url(../images/slider_bottom.png) no-repeat center top;
	width:28px;
	height:9px;
}

.DynamicSlider .middle{
	background:url(../images/slider_middle.png) repeat-y center top;
	width:28px;
	min-height:60px;
}

.DynamicSlider .slider{
	background:url(../images/slider.png) no-repeat 2px center;
	width:40px;
	height:22px;

}

.DynamicSlider .slider:hover{
	cursor:	
}



.BarGraph{
	display:block;	
	background:url(../images/bar_Scale.png) repeat-y left bottom;
	float:left;
	margin-left:70px;
}

.BarGraph:after{
	display:block;
	content:"";	
	border-bottom:1px solid #cccccc;
	margin-left:5px;
}

.BarGraph .graph{
	display:block;	
	padding-right:16px;
}

.BarGraph .title{
	display:block;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#676666;	
	position:relative;
	top:-13px;
}

.BarGraph .labels{
	position:absolute;	
	width:60px;
}

.BarGraph .sideLabel{
	position:absolute;	

	
}


.BarGraph .scales{
	position:absolute;	
}

.BarGraph .scales li{
	display:block;
	font-size:16px;
	color:#A5A6A8;	
	text-align:right;
	width:30px;
	position:relative;
	left:-60px;
	top:355px;
	float:left;
	margin:0 27.7px;
}

.BarGraph .scales li:first-child{
	visibility:hidden;	
}

.BarGraph .label{
	position:absolute;
	display:block;
	font-size:11px;
	text-align:center;
	color:#777;	
	margin-top:15px;
	width:286px !important;

	

}

.BarGraph .labels li{
	display:block;
	font-size:11px;
	color:#676666;	
	text-align:right;
	width:60px;
	position:relative;
	left:-95px;
	top:-15px;
	margin-bottom:15px;
}

.BarGraph li{
	display:block;
	float:left;	
	margin-left:24px;
}

.BarGraph ul:after{
	display:block;
	content:"";
	cleaR:both;	
}

.GraphBar{
	display:block;
	background-color:#98b8be;
	width:30px;	
	
}

.GraphBar .text{
	display:block;
	font-size:11px;
	color:#676666;
	position:relative;
	top:-30px;
	text-align:center;
}

.GraphBar .label{
	display:block;
	font-size:11px;
	color:#676666;
	position:relative;
	text-align:center;
	padding-top:5px;
	width:auto !important;
	background-color:transparent;
}



.slidersHolder {
	width:305px;
	border-right:1px solid #dddede;
	height:508px;	
	float:left;
}

.graphsHolder{

	width:157px;	
	float:left;
}

h2{
	text-align:left;
	display:block;
	font-size:22px;
	color:#505050;
	font-weight:bold;
	margin-bottom:50px;	
	margin-top:40px;
	padding-left:24px;
}

h3{
	float:left;
	text-align:center;	
	width:70px;
	margin-top:0px;
	color:#676666;
	font-size:12px;
	margin-bottom:10px;
	margin-left:23px;

}

.graphsHolder h3{
	margin-left:45px;
}

sub{

	font-size:9px;
	position:relative;
	top:5px;
}

sup{
	vertical-align:super;
	font-size:10px;
}


.info{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display:block;
	height:194px;
	background:#FFF;
	border:1px solid #CCC;


}

.info span{
	display:inline-block;
	width:20px;	
}

.info p{
	color:#000;
	font-size:12px;
	line-height:18px;
	margin:20px;
	margin-bottom:10px;	
	margin-top:10px;
}

.info h1{
	text-align:left;
	font-size:24px;
	color:#6666cc;
	margin:20px;	
}

.info li{
	display:block;	
	font-size:12px;
	margin:10px;
	margin-bottom:5px;
	color:#676666;
	margin-top:5px;
}

.info .hr{
	background:none;
	border:none;	
	border-bottom:1px dashed #CCC;
	margin-top:15px;
}

.info img{
	margin-left:80px;	
	margin-bottom:20px;
	margin-top:10px;
}


.graph2 .slidersHolder{
	width:474px;
	height:auto;
}



.dGraphsHolder .GraphBar{
	background:#7aa2c4;	
}


.lGraphHolder .BarGraph{
	background:url(../images/lgraph.png) no-repeat left bottom;
	height:350px;
	
}

.dGraphsHolder .BarGraph{
	background:url(../images/dgraph_bg.png) repeat-y 2px bottom;
	
}

.graph2 .slidersHolder{
	border:none;	

		margin-bottom:10px;
}

.graph2 .graphsHolder h3{
	margin-left:50px;
	margin-top:10px;	
}

.graph2 img{
	margin-left:10px;	
}

.graph2 .info{
	height:550px	
}

.dGraphsHolder li{
	margin-left:34px;
}

.graph2 .graphsHolder{
	width:140px;	
}

.dGraphsHolder .BarGraph .graph{
	padding-right:30px;
}

.graph2 .controlsHolder{
	padding-left:0px;
	padding-right:0px;
	width:490px;	
}

.GraphLine{
	display:block;	
	position:relative;
	left:-23px;
}



.lGraphHolder .graph{
	padding:0px;	
}

.lGraphHolder .labels li{
	top:2px;
	left:-93px;
	margin-bottom:18.7px;
	font-size:16px;
	color:#a5a6a8;
}

.lGraphHolder .labels li:last-child{
	top:7px;
	left:-88px;	
	display:none;
}



.lGraphHolder .label{
	width:474px !important;
	margin-top:28px;
	margin-left:40px;
	font-size:16px;
	color:#A5A6A8;
	text-align:right;
	font-weight:bold;
}


.lGraphHolder .sideLabel{
	color:#a5a6a8;
	font-size:16px;
	width:12px;
	height:0px;	
	line-height:22px;
	display:block;
	position:absolute;
	left:33px;
	top:287px;
	font-weight:bold;



}



.graph3 .slidersHolder{
	width:	270px;
	padding-left:90px;
	padding-right:120px;
	height:280px;
}
.graph4 .slidersHolder{
	width:	200px;
	padding-left:140px;
	padding-right:140px;
	height:280px;
}

.graph4 .slidersHolder h2{
	margin-left:15px;	
}


.graph3 .slidersHolder h2{
	margin-left:30px;	
}


.graph4 .slidersHolder h3{
	position:relative;
	left:15px;	
}

.graph3 .slidersHolder h3{
	position:relative;
	left:15px;	
}

.info strong{
	color:#6666CC;
}

.graph1 .graphsHolder h3{
	width:90px;
}


html{
	background:#ddd;

		
}

body{
	background:#f7f8f8;
	font-family:Arial, Helvetica, sans-serif;
	width:800px;
	height:820px;
	padding:10px;
	 box-shadow: 0 1px 20px rgba(0, 0, 0, 0.2);

}


.Button{
	width:156px;
	height:28px;
	background:url(../images/button.png);
	font-size:14px;
	text-align:center;
	color:#6666cc;
	font-weight:bold;
	text-transform:uppercase;
	padding-top:11px;
	float:right;
	clear:right;
	position:relative;
	top:20px;
	right:20px;
}

.Button:hover{
	cursor:pointer;	
	color:#333399;
}

.Help{
	width:28px;
	height:28px;
	background:url(../images/help.png);
	overflow:hidden;
	text-indent:-5000px;

}

.Help:hover{
	cursor:pointer;	
}


.ToolTip{
	width:306px;
	display:block;	
	position:absolute;
}

.ToolTip span{
	font-size:8px;
	position:relative;
	top:3px;	
}

.ToolTip .arrow{
	width:19px;
	height:10px;
	float:left;
	background:url(../images/tip_arrow.png);
	position:relative;
}

.ToolTip .top{
	clear:both;
	display:block;
	height:7px;
	background:url(../images/tip_top.png);
}



.ToolTip .content{
	clear:both;
	display:block;
	background:url(../images/tip.png);
	font-size:11px;
	line-height:15px;
	padding-left:10px;
	padding-right:10px;
	padding-top:3px;

}


.ToolTip .bottom{
	clear:both;
	display:block;
	height:13px;
	background:url(../images/tip_bottom.png);
}


.NumberInput input{
	width:90px;
	height:32px;	
	border-left:2px solid #b5b5b5;
	border-top:2px solid #b5b5b5;
	border-bottom:2px solid #dcdcdc;
	padding:25px 0px;
	text-align:right;
	color:#505050;
	font-size:32px;
	text-align:center;
}

.NumberInput{
	width:137px;	
}

.NumberInput .arrows{
	float:right;
	width:43px;
	margin-top:1px;
	position:relative;
	left:-2px;
	top:-1px;
}

.NumberInput .up{
	display:block;
	background:url(../images/flippers.png);
	height:43px;
	text-indent:-500px;
	overflow:hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.NumberInput .down{
	display:block;
	background:url(../images/flippers.png) 0px -43px no-repeat;
	height:43px;
	text-indent:-500px;
	overflow:hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.NumberInput .unit{
	float:right;
	padding-left:5px;
	margin-top:5px;	
	font-size:12px;
}

.NumberInput .up:hover{
	cursor:pointer;
	background-position:-43px 0px;
}

.NumberInput .down:hover{
	cursor:pointer;
	background-position:-43px -43px;
}

.RightWrong{
	width:13px;
	height:13px;
	overflow:hidden;
	text-indent:-5000px;
	position:relative;
	top:5px;
	left:15px;
}

.right{
	background:url(../images/rightWrong.png) -12px 0px no-repeat;	
}

.wrong{
	background:url(../images/rightWrong.png) 2px 0px  no-repeat;	
}


.intro{
	width:758px;
	padding:20px;
	border:1px solid #dcdcdc;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;	
background:#FFF;
}

.intro h1{
	font-size:18px;
	line-height:24px;
	color:#6666cc;
	margin-bottom:30px;	
}

.intro p{
	font-size:14px;
	line-height:18px;	
	margin-bottom:20px;
}

.intro p strong{
	color:#6666cc;	
}

.intro .Button{
	margin-bottom:10px;	
}

.intro .buttons{
	float:right;
	margin-left:50px;
	margin-right:20px;	
}


.Scale{
	display:block;
	width:700px;
	height:50px;
	background:url(../images/scale.png) no-repeat;
	background-position:center center;	
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
}

.dotted{
	background:url(../images/scale_dotted.png) no-repeat;
	background-position:center center;	
}

.ScaleValue{
	float:left;
	width:40px;
	margin-left:-20px;
	margin-right:-20px;
	margin-top:4px;
	position:relative;
}

.ScaleValue .label, .ScaleValue .value{
	text-align:center;
	display:block;
	color:#000;
	font-size:11px;	
	
}

.Scale .scaleLabel{
	width:40px;
	padding-left:-20px;
	padding-right:-20px;
	font-size:11px;
	position:relative;	
	top:8px;
	text-align:center;
}

.Scale .endValues{
	clear:both;	
	width:700px;
	font-size:11px;
	color:#272895;
	position:relative;
	top:10px;
	font-weight:bold;
	text-align:center;
}

.Scale .endValues .first{
	float:left;
	text-align:left;
	position:relative;
	margin-right:-20px;
	margin-left:-20px;
	width:40px;
	text-align:center;
}

.Scale .endValues .last{
	float:right;
	text-align:right;
	position:relative;
	left:3px;
	margin-right:-20px;
	margin-left:-20px;
	width:40px;
	text-align:center;
}

.ScaleValue .block{
	height:10px;
	width:2px;
	background-color:#959595;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	margin-bottom:5px;
	
}



sup{
	display:inline-block;
	font-size:9px;
	position:relative;
	top:-3px;	
}

.RadialButton{
	display:block;
	float:left;
	padding-left:30px;
	height:15px;
	background:url(../images/radial.png) no-repeat;
	font-size:11px;	
	padding-top:5px;
	margin-right:10px;
	margin-left:20px;
}

.RadialButton:hover{
	cursor:pointer;	
}

.RadialButtons .active{
	background-position:0px -21px;	
}

.ArrowBox{
	position:absolute;	
	border-left:1px solid #6666cc;
	border-right:1px solid #6666cc;
	border-bottom:1px solid #6666cc;
	height:13px;
}

.ArrowBoxArrow{
		position:absolute;	

	border-right:1px solid #6666cc;
	border-bottom:1px solid #6666cc;

}

.ArrowBoxArrowHead{
	position:absolute;
	width:11px;
	height:9px;
	background:url(../images/arrow.png);	
}


.sliderAmount{
	clear:both;	
	margin-left:auto;
	margin-right:auto;
	font-size:12px;
	margin-top:35px;
	display:block;
	text-align:center;
	width:50px;
	padding-left:55px;
}

.ToolTip strong{
	font-weight:normal;
	text-align:center;
	display:block;	


}

.ToolTip .content div{
	display:block;
		margin-left:auto;
		margin-right:auto;
		width:150px;
}
.line-label{font-size:12px; color:#cc0000; position:absolute;}
#ek-label{top:-20px; right:10px;}
#ek-label.alternate{top:5px; right:20px;}
#beta-label{top:10px; right:-70px;}
#beta-label.alternate{top:20px; right:10px;}
.axis-label{color:#00aced; position:absolute; font-size:12px;}
#ekm-label{left:20px;}
#kf-label{left:40px;}
.rightLabel{position:absolute; left:396px; width:200px; text-align:right; color: #A5A6A8; font-size: 16px; font-weight: bold;}
#projected-return-label{top:246px;}
#capm-return-label{top:290px;}