Groningen:Stylesheet

From 2014.igem.org

<style type="text/css"> /*The text below will make some of the annoying standard elements invisible, like the mega iGEM logo, the search box and the footer about wikimedia. Because our custom divs #scrollablebontent and #noscroll (in which we code our entire site) are embedded inside #globalwrapper (that we just made invisible) we have to make the custom div visible again. The same counts for the #menubar, that is one of the elements that MUST stay on the page.*/

  1. globalWrapper{visibility:hidden; position:relative;}
  2. menubar{visibility:visible;}
  3. ourentirewebsite{visibility:visible;}

</style>

<style type="text/css"> /*Below is our unlimited freedom CSS embedded style. :D */

body{ background:url('https://static.igem.org/mediawiki/2014/f/f4/Groningen_2014_background.png'); background-attachment: fixed; width:100%; padding:0px; margin:0px; } /*Why do I have to work around so many boxes inside other boxes? It makes me sad. :( */

  1. globalWrapper{

width:100%; padding:0px; margin:0px; }

  1. content{

width:100%; padding:0px; margin:0px; }

  1. bodyContent{

width:100%; padding:0px; margin:0px; }

  1. ourentirewebsite{

background:#ff0000; position: absolute; top:0px; left:0px; width:100%; height:auto; }

/*Everything related to the menubar. The menubar is one of the things we MUST keep. Note that there are two elements with the id menubar, and that they are divided into two classes, namely left-menu noprint and right-menu noprint.*/

  1. menubar ul{

z-index:2; width:365px; height:12px; background:#000000; position:absolute; top:-18px; left:50%; padding: 0; list-style-type: none; } .left-menu ul{ margin-left:-365px; } .left-menu li{ float:left; margin-right:10px; display:inline; color:#ffffff; font:10px arial,sans-serif; } .right-menu li{ float:right; margin-left:10px; display: inline; color:#ffffff; font:10px arial,sans-serif; }

  1. menubar a{

color:#ffffff; font:10px arial,sans-serif; text-decoration: none; }

/*Everything related to the container where we put the entire scrollable part of the site in.*/

  1. scrollablecontent{

position:absolute; width:730px; height:300px; left:50%; top:13px; margin-left:-365px; }

/*Everything related to the logobox*/

  1. logobox{

background:#ffffff; width:220px; height:200px; position:absolute; left:0px; top:0px; }

/*Everything related to the banner, and the carousel inside it.*/

  1. bannerbox{ 
 background:#ffffff;
 width:510px;
 height:200px;
 position:absolute;
 left:220px;
 top:0px;

} .hideable{ 

 display: none;

}

  1. carouselbox{ 
 position:absolute;
 top:0px;
 left:0px;
 background-color: white;
 height:100%;
 width:100%;

}

  1. carouselbox ul{ 
 background-color: red;

}

  1. carouselbox li{ 
 position:absolute;
 top:0px;
 left:0px;
 height:200px;
 width:100%;

}

  1. carouselbox #carousel1{ 
 background: url('https://static.igem.org/mediawiki/2014/0/09/Groningen_2014_Carouselboxbackgroundimages.png') 0px 0px;

}

  1. carouselbox #carousel2{ 
 background: url('https://static.igem.org/mediawiki/2014/0/09/Groningen_2014_Carouselboxbackgroundimages.png') 0px 200px;

}

  1. carouselbox #carousel3{ 
 background: url('https://static.igem.org/mediawiki/2014/0/09/Groningen_2014_Carouselboxbackgroundimages.png') 0px 400px;

}

  1. carousel_external_links{

position:absolute; right:5px; top:5px; }

  1. carousel_quick_jump_buttons{

position:absolute; bottom:0px; left:225px; }

  1. carouselfacebookbutton{ 
 position:relative;
 z-index:999;
 width: 30px;
 height: 30px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') 0px 30px;

}

  1. carouselfacebookbutton:hover{ 
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') 0px 0px;

}

  1. carouseltwitterbutton{ 
 position:relative;
 z-index:999;
 width: 30px;
 height: 30px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -31px 30px;

}

  1. carouseltwitterbutton:hover{ 
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -31px 0px;

}

  1. carouseligembutton{ 
 position:relative;
 z-index:999;
 width: 37px;
 height: 30px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -138px 30px;

}

  1. carouseligembutton:hover{ 
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -138px 0px;

}

  1. carouselnextbutton{ 
 position:absolute;
 top:100px;
 left:486px;
 z-index:999;
 width: 19px;
 height: 30px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px 30px;

}

  1. carouselnextbutton:hover{ 
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px 0px;

}

  1. carouselprevbutton{ 
 position:absolute;
 top:100px;
 left:5px;
 z-index:999;
 width: 19px;
 height: 30px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -82px 30px;

}

  1. carouselprevbutton:hover{ 
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -82px 0px;

} .carouselquickjumpbutton{ 

 position:relative;
 z-index:999;
 width: 12px;
 height: 12px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -175px 20px;

} .carouselquickjumpbutton:hover{ 

 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -175px 50px;

}

/*Everything related to the contents (multiple stylesheets, because the content is dynamically switched with javascript, and different pages could need different stylesheets.*/

  1. contentbox{

background:#ffffff; width:510px; height:700px; position:absolute; left:220px; top:240px; }

/*Everything related to the container where we put the entire not scrollable part of the site in. Inside this container are the language menu, the navigation menu and the title of the content. The idea is that this part only scrolls a little bit, and after that, it stays on top of the page.*/

  1. noscroll{

position:absolute; width:730px; left:50%; top:205px; margin-left:-365px; }

/*Everything related to the languagemenu*/

  1. languagemenubox{

background:#ffffff; width:220px; height:40px; position:absolute; left:0px; top:0px; }

/*Everything related to the content title box*/

  1. titlebox{

background:#ffffff; width:510px; height:40px; position:absolute; left:220px; top:0px; }

  1. titlebox h1{

position:absolute; top:0px; color:#000000; font:20px arial,sans-serif; }

  1. titlebox .nextpagebutton{ 
 position:absolute;
 top:0px;
 right:60px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px 30px;

}

  1. titlebox .nextchapterbutton{ 
 position:absolute;
 top:0px;
 right:5px;
 background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -102px 30px;

}

/*Everything related to the navigation menu*/

  1. navigationmenubox{

background:#ffffff; width:220px; position:absolute; left:0px; top:40px; }

  1. navigationmenubox ul{

list-style:none; }

  1. navigationmenubox li{

cursor:pointer; }

/*On start, a lot of things must be set invisible, and only the home page info needs to be visible. This piece of style might be redefined later, if we add more languages. In that case, .home will become something like .home_english.*/ .visibilitytoggle{ visibility:hidden; } .home{ visibility:visible; }

</style>

Retrieved from "http://2014.igem.org/Groningen:Stylesheet"