/* style.css - style for jsn pages */
/*
 * +-+-+-+-+-+-+-+-+-+-+-+-+-+
 * |m|o|u|n|t|a|i|n|e|e|r|b|r|
 * +-+-+-+-+-+-+-+-+-+-+-+-+-+
 */

/*
 * Try to stick to the "standard 16" color names:
 * aqua, black, blue, fuchsia, gray, green, lime, maroon,
 * navy, olive, purple, red, silver, teal, white, and yellow
 */


/* @import "../../css/style.css"; */

/*
 * Google Fonts
 * Don’t just copy the @font-face out of Google Fonts URLs 
 * https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/
 */

/* @import url("https://fonts.googleapis.com/css?family=Playfair Display"); */
@import url("https://fonts.googleapis.com/css?family=Kreon");

/* W3.CSS framework */
/* changelog: https://www.w3schools.com/w3css/w3css_downloads.asp */
/* @import url("https://www.w3schools.com/w3css/4/w3.css"); */
@import "w3.css";

/* Microformats styles */
@import "style_microfmt.css";

/* Fonts Arial Black Style */
@import "style_arialb.css";



/* ROOT VARIABLES */
:root
{
	/* Body maximum width */
	--body-width: 60em;


	/* Colors */
	--stallman-red: #f44;  /* #ff4444 */
	--stallman-blue: #1F00FF;
	--stallman-purple: #9900DD;
	--stallman-lightpurple: #9932CC;

	--purple: #6F2493;
	--blue: #1e90ff;
	--white: #ffffff;
}


/* ELEMENTS */
body
{
	background-color: floralwhite;
	max-width: 60em;
	margin: 0 auto 0 auto;
	padding: 0rem 0.8rem 0rem 0.8em;
}

nav, footer
{
	font-size: small;
	text-transform: uppercase;
}

/*
 * nav
 * {
 * 	border-top: 1px solid black;
 * 	border-bottom: 1px solid black;
 * 	font-size: small;
 * 	font-style: italic;
 * 	background-color: orange;
 * }
 * nav table
 * {
 * 	margin-top: 0em;
 * 	margin-left: 1em;
 * }
 */

article
{
	padding: 2rem 0 2rem 0;
}

article nav
{
	margin: 1rem 0 0 0;
	color: gray;
}

img
{
	margin: 2em;
}

figure
{
	display: table;
	margin: 2rem auto 0.5rem auto;
}

figure img
{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
/* maximum of 80% of image size */

figcaption
{
	display: table-caption;
	caption-side: bottom;
	max-width: 100%;
}
/*
 * you should probably also add some top and bottom margin for figure
 * and also some left margin. html5 drafts suggest a left margin of 40px
 * https://www.mikedoesweb.com/2013/properly-aligning-and-wrapping-image-captions/
 * http://jkorpela.fi/www/captions.html
*/


blockquote
{
	display: block;
	background: ivory;
	padding: 1rem 1rem 1rem 2rem;
	margin: 2rem 2.7rem 2rem 2.7rem;
	font-style: italic;
	/* font-family: "Playfair Display"; */
	font-family: "Kreon", sans-serif;
	font-size: 1.2em;
	word-wrap: normal;
	overflow: visible;
}
/*
 * blockquote:before
 * {
 * 	content: open-quote;
 * 	font-size: 2em;
 * }
 */

blockquote footer
{
	font-size: small;
	font-style: normal;
}

q
{
	font-style: italic;
}


/* separators for post text sections */
hr
{
	margin: 2em auto 2em auto;
	width: 30%;
	border-top: 1px solid black;  /*or border-color: black; */
}

pre, code, kbd, samp
{
	/* font-family: monospace, monospace; */
	font-family: Consolas, "courier new", monospace;
}
/* alse set <var>? */

pre
{
	display: block;
	word-wrap: normal;
	overflow: auto;
	margin: 2rem 2.7rem 2rem 2.7rem;
	/* padding: 1rem 1rem 0rem 1rem; */
}

code
{
	/* background-color: #f1f1f1; */
	background: aliceblue;
	color: firebrick;
	padding: 2px;
	font-size: 104%;
}

pre > code
{
	/* color: silver; */
	/* color: lime; */
	display: block;
	color: silver;
	background: black;
	word-wrap: normal;
	overflow: auto;
	font-weight: bold;
	padding: 1rem 1rem 1rem 2rem;
}
/* https://websemantics.uk/articles/displaying-code-in-web-pages/ */

/* português */
/* section[lang="pt"], 
 * div[lang="pt"],
 * p[lang="pt"]
 * {
 * 	border: 1px inset floralwhite;
 * 	padding: 1em;
 * 	* margin: 0.2em; * 
 * 
 * }
 */

/* english */
span[lang|=en],
dd[lang|=en],
li[lang|=en],
p[lang|=en]
{
	font-style: italic;
}


/* CLASSES */
/* colours */
.c0
{
	background-color: gold;
}

/* need hover for accessibility */
:link { color: #1F00FF; }
:visited { color: #9900DD; }
a:link:hover
{
	color: #9932CC;
}
a:link:hover, a:visited:hover
{
	font-style: italic;
	text-shadow: 2px 2px 9px #f44;
} 
/* from: https://stallman.org/common/stallman.css */


.navbar a:link,
.navbar a:visited
{
	color: var(--stallman-blue);
	text-decoration: none;

}
.navbar a:hover
{
	background-color: var(--stallman-blue);
	color: floralwhite;
	text-shadow: 2px 2px 9px floralwhite,
		1px 1px 6px azure;
	text-decoration: none;
}
.navbar a
{
	font-family: ArialB, "Arial Black", Gadget, sans-serif;
	font-size: small;
	font-variant: small-caps;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
}

.lo-round-border
{
	border-radius: 0 0 .4em .4em;
}

.alert0
{
	/* border: 0.31em outset crimson; */
	border: 0.42em outset orange;
	padding: 0.6em;
	background-color: white;
	text-align: center;
}

.alert
{
	border: 0.31em outset red;
	background-color: lightblue;
	text-align: center;
}

.pseudohidden
{
	/* visibility: hidden; */
	/* opacity: 0.0; */
	display: none;
}
/* won't be hidden if does not access this style sheet */

.postfeed
{
	float:right;
	margin: 0.12em 2em 0 0;
	padding: 0em;
}


/* responsive blog index */
.responsive0
{
	margin: 0rem 0rem 1rem 0rem;
}


/* responsive images */
/* If you want the image to scale both up and down on responsiveness */
.responsive1
{
	width: 100%;
	height: auto;
}


/* If you want an image to scale down if it has to, but never scale up to be larger than its original size */
.responsive2
{
	max-width: 100%;
	height: auto;
}

/* If you want to restrict a responsive image to a maximum size */
.responsive3
{
	width: 100%;
	max-width: 400px;
	height: auto;
}

/* center alignment, from w3 */
.center
{
	/* display: block; */
	margin-left: auto;
	margin-right: auto;
	width: auto;
	height: auto;
}


/* separators for post text sections */
.sep
{
	width: 100%;
}

/* clear rule: https://www.hostpapa.com/knowledgebase/align-float-images-website/ */



/* BUTTONS */
.button
{
	border: none;
	color: white;
	padding: 0.6em 1.2em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition-duration: 0.16s;
	cursor: pointer;
	font-family: ArialB, "Arial Black", Gadget, sans-serif;
	font-size: small;
	/* font-style: italic; */
	font-variant: small-caps;
}

.button1
{
	background-color: white; 
	color: black; 
	border: 2px solid #4CAF50;
}
.button1:hover
{
	background-color: #4CAF50;
	color: white;
}

.button2
{
	background-color: white; 
	color: black; 
	border: 2px solid #008CBA;
}
.button2:hover
{
	background-color: #008CBA;
	color: white;
}



/* MICROFORMATS */
.p-summary
{
	font-style: italic;
}

.p-author
{
	font-style: italic;
}

.postlist
{
	margin: 1em 0em 2em 0em;
}
.postlist li
{
	padding: 0.4em 0.8em 0.4em 0em;
}


/* TABLES */
table
{
	margin-top: 1em;
}


/* add borders to table */
table.tborder,
.tborder th,
.tborder td
{
	border: 1px solid black;
}
.tborder th,
.tborder td
{
	padding: 0.2em;
}

/* collapse table borders */
table.tbcollapse,
.tbcollapse th,
.tbcollapse td
{
	border: 1px solid black;
	border-collapse: collapse;
}

/* tables */
/* table 01 */
/* post 4 */
#t01 img
{
	margin: .2em 0 .2em 0;
}
#t01 th,
#t01 td
{
	padding: 0 0.4em 0 0.4em;

}
#t01 td
{
	text-align: left;
}
#t01 th,
#t01 td:first-child,
#t01 td:nth-child(2)
{
	text-align: center;
}
#t01 th,
#t01 td:nth-child(2)
{
	font-family: ArialB, "Arial Black", Gadget, sans-serif;
}


/* table 02 */
/* post 5 */
#t02 td
{
	text-align:center;
}
#t02 td:nth-child(2)
{
	text-align:left;
}


/* table 03 */
/* post 9 */
#t03
{
	overflow: auto;
}
#t03 td
{
	text-align: left;
}
#t03 th,
#t03 td:first-child,
#t03 td:nth-child(2),
#t03 td:nth-child(3)
{
	text-align: center;
}
#t03 th,
#t03 td:first-child
{
	font-family: ArialB, "Arial Black", Gadget, sans-serif;
}

/* table 04 */
#t04 th,
#t04 td
{
	text-align: center;
}
#t04 th,
#t04 td:first-child
{
	font-family: ArialB, "Arial Black", Gadget, sans-serif;
}
#t04 td
{
	padding: 0.6em;
}

/* table 05 */


@media only screen and (max-width: 600px)
{
	body
	{
		padding-right: 0.4em;
		padding-left: 0.4em;
	}

	blockquote
	{
		margin-left: 1em;
		margin-top: 1em;
		margin-bottom: 1em;
	}


	.postlist li
	{
		padding-right: 0.6em;
	}

	/* microformat adjustment */
	li a.p-name
	{
		font-size: 1.06em;
	}

	/* w3css style adjustment */
	.w3-container, .w3-panel
	{
		padding: 0;
	}
}

/* print styles */
@media print
{
	*
	{
		background-color: transparent;
		color: black;
		/* text-decoration: none; */
	}

}