/**
 * Pure CSS Clickable Dropdown - Styled
 */

	#demo {
		margin: 30px 0 50px 0;
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	}

	#demo .wrapper {
		display: inline-block;
		width: 180px;
		margin: 0 10px 0 0;
		height: 20px;
		position: relative;
	}

	#demo .parent {
		height: 100%;
		width: 100%;
		display: block;
		cursor: pointer;
		line-height: 30px;
		height: 30px;
		border-radius: 5px;
		background: #F9F9F9;
		border: 1px solid #AAA;
		border-bottom: 1px solid #777;
		color: #282D31;
		font-weight: bold;
		z-index: 2;
		position: relative;
		-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
		-webkit-transition-delay: .8s;
		text-align: center;
	}

	#demo .parent:hover,
	#demo .content:hover ~ .parent {
		background: #fff;
		-webkit-transition-delay: 0s, 0s, 0s;
	}

	#demo .content:hover ~ .parent {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		z-index: 0;
	}

	#demo .content {
		position: absolute;
		top: 0;
		display: block;
		z-index: 1;
		height: 0;
		width: 180px;
		padding-top: 30px;
		-webkit-transition: height .5s ease;
		-webkit-transition-delay: .4s;
		border: 1px solid #777;
		border-radius: 5px;
		box-shadow: 0 1px 2px rgba(0,0,0,.4);
	}

	#demo .wrapper:active .content {
		height: 123px;
		z-index: 3;
		-webkit-transition-delay: 0s;
	}

	#demo .content:hover {
		height: 123px;
		z-index: 3;
		-webkit-transition-delay: 0s;
	}


	#demo .content ul {
		background: #fff;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100%;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	#demo .content ul a {
		text-decoration: none;
	}

	#demo .content li:hover {
		background: #eee;
		color: #333;
	}

	#demo .content li {
		list-style: none;
		text-align: left;
		color: #888;
		font-size: 14px;
		line-height: 30px;
		height: 30px;
		padding-left: 10px;
		border-top: 1px solid #ccc;
	}

	#demo .content li:last-of-type {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}