Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1490 lines
34 KiB
1490 lines
34 KiB
/* |
|
Timeline |
|
Theme: Dark |
|
Copyright 2012 Zach Wise |
|
Designed and built by Zach Wise digitalartwork.net |
|
----------------------------------------------------- */ |
|
/* Reset.less |
|
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). |
|
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ |
|
#timeline h1, |
|
#timeline h2, |
|
#timeline h3, |
|
#timeline h4, |
|
#timeline h5, |
|
#timeline h6, |
|
#timeline p, |
|
#timeline blockquote, |
|
#timeline pre, |
|
#timeline a, |
|
#timeline abbr, |
|
#timeline acronym, |
|
#timeline address, |
|
#timeline cite, |
|
#timeline code, |
|
#timeline del, |
|
#timeline dfn, |
|
#timeline em, |
|
#timeline img, |
|
#timeline q, |
|
#timeline s, |
|
#timeline samp, |
|
#timeline small, |
|
#timeline strike, |
|
#timeline strong, |
|
#timeline sub, |
|
#timeline sup, |
|
#timeline tt, |
|
#timeline var, |
|
#timeline dd, |
|
#timeline dl, |
|
#timeline dt, |
|
#timeline li, |
|
#timeline ol, |
|
#timeline ul, |
|
#timeline fieldset, |
|
#timeline form, |
|
#timeline label, |
|
#timeline legend, |
|
#timeline button, |
|
#timeline table, |
|
#timeline caption, |
|
#timeline tbody, |
|
#timeline tfoot, |
|
#timeline thead, |
|
#timeline tr, |
|
#timeline th, |
|
#timeline td { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
font-weight: normal; |
|
font-style: normal; |
|
font-size: 100%; |
|
line-height: 1; |
|
font-family: inherit; |
|
} |
|
#timeline table { |
|
border-collapse: collapse; |
|
border-spacing: 0; |
|
} |
|
#timeline ol, |
|
#timeline ul { |
|
list-style: none; |
|
} |
|
#timeline q:before, |
|
#timeline q:after, |
|
#timeline blockquote:before, |
|
#timeline blockquote:after { |
|
content: ""; |
|
} |
|
#timeline a:focus { |
|
outline: thin dotted; |
|
} |
|
#timeline a:hover, |
|
#timeline a:active { |
|
outline: 0; |
|
} |
|
#timeline article, |
|
#timeline aside, |
|
#timeline details, |
|
#timeline figcaption, |
|
#timeline figure, |
|
#timeline footer, |
|
#timeline header, |
|
#timeline hgroup, |
|
#timeline nav, |
|
#timeline section { |
|
display: block; |
|
} |
|
#timeline audio, |
|
#timeline canvas, |
|
#timeline video { |
|
display: inline-block; |
|
*display: inline; |
|
*zoom: 1; |
|
} |
|
#timeline audio:not([controls]) { |
|
display: none; |
|
} |
|
#timeline div { |
|
max-width: none; |
|
} |
|
#timeline sub, |
|
#timeline sup { |
|
font-size: 75%; |
|
line-height: 0; |
|
position: relative; |
|
vertical-align: baseline; |
|
} |
|
#timeline sup { |
|
top: -0.5em; |
|
} |
|
#timeline sub { |
|
bottom: -0.25em; |
|
} |
|
#timeline img { |
|
border: 0; |
|
-ms-interpolation-mode: bicubic; |
|
} |
|
#timeline button, |
|
#timeline input, |
|
#timeline select, |
|
#timeline textarea { |
|
font-size: 100%; |
|
margin: 0; |
|
vertical-align: baseline; |
|
*vertical-align: middle; |
|
} |
|
#timeline button, |
|
#timeline input { |
|
line-height: normal; |
|
*overflow: visible; |
|
} |
|
#timeline button::-moz-focus-inner, |
|
#timeline input::-moz-focus-inner { |
|
border: 0; |
|
padding: 0; |
|
} |
|
#timeline button, |
|
#timeline input[type="button"], |
|
#timeline input[type="reset"], |
|
#timeline input[type="submit"] { |
|
cursor: pointer; |
|
-webkit-appearance: button; |
|
} |
|
#timeline input[type="search"] { |
|
-webkit-appearance: textfield; |
|
-webkit-box-sizing: content-box; |
|
-moz-box-sizing: content-box; |
|
box-sizing: content-box; |
|
} |
|
#timeline input[type="search"]::-webkit-search-decoration { |
|
-webkit-appearance: none; |
|
} |
|
#timeline textarea { |
|
overflow: auto; |
|
vertical-align: top; |
|
} |
|
/* |
|
FONT |
|
Default |
|
------------------------------------------------------------------------------------------- */ |
|
#timeline { |
|
font-family: "Georgia", Times New Roman, Times, serif; |
|
} |
|
#timeline .twitter, |
|
#timeline .messege, |
|
#timeline .credit, |
|
#timeline .caption, |
|
#timeline h1.date, |
|
#timeline h2.date, |
|
#timeline h3.date, |
|
#timeline h4.date, |
|
#timeline h5.date, |
|
#timeline h6.date, |
|
#timeline .era h3, |
|
#timeline .flag-content h3, |
|
#timeline .flag-content h4, |
|
#timeline .time-interval div, |
|
#timeline .time-interval-major div, |
|
#timeline .zoom-in, |
|
#timeline .zoom-out, |
|
#timeline .back-home { |
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
} |
|
#timeline p, |
|
#timeline blockquote, |
|
#timeline .twitter blockquote p { |
|
font-family: "Georgia", Times New Roman, Times, serif; |
|
} |
|
/* VARIABLES |
|
----------------------------------------------------- */ |
|
/* COLORS |
|
================================================== */ |
|
/* COLOR SCHEME |
|
================================================== */ |
|
/* CLEANUP IN PROGRESS |
|
================================================== */ |
|
/* Sizes |
|
================================================== */ |
|
/* Mixins.less |
|
* Snippets of reusable CSS to develop faster and keep code readable |
|
* ----------------------------------------------------------------- */ |
|
/* |
|
GFX |
|
Base64 Icons etc |
|
----------------------------------------------------------------- */ |
|
/* |
|
* VMM Timeline Core |
|
* Basic and global styles for generating structural layout |
|
* ------------------------------------------------------------------------------------------- */ |
|
/* TIMELINE EMBED |
|
================================================== */ |
|
#timeline-embed { |
|
background-color: #ffffff; |
|
margin-bottom: 20px; |
|
border: 1px solid #cccccc; |
|
padding-top: 20px; |
|
padding-bottom: 20px; |
|
clear: both; |
|
-webkit-border-radius: 10px; |
|
-moz-border-radius: 10px; |
|
border-radius: 10px; |
|
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); |
|
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); |
|
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25); |
|
} |
|
/* TIMELINE |
|
================================================== */ |
|
#timeline { |
|
width: 100%; |
|
height: 100%; |
|
padding: 0px; |
|
margin: 0px; |
|
background-color: #ffffff; |
|
position: absolute; |
|
z-index: 100; |
|
clear: both; |
|
overflow: hidden; |
|
/* FEATURE |
|
================================================== */ |
|
|
|
/* FEEDBACK |
|
================================================== */ |
|
|
|
/* Container |
|
================================================== */ |
|
|
|
} |
|
#timeline .hyphenate { |
|
white-space: nowrap; |
|
width: 200px; |
|
overflow: hidden; |
|
display: inline-block; |
|
height: 20px; |
|
} |
|
#timeline .feature { |
|
width: 100%; |
|
} |
|
#timeline .feature .slider { |
|
width: 100%; |
|
float: left; |
|
position: relative; |
|
z-index: 10; |
|
padding-top: 15px; |
|
-webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); |
|
-moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); |
|
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); |
|
} |
|
#timeline .feedback { |
|
position: absolute; |
|
display: table; |
|
overflow: hidden; |
|
top: 0px; |
|
left: 0px; |
|
z-index: 205; |
|
width: 100%; |
|
height: 100%; |
|
background-color: #e9e9e9; |
|
border: 1px solid #cccccc; |
|
} |
|
#timeline .feedback .messege { |
|
display: table-cell; |
|
vertical-align: middle; |
|
font-size: 28px; |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
line-height: 36px; |
|
width: 75%; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-top: auto; |
|
margin-bottom: auto; |
|
text-align: center; |
|
} |
|
#timeline .container.main { |
|
position: absolute; |
|
top: 0px: |
|
left:0px; |
|
padding-bottom: 3px; |
|
width: auto; |
|
height: auto; |
|
margin: 0px; |
|
clear: both; |
|
} |
|
#timeline img, |
|
#timeline embed, |
|
#timeline object, |
|
#timeline video, |
|
#timeline iframe { |
|
max-width: 100%; |
|
} |
|
#timeline img { |
|
max-height: 100%; |
|
border: 1px solid #999999; |
|
} |
|
#timeline a { |
|
color: #0088cc; |
|
text-decoration: none; |
|
} |
|
#timeline a:hover { |
|
color: #005580; |
|
text-decoration: underline; |
|
} |
|
#timeline .twitter { |
|
text-align: left; |
|
background-color: #ffffff; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-bottom: 15px; |
|
clear: both; |
|
} |
|
#timeline .twitter blockquote { |
|
font-size: 15px; |
|
line-height: 20px; |
|
color: #666666; |
|
} |
|
#timeline .twitter blockquote p { |
|
font-size: 28px; |
|
line-height: 36px; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color: #ffffff; |
|
color: #000000; |
|
} |
|
#timeline .twitter blockquote .quote-mark { |
|
color: #666666; |
|
} |
|
#timeline .twitter .created-at { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -889px; |
|
width: 24px; |
|
height: 24px; |
|
width: 24px; |
|
height: 24px; |
|
overflow: hidden; |
|
margin-left: 15px; |
|
display: inline-block; |
|
float: right; |
|
filter: alpha(opacity=25); |
|
-khtml-opacity: 0.25; |
|
-moz-opacity: 0.25; |
|
opacity: 0.25; |
|
} |
|
#timeline .twitter .created-at:hover { |
|
filter: alpha(opacity=100); |
|
-khtml-opacity: 1; |
|
-moz-opacity: 1; |
|
opacity: 1; |
|
} |
|
#timeline .twitter .vcard { |
|
float: right; |
|
margin-bottom: 15px; |
|
} |
|
#timeline .twitter .vcard a { |
|
color: #333333; |
|
} |
|
#timeline .twitter .vcard a:hover { |
|
text-decoration: none; |
|
} |
|
#timeline .twitter .vcard a:hover .fn { |
|
text-decoration: underline; |
|
} |
|
#timeline .twitter .vcard .fn, |
|
#timeline .twitter .vcard .nickname { |
|
padding-left: 42px; |
|
} |
|
#timeline .twitter .vcard .fn { |
|
display: block; |
|
font-weight: bold; |
|
} |
|
#timeline .twitter .vcard .nickname { |
|
margin-top: 3px; |
|
display: block; |
|
color: #666666; |
|
} |
|
#timeline .twitter .vcard .avatar { |
|
float: left; |
|
display: block; |
|
width: 32px; |
|
height: 32px; |
|
} |
|
#timeline .twitter .vcard .avatar img { |
|
-moz-border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
border-radius: 5px; |
|
} |
|
#timeline .layout-media .twitter { |
|
max-width: 70%; |
|
} |
|
#timeline .thumbnail { |
|
width: 24px; |
|
height: 24px; |
|
overflow: hidden; |
|
float: left; |
|
margin-right: 5px; |
|
border: 1px solid #cccccc; |
|
} |
|
#timeline .thumbnail.twitter { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -889px; |
|
width: 24px; |
|
height: 24px; |
|
} |
|
#timeline .thumbnail.vimeo { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -963px; |
|
width: 24px; |
|
height: 24px; |
|
} |
|
#timeline .thumbnail.youtube { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -1111px; |
|
width: 24px; |
|
height: 24px; |
|
} |
|
#timeline .thumbnail.soundcloud { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -659px; |
|
width: 24px; |
|
height: 24px; |
|
} |
|
#timeline .thumbnail.map { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -514px; |
|
width: 26px; |
|
height: 21px; |
|
} |
|
#timeline .thumbnail.website { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -1037px; |
|
width: 24px; |
|
height: 24px; |
|
} |
|
#timeline .zFront { |
|
z-index: 204; |
|
} |
|
/* Slider |
|
------------------------------------------------------------------------------------------- */ |
|
/* SLIDER CONTAINERS |
|
================================================== */ |
|
.slider { |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
.slider .slider-container-mask { |
|
text-align: center; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
.slider .slider-container-mask .slider-container { |
|
position: absolute; |
|
top: 0px; |
|
left: -2160px; |
|
width: 100%; |
|
height: 100%; |
|
text-align: center; |
|
display: block; |
|
background-color: #ffffff; |
|
} |
|
.slider .slider-container-mask .slider-container .slider-item-container { |
|
display: table-cell; |
|
vertical-align: middle; |
|
} |
|
/* SLIDER ELEMENTS |
|
================================================== */ |
|
.slider img, |
|
.slider embed, |
|
.slider object, |
|
.slider video, |
|
.slider iframe { |
|
max-width: 100%; |
|
} |
|
/* SLIDER NAV |
|
================================================== */ |
|
.slider .nav-previous, |
|
.slider .nav-next { |
|
position: absolute; |
|
top: 0px; |
|
width: 100px; |
|
color: #DBDBDB; |
|
font-size: 11px; |
|
} |
|
.slider .nav-previous .nav-container, |
|
.slider .nav-next .nav-container { |
|
height: 100px; |
|
position: absolute; |
|
} |
|
.slider .nav-previous .icon, |
|
.slider .nav-next .icon { |
|
margin-bottom: 15px; |
|
} |
|
.slider .nav-previous .date, |
|
.slider .nav-next .date { |
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
font-size: 15px; |
|
font-weight: bold; |
|
line-height: #e9e9e9; |
|
text-transform: uppercase; |
|
margin-bottom: 5px; |
|
} |
|
.slider .nav-previous .date, |
|
.slider .nav-next .date, |
|
.slider .nav-previous .title, |
|
.slider .nav-next .title { |
|
line-height: 14px; |
|
} |
|
.slider .nav-previous .date a, |
|
.slider .nav-next .date a, |
|
.slider .nav-previous .title a, |
|
.slider .nav-next .title a { |
|
color: #999999; |
|
} |
|
.slider .nav-previous .date small, |
|
.slider .nav-next .date small, |
|
.slider .nav-previous .title small, |
|
.slider .nav-next .title small { |
|
display: none; |
|
} |
|
.slider .nav-previous:hover, |
|
.slider .nav-next:hover { |
|
color: #333333; |
|
cursor: pointer; |
|
} |
|
.slider .nav-previous { |
|
float: left; |
|
text-align: left; |
|
} |
|
.slider .nav-previous .icon { |
|
margin-left: 10px; |
|
padding-left: 20px; |
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%; |
|
} |
|
.slider .nav-previous .date, |
|
.slider .nav-previous .title { |
|
text-align: left; |
|
padding-left: 10px; |
|
} |
|
.slider .nav-previous:hover .icon { |
|
margin-left: 5px; |
|
padding-left: 20px; |
|
} |
|
.slider .nav-next { |
|
float: right; |
|
text-align: right; |
|
} |
|
.slider .nav-next .icon { |
|
margin-right: 10px; |
|
padding-right: 20px; |
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%; |
|
} |
|
.slider .nav-next .date, |
|
.slider .nav-next .title { |
|
text-align: right; |
|
padding-right: 10px; |
|
} |
|
.slider .nav-next:hover .icon { |
|
margin-right: 5px; |
|
padding-right: 20px; |
|
} |
|
/* SLIDE CONTENT |
|
================================================== */ |
|
.slider .slider-item { |
|
position: absolute; |
|
width: 700px; |
|
height: 100%; |
|
padding: 0px; |
|
margin: 0px; |
|
overflow: hidden; |
|
display: table; |
|
/* Text Only Slides |
|
================================================== */ |
|
|
|
/* Media Only Slides |
|
================================================== */ |
|
|
|
} |
|
.slider .slider-item .content { |
|
display: table-cell; |
|
vertical-align: middle; |
|
/* All Slides |
|
================================================== */ |
|
|
|
} |
|
.slider .slider-item .content .content-container { |
|
display: table; |
|
vertical-align: middle; |
|
} |
|
.slider .slider-item .content .content-container .text { |
|
width: 40%; |
|
max-width: 50%; |
|
min-width: 120px; |
|
display: table-cell; |
|
vertical-align: middle; |
|
} |
|
.slider .slider-item .content .content-container .text .container { |
|
display: table-cell; |
|
vertical-align: middle; |
|
text-align: left; |
|
padding-right: 15px; |
|
} |
|
.slider .slider-item .content .content-container .media { |
|
width: 100%; |
|
min-width: 50%; |
|
float: left; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper { |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container { |
|
display: inline-block; |
|
overflow: hidden; |
|
line-height: 0px; |
|
padding: 0px; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container img, |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container iframe { |
|
border: 1px solid #cccccc; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map { |
|
line-height: normal; |
|
border: 1px solid #cccccc; |
|
z-index: 200; |
|
text-align: left; |
|
background-color: #ffffff; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map img { |
|
max-height: none !important; |
|
max-width: none !important; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .google-map { |
|
height: 100%; |
|
width: 100%; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution { |
|
position: absolute; |
|
z-index: 201; |
|
bottom: 0px; |
|
width: 100%; |
|
overflow: hidden; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text { |
|
height: 19px; |
|
overflow: hidden; |
|
-webkit-user-select: none; |
|
line-height: 19px; |
|
margin-right: 60px; |
|
padding-left: 65px; |
|
font-family: Arial, sans-serif; |
|
font-size: 10px; |
|
color: #444; |
|
white-space: nowrap; |
|
color: #ffffff; |
|
text-shadow: 1px 1px 1px #333333; |
|
text-align: center; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a { |
|
color: #ffffff !important; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .credit { |
|
color: #999999; |
|
text-align: right; |
|
font-size: 10px; |
|
line-height: 10px; |
|
display: block; |
|
margin: 0 auto; |
|
margin-top: 4px; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .caption { |
|
text-align: left; |
|
margin-top: 10px; |
|
color: #666666; |
|
font-size: 11px; |
|
line-height: 14px; |
|
} |
|
.slider .slider-item .content .media.text-media .media-wrapper .media-container { |
|
border: none; |
|
background-color: #ffffff; |
|
} |
|
.slider .slider-item .content-container.layout-text { |
|
width: 100%; |
|
} |
|
.slider .slider-item .content-container.layout-text .text { |
|
width: 100%; |
|
max-width: 100%; |
|
} |
|
.slider .slider-item .content-container.layout-text .text .container { |
|
display: block; |
|
vertical-align: middle; |
|
text-align: left; |
|
padding: 0px; |
|
width: 90%; |
|
text-align: left; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
.slider .slider-item .content-container.layout-media { |
|
width: 100%; |
|
} |
|
.slider .slider-item .content-container.layout-media .text { |
|
width: 100%; |
|
height: 100%; |
|
max-width: 100%; |
|
display: block; |
|
text-align: center; |
|
} |
|
.slider .slider-item .content-container.layout-media .text .container { |
|
display: block; |
|
text-align: center; |
|
width: 100%; |
|
margin-left: none; |
|
margin-right: none; |
|
} |
|
.slider .slider-item .content-container.layout-media .media { |
|
width: 100%; |
|
min-width: 50%; |
|
float: none; |
|
} |
|
.slider .slider-item .content-container.layout-media .media .media-wrapper { |
|
display: block; |
|
} |
|
.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container { |
|
margin-left: auto; |
|
margin-right: auto; |
|
overflow: hidden; |
|
line-height: 0px; |
|
padding: 0px; |
|
} |
|
/* |
|
Navigation |
|
UI for Navigation |
|
------------------------------------------------------------------------------------------- */ |
|
#timeline .navigation { |
|
clear: both; |
|
cursor: move; |
|
width: 100%; |
|
height: 200px; |
|
border-top: 1px solid #cccccc; |
|
position: relative; |
|
} |
|
#timeline .navigation .toolbar { |
|
position: absolute; |
|
top: 45px; |
|
left: 0px; |
|
z-index: 202; |
|
background-color: #ffffff; |
|
border: 1px solid #cccccc; |
|
-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); |
|
box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); |
|
} |
|
#timeline .navigation .toolbar .zoom-in, |
|
#timeline .navigation .toolbar .zoom-out, |
|
#timeline .navigation .toolbar .back-home { |
|
font-weight: normal; |
|
font-size: 10px; |
|
line-height: 20px; |
|
top: 0px; |
|
z-index: 202; |
|
width: 18px; |
|
height: 18px; |
|
color: #333333; |
|
text-align: center; |
|
font-weight: bold; |
|
border: 1px solid #ffffff; |
|
padding: 5px; |
|
filter: alpha(opacity=50); |
|
-khtml-opacity: 0.5; |
|
-moz-opacity: 0.5; |
|
opacity: 0.5; |
|
} |
|
#timeline .navigation .toolbar .zoom-in:hover, |
|
#timeline .navigation .toolbar .zoom-out:hover, |
|
#timeline .navigation .toolbar .back-home:hover { |
|
color: #0088cc; |
|
cursor: pointer; |
|
filter: alpha(opacity=100); |
|
-khtml-opacity: 1; |
|
-moz-opacity: 1; |
|
opacity: 1; |
|
} |
|
#timeline .navigation .toolbar .zoom-in .icon { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -1507px; |
|
width: 16px; |
|
height: 16px; |
|
} |
|
#timeline .navigation .toolbar .zoom-out .icon { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -1647px; |
|
width: 16px; |
|
height: 16px; |
|
} |
|
#timeline .navigation .toolbar .back-home .icon { |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -1303px; |
|
width: 16px; |
|
height: 12px; |
|
} |
|
#timeline .navigation .timenav-background { |
|
position: absolute; |
|
cursor: move; |
|
top: 0px; |
|
left: 0px; |
|
height: 150px; |
|
width: 100%; |
|
background-color: #e9e9e9; |
|
} |
|
#timeline .navigation .timenav-background .timenav-interval-background { |
|
position: absolute; |
|
top: 151px; |
|
left: 0px; |
|
background: #ffffff; |
|
width: 100%; |
|
height: 49px; |
|
} |
|
#timeline .navigation .timenav-background .timenav-interval-background .top-highlight { |
|
position: absolute; |
|
top: -1px; |
|
left: 0px; |
|
z-index: 30; |
|
width: 100%; |
|
height: 1px; |
|
background: #ffffff; |
|
filter: alpha(opacity=50); |
|
-khtml-opacity: 0.5; |
|
-moz-opacity: 0.5; |
|
opacity: 0.5; |
|
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); |
|
} |
|
#timeline .navigation .timenav-background .timenav-line { |
|
position: absolute; |
|
top: 0px; |
|
left: 50%; |
|
width: 3px; |
|
height: 150px; |
|
background: #0088cc; |
|
z-index: 201; |
|
-webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); |
|
-moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); |
|
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); |
|
} |
|
#timeline .navigation .timenav { |
|
position: absolute; |
|
top: 0px; |
|
left: -250px; |
|
z-index: 1; |
|
} |
|
#timeline .navigation .timenav .content { |
|
position: relative; |
|
} |
|
#timeline .navigation .timenav .content .marker.start { |
|
display: none; |
|
} |
|
#timeline .navigation .timenav .content .marker.active .dot { |
|
background: #0088cc; |
|
z-index: 200; |
|
} |
|
#timeline .navigation .timenav .content .marker.active .line { |
|
z-index: 199; |
|
background: #0088cc; |
|
width: 1px; |
|
} |
|
#timeline .navigation .timenav .content .marker.active .line .event-line { |
|
background: #0088cc; |
|
filter: alpha(opacity=75); |
|
-khtml-opacity: 0.75; |
|
-moz-opacity: 0.75; |
|
opacity: 0.75; |
|
} |
|
#timeline .navigation .timenav .content .marker.active .flag { |
|
z-index: 200; |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -110px; |
|
width: 153px; |
|
height: 60px; |
|
} |
|
#timeline .navigation .timenav .content .marker.active .flag .flag-content h3 { |
|
color: #0088cc; |
|
} |
|
#timeline .navigation .timenav .content .marker.active .flag.row1, |
|
#timeline .navigation .timenav .content .marker.active .flag.row2, |
|
#timeline .navigation .timenav .content .marker.active .flag.row3 { |
|
z-index: 200; |
|
} |
|
#timeline .navigation .timenav .content .marker.active:hover { |
|
cursor: default; |
|
} |
|
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3 { |
|
color: #0088cc; |
|
} |
|
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4 { |
|
color: #999999; |
|
} |
|
#timeline .navigation .timenav .content .marker:hover .line { |
|
z-index: 201; |
|
background: #999999; |
|
} |
|
#timeline .navigation .timenav .content .marker { |
|
position: absolute; |
|
top: 0px; |
|
left: 150px; |
|
display: block; |
|
} |
|
#timeline .navigation .timenav .content .marker .dot { |
|
position: absolute; |
|
top: 150px; |
|
left: 0px; |
|
display: block; |
|
width: 6px; |
|
height: 6px; |
|
background: #333333; |
|
-webkit-border-radius: 3px; |
|
-moz-border-radius: 3px; |
|
border-radius: 3px; |
|
z-index: 21; |
|
} |
|
#timeline .navigation .timenav .content .marker .line { |
|
position: absolute; |
|
top: 0px; |
|
left: 3px; |
|
width: 1px; |
|
height: 150px; |
|
background: #cccccc; |
|
-moz-box-shadow: 1px 0 0 #ffffff; |
|
-webkit-box-shadow: 1px 0 0 #ffffff; |
|
box-shadow: 1px 0 0 #ffffff; |
|
z-index: 22; |
|
} |
|
#timeline .navigation .timenav .content .marker .line .event-line { |
|
position: absolute; |
|
z-index: 22; |
|
left: 0px; |
|
height: 1px; |
|
width: 1px; |
|
background: #0088cc; |
|
filter: alpha(opacity=15); |
|
-khtml-opacity: 0.15; |
|
-moz-opacity: 0.15; |
|
opacity: 0.15; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag { |
|
position: absolute; |
|
top: 15px; |
|
left: 3px; |
|
padding: 0px; |
|
display: block; |
|
z-index: 23; |
|
width: 153px; |
|
height: 56px; |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 0; |
|
width: 153px; |
|
height: 60px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag .flag-content { |
|
padding: 5px 7px 2px 5px; |
|
overflow: hidden; |
|
height: 33px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag .flag-content h3 { |
|
font-weight: bold; |
|
font-size: 15px; |
|
line-height: 20px; |
|
font-size: 11px; |
|
line-height: 11px; |
|
color: #999999; |
|
margin-bottom: 2px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag .flag-content h3 small { |
|
display: none; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag .flag-content h4 { |
|
display: none; |
|
font-weight: normal; |
|
font-size: 15px; |
|
line-height: 20px; |
|
font-size: 10px; |
|
line-height: 10px; |
|
color: #aaaaaa; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag .flag-content h4 small { |
|
display: none; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag .flag-content .thumbnail { |
|
margin-bottom: 15px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag:hover { |
|
cursor: pointer; |
|
background-image: url(timeline.png); |
|
background-repeat: no-repeat; |
|
background-position: 0 -110px; |
|
width: 153px; |
|
height: 60px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h3 { |
|
color: #333333; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h4 { |
|
color: #aaaaaa; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag.row1 { |
|
z-index: 25; |
|
top: 48px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag.row2 { |
|
z-index: 24; |
|
top: 96px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag.row3 { |
|
z-index: 23; |
|
top: 1px; |
|
} |
|
#timeline .navigation .timenav .content .marker .flag.zFront { |
|
z-index: 100; |
|
} |
|
#timeline .navigation .timenav .content .era { |
|
position: absolute; |
|
top: 138px; |
|
left: 150px; |
|
height: 12px; |
|
display: block; |
|
background: #0088cc; |
|
overflow: hidden; |
|
border-left: 1px solid #cccccc; |
|
border-right: 1px solid #cccccc; |
|
border-top: 1px solid #cccccc; |
|
filter: alpha(opacity=75); |
|
-khtml-opacity: 0.75; |
|
-moz-opacity: 0.75; |
|
opacity: 0.75; |
|
-moz-border-radius-topleft: 7px; |
|
-webkit-border-top-left-radius: 7px; |
|
border-top-left-radius: 7px; |
|
-moz-border-radius-topright: 7px; |
|
-webkit-border-top-right-radius: 7px; |
|
border-top-right-radius: 7px; |
|
z-index: -10; |
|
} |
|
#timeline .navigation .timenav .content .era h3 { |
|
font-weight: bold; |
|
font-size: 10px; |
|
line-height: 10px; |
|
color: #ffffff; |
|
position: absolute; |
|
top: -1px; |
|
left: 9px; |
|
} |
|
#timeline .navigation .timenav .time { |
|
position: absolute; |
|
left: 0px; |
|
top: 150px; |
|
height: 50px; |
|
background-color: #ffffff; |
|
} |
|
#timeline .navigation .timenav .time .time-interval-minor { |
|
max-width: none; |
|
height: 6px; |
|
white-space: nowrap; |
|
position: absolute; |
|
top: -9px; |
|
left: 8px; |
|
z-index: 10; |
|
} |
|
#timeline .navigation .timenav .time .time-interval-minor .minor { |
|
position: relative; |
|
top: 0px; |
|
display: inline-block; |
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
|
width: 100px; |
|
height: 6px; |
|
background-position: center top; |
|
white-space: nowrap; |
|
color: #666666; |
|
margin-top: 0px; |
|
padding-top: 0px; |
|
} |
|
#timeline .navigation .timenav .time .time-interval { |
|
white-space: nowrap; |
|
position: absolute; |
|
top: 5px; |
|
left: 0px; |
|
} |
|
#timeline .navigation .timenav .time .time-interval div { |
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
|
background-position: left top; |
|
background-repeat: no-repeat; |
|
padding-top: 3px; |
|
position: absolute; |
|
height: 3px; |
|
left: 0px; |
|
display: block; |
|
font-weight: normal; |
|
font-size: 10px; |
|
line-height: 20px; |
|
text-transform: uppercase; |
|
text-align: left; |
|
text-indent: 0px; |
|
white-space: nowrap; |
|
color: #666666; |
|
margin-left: 0px; |
|
margin-right: 0px; |
|
margin-top: 1px; |
|
z-index: 2; |
|
} |
|
#timeline .navigation .timenav .time .time-interval div strong { |
|
font-weight: bold; |
|
color: #000000; |
|
} |
|
#timeline .navigation .timenav .time .time-interval-major { |
|
white-space: nowrap; |
|
position: absolute; |
|
top: 5px; |
|
left: 0px; |
|
} |
|
#timeline .navigation .timenav .time .time-interval-major div { |
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
|
background-position: left top; |
|
background-repeat: no-repeat; |
|
padding-top: 15px; |
|
position: absolute; |
|
height: 15px; |
|
left: 0px; |
|
display: block; |
|
font-weight: bold; |
|
font-size: 12px; |
|
line-height: 20px; |
|
text-transform: uppercase; |
|
text-align: left; |
|
text-indent: 0px; |
|
white-space: nowrap; |
|
color: #333333; |
|
margin-left: 0px; |
|
margin-right: 0px; |
|
margin-top: 1px; |
|
z-index: 5; |
|
} |
|
#timeline .navigation .timenav .time .time-interval-major div strong { |
|
font-weight: bold; |
|
color: #000000; |
|
} |
|
/* Typography.less |
|
* Headings, body text, lists, etc |
|
* ---------------------------------------------------------------------------------------- */ |
|
#timeline { |
|
font-size: 15px; |
|
font-weight: normal; |
|
line-height: 20px; |
|
-webkit-font-smoothing: antialiased; |
|
/* Fix for webkit rendering */ |
|
|
|
-webkit-text-size-adjust: 100%; |
|
/* BLOCKQUOTES |
|
================================================== */ |
|
|
|
/* Caption and Credits |
|
================================================== */ |
|
|
|
} |
|
#timeline p { |
|
font-size: 15px; |
|
font-weight: normal; |
|
line-height: 20px; |
|
margin-bottom: 20px; |
|
color: #666666; |
|
} |
|
#timeline p small { |
|
font-size: 12px; |
|
line-height: 17px; |
|
} |
|
#timeline p:first-child { |
|
margin-top: 20px; |
|
} |
|
#timeline .navigation p { |
|
color: #999999; |
|
} |
|
#timeline .feature h3, |
|
#timeline .feature h4, |
|
#timeline .feature h5, |
|
#timeline .feature h6 { |
|
margin-bottom: 15px; |
|
} |
|
#timeline .feature p { |
|
color: #666666; |
|
} |
|
#timeline .date a, |
|
#timeline .title a { |
|
color: #999999; |
|
} |
|
#timeline h1, |
|
#timeline h2, |
|
#timeline h3, |
|
#timeline h4, |
|
#timeline h5, |
|
#timeline h6 { |
|
font-weight: normal; |
|
color: #000000; |
|
text-transform: none; |
|
} |
|
#timeline h1 a, |
|
#timeline h2 a, |
|
#timeline h3 a, |
|
#timeline h4 a, |
|
#timeline h5 a, |
|
#timeline h6 a { |
|
color: #999999; |
|
} |
|
#timeline h1 small, |
|
#timeline h2 small, |
|
#timeline h3 small, |
|
#timeline h4 small, |
|
#timeline h5 small, |
|
#timeline h6 small { |
|
color: #999999; |
|
} |
|
#timeline h1.date, |
|
#timeline h2.date, |
|
#timeline h3.date, |
|
#timeline h4.date, |
|
#timeline h5.date, |
|
#timeline h6.date { |
|
font-weight: bold; |
|
} |
|
#timeline h2.start { |
|
font-size: 42px; |
|
line-height: 44px; |
|
} |
|
#timeline h1 { |
|
margin-bottom: 15px; |
|
font-size: 32px; |
|
line-height: 34px; |
|
} |
|
#timeline h1 small { |
|
font-size: 18px; |
|
} |
|
#timeline h2 { |
|
margin-bottom: 15px; |
|
font-size: 28px; |
|
line-height: 30px; |
|
} |
|
#timeline h2 small { |
|
font-size: 14px; |
|
line-height: 16px; |
|
} |
|
#timeline h2.date { |
|
font-size: 16px; |
|
line-height: 18px; |
|
margin-bottom: 3.75px; |
|
color: #999999; |
|
} |
|
#timeline h3, |
|
#timeline h4, |
|
#timeline h5, |
|
#timeline h6 { |
|
line-height: 40px; |
|
} |
|
#timeline h3 .active, |
|
#timeline h4 .active, |
|
#timeline h5 .active, |
|
#timeline h6 .active { |
|
color: #0088cc; |
|
} |
|
#timeline h3 { |
|
font-size: 28px; |
|
line-height: 30px; |
|
} |
|
#timeline h3 small { |
|
font-size: 14px; |
|
} |
|
#timeline h4 { |
|
font-size: 16px; |
|
line-height: 18px; |
|
} |
|
#timeline h4 small { |
|
font-size: 12px; |
|
} |
|
#timeline h5 { |
|
font-size: 14px; |
|
line-height: 16px; |
|
} |
|
#timeline h6 { |
|
font-size: 13px; |
|
line-height: 14px; |
|
text-transform: uppercase; |
|
} |
|
#timeline strong { |
|
font-weight: bold; |
|
} |
|
#timeline Q { |
|
quotes: '„' '“'; |
|
font-style: italic; |
|
} |
|
#timeline blockquote { |
|
font-size: 28px; |
|
text-align: left; |
|
line-height: 36px; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color: #ffffff; |
|
color: #000000; |
|
} |
|
#timeline .credit { |
|
color: #999999; |
|
text-align: right; |
|
font-size: 10px; |
|
line-height: 10px; |
|
display: block; |
|
margin: 0 auto; |
|
clear: both; |
|
} |
|
#timeline .caption { |
|
text-align: left; |
|
margin-top: 5px; |
|
color: #666666; |
|
font-size: 11px; |
|
line-height: 14px; |
|
clear: both; |
|
} |
|
/* |
|
* TOOLTIP |
|
* Styles for tooltip |
|
* ------------------------------------------------------------------------------------------- */ |
|
.tooltip { |
|
position: absolute; |
|
z-index: 205; |
|
display: block; |
|
visibility: visible; |
|
padding: 5px; |
|
opacity: 0; |
|
filter: alpha(opacity=0); |
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
font-size: 15px; |
|
font-weight: bold; |
|
line-height: 20px; |
|
font-size: 12px; |
|
line-height: 12px; |
|
} |
|
.tooltip.in { |
|
opacity: 0.8; |
|
filter: alpha(opacity=80); |
|
} |
|
.tooltip.top { |
|
margin-top: -2px; |
|
} |
|
.tooltip.right { |
|
margin-left: 2px; |
|
} |
|
.tooltip.bottom { |
|
margin-top: 2px; |
|
} |
|
.tooltip.left { |
|
margin-left: -2px; |
|
} |
|
.tooltip.top .tooltip-arrow { |
|
bottom: 0; |
|
left: 50%; |
|
margin-left: -5px; |
|
border-left: 5px solid transparent; |
|
border-right: 5px solid transparent; |
|
border-top: 5px solid #000000; |
|
} |
|
.tooltip.left .tooltip-arrow { |
|
top: 50%; |
|
right: 0; |
|
margin-top: -5px; |
|
border-top: 5px solid transparent; |
|
border-bottom: 5px solid transparent; |
|
border-left: 5px solid #000000; |
|
} |
|
.tooltip.bottom .tooltip-arrow { |
|
top: 0; |
|
left: 50%; |
|
margin-left: -5px; |
|
border-left: 5px solid transparent; |
|
border-right: 5px solid transparent; |
|
border-bottom: 5px solid #000000; |
|
} |
|
.tooltip.right .tooltip-arrow { |
|
top: 50%; |
|
left: 0; |
|
margin-top: -5px; |
|
border-top: 5px solid transparent; |
|
border-bottom: 5px solid transparent; |
|
border-right: 5px solid #000000; |
|
} |
|
.tooltip-inner { |
|
max-width: 200px; |
|
padding: 3px 8px; |
|
color: #ffffff; |
|
text-align: center; |
|
text-decoration: none; |
|
background-color: #000000; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
} |
|
.tooltip-arrow { |
|
position: absolute; |
|
width: 0; |
|
height: 0; |
|
} |
|
/* MEDIA QUERIES |
|
================================================== */ |
|
/* Mobile and iPhone |
|
================================================== */ |
|
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { |
|
|
|
} |
|
/* BELOW 600px |
|
================================================== */ |
|
@media (max-width: 600px) { |
|
.slider .slider-item .content .content-container { |
|
display: block; |
|
} |
|
.slider .slider-item .content .content-container .text { |
|
width: 100%; |
|
max-width: 100%; |
|
min-width: 120px; |
|
display: block; |
|
} |
|
.slider .slider-item .content .content-container .text .container { |
|
display: block; |
|
} |
|
.slider .slider-item .content .content-container .media { |
|
width: 100%; |
|
min-width: 50%; |
|
float: none; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper { |
|
margin-left: 0px; |
|
margin-right: 0px; |
|
width: 100%; |
|
display: block; |
|
} |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container img, |
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container iframe { |
|
width: 100%; |
|
} |
|
.slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container { |
|
border: none; |
|
background-color: #ffffff; |
|
} |
|
}
|
|
|