Team:Yale/Templates/Yale Header

From 2011.igem.org

(Difference between revisions)
Line 101: 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;
+
 
 +
     width:550px;
 +
 
     min-height:30px;
     min-height:30px;
 +
    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("images/drop.png") no-repeat right 5px;
 +
 
 +
}
 +
 
 +
#menu li:hover .drop {
 +
 
 +
background:url("images/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:180px;
 +
 
     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(images/fg.png) no-repeat;
 +
 
}
}
 +
 +
 +
     div#spanner p#abstract {
     div#spanner p#abstract {
 +
         position:absolute;
         position:absolute;
 +
         margin-left:420px;
         margin-left:420px;
-
         margin-top:40px;
+
 
 +
         margin-top:30px;
 +
 
         color:#ffffff;
         color:#ffffff;
 +
     }
     }
-
div#contents {
+
 
-
     padding-top:450px;
+
 
 +
div#content {
 +
 
 +
     padding-top:520px;
 +
 
     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:60px;
+
 
 +
         margin-top:50px;
 +
 
         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(https://static.igem.org/mediawiki/2011/e/eb/YaleCol1.png) no-repeat;
+
 
 +
         background:url(images/col1.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(https://static.igem.org/mediawiki/2011/8/87/YaleCol2.png) no-repeat;
+
 
 +
         background:url(images/col2.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(https://static.igem.org/mediawiki/2011/7/7d/YaleCol3.png) no-repeat;
+
 
 +
         background:url(images/col3.png) no-repeat;
 +
 
         margin:0px;
         margin:0px;
 +
         padding:0px;
         padding:0px;
 +
         width:320px;
         width:320px;
 +
         height:200px;
         height:200px;
 +
     }
     }
 +
 +
#center {
#center {
 +
     text-align:center;
     text-align:center;
-
    padding-top:15px;
+
 
-
    padding-bottom:50px;
+
}
}
Line 208: Line 763:
         </div>
         </div>
         <ul id="menu">
         <ul id="menu">
-
    <li><a id="page" href="https://2011.igem.org/Team:Yale">home</a></li>
+
 
-
    <li><a href="https://2011.igem.org/Team:Yale/Project">project</a></li>
+
    <li><a href="index.html">home</a>
-
    <li><a href="https://2011.igem.org/Team:Yale/Notebook">notebook</a></li>
+
 
-
    <li><a href="https://2011.igem.org/Team:Yale/Safety">safety</a></li>
+
    <li><a href="#" class="drop">project</a>
-
    <li><a href="https://2011.igem.org/Team:Yale/Team">about</a></li>
+
        <div class="dropdown_1column">
 +
 
 +
                        <div class="col_1">     
 +
 
 +
                            <ul class="simple">
 +
 
 +
                                <li><a href="#">Overview</a></li>
 +
 
 +
                                <li><a href="#">Antifreeze Proteins</a></li>
 +
 
 +
                                <li><a href="#">Applications</a></li>
 +
 
 +
                                <li><a href="#">Assays</a></li>
 +
 
 +
                                <li><a href="#">MAGE</a></li>
 +
 
 +
                                <li><a href="#">Crystallography</a></li>
 +
 
 +
                            </ul>   
 +
 
 +
                        </div>               
 +
 
 +
            </div>
 +
            </li>
 +
 
 +
    <li><a href="#" class="drop">notebook</a>
 +
        <div class="dropdown_1column">
 +
 
 +
                        <div class="col_1">     
 +
 
 +
                            <ul class="simple">
 +
 
 +
                                <li><a href="#">Protocols</a></li>
 +
 
 +
                                <li><a href="#">Week 1</a></li>
 +
 
 +
                                <li><a href="#">Week 2</a></li>
 +
 
 +
                                <li><a href="#">Week 3</a></li>
 +
 
 +
                                <li><a href="#">Week 4</a></li>
 +
 
 +
                                <li><a href="#">See more weeks...</a></li>
 +
 
 +
                            </ul>   
 +
 
 +
                        </div>               
 +
 
 +
            </div>
 +
        </li>
 +
 
 +
    <li><a href="#">safety</a></li>
 +
 
 +
    <li><a href="#" class="drop">about</a>
 +
        <div class="dropdown_1column">
 +
 
 +
                        <div class="col_1">     
 +
 
 +
                            <ul class="simple">
 +
 
 +
                                <li><a href="#">Our team</a></li>
 +
 
 +
                                <li><a href="#">Our advisors</a></li>
 +
 
 +
                                <li><a href="#">Acknowledgements</a></li>
 +
 
 +
                            </ul>   
 +
 
 +
                        </div>               
 +
 
 +
            </div>
 +
        </li>
 +
 
         </ul>
         </ul>
     </div>
     </div>

Revision as of 17:00, 25 September 2011

iGEM Yale

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