/****** HTML reset *********/

html,body,div,span,applet,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,t{
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}

/* A font by Caroline Hadilaksono (Junction) -> www.hadilaksono.com */

@font-face {
font-family:'JunctionRegular';
src:url('junction_02-webfont.eot');
src:url('fonts/junction_02-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/junction_02-webfont.woff') format('woff'),
url('fonts/junction_02-webfont.ttf') format('truetype'),
url('fonts/junction_02-webfont.svg#JunctionRegular') format('svg');
font-weight:normal;
font-style:normal;
}

/****** standard HTML definition *********/

html, body {
height: 100%;
margin: 0;
}

body {
background: #666;
color: #C8C8C8;
font-family: "JunctionRegular", sans-serif;
font-size: 100%;
font-weight: normal;
letter-spacing: 0.095em;
line-height: 140%;
white-space: normal;
}

a:link, a:visited, a:active {
background-color: transparent;
color: #A0A0A0;
text-transform: none;
text-decoration: none;
}

a:hover {
border-bottom: 1px solid #fff;
color: #fff;
}

h1 {
color: #D8D8D8;
font-size: 100%;
}

h2 {
font-size: 100%;
padding-bottom: 10px;
}

img {
background-color: #666;
border: none;
}

/****** navigation & intro formatting *********/

#header {
padding: 0 35px 0 0;
white-space: nowrap;
}

#navigation {
padding: 10px 0 100px 0;
}

#navigation a:nth-of-type(n+2)::before {
color: #888;
content: "|";
position: relative;
left: -2px;
}


/****** 2023 update *********/


button {
background-color: #666;
border: 1px solid #C8C8C8;
color: #C8C8C8;
font-size: 90%;
font-weight: normal;
letter-spacing: 0.095em;
min-height: 25px;
padding: 0 10px;
text-align: center;
width: auto;
}

button:hover {
color: #fff;
cursor: pointer;
}

#page_container {
margin: 50px;
padding-bottom: 100px;
width:  80%;
}

.section {
padding-bottom: 100px;
}

.absolute_sequence {
left: -5000px;
position: absolute;
}

#figure_sequence .openseadragon-container {
max-height: calc(100vh - 50px) !important;
height: 100vh !important;
width: 100vw !important;
}

#figure_sequence {
/* re mobile Chrome: 100% + fixed */
height: 100% !important;
position: fixed;
}

.thumb:hover {
cursor: pointer;
}

#image_caption {
border-top: 1px solid #808080;
bottom: 0;
color: #bfbfbf;
font-size: 14px;
left: 0;
padding: 10px;
position: absolute;
right: 0;
text-align: center;
z-index: 100;
}

#form_wrap {
column-gap: 20px;
display: flex;
margin: 20px 0 40px 0;
}

.add {
display: none;
}

.add.show {
display: block;
}

#new_image {
margin-bottom: 25px;
}

.images {
height: 1000px;
overflow-x: auto;
}

#work_in_progress .images {
height: inherit;
overflow-x: inherit;
}

#computer_art {
padding-bottom: 150px;
}

#computer_art .images {
height: 425px;
}

#computer_art.show .images {
height: 700px;
}

.images img {
padding: 5px 5px 0 0;
}

#computer_art .text {
display: none;
font-size: 0.9em;
padding: 25px 0 40px 0;
}

#computer_art.show .text {
display: block;
}

.text p {
padding-bottom: 10px;
}

#show_wrap {
margin-top: 20px;
}

/****** media query *********/

@media screen and (max-width:1200px) {
#page_container {
width: 90%;
}
}