Team:Michigan/Test Css

From 2012.igem.org

(Difference between revisions)
 
(325 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
 +
 +
 +
<script type="text/javascript">
 +
 +
$(function(){
 +
$('.slideshow img:gt(0)')
 +
        .hide();
 +
setInterval(function(){
 +
        $('.slideshow :first-child')
 +
        .fadeOut()
 +
        .next('img')
 +
        .fadeIn()
 +
        .end()
 +
        .appendTo('.slideshow');}, 6000);
 +
});
 +
 +
 +
</script>
 +
 +
 +
<head>
 +
<style type="text/css">
<style type="text/css">
 +
div#navigation{
 +
/* Old browsers */
 +
border-radius: 0px;
 +
padding:90px 0 0 0;
 +
}
 +
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
 +
#navigation ul li{
 +
        float:left;
 +
        position:relative;
 +
 +
}
 +
#navigation ul li a{
 +
 +
display:block;
 +
padding:7px 12px;
 +
margin-left:auto;
 +
        margin-right:auto;
 +
font-size:18px;
 +
white-space:nowrap;
 +
border-radius:1px;
 +
 +
}
 +
#navigation ul li a:hover{}
 +
#navigation ul li ul li a{
 +
width: 75px;
 +
}
 +
#navigation ul ul li a:hover{
 +
        background:#063257;
 +
background-repeat:repeat-x;
 +
        color:#fff080;
 +
background-size:200%;
 +
}
 +
#navigation ul ul{
 +
position:absolute;
 +
height:-99999px;
 +
margin-left:auto;
 +
        margin-right:auto;
 +
opacity: 0; /* Hide sub level */
 +
-webkit-transition: opacity .5s ease-in-out;
 +
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
z-index:497;
 +
background:#fff080;
 +
padding: 0px;
 +
border:1px solid #063257;
 +
border-top:1px solid #063257;
 +
box-shadow:#111 0 3px 4px;
 +
border-bottom-left-radius:2px;
 +
border-bottom-right-radius:2px;
 +
 +
}
 +
#navigation ul ul ul {
 +
margin-left:auto;
 +
        margin-right:auto;
 +
 +
 +
opacity: 0;
 +
-webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */
 +
-moz-transition: opacity .5s ease-in-out;
 +
-o-transition: opacity .5s ease-in-out;
 +
border-radius:6px;
 +
border:1px solid #444;
 +
}
 +
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
 +
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
 +
 +
 +
.slideshow img { position:absolute; left:10; top:10; }
 +
 +
.slideshow {
 +
    margin: -375px 0px 0px 400px;
 +
    position: absolute;
 +
    width: 520px;
 +
    height: 350px;
 +
    padding: 10px;
 +
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
 +
}
 +
 +
 +
#footer-box {
 +
    width:100%;
 +
    border:none;
 +
    padding:5px 0;
 +
    opacity:0.6;
 +
    filter:alpha(opacity=60); /* For IE8 and earlier */
 +
}
 +
 +
 +
#top-section {
 +
    height: 0px; }
 +
#p-logo {
 +
    height:0px; overflow:hidden; display:none;}
 +
#search-controls {
 +
    display:none;}
 +
 +
#top-section {
 +
    height:14px;
 +
    width: 100%;
 +
    border: 0;
 +
    background: rgba(51,51,51,1)}
 +
.left-menu a {
 +
    color: white; }
 +
.left-menu:hover {
 +
    color: white;
 +
    background: transparent; }
 +
.left-menu:hover a {
 +
    color: white; }
 +
.right-menu li a {
 +
    background-color: transparent;
 +
    color: white;}
 +
#content {
 +
    width:100%;
 +
    border:none;
 +
    padding:0;
 +
}
 +
#content #top, #content #siteSub, #content #contentSub {
 +
  display:none;
 +
  margin:0;
 +
  padding:0;
 +
}
 +
/* Hides default page title beneath banner */
 +
.firstHeading {
 +
  height:0px;
 +
  visibility:hidden;
 +
}
/*------------------------- Layout styles ------------------------*/  
/*------------------------- Layout styles ------------------------*/  
body{
body{
-
margin:0;
+
 
-
background:url(../images/DNA_Background.png);
+
margin:0 auto;
 +
        width: 962px;
 +
        height: 0 auto;
 +
background:url(https://static.igem.org/mediawiki/2012/7/75/DNA_Background.png) no-repeat center top;
 +
        background-attachment: fixed;
}
}
.page{
.page{
-
background:url(../images/header.png) no-repeat center top;
+
        margin: -23px 0 0px 0;
 +
        width:962px;
 +
        height: 0 auto;
 +
background:url(https://static.igem.org/mediawiki/2012/4/49/Michigan_Invisible_Header.png) no-repeat center top;
}
}
/*------------------------- Font ------------------------*/  
/*------------------------- Font ------------------------*/  
@font-face {
@font-face {
-
    font-family: 'RokkittRegular';
+
p.sansserif{font-family:Century Gothic,sans-serif;}
-
    src: url('rokkitt-regular-webfont.eot');
+
-
    src: url('rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
+
-
        url('rokkitt-regular-webfont.woff') format('woff'),
+
-
        url('rokkitt-regular-webfont.ttf') format('truetype'),
+
-
        url('rokkitt-regular-webfont.svg#RokkittRegular') format('svg');
+
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
Line 26: Line 175:
/*------------------------- Header ------------------------*/  
/*------------------------- Header ------------------------*/  
.header{
.header{
-
background:url(../images/divider.png) no-repeat center 124px;
+
background:url(https://static.igem.org/mediawiki/2012/f/fe/Michigan_Blue_Divider.png) no-repeat center 124px;
width:962px;
width:962px;
-
margin:0 auto;
+
margin:0 auto ;
-
height:126px;
+
height:124px;
padding:0px 0px 0;
padding:0px 0px 0;
}
}
Line 36: Line 185:
float:left;
float:left;
outline:none;
outline:none;
 +
        margin:17px 0 0 15px;
}
}
.header a#logo img{
.header a#logo img{
border:0;
border:0;
 +
}
 +
.header a#name{
 +
        display:block;
 +
        float:left;
 +
        outline:none;
 +
        margin:17px 0 0 0;
 +
}
 +
.header a#name img{
 +
        border:0;
}
}
.header ul{
.header ul{
-
margin:0;
+
margin:0 15px 0 0;
list-style:none;
list-style:none;
padding:100px 0 0;
padding:100px 0 0;
Line 51: Line 210:
}
}
.header ul li.selected a,.header ul li a:hover{
.header ul li.selected a,.header ul li a:hover{
-
color:#f78117;
+
color:#063257;
}
}
.header ul li a{
.header ul li a{
font-size:16px;
font-size:16px;
text-decoration:none;
text-decoration:none;
-
color:#5e5e5e;
+
color:#063257;
-
font-family: 'RokkittRegular';
+
 
outline:none;
outline:none;
}
}
/*------------------------- Body ------------------------*/  
/*------------------------- Body ------------------------*/  
-
.body{
+
 
-
background:url(../images/body.png);
+
/*.body{
 +
/*background:url(https://static.igem.org/mediawiki/2012/8/89/Michigan_body.png);*/
width:962px;
width:962px;
margin: 0px auto;
margin: 0px auto;
-
padding:0 0px;
+
padding:0 0 100px 0px;
overflow:hidden;
overflow:hidden;
-
}
+
}*/
.body div#featured{
.body div#featured{
-
background:url(../images/DNA.png) no-repeat right top;
+
background:url(https://static.igem.org/mediawiki/2012/e/eb/Random_Michigan_1.png) no-repeat right top;
-
height:448px;
+
height:0px;
-
padding:0 0 17px;
+
padding:50px 0px 17px 0px;
 +
        margin: -30px 0 0 0;
}
}
.body div#featured h3{
.body div#featured h3{
-
color:#f78117;
+
        line-height:110%;
-
font-size:36px;
+
color:#063257;
-
font-family: 'RokkittRegular';
+
font-size:24px;
margin:0 0 30px;
margin:0 0 30px;
-
width:490px;
+
width:362px;
-
padding:100px 0 0;
+
padding:50px 16px 0;
-
font-weight:normal;
+
font-weight:bold;
 +
        font-style:italic;
}
}
.body div#featured p{
.body div#featured p{
-
width:400px;
+
width:362px;
-
color:#5d5d5d;
+
color:#063257;
-
font-family: 'RokkittRegular';
+
font-size:16px;
font-size:16px;
-
line-height:25px;
+
line-height:22px;
text-shadow: 0 1px 0 #fcfcfc;
text-shadow: 0 1px 0 #fcfcfc;
text-align:justify;
text-align:justify;
margin:0;
margin:0;
 +
        padding: 0px 16px 50px;
}
}
-
.body div#featured input{
+
 
-
background:url(../images/interface.jpg) no-repeat;
+
 
-
border:0;
+
 
-
    height:48px;
+
</style>
-
    width:216px;
+
 
-
font-family: 'RokkittRegular';
+
 
-
color:#fff;
+
 
-
font-size:30px;
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-
margin:28px 0 0 125px;
+
<title>Xayona Website Template</title>
-
cursor:pointer;
+
<link rel="stylesheet" href="css/style.css" type="text/css" />
-
outline:none;
+
<!--[if IE 7]>
-
}
+
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
-
.body ul.blog{
+
<![endif]-->
-
list-style:none;
+
</head>
-
margin:40px 0 0;
+
<body>
-
padding:0 0 50px;
+
<div class="page">
-
background:url(../images/separator.jpg) no-repeat center top;
+
<div class="header">
-
overflow:hidden;
+
<a href="https://2012.igem.org"><img src="https://static.igem.org/mediawiki/2012/8/83/Igem_icon.png" style="position:absolute;right:0;top:0;" alt=""></img></a>
-
}
+
<a href="index.html" id="logo"><img src="https://static.igem.org/mediawiki/2012/c/c2/Michigan_2012_Logo_ani.gif" alt=""/></a>
-
.body ul.blog li:first-child{
+
                                <a href="index.html" id="name"><img src="https://static.igem.org/mediawiki/2012/5/5f/Michigan_2012_Site_name.png" alt=""/></a>
-
margin:60px 0 0;
+
                        <div id="navigation">
-
}
+
<ul>
-
.body ul.blog li{
+
<li class="selected"><a href="index.html">Project</a>
-
float:left;
+
<ul>
-
background:url(../images/interface.jpg) no-repeat 0 -86px!important;
+
                                              <li><a href="#">Option 1</a></li>
-
margin:60px 0 0 48px;
+
                                              <li><a href="#">Option 2</a></li>
-
height:400px;
+
</ul></li>
-
padding:0;
+
<li><a href="about.html">Notebook</a>
-
}
+
                                            <ul>
-
.body ul.blog li div{
+
                                              <li><a href="#">Option 1</a></li>
-
width:281px;
+
                                              <li><a href="#">Option 2</a></li>
-
height:380px;
+
                                            </ul>
-
text-align:center;
+
                                        </li>
-
padding: 8px 0 20px 0;
+
<li><a href="blog.html">Team</a>
-
float:none;
+
                                            <ul>
-
margin:0;
+
                                              <li><a href="#">Option 1 </a></li>
-
background:none;
+
                                              <li><a href="#">Option 2 </a></li>
-
}
+
                                            </ul>
-
.body ul.blog li div a img{
+
                                        </li>
-
border:0;
+
<li><a href="services.html">Safety</a>
-
margin:0 0 0 -3px;
+
<ul>
-
}
+
                                              <li><a href="#">Option 1</a></li>
-
.body ul.blog li div a img:hover{
+
                                              <li><a href="#">Option 2</a></li>
-
filter:alpha(opacity=80);
+
</ul></li>
-
opacity:0.8;
+
<li><a href="services.html">Sponsors</a>
-
}
+
<ul>
-
.body ul.blog li div p{
+
                                              <li><a href="#"> Option 1 </a></li>
-
width:258px;
+
                                              <li><a href="#"> Option 2 </a></li>
-
text-align:justify;
+
</ul></li>
-
color:#828081;
+
</ul>
-
font-family: 'RokkittRegular';
+
-
margin:17px 0 0 10px;
+
-
line-height:20px;
+
-
font-size:14px;
+
-
background:none;
+
-
padding:0;
+
-
}
+
-
.body ul.blog li div a:first-child{
+
-
margin:0;
+
-
padding:0;
+
-
background:none;
+
-
width:auto;
+
-
}
+
-
.body ul.blog li div a:hover{
+
-
color:#F78117;
+
-
}
+
-
.body ul.blog li div a{
+
-
color:#606060;
+
-
font-family: 'RokkittRegular';
+
-
font-style:italic;
+
-
text-decoration:none;
+
-
padding:98px 0 0;
+
-
margin:32px auto 0;
+
-
display:block;
+
-
width: 150px;
+
-
background:url(../images/button-more.jpg) no-repeat center top;
+
-
outline:none;
+
-
font-size:16px;
+
-
font-weight:normal;
+
-
text-shadow: 0 1px 0 #fcfcfc;
+
-
}
+
-
.body h3{
+
-
font-family: 'RokkittRegular';
+
-
font-size:16px;
+
-
font-weight:bold;
+
-
color:#636363;
+
-
margin:15px 0 0;
+
-
line-height:21px;
+
-
}
+
-
.body p{
+
-
font-family: 'RokkittRegular';
+
-
font-size:16px;
+
-
text-align:justify;
+
-
color:#636363;
+
-
margin:0 0 20px;
+
-
line-height:21px;
+
-
}
+
-
.body p a{
+
-
outline:none;
+
-
color:#636363;
+
-
}
+
-
.body ul{
+
-
list-style:none;
+
-
    margin:0;
+
-
    padding:0;
+
-
overflow:hidden;
+
-
}
+
-
.body ul li:first-child{
+
-
background:none;
+
-
padding:0 0 30px;
+
-
}
+
-
.body ul li{
+
-
overflow:hidden;
+
-
background:url(../images/separator.jpg) no-repeat center top;
+
-
padding:30px 0;
+
-
}
+
-
.body ul li div.featured{
+
-
background:url(../images/interface.jpg) no-repeat 0 -68px;
+
-
width:281px;
+
-
height:292px;
+
-
text-align: center;
+
-
margin:0;
+
-
}
+
-
.body ul li div.featured img{
+
-
margin:10px 0 0 -3px;
+
-
border:0;
+
-
}
+
-
.body ul li div.featured ul{
+
-
overflow:hidden;
+
-
margin:2px 0 0 10px;
+
-
}
+
</div>
-
.body ul li div.featured ul li:first-child{
+
</div>
-
margin:0;
+
<div class="body">
-
}
+
<div id="featured">
-
.body ul li div.featured ul li{
+
<h3>Sometimes changes need to be made and with that comes a switch; and a terrible pun.</h3>
-
float:left;
+
<p>Team Michigan is engineering a novel, tightly controlled and inducible protein expression system in Escherichia coli in order to demonstrate that we can create robust boolean genetic control circuits that do not continuously rely on the presence of signaling compounds. We are using two unidirectional recombinases found in pathogenic Escherichia coli, Hbif, and FimE, to manipulate promoter orientation.</p>
-
margin:0 0 0 18px;
+
-
background:none;
+
</div>
-
padding:0;
+
                                <div class="slideshow">
-
}
+
                                     
-
.body ul li div.featured ul li a{
+
                                          <img src="https://static.igem.org/mediawiki/2012/0/0d/Michigan_%29Random_Team_1.png" alt=""></img>
-
padding:0;
+
                                     
-
}
+
                                     
-
.body ul li div.featured ul li a img{
+
                                          <img src="https://static.igem.org/mediawiki/2012/a/a0/Michigan_Random_Team_2.png" alt=""></img>
-
margin:0;
+
                                     
-
}
+
                                     
-
.body ul li div.featured ul li a img:hover{
+
                                          <img src="https://static.igem.org/mediawiki/2012/b/bc/Michigan_Random_Team_3.png" alt=""></img>
-
filter:alpha(opacity=80);
+
                                     
-
opacity:0.8;
+
                                </div>
-
}
+
        </div>
-
.body ul li div.featured a{
+
-
clear:both;
+
-
display:block;
+
-
font-size:13px;
+
-
font-family: 'RokkittRegular';
+
-
text-decoration:none;
+
-
color:#8a8889;
+
-
font-weight:bold;
+
-
padding:5px 0 0;
+
-
width:auto;
+
-
outline:none;
+
-
}
+
-
.body ul li div{
+
-
float:left;
+
-
margin:0 0 0 50px;
+
-
width:609px;
+
-
background:url(../images/button-more.jpg) no-repeat left bottom;
+
-
}
+
-
.body ul li div h3{
+
-
margin:0;
+
-
font-size:20px;
+
-
font-weight:bold;
+
-
font-family: 'RokkittRegular';
+
-
color:#f28220;
+
-
line-height:22px;
+
-
}
+
-
.body ul li div p{
+
-
line-height:22px;
+
-
font-family: 'RokkittRegular';
+
-
font-size:14px;
+
-
color:#5D5D5D;
+
-
padding:0 0 90px;
+
-
margin:0;
+
-
}
+
-
.body ul.paging{
+
-
margin:15px 0 10px 210px;
+
-
}
+
-
.body ul.paging li{
+
-
float:left;
+
-
padding:0 5px;
+
-
background:none;
+
-
}
+
-
.body ul.paging li a{
+
-
text-decoration:none;
+
-
color:#ff7e0d;
+
-
font-family: arial;
+
-
font-size:12px;
+
-
}
+
-
.body ul.paging li a:hover{
+
-
color:#5D5D5D;
+
-
}
+
-
/*------------------------- Footer ------------------------*/
+
</div>
-
.footer{
+
</body>
-
width:940px;
+
-
background:url(../images/footer.png) no-repeat center top;
+
-
padding:65px 10px 207px;
+
-
margin:0 auto;
+
-
overflow:hidden;
+
-
}
+
-
.footer ul{
+
-
list-style:none;
+
-
margin:0 0 0 60px;
+
-
padding:0;
+
-
overflow:hidden;
+
-
float:left;
+
-
}
+
-
.footer ul li:first-child a{
+
-
border:none;
+
-
padding:0 6px 0 0;
+
-
}
+
-
.footer ul li{
+
-
float:left;
+
-
}
+
-
.footer ul li a:hover{
+
-
color:#F78117;
+
-
}
+
-
.footer ul li a{
+
-
border-width: 1px;
+
-
border-color:#5b5b5b;
+
-
border-style: none none none solid;
+
-
color:#5b5b5b;
+
-
font-size:10px;
+
-
font-family: Trebuchet MS;
+
-
text-decoration:none;
+
-
font-weight:bold;
+
-
padding:0 6px;
+
-
outline:none;
+
-
}
+
-
.footer p{
+
-
color:#5b5b5b;
+
-
font-size:10px;
+
-
font-family: Trebuchet MS;
+
-
font-weight:bold;
+
-
float:left;
+
-
margin:6px 0 0 135px;
+
-
}
+
-
.footer div.connect{
+
-
float:left;
+
-
margin:0 0 0 92px;
+
-
}
+
-
.footer div.connect a{
+
-
float:left;
+
-
outline:none;
+
-
}
+
-
.footer div.connect a#facebook{
+
-
width:27px;
+
-
height:28px;
+
-
display:block;
+
-
text-indent:-9999px;
+
-
background:url(../images/icons.gif) no-repeat;
+
-
}
+
-
.footer div.connect a#twitter{
+
-
width:36px;
+
-
height:28px;
+
-
display:block;
+
-
text-indent:-9999px;
+
-
background:url(../images/icons.gif) no-repeat 0 -48px;
+
-
margin:0 0 0 68px;
+
-
}
+
-
.footer div.connect a#vimeo{
+
-
width:32px;
+
-
height:28px;
+
-
display:block;
+
-
text-indent:-9999px;
+
-
background:url(../images/icons.gif) no-repeat 0 -96px;
+
-
margin:0 0 0 73px;
+
-
}
+
-
</style>
+
</html>
</html>

Latest revision as of 00:35, 7 August 2012

Xayona Website Template

Retrieved from "http://2012.igem.org/Team:Michigan/Test_Css"