Team:TU-Eindhoven/Style

From 2014.igem.org

/* Removing iGEM style */

  1. searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
  display: none;

}

  1. content { 
  height: 200px;
  width: 100%;
  border: none;
  padding: 0px;

}


/* Customizing standard iGEM navigation panel */

  1. top-section{ 
  height: 18px;
  width: 100%;
  border: none;
  border-top: none;

}

  1. menubar { 
  display: table-cell;
  height: 30px;
  font-size: 12pt;
  position: fixed;
  background:black;

}

  1. menubar.left-menu { 
  width: 100%;
  margin-left:-12px;

}

  1. menubar.right-menu { 
  text-align: right;

}

  1. menubar.left-menu a { 
  border: none;
  color: #454545;

}

  1. menubar.right-menu a { 
  border: none;
  color: #454545;

}

  1. menubar * { 
  background: transparent;

}

  1. menubar * a:hover{ 
  color: green;
  text-decoration: none;

}

  1. menubar > ul > li:last-child { 
  display: none;

}


/* TU-Eindhoven Style */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 

  display: none;

}

body { 

  font-family: 'Noto Sans', sans-serif;
  background: #dfff9f;

}

ol, ul { 

  list-style: none;

}

  1. navpanel { 
  height:75px;
  width:975px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);   
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 0pt;

}

  1. header { 
  height: 200px;
  width: 100%;
  border-bottom: 2px solid black;
  background-image: url("E.COLI.jpg");

}

.menu1 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #00C800));
  background-image: -o-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #00C800 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #00C800 25%);
  float:left;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu2 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #009600));
  background-image: -o-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #009600 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #009600 25%);
  float:left;
  position:relative;
  left:-15px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu3 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #006400));
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #006400 25%);
  float:left;
  position:relative;
  left:-30px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

.menu4 { 

  height:75px;
  width:200px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.25, #003200));
  background-image: -o-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #003200 25%);
  background-image: linear-gradient(to bottom, #000000 0%, #003200 25%);
  float:left;
  position:relative;
  left:-45px;
  transition:all .2s ease-in-out 0s;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

}

a.p1 { 

  font-size: 24px;
  font-weight:bold;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  top:30px;
  left:30px;

}

a.p2 { 

  font-size:16px;
  color: rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  top:60px;
  left:45px;

}

  1. icons { 
  position:absolute;
  bottom:10px;
  left:10px;

}

.menu1:hover { 

  width:300px;

}

.menu2:hover { 

  width:300px;

}

.menu3:hover { 

  width:300px;
  height:150px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(0.13, #006400));
  background-image: -o-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -moz-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: -ms-linear-gradient(bottom, #000000 0%, #006400 13%);
  background-image: linear-gradient(to bottom, #000000 0%, #006400 13%);

}

.menu4:hover { 

  width:300px;
  border-bottom-right-radius: 8px;

}

.menu1:hover .p1 { 

  color: white;

}

.menu2:hover .p1 { 

  color: white;

}

.menu3:hover a.p1 { 

  color: white;

}

.menu4:hover a.p1 { 

  color: white;

}

.menu3 ul { 

  display:none;

}

.menu3:hover ul { 

  display:inline;
  list-style:none;

}

.menu3 ul li a.p2:hover{ 

  color: white;

}

  1. textcontent { 
  height:relative;
  width:975px;
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  margin-bottom:75px;
  box-shadow:10px 10px 10px #888888;								
  background:rgba(255,255,255,1);

}

p.text { 

  padding:0px 25px 25px 25px;
  text-align:justify;

}

p.title{ 

  padding:25px 25px 10px 25px;
  font-size:50px;
  font-weight:900;
  color:#003200;

}

p.subtitle{ 

  padding:5px 25px 5px 25px;
  font-size:30px;
  font-weight:900;
  color:#006400;

}

  1. footerbar { 
  height:15px;
  width:115px;
  background:transparant;
  margin-left:auto;
  margin-right:auto;

}

.foot { 

  color:rgba(0,0,0,0.35);
  font-size: 8pt;
  margin-top:-1px;
  margin-left:auto;
  margin-right:auto;
  position:fixed;
  bottom:0px;

}

.projectimage { 

  position:relative;
  left:137px;
  right:137px;

}

Retrieved from "http://2014.igem.org/Team:TU-Eindhoven/Style"