h1 {
	text-align:center;
	background-color:#0080c0;
	max-width:800px;
}

.tabPane {
	position:relative;
}
.tab {
	position:absolute;
	left:0;
	top:0;
}

.tab:nth-child(1)>.tab_fg,.tab:nth-child(1)>.tab_bg {
	top:0;
	border-radius:5px 0 0 0;
}
.tab:nth-child(2)>.tab_fg,.tab:nth-child(2)>.tab_bg {
	top:30px;
}
.tab:nth-child(3)>.tab_fg,.tab:nth-child(3)>.tab_bg {
	top:60px;
}
.tab:nth-child(4)>.tab_fg,.tab:nth-child(4)>.tab_bg {
	top:90px;
}
.tab:nth-child(5)>.tab_fg,.tab:nth-child(5)>.tab_bg {
	top:120px;
}
.tab:nth-child(6)>.tab_fg,.tab:nth-child(6)>.tab_bg {
	top:150px;
}
.tab:nth-child(7)>.tab_fg,.tab:nth-child(7)>.tab_bg {
	top:180px;
}
.tab:nth-child(8)>.tab_fg,.tab:nth-child(8)>.tab_bg {
	top:210px;
}
.tab_fg,.tab_bg {
	width:88px;
	padding:5px;
	height:19px;
	background-color:#57c8e3;
	border: 1px solid gray;
	cursor:pointer;
	position:absolute;
	left:0;
	opacity: 1!important;
	overflow:hidden;
	transition: 
		color 1s,
		background-color 1s ease-in,
		left 1s,
		top 1s,
		width 1s,
		font-size 1s,
		/*transform 1s,*/
		border-radius 1s;
}
.tab_bg {
	background-color:lightgray!important;
	color: darkgray!important;
}
.tab_fg:hover {
	font-weight:bold;
}
.tab_fg:active {
	color:white;
}

.selected>.tab_fg {
	background-color:#0080c0!important;
	top:0!important;
	left:100px!important;
	width:690px!important;
	font-weight:bold;
	font-size:1.2em;
	text-align:center;
	color:#ff7070;
	//transform: matrix(1,0,0,1,0,0);
	border-radius:0 5px 0 0!important;
}

@keyframes content_appears {
	0% {
		opacity:0
	}
	100%	{
		opacity:1
	}
}
.tab_content {
	position:absolute;
	top:30px;
	left:100px;
	width:680px;
	padding:10px;
	border: 1px solid gray;
	display:none;
	opacity: 0;
}
.selected>.tab_content {
	display:block!important;
	opacity: 1;
	box-shadow:5px 5px 10px rgba(0,0,0,0.5);
	min-height:159px;
	animation: content_appears 2s
}