Team:TU Eindhoven/Notebook-css
From 2014.igem.org
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%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ 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; }
.notebookpage{
height: auto; width: auto;
}
.container {
z-index: -1; position: relative; background-color: #fff; top:10%; height: 100%;
}
.btn {
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position: relative; display: inline-block; padding: 10px 20px; height: 50px; background-color: #666; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; line-height: 30px; font-size: 16px; font-weight: bold; text-shadow: 0px 1px 1px #888;
}
a.btn span.btn { position: absolute; top: 4px; left: 0; z-index: -1; width: 100%; background-color: #444; } .btn:active, .btn:active > span.btn{ top: 2px; } .btn.active, .btn.active > span.btn { top: 2px; }
.btn-small {
height: 30px; font-size: 12px; line-height: 10px;
}
a.btn-small span.btn { height: 30px; }
/* Menu Styles */
.menu {
width: 100%; height: auto; background-color: #00BAC6; z-index: 2; padding-bottom:20px;
}
.menu .slider { position: relative; left: 5%; width: 90%; text-align: center;
} .menu .slider .bar, .menu .slider .bar .before { height: 20px; transition: .5s; -webkit-transition: .5s; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } .menu .slider .bar { position: relative; left: 3px; width: 100%; background-color: #777;
} .menu .slider .bar .before { width: 100px; float: left; position: relative; left: -3px; background-color: #00BAC6; } .menu .slider .bar a.knob { position: absolute; top: -5px; left: 0; margin: 0; display: block; width: 30px; height: 30px; background-color: #25758b;
border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; transition: .5s; -webkit-transition: .5s; } .menu ul { height: 100%; display: inline-block; margin: 20px 0 15px 0; } .menu ul li { margin: 0 10px; font-size: 0.9em; font-weight: bold; float: left; } .menu ul li a {color: #c9c9c9; margin: 0; text-decoration:none;}
.menu ul li:hover a {color: #ffffff} .menu ul li a:active {color: #ffffff}