body { padding-top: 20px; padding-bottom: 40px; }

/* Basic layout for the overview section at the top of the page */
.hero-unit { padding:30px 60px 30px 60px; margin-bottom:0; position: relative; } /* default = 60px */
.hero-unit iframe { position: absolute; right: 40px; }

/* Used to fix navbar in place as we scoll */
.scroll-fix div ul {
    padding-left:60px; background-color: #eee; z-index:100; }
.scroll-fix-fixed div { position:fixed; top:0; }

/* Effect to allow expansion of hidden sentences in text */
a.expand:hover { text-decoration:none; }
a.expand span { display:none; }
a.expand { color:#370; }
a.expand.active { background-color:#ddd; }
a.expand.active span { color:#005580; color:#E8BE34; color:#730;}

/* Need to make the following responsive
 *   => .well { padding:19px; border: 1px solid; } (40 extra pixels)
 *   => some table columns shouldn't wrap on larger displays, shouldn't show on smaller displays
 *   => inline lists look horrible at small screen widths
 */
@media (max-width: 480px) {}
@media (max-width: 768px) {
    .hero-unit { padding:10px; }
    .nowrap { display:none; }
    .scroll-fix { display:none; }
    div[class~=well][class~=span4] { margin-bottom:20px; } /* was 228px */ }
@media (min-width: 768px) {
    .nowrap { white-space:nowrap; }
    ul.inline { display:inline; }
    ul.inline li { display:inline; }
    ul.inline li:after { content:" |"; }
    ul.inline li:last-child:after { content:"."; }
    ul.hero li span { display:inline-block; width:3em; } /* Align all sublists */ }
@media (min-width: 768px) and (max-width: 980px) {
    div[class~=well][class~=span4] { width:188px; } /* was 228px */ }
@media (min-width: 980px) {
    div[class~=well][class~=span4] { width:260px; } /* was 300px */ }
@media (min-width: 1200px) {
    div[class~=well][class~=span4] { width:330px; } /* was 370px */ }