playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
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.
53 Commits
8 Branches
41 Tags
20 MiB
Tree: 9dbde85d58
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9dbde85d58'
${ noResults }
TimelineJS/timeline-dark.css

1438 lines
34 KiB
Raw Normal View History Unescape

New Dark Theme
13 years ago
/* Timeline
* 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 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;
}
/* Variables.less
* Variables to customize the look and feel
* ----------------------------------------------------- */
/* Colors
================================================== */
/* COLOR SCHEME
================================================== */
/* CLEANUP IN PROGRESS
================================================== */
/* Sizes
================================================== */
/* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
/* Icons.less
* Base64 Icons
* ----------------------------------------------------------------- */
/*
* Structure
* Basic and global styles for generating structural layout
* ------------------------------------------------------------------------------------------- */
/* TIMELINE EMBED
================================================== */
#timeline-embed {
background-color: #1a1a1a;
margin-bottom: 20px;
border: 1px solid #333333;
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: #1a1a1a;
position: absolute;
z-index: 100;
clear: both;
overflow: hidden;
/* FEEDBACK
================================================== */
/* Container
================================================== */
}
#timeline .feedback {
position: absolute;
display: table;
overflow: hidden;
top: 0px;
left: 0px;
z-index: 2000;
width: 100%;
height: 100%;
background-color: #262626;
border: 1px solid #333333;
}
#timeline .feedback .messege {
display: table-cell;
vertical-align: middle;
font-size: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
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: #0bd4e3;
text-decoration: none;
}
#timeline a:hover {
color: #07909a;
text-decoration: underline;
}
#timeline .twitter {
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #1a1a1a;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
clear: both;
}
#timeline .twitter blockquote {
font-size: 15px;
line-height: 20px;
color: #aaaaaa;
}
#timeline .twitter blockquote p {
font-size: 28px;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #1a1a1a;
font-family: "Georgia", Times New Roman, Times, serif;
color: #ffffff;
}
#timeline .twitter blockquote .quote-mark {
color: #aaaaaa;
}
#timeline .twitter .created-at {
background-image: url(timeline-dark.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: #aaaaaa;
}
#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: #aaaaaa;
}
#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 #333333;
}
#timeline .thumbnail.twitter {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -889px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.vimeo {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -963px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.youtube {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -1111px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.soundcloud {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -659px;
width: 24px;
height: 24px;
}
#timeline .thumbnail.map {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -514px;
width: 26px;
height: 21px;
}
#timeline .thumbnail.website {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -1037px;
width: 24px;
height: 24px;
}
#timeline .zFront {
z-index: 500;
}
/*
* Feature
*
* ------------------------------------------------------------------------------------------- */
#timeline {
/* Feature
================================================== */
}
#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);
/* BLOCKQUOTES
================================================== */
}
#timeline .feature .slider h2.date {
line-height: 24px;
}
#timeline .feature .slider .date a,
#timeline .feature .slider .title a {
color: #999999;
}
#timeline .feature .slider blockquote {
font-size: 28px;
text-align: left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #1a1a1a;
font-family: "Georgia", Times New Roman, Times, serif;
color: #ffffff;
}
/*
* 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: #1a1a1a;
}
.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: #262626;
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: #aaaaaa;
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;
}
.slider .slider-item .content {
display: table-cell;
vertical-align: middle;
/* Layouts
================================================== */
/* All Slides
================================================== */
/* Text Only Slides
================================================== */
/* Media Only 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 #333333;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map {
line-height: normal;
border: 1px solid #333333;
z-index: 500;
text-align: left;
background-color: #1a1a1a;
}
.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 .credit,
.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container .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 .media-container .caption {
text-align: left;
margin-top: 10px;
color: #aaaaaa;
font-size: 11px;
line-height: 14px;
}
.slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container {
border: none;
background-color: #1a1a1a;
}
.slider .slider-item .content .content-container.layout-text {
width: 100%;
}
.slider .slider-item .content .content-container.layout-text .text {
width: 100%;
max-width: 100%;
}
.slider .slider-item .content .content-container.layout-text .text .container {
display: block;
vertical-align: middle;
text-align: left;
padding: 0px;
width: 60%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
.slider .slider-item .content .content-container.layout-media {
width: 100%;
}
.slider .slider-item .content .content-container.layout-media .text {
width: 100%;
height: 100%;
max-width: 100%;
display: block;
text-align: center;
}
.slider .slider-item .content .content-container.layout-media .text .container {
display: block;
text-align: center;
width: 100%;
margin-left: none;
margin-right: none;
}
.slider .slider-item .content .content-container.layout-media .media {
width: 100%;
min-width: 50%;
float: none;
}
.slider .slider-item .content .content-container.layout-media .media .media-wrapper {
display: block;
}
.slider .slider-item .content .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 #333333;
position: relative;
}
#timeline .navigation .toolbar {
position: absolute;
top: 45px;
left: 0px;
z-index: 1000;
background-color: #1a1a1a;
border: 1px solid #333333;
-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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 20px;
top: 0px;
z-index: 1000;
width: 18px;
height: 18px;
color: #aaaaaa;
text-align: center;
font-weight: bold;
border: 1px solid #1a1a1a;
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: #0bd4e3;
cursor: pointer;
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
#timeline .navigation .toolbar .zoom-in .icon {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -1507px;
width: 16px;
height: 16px;
}
#timeline .navigation .toolbar .zoom-out .icon {
background-image: url(timeline-dark.png);
background-repeat: no-repeat;
background-position: 0 -1647px;
width: 16px;
height: 16px;
}
#timeline .navigation .toolbar .back-home .icon {
background-image: url(timeline-dark.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: #262626;
}
#timeline .navigation .timenav-background .timenav-interval-background {
position: absolute;
top: 151px;
left: 0px;
background: #1a1a1a;
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: #1a1a1a;
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: #0bd4e3;
z-index: 500;
-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: #0bd4e3;
z-index: 200;
}
#timeline .navigation .timenav .content .marker.active .line {
z-index: 199;
background: #0bd4e3;
width: 1px;
}
#timeline .navigation .timenav .content .marker.active .line .event-line {
background: #0bd4e3;
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-dark.png);
background-repeat: no-repeat;
background-position: 0 -110px;
width: 153px;
height: 60px;
}
#timeline .navigation .timenav .content .marker.active .flag .flag-content h3 {
color: #0bd4e3;
}
#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: #0bd4e3;
}
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4 {
color: #999999;
}
#timeline .navigation .timenav .content .marker:hover .line {
z-index: 500;
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: #aaaaaa;
-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: #333333;
-moz-box-shadow: 1px 0 0 #1a1a1a;
-webkit-box-shadow: 1px 0 0 #1a1a1a;
box-shadow: 1px 0 0 #1a1a1a;
z-index: 22;
}
#timeline .navigation .timenav .content .marker .line .event-line {
position: absolute;
z-index: 22;
left: 0px;
height: 1px;
width: 1px;
background: #0bd4e3;
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-dark.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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: normal;
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-dark.png);
background-repeat: no-repeat;
background-position: 0 -110px;
width: 153px;
height: 60px;
}
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h3 {
color: #aaaaaa;
}
#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: #0bd4e3;
overflow: hidden;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-top: 1px solid #333333;
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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
line-height: 10px;
color: #1a1a1a;
position: absolute;
top: -1px;
left: 9px;
}
#timeline .navigation .timenav .time {
position: absolute;
left: 0px;
top: 150px;
height: 50px;
background-color: #1a1a1a;
}
#timeline .navigation .timenav .time .time-interval-minor {
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: #aaaaaa;
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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
line-height: 20px;
text-transform: uppercase;
text-align: left;
text-indent: 0px;
white-space: nowrap;
color: #aaaaaa;
margin-left: 0px;
margin-right: 0px;
margin-top: 1px;
z-index: 2;
}
#timeline .navigation .timenav .time .time-interval div strong {
font-weight: bold;
color: #ffffff;
}
#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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 20px;
text-transform: uppercase;
text-align: left;
text-indent: 0px;
white-space: nowrap;
color: #aaaaaa;
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: #ffffff;
}
/* Typography.less
* Headings, body text, lists, etc
* ---------------------------------------------------------------------------------------- */
#timeline {
font-family: "Georgia", Times New Roman, Times, serif;
-webkit-font-smoothing: antialiased;
/* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
font-size: 15px;
font-weight: normal;
line-height: 20px;
/*
blockquote {
border-top: 1px solid @color-dark-fifth;
border-bottom: 1px solid @color-dark-fifth;
padding-top:@base-space;
padding-bottom:@base-space;
margin-left:@base-space;
margin-right:@base-space;
//border-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset;
font-size: @base-font*2;
line-height: @base-line;
font-family: @font-sansserif;
color:@color-feature-description;
p:first-child {
margin-top:0px;
}
p {
font-size: @base-font;
line-height: @base-line;
margin-bottom: 6px;
padding-top: 10px;
margin-left:@base-space;
margin-right:@base-space;
font-family: @font-serif;
color:@color-feature-title;
font-style: italic;
}
}
*/
/* Caption and Credits
================================================== */
}
#timeline p {
font-size: 15px;
font-weight: normal;
line-height: 20px;
margin-bottom: 20px;
color: #aaaaaa;
}
#timeline p small {
font-size: 13px;
}
#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: #aaaaaa;
}
#timeline h1,
#timeline h2,
#timeline h3,
#timeline h4,
#timeline h5,
#timeline h6 {
font-weight: normal;
color: #ffffff;
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-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
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 h3,
#timeline h4,
#timeline h5,
#timeline h6 {
line-height: 40px;
}
#timeline h3 .active,
#timeline h4 .active,
#timeline h5 .active,
#timeline h6 .active {
color: #0bd4e3;
}
#timeline h3 {
font-size: 24px;
line-height: 26px;
}
#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 .credit,
#timeline .caption {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#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: #aaaaaa;
font-size: 11px;
line-height: 14px;
clear: both;
}
/* Elements.less
* UI Elements etc
* ---------------------------------------------------------------------------------------- */
/*
* TOOLTIP
* Styles for tooltip
* ------------------------------------------------------------------------------------------- */
.tooltip {
position: absolute;
z-index: 1020;
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;
}