Team:Yale/Templates/Yale Header

From 2011.igem.org

(Difference between revisions)
 
(47 intermediate revisions not shown)
Line 9: Line 9:
<style type="text/css">
<style type="text/css">
-
/* Begin Darren's wiki and CSS hacks */
+
/* Begin Darren's wiki hacks */
body {
body {
Line 15: Line 15:
   margin:0; padding:0;
   margin:0; padding:0;
   font-family:Helvetica,Arial,sans-serif;
   font-family:Helvetica,Arial,sans-serif;
 +
}
 +
 +
p {
 +
  line-height:1.2em;
}
}
Line 67: Line 71:
#menubar li a:hover {
#menubar li a:hover {
-
   text-decoration: none;
+
   text-decoration:none;
 +
  color:#993333;
}
}
Line 83: Line 88:
}
}
-
.left-menu {
 
-
  margin-top:5px;
 
-
}
 
-
*/
 
/* End wiki and CSS hacks */
/* End wiki and CSS hacks */
Line 100: Line 101:
a img { border:0px }
a img { border:0px }
-
ul#menu {
+
#menu {
 +
 
     list-style:none;
     list-style:none;
 +
     text-align:left;
     text-align:left;
 +
     position:absolute;
     position:absolute;
 +
     padding:0px;
     padding:0px;
 +
    width:940px;
 +
     margin:0px;
     margin:0px;
 +
     left:440px;
     left:440px;
 +
     top:60px;
     top:60px;
-
     width:600px;
+
 
-
     min-height:30px;
+
     width:550px;
 +
 
 +
     min-height:32px;
 +
    padding:0px 20px 0px 20px;
 +
    z-index:1000000000;
 +
    /* Rounded Corners */ 
 +
 
 +
    -moz-border-radius: 10px; 
 +
    -webkit-border-radius: 10px; 
 +
    border-radius: 10px; 
 +
 
 +
    /* Background color and gradients */ 
 +
 
 +
    background: #014464; 
 +
    background: -moz-linear-gradient(top, #0272a7, #013953); 
 +
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); 
 +
 
 +
    /* Borders */ 
 +
 
 +
    border: 1px solid #002232; 
 +
 
 +
    -moz-box-shadow:inset 0px 0px 1px #edf9ff; 
 +
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff; 
 +
    box-shadow:inset 0px 0px 1px #edf9ff;
 +
 
}
}
-
        ul#menu li a {
+
 
-
            text-decoration:none;
+
 
-
            color:#333333;
+
#menu li {
-
            font-weight:bold;
+
 
-
            text-align:center;
+
float:left;
-
            float:left;
+
 
-
            margin-left:10px;
+
display:block;
-
            padding-top:4px;
+
 
-
            width:90px;
+
text-align:center;
-
            height:25px;          
+
 
-
        }
+
position:relative;
-
            ul#menu li a:hover {
+
 
-
                text-decoration:none;
+
padding: 4px 10px 4px 10px;
-
                color:#993333;
+
 
-
            }
+
margin-right:30px;
-
        ul#menu li a#page {
+
 
-
            color:#ffffff;
+
margin-top:2px;
-
            background:url(https://static.igem.org/mediawiki/2011/0/04/YaleButton.png);
+
 
-
        }
+
border:none;
-
        ul#menu li a#signup {
+
 
-
            color:#006633;
+
}
-
        }
+
 
 +
 
 +
 
 +
#menu li:hover {
 +
 
 +
border: 1px solid #777777;
 +
 
 +
padding: 4px 9px 4px 9px;
 +
 
 +
 +
 
 +
/* Background color and gradients */
 +
 
 +
 +
 
 +
background: #F4F4F4;
 +
 
 +
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 +
 
 +
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
 +
 
 +
 +
 
 +
/* Rounded corners */
 +
 
 +
 +
 
 +
-moz-border-radius: 5px 5px 0px 0px;
 +
 
 +
-webkit-border-radius: 5px 5px 0px 0px;
 +
 
 +
border-radius: 5px 5px 0px 0px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li a {
 +
 
 +
font-family:Arial, Helvetica, sans-serif;
 +
 
 +
font-size:14px;
 +
 
 +
color: #EEEEEE;
 +
 
 +
display:block;
 +
 
 +
outline:0;
 +
 
 +
text-decoration:none;
 +
 
 +
text-shadow: 1px 1px 1px #000;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li:hover a {
 +
 
 +
color:#161616;
 +
 
 +
text-shadow: 1px 1px 1px #ffffff;
 +
 
 +
}
 +
 
 +
#menu li .drop {
 +
 
 +
padding-right:21px;
 +
 
 +
background:url("https://static.igem.org/mediawiki/2011/b/b8/Drop.png") no-repeat right 5px;
 +
 
 +
}
 +
 
 +
#menu li:hover .drop {
 +
 
 +
background:url("https://static.igem.org/mediawiki/2011/b/b8/Drop.png") no-repeat right 4px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.dropdown_1column,
 +
 
 +
.dropdown_2columns,
 +
 
 +
.dropdown_3columns,
 +
 
 +
.dropdown_4columns,
 +
 
 +
.dropdown_5columns {
 +
 
 +
margin:4px auto;
 +
 
 +
float:left;
 +
 
 +
position:absolute;
 +
 
 +
left:-999em; /* Hides the drop down */
 +
 
 +
text-align:left;
 +
 
 +
padding:10px 5px 10px 5px;
 +
 
 +
border:1px solid #777777;
 +
 
 +
border-top:none;
 +
 
 +
 +
 
 +
/* Gradient background */
 +
 
 +
background:#F4F4F4;
 +
 
 +
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 +
 
 +
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
 +
 
 +
 
 +
 
 +
/* Rounded Corners */
 +
 
 +
-moz-border-radius: 0px 5px 5px 5px;
 +
 
 +
-webkit-border-radius: 0px 5px 5px 5px;
 +
 
 +
border-radius: 0px 5px 5px 5px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.dropdown_1column {width: 140px;}
 +
 
 +
.dropdown_2columns {width: 280px;}
 +
 
 +
.dropdown_3columns {width: 420px;}
 +
 
 +
.dropdown_4columns {width: 560px;}
 +
 
 +
.dropdown_5columns {width: 700px;}
 +
 
 +
 
 +
 
 +
#menu li:hover .dropdown_1column,
 +
 
 +
#menu li:hover .dropdown_2columns,
 +
 
 +
#menu li:hover .dropdown_3columns,
 +
 
 +
#menu li:hover .dropdown_4columns,
 +
 
 +
#menu li:hover .dropdown_5columns {
 +
 
 +
left:-1px;
 +
 
 +
top:auto;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.col_1,
 +
 
 +
.col_2,
 +
 
 +
.col_3,
 +
 
 +
.col_4,
 +
 
 +
.col_5 {
 +
 
 +
display:inline;
 +
 
 +
float: left;
 +
 
 +
position: relative;
 +
 
 +
margin-left: 5px;
 +
 
 +
margin-right: 5px;
 +
 
 +
}
 +
 
 +
.col_1 {width:130px;}
 +
 
 +
.col_2 {width:270px;}
 +
 
 +
.col_3 {width:410px;}
 +
 
 +
.col_4 {width:550px;}
 +
 
 +
.col_5 {width:690px;}
 +
 
 +
 
 +
 
 +
#menu .menu_right {
 +
 
 +
float:right;
 +
 
 +
margin-right:0px;
 +
 
 +
}
 +
 
 +
#menu li .align_right {
 +
 
 +
/* Rounded Corners */
 +
 
 +
-moz-border-radius: 5px 0px 5px 5px;
 +
 
 +
    -webkit-border-radius: 5px 0px 5px 5px;
 +
 
 +
    border-radius: 5px 0px 5px 5px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li:hover .align_right {
 +
 
 +
left:auto;
 +
 
 +
right:-1px;
 +
 
 +
top:auto;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu p, #menu h2, #menu h3, #menu ul li {
 +
 
 +
font-family:Arial, Helvetica, sans-serif;
 +
 
 +
line-height:21px;
 +
 
 +
font-size:12px;
 +
 
 +
text-align:left;
 +
 
 +
text-shadow: 1px 1px 1px #FFFFFF;
 +
 
 +
}
 +
 
 +
#menu h2 {
 +
 
 +
font-size:21px;
 +
 
 +
font-weight:400;
 +
 
 +
letter-spacing:-1px;
 +
 
 +
margin:7px 0 14px 0;
 +
 
 +
padding-bottom:14px;
 +
 
 +
border-bottom:1px solid #666666;
 +
 
 +
}
 +
 
 +
#menu h3 {
 +
 
 +
font-size:14px;
 +
 
 +
margin:7px 0 14px 0;
 +
 
 +
padding-bottom:7px;
 +
 
 +
border-bottom:1px solid #888888;
 +
 
 +
}
 +
 
 +
#menu p {
 +
 
 +
line-height:18px;
 +
 
 +
margin:0 0 10px 0;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li:hover div a {
 +
 
 +
font-size:12px;
 +
 
 +
color:#015b86;
 +
 
 +
}
 +
 
 +
#menu li:hover div a:hover {
 +
 
 +
color:#029feb;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.strong {
 +
 
 +
font-weight:bold;
 +
 
 +
}
 +
 
 +
.italic {
 +
 
 +
font-style:italic;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.imgshadow { /* Better style on light background */
 +
 
 +
background:#FFFFFF;
 +
 
 +
padding:4px;
 +
 
 +
border:1px solid #777777;
 +
 
 +
margin-top:5px;
 +
 
 +
-moz-box-shadow:0px 0px 5px #666666;
 +
 
 +
-webkit-box-shadow:0px 0px 5px #666666;
 +
 
 +
box-shadow:0px 0px 5px #666666;
 +
 
 +
}
 +
 
 +
.img_left { /* Image sticks to the left */
 +
 
 +
width:auto;
 +
 
 +
float:left;
 +
 
 +
margin:5px 15px 5px 5px;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li .black_box {
 +
 
 +
background-color:#333333;
 +
 
 +
color: #eeeeee;
 +
 
 +
text-shadow: 1px 1px 1px #000;
 +
 
 +
padding:4px 6px 4px 6px;
 +
 
 +
 
 +
 
 +
/* Rounded Corners */
 +
 
 +
-moz-border-radius: 5px;
 +
 
 +
    -webkit-border-radius: 5px;
 +
 
 +
    border-radius: 5px;
 +
 
 +
 
 +
 
 +
/* Shadow */
 +
 
 +
-webkit-box-shadow:inset 0 0 3px #000000;
 +
 
 +
-moz-box-shadow:inset 0 0 3px #000000;
 +
 
 +
box-shadow:inset 0 0 3px #000000;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li ul {
 +
 
 +
list-style:none;
 +
 
 +
padding:0;
 +
 
 +
margin:0 0 12px 0;
 +
 
 +
}
 +
 
 +
#menu li ul li {
 +
 
 +
font-size:12px;
 +
 
 +
line-height:24px;
 +
 
 +
position:relative;
 +
 
 +
text-shadow: 1px 1px 1px #ffffff;
 +
 
 +
padding:0;
 +
 
 +
margin:0;
 +
 
 +
float:none;
 +
 
 +
text-align:left;
 +
 
 +
width:130px;
 +
 
 +
}
 +
 
 +
#menu li ul li:hover {
 +
 
 +
background:none;
 +
 
 +
border:none;
 +
 
 +
padding:0;
 +
 
 +
margin:0;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
#menu li .greybox li {
 +
 
 +
background:#F4F4F4;
 +
 
 +
border:1px solid #bbbbbb;
 +
 
 +
margin:0px 0px 4px 0px;
 +
 
 +
padding:4px 6px 4px 6px;
 +
 
 +
width:116px;
 +
 
 +
 
 +
 
 +
/* Rounded Corners */
 +
 
 +
-moz-border-radius: 5px;
 +
 
 +
    -webkit-border-radius: 5px;
 +
 
 +
    -khtml-border-radius: 5px;
 +
 
 +
    border-radius: 5px;
 +
 
 +
}
 +
 
 +
#menu li .greybox li:hover {
 +
 
 +
background:#ffffff;
 +
 
 +
border:1px solid #aaaaaa;
 +
 
 +
padding:4px 6px 4px 6px;
 +
 
 +
margin:0px 0px 4px 0px;
 +
 
 +
}
 +
 
 +
 
div#spanner {
div#spanner {
 +
     position:absolute;
     position:absolute;
 +
     top:160px;
     top:160px;
 +
     left:40px;
     left:40px;
 +
     width:920px;
     width:920px;
 +
     height:334px;
     height:334px;
-
     background:url(https://static.igem.org/mediawiki/2011/8/82/YaleFg.png) no-repeat;
+
 
 +
     background:url(https://static.igem.org/mediawiki/2011/8/82/YaleFg.png) no-repeat;  
 +
 
}
}
 +
 +
div#text{
 +
 +
    position:absolute;
 +
 +
    top:160px;
 +
 +
    left:40px;
 +
 +
    width:920px;
 +
 +
    height:334px;
 +
 +
}
 +
 +
div#container {
 +
        /* Rounded Corners */ 
 +
 
 +
    -moz-border-radius: 10px; 
 +
    -webkit-border-radius: 10px; 
 +
    border-radius: 10px; 
 +
 
 +
    /* Background color and gradients */ 
 +
 
 +
    background: #014464; 
 +
    background: -moz-linear-gradient(top, #0272a7, #013953); 
 +
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to
 +
 +
(#013953)); 
 +
 
 +
    /* Borders */ 
 +
 
 +
    border: 1px solid #002232; 
 +
 
 +
    -moz-box-shadow:inset 0px 0px 1px #edf9ff; 
 +
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff; 
 +
    box-shadow:inset 0px 0px 1px #edf9ff;
 +
}
 +
 +
     div#spanner p#abstract {
     div#spanner p#abstract {
 +
         position:absolute;
         position:absolute;
 +
         margin-left:420px;
         margin-left:420px;
-
         margin-top:30px;
+
 
 +
         margin-top:35px;
 +
 
         color:#ffffff;
         color:#ffffff;
 +
        font-size:13px;
     }
     }
 +
 +
div#content {
div#content {
-
     padding-top:520px;
+
 
 +
     padding-top:450px;
 +
 
     width:960px;
     width:960px;
 +
     padding-bottom:0px;
     padding-bottom:0px;
 +
}
}
 +
 +
 
 +
     div#content p {
     div#content p {
 +
         font-size:15px;
         font-size:15px;
 +
         margin-left:20px;
         margin-left:20px;
-
         margin-top:50px;
+
 
 +
         margin-top:60px;
 +
 
         margin-right:20px;
         margin-right:20px;
 +
         text-align:justify;
         text-align:justify;
 +
     }
     }
 +
 +
 +
     div#content div.col1 {
     div#content div.col1 {
 +
         float:left;
         float:left;
-
         background:url(images/col1.png) no-repeat;
+
 
 +
         background:url(https://static.igem.org/mediawiki/2011/e/eb/YaleCol1.png) no-repeat;
 +
 
         margin:0px;
         margin:0px;
 +
         padding:0px;
         padding:0px;
 +
         width:320px;
         width:320px;
 +
         height:200px;
         height:200px;
 +
     }
     }
 +
 +
 +
     div#content div.col2 {
     div#content div.col2 {
 +
         float:left;
         float:left;
-
         background:url(images/col2.png) no-repeat;
+
 
 +
         background:url(https://static.igem.org/mediawiki/2011/8/87/YaleCol2.png) no-repeat;
 +
 
         margin:0px;
         margin:0px;
 +
         padding:0px;
         padding:0px;
 +
         width:320px;
         width:320px;
 +
         height:200px;
         height:200px;
 +
     }
     }
 +
 +
 +
     div#content div.col3 {
     div#content div.col3 {
 +
         float:left;
         float:left;
-
         background:url(images/col3.png) no-repeat;
+
 
 +
         background:url(https://static.igem.org/mediawiki/2011/7/7d/YaleCol3.png) no-repeat;
 +
 
         margin:0px;
         margin:0px;
 +
         padding:0px;
         padding:0px;
 +
         width:320px;
         width:320px;
 +
         height:200px;
         height:200px;
 +
     }
     }
 +
 +
 +
 +
#center {
 +
    text-align:center;
 +
    padding-top:15px;
 +
    padding-bottom:50px;
 +
}
/* End CSS */
/* End CSS */
Line 201: Line 800:
         </div>
         </div>
         <ul id="menu">
         <ul id="menu">
-
    <li><a id="page" href="index.html">home</a></li>
+
 
-
    <li><a href="#">project</a></li>
+
    <li><a href="https://2011.igem.org/Team:Yale">Home</a>
-
    <li><a href="#">notebook</a></li>
+
 
-
    <li><a href="#">safety</a></li>
+
    <li><a href="https://2011.igem.org/Team:Yale/Project" class="drop">Project</a>
-
    <li><a href="#">about</a></li>
+
        <div class="dropdown_1column">
 +
 
 +
                        <div class="col_1">     
 +
 
 +
                            <ul class="simple">
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Project">Overview</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Project/Introduction">Introduction</a></li>
 +
<li><a href="https://2011.igem.org/Team:Yale/Parts">BioBricks</a></li>
 +
<li><a href="https://2011.igem.org/Team:Yale/Protein">Proteins</a></li>
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Project/Assays">Functional Assays</a></li>
 +
<li><a href="https://2011.igem.org/Team:Yale/Project/Crystallography">Crystallography</a></li>
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Project/MAGE">MAGE</a></li>
 +
<li><a href="https://2011.igem.org/Team:Yale/Project/References">References</a></li>
 +
                               
 +
 
 +
 
 +
 
 +
                            </ul>   
 +
 
 +
                        </div>               
 +
 
 +
            </div>
 +
            </li>
 +
 
 +
    <li><a href="https://2011.igem.org/Team:Yale/Notebook/Week1" class="drop">Notebook</a>
 +
        <div class="dropdown_1column">
 +
 
 +
                        <div class="col_1">     
 +
 
 +
                            <ul class="simple">
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Protocols">Protocols</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Notebook/Week1">Week 1</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Notebook/Week2">Week 2</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Notebook/Week3">Week 3</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Notebook/Week4">Week 4</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Notebook/Week5">See more weeks...</a></li>
 +
 
 +
                            </ul>   
 +
 
 +
                        </div>               
 +
 
 +
            </div>
 +
        </li>
 +
 
 +
    <li><a href="https://2011.igem.org/Team:Yale/Safety">Safety</a></li>
 +
 
 +
    <li><a href="https://2011.igem.org/Team:Yale/Team" class="drop">About</a>
 +
        <div class="dropdown_1column">
 +
 
 +
                        <div class="col_1">     
 +
 
 +
                            <ul class="simple">
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Team">Our team</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Team/Advisors">Our advisors</a></li>
 +
 
 +
                                <li><a href="https://2011.igem.org/Team:Yale/Team/Acknowledgements">Acknowledgements</a></li>
 +
 
 +
                            </ul>   
 +
 
 +
                        </div>               
 +
 
 +
            </div>
 +
        </li>
 +
 
         </ul>
         </ul>
-
        <div id="spanner">
 
-
            <p id="abstract">
 
-
                Abstract goes here.
 
-
            </p>           
 
-
        </div>
 
-
        <div id="content">
 
-
            <div class="col1">
 
-
                <p>Type in a short overview about what our objectives were, experimental design, various assays completed, snapshot of results.  Another sentence here...</p>
 
-
            </div>
 
-
            <div class="col2">
 
-
                <p>Mention briefly some protocols and other things related to documentation, etc.  Actually, I'll write in the short description later....</p>
 
-
            </div>
 
-
            <div class="col3">
 
-
                <p>A second year entrant to the iGEM competition, our team is comprised of students from a wide range of backgrounds connected by a common passion for synthetic biology and its applications. </p>
 
-
            </div>
 
-
            <div style="clear:both"></div>
 
-
        </div>
 
     </div>
     </div>
</div>
</div>
Line 229: Line 884:
</div>
</div>
</body>
</body>
-
</html>
 
-
 
-
 
-
 
</html>
</html>

Latest revision as of 00:07, 29 September 2011

iGEM Yale

Retrieved from "http://2011.igem.org/Team:Yale/Templates/Yale_Header"