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; }
/* CSS RESET DONE */
.notebookpage{
height: auto; width: auto;
}
html,body { height: 100% } min-height: 100% body {
color: #fff; margin: 0 auto; font: 1em/1.3em Helvetica, sans-serif;
background-color: #333; } .header {
margin-bottom: 100px;
} .header_btm{ background: url('https://static.igem.org/mediawiki/2014/b/b9/Footer_bg_TU_Eindhoven.png'); height: auto; } .clearfix {
clear: both;
}
.container {
z-index: 1; position: relative; background-color: #f4d432;
padding-top: 15%;
text-align: center; height: 100%;
}
.container.notebook { background-color: #0B2161; } .container.february { background-color: #0431B4; } .container.march { background-color: #819FF7; } .container.april { background-color: #013ADF; } .container.may { background-color: #8181F7; } .container.june { background-color: #08088A; } .container.july { background-color: #A9E2F3;
}
.container.august { background-color: #81BEF7; } .container.september { background-color: #0040FF; } .container.october { background-color: #00BFFF; }
h1 {
margin: 0px; font-size: 40px; line-height: 40px; font-weight: bold; text-shadow: 0px 1px 1px #888;
} a {
text-decoration: none; color: #fff; margin: 0 10px;
}
.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%; position: fixed; height: auto; background-color: #fff;
opacity: 0.8;
top: auto; left: 0; z-index: 2; padding-top: 75px;
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; } .menu .slider .bar a.knob { position: absolute; top: -5px; left: 0; margin: 0; display: block; width: 30px; height: 30px; background-color: #ccc;
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: 12px; font-weight: bold; float: left; } .menu ul li a { color: #444; margin: 0; }