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.

1491 lines
34 KiB

/*
Timeline
Theme: Dark
Copyright 2012 Zach Wise
Designed and built by Zach Wise digitalartwork.net
----------------------------------------------------- */
13 years ago
/* 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;
}
13 years ago
#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
13 years ago
================================================== */
/* 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
13 years ago
* Basic and global styles for generating structural layout
* ------------------------------------------------------------------------------------------- */
/* TIMELINE EMBED
================================================== */
#timeline-embed {
background-color: #ffffff;
13 years ago
margin-bottom: 20px;
border: 1px solid #cccccc;
13 years ago
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;
13 years ago
position: absolute;
z-index: 100;
clear: both;
overflow: hidden;
/* FEATURE
================================================== */
13 years ago
/* 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);
}
13 years ago
#timeline .feedback {
position: absolute;
display: table;
overflow: hidden;
top: 0px;
left: 0px;
z-index: 205;
13 years ago
width: 100%;
height: 100%;
background-color: #e9e9e9;
border: 1px solid #cccccc;
13 years ago
}
#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;
13 years ago
text-decoration: none;
}
#timeline a:hover {
color: #005580;
13 years ago
text-decoration: underline;
}
#timeline .twitter {
text-align: left;
background-color: #ffffff;
13 years ago
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
clear: both;
}
#timeline .twitter blockquote {
font-size: 15px;
line-height: 20px;
color: #666666;
13 years ago
}
#timeline .twitter blockquote p {
font-size: 28px;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #ffffff;
color: #000000;
13 years ago
}
#timeline .twitter blockquote .quote-mark {
color: #666666;
13 years ago
}
#timeline .twitter .created-at {
background-image: url(timeline.png);
13 years ago
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;
13 years ago
}
#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;
13 years ago
}
#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;
13 years ago
}
#timeline .thumbnail.twitter {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -889px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.vimeo {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -963px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.youtube {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -1111px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.soundcloud {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -659px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.map {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -514px;
width: 26px;
height: 21px;
}
#timeline .thumbnail.website {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -1037px;
width: 24px;
height: 24px;
}
#timeline .zFront {
z-index: 204;
13 years ago
}
/* Slider
------------------------------------------------------------------------------------------- */
13 years ago
/* 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;
13 years ago
}
.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;
13 years ago
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;
13 years ago
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
================================================== */
13 years ago
}
.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;
13 years ago
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map {
line-height: normal;
border: 1px solid #cccccc;
z-index: 200;
13 years ago
text-align: left;
background-color: #ffffff;
13 years ago
}
.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;
13 years ago
}
.slider .slider-item .content .content-container .media .media-wrapper .credit {
13 years ago
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 {
13 years ago
text-align: left;
margin-top: 10px;
color: #666666;
13 years ago
font-size: 11px;
line-height: 14px;
}
.slider .slider-item .content .media.text-media .media-wrapper .media-container {
13 years ago
border: none;
background-color: #ffffff;
13 years ago
}
.slider .slider-item .content-container.layout-text {
13 years ago
width: 100%;
}
.slider .slider-item .content-container.layout-text .text {
13 years ago
width: 100%;
max-width: 100%;
}
.slider .slider-item .content-container.layout-text .text .container {
13 years ago
display: block;
vertical-align: middle;
text-align: left;
padding: 0px;
width: 90%;
13 years ago
text-align: left;
margin-left: auto;
margin-right: auto;
}
.slider .slider-item .content-container.layout-media {
13 years ago
width: 100%;
}
.slider .slider-item .content-container.layout-media .text {
13 years ago
width: 100%;
height: 100%;
max-width: 100%;
display: block;
text-align: center;
}
.slider .slider-item .content-container.layout-media .text .container {
13 years ago
display: block;
text-align: center;
width: 100%;
margin-left: none;
margin-right: none;
}
.slider .slider-item .content-container.layout-media .media {
13 years ago
width: 100%;
min-width: 50%;
float: none;
}
.slider .slider-item .content-container.layout-media .media .media-wrapper {
13 years ago
display: block;
}
.slider .slider-item .content-container.layout-media .media .media-wrapper .media-container {
13 years ago
margin-left: auto;
margin-right: auto;
overflow: hidden;
line-height: 0px;
padding: 0px;
}
/*
Navigation
UI for Navigation
------------------------------------------------------------------------------------------- */
13 years ago
#timeline .navigation {
clear: both;
cursor: move;
width: 100%;
height: 200px;
border-top: 1px solid #cccccc;
13 years ago
position: relative;
}
#timeline .navigation .toolbar {
position: absolute;
top: 45px;
left: 0px;
z-index: 202;
background-color: #ffffff;
border: 1px solid #cccccc;
13 years ago
-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;
13 years ago
line-height: 20px;
top: 0px;
z-index: 202;
13 years ago
width: 18px;
height: 18px;
color: #333333;
13 years ago
text-align: center;
font-weight: bold;
border: 1px solid #ffffff;
13 years ago
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;
13 years ago
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);
13 years ago
background-repeat: no-repeat;
background-position: 0 -1507px;
width: 16px;
height: 16px;
}
#timeline .navigation .toolbar .zoom-out .icon {
background-image: url(timeline.png);
13 years ago
background-repeat: no-repeat;
background-position: 0 -1647px;
width: 16px;
height: 16px;
}
#timeline .navigation .toolbar .back-home .icon {
background-image: url(timeline.png);
13 years ago
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;
13 years ago
}
#timeline .navigation .timenav-background .timenav-interval-background {
position: absolute;
top: 151px;
left: 0px;
background: #ffffff;
13 years ago
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;
13 years ago
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;
13 years ago
-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;
13 years ago
z-index: 200;
}
#timeline .navigation .timenav .content .marker.active .line {
z-index: 199;
background: #0088cc;
13 years ago
width: 1px;
}
#timeline .navigation .timenav .content .marker.active .line .event-line {
background: #0088cc;
13 years ago
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);
13 years ago
background-repeat: no-repeat;
background-position: 0 -110px;
width: 153px;
height: 60px;
}
#timeline .navigation .timenav .content .marker.active .flag .flag-content h3 {
color: #0088cc;
13 years ago
}
#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;
13 years ago
}
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4 {
color: #999999;
}
#timeline .navigation .timenav .content .marker:hover .line {
z-index: 201;
13 years ago
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;
13 years ago
-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;
13 years ago
z-index: 22;
}
#timeline .navigation .timenav .content .marker .line .event-line {
position: absolute;
z-index: 22;
left: 0px;
height: 1px;
width: 1px;
background: #0088cc;
13 years ago
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);
13 years ago
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;
13 years ago
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;
13 years ago
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);
13 years ago
background-repeat: no-repeat;
background-position: 0 -110px;
width: 153px;
height: 60px;
}
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h3 {
color: #333333;
13 years ago
}
#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;
13 years ago
overflow: hidden;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-top: 1px solid #cccccc;
13 years ago
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;
13 years ago
line-height: 10px;
color: #ffffff;
13 years ago
position: absolute;
top: -1px;
left: 9px;
}
#timeline .navigation .timenav .time {
position: absolute;
left: 0px;
top: 150px;
height: 50px;
background-color: #ffffff;
13 years ago
}
#timeline .navigation .timenav .time .time-interval-minor {
max-width: none;
13 years ago
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;
13 years ago
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;
13 years ago
line-height: 20px;
text-transform: uppercase;
text-align: left;
text-indent: 0px;
white-space: nowrap;
color: #666666;
13 years ago
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;
13 years ago
}
#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;
13 years ago
line-height: 20px;
text-transform: uppercase;
text-align: left;
text-indent: 0px;
white-space: nowrap;
color: #333333;
13 years ago
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;
13 years ago
}
/* 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 */
13 years ago
-webkit-text-size-adjust: 100%;
/* BLOCKQUOTES
================================================== */
13 years ago
/* Caption and Credits
================================================== */
}
#timeline p {
font-size: 15px;
font-weight: normal;
line-height: 20px;
margin-bottom: 20px;
color: #666666;
13 years ago
}
#timeline p small {
font-size: 12px;
line-height: 17px;
13 years ago
}
#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;
13 years ago
}
#timeline h1,
#timeline h2,
#timeline h3,
#timeline h4,
#timeline h5,
#timeline h6 {
font-weight: normal;
color: #000000;
13 years ago
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;
}
13 years ago
#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;
13 years ago
}
#timeline h3 {
font-size: 28px;
line-height: 30px;
13 years ago
}
#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;
13 years ago
}
#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;
13 years ago
font-size: 11px;
line-height: 14px;
clear: both;
}
/*
* TOOLTIP
* Styles for tooltip
* ------------------------------------------------------------------------------------------- */
.tooltip {
position: absolute;
z-index: 205;
13 years ago
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;
}
}