* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}


h2 {
font-weight: bold;
clear: both;
}

/* Generic pane rules */
body { margin: 0 }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

body {
line-height: 1;
background-color: #FFFFFF;
font-family: Courier New, Courier, serif, monospace;
color: #222222;
font-size: 16px;
line-height: 20px;
}

#wrapper {
width: 80%;
margin: 0 auto;
float: center;
background-color: #FFF;
}

#content {
float: right;
width: 75%;
height: 90%;
margin-top: 30px;
margin-right: 20px;
background-color: #FFF;
position: relative;
}

.content_block {
padding-bottom: 30px;
}

.content_image {
max-width: 90%;
max-height: 90%;
height: auto;
width: auto;
/*width: 85%;
height: 90%;*/
object-fit: contain;
object-position: 0% 100%;
}

.content_square_image {
max-width: 75%;
max-height: 75%;
height: auto;
width: auto;
/*width: 85%;
height: 90%;*/
object-fit: contain;
object-position: 0% 100%;
}

#about {
margin-top: 40px;
margin-left: 80px;
width: 65%;
}

#about a {
text-decoration: none;
color: #777;
}

#about a:hover {
text-decoration: underline;
}

#about p {
padding-bottom: 15px;
}

#sidebar {
float: left;
padding-left: 10px;
position: fixed;
.row, .col { overflow: hidden; } /* position: absolute; }*/
margin-top: 30px;
width: 18%;
background-color: transparent;
}

aside h2 {
font-size: 24;
}

aside ul {
list-style-type: none;
}

aside li.normal {
padding-left: 10px;
}

aside li.selected {
padding-left: 10px;
font-weight: bold;
}

aside li.topselected {
font-weight: bold;
}

aside li a {
display: block;
text-decoration: none;
color: #222;
}

aside li a:hover {
text-decoration: underline;
}

#title {
float: left; 
padding-top: 30px; 
padding-bottom: 20px;
width: 100%;
}

@media only screen and (max-width: 1280px) {
  #wrapper {
    width: 100%;
  }
}