@font-face { font-family: "PT Sans"; src: url(pt-sans.woff) format("woff"); src: url(pt-sans.ttf) format("truetype"); }
@font-face { font-family: "Bitstream Charter"; src: url(bitstream-charter.woff) format("woff"); src: url(bitstream-charter.ttf) format("truetype"); }
@font-face { font-family: "Open Sans"; src: url(open-sans.woff) format("woff"); src: url(open-sans.woff2) format("woff2"); }
body { background: #eee none repeat scroll 0 0; font-family: "PT Sans"; }
#container { background: white none repeat scroll 0 0; width: 100%; } 
#news-container { display: flex; } 
.column { float: left; }
.left { width: 15%; margin-right: 1%; }
.right { width: 25%; }
.middle { width: 50%; margin-right: 5%; }
header { border-bottom: 1px solid #ccc; padding: 0 0 0.5em 1em;}
.site-logo { float: left; padding: 0.3em 0.3em 0.3em 0; }
.site-title { margin: 0; }
.site-slogan { margin: 0; color: #4b4b4b; }
nav { height: 99%; position: sticky; top: 1em; } 
nav li { list-style: none; margin: 0.25em 0; padding-left: 0.75em; border-left: 5px solid; }
.nav-top { border-color: #A4A4A4; /* dark grey */}
.nav-politics { border-color: red; /* red */ }
.nav-nation { border-color: #59AFFF; /* blue */ }
.nav-business { border-color: #D834FF; /* purple */ }
.nav-technology { border-color: #FFF500; /* yellow */ }
.nav-entertainment { border-color: #FE30D4; /* pink */}
.nav-sports { border-color: #56E750; /* green */ }
.nav-world { border-color: #ffae4b; /* orange */ }
.nav-science { border-color: #01F5D9; /* aqua */ /* used to be #2FA31C; dark green */ }
.nav-health { border-color: #1D7DE3; /* dark blue */}
.nav-movies { border-color: #B6C83F; }
.nav-television { border-color: #B4FF00; }
.nav-books { border-color: #B48AF1; /* bluish purple */ }
.nav-art { border-color: #FEA5F7; }
.nav-lifestyle { border-color: #932635; /* brown */ }
.nav-travel { border-color: #FFDF65; /* cream */ }
.nav-opinion { border-color: #F78B6B; /* salmon */ }
.nav-features { border-color: #8A55FF; /* bluish purple */ }

.news-section { margin-bottom: 2em; clear: both; }
.news-cluster { clear: both; padding: 1em 0; }
.news-cluster-section {
    margin: 0 0.5em 0 0;
    padding: 0.25em;
    border-width: 5px;
    border-left-style: double;
    border-bottom-style: double;
    font-size: 1.1em;
}
/*
.news-cluster-section:not(#news-section-top) {
    display: none;
}
* */
#news-stories h1 { font-size: 2em; background: #f7f7f7 none repeat scroll 0 0; border-top: 1px dotted #e6e6e6; color: #24194a; margin: 0.25em 0; padding: 0 0.25em; border-radius: 2px; border-left-width: 5px; border-left-style: solid; }
#news-stories h1 + .news-cluster { clear: both; padding: 0.5em 0 0; }
.news-story { margin: 0.1em 0; }
.news-story.tertiary { display: inline-block; float: left; padding-left: 1em; }
.news-story.tertiary.last { margin: 0 0 2em 0; }
.news-story > p { margin: 0; display: inline; }
.news-article { margin: 0; border-bottom: 1px dotted #ccc; clear: both; padding: 0 0 2em; }
.headline { font-family: "PT Sans"; font-weight: normal; color: #0200d0; margin: 0.5em 0 0; }
h3.headline { font-family: "Open Sans"; }
.news-article h3.headline { margin: 0; }
.secondary h3.headline, .tertiary h3.headline { font-family: "Open Sans"; font-weight: 400; /* font-size: 1.125em; */ color: #0200d0; display: inline; margin: 0 0.25em 0 0; }
.secondary h3.headline a, .tertiary h3.headline a { text-decoration: none; color: #0604DD; }
.secondary-summary { font-family: "Open Sans"; margin: 0; font-size: 1em; }
/*
.tertiary h3.headline { font-family: "Open Sans"; font-size: 0.9em; float: left; margin: 0 0.25em; }
.tertiary h3.headline a { color: #03A001; font-weight: 400; text-decoration: underline; }
*/
.news-story p.separator { display: inline-block; float: left; }
.publishing-info { font-family: "Open Sans"; margin: 0; color: grey; }
.summary { font-family: "Bitstream Charter"; margin: 0; font-size: 1.125em; line-height: 1.125em; }
.headline a { text-decoration: none; }
hr.divider { border: 1px solid #ccc; clear: both; margin: 2em 0 1em; }
figure { float: right; margin-block-end: 0; margin-block-start: 0; margin-inline-end: 0; margin-inline-start: 0; } 
figure img { border: 1px dotted grey; display: block; margin: 0 auto; padding: 0.2em; } 
figure.cluster { height: 10em; width: 10em; overflow: hidden; padding: 1em 0.6em 1.3em 1em; margin; 0 0.01em; } 
figure.cluster img { height: 10em; } 
figure.story { height: 5em; width: 5em; margin: 0 0.01em; padding: 0 0.6em 2em 0; overflow: hidden; } 
figure.story img { height: 5em; } 
figcaption { color: grey; float: right; font-size: 0.6em; }

.news-section {
    clear: both;
}
[id^="news-section-"][id$="-read-more"] { display: none; }
[id^="news-section-"][id$="-read-more"] + .read-more-controls .show { display: inline-block; }
[id^="news-section-"][id$="-read-more"] + .read-more-controls .hide { display: none; }
[id^="news-section-"][id$="-read-more"]:target { display: block; }
[id^="news-section-"][id$="-read-more"]:target + .read-more-controls .hide { display: inline-block; }
[id^="news-section-"][id$="-read-more"]:target + .read-more-controls .show { display: none; }


[id^="news-cluster-"][id$="-read-more"] { display: none; }
[id^="news-cluster-"][id$="-read-more"] + .read-more-controls .show { display: inline-block; }
[id^="news-cluster-"][id$="-read-more"] + .read-more-controls .hide { display: none; }
[id^="news-cluster-"][id$="-read-more"]:target { display: block; }
[id^="news-cluster-"][id$="-read-more"]:target + .read-more-controls .hide { display: inline-block; }
[id^="news-cluster-"][id$="-read-more"]:target + .read-more-controls .show { display: none; }

summary { color: #03a001; text-decoration: underline; cursor: pointer; }
details > summary:first-of-type { display: list-item; list-style: inside none "⇲  "; }
details[open] > summary:first-of-type { list-style-type: "⇱   "; margin: 0.5em 0; }
details article { background-image: linear-gradient(#03a001 33%, rgba(255,255,255,0) 0%);  background-position: left; background-size: 1px 7px; background-repeat: repeat-y; }
details figure.news-story.tertiary {
    float: right;
    width: 80px;

}
details figure.news-story.tertiary img {

height: 80px;
}

aside h1 { font-size: 1em; background: #ffffdc none repeat scroll 0 0; border-top: 1px dotted #ebea00; color: #442828; margin: 0.5em 0; padding: 0.25em; font-family: "Open Sans"; }
aside section { margin: 0 0 2em 0; }
#news-section-breaking .news-story { margin: 0 0 0.5em; }
#news-section-breaking .news-story > p { display: inline; }
#news-section-breaking .summary { margin: 0; font-size: 1em; }
#news-section-breaking .publishing-info { font-size: 0.9375em; }
#news-section-breaking .secondary h3.headline { font-size: 1em; display: inline; float: none; }
footer { clear: both; margin: 0 auto; border-top: 1px solid #ccc; padding: 3em 0; }
footer p { text-align: center; }
footer .disclaimer { width: 75%; margin: 0 auto; }
footer .copyright { margin: 0 auto; }
#news-section-search-results .news-cluster { border-bottom: 1px dotted #ccc; margin-bottom: 1em; padding-bottom: 2em; }
.timeline li { padding: 0 0 0 1em; position: relative; list-style: none; margin: 0 0 3em; }
.timeline li::before { background-color: #00c8ff; border-radius: 100%; content: ""; height: 1.25em;
    left: -1.575em; margin-top: 0.25em; position: absolute; width: 1.25em; z-index: 1; }
.timeline li::after { border-left: 1px dotted #00C5FB; bottom: -5px; content: ""; left: -1em;
    position: absolute; top: 5px; width: 1px; }
.timeline li h2.time-elapsed { background: #f9f9f9 none repeat scroll 0 0; padding: 0 0.25em; border-radius: 2px; color: #00bbee; font-size: 1.75em; }
.timeline li h2 + .news-cluster { padding-top: 0; }
.clear-both { clear: both; }
.container-tertiary { clear: left; padding: 0 0 1em; }

/* Responsive Layout */
@media all and (max-width: 1920px) { 
 body {
  width: 100%;
  margin: 0 auto;
 }
}
@media all and (max-width: 1690px) { 
 body {
  width: 100%;
  margin: 0 auto;
 }
}
@media all and (max-width: 1366px) { 
 body {
  width: 100%;
  margin: 0 auto;
 }
}
@media all and (max-width: 1280px) { 
 body {
  width: 100%;
  margin: 0 auto;
 }

}
@media all and (max-width: 980px) {  
 body {
  width: 99%;
  margin: 0 auto;
 }
 .left {
    margin-right: 5%;
 }
 .middle {
    margin-right: 4%;
 }
}
@media all and (max-width: 800px) {  
 body {
  margin: 0 auto;
  width: 99%;
 }
 .left {
    margin-right: 10%;
 }
 .middle {
    width: 70%;
 }
 .right {
    display: none;
    width: 0;
 }  
}
@media all and (max-width: 705px) {  
 body {
  margin: 0 auto;
  width: 99%;
 }
 header {
    padding: 0 0 0.5em 0;
 } 
 .left {
    display: none;
    width: 0;
 }
 .middle {
    width: 90%;
    margin: 0 auto;
 }
 .right {
    display: none;
    width: 0;
 }  
}
@media all and (max-width: 705px) {  
 body {
  margin: 0 auto;
  width: 99%;
 }
 .site-slogan {
   clear: both;
   margin: 0 2em;
   text-align: center;
 }
 .site-logo {
   padding: 0.3em;
 }
 
 .site-title {
  padding: 0.3em 0 0;
 }

}