/* Darmalus Website of Furry Stuff */
/* Update: 2024 June 07 */


:root {
	--owner_Darmalus: RoyalBlue;
		--owner_BG_Darmalus: var(--owner_Darmalus);
		--owner_Border_Darmalus: Blue;
		--owner_BG_Light_Darmalus: LightSkyBlue;
		--owner_BG_Lighter_Darmalus: LightBlue;
		--owner_BG_Bright_Darmalus: Cyan;
				--owner_Border_Bright_Darmalus: Navy;
		--owner_BG_Contrast_Darmalus: Gold;
			--owner_Border_Contrast_Darmalus: Black;
	
	--owner_MissMortis: Maroon;
		--owner_BG_MissMortis: var(--owner_MissMortis);
		--owner_Border_MissMortis: Crimson;
		--owner_BG_Light_MissMortis: IndianRed;
		--owner_BG_Lighter_MissMortis: Salmon;
		--owner_BG_Bright_MissMortis: Red;
				--owner_Border_Bright_MissMortis: Black;
		--owner_BG_Contrast_MissMortis: SeaGreen;
			--owner_Border_Contrast_MissMortis: Indigo;
			
	--owner_Nebula: MediumOrchid;
		--owner_BG_Nebula: var(--owner_Nebula);
		--owner_Border_Nebula: Indigo;
		--owner_BG_Light_Nebula: LightSkyBlue;
		--owner_BG_Lighter_Nebula: LightBlue;
		--owner_BG_Bright_Nebula: Cyan;
				--owner_Border_Bright_Nebula: Navy;
		--owner_BG_Contrast_Nebula: Gold;
			--owner_Border_Contrast_Nebula: Black;
			
	--owner_Valor: LightPink;
		--owner_BG_Valor: var(--owner_Valor);
		--owner_Border_Valor: Blue;
		--owner_BG_Light_Valor: LightSkyBlue;
		--owner_BG_Lighter_Valor: LightBlue;
		--owner_BG_Bright_Valor: Cyan;
				--owner_Border_Bright_Valor: Navy;
		--owner_BG_Contrast_Valor: Gold;
			--owner_Border_Contrast_Valor: Black;
			
	--owner_Trainmaniac: LightSlateGrey;
		--owner_BG_Trainmaniac: var(--owner_Trainmaniac);
		--owner_Border_Trainmaniac: Blue;
		--owner_BG_Light_Trainmaniac: LightSkyBlue;
		--owner_BG_Lighter_Trainmaniac: LightBlue;
		--owner_BG_Bright_Trainmaniac: Cyan;
				--owner_Border_Bright_Trainmaniac: Navy;
		--owner_BG_Contrast_Trainmaniac: Gold;
			--owner_Border_Contrast_Trainmaniac: Black;
			
	--owner_Light: Cyan;
		--owner_BG_Light: var(--owner_Light);
		--owner_Border_Light: Blue;
		--owner_BG_Light_Light: LightSkyBlue;
		--owner_BG_Lighter_Light: LightBlue;
		--owner_BG_Bright_Light: Cyan;
				--owner_Border_Bright_Light: Navy;
		--owner_BG_Contrast_Light: Red;
			--owner_Border_Contrast_Light: Black;
			
	--owner_Knotty: Chartreuse;
		--owner_BG_Knotty: var(--owner_Knotty);
		--owner_Border_Knotty: Blue;
		--owner_BG_Light_Knotty: LightSkyBlue;
		--owner_BG_Lighter_Knotty: LightBlue;
		--owner_BG_Bright_Knotty: Cyan;
				--owner_Border_Bright_Knotty: Navy;
		--owner_BG_Contrast_Knotty: Gold;
			--owner_Border_Contrast_Knotty: Black;
			
	--owner_Pandoji: SteelBlue;
		--owner_BG_Pandoji: var(--owner_Pandoji);
		--owner_Border_Pandoji: Blue;
		--owner_BG_Light_Pandoji: LightSkyBlue;
		--owner_BG_Lighter_Pandoji: LightBlue;
		--owner_BG_Bright_Pandoji: Cyan;
				--owner_Border_Bright_Pandoji: Navy;
		--owner_BG_Contrast_Pandoji: Gold;
			--owner_Border_Contrast_Pandoji: Black;
			
	--owner_GeneKruger: Orange;
		--owner_BG_GeneKruger: var(--owner_GeneKruger);
		--owner_Border_GeneKruger: Blue;
		--owner_BG_Light_GeneKruger: LightSkyBlue;
		--owner_BG_Lighter_GeneKruger: LightBlue;
		--owner_BG_Bright_GeneKruger: Cyan;
				--owner_Border_Bright_GeneKruger: Navy;
		--owner_BG_Contrast_GeneKruger: Gold;
			--owner_Border_Contrast_GeneKruger: Black;
			
	--owner_ShadHellCat: Yellow;
		--owner_BG_ShadHellCat: var(--owner_ShadHellCat);
		--owner_Border_ShadHellCat: Blue;
		--owner_BG_Light_ShadHellCat: LightSkyBlue;
		--owner_BG_Lighter_ShadHellCat: LightBlue;
		--owner_BG_Bright_ShadHellCat: Cyan;
				--owner_Border_Bright_ShadHellCat: Navy;
		--owner_BG_Contrast_ShadHellCat: Gold;
			--owner_Border_Contrast_ShadHellCat: Black;
	
	--page_title_color_BG: whitesmoke;
	--page_title_color_border: white;
	
	--short_profile_iframe_border_color: silver;
	--short_profile_iframe_text_BG_color: whitesmoke;
		
	}

	/* Default BG */
	
body {
	background-color: whitesmoke; 
}

body {
		text-align: center;
		padding: 0 1% 0 1%;
	}

fieldset {
		border: 2px solid black;
		background-color: #FFFFFF;  	/* white */
		display: inline;
	}
	
legend {
		font-size: 2em; 
		font-weight: bold;
		border: 2px solid black;
		background-color: #FFFFFF;		/* white */
		padding: 0 10px 0 10px;
	}

table {
		border: 1px solid black; 
		background-color: #FFFFFF;  	/* white */
		margin-right: auto;
		margin-left: auto;
	}

th, td {
		border: 1px solid black;
		padding: 5px;
		text-align: center;
	}	
	
ol, ul {
		overflow: hidden;		/* Prevents lists overlapping with nearby images */
		padding-left: 40px;		/* Prevents lists overlapping with nearby images */
		margin-left: 0;			/* Prevents lists overlapping with nearby images */
		text-align: left;
	}
	
dl {
		overflow: hidden;		/* Prevents lists overlapping with nearby images */
		padding-left: 10px;		/* Prevents lists overlapping with nearby images */
		margin-left: 0;			/* Prevents lists overlapping with nearby images */
		text-align: left;
	}
	
	
li {
		list-style-position: outside; 	/* Prevents lists overlapping with nearby images */
		padding-left: 0; 				/* Prevents lists overlapping with nearby images */
	}
	
button {
		overflow: hidden;
	}

	/* character iframes */
	
div.iframe_short_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	gap: 0px;
	margin: 10px;
}
	
	iframe.short_profile_iframe {
			height: 380px;		/* Short Profiles */
			width: 865px;		/* Short Profiles */
			border-width: 10px;
			border-style: inset;
			border-color: var(--short_profile_iframe_border_color);
			
	}

	div.iframe_text_box {
		background-color: var(--short_profile_iframe_text_BG_color);
		padding: 10px;
		border: 10px inset var(--short_profile_iframe_border_color);
		width: 380px;
	}
	
	div.iframe_text_box > header {
		font-weight: bold;
		font-size: 2em;
		text-align: center;
		display: inline-block;
		border-radius: 10px;
		margin: 10px;
		padding: 0px 10px 0px 10px;
	}
	
	div.iframe_text_box > article {
		border-radius: 10px;
		padding: 5px;
	}
	
	div.iframe_text_box > footer {
		
	}
	
	div.iframe_text_box > aside {
		
	}

	
	
	
	
hr {
		height:4px; 
		border-width: 0; 
		color: black; 
		background-color: black;
	}
	
	hr.blank_hr {
		width: 0px;
	}

	hr.SPACER {
		width: 0px;
	}

details {
		border-width: 0; 
		border-style: none;
	}

div.page_title {
	display: inline-block;
	font-weight: bold;
	font-size: 5em;
	background-color: var(--page_title_color_BG);
	border-color: var(--page_title_color_border);
	border-width: 10px;
	border-style: solid;
	border-radius: 50px;
	padding: 10px 50px 10px 50px;
	margin: 10px;
	text-align: center;
}

.Web_Button {
		height: 31px;
		width: 88px;
		margin: 2px;
	}




	

	

	
.unseen_table {										/* Makes the table invisible. Do not use on nested tables. */
		background-color: rgba(0, 0, 0, 0);
		border-collapse: collapse;
		th, td {border-style: hidden;}
	}
	
		
	/* Primary Divs */
	
	
div.header {
	min-width: 1200px;
	width: 85%;
	}
	
div.header_full {		/* No Floating Nav Bar */
	min-width: 1200px;
	width: 100%;
	}
		
div.main {
	min-width: 1200px;
	width: 85%
	}

div.main_full {			/* No Floating Nav Bar */
	min-width: 1200px;
	width: 100%;
	}

div.footer {
	min-width: 1200px;
	width: 85%
	}
	
div.footer_full {		/* No Floating Nav Bar */
	min-width: 1200px;
	width: 100%;
	}
	
		/* Top Nav Bar */
		
nav.Nav_Bar_Container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
		
nav.Nav_Bar_Container > .Nav_Bar_Button {
		background-color: gold;
		border: 5px outset black;
		border-radius: 10px;
		padding: 5px 10px 5px 10px;
		font-weight: bold;
		text-align: center;
}

nav.Nav_Bar_Container > .Nav_You_Are_Here {
		background-color: Aqua;
		border: 5px inset indigo;
		border-radius: 10px;
		padding: 5px 10px 5px 10px;
		font-weight: bold;
		text-align: center;
}

nav.RTTnav {								/* Goes at the bottom. Return to Top, Page BG link, Nav Bar at very bottom */
	background-color: gold;
	margin: 5px;
	display: inline;
	border: 5px outset Black;
	border-radius: 10px;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	text-align: center;
	}

div.Floating_Sidebar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	
	padding: 25px 25px 25px 25px;
	max-width: 10%;
	float: right;
	text-align: center;
	position: fixed;
	right: 1%;
	border-style: outset;
	border-radius: 20px;
	border-width: 5px;
	border-color: Black;
	background-color: gold;
	font-size: 1.125em;
	font-weight: bold;
	color: White;
}

	.Sidebar_Button {
		border: 4px outset black;
		background-color: Ivory;
		padding: 10px;
		border-radius: 10px;
	}

	.Sidebar_HR {
		width: 50px;
		height: 2px;
		border-width: 0px;
		color: black;
		background-color: black;
	}

.Local_Page_Button {
	border: 5px outset black;
	background-color: gold;
	font-size: 1.25em;
	font-weight: bold;
	padding: 10px;
	border-radius: 10px;
	margin-left: 5px;
	margin-right: 5px;
	}

.Outside_Site_Button {
	border: 5px inset dimgrey;
	background-image: url('../ASSETS/BACKGROUND/Outside_Site.png');
	padding: 10px;
	font-size: 1.25em;
	font-weight: bold;
	margin-left: 5px;
	margin-right: 5px;
	}
		
	/*Character iframe boxes with explanation*/
div.Character_Container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	gap: 0px;
	margin: 10px;
	
	& .Character_Header {
		font-weight: bold;
		font-size: 2em;
		text-align: center;
		display: inline-block;
		border-radius: 10px;
		margin: 10px;
		padding: 0px 10px 0px 10px;
		}
	
	& .Character_Text_Box {
		background-color: IndianRed;
		padding: 10px;
		border: 10px inset red;
		width: 380px;
}
	
	
	
	
	
}	
		
		
		

		/* Visibility classes */
.REMOVE {
	display: none !important; /* completely removes the element */
	}
.NO_SHOW {
	display: hidden !important;  /* element takes space but is invisible */
	}
	

	
		/* Links, always last */
	
a:link {
		color: blue;
		font-weight: bold;
	}
a:visited {
		color: blue;
		font-weight: bold;
	}
a:hover {
		color: red;
		font-weight: bold;
	}
a:active {
		color: pink;
		font-weight: bold;
	}