Team:TU Eindhoven/Style:NavPanel

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
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
+
html, body { height: 100%; }
-
  {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
+
html, body, div, span, applet, object, iframe,
-
 
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section
+
a, abbr, acronym, address, big, cite, code,
-
  {display: block;}
+
del, dfn, em, img, ins, kbd, q, s, samp,
-
 
+
small, strike, strong, sub, sup, tt, var,
-
ol,ul
+
b, u, i, center,
-
  {list-style:none;margin:0;padding:0;}
+
dl, dt, dd, ol, ul, li,
-
 
+
fieldset, form, label, legend,
-
blockquote,q
+
table, caption, tbody, tfoot, thead, tr, th, td,
-
  {quotes:none;}
+
article, aside, canvas, details, embed,
-
 
+
figure, figcaption, footer, header, hgroup,
-
blockquote:before,blockquote:after,q:before,q:after
+
menu, nav, output, ruby, section, summary,
-
  {content:'';content:none;}
+
time, mark, audio, video {
-
table
+
margin: 0;
-
  {border-collapse:collapse;border-spacing:0;}
+
padding: 0;
-
 
+
border: 0;
-
/* Removing iGEM style */
+
font-size: 100%;
-
 
+
vertical-align: baseline;
-
#searchInput, #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
+
-
  display: none;
+
}
}
-
 
+
-
#content {
+
article, aside, details, figcaption, figure,
-
 
+
footer, header, hgroup, menu, nav, section {
-
  width: auto;
+
display: block;
-
  padding:0px;
+
-
  border: none;
+
-
  background:none;
+
}
}
-
 
+
body {
-
#globalWrapper {
+
line-height: 1;
-
  padding:0px;
+
}
}
-
 
+
ol, ul {
-
 
+
list-style: none;
-
/* Customizing standard iGEM navigation panel */
+
-
 
+
-
#top-section{
+
-
  height:auto;
+
-
  width: 100%;
+
-
  border: none;
+
-
 
+
-
  border-top: none;
+
}
}
-
 
+
blockquote, q {
-
#menubar {
+
quotes: none;
-
position:fixed;
+
-
  display: table-cell;
+
-
  width:100px;
+
-
  height: 19px;
+
-
  opacity:0;
+
-
  padding-top:5px;
+
-
  background:none;
+
-
 
+
}
}
-
 
+
blockquote:before, blockquote:after,
-
 
+
q:before, q:after {
-
#menubar:hover{
+
content: '';
-
  display: table-cell;
+
content: none;
-
  width:100px;
+
-
  height: auto;
+
-
  opacity:1;
+
-
  font-size: 14px;
+
-
  padding-top:5px;
+
-
  background:none;
+
}
}
-
 
+
table {
-
#menubar.left-menu {
+
border-collapse: collapse;
-
  padding-left:2%
+
border-spacing: 0;
}
}
 +
-
#menubar.right-menu {
+
body { background:#eee; margin:0; }
-
  text-align: right;
+
-
  padding-right:8%;
+
a:link, a:visited, a:active { color: #3c9632; text-decoration: none; outline:none; }
-
  padding-top:5px;
+
a:hover { text-decoration: none; color: #34742d; }
-
}
+
-
#menubar.left-menu a {
 
-
  border: none;
 
-
  color: #454545;
 
-
}
 
-
#menubar.right-menu a {
+
body { font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #555; }
-
  border: none;
+
-
  color: #454545;
+
-
}
+
-
#menubar * {
+
h1, h2, h3, h4, p { margin:0 0 15px 0; padding:0; }
-
  background: transparent;
+
h1 { font-size:36px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; }
 +
h2 { font-size:28px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; padding:15px 0 0 0; }
 +
h3 { font-size:22px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; padding:15px 0 0 0; }
 +
h4 { font-size:16px; font-weight:normal; font-family:arial, sans-serif; color:#333; padding:15px 0 0 0; }
 +
p { line-height:1.5em }
-
}
+
.clr {clear:both; font-size:1px; height:1px; }
-
#menubar * a:hover{
+
/* float clearing for IE6 */
-
  color: #00BAC6;
+
* html .clearfix{ height: 1%; overflow: visible;}
-
  text-decoration: none;
+
/* float clearing for IE7 */
-
}
+
*+html .clearfix{ min-height: 1%;}
 +
/* float clearing for everyone else */
 +
.clearfix:after{ clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0;}
-
#menubar > ul > li:last-child {
+
#main { width:970px; margin:0 auto;  }
-
  display: none;
+
#content { padding:30px; background:#fff; min-height:500px; }
-
}
+
-
a
+
footer { padding:15px 0; font-size:11px; text-align:center; color:#777 }
-
  {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: 0 8%;
+
-
}
+
-
 
+
-
 
+
-
/* 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;
+
-
 
+
-
}
+

Revision as of 08:51, 16 July 2014

html, body { height: 100%; } 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, center, dl, dt, dd, ol, ul, 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; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }


body { background:#eee; margin:0; }

a:link, a:visited, a:active { color: #3c9632; text-decoration: none; outline:none; } a:hover { text-decoration: none; color: #34742d; }


body { font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #555; }

h1, h2, h3, h4, p { margin:0 0 15px 0; padding:0; } h1 { font-size:36px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; } h2 { font-size:28px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; padding:15px 0 0 0; } h3 { font-size:22px; font-weight:normal; font-family:arial, sans-serif; letter-spacing:-1px; color:#333; padding:15px 0 0 0; } h4 { font-size:16px; font-weight:normal; font-family:arial, sans-serif; color:#333; padding:15px 0 0 0; } p { line-height:1.5em }

.clr {clear:both; font-size:1px; height:1px; }

/* float clearing for IE6 */

  • html .clearfix{ height: 1%; overflow: visible;}

/* float clearing for IE7 */

  • +html .clearfix{ min-height: 1%;}

/* float clearing for everyone else */ .clearfix:after{ clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0;}

  1. main { width:970px; margin:0 auto; }

#content { padding:30px; background:#fff; min-height:500px; }

footer { padding:15px 0; font-size:11px; text-align:center; color:#777 }