Team:Groningen/Template/CSS

From 2014.igem.org

Revision as of 14:43, 7 October 2014 by S.Mous (Talk | contribs)

/*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.*/

/*Below is our unlimited freedom CSS embedded style. :D */

/*First, we'll have to work a bit on the standard stuff iGEM gives us.*/ body{ font-family: sans-serif; text-align: justify; background:#82c2ea; width:100%; height: 100%; padding:0px; margin:0px; }

  1. p-logo, #search-controls, #footer, .firstHeading, #siteSub, .printfooter

{ visibility:hidden; }

  1. globalWrapper, #content, #bodyContent{

position:absolute; top:0px; left:0px; padding:0px; margin:0px; width:100%; height:100%; }

/*Everything related to the menubar. The menubar is one of the things that's in the coding we can't change, and we HAVE to keep it (so we can't just make it invisible and ignore it). Note that there are two elements with the id menubar, and that they are divided into two classes, namely left-menu and right-menu. We made and extra box called topmenubarbackground so that we can have a background for the menu that is 100% the wide of the screen. But we will set the style for that element later in the site, because it's inside the element where we programmed our own stuff.*/

  1. menubar ul{

z-index:2; width:510px; height:12px; position:absolute; top:-15px; left:50%; padding: 0px; list-style-type: none; } .left-menu ul{ margin-left:-510px; } .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; }

/*Here, the elements that we made ourselves start.*/

  1. ourentirewebsite{

visibility:visible; position:absolute; top:0px; left:0px; width:100%; height:100%; }

/*Topmenubarbackground and titlebaroverlay are elements that are 100% screen width wide, so we'll have to define them outside the scrollable and the not scrollable content boxes, which is a bit weird. We also have a backgroundimagebox, with, as the name suggests, a background image. This background is transparent and the body background should shine through it. We also made a shadowbox because we weren't satisfied with how the shadow looked when we applied the shadow to the individual elements.*/

  1. topmenubarbackground{

width:100%; top:0px; left:0px; height:17px; background:#000000; }

  1. titlebaroverlay{

z-index:0; width:1020px; position:absolute; top:217px; left:165px; height:32px; }

  1. backgroundimagebox{

z-index:-1; position:fixed; top:0px; left:0px; width:100%; height:100%; background-attachment:fixed; }

  1. shadowbox{

position:fixed; top:0px; left:50%; z-index:-1; margin-left:-510px; width:1020px; height:100%; background:white; filter:alpha(opacity=60); opacity:.6; box-shadow: 0px 0px 70px #000; }

/*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:17px; margin-left:-510px; }

/*Everything related to the logobox*/

  1. logobox{

padding:10px; width:200px; height:180px; position:absolute; left:0px; top:0px; background-color:#ffffff; }


.menubutton{cursor:pointer; cursor:hand; box-shadow: 3px 3px 7px #000000; }

/*External links (igem, facebook and twitter button.)*/

  1. external_links{

position:absolute; left:50%; top:270px; margin-left:-680px; width:160px; height:300px; }

  1. igembutton{ 
position:absolute;
top:0px;
right:19px;
width: 100px;
height: 80px;
background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -5px -164px;

}

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

}

  1. facebookbutton{ 
position:absolute;
top:73px;
right:0px;
width: 90px;
height: 90px;
background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -110px -164px;

}

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

}

  1. twitterbutton{ 
position:absolute;
top:132px;
right:55px;
width:90px;
height:90px;
background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -205px -164px;

}

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

}

// #sponsored_links{ position:absolute; left:50%; top:270px; margin-left:520px; width:160px; height:600px; } //

  1. link_english{cursor:pointer;

cursor:hand; }

  1. link_chinese{cursor:pointer;

cursor:hand; }

  1. link_dutch{cursor:pointer;

cursor:hand; }

  1. link_finnish{cursor:pointer;

cursor:hand; }

  1. link_french{cursor:pointer;

cursor:hand; }

  1. link_hindi{cursor:pointer;

cursor:hand; }

  1. link_norwegian{cursor:pointer;

cursor:hand; }

  1. link_polish{cursor:pointer;

cursor:hand; }

  1. link_portuguese{cursor:pointer;

cursor:hand; } 


     #virginiabadge{
     background: url("Virginia_Badge2.png");
     background-size:250px;
     width: 250px;
     height: 185px;
     background-repeat:no-repeat;
   }

   #virginiabadge:hover{
    background: url("File-Virginia-Images-Badge1.png");
    background-repeat:no-repeat;
    width: 250px;
    height: 185px;
    background-size:250px;
   }


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

  1. bannerbox{ 
 width:800px;
 height:200px;
 position:absolute;
 left:220px;
 top:0px;

} .hideable{ 

 display:none

}

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

}

  1. carouselbox ul{ 
 background-color:#ffffff;

}

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

}

  1. carouselbox #carousel1{ 
 background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 0%;

}

  1. carouselbox #carousel2{ 
 background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 100%;

}

  1. carouselbox #carousel3{ 
 background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 200%;

}

  1. carouselbox #carousel4{ 
 background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 300%;

}

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

}

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

}

  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 0px;

}

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

}

  1. carousel_quick_jump_buttons{

position:absolute; bottom:0px; left:47%; } .carouselquickjumpbutton{ 

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

} .carouselquickjumpbutton:hover{ 

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

}

/*Everything related to the contents.*/

  1. contentbox{

width:800px; height:0px; position:absolute; left:220px; top:240px; }

  1. contentbox .visibilitytoggle, .content{

padding: 10px 20px 10px 10px; position:absolute; top:0px; left:0px; width:770px; } .italic{ font-style:italic; }

/*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:217px; margin-left:-510px; }

/*Everything related to the languagemenu*/

  1. languagemenubox{

width:1020px; height:32px; position:absolute; left:0px; top:0px; backgound:#ffff; border-top:4px solid #003f87; border-bottom:4px solid #003f87; }

/*Everything related to the content title box*/

  1. titlebox{

width:1020px; height:32px; position:absolute; left:0px; top:0px; background:#ffffff; border-top:4px solid #003f87; border-bottom:4px solid #003f87; }

  1. titlebox h1{

position:absolute; left:220px; top:-22px; color:#003f87; font-family: Impact, Charcoal; font-size:30px; }

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

}

  1. titlebox .nextpagebutton:hover{

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

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

}

  1. titlebox .nextchapterbutton:hover{

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

/*Everything related to the navigation menu*/

  1. navigationmenubox{

width:220px; position:absolute; left:0px; top:40px; visibility:visible; }

  1. navigationmenu{ 
text-align:left;
position:absolute;
top:10px;
left:10px;
width:200px;

} .menu-item{ 

color:#000000;
position:relative;
border-bottom: 2px solid #003f87; 
line-height: 25px;
font-size: 100%;
cursor:pointer;

} .menu-item span{ 

display:block;
text-indent:30px;

} .sub-menu{ 

margin: 0px 0px 0px 0px;
color:#000000;
font-style: italic;

} .sub-menu-item{ 

font-size: 12px;
position:relative;
border-bottom: 0px solid #ffffff;
line-height: 25px;

} .menu-item a { 

text-decoration:none;
color:#000000;

} .menu-selected{ 

background:#82c2ea;
color:#ffffff;
border-bottom:2px solid #003f87;

} .sub-menu-selected{ 

color:#ffffff;

}

  1. menu_home{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px 0px no-repeat; }

  1. menu_project{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -50px no-repeat; }

  1. menu_modelling{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -100px no-repeat; }

  1. menu_policyandpractice{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -150px no-repeat; }

  1. menu_education{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -450px no-repeat; }

  1. menu_team{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -400px no-repeat; }

  1. menu_parts{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -200px no-repeat; }

  1. menu_notebook{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -250px no-repeat; }

  1. menu_safety{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -500px no-repeat; }

  1. menu_awards{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -300px no-repeat; }

  1. menu_acknowledgements{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -350px no-repeat; }

  1. menu_artanddesign{

background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -600px no-repeat; }


/*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; }

.content_home{ visibility:visible; }


  1. thomas{

position:absolute; top:0px; left:0px; 

background:url(Teamspritein400x325squares.png) 0px 0px no-repeat;

}

  1. lisa{

position:absolute; top:97px; left:0px; 

background:url(Teamspritein400x325squares.png) 0px -194px no-repeat;

}

  1. rick{

position:absolute; top:194px; left:0px; 

background:url(Teamspritein400x325squares.png) 0px -388px no-repeat;

}

  1. chandhuru{

position:absolute; top:291px; left:0px; 

background:url(Teamspritein400x325squares.png) 0px -582px no-repeat;

}

  1. sandra{

position:absolute; top:388px; left:0px; 

background:url(Teamspritein400x325squares.png) 0px -776px no-repeat;

}

  1. otto{

position:absolute; top:485px; left:0px; 

background:url(Teamspritein400x325squares.png) 0px -970px no-repeat;

}

  1. lianne{

position:absolute; top:0px; left:195px; 

background:url(Teamspritein400x325squares.png) 0px -1164px no-repeat;

}

  1. oscar{

position:absolute; top:97px; left:195px; 

background:url(Teamspritein400x325squares.png) 0px -1358px no-repeat;

}

  1. freek{

position:absolute; top:194px; left:195px; 

background:url(Teamspritein400x325squares.png) 0px -1552px no-repeat;

}

  1. anna{

position:absolute; top:291px; left:195px; 

background:url(Teamspritein400x325squares.png) 0px -1746px no-repeat;

}

  1. andries{

position:absolute; top:388px; left:195px; 

background:url(Teamspritein400x325squares.png) 0px -1940px no-repeat;

}

  1. aakanksha{

position:absolute; top:485px; left:195px; 

background:url(Teamspritein400x325squares.png) 0px -2134px no-repeat;

}

Retrieved from "http://2014.igem.org/Team:Groningen/Template/CSS"