/* the big taiko box */
#accordion{
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	text-decoration: none;
	margin:auto;
	width:100%;
}

#accordion h3{
	font-size: 16px;
	color: #666;
	margin: 0px;
	font-weight: normal;
}
#accordion h3:hover{
	opacity:0.8;
}
/* what happen before click on title? */
#accordion .tab{
	max-height:2px;
	overflow: hidden;
	transition:all 1s ease;
	cursor:pointer;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
	
	/* padding below determine the visibility of the Title */
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
}

/* what happen when rolover on title? */
#accordion tab:hover{
	opacity:0.6; 
}

/* what happen after click on title? */ 
#accordion .tab:focus{
	max-height:2000px;
	opacity:1;
	outline: solid 0px red;
	border: 1px solid #09F;
}