@import "compass/css3"; @import "_constants.scss"; #content { font-family: $font-family-sans-serif; .bookmarklet { margin-bottom: 45px; h2 { font-size: 32px; font-weight: bold; line-height: 36px; text-align: center; margin-bottom: 3px; } p { color: #777; text-align: center; } .preview { position: relative; border: 1px solid #ccc; width: 974px; height: 460px; overflow: hidden; margin-top: 30px; @include border-radius(3px); @include box-shadow(0 2px 5px rgba(0,0,0,0.15) inset); .image_holder { position: relative; div { position: absolute; @include transition(left 0.2s ease-out); &.stage_left { left: -976px; } &.stage_right { left: 976px; } &.front_and_center { left: 0; } } } .info { position: absolute; background: rgba(0,0,0,0.85); padding: 20px; max-width: 470px; bottom: 50px; right: 0; h2 { margin-bottom: 5px; font-size: 24px; font-weight: bold; line-height: 24px; color: $white; text-align: left; } p { font-size: 13px; color: #bcbcbc; text-align: left; } a { font-size: 16px; font-weight: bold; color: $white; } } } ul { li { float: left; .just_the_tip { margin: 0 auto; border-color: transparent transparent transparent transparent; border-style: solid; border-width: 8px; width: 0; height: 0; @include transition(border-color 0.15s ease-out); } a { display: block; font-weight: bold; color: $black; text-align: center; border: 1px solid #ccc; padding: 15px 0; width: 188px; height: 93px; @include border-radius(3px); @include transition(border-color 0.15s ease-out, background 0.15s ease-out); &:hover { text-decoration: none; border: 1px solid #000; } .logo { display: block; background: transparent url(../images/affiliates_sprite.png) top left no-repeat; width: 180px; height: 50px; text-indent: -10000px; &.target { background-position: 0 0; } &.wag { background-position: 0 -126px; } &.diapers { background-position: 0 -256px; } &.amazon { background-position: 0 -367px; } &.j_crew { background-position: 0 -478px; } } } &.selected { .just_the_tip { border-color: transparent transparent $black transparent; } a { color: $white; background: $black; border: 1px solid $black; .logo { &.target { background-position: 0 -60px; } &.wag { background-position: 0 -186px; } &.diapers { background-position: 0 -307px; } &.amazon { background-position: 0 -416px; } &.j_crew { background-position: 0 -527px; } } } } } li + li { margin-left: 6px; } li.middle { margin-left: 7px; margin-right: 1px; } } } .sign_up_middle { border-top: 3px double #ccc; border-bottom: 3px double #ccc; padding: 20px 0; margin-bottom: 45px; text-align: center; h2 { font-size: 18px; font-weight: bold; margin-bottom: 5px; } p { font-size: 13px; color: #777; } a { display: inline-block; background: $black; margin-top: 10px; margin-bottom: 5px; padding: 7px 15px; font-size: 18px; font-weight: bold; color: #fff; text-align: center; @include border-radius(3px); &:hover { text-decoration: none; background: #222; } } } hr { margin-bottom: 50px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: none; border-left: none; height: 1px; } .features { ul { li { float: left; margin-bottom: 35px; width: 312px; dl { dt { font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 5px; &.image { position: relative; background: #f4f4f4; margin-bottom: 20px; width: 312px; height: 240px; @include border-radius(3px); img { border: 1px solid #ccc; @include border-radius(3px); } .coming_soon { position: absolute; background: transparent url(../images/coming_soon_sash.png) top left no-repeat; z-index: 1; text-indent: -3000px; top: -1px; left: -1px; width: 126px; height: 126px; } } } dd { font-size: 13px; color: #777; text-align: center; } } } li + li { margin-left: 20px; } li:nth-child(4n) { margin-left: 0; } } } }