@font-face {
  font-family: 'Ranade';
  src: url('/static/fonts/ranade/Ranade-Regular.woff2') format('woff2');
  font-weight: 400;
}

@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;
}

#stories
{
    width: 80%;
    min-width: 400px;
    float:left;
    padding:0% 1%;
    
}

#sidebar
{
    width:22%;
    height:100%;
    float:left;
    font-family: Trebuchet MS;
    color: rgb(204,153,51);
}
#topnews
{
    width:80%;
    float:left;
}

#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;
}

#stories li
{
    padding: 5px 0 5px 0; 
    margin: 3% 0 0 0;
    line-height: 20px;
    border-bottom: 1px dotted rgb(204, 153, 51);
}

#stories ul
{
    list-style-type: none;
    color: brown; /*rgb(102, 102, 102);*/
    /*margin-left:3%;*/
    font-size:115%;
    font-family: Trebuchet MS;
    font-weight:bold;
}

.pagination
{
    color: rgb(102, 102, 102);
    text-align:center;
    font-size: 100%;
    font-weight:normal;
    font-family: Trebuchet MS;
}


#sidebar li
{
    padding: 10px 0 10px 0; 
    margin: 3% 0 0 0;
    line-height: 20px;
    border-bottom: 1px dotted #00ACEE;
}

#sidebar ul
{
    list-style-type: none;
    font-family: Spacemono;
    font-size: 90%;
    margin-left:0px;
    padding:5% 0;
}

.storydate
{
    color: rgb(204, 156, 51); 
    /*background:rgb(255, 184, 51);*/
    font-weight: bold;
    font-size: 105%;
    font-family: Trebuchet MS;
    
}

p
{
    font-family:Trebuchet MS;
    color: rgb(102,102,102);
}

a:link
{
    color: rgb(122, 122, 122);
    text-decoration: none;
}

a:visited
{
    color: rgb(122, 122, 122);
    text-decoration: none;
}

a:hover
{
    color: rgb(122, 122, 122);
    text-decoration: underline;
    /*background-color : #FFCC66;*/
}

