rblakejohnson

window.setTimeout(
  function() {
		
	},
	1000
);

rblakejohnson

<p>News:</p>
<article>
  <header>
    <h1 class="entry-title"><a href="/news/hey-look-it-s-news/">Sample News Story</a></h1>
    <h2 class="publish-info"><time class="pubdate" datetime="2010-08-31T10:00:00-05:00"><b>Published:</b> August 31, 2010</time></h2>
    <h3 class="author"><b>Author:</b> Erik Runyon</h3>
  </header>
</article>

<p>Events:</p>

rblakejohnson

.truncate {
  width: 250px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

rblakejohnson

.container {
  max-width: 1000px;
  margin: 1em auto;
}

rblakejohnson

.selector {
  /* positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 100px;
    padding: 10px;

rblakejohnson

.link-list a {
  display: block;
  padding: 5px 0;
  line-height: 1.4;
}

rblakejohnson

<div class="flyout">Box. Lorem ipsum dolor sit met, consect etur dip * isicing elit, sed do eus mod * temp or incididunt ut labore et dolore magna aliqua.</div>

rblakejohnson

.flyout {
  position: relative;
}
.flyout:before {
  content: '';
  display: block;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: red;
  position: absolute;

rblakejohnson

.lifted-box {
  position: relative;
  z-index: 1;
}
.lifted {
  display: block;
  position: relative;
}
.lifted:before,
.lifted:after {

rblakejohnson

.button-text {
  display: inline-block;
  padding: 4px 10px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}