The Gold Network: Soyworld | SNCApedia | SoyPlace


Please do not be surprised when the site randomly loads extremely slow. It is probably being DDoSed.


I'm not dead, just inactive for the moment. Faggot (talk) 20:16, 9 April 2026 (UTC)

Template:Cobwatch/styles.css: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
mNo edit summary
mNo edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Container shapes the cigar and provides cylindrical shading and leaf texture */
/* Wrapper provides positioning for the absolute layers */
.cobwatch-wrapper {
position: relative;
max-width: 650px;
margin: 1em auto;
}
 
/*
  Container shapes the cigar.
  overflow:hidden ensures the left cap/band corners are perfectly smooth.
*/
.cobwatch-cigar {
.cobwatch-cigar {
display: flex;
display: flex;
align-items: stretch;
align-items: stretch;
max-width: 650px; /* Reduced max-width to maintain a thinner aspect ratio */
margin: 1em auto;
background:  
background:  
repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
border-radius: 40px 8px 8px 40px; /* Adjusted radius for a thinner height */
border-radius: 40px 8px 8px 40px;
border: 1px solid #111;
border: 1px solid #111;
box-shadow: 0 8px 15px rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.05);
box-shadow: 0 8px 15px rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.05);
color: #ffdf00; /* Gold text */
color: #ffdf00;
font-family: "Times New Roman", serif;
font-family: "Times New Roman", serif;
overflow: hidden; /* Clips the band and inner elements to the rounded border */
overflow: hidden;
}
}


/* Neutralize MediaWiki's automatic paragraph and break tags inside flexbox */
/* Neutralize MediaWiki's automatic paragraph and break tags */
.cobwatch-cigar p {
.cobwatch-cigar p, .cobwatch-wrapper p { display: contents; margin: 0; }
display: contents;
.cobwatch-cigar br, .cobwatch-wrapper br { display: none; }
margin: 0;
}
.cobwatch-cigar br {
display: none;
}


/* The rounded mouth-piece (Cap) */
/* The rounded mouth-piece (Cap) */
.cobwatch-cap {
.cobwatch-cap {
width: 25px; /* Thinner cap */
width: 25px;
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
}
}


/* The Cigar Band (Holds the Image) */
/* The Cigar Band */
.cobwatch-band {
.cobwatch-band {
background: linear-gradient(to bottom, #111 0%, #222 15%, #000 20%, #d4af37 20%, #fff080 50%, #aa8000 80%, #000 80%, #222 85%, #111 100%);
background: linear-gradient(to bottom, #111 0%, #222 15%, #000 20%, #d4af37 20%, #fff080 50%, #aa8000 80%, #000 80%, #222 85%, #111 100%);
border-left: 2px solid #6b5400;
border-left: 2px solid #6b5400;
border-right: 2px solid #6b5400;
border-right: 2px solid #6b5400;
padding: 6px 12px; /* Reduced padding to squeeze height */
padding: 6px 12px;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
Line 45: Line 48:
}
}


/* Strip native borders off the image wrapper */
.cobwatch-band a.image {
.cobwatch-band a.image {
border: 2px solid #000;
border: 2px solid #000;
Line 57: Line 59:
.cobwatch-body {
.cobwatch-body {
flex: 1;
flex: 1;
padding: 8px 15px; /* Reduced padding to squeeze height */
padding: 8px 15px;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
Line 65: Line 67:


.cobwatch-title {
.cobwatch-title {
font-size: 1.5em; /* Slightly smaller text */
font-size: 1.5em;
font-weight: bold;
font-weight: bold;
text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
margin-bottom: 2px;
margin-bottom: 2px;
}
}
.cobwatch-audio { margin: 2px 0; }
.cobwatch-subtitle { font-size: 1em; font-style: italic; color: #ffca28; }
/*
  ==========================================
  THE ASH TIP (Visuals only)
  ==========================================
*/
.cobwatch-foot {
width: 50px;
position: relative;
background:
radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),
radial-gradient(circle at 65% 55%, rgba(255, 80, 0, 0.8) 2px, transparent 5px),
radial-gradient(circle at 45% 75%, rgba(255, 40, 0, 0.9) 1.5px, transparent 4px),
radial-gradient(circle at 75% 25%, rgba(255, 100, 0, 0.7) 1px, transparent 3px),
linear-gradient(to right, #111 0%, #2a2a2a 40%, #1a1a1a 80%, #050505 100%);
box-shadow: inset 5px 0 12px rgba(0,0,0,0.9);
border-left: 1px solid #000;
}
.cobwatch-burn-layer {
position: absolute;
top: 0; left: 0; bottom: 0;
width: 100%;
background:
repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
z-index: 2;
}
/*
  ==========================================
  THE INVISIBLE TRIGGER & ANIMATIONS
  ==========================================
*/


.cobwatch-audio {
/* An invisible button overlaying the right tip */
margin: 2px 0;
.cobwatch-trigger {
position: absolute;
top: 0; right: 0;
width: 50px;
height: 100%;
cursor: pointer;
outline: none;
z-index: 20;
}
}


.cobwatch-subtitle {
/* Animate the internal burn layer when the trigger is clicked */
font-size: 1em; /* Slightly smaller text */
.cobwatch-trigger:focus ~ .cobwatch-cigar .cobwatch-burn-layer,
font-style: italic;
.cobwatch-trigger:active ~ .cobwatch-cigar .cobwatch-burn-layer {
color: #ffca28;
animation: cobwatch-ignite-burn 2.5s ease-in forwards;
}
}


/* Realistic lit end / ash */
@keyframes cobwatch-ignite-burn {
.cobwatch-foot {
0% { width: 100%; box-shadow: none; }
width: 45px; /* Wider to show off the ash detail */
10% { width: 100%; box-shadow: inset -4px 0 6px rgba(255, 200, 0, 0.8), inset -10px 0 15px rgba(255, 42, 0, 0.9); }
background:  
100% { width: 0%; box-shadow: inset -4px 0 6px rgba(255, 200, 0, 0.8), inset -10px 0 15px rgba(255, 42, 0, 0.9); }
/* Gray ash spots / texture overlay */
}
radial-gradient(circle at 60% 25%, rgba(200,200,200,0.7) 2px, transparent 6px),
 
radial-gradient(circle at 75% 65%, rgba(180,180,180,0.8) 3px, transparent 8px),
/*  
radial-gradient(circle at 55% 80%, rgba(150,150,150,0.9) 2px, transparent 5px),
  ==========================================
/* Ember cracks (bright orange/red dots layered underneath the ash) */
  PARTICLES (Outside the cigar)
radial-gradient(circle at 35% 45%, #ffaa00 1px, transparent 3px),
  ==========================================
radial-gradient(circle at 38% 65%, #ff3300 2px, transparent 4px),
*/
radial-gradient(circle at 25% 30%, #ff5500 1.5px, transparent 3px),
 
/* Base burn gradient: Dark wrapper edge -> glowing cherry -> gray ash -> dark tip */
.cobwatch-particle-system {
linear-gradient(to right,  
position: absolute;
#111 0%,  
right: 0; top: 0;
#ff2a00 12%,  
width: 50px;
#ffcc00 16%,  
height: 100%;
#666 35%,  
z-index: 10;
#aaa 60%,  
}
#444 100%
 
);
/* --- Embers --- */
box-shadow:  
.cobwatch-spark {
-5px 0 15px rgba(255, 50, 0, 0.8), /* Outer orange glow */
position: absolute;
inset 4px 0 8px rgba(0,0,0,0.9); /* Inner shadow where leaf meets burn */
top: 50%; right: 0;
border-left: 1px solid #111;
width: 4px; height: 4px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 8px 4px #ff4500, 0 0 3px 2px #ffcc00;
opacity: 0;
}
 
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-1, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.1s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-2, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 0.3s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-3, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 0.6s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-4, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 0.9s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-5, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 1.2s; }
 
@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(35px, -45px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-2 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(50px, 20px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-3 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(25px, -20px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-4 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(45px, -60px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-5 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(20px, 35px) scale(0); opacity: 0; } }
 
/* --- Thick Smoke Plumes --- */
.cobwatch-smoke {
position: absolute;
top: 30%; right: -10px;
width: 14px; height: 14px;
background: rgba(220, 220, 230, 0.8);
border-radius: 50%;
box-shadow: 0 0 20px 15px rgba(220, 220, 230, 0.7);
opacity: 0;
}
 
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-1, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 0.2s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-2, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 0.8s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-3, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 1.5s; }
 
@keyframes cobwatch-smoke-rise-1 {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
30% { opacity: 0.9; }
100% { transform: translate(30px, -70px) scale(5); opacity: 0; }
}
@keyframes cobwatch-smoke-rise-2 {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
30% { opacity: 0.8; }
100% { transform: translate(15px, -90px) scale(6); opacity: 0; }
}
@keyframes cobwatch-smoke-rise-3 {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
30% { opacity: 1; }
100% { transform: translate(50px, -60px) scale(4.5); opacity: 0; }
}
}


/* Mobile adjustments */
/* Mobile adjustments */
@media (max-width: 600px) {
@media (max-width: 600px) {
.cobwatch-cigar {
.cobwatch-cigar { flex-direction: column; border-radius: 20px 20px 10px 10px; }
flex-direction: column;
.cobwatch-cap, .cobwatch-foot, .cobwatch-trigger, .cobwatch-particle-system { display: none !important; }
border-radius: 20px 20px 10px 10px;
}
.cobwatch-cap, .cobwatch-foot {
display: none;
}
.cobwatch-band {
.cobwatch-band {
border-left: none; border-right: none;
border-left: none; border-right: none;

Latest revision as of 19:33, 21 April 2026

/* Wrapper provides positioning for the absolute layers */
.cobwatch-wrapper {
	position: relative;
	max-width: 650px;
	margin: 1em auto;
}

/* 
  Container shapes the cigar. 
  overflow:hidden ensures the left cap/band corners are perfectly smooth.
*/
.cobwatch-cigar {
	display: flex;
	align-items: stretch;
	background: 
		repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
		linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
	border-radius: 40px 8px 8px 40px;
	border: 1px solid #111;
	box-shadow: 0 8px 15px rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.05);
	color: #ffdf00;
	font-family: "Times New Roman", serif;
	overflow: hidden;
}

/* Neutralize MediaWiki's automatic paragraph and break tags */
.cobwatch-cigar p, .cobwatch-wrapper p { display: contents; margin: 0; }
.cobwatch-cigar br, .cobwatch-wrapper br { display: none; }

/* The rounded mouth-piece (Cap) */
.cobwatch-cap {
	width: 25px;
	background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
}

/* The Cigar Band */
.cobwatch-band {
	background: linear-gradient(to bottom, #111 0%, #222 15%, #000 20%, #d4af37 20%, #fff080 50%, #aa8000 80%, #000 80%, #222 85%, #111 100%);
	border-left: 2px solid #6b5400;
	border-right: 2px solid #6b5400;
	padding: 6px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 5px 0 12px rgba(0,0,0,0.5), -5px 0 12px rgba(0,0,0,0.5);
	z-index: 2;
}

.cobwatch-band a.image {
	border: 2px solid #000;
	border-radius: 3px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.6);
	display: block;
	line-height: 0;
}

/* Main content area */
.cobwatch-body {
	flex: 1;
	padding: 8px 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.cobwatch-title {
	font-size: 1.5em;
	font-weight: bold;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
	margin-bottom: 2px;
}
.cobwatch-audio { margin: 2px 0; }
.cobwatch-subtitle { font-size: 1em; font-style: italic; color: #ffca28; }

/* 
  ==========================================
  THE ASH TIP (Visuals only)
  ==========================================
*/

.cobwatch-foot {
	width: 50px; 
	position: relative;
	background: 
		radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),
		radial-gradient(circle at 65% 55%, rgba(255, 80, 0, 0.8) 2px, transparent 5px),
		radial-gradient(circle at 45% 75%, rgba(255, 40, 0, 0.9) 1.5px, transparent 4px),
		radial-gradient(circle at 75% 25%, rgba(255, 100, 0, 0.7) 1px, transparent 3px),
		linear-gradient(to right, #111 0%, #2a2a2a 40%, #1a1a1a 80%, #050505 100%);
	box-shadow: inset 5px 0 12px rgba(0,0,0,0.9);
	border-left: 1px solid #000;
}

.cobwatch-burn-layer {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 100%;
	background: 
		repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
		linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
	z-index: 2;
}

/* 
  ==========================================
  THE INVISIBLE TRIGGER & ANIMATIONS
  ==========================================
*/

/* An invisible button overlaying the right tip */
.cobwatch-trigger {
	position: absolute;
	top: 0; right: 0;
	width: 50px;
	height: 100%;
	cursor: pointer;
	outline: none;
	z-index: 20;
}

/* Animate the internal burn layer when the trigger is clicked */
.cobwatch-trigger:focus ~ .cobwatch-cigar .cobwatch-burn-layer,
.cobwatch-trigger:active ~ .cobwatch-cigar .cobwatch-burn-layer {
	animation: cobwatch-ignite-burn 2.5s ease-in forwards;
}

@keyframes cobwatch-ignite-burn {
	0% { width: 100%; box-shadow: none; }
	10% { width: 100%; box-shadow: inset -4px 0 6px rgba(255, 200, 0, 0.8), inset -10px 0 15px rgba(255, 42, 0, 0.9); }
	100% { width: 0%; box-shadow: inset -4px 0 6px rgba(255, 200, 0, 0.8), inset -10px 0 15px rgba(255, 42, 0, 0.9); }
}

/* 
  ==========================================
  PARTICLES (Outside the cigar)
  ==========================================
*/

.cobwatch-particle-system {
	position: absolute;
	right: 0; top: 0;
	width: 50px; 
	height: 100%;
	z-index: 10;
}

/* --- Embers --- */
.cobwatch-spark {
	position: absolute;
	top: 50%; right: 0;
	width: 4px; height: 4px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 8px 4px #ff4500, 0 0 3px 2px #ffcc00;
	opacity: 0;
}

.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-1, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.1s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-2, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 0.3s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-3, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 0.6s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-4, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 0.9s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-5, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 1.2s; }

@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(35px, -45px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-2 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(50px, 20px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-3 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(25px, -20px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-4 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(45px, -60px) scale(0); opacity: 0; } }
@keyframes cobwatch-spark-fly-5 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(20px, 35px) scale(0); opacity: 0; } }

/* --- Thick Smoke Plumes --- */
.cobwatch-smoke {
	position: absolute;
	top: 30%; right: -10px;
	width: 14px; height: 14px;
	background: rgba(220, 220, 230, 0.8);
	border-radius: 50%;
	box-shadow: 0 0 20px 15px rgba(220, 220, 230, 0.7);
	opacity: 0;
}

.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-1, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 0.2s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-2, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 0.8s; }
.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-3, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 1.5s; }

@keyframes cobwatch-smoke-rise-1 {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }
	30% { opacity: 0.9; }
	100% { transform: translate(30px, -70px) scale(5); opacity: 0; }
}
@keyframes cobwatch-smoke-rise-2 {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }
	30% { opacity: 0.8; }
	100% { transform: translate(15px, -90px) scale(6); opacity: 0; }
}
@keyframes cobwatch-smoke-rise-3 {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translate(50px, -60px) scale(4.5); opacity: 0; }
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.cobwatch-cigar { flex-direction: column; border-radius: 20px 20px 10px 10px; }
	.cobwatch-cap, .cobwatch-foot, .cobwatch-trigger, .cobwatch-particle-system { display: none !important; }
	.cobwatch-band {
		border-left: none; border-right: none;
		border-top: 2px solid #6b5400; border-bottom: 2px solid #6b5400;
		background: linear-gradient(to right, #111 0%, #000 20%, #d4af37 20%, #fff080 50%, #aa8000 80%, #000 80%, #111 100%);
	}
}