Team:UCLondon/Templates/Header

From 2012e.igem.org

(Difference between revisions)
 
(180 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:UCLondon/Templates/Navigation}}
+
{{:Team:UCLondon/Templates/Navigationv4}}
<html>
<html>
-
  <div id="logo"><h1>Morph Bioinformatics</h1></div>
+
<div id="shadow" style="display:none;" >
 +
<div id="close-box" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div>
-
   <div id="page-title"><h2>Codon Usage Optimizer </h2></div>
+
<div id="box-content" style="width:95%; height:95%; margin:auto;">
 +
<div id="load" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
 
 +
  <div id="logo"><h1>Morph<img src="https://dl.dropbox.com/u/45600819/Morph%20Logo-bright.png" height="55"/>Bioinformatics</h1></div>
 +
 
 +
   <div id="page-title"><h2></html>{{{1}}}<html></h2></div>
Line 14: Line 24:
   <style type="text/css">
   <style type="text/css">
-
   
+
     body {
-
     body { background-image: url(http://db.tt/A6rAg7D9); }
+
        background-color: rgb(242, 242, 242);
-
     .firstHeading { display: none; }
+
        background-image: url(http://db.tt/A6rAg7D9);
 +
        background-image: url(http://db.tt/A6rAg7D9), -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgb(242, 242, 242) ), to( rgb(242, 242, 242) ) );
 +
        background-image: url(http://db.tt/A6rAg7D9), -webkit-linear-gradient(top, rgb(242, 242, 242),  rgb(242, 242, 242)),;
 +
        background-image: url(http://db.tt/A6rAg7D9), -moz-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) );
 +
        background-image: url(http://db.tt/A6rAg7D9), -ms-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) );
 +
        background-image: url(http://db.tt/A6rAg7D9), -o-linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) );
 +
        background-image: url(http://db.tt/A6rAg7D9), linear-gradient(top, rgb(242, 242, 242), rgb(242, 242, 242) );
 +
       
 +
 
 +
        background-position: top;
 +
        background-repeat: repeat-x;
 +
  }
 +
     .firstHeading { display: none; }  
Line 22: Line 44:
     #logo h1 {  
     #logo h1 {  
         border-bottom-width: 0px; border: none; width: 70%;  clear:both; margin: auto;  text-align: center ;  font-variant:small-caps;
         border-bottom-width: 0px; border: none; width: 70%;  clear:both; margin: auto;  text-align: center ;  font-variant:small-caps;
-
         font-family: 'Gill Sans', Arial, sans-serif;  font-size: 40px; color: rgb(189, 214, 217);  text-shadow: rgb(0, 0, 0) 2px 1px 2px;
+
         font-family: 'Gill Sans', Arial, sans-serif;  font-size: 40px; color: rgb(189, 214, 227);  text-shadow: rgb(0, 0, 0) 2px 1px 2px;
     }
     }
 +
    #logo img {}
-
     #page-title { width: 739px; clear:both; margin:auto; height:40px;}
+
 
 +
     #page-title { width: 833px; clear:both; margin:auto; height:40px; padding-right: 1px; background-color: rgba(5, 5, 5, 0.7);    border-radius: 10px 10px 0 0; 
 +
                        position:relative; bottom:-20px; padding-bottom:10px;}
     #page-title  h2 {  
     #page-title  h2 {  
-
         border-bottom-width: 0px; border: none; width: 70%;  clear:both; margin: auto;  text-align: center ;  font-variant:small-caps;
+
         border-bottom-width: 0px; border: none; width: 70%;  clear:both; margin: auto;  text-align: center ;   
-
         font-family: 'Gill Sans', Arial, sans-serif;  font-size: 40px; color: rgb(189, 214, 217);  text-shadow: rgb(0, 0, 0) 2px 1px 2px;
+
         font-family: 'Gill Sans', Arial, sans-serif;  font-size: 25px; color: rgb(179, 179, 179);  text-shadow: rgb(0, 0, 0) 2px 1px 2px;
     }
     }
     /* attempts to change footer doesn't work */
     /* attempts to change footer doesn't work */
   #footer-box { background-color: rgba (255, 255, 255, 0.5); }
   #footer-box { background-color: rgba (255, 255, 255, 0.5); }
-
  </style>
 
 +
 +
  .MBWikiStyle {
 +
          background-color:white;
 +
 +
          background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 0.7) ), to( rgb(249, 249, 249) ) );
 +
          background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
          background-image: -moz-linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
          background-image: -ms-linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
          background-image: -o-linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
          background-image: linear-gradient(top,  rgba(255, 255, 255, 0.7), rgb(249, 249, 249) );
 +
 +
          box-shadow: 2px 5px 5px #888;
 +
          border-radius: 5px;
 +
 +
          width:833px;
 +
          margin:auto;
 +
          position:relative; 
 +
          z-index:1;
 +
          top: 5px;
 +
    }
 +
 +
    .MBWikiStyle *:not(table), .MBWikiStyle #toc { border: none !important;  }
 +
    .MBWikiStyle #toc, .MBWikiStyle #toc a:hover { background-color: rgba(0, 0, 0, 0); text-decoration:none; width:98%; margin:auto; }
 +
    .MBWikiStyle .sidebar { width:20% !important; float: left !important; height: 100%;  background-color: rgba(0, 0, 0, 0);  }
 +
    .MBWikiStyle .sidebar a { font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: bold; color: rgb(56, 90, 79); }
 +
    .MBWikiStyle .sidebar a:hover { color: rgb(64, 128, 0); }
 +
    .MBWikiStyle .sidebar a .tocnumber {display: none; }
 +
    .MBWikiStyle .sidebar li li:before { content:"-";}
 +
 
 +
 +
      #toctitle { display: none; }
 +
    .MBWikiStyle .MBContent {
 +
                              float:right; width: 75%; margin:auto; 
 +
                              border-left-color: rgb(231, 230, 230) !important; border-left-width: 1px !important; border-left-style:solid !important;
 +
                              padding-left: 20px; padding-right: 20px;
 +
      }
 +
 +
 +
    .MBWikiStyle .MBContent h2 { color: rgb(56, 90, 79); font-family: 'Myriad Pro', Helvetica, sans-serif; font-size: 24px; font-weight: bold; }
 +
    .MBWikiStyle .MBContent h3 { color: rgb(73, 117, 103);  }
 +
    .MBWikiStyle .MBContent .editsection { font-size: 9px; font-family:  Helvetica, sans-serif; }
 +
    .MBWikiStyle .MBContent p, .MBWikiStyle .MBContent li  { color: rgb(117, 117, 117); font-family:  Helvetica, sans-serif; font-size: 13px; }
 +
 +
 +
    .MBWikiStyle #toc.fixed { position:fixed; top:0; }
 +
 +
#shadow {
 +
 +
          background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
 +
          background-image:  -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -moz-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -ms-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -o-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-color: rgb(255,255,255);
 +
         
 +
 +
          box-shadow: 1px 2px 5px 5px #888;
 +
          border-radius: 5px;
 +
 +
              position:fixed;
 +
              height: 400px;
 +
              width:50%;
 +
              margin:auto;
 +
              z-index: 999999999999999999999999;
 +
  }
 +
 +
  </style>
 +
  <script src="https://dl.dropbox.com/u/3703109/igeme/js/mb-additions.js"></script>
   <script type="text/javascript">
   <script type="text/javascript">
 +
 +
  $(document).ready(function() {
 +
        var nHeight = $('.MBContent').height();
 +
        $('.MBWikiStyle').css('height', nHeight);
 +
 +
          setTimeout(function(){
 +
                                var nHeight = $('.MBContent').height();
 +
                                $('.MBWikiStyle').css('height', nHeight);
 +
                                },2000);
 +
 +
 +
 +
        var top = $('#toc').offset().top - parseFloat($('#toc').css('marginTop').replace(/auto/,0));
 +
 
 +
        $(window).scroll(function (event) {
 +
            var y = $(this).scrollTop();
 +
 
 +
            if (y >= top) {
 +
                // if so, ad the fixed class
 +
                $('#toc').addClass('fixed');
 +
            } else {
 +
                $('#toc').removeClass('fixed');
 +
            }
 +
    });
 +
});
 +
   </script>
   </script>
</html>
</html>

Latest revision as of 00:02, 28 October 2012

{{{1}}}