Template:GeorgiaTech/css/fancyboxes.css

From 2014.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
{{Template:GeorgiaTech/css/experiment.css}}
{{Template:GeorgiaTech/css/experiment.css}}
<html>
<html>
-
<link rel="stylesheet" href="https://2013.igem.org/Team:SDU-Denmark/core/fancyboxcss?action=raw&ctype=text/css" type="text/css" />
 
<script> $old = jQuery.noConflict();</script>
<script> $old = jQuery.noConflict();</script>
-
<script src="https://2013.igem.org/Team:SDU-Denmark/core/jquerytools?action=raw&ctype=text/javascript" type="text/javascript" ></script>
+
<script src="https://2013.igem.org/Team:GeorgiaTech/core/jquerytools?action=raw&ctype=text/javascript" type="text/javascript" ></script>
<script type="text/javascript">
<script type="text/javascript">
Line 57: Line 56:
     margin-bottom:5px;
     margin-bottom:5px;
}
}
-
 
.boxgridHuge {
.boxgridHuge {
Line 99: Line 97:
}
}
.boxcaption:hover {
.boxcaption:hover {
-
  text-decoration: none;
+
        text-decoration: none;
}
}
h2.onBlack {
h2.onBlack {
-
  color:white;
+
        color:white;
-
  margin-top: -5px;
+
        margin-top: -5px;
-
  border: none;
+
        border: none;
-
  Font-size: 26px;
+
        Font-size: 26px;
-
  padding-bottom: 0px;
+
        padding-bottom: 0px;
-
  line-height:1em;
+
        line-height:1em;
}
}
p.onBlack {
p.onBlack {
-
  color:white;
+
        color:white;
-
  margin-right:18px;
+
        margin-right:18px;
-
  font-size: 14px;
+
        font-size: 14px;
-
  font-weight: bold;
+
        font-weight: bold;
}
}
p.onBlackIntro {
p.onBlackIntro {
-
  font-size:17px;
+
        font-size:17px;
-
  font-style: italic;
+
        font-style: italic;
-
  color:white;
+
        color:white;
-
  margin-right:20px;
+
        margin-right:20px;
-
  margin-bottom:20px;
+
        margin-bottom:20px;
}
}
 +
/*! fancyBox v2.1.5 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: 999920;
 +
}
 +
.fancybox-skin {
 +
position: relative;
 +
background: #f9f9f9;
 +
color: #444;
 +
text-shadow: none;
 +
-webkit-border-radius: 4px;
 +
  -moz-border-radius: 4px;
 +
        border-radius: 4px;
 +
}
-
/* ACCORDION */
+
.fancybox-opened {
-
.accordion {
+
z-index: 8030;
}
}
-
.accordionTitel {
+
 
-
    cursor: pointer;
+
.fancybox-opened .fancybox-skin {
-
    border: 1px solid #C7C7C7;
+
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-
    font-size: 13px;
+
  -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-
    font-family: Tahoma, Arial;
+
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-
    font-weight: bold;
+
-
    padding: 3px 10px;
+
-
    display: block;
+
-
    margin-top:5px;
+
-
    border-radius: 5px;
+
-
    /* background */
+
-
    background: #EEEEEE; /* Old browsers */
+
-
    background: -moz-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* FF3.6+ */
+
-
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(228, 228, 228) ), color-stop(100%,#FFFFFF )); /* Chrome,Safari4+ */
+
-
    background: -webkit-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Chrome10+,Safari5.1+ */
+
-
    background: -o-linear-gradient(top, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* Opera 11.10+ */
+
-
    background: -ms-linear-gradient(top, rgb(228, 228, 228) 20%, rgb(255, 255, 255) 100%); /* IE10+ */
+
-
    background: linear-gradient(to bottom, rgb(228, 228, 228) 20%,rgb(255, 255, 255) 100%); /* W3C */
+
-
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4E4E4', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
+
}
}
-
.accordionTitel:hover {
+
 
-
border: 1px solid #A5A5A5;
+
.fancybox-outer, .fancybox-inner {
-
background: rgb(219,219,219); /* Old browsers */
+
position: relative;
-
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+
-
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
+
-
background: -moz-linear-gradient(top,  rgba(219,219,219,1) 0%, rgba(238,238,238,1) 99%); /* FF3.6+ */
+
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,219,219,1)), color-stop(99%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
+
-
background: -webkit-linear-gradient(top,  rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* Chrome10+,Safari5.1+ */
+
-
background: -o-linear-gradient(top,  rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* Opera 11.10+ */
+
-
background: -ms-linear-gradient(top,  rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* IE10+ */
+
-
background: linear-gradient(to bottom,  rgba(219,219,219,1) 0%,rgba(238,238,238,1) 99%); /* W3C */
+
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */
+
}
}
-
.accordion div.pane {
+
.fancybox-inner {
-
    border-radius: 5px;
+
overflow: hidden;
-
    padding: 10px;
+
-
    margin-top:3px;
+
-
    margin-bottom: 10px;
+
-
    display: none;
+
-
    border: 1px solid #C7C7C7;
+
}
}
-
.accordion div.current {
+
 
-
    display: block;
+
.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;
 +
}
-
/* RESULT PAGE */
+
.fancybox-image, .fancybox-iframe {
-
.resultContainer {
+
display: block;
-
    width: 700px;
+
width: 100%;
-
    margin-left:auto;
+
height: 100%;
-
    margin-right:auto;
+
}
}
-
.groupTitel {
+
 
-
    border-bottom-width: 2px;
+
.fancybox-image {
-
    border-bottom-style: solid;
+
max-width: 100%;
-
    border-bottom-color: #808080;
+
max-height: 100%;
-
    background-position: right top;
+
-
    background-repeat: no-repeat;
+
-
    font-size: 28px;
+
-
    padding-left: 2px;
+
-
    margin-bottom: 10px;
+
-
    margin-top: 10px;
+
-
    padding-top: 40px;
+
-
    padding-right: 20px;
+
}
}
-
.Bronze {
+
 
-
    background-image: url(https://static.igem.org/mediawiki/2013/7/76/SDU2013_Bronze.png);
+
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
-
    color: #D1A45F;
+
background-image: url('https://static.igem.org/mediawiki/2013/4/42/SDU2013_Fancybox_sprite.png');
}
}
-
.Silver {
+
 
-
    background-image: url(https://static.igem.org/mediawiki/2013/1/19/SDU2013_Silver.png);
+
#fancybox-loading {
-
    color: #B1B1B1;
+
position: fixed;
 +
top: 50%;
 +
left: 50%;
 +
margin-top: -22px;
 +
margin-left: -22px;
 +
background-position: 0 -108px;
 +
opacity: 0.8;
 +
cursor: pointer;
 +
z-index: 8060;
}
}
-
.Gold {
+
 
-
    background-image: url(https://static.igem.org/mediawiki/2013/e/eb/SDU2013_Gold.png);
+
#fancybox-loading div {
-
    color: #EEC452;
+
width: 44px;
 +
height: 44px;
 +
background: url('https://static.igem.org/mediawiki/2013/2/29/SDU2013_Fancybox_loading.gif') center center no-repeat;
}
}
-
.resultGroup {
 
-
    margin-left: 20px;
 
-
    padding-left: 55px;
 
-
    background-position: left top;
 
-
    background-repeat: no-repeat;
 
-
    background-image: url(https://static.igem.org/mediawiki/2013/1/1b/SDU2013_YesIcon.png);
 
-
    padding-bottom: 2px;
 
-
    margin-bottom: 10px;
 
-
    margin-right: 20px;
 
 +
.fancybox-close {
 +
position: absolute;
 +
top: -18px;
 +
right: -18px;
 +
width: 36px;
 +
height: 36px;
 +
cursor: pointer;
 +
z-index: 8040;
}
}
-
.resultTitel {
+
 
-
    font-weight: bold;
+
.fancybox-nav {
-
    font-size: 14px;
+
position: absolute;
-
    margin-bottom: 0px;
+
top: 0;
 +
width: 40%;
 +
height: 100%;
 +
cursor: pointer;
 +
text-decoration: none;
 +
background: transparent url('https://static.igem.org/mediawiki/2013/3/36/SDU2013_Transparent.png'); /* helps IE */
 +
-webkit-tap-highlight-color: rgba(0,0,0,0);
 +
z-index: 8040;
}
}
-
.resultText {
+
 
-
    font-size: 12px;
+
.fancybox-prev {
-
    margin-top: 0px;
+
left: 0;
}
}
-
/* VACCORDION */
+
.fancybox-next {
-
/* Vertical Accordion Style */
+
right: 0;
-
.va-container{
+
}
-
        position:relative;
+
-
overflow: hidden;
+
 +
.fancybox-nav span {
 +
position: absolute;
 +
top: 50%;
 +
width: 36px;
 +
height: 34px;
 +
margin-top: -18px;
 +
cursor: pointer;
 +
z-index: 8040;
 +
visibility: hidden;
}
}
-
.va-wrapper{
+
 
-
        width:100%;
+
.fancybox-prev span {
-
        height:100%;
+
left: 10px;
-
        position:relative;
+
background-position: 0 -36px;
-
        overflow:hidden;
+
-
        background:#000;
+
}
}
-
.va-slice{
+
 
-
        cursor:pointer;
+
.fancybox-next span {
-
        position:absolute;
+
right: 10px;
-
        width:100%;
+
background-position: 0 -72px;
-
        left:0px;
+
-
        overflow:hidden;
+
-
        background-position: center center;
+
-
        background-repeat: no-repeat;
+
}
}
-
.va-title{
+
.fancybox-nav:hover span {
-
        font-family: 'Open Sans Condensed', sans-serif;
+
visibility: visible;
-
        text-transform:uppercase;
+
-
        font-size:28px;
+
-
        margin-left:20px;
+
-
        color:#fff;
+
-
        text-shadow: 0px 0px 1px white;
+
-
        font-weight: bold;
+
-
        width: 340px;
+
-
        background-color: rgba(0, 0, 0, 0.8);
+
-
        padding-left: 20px;
+
}
}
-
.va-title-sub {
+
 
-
        font-size:18px;
+
.fancybox-tmp {
-
        font-weight: normal;
+
position: absolute;
-
        float: left;
+
top: -99999px;
-
        margin-right: 15px;
+
left: -99999px;
-
        margin-top: 3px;
+
visibility: hidden;
-
        width: 140px;
+
max-width: 99999px;
 +
max-height: 99999px;
 +
overflow: visible !important;
}
}
-
.va-content{
+
 
-
        display:none;
+
/* Overlay helper */
-
        margin-left:20px;
+
 
-
margin-left: 20px;
+
.fancybox-lock {
-
margin-top: 20px;
+
    overflow: hidden !important;
-
width: 330px;
+
    width: auto;
-
background-color: rgba(0, 0, 0, 0.8);
+
-
padding: 5px 15px 10px 15px;
+
-
position: absolute;
+
-
bottom: 0px;
+
-
max-height: 380px;
+
}
}
 +
.fancybox-lock body {
 +
    overflow: hidden !important;
 +
}
-
.aboutLabel, .aboutText {
+
.fancybox-lock-test {
-
font-family: 'Open Sans Condensed', sans-serif;
+
    overflow-y: hidden !important;
-
color: #fff;
+
}
-
text-shadow: 0px 0px 1px white;
+
-
font-size: 14px;
+
 +
.fancybox-overlay {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
overflow: hidden;
 +
display: none;
 +
z-index: 8010;
 +
background: url('https://static.igem.org/mediawiki/2013/d/da/SDU2013_Fbox_overlay.png');
}
}
-
.aboutLabel {
+
 
-
text-transform: uppercase;
+
.fancybox-overlay-fixed {
-
font-size: 16px;
+
position: fixed;
-
font-style: italic;
+
bottom: 0;
-
margin-top: 12px;
+
right: 0;
-
font-weight: bold;
+
}
}
 +
.fancybox-lock .fancybox-overlay {
 +
overflow: auto;
 +
overflow-y: scroll;
 +
}
 +
/* Title helper */
-
.va-slice ul{
+
.fancybox-title {
-
        margin-top:20px;
+
visibility: hidden;
 +
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 +
position: relative;
 +
text-shadow: none;
 +
z-index: 8050;
}
}
-
.va-slice ul li{
+
 
-
        float:left;
+
.fancybox-opened .fancybox-title {
-
        margin:0px 2px;
+
visibility: visible;
}
}
-
.va-slice ul li a{
+
 
-
        color:#000;
+
.fancybox-title-float-wrap {
-
        background:#eede2f;
+
position: absolute;
-
        padding:3px 6px;
+
bottom: 0;
-
        font-size:14px;
+
right: 50%;
-
        font-family:'PT Sans', sans-serif;
+
margin-bottom: -35px;
-
        text-transform:uppercase;
+
z-index: 8050;
 +
text-align: center;
}
}
-
.va-slice ul li a:hover{
+
 
-
        background:#000;
+
.fancybox-title-float-wrap .child {
-
        color:#fff;
+
display: inline-block;
-
        text-shadow:none;
+
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;
}
}
-
.va-nav span{
+
 
-
        width:40px;
+
.fancybox-title-outside-wrap {
-
        height:25px;
+
position: relative;
-
        background:transparent no-repeat center center;
+
margin-top: 10px;
-
        position:absolute;
+
color: #fff;
-
        top:-35px;
+
-
        left:50%;
+
-
        margin-left:-20px;
+
-
        text-indent:-9000px;
+
-
        opacity:0.7;
+
-
        cursor:pointer;
+
-
        display:none;
+
-
        z-index:100;
+
}
}
-
.va-nav span.va-nav-next{
 
-
        top:auto;
+
.fancybox-title-inside-wrap {
-
        bottom:-35px;
+
padding-top: 10px;
}
}
-
.va-nav span:hover{
+
 
-
        opacity:1.0;
+
.fancybox-title-over-wrap {
 +
position: absolute;
 +
bottom: 0;
 +
left: 0;
 +
color: #fff;
 +
padding: 10px;
 +
background: #000;
 +
background: rgba(0, 0, 0, .8);
}
}

Latest revision as of 14:11, 23 June 2014