/*
Theme Name: HPL Theme, authored by CJ Rhoads with help from Mykhailo Osekretov and Fabian von Romberg  and Aysun Itai
This theme was started in April 2014.(Based initially on "Nearly-Sprung"  from http://geriandricky.maxwells.net.nz/2006/07/30/nearly-sprung-wordpress-theme/ by Richard "Jodi" Maxwell, which was based on Description: 3 Column Rework of "Almost-Spring" by Becca Wei, http://beccary.com/goodies/wordpress-themes/. Becca based the theme on 'The Holy Grail of Layouts: Example #2: A List Apart', http://www.alistapart.com/articles/holygrail.  Also includes the IE7 Holy Hack fix found via http://blog.skagirlie.net/)
In February of 2023 it was modified to work with bootstrap
The variables were all put at the top, and all the colors were replaced with variables
*/

/* CSS custom variables start here */
:root {
--elementbgcolor: #f1f4ec;
--elementbg-color-rgba: 241, 244, 236, .6;
--linkbghovcolor: #f7e8e8;
--textcolor: #000000;
--lighttextcolor: #fcc14a;
--borderline: 10px solid #890a12;
--hdgcolor1: #890a12;
--hdgcolor2: #780e36;
--linkhighlightcolor: #bb3841;
--opacityamt: 0
}
/*#890a12;*/
.container {
	max-width: 100%;

}


@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}


body 
{
	margin: 0;
	padding: 0;
	font-size: 150%;
	background: var(--elementbgcolor);
}

.bg-overpic {
	/*background-color: var(--elementbgcolor);*/
	background-color: rgba(var(--elementbg-color-rgba)) !important;
}

h1, h2, h3, h4, h5, h6 
{
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;  /* serif body text and non-serif headers is easiest to read and standard */
	color: var(--hdgcolor2);		/* light purple default for headings [[Third Color for Accent  HTML code]] */
	margin: 0.5em 0 0.25em 0;   /* slightly more margin on top than bottom, no margin on sides */
}

h1
{
	font-size: 1.4em;
	color: var(--hdgcolor1);
}

h2
{
	font-size: 1.4em;
}

h3 
{
	font-size: 1.3em;
	padding-left: 10px;
}

h4 
{
	font-size: 1.2em;
}
p 
{
	margin: 1.1em; 	/* some spacing between paragraphs */
}

form, 
img 
{
	margin: 20px;
	padding: 10px;
	border: 0; 
	box-shadow:2px 2px 10px 0px  #888888;
	-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;
}

a 
{
	text-decoration: underline;
	color:var(--bs-blue);
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;  /* serif body text and non-serif headers is easiest to read and standard */
	font-weight: normal;
}

input, textarea, select 
{
	font-size: 1em;
	font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
	border: 1px solid var(--borderline);
	background-color: var(--elementbgcolor);
	color: var(--textcolor);
}

blockquote 
{
	font-size: 0.9em;
	border-left: 4px solid var(--borderline);   /* Cream colored border for blockquotes  */
}

code 
{
	font-family: monospace;
	/* the only style that doesn't use a variable because it doesn't change */
	color: #fff;  /* Code is always white, so must have dark background */
	background: #666
}

/*  Pseudoclasses (based upon the type of item or action of the person, links, visited links, active links, hovering over links, tabbing or clicking on link */ 

a:hover, a:active, a:focus 
{
	color: var(--linkhighlightcolor); /* golden color default for active links or hovering over links */
	background-color: var(--linkbghovcolor);
	box-shadow:0px 0px 10px var(--bs-gray-400);-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;

}

/*  CLASS attributes added to base styles for certain CLASSes  */

.permalink 
{
	margin: 0 1.8em 0 0;
	padding: 0 14px 0 14px;
}


.small 
{
	font-size: 0.9em;
}

.tiny
{
	font-size: 0.5em;

}

.breadcrumbs 
{
	font-size: 0.8em;
	-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px
}

.breadcrumbs a:link
{
	-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px
}


.hidden
{
	visibility: hidden;
}
.btn-opaque {
	color: var(--bs-blue);
	font-weight: bold;
	background-color: var(--elementbgcolor);
	border-color: #1a1e21;
}
.btn-opaque:hover {
	color: var(--textcolor);
	background-color: var(--linkbghovcolor);
	border-color: #1a1e21;
}
.btn {
	border-radius: 0.5rem;
}



.login
{
	background: #FFF;	/*  white color background default for login  */
	position:absolute;
	right:2px;
	top:2px;
	border: 2px;
	margin: 0 1.8em 0 0;
	padding: 5px 14px 5px 14px;
	-webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px
}


.login a
{
	color: var(--linkhighlightcolor);
}

/*  Following are styles for HTML5 semantic content */

header 
{
	border-bottom: var(--borderline);  /* purple border color default */
}

header h1 a 
{
	color: var(--linkhighlightcolor);
}

article
{
	float: left;
	width: 62%;
	background-color: var(--elementbgcolor);
	padding-top: 0;
	padding-right: 1%;
	padding-left: 3%;
	padding-bottom: 5%;
}
article h2 a
{
	color: var(--hdgcolor2);
	margin-bottom: 0;
	width: 100%;
	-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px; 
	padding: 0 10px;
	background: var(--elementbgcolor) ;
}

article h2 a:hover, 
article h2 a:active
{
	background: var(--elementbgcolor);
	color: var(--linkbghovcolor);
}

ul li {
	margin-left:20px;
	margin-top:0;
	list-style-type: disc;   /* needed to restore the unordered list style */
}





nav
{
	float: left;	
	width: 15%;             /* LC width */
	padding: 0 10px;    /* LC padding */
	overflow: hidden;
	text-align: left;
}

nav h2
{
	margin-left: 12px;
}

nav ul
{
padding-left: 10px;
list-style-type: none;
}

nav ul li
{
margin: 6px 0;

}

nav ul li a 
{
display: block;
padding: 1px 10px;
border-bottom: 1px solid var(--borderline);
box-shadow: 0px 0px 10px var(--bs-gray-400);
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
width: 84%;
background-color:var(--elementbgcolor);
}

nav ul li a:hover, 
nav ul li a:active
{
	background:var(--linkbghovcolor);
}


aside
{
	position:fixed;
	top: 800px;
	left: 5px;
	margin-left: 8px;
	width: 14%;
	padding: 0 10px;
	overflow: hidden;
	text-align: left;
}

footer 
{
	border-top: var(--borderline);
	clear: both;
	margin-bottom: 10px;
	background-color:var(--elementbg-color-rgba);
}

.bottomnav 
{
	background-color:var(--elementbgcolor);
	padding: 10px 0;
}

.bottomnav ul {
	list-style: none;
}
.bottomnav li {
	font-size: medium;
	display: inline-block;
	margin-right: 10px; /* add spacing between items */
}

/******************* Header specialty styles  *******************/
	
header h1 
{
	padding: 0px;
	margin-top: 0;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	height: 100px;
	font-size: 3.3em;
}

/********************** Footer **********************/

.floatright
{
	float: right;
}	


/********************* Images ***********************/
p img 
{
	padding: 0;
	max-width: 100%;
}

/*	
	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid)
	However, floats tend to not play well with boostrap, so they need to be used
	sparingly.
*/
	
.aligncenter,
div.aligncenter,
img.centered 
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
	
img.alignright 
{
	padding: 4px;
	margin: 15px;
	display: inline;
}

img.alignleft 
{
	padding: 4px;
	margin: 15px;
	display: inline;
}

.alignright 
{
	float: right;
}
	
.alignleft 
{
	float: left
}

.reallysmallthumbs a img
{
	width: 60px;
	height:60px;
	float: left;
	margin: 1px;
}

.codedirection 
{ 
	unicode-bidi:bidi-override; direction: rtl; 
}

/* Following is for the iframe subscribe form */
.subscribe {
	width: 100%;
	height: 1200px;
}
/****************** end *********************/


/* These styles were added from CIRWEP Styles sheet, and need to be integrated into the
above styles.
*/
.welcomeimage {
	background: url('../img/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	padding-top: 10px;
}
.bigcenterwelcometext {

	position:relative;
	top:5%;
	width:100%;
	padding: 2px 1px 0px 3px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 2em;
	font-size: xx-large;
	font-weight: bolder;
	text-align: center;
	color: var(--lighttextcolor);
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -4px 4px 0 #000, 1px 1px 0 #000;
	/*text-shadow: 4px 4px 4px var(--bs-gray-600);*/
}

.bigcenterwelcometextdisappear {
	display: none;
}

p indentedpar {
	margin-left: 200px;
}

@media (max-width: 767px) {
	.hidden-mobile {
		display: none;
	}
}

html, body {
	height: 100%;
	width: 100%;
}

/*html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}*/
/*body {
	height: 100vh;
}*/


/*# sourceMappingURL=styles.css.map */


/* *******************CJ Rhoads Notes while modifying style sheet    ********************    \
The line that will give a nice shadowed tab-like box around an object is
box-shadow:0px 0px 10px #888888;-webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px
box-shadow:0px 0px 10px #888888;-webkit-border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;border-radius:0px 0px 10px 10px

This stylesheet originally had broken out typography, structure, color and border for each style.  I found that confusing, so I consolidated them all so that
typography, structure, colors and borders can all be found under one and only one style element name

Each Style sheet will be customized for each Group.
*/

/*
------ License Info ------
This Theme is Copyright 2014-2023 by HPL Consortium, Inc.

This theme 'HPL Theme' is free software: you can redistribute it
						and/or modify it under the terms of the GNU General Public License as published
							by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

				This program is distributed in the hope that it will be useful,
				but WITHOUT ANY WARRANTY; without even the implied warranty of
											MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
											GNU General Public License for more details.

											See <http://www.gnu.org/licenses/> for more details on the terms of the licensing.

														--------------------------
*/