jQuery.fancybox CSS

/*! Save this file as jQuery.fancybox.css and attach it your solution */
.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;
-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
       border-radius: 4px;
}

.fancybox-opened {
z-index: 8030;
}

.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
position: relative;
}

.fancybox-inner {
overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
-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;
}

#fancybox-loading 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;
}

.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}

.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}

.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}

.fancybox-nav:hover span {
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-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}

.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}

/* 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 .fancybox-title {
visibility: visible;
}

.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}

.fancybox-title-float-wrap .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);
-webkit-border-radius: 15px;
  -moz-border-radius: 15px;
       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);
}

Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image