Team:TU Eindhoven/Style:NavPanel

From 2014.igem.org

Revision as of 20:08, 1 September 2014 by Rafiqlubken (Talk | contribs)

/*Start Initialization*/

/*Start Initialization*/

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,dl,dt,dd,ol,nav,ul,nav,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;

}

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

  display: block;

}

ol,ul { 

  list-style:none;
  margin:0;
  padding:0;

}

/*End Initialization*/


/* Removing iGEM Style */

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

}

  1. content {

font-family: 'Open Sans', sans-serif; 

  width: auto;
  padding:0px;
  border: none;
  background:none;

}

  1. globalWrapper {

width: auto; 

  padding:0px;

}


/* Customizing standard iGEM navigation panel */

  1. iGEMLOGO{

position: absolute; right: 10px; top: 15px; }

  1. iGEMLOGO:hover{

color: #00BAC6; 

       text-decoration: none;

}

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

  border-top: none;

}

  1. menubar { 
  display: table-cell;
  width:100px;
  height: 19px;
  opacity:0;
  padding-top:5px;
  background:none;

}


  1. menubar:hover{ 
  display: table-cell;
  width:100px;
  height: auto;
  opacity:1;
  font-size: 14px;
  padding-top:5px;
  background:none;

}

  1. menubar.left-menu { 
  padding-left:2%

}

  1. menubar.right-menu { 
  text-align: right;
  padding-right:8%;
  padding-top:5px;

}

  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: #00BAC6;
  text-decoration: none;

}

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

}

a 

  {text-decoration:none;}

.txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body { 

  background:  white;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;}

.header_btm{

background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png'); height: auto; } .header_sub{ padding: 2% 8% 2%; width:auto; }


/* start menu */

.h_menu{ float:left;


} .h_menu ul li{ margin-right:20px; float: left;

} .h_menu ul li.active a{ color: #00BAC6;

} .h_menu ul li a{ display:block; padding: 25px 10px; text-transform: uppercase; font-size: 0.925em; color:#c9c9c9; font-weight: 600; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;

} .h_menu ul li a:hover{ color: #00BAC6; 

       text-decoration: none;

}


/*Start TU Eindhoven 2014 Menu Customization*/

  1. cssmenu { 
 background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png');
 margin: 0;
 width: auto;
 height:auto;
 line-height: 1;
 display: block;
 padding: 1% 6%;
 position: relative;
 font-family: 'Open Sans', sans-serif;
 z-index:100;

}

  1. cssmenu ul { 
 list-style: none;
 height:auto;
 margin: 0;
 display: block;

}

  1. cssmenu ul:after,
  2. cssmenu:after { 
 content: " ";
 display: block;
 font-size: 0;
 height: 0;
 clear: both;
 visibility: hidden;

}

  1. cssmenu ul li { 
 margin: 0;
 padding: 0% 1%;
 display: block;
 position: relative;

}

  1. cssmenu ul li a { 
 text-decoration: none;
 display: block;
 margin: 0;
 -webkit-transition: color .4s ease;
 -moz-transition: color .4s ease;
 -ms-transition: color .4s ease;
 -o-transition: color .4s ease;
 transition: color .4s ease;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

  1. cssmenu ul li ul { 
 position: absolute;
 left: -9999px;
 top: auto;
 z-index:50;

}

  1. cssmenu ul li ul li { 
 max-height: 0;
 position: absolute;
 -webkit-transition: max-height 0.3s ease-out;
 -moz-transition: max-height 0.3s ease-out;
 -ms-transition: max-height 0.3s ease-out;
 -o-transition: max-height 0.3s ease-out;
 transition: max-height 0.3s ease-out;
 background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png')

}

  1. cssmenu ul li ul li a { 
 font-size: 0.9em;
 font-weight: 400;
 text-transform: none;
 color: #c9c9c9;
 letter-spacing: 0;
 display: block;
 padding: 10% 15%;
 -webkit-transition: color .4s ease;
 -moz-transition: color .4s ease;
 -ms-transition: color .4s ease;
 -o-transition: color .4s ease;
 transition: color .4s ease;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

  1. cssmenu ul li ul li:hover > ul { 
 left: 100%;
 top: 0;

}

  1. cssmenu ul li ul li:hover > ul > li { 
 max-height: 72px;
 position: relative;

}

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

}

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

}

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

}

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

}

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

}

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

}

  1. cssmenu.align-right ul ul li:hover > ul { 
 right: 100%;
 left: auto;

}

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

}

  1. cssmenu > ul > li:after { 
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 0;
 top: 0;
 z-index: 0;
 background: none;
 -webkit-transition: height .2s;
 -moz-transition: height .2s;
 -ms-transition: height .2s;
 -o-transition: height .2s;
 transition: height .2s;

}

  1. cssmenu > ul > li > a { 
 color: #c9c9c9;
 padding: 15px 20px;
 font-weight: 700;
 letter-spacing: 1px;
 text-transform: uppercase;
 font-size: 1.1em;
 z-index: 50;
 position: relative;

}

  1. cssmenu > ul > li:hover:after,
  2. cssmenu > ul > li:active:after { 
 height: 100%;

}

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

}

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

}

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

}

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

}

  1. cssmenu > ul > li:hover > ul > li { 
 max-height: 72px;
 position: relative;

}

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

}

  1. cssmenu > ul > li > a { 
 display: block;

}

  1. cssmenu > ul > li { 
 width: auto;

}

  1. cssmenu > ul > li.has-sub > ul { 
 width: 150%;
 display: block;

}

  1. cssmenu > ul > li.has-sub > ul > li.has-sub > ul { 
 width: 100%;
 display: block;

}

Retrieved from "http://2014.igem.org/Team:TU_Eindhoven/Style:NavPanel"