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 */
.top_bg{ background: url('https://static.igem.org/mediawiki/2014/2/27/Background_TU_Eindhoven.jpg'); background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:fixed;
width: 100%; position: fixed; height: auto;
top: auto; left: 0; z-index: 3;
} .top{ padding: 4% 8%; } .top h2{ font-size: 2em; color: #ffffff;
} } .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;
} .infotext{ text-align: left; padding-left:8% } .infotext h2{ font-weight:bold; }
.container {
z-index: -1; position: relative; background-color: #fff;
padding-top: 380px; top:10%;
text-align: center; height: 100%;
}
.container.notebook { background-color: #ffffff; } .container.january { background-color: #ffffff; } .container.february { background-color: #ffffff; } .container.march { background-color: #ffffff; } .container.april { background-color: #ffffff; } .container.may { background-color: #ffffff; } .container.june { background-color: #ffffff; } .container.july { background-color: #ffffff;
}
.container.august { background-color: #ffffff; } .container.september { background-color: #ffffff; } .container.october { background-color: #ffffff; }
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;
margin-top: inherit;
background-color: #DFEDF7;
opacity: 0.8;
top: 18%; left: 0; z-index: 2;
padding-bottom:20px;
padding-top: 120px;
}
.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: #1c5d73;
} .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: 12px; font-weight: bold; float: left; } .menu ul li a { color: #444; margin: 0; }