Template:Team:Alberta/2011style.css

From 2011.igem.org

(Difference between revisions)
(Undo revision 172057 by Stjahns (talk))
Line 1: Line 1:
-
{{Team:Alberta/Top}}
+
/* Style sheet for 2011 wiki page */
-
{{Team:Alberta/navbar|home=selected}}
+
-
<html>
+
/* Colors:
-
<script type="text/Javascript" charset="utf-8">
+
grey: 959995
-
    $(window).load(function() {
+
orange navbar: f09131
-
            $('.flexslider').flexslider({
+
orange box: f19232
-
                animation: "slide",
+
beige: fffcd5
-
            });
+
green: 5db54b
-
    });
+
 +
*/
 +
body {
 +
    //background-color: #959995;
 +
    //background-color: #757575;
 +
    background-color: #ffffff;
 +
    //background-color: #555555;
 +
    font-family: verdana;
 +
}
-
</script>
+
/* TOP MENU SECTION*/
 +
#top-section {
 +
    width: 1000px;
 +
    height: auto;
 +
    border: 0px;
 +
    padding: 0px;
 +
    margin-bottom: 0px;
 +
}
-
<div id=main-content>
+
#firstHeading {
 +
    display: none;
 +
}
-
     <div class=clear></div>
+
#p-logo {
 +
     display: none;
 +
}
-
    <div class=page-content-full>
+
.left-menu, .right-menu {
 +
    margin: 2px;
 +
}
-
        <div class="flexslider">
+
.left-menu:hover, .right-menu ul li a {
-
            <ul class="slides">
+
    background-color: transparent;
-
                <li>
+
}
-
                    <div class="frontpage-slide">
+
-
                        <a href='Team:Alberta/project'><img src="https://static.igem.org/mediawiki/2011/c/cb/Alberta_theplan.png"></a>
+
-
                        <div class="slide-right-col">
+
-
                            <div class="slide-heading">
+
-
                                The Plan
+
-
                            </div>
+
-
                            How do you get fuel from waste?  Learn about
+
-
                            Team Alberta’s progression from by-product
+
-
                            biomass to a viable biodiesel.
+
-
                        </div>
+
-
                        <div class=clear></div>
+
-
                    </div>
+
-
                </li>
+
-
                <li>
+
-
                    <div class="frontpage-slide">
+
-
                    <img src="https://static.igem.org/mediawiki/2011/c/c4/Alberta_theprocedure.png">
+
-
                        <div class="slide-right-col">
+
-
                            <div class="slide-heading">
+
-
                                The Procedure
+
-
                            </div>
+
-
                            New organisms require new
+
-
                            techniques. Learn how Team Alberta
+
-
                            progressed from an idea to a reality
+
-
                            and the steps required to get there.
+
-
                        </div>
+
-
                        <div class=clear></div>
+
-
                    </div>
+
-
                </li>
+
-
                <li>
+
-
                    <div class="frontpage-slide">
+
-
                        <img src="https://static.igem.org/mediawiki/2011/2/27/Alberta_theproduct.png">
+
-
                        <div class="slide-right-col">
+
-
                            <div class="slide-heading">
+
-
                                The Product
+
-
                            </div>
+
-
                            Biodiesel is a viable fuel. See our
+
-
                            fuel in action and learn about Team
+
-
                            Alberta’s plans to make biodiesel
+
-
                            production and usage even easier.
+
-
                        </div>
+
-
                        <div class=clear></div>
+
-
                    </div>
+
-
                </li>
+
-
                <li>
+
-
                    <div class="frontpage-slide">
+
-
                    <img src="https://static.igem.org/mediawiki/2011/5/5a/Alberta_thepotential.png">
+
-
                        <div class="slide-right-col">
+
-
                            <div class="slide-heading">
+
-
                                The Potential
+
-
                            </div>
+
-
                            Home production and commercial production are
+
-
                            viable options for our biodiesel production
+
-
                            methods. See Team Alberta's plan to make a
+
-
                            small laboratory process into small scale
+
-
                            bio-production and large scale.
+
-
                        </div>
+
-
                        <div class=clear></div>
+
-
                    </div>
+
-
                </li>
+
-
            </ul>
+
-
        </div>
+
-
     </div>
+
.right-menu li a {
 +
     color: transparent;
 +
}
-
     <div class=clear></div>
+
.left-menu:hover ul li a, .right-menu:hover ul li a {
 +
     color: #959995;
 +
}
-
     <div class=frontpage-content-left>
+
.left-menu li {
 +
     color: transparent !important;
 +
}
-
        <div id=page-title>
+
#search-controls {
-
            <span id=page-title-text>
+
    display: none;
-
                WELCOME
+
}
-
            </span>
+
-
        </div>
+
 +
/* NAVBAR SECTION ... which is really part of content */
-
<p>Team Alberta's aim is to aide in the solution of a global
+
#navbar {
-
problem, the fuel crisis, by thinking locally. In Alberta, our main
+
    width: 950px;
-
industrial practices lay within the oil and gas sector; however, we
+
    /*background-color: #f09131;*/
-
also have a thriving agricultural and forestry-based industry. The
+
    margin-left:15px;
-
industrial processes associated with these industries produce
+
    margin-right:15px;
-
biomass by-products of little economic value. The aim of our
+
    padding-left: 10px;
-
project is to convert these by-products into a useful and
+
    padding-right: 10px;
-
economically viable fuel, biodiesel.</p><br>
+
    height: 78px;
 +
    /*border-radius: 2px;*/
 +
    background-image:url(https://static.igem.org/mediawiki/2011/6/6e/Alberta_navbar_green2.png)
 +
}
-
<p><i>This is not a new idea. </i>Previous research has been largely
+
#navbar ul {
-
focused on engineering organisms to metabolize cellulose, a highly
+
    list-style:none;
-
inefficient approach with very little yield. Here is where our
+
    margin: 0px;
-
approach differs. Why engineer a new organism to perform a function
+
    font-size: 16pt;
-
nature has perfected in another species? Why not just make this
+
}
-
organism even better?</p><br>
+
-
<p>We have selected the filamentous, ascomycete fungus <i>Neurospora
+
#navbar ul li {
-
     crassa</i>, which is a natural cellulose metabolizer, with the aim
+
     position:relative;
-
of creating an organism to efficiently make biodiesel. Our fuel
+
    float:left;
-
will be made by up-regulating fatty acid synthesis and inhibiting
+
    margin: 0px;
-
beta-oxidation, effectively causing the over-production of fatty
+
    height: 78px;
-
acids within <i>N. crassa</i>. From here we will efficiently esterify
+
}
-
the fatty acids into fatty acid methyl esters (FAMEs), producing
+
-
a viable fuel.</p>
+
-
     <p>
+
#navbar ul li ul {
-
     <a id=wiki-tour-link href=""><img src="https://static.igem.org/mediawiki/2011/0/0b/Take-the-wiki-tour.png"></a>
+
     border-style: solid;
-
     </p>
+
     border-color: #3C2415;
 +
    background-color: #33AA33;
 +
     border-width: 2px;
 +
}
-
     <div class=clear></div>
+
#navbar ul li a:visited, #navbar ul li a:link{
 +
    display:block;
 +
    height:78px;
 +
    color:#FFFFFF;
 +
     /*background-color:#F7941E;*/
 +
    padding-left: 17px;
 +
    padding-right: 17px;
 +
}
-
    <a id=ingenuity-img href="">Ingenuity</a>
+
#navbar ul li a:hover, #navbar ul li a.selected {
-
     <a id=sustainability-img href="">Sustainability</a>
+
     color: #000000;
-
     <a id=costefficiency-img href="">Cost Efficiency</a>
+
    text-decoration:none;
 +
     left:auto;
 +
    background-image:url(https://static.igem.org/mediawiki/2011/4/4b/Alberta_navbar_hover.png);
 +
}
-
     <div class=clear></div>
+
#navbar li.headlink ul{
 +
     position: absolute;
 +
    display:none;
 +
    list-style:none;
 +
    color:#000000;
 +
    text-align:center;
 +
}
-
    </div>
+
#navbar li.headlink ul li {
 +
  width: 280px;
 +
}
-
    <div class=frontpage-content-right>
+
/* CONTENT SECTION */
 +
#content {
 +
    width: 1000px;
 +
    border: 0px;
 +
    padding: 0px;
 +
    margin-top: 0px;
 +
}
-
        <div id=page-title>
+
h1.firstHeading { display:none; }
-
            <span id=page-title-text>
+
-
                LEARN
+
-
            </span>
+
-
        </div>
+
-
        <iframe class="youtube-player" type="text/html" width="300" height="200" src="http://www.youtube.com/embed/WxIHSKW47fc" frameborder="0">
+
#catlinks { display: none; }
-
        </iframe>
+
-
        <div id=page-title>
+
#contentSub { margin: 0px; }
-
            <span id=page-title-text>
+
-
                INTERACT
+
-
            </span>
+
 +
p { margin: 0px; }
-
        </div>
+
#top-content {
 +
    background-color: #ffffff;
 +
    height: 125px;
 +
    width: 970px; /* maybe change height, width to fit image */
 +
    margin-left: 15px;
 +
    margin-right: 15px;
 +
    padding-top: 10px;
 +
    background-image:url(https://static.igem.org/mediawiki/2011/9/99/Alberta_banner_back.png)
 +
}
-
            <ul id=interact-links>
+
img.ta {
-
                <li><a href="http://www.facebook.com/pages/Team-Alberta-iGEM/228772613832700"><img src="https://static.igem.org/mediawiki/2011/1/1b/Alberta_facebook.png"></a></li>
+
    position: relative;
-
                <li><a href="http://twitter.com/#!/Team_Alberta"><img src="https://static.igem.org/mediawiki/2011/6/6e/Alberta_twitter.png"></a></li>
+
    float: left;
-
                <li><a href="http://www.youtube.com/user/TeamAlbertaIGEM"><img src="https://static.igem.org/mediawiki/2011/2/22/Alberta_youtube.png"></a></li>
+
    left: 20px;
-
            </ul>
+
}
 +
img.igem {
 +
    position: relative;
 +
    float: right;
 +
    right: 20px;
 +
    top: 15px;
 +
    width: 120px;
 +
}
-
        <div id=page-title>
+
#main-content {
-
            <span id=page-title-text>
+
    color: #808080;
-
                ACHIEVE
+
    background-color: white;
-
            </span>
+
    margin-left:15px;
-
        </div>
+
    margin-right: 15px;
 +
}
-
        <ol>
+
#main-content table.student-table td {
-
            <li>Deck out some <i>N. crassa</i>
+
    padding-left: 0px;
-
            <li>???</li>
+
    padding-top: 0px;
-
            <li>PROFIT!!</li>
+
    padding-right: 5px;
-
        </ol>
+
    padding-bottom: 5px;
 +
}
-
     </div>
+
#main-content table.student-table td img:hover {
 +
     cursor: pointer;
 +
}
-
     <div class=clear></div>
+
#main-content h2 {
 +
     font-weight: bold;
 +
    font-size: 18px;
 +
    color: #f19232;
 +
    border-width: 0px;
 +
}
-
    <div class=page-content-full>
+
#main-content h3 {
 +
    font-weight: bold;
 +
    font-size: 16px;
 +
    color: #000000;
 +
    border-width: 0px;
 +
}
-
        <div id=page-title>
+
#main-content td{
-
            <span id=page-title-text>
+
    color: #808080;
-
                SPONSORS
+
    text-align: justify;
-
            </span>
+
    padding: 8px;
-
        </div>
+
}
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/6/68/Alberta_borncreative.png" >
+
#ingenuity-button, #cost-button, #sustainability-button {
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/f/fa/Alberta_aitf.png" >
+
    border-style: solid;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/9/97/Alberta_science.png" >
+
    border-color: #808080;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/8/89/Geneious_Logo.gif" >
+
    border-width: 1px;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/2/21/IDTLogo2010.png" >
+
    height: 50px;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/c/cf/Alberta_mmi.png" >
+
    width: 290px;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/4/4e/Alberta_Neb.png" >
+
    margin: 5px;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/2/28/Alberta_officesust.jpg" >
+
    text-align: center;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/1/1a/Oilsandsli.png" >
+
    font-size: 20px;
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/8/89/Alberta_arts.png" >
+
}
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/1/19/Alberta_uofa.png" >
+
-
        <img class=sponsor-logo src="https://static.igem.org/mediawiki/2011/0/06/Alberta_biosci.png" >
+
-
    </div>
+
#main-content td a:link { color: #f19232; }
 +
#main-content td a:visited { color: #f19232; }
 +
#main-content td a:active { color: #f19232; }
 +
#main-content td a:hover { color: #f19232; }
-
     <div class=clear></div>
+
#top-pictures {
-
       
+
    margin-top: 30px;
 +
    margin-bottom: 10px;
 +
    margin-left: 40px;
 +
    margin-right: 40px;
 +
    border-style: solid;
 +
    border-width: 1px;
 +
     border-color: #808080;
 +
}
-
      
+
#top-pictures .pictures {
 +
     background-color: transparent;
 +
    border-spacing: 5px;
 +
}
-
</div>
+
#top-pictures .pictures td:hover {
-
</html>
+
    background-color: #ffffff;
 +
}
-
{{Team:Alberta/footer|home=selected}}
+
#top-pictures .pictures td {
 +
    font-weight: bold;
 +
    font-size: 14px;
 +
    text-align: center;
 +
    width: 20px;
 +
    border-style: solid;
 +
    border-width: 1px;
 +
    border-color: #808080;
 +
}
 +
 
 +
#the-plan {
 +
    background-color: #fffcd5;
 +
    width: 400px;
 +
    text-align: justify;
 +
    font-size: 12px;
 +
    padding: 20px;
 +
}
 +
 
 +
#page-title {
 +
    color: #33aa33; /*TODO get correct green*/
 +
    font-size: 24px;
 +
    font-weight: bold;
 +
    margin-top: 10px;
 +
    margin-bottom: 10px;
 +
    height: 20px;
 +
    background-image:url(https://static.igem.org/mediawiki/2011/e/e2/Horiz-green-bar.png);
 +
}
 +
 
 +
.section-title {
 +
    color: #33aa33; /*TODO get correct green*/
 +
    font-size: 24px;
 +
    font-weight: bold;
 +
    margin-top: 10px;
 +
    margin-bottom: 10px;
 +
    height: 20px;
 +
    background-image:url(https://static.igem.org/mediawiki/2011/e/e2/Horiz-green-bar.png);
 +
}
 +
 
 +
/* green bar */
 +
#page-title-text{
 +
    background-color: #fff;
 +
    padding-right: 10px;
 +
}
 +
 
 +
#section-title {
 +
    font-color: #33aa33; /*TODO get correct green*/
 +
    font-size: 24px;
 +
    font-weight: bold;
 +
    margin-top: 10px;
 +
    margin-bottom: 10px;
 +
}
 +
 
 +
#interact-title {
 +
    color: #f19232;
 +
    font-weight: bold;
 +
    font-size: 16px;
 +
}
 +
 
 +
#round-pic {
 +
    border-style: solid;
 +
    border-radius: 25px;
 +
    border-color: #808080;
 +
    border-width: 2px;
 +
}
 +
 
 +
#media-pic {
 +
    border-style: solid;
 +
    border-color: #808080;
 +
    border-width: 2px;
 +
}
 +
 
 +
/* PAGE LAYOUT SECTION */
 +
 
 +
#contents-box {
 +
    float: left;
 +
    height: 440px;
 +
    width: 160px;
 +
    padding: 5px 10px;
 +
    background-color: #b5b9b5;
 +
}
 +
 
 +
#contents-box ul{
 +
    list-style: none;
 +
}
 +
 
 +
#subpage-links li {
 +
    margin-top: 20px;
 +
}
 +
 
 +
#subpage-links a {
 +
    font-size: 14px;
 +
    color: #555;
 +
}
 +
 
 +
#active-subpage {
 +
    font-weight: bold;
 +
    font-size: 16px;
 +
}
 +
 
 +
#subpage-links ul li{
 +
    margin-top: 0px;
 +
}
 +
 
 +
#page-content{
 +
    float: right;
 +
    width: 750px;
 +
}
 +
 
 +
.page-content-full{
 +
}
 +
 
 +
 
 +
 
 +
.frontpage-content-right{
 +
    float: right;
 +
    width: 300px;
 +
}
 +
.frontpage-content-left{
 +
    float: left;
 +
    width: 600px;
 +
}
 +
 
 +
img.sponsor-logo {
 +
    width: 188px;
 +
    margin: 10px 25px;
 +
}
 +
 
 +
/* FOOTER SECTION */
 +
/* custom footer */
 +
#content-footer-box {
 +
    width: 970px;
 +
    background-color: #ccc;
 +
    color: #888;
 +
    margin: auto;
 +
    margin-top: 20px;
 +
    padding: 0px;
 +
    border: 0px;
 +
}
 +
 
 +
#content-footer-box ul{
 +
    list-style: none;
 +
}
 +
 
 +
#content-footer-box li {
 +
    background-color: white;
 +
    margin: 0.5em 0;
 +
}
 +
 
 +
#content-footer-box li a {
 +
    color: #888;
 +
}
 +
 
 +
/*wiki standard footer */
 +
#footer-box {
 +
    width: 930px;
 +
    background-color: #ccc;
 +
    margin-top: 0px;
 +
    padding: 20px;
 +
    border: 0px;
 +
}
 +
 
 +
.footer-left-half{
 +
    width: 485px;
 +
    float: left;
 +
}
 +
 
 +
.footer-right-half{
 +
    width: 485px;
 +
    float: right;
 +
}
 +
 
 +
.footer-left-col{
 +
    width: 220px;
 +
    float: left;
 +
    padding: 20px 10px;
 +
}
 +
 
 +
.footer-right-col{
 +
    width: 220px;
 +
    float: right;
 +
    padding: 20px 10px;
 +
}
 +
 
 +
input.searchInput {
 +
}
 +
input.searchButton {
 +
    font-weight: bold;
 +
    color: #888;
 +
    margin: 0;
 +
}
 +
 
 +
.clear {
 +
    clear:both;
 +
}
 +
#clear {
 +
    clear:both;
 +
}
 +
 
 +
 
 +
 
 +
/*
 +
* jQuery FlexSlider v1.7
 +
* http://flex.madebymufffin.com
 +
*
 +
* Copyright 2011, Tyler Smith
 +
* Free to use under the MIT license.
 +
* http://www.opensource.org/licenses/mit-license.php
 +
*/
 +
 +
/* Browser Resets */
 +
.flex-container a:active,
 +
.flexslider a:active {outline: none;}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
 +
 
 +
/* FlexSlider Necessary Styles
 +
*********************************/
 +
.flexslider {width: 100%; margin: 0; padding: 0;}
 +
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
 +
.flexslider .slides img {max-width: 100%; display: block;}
 +
.flex-pauseplay span {text-transform: capitalize;}
 +
 
 +
/* Clearfix for the .slides element */
 +
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
 +
html[xmlns] .slides {display: block;}
 +
* html .slides {height: 1%;}
 +
 
 +
/* No JavaScript Fallback */
 +
/* If you are not using another script, such as Modernizr, make sure you
 +
* include js that eliminates this class on page load */
 +
.no-js .slides > li:first-child {display: block;}
 +
 
 +
 
 +
/* FlexSlider Default Theme
 +
*********************************/
 +
.flexslider {background: #fff;
 +
    /*border: 4px solid #fff; */
 +
    position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
 +
.flexslider .slides {zoom: 1;}
 +
.flexslider .slides > li {position: relative;}
 +
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
 +
.flex-container {zoom: 1; position: relative;}
 +
 
 +
/* Caption style */
 +
/* IE rgba() hack */
 +
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
 +
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
 +
.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}
 +
 
 +
/* Direction Nav */
 +
.flex-direction-nav li a {
 +
    width: 52px;
 +
    height: 52px;
 +
    margin: -13px 0 0;
 +
    display: block;
 +
    background: url(https://static.igem.org/mediawiki/2011/7/7b/Alberta_arrows.png) no-repeat 0 0;
 +
    position: absolute;
 +
    top: 42%;
 +
    cursor: pointer;
 +
    text-indent: -9999px;
 +
}
 +
 
 +
.flex-direction-nav li a.next {background-position: -52px 0; right: 0px;}
 +
.flex-direction-nav li a.prev {background-position: 0 0; left: 0px;}
 +
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 +
 
 +
/* Control Nav */
 +
.flex-control-nav {
 +
    width: 100%;
 +
    position: absolute;
 +
    bottom: 30px;
 +
    left: 58px;
 +
    text-align: center;
 +
}
 +
 
 +
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
 +
.flex-control-nav li:first-child {margin: 0;}
 +
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(https://static.igem.org/mediawiki/2011/a/aa/Alberta_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
 +
.flex-control-nav li a:hover {background-position: 0 -13px;}
 +
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
 +
 
 +
/* END flexslider styling ***************************************************/
 +
 
 +
.flexslider {
 +
    width: 950px;
 +
    margin: 20px 10px;
 +
}
 +
 
 +
div.frontpage-slide {
 +
    height: 300px;
 +
    background-color: #CCC;
 +
}
 +
 
 +
div.frontpage-slide img{
 +
    height: 300px;
 +
    float: left;
 +
}
 +
 
 +
div.slide-right-col {
 +
    color: #33AA33;
 +
    float: right;
 +
    width: 400px;
 +
    font-size: 16px;
 +
    margin-top: 30px;
 +
    margin-right: 50px;
 +
    line-height: 1.5em;
 +
}
 +
 
 +
div.slide-heading {
 +
    font-size: 30px;
 +
    font-weight: bold;
 +
    margin-bottom: 20px;
 +
}
 +
 
 +
ul#interact-links {
 +
    list-style-type: none;
 +
    display: inline;
 +
}
 +
ul#interact-links li {
 +
    display: inline;
 +
    margin-right: 36px;
 +
}
 +
 
 +
a#sustainability-img {
 +
    float:right;
 +
    width: 184px;
 +
    height: 100px;
 +
    background:url(https://static.igem.org/mediawiki/2011/c/cc/Alberta_sustainability.png) bottom;
 +
    text-indent: -99999px
 +
}
 +
 
 +
a#costefficiency-img {
 +
    display: block;
 +
    margin-left: 208px;
 +
    width: 184px;
 +
    height: 100px;
 +
    background:url(https://static.igem.org/mediawiki/2011/b/b5/Alberta_costefficiency.png) bottom;
 +
    text-indent: -99999px
 +
}
 +
 
 +
a#ingenuity-img {
 +
    float: left;
 +
    width: 184px;
 +
    height: 100px;
 +
    background:url(https://static.igem.org/mediawiki/2011/a/a7/Alberta_ingenuity.png) bottom;
 +
    text-indent: -99999px
 +
}
 +
 
 +
a#wiki-tour-link img {
 +
    margin: 20px 0px;
 +
}
 +
 
 +
a#sustainability-img:hover { background-position: 0 0; }
 +
a#costefficiency-img:hover { background-position: 0 0; }
 +
a#ingenuity-img:hover { background-position: 0 0; }

Revision as of 20:51, 23 September 2011

/* Style sheet for 2011 wiki page */

/* Colors:

grey: 959995 orange navbar: f09131 orange box: f19232 beige: fffcd5 green: 5db54b

  • /

body { 

   //background-color: #959995;
   //background-color: #757575;
   background-color: #ffffff;
   //background-color: #555555;
   font-family: verdana;

}

/* TOP MENU SECTION*/

  1. top-section { 
   width: 1000px;
   height: auto;
   border: 0px;
   padding: 0px;
   margin-bottom: 0px;

}

  1. firstHeading { 
   display: none;

}

  1. p-logo { 
   display: none;

}

.left-menu, .right-menu { 

   margin: 2px;

}

.left-menu:hover, .right-menu ul li a { 

   background-color: transparent;

}

.right-menu li a { 

   color: transparent;

}

.left-menu:hover ul li a, .right-menu:hover ul li a { 

   color: #959995;

}

.left-menu li { 

   color: transparent !important;

}

  1. search-controls { 
   display: none;

}

/* NAVBAR SECTION ... which is really part of content */

  1. navbar { 
   width: 950px;
   /*background-color: #f09131;*/
   margin-left:15px;
   margin-right:15px;
   padding-left: 10px;
   padding-right: 10px;
   height: 78px;
   /*border-radius: 2px;*/
   background-image:url(Alberta_navbar_green2.png)

}

  1. navbar ul { 
   list-style:none;
   margin: 0px;
   font-size: 16pt;

}

  1. navbar ul li { 
   position:relative;
   float:left;
   margin: 0px;
   height: 78px;

}

  1. navbar ul li ul { 
   border-style: solid;
   border-color: #3C2415;
   background-color: #33AA33;
   border-width: 2px;

}

  1. navbar ul li a:visited, #navbar ul li a:link{ 
   display:block;
   height:78px;
   color:#FFFFFF;
   /*background-color:#F7941E;*/
   padding-left: 17px;
   padding-right: 17px;

}

  1. navbar ul li a:hover, #navbar ul li a.selected { 
   color: #000000;
   text-decoration:none;
   left:auto;
   background-image:url(Alberta_navbar_hover.png);

}

  1. navbar li.headlink ul{ 
   position: absolute;
   display:none;
   list-style:none;
   color:#000000;
   text-align:center;

}

  1. navbar li.headlink ul li { 
  width: 280px;

}

/* CONTENT SECTION */

  1. content { 
   width: 1000px;
   border: 0px;
   padding: 0px;
   margin-top: 0px;

}

h1.firstHeading { display:none; }

  1. catlinks { display: none; }
  1. contentSub { margin: 0px; }

p { margin: 0px; }

  1. top-content { 
   background-color: #ffffff;
   height: 125px;
   width: 970px; /* maybe change height, width to fit image */
   margin-left: 15px;
   margin-right: 15px;
   padding-top: 10px;
   background-image:url(Alberta_banner_back.png)

}

img.ta { 

   position: relative;
   float: left;
   left: 20px;

}

img.igem { 

   position: relative;
   float: right;
   right: 20px;
   top: 15px;
   width: 120px;

}

  1. main-content { 
   color: #808080;
   background-color: white;
   margin-left:15px;
   margin-right: 15px;

}

  1. main-content table.student-table td { 
   padding-left: 0px;
   padding-top: 0px;
   padding-right: 5px;
   padding-bottom: 5px;

}

  1. main-content table.student-table td img:hover { 
   cursor: pointer;

}

  1. main-content h2 { 
   font-weight: bold;
   font-size: 18px;
   color: #f19232;
   border-width: 0px;

}

  1. main-content h3 { 
   font-weight: bold;
   font-size: 16px;
   color: #000000;
   border-width: 0px;

}

  1. main-content td{ 
   color: #808080;
   text-align: justify;
   padding: 8px;

}

  1. ingenuity-button, #cost-button, #sustainability-button { 
   border-style: solid;
   border-color: #808080;
   border-width: 1px;
   height: 50px;
   width: 290px;
   margin: 5px;
   text-align: center;
   font-size: 20px;

}

  1. main-content td a:link { color: #f19232; }
  2. main-content td a:visited { color: #f19232; }
  3. main-content td a:active { color: #f19232; }
  4. main-content td a:hover { color: #f19232; }
  1. top-pictures { 
   margin-top: 30px;
   margin-bottom: 10px;
   margin-left: 40px;
   margin-right: 40px;
   border-style: solid;
   border-width: 1px;
   border-color: #808080;

}

  1. top-pictures .pictures { 
   background-color: transparent;
   border-spacing: 5px;

}

  1. top-pictures .pictures td:hover { 
   background-color: #ffffff;

}

  1. top-pictures .pictures td { 
   font-weight: bold;
   font-size: 14px;
   text-align: center;
   width: 20px;
   border-style: solid;
   border-width: 1px;
   border-color: #808080;

}

  1. the-plan { 
   background-color: #fffcd5;
   width: 400px;
   text-align: justify;
   font-size: 12px;
   padding: 20px;

}

  1. page-title { 
   color: #33aa33; /*TODO get correct green*/
   font-size: 24px;
   font-weight: bold;
   margin-top: 10px;
   margin-bottom: 10px;
   height: 20px;
   background-image:url(Horiz-green-bar.png);

}

.section-title { 

   color: #33aa33; /*TODO get correct green*/
   font-size: 24px;
   font-weight: bold;
   margin-top: 10px;
   margin-bottom: 10px;
   height: 20px;
   background-image:url(Horiz-green-bar.png);

}

/* green bar */

  1. page-title-text{ 
   background-color: #fff;
   padding-right: 10px;

}

  1. section-title { 
   font-color: #33aa33; /*TODO get correct green*/
   font-size: 24px;
   font-weight: bold;
   margin-top: 10px;
   margin-bottom: 10px;

}

  1. interact-title { 
   color: #f19232;
   font-weight: bold;
   font-size: 16px;

}

  1. round-pic { 
   border-style: solid;
   border-radius: 25px;
   border-color: #808080;
   border-width: 2px;

}

  1. media-pic { 
   border-style: solid;
   border-color: #808080;
   border-width: 2px;

}

/* PAGE LAYOUT SECTION */

  1. contents-box { 
   float: left;
   height: 440px;
   width: 160px;
   padding: 5px 10px;
   background-color: #b5b9b5;

}

  1. contents-box ul{ 
   list-style: none;

}

  1. subpage-links li { 
   margin-top: 20px;

}

  1. subpage-links a { 
   font-size: 14px;
   color: #555;

}

  1. active-subpage { 
   font-weight: bold;
   font-size: 16px;

}

  1. subpage-links ul li{ 
   margin-top: 0px;

}

  1. page-content{ 
   float: right;
   width: 750px;

}

.page-content-full{ }


.frontpage-content-right{ 

   float: right;
   width: 300px;

} .frontpage-content-left{ 

   float: left;
   width: 600px;

}

img.sponsor-logo { 

   width: 188px;
   margin: 10px 25px;

}

/* FOOTER SECTION */ /* custom footer */

  1. content-footer-box { 
   width: 970px;
   background-color: #ccc;
   color: #888;
   margin: auto;
   margin-top: 20px;
   padding: 0px;
   border: 0px;

}

  1. content-footer-box ul{ 
   list-style: none;

}

  1. content-footer-box li { 
   background-color: white;
   margin: 0.5em 0;

}

  1. content-footer-box li a { 
   color: #888;

}

/*wiki standard footer */

  1. footer-box { 
   width: 930px;
   background-color: #ccc;
   margin-top: 0px;
   padding: 20px;
   border: 0px;

}

.footer-left-half{ 

   width: 485px;
   float: left;

}

.footer-right-half{ 

   width: 485px;
   float: right;

}

.footer-left-col{ 

   width: 220px;
   float: left;
   padding: 20px 10px;

}

.footer-right-col{ 

   width: 220px;
   float: right;
   padding: 20px 10px;

}

input.searchInput { } input.searchButton { 

   font-weight: bold;
   color: #888;
   margin: 0;

}

.clear { 

   clear:both;

}

  1. clear { 
   clear:both;

}


/* 

* jQuery FlexSlider v1.7
* http://flex.madebymufffin.com
*
* Copyright 2011, Tyler Smith
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

/* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles

                                                                  • /

.flexslider {width: 100%; margin: 0; padding: 0;} .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {max-width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;}

  • html .slides {height: 1%;}

/* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you 

* include js that eliminates this class on page load */

.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme

                                                                  • /

.flexslider {background: #fff; 

   /*border: 4px solid #fff; */
   position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}

.flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;}

/* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */ .flex-direction-nav li a { 

   width: 52px; 
   height: 52px; 
   margin: -13px 0 0; 
   display: block; 
   background: url(Alberta_arrows.png) no-repeat 0 0; 
   position: absolute; 
   top: 42%; 
   cursor: pointer; 
   text-indent: -9999px;

}

.flex-direction-nav li a.next {background-position: -52px 0; right: 0px;} .flex-direction-nav li a.prev {background-position: 0 0; left: 0px;} .flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */ .flex-control-nav { 

   width: 100%; 
   position: absolute; 
   bottom: 30px; 
   left: 58px;
   text-align: center;

}

.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;} .flex-control-nav li:first-child {margin: 0;} .flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(Alberta_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;} .flex-control-nav li a:hover {background-position: 0 -13px;} .flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

/* END flexslider styling ***************************************************/

.flexslider { 

   width: 950px;
   margin: 20px 10px;

}

div.frontpage-slide { 

   height: 300px;
   background-color: #CCC;

}

div.frontpage-slide img{ 

   height: 300px;
   float: left;

}

div.slide-right-col { 

   color: #33AA33;
   float: right;
   width: 400px;
   font-size: 16px;
   margin-top: 30px;
   margin-right: 50px;
   line-height: 1.5em;

}

div.slide-heading { 

   font-size: 30px;
   font-weight: bold;
   margin-bottom: 20px;

}

ul#interact-links { 

   list-style-type: none;
   display: inline;

} ul#interact-links li { 

   display: inline; 
   margin-right: 36px;

}

a#sustainability-img { 

   float:right;
   width: 184px;
   height: 100px;
   background:url(Alberta_sustainability.png) bottom;
   text-indent: -99999px

}

a#costefficiency-img { 

   display: block;
   margin-left: 208px;
   width: 184px;
   height: 100px;
   background:url(Alberta_costefficiency.png) bottom;
   text-indent: -99999px

}

a#ingenuity-img { 

   float: left;
   width: 184px;
   height: 100px;
   background:url(Alberta_ingenuity.png) bottom;
   text-indent: -99999px

}

a#wiki-tour-link img { 

   margin: 20px 0px;

}

a#sustainability-img:hover { background-position: 0 0; } a#costefficiency-img:hover { background-position: 0 0; } a#ingenuity-img:hover { background-position: 0 0; }

Retrieved from "http://2011.igem.org/Template:Team:Alberta/2011style.css"