.container.jobs { padding: 60px 30px 120px; q { display: block; margin: 10px 0; font-style: italic; text-align: justify; } small.author { text-align: right; display: block; color: rgb(100, 100, 100); } h1 + hr { margin-bottom: 80px; } .message { @include clearfix; margin-bottom: 80px; position: relative; .photo { background: rgb(255,255,255); border: 1px solid rgb(210,210,210); float: left; margin-right: flex-gutter(); padding: 1px; width: flex-grid(4); img { background: rgb(245,245,245); display: block; max-width: 100%; } } header { float: left; width: flex-grid(7); blockquote { margin-left: 0; margin-bottom: 40px; &:last-child { margin-bottom: 0; } p { margin-left: 0; font-style: italic; line-height: 1.6; font-size: 1.1em; color: #666; } cite { margin-top: 12px; display: block; color: #a0a0a0; font-weight: 300; } } } } .jobs-wrapper { @include clearfix; float: left; padding-top: 80px; width: flex-grid(12); > h2 { display: none; margin-bottom: 60px; padding-bottom: 20px; } .jobs-sidebar { @include box-sizing(border-box); border: 1px solid rgb(220,220,220); float: left; padding: 20px; width: flex-grid(3); nav { margin-bottom: 40px; a { display: block; letter-spacing: 1px; margin: 0px -20px; padding: 12px 0px 12px 20px; text-align: left; &:hover { background: rgb(245,245,245); text-decoration: none; } } } p + h2 { margin-top: 40px; } } .jobs-listing { float: left; margin-right: flex-gutter(); width: flex-grid(9); .job { border-bottom: 1px solid rgb(220,220,220); padding: 40px 0px; &:first-child { padding-top: 0px; } &:last-child { border: none; padding-bottom: 0px; } .inner-wrapper { } h3 { font-family: $sans-serif; font-weight: 700; margin-bottom: 15px; } } } } }