@font-face {
  font-family: 'Ranade';
  src: url('/static/fonts/ranade/Ranade-Variable.woff2') format('woff2');
  font-weight: 100 700;
}

@font-face {
  font-family: 'Trebuchet MS';
  src: url('/static/fonts/TrebuchetMS/trebuc.ttf') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Trebuchet MS';
  src: url('/static/fonts/TrebuchetMS/trebucbd.ttf') format('woff2');
  font-weight: 700;
}

@font-face {
  font-family: 'Spacemono';
  src: url('/static/fonts/spacemono/space-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'CascadiaCode';
  src: url('/static/fonts/cascadiacode/CascadiaCode.woff2') format('woff2');
  font-weight: 400;
}


body, html {
  height: 100%;
  background: rgb(245, 245, 245); /* rgb(255, 234, 183); */
  margin: 0px; padding: 0px; border: 0px;
}

#eodround_page
{
    width:80%;
    height:auto !important;
    min-height:100vh;
    min-width:900px;
    margin:0 auto;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    
    
    background: white;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.08),
        0 8px 30px rgba(0,0,0,0.12);
    
    /*  
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 1px solid rgb(221,221,221); */
    
}

#navbar
{
    display:flex;
    float:none;
    width:100%;
    min-width:900px;
    height:50px;
    margin:0 auto;
     
    /*border-bottom: solid 4px rgb(255, 204, 51);
    background: rgb( 222,222,222)
    box-shadow: 0px 10px 40px rgba(152,152,152,0.2);*/
    
}

#logo
{
    float:left;
    margin-left:5px;
    width: 180px;
    min-width: 180px;
    height:100%;
}

#siteinfo
{
    float:left;
    width: 65%;
    min-width: 300px;
    #height:100%;
    text-align:right;
    font-family: Trebuchet MS;
    font-size: 100%;
    color: rgb(102,102,102);
    padding: 14px 4px 0 0;
    margin: 0 0 0 10px;
}

#search
{
    display:block;
    float:right;
    width: 20%;
    min-width: 20%;
    #height:100%;
    text-align: right;
    padding: 10px 10px 0 0;
}
#main
{
    width:100%;
    margin-top:5px;
}

#contents
{
    width:75%;
    float:left;
}

#linksrow
{
    width:100%;
    float:left;
}

#embedsrow
{
    width:95%;
    float:left;
    padding: 10px 13px; 
    min-height:350px;
    border-radius: 12px;
}

#stories
{
    width: 50%;
    float:left;
    padding:1% 1%;
}

#sidebar
{
    width:15%;
    float:right;
    padding:1% 1%;
    font-family: Spacemono;
    color: rgb(204,153,51);
    #border: 1px solid rgb(204,153,51);
    #border-radius: 8px;
    #box-sizing: border-box;
}

/*
#sidebar2
{
    width:22%;
    float:left;
    padding:1% 1%;
}
*/
#relatedstories
{
    width:95%;
    float:left;
}

#sidebar li
{
    padding: 10px 0 10px 0;
    margin: 3% 0 0 0;
    line-height: 20px;
    #border-bottom: 1px solid  rgb(204, 153, 51);
}

#sidebar ul
{
    list-style-type: none;
    font-family: Ranade;
    font-size: 90%;
    margin-left:0px;
    padding:5% 0;
}

#sidebar span
{
    color: rgb(204,153,51);
    font-family: Spacemono, Trebuchet MS;
    font-size: 85%;
}

#sidebar a:link
{
    color: rgb(102,102,102);
    font-family: Spacemono, Trebuchet MS;
    font-weight: normal;
    text-decoration: none;
}

#sidebar a:visited
{
    color: rgb(102,102,102);
    font-family: Spacemono, Trebuchet MS;
    font-weight: normal;
    text-decoration: none;
}

#sidebar a:hover
{
    color: rgb(102,102,102);
    font-family: Spacemono, Trebuchet MS;
    font-weight: normal;
    text-decoration: underline;
    background-color : #FFCC66 ;
}



.story-links
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.editor-actions a
{
    margin-right: 12px;
}

.editor-messages
{
    margin: 12px 0;
    padding-left: 20px;
    color: rgb(102,102,102);
    font-family: Trebuchet MS;
}

.editor-form
{
    clear: both;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid rgb(220,220,220);
    background: rgb(248,248,248);
    font-family: Trebuchet MS;
    color: rgb(102,102,102);
}

.editor-form p
{
    margin: 0 0 8px 0;
}

.editor-form label
{
    display: block;
    margin-bottom: 4px;
    font-size: 85%;
    font-weight: bold;
}

.editor-form input
{
    box-sizing: border-box;
    max-width: 100%;
}

.editor-add-form input[type="url"],
.editor-title-form input[type="text"]
{
    width: 100%;
}

.editor-inline-form
{
    margin-top: 8px;
}

.tweet-handle-list__item .editor-inline-form
{
    display: inline-block;
    margin: 0 14px 10px 4px;
}

.editor-link-bulk-form, .editor-tweet-bulk-form
{
    clear: both;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid rgb(220,220,220);
    background: rgb(248,248,248);
    font-family: Trebuchet MS;
    color: rgb(102,102,102);
}

.editor-tweet-bulk-form__actions, .editor-link-bulk-form__actions
{
    margin: 0 0 12px 0;

    
}

.editor-tweet-list
{
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 12px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Ranade, Trebuchet MS;
}

.editor-tweet-list__item
{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 10px 0;
    background: rgb(248, 248, 248);

    padding: 7px 10px;
    border-style: solid;
    border-radius: 4px;
    border-color:  rgba(0, 0, 0, 0.18);
    border-width: 1.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    
}

.editor-tweet-list__item:has(input[type="checkbox"]:checked)
{
    background: rgba(255, 204, 102, 0.28);
}

.editor-tweet-list__body
{
    min-width: 0;
    flex: 1;
    color: rgb(102, 102, 102);
    line-height: 1.35;
 
}

.editor-tweet-list__item > input
{
    flex: 0 0 auto;
    margin-top: 4px;
}

.editor-tweet-list__handle
{
    display: block;
    margin-bottom: 4px;
    color: rgb(204, 153, 51);
    font-family: Trebuchet MS;
    font-weight: bold;
}

.editor-tweet-list__text
{
    display: block;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

@media (max-width: 900px)
{
    .editor-tweet-list
    {
        grid-template-columns: 1fr;
    }
}

.story-link
{
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.story-link__image
{
    flex: 0 0 120px;
}

.story .story-link__image
{
    width:18%;
    float:right;
    padding: 5% 0% 0% 0%;
}

.story-link__image img
{
    display: block;
    width: 120px;
    height: 72px;
    object-fit: cover;
    border: 0;
}

.story .story-link__image img
{
    width: 95%;
    height: auto;
}

.story-link__body
{
    min-width: 0;
}


.tweet-display-toggle
{
    margin: 0 0 15px 0;
    font-family: Trebuchet MS;
    color: rgb(204, 153, 51);
}

.tweet-display-toggle__input
{
    margin-right: 6px;
}


.tweet-handle-list
{
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tweet-handle-list__item
{
    display: inline-block;
    margin: 0 14px 10px 0;
}

/*
.tweet-handle-list__item a,
.tweet-handle-list__item span
{
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid rgb(220,220,220);
    border-radius: 999px;
    background: rgb(248,248,248);
}*/

#embedsrow:has(.tweet-display-toggle__input:not(:checked)) .tweet-embed-list
{
    display: none;
}

#embedsrow:has(.tweet-display-toggle__input:not(:checked)) .tweet-handle-list
{
    display: block;
}

.tweet-grid
{
    display:grid;
    grid-template-columns: repeat(2, minmax(280px, 550px));
    gap: 30px;
    justify-content: start;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: start;
}

.tweet-grid__item
{
    min-width: 0;
}

.tweet-grid__item > :first-child
{
    margin-top: 0;
}

.tweet-grid__empty
{
    grid-column: 1 / -1;
}

.tweet-grid .twitter-tweet,
.tweet-grid twitter-widget
{
    margin: 0 !important;
}

@media (max-width: 900px)
{
    .tweet-grid
    {
        grid-template-columns: 1fr;
    }

    .story-link
    {
        display: block;
    }

    .story-link__image img
    {
        margin-bottom: 8px;
    }
}


#stories a:link
{
    color: rgb(102, 102, 102);
    text-decoration: none;
}

#stories a:visited
{
    color: rgb(102, 102, 102);
    text-decoration: none;
}

#stories a:hover
{
    color : rgb(102, 102, 102) ;
    text-decoration: underline;
    background-color : #FFCC66 ;
}


/* STORY */

#headstory
{
    width:100%;
    float:left;
    padding:2% 0%;
    border-bottom: 1px dotted rgb(204, 153, 51);
    margin-top: 1%;
    
}

.story
{
    width:100%;
    float:left;
    padding: 2% 0%;
    border-bottom: 1px dotted rgb(204, 153, 51);
    margin-top: 2%;
}

.text
{
    width:80%;
    float:left;
}

.image
{
    width:18%;
    float:right;
    padding: 5% 0% 0% 0%;
    /*margin: 0px 0px 0px 5px;*/
}

.image img
{
    border-style: none;
    width: 95%;
    height: auto;
}


.site_author
{
    line-height: 180%;
    color: #00ACEE; /*rgb(204, 156, 51);*/
    font-family: Trebuchet MS;
    font-size: 90%;
    font-weight:bold;
}

.tweets
{
    float:left;
    width:100%;
    margin-top:3%;
}

#stories .site_author a:link
{
    color: #00ACEE;
    text-decoration: none;
}

#stories .site_author a:visited
{
    color: #00ACEE;
    text-decoration: none;
}

#stories .site_author a:hover
{
    color: #00ACEE;
    text-decoration: underline;
}

#stories .headline a
{
    color: rgb(102, 102, 102);
    font-family:  Trebuchet MS;
    font-weight: bold;
    font-size: 125%;
    #text-decoration: underline;
}

.desc
{
    color: rgb(102, 102, 102);
    font-family: Spacemono, Trebuchet MS;
    font-size: 85%;
}

  #stories .story-more-links
  {
      float: left;
      width: 100%;
      margin-top: 0px;
      padding: 2% 0%;
      line-height: 1.35;
      #background: rgb(238, 242, 250);
      border-radius: 4px;

      font-family: Trebuchet MS;
      font-size: 95%;
      font-weight: bold;
      color: rgb(102, 102, 102);
    
  }

  #stories .story-more-links a,
  #stories .story-more-links a:link,
  #stories .story-more-links a:visited {
      color: rgb(0, 130, 255);
      font-family: CascadiaCode, Trebuchet MS;
      font-weight: normal;
      font-size: 100%;
      text-decoration: none;
  }

  #stories .story-more-links a:hover {
      color: #111;
      text-decoration: underline;
  }


#embedsrow a:link
{
    color:  rgb(0, 130, 255); /*rgb(15, 115, 245);*/
    font-family: CascadiaCode, Trebuchet MS;
    text-decoration: none;
}

#embedsrow a:visited
{
    color: rgb(0, 151, 238); /*rgb(15, 115, 245);*/
    font-family:CascadiaCode, Trebuchet MS;
    text-decoration: none;
}

#embedsrow a:hover
{
    color: rgbrgb(0, 0, 238);
    text-decoration: underline;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltiptext {
    visibility: hidden;
    position: absolute;

    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    
    background: white;
    color: rgb(72, 72, 72);
    font-family:  CascadiaCode, Trebuchet MS;
    font-weight: normal;
    font-size: 85%;

    box-sizing: border-box;
    width: max-content;
    max-width: 250px;
    height: max-content;
    white-space: normal;
    z-index: 1000;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: break-word;
    pointer-events: none;

    padding: 7px 10px;
    border-style: solid;
    border-radius: 4px;
    border-color: #008fee; # #00ACEE; 
    border-width: 1.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}