/* 

  CSS Document - rlife_2.2.css
  Copyright 2026 rickslife.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
  #f0bf8e; orange
  #d48656; dk orange
  #d0a6a6; rose
  #886c69; dk rose
  #d79886; rust
  #ae6e59; dk rust
  #a6a6ca; blue
  #605f68; dk blue
  #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: #201a12; /* dk brown */
		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: #201a12; /* dk brown */
		color: #000; /* black */
		margin: 0;
		font-size: 1em;
		font-size: 100%; /* required for IE browsers */
		height: 100%;
	}
	
}

/* 
         background colors
----------------------------------------------------------------------------- */
.bgwhite {
	background-color: #fff; /* white */
}
.bgorange {
	background-color: #f0bf8e; /* orange */
}
.bgrose {
	background-color: #d0a6a6; /* rose */
}
.bgrust {
	background-color: #d79886; /* rust */
}
.bgblue {
	background-color: #a6a6ca; /* blue */
}
.bggraylt {
	background-color: #cecece; /* lt gray */
}
.bggraymed {
	background-color: #b7b7b7; /* med gray */
}
.bgtransparent {
	background-color: transparent;
}


.bgorangefade {
	background: #f0bf8e; /* orange */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(212,134,86,1.0), rgba(240,191,142,1.0), rgba(212,134,86,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(212,134,86,1.0), rgba(240,191,142,1.0), rgba(212,134,86,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(212,134,86,1.0), rgba(240,191,142,1.0), rgba(212,134,86,1.0)); /* Chrome10-25,Safari5.1-6 */
}

.bgrosefade {
	background: #d0a6a6; /* rose */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(136,108,105,1.0), rgba(208,166,166,1.0), rgba(136,108,105,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(136,108,105,1.0), rgba(208,166,166,1.0), rgba(136,108,105,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(136,108,105,1.0), rgba(208,166,166,1.0), rgba(136,108,105,1.0)); /* Chrome10-25,Safari5.1-6 */
}

.bgrustfade {
	background: #d79886; /* rust */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(174,110,89,1.0), rgba(215,152,134,1.0), rgba(174,110,89,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(174,110,89,1.0), rgba(215,152,134,1.0), rgba(174,110,89,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(174,110,89,1.0), rgba(215,152,134,1.0), rgba(174,110,89,1.0)); /* Chrome10-25,Safari5.1-6 */
}

.bgbluefade {
	background: #a6a6ca; /* blue */
	/* dk to normal to dark */
	background-image: linear-gradient(45deg, rgba(96,95,104,1.0), rgba(166,166,202,1.0), rgba(96,95,104,1.0)); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background-image: -moz-linear-gradient(225deg, rgba(96,95,104,1.0), rgba(166,166,202,1.0), rgba(96,95,104,1.0)); /* FF3.6-15 */
	background-image: -webkit-linear-gradient(135deg, rgba(96,95,104,1.0), rgba(166,166,202,1.0), rgba(96,95,104,1.0)); /* Chrome10-25,Safari5.1-6 */
}

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

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

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

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

/* BLUE */
.cornerstars {
	position: relative;
	background: #fff url('../images/starsblue.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;
}

/* ORANGE */
.icon-hover-orange:hover {
	color: #d48656; /* dk orange */
}
/* ROSE */
.icon-hover-rose:hover {
	color: #886c69; /* dk rose */
}
/* RUST */
.icon-hover-rust:hover {
	color: #ae6e59; /* dk rust */
}
/* BLUE */
.icon-hover-blue:hover {
	color: #605f68; /* dk blue */
}

/* 
         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;
	}
	
  .stickyleft {
      position: sticky;
      top: 20px;      /* distance from top of screen */
      align-self: flex-start;   /* required inside Bootstrap rows */
      z-index: 10;
  }
	
}
@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;
	}
}

.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;
	}
}

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



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

.boxpad15 {
	padding: 15px;
}

.boxpad20 {
	padding: 20px;
}

.boxpad25 {
	padding: 25px;
}

.boxpad30 {
	padding: 30px 20px;
}

.padbottom10 {
	padding-bottom: 10px;
}
.padbottom15 {
	padding-bottom: 15px;
}
.padbottom20 {
	padding-bottom: 20px;
}

.padtop10 {
	padding-top: 10px;
}
.padtop15 {
	padding-top: 15px;
}
.padtop20 {
	padding-top: 20px;
}

/* 
         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: #201a12; /* dk brown (bg) */
	-webkit-transform: translateY(15px);
	    -ms-transform: translateY(15px);
	        transform: translateY(15px);
}

/*
book-list.php page for notes section
------------------------------------------------- */
.book-notes-inline {
    margin-top: 10px;
    padding: 8px 10px;
    border-left: 4px solid #ddd;
    background: rgba(255,255,255,0.55);
}

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

@media (min-width: 768px) {
	.dotlinerose {
		border-right: 2px dotted #201a12; /* brown */
	}
	
	.dottedbrown {
		border-top: 2px dotted #201a12; /* brown */
		padding: 15px 0 10px 0;
	}
	
}
@media (max-width: 767.98px) {
	
	.h3dottedrose {
		border-top: 2px dotted #201a12; /* brown */
		padding-bottom: 10px;
	}
	
	.dottedbrown {
		border-top: 2px dotted #201a12; /* brown */
		padding: 12px 0 8px 0;
	}
}

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

/* images that need a border */
img.brownborder {
	border: 1px solid #201a12; /* dk brown */
}

.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;
	}
	/* visual indication that the image has been flagged ACTIVE for the live site */
	img.smllthumbactive {
		width: 150px;
		vertical-align: top;
		margin: 0 10px 10px 0;
		border-color: #090; /* green */
	}
}

@media (max-width: 767.98px) {
	img.smllthumb {
		width: 125px;
		vertical-align: top;
		margin: 0 10px 10px 0;
	}
	/* visual indication that the image has been flagged ACTIVE for the live site */
	img.smllthumbactive {
		width: 125px;
		vertical-align: top;
		margin: 0 10px 10px 0;
		border-color: #090; /* green */
	}
}

/* 
         GALLERIES image controls
----------------------------------------------------------------------------- */
@media (min-width: 1200px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
  img.whenwide,
  img.whentall{
    width: auto;        /* let max-height drive scaling */
    max-width: 100%;
  }
	
  /* Fit image within the visible desktop viewport */
  .gallery-photo img{
    max-height: 65vh;     /* adjust: 60–75vh depending on your header/caption space */
    width: auto;          /* allow tall images to shrink by height */
    max-width: 100%;      /* never overflow card */
    height: auto;
    object-fit: contain;  /* never crop */
    margin: 0 auto;       /* center when width becomes auto */
  }

  /* Let the photo card hug the image width (prevents giant white slab) */
  .gallery-photo{
    display: inline-block;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
	/* full image from the gallery */
	img.whenwide {
		width: 90%;
	}
	img.whentall {
		width: 70%;
	}
  .gallery-photo img{
    margin: 0 auto;   /* centers the image when it's <100% wide */
  }
	
}
@media (max-width: 575.98px) {
	/* full image from the gallery */
	img.whenwide {
		width: 100%;
	}
	img.whentall {
		width: 85%;
	}
	
  .gallery-photo img{
    margin: 0 auto;
  }
	
}

/* Stage shrink-wraps to the widest child (usually the photo card) */
.gallery-stage{
  display: inline-block;
  text-align: center;
}

/* image gallery enhancements from AI 12/27/25 */
/* Base card styles */
.gallery-photo{
  background: #fff;
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.2);
  max-width: 900px;
  margin: 20px auto;
}

/* Link fills the card */
.gallery-photo a{
  display: block;
}

/* Base image look (NO sizing here) */
.gallery-photo img{
  display: block;
  border-radius: 10px;
}


@media (hover:hover) and (pointer:fine){
  .gallery-photo{
    transition: transform .6s ease, box-shadow .6s ease;
  }
  .gallery-photo:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.35),
      0 4px 10px rgba(0,0,0,0.3);
  }
}

.boxlongtext{
  margin: 18px auto 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f6f3f0, #ece8e4);
  border-left: 5px solid #d79886; /* rust */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  max-width: 900px;
  display: block;
  text-align: left;
  width: 75%;
  box-sizing: border-box;
}

.boxlongtext-wrap{
  text-align: center;
}

.boxlongtext p{
  margin: 0;
  line-height: 1.6;
  color: #2b2b2b;
}

/* 
---------------------------------------------
thumbnail gallery enhancements from AI 05/16/26 */

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.gallery-thumb-card,
.gallery-thumb-card:visited{
  display: block;
  background: #f8f5f2;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 8px;
  color: #201a12;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-thumb-img-wrap{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 9px;
  background: #eee;
}

.gallery-thumb-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb-caption{
  font-size: .8em;
  line-height: 1.3;
  text-align: center;
  padding: 8px 4px 2px;
  color: #4b3a33;
}

@media (hover:hover) and (pointer:fine){
  .gallery-thumb-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    color: #ae6e59;
  }
}

/* Mobile-only GLightbox text readability improvements */
@media (max-width: 767.98px) {

    .gslide-description {
        background: transparent !important;
    }

    .gslide-title,
    .gslide-desc {
        display: inline;
        background: rgba(0,0,0,0.68);
        color: #fff !important;

        padding: 4px 8px;
        line-height: 1.8;

        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    .gslide-title {
        font-weight: bold;
    }

}


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

/* _rickslife 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;
}

/* Subtle motion for the _rickslife header */
.titlewrap{
  overflow: hidden;       /* prevents horizontal scrollbar */
  white-space: nowrap;
}

.brand-drift{
  display: inline-block;
  animation: drift 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* small movement: tweak 35px up/down as desired */
@keyframes drift{
  from { transform: translateX(0); }
  to   { transform: translateX(35px); }
}

/* accessibility: disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-drift{ animation: none; }
}

/* remove browser link styling from header brand */
.headerpadtb a,
.headerpadtb a:visited,
.headerpadtb a:hover,
.headerpadtb a:active {
    color: inherit;
    text-decoration: none;
}


.text-black {
	color: #000; /* black */
}
.text-gray {
	color: #666; /* med gray */
}
.text-brown {
	color: #201a12; /* brown */
}
.text-orange {
	color: #d48656; /* orange (darker) */
}
.text-rose {
	color: #886c69; /* rose (darker) */
}
.text-rust {
	color: #ae6e59; /* rust (darker) */
}
.text-blue {
	color: #605F68; /* blue (darker) */
}

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;
}

/* using SVG files for the glyphicons!        https://glyphicons.com/sets/basic/ */
/* **************** WARNING, no color control works here, make color changes in the .SVG files themselves ************************* */
.icons-35-svg {
	width: 35px;
	height: 35px;
}
.icons-25-svg {
	width: 25px;
	height: 25px;
}
.icons-20-svg {
	width: 20px;
	height: 20px;
}
.icons-15-svg {
	width: 15px;
	height: 15px;
}
.icons-10-svg {
	width: 10px;
	height: 10px;
}

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

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a.yesunderline {
	text-decoration: underline;
}

/* ORANGE text links */
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 */
}

/* the main site gallery, below the initial 3 thumbnails */
a.more-button {
	position: relative;
	text-decoration: none;
	font-size: 1.5em;
	text-align: center;
	background-color: #d79886; /* rust */
	padding: 5px;
	z-index: 12; /* required */
	color: #fff;
}
a.more-button:hover {
	color: #ae6e59; /* dk rust */
}

/* 2026 _more buttons */
/* Modern "_more" button */
.morebtn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #d79886;              /* your rust */
  color: #ffffff;
  font-family: 'bigbang', Arial, Helvetica, sans-serif;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
}

/* keep the underscore vibe but make it crisp */
.moretxt{
  font-weight: 700;
  text-transform: lowercase;
}

/* arrow styling + motion */
.moreicon{
  display: inline-block;
  transition: transform .25s ease, opacity .25s ease;
  opacity: 0.95;
}

/* hover: lift + arrow slides right */
@media (hover:hover) and (pointer:fine){
  .morebtn:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
    filter: brightness(1.03);
  }
  .morebtn:hover .moreicon{
    transform: translateX(6px);
    opacity: 1;
  }
}

/* subtle sheen sweep (nice, not cheesy) */
.morebtn::before{
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 50%;
  height: 160%;
  transform: rotate(18deg);
  background: rgba(255,255,255,0.18);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
}

@media (hover:hover) and (pointer:fine){
  .morebtn:hover::before{
    opacity: 1;
    transform: translateX(220%) rotate(18deg);
  }
}

/* accessibility: keyboard focus */
.morebtn:focus{
  outline: none;
}
.morebtn:focus-visible{
  box-shadow: 0 0 0 4px rgba(215,152,134,0.45), 0 14px 28px rgba(0,0,0,0.26);
}

/* reduced motion users */
@media (prefers-reduced-motion: reduce){
  .morebtn,
  .morebtn::before,
  .moreicon{
    transition: none !important;
  }
}

.morebtn,
.morebtn:visited,
.morebtn:hover,
.morebtn:active{
  color: #ffffff;
  text-decoration: none;
}

/* back button: mirror the arrow motion */
.backbtn .moreicon{
  transition: transform .25s ease, opacity .25s ease;
}

@media (hover:hover) and (pointer:fine){
  .backbtn:hover .moreicon{
    transform: translateX(-6px);   /* slide LEFT instead of right */
    opacity: 1;
  }
}