Team:UChicago/stylesheet

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
/* Removing wiki-like stuff */
 +
/****************************/
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;}
-
<!-- STYLESHEET -->
+
/* Redesigning the topmenu */
-
<!-- *********** -->
+
/***************************/
 +
body {
 +
    margin: 25px 0 0 0;
 +
    padding: 0;}
 +
#top-section {
 +
    width: 840px;
 +
    height: 0;
 +
    margin: 0 auto;
 +
    padding: 0 0 0 5px;
 +
    border: none;}
 +
#menubar {
 +
    font-size: 75%;
 +
    top: -14px;}
 +
.left-menu {
 +
    left: 14px;}
 +
.left-menu:hover {
 +
    background-color: transparent;}
 +
#menubar li a {
 +
    background-color: transparent;}
 +
#menubar:hover {
 +
    color: white;}
 +
#menubar li a {
 +
    color: transparent;}
 +
#menubar:hover li a {
 +
    color: #767676;}
 +
#menubar > ul > li:last-child {
 +
    display:none;}
-
    <link rel="stylesheet" href="https://2013.igem.org/Team:UChicago/stylesheet?action=raw&ctype=text/css" type="text/css" />
+
/* TOC stuff removed */
-
<!-- JAVASCRIPTS -->
+
/* Font style and general */
-
<!-- *********** -->
+
/**************************/
 +
#content {
 +
    font-family: Montserrat, Helvetica, Verdana, sans-serif;
 +
    font-size: 14px;
 +
    color: #000;}
 +
p {
 +
    margin: 0;}
 +
#innercontent p {
 +
    margin: 0.6em 0;}
 +
h2, h3, h4, h5, h6 {
 +
    border: none;
 +
    font-weight: normal;
 +
    color: #000;}
 +
h1 {
 +
    border: none;
 +
    color: #800000;
 +
    font-family: Helvetica;
 +
    font-size: 20px;
 +
    font-weight: lighter;}
-
    <!-- ie9.js (fixes all Internet Explorer browsers older than ie9) -->
+
#bodyContent h1, #bodyContent h2 {
-
     <!--[if lt IE 9]>
+
     margin-bottom: 0;} /* ??? */
-
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
+
-
    <![endif]-->
+
-
     <!-- jQuery Tools (slider) -->
+
ul {
-
     <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
+
     list-style: none;
-
     <script>
+
    margin: 0;}
-
         $(function() {
+
/*a:hover, a:active {
-
         // initialize scrollable
+
    color: #800000;
-
         $(".scrollable").scrollable().navigator();
+
    text-decoration: underline;} */
-
         });
+
pre {
-
     </script>
+
     overflow: auto;
 +
    font-size: 12px;} /* unneeded? */
 +
div.tright, div.floatright {
 +
    border: none;
 +
    margin: 10px 0 10px 20px;} /* unneeded? */
 +
div.tleft, div.floatleft {
 +
    border: none;
 +
    margin: 10px 20px 10px 0;} /* unneeded? */
 +
div.tnone {
 +
    border: none;} /* unneeded? */
 +
iframe {
 +
    margin: 1px;} /* unneeded? */
 +
hr {
 +
    height: 0;
 +
    border-top: 1px solid #AAA;
 +
    border-bottom: 1px solid #FFF;} /* unneeded? */
 +
.clear {
 +
    clear: both;
 +
    height: 0;
 +
    padding: 0;
 +
    margin: 0;
 +
    border: none;
 +
    visibility: hidden;} /* unneeded? */
 +
.superscript {
 +
     font-size: 80%;
 +
    position: relative;
 +
         top: -5px;} /* unneeded? */
 +
.subscript {
 +
    font-size: 80%;
 +
    position: relative;
 +
         top: 5px;} /* unneeded? */
 +
.farve1 {
 +
         background-color: #FFCC00;}
 +
.farve2 {
 +
        background-color: #FF9900;}
 +
.farve3 {
 +
        background-color: #FF6600;}
 +
.farve4 {
 +
        background-color: #FF0000;}
 +
.farve5 {
 +
         background-color: #990000;}
 +
.farve6 {
 +
        background-color: #FF0099;}
 +
.farve7 {
 +
        background-color: #CC3399;}
 +
.farve8 {
 +
        background-color: #990066;}
 +
.farve9 {
 +
        background-color: #660066;}
 +
.farve10 {
 +
        background-color: #990099;}
 +
.farve11 {
 +
        background-color: #3366CC;}
 +
.farve12 {
 +
        background-color: #33CCFF;}
 +
.farve13 {
 +
        background-color: #99CC33;}
 +
.farve14 {
 +
        background-color: #66CC00;} /* unneeded? */
 +
.coloredBg {
 +
     font-size: 12px;
 +
    font-weight: normal;
 +
    color: #FFFFFF;
 +
    padding: 5px;} /* unneeded? */
-
    <!-- Navigation scroll follow -->
+
/* Layout */
-
    <script type="text/javascript">
+
/**********/
-
        $(window).scroll(function () {  
+
#bodyContent {
-
            var scrollPos = $(window).scrollTop();
+
    background: url("https://static.igem.org/mediawiki/2013/5/55/UC_bg-pattern.jpg") repeat #767676;}
-
            if (scrollPos > 180) {
+
body, #heading, #innercontent {
-
                $(".toc").addClass("stickBelowNavigation");
+
    background: url("https://static.igem.org/mediawiki/2013/5/55/UC_bg-pattern.jpg") repeat #767676;}
-
            } else {
+
#content, #globalWrapper {
-
                $(".toc").removeClass("stickBelowNavigation");
+
    border: none;
-
            }
+
    width: 100%;
-
        });
+
    margin: 0;
-
     </script>
+
    padding: 0;} /* needed for resetting MediaWiki */
 +
#wrapper {
 +
    margin: 0 auto;
 +
    width: 875px;}
 +
#heading {
 +
    height: 50px;}
 +
.whiteBox {
 +
    background: #fff;
 +
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 +
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 +
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  
 +
    width: 840px;
 +
    margin: 0 17px;
 +
    padding: 100px 0;
 +
    top: -25px;
 +
    position: absolute;}
 +
pre {
 +
    border:none;
 +
    color: #fff;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
.article {
 +
    width: 600px;}
 +
#toc a {
 +
     font-weight: normal;}
-
    <!-- iGem wiki hacks -->
+
/* Frontpage only */
-
        <!-- Remove all empty <p> tags -->
+
/******************/
-
        <script type="text/javascript">
+
.smallBox {
-
            $(document).ready(function() {
+
    width: 270px;
-
                $("p").filter( function() {
+
    padding: 0 20px 10px;
-
                    return $.trim($(this).html()) == '';
+
    float: left;
-
                }).remove();
+
    margin-right: 15px;}
-
            });
+
.lastSmallBox {
-
        </script>
+
    width: 269px;
 +
    margin-right: 0;}
 +
body.page-Team_DTU-Denmark div.whitebox:first-child {
 +
    display: none;}
-
        <!-- Remove "team" from the menubar -->
+
/* For overview pages */
-
        <script type="text/javascript">
+
/**********************/
-
            $(document).ready(function() {
+
.overviewPage {
-
                $("menubar > ul > li:last-child").remove();
+
    margin-left: -250px;}
-
            });
+
.overviewBox {
-
        </script>
+
    width: 450px;}
 +
.left {
 +
    float: left;}
 +
.right {
 +
    float:right;}
-
        <!-- Empty heading? - Then remove it.. -->
+
/* footer removed temp */
-
        <script type="text/javascript">
+
-
            $(document).ready(function() {
+
-
                if ("" == "</html>{{{1}}}<html>") {
+
-
                    $("#heading").remove();
+
-
                }
+
-
            });
+
-
        </script>
+
 +
/* Slider (thanks to flowplayer.org) */
 +
/*************************************/
 +
.scrollable {
 +
    /* required settinsg */
 +
    position: relative;
 +
    overflow :hidden;
 +
    padding: 75px 0;
 +
    margin: 0 auto;
 +
    width: 840px;
 +
    height: 400px;
 +
    background: #FFFFFF;}
 +
.scrollable .items {
 +
    /* this cannot be too large */
 +
    width: 50000px;
 +
    position: absolute;}
 +
.items div {
 +
    float: left;
 +
    width: 963px;
 +
    height: 370px;}
 +
.prev {
 +
        background: url(https://static.igem.org/mediawiki/2011/8/81/DTU-Denmark2011-slider-prev.png) no-repeat;
 +
        height: 74px;
 +
        width: 74px;
 +
        position: absolute;
 +
            left: -518px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
 +
            top: 310px;
 +
        margin-left: 50%;
 +
        cursor: pointer;}
 +
.next {
 +
        background: url(https://static.igem.org/mediawiki/2011/5/56/DTU-Denmark2011-slider-next.png) no-repeat;
 +
        height: 74px;
 +
        width: 74px;
 +
        margin-right: 50%;
 +
        position: absolute;
 +
            right: -519px; /* floor(963/2) + 74/2 = 481 + 37 = 518 */
 +
            top: 310px;
 +
        cursor: pointer;}
 +
.disabled {
 +
        visibility: hidden;}
 +
/* position and dimensions of the navigator */
 +
.navi {
 +
    left: -56px;
 +
    margin-left: 50%;
 +
    position: absolute;
 +
    top: 505px;
 +
    width: 112px;}
 +
.navi a {
 +
    width: 8px;
 +
    height: 8px;
 +
    float: left;
 +
    margin: 3px;
 +
    background: url(https://static.igem.org/mediawiki/2011/7/7e/DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat;
 +
    /*background: url(https://static.igem.org/mediawiki/2011/2/22/DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/
 +
    display: block;
 +
    font-size: 1px;}
 +
.navi a:hover {
 +
    background-position: 0 -8px;}
 +
.navi a.active {
 +
    background-position: 0 -16px;}
-
<!-- HTML CONTENT -->
+
/* Tooltips (thanks to flowplayer.org) */
-
<!-- ************ -->
+
/*********************************************/
-
    <div id="wrapper">
+
/*.tooltip {
-
         <nav>
+
         z-index: 2;
-
            <ul>
+
    display:none;
-
                <li class="navHome">
+
    background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);
-
                    <a href="/Team:UChicago">UCHICAGO</a>
+
    font-size:14px;
-
                </li>
+
    height:70px;
-
                <li class="navBar">
+
    width:160px;
-
                    |
+
    padding:25px;
-
                </li>
+
    color:#fff;}
-
                <li class="navIgem">
+
*/
-
                    <a href="https://2013.igem.org">iGEM 2013</a>
+
-
                    <img src="https://static.igem.org/mediawiki/2013/8/8d/UChi_igemlogo.png" width=50px height=50px alt="iGEM logo">
+
-
                </li>
+
-
                <li class="navItem">
+
-
                    <a href="/Team:UChicago/Team">Team</a>
+
-
                </li>
+
-
                <li class="navItem">
+
-
                    <a href="/Team:UChicago/Project">Project</a>
+
-
                </li>
+
-
                <li class="navItem">
+
-
                    <a href="/Team:UChicago/Notebook">Notebook</a>
+
-
                </li>
+
-
                <li class="navItem">
+
-
                    <a href="/Team:UChicago/Outreach">Outreach</a>
+
-
                </li>
+
-
                <li class="navSponsor">
+
-
                    <a href="/Team:UChicago/Sponsor_Us">Sponsor Us!</a>
+
-
                </li>
+
-
            </ul>
+
-
        </nav>
+
 +
nav {
 +
    width: 875px;
 +
    height: 69px;
 +
    background: url("https://static.igem.org/mediawiki/2013/7/74/UChi_banner.png") no-repeat 50%;
 +
    z-index: 1;
 +
    position: fixed;}
-
     <!-- Prepare for content -->
+
nav ul {
-
     <div class="whiteBox">
+
     list-style: none;
-
       
+
     padding: 5px 25px 7px 25px;}
-
</html>
+
nav ul li {
 +
    display: inline;
 +
    padding-left: 2px}
 +
 
 +
nav ul li a {
 +
    color: #000;}
 +
 
 +
.navIgem img {
 +
    padding-bottom: 7px;
 +
    padding-right: 80px;}
 +
 
 +
.navItem a:hover, .navSponsor a:hover {
 +
    color: #800000;
 +
    border-bottom: 2px solid #800000;}
 +
 
 +
.navHome a, .navHome a:hover, .navHome a:visited, .navHome a:active {
 +
    font-size: 22px;
 +
    font-weight: 700;
 +
    color: rgb(128,0,0);
 +
    text-decoration: none;
 +
    /*margin-right: 2px #000*/}
 +
 
 +
.navBar {
 +
    font-size: 22px;
 +
    font-weight: 700;
 +
    color: #000;}
 +
 
 +
.navItem, .navSponsor {
 +
    padding: 0 9px;}
 +
 
 +
.navIgem a, .navIgem a:hover, .navIgem a:visited, .navIgem a:active {
 +
    font-size: 22px;
 +
    font-weight: 700;
 +
    color: #8A9045;
 +
    text-decoration: none;
 +
    margin: 0;}
 +
 
 +
.navItem a, .navItem a:hover, .navItem a:visited, .navItem a:active  {
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    color: #000;
 +
    text-decoration: none;
 +
    margin: 0;}
 +
 
 +
.navSponsor a, .navSponsor a:visited, .navSponsor a:active {
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    color: #8F3931;
 +
    text-decoration: none;
 +
    margin: 0;}
 +
 
 +
.navSponsor a:hover, {
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    color: #800000;
 +
    text-decoration: none;
 +
    margin: 0;}

Revision as of 00:08, 14 September 2013

/* Removing wiki-like stuff */ /****************************/

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display:none;}

/* Redesigning the topmenu */ /***************************/ body { 

   margin: 25px 0 0 0;
   padding: 0;}
  1. top-section { 
   width: 840px;
   height: 0;
   margin: 0 auto;
   padding: 0 0 0 5px;
   border: none;}
  1. menubar { 
   font-size: 75%;
   top: -14px;}

.left-menu { 

   left: 14px;}

.left-menu:hover { 

   background-color: transparent;}
  1. menubar li a { 
   background-color: transparent;}
  1. menubar:hover { 
   color: white;}
  1. menubar li a { 
   color: transparent;}
  1. menubar:hover li a { 
   color: #767676;}
  1. menubar > ul > li:last-child { 
   display:none;}

/* TOC stuff removed */

/* Font style and general */ /**************************/

  1. content { 
   font-family: Montserrat, Helvetica, Verdana, sans-serif;
   font-size: 14px;
   color: #000;}

p { 

   margin: 0;}
  1. innercontent p { 
   margin: 0.6em 0;}

h2, h3, h4, h5, h6 { 

   border: none;
   font-weight: normal;
   color: #000;}

h1 { 

   border: none;
   color: #800000;
   font-family: Helvetica;
   font-size: 20px;
   font-weight: lighter;}
  1. bodyContent h1, #bodyContent h2 { 
   margin-bottom: 0;} /* ??? */

ul { 

   list-style: none;
   margin: 0;}

/*a:hover, a:active { 

   color: #800000;
   text-decoration: underline;} */

pre { 

   overflow: auto;
   font-size: 12px;} /* unneeded? */

div.tright, div.floatright { 

   border: none;
   margin: 10px 0 10px 20px;} /* unneeded? */

div.tleft, div.floatleft { 

   border: none;
   margin: 10px 20px 10px 0;} /* unneeded? */

div.tnone { 

   border: none;} /* unneeded? */

iframe { 

   margin: 1px;} /* unneeded? */

hr { 

   height: 0;
   border-top: 1px solid #AAA;
   border-bottom: 1px solid #FFF;} /* unneeded? */

.clear { 

   clear: both;
   height: 0;
   padding: 0;
   margin: 0;
   border: none;
   visibility: hidden;} /* unneeded? */

.superscript { 

   font-size: 80%;
   position: relative;
       top: -5px;} /* unneeded? */

.subscript { 

   font-size: 80%;
   position: relative;
       top: 5px;} /* unneeded? */

.farve1 { 

       background-color: #FFCC00;}

.farve2 { 

       background-color: #FF9900;}

.farve3 { 

       background-color: #FF6600;}

.farve4 { 

       background-color: #FF0000;}

.farve5 { 

       background-color: #990000;}

.farve6 { 

       background-color: #FF0099;}

.farve7 { 

       background-color: #CC3399;}

.farve8 { 

       background-color: #990066;}

.farve9 { 

       background-color: #660066;}

.farve10 { 

       background-color: #990099;}

.farve11 { 

       background-color: #3366CC;}

.farve12 { 

       background-color: #33CCFF;}

.farve13 { 

       background-color: #99CC33;}

.farve14 { 

       background-color: #66CC00;} /* unneeded? */

.coloredBg { 

   font-size: 12px;
   font-weight: normal;
   color: #FFFFFF;
   padding: 5px;} /* unneeded? */

/* Layout */ /**********/

  1. bodyContent { 
   background: url("UC_bg-pattern.jpg") repeat #767676;}

body, #heading, #innercontent { 

   background: url("UC_bg-pattern.jpg") repeat #767676;}
  1. content, #globalWrapper { 
   border: none;
   width: 100%;
   margin: 0;
   padding: 0;} /* needed for resetting MediaWiki */
  1. wrapper { 
   margin: 0 auto;
   width: 875px;}
  1. heading { 
   height: 50px;}

.whiteBox { 

   background: #fff;
   -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
   width: 840px;
   margin: 0 17px;
   padding: 100px 0;
   top: -25px;
   position: absolute;}

pre { 

   border:none;
   color: #fff;
   margin: 0;
   padding: 0;

} .article { 

   width: 600px;}
  1. toc a { 
   font-weight: normal;}

/* Frontpage only */ /******************/ .smallBox { 

   width: 270px;
   padding: 0 20px 10px;
   float: left;
   margin-right: 15px;}

.lastSmallBox { 

   width: 269px;
   margin-right: 0;}

body.page-Team_DTU-Denmark div.whitebox:first-child { 

   display: none;}

/* For overview pages */ /**********************/ .overviewPage { 

   margin-left: -250px;}

.overviewBox { 

   width: 450px;}

.left { 

   float: left;}

.right { 

   float:right;}

/* footer removed temp */

/* Slider (thanks to flowplayer.org) */ /*************************************/ .scrollable { 

   /* required settinsg */
   position: relative;
   overflow :hidden;
   padding: 75px 0;
   margin: 0 auto;
   width: 840px;
   height: 400px;
   background: #FFFFFF;}

.scrollable .items { 

   /* this cannot be too large */
   width: 50000px;
   position: absolute;}

.items div { 

   float: left;
   width: 963px;
   height: 370px;}

.prev { 

       background: url(DTU-Denmark2011-slider-prev.png) no-repeat;
       height: 74px;
       width: 74px;
       position: absolute;
           left: -518px; /* ceil(963/2) + 74/2 = 482 + 37 = 519 */
           top: 310px;
       margin-left: 50%;
       cursor: pointer;}

.next { 

       background: url(DTU-Denmark2011-slider-next.png) no-repeat;
       height: 74px;
       width: 74px;
       margin-right: 50%;
       position: absolute;
           right: -519px; /* floor(963/2) + 74/2 = 481 + 37 = 518 */
           top: 310px;
       cursor: pointer;}

.disabled { 

       visibility: hidden;}

/* position and dimensions of the navigator */ .navi { 

   left: -56px;
   margin-left: 50%;
   position: absolute;
   top: 505px;
   width: 112px;}

.navi a { 

   width: 8px;
   height: 8px;
   float: left;
   margin: 3px;
   background: url(DTU-Denmark2011-slider-navigator-red.png) 0 0 no-repeat;
   /*background: url(DTU-Denmark2011-slider-navigator-dark.png) 0 0 no-repeat;*/
   display: block;
   font-size: 1px;}

.navi a:hover { 

   background-position: 0 -8px;}

.navi a.active { 

   background-position: 0 -16px;}

/* Tooltips (thanks to flowplayer.org) */ /*********************************************/ /*.tooltip { 

       z-index: 2;
   display:none;
   background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);
   font-size:14px;
   height:70px;
   width:160px;
   padding:25px;
   color:#fff;}
  • /

nav { 

   width: 875px;
   height: 69px;
   background: url("UChi_banner.png") no-repeat 50%;
   z-index: 1;
   position: fixed;}

nav ul { 

   list-style: none;
   padding: 5px 25px 7px 25px;}

nav ul li { 

   display: inline;
   padding-left: 2px}

nav ul li a { 

   color: #000;}

.navIgem img { 

   padding-bottom: 7px;
   padding-right: 80px;}

.navItem a:hover, .navSponsor a:hover { 

   color: #800000;
   border-bottom: 2px solid #800000;}

.navHome a, .navHome a:hover, .navHome a:visited, .navHome a:active { 

   font-size: 22px;
   font-weight: 700;
   color: rgb(128,0,0); 
   text-decoration: none;
   /*margin-right: 2px #000*/}

.navBar { 

   font-size: 22px;
   font-weight: 700;
   color: #000;}

.navItem, .navSponsor { 

   padding: 0 9px;}

.navIgem a, .navIgem a:hover, .navIgem a:visited, .navIgem a:active { 

   font-size: 22px;
   font-weight: 700;
   color: #8A9045;
   text-decoration: none;
   margin: 0;}

.navItem a, .navItem a:hover, .navItem a:visited, .navItem a:active { 

   font-size: 14px;
   font-weight: 400;
   color: #000;
   text-decoration: none;
   margin: 0;}

.navSponsor a, .navSponsor a:visited, .navSponsor a:active { 

   font-size: 14px;
   font-weight: 400;
   color: #8F3931;
   text-decoration: none;
   margin: 0;}

.navSponsor a:hover, { 

   font-size: 14px;
   font-weight: 400;
   color: #800000;
   text-decoration: none;
   margin: 0;}
Retrieved from "http://2013.igem.org/Team:UChicago/stylesheet"