Team:HIT-Harbin/css/style.css

From 2013.igem.org

(Difference between revisions)
 
(One intermediate revision not shown)
Line 1: Line 1:
-
<html>
+
/* ------------------------------------------------------------------------------------ */
-
    <head>
+
/* -------------------------------- BASIC STYLE RESET --------------------------------- */
-
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+
/* ------------------------------------------------------------------------------------ */
-
        <title>HIT-Harbin</title>
+
-
        <!-- CSS Imports -->
+
html, body, div, span, object, iframe,
-
        <link href="https://2013.igem.org/Team:HIT-Harbin/css/prettyPhoto.css?action=raw&ctype=text/css" media="screen" rel="stylesheet" type="text/css" />
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-
        <link href="https://2013.igem.org/Team:HIT-Harbin/css/nivo-slider.css?action=raw&ctype=text/css" media="screen" rel="stylesheet" type="text/css" />
+
a, abbr, acronym, address, code,
-
        <link href="https://2013.igem.org/Team:HIT-Harbin/css/style.css?action=raw&ctype=text/css" media="screen" rel="stylesheet" type="text/css" />
+
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
-
     </head>
+
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    font-weight: inherit;
 +
    font-style: inherit;
 +
    font-size: 100%;
 +
    font-family: inherit;
 +
     vertical-align: baseline;
 +
}
-
    <body>
+
html { overflow-x: hidden; }
-
        <div id="root">
+
/* Tables still need 'cellspacing="0"' in the markup. */
 +
table { border-collapse: separate; border-spacing: 0; }
 +
caption, th, td { text-align: left; font-weight: normal; }
 +
table, td, th { vertical-align: middle; }
-
            <!-- HEADER START -->
+
/* Remove possible quote marks (") from <q>, <blockquote>. */
 +
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
 +
blockquote, q { quotes: "" ""; }
-
            <div id="header">
+
/* Remove annoying border on linked images. */
-
                <div class="header-bar">
+
a img { border: none; }
-
                    <div id="logo">
+
a { outline: none; }
-
                        <h1><a href="https://2013.igem.org/Team:HIT-Harbin">HIT-Harbin</a></h1>
+
img { vertical-align: top; }
-
                    </div>
+
.clearer { height: 0px; clear: both; }
-
                    <ul id="menu">
+
/* ------------------------------------------------------------------------------------ */
-
                        <li class="current-menu-item">
+
/* -------------------------------- MAIN STYLES DEFINITION ---------------------------- */
-
                            <a href="https://2013.igem.org/Team:HIT-Harbin">Home</a>
+
/* ------------------------------------------------------------------------------------ */
-
                            <ul class="sub-menu">
+
-
                            <li><a href="https://2013.igem.org/Main_Page" target="_blank">Main page</a></li>
+
-
                            </ul>
+
-
                        </li>
+
-
                        <li>
+
-
                            <a href="https://2013.igem.org/Team:HIT-Harbin/Team">Team</a>
+
-
                            <ul class="sub-menu">
+
-
                                <li><a href="https://igem.org/Team.cgi?year=2013&team_name=HIT-Harbin">Official Team Profile</a></li>
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Team/HIT-igemers">HIT IGEMers</a></li>                               
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Advisors">Advisors</a></li>
+
-
                            </ul>
+
-
                        </li>
+
-
                        <li>
+
-
                            <a href="https://2013.igem.org/Team:HIT-Harbin/Project">Project</a>
+
-
                            <ul class="sub-menu">
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Background">Background</a></li>
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Modeling">Modeling</a>
+
-
                                <ul class="sub-menu">
+
-
                                        <li><a href="#">Sample links</a></li>
+
-
                                        <li><a href="#">For you</a></li>
+
-
                                        <li><a href="#">To enjoy</a></li>
+
-
                                    </ul>
+
-
                                </li>
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Experiments">Experiments</a>
+
-
                                <ul class="sub-menu">
+
-
                                        <li><a href="#">Sample links</a></li>
+
-
                                        <li><a href="#">For you</a></li>
+
-
                                        <li><a href="#">To enjoy</a></li>
+
-
                                    </ul>
+
-
                                </li>
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Attributions">Attributions</a></li>
+
-
                            </ul>
+
-
                        </li>
+
-
                        <li><a href="https://2013.igem.org/Team:HIT-Harbin/Parts">Parts</a></li>
+
-
<li><a href="https://2013.igem.org/Team:HIT-Harbin/Notebook">Notebook</a>
+
-
                        <ul class="sub-menu">
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Protocol">Protocol</a></li>
+
-
                                <li><a href="https://2013.igem.org/Team:HIT-Harbin/Calendar">Calendar</a></li>                             
+
-
                            </ul>
+
-
                        </li>
+
-
<li><a href="https://2013.igem.org/Team:HIT-Harbin/Safety">Safety</a></li>
+
-
<li><a href="https://2013.igem.org/Team:HIT-Harbin/Human_practices">Human Practice</a></li>
+
-
                    </ul>
+
-
                </div>
+
-
            </div> <!-- END HEADER -->
+
body {
 +
    margin: 0;
 +
    padding: 0;
 +
    line-height: 20px;
 +
    width: 100%;
 +
    font-family: Arial, Verdana;
 +
    font-size: 62.5%;
 +
    cursor: default;
 +
    color: #000000;
 +
    background: #fff url("https://static.igem.org/mediawiki/2013/d/dc/Bkg-pattern.jpg") repeat left top;
 +
}
-
            <!-- CONTENT START -->
+
/* ----------------------------------------------------------
 +
* HEADLINES
 +
* ----------------------------------------------------------*/
-
            <div id="content">   
+
h1, h2, h3, h4, h5, h6 {
-
            <div id="subheader-bar">
+
    margin: 0;
-
                    <div class="site-description"><h4><span class="colored">Home</span></h4></div>
+
    padding: 2px 0 0 0;
 +
    font-family: Arial;
 +
    font-weight: normal;
 +
    color: #37342d;
 +
    margin-bottom: 30px;
 +
    text-transform: uppercase;
 +
    word-spacing: 2px;
 +
}
-
                </div>           
+
h1, h1 a {
-
                <div class="mainarea">
+
    font-size: 28px;
 +
    line-height: 28px;
 +
}
 +
h2, h2 a {
 +
    font-size: 24px;
 +
    line-height: 27px;
 +
}
 +
h3, h3 a {
 +
    font-size: 22px;
 +
    line-height: 22px;
 +
}
 +
h4, h4 a {
 +
    font-size: 20px;
 +
    line-height: 20px;
 +
}
 +
h5, h5 a {
 +
    font-size: 18px;
 +
    line-height: 18px;
 +
}
 +
h6, h6 a {
 +
    font-size: 16px;
 +
    line-height: 16px;
 +
}
-
                <!-- NIVO SLIDER -->
+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
    display: block;
 +
    padding: 0;
 +
    margin: 0;
 +
    text-decoration: none !important;
 +
    color: #37342d;
 +
    overflow: visible;
 +
}
-
                <div class="px-slider-wrapper" id="slider">
+
h1.hashed, h2.hashed, h3.hashed, h4.hashed, h5.hashed, h6.hashed { background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x left center scroll ; clear: both; }
-
                    <div class="px-slider nivoSlider">
+
h1.hashed span, h2.hashed span, h3.hashed span, h4.hashed span, h5.hashed span, h6.hashed span {
-
                        <a href="default.htm"><img src="https://static.igem.org/mediawiki/2013/8/8d/Backpg1.jpg" alt="" title="#slider-caption-1" /></a>
+
    background: #fff url("https://static.igem.org/mediawiki/2013/d/dc/Bkg-pattern.jpg") repeat left top scroll;
-
                        <img src="images/demo-images/slider-img-2.jpg" title="#slider-caption-2" alt="" />
+
    padding: 0 10px 0 0;
-
                        <a href="default.htm"><img src="images/demo-images/slider-img-3.jpg" alt="" title="This is a caption demo" /></a>
+
}
-
                        <img src="images/demo-images/slider-img-4.jpg" alt="" title="This is another caption demo" />
+
.nocufon { padding: 0; }
-
                        <a href="default.htm"><img src="images/demo-images/slider-img-5.jpg" alt="" title="#slider-caption-3" /></a>
+
.subtitle { color: #37342d; font-weight: bold; margin-bottom: 20px; }
-
                    </div>
+
h4.subtitle, h4.subtitle a { font-size: 16px; line-height: 16px; }
 +
h5.subtitle, h5.subtitle a { font-size: 14px; line-height: 14px; }
 +
h6.subtitle, h6.subtitle a { font-size: 12px; line-height: 12px; }
-
                    <div id="slider-caption-1" class="nivo-html-caption">
+
span.colored { color: #ca9351; }
-
                        <span class="caption-title"><a href="http://en.hit.edu.cn" target="_blank">Harbin Institute of Technology</a></span>
+
h1 span.colored, h2 span.colored, h3 span.colored, h4 span.colored, h5 span.colored, h6 span.colored { color: #c0b294; }
-
                        Being strict in qualifications for graduates; making every endeavor in educating students.
+
-
                    </div>
+
-
                    <div id="slider-caption-2" class="nivo-html-caption">
+
-
                        <span class="caption-title">Sample title</span>
+
-
                        <span>This</span> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
+
-
                    </div>
+
-
                    <div id="slider-caption-3" class="nivo-html-caption">
+
-
                        <span class="caption-title">Simple questions</span>
+
-
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
-
                    </div>
+
-
                </div>
+
 +
p {
 +
    color: #37342d;
 +
    font: 13px/21px Arial;
 +
    padding-bottom: 26px;
 +
}
-
                <div class="multi-columns">
+
a { color: #ca9351; text-decoration: none; }
-
                <h4 class="hashed"><span>Biological Proportional Operational MU-circuit</span></h4>
+
a:hover { text-decoration: underline; }
-
                    <div class="preload alignleft">
+
img {
-
                        <img src="https://static.igem.org/mediawiki/2013/c/c6/HIT-Harbin_Project_Schematic.png" alt="" />
+
    background: transparent;
-
                    </div>
+
    padding: 0;
-
                    <p>In 1990s, Eric Mjolsness and several researchers developed the concept of genetic circuit from electronic circuits, to facilitate research in modeling gene expression and regulation (Mjolsness, Sharp et al. 1991, McAdams and Shapiro 1995, Reinitz and Sharp 1996, Sharp and Reinitz 1998). Upon the inspiration, Ron Weiss, a computer engineer of MIT, constructed an AND-gate genetic circuit in 2001 (Weiss, Knight et al. 2001). Based on Weiss’ pioneering result, the team of Jeff Hasty took IPTG (isopropyl β-D-1-Thiogalactopyranoside) and aTc (anhydrotetracycline) as the inputs and GFP (green fluorescent protein) as the output; demonstrating the AND-gate circuit in a more lucid and applicable way (Hasty, McMillen et al. 2002). In 2005, to investigate the prospect of genetic circuit, Oliver Rackham proved that other kinds of logic circuits are feasible by orthogonal topological structures (Rackham and Chin 2005). In 2013 iGEM, we inherit the idea of resembling electronic circuits. By incorporating AND/OR gate and operational amplifier into one circuit, we create our device-Biological Proportional Operational Mu-circuit (B-POM).
+
    margin: 0;
-
</p><p>
+
/*    margin-bottom: 20px;*/
-
In comparison with Weiss’ invention, B-POM has only one homogeneous or heterogeneous input and output. Besides, multiple magnitudes of input are distinguishable by the new circuit, and a given input corresponds to a certain output. Moreover, whereas general genetic circuits are vulnerable to the noise of cellular background, B-POM seems more interference-free, implicating the prominent stability of our device.
+
    display: inline-block;
-
</p><p>In applications, we plan to enhance Bio-electric Interface, the device designed by 2012 Edinburg iGEM team. If the input is biochemical signal molecules and the output become electrons, B-POM can be coupled with Bio-electric Interface, that ephemeral processes in cells will be precisely measurable by simple electronic methods and analyzable by computer. B-POM is also helpful in yoghurt producing, where the control of pH is inaccurate. When B-POM is transplanted into yoghurt-producing bacteria, let hydrogen ions be the input and lacR be the output, and select the proper B-POM parameters, then the pH will be steady around 5.5. In short, our inspired and reliable device is promising in various fields.
+
}
-
</p>
+
img.icon {
 +
    padding: 6px 18px 0 18px;
 +
    margin: 0 0 10px 0;
 +
}
 +
img.clean {
 +
    background: none;
 +
    padding: 0;
 +
    border: 0;
 +
}
 +
a.image-holder {
 +
    position: relative;
 +
    display: block;
 +
    margin: 0 0 30px 0;
 +
    padding: 0;
 +
    overflow: hidden;
 +
}
 +
a.image-holder img { margin: 0; position: relative; z-index: 10; }
 +
a.image-holder .image-zoom {
 +
    display: block;
 +
    display: none;
 +
    width: 100%;
 +
    height: 100%;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/a/aa/Zoom-icon.png") no-repeat center;
 +
    position: absolute;
 +
    margin: 0;
 +
    padding: 0;
 +
    top: 0px;
 +
    left: 0px;
 +
    z-index: 20;
 +
    overflow: hidden;
 +
}
 +
body .alignleft {
 +
    float: left;
 +
    margin-right: 24px;
 +
    margin-bottom: 20px;
 +
}
 +
body .alignright {
 +
    float: right;
 +
    margin-left: 24px;
 +
    margin-bottom: 20px;
 +
}
 +
body .aligncenter {
 +
    margin: 0 auto;
 +
    margin-bottom: 20px;
 +
    display: block;
 +
}
-
                </div>
+
body .alignleft.margin-bottom, body .alignright.margin-bottom, body .aligncenter.margin-bottom { margin-bottom: 30px; }
-
               
+
-
                <div class="cta-box">
+
-
                    <a href="https://2013.igem.org/Team:HIT-Harbin/Project" class="custom-button">Learn More</a>
+
-
                    <p>Click here and get more details about our project.</p>
+
-
                </div>
+
-
             
+
-
               
+
-
            </div><!-- END CONTENT -->
+
 +
.red { color: #e35337; }
-
        </div>
+
em { font-style: italic; }
 +
input { outline: 0; }
-
        <!-- JAVASCRIPT Imports -->
+
ul {
 +
    list-style-type: square;
 +
    list-style-position: outside;
 +
    margin: 0 0 26px 20px;
 +
}
 +
ul li { font: 13px/25px Arial; }
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/jquery/jquery-all.min.js?action=raw&ctype=text/javascript"></script>
+
.separator {
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/jquery/jquery.color.js?action=raw&ctype=text/javascript"></script>
+
    clear: both;
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/cufon/cufon-yui.js?action=raw&ctype=text/javascript"></script>
+
    height: 1px;
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/cufon/Bebas_5F400.font.js?action=raw&ctype=text/javascript"></script>
+
    width: auto;
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/jquery/jquery.roundabout.min.js?action=raw&ctype=text/javascript"></script>
+
    background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x left top;
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/jquery/jquery.nivo.slider.pack.js?action=raw&ctype=text/javascript"></script>
+
    margin-bottom: 40px;
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/jquery/jquery.jcarousel.min.js?action=raw&ctype=text/javascript"></script>
+
}
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/jquery/jquery.prettyPhoto.js?action=raw&ctype=text/javascript"></script>
+
-
        <script type="text/javascript" src="https://2013.igem.org/Team:HIT-Harbin/js/main.js?action=raw&ctype=text/javascript"></script>
+
-
        <script type="text/javascript"> Cufon.now(); </script>
+
blockquote { clear: both; }
 +
blockquote p {
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/6/65/Quotes.png") no-repeat left top;
 +
    background-position: 0 6px;
 +
    padding: 0 0 0 66px;
 +
    margin: 0;
 +
    font: italic 18px/25px "Times New Roman";
 +
    color: #37342d;
 +
}
 +
blockquote cite {
 +
    margin: 12px 0 40px 0;
 +
    padding: 10px 0 0 0;
 +
    display: block;
 +
    color: #c78c45;
 +
    font: bold 14px "Times New Roman";
 +
    background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x top left transparent;
 +
}
-
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
+
.preload { position: relative; overflow: hidden; }
 +
.preloading { background: #fcfbf9 url("https://static.igem.org/mediawiki/2013/archive/4/42/20130923094421%21Loading.gif") no-repeat center; position: absolute; z-index: 20; width: 100%; height: 100%; }
 +
.preload img { visibility: hidden; }
-
</body>
+
/* ----------------------------------------------------------
-
</html>
+
* FORM ELEMENTS
 +
* ----------------------------------------------------------*/
 +
 
 +
.form-details { color: #888172; font-size: 12px; float: right; text-align: right; margin-right: 162px; line-height: 40px; }
 +
label {
 +
    display: block;
 +
    color: #8c8c8c;
 +
    font-size: 12px;
 +
    padding: 4px 0;
 +
    font-style: italic;
 +
}
 +
input, textarea {
 +
    height: 16px;
 +
    padding: 8px 10px 8px 10px;
 +
    border: 1px solid #c3b598;
 +
    font: 12px/16px Arial;
 +
    color: #888172;
 +
    margin: 0 0 20px 0;
 +
}
 +
textarea { height: auto; }
 +
input:focus, textarea:focus {
 +
    border: 1px solid #eadcbf;
 +
    outline: none;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* ROOT TEMPLATE DEFINITION
 +
* ----------------------------------------------------------*/
 +
 
 +
#root {
 +
    margin: 0;
 +
    padding: 0;
 +
    font: 13px/21px Arial;
 +
    color: #37342d;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* HEADER DEFINITION
 +
* ----------------------------------------------------------*/
 +
 
 +
#header { position: relative; width: 960px; margin: 0 auto; }
 +
#header .header-bar {
 +
    margin: 50px 0 50px 0;
 +
    clear: both;
 +
    height: 79px;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/4/42/Header-bar-bkg.png") repeat-x left top;
 +
    position: relative;
 +
}
 +
 
 +
#header #logo {
 +
    height: 128px;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/8/82/Logo-bkg.png") repeat-x left top;
 +
    padding: 0;
 +
    margin: 0;
 +
    display: block;
 +
    width: auto;
 +
    position: relative;
 +
    vertical-align: top;
 +
    top: -24px;
 +
    left: 30px;
 +
    float: left;
 +
}
 +
#header #logo h1 {
 +
    position: relative;
 +
    margin: 0;
 +
    margin-top: 24px;
 +
    left: -5px;
 +
    right: -5px;
 +
    top: 0;
 +
    color: #fff;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/f/f2/Logo-fg.png") repeat-x left top;
 +
    height: 54px;
 +
    padding: 26px 5px 0 5px;
 +
    width: 100%;
 +
    display: block;
 +
    font-size: 35px;
 +
}
 +
body.js-enabled #header #logo h1 {}
 +
#header #logo h1 a {
 +
    font-size: 35px;
 +
    color: #fff;
 +
    display: block;
 +
    padding: 0 20px;
 +
    text-align: center;
 +
}
 +
#header #logo h1 a:hover {
 +
    text-decoration: none;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* MAIN MENU DEFINITION
 +
* ----------------------------------------------------------*/
 +
 
 +
ul#menu {
 +
    position: relative;
 +
    right: 0;
 +
    margin: 0;
 +
    padding: 0;
 +
    background: transparent;
 +
    z-index: 50;
 +
    overflow: visible;
 +
    list-style-type: none;
 +
    display: block;
 +
    float: right;
 +
}
 +
ul#menu > li {
 +
    display: inline-block;
 +
    float: left;
 +
    margin: 0;
 +
    padding: 0;
 +
    position: relative;
 +
}
 +
ul#menu > li > a {
 +
    color: #777163;
 +
    font: 15px/15px Arial;
 +
    display: block;
 +
    float: left;
 +
    margin: 0 14px;
 +
    height: 15px;
 +
    padding: 12px 0;
 +
    margin-top: 22px;
 +
    vertical-align: top;
 +
    text-transform: uppercase;
 +
}
 +
body.js-enabled ul#menu > li > a { margin-top: 25px; padding: 10px 0; }
 +
ul#menu > li > a:hover {
 +
    color: #37342d;
 +
    text-decoration: none;
 +
}
 +
ul#menu > li.current-menu-item > a,
 +
ul#menu > li.current_page_parent > a,  ul#menu > li.current-menu-parent > a,
 +
ul#menu > li.current-menu-ancestor > a,  ul#menu > li.current_page_ancestor > a {
 +
    color: #37342d;
 +
}
 +
 
 +
ul#menu > li.current-menu-item a:hover,
 +
ul#menu > li.current_page_parent a:hover,  ul#menu > li.current-menu-parent a:hover,
 +
ul#menu > li.current-menu-ancestor a:hover,  ul#menu > li.current_page_ancestor a:hover {  }
 +
 
 +
ul#menu li:hover > ul.sub-menu { display: block; }
 +
 
 +
/* ----------------------------------------------------------
 +
* SUBMENU
 +
* --------------------------------------------------------- */
 +
 
 +
ul#menu li ul.sub-menu {
 +
    margin: 0;
 +
    display: none;
 +
    position: absolute;
 +
    top: 60px;
 +
    left: 0px;
 +
    background: #fff;
 +
    z-index: 50;
 +
    border: 1px solid #f6e5cc;
 +
    border-radius: 3px;
 +
    box-shadow: 0 4px 5px rgba(0,0,0, .05);
 +
    width: 180px;
 +
}
 +
 
 +
ul#menu li ul.sub-menu li {
 +
    margin: 0;
 +
    position: relative;
 +
    clear: both;
 +
    display: block;
 +
    width: 180px;
 +
    padding: 0;
 +
}
 +
ul#menu li ul.sub-menu li a {
 +
    position: relative;
 +
    clear: both;
 +
    display: block;
 +
    cursor: pointer;
 +
    border: 0;
 +
    text-shadow: 0 0 0 transparent;
 +
    background: transparent none;
 +
    font-size: 12px;
 +
    font-weight: normal;
 +
    text-transform: none;
 +
    color: #888172;
 +
    width: 160px;
 +
    height: 20px;
 +
    line-height: 20px;
 +
    padding: 8px 10px;
 +
    text-align: left;
 +
    border-top: 1px solid #f6e5cc;
 +
    border-radius: 0;
 +
}
 +
ul#menu li ul.sub-menu li a.last, ul#menu li ul.sub-menu li:first-child > a { border-top: 0; }
 +
ul#menu li ul.sub-menu li a:hover {
 +
    box-shadow: 0 0 0 transparent;
 +
    border-radius: 0;
 +
    color: #37342d;
 +
    text-decoration: none;
 +
}
 +
ul#menu li ul.sub-menu li a.more { background: transparent url("https://static.igem.org/mediawiki/2013/c/cc/Menu-item-more.png") no-repeat right center; background-position: 166px; }
 +
ul#menu li ul.sub-menu ul.sub-menu,  ul#menu li ul.sub-menu ul.sub-menu ul.sub-menu {
 +
    left: 160px;
 +
    top: 8px;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* MEGAMENU
 +
* --------------------------------------------------------- */
 +
 
 +
#menu .pixel-mega-menu {
 +
    display: none;
 +
    position: absolute;
 +
    left: 0;
 +
    top: 60px;
 +
    min-width: 460px;
 +
    border-radius: 0;
 +
}
 +
#menu .pixel-mega-menu ul.sub-menu {
 +
    width: 100%;
 +
    padding: 30px 20px 20px 20px;
 +
    margin: 0;
 +
    display: block;
 +
    top: auto;
 +
    left: auto;
 +
    background: #fff;
 +
    border-radius: 3px;
 +
    border: 0;
 +
}
 +
#menu .pixel-mega-menu > ul.sub-menu { border: 1px solid #f6e5cc; }
 +
#menu .pixel-mega-menu > ul.sub-menu li ul.sub-menu {
 +
    padding: 0;
 +
    background: none;
 +
    position: relative;
 +
    left: auto;
 +
    top: auto;
 +
    color: #555;
 +
    overflow: hidden;
 +
    box-shadow: 0 0 0 transparent;
 +
}
 +
#menu .pixel-mega-menu > ul.sub-menu ul li {
 +
    margin: 0;
 +
    color: #777;
 +
    height: 24px;
 +
    line-height: 23px;
 +
    width: 90%;
 +
    margin-left: 0px;
 +
}
 +
#menu .pixel-mega-menu > ul.sub-menu > li a {
 +
    display: block;
 +
    border: 0;
 +
    padding: 0;
 +
    margin: 0;
 +
    height: auto;
 +
    height: 30px;
 +
    line-height: 30px;
 +
    text-indent: 0;
 +
    color: #888172;
 +
    text-decoration: underline;
 +
}
 +
#menu .pixel-mega-menu ul.sub-menu a:hover { background: none; color: #37342d; text-decoration: none; }
 +
ul#menu li:hover > .pixel-mega-menu { display: block; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li {
 +
    clear: none;
 +
    float: left;
 +
    display: block;
 +
    margin: 0;
 +
    padding: 0;
 +
    margin-bottom: 30px;
 +
    width: 48%;
 +
    margin-right: 2%;
 +
}
 +
#menu .pixel-mega-menu > ul.sub-menu > li:last-child,  #menu .pixel-mega-menu > ul.sub-menu > li.last {
 +
    width: 50%;
 +
    margin-right: 0;
 +
}
 +
#menu .pixel-mega-menu > ul.sub-menu li h4 {
 +
    font: 14px/18px Arial;
 +
    color: #948d7c;
 +
    border-bottom: 1px solid #f6e5cc;
 +
    margin-bottom: 14px;
 +
    padding: 0px 10px 4px 0;
 +
    background: none;
 +
}
 +
#menu .pixel-mega-menu > ul.sub-menu > li p {
 +
    padding-bottom: 10px;
 +
    color: #999;
 +
    color: #888172;
 +
    font: italic 12px/20px Arial;
 +
}
 +
 
 +
#menu .pixel-mega-menu.two-columns { width: 460px; }
 +
#menu .pixel-mega-menu.three-columns { width: 660px; }
 +
#menu .pixel-mega-menu.four-columns { width: 920px; }
 +
#menu .pixel-mega-menu.two-columns > ul.sub-menu > li { width: 48%; margin-right: 2%; }
 +
#menu .pixel-mega-menu.three-columns > ul.sub-menu > li { width: 31%; margin-right: 2%; }
 +
#menu .pixel-mega-menu.four-columns > ul.sub-menu > li { width: 23%; margin-right: 2%; }
 +
#menu .pixel-mega-menu.two-columns > ul.sub-menu > li.last { width: 50%; margin-right: 0; }
 +
#menu .pixel-mega-menu.three-columns > ul.sub-menu > li.last { width: 33%; margin-right: 0; }
 +
#menu .pixel-mega-menu.four-columns > ul.sub-menu > li.last { width: 25%; margin-right: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.newline { clear: both; width: 100%; padding: 0; margin: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.half-column { width: 48%; margin-right: 2%; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.third-column { width: 31%; margin-right: 2%; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column { width: 65%; margin-right: 2%; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.half-column.last { width: 50%; margin-right: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.third-column.last { width: 33%; margin-right: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column.last { width: 67%; margin-right: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.fourth-column { width: 23%; margin-right: 2%; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.fourth-column.last { width: 25%; margin-right: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.full-column { width: 100%; margin-right: 0; }
 +
#menu .pixel-mega-menu > ul.sub-menu > li.last { margin-right: 0; }
 +
 
 +
/* ----------------------------------------------------------
 +
* SUBHEADER
 +
* --------------------------------------------------------- */
 +
 
 +
#subheader-bar { margin-bottom: 30px; background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left; padding-bottom: 20px; overflow: hidden; }
 +
#subheader-bar div.site-description { color: #37342d; font: italic 13px/18px Arial; margin-top: 8px; display: inline-block; float: left; }
 +
#subheader-bar div.site-description h4 { margin: 0; padding: 0; font-style: normal; }
 +
 
 +
 
 +
/* ----------------------------------------------------------
 +
* MULTI COLUMNS
 +
* ----------------------------------------------------------*/
 +
 
 +
.multi-columns { clear: both; overflow: hidden; margin-bottom: 20px; }
 +
.multi-columns .multi-columns { clear: both; margin: 0; }
 +
.multi-columns .half { float: left; width: 48%; margin-right: 4%; }
 +
.multi-columns .third { float: left; width: 31%; margin-right: 3.5%; }
 +
.multi-columns .twothirds { float: left; width: 65.5%; margin-right: 3.5%; }
 +
.multi-columns .fourth { float: left; width: 22%; margin-right: 4%; }
 +
#root .clearer { clear: both; }
 +
#root .last { margin-right: 0; }
 +
 
 +
/* ----------------------------------------------------------
 +
* CONTENT
 +
* --------------------------------------------------------- */
 +
 
 +
#content {
 +
    width: 960px;
 +
    margin: 0 auto;
 +
    padding: 0 0 30px 0;
 +
    min-height: 300px;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* MAINAREA + SIDEBARS
 +
* ----------------------------------------------------------*/
 +
 
 +
.sidebar-left, .sidebar-right {
 +
    float: left;
 +
    width: 190px;
 +
    margin: 0 0 40px 0;
 +
    padding: 4px 10px 0 0;
 +
    margin-right: 30px;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/5/55/Sidebar-vert-sep-bkg.jpg") repeat-y right top scroll;
 +
}
 +
.mainarea-right, .mainarea-left, .mainarea-center {
 +
    float: left;
 +
    width: 730px;
 +
    overflow: hidden;
 +
    margin: 0;
 +
    padding: 4px 0 20px 0;
 +
}
 +
.sidebar-right { float: right; margin: 0; background: transparent url("https://static.igem.org/mediawiki/2013/5/55/Sidebar-vert-sep-bkg.jpg") repeat-y left top scroll; padding: 4px 0 0 10px; }
 +
.mainarea-left { float: left; margin: 0 30px 0 0; }
 +
.mainarea-center { width: 500px; margin: 0 30px 0 0; float: left; }
 +
.sidebar-right.margin { float: left; }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ----------------------------------------------------------
 +
* CUSTOM HEADLINES
 +
* ----------------------------------------------------------*/
 +
 
 +
.custom-headline {
 +
    font: 15px/18px Arial;
 +
    text-transform: uppercase;
 +
    color: #c78c45;
 +
    margin-bottom: 26px;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* CUSTOM BUTTONS
 +
* --------------------------------------------------------- */
 +
 
 +
a.custom-button {
 +
    display: inline-block;
 +
    height: 34px;
 +
    font: bold 13px/34px Arial;
 +
    color: #fff;
 +
    background: #fff url("https://static.igem.org/mediawiki/2013/1/15/Button-bkg.jpg") repeat-x center top;
 +
    padding: 0 16px;
 +
    border: 1px solid #aa9973;
 +
    text-shadow: 0 1px 0 #948564;
 +
    margin: 0 0 30px 0;
 +
    box-shadow: inset 0 0 1px 0 #fee7b4;
 +
    text-align: center;
 +
}
 +
a.custom-button:hover {
 +
    text-decoration: none;
 +
    background: #fff url("https://static.igem.org/mediawiki/2013/9/92/Button-bkg-over.jpg") repeat-x center top;
 +
    box-shadow: inset 0 -10px 20px #b5a789;
 +
}
 +
 
 +
a.more-button {
 +
    display: inline-block;
 +
    height: 23px;
 +
    background: #c3b598 url("https://static.igem.org/mediawiki/2013/b/bf/More-button-arrow.gif") no-repeat right center;
 +
    padding: 0 26px 0 10px;
 +
    color: #fff;
 +
    font: italic 13px/22px Arial;
 +
    margin: 0 0 30px 0;
 +
}
 +
a.more-button:hover {
 +
    background: #6c675c url("https://static.igem.org/mediawiki/2013/c/c9/More-button-arrow-over.gif") no-repeat right center;
 +
    text-decoration: none;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* CALL TO ACTION BOX
 +
* --------------------------------------------------------- */
 +
 
 +
.cta-box {
 +
    height: 59px;
 +
    line-height: 79px;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/4/42/Header-bar-bkg.png") repeat-x center top;
 +
    overflow: hidden;
 +
    padding: 20px 14px 0 14px;
 +
    margin: 0 0 44px 0;
 +
}
 +
.cta-box p {
 +
    color: #37342d;
 +
    font: italic 25px/34px "Times New Roman";
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
.cta-box a.custom-button {
 +
    position: relative;
 +
    top: -4px;
 +
    float: right;
 +
    font-size: 16px;
 +
    line-height: 46px;
 +
    width: 150px;
 +
    height: 46px;
 +
    margin: 0;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* NIVO SLIDER
 +
* --------------------------------------------------------- */
 +
 
 +
.px-slider-wrapper {
 +
    position: relative;
 +
    padding-bottom: 50px;
 +
    margin-bottom: 44px;
 +
}
 +
.px-slider.nivoSlider img, .px-slider.nivoSliderThumbs img { display: none; }
 +
.px-slider .nivo-controlNav img { display: block; }
 +
.px-slider-wrapper.nodescr { padding: 0; margin-bottom: 30px; }
 +
.px-slider.nivoSlider, .px-slider.nivoSliderThumbs {
 +
    width: 960px;
 +
    height: 340px;
 +
    position: relative;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/archive/4/42/20130923094421%21Loading.gif") no-repeat 50% 50%;
 +
}
 +
.mainareaSlider { width: 730px !important; background: transparent url("https://static.igem.org/mediawiki/2013/archive/4/42/20130923094421%21Loading.gif") no-repeat 50% 50%; }
 +
.px-slider.nivoSlider .nivo-controlNav {
 +
    position: absolute;
 +
    bottom: 0px;
 +
    right: 0px;
 +
    background: #000;
 +
    background: rgba(0, 0, 0, 0.5);
 +
    overflow: hidden;
 +
    padding: 8px 12px;
 +
    width: auto;
 +
    z-index: 10;
 +
}
 +
.px-slider.nivoSlider .nivo-controlNav a {
 +
    display: block;
 +
    float: left;
 +
    margin-left: 8px;
 +
    width: 6px;
 +
    height: 6px;
 +
    border-radius: 6px;
 +
    text-indent: -9999px;
 +
    background: #f6eee5;
 +
}
 +
.px-slider.nivoSlider .nivo-controlNav a:first-child { margin-left: 0; }
 +
.px-slider.nivoSlider .nivo-controlNav a.active { background: #dcb78d; }
 +
 
 +
.px-slider.nivoSlider .nivo-caption {
 +
    position: absolute;
 +
    bottom: -46px;
 +
    height: 40px;
 +
    line-height: 40px;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/8/87/Nivo-caption-bkg.png") repeat top left;
 +
}
 +
.px-slider.nivoSlider .nivo-caption p {
 +
    line-height: 40px;
 +
    padding: 0 10px;
 +
    font-size: 13px;
 +
    color: #242320;
 +
}
 +
.px-slider.nivoSlider .nivo-caption p span.caption-title {
 +
    color: #242320;
 +
    padding: 0 20px 0 10px;
 +
    font: bold 13px Arial;
 +
    text-transform: uppercase;
 +
}
 +
.px-slider.nivoSlider .nivo-directionNav {
 +
    position: absolute;
 +
    left: 0;
 +
    top: 50%;
 +
    margin-top: -20px;
 +
    right: 10px;
 +
    display: block;
 +
    width: 100%;
 +
    height: 40px;
 +
}
 +
.px-slider.nivoSlider .nivo-directionNav a {
 +
    display: block;
 +
    top: 0;
 +
    width: 69px;
 +
    height: 40px;
 +
    text-indent: -9999px;
 +
}
 +
.px-slider.nivoSlider .nivo-directionNav a.nivo-prevNav {
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/d/dc/Nivo-nav-left.png") no-repeat left top;
 +
    left: -24px;
 +
}
 +
.px-slider.nivoSlider .nivo-directionNav a.nivo-nextNav {
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/8/80/Nivo-nav-right.png") no-repeat left top;
 +
    right: -24px;
 +
}
 +
 
 +
/* THUMBNAILS */
 +
 
 +
.px-slider.nivoSliderThumbs .nivo-controlNav {
 +
    left: 0;
 +
    bottom: -62px;
 +
    background: none;
 +
    background: #000;
 +
    background: #000 url("https://static.igem.org/mediawiki/2013/6/63/Slider-thumbs-bkg.png") repeat-x top left;
 +
    height: 60px;
 +
    margin: 0;
 +
    padding: 1px;
 +
    overflow: hidden;
 +
}
 +
.px-slider.nivoSliderThumbs .nivo-controlNav a {
 +
    width: 80px;
 +
    height: 60px;
 +
    margin: 0 0 0 1px;
 +
    background: transparent;
 +
    border-radius: 0;
 +
}
 +
.px-slider.nivoSliderThumbs .nivo-controlNav a:first-child { margin-left: 0; }
 +
.px-slider-wrapper.thumbs { margin-bottom: 90px; }
 +
.px-slider.nivoSliderThumbs .nivo-controlNav a.active { background: transparent; }
 +
.px-slider.nivoSliderThumbs .nivo-caption { bottom: -106px; }
 +
 
 +
 
 +
/* ----------------------------------------------------------
 +
* ROUNDABOUT SLIDER
 +
* --------------------------------------------------------- */
 +
 
 +
.px-slider.circles ul {
 +
    position: relative;
 +
    top: 0;
 +
    display: block;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    margin: 0 auto;
 +
    padding: 0;
 +
    width: 100%;
 +
    width: 760px;
 +
    z-index: 0;
 +
}
 +
body.js-enabled .px-slider.circles ul {
 +
    margin: 0 auto 80px auto;
 +
}
 +
.px-slider.circles ul li {
 +
    display: inline-block;
 +
    float: left;
 +
    width: 400px;
 +
    margin: 0 20px 20px 0;
 +
}
 +
.circles .roundabout-holder {
 +
    list-style: none;
 +
    padding: 0;
 +
    margin: 0 auto;
 +
    height: 370px;
 +
    width: 760px;
 +
}
 +
.circles .roundabout-moveable-item {
 +
    height: 360px;
 +
    width: 400px;
 +
    cursor: pointer;
 +
}
 +
.circles .roundabout-moveable-item img {
 +
    width: 100%;
 +
    height: 100%;
 +
    padding: 0;
 +
    border: 0;
 +
    margin: 0;
 +
    background: none;
 +
    border-radius: 6px;
 +
    overflow: hidden;
 +
}
 +
.circles .roundabout-moveable-item a {
 +
    position: relative;
 +
    border-radius: 6px;
 +
    width: 100%;
 +
    height: 100%;
 +
    overflow: hidden;
 +
    display: block;
 +
    background: #eee;
 +
    border: 1px solid #fff;
 +
}
 +
.circles .roundabout-moveable-item.roundabout-in-focus a { border: 1px solid #fff; }
 +
.circles .roundabout-moveable-item span {
 +
    position: relative;
 +
    width: 100%;
 +
    padding: 14px 0;
 +
    display: block;
 +
    text-align: center;
 +
    font: bold 0.9em/24px Arial;
 +
    text-transform: uppercase;
 +
    color: #e5c8a6;
 +
}
 +
.circles .roundabout-moveable-item.roundabout-in-focus span { color: #ab7b40; }
 +
.circles .roundabout-in-focus { cursor: auto; }
 +
 
 +
/* ----------------------------------------------------------
 +
* BLOG
 +
* ----------------------------------------------------------*/
 +
 
 +
.large-post {
 +
    overflow: hidden;
 +
    margin: 0 0 10px 0;
 +
    padding: 0;
 +
}
 +
.large-post .meta-column {
 +
    width: 35%;
 +
    float: left;
 +
    margin-right: 4%;
 +
}
 +
.large-post .content-column {
 +
    width: 59%;
 +
    float: left;
 +
}
 +
.large-post .meta-column h2.nocufon {
 +
    margin: 0 0 8px 0;
 +
    padding: 0 0 14px 0;
 +
    background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left transparent;
 +
}
 +
.large-post .meta-column h2.nocufon a { color: #c78c45; }
 +
.large-post .meta-column h2.nocufon a:hover { color: #b0752e; text-decoration: none; }
 +
.large-post .meta-column div.meta-data, ul.post-list li .meta-data {
 +
    color: #37342d;
 +
    font-size: 11px;
 +
    height: 19px;
 +
    overflow: hidden;
 +
}
 +
.large-post .meta-column div.meta-data a, ul.post-list li .meta-data a {
 +
    color: #37342d;
 +
    font-weight: bold;
 +
    font-size: 11px;
 +
}
 +
.large-post .meta-column div.meta-data .author, ul.post-list li .meta-data .author {
 +
    height: 19px;
 +
    padding: 0 14px 0 0;
 +
    background: url("https://static.igem.org/mediawiki/2013/1/19/Post-meta-sep.jpg") no-repeat right top transparent;
 +
}
 +
.large-post .meta-column div.meta-data .comments, ul.post-list li .meta-data .comments {
 +
    padding: 0 10px;
 +
    height: 19px;
 +
}
 +
ul.post-list {
 +
    margin: 0 0 20px 0;
 +
    padding: 0;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    overflow: hidden;
 +
}
 +
ul.post-list li { padding: 0; margin: 0; float: left; width: 48%; margin-right: 4%; overflow: hidden; }
 +
ul.post-list li .post-title {
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/8/87/Nivo-caption-bkg.png") repeat left top;
 +
    margin: 0;
 +
    padding: 10px;
 +
    text-align: center;
 +
    clear: both;
 +
    font: bold 13px/18px Arial;
 +
    text-transform: uppercase;
 +
}
 +
ul.post-list li .post-title a { color: #37342d; }
 +
ul.post-list li .meta-data { text-align: center; padding: 14px 0; margin: 0 0 16px 0; background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left transparent; }
 +
ul.post-list li.separator { width: 100%; clear: both; margin: 0 0 30px 0; }
 +
 
 +
.post-navigator {
 +
    margin: 0 0 30px 0;
 +
    padding: 30px 0 0 0;
 +
    overflow: hidden;
 +
    background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x top left transparent;
 +
}
 +
.post-navigator a {
 +
    min-height: 20px;
 +
    font: italic 17px/25px Georgia;
 +
    vertical-align: top;
 +
    color: #37342d;
 +
    display: block;
 +
    padding: 0;
 +
    width: 250px;
 +
}
 +
.post-navigator a:hover { color: #c78c45; text-decoration: none; }
 +
.post-navigator a.prev { float: left; background: url("https://static.igem.org/mediawiki/2013/0/03/Prev-posts.png") no-repeat left center; padding-left: 20px; text-align: left; }
 +
.post-navigator a.next { float: right; background: url("https://static.igem.org/mediawiki/2013/c/c1/Next-posts.png") no-repeat right center; padding-right: 20px; text-align: right; }
 +
.post-navigator a.prev:hover { float: left; background: url("https://static.igem.org/mediawiki/2013/2/2e/Prev-posts-over.png") no-repeat left center; }
 +
.post-navigator a.next:hover { float: right; background: url("https://static.igem.org/mediawiki/2013/3/30/Next-posts-over.png") no-repeat right center; }
 +
 
 +
/* ----------------------------------------------------------
 +
* COMMENTS
 +
* ----------------------------------------------------------*/
 +
 
 +
ul.commentlist {
 +
    margin: 0 0 20px 0;
 +
    padding: 0;
 +
    overflow: hidden;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
}
 +
ul.commentlist li .comment-content, ul.commentlist li ul.children .comment-content {
 +
    background: url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x top left;
 +
    padding-top: 30px;
 +
    margin: 0;
 +
    overflow: hidden;
 +
}
 +
ul.commentlist li:first-child > .comment-content {
 +
    border-top: 0;
 +
    background: none;
 +
    padding-top: 0;
 +
}
 +
ul.commentlist li ul.children {
 +
    padding-left: 20px;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    margin: 0;
 +
}
 +
ul.commentlist li img {
 +
    padding: 3px;
 +
    background: #fff;
 +
    float: left;
 +
}
 +
ul.commentlist li .comment-body {
 +
    overflow: hidden;
 +
    margin-left: 90px;
 +
}
 +
ul.commentlist li .comment-body .meta-data .author {
 +
    font: bold 13px/20px Arial;
 +
    color: #000;
 +
    margin-right: 4px;
 +
    padding-right: 8px;
 +
    background: url("https://static.igem.org/mediawiki/2013/a/a5/Dot-bkg.gif") no-repeat right center transparent;
 +
}
 +
ul.commentlist li .comment-body .meta-data, ul.commentlist li .comment-body .meta-data a {
 +
    color: #000;
 +
    font: normal 13px/20px Arial;
 +
    margin-bottom: 14px;
 +
}
 +
ul.commentlist li .comment-body .meta-data a.comment-reply-link {
 +
    color: #b76552;
 +
    margin-left: 20px;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* RECENT WORK BOX
 +
* --------------------------------------------------------- */
 +
 
 +
.recent-work .custom-headline {
 +
    margin-bottom: 10px;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* PORTFOLIO
 +
* ----------------------------------------------------------*/
 +
 
 +
.portfolio-navbar {
 +
    overflow: hidden;
 +
    margin: 0 0 36px 0;
 +
    padding: 0;
 +
}
 +
.portfolio-navbar ul {
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    overflow: hidden;
 +
}
 +
.portfolio-navbar ul li {
 +
    display: inline-block;
 +
    float: left;
 +
    color: #d1cab8;
 +
    font-weight: bold;
 +
    margin: 0 6px 0 0;
 +
}
 +
.portfolio-navbar ul li a {
 +
    display: block;
 +
    float: left;
 +
    color: #37342d;
 +
    padding: 0 6px 0 0;
 +
    font-weight: normal;
 +
    font-size: 13px;
 +
}
 +
 
 +
/* ----------------------------------------------------------
 +
* PORTFOLIO COLUMNS
 +
* ----------------------------------------------------------*/
 +
 
 +
ul.portfolio {
 +
    margin: 0 0 10px 0;
 +
    padding: 0;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    overflow: hidden;
 +
    width: 100%;
 +
    position: relative;
 +
    display: block;
 +
}
 +
ul.portfolio li {
 +
    margin: 0 0 30px 0;
 +
    padding: 0;
 +
    float: left;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
ul.portfolio li a.image-holder { display: block; background: #fff; }
 +
ul.portfolio.third li { width: 31%; margin-right: 3.5%; }
 +
ul.portfolio.half li { width: 48%; margin-right: 4%; }
 +
 
 +
ul.portfolio.third li a.image-holder { margin-bottom: 10px; height: 200px; z-index: 10; }
 +
ul.portfolio.third.notfull li a.image-holder { width: 230px; }
 +
ul.portfolio.half li a.image-holder { margin-bottom: 10px; height: 250px; z-index: 10; }
 +
ul.portfolio.half.notfull li a.image-holder { width: 355px; }
 +
 
 +
ul.portfolio li.separator {
 +
    clear: left;
 +
    height: 1px;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x bottom left;
 +
    width: 100%;
 +
    margin: 0 0 30px 0;
 +
    padding: 0;
 +
}
 +
ul.portfolio li .meta-data {
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/8/87/Nivo-caption-bkg.png") repeat left top;
 +
    margin: 0;
 +
    padding: 10px;
 +
    text-align: center;
 +
    clear: both;
 +
    font: bold 13px/18px Arial;
 +
    text-transform: uppercase;
 +
}
 +
ul.portfolio li .meta-data a { color: #37342d; }
 +
ul.portfolio li .description {
 +
    background: rgb(235, 225, 204);
 +
    background: none repeat 0 0 rgba(235, 225, 204, 0.95);
 +
    padding: 20px;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    display: block;
 +
    opacity: 0;
 +
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
    z-index: 30;
 +
}
 +
ul.portfolio li .description span { display: block; padding-bottom: 20px; font: normal 13px/20px Georgia; color: #555; }
 +
ul.portfolio li .description em { font: italic 11px/16px Georgia; color: #917e4d; }
 +
ul.portfolio.third li .description { height: 200px; }
 +
ul.portfolio.half li .description { height: 250px; }
 +
 
 +
 
 +
/* ----------------------------------------------------------
 +
* WIDGETS
 +
* ----------------------------------------------------------*/
 +
 
 +
.widget { margin: 0 0 40px 0; overflow: visible !important; }
 +
#content .widget .px-widget-title h3, #content .widget h3 {
 +
    font: bold 13px/18px Arial;
 +
    color: #c78c45;
 +
    text-transform: uppercase;
 +
    margin-bottom: 18px;
 +
    background: none;
 +
}
 +
#content .widget ul {
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    position: relative;
 +
}
 +
#content .widget ul li {
 +
    position: relative;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/e/e6/Separator-bkg.png") repeat-x left bottom;
 +
}
 +
#content .widget ul li a {
 +
    position: relative;
 +
    font: 12px/18px Arial;
 +
    color: #625d52;
 +
    display: block;
 +
    padding: 7px 8px 8px 12px;
 +
    width: 170px;
 +
}
 +
#content .widget ul li a:hover {
 +
    overflow: visible !important;
 +
    color: #fff;
 +
    font-weight: bold;
 +
    text-decoration: none;
 +
    background: transparent url("https://static.igem.org/mediawiki/2013/9/99/Sidebar-link-over-right.jpg") no-repeat left top scroll;
 +
}
 +
#content .sidebar-right.margin { margin-right: 30px }
 +
#content .sidebar-right .widget ul li a:hover { background: transparent url("https://static.igem.org/mediawiki/2013/3/33/Sidebar-link-over-left.jpg") no-repeat left top scroll; padding-left: 26px; }
 +
#content .sidebar-right .px-widget-title { padding-left: 4px; }
 +
#content .widget.nohover ul li a:hover {
 +
    background: none;
 +
    color: #c78c45;
 +
    font-weight: normal;
 +
}
 +
#content .sidebar-right .widget.nohover ul li a:hover { padding-left: 12px; }
 +
 
 +
 
 +
 
 +
/* ----------------------------------------------------------
 +
* GALLERY
 +
* ----------------------------------------------------------*/
 +
 
 +
ul.gallery {
 +
    list-style-type: none;
 +
    list-style-position: outside;
 +
    margin: 0 0 10px 0;
 +
    padding: 0;
 +
    overflow: hidden;
 +
}
 +
ul.gallery li {
 +
    display: inline-block;
 +
    float: left;
 +
    margin: 0 8px 8px 0;
 +
}
 +
ul.gallery li a.image-holder { margin: 0; }
 +
ul.gallery li img {
 +
    display: block;
 +
    margin: 0;
 +
    float: left;
 +
}
 +
ul.gallery.small li { margin: 0 6px 6px 0; }
 +
ul.gallery.small li img { border: 0; padding: 0; }
 +
 
 +
.wrapper960 {
 +
    width: 960px;
 +
    margin: 0 auto;
 +
}
 +
/*================================================= */
 +
/* Back To Top
 +
================================================== */
 +
#backtotop {
 +
position: fixed;
 +
right:0px;
 +
display:none;
 +
bottom: 20px;
 +
margin: 0 20px 0 0;
 +
}
 +
 
 +
#backtotop a {
 +
text-decoration:none;
 +
border:0 none;
 +
display:block;
 +
width:45px;
 +
height:45px;
 +
background: url("https://static.igem.org/mediawiki/2013/a/a1/Back_to_top.png") no-repeat 50% 50%;
 +
background-color:#c0c0c0;
 +
-webkit-transition: all 0.1s ease-in-out;
 +
    -moz-transition: all 0.1s ease-in-out;
 +
    -o-transition: all 0.1s ease-in-out;
 +
    -ms-transition: all 0.1s ease-in-out;
 +
    transition: all 0.1s ease-in-out;
 +
}
 +
 
 +
#backtotop a:hover {background-color: #81b600;}

Latest revision as of 17:13, 27 September 2013

/* ------------------------------------------------------------------------------------ */ /* -------------------------------- BASIC STYLE RESET --------------------------------- */ /* ------------------------------------------------------------------------------------ */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 

   margin: 0;
   padding: 0;
   border: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;

}

html { overflow-x: hidden; }

/* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } a { outline: none; } img { vertical-align: top; } .clearer { height: 0px; clear: both; } /* ------------------------------------------------------------------------------------ */ /* -------------------------------- MAIN STYLES DEFINITION ---------------------------- */ /* ------------------------------------------------------------------------------------ */ body { margin: 0; padding: 0; line-height: 20px; width: 100%; font-family: Arial, Verdana; font-size: 62.5%; cursor: default; color: #000000; background: #fff url("Bkg-pattern.jpg") repeat left top; } /* ---------------------------------------------------------- * HEADLINES * ----------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { margin: 0; padding: 2px 0 0 0; font-family: Arial; font-weight: normal; color: #37342d; margin-bottom: 30px; text-transform: uppercase; word-spacing: 2px; } h1, h1 a { font-size: 28px; line-height: 28px; } h2, h2 a { font-size: 24px; line-height: 27px; } h3, h3 a { font-size: 22px; line-height: 22px; } h4, h4 a { font-size: 20px; line-height: 20px; } h5, h5 a { font-size: 18px; line-height: 18px; } h6, h6 a { font-size: 16px; line-height: 16px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { display: block; padding: 0; margin: 0; text-decoration: none !important; color: #37342d; overflow: visible; } h1.hashed, h2.hashed, h3.hashed, h4.hashed, h5.hashed, h6.hashed { background: transparent url("Separator-bkg.png") repeat-x left center scroll ; clear: both; } h1.hashed span, h2.hashed span, h3.hashed span, h4.hashed span, h5.hashed span, h6.hashed span { background: #fff url("Bkg-pattern.jpg") repeat left top scroll; padding: 0 10px 0 0; } .nocufon { padding: 0; } .subtitle { color: #37342d; font-weight: bold; margin-bottom: 20px; } h4.subtitle, h4.subtitle a { font-size: 16px; line-height: 16px; } h5.subtitle, h5.subtitle a { font-size: 14px; line-height: 14px; } h6.subtitle, h6.subtitle a { font-size: 12px; line-height: 12px; } span.colored { color: #ca9351; } h1 span.colored, h2 span.colored, h3 span.colored, h4 span.colored, h5 span.colored, h6 span.colored { color: #c0b294; } p { color: #37342d; font: 13px/21px Arial; padding-bottom: 26px; } a { color: #ca9351; text-decoration: none; } a:hover { text-decoration: underline; } img { background: transparent; padding: 0; margin: 0; /* margin-bottom: 20px;*/ display: inline-block; } img.icon { padding: 6px 18px 0 18px; margin: 0 0 10px 0; } img.clean { background: none; padding: 0; border: 0; } a.image-holder { position: relative; display: block; margin: 0 0 30px 0; padding: 0; overflow: hidden; } a.image-holder img { margin: 0; position: relative; z-index: 10; } a.image-holder .image-zoom { display: block; display: none; width: 100%; height: 100%; background: transparent url("Zoom-icon.png") no-repeat center; position: absolute; margin: 0; padding: 0; top: 0px; left: 0px; z-index: 20; overflow: hidden; } body .alignleft { float: left; margin-right: 24px; margin-bottom: 20px; } body .alignright { float: right; margin-left: 24px; margin-bottom: 20px; } body .aligncenter { margin: 0 auto; margin-bottom: 20px; display: block; } body .alignleft.margin-bottom, body .alignright.margin-bottom, body .aligncenter.margin-bottom { margin-bottom: 30px; } .red { color: #e35337; } em { font-style: italic; } input { outline: 0; } ul { list-style-type: square; list-style-position: outside; margin: 0 0 26px 20px; } ul li { font: 13px/25px Arial; } .separator { clear: both; height: 1px; width: auto; background: transparent url("Separator-bkg.png") repeat-x left top; margin-bottom: 40px; } blockquote { clear: both; } blockquote p { background: transparent url("Quotes.png") no-repeat left top; background-position: 0 6px; padding: 0 0 0 66px; margin: 0; font: italic 18px/25px "Times New Roman"; color: #37342d; } blockquote cite { margin: 12px 0 40px 0; padding: 10px 0 0 0; display: block; color: #c78c45; font: bold 14px "Times New Roman"; background: url("Separator-bkg.png") repeat-x top left transparent; } .preload { position: relative; overflow: hidden; } .preloading { background: #fcfbf9 url("20130923094421%21Loading.gif") no-repeat center; position: absolute; z-index: 20; width: 100%; height: 100%; } .preload img { visibility: hidden; } /* ---------------------------------------------------------- * FORM ELEMENTS * ----------------------------------------------------------*/ .form-details { color: #888172; font-size: 12px; float: right; text-align: right; margin-right: 162px; line-height: 40px; } label { display: block; color: #8c8c8c; font-size: 12px; padding: 4px 0; font-style: italic; } input, textarea { height: 16px; padding: 8px 10px 8px 10px; border: 1px solid #c3b598; font: 12px/16px Arial; color: #888172; margin: 0 0 20px 0; } textarea { height: auto; } input:focus, textarea:focus { border: 1px solid #eadcbf; outline: none; } /* ---------------------------------------------------------- * ROOT TEMPLATE DEFINITION * ----------------------------------------------------------*/
  1. root {
margin: 0; padding: 0; font: 13px/21px Arial; color: #37342d; } /* ---------------------------------------------------------- * HEADER DEFINITION * ----------------------------------------------------------*/
  1. header { position: relative; width: 960px; margin: 0 auto; }
  2. header .header-bar {
margin: 50px 0 50px 0; clear: both; height: 79px; background: transparent url("Header-bar-bkg.png") repeat-x left top; position: relative; }
  1. header #logo {
height: 128px; background: transparent url("Logo-bkg.png") repeat-x left top; padding: 0; margin: 0; display: block; width: auto; position: relative; vertical-align: top; top: -24px; left: 30px; float: left; }
  1. header #logo h1 {
position: relative; margin: 0; margin-top: 24px; left: -5px; right: -5px; top: 0; color: #fff; background: transparent url("Logo-fg.png") repeat-x left top; height: 54px; padding: 26px 5px 0 5px; width: 100%; display: block; font-size: 35px; } body.js-enabled #header #logo h1 {}
  1. header #logo h1 a {
font-size: 35px; color: #fff; display: block; padding: 0 20px; text-align: center; }
  1. header #logo h1 a:hover {
text-decoration: none; } /* ---------------------------------------------------------- * MAIN MENU DEFINITION * ----------------------------------------------------------*/ ul#menu { position: relative; right: 0; margin: 0; padding: 0; background: transparent; z-index: 50; overflow: visible; list-style-type: none; display: block; float: right; } ul#menu > li { display: inline-block; float: left; margin: 0; padding: 0; position: relative; } ul#menu > li > a { color: #777163; font: 15px/15px Arial; display: block; float: left; margin: 0 14px; height: 15px; padding: 12px 0; margin-top: 22px; vertical-align: top; text-transform: uppercase; } body.js-enabled ul#menu > li > a { margin-top: 25px; padding: 10px 0; } ul#menu > li > a:hover { color: #37342d; text-decoration: none; } ul#menu > li.current-menu-item > a, ul#menu > li.current_page_parent > a, ul#menu > li.current-menu-parent > a, ul#menu > li.current-menu-ancestor > a, ul#menu > li.current_page_ancestor > a { color: #37342d; } ul#menu > li.current-menu-item a:hover, ul#menu > li.current_page_parent a:hover, ul#menu > li.current-menu-parent a:hover, ul#menu > li.current-menu-ancestor a:hover, ul#menu > li.current_page_ancestor a:hover { } ul#menu li:hover > ul.sub-menu { display: block; } /* ---------------------------------------------------------- * SUBMENU * --------------------------------------------------------- */ ul#menu li ul.sub-menu { margin: 0; display: none; position: absolute; top: 60px; left: 0px; background: #fff; z-index: 50; border: 1px solid #f6e5cc; border-radius: 3px; box-shadow: 0 4px 5px rgba(0,0,0, .05); width: 180px; } ul#menu li ul.sub-menu li { margin: 0; position: relative; clear: both; display: block; width: 180px; padding: 0; } ul#menu li ul.sub-menu li a { position: relative; clear: both; display: block; cursor: pointer; border: 0; text-shadow: 0 0 0 transparent; background: transparent none; font-size: 12px; font-weight: normal; text-transform: none; color: #888172; width: 160px; height: 20px; line-height: 20px; padding: 8px 10px; text-align: left; border-top: 1px solid #f6e5cc; border-radius: 0; } ul#menu li ul.sub-menu li a.last, ul#menu li ul.sub-menu li:first-child > a { border-top: 0; } ul#menu li ul.sub-menu li a:hover { box-shadow: 0 0 0 transparent; border-radius: 0; color: #37342d; text-decoration: none; } ul#menu li ul.sub-menu li a.more { background: transparent url("Menu-item-more.png") no-repeat right center; background-position: 166px; } ul#menu li ul.sub-menu ul.sub-menu, ul#menu li ul.sub-menu ul.sub-menu ul.sub-menu { left: 160px; top: 8px; } /* ---------------------------------------------------------- * MEGAMENU * --------------------------------------------------------- */
  1. menu .pixel-mega-menu {
display: none; position: absolute; left: 0; top: 60px; min-width: 460px; border-radius: 0; }
  1. menu .pixel-mega-menu ul.sub-menu {
width: 100%; padding: 30px 20px 20px 20px; margin: 0; display: block; top: auto; left: auto; background: #fff; border-radius: 3px; border: 0; }
  1. menu .pixel-mega-menu > ul.sub-menu { border: 1px solid #f6e5cc; }
  2. menu .pixel-mega-menu > ul.sub-menu li ul.sub-menu {
padding: 0; background: none; position: relative; left: auto; top: auto; color: #555; overflow: hidden; box-shadow: 0 0 0 transparent; }
  1. menu .pixel-mega-menu > ul.sub-menu ul li {
margin: 0; color: #777; height: 24px; line-height: 23px; width: 90%; margin-left: 0px; }
  1. menu .pixel-mega-menu > ul.sub-menu > li a {
display: block; border: 0; padding: 0; margin: 0; height: auto; height: 30px; line-height: 30px; text-indent: 0; color: #888172; text-decoration: underline; }
  1. menu .pixel-mega-menu ul.sub-menu a:hover { background: none; color: #37342d; text-decoration: none; }
ul#menu li:hover > .pixel-mega-menu { display: block; }
  1. menu .pixel-mega-menu > ul.sub-menu > li {
clear: none; float: left; display: block; margin: 0; padding: 0; margin-bottom: 30px; width: 48%; margin-right: 2%; }
  1. menu .pixel-mega-menu > ul.sub-menu > li:last-child, #menu .pixel-mega-menu > ul.sub-menu > li.last {
width: 50%; margin-right: 0; }
  1. menu .pixel-mega-menu > ul.sub-menu li h4 {
font: 14px/18px Arial; color: #948d7c; border-bottom: 1px solid #f6e5cc; margin-bottom: 14px; padding: 0px 10px 4px 0; background: none; }
  1. menu .pixel-mega-menu > ul.sub-menu > li p {
padding-bottom: 10px; color: #999; color: #888172; font: italic 12px/20px Arial; }
  1. menu .pixel-mega-menu.two-columns { width: 460px; }
  2. menu .pixel-mega-menu.three-columns { width: 660px; }
  3. menu .pixel-mega-menu.four-columns { width: 920px; }
  4. menu .pixel-mega-menu.two-columns > ul.sub-menu > li { width: 48%; margin-right: 2%; }
  5. menu .pixel-mega-menu.three-columns > ul.sub-menu > li { width: 31%; margin-right: 2%; }
  6. menu .pixel-mega-menu.four-columns > ul.sub-menu > li { width: 23%; margin-right: 2%; }
  7. menu .pixel-mega-menu.two-columns > ul.sub-menu > li.last { width: 50%; margin-right: 0; }
  8. menu .pixel-mega-menu.three-columns > ul.sub-menu > li.last { width: 33%; margin-right: 0; }
  9. menu .pixel-mega-menu.four-columns > ul.sub-menu > li.last { width: 25%; margin-right: 0; }
  10. menu .pixel-mega-menu > ul.sub-menu > li.newline { clear: both; width: 100%; padding: 0; margin: 0; }
  11. menu .pixel-mega-menu > ul.sub-menu > li.half-column { width: 48%; margin-right: 2%; }
  12. menu .pixel-mega-menu > ul.sub-menu > li.third-column { width: 31%; margin-right: 2%; }
  13. menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column { width: 65%; margin-right: 2%; }
  14. menu .pixel-mega-menu > ul.sub-menu > li.half-column.last { width: 50%; margin-right: 0; }
  15. menu .pixel-mega-menu > ul.sub-menu > li.third-column.last { width: 33%; margin-right: 0; }
  16. menu .pixel-mega-menu > ul.sub-menu > li.two-thirds-column.last { width: 67%; margin-right: 0; }
  17. menu .pixel-mega-menu > ul.sub-menu > li.fourth-column { width: 23%; margin-right: 2%; }
  18. menu .pixel-mega-menu > ul.sub-menu > li.fourth-column.last { width: 25%; margin-right: 0; }
  19. menu .pixel-mega-menu > ul.sub-menu > li.full-column { width: 100%; margin-right: 0; }
  20. menu .pixel-mega-menu > ul.sub-menu > li.last { margin-right: 0; }
/* ---------------------------------------------------------- * SUBHEADER * --------------------------------------------------------- */
  1. subheader-bar { margin-bottom: 30px; background: transparent url("Separator-bkg.png") repeat-x bottom left; padding-bottom: 20px; overflow: hidden; }
  2. subheader-bar div.site-description { color: #37342d; font: italic 13px/18px Arial; margin-top: 8px; display: inline-block; float: left; }
  3. subheader-bar div.site-description h4 { margin: 0; padding: 0; font-style: normal; }
/* ---------------------------------------------------------- * MULTI COLUMNS * ----------------------------------------------------------*/ .multi-columns { clear: both; overflow: hidden; margin-bottom: 20px; } .multi-columns .multi-columns { clear: both; margin: 0; } .multi-columns .half { float: left; width: 48%; margin-right: 4%; } .multi-columns .third { float: left; width: 31%; margin-right: 3.5%; } .multi-columns .twothirds { float: left; width: 65.5%; margin-right: 3.5%; } .multi-columns .fourth { float: left; width: 22%; margin-right: 4%; }
  1. root .clearer { clear: both; }
  2. root .last { margin-right: 0; }
/* ---------------------------------------------------------- * CONTENT * --------------------------------------------------------- */
  1. content {
width: 960px; margin: 0 auto; padding: 0 0 30px 0; min-height: 300px; } /* ---------------------------------------------------------- * MAINAREA + SIDEBARS * ----------------------------------------------------------*/ .sidebar-left, .sidebar-right { float: left; width: 190px; margin: 0 0 40px 0; padding: 4px 10px 0 0; margin-right: 30px; background: transparent url("Sidebar-vert-sep-bkg.jpg") repeat-y right top scroll; } .mainarea-right, .mainarea-left, .mainarea-center { float: left; width: 730px; overflow: hidden; margin: 0; padding: 4px 0 20px 0; } .sidebar-right { float: right; margin: 0; background: transparent url("Sidebar-vert-sep-bkg.jpg") repeat-y left top scroll; padding: 4px 0 0 10px; } .mainarea-left { float: left; margin: 0 30px 0 0; } .mainarea-center { width: 500px; margin: 0 30px 0 0; float: left; } .sidebar-right.margin { float: left; } /* ---------------------------------------------------------- * CUSTOM HEADLINES * ----------------------------------------------------------*/ .custom-headline { font: 15px/18px Arial; text-transform: uppercase; color: #c78c45; margin-bottom: 26px; } /* ---------------------------------------------------------- * CUSTOM BUTTONS * --------------------------------------------------------- */ a.custom-button { display: inline-block; height: 34px; font: bold 13px/34px Arial; color: #fff; background: #fff url("Button-bkg.jpg") repeat-x center top; padding: 0 16px; border: 1px solid #aa9973; text-shadow: 0 1px 0 #948564; margin: 0 0 30px 0; box-shadow: inset 0 0 1px 0 #fee7b4; text-align: center; } a.custom-button:hover { text-decoration: none; background: #fff url("Button-bkg-over.jpg") repeat-x center top; box-shadow: inset 0 -10px 20px #b5a789; } a.more-button { display: inline-block; height: 23px; background: #c3b598 url("More-button-arrow.gif") no-repeat right center; padding: 0 26px 0 10px; color: #fff; font: italic 13px/22px Arial; margin: 0 0 30px 0; } a.more-button:hover { background: #6c675c url("More-button-arrow-over.gif") no-repeat right center; text-decoration: none; } /* ---------------------------------------------------------- * CALL TO ACTION BOX * --------------------------------------------------------- */ .cta-box { height: 59px; line-height: 79px; background: transparent url("Header-bar-bkg.png") repeat-x center top; overflow: hidden; padding: 20px 14px 0 14px; margin: 0 0 44px 0; } .cta-box p { color: #37342d; font: italic 25px/34px "Times New Roman"; margin: 0; padding: 0; } .cta-box a.custom-button { position: relative; top: -4px; float: right; font-size: 16px; line-height: 46px; width: 150px; height: 46px; margin: 0; } /* ---------------------------------------------------------- * NIVO SLIDER * --------------------------------------------------------- */ .px-slider-wrapper { position: relative; padding-bottom: 50px; margin-bottom: 44px; } .px-slider.nivoSlider img, .px-slider.nivoSliderThumbs img { display: none; } .px-slider .nivo-controlNav img { display: block; } .px-slider-wrapper.nodescr { padding: 0; margin-bottom: 30px; } .px-slider.nivoSlider, .px-slider.nivoSliderThumbs { width: 960px; height: 340px; position: relative; background: transparent url("20130923094421%21Loading.gif") no-repeat 50% 50%; } .mainareaSlider { width: 730px !important; background: transparent url("20130923094421%21Loading.gif") no-repeat 50% 50%; } .px-slider.nivoSlider .nivo-controlNav { position: absolute; bottom: 0px; right: 0px; background: #000; background: rgba(0, 0, 0, 0.5); overflow: hidden; padding: 8px 12px; width: auto; z-index: 10; } .px-slider.nivoSlider .nivo-controlNav a { display: block; float: left; margin-left: 8px; width: 6px; height: 6px; border-radius: 6px; text-indent: -9999px; background: #f6eee5; } .px-slider.nivoSlider .nivo-controlNav a:first-child { margin-left: 0; } .px-slider.nivoSlider .nivo-controlNav a.active { background: #dcb78d; } .px-slider.nivoSlider .nivo-caption { position: absolute; bottom: -46px; height: 40px; line-height: 40px; background: transparent url("Nivo-caption-bkg.png") repeat top left; } .px-slider.nivoSlider .nivo-caption p { line-height: 40px; padding: 0 10px; font-size: 13px; color: #242320; } .px-slider.nivoSlider .nivo-caption p span.caption-title { color: #242320; padding: 0 20px 0 10px; font: bold 13px Arial; text-transform: uppercase; } .px-slider.nivoSlider .nivo-directionNav { position: absolute; left: 0; top: 50%; margin-top: -20px; right: 10px; display: block; width: 100%; height: 40px; } .px-slider.nivoSlider .nivo-directionNav a { display: block; top: 0; width: 69px; height: 40px; text-indent: -9999px; } .px-slider.nivoSlider .nivo-directionNav a.nivo-prevNav { background: transparent url("Nivo-nav-left.png") no-repeat left top; left: -24px; } .px-slider.nivoSlider .nivo-directionNav a.nivo-nextNav { background: transparent url("Nivo-nav-right.png") no-repeat left top; right: -24px; } /* THUMBNAILS */ .px-slider.nivoSliderThumbs .nivo-controlNav { left: 0; bottom: -62px; background: none; background: #000; background: #000 url("Slider-thumbs-bkg.png") repeat-x top left; height: 60px; margin: 0; padding: 1px; overflow: hidden; } .px-slider.nivoSliderThumbs .nivo-controlNav a { width: 80px; height: 60px; margin: 0 0 0 1px; background: transparent; border-radius: 0; } .px-slider.nivoSliderThumbs .nivo-controlNav a:first-child { margin-left: 0; } .px-slider-wrapper.thumbs { margin-bottom: 90px; } .px-slider.nivoSliderThumbs .nivo-controlNav a.active { background: transparent; } .px-slider.nivoSliderThumbs .nivo-caption { bottom: -106px; } /* ---------------------------------------------------------- * ROUNDABOUT SLIDER * --------------------------------------------------------- */ .px-slider.circles ul { position: relative; top: 0; display: block; list-style-type: none; list-style-position: outside; margin: 0 auto; padding: 0; width: 100%; width: 760px; z-index: 0; } body.js-enabled .px-slider.circles ul { margin: 0 auto 80px auto; } .px-slider.circles ul li { display: inline-block; float: left; width: 400px; margin: 0 20px 20px 0; } .circles .roundabout-holder { list-style: none; padding: 0; margin: 0 auto; height: 370px; width: 760px; } .circles .roundabout-moveable-item { height: 360px; width: 400px; cursor: pointer; } .circles .roundabout-moveable-item img { width: 100%; height: 100%; padding: 0; border: 0; margin: 0; background: none; border-radius: 6px; overflow: hidden; } .circles .roundabout-moveable-item a { position: relative; border-radius: 6px; width: 100%; height: 100%; overflow: hidden; display: block; background: #eee; border: 1px solid #fff; } .circles .roundabout-moveable-item.roundabout-in-focus a { border: 1px solid #fff; } .circles .roundabout-moveable-item span { position: relative; width: 100%; padding: 14px 0; display: block; text-align: center; font: bold 0.9em/24px Arial; text-transform: uppercase; color: #e5c8a6; } .circles .roundabout-moveable-item.roundabout-in-focus span { color: #ab7b40; } .circles .roundabout-in-focus { cursor: auto; } /* ---------------------------------------------------------- * BLOG * ----------------------------------------------------------*/ .large-post { overflow: hidden; margin: 0 0 10px 0; padding: 0; } .large-post .meta-column { width: 35%; float: left; margin-right: 4%; } .large-post .content-column { width: 59%; float: left; } .large-post .meta-column h2.nocufon { margin: 0 0 8px 0; padding: 0 0 14px 0; background: url("Separator-bkg.png") repeat-x bottom left transparent; } .large-post .meta-column h2.nocufon a { color: #c78c45; } .large-post .meta-column h2.nocufon a:hover { color: #b0752e; text-decoration: none; } .large-post .meta-column div.meta-data, ul.post-list li .meta-data { color: #37342d; font-size: 11px; height: 19px; overflow: hidden; } .large-post .meta-column div.meta-data a, ul.post-list li .meta-data a { color: #37342d; font-weight: bold; font-size: 11px; } .large-post .meta-column div.meta-data .author, ul.post-list li .meta-data .author { height: 19px; padding: 0 14px 0 0; background: url("Post-meta-sep.jpg") no-repeat right top transparent; } .large-post .meta-column div.meta-data .comments, ul.post-list li .meta-data .comments { padding: 0 10px; height: 19px; } ul.post-list { margin: 0 0 20px 0; padding: 0; list-style-type: none; list-style-position: outside; overflow: hidden; } ul.post-list li { padding: 0; margin: 0; float: left; width: 48%; margin-right: 4%; overflow: hidden; } ul.post-list li .post-title { background: transparent url("Nivo-caption-bkg.png") repeat left top; margin: 0; padding: 10px; text-align: center; clear: both; font: bold 13px/18px Arial; text-transform: uppercase; } ul.post-list li .post-title a { color: #37342d; } ul.post-list li .meta-data { text-align: center; padding: 14px 0; margin: 0 0 16px 0; background: url("Separator-bkg.png") repeat-x bottom left transparent; } ul.post-list li.separator { width: 100%; clear: both; margin: 0 0 30px 0; } .post-navigator { margin: 0 0 30px 0; padding: 30px 0 0 0; overflow: hidden; background: url("Separator-bkg.png") repeat-x top left transparent; } .post-navigator a { min-height: 20px; font: italic 17px/25px Georgia; vertical-align: top; color: #37342d; display: block; padding: 0; width: 250px; } .post-navigator a:hover { color: #c78c45; text-decoration: none; } .post-navigator a.prev { float: left; background: url("Prev-posts.png") no-repeat left center; padding-left: 20px; text-align: left; } .post-navigator a.next { float: right; background: url("Next-posts.png") no-repeat right center; padding-right: 20px; text-align: right; } .post-navigator a.prev:hover { float: left; background: url("Prev-posts-over.png") no-repeat left center; } .post-navigator a.next:hover { float: right; background: url("Next-posts-over.png") no-repeat right center; } /* ---------------------------------------------------------- * COMMENTS * ----------------------------------------------------------*/ ul.commentlist { margin: 0 0 20px 0; padding: 0; overflow: hidden; list-style-type: none; list-style-position: outside; } ul.commentlist li .comment-content, ul.commentlist li ul.children .comment-content { background: url("Separator-bkg.png") repeat-x top left; padding-top: 30px; margin: 0; overflow: hidden; } ul.commentlist li:first-child > .comment-content { border-top: 0; background: none; padding-top: 0; } ul.commentlist li ul.children { padding-left: 20px; list-style-type: none; list-style-position: outside; margin: 0; } ul.commentlist li img { padding: 3px; background: #fff; float: left; } ul.commentlist li .comment-body { overflow: hidden; margin-left: 90px; } ul.commentlist li .comment-body .meta-data .author { font: bold 13px/20px Arial; color: #000; margin-right: 4px; padding-right: 8px; background: url("Dot-bkg.gif") no-repeat right center transparent; } ul.commentlist li .comment-body .meta-data, ul.commentlist li .comment-body .meta-data a { color: #000; font: normal 13px/20px Arial; margin-bottom: 14px; } ul.commentlist li .comment-body .meta-data a.comment-reply-link { color: #b76552; margin-left: 20px; } /* ---------------------------------------------------------- * RECENT WORK BOX * --------------------------------------------------------- */ .recent-work .custom-headline { margin-bottom: 10px; } /* ---------------------------------------------------------- * PORTFOLIO * ----------------------------------------------------------*/ .portfolio-navbar { overflow: hidden; margin: 0 0 36px 0; padding: 0; } .portfolio-navbar ul { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; overflow: hidden; } .portfolio-navbar ul li { display: inline-block; float: left; color: #d1cab8; font-weight: bold; margin: 0 6px 0 0; } .portfolio-navbar ul li a { display: block; float: left; color: #37342d; padding: 0 6px 0 0; font-weight: normal; font-size: 13px; } /* ---------------------------------------------------------- * PORTFOLIO COLUMNS * ----------------------------------------------------------*/ ul.portfolio { margin: 0 0 10px 0; padding: 0; list-style-type: none; list-style-position: outside; overflow: hidden; width: 100%; position: relative; display: block; } ul.portfolio li { margin: 0 0 30px 0; padding: 0; float: left; overflow: hidden; position: relative; } ul.portfolio li a.image-holder { display: block; background: #fff; } ul.portfolio.third li { width: 31%; margin-right: 3.5%; } ul.portfolio.half li { width: 48%; margin-right: 4%; } ul.portfolio.third li a.image-holder { margin-bottom: 10px; height: 200px; z-index: 10; } ul.portfolio.third.notfull li a.image-holder { width: 230px; } ul.portfolio.half li a.image-holder { margin-bottom: 10px; height: 250px; z-index: 10; } ul.portfolio.half.notfull li a.image-holder { width: 355px; } ul.portfolio li.separator { clear: left; height: 1px; background: transparent url("Separator-bkg.png") repeat-x bottom left; width: 100%; margin: 0 0 30px 0; padding: 0; } ul.portfolio li .meta-data { background: transparent url("Nivo-caption-bkg.png") repeat left top; margin: 0; padding: 10px; text-align: center; clear: both; font: bold 13px/18px Arial; text-transform: uppercase; } ul.portfolio li .meta-data a { color: #37342d; } ul.portfolio li .description { background: rgb(235, 225, 204); background: none repeat 0 0 rgba(235, 225, 204, 0.95); padding: 20px; position: absolute; top: 0; left: 0; display: block; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 30; } ul.portfolio li .description span { display: block; padding-bottom: 20px; font: normal 13px/20px Georgia; color: #555; } ul.portfolio li .description em { font: italic 11px/16px Georgia; color: #917e4d; } ul.portfolio.third li .description { height: 200px; } ul.portfolio.half li .description { height: 250px; } /* ---------------------------------------------------------- * WIDGETS * ----------------------------------------------------------*/ .widget { margin: 0 0 40px 0; overflow: visible !important; }
  1. content .widget .px-widget-title h3, #content .widget h3 {
font: bold 13px/18px Arial; color: #c78c45; text-transform: uppercase; margin-bottom: 18px; background: none; }
  1. content .widget ul {
margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; }
  1. content .widget ul li {
position: relative; background: transparent url("Separator-bkg.png") repeat-x left bottom; }
  1. content .widget ul li a {
position: relative; font: 12px/18px Arial; color: #625d52; display: block; padding: 7px 8px 8px 12px; width: 170px; }
  1. content .widget ul li a:hover {
overflow: visible !important; color: #fff; font-weight: bold; text-decoration: none; background: transparent url("Sidebar-link-over-right.jpg") no-repeat left top scroll; }
  1. content .sidebar-right.margin { margin-right: 30px }
  2. content .sidebar-right .widget ul li a:hover { background: transparent url("Sidebar-link-over-left.jpg") no-repeat left top scroll; padding-left: 26px; }
  3. content .sidebar-right .px-widget-title { padding-left: 4px; }
  4. content .widget.nohover ul li a:hover {
background: none; color: #c78c45; font-weight: normal; }
  1. content .sidebar-right .widget.nohover ul li a:hover { padding-left: 12px; }
/* ---------------------------------------------------------- * GALLERY * ----------------------------------------------------------*/ ul.gallery { list-style-type: none; list-style-position: outside; margin: 0 0 10px 0; padding: 0; overflow: hidden; } ul.gallery li { display: inline-block; float: left; margin: 0 8px 8px 0; } ul.gallery li a.image-holder { margin: 0; } ul.gallery li img { display: block; margin: 0; float: left; } ul.gallery.small li { margin: 0 6px 6px 0; } ul.gallery.small li img { border: 0; padding: 0; } .wrapper960 { width: 960px; margin: 0 auto; } /*================================================= */ /* Back To Top ================================================== */
  1. backtotop {
position: fixed; right:0px; display:none; bottom: 20px; margin: 0 20px 0 0; }
  1. backtotop a {
text-decoration:none; border:0 none; display:block; width:45px; height:45px; background: url("Back_to_top.png") no-repeat 50% 50%; background-color:#c0c0c0; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
  1. backtotop a:hover {background-color: #81b600;}
Retrieved from "http://2013.igem.org/Team:HIT-Harbin/css/style.css"