/*  *************    master.css psychosocial   *****************  */

body {
	font-family: Arial;
	font-size: 1em;
	background-image: url(Bubbles04.png);
	background-size: cover;
	background-attachment: fixed;
}
	
.main {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 4.5em 5% 3em 8%;
	max-width: 80%;
	margin: 0 auto 0;
	background-color: white; 
}
	
a {
	color: darkorange;
	text-decoration: none;
}

a b {
	line-height: 0;
	font-weight: 900;}
	}

sup a {text-decoration: underline}


/* TYPOGRAPHY */

h1 {
	font-family: Arial;
	font-size: 3.5em;
	font-weight: 900;
	color: gray;
	margin-bottom: 0.5em;
}
h2 {
	font-family: Arial;
	font-size: 1.75em;
	font-weight: 900;
	color: gray;
	margin-bottom: 1.5em;
}
h3 {
	font-family: Arial;
	font-size: 1.25em;
	font-weight: 900;
	color: gray;	
	margin-top: 1em;
	margin-bottom: 0.75em;
}
footer {
	font-family: Arial;
	font-size: 0.75em;
	font-weight: 900;
	color: gray;	
	margin-top: 3em;
	margin-bottom: 4em;
}
p {
	font-family: Arial;
	font-size: 1em;
	font-weight: normal;
	color: black;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	line-height: 144%;
	letter-spacing: 0.027em;
	white-space: pre-wrap;
}
	
span:target {
	background: yellow;}

sup {
	position: relative; 
	top: -0.5em; 
	line-height: 0;
	font-size: 0.7em;
	font-weight: 600;}
	
sub {
	position: relative; 
	top: -0.5em; 
	line-height: 0;
	font-size: 0.7em;
}

blockquote {
	overflow: auto;
	font-family: Times Roman;
	font-size: 1em;
	font-style: italic;
	padding: 1em;
	margin: 0 3em 0em 1em;
	background: WhiteSmoke ;
	}

img.quoteleft {
	float: left;
	vertical-align: text-top;
	width: 2.5em;
	margin: 0 0.8em 0.2em 0;
}
img.quoteright {
	clear: left;
	float: right;
	width: 2.5em;
	margin:  0.2em 0.2em 0;
}

/*
.note {
	font-family: Arial;
	font-size: 0.75em;
	font-weight: 900;
	color: gray;	
	margin-top: 3em;
	margin-bottom: 0.75em;
}
*/
.footnote {
	display: none;
	font-size: 0.75em;
	padding: 2em 1em;}

.footnote:target {
	display: block;
	background: lavender ;
	}

.footnote blockquote {
	font-size: 1.1em;
	}	

/* ***** w3schools tooltip code ****** */

.tooltip {
	position: relative;
	border-bottom: 3px dotted RED;
}
.tooltip .tooltiptext {
	visibility: hidden;
	width: 10em;
	border-radius: 6px;
	background-color: silver ;
	color: maroon;
	padding: 0.3em 0.5em;
	text-align: center;
	font-family: Times Roman;
	font-size: 0.9em;
	line-height: 110%;
	position: absolute;
	bottom: 1.7em;
	right: -2.8em;
}
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 70%;
	margin-left: -1em;
	border-width: 0.5em;
	border-style: solid;
	border-color: silver transparent transparent transparent;
}
.tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext {
	visibility: visible;
}
/* end w3schools tootlip */

em {
	font-style: normal;	
	color: darkgray;	
	font-size: 0.95em; 
	letter-spacing: normal;}
	
.small {font-size:0.75em; font-weight: 600;}


/* INLINE TOOLTIPS */

.linkHead {
	font-weight: normal;
	font-size: 0.5em;
}
.link {
	color: orange;
	font-size: 0.75em;
	font-family: arial;
	font-weight: normal;
}
.hideaway {
	font-family: arial;
	font-style: italic;
	white-space: normal;
}
.hiddentxt {
	white-space: normal;
	/*letter-spacing: 0.1em;*/
}
.hideaway .hiddentxt {
	display: none;
}
.hideaway:hover .hiddentxt, img.inline:hover .hiddentxt, .hideaway:active .hiddentxt, img.inline:active .hiddentxt {
	display: inline;
	color: darkred;
	font-family: times;
	font-weight: 600;
	/*background: WhiteSmoke ;*/
	white-space: normal;
}
img.inline {
	height: 1em;
	width: 1em;
}
	
/*  ****  @media rules  **** */

@media (max-width: 700px) {
	.main {
		padding: 2em 5% 3em 8%;
		max-width: 100%;
	}
	h1 {
		font-size: 3em;
		overflow-wrap: break-word;
	}
	h2 {
		font-size: 1.5em;
	}
	blockquote {
	margin: 0 0 1em;
	padding: 1em 0 1em;
	}
}