footer { background: transparent; border-top: 1px solid rgb(200,200,200); @include box-shadow(inset 0 1px 3px 0 rgba(0,0,0, 0.1)); margin: 0 auto; width: flex-grid(12); &.fixed-bottom { bottom: 0px; max-width: 100%; position: absolute; } nav { max-width: 1200px; margin: 0 auto; padding: 30px 10px 0; max-width: grid-width(12); min-width: 760px; .top { border-bottom: 1px solid rgb(200,200,200); @include clearfix; padding-bottom: 30px; width: flex-grid(12); text-align: center; ol { float: right; li { @include inline-block; list-style: none; padding: 0px 15px; position: relative; vertical-align: middle; &::after { @extend .faded-vertical-divider; content: ""; display: block; height: 30px; right: 0px; position: absolute; top: -5px; width: 1px; } a:link, a:visited { color: $lighter-base-font-color; letter-spacing: 1px; padding: 6px 0px; } } } .primary { @include clearfix; float: left; a.logo { @include background-image(url('/static/images/logo.png')); background-position: 0 -24px; background-repeat: no-repeat; @include inline-block; height: 22px; margin-right: 15px; margin-top: 2px; padding-right: 15px; position: relative; width: 47px; vertical-align: middle; &:hover { background-position: 0 0; } &::after { @extend .faded-vertical-divider; content: ""; display: block; height: 30px; right: 0px; position: absolute; top: -3px; width: 1px; } } a { color: $lighter-base-font-color; @include inline-block; letter-spacing: 1px; margin-right: 20px; padding-top: 2px; vertical-align: middle; &:hover { color: $base-font-color; text-decoration: none; } } } .social { float: right; &.social { border: none; margin: 0 0 0 5px; padding: 0; a { opacity: 0.3; @include transition(all, 0.1s, linear); &:hover { opacity: 1; } } } } } .bottom { @include clearfix; opacity: 0.8; padding: 10px 0px 30px; @include transition(all, 0.15s, linear); width: flex-grid(12); &:hover { opacity: 1; } .copyright { float: left; p { color: $lighter-base-font-color; font-style: italic; @include inline-block; margin: 0 auto; padding-top: 1px; text-align: center; vertical-align: middle; a { color: $lighter-base-font-color; font-style: italic; margin-left: 5px; &:hover { color: $blue; } } } } .secondary { float: right; text-align: left; a { color: $lighter-base-font-color; font-family: $serif; font-style: italic; letter-spacing: 1px; line-height: 1.6em; margin-left: 20px; text-transform: lowercase; &:hover { color: $blue; } } } } } }