.sidenotes-display-area {
	overflow:hidden;
	position:relative;
}
.sidenote-box {
	position:absolute;
	height:auto;
	background-color:white;
	border-radius:10px;
	padding: 12px 16px;
	box-shadow:2px 2px 2px rgba(1,1,1,.2);
	overflow:hidden;
	transition: height .3s ease-in-out .2s;
	margin-right:5px;
}

/* 	we add the animateInOut class after init, so the 
	sidenotes don't animate in from the side when the page is first loaded. */
.sidenote-box.animateInOut {
	transition: transform .3s ease-in-out
}

.sidenote-box.active {
	transform: translateX(0px) !important; 
}
.text-container {
	background:white;
	padding:15px;
}
.thesis {
	font-size:20px;
}
a.sidenote {
	color:#333;
}
a.sidenote.active {
	background-color:#cbdff1;
	color:#0a6898;
	transition: background-color 1s;
	text-decoration:none;
}

/* this is using bootstrap's breakpoint... */

@media (max-width: 767px) {
	.text-container, .sidenotes-display-area {
		width:50%;
		float:left;
	}
}