Team:TU Eindhoven/css/styles

From 2014.igem.org

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

  1. cssmenu,
  2. cssmenu ul,
  3. cssmenu ul li,
  4. cssmenu ul li a,
  5. cssmenu #menu-button {
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

  1. cssmenu:after,
  2. cssmenu > ul:after {
 content: "";
 clear: both;
 line-height: 0;
 height: 0;

}

  1. cssmenu #menu-button {
 display: none;

}

  1. cssmenu {
 width: 1100px;
 line-height: 1;
 background: none;
 margin-left:150px;

}

  1. cssmenu > ul > li {
 float: left;

}

  1. cssmenu.align-center > ul {
 font-size: 0;
 text-align: center;

}

  1. cssmenu.align-center > ul > li {
 display: inline-block;
 float: none;

}

  1. cssmenu.align-center ul ul {
 text-align: left;

}

  1. cssmenu.align-right > ul > li {
 float: right;

}

  1. cssmenu.align-right ul ul {
 text-align: right;

}

  1. cssmenu > ul > li > a {
 padding: 14px 18px;
 font-size: 17px;
 font-weight: bold;
 text-decoration: none;
 text-transform: uppercase;
 color: #ffffff;

}

  1. cssmenu > ul > li:hover > a,
  2. cssmenu > ul > li.active > a {
 color: #009ae1;

}

  1. cssmenu > ul > li.has-sub > a {
 padding-right: 25px;

}

  1. cssmenu > ul > li.has-sub > a::after {
 position: absolute;
 top: 21px;
 right: 10px;
 width: 4px;
 height: 4px;
 border-bottom: 1px solid #000000;
 border-right: 1px solid #000000;
 content: "";
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transition: border-color 0.2s ease;
 -moz-transition: border-color 0.2s ease;
 -ms-transition: border-color 0.2s ease;
 -o-transition: border-color 0.2s ease;
 transition: border-color 0.2s ease;

}

  1. cssmenu > ul > li.has-sub:hover > a::after {
 border-color: #009ae1;

}

  1. cssmenu ul ul {
 position: absolute;
 left: -9999px; 

}

  1. cssmenu li:hover > ul {
 left: auto;

}

  1. cssmenu.align-right li:hover > ul {
 right: 0;

}

  1. cssmenu ul ul ul {
 margin-left: 100%;
 top: 0;

}

  1. cssmenu.align-right ul ul ul {
 margin-left: 0;
 margin-right: 100%;

}

  1. cssmenu ul ul li {
 height: 0;
 -webkit-transition: height .2s ease;
 -moz-transition: height .2s ease;
 -ms-transition: height .2s ease;
 -o-transition: height .2s ease;
 transition: height .2s ease;

}

  1. cssmenu ul li:hover > ul > li {
 height: 32px;
 z-index:100;

}

  1. cssmenu ul ul li a {
 padding: 10px 20px;
 width: 235px;
 font-size: 15px;
 background: #32c6e2;
 text-decoration: none;
 color: #ffffff;
 text-align: left;
 -webkit-transition: color .2s ease;
 -moz-transition: color .2s ease;
 -ms-transition: color .2s ease;
 -o-transition: color .2s ease;
 transition: color .2s ease;

}

  1. cssmenu ul ul li:hover > a,
  2. cssmenu ul ul li a:hover {
 color: #009ae1;

}

  1. cssmenu ul ul li.has-sub > a::after {
 position: absolute;
 top: 13px;
 right: 10px;
 width: 4px;
 height: 4px;
 border-bottom: 1px solid #dddddd;
 border-right: 1px solid #dddddd;
 content: "";
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transition: border-color 0.2s ease;
 -moz-transition: border-color 0.2s ease;
 -ms-transition: border-color 0.2s ease;
 -o-transition: border-color 0.2s ease;
 transition: border-color 0.2s ease;

}

  1. cssmenu.align-right ul ul li.has-sub > a::after {
 right: auto;
 left: 10px;
 border-bottom: 0;
 border-right: 0;
 border-top: 1px solid #dddddd;
 border-left: 1px solid #dddddd;

}

  1. cssmenu ul ul li.has-sub:hover > a::after {
 border-color: #ffffff;

} .button{text-decoration:none; text-align:center;

padding:11px 32px; 
border:none; 
-webkit-border-radius:2px;
-moz-border-radius:2px; 
border-radius: 2px; 
font:18px Arial, Helvetica, sans-serif; 
font-weight:bold; 
color:#ffffff; 
background:#31c4e1; 
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
-moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 
 }.button:hover{
padding:11px 32px; 
border:none; 
-webkit-border-radius:2px;
-moz-border-radius:2px; 
border-radius: 2px; 
font:18px Arial, Helvetica, sans-serif; 
font-weight:bold; 
color:#000000; 
background:#31c4e1; 
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
-moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 
}.button:active{
padding:11px 32px; 
border:none; 
-webkit-border-radius:2px;
-moz-border-radius:2px; 
border-radius: 2px; 
font:18px Arial, Helvetica, sans-serif; 
font-weight:bold; 
color:#ffffff; 
background:#31c4e1; 
-webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff; 
-moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;  
box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;  
 
}