Team:SYSU-Software/style.css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:SYSU-Software/menu}}
+
* {  
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
margin:0;
-
<head>
+
padding:0;
-
<title>Team:SYSU-Software</title>
+
}
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
html, body {
-
<meta http-equiv="Content-Style-Type" content="text/css" />
+
height:100%;
-
<link href="https://2012.igem.org/Team:SYSU-Software/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
+
}
-
<link href="https://2012.igem.org/Team:SYSU-Software/layout.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" >
+
html {
-
<script src="https://2012.igem.org/Team:SYSU-Software/js/jquery-1.4.2.min.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
min-width:968px;
-
<script src="https://2012.igem.org/Team:SYSU-Software/js/jquery.faded.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
}
-
<script src="https://2012.igem.org/Team:SYSU-Software/js/tabs.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
#page1 {
-
<script src="https://2012.igem.org/Team:SYSU-Software/js/script.js?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
background:url(https://static.igem.org/mediawiki/2012/3/3e/Main-bg.jpg) no-repeat 50% 0 #0f0f0f;
-
<!--[if lt IE 7]>
+
font-family:Arial, Helvetica, sans-serif;
-
<link href="./ie_style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
+
font-size:100%;
-
  <script type="text/javascript" src="./js/ie_png.js?action=raw&ctype=text/javascript"></script>
+
line-height:1.25em;
-
  <script type="text/javascript">
+
color:#4c4c4c;
-
      ie_png.fix('.png, #header, #header .nav a, #faded strong, #faded .controls a');
+
}
-
  </script>
+
-
<![endif]-->
+
-
</head>
+
-
<body id="page1">
+
img {
-
  <div class="tail-top">
+
border:0;
-
    <div id="main">
+
vertical-align:top;
-
      <!-- header -->
+
text-align:left;
-
      <div id="header">
+
}
-
        <div id="logopic"><a href="#"><img src="https://static.igem.org/mediawiki/igem.org/c/c9/Logo.png"  alt=""  width="320px"  height="145px"/></a>
+
object {
-
</div>
+
vertical-align:top;
-
        <!-- .nav -->
+
outline:none;
-
        <ul class="nav">
+
}
-
           
+
ul, ol {
-
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Project" >Project<span>Software Projct</span></a></li>
+
list-style:none;
-
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Models">
+
}
-
Models <span>Models&Algorithm</span></a></li>
+
-
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Tutorial">Tutorial<span>Guidance book and videos</span></a></li>
+
-
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Team">Team<span>Instructor and members</span></a></li>
+
-
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Safety">Practice<span>Human practice and safety</span></a></li>
+
-
             
+
-
                 
+
-
          <li><a href="https://2012.igem.org/Team:SYSU-Software/Notebook">Notebook<span>Schedule of this project</span></a></li>
+
 +
.fleft {
 +
float:left;
 +
}
 +
.fright {
 +
float:right;
 +
}
 +
.clear {
 +
clear:both;
 +
}
-
        </ul>
+
.col-1, .col-2, .col-3 {
-
        <!-- /.nav -->
+
float:left;
-
        <!-- faded slider -->
+
}
-
        <div id="faded">
+
-
          <ul>
+
-
            <li>
+
-
            <img src="https://static.igem.org/mediawiki/2012/0/0e/Slidenp1.jpg" alt="" />
+
-
              <strong>creative ideas</strong>
+
-
              <a href="#" class="button-alt">click here</a>
+
-
            </li>
+
-
            <li>
+
-
            <img src="https://static.igem.org/mediawiki/2012/7/73/Slide2.jpg" alt="" />
+
-
              <strong>best solutions</strong>
+
-
              <a href="#" class="button-alt">click here</a>
+
-
            </li>
+
-
           
+
-
          </ul>
+
-
          <ul class="controls">
+
-
          <li><a href="#" class="prev"></a></li>
+
-
            <li><a href="#" class="next"></a></li>
+
-
          </ul>
+
-
        </div>
+
-
        <!-- //faded slider -->
+
-
      </div>
+
-
      <!-- content -->
+
-
      <div id="content2">
+
-
      <!-- tabs -->
+
-
        <div class="wrapper">
+
-
          <div class="wrapper">
+
-
            <ul class="tabs">
+
-
              <li class="first"><a href="#tab1">GenomeBrowser</a></li>
+
-
              <li><a href="#tab2">Biobrick</a></li>
+
-
              <li><a href="#tab3">Riboswitch</a></li>
+
-
              <li><a href="#tab4">SiRNA</a></li>
+
-
<li><a href="#tab5">MetaNewtwork</a></li>
+
-
              <li><a href="#tab6">Simulator</a></li>
+
-
              <li><a href="#tab7">G-Circle</a></li>
+
 +
.alignright {
 +
text-align:right;
 +
}
 +
.aligncenter {
 +
text-align:center;
 +
}
-
            </ul>
+
.wrapper {
-
          </div>
+
width:100%;
-
          <div class="tab_container">
+
overflow:hidden;
-
          <div id="tab1" class="tab_content">
+
}
-
            <div class="wrapper">
+
.container {
-
              <img class="img-indent" src="https://static.igem.org/mediawiki/2012/7/7c/Browser.jpg" alt="" width="300px" height="230px"/>
+
width:100%;
-
                <div class="extra-wrap">
+
}
-
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; With this Genome Browser, users are able to search Biobricks, plasmids and genomes of model microorganisms; at the same time, gene annotations and information of GenBank are presented. The primary protein sequence is also presented according to the DNA sequences. Aside from searching sequences, users can also input or modify the sequences, insert annotation and build target plasmids they need.</p>
+
-
                 
+
-
                  <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <div id="tab2" class="tab_content">
+
-
            <div class="wrapper">
+
-
              <img class="img-indent" src="https://static.igem.org/mediawiki/2012/7/71/Designer.jpg" alt="" width="300px" height="230px"/>
+
-
                <div class="extra-wrap">
+
-
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This is the section for parts information. It can facilitate researchers to search features and functions of Biobricks documented in the Registry of Standard Biological Parts. All of the relevant operations can be completed without connecting with the Internet.</p>                 
+
-
                  <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <div id="tab3" class="tab_content">
+
-
            <div class="wrapper">
+
-
              <img class="img-indent" src="https://static.igem.org/mediawiki/2012/8/8f/Illustrator.jpg" alt="" width="300px" height="230px" />
+
-
                <div class="extra-wrap">
+
-
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
+
-
<span lang="EN-US">This is the section for generating parts
+
-
information. It can assist researchers to design the
+
-
sequences and structures of potential riboswitches according
+
-
to their inputs and choices of aptamers. Both of the
+
-
up-regulation and down-regulation riboswiches can be
+
-
provided by this kit.</span></p>
+
-
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <div id="tab4" class="tab_content">
+
-
            <div class="wrapper">
+
-
              <img class="img-indent" src="https://static.igem.org/mediawiki/2012/8/8f/Illustrator.jpg" alt="" width="300px" height="230px" />
+
-
                <div class="extra-wrap">
+
-
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
+
-
<span lang="EN-US">This is the section for generating parts
+
-
information. It can design another regulator in engineering
+
-
biological systems – siRNA. According to the input
+
-
sequences, it can figure out the potential siRNA
+
-
automatically.</span></p>
+
-
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <div id="tab5" class="tab_content">
+
-
            <div class="wrapper">
+
-
              <img class="img-indent" src="https://static.igem.org/mediawiki/2012/8/8f/Illustrator.jpg" alt="" width="300px" height="230px" />
+
-
                <div class="extra-wrap">
+
-
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
+
-
<span lang="EN-US">This is the section for system information. Given the friendly interface, researchers can explore and acquire their interested gene’s relevant pathways and networks in one map. Users can even drag every graphic element in the maps to check the information conveniently and effectively.</span></p>
+
-
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <div id="tab6" class="tab_content">
+
-
            <div class="wrapper">
+
-
              <img class="img-indent" src="https://static.igem.org/mediawiki/2012/8/8f/Illustrator.jpg" alt="" width="300px" height="230px" />
+
-
                <div class="extra-wrap">
+
-
                <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
+
-
<span lang="EN-US">This is the section for generating system
+
-
information. Based on the reconstruction of genome-scale
+
-
models, researcher can use this kit to edit the existent
+
-
models according to their needs. Then, they can choose
+
-
different combination of analysis to predict effect from a
+
-
intended loss-of –function mutation, find necessary and
+
-
basic genes maintaining the whole system, predict phenotypic
+
-
behavior under the given environmental conditions and
+
-
interpret the coupled reaction activities.</span></p>
+
-
                                    <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
-
                </div>
+
-
              </div>
+
-
            </div>
+
-
            <div id="tab7" class="tab_content">
 
-
            <div class="wrapper">
 
-
            <img class="img-indent" src="https://static.igem.org/mediawiki/2012/5/55/Simulator.jpg" alt="" width="300px" height="230px" />
 
-
              <div class="extra-wrap">
 
-
              <p><span lang="zh-cn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
 
-
<span lang="EN-US">This is the section for sequence information.
 
-
It can illustrate the given genome and the expression level of
 
-
genes within it under different environment in one graph. In
 
-
addition, we have developed it as one app and integrated it into
 
-
<i>Clotho</i>.</span></p>
 
-
                <p class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></p>
 
-
                </div>
 
-
              </div>
+
 
-
            </div>
+
/*==== GLOBAL =====*/
-
          </div>
+
#main {
-
        </div>
+
width:968px;
-
        <!-- .box -->
+
margin:0 auto;
-
        <div class="box">
+
font-size:.875em;
-
        <div class="right-bot-corner">
+
position:relative;
-
          <div class="left-bot-corner">
+
}
-
            <div class="inner">
+
 
-
              <div class="line-ver">
+
#header {
-
                  <div class="wrapper line-ver1">
+
height:600px;
-
                    <div class="col-1">
+
overflow:hidden;
-
                      <h2><span lang="zh-cn">Software</span></h2>
+
background:url(https://static.igem.org/mediawiki/2012/5/5c/Header-bg3.png) no-repeat 0 0;
-
                      <ul class="list1">
+
}
-
                        <li><span lang="zh-cn"><a href="https://2012.igem.org/Team:SYSU-Software/Download">Download</a> &nbsp;&nbsp;&nbsp;
+
#content2 {
-
</span></li>
+
background:url(https://static.igem.org/mediawiki/2012/3/34/Content-bg.jpg) no-repeat 0 0 #010101;
-
                        <li><a href="https://2012.igem.org/Team:SYSU-Software/Tutorial">Tutorial</a></li>
+
padding:34px 57px 46px 59px;
-
                        <li><span lang="zh-cn"><a href="https://2012.igem.org/Team:SYSU-Software/Video">Video</a></span></li>
+
}
-
                        <li><a href="https://2012.igem.org/Team:SYSU-Software/Faq">FAQs</li>
+
#footer {
-
+
padding:10px 0 60px 75px;
-
                       
+
background:#010101;
-
                      </ul>
+
}
-
                      <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Project" class="link1"><b>read more</b></a></div>
+
 
-
                    </div>
+
 
-
                    <div class="col-2">
+
 
-
                      <h2><span lang="zh-cn">Notebook</span></h2>
+
/*---- tailings ----*/
-
                      <ul class="products-list">
+
.tail-top {
-
                        <li class="last">
+
background:url(2012.igem.org/wiki/images/5/5b/Tail-top.gif) left top repeat-x;
-
                          <img src="https://static.igem.org/mediawiki/2012/0/00/Icon2.jpg" alt="" />
+
padding-top:25px;
-
                          <div class="extra-wrap">
+
}
-
                            <p>Notebook shows you the schedule we developed this project.</p>
+
 
-
                            <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Notebook" class="link1"><b>read more</b></a></div>
+
 
-
                          </div>
+
/*----- forms parameters -----*/
-
                        </li>
+
 
-
                      </ul>
+
input, select, textarea {
-
                    </div>
+
font-family:Arial, Helvetica, sans-serif; font-size:1em;
-
                    <div class="col-3">
+
vertical-align:middle;
-
                      <h2><span lang="zh-cn">Contact</span> us</h2>
+
font-weight:normal;
-
                      <p>Click "read more" to get access to contact us.                   </p>
+
}
-
                      <div class="wrapper"><a href="https://2012.igem.org/Team:SYSU-Software/Contact" class="link1"><b>read more</b></a></div>
+
 
-
                    </div>
+
 
-
                  </div>
+
/*----- other -----*/
-
                </div>
+
.img-indent {
-
              </div>
+
margin:0 42px 0 0;
-
            </div>
+
float:left;
-
          </div>
+
}
-
        </div>
+
.img-box {
-
        <!-- /.box -->
+
width:100%;
-
        <!-- .banners -->
+
overflow:hidden;
-
        <ul class="banners">
+
padding-bottom:20px;
-
        <li><a href="#">
+
}
-
<img src=  https://static.igem.org/mediawiki/2012/c/ca/Xinke.png alt="" width="160" height="164" /></a></li>
+
.img-box img {
-
          <li ><a href="#">
+
float:left;
-
<img src=  https://static.igem.org/mediawiki/2012/4/45/Shengke.png  alt="" width="160" height="163" /></a></li>
+
margin:0 42px 0 0;
-
          <li><a href="#">
+
}
-
<img src= https://static.igem.org/mediawiki/2012/0/0c/Shuji.png alt="" width="152" height="156" /></a></li>
+
 
-
          <li class="last"><a href="#">
+
.extra-wrap {
-
<img src= https://static.igem.org/mediawiki/2012/b/b4/Ruanjian.png alt="" width="167" height="64" style=" margin-top:50px;/></a><a href="#"> </li>
+
overflow:hidden;
-
        </ul>
+
}
-
        <!-- /.banners -->
+
 
-
      </div>
+
 
-
      <!-- footer -->
+
p {
-
     
+
margin-bottom:20px;
-
    </div>
+
}
-
  </div>
+
.p1 {
-
  <script type="text/javascript">
+
margin-bottom:10px;
-
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+
}
-
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+
.p2 {
-
</script>
+
margin-bottom:20px;
-
<script type="text/javascript">
+
}
-
try {
+
.p3 {
-
var pageTracker = _gat._getTracker("UA-7078796-1");
+
margin-bottom:30px;
-
pageTracker._trackPageview();
+
}
-
} catch(err) {}</script>
+
 
-
</body>
+
/*----- txt, links, lines, titles -----*/
-
</html>
+
a {
 +
color:#4a4a4a;
 +
outline:none;
 +
}
 +
a:hover{
 +
text-decoration:none;
 +
}
 +
 
 +
h1 {
 +
position:absolute;
 +
left:59px;
 +
top:16px;
 +
font-size:83px;
 +
line-height:1.2em;
 +
color:#fff;
 +
font-weight:normal;
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
letter-spacing:-2px;
 +
}
 +
h1 a {
 +
color:#fff;
 +
text-decoration:none;
 +
}
 +
h2 {
 +
font-size:24px;
 +
line-height:1.2em;
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
font-weight:normal;
 +
color:#000;
 +
margin-bottom:14px;
 +
padding-top:6px;
 +
}
 +
 
 +
.link1 {
 +
display:block;
 +
float:left;
 +
background:url(https://static.igem.org/mediawiki/2012/7/76/Link1-left-bg.gif) no-repeat left top #e2e2e2;
 +
color:#000;
 +
text-decoration:none;
 +
font-size:10px;
 +
text-transform:uppercase;
 +
}
 +
.link1 b {
 +
display:block;
 +
background:url(https://static.igem.org/mediawiki/2012/6/6d/Link1-right-bg.gif) no-repeat right top;  
 +
padding:0 19px 0 11px;  
 +
font-weight:normal; font-style:normal;
 +
line-height:28px;
 +
}
 +
 
 +
.link1:hover {
 +
background:url(images/link1-left-bg.gif) no-repeat left -28px #474747;
 +
color:#fff;
 +
}
 +
.link1:hover b {
 +
background-position:100% -28px;
 +
}
 +
 
 +
 
 +
.line-ver, .line-ver1 {
 +
background-image:url(https://static.igem.org/mediawiki/2012/b/b6/Line-ver.gif);
 +
background-repeat:repeat-y;
 +
width:100%;
 +
}
 +
 
 +
 
 +
/*==================boxes====================*/
 +
.box {
 +
background:#f7f7f7;
 +
width:100%;
 +
border-top:1px solid #e5e5e5;
 +
font-size:13px;
 +
line-height:18px;
 +
color:#7e7e7e;
 +
}
 +
.box .left-bot-corner {
 +
background:url(https://static.igem.org/mediawiki/2012/4/47/Left-bot-corner.gif) no-repeat left bottom;
 +
width:100%;
 +
}
 +
.box .right-bot-corner {
 +
background:url(https://static.igem.org/mediawiki/2012/b/b9/Right-bot-corner.gif) no-repeat right bottom;
 +
}
 +
.box .inner {
 +
padding:23px 28px 40px 35px;
 +
}
 +
.box p {
 +
margin-bottom:18px;
 +
}
 +
.box strong {
 +
color:#4a4a4a;
 +
}
 +
 +
.box .link1 {
 +
background:url(https://static.igem.org/mediawiki/2012/8/8d/Link1-left-alt.gif) no-repeat left top #e2e2e2;
 +
}
 +
.box .link1 b {
 +
background:url(https://static.igem.org/mediawiki/2012/6/60/Link1-right-alt.gif) no-repeat right top;
 +
}
 +
.box .link1:hover {
 +
background:url(images/link1-left-alt.gif) no-repeat left -28px #474747;
 +
}
 +
.box .link1:hover b {
 +
background-position:100% -28px;
 +
}
 +
 
 +
 
 +
 
 +
.box1 {
 +
background:url(https://static.igem.org/mediawiki/2012/3/3e/Box1-bg.gif) 0 0 repeat-x #fff;
 +
width:100%;
 +
}
 +
.box1 .left-top-corner {
 +
background:url(https://static.igem.org/mediawiki/2012/e/ef/Left-top-corner.gif) no-repeat 0 0;
 +
}
 +
.box1 .right-top-corner {
 +
background:url(https://static.igem.org/mediawiki/2012/b/bd/Right-top-corner.gif) no-repeat 100% 0;
 +
width:100%;
 +
}
 +
.box1 .right-bot-corner {
 +
background:url(https://static.igem.org/mediawiki/2012/c/c1/Right-bot-corner-alt.gif) no-repeat 100% 100%;
 +
}
 +
.box1 .left-bot-corner {
 +
background:url(https://static.igem.org/mediawiki/2012/b/b8/Left-bot-corner-alt.gif) no-repeat 0 100%;
 +
width:100%;
 +
}
 +
.box1 .inner {
 +
padding:27px 28px 40px 35px;
 +
}
 +
 
 +
 
 +
 
 +
.address {
 +
float:left;
 +
}
 +
.address dd {
 +
clear:both;
 +
text-align:right;
 +
}
 +
.address dd span {
 +
float:left;
 +
padding-right:20px;
 +
}
 +
.address dd a {
 +
color:#4a4a4a;
 +
}
 +
 
 +
 
 +
/*===== header =====*/
 +
#header .nav {
 +
position:absolute;
 +
left:59px;
 +
top:146px;
 +
width:268px;
 +
border-top:1px solid #4d4d4d;
 +
}
 +
#header .nav li {
 +
width:100%;
 +
overflow:hidden;
 +
vertical-align:top;
 +
}
 +
#header .nav li a {
 +
display:block;
 +
font-size:26px;
 +
line-height:1.2em;
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
color:#fff;
 +
text-decoration:none;
 +
padding:9px 0 8px 18px;
 +
border-bottom:1px solid #4d4d4d;
 +
background:url(https://static.igem.org/mediawiki/2012/b/b5/Nav-bg.png) 0 0 no-repeat;
 +
}
 +
#header .nav li a span {
 +
display:block;
 +
color:#525252;
 +
font-size:17px;
 +
line-height:1.2em;
 +
}
 +
 +
#header .nav li a:hover, #header .nav li a.current {
 +
background:url(https://static.igem.org/mediawiki/2012/b/b5/Nav-bg2.png);
 +
}
 +
#logopic{top: 14px; left: 30px; width:800px;position: absolute ; margin: auto ;}
 +
/*--- faded slider ---*/
 +
#faded {
 +
width:566px;
 +
height:504px;
 +
position:absolute;
 +
left:379px;
 +
top:100px;
 +
overflow:hidden;
 +
}
 +
 +
#faded ul { list-style:none; padding:0; margin:0; }
 +
 +
#faded li strong {
 +
display:block;
 +
position:absolute;
 +
left:218px;
 +
top:349px;
 +
background:url(https://static.igem.org/mediawiki/2012/7/72/Title-bg.png) no-repeat 0 0;
 +
width:298px;
 +
height:56px;
 +
font-size:45px;
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
color:#fff;
 +
line-height:48px;
 +
text-align:center;
 +
font-weight:normal;
 +
letter-spacing:-2px;
 +
}
 +
 
 +
#faded ul.controls {
 +
position:absolute;
 +
right:34px;
 +
top:153px;
 +
width:46px;
 +
height:68px;
 +
}
 +
#faded ul.controls li {
 +
width:100%;
 +
overflow:hidden;
 +
vertical-align:top;
 +
}
 +
#faded ul.controls li a {
 +
display:block;
 +
width:46px;
 +
height:34px;
 +
overflow:hidden;
 +
}
 +
#faded ul.controls li a.prev {
 +
background:url(https://static.igem.org/mediawiki/2012/f/fc/Controls.png) no-repeat 0 0;
 +
}
 +
#faded ul.controls li a.prev:hover {
 +
background-position:0 -68px;
 +
}
 +
#faded ul.controls li a.next {
 +
background:url(https://static.igem.org/mediawiki/2012/f/fc/Controls.png) no-repeat 0 -34px;
 +
}
 +
#faded ul.controls li a.next:hover {
 +
background-position:0 -102px;
 +
}
 +
 
 +
#faded .button-alt {
 +
display:block;
 +
background:url(https://static.igem.org/mediawiki/2012/7/7a/Button.gif) no-repeat 0 0;
 +
width:90px;
 +
height:28px;
 +
line-height:28px;
 +
text-transform:uppercase;
 +
color:#000;
 +
text-align:center;
 +
font-size:10px;
 +
text-decoration:none;
 +
text-indent:-7px;
 +
position:absolute;
 +
bottom:62px;
 +
right:85px;
 +
}
 +
#faded .button-alt:hover {
 +
text-decoration:underline;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*===== content =====*/
 +
 
 +
/*--- tabs ---*/
 +
ul.tabs {
 +
margin: 0;
 +
padding: 0;
 +
float: left;
 +
list-style: none;
 +
height: 48px; /*--Set height of tabs--*/
 +
padding:0 0 0 0;
 +
position:relative;
 +
float:right;
 +
}
 +
ul.tabs li {
 +
float: left;
 +
border-left: none;
 +
overflow: hidden;
 +
position: relative;
 +
background:url(https://static.igem.org/mediawiki/2012/e/e8/Tab-bg1.png) no-repeat 0 0;
 +
width:110px;
 +
height:44px;
 +
line-height:44px;
 +
font-size:14px;
 +
color:#fff;
 +
text-align:center;
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
margin:4px 0 0 4px;
 +
}
 +
ul.tabs li.first {
 +
margin-left:0;
 +
}
 +
ul.tabs li a {
 +
text-decoration: none;
 +
color: #fff;
 +
display: block;
 +
}
 +
html ul.tabs li.active a {
 +
color:#000;
 +
}
 +
 
 +
ul.tabs li:hover, html ul.tabs li.active  {
 +
background:url(https://static.igem.org/mediawiki/2012/0/01/Tab-bg2.png) no-repeat 0 0;
 +
margin-top:0;
 +
height:48px;
 +
color:#000;
 +
line-height:48px;
 +
}
 +
ul.tabs li:hover a {
 +
color:#000;
 +
}
 +
 
 +
.tab_container {
 +
overflow: hidden;
 +
clear: both;
 +
float: left; width: 100%;
 +
background: #fff;
 +
min-height:305px;
 +
height:auto !important;
 +
height:305px;
 +
}
 +
.tab_content {
 +
padding: 35px 30px 32px 35px;
 +
}
 +
/*--- tabs ---*/
 +
 
 +
 
 +
.list1 {
 +
padding-bottom:20px;
 +
}
 +
.list1 li {
 +
background:url(https://static.igem.org/mediawiki/2012/4/40/Arrow1.gif) no-repeat 6px 12px;
 +
padding:6px 0 5px 20px;
 +
border-bottom:1px solid #dedede;
 +
font-size:13px !important;
 +
}
 +
.list1 li.last {
 +
border-bottom:none;
 +
}
 +
.list1 li a {
 +
color:#4a4a4a;
 +
text-decoration:none;
 +
}
 +
.list1 li a:hover {
 +
color:#000;
 +
text-decoration:underline;
 +
}
 +
 
 +
 
 +
.products-list li {
 +
width:100%;
 +
overflow:hidden;
 +
border-bottom:1px solid #dcdcdc;
 +
padding:12px 0 12px 0;
 +
color:#4a4a4a;
 +
}
 +
.products-list li.last {
 +
border-bottom:none;
 +
margin-bottom:0;
 +
}
 +
.products-list li img {
 +
float:left;
 +
margin-right:30px;
 +
}
 +
.products-list li p {
 +
margin-bottom:12px;
 +
}
 +
 
 +
 
 +
.banners {
 +
width:100%;
 +
overflow:hidden;
 +
padding:44px 0 0 0;
 +
}
 +
.banners li {
 +
float:left;
 +
background:url(https://static.igem.org/mediawiki/2012/1/14/Divider.gif) no-repeat 100% 0;
 +
padding:0 22px 0 22px;
 +
}
 +
.banners li.last {
 +
background:none;
 +
padding-right:0;
 +
}
 +
 
 +
 
 +
.testimonials li {
 +
text-align:right;
 +
padding-bottom:18px;
 +
}
 +
.testimonials li blockquote {
 +
text-align:left;
 +
}
 +
 
 +
 
 +
 
 +
/*===== footer =====*/
 +
#footer {
 +
font-size:10px;
 +
text-transform:uppercase;
 +
color:#4a4a4a;
 +
}
 +
#footer a {
 +
color:#fff;
 +
text-decoration:none;
 +
}
 +
#footer a:hover {
 +
text-decoration:underline;
 +
}
 +
 
 +
 
 +
/*----- forms -----*/
 +
#search-form {
 +
position:absolute;
 +
width:190px;
 +
height:25px;
 +
right:57px;
 +
top:-2px;
 +
background:url(https://static.igem.org/mediawiki/2012/f/ff/Search-bg.gif) no-repeat 0 0;
 +
}
 +
#search-form fieldset {
 +
border:none;
 +
}
 +
#search-form input.text {
 +
width:135px;
 +
border:none;
 +
background:none;
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 +
font-size:13px;
 +
color:#7f7f7f;
 +
padding:0 0 6px 21px;
 +
font-style:italic;
 +
line-height:16px;
 +
}
 +
#search-form input.submit {
 +
border:none;
 +
background:none;
 +
width:33px;
 +
height:25px;
 +
cursor:pointer;
 +
}
 +
 
 +
#contacts-form fieldset {
 +
border:none;
 +
}
 +
#contacts-form label {
 +
display:block;
 +
height:32px;
 +
overflow:hidden;
 +
}
 +
#contacts-form input {
 +
background:#fff;
 +
width:210px;
 +
padding:2px 5px 2px 6px;
 +
border:none;
 +
border:1px solid #e1e1e1;
 +
color:#7e7e7e;
 +
border-color:#303030 #cecece #e1e1e1 #585858;
 +
}
 +
#contacts-form textarea {
 +
width:210px;
 +
padding:2px 5px 2px 6px;
 +
height:104px;
 +
background:#fff;
 +
overflow:auto;
 +
border:1px solid #e1e1e1;
 +
border-color:#303030 #cecece #e1e1e1 #585858;
 +
color:#7e7e7e;
 +
margin-bottom:17px;
 +
}
 +
#contacts-form .link1 {
 +
float:right;
 +
margin-left:10px;
 +
}
 +
 
 +
/*==========================================*/

Revision as of 04:15, 25 September 2012

  • {

margin:0; padding:0; } html, body { height:100%; } html { min-width:968px; }

  1. page1 {

background:url(Main-bg.jpg) no-repeat 50% 0 #0f0f0f; font-family:Arial, Helvetica, sans-serif; font-size:100%; line-height:1.25em; color:#4c4c4c; }

img { border:0; vertical-align:top; text-align:left; } object { vertical-align:top; outline:none; } ul, ol { list-style:none; }

.fleft { float:left; } .fright { float:right; } .clear { clear:both; }

.col-1, .col-2, .col-3 { float:left; }

.alignright { text-align:right; } .aligncenter { text-align:center; }

.wrapper { width:100%; overflow:hidden; } .container { width:100%; }



/*==== GLOBAL =====*/

  1. main {

width:968px; margin:0 auto; font-size:.875em; position:relative; }

  1. header {

height:600px; overflow:hidden; background:url(Header-bg3.png) no-repeat 0 0; }

  1. content2 {

background:url(Content-bg.jpg) no-repeat 0 0 #010101; padding:34px 57px 46px 59px; }

  1. footer {

padding:10px 0 60px 75px; background:#010101; }


/*---- tailings ----*/ .tail-top { background:url(2012.igem.org/wiki/images/5/5b/Tail-top.gif) left top repeat-x; padding-top:25px; }


/*----- forms parameters -----*/

input, select, textarea { font-family:Arial, Helvetica, sans-serif; font-size:1em; vertical-align:middle; font-weight:normal; }


/*----- other -----*/ .img-indent { margin:0 42px 0 0; float:left; } .img-box { width:100%; overflow:hidden; padding-bottom:20px; } .img-box img { float:left; margin:0 42px 0 0; }

.extra-wrap { overflow:hidden; }


p { margin-bottom:20px; } .p1 { margin-bottom:10px; } .p2 { margin-bottom:20px; } .p3 { margin-bottom:30px; }

/*----- txt, links, lines, titles -----*/ a { color:#4a4a4a; outline:none; } a:hover{ text-decoration:none; }

h1 { position:absolute; left:59px; top:16px; font-size:83px; line-height:1.2em; color:#fff; font-weight:normal; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-2px; } h1 a { color:#fff; text-decoration:none; } h2 { font-size:24px; line-height:1.2em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; color:#000; margin-bottom:14px; padding-top:6px; }

.link1 { display:block; float:left; background:url(Link1-left-bg.gif) no-repeat left top #e2e2e2; color:#000; text-decoration:none; font-size:10px; text-transform:uppercase; } .link1 b { display:block; background:url(Link1-right-bg.gif) no-repeat right top; padding:0 19px 0 11px; font-weight:normal; font-style:normal; line-height:28px; }

.link1:hover { background:url(images/link1-left-bg.gif) no-repeat left -28px #474747; color:#fff; } .link1:hover b { background-position:100% -28px; }


.line-ver, .line-ver1 { background-image:url(Line-ver.gif); background-repeat:repeat-y; width:100%; }


/*==================boxes====================*/ .box { background:#f7f7f7; width:100%; border-top:1px solid #e5e5e5; font-size:13px; line-height:18px; color:#7e7e7e; } .box .left-bot-corner { background:url(Left-bot-corner.gif) no-repeat left bottom; width:100%; } .box .right-bot-corner { background:url(Right-bot-corner.gif) no-repeat right bottom; } .box .inner { padding:23px 28px 40px 35px; } .box p { margin-bottom:18px; } .box strong { color:#4a4a4a; }

.box .link1 { background:url(Link1-left-alt.gif) no-repeat left top #e2e2e2; } .box .link1 b { background:url(Link1-right-alt.gif) no-repeat right top; } .box .link1:hover { background:url(images/link1-left-alt.gif) no-repeat left -28px #474747; } .box .link1:hover b { background-position:100% -28px; }


.box1 { background:url(Box1-bg.gif) 0 0 repeat-x #fff; width:100%; } .box1 .left-top-corner { background:url(Left-top-corner.gif) no-repeat 0 0; } .box1 .right-top-corner { background:url(Right-top-corner.gif) no-repeat 100% 0; width:100%; } .box1 .right-bot-corner { background:url(Right-bot-corner-alt.gif) no-repeat 100% 100%; } .box1 .left-bot-corner { background:url(Left-bot-corner-alt.gif) no-repeat 0 100%; width:100%; } .box1 .inner { padding:27px 28px 40px 35px; }


.address { float:left; } .address dd { clear:both; text-align:right; } .address dd span { float:left; padding-right:20px; } .address dd a { color:#4a4a4a; }


/*===== header =====*/

  1. header .nav {

position:absolute; left:59px; top:146px; width:268px; border-top:1px solid #4d4d4d; } #header .nav li { width:100%; overflow:hidden; vertical-align:top; } #header .nav li a { display:block; font-size:26px; line-height:1.2em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; padding:9px 0 8px 18px; border-bottom:1px solid #4d4d4d; background:url(Nav-bg.png) 0 0 no-repeat; } #header .nav li a span { display:block; color:#525252; font-size:17px; line-height:1.2em; }

#header .nav li a:hover, #header .nav li a.current { background:url(Nav-bg2.png); }

  1. logopic{top: 14px; left: 30px; width:800px;position: absolute ; margin: auto ;}

/*--- faded slider ---*/

  1. faded {

width:566px; height:504px; position:absolute; left:379px; top:100px; overflow:hidden; }

  1. faded ul { list-style:none; padding:0; margin:0; }

#faded li strong { display:block; position:absolute; left:218px; top:349px; background:url(Title-bg.png) no-repeat 0 0; width:298px; height:56px; font-size:45px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; line-height:48px; text-align:center; font-weight:normal; letter-spacing:-2px; }

  1. faded ul.controls {

position:absolute; right:34px; top:153px; width:46px; height:68px; } #faded ul.controls li { width:100%; overflow:hidden; vertical-align:top; } #faded ul.controls li a { display:block; width:46px; height:34px; overflow:hidden; } #faded ul.controls li a.prev { background:url(Controls.png) no-repeat 0 0; } #faded ul.controls li a.prev:hover { background-position:0 -68px; } #faded ul.controls li a.next { background:url(Controls.png) no-repeat 0 -34px; } #faded ul.controls li a.next:hover { background-position:0 -102px; }

  1. faded .button-alt {

display:block; background:url(Button.gif) no-repeat 0 0; width:90px; height:28px; line-height:28px; text-transform:uppercase; color:#000; text-align:center; font-size:10px; text-decoration:none; text-indent:-7px; position:absolute; bottom:62px; right:85px; }

  1. faded .button-alt:hover {

text-decoration:underline; }



/*===== content =====*/

/*--- tabs ---*/ ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 48px; /*--Set height of tabs--*/ padding:0 0 0 0; position:relative; float:right; } ul.tabs li { float: left; border-left: none; overflow: hidden; position: relative; background:url(Tab-bg1.png) no-repeat 0 0; width:110px; height:44px; line-height:44px; font-size:14px; color:#fff; text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin:4px 0 0 4px; } ul.tabs li.first { margin-left:0; } ul.tabs li a { text-decoration: none; color: #fff; display: block; } html ul.tabs li.active a { color:#000; }

ul.tabs li:hover, html ul.tabs li.active { background:url(Tab-bg2.png) no-repeat 0 0; margin-top:0; height:48px; color:#000; line-height:48px; } ul.tabs li:hover a { color:#000; }

.tab_container { overflow: hidden; clear: both; float: left; width: 100%; background: #fff; min-height:305px; height:auto !important; height:305px; } .tab_content { padding: 35px 30px 32px 35px; } /*--- tabs ---*/


.list1 { padding-bottom:20px; } .list1 li { background:url(Arrow1.gif) no-repeat 6px 12px; padding:6px 0 5px 20px; border-bottom:1px solid #dedede; font-size:13px !important; } .list1 li.last { border-bottom:none; } .list1 li a { color:#4a4a4a; text-decoration:none; } .list1 li a:hover { color:#000; text-decoration:underline; }


.products-list li { width:100%; overflow:hidden; border-bottom:1px solid #dcdcdc; padding:12px 0 12px 0; color:#4a4a4a; } .products-list li.last { border-bottom:none; margin-bottom:0; } .products-list li img { float:left; margin-right:30px; } .products-list li p { margin-bottom:12px; }


.banners { width:100%; overflow:hidden; padding:44px 0 0 0; } .banners li { float:left; background:url(Divider.gif) no-repeat 100% 0; padding:0 22px 0 22px; } .banners li.last { background:none; padding-right:0; }


.testimonials li { text-align:right; padding-bottom:18px; } .testimonials li blockquote { text-align:left; }


/*===== footer =====*/

  1. footer {

font-size:10px; text-transform:uppercase; color:#4a4a4a; } #footer a { color:#fff; text-decoration:none; } #footer a:hover { text-decoration:underline; }


/*----- forms -----*/

  1. search-form {

position:absolute; width:190px; height:25px; right:57px; top:-2px; background:url(Search-bg.gif) no-repeat 0 0; } #search-form fieldset { border:none; } #search-form input.text { width:135px; border:none; background:none; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px; color:#7f7f7f; padding:0 0 6px 21px; font-style:italic; line-height:16px; } #search-form input.submit { border:none; background:none; width:33px; height:25px; cursor:pointer; }

  1. contacts-form fieldset {

border:none; } #contacts-form label { display:block; height:32px; overflow:hidden; } #contacts-form input { background:#fff; width:210px; padding:2px 5px 2px 6px; border:none; border:1px solid #e1e1e1; color:#7e7e7e; border-color:#303030 #cecece #e1e1e1 #585858; } #contacts-form textarea { width:210px; padding:2px 5px 2px 6px; height:104px; background:#fff; overflow:auto; border:1px solid #e1e1e1; border-color:#303030 #cecece #e1e1e1 #585858; color:#7e7e7e; margin-bottom:17px; } #contacts-form .link1 { float:right; margin-left:10px; }

/*==========================================*/

Retrieved from "http://2012.igem.org/Team:SYSU-Software/style.css"