/* Theme Name: SelenaVault Responsive Coppermine Theme 
/* Author: Mauu Zeta
/* Author URI: http://MauuZeta.COM



    I M P O R T A N T // RULES 
    
    (!) THE SALE OF THIS DESIGN/CODE OUTSIDE OF MAUUZETA.COM IS COMPLETELY PROHIBITED.
        Do not resell or redistribute the theme or the code as your own.
    
    
    My designs are under copyright registered in ARG COPYCAT, any attempt to resell this code will be penalized and denounced. 
    MauuZeta.COM (c) 2007 - 2023
    

    ---------♥
    
    Feel free to edit the theme and use it on as many sites as you like.
    The credit link must remain intact in the footer.
    
    ---------♥



    ----- Designs Info :

Artwork palette (header.jpg):
Midnight: #1A1526
Deep navy: #20233B
Plum: #372642
Wine: #6C3647
Rose: #9B5255
Dusty rose: #C47778
Blush: #E79F8F
Cream: #F4E3D7

/* Main
-------------------------------------------------------------- */


@import url('https://fonts.googleapis.com/css?family=Abel|Roboto:400,400i,700,700i|Inconsolata:400,700');

body {
	margin:0;
    background-color: #F4E3D7;
  font-family: "Raleway", sans-serif;
	font-size:11px;
    font-weight:600;
    line-height: 1.8; 
	color:#372642;
	line-height:170%;
	text-align:justify;
	word-wrap: break-word;
}


bold, stronng, b{
    font-weight:600;
    color:#E8B6AC;
    	font-weight: none;
}
::selection {
  color: #F4E3D7;
  background: #9B5255;
}

::-moz-selection {
  color: #F4E3D7;
  background: #9B5255;
}
#container {
  width: 1250px;
  margin: 0 auto;
  	  text-align:justify;
  	  color:#F4E3D7;
  background: #1A1526;
}
#container-align {
  padding: 2%;
}
a {
	color: #C47778;
	text-decoration: none;
	transition: ease-in-out 0.20s;
}
::-webkit-scrollbar {
	width: 10px;
    height: 8px;
    border-width: 1px 5px;
    border-style: solid;
    border-color: #F4E3D7;
    background: #F4E3D7;
}
::-webkit-scrollbar-thumb {
    height: 40px;
    border:4px solid #F4E3D7;
    	background-color:#B9646C;
}
a:hover,
a:focus {
	color:#1A1526;
	text-decoration: none;
}

strong, b {
	font-weight:700;
	color:#E8B6AC;
}

em, i {
	font-style:italic;
	color: #C47778;
}

u {
	background:#1A1526;
	color: #F4E3D7;
	text-decoration:none;
}

/* Global Pattern Styling
-------------------------------------------------------------- */
body, 
html,
.blocks,
.spacelalt,
.first-area,
.second-area,
.cpg-nav,
.site-footer {
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}
.bg-site{
        background-color:  transparent;
    background-position: top center;
	background-repeat: no-repeat;	
	    box-shadow: 0 0 35px 0 rgba(0,0,0, 0.2); 
	-moz-box-shadow: 0 0 35px 0 rgba(0,0,0, 0.2); 
	-webkit-box-shadow: 0 0 35px 0 rgba(0,0,0, 0.2);
}
img, 
a,
a:hover:after,
input[type='reset'],
input[type='submit'],
input[type='button'] {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

.clear {
	clear: both; 
	display:block;
}

.text-center {
	text-align: center!important;
}

.text-left {
	text-align: left!important;
}

.text-right {
	text-align: right!important;
}

.pull-left {
	float: left!important;
}

.pull-right {
	float: right!important;
}

.align-center {
	display: block;
	margin: 5px auto 5px auto!important;
}

.alignleft {
	margin: 5px 20px 20px 0!important;
	float:left;
}

.alignright {
	margin: 5px 0 20px 20px!important;
	float:right;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
.tableh1,
.statlink h2,
form {
	margin: 14px 0;
	font-family:Roboto;
	font-weight:700;
}
 

.hide {
	display: none!important;
}

.social-nav a:before,
.show-menu:before {
	font-family:fontawesome;
	font-weight:400;
}
.footer-space {
  margin: 0px 20px 0px 20px;
}
.menuheader{
    margin-top:-10px;
}
.cpg-nav {
        font-family: "DM Sans", sans-serif;
	font-weight:600;
    margin-top:10px;
	color:transparent;
	display:block;
	padding:20px;
	line-height:220%; 
	text-align:center; 
	overflow:hidden;
	position:relative;
}


.cpg-nav a {
        text-transform: uppercase;
        font-family: "DM Sans", sans-serif;
	font-weight:700;
    font-size: 10pt;
    padding:10px;
  background: -webkit-linear-gradient(#1A1526, #1A1526);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #F4E3D7;
  box-shadow: 0 0 0 0 #F4E3D7;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;}

.cpg-nav a:hover,
.cpg-nav a:focus {
  color: #E79F8F;
  text-decoration: none;
  padding-bottom: 0px;
  -webkit-box-shadow: 0 2px 0 0 #D39A9E;
  box-shadow: 0 2px 0 0 #D39A9E;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}


.footer-block{
    font-size: 11pt;
    	font-weight:400!important;		
	padding: 20px;
	float:center;
	position:center;
	background-color:transparent;
	color:#372642;
	box-shadow: 1px 1px 36px 25px rgba(0,0,0,0.04);
-webkit-box-shadow: 1px 1px 36px 25px rgba(0,0,0,0.04);
-moz-box-shadow: 1px 1px 36px 25px rgba(0,0,0,0.04);
color:#372642;
width: 97.2% !important;
    
}
.blocks,
.spacelalt,
.site-footer,
.site-footer
.cpg-nav {
  	margin:0 auto; 
        font-family: "DM Sans", sans-serif;
	font-size:12px;
    font-weight:500;
    line-height: 1.8; 
	position:relative; 
	max-width:1220px;
}
.spacer {
	display:block;
	width:100%;
	height:10px;
}
 
/* Footer
-------------------------------------------------------------- */

.site-footer {
    margin: 0 0 5px 0;
      font-family: "Raleway", sans-serif;
    font-weight:400!important;
    line-height: 21px;
	font-size:12px;    text-align:justify;
    letter-spacing: 0px;
    text-decoration: none;
 	color:#1A1526;

}
.footer-content {
    margin: 0 0 5px 0;
         font-family: "DM Sans", sans-serif;
	font-weight:900;
    font-size: 13px;   
    padding:20px;
    text-align:justify;	display:inline-block; 
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
 	color:#372642;
    line-height: 15px;

}
.footer-content i {
     color: #E79F8F;
}

.site-footer .footer-block {
	margin-top:5px;
}

.site-footer a {
	color:#F4E3D7;
	border-bottom:1px solid #B9646C;
}

.site-footer a:hover {
	color:#F4E3D7;
	text-decoration: none;
}

/* Desktop Version
-------------------------------------------------------------- */

@media only screen and (min-width:966px), only screen and (min-width:966px) {
	
.mobile-name, 
.hide {
	display: none!important;
}

.cpg-nav {
	margin:0 auto 0!important;
	padding:10px 0;
	position:relative;
	z-index:100;
	border:0;
}

.cpg-nav .spacelalt {
	padding:0;
}

.blocks {	
    background-position: top right;
	background-repeat: no-repeat;	 
	margin-top:0px;	
}
.blockbg{
            padding:6px;

}
/* Top Navigation Area
---------------------------- */

.top-navigation {
	margin:0 auto;
	padding:20px 0;
	display:block;
	position:relative;
	background: transparent;
	overflow:hidden;
}

.top-navigation .tag-line {
	display:inline-block; 
	float:left;
	position:relative; 
	top:0; right:0;
	padding-left:60px;
	font:700 11px Roboto, sans-serif; 
	color:#C47778; 
	text-transform:uppercase;
	letter-spacing:1px;
}

.top-navigation .tag-line:before {
	padding:20px;
	content:'\f0a1';
	font:400 14px fontawesome;
	color:#C47778;
	position:absolute;
	top:-20px; left:0;
}

.top-navigation .social-nav {
	float:right;
	display:inline-block; 
	position:relative; 
	top:0; right:0;
}

.top-navigation .social-nav a {
	color:#C47778!important;
}


/* First Content Area
---------------------------- */

.first-area {
	margin:0 auto 0;
	display:block;
	overflow:hidden;
	position: relative;
  	z-index:799;
	padding:10px 0;
	height:100px;
	background:#F4E3D7;
	text-align:left;
}

.first-area .navigation {
	display:inline-block;
	float:left;
	position: relative; 
	top:28px;
	z-index:70;
	text-align:center;
	
}
.first-area .navigation:before {
	content:'\f0c9';
	font:400 14px fontawesome;
	margin-right:15px;
	color:#F4E3D7;
	position:absolute;
	top:5px; left:22px;
}

.first-area .nav {
	overflow:show; 
	position:relative; 
	top:-1px; left:60px;
	z-index:999; 
	display:inline-block; 
}

.first-area .social-nav {
	display:none; 
	position:relative; 
	top:-5px; left:75px;
}

.first-area .social-nav a {
	color:#F4E3D7; 
	margin-right:12px;
	padding:2px 5px;
	line-height:14px;
}

.first-area .social-nav a:hover,
.first-area .social-nav a:focus {
	background:#F4E3D7;
	color:#1A1526;
}


/* Site Branding
---------------------------- */

.site-branding {
	display:inline-block;
	float:right;
	position:relative;
	z-index:800;
	top:0px; right:5px;
}

	.header-mobil {
	height: 0px;
	width:0%;
    background: url(./imgs/mobil.png) top center no-repeat;
	background-repeat: repeat;
	background-position: center;
}
}
.blockcontent{
    width:100%;
    height:700px;
}
.block-top{
    background-color:#1A1526;
    height:90px;
    padding-top:40px;
    padding-left:200px;
    border-bottom:120px solid #F4E3D7;
}
.camera {
    background: none;
    width: 49px;
    height: 40px;
}
/* Title & Slogan
---------------------------- */
.site-name-block{
    width:80%;
    padding-top:550px;
}
.site-name{    
    margin-top:50px;
    padding:20px;
  letter-spacing:-4px;
 color:#F4E3D7;
  font-size: 64px;
    font-family: "DM Sans", sans-serif;
  font-weight:900;
  	display: inline-block;
  line-height: 15px;
  	text-transform:uppercase;

}
.site-name span{    
  letter-spacing:-4px;
  padding:2px;
  background: -webkit-linear-gradient(#C47778, #8F2E35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-size: 64px;
    font-family: "DM Sans", sans-serif;
  font-weight:600;
    font-style: italic;
  	text-transform:uppercase;


}
.site-name-slogan{
      font-family: "Raleway", sans-serif;
    font-weight:800!important;
    letter-spacing:3px;
    text-transform: uppercase;
  color:#1A1526;
  padding:6px;
  margin-top:5px;
    	display: inline-block;
  background-color:#F4E3D7;
  font-size: 9px;
}
.sociallinks{
    margin-top:10px;
	color:#1A1526;
	background-color:#372642;
	font-weight: 400;   
    font-size: 8.15pt; 
    line-height: 14px;     
	display:inline-block;
	padding:8px 10px;
	margin-bottom:4px;
	}
	.soicialblock{
    width:1216px;
    margin-left:-5px;
    margin-top:-6px; 
     padding: 0px;
     text-align:justify;
     background-color: transparent;	  
         	margin-bottom:20px;

}
.soicialblock a{
    color:#F4E3D7;
    padding:5px;
}
.soicialblock a:hover{
    color:#C47778;
    padding:5px;
}

.welcome-message{
    height:135px;  font-size: 12px;
      font-family: "Raleway", sans-serif;
      	  text-align:justify;
    font-weight:400!important;
    letter-spacing:1px;
  color:#F4E3D7;
  padding-left:35px;
    padding-right:35px;
      padding-top:30px;
            padding-bottom:20px;
  margin-top:-20px;
    	display: block;	
  background-color:#1A1526;
}
  
  
.welcome-img {
	float: left;	
	margin-top:5px;
	background-color:transparent;
}

.welcome-img img {
  width: 200px;
  height: 100px;
	outline: 1px solid #B9646C;
    outline-offset: 4px;
	background-color: #1A1526;
	padding:8px;
	margin: 2px 28px 0px 0px;
	border: 0;
}
/* Header

---------------------------- */
.header1 {
    background: url(./imgs/header.jpg?v=20260910-0935);
    background-color: #F4E3D7;
    width: 100%;
    height: 885px;
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: top center;

}
.menuhdr{
    margin-top:10px;
    margin-left:-700px;
	display: inline-block;
	font:300 10px/24px 'Roboto', sans-serif;
	padding:2px 3x;
	max-width:598px;
	width:598px;
	font-family:Inconsolata;
	color:#1A1526; 
	background-color:transparent;
	font-weight:600!important;	
	text-transform:uppercase;
	letter-spacing:2px;
}
.menuhdr a{
    background-color:#F4E3D7;
    color:#1A1526;
    padding:5px;
}
/* Forms
-------------------------------------------------------------- */

.textinput {
	padding-right: 3px;
	padding-left: 3px;
	COLOR:#1A1526;
	background: #F4E3D7; 
	border:1px solid #E8B6AC;
}

.listbox {
	vertical-align: middle;
	border: 1px solid #E8B6AC;
}

.button,
.buttonlist ul li a {
	margin-right: 2px;
	padding: 4px 8px;
	background: #372642;
	color: #F4E3D7;
	font-size: 11px;
	line-height: 20px;
	text-transform: uppercase;
	border: 0;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	white-space: nowrap;
}

.button:hover,
.buttonlist ul li a:hover,
.button:focus,
.buttonlist ul li a:focus {
	background: #372642;
	color: #F4E3D7;
	border: 0;
}

.radio,
.checkbox {
	vertical-align: middle;
}

.bblink a, 
.bblink a:focus {
	color: #C47778; 
	text-decoration: none;
}

.bblink a:hover {
	color: #E79F8F; 
	text-decoration: underline;
}


/* Images
-------------------------------------------------------------- */

.image {
	padding: 8px; 
			    border: 1px solid transparent;
    border-image:  -webkit-linear-gradient(#372642, #E79F8F);
    border-image-slice: 1;
	margin: 3px;
    margin-bottom:10px;
	background-color: transparent;
     opacity: 1;
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;
	-o-transition: all 0.7s ease-out;
}

.image:hover {
transition: 1s ease;
opacity:.75;
transition: 1s ease;
}


/* Tables
-------------------------------------------------------------- */

.maintable  {
	padding:2%;
	background:transparent;
	width:100%;
	color:#372642;
	box-shadow: 1px 1px 36px 25px rgba(0,0,0,0.04);
-webkit-box-shadow: 1px 1px 36px 25px rgba(0,0,0,0.04);
-moz-box-shadow: 1px 1px 36px 25px rgba(0,0,0,0.04);}
.tableb,
.tablef {
	padding: 5px 10px;
	font-family: Open Sans, sans-serif;
	font-size:13px;
	text-transform:none;
}

.tableb_alternate {
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
}

.tablef {
	padding: 10px;
	background: #F4E3D7;
}


/* Statlinks
-------------------------------------------------------------- */


.tableh1 {
    background: transparent;
    background-repeat:no-repeat;
         font-family: "DM Sans", sans-serif;
  font-weight: 900;
         text-align: left; 
	font-size:17pt;
	font-style: none;
	padding: 46px;
    padding-top:8px;
    padding-bottom:10px; 
	color: #372642;   
	text-transform: uppercase;
	font-style: none;
	letter-spacing: -1px;
	text-transform: uppercase;
}
.tableh3 {
    background-repeat:no-repeat;
         font-family: "DM Sans", sans-serif;
  font-weight: 900;
         text-align: left; 
	font-size:16pt;
	font-style: none;
	padding-top:10px;
	padding-left: 34px;
	color: #372642;   
	text-transform: uppercase;
	font-style: none;
	letter-spacing: -1px;
	text-transform: uppercase;
}
	
.tableh1-stat {
    
      line-height:26px;
         font-family: "DM Sans", sans-serif;
  font-weight: 700;
         text-align: center; 
	font-size:14pt;
	font-style: none;
	padding: 16px;
	letter-spacing: 2px;
	color: #372642;   
	text-transform: uppercase;
	font-style: none;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin:2px;}

.tableh1 a {
	color: #F4E3D7;
}

.tableh1 a:hover, 
.tableh1 a:focus,
.tableh1 .statlink a:hover,
.tableh1 .statlink a:focus {
	color:#1A1526;
	box-shadow:inset 0 -2px 0 #00;
}

.stats {
	padding: 5px; 
	background:#B9646C; 
	font-weight:700; 
	font-size:10px; 
	font-family:Inconsolata;
	color: #F4E3D7; 
	text-transform:uppercase; 
	letter-spacing:2px;
}

.stats strong {
	font-weight:700;
	color: #E8B6AC;  
}

.statlink {
        padding:20px;
    margin-left:20px;   
	display: inline; 
	    letter-spacing:0px;
	position: relative; 
	font-size:10pt;
	    font-family: "DM Sans", sans-serif;
	color:#1A1526; 
	font-weight:600!important;
	background-color:transparent;
}
.statlink2{
    margin:10px;
	display: inline; 
	    letter-spacing:2px;
	position: relative; 
	font-size:9pt;
		  line-height:26px;
         font-family: "DM Sans", sans-serif;
         text-align: center; 
         color:#1A1526; 
	font-weight:600!important;
	background-color:transparent;
}
.statlink bold, strong{
	color:#1A1526; 
}
.statlink a {
     letter-spacing:0px;
     font-family: "DM Sans", sans-serif;
	font-weight:600;
    font-size: 11pt;     text-decoration: none;
    color: #B9646C;
}

.statlink a:hover {
    color: #F4E3D7;
}

.statlink h2 {
    display: inline-block;
     font-family: "DM Sans", sans-serif;
	font-weight:600;
    font-size: 11pt;  
    letter-spacing:0px;
    text-decoration: none;
    color: #1A1526;
    padding:4px;
    line-height: 15px;
}



td .tableh1:last-child {
	font-size: 15px; font-weight:400;
}


/* Categories
-------------------------------------------------------------- */

/* Categories
-------------------------------------------------------------- */


.catrow_noalb, .catrow {
    color:#372642;
      font-family: "Raleway", sans-serif;
    font-weight:400!important;
    line-height: 21px;
	font-size:12px;
	letter-spacing:0px;
    padding: 20px 10px;	
}

.catrow_noalb .image, .catrow .image {
    padding: 5px;
    border: 1px solid transparent;
    border-image: linear-gradient(-135deg, #F4E3D7 0%, #F4E3D7 20%, #F4E3D7 40%, #F4E3D7 60%, #F4E3D7 80%, #F4E3D7 100%);
    border-image-slice: 1;
    margin-top:0px;
    margin-bottom:0px;
    margin:0px;
    margin-right:10px;
    border-radius:0px;
    background-color: #F4E3D7;
    opacity: 1;
    border-radius:30px;
}

.catlink {
	display: block;
  font-family: "DM Sans", sans-serif;
	font-style:normal;
	font-weight: 700;
}

.catlink a {
        margin: 0 0 5px 0;
        font-family: "DM Sans", sans-serif;
	font-weight:700;
    font-size: 12pt;
  background: -webkit-linear-gradient(#1A1526, #1A1526);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  padding-bottom: 1px;
  -webkit-box-shadow: 0 0 0 0 #F4E3D7;
  box-shadow: 0 0 0 0 #F4E3D7;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;}

.catlink a:hover,
.catlink a:focus {
  color: #B9646C;
  text-decoration: none;
  padding-bottom: 0px;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

.catlink:before {
	margin-right:10px;
	content:'\0276F';
	font-weight:400;
	font-style:normal;
	font-size:11px;
	color:#D39A9E;
	position:relative;
	top:-1px;
}



/* Albums
-------------------------------------------------------------- */

.tableh2, .tableh2_compact{ 
    font-size:12px; 
     color: #1A1526;
	background:transparent; 
	padding: 6px;
 	text-align: left; 
}



/****************************LINK SECOND ALBUM THUMB*/
.alblink a {
background-image: url();
background-repeat: no-repeat;
background-position: left;
padding-left: 7px;
text-decoration: none;
color: #1A1526;
 letter-spacing: 1px;
}


.alblink {
	color: #1A1526;
	letter-spacing:-3px;
	vertical-align: middle;
        font-family: "DM Sans", sans-serif;
	font-weight:600;
    font-size: 11pt;
    line-height:17pt;
    text-align: left;   
}
.alblink:before {
    content: "\f07c";
	font-family:fontawesome;   
	font-weight: 400;
	color: #D39A9E;	
	font-size: 10px;
}
.album_stat {  
    color: #372642;
    font-size: 8pt;
    margin-left:10px;
display: block;
padding:10px;
    display: inline-block;
margin-left:10px;	
text-align:justify; 
}

p.album_stat {
	padding: 5px 0 0 0;
}


/* Thumbnails
-------------------------------------------------------------- */

.thumbnails {
	background-color: transparent;
	padding: 3vh 1vw;
	vertical-align: top;
	margin:2px;
	border:1px solid #9B5255;
}

.thumbnails table {
	border: none;
	border-collapse: collapse;
}

.thumbnails table td {
	padding: 0;
	border-width: 0;
	border-style: solid;
}

.thumbnails img,
.thumbnails br {display:none;}
.thumbnails a img {
	display:block;
	margin:0 0 8px;
}

.thumb_filename {
	display: block;
	font-size: 80%;
	line-height: 1.5;
}


.thumb_title_owner{
    font-size: 8.25pt;	
    text-transform:uppercase;
    font-weight:400;
}
.thumb_title_title , .thumb_title {
  color:#372642;
  font-family: "DM Sans", sans-serif;
	font-size:12px;
    font-weight:600;
    line-height: 1.2; 
	text-transform:none;
	text-align:center;
	display: block;
	margin: 0px auto 10px auto;
	padding-top:6px;
	text-transform: none;
	letter-spacing: 0;
	position: relative;
}

.thumb_title_views, 
.thumb_caption, 
.thumb_dimensions {
	max-width: 75%; 
	background-color: transparent;
	color: #372642;
	font-weight: 600;
    font-size:10px;
  font-family: "DM Sans", sans-serif;
	text-transform:uppercase;	
	margin: 3px; 
	padding: 8px;
	line-height: 100%;
	border: none;
	text-transform: uppercase;
	display: block;
	position: relative;
	z-index: 25;
}
.thumb_title_views:before {	
    padding:6px;
	margin-right:0px;
	margin-left:-4px;
	content:'\f06e';
	font-family:fontawesome;
	font-weight:400;
	font-size:10px;
	color:#E79F8F;
}
.thumb_title_views {    
background-color: #F4E3D7; 

}
.thumb_title_views::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #F4E3D7;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}
.thumb_caption_ctime {
  font-family: "DM Sans", sans-serif;
background-color: #F4E3D7;
}.thumb_caption_ctime:before {	
    padding:6px;
	margin-right:0px;
	margin-left:-4px;
	content:'\f15b';
	font-family:fontawesome;
	font-weight:400;
	font-size:10px;
	color:#C47778;
}
.thumb_dimensions {
background-color: #F4E3D7;
}
.thumb_resolution { 
    background-color: #F4E3D7; }
.thumb_caption { 
background-color: #F4E3D7; }

.thumb_caption a {
    color: inherit;
}

.thumb_num_comments {
    font-weight: normal;
    font-size: 85%;
    padding: 2px;
    font-style : italic;
    display : block;
}


/* Sort order
-------------------------------------------------------------- */

.sortorder_cell {
	font: 0px/1 'Roboto',sans-serif;
	letter-spacing: 0;
	color: #E8B6AC;
}

.sortorder_options {
	white-space: nowrap;
}


/* Preview
-------------------------------------------------------------- */

.navmenu {
    margin: 0 0 5px 0;
         font-family: "DM Sans", sans-serif;
	font-weight:900;
    font-size: 13px;
    letter-spacing: 2px;
    text-decoration: none;
    color: #1A1526;
    line-height: 15px;

}

.tabs-table .navmenu {
	padding:5px 0; 
}

.navmenu img {
	margin: 0;
	padding: 5px 10px 5px 0;
}

.navmenu-active {
	padding:5px 10px; 
	background: #F4E3D7;
	font-weight: 700;
	border-right:1px solid #E8B6AC;
}

.navmenu a,
.navmenu a:hover,
.navmenu a:focus {
	display: block;
	padding: 0 10px;
	color:#9B5255;
}

.tabs-table .navmenu a,
.tabs-table .navmenu a:hover,
.tabs-table .navmenu a:focus {
	border-right:1px solid #E8B6AC;
}

.tabs-table td:last-child a {
	border:0;
}

.display_media {
	padding: 0 10px 10px 10px;
}


/* Administrator
-------------------------------------------------------------- */

.admin_menu_wrapper {
	padding: 10px 15px;
	background:#F4E3D7;
}

.admin_menu {
	background: #F4E3D7;
	font-size: 10px;
	font-weight: 700;
	border:1px solid #B9646C;
	text-align: center;
}

.admin_menu a,
.admin_menu a:hover,
.admin_menu a:focus {
	padding: 5px;
	display: block;
	color: #372642;
}

.admin_float {
	margin: 1px;
	float: left;
	display: block;
	position: relative;
	line-height: 1;
	white-space: nowrap;
}



/* No Edit
-------------------------------------------------------------- */

pre.filepath {
	margin: 0;
	padding: 0;
}

.user_thumb_infobox {
	margin-top: 1px;
	margin-bottom: 1px;
}

.user_thumb_infobox th {
	font-size: 100%;
	font-weight: bold;
	margin-top: 1px;
	margin-bottom: 1px;
	text-align: center;
}

.user_thumb_infobox td {
	font-size: 85%;
	margin-top: 1px;
	margin-bottom: 1px;
	text-align: center;
}

.user_thumb_infobox a {
	text-decoration: none;
	color: #1A1526;
}

.user_thumb_infobox a:hover {
	text-decoration: underline;
	color: #1A1526;
}

.icon {
	margin-right: 1px;
	vertical-align: middle;
}

.comment_date {
	font-size: 90%;
	vertical-align: middle;
	color: #372642;
}

.footer {
	font-size: 9px;
}

.footer a {
	text-decoration: none;
	color: #1A1526;
}

.footer a:hover {
	text-decoration: underline;
	color: #1A1526;
}

.topmenu {
	font-family: 'Trebuchet MS', Verdana, Geneva, Arial, sans-serif;
	font-size: 110%;
	line-height: 130%;
}

.topmenu a {
	text-decoration: none;
	color: #8F2E35;
}

.topmenu a:hover {
	text-decoration: underline;
	color: #8F2E35;
}

.img_caption_table {
	width: 100%;
	margin: 0;
	border: none;
	background-color: #F4E3D7;
}

.img_caption_table th {
	font-size: 100%;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	color: #1A1526;
	border-top: 1px solid #F4E3D7;
	background: #E8B6AC;
}

.img_caption_table td {
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
	white-space: normal;
	border-top: 1px solid #F4E3D7;
	background: #F4E3D7;
}

.debug_text {
	width: 100%;
	margin: 0;
	border: #F4E3D7;
	background-color: #1A1526;
}

.clickable_option {
	cursor: default;
}

.listbox_lang {
	font-family: Arial, Roboto, sans-serif;
	font-size: 80%;
	vertical-align: middle;
	color: #8F2E35;
	border: 1px solid #E8B6AC;
	background-color: #F4E3D7;
}

.pic_title {
	font-size: 100%;
	font-weight: bold;
	line-height: 1.0em;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	color: #8F2E35;
}

.pic_caption {
	font-size: 100%;
	font-weight: normal;
	line-height: 1.0em;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	color: #8F2E35;
	background-image: none;
}

.important {
	font-weight: bold;
	padding-top: 3px;
	padding-right: 1px;
	padding-bottom: 3px;
	padding-left: 1px;
    /* background-image : url(images/important.gif); */
	color: red;
}

#cpgChooseLanguageWrapper {
	float: left;
}

#cpgChooseThemeWrapper {
	float: left;
}

/** Swfupload css **/
div.fieldset {
	margin: 10px 0;
	padding: 20px 10px;
	border: 2px solid #9B5255;
}

div.fieldset span.legend {
	font-weight: bold;
	position: relative;
	top: -30px;
	padding: 3px;
	color: #F4E3D7;
	background-color: #C47778;
}

div.flash {
	width: 375px;
	margin: 10px 5px;
	border-color: #F4E3D7;
}

input[disabled] {
	border: 1px solid #E8B6AC;
} /* FF 2 Fix */


.progressWrapper {
	overflow: hidden;
	width: 357px;
}

.progressContainer {
	overflow: hidden;
	margin: 5px;
	padding: 4px;
	border: solid 1px #E8B6AC;
	background-color: #F4E3D7;
}
/* Message */
.message {
	overflow: hidden;
	margin: 1em 0;
	padding: 10px 20px;
	border: solid 1px #C47778;
	background-color: #F4E3D7;
}
/* Error */
.red {
	border: solid 1px #8F2E35;
	background-color: #F4E3D7;
}

/* Current */
.green {
	border: solid 1px #F4E3D7;
	background-color: #F4E3D7;
}

/* Complete */
.blue {
	border: solid 1px #F4E3D7;
	background-color: #F4E3D7;
}

.progressName {
	font-size: 8pt;
	font-weight: 700;
	overflow: hidden;
	width: 323px;
	height: 14px;
	text-align: left;
	white-space: nowrap;
	color: #372642;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
	font-size: 0;
	width: 0;
	height: 2px;
	margin-top: 2px;
	background-color: blue;
}

.progressBarComplete {
	visibility: hidden;
	width: 100%;
	background-color: green;
}

.progressBarError {
	visibility: hidden;
	width: 100%;
	background-color: red;
}

.progressBarStatus {
	font-family: Arial;
	font-size: 7pt;
	width: 337px;
	margin-top: 2px;
	text-align: left;
	white-space: nowrap;
	color: #372642;
}

a.progressCancel {
	font-size: 0;
	display: block;
	float: right;
	width: 14px;
	height: 14px;
	background-image: url(../../images/cancelbutton.gif);
	background-repeat: no-repeat;
	background-position: -14px 0;
}

a.progressCancel:hover {
	background-position: 0 0;
}

.swfupload {
	vertical-align: top;
}

/**styles for photo manager*/
table#pic_sort tr td {
	padding: 4px;
	border-bottom: 1px solid #E8B6AC;
}

/** styles for album manager and photo album*/
table#album_sort tr td {
	padding: 3px;
	border-bottom: 1px solid #E8B6AC;
}

table#album_sort tr td span.editAlbum {
	font-size: 10px;
	line-height: 100%;
	display: none;
	margin-left: 100px;
	cursor: pointer;
	text-decoration: underline;
	color: #8F2E35;
}

.cpg_message_info,
.cpg_message_success,
.cpg_message_warning,
.cpg_message_error,
.cpg_message_validation {
	margin: 10px 0;
	padding: 15px 10px 15px 50px;
	border: 1px solid;
	background-repeat: no-repeat;
	background-position: 10px center;
}

.cpg_message_info {
	color: #8F2E35;
	background-color: #E8B6AC;
	background-image: url('../../images/message/info.png');
}

.cpg_message_success {
	color: #8F2E35;
	background-color: #E8B6AC;
	background-image: url('../../images/message/ok.png');
}

.cpg_message_warning {
	color: #8F2E35;
	background-color: #F4E3D7;
	background-image: url('../../images/message/warning.png');
}

.cpg_message_error {
	color: #8F2E35;
	background-color: #E79F8F;
	background-image: url('../../images/message/stop.png');
}

.cpg_message_validation {
	color: #8F2E35;
	background-color: #E79F8F;
	background-image: url('../../images/message/error.png');
}

.cpg_summary {
	font-size: .9em;
	float: right;
	width: 400px;
	margin: 10px 0;
	padding: 5px 10px 5px 10px;
	text-align: right;
	color: #E79F8F;
	border: 1px solid;
	background-color: #D39A9E;
}

#GB_window {
	border: 5px solid #F4E3D7;
	background-color: #F4E3D7;
}

.external {
	padding-right: 10px;
	background: transparent url('../../images/link.gif') 100% 50% no-repeat;
}


.icon{
    padding-right: 8px;
}

#cpgform .maintable .tableb.tableb_alternate, 
#cpgform .maintable .tableb {
    padding: 8px 20px !important;
}

#cpgform .tableb.tableb_alternate .maintable, 
#cpgform .tableb .maintable {
    margin: 8px 0 5px !important;
}

#cpgform .maintable {
    max-width: 1100px !important;
    margin: 0 auto;
}

.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;}

.user_thumb_infobox th {
font-weight: bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align: center;}

.user_thumb_infobox td {
font-size: 85%;
margin-top: 1px;
margin-bottom: 1px;
text-align: center;}

.user_thumb_infobox a {
text-decoration: none;
color: #1A1526;}

.user_thumb_infobox a:hover {
color: #1A1526;
text-decoration: none;}



.detail_body .maintable {
    background: #1A1526;
    color:#F4E3D7;
    width: 99.5% !important;
}

.detail_head_collapsed, .detail_head_expanded, {
    font-size: 14px; border-bottom: 1px solid #F4E3D7;
    font-family: 'Roboto Mono', monospace;
    font-weight: normal;
    color: #F4E3D7;
    padding-left: 18px;
}

.comment_date{
	color:#B9646C;
	font-size:80%;
	vertical-align : middle;
}
#pic_info_button img{
    display: none;
}
#pic_info_button a:before{
    display: block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f15c";
}
#slideshow_button img{
    display: none;
}
#slideshow_button a:before{
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f144";
}
.prev_strip img{
    display: none;
}

#film, .tape {
    width: 99% !important;
    margin:0px !important;
}
.filmstip_related {padding: 5px;color: black;letter-spacing: 2px;display: inline-block;
        	text-align:justify;
    }.tile-background{
    background-color: #1A1526;
}
.filmstrip_background {
	background:transparent;
}
.strip_image {
    padding: 4px;
	margin: 8px;
	border-radius: 0px;
    background: #F4E3D7;
    width:auto;
    height:auto;
    text-align:auto;
    	text-align:justify;
}
.prev_strip a:before{
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f104";
    font-size: 200%;
}
.next_strip img{
    display: none;
}
.next_strip a:before{
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    font-size: 200%;
}
.icon {
	vertical-align:middle;
	margin-right:1px;
}
.comment_date{
	color: #372642;
	font-size: 90%;
	vertical-align: middle;
}
/* Responsive
-------------------------------------------------------------- */

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
	
.mobile
.catrow .thumbnail {
            	font-size:4pt;
	display: none!important;
}

body {
	margin:0!important;
	padding:0!important;
	overflow-x:hidden;
}

.blocks,
.cpg-nav {  
    background-color:#F4E3D7;
	width:95vw!important;
}

.first-area {
	margin:0 auto; 
	z-index:899; 
	width:100%!important;
	position:relative!important;
}

.first-area .social-nav {
	position: absolute; 
	top:21px; right:10px;
	z-index:999!important;
}

.social-nav a {
	padding:0 2px 0!important;
	text-shadow:0 0 0;
	font-size:13px!important;
}.menuheader{
    margin-left:0px;
}

.blockbg{
                background-color:#F4E3D7;
            padding:0px;
}
#container {
  width: 1250px;
  margin: 0 auto;
  	  text-align:justify;
  	  color:#F4E3D7;
  background: #1A1526;
}
#container-align {
  padding: 0%;
}
#sub_menu {
  position: absolute;
  right: 0;
  top: 0px;
  height: 0px;
}

#sub_menu_align {
  padding:0px;
  width:0px;
  font-size:0px;
  height: 0px;
  display: table-cell;
  vertical-align: middle;
}

#text-header {
  background: none;
  border: none;
    padding:0px;
  width:0px;
  font-size:0px;
  height: 0px;
    font-family: "DM Sans", sans-serif;
  font-weight: 700;
  color: #F4E3D7;
  letter-spacing: 0px;
  padding: 0px;
  text-transform: uppercase;
}
#search-header:before {	
    padding:0px;
      padding:0px;
  width:0px;
  font-size:0px;
  height: 0px;
	margin-right:0px;
	content:'\f030';
	font-family:fontawesome;
	font-weight:400;
	font-size:0px;
	color:#B9646C;
}
#header-search {
  float: left;  
    padding:0px;
  width:0px;
  font-size:0px;
  height: 0px;
  padding:0px;
    background: linear-gradient(#9B5255, #9B5255);
  margin-right: 0px;
}

#search-header {
      padding:0px;
  width:0px;
  font-size:0px;
  height: 0px;
  width: 0px;
  background: none;
}
.block-slogan{
            font-family: "DM Sans", sans-serif;
	font-weight:0;
	margin-top:-50px;
    font-size: 0pt;
    	text-transform:uppercase;
    	letter-spacing:0px;
    color:#372642;
	position:relative;
	text-align:center;
	display:block;
	width:0%;
	margin-bottom:0px;
		max-width:0px;
	background-attachment: fixed;
	background-color:#F4E3D7;
	padding:0px;
	box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px -0px;

}
#submit-header {
      padding:0px;
  width:0px;
  font-size:0px;
  height: 0px;
  background: url(./img/lupa.png) bottom no-repeat;
  border: none;
  width: 0px;
  height: 0px;
}
#enter {
  padding-top: 0px;
  width: 0px;
  margin: 0 auto;
  display: block;
  margin-bottom: 0px;
}

#enter #arrow {
  background: #B9646C;
  -webkit-border-radius: 0px;
  border:0px solid #F4E3D7;
  border-radius: 0px;
  width: 0px;
  height: 0px;
  display: block;
  -webkit-box-shadow: 0 0 0px 0 rgba(0,0,0,0.0);
  box-shadow: 0 0 px 0 rgba(0,0,0,0.0);
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}

#enter #arrow:hover {
  background: #1A1526;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  width: 0px;
  height: 0px;
  display: block;
  -webkit-box-shadow: 0 0 0px 0 rgba(0,0,0,0.0);
  box-shadow: 0 0 0px 0 rgba(0,0,0,0.0);
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
#container {
  width: 1250px;
  margin: 0 auto;
  	  text-align:justify;
  	  color:#F4E3D7;
  background: #1A1526;
}
.sociallinks{
    margin-top:0px;
    margin-bottom:0px;
	color:#1A1526;
	border:#F4E3D7;
	background-color:#F4E3D7;
	font-weight: 400;   
    font-size: 0pt; 
    line-height: 0px;     
	display:inline-block;
	padding:00px 0px;
	}	.soicialblock i{
	    color:#1A1526;
}
	.soicialblock{
    width:0px;
    margin-left:0px;
    margin-top:0px; 
     padding: 0px;
     text-align:justify;
     background-color: transparent;	             
}

.blockcontent{
    width:0%;
    height:0px;
}
.block-top{
    background-color:#1A1526;
    height:0px;
    padding-top:0px;
    padding-left:0px;
    border-bottom:0px solid #F4E3D7;
}
/* Title & Slogan
---------------------------- */
.site-name{    
  letter-spacing:-2px;
  color:#F4E3D7;
  font-size: 0px;
      font-family: "DM Sans", sans-serif;
  font-weight:700;
  line-height: 0px;
}
.site-name-two{
    margin-top:-0px;
    margin-left:0px;
    padding:0px;
    width:0px;
    height:0px;
    border:0px solid #1A1526;
    letter-spacing:0px;
  color:#1A1526;
  font-size: 0px;
      font-family: "DM Sans", sans-serif;
  font-weight:900;
  text-transform: uppercase;
  line-height: 0px;
  	transition: ease-in-out 0.20s;
}
.site-name-two:hover{
    margin-top:0px;
    margin-left:0px;
    padding:0px;
    width:0px;
    height:0px;
    background-color:#F4E3D7;
    border:0px solid #9B5255;
    letter-spacing:0px;
  color:#1A1526;
  font-size: 0px;
      font-family: "DM Sans", sans-serif;
  font-weight:900;
  text-transform: uppercase;
  line-height: 0px;
  	transition: ease-in-out 0.20s;
}
.site-name-slogan{
    font-weight:400!important;
    letter-spacing:0px;
    text-transform: uppercase;
  color:#F4E3D7;
  background-color:#1A1526;
  font-size: 0px;
}
.block-slogan{
    margin-top:8px;
            font-family: "DM Sans", sans-serif;
	font-weight:700;
    font-size: 7pt;
    	text-transform:uppercase;
    	letter-spacing:7px;
    color:#372642;
	position:relative;
	text-align:center;
	display:block;
	width:99%;
	margin-bottom:10px;
		max-width:2000px;
	background-attachment: fixed;
	background-color:#F4E3D7;
	padding:7px;
	box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px -0px;

}
/* Header
---------------------------- */
.header1 {
  background: url(./imgs/header.jpg);
  background-color:#1A1526;
  width: 0%;
  height:0vh;
  background-size: cover;
  background-repeat: no-repeat; 
  background-position:top center;
}
.welcome-message{
    height:0px;
      font-family: "Raleway", sans-serif;
      	  text-align:justify;
    font-weight:400!important;
    letter-spacing:0px;
  color:#F4E3D7;
  padding:0px;
  margin-top:0px;
    	display: block;	margin-bottom:0px;
  background-color:#1A1526;
  font-size: 0px;}
  
  .site-name-block{
    width:0%;
    padding-top:0px;
}
.site-name{    
    margin-top:0px;
    padding:0px;
  letter-spacing:0px;
 color:#F4E3D7;
  font-size: 0px;
    font-family: "DM Sans", sans-serif;
  font-weight:900;
  	display: inline-block;
  line-height: 0px;
  	text-transform:uppercase;

}
.site-name span{    
  letter-spacing:0px;
  padding:0px;
  background: -webkit-linear-gradient(#D39A9E, #E79F8F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  font-size: 0px;
    font-family: "DM Sans", sans-serif;
  font-weight:600;
    font-style: italic;
  	text-transform:uppercase;


}
.site-name-slogan{
      font-family: "Raleway", sans-serif;
    font-weight:800!important;
    letter-spacing:0px;
    text-transform: uppercase;
  color:#1A1526;
  padding:0px;
  margin-top:0px;
    	display: inline-block;
  background-color:#F4E3D7;
  font-size: 0px;
}
.welcome-img {
	float: left;	
	margin-top:0px;
	background-color:transparent;
}

.welcome-img img {
	width: 0px;		height:0px;
	outline: 0px solid #372642;
    outline-offset: 0px;
	background-color: #1A1526;
	padding:0px;
	margin: 0px 0px 0px 0px;
	border: 0;
}
/* Title & Slogan
---------------------------- */
.site-name-block{
    width:0%;
    padding-top:0%;
}
.site-name{    
  letter-spacing:0px;
  color:#F4E3D7;
  font-size: 0px;
    font-family: "DM Sans", sans-serif;
  font-weight:900;
  line-height: 0px;
  	text-transform:uppercase;

}
.site-name span{    
  letter-spacing:0px;
  color:#F4E3D7;
  font-size: 0px;
    font-family: "DM Sans", sans-serif;
  font-weight:600;
    font-style: italic;
  	text-transform:uppercase;


}
.statlink2{
    margin:10px;
	display: inline; 
	    letter-spacing:2px;
	position: relative; 
	padding: 3px 6px; 
	font-size:5pt;
		  line-height:20px;
         font-family: "DM Sans", sans-serif;
         text-align: center; 
         color:#1A1526; 
	font-weight:600!important;
	background-color:transparent;
}
.site-header {
	position:relative;
	display:block;
	margin:0 auto 0!important; 
	background: transparent;
	background-repeat: no-repeat; 
	background-position:center top;
	background-size:cover;
	position: relative;
	width: 0%;
	height: 0px;
	min-height: 0px;
	max-height: 0px;
}
.site-name{    
  position: absolute;
  top: 5%;
  left: 0%;
  transform: translate(-0%, -0%);
  display: flex;
   justify-content: center;
    letter-spacing:0px;
    text-transform: uppercase;
    background-color:transparent;
    display: inline-block;
    overflow:hidden;
  color:#F4E3D7;
  mix-blend-mode:difference;
  padding:0px calc(0% - 0px);
  font-size: 0px;
            font-family: "DM Sans", sans-serif;
	font-weight:900;
  line-height: 00px;
}
.site-name-slogan{
    	font-weight:100!important;
    letter-spacing:0px;
    text-transform: uppercase;
    display: inline-block;
  color:#F4E3D7;
  margin-top:0px;
  background-color:#1A1526;
  font-size: 0px;
}
	.header-mobil {
	height: 350px;
	width:100%;
    background: url(./imgs/mobil.png);
	background-repeat: repeat;
	background-position: center;
}
.camera {
    background: none;
    width: 0px;
    height: 0px;
}
.content {
      width:0px;
  height:0px;
  color: #372642;
  background-color: #F4E3D7;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
  padding: 0px;
}



.footer-block{	
    width:78vw!important;
	margin:0 auto; 
	position:relative; 
 }
.mobile-name {
	margin:0 auto 0!important;
	padding:15px 0!important;
	display:block;
	position: relative;
}

.mobile-name h1 {
	margin:0 0 -10px;
	font:400 28px Abel;
	color:#F4E3D7;
	letter-spacing:-1px;
	text-transform:uppercase;
	position:relative; z-index:5;
}

.mobile-name .tag-line {
	display:block;
	padding:0;
	font-size:11px;
	font-weight:600;
	letter-spacing:0px;
	text-transform:lowercase;
	position:relative; z-index:5;
}


.cpg-nav {
    margin-top:3px;
	padding:10px; 
	display:block;
	background-color:#F4E3D7;
	text-align:center; 
	overflow:hidden;
	position:relative;
}

.cpg-nav a {
	margin: 0!important; 
	display: inline; 
	position: relative; 
	padding: 3px 6px; 
	font-size:10px;
	text-transform:uppercase;
	xborder-radius:2px;
	letter-spacing:1px;
}

.cpg-nav a:hover,
.cpg-nav a:focus {
	text-decoration: none;
}

.site-footer {
	margin:0 auto 0!important;
	text-align:jusitify!important;
}

.site-footer .pull-left,
.site-footer .pull-right {
	display:block!important;
	float:none!important;
	text-align:center;
}

.tableh1 {	
            background: transparent;

    letter-spacing:0px;
	font-size:9pt;
}
.tableh3 {	
    letter-spacing:0px;
	font-size:7pt;
	padding:8px;
}
.statlink h2 {
	font-size:8px!important;
	font-weight:800;
	color:#1A1526;
	letter-spacing:0px;
	border:0px solid #F4E3D7;
	margin-left:-10px;
}
.maintable td.statlink h2{
	display: inline; 
	position: relative; 
	padding: 3px 6px; 
	font-size:8px;
	    font-family: "DM Sans", sans-serif;
	color:#1A1526; 
	letter-spacing:0px;
	letter-spacing:10px;
	font-weight:600!important;
	text-transform:uppercase;
	background-color:transparent;
    letter-spacing: 0px;
    text-align: left;
}.statlink {
	display: inline; 
	position: relative; 
	padding: 3px 6px; 
	font-size:8px;
	    font-family: "DM Sans", sans-serif;
	color:#1A1526; 
	letter-spacing:0px;
	font-weight:600!important;
	text-transform:uppercase;
	background-color:transparent;
}
.tabs-table-alt .tableh1-small {
            background: transparent;

	width:82vw;
}

.maintable:first-child {
	border-top:1px solid #F4E3D7;
}
.image {
    padding:2px;
	margin: 2px!important;
}

.thumbnails {
	margin:0!important; 
	padding:1vw 0!important; 
	width: 0.1vw!important;
}

.thumb_title {
	margin: 2px 0!important;
}
 

#fullsize_image {
	max-width: 100%; 
	height: auto;
}

.thumbnails .image, 
.thumbnails .thumbnail {
	height: auto; 
	display:inline; 
	max-width:10vw;
}

a:link .image {
	
}


.thumb_caption,
.thumb_filename,
.thumb_num_comments,
.thumb_title_views,
.thumb_resolution {
	display:table!important; 
	max-width: 12vw!important; 
	overflow: hidden; 
	padding:5px;
	font-size:5px!important;
	background-color:#F4E3D7;
			  	outline: 0px solid #E8B6AC;
    outline-offset: 0px;
}
.thumb_title_views:before {	
    padding:0px;
	margin-right:0px;
	margin-left:-0px;
	content:'\f06e';
	font-family:fontawesome;
	font-weight:400;
	font-size:0px;
	color:#B9646C;
}
.thumb_title {
	display:table!important; 
	max-width: 12vw!important; 
	overflow: hidden; 
	line-height:10px;
	font-size:7px!important;
}
.strip_image {
	max-width: 14vw!important; 
	height: auto;
}.cat-desc{
	font-size:7px!important;
	line-height:19px;
}.thumb_title_views:before {	
    padding:0px;
	margin-right:0px;
	margin-left:-0px;
	content:'\f06e';
	font-family:fontawesome;
	font-weight:400;
	font-size:0px;
	color:#B9646C;
}
.site-footer .footer-content {
    font-size:8px;
}

.sociallinks{
    margin-bottom:0px;
	display: inline-block;
	margin:0;	
	font:0 0px/0px 'Roboto', sans-serif;
	padding:0px 0x;
	font-size:0px;
	max-width:0px;
	width:0px;
	font-family:Inconsolata;
	color:#1A1526; 
	float:right;
	text-align:right;
	background-color:transparent;
	font-weight:600!important;	
	text-transform:uppercase;
	letter-spacing:0px;
}
.sociallinks a{
    background-color:#F4E3D7;
    color:#F4E3D7;
    	font-size:0px;
    padding:0px;
}

/* Miscellaneous
-------------------------------------------------------------- */


.detail_head_collapsed,
.detail_head_expanded {
	color: #372642;
}

.fitpic {
	max-width: 794px;
}

#film {
	width: 100%!important;
}

#film .thumb a:link {
	width: 100%!important;
}

.tape {
	width: 100%!important; 
	height: 100%!important; 
	margin-left: 0px!important;
}

.remove {
	display: none!important;
}

.display_media .image {
	max-width: 70vw!important; 
	height: auto;
}

#picinfo {
	width: 100%!important; 
	overflow: scroll;
}
.sortorder_cell {
	font: 0px/1 'Roboto',sans-serif;
	letter-spacing: 0;
	color: #E8B6AC;
}
.sortorder_cell img,
.thumb_caption_rating img,
#comments img {
	max-width: 0vw!important; 
	height: auto!important;
}

#comments #captchaImg img{
	max-width: 25vw!important; 
	height: auto!important;
}

.comment_date {
	font-size: 1.4vw!important;
}

.navmenu img,.buttonlist img {
	max-width: 2.5vw!important; 
	height: auto;
}

.buttonlist {
	text-align:center;
}

.buttonlist ul li a span {
	height: 2vw!important; 
	line-height: 2vw!important;
}

.buttonlist ul li a {
	font-size: 1vw!important;
}

}

@media only screen and (max-width: 481px), only screen and (max-width: 481px) {

.tableh1 {
        background: transparent;
	padding: 5px 7px!important; 
	font-size:8pt;
	    letter-spacing:0px;

}

.thumbnail {
	max-width: 8vw!important; 
	height: auto;
}

.statlink {
	line-height: 21px!important;
}

.catrow_noalb {
            	font-size:4pt;
	padding: 5px 7px!important;
}
.catrow_noalb, .catrow {
    color:#372642;
        	font-size:4pt;

}
.catrow {
    	font-size:4pt;
    		line-height:10px;
	padding: 5px 7px!important;
}

.catlink a{
    font-size: 8pt;
	line-height: 21px!important;
}

.catrow_noalb table,.catrow table {
	font-size:5pt;
	line-height:10px;
}

.tableh2 {
	padding: 5px!important;
}

.alblink {
	font-size: 11px!important; 
	background-color:#F4E3D7;
	border:1px solid #F4E3D7;
	letter-spacing:-6px;
	line-height: 20px!important;
}
.album_stat {  
    color: #372642;
    font-size: 5pt;
    margin-left:10px;
display: block;
padding:5px;
    display: inline-block;
margin-left:10px;	
text-align:justify; 
}
.tableb p {
	font-size: 10px!important; 
	line-height: 1.5!important;
}

.sortorder_cell {
	display: none;
}

}

/* ========================================================================== 
   SELENAVAULT — FULL HEADER PALETTE OVERRIDE
   Palette refined against the supplied neon pink / teal header artwork
   This final layer intentionally overrides older Coppermine + responsive
   colors so the gallery reflects header.jpg on desktop AND mobile.
   ========================================================================== */

:root {
  --selenavault-ink: #1A1526;
  --selenavault-charcoal: #211B2B;
  --selenavault-deep-red: #5A3041;
  --selenavault-red: #9B5255;
  --selenavault-bright-red: #C47778;
  --selenavault-coral: #E79F8F;
  --selenavault-peach: #C97C9B;
  --selenavault-rose: #B9646C;
  --selenavault-pink: #E8B6AC;
  --selenavault-sand: #86A6AD;
  --selenavault-cream: #E7D6D4;
  --selenavault-paper: #F4E3D7;
  --selenavault-teal: #5E607C;
  --selenavault-cyan: #85849A;
  --selenavault-silver: #9A91A2;
}

html,
body {
  background-color: var(--selenavault-ink) !important;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(228,70,53,.82) 0 4%, transparent 4.5%),
    radial-gradient(circle at 91% 18%, rgba(210,118,94,.76) 0 6%, transparent 6.5%),
    radial-gradient(circle at 17% 78%, rgba(228,160,170,.50) 0 5%, transparent 5.5%),
    linear-gradient(122deg,
      var(--selenavault-ink) 0 17%,
      var(--selenavault-deep-red) 17% 24%,
      var(--selenavault-red) 24% 31%,
      var(--selenavault-coral) 31% 38%,
      var(--selenavault-ink) 38% 56%,
      var(--selenavault-peach) 56% 65%,
      var(--selenavault-red) 65% 74%,
      var(--selenavault-charcoal) 74% 86%,
      var(--selenavault-sand) 86% 100%) !important;
  background-attachment: fixed !important;
  color: var(--selenavault-cream) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .22;
  background-image:
    repeating-linear-gradient(17deg, transparent 0 18px, rgba(241,217,201,.16) 18px 20px),
    repeating-linear-gradient(-13deg, transparent 0 31px, rgba(17,17,17,.32) 31px 34px);
}

#container {
  background: rgba(17,17,17,.96) !important;
  color: var(--selenavault-cream) !important;
  border-left: 5px solid var(--selenavault-red) !important;
  border-right: 5px solid var(--selenavault-coral) !important;
  box-shadow: 0 0 38px rgba(17,17,17,.72) !important;
}

.bg-site,
.blocks,
.blockbg,
.spacelalt,
.first-area,
.second-area,
.top-navigation,
.site-footer,
.footer-block {
  background-color: var(--selenavault-ink) !important;
  color: var(--selenavault-cream) !important;
}

.first-area {
  border-top: 6px solid var(--selenavault-red) !important;
  border-bottom: 6px solid var(--selenavault-coral) !important;
}

.cpg-nav {
  background: linear-gradient(90deg, var(--selenavault-deep-red), var(--selenavault-red) 42%, var(--selenavault-coral) 72%, var(--selenavault-pink)) !important;
  color: var(--selenavault-cream) !important;
  border-top: 2px solid var(--selenavault-paper) !important;
  border-bottom: 4px solid var(--selenavault-ink) !important;
}

.cpg-nav a,
.cpg-nav a:visited {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--selenavault-paper) !important;
  color: var(--selenavault-paper) !important;
  text-shadow: 1px 1px 0 var(--selenavault-deep-red) !important;
}

.cpg-nav a:hover,
.cpg-nav a:focus {
  color: var(--selenavault-ink) !important;
  -webkit-text-fill-color: var(--selenavault-ink) !important;
  background: var(--selenavault-paper) !important;
  box-shadow: 0 4px 0 var(--selenavault-pink) !important;
}

a,
a:visited { color: var(--selenavault-coral) !important; }
a:hover,
a:focus { color: var(--selenavault-bright-red) !important; }

strong, b { color: var(--selenavault-pink) !important; }
em, i { color: var(--selenavault-peach) !important; }
u {
  background: var(--selenavault-deep-red) !important;
  color: var(--selenavault-paper) !important;
}

::selection { background: var(--selenavault-bright-red) !important; color: var(--selenavault-paper) !important; }
::-moz-selection { background: var(--selenavault-bright-red) !important; color: var(--selenavault-paper) !important; }

::-webkit-scrollbar { background: var(--selenavault-ink) !important; border-color: var(--selenavault-ink) !important; }
::-webkit-scrollbar-thumb { background: var(--selenavault-red) !important; border-color: var(--selenavault-ink) !important; }

.site-name span {
  background: linear-gradient(90deg, var(--selenavault-bright-red), var(--selenavault-coral), var(--selenavault-pink)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.site-name-slogan {
  color: var(--selenavault-paper) !important;
  background: var(--selenavault-red) !important;
}
.sociallinks,
.soicialblock {
  background-color: var(--selenavault-charcoal) !important;
  color: var(--selenavault-paper) !important;
}
.soicialblock a { color: var(--selenavault-pink) !important; }
.soicialblock a:hover { color: var(--selenavault-bright-red) !important; }

.welcome-message {
  background: linear-gradient(110deg, var(--selenavault-charcoal), var(--selenavault-ink)) !important;
  color: var(--selenavault-cream) !important;
  border-left: 8px solid var(--selenavault-bright-red) !important;
  border-right: 8px solid var(--selenavault-pink) !important;
}
.welcome-img img {
  background: var(--selenavault-ink) !important;
  outline-color: var(--selenavault-coral) !important;
}

.menuhdr a {
  background: var(--selenavault-red) !important;
  color: var(--selenavault-paper) !important;
  border-bottom: 3px solid var(--selenavault-pink) !important;
}
.menuhdr a:hover { background: var(--selenavault-paper) !important; color: var(--selenavault-ink) !important; }

.maintable,
.detail_body .maintable {
  background: rgba(55,41,37,.97) !important;
  color: var(--selenavault-cream) !important;
  border: 1px solid var(--selenavault-deep-red) !important;
  box-shadow: 0 8px 30px rgba(17,17,17,.35) !important;
}
.tableb,
.tableb_alternate {
  background: var(--selenavault-charcoal) !important;
  color: var(--selenavault-cream) !important;
}
.tablef {
  background: var(--selenavault-deep-red) !important;
  color: var(--selenavault-paper) !important;
}

.tableh1,
.tableh1-stat {
  background: linear-gradient(90deg, var(--selenavault-red), var(--selenavault-bright-red) 58%, var(--selenavault-coral)) !important;
  background-image: linear-gradient(90deg, var(--selenavault-red), var(--selenavault-bright-red) 58%, var(--selenavault-coral)) !important;
  color: var(--selenavault-paper) !important;
  border-left: 7px solid var(--selenavault-ink) !important;
}
.tableh3 {
  background: var(--selenavault-coral) !important;
  color: var(--selenavault-ink) !important;
}
.tableh2,
.tableh2_compact {
  background: var(--selenavault-sand) !important;
  color: var(--selenavault-ink) !important;
}
.tableh1 a { color: var(--selenavault-paper) !important; }
.tableh1 a:hover { color: var(--selenavault-ink) !important; }

.stats {
  background: var(--selenavault-red) !important;
  color: var(--selenavault-paper) !important;
  border-left: 4px solid var(--selenavault-pink) !important;
}
.stats strong { color: var(--selenavault-sand) !important; }
.statlink,
.statlink2,
.statlink h2 { color: var(--selenavault-cream) !important; }
.statlink a { color: var(--selenavault-coral) !important; }
.statlink a:hover { color: var(--selenavault-pink) !important; }

.catrow_noalb,
.catrow {
  background: linear-gradient(90deg, rgba(55,41,37,.98), rgba(212,72,60,.42)) !important;
  color: var(--selenavault-cream) !important;
  border-bottom: 2px solid var(--selenavault-red) !important;
}
.catlink a {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--selenavault-paper) !important;
  color: var(--selenavault-paper) !important;
}
.catlink a:hover,
.catlink a:focus {
  -webkit-text-fill-color: var(--selenavault-pink) !important;
  color: var(--selenavault-pink) !important;
}
.catlink:before { color: var(--selenavault-bright-red) !important; }
.catrow_noalb .image,
.catrow .image {
  background: var(--selenavault-paper) !important;
  border: 3px solid var(--selenavault-coral) !important;
  border-image: none !important;
}

.alblink,
.alblink a {
  background-color: transparent !important;
  color: var(--selenavault-paper) !important;
  border-color: var(--selenavault-red) !important;
}
.alblink:before { color: var(--selenavault-pink) !important; }
.album_stat { color: var(--selenavault-peach) !important; }

.image {
  background: var(--selenavault-charcoal) !important;
  border: 3px solid var(--selenavault-red) !important;
  border-image: linear-gradient(135deg, var(--selenavault-bright-red), var(--selenavault-pink), var(--selenavault-peach)) 1 !important;
}

.thumbnails {
  background: var(--selenavault-charcoal) !important;
  border: 2px solid var(--selenavault-red) !important;
  box-shadow: inset 0 0 0 1px var(--selenavault-coral) !important;
}
.thumb_title_title,
.thumb_title {
  color: var(--selenavault-paper) !important;
}
.thumb_title_views,
.thumb_caption,
.thumb_dimensions,
.thumb_caption_ctime,
.thumb_resolution {
  color: var(--selenavault-ink) !important;
  border: 0 !important;
}
.thumb_title_views { background: var(--selenavault-pink) !important; }
.thumb_title_views::after { border-bottom-color: var(--selenavault-pink) !important; }
.thumb_caption_ctime { background: var(--selenavault-peach) !important; }
.thumb_dimensions { background: var(--selenavault-coral) !important; }
.thumb_resolution { background: var(--selenavault-sand) !important; }
.thumb_caption { background: var(--selenavault-cream) !important; }
.thumb_title_views:before,
.thumb_caption_ctime:before { color: var(--selenavault-deep-red) !important; }

.navmenu,
.navmenu a,
.navmenu a:visited { color: var(--selenavault-cream) !important; }
.navmenu-active {
  background: var(--selenavault-red) !important;
  color: var(--selenavault-paper) !important;
  border-color: var(--selenavault-coral) !important;
}
.navmenu a:hover { color: var(--selenavault-pink) !important; }

.admin_menu_wrapper,
.admin_menu {
  background: var(--selenavault-charcoal) !important;
  color: var(--selenavault-cream) !important;
  border-color: var(--selenavault-red) !important;
}
.admin_menu a { color: var(--selenavault-paper) !important; }

.textinput,
.listbox,
.listbox_lang,
input,
textarea,
select {
  background: var(--selenavault-paper) !important;
  color: var(--selenavault-ink) !important;
  border: 2px solid var(--selenavault-coral) !important;
}
.button,
.buttonlist ul li a,
input[type='reset'],
input[type='submit'],
input[type='button'] {
  background: var(--selenavault-red) !important;
  color: var(--selenavault-paper) !important;
  border: 0 !important;
}
.button:hover,
.buttonlist ul li a:hover,
.button:focus,
.buttonlist ul li a:focus,
input[type='submit']:hover,
input[type='button']:hover {
  background: var(--selenavault-bright-red) !important;
  color: var(--selenavault-paper) !important;
}

.tile-background,
.filmstrip_background {
  background: var(--selenavault-ink) !important;
  color: var(--selenavault-cream) !important;
}
.strip_image {
  background: var(--selenavault-paper) !important;
  border: 3px solid var(--selenavault-coral) !important;
}
.filmstip_related { color: var(--selenavault-cream) !important; }

.detail_head_collapsed,
.detail_head_expanded {
  color: var(--selenavault-paper) !important;
  border-bottom-color: var(--selenavault-coral) !important;
}
.comment_date { color: var(--selenavault-peach) !important; }

.site-footer {
  background: var(--selenavault-ink) !important;
  border-top: 6px solid var(--selenavault-red) !important;
  color: var(--selenavault-cream) !important;
}
.footer-content { color: var(--selenavault-cream) !important; }
.footer-content i { color: var(--selenavault-pink) !important; }
.site-footer a { color: var(--selenavault-paper) !important; border-bottom-color: var(--selenavault-coral) !important; }
.site-footer a:hover { color: var(--selenavault-pink) !important; }

/* Keep Coppermine messages readable but inside the same artwork palette. */
.cpg_message_info,
.cpg_message_success,
.cpg_message_warning,
.cpg_message_error,
.cpg_message_validation,
.message,
.red,
.green,
.blue {
  color: var(--selenavault-ink) !important;
  border-color: var(--selenavault-red) !important;
}
.cpg_message_info { background-color: var(--selenavault-cream) !important; }
.cpg_message_success { background-color: var(--selenavault-sand) !important; }
.cpg_message_warning { background-color: var(--selenavault-peach) !important; }
.cpg_message_error,
.cpg_message_validation,
.red { background-color: var(--selenavault-pink) !important; }
.green { background-color: var(--selenavault-sand) !important; }
.blue { background-color: var(--selenavault-cream) !important; }

.progressBarInProgress { background-color: var(--selenavault-coral) !important; }
.progressBarComplete { background-color: var(--selenavault-red) !important; }
.progressBarError { background-color: var(--selenavault-deep-red) !important; }

/* The original theme sets many mobile blocks back to white. Override them last. */
@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  body { background-color: var(--selenavault-ink) !important; }
  .blocks,
  .cpg-nav,
  .blockbg,
  .first-area,
  .second-area,
  .site-footer { background-color: var(--selenavault-ink) !important; }
  #container { background: rgba(17,17,17,.98) !important; color: var(--selenavault-cream) !important; }
  .thumb_caption,
  .thumb_filename,
  .thumb_num_comments,
  .thumb_title_views,
  .thumb_resolution {
    background-color: var(--selenavault-sand) !important;
    color: var(--selenavault-ink) !important;
  }
  .tableh1 { background: var(--selenavault-red) !important; color: var(--selenavault-paper) !important; }
  .alblink { background: transparent !important; border-color: var(--selenavault-red) !important; }
}

@media only screen and (max-width: 481px), only screen and (max-device-width: 481px) {
  .tableh1 { background: var(--selenavault-red) !important; }
  .catrow_noalb,
  .catrow { background: var(--selenavault-charcoal) !important; color: var(--selenavault-cream) !important; }
  .alblink { background: var(--selenavault-deep-red) !important; border-color: var(--selenavault-coral) !important; color: var(--selenavault-paper) !important; }
  .album_stat { color: var(--selenavault-peach) !important; }
}

/* ========================================================================== 
   THUMBNAILS — SOFT HEADER-COLOR TINT / ORIGINAL COLOR ON HOVER
   The album list uses .thumbnails > a.albums, while the thumbnail grid uses
   an image link as the first child of the inner table cell.
   ========================================================================== */

.thumbnails > a.albums,
.thumbnails table td > a:first-child {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  isolation: isolate;
}

.thumbnails > a.albums::after,
.thumbnails table td > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(212, 72, 60, .22) 0%,
    rgba(210, 118, 94, .16) 42%,
    rgba(228, 160, 170, .20) 72%,
    rgba(241, 217, 201, .08) 100%
  );
  opacity: 1;
  transition: opacity .35s ease;
}

.thumbnails > a.albums img,
.thumbnails table td > a:first-child img {
  position: relative;
  z-index: 1;
  filter: saturate(.84) contrast(.97) brightness(.98);
  transform: scale(1);
  transition: filter .35s ease, transform .35s ease;
}

.thumbnails > a.albums:hover::after,
.thumbnails > a.albums:focus-visible::after,
.thumbnails table td > a:first-child:hover::after,
.thumbnails table td > a:first-child:focus-visible::after {
  opacity: 0;
}

.thumbnails > a.albums:hover img,
.thumbnails > a.albums:focus-visible img,
.thumbnails table td > a:first-child:hover img,
.thumbnails table td > a:first-child:focus-visible img {
  filter: none;
  transform: scale(1.015);
}

/* A slightly warmer frame makes the thumbnails feel connected to header.jpg. */
.thumbnails {
  border-color: var(--selenavault-red) !important;
  box-shadow:
    inset 0 0 0 1px var(--selenavault-coral),
    0 4px 14px rgba(17,17,17,.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .thumbnails > a.albums::after,
  .thumbnails table td > a:first-child::after,
  .thumbnails > a.albums img,
  .thumbnails table td > a:first-child img {
    transition: none;
  }
  .thumbnails > a.albums:hover img,
  .thumbnails > a.albums:focus-visible img,
  .thumbnails table td > a:first-child:hover img,
  .thumbnails table td > a:first-child:focus-visible img {
    transform: none;
  }
}
/* ==========================================================================
   SELENAVAULT 2026 — HEADER-MATCHING PALETTE + WELCOME PANEL
   Keep this section LAST. It overrides the legacy responsive rules above.
   Images used by this section:
     ./imgs/header.jpg
     ./imgs/message.png
   ========================================================================== */

:root {
  --sv-ink: #1A1526;
  --sv-black: #111222;
  --sv-charcoal: #211B2B;
  --sv-plum: #5A3041;
  --sv-magenta: #9B5255;
  --sv-rose: #B9646C;
  --sv-pink: #C47778;
  --sv-hot-pink: #E79F8F;
  --sv-soft-pink: #E8B6AC;
  --sv-teal: #5E607C;
  --sv-cyan: #85849A;
  --sv-silver: #9A91A2;
  --sv-text: #E7D6D4;
  --sv-paper: #F4E3D7;
}

/* Dark jungle/neon background pulled from header.jpg. */
html,
body {
  background-color: var(--sv-black) !important;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(240,90,155,.15) 0 5%, transparent 22%),
    radial-gradient(circle at 88% 22%, rgba(79,128,138,.14) 0 6%, transparent 24%),
    linear-gradient(135deg, #111222 0%, #0B0D14 34%, #21101D 58%, #071016 78%, #111222 100%) !important;
  background-attachment: fixed !important;
  color: var(--sv-text) !important;
}

body::before {
  opacity: .16 !important;
  background-image:
    repeating-linear-gradient(17deg, transparent 0 22px, rgba(240,90,155,.10) 22px 23px),
    repeating-linear-gradient(-13deg, transparent 0 34px, rgba(120,169,176,.08) 34px 35px) !important;
}

#container {
  background: rgba(5,7,12,.97) !important;
  border-left-color: var(--sv-magenta) !important;
  border-right-color: var(--sv-teal) !important;
  box-shadow: 0 0 38px rgba(0,0,0,.72) !important;
}

/* Main header: preserve the exact artwork ratio instead of cropping it. */
.header1 {
  width: 100% !important;
  max-width: 2048px;
  height: auto !important;
  aspect-ratio: 2048 / 1146;
  margin: 0 auto;
  background-image: url(./imgs/header.jpg?v=20260910-0935) !important;
  background-color: var(--sv-black) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
}

/* Theme colors */
.bg-site,
.blocks,
.blockbg,
.spacelalt,
.first-area,
.second-area,
.top-navigation,
.site-footer,
.footer-block {
  background-color: var(--sv-ink) !important;
  color: var(--sv-text) !important;
}

.cpg-nav {
  background: linear-gradient(90deg,
    var(--sv-plum) 0%,
    var(--sv-magenta) 34%,
    var(--sv-hot-pink) 56%,
    var(--sv-magenta) 74%,
    var(--sv-teal) 100%) !important;
  border-top: 1px solid rgba(232,166,192,.55) !important;
  border-bottom: 4px solid var(--sv-black) !important;
}
.cpg-nav a,
.cpg-nav a:visited {
  color: var(--sv-paper) !important;
  -webkit-text-fill-color: var(--sv-paper) !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,.55) !important;
}
.cpg-nav a:hover,
.cpg-nav a:focus {
  color: var(--sv-black) !important;
  -webkit-text-fill-color: var(--sv-black) !important;
  background: var(--sv-soft-pink) !important;
  box-shadow: 0 4px 0 var(--sv-teal) !important;
}

a,
a:visited { color: var(--sv-hot-pink) !important; }
a:hover,
a:focus { color: var(--sv-cyan) !important; }
strong,
b { color: var(--sv-soft-pink) !important; }
em,
i { color: var(--sv-cyan) !important; }
u {
  background: transparent !important;
  color: var(--sv-hot-pink) !important;
}

::selection {
  background: var(--sv-hot-pink) !important;
  color: var(--sv-black) !important;
}
::-moz-selection {
  background: var(--sv-hot-pink) !important;
  color: var(--sv-black) !important;
}
::-webkit-scrollbar {
  background: var(--sv-black) !important;
  border-color: var(--sv-black) !important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--sv-hot-pink), var(--sv-magenta)) !important;
  border-color: var(--sv-black) !important;
}

/* Welcome section — same left-image/right-copy structure as the reference,
   but square corners throughout. */
.welcome-message {
  width: 100%;
  max-width: 1220px;
  min-height: 265px;
  height: auto !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 42% 58%;
  align-items: stretch;
  overflow: hidden;
  background: var(--sv-charcoal) !important;
  color: var(--sv-text) !important;
  border: 1px solid rgba(232,166,192,.28) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.72 !important;
  box-sizing: border-box;
}

.welcome-img {
  float: none !important;
  width: 100%;
  height: 100%;
  min-height: 265px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--sv-ink) !important;
  border-radius: 0 !important;
}

.welcome-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 265px;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover;
  object-position: left center;
  background: var(--sv-ink) !important;
  outline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.welcome-content {
  min-width: 0;
  padding: 31px 38px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  background:
    linear-gradient(115deg, rgba(240,90,155,.05), transparent 42%),
    var(--sv-charcoal);
  border-left: 1px solid rgba(240,90,155,.22);
  border-radius: 0 !important;
}

.welcome-text {
  margin: 0;
  color: var(--sv-text);
}

.welcome-text b,
.welcome-text strong {
  color: var(--sv-hot-pink) !important;
}

.welcome-text i,
.welcome-text em {
  color: var(--sv-cyan) !important;
}

.welcome-text u {
  color: var(--sv-soft-pink) !important;
  text-decoration: none;
}

.welcome-signoff {
  display: inline-block;
  margin-top: 6px;
}

.soicialblock {
  width: auto !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px;
  align-items: center;
  text-align: left !important;
  background: transparent !important;
  color: var(--sv-paper) !important;
}

.sociallinks {
  width: 36px;
  height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 1px solid rgba(232,166,192,.45);
  border-radius: 0 !important;
  font-size: 12px !important;
  line-height: 36px !important;
  text-align: center;
}

.sociallinks a {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: block;
  color: var(--sv-soft-pink) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.sociallinks a:hover,
.sociallinks a:focus {
  color: var(--sv-black) !important;
  background: var(--sv-hot-pink) !important;
}

.sociallinks i,
.soicialblock i {
  color: inherit !important;
  font-size: 13px !important;
}

/* Coppermine content blocks */
.maintable,
.detail_body .maintable {
  background: rgba(16,19,26,.97) !important;
  color: var(--sv-text) !important;
  border-color: rgba(240,90,155,.30) !important;
}
.tableb,
.tableb_alternate {
  background: var(--sv-charcoal) !important;
  color: var(--sv-text) !important;
}
.tablef {
  background: var(--sv-plum) !important;
  color: var(--sv-paper) !important;
}
.tableh1,
.tableh1-stat {
  background: linear-gradient(90deg, var(--sv-plum), var(--sv-magenta) 50%, var(--sv-hot-pink)) !important;
  background-image: linear-gradient(90deg, var(--sv-plum), var(--sv-magenta) 50%, var(--sv-hot-pink)) !important;
  color: var(--sv-paper) !important;
  border-left-color: var(--sv-teal) !important;
}
.tableh3 {
  background: var(--sv-teal) !important;
  color: var(--sv-paper) !important;
}
.tableh2,
.tableh2_compact {
  background: #182129 !important;
  color: var(--sv-text) !important;
}
.stats {
  background: var(--sv-magenta) !important;
  color: var(--sv-paper) !important;
  border-left-color: var(--sv-cyan) !important;
}

.catrow_noalb,
.catrow {
  background: linear-gradient(90deg, rgba(16,19,26,.98), rgba(142,45,91,.38)) !important;
  color: var(--sv-text) !important;
  border-bottom-color: var(--sv-magenta) !important;
}
.catlink:before,
.alblink:before { color: var(--sv-hot-pink) !important; }
.album_stat { color: var(--sv-cyan) !important; }

.image,
.thumbnails {
  background: var(--sv-charcoal) !important;
  border-color: var(--sv-magenta) !important;
  box-shadow: inset 0 0 0 1px rgba(79,128,138,.48) !important;
}
.thumbnails > a.albums::after,
.thumbnails table td > a:first-child::after {
  background: linear-gradient(
    135deg,
    rgba(240,90,155,.20) 0%,
    rgba(142,45,91,.14) 42%,
    rgba(79,128,138,.16) 72%,
    rgba(232,166,192,.06) 100%
  ) !important;
}

.thumb_title_views { background: var(--sv-soft-pink) !important; }
.thumb_title_views::after { border-bottom-color: var(--sv-soft-pink) !important; }
.thumb_caption_ctime { background: #B87E98 !important; }
.thumb_dimensions { background: var(--sv-cyan) !important; }
.thumb_resolution { background: #90A8AE !important; }
.thumb_caption { background: var(--sv-paper) !important; }

.textinput,
.listbox,
.listbox_lang,
input,
textarea,
select {
  background: #EAE4E8 !important;
  color: var(--sv-ink) !important;
  border-color: var(--sv-teal) !important;
}
.button,
.buttonlist ul li a,
input[type='reset'],
input[type='submit'],
input[type='button'] {
  background: var(--sv-magenta) !important;
  color: var(--sv-paper) !important;
}
.button:hover,
.buttonlist ul li a:hover,
.button:focus,
.buttonlist ul li a:focus,
input[type='submit']:hover,
input[type='button']:hover {
  background: var(--sv-hot-pink) !important;
  color: var(--sv-black) !important;
}

.site-footer {
  border-top-color: var(--sv-magenta) !important;
}
.footer-content i { color: var(--sv-hot-pink) !important; }
.site-footer a { border-bottom-color: var(--sv-teal) !important; }

/* Tablet/mobile: undo the legacy "0px" rules that hid the header,
   welcome text, welcome image and social links. */
@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  .header-mobil {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .header1 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2048 / 1146;
    background-image: url(./imgs/header.jpg?v=20260910-0935) !important;
  }

  .blocks,
  .cpg-nav {
    width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .welcome-message {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-columns: 1fr;
    margin: 0 auto 18px !important;
    font-size: 12px !important;
  }

  .welcome-img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 580 / 265;
  }

  .welcome-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 580 / 265;
  }

  .welcome-content {
    padding: 24px 24px 22px;
    border-left: 0;
    border-top: 1px solid rgba(240,90,155,.22);
  }

  .soicialblock {
    width: auto !important;
    margin-top: 18px !important;
  }

  .sociallinks {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    line-height: 34px !important;
  }

  .sociallinks a {
    font-size: 12px !important;
  }

  .soicialblock i {
    font-size: 13px !important;
  }
}

@media only screen and (max-width: 481px), only screen and (max-device-width: 481px) {
  .welcome-content {
    padding: 20px 18px;
  }

  .welcome-message {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }

  .cpg-nav {
    background: linear-gradient(90deg, var(--sv-plum), var(--sv-magenta), var(--sv-teal)) !important;
  }
}

/* ========================================================================== 
   SELENAVAULT 2026 — HEADER → CONTENT TRANSITION / WELCOME OVERLAP
   The artwork is 2048×1146. The small slogan sits at roughly 65.9% of the
   artwork height. Moving .blocks upward by the remaining artwork depth minus
   50px makes the Welcome Note begin about 50px below that slogan.
   Keep this section LAST.
   ========================================================================== */

:root {
  --sv-header-height: min(55.957vw, 1146px);
}

/* The header artwork fades to almost pure black at its lower edge. Start the
   page gradient with the same tone so there is no visible hard seam. */
html {
  background: #111222 !important;
}

body {
  background-color: #111222 !important;
  background-image: linear-gradient(
    180deg,
    #111222 0,
    #111222 var(--sv-header-height),
    #1A1526 calc(var(--sv-header-height) + 180px),
    #130c17 calc(var(--sv-header-height) + 520px),
    #101820 calc(var(--sv-header-height) + 900px),
    #070b10 calc(var(--sv-header-height) + 1320px),
    #111222 calc(var(--sv-header-height) + 1900px)
  ) !important;
  background-attachment: scroll !important;
}

/* Let the new body gradient show through around the Coppermine cards. */
.blocks {
  background: transparent !important;

  /* Desktop formula:
     header height = 55.957vw
     slogan Y      ≈ 36.907vw
     desired start = slogan + 50px
     overlap       ≈ 19.05vw - 50px */
  margin-top: calc(50px - 19.05vw) !important;
  position: relative;
  z-index: 20;
}

/* At the artwork's native maximum width, stop increasing the overlap. */
@media only screen and (min-width: 2048px) {
  .blocks {
    margin-top: -340px !important;
  }
}

/* The Welcome Note is the first item in .blocks, so it now lands about 50px
   under “YOUR ULTIMATE AND BEST SOURCE ...” and visually enters the header. */
.welcome-message {
  position: relative;
  z-index: 25;
  background:
    linear-gradient(115deg, rgba(240,90,155,.055), rgba(0,0,2,.06) 48%),
    rgba(10,12,18,.965) !important;
  box-shadow: 0 16px 42px rgba(0,0,2,.48) !important;
}

.welcome-content {
  background:
    linear-gradient(115deg, rgba(240,90,155,.045), transparent 46%),
    rgba(16,19,26,.96) !important;
}

/* Content following the Welcome Note remains in the normal flow, so the menu
   and gallery naturally continue beneath the overlapping panel. */
.cpg-nav {
  position: relative;
  z-index: 21;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  :root {
    --sv-header-height: 55.957vw;
  }

  .blocks {
    margin-top: calc(50px - 19.05vw) !important;
    background: transparent !important;
  }
}

@media only screen and (max-width: 481px), only screen and (max-device-width: 481px) {
  /* On very narrow phones keep a small overlap rather than allowing the panel
     to drift below the intended artwork area. */
  .blocks {
    margin-top: max(-42px, calc(50px - 19.05vw)) !important;
  }
}



/* ========================================================================== 
   SELENAVAULT 2026 — CHROME / CACHE-SAFE HEADER HOTFIX
   Keep this section LAST. The header is now a real <img> in template.html,
   while the CSS background remains only as a fallback.
   ========================================================================== */
.header1 {
  display: block !important;
  width: 100% !important;
  max-width: 2048px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background-image: url(./imgs/header.jpg?v=20260910-0935) !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  overflow: visible !important;
}

.header1 .header-art {
  display: block !important;
  width: 100% !important;
  max-width: 2048px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  .header1,
  .header1 .header-art {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 2048px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ========================================================================== 
   SELENAVAULT 2026 — LAST VIEWED WIDTH + DATE-ONLY FIX
   The long IP/IPv6 strings in Coppermine's LAST VIEWED captions can force an
   HTML table wider than .blocks. template.html marks that table after load.
   Keep this section LAST.
   ========================================================================== */

.sv-last-viewed {
  width: 100% !important;
  max-width: 1220px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  table-layout: fixed !important;
  box-sizing: border-box !important;
}

.sv-last-viewed > tbody,
.sv-last-viewed > tbody > tr {
  width: 100% !important;
  max-width: 100% !important;
}

.sv-last-viewed td,
.sv-last-viewed th,
.sv-last-viewed .thumbnails {
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.sv-last-viewed .thumbnails {
  width: auto !important;
  overflow: hidden !important;
}

.sv-last-viewed .thumbnails table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* template.html removes all other LAST VIEWED metadata and inserts this one
   clean date underneath the thumbnail. */
.sv-last-viewed-date {
  display: inline-block;
  max-width: calc(100% - 24px);
  margin: 16px auto 10px;
  padding: 7px 12px;
  box-sizing: border-box;
  background: var(--sv-paper) !important;
  color: var(--sv-black) !important;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .25px;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  .sv-last-viewed {
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* ========================================================================== 
   SELENAVAULT 2026 — LAST VIEWED HARD FIX v2
   Only the thumbnail and the viewed DATE remain. Time / IP / uploader / views
   are removed by template.html. Keep this block LAST.
   ========================================================================== */
.sv-last-viewed {
  width: 100% !important;
  max-width: 1220px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  table-layout: fixed !important;
}

.sv-last-viewed td.thumbnails {
  min-width: 0 !important;
  overflow: hidden !important;
  vertical-align: top !important;
}

.sv-last-viewed-item {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
}

.sv-last-viewed-item > a {
  display: inline-block !important;
  max-width: 100% !important;
  line-height: 0;
}

.sv-last-viewed-item > a img {
  max-width: 100% !important;
  height: auto !important;
}

.sv-last-viewed-date {
  display: block !important;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 16px auto 10px !important;
  padding: 7px 12px !important;
  box-sizing: border-box;
  background: var(--sv-paper) !important;
  color: var(--sv-black) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .25px !important;
  text-align: center !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ========================================================================== 
   SELENAVAULT 2026 — SIMPLE / UNIFIED SECTION TITLES
   One fixed background for all four home-page section titles.
   The title itself remains HTML text; the ornament below is a transparent PNG.
   Keep this block LAST.
   ========================================================================== */

:root {
  --sv-section-bg: #111222;
  --sv-content-bg: #211B2B;
  --sv-frame: rgba(240, 90, 155, .50);
  --sv-title: #F4E3D7;
  --sv-title-pink: #E79F8F;
}

/* One narrow frame language for the gallery content. */
#index .maintable,
#index .sv-section-table {
  width: 100% !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  border: 1px solid var(--sv-frame) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
  background: var(--sv-content-bg) !important;
  box-sizing: border-box !important;
}

/* Keep nested Coppermine layout tables from getting an extra outer frame. */
#index .maintable .maintable {
  border: 0 !important;
  max-width: 100% !important;
}

/* Use the same thin line for the cells inside the content blocks. */
#index .thumbnails,
#index .catrow,
#index .catrow_noalb {
  border-color: var(--sv-frame) !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.sv-section-heading-cell {
  position: relative !important;
  height: 126px !important;
  min-height: 126px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: var(--sv-section-bg) !important;
  background-image: url('./imgs/section_title_bg_sv2.png?v=20260911-1') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sv-frame) !important;
  box-shadow: none !important;
  text-align: center !important;
  line-height: normal !important;
  vertical-align: middle !important;
}

.sv-section-heading-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 126px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 20px 10px;
  text-align: center;
}

/* Softly blend the background image into the dark content immediately below. */
.sv-section-heading-inner::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(16,19,26,0) 0%, rgba(16,19,26,.45) 52%, var(--sv-content-bg) 100%);
}

.sv-section-title-text {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--sv-title) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: clamp(17px, 1.65vw, 23px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow:
    0 0 8px rgba(240,90,155,.42),
    0 1px 1px #111222 !important;
  white-space: nowrap;
}

.sv-section-title-underline {
  display: block !important;
  width: clamp(180px, 23vw, 270px) !important;
  max-width: 70% !important;
  height: auto !important;
  margin: 7px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* No gap between the title row and the first content row. */
.sv-section-table > tbody > tr:first-child > td,
.sv-section-table > tr:first-child > td {
  margin-bottom: 0 !important;
}
.sv-section-table > tbody > tr:nth-child(2) > td,
.sv-section-table > tr:nth-child(2) > td {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  #index .maintable,
  #index .sv-section-table {
    max-width: 100% !important;
  }

  .sv-section-heading-cell,
  .sv-section-heading-inner {
    height: 96px !important;
    min-height: 96px !important;
  }

  .sv-section-heading-inner {
    padding: 9px 12px 7px;
  }

  .sv-section-title-text {
    font-size: clamp(14px, 4.6vw, 19px) !important;
    white-space: normal;
  }

  .sv-section-title-underline {
    width: min(220px, 62vw) !important;
    max-width: 76% !important;
    margin-top: 5px !important;
  }
}


/* ========================================================================== 
   SELENAVAULT 2026 — UNIFIED CONTENT / TITLE FINISH
   More breathing room above the first row, one consistent outer frame, and a
   darker plum-black palette sampled from section_title_bg_sv2.png?v=20260911-1.
   KEEP THIS BLOCK LAST.
   ========================================================================== */

:root {
  --sv-section-bg: #010002;
  --sv-content-bg: #17111F;
  --sv-content-bg-2: #201723;
  --sv-cell-bg: #1D1725;
  --sv-frame: #6C3647;
  --sv-frame-strong: #9B5255;
  --sv-grid: rgba(140, 36, 75, .78);
  --sv-pink: #B9646C;
  --sv-pink-soft: #D39A9E;
  --sv-pale: #E7D6D4;
  --sv-title: #F4E3D7;
  --sv-title-pink: #E79F8F;
}

html,
body {
  background-color: #111222 !important;
}

/* Every main Coppermine content panel uses exactly the same narrow outside frame. */
#index .maintable,
#index .sv-section-table,
#index .sv-last-viewed {
  width: 100% !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  border: 1px solid var(--sv-frame) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, var(--sv-content-bg-2) 0%, var(--sv-content-bg) 100%) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Nested layout tables must not create a second outside border. */
#index .maintable .maintable,
#index .sv-section-table .maintable {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Title band and content share the same outer frame and meet without a gap. */
.sv-section-heading-cell {
  height: 126px !important;
  min-height: 126px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-color: var(--sv-section-bg) !important;
  background-image: url('./imgs/section_title_bg_sv2.png?v=20260911-1') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sv-frame) !important;
  box-shadow: none !important;
}

.sv-section-heading-inner {
  height: 126px !important;
  min-height: 126px !important;
}

/* Keep the transition into the content dark and subtle rather than blue/grey. */
.sv-section-heading-inner::after {
  height: 38px !important;
  background: linear-gradient(
    180deg,
    rgba(11,4,12,0) 0%,
    rgba(11,4,12,.36) 46%,
    rgba(11,4,12,.82) 78%,
    var(--sv-content-bg) 100%
  ) !important;
}

/* The first thumbnails/content should not sit directly against the headline edge. */
.sv-section-first-content-row .thumbnails {
  padding-top: 28px !important;
}

/* Keep a little breathing room for nested album layouts too. */
.sv-section-first-content-row > td:not(.thumbnails) .thumbnails {
  padding-top: 28px !important;
}

/* One restrained grid colour throughout the content. The table itself supplies
   the outside frame, so cells only draw internal right/bottom separators. */
#index .sv-section-table td.thumbnails {
  background: var(--sv-cell-bg) !important;
  border: 0 !important;
  border-right: 1px solid var(--sv-grid) !important;
  border-bottom: 1px solid var(--sv-grid) !important;
  box-shadow: none !important;
}

#index .sv-section-table tr > td.thumbnails:last-child {
  border-right: 0 !important;
}

#index .catrow,
#index .catrow_noalb,
#index .tableb,
#index .tableb_alternate {
  background-color: var(--sv-cell-bg) !important;
  color: var(--sv-pale) !important;
}

/* Tune the bright UI chips away from candy pink toward the title-art palette. */
.thumb_title_views {
  background: var(--sv-pink) !important;
  color: #17111F !important;
}
.thumb_title_views::after {
  border-bottom-color: var(--sv-pink) !important;
}
.thumb_caption_ctime,
.thumb_dimensions,
.thumb_resolution,
.thumb_caption {
  background: var(--sv-pale) !important;
  color: #17111F !important;
}
.thumb_title_views:before,
.thumb_caption_ctime:before {
  color: #6C3647 !important;
}

.thumb_title_title,
.thumb_title,
.alblink,
.alblink a,
.statlink,
.statlink2,
.statlink h2 {
  color: var(--sv-pale) !important;
}

.alblink:before,
.catlink:before {
  color: var(--sv-pink) !important;
}

.album_stat,
.comment_date {
  color: var(--sv-pink-soft) !important;
}

/* Thumbnail image frame follows the same wine/plum family as the panel frame. */
.image,
#index .catrow .image,
#index .catrow_noalb .image {
  border-color: var(--sv-pink-soft) !important;
  border-image: none !important;
  background: #251827 !important;
  box-shadow: 0 7px 0 rgba(0,0,2,.32) !important;
}

/* Maintain breathing room on narrow screens, but reduce it slightly. */
@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  .sv-section-first-content-row .thumbnails,
  .sv-section-first-content-row > td:not(.thumbnails) .thumbnails {
    padding-top: 20px !important;
  }

  #index .maintable,
  #index .sv-section-table,
  #index .sv-last-viewed {
    max-width: 100% !important;
  }
}


/* ========================================================================== 
   SELENAVAULT 2026 — FIRST THUMBNAIL ROW SPACING FIX
   A previous high-specificity :nth-child(2) rule forced padding-top:0 on the
   first content row. These selectors deliberately outrank that rule.
   KEEP THIS BLOCK LAST.
   ========================================================================== */

/* Direct thumbnail cells in the first row beneath a section headline. */
#index .sv-section-table > tbody > tr:nth-child(2) > td.thumbnails,
#index .sv-section-table > tr:nth-child(2) > td.thumbnails,
#index .sv-section-table > tbody > tr.sv-section-first-content-row > td.thumbnails,
#index .sv-section-table > tr.sv-section-first-content-row > td.thumbnails {
  padding-top: 30px !important;
}

/* Coppermine sometimes wraps the actual thumbnail cells inside another table. */
#index .sv-section-table > tbody > tr:nth-child(2) > td:not(.thumbnails) td.thumbnails,
#index .sv-section-table > tr:nth-child(2) > td:not(.thumbnails) td.thumbnails,
#index .sv-section-table > tbody > tr.sv-section-first-content-row > td:not(.thumbnails) td.thumbnails,
#index .sv-section-table > tr.sv-section-first-content-row > td:not(.thumbnails) td.thumbnails {
  padding-top: 30px !important;
}

/* Keep the gap inside the framed content rather than creating a gap between
   the title panel and its outer frame. */
#index .sv-section-table > tbody > tr:nth-child(2),
#index .sv-section-table > tr:nth-child(2),
#index .sv-section-first-content-row {
  margin-top: 0 !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  #index .sv-section-table > tbody > tr:nth-child(2) > td.thumbnails,
  #index .sv-section-table > tr:nth-child(2) > td.thumbnails,
  #index .sv-section-table > tbody > tr.sv-section-first-content-row > td.thumbnails,
  #index .sv-section-table > tr.sv-section-first-content-row > td.thumbnails,
  #index .sv-section-table > tbody > tr:nth-child(2) > td:not(.thumbnails) td.thumbnails,
  #index .sv-section-table > tr:nth-child(2) > td:not(.thumbnails) td.thumbnails,
  #index .sv-section-table > tbody > tr.sv-section-first-content-row > td:not(.thumbnails) td.thumbnails,
  #index .sv-section-table > tr.sv-section-first-content-row > td:not(.thumbnails) td.thumbnails {
    padding-top: 20px !important;
  }
}


/* ========================================================================== 
   SELENAVAULT 2026 — CATEGORY OVERVIEW MATCHES THE REST OF THE THEME
   Same narrow outside frame, dark title-art palette and restrained separators.
   KEEP THIS BLOCK LAST.
   ========================================================================== */

#index .sv-category-table {
  width: 100% !important;
  max-width: 1220px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  border: 1px solid var(--sv-frame) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--sv-content-bg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  table-layout: fixed !important;
}

/* Header takes its atmosphere from the same artwork used by the section titles. */
#index .sv-category-table > tbody > tr:first-child,
#index .sv-category-table > tr:first-child {
  background-color: #010002 !important;
  background-image:
    linear-gradient(90deg, rgba(1,0,2,.42), rgba(1,0,2,.16) 48%, rgba(1,0,2,.48)),
    url('./imgs/section_title_bg_sv2.png?v=20260911-1') !important;
  background-repeat: no-repeat !important;
  background-position: center 48% !important;
  background-size: cover !important;
}

#index .sv-category-table .sv-category-heading,
#index .sv-category-table > tbody > tr:first-child > .tableh1,
#index .sv-category-table > tr:first-child > .tableh1 {
  height: 58px !important;
  padding: 0 18px !important;
  vertical-align: middle !important;
  background: rgba(6,2,7,.50) !important;
  color: var(--sv-title) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sv-frame) !important;
  box-shadow: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 58px !important;
  letter-spacing: .35px !important;
  text-transform: uppercase !important;
}

#index .sv-category-table .sv-category-heading:first-child {
  text-align: left !important;
  padding-left: 28px !important;
  border-left: 4px solid rgba(79,128,138,.88) !important;
}

#index .sv-category-table .sv-category-heading:not(:first-child) {
  text-align: center !important;
  border-left: 1px solid rgba(90,29,55,.72) !important;
}

/* Category rows: almost black/plum, subtle variation, same separator family. */
#index .sv-category-table .catrow,
#index .sv-category-table .catrow_noalb {
  min-height: 76px !important;
  padding: 19px 16px !important;
  vertical-align: middle !important;
  background: #0C0710 !important;
  color: var(--sv-pale) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(90,29,55,.80) !important;
  box-shadow: none !important;
}

#index .sv-category-table tr:nth-child(odd) > .catrow,
#index .sv-category-table tr:nth-child(odd) > .catrow_noalb {
  background: #100812 !important;
}

#index .sv-category-table .catrow.h3 {
  text-align: center !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sv-pink-soft) !important;
  border-left: 1px solid rgba(90,29,55,.62) !important;
}

/* Nested table in the category-name cell must stay invisible. */
#index .sv-category-table .catrow table,
#index .sv-category-table .catrow_noalb table,
#index .sv-category-table .catrow table td,
#index .sv-category-table .catrow_noalb table td {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#index .sv-category-table .catlink {
  display: inline-block !important;
  vertical-align: middle !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

#index .sv-category-table .catlink a,
#index .sv-category-table .catlink a:visited {
  color: var(--sv-title) !important;
  -webkit-text-fill-color: var(--sv-title) !important;
  background: none !important;
  box-shadow: none !important;
}

#index .sv-category-table .catlink a:hover,
#index .sv-category-table .catlink a:focus {
  color: var(--sv-title-pink) !important;
  -webkit-text-fill-color: var(--sv-title-pink) !important;
}

#index .sv-category-table .catlink:before {
  margin-right: 10px !important;
  color: var(--sv-pink) !important;
  font-size: 12px !important;
}

/* Album preview row below a category is treated as part of the same panel. */
#index .sv-category-table .tableb,
#index .sv-category-table .tableb_alternate {
  background: #18121E !important;
  color: var(--sv-pale) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(90,29,55,.62) !important;
}

/* Statistics/footer row no longer returns to the older bright gradient style. */
#index .sv-category-table .tableh1-stat {
  margin: 0 !important;
  padding: 14px 18px !important;
  background: linear-gradient(90deg, #201723, #2C1C2A 50%, #201723) !important;
  color: var(--sv-pink-soft) !important;
  border: 0 !important;
  border-top: 1px solid var(--sv-frame) !important;
  box-shadow: none !important;
}

#index .sv-category-table .statlink2,
#index .sv-category-table .statlink2 a,
#index .sv-category-table .statlink2 strong {
  color: var(--sv-pink-soft) !important;
}

/* Remove duplicate outer edges on the last row; the table provides the frame. */
#index .sv-category-table > tbody > tr:last-child > td,
#index .sv-category-table > tr:last-child > td {
  border-bottom: 0 !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  #index .sv-category-table {
    max-width: 100% !important;
    margin-top: 16px !important;
  }

  #index .sv-category-table .sv-category-heading,
  #index .sv-category-table > tbody > tr:first-child > .tableh1,
  #index .sv-category-table > tr:first-child > .tableh1 {
    height: 48px !important;
    padding: 0 8px !important;
    line-height: 48px !important;
    font-size: 11px !important;
  }

  #index .sv-category-table .sv-category-heading:first-child {
    padding-left: 14px !important;
  }

  #index .sv-category-table .catrow,
  #index .sv-category-table .catrow_noalb {
    padding: 14px 10px !important;
  }

  #index .sv-category-table .catlink {
    font-size: 11px !important;
  }
}


/* ========================================================================== 
   SELENAVAULT 2026 — CATEGORY HARD FIX (theme.php classes)
   The previous version relied on text detection. This version styles the
   category markup directly, so it cannot miss the CATEGORY / ALBUMS / FILES
   table. KEEP THIS BLOCK LAST.
   ========================================================================== */

/* Parent table: modern browsers get the frame immediately; JS adds the same
   sv-category-table class as a fallback/normalizer. */
#index table:has(> tbody > tr.sv-category-head-row),
#index table:has(> tr.sv-category-head-row),
#index .sv-category-table {
  width: 100% !important;
  max-width: 1220px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  border: 1px solid #6C3647 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #151120 !important;
  box-shadow: none !important;
  table-layout: fixed !important;
}

/* Dark title-art header instead of the older bright magenta/teal strip. */
#index tr.sv-category-head-row {
  background: #010002 url('./imgs/section_title_bg_sv2.png?v=20260911-1') center 46% / cover no-repeat !important;
}

#index tr.sv-category-head-row > td.sv-category-heading {
  height: 58px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  vertical-align: middle !important;
  background: linear-gradient(180deg, rgba(1,0,2,.28), rgba(11,4,12,.72)) !important;
  color: #F4E3D7 !important;
  border: 0 !important;
  border-bottom: 1px solid #6C3647 !important;
  box-shadow: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 58px !important;
  letter-spacing: .25px !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: #F4E3D7 !important;
}

#index tr.sv-category-head-row > td.sv-category-heading-name {
  text-align: left !important;
  padding-left: 28px !important;
}

#index tr.sv-category-head-row > td.sv-category-heading-count {
  text-align: center !important;
  border-left: 1px solid rgba(90,29,55,.82) !important;
}

/* Category rows match the nearly-black/plum thumbnail panels. */
#index tr.sv-category-data-row > td.catrow,
#index tr.sv-category-data-row > td.catrow_noalb {
  min-height: 74px !important;
  padding: 18px 16px !important;
  vertical-align: middle !important;
  background: #17111F !important;
  color: #E7D6D4 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(90,29,55,.78) !important;
  box-shadow: none !important;
}

#index tr.sv-category-data-row:nth-of-type(even) > td.catrow,
#index tr.sv-category-data-row:nth-of-type(even) > td.catrow_noalb {
  background: #0E0610 !important;
}

#index tr.sv-category-data-row > td.sv-category-count {
  text-align: center !important;
  color: #D39A9E !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-left: 1px solid rgba(90,29,55,.72) !important;
}

/* The little nested category-name table must be invisible. */
#index tr.sv-category-data-row td.sv-category-name table,
#index tr.sv-category-data-row td.sv-category-name table td {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#index tr.sv-category-data-row .catlink,
#index tr.sv-category-data-row .catlink a,
#index tr.sv-category-data-row .catlink a:visited {
  color: #F4E3D7 !important;
  -webkit-text-fill-color: #F4E3D7 !important;
  background: none !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

#index tr.sv-category-data-row .catlink:before {
  color: #B9646C !important;
}

#index tr.sv-category-data-row .catlink a:hover,
#index tr.sv-category-data-row .catlink a:focus {
  color: #E79F8F !important;
  -webkit-text-fill-color: #E79F8F !important;
}

/* Hidden/expanded album line stays in the same panel palette. */
#index tr.sv-category-albums-row > td.sv-category-albums {
  padding: 8px 16px !important;
  background: #151120 !important;
  color: #E7D6D4 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(90,29,55,.64) !important;
}

#index tr.sv-category-footer-row > td.sv-category-footer {
  margin: 0 !important;
  padding: 13px 18px !important;
  background: linear-gradient(90deg, #151120, #251827 50%, #151120) !important;
  color: #D39A9E !important;
  border: 0 !important;
  border-top: 1px solid #6C3647 !important;
  box-shadow: none !important;
}

#index tr.sv-category-footer-row .statlink2,
#index tr.sv-category-footer-row .statlink2 a,
#index tr.sv-category-footer-row .statlink2 strong {
  color: #D39A9E !important;
  -webkit-text-fill-color: #D39A9E !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  #index table:has(tr.sv-category-head-row),
  #index .sv-category-table {
    max-width: 100% !important;
    margin-top: 16px !important;
  }

  #index tr.sv-category-head-row > td.sv-category-heading {
    height: 48px !important;
    padding: 0 8px !important;
    line-height: 48px !important;
    font-size: 11px !important;
  }

  #index tr.sv-category-head-row > td.sv-category-heading-name {
    padding-left: 14px !important;
  }

  #index tr.sv-category-data-row > td.catrow,
  #index tr.sv-category-data-row > td.catrow_noalb {
    padding: 14px 10px !important;
  }
}


/* SELENAVAULT CATEGORY AUTODETECT v3 — fallback stylesheet rules */
#index table.sv-category-table-live{width:100%!important;max-width:1220px!important;margin:22px auto 0!important;padding:0!important;border:1px solid #6C3647!important;border-collapse:separate!important;border-spacing:0!important;table-layout:fixed!important;background:#151120!important;box-shadow:none!important;overflow:hidden!important}
#index table.sv-category-table-live tr.sv-category-head-live>td{height:58px!important;padding:0 18px!important;vertical-align:middle!important;background:linear-gradient(180deg,rgba(0,0,2,.35),rgba(11,4,12,.86)),url('./imgs/section_title_bg_sv2.png?v=20260911-1') center 48%/cover no-repeat!important;color:#F4E3D7!important;-webkit-text-fill-color:#F4E3D7!important;border:0!important;border-bottom:1px solid #6C3647!important;box-shadow:none!important;font-family:'DM Sans',sans-serif!important;font-size:15px!important;font-weight:800!important;line-height:58px!important;text-transform:uppercase!important}
#index table.sv-category-table-live tr.sv-category-head-live>td+td{border-left:1px solid rgba(90,29,55,.78)!important;text-align:center!important}
#index table.sv-category-table-live tr.sv-category-data-live>td.catrow,#index table.sv-category-table-live tr.sv-category-data-live>td.catrow_noalb{padding:18px 16px!important;background:#0b060d!important;color:#E7D6D4!important;border:0!important;border-bottom:1px solid rgba(90,29,55,.74)!important;box-shadow:none!important}
#index table.sv-category-table-live tr.sv-category-data-live>td+td{border-left:1px solid rgba(90,29,55,.66)!important}
#index table.sv-category-table-live td.sv-category-count-live{text-align:center!important;color:#D39A9E!important}

/* ========================================================================== 
   SELENAVAULT 2026 — FINAL SITE SKIN
   Palette sampled from imgs/header.jpg. Desktop uses header.jpg; mobile uses
   mobil.png. Keep this section last so it wins over the legacy base theme.
   ========================================================================== */
:root {
  --sv-midnight: #111222;
  --sv-ink: #1A1526;
  --sv-ink-2: #211B2B;
  --sv-plum: #372642;
  --sv-wine: #6C3647;
  --sv-rose: #9B5255;
  --sv-rose-2: #B9646C;
  --sv-dusty: #C47778;
  --sv-blush: #E79F8F;
  --sv-soft: #E8B6AC;
  --sv-cream: #F4E3D7;
  --sv-text: #E7D6D4;
  --sv-slate: #5E607C;
  --sv-lavender: #85849A;
  --sv-border: rgba(185,100,108,.52);
  --sv-border-soft: rgba(231,159,143,.22);
}

html,
body {
  background: var(--sv-midnight) !important;
  color: var(--sv-text) !important;
}

body {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(155,82,85,.18), transparent 26%),
    radial-gradient(circle at 88% 28%, rgba(108,54,71,.22), transparent 30%),
    linear-gradient(180deg, #111222 0%, #171423 38%, #211626 68%, #111222 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  opacity: .10 !important;
  background-image:
    radial-gradient(circle at 22% 36%, rgba(231,159,143,.16) 0 1px, transparent 1.4px),
    radial-gradient(circle at 71% 63%, rgba(244,227,215,.12) 0 1px, transparent 1.4px) !important;
  background-size: 74px 74px, 103px 103px !important;
}

/* Header switching: exact file requested for desktop. */
.sv-header-desktop,
.sv-header-mobile {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: none !important;
  overflow: hidden !important;
}

.sv-header-desktop {
  display: block !important;
  max-width: 2000px !important;
}

.sv-header-desktop .header-art {
  display: block !important;
  width: 100% !important;
  max-width: 2000px !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
}

.sv-header-mobile {
  display: none !important;
}

.sv-header-mobile .header-art-mobile {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
}

/* Main content overlaps only the dark lower part of the desktop artwork. */
.blocks {
  width: min(1220px, 94vw) !important;
  max-width: 1220px !important;
  margin: clamp(-260px, -14vw, -110px) auto 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Welcome card mirrors the rose/plum artwork and remains square-edged. */
.welcome-message {
  background:
    linear-gradient(112deg, rgba(155,82,85,.16), transparent 43%),
    rgba(26,21,38,.97) !important;
  color: var(--sv-text) !important;
  border: 1px solid var(--sv-border) !important;
  border-left: 4px solid var(--sv-rose) !important;
  border-right: 4px solid var(--sv-dusty) !important;
  box-shadow: 0 20px 46px rgba(5,6,18,.38) !important;
}

.welcome-content {
  background:
    linear-gradient(135deg, rgba(231,159,143,.06), transparent 48%),
    rgba(33,27,43,.96) !important;
  border-left-color: rgba(231,159,143,.20) !important;
}

.welcome-text,
.site-footer,
.footer-block {
  color: var(--sv-text) !important;
}

.welcome-text b,
.welcome-text strong,
.site-footer b,
.site-footer strong {
  color: var(--sv-soft) !important;
}

.welcome-text i,
.welcome-text em {
  color: var(--sv-blush) !important;
}

.sociallinks {
  border-color: rgba(231,159,143,.48) !important;
}
.sociallinks a {
  color: var(--sv-soft) !important;
}
.sociallinks a:hover,
.sociallinks a:focus {
  color: var(--sv-midnight) !important;
  background: var(--sv-blush) !important;
}

/* Main Coppermine navigation */
.cpg-nav {
  margin-top: 16px !important;
  padding: 16px 14px !important;
  background: linear-gradient(90deg, #372642 0%, #6C3647 34%, #9B5255 58%, #6C3647 78%, #372642 100%) !important;
  border: 1px solid rgba(231,159,143,.42) !important;
  border-bottom: 4px solid var(--sv-midnight) !important;
  box-shadow: 0 10px 28px rgba(4,5,15,.22) !important;
}

.cpg-nav a,
.cpg-nav a:visited {
  color: var(--sv-cream) !important;
  -webkit-text-fill-color: var(--sv-cream) !important;
  text-shadow: none !important;
}
.cpg-nav a:hover,
.cpg-nav a:focus {
  color: var(--sv-ink) !important;
  -webkit-text-fill-color: var(--sv-ink) !important;
  background: var(--sv-soft) !important;
  box-shadow: 0 3px 0 var(--sv-dusty) !important;
}

a,
a:visited { color: var(--sv-blush) !important; }
a:hover,
a:focus { color: var(--sv-cream) !important; }
strong,
b { color: var(--sv-soft) !important; }
em,
i { color: var(--sv-dusty) !important; }
u { color: var(--sv-blush) !important; background: transparent !important; }

::selection { background: var(--sv-rose) !important; color: var(--sv-cream) !important; }
::-moz-selection { background: var(--sv-rose) !important; color: var(--sv-cream) !important; }
::-webkit-scrollbar { background: var(--sv-midnight) !important; border-color: var(--sv-midnight) !important; }
::-webkit-scrollbar-thumb { background: var(--sv-rose) !important; border-color: var(--sv-midnight) !important; }

/* Unified panels, categories and thumbnail grids */
#index .maintable,
#index .sv-section-table,
#index .sv-last-viewed,
#index .sv-category-table,
#index table.sv-category-table-live {
  border-color: var(--sv-wine) !important;
  background: linear-gradient(180deg, #211827 0%, #17111F 100%) !important;
  box-shadow: 0 12px 34px rgba(4,5,15,.16) !important;
}

.tableb,
.tableb_alternate,
#index .catrow,
#index .catrow_noalb,
#index .sv-section-table td.thumbnails {
  background: #1D1725 !important;
  color: var(--sv-text) !important;
}

.tableh1,
.tableh1-stat,
.stats {
  background: linear-gradient(90deg, #5A3041 0%, #9B5255 62%, #C47778 100%) !important;
  color: var(--sv-cream) !important;
  border-color: var(--sv-dusty) !important;
}

.tableh2,
.tableh2_compact {
  background: #272033 !important;
  color: var(--sv-text) !important;
}

.tableh3 {
  background: var(--sv-plum) !important;
  color: var(--sv-cream) !important;
}

.sv-section-heading-cell,
#index tr.sv-category-head-row,
#index table.sv-category-table-live tr.sv-category-head-live > td {
  background-color: #17111F !important;
  border-color: var(--sv-wine) !important;
}

.sv-section-title-text,
#index tr.sv-category-head-row > td.sv-category-heading,
#index table.sv-category-table-live tr.sv-category-head-live > td {
  color: var(--sv-cream) !important;
  -webkit-text-fill-color: var(--sv-cream) !important;
  text-shadow: 0 0 10px rgba(231,159,143,.24), 0 1px 1px #111222 !important;
}

#index tr.sv-category-data-row > td.catrow,
#index tr.sv-category-data-row > td.catrow_noalb,
#index table.sv-category-table-live tr.sv-category-data-live > td.catrow,
#index table.sv-category-table-live tr.sv-category-data-live > td.catrow_noalb {
  background: #1D1725 !important;
  color: var(--sv-text) !important;
  border-color: rgba(108,54,71,.72) !important;
}

#index tr.sv-category-data-row:nth-of-type(even) > td.catrow,
#index tr.sv-category-data-row:nth-of-type(even) > td.catrow_noalb,
#index table.sv-category-table-live tr.sv-category-data-live:nth-child(even) > td.catrow,
#index table.sv-category-table-live tr.sv-category-data-live:nth-child(even) > td.catrow_noalb {
  background: #211927 !important;
}

#index .catlink,
#index .catlink a,
#index .catlink a:visited,
.alblink,
.alblink a,
.statlink,
.statlink2,
.statlink h2 {
  color: var(--sv-cream) !important;
  -webkit-text-fill-color: var(--sv-cream) !important;
}

.catlink:before,
.alblink:before {
  color: var(--sv-rose-2) !important;
}

.album_stat,
.comment_date,
#index .sv-category-count,
#index td.sv-category-count-live {
  color: var(--sv-dusty) !important;
}

.image,
.thumbnails {
  background: #1D1725 !important;
  border-color: var(--sv-wine) !important;
  border-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(196,119,120,.28), 0 7px 18px rgba(5,6,18,.14) !important;
}

/* Photo tint is subtle; original color returns on hover. */
.thumbnails > a.albums::after,
.thumbnails table td > a:first-child::after {
  background: linear-gradient(135deg, rgba(155,82,85,.17), rgba(231,159,143,.10) 52%, rgba(55,38,66,.11)) !important;
}
.thumbnails > a.albums img,
.thumbnails table td > a:first-child img {
  filter: saturate(.91) contrast(.99) brightness(.98) !important;
}
.thumbnails > a.albums:hover img,
.thumbnails > a.albums:focus-visible img,
.thumbnails table td > a:first-child:hover img,
.thumbnails table td > a:first-child:focus-visible img {
  filter: none !important;
}

.thumb_title_views { background: var(--sv-rose-2) !important; color: var(--sv-midnight) !important; }
.thumb_title_views::after { border-bottom-color: var(--sv-rose-2) !important; }
.thumb_caption_ctime { background: var(--sv-dusty) !important; color: var(--sv-midnight) !important; }
.thumb_dimensions { background: var(--sv-soft) !important; color: var(--sv-midnight) !important; }
.thumb_resolution { background: #C9A9A4 !important; color: var(--sv-midnight) !important; }
.thumb_caption { background: var(--sv-cream) !important; color: var(--sv-midnight) !important; }

/* Forms/admin UI */
.textinput,
.listbox,
.listbox_lang,
input,
textarea,
select {
  background: #F2E5DE !important;
  color: var(--sv-ink) !important;
  border-color: var(--sv-dusty) !important;
}
.button,
.buttonlist ul li a,
input[type='reset'],
input[type='submit'],
input[type='button'] {
  background: var(--sv-rose) !important;
  color: var(--sv-cream) !important;
}
.button:hover,
.buttonlist ul li a:hover,
input[type='submit']:hover,
input[type='button']:hover {
  background: var(--sv-blush) !important;
  color: var(--sv-midnight) !important;
}

/* Footer */
.footer-block {
  width: 100% !important;
  margin: 30px auto 0 !important;
  padding: 22px 0 30px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.site-footer {
  padding: 22px 24px !important;
  background: rgba(26,21,38,.90) !important;
  border: 1px solid rgba(108,54,71,.72) !important;
  border-top: 4px solid var(--sv-rose) !important;
}
.site-footer a { color: var(--sv-blush) !important; }
.site-footer a:hover { color: var(--sv-cream) !important; }

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  .sv-header-desktop { display: none !important; }
  .sv-header-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;
  }

  .blocks {
    width: min(94vw, 1220px) !important;
    margin: -24px auto 0 !important;
  }

  .welcome-message {
    grid-template-columns: 1fr !important;
  }

  .welcome-img,
  .welcome-img img {
    min-height: 0 !important;
    aspect-ratio: 580 / 265 !important;
  }

  .cpg-nav {
    width: 100% !important;
    margin-top: 14px !important;
  }

  #index .maintable,
  #index .sv-section-table,
  #index .sv-last-viewed,
  #index .sv-category-table,
  #index table.sv-category-table-live {
    max-width: 100% !important;
  }
}

@media only screen and (max-width: 481px), only screen and (max-device-width: 481px) {
  .blocks {
    width: 96vw !important;
    margin-top: -12px !important;
  }

  .welcome-content {
    padding: 20px 18px !important;
  }

  .cpg-nav {
    padding: 13px 8px !important;
    background: linear-gradient(90deg, #372642, #6C3647, #9B5255) !important;
  }

  .cpg-nav a {
    padding: 7px 6px !important;
    font-size: 9pt !important;
  }

  .site-footer {
    padding: 18px 16px !important;
  }
}


/* ========================================================================== 
   SELENAVAULT 2026-09-11 — FINAL POLISH
   - Page background now starts at #0f1022
   - Blank ad gap removed in template.html
   - Unified section-title artwork applied everywhere
   - New section_title_bg_sv2.png?v=20260911-1 matched to header.jpg
   ========================================================================== */

html {
  background: #0f1022 !important;
}

body {
  background-color: #0f1022 !important;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(221, 150, 148, .12) 0, rgba(221, 150, 148, 0) 24%),
    radial-gradient(circle at 86% 18%, rgba(169, 94, 112, .10) 0, rgba(169, 94, 112, 0) 22%),
    linear-gradient(
      180deg,
      #0f1022 0,
      #0f1022 calc(var(--sv-header-height) + 60px),
      #14152a calc(var(--sv-header-height) + 280px),
      #191427 calc(var(--sv-header-height) + 720px),
      #130f20 calc(var(--sv-header-height) + 1220px),
      #0f1022 calc(var(--sv-header-height) + 1880px)
    ) !important;
  background-attachment: scroll !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: .10 !important;
  background-image:
    repeating-linear-gradient(18deg, transparent 0 26px, rgba(231, 159, 143, .05) 26px 27px),
    repeating-linear-gradient(-14deg, transparent 0 38px, rgba(15, 16, 34, .16) 38px 39px) !important;
}

/* Remove any stray vertical breathing-room that can reappear from legacy table
   styles on the index page after the ad block has been removed. */
#index {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#index > .maintable:first-of-type,
#index > table:first-of-type {
  margin-top: 12px !important;
}

/* Keep the menu and first gallery section visually connected. */
#admin_menu, .admin_menu, .buttonlist, .menuheader {
  margin-bottom: 0 !important;
}

/* Fallback/future-proof title styling for section bars. */
#index .tableh1,
#index .tableh1-stat,
.sv-section-heading-cell,
#index tr.sv-category-head-row,
#index table.sv-category-table-live tr.sv-category-head-live > td {
  background-color: #0f1022 !important;
}

.sv-section-heading-cell {
  background-image: url('./imgs/section_title_bg_sv2.png?v=20260911-1') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-bottom: 1px solid #6C3647 !important;
}

.sv-section-heading-inner {
  background: linear-gradient(180deg, rgba(8, 8, 18, .12), rgba(15, 16, 34, .26)) !important;
}

.sv-section-heading-inner::after {
  background: linear-gradient(180deg, rgba(15,16,34,0) 0%, rgba(15,16,34,.36) 48%, #1f192c 100%) !important;
}

#index .tableh1,
#index .tableh1-stat {
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(15,16,34,.34)),
    url('./imgs/section_title_bg_sv2.png?v=20260911-1') center 48% / cover no-repeat !important;
  color: #F4E3D7 !important;
  -webkit-text-fill-color: #F4E3D7 !important;
  border-bottom: 1px solid #6C3647 !important;
}

#index tr.sv-category-head-row {
  background: #0f1022 url('./imgs/section_title_bg_sv2.png?v=20260911-1') center 48% / cover no-repeat !important;
}

#index tr.sv-category-head-row > td.sv-category-heading,
#index table.sv-category-table-live tr.sv-category-head-live > td {
  background:
    linear-gradient(180deg, rgba(8,8,18,.18), rgba(15,16,34,.58)),
    url('./imgs/section_title_bg_sv2.png?v=20260911-1') center 48% / cover no-repeat !important;
  border-bottom: 1px solid #6C3647 !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  body {
    background-image:
      linear-gradient(
        180deg,
        #0f1022 0,
        #0f1022 calc(var(--sv-header-height) + 30px),
        #151428 calc(var(--sv-header-height) + 240px),
        #120f21 calc(var(--sv-header-height) + 980px),
        #0f1022 calc(var(--sv-header-height) + 1560px)
      ) !important;
  }
}

/* ========================================================================== 
   SELENAVAULT 2026 — FINAL RECODING PASS
   Requested fixes:
   1) Page/background must begin with #0f1022
   2) Remove the large empty gap before the first section
   3) Use the redesigned section_title_bg_sv2.png?v=20260911-1 consistently
   4) Tighten section-title spacing so it fits the new design better
   Keep this block LAST.
   ========================================================================== */

:root {
  --sv-page-start: #0f1022;
  --sv-page-mid: #17152a;
  --sv-page-deep: #120f22;
  --sv-page-end: #0c0c19;
  --sv-header-height: min(57.25vw, 1145px);
  --sv-section-bg: #0f1022;
  --sv-content-bg: #171426;
  --sv-frame: rgba(196,119,120,.46);
}

html {
  background: var(--sv-page-start) !important;
}

body {
  background-color: var(--sv-page-start) !important;
  background-image: linear-gradient(
    180deg,
    var(--sv-page-start) 0,
    var(--sv-page-start) var(--sv-header-height),
    #15142a calc(var(--sv-header-height) + 160px),
    var(--sv-page-mid) calc(var(--sv-header-height) + 520px),
    var(--sv-page-deep) calc(var(--sv-header-height) + 980px),
    var(--sv-page-end) calc(var(--sv-header-height) + 1600px)
  ) !important;
}

/* The large blank area seen under the admin menu was caused by the old ad
   block in template.html. Keep the content stack tight here as well. */
#index {
  margin-top: 14px !important;
  padding-top: 0 !important;
}

#index > br,
#index > center {
  display: none !important;
}

/* Keep the gallery close to the menu stack without a huge dead zone. */
#admin_menu,
#message {
  margin-bottom: 10px !important;
}

#admin_menu + table.maintable,
#message + table.maintable,
#index > table.maintable:first-of-type {
  margin-top: 14px !important;
}

/* Shared section title artwork: redesigned cosmic artwork with a readable dark
   center and brighter edges. */
.sv-section-heading-cell {
  height: 104px !important;
  min-height: 104px !important;
  background-color: var(--sv-section-bg) !important;
  background-image: url('./imgs/section_title_bg_sv2.png?v=20260911-1') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.sv-section-heading-inner {
  height: 104px !important;
  padding: 10px 20px 8px !important;
}

.sv-section-title-text {
  font-size: clamp(16px, 1.45vw, 21px) !important;
  line-height: 1.05 !important;
  letter-spacing: .45px !important;
  text-shadow: 0 0 10px rgba(231,159,143,.22), 0 1px 1px #0f1022 !important;
}

.sv-section-title-underline {
  width: clamp(170px, 21vw, 250px) !important;
  margin-top: 6px !important;
}

/* Category headline uses the same new title artwork so everything matches. */
#index tr.sv-category-head-row {
  background: #0f1022 url('./imgs/section_title_bg_sv2.png?v=20260911-1') center center / cover no-repeat !important;
}

#index tr.sv-category-head-row > td.sv-category-heading {
  background: linear-gradient(180deg, rgba(4,4,10,.24), rgba(8,8,18,.72)) !important;
  border-bottom: 1px solid #6c4958 !important;
}

/* Slightly darker content cards so the new #0f1022 page background melts in
   more naturally. */
#index .maintable,
#index .sv-section-table,
#index table:has(> tbody > tr.sv-category-head-row),
#index table:has(> tr.sv-category-head-row),
#index .sv-category-table {
  background: #171426 !important;
  border-color: rgba(196,119,120,.46) !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  #index {
    margin-top: 10px !important;
  }

  .sv-section-heading-cell,
  .sv-section-heading-inner {
    height: 88px !important;
    min-height: 88px !important;
  }
}


/* ========================================================================== 
   SELENAVAULT 2026 — CATEGORY HEADER VISIBILITY FIX
   The previous CSS placed the artwork on the TR while opaque TD backgrounds
   covered it. Apply the artwork directly to the header cells so it is visible.
   Keep this block LAST.
   ========================================================================== */

#index tr.sv-category-head-row {
  background: transparent !important;
}

#index tr.sv-category-head-row > td.sv-category-heading {
  background:
    linear-gradient(180deg, rgba(5, 6, 14, .38), rgba(7, 8, 18, .70)),
    url('./imgs/section_title_bg_sv2.png?v=20260911-1') center center / cover no-repeat !important;
  background-color: #0f1022 !important;
  color: #F4E3D7 !important;
  -webkit-text-fill-color: #F4E3D7 !important;
  border-bottom: 1px solid #6c4958 !important;
}

#index tr.sv-category-head-row > td.sv-category-heading-name {
  background-position: left center !important;
}

#index tr.sv-category-head-row > td.sv-category-heading-count {
  background-position: center center !important;
}

/* Ensure the three visible heading labels all read consistently. */
#index tr.sv-category-head-row > td.sv-category-heading span,
#index tr.sv-category-head-row > td.sv-category-heading,
#index tr.sv-category-head-row > td.sv-category-heading a {
  color: #F4E3D7 !important;
  -webkit-text-fill-color: #F4E3D7 !important;
  text-shadow: 0 1px 1px #0f1022, 0 0 10px rgba(231,159,143,.12) !important;
}

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {
  #index tr.sv-category-head-row > td.sv-category-heading {
    background:
      linear-gradient(180deg, rgba(5, 6, 14, .34), rgba(7, 8, 18, .66)),
      url('./imgs/section_title_bg_sv2.png?v=20260911-1') center center / cover no-repeat !important;
  }
}

/* SELENAVAULT — continuous category title header fallback */
#index tr.sv-category-head-row > td.sv-category-heading-full {
  padding:0 !important;
  height:68px !important;
  background:
    linear-gradient(90deg,rgba(15,16,34,.22),rgba(15,16,34,.52) 48%,rgba(15,16,34,.24)),
    url('./imgs/section_title_bg_sv2.png?v=20260911-1') center center/cover no-repeat !important;
  background-color:#0f1022 !important;
}
#index .sv-category-header-grid {
  display:grid !important;
  grid-template-columns:minmax(0,8fr) minmax(72px,1fr) minmax(72px,1fr) !important;
  align-items:center !important;
  width:100% !important;
  height:68px !important;
}
#index .sv-category-header-name { padding-left:28px !important; text-align:left !important; }
#index .sv-category-header-count {
  height:68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-left:1px solid rgba(196,119,120,.28) !important;
}

/* SELENAVAULT — CATEGORY COLUMN GEOMETRY FIX v3 */
#index .sv-category-table,
#index table:has(> tbody > tr.sv-category-head-row),
#index table:has(> tr.sv-category-head-row) {
  table-layout: fixed !important;
}
#index tr.sv-category-head-row > td:nth-child(1),
#index tr.sv-category-data-row > td:nth-child(1) { width:80% !important; }
#index tr.sv-category-head-row > td:nth-child(2),
#index tr.sv-category-head-row > td:nth-child(3),
#index tr.sv-category-data-row > td:nth-child(2),
#index tr.sv-category-data-row > td:nth-child(3) { width:10% !important; }
#index tr.sv-category-data-row > td.sv-category-count { text-align:center !important; }