Team:WITS-CSIR SA/style.css

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
body {
+
/*
-
     font-family: tahoma, helvetica, arial, sans-serif;
+
* Galleria Classic Theme
-
     font-size: 10px;
+
* Copyright (c) 2010, Aino
-
     text-align: center;
+
* Licensed under the MIT license.
-
     background: #d9d6cc url(images/page_bg.gif) top center repeat-x;
+
*/
-
     color: #868686;
+
 +
#galleria{height:500px;}
 +
 
 +
.galleria-container {
 +
     position: relative;
 +
    overflow: hidden;
 +
    background: #000;
 +
}
 +
.galleria-container img {
 +
    -moz-user-select: none;
 +
    -webkit-user-select: none;
 +
    -o-user-select: none;
 +
}
 +
.galleria-stage {
 +
    position: absolute;
 +
    top: 10px;
 +
    bottom: 60px;
 +
    left: 10px;
 +
    right: 10px;
 +
    overflow:hidden;
 +
}
 +
.galleria-thumbnails-container {
 +
    height: 50px;
 +
    bottom: 0;
 +
    position: absolute;
 +
    left: 10px;
 +
    right: 10px;
 +
    z-index: 2;
 +
}
 +
.galleria-carousel .galleria-thumbnails-list {
 +
    margin-left: 30px;
 +
    margin-right: 30px;
 +
}
 +
.galleria-thumbnails .galleria-image {
 +
    height: 40px;
 +
    width: 60px;
 +
    background: #000;
 +
    margin: 0 5px 0 0;
 +
    border: 1px solid #000;;
 +
    float: left;
 +
    cursor: pointer;
 +
}
 +
.galleria-counter {
 +
    position: absolute;
 +
    bottom: 10px;
 +
    left: 10px;
 +
    text-align: right;
 +
    color: #fff;
 +
    font: normal 11px/1 arial,sans-serif;
 +
     z-index: 2;
 +
}
 +
.galleria-loader {
 +
    background: #000;
 +
    width: 20px;
 +
    height: 20px;
 +
    position: absolute;
 +
    top: 10px;
 +
     right: 10px;
 +
    z-index: 2;
 +
    display: none;
 +
     background: url(https://static.igem.org/mediawiki/2011/7/7f/Classic-loader.gif) no-repeat 2px 2px;
 +
}
 +
.galleria-info {
 +
    width: 50%;
 +
     top: 15px;
 +
    left: 15px;
 +
    z-index: 2;
 +
    position: absolute;
 +
}
 +
.galleria-info-text {
 +
    background-color: #000;
 +
    padding: 12px;
 +
    display: none;
 +
    /* IE7 */ zoom:1;
 +
}
 +
.galleria-info-title {
 +
    font: bold 12px/1.1 arial,sans-serif;
     margin: 0;
     margin: 0;
-
     padding: 10px;
+
     color: #fff;
 +
margin-bottom: 7px;
}
}
-
 
+
.galleria-info-description {
-
html, #wrapper, h1 {
+
    font: italic 12px/1.4 georgia,serif;
     margin: 0;
     margin: 0;
-
     padding: 0;
+
     color: #bbb;
}
}
-
 
+
.galleria-info-close {
-
img { border: 0; }
+
    width: 9px;
-
 
+
    height: 9px;
-
#wrapper {
+
    position: absolute;
-
     margin: auto;
+
     top: 5px;
-
     text-align: left;
+
     right: 5px;
-
     width: 458px;
+
    background-position: -753px -11px;
-
     position: relative;
+
     opacity: .5;
 +
     filter: alpha(opacity=50);
 +
    cursor: pointer;
 +
    display: none;
}
}
-
 
+
.galleria-info-close:hover{
-
h1, h2, h3 {
+
     opacity:1;
-
     font-size: 10px;
+
    filter: alpha(opacity=100);
}
}
-
 
+
.galleria-info-link {
-
 
+
     background-position: -669px -5px;
-
h1 {
+
    opacity: .7;
-
     line-height: 1;
+
    filter: alpha(opacity=70);
     position: absolute;
     position: absolute;
-
     top: 0;
+
    width: 20px;
 +
    height: 20px;
 +
    cursor: pointer;
 +
    background-color: #000;
 +
}
 +
.galleria-info-link:hover {
 +
    opacity: 1;
 +
    filter: alpha(opacity=100);
 +
}
 +
.galleria-image-nav {
 +
    position: absolute;
 +
     top: 50%;
 +
    margin-top: -62px;
 +
    width: 100%;
 +
    height: 62px;
     left: 0;
     left: 0;
}
}
-
 
+
.galleria-image-nav-left,
-
h2 {
+
.galleria-image-nav-right {
-
     margin: 0 0 5px 0;
+
     opacity: .3;
-
     padding: 0;
+
    filter: alpha(opacity=30);
 +
    cursor: pointer;
 +
    width: 62px;
 +
    height: 124px;
 +
    position: absolute;
 +
    left: 10px;
 +
    z-index: 2;
 +
     background-position: 0 46px;
}
}
-
 
+
.galleria-image-nav-right {
-
h3 {
+
     left: auto;
-
     padding: 4px 0 0 0;
+
    right: 10px;
 +
    background-position: -254px 46px;
 +
    z-index: 2;
}
}
-
 
+
.galleria-image-nav-left:hover,
-
.block {
+
.galleria-image-nav-right:hover {
-
     display: block;
+
     opacity: 1;
 +
    filter: alpha(opacity=100);
}
}
-
 
+
.galleria-thumb-nav-left,
-
.clear {
+
.galleria-thumb-nav-right {
-
     clear: both;
+
     cursor: pointer;
-
     height: 10px;
+
    display: none;
 +
    background-position: -495px 5px;
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
     height: 40px;
 +
    width: 23px;
 +
    z-index: 3;
 +
    opacity: .8;
 +
    filter: alpha(opacity=80);
}
}
-
 
+
.galleria-thumb-nav-right {
-
.left {
+
     background-position: -578px 5px;
-
     float: left;
+
     border-right: none;
-
     margin: 5px 20px 0px 0px;
+
    right: 0;
 +
    left: auto;
}
}
-
 
+
.galleria-thumbnails-container .disabled {
-
.right {
+
    opacity: .2;
-
     float: right;
+
    filter: alpha(opacity=20);
-
     margin: 0px 0px 0px 20px;
+
    cursor: default;
 +
}
 +
.galleria-thumb-nav-left:hover,
 +
.galleria-thumb-nav-right:hover {
 +
     opacity: 1;
 +
    filter: alpha(opacity=100);
 +
    background-color: #111;
 +
}
 +
.galleria-thumbnails-container .disabled:hover {
 +
    opacity: 0.2;
 +
    filter: alpha(opacity=20);
 +
     background-color: transparent;
}
}
-
.readmore {
+
.galleria-carousel .galleria-thumb-nav-left,
-
     text-align: right;
+
.galleria-carousel .galleria-thumb-nav-right {
 +
     display: block;
 +
}
 +
.galleria-thumb-nav-left,
 +
.galleria-thumb-nav-right,
 +
.galleria-info-link,
 +
.galleria-info-close,
 +
.galleria-image-nav-left,
 +
.galleria-image-nav-right {
 +
    background-image: url(https://static.igem.org/mediawiki/2011/9/9d/Classic-map.png);
 +
    background-repeat: no-repeat;
}
}
-
/* page structure */
+
/*
 +
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
 +
*/
-
#wrapper {
+
*
-
    background: url(images/body_t.png) 24px 0px no-repeat;
+
{
-
    height: 40px;
+
  margin: 0;
 +
  padding: 0;
 +
  border: none;
 +
  outline: none;
}
}
-
h1 {
+
.mosaic-overlay .details
-
    position: absolute;
+
{
-
    top: 16px;
+
  padding: 0.5em;
-
    left: 43px;
+
-
    margin: 0;
+
-
    padding: 0;
+
-
    width: 135px;
+
-
    z-index: 10;
+
}
}
-
#nav {
+
.mosaic-content
-
    position: absolute;
+
{
-
    top: 31px;
+
  color: white !important;
-
    left: 0;
+
  text-decoration: none !important;
-
    width: 31px;
+
  border: none;
-
    margin: 0;
+
-
    padding: 0;
+
-
    z-index: 5;
+
}
}
-
#nav li {
+
/*General Mosaic Styles*/
-
    float: left;
+
.mosaic-block
-
    width: 31px;
+
{
-
    padding: 0;
+
  float: left;
-
    margin: 0;
+
  position: relative;
-
    list-style: none;
+
  overflow: hidden;
 +
  width: 400px;
 +
  height: 250px;
 +
  margin: 10px;
 +
  background: #111 url(https://static.igem.org/mediawiki/2011/c/c4/Progress.gif) no-repeat center center;
 +
  border: 1px solid #fff;
 +
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
}
-
#nav img {
+
.mosaic-backdrop
-
    display: block;
+
{
 +
  display: none;
 +
  position: absolute;
 +
  top: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  background: #111;
}
}
-
#body {
+
.mosaic-overlay
-
    background: url(images/body_bg.png) repeat-y;
+
{
-
    position: absolute;
+
  display: none;
-
    top: 39px;
+
  z-index: 5;
-
    left: 10px;
+
  position: absolute;
-
    width: 448px;
+
  width: 100%;
-
    margin: 0;
+
  height: 100%;
-
    padding: 10px 0 0 0;
+
  background: #111;
-
    z-index: 2;
+
}
}
-
#body .inner {
+
/*** Custom Animation Styles (You can remove/add any styles below) ***/
-
    width: 300px;
+
.circle .mosaic-overlay
-
    margin: 10px 20px 0px 20px;
+
{
 +
  background: url(https://static.igem.org/mediawiki/2011/7/70/Hover-magnify.png) no-repeat center center;
 +
  opacity: 0;
 +
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
 +
  filter: alpha(opacity=00);
 +
  display: none;
}
}
-
#body .inner #content {
+
.fade .mosaic-overlay
-
    width: 200px;
+
{
-
    margin-left: 10px;
+
  opacity: 0;
-
    margin-top: 1em;
+
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
 +
  filter: alpha(opacity=00);
 +
  background: url(https://static.igem.org/mediawiki/2011/d/da/Bg-black.png);
}
}
-
#body .inner #content p {
+
.bar .mosaic-overlay
-
    margin: 1em 0;
+
{
-
    padding: 0;
+
  bottom: -100px;
 +
  height: 100px;
 +
  background: url(https://static.igem.org/mediawiki/2011/d/da/Bg-black.png);
}
}
-
#body .inner #content div {
+
.bar2 .mosaic-overlay
-
    padding: 17px;
+
{
-
    border-top: 1px solid #d4d6cf;
+
  bottom: -50px;
-
    border-bottom: 1px solid #d4d6cf;
+
  height: 100px;
 +
  opacity: 0.8;
 +
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 +
  filter: alpha(opacity=80);
}
}
-
#body .inner h2 {
+
.bar2 .mosaic-overlay:hover
-
    font-size: 12px;
+
{
 +
  opacity: 1;
 +
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
  filter: alpha(opacity=100);
}
}
-
#page_title {
+
.bar3 .mosaic-overlay
-
    float: left;
+
{
-
    margin: 3px 0 -50px 15px;
+
  top: -100px;
-
    padding: 20px 0 50px 0;
+
  height: 100px;
-
    width: 57px;
+
  background: url(https://static.igem.org/mediawiki/2011/d/da/Bg-black.pngg);
-
    border-right: 1px solid #d4d6cf;
+
}
}
 +
/*** End Animation Styles ***/
-
* html #page_title {
+
 
-
    margin-left: 7px;
+
/*
 +
* 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;
}
}
-
#news {
+
/*============================*/
-
    float: left;
+
/*=== Custom Slider Styles ===*/
-
    width: 129px;
+
/*============================*/
-
    margin: 10px 0 0px 6px;
+
#slider-wrapper
-
    background: url(images/box_bg.gif) repeat-y;
+
{
 +
  background: url(images/slider.png) no-repeat;
 +
  width: 998px;
 +
  height: 392px;
 +
  margin: 0 auto;
 +
  padding-top: 74px;
 +
  margin-top: 50px;
}
}
-
#news div {
+
#slider
-
    background: url(images/box_t.gif) no-repeat;
+
{
 +
  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%;
 +
}
 +
#slider img
 +
{
 +
  position: absolute;
 +
  top: 0px;
 +
  left: 0px;
 +
  display: none;
 +
}
 +
#slider a
 +
{
 +
  border: 0;
 +
  display: block;
}
}
-
#news div div {
+
.nivo-controlNav
-
    padding: 12px 12px 7px 12px;
+
{
-
    background: url(images/box_b.gif) bottom left no-repeat;
+
  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;
}
}
-
#news p {
+
.nivo-directionNav a
-
    margin: 0;
+
{
-
    padding: 0 0 3px 0;
+
  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;
}
}
-
#news .readmore {
+
.nivo-caption
-
    padding-top: 4px;
+
{
 +
  text-shadow: none;
 +
  font-family: Helvetica, Arial, sans-serif;
 +
}
 +
.nivo-caption a
 +
{
 +
  color: #efe9d1;
 +
  text-decoration: underline;
}
}
-
#paper {
+
/* BEGIN: Menu */
-
    position: absolute;
+
div.menubar
-
    top: 39px;
+
{
-
    left: 243px;
+
  background: #222;
-
    width: 196px;
+
  background: url(https://static.igem.org/mediawiki/2011/1/1b/Topnav_bg.gif) repeat-x;
-
    z-index: 9;
+
  position: relative;
-
    background: url(images/paper_bg.gif) repeat-y;
+
  top: -21px;
 +
  left: -6px;
 +
  width: 976px !important;
}
}
-
#paper .inner {
+
ul.topnav
-
    background: url(images/paper_b.gif) bottom no-repeat;
+
{
-
    padding: 8px 30px 18px 30px;
+
  list-style: none;
 +
  padding: 0 20px;
 +
  margin: 0;
 +
  float: left;
 +
  background: #222;
 +
  background: url(https://static.igem.org/mediawiki/2011/1/1b/Topnav_bg.gif) 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(https://static.igem.org/mediawiki/2011/f/f5/Topnav_hover.gif) no-repeat center top;
 +
}
 +
ul.topnav li span
 +
{
 +
  /*--Drop down trigger styles--*/
 +
  width: 17px;
 +
  height: 35px;
 +
  float: left;
 +
  background: url(https://static.igem.org/mediawiki/2011/4/45/Subnav_btn.gif) 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(https://static.igem.org/mediawiki/2011/4/4b/Dropdown_linkbg.gif) no-repeat 10px center;
 +
  padding-left: 20px;
 +
}
 +
html ul.topnav li ul.subnav li a:hover
 +
{
 +
  /*--Hover effect for subnav links--*/
 +
  background: #222 url(https://static.igem.org/mediawiki/2011/4/4b/Dropdown_linkbg.gif) no-repeat 10px center;
 +
}
 +
/* END:  Menu */
 +
 +
/* BEGIN: Site */
-
#paper .readmore {
+
body
-
    text-align: left;
+
{
-
    margin-bottom: 0;
+
  font-family: Tahoma, Verdana, Sans-Serif, Arial, Helvetica; /* font-size: 0.75em; */
-
    padding-bottom: 0;
+
  border-style: none !important;
}
}
-
#paper p {
+
.gradient
-
    margin: 1em 0;
+
{
-
    padding: 0;
+
  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;
}
}
-
#footer {
+
.padding
-
    text-align: right;
+
{
-
margin-top: 2px;
+
  padding: 1em;
}
}
-
.footerie {
+
p
-
    display: none;
+
{
 +
  margin: 0.5em;
}
}
-
.clear {
+
div.contentBox
-
   margin-top: -20px;
+
{
 +
  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;
}
}
-
a {
+
h1.logo
-
    color: #575e58;
+
{
-
    font-weight: bold;
+
  margin-left:10px;
 +
  font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
 +
  font-size: 50px;
 +
  color: #99C92F;
 +
  text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
 +
  border-bottom: none !important;
}
}
-
a:hover {
+
h2{
-
    color: #b31d00;
+
  font-size: 13pt;
 +
  color: #99C92F;
 +
  text-transform:uppercase
 +
  border-bottom: 1px solid #99C92F !important;
}
}
 +
 +
/* END:  Site */

Revision as of 17:37, 10 July 2011

/* 

* Galleria Classic Theme
* Copyright (c) 2010, Aino
* Licensed under the MIT license.
*/
  1. galleria{height:500px;}

.galleria-container { 

   position: relative;
   overflow: hidden;
   background: #000;

} .galleria-container img { 

   -moz-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;

} .galleria-stage { 

   position: absolute;
   top: 10px;
   bottom: 60px;
   left: 10px;
   right: 10px;
   overflow:hidden;

} .galleria-thumbnails-container { 

   height: 50px;
   bottom: 0;
   position: absolute;
   left: 10px;
   right: 10px;
   z-index: 2;

} .galleria-carousel .galleria-thumbnails-list { 

   margin-left: 30px;
   margin-right: 30px;

} .galleria-thumbnails .galleria-image { 

   height: 40px;
   width: 60px;
   background: #000;
   margin: 0 5px 0 0;
   border: 1px solid #000;;
   float: left;
   cursor: pointer;

} .galleria-counter { 

   position: absolute;
   bottom: 10px;
   left: 10px;
   text-align: right;
   color: #fff;
   font: normal 11px/1 arial,sans-serif;
   z-index: 2;

} .galleria-loader { 

   background: #000;
   width: 20px;
   height: 20px;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 2;
   display: none;
   background: url(Classic-loader.gif) no-repeat 2px 2px;

} .galleria-info { 

   width: 50%;
   top: 15px;
   left: 15px;
   z-index: 2;
   position: absolute;

} .galleria-info-text { 

   background-color: #000;
   padding: 12px;
   display: none;
   /* IE7 */ zoom:1;

} .galleria-info-title { 

   font: bold 12px/1.1 arial,sans-serif;
   margin: 0;
   color: #fff;

margin-bottom: 7px; } .galleria-info-description { 

   font: italic 12px/1.4 georgia,serif;
   margin: 0;
   color: #bbb;

} .galleria-info-close { 

   width: 9px;
   height: 9px;
   position: absolute;
   top: 5px;
   right: 5px;
   background-position: -753px -11px;
   opacity: .5;
   filter: alpha(opacity=50);
   cursor: pointer;
   display: none;

} .galleria-info-close:hover{ 

   opacity:1;
   filter: alpha(opacity=100);

} .galleria-info-link { 

   background-position: -669px -5px;
   opacity: .7;
   filter: alpha(opacity=70);
   position: absolute;
   width: 20px;
   height: 20px;
   cursor: pointer;
   background-color: #000;

} .galleria-info-link:hover { 

   opacity: 1;
   filter: alpha(opacity=100);

} .galleria-image-nav { 

   position: absolute;
   top: 50%;
   margin-top: -62px;
   width: 100%;
   height: 62px;
   left: 0;

} .galleria-image-nav-left, .galleria-image-nav-right { 

   opacity: .3;
   filter: alpha(opacity=30);
   cursor: pointer;
   width: 62px;
   height: 124px;
   position: absolute;
   left: 10px;
   z-index: 2;
   background-position: 0 46px;

} .galleria-image-nav-right { 

   left: auto;
   right: 10px;
   background-position: -254px 46px;
   z-index: 2;

} .galleria-image-nav-left:hover, .galleria-image-nav-right:hover { 

   opacity: 1;
   filter: alpha(opacity=100);

} .galleria-thumb-nav-left, .galleria-thumb-nav-right { 

   cursor: pointer;
   display: none;
   background-position: -495px 5px;
   position: absolute;
   left: 0;
   top: 0;
   height: 40px;
   width: 23px;
   z-index: 3;
   opacity: .8;
   filter: alpha(opacity=80);

} .galleria-thumb-nav-right { 

   background-position: -578px 5px;
   border-right: none;
   right: 0;
   left: auto;

} .galleria-thumbnails-container .disabled { 

   opacity: .2;
   filter: alpha(opacity=20);
   cursor: default;

} .galleria-thumb-nav-left:hover, .galleria-thumb-nav-right:hover { 

   opacity: 1;
   filter: alpha(opacity=100);
   background-color: #111;

} .galleria-thumbnails-container .disabled:hover { 

   opacity: 0.2;
   filter: alpha(opacity=20);
   background-color: transparent;

}

.galleria-carousel .galleria-thumb-nav-left, .galleria-carousel .galleria-thumb-nav-right { 

   display: block;

} .galleria-thumb-nav-left, .galleria-thumb-nav-right, .galleria-info-link, .galleria-info-close, .galleria-image-nav-left, .galleria-image-nav-right { 

   background-image: url(Classic-map.png);
   background-repeat: no-repeat;

}

/* 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(Progress.gif) 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(Hover-magnify.png) 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(Bg-black.png);

}

.bar .mosaic-overlay { 

 bottom: -100px;
 height: 100px;
 background: url(Bg-black.png);

}

.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(Topnav_bg.gif) 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(Topnav_bg.gif) 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(Topnav_hover.gif) no-repeat center top;

} ul.topnav li span { 

 /*--Drop down trigger styles--*/
 width: 17px;
 height: 35px;
 float: left;
 background: url(Subnav_btn.gif) 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(Dropdown_linkbg.gif) no-repeat 10px center;
 padding-left: 20px;

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

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

} /* END: Menu */

/* BEGIN: Site */

body { 

 font-family: Tahoma, Verdana, Sans-Serif, Arial, Helvetica; /* font-size: 0.75em; */
 border-style: none !important;

}

.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 { 

 margin-left:10px;
 font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
 font-size: 50px;
 color: #99C92F;
 text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
 border-bottom: none !important;

}

h2{ 

 font-size: 13pt;
 color: #99C92F;
 text-transform:uppercase
 border-bottom: 1px solid #99C92F !important;

}

/* END: Site */

Retrieved from "http://2011.igem.org/Team:WITS-CSIR_SA/style.css"