Team:TU Eindhoven/Notebook-css
From 2014.igem.org
Line 45: | Line 45: | ||
/* CSS RESET DONE */ | /* CSS RESET DONE */ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
.notebookpage{ | .notebookpage{ | ||
height: auto; | height: auto; | ||
Line 92: | Line 60: | ||
} | } | ||
.header { | .header { | ||
- | margin-bottom:100px; | + | margin-bottom: 100px; |
} | } | ||
.header_btm{ | .header_btm{ | ||
Line 100: | Line 68: | ||
.clearfix { | .clearfix { | ||
clear: both; | clear: both; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 109: | Line 73: | ||
z-index: 1; | z-index: 1; | ||
position: relative; | position: relative; | ||
- | background-color: # | + | background-color: #f4d432; |
- | padding-top: | + | padding-top: 15%; |
text-align: center; | text-align: center; | ||
height: 100%; | height: 100%; | ||
} | } | ||
.container.notebook { | .container.notebook { | ||
- | background-color: # | + | background-color: #0B2161; |
} | } | ||
.container.february { | .container.february { | ||
- | background-color: # | + | background-color: #0431B4; |
} | } | ||
.container.march { | .container.march { | ||
- | background-color: # | + | background-color: #819FF7; |
} | } | ||
.container.april { | .container.april { | ||
- | background-color: # | + | background-color: #013ADF; |
} | } | ||
.container.may { | .container.may { | ||
- | background-color: # | + | background-color: #8181F7; |
} | } | ||
.container.june { | .container.june { | ||
- | background-color: # | + | background-color: #08088A; |
} | } | ||
.container.july { | .container.july { | ||
- | background-color: # | + | background-color: #A9E2F3; |
} | } | ||
.container.august { | .container.august { | ||
- | background-color: # | + | background-color: #81BEF7; |
} | } | ||
.container.september { | .container.september { | ||
- | background-color: # | + | background-color: #0040FF; |
} | } | ||
.container.october { | .container.october { | ||
- | background-color: # | + | background-color: #00BFFF; |
} | } | ||
Line 213: | Line 177: | ||
height: auto; | height: auto; | ||
background-color: #fff; | background-color: #fff; | ||
- | + | opacity: 0.8; | |
- | + | top: auto; | |
left: 0; | left: 0; | ||
z-index: 2; | z-index: 2; | ||
- | padding-top: | + | padding-top: 75px; |
- | + | padding-bottom: 20px; | |
} | } | ||
.menu .slider { | .menu .slider { | ||
Line 249: | Line 213: | ||
position: relative; | position: relative; | ||
left: -3px; | left: -3px; | ||
- | |||
} | } | ||
.menu .slider .bar a.knob { | .menu .slider .bar a.knob { | ||
Line 259: | Line 222: | ||
width: 30px; | width: 30px; | ||
height: 30px; | height: 30px; | ||
- | background-color: # | + | background-color: #ccc; |
border-radius: 15px; | border-radius: 15px; |
Revision as of 09:47, 21 July 2014
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; }