Team:TU-Eindhoven/Style

From 2014.igem.org

(Difference between revisions)
Line 240: Line 240:
color:rgba(255,255,255,1);
color:rgba(255,255,255,1);
}
}
 +
 +
/* 2nd navpanel */
 +
@import url(http://fonts.googleapis.com/css?family=Capriola);
 +
#cssmenu,
 +
#cssmenu ul,
 +
#cssmenu ul li,
 +
#cssmenu ul li a {
 +
  padding: 0;
 +
  margin: 0;
 +
  line-height: 1;
 +
  font-family: 'Capriola', sans-serif;
 +
}
 +
#cssmenu:before,
 +
#cssmenu:after,
 +
#cssmenu > ul:before,
 +
#cssmenu > ul:after {
 +
  content: '';
 +
  display: table;
 +
}
 +
#cssmenu:after,
 +
#cssmenu > ul:after {
 +
  clear: both;
 +
}
 +
#cssmenu {
 +
  zoom: 1;
 +
  height: 69px;
 +
  background: url(http://cssmenumaker.com/sites/default/files/menu/146/bottom-bg.png) repeat-x center bottom;
 +
  border-radius: 2px;
 +
  width: auto;
 +
}
 +
#cssmenu ul {
 +
  background: url(http://cssmenumaker.com/sites/default/files/menu/146/nav-bg.png) repeat-x 0px 4px;
 +
  height: 69px;
 +
}
 +
#cssmenu ul li {
 +
  float: left;
 +
  list-style: none;
 +
}
 +
#cssmenu ul li a {
 +
  display: block;
 +
  height: 37px;
 +
  padding: 22px 30px 0;
 +
  margin: 4px 2px 0;
 +
  border-radius: 2px 2px 0 0;
 +
  text-decoration: none;
 +
  font-size: 18px;
 +
  color: white;
 +
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 +
  font-weight: 400;
 +
  opacity: .9;
 +
}
 +
#cssmenu ul li:first-child a {
 +
  margin: 4px 2px 0 0;
 +
}
 +
#cssmenu ul li a:hover,
 +
#cssmenu ul li.active a {
 +
  background: url(http://cssmenumaker.com/sites/default/files/menu/146/color.png) center bottom;
 +
  display: block;
 +
  height: 37px;
 +
  margin-top: 0px;
 +
  padding-top: 26px;
 +
  color: #004f7c;
 +
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
 +
  opacity: 1;
 +
}

Revision as of 17:24, 18 May 2014

/* Removing iGEM Style */

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

}

  1. content { 
  border: none;

}


/* Customizing standard iGEM navigationpanel */

  1. top-section{ 
  height: 150px;
  width: 100%;
  border: none;
  border-top: none;
  color: grey;
  border: 2px solid black;
  background-image: url("http://static-www.icr.org/i/articles/af/purpose_in_dna_wide.jpg");

}

  1. menubar { 
  display: table-cell;
  height: 30px;
  font-size: 12pt;
  font-family: Calibri;
  position: fixed;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #065700),color-stop(0.87, #000000));
  background-image: -o-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: -moz-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: -webkit-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: -ms-linear-gradient(bottom, #065700 0%, #000000 87%);
  background-image: linear-gradient(to bottom, #065700 0%, #000000 87%);   border-radius: 2px;

}

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

}

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

}

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

}

  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: block;

}

ol, ul { 

  list-style: none;

}

  1. header { 
  height:100px;
  width:965px;
  margin-left:auto;
  margin-right:auto;
  margin-top:5px;
  margin-bottom:-20px;

}

  1. navpanel { 
  height:50px;
  width:965px;
  background:rgba(0,50,0,1);
  border-radius: 8px;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
  box-shadow:10px 10px 10px #888888;

}

  1. tekstcontent { 
  height:500px;
  width:965px;
  border-radius:10px;
  margin-left:auto;
  margin-right:auto;
  margin-top:100px;
  margin-bottom:100px;
  box-shadow:10px 10px 10px #888888;								
  background:rgba(255,255,255,1);

}

  1. tekst {

height:100%; width:865px; margin-left:auto; margin-right:auto; position:relative; top:75px; text-align:justify; }

.menu1 { height:50px; width:200px; background:rgba(0,200,0,1); float:left; transition:all .2s ease-in-out 0s; border-radius: 7px; }

.menu2 { height:50px; width:200px; background:rgba(0,150,0,1); float:left; position:relative; left:-15px; transition:all .2s ease-in-out 0s; border-radius: 7px; }

.menu3 { height:50px; width:200px; background:rgba(0,100,0,1); float:left; position:relative; left:-30px; transition:all .2s ease-in-out 0s; border-radius: 7px; }

.menu4 { height:50px; width:200px; background:rgba(0,50,0,1); float:left; position:relative; left:-45px; transition:all .2s ease-in-out 0s; border-radius: 7px; }

h1 { font-family:Calibri; font-size:50px; }

.phead { font-family:"Cooper Black"; font-size:80px; color:rgba(0,0,0,1); position:relative; width:auto; 

                       top:10px;

}

.p1 { font-family:"Cooper Black"; font-size:25px; color:rgba(255,255,255,.75); position:relative; margin-left:25px; margin-top:5px; width:100px; }

p { font-family:Calibri; font-size:20px; }

.menu:hover { width:300px; }

.menu1:hover { width:300px; }

.menu2:hover { width:300px; }

.menu3:hover { width:300px; height:auto; border-bottom-right-radius: 10px; box-shadow:10px 10px 10px #888888; }

.menu1:hover .p1 { color:rgba(255,255,255,1); }

.menu2:hover .p1 { color:rgba(255,255,255,1); }

.menu3:hover .p1 { color:rgba(255,255,255,1); }

.menu4:hover .p1 { color:rgba(255,255,255,1); }

.menu3 ul { visibility:hidden; list-style:none; font-family:"Cooper Black"; font-size:16px; color:rgba(255,255,255,.75); position:relative; margin-left:25px; }

.menu3:hover ul { visibility:visible; }

.menu3 ul li:hover { color:rgba(255,255,255,1); }

/* 2nd navpanel */ @import url(http://fonts.googleapis.com/css?family=Capriola);

  1. cssmenu,
  2. cssmenu ul,
  3. cssmenu ul li,
  4. cssmenu ul li a { 
 padding: 0;
 margin: 0;
 line-height: 1;
 font-family: 'Capriola', sans-serif;

}

  1. cssmenu:before,
  2. cssmenu:after,
  3. cssmenu > ul:before,
  4. cssmenu > ul:after { 
 content: ;
 display: table;

}

  1. cssmenu:after,
  2. cssmenu > ul:after { 
 clear: both;

}

  1. cssmenu { 
 zoom: 1;
 height: 69px;
 background: url(http://cssmenumaker.com/sites/default/files/menu/146/bottom-bg.png) repeat-x center bottom;
 border-radius: 2px;
 width: auto;

}

  1. cssmenu ul { 
 background: url(http://cssmenumaker.com/sites/default/files/menu/146/nav-bg.png) repeat-x 0px 4px;
 height: 69px;

}

  1. cssmenu ul li { 
 float: left;
 list-style: none;

}

  1. cssmenu ul li a { 
 display: block;
 height: 37px;
 padding: 22px 30px 0;
 margin: 4px 2px 0;
 border-radius: 2px 2px 0 0;
 text-decoration: none;
 font-size: 18px;
 color: white;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
 font-weight: 400;
 opacity: .9;

}

  1. cssmenu ul li:first-child a { 
 margin: 4px 2px 0 0;

}

  1. cssmenu ul li a:hover,
  2. cssmenu ul li.active a { 
 background: url(http://cssmenumaker.com/sites/default/files/menu/146/color.png) center bottom;
 display: block;
 height: 37px;
 margin-top: 0px;
 padding-top: 26px;
 color: #004f7c;
 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
 opacity: 1;

}

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