http://2013.igem.org/wiki/index.php?title=Special:Contributions/D.olivera1320&feed=atom&limit=50&target=D.olivera1320&year=&month=
2013.igem.org - User contributions [en]
2024-03-29T05:54:30Z
From 2013.igem.org
MediaWiki 1.16.5
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:28:07Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<style><br />
img {<br />
position: absolute;<br />
left: 0px;<br />
top: 0px;<br />
<br />
<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" ><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:27:21Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<style><br />
img {<br />
position: absolute;<br />
left: 0px;<br />
top: 0px;<br />
<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="420px" ><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:26:44Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<style><br />
img {<br />
position: absolute;<br />
left: 0px;<br />
top: 0px;<br />
<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1300px" height="400px" ><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:25:49Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<style><br />
img {<br />
position: absolute;<br />
left: 0px;<br />
top: 0px;<br />
z-index: -1;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1300px" height="400px" ><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:25:05Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
img {<br />
position: absolute;<br />
left: 0px;<br />
top: 0px;<br />
z-index: -1;<br />
}<br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1300px" height="400px" ><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/File:Colombiatop.png
File:Colombiatop.png
2014-08-22T17:19:12Z
<p>D.olivera1320: uploaded a new version of &quot;File:Colombiatop.png&quot;</p>
<hr />
<div></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:15:20Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1200px" height="500px" ><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/File:Colombiatop.png
File:Colombiatop.png
2014-08-22T17:14:27Z
<p>D.olivera1320: </p>
<hr />
<div></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T17:03:37Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
<br />
position: absolute;<br />
top: 1px;<br />
right: 10px;<br />
<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 30px; /* Pushes the images in the display to the center */ position: absolute; <br />
<br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img src="https://static.igem.org/mediawiki/2013/0/0c/Lab.png" width="1300px" height="600px" align:right><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T16:55:55Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/2013/0/0c/Lab.png" width="800px" height="300px" align:right><br />
<br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/File:Lab.png
File:Lab.png
2014-08-22T16:55:24Z
<p>D.olivera1320: </p>
<hr />
<div></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T16:39:54Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T16:11:03Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
margin-top: 1200px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T16:05:57Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:56:39Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<style type="text/css" media="screen"><br />
#slider {<br />
width: 970px; /* important to be same as image width */<br />
height: 244px; /* important to be same as image height */<br />
position: relative; /* important */<br />
overflow: hidden; /* important */<br />
margin-left: -2px;<br />
}<br />
#sliderContent {<br />
width: 970px; /* important to be same as image width or wider */<br />
position: absolute;<br />
top: 0;<br />
margin-left: 0;<br />
}<br />
.sliderImage {<br />
float: left;<br />
position: relative;<br />
display: none;<br />
}<br />
.sliderImage span {<br />
position: absolute;<br />
font: 10px/15px Arial, Helvetica, sans-serif;<br />
width: 384px;<br />
<br />
display: none;<br />
<br />
}<br />
.clear {<br />
clear: both;<br />
}<br />
.sliderImage span strong {<br />
font-size: 14px;<br />
}<br />
.top {<br />
top: 0;<br />
left: 0;<br />
}<br />
.bottom {<br />
bottom: 0;<br />
left: 0;<br />
}<br />
ul { list-style-type: none;}<br />
</style><br />
<br />
</head><br />
<body><br />
<br />
<div id="slider"><br />
<ul id="sliderContent"><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/a/a0/SL1.png" alt="1" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="1" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/e/ef/SL2.png" alt="2" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="2" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/7/72/SL3.png" alt="3" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="3" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/6/6f/SL4.png" alt="4" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="4" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/5/5d/SL5.png" alt="5" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="5" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/3/33/SL6.png" alt="6" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="6" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/c/c6/SL7.png" alt="7" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="7" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/1/1d/SL8.png" alt="8" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="8" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/9/9e/SL9.png" alt="9" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="9" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/6/6f/SL10.png" alt="10" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="10" /></span><br />
</li><br />
<div class="clear sliderImage"></div><br />
</ul><br />
</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:56:11Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://linacabal.com/juan/s3Slider.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function() {<br />
$('#slider').s3Slider({<br />
timeOut: 5000<br />
});<br />
});<br />
</script><br />
<br />
<style type="text/css" media="screen"><br />
#slider {<br />
width: 970px; /* important to be same as image width */<br />
height: 244px; /* important to be same as image height */<br />
position: relative; /* important */<br />
overflow: hidden; /* important */<br />
margin-left: -2px;<br />
}<br />
#sliderContent {<br />
width: 970px; /* important to be same as image width or wider */<br />
position: absolute;<br />
top: 0;<br />
margin-left: 0;<br />
}<br />
.sliderImage {<br />
float: left;<br />
position: relative;<br />
display: none;<br />
}<br />
.sliderImage span {<br />
position: absolute;<br />
font: 10px/15px Arial, Helvetica, sans-serif;<br />
width: 384px;<br />
<br />
display: none;<br />
<br />
}<br />
.clear {<br />
clear: both;<br />
}<br />
.sliderImage span strong {<br />
font-size: 14px;<br />
}<br />
.top {<br />
top: 0;<br />
left: 0;<br />
}<br />
.bottom {<br />
bottom: 0;<br />
left: 0;<br />
}<br />
ul { list-style-type: none;}<br />
</style><br />
<br />
</head><br />
<body><br />
<br />
<div id="slider"><br />
<ul id="sliderContent"><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/a/a0/SL1.png" alt="1" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="1" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/e/ef/SL2.png" alt="2" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="2" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/7/72/SL3.png" alt="3" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="3" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/6/6f/SL4.png" alt="4" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="4" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/5/5d/SL5.png" alt="5" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="5" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/3/33/SL6.png" alt="6" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="6" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/c/c6/SL7.png" alt="7" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="7" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/1/1d/SL8.png" alt="8" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="8" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/9/9e/SL9.png" alt="9" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="9" /></span><br />
</li><br />
<li class="sliderImage"><br />
<img src="https://static.igem.org/mediawiki/2012/6/6f/SL10.png" alt="10" /><br />
<span class="top"><img src="https://static.igem.org/mediawiki/2012/9/97/Logo_COL_1.png" alt="10" /></span><br />
</li><br />
<div class="clear sliderImage"></div><br />
</ul><br />
</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:53:34Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<script type="text/javascript"><br />
<br />
/**<br />
* Slimslider v1.1.0<br />
* @author Kyle Foster<br />
* MIT license<br />
*/<br />
;(function ( $, window, document, undefined ) {<br />
<br />
$.fn.slimSlider = function ( options ) {<br />
<br />
options = $.extend( {}, $.fn.slimSlider.options, options );<br />
<br />
return this.each(function () { <br />
<br />
// Define our variables<br />
var counter = 0,<br />
element = $(this),<br />
wrapper = element.children('.slides'),<br />
slide = wrapper.children('li'),<br />
slideCnt = slide.length,<br />
navLink = element.find('.slide-nav').find('li').find('a'),<br />
prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) && <br />
!/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' : <br />
(/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :<br />
(/msie/.test(navigator.userAgent.toLowerCase())) ? '-ms-' :<br />
(/opera/.test(navigator.userAgent.toLowerCase())) ? '-o-' : '';<br />
<br />
// Add active class to first nav link<br />
navLink.first().addClass('active'); <br />
<br />
// Auto play function (if selected options)<br />
if ( options.autoPlay === true ) { <br />
<br />
// Define slideshow variable<br />
var slideShow;<br />
<br />
// Define play function<br />
function play() {<br />
<br />
// Don't execute after click function <br />
if ( !wrapper.is('.stopped') ) {<br />
<br />
// Slideshow function<br />
slideShow = setTimeout(function() {<br />
<br />
// Slideshow iterator<br />
if (counter < slideCnt - 1) { counter++; } <br />
else { counter = 0; }; <br />
<br />
// Stop browser 'catch up' when switching tabs<br />
wrapper.stop(true,true);<br />
<br />
// Fire animation function<br />
animate();<br />
<br />
// Loop our slideshow<br />
play();<br />
}, options.autoDelay );<br />
};<br />
};<br />
<br />
// Instantiate our play function<br />
play();<br />
<br />
// Define our pause function<br />
function pause() { clearTimeout(slideShow); };<br />
<br />
// Pause on hover (if selected)<br />
if ( options.hoverPause === true ) {<br />
wrapper.on({<br />
mouseenter: function() { pause(); }, <br />
mouseleave: function() { play(); }<br />
});<br />
};<br />
}; <br />
<br />
// Navigation click function<br />
navLink.on('click', function(e) {<br />
<br />
// Stop auto play (if instantiated)<br />
pause();<br />
<br />
// Add a class to keep animation stopped<br />
wrapper.addClass('stopped');<br />
<br />
// Set counter to new slide position<br />
counter = $(this).parent().index();<br />
<br />
// Fire animation function<br />
animate();<br />
<br />
// Prevent default click action<br />
e.preventDefault();<br />
}); <br />
<br />
// Define our animation function<br />
function animate() {<br />
<br />
// Iterate through our navigation links<br />
navLink.each(function() {<br />
<br />
// Cache 'this'<br />
var currentLink = $(this); <br />
<br />
// Move to counter's position<br />
if ( counter === currentLink.parent().index() ) {<br />
navLink.removeClass('active'); // Clear 'active' class<br />
currentLink.addClass('active'); // And add to selected link<br />
}<br />
});<br />
<br />
// Animation<br />
wrapper<br />
.css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition<br />
.css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate<br />
.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { <br />
wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes<br />
});<br />
}; <br />
<br />
// Define debulked onresize handler<br />
function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c }; <br />
<br />
// Instantiate resize function <br />
on_resize(function() {<br />
<br />
// Cache our slider width<br />
var newWidth = element.width(); <br />
<br />
// Set wrapper width & reposition<br />
wrapper<br />
.css({ 'width' : newWidth * slideCnt })<br />
.css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' ); <br />
<br />
// Set slide width<br />
slide.css({ 'width' : newWidth }); <br />
})(); <br />
});<br />
};<br />
<br />
// Overridable default options<br />
$.fn.slimSlider.options = {<br />
animSpeed : '0.5s', // animation speed<br />
autoPlay : true, // auto play option<br />
autoDelay : 4000, // auto play duration<br />
hoverPause : true // auto play pause on hover <br />
};<br />
<br />
})( jQuery, window, document );<br />
<br />
// Instantiate Slimslider<br />
$('.slider').slimSlider();<br />
<br />
</script><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<style><br />
<br />
/* Webfont link */<br />
@import url(http://fonts.googleapis.com/css?family=Unica+One);<br />
<br />
/* Plugin base styles */<br />
<br />
.slider { <br />
position: relative;<br />
width: 100%; <br />
overflow: hidden; <br />
}<br />
<br />
.slides { <br />
position: relative;<br />
padding: 0;<br />
list-style: none;<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
-webkit-backface-visibility: hidden;<br />
-webkit-transform: translate3d(0,0,0);<br />
}<br />
<br />
.slides li { <br />
display: inline-block; <br />
-webkit-backface-visibility: hidden;<br />
}<br />
<br />
.slides li img { <br />
width: 100%; <br />
height: auto;<br />
}<br />
<br />
/* Non-plugin styles */<br />
<br />
* { <br />
margin: 0; <br />
padding: 0; <br />
}<br />
<br />
body { <br />
position: relative;<br />
width: 90%;<br />
max-width: 600px; <br />
margin: 0 auto; <br />
font-family: 'Unica One', sans-serif;<br />
}<br />
<br />
.slide-nav { <br />
position: absolute; <br />
bottom: 20px;<br />
right: 20px;<br />
z-index: 1;<br />
}<br />
<br />
.slide-nav ul {<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
}<br />
<br />
.slide-nav li { display: inline-block; }<br />
<br />
.slide-nav li a {<br />
display: block;<br />
color: #444;<br />
background: #FFF;<br />
text-decoration: none;<br />
border-radius: 50%;<br />
width: 26px;<br />
height: 26px;<br />
line-height: 26px;<br />
font-size: 12px;<br />
text-align: center;<br />
margin: 0 0 0 6px;<br />
}<br />
<br />
.slide-nav li a.active { color: #DEBB1E; }<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<section class="slider"><br />
<br />
<nav class="slide-nav"><br />
<ul><br />
<li><a href="#">01</a></li><br />
<li><a href="#">02</a></li><br />
<li><a href="#">03</a></li><br />
<li><a href="#">04</a></li><br />
<li><a href="#">05</a></li><br />
<li><a href="#">06</a></li><br />
</ul><br />
</nav><br />
<br />
<ul class="slides"><br />
<li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> <br />
<li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li><br />
<li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li><br />
<li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li><br />
<li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li><br />
<li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li><br />
</ul> <br />
<br />
</section><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:52:31Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<br />
/**<br />
* Slimslider v1.1.0<br />
* @author Kyle Foster<br />
* MIT license<br />
*/<br />
;(function ( $, window, document, undefined ) {<br />
<br />
$.fn.slimSlider = function ( options ) {<br />
<br />
options = $.extend( {}, $.fn.slimSlider.options, options );<br />
<br />
return this.each(function () { <br />
<br />
// Define our variables<br />
var counter = 0,<br />
element = $(this),<br />
wrapper = element.children('.slides'),<br />
slide = wrapper.children('li'),<br />
slideCnt = slide.length,<br />
navLink = element.find('.slide-nav').find('li').find('a'),<br />
prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) && <br />
!/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' : <br />
(/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :<br />
(/msie/.test(navigator.userAgent.toLowerCase())) ? '-ms-' :<br />
(/opera/.test(navigator.userAgent.toLowerCase())) ? '-o-' : '';<br />
<br />
// Add active class to first nav link<br />
navLink.first().addClass('active'); <br />
<br />
// Auto play function (if selected options)<br />
if ( options.autoPlay === true ) { <br />
<br />
// Define slideshow variable<br />
var slideShow;<br />
<br />
// Define play function<br />
function play() {<br />
<br />
// Don't execute after click function <br />
if ( !wrapper.is('.stopped') ) {<br />
<br />
// Slideshow function<br />
slideShow = setTimeout(function() {<br />
<br />
// Slideshow iterator<br />
if (counter < slideCnt - 1) { counter++; } <br />
else { counter = 0; }; <br />
<br />
// Stop browser 'catch up' when switching tabs<br />
wrapper.stop(true,true);<br />
<br />
// Fire animation function<br />
animate();<br />
<br />
// Loop our slideshow<br />
play();<br />
}, options.autoDelay );<br />
};<br />
};<br />
<br />
// Instantiate our play function<br />
play();<br />
<br />
// Define our pause function<br />
function pause() { clearTimeout(slideShow); };<br />
<br />
// Pause on hover (if selected)<br />
if ( options.hoverPause === true ) {<br />
wrapper.on({<br />
mouseenter: function() { pause(); }, <br />
mouseleave: function() { play(); }<br />
});<br />
};<br />
}; <br />
<br />
// Navigation click function<br />
navLink.on('click', function(e) {<br />
<br />
// Stop auto play (if instantiated)<br />
pause();<br />
<br />
// Add a class to keep animation stopped<br />
wrapper.addClass('stopped');<br />
<br />
// Set counter to new slide position<br />
counter = $(this).parent().index();<br />
<br />
// Fire animation function<br />
animate();<br />
<br />
// Prevent default click action<br />
e.preventDefault();<br />
}); <br />
<br />
// Define our animation function<br />
function animate() {<br />
<br />
// Iterate through our navigation links<br />
navLink.each(function() {<br />
<br />
// Cache 'this'<br />
var currentLink = $(this); <br />
<br />
// Move to counter's position<br />
if ( counter === currentLink.parent().index() ) {<br />
navLink.removeClass('active'); // Clear 'active' class<br />
currentLink.addClass('active'); // And add to selected link<br />
}<br />
});<br />
<br />
// Animation<br />
wrapper<br />
.css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition<br />
.css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate<br />
.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { <br />
wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes<br />
});<br />
}; <br />
<br />
// Define debulked onresize handler<br />
function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c }; <br />
<br />
// Instantiate resize function <br />
on_resize(function() {<br />
<br />
// Cache our slider width<br />
var newWidth = element.width(); <br />
<br />
// Set wrapper width & reposition<br />
wrapper<br />
.css({ 'width' : newWidth * slideCnt })<br />
.css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' ); <br />
<br />
// Set slide width<br />
slide.css({ 'width' : newWidth }); <br />
})(); <br />
});<br />
};<br />
<br />
// Overridable default options<br />
$.fn.slimSlider.options = {<br />
animSpeed : '0.5s', // animation speed<br />
autoPlay : true, // auto play option<br />
autoDelay : 4000, // auto play duration<br />
hoverPause : true // auto play pause on hover <br />
};<br />
<br />
})( jQuery, window, document );<br />
<br />
// Instantiate Slimslider<br />
$('.slider').slimSlider();<br />
<br />
<br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<style><br />
<br />
/* Webfont link */<br />
@import url(http://fonts.googleapis.com/css?family=Unica+One);<br />
<br />
/* Plugin base styles */<br />
<br />
.slider { <br />
position: relative;<br />
width: 100%; <br />
overflow: hidden; <br />
}<br />
<br />
.slides { <br />
position: relative;<br />
padding: 0;<br />
list-style: none;<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
-webkit-backface-visibility: hidden;<br />
-webkit-transform: translate3d(0,0,0);<br />
}<br />
<br />
.slides li { <br />
display: inline-block; <br />
-webkit-backface-visibility: hidden;<br />
}<br />
<br />
.slides li img { <br />
width: 100%; <br />
height: auto;<br />
}<br />
<br />
/* Non-plugin styles */<br />
<br />
* { <br />
margin: 0; <br />
padding: 0; <br />
}<br />
<br />
body { <br />
position: relative;<br />
width: 90%;<br />
max-width: 600px; <br />
margin: 0 auto; <br />
font-family: 'Unica One', sans-serif;<br />
}<br />
<br />
.slide-nav { <br />
position: absolute; <br />
bottom: 20px;<br />
right: 20px;<br />
z-index: 1;<br />
}<br />
<br />
.slide-nav ul {<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
}<br />
<br />
.slide-nav li { display: inline-block; }<br />
<br />
.slide-nav li a {<br />
display: block;<br />
color: #444;<br />
background: #FFF;<br />
text-decoration: none;<br />
border-radius: 50%;<br />
width: 26px;<br />
height: 26px;<br />
line-height: 26px;<br />
font-size: 12px;<br />
text-align: center;<br />
margin: 0 0 0 6px;<br />
}<br />
<br />
.slide-nav li a.active { color: #DEBB1E; }<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<section class="slider"><br />
<br />
<nav class="slide-nav"><br />
<ul><br />
<li><a href="#">01</a></li><br />
<li><a href="#">02</a></li><br />
<li><a href="#">03</a></li><br />
<li><a href="#">04</a></li><br />
<li><a href="#">05</a></li><br />
<li><a href="#">06</a></li><br />
</ul><br />
</nav><br />
<br />
<ul class="slides"><br />
<li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> <br />
<li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li><br />
<li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li><br />
<li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li><br />
<li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li><br />
<li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li><br />
</ul> <br />
<br />
</section><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:51:02Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<script><br />
<br />
/**<br />
* Slimslider v1.1.0<br />
* @author Kyle Foster<br />
* MIT license<br />
*/<br />
;(function ( $, window, document, undefined ) {<br />
<br />
$.fn.slimSlider = function ( options ) {<br />
<br />
options = $.extend( {}, $.fn.slimSlider.options, options );<br />
<br />
return this.each(function () { <br />
<br />
// Define our variables<br />
var counter = 0,<br />
element = $(this),<br />
wrapper = element.children('.slides'),<br />
slide = wrapper.children('li'),<br />
slideCnt = slide.length,<br />
navLink = element.find('.slide-nav').find('li').find('a'),<br />
prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) && <br />
!/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' : <br />
(/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :<br />
(/msie/.test(navigator.userAgent.toLowerCase())) ? '-ms-' :<br />
(/opera/.test(navigator.userAgent.toLowerCase())) ? '-o-' : '';<br />
<br />
// Add active class to first nav link<br />
navLink.first().addClass('active'); <br />
<br />
// Auto play function (if selected options)<br />
if ( options.autoPlay === true ) { <br />
<br />
// Define slideshow variable<br />
var slideShow;<br />
<br />
// Define play function<br />
function play() {<br />
<br />
// Don't execute after click function <br />
if ( !wrapper.is('.stopped') ) {<br />
<br />
// Slideshow function<br />
slideShow = setTimeout(function() {<br />
<br />
// Slideshow iterator<br />
if (counter < slideCnt - 1) { counter++; } <br />
else { counter = 0; }; <br />
<br />
// Stop browser 'catch up' when switching tabs<br />
wrapper.stop(true,true);<br />
<br />
// Fire animation function<br />
animate();<br />
<br />
// Loop our slideshow<br />
play();<br />
}, options.autoDelay );<br />
};<br />
};<br />
<br />
// Instantiate our play function<br />
play();<br />
<br />
// Define our pause function<br />
function pause() { clearTimeout(slideShow); };<br />
<br />
// Pause on hover (if selected)<br />
if ( options.hoverPause === true ) {<br />
wrapper.on({<br />
mouseenter: function() { pause(); }, <br />
mouseleave: function() { play(); }<br />
});<br />
};<br />
}; <br />
<br />
// Navigation click function<br />
navLink.on('click', function(e) {<br />
<br />
// Stop auto play (if instantiated)<br />
pause();<br />
<br />
// Add a class to keep animation stopped<br />
wrapper.addClass('stopped');<br />
<br />
// Set counter to new slide position<br />
counter = $(this).parent().index();<br />
<br />
// Fire animation function<br />
animate();<br />
<br />
// Prevent default click action<br />
e.preventDefault();<br />
}); <br />
<br />
// Define our animation function<br />
function animate() {<br />
<br />
// Iterate through our navigation links<br />
navLink.each(function() {<br />
<br />
// Cache 'this'<br />
var currentLink = $(this); <br />
<br />
// Move to counter's position<br />
if ( counter === currentLink.parent().index() ) {<br />
navLink.removeClass('active'); // Clear 'active' class<br />
currentLink.addClass('active'); // And add to selected link<br />
}<br />
});<br />
<br />
// Animation<br />
wrapper<br />
.css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition<br />
.css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate<br />
.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() { <br />
wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes<br />
});<br />
}; <br />
<br />
// Define debulked onresize handler<br />
function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c }; <br />
<br />
// Instantiate resize function <br />
on_resize(function() {<br />
<br />
// Cache our slider width<br />
var newWidth = element.width(); <br />
<br />
// Set wrapper width & reposition<br />
wrapper<br />
.css({ 'width' : newWidth * slideCnt })<br />
.css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' ); <br />
<br />
// Set slide width<br />
slide.css({ 'width' : newWidth }); <br />
})(); <br />
});<br />
};<br />
<br />
// Overridable default options<br />
$.fn.slimSlider.options = {<br />
animSpeed : '0.5s', // animation speed<br />
autoPlay : true, // auto play option<br />
autoDelay : 4000, // auto play duration<br />
hoverPause : true // auto play pause on hover <br />
};<br />
<br />
})( jQuery, window, document );<br />
<br />
// Instantiate Slimslider<br />
$('.slider').slimSlider();<br />
<br />
</script><br />
<br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<style><br />
<br />
/* Webfont link */<br />
@import url(http://fonts.googleapis.com/css?family=Unica+One);<br />
<br />
/* Plugin base styles */<br />
<br />
.slider { <br />
position: relative;<br />
width: 100%; <br />
overflow: hidden; <br />
}<br />
<br />
.slides { <br />
position: relative;<br />
padding: 0;<br />
list-style: none;<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
-webkit-backface-visibility: hidden;<br />
-webkit-transform: translate3d(0,0,0);<br />
}<br />
<br />
.slides li { <br />
display: inline-block; <br />
-webkit-backface-visibility: hidden;<br />
}<br />
<br />
.slides li img { <br />
width: 100%; <br />
height: auto;<br />
}<br />
<br />
/* Non-plugin styles */<br />
<br />
* { <br />
margin: 0; <br />
padding: 0; <br />
}<br />
<br />
body { <br />
position: relative;<br />
width: 90%;<br />
max-width: 600px; <br />
margin: 0 auto; <br />
font-family: 'Unica One', sans-serif;<br />
}<br />
<br />
.slide-nav { <br />
position: absolute; <br />
bottom: 20px;<br />
right: 20px;<br />
z-index: 1;<br />
}<br />
<br />
.slide-nav ul {<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
}<br />
<br />
.slide-nav li { display: inline-block; }<br />
<br />
.slide-nav li a {<br />
display: block;<br />
color: #444;<br />
background: #FFF;<br />
text-decoration: none;<br />
border-radius: 50%;<br />
width: 26px;<br />
height: 26px;<br />
line-height: 26px;<br />
font-size: 12px;<br />
text-align: center;<br />
margin: 0 0 0 6px;<br />
}<br />
<br />
.slide-nav li a.active { color: #DEBB1E; }<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<section class="slider"><br />
<br />
<nav class="slide-nav"><br />
<ul><br />
<li><a href="#">01</a></li><br />
<li><a href="#">02</a></li><br />
<li><a href="#">03</a></li><br />
<li><a href="#">04</a></li><br />
<li><a href="#">05</a></li><br />
<li><a href="#">06</a></li><br />
</ul><br />
</nav><br />
<br />
<ul class="slides"><br />
<li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> <br />
<li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li><br />
<li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li><br />
<li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li><br />
<li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li><br />
<li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li><br />
</ul> <br />
<br />
</section><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:48:47Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<style><br />
<br />
/* Webfont link */<br />
@import url(http://fonts.googleapis.com/css?family=Unica+One);<br />
<br />
/* Plugin base styles */<br />
<br />
.slider { <br />
position: relative;<br />
width: 100%; <br />
overflow: hidden; <br />
}<br />
<br />
.slides { <br />
position: relative;<br />
padding: 0;<br />
list-style: none;<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
-webkit-backface-visibility: hidden;<br />
-webkit-transform: translate3d(0,0,0);<br />
}<br />
<br />
.slides li { <br />
display: inline-block; <br />
-webkit-backface-visibility: hidden;<br />
}<br />
<br />
.slides li img { <br />
width: 100%; <br />
height: auto;<br />
}<br />
<br />
/* Non-plugin styles */<br />
<br />
* { <br />
margin: 0; <br />
padding: 0; <br />
}<br />
<br />
body { <br />
position: relative;<br />
width: 90%;<br />
max-width: 600px; <br />
margin: 0 auto; <br />
font-family: 'Unica One', sans-serif;<br />
}<br />
<br />
.slide-nav { <br />
position: absolute; <br />
bottom: 20px;<br />
right: 20px;<br />
z-index: 1;<br />
}<br />
<br />
.slide-nav ul {<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
}<br />
<br />
.slide-nav li { display: inline-block; }<br />
<br />
.slide-nav li a {<br />
display: block;<br />
color: #444;<br />
background: #FFF;<br />
text-decoration: none;<br />
border-radius: 50%;<br />
width: 26px;<br />
height: 26px;<br />
line-height: 26px;<br />
font-size: 12px;<br />
text-align: center;<br />
margin: 0 0 0 6px;<br />
}<br />
<br />
.slide-nav li a.active { color: #DEBB1E; }<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<section class="slider"><br />
<br />
<nav class="slide-nav"><br />
<ul><br />
<li><a href="#">01</a></li><br />
<li><a href="#">02</a></li><br />
<li><a href="#">03</a></li><br />
<li><a href="#">04</a></li><br />
<li><a href="#">05</a></li><br />
<li><a href="#">06</a></li><br />
</ul><br />
</nav><br />
<br />
<ul class="slides"><br />
<li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> <br />
<li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li><br />
<li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li><br />
<li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li><br />
<li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li><br />
<li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li><br />
</ul> <br />
<br />
</section><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:48:08Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
/* Webfont link */<br />
@import url(http://fonts.googleapis.com/css?family=Unica+One);<br />
<br />
/* Plugin base styles */<br />
<br />
.slider { <br />
position: relative;<br />
width: 100%; <br />
overflow: hidden; <br />
}<br />
<br />
.slides { <br />
position: relative;<br />
padding: 0;<br />
list-style: none;<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
-webkit-backface-visibility: hidden;<br />
-webkit-transform: translate3d(0,0,0);<br />
}<br />
<br />
.slides li { <br />
display: inline-block; <br />
-webkit-backface-visibility: hidden;<br />
}<br />
<br />
.slides li img { <br />
width: 100%; <br />
height: auto;<br />
}<br />
<br />
/* Non-plugin styles */<br />
<br />
* { <br />
margin: 0; <br />
padding: 0; <br />
}<br />
<br />
body { <br />
position: relative;<br />
width: 90%;<br />
max-width: 600px; <br />
margin: 0 auto; <br />
font-family: 'Unica One', sans-serif;<br />
}<br />
<br />
.slide-nav { <br />
position: absolute; <br />
bottom: 20px;<br />
right: 20px;<br />
z-index: 1;<br />
}<br />
<br />
.slide-nav ul {<br />
letter-spacing: 0;<br />
word-spacing: 0;<br />
font-size: 0;<br />
}<br />
<br />
.slide-nav li { display: inline-block; }<br />
<br />
.slide-nav li a {<br />
display: block;<br />
color: #444;<br />
background: #FFF;<br />
text-decoration: none;<br />
border-radius: 50%;<br />
width: 26px;<br />
height: 26px;<br />
line-height: 26px;<br />
font-size: 12px;<br />
text-align: center;<br />
margin: 0 0 0 6px;<br />
}<br />
<br />
.slide-nav li a.active { color: #DEBB1E; }<br />
<br />
<br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<section class="slider"><br />
<br />
<nav class="slide-nav"><br />
<ul><br />
<li><a href="#">01</a></li><br />
<li><a href="#">02</a></li><br />
<li><a href="#">03</a></li><br />
<li><a href="#">04</a></li><br />
<li><a href="#">05</a></li><br />
<li><a href="#">06</a></li><br />
</ul><br />
</nav><br />
<br />
<ul class="slides"><br />
<li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> <br />
<li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li><br />
<li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li><br />
<li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li><br />
<li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li><br />
<li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li><br />
</ul> <br />
<br />
</section><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:10:35Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 35px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:08:08Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin-left:500px;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 10px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
</td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T15:01:12Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 10px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table style="width:1300px"><br />
<tr><br />
<td><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
</td><br />
<br />
<td><br />
<br />
<a href="https://igem.org/Main_Page"> <br />
<br />
<img <br />
<br />
src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" <br />
<br />
width="55px"></a><br />
<br />
<br />
<br />
</td><br />
<br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T14:54:39Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T14:52:52Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<style><br />
table,th,td<br />
{<br />
Background:#C68E17;<br />
}<br />
<br />
</style><br />
<br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<br />
<br />
<br />
<table width="1500px" align="center" ><br />
<br />
<tr><br />
<br />
<th><br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <br />
<br />
</th><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</th><br />
<th>Lastname</th> <br />
<th>Points</th><br />
</tr><br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T14:46:39Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center" background: #C68E17><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T14:42:38Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Inferior Menu--><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
<br />
<!-- Navigation Menu --><br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start navigation menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T14:40:06Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-22T14:38:23Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-55px; <br />
left:0px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -50px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:43:06Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(0deg); /* webkit browsers */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* for IE9 and future versions */<br />
transform: rotate(0deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:34:45Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-8deg); /* webkit browsers */<br />
-moz-transform:rotate(-8deg); /* firefox */<br />
-o-transform:rotate(-8deg); /* opera */<br />
-ms-transform: rotate(-8deg); /* for IE9 and future versions */<br />
transform: rotate(-8deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(-4deg); /* webkit browsers */<br />
-moz-transform:rotate(-4deg); /* firefox */<br />
-o-transform:rotate(-4deg); /* opera */<br />
-ms-transform: rotate(-4deg); /* for IE9 and future versions */<br />
transform: rotate(-4deg); /* For older broswers */<br />
margin-left:-1px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:24:06Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:22:10Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(0deg); /* webkit */<br />
-moz-transform:rotate(0deg); /* firefox */<br />
-o-transform:rotate(0deg); /* opera */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
left: 0px;<br />
margin-top: -75px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:14:08Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
<br />
<ul class="submenu sub1"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a><br />
<br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
<br />
<ul class="submenu sub5"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
<br />
<br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:09:56Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Modelling</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Modelling">Parts</a> <br />
<br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Wet Lab</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Team</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:07:53Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a> <br />
<br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
<br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Parts</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Wet Lab</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:05:58Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 183px; <br />
margin-left:21px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T23:00:22Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-6deg); /* firefox */<br />
-ms-transform: rotate(-6deg); /* ie9 and future versions */<br />
transform: rotate(-6deg); /* older browsers */<br />
-webkit-transform: rotate(-6deg); /* webkit */<br />
-o-transform: rotate(-6deg); /* opera */<br />
margin-top: 185px; <br />
margin-left:25px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:55:25Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-10deg); /* firefox */<br />
-ms-transform: rotate(-10deg); /* ie9 and future versions */<br />
transform: rotate(-10deg); /* older browsers */<br />
-webkit-transform: rotate(-10deg); /* webkit */<br />
-o-transform: rotate(-10deg); /* opera */<br />
margin-top: 175px; <br />
margin-left:12px;<br />
}<br />
<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:47:06Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6, ul.menuBuild li#menu7, ul.menuBuild li#menu8{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-10deg); /* firefox */<br />
-ms-transform: rotate(-10deg); /* ie9 and future versions */<br />
transform: rotate(-10deg); /* older browsers */<br />
-webkit-transform: rotate(-10deg); /* webkit */<br />
-o-transform: rotate(-10deg); /* opera */<br />
margin-top: 175px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu7{<br />
-moz-transform: rotate(-15deg); /* firefox */<br />
-ms-transform: rotate(-15deg); /* ie9 and future versions */<br />
transform: rotate(-15deg); /* older browsers */<br />
-webkit-transform: rotate(-15deg); /* webkit */<br />
-o-transform: rotate(-15deg); /* opera */<br />
margin-top: 200px; <br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu8{<br />
-moz-transform: rotate(-25deg); /* firefox */<br />
-ms-transform: rotate(-25deg); /* ie9 and future versions */<br />
transform: rotate(-25deg); /* older browsers */<br />
-webkit-transform: rotate(-25deg); /* webkit */<br />
-o-transform: rotate(-25deg); /* opera */<br />
margin-top: 240px; <br />
margin-left:35px;<br />
}<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
ul.menuBuild li#menu7> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu8> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu7"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu8"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:46:25Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6, ul.menuBuild li#menu7, ul.menuBuild li#menu8{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-10deg); /* firefox */<br />
-ms-transform: rotate(-10deg); /* ie9 and future versions */<br />
transform: rotate(-10deg); /* older browsers */<br />
-webkit-transform: rotate(-10deg); /* webkit */<br />
-o-transform: rotate(-10deg); /* opera */<br />
margin-top: 168px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu7{<br />
-moz-transform: rotate(-15deg); /* firefox */<br />
-ms-transform: rotate(-15deg); /* ie9 and future versions */<br />
transform: rotate(-15deg); /* older browsers */<br />
-webkit-transform: rotate(-15deg); /* webkit */<br />
-o-transform: rotate(-15deg); /* opera */<br />
margin-top: 200px; <br />
margin-left:15px;<br />
}<br />
<br />
ul.menuBuild li#menu8{<br />
-moz-transform: rotate(-25deg); /* firefox */<br />
-ms-transform: rotate(-25deg); /* ie9 and future versions */<br />
transform: rotate(-25deg); /* older browsers */<br />
-webkit-transform: rotate(-25deg); /* webkit */<br />
-o-transform: rotate(-25deg); /* opera */<br />
margin-top: 230px; <br />
margin-left:25px;<br />
}<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
ul.menuBuild li#menu7> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu8> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu7"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu8"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:44:43Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6, ul.menuBuild li#menu7, ul.menuBuild li#menu8{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu6{<br />
-moz-transform: rotate(-5deg); /* firefox */<br />
-ms-transform: rotate(-5deg); /* ie9 and future versions */<br />
transform: rotate(-5deg); /* older browsers */<br />
-webkit-transform: rotate(-5deg); /* webkit */<br />
-o-transform: rotate(-5deg); /* opera */<br />
margin-top: 168px; <br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu7{<br />
-moz-transform: rotate(-10deg); /* firefox */<br />
-ms-transform: rotate(-10deg); /* ie9 and future versions */<br />
transform: rotate(-10deg); /* older browsers */<br />
-webkit-transform: rotate(-10deg); /* webkit */<br />
-o-transform: rotate(-10deg); /* opera */<br />
margin-top: 200px; <br />
margin-left:9px;<br />
}<br />
<br />
ul.menuBuild li#menu8{<br />
-moz-transform: rotate(-15deg); /* firefox */<br />
-ms-transform: rotate(-15deg); /* ie9 and future versions */<br />
transform: rotate(-15deg); /* older browsers */<br />
-webkit-transform: rotate(-15deg); /* webkit */<br />
-o-transform: rotate(-15deg); /* opera */<br />
margin-top: 230px; <br />
margin-left:12px;<br />
}<br />
<br />
<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu6> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
ul.menuBuild li#menu7> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
ul.menuBuild li#menu8> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
<br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu6"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu7"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
<li id="menu8"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:40:24Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 70px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 108px; <br />
margin-left:12px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:37:12Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(10deg); /* firefox */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
-webkit-transform: rotate(10deg); /* webkit */<br />
-o-transform: rotate(10deg); /* opera */<br />
margin-top: 75px; <br />
margin-left:16px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:35:43Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 0px; <br />
margin-left:35px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:20px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(0deg); /* firefox */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
-webkit-transform: rotate(0deg); /* webkit */<br />
-o-transform: rotate(0deg); /* opera */<br />
margin-top: 160px; <br />
margin-left:14px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:28:05Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(20deg); /* webkit */<br />
-moz-transform:rotate(20deg); /* firefox */<br />
-o-transform:rotate(20deg); /* opera */<br />
-ms-transform: rotate(20deg); /* ie9 and future versions */<br />
transform: rotate(20deg); /* older browsers */<br />
margin-top: 10px; <br />
margin-left:8px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px;<br />
margin-left:9px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(0deg); /* firefox */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
-webkit-transform: rotate(0deg); /* webkit */<br />
-o-transform: rotate(0deg); /* opera */<br />
margin-top: 160px; <br />
margin-left:14px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:26:53Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px; <br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(11deg); /* webkit */<br />
-moz-transform:rotate(11deg); /* firefox */<br />
-o-transform:rotate(11deg); /* opera */<br />
-ms-transform: rotate(11deg); /* ie9 and future versions */<br />
transform: rotate(11deg); /* older browsers */<br />
margin-top: 75px;<br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(0deg); /* firefox */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
-webkit-transform: rotate(0deg); /* webkit */<br />
-o-transform: rotate(0deg); /* opera */<br />
margin-top: 160px; <br />
margin-left:14px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T22:26:07Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:145px; <br />
width:138px;<br />
margin-left:14px;<br />
<br />
<br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px; <br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(11deg); /* webkit */<br />
-moz-transform:rotate(11deg); /* firefox */<br />
-o-transform:rotate(11deg); /* opera */<br />
-ms-transform: rotate(11deg); /* ie9 and future versions */<br />
transform: rotate(11deg); /* older browsers */<br />
margin-top: 75px;<br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(0deg); /* firefox */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
-webkit-transform: rotate(0deg); /* webkit */<br />
-o-transform: rotate(0deg); /* opera */<br />
margin-top: 145px; <br />
margin-left:14px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T20:53:52Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 8px;<br />
position: absolute; <br />
margin-top:17px; <br />
width:138px; <br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px; <br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(11deg); /* webkit */<br />
-moz-transform:rotate(11deg); /* firefox */<br />
-o-transform:rotate(11deg); /* opera */<br />
-ms-transform: rotate(11deg); /* ie9 and future versions */<br />
transform: rotate(11deg); /* older browsers */<br />
margin-top: 75px;<br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(0deg); /* firefox */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
-webkit-transform: rotate(0deg); /* webkit */<br />
-o-transform: rotate(0deg); /* opera */<br />
margin-top: 145px; <br />
margin-left:14px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320
http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia
Template:Http://2014.igem.org/Team:Colombia
2014-08-21T20:53:09Z
<p>D.olivera1320: </p>
<hr />
<div><html><br />
<br />
<!-- this section changes the default wiki template to a white full width background --><br />
<br />
<style type="text/css"><br />
<br />
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear<br />
<br />
{<br />
<br />
display: none;<br />
<br />
} <br />
<br />
/*-- hides default wiki settings --*/<br />
<br />
#top-section {<br />
height: 0px;<br />
border-top: 0.5<br />
border-left: none;<br />
border-right: none;<br />
}<br />
<br />
<br />
<br />
#globalWrapper, #content { /*-- changes default wiki settings --*/<br />
width: 100%; <br />
height: 100%;<br />
border: 0px;<br />
background-color: #C68E17;<br />
margin: 0px;<br />
padding: 0px;<br />
}<br />
<br />
<br />
<br />
<br />
html, body, .wrapper { /*-- changes default wiki settings --<br />
<br />
*/<br />
width: 100%; <br />
height: 100%; <br />
background-color: #C68E17; <br />
}<br />
<br />
<br />
</style><br />
<br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"><br />
<br />
<style><br />
<br />
ul.flatflipbuttons{<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */<br />
-moz-perspective: 10000px;<br />
perspective: 10000px;<br />
}<br />
<br />
ul.flatflipbuttons li{<br />
margin:200;<br />
display: inline-block;<br />
width: 50px; /* dimensions of buttons. */<br />
height: 50px;<br />
margin-right: 15px; /* spacing between buttons */<br />
background: white;<br />
text-transform: uppercase;<br />
text-align: center;<br />
}<br />
<br />
ul.flatflipbuttons li a{<br />
display:table;<br />
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */<br />
width: 100%;<br />
height: 100%;<br />
margin-bottom: 4px;<br />
color: black;<br />
background: #3B9DD5;<br />
text-decoration: none;<br />
outline: none;<br />
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */<br />
-moz-transition:all 300ms ease-out;<br />
transition:all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(1) a{<br />
color: white;<br />
background: #3B9DD5;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(2) a{<br />
background: #A1CD3A;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(3) a{<br />
background: #80C5EC;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(4) a{<br />
color: white;<br />
background: #635746;<br />
}<br />
<br />
ul.flatflipbuttons li:nth-of-type(5) a{<br />
background: #F2C96D;<br />
}<br />
<br />
ul.flatflipbuttons li a span{<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
display: table-cell;<br />
vertical-align: middle;<br />
align: middle;<br />
width: 100%;<br />
height: 100%;<br />
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */<br />
-moz-transition: all 300ms ease-out;<br />
transition: all 300ms ease-out;<br />
}<br />
<br />
ul.flatflipbuttons li b{ /* CSS for text beneath button */<br />
display: block;<br />
position: relative;<br />
width: 100%;<br />
opacity: 0;<br />
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */<br />
-moz-transition: all 300ms ease-out 0.2s;<br />
transition: all 300ms ease-out 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */<br />
border-width: 0;<br />
vertical-align: middle;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover a{<br />
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
-moz-transform: rotateY(180deg);<br />
transform: rotateY(180deg);<br />
background: #c1e4ec; /* bgcolor of button onMouseover*/<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
ul.flatflipbuttons li:hover a span{<br />
color: black; /* color of icon font onMouseover */<br />
-webkit-transform: rotateY(180deg);<br />
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/<br />
transform: rotateY(180deg);<br />
-webkit-transition-delay: 0.2s;<br />
-moz-transition-delay: 0.2s;<br />
transition-delay: 0.2s;<br />
}<br />
<br />
<br />
ul.flatflipbuttons li:hover b{<br />
opacity: 1;<br />
}<br />
<br />
/* CSS for 2nd menu below specifically */<br />
<br />
ul.second li a{<br />
background: #eee !important;<br />
}<br />
<br />
ul.second li a:hover{<br />
background: #ddd !important;<br />
}<br />
<br />
</style><br />
<br />
/*************************************************************/<br />
/**********************Menu superior**************************/<br />
/*************************************************************/<br />
<br />
<br />
<br />
<style><br />
<br />
@font-face {<br />
font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */<br />
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) */<br />
url('framd-webfont.woff') format('woff'),<br />
url('framd-webfont.ttf') format('truetype'),<br />
url('framd-webfont.svg#webfontb01Cou6J') format('svg');<br />
font-weight: normal;<br />
font-style: normal; /* The style of your font (e.g. italic) */<br />
}<br />
<br />
body{<br />
} /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */<br />
<br />
a{ <br />
text-decoration:none; <br />
outline:none; /* For keeping links clear of underlines or other decorations */<br />
}<br />
<br />
#menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */<br />
background:none; /* This isn't needed */<br />
height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */<br />
font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ <br />
font-size:13px; /* Establishes the global font size */<br />
letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */<br />
}<br />
<br />
#menu-wrap .orbit{<br />
height: 210px;<br />
margin: 32px; /* Pushes the images in the display to the center */<br />
position: absolute; <br />
width: 210px;<br />
}<br />
<br />
#menu-wrap .orbit-frame{<br />
border:2px solid #999; /* Creates a division between the image and wrap5 */<br />
}<br />
<br />
/** menu links **/<br />
<br />
/** tester **/<br />
ul.menuBuild, ul.menuBuild ul {<br />
width: 80px; /* sets the size of the menu blocks */<br />
background: rgb(0, 0, 0);<br />
/* RGBa with 0.6 opacity */<br />
background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */<br />
padding-left: 0px; /* stops the usual indent from ul */<br />
margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */<br />
}<br />
<br />
ul.menuBuild li {<br />
list-style-type: none; /* removes the bullet points */<br />
position: relative;<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit browsers */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */<br />
height: 14px;<br />
left: -177px;<br />
padding: 8px; <br />
margin: 6px 0 0;<br />
width:140px; <br />
text-indent:5px; /* How far the text is from the left edge of the menu */ <br />
color: #fff; /* sets the default font colour to white */<br />
}<br />
<br />
ul.menuBuild ul.submenu li{<br />
background: #f2f2f2; /* old browsers */<br />
background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */<br />
background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/<br />
-pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/<br />
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */<br />
color:#464646; <br />
position:relative; <br />
left:344px; /* This is how the menu ends up on the other side of the wheel */<br />
-webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */<br />
box-shadow: 16px 0 10px -8px #464646 inset; /* opera */<br />
-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */<br />
}<br />
<br />
ul.menuBuild ul.submenu li.first{<br />
-webkit-transform:rotate(-12deg); /* webkit browsers */<br />
-moz-transform:rotate(-12deg); /* firefox */<br />
-o-transform:rotate(-12deg); /* opera */<br />
-ms-transform: rotate(-12deg); /* for IE9 and future versions */<br />
transform: rotate(-12deg); /* For older broswers */<br />
margin-left: -12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.second{<br />
-webkit-transform:rotate(-6deg); /* webkit browsers */<br />
-moz-transform:rotate(-6deg); /* firefox */<br />
-o-transform:rotate(-6deg); /* opera */<br />
-ms-transform: rotate(-6deg); /* for IE9 and future versions */<br />
transform: rotate(-6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.third{<br />
-webkit-transform:rotate(6deg); /* webkit browsers */<br />
-moz-transform:rotate(6deg); /* firefox */<br />
-o-transform:rotate(6deg); /* opera */<br />
-ms-transform: rotate(6deg); /* for IE9 and future versions */<br />
transform: rotate(6deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.fourth{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-3px;<br />
opacity: 0.85;<br />
}<br />
<br />
ul.menuBuild ul.submenu li.last{<br />
-webkit-transform:rotate(12deg); /* webkit browsers */<br />
-moz-transform:rotate(12deg); /* firefox */<br />
-o-transform:rotate(12deg); /* opera */<br />
-ms-transform: rotate(12deg); /* for IE9 and future versions */<br />
transform: rotate(12deg); /* For older broswers */<br />
margin-left:-12px;<br />
opacity: 0.70;<br />
}<br />
<br />
ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */<br />
display: none; /* make child blocks hover without leaving space for them */<br />
top: -48px;<br />
position: absolute;<br />
right: -86px;<br />
color:#565656; <br />
width: 160px;<br />
-webkit-border-radius: 0 4px 4px 0; /* webkit */<br />
-moz-border-radius: 0 4px 4px 0; /* firefox */<br />
border-radius: 0 4px 4px 0; /* opera */<br />
padding: 2px;<br />
height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */<br />
background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */<br />
}<br />
<br />
/**ul.menuBuild li span{display:none;}<br />
<br />
ul.menuBuild li:hover span{display:block;}**/<br />
<br />
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5{<br />
-webkit-border-radius: 4px 0 0 4px; /* webkit */<br />
-moz-border-radius: 4px 0 0 4px; /* firefox */<br />
border-radius: 4px 0 0 4px; /* opera */<br />
-webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */<br />
-moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */<br />
box-shadow:-16px 0 8px -7px #222222 inset; /* opera */<br />
background: #464646; /* old browsers */<br />
background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */<br />
background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */<br />
height: 18px;<br />
padding: 13px;<br />
position: absolute; <br />
margin-top:17px; <br />
width:138px; <br />
}<br />
<br />
ul.menuBuild li#menu2{<br />
-webkit-transform:rotate(15deg); /* webkit */<br />
-moz-transform:rotate(15deg); /* firefox */<br />
-o-transform:rotate(15deg); /* opera */<br />
-ms-transform: rotate(15deg); /* ie9 and future versions */<br />
transform: rotate(15deg); /* older browsers */<br />
margin-top: 35px; <br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu3{ <br />
-webkit-transform:rotate(11deg); /* webkit */<br />
-moz-transform:rotate(11deg); /* firefox */<br />
-o-transform:rotate(11deg); /* opera */<br />
-ms-transform: rotate(11deg); /* ie9 and future versions */<br />
transform: rotate(11deg); /* older browsers */<br />
margin-top: 75px;<br />
margin-left:10px;<br />
}<br />
<br />
ul.menuBuild li#menu4{<br />
-moz-transform: rotate(5deg); /* firefox */<br />
-ms-transform: rotate(5deg); /* ie9 and future versions */<br />
transform: rotate(5deg); /* older browsers */<br />
-webkit-transform: rotate(5deg); /* webkit */<br />
-o-transform: rotate(5deg); /* opera */<br />
margin-top: 110px; <br />
margin-left:12px;<br />
}<br />
<br />
ul.menuBuild li#menu5{<br />
-moz-transform: rotate(0deg); /* firefox */<br />
-ms-transform: rotate(0deg); /* ie9 and future versions */<br />
transform: rotate(0deg); /* older browsers */<br />
-webkit-transform: rotate(0deg); /* webkit */<br />
-o-transform: rotate(0deg); /* opera */<br />
margin-top: 145px; <br />
margin-left:14px;<br />
}<br />
<br />
/***********************************<br />
Here's some support for the sub-menus<br />
************************************/<br />
<br />
ul.menuBuild li#menu1 > ul{<br />
margin-top:-35px; <br />
left:19px;<br />
}<br />
<br />
ul.menuBuild li#menu2 > ul{<br />
-webkit-transform:rotate(10deg); /* webkit */<br />
-moz-transform:rotate(10deg); /* firefox */<br />
-o-transform:rotate(10deg); /* opera */<br />
-ms-transform: rotate(10deg); /* ie9 and future versions */<br />
transform: rotate(10deg); /* older browsers */<br />
left: 17px;<br />
margin-top: -38px;<br />
}<br />
<br />
ul.menuBuild li#menu3 > ul{<br />
-webkit-transform:rotate(21deg); /* webkit */<br />
-moz-transform:rotate(21deg); /* firefox */<br />
-o-transform:rotate(21deg); /* opera */<br />
-ms-transform: rotate(-21deg); /* ie9 and future versions */<br />
transform: rotate(-21deg); /* older browsers */<br />
left: 16px;<br />
margin-top: -39px;<br />
}<br />
<br />
ul.menuBuild li#menu4 > ul{<br />
-webkit-transform:rotate(32deg); /* webkit */<br />
-moz-transform:rotate(32deg); /* firefox */<br />
-o-transform:rotate(32deg); /* opera */<br />
-ms-transform: rotate(32deg); /* ie9 and future versions */<br />
transform: rotate(32deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -40px;<br />
} <br />
<br />
ul.menuBuild li#menu5> ul{<br />
-webkit-transform:rotate(42deg); /* webkit */<br />
-moz-transform:rotate(42deg); /* firefox */<br />
-o-transform:rotate(42deg); /* opera */<br />
-ms-transform: rotate(42deg); /* ie9 and future versions */<br />
transform: rotate(42deg); /* older browsers */<br />
left: 15px;<br />
margin-top: -41px;<br />
} <br />
<br />
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 */<br />
display: block; /* makes the child block visible - one of the most important declarations */<br />
position:absolute; <br />
left:0; <br />
width:400px; <br />
height:200px; <br />
}<br />
<br />
/**********************************************************<br />
and some link styles <br />
*********************************************************/<br />
<br />
ul.menuBuild ul.submenu li a{ <br />
color:#464646; /* the color of submenu fonts */<br />
opacity:0.65; /* This blends the font in with the background */<br />
filter:alpha(opacity=65);<br />
}<br />
<br />
ul.menuBuild ul.submenu li a:hover{<br />
opacity:1.0; /* and this brings the font opacity back to 100% */<br />
filter:alpha(opacity=100)<br />
}<br />
<br />
ul.menuBuild li a { /* for the main menu links */<br />
color: #fff; <br />
display: block; <br />
width: 100%; <br />
}<br />
<br />
ul.menuBuild li:hover > a { <br />
color: #fff; <br />
border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */<br />
} /* do not use display: block; */<br />
<br />
.sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */<br />
}<br />
<br />
/******************************************************<br />
Now we get to the containers<br />
******************************************************/<br />
<br />
.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */<br />
-moz-border-radius: 220px; /* firefox */<br />
-webkit-border-radius: 220px; /* webkit */<br />
border-radius: 220px; /* opera */<br />
-moz-box-shadow: 0 0 5px 0 #262626; /* firefox */<br />
-webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */<br />
box-shadow: 0 0 5px 0 #262626; /* opera */<br />
margin:0 auto; <br />
position:relative !important; /* Do not touch unless you know what you are doing */ <br />
top:20px;<br />
}<br />
<br />
.nav-holder{<br />
-moz-box-shadow: none; /* Sharpens the wheel */<br />
}<br />
<br />
.wrap1{ <br />
background: #FFFF00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */<br />
background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */<br />
height:394px; <br />
width:394px;<br />
}<br />
<br />
.wrap2{ <br />
background: #FFCC00; /* old browsers */<br />
background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */<br />
background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */<br />
height:354px; <br />
width:354px;<br />
}<br />
<br />
.wrap3{ <br />
background: #FF9900; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */<br />
background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */<br />
height:314px; <br />
width:314px;<br />
}<br />
<br />
.wrap4{ <br />
background: #FF6600; /* old browsers */<br />
background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */<br />
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */<br />
background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/<br />
-pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/<br />
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */<br />
-moz-box-shadow: 0 0 15px 2px #262626;<br />
-webkit-box-shadow: 0 0 15px 2px #262626;<br />
box-shadow: 0 0 15px 2px #262626;<br />
height:274px; <br />
width:274px;<br />
}<br />
<br />
.wrap5{<br />
-moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */<br />
-webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */<br />
box-shadow: 0 0 15px 1px #262626 inset; /* opera */<br />
border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */<br />
height: 214px;<br />
top: 10px; /* center the element */<br />
width: 214px;<br />
}<br />
<br />
.nav-holder{<br />
background: none repeat scroll 0 0 transparent;<br />
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 */<br />
border-style: solid hidden solid double;<br />
border-width: 73px medium 73px 73px;<br />
height: 252px;<br />
margin: -92px; /* center the object on relative elements */<br />
top: 0;<br />
width: 324px;<br />
}<br />
<br />
.completer, .completer2{ /** absolute elements to hide the border of images **/<br />
-moz-border-radius: 0 120px 0 113px; /* firefox */<br />
-webkit-border-radius: 0 120px 0 113px; /* webkit */<br />
border-radius: 0 120px 0 113px; /* opera */<br />
-moz-transform: rotate(-20deg); /* firefox */<br />
-webkit-transform: rotate(-21deg); /* webkit */<br />
-o-transform: rotate(-20deg); /* opera */<br />
-ms-transform: rotate(-20deg); /* ie9 and future versions */<br />
transform: rotate(-20deg); /* older browsers */<br />
background-attachment: scroll;<br />
background-color: #222222;<br />
background-image: none;<br />
background-position: 0 0;<br />
background-repeat: repeat;<br />
height: 131px;<br />
position: absolute;<br />
right: -21px;<br />
top: -50px;<br />
width: 130px;<br />
}<br />
<br />
.completer2{<br />
-moz-transform: rotate(108deg); /* firefox */<br />
-webkit-transform: rotate(109deg); /* webkit */<br />
-o-transform: rotate(108deg); /* opera */<br />
-ms-transform: rotate(108deg); /* ie9 and future versions */<br />
transform: rotate(108deg); /* older browsers */<br />
top: 194px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</style><br />
<br />
<br />
<!-- Menu-->'<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Wheeltz - CSS3 Navigational Wheel Menu</title><br />
<link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /><br />
<!--[if lt IE 9]><br />
<link rel="stylesheet" href="styles/ie.css" media="screen" /><br />
<![endif]--><br />
<br />
<br />
<br />
<br />
</head><br />
<br />
<body><br />
<div id="menu-wrap"><br />
<div class="wrap1"><br />
<div class="wrap2"><br />
<div class="wrap3"><br />
<div class="wrap4"> <br />
<span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span><br />
<br />
<div class="completer"></div><br />
<div class="completer2"></div><br />
<div class="wrap5"><br />
<div class="nav-holder"><br />
<br />
<!-- start menu !--><br />
<br />
<ul class="menuBuild"><br />
<br />
<li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> <br />
</li><br />
<br />
<li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Modelling">Modelling</a><br />
<ul class="submenu sub2"><br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Modeling">Deterministic</a></li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li><br />
<li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li><br />
</ul><br />
</li><br />
<br />
<li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> <br />
</li><br />
<br />
<li id="menu4"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a><br />
<ul class="submenu sub4"><br />
<br />
<li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li><br />
<li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li><br />
<li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li><br />
<li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Projectt">Human Practices</a> <br />
</li><br />
<br />
</ul><br />
<br />
<!-- end menu !--><br />
<br />
</div><!-- nav holder !--><br />
</div><!-- wrap5 !--><br />
</div><!-- wrap4 !--><br />
</div><!-- wrap3 !--><br />
</div><!-- wrap2 !--><br />
</div><!-- wrap1 !--><br />
</div><!-- menu-wrap !--><br />
<br />
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br />
<br />
<br />
<br />
<br />
<br />
<!-- beginning of your page --><br />
<br />
<br />
<table width="1500px" align="center"><br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
<tr><br />
<br />
<td width="35%" valign="top"> <br />
<h3>Welcome ! </h3> <br />
<p><br />
This is a basic template you may use to customize your wiki, <br />
<br />
you can take it apart and modify it as much as you want. The <br />
<br />
links and tabs provided here are basic suggestions, feel free <br />
<br />
to adapt it for your team and your project. </p><br />
<p><br />
If you are looking for general wiki guidelines, <br />
<br />
restrictions, design tips and more, visit the <br><a <br />
<br />
href="https://2014.igem.org/Wiki_How-To"> Wiki How-To <br />
<br />
Page</a></p><br />
</p><br />
<br />
<br />
</td><br />
<br />
<td width="5%" > </td><br />
<br />
<br />
<!-- here you can place an image related to your project or <br />
<br />
your logo! --><br />
<td width="60%" > <img <br />
<br />
src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima<br />
<br />
ge.jpg" width="600px" height="300px"></td><br />
<br />
<br />
<br />
<tr ><td coslpan="2" height="35px"></td></tr><br />
</tr><br />
</table><br />
<br />
<br />
<br />
<ul class="flatflipbuttons"><br />
<br />
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li><br />
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li><br />
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li><br />
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
<br />
<br />
</body><br />
</div><br />
</html><br />
<br />
<br />
<!-- end of page --></div>
D.olivera1320