section { color: $midgray; font-weight: lighter; font-size: 16px; margin-top: 2*$pad-xl; margin-bottom: -2*$pad-xl + $pad-l; max-width: 960px; margin-right: auto; margin-left: auto; } .items { a.page { display: inline-block; margin: $pad-m; text-decoration: none; color: $midgray; font-size: 12px; float: right; } a.page:hover { text-decoration: underline; color: $purple; } a.page.empty:hover { color: $midgray; text-decoration: none; } } .item { padding: $pad-m $pad-xl; margin: 0px; border-bottom: 1px solid $midgray; box-sizing: border-box; width: 100%; .committee { color: $midgray; font-size: 12px; font-weight: bold; margin: 0px; } a { text-decoration: none; } .details-row { margin: $pad-m 0; font-size: 16px; font-weight: lighter; color: $text; padding: 0px; b { color: $darkgray; } em { color: $midgray; margin: 0 $pad-s; } } .status { color: $midgray; font-size: 12px; margin: 0px; } .cost { display: inline-block; text-align: center; width: 120px; height: 24px; font-size: 12px; color: $midgray; border-radius: $pad-s; border: 1px solid $midgray; box-sizing: border-box; padding: 2*$pad-s; margin: 2*$pad-s 0; } .approved { background-color: #ffd9d9; } .processed { background-color: #d9ffd9; } .rejected { background-color: $midgray; color: $lightgray; } .newItem { background-color: #fff7d9; } } @media (min-width: 800px) { .item .cost { float: right; } } .empty { margin: $pad-l; color: $midgray; font-weight: lighter; font-size: 16px; text-align: center; } $button-size: 24px; .btn-floating { position: fixed; bottom: $button-size; right: $button-size; padding: $button-size/2; color: $gold; background-color: $purple; text-decoration: none; font-weight: bold; z-index: 1000; border-radius: 50%; text-align: center; box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32); span { display: block; width: 36; height: 36; font-size: 28; } }