Difference between revisions of "Template:Harvard BioDesign/CSS"

Line 1: Line 1:
−
            div {
+
/* http://meyerweb.com/eric/tools/css/reset/
−
                font-family: Helvetica, Arial, sans-serif;
+
  v2.0 | 20110126
−
                box-sizing: border-box;
+
  License: none (public domain)
−
            }
+
*/
−
            .timeline {
+
 
−
                width: 400px;
+
html, body, div, span, applet, object, iframe,
−
            }
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
            .timeline .timeline-item {
+
a, abbr, acronym, address, big, cite, code,
−
                width: 100%;
+
del, dfn, em, img, ins, kbd, q, s, samp,
−
            }
+
small, strike, strong, sub, sup, tt, var,
−
            .timeline .timeline-item .info, .timeline .timeline-item .year {
+
b, u, i, center,
−
                color: #eee;
+
dl, dt, dd, ol, ul, li,
−
                display: block;
+
fieldset, form, label, legend,
−
                float:left;
+
table, caption, tbody, tfoot, thead, tr, th, td,
−
                -webkit-transition: all 1s ease;
+
article, aside, canvas, details, embed,
−
                -moz-transition: all 1s ease;
+
figure, figcaption, footer, header, hgroup,  
−
                transition: all 1s ease;
+
menu, nav, output, ruby, section, summary,
−
            }
+
time, mark, audio, video {
−
            .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
+
margin: 0;
−
                color: #ccc;
+
padding: 0;
−
                -webkit-transition: all 1s ease;
+
border: 0;
−
                -moz-transition: all 1s ease;
+
font-size: 100%;
−
                transition: all 1s ease;
+
font: inherit;
−
            }
+
vertical-align: baseline;
−
            .timeline .timeline-item .year {
+
}
−
                font-size: 24px;
+
/* HTML5 display-role reset for older browsers */
−
                font-weight: bold;
+
article, aside, details, figcaption, figure,
−
                width: 22%;
+
footer, header, hgroup, menu, nav, section, main {
−
            }
+
display: block;
−
            .timeline .timeline-item .info {
+
}
−
                width: 100%;
+
body {
−
                width: 78%;
+
line-height: 1;
−
                margin-left: -2px;
+
}
−
                padding: 0 0 40px 35px;
+
ol, ul {
−
                border-left: 4px solid #aaa;
+
list-style: none;
−
                font-size: 14px;
+
}
−
                line-height: 20px;
+
blockquote, q {
−
            }
+
quotes: none;
−
            .timeline .timeline-item .marker {
+
}
−
                background-color: #fff;
+
blockquote:before, blockquote:after,
−
                border: 4px solid #aaa;
+
q:before, q:after {
−
                height: 20px;
+
content: '';
−
                width: 20px;
+
content: none;
−
                border-radius: 100px;
+
}
−
                display: block;
+
table {
−
                float: right;
+
border-collapse: collapse;
−
                margin-right: -14px;
+
border-spacing: 0;
−
                z-index: 2000;
+
}
−
                position: relative;
+
−
            }
+
−
            .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
+
−
                color: #444;
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
            }
+
−
            .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
+
−
                color: #9DB668;
+
−
            }
+
−
            .timeline .timeline-item .marker .dot {
+
−
                background-color: white;
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
                display: block;
+
−
                border: 4px solid white;
+
−
                height: 12px;
+
−
                width: 12px;
+
−
                border-radius: 100px;
+
−
                float: right;
+
−
                z-index: 2000;
+
−
                position: relative;
+
−
            }
+
−
            .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
                background-color: #9DB668;
+
−
                box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
+
−
            }
+

Revision as of 15:08, 3 July 2015

/* http://meyerweb.com/eric/tools/css/reset/ 

  v2.0 | 20110126
  License: none (public domain)
  • /

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, main { 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; }