Template:Http://2014.igem.org/Team:Colombia
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <html | + | <html> |
- | + | ||
- | |||
- | < | + | <!-- this section changes the default wiki template to a white full width background --> |
- | / | + | <style type="text/css"> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear | |
- | + | { | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | } | |
- | + | /*-- hides default wiki settings --*/ | |
- | # | + | #top-section { |
- | + | height: 0px; | |
+ | border-top: 0.5 | ||
+ | border-left: none; | ||
+ | border-right: none; | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | #globalWrapper, #content { /*-- changes default wiki settings --*/ | |
+ | width: 100%; | ||
+ | height: 100%; | ||
border: 0px; | border: 0px; | ||
- | + | background-color: #C68E17; | |
- | + | margin: 0px; | |
+ | padding: 0px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | |||
+ | |||
+ | html, body, .wrapper { /*-- changes default wiki settings -- | ||
+ | |||
+ | */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #C68E17; | ||
} | } | ||
- | . | + | |
- | + | </style> | |
- | list-style | + | |
+ | <style> | ||
+ | table,th,td | ||
+ | { | ||
+ | Background:#C68E17; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Inferior Menu--> | ||
+ | |||
+ | <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> | ||
+ | |||
+ | <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | ul.flatflipbuttons{ | ||
+ | margin-left:500px; | ||
+ | margin-top: 1200px; | ||
+ | padding:0; | ||
+ | list-style:none; | ||
+ | -webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */ | ||
+ | -moz-perspective: 10000px; | ||
+ | perspective: 10000px; | ||
} | } | ||
- | + | ||
- | . | + | ul.flatflipbuttons li{ |
- | + | margin:200; | |
- | + | display: inline-block; | |
- | + | width: 50px; /* dimensions of buttons. */ | |
- | + | height: 50px; | |
- | + | margin-right: 15px; /* spacing between buttons */ | |
- | + | background: white; | |
- | + | text-transform: uppercase; | |
+ | text-align: center; | ||
} | } | ||
- | + | ||
- | . | + | ul.flatflipbuttons li a{ |
- | + | display:table; | |
+ | font: bold 36px Arial; /* font size, pertains to icon fonts specifically */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin-bottom: 4px; | ||
+ | color: black; | ||
+ | background: #3B9DD5; | ||
+ | text-decoration: none; | ||
+ | outline: none; | ||
+ | -webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */ | ||
+ | -moz-transition:all 300ms ease-out; | ||
+ | transition:all 300ms ease-out; | ||
} | } | ||
- | . | + | ul.flatflipbuttons li:nth-of-type(1) a{ |
- | + | color: white; | |
+ | background: #3B9DD5; | ||
} | } | ||
- | . | + | ul.flatflipbuttons li:nth-of-type(2) a{ |
- | + | background: #A1CD3A; | |
} | } | ||
- | + | ul.flatflipbuttons li:nth-of-type(3) a{ | |
- | . | + | background: #80C5EC; |
- | + | ||
- | + | ||
} | } | ||
- | . | + | ul.flatflipbuttons li:nth-of-type(4) a{ |
- | + | color: white; | |
- | + | background: #635746; | |
- | + | ||
} | } | ||
- | . | + | ul.flatflipbuttons li:nth-of-type(5) a{ |
- | + | background: #F2C96D; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ul.flatflipbuttons li a span{ | |
- | . | + | -moz-box-sizing: border-box; |
- | + | -webkit-box-sizing: border-box; | |
- | + | box-sizing: border-box; | |
- | + | display: table-cell; | |
- | + | vertical-align: middle; | |
- | + | align: middle; | |
- | + | width: 100%; | |
- | + | height: 100%; | |
- | + | -webkit-transition: all 300ms ease-out; /* CSS3 transition. */ | |
- | + | -moz-transition: all 300ms ease-out; | |
+ | transition: all 300ms ease-out; | ||
} | } | ||
- | + | ul.flatflipbuttons li b{ /* CSS for text beneath button */ | |
- | + | display: block; | |
+ | position: relative; | ||
+ | width: 100%; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */ | ||
+ | -moz-transition: all 300ms ease-out 0.2s; | ||
+ | transition: all 300ms ease-out 0.2s; | ||
} | } | ||
- | |||
- | + | ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */ | |
- | + | border-width: 0; | |
- | /* | + | vertical-align: middle; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | ul.flatflipbuttons li:hover a{ | |
- | + | -webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/ | |
+ | -moz-transform: rotateY(180deg); | ||
+ | transform: rotateY(180deg); | ||
+ | background: #c1e4ec; /* bgcolor of button onMouseover*/ | ||
+ | -webkit-transition-delay: 0.2s; | ||
+ | -moz-transition-delay: 0.2s; | ||
+ | transition-delay: 0.2s; | ||
} | } | ||
- | + | ul.flatflipbuttons li:hover a span{ | |
- | + | color: black; /* color of icon font onMouseover */ | |
+ | -webkit-transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); /* flip horizontally 180deg*/ | ||
+ | transform: rotateY(180deg); | ||
+ | -webkit-transition-delay: 0.2s; | ||
+ | -moz-transition-delay: 0.2s; | ||
+ | transition-delay: 0.2s; | ||
} | } | ||
- | |||
- | |||
- | |||
- | + | ul.flatflipbuttons li:hover b{ | |
- | + | opacity: 1; | |
} | } | ||
- | + | /* CSS for 2nd menu below specifically */ | |
- | + | ||
+ | ul.second li a{ | ||
+ | background: #eee !important; | ||
} | } | ||
- | + | ul.second li a:hover{ | |
- | { | + | background: #ddd !important; |
- | background | + | |
- | + | ||
} | } | ||
- | + | </style> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
+ | <!-- Navigation Menu --> | ||
- | + | <style> | |
- | . | + | @font-face { |
- | + | font-family: 'FranklinGothicMediumRegular'; /* For non-web-standard fonts, define the font name here */ | |
- | + | src: url('framd-webfont.eot?') format('eot'), /* Define the directory where you put your fonts under src: url('') and the format of the font (e.g. TrueType) */ | |
- | + | url('framd-webfont.woff') format('woff'), | |
+ | url('framd-webfont.ttf') format('truetype'), | ||
+ | url('framd-webfont.svg#webfontb01Cou6J') format('svg'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; /* The style of your font (e.g. italic) */ | ||
+ | } | ||
+ | |||
+ | body{ | ||
+ | } /* Editing this may conflict with the body tag in your main sites css file. Delete it if you like. */ | ||
+ | |||
+ | a{ | ||
+ | text-decoration:none; | ||
+ | outline:none; /* For keeping links clear of underlines or other decorations */ | ||
+ | } | ||
+ | |||
+ | #menu-wrap{ /* Use this to move the navigator around on your page wherever you want so not to break it by changing other styles */ | ||
+ | background:none; /* This isn't needed */ | ||
+ | height:600px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */ | ||
+ | font-family:Franklin Gothic Medium,Helvetica, Arial, sans-serif; /* If not using Franklin, it will automatically go to the next font in the family */ | ||
+ | font-size:13px; /* Establishes the global font size */ | ||
+ | letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */ | ||
+ | |||
+ | position: absolute; | ||
+ | top: 1px; | ||
+ | right: 10px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menu-wrap .orbit{ | ||
+ | height: 210px; | ||
+ | margin: 30px; /* Pushes the images in the display to the center */ position: absolute; | ||
+ | |||
+ | width: 210px; | ||
+ | } | ||
+ | #menu-wrap .orbit-frame{ | ||
+ | border:2px solid #999; /* Creates a division between the image and wrap5 */ | ||
- | } | + | } |
+ | |||
+ | /** menu links **/ | ||
+ | |||
+ | /** tester **/ | ||
+ | ul.menuBuild, ul.menuBuild ul { | ||
+ | width: 80px; /* sets the size of the menu blocks */ | ||
+ | background: rgb(0, 0, 0); | ||
+ | /* RGBa with 0.6 opacity */ | ||
+ | background: rgba(0, 0, 0, 0.01); /* makes the menu blocks mint green - a bg-color MUST be included for IE to work properly! */ | ||
+ | padding-left: 0px; /* stops the usual indent from ul */ | ||
+ | margin-left: 76px; /* Opera 7 final's margin and margin-box model cause problems */ | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li { | ||
+ | list-style-type: none; /* removes the bullet points */ | ||
+ | position: relative; | ||
+ | -webkit-border-radius: 4px 0 0 4px; /* webkit browsers */ | ||
+ | -moz-border-radius: 4px 0 0 4px; /* firefox */ | ||
+ | border-radius: 4px 0 0 4px; /* opera */ | ||
+ | background: none repeat scroll 0 0 #464646; /* Solid background for older browsers to fall back on */ | ||
+ | height: 14px; | ||
+ | left: -177px; | ||
+ | padding: 8px; | ||
+ | margin: 6px 0 0; | ||
+ | width:140px; | ||
+ | text-indent:5px; /* How far the text is from the left edge of the menu */ | ||
+ | color: #fff; /* sets the default font colour to white */ | ||
+ | } | ||
- | /* | + | ul.menuBuild ul.submenu li{ |
- | # | + | background: #f2f2f2; /* old browsers */ |
- | + | background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */ | |
- | + | background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */ | |
- | + | background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/ | |
- | # | + | -pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/ |
- | + | /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */ | |
- | + | color:#464646; | |
- | + | position:relative; | |
- | + | left:344px; /* This is how the menu ends up on the other side of the wheel */ | |
- | + | -webkit-box-shadow: -2px 3px 12px -7px #161616; /* webkit browsers */ | |
- | + | box-shadow: 16px 0 10px -8px #464646 inset; /* opera */ | |
- | + | -moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */ | |
- | + | } | |
- | + | ||
- | + | ul.menuBuild ul.submenu li.first{ | |
- | + | -webkit-transform:rotate(-12deg); /* webkit browsers */ | |
- | + | -moz-transform:rotate(-12deg); /* firefox */ | |
- | + | -o-transform:rotate(-12deg); /* opera */ | |
- | + | -ms-transform: rotate(-12deg); /* for IE9 and future versions */ | |
- | + | transform: rotate(-12deg); /* For older broswers */ | |
- | + | margin-left: -12px; | |
- | + | opacity: 0.70; | |
- | + | } | |
- | + | ||
- | + | ul.menuBuild ul.submenu li.second{ | |
- | + | -webkit-transform:rotate(-8deg); /* webkit browsers */ | |
- | + | -moz-transform:rotate(-8deg); /* firefox */ | |
- | + | -o-transform:rotate(-8deg); /* opera */ | |
- | + | -ms-transform: rotate(-8deg); /* for IE9 and future versions */ | |
- | + | transform: rotate(-8deg); /* For older broswers */ | |
- | + | margin-left:-3px; | |
- | + | opacity: 0.85; | |
- | + | } | |
- | + | ||
- | + | ul.menuBuild ul.submenu li.third{ | |
+ | -webkit-transform:rotate(-4deg); /* webkit browsers */ | ||
+ | -moz-transform:rotate(-4deg); /* firefox */ | ||
+ | -o-transform:rotate(-4deg); /* opera */ | ||
+ | -ms-transform: rotate(-4deg); /* for IE9 and future versions */ | ||
+ | transform: rotate(-4deg); /* For older broswers */ | ||
+ | margin-left:-1px; | ||
+ | opacity: 0.85; | ||
+ | } | ||
- | + | ul.menuBuild ul.submenu li.fourth{ | |
- | // | + | -webkit-transform:rotate(0deg); /* webkit browsers */ |
- | // | + | -moz-transform:rotate(0deg); /* firefox */ |
- | + | -o-transform:rotate(0deg); /* opera */ | |
- | + | -ms-transform: rotate(0deg); /* for IE9 and future versions */ | |
- | + | transform: rotate(0deg); /* For older broswers */ | |
- | + | margin-left:-3px; | |
- | + | opacity: 0.85; | |
- | + | } | |
- | + | ||
- | + | ul.menuBuild ul.submenu li.last{ | |
- | + | -webkit-transform:rotate(12deg); /* webkit browsers */ | |
- | + | -moz-transform:rotate(12deg); /* firefox */ | |
- | + | -o-transform:rotate(12deg); /* opera */ | |
- | + | -ms-transform: rotate(12deg); /* for IE9 and future versions */ | |
- | + | transform: rotate(12deg); /* For older broswers */ | |
+ | margin-left:-12px; | ||
+ | opacity: 0.70; | ||
+ | } | ||
+ | ul.menuBuild li > ul{ /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */ | ||
+ | display: none; /* make child blocks hover without leaving space for them */ | ||
+ | top: -48px; | ||
+ | position: absolute; | ||
+ | right: -86px; | ||
+ | color:#565656; | ||
+ | width: 160px; | ||
+ | -webkit-border-radius: 0 4px 4px 0; /* webkit */ | ||
+ | -moz-border-radius: 0 4px 4px 0; /* firefox */ | ||
+ | border-radius: 0 4px 4px 0; /* opera */ | ||
+ | padding: 2px; | ||
+ | height: 24px; background: rgb(255, 255, 255); /* Fallback for web browsers that don't support RGBa */ | ||
+ | background: rgba(255, 255, 255, 0.00); /* RGBa with 0.01 opacity */ | ||
+ | } | ||
+ | |||
+ | /**ul.menuBuild li span{display:none;} | ||
+ | |||
+ | ul.menuBuild li:hover span{display:block;}**/ | ||
+ | |||
+ | ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu5, ul.menuBuild li#menu6{ | ||
+ | -webkit-border-radius: 4px 0 0 4px; /* webkit */ | ||
+ | -moz-border-radius: 4px 0 0 4px; /* firefox */ | ||
+ | border-radius: 4px 0 0 4px; /* opera */ | ||
+ | -webkit-box-shadow:-2px 7px 8px -7px #161616; /* webkit */ | ||
+ | -moz-box-shadow:-2px 7px 8px -7px #161616; /* firefox */ | ||
+ | box-shadow:-16px 0 8px -7px #222222 inset; /* opera */ | ||
+ | background: #464646; /* old browsers */ | ||
+ | background: -moz-linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /* firefox */ | ||
+ | background: -webkit-gradient(linear, left top, right top, color-stop(78%,#464646), color-stop(97%,#363636), color-stop(100%,#222222)); /* webkit */ | ||
+ | background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*future CSS3 browsers*/ | ||
+ | -pie-background: linear-gradient(left, #464646 78%, #363636 97%, #222222 100%); /*IE fix using Pie*/ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464646', endColorstr='#222222',GradientType=1 ); /* ie */ | ||
+ | height: 18px; | ||
+ | padding: 8px; | ||
+ | position: absolute; | ||
+ | margin-top:145px; | ||
+ | width:138px; | ||
+ | margin-left:14px; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu2{ | ||
+ | -webkit-transform:rotate(20deg); /* webkit */ | ||
+ | -moz-transform:rotate(20deg); /* firefox */ | ||
+ | -o-transform:rotate(20deg); /* opera */ | ||
+ | -ms-transform: rotate(20deg); /* ie9 and future versions */ | ||
+ | transform: rotate(20deg); /* older browsers */ | ||
+ | margin-top: 0px; | ||
+ | margin-left:35px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu3{ | ||
+ | -webkit-transform:rotate(15deg); /* webkit */ | ||
+ | -moz-transform:rotate(15deg); /* firefox */ | ||
+ | -o-transform:rotate(15deg); /* opera */ | ||
+ | -ms-transform: rotate(15deg); /* ie9 and future versions */ | ||
+ | transform: rotate(15deg); /* older browsers */ | ||
+ | margin-top: 35px; | ||
+ | margin-left:20px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu4{ | ||
+ | -moz-transform: rotate(10deg); /* firefox */ | ||
+ | -ms-transform: rotate(10deg); /* ie9 and future versions */ | ||
+ | transform: rotate(10deg); /* older browsers */ | ||
+ | -webkit-transform: rotate(10deg); /* webkit */ | ||
+ | -o-transform: rotate(10deg); /* opera */ | ||
+ | margin-top: 70px; | ||
+ | margin-left:16px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu5{ | ||
+ | -moz-transform: rotate(5deg); /* firefox */ | ||
+ | -ms-transform: rotate(5deg); /* ie9 and future versions */ | ||
+ | transform: rotate(5deg); /* older browsers */ | ||
+ | -webkit-transform: rotate(5deg); /* webkit */ | ||
+ | -o-transform: rotate(5deg); /* opera */ | ||
+ | margin-top: 108px; | ||
+ | margin-left:12px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu6{ | ||
+ | -moz-transform: rotate(-6deg); /* firefox */ | ||
+ | -ms-transform: rotate(-6deg); /* ie9 and future versions */ | ||
+ | transform: rotate(-6deg); /* older browsers */ | ||
+ | -webkit-transform: rotate(-6deg); /* webkit */ | ||
+ | -o-transform: rotate(-6deg); /* opera */ | ||
+ | margin-top: 183px; | ||
+ | margin-left:21px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*********************************** | ||
+ | Here's some support for the sub-menus | ||
+ | ************************************/ | ||
+ | |||
+ | ul.menuBuild li#menu1 > ul{ | ||
+ | margin-top:-55px; | ||
+ | left:0px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu2 > ul{ | ||
+ | -webkit-transform:rotate(10deg); /* webkit */ | ||
+ | -moz-transform:rotate(10deg); /* firefox */ | ||
+ | -o-transform:rotate(10deg); /* opera */ | ||
+ | -ms-transform: rotate(10deg); /* ie9 and future versions */ | ||
+ | transform: rotate(10deg); /* older browsers */ | ||
+ | left: 17px; | ||
+ | margin-top: -38px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu3 > ul{ | ||
+ | -webkit-transform:rotate(21deg); /* webkit */ | ||
+ | -moz-transform:rotate(21deg); /* firefox */ | ||
+ | -o-transform:rotate(21deg); /* opera */ | ||
+ | -ms-transform: rotate(-21deg); /* ie9 and future versions */ | ||
+ | transform: rotate(-21deg); /* older browsers */ | ||
+ | left: 16px; | ||
+ | margin-top: -39px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu4 > ul{ | ||
+ | -webkit-transform:rotate(0deg); /* webkit */ | ||
+ | -moz-transform:rotate(0deg); /* firefox */ | ||
+ | -o-transform:rotate(0deg); /* opera */ | ||
+ | -ms-transform: rotate(0deg); /* ie9 and future versions */ | ||
+ | transform: rotate(0deg); /* older browsers */ | ||
+ | left: 0px; | ||
+ | margin-top: -40px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu5> ul{ | ||
+ | -webkit-transform:rotate(0deg); /* webkit */ | ||
+ | -moz-transform:rotate(0deg); /* firefox */ | ||
+ | -o-transform:rotate(0deg); /* opera */ | ||
+ | -ms-transform: rotate(0deg); /* ie9 and future versions */ | ||
+ | transform: rotate(0deg); /* older browsers */ | ||
+ | left: 0px; | ||
+ | margin-top: -50px; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li#menu6> ul{ | ||
+ | -webkit-transform:rotate(42deg); /* webkit */ | ||
+ | -moz-transform:rotate(42deg); /* firefox */ | ||
+ | -o-transform:rotate(42deg); /* opera */ | ||
+ | -ms-transform: rotate(42deg); /* ie9 and future versions */ | ||
+ | transform: rotate(42deg); /* older browsers */ | ||
+ | left: 0px; | ||
+ | margin-top: -50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ul.menuBuild li:hover > ul { /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */ | ||
+ | display: block; /* makes the child block visible - one of the most important declarations */ | ||
+ | position:absolute; | ||
+ | left:0; | ||
+ | width:400px; | ||
+ | height:200px; | ||
+ | } | ||
+ | |||
+ | /********************************************************** | ||
+ | and some link styles | ||
+ | *********************************************************/ | ||
+ | |||
+ | ul.menuBuild ul.submenu li a{ | ||
+ | color:#464646; /* the color of submenu fonts */ | ||
+ | opacity:0.65; /* This blends the font in with the background */ | ||
+ | filter:alpha(opacity=65); | ||
+ | } | ||
+ | |||
+ | ul.menuBuild ul.submenu li a:hover{ | ||
+ | opacity:1.0; /* and this brings the font opacity back to 100% */ | ||
+ | filter:alpha(opacity=100) | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li a { /* for the main menu links */ | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | ul.menuBuild li:hover > a { | ||
+ | color: #fff; | ||
+ | border-left:solid 5px #ff6600; /* the indicator for when an item is hovered over */ | ||
+ | } /* do not use display: block; */ | ||
+ | |||
+ | .sub1, .sub2, .sub3, .sub4{ /* You can use this to individually style your sub-menu items */ | ||
+ | } | ||
+ | |||
+ | /****************************************************** | ||
+ | Now we get to the containers | ||
+ | ******************************************************/ | ||
+ | |||
+ | .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{ /* styles all of the wheel containers */ | ||
+ | -moz-border-radius: 220px; /* firefox */ | ||
+ | -webkit-border-radius: 220px; /* webkit */ | ||
+ | border-radius: 220px; /* opera */ | ||
+ | -moz-box-shadow: 0 0 5px 0 #262626; /* firefox */ | ||
+ | -webkit-box-shadow: 0 0 5px 0 #262626; /* webkit */ | ||
+ | box-shadow: 0 0 5px 0 #262626; /* opera */ | ||
+ | margin:0 auto; | ||
+ | position:relative !important; /* Do not touch unless you know what you are doing */ | ||
+ | top:20px; | ||
+ | } | ||
+ | |||
+ | .nav-holder{ | ||
+ | -moz-box-shadow: none; /* Sharpens the wheel */ | ||
+ | } | ||
+ | |||
+ | .wrap1{ | ||
+ | background: #FFFF00; /* old browsers */ | ||
+ | background: -moz-linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /* firefox */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFF00), color-stop(100%,#FFCC00)); /* webkit */ | ||
+ | background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*future CSS3 browsers*/ | ||
+ | -pie-background: linear-gradient(top, #FFFF00 0%, #FFCC00 100%); /*IE fix using Pie*/ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFCC00',GradientType=0 ); /* ie */ | ||
+ | height:394px; | ||
+ | width:394px; | ||
+ | } | ||
+ | |||
+ | .wrap2{ | ||
+ | background: #FFCC00; /* old browsers */ | ||
+ | background: -moz-linear-gradient(top, #FFCC00 0%, #FF9900 100%); /* firefox */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCC00), color-stop(100%,#FF9900)); /* webkit */ | ||
+ | background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*future CSS3 browsers*/ | ||
+ | -pie-background: linear-gradient(top, #FFCC00 0%, #FF9900 100%); /*IE fix using Pie*/ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#FF9900',GradientType=0 ); /* ie */ | ||
+ | height:354px; | ||
+ | width:354px; | ||
+ | } | ||
+ | |||
+ | .wrap3{ | ||
+ | background: #FF9900; /* old browsers */ | ||
+ | background: -moz-linear-gradient(top, #FF9900 0%, #FF6600 100%); /* firefox */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9900), color-stop(100%,#FF6600)); /* webkit */ | ||
+ | background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*future CSS3 browsers*/ | ||
+ | -pie-background: linear-gradient(top, #FF9900 0%, #FF6600 100%); /*IE fix using Pie*/ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9900', endColorstr='#FF6600',GradientType=0 ); /* ie */ | ||
+ | height:314px; | ||
+ | width:314px; | ||
+ | } | ||
+ | |||
+ | .wrap4{ | ||
+ | background: #FF6600; /* old browsers */ | ||
+ | background: -moz-linear-gradient(top, #FF6600 0%, #FF3300 100%); /* firefox */ | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6600), color-stop(100%,#FF3300)); /* webkit */ | ||
+ | background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*future CSS3 browsers*/ | ||
+ | -pie-background: linear-gradient(top, #FF6600 0%, #FF3300 100%); /*IE fix using Pie*/ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF6600', endColorstr='#FF3300',GradientType=0 ); /* ie */ | ||
+ | -moz-box-shadow: 0 0 15px 2px #262626; | ||
+ | -webkit-box-shadow: 0 0 15px 2px #262626; | ||
+ | box-shadow: 0 0 15px 2px #262626; | ||
+ | height:274px; | ||
+ | width:274px; | ||
+ | } | ||
+ | |||
+ | .wrap5{ | ||
+ | -moz-box-shadow: 0 0 15px 5px #262626 inset; /* firefox */ | ||
+ | -webkit-box-shadow: 0 0 15px 5px #262626 inset; /* webkit */ | ||
+ | box-shadow: 0 0 15px 1px #262626 inset; /* opera */ | ||
+ | border: 20px solid #FFD48E; /* creates the wrap to see the image behind it */ | ||
+ | height: 214px; | ||
+ | top: 10px; /* center the element */ | ||
+ | width: 214px; | ||
+ | } | ||
+ | |||
+ | .nav-holder{ | ||
+ | background: none repeat scroll 0 0 transparent; | ||
+ | border-color: #222; /*** The border declarations are used to create the final wrapper, middle see through and hides the right border to show the submenus */ | ||
+ | border-style: solid hidden solid double; | ||
+ | border-width: 73px medium 73px 73px; | ||
+ | height: 252px; | ||
+ | margin: -92px; /* center the object on relative elements */ | ||
+ | top: 0; | ||
+ | width: 324px; | ||
+ | } | ||
+ | |||
+ | .completer, .completer2{ /** absolute elements to hide the border of images **/ | ||
+ | -moz-border-radius: 0 120px 0 113px; /* firefox */ | ||
+ | -webkit-border-radius: 0 120px 0 113px; /* webkit */ | ||
+ | border-radius: 0 120px 0 113px; /* opera */ | ||
+ | -moz-transform: rotate(-20deg); /* firefox */ | ||
+ | -webkit-transform: rotate(-21deg); /* webkit */ | ||
+ | -o-transform: rotate(-20deg); /* opera */ | ||
+ | -ms-transform: rotate(-20deg); /* ie9 and future versions */ | ||
+ | transform: rotate(-20deg); /* older browsers */ | ||
+ | background-attachment: scroll; | ||
+ | background-color: #222222; | ||
+ | background-image: none; | ||
+ | background-position: 0 0; | ||
+ | background-repeat: repeat; | ||
+ | height: 131px; | ||
+ | position: absolute; | ||
+ | right: -21px; | ||
+ | top: -50px; | ||
+ | width: 130px; | ||
+ | } | ||
+ | |||
+ | .completer2{ | ||
+ | -moz-transform: rotate(108deg); /* firefox */ | ||
+ | -webkit-transform: rotate(109deg); /* webkit */ | ||
+ | -o-transform: rotate(108deg); /* opera */ | ||
+ | -ms-transform: rotate(108deg); /* ie9 and future versions */ | ||
+ | transform: rotate(108deg); /* older browsers */ | ||
+ | top: 194px; | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> | <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> | ||
Line 271: | Line 658: | ||
</script> | </script> | ||
- | < | + | |
- | + | ||
- | + | <!-- beginning of your page --> | |
- | + | ||
- | + | ||
- | + | <!-- Menu-->' | |
- | + | ||
- | + | ||
- | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
- | + | <html xmlns="http://www.w3.org/1999/xhtml"> | |
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title>Wheeltz - CSS3 Navigational Wheel Menu</title> | ||
+ | <link rel="stylesheet" href="styles/wheel/sunpeach.css" media="screen" /> | ||
+ | <!--[if lt IE 9]> | ||
+ | <link rel="stylesheet" href="styles/ie.css" media="screen" /> | ||
+ | <![endif]--> | ||
+ | |||
+ | <style> | ||
+ | img { | ||
position: absolute; | position: absolute; | ||
- | + | left: 0px; | |
- | + | top: 0px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</style> | </style> | ||
+ | |||
+ | |||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <img src="https://static.igem.org/mediawiki/2013/0/00/Colombiatop.png" width="1330px" height="450px" align="left" > | ||
- | <div id="wrap"> | + | <div id="menu-wrap"> |
+ | <div class="wrap1"> | ||
+ | <div class="wrap2"> | ||
+ | <div class="wrap3"> | ||
+ | <div class="wrap4"> | ||
+ | <span class="img1"><img class="orbit orbit-frame" src="https://static.igem.org/mediawiki/2014/2/2b/Logocolombiaigem.jpg" alt="card08" /></span> | ||
- | <div class=" | + | <div class="completer"></div> |
- | + | <div class="completer2"></div> | |
- | + | <div class="wrap5"> | |
- | + | <div class="nav-holder"> | |
- | + | ||
- | + | <!-- start navigation menu !--> | |
- | + | ||
- | + | <ul class="menuBuild"> | |
- | + | ||
- | + | <li id="menu1"><a href="https://2014.igem.org/Team:Colombia/Modeling">Modelling</a> | |
- | + | ||
- | + | <ul class="submenu sub1"> | |
- | + | <li class="first"><a href="https://2014.igem.org/Team:Colombia/Deterministic">Deterministic</a></li> | |
- | + | <li class="second"><a href="https://2014.igem.org/Team:Colombia/Stochastic">Stochastic </a></li> | |
- | + | <li class="third"><a href="https://2014.igem.org/Team:Colombia/Parameters">Parameters</a></li> | |
- | + | <li class="fourth"><a href="https://2014.igem.org/Team:Colombia/Scripting">Scripting</a></li> | |
- | + | </ul> | |
- | + | ||
- | + | ||
- | + | </li> | |
- | + | ||
- | + | <li id="menu2"><a href="https://2014.igem.org/Team:Colombia/Projectt">Project</a> | |
- | + | </li> | |
- | + | ||
- | + | <li id="menu3"><a href="https://2014.igem.org/Team:Colombia/Parts">Parts</a> | |
- | + | ||
- | + | </li> | |
- | + | ||
- | + | <li id="menu4"><a href="https://2014.igem.org/Team:Colombia/WetLab">Wet Lab</a> | |
- | + | ||
- | + | <ul class="submenu sub4"> | |
- | + | ||
- | <li><a href="https:// | + | <li class="first"><a href="https://2014.igem.org/Team:Colombia/Notebook"></a>Notebook</li> |
- | + | <li class="second"><a href="https://2014.igem.org/Team:Colombia/Interlabb">Interlab</a></li> | |
- | + | <li class="third"><a href="https://2014.igem.org/Team:Colombia/Safety">Safety</a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | + | ||
- | + | ||
- | <li><a href="https:// | + | <li id="menu5"><a href="https://2014.igem.org/Team:Colombia/Team">Team</a> |
- | <li><a href="https:// | + | |
- | + | <ul class="submenu sub5"> | |
- | + | ||
- | + | <li class="first"><a href="https://2014.igem.org/Team:Colombia/Attributions"></a>Attributions</li> | |
- | + | <li class="second"><a href="https://2014.igem.org/Team:Colombia/Members">Members</a></li> | |
- | + | <li class="third"><a href="https://2014.igem.org/Team:Colombia/Judging">Judging</a></li> | |
- | + | <li class="fourth"><a href="https://igem.org/Team.cgi?id=1455">Oficial site</a></li> | |
- | + | </ul> | |
- | + | ||
- | + | ||
- | + | </li> | |
- | + | ||
- | + | <li id="menu6"><a href="https://2014.igem.org/Team:Colombia/HPPt">Human Practices</a> | |
- | + | </li> | |
- | + | ||
- | + | ||
- | + | ||
- | + | </ul> | |
- | + | ||
- | + | <!-- end menu !--> | |
- | + | ||
- | + | </div><!-- nav holder !--> | |
- | + | </div><!-- wrap5 !--> | |
- | + | </div><!-- wrap4 !--> | |
- | + | </div><!-- wrap3 !--> | |
- | + | </div><!-- wrap2 !--> | |
- | + | </div><!-- wrap1 !--> | |
- | + | </div><!-- menu-wrap !--> | |
- | + | ||
- | + | ||
- | + | <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <ul class="flatflipbuttons"> | |
- | + | ||
- | + | <li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li> | |
- | + | <li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li> | |
+ | <li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li> | ||
+ | <li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | |||
+ | |||
- | |||
- | |||
- | |||
</body> | </body> | ||
+ | </div> | ||
</html> | </html> | ||
+ | |||
+ | |||
+ | <!-- end of page --> |
Revision as of 17:30, 22 August 2014
'