.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
   	width: 500px;
}

.verticalaccordion>ul>li {
	display:block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style:none;
	height:40px;
	width: 500px;
	/* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
	-moz-transition: height 0.3s ease-in-out;
	-webkit-transition: height 0.3s ease-in-out;
	-o-transition: height 0.3s ease-in-out;
}

.verticalaccordion>ul>li>h3 {
	display:block;
	margin: 0;
	padding:10px;
	height:19px;
	/* Decorative CSS */
    border-top:#f0f0f0 1px solid;
	font-family: 'Muli', sans-serif;
	text-decoration:none;
	text-transform:uppercase;
	color: #000;
	background: #cccccc;
	/* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #999999, #cccccc);
	background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   /* IE 8 */
}

.verticalaccordion>ul>li>div {
	margin:0;
	overflow: auto;
	padding:10px;
	height:220px;
}

.verticalaccordion>ul>li:hover {
	height: 280px;
	text-align: right;
}

.verticalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background: #000000;

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */
}

.verticalaccordion>ul>li>h3:hover {
    cursor:pointer;
}