@charset "UTF-8";
/* CSS Document */

#containerinout2 {
	margin:auto;
	width:870px;
	height:1000px;
	border:1px solid #ffffff;
}
#container-inout {
	margin:auto;
	margin-top:-10px;
	width:850px;
	height:700px;
	position:relative;
	border:0px solid #333;
}

#svg {
	top:94px;
	position:absolute;
	left:346px;
}

#svg2 {
	top:436px;
	position:absolute;
	left:346px;
}

#happy {
	position:absolute;
	left:90px;
	top:100px;
	width:250px;
	height:500px;
	border:0px solid #333;
	overflow:hidden;
}

/*==============================*/

form {
  position: absolute;
  left: 0;
  top: 10px;
}

/*==============================*/
/* navigation design */

input[type=radio], input[type=checkbox] {
		display:none;
	}

input[type=radio] + label, input[type=checkbox] + label {
		display:inline-block;
		margin:0px -2px 8px -2px;
		padding: 4px 12px;
		font-size: 16px;
		line-height: 20px;
		color: #333;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background-color: #eee;
		border:1px solid #ccc;
	}

	 input[type=radio]:checked + label, input[type=checkbox]:checked + label{
		outline: 0;
		background-color:#444;
		color:#eee;
		border:1px solid #000;
	}
	
/*==============================*/
/*year on year comparison*/
#yoy {
	font-size:14px;
}

#rev, #exp, #defsur {
	position:absolute;
	top:0;
}

#rev, #exp, #defsur {
	font-weight:normal;
	letter-spacing:0.06em;
	font-size:18px;
}

#rev {
	top: 178px;
	left: 164px;
	color:#fff;
}

#exp {
	top:390px;
	left:164px;
	color:#fff;
}

#defsur {
	top:310px;
	left:0;
	text-align:center;
	width:90px;
}


/*==============================*/

#comesfrom {
	position:absolute;
	left:348px;

	top:50px;
}

#goesto {
	position:absolute;
	left:348px;

	top:390px;
}

/*==============================*/

hr {
	width:250px;
	border: dashed #fff 2px;
	position:absolute;
	top:340px;
	opacity:0.6;
}


/*==============================*/

#in1, #in2, #in3, #in4,
#out1, #out2, #out3, #out4, #out5 {
	display:block;
	position:absolute;

	left:346px;
	width:424px;
	border:0px solid #f00;
	
	color:rgba(0,0,0,0.4);
	font-size:14px;
	
	letter-spacing:0.08em;
	word-spacing:0.14em;
}
#in1, #in2, #in3, #in4 {
	height:30px;
	padding:10px 0 0 9px;
}
#out1, #out2, #out3, #out4, #out5 {
	height:24px;
	padding:6px 0 0 15px;
}

#in1 {
	top:81px;
	color:rgba(255,255,255,0.8);
}

#in2 {
	top:122px;
}

#in3 {
	top:163px;
}

#in4 {
	top:204px;
}

#out1 {
	top:421px;
	color:rgba(255,255,255,0.8);
}

#out2 {
	top:455px;
}

#out3 {
	top:488px;
}

#out4 {
	top:520px;
}

#out5 {
	top:553px;
}

/*==============================*/

.show1, #in1:hover span, 
.show2, #in2:hover span, 
.show3, #in3:hover span, 
.show4, #in4:hover span,

.show5, #out1:hover span, 
.show6, #out2:hover span, 
.show7, #out3:hover span, 
.show8, #out4:hover span, 
.show9, #out5:hover span {
	display: none;
}

#in1:hover .show1, 
#in2:hover .show2, 
#in3:hover .show3, 
#in4:hover .show4,

#out1:hover .show5, 
#out2:hover .show6, 
#out3:hover .show7, 
#out4:hover .show8, 
#out5:hover .show9 {
	display:block;
}

#in1:hover .show1,
#out1:hover .show5 {
	color:rgba(255,255,255,1);
	font-size:14px;
}

#in2:hover .show2, 
#in3:hover .show3, 
#in4:hover .show4,

#out2:hover .show6, 
#out3:hover .show7, 
#out4:hover .show8, 
#out5:hover .show9 {
	color:rgba(0,0,0,1);
}