/* use full with */
body{
	margin:0;
}

/* Maintain paddings equal for all structural elements*/
header, footer, main, #featured{
  padding-left:2%;
  padding-right:2%;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  margin: 0;
}

/* place logo and menu in center of page*/
header{text-align: center}

/* place search bar right of page*/
#featured form{
	text-align: right;
}

/* navigation elements in a full with block*/
nav ul {
   display: block;
   margin:0;
   text-align: center;
   padding: 0;
   padding-top:0.5em;
}

/* remove list style elements and define margins */
nav li {
	list-style: none;
	display: inline-block;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

/* pagination next-prev next to each other */
.pagination{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pagination :nth-child(2) {
    display: block;
    text-align: right;
}

/* show thumbnails in a grid */
.slides li{padding:0; margin:0em; list-style:none; display: block; text-align:  center;}
.slides li figure{display: block; margin:0;height: 100%;padding: 0}
.slides li figure figcaption{text-align: center}
.slides{
  margin:0;
  margin-bottom: 0.5em;
  padding: 0;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-gap: 0.5em;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr) );
  grid-auto-rows: 1fr;

}
.slides li figure img{ height: auto%; width: 100%; }

/* expand every text area */
textarea {
  width:  100%;
  height: 350px;
}


.publication img{object-fit: contain; width: auto; height: auto;max-width: 100%}


/* For larger screens:  place navigation next to logo */
@media (min-width: 700px) {
	header {
		display: grid;
		grid-gap: 0;
		grid-template-columns: 30% 70% ;
		grid-template-rows: auto;
	}

	header a{text-align: left;}	
	nav ul { text-align: right;}


  .sixfour{
    display: grid;
    grid-template-columns: 6fr 4fr;
    grid-auto-rows: 1fr;
  }

  /* For larger screens:  place navigation next to logo */
  .publication{
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

/* limits central column width to 1000px */
@media (min-width: 1100px) {
	header, footer, main, #featured{
  		padding-left: calc( ( 100% - 1000px  ) / 2.0 )  ;
  		padding-right: calc( ( 100% - 1000px  ) / 2.0 );
	}
}


/* -------------------------------------------------------*/
/* colors and formatting */

#mainnav a{
	color: #ededed;
	text-decoration: none;
}

#mainnav .button_to {
  color: #ededed;
}

#mainnav li.active a , #footernav li.active a{
  color:#666;
  text-decoration:none;
  cursor:default;
}

#featured{
	color: #fff;
	background: #0177e4;
}

#featured a{
	color: #fff;
}

#search{
	background: #0177e4;
}

body{
	font-family: arial, sans-serif;
	background: white;
}

a{ color: #000; }



header{
  background: #313131;
  border-bottom: 1px solid #88c8f6;
}

footer{
	background:#EEE;
}

hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

figcaption{
	color: #666;
  font-size: 0.9em;
}

figure{
  background-color: #F8F8F8;
  border: 1px solid #EEE;
  color: #666;
  padding: 0.25em 0.5em;
}

.post-meta {
    border: 1px solid #EEE;
    color: #666;
    font-size: 0.9em;
    padding: 0.25em 0.5em;
    margin: 0;
    margin-top: 0.25em;
    display: inline-block;
    background-color: #F8F8F8;
}

.post-meta a {
    text-decoration:none;
    color: #666;
}

h1, h2 {
  font-weight:normal;
  margin-top:0.5em;
  margin-bottom: 0;
}

h1 a, h2 a, h3 a, h4 a {
  text-decoration:none;
}

.post-info a {
    color: #444;
    text-decoration: none;
}

.post-info {
    margin: 0;
    font-size: 0.8em;
    display: block;
    margin-top: 0;
    margin-bottom: 1.0em;
}

#footernav a{ color: #666;}

#tagcloud a {
    color: #666;
    text-decoration: none;
}

.button_to {
  display: inline;
}

.button_to input {
  background:none!important;
  color:inherit;
  border:none; 
  padding:0!important;
  font: inherit;
  cursor: pointer;
}

main .button_to {
  text-decoration: underline;
}

main .button_to  input {
  text-decoration: underline;
}


.page{
  border:1px solid #BBB;
  -webkit-box-shadow: 6px 6px 6px #999;
  -moz-box-shadow: 6px 6px 6px #999;
  box-shadow: 6px 6px 6px #999;
  margin-top: -1em;
  margin-left: 1em;
}

.page:hover {
  border:1px solid #999;
  -webkit-box-shadow: 2px 2px 2px #999;
  -moz-box-shadow: 2px 2px 2px #999;
  box-shadow: 2px 2px 2px #999;
}

/*

@media (prefers-color-scheme: dark) {
  body{
    color: #ddd;
    background-color: #313131;
  }

  a{ color: #ddd; }

  .post-meta {
    border: 1px solid #EEE;
    color: #ddd;
    background-color: #333;
    border-color: #222;
  }
  .post-meta a{color: #ddd;}

}
*/






/*** CODERAY default stylesheet: generate with
 * irb 
 * require 'coderay' 
 * style = CodeRay::Encoders[:html]::CSS.new(:default).stylesheet
 * puts style
 ****/

.CodeRay {
  background-color: hsl(0,0%,95%);
  border: 1px solid silver;
  color: black;
}
.CodeRay pre {
  margin: 0px;
}

span.CodeRay { white-space: pre; border: 0px; padding: 2px; }

table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
table.CodeRay td { padding: 2px 4px; vertical-align: top; }

.CodeRay .line-numbers {
  background-color: hsl(180,65%,90%);
  color: gray;
  text-align: right;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.CodeRay .line-numbers a {
  background-color: hsl(180,65%,90%) !important;
  color: gray !important;
  text-decoration: none !important;
}
.CodeRay .line-numbers pre {
  word-break: normal;
}
.CodeRay .line-numbers a:target { color: blue !important; }
.CodeRay .line-numbers .highlighted { color: red !important; }
.CodeRay .line-numbers .highlighted a { color: red !important; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }

.CodeRay .debug { color: white !important; background: blue !important; }

.CodeRay .annotation { color:#007 }
.CodeRay .attribute-name { color:#b48 }
.CodeRay .attribute-value { color:#700 }
.CodeRay .binary { color:#549 }
.CodeRay .binary .char { color:#325 }
.CodeRay .binary .delimiter { color:#325 }
.CodeRay .char { color:#D20 }
.CodeRay .char .content { color:#D20 }
.CodeRay .char .delimiter { color:#710 }
.CodeRay .class { color:#B06; font-weight:bold }
.CodeRay .class-variable { color:#369 }
.CodeRay .color { color:#0A0 }
.CodeRay .comment { color:#777 }
.CodeRay .comment .char { color:#444 }
.CodeRay .comment .delimiter { color:#444 }
.CodeRay .constant { color:#036; font-weight:bold }
.CodeRay .decorator { color:#B0B }
.CodeRay .definition { color:#099; font-weight:bold }
.CodeRay .delimiter { color:black }
.CodeRay .directive { color:#088; font-weight:bold }
.CodeRay .docstring { color:#D42; }
.CodeRay .doctype { color:#34b }
.CodeRay .done { text-decoration: line-through; color: gray }
.CodeRay .entity { color:#800; font-weight:bold }
.CodeRay .error { color:#F00; background-color:#FAA }
.CodeRay .escape  { color:#666 }
.CodeRay .exception { color:#C00; font-weight:bold }
.CodeRay .float { color:#60E }
.CodeRay .function { color:#06B; font-weight:bold }
.CodeRay .function .delimiter { color:#059 }
.CodeRay .function .content { color:#037 }
.CodeRay .global-variable { color:#d70 }
.CodeRay .hex { color:#02b }
.CodeRay .id  { color:#33D; font-weight:bold }
.CodeRay .include { color:#B44; font-weight:bold }
.CodeRay .inline { background-color: hsla(0,0%,0%,0.07); color: black }
.CodeRay .inline-delimiter { font-weight: bold; color: #666 }
.CodeRay .instance-variable { color:#33B }
.CodeRay .integer  { color:#00D }
.CodeRay .imaginary { color:#f00 }
.CodeRay .important { color:#D00 }
.CodeRay .key { color: #606 }
.CodeRay .key .char { color: #60f }
.CodeRay .key .delimiter { color: #404 }
.CodeRay .keyword { color:#080; font-weight:bold }
.CodeRay .label { color:#970; font-weight:bold }
.CodeRay .local-variable { color:#950 }
.CodeRay .map .content { color:#808 }
.CodeRay .map .delimiter { color:#40A}
.CodeRay .map { background-color:hsla(200,100%,50%,0.06); }
.CodeRay .namespace { color:#707; font-weight:bold }
.CodeRay .octal { color:#40E }
.CodeRay .operator { }
.CodeRay .predefined { color:#369; font-weight:bold }
.CodeRay .predefined-constant { color:#069 }
.CodeRay .predefined-type { color:#0a8; font-weight:bold }
.CodeRay .preprocessor { color:#579 }
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
.CodeRay .regexp { background-color:hsla(300,100%,50%,0.06); }
.CodeRay .regexp .content { color:#808 }
.CodeRay .regexp .delimiter { color:#404 }
.CodeRay .regexp .modifier { color:#C2C }
.CodeRay .reserved { color:#080; font-weight:bold }
.CodeRay .shell { background-color:hsla(120,100%,50%,0.06); }
.CodeRay .shell .content { color:#2B2 }
.CodeRay .shell .delimiter { color:#161 }
.CodeRay .string { background-color:hsla(0,100%,50%,0.05); }
.CodeRay .string .char { color: #b0b }
.CodeRay .string .content { color: #D20 }
.CodeRay .string .delimiter { color: #710 }
.CodeRay .string .modifier { color: #E40 }
.CodeRay .symbol { color:#A60 }
.CodeRay .symbol .content { color:#A60 }
.CodeRay .symbol .delimiter { color:#740 }
.CodeRay .tag { color:#070; font-weight:bold }
.CodeRay .type { color:#339; font-weight:bold }
.CodeRay .value { color: #088 }
.CodeRay .variable { color:#037 }

.CodeRay .insert { background: hsla(120,100%,50%,0.12) }
.CodeRay .delete { background: hsla(0,100%,50%,0.12) }
.CodeRay .change { color: #bbf; background: #007 }
.CodeRay .head { color: #f8f; background: #505 }
.CodeRay .head .filename { color: white; }

.CodeRay .delete .eyecatcher { background-color: hsla(0,100%,50%,0.2); border: 1px solid hsla(0,100%,45%,0.5); margin: -1px; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.CodeRay .insert .eyecatcher { background-color: hsla(120,100%,50%,0.2); border: 1px solid hsla(120,100%,25%,0.5); margin: -1px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }

.CodeRay .insert .insert { color: #0c0; background:transparent; font-weight:bold }
.CodeRay .delete .delete { color: #c00; background:transparent; font-weight:bold }
.CodeRay .change .change { color: #88f }
.CodeRay .head .head { color: #f4f }