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

body {  /* webkit adjacent sibling bug fix */
	-webkit-animation: bugfix infinite 1s;
}




@-webkit-keyframes bugfix { 
	from {padding:0;} 
	to {padding:0;} 
}

div.css3droppanel { /* Main wrapper for push down panel */
	position: relative;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0px;
}


div.css3droppanel > div { /* Content DIV DIV inside wrapper */
	height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */
	padding-top: 40px;
	padding-bottom: 40px;
	-moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #CCCCCC; /* choose colour background of content */
	position: relative;
	opacity: 0;
	line-height: 30px;
	-moz-transition: all 0.2s ease-in-out 0.1s;  /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */
	-o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */
	-webkit-transition: all 0.2s ease-in-out 0.1s;
	transition: all 0.2s ease-in-out 0.1s;
	text-decoration: none;
	font-size: medium;
	color: #000000;
	padding-left: 20px;
	padding-right: 20px;
}


div.css3droppanel:after { /* Add bottom bar beneath wrapper */
	content: '';
	display: block;
	bottom: 0;
	position: absolute;
	width: 100%;
	height: 0px; /*CHANGED */
}


div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */
	position: absolute;
	right: 50px; /* right position of checkbox */
	width: 60px; /* width of checkbox */
	height: 42px; /* bottom offset of checkbox */
	z-index: 10;
	cursor: pointer;
	opacity: 0;
}

div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */
	height: 250px; /* height of content to expand to. Scrollbar will be shown if content overflows this height */
	opacity: 1;
	overflow: auto;
}

div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */
	position: absolute;
	left: 1px; /* right position of label CHANGED */
	width: 1px; /* width of label CHANGED */
	height: 1px; /* bottom offset of label */
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	cursor: pointer;
	z-index: 5;

}

div.css3droppanel label:hover { /* style of label when mouse rolls over it */
	box-shadow: none;
}

div.css3droppanel label:after { /* generated down arrow */
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-color: #ffffff transparent transparent transparent; /*COLOR changed*/
	top: 18px;
	left: 18px;
	box-shadow: inset 0 0 7px #000000;
	-webkit-box-shadow: inset 0 0 7px #000000;
}


[if lte IE 8]>
<style>

/* Hide panel from IE8 and below */

div.css3droppanel {
		display: none;
}