/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* INSTALLED FONT. Note: Do Not Change Syntax Or It Will Not Work! */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
@font-face 
{
	font-family: 'kodemono';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('https://d-w-o-o-w-b.neocities.org/archives/2024/etc/kodemono.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
}
@font-face 
{
	font-family: 'fred';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('https://d-w-o-o-w-b.neocities.org/archives/2024/etc/fred.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
} 
/* ||||||||||||||||||| */
/* CUSTOMIZE SCROLLBAR */
/* ||||||||||||||||||| */
html
{ 
	overflow: scroll;                       							/* Shows scrollbar           */
  	overflow-y: scroll; 												/* Show vertical scrollbar   */
	overflow-x: hidden; 												/* Hide horizontal scrollbar */
}											
::-webkit-scrollbar 													/* width */
{
	width: 20px;
}											
::-webkit-scrollbar-track 												/* Track */
{
	background: coral;
}										
::-webkit-scrollbar-thumb 												/* Handle */
{
	background: red;
}										
::-webkit-scrollbar-thumb:hover											/* Handle on hover */ 
{
	background: orange;
}
/* ||||||||||||||| */
/* MAIN BACKGROUND */
/* ||||||||||||||| */
body
{
	background: 
		linear-gradient(33deg, #076892 12%, transparent 0, transparent 88%, #ea3757 0), 			/* TRIANGLES */
		linear-gradient(144deg, transparent 37%, #4e584f 0, #574f4d 63%, transparent 0), 			/* STRUCTURE 1 */
		linear-gradient(33deg, transparent 37%, #5a4743 0, #a84f51 63%, transparent 0) #0f0f0f; 	/* STRUCTURE 2 and BACKGROUND */
    background-size: 144px 33px; 																	/* SIZE */
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Grid Container for the main menu. This wraps around the main menu. */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.gridcontainer
{
	background: transparent;
	width: 100%;	
	display: grid;
  	grid-template-columns: 6.5% 21% 1% 21% 1% 21% 1% 21% 6.5%; 			/* Total: 9 Columns. */
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Grid Content Container is for the main content. This is not for the main menu. */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
.gridcontentcontainer
{
	background: transparent;
	width: 100%;	
	display: grid;
  	grid-template-columns: 5% 90% 5%; 									/* Total: 3 Columns. */
}
/* |||||||||||||||||||||||||||||||||||| */
/* CUSTOMIZE MAIN MENU DROP-DOWN BUTTON */
/* |||||||||||||||||||||||||||||||||||| */
.mainmenu																/* Positions Main Menu. */
{
	top: 0;
	z-index: 90;
}
.dropdownbutton															/* Style the drop-down button. */
{
	color: #dcffc2;
	font-size: 16px;
	text-align: center;
	padding: 1px;
	width: 90%;
	height: 0;
	border-bottom: 50px solid #1826DF; 									/* Changes the trapezoid. */
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	background-color: #7878E9; 											/* Changes the color of the drop down button. */
	border-radius: 1px;	    
	cursor: pointer;
	z-index: 90;	
}
.dropdowncontent														/* Drop-down button content. */ 
{
	text-align: center;
	display: none;
  	position: absolute;
  	background-color: #1826DF; 											/* Changes the background of the dropdown menu, where the links are located. */
  	width: 250px;
  	border-radius: 1px;
  	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  	z-index: 90;
}
.mainmenu:hover .dropdownbutton 										/* Changes the color of the drop down button. */
{
	background-color: #B3B3F7; 											/* Changes the color of the drop down button on hover. */
  	color: #ff0000;
  	width: 80%;
  	border-bottom: 50px solid #B3B3F7; 									/* Changes the drop down button(bottom part) on hover. */
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	animation-name: textanimate;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes textanimate													/* Animate Text On Drop Down Button. */
{
	50%		{text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;}
    100%	{text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;}
}
.mainmenu:hover .dropdowncontent 										/* Shows the dropdown menu on hover. */
{
	display: block;
}
.dropdowncontent a 														/* Style of the links inside the dropdown. */
{
	color: #fcfcfc;
  	border-radius: 50px;
  	text-decoration: none;
  	display: block;
}
.dropdowncontent a:hover 												/* Changes the color of the dropdown links on hover. */
{
	background-color: #ffff31;
	color: #000000;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||| */
/* Attach a ribbon to a main menu link. Section 1. */
/* ||||||||||||||||||||||||||||||||||||||||||||||| */
.ribbon 
{
	width: 91px;
  	font-size: 16px;  
  	position: absolute;
  	right: -40px;
  	top: -6px;
  	text-align: center;
  	border-radius: 25px;
  	transform: rotate(20deg);
  	background-color: #ff0000;
  	color: white;
}
.disbandedribbon 
{
	width: 105px;
  	font-size: 32px;  
  	position: relative;
  	right: -135px;
  	top: -10px;
  	text-align: center;
  	border-radius: 25px;
  	transform: rotate(20deg);
  	background-color: #ff0000;
  	color: white;
}
/* ||||||||||||||||||| */
/* IMAGE CUSTOMIZATION */
/* ||||||||||||||||||| */
.nuguimage																/* This is for images of unknown k-idols. */
{
	margin: auto;
	font-size: 50px;
	background-color: #13F194;
	width: 60%;
	border-color: #13F194;
	border-radius: 15px;
}      
img																		/*  Dropdown Image. Smaller image. */
{
	width: 75px;
	height: 50px;
	z-index: 199;
	border-top: 5px solid #13F194;
	border-right: 5px solid #13F194;
	border-left: 5px solid #13F194;
	border-bottom: 5px solid #13F194;
	border-radius: 15px;
}
.bigimage																/* Dropdown Image. Bigger image. */
{
	z-index: 190;
	width: 415px;
	height: 375px;
	
}
.alienimage																/* Images with a different size such as the Monero QR Code. */
{
width: 100%;
height: 200px;
}
.monero
{
width: 250px;
height: 250px;
}
.monerotext
{
font-size: 13px;
}
/* |||||||||||||||||||||||||| */
/* Dropdown Image Attributes. */
/* |||||||||||||||||||||||||| */
.dropdown 
{
	position: relative;
    display: inline-block;
}
.dropdown-content 
{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 190;
    border-radius: 25px;
}
.dropdown:hover .dropdown-content 
{
    display: block;
}
.desc 
{
    padding: 1px;
    text-align: center;
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* TEXT Customization. 																									*/
/* For font-size, always use rem. rem can be manipulated by the web-browser, which makes it easier for viewers to read. */
/* px creates an absolute size that web-browsers aren't able to magnify. 												*/
/* 1rem is 16px. 1.5rem is 24px. 2rem is 32px. In order to get the px value, you will have to multiply a rem to 16. 	*/
/* I've noticed that using rem for other parts of a website may break it. It is best only for fonts. 					*/
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
h1
{
	color: #bc4763;
	font-size: 12rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
  	animation-name: titlechange;
  	animation-duration: 6s;
  	animation-iteration-count: infinite;
}   
@keyframes titlechange 
{
	0%		{color: #bc4763; text-shadow: -10px 0 #3584E4, 0 10px #438BE3, 10px 0 #5394E3, 0 -10px #679FE4;}
    25%  	{color: #CC3358; text-shadow: -10px 0 #33D17A, 0 10px #29DA78, 10px 0 #1EE477, 0 -10px #13EE75;}
    50%  	{color: #DA2651; text-shadow: -10px 0 #F6D32D, 0 10px #F4D338, 10px 0 #F4D648, 0 -10px #F2D85E;}
    75%  	{color: #E51D4D; text-shadow: -10px 0 #FF7800, 0 10px #EE7911, 10px 0 #E0791D, 0 -10px #D47928;}
    100% 	{color: #EE1146; text-shadow: -10px 0 #9141AC, 0 10px #9D3ABE, 10px 0 #A330C9, 0 -10px #B22AE0;}
}
h2
{
	color: #f5f5f5; 													/* Light text color */
	text-align: center; 												/* Center alignment of text */
	font-family: fred, helvetica, garamond, palatino; 					/* Monospace font */
	font-size: 3.5rem; 													/* Text size */
	text-shadow:														/* Multi-layered text-shadow for fire effect */
		px -1px 3px #fff, 												/* Innermost layer - intense heat (white) */
		px -2px 6px #FF3, 												/* Second layer - core of flame (yellow) */
		px -6px 12px #F90, 												/* Middle layer - body of flame (orange) */
		px -10px 20px #C33; 											/* Outermost layer - edges of flame (red) */
	animation: flicker 2s infinite;
} 
@keyframes flicker 														/* Define the animation named "flicker" */
{
																		/* 0% is the initial state of animation. */ 
																		/* 100% is the final state of animation. */
	0%, 100%
		{ 
		text-shadow: 
		0 -1px 3px #fff, 												/* Innermost layer - intense heat (white) */
        0 -2px 6px #FF3, 												/* Second layer - core of flame (yellow) */
        0 -6px 12px #F90, 												/* Middle layer - body of flame (orange) */
        0 -10px 20px #C33;												/* Outermost layer - edges of flame (red) */
		}
																		/* 50% is the middle state of animation. */
    50% 
		{ 
		text-shadow: 
        0 -2px 6px #fff, 												/* Innermost layer - intense heat (white) */
        0 -4px 12px #FF3, 												/* Second layer - core of flame (yellow) */
        0 -8px 16px #F90, 												/* Middle layer - body of flame (orange) */
        0 -12px 24px #C33;												/* Outermost layer - edges of flame (red) */
		}
}
h3
{
    color: #bc4763;
    font-size: 3rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
}
h4
{
    color: #bc4763;
    font-size: 2.5rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
}
h5
{
	color: #bc4763;
	font-size: 2rem;
	font-family: fred, helvetica, garamond, palatino;
	text-align: center;
}
h6
{
	color: #bc4763;
	font-size: 1.5rem;
	font-family: fred, helvetica, garamond, palatino;
	text-align: center;
}
p
{
    color: #ffffff;
    font-size: 1rem;
    font-family: kodemono, arial, verdana, tahoma;
}
mark																	/* Highlights Text */ 
{ 
    font-size: 1rem;
    background-color: #F6D32D;
    color: #000000;
    font-family: kodemono, arial, verdana, tahoma;
}
.nowrap 																/* Text stay together on one line. */
{
      	white-space: nowrap;
}
hr																		/* Visual Line Break */
{
	width: 85%;
	height: 50px;
	background-color: #366A37;
	border: 20px dotted #ea9314;
}
/* |||||||||||||||||||||||||||||||| */
/* MISCELLANEOUS TEXT CUSTOMIZATION */
/* |||||||||||||||||||||||||||||||| */
li																		/* Anime Plot Points. */
{
	color: #ffffff;
    font-size: 1rem;
    font-family: kodemono, arial, verdana, tahoma;
} 
.opinion																/* Anime Opinions. */
{
 	background-color: #EBBF68;
    color: black;
    font-size: 1rem;
    border: 20px dashed #2DF62E;
}
.kpopgroup
{
    color: #E02C57;
    font-size: 3rem;
    font-family: fred, helvetica, garamond, palatino;
    text-align: center;
}
.kpopdetails															/* KPOP Details. */
{
	margin: auto;
    background-color: #766ec8;
    border-radius: 5px;
	width: 90%;
	border: 5px dashed #DE8114;
	font-family: kodemono, arial, verdana, tahoma;
	font-size: 1rem;
	color: #000000;
}  
.contender																/* KPOP Contenders. */
{
	margin: auto;
	font-size: 1rem;
	font-family: kodemono, arial, verdana, tahoma;
	color: #a57c00;
	background-color: #141414;
	width: 92%;
	border: 1px solid #896400;
	border-radius: 2px;
	text-align: center;
}
/* |||||||||||||||||| */
/* Link Customization */
/* |||||||||||||||||| */
a:link, a:visited 
{
  	background-color: #1826DF;
  	color: white;
  	font-family: kodemono, arial, verdana, tahoma;
  	padding: 4px 8px;
  	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	border-radius: 1px;
  	z-index: 90;
}
a:hover, a:active 
{
	text-align: center;
  	background-color: #ffff31;
  	font-family: kodemono, arial, verdana, tahoma;
  	color: #000000;
  	z-index: 90;
}
/* ||||||||||||||||||| */
/* TABLE CUSTOMIZATION */
/* ||||||||||||||||||| */
table
{
	margin: auto;
	background-color: #2b1c0e;
	background-image: 
		linear-gradient(335deg, #907d6b 23px, transparent 23px),
		linear-gradient(155deg, #7a6550 23px, transparent 23px),
		linear-gradient(335deg, #614b37 23px, transparent 23px),
		linear-gradient(155deg, #483320 23px, transparent 23px);
	background-size: 58px 58px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	border: 1px solid #2b1c0e;
    border-radius: 25px;
    border-spacing: 15px 75px;
    width: 100%;
}
td
{
	text-align: center;
	width: 30%;
	background: #000000;
	border: 1px solid #000000;
}   
td:hover
{
	background: #000000;
	border: 1px solid #986A44;  	
}
.torchlighttable														/* "torchlighttable" is necessary for a different colspan and width. */
{
	background-color: #2b1c0e;
	background-image: 
		linear-gradient(335deg, #907d6b 23px, transparent 23px),
		linear-gradient(155deg, #7a6550 23px, transparent 23px),
		linear-gradient(335deg, #614b37 23px, transparent 23px),
		linear-gradient(155deg, #483320 23px, transparent 23px);
	background-size: 58px 58px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	width: 100%; /* 20% */
}
.torchlighttable2														/* "torchlighttable2" is necessary for a different colspan and width. */
{
	background-color: #2b1c0e;
	background-image: 
		linear-gradient(335deg, #907d6b 23px, transparent 23px),
		linear-gradient(155deg, #7a6550 23px, transparent 23px),
		linear-gradient(335deg, #614b37 23px, transparent 23px),
		linear-gradient(155deg, #483320 23px, transparent 23px);
	background-size: 58px 58px;
	background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
	width: 30%; /* 20% */
}
th														
{
    background-color: #3d3532;
}
.nohover																/* Removes the Hover Element such as "td:hover". */
{
	border: none;
	background: none;
	pointer-events: none;
} 
/* |||||||||||||||||||||||||||| */
/* This is the kpop search box. */
/* |||||||||||||||||||||||||||| */
#myInput 
{
	background-image: url(''); 											/* Add a search icon to input */
	background-size: 50px 50px;
	background-position: 1px 12px; 										/* Position the search icon */
	background-repeat: no-repeat; 										/* Do not repeat the icon image */
	width: 45%; 														/* Full-width */
	font-size: 1rem; 													/* Increase font-size */
	font-family: kodemono, arial, verdana, tahoma;
	padding: 12px 20px 12px 40px; 										/* Add some padding */
	border: 1px solid #000000; 											/* Add a grey border */
	margin-bottom: 12px; 												/* Add some space below the input */
	margin-left: 1px;
}
.makeitsticky
{
	position: -webkit-sticky; 											/* Sticky for Safari */
	position: sticky;
	z-index: 200;
	top: 0;
}
/* |||||||||||||||||||||||||||||||||||||| */
/* THIS IS THE KPOP OR ANIME SCORE METER. */
/* |||||||||||||||||||||||||||||||||||||| */
meter
{
	border: none;
    border-radius: 1px;
    background-color: transparent;
    width: 100%;
    height: 50px;
    display: block;
}
.finalscorehoover
{
	font-size: 24px;
	z-index: 100;
    color: #000000;
    font-family: fred, helvetica, garamond, palatino;
}
.finalscorehoover::after 
{
	content : attr(data-value);
	top: -40px;
	left: -10px;
	position:relative;
}
meter::-moz-meter-bar 
{
    background-image: 
		linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);
    border-radius: 1px;
    background-size: 100% 100%;
    animation-name: bloodbar;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes bloodbar
{
	10%		{background-image: linear-gradient( 90deg, #4A0404 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	20%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #4A0404 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	30%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #4A0404 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	40%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #4A0404 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
	50%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #4A0404 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
    60%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #4A0404 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
    70%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #4A0404 70%, #7B1E1E 80%, #6F1616 90%, #630F0F 100%);}
    80%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #4A0404 80%, #6F1616 90%, #630F0F 100%);}
    90%		{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #4A0404 90%, #630F0F 100%);}
    100%	{background-image: linear-gradient( 90deg, #C86B6B 10%, #BE5F5F 20%, #B65454 30%, #AD4848 40%, #A03C3C 50%, #943131 60%, #872828 70%, #7B1E1E 80%, #6F1616 90%, #4A0404 100%);}
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* STYLE THE VERTICAL HOVER TABS ON THE MAIN CONTENT PAGE. */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Style the tab */
.tab 
{
	float: left;
	border: 1px dashed #57E389;
	background-color: #62A0EA;
	padding: 5px 10px;
	width: 13%;
	height: 500px;
}

/* Style the buttons that are used to open the tab content */
.tab button 
{
	display: block;
	background-color: inherit;
	color: black;
	padding: 5px 10px;
	width: 100%;
	border: 1px dashed #57E389;
	outline: dashed;
	height: 100px;
	text-align: left;
	cursor: pointer;
}
/* Change background color of buttons on hover */
.tab button:hover 
{
	background-color: #F5C211;
}
/* Create an active/current "tab button" class */
.tab button.active 
{
	background-color: #F5C211;
}
/* Style the tab content */
.tabcontent 
{
	float: right;
	padding: 1px 1px;
	width: 82%;
	border-left: none;	
	overflow-y:scroll;
	height: 750px;
	display: none;
	border: 1px dotted #57E389;
}
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Accordion FOR CONTENT BLOGS(Button that hides/displays content) */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */      
.accordion 
{
	border-radius: 10px;
  	background-color: #8ff21c;
  	color: #000000;
  	cursor: pointer;
  	padding: 5px;
  	border: solid #76A73D;
  	text-align: left;
  	font-size: 20px;
  	font-family: kodemono, arial, verdana, tahoma;
  	transition: 0.4s;
}
.active, .accordion:hover 
{
	background-color: #FFFF00;
	color: #CC0000; 
	border: dotted #000000;
	border-radius: 10px;
}
.panel 
{
	margin: auto;
	width: 95%;
	height: 200px;
	padding: 0 5px;
	border: 3px dashed #3B6E4A;
	border-radius: 1px;
  	display: none;
  	background-color: #2E4535;
  	overflow: scroll;
  	overflow-y: scroll; 												/* Show vertical scrollbar */
	overflow-x: hidden; 												/* Show horizontal scrollbar */
}
.accordion:after 
{
	content: '\02795';													/* Unicode character for "plus" sign (+) */
  	font-size: 16px;
  	color: #777;
  	float: right;
  	margin-left: 5px;
}
.active:after 
{
	content: "\2796";													/* Unicode character for "minus" sign (-) */
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* Accordion PART 2 TOP BLOGS(Button that hides/displays content) */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */      
.accordion2 
{
	border-radius: 10px;
  	background-color: #8ff21c;
  	color: #000000;
  	cursor: pointer;
  	padding: 5px;
  	border: solid #76A73D;
  	text-align: left;
  	font-family: kodemono, arial, verdana, tahoma;
  	font-size: 20px;
  	transition: 0.4s;
}
.active2, .accordion2:hover 
{
	background-color: #FFFF00;
	color: #CC0000; 
	border: dotted #000000;
	border-radius: 10px;
}
.panel2 
{
	margin: auto;
	width: 95%;
	padding: 0 5px;
	border: 5px dashed #3B6E4A;
	border-radius: 1px;
  	display: none;
  	background-color: #28362c;
  	overflow: hidden;
}
.accordion2:after 
{
	content: '\02795';													/* Unicode character for "plus" sign (+) */
  	font-size: 16px;
  	color: #777;
  	float: right;
  	margin-left: 5px;
}
.active2:after 
{
	content: "\2796";													/* Unicode character for "minus" sign (-) */
}