body{
	min-height:100% ; 
	image-rendering: crisp-edges ;
}

a {
  color: inherit; 
  text-decoration: inherit; 
}

hr { margin: 0; }

#userbar {
	color: #6e2d09 ;
	text-shadow: 0.5px 0.5px 2px black;
	display: flex;
	align-items: center; justify-content: space-between ;
	flex-wrap: wrap ;
}

#nav {
	margin-top: 0px ;
	white-space: nowrap; 
}

#userbar label, .username, .nav-button {
	padding: 8px ; margin: 3px ;
	background: url("/static/board-wide.gif") no-repeat ;
	background-size: 100% 100% ;
	break-inside: avoid ; display: inline-block; white-space: nowrap;
}

/* .nav-button { color: #dea947 ; } */

.username {
	background: url("/static/board.gif") no-repeat ;
	background-size: 100% 100% ;
}

#userbar .interact, #userbar button, .post-footer a {
	padding: 8px 12px ; margin: 3px ; border: 0 ;
	color: #dea947 ;
	text-shadow: 0.5px 0.5px 2px black;
	background: url("/static/scroll.gif") no-repeat ;
	background-size: 100% 100% ;
	font-size: 14px ;
	break-inside: avoid ; display: inline-block; white-space: nowrap;
}

#userbar .interact:hover, 
   #userbar button:hover,
   .post-footer a:hover, 
   .nav-button:hover {
	filter: drop-shadow( 5px 5px 5px black ) ;
}

#userbar small {
	color: black ; text-shadow: none ;
}

body:has(.default){
	background: url("/static/bg-sky-2.png") no-repeat ;
	background-size: cover ; background-position: center top ;
}
         body:has(.default) hr, 
body:has(#thread) #thread + hr{
	display: none ;
}

.default, #index{
	margin: 5% auto ;
	aspect-ratio: 4 / 3 ; width: 50% ;
	padding: 16px ; border: 0 ;
	background: url("/static/marble.png") no-repeat ;
	background-size: 100% 100% ;
}

.default h1{
	color: white ;
	text-shadow: 0.5px 0.5px 5px black;
}

#projects a,#dilletantism a {
	color: #dea947 ;
	font-size: 24px ;
	text-shadow: 0.5px 0.5px 2px black;
}

    #projects a:hover, 
#dilletantism a:hover{
	filter: drop-shadow( 5px 5px 5px black ) ;
}

.post-img img {
      max-width: 300px; 
     max-height: 300px; 
         height: auto;
	 margin: auto;
}
.post-img { text-align: center ; }

body:has(#thread),
 body:has(#index){
	background: url("/static/bg-silver-b.gif") no-repeat ;
	background-size: cover ; background-attachment: fixed ;
	margin: 0;
}

#thread{
	margin: 0;
}

#framing {
	position: sticky ;
	top: 0px ; z-index: -1 ;
}

#framing img {
	/*width: 18% ; height: auto ; */
 	height: calc( 100vh - 10px ) ; width: auto ; top: 10px ;
	position: absolute ;
}

#thread-channel{
	width: 60% ; margin: auto ;
}

.post-header { 
	position: absolute ; 
	width: 60%;
}

.author{ 
	display: inline-block ; position: absolute; right: -5px ; top: -13px ;
	height: 30px ; width: 220px ;
	background: url("/static/name-card.gif") no-repeat ;
	background-size: 100% 100%; 
}
.author span {
	position: relative ;
	left: 34px ; top: 7px ;
	font-size: 14px;
	color: white; text-shadow: 1px 1px 3px black ;
}

.title{ 
	display: inline-block ; position: absolute; right: -5px ; top: -7px ;
	height: 60px ; width: 440px ; max-width: 70% ;
	background: url("/static/title-card.gif") no-repeat ;
	background-size: 100% 100%; 
}
.title span {
	position: absolute ;
	right: 18px ; bottom: 10px ;
	font-size: 14px;
	color: black; text-shadow: 1px 1px 3px black ;
}

.post-id {
	display: inline-grid ; place-items: center ;
	width: 120px ; height: 110px ;
	background: url("/static/clock.gif") no-repeat ;
	color: white; text-shadow: 1px 1px 3px black ;
	position: absolute; left: -15px ; top: -30px ;
}

#new-reply {
	margin: 0 auto ; width: 60% ;
}

.post-content {
	margin-top: 10px ;
	background-image: 
		url("/static/board-top.gif"),
		url("/static/board-bot.gif"),
		url("/static/board-mid.gif");
	background-repeat: no-repeat, no-repeat, repeat-y ;
	background-position: top, bottom, center ;
	background-size: 100% auto ;
	padding: 30px ;
	padding-top: 60px ;
	margin-top: 40px ;
}

.post-content a { text-decoration: underline ; } 

.post-footer { text-align: center ; }

.post-footer a {
	color: white ; 
	text-shadow: 1px 1px 2px black;
	background: url("/static/wood-tile.gif") repeat-x ;
}

#resources,.message {
	background: url("/static/stone-tile-wall.gif"),
	            url("/static/stone-tile.gif") ;
	background-repeat: repeat-x, repeat ;
	background-position: bottom, center ;
	background-size: 24px ;
	margin-top: 4px ;
	padding-bottom: 12px ;
	box-shadow: 2px 2px 2px black ;
}

#resources a, #index a {
	color: #dea947 ; font-weight: bolder ;
	text-shadow: 0.5px 0.5px 2px black;
}

#resources form {
	padding-top: 4px ;
	padding-left: 4px ;
}

.new-reply {
	width: 40% ; margin: auto ; text-align: center ;
	background: url("/static/marble.png") ;
	background-size: cover ;
	padding: 5px ; margin-top: 10px ;

}
.new-reply input, .new-reply textarea { width: 95% ; }

#index{
	text-align: center;
	width: 60% ; margin: auto ;
	padding: 25px ;
	background: url("/static/board.gif") ;
	background-size: 100% 100% ;
}