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

body {
	font-family: Sans-Serif;
	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; 
}


/* TYPOGRAPHY */

h1 {
	font-family: Sans-Serif;
	font-size: 3.5em;
	font-weight: 900;
	color: gray;
	margin-bottom: 0.5em;
}
h2 {
	font-family: Serif;
	font-size: 1.75em;
	font-weight: 500;
	color: Slategray;
	margin-bottom: 1.5em;
}
h3 {
	font-family: Sans-Serif;
	font-size: 1.25em;
	font-weight: 900;
	color: gray;	
	margin-top: 1em;
	margin-bottom: 0.75em;
}
p {
	font-family: Sans-Serif;
	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;
}
footer {     /* for attribution data after articles */
	font-family: Sans-Serif;
	font-size: 0.75em;
	font-weight: 900;
	color: gray;	
	margin-top: 3em;
	margin-bottom: 4em;
}
b {font-weight: bold;}	
em {
	font-style: normal;	
	color: Gray;	
	font-size: 0.95em; 
	letter-spacing: normal;}
	
.small {font-size:0.75em; font-weight: 600;}

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

/*  ************  QUOTATIONS & FOOTNOTES **************  */

blockquote {
	overflow: auto;
	font-family: Times Roman;
	font-size: 1em;
	font-style: italic;
	padding: 1em;
	margin: 0 3em 0 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;
}

.footnote {
	display: none;
	font-size: 0.75em;
	padding: 2em 1em;}

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

.footnote blockquote {
	font-size: 1.1em;
	}	
.intip-icon {
	display: none;
	font-size: 0.75em;}
	
.intip-icon:target {display: inline;}

/* *********************  LINKS  ********************** */

a {
	color: darkorange;
	text-decoration: underline;
	text-decoration-style: double;
	text-decoration-color: Silver;  /* or SpringGreen or #98FB98 or palegreen */
}
a.int-txt, a.int-icon, a.ftnt-icon, a.intip-icon {
	color: Lime;   /* or #33dd66 was orangered */
}
a.intip-icon {
	text-decoration: none;
	font-weight: bold;
}
a.ext-txt, a.ext-icon {
	color: Royalblue;
}
a.navi-icon {  /*  for navigation icons in text  */
	color: darkorange;
	text-decoration: underline;
	text-decoration-style: double;
	text-decoration-color: darkorange;
}
/*  for navigation icons in text  */
.footnote a.navi-icon {  
	color: darkorange; /* changed color here overrides previous */
	text-decoration: overline;
	text-decoration-style: double;
	text-decoration-color: darkorange;
}
.footnote a.ext-icon {  
	color: darkorange;  /* if I change the color here it don't */
	text-decoration: overline;
	text-decoration-style: double;
	text-decoration-color: darkorange;
}

span:target {  /* for footnotes to link back to */
	background: Thistle;}
	
	

/* ***** 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 */


/* INLINE TOOLTIPS */

.linkHead {
	font-weight: normal;
	font-size: 0.5em;
}
.link {
	color: orange;
	font-size: 0.75em;
	font-family: Sans-Serif;
	font-weight: normal;
}
.hideaway {
	font-family: Sans-Serif;
	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: serif;
	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;
	}
}


/*
.insertion {
	font-family: Sans-Serif;
	font-size: 0.75em;
	font-weight: 900;
	color: gray;	
	margin-top: 3em;
	margin-bottom: 0.75em;
}
*/