Template:HarvardFancybox

From 2010.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>
<head>
<style>
<style>
-
html, body {
+
#fancybox-loading {
 +
position: fixed;
 +
top: 50%;
 +
left: 50%;
 +
height: 40px;
 +
width: 40px;
 +
margin-top: -20px;
 +
margin-left: -20px;
 +
cursor: pointer;
 +
overflow: hidden;
 +
z-index: 1104;
 +
display: none;
 +
}
 +
 
 +
* html #fancybox-loading { /* IE6 */
 +
position: absolute;
 +
margin-top: 0;
 +
}
 +
 
 +
#fancybox-loading div {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 40px;
 +
height: 480px;
 +
background-image: url('fancybox.png');
 +
}
 +
 
 +
#fancybox-overlay {
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
right: 0;
 +
background: #000;
 +
z-index: 1100;
 +
display: none;
 +
}
 +
 
 +
* html #fancybox-overlay { /* IE6 */
 +
position: absolute;
 +
width: 100%;
 +
}
 +
 
 +
#fancybox-tmp {
 +
padding: 0;
margin: 0;
margin: 0;
-
padding: 0;
+
border: 0;
 +
overflow: auto;
 +
display: none;
}
}
-
body {
+
#fancybox-wrap {
-
background: #F2F2F2;
+
position: absolute;
-
font-family: Arial;
+
top: 0;
-
font-size: 13px;
+
left: 0;
-
line-height: 1.6;
+
margin: 0;
-
color: #444;
+
padding: 20px;
 +
z-index: 1101;
 +
display: none;
}
}
-
#content {
+
#fancybox-outer {
-
width: 350px;
+
position: relative;
-
margin: 30px auto;
+
width: 100%;
-
padding: 20px 60px;
+
height: 100%;
-
border: 1px solid #D2D2D2;
+
-
-moz-box-shadow: 0 0 30px #CCC;
+
-
-webkit-box-shadow: 0 0 30px #CCC;
+
-
box-shadow: 0 0 30px #CCC;
+
background: #FFF;
background: #FFF;
-
background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
 
-
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 15px);
 
}
}
-
h1 {
+
#fancybox-inner {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 1px;
 +
height: 1px;
 +
padding: 0;
margin: 0;
margin: 0;
-
font-size: 30px;
+
outline: none;
-
font-weight: normal;
+
overflow: hidden;
-
font-family: "Museo 700", Arial;
+
}
}
-
h1 em {
+
#fancybox-hide-sel-frame {
-
font-size: 50%;
+
position: absolute;
-
letter-spacing: -0.05em;
+
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
background: transparent;
}
}
-
h2 {
+
#fancybox-close {
 +
position: absolute;
 +
top: -15px;
 +
right: -15px;
 +
width: 30px;
 +
height: 30px;
 +
background-image: url('fancybox.png');
 +
background-position: -40px 0px;
 +
cursor: pointer;
 +
z-index: 1103;
 +
display: none;
 +
}
 +
 
 +
#fancybox_error {
 +
color: #444;
 +
font: normal 12px/20px Arial;
 +
padding: 7px;
margin: 0;
margin: 0;
}
}
-
hr {
+
#fancybox-content {
-
border: none;
+
height: auto;
-
height: 1px; line-height: 1px;
+
width: auto;
-
background: #D8D8D8;
+
-
margin-bottom: 20px;
+
padding: 0;
padding: 0;
 +
margin: 0;
}
}
-
p {
+
#fancybox-img {
 +
width: 100%;
 +
height: 100%;
 +
padding: 0;
margin: 0;
margin: 0;
-
padding-bottom: 14px;
+
border: none;
 +
outline: none;
 +
line-height: 0;
 +
vertical-align: top;
 +
-ms-interpolation-mode: bicubic;
}
}
-
a {
+
#fancybox-frame {
-
outline: none;
+
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
border: none;
 +
display: block;
}
}
-
a img {
+
#fancybox-title {
-
border: 1px solid #BBB;
+
position: absolute;
-
padding: 2px;
+
bottom: 0;
-
margin: 10px 30px 10px 0;
+
left: 0;
-
vertical-align: top;
+
font-family: Arial;
 +
font-size: 12px;
 +
z-index: 1102;
}
}
-
ul {
+
.fancybox-title-inside {
-
margin: -7px 0 24px 0;
+
padding: 10px 0;
 +
text-align: center;
 +
color: #333;
 +
}
 +
 
 +
.fancybox-title-outside {
 +
padding-top: 5px;
 +
color: #FFF;
 +
text-align: center;
 +
font-weight: bold;
 +
}
 +
 
 +
.fancybox-title-over {
 +
color: #FFF;
 +
text-align: left;
 +
}
 +
 
 +
#fancybox-title-over {
 +
padding: 10px;
 +
background-image: url('fancy_title_over.png');
 +
display: block;
 +
}
 +
 
 +
#fancybox-title-wrap {
 +
display: inline-block;
 +
}
 +
 
 +
#fancybox-title-wrap span {
 +
height: 32px;
 +
float: left;
 +
}
 +
 
 +
#fancybox-title-left {
 +
padding-left: 15px;
 +
background-image: url('fancybox.png');
 +
background-position: -40px -90px;
 +
background-repeat: no-repeat;
 +
}
 +
 
 +
#fancybox-title-main {
 +
font-weight: bold;
 +
line-height: 29px;
 +
background-image: url('fancybox-x.png');
 +
background-position: 0px -40px;
 +
color: #FFF;
 +
}
 +
 
 +
#fancybox-title-right {
 +
padding-left: 15px;
 +
background-image: url('fancybox.png');
 +
background-position: -55px -90px;
 +
background-repeat: no-repeat;
 +
}
 +
 
 +
#fancybox-left, #fancybox-right {
 +
position: absolute;
 +
bottom: 0px;
 +
height: 100%;
 +
width: 35%;
 +
cursor: pointer;
 +
outline: none;
 +
background-image: url('blank.gif');
 +
z-index: 1102;
 +
display: none;
 +
}
 +
 
 +
#fancybox-left {
 +
left: 0px;
 +
}
 +
 
 +
#fancybox-right {
 +
right: 0px;
 +
}
 +
 
 +
#fancybox-left-ico, #fancybox-right-ico {
 +
position: absolute;
 +
top: 50%;
 +
left: -9999px;
 +
width: 30px;
 +
height: 30px;
 +
margin-top: -15px;
 +
cursor: pointer;
 +
z-index: 1102;
 +
display: block;
 +
}
 +
 
 +
#fancybox-left-ico {
 +
background-image: url('fancybox.png');
 +
background-position: -40px -30px;
 +
}
 +
 
 +
#fancybox-right-ico {
 +
background-image: url('fancybox.png');
 +
background-position: -40px -60px;
 +
}
 +
 
 +
#fancybox-left:hover, #fancybox-right:hover {
 +
visibility: visible;    /* IE6 */
 +
}
 +
 
 +
#fancybox-left:hover span {
 +
left: 20px;
 +
}
 +
 
 +
#fancybox-right:hover span {
 +
left: auto;
 +
right: 20px;
 +
}
 +
 
 +
.fancy-bg {
 +
position: absolute;
 +
padding: 0;
 +
margin: 0;
 +
border: 0;
 +
width: 20px;
 +
height: 20px;
 +
z-index: 1001;
 +
}
 +
 
 +
#fancy-bg-n {
 +
top: -20px;
 +
left: 0;
 +
width: 100%;
 +
background-image: url('fancybox-x.png');
 +
}
 +
 
 +
#fancy-bg-ne {
 +
top: -20px;
 +
right: -20px;
 +
background-image: url('fancybox.png');
 +
background-position: -40px -162px;
 +
}
 +
 
 +
#fancy-bg-e {
 +
top: 0;
 +
right: -20px;
 +
height: 100%;
 +
background-image: url('fancybox-y.png');
 +
background-position: -20px 0px;
 +
}
 +
 
 +
#fancy-bg-se {
 +
bottom: -20px;
 +
right: -20px;
 +
background-image: url('fancybox.png');
 +
background-position: -40px -182px;
 +
}
 +
 
 +
#fancy-bg-s {
 +
bottom: -20px;
 +
left: 0;
 +
width: 100%;
 +
background-image: url('fancybox-x.png');
 +
background-position: 0px -20px;
 +
}
 +
 
 +
#fancy-bg-sw {
 +
bottom: -20px;
 +
left: -20px;
 +
background-image: url('fancybox.png');
 +
background-position: -40px -142px;
 +
}
 +
 
 +
#fancy-bg-w {
 +
top: 0;
 +
left: -20px;
 +
height: 100%;
 +
background-image: url('fancybox-y.png');
 +
}
 +
 
 +
#fancy-bg-nw {
 +
top: -20px;
 +
left: -20px;
 +
background-image: url('fancybox.png');
 +
background-position: -40px -122px;
 +
}
 +
 
 +
/* IE */
 +
 
 +
#fancybox-loading.fancybox-ie div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }
 +
 
 +
.fancybox-ie #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
 +
.fancybox-ie #fancybox-title-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-title-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-title-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }
 +
 
 +
.fancybox-ie #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }
 +
 
 +
.fancybox-ie .fancy-bg { background: transparent !important; }
 +
 
 +
.fancybox-ie #fancy-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
 +
.fancybox-ie #fancy-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
 +
 
}
}
</style>
</style>

Revision as of 14:51, 13 July 2010

Retrieved from "http://2010.igem.org/Template:HarvardFancybox"