body { width: 100%; }
html, body { margin: 0 auto; padding: 0; }
#app { width: 850px; height: 478px; } h1 { display: flex; align-items: center;
} h1 img { width: 20px; margin-right: 5px; } .timelineTitle { display: flex; flex-direction: column; flex-wrap: nowrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start;
} h1 .access span { }
h1 .access { margin-left: 5px; align-items: center; font-size: 12px; font-weight: normal; display: flex; height: 28px; border-radius: 20px; text-align: center; flex-wrap: nowrap; padding: 0 5px; color: white; flex-direction: row;
}
h1 .accessPublic { background-color: #62C275; }
h1 .accessLink { background-color: #f5c200; }
h1 .accessPrivate { background-color: #ff1010; }
h1 .accessJohnsHopkins { background-color: #28477E; }
.accessJohnsHopkins img { width: 24px; padding: 3px;
} /*timeline–––––––––––––––––––––––*/
#timelineWrapper { position: relative; width: 100%;
}
#timelineApp { position: relative;
}
#timelineAppBottom .switchWrapper { padding: 0;
}
#timelineAppBottom { background-color: rgb(22, 30, 39); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 4px 10px; width: 100%;
}
#timelineAppBottom > * { margin: 0 5px;
}
#timelineAppBottom .featureButton { display: flex; align-items: center; background-color: #2c3c4e; padding: 0 10px; height: 30px; cursor: pointer; border-radius: 6px; user-select: none; text-transform: uppercase; font-weight: bold; font-size: 80%; color: white; margin-left: 5px;
}
#timelineAppBottom a { text-decoration: none;
}
#timelineAppBottom #shares { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
} /*.DownloadTimelineCarousel –––––––––––––––––––– */
.DownloadTimelineCarousel { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: all 0.2s linear;
}
.DownloadTimelineCarousel > div { border-radius: 30px; width: 54px; height: 54px; background-color: #e9e9e1; overflow: hidden;
}
.DownloadTimelineCarousel > div:hover { background-color: #e9e9e1;
}
.DownloadTimelineCarousel img { width: 58px; margin: -2px;
}
.DownloadTimelineCarousel .smallimg { background-color: #f3f3f3;
}
.DownloadTimelineCarousel .smallimg img { width: 40px; margin: 7px;
}
/*DownloadOfflineCarousel––––––––––––––––––*/
.DownloadOfflineCarousel > div { border-radius: 70px; width: 114px; height: 114px; background-color: #e9e9e1; overflow: hidden; margin: -57px;
}
.DownloadOfflineCarousel .smallimg img { width: 80px; margin: 17px;
}
.DownloadTimelineCarousel > div:hover { background-color: #ffffff;
}
/*-––––––––––––––––––––––––––––––––*/
.CircleUtilsObject-show { background-color: rgba(0, 0, 0, 0.72);
} .CircleUtilsObject > div.underdev:before { position: absolute; width: 26px; height: 26px; background: url(/public/images/svg/theme-light.svg) no-repeat; background-size: 22px; content: ""; top: 4px; left: -5px; background-color: #03141d; border-radius: 13px; overflow: hidden; border: 2px black solid;
} .CircleUtilsObject > div.premium:before { position: absolute; width: 26px; height: 26px; background: url(/public/images/svg/design/royal-v2.svg) no-repeat; background-size: 22px; content: ""; top: 4px; left: -5px; background-color: #03141d; border-radius: 13px; overflow: hidden; border: 2px black solid;
}
/*-–––––––––––––––––––––––––-*/
.controls { position: absolute; bottom: 40px;
} .commentsContainer { margin-top: 20px; background-color: #f7f7f7; padding: 15px; float: left; width: 100%;
} .addthis_inline_share_toolbox { margin-top: 20px; text-align: center;
} .commentArea { width: 100%; margin-bottom: 6px;
} /*// LIKES */
.likesPanel span { margin-right: 5px;
} .likePlus { background: url(/public/images/svg/like.svg) no-repeat; margin: 0 5px; width: 26px; height: 26px; cursor: pointer;
} .likeMinus { -webkit-transform: rotate(180deg); transform: rotate(180deg); margin: 0 5px; cursor: pointer;
}
.likeMinus:hover { -webkit-transform: rotate(180deg) scale(1.05); transform: rotate(180deg) scale(1.05);
} /*Contributors –––––––––––*/
.contributors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 5px;
}
.contributors a { margin-right: 2px;
} /*objectsSeoLinks–––––––––––––*/
.objectsSeoLinks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.objectsSeoLinks a { text-decoration: none; padding: 0 4px; line-height: 17px; margin-top: 10px; font-size: 16px;
}
.objectsSeoLinks .title { font-weight: 500;
} /*EDIT BUTTON÷*/
.slider-btn {display:inline-block; background:#fff; color:#000; margin-top:15px; padding:11px 25px 10px 25px; font-size:18px; font-weight:500; text-decoration:none; text-transform:uppercase; border:2px solid #fff; border-radius:4px;}
.slider-btn {background:#fff; text-decoration:none; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.95); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.95);}
.slider-btn:hover {background:#fff; text-decoration:none; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.95); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.95);} /*ADAPTIVE*/ @media screen and (max-width: 1030px) { body { width: 100%; }
} /* PINS -------------------------*/
.timelinePinBlocks { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-between; flex-direction: column;
}
a.timelinePinBlock { text-decoration: none;
}
.timelinePinBlock:hover .title { /*background-color: #e0ecf7;*/ color: #fa782f;
}
.timelinePinBlock { width: 160px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer; position: relative; min-height: 200px;
}
.timelinePinBlock .info { display: flex; width: 100%; color: #7e7e7e; font-size: 70%; margin: 3px 0 0; flex-wrap: wrap;
}
.timelinePinBlock .info .fa{ margin-right: 3px; margin-left: 5px;
}
.timelinePinBlock .info .eye{ margin-left: 9px;
}
.timelinePinBlock .thumb { width: 100%; border-radius: 6px; /*-webkit-box-shadow: 0 0 9px -3px black;*/ /*box-shadow: 0 0 9px -3px black;*/
} .timelineThumps { position: relative; width: 100%;}
.timelineThumps .thumb { height: auto; }
.timelineThumps .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .2s ease; }
.timelineThumps:hover .overlay { opacity: 1; } .timelinePinBlock .time { flex-grow: 1; width: 100%; margin-left: 5px;
}
.timelinePinBlock .title { color: #2b3c4f; -webkit-transition: 0.3s; transition: 0.3s; line-height: 20px; margin: 6px 0;
}
.timelinePinBlock .desc { color: #2b3c4f; font-size: 80%; width: 100%; line-height: 15px;
}
.timelinePinBlock .accessLink { position: absolute; width: 30px; height: 30px; background-color: #f5c200; padding: 4px; border-radius: 22px; top: -1px; right: -1px;
}
.timelinePinBlock .accessPrivate { position: absolute; width: 30px; height: 30px; background-color: #ff1010; padding: 4px; border-radius: 22px; top: -1px; right: -1px;
}
.timelinePinBlock .noPic { background: url(/public/images/svg/timeline.svg) center no-repeat; background-size: 30px; width: 100%; height: 160px; border: 6px #ffffff solid; border-radius: 24px;
}
@media screen and (max-width: 700px) { .timelinePinBlock { width: 48%; } .timelinePinBlocks { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
}
@media screen and (max-width: 370px) { .timelinePinBlock { width: 100%; }
} /* comments */
@media screen and (max-width: 960px) { .timelinePinBlocks + div > div { max-width: 100%!important; } } /*-----------settingsPanel*/
.settingsPanel { padding: 10px;
}
.timelineSettings { cursor: pointer; background-color: #eaeaea; padding: 3px 10px; border-radius: 5px; height: 38px;
} .timelineSettings .s { width: 32px; /*-webkit-animation: rotate 40s infinite linear; !* Safari 4.0 - 8.0 *!*/ /*animation: rotate 40s infinite linear;*/
}
.timelineSettings .a { width: 18px; }
.timelineSettings .c { width: 22px; margin-left: 2px;} .timelineEdit { cursor: pointer; margin-right: 11px; background-color: #eaeaea; padding: 8px 10px; border-radius: 5px;
}
.timelineEdit .e { width: 22px; margin-left: 4px;
} /*@keyframes rotate {*/
/*0% { transform: rotate(0deg) }*/
/*50% { transform: rotate(180deg) }*/
/*100% { transform: rotate(360deg) }*/
/*}*/ .settingsPanel .editButton { text-decoration: none;
}
.settingsPanel .editButton:hover { color: black;
} .setAsDefaultView { cursor: pointer; background-color: #eaeaea; padding: 3px 10px; border-radius: 5px; margin-right: 12px; display: none;
}
.setAsDefaultView img { width: 24px; margin-left: 3px;
} /*-------*/
/*tagsContainer---------------r*/
#tagsContainer { position: absolute; top: 0; border-radius: 3px 3px 0 0; left: 0; background-color: rgba(38, 38, 38, 0.74); color: white; overflow-y: auto; user-select: none; z-index: 3;
}
.tagsContainer { display: flex; flex-direction: column; /*justify-content: center;*/ /*padding: 7px;*/ /*align-items: center;*/
}
.tagsContainer .colors { display: flex; justify-content: center; align-items: center;
}
.tagsContainer .color { width: 20px; height: 20px; margin-left: 4px; border-radius: 7px; border: 1px #ffffffb8 solid; cursor: pointer;
}
.tagsContainer .image { padding-left: 7px;
}
.tagsContainer .tags-label { display: flex; padding: 7px 6px 7px 34px; cursor: pointer; background: #1e1e1e url(/public/images/svg/tag.svg) no-repeat 6px center; background-size: 22px;
} .tagsContainer .tags { display: flex; flex-direction: column; opacity: 0.8; pointer-events: all;
}
.tagsContainer .tags .tag { /*position: relative;*/ display: flex; font-size: 14px; margin-right: 1px; cursor: pointer;
} .tagsContainer .tags .name { /*line-height: 14px;*/ /*font-size: 12px;*/ /*height: 16px;*/ padding: 1px 7px; white-space: nowrap; /*border-radius: 3px;*/ /*background-color: rgba(0, 0, 0, 0.73);*/ /*color: white;*/ flex-grow: 1;
} .tagsContainer .tags .name:hover { /*line-height: 14px;*/ /*font-size: 12px;*/ /*height: 16px;*/ /*padding: 1px 7px;*/ /*white-space: nowrap;*/ border-radius: 3px; background-color: rgba(0, 0, 0, 0.73); /*color: white;*/
}
.tagsContainer .tags:hover .name { display: flex;
}
.tagsContainer .tags-select { opacity: 1;
}
.tagsContainer .tags-select .tag { opacity: 0.4;
}
.tagsContainer .tags-select .tag-select { opacity: 1;
}
.tagsContainer .tags-select .tag-select .name { display: flex;
}