@font-face {
    font-family: 'inconsolata';
    src: url('./inconsolata.ttf');
}
    
@media only screen and (min-width: 900px) {
    body {max-width: 100%;
	  color: #101115;
	  font-family:   inconsolata, Georgia, robotslab, serif;	  
	  font-size: 100%;
	  font-weight: normal;
	  background-color: #f5f5f5;
	  text-align: left;}

    div#content {
	font-family:  inconsolata, Georgia, robotslab, serif;
	width: 900px;
	margin: auto;
	align: center;
    }

    
    .grid-container{
	display: grid;
	/* grid-template-columns: 33% 33% 33%; */
	grid-template-columns: 25% 25% 25% 25%;
	background-color: #f5f5f5;
	padding: 0px;}
    
    .grid-item{
	background-color: #f5f5f5;
	border: 0px solid #101115;
	padding: 0px;
	margin: 0px;
	text-align: left;
	background-position: center center;
	background-attachment: scroll;}

    .grid-img{width: 100%;}

    a {color:#101115;
       text-decoration: underline;
       padding: 2px;
       underline: 2px #101115;
       font-weight: bold;
       background: transparent;}

    a.hand{font-size: 150%;
	   text-decoration: bold;}
    
    h1 {color: #101115;
	text-align: left;
       	padding: 0;
	margin-top:1em;
       }
    
    h2 {color: #101115;
	padding-right: 0px;
	background: #f5f5f5;
	margin-top:0em;}
    
    h3 {color:  #101115;
	padding: 0px;
	margin-top: .5em;
	border:0;}
    
    a.img {border-width: 0; 
	   background: #f5f5f5;}


    .image img {display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		padding: 0px;
	       }
    
    p.image {display: block;
	     margin-left: 0;
	     margin-right: 0;
	     width: 100%;}
    

    iframe{max-width: 100%;}
    
    .copy {text-align:center; 
	   font-size:80%}
    
    .news {border: thin solid #c0c0c0; 
	   background: #fffd96; }
    
    table.header {border-bottom: 0px solid #ccccff;}
    
    table.image {border: 0px solid #101115; 
		 max-width: 100%; 
		 padding: 0px; 
		 margin: 0px; 
		 margin-left:auto; 
		 margin-right:auto;}
    
    .image-caption{
	font-size: 100%;
	align: right;}
    
    .muse-table {border: 0px solid #101115; 
	     width: 100%; 
	     border-collapse: collapse; 
	     border-width: thin; 
	     padding: 0px; 
	     margin: 0px; 
	     margin-left:auto;
	     margin-right:auto;
		}
    
    .latex-inline {display: inline;
		   margin: 1px;
		   float: none;
		   position: relative;
		   vertical-align: middle;
		   border-style: none;}
    
    .latex-display {display: block;
		    position: relative;
		    border-style: none;
		    max-width: 100%;}
    
    table.image {font-weight: small;} 
    
    pre {font-family: Monospace;
	 font-size: 100%;
	 line-height: 100%;
	 padding: 0.5em;
	 width: 90%;
	 overflow: auto;
	 background-color: #f5f5f5; 
	 border: #101115 1px dashed;
	 white-space: pre-wrap;}
    
    
    hr {border: 0;
	/* border-top: 2px solid #bbb; */
	border-top: 2px solid  #101115;
       }
    
    
    span.red {color: red; }
    span.yellow {color: #101115; background-color: #ffff00;}
    span.#101115 {color: #101115; }
    
    .lastmod {font-style: italic;
              color: #888888;
	      text-align: right;
              font-size:80%}
    
    /* ul {list-style: square;} */
    
    p.quoted {border-left: 1px solid #666;
	      padding: 10px;
	      font-style: italic;
	      font-size:100% ;
	      margin: 5px 20px;}
    
    code  {border: #808a93 1px dashed;
	   padding: 0.025em;}
    
    .desc { font-style: italic;
	    color: #808a93; 
	    margin: 0;}
    
    .tca-image {float: right; 
		margin: 1%;}
    
    
    select.choose {width: 50%;
		   color: #101115;
		   background-color: #f5f5f5;
		   font-family:  straightlineregular, inconsolata, Georgia, robotslab, serif;
		   margin: 0;
		   padding: 0;
		   height: 52px;
		   border: 2px solid #101115;
		   font-size:200%;
		   font-weight: bold;
		   -webkit-appearance: none;
		   -moz-appearance: none;
		   appearance: none;       /* Remove default arrow */
		   background: url("img/darrow.svg") no-repeat right #f5f5f5;
		  }


    
    option{font-family:  inconsolata, Georgia, robotslab, serif;}
    
    div#nav {
	background-color: #f5f5f5;
	font-family:  straightlineregular, inconsolata, Georgia, robotslab, serif;
	margin: 0; 
	padding: 0; 
	list-style-type:none;
	overflow:hidden;
	text-align:left;
	width: 100%;
	border:0;}
    
    div#dirlist {
	border-collapse: collapse;
	width: 720px;
	margin-left:auto;
	margin-right:auto;
    }
    
}

@media (max-width:900px){
    body {color: #101115;
	  font-family: straightlineregular, inconsolata, Georgia, robotslab,serif;
	  margin: auto;
	  /* margin: 0; */
	  /* padding: 0; */
	  width: 100%;
	  text-align: left;
	  text-justify: inter-word;
	  background-image: none;
	  background-color: #f5f5f5;
	 }

    h1 {color: #101115;
	text-align: left;
       	padding: 0px;
	margin-top:.5em;
	font-size: 150%;}
    
    h2 {color: #101115;
	font-size: 150%;
	padding: 0;
	margin:0;}
    
    h3 {color:  #101115;
	font-size: 150%;
	padding: 0px;
	margin-top: .5em;
	border:0;}
    
    .image img {max-width: 100%;}
    iframe{max-width: 100%;}
    object{max-width: 100%;}
    .desc{font-size: 90%;}
    .lastmod{font-size: 80%;}
    
    pre{font-size: 100%;
       	line-height: 100%;}
    p.quoted {border-left: 1px solid #666;
	      font-style: italic;
	      font-size:80% }
    .latex-inline {display: inline;
		   margin: 1px;
		   float: none;
		   position: relative;
		   vertical-align: middle;
		   border-style: none;
		   max-width: 100%;}
        
    select.choose {background-color: #f5f5f5;
		   width: 100%;
		   color: #101115;
		   font-family:  straightlineregular, inconsolata, Georgia;
		   margin: 0;
		   padding: 0;
		   border: 2px solid #101115;
		   font-size:150%;
		   font-weight: bold;
		   }

    .muse-table {border: 0px solid #101115; 
		 max-width: 100%;
		 border-collapse: collapse; 
		 border-width: thin; 
		 padding: 0px; 
		 margin: 0px; 
		 margin-left:auto;
		 margin-right:auto;}
    table.image {max-width: 100%;}
    table {max-width: 100%;}

    div#content {
	font-family: straightlineregular, inconsolata, Georgia, robotslab,serif;
	margin: auto;
	width:95%;
	}
}