/* --- STM_links_style.css --- */

/*
 * The common cascading style sheet for Stellafane the links pages
 * To include: <link rel="StyleSheet" href="STM_links_style.css">
 * Created by Glenn Becker on 2022-Feb-26, but using Ken Slater's in-file CSS (I just copied and pasted)
 * Last edit 2023-Feb-13 by Ken Slater - cleaned out 'auto-styles'
 * Passed W3C CSS Validator on 2006-Oct-4 <-- update this when done
 */

.newlink  { background: #FFB7F6;
	        border-radius: 5pt;
	        box-shadow: 2px 2px 2px 0px gray;
}
/* Inserts a non-breaking space before & after a new link so background has better surround */
.newlink:before, .newlink:after { content: "\a0"; }

/* Bronze colored gradient for use as a background */
.bkgnd-gradient { background: linear-gradient(to bottom, #f7eed9 0%,#dad2c1 50%,#bfb8aa 100%); }

/* Featured Link */
div.LinkOfMonth { /* Featured Link */
	background-color: var(--STMpink);
	border: 1px black solid;
	border-radius: 1rem;
	width: max-content;
	text-align: center;
	margin: 1rem auto;
	font-size: 1.5rem;
	text-shadow: 2px 2px 3px #b0b0b0;
}

div.LinkOfMonth a { padding: 1rem; }

div.LinkOfMonth div.LOTMhdr {
	background-color: #993366;
	border-radius: 1rem 1rem 0 0;
	border-bottom: 1px solid black;
	box-shadow: 0px 2px 2px 0px gray;
	color: #d0d0d0;
	font-size: 1rem;
	font-weight: bold;
	letter-spacing: .4rem;
	text-shadow: 1px 1px 1px black;
	padding: 2px;
	margin-bottom: 5px;
}

div.LinkOfMonth div.LOTHftr {
	margin-top: 7px;
	padding: .3rem;
	border-top: 1px solid black;
	border-radius: 0 0 20px 20px;
	font-size: 1rem;
}

/* Table of Contents */
div.toc {
	border: 1px #808080 solid;
	border-radius: 1rem;
	background: white;
	margin: 1rem auto;
	text-align: center;
}

div.toc div.tochdr {
	border-radius: 20px 20px 0 0;
	padding: 3px 15px;
	border-bottom: 1px solid black;
	box-shadow: 0px 2px 2px 0px gray;
	margin-bottom: 5px;
}

div.toc div.tochdr h2 {
	margin: .5rem;
	letter-spacing: .2rem;
	text-shadow: 2px 2px 2px #b0b0b0;
}

div.toc div.tochdr p {
	text-align: center;
	font-style: italic;
	margin: .3rem 0;
}

/* div.col2or1 is general purpose morphing for mobile layout */
.col2or1 {
	columns: 2;
	column-width: 50%;
	padding: 0 1rem;
	margin: .5rem;
	text-align: left !important;
	break-inside: avoid;
}

.col2or1 > ul, .suplist {
	list-style-type: none;
	margin: 1rem 0;
	padding: 0 .5rem;
	font-size: 1.2rem;
	text-align: left !important;
	break-inside: avoid;
}

.col2or1 li {
	text-align: left !important;
	break-inside: avoid;
}

.force1col {
	columns: 1 !important;
	column-width: 100% !important;
}

/* Remove list disc on pictures */
li.nodisc { list-style: none; }

.col2or1 ul ul, .suplist ul {
	list-style: disc;
	text-align: left;
}

/* Return to Table of Contents */
div.rtn2toc {
	width: max-content;
	margin: 1rem auto 0 auto;
	border: 1px solid gray;
	border-radius: .5rem;
	box-shadow: .2rem .2rem .3rem gray;
	text-align: center;
	background: #f5f5f5;
	padding: 3px .2rem;
}
div.rtn2toc::before, div.rtn2toc::after { content: "\00A0\2014\00A0" }

/* Page Buttons */
div#pgbtn { padding: 1rem; }

a.page-button {
	background-color: var(--STMpink);
	border: 1px solid black;
	border-radius: 1rem;
	box-shadow: .2rem .2rem .3rem gray;
	padding: .3rem 1rem;
	margin: 1rem;
}
a.page-off {
	background-color: silver;
	color: black;
	cursor: default;
	pointer-events: none;
	text-decoration: none;
}

/* Section Header for links area */
h2.sechead {
	border: 1px #808080 solid;
	border-radius: 1rem;
	background: linear-gradient(to bottom, #f7eed9 0%,#dad2c1 50%,#bfb8aa 100%);
	margin: 15px auto;
	padding: 5px;
	text-align: center;
	letter-spacing: 3px;
	text-shadow: 2px 2px 2px #b0b0b0;
	box-shadow: 3px 3px 5px 0px gray;
}

h3 { /* Section Headings */
	margin: 1.2rem 0 0 0;
	background-color: white;
	text-shadow: 3px 3px 3px silver;
	text-align: center;
	width: 100%;
	padding: 4px;
	border-bottom: 1px gray solid;
	border-right:  1px gray solid;
	border-radius: .63rem;
	box-shadow: 2px 2px 4px 0 gray;
}

h3 + p { margin-top: 6px; }

h4 { /* Section Headers in Suppliers */
	margin: 1rem 0 0 0;
	padding: 0.25rem;
	background-color: #F8F8F8;
	text-align: center;
	border-bottom: 1px gray solid;
	border-right: 1px gray solid;
	border-radius: 5px;
    box-shadow: 1px 1px 4px 0px gray;
}

h4 + ul { margin-top: .4rem; }

/* Supplier bubble */

div.supply {
	border: 1px #808080 solid;
	border-radius: 20px;
	background-color: #F0F0F0;
	margin: 15px auto;
	text-align: center;
}

div.supply div.supplyhdr {
	background-color: #E0E0E0;
	border-radius: 20px 20px 0 0;
	padding: 3px 15px;
	border-bottom: 1px solid black;
	box-shadow: 0px 2px 2px 0px gray;
	margin-bottom: 5px;
}

h2#Suppliers { text-shadow: 3px 3px 3px #AAAAAA; }

div.LinksEnd { /* End Note Bubble */
	border: 1px #808080 solid;
	border-radius: 20px;
	background-color: #F8F8F8;
	margin: 30px auto 15px auto;
	padding: 0px 10px;
 }

figcaption { font-size: .8rem; }

/* Overrides for Narrow Devices */
@media only screen and ( max-width: 480px ) {
	.col2or1 { columns: 1; column-width: 100%; }
	.col2or1, .col2or1 ul { font-size: 2rem; }
	.col2or1 li { line-height: 3rem; }
	.page-button { font-size: 2rem;  }
	figcaption { font-size: 1.2rem;  }
	h4.atend { font-size: 1.8rem; }
}
/* End of STM_links_style.css */