"

From 2011.igem.org

/* Mosaic - Sliding Boxes and Captions jQuery Plugin Version 1.0.1 www.buildinternet.com/project/mosaic

By Sam Dunn / One Mighty Roar (www.onemightyroar.com) Released under MIT License / GPL License

• /

{

 margin: 0;
 padding: 0;
 border: none;
 outline: none;

}

.mosaic-overlay .details {

 padding: 0.5em;

}

.mosaic-content {

 color: white !important;
 text-decoration: none !important;
 border: none;

}

/*General Mosaic Styles*/ .mosaic-block {

 float: left;
 position: relative;
 overflow: hidden;
 width: 400px;
 height: 250px;
 margin: 10px;
 background: #111 url() no-repeat center center;
 border: 1px solid #fff;
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

}

.mosaic-backdrop {

 display: none;
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 background: #111;

}

.mosaic-overlay {

 display: none;
 z-index: 5;
 position: absolute;
 width: 100%;
 height: 100%;
 background: #111;

}

/*** Custom Animation Styles (You can remove/add any styles below) ***/ .circle .mosaic-overlay {

 background: url() no-repeat center center;
 opacity: 0;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
 filter: alpha(opacity=00);
 display: none;

}

.fade .mosaic-overlay {

 opacity: 0;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
 filter: alpha(opacity=00);
 background: url();

}

.bar .mosaic-overlay {

 bottom: -100px;
 height: 100px;
 background: url();

}

.bar2 .mosaic-overlay {

 bottom: -50px;
 height: 100px;
 opacity: 0.8;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 filter: alpha(opacity=80);

}

.bar2 .mosaic-overlay:hover {

 opacity: 1;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);

}

.bar3 .mosaic-overlay {

 top: -100px;
 height: 100px;
 background: url(https://static.igem.org/mediawiki/2011/d/da/Bg-black.pngg);

} /*** End Animation Styles ***/

/*

* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* March 2010
*/

/* The Nivo Slider styles */ .nivoSlider {

 position: relative;

} .nivoSlider img {

 position: absolute;
 top: 0px;
 left: 0px;

} /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink {

 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 border: 0;
 padding: 0;
 margin: 0;
 z-index: 6;
 display: none;

} /* The slices and boxes in the Slider */ .nivo-slice {

 display: block;
 position: absolute;
 z-index: 5;
 height: 100%;

} .nivo-box {

 display: block;
 position: absolute;
 z-index: 5;

} /* Caption styles */ .nivo-caption {

 position: absolute;
 left: 0px;
 bottom: 0px;
 background: #000;
 color: #fff;
 opacity: 0.8; /* Overridden by captionOpacity setting */
 width: 100%;
 z-index: 8;

} .nivo-caption p {

 padding: 5px;
 margin: 0;

} .nivo-caption a {

 display: inline !important;

} .nivo-html-caption {

 display: none;

} /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a {

 position: absolute;
 top: 45%;
 z-index: 9;
 cursor: pointer;

} .nivo-prevNav {

 left: 0px;

} .nivo-nextNav {

 right: 0px;

} /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a {

 position: relative;
 z-index: 9;
 cursor: pointer;

} .nivo-controlNav a.active {

 font-weight: bold;

}

/*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/

1. slider-wrapper

{

 background: url(images/slider.png) no-repeat;
 width: 998px;
 height: 392px;
 margin: 0 auto;
 padding-top: 74px;
 margin-top: 50px;

}

1. slider

{

 position: relative;
 width: 618px;
 height: 370; /*    margin-left:190px;*/
 background: url('https://static.igem.org/mediawiki/2011/4/42/Loading.gif') no-repeat 50% 50%;

}

1. slider img

{

 position: absolute;
 top: 0px;
 left: 0px;
 display: none;

}

1. slider a

{

 border: 0;
 display: block;

}

.nivo-controlNav {

 position: absolute;
 left: 260px;
 bottom: -42px;

} .nivo-controlNav a {

 display: block;
 width: 22px;
 height: 22px;
 background: url('https://static.igem.org/mediawiki/2011/c/c3/Bullets.png') no-repeat;
 text-indent: -9999px;
 border: 0;
 margin-right: 3px;
 float: left;

} .nivo-controlNav a.active {

 background-position: 0 -22px;

}

.nivo-directionNav a {

 display: block;
 width: 30px;
 height: 30px;
 background: url('https://static.igem.org/mediawiki/2011/f/f0/Arrows.png') no-repeat;
 text-indent: -9999px;
 border: 0;

} a.nivo-nextNav {

 background-position: -30px 0;
 right: 15px;

} a.nivo-prevNav {

 left: 15px;

}

.nivo-caption {

 text-shadow: none;
 font-family: Helvetica, Arial, sans-serif;

} .nivo-caption a {

 color: #efe9d1;
 text-decoration: underline;

}

/* BEGIN: Menu */ div.menubar {

 background: #222;
 background: url() repeat-x;
 position: relative;
 top: -21px;
 left: -6px;
 width: 976px !important;

}

ul.topnav {

 list-style: none;
 padding: 0 20px;
 margin: 0;
 float: left;
 background: #222;
 background: url() repeat-x;

} ul.topnav li {

 float: left;
 margin: 0;
 padding: 0 15px 0 0;
 position: relative; /*--Declare X and Y axis base--*/

} ul.topnav li a {

 padding: 10px 5px;
 color: #fff;
 display: block;
 text-decoration: none;
 float: left;

} ul.topnav li a:hover {

 background: url() no-repeat center top;

} ul.topnav li span {

 /*--Drop down trigger styles--*/
 width: 17px;
 height: 35px;
 float: left;
 background: url() no-repeat center top;
 position: relative;
 top: 4px;

} ul.topnav li span.subhover {

 background-position: center bottom;
 cursor: pointer;

} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav {

 list-style: none;
 position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
 left: 0;
 top: 35px;
 background: #333;
 margin: 0;
 padding: 0;
 display: none;
 float: left;
 width: 170px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 border: 1px solid #111;

} ul.topnav li ul.subnav li {

 margin: 0;
 padding: 0;
 border-top: 1px solid #252525; /*--Create bevel effect--*/
 border-bottom: 1px solid #444; /*--Create bevel effect--*/
 clear: both;
 width: 170px;
 z-index: 100;

} html ul.topnav li ul.subnav li a {

 float: left;
 width: 145px;
 background: #333 url() no-repeat 10px center;
 padding-left: 20px;

} html ul.topnav li ul.subnav li a:hover {

 /*--Hover effect for subnav links--*/
 background: #222 url() no-repeat 10px center;

} /* END: Menu */

/* BEGIN: Site */

html, body {

 height: 99.5%;
 overflow: auto;

}

body {

 font-family: Tahoma, Verdana, Sans-Serif, Arial, Helvetica; /* font-size: 0.75em; */

}

.gradient {

 background: #A6C9E2; /* for non-css3 browsers */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A6C9E2', endColorstr='#245FB3'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#A6C9E2), to(#245FB3)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #A6C9E2,  #245FB3); /* for firefox 3.6+ */
 background-attachment: fixed;

}

.padding {

 padding: 1em;

}

p {

 margin: 0.5em;

}

div.contentBox {

 padding: 0.5em;
 margin: 0.5em;
 width: 30%;
 float: left;
 border: 1px solid #c00;
 border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;

}

h1.logo {

 position: relative;
 font-size: 80px;
 margin-top: 0;
 font-family: 'Myriad-Pro' , 'Myriad' , helvetica, arial, sans-serif;
 text-shadow: 2px 3px 3px #292929;
 letter-spacing: 4px;
 -webkit-text-stroke: 1px white;

}

h1.logo a {

 text-decoration: none;
 color: #ffffff;
 position: absolute;
 -webkit-mask-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
 text-shadow: 0 2px 0 #e9e9e9;
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 transition: all .3s;

}

h1.logo a:hover {

 color: #ddddff;

}

h1.logo:after {

 color: #dbdbdb;
 content: attr(data-title);

}

/* END: Site */