|
|
|
|
@ -1,8 +1,9 @@
|
|
|
|
|
/* Timeline |
|
|
|
|
* Dark |
|
|
|
|
* Copyright 2012 Zach Wise |
|
|
|
|
* Designed and built by Zach Wise digitalartwork.net |
|
|
|
|
* ----------------------------------------------------- */ |
|
|
|
|
/* |
|
|
|
|
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). |
|
|
|
|
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ |
|
|
|
|
@ -162,10 +163,33 @@
|
|
|
|
|
overflow: auto; |
|
|
|
|
vertical-align: top; |
|
|
|
|
} |
|
|
|
|
/* Variables.less |
|
|
|
|
* Variables to customize the look and feel |
|
|
|
|
* ----------------------------------------------------- */ |
|
|
|
|
/* Colors |
|
|
|
|
/* |
|
|
|
|
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 { |
|
|
|
|
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 |
|
|
|
|
================================================== */ |
|
|
|
|
@ -176,19 +200,20 @@
|
|
|
|
|
/* Mixins.less |
|
|
|
|
* Snippets of reusable CSS to develop faster and keep code readable |
|
|
|
|
* ----------------------------------------------------------------- */ |
|
|
|
|
/* Icons.less |
|
|
|
|
* Base64 Icons |
|
|
|
|
* ----------------------------------------------------------------- */ |
|
|
|
|
/* |
|
|
|
|
* Structure |
|
|
|
|
GFX |
|
|
|
|
Base64 Icons etc |
|
|
|
|
----------------------------------------------------------------- */ |
|
|
|
|
/* |
|
|
|
|
* VMM Timeline Core |
|
|
|
|
* Basic and global styles for generating structural layout |
|
|
|
|
* ------------------------------------------------------------------------------------------- */ |
|
|
|
|
/* TIMELINE EMBED |
|
|
|
|
================================================== */ |
|
|
|
|
#timeline-embed { |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
border: 1px solid #333333; |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
padding-top: 20px; |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
clear: both; |
|
|
|
|
@ -206,11 +231,14 @@
|
|
|
|
|
height: 100%; |
|
|
|
|
padding: 0px; |
|
|
|
|
margin: 0px; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 100; |
|
|
|
|
clear: both; |
|
|
|
|
overflow: hidden; |
|
|
|
|
/* FEATURE |
|
|
|
|
================================================== */ |
|
|
|
|
|
|
|
|
|
/* FEEDBACK |
|
|
|
|
================================================== */ |
|
|
|
|
|
|
|
|
|
@ -218,6 +246,19 @@
|
|
|
|
|
================================================== */ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
#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; |
|
|
|
|
@ -227,14 +268,13 @@
|
|
|
|
|
z-index: 2000; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
background-color: #262626; |
|
|
|
|
border: 1px solid #333333; |
|
|
|
|
background-color: #e9e9e9; |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
} |
|
|
|
|
#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; |
|
|
|
|
@ -267,17 +307,16 @@
|
|
|
|
|
border: 1px solid #999999; |
|
|
|
|
} |
|
|
|
|
#timeline a { |
|
|
|
|
color: #0bd4e3; |
|
|
|
|
color: #0088cc; |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
#timeline a:hover { |
|
|
|
|
color: #07909a; |
|
|
|
|
color: #005580; |
|
|
|
|
text-decoration: underline; |
|
|
|
|
} |
|
|
|
|
#timeline .twitter { |
|
|
|
|
text-align: left; |
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
margin-left: auto; |
|
|
|
|
margin-right: auto; |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
@ -286,22 +325,21 @@
|
|
|
|
|
#timeline .twitter blockquote { |
|
|
|
|
font-size: 15px; |
|
|
|
|
line-height: 20px; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
} |
|
|
|
|
#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; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
color: #000000; |
|
|
|
|
} |
|
|
|
|
#timeline .twitter blockquote .quote-mark { |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
} |
|
|
|
|
#timeline .twitter .created-at { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -889px; |
|
|
|
|
width: 24px; |
|
|
|
|
@ -328,7 +366,7 @@
|
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
} |
|
|
|
|
#timeline .twitter .vcard a { |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #333333; |
|
|
|
|
} |
|
|
|
|
#timeline .twitter .vcard a:hover { |
|
|
|
|
text-decoration: none; |
|
|
|
|
@ -347,7 +385,7 @@
|
|
|
|
|
#timeline .twitter .vcard .nickname { |
|
|
|
|
margin-top: 3px; |
|
|
|
|
display: block; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
} |
|
|
|
|
#timeline .twitter .vcard .avatar { |
|
|
|
|
float: left; |
|
|
|
|
@ -369,45 +407,45 @@
|
|
|
|
|
overflow: hidden; |
|
|
|
|
float: left; |
|
|
|
|
margin-right: 5px; |
|
|
|
|
border: 1px solid #333333; |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
} |
|
|
|
|
#timeline .thumbnail.twitter { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -889px; |
|
|
|
|
width: 24px; |
|
|
|
|
height: 24px; |
|
|
|
|
} |
|
|
|
|
#timeline .thumbnail.vimeo { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -963px; |
|
|
|
|
width: 24px; |
|
|
|
|
height: 24px; |
|
|
|
|
} |
|
|
|
|
#timeline .thumbnail.youtube { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -1111px; |
|
|
|
|
width: 24px; |
|
|
|
|
height: 24px; |
|
|
|
|
} |
|
|
|
|
#timeline .thumbnail.soundcloud { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -659px; |
|
|
|
|
width: 24px; |
|
|
|
|
height: 24px; |
|
|
|
|
} |
|
|
|
|
#timeline .thumbnail.map { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -514px; |
|
|
|
|
width: 26px; |
|
|
|
|
height: 21px; |
|
|
|
|
} |
|
|
|
|
#timeline .thumbnail.website { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -1037px; |
|
|
|
|
width: 24px; |
|
|
|
|
@ -416,52 +454,8 @@
|
|
|
|
|
#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 |
|
|
|
|
------------------------------------------------------------------------------------------- */ |
|
|
|
|
/* SLIDER CONTAINERS |
|
|
|
|
================================================== */ |
|
|
|
|
.slider { |
|
|
|
|
@ -483,7 +477,7 @@
|
|
|
|
|
height: 100%; |
|
|
|
|
text-align: center; |
|
|
|
|
display: block; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
} |
|
|
|
|
.slider .slider-container-mask .slider-container .slider-item-container { |
|
|
|
|
display: table-cell; |
|
|
|
|
@ -522,7 +516,7 @@
|
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
|
|
|
font-size: 15px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
line-height: #262626; |
|
|
|
|
line-height: #e9e9e9; |
|
|
|
|
text-transform: uppercase; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
} |
|
|
|
|
@ -546,7 +540,7 @@
|
|
|
|
|
} |
|
|
|
|
.slider .nav-previous:hover, |
|
|
|
|
.slider .nav-next:hover { |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #333333; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.slider .nav-previous { |
|
|
|
|
@ -605,9 +599,6 @@
|
|
|
|
|
.slider .slider-item .content { |
|
|
|
|
display: table-cell; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
/* Layouts |
|
|
|
|
================================================== */ |
|
|
|
|
|
|
|
|
|
/* All Slides |
|
|
|
|
================================================== */ |
|
|
|
|
|
|
|
|
|
@ -646,14 +637,14 @@
|
|
|
|
|
} |
|
|
|
|
.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; |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
} |
|
|
|
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map { |
|
|
|
|
line-height: normal; |
|
|
|
|
border: 1px solid #333333; |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
z-index: 500; |
|
|
|
|
text-align: left; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
} |
|
|
|
|
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map img { |
|
|
|
|
max-height: none !important; |
|
|
|
|
@ -681,16 +672,12 @@
|
|
|
|
|
font-size: 10px; |
|
|
|
|
color: #444; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
color: #1a1a1a; |
|
|
|
|
text-shadow: 1px 1px 1px #aaaaaa; |
|
|
|
|
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: #1a1a1a !important; |
|
|
|
|
} |
|
|
|
|
.slider .slider-item .content .content-container .media .media-wrapper .credit, |
|
|
|
|
.slider .slider-item .content .content-container .media .media-wrapper .caption { |
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
|
|
|
color: #ffffff !important; |
|
|
|
|
} |
|
|
|
|
.slider .slider-item .content .content-container .media .media-wrapper .credit { |
|
|
|
|
color: #999999; |
|
|
|
|
@ -704,13 +691,13 @@
|
|
|
|
|
.slider .slider-item .content .content-container .media .media-wrapper .caption { |
|
|
|
|
text-align: left; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
font-size: 11px; |
|
|
|
|
line-height: 14px; |
|
|
|
|
} |
|
|
|
|
.slider .slider-item .content .media.text-media .media-wrapper .media-container { |
|
|
|
|
border: none; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
} |
|
|
|
|
.slider .slider-item .content-container.layout-text { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -762,15 +749,15 @@
|
|
|
|
|
padding: 0px; |
|
|
|
|
} |
|
|
|
|
/* |
|
|
|
|
* Navigation |
|
|
|
|
* UI for Navigation |
|
|
|
|
* ------------------------------------------------------------------------------------------- */ |
|
|
|
|
Navigation |
|
|
|
|
UI for Navigation |
|
|
|
|
------------------------------------------------------------------------------------------- */ |
|
|
|
|
#timeline .navigation { |
|
|
|
|
clear: both; |
|
|
|
|
cursor: move; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 200px; |
|
|
|
|
border-top: 1px solid #333333; |
|
|
|
|
border-top: 1px solid #cccccc; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .toolbar { |
|
|
|
|
@ -778,8 +765,8 @@
|
|
|
|
|
top: 45px; |
|
|
|
|
left: 0px; |
|
|
|
|
z-index: 1000; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
border: 1px solid #333333; |
|
|
|
|
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); |
|
|
|
|
@ -795,10 +782,10 @@
|
|
|
|
|
z-index: 1000; |
|
|
|
|
width: 18px; |
|
|
|
|
height: 18px; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #333333; |
|
|
|
|
text-align: center; |
|
|
|
|
font-weight: bold; |
|
|
|
|
border: 1px solid #1a1a1a; |
|
|
|
|
border: 1px solid #ffffff; |
|
|
|
|
padding: 5px; |
|
|
|
|
filter: alpha(opacity=50); |
|
|
|
|
-khtml-opacity: 0.5; |
|
|
|
|
@ -808,7 +795,7 @@
|
|
|
|
|
#timeline .navigation .toolbar .zoom-in:hover, |
|
|
|
|
#timeline .navigation .toolbar .zoom-out:hover, |
|
|
|
|
#timeline .navigation .toolbar .back-home:hover { |
|
|
|
|
color: #0bd4e3; |
|
|
|
|
color: #0088cc; |
|
|
|
|
cursor: pointer; |
|
|
|
|
filter: alpha(opacity=100); |
|
|
|
|
-khtml-opacity: 1; |
|
|
|
|
@ -816,21 +803,21 @@
|
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .toolbar .zoom-in .icon { |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
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-dark.png); |
|
|
|
|
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-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 -1303px; |
|
|
|
|
width: 16px; |
|
|
|
|
@ -843,13 +830,13 @@
|
|
|
|
|
left: 0px; |
|
|
|
|
height: 150px; |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: #262626; |
|
|
|
|
background-color: #e9e9e9; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav-background .timenav-interval-background { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 151px; |
|
|
|
|
left: 0px; |
|
|
|
|
background: #1a1a1a; |
|
|
|
|
background: #ffffff; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 49px; |
|
|
|
|
} |
|
|
|
|
@ -860,7 +847,7 @@
|
|
|
|
|
z-index: 30; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 1px; |
|
|
|
|
background: #1a1a1a; |
|
|
|
|
background: #ffffff; |
|
|
|
|
filter: alpha(opacity=50); |
|
|
|
|
-khtml-opacity: 0.5; |
|
|
|
|
-moz-opacity: 0.5; |
|
|
|
|
@ -875,7 +862,7 @@
|
|
|
|
|
left: 50%; |
|
|
|
|
width: 3px; |
|
|
|
|
height: 150px; |
|
|
|
|
background: #0bd4e3; |
|
|
|
|
background: #0088cc; |
|
|
|
|
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); |
|
|
|
|
@ -894,16 +881,16 @@
|
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active .dot { |
|
|
|
|
background: #0bd4e3; |
|
|
|
|
background: #0088cc; |
|
|
|
|
z-index: 200; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active .line { |
|
|
|
|
z-index: 199; |
|
|
|
|
background: #0bd4e3; |
|
|
|
|
background: #0088cc; |
|
|
|
|
width: 1px; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active .line .event-line { |
|
|
|
|
background: #0bd4e3; |
|
|
|
|
background: #0088cc; |
|
|
|
|
filter: alpha(opacity=75); |
|
|
|
|
-khtml-opacity: 0.75; |
|
|
|
|
-moz-opacity: 0.75; |
|
|
|
|
@ -911,14 +898,14 @@
|
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active .flag { |
|
|
|
|
z-index: 200; |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
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: #0bd4e3; |
|
|
|
|
color: #0088cc; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active .flag.row1, |
|
|
|
|
#timeline .navigation .timenav .content .marker.active .flag.row2, |
|
|
|
|
@ -929,7 +916,7 @@
|
|
|
|
|
cursor: default; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3 { |
|
|
|
|
color: #0bd4e3; |
|
|
|
|
color: #0088cc; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4 { |
|
|
|
|
color: #999999; |
|
|
|
|
@ -951,7 +938,7 @@
|
|
|
|
|
display: block; |
|
|
|
|
width: 6px; |
|
|
|
|
height: 6px; |
|
|
|
|
background: #aaaaaa; |
|
|
|
|
background: #333333; |
|
|
|
|
-webkit-border-radius: 3px; |
|
|
|
|
-moz-border-radius: 3px; |
|
|
|
|
border-radius: 3px; |
|
|
|
|
@ -963,10 +950,10 @@
|
|
|
|
|
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; |
|
|
|
|
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 { |
|
|
|
|
@ -975,7 +962,7 @@
|
|
|
|
|
left: 0px; |
|
|
|
|
height: 1px; |
|
|
|
|
width: 1px; |
|
|
|
|
background: #0bd4e3; |
|
|
|
|
background: #0088cc; |
|
|
|
|
filter: alpha(opacity=15); |
|
|
|
|
-khtml-opacity: 0.15; |
|
|
|
|
-moz-opacity: 0.15; |
|
|
|
|
@ -990,7 +977,7 @@
|
|
|
|
|
z-index: 23; |
|
|
|
|
width: 153px; |
|
|
|
|
height: 56px; |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
background-image: url(timeline.png); |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
background-position: 0 0; |
|
|
|
|
width: 153px; |
|
|
|
|
@ -1032,14 +1019,14 @@
|
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker .flag:hover { |
|
|
|
|
cursor: pointer; |
|
|
|
|
background-image: url(timeline-dark.png); |
|
|
|
|
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: #aaaaaa; |
|
|
|
|
color: #333333; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h4 { |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
@ -1065,11 +1052,11 @@
|
|
|
|
|
left: 150px; |
|
|
|
|
height: 12px; |
|
|
|
|
display: block; |
|
|
|
|
background: #0bd4e3; |
|
|
|
|
background: #0088cc; |
|
|
|
|
overflow: hidden; |
|
|
|
|
border-left: 1px solid #333333; |
|
|
|
|
border-right: 1px solid #333333; |
|
|
|
|
border-top: 1px solid #333333; |
|
|
|
|
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; |
|
|
|
|
@ -1087,7 +1074,7 @@
|
|
|
|
|
font-size: 10px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
line-height: 10px; |
|
|
|
|
color: #1a1a1a; |
|
|
|
|
color: #ffffff; |
|
|
|
|
position: absolute; |
|
|
|
|
top: -1px; |
|
|
|
|
left: 9px; |
|
|
|
|
@ -1097,7 +1084,7 @@
|
|
|
|
|
left: 0px; |
|
|
|
|
top: 150px; |
|
|
|
|
height: 50px; |
|
|
|
|
background-color: #1a1a1a; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .time .time-interval-minor { |
|
|
|
|
height: 6px; |
|
|
|
|
@ -1116,7 +1103,7 @@
|
|
|
|
|
height: 6px; |
|
|
|
|
background-position: center top; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
margin-top: 0px; |
|
|
|
|
padding-top: 0px; |
|
|
|
|
} |
|
|
|
|
@ -1143,7 +1130,7 @@
|
|
|
|
|
text-align: left; |
|
|
|
|
text-indent: 0px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
margin-left: 0px; |
|
|
|
|
margin-right: 0px; |
|
|
|
|
margin-top: 1px; |
|
|
|
|
@ -1151,7 +1138,7 @@
|
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .time .time-interval div strong { |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #ffffff; |
|
|
|
|
color: #000000; |
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .time .time-interval-major { |
|
|
|
|
white-space: nowrap; |
|
|
|
|
@ -1176,7 +1163,7 @@
|
|
|
|
|
text-align: left; |
|
|
|
|
text-indent: 0px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #333333; |
|
|
|
|
margin-left: 0px; |
|
|
|
|
margin-right: 0px; |
|
|
|
|
margin-top: 1px; |
|
|
|
|
@ -1184,51 +1171,21 @@
|
|
|
|
|
} |
|
|
|
|
#timeline .navigation .timenav .time .time-interval-major div strong { |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #ffffff; |
|
|
|
|
color: #000000; |
|
|
|
|
} |
|
|
|
|
/* 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; |
|
|
|
|
-webkit-font-smoothing: antialiased; |
|
|
|
|
/* Fix for webkit rendering */ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
*/ |
|
|
|
|
-webkit-text-size-adjust: 100%; |
|
|
|
|
/* BLOCKQUOTES |
|
|
|
|
================================================== */ |
|
|
|
|
|
|
|
|
|
/* Caption and Credits |
|
|
|
|
================================================== */ |
|
|
|
|
@ -1239,7 +1196,7 @@
|
|
|
|
|
font-weight: normal; |
|
|
|
|
line-height: 20px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
} |
|
|
|
|
#timeline p small { |
|
|
|
|
font-size: 13px; |
|
|
|
|
@ -1257,7 +1214,11 @@
|
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
} |
|
|
|
|
#timeline .feature p { |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
} |
|
|
|
|
#timeline .date a, |
|
|
|
|
#timeline .title a { |
|
|
|
|
color: #999999; |
|
|
|
|
} |
|
|
|
|
#timeline h1, |
|
|
|
|
#timeline h2, |
|
|
|
|
@ -1266,7 +1227,7 @@
|
|
|
|
|
#timeline h5, |
|
|
|
|
#timeline h6 { |
|
|
|
|
font-weight: normal; |
|
|
|
|
color: #ffffff; |
|
|
|
|
color: #000000; |
|
|
|
|
text-transform: none; |
|
|
|
|
} |
|
|
|
|
#timeline h1 a, |
|
|
|
|
@ -1291,7 +1252,6 @@
|
|
|
|
|
#timeline h4.date, |
|
|
|
|
#timeline h5.date, |
|
|
|
|
#timeline h6.date { |
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
#timeline h2.start { |
|
|
|
|
@ -1318,8 +1278,8 @@
|
|
|
|
|
#timeline h2.date { |
|
|
|
|
font-size: 16px; |
|
|
|
|
line-height: 18px; |
|
|
|
|
margin-bottom: 0px; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
margin-bottom: 3.75px; |
|
|
|
|
color: #999999; |
|
|
|
|
} |
|
|
|
|
#timeline h3, |
|
|
|
|
#timeline h4, |
|
|
|
|
@ -1331,7 +1291,7 @@
|
|
|
|
|
#timeline h4 .active, |
|
|
|
|
#timeline h5 .active, |
|
|
|
|
#timeline h6 .active { |
|
|
|
|
color: #0bd4e3; |
|
|
|
|
color: #0088cc; |
|
|
|
|
} |
|
|
|
|
#timeline h3 { |
|
|
|
|
font-size: 28px; |
|
|
|
|
@ -1363,9 +1323,14 @@
|
|
|
|
|
quotes: '„' '“'; |
|
|
|
|
font-style: italic; |
|
|
|
|
} |
|
|
|
|
#timeline .credit, |
|
|
|
|
#timeline .caption { |
|
|
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
|
|
|
#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; |
|
|
|
|
@ -1379,14 +1344,11 @@
|
|
|
|
|
#timeline .caption { |
|
|
|
|
text-align: left; |
|
|
|
|
margin-top: 5px; |
|
|
|
|
color: #aaaaaa; |
|
|
|
|
color: #666666; |
|
|
|
|
font-size: 11px; |
|
|
|
|
line-height: 14px; |
|
|
|
|
clear: both; |
|
|
|
|
} |
|
|
|
|
/* Elements.less |
|
|
|
|
* UI Elements etc |
|
|
|
|
* ---------------------------------------------------------------------------------------- */ |
|
|
|
|
/* |
|
|
|
|
* TOOLTIP |
|
|
|
|
* Styles for tooltip |
|
|
|
|
@ -1470,3 +1432,45 @@
|
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
Zach Wise
13 years ago
