Template:Http://2014.igem.org/Team:Colombia

From 2014.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="...")
 
(279 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>
-
<head>
+
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
<!--WELCOME, TRAVELER
 +
to our humble wiki template for this year. It's nuts. I'm genouinely
 +
sorry if you have to read through it. We just copied and pasted a
 +
bunch of scripts from around the web, and did some tweaks here and there.
 +
 +
If you plan to use any of this stuff for your own purposes, check
 +
out the attributions below.
 +
 +
For any additional information regarding the code or free cookies, email
 +
pablocarderam@gmail.com
 +
and he'll do the best he can to help you.
 +
 +
Cheers,
 +
 +
Pablo CR and the 2014 Colombia iGEM team.
 +
-->
-
<script type="text/javascript" src="http://linacabal.com/juan/ddaccordion.js">
+
<!--So there are four main parts to this code:
 +
The CAROUSEL, shamelessly taken from
 +
http://getbootstrap.com/examples/carousel/
 +
Code licensed under MIT, documentation under CC BY 3.0. Says so right here at bottom
 +
http://getbootstrap.com/
 +
 +
The Wheeltz NAVIGATION MENU, stolen at gunpoint from the great
 +
Assad Syaifullah Harahap (design) and Justin Hubbard (src code), who's webpage source code includes a beautiful easter egg and i encourage everybody to check out.
 +
http://wheeltz.blogspot.com/2011/12/wheel-sunpeach.html
 +
Mr. Assad also distributes his stuff under CC-BY-3.0
 +
http://creativecommons.org/licenses/by/3.0/
 +
Says so here at the bottom, "some rights reserved"
 +
http://assadotcom.blogspot.com/2011/01/webdesigntuts.html
 +
 +
Some FLIPPY BUTTONS
 +
Truth be told, I have no idea where my co-team members found this stuff.
 +
However, it looks a whole damn lot like the buttons here:
 +
http://www.dynamicdrive.com/style/csslibrary/item/flat_flipping_menu_buttons/
 +
These were designed by the guys at Dynamic Drive.
 +
Mind you: their stuff is NOT LICENSED under CC-BY-3.0 as far as I can tell.
 +
However, they do allow anyone to use and alter the code, as long as you
 +
attribute it to them and you don't distribute the code itself:
 +
http://www.dynamicdrive.com/notice.htm
 +
 +
They also ask to put this thing wherever we use their stuff:
 +
 +
/***********************************************
 +
* Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
 +
* This notice MUST stay intact for legal use
 +
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
 +
***********************************************/
 +
 +
So there.
 +
 +
Some TEXT BUTTONS made by Taylor Palmer, available at
 +
http://codepen.io/tpalmer75/pen/iImsJ/
 +
Again, not CC-BY-3.0, so
 +
"
 +
Copyright (c) 2014 by Taylor Palmer (http://codepen.io/tpalmer75/pen/iImsJ)
-
/***********************************************
+
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:
-
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
+
-
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
+
-
* This notice must stay intact for legal use
+
-
***********************************************/
+
-
</script>  
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 +
"
 +
 +
Everything else we made ourselves and is available under CC-BY-3.0 and all that jazz.
 +
-->
 +
 +
<!--So now without further ado,
 +
THE CODE:
 +
-->
 +
 
 +
<!--PART I: CAROUSEL-->
 +
 
 +
<!--IMPORTS CAROUSEL SCRIPTS and jQuery too-->
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
 +
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script type="text/javascript">
<script type="text/javascript">
 +
 +
// CAROUSEL
 +
      $(document).ready(function () {
 +
            $('.carousel').carousel()
 +
                    interval: 100
-
//Initialize Arrow Side Menu:
+
        });
-
ddaccordion.init({
+
-
headerclass: "menuheaders", //Shared CSS class name of headers group
+
-
contentclass: "menucontents", //Shared CSS class name of contents group
+
-
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
+
-
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
+
-
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
+
-
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
+
-
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
+
-
animatedefault: false, //Should contents open by default be animated into view?
+
-
persiststate: true, //persist state of opened contents within browser session?
+
-
toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
+
-
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
+
-
animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
+
-
oninit:function(expandedindices){ //custom code to run when headers have initalized
+
-
//do nothing
+
-
},
+
-
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
+
-
//do nothing
+
-
}
+
-
})
+
-
</script>
+
      $(document).ready(function () {
 +
            $('.dropdown-toggle').dropdown();
 +
        });
 +
 
 +
$('#myTab a').click(function (e) {
 +
  e.preventDefault();
 +
  $(this).tab('show');
 +
});
 +
</script>
 +
 
 +
<!-- this section changes the default wiki template to a white full width background -->
<style type="text/css">
<style type="text/css">
-
#content {
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear
-
+
-
}
+
-
#toc, .toc {
+
{
-
display:none;
+
 +
display:  none;
 +
 +
}
 +
 +
/*-- hides default wiki settings --*/
 +
 +
#top-section {
 +
height: 0px;
 +
border-top: 0;
 +
border-left: none;
 +
border-right: none;
}
}
-
h1, h2, h3, h4, h5, h6 {
+
 
 +
 
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
border: 0px;
border: 0px;
-
        color: #00523C;
+
/*background-color: #C68E17;*/
-
         family-font: "Myriad Web Pro";
+
         background: url(https://static.igem.org/mediawiki/2014/2/24/Paper-background.jpg) no-repeat center center fixed;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        background-size: cover;
 +
margin: 0px;
 +
padding: 0px;
}
}
-
.arrowsidemenu{
 
-
width: 180px; /*width of menu*/
 
-
border-style: solid solid none solid;
 
-
border-color: #94AA74;
 
-
border-size: 1px;
 
-
border-width: 1px;
 
-
 
-
 
-
 
 +
 +
 +
html, body, .wrapper { /*-- changes default wiki settings --
 +
 +
*/
 +
width: 100%;
 +
height: 100%;
 +
        margin: 0px;
 +
        padding: 0px;
 +
/*background-color: #C68E17;*/
 +
        background: url(https://static.igem.org/mediawiki/2014/2/24/Paper-background.jpg)  no-repeat center center fixed;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        background-size: cover;
}
}
-
.arrowsidemenu ul{
+
 
-
list-style-type: none;
+
</style>
-
list-style-image: none;
+
 
 +
<style>
 +
table,th,td
 +
  {
 +
  Background: rba(200, 200, 200, 0.3);
 +
  }
 +
 
 +
</style>
 +
 
 +
<style>
 +
/*Carousel, work in progress*/
 +
.carousel {
 +
  position: relative;
 +
  margin-bottom: 20px;
 +
  line-height: 1;
}
}
-
+
 
-
.arrowsidemenu div a{ /*header bar links*/
+
.carousel-inner {
-
font: bold 12px Helvetica, Arial, sans-serif;
+
  position: relative;
-
display: block;
+
  width: 100%;
-
background: transparent url(https://static.igem.org/mediawiki/2012/e/e6/Arrowgreen.gif) 100% 0;
+
   overflow: hidden;
-
   height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
+
-
padding: 4px 0 4px 10px;
+
-
line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
+
-
text-decoration: none;
+
}
}
-
+
 
-
.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
+
.carousel-inner > .item {
-
color: #26370A;
+
  position: relative;
 +
  display: none;
 +
  -webkit-transition: 0.6s ease-in-out left;
 +
    -moz-transition: 0.6s ease-in-out left;
 +
      -o-transition: 0.6s ease-in-out left;
 +
          transition: 0.6s ease-in-out left;
}
}
-
.arrowsidemenu div a:hover{
+
.carousel-inner > .item > img,
-
background-position: 100% -32px;
+
.carousel-inner > .item > a > img {
 +
  display: block;
 +
  line-height: 1;
}
}
-
.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
+
.carousel-inner > .active,
-
color: #283b00;
+
.carousel-inner > .next,
 +
.carousel-inner > .prev {
 +
  display: block;
}
}
-
+
.carousel-inner > .active {
-
.arrowsidemenu div.selected a{ /*header that's currently selected*/
+
  left: 0;
-
color: #616161;
+
-
background-position: 100% -64px !important;
+
}
}
-
.arrowsidemenu ul{
+
.carousel-inner > .next,
-
list-style-type: none;
+
.carousel-inner > .prev {
-
margin: 0;
+
  position: absolute;
-
padding: 0;
+
  top: 0;
 +
  width: 100%;
}
}
-
.arrowsidemenu ul li{
+
.carousel-inner > .next {
-
border-bottom: 1px solid #a1c67b;
+
  left: 100%;
-
list-style-type: none;
+
}
 +
.carousel-inner > .prev {
 +
  left: -100%;
 +
}
 +
.carousel-inner > .next.left,
 +
.carousel-inner > .prev.right {
 +
  left: 0;
}
}
 +
.carousel-inner > .active.left {
 +
  left: -100%;
 +
}
-
.arrowsidemenu ul li a{ /*sub menu links*/
+
.carousel-inner > .active.right {
-
display: block;
+
  left: 100%;
-
background: #ffffff;
+
-
font: normal 12px Helvetica, Arial, sans-serif;
+
-
text-decoration: none;
+
-
color: black;
+
-
padding: 5px 0;
+
-
padding-left: 10px;
+
-
border-left: 10px double #a1c67b;
+
-
list-style-type: none;
+
}
}
-
.arrowsidemenu ul li a:hover{
+
.carousel-control {
-
background: #d5e5c1;
+
  position: absolute;
 +
  top: 40%;
 +
  left: 15px;
 +
  width: 40px;
 +
  height: 40px;
 +
  margin-top: -20px;
 +
  font-size: 60px;
 +
  font-weight: 100;
 +
  line-height: 30px;
 +
  color: #ffffff;
 +
  text-align: center;
 +
  background: #222222;
 +
  border: 3px solid #ffffff;
 +
  -webkit-border-radius: 23px;
 +
    -moz-border-radius: 23px;
 +
          border-radius: 23px;
 +
  opacity: 0.5;
 +
  filter: alpha(opacity=50);
}
}
 +
 +
.carousel-control.right {
 +
  right: 15px;
 +
  left: auto;
 +
}
 +
 +
.carousel-control:hover,
 +
.carousel-control:focus {
 +
  color: #ffffff;
 +
  text-decoration: none;
 +
  opacity: 0.9;
 +
  filter: alpha(opacity=90);
 +
}
 +
 +
.carousel-indicators {
 +
  position: absolute;
 +
  top: 15px;
 +
  right: 15px;
 +
  z-index: 5;
 +
  margin: 0;
 +
  list-style: none;
 +
}
 +
 +
.carousel-indicators li {
 +
  display: block;
 +
  float: left;
 +
  width: 10px;
 +
  height: 10px;
 +
  margin-left: 5px;
 +
  text-indent: -999px;
 +
  background-color: #ccc;
 +
  background-color: rgba(255, 255, 255, 0.25);
 +
  border-radius: 5px;
 +
}
 +
 +
.carousel-indicators .active {
 +
  background-color: #fff;
 +
}
 +
 +
.carousel-caption {
 +
  position: absolute;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  padding: 15px;
 +
  background: #333333;
 +
  background: rgba(0, 0, 0, 0.75);
 +
}
 +
 +
.carousel-caption h4,
 +
.carousel-caption p {
 +
  line-height: 20px;
 +
  color: #ffffff;
 +
}
 +
 +
.carousel-caption h4 {
 +
  margin: 0 0 5px;
 +
}
 +
 +
.carousel-caption p {
 +
  margin-bottom: 0;
 +
}
 +
 +
 +
.curs1
 +
  {
 +
  font-size: 60px;
 +
  font-family: cursive;
 +
  border: none;
 +
  padding-bottom: 0px;
 +
  margin-bottom: 0px;
 +
  }
 +
 +
.curs2
 +
  {
 +
  font-size: 30px;
 +
  font-family: cursive;
 +
  border: none;
 +
  }
</style>
</style>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
 
-
<style type="text/css">
+
 
-
/* These styles just pretty up the page a bit. */
+
 
-
html
+
 
-
{
+
<!-- PART II: NAVIGATION MENU -->
-
overflow: -moz-scrollbars-vertical !important;
+
 
-
resize: none;
+
<style>
-
background: url(https://static.igem.org/mediawiki/2012/d/da/Fondo1.png) repeat;
+
 
-
background-color: #fff;
+
.logoLink {
 +
  position:absolute;  
 +
  width:100%;
 +
  height:100%;
 +
  top:0;
 +
  left: 0;
 +
}
 +
.container,
 +
.navbar-static-top .container,
 +
.navbar-fixed-top .container,
 +
.navbar-fixed-bottom .container {
 +
  width: 940px;
}
}
-
#top-section {
+
.span12 {
-
height: 0px;
+
  width: 940px;
-
border-top: 1
+
-
border-left: none;
+
-
border-right: none;
+
}
}
-
#siteSub {
+
.span11 {
-
display:none;
+
  width: 60%;
 +
  margin: auto;
}
}
-
#search-controls {
+
.span10 {
-
display:none;
+
  width: 780px;
}
}
-
.firstHeading {
+
.span9 {
-
display:none;
+
  width: 700px;
}
}
-
#search-controls {
+
.span8 {
-
margin-top:0px;
+
  width: 620px;
}
}
-
#footer-box {
+
.span7 {
-
display:none;
+
  width: 540px;
}
}
-
body
+
.span6 {
-
{
+
  width: 460px;
-
background: url(https://static.igem.org/mediawiki/2012/d/da/Fondo1.png) repeat;
+
-
background-color: #fff;
+
}
}
-
body {
+
.span5 {
-
  font: 65%/1.2 Arial, Helvetica, sans-serif;
+
  width: 380px;
-
  background-color: #eee; }
+
}
-
#wrap {
+
-
  font-size: 1.1em;
+
-
  width: 180px;
+
-
  padding: 0px;
+
-
  margin-left: 15px;
+
-
  background-color: #fff;
+
-
  position: relative;
+
-
  height: 100%;
+
-
margin-right: 20px;
+
.span4 {
-
margin-bottom: 20px;
+
  width: 300px;
-
margin-top: 10px;
+
}
-
float: left;
+
 +
.span3 {
 +
  width: 220px;
 +
}
 +
.span2 {
 +
  width: 140px;
}
}
-
.right_box{
+
.span1 {
-
width: 730px;
+
  width: 60px;
-
margin-left: 210px;
+
}
-
margin-top: 20px;
+
-
+
 +
.offset12 {
 +
  margin-left: 980px;
}
}
-
/* These styles create the dropdown menus. */
+
.offset11 {
-
#navbar {
+
  margin-left: 900px;
-
  margin: 1600;
+
}
-
  padding: 0;
+
-
  height: 1em; }
+
-
#navbar li {
+
-
  list-style: none;
+
-
  float: left; }
+
-
#navbar li a {
+
-
  padding-left: 6px;
+
-
  padding-bottom: 4px;
+
-
  padding-right: 6px;
+
-
  padding-top: 4px;
+
-
  display: block;
+
-
  background-color: #5d9548;
+
-
  color: #fff;
+
-
  text-decoration: none; }
+
-
#navbar li ul {
+
-
  display: none;
+
-
  width: 10em; /* Width to help Opera out */
+
-
  background-color: #80ff00;}
+
-
#navbar li:hover ul, #navbar li.hover ul {
+
-
  display: block;
+
-
  position: absolute;
+
-
  background-color: #5d9549;
+
-
  margin: 0;
+
-
  padding: 0; }
+
-
#navbar li:hover li, #navbar li.hover li {
+
-
  float: none; }
+
-
#navbar li:hover li a, #navbar li.hover li a {
+
-
  background-color: #66b83d;
+
-
  border-bottom: 1px solid #fff;
+
-
  color: white; }
+
-
#navbar li li a:hover {
+
-
  background-color: #8db3ff; }
+
-
</style>
+
-
<script>
+
.offset10 {
-
// Javascript originally by Patrick Griffiths and Dan Webb.
+
  margin-left: 820px;
-
// http://htmldog.com/articles/suckerfish/dropdowns/
+
-
sfHover = function() {
+
-
  var sfEls = document.getElementById("navbar").getElementsByTagName("li");
+
-
  for (var i=0; i<sfEls.length; i++) {
+
-
      sfEls[i].onmouseover=function() {
+
-
        this.className+=" hover";
+
-
      }
+
-
      sfEls[i].onmouseout=function() {
+
-
        this.className=this.className.replace(new RegExp(" hover\\b"), "");
+
-
      }
+
-
  }
+
}
}
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
-
</script>
 
 +
.offset9 {
 +
  margin-left: 740px;
 +
}
 +
 +
.offset8 {
 +
  margin-left: 660px;
 +
}
 +
 +
.offset7 {
 +
  margin-left: 580px;
 +
}
 +
 +
.offset6 {
 +
  margin-left: 500px;
 +
}
 +
 +
.offset5 {
 +
  margin-left: 420px;
 +
}
 +
 +
.offset4 {
 +
  margin-left: 340px;
 +
}
 +
 +
.offset3 {
 +
  margin-left: 260px;
 +
}
 +
 +
.offset2 {
 +
  margin-left: 180px;
 +
}
 +
 +
.offset1 {
 +
  margin-left: 100px;
 +
}
 +
 +
 +
 +
.row-fluid {
 +
  width: 100%;
 +
  *zoom: 1;
 +
}
 +
 +
.row-fluid:before,
 +
.row-fluid:after {
 +
  display: table;
 +
  line-height: 0;
 +
  content: "";
 +
}
 +
 +
.row-fluid:after {
 +
  clear: both;
 +
}
 +
 +
.row-fluid [class*="span"] {
 +
  display: block;
 +
  float: left;
 +
  width: 100%;
 +
  min-height: 30px;
 +
  margin-left: 2.127659574468085%;
 +
  *margin-left: 2.074468085106383%;
 +
  -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
          box-sizing: border-box;
 +
}
 +
 +
.row-fluid [class*="span"]:first-child {
 +
  margin-left: 0;
 +
}
 +
 +
.row-fluid .controls-row [class*="span"] + [class*="span"] {
 +
  margin-left: 2.127659574468085%;
 +
}
 +
 +
.row-fluid .span12 {
 +
  width: 100%;
 +
  *width: 99.94680851063829%;
 +
}
 +
 +
.row-fluid .span11 {
 +
  width: 91.48936170212765%;
 +
  *width: 91.43617021276594%;
 +
}
 +
 +
.row-fluid .span10 {
 +
  width: 82.97872340425532%;
 +
  *width: 82.92553191489361%;
 +
}
 +
 +
.row-fluid .span9 {
 +
  width: 74.46808510638297%;
 +
  *width: 74.41489361702126%;
 +
}
 +
 +
.row-fluid .span8 {
 +
  width: 65.95744680851064%;
 +
  *width: 65.90425531914893%;
 +
}
 +
 +
.row-fluid .span7 {
 +
  width: 57.44680851063829%;
 +
  *width: 57.39361702127659%;
 +
}
 +
 +
.row-fluid .span6 {
 +
  width: 48.93617021276595%;
 +
  *width: 48.88297872340425%;
 +
}
 +
 +
.row-fluid .span5 {
 +
  width: 40.42553191489362%;
 +
  *width: 40.37234042553192%;
 +
}
 +
 +
.row-fluid .span4 {
 +
  width: 31.914893617021278%;
 +
  *width: 31.861702127659576%;
 +
}
 +
 +
.row-fluid .span3 {
 +
  width: 23.404255319148934%;
 +
  *width: 23.351063829787233%;
 +
}
 +
 +
.row-fluid .span2 {
 +
  width: 14.893617021276595%;
 +
  *width: 14.840425531914894%;
 +
}
 +
 +
.row-fluid .span1 {
 +
  width: 6.382978723404255%;
 +
  *width: 6.329787234042553%;
 +
}
 +
 +
.row-fluid .offset12 {
 +
  margin-left: 104.25531914893617%;
 +
  *margin-left: 104.14893617021275%;
 +
}
 +
 +
.row-fluid .offset12:first-child {
 +
  margin-left: 102.12765957446808%;
 +
  *margin-left: 102.02127659574467%;
 +
}
 +
 +
.row-fluid .offset11 {
 +
  margin-left: 95.74468085106382%;
 +
  *margin-left: 95.6382978723404%;
 +
}
 +
 +
.row-fluid .offset11:first-child {
 +
  margin-left: 93.61702127659574%;
 +
  *margin-left: 93.51063829787232%;
 +
}
 +
 +
.row-fluid .offset10 {
 +
  margin-left: 87.23404255319149%;
 +
  *margin-left: 87.12765957446807%;
 +
}
 +
 +
.row-fluid .offset10:first-child {
 +
  margin-left: 85.1063829787234%;
 +
  *margin-left: 84.99999999999999%;
 +
}
 +
 +
.row-fluid .offset9 {
 +
  margin-left: 78.72340425531914%;
 +
  *margin-left: 78.61702127659572%;
 +
}
 +
 +
.row-fluid .offset9:first-child {
 +
  margin-left: 76.59574468085106%;
 +
  *margin-left: 76.48936170212764%;
 +
}
 +
 +
.row-fluid .offset8 {
 +
  margin-left: 70.2127659574468%;
 +
  *margin-left: 70.10638297872339%;
 +
}
 +
 +
.row-fluid .offset8:first-child {
 +
  margin-left: 68.08510638297872%;
 +
  *margin-left: 67.9787234042553%;
 +
}
 +
 +
.row-fluid .offset7 {
 +
  margin-left: 61.70212765957446%;
 +
  *margin-left: 61.59574468085106%;
 +
}
 +
 +
.row-fluid .offset7:first-child {
 +
  margin-left: 59.574468085106375%;
 +
  *margin-left: 59.46808510638297%;
 +
}
 +
 +
.row-fluid .offset6 {
 +
  margin-left: 53.191489361702125%;
 +
  *margin-left: 53.085106382978715%;
 +
}
 +
 +
.row-fluid .offset6:first-child {
 +
  margin-left: 51.063829787234035%;
 +
  *margin-left: 50.95744680851063%;
 +
}
 +
 +
.row-fluid .offset5 {
 +
  margin-left: 44.68085106382979%;
 +
  *margin-left: 44.57446808510638%;
 +
}
 +
 +
.row-fluid .offset5:first-child {
 +
  margin-left: 42.5531914893617%;
 +
  *margin-left: 42.4468085106383%;
 +
}
 +
 +
.row-fluid .offset4 {
 +
  margin-left: 36.170212765957444%;
 +
  *margin-left: 36.06382978723405%;
 +
}
 +
 +
.row-fluid .offset4:first-child {
 +
  margin-left: 34.04255319148936%;
 +
  *margin-left: 33.93617021276596%;
 +
}
 +
 +
.row-fluid .offset3 {
 +
  margin-left: 27.659574468085104%;
 +
  *margin-left: 27.5531914893617%;
 +
}
 +
 +
.row-fluid .offset3:first-child {
 +
  margin-left: 25.53191489361702%;
 +
  *margin-left: 25.425531914893618%;
 +
}
 +
 +
.row-fluid .offset2 {
 +
  margin-left: 19.148936170212764%;
 +
  *margin-left: 19.04255319148936%;
 +
}
 +
 +
.row-fluid .offset2:first-child {
 +
  margin-left: 17.02127659574468%;
 +
  *margin-left: 16.914893617021278%;
 +
}
 +
 +
.row-fluid .offset1 {
 +
  margin-left: 10.638297872340425%;
 +
  *margin-left: 10.53191489361702%;
 +
}
 +
 +
.row-fluid .offset1:first-child {
 +
  margin-left: 8.51063829787234%;
 +
  *margin-left: 8.404255319148938%;
 +
}
 +
 +
[class*="span"].hide,
 +
.row-fluid [class*="span"].hide {
 +
  display: none;
 +
}
 +
 +
[class*="span"].pull-right,
 +
.row-fluid [class*="span"].pull-right {
 +
  float: right;
 +
}
 +
 +
 +
.container-fluid {
 +
  padding-right: 20px;
 +
  padding-left: 20px;
 +
  *zoom: 1;
 +
}
 +
 +
.container-fluid:before,
 +
.container-fluid:after {
 +
  display: table;
 +
  line-height: 0;
 +
  content: "";
 +
}
 +
 +
.container-fluid:after {
 +
  clear: both;
 +
}
 +
 +
p {
 +
  margin: 0 0 10px;
 +
}
 +
 +
 +
 +
.accordion {
 +
  margin-bottom: 20px;
 +
}
 +
 +
.accordion-group {
 +
  margin-bottom: 2px;
 +
  border: 1px solid #e5e5e5;
 +
  -webkit-border-radius: 4px;
 +
    -moz-border-radius: 4px;
 +
          border-radius: 4px;
 +
}
 +
 +
.accordion-heading {
 +
  border-bottom: 0;
 +
}
 +
 +
.accordion-heading .accordion-toggle {
 +
  display: block;
 +
  padding: 8px 15px;
 +
}
 +
 +
.accordion-toggle {
 +
  cursor: pointer;
 +
}
 +
 +
.accordion-inner {
 +
  padding: 9px 15px;
 +
  border-top: 1px solid #e5e5e5;
 +
}
 +
 +
@font-face {
 +
    font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */
 +
    src: url('framd-webfont.eot?') format('eot'),  /* Define the directory where you put your fonts under src: url('') and the format of the font (e.g. TrueType) */
 +
        url('framd-webfont.woff') format('woff'),
 +
        url('framd-webfont.ttf') format('truetype'),
 +
        url('framd-webfont.svg#webfontb01Cou6J') format('svg');
 +
    font-weight: normal;
 +
    font-style: normal; /* The style of your font (e.g. italic) */
 +
}
 +
 +
a{
 +
text-decoration:none;
 +
outline:none; /* For keeping links clear of underlines or other decorations */
 +
}
 +
 +
#menu-wrap{  /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */
 +
background:none; /* This isn't needed */
 +
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
 +
        /*Added this stuff to make dynamic resize, PCR*/
 +
       
 +
 +
       
 +
 +
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */
 +
font-size:13px; /* Establishes the global font size */
 +
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
 +
 +
position: absolute;
 +
    top: 1px;
 +
    right: 80px;
 +
 +
}
 +
 +
#menu-wrap .orbit{
 +
      height: 210px;
 +
      margin: 30px; /* Pushes the images in the display to the center */     
 +
      position: absolute; 
 +
      width: 210px;
 +
}
 +
 +
#menu-wrap .orbit-frame{
 +
border:2px solid #999; /* Creates a division between the image and wrap5 */
 +
 +
}
 +
 +
/** menu links **/
 +
 +
 +
/** tester **/
 +
ul.menuBuild, ul.menuBuild ul {
 +
  width: 80px;                /* sets the size of the menu blocks */
 +
  background: rgb(0, 0, 0);
 +
/* RGBa with 0.6 opacity */
 +
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */
 +
  padding-left: 0px;          /* stops the usual indent from ul */
 +
  margin-left: 76px;            /* Opera 7 final's margin and margin-box model cause problems */
 +
}
 +
 +
ul.menuBuild li {
 +
  list-style-type: none;      /* removes the bullet points */
 +
  position: relative;
 +
  -webkit-border-radius: 4px 0 0 4px; /* webkit browsers */
 +
  -moz-border-radius: 4px 0 0 4px;  /* firefox */
 +
  border-radius: 4px 0 0 4px; /* opera */
 +
  background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */
 +
  height: 14px;
 +
  left: -177px;
 +
  padding: 8px;
 +
  margin: 6px 0 0;
 +
  width:140px;
 +
  text-indent:5px;  /* How far the text is from the left edge of the menu */     
 +
  color: #fff; /* sets the default font colour to white */
 +
}
 +
 +
ul.menuBuild ul.submenu li{
 +
background: #f2f2f2; /* old browsers */
 +
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */
 +
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/
 +
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/
 +
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */
 +
color:#464646;
 +
position:relative;
 +
left:344px; /* This is how the menu ends up on the other side of the wheel */
 +
-webkit-box-shadow: -2px 3px 12px -7px #161616;  /* webkit browsers */
 +
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */
 +
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */
 +
}
 +
 +
ul.menuBuild ul.submenu li.first{
 +
-webkit-transform:rotate(-12deg); /* webkit browsers */
 +
-moz-transform:rotate(-12deg); /* firefox */
 +
-o-transform:rotate(-12deg); /* opera */
 +
-ms-transform: rotate(-12deg); /* for IE9 and future versions */
 +
transform: rotate(-12deg); /* For older broswers */
 +
margin-left: -12px;
 +
opacity: 0.70;
 +
}
 +
 +
ul.menuBuild ul.submenu li.second{
 +
-webkit-transform:rotate(-8deg); /* webkit browsers */
 +
-moz-transform:rotate(-8deg);  /* firefox */
 +
-o-transform:rotate(-8deg);  /* opera */
 +
-ms-transform: rotate(-8deg);  /* for IE9 and future versions */
 +
transform: rotate(-8deg);  /* For older broswers */
 +
margin-left:-3px;
 +
opacity: 0.85;
 +
}
 +
 +
ul.menuBuild ul.submenu li.third{
 +
-webkit-transform:rotate(-4deg);  /* webkit browsers */
 +
-moz-transform:rotate(-4deg);  /* firefox */
 +
-o-transform:rotate(-4deg);  /* opera */
 +
-ms-transform: rotate(-4deg);  /* for IE9 and future versions */
 +
transform: rotate(-4deg);  /* For older broswers */
 +
margin-left:-1px;
 +
opacity: 0.85;
 +
}
 +
 +
ul.menuBuild ul.submenu li.fourth{
 +
-webkit-transform:rotate(0deg);  /* webkit browsers */
 +
-moz-transform:rotate(0deg);  /* firefox */
 +
-o-transform:rotate(0deg);  /* opera */
 +
-ms-transform: rotate(0deg);  /* for IE9 and future versions */
 +
transform: rotate(0deg);  /* For older broswers */
 +
margin-left:-3px;
 +
opacity: 0.85;
 +
}
 +
 +
ul.menuBuild ul.submenu li.last{
 +
-webkit-transform:rotate(3deg);  /* webkit browsers */
 +
-moz-transform:rotate(3deg);  /* firefox */
 +
-o-transform:rotate(3deg);  /* opera */
 +
-ms-transform: rotate(3deg);  /* for IE9 and future versions */
 +
transform: rotate(3deg);  /* For older broswers */
 +
margin-left:-6px;
 +
opacity: 0.70;
 +
}
 +
 +
ul.menuBuild li > ul{          /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */
 +
  display: none;        /* make child blocks hover without leaving space for them */
 +
  top: -48px;
 +
  position: absolute;
 +
    right: -86px;
 +
color:#565656;
 +
    width: 160px;
 +
-webkit-border-radius: 0 4px 4px 0; /* webkit */
 +
-moz-border-radius: 0 4px 4px 0;  /* firefox */
 +
border-radius: 0 4px 4px 0; /* opera */
 +
padding: 2px;
 +
    height: 24px; background: rgb(255, 255, 255);  /* Fallback for web browsers that don't support RGBa */
 +
background: rgba(255, 255, 255, 0.00);  /* RGBa with 0.01 opacity */
 +
}
 +
 +
/**ul.menuBuild li span{display:none;}
 +
 +
ul.menuBuild li:hover span{display:block;}**/
 +
 +
  ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{
 +
-webkit-border-radius: 4px 0 0 4px;  /* webkit */
 +
-moz-border-radius: 4px 0 0 4px;  /* firefox */
 +
border-radius: 4px 0 0 4px;  /* opera */
 +
-webkit-box-shadow:-2px 7px 8px -7px #161616;  /* webkit */
 +
-moz-box-shadow:-2px 7px 8px -7px #161616;  /* firefox */
 +
box-shadow:-16px 0 8px -7px #222222 inset;  /* opera */
 +
background: #464646; /* old browsers */
 +
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */
 +
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */
 +
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/
 +
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */
 +
      height: 18px;
 +
      padding: 8px;
 +
      position: absolute;
 +
margin-top:145px;
 +
width:138px;
 +
      margin-left:14px;
 +
 +
 +
}
 +
 +
ul.menuBuild li#menu2{
 +
-webkit-transform:rotate(20deg); /* webkit */
 +
-moz-transform:rotate(20deg);  /* firefox */
 +
-o-transform:rotate(20deg); /* opera */
 +
-ms-transform: rotate(20deg); /* ie9 and future versions */
 +
transform: rotate(20deg); /* older browsers */
 +
    margin-top: 0px;
 +
margin-left:35px;
 +
}
 +
 +
ul.menuBuild li#menu3{
 +
-webkit-transform:rotate(15deg);  /* webkit */
 +
-moz-transform:rotate(15deg); /* firefox */
 +
-o-transform:rotate(15deg); /* opera */
 +
-ms-transform: rotate(15deg); /* ie9 and future versions */
 +
transform: rotate(15deg); /* older browsers */
 +
    margin-top: 35px;
 +
margin-left:20px;
 +
}
 +
 +
ul.menuBuild li#menu4{
 +
-moz-transform: rotate(10deg); /* firefox */
 +
-ms-transform: rotate(10deg); /* ie9 and future versions */
 +
transform: rotate(10deg); /* older browsers */
 +
-webkit-transform: rotate(10deg); /* webkit */
 +
-o-transform: rotate(10deg); /* opera */
 +
    margin-top: 70px;
 +
margin-left:16px;
 +
}
 +
 +
ul.menuBuild li#menu5{
 +
-moz-transform: rotate(5deg); /* firefox */
 +
-ms-transform: rotate(5deg); /* ie9 and future versions */
 +
transform: rotate(5deg); /* older browsers */
 +
-webkit-transform: rotate(5deg); /* webkit */
 +
-o-transform: rotate(5deg); /* opera */
 +
    margin-top: 108px;
 +
margin-left:12px;
 +
}
 +
 +
ul.menuBuild li#menu6{
 +
-moz-transform: rotate(-6deg); /* firefox */
 +
-ms-transform: rotate(-6deg); /* ie9 and future versions */
 +
transform: rotate(-6deg); /* older browsers */
 +
-webkit-transform: rotate(-6deg); /* webkit */
 +
-o-transform: rotate(-6deg); /* opera */
 +
    margin-top: 183px;
 +
margin-left:21px;
 +
}
 +
 +
 +
 +
 +
/***********************************
 +
Here's some support for the sub-menus
 +
************************************/
 +
 +
ul.menuBuild li#menu1 > ul{
 +
margin-top:-75px;
 +
left:0px;
 +
}
 +
 +
ul.menuBuild li#menu2 > ul{
 +
-webkit-transform:rotate(10deg); /* webkit */
 +
-moz-transform:rotate(10deg); /* firefox */
 +
-o-transform:rotate(10deg); /* opera */
 +
-ms-transform: rotate(10deg); /* ie9 and future versions */
 +
transform: rotate(10deg); /* older browsers */
 +
left: 17px;
 +
    margin-top: -38px;
 +
}
 +
 +
ul.menuBuild li#menu3 > ul{
 +
-webkit-transform:rotate(21deg); /* webkit */
 +
-moz-transform:rotate(21deg); /* firefox */
 +
-o-transform:rotate(21deg); /* opera */
 +
-ms-transform: rotate(-21deg); /* ie9 and future versions */
 +
transform: rotate(-21deg); /* older browsers */
 +
left: 16px;
 +
    margin-top: -39px;
 +
}
 +
 +
ul.menuBuild li#menu4 > ul{
 +
-webkit-transform:rotate(-10deg); /* webkit */
 +
-moz-transform:rotate(-10deg); /* firefox */
 +
-o-transform:rotate(-10deg); /* opera */
 +
-ms-transform: rotate(-10deg); /* ie9 and future versions */
 +
transform: rotate(-10deg); /* older browsers */
 +
left: 0px;
 +
    margin-top: -40px;
 +
}   
 +
 +
ul.menuBuild li#menu5> ul{
 +
-webkit-transform:rotate(0deg); /* webkit */
 +
-moz-transform:rotate(0deg); /* firefox */
 +
-o-transform:rotate(0deg); /* opera */
 +
-ms-transform: rotate(0deg); /* ie9 and future versions */
 +
transform: rotate(0deg); /* older browsers */
 +
left: 0px;
 +
    margin-top: -50px;
 +
}             
 +
 +
ul.menuBuild li#menu6> ul{
 +
-webkit-transform:rotate(5deg); /* webkit */
 +
-moz-transform:rotate(5deg); /* firefox */
 +
-o-transform:rotate(5deg); /* opera */
 +
-ms-transform: rotate(5deg); /* ie9 and future versions */
 +
transform: rotate(5deg); /* older browsers */
 +
left: 0px;
 +
    margin-top: -85px;
 +
}             
 +
 +
 +
 +
 +
ul.menuBuild li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */
 +
  display: block;  /* makes the child block visible - one of the most important declarations */
 +
  position:absolute;
 +
  left:0;
 +
  width:400px;
 +
  height:200px;
 +
}
 +
 +
/**********************************************************
 +
and some link styles
 +
*********************************************************/
 +
 +
ul.menuBuild ul.submenu li a{
 +
color:#464646;  /* the color of submenu fonts */
 +
opacity:0.65;  /* This blends the font in with the background */
 +
filter:alpha(opacity=65);
 +
}
 +
 +
ul.menuBuild ul.submenu li a:hover{
 +
opacity:1.0;  /* and this brings the font opacity back to 100% */
 +
filter:alpha(opacity=100)
 +
}
 +
 +
ul.menuBuild li a {  /* for the main menu links */
 +
color: #fff;
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
ul.menuBuild li:hover > a {
 +
color: #fff;
 +
border-left:solid 5px #ff6600;  /* the indicator for when an item is hovered over */
 +
} /* do not use display: block; */
 +
 +
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */
 +
}
 +
 +
/******************************************************
 +
Now we get to the containers
 +
******************************************************/
 +
 +
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{  /* styles all of the wheel containers */
 +
-moz-border-radius: 220px;  /* firefox */
 +
-webkit-border-radius: 220px; /* webkit */
 +
border-radius: 220px;  /* opera */
 +
-moz-box-shadow: 0 0 5px 0 #262626;  /* firefox */
 +
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */
 +
box-shadow: 0 0 5px 0 #262626; /* opera */
 +
margin:0 auto;
 +
position:relative !important;  /* Do not touch unless you know what you are doing */
 +
top:20px;
 +
}
 +
 +
.nav-holder{
 +
-moz-box-shadow: none; /* Sharpens the wheel */
 +
}
 +
 +
.wrap1{
 +
background: #FFFF00; /* old browsers */
 +
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */
 +
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/
 +
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */
 +
height:394px;
 +
width:394px;
 +
}
 +
 +
.wrap2{
 +
background: #FFCC00; /* old browsers */
 +
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */
 +
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/
 +
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */
 +
height:354px;
 +
width:354px;
 +
}
 +
 +
.wrap3{
 +
background: #FF9900; /* old browsers */
 +
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */
 +
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/
 +
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */
 +
height:314px;
 +
width:314px;
 +
}
 +
 +
.wrap4{
 +
background: #FF6600; /* old browsers */
 +
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */
 +
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/
 +
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */
 +
-moz-box-shadow: 0 0 15px 2px #262626;
 +
-webkit-box-shadow: 0 0 15px 2px #262626;
 +
box-shadow: 0 0 15px 2px #262626;
 +
height:274px;
 +
width:274px;
 +
}
 +
 +
.wrap5{
 +
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */
 +
-webkit-box-shadow: 0 0 15px 5px #262626 inset;  /* webkit */
 +
box-shadow: 0 0 15px 1px #262626 inset;  /* opera */
 +
    border: 20px solid #FFD48E;  /* creates the wrap to see the image behind it */
 +
    height: 214px;
 +
    top: 10px;  /* center the element */
 +
    width: 214px;
 +
}
 +
 +
.nav-holder{
 +
background: none repeat scroll 0 0 transparent;
 +
    border-color: #222;  /***  The border declarations are used to create the final wrapper, middle see through and hides the right border to show the submenus */
 +
    border-style: solid hidden solid double;
 +
    border-width: 73px medium 73px 73px;
 +
    height: 252px;
 +
    margin: -92px;  /*  center the object on relative elements */
 +
    top: 0;
 +
    width: 324px;
 +
}
 +
 +
.completer, .completer2{ /** absolute elements to hide the border of images **/
 +
-moz-border-radius: 0 120px 0 113px;  /* firefox */
 +
-webkit-border-radius: 0 120px 0 113px; /* webkit */
 +
border-radius: 0 120px 0 113px; /* opera */
 +
    -moz-transform: rotate(-20deg); /* firefox */
 +
-webkit-transform: rotate(-21deg); /* webkit */
 +
-o-transform: rotate(-20deg); /* opera */
 +
-ms-transform: rotate(-20deg); /* ie9 and future versions */
 +
transform: rotate(-20deg); /* older browsers */
 +
    background-attachment: scroll;
 +
    background-color: #222222;
 +
    background-image: none;
 +
    background-position: 0 0;
 +
    background-repeat: repeat;
 +
    height: 131px;
 +
    position: absolute;
 +
    right: -21px;
 +
    top: -50px;
 +
    width: 130px;
 +
}
 +
 +
.completer2{
 +
-moz-transform: rotate(108deg); /* firefox */
 +
-webkit-transform: rotate(109deg); /* webkit */
 +
-o-transform: rotate(108deg); /* opera */
 +
-ms-transform: rotate(108deg); /* ie9 and future versions */
 +
transform: rotate(108deg); /* older browsers */
 +
    top: 194px;
 +
}
 +
 +
 +
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script>
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script>
-
<script type="text/javascript">
+
<script type="text/javascript">   $(document).ready(function() {
-
    $(document).ready(function() {
+
         $('#slider').s3Slider({
         $('#slider').s3Slider({
             timeOut: 5000
             timeOut: 5000
Line 271: Line 1,198:
</script>
</script>
-
<style type="text/css" media="screen">
+
 
-
#slider {
+
<style>
-
    width: 970px; /* important to be same as image width */
+
 
-
    height: 244px; /* important to be same as image height */
+
#top {
-
    position: relative; /* important */
+
 
-
overflow: hidden; /* important */
+
background:none; /* This isn't needed */
-
margin-left: -2px;
+
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
 +
font-family:Franklin Gothic Medium,Helvetica, Myriad Web Pro, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */  
 +
font-size:13px; /* Establishes the global font size */
 +
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
 +
 
 +
position: absolute;
 +
top: 0px;
 +
 
}
}
-
#sliderContent {
+
 
-
    width: 970px; /* important to be same as image width or wider */
+
 
-
    position: absolute;
+
#text {
-
top: 0;
+
 
-
margin-left: 0;
+
  width: 100%;
 +
  padding: 0px;
 +
  /*background-color:  #C68E17;*/
 +
  position: relative;
 +
  height: 100%;
 +
 
 +
  position: absolute;
 +
  top: 500px;
 +
  left:0px;
}
}
-
.sliderImage {
+
 
-
    float: left;
+
 
-
    position: relative;
+
</style>
-
display: none;
+
 
 +
 
 +
 
 +
<!--PART III: FLIPPY BUTTONS-->
 +
<style>
 +
 
 +
#iGEMLink {
 +
position: relative;
 +
top: 50%;
 +
transform: translateY(10%);
 +
 
}
}
-
.sliderImage span {
 
-
    position: absolute;
 
-
font: 10px/15px Arial, Helvetica, sans-serif;
 
-
    width: 384px;
 
-
display: none;
+
#Buttons {
-
   
+
 
 +
background:none; /* This isn't needed */
 +
height:100px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
 +
width:100%;
 +
text-align:center;
 +
position: absolute;
 +
top: 440px;
 +
left: 0px;
 +
 
}
}
-
.clear {
+
 
-
clear: both;
+
 
 +
 
 +
ul.flatflipbuttons{
 +
text-align:center;
 +
margin-left:0px;
 +
padding:0;
 +
list-style:none;
 +
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
 +
-moz-perspective: 10000px;
 +
perspective: 10000px;
 +
 
}
}
-
.sliderImage span strong {
+
 
-
    font-size: 14px;
+
ul.flatflipbuttons li{
 +
margin:200;
 +
display: inline-block;
 +
width: 50px; /* dimensions of buttons. */
 +
height: 50px;
 +
margin-right: 15px; /* spacing between buttons */
 +
background: white;
 +
text-transform: uppercase;
 +
text-align: center;
}
}
-
.top {
+
 
-
top: 0;
+
ul.flatflipbuttons li a{
-
left: 0;
+
display:table;
 +
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
 +
width: 100%;
 +
height: 100%;
 +
margin-bottom: 4px;
 +
color: black;
 +
background: #3B9DD5;
 +
text-decoration: none;
 +
outline: none;
 +
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
 +
-moz-transition:all 300ms ease-out;
 +
transition:all 300ms ease-out;
}
}
-
.bottom {
+
 
-
bottom: 0;
+
ul.flatflipbuttons li:nth-of-type(1) a{
-
    left: 0;
+
color: white;
 +
background: #3B9DD5;
}
}
-
ul { list-style-type: none;}
+
 
 +
ul.flatflipbuttons li:nth-of-type(2) a{
 +
background: #A1CD3A;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(3) a{
 +
background: #80C5EC;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(4) a{
 +
color: white;
 +
background: #635746;
 +
}
 +
 
 +
ul.flatflipbuttons li:nth-of-type(5) a{
 +
background: #F2C96D;
 +
}
 +
 
 +
ul.flatflipbuttons li a span{
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: table-cell;
 +
vertical-align: middle;
 +
align: middle;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
 +
-moz-transition: all 300ms ease-out;
 +
transition: all 300ms ease-out;
 +
}
 +
 
 +
ul.flatflipbuttons li b{ /* CSS for text beneath button */
 +
display: block;
 +
position: relative;
 +
width: 100%;
 +
opacity: 0;
 +
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
 +
-moz-transition: all 300ms ease-out 0.2s;
 +
transition: all 300ms ease-out 0.2s;
 +
}
 +
 
 +
 
 +
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
 +
border-width: 0;
 +
vertical-align: middle;
 +
}
 +
 
 +
 
 +
ul.flatflipbuttons li:hover a{
 +
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
-moz-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
background: #c1e4ec; /* bgcolor of button onMouseover*/
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 
 +
ul.flatflipbuttons li:hover a span{
 +
color: black; /* color of icon font onMouseover */
 +
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
transform: rotateY(180deg);
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 
 +
 
 +
ul.flatflipbuttons li:hover b{
 +
opacity: 1;
 +
}
 +
 
 +
/* CSS for 2nd menu below specifically */
 +
 
 +
ul.second li a{
 +
background: #eee !important;
 +
}
 +
 
 +
ul.second li a:hover{
 +
background: #ddd !important;
 +
}
 +
 
</style>
</style>
 +
 +
 +
 +
<!--  Menu-->
 +
 +
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>Wheeltz - CSS3 Navigational Wheel Menu</title>
 +
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" />
 +
<!--[if lt IE 9]>
 +
<link rel="stylesheet" href="styles/ie.css" media="screen" />
 +
<![endif]-->
 +
 +
<style>
 +
#toppicture  {
 +
    position: absolute;
 +
    left: 0px;
 +
    top: 0px;
 +
    margin: none;
 +
    border: none; 
 +
}
 +
 +
</style>
 +
 +
</head>
</head>
-
<body>
 
-
<div id="slider">
+
<!--PART IV: Text Buttons-->
-
        <ul id="sliderContent">
+
<!--CSS-->
-
            <li class="sliderImage">
+
<style>
-
                <img src="https://static.igem.org/mediawiki/2012/a/a0/SL1.png" alt="1" />
+
 
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="1" /></span>
+
.button-fill {
-
            </li>
+
  text-align: center;
-
            <li class="sliderImage">
+
  background: #ccc;
-
                <img src="https://static.igem.org/mediawiki/2012/e/ef/SL2.png" alt="2" />
+
  display: inline-block;
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="2" /></span>
+
  position: relative;
-
            </li>
+
  text-transform: uppercase;
-
            <li class="sliderImage">
+
  margin: 25px;
-
                <img src="https://static.igem.org/mediawiki/2012/7/72/SL3.png" alt="3" />
+
}
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="3" /></span>
+
.button-fill.grey {
-
            </li>
+
  background: #445561;
-
            <li class="sliderImage">
+
  color: white;
-
                <img src="https://static.igem.org/mediawiki/2012/6/6f/SL4.png" alt="4" />
+
}
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="4" /></span>
+
.button-fill.orange {
-
            </li>
+
  background: #f26b43;
-
            <li class="sliderImage">
+
  color: #fff;
-
                <img src="https://static.igem.org/mediawiki/2012/5/5d/SL5.png" alt="5" />
+
}
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="5" /></span>
+
.button-fill.orange .button-inside {
-
            </li>
+
  color: #f26b43;
-
            <li class="sliderImage">
+
}
-
                <img src="https://static.igem.org/mediawiki/2012/3/33/SL6.png" alt="6" />
+
.button-fill.orange .button-inside.full {
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="6" /></span>
+
  border: 1px solid #f26b43;
-
            </li>
+
}
-
            <li class="sliderImage">
+
.button-text {
-
                <img src="https://static.igem.org/mediawiki/2012/c/c6/SL7.png" alt="7" />
+
  padding: 0 25px;
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="7" /></span>
+
  line-height: 56px;
-
            </li>
+
  letter-spacing: .1em;
-
            <li class="sliderImage">
+
}
-
                <img src="https://static.igem.org/mediawiki/2012/1/1d/SL8.png" alt="8" />
+
.button-inside {
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="8" /></span>
+
  width: 0px;
-
            </li>
+
  height: 54px;
-
            <li class="sliderImage">
+
  margin: 0;
-
                <img src="https://static.igem.org/mediawiki/2012/9/9e/SL9.png" alt="9" />
+
  float: left;
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="9" /></span>
+
  position: absolute;
-
            </li>
+
  top: 1px;
-
            <li class="sliderImage">
+
  left: 50%;
-
                <img src="https://static.igem.org/mediawiki/2012/6/6f/SL10.png" alt="10" />
+
  line-height: 54px;
-
                <span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="10" /></span>
+
  color: #445561;
-
            </li>
+
  background: #fff;
-
            <div class="clear sliderImage"></div>
+
  text-align: center;
-
        </ul>
+
  overflow: hidden;
-
    </div>
+
  -webkit-transition: width 0.5s, left 0.5s, margin 0.5s;
-
 
+
  -moz-transition: width 0.5s, left 0.5s, margin 0.5s;
 +
  -o-transition: width 0.5s, left 0.5s, margin 0.5s;
 +
  transition: width 0.5s, left 0.5s, margin 0.5s;
 +
}
 +
.button-inside.full {
 +
  width: 100%;
 +
  left: 0%;
 +
  top: 0;
 +
  margin-right: -50px;
 +
  border: 1px solid #445561;
 +
}
 +
.inside-text {
 +
  text-align: center;
 +
  position: absolute;
 +
  right: 50%;
 +
  letter-spacing: .1em;
 +
  text-transform: uppercase;
 +
  -webkit-transform: translateX(50%);
 +
  -moz-transform: translateX(50%);
 +
  -ms-transform: translateX(50%);
 +
  transform: translateX(50%);
 +
}
 +
</style>
 +
 
 +
<!--JS-->
 +
<script src='http://assets.codepen.io/assets/libs/fullpage/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js'></script>
 +
 
 +
 
 +
<!--PAGE CODE starts here-->
 +
 
 +
<div id="toppicture">
 +
 
 +
<!--CAROUSEL-->
 +
<div id="myCarousel" class="carousel slide">
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
    <li data-target="#myCarousel" data-slide-to="1"></li>
 +
    <li data-target="#myCarousel" data-slide-to="2"></li>
 +
    <li data-target="#myCarousel" data-slide-to="3"></li>
 +
 
 +
 
 +
  </ol>
 +
 
 +
  <!-- Carousel items -->
 +
  <div class="carousel-inner">
 +
    <div class="active item"><a href="https://igem.org"><img src="https://static.igem.org/mediawiki/2014/8/8b/Colombia_Top.png" width="100%" ></a></div>
 +
    <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/c/c0/Petri.jpg" width="100%" ></a></div>
 +
    <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/6/6c/ColombiaTeam_Head2.png" width="100%"></a></div>
 +
    <div class="item"><a href=""><img src="https://static.igem.org/mediawiki/2014/e/ec/Colombia_Header3.png" width="100%" ></a></div>
 +
 
 +
 
 +
  </div>
 +
  <!-- Carousel nav -->
 +
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 +
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
 +
</div>
 +
 
 +
<!--NAVIGATION MENU-->
 +
<div id="menu-wrap">
 +
<div class="wrap1">
 +
<div class="wrap2">
 +
<div class="wrap3">
 +
<div class="wrap4">
 +
<a href="https://2014.igem.org/Team:Colombia">
 +
<span class="logoLink"></span><span><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span></a>
 +
 
 +
<div class="completer"></div>
 +
<div class="completer2"></div>
 +
<div class="wrap5">
 +
<div class="nav-holder">
 +
 
 +
<!-- start navigation menu !-->
 +
 
 +
<ul class="menuBuild">
 +
 
 +
  <li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a>
 +
 
 +
    <ul class="submenu sub1">
 +
      <li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li>
 +
      <li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li>
 +
      <li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li>
 +
      <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li>
 +
        <li class="last"><a href="https://2014.igem.org/Team:Colombia/DoItYourself">DO IT YOURSELF</a></li>
 +
    </ul>
 +
 +
  </li>
 +
 
 +
  <li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Project">Project</a>
 +
  </li>
 +
 
 +
  <li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a>   
 +
 
 +
  </li>
 +
 
 +
  <li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a>
 +
   
 +
<ul class="submenu sub4">
 +
 
 +
      <li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook">Notebook</a></li>
 +
      <li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlab">Interlab</a></li>
 +
      <li class="third"><a href="https://2014.igem.org/Team:Colombia/Protocols">Protocols</a></li>
 +
      <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li>
 +
          </ul>
 +
  </li>
 +
 
 +
 
 +
  <li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a>  
 +
 
 +
<ul class="submenu sub5">
 +
 
 +
      <li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions">Attributions</a></li>
 +
      <li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li>
 +
      <li class=third"><a href="https://igem.org/Team.cgi?id=1455">Official site</a></li>
 +
    </ul>
 +
 
 +
 
 +
  </li>
 +
 
 +
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HP">Human Practices</a> 
 +
 
 +
<ul class="submenu sub5">
 +
 
 +
      <li class="first"><a href="https://2014.igem.org/Team:Colombia/LowBudgetLab">Low Budget iGEM</a></li>
 +
      <li class="second"><a href="https://2014.igem.org/Team:Colombia/InterviewsColiGEM">Interviews</a></li>
 +
      <li class="third"><a href="https://2014.igem.org/Team:Colombia/WAIEEI">Industry & Ethics</a></li>
 +
      <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Outreach">Outreach</a></li>
 +
      <li class="last"><a href="https://2014.igem.org/Team:Colombia/Patent">Patents</a></li>
 +
    </ul>
 +
 
 +
 
 +
 +
  </li>
 +
 
 +
 
 +
 
 +
</ul>
 +
 
 +
<!-- end menu !-->
 +
 
 +
</div><!-- nav holder !-->
 +
</div><!-- wrap5 !-->
 +
</div><!-- wrap4 !-->
 +
</div><!-- wrap3 !-->
 +
</div><!-- wrap2 !-->
 +
</div><!-- wrap1 !-->
 +
</div><!-- menu-wrap !-->
 +
 
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
 +
 
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
<!-- Inferior Menu-->
 +
 
 +
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 +
 
 +
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 +
 
 +
 
 +
 
 +
 
 +
<!--NAVIGATION BUTTONS-->
 +
<div id="Buttons">
 +
<ul class="flatflipbuttons">
 +
 
 +
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
 +
<li><a href="https://2014.igem.org/Main_Page" ><img id="iGEMLink" src="https://static.igem.org/mediawiki/2014/thumb/b/b1/Iitdpage_IGEM_official_logo.png/200px-Iitdpage_IGEM_official_logo.png" width="50px" link ></img></a> <b>iGEM</b></li>
 +
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li>
 +
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li>
 +
 
 +
</ul>
 +
 
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div id="text">
 +
 
 +
 
 +
 
 +
 
 +
 
-
<div id="wrap">
 
-
     
 
-
  </div>
 
-
</body>
+
<!-- end of page -->
-
</html>
+

Latest revision as of 23:03, 17 October 2014

Wheeltz - CSS3 Navigational Wheel Menu

  • Home
  • iGEM
  • Facebook
  • Twitter

Retrieved from "http://2014.igem.org/Template:Http://2014.igem.org/Team:Colombia"