Fancybox styles Sass-ified
/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
padding: 0
margin: 0
border: 0
outline: none
vertical-align: top
.fancybox-wrap
position: absolute
top: 0
left: 0
z-index: 8020
.fancybox-skin
position: relative
background: #f9f9f9
color: #444
text-shadow: none
+border-radius(4px)
.fancybox-opened
z-index: 8030
.fancybox-skin
+box-shadow(0 10px 25px rgba(0, 0, 0, 0.5))
.fancybox-outer, .fancybox-inner
position: relative
.fancybox-inner
overflow: hidden
.fancybox-type-iframe &
-webkit-overflow-scrolling: touch
.fancybox-error
color: #444
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif
margin: 0
padding: 15px
white-space: nowrap
.fancybox-image, .fancybox-iframe
display: block
width: 100%
height: 100%
.fancybox-image
max-width: 100%
max-height: 100%
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span
background-image: url('fancybox_sprite.png')
#fancybox-loading
position: fixed
top: 50%
left: 50%
margin-top: -22px
margin-left: -22px
background-position: 0 -108px
opacity: 0.8
cursor: pointer
z-index: 8060
div
width: 44px
height: 44px
background: url('fancybox_loading.gif') center center no-repeat
.fancybox-close
position: absolute
top: -18px
right: -18px
width: 36px
height: 36px
cursor: pointer
z-index: 8040
.fancybox-nav
position: absolute
top: 0
width: 40%
height: 100%
cursor: pointer
text-decoration: none
background: transparent url('blank.gif') /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0)
z-index: 8040
.fancybox-prev
left: 0
.fancybox-next
right: 0
span
.fancybox-nav &
position: absolute
top: 50%
width: 36px
height: 34px
margin-top: -18px
cursor: pointer
z-index: 8040
visibility: hidden
.fancybox-prev &
left: 10px
background-position: 0 -36px
.fancybox-next &
right: 10px
background-position: 0 -72px
.fancybox-nav:hover &
visibility: visible
.fancybox-tmp
position: absolute
top: -99999px
left: -99999px
visibility: hidden
max-width: 99999px
max-height: 99999px
overflow: visible !important
/* Overlay helper */
.fancybox-lock
overflow: hidden
.fancybox-overlay
position: absolute
top: 0
left: 0
overflow: hidden
display: none
z-index: 8010
background: url('fancybox_overlay.png')
.fancybox-lock &
overflow: auto
overflow-y: scroll
.fancybox-overlay-fixed
position: fixed
bottom: 0
right: 0
/* Title helper */
.fancybox-title
visibility: hidden
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif
position: relative
text-shadow: none
z-index: 8050
.fancybox-opened &
visibility: visible
.fancybox-title-float-wrap
position: absolute
bottom: 0
right: 50%
margin-bottom: -35px
z-index: 8050
text-align: center
.child
display: inline-block
margin-right: -100%
padding: 2px 20px
background: transparent /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8)
+border-radius(15px)
text-shadow: 0 1px 2px #222
color: #FFF
font-weight: bold
line-height: 24px
white-space: nowrap
.fancybox-title-outside-wrap
position: relative
margin-top: 10px
color: #fff
.fancybox-title-inside-wrap
padding-top: 10px
.fancybox-title-over-wrap
position: absolute
bottom: 0
left: 0
color: #fff
padding: 10px
background: #000
background: rgba(0, 0, 0, .8)