/* PracticalSundials.css */

:root {
	--pageclr:	DarkBlue;
	--pagebg:	#c0e8f6;
	--menuhilite:	CornflowerBlue;
	--headerclr:	Yellow;
	--headerbg:	DarkBlue;
	--logobg:	CornflowerBlue;
	--textclr:	black;
	--textbg:	Azure;
	--menuclr:	var(--headerclr);
	--menubg:	var(--headerbg);
}

body {
	margin:	0;
	padding:	0;
	background-color:	var(--pagebg);
	background-image:	url("Sun-BG.png");
	background-position:	center top;
	background-size: 800px 800px;
	line-height:	1;
	color:	var(--pageclr);
	font-size:	20px;
}

a	{
	text-decoration:	none;
/*	margin:	10px;*/
}

p {
	margin-top:	0;
	margin-bottom:	0.5em;
/*	text-indent:	0.3em;*/
}

.logo {
	background-color:	var(--logobg);
	background-image:	url("Logo.png");
	background-position:	center;
	background-size: 270px 111px;
	background-repeat: no-repeat;
	border-color:	var(--headerbg);
	border-style:	solid;
	border-radius:	10px;
	opacity:	0.7;
}

.header {
	background-color:	var(--headerbg);
	opacity: 0.7;
	border-style:	solid;
	border-color:	var(--logobg);
	border-radius:	10px;
	text-align:	center;
	vertical-align:	middle;
	color:	var(--headerclr);
	font-size:	56px;
	font-weight:	bold;
	font-style:	italic;
}

.title {
	display:	table-cell;
	margin-top:	15px;
	border-radius:	10px;
	border-style:	solid;
	border-width:	2px;
	background-color:	var(--textbg);
	opacity:	0.7;
	padding:	7px;
	font-size:	32px;
	font-weight:	bold;
}

.textbox {
	padding:	15px;
	padding-bottom: calc(15px - 0.5em);
	background-color:	var(--textbg);
	opacity:	0.7;
	color:	var(--textclr);
	text-align:	justify;
	border-radius:	10px;
	border-style:	solid;
}

.bottomlink {
	margin-bottom:	1.5em;
	float:	right;
	font-size:	inherit;
	font-style:	italic;
}

.backlink {
	display:	inline;
	float:	left;
}

.picframe {
	border-style:	solid;
	border-width:	1px;
	border-radius:	10px;
	width:	400px;
	padding:	10px;
	padding-bottom:	3px;
	margin-bottom:	5px;
	background-color:	var(--textbg);
	opacity:	0.7;
}

.picframes {
	border-style:	solid;
	border-width:	2px;
	border-radius:	10px;
	width:	400px;
	padding:	0;
	padding-bottom:	3px;
	margin-bottom:	5px;
	background-color:	white;
/*	opacity:	0.7;*/
}

.pic {
	margin-bottom:	2px;
	border-radius:	10px;"
}

.popup	{
	position:	absolute;
	padding:	5px;
	color:	navy;
/*	background-color:	none;*/
	border-style:	solid;
	border-width:	3px;
	font-size: 18px;
	font-weight:	bold;
	opacity:	0;
}

.popup:hover	{
	opacity:	1;
}

.popup-content	{
	position:	absolute;
	left:	5px;
	bottom:	110%;
	padding:	5px;
	color:	#acd9ed;
	background-color:	var(--menubg);
	border-style:	solid;
	border-width:	3px;
	font-size: 18px;
	font-weight:	bold;
	display: none;
}

.popup-content:hover	{
	display: none;
}

.popup:hover .popup-content	{
	display:	block;
}

.menu {
	overflow:	hidden;
	color:	#acd9ed;
	background-color:	var(--menubg);
	font-family:	Times;
	font-size:	18px;
	font-weight:	bold;
}

.menu a {
	color:	var(--menuclr);
	float:	left;
	font-size: 18px;
	text-align: center;
	padding-left:	5px;
	padding-right:	5px;
	text-decoration: none;
	padding-top: 4px;
	padding-bottom: 2px;
}

.dropdown {
	float:	left;
	overflow:	hidden;
}

.dropdown .dropbtn {
	font-family:	Times;
	font-size:	18px;
	font-weight:	bold;
	border:	none;
	outline:	none;
	color:	var(--menuclr);
	padding-left:	5px;
	padding-right:	5px;
/*	padding:	14px 16px; */
	background-color:	inherit;
	padding-top: 4px;
	padding-bottom: 2px;
}

.menu a:hover, .dropdown:hover .dropbtn {
    background-color:	var(--menuhilite);
    color:	var(--menuclr);
}

.dropdown-content {
    display: none;
    position: absolute;
    bottom:	26px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:	1;
}

.dropdown-content a {
	float: none;
	color:	#acd9ed;
	background-color: var(--menubg);
	font-size:	16px;
	font-weight:	bold;
/*	padding: 7px;*/
	padding-left:	5px;
	padding-right:	5px;
	padding-top: 4px;
	padding-bottom: 2px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--menuhilite);
}

.dropdown:hover .dropdown-content {
/*	right:	right;*/
	display:	block;
}