/* 

  CSS Document - wpd_1.2.css
  Copyright 2025 webprisms.com
  
  Font size conversion:
  40px = 2.5em, h1
  36px = 2.25em,
  30px = 1.875em, h2
  24px = 1.5em,
  22px = 1.375em,
  20px = 1.25em,
  18px = 1.125em;
  16px = 1em, avg font size p
  14px = 0.875em,
  12px = 0.75em,
  10px = 0.625em
  
  colors used:
  #201a12; background dk brown (OLD)
  #f0bf8e; orange (OLD)
  #d48656; dk orange (OLD)
  #d0a6a6; rose (OLD)
  #886c69; dk rose (OLD)
  #d79886; rust (OLD)
  #ae6e59; dk rust (OLD)
  #a6a6ca; blue (OLD)
  #605f68; dk blue (OLD)
  
  #0a0c1f; background DK blue
  #226581; dk blue
  #2e85ab; blue
  #5eb1d4; lt blue
  #51b93c; dk green
  #76cd65; green
  #ade1a3; lt green
  #e05f15; dk orange
  #ed7d3a; orange
  #f5b48f; lt orange
  #4f172b; dk red
  #6d213c; red
  #ad345e; lt red
  #cecece; lt gray
  #b7b7b7; med gray
  
*/

/*!
 * Web Fonts from Fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2019 Fontspring
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      PESIC
 * License URL: https://www.fontspring.com/licenses/pesic/webfont
 *
 *
 */

@font-face {
    font-family: 'bigbang';
    src: url('fonts/bigbang-webfont.woff2') format('woff2'),
         url('fonts/bigbang-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@media (min-width: 1200px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}

@media (min-width: 576px) {
	html, body {
		font-family: Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
		background-color: #0a0c1f; /* dk blue */
		color: #000; /* black */
		margin: 0;
		font-size: 1em;
		font-size: 100%; /* required for IE browsers */
	}
	
}

@media (max-width: 575.98px) {
	html, body {
		font-family: Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
		background-color: #0a0c1f; /* dk blue */
		color: #000; /* black */
		margin: 0;
		font-size: 1em;
		font-size: 100%; /* required for IE browsers */
		height: 100%;
	}
	
}

/* 
         background colors
----------------------------------------------------------------------------- */
.bgwhite {
	background-color: #fff; /* white */
}
.bgblue {
	background-color: #4ea9d0; /* blue */
}
.bggreen {
	background-color: #76cd65; /* green */
}
.bgorange {
	background-color: #ed7d3a; /* orange */
}
.bgrose {
	background-color: #6d213c; /* rose (red) */
}
.bggraylt {
	background-color: #cecece; /* lt gray */
}
.bggraymed {
	background-color: #b7b7b7; /* med gray */
}
.bgtransparent {
	background-color: transparent;
}


.bgbluefade {
	background: #2e85ab; /* blue */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(46,134,171,1.0), rgba(94,177,212,1.0), rgba(46,134,171,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(46,134,171,1.0), rgba(94,177,212,1.0), rgba(46,134,171,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(46,134,171,1.0), rgba(94,177,212,1.0), rgba(46,134,171,1.0)); /* Chrome10-25,Safari5.1-6 */
}

.bggreenfade {
	background: #76cd65; /* green */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(118,205,101,1.0), rgba(173,225,163,1.0), rgba(118,205,101,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(118,205,101,1.0), rgba(173,225,163,1.0), rgba(118,205,101,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(118,205,101,1.0), rgba(173,225,163,1.0), rgba(118,205,101,1.0)); /* Chrome10-25,Safari5.1-6 */
}

.bgorangefade {
	background: #ed7d3a; /* orange */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(237,125,58,1.0), rgba(245,180,143,1.0), rgba(237,125,58,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(237,125,58,1.0), rgba(245,180,143,1.0), rgba(237,125,58,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(237,125,58,1.0), rgba(245,180,143,1.0), rgba(237,125,58,1.0)); /* Chrome10-25,Safari5.1-6 */
}

.bgrosefade {
	background: #6d213c; /* rose (red) */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(109,33,60,1.0), rgba(173,52,94,1.0), rgba(109,33,60,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(109,33,60,1.0), rgba(173,52,94,1.0), rgba(109,33,60,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(109,33,60,1.0), rgba(173,52,94,1.0), rgba(109,33,60,1.0)); /* Chrome10-25,Safari5.1-6 */
}

/* 
         corner graphics and icons
----------------------------------------------------------------------------- */

/* ROSE */
.corneratsymbols {
	position: relative;
	background: #fff url('../images/icon_at_symbol.png') no-repeat bottom right;
}

/* BLUE */
.cornerbooks {
	position: relative;
	background: #fff url('../images/icon_books.png') no-repeat bottom right;
}

/* GREEN */
.cornercameras {
	position: relative;
	background: #fff url('../images/icon_cameras.png') no-repeat bottom right;
}

/* ORANGE */
.cornerstars {
	position: relative;
	background: #fff url('../images/icon_stars.png') no-repeat bottom right;
}

/* arrow to return to index page (top right corner) */
.icon-position-arrow {
	position: absolute;
	top: 1px;
	right: 1px;
	z-index: 1; /* required */
}

/**/
.icon-style {
	font-size: 1.5em;
	padding: 5px;
	z-index: 10; /* required */
	color: #fff;
}

/* BLUE */
.icon-hover-blue:hover {
	color: #2e85ab; /* dk blue */
}
/* GREEN */
.icon-hover-green:hover {
	color: #51b93c; /* dk green */
}
/* ORANGE */
.icon-hover-orange:hover {
	color: #e05f15; /* dk orange */
}
/* ROSE */
.icon-hover-rose:hover {
	color: #4f172b; /* dk rose (red) */
}

/* 
         MAIN box, and other box shapes
----------------------------------------------------------------------------- */

@media (min-width: 992px) {
	
	/*  */
	.boxborderwhite {
		height: 70vh;
		border: 5px solid #fff;
		-webkit-box-shadow: 1px 1px 9px #000 inset;
	       -moz-box-shadow: 1px 1px 9px #000 inset;
	            box-shadow: 1px 1px 9px #000 inset;
	}
	
	.boxpadding {
		padding: 5px;
	}
	
	.h2padtop {
		padding-top: 28vh;
	}
	
	/* white box with content, just to add more whitespace */
	.portalboxwhite {
		height: 70vh;
	}
	
}
@media (max-width: 991.98px) {
	
	/*  */
	.boxborderwhite {
		height: 15vh;
		border: 5px solid #fff;
		-webkit-box-shadow: 1px 1px 5px #000 inset;
	       -moz-box-shadow: 1px 1px 5px #000 inset;
	            box-shadow: 1px 1px 5px #000 inset;
	}
	
	.boxpadding {
		padding: 10px;
	}
	
	.h2padtop {
		padding-top: 10px;
	}
	
	/* white box with content, just to add more whitespace */
	.portalboxwhite {
		height: auto;
	}
}

/* to make sure the white box is at least the length of the left, colored box */
.wht-box-min-height {
	min-height: 70vh;
	border: none;
}

/* 
         padding
----------------------------------------------------------------------------- */

@media (min-width: 576px) {
	/* top/botton padding for header (logo, login button */
	.headerpadtb {
		margin: 20px 0 10px 0;
	}
	
	.padtopbottom {
		padding: 20px 0;
	}
	
		/* paragraph padding (Option Levels page) */
	.padding-extra {
		padding: 0 60px;
	}
}

@media (max-width: 575.98px) {
	
	/* top/botton padding for header (logo, login button */
	.headerpadtb {
		margin: 15px 0 1px 0;
	}
	
	.padtopbottom {
		padding: 15px 0;
	}
	
	/* paragraph padding (Option Levels page) */
	.padding-extra {
		padding: 0 40px;
	}
}

.paddingtop {
	padding-top: 15px;
}

/* used for box spacing for main content, etc. */
.boxpad10 {
	padding: 10px;
}

.boxpad15 {
	padding: 15px;
}

.boxpad20 {
	padding: 20px;
}

.boxpad25 {
	padding: 25px;
}

/* 
         transitions and transforms
		 https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered
----------------------------------------------------------------------------- */

.textmovedown {
	color: #fff;
	-webkit-transition: all 0.2s ease; /* Safari */
	   -moz-transition: all 0.2s ease; /* Mozilla */
	     -o-transition: all 0.2s ease; /* Opera */
	        transition: all 0.2s ease;
}

.boxpad15:hover .textmovedown {
	color: #0a0c1f; /* dk blue (bg) */
	-webkit-transform: translateY(15px);
	    -ms-transform: translateY(15px);
	        transform: translateY(15px);
}


/* 
		dotted lines separating content
----------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.dotlineblue {
		border-right: 2px dotted #0a0c1f; /* dk blue (bg) */
	}
	
	.dotlinebottom {
		border-bottom: 2px dotted #0a0c1f; /* dk blue (bg) */
		margin-top: 15px;
	}
	
}
@media (max-width: 767.98px) {
	
	.dotlineblue {
		border-right: none;
	}
	
	.dotlinebottom {
		border-bottom: 2px dotted #0a0c1f; /* dk blue (bg) */
		margin-top: 8px;
	}
}

/* 
         images/logos
----------------------------------------------------------------------------- */

/* images that need a border */
img.blueborder {
	border: 1px solid #0a0c1f; /* dk blue (bg) */
}

/* images that need a border */
img.portfolioborder {
	border: 1px solid #ccc; /* lt gray */
	padding: 3px;
}

.imgcaption {
	color: #666;
	text-align: center;
	font-style: italic;
	padding: 10px;
}

@media (min-width: 768px) {
	img.smllthumb {
		width: 150px;
		vertical-align: top;
		margin: 0 10px 10px 0;
	}
}

@media (max-width: 767.98px) {
	img.smllthumb {
		width: 125px;
		vertical-align: top;
		margin: 0 10px 10px 0;
	}
}

/* 
         text font, etc.
----------------------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: 'bigbang', Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
}

@media (min-width: 576px) {
	/*  */
	p {
		font-size: .875em;
	}
	
	h2.text-brown {
		font-size: 2em;
	}
}

@media (max-width: 575.98px) {
	
	/*  */
	p {
		font-size: 1em;
	}
	
	h2.text-brown {
		font-size: 1.5em;
	}
}



p.moveover {
	padding-left: 20px;
}

/* _webprisms.com at top of page */
.titletext {
	font-family: 'bigbang', Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
	color: #fdfdfd; /* off-white */
	text-shadow: 2px 2px #000;
	font-size: 2.5em;
}

.text-black {
	color: #000; /* black */
}
.text-gray {
	color: #666; /* med gray */
}
.text-ltgray {
	color: #ccc; /* lt gray */
}

/* *** DELETE after confirming nothing is using this *** */
.text-brown {
	color: #201a12; /* brown */
}

.text-dkblue {
	color: #0a0c1f; /* dk blue (bg) */
}
.text-orange {
	color: #e05f15; /* dk orange */
}
.text-rose {
	color: #4f172b; /* rose (red) */
}
.text-green {
	color: #51b93c; /* dk green */
}
.text-blue {
	color: #2e85ab; /* blue */
}

ul.ulhomeorange {
	list-style-type: square;
	color: #f0bf8e; /* orange */
	padding-left: 50px;
}

.font-small {
	font-size: .875em;
}
.font-xsmall {
	font-size: .75em;
}
.font-large {
	font-size: 1.275em;
}
.font-xlarge {
	font-size: 1.5em;
}

/* form labels */
label {
	font-weight: bold;
}

/* controling button placement so it scrolls with the page */
.btnfixed {
	position: fixed;
	bottom: 35px;
	right: 35px;
	z-index: 100;
}

.btnshadow {
	-webkit-box-shadow: #666 0 2px 4px;
	-moz-box-shadow: #666 0 2px 4px;
	box-shadow: #666 0 2px 4px;
}

/* book tables */
.yeartitle {
	font-family: 'bigbang', Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif;
	padding: 3px;
	text-align: center;
	font-size: 1.5em;
}

/* 
         links and buttons
----------------------------------------------------------------------------- */

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a.yesunderline {
	text-decoration: underline;
}

/* *** DELETE after confirming nothing is using this *** */
a.link-brown {
	color: #201a12; /* dk brown */
	text-decoration: underline;
	-webkit-transition: color 0.5s ease; /* Safari */
       -moz-transition: color 0.5s ease; /* Mozilla */
	     -o-transition: color 0.5s ease; /* Opera */
            transition: color 0.5s ease;
}
a.link-brown:hover {
	color: #c00; /* red */
}

/* DK BLUE text links */
a.link-dkblue {
	color: #0a0c1f; /* dk blue (bg) */
	text-decoration: underline;
	-webkit-transition: color 0.5s ease; /* Safari */
       -moz-transition: color 0.5s ease; /* Mozilla */
	     -o-transition: color 0.5s ease; /* Opera */
            transition: color 0.5s ease;
}
a.link-dkblue:hover {
	color: #c00; /* red */
}