emarschner/main.css

## index.html
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/md.js"></script>
    <meta charset="utf-8"/>
  </head>

  <body>
    <div id="scrollbar">
      <div id="slider"></div>
    </div>
    <div id="article">
      <h2>
        <a href="http://www.nytimes.com/2011/12/11/us/police-evict-protesters-from-occupy-boston-site.html?ref=occupywallstreet">Evict Protesters From Occupy Boston Site</a>
      </h2>
      <h3>http://www.nytimes.com/2011/12/11/us/police-evict-protesters-from-occupy-boston-site.html?ref=occupywallstreet</h3>

      <p class="byline">
        By JESS BIDGOOD<br />
        Published: December 10, 2011
      </p>

      <a id="back_arrow" onclick="expandBack()" href="#">&uarr;</a>
      <div style="clear:both;">
        <div class="pastInfo" class="pastInfo"><p>The sweep was not a surprise. On Thursday, a Boston judge lifted a temporary restraining order that had barred the police from evicting the group.</p></div>

        <div id="previousInfo" class="pastInfo"><p>By Friday, protesters had received eviction notices warning them that they risked arrest if they did not vacate Dewey Square by midnight, and many began clearing tents and valuables from the camp. But that night, a crowd of more than 1,000 gathered in and around the square. “The mayor and I decided it was good to hold off 24 hours after the deadline,” Commissioner Davis said.</p></div>

        <div class="startInfo">
          <p>BOSTON — The police swept into Occupy Boston’s campsite early Saturday morning, bringing one of the country’s largest continuous demonstrations inspired by New York City’s Occupy Wall Street protest to an end.</p>
        </div>

        <div id="nextInfo" class="moreInfo">
          <p>Boston police said 46 people had been arrested during what the city’s police commissioner, Edward Davis, said was “by and large” a peaceful eviction.</p>
          <img src="images/arrest.jpg" />
          <p>Police officers arrived shortly before 5 a.m., dragging tents out of the camp and warning the roughly 75 protesters who had stayed the night there that they would be arrested if they did not leave.</p>
        </div>

        <div class="moreInfo">
          <p>“The first thing I heard was the sound of a knife ripping through a tent,” said Mike Hipson, a demonstrator who stayed through the night. A group linked arms and awaited arrest as police officers backed vans into the camp.</p>

          <p>By 8 a.m. Saturday, the city’s cleanup of Dewey Square was in full force, with workers using leaf blowers and moving garbage into dump trucks. Others had begun power-washing posters off of the building they had adorned in the square.</p>

          <p>Some protesters noted that they could not read police badges, and some members of the media said they were kept at a distance as arrests were being made.</p>
        </div>

        <div class="moreInfo">
          <p>Across the street, a couple of dozen protestors chalked messages, like “Occupy Boston Lives,” on the pavement outside of South Station, using supplies from the group’s “mobile sign unit.” The supplies, one housed in a sign-making tent, were now inside a child’s wooden wagon.</p>

          <p>One of the protesters, Steve O’Brien, a homeless 18-year-old, said he did not know where he would go now.</p>

          <p>“I’m hoping it will be reinstated, that we go back in and set it up again,” Mr. O’Brien said. He said he had wanted to be arrested, but that the police told him he was too young.</p>

          <p>The group scheduled a general assembly for Saturday night on the Boston Common to discuss its next move.</p>

          <p>“We have a lot of options,” said Robin Jacks, 31, who, along with one other, helped begin the Boston occupation. Ms. Jacks has expressed interest in transitioning, as other groups around the country have done, from a public occupation to action like occupying foreclosed homes.</p>

          <p>“This is not over. There’s no way that we’re going to dispense and not be us anymore.”</p>

          <p>At a news conference on Saturday, Mayor Thomas M. Menino said safety was the primary motivator behind the eviction, praising the police for acting with “patience and respect.” Mr. Menino had words of gratitude for the protestors, too.</p>

          <p>“They shined a much needed light, still needed, on growing economic inequality in this country. In the end, they also acted with restraint, I thank them for that,” Mr. Menino said.</p>

          <p>But he said the city would immediately move to evict protesters from any new campsites.</p>
        </div>
      </div>
      <a id="forward_arrow" onclick="expandForward()" href="#">&darr;</a>
    </div>
    <div id="excerpts">
      <div class="contents">
        <h1>Important Excerpts</h1>
        <p><span class="quote">&ldquo;</span>By Friday, protesters had received eviction notices warning them that they risked arrest if they did not vacate Dewey Square by midnight, and many began clearing tents and valuables from the camp. But that night, a crowd of more than 1,000 gathered in and around the square. “The mayor and I decided it was good to hold off 24 hours after the deadline,” Commissioner Davis said.</p>
        <p><span class="quote">&ldquo;</span>At a news conference on Saturday, Mayor Thomas M. Menino said safety was the primary motivator behind the eviction, praising the police for acting with “patience and respect.” Mr. Menino had words of gratitude for the protestors, too.</p>
      </div>
    </div>
  </body>
</html>

## main.css
body, h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
  font-weight: 200;
  letter-spacing: .2ex;
}

h1, h2 {
  margin-top: 3ex;
}

h2 {
  font-weight: 400;
  letter-spacing: .1ex;
  font-variant: small-caps;
}

h3 {
  font-size: 1.5ex;
  font-weight: 100;
}

a {
  color: #39f;
  text-decoration: none;
}

a:hover {
  color: black;
}

p.byline {
  font-weight: 500;
  letter-spacing: .1ex;
  font-size: 1.5ex;
}

img {
  float: left;
  margin-right: 2ex;
  border: 1px solid #aaa;
  background: #f0f0f0;
  padding: 1ex;
}

#scrollbar {
  position: fixed;
  height: auto;
  width: 40px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#slider {
  position: absolute;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 40px;
}

.ui-slider-handle {
  outline: none;
}

#mdp {
  color: ff8c00;
}


#article {
  width: 50%;
  padding: 20px;
  margin-left: 100px;
  margin-right: 100px;
  margin: 0 100px 20ex;
  float: left;
}

#excerpts {
  width: 25%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  padding-top: 2ex;
  padding-right: 10%;
}

#excerpts h1 {
  font-family: Monotype Corsiva;
}

#excerpts p {
  padding: 2ex 2ex 2ex 7ex;
  position: relative;
  font-weight: 100;
  letter-spacing: .25ex;
}

#excerpts p span.quote {
  font-family: Monotype Corsiva;
  position: absolute;
  top: .25ex;
  left: 0;
  font-size: 10ex;
}

#excerpts p:hover {
  background: rgba(51, 153, 255, .25);
  cursor: pointer;
}

.startInfo {
  display: block;
}

.moreInfo, .pastInfo {
  display: none;
}

.pastInfo, .moreInfo, .startInfo {
  border: 1px solid #ddd;
  border-width: 0 1ex 0 0;
  padding-right: 2ex;
  text-align: justify;
}

.pastInfo:hover, .moreInfo:hover, .startInfo:hover {
  border-color: rgba(51, 153, 255, .5);
}

#back_arrow, #forward_arrow {
  text-decoration: none;
  color: #39f;
  font-size: 2.5ex;
  font-weight: 900;
  float: left;
  clear: both;
}

#back_arrow {
  margin-bottom: 2ex;
}

#back_arrow:hover, #forward_arrow:hover {
  color: black;
}

.ui-slider {
  border-radius: 0;
  border-color: #ddd;
  border-style solid;
  border-width: 0 2px 0 0;
  background: none;
}

.ui-slider-vertical .ui-slider-range {
  border: 0;
  background: black;
  margin-left: 2ex;
  width: 1ex;
}

#slider .ui-slider-handle {
  border-radius: .75ex;
  border: none;
  background: black;;
  margin-left: 1.4ex;
  margin-bottom: -.75ex;
  width: 1.5ex;
  height: 1.5ex;
}

#slider .ui-slider-handle:active, #slider .ui-state-active {
  background: #39f;
}

## md.js
function count() {
  return $('.pastInfo, .moreInfo, .startInfo').size();
}

function first() {
  return $('.pastInfo:visible, .moreInfo:visible, .startInfo').first();
}

function firstPos() {
  return count() - $('.pastInfo, .moreInfo, .startInfo').index(first());
}

function last() {
  return $('.pastInfo:visible, .moreInfo:visible, .startInfo').last();
}

function lastPos() {
  return count() - $('.pastInfo, .moreInfo, .startInfo').index(last());
}

function expandBack() {
  var values = $('#slider').slider('option', 'values');
  values[1]++;
  $('#slider').slider('option', 'values', values);
  expansionHandler(values);
  return false;
}

function expandForward() {
  var values = $('#slider').slider('option', 'values');
  values[0]--;
  $('#slider').slider('option', 'values', values);
  expansionHandler(values);
  return false;
}

function expansionHandler(values) {
  var infos = $('.pastInfo, .moreInfo, .startInfo');
  var startIndex = count() - values[1];
  var endIndex = count() - values[0]

  // Text blocks visibility...
  for (var i = 0; i < startIndex; i++)
    $(infos[i]).hide();
  for (var i = startIndex; i <= endIndex; i++)
    $(infos[i]).show();
  for (var i = endIndex + 1; i < count(); i++)
    $(infos[i]).hide();

  // Forward/back arrows visibility...
  if (startIndex == 0)
    $('#back_arrow').hide();
  else
    $('#back_arrow').show();
  if (endIndex >= count())
    $('#forward_arrow').hide();
  else
    $('#forward_arrow').show();

  // (re-)Set IDs
  $('#previousInfo, #nextInfo').each(function(index, e) { e.setAttribute('id', ''); });
  if (startIndex > 0)
    first().prev('.pastInfo, .moreInfo, .startInfo').attr('id', 'previousInfo');
  if (endIndex < count())
    last().next('.pastInfo, .moreInfo, .startInfo').attr('id', 'nextInfo');
}

$(function() {
  $("#slider").slider({
    orientation: "vertical",
    range: true,
    max: count(),
    values: [
      firstPos(),
      lastPos()
    ],
    slide: function(event, ui) {
      expansionHandler(ui.values);
    }
  });
});
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/jquery.js"></script>
	<script src="js/jquery-ui.js"></script>
	<script src="js/md.js"></script>
	<meta charset="utf-8"/>
	</head>

	<body>
	<div id="scrollbar">
	<div id="slider"></div>
	</div>
	<div id="article">
	<h2>
	<a href="http://www.nytimes.com/2011/12/11/us/police-evict-protesters-from-occupy-boston-site.html?ref=occupywallstreet">Evict Protesters From Occupy Boston Site</a>
	</h2>
	<h3>http://www.nytimes.com/2011/12/11/us/police-evict-protesters-from-occupy-boston-site.html?ref=occupywallstreet</h3>

	<p class="byline">
	By JESS BIDGOOD<br />
	Published: December 10, 2011
	</p>

	<a id="back_arrow" onclick="expandBack()" href="#">↑</a>
	<div style="clear:both;">
	<div class="pastInfo" class="pastInfo"><p>The sweep was not a surprise. On Thursday, a Boston judge lifted a temporary restraining order that had barred the police from evicting the group.</p></div>

	<div id="previousInfo" class="pastInfo"><p>By Friday, protesters had received eviction notices warning them that they risked arrest if they did not vacate Dewey Square by midnight, and many began clearing tents and valuables from the camp. But that night, a crowd of more than 1,000 gathered in and around the square. “The mayor and I decided it was good to hold off 24 hours after the deadline,” Commissioner Davis said.</p></div>

	<div class="startInfo">
	<p>BOSTON — The police swept into Occupy Boston’s campsite early Saturday morning, bringing one of the country’s largest continuous demonstrations inspired by New York City’s Occupy Wall Street protest to an end.</p>
	</div>

	<div id="nextInfo" class="moreInfo">
	<p>Boston police said 46 people had been arrested during what the city’s police commissioner, Edward Davis, said was “by and large” a peaceful eviction.</p>
	<img src="images/arrest.jpg" />
	<p>Police officers arrived shortly before 5 a.m., dragging tents out of the camp and warning the roughly 75 protesters who had stayed the night there that they would be arrested if they did not leave.</p>
	</div>

	<div class="moreInfo">
	<p>“The first thing I heard was the sound of a knife ripping through a tent,” said Mike Hipson, a demonstrator who stayed through the night. A group linked arms and awaited arrest as police officers backed vans into the camp.</p>

	<p>By 8 a.m. Saturday, the city’s cleanup of Dewey Square was in full force, with workers using leaf blowers and moving garbage into dump trucks. Others had begun power-washing posters off of the building they had adorned in the square.</p>

	<p>Some protesters noted that they could not read police badges, and some members of the media said they were kept at a distance as arrests were being made.</p>
	</div>

	<div class="moreInfo">
	<p>Across the street, a couple of dozen protestors chalked messages, like “Occupy Boston Lives,” on the pavement outside of South Station, using supplies from the group’s “mobile sign unit.” The supplies, one housed in a sign-making tent, were now inside a child’s wooden wagon.</p>

	<p>One of the protesters, Steve O’Brien, a homeless 18-year-old, said he did not know where he would go now.</p>

	<p>“I’m hoping it will be reinstated, that we go back in and set it up again,” Mr. O’Brien said. He said he had wanted to be arrested, but that the police told him he was too young.</p>

	<p>The group scheduled a general assembly for Saturday night on the Boston Common to discuss its next move.</p>

	<p>“We have a lot of options,” said Robin Jacks, 31, who, along with one other, helped begin the Boston occupation. Ms. Jacks has expressed interest in transitioning, as other groups around the country have done, from a public occupation to action like occupying foreclosed homes.</p>

	<p>“This is not over. There’s no way that we’re going to dispense and not be us anymore.”</p>

	<p>At a news conference on Saturday, Mayor Thomas M. Menino said safety was the primary motivator behind the eviction, praising the police for acting with “patience and respect.” Mr. Menino had words of gratitude for the protestors, too.</p>

	<p>“They shined a much needed light, still needed, on growing economic inequality in this country. In the end, they also acted with restraint, I thank them for that,” Mr. Menino said.</p>

	<p>But he said the city would immediately move to evict protesters from any new campsites.</p>
	</div>
	</div>
	<a id="forward_arrow" onclick="expandForward()" href="#">↓</a>
	</div>
	<div id="excerpts">
	<div class="contents">
	<h1>Important Excerpts</h1>
	<p><span class="quote">“</span>By Friday, protesters had received eviction notices warning them that they risked arrest if they did not vacate Dewey Square by midnight, and many began clearing tents and valuables from the camp. But that night, a crowd of more than 1,000 gathered in and around the square. “The mayor and I decided it was good to hold off 24 hours after the deadline,” Commissioner Davis said.</p>
	<p><span class="quote">“</span>At a news conference on Saturday, Mayor Thomas M. Menino said safety was the primary motivator behind the eviction, praising the police for acting with “patience and respect.” Mr. Menino had words of gratitude for the protestors, too.</p>
	</div>
	</div>
	</body>
	</html>
	body, h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-family: Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
	font-weight: 200;
	letter-spacing: .2ex;
	}

	h1, h2 {
	margin-top: 3ex;
	}

	h2 {
	font-weight: 400;
	letter-spacing: .1ex;
	font-variant: small-caps;
	}

	h3 {
	font-size: 1.5ex;
	font-weight: 100;
	}

	a {
	color: #39f;
	text-decoration: none;
	}

	a:hover {
	color: black;
	}

	p.byline {
	font-weight: 500;
	letter-spacing: .1ex;
	font-size: 1.5ex;
	}

	img {
	float: left;
	margin-right: 2ex;
	border: 1px solid #aaa;
	background: #f0f0f0;
	padding: 1ex;
	}

	#scrollbar {
	position: fixed;
	height: auto;
	width: 40px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

	#slider {
	position: absolute;
	height: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 40px;
	}

	.ui-slider-handle {
	outline: none;
	}

	#mdp {
	color: ff8c00;
	}


	#article {
	width: 50%;
	padding: 20px;
	margin-left: 100px;
	margin-right: 100px;
	margin: 0 100px 20ex;
	float: left;
	}

	#excerpts {
	width: 25%;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	padding-top: 2ex;
	padding-right: 10%;
	}

	#excerpts h1 {
	font-family: Monotype Corsiva;
	}

	#excerpts p {
	padding: 2ex 2ex 2ex 7ex;
	position: relative;
	font-weight: 100;
	letter-spacing: .25ex;
	}

	#excerpts p span.quote {
	font-family: Monotype Corsiva;
	position: absolute;
	top: .25ex;
	left: 0;
	font-size: 10ex;
	}

	#excerpts p:hover {
	background: rgba(51, 153, 255, .25);
	cursor: pointer;
	}

	.startInfo {
	display: block;
	}

	.moreInfo, .pastInfo {
	display: none;
	}

	.pastInfo, .moreInfo, .startInfo {
	border: 1px solid #ddd;
	border-width: 0 1ex 0 0;
	padding-right: 2ex;
	text-align: justify;
	}

	.pastInfo:hover, .moreInfo:hover, .startInfo:hover {
	border-color: rgba(51, 153, 255, .5);
	}

	#back_arrow, #forward_arrow {
	text-decoration: none;
	color: #39f;
	font-size: 2.5ex;
	font-weight: 900;
	float: left;
	clear: both;
	}

	#back_arrow {
	margin-bottom: 2ex;
	}

	#back_arrow:hover, #forward_arrow:hover {
	color: black;
	}

	.ui-slider {
	border-radius: 0;
	border-color: #ddd;
	border-style solid;
	border-width: 0 2px 0 0;
	background: none;
	}

	.ui-slider-vertical .ui-slider-range {
	border: 0;
	background: black;
	margin-left: 2ex;
	width: 1ex;
	}

	#slider .ui-slider-handle {
	border-radius: .75ex;
	border: none;
	background: black;;
	margin-left: 1.4ex;
	margin-bottom: -.75ex;
	width: 1.5ex;
	height: 1.5ex;
	}

	#slider .ui-slider-handle:active, #slider .ui-state-active {
	background: #39f;
	}
	function count() {
	return $('.pastInfo, .moreInfo, .startInfo').size();
	}

	function first() {
	return $('.pastInfo:visible, .moreInfo:visible, .startInfo').first();
	}

	function firstPos() {
	return count() - $('.pastInfo, .moreInfo, .startInfo').index(first());
	}

	function last() {
	return $('.pastInfo:visible, .moreInfo:visible, .startInfo').last();
	}

	function lastPos() {
	return count() - $('.pastInfo, .moreInfo, .startInfo').index(last());
	}

	function expandBack() {
	var values = $('#slider').slider('option', 'values');
	values[1]++;
	$('#slider').slider('option', 'values', values);
	expansionHandler(values);
	return false;
	}

	function expandForward() {
	var values = $('#slider').slider('option', 'values');
	values[0]--;
	$('#slider').slider('option', 'values', values);
	expansionHandler(values);
	return false;
	}

	function expansionHandler(values) {
	var infos = $('.pastInfo, .moreInfo, .startInfo');
	var startIndex = count() - values[1];
	var endIndex = count() - values[0]

	// Text blocks visibility...
	for (var i = 0; i < startIndex; i++)
	$(infos[i]).hide();
	for (var i = startIndex; i <= endIndex; i++)
	$(infos[i]).show();
	for (var i = endIndex + 1; i < count(); i++)
	$(infos[i]).hide();

	// Forward/back arrows visibility...
	if (startIndex == 0)
	$('#back_arrow').hide();
	else
	$('#back_arrow').show();
	if (endIndex >= count())
	$('#forward_arrow').hide();
	else
	$('#forward_arrow').show();

	// (re-)Set IDs
	$('#previousInfo, #nextInfo').each(function(index, e) { e.setAttribute('id', ''); });
	if (startIndex > 0)
	first().prev('.pastInfo, .moreInfo, .startInfo').attr('id', 'previousInfo');
	if (endIndex < count())
	last().next('.pastInfo, .moreInfo, .startInfo').attr('id', 'nextInfo');
	}

	$(function() {
	$("#slider").slider({
	orientation: "vertical",
	range: true,
	max: count(),
	values: [
	firstPos(),
	lastPos()
	],
	slide: function(event, ui) {
	expansionHandler(ui.values);
	}
	});
	});