/*
    Original Concuspidor layout had the concuspidor_container width fixed at
    600px, because each "main" image is 550px.
    In 2025 this was relaxed to support responsive layout to be kinder to
    modern devices like... mobiles in portrait mode. Some of the CSS3 features
   lloydslloydlddll here were added in 2025!
*/

body {
	background-color: #000000;
	color: #ffffff;
	font-family: Georgia, Times, Times-New Roman, serif;
	font-size: normal;
	margin: 0px;
	padding: 0.5em 1em 1em 1em 1em;
	text-align: center;
}

p {
	margin: 0px;
	padding: 0 0 1em 0;
}
	
blockquote {
	margin: 10px
}

h1 {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 120%;
	font-weight: bold;
}

h2 {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
}

h3 {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 100%;
	font-weight: bold;
}
	
h4 {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
}
	
a {
	text-decoration: none
}

a:link {
	color: #ffff00;
	text-decoration: none
}
	
a:visited {
	color: #ffff80;
	text-decoration: none
}
	
a:hover {
	color: #ffff00;
	text-decoration: underline;
}

#concuspidor_container {
	border: 1px solid #333333;
	padding: 0px 0px 0px 0px;
	margin: 0 auto 1em auto;
  max-width: 50em;
	background-color: black;
	text-align: left;
	line-height: 120%;
}

#concuspidor_header {
	background-image: url("header_600_x_40.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
  background-size: contain;
	margin: 0px;
	padding: 2.5em 10px 0 10px;
}

#concuspidor_text {
	margin: 0px;
	margin-bottom: 8px;
	padding: 4px 24px 10px 24px;
	background-color: black;	
}

#concuspidor_picture {
	margin: 0 auto 0 auto;
	padding: 0px;
	text-align: center;
	background-color: black;
}

#concuspidor_cards {
	margin: 1em;
	padding: 10px 10px 14px 10px;
	text-align: center;
	background-color: black;
}

#concuspidor_footer {
	border-top: 1px solid #333333;
	margin: 10px 0 0 0;
	padding: 8px 8px 8px 8px;
	font-size: 90%;
	background-color: black;
}

.consupidor_two_columns {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

#concuspidor_left_column {
	max-width: 180px;
	padding: 0.5em 1em;
	text-align: center;
}

#concuspidor_right_column {
	padding: 0.5em 1em;
}

#concuspidor_right_column ul {
	margin:0;
	padding: 0px 10px 10px 16px;
}

#concuspidor_right_column ul li {
	padding-bottom: 4px;
}

.concuspidor_small_text {
	font-size: 90%;
}

#concuspidor_container .concuspidor_verbose_list dl dt {
	font-family: tahoma, arial, helvetica, sans-serif;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	padding-bottom: 0.5em;
}

#concuspidor_container .concuspidor_verbose_list dl dd {
	margin: 0;
	padding: 0;
	padding-left: 1em;
	padding-bottom: 1.25em;
}

#concuspidor_text.archive h3.as-title {
  font-weight:normal;
  font-family: Georgia, Times, Times-New Roman, serif;
  margin:1.5em 0 0 0;
  padding:0;
}

#concuspidor_container dl {
	margin: 0;
	padding: 0 0 1em 0;
}

#concuspidor_container dl dt {
	margin: 0;
	padding: 0;
}

#concuspidor_container dl dd {
	margin: 0;
	padding: 0;
	padding-bottom: 1em;
}

.credits {
  font-family: monospace;
  margin: 1em auto 2em auto;
  max-width:31em;
}
.credits p {
  display: flex;
  width:100%;
  align-items: end;
  padding:0;
  margin:0.5em 0 0 0;
}
.credits p span:first-child {
  text-align:left;
  flex: 0 0 auto;
}
.credits p span:nth-child(3){
  text-align:right;
  flex: 0 0 auto;
}
.credits p span.filler {
  flex: 1 1 auto;
  overflow: hidden;
}  

.concuspidor_bordered_box {
	border: 1px solid #333333;
	padding: 10px;
}
#picture {
  margin:0;
  padding:0;
}
#picture img {
  max-width:550px;
  width:98%;
  margin:0 auto;
}

.no-js #picture img {
  max-width: 550px !important;
  min-width: 550px !important;
  width: 550px !important;
}

@media (max-width: 480px) {
  .consupidor_two_columns {
    display: block; /* i.e., not grid */
  }
  #concuspidor_left_column {
  	max-width: 100%;
  }
  .credits p span:first-child {
    width:min-content;
  }
}