#demo_box {
	/* Really it's fixed, we just do this for stupid IE6 to at least "function" */
	position: absolute;
	left: 0px;
	top: -500px;
	width: 100%;
	height: 300px;
		padding: .3em;
		border-bottom: 5px thick solid #5b94ca;
		font-size:.75rem;
		text-align: left;
		transition-duration: .3s;	
	overflow: scroll;
	overflow-y: auto;
	
    -webkit-overflow-scrolling: touch;
background: #f0f0f0;
	z-index: 10000;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif; 
	
	border-bottom: 3px solid #d6d8cf;
	
	
	
}
div>#demo_box {
		/* For "normal" browsers */
		position: fixed;
	}

body>#demo_box {
	/* For "normal" browsers */
	/* This makes the box height size */
	height: 250px;
	position: fixed;
}


/* 64em = 1024px */
@media only screen and (min-width: 64em) {	
	div#demo_box_label {
		z-index: 1;
}	


/* 32em = 512px */
@media only screen and (min-width: 32em) {	
	div#demo_box_label {
		z-index: 1;
}


div#demo_box_label {
	/* Really it's fixed, we just do this for stupid IE6 to at least "function" */
	position: absolute;
	right: 45px;
	/* Start off off-screen, JS will move it in place... So it doesn't show when JS isn't there */
		top: -100px;
		z-index: 10001;
	cursor: pointer;

	font-size:.75rem;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 3px solid #d6d8cf;
	border-left: 3px solid #d6d8cf;
	border-right: 3px solid #d6d8cf;
	border-top: none;
	background: #f0f0f0;
	color: #fff; 
	padding: 3px 20px 2px 20px; 
	font-weight: bold; 
	white-space: nowrap;
	border-radius: 0 0 15px 15px;
	transition-duration: 0.5s;
	
	
	 
	
}

body>div#demo_box_label {
	/* For "normal" browsers that know how to fix things */
	position: fixed;
}

div#demo_box_label:hover {
	background: #d6d8cf;
}