|
|
(437 intermediate revisions not shown) |
Line 1: |
Line 1: |
| + | {{Template:Team:Bonn:BaseCSS}} |
| + | {{Template:Team:Bonn:CSS}} |
| <html> | | <html> |
- | <style type="text/css">
| |
- | /* ********************** */
| |
| | | |
- | /* basic settings */ | + | <!-- We need jQuery >= 1.10 --> |
| + | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
| + | <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> |
| | | |
- | .firstHeading { /* Kill the default iGEM picture*/
| + | <!-- Additional global elements --> |
- | height:0px;
| + | |
- | visibility:hidden;
| + | |
- | }
| + | |
- | #top-section {
| + | |
- | background-position: center center;
| + | |
- | background-repeat: no-repeat;
| + | |
- | background-color: #6c89c1;
| + | |
- | border-with:0px;
| + | |
- | height:0px; /* set top header height to zero, so we can show our logo */
| + | |
- | }
| + | |
- | #p-logo{
| + | |
- | visibility:hidden;
| + | |
- | height:0px;
| + | |
- | }
| + | |
- | #search-controls{
| + | |
- | visibility:hidden;
| + | |
- | height:0px;
| + | |
- | }
| + | |
- | #footer-box{
| + | |
- | display:none;
| + | |
- | height:0px;
| + | |
- | }
| + | |
- | #f-poweredbyico{
| + | |
- | visibility:hidden;
| + | |
- | }
| + | |
- | #catlinks{
| + | |
- | visibility:hidden;
| + | |
- | height:0px;
| + | |
- | }
| + | |
- | .print-footer{
| + | |
- | visibility:hidden;
| + | |
- | height:0px;
| + | |
- | }
| + | |
- | #content {
| + | |
- | border-width:0px;
| + | |
- | }
| + | |
- | #siteSub {
| + | |
- | display:none;
| + | |
- | }
| + | |
- | .visualClear{
| + | |
- | display:none;
| + | |
- | }
| + | |
| | | |
- | /* ********************** */
| + | <!-- NONE --> |
- | .mw-headline{
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | .editsection{
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | #globalWrapper{
| + | |
- | background-repeat: repeat-y;
| + | |
- | background-image: url('https://static.igem.org/mediawiki/2013/0/0f/Bonn_background_fabric2.jpg');
| + | |
- | background-position:center;
| + | |
- | }
| + | |
- | #content{
| + | |
- | background-color:transparent
| + | |
- | }
| + | |
- | #menu-top{
| + | |
- | margin:0 auto;
| + | |
- | padding: 0 20px 0 20px;
| + | |
- | position:absolute;
| + | |
- | left:50px; top:20px; width:900px; height:200px;
| + | |
- | z-index:10;
| + | |
- | opacity:0.95;
| + | |
- | list-style: none;
| + | |
- | color:#000000;
| + | |
- | }
| + | |
- | li{
| + | |
- | float:left;
| + | |
- | }
| + | |
- | .menu-head{
| + | |
- | font-weight:bold;
| + | |
- | font-size: 14px;
| + | |
- | margin:0;
| + | |
- | padding:5px;
| + | |
- | }
| + | |
- | .menu-head:hover {
| + | |
- | background-color:#aaaaaa;
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | .menu-column{
| + | |
- | background-color: #cccccc;
| + | |
- | font-size:14px;
| + | |
- | width:150px;
| + | |
- | margin-right:20px;
| + | |
- | border-radius:2px;
| + | |
- | border: 2px solid white;
| + | |
- | -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
| + | |
- | -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2));
| + | |
- | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
| + | |
- | }
| + | |
- | .menu-sub-ul{
| + | |
- | display:none;
| + | |
- | font-weight:bold;
| + | |
- | margin-left:0px;
| + | |
- | }
| + | |
- | .menu-sub-ul a{
| + | |
- | color:#000000;
| + | |
- | }
| + | |
- | .menu-sub{
| + | |
- | clear:both;
| + | |
- | list-style: none;
| + | |
- | padding:5px;
| + | |
- | width:140px;
| + | |
- | }
| + | |
- | .menu-sub:hover {
| + | |
- | background-color:#aaaaaa;
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | .menu-sub:hover a{
| + | |
- | background-color:#aaaaaa;
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | #page{
| + | |
- | border-radius:2px;
| + | |
- | margin:40px 0 0 0;
| + | |
- | padding:0;
| + | |
- | font-family: Calibri;
| + | |
- | background-color:none;
| + | |
- | background-color: #ffffff;
| + | |
- | -webkit-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.2);
| + | |
- | -moz-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.2);
| + | |
- | box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.2);
| + | |
- | }
| + | |
- | .page-top{
| + | |
- | position:relative;
| + | |
- | width:900px;
| + | |
- | margin-left:auto;
| + | |
- | margin-right:auto;
| + | |
- | margin-top:50px;
| + | |
- | margin-bottom:10px;
| + | |
- | color:#ffffff;
| + | |
- | }
| + | |
- | #page-top-slideshow{
| + | |
- | width:900px;
| + | |
- | height:200px;
| + | |
- | padding:30px;
| + | |
- | position:relative;
| + | |
- | color:#ffffff;
| + | |
- | border-radius:4px;
| + | |
- | }
| + | |
- | #page-top-nav {
| + | |
- | position:absolute;
| + | |
- | bottom:7px;
| + | |
- | right:3px;
| + | |
- | z-index:20;
| + | |
- | opacity:0.7;
| + | |
- | }
| + | |
- | #page-top-nav a {
| + | |
- | font-size:20px;
| + | |
- | padding: 2px 5px 2px 5px;
| + | |
- | background-color:#cccccc;
| + | |
- | color:#000000;
| + | |
- | margin-right:10px;
| + | |
- | border-radius:3px;
| + | |
- | }
| + | |
- | #page-top-nav .activeSlide {
| + | |
- | background-color:#aaaaaa;
| + | |
- | }
| + | |
- | .page-top-slide{
| + | |
- | width:900px;
| + | |
- | height:200px;
| + | |
- | font-size:16px;
| + | |
- | padding:30px;
| + | |
- | text-align:justify;
| + | |
- | position:relative;
| + | |
- | }
| + | |
- | #page-top-pic{
| + | |
- | }
| + | |
- | #page-top-pic img{
| + | |
- | position: absolute;
| + | |
- | margin: auto;
| + | |
- | top: 0;
| + | |
- | left: 0;
| + | |
- | right: 0;
| + | |
- | bottom: 0;
| + | |
- | }
| + | |
| | | |
- | #page-middle {
| |
- | padding: 30px 10px 10px 10px;
| |
- | }
| |
- | #page-table{
| |
- | margin-left: auto;
| |
- | margin-right: auto;
| |
- | border-spacing: 10px;
| |
- | background-color:transparent;
| |
- | }
| |
- | .page-box{
| |
- | border: 1px solid black;
| |
- | background-color: #cccccc;
| |
- | position:relative;
| |
- | border-radius:4px;
| |
- | border: 3px solid white;
| |
- | -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
| |
- | -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2));
| |
- | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
| |
- | }
| |
- | #page-box1{
| |
- | width:320px;
| |
- | height:515px;
| |
- | }
| |
- | #page-box2{
| |
- | width:480px;
| |
- | height:250px;
| |
- | }
| |
- | #page-box3{
| |
- | width:480px;
| |
- | height:250px;
| |
- | }
| |
- | #page-box4{
| |
- | width:815px;
| |
- | height:200px;
| |
- | }
| |
- | .page-box-bottom {
| |
- | display:none;
| |
- | width:100%;
| |
- | height:30%;
| |
- | position:absolute;
| |
- | bottom:0;
| |
- | left:0;
| |
- | background-image: -webkit-linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
| |
- | background-image: -moz-linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
| |
- | background-image: -o-linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
| |
- | background-image: linear-gradient(rgba(150,150,150,0.0) 0%, rgba(150,150,150,1.0) 90%);
| |
- | color:#cccccc;
| |
- | }
| |
- | .page-bottom {
| |
- | margin-top:30px;
| |
- | opacity:1;
| |
- | }
| |
- | .page-bottom-sponsors{
| |
- | background-color:rgba(255,255,255,0.35);
| |
- | margin:0 40px 0 40px;
| |
- | border-radius:5px;
| |
- | }
| |
- | .bottom-headline{
| |
- | margin:10px 0 10px 0;
| |
- | text-align:center;
| |
- | font-size:22px;
| |
- | font-weight:bold;
| |
- | }
| |
- | .bottom-sponsor{
| |
- | margin:10px;
| |
- | }
| |
- | </style>
| |
- | <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
| |
- | <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
| |
- | <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
| |
- | <script>
| |
- | function dropdown(id) {
| |
- | $('#'+id).hover( function()
| |
- | {
| |
- | $('#'+id+' > ul').stop().slideUp();
| |
- | $('#'+id+' > ul').slideDown("1000");
| |
- |
| |
- | });
| |
- | $('#'+id).mouseleave(function()
| |
- | {
| |
- | $('#'+id+' > ul').stop().slideDown();
| |
- | $('#'+id+' > ul').slideUp("1000");
| |
- | });
| |
- |
| |
- | }
| |
- |
| |
- | function sidetextFade(id)
| |
- | {
| |
- | $('#'+id).hover(
| |
- | function() {
| |
- | var hover;
| |
- | hover = document.getElementById(id).childNodes;
| |
- | for(var i=0, ii = hover.length; i < ii; i++) {
| |
- | if(hover[i].nodeName == "DIV"){
| |
- | if(hover[i].className == "page-box-bottom") {
| |
- | $('#'+hover[i].id).stop().fadeOut();
| |
- | $('#'+hover[i].id).fadeIn(1000);
| |
- | }
| |
- | }
| |
- | }
| |
- | });
| |
- | $('#'+id).mouseleave(
| |
- | function() {
| |
- | var hover;
| |
- | hover = document.getElementById(id).childNodes;
| |
- | for(var i=0, ii = hover.length; i < ii; i++) {
| |
- | if(hover[i].nodeName == "DIV"){
| |
- | if(hover[i].className == "page-box-bottom") {
| |
- | $('#'+hover[i].id).stop().fadeIn();
| |
- | $('#'+hover[i].id).fadeOut(1000);
| |
- | }
| |
- | }
| |
- | }
| |
- | });
| |
- | }
| |
- |
| |
- | </script>
| |
| </html> | | </html> |
| + | {{Template:Team:Bonn:MenuInit}} |