Team:Wageningen UR/css

From 2014.igem.org

(Difference between revisions)

Revision as of 19:02, 17 October 2014

/*Font imports first*/ @import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

/*

Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
http://cssreset.com
/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; /*vertical-align: baseline;*/ } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } table { border-collapse: collapse; border-spacing: 0; }

/*Hiding default wiki elements - thanks to DTU-Denmark 2011*/

contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {

   display:none;}

/* Some changes to the iGEM menu bar - thanks to DTU-Denmark 2011 (https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki) */

menubar.left-menu > ul > li:last-child {

   display: none;

}

menubar {

   width: auto;

}

top-section{

   background-color: transparent;

}

top-section:hover{

   background-color: rgba(100,100,100,0.5);

}

top-section:hover li a {

   background-color: rgba(100,100,100,0.5);
   color: black;

}

menubar a:link, #menubar a:active, #menubar a:visited, #menubar:hover{

   color: transparent;

}

/*Three column layout with fixed middle width - http://css-lab.com/demos/3col-fluid/3col-fix-cntr.html*/

{

margin:0; padding:0; }

body:before {/*Opera Fix*/

   content:"";
   height:100%;
   float:left;
   width:0;
   margin-bottom:-100px;/*header height*/

} html{ height:100%; } body{

   height:100%;
   min-width: 1000px;/*To remove horizontal scrollbar*/
   overflow-x: hidden; /*To remove horizontal scrollbar*/
   background-image: url('https://static.igem.org/mediawiki/2014/0/02/Wageningen_UR_background.jpg');

background-size: 1000px; font-family: verdana, geneva, sans-serif; color: #000000; font-size:80%; }

wrapper{

   min-height:100%;
   margin-top:-50px; /*footer soak up*/
   position:relative;/*set as containing block for AP faux column*/

}

innerwrap{/*IE6 needs this for the AP faux column*/

   width:1024px;
   overflow:visible;

margin-left: auto; margin-right: auto; }

header{

   /*border-top:50px solid #333;/*footer soak up*/
   margin-top: 60px; /*Change to 10 for IE*/

margin-bottom: -15px; margin-left: -30px; height: 170px;

   position:relative;
   z-index: -1;/*layer it above the AP faux*/
   /*background:inherit;*/
   color:#000;
   text-align:center;

background-image: url('https://static.igem.org/mediawiki/2014/9/95/Wageningen_UR_banner.png'); background-size: auto 170px; background-repeat: no-repeat; background-position: center; /*background-size: 200px;*/ display: block; }

left {

   width:50%;
   float:left;
   margin-right:-500px; /*-half center width*/

background:inherit; /*border-bottom: 50px solid #97a355;*/ }

inner-left{

   margin-right:505px; /*half center column width + 5*/
   background:inherit;/*background:#FFF;same as body BG*/

}

center {

   width:1000px; /*center column width*/
   float:left;
   background:inherit;
   position:relative;
   z-index:3;

margin-top: -10px; /*box-shadow: -10px 0px 10px 0px rgba(0,0,0,0.17); */ /*Could be the padding from menu or something*/ /*border-radius:10px;*/ /*border-width:2px;

   border-style:dashed;

border-color:#473d21;*/ } .center_content{ padding: 50px; margin-bottom: 20px; background:#FFFFFF; color: #473D2; box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.5);/*rgba(229, 299, 196, 0.8); */ border-radius: 3px; overflow: hidden; }

right {

   width:50%;
   float:right;
   margin-left:-500px; /*-half center width*/

background:#FFFFFF; }

inner-right {

   margin-left:505px; /*half center column width + 5*/
   background:#FFFFFF;/*same as body BG*/

}

center-faux{

   position:absolute;
   width:1000px; /*center column width*/
   left:50%;
   bottom:0;
   height:100%;
   margin-left:-500px; /*-half center column width*/
   background:inherit;
   z-index:0;

/*box-shadow: 0px 0px 8px 3px #E5E5C4; */ border-radius:10px; /* -webkit-box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75); box-shadow: 0px 0px 53px 16px rgba(0,0,0,0.75); */ }

html #center-faux{height:999em}/*for IE6*/

footer{

margin-top: 30px; padding-top:100px;

   clear:both;
   width:100%;
   height:50px;

/*background-color: #97a355;*/ background-image: url();

   color:#f0efcd;
   text-align:center;

}

mascot{

position: fixed; bottom: 10px; right: 10px; }

/*sidebar*/

.sidebar-container{ float:right; }

sidenav {

   width:150px;
   background-color:none;
   border:none;
   padding:0;

margin-top:235px; margin-left:-135px; position: fixed;

   top: 0;
   z-index: 3;

}

.menu-head { background: #473D21; width:150px; padding:0; margin:0; list-style: none; box-shadow: 0px 5px 9px rgba(0,0,0,0.50); border-radius: 3px; overflow:hidden;

 	border-top: 2px solid #473D21;

border-right:1px solid #473D21; border-left:1px solid #473D21; border-bottom:2px solid #8B964E; }

.menu-head a{ color:#FFF372; text-decoration: none;

   font-size:14px;

background: none; width:150px; margin:0; padding:0px 20px; list-style: none; position: relative; line-height:40px; display: block; }

.menu-item { font-weight: bold; background: #97A355; width:150px; padding:0; margin:0; list-style: none; box-shadow: 0px 5px 9px rgba(0,0,0,0.50); border-radius: 3px; overflow:hidden;

 	border-top: 2px solid #9EAB59;

border-right:1px solid #9EAB59; border-left:1px solid #9EAB59; border-bottom:2px solid #8B964E; }

.menu-item a{ text-decoration: none;

   font-size:12px;

background: none; width:150px; margin:0; padding:0px 20px; list-style: none; position: relative; line-height:40px; }

.menu-item a, .menu-item a:visited { color: #222; display: block; text-decoration: none; width: 150px; line-height:40px; }

.menu-item:hover >{ background: #473D21; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); border-radius: 3px; }

.menu-item:hover > a{ color: #FFF372; }

.menu-item ul { background: none; box-shadow:none; font-size: 14px; height:0px;/*collapses the menu*/ list-style-type: none; padding: 0px; margin:0; overflow:hidden; -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease; -ms-transition: height 1s ease; transition: height 1s ease; }

.menu-item ul a, .menu-item ul a:visited { margin:0; text-decoration: none; color: #222; display: block; width: 150px; overflow:hidden; }

.menu-item ul li a, .menu-item ul li a:visited {

   background-color: rgb(215,214,126);
}
/*

.menu-item a { display: block; width:150px; height:40px; line-height:40px; margin:0; padding:0px 20px; overflow:hidden; -webkit-transition: height 1s ease;

    -moz-transition: height 1s ease;
      -o-transition: height 1s ease;
     -ms-transition: height 1s ease;
         transition: height 1s ease;

}

/

.menu-item:hover li{ height:40px; line-height:40px; }

/* Can't get it to expand based on the number of children - just used seperarete css for each ammount of submenus.*/ .menu-item:hover ul.one-item{ height:42px; } .menu-item:hover ul.two-item{ height:82px; } .menu-item:hover ul.three-item{ height:122px; } .menu-item:hover ul.four-item{ height:162px; } .menu-item:hover ul.five-item{ height:202px; } .menu-item:hover ul.six-item{ height:242px; }

.menu-item li:hover a{

 background: #FFF372;
 font-weight:bold;

}

a.sidenav-active {

  background-color: rgba(119, 122, 64, 0.9);
  font-weight:bold;
  padding:0 20px;

}

/*sidebar end*/

hr {

   border:none;
   background-color:rgb(220,220,220);
   height:12px;
   margin-bottom:18px;

}

/*top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px*/

center h1,h2,h3,h4{

font-family:Verdana, Geneva, sans-serif; font-weight:bold; }

center h1{

line-height: 30px; color:#3a3424; margin: 20px 10px 10px 10px; font-size:200%; /*text-align:center;*/ /*border-bottom: 1px solid #3a3424;*/ /*f0efcd;*/ }

center h2{

margin: 10px 10px 5px 10px; font-size:170%; color: #575e31; border-bottom: 1px solid #575e31; /*text-decoration:underline*/ }

center h3{

margin: 10px 10px 0px 15px; color:#3a3424; font-size:130%; }

center h4{

margin: 0px 10px 10px 40px; color:#3a3424; font-size:110%; font-weight: 800; }

center p, #center ul, #center ol{

margin: 10px 15px 10px 15px; color:#3a3424; font-size:14px; text-align: justify; line-height:1.5em; font-weight: 400; }

center ul{

margin: 10px 15px 10px 45px; list-style-type:disc; list-style-image:none; }

center ol{

margin: 10px 15px 10px 45px; list-style-type:decimal; }

center p.notjustified{

text-align: left; }

center h1+p, h2+p, h3+p, h4+p{

padding-top:0px; }

footer p{

padding-top: 8px; margin: 0px; line-height: initial; }

/*TEAM PAGE #E1FEA2*/

.box-left-team, .box-right-team{ margin: 10px 10px 10px 10px; float: left; height: 475px; width:410px; clear: both; background-color: #f0efcd; /*#F6FAED;*/ border: 10px solid white; /*border-radius: 10px;*/ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }

center .box-left-team > p, #center .box-right-team > p{

font-size: 12px; margin-bottom: 10px; }

center .box-left-team > h3, #center .box-right-team > h3{

font-size: 14px; margin-top: 0px; }

.box-left-team-photo{ margin: 10px 15px 5px 15px; float: right; height: 235px; border-radius: 10px; }

.box-left-team > img.bottom, .box-right-team > img.bottom{ margin: 10px 15px 5px 15px; float: right; height: 234px; border-radius: 10px; }

.box-left-team > img.top, .box-right-team > img.top{ position:absolute; margin-left:238px; margin-top:10px; border-radius:10px; height:235px; width:157px; display:inline-block; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }

.box-left-team:hover > img.top, .box-right-team:hover > img.top{ opacity:0; }

.box-right-team{ float: right; clear: none; } .box-right-team-invisble{ width: 430px; background: inherit; border: none }

@font-face { font-family: 'icomoon'; src:url('../icomoon/fonts/icomoon.eot'); src:url('../icomoon/fonts/icomoon.eot') format('embedded-opentype'), url('../icomoon/fonts/icomoon.woff') format('woff'), url('../icomoon/fonts/icomoon.ttf') format('truetype'), url('../icomoon/fonts/icomoon.svg') format('svg'); font-weight: normal; font-style: normal; }

/* Navigation Menu */ .navmenubkg {

  position:relative;
  display:block;
  z-index:450;
  top:10px;
  height:50px;
  left:0;
  right:0;
  background:transparent;
  }

nav_wrapper{

padding:0; margin-top:0;

   margin-left:-30px;
   margin-right:auto;

padding-left:10px;

   width:1050px;
   height:50px;
   z-index:500;
   display:block;

background-color:#97A355;

   color: rgb(46,43,52); /*grey*/
   text-align:center;

border-radius: 3px; -webkit-box-shadow: 1px 3px 5px rgba(0,0,0,0.5);

   -moz-box-shadow: 1px 3px 5px rgba(0,0,0,0.5);
   box-shadow: 1px 3px 5px rgba(0,0,0,0.5);

}

.sidelogos {

   float:left;
   display:block;
   margin-left:auto;
   height:100%;
   width:65px;;

} .sidelogos a {

  display:block;
  top:0;
  bottom:0;

}

rightbarlogo {

padding-top: 1 px; position: absolute; right:-10px; bottom: 1px; }

pblogo img{

height:40px; /*margin-top: -10px;*/ background-color:transparent; margin-top:5px; margin-left:8px; -webkit-transform:rotate(0deg) scale(0.9); -moz-transform:rotate(0deg) scale(0.9); -ms-transform:rotate(0deg) scale(0.9); -o-transform:rotate(0deg) scale(0.9); transform:rotate(0deg) scale(0.9); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;

pblogo:hover img{

background-color:transparent; -webkit-transform:rotate(0deg) scale(1.3); -moz-transform:rotate(0deg) scale(1.3); -ms-transform:rotate(0deg) scale(1.3); -o-transform:rotate(0deg) scale(1.3); transform:rotate(0deg) scale(1.3); }

igemlogo:hover img {

opacity:1; }

rightlogo img{

pointer-events:none; /*Does this work in IE9? Apparantly not... Who would've thought...*/ position:relative; z-index: -1; background-color:transparent; height:400px; margin-top:-200px; margin-left:-120px; overflow: hidden; }

/*menu bar*/

ca-menu{

   padding:0;
   margin:0;

margin-left:15px;

   width: 880px;

display:block; /*position:relative;*/ float:left; }

ca-menu ul{

list-style-type: none; list-style-image: none;

   padding: 0;
   margin: 0;
   position:relative;

width:900px; }

ca-menu li{

   width: 142px;
   height: 50px;
   position: relative;
   float:left;
   background:#97A355;

   -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   margin-right: 4px;

-webkit-transition: all 400ms linear;

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

ca-menu li a{

   text-align: left;
   width: 100%;
   height: 100%;
   display: block;
   color: #222;
   position: relative;

}

ca-icon1, #ca-icon2, #ca-icon3, #ca-icon4, #ca-icon5, #ca-icon6{

   position: absolute;
 	width:150px;
   height: 50px;
   left: 10px;
   top: 0;
   text-align: left;

overflow:hidden; background:url(); background-size:35px; background-repeat:no-repeat; background-position:left center; -webkit-transition: all 400ms linear;

   -moz-transition: all 400ms linear;
   -o-transition: all 400ms linear;
   -ms-transition: all 400ms linear;
   transition: all 400ms linear;

}

ca-icon2{

background:url(); background-size:35px; background-repeat:no-repeat; background-position:left center; }

ca-icon3{

background:url(); background-size:35px; background-repeat:no-repeat; background-position:left center; }

ca-icon4{

background:url(); background-size:35px; background-repeat:no-repeat; background-position:left center; }

ca-icon5{

background:url(); background-size:35px; background-repeat:no-repeat; background-position:left center; }

ca-icon6{

background:url(); background-size:35px; background-repeat:no-repeat; background-position:left center; }

.ca-content{

   position: absolute;
   left: 0px;
   width: 120px;
   height: 100%;
   left: 25%;

background-color:transparent; font-family:Tahoma, Geneva, sans-serif; font-size:17px; font-weight:bold; line-height:50px; opacity: 0.9;

   text-align: center;

}

ca-menu ul li:hover{

   background-color: #473D21;
   z-index:999;
   -webkit-transform: scale(1.1);  
   -moz-transform: scale(1.1);  
   -ms-transform: scale(1.1);   
   -o-transform: scale(1.1);   
   transform: scale(1.1);

}

ca-menu ul li:hover a {

-webkit-transform: none;

   -moz-transform: none;  
   -ms-transform: none;   
   -o-transform: none;

transform:none; }

ca-menu ul li:hover #ca-icon1{

  /* overflow:hidden;

color: #FFF372;

   font-size:90px;*/

background:url(); background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center;

}

ca-menu ul li:hover #ca-icon2{

  	background:url();