Biomod/2011/Slovenia/BioNanoWizards/styletest

<html>

<head>

<style>

column-one { display:none; width:0px; }

.container{background-color: #f5f5f5; margin-top:50px}

footer{display:none;}

content { width: 0px; margin: 0 auto auto 0; padding: 1em 1em 1em 1em; align: center;}

column-content {width: 0px; float: left; margin: 0 0 0 0;padding: 0;}

.firstHeading {display:none; width:0px;}

globalWrapper{ width:1280px;}

column-one {display:none; width:0px;background-color: #ffffff;}

content{ margin: 0 0 0 0; padding: 1em 1em 1em 1em; position: center; width: 800px;background-color: #f5f5f5; }

.container{ width: 800px; margin: auto; background-color: #ffffff; text-align:justify; font-family: helvetica, arial, sans-serif; color:#555555; margin-top:25px; }

bodyContent{ width: 1267px; align: center; background-color: #ffffff;}

column-content{width: 1280px;background-color: #f5f5f5;}

.firstHeading { display:none;width:0px;background-color: #ffffff;}

header{position: center; width: 800px;background-color: #ffffff;}

</style>

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License

/

{

margin: 0; padding: 0; }

body { background: #FFFFFF url(http://openwetware.org/images/a/a2/Testimg01.jpg) repeat-x left top; text-align: justify; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; color: #757E82; }

h1, h2, h3 { color: #AA2808; }

h1 { }

h2 { }

h3 { }

p, blockquote, ul, ol { margin-bottom: 20px; line-height: 2em; }

p { }

blockquote { }

ul, ol, li { margin: 0px; padding: 0px; list-style: none; }

a { text-decoration: underline; color: #F40C42; }

a:hover { text-decoration: none; color: #F40C42; }

/* Wrapper */

wrapper {

}

/* Header */

header {

width: 900px; height: 140px; margin: 0 auto; }

/* Logo */

logo {

float: left; width: 270px; height: 76px; margin: 0px; padding: 15px 0px 0px 30px; }

logo h1 {

margin: 0; padding: 0; text-transform: lowercase; font: normal 46px Georgia, "Times New Roman", Times, serif; }

logo h2 {

margin: -4px 0 0 0; padding: 0px 0px 0px 10px; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; font-weight: normal; color: #D9170E; }

logo h2 a {

color: #9AA9B1; }

logo a {

text-decoration: none; color: #D9170E; }

/* Menu */

menu {

float: right; width: 592px; height: 90px; }

menu ul {

margin: 0; padding: 0px 0 0 20px; list-style: none; line-height: normal; margin-left: 30px; }

menu li {

display: inline; text-align: center; }

menu a {

display: block; float: left; height: 55px; margin-right: 1px; padding: 35px 20px 0px 20px; letter-spacing: -1px; text-decoration: none; text-align: center; text-transform: lowercase; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: normal; color: #383B3F; }

menu a:hover, #menu .active a {

background: #F40C42 url(http://openwetware.org/images/1/1e/Testimg02.jpg) repeat-x left bottom; color: #FFFFFF; }

/* Search */

search {

padding: 0px 0px 40px 0px; }

search form {

margin: 0; padding: 0; }

search fieldset {

margin: 0; padding: 0; border: none; }

search input {

float: left; font: 11px Tahoma, Geneva, sans-serif; padding: 2px 2px; }

search-text {

width: 100px; border: 1px solid #000000; color: #000000; }

search-submit {

height: 21px; margin-left: 10px; padding: 0px 2px; border: none; background: #E71810; color: #FFFFFF; }

/* Page */

page {

width: 900px; margin: 0 auto; }

/* Content */

content {

float: left; width: 630px; }

.post { background: url(http://openwetware.org/images/1/14/Testimg05.jpg) repeat-y left top; }

.post-bgtop { background: url(http://openwetware.org/images/5/58/Testimg04.jpg) no-repeat left top; }

.post-bgbtm { background: url(http://openwetware.org/images/7/70/Testimg06.jpg) no-repeat left bottom; padding: 50px 40px 30px 40px; }

.post .title { margin: 0px; padding: 0px 0px 5px 0px; color: #232F01; }

.post .title a { letter-spacing: -1px; text-decoration: none; text-transform: lowercase; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 32px; color: #3A3D40; }

.post .entry { }

.post img { float: left; padding: 15px 0px; }

.post .meta { }

.post .more { display: block; width: 115px; height: 32px; padding: 8px 0px 0px 0px; background: url(http://openwetware.org/images/3/34/Testimg12.jpg) no-repeat left top; text-align: center; text-transform: uppercase; text-decoration: none; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: normal; color: #FFFFFF; }

.post .byline { font-size: 11px; font-style: italic; }

/* Sidebar */

sidebar {

float: right; width: 260px; background: url(http://openwetware.org/images/d/d0/Testimg08.jpg) repeat-y left top; font-size: 11px; }

sidebar-bgtop {

background: url(http://openwetware.org/images/9/9c/Testimg07.jpg) no-repeat left top; }

sidebar-bgbtm {

background: url(http://openwetware.org/images/a/ac/Testimg09.jpg) no-repeat left bottom; padding: 40px 40px 20px 40px; }

sidebar ul {

margin: 0; padding: 0; list-style: none; line-height: normal; }

sidebar li {

margin-bottom: 1px; }

sidebar li ul {

margin: 0px; padding: 0px 0px 40px 0px; }

sidebar li li {

margin: 0; padding: 7px 0px; border: none; background: url(http://openwetware.org/images/a/a7/Testimg10.jpg) repeat-x left bottom; font-family: Tahoma, Geneva, sans-serif; }

sidebar li li a {

background: url(http://openwetware.org/images/2/27/Testimg11.jpg) no-repeat left 3px; padding-left: 20px; }

sidebar h2 {

margin: 0px; padding: 0px 0px 20px 0px; text-transform: lowercase; font-family: Arial, Helvetica, sans-serif; font-size: 180%; font-weight: normal; color: #454E55; }

sidebar h3 {

font-size: 77%; color: #454E55; }

sidebar p {

margin: 0; line-height: normal; color: #D4C792; }

sidebar a {

border: none; text-decoration: none; color: #757E82; }

sidebar a:hover {

text-decoration: underline; color: #363636; }

/* Submenu */

submenu {

}

/* News */

news {

}

news a {

font-size: 85%; }

/* Footer */

footer-wrapper {

background: #F7F7F7 url(http://openwetware.org/images/f/f9/Testimg03.jpg) repeat-x left top; padding: 20px 0px; }

footer {

width: 900px; margin: 0 auto; color: #757E82; }

footer p {

margin: 0; text-align: center; font-size: 11px; }

footer a {

text-decoration: underline; color: #757E82; }

footer a:hover {

text-decoration: none; color: #F90542; }

gallery-bg {

background: url(http://openwetware.org/images/1/14/Testimg05.jpg) repeat-y left top; }

gallery-bgtop {

background: url(http://openwetware.org/images/5/58/Testimg04.jpg) no-repeat left top; }

gallery-bgbtm {

background: url(http://openwetware.org/images/7/70/Testimg06.jpg) no-repeat left bottom; padding: 50px 40px; }

foobar

{ width: 550px; height: 330px; position: relative; background:red; }

foobar .navigation

{ position: absolute; display: block; z-index: 100; color: #ffffff; bottom: 0px; right: 0px; margin: 10px; padding: 10px; background-color: #303030; opacity: 0.75; }

foobar .navigation a

{ color: #ffffff; text-decoration: none; outline: none; }

foobar .viewer

{ width: 550px; height: 330px; }

foobar .viewer .reel .slide

{ position: relative; width: 550px; height: 330px; }

foobar .viewer .reel .slide span

{ position: absolute; display: block; width: 520px; opacity: 0.50; padding: 20px; background-color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #3A3D40; bottom: 0px; left: 0px; }

</style>

* jQuery JavaScript Library v1.4.2
* http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500
*/

</script>

/*

Slidertron 0.1: A flexible slider plugin for jQuery By nodethirtythree design | http://nodethirtythree.com/

Tested on IE6, IE7, IE8, Firefox 3.6, Opera 10.51, Safari 4.0.5, and Chrome 5.0.342.9. Dual licensed under the MIT or GPL license.

//////////////////////////////////////////////////////////////////////////

MIT license:

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

//////////////////////////////////////////////////////////////////////////

GPL license:

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.

//////////////////////////////////////////////////////////////////////////

/

(function($) {

jQuery.fn.slidertron = function(options) {

var settings = jQuery.extend({ selectorParent: jQuery(this) }, options);

return jQuery.slidertron(settings); }

jQuery.slidertron = function(options) {

// Settings

var settings = jQuery.extend({

selectorParent: null, // If a jQuery object, all selectors will be restricted to its scope. Otherwise, all selectors will be global.

// Selectors

viewerSelector: null, // Viewer selector slidesSelector: null, // Slides selector navNextSelector: null, // 'Next' selector navPreviousSelector: null, // 'Previous' selector navFirstSelector: null, // 'First' selector navLastSelector: null, // 'Last' selector navStopAdvanceSelector: null, // 'Stop Advance' selector navPlayAdvanceSelector: null, // 'Play Advance' selector

// General settings

speed: 'fast', // Transition speed (0 for instant, 'slow', 'fast', or a custom duration in ms) navWrap: true, // Wrap navigation when we navigate past the first or last slide seamlessWrap: true, // Seamlessly wrap slides advanceDelay: 0, // Time to wait (in ms) before automatically advancing to the next slide (0 disables advancement entirely) advanceResume: 0, // Time to wait (in ms) before resuming advancement after a user interrupts it by manually navigating (0 disables resuming advancement) advanceNavActiveClass: 'active' // Active advancement navigation class

}, options);

// Variables

// Operational stuff

var isConfigured = true, isLocked = false, isAdvancing = false, isSeamless = false, list = new Array(), currentIndex = false, timeoutID;

// jQuery objects

var __slides, __viewer, __navFirst, __navLast, __navNext, __navPrevious, __navStopAdvance, __navPlayAdvance;

// Functions

function getElement(selector, required) { var x;

try { if (selector == null) throw 'is undefined';

if (settings.selectorParent) x = settings.selectorParent.find(selector); else x = jQuery(selector);

if (x.length == 0) throw 'does not exist';

return x; } catch (error) { if (required == true) { alert('Error: Required selector "' + selector + '" ' + error + '.'); isConfigured = false; } }

return null; }

function advance() { if (settings.advanceDelay == 0) return;

if (!isLocked) nextSlide();

timeoutID = window.setTimeout(advance, settings.advanceDelay); }

function initializeAdvance() { if (settings.advanceDelay == 0) return;

if (__navPlayAdvance) __navPlayAdvance.addClass(settings.advanceNavActiveClass);

if (__navStopAdvance) __navStopAdvance.removeClass(settings.advanceNavActiveClass);

isAdvancing = true; timeoutID = window.setTimeout(advance, settings.advanceDelay); }

function interruptAdvance() { if (!isAdvancing) return;

if (settings.advanceDelay == 0) return;

window.clearTimeout(timeoutID);

if (settings.advanceResume == 0) return;

timeoutID = window.setTimeout(advance, settings.advanceResume); }

function stopAdvance() { if (settings.advanceDelay == 0) return;

if (!isAdvancing) return;

isAdvancing = false; window.clearTimeout(timeoutID); }

function playAdvance(skip) { if (settings.advanceDelay == 0) return;

if (isAdvancing) return;

isAdvancing = true;

if (skip) timeoutID = window.setTimeout(advance, settings.advanceDelay); else advance(); }

function firstSlide() { switchSlide((isSeamless ? 1 : 0)); }

function lastSlide() { switchSlide((isSeamless ? list.length - 2 : list.length - 1)); }

function nextSlide() { if (currentIndex < list.length - 1) switchSlide(currentIndex + 1); else if (settings.navWrap || isAdvancing) switchSlide(0); }

function previousSlide() { if (currentIndex > 0) switchSlide(currentIndex - 1); else if (settings.navWrap) switchSlide(list.length - 1); }

function switchSlide(index) { // Check locking status (so another switch can't be initiated while another is in progress)

if (isLocked) return false;

isLocked = true;

if (currentIndex === false) { currentIndex = index; __reel.css('left', -1 * list[currentIndex].x); isLocked = false; } else { var diff, currentX, newX;

currentX = list[currentIndex].x; newX = list[index].x; diff = currentX - newX;

__reel.animate({ left: '+=' + diff }, settings.speed, 'swing', function() { currentIndex = index;

if (list[currentIndex].realIndex !== false) { currentIndex = list[currentIndex].realIndex; __reel.css('left', -1 * list[currentIndex].x); }

isLocked = false; }); } }

function initialize() { // Slides, viewer, reel

__viewer = getElement(settings.viewerSelector, true); __reel = getElement(settings.reelSelector, true); __slides = getElement(settings.slidesSelector, true);

// Navigation

__navFirst = getElement(settings.navFirstSelector); __navLast = getElement(settings.navLastSelector); __navNext = getElement(settings.navNextSelector); __navPrevious = getElement(settings.navPreviousSelector); __navStopAdvance = getElement(settings.navStopAdvanceSelector); __navPlayAdvance = getElement(settings.navPlayAdvanceSelector);

// Check configuration status

if (isConfigured == false) { alert('Error: One or more configuration errors detected. Aborting.'); return; }

// Set up

// Viewer

__viewer.css('position', 'relative'); __viewer.css('overflow', 'hidden');

// Reel

__reel.css('position', 'absolute'); __reel.css('left', 0); __reel.css('top', 0);

// Slides

var cx = 0, length = __slides.length;

if (length > 2 && settings.seamlessWrap) { isSeamless = true;

var first = __slides.first(); var last = __slides.last();

last.clone().insertBefore(first); first.clone().insertAfter(last);

__slides = getElement(settings.slidesSelector, true); }

__slides.each(function(index) {

var y = jQuery(this);

list[index] = { object: y, x: cx, realIndex: false };

y.css('position', 'absolute'); y.css('left', cx); y.css('top', 0);

cx += y.width(); });

if (isSeamless) { list[0].realIndex = length; // second to last list[length + 1].realIndex = 1; // second }

// Navigation

if (__navFirst) __navFirst.click(function(event) { event.preventDefault();

if (isLocked) return false;

if (isAdvancing) interruptAdvance();

firstSlide(); });

if (__navLast) __navLast.click(function(event) { event.preventDefault();

if (isLocked) return false;

if (isAdvancing) interruptAdvance();

lastSlide(); });

if (__navNext) __navNext.click(function(event) { event.preventDefault();

if (isLocked) return false;

if (isAdvancing) interruptAdvance();

nextSlide(); });

if (__navPrevious) __navPrevious.click(function(event) { event.preventDefault();

if (isLocked) return false;

if (isAdvancing) interruptAdvance();

previousSlide(); });

if (__navStopAdvance) __navStopAdvance.click(function(event) { event.preventDefault();

if (isLocked) return false;

if (!isAdvancing) return false;

__navStopAdvance.addClass(settings.advanceNavActiveClass);

if (__navPlayAdvance) __navPlayAdvance.removeClass(settings.advanceNavActiveClass);

stopAdvance(); });

if (__navPlayAdvance) __navPlayAdvance.click(function(event) { event.preventDefault();

if (isLocked) return false;

if (isAdvancing) return false;

__navPlayAdvance.addClass(settings.advanceNavActiveClass);

if (__navStopAdvance) __navStopAdvance.removeClass(settings.advanceNavActiveClass);

playAdvance(); });

}

// Ready

jQuery().ready(function() { initialize(); initializeAdvance(); firstSlide(); }); };

})(jQuery);

</script>

</head>

<body>

<div id="wrapper"> <div id="header"> <div id="logo"> <h1><a href="#">Vertebrate </a></h1> <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2> </div>  <div id="menu"> <ul> <li class="active"><a href="#">Homepage</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>  </div> <div> <div id="page"> <div id="page-bgtop"> <div id="content"> <div id="gallery-bg"> <div id="gallery-bgtop"> <div id="gallery-bgbtm"> <div id="foobar"> <div class="navigation"> <a href="#" class="first">[ << ]</a>   <a href="#" class="previous">[ < ]</a>   <a href="#" class="next">[ > ]</a>   <a href="#" class="last">[ >> ]</a> </div> <div class="viewer"> <div class="reel"> <div class="slide"> <img src="http://openwetware.org/images/7/7c/Testimg13.jpg" alt=""> <span>Peacock.</span> </div> <div class="slide"> <img src="http://openwetware.org/images/7/74/Testimg14.jpg" alt=""> <span>Parrot.</span> </div> <div class="slide"> <img src="http://openwetware.org/images/4/44/Testimg15.jpg" alt=""> <span>Parrot.</span> </div> <div class="slide"> <img src="http://openwetware.org/images/3/32/Testimg16.jpg" alt=""> <span>Hummingbird.</span> </div> </div> </div> </div> <script type="text/javascript">

$('#foobar').slidertron({ viewerSelector: '.viewer', reelSelector: '.viewer .reel', slidesSelector: '.viewer .reel .slide', navPreviousSelector: '.previous', navNextSelector: '.next', navFirstSelector: '.first', navLastSelector: '.last' });

</script>  </div> </div> </div> <div class="post"> <div class="post-bgtop"> <div class="post-bgbtm"> <h2 class="title"><a href="#">Lorem Ipsum Dolor Volutpat</a></h2> <p class="byline">Posted by <a href="#">Someone</a> April 22, 2010</p> <div class="entry"> <p>This is <strong>Vertebrate </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. The slideshow uses photos from <a href="http://www.pdphoto.org">PDPhoto.org</a> and is powered by Slidertron (a jQuery plugin by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a>). This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p> </div> <div class="meta"> <p><a href="#" class="more">View More</a></p> </div> </div> </div> </div> <div class="post"> <div class="post-bgtop"> <div class="post-bgbtm"> <h2 class="title"><a href="#">Lorem Ipsum Dolor Volutpat</a></h2> <p class="byline">Posted by <a href="#">Someone</a> April 22, 2010</p> <div class="entry"> <p>Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris. Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing cursus vel, odio.</p> </div> <div class="meta"> <p><a href="#" class="more">View More</a></p> </div> </div> </div> </div> </div>  <div id="sidebar"> <div id="sidebar-bgtop"> <div id="sidebar-bgbtm"> <ul> <li id="search"> <h2>Search</h2> <form method="get" action=""> <fieldset> <input type="text" id="seach-text" name="s" value="" /> <input type="submit" id="search-submit" value="Search" /> </fieldset> </form> </li> <li> <h2>Lorem Ipsum</h2> <ul> <li><a href="#">Fusce dui neque fringilla</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Velit semper nisi molestie</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> </ul> </li> <li> <h2>Volutpat Dolore</h2> <ul> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Velit semper nisi molestie</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Velit semper nisi molestie</a></li> </ul> </li> <li> <h2>Bebindum Mauris </h2> <ul> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Velit semper nisi molestie</a></li> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Velit semper nisi molestie</a></li> </ul> </li> <li> <h2>Phasellus Tellus</h2> <ul> <li><a href="#">Eget tempor eget nonummy</a></li> <li><a href="#">Nec metus sed donec</a></li> <li><a href="#">Magna lacus bibendum mauris</a></li> <li><a href="#">Velit semper nisi molestie</a></li> </ul> </li> </ul> </div> </div> </div>  <div style="clear: both; height: 1px"></div> </div> </div>  </div>  <div id="footer-wrapper"> <div id="footer"> <p id="legal">Copyright © 2007 Vertebrate . All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p> </div> </div>

</body>

</html>

Biomod/2011/Slovenia/BioNanoWizards/styletest

Navigation menu

Page actions

Page actions

Personal tools

Navigation

Search

research

Tools