Team:UI-Indonesia

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
/*! 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 {
-
<!-- this section changes the default wiki template to a white full width background -->
+
position: absolute;
-
 
+
-
<style type="text/css">
+
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
+
-
 
+
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
-
+
-
border: 0 none;
+
-
height: 14px;
+
-
z-index: 100;
+
top: 0;
top: 0;
-
position: fixed;
+
left: 0;
-
width: 975px;
+
z-index: 999920;
-
left: 50%;  
+
-
margin-left: -487px;
+
}
}
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
.fancybox-skin {
-
width: 100%;  
+
position: relative;
-
height: 100%;
+
background: #f9f9f9;
-
border: 0px;
+
color: #444;
-
background-color: transparent;
+
text-shadow: none;
-
margin: 0px;
+
-webkit-border-radius: 4px;
-
padding: 0px;
+
  -moz-border-radius: 4px;
 +
        border-radius: 4px;
}
}
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
.fancybox-opened {
-
width: 100%;
+
z-index: 8030;
-
height: 100%;
+
-
background-color: transparent;
+
}
}
-
</style>
 
-
<!--  here ends the section that changes the default wiki template to a white full width background -->
 
 +
.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);
 +
}
-
<!-- beginning of your page -->
+
.fancybox-outer, .fancybox-inner {
 +
position: relative;
 +
}
-
<div id="contentcontainer">
+
.fancybox-inner {
 +
overflow: hidden;
 +
}
 +
.fancybox-type-iframe .fancybox-inner {
 +
-webkit-overflow-scrolling: touch;
 +
}
-
<!-- this table contains the navigation bar -->
+
.fancybox-error {
-
<table  width="975px" align="center">
+
color: #444;
-
<tr> <td colspan="10" heigth="155px"> </td></tr>
+
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 +
margin: 0;
 +
padding: 15px;
 +
white-space: nowrap;
 +
}
-
<br>
+
.fancybox-image, .fancybox-iframe {
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
}
-
<tr>
+
.fancybox-image {
-
<!--
+
max-width: 100%;
-
**************Navigation bar**************
+
max-height: 100%;
-
Each cell represents a button,
+
}
-
1.- first row defines the borders outside each box, how the text is aligned and the height
+
-
2.- second row defines the color, here you can change the color by modifying the hex code
+
-
3.- third row is where you place the link to where you want that button to take you
+
-
4.- fourth row you define the color of the text inside the button and the content of it
+
-
-->
+
 +
#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');
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px"
+
#fancybox-loading {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
position: fixed;
-
<a href="https://2014.igem.org/WikitemplateA_home"
+
top: 50%;
-
style="color:#000000">Home </a> </td>
+
left: 50%;
 +
margin-top: -22px;
 +
margin-left: -22px;
 +
background-position: 0 -108px;
 +
opacity: 0.8;
 +
cursor: pointer;
 +
z-index: 8060;
 +
}
-
<td style="border:1px solid black;" align="center" height ="45px"
+
#fancybox-loading div {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
width: 44px;
-
<a href="https://2014.igem.org/WikitemplateA_team"
+
height: 44px;
-
style="color:#000000"> Team </a> </td>
+
background: url('https://static.igem.org/mediawiki/2013/2/29/SDU2013_Fancybox_loading.gif') center center no-repeat;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px" 
+
.fancybox-close {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
position: absolute;
-
<a href=""
+
top: -18px;
-
style="color:#000000"> Official Team Profile </a></td>
+
right: -18px;
 +
width: 36px;
 +
height: 36px;
 +
cursor: pointer;
 +
z-index: 8040;
 +
}
-
<td style="border:1px solid black" align="center"  height ="45px"
+
.fancybox-nav {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
position: absolute;
-
<a href="https://2014.igem.org/WikitemplateA_project"
+
top: 0;
-
style="color:#000000"> Project</a></td>
+
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;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px"
+
.fancybox-prev {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
left: 0;
-
<a href="https://2014.igem.org/WikitemplateA_parts"
+
}
-
style="color:#000000"> Parts</a></td>
+
-
<td style="border:1px solid black;" align="center" height ="45px"
+
.fancybox-next {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
right: 0;
-
<a href=""
+
}
-
style="color:#000000"> Modeling</a></td>
+
-
<td style="border:1px solid black;" align="center" height ="45px"
+
.fancybox-nav span {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7> 
+
position: absolute;
-
<a href=""
+
top: 50%;
-
style="color:#000000"> Notebook</a></td>
+
width: 36px;
 +
height: 34px;
 +
margin-top: -18px;
 +
cursor: pointer;
 +
z-index: 8040;
 +
visibility: hidden;
 +
}
-
<td style="border:1px solid black;" align="center"  height ="45px"
+
.fancybox-prev span {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
left: 10px;
-
<a href=""
+
background-position: 0 -36px;
-
style=" color:#000000"> Safety </a></td>
+
}
-
<td style="border:1px solid black;" align="center"  height ="45px"
+
.fancybox-next span {
-
onMouseOver="this.bgColor='#d3d3d3'" onMouseOut="this.bgColor='#e7e7e7'" bgColor=#e7e7e7>
+
right: 10px;
-
<a href=""
+
background-position: 0 -72px;
-
style="color:#000000"> Attributions </a></td>
+
}
 +
.fancybox-nav:hover span {
 +
visibility: visible;
 +
}
-
<!-- this is the iGEM logo! it will take to igem.org -->
+
.fancybox-tmp {
-
<td align ="center"> <a href="https://igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"></a> </td>
+
position: absolute;
-
</tr>
+
top: -99999px;
 +
left: -99999px;
 +
visibility: hidden;
 +
max-width: 99999px;
 +
max-height: 99999px;
 +
overflow: visible !important;
 +
}
-
<tr> <td colspan="10" heigth="45px"> </td></tr>
+
/* Overlay helper */
-
</table>
+
-
<!-- end of navigation bar -->
+
.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');
 +
}
-
<!-- page content begins-->
+
.fancybox-overlay-fixed {
 +
position: fixed;
 +
bottom: 0;
 +
right: 0;
 +
}
-
<table width="975px" align="center">
+
.fancybox-lock .fancybox-overlay {
-
<tr ><td coslpan="2" height="35px"></td></tr>
+
overflow: auto;
-
<tr>
+
overflow-y: scroll;
 +
}
-
<td width="35%" valign="top">
+
/* Title helper */
-
<h3>Welcome ! </h3>
+
-
<p>
+
-
This is a basic template you may use to customize your wiki, you can take it apart and modify it as much as you want. The links and tabs provided here are basic suggestions, feel free to adapt it for your team and your project. </p>
+
-
<p>
+
-
If you are looking for general  wiki guidelines, restrictions, design tips and more, visit the <br><a href="https://2014.igem.org/Wiki_How-To"> Wiki How-To Page</a></p>
+
-
</p>
+
 +
.fancybox-title {
 +
visibility: hidden;
 +
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
 +
position: relative;
 +
text-shadow: none;
 +
z-index: 8050;
 +
}
-
</td>
+
.fancybox-opened .fancybox-title {
 +
visibility: visible;
 +
}
-
<td width="5%" > </td>
+
.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;
 +
}
-
<!-- here you can place an image related to your project or your logo! -->
+
.fancybox-title-outside-wrap {
-
<td width="60%" > <img src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderimage.jpg" width="600px" height="300px"></td>
+
position: relative;
-
 
+
margin-top: 10px;
-
 
+
color: #fff;
-
 
+
}
-
<tr ><td coslpan="2" height="35px"></td></tr>
+
-
</tr>
+
-
</table>
+
 +
.fancybox-title-inside-wrap {
 +
padding-top: 10px;
 +
}
-
 
+
.fancybox-title-over-wrap {
-
 
+
position: absolute;
-
<!-- 3 columns content
+
bottom: 0;
-
this area is divided intro 3 columns, you can add more information about your team, project, city or mention your sponsors! -->
+
left: 0;
-
<table width="975px" align="center">
+
color: #fff;
-
 
+
padding: 10px;
-
 
+
background: #000;
-
<tr>
+
background: rgba(0, 0, 0, .8);
-
<!-- first column -->
+
}
-
<td width="30%">
+
-
<!-- you can have an image related to your paragraph -->
+
-
<img src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderimage.jpg" width="300px" height="200px">
+
-
<h4> Results</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber
+
-
hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
+
-
 
+
-
</td>
+
-
 
+
-
<td width="5%"></td>
+
-
 
+
-
 
+
-
<!-- second column -->
+
-
<td width="30%">
+
-
<img src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderimage.jpg" width="300px" height="200px">
+
-
<h4>Human Practice</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in,
+
-
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
+
-
</td>
+
-
<td width="5%"></td>
+
-
 
+
-
 
+
-
<!-- third column -->
+
-
<td width="30%">
+
-
<img src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderimage.jpg" width="300px" height="200px">
+
-
<h4>Follow us on Twitter/Facebook!</h4>
+
-
<p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in,
+
-
eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
+
-
</td>
+
-
</tr>
+
-
 
+
-
 
+
-
</table>
+
-
<!-- end of 3 column content -->
+
-
 
+
-
 
+
-
 
+
-
</div>
+
-
</html>
+
-
 
+
-
<!-- end of page -->
+

Revision as of 11:59, 22 June 2014

/*! 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%; }

  1. 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'); }

  1. 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; }

  1. 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); }

Retrieved from "http://2014.igem.org/Team:UI-Indonesia"