Team:Wageningen UR/css

From 2014.igem.org

Revision as of 16:00, 17 October 2014 by Rik (Talk | contribs)

/* Navigation Menu */ .navmenubkg { 

  position:relative;
  display:block;
  z-index:450;
  top:10px;
  height:50px;
  left:0;
  right:0;
  background:transparent;
  }
  1. 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;

}

  1. rightbarlogo {

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

  1. 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; 

}


  1. 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); }


  1. igemlogo:hover img {

opacity:1; }

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

  1. ca-menu{ 
   padding:0;
   margin:0;

margin-left:15px; 

   width: 880px;

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

  1. ca-menu ul{

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

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

width:900px; }

  1. 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;

}

  1. ca-menu li a{ 
   text-align: left;
   width: 100%;
   height: 100%;
   display: block;
   color: #222;
   position: relative;

}

  1. 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(Wageningen_UR_cog1.png); 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;

}

  1. ca-icon2{

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

  1. ca-icon3{

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

  1. ca-icon4{

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

  1. ca-icon5{

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

  1. ca-icon6{

background:url(Wageningen_UR_notebook_icon1.png); 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;

}


  1. 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);

}

  1. ca-menu ul li:hover a {

-webkit-transform: none; 

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

transform:none; }

  1. ca-menu ul li:hover #ca-icon1{ 
  /* overflow:hidden;

color: #FFF372; 

   font-size:90px;*/

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

}

  1. ca-menu ul li:hover #ca-icon2{ 
  	background:url(Wageningen_UR_overview_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon3{ 
  	background:url(Wageningen_UR_outreach_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon4{ 
  	background:url(Wageningen_UR_team_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon5{ 
  	background:url(Wageningen_UR_safety_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover #ca-icon6{ 
  	background:url(Wageningen_UR_notebook_icon2.png);

background-size:100px; opacity:0.3; background-repeat:no-repeat; background-position:left center; }

  1. ca-menu ul li:hover .ca-content{ 
   color: rgb(255,235,4);

-webkit-animation: smallToBig 300ms ease; 

   -moz-animation: smallToBig 300ms ease;
   -ms-animation: smallToBig 300ms ease;

animation: smallToBig 300ms ease; }


/*submenu*/

  1. ca-menu li ul, #ca-menu li ul a {

visibility:hidden; height:0; position:fixed; background-color:tranparent; font-size:12px; padding:0; width:138px; z-index:999; text-decoration:none; text-align: center; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }


  1. ca-menu li li{

visibility:hidden; height:0; position:relative; float:none; width:138px; line-height:40px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: bold; background-color:#b6be88; text-decoration:none; box-shadow:none;

-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;

}

  1. ca-menu li li a{ 
       visibility:hidden;

-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;

}

  1. ca-menu li:hover ul{

visibility:visible; height:0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li:hover ul a{

visibility:visible; height:200px; display:block; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }


  1. ca-menu li:hover li {

position:relative; float:none; margin:0; margin-left:2.5px; 

	padding:0;

width:138px; line-height:40px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: bold; background-color:#b6be88; text-decoration:none; box-shadow:none; border:1px solid #b6be88; visibility:visible; height:36px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li:hover li > a:after { 
   content:"\25B6";

float: right; font-size:8px; margin-right:1px; margin-left:-15px; }

  1. ca-menu li:hover li > a:only-child:after { 
   content: ;

}

  1. ca-menu ul ul > :first-child { 
   box-shadow:0px 3px 1px rgba(0,0,0,0.25) inset;

-webkit-border-radius: 2px 2px 0 0; -moz-border-radius:2px 2px 0 0; border-radius:2px 2px 0 0; }

  1. ca-menu ul ul > :last-child {

-webkit-border-radius: 0 0 2px 2px; -moz-border-radius:0 0 2px 2px; border-radius:0 0 2px 2px; }

  1. ca-menu li:hover li a{

color:#473D21; visibility:visible; width:138px; height:36px; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }

  1. ca-menu ul ul li:hover {

width:138px; height:36px; background-color:#FFF372; z-index:999; -webkit-transform:none; 

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

}

  1. ca-menu ul ul li:hover a{

width:138px; height:36px; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }

/*third-level menu*/

  1. ca-menu li li ul{

visibility:hidden; height:150px; position:fixed; margin-left:136px; background-color:tranparent; padding:0; width:0px; z-index:999; text-decoration:none; text-align: center; margin-top:1px;

-webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li li ul a{

visibility:hidden; height:150px; position:fixed; background-color:tranparent; padding:0; width:138px; z-index:999; text-decoration:none; text-align: center; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li:hover ul ul li {

visibility:hidden; position:relative; float:none; margin:0; margin-left:3px; 

	padding:0;

width:0px; line-height:40px; font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight: bold; background-color:#E0E4CC; text-decoration:none; box-shadow:none; border:1px solid #E0E4CC;; height:0; -webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -ms-transition: all .4s ease-out; -o-transition: all .4s ease-out; }

  1. ca-menu li:hover ul ul li a{

color:#473D21; visibility:hidden; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; }

  1. ca-menu li li:hover ul{

visibility:visible; width:138px; display:block; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li li:hover ul a{

color:#473D21; visibility:hidden; width:138px; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }

  1. ca-menu li:hover ul li:hover > ul li{

height:36px; width:138px; visibility:visible; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

  1. ca-menu li:hover ul li:hover > ul li a{

width:138px; height:36px; visibility:visible; }

  1. ca-menu li:hover li:hover li:hover {

background-color:#FFF372; height:36px; z-index:999; -webkit-transform:none; 

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

}

  1. ca-menu li:hover li:hover li:hover a{

height:36px; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -ms-transition: all .1s ease-out; -o-transition: all .1s ease-out; }


@-webkit-keyframes smallToBig{ 

   from {
       -webkit-transform: scale(0.1);
   }
   to {
       -webkit-transform: scale(1);
   }

} @-moz-keyframes smallToBig{ 

   from {
       -moz-transform: scale(0.1);
   }
   to {
       -moz-transform: scale(1);
   }

} @-ms-keyframes smallToBig{ 

   from {
       -ms-transform: scale(0.1);
   }
   to {
       -ms-transform: scale(1);
   }

}

@-webkit-keyframes moveFromBottom { 

   from {
       -webkit-transform: translateY(100%);
   }
   to {
       -webkit-transform: translateY(0%);
   }

} @-moz-keyframes moveFromBottom { 

   from {
       -moz-transform: translateY(100%);
   }
   to {
       -moz-transform: translateY(0%);
   }

} @-ms-keyframes moveFromBottom { 

   from {
       -ms-transform: translateY(100%);
   }
   to {
       -ms-transform: translateY(0%);
   }

}

Retrieved from "http://2014.igem.org/Team:Wageningen_UR/css"