/*
*/
body, html {
    margin: 0;
    padding: 0;
    color: silver;
}

body {
    margin: auto;
}

/* thanks s/o # 826782 */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*  +---------------------------------------------------------------------+ */
/*  | width blocks / responsive adjustments                               | */
/*  +---------------------------------------------------------------------+ */
.header .logo, .header h1, .header h2, .header h4, .header h5, .footer h4, .footer div, .section .copy, .section h2, .sources { max-width:800px; margin: auto; }

/*  +---------------------------------------------------------------------+ */
/*  | alternating fonts                                                   | */
/*  +---------------------------------------------------------------------+ */

body { font-family: 'Lato', sans-serif; font-size: 18px; }
.header h4 { font-family: 'Lato', sans-serif }
.title { font-family: 'Lato', sans-serif; font-size: 0.75em; }
.header { font-family: 'Roboto Slab', serif; font-size: 1.25em; }
.filters p, .filters a { font-family: 'Lato', sans-serif; font-size: 1em; }
h1, h2, h3, h4 { font-family: 'Roboto Slab', serif; }

/*  +---------------------------------------------------------------------+ */
/*  | alternating section colors                                          | */
/*  +---------------------------------------------------------------------+ */

body, html { background-color: #000000; }
.header-container { background-color: #000000; }
.section-odd { background-color:rgb(34, 34, 34); }
.section-even { background-color:#000000; }
.after-section-intro { background-image:url('assets/gradient-c.jpg'); }
.section-odd .after-section { background-image:url('assets/gradient-b.jpg'); }
.section-even .after-section { background-image:url('assets/gradient-a.jpg'); }

.after-section {
    height: 100px;
    background-repeat:repeat-x;
    background-size:256px 100px;
}

/*  +---------------------------------------------------------------------+ */
/*  | intro / outro sections                                              | */
/*  +---------------------------------------------------------------------+ */

/* .header-container { padding-bottom:6em }*/


.logo { padding-top: 1em; padding-bottom:1em; }
.logo img { height: 75px; }

.headline { margin-top: 1em; font-size: 2em; padding-bottom:0.25em }
.subhed { font-family: 'Lato', sans-serif; font-size: 1em; color: silver; margin-bottom:1em; padding-bottom:1em;  }
.byline { font-size: 1em; font-family: 'Lato', sans-serif;}
.pubdate { font-size: 1em;font-family: 'Lato', sans-serif; }
.intro { font-size: 1em; line-height: 1em }

.cover-image {
    margin-top:3em;
    border-top:10px solid black;
    height:150px;
    border-bottom:10px solid black;
    overflow: hidden;
}
.cover-image-inner {
    background-image:url(assets/cover3.png);
    background-repeat:repeat;
    background-position: 0px 0px;
    transition: all 5s ease-in-out;
    height: 150px;
}
.footer h4 { font-size: 2em }
.footer td { font-size: 1.25em; color: silver; padding:0.5em }

/*  +---------------------------------------------------------------------+ */
/*  | filter                                                              | */
/*  +---------------------------------------------------------------------+ */

/* bugfix: blank space between sections */
.section:nth-child(3) {
    padding-top:5em;
}

.filters {
    top:0px;
    position:sticky;

    z-index:5000;
    background-color: #222222;
}

.filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.filter-2 {
    top:0px;
}

.filter-table { max-width: 800px; margin: auto; }
.filter-table td { vertical-align: baseline; }

.filters p { text-align: center; white-space:nowrap; }

.filters p, .filters a {
    color: silver;
}
.filters a {
    padding:0.33em;
    margin-left:5px;
    text-decoration: none;
    outline: none;
    white-space: nowrap;
}
.filters a:hover { text-decoration: underline; }
.filters p {
    color: #555;
    padding-right: 1em;
}
a.button-series-all {  border-bottom: 6px solid silver; }
a.button-series-before { border-bottom: 6px solid #A12568;}
a.button-series-during { border-bottom: 6px solid #FEC260;}
a.button-series-after { border-bottom: 6px solid  #cecece;}
a.button-series-today { border-bottom: 6px solid #978a8a;}
a.button-series-future { border-bottom: 6px solid #543b58;}

a.button-series-all.button-selected { background-color: silver; box-shadow:0 0 30px silver }
a.button-series-before.button-selected { background-color: #A12568; box-shadow:0 0 30px #A12568 }
a.button-series-during.button-selected { background-color: #FEC260; box-shadow:0 0 30px #FEC260 }
a.button-series-after.button-selected { background-color: #cecece; box-shadow:0 0 30px #cecece }
a.button-series-today.button-selected { background-color: #978a8a; box-shadow:0 0 30px #978a8a }
a.button-series-future.button-selected { background-color: #543b58; box-shadow:0 0 30px #543b58 }

a.button-selected { color: black !important }
.filter-2 a.button-selected { background-color: #cecece !important; box-shadow:0 0 30px #cecece }

.series-selected-future .no-future,
.section-selected-1 .button-series-future,
.section-selected-2 .button-series-future,
.section-selected-3 .button-series-future,
.section-selected-4 .button-series-future,
.section-selected-7 .button-series-future,
.section-selected-8 .button-series-future,
.section-selected-10 .button-series-future,
.section-selected-11 .button-series-future
{
    opacity: 0.3;
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
}




/*  +---------------------------------------------------------------------+ */
/*  | locations copy                                                      | */
/*  +---------------------------------------------------------------------+ */

/* .sections { } */
/* .section h2 {  }*/
#sections-anchor { position: relative; top: -50px; }
.body-sq #sections-anchor { top: -100px }
.body-km * { font-family: "Khmer", "Khmer OS", Hanuman,Arial,Helvetica,sans-serif !important; word-wrap: break-word;}
.body-km .filters { opacity: 0.95; line-height: 1em }

.section .poster { max-height: 600px; overflow: hidden }
.copy img { width: 100%; height:100% }

figure {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100%;
}
figcaption {
    font-size: 0.75em;
    margin: 0;
    padding: 0.35em;
    line-height: 1.3em;
    color: #999;
    border-bottom: 2px dotted #444;
    margin-bottom:1em;
    display:flex;
    justify-content: space-between;
}
figcaption .date { text-align: right; padding-left: 1em }
.section h5 {
    font-size: 1em;
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    color: white;
    padding-top: 1em;
    padding-bottom: 1em;
}

.section { 
    padding-top:6em;
    font-size: 1.25em;
}
.header p, .section p { line-height: 1.55em }
.block-hidden, .block-hidden-post { display: none }

h1, h2, h3, h4, h5 { font-weight: normal; }

h5 { color: gray }
h1 { font-size: 2.25em; }
h2 {
    font-size: 1.5em;
    color: white;
    margin:inherit;
    max-width:inherit;
} 
h2 .inner {
    padding: 0.5em;
    background-color: rgba(0,0,0,0.8);
} 
h3 {
    max-width:200px;
    height:1px;
    margin:0.5em;
    position: sticky;
    top:200px;
    color: black;
    line-height:1em;
}
.h3-helper {
    padding: 0.25em;
    position: relative;
    top: 1.5em;
}

h4 { color: #999; line-height: 1.5em }
.title {
    margin-top:5px;
    padding-top:5px;
    border-top:3px solid black;
}

/*  +---------------------------------------------------------------------+ */
/*  | sources                                                             | */
/*  +---------------------------------------------------------------------+ */

.sources h6 {
    font-family: 'Roboto Slab', serif;
    font-size:0.75em;
    padding-top:1em;
    padding-bottom:1em;
    border-top:1px dotted gray;
    border-bottom:1px dotted gray;
    color: gray;
}
.sources ul {
    display: flex;
    flex-wrap: wrap;
    padding:0;
    margin:0;
}
.sources li {
    font-family: 'Lato', sans-serif;
    font-size:0.75em;
    display: inline;
    margin: 0.15em;
    margin-right: 1em;
    color: silver;
}
.sources li:nth-child(even) {
    color: gray;
}

/*  +---------------------------------------------------------------------+ */
/*  | time series, colors shared with filter                              | */
/*  +---------------------------------------------------------------------+ */

.series-before .h3-helper { background-color: #A12568; }
.series-during .h3-helper { background-color: #FEC260; }
.series-after  .h3-helper { background-color:  #cecece; }
.series-today  .h3-helper { background-color: #978a8a; }
.series-future .h3-helper { background-color: #6B4C71; color: black }

/*  +---------------------------------------------------------------------+ */
/*  | responsive                                                          | */
/*  +---------------------------------------------------------------------+ */

@media all and (max-width: 1300px) {
    .header .logo, .header h1, .header h2, .header h4, .header h5, .footer h4, .footer div, .section .copy, .section h2, .sources { max-width:800px; margin-left: 250px; }
}

@media all and (max-width: 768px) {
    body { font-size: 14px; overflow-x: hidden; }
    .header, .copy p { padding-left: 0.25em; padding-right: 0.25em }
    
    .filter-table { max-width: 100% }
    .logo img { height: 40px; }
    .top-credits { display: flex; justify-content: space-between }
    .filters p, .filters a { font-size: 12px }    
    h3 { height: inherit;  position: static; max-width: 100%; margin:0; margin-bottom: 3em; }
    .header .logo, .header h1, .header h2, .header h4, .header h5, .footer h4, .footer div, .section .copy, .section h2, .sources { max-width:100%; margin:0; }
}