Template:GeorgiaTech/css/fancyboxes.css
From 2014.igem.org
(Difference between revisions)
(30 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | {{Template:GeorgiaTech/css/experiment.css}} | ||
<html> | <html> | ||
- | |||
- | |||
<script> $old = jQuery.noConflict();</script> | <script> $old = jQuery.noConflict();</script> | ||
- | <script src="https://2013.igem.org/Team: | + | <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 23: | Line 19: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | |||
+ | /* BASE */ | ||
+ | |||
+ | .MainLayout { | ||
+ | width:960px; | ||
+ | margin-right:auto; | ||
+ | margin-left:auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | .topMargin { | ||
+ | margin-top: 25px; | ||
+ | } | ||
+ | |||
+ | /* CONTENT */ | ||
+ | .contentBorder { | ||
+ | border: 1px solid #AAAAAA; | ||
+ | -webkit-border-radius: 7px; | ||
+ | -moz-border-radius: 7px; | ||
+ | border-radius: 7px; | ||
+ | -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35); | ||
+ | } | ||
+ | .expandedContent { | ||
+ | margin-left: -45px; | ||
+ | width: 930px; | ||
+ | } | ||
+ | |||
+ | .ContentHeader { | ||
+ | font-size:30px; | ||
+ | font-weight:bold; | ||
+ | font-family:Andy; | ||
+ | color:#3D3D3D; | ||
+ | margin-left:15px; | ||
+ | margin-bottom:5px; | ||
+ | } | ||
+ | |||
+ | .boxgridHuge { | ||
+ | width: 885px; | ||
+ | height: 500px; | ||
+ | } | ||
+ | |||
+ | .boxgridBig, .boxgridMedium { | ||
+ | height: 550px; | ||
+ | } | ||
+ | .boxgridBig { | ||
+ | width: 615px; | ||
+ | float: left; | ||
+ | } | ||
+ | .boxgridMedium { | ||
+ | width: 298px; | ||
+ | float: left; | ||
+ | } | ||
+ | .boxgrid { | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .boxgrid img{ | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | border: 0; | ||
+ | } | ||
+ | .boxcaption{ | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | background: #000; | ||
+ | width: 100%; | ||
+ | opacity: .8; | ||
+ | padding: 10px; | ||
+ | /* For IE 5-7 */ | ||
+ | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); | ||
+ | /* For IE 8 */ | ||
+ | -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | ||
+ | } | ||
+ | .boxcaption:hover { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | h2.onBlack { | ||
+ | color:white; | ||
+ | margin-top: -5px; | ||
+ | border: none; | ||
+ | Font-size: 26px; | ||
+ | padding-bottom: 0px; | ||
+ | line-height:1em; | ||
+ | } | ||
+ | p.onBlack { | ||
+ | color:white; | ||
+ | margin-right:18px; | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | p.onBlackIntro { | ||
+ | font-size:17px; | ||
+ | font-style: italic; | ||
+ | color:white; | ||
+ | margin-right: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; | ||
+ | } | ||
+ | |||
+ | .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('https://static.igem.org/mediawiki/2013/4/42/SDU2013_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('https://static.igem.org/mediawiki/2013/2/29/SDU2013_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('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; | ||
+ | } | ||
+ | |||
+ | .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 !important; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .fancybox-lock body { | ||
+ | overflow: hidden !important; | ||
+ | } | ||
+ | |||
+ | .fancybox-lock-test { | ||
+ | overflow-y: hidden !important; | ||
+ | } | ||
+ | |||
+ | .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'); | ||
+ | } | ||
+ | |||
+ | .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); | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 14:11, 23 June 2014